*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse at top,#455a70,#121d2c);color:#f8f5ea;display:flex;justify-content:center;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff35;background:#ffffff0d;border-radius:12px;padding:12px 18px;touch-action:none}button:hover{background:#ffffff22}button:focus-visible,a:focus-visible{outline:3px solid #ffd58a}#app{width:min(100%,520px);height:100dvh;padding: max(8px,env(safe-area-inset-top)) 14px max(5px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background:#172b3c;box-shadow:0 0 80px #0005}header{display:flex;gap:8px;align-items:center;height:42px;flex-shrink:0}header a{color:#fff;text-decoration:none;font-size:15px;letter-spacing:3px;flex:1}header b{color:#ffd18a}header button{padding:6px 10px;font-size:12px}#hud{height:85px;padding:10px 4px;display:flex;flex-direction:column;flex-shrink:0}#label{font-size:10px;letter-spacing:2px;color:#dbbd97}#value{font-size:27px;font-variant-numeric:tabular-nums;line-height:1.4}#best{font-size:11px;color:#acc3ce}#stage{position:relative;flex:1;min-height:120px;overflow:hidden;border-radius:16px;background:#7898ae;touch-action:none}canvas{width:100%;height:100%;display:block;touch-action:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#10243477;overflow:auto}#overlay:empty{display:none}.panel{width:100%;max-width:370px;text-align:center;border:1px solid #ffffff3a;border-radius:18px;background:#172b3cec;padding:22px 20px;box-shadow:0 16px 50px #0003}.eyebrow{font-size:10px;letter-spacing:4px;color:#ffd18a}h1{font-size:40px;letter-spacing:3px;margin:10px 0}h2{margin:8px 0 16px;font-size:24px}.panel p{font-size:13px;line-height:1.8;color:#c9d9dc}.stack{display:grid;gap:10px}.primary{background:#f2ca8a;color:#172b3c;font-weight:700;border:0}.primary:hover{background:#ffe1ae}.courses{display:grid;grid-template-columns:1fr 1fr;gap:8px}.courses button{padding:9px 4px;font-size:12px}.courses small{display:block;color:#b4c8d0;font-size:10px;margin-top:4px}.record{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;margin:18px 0;color:#ffd18a}.diagram{display:flex;justify-content:center;gap:24px;margin:12px 0}.diagram div{font-size:30px}.diagram small{display:block;font-size:10px;color:#cfdae1}.diagram .tilt{transform:rotate(45deg)}#flash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:60px;font-weight:800;color:#fff;text-shadow:0 4px 20px #143445}#controls{height:82px;display:flex;align-items:center;gap:15px;flex-shrink:0;padding-top:9px}#controls button{flex:1;height:66px;font-size:26px;border-radius:15px;user-select:none;-webkit-user-select:none}#controls small{display:block;font-size:9px;letter-spacing:2px}#controls span{font-size:9px;letter-spacing:2px;text-align:center;color:#9cb4c2}#controls button.held{background:#f2ca8a;color:#172b3c}footer{text-align:center;font-size:9px;color:#9ab1bd;height:20px;padding-top:5px;flex-shrink:0}@media(max-height:620px){#hud{height:65px;padding:5px}#value{font-size:23px}#controls{height:64px}#controls button{height:54px}.panel{padding:12px}h1{font-size:30px}h2{font-size:19px}.panel p{margin:8px 0}.courses button{padding:5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}