:root{--paper:#f6f3ec;--ink:#1f1e1c;--chrome-bg:#fffdf8eb;--chrome-border:#1f1e1c1f;--chrome-fg:#2b2a27;--muted:#77726a;--accent:#c8541f;--warn:#b3261e;--prompt:#1f1e1c99;--fit:#8a847a;--dev-good:#2f6fdb;--dev-mid:#e8891c;--dev-bad:#a3182f;--card-shadow:0 6px 24px #1f1e1c1f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#1b1a18;--ink:#ece8df;--chrome-bg:#262421eb;--chrome-border:#ece8df24;--chrome-fg:#ece8df;--muted:#a39d92;--accent:#f08a4b;--warn:#ff8a80;--prompt:#ece8df9e;--fit:#8f897f;--dev-good:#5b9cff;--dev-mid:#f2a03d;--dev-bad:#ff5c70;--card-shadow:0 6px 24px #0006}}html,body{background:var(--paper);height:100%;color:var(--chrome-fg);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;margin:0;font:15px/1.35 -apple-system,BlinkMacSystemFont,Helvetica Neue,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}.pad{touch-action:none;position:absolute;inset:0}.pad canvas{pointer-events:none;position:absolute;top:0;left:0}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}.toolbar{left:max(12px, env(safe-area-inset-left));background:var(--chrome-bg);border:1px solid var(--chrome-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;flex-direction:column;gap:8px;padding:6px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.toolbar button{background:0 0;border:0;border-radius:12px;place-items:center;width:52px;height:52px;display:grid;position:relative}.toolbar button:active,.toolbar button[aria-pressed=true]{background:var(--chrome-border)}.toolbar button:disabled{opacity:.3}.practice-card{left:50%;top:max(14px, env(safe-area-inset-top));background:var(--chrome-bg);border:1px solid var(--chrome-border);min-width:320px;max-width:min(640px,100% - 200px);box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;pointer-events:none;border-radius:16px;padding:12px 20px 10px;position:absolute;transform:translate(-50%)}.practice-card p{margin:0}.drill-name{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.instruction{font-size:17px;margin-top:2px!important}.headline{font-size:19px;font-weight:600}.score-row{justify-content:center;gap:22px;margin-top:8px;display:flex}.score{flex-direction:column;align-items:center;min-width:56px;display:flex}.score-value{font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;line-height:1.1}.score.composite .score-value{color:var(--accent)}.score-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:11px}.timing{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;margin-top:4px!important}.progress-pill{right:max(16px, env(safe-area-inset-right));top:max(16px, env(safe-area-inset-top));background:var(--chrome-bg);border:1px solid var(--chrome-border);font-variant-numeric:tabular-nums;pointer-events:none;border-radius:999px;padding:6px 12px;font-size:14px;position:absolute}.done-card{background:var(--chrome-bg);border:1px solid var(--chrome-border);min-width:300px;box-shadow:var(--card-shadow);text-align:center;border-radius:20px;padding:24px 28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.done-card h2{margin:0 0 6px;font-size:24px}.done-card p{color:var(--muted);margin:0 0 18px}.done-actions,.drill-actions,.panel-actions{justify-content:center;gap:10px;display:flex}.done-actions button,.drill-actions button,.panel-actions button,.links button,.segmented button,.tabs button{border:1px solid var(--chrome-border);background:0 0;border-radius:12px;min-height:44px;padding:0 18px;font-size:16px}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button:disabled{opacity:.4}.icon-button{background:0 0;border:0;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.home,.page{touch-action:pan-y;padding:max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 40px max(28px, env(safe-area-inset-left));box-sizing:border-box;position:absolute;inset:0;overflow-y:auto}.home{flex-direction:column;align-items:center;gap:28px;display:flex}.home header{text-align:center}.home h1{letter-spacing:-.01em;margin:24px 0 2px;font-size:34px}.subtitle{color:var(--muted);margin:0}.segmented{border:1px solid var(--chrome-border);border-radius:14px;gap:4px;padding:4px;display:flex}.segmented button{border:0}.segmented button[aria-checked=true]{background:var(--chrome-border);font-weight:600}.drills{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;width:min(900px,100%);display:grid}.drill-card{background:var(--chrome-bg);border:1px solid var(--chrome-border);border-radius:18px;padding:20px}.drill-card h2{margin:0 0 6px;font-size:19px}.drill-card p{min-height:2.7em;color:var(--muted);margin:0 0 16px}.drill-actions{justify-content:flex-start}.guide{align-items:center;gap:4px;margin:-6px 0 14px;display:flex}.guide span{letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:6px;font-size:12px;font-weight:600}.guide button{background:0 0;border:1px solid #0000;border-radius:10px;min-height:44px;padding:0 12px;font-size:15px}.guide button[aria-checked=true]{border-color:var(--chrome-border);background:var(--chrome-border);font-weight:600}.links{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.home .banner{position:fixed}.page-header{align-items:center;gap:8px;margin-bottom:12px;display:flex}.page-header h1{margin:0;font-size:26px}.tabs{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.tabs button[aria-selected=true]{background:var(--chrome-border);font-weight:600}.panel{max-width:1000px}.panel>p{max-width:70ch}.panel-actions{justify-content:flex-start;margin-top:16px}table.metrics{border-collapse:collapse;width:100%;font-size:14px}table.metrics th{text-align:left;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--chrome-border);padding:6px 8px;font-size:11px;font-weight:600}table.metrics td{border-bottom:1px solid var(--chrome-border);vertical-align:middle;padding:6px 8px}table.metrics td.num{font-variant-numeric:tabular-nums;white-space:nowrap}.strip-dot{fill:var(--ink);opacity:.55}.strip-now{stroke:var(--muted);stroke-width:2px}.strip-new{stroke:var(--accent);stroke-width:2px}.strip .dashed{stroke-dasharray:3 3}.pair{flex-wrap:wrap;gap:16px;display:flex}.thumb{border:1px solid var(--chrome-border);background:var(--chrome-bg);border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:10px;font-size:16px;display:flex}.thumb canvas,.thumb-placeholder{border-radius:10px;width:360px;height:260px}.thumb-placeholder{background:var(--chrome-border)}.hint{color:var(--muted)}.badge{background:var(--accent);color:#fff;font-variant-numeric:tabular-nums;border-radius:9px;min-width:18px;padding:0 4px;font-size:11px;font-weight:600;line-height:18px;position:absolute;top:3px;right:3px}.debug{right:max(12px, env(safe-area-inset-right));top:max(12px, env(safe-area-inset-top));background:var(--chrome-bg);border:1px solid var(--chrome-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;border-radius:14px;width:300px;max-height:calc(100% - 24px);padding:12px 14px;font-size:13px;position:absolute;overflow:auto}.debug h2{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;font-size:11px;font-weight:600}.debug h2:first-child{margin-top:0}.debug dl{margin:0}.debug .row{justify-content:space-between;gap:12px;padding:2px 0;display:flex}.debug dt{color:var(--muted)}.debug dd{text-align:right;margin:0}.debug .row.warn dd{color:var(--warn);font-weight:600}.debug .hint{color:var(--muted);margin:2px 0}.toggles{flex-direction:column;gap:6px;display:flex}.toggles button,.banner button{border:1px solid var(--chrome-border);text-align:left;background:0 0;border-radius:10px;min-height:44px;padding:0 14px}.toggles button[aria-pressed=true]{border-color:var(--accent)}.toggles button:disabled{opacity:.45}.banner{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--chrome-bg);border:1px solid var(--chrome-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;align-items:center;gap:10px;padding:8px 8px 8px 16px;display:flex;position:absolute;transform:translate(-50%)}.banner button:first-of-type{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.toast{left:50%;top:max(16px, env(safe-area-inset-top));background:var(--chrome-fg);color:var(--paper);pointer-events:none;border-radius:999px;padding:8px 16px;font-size:14px;animation:.14s ease-out toast-in;position:absolute;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-6px)}}