:root{font-family:var(--font-sans);color:#292f2d;--orange:#e45d32;--line:#393d3526}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#dddacb}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #e45d32;outline-offset:5px}#world,.vignette{position:fixed;inset:0}canvas{display:block}.vignette{pointer-events:none;background:linear-gradient(180deg,#e9e6db80 0%,transparent 25%,transparent 65%,#eae5d9c0 100%)}header{position:absolute;top:0;left:0;width:100%;padding:30px 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:2}.brand{color:inherit;text-decoration:none;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:800;letter-spacing:2px}.thin{font-weight:400;color:#70756e}.brandmark{font-size:30px;letter-spacing:-5px;margin-right:12px;font-style:italic}.brandmark span{color:var(--orange)}.top-right{display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:1.5px;font-weight:600}.live{display:flex;align-items:center;gap:8px}.live i{background:#7d8b5d;width:6px;height:6px;border-radius:100%}.top-right button{background:transparent;font-size:10px;letter-spacing:1px;color:inherit}#help{border:1px solid #999a8e;width:27px;height:27px;border-radius:50%;font-size:14px}#intro{position:absolute;top:19%;left:6%;transition:opacity .5s,transform .5s}#intro.hidden{opacity:0;transform:translateY(-15px);pointer-events:none}.eyebrow,.tiny{font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow{color:#746b58}h1{font-family:Impact,var(--font-sans);font-size:clamp(65px,7vw,112px);text-transform:uppercase;font-weight:700;letter-spacing:-1.5px;line-height:.91;margin:22px 0}h1 span{color:var(--orange)}#intro p{font-size:13px;line-height:1.8;color:#686d63;margin:23px 0}.primary{background:var(--orange);color:#fff;padding:17px 24px;font-size:11px;letter-spacing:1.4px;font-weight:700;min-width:175px;text-align:left}.primary span{float:right;font-size:20px;line-height:13px}.primary:hover{background:#cb4d26}.intro-note{margin-top:17px;font-size:10px;color:#73786e}.intro-note b{margin:0 8px}.location{position:absolute;left:38px;top:116px;display:flex;flex-direction:column;gap:7px;opacity:0;transition:opacity .5s}.playing .location{opacity:1}.location strong{font-size:14px}.location>span:last-child{font-size:8px;letter-spacing:1px;color:#7e8072}.objectives{position:absolute;right:38px;top:128px;width:215px}.panel-label{font-size:9px;letter-spacing:1.6px;padding-bottom:14px;border-bottom:1px solid var(--line)}.panel-label>span{float:right;color:#8a8c7e}.objectives [data-goal]{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:11px}.objectives b{font-weight:500}.objectives span{font-size:9px;color:#858777}.objectives i{margin-left:auto;font-size:15px;font-style:normal;color:#7b8073}.objectives .done b{color:#8b4f2d}.objectives .done i{color:var(--orange)}.bottom{position:absolute;bottom:30px;left:38px;right:38px;display:flex;align-items:flex-end;justify-content:space-between}.telemetry{width:195px}.tiny{color:#767d6c}.speed{display:flex;align-items:baseline;gap:12px}.speed>span{font-family:Impact,var(--font-sans);font-weight:600;font-size:83px;line-height:1.1;font-variant-numeric:tabular-nums}.speed small{font-size:9px;letter-spacing:1px;color:#757a6c}.boost-label{font-size:8px;letter-spacing:1.3px;display:flex;justify-content:space-between;margin:8px 0}.fuel{height:4px;background:#b6b6a780}.fuel i{display:block;height:100%;width:100%;background:var(--orange);transition:width .1s}.controls{color:#737769;font-size:9px;line-height:2.8;text-align:center}kbd{font-family:inherit;border:1px solid #777c6350;padding:4px 5px;font-size:8px;margin:0 4px 0 13px;color:#4f5648;border-radius:2px}.run-stats{text-align:right;display:flex;flex-direction:column;gap:7px;min-width:150px}.run-stats strong{font-family:Impact,var(--font-sans);font-size:35px;font-weight:500}.run-stats small{font-family:var(--font-sans);font-size:12px;margin-left:4px}.run-stats>span:last-child{font-size:8px;letter-spacing:1.5px;color:#73796b}#toast{position:absolute;top:105px;left:50%;transform:translate(-50%,-12px);opacity:0;transition:.3s;background:#2e382de8;color:#fff;padding:14px 25px;font-size:11px;letter-spacing:1.5px;border-left:3px solid var(--orange);pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}#crosshair{position:absolute;top:48%;left:50%;opacity:0;color:#fff8;font-size:24px}.flying #crosshair{opacity:1}dialog{border:1px solid #c8c8b8;background:#efede3;color:#30372e;max-width:500px;padding:40px}dialog::backdrop{background:#292e2966;backdrop-filter:blur(7px)}dialog h2{font-family:Impact,var(--font-sans);text-transform:uppercase;font-size:44px;margin:15px 0}dialog p{font-size:12px;line-height:2;color:#6b7263}.close{position:absolute;right:14px;top:10px;font-size:27px;background:none;color:inherit}.mobile{display:none}#error{position:absolute;inset:0;background:#eee9de;z-index:10;padding:20vh 10vw}#error[hidden]{display:none}#error button{padding:12px;background:#e45d32;color:#fff}@media(max-width:900px),(pointer:coarse){header{padding:20px}.brand{font-size:10px;gap:7px;letter-spacing:1px}.brandmark{font-size:23px}.top-right{gap:12px}.live{display:none}.objectives{right:20px;top:95px;width:150px}.objectives [data-goal]{font-size:9px;padding:10px 0}.panel-label{font-size:8px;letter-spacing:1px}#intro{left:24px;top:20%}h1{font-size:68px}.bottom{left:20px;right:20px;bottom:24px}.controls{display:none}.speed>span{font-size:60px}.telemetry{width:145px}.run-stats{min-width:70px}.location{left:20px;top:95px}.mobile{display:flex;position:absolute;bottom:160px;left:15px;right:15px;gap:8px;justify-content:center}.mobile button{touch-action:none;border:1px solid #6c756b55;background:#e9e7daa8;color:#394032;padding:14px 16px;font-size:11px;border-radius:4px}#intro p{font-size:11px}.intro-note{font-size:8px}#toast{top:77px;font-size:8px;padding:10px}dialog{margin:20px;padding:28px}.eyebrow{font-size:8px}}@media(max-width:480px){.thin{display:none}.objectives{top:85px;width:135px}.objectives [data-goal]{gap:7px}h1{font-size:55px}#intro{top:28%}#intro p{font-size:10px}.run-stats{font-size:8px}}

.arrow{width:12px;height:12px;vertical-align:middle}.brandmark .arrow{width:20px;height:24px}.top-right button{font-family:inherit}
/* Night proving ground — pearl white, cold blue and signal red. */
:root{color:#edf5fa;--orange:#ee4058;--line:#accde626}body{background:#02070b}.vignette{background:linear-gradient(180deg,#02070b9c,transparent 28%,transparent 68%,#02070be0)}header{background:linear-gradient(#02070b7a,transparent)}.brandmark{color:#fff}.thin{color:#8da3b2}.live i{background:#b8ecff;box-shadow:0 0 9px #7ad6ff}.top-right button{color:#b6c9d5}#help{border-color:#617b8c}.eyebrow{color:#8cb9cc}h1{color:#edf5f7}#intro{padding:20px 30px 25px 0;background:radial-gradient(ellipse at left,#02070b9e,transparent 72%)}#intro p{color:#b0c4ce;text-shadow:0 1px 6px #02070b}.intro-note{color:#91a8b5}.tiny{color:#97b9cb}.location>span:last-child{color:#6d8c9f}.objectives{padding:15px 18px;background:#030a11a6;border:1px solid #8ec0e514;backdrop-filter:blur(8px);width:246px}.panel-label>span,.objectives span{color:#7893a5}.objectives i{color:#90b4c9}.objectives .done b,.objectives .done i{color:#ff6e7d}.speed small,.boost-label,.controls,.run-stats>span:last-child{color:#94b2c5}.fuel{background:#94aabb25}.speed>span{color:#edf8ff}.controls kbd{border-color:#85a6bc4d;color:#e1edf3}.primary{background:#e63850;box-shadow:0 4px 26px #ee40581f}.primary:hover{background:#fa5067}#toast{background:#07141ded;color:#d9edf8;border-left-color:#ee4058;box-shadow:0 8px 32px #0004}dialog{background:#09131c;border-color:#365468;color:#e1f2fa}dialog p{color:#a2bccd}#error{background:#08121c;color:#e1f2fa}.mobile button{background:#07131fc9;border-color:#739bb44d;color:#d9f1ff}#crosshair{color:#b3dfff99}@media(max-width:900px),(pointer:coarse){.objectives{width:180px;right:15px;top:90px;padding:12px}.location{max-width:165px}.location strong{font-size:12px}#intro{padding-right:0}}@media(max-width:480px){.objectives{width:151px;padding:10px;top:85px}.location{max-width:165px}.objectives b{font-size:8px}}

@media(max-width:900px),(pointer:coarse){.mobile{flex-wrap:wrap;gap:6px}.mobile button{padding:12px 13px}.controls kbd{margin-left:7px}}

/* Quiet presentation telemetry; keep the car and concrete wall in focus. */
.objectives{background:#01030291;backdrop-filter:none;border-color:#c7d6ca14}.playing .objectives{opacity:.8}.playing .objectives:hover{opacity:1}#pitch{font-size:9px;letter-spacing:1.5px;color:#93aa9e}.run-stats strong small{font-size:9px;letter-spacing:1px;color:#93aa9e}.location .tiny{color:#8cae9e}.eyebrow{color:#91b2a4}

.return-home{position:fixed;bottom:7px;left:50%;transform:translateX(-50%);z-index:3;padding:4px 12px;color:#aabbbf;font-size:10px;letter-spacing:1px;text-decoration:none;white-space:nowrap}.return-home:hover{color:#fff;text-decoration:underline}

/* Collapsible objectives and a compact touch HUD leave the road visible. */
.panel-label{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.panel-label::-webkit-details-marker{display:none}
.panel-label>span{float:none;margin-left:auto;white-space:nowrap}
.panel-label::after{content:'+';font-size:15px;line-height:1}
details[open]>.panel-label::after{content:'−'}
@media(max-width:900px),(pointer:coarse){
  body{min-height:100svh}
  header{padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
  #intro{top:clamp(90px,21svh,190px);left:24px;right:20px}
  #intro h1{font-size:clamp(44px,9vw,68px);margin:15px 0}
  #intro p{margin:16px 0}
  body:not(.playing) .mobile,body:not(.playing) .bottom,body:not(.playing) .objectives{display:none}
  .objectives{top:78px;right:12px;width:174px;padding:0 10px}
  .objectives .panel-label{min-height:44px;padding:0;border-bottom:0;font-size:8px;letter-spacing:.7px}
  .objectives details[open]>.panel-label{border-bottom:1px solid var(--line)}
  .objectives [data-goal]{padding:10px 0;font-size:9px;gap:8px}
  .objectives b{font-size:9px}
  .location{top:84px;left:16px;max-width:calc(100% - 210px);gap:5px}
  .location .tiny{font-size:7px;letter-spacing:1px}
  .location strong{font-size:10px}
  .location>span:last-child{display:none}
  .bottom{bottom:calc(34px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));pointer-events:none}
  .telemetry{width:124px}
  .bottom .tiny{font-size:7px;letter-spacing:1.2px}
  .speed{gap:7px}
  .speed>span{font-size:38px}
  .speed small,.run-stats strong small{font-size:7px;letter-spacing:.5px}
  .boost-label{font-size:6px;letter-spacing:.7px;margin:5px 0}
  .fuel{height:3px}
  .run-stats{min-width:90px;gap:3px}
  .run-stats strong{font-size:26px;line-height:1.1}
  #pitch,.run-stats>span:last-child{font-size:7px;letter-spacing:.7px}
  .playing .mobile{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(116px + env(safe-area-inset-bottom));gap:4px;z-index:2}
  .mobile button{min-width:0;min-height:44px;padding:10px 0;font-size:10px;border-radius:6px;user-select:none;-webkit-user-select:none}
  .mobile button:active{background:#253b49;border-color:#b3dfff}
  .return-home{bottom:calc(4px + env(safe-area-inset-bottom));font-size:9px;min-height:24px;display:flex;align-items:center}
  #toast{top:134px;max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.5}
}
@media(max-width:359px){
  .playing .mobile{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .objectives{width:160px;right:10px}
  .location{max-width:calc(100% - 192px)}
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape), (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  #intro{top:72px;left:24px}
  #intro h1{font-size:36px;margin:8px 0}
  #intro p{font-size:10px;line-height:1.5;margin:8px 0}
  #intro .eyebrow,.intro-note{display:none}
  #intro .primary{padding:13px 20px}
  .playing .mobile{left:170px;bottom:calc(38px + env(safe-area-inset-bottom));right:130px}
  .bottom{bottom:calc(34px + env(safe-area-inset-bottom))}
  .objectives{top:70px}
  .location{display:none}
}

/* Wait for the first rendered frame before accepting the initial tap. */
#start:disabled{opacity:.65;cursor:wait}
#world,.mobile{touch-action:none}
#start,#help,#sound,#mobile-fly,#mobile-kick{touch-action:manipulation}
