:root{--ink:#1f2b2a;--muted:#68736f;--paper:#f5f1e9;--coral:#df7057;--mint:#c9ddd0;--line:#1f2b2a29}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,sans-serif}body.dark-mode{--ink:#e5e7eb;--muted:#9ca3af;--paper:#111827;--line:#94a3b847;color:var(--ink);background:#0b1120}body.dark-mode .hero-art{background-color:#263a37}body.dark-mode .mode{background:#111827;border-color:#334155}body.dark-mode .mode:hover{background:#1f2937}.shell{max-width:1180px;margin:0 auto;padding:24px 6vw 72px}.nav{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:22px;display:flex}.home-brand{align-items:center;gap:.85rem;display:flex}.brand{letter-spacing:.08em;font-weight:700}.brand em{color:var(--coral);letter-spacing:0;font-family:Fraunces,serif;font-size:1.25em;font-style:normal}.level,.eyebrow{color:var(--muted);letter-spacing:.13em;text-transform:uppercase;font-size:.72rem}.hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;min-height:430px;display:grid}.hero-copy{max-width:520px;animation:.7s ease-out both rise}.eyebrow{margin:0 0 20px}h1,h2,h3,p{margin-top:0}h1{margin-bottom:24px;font-family:Fraunces,serif;font-size:clamp(3.5rem,7vw,6rem);font-weight:600;line-height:.95}h1 span{color:var(--coral)}.intro{color:var(--muted);max-width:390px;font-size:1.05rem;line-height:1.7}.start-button{background:var(--ink);color:var(--paper);cursor:pointer;font:inherit;border:0;margin-top:18px;padding:15px 20px;text-decoration:none;transition:transform .2s,background .2s;display:inline-block}.start-button:hover{background:var(--coral);transform:translateY(-2px)}.start-button span{margin-left:28px}.hero-art{background-color:var(--mint);background-image:linear-gradient(#1f2b2a0d 1px,#0000 1px),linear-gradient(90deg,#1f2b2a0d 1px,#0000 1px);background-size:30px 30px;justify-content:center;align-items:center;gap:clamp(.5rem,3cqi,1.25rem);height:clamp(180px,24vw,280px);display:flex;position:relative;overflow:hidden;container-type:inline-size}.hero-art-label,.hero-art-note{color:var(--ink);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}.hero-art-label{z-index:1;white-space:nowrap;position:relative}.hero-art-note{font-size:1.08rem;position:absolute;bottom:20px;right:22px}.kanji{color:var(--coral);flex:0 auto;font-family:Fraunces,serif;font-size:clamp(5rem,30cqi,11rem);line-height:1;animation:1s ease-out both drift;transform:rotate(-8deg)}.puffin{object-fit:contain;flex:none;width:auto;max-width:30%;height:60%;display:block}.modes{border-top:1px solid var(--line);padding-top:34px}.section-heading{justify-content:space-between;align-items:flex-end;margin-bottom:25px;display:flex}h2{margin-bottom:0;font-family:Fraunces,serif;font-size:clamp(2rem,4vw,3.4rem);line-height:1}.section-note{color:var(--muted);margin-bottom:2px;font-size:.85rem}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.mode{border:1px solid var(--line);color:inherit;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:20px;text-decoration:none;transition:background .2s,transform .2s;display:grid}.mode:hover{background:#fffaf1;transform:translateY(-3px)}.mode-mark{background:var(--coral);color:#fff;justify-content:center;align-items:center;width:46px;height:46px;font-family:Fraunces,serif;font-size:1.5rem;display:flex}.mode h3{margin-bottom:5px;font-size:1rem}.mode p{color:var(--muted);margin-bottom:0;font-size:.82rem}.arrow{color:var(--coral);font-size:1.2rem}.mode:focus-visible,.start-button:focus-visible{outline:3px solid var(--coral);outline-offset:4px}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%{opacity:0;transform:rotate(-8deg)translateY(20px)}to{opacity:1;transform:rotate(-8deg)translateY(0)}}@media (max-width:980px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:2rem}}@media (max-width:700px){.shell{padding:18px 5vw 48px}.nav{padding-bottom:16px}.level{font-size:.62rem}.hero{grid-template-columns:1fr;gap:1.5rem;min-height:auto;padding:42px 0 48px}.hero-art{gap:clamp(.25rem,2.5cqi,.75rem);height:180px}.hero-art-label{letter-spacing:0;font-size:.6rem}.kanji{font-size:clamp(3.5rem,28cqi,7rem)}.hero-art-note{bottom:12px;right:12px}h1{font-size:clamp(3.1rem,14vw,4.5rem)}.section-heading{align-items:flex-start;gap:12px}.section-note{display:none}.mode-grid{grid-template-columns:1fr;gap:9px}.mode{padding:15px}}.compact-navigation{z-index:5;width:fit-content;position:relative}.study-heading{align-items:center;gap:.65rem;display:flex}.compact-navigation-toggle{cursor:pointer;background:#fff;border:1px solid #1f2b2a59;border-radius:8px;place-content:center;gap:.25rem;width:2.25rem;height:2.25rem;display:grid}.compact-navigation-toggle span{background:var(--ink);width:1.1rem;height:2px}.compact-navigation-toggle:hover,.compact-navigation-toggle[aria-expanded=true]{background:#ccfbf1}.compact-navigation-menu{border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;width:min(13rem,100vw - 2rem);padding:.35rem;display:flex;position:absolute;top:calc(100% + .5rem);left:0;box-shadow:0 12px 28px #0f172a33}.compact-navigation-menu:before{content:"";height:.5rem;position:absolute;top:-.5rem;left:0;right:0}.compact-navigation-menu a{color:var(--ink);border-radius:5px;padding:.6rem .7rem;font-size:.9rem;font-weight:600;text-decoration:none}.compact-navigation-menu a:hover,.compact-navigation-menu a.active{color:#134e4a;background:#ccfbf1}.compact-navigation-configure{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}.compact-navigation-configure-toggle{width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:.6rem .7rem;font-size:.9rem;font-weight:600}.compact-navigation-configure-toggle:hover,.compact-navigation-configure-toggle[aria-expanded=true]{color:#134e4a;background:#ccfbf1}.compact-navigation-configure-popup{border:1px solid var(--line);background:#f8fafc;border-radius:6px;margin:.25rem .35rem .35rem;padding:.65rem}.compact-navigation-theme-choice{color:var(--ink);cursor:pointer;justify-content:space-between;align-items:center;gap:.75rem;font-size:.88rem;font-weight:600;display:flex}.compact-navigation-theme-choice input{accent-color:#0f766e;width:1rem;height:1rem}.compact-navigation-rate-choice{color:var(--ink);flex-direction:column;gap:.35rem;margin-top:.6rem;font-size:.88rem;font-weight:600;display:flex}.compact-navigation-rate-choice input{accent-color:#0f766e;width:100%}body.dark-mode .compact-navigation-rate-choice{color:#dbeafe}body.dark-mode .compact-navigation-toggle,body.dark-mode .compact-navigation-menu{background:#111827;border-color:#334155}body.dark-mode .compact-navigation-toggle span{background:#dbeafe}body.dark-mode .compact-navigation-menu a{color:#dbeafe}body.dark-mode .compact-navigation-menu a:hover,body.dark-mode .compact-navigation-menu a.active{background:#172554}body.dark-mode .compact-navigation-configure{border-color:#334155}body.dark-mode .compact-navigation-configure-toggle{color:#dbeafe}body.dark-mode .compact-navigation-configure-toggle:hover,body.dark-mode .compact-navigation-configure-toggle[aria-expanded=true]{color:#dbeafe;background:#172554}body.dark-mode .compact-navigation-configure-popup{background:#1f2937;border-color:#334155}body.dark-mode .compact-navigation-theme-choice{color:#dbeafe}body.dark-mode .chapter-card{color:#e5e7eb;background:#1f2937;border-color:#334155}body.dark-mode .chapter-card h3{color:#f9fafb}body.dark-mode .chapter-button{color:#111827;background:#e5e7eb}body.dark-mode .lesson-card{color:#e5e7eb;background:#111827;border-color:#334155}body.dark-mode .lesson-card-header,body.dark-mode .lesson-subcard,body.dark-mode .lesson-quiz{color:#e5e7eb;background:#1f2937;border-color:#334155}body.dark-mode .lesson-subcard h3,body.dark-mode .lesson-example h4{color:#f9fafb}body.dark-mode .lesson-example{color:#e5e7eb;background:#1f2937}body.dark-mode .story-speak{background:#111827}body.dark-mode .story-lesson th{color:#e5e7eb;background:#172554}