.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--radius);font-weight:600;font-size:var(--text-base);border:1px solid transparent;transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);user-select:none;white-space:nowrap}.btn:active:not(:disabled){transform:scale(.975)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-sm{min-height:36px;padding:0 var(--sp-3);font-size:var(--text-sm)}.btn-lg{min-height:56px;padding:0 var(--sp-5);font-size:var(--text-lg);border-radius:var(--radius-lg)}.btn-full{width:100%}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--glow)}.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--surface-3);border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}.btn-danger:hover:not(:disabled){background:var(--danger);color:var(--on-accent)}.btn-success{background:var(--success-soft);color:var(--success);border-color:var(--success)}.btn-success:hover:not(:disabled){background:var(--success);color:var(--on-accent)}.btn-spinner,.spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}.spinner{width:26px;height:26px;color:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}:root[data-theme=cyber] .card{backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}.progress-wrap{display:flex;flex-direction:column;gap:var(--sp-1)}.progress{height:8px;background:var(--surface-3);border-radius:var(--radius-pill);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease)}.progress-accent{background:var(--accent)}.progress-success{background:var(--success)}.progress-accent2{background:var(--accent-2)}.ring{position:relative;display:grid;place-items:center;flex:none}.ring svg{position:absolute;inset:0}.ring-label{position:relative;display:grid;place-items:center;text-align:center;line-height:1.1}.segmented{display:flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill)}.segmented-item{flex:1;min-height:38px;padding:0 var(--sp-3);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;color:var(--text-dim);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);white-space:nowrap}.segmented-item.is-active{background:var(--accent);color:var(--on-accent)}.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:650;letter-spacing:.02em;border:1px solid transparent}.badge-neutral{background:var(--surface-3);color:var(--text-dim);border-color:var(--border)}.badge-accent{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}.badge-success{background:var(--success-soft);color:var(--success);border-color:var(--success)}.badge-warn{background:var(--accent-2-soft);color:var(--warn);border-color:var(--warn)}.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}.sheet-backdrop{position:fixed;inset:0;z-index:60;background:#0000008c;backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade var(--dur) var(--ease)}.sheet{width:100%;max-width:var(--page-max);max-height:86vh;background:var(--bg);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--sp-3);animation:rise var(--dur) var(--ease);overflow:hidden}.sheet-grip{width:42px;height:4px;border-radius:var(--radius-pill);background:var(--border-strong);margin:0 auto;flex:none}.sheet-title{font-size:var(--text-lg)}.sheet-body{overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3)}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{transform:translateY(14px);opacity:0}}.toast-stack{position:fixed;left:50%;transform:translate(-50%);bottom:calc(var(--nav-h) + var(--safe-bottom) + var(--sp-3));z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);width:min(92vw,460px);pointer-events:none}.toast{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-size:var(--text-sm);box-shadow:var(--shadow);animation:rise var(--dur) var(--ease)}.toast-success{border-color:var(--success);color:var(--success)}.toast-danger{border-color:var(--danger);color:var(--danger)}.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;padding:var(--sp-6) var(--sp-4);border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--text-dim)}.stat{display:flex;flex-direction:column;gap:2px}.stat-value{font-size:var(--text-2xl);font-weight:650;line-height:1.1;color:var(--text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stage{position:fixed;inset:0;z-index:0;pointer-events:none}.stage-scene{z-index:5;pointer-events:auto}.stage canvas{display:block;width:100%!important;height:100%!important}.stage-subtle{background:var(--bg);overflow:hidden;color:var(--accent)}.wash{position:absolute;width:140vmax;height:140vmax;border-radius:50%;filter:blur(60px);will-change:transform,opacity}.wash-a{top:-55vmax;left:-35vmax;background:radial-gradient(circle at 50% 50%,var(--accent-soft) 0%,transparent 62%);animation:drift-a 34s ease-in-out infinite alternate}.wash-b{bottom:-60vmax;right:-40vmax;background:radial-gradient(circle at 50% 50%,var(--accent-2-soft) 0%,transparent 58%);animation:drift-b 46s ease-in-out infinite alternate}@keyframes drift-a{0%{transform:translateZ(0) scale(1);opacity:.75}to{transform:translate3d(6vmax,4vmax,0) scale(1.12);opacity:1}}@keyframes drift-b{0%{transform:translateZ(0) scale(1.08);opacity:.6}to{transform:translate3d(-5vmax,-6vmax,0) scale(1);opacity:.9}}.torii-svg{position:absolute;left:50%;bottom:0;transform:translate(-50%);width:min(78vw,460px);opacity:.1;color:var(--accent)}.torii-svg svg{display:block;width:100%;height:auto}@media(prefers-reduced-motion:reduce){.wash{animation:none}}.app{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr auto}.app-plain{grid-template-rows:1fr}.app-main{min-height:0;overflow:hidden}.nav{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + var(--safe-bottom));background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border)}.nav-item{display:grid;place-items:center;gap:2px;min-height:var(--tap);padding:var(--sp-1);border-radius:var(--radius);color:var(--text-faint);text-decoration:none;transition:color var(--dur-fast) var(--ease)}.nav-item.is-active{color:var(--accent)}.nav-label{font-size:10px;font-weight:650;letter-spacing:.02em}.settings-fab{position:fixed;top:calc(var(--safe-top) + var(--sp-3));right:max(var(--sp-3),var(--safe-right));z-index:40;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);border:1px solid var(--border);color:var(--text-dim);text-decoration:none}.settings-fab:hover{color:var(--text);border-color:var(--border-strong)}.session{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden}.session-bar{display:flex;align-items:center;gap:var(--sp-3);padding:calc(var(--safe-top) + var(--sp-2)) var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px)}.session-body{min-height:0;padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));padding-left:max(var(--sp-4),var(--safe-left));padding-right:max(var(--sp-4),var(--safe-right));overflow:hidden}.session-body>*{max-width:var(--page-max);margin:0 auto;height:100%}.session-done{text-align:center;align-items:center}.banner{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);font-size:var(--text-sm);color:var(--text-dim)}.banner-warn{border-color:var(--warn);background:var(--accent-2-soft);color:var(--text)}.today{border-color:var(--accent)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--sp-3)}.plan-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.plan-list li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2)}.plan-list li.is-current{border-color:var(--accent);background:var(--accent-soft)}.plan-list li.is-past{opacity:.62}.plan-day{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--surface-3);font-size:var(--text-xs);font-weight:700}.mini-tag{font-size:10px;padding:1px 5px;border-radius:var(--radius-pill);background:var(--surface-3);color:var(--text-faint);letter-spacing:.02em}.link{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;padding:11px 3px;margin:-11px -3px}.onboarding .page-inner{padding-top:var(--sp-5);padding-bottom:var(--sp-7)}.onboard-hero{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-5) 0 var(--sp-3)}.onboard-mark{font-size:5rem;line-height:1;color:var(--accent);text-shadow:var(--glow)}.bullets{padding-left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);font-size:var(--text-sm);color:var(--text-dim)}.bullets strong{color:var(--text)}.check{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:700;border:1px solid var(--border);color:var(--text-faint);flex:none}.check-ok{border-color:var(--success);color:var(--success);background:var(--success-soft)}.check-failed{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}.ok-text{color:var(--success)}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}.theme-option{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);text-align:left}.theme-option.is-active{border-color:var(--accent);background:var(--accent-soft)}.theme-swatches{display:flex;gap:4px}.theme-swatches span{width:20px;height:20px;border-radius:6px;border:1px solid var(--border-strong)}.chip-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.chip{min-height:38px;padding:0 var(--sp-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-size:var(--text-sm);font-weight:600;text-transform:capitalize}.chip.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}.search{width:100%;min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:var(--text-base)}.search:focus{border-color:var(--accent);outline:none}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}.setting-row input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}.kv{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.kv li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.kv li span:last-child{text-align:right;word-break:break-word}.details summary{cursor:pointer;color:var(--text-dim)}.details[open] summary{margin-bottom:var(--sp-2)}code{font-family:var(--font-mono);font-size:.9em;padding:1px 4px;border-radius:4px;background:var(--surface-3)}.kana-row{display:flex;align-items:center;gap:var(--sp-2)}.kana-row-label{width:3.2em;flex:none;text-transform:uppercase;letter-spacing:.08em}.kana-cells{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.kana-cell,.kanji-cell{display:grid;place-items:center;gap:1px;min-width:54px;min-height:54px;padding:var(--sp-1);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);line-height:1}.kana-cell:hover,.kanji-cell:hover{border-color:var(--accent);background:var(--accent-soft)}.kana-char{font-size:var(--text-xl)}.kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:var(--sp-2)}.kanji-cell{min-height:72px}.kanji-char{font-size:var(--text-2xl)}.entry-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.entry{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"jp en" "kana en";align-items:center;gap:2px var(--sp-3);width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);text-align:left}.entry-tall{grid-template-columns:1fr;grid-template-areas:"jp" "en" "kana"}.entry-jp{grid-area:jp;font-size:var(--text-lg)}.entry-en{grid-area:en;color:var(--text-dim)}.entry:hover{border-color:var(--accent)}.form-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}.form-list li{display:flex;flex-direction:column;gap:0;padding:var(--sp-2);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.form-value{font-size:var(--text-base);color:var(--accent-text);text-align:left}.chat{display:flex;flex-direction:column;gap:var(--sp-2);max-height:46vh;overflow-y:auto;padding:var(--sp-2);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2)}.bubble{display:flex;max-width:88%}.bubble-user{align-self:flex-end}.bubble-assistant{align-self:flex-start}.bubble-inner{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);text-align:left}.bubble-user .bubble-inner{border-color:var(--accent);background:var(--accent-soft)}.suggestion{display:flex;flex-direction:column;gap:1px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--text);text-align:left;width:100%}.suggestion:hover{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}.correction{border-color:var(--warn)}.scene-overlay{position:fixed;inset:0;z-index:10;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none}.scene-bar{display:flex;align-items:center;gap:var(--sp-3);padding:calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-3);pointer-events:auto;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 75%,transparent),transparent)}.scene-controls{grid-row:3;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);padding-bottom:calc(var(--sp-4) + var(--safe-bottom));pointer-events:auto}.scene-card{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px)}.chart{display:flex;align-items:flex-end;gap:2px;height:86px;padding:var(--sp-2);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2)}.chart-col{flex:1;height:100%;display:flex;align-items:flex-end}.chart-bar{width:100%;border-radius:2px 2px 0 0;background:var(--accent);min-height:2px}.chart-bar.is-empty{background:var(--border)}.state-bars{display:flex;flex-direction:column;gap:var(--sp-2)}.state-row{display:flex;align-items:center;gap:var(--sp-2)}.state-label{width:5.4em;flex:none;text-transform:capitalize}.state-new{background:var(--text-faint)}.state-learning{background:var(--accent-2)}.state-review{background:var(--success)}.state-relearning{background:var(--danger)}.leech-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.leech-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.drill-header{display:flex;flex-direction:column;gap:var(--sp-2)}.drill-progress{height:3px;background:var(--surface-3);border-radius:var(--radius-pill);overflow:hidden}.drill-progress-fill{height:100%;background:var(--accent);transition:width var(--dur) var(--ease)}.drill-body{display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--sp-3);overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-2) 0;min-height:0}.card-face{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);color:inherit;text-align:center}.card-back{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);animation:reveal var(--dur) var(--ease)}@keyframes reveal{0%{opacity:0;transform:translateY(6px)}}.reading{font-size:var(--text-2xl);color:var(--accent-text)}.meaning{font-size:var(--text-lg);color:var(--text)}.note{max-width:34ch;text-align:center}.word{font-size:var(--text-3xl);line-height:1.2}.pattern{font-size:var(--text-2xl);color:var(--accent-text);text-align:center}.explain{max-width:42ch;text-align:left}.readings{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}.prompt,.build-prompt,.trace-prompt{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}.prompt-meaning{font-size:var(--text-2xl);font-weight:600;max-width:30ch}.answer-input{width:min(100%,340px);min-height:62px;padding:0 var(--sp-4);font-size:var(--text-2xl);text-align:center;border-radius:var(--radius);background:var(--surface-2);border:2px solid var(--border);color:var(--text);transition:border-color var(--dur-fast) var(--ease)}.answer-input:focus{border-color:var(--accent);outline:none}.answer-input::placeholder{color:var(--text-faint)}.verdict{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border);text-align:center;animation:reveal var(--dur) var(--ease)}.verdict-right{border-color:var(--success);background:var(--success-soft)}.verdict-wrong{border-color:var(--danger);background:var(--danger-soft)}.warn-text{color:var(--warn);text-align:center;max-width:38ch}.audio-orb{display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);color:var(--accent);transition:transform var(--dur-fast) var(--ease)}.audio-orb:active{transform:scale(.95)}.examples,.transcript{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);width:100%;max-width:460px}.example{display:flex;flex-direction:column;gap:2px;width:100%;padding:var(--sp-3);border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);color:inherit;text-align:left}.line{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);position:relative}.line-you{border-color:var(--accent);background:var(--accent-soft);margin-left:var(--sp-5)}.line-partner{margin-right:var(--sp-5)}.line-narrator{border-style:dashed;background:transparent;text-align:center}.line.is-current{box-shadow:0 0 0 2px var(--accent)}.replay{position:absolute;top:var(--sp-2);right:var(--sp-2)}.roleplay-body{align-items:stretch;justify-content:flex-start}.build-slot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);width:100%;min-height:74px;padding:var(--sp-3);border-radius:var(--radius);border:2px dashed var(--border);background:var(--surface-2)}.build-slot.is-right{border-style:solid;border-color:var(--success)}.build-slot.is-wrong{border-style:solid;border-color:var(--danger)}.build-pool{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;width:100%}.tile{min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);font-size:var(--text-lg);transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}.tile:active{transform:scale(.95)}.tile:disabled{opacity:.7}.tile-placed{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}.trace-result{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;max-width:40ch}.speak-body{gap:var(--sp-3);width:100%}.speak-target{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}.speak-front{font-size:clamp(2.5rem,13vw,4.5rem);line-height:1.15}.speak-result{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:100%;max-width:460px;text-align:center;animation:reveal var(--dur) var(--ease)}.rapid-clock{font-size:var(--text-xl);font-weight:700;color:var(--text-dim)}.rapid-clock.is-urgent{color:var(--danger);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}.rapid-prompt{font-size:var(--text-3xl);font-weight:650;text-align:center;max-width:26ch}.rapid-answer{font-size:var(--text-2xl);color:var(--accent-text);animation:reveal var(--dur-fast) var(--ease)}.rapid-summary{display:flex;gap:var(--sp-5);justify-content:center;text-align:center}.rapid-summary .stat{align-items:center}.mic{position:relative;display:grid;place-items:center;gap:var(--sp-1);width:100%;min-height:92px;padding:var(--sp-3);border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);color:var(--text);overflow:hidden;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);touch-action:none;user-select:none}.mic:disabled{opacity:.5}.mic.is-recording{background:var(--accent-soft);border-color:var(--accent)}.mic-ring{position:absolute;width:84px;height:84px;border-radius:50%;background:var(--accent);opacity:0;transition:transform 90ms linear;pointer-events:none}.mic.is-recording .mic-ring{opacity:.18}.mic-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface-3);color:var(--text-dim);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}.mic.is-recording .mic-icon{background:var(--accent);color:var(--on-accent)}.mic-label{position:relative;font-size:var(--text-sm);font-weight:600;color:var(--text-dim)}.mic.is-recording .mic-label{color:var(--accent-text)}.waveform{display:block;width:100%;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border)}.mora-diff{display:flex;flex-direction:column;gap:var(--sp-2)}.mora-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}.mora{display:grid;place-items:center;min-width:44px;padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);line-height:1.15}.mora-expected{font-size:var(--text-lg)}.mora-got{font-size:var(--text-xs);opacity:.85}.mora.is-ok{border-color:var(--success);background:var(--success-soft);color:var(--success)}.mora.is-wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.mora.is-missing{border-style:dashed;border-color:var(--warn);background:var(--accent-2-soft);color:var(--warn)}.pitch{display:flex;flex-direction:column;gap:var(--sp-1)}.pitch svg{display:block;width:100%;height:46px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:2px}.pitch-mora{display:grid;text-align:center;color:var(--text-dim)}.pitch-key{display:flex;align-items:center;gap:var(--sp-1)}.key-swatch{display:inline-block;width:14px;height:3px;border-radius:2px}.key-expected{background:var(--success)}.key-observed{background:var(--accent);margin-left:var(--sp-2)}.score-dial{display:grid;place-items:center;min-width:74px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);line-height:1.05}.score-value{font-size:var(--text-2xl);font-weight:700}.score-good{border-color:var(--success);color:var(--success);background:var(--success-soft)}.score-ok{border-color:var(--accent-2);color:var(--accent-2);background:var(--accent-2-soft)}.score-weak{border-color:var(--warn);color:var(--warn)}.score-bad{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}.trace-wrap{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}.trace-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);touch-action:none;cursor:crosshair}.trace-guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--text-faint);opacity:.16;font-family:var(--font-jp-display);font-size:15rem;line-height:1;user-select:none}.trace-grid{position:absolute;inset:0;pointer-events:none;opacity:.35}.trace-grid:before,.trace-grid:after{content:"";position:absolute;background:var(--border)}.trace-grid:before{left:50%;top:6%;bottom:6%;width:1px;transform:translate(-.5px)}.trace-grid:after{top:50%;left:6%;right:6%;height:1px;transform:translateY(-.5px)}.ratings{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}.rating{display:grid;place-items:center;gap:1px;min-height:58px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;font-size:var(--text-sm);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.rating:active{transform:scale(.96)}.rating small{font-size:var(--text-xs);font-weight:500;color:var(--text-faint);font-family:var(--font-mono)}.rating-1{border-color:var(--danger);color:var(--danger)}.rating-1:hover{background:var(--danger-soft)}.rating-2{border-color:var(--warn);color:var(--warn)}.rating-2:hover{background:var(--accent-2-soft)}.rating-3{border-color:var(--success);color:var(--success)}.rating-3:hover{background:var(--success-soft)}.rating-4{border-color:var(--accent-2);color:var(--accent-2)}.rating-4:hover{background:var(--accent-2-soft)}:root{--font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "MS PGothic", sans-serif;--font-jp-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--text-glyph: clamp(5rem, 34vw, 11rem);--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.5rem;--sp-6: 2rem;--sp-7: 3rem;--radius-sm: 8px;--radius: 14px;--radius-lg: 22px;--radius-pill: 999px;--tap: 44px;--dur-fast: .12s;--dur: .22s;--dur-slow: .42s;--ease: cubic-bezier(.22, 1, .36, 1);--page-max: 720px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--nav-h: 62px}:root,:root[data-theme=sumi]{color-scheme:dark;--bg: #0f1420;--bg-deep: #090d16;--surface: #161d2c;--surface-2: #1e2739;--surface-3: #26314a;--border: #2b3549;--border-strong: #3a4761;--text: #eef1f7;--text-dim: #a7b1c6;--text-faint: #6d7891;--accent: #e34234;--accent-hover: #f2564a;--accent-soft: rgba(227, 66, 52, .16);--accent-text: #ff8a7d;--on-accent: #ffffff;--accent-2: #d9a94c;--accent-2-soft: rgba(217, 169, 76, .16);--success: #4caf8f;--success-soft: rgba(76, 175, 143, .16);--warn: #d9a94c;--danger: #e05a5a;--danger-soft: rgba(224, 90, 90, .16);--focus: #7fb2ff;--shadow: 0 14px 40px rgba(0, 0, 0, .55);--shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);--glow: 0 0 28px rgba(227, 66, 52, .35);--three-bg: #0b1018;--three-fog: #0f1420;--three-key: #ffd9c8;--three-accent: #e34234;--three-accent-2: #d9a94c;--bloom: .55;--grain-opacity: .035}:root[data-theme=zen]{color-scheme:light;--bg: #faf6ef;--bg-deep: #f2ece1;--surface: #ffffff;--surface-2: #f6f1e8;--surface-3: #ede6d9;--border: #e0d7c7;--border-strong: #c9bda7;--text: #23201b;--text-dim: #5d574c;--text-faint: #8d8576;--accent: #6f8050;--accent-hover: #5d6d42;--accent-soft: rgba(111, 128, 80, .14);--accent-text: #4d5a38;--on-accent: #ffffff;--accent-2: #c1553b;--accent-2-soft: rgba(193, 85, 59, .14);--success: #4a7a5e;--success-soft: rgba(74, 122, 94, .14);--warn: #b5842f;--danger: #b8452f;--danger-soft: rgba(184, 69, 47, .12);--focus: #3f6ea8;--shadow: 0 12px 32px rgba(90, 78, 58, .14);--shadow-sm: 0 3px 10px rgba(90, 78, 58, .1);--glow: 0 0 20px rgba(111, 128, 80, .22);--three-bg: #f3ede2;--three-fog: #faf6ef;--three-key: #fff4e0;--three-accent: #6f8050;--three-accent-2: #c1553b;--bloom: .12;--grain-opacity: .05}:root[data-theme=cyber]{color-scheme:dark;--bg: #07070c;--bg-deep: #040408;--surface: rgba(22, 22, 38, .72);--surface-2: rgba(32, 30, 54, .78);--surface-3: rgba(44, 40, 72, .82);--border: rgba(120, 110, 190, .28);--border-strong: rgba(160, 140, 255, .45);--text: #f2f0ff;--text-dim: #a7a2cc;--text-faint: #6d6890;--accent: #ff2e88;--accent-hover: #ff5aa0;--accent-soft: rgba(255, 46, 136, .18);--accent-text: #ff7ab3;--on-accent: #0a0710;--accent-2: #00e5ff;--accent-2-soft: rgba(0, 229, 255, .16);--success: #22e3a4;--success-soft: rgba(34, 227, 164, .16);--warn: #ffcc4d;--danger: #ff4d6d;--danger-soft: rgba(255, 77, 109, .18);--focus: #00e5ff;--shadow: 0 18px 50px rgba(0, 0, 0, .7);--shadow-sm: 0 4px 18px rgba(0, 0, 0, .5);--glow: 0 0 34px rgba(255, 46, 136, .45);--three-bg: #05050b;--three-fog: #07070c;--three-key: #d9f6ff;--three-accent: #ff2e88;--three-accent-2: #00e5ff;--bloom: 1;--grain-opacity: .02}*,*:before,*:after{box-sizing:border-box}*{margin:0;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;height:100%}body{height:100%;font-family:var(--font-ui);font-size:var(--text-base);line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none}#root{height:100%;isolation:isolate}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);background-clip:content-box;border:3px solid transparent;border-radius:var(--radius-pill);transition:background-color var(--dur) var(--ease)}::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}::-webkit-scrollbar-corner{background:transparent}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}:focus:not(:focus-visible){outline:none}::selection{background:var(--accent-soft);color:var(--text)}.jp{font-family:var(--font-jp);line-break:strict;word-break:normal;overflow-wrap:anywhere}.jp-display{font-family:var(--font-jp-display);font-weight:400;letter-spacing:.02em}.glyph{font-family:var(--font-jp-display);font-size:var(--text-glyph);line-height:1;display:grid;place-items:center;aspect-ratio:1;user-select:none}.romaji{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-faint);letter-spacing:.04em}.app{position:relative;height:100%;display:grid;grid-template-rows:1fr auto}.page{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--safe-top) + var(--sp-4)) var(--sp-4) var(--sp-5);padding-left:max(var(--sp-4),var(--safe-left));padding-right:max(var(--sp-4),var(--safe-right))}.page-inner{max-width:var(--page-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}.drill-shell{display:grid;grid-template-rows:auto 1fr auto;height:100%;gap:var(--sp-3)}.thumb-zone{display:flex;flex-direction:column;gap:var(--sp-2);padding-bottom:var(--safe-bottom)}.row{display:flex;align-items:center;gap:var(--sp-2)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.col{display:flex;flex-direction:column;gap:var(--sp-2)}.grow{flex:1}.center{display:grid;place-items:center}h1{font-size:var(--text-2xl);line-height:1.2;font-weight:650;letter-spacing:-.01em}h2{font-size:var(--text-xl);line-height:1.25;font-weight:620}h3{font-size:var(--text-lg);font-weight:600}.dim{color:var(--text-dim)}.faint{color:var(--text-faint)}.small{font-size:var(--text-sm)}.xs{font-size:var(--text-xs)}.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);font-weight:600}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}