:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1b1f24;--surface:#252b33;--border:#353d47;--text:#e6e9ee;--muted:#9aa4b1;--accent:#6cb6ff;--accent-bg:#1f3a57;--right:#3fb950;--right-bg:#1a3a24;--wrong:#f85149;--wrong-bg:#4a1e1e;--warn:#d29922;--pair-1:#6cb6ff;--pair-2:#e0823d;--pair-3:#b083f0;--pair-4:#3fb950;--header-h:52px;--tabbar-h:56px}*,:before,:after{box-sizing:border-box}html,body{margin:0}html{overflow-x:clip}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5}#app{flex-direction:column;max-width:720px;min-height:100dvh;margin:0 auto;display:flex}.app-header{z-index:10;min-height:var(--header-h);padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;display:flex;position:sticky;top:0}.title{margin:0;font-size:1.125rem}.stats{color:var(--muted);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 10px;font-size:.8125rem;display:flex}.level-badge{background:var(--accent-bg);color:var(--accent);border-radius:999px;padding:2px 8px;font-weight:700}.xp{flex-direction:column;align-items:stretch;gap:2px;min-width:84px;display:flex}.xp-bar{background:var(--border);border-radius:3px;height:6px;display:block;overflow:hidden}.xp-fill{background:var(--accent);width:0;height:100%;transition:width .3s;display:block}.xp-text{white-space:nowrap;font-size:.75rem;line-height:1.2}.streak{white-space:nowrap}.streak-on{color:var(--warn);font-weight:600}main{flex:1;min-width:0;padding:16px}h2{margin-top:0}.muted{color:var(--muted)}pre{-webkit-overflow-scrolling:touch;white-space:pre;tab-size:4;background:var(--surface);border:1px solid var(--border);border-radius:6px;max-width:100%;margin:12px 0;padding:12px;overflow-x:auto}code,pre{font-variant-ligatures:none;font-family:ui-monospace,Cascadia Code,Consolas,Menlo,monospace;font-size:.875rem}button{min-height:44px;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tabbar{z-index:10;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);display:flex;position:sticky;bottom:0}.tab{min-height:44px;height:var(--tabbar-h);color:var(--muted);flex:1;justify-content:center;align-items:center;font-weight:600;text-decoration:none;display:flex}.tab[aria-current=page]{color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.app-footer{justify-content:center;padding:8px 16px 16px;display:flex}.app-footer[hidden]{display:none}[hidden]{display:none!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[tabindex="-1"]:focus:not(:focus-visible){outline:none}.btn-link{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 12px;text-decoration:underline}.btn-link:active{color:var(--text)}.btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;flex:1;padding:10px 16px;font-weight:600}.btn-primary{background:var(--accent);border-color:var(--accent);color:#0d1117}.btn:active:not(:disabled){filter:brightness(.85)}.btn:disabled{opacity:.45;cursor:default}.btn-small{flex:none;padding:6px 14px;font-size:.875rem}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:999px;padding:8px 14px}.chip.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:600}.chip:active:not(:disabled){filter:brightness(.85)}.label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;font-size:.8125rem;font-weight:600}.action-bar{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));z-index:5;background:var(--bg);border-top:1px solid var(--border);gap:8px;margin:16px -16px 0;padding:10px 16px;display:flex;position:sticky}.action-bar .btn{min-height:48px}.queue-info{font-size:1.0625rem}.progress{background:var(--border);border-radius:2px;height:4px;margin:0 0 10px;overflow:hidden}.progress-fill{background:var(--accent);height:100%}.q-meta{margin:0 0 4px;font-size:.8125rem}.q-prompt{margin:0 0 8px;font-size:1.125rem;line-height:1.4}.options{flex-direction:column;gap:10px;margin-top:12px;display:flex}.option{border:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;border-radius:10px;align-items:flex-start;gap:10px;width:100%;min-height:52px;padding:12px;display:flex}.option:active:not(:disabled){background:var(--accent-bg)}.option:disabled{cursor:default}.option-key{background:var(--border);width:24px;height:24px;color:var(--muted);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:inline-flex}.option-text{overflow-wrap:anywhere;min-width:0}.options-code .option-text{font-variant-ligatures:none;font-family:ui-monospace,Cascadia Code,Consolas,Menlo,monospace;font-size:.875rem}.option.right{border-color:var(--right);background:var(--right-bg)}.option.wrong{border-color:var(--wrong);background:var(--wrong-bg)}.option.missed{outline:2px solid var(--right);outline-offset:-2px}.option.right .option-key,.option.missed .option-key{background:var(--right);color:#0d1117}.option.wrong .option-key{background:var(--wrong);color:#0d1117}.verdict{margin:16px 0 8px;font-weight:700}.verdict-right{color:var(--right)}.verdict-wrong{color:var(--wrong)}.explain{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:4px 14px 8px}.explain .label{margin-top:14px}.explain pre{background:var(--bg)}.explain-what{font-weight:600}.label-inline{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8125rem;font-weight:600}.explain-shape code{overflow-wrap:anywhere}.explain-gotcha strong{color:var(--warn)}.when-chips{flex-wrap:wrap;gap:6px;display:flex}.when-chip{background:var(--accent-bg);color:var(--accent);border-radius:999px;padding:4px 10px;font-size:.875rem}.trace{border:1px solid var(--border);border-radius:6px;margin:0;padding:0;list-style:none;overflow:hidden}.trace-row{border-top:1px solid var(--border);flex-direction:column;gap:2px;padding:6px 10px;display:flex}.trace-row:first-child{border-top:none}.trace-seg,.trace-type{overflow-wrap:anywhere;font-size:.8125rem}.trace-type{color:var(--muted)}.trace-row.asked{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}.trace-row.asked .trace-type{color:var(--accent);font-weight:700}@media (width>=600px){.trace-row{grid-template-columns:1fr auto;gap:12px;display:grid}}.example-head{justify-content:space-between;align-items:flex-end;gap:8px;display:flex}.match-hint{min-height:1.5em;margin:8px 0;font-size:.9375rem}.match-ops{flex-wrap:wrap;gap:8px;display:flex}.match-op{text-align:left;border-radius:10px;align-items:center;gap:6px;max-width:100%;display:inline-flex}.match-op code{overflow-wrap:anywhere}.match-op.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--accent-bg)}.match-rows{grid-template-columns:1fr;gap:10px;margin-top:14px;display:grid}@media (width>=600px){.match-rows{grid-template-columns:1fr 1fr}}.match-row{border:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;border-radius:10px;align-items:flex-start;gap:10px;width:100%;min-height:56px;padding:12px;display:flex}.match-row.awaiting:not(:disabled){border-style:dashed;border-color:var(--accent)}.match-row:active:not(:disabled){background:var(--accent-bg)}.match-row:disabled{cursor:default}.match-row-body{flex-direction:column;gap:4px;min-width:0;display:flex}.match-row-op:empty,.match-row-result:empty{display:none}.match-row-op,.match-row-result{overflow-wrap:anywhere;font-weight:700}.match-row.right{border-color:var(--right);background:var(--right-bg)}.match-row.right .match-row-result{color:var(--right)}.match-row.wrong{border-color:var(--wrong);background:var(--wrong-bg)}.match-row.wrong .match-row-result{color:var(--wrong)}.match-op:disabled,.match-row:disabled{color:var(--text)}.pair-badge{border:2px dashed var(--border);border-radius:50%;flex:none;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:inline-flex}.paired .pair-badge{color:#0d1117;border-style:solid}.pair-1 .pair-badge{background:var(--pair-1);border-color:var(--pair-1)}.pair-2 .pair-badge{background:var(--pair-2);border-color:var(--pair-2)}.pair-3 .pair-badge{background:var(--pair-3);border-color:var(--pair-3)}.pair-4 .pair-badge{background:var(--pair-4);border-color:var(--pair-4)}.match-op.pair-1,.match-row.pair-1 .match-row-op{border-color:var(--pair-1);color:var(--pair-1)}.match-op.pair-2,.match-row.pair-2 .match-row-op{border-color:var(--pair-2);color:var(--pair-2)}.match-op.pair-3,.match-row.pair-3 .match-row-op{border-color:var(--pair-3);color:var(--pair-3)}.match-op.pair-4,.match-row.pair-4 .match-row-op{border-color:var(--pair-4);color:var(--pair-4)}.summary-stats{grid-template-columns:1fr 1fr;gap:10px;margin:0;display:grid}.summary-stat{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:12px}.summary-stat dt{color:var(--muted);font-size:.8125rem}.summary-stat dd{margin:0;font-size:1.5rem;font-weight:700}.toast{left:50%;top:calc(var(--header-h) + 12px + env(safe-area-inset-top));z-index:20;background:var(--right);color:#0d1117;opacity:0;pointer-events:none;border-radius:999px;padding:8px 16px;font-weight:700;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.toast.toast-warn{background:var(--warn)}@media (prefers-reduced-motion:reduce){.toast,.xp-fill{transition:none}}.cs-recipe{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface);border-radius:10px;padding:4px 14px 8px}.cs-recipe .label{margin-top:10px}.cs-recipe-steps{margin:0;padding-left:1.4em}.cs-recipe-steps li+li{margin-top:2px}.cs-search-box{top:calc(var(--header-h) + env(safe-area-inset-top));z-index:5;background:var(--bg);margin:0 -16px;padding:12px 16px 8px;position:sticky}.cs-search{border:1px solid var(--border);background:var(--surface);width:100%;min-height:44px;color:var(--text);font:inherit;border-radius:10px;padding:8px 12px;font-size:16px}.cs-search:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.cs-status{min-height:1.25em;margin:0;font-size:.8125rem}.cs-section{margin-top:8px}.cs-empty{margin:8px 0}.cheatsheet details>summary{cursor:pointer;-webkit-tap-highlight-color:transparent}.cheatsheet summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.cs-phrases{border:1px solid var(--border);border-radius:10px;overflow:hidden}.cs-phrase{border-top:1px solid var(--border)}.cs-phrase.cs-first{border-top:none}.cs-phrase>summary{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;min-height:44px;padding:10px 12px;list-style:none;display:flex}.cs-phrase>summary::-webkit-details-marker{display:none}.cs-phrase[open]>summary{background:var(--accent-bg)}.cs-phrase-text{overflow-wrap:anywhere;min-width:0}.cs-phrase-op{color:var(--accent);overflow-wrap:anywhere;text-align:right}.cs-card{margin:0 8px 8px}.cs-sig code,.cs-shape{overflow-wrap:anywhere}.cs-family{border:1px solid var(--border);background:var(--surface);border-radius:10px;margin-bottom:8px}.cs-family>summary{align-items:center;gap:8px;min-height:44px;padding:8px 12px;font-weight:600;display:flex}.cs-count{margin-left:auto;font-size:.8125rem;font-weight:400}.cs-shapes{margin:0;padding:0;list-style:none}.cs-shape-row{border-top:1px solid var(--border);scroll-margin:calc(var(--header-h) + 72px) 0 calc(var(--tabbar-h) + 16px);flex-direction:column;gap:2px;padding:8px 12px;display:flex}.cs-shape-row:focus{outline:none}.cs-shape-op{overflow-wrap:anywhere;font-weight:700}.cs-shape-row .cs-shape{color:var(--accent);font-size:.8125rem}.cs-shape-what{font-size:.9375rem}.cs-shape-row.flash{animation:1.6s ease-out cs-flash}@keyframes cs-flash{0%{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}to{background:0 0;box-shadow:inset 3px 0 #0000}}.cs-traps{margin:0;padding:0;list-style:none}.cs-trap{border:1px solid var(--border);border-left:3px solid var(--warn);background:var(--surface);border-radius:10px;margin-bottom:8px;padding:10px 12px}.cs-trap p{overflow-wrap:anywhere;margin:0 0 8px}.cs-trap-ops{gap:8px 10px}.cs-chip{font-variant-ligatures:none;min-height:44px;padding:8px 14px;font-family:ui-monospace,Cascadia Code,Consolas,Menlo,monospace;font-size:.875rem}@media (prefers-reduced-motion:reduce){.cs-shape-row.flash{animation-duration:10ms}}