:root{color-scheme:light;--cream:#fff4df;--ink:#23464b;--teal:#208a88;--orange:#f28a45}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b5d1d4;font-family:Arial,Helvetica,sans-serif;color:var(--cream);height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe783;outline-offset:4px}button:disabled{opacity:.6;cursor:wait}#world{position:fixed;inset:0}#world canvas{width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(0deg,#14333f42,transparent 25%,transparent 65%,#14333f38)}header{position:fixed;top:25px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}.brand{font-weight:1000;font-size:20px;letter-spacing:1px;color:white;text-decoration:none;text-shadow:0 2px 10px #1236}.brand span{color:#ffd289;margin-left:4px}.brand small{display:block;letter-spacing:3px;font-size:7px;margin-top:7px;color:#fff9}.tools{display:flex;gap:8px}.tools button{background:#173e44cc;backdrop-filter:blur(8px);border:1px solid #fff3;color:white;border-radius:10px;height:39px;min-width:42px;font-size:19px}.hud{position:fixed;top:105px;left:32px;right:32px;display:flex;justify-content:space-between;pointer-events:none}.position{display:flex;align-items:center;gap:12px;background:#17393fbd;border:1px solid #ffffff38;padding:12px 21px;border-radius:16px;backdrop-filter:blur(10px);transform:skew(-4deg)}.position strong{font-size:65px;font-style:italic;color:#ffd082;line-height:1}.position span{font-size:20px;color:#fff9}.position small{display:block;font-size:8px;letter-spacing:2px;margin-top:9px}.laps{background:#17393fbd;border:1px solid #fff3;border-radius:14px;backdrop-filter:blur(10px);padding:14px 20px;text-align:right}.laps small{font-size:9px;letter-spacing:2px;margin-right:15px}.laps b{font-size:30px;color:#ffd082}.laps i{font-style:normal;color:#fff9;font-size:20px}#time{font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:1px;margin-top:9px;color:#fff9}.telemetry{position:fixed;bottom:90px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.map-wrap{width:190px;background:#17393fba;border:1px solid #fff3;backdrop-filter:blur(8px);border-radius:17px;padding:4px 9px 14px;text-align:center}.map-wrap canvas{display:block;width:170px;height:132px}.map-wrap span{font-size:7px;letter-spacing:2px;color:#fff9}.speedbox{width:210px;text-align:right;background:#17393fcc;backdrop-filter:blur(10px);border:1px solid #fff3;border-radius:17px;padding:16px 21px}.speed{display:flex;gap:9px;align-items:baseline;justify-content:flex-end;margin:9px 0}.speed strong{font-size:58px;font-style:italic;font-weight:900;line-height:1}.speed span{font-size:9px;letter-spacing:1px;color:#fff9}.boost{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#a3e9da}.boost b{color:#ffd082;font-size:17px}.meter,.drift{height:6px;background:#ffffff16;overflow:hidden;border-radius:4px}.meter i,.drift i{height:100%;display:block;background:#81ddd5;width:0;transition:width .1s}.drift{height:3px;margin-top:6px}.drift i{background:#ffc578}.speedbox>small{font-size:6px;letter-spacing:.8px;color:#fff8;display:block;margin-top:7px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#16393a72,#173d3311);z-index:4;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.card{background:linear-gradient(135deg,#fff9ebf5,#fff4dcf2);border:1px solid #fff8;border-radius:25px;padding:38px 44px;width:520px;max-width:90vw;color:var(--ink);box-shadow:0 28px 100px #133c4166;text-align:left;max-height:88svh;overflow-y:auto}.eyebrow{font-size:8px;font-weight:700;letter-spacing:2px}.eyebrow i{display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin-right:7px}h1{font-size:54px;letter-spacing:-3px;line-height:1.04;margin:24px 0 18px;font-weight:900}h1 em{color:var(--teal);font-style:normal}.card p{font-size:13px;line-height:1.8;color:#617b7b}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:22px 0;margin:20px 0;border-block:1px solid #25464925;font-size:8px;letter-spacing:.5px;font-weight:700}.instructions[hidden]{display:none}kbd{display:inline-block;font:inherit;font-size:9px;background:#ffffff44;border:1px solid #2d585338;border-bottom-width:2px;border-radius:5px;padding:5px 6px;margin-right:3px;min-width:22px;text-align:center}.card button{background:var(--teal);color:white;border:0;border-bottom:4px solid #136867;border-radius:10px;width:100%;padding:17px;font-size:14px;font-weight:700;transition:transform .2s}.card button:hover{transform:translateY(-2px)}.meta{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;margin-top:20px;color:#7f9090}.card .record{font-size:10px;margin:14px 0 0;text-align:center}.keys{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:20px;white-space:nowrap;font-size:8px;letter-spacing:1px;background:#17393fba;border:1px solid #fff3;backdrop-filter:blur(10px);padding:10px 18px;border-radius:12px;pointer-events:none}.keys kbd{border-color:#fff3;color:#ffe1aa}#racecall{position:fixed;top:34%;left:0;right:0;text-align:center;font-size:110px;font-weight:1000;font-style:italic;text-shadow:0 5px 0 #bd683d,0 12px 40px #0004;color:#ffe5a8;pointer-events:none}#toast{position:fixed;left:50%;transform:translateX(-50%);top:23%;background:#17393fe0;border:1px solid #fff3;backdrop-filter:blur(8px);padding:12px 24px;border-radius:30px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.touch{display:none}@media(max-width:760px){header{top:15px;left:15px;right:15px}.brand{font-size:15px}.brand small{font-size:6px}.tools button{height:33px;min-width:35px;font-size:16px}.hud{top:75px;left:15px;right:15px}.position{padding:9px 13px}.position strong{font-size:40px}.position span{font-size:14px}.laps{padding:10px}.laps b{font-size:22px}.telemetry{bottom:96px;left:15px;right:15px}.map-wrap{width:125px;padding:4px}.map-wrap canvas{width:115px;height:89px}.map-wrap span{display:none}.speedbox{width:155px;padding:10px}.speed strong{font-size:39px}.speedbox>small{font-size:5px}.keys{display:none}.touch{display:flex;position:fixed;bottom:15px;left:15px;right:15px;justify-content:space-between;gap:8px}.touch>div{display:flex;gap:6px}.touch button{touch-action:none;user-select:none;border:1px solid #fff4;background:#17393fdd;color:#fff4df;border-radius:11px;min-width:44px;height:50px;font-size:20px}.touch button[data-key=ShiftLeft]{font-size:9px}.card{padding:26px;width:450px}.card h1{font-size:42px;margin:15px 0}.instructions{gap:10px;margin:12px 0;padding:14px 0}.card p{font-size:11px}.card button{padding:13px}.meta{font-size:6px}.eyebrow{font-size:7px}#toast{font-size:10px;top:26%;max-width:90%;width:max-content}#racecall{font-size:75px}}@media(max-height:560px){.card{padding:20px 28px;width:500px}.card h1{font-size:35px;margin:10px 0}.card p{margin:8px 0}.instructions{padding:10px 0;margin:10px 0;gap:8px}.meta{margin-top:10px}.hud{top:60px}.telemetry{bottom:70px}.map-wrap{width:110px}.map-wrap canvas{width:95px;height:73px}.speedbox{width:155px;padding:10px}.speed strong{font-size:33px}.keys{bottom:10px}.card .record{margin:8px 0 0}}
