:root{color-scheme:dark;--ink: #14102a;--night: #1d1740;--plate: #2a2150;--step: #3a2f6b;--cream: #f3ead7;--kerb: #d9cbb0;--gold: #f2c14e;--gold-dk: #a8741c;--cinder: #b8483a;--red: #e8434f;--ghost: #7fe0e8;--pixel: "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, monospace}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--pixel);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}.app{box-sizing:border-box;height:100%;max-width:1080px;margin:0 auto;padding-inline:calc(16px + env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-right,0px));padding-block:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"bar bar" "stage stage" "padJ padJ" "padL padR" "help help";gap:10px 12px}.bar{grid-area:bar;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}.brand{display:block;width:320px;max-width:100%;height:auto;background:transparent;image-rendering:pixelated;image-rendering:crisp-edges}@media(max-width:560px),(orientation:landscape)and (max-height:520px){.brand{width:160px}}.meta{flex:1 1 auto;font-size:11px;color:var(--ghost);letter-spacing:.06em;min-width:0}.chip{font:inherit;font-size:11px;letter-spacing:.06em;color:var(--cream);background:var(--plate);border:2px solid var(--step);border-radius:4px;padding:6px 10px;cursor:pointer}.chip.off{color:var(--kerb);border-color:var(--cinder)}.chip:hover{border-color:var(--gold)}.stage{grid-area:stage;min-height:0;display:grid;place-items:center}.screen{position:relative;border:6px solid var(--plate);outline:2px solid var(--step);border-radius:6px;box-shadow:0 10px #0b0818;line-height:0;max-width:100%}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--night);max-width:100%}.cta-row{position:absolute;left:0;right:0;bottom:12%;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-right:5%;line-height:normal;pointer-events:none}.cta{pointer-events:auto;font:inherit;font-weight:700;font-size:clamp(18px,3.6vw,30px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--gold);border:4px solid var(--ink);border-radius:8px;padding:.45em 1.3em;box-shadow:0 6px 0 var(--gold-dk),0 6px 0 4px var(--ink);cursor:pointer;animation:bob 1.1s steps(2) infinite}.athlete{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:4px 6px;border:3px solid var(--ink);border-radius:8px;background:var(--plate)}body[data-mode=results] .athlete{display:none}.athlete canvas{width:clamp(32px,5vw,48px);height:auto;background:var(--night);border-radius:4px}.athlete span{min-width:5.5ch;font-weight:700;font-size:clamp(12px,1.9vw,16px);letter-spacing:.06em}.athlete button{font:inherit;font-size:clamp(12px,1.8vw,15px);color:var(--cream);background:var(--step);border:0;border-radius:5px;padding:.35em .6em;cursor:pointer}.athlete button:hover{color:var(--gold)}.events{pointer-events:auto;display:flex;border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink);gap:3px}.events button{font:inherit;font-size:clamp(11px,1.7vw,14px);letter-spacing:.05em;color:var(--kerb);background:var(--plate);border:0;padding:.5em .9em;cursor:pointer}.events button[aria-pressed=true]{color:var(--ink);background:var(--cream)}.events button:hover{color:var(--gold)}.events button[aria-pressed=true]:hover{color:var(--ink)}.cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-dk),0 2px 0 4px var(--ink)}@keyframes bob{50%{transform:translateY(-3px)}}.pad{font:inherit;position:relative;display:grid;place-items:center;align-content:center;gap:6px;height:clamp(64px,12vh,110px);color:var(--cream);background:var(--plate);border:4px solid var(--ink);outline:2px solid var(--step);border-radius:14px;box-shadow:inset 0 -8px #0000004d,0 6px #0b0818;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.pad-l{grid-area:padL}.pad-r{grid-area:padR}.pad-j{grid-area:padJ;height:48px;display:flex;justify-content:center;align-items:center;gap:14px}.pad-j .pad-big{font-size:22px}body:not([data-event=hurdles110]) .pad-j{display:none}.pad-big{font-size:34px;font-weight:700;line-height:1}.pad kbd{font:inherit;font-size:12px;color:var(--kerb);border:2px solid var(--step);border-radius:4px;padding:1px 6px}.pad.hit{background:var(--gold);color:var(--ink);transform:translateY(4px);box-shadow:inset 0 -4px #0003,0 2px #0b0818}.pad.hit kbd{color:var(--ink);border-color:var(--ink)}.pad.miss{background:var(--red);color:var(--ink)}.help{grid-area:help;margin:0;font-size:11px;letter-spacing:.05em;color:var(--kerb);text-align:center;line-height:1.6;text-wrap:balance}.help b{color:var(--gold);font-weight:700}.touch .pad{height:clamp(110px,26vh,220px)}.touch .pad-big{font-size:48px}.touch .pad-j{height:clamp(56px,9vh,80px)}.touch .pad-j .pad-big{font-size:30px}.touch .pad kbd,.touch .help .kb,.help .tap{display:none}.touch .help .tap{display:inline}@media(orientation:landscape)and (max-height:520px){.app{max-width:none;grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar bar bar" "padL stage padR" "padL padJ padR"}.pad,.touch .pad{height:100%}.pad-j,.touch .pad-j{height:48px}.help{display:none}.stage{min-width:0}}button:focus-visible{outline:3px solid var(--ghost);outline-offset:3px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){.cta{animation:none}}