:root{--paper: #fbfaf7;--paper-raised: #ffffff;--paper-sunken: #f2efe9;--ink: #16181d;--ink-soft: #4a4f5a;--ink-faint: #7c8290;--rule: #e3ded4;--accent: #175f63;--accent-soft: #e6f0ef;--accent-ink: #ffffff;--confirm: #2f7d59;--confirm-soft: #e7f2ec;--attention: #9a6a10;--attention-soft: #fbf1dc;--system-error: #a3271f;--scrim: rgba(22, 24, 29, .44);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-math: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--fs-body: 16px;--fs-small: 14px;--fs-micro: 12px;--fs-prompt: 19px;--fs-title: 22px;--fs-count: 36px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--radius: 12px;--radius-lg: 18px;--tap: 44px;--column: 420px;--ease: cubic-bezier(.22, .61, .36, 1);--dur-fast: .15s;--dur-mid: .25s;--dur-slow: .4s;--shadow-sheet: 0 -8px 32px rgba(22, 24, 29, .16);--shadow-card: 0 1px 2px rgba(22, 24, 29, .06)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--paper-sunken);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.app{min-height:100%;max-width:var(--column);margin:0 auto;background:var(--paper);display:flex;flex-direction:column;position:relative}.screen{flex:1;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}.screen--center{justify-content:center}.screen--player{padding:var(--sp-2);gap:var(--sp-3);background:#101215;color:#f4f2ee}.card{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-4);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--sp-3)}.card__title{font-size:var(--fs-title);line-height:1.3;margin:0;font-weight:600}.card__body{margin:0;color:var(--ink-soft)}.card__note{margin:0;font-size:var(--fs-small);color:var(--ink-faint)}.wordmark{font-weight:700;letter-spacing:.02em;margin:0;color:var(--accent)}.s0__line{margin:0;color:var(--ink-soft)}.skeleton{display:flex;flex-direction:column;gap:var(--sp-3)}.skeleton__prompt,.skeleton__option{display:block;border-radius:var(--radius);background:linear-gradient(90deg,var(--paper-sunken),#e9e5dd,var(--paper-sunken));background-size:200% 100%;animation:shimmer 1.4s var(--ease) infinite}.skeleton__prompt{height:22px}.skeleton__prompt--short{width:60%}.skeleton__option{height:62px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.retry__copy{margin:0 0 var(--sp-3)}.notice{margin:0 var(--sp-4);font-size:var(--fs-small);color:var(--ink-faint)}.topbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:5}.dots{display:flex;gap:6px}.dot{width:8px;height:8px;border-radius:50%;background:var(--rule);transition:background var(--dur-mid) var(--ease)}.dot--filled{background:var(--accent)}.pill{margin-left:auto;min-height:32px;padding:4px 10px;border-radius:999px;border:1px solid var(--rule);background:var(--paper-raised);font-size:var(--fs-small);cursor:pointer}.chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:var(--fs-micro);background:var(--paper-sunken);color:var(--ink-soft);white-space:nowrap}.chip--streak{background:var(--accent-soft);color:var(--accent)}.chip--social{background:var(--paper-sunken);color:var(--ink-soft);animation:fadein var(--dur-slow) var(--ease)}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.chip--practicing{background:var(--accent-soft);color:var(--accent)}.chip--available{background:var(--confirm-soft);color:var(--confirm)}.chip--comingSoon{background:var(--paper-sunken);color:var(--ink-faint)}.btn{position:relative;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid transparent;font-weight:600;cursor:pointer;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.btn:active:not(:disabled){transform:scale(.985)}.btn:disabled{opacity:.6;cursor:default}.btn--block{width:100%}.btn--primary{background:var(--accent);color:var(--accent-ink)}.btn--secondary{background:transparent;border-color:var(--accent);color:var(--accent)}.btn--text{background:transparent;color:var(--ink-soft);font-weight:500}.btn__spinner{position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card--item{gap:var(--sp-4)}.item__tags{display:flex;gap:var(--sp-2)}.tag{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:6px}.tag--replay{color:var(--attention);background:var(--attention-soft)}.item__instruction{margin:0;font-size:var(--fs-small);color:var(--ink-faint)}.item__wrongline{margin:0;color:var(--attention);font-size:var(--fs-small)}.math{font-variant-ligatures:none;font-variant-numeric:tabular-nums}.math--prompt{font-size:var(--fs-prompt);line-height:1.45;display:block}.math--line{font-family:var(--font-math);font-size:var(--fs-small);letter-spacing:-.01em}.derivation{list-style:none;margin:0;padding:0 0 0 var(--sp-2);border-left:2px solid var(--rule);display:flex;flex-direction:column;gap:var(--sp-2)}.derivation__line{color:var(--ink-soft)}.derivation__line--last{color:var(--ink);background:var(--accent-soft);border-radius:6px;padding:4px 6px}.options{display:flex;flex-direction:column;gap:var(--sp-3)}.option{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-3) var(--sp-4);text-align:left;background:var(--paper-raised);border:1.5px solid var(--rule);border-radius:var(--radius);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),opacity var(--dur-mid) var(--ease)}.option:active{background:var(--paper-sunken)}.option__badge{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-sunken);color:var(--ink-soft);display:grid;place-items:center;font-size:var(--fs-small);font-weight:600}.option--selected-correct{border-color:var(--confirm);background:var(--confirm-soft);color:var(--confirm)}.option--selected-wrong{border-color:var(--attention);background:var(--attention-soft)}.option--locked{opacity:.45}.option__note{margin-left:auto;font-size:var(--fs-micro);color:var(--attention)}.check{margin-left:auto;color:var(--confirm)}.check__path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw var(--dur-slow) var(--ease) forwards}@keyframes draw{to{stroke-dashoffset:0}}.lines{display:flex;flex-direction:column;gap:var(--sp-2)}.wline{display:flex;align-items:center;gap:var(--sp-2)}.wline__body{flex:1;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-2) var(--sp-3);text-align:left;background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer}.wline__num{color:var(--ink-faint);font-size:var(--fs-micro)}.wline--tapped .wline__body{border-color:var(--accent)}.wline--revealed-chosen .wline__body{border-color:var(--attention);background:var(--attention-soft)}.wline--revealed-correct .wline__body{border-color:var(--confirm);background:var(--confirm-soft)}.wline--locked .wline__body{opacity:.5}.wline__confirm{min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-size:var(--fs-small);cursor:pointer}.ack__tapcatcher{position:fixed;inset:0;z-index:10;border:none;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}.ack{position:relative;z-index:11;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);animation:fadein var(--dur-mid) var(--ease)}.ack__line{margin:0;font-size:var(--fs-prompt);font-weight:600;color:var(--confirm)}.ack__hint{font-size:var(--fs-micro);color:var(--ink-faint)}.player{display:flex;flex-direction:column;gap:var(--sp-3)}.player__title,.player__header{margin:0;font-size:var(--fs-small);color:#cfd4d8}.player__stage{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16 / 9}.player__video{width:100%;height:100%;display:block;object-fit:contain}.player__tap{position:absolute;inset:0;background:transparent;border:none;cursor:pointer}.player__fixture{position:absolute;top:8px;right:8px;font-size:10px;letter-spacing:.12em;padding:2px 6px;border-radius:4px;background:#0000008c;color:#ffd479;pointer-events:none}.player__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff3}.player__bar-fill{display:block;height:100%;background:#7fd6c9;transition:width .2s linear}.player__hairline--pulse{position:absolute;left:0;bottom:0;height:2px;width:40%;background:#7fd6c9;animation:slide 1.2s var(--ease) infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.player__chrome{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap)}.player__chrome .btn--text{color:#cfd4d8}.player__stalled{background:#ffffff0f;border-radius:var(--radius);padding:var(--sp-3);font-size:var(--fs-small)}.player__stalled p{margin:0 0 var(--sp-2)}.textfallback{background:var(--paper-raised);color:var(--ink);border-radius:var(--radius);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}.textfallback__title{margin:0;font-weight:600}.textfallback__heading{margin:0;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}.textfallback__body{margin:0;color:var(--ink-soft)}.afterplayer{display:flex;flex-direction:column;gap:var(--sp-2)}.verdict{display:flex;flex-direction:column;gap:var(--sp-4)}.verdict__detail{margin:0;color:var(--ink-soft)}.verdict__actions{display:flex;flex-direction:column;gap:var(--sp-2)}.count{margin:0}.count--large .count__num{font-size:var(--fs-count);font-weight:700;line-height:1.1}.count--large .count__of,.count--large .count__label{font-size:var(--fs-body);color:var(--ink-soft)}.count--inline{font-size:var(--fs-small);color:var(--ink-soft)}.sheet{position:fixed;inset:0;z-index:20;display:flex}.sheet__scrim{position:absolute;inset:0;background:var(--scrim);animation:fadein var(--dur-fast) var(--ease);border:none;padding:0;-webkit-appearance:none;appearance:none;cursor:pointer}.sheet__scrim:disabled{cursor:default}.sheet__panel{position:relative;background:var(--paper-raised);width:100%;max-width:var(--column);margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}.sheet--bottom{align-items:flex-end}.sheet--bottom .sheet__panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-sheet);animation:rise var(--dur-mid) var(--ease)}.sheet--full{align-items:center}.sheet--full .sheet__panel{border-radius:var(--radius-lg);margin:var(--sp-4);animation:fadein var(--dur-mid) var(--ease)}@keyframes rise{0%{transform:translateY(24px)}to{transform:none}}.sheet__title{margin:0;font-size:var(--fs-title)}.sheet__sub{margin:0;color:var(--ink-soft)}.maplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.maprow__main{width:100%;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-raised);text-align:left;cursor:pointer}.maprow--practicing .maprow__main{border-color:var(--accent)}.maprow--comingSoon .maprow__main{opacity:.6;cursor:default}.maprow__title{font-size:var(--fs-small)}.maprow__confirm{width:100%;min-height:var(--tap);margin-top:var(--sp-2);border:none;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);cursor:pointer}.strip{display:flex;gap:4px}.strip__cell{position:relative;flex:1;height:26px;border-radius:6px;background:var(--paper-sunken);overflow:hidden;display:grid;place-items:center}.strip__fill{position:absolute;inset:0 auto 0 0;background:var(--accent-soft)}.strip__label{position:relative;font-size:10px;color:var(--ink-soft)}.strip__cell--comingSoon{opacity:.5}.field{display:flex;flex-direction:column;gap:var(--sp-1)}.field__label{font-size:var(--fs-small);color:var(--ink-soft)}.field__input{min-height:var(--tap);padding:0 var(--sp-3);font-size:var(--fs-body);border:1.5px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink)}.field__input:focus{outline:2px solid var(--accent);outline-offset:1px}.field__hint{margin:0;font-size:var(--fs-small);color:var(--attention)}.field__dev{margin:0;font-size:var(--fs-micro);color:var(--ink-faint)}.checkrow{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);font-size:var(--fs-small)}.preprompt__value{margin:0;font-size:var(--fs-prompt)}.quietlink{background:none;border:none;color:var(--ink-faint);text-decoration:underline;font-size:var(--fs-small);min-height:var(--tap);cursor:pointer}.offline{background:var(--attention-soft);color:var(--attention);font-size:var(--fs-small);padding:var(--sp-2) var(--sp-4);text-align:center}.dev{position:fixed;right:8px;bottom:8px;z-index:40;max-width:min(360px,92vw)}.dev__pill{border:2px dashed var(--system-error);background:repeating-linear-gradient(45deg,#fff,#fff 6px,#ffe9e7 6px 12px);color:var(--system-error);font-weight:700;border-radius:999px;padding:6px 14px;min-height:36px;cursor:pointer}.dev__drawer{margin-top:6px;border:2px dashed var(--system-error);background:#fff;border-radius:var(--radius);padding:var(--sp-3);font-size:var(--fs-micro);max-height:50vh;overflow:auto}.dev__row{margin:0 0 var(--sp-2)}.dev__actions{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}.dev__actions button{min-height:36px;padding:0 10px;border:1px solid var(--rule);border-radius:8px;background:var(--paper-sunken);cursor:pointer}.dev__note{margin:0 0 var(--sp-2);color:var(--system-error);font-weight:600}.dev__log{margin:0;padding-left:var(--sp-4);color:var(--ink-soft)}