:root{--bg: #14110f;--bg-raise: #1e1a17;--bg-raise2: #282320;--ink: #ece5dc;--ink-dim: #9c9188;--ink-faint: #6b625b;--accent: #e8a33d;--accent-ink: #1a1206;--good: #7fc97f;--good-dim: #2c4030;--bad: #e07a6a;--bad-dim: #46261f;--info: #8ab8d8;--line: #38312c;--radius: 10px;--font: "Avenir Next", "Segoe UI", system-ui, sans-serif;--mono: "SF Mono", ui-monospace, Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}body{min-height:100dvh}#app{min-height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;width:min(860px,100%);margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}h1,h2{font-weight:650;letter-spacing:-.01em;margin:0}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn{background:var(--bg-raise2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;font-size:15px;min-height:44px;transition:background .12s ease,transform 60ms ease}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}.btn.back{min-width:44px}.home{justify-content:center;gap:28px}.home-header{text-align:center}.home-header h1{font-size:44px;letter-spacing:.02em}.home-header .subtitle{color:var(--ink-dim);margin:8px auto 0;max-width:42ch}.streak{color:var(--accent);font-weight:600;margin:10px 0 0}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.mode-card{text-align:left;background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:6px;transition:border-color .12s ease,transform 60ms ease}.mode-card:hover{border-color:var(--accent)}.mode-card:active{transform:scale(.98)}.mode-card h2{font-size:19px}.mode-card .tagline{color:var(--ink-dim);margin:0;font-size:14px}.mode-card .mode-progress{color:var(--accent);margin:0;font-size:13px}.mode-card.soon{opacity:.45;cursor:default}.mode-card.soon .mode-progress{color:var(--ink-faint)}.home-footer{display:flex;flex-direction:column;gap:8px;align-items:center}.volume{color:var(--ink-dim);font-size:14px;display:flex;gap:10px;align-items:center}.volume input{accent-color:var(--accent);width:160px}.hint{color:var(--ink-faint);font-size:13px;margin:0;text-align:center}.levels{gap:16px}.levels-header{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.levels-header h1{font-size:30px}.levels-header .tagline{color:var(--ink-dim);margin:0}.level-list{display:flex;flex-direction:column;gap:8px}.level-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;flex-wrap:wrap}.level-info{display:flex;flex-direction:column;gap:3px;min-width:0}.level-name{font-weight:600;display:flex;align-items:center;gap:8px}.level-num{color:var(--accent);font-family:var(--mono);font-size:13px}.level-sub{color:var(--ink-dim);font-size:13px}.level-pb{color:var(--ink-faint);font-size:12px;font-family:var(--mono)}.level-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}.badge.qualified{background:var(--good-dim);color:var(--good)}.badge.mastered{background:#4a3413;color:var(--accent)}.badge.upnext{background:#1d3a52;color:#7dc4ff}.badge.pending{background:#3d2e13;color:var(--accent);text-transform:none;letter-spacing:0}.stars .star{color:var(--ink-faint);opacity:.45;font-size:14px}.stars .star.on{color:var(--accent);opacity:1}.stars-big .star{font-size:34px;margin:0 2px}.custom-panel{background:var(--bg-raise);border:1px dashed var(--line);border-radius:var(--radius);padding:12px 14px;color:var(--ink-dim)}.custom-panel summary{cursor:pointer;font-size:14px}.custom-body{display:flex;flex-direction:column;gap:12px;padding-top:12px}.chk-grid{display:flex;flex-wrap:wrap;gap:8px 14px}.chk{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--ink)}.chk input{accent-color:var(--accent);width:16px;height:16px}.custom-dir{display:flex;gap:8px;align-items:center;font-size:14px}.custom-dir select{background:var(--bg-raise2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:14px}.custom-actions{display:flex;gap:10px}.round{gap:10px}.round-header{display:flex;align-items:center;gap:12px}.round-title{font-weight:600;font-size:15px;color:var(--ink-dim);flex:1}.round-stats{display:flex;gap:14px;align-items:baseline;font-family:var(--mono);font-size:14px}.round-stats .score{color:var(--ink);font-size:17px;font-weight:700}.streak-chip{color:var(--ink-faint)}.streak-chip.hot{color:var(--accent);font-weight:700}.clock{color:var(--ink-dim);min-width:3.5ch;text-align:right}.clock-bar{height:4px;background:var(--bg-raise2);border-radius:2px;overflow:hidden}.clock-bar-fill{height:100%;width:100%;background:var(--accent);border-radius:2px}.clock-bar-fill.low{background:var(--bad)}.round-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:180px;padding:10px 0}.round-status{font-size:30px;font-weight:700;letter-spacing:-.01em}.round-status.listening{color:var(--ink-faint);animation:pulse 1.2s ease-in-out infinite}.round-status.answering{color:var(--ink)}.round-status.pending{color:var(--info)}.round-status.feedback.correct{color:var(--good)}.round-status.feedback.wrong{color:var(--bad)}.round-status.feedback.info{color:var(--info)}.round-detail{color:var(--ink-dim);font-size:15px;min-height:1.2em}.round-points{font-family:var(--mono);font-size:16px;min-height:1.2em}.round-points.gain{color:var(--good)}.round-points.zero{color:var(--ink-faint)}@keyframes pulse{50%{opacity:.45}}.window-bar{width:min(320px,70%);height:3px;background:var(--bg-raise2);border-radius:2px;overflow:hidden;visibility:hidden}[data-phase=answering] .window-bar{visibility:visible}.window-bar-fill{height:100%;background:var(--ink-dim)}.round-controls{display:flex;justify-content:center;gap:10px;min-height:0}.keypad{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}.keypad-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.key{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-raise);border:1px solid var(--line);border-radius:8px;padding:8px 4px;min-width:56px;min-height:54px;flex:1 1 0;max-width:84px;transition:background .1s ease,border-color .1s ease,transform 50ms ease}.key:not(:disabled):hover{border-color:var(--accent)}.key:not(:disabled):active{transform:scale(.94);background:var(--bg-raise2)}.key:disabled{cursor:default}.key.inactive{opacity:.22}.key.selected{border-color:var(--info);background:var(--bg-raise2)}[data-phase=listening] .key:not(.inactive),[data-phase=feedback] .key:not(.inactive){opacity:.55}.key-cap{font-family:var(--mono);font-size:11px;color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:16px}.key-label{font-size:15px;font-weight:650}.keypad[data-kind=comparison] .key{max-width:200px;padding:14px}.inversion-row.hidden{display:none}.seq-key{color:var(--accent);font-weight:650;font-size:16px}.seq-options{display:flex;flex-direction:column;gap:8px;width:min(480px,100%)}.seq-option{display:flex;align-items:center;gap:12px;background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;transition:border-color .1s ease,transform 50ms ease}.seq-option:hover{border-color:var(--accent)}.seq-option:active{transform:scale(.98)}.seq-option.truth{border-color:var(--good);background:var(--good-dim)}.seq-option.wrong{border-color:var(--bad);background:var(--bad-dim)}.opt-num{font-family:var(--mono);font-size:12px;color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:1px 7px}.opt-chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:15px;font-weight:600;padding:2px 6px;border-radius:6px;transition:background .12s ease,color .12s ease}.chip.lit{background:var(--accent);color:var(--accent-ink)}.chip.diff{background:var(--bad);color:#fff}.results{justify-content:center;align-items:center;gap:26px;text-align:center}.results-header{display:flex;flex-direction:column;gap:12px;align-items:center}.results-header h1{font-size:26px}.callout{color:var(--good);font-weight:650;margin:0}.callout.pending{color:var(--accent)}.results-stats{display:flex;flex-direction:column;gap:8px;background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;min-width:min(380px,90vw)}.stat{display:flex;justify-content:space-between;gap:30px;font-size:15px}.stat-label{color:var(--ink-dim)}.stat-value{font-family:var(--mono)}.results-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}@media (max-width: 520px){.home-header h1{font-size:36px}.round-status{font-size:24px}.key{min-width:44px;max-width:none;padding:6px 2px}.key-label{font-size:13px}.level-actions{width:100%;justify-content:space-between}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}