@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#263b31;background:#fafbf7;font-synthesis:none;--bg: #fafbf7;--surface: #fff;--text: #263b31;--muted: #6c786f;--line: #e7ebe2;--green: #537e3d;--green-soft: #eff5e8;--purple: #8070ae;--purple-soft: #f4f0fa;--red: #db7469;--shadow: 0 4px 0 #e6e9e0;color-scheme:light}:root[data-theme=dark]{--bg: #17231e;--surface: #213028;--text: #edf2e7;--muted: #a4b2a7;--line: #36483c;--green: #a0c582;--green-soft: #2d4029;--purple: #b9a3e2;--purple-soft: #363044;--red: #ef978d;--shadow: 0 4px 0 #101c15;color-scheme:dark;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a,select{touch-action:manipulation}button,a{transition:background .18s,transform .18s,border-color .18s}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:5px}button svg,a svg{flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Manrope,sans-serif}.app-shell{max-width:1120px;margin:auto;padding:0 40px;min-height:100vh;display:flex;flex-direction:column}main{flex:1}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:28px;font-weight:800;letter-spacing:-1.4px;display:flex;align-items:center;gap:10px}.brand-icon{display:block;width:52px;height:52px;object-fit:contain;flex-shrink:0}.brand-end{font-weight:500}.brand-dot{color:var(--green)}.header-controls{display:flex;align-items:center;gap:20px}.language-picker{position:relative;display:flex;align-items:center}.language-picker select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--text);font-size:13px;font-weight:600;padding:10px 23px 10px 8px;cursor:pointer}.language-picker svg{position:absolute;right:3px;pointer-events:none}.control-divider{height:19px;width:1px;background:var(--line)}.theme-button{background:none;border:0;padding:8px;display:flex;color:var(--muted)}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;min-height:360px;gap:30px;padding:34px 0 20px}.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:1.8px;display:flex;align-items:center;gap:8px}.tiny-dot{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:48px;letter-spacing:-2.3px;line-height:1.22;font-weight:800}.hero h1{margin:20px 0}.hero h1>span{color:var(--green)}.hero-copy>p{color:var(--muted);font-size:14px;line-height:1.9;max-width:430px}.kana-art{height:285px;position:relative;isolation:isolate}.art-orbit{position:absolute;width:245px;height:245px;background:var(--green-soft);border-radius:50%;top:6px;left:75px;opacity:.75}.mini-card{position:absolute;width:131px;height:159px;border-radius:21px;border:2px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 7px 0 var(--line)}.mini-card>span{font-family:serif;font-size:81px;line-height:1.15}.mini-card small{font-size:10px;letter-spacing:2px;margin-top:12px}.back-card{left:196px;top:39px;transform:rotate(14deg);color:var(--purple);background:var(--purple-soft);border-color:color-mix(in srgb,var(--purple) 18%,var(--surface))}.front-card{left:78px;top:60px;transform:rotate(-12deg);color:var(--green)}.sparkle{position:absolute;color:var(--green)}.sparkle.one{top:24px;left:51px}.sparkle.two{top:207px;left:309px;color:var(--purple)}.art-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#d9b96d}.dot-one{top:37px;right:45px}.dot-two{bottom:69px;left:44px;width:5px;height:5px;background:var(--purple)}.art-caption{position:absolute;left:111px;bottom:8px;color:var(--muted);font-size:12px;font-style:italic;transform:rotate(-5deg)}.art-caption span{font-size:28px;position:absolute;right:-39px;top:-16px}.section-heading{margin:17px 0 23px}.section-heading h2{font-size:21px;letter-spacing:-.65px}.section-heading p{font-size:13px;color:var(--muted);margin-top:8px}.alphabet-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.alphabet-card{padding:26px 27px 23px;border:1.5px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);display:block}.alphabet-card:hover{transform:translateY(-4px);border-color:var(--green)}.alphabet-card.katakana:hover{border-color:var(--purple)}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px;gap:10px}.script-symbol{font-family:serif;font-size:35px;display:grid;place-items:center;width:59px;height:59px;background:var(--green-soft);border-radius:16px;color:var(--green)}.katakana .script-symbol{background:var(--purple-soft);color:var(--purple)}.card-tag{font-size:9px;font-weight:700;letter-spacing:1px;border-radius:6px;background:var(--green-soft);color:var(--green);padding:7px 9px}.katakana .card-tag{background:var(--purple-soft);color:var(--purple)}.alphabet-card h3{font-size:25px;letter-spacing:-.7px;display:flex;align-items:center;gap:14px}.alphabet-card h3 span{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:1px}.alphabet-card>p{font-size:13px;color:var(--muted);line-height:1.85;margin-top:10px;min-height:49px}.character-count{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;margin:23px 0}.kana-sample{margin-left:auto;font-family:serif;letter-spacing:2px;font-size:15px;color:var(--green)}.katakana .kana-sample{color:var(--purple)}.card-action{display:flex;align-items:center;justify-content:space-between;background:#73964e;color:#fff;font-size:13px;font-weight:700;border-radius:10px;padding:15px 18px;box-shadow:0 3px #567836}.katakana .card-action{background:#9883bd;box-shadow:0 3px #79659b}.benefits{display:flex;justify-content:center;gap:60px;padding:39px 0 43px}.benefits>div{display:flex;align-items:center;gap:13px}.benefit-icon{color:var(--muted);display:flex}.benefits strong{display:block;font-size:11px;font-weight:600}.benefits small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.footer-logo{display:block;width:28px;height:28px;object-fit:contain;flex-shrink:0}.site-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0 26px;color:var(--muted);font-size:10px}.site-footer>span:first-child{display:flex;align-items:center;gap:8px}.game-page{max-width:900px;margin:30px auto 45px}.game-top{display:flex;justify-content:space-between;align-items:center}.back-link{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600}.subtle-button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:10px 14px;font-size:12px}.game-heading{text-align:center;margin:32px 0}.game-heading .eyebrow,.summary-panel .eyebrow{justify-content:center}.game-heading h1{font-size:37px;margin:12px 0;letter-spacing:-1.4px}.game-heading p{font-size:13px;color:var(--muted)}.play-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:25px;align-items:start}.practice-panel{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:25px 36px 24px;text-align:center}.practice-script{font-size:10px;letter-spacing:1px;background:var(--green-soft);color:var(--green);padding:7px 12px;border-radius:20px}.big-kana{font-family:serif;font-size:130px;line-height:1.4;margin:17px 0 13px;color:var(--text)}.practice-panel label{font-weight:600;font-size:14px;display:block;margin-bottom:15px}.answer-wrap{position:relative}.answer-wrap input{width:100%;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);padding:16px 38px 16px 18px;text-align:center;font-size:18px;outline:none}.answer-wrap input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}.answer-wrap input::placeholder{color:var(--muted);font-size:14px}.input-icon{position:absolute;right:15px;top:18px;color:var(--muted);pointer-events:none}.input-hint{font-size:10px;color:var(--muted);line-height:1.7;margin-top:11px}.skip-button{display:inline-flex;gap:9px;align-items:center;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;margin-top:20px;padding:8px}.skip-button:hover{color:var(--green)}.keyboard-hint{font-size:10px;color:var(--muted);margin-top:8px;line-height:2}kbd{font-family:inherit;padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px}.session-panel{border:1px solid var(--line);border-radius:20px;padding:25px;background:var(--surface)}.stat-numbers{display:flex;justify-content:space-between;margin:25px 0 20px;text-align:center;gap:8px}.stat-numbers strong{display:block;font-size:25px;font-family:Manrope,sans-serif}.stat-numbers span{font-size:10px;color:var(--muted);display:block;margin-top:6px}.green-text{color:var(--green)}.red-text{color:var(--red)}.outcome-bar{display:flex;overflow:hidden;height:10px;border-radius:10px;background:var(--line)}.correct-bar{background:#7eaa59;transition:width .2s}.skipped-bar{background:var(--red);transition:width .2s}.empty-stats{font-size:10px;color:var(--muted);text-align:center;margin-top:14px}.previous-card{border-top:1px solid var(--line);margin-top:25px;padding-top:24px;min-height:156px;text-align:center}.previous-label{font-size:10px;color:var(--muted)}.previous-answer{display:flex;justify-content:center;align-items:center;gap:18px;margin:10px 0}.previous-answer>span{font-family:serif;font-size:41px}.previous-answer strong{font-size:22px}.previous-card small{display:flex;gap:5px;justify-content:center;font-size:11px}.resting-sprout{display:inline-flex;background:var(--green-soft);padding:14px;border-radius:50%;color:var(--green)}.previous-card p{font-size:12px;color:var(--muted);line-height:1.7;margin:15px auto;max-width:180px}.ime-note{font-size:10px;color:var(--muted);text-align:center;line-height:1.7;margin-top:16px}.summary-panel{max-width:500px;margin:30px auto 0;text-align:center;padding:35px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}.trophy{display:inline-flex;background:var(--green-soft);color:var(--green);padding:22px;border-radius:50%;margin-bottom:25px}.summary-panel h1{font-size:36px;margin:15px 0;letter-spacing:-1.3px}.summary-panel>p{font-size:13px;color:var(--muted);line-height:1.8}.summary-total{margin-top:22px}.summary-total strong{display:block;font-size:35px}.summary-total span{font-size:12px;color:var(--muted)}.primary-button{display:flex;align-items:center;justify-content:center;gap:15px;background:#73964e;color:#fff;border:0;border-bottom:3px solid #567836;padding:15px;border-radius:10px;width:100%;margin-top:30px;font-weight:700;font-size:14px}.summary-home{display:block;font-size:13px;margin:21px 0}.summary-panel>small{font-size:10px;color:var(--muted);line-height:1.6;display:block}.card-enter-active{transition:opacity .13s,transform .13s}.card-enter-from{opacity:0;transform:translateY(7px)}@media(min-width:1400px){.app-shell{max-width:1160px}.hero{min-height:400px}.alphabet-card{padding:28px 30px}.benefits{padding:45px 0}}@media(max-width:850px){.app-shell{padding:0 25px}.hero{grid-template-columns:1.4fr 1fr;gap:0}.hero h1{font-size:39px}.kana-art{transform:scale(.8);transform-origin:center right;margin-left:-65px}.benefits{gap:25px}.card-tag{font-size:8px}.alphabet-card{padding:23px 20px}.kana-sample{font-size:12px;letter-spacing:0}.play-layout{grid-template-columns:1.4fr 1fr}.practice-panel{padding:25px}.session-panel{padding:22px 18px}}@media(max-width:620px){.app-shell{padding:0 22px}.site-header{height:79px}.brand{font-size:25px}.header-controls{gap:12px}.hero{display:flex;flex-direction:column;padding:38px 0 15px;gap:2px}.hero-copy{text-align:center}.eyebrow{font-size:8px;letter-spacing:1.2px;justify-content:center}.hero h1{font-size:36px;letter-spacing:-1.7px;margin:18px 0}.hero-copy>p{font-size:13px;max-width:350px}.kana-art{width:360px;height:250px;transform:scale(.85);transform-origin:center;margin:-7px 0 -16px}.art-caption{bottom:-8px}.alphabet-grid{grid-template-columns:1fr;gap:22px}.section-heading{text-align:center;margin:16px 0 22px}.section-heading h2{font-size:19px}.section-heading p{font-size:12px}.alphabet-card{padding:23px}.card-tag{font-size:9px}.kana-sample{font-size:15px;letter-spacing:1px}.alphabet-card>p{min-height:auto}.benefits{display:grid;gap:23px;padding:35px 0}.benefits strong,.benefits small{font-size:12px}.site-footer{font-size:9px;gap:14px;align-items:center}.site-footer>span:last-child{text-align:right}.game-page{margin-top:23px}.game-heading{margin:28px 0}.game-heading h1{font-size:30px}.play-layout{grid-template-columns:1fr}.practice-panel{padding:24px}.big-kana{font-size:108px;margin:12px 0}.session-panel{padding:23px}.session-panel>.eyebrow{justify-content:flex-start}.previous-card{min-height:120px}.summary-panel{padding:28px 20px}.summary-panel h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}