:root{--bg: #faf7f1;--surface: #ffffff;--surface-2: #f4efe6;--ink: #23262f;--ink-soft: #555a68;--muted: #9a9ba6;--line: #ece6da;--accent: #6366f1;--brand: #5b5bd6;--good: #16a34a;--warn: #f59e0b;--bad: #ef4444;--r-lg: 26px;--r-md: 18px;--r-sm: 12px;--shadow: 0 10px 30px rgba(40, 35, 25, .08);--shadow-sm: 0 4px 14px rgba(40, 35, 25, .07);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{background:#e7e0d4}body{font-family:var(--font);color:var(--ink);background:var(--bg);max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;box-shadow:0 0 80px #0000001a;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{max-width:100%;display:block}.btn-primary{background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:15px 22px;border-radius:var(--r-md);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.btn-primary:active{transform:translateY(2px) scale(.99);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 30%,transparent)}.btn-primary:disabled{opacity:.4;box-shadow:none}.btn-ghost{background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:15px;padding:14px 20px;border-radius:var(--r-md);border:1.5px solid var(--line);transition:transform .12s ease,background .12s ease}.btn-ghost:active{transform:translateY(2px) scale(.99);background:var(--surface-2)}.grow{flex:1}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--ink-soft);font-size:18px;box-shadow:var(--shadow-sm);flex-shrink:0}.icon-btn svg{width:20px;height:20px}.icon-btn:active{transform:scale(.92)}.icon-btn-light{background:#ffffff40;color:#fff;box-shadow:none;backdrop-filter:blur(4px)}@keyframes riseIn{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}@keyframes pulseRing{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.5);opacity:0}to{opacity:0}}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes spinAccent{to{transform:rotate(360deg)}}.fade-rise{animation:riseIn .4s ease both}.splash{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 0%,#6c6cf0,#5b5bd6 55%,#4a47c2);color:#fff}.splash-logo{width:92px;height:92px;display:grid;place-items:center;background:#ffffff29;border-radius:28px;box-shadow:inset 0 0 0 1.5px #ffffff4d;animation:popIn .6s ease both}.splash-mark{font-size:48px;font-weight:800}.splash-name{font-size:30px;font-weight:800;letter-spacing:.5px;animation:riseIn .5s .15s ease both}.splash-tag{font-size:14px;opacity:.85;animation:riseIn .5s .3s ease both}.home{min-height:100dvh;padding:0 18px calc(40px + env(safe-area-inset-bottom))}.home-header{padding:calc(22px + env(safe-area-inset-top)) 4px 8px}.home-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.home-title{font-size:24px;font-weight:800;color:var(--ink)}.home-sub{font-size:14px;color:var(--muted);margin-top:3px}.avatar-btn{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--ink-soft);box-shadow:var(--shadow-sm)}.avatar-btn svg{width:22px;height:22px}.avatar-btn:active{transform:scale(.93)}.home-stats{display:flex;gap:10px;margin-top:16px}.stat-chip{flex:1;display:flex;align-items:center;gap:7px;background:var(--surface);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--shadow-sm)}.stat-emoji{font-size:20px}.stat-num{font-size:20px;font-weight:800}.stat-label{font-size:12px;color:var(--muted);margin-left:auto}.course-list{display:flex;flex-direction:column;gap:14px;margin-top:22px}.course-card{position:relative;display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow);overflow:hidden;animation:riseIn .4s ease both;transition:transform .14s ease}.course-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}.course-card:active{transform:scale(.985)}.course-icon{width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;font-size:30px;border-radius:16px;background:color-mix(in srgb,var(--accent) 14%,#fff)}.course-meta{flex:1;min-width:0}.course-title{display:block;font-size:17px;font-weight:800;color:var(--ink)}.course-blurb{display:block;font-size:13px;color:var(--muted);margin:3px 0 9px;line-height:1.4}.course-bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}.course-bar-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .5s ease}.course-count{display:block;font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}.course-chev{width:20px;height:20px;color:var(--muted);flex-shrink:0}.home-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:26px}.course-screen{min-height:100dvh;padding-bottom:calc(40px + env(safe-area-inset-bottom))}.course-hero{position:relative;padding:calc(20px + env(safe-area-inset-top)) 20px 28px;background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:#fff;border-radius:0 0 30px 30px;box-shadow:var(--shadow)}.course-hero .icon-btn-light{margin-bottom:10px}.course-hero-icon{font-size:44px}.course-hero-title{font-size:26px;font-weight:800;margin-top:6px}.course-hero-blurb{font-size:14px;opacity:.9;margin-top:5px;line-height:1.5}.lesson-list{display:flex;flex-direction:column;gap:11px;padding:18px}.lesson-row{display:flex;align-items:center;gap:13px;text-align:left;background:var(--surface);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--shadow-sm);animation:riseIn .35s ease both;transition:transform .12s ease}.lesson-row:active{transform:scale(.985)}.lesson-num{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);font-weight:800;font-size:15px}.lesson-num-done{background:var(--accent);color:#fff}.lesson-row-meta{flex:1;min-width:0}.lesson-row-title{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:700;color:var(--ink)}.lesson-row-emoji{font-size:18px}.lesson-row-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}.lesson-done-badge{font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff);padding:4px 9px;border-radius:99px}.lesson-loading{text-align:center;color:var(--muted);padding:30px;font-size:24px}.lesson{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}.lesson-top{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 10px}.progress-track{flex:1;height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .35s ease}.lesson-tag{font-size:12px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff);padding:5px 11px;border-radius:99px}.study-dots{flex:1;display:flex;gap:5px;justify-content:center}.dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s}.dot-on{background:var(--accent)}.lesson-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 20px}.lesson-foot{display:flex;gap:10px;align-items:center;padding:14px 20px calc(20px + env(safe-area-inset-bottom))}.study-card{background:var(--surface);border-radius:var(--r-lg);padding:34px 24px 26px;text-align:center;box-shadow:var(--shadow);animation:popIn .4s ease both}.study-ja{font-size:34px;font-weight:800;color:var(--ink);margin-top:20px;line-height:1.3;word-break:break-word}.study-romaji{font-size:16px;color:var(--accent);font-weight:600;margin-top:8px}.study-divider{height:1px;background:var(--line);margin:20px auto;width:60%}.study-meaning{font-size:20px;font-weight:700;color:var(--ink)}.study-note{font-size:13px;color:var(--ink-soft);margin-top:12px;line-height:1.6;background:var(--surface-2);padding:11px 14px;border-radius:var(--r-sm);text-align:left}.study-hint{font-size:12px;color:var(--muted);margin-top:18px}.speaker-btn{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 38%,transparent);margin:0 auto;flex-shrink:0}.speaker-btn svg{width:24px;height:24px;position:relative;z-index:1}.speaker-btn:active{transform:scale(.9)}.speaker-btn-big{width:72px;height:72px}.speaker-btn-big svg{width:32px;height:32px}.speaker-pulse{position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:.4;animation:pulseRing 2.4s ease-out infinite}.ex{animation:riseIn .32s ease both}.ex-prompt{text-align:center;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:18px}.ex-stimulus{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px;min-height:80px;justify-content:center}.ex-meaning{font-size:26px;font-weight:800;color:var(--ink);text-align:center;background:var(--surface);padding:22px 24px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);width:100%}.ex-options{display:flex;flex-direction:column;gap:11px}.opt{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);padding:16px 18px;font-size:17px;font-weight:600;color:var(--ink);text-align:left;transition:transform .1s ease,border-color .15s ease,background .15s ease}.opt:active{transform:scale(.985)}.opt-ja{font-weight:700}.opt-mark{margin-left:auto;font-weight:800;color:var(--good)}.opt-correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,#fff);color:var(--good)}.opt-wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,#fff);color:var(--bad)}.opt-dim{opacity:.45}.wb-stimulus{flex-direction:row;gap:14px;justify-content:flex-start;align-items:center}.wb-stimulus .speaker-btn{margin:0;width:46px;height:46px}.wb-stimulus .speaker-btn svg{width:22px;height:22px}.wb-meaning{flex:1;font-size:18px;font-weight:700;color:var(--ink);text-align:left}.wb-answer{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:2px dashed var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:8px;transition:border-color .2s,background .2s}.wb-ok{border-style:solid;border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,#fff)}.wb-no{border-style:solid;border-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,#fff)}.wb-placeholder{color:var(--muted);padding-left:6px}.wb-correct{font-size:16px;font-weight:700;color:var(--good);text-align:center;margin:6px 0 12px}.wb-bank{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:14px;min-height:50px}.wb-chip{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-sm);padding:11px 15px;font-size:17px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .1s ease}.wb-chip:active{transform:scale(.92)}.wb-chip-placed{background:color-mix(in srgb,var(--accent) 12%,#fff);border-color:transparent;color:var(--accent);box-shadow:none}.wb-actions{display:flex;gap:10px;margin-top:22px}.wb-clear{color:var(--muted);font-weight:700;font-size:14px;padding:14px 16px}.wb-check{flex:1}.speak-model{background:var(--surface);border-radius:var(--r-lg);padding:24px;text-align:center;box-shadow:var(--shadow-sm);margin-bottom:18px}.speak-ja{font-size:28px;font-weight:800;color:var(--ink);margin-top:16px;line-height:1.3}.speak-romaji{font-size:15px;color:var(--accent);font-weight:600;margin-top:6px}.speak-meaning{font-size:15px;color:var(--muted);margin-top:8px}.speak-score{text-align:center;margin-bottom:14px;animation:popIn .3s ease both}.speak-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:20px;font-weight:700}.sw-ok{color:var(--good)}.sw-miss{color:var(--bad);opacity:.6}.speak-pct{font-size:13px;color:var(--muted);margin-top:8px}.speak-note{text-align:center;font-size:13px;color:var(--muted);margin:14px 0}.mic-btn{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 40%,transparent);margin:6px auto 0}.mic-btn svg{width:34px;height:34px}.mic-btn:active{transform:scale(.92)}.mic-on{background:var(--bad);box-shadow:0 8px 20px color-mix(in srgb,var(--bad) 40%,transparent);animation:floatY 1.2s ease-in-out infinite}.speak-hint{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}.speak-skip{display:block;margin:16px auto 0;font-size:13px;color:var(--muted);text-decoration:underline}.speak-retry{display:flex;gap:10px;margin-top:10px}.speak-retry>*{flex:1}.feedback{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:16px 20px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;box-shadow:0 -8px 30px #0000001a;animation:slideUp .28s ease both}.feedback-correct{background:color-mix(in srgb,var(--good) 14%,#fff)}.feedback-partial{background:color-mix(in srgb,var(--warn) 16%,#fff)}.feedback-wrong{background:color-mix(in srgb,var(--bad) 12%,#fff)}.feedback-main{flex:1}.feedback-label{font-size:16px;font-weight:800}.feedback-correct .feedback-label{color:var(--good)}.feedback-partial .feedback-label{color:#b45309}.feedback-wrong .feedback-label{color:var(--bad)}.feedback-answer{display:flex;flex-direction:column;gap:2px;margin-top:6px}.fb-ja{font-size:18px;font-weight:800;color:var(--ink)}.fb-romaji{font-size:13px;color:var(--ink-soft)}.fb-meaning{font-size:14px;color:var(--ink-soft)}.fb-note{font-size:12px;color:var(--ink-soft);margin-top:3px}.feedback .btn-primary{background:var(--ink);box-shadow:none;padding:13px 20px}.done{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(40px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));text-align:center}.done-ring{position:relative;width:160px;height:160px;animation:popIn .5s ease both}.done-ring svg{width:160px;height:160px}.done-ring circle:last-child{transition:stroke-dasharray 1.2s ease}.done-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.done-pct{font-size:40px;font-weight:800;color:var(--ink)}.done-pct-label{font-size:13px;color:var(--muted)}.done-comment{font-size:20px;font-weight:800;margin-top:22px}.done-xp{font-size:16px;font-weight:700;color:var(--accent);margin-top:6px}.done-review{width:100%;margin-top:26px;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);text-align:left}.done-review-title{font-size:14px;font-weight:800;color:var(--ink-soft);margin-bottom:10px}.done-review-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.done-review-row:first-of-type{border-top:none}.dr-ja{font-size:16px;font-weight:700;color:var(--ink);display:block}.dr-romaji{font-size:12px;color:var(--muted);display:block}.dr-meaning{font-size:14px;color:var(--ink-soft);text-align:right;flex-shrink:0}.done-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:28px}.profile{min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) 20px 40px}.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:24px}.profile-top h1{font-size:20px;font-weight:800}.profile-avatar{width:84px;height:84px;margin:0 auto;display:grid;place-items:center;font-size:42px;border-radius:50%;background:var(--surface-2)}.profile-stats{display:flex;gap:10px;margin-top:22px}.profile-stats>div{flex:1;background:var(--surface);border-radius:var(--r-md);padding:16px 10px;text-align:center;box-shadow:var(--shadow-sm)}.profile-stats strong{display:block;font-size:24px;font-weight:800}.profile-stats span{font-size:12px;color:var(--muted)}.profile-section{margin-top:28px}.profile-label{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px}.lang-toggle{display:flex;gap:8px;background:var(--surface-2);padding:5px;border-radius:var(--r-md)}.lang-toggle button{flex:1;padding:11px;border-radius:13px;font-weight:700;font-size:14px;color:var(--ink-soft);transition:background .15s}.lang-toggle .lang-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.profile-reset{display:block;margin:40px auto 0;color:var(--bad);font-weight:700;font-size:14px}