:root{--bg: #1b1612;--ink: #f6f1e8;--muted: #b5a494;--left: #4c8dff;--right: #f0a202;--ivory: #f4efe6;--panel: rgba(255, 248, 238, .06);--line: rgba(246, 241, 232, .14);color-scheme:dark;font-family:Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;height:100dvh;margin:0}body{background:radial-gradient(1200px 500px at 50% -10%,rgba(240,162,2,.08),transparent 55%),var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}#app{display:flex;flex-direction:column;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 18px 12px;border-bottom:1px solid var(--line)}.titles{flex:1 1 240px;min-width:0}.eyebrow{margin:0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}h1{margin:2px 0 0;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1}#hand-note{margin:4px 0 0;color:var(--muted);font-size:14px}.hands{display:flex;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}.hands button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px;cursor:pointer}.hands button[data-hand=left]:before,.hands button[data-hand=right]:before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;vertical-align:baseline}.hands button[data-hand=left]:before{background:var(--left)}.hands button[data-hand=right]:before{background:var(--right)}.hands button[aria-pressed=true]:before{display:none}.hands button[data-hand=left][aria-pressed=true]{background:var(--left);color:#fff}.hands button[data-hand=both][aria-pressed=true]{background:var(--ivory);color:#1b1612}.hands button[data-hand=right][aria-pressed=true]{background:var(--right);color:#2a1c08}.transport{display:flex;flex:1 1 320px;flex-wrap:wrap;align-items:center;gap:10px}#play,#restart{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font:inherit;font-weight:700;cursor:pointer}#play{min-width:108px;height:48px;padding:0 22px;border-radius:999px;background:var(--ivory);color:#1b1612;font-size:18px}#restart{height:48px;padding:0 16px;border-radius:999px;background:transparent;color:var(--ink);border:1px solid var(--line)}.speed{display:flex;flex-direction:column;gap:4px;min-width:180px;color:var(--muted);font-size:13px;font-weight:600}.speed strong{color:var(--ink)}.seek{flex:1 1 100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}input[type=range]{width:100%;accent-color:var(--ivory);cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}#stage{position:relative;flex:1;min-height:0}#scroller{height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x}button,input{touch-action:manipulation}#scroller::-webkit-scrollbar{height:12px}#scroller::-webkit-scrollbar-track{background:#100e0c}#scroller::-webkit-scrollbar-thumb{background:#5c4e42;border-radius:99px;border:2px solid #100e0c}#highway,#keys{display:block}#badge{position:absolute;z-index:2;top:14px;left:16px;margin:0;padding:8px 12px;border-radius:999px;font-weight:700;letter-spacing:-.01em;pointer-events:none}#badge[data-hand=left]{background:var(--left);color:#fff}#badge[data-hand=right]{background:var(--right);color:#2a1c08}#message{position:absolute;top:0;right:0;bottom:0;left:0;place-items:center;margin:0;padding:24px;text-align:center;background:#14100de0}#message:not([hidden]){display:grid}@media(max-width:800px){h1{font-size:24px}.hands button{padding:10px 12px}}