:root{--bg: #070a18;--bg-elev: #0e1330;--surface: #121838;--surface-2: #182042;--border: #262f5e;--border-strong: #37437c;--text: #eaf0fc;--text-muted: #9aa6cc;--text-faint: #6b77a4;--accent: #5be2b0;--accent-dim: #3bb88c;--accent-ink: #042018;--gold: #ffcf5c;--gold-dim: #e39a2b;--amber: var(--gold);--wing-1: #63e8ff;--wing-2: #7b5cff;--danger: #ff7a86;--radius: 14px;--radius-sm: 10px;--tap: 48px;--maxw: 720px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 62% at 50% -12%,rgba(255,200,92,.16),transparent 62%),radial-gradient(85% 55% at 8% 12%,rgba(99,232,255,.11),transparent 68%),radial-gradient(90% 60% at 96% 22%,rgba(123,92,255,.15),transparent 70%),radial-gradient(120% 80% at 50% 108%,rgba(91,226,176,.08),transparent 62%)}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.9),transparent 60%),radial-gradient(1.1px 1.1px at 73% 8%,rgba(206,232,255,.8),transparent 60%),radial-gradient(1.6px 1.6px at 41% 64%,rgba(255,240,205,.75),transparent 60%),radial-gradient(1px 1px at 88% 48%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.2px 1.2px at 8% 78%,rgba(190,220,255,.7),transparent 60%),radial-gradient(1.3px 1.3px at 61% 88%,rgba(255,255,255,.6),transparent 60%);background-size:340px 340px,250px 250px,420px 420px,190px 190px,300px 300px,380px 380px}@media(prefers-reduced-transparency:reduce){body:before,body:after{display:none}}#root{min-height:100%}h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}button{font-family:inherit;cursor:pointer}a{color:var(--accent);text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}::selection{background:var(--accent);color:var(--accent-ink)}.app{min-height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-left)) 12px max(16px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;letter-spacing:-.02em;font-size:18px}.brand svg{width:28px;height:28px;flex:none}.brand .lo{color:var(--accent);background:linear-gradient(100deg,var(--accent) 0%,var(--wing-1) 42%,var(--wing-2) 74%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@supports not ((background-clip: text) or (-webkit-background-clip: text)){.brand .lo{-webkit-text-fill-color:var(--accent)}}.topbar .spacer{flex:1}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 96px max(16px,env(safe-area-inset-right));flex:1}.container.narrow{max-width:560px}.hero{position:relative;margin:-18px calc(-1*max(16px,env(safe-area-inset-left))) 0 calc(-1*max(16px,env(safe-area-inset-right)));padding:0 max(16px,env(safe-area-inset-left)) 2px;isolation:isolate}.hero-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 34%;opacity:.82}.hero-veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,24,.22) 0%,rgba(7,10,24,.6) 52%,var(--bg) 100%),linear-gradient(90deg,var(--bg) 0%,rgba(7,10,24,.25) 30%,rgba(7,10,24,.25) 70%,var(--bg) 100%)}.hero-copy{position:relative;padding:104px 0 26px}.hero-copy h1{margin:0;text-shadow:0 2px 18px rgba(7,10,24,.85)}@media(min-width:560px){.hero-copy{padding-top:150px}}.panel{background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tile{display:block;width:100%;text-align:left;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s ease,transform .12s ease,background .15s ease,box-shadow .15s ease}.tile:hover{border-color:var(--border-strong);background:var(--surface-2);box-shadow:0 0 0 1px color-mix(in srgb,var(--wing-2) 22%,transparent),0 12px 32px -18px var(--wing-2)}.tile:active{transform:translateY(1px)}.tile .tile-title{font-size:17px;font-weight:650}.tile .tile-sub{color:var(--text-muted);font-size:13.5px;margin-top:2px}.grid{display:grid;gap:12px}.grid.cols-2{grid-template-columns:1fr 1fr}@media(max-width:480px){.grid.cols-2{grid-template-columns:1fr}}.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-muted);font-variant-numeric:tabular-nums}.badge.due{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--border));background:color-mix(in srgb,var(--amber) 9%,transparent)}.badge.fresh{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 36%,var(--border));background:color-mix(in srgb,var(--accent) 8%,transparent)}.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.kbd{font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:15px;font-weight:600;transition:background .14s ease,border-color .14s ease,transform .1s ease,opacity .14s ease}.btn:hover{border-color:var(--accent-dim)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#6ff0c0 0%,var(--accent) 46%,#46c8d8 100%);border-color:transparent;color:var(--accent-ink);box-shadow:0 8px 26px -12px var(--accent),0 0 0 1px #ffffff0f inset}.btn.primary:hover{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dim) 60%,#35a8bc 100%);border-color:transparent}.btn.primary:disabled{box-shadow:none}.btn.ghost{background:transparent;border-color:var(--border)}.btn.ghost.on{color:var(--accent);border-color:var(--accent-dim);background:color-mix(in srgb,var(--accent) 12%,transparent)}.btn.block{width:100%}.btn.lg{min-height:56px;font-size:16px}.btn.recording{background:color-mix(in srgb,var(--danger) 16%,transparent);border-color:var(--danger);color:var(--danger);font-weight:600}.btn.recording:hover{background:color-mix(in srgb,var(--danger) 24%,transparent)}.rec-dot{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:var(--danger);animation:rec-pulse 1.3s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.25}}.input{width:100%;min-height:var(--tap);padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text);font-size:16px;transition:border-color .14s ease}.input:focus{outline:none;border-color:var(--accent)}.input::placeholder{color:var(--text-faint)}.label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:6px}.session-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.progress-track{flex:1;height:4px;border-radius:999px;background:var(--border);overflow:hidden}.progress-fill{height:100%;background:var(--accent);transition:width .3s ease}.prompt-kind{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}.prompt{font-size:24px;font-weight:600;line-height:1.3;overflow-wrap:break-word}.prompt.lg{font-size:27px}.de-text{font-size:22px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.reveal .answer,.reveal .rule,.rule,.answer,.tile-sub,.phrase-list li{overflow-wrap:break-word}.reveal{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elev);animation:rise .22s ease}.reveal .answer{font-size:22px;font-weight:650}.reveal .rule{margin-top:10px;color:var(--text-muted);font-size:14.5px;line-height:1.55}.reveal .rule b,.reveal .rule strong{color:var(--text);font-weight:600}.verdict{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.verdict.ok{color:var(--accent)}.verdict.no{color:var(--amber)}.close-note{color:var(--amber);font-size:13px}.theory{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev)}.theory>summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);list-style:none;-webkit-tap-highlight-color:transparent}.theory>summary::-webkit-details-marker{display:none}.theory>summary:after{content:" +";color:var(--text-faint)}.theory[open]>summary:after{content:" −"}.theory>summary:hover,.theory>summary:focus-visible{color:var(--text)}.theory>p{padding:0 14px 12px;margin:0;color:var(--text-muted);font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}.grade-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:18px}.grade{min-height:64px;padding:8px 2px 6px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color .14s ease,background .14s ease,transform .1s ease}.grade:hover{border-color:var(--accent-dim);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}.grade:active{transform:translateY(1px)}.grade svg{width:30px;height:30px}.grade small{font-weight:500;font-size:9.5px;letter-spacing:.02em;color:var(--text-faint);text-align:center;line-height:1.05}@media(max-width:360px){.grade small{display:none}}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:44px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:16px;display:inline-flex;align-items:center}.chip:disabled{opacity:.3}.assembly{min-height:56px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:10px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}.assembly:empty:before{content:"Tap the words in order";color:var(--text-faint);font-size:14px}.tap-word{cursor:help;border-bottom:1px dotted color-mix(in srgb,var(--text-faint) 45%,transparent);transition:color .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent}.tap-word:hover,.tap-word.active{color:var(--accent);border-bottom-color:var(--accent)}.tip{position:fixed;z-index:50;transform:translate(-50%,-100%);background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--text);box-shadow:var(--shadow);pointer-events:none;max-width:240px}.tip .src{color:var(--text-faint);font-size:11px}.mic-btn{width:96px;height:96px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;margin:8px auto;transition:border-color .15s ease,background .15s ease}.mic-btn svg{width:38px;height:38px}.mic-btn.listening{border-color:var(--accent);color:var(--accent);animation:pulse 1.4s ease-in-out infinite}.transcript{text-align:center;color:var(--text-muted);min-height:24px;font-size:17px}.stat-row{display:flex;gap:10px;flex-wrap:wrap}.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.center{text-align:center}.stack>*+*{margin-top:12px}.row{display:flex;align-items:center;gap:10px}.empty-state{text-align:center;padding:40px 16px;color:var(--text-muted)}.empty-state svg{width:64px;height:64px;opacity:.6;margin-bottom:12px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin:22px 2px 10px}.list-item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}button.hint-row{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:center}button.hint-row:hover{border-color:var(--border-strong)}.de-text.hint{letter-spacing:.08em;color:var(--accent)}.toggle-group{display:flex;flex-wrap:wrap;gap:8px}.toggle{padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);font-size:14px;font-weight:600}.toggle.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent-dim);color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 14px transparent}}.float-in{animation:rise .22s ease}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 2px 10px;font-size:13px}.ss-sheet{display:flex;flex-direction:column;gap:6px;line-height:1.9}.ss-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}.tok{font:inherit;font-size:17px;padding:2px 7px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);line-height:1.5}button.tok{cursor:pointer;min-height:34px;transition:transform .05s ease,background .12s ease}button.tok:active{transform:scale(.96)}.tok.plain{color:var(--text-muted);padding:2px}.tok.known{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.tok.add{color:#1a1206;background:var(--amber);border-color:var(--amber);font-weight:600}.tok.off{color:var(--text);background:transparent;border-color:transparent}.tok.off:hover{background:color-mix(in srgb,var(--amber) 16%,transparent)}.phrase-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.phrase-list .de{color:var(--text);font-weight:500}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:color-mix(in srgb,#000 62%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:scrim-in .14s ease}@media(min-width:560px){.scrim{align-items:center}}.dialog{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;padding:18px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-elev);box-shadow:var(--shadow);animation:dialog-in .16s ease}.dialog:focus{outline:none}.btn.skip-choice{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;height:auto;padding-top:10px;padding-bottom:10px}.btn.skip-choice .faint{font-size:12.5px;font-weight:400}@keyframes scrim-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-in{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.action-bar{position:sticky;bottom:0;display:flex;gap:10px;margin-top:16px;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}.action-bar .btn{flex:1}.tile.offline{opacity:.6}.tile.offline .tile-title:after{content:" · offline";color:var(--text-faint);font-weight:400}