:root{--bg: var(--bench);--text: var(--ink);--muted: var(--ink-2);--accent: var(--nitrile);--accent-text: var(--nitrile-ink);--good: var(--verified-text);--bad: var(--rejected-text);--radius: 14px}*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none;-webkit-touch-callout:none;background:var(--bg);color:var(--text);font:16px/1.4 var(--font)}#app{position:fixed;inset:0;overflow:hidden;touch-action:none}#stage{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}.card{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);max-width:420px;margin:0 auto;padding:20px;background:var(--surface);border-radius:var(--radius);box-shadow:0 6px 30px #0000002e;max-height:calc(100% - 32px);overflow:auto}.card h1,.card h2,.card h3{margin:0 0 8px}.card p{margin:0 0 12px;color:var(--muted)}label{display:block;margin:0 0 12px;color:var(--muted);font-size:14px}input[type=text],input:not([type]){display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px}button{font:inherit;border:0;border-radius:10px;padding:12px 14px;min-height:44px;cursor:pointer}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:var(--accent-text);font-weight:600;width:100%}button.secondary,button.grip{background:var(--surface);color:var(--text);border:1px solid var(--line)}button.grip{flex:2;touch-action:none;user-select:none;-webkit-user-select:none}button.grip.on{background:var(--accent);color:var(--accent-text)}.error{color:var(--bad)!important;min-height:1.4em}#hud{position:absolute;left:0;right:0;top:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));pointer-events:none}.hud-bar{display:flex;align-items:flex-start;gap:8px;pointer-events:none}.hud-copy{flex:1;min-width:0}#instruction{display:inline-block;margin:0;padding:4px 12px;font-size:20px;font-weight:700;border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 82%,transparent)}.hud-stats{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}.chip{background:var(--surface);padding:4px 10px;border-radius:999px;font-size:13px;border:1px solid var(--line)}.chip-timer{font-variant-numeric:tabular-nums}.chip.ok{color:var(--good);border-color:var(--good)}.hud-menu,.hud-exit{pointer-events:auto;min-height:36px;padding:6px 12px}.hud-nav{display:none;gap:8px;flex-wrap:nowrap;pointer-events:auto;align-items:center}.hud-menu-panel{margin-top:8px;padding:10px;border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);box-shadow:0 8px 24px #0000002e;pointer-events:auto}.menu-actions{display:none;gap:8px;margin-top:10px}.menu-action{flex:1;min-height:40px;padding:8px 10px;border-radius:10px;font-size:13px;background:var(--surface);color:var(--text);border:1px solid var(--line)}.menu-action.menu-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}#dock{position:absolute;left:0;right:0;bottom:0;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.slider{display:flex;align-items:center;gap:12px;margin:0 0 10px}.slider input{flex:1}.row{display:flex;gap:8px}.row button{flex:1}.hint{margin:8px 0 0;font-size:12px;color:var(--muted)}#metrics{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px}#metrics dt{color:var(--muted)}#metrics dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}#leaderboard{margin:0 0 12px;padding-left:20px}#leaderboard li{margin:2px 0}.good{color:var(--good)}.bad{color:var(--bad)}@media (min-width: 720px){#dock{left:50%;right:auto;transform:translate(-50%);width:480px;border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--line)}}#insets{position:absolute;right:12px;top:96px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.inset{position:relative;width:clamp(155px,28vw,275px);aspect-ratio:4 / 3;border:2px solid var(--surface);border-radius:8px;box-shadow:0 3px 14px #00000040}.inset span{position:absolute;left:6px;top:4px;padding:1px 7px;font-size:12px;font-weight:600;background:var(--surface);border-radius:999px}.tip{font-size:13px}.touch-only{display:none}body.touch .touch-only{display:block}button,.stick,#hud{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.tools{pointer-events:none;display:flex;flex-wrap:wrap;gap:8px}.tool{pointer-events:auto;min-height:36px;padding:6px 12px;border-radius:999px;font-size:13px;background:var(--surface);color:var(--text);border:1px solid var(--line)}.tool[aria-pressed=true]{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}#insets.collapsed,#insets[hidden]{display:none}body:not(.touch) .menu-actions{display:none}body:not(.touch) .hud-nav{display:none}body:not(.touch) #hud-menu-panel{display:block;margin-top:8px}body:not(.touch) #hud-menu-panel[hidden]{display:block}.stick{display:none}.knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:var(--accent);opacity:.9;box-shadow:0 2px 8px #0000004d;pointer-events:none}.a{position:absolute;font-style:normal;font-size:11px;color:var(--muted);pointer-events:none}.a.n{top:6px;left:50%;transform:translate(-50%)}.a.s{bottom:6px;left:50%;transform:translate(-50%)}.a.w{left:8px;top:50%;transform:translateY(-50%)}.a.e{right:8px;top:50%;transform:translateY(-50%)}body.touch{--stick: clamp(88px, 24vw, 120px);--edge: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));--floor: max(10px, env(safe-area-inset-bottom))}body.touch .card h1{font-size:1.35rem}body.touch .hud-nav{display:flex}body.touch .hud-stats{margin-top:0;margin-bottom:6px;align-items:center}body.touch .chip-status{display:none}body.touch #instruction{display:block;max-width:min(72vw,520px);padding:4px 10px;font-size:13px;font-weight:600;line-height:1.25}body.touch .chip-timer{font-size:24px;font-weight:700;padding:2px 14px;letter-spacing:.02em;background:color-mix(in srgb,var(--surface) 92%,transparent)}body.touch #hud-menu-panel:not([hidden]){display:block;position:static;margin-top:8px;width:min(280px,100%);z-index:5}body.touch #hud-menu-panel[hidden]{display:none!important}body.touch .menu-actions{display:flex}body.touch #dock .row{display:contents}body.touch #dock .row #reset,body.touch #dock .row #submit,body.touch #dock .row #tilt{display:none}body.touch #grip{position:fixed;right:var(--edge);bottom:calc(var(--floor) + var(--stick) + 10px);width:var(--stick);min-height:40px;max-width:none;margin:0;padding:0 8px;border-radius:20px;font-size:13px;font-weight:600;pointer-events:auto;z-index:2}body.touch #dock{left:0;right:0;transform:none;width:auto;padding:0;background:none;border:0;pointer-events:none}body.touch .slider,body.touch .hint,body.touch #tilt{display:none}body.touch .stick{display:block;position:fixed;bottom:var(--floor);width:var(--stick);height:var(--stick);border-radius:50%;background:color-mix(in srgb,var(--surface) 78%,transparent);border:2px solid var(--line);box-shadow:0 4px 16px #0003;pointer-events:auto;touch-action:none}body.touch #stick-move{left:var(--edge)}body.touch #stick-lift{right:var(--edge)}body.touch .inset{width:clamp(88px,21vw,138px)}body.touch #insets{top:88px;right:max(8px,env(safe-area-inset-right));gap:6px}@media (orientation: landscape) and (max-height: 600px){body.touch #insets{top:max(8px,env(safe-area-inset-top));flex-direction:row}body.touch #instruction{font-size:12px}body.touch .chip-timer{font-size:20px}body.touch #grip{bottom:calc(var(--floor) + var(--stick) + 6px);min-height:36px}}.task-list{display:grid;gap:8px;margin:0 0 12px}.task-list[hidden]{display:none}.task{display:block;width:100%;text-align:left;padding:10px 12px;min-height:0;border-radius:12px;background:var(--bg);color:var(--text);border:2px solid var(--line)}.task[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.task strong{display:block}.task em{font-style:normal;font-size:12px;color:var(--accent);font-weight:650}.task span{display:block;font-size:13px;color:var(--muted)}button.wide{width:100%;margin-top:8px}.account{margin:0 0 12px}.account p{margin:0 0 8px;font-size:14px}button.link{background:none;color:var(--muted);padding:4px 0;min-height:0;font-size:13px;text-decoration:underline}button.wide{width:100%}.nav{margin:12px 0 0!important;font-size:13px;display:flex;gap:16px}.nav a{color:var(--accent)}#leaderboard small{color:var(--muted)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.player[hidden],.live-strip[hidden]{display:none}.card h1{font-stretch:118%;font-weight:800}.player{display:grid;grid-template-columns:40px 1fr auto;gap:4px 12px;align-items:center;margin:0 0 14px;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--nitrile);color:var(--nitrile-ink);font-weight:800;font-size:18px}.who{min-width:0}.who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who span{font-size:13px;color:var(--muted)}.xp-mini{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:5px}.xp-mini span{display:block;height:100%;background:var(--hazard)}.goal{position:relative;width:44px;height:44px}.goal svg{display:block;transform:rotate(-90deg)}.goal b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums}.player-facts{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-size:13px;color:var(--muted)}.chip-earned{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--hazard);color:var(--hazard-ink);font-weight:700;text-decoration:none;font-size:14px}.chip-earned .mark{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--hazard-ink);color:var(--hazard);font-size:13px}.task small.best{float:right;font-size:12px;font-weight:700;color:var(--hazard-ink);background:var(--hazard);border-radius:999px;padding:1px 8px}.live-strip{display:flex;align-items:center;gap:8px;font-size:13px;margin:12px 0 0!important}.live-strip:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--verified);animation:live 2s ease-in-out infinite}@keyframes live{50%{opacity:.3}}.journey{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.journey li{position:relative;padding-top:18px;font-size:12px;color:var(--muted);text-align:center;line-height:1.2}.journey li:before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--line);background:var(--surface);box-sizing:border-box;z-index:1}.journey li:after{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--line)}.journey li:first-child:after{display:none}.journey li.done{color:var(--text)}.journey li.done:before{background:var(--nitrile);border-color:var(--nitrile)}.journey li.done:after,.journey li.now:after{background:var(--nitrile)}.journey li.now{color:var(--text);font-weight:650}.journey li.now:before{border-color:var(--nitrile);animation:live 1.2s ease-in-out infinite}.journey li.ok:before{background:var(--verified);border-color:var(--verified)}.journey li.fail{color:var(--bad);font-weight:650}.journey li.fail:before{background:var(--rejected);border-color:var(--rejected)}.reward{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--hazard-soft);border:1px solid var(--hazard-line)}.reward .gain{font-size:30px;font-weight:800;font-stretch:118%;line-height:1}.reward p{margin:6px 0 0!important;color:var(--text)!important;font-size:14px}.reward .level-up{font-weight:700}.reward ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.reward li{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--hazard);color:var(--hazard-ink)}@media (prefers-reduced-motion: reduce){.live-strip:before,.journey li.now:before{animation:none}}:root{--radius: 8px}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:var(--ink);text-underline-offset:4px}.card{max-width:460px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--bench);box-shadow:var(--housing-shadow)}.card:before{content:"";display:block;width:72px;height:10px;margin-bottom:22px;opacity:.55;background:repeating-linear-gradient(90deg,var(--ink-2) 0 2px,#ffffff80 2px 3px,transparent 3px 7px)}.card .eyebrow{margin:0 0 12px;font:11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.card h1{font-size:38px;font-weight:600;line-height:1.05;letter-spacing:-.055em;margin-bottom:16px}.card h2{font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.04em}.card>p{font-size:15px;line-height:1.6}button{border:1px solid var(--line);border-radius:var(--radius-s);min-height:44px;box-shadow:var(--raised-shadow);font-size:14px;transition:transform var(--dp-motion-key) var(--dp-motion-settle),box-shadow var(--dp-motion-key),background-color var(--dp-motion-key)}button.primary,.menu-action.menu-primary{background:var(--ink);border-color:var(--ink);color:var(--on-field);box-shadow:inset 0 1px #ffffff30,0 2px 2px #34414940}button.primary:hover:enabled{background:var(--field)}button.secondary,button.grip,.tool,.menu-action{background:var(--surface);border-color:var(--line);border-radius:var(--radius-s)}button:active:enabled{transform:translateY(1px);box-shadow:var(--pressed-shadow)}button:disabled{opacity:.65;box-shadow:none}button.grip.on,.tool[aria-pressed=true]{background:var(--nitrile-soft);color:var(--ink);border-color:var(--hazard-line);box-shadow:var(--pressed-shadow)}button.tool{min-height:44px;padding:8px 12px}.task{position:relative;padding:18px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface);box-shadow:var(--raised-shadow)}.task[aria-checked=true]{background:var(--surface-2);border-color:var(--line);box-shadow:var(--pressed-shadow)}.task[aria-checked=true]:after{content:"";position:absolute;top:20px;right:16px;width:6px;height:6px;border-radius:50%;background:var(--nitrile)}.task strong{padding-right:16px;font-size:18px;letter-spacing:-.03em}.task em{color:var(--ink-2);font:11px/1.5 var(--mono);letter-spacing:.04em}.task span{font:13px/1.5 var(--font);letter-spacing:0;margin-top:8px}.task small{font-size:13px;line-height:1.5}.card .account{border-top:1px solid var(--line);padding-top:14px}#account-line{font-size:13px}.player{border-radius:var(--radius-s);background:var(--surface-2);box-shadow:var(--well-shadow)}.avatar{background:var(--ink);color:var(--surface);border-radius:var(--radius-s)}.chip-earned,.task small.best{border-radius:var(--radius-s)}.live-strip{padding:12px;background:var(--surface-2);border-radius:var(--radius-s);box-shadow:var(--well-shadow)}.live-strip:before,.journey li.now:before{animation:none}.card .nav{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}.card .nav a{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:40px;padding:0 8px;font-size:12px;text-decoration:none;color:var(--ink);background:var(--surface);box-shadow:var(--raised-shadow);border:1px solid var(--line);border-radius:var(--radius-s)}.card .nav a:hover{background:var(--surface-2)}#instruction{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bench);box-shadow:var(--raised-shadow);font-weight:500}.chip{border-radius:var(--radius-s);background:var(--field);color:var(--on-field);border:1px solid var(--field);box-shadow:inset 0 1px 3px #00000040;font:12px/1.5 var(--mono);padding:6px 12px}.chip.ok{color:#b1dfc5;border-color:var(--verified)}.hud-menu-panel{width:fit-content;max-width:100%;border-radius:6px;background:var(--bench);box-shadow:var(--raised-shadow)}#dock{border:1px solid var(--line);background:var(--bench);box-shadow:var(--raised-shadow);padding:18px 20px max(16px,env(safe-area-inset-bottom))}.slider{color:var(--ink-2);font:12px/1.4 var(--mono)}.slider input{accent-color:var(--ink);min-height:28px}.hint{line-height:1.5}.inset{border:4px solid var(--surface-2);border-radius:5px;box-shadow:var(--well-shadow)}.inset span{border-radius:2px;background:var(--field);color:var(--on-field);font:11px/1.5 var(--mono)}.reward{border-radius:var(--radius-s);background:var(--surface-2);border-color:var(--line);box-shadow:var(--well-shadow)}.reward .gain{font-weight:500}.reward li{border-radius:var(--radius-s)}#metrics{background:var(--field);color:var(--on-field);padding:18px;border-radius:var(--radius-s);box-shadow:var(--well-shadow);font-size:14px}#metrics dt{color:var(--on-field-muted)}#metrics dd{font-family:var(--mono)}body.touch #dock{border:0;box-shadow:none;background:none;padding:0}body.touch .stick{background:color-mix(in srgb,var(--bench) 94%,transparent);box-shadow:var(--well-shadow);border-color:var(--line)}body.touch .knob{background:var(--surface);opacity:1;border:1px solid var(--line);box-shadow:var(--raised-shadow)}body.touch #grip{border-radius:var(--radius-s)}@media (min-width: 720px){#dock{width:520px;border-radius:8px 8px 0 0}}@media (max-width: 480px){.card{padding:22px;max-height:calc(100dvh - 24px);left:12px;right:12px}.card h1{font-size:32px}}@media (hover: hover) and (prefers-reduced-motion: no-preference){button:hover:enabled{transform:translateY(-1px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}#practice{margin-top:12px;width:100%}.card .practice-note{margin:10px 0 16px;color:var(--muted);font-size:12px;line-height:1.5}#practice-chip{background:var(--surface);color:var(--ink);border-color:var(--line)}#practice-sign-in{margin-top:10px}.card .account:has(#account-line:empty){padding-top:18px}#account-line:empty{display:none}
