@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
:root{font-family:Cairo,system-ui,sans-serif;color:#f3f5f1;background:#0b151a;--mint:#c8f589;--muted:#a0adb0}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}header{position:absolute;top:0;left:0;right:0;padding:25px 4vw;display:flex;align-items:center;justify-content:space-between;z-index:5;background:linear-gradient(#091419cc,transparent);direction:ltr}.brand{font:900 42px/1 system-ui;letter-spacing:-2px;color:white;text-decoration:none}.brand span{font:600 10px system-ui;letter-spacing:4px;display:block;margin:7px 0 0 4px}.location{font-size:12px;direction:rtl;color:#d8e3e4}.location i{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-left:9px}.icon{border:1px solid #ffffff30;border-radius:30px;background:#0c2025b0;color:white;padding:8px 18px;font-size:12px}#garage{position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,#07161c88);pointer-events:none}.intro{position:absolute;top:17%;right:5%;max-width:400px}.eyebrow{font:600 10px system-ui;letter-spacing:3px;color:var(--mint);direction:ltr;text-align:right}h1{font-size:clamp(30px,4vw,60px);line-height:1.38;margin:16px 0;font-weight:900;letter-spacing:-1px}h1 em{font-style:normal;color:var(--mint)}.intro p{color:#b5c1c3;font-size:12px}.garage-note{position:absolute;left:4%;top:21%;display:flex;flex-direction:column;gap:10px;direction:ltr}.garage-note span{font:11px system-ui;letter-spacing:3px;color:#d1dddd}.garage-note small{font-size:10px;color:#8e9fa2}.selection{position:absolute;bottom:20px;left:4%;right:4%;pointer-events:auto}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{display:flex;align-items:center;text-align:right;background:#102126e8;border:1px solid #ffffff20;border-radius:12px;color:white;padding:0 14px 0 0;overflow:hidden;min-height:100px;transition:.2s}.card.selected{border-color:var(--mint);background:#253630ee;box-shadow:0 0 0 1px var(--mint)}.card img{width:35%;height:100px;object-fit:cover;margin-right:auto;mask-image:linear-gradient(90deg,#000 70%,transparent)}.card .number{font:10px system-ui;letter-spacing:2px;color:var(--mint)}.card h3{font:600 14px system-ui;margin:7px 0;direction:ltr;text-align:right}.card small{font-size:10px;color:#bbc5c7}.launch{display:flex;align-items:center;justify-content:space-between;margin:15px 0 10px}.tag{font:10px system-ui;letter-spacing:3px;color:var(--mint)}.launch p{font-size:11px;margin:7px 0;color:var(--muted)}#start,.panel>button{background:var(--mint);color:#142018;padding:13px 38px;border-radius:6px;font-weight:800;min-width:215px}.instructions{font-size:10px;color:#b5c1c3;border-top:1px solid #ffffff20;padding-top:10px;display:flex;justify-content:space-between}.disclaimer{font-size:9px;color:#8b9b9f;display:block;margin-top:4px}.hud-top{position:absolute;top:110px;left:4%;right:4%;display:flex;gap:30px;align-items:center}.hud-top small{font-size:10px;display:block;color:#dce7e7}.hud-top strong{font:600 24px system-ui}.hud-top b{font:10px Cairo}.hud-top button{margin-right:auto}.speed{position:absolute;bottom:85px;right:5%;text-shadow:0 2px 10px #0009}.speed>strong{font:300 76px/1 system-ui;display:block}.speed>span{font-size:10px;color:#d7e2e3}.speed-track{width:130px;height:3px;background:#ffffff35;margin:10px 0}.speed-track i{height:3px;background:var(--mint);display:block;width:0}.speed>small{font:10px system-ui;letter-spacing:1px}.route{position:absolute;bottom:100px;left:4%;display:flex;align-items:center;gap:12px;background:#102126bc;padding:12px 18px;border-radius:8px}.route>span{background:#23683b;border:1px solid white;border-radius:5px;padding:5px;font:700 15px system-ui}.route div{font-size:12px}.route small{display:block;font-size:9px;color:#aabdbd}.controls{position:absolute;bottom:18px;left:4%;right:4%;display:flex;justify-content:space-between;direction:ltr}.controls>div{display:flex;gap:9px}.controls button{background:#0c2025b8;border:1px solid #ffffff45;color:white;width:64px;height:54px;border-radius:10px;touch-action:none;user-select:none}.controls .gas{background:#c8f589dc;color:#142018}.controls button.held{background:white;color:#112229}.controls .brake{font-size:11px}.controls .gas{font-size:11px}#modal{position:absolute;inset:0;background:#06151bc9;backdrop-filter:blur(12px);display:grid;place-items:center;z-index:8}.panel{width:min(90vw,420px);padding:35px;background:#102126;border:1px solid #ffffff25;border-radius:16px;text-align:center}.panel .eyebrow{text-align:center}.panel h2{font-size:28px;margin:15px 0}.panel p{color:#b5c1c3;font-size:13px}.panel>button{display:block;width:100%;margin-top:12px}.panel>button.secondary{background:#ffffff09;color:white;border:1px solid #ffffff25}.panel>button:last-child{font-size:12px}#toast{position:absolute;top:25%;left:50%;transform:translateX(-50%);background:#142a2de8;border:1px solid var(--mint);padding:8px 24px;border-radius:30px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}#error{position:absolute;top:50%;left:10%;right:10%;background:#341d22;padding:25px;z-index:20} @media(max-width:700px){header{padding:19px 5%}.brand{font-size:34px}.location{font-size:10px}.icon{padding:7px 11px;font-size:10px}.intro{top:13%;right:5%}.intro h1{font-size:32px;margin:10px 0}.intro p{font-size:10px;max-width:230px}.eyebrow{font-size:8px;letter-spacing:2px}.garage-note{display:none}.selection{left:4%;right:4%;bottom:14px}.cards{gap:7px}.card{flex-direction:column-reverse;padding:0 7px 8px;min-height:145px;text-align:center}.card img{height:72px;width:calc(100% + 14px);margin:0;mask-image:linear-gradient(#000 70%,transparent)}.card h3{font-size:10px;text-align:center;min-height:24px;margin:4px 0}.card small{font-size:8px}.card .number{font-size:8px}.launch{gap:10px}.launch p{font-size:9px}.tag{font-size:8px;letter-spacing:1px}#start{padding:13px 18px;min-width:145px;font-size:12px}.instructions{font-size:8px}.instructions span{display:none}.disclaimer{font-size:8px}.speed{bottom:100px}.speed>strong{font-size:56px}.route{bottom:170px;padding:8px 10px}.hud-top{top:95px;gap:18px}.hud-top strong{font-size:19px}.controls button{width:58px;height:58px}}@media(max-height:600px){.intro{top:15%;}.intro h1{font-size:26px}.intro p,.garage-note{display:none}.card{min-height:70px;flex-direction:row}.card img{height:70px;width:30%}.selection{bottom:10px}.card h3{min-height:0}.instructions,.disclaimer{display:none}.launch{margin:8px 0 0}.hud-top{top:80px}.speed{bottom:85px}.route{bottom:90px}}