:root{color-scheme:light dark;--bg: #fff8f0;--surface: #ffffff;--surface-2: #fdf2e6;--line: #e8dccd;--ink: #2a1f16;--ink-2: #6b5a49;--ink-3: #9a8571;--amber: #c96a1e;--amber-bg: #fdf0e0;--teal: #0f8f78;--teal-bg: #e2f4ef;--coral: #cf4733;--coral-bg: #fdeae6;--violet: #6251bd;--violet-bg: #eeebfa;--primary: var(--teal);--primary-bg: var(--teal-bg);--on-primary: #ffffff;--warn: #b03a0b;--warn-bg: #ffedd5;--s1: .25rem;--s2: .5rem;--s3: .75rem;--s4: 1rem;--s5: 1.25rem;--s6: 1.5rem;--s8: 2rem;--s10: 2.5rem;--font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "Cascadia Mono", Menlo, monospace;--t-hero: clamp(2.25rem, 9vw, 3.25rem);--t-title: 1.375rem;--t-lead: 1.0625rem;--t-body: 1rem;--t-note: .875rem;--t-micro: .75rem;--ease: cubic-bezier(.22, 1, .36, 1);--d-tap: .16s;--d-screen: .22s;--radius: 20px;--radius-sm: 12px;--tap: 56px;--lift: 0 1px 2px rgba(42, 31, 22, .06), 0 4px 12px rgba(42, 31, 22, .05)}@media (prefers-color-scheme: dark){:root{--bg: #17120d;--surface: #221b14;--surface-2: #2c231a;--line: #3b3025;--ink: #f7efe4;--ink-2: #c4b3a0;--ink-3: #93826f;--amber: #f0a055;--amber-bg: #3a2817;--teal: #3fc4a8;--teal-bg: #15332c;--coral: #f07a66;--coral-bg: #3a211c;--violet: #9b8df0;--violet-bg: #272045;--on-primary: #10211d;--warn: #fb923c;--warn-bg: #3a2414;--lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25)}}@media (prefers-reduced-motion: reduce){:root{--d-tap: 1ms;--d-screen: 80ms}}:root[data-reduce-motion=true]{--d-tap: 1ms;--d-screen: 80ms}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:var(--primary);text-underline-offset:2px}:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}.screen{display:grid;grid-template-rows:auto 1fr auto;height:100%;max-width:34rem;margin:0 auto;padding:max(var(--s3),env(safe-area-inset-top)) var(--s4) max(var(--s4),env(safe-area-inset-bottom))}.bar{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap)}.bar__title{font-size:var(--t-title);font-weight:650;letter-spacing:-.01em;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar__meta{font-size:var(--t-note);font-weight:650;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}.icon-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-left:calc(var(--s2) * -1);border-radius:50%;color:var(--ink);flex:none;transition:background var(--d-tap) var(--ease)}.icon-btn:active{background:var(--surface-2)}.body{display:flex;flex-direction:column;gap:var(--s3);min-height:0;overflow-y:auto;padding:var(--s2) 0 var(--s4);-webkit-overflow-scrolling:touch}.body--center{justify-content:center;overflow:visible}.foot{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3)}.hero{font-family:var(--font-display);font-size:var(--t-hero);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}.en{font-family:var(--font-display);line-height:1.38}.lead{font-size:var(--t-lead);line-height:1.45;margin:0}.note{font-size:var(--t-note);color:var(--ink-2);margin:0;line-height:1.5}.micro{font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}.ipa{font-family:var(--font-mono);font-size:var(--t-note);color:var(--ink-2)}.vi{font-size:var(--t-lead);color:var(--ink-2);margin:0}.card{display:block;width:100%;text-align:left;background:var(--surface);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--lift);transition:transform var(--d-tap) var(--ease)}button.card:active{transform:scale(.985)}.tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);min-height:92px}.tile__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none}.tile__name{display:block;font-size:var(--t-lead);font-weight:650;margin:0}.tile__sub{display:block;font-size:var(--t-note);color:var(--ink-2);margin:2px 0 0;line-height:1.4}.tile__go{color:var(--ink-3)}.hero-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);background:linear-gradient(135deg,var(--primary-bg),var(--surface) 62%);box-shadow:var(--lift),inset 0 0 0 1px var(--line)}.hero-card__go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;background:var(--primary);color:var(--on-primary);transition:transform var(--d-tap) var(--ease)}button.hero-card:active .hero-card__go{transform:translate(2px)}.mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}.mini{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s3);text-align:left}.mini__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;flex:none}.mini__label{display:block;font-size:var(--t-note);font-weight:650;line-height:1.2}.mini__meta{display:block;font-size:var(--t-micro);color:var(--ink-2);font-variant-numeric:tabular-nums}.body>.enter:nth-child(2){animation-delay:40ms}.body>.enter:nth-child(3){animation-delay:80ms}.body>.enter:nth-child(4){animation-delay:.12s}.body>.enter:nth-child(5){animation-delay:.16s}.today{margin-top:auto}.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);padding:var(--s2) var(--s4) 0;text-align:center;margin-top:auto}.tally__n{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;margin:0}.tally__label{font-size:var(--t-micro);color:var(--ink-3);margin:2px 0 0}.pill{display:inline-block;padding:2px var(--s2);border-radius:999px;font-size:var(--t-micro);font-weight:700;background:var(--primary-bg);color:var(--primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--tap);padding:0 var(--s5);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font-size:var(--t-body);font-weight:650;text-decoration:none;white-space:nowrap;transition:transform var(--d-tap) var(--ease),background var(--d-tap) var(--ease),opacity var(--d-tap) var(--ease)}.btn:active{transform:scale(.975)}.btn[disabled]{opacity:.45;pointer-events:none}.btn--primary{background:var(--primary);color:var(--on-primary)}.btn--ghost{background:none;color:var(--ink-2);font-weight:600}.btn--compact{min-height:44px;padding:0 var(--s3);font-size:var(--t-note)}.row{display:flex;gap:var(--s2)}.row>*{flex:1}.mic{width:84px;height:84px;border-radius:50%;align-self:center;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px #cf473352;transition:transform var(--d-tap) var(--ease)}.mic:active{transform:scale(.93)}.mic[data-recording=true]{animation:pulse 1.5s var(--ease) infinite}.mic[disabled]{opacity:.45;pointer-events:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}.grades .btn{flex-direction:column;gap:0;padding:var(--s2);min-height:64px;font-size:var(--t-note)}.grades .btn small{font-size:var(--t-micro);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}.grades .btn--primary small{color:color-mix(in srgb,var(--on-primary) 75%,transparent)}.wave{display:block;width:100%;height:52px;overflow:visible}.wave path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round}.wave[data-idle=true] path{stroke:var(--line)}.scored{font-family:var(--font-display);font-size:var(--t-title);line-height:1.6;display:flex;flex-wrap:wrap;gap:0 .35em;margin:0}.scored span{border-radius:6px;padding:0 .15em}.scored [data-s=ok]{color:var(--ink)}.scored [data-s=close]{color:var(--teal);background:var(--teal-bg)}.scored [data-s=wrong]{color:var(--warn);background:var(--warn-bg)}.scored [data-s=missing]{color:var(--ink-3);text-decoration:line-through}.bar-track{height:8px;background:var(--line);border-radius:999px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:var(--primary);transform-origin:left;transition:transform var(--d-screen) var(--ease)}.turn{max-width:88%;padding:var(--s3) var(--s4);border-radius:var(--radius)}.turn--them{background:var(--surface);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:var(--lift)}.turn--you{background:var(--primary-bg);border-bottom-right-radius:6px;align-self:flex-end}input[type=text],input[type=password]{width:100%;min-height:var(--tap);padding:0 var(--s4);border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit}input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--primary)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--tap);background:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:var(--lift)}input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}input[type=range]::-moz-range-thumb{width:26px;height:26px;border:3px solid var(--surface);border-radius:50%;background:var(--primary)}.group{background:var(--surface);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--lift);display:flex;flex-direction:column;gap:var(--s3)}.seg{display:grid;gap:var(--s1);padding:var(--s1);background:var(--surface-2);border-radius:var(--radius-sm)}.seg button{min-height:44px;border-radius:9px;font-size:var(--t-note);font-weight:650;color:var(--ink-2);transition:background var(--d-tap) var(--ease),color var(--d-tap) var(--ease)}.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s8) var(--s4) var(--s4)}.empty__art{display:grid;place-items:center;width:88px;height:88px;border-radius:28px;background:var(--primary-bg);color:var(--primary)}@keyframes slide-in{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}.enter{animation:slide-in var(--d-screen) var(--ease) both}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-screen);animation-timing-function:var(--ease)}.node{position:absolute;top:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.125rem;font-weight:700;background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line),var(--lift);transition:transform var(--d-tap) var(--ease);animation:node-in .38s var(--ease) both}.node:active{transform:scale(.9)}.node[data-state=done]{background:var(--node-colour);color:var(--surface);box-shadow:var(--lift)}.node[data-state=started]{background:var(--node-bg);color:var(--node-colour);box-shadow:inset 0 0 0 3px var(--node-colour),var(--lift)}.node[data-current=true]{background:var(--node-colour);color:var(--surface);transform:scale(1.1);box-shadow:0 6px 18px color-mix(in srgb,var(--node-colour) 45%,transparent)}.node[data-current=true]:active{transform:scale(1)}.node[data-current=true]:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--node-colour);animation:halo 2.2s var(--ease) infinite}@keyframes node-in{0%{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1}}@keyframes halo{0%,to{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(1.3)}}.node__label{position:absolute;top:82px;width:190px;text-align:center;font-size:var(--t-note);font-weight:650;color:var(--ink);line-height:1.3;pointer-events:none;animation:slide-in var(--d-screen) var(--ease) both;animation-delay:.22s}.stagger>*{animation:slide-in var(--d-screen) var(--ease) both}.stagger>*:nth-child(1){animation-delay:0ms}.stagger>*:nth-child(2){animation-delay:55ms}.stagger>*:nth-child(3){animation-delay:.11s}.stagger>*:nth-child(4){animation-delay:165ms}.stagger>*:nth-child(5){animation-delay:.22s}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.pop{animation:pop .52s var(--ease) both}@media (prefers-reduced-motion: reduce){.node,.stagger>*,.pop{animation:none}.node[data-current=true]:after{animation:none;opacity:.5}}@keyframes spark{0%{transform:translate(0) scale(0);opacity:1}45%{transform:translate(calc(var(--fx) * .75),calc(var(--fy) * .75)) scale(1);opacity:1}to{transform:translate(var(--fx),var(--fy)) scale(.2);opacity:0}}@media (prefers-reduced-motion: reduce){@keyframes spark{0%,to{opacity:0}}}