*{box-sizing:border-box}body{margin:0;background:#0d1721;color:#ecf0f0;font-family:system-ui,sans-serif}header{display:flex;justify-content:space-between;padding:17px 5%;border-bottom:1px solid #9caebc25}a{color:#b8c9d1;text-decoration:none}main{max-width:1180px;margin:auto;padding:22px 18px}.eyebrow{font-size:10px;letter-spacing:4px;color:#efa16c}h1{font-size:clamp(32px,5vw,54px);letter-spacing:-1px;margin:8px 0 20px}.hud{display:flex;justify-content:space-around;gap:10px;padding:16px 9px;background:#182a37;border:1px solid #375365;border-radius:17px 17px 0 0;color:#9bb4c1;font-size:10px;letter-spacing:1px}.hud b{display:block;color:#f5e3bb;font-size:20px;letter-spacing:0;margin-top:4px}.stage{position:relative;border:1px solid #375365;border-top:0;overflow:hidden;background:#547f8b;box-shadow:0 18px 45px #0005}canvas{display:block;width:100%;aspect-ratio:16/9;touch-action:none}progress{display:block;width:100%;height:5px;border:0;accent-color:#ef9e67}progress::-webkit-progress-bar{background:#263c49}progress::-webkit-progress-value{background:#ef9e67}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0a1c2de8;text-align:center;padding:22px;z-index:3}.overlay[hidden]{display:none}.overlay img{width:155px;border-radius:24px;box-shadow:0 10px 0 #07121b}.overlay h2{font-size:28px;margin:18px 0 9px}.overlay p{max-width:470px;color:#a9c1d1;line-height:1.7}.start{background:linear-gradient(#f3c68c,#e49a5e);border:0;border-radius:10px;padding:15px 30px;font-weight:850;color:#332415;box-shadow:0 5px 0 #775037;cursor:pointer}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px 0}.toolbar button{background:#223745;border:1px solid #527082;border-radius:8px;color:#dfebef;padding:10px 15px;cursor:pointer}.toolbar div{display:flex;gap:7px}#status{font-size:12px;color:#bdcdd6;min-height:22px;margin:0}.controls{display:flex;justify-content:space-between;gap:15px;margin-top:10px}.steering,.pedals{display:flex;gap:12px}.controls button{width:80px;height:64px;border:1px solid #658291;border-radius:13px;box-shadow:0 5px 0 #0a111b;background:linear-gradient(#40596b,#253c4e);color:white;font-weight:800;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}.controls .gas{background:linear-gradient(#74bd9e,#367a69);width:110px}.controls .brake{background:linear-gradient(#c98076,#854e54)}.controls button.pressed{transform:translateY(3px);box-shadow:0 2px 0 #0a111b;filter:brightness(1.2)}.help{color:#8fa7b5;font-size:12px;line-height:1.8;margin-top:24px}@media(max-width:620px){main{padding:18px 10px}.hud{flex-wrap:wrap;font-size:9px;padding:12px 7px}.hud b{font-size:15px}canvas{aspect-ratio:4/5}.overlay img{width:130px}.overlay h2{font-size:25px}.overlay p{font-size:13px}.toolbar{align-items:flex-start;flex-direction:column}.toolbar button{font-size:12px;padding:9px 12px}.controls button{width:60px;height:60px}.controls .gas{width:82px}.steering,.pedals{gap:8px}.controls{gap:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}