@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{font-family:Barlow,Arial,sans-serif;color:#f4f4ea;background:#142324;font-synthesis:none}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{margin:0;overflow:hidden;touch-action:none}button,a,input{touch-action:none}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff30;background:#132627b8;border-radius:5px}button:hover{background:#344c48}button:focus-visible{outline:2px solid #ddff73;outline-offset:4px}#game,#shade{position:fixed;inset:0;width:100%;height:100%}#shade{pointer-events:none;background:linear-gradient(90deg,rgba(8,24,25,.94),rgba(8,24,25,.62) 35%,transparent 72%)}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 40px;z-index:2}.brand{font:900 32px 'Barlow Condensed',sans-serif;font-style:italic;letter-spacing:-1px;color:white;text-decoration:none}.brand span{color:#d9fb75;font:600 14px Barlow,sans-serif;letter-spacing:2px;margin-left:12px}.track{font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:13px}.track i{width:6px;height:6px;background:#d9fb75;border-radius:50%}.track span{opacity:.35}#pause{font-size:22px;width:42px;height:40px}#menu{position:absolute;left:6%;top:18%;width:470px}.eyebrow{font-size:10px;letter-spacing:3px;color:#d9fb75;font-weight:600}h1{font:800 clamp(62px,6.9vw,104px)/.88 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-1.5px;margin:22px 0}h1 em{color:#d9fb75;font-style:italic}p{font-size:14px;line-height:1.6;color:#c0ceca}.specs{display:flex;gap:36px;padding:22px 0 24px;border-bottom:1px solid #ffffff25;max-width:420px}.specs div{display:flex;flex-direction:column;gap:3px}.specs b{font:600 28px 'Barlow Condensed',sans-serif}.specs span{font-size:8px;letter-spacing:1.4px;color:#a6b9b3}.setup{margin:24px 0 18px;max-width:420px}.setup>label{font-size:9px;letter-spacing:2px;color:#c0ceca}.segmented{display:flex;margin-top:9px;gap:5px}.segmented button{padding:12px 13px;font-size:10px;font-weight:600;flex:1;white-space:nowrap}.segmented .selected{color:#d9fb75;border-color:#d9fb75;background:#d9fb7515}#sensorNote{font-size:10px;line-height:1.5;margin-top:9px;color:#a8bdb5;min-height:16px}.setup label.auto{display:flex;align-items:center;gap:8px;letter-spacing:0;font-size:11px;margin-top:14px}.auto input{accent-color:#d9fb75}.auto span{color:#819a90;font-size:9px}.primary{background:#d9fb75;color:#142324;border:none;padding:19px 23px;font-size:13px;font-weight:800;letter-spacing:1px;width:100%;max-width:420px;display:flex;justify-content:space-between}.primary:hover{background:#e9ffa8}.hint{font-size:8px;letter-spacing:1.5px;color:#90a99d;margin-top:15px}footer{position:absolute;bottom:25px;left:40px;right:40px;font-size:9px;letter-spacing:2px;color:#9ab2a7;display:flex;justify-content:space-between}.hidden{display:none!important}#hud{position:fixed;inset:0;pointer-events:none}#hud button{pointer-events:auto}.timing{position:absolute;top:105px;left:40px;display:flex;flex-direction:column;text-shadow:0 2px 8px #000}.timing small{font-size:10px;letter-spacing:2px}.timing small b{color:#d9fb75;margin-left:15px}.timing strong{font:600 38px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;margin:4px 0}.timing span{font-size:9px;letter-spacing:1px;color:#eee}.timing span b{margin-left:14px}#map{position:absolute;right:30px;top:85px;width:160px;height:132px;filter:drop-shadow(0 2px 3px #123)}.telemetry{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);width:160px;text-align:center;text-shadow:0 2px 4px #000}.telemetry>div:first-child{display:flex;align-items:baseline;justify-content:center;gap:8px}.telemetry strong{font:700 65px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}.telemetry span{font-size:10px}.rpm{height:4px;background:#ffffff30;margin:2px 0 10px}.rpm i{display:block;background:#d9fb75;height:100%;width:0}.telemetry small{font-size:8px;letter-spacing:1px}.steerbar{position:relative;margin:10px auto;width:95px;height:2px;background:#ffffff40}.steerbar i{position:absolute;width:6px;height:6px;top:-2px;left:50%;background:#d9fb75;border-radius:100%}#touch{position:absolute;bottom:30px;left:35px;right:35px;display:flex;justify-content:space-between;align-items:end}.steering,.pedals{display:flex;gap:10px}#touch button{height:86px;width:82px;background:#152c2d80;backdrop-filter:blur(8px);border:1px solid #ffffff35}#touch button.active{background:#d9fb7560;border-color:#d9fb75}.steering button{font-size:46px}#touch #gas{width:108px;height:110px;background:#d9fb752a;border-color:#d9fb75;color:#e4ff9b;font-size:11px;font-weight:700}#gas span{display:block;font-size:35px}#touch #brake{font-size:11px;border-bottom:3px solid #fba58a}.tools{position:absolute;right:35px;top:235px;display:flex;gap:6px}.tools button{font-size:8px;padding:9px}#toast{position:absolute;top:26%;left:50%;transform:translateX(-50%);font:700 24px 'Barlow Condensed',sans-serif;text-align:center;text-shadow:0 2px 4px #000;color:#e0ff8c}.panel{width:min(420px,90vw);padding:30px;background:#112729ed;border:1px solid #ffffff25;box-shadow:0 40px 100px #0008;border-radius:8px}.panel h2{font:700 50px 'Barlow Condensed',sans-serif;margin:12px 0}.panel p{white-space:pre-line}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:#07181988;backdrop-filter:blur(6px);z-index:4}.secondary{width:100%;margin-top:10px;padding:13px;font-size:10px;letter-spacing:1px}body.playing #shade{background:linear-gradient(#081c2850,transparent 30%,transparent 65%,#081c2880)}
@media(max-width:650px){header{padding:20px}.brand{font-size:26px}.track{display:none}#menu{top:15%;left:7%;width:86%;max-width:400px}h1{font-size:76px}.specs{padding:16px 0;gap:32px}.setup{margin-top:18px}footer{left:20px;right:20px;font-size:7px}footer span{display:none}#shade{background:linear-gradient(90deg,#081b21ed,#081b2190 75%,#081b2130)}.timing{left:20px;top:84px}.timing strong{font-size:30px}#map{right:10px;top:75px;width:115px;height:100px}.tools{right:15px;top:190px;max-width:150px;flex-wrap:wrap;justify-content:end}.tools button{font-size:7px;padding:8px}#touch{left:12px;right:12px;bottom:22px;gap:10px}#touch button{width:59px;height:76px}#touch #gas{width:75px;height:100px}.steering,.pedals{gap:6px}.telemetry{bottom:140px;width:125px}.telemetry strong{font-size:52px}.telemetry small{font-size:7px}#toast{top:35%;width:85%}}
@media(max-height:540px){header{padding:12px 25px}#menu{top:20%;left:6%;width:85%;max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:45px}#menu .eyebrow{grid-column:1}h1{font-size:58px;margin:14px 0}#menu p{font-size:11px;margin:0}.specs{grid-column:1;padding:13px 0;gap:25px}.setup{grid-column:2;grid-row:1/4;margin:0;padding-top:15px}.primary{grid-column:2;grid-row:4;height:50px;align-self:end}.hint{grid-column:2;margin-top:10px}footer{bottom:12px}.timing{top:64px;left:25px}#map{top:50px;height:100px;width:122px}.tools{top:157px;right:24px}.telemetry{bottom:15px}#touch{bottom:18px}#touch button{height:65px}#touch #gas{height:80px}#toast{top:24%}}
@media(max-width:650px) and (max-height:760px) and (min-height:541px){#menu{top:12%}h1{font-size:61px;margin:18px 0}#menu p{font-size:12px}.specs{padding:12px 0}.setup{margin:12px 0}.segmented button{padding:11px 8px}.hint{margin-top:10px}footer{bottom:12px}.primary{padding:16px 20px}}
