:root{font-family:Arial,Helvetica,sans-serif;color:#fbf6e9;background:#18231c;font-synthesis:none;--orange:#f0a34c;--line:#fcf3db35}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}#world{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}header{position:fixed;z-index:3;top:0;left:0;right:0;padding:30px 40px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:11px;letter-spacing:.23em;line-height:1.35;pointer-events:auto}.brand b{font-size:17px;letter-spacing:.2em}.brand svg{width:39px;height:39px}.top-tools{display:flex;gap:25px;align-items:center}.top-tools button{border:1px solid var(--line);background:#17241b80;padding:12px 15px;border-radius:4px;font-size:10px;letter-spacing:.12em;pointer-events:auto}.live-dot{font-size:9px;letter-spacing:.17em}.live-dot:before{content:'';display:inline-block;background:#b9d291;width:5px;height:5px;border-radius:100%;margin-right:10px}.intro{position:fixed;z-index:2;left:7%;top:29%;max-width:530px;pointer-events:none;text-shadow:0 2px 25px #13291b80}.kicker{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--orange)}.kicker span{font-weight:400;margin-left:22px;color:#e4e2d29c;font-size:9px}h1{font-size:clamp(45px,5.3vw,85px);line-height:.96;letter-spacing:-.052em;margin:28px 0 24px;font-weight:900}h1 em{font-style:normal;color:#f0bc76}.intro p{line-height:1.7;font-size:14px;color:#efecdfb8;margin-bottom:32px}.primary{pointer-events:auto;background:var(--orange);border:0;color:#252a20;border-radius:4px;font-weight:800;font-size:11px;letter-spacing:.11em;padding:19px 22px;min-width:215px;display:flex;justify-content:space-between;gap:30px;box-shadow:0 4px 25px #0002}.primary:hover{background:#ffbb6d}.primary span{font-size:15px}.intro-hint{font-size:8px;letter-spacing:.12em;color:#f3ead9aa;margin-top:18px}.intro-hint i{font-style:normal;margin:0 5px}footer{position:fixed;bottom:27px;left:40px;right:40px;display:flex;justify-content:space-between;letter-spacing:.18em;font-size:8px;color:#f8efdf99;pointer-events:none}footer i{font-style:normal;margin:0 10px}#showcase-hint{position:fixed;right:19%;bottom:13%;font-size:8px;letter-spacing:.13em;color:#fff9e4a3;pointer-events:none}#showcase-hint span{margin:0 8px}#loading{position:fixed;top:50%;left:56%;font-size:12px}#toast{position:fixed;left:50%;top:24%;transform:translate(-50%,-10px);opacity:0;transition:.2s;pointer-events:none;z-index:6;background:#192d24ea;padding:16px 23px;border:1px solid #f0a34c80;color:#ffcc8b;border-radius:4px;font-size:13px;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.fuel-panel{position:fixed;top:122px;left:40px;width:205px;padding:18px;background:#152a208c;border:1px solid var(--line);border-radius:5px;backdrop-filter:blur(12px)}.fuel-heading{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em}.fuel-heading svg{width:22px;height:22px;color:var(--orange)}.fuel-heading strong{margin-left:auto;font-size:18px;letter-spacing:0}.fuel-track{height:4px;background:#fff2;margin:13px 0 17px}.fuel-track div{height:100%;background:var(--orange);width:70%;transition:width .2s}.run-stats{display:flex;justify-content:space-between;font-size:8px;color:#edead2a3;letter-spacing:.05em}.run-stats b{font-size:13px;color:#fff4df;margin-right:4px;font-weight:400}.waypoint{position:fixed;top:120px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;font-size:8px;letter-spacing:.12em;text-shadow:0 1px 5px #000}.waypoint>span{font-size:38px;color:var(--orange);display:block}.waypoint strong{display:block;font-size:20px;margin-top:5px;letter-spacing:0}.instruments{position:fixed;right:40px;bottom:55px;display:flex;align-items:end;gap:35px;text-shadow:0 1px 5px #0005}.speed{display:flex;flex-direction:column;align-items:center}.speed b{font-size:70px;font-weight:400;letter-spacing:-.07em;line-height:1}.speed span{font-size:9px;letter-spacing:.2em;color:#ffffff90}.suspension>span{font-size:8px;letter-spacing:.15em}.suspension>div{display:flex;align-items:center;justify-content:space-between;width:80px;height:47px}.suspension i{height:30px;width:10px;background:#e6b579;transform-origin:center;transition:height .08s}.suspension small{font-size:7px;letter-spacing:.06em;color:#ffffff90}.map-wrap{position:fixed;bottom:53px;left:40px;width:140px;text-align:center}.map-wrap canvas{width:140px;height:140px;background:#10271d9c;border:1px solid var(--line);border-radius:50%}.map-wrap span{display:block;font-size:7px;letter-spacing:.11em;margin-top:10px;color:#fff9}.driving-help{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap;letter-spacing:.03em}.driving-help span{color:#fff7;margin:0 12px 0 4px}.small-control{position:fixed;right:40px;top:121px;background:#10271d9c;border:1px solid var(--line);border-radius:4px;width:42px;height:38px;font-size:18px}#recover{right:90px;font-size:25px}dialog{border:1px solid #71816b;background:#182d24f5;color:#fff4df;padding:38px;width:min(420px,90vw);border-radius:6px;box-shadow:0 20px 90px #0005}dialog::backdrop{background:#07160e66;backdrop-filter:blur(7px)}dialog h2{font-size:33px;letter-spacing:-.04em;margin:17px 0}dialog p{font-size:13px;line-height:1.6;color:#d0d7c9;margin-bottom:25px}dialog .primary{width:100%}.secondary{border:1px solid var(--line);background:transparent;padding:16px;width:100%;margin-top:12px;font-size:10px;letter-spacing:.12em;border-radius:3px}.text-button{background:none;border:0;display:block;margin:20px auto 0;font-size:11px;color:#fff9}.fallback{position:fixed;background:#182d24;padding:30px;left:10%;top:30%}#touch{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;z-index:4}#touch>div{display:flex;gap:10px;align-items:end}#touch button{height:65px;min-width:66px;border:1px solid #fffffe5e;background:#132c238e;backdrop-filter:blur(8px);border-radius:13px;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;font-size:18px}#touch button small{font-size:9px}#touch .touch-pedals button{font-size:12px}#touch button.gas{height:88px;background:#dc973ce0;color:#182b20;font-weight:bold}#touch button.pressed{background:#ffb45b;color:#172c20}.touch-device .driving-help{display:none}.touch-device .map-wrap{bottom:140px;width:100px;left:20px}.touch-device .map-wrap canvas{width:100px;height:100px}.touch-device .instruments{bottom:145px;right:25px}.touch-device .suspension{display:none}.touch-device .speed b{font-size:48px}
@media(max-width:700px){header{padding:22px}.brand{font-size:8px;gap:7px}.brand b{font-size:13px}.brand svg{width:29px}.top-tools{gap:7px}.top-tools button{font-size:8px;padding:10px}.live-dot{display:none}.intro{top:auto;bottom:12%;left:7%;max-width:85%}h1{font-size:47px;margin:16px 0}.intro p{font-size:12px;margin-bottom:20px}.kicker{font-size:9px}.kicker span{font-size:8px}.primary{padding:17px 20px}.intro-hint{font-size:7px}footer{left:22px;right:22px;bottom:20px;font-size:6px}#showcase-hint{right:7%;bottom:56%;font-size:7px}#loading{left:40%;top:27%}.fuel-panel{left:20px;top:90px;width:157px;padding:12px}.waypoint{top:100px;left:auto;right:20px;transform:none}.waypoint>span{font-size:28px}.waypoint strong{font-size:17px}.small-control{top:188px;right:20px}#recover{right:68px}.instruments{right:22px}.driving-help{display:none}.fuel-heading strong{font-size:16px}.map-wrap{left:20px}#toast{top:35%;max-width:80%;font-size:12px}.run-stats b{font-size:11px}}
@media(max-height:550px){header{padding:14px 24px}.intro{top:24%;bottom:auto}h1{font-size:40px;margin:12px 0}.intro p{font-size:11px;margin:12px 0 17px}.intro-hint{display:none}.primary{padding:14px 18px}.fuel-panel{top:78px;padding:10px;width:170px}.waypoint{top:85px}.small-control{top:85px}.touch-device .map-wrap{bottom:108px;width:77px}.touch-device .map-wrap canvas{width:77px;height:77px}.touch-device .map-wrap span{display:none}.touch-device .instruments{bottom:116px}.touch-device .speed b{font-size:35px}footer{bottom:15px}#showcase-hint{bottom:13%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@font-face{font-family:Lilita;src:url('./fonts/LilitaOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('./fonts/BarlowSemiCondensed-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
:root{font-family:Barlow,Arial,sans-serif;font-weight:500}
h1,h2,.brand b,.primary,.secondary,.speed b,.fuel-heading strong,.waypoint strong,#touch button{font-family:Lilita,Arial,sans-serif;font-weight:400}
h1{letter-spacing:.005em;text-shadow:0 3px 0 #29433255,0 12px 28px #19361b33}
.brand b{letter-spacing:.13em}.primary,.secondary{font-size:14px;letter-spacing:.07em}.intro p{font-size:16px}.kicker{font-size:12px}.speed b{letter-spacing:0}.top-tools button{font-size:11px}.intro-hint{font-size:10px}.driving-help{font-size:10px}.map-wrap span{font-size:9px}.suspension small{font-size:9px}
@media(max-width:700px){.intro p{font-size:14px}.top-tools button{font-size:10px}.intro-hint{font-size:9px}.kicker{font-size:11px}}
.trail-status{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff20;padding-top:10px;margin-top:12px;font-size:9px;letter-spacing:.06em;color:#d2dfc5}.trail-status #weather{color:#f0bc76}.fuel-panel.low-fuel{border-color:#e87954;background:#422b25d9}.fuel-panel.low-fuel .fuel-heading{color:#ffb98e}.touch-device #touch{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.touch-device button{touch-action:manipulation}.touch-device #touch button{touch-action:none}
@media(max-width:700px){.trail-status{font-size:8px;gap:5px;margin-top:9px;padding-top:8px}.fuel-panel{width:163px}.touch-device .waypoint{right:20px}}
@media(max-height:550px){.trail-status{margin-top:7px;padding-top:7px;font-size:8px}.fuel-track{margin:9px 0}.touch-device .map-wrap{bottom:100px;width:70px}.touch-device .map-wrap canvas{width:70px;height:70px}}
