:root{--paper: #f5f6fa;--surface: #ffffff;--sunk: #eceef5;--ink: #141a31;--muted: #5a6382;--line: #d9deea;--cobalt: #2440b5;--cobalt-soft: #e3e8fb;--on-cobalt: #ffffff;--saffron: #b97c06;--saffron-soft: #fbf0d6;--heard: #1d7552;--heard-soft: #dff3ea;--missed: #b2261e;--missed-soft: #fbe3e1;--shadow: 0 1px 0 rgba(20, 26, 49, .06), 0 8px 24px -12px rgba(20, 26, 49, .18);--font-display: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;--font-label: "Alegreya Sans SC", "Alegreya Sans", "Gill Sans", system-ui, sans-serif;--step--1: .875rem;--step-0: 1.0625rem;--step-1: 1.3rem;--step-2: 1.65rem;--step-3: 2.15rem;--step-4: 2.9rem;--radius: 14px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper: #0c1120;--surface: #141b2e;--sunk: #0f1527;--ink: #e8ebf6;--muted: #98a1bf;--line: #26304a;--cobalt: #8299ff;--cobalt-soft: #1d2650;--on-cobalt: #0c1120;--saffron: #f0b53c;--saffron-soft: #3a2c0c;--heard: #56d3a0;--heard-soft: #0f3326;--missed: #ff8b80;--missed-soft: #42161a;--shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .6);color-scheme:dark}}:root[data-theme=dark]{--paper: #0c1120;--surface: #141b2e;--sunk: #0f1527;--ink: #e8ebf6;--muted: #98a1bf;--line: #26304a;--cobalt: #8299ff;--cobalt-soft: #1d2650;--on-cobalt: #0c1120;--saffron: #f0b53c;--saffron-soft: #3a2c0c;--heard: #56d3a0;--heard-soft: #0f3326;--missed: #ff8b80;--missed-soft: #42161a;--shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .6);color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.5;-webkit-font-smoothing:antialiased}#root{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px 48px;display:flex;flex-direction:column;gap:20px}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}h1{font-size:var(--step-3)}h2{font-size:var(--step-2)}h3{font-size:var(--step-1)}p{margin:0}a{color:var(--cobalt)}.label{font-family:var(--font-label);font-size:var(--step--1);letter-spacing:.06em;color:var(--muted);text-transform:lowercase}.muted{color:var(--muted)}.num{font-variant-numeric:tabular-nums}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.brand{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);letter-spacing:-.01em;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:baseline;gap:8px}.brand .ear{color:var(--cobalt);font-style:italic;font-weight:500}.nav{display:flex;gap:4px}.nav button{font:500 var(--step--1) var(--font-body);background:none;border:0;color:var(--muted);padding:6px 10px;border-radius:999px;cursor:pointer}.nav button[aria-current=page]{color:var(--ink);background:var(--sunk)}.btn{font:700 var(--step-0) var(--font-body);border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .08s ease,background .15s ease}.btn:hover{background:var(--sunk)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--cobalt);border-color:var(--cobalt);color:var(--on-cobalt)}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{border-color:transparent;background:none;color:var(--muted)}.btn.small{padding:6px 12px;font-size:var(--step--1)}.btn:disabled{opacity:.45;cursor:default}@media(pointer:coarse){.btn kbd,.keyhint{display:none}}.btn kbd,.kbd{font:500 .72rem var(--font-body);border:1px solid currentColor;border-radius:5px;padding:0 5px;opacity:.6}:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:2px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}.hero{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}@media(max-width:520px){.hero{grid-template-columns:1fr;justify-items:start}}.ring{position:relative;width:132px;height:132px}.ring svg{display:block}.ring .center{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;line-height:1.1}.ring .big{font-family:var(--font-display);font-weight:800;font-size:var(--step-3)}.drills{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.drill{text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}.drill:hover{border-color:var(--cobalt)}.drill strong{font-family:var(--font-display);font-size:var(--step-1)}.drill span{color:var(--muted);font-size:var(--step--1)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.stat{display:flex;flex-direction:column;gap:2px;min-width:0}.stat .value{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);font-variant-numeric:tabular-nums}.metro{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding-top:4px;overflow-x:auto}.metro .stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:74px;padding:0 4px}.metro .stop:before{content:"";position:absolute;top:10px;left:0;right:0;height:5px;background:var(--line)}.metro .stop:first-child:before{left:50%}.metro .stop:last-child:before{right:50%}.metro .stop.done:before{background:var(--cobalt)}.metro .stop.current:not(:first-child):after{content:"";position:absolute;top:10px;left:0;right:50%;height:5px;background:var(--cobalt)}.metro .dot{position:relative;width:25px;height:25px;border-radius:50%;border:5px solid var(--line);background:var(--surface);z-index:1}.metro .done .dot,.metro .current .dot{border-color:var(--cobalt)}.metro .current .dot{background:var(--cobalt);box-shadow:0 0 0 5px var(--cobalt-soft)}.metro .name{font-weight:700;font-size:var(--step--1);line-height:1.2}.metro .locked .name{color:var(--muted);font-weight:500}.drillhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.progress{display:flex;gap:4px}.progress i{width:18px;height:6px;border-radius:3px;background:var(--line)}.progress i.done{background:var(--cobalt)}.progress i.perfect{background:var(--heard)}.progress i.now{background:var(--ink)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:var(--step--1);padding:2px 10px;border-radius:999px;background:var(--sunk);color:var(--muted);font-variant-numeric:tabular-nums}.chip.accent{background:var(--cobalt-soft);color:var(--cobalt)}.chip.warn{background:var(--saffron-soft);color:var(--saffron)}.booth{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:18px;min-width:0}@media(max-width:520px){.booth{padding:16px}}.listen{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.play{width:76px;height:76px;border-radius:50%;border:0;background:var(--cobalt);color:var(--on-cobalt);display:grid;place-items:center;cursor:pointer;position:relative;flex:none}.play svg{width:30px;height:30px}.play.playing:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:3px solid var(--cobalt);opacity:.4;animation:pulse 1.1s ease-out infinite}@keyframes pulse{0%{transform:scale(.92);opacity:.55}to{transform:scale(1.18);opacity:0}}@media(prefers-reduced-motion:reduce){.play.playing:after{animation:none}}.listen .tools{display:flex;gap:8px;flex-wrap:wrap}.answer{width:100%;font:500 var(--step-2) var(--font-display);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;resize:none;min-height:3.2em}.answer:focus{border-color:var(--cobalt);outline:none}.hint{font-size:var(--step--1);color:var(--muted)}.tiles,.built{display:flex;flex-wrap:wrap;gap:8px;min-height:52px}.built{padding:10px;border-radius:12px;background:var(--paper);border:1.5px dashed var(--line)}.tile{font:500 var(--step-1) var(--font-display);color:var(--ink);background:var(--surface);border:1.5px solid var(--cobalt);border-radius:8px;padding:4px 12px;cursor:pointer;box-shadow:inset 0 -3px 0 var(--cobalt-soft),inset 0 2px #ffffff80}.tile.used{opacity:.25;pointer-events:none}.gapline{font:500 var(--step-2) var(--font-display);line-height:1.9}.gapline input{font:inherit;color:var(--cobalt);background:var(--cobalt-soft);border:0;border-bottom:2.5px solid var(--cobalt);border-radius:6px 6px 0 0;padding:0 6px;margin:0 2px;width:6ch}.gapline input:focus{outline:none;background:var(--saffron-soft)}.transcript{font:500 var(--step-2) var(--font-display);line-height:1.75;display:flex;flex-wrap:wrap;column-gap:.32em;row-gap:2px}.word{position:relative;display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:6px;padding:0 3px;transition:background .1s}.word:hover{background:var(--sunk)}.word .typed{font:400 var(--step--1) var(--font-body);color:var(--missed);text-decoration:line-through;line-height:1.1}.word.heard{color:var(--ink)}.word.alike{color:var(--ink);text-decoration:underline dotted var(--saffron) 2px;text-underline-offset:6px}.word.split{background:var(--saffron-soft);color:var(--saffron)}.word.wrong{color:var(--missed)}.word.missed{color:var(--missed);box-shadow:inset 0 -2px 0 var(--missed);background:var(--missed-soft)}.word.speaking{background:var(--cobalt);color:var(--on-cobalt)}.word.speaking .typed{color:var(--on-cobalt)}.link{color:var(--cobalt);opacity:.7;font-size:.8em;margin:0 -.28em;align-self:flex-end;-webkit-user-select:none;user-select:none}.extra{font:400 var(--step--1) var(--font-body);color:var(--missed);align-self:center;text-decoration:line-through}.verdict{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.stamp{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:var(--step-2);color:var(--heard);border:3px solid var(--heard);border-radius:10px;padding:0 12px;transform:rotate(-4deg);animation:stamp .35s cubic-bezier(.2,1.6,.4,1)}@keyframes stamp{0%{transform:rotate(-4deg) scale(1.6);opacity:0}to{transform:rotate(-4deg) scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.stamp{animation:none}}.score{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);font-variant-numeric:tabular-nums}.note{border-left:3px solid var(--saffron);padding:4px 0 4px 12px;color:var(--ink)}.note b{font-family:var(--font-display)}.translation{font-style:italic;color:var(--muted)}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--step--1);color:var(--muted)}.legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.legend .l-heard:before{background:var(--ink)}.legend .l-alike:before{background:var(--saffron)}.legend .l-missed:before{background:var(--missed)}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.option{font:600 var(--step-2) var(--font-display);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:18px 12px;cursor:pointer}.option:hover:not(:disabled){border-color:var(--cobalt)}.option.right{border-color:var(--heard);background:var(--heard-soft)}.option.wrongpick{border-color:var(--missed);background:var(--missed-soft)}.option:disabled{cursor:default}.gauge{position:relative;height:40px}.gauge .track{position:absolute;left:0;right:0;top:16px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--heard-soft),var(--cobalt-soft) 60%,var(--saffron-soft))}.gauge .mark{position:absolute;top:4px;width:3px;height:32px;background:var(--ink);border-radius:2px;transform:translate(-50%);transition:left .4s ease}.gauge .ref{position:absolute;top:12px;height:16px;width:2px;background:var(--muted);transform:translate(-50%)}.gauge .reflabel{position:absolute;top:-14px;font-size:.72rem;color:var(--muted);transform:translate(-50%);white-space:nowrap}.chart{width:100%;height:auto;display:block}.chart text{fill:var(--muted);font:12px var(--font-body)}.chart .grid{stroke:var(--line);stroke-width:1}.chart .area{fill:var(--cobalt-soft)}.chart .lineplot{fill:none;stroke:var(--cobalt);stroke-width:2.5}.chart .dotplot,.chart .bar{fill:var(--cobalt)}.chart .bar.today{fill:var(--saffron)}.field{display:flex;flex-direction:column;gap:6px}.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}.seg button{font:500 var(--step--1) var(--font-body);border:0;background:none;color:var(--muted);padding:5px 12px;border-radius:999px;cursor:pointer}.seg button[aria-pressed=true]{background:var(--cobalt);color:var(--on-cobalt)}.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.check input{margin-top:5px;accent-color:var(--cobalt)}textarea.code{width:100%;min-height:120px;font:.8rem ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px}.banner{border-radius:var(--radius);padding:14px 16px;background:var(--cobalt-soft);color:var(--ink);display:flex;flex-direction:column;gap:6px}.banner.warm{background:var(--saffron-soft)}.center-col{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.loading{padding:40px 0;color:var(--muted)}.prose{max-width:65ch;display:flex;flex-direction:column;gap:10px}.prose li{margin-bottom:4px}