:root{color-scheme:dark;--ink: #f4f4f4;--dim: #8d8d8d;--track: #5a5a5a;--bg: #050506;font-family:IBM Plex Sans,Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}canvas.view{touch-action:none}canvas.view{display:block;width:100%;height:100%}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(0,0,0,.62) 100%)}.hud{position:fixed;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;pointer-events:none;gap:24px}.cluster{display:flex;align-items:center;gap:18px}.gauge{position:relative;width:min(168px,22vw);aspect-ratio:1}.gauge svg{width:100%;height:100%;display:block}.gauge .track,.gauge .value{fill:none;stroke-linecap:round}.gauge .track{stroke:var(--track);stroke-width:5}.gauge .value{stroke:var(--ink);stroke-width:7}.readout{position:absolute;top:18%;right:16%;bottom:16%;left:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink)}.kicker{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1}.num{font-size:clamp(28px,4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1,"tnum" 1;margin-top:4px}.unit{margin-top:2px;font-size:12px;letter-spacing:.14em;color:var(--ink)}.attitude{width:min(188px,24vw);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px #f4f4f4eb;overflow:hidden}.attitude canvas{width:100%;height:100%;display:block}.plan{width:min(78px,10vw);height:auto;overflow:visible}.plan path,.plan circle{fill:none;stroke:#8a8a8a;stroke-width:1.4}.plan rect{fill:none;stroke:#8a8a8a;stroke-width:1.4}.plan .glass{stroke:#5c5c5c}.plan .jet{fill:#f4f4f4;stroke:none;opacity:.25}.hint{position:fixed;top:22px;left:50%;transform:translate(-50%);margin:0;color:#f4f4f49e;font-size:13px;letter-spacing:.01em;width:max-content;max-width:90vw;text-align:center;transition:opacity .6s ease}.hint-hide{opacity:0}.center{position:fixed;left:50%;bottom:26px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);pointer-events:none}.speed{display:flex;align-items:baseline;gap:6px;font-size:30px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.speed small{font-size:11px;letter-spacing:.16em;color:var(--dim)}.charge{width:120px;height:3px;border-radius:2px;background:#f4f4f429;overflow:hidden}.charge-fill{height:100%;background:var(--ink);transform-origin:left center;transition:background .3s ease}.charge-fill.low{background:#8d8d8d}.trick{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:0;height:16px}.trick.show{animation:trick 2.2s ease forwards}@keyframes trick{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:translateY(0)}75%{opacity:1}to{opacity:0}}@media(max-width:820px){.hint{display:none}.center{bottom:auto;top:14px}.hud{bottom:10px;padding:0 10px}.kicker{font-size:9px}.unit{font-size:10px}}@media(prefers-reduced-motion:reduce){.hint{transition:none}.trick.show{animation:none;opacity:1}}.no-hud .hud,.no-hud .hint,.no-hud .center,.no-hud .vignette{display:none}.touch{--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-t: env(safe-area-inset-top, 0px);position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;touch-action:none}.touch button{font:inherit;color:var(--ink);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;touch-action:none}.touch svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.stick{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(18px + var(--safe-b));width:168px;height:168px;display:grid;place-items:center;pointer-events:auto;touch-action:none}.stick-base{position:relative;width:136px;height:136px;border-radius:50%;border:1.5px solid rgba(244,244,244,.5);background:radial-gradient(circle,#ffffff0f,#ffffff05 70%);display:grid;place-items:center;transition:border-color .15s ease}.stick-base:before,.stick-base:after{content:"";position:absolute;background:#f4f4f42e}.stick-base:before{width:1px;height:70%}.stick-base:after{height:1px;width:70%}.stick.active .stick-base{border-color:#f4f4f4e6}.stick-knob{width:58px;height:58px;border-radius:50%;background:#f4f4f4e6;box-shadow:0 2px 14px #00000080;z-index:1;will-change:transform}.pad{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(18px + var(--safe-b));width:196px;height:196px;pointer-events:none}.tbtn{position:absolute;width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(244,244,244,.6);background:#0a0a0c6b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:auto;transition:transform .08s ease,background .08s ease}.tbtn span{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.tbtn.down{background:#f4f4f4eb;color:#0a0a0c;transform:scale(.94)}.tbtn.big{width:92px;height:92px;right:0;bottom:0}.tbtn.big svg{width:30px;height:30px}.tbtn[data-act=kickflip]{right:104px;bottom:6px}.tbtn[data-act=backflip]{right:14px;bottom:104px}.tbtn.small{width:46px;height:46px}.tbtn.small svg{width:20px;height:20px}.tbtn[data-act=rollL]{right:112px;bottom:86px}.tbtn[data-act=rollR]{right:84px;bottom:140px}.tools{position:absolute;right:calc(12px + var(--safe-r));top:calc(96px + var(--safe-t));display:flex;flex-direction:column;gap:10px;pointer-events:none}.tool{width:42px;height:42px;border-radius:12px;border:1px solid rgba(244,244,244,.35);background:#0a0a0c6b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;pointer-events:auto}.tool:active{background:#f4f4f4d9;color:#0a0a0c}.touch-ui .hint{display:none}.touch-ui .hud{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;padding:0 calc(10px + env(safe-area-inset-right,0px)) 0 calc(10px + env(safe-area-inset-left,0px));align-items:flex-start}.touch-ui .cluster{gap:8px}.touch-ui .gauge{width:70px}.touch-ui .attitude{width:74px}.touch-ui .plan{display:none}.touch-ui .num{font-size:19px;margin-top:1px}.touch-ui .kicker{font-size:7px;letter-spacing:.12em}.touch-ui .unit{font-size:7px}.touch-ui .gauge .track{stroke-width:6}.touch-ui .gauge .value{stroke-width:8}.touch-ui .center{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;gap:6px}.touch-ui .speed{font-size:24px}.touch-ui .charge{width:84px}.touch-ui .trick{font-size:11px}@media(orientation:portrait){.touch-ui .center{top:calc(96px + env(safe-area-inset-top,0px))}}@media(orientation:landscape)and (max-height:500px){.stick{width:140px;height:140px;bottom:calc(8px + var(--safe-b))}.stick-base{width:116px;height:116px}.pad{transform:scale(.84);transform-origin:bottom right;bottom:calc(8px + var(--safe-b))}.tools{flex-direction:row;top:auto;bottom:calc(14px + var(--safe-b));right:calc(220px + var(--safe-r))}.touch-ui .attitude{width:62px}.touch-ui .gauge{width:60px}}@media(max-width:360px){.pad{transform:scale(.88);transform-origin:bottom right}.stick{transform:scale(.9);transform-origin:bottom left}.touch-ui .attitude{display:none}}