@font-face{font-family:'Barlow Condensed';src:local('Bahnschrift Condensed'),local('Arial Narrow'),local('Impact')}
/* Prevent mobile text selection and iOS long-press menus on the riding surface. */
html,body{overscroll-behavior:none;overflow:hidden}
#app,#app button,#app kbd,#app a,#app canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app button{touch-action:manipulation}
#app .touch-controls,#app [data-key]{touch-action:none}
#app [data-key] *{pointer-events:none}
#app dialog{touch-action:pan-y;max-height:85dvh;overflow:auto}
@media(pointer:coarse){.top-actions button,.touch-pad button,footer{backdrop-filter:none!important}}
:root{font-family:'Noto Sans SC',sans-serif;color:#fff;background:#172522;color-scheme:dark;--lime:#d6ff61;--muted:#ccd5ce}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{border:0}#app{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden}#world{width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,16,15,.66),transparent 52%),linear-gradient(0deg,rgba(5,15,13,.85),transparent 30%,transparent 75%,rgba(5,15,13,.38))}header{position:absolute;top:0;left:0;width:100%;padding:28px 38px;display:flex;justify-content:space-between;align-items:center}.brand{color:white;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-size:34px;letter-spacing:4px;font-weight:700;display:flex;align-items:center;gap:10px}.brandmark{color:var(--lime);font-size:44px;line-height:1}.brand-sub{border-left:1px solid #ffffff40;margin-left:15px;padding-left:24px;width:155px;font-size:12px;line-height:1.5;letter-spacing:2px;font-weight:500}.top-actions{display:flex;align-items:center;gap:10px}.top-actions button{height:38px;min-width:38px;padding:0 10px;background:#17252266;border:1px solid #ffffff25;border-radius:6px;font-size:21px;backdrop-filter:blur(12px)}.top-actions button span{font-size:12px;margin-left:8px}.live-label{font-size:12px;letter-spacing:2px;margin-right:18px}.trail-card{position:absolute;top:126px;left:40px;width:254px}.eyebrow{font:500 12px 'Barlow Condensed',sans-serif;letter-spacing:3px;color:var(--lime);display:flex;align-items:center;gap:8px}.lime-dot{width:5px;height:5px;border-radius:50%;background:var(--lime)}h1{font-size:24px;letter-spacing:2px;margin:13px 0 9px;font-weight:600}h1 span{font:500 17px 'Barlow Condensed';color:#c8d4c7;margin-left:12px}.trail-card p{font-size:12px;color:var(--muted);margin:0}i{font-style:normal;margin:0 10px;color:#ffffff50}.trail-data{display:flex;gap:35px;margin:25px 0 22px}.trail-data div{display:flex;flex-direction:column;gap:4px}.trail-data b{font:500 27px 'Barlow Condensed'}.trail-data small{font-size:14px;color:#cbd6cb}.trail-data span{font-size:12px;color:#b5c4bc}.route-line{height:2px;background:#ffffff35}.route-line span{display:block;width:0;height:2px;background:var(--lime);position:relative}.route-line span:after{content:'';position:absolute;right:-3px;top:-2px;width:6px;height:6px;background:var(--lime);border-radius:50%}.route-labels{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#c1cdc5;margin-top:10px}.ride-info{position:absolute;right:40px;top:130px;text-align:right}.ride-info>span{font-size:12px;letter-spacing:2px;color:var(--lime)}#timer{font:500 38px 'Barlow Condensed';letter-spacing:2px;margin-top:8px}.ride-info p{font-size:12px;color:var(--muted);margin:5px 0}.welcome{position:absolute;left:40px;bottom:144px}.welcome h2{font-size:clamp(40px,4.2vw,64px);font-weight:800;letter-spacing:5px;margin:12px 0 17px;line-height:1.25}.welcome h2 span{color:var(--lime)}.welcome p{font-size:14px;line-height:1.9;color:#d6dfd8;margin:0 0 23px}.primary{background:var(--lime);color:#172017;border-radius:4px;padding:15px 23px;min-width:210px;display:flex;justify-content:space-between;font-size:15px;font-weight:700;gap:35px}.primary:hover{background:#e5ff9f}.primary span{font-size:21px;line-height:1}.start-note{margin-top:14px;color:#bdcdc2;font-size:12px}.telemetry{position:absolute;right:40px;bottom:127px;width:192px}.speed{display:flex;align-items:center;gap:13px}.speed>span{font:600 100px/.95 'Barlow Condensed';letter-spacing:-2px;font-variant-numeric:tabular-nums}.speed>div{display:flex;flex-direction:column;gap:8px}.speed b{font:500 15px 'Barlow Condensed';letter-spacing:2px;color:#dde7de}.speed div span{font-size:12px;color:var(--lime)}.speed-track{height:3px;background:#ffffff30;margin:16px 0 25px}.speed-track span{height:100%;display:block;background:var(--lime);width:0}.balance-head,.balance-label{display:flex;justify-content:space-between;font-size:12px}.balance-head span:last-child{color:var(--lime)}.balance-track{position:relative;margin:14px 0 8px;height:4px;background:linear-gradient(90deg,#ffffff15,#ffffff60,#ffffff15)}.balance-track:after{content:'';position:absolute;left:50%;top:-4px;width:1px;height:12px;background:#ffffff50}.balance-track>span{position:absolute;left:50%;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--lime);transform:translateX(-50%);z-index:1}.balance-label{color:#adc0b1;font-size:11px}footer{position:absolute;bottom:0;left:0;right:0;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff1a;background:#0c171733;backdrop-filter:blur(10px)}.controls,.utility{display:flex;align-items:center;gap:20px}.controls>div{display:flex;align-items:center;gap:5px}.controls span,.utility span{font-size:12px;color:#c8d5cd;margin-left:5px}kbd{font:500 12px 'Noto Sans SC',sans-serif;min-width:24px;height:25px;padding:2px 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff35;border-radius:3px;color:#f2f4ee;background:#ffffff09}.utility{gap:16px}.utility button{background:none;padding:3px;white-space:nowrap}.utility button:hover span{color:var(--lime)}#help{font-size:16px;border:1px solid #ffffff35;border-radius:50%;width:23px;height:23px;padding:0}#toast{position:absolute;left:50%;top:110px;transform:translateX(-50%);padding:10px 20px;border:1px solid #ffffff22;border-radius:30px;background:#172622a0;backdrop-filter:blur(10px);font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1}.touch-controls{display:none}dialog{border:1px solid #ffffff25;border-radius:14px;padding:38px;background:#14221ff5;color:white;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 100px #0007}dialog::backdrop{background:#03120b80;backdrop-filter:blur(6px)}dialog h2{margin:0 0 22px;font-size:27px}dialog p{font-size:14px;color:#cbd9cf;line-height:1.9}.close{position:absolute;right:15px;top:12px;background:none;font-size:27px;color:#afc1b4}dialog label{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:14px}select{background:#26382e;border:1px solid #60715a;padding:8px 12px;color:white;border-radius:5px}dialog .primary{width:100%;margin-top:25px}#loading{position:absolute;inset:0;background:#13221e;display:flex;align-items:center;justify-content:center;z-index:10;font-size:16px;color:var(--lime)}.hidden{display:none!important}
@media(max-width:1100px){.controls{gap:10px}.controls span{font-size:11px}.utility{gap:8px}footer{padding:20px 25px}.brand-sub{display:none}}@media(max-height:750px) and (min-width:761px){.trail-card{top:105px}.trail-data{margin:16px 0}.welcome{bottom:116px}.welcome h2{font-size:44px}.welcome p{margin-bottom:12px}.welcome .eyebrow{display:none}.telemetry{bottom:112px}}
@media(pointer:coarse),(max-width:760px){#app{min-height:540px}header{padding:19px 20px}.brand{font-size:28px}.brandmark{font-size:35px}.live-label{display:none}.top-actions{gap:6px}.top-actions button{min-width:32px;height:32px;font-size:18px}.top-actions button span{display:none}.trail-card{top:90px;left:22px;width:190px}h1{font-size:21px}.trail-data{gap:30px;margin:14px 0}.trail-data b{font-size:23px}.ride-info{top:95px;right:22px}#timer{font-size:29px}.welcome{left:22px;bottom:225px}.welcome h2{font-size:42px}.welcome p{font-size:13px;margin-bottom:15px}.welcome .eyebrow{font-size:10px}.start-note{display:none}.telemetry{right:22px;bottom:223px;width:122px}.speed>span{font-size:67px}.speed b{font-size:12px}.speed{gap:8px}.speed-track{margin:12px 0 16px}.controls{display:none}footer{padding:13px 20px;justify-content:center}.utility{width:100%;justify-content:space-between}.touch-controls{display:flex;position:absolute;left:18px;right:18px;bottom:75px;align-items:flex-end;justify-content:space-between;gap:12px}.touch-pad{display:flex;gap:8px}.touch-pad button{border:1px solid #ffffff40;border-radius:9px;background:#172c27aa;backdrop-filter:blur(8px);min-width:49px;min-height:51px;font-size:14px;touch-action:none;user-select:none}.touch-pad button.active{background:#d6ff61;color:#142016}.weight{flex-direction:column;gap:7px}.weight button{padding:0 10px;min-height:37px;font-size:12px}.drive{display:grid;grid-template-columns:1fr 1fr;gap:7px}.drive button{font-size:12px;padding:6px}.drive .accelerate{grid-column:2;grid-row:1 / 3;background:#d6ff61;color:#172016;width:58px}.drive button:nth-child(2){grid-column:1;grid-row:2}#toast{top:285px;max-width:90%;font-size:12px;white-space:normal;text-align:center}.welcome:not(.hidden)~.telemetry{display:none}}
@media(max-width:760px) and (max-height:760px){#app:has(.welcome:not(.hidden)) .trail-data,#app:has(.welcome:not(.hidden)) .route-line,#app:has(.welcome:not(.hidden)) .route-labels{display:none}.welcome .eyebrow{display:none}}
@media(max-height:600px) and (pointer:coarse){.trail-card{top:80px}.trail-data,.route-line,.route-labels{display:none}.welcome{bottom:120px;left:25px}.welcome p{display:none}.welcome h2{font-size:34px}.welcome .eyebrow{display:none}.telemetry{bottom:140px}.touch-controls{left:40%;bottom:65px}.ride-info{top:80px}}

#world{touch-action:none;cursor:grab}#world.dragging{cursor:grabbing}.camera-hint{position:absolute;left:50%;bottom:94px;transform:translateX(-50%);font-size:12px;color:#e1eadf;background:#10221e99;padding:7px 13px;border-radius:5px;pointer-events:none;white-space:nowrap}@media(max-width:760px),(pointer:coarse){.camera-hint{bottom:192px;font-size:11px}}

.trail-data strong{font-weight:500}.terrain-status{position:absolute;left:40px;top:355px;display:flex;flex-wrap:wrap;width:255px;gap:12px;color:#dfe8d9;font-size:12px}.terrain-status>b{display:block;flex-basis:100%;color:var(--lime);font-size:14px}.terrain-status strong{font-weight:500;color:white}.crash-panel{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:26px 30px;min-width:300px;background:#211c1cea;border:1px solid #fa734f88;border-radius:9px;box-shadow:0 20px 90px #0006;z-index:5;text-align:center}.crash-panel .eyebrow{justify-content:center;color:#ff956f}.crash-panel h2{font-size:32px;margin:8px 0}.crash-panel p{font-size:14px;color:#ffcfb6;margin:10px 0 20px}.crash-panel button{width:100%;display:block}.crash-panel button:disabled{opacity:.45;cursor:wait}.crash-panel small{display:block;margin-top:15px;color:#cfc0b7;font-size:12px}.crashed .vignette{box-shadow:inset 0 0 100px #982b2866}.crashed .terrain-status{color:#ff936b}.welcome h2{font-size:clamp(38px,3.8vw,56px)}@media(max-width:760px),(pointer:coarse){.terrain-status{top:277px;left:22px;font-size:11px;gap:9px}.terrain-status>b{font-size:12px}#app:has(.welcome:not(.hidden)) .terrain-status{display:none}.trail-card h1{font-size:19px}.crash-panel{top:45%;width:calc(100% - 70px);min-width:260px}}@media(max-height:750px) and (min-width:761px){.terrain-status{top:312px}.welcome p{font-size:13px}}
.start-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.start-bike{display:flex;align-items:center;gap:8px;background:#14231edb;border:1px solid #ffffff40;border-radius:4px;padding:7px 9px 7px 13px;color:#e9f4e9;font-size:12px;white-space:nowrap}.start-bike select{min-width:172px;max-width:240px;padding:6px 8px;touch-action:manipulation}.start-actions #jump-start{background:#14231eb0;border:1px solid #ffffff40;border-radius:4px;padding:13px 16px;font-size:13px}@media(max-width:760px),(pointer:coarse){.start-actions{max-width:min(92vw,540px)}.start-bike{order:1}.start-actions #jump-start{order:2}.start-bike select{min-width:120px;max-width:170px}.welcome{bottom:205px}}@media(max-height:600px) and (pointer:coarse){.welcome{bottom:116px}.start-actions #jump-start{display:none}.start-bike{padding:4px 6px}.start-bike select{padding:4px}}

.crash-panel{left:auto;right:35px;top:auto;bottom:112px;transform:none;width:320px;min-width:0;padding:20px}.crash-panel h2{font-size:26px}.crash-panel .primary{font-size:14px;padding:12px}.crashed .ride-info{opacity:.2}@media(max-width:760px),(pointer:coarse){.crash-panel{top:86px;bottom:auto;right:18px;width:min(285px,calc(100% - 36px));padding:17px}.crash-panel h2{font-size:24px}.crash-panel p{margin:8px 0 14px}.crash-panel small{margin-top:10px}.crashed .ride-info{opacity:0}.crashed .trail-card{opacity:.2}}

/* Preserve the scene's light while riding; menu shading only belongs to the welcome view. */
#app.riding .vignette{background:linear-gradient(0deg,rgba(7,14,16,.22),transparent 12%,transparent 86%,rgba(7,14,16,.12));}
#app.riding .trail-card,#app.riding .ride-info,#app.riding .terrain-status{text-shadow:0 1px 4px #0009}
/* A compact riding HUD leaves the scenery and upcoming landing visible. */
#app.riding .brand-sub,#app.riding .live-label,#app.riding .trail-data,#app.riding .route-labels,#app.riding #trail-subtitle,#app.riding .controls{display:none}
@media (min-width:761px) and (pointer:fine){
 #app.riding header{padding:18px 24px}
 #app.riding .brand{font-size:28px}
 #app.riding .brandmark{font-size:35px}
 #app.riding .trail-card{top:87px;left:24px;width:245px}
 #app.riding .trail-card h1{font-size:20px;margin:8px 0 12px}
 #app.riding .terrain-status{top:161px;left:24px;width:280px;font-size:11px;gap:8px}
 #app.riding .terrain-status>b{font-size:12px}
 #app.riding .ride-info{top:80px;right:24px}
 #app.riding .ride-info>span{display:none}
 #app.riding #timer{font-size:30px}
 #app.riding .telemetry{right:24px;bottom:97px;width:156px}
 #app.riding .speed>span{font-size:78px}
 #app.riding footer{left:auto;width:auto;padding:8px 14px;margin:14px;border:1px solid #ffffff20;border-radius:7px;background:#13212666;backdrop-filter:none}
 #app.riding .utility{gap:15px}
}