@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#18352d;background:#f1f4f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #cfd9d1;border-radius:7px;padding:10px 13px;color:inherit;background:white;transition:background .15s,transform .15s}button:hover{background:#e9efdf}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #5a8c24;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}button.selected{border-color:#213c2c;background:#213c2c;color:#e0f8bb}header{height:92px;max-width:1600px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9e1da}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;letter-spacing:1.6px;gap:12px}.brand svg{width:42px;fill:none;stroke:#274d34;stroke-width:2.6}.brand span{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:2px;border-left:1px solid #c9d4c9;margin-left:9px;padding-left:21px;font-weight:600}.local-tag,.source-tag{font-size:11px;letter-spacing:1.5px;font-weight:700;border:1px solid #cdd8cc;border-radius:4px;padding:7px 10px}.local-tag{color:#6b7c71}main{max-width:1600px;margin:28px auto;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;padding:0 40px}.ride-panel{min-width:0}.ride-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.eyebrow{font-size:11px;letter-spacing:2px;color:#687b6d;font-weight:700}h1{font-family:'Barlow Condensed',sans-serif;font-size:38px;line-height:1.1;margin:6px 0 0;letter-spacing:.3px}.source-tag{background:#e5ecd9;color:#446237}.game-wrap{position:relative;overflow:hidden;border-radius:12px;background:#d7e5dc;border:1px solid #c8d9ce;box-shadow:0 12px 35px #1e3c2310;height:390px}#game{width:100%;height:100%;display:block;outline-offset:-4px}.hud{position:absolute;top:23px;left:24px;display:flex;gap:33px;pointer-events:none}.hud span{display:block;font-size:10px;letter-spacing:1.7px;font-weight:700;color:#617b6c}.hud strong{font-family:'Barlow Condensed',sans-serif;font-size:29px;font-weight:600;display:block;margin-top:3px}.hud small{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500}.game-message{position:absolute;top:97px;left:24px;pointer-events:none;display:flex;flex-direction:column;gap:5px}.game-message span{font-size:20px;font-weight:700}.game-message small{font-size:13px;color:#526c5b}.game-message.end{left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;padding:20px 28px;background:#f8fff3ec;border:1px solid #7d9a69;border-radius:10px;min-width:220px}.terrain-caption{position:absolute;bottom:13px;left:17px;font-size:11px;color:#e6efe5;background:#244534a8;padding:5px 8px;border-radius:4px}.game-actions{position:absolute;right:14px;top:18px;display:flex;gap:7px}.game-actions button{font-size:12px;background:#ffffff85;border-color:#b8cbbc;padding:7px 10px}.ride-controls{display:flex;gap:20px;justify-content:space-between;margin:17px 0 24px;flex-wrap:wrap}.vehicle-switch{display:flex;gap:7px}.vehicle-switch button{min-width:123px;text-align:left;font-size:15px;font-weight:700}.vehicle-switch span{display:block;font-size:9px;letter-spacing:1px;margin-top:4px;opacity:.7}.pedals{display:flex;gap:6px;align-items:stretch}.pedals button{font-size:12px;touch-action:none;user-select:none}.pedals .throttle{background:#c3ec75;border-color:#b3d369;font-weight:700}.pedals .brake{background:#e6eade}.pedals button.held{background:#8bb83f;transform:translateY(2px)}.profile-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #d2dcd3;padding-top:21px}.profile-header .eyebrow{display:block;color:#36583a}.profile-header #profile-kind{font-size:11px;color:#7a8a7c;display:block;margin-top:7px}.scale-control{display:flex;gap:8px;align-items:center;font-size:12px;white-space:nowrap}select{padding:9px 10px;background:#fff;border:1px solid #ccd8cd;border-radius:6px;color:inherit;font-size:14px}#profile{display:block;width:100%;height:138px;margin-top:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:9px}.stats>div{border-right:1px solid #d4ded3;padding-left:20px}.stats>div:first-child{padding-left:0}.stats>div:last-child{border:none}.stats span{font-size:10px;letter-spacing:1.5px;color:#7b8b7d;display:block;font-weight:700}.stats strong{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:600;display:block;margin-top:5px}.stats small{font-family:'DM Sans',sans-serif;font-size:13px;color:#7b8b7d;font-weight:400}.route-panel{border-left:1px solid #d4ded3;padding-left:27px;padding-top:4px}.section-title{display:flex;align-items:center;gap:11px}.step{font-family:'Barlow Condensed',sans-serif;font-size:16px;border:1px solid #c6d5c2;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;color:#6b8360}h2{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:600;margin:0}.mode-tabs{display:flex;margin:21px 0 16px;background:#e2e9df;border-radius:7px;padding:4px}.mode-tabs button{flex:1;border:0;font-size:13px;padding:9px 7px;background:transparent}.mode-tabs button.selected{background:white;color:#24462e;box-shadow:0 1px 4px #16362618}.help{font-size:13px;line-height:1.6;color:#748475;margin:12px 0 17px}.demo-list{display:flex;flex-direction:column;gap:9px}.demo-list button{display:flex;align-items:center;gap:12px;padding:15px 11px;text-align:left;background:#f9fbf7;border-color:#d4dfd1}.demo-list button.selected{background:#e3eed6;color:#24442c;border-color:#8da677}.mini-hill{font-size:30px;color:#76975a;min-width:31px;text-align:center}.demo-list strong{display:block;font-size:14px}.demo-list small{display:block;font-size:11px;color:#788876;margin-top:5px}.difficulty{font-size:8px;letter-spacing:.7px;margin-left:auto;color:#6b8360;font-weight:700}.demo-note{margin-top:27px;background:#e9efe3;border:1px solid #d9e3d0;border-radius:8px;padding:18px}.demo-note strong{font-size:14px}.demo-note p{font-size:13px;line-height:1.7;color:#6d806c}.demo-note button{font-size:13px;width:100%;background:transparent;border-color:#b1c4a1}.status{font-size:12px;line-height:1.5;color:#527341;border-top:1px solid #d4ded3;padding-top:15px;margin-top:22px;min-height:38px}.status.error{color:#a04128}.instructions-title{margin-top:26px}.instructions{margin-top:16px;font-size:12px;color:#70836e}.instructions p{display:flex;align-items:center;gap:9px}kbd{display:inline-block;font:11px 'DM Sans',sans-serif;background:#e3e9de;border:1px solid #ccd7c5;border-radius:4px;padding:3px 6px;color:#44633b}.instructions small{display:block;margin-top:17px;font-size:12px}footer{max-width:1600px;padding:22px 40px;margin:auto;border-top:1px solid #d9e1da;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#8a998b}label{font-size:13px;font-weight:500}.token-row{display:flex;gap:5px;margin-top:8px}.token-row input{min-width:0;width:100%;border:1px solid #c9d7c5;border-radius:6px;padding:10px;background:#fff;font-size:13px}.token-row button{font-size:12px;padding:8px}#map{height:235px;background:#dce7d9;border:1px solid #c8d8bf;border-radius:8px;overflow:hidden;margin-top:16px}.map-empty{padding:55px 28px;text-align:center;color:#69845d;font-size:14px;line-height:1.7}#route-mode{width:100%;margin-top:8px}.point-list{margin-top:14px;font-size:12px;color:#71856c}.point-list>div{display:flex;align-items:center;gap:9px;margin:9px 0}.pin{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#284b31;color:#edf6e4;font-size:11px;flex-shrink:0}.pin.finish{background:#b7d87b;color:#244425}.route-buttons{display:flex;gap:6px;margin:13px 0}.route-buttons button{flex:1;font-size:12px}.primary{background:#264c30;color:#e8f7dc;border-color:#264c30;width:100%;font-weight:600}.primary:hover{background:#38623d}.map-marker{width:28px;height:28px;background:#234d32;color:white;border:2px solid white;border-radius:50%;display:grid;place-items:center;font-weight:700;box-shadow:0 2px 6px #0004}.map-marker.finish{background:#c5ed81;color:#254832}.mapboxgl-ctrl-attrib{font-size:10px!important} [hidden]{display:none!important}
@media(min-width:1500px){.game-wrap{height:470px}}@media(max-width:1150px){main{padding:0 24px;gap:22px;grid-template-columns:minmax(0,1fr) 310px}header{padding:0 24px}.route-panel{padding-left:20px}.ride-controls{gap:10px}.pedals{width:100%}.pedals button{flex:1}.game-wrap{height:360px}.game-actions{top:auto;bottom:43px}.hud{gap:21px}.profile-header{align-items:flex-start;flex-wrap:wrap}}@media(max-width:820px){main{grid-template-columns:1fr;padding:0 18px;margin-top:22px}.route-panel{border-left:0;border-top:1px solid #d4ded3;padding:24px 0 0}header{height:75px;padding:0 18px}.brand{font-size:27px}.brand span{display:none}.local-tag{font-size:9px}.game-wrap{height:350px}.hud{top:17px;left:17px}.game-message{left:17px;font-size:15px;top:85px}.profile-header{gap:12px}.stats>div{padding-left:12px}.stats span{font-size:9px}.source-tag{font-size:9px}.demo-list{display:grid;grid-template-columns:repeat(3,1fr)}.demo-list button{flex-direction:column;align-items:flex-start}.difficulty{margin-left:0}.mini-hill{display:none}.demo-note{margin-top:18px}footer{padding:20px 18px;font-size:9px;gap:10px}.game-message small{font-size:12px}.instructions{font-size:14px}.instructions small{font-size:13px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

#data-credit{font-size:12px;color:#6b8065;margin:10px 0 0}#data-credit a{color:inherit}.help,.demo-note p{font-size:14px}.mode-tabs button,.token-row button,.route-buttons button,.demo-note button,.pedals button,.scale-control,label{font-size:14px}.game-actions button{font-size:13px}

/* San Francisco garage and route selection. */
.game-wrap{height:475px}.garage{position:absolute;inset:0;z-index:3;background:#eef4eaf5;backdrop-filter:blur(12px);padding:26px;display:flex;flex-direction:column;gap:19px}.garage-heading{display:flex;align-items:center;justify-content:space-between}.garage-heading h2{font-size:34px;margin-top:4px}.garage-count{font-size:10px;letter-spacing:1.8px;color:#82947b}.vehicle-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;flex:1;align-items:stretch}.vehicle-card{padding:13px 10px;display:flex;flex-direction:column;text-align:left;border:1px solid #cad8c1;border-radius:10px;background:#f9fcf4;color:#294b30;position:relative;min-width:0}.vehicle-card.selected{background:#e1efcf;color:#294b30;border:2px solid #6e9647;padding:12px 9px;box-shadow:0 5px 12px #25482b0a}.vehicle-card canvas{width:100%;height:82px;display:block;margin:14px 0 4px}.vehicle-card strong{font-family:'Barlow Condensed',sans-serif;font-size:24px;line-height:1.1}.vehicle-card .vehicle-tag{font-size:11px;margin-top:7px;color:#718266}.vehicle-card .selection-mark{font-size:9px;letter-spacing:1px;color:#58773e;height:14px}.vehicle-card p{font-size:12px;line-height:1.5;color:#72846a;margin:11px 0}.vehicle-ratings{margin-top:auto;display:flex;flex-direction:column;gap:6px}.vehicle-ratings div{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;color:#718266}.rating-bar{height:4px;width:50px;background:#dce7d4;border-radius:4px;overflow:hidden}.rating-bar i{height:100%;display:block;background:#87a95c}.garage-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #d4dfc9;padding-top:16px}.garage-bottom strong{display:block;font-size:15px}.garage-bottom small{display:block;font-size:12px;margin-top:5px;color:#788970}.garage-bottom .primary{width:180px;padding:14px 12px}.current-vehicle{display:flex;align-items:center;gap:12px}.current-vehicle .eyebrow{font-size:9px}.current-vehicle strong{font-family:'Barlow Condensed',sans-serif;font-size:23px}.current-vehicle button{font-size:12px;padding:7px 10px}.route-list{display:flex;flex-direction:column;gap:11px}.route-card{text-align:left;padding:16px;background:#fafcf6;border-color:#d0ddc8;width:100%;display:block;position:relative}.route-card.selected{background:#e5efd9;color:#29482e;border-color:#8ba66f}.route-card .route-number{font-size:10px;letter-spacing:1px;color:#8da27c;margin-bottom:6px;display:block}.route-card strong{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:600;display:block}.route-card .route-subtitle{display:block;font-size:12px;color:#75876d;margin-top:3px}.route-card .route-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:#75876d;margin-top:13px}.route-card .difficulty{position:absolute;top:18px;right:14px;padding:4px 6px;background:#e5ecd9;border-radius:4px;font-size:9px}.route-card.selected .difficulty{background:#d0e1b9}.route-footnote{font-size:11px;color:#84957b;line-height:1.5;margin:14px 0}.connection-settings{border-top:1px solid #d2dfc9;margin-top:20px;padding-top:14px;font-size:13px;color:#667e56}.connection-settings summary{cursor:pointer;font-size:13px}.connection-settings form{margin-top:15px}.connection-settings .help{font-size:12px}.result-actions{display:flex;justify-content:center;gap:8px;margin-top:12px;order:3;pointer-events:auto}.result-actions button{font-size:13px;padding:9px 11px}.game-message{display:flex}.game-message.end{min-width:280px}.game-message.end span{font-family:'Barlow Condensed',sans-serif;font-size:32px}.game-message.end small{line-height:1.6}.pedals button{min-height:48px}.garage .primary:disabled{opacity:.6}.terrain-caption{z-index:1}.hud{transition:opacity .2s}.game-wrap:has(.garage:not([hidden])) .hud,.game-wrap:has(.garage:not([hidden])) .game-actions,.game-wrap:has(.garage:not([hidden])) .terrain-caption{visibility:hidden}.ride-panel .source-tag{font-size:9px;max-width:150px;text-align:center}.route-panel{padding-top:4px}button{touch-action:manipulation}
@media(max-width:1150px){.game-wrap{height:530px}.garage{padding:20px;gap:14px}.vehicle-cards{grid-template-columns:repeat(2,1fr)}.vehicle-card{padding:11px;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}.vehicle-card.selected{padding:10px}.vehicle-card canvas{grid-row:1/5;grid-column:2;margin:0;height:74px;align-self:center}.vehicle-card strong{font-size:24px}.vehicle-card p{display:none}.vehicle-ratings{grid-column:1/3;flex-direction:row;gap:8px;margin-top:8px}.vehicle-ratings div{flex:1;flex-direction:column;gap:4px}.rating-bar{width:100%}.vehicle-card .vehicle-tag{font-size:10px;margin-top:3px}.garage-heading h2{font-size:30px}.garage-bottom{padding-top:12px}.game-actions{bottom:auto;top:16px}.hud{gap:18px}.game-wrap:has(.garage[hidden]){height:410px}}
@media(max-width:820px){.game-wrap{height:535px}.garage{padding:18px}.garage-count{font-size:8px}.vehicle-card strong{font-size:23px}.vehicle-card canvas{height:70px}.garage-bottom{align-items:stretch}.garage-bottom .primary{width:145px;font-size:14px}.garage-bottom small{font-size:11px;max-width:155px}.current-vehicle{width:100%;justify-content:flex-start}.current-vehicle button{margin-left:auto}.game-actions{bottom:50px;top:auto}.game-wrap:has(.garage[hidden]){height:365px}.ride-top{gap:8px}.ride-panel .source-tag{font-size:8px;max-width:115px}.route-list{display:grid;grid-template-columns:1fr}.route-card{padding:15px}.route-card .difficulty{top:16px}.garage-heading h2{font-size:29px}.pedals{gap:5px}.pedals button{font-size:13px;padding:10px 6px}.game-message.end{min-width:260px}.current-vehicle .eyebrow{font-size:10px}}

@media(min-width:1151px){.game-wrap:has(.garage:not([hidden])){height:550px}}
.garage{overflow-y:auto}.vehicle-cards{flex-shrink:0}.garage-bottom{flex-shrink:0}.garage-heading{flex-shrink:0}

@media(max-width:820px){.game-wrap:has(.garage:not([hidden])){height:570px}.vehicle-card{display:flex;gap:0;padding:10px;flex-direction:column}.vehicle-card.selected{padding:9px}.vehicle-card canvas{height:62px;margin:3px 0 2px;width:100%}.vehicle-card strong{font-size:23px;white-space:nowrap}.vehicle-card .vehicle-tag{font-size:10px}.vehicle-card .selection-mark{height:12px;font-size:8px}.vehicle-ratings{width:100%;margin-top:10px}.vehicle-ratings div{font-size:9px}.garage-count{font-size:8px}.garage-heading{gap:5px}.garage-bottom .primary{width:140px}}

.route-tracking{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:20px;border-top:1px solid #d2dcd3;padding-top:20px}.route-tracking .profile-header{border-top:0;padding-top:0;align-items:flex-start;flex-wrap:wrap;gap:12px}.route-tracking #profile{height:175px;margin-top:12px}.tracking-map-panel{min-width:0}.tracking-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.tracking-heading button{font-size:12px;padding:5px 8px;background:transparent}.tracking-map-panel #tracking-map{height:210px;border-radius:8px;overflow:hidden;background:#dae6d7;border:1px solid #c5d5be}.tracking-readout{display:flex;gap:8px;justify-content:space-between;margin-top:9px;font-size:11px;color:#6b8062;flex-wrap:wrap}.tracking-readout strong{font-weight:500}.tracking-readout i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e18c4c;margin-right:5px}.tracking-player{width:16px;height:16px;border-radius:50%;background:#e18c4c;border:3px solid white;box-shadow:0 0 0 5px #e18c4c35,0 2px 5px #25452a55}.tracking-endpoint{background:#315835;color:white;border:2px solid white;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font:700 10px 'DM Sans',sans-serif}.tracking-endpoint.finish{background:#bddb7c;color:#27452d}.profile-panel{min-width:0}@media(max-width:1100px){.route-tracking{grid-template-columns:1fr}.tracking-map-panel #tracking-map{height:230px}.route-tracking #profile{height:150px}}

.tracking-player{z-index:3;pointer-events:none}

.boost-meter{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#f3f5eb;border-bottom:1px solid #dbe2d2;font-size:11px}.boost-meter>span{min-width:85px;font-weight:700}.boost-meter>div{width:100px;height:6px;background:#dbe2d2;border-radius:10px;overflow:hidden}.boost-meter i{display:block;height:100%;width:100%;background:#df914f;transition:width .1s linear}.boost-meter small{margin-left:auto;color:#66735e}.boost-button{background:#f8dfbb!important;color:#66421c!important}.boost-button.held{background:#edb675!important}@media(max-width:600px){.boost-meter small{display:none}.pedals{flex-wrap:wrap}}