:root{--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ink:#14213d;--ink-soft:#3d4a63;--muted:#66728a;--line:#dde3ec;--surface:#fff;--surface-2:#f3f6fa;--panel:#fffffff5;--accent:#ff5a1f;--accent-dark:#d9430c;--accent-deep:#a8330a;--sun:#ffc93c;--ok:#1f9d55;--bad:#d43d3d;--radius-s:8px;--radius-m:12px;--radius-l:20px;--shadow:0 24px 60px #0e1c3452;--slant:-10deg;--checker:repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 12px 12px;--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{background:#cfe9f2;height:100%;margin:0;overflow:hidden}#view{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden,html:not(.touch) .touch-only,html.touch .keys-only,html.touch button kbd{display:none!important}.label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px;font-weight:700}.muted{color:var(--muted);margin:12px 0 0;font-size:14px}.muted:empty{display:none}.error{color:var(--bad);min-height:1.2em;margin:10px 0 0;font-weight:700}.status{min-height:1.4em;font-weight:700}.status.ok{color:var(--ok)}.status.bad{color:var(--bad)}.brand-name{text-transform:uppercase;letter-spacing:-.02em;font-style:italic;font-weight:900;line-height:.9}.brand{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.brand-lockup{align-items:center;font-size:clamp(36px,min(8.5vw,8.5vh),96px);display:flex}.brand-icon{z-index:1;filter:drop-shadow(0 10px 18px #0e1c344d);flex:none;width:2.8em;height:2.8em;margin:-.55em -.95em -.55em -.3em;position:relative}.brand-plate{font-size:inherit;color:#fff;background:var(--accent);border-radius:var(--radius-m);transform:skewX(var(--slant));box-shadow:10px 10px 0 var(--sun), 0 22px 50px #0e1c3459;align-items:stretch;margin:0;padding:0;display:inline-flex;position:relative;overflow:hidden}.brand-plate .brand-name{transform:skewX(calc(-1 * var(--slant)));text-shadow:.04em .04em 0 var(--accent-deep);white-space:nowrap;padding:.16em .42em .14em .62em;display:block}.brand-callout{text-transform:uppercase;letter-spacing:.12em;color:#fff;background:var(--ink);border-radius:999px;margin:0;padding:7px 16px;font-size:13px;font-weight:700;box-shadow:0 8px 20px #0e1c344d}.loading{text-align:center;color:#fff;background:#7fc4dd;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex;position:fixed;inset:0}.loading-icon{width:clamp(120px,24vmin,200px);height:auto;animation:.18s linear infinite alternate burnout}@keyframes burnout{0%{transform:translate(-1px)rotate(-1deg)}to{transform:translate(1px,-1px)rotate(1deg)}}@media (prefers-reduced-motion:reduce){.loading-icon{animation:none}}.loading .brand-name{text-shadow:.05em .05em 0 var(--accent);font-size:clamp(40px,8vw,72px)}#loading-msg{text-transform:uppercase;letter-spacing:.12em;font-size:15px;font-weight:700}.stage{flex-direction:column;align-items:center;gap:clamp(18px,3vh,36px);padding:clamp(18px,4vh,48px) 16px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.stage>.brand{margin-top:auto}.stage>.panel{flex:none;max-height:none;margin-bottom:auto;position:relative;top:auto;left:auto;overflow:visible;transform:none}.panel{background:var(--panel);border-radius:var(--radius-l);width:min(460px,100vw - 32px);max-height:calc(100vh - 32px);box-shadow:var(--shadow);padding:28px 26px 20px;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.panel:before{content:"";background:var(--checker);border-radius:var(--radius-l) var(--radius-l) 0 0;opacity:.9;background-size:8px 8px;height:8px;position:absolute;top:0;left:0;right:0}.panel.wide{width:min(620px,100vw - 32px)}#panel-menu{width:min(540px,100vw - 32px)}.panel h2{text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);align-items:center;gap:10px;margin:0 0 14px;font-size:26px;font-style:italic;font-weight:900;display:flex}.panel h2:before{content:"";background:var(--accent);width:8px;height:.9em;transform:skewX(var(--slant));border-radius:2px}label{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:12px 0;font-size:12px;font-weight:700;display:block}input{border-radius:var(--radius-m);border:2px solid var(--line);background:var(--surface);width:100%;color:var(--ink);margin-top:6px;padding:12px 14px;font-family:inherit;font-size:16px;display:block}input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px #ff5a1f26}button{border-radius:var(--radius-m);border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:12px 18px;font-family:inherit;font-size:15px;font-weight:700;transition:background-color .12s,border-color .12s,transform 80ms}button:hover{border-color:var(--ink)}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}button:disabled{opacity:.5;pointer-events:none}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}button.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}button.primary:active{box-shadow:0 1px 0 var(--accent-deep);transform:translateY(3px)}button.hero{text-transform:uppercase;letter-spacing:.01em;justify-content:center;align-items:center;gap:12px;width:100%;min-height:60px;font-size:22px;font-style:italic;font-weight:900;display:flex}button.link{color:var(--ink-soft);text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);text-underline-offset:3px;background:0 0;border:none;padding:4px 2px;font-size:13px;font-weight:700}button.link:hover{color:var(--accent-dark);text-decoration-color:currentColor}.actions{flex-direction:column;gap:10px;margin-top:20px;display:flex}.actions>button:not(.hero){width:100%}.pair{grid-template-columns:1fr 1fr;gap:10px;display:grid}.pair button{justify-content:center;align-items:center;gap:6px;display:flex}.pair button kbd{margin:0}.pair.three{grid-template-columns:repeat(3,1fr)}.pair.three button{padding-left:8px;padding-right:8px}kbd{letter-spacing:.02em;text-transform:none;opacity:.8;border:1px solid;border-radius:6px;margin:0 2px;padding:2px 7px;font-family:inherit;font-size:12px;font-style:normal;font-weight:700;display:inline-block}button.hero kbd{opacity:1;background:#ffffff29;border-color:#ffffff8c}.chev{width:1em;height:1em;-webkit-mask:var(--chevron) center / contain no-repeat;-webkit-mask:var(--chevron) center / contain no-repeat;mask:var(--chevron) center / contain no-repeat;background:currentColor;flex:none;display:block}.chev.left{transform:scaleX(-1)}.car-arrow,.day-step{place-items:center;padding:0;display:grid}.course-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.course-date{font-size:20px;font-weight:800}.course-piece{color:var(--muted);flex-basis:100%;margin-top:-8px;font-size:14px;font-weight:700}.course-piece:empty{display:none}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;display:grid}.stats>div{background:var(--surface-2);border-radius:var(--radius-m);flex-direction:column;gap:2px;min-width:0;padding:10px 12px;display:flex}.stats .value{font-variant-numeric:tabular-nums;text-overflow:ellipsis;font-size:20px;font-weight:800;overflow:hidden}.account-bar{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;font-size:14px;display:flex}.account-bar .who{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.account-bar .links{flex:none;gap:14px;display:flex}#panel-menu .error:empty{display:none}.stats .streaks{grid-column:span 2;grid-template-columns:1fr 1fr;column-gap:12px;display:grid}.streaks>div{flex-direction:column;gap:2px;display:flex}.streaks .value{white-space:nowrap;margin-top:auto}.streaks .unit{color:var(--ink-soft);margin-left:1px;font-size:.7em}.ghost-cycle{text-align:left;background:var(--surface-2);border-color:#0000;align-items:center;gap:10px;width:100%;margin:8px 0 0;padding:10px 12px;display:flex}.ghost-cycle:after{content:"";background:var(--muted);width:16px;height:16px;-webkit-mask:var(--chevron) center / contain no-repeat;-webkit-mask:var(--chevron) center / contain no-repeat;mask:var(--chevron) center / contain no-repeat;flex:none}.ghost-cycle:hover:after{background:var(--ink)}.ghost-cycle-text{flex-wrap:wrap;flex:1;align-items:baseline;column-gap:8px;min-width:0;display:flex}.ghost-cycle .sub{color:var(--muted);text-overflow:ellipsis;white-space:pre;flex-basis:100%;font-size:12px;font-weight:400;overflow:hidden}.checks{gap:8px;display:grid}.checks label{background:var(--surface-2);border-radius:var(--radius-m);text-transform:none;letter-spacing:normal;min-width:0;color:var(--ink);cursor:pointer;align-items:center;gap:10px;margin:0;padding:10px 12px;font-size:14px;display:flex}.checks label>span{min-width:0}.checks input{width:20px;height:20px;accent-color:var(--accent);cursor:inherit;flex:none;margin:0;padding:0}.checks .sub{color:var(--muted);font-size:12px;font-weight:400;display:block}.settings{flex-direction:column;gap:14px;display:flex}.settings h3{margin:0 0 6px}.segmented{background:var(--surface-2);border-radius:var(--radius-m);grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;display:grid}.segmented label{cursor:pointer;margin:0;position:relative}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented span{text-align:center;border-radius:var(--radius-s);padding:8px 4px;font-size:13px;font-weight:800;display:block}.segmented label:hover input:not(:checked)+span{background:#14213d0f}.segmented input:checked+span{color:#fff;background:var(--ink)}.segmented input:focus-visible+span{outline:2px solid var(--accent)}.stats .sub{color:var(--muted);font-size:12px}.stats-link{text-align:left;align-self:flex-start;padding:0;font-size:12px}.tabs{gap:6px;margin:0 0 10px;display:flex}.day-nav{align-items:center;gap:10px;display:flex}.day-nav strong{text-align:center;flex:1;font-size:18px}.day-step{width:40px;height:40px;font-size:18px}#board-date{text-align:center;margin-top:4px}.tabs button{padding:6px 14px;font-size:14px}.tabs button.active{border-color:var(--accent);color:var(--accent)}.controls{flex-direction:column;gap:18px;display:flex}.controls section{margin:0}.controls h3{margin:0 0 6px}.controls dl{border-radius:var(--radius-m);background:var(--surface-2);margin:0;overflow:hidden}.controls dl>div{grid-template-columns:168px 1fr;align-items:center;gap:14px;padding:10px 14px;display:grid}.controls dl>div+div{border-top:1px solid var(--line)}.controls dt{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.controls .keys{white-space:nowrap;align-items:center;gap:4px;display:inline-flex}.controls dd{margin:0;font-size:15px;font-weight:700}.controls dd small{color:var(--muted);margin-top:1px;font-size:13px;font-weight:400;display:block}.controls kbd{text-align:center;min-width:30px;color:var(--ink);background:var(--surface);border:1px solid var(--line);opacity:1;border-bottom-width:3px;margin:0;padding:4px 8px;font-size:13px}.controls .or{color:var(--muted);padding:0 3px;font-size:12px;font-weight:700}.controls .combo{text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark);border:1px dashed var(--accent);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:800}.car-picker{border-radius:var(--radius-m);background:linear-gradient(#bfe3f2,#e6f4ea);overflow:hidden}.car-stage{position:relative}#car-preview{cursor:grab;touch-action:none;width:100%;height:210px;display:block}#car-preview.grabbing{cursor:grabbing}.car-arrow{width:44px;height:44px;color:var(--ink);background:#ffffffe6;border:none;border-radius:50%;font-size:18px;position:absolute;top:calc(50% - 22px);box-shadow:0 4px 12px #0e1c342e}.car-arrow:hover{color:#fff;background:var(--accent)}.car-arrow.left{left:10px}.car-arrow.right{right:10px}.car-caption{background:#ffffffbf;align-items:baseline;gap:10px;padding:8px 14px 10px;display:flex}.car-caption strong{text-transform:uppercase;color:var(--accent-dark);font-size:18px;font-style:italic;font-weight:900}.car-caption span{color:var(--ink-soft);font-size:13px}.wallet{color:var(--ink);pointer-events:none;background:#ffffffeb;border-radius:999px;padding:5px 11px;font-size:15px;font-weight:800;position:absolute;top:10px;left:10px;box-shadow:0 3px 10px #0e1c3429}.wallet.hidden{display:none}.wallet.short{color:var(--bad);background:#ffe9e9}.wallet.bump{animation:.45s ease-out wallet-bump}@keyframes wallet-bump{30%{transform:scale(1.25)}}@media (prefers-reduced-motion:reduce){.wallet.bump{animation:none}}.car-picker.locked #car-preview{filter:saturate(.45)brightness(.88)}.car-lock{color:#14213dd1;filter:drop-shadow(0 0 3px #ffffffe6)drop-shadow(0 4px 10px #0e1c344d);pointer-events:none;width:64px;height:64px;display:none;position:absolute;top:calc(50% - 40px);left:calc(50% - 32px)}.car-picker.locked .car-lock{display:block}.car-shop{position:absolute;top:calc(50% + 32px);left:50%;transform:translate(-50%)}.car-shop.hidden{display:none}.car-shop .buy{white-space:nowrap;background:var(--sun);border-color:var(--sun);padding:7px 14px;font-size:14px;box-shadow:0 3px #c9971a}.car-shop .buy:hover:not(:disabled){background:#ffb800;border-color:#ffb800}.car-shop .buy:disabled{opacity:.55;cursor:default;pointer-events:auto;box-shadow:none}.big-time{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:56px;font-style:italic;font-weight:900}.finish-gap{color:var(--ink-soft);margin:8px 0 4px;font-size:15px}.finish-gap:empty{display:none}.finish-gap .gap{font-variant-numeric:tabular-nums}.finish-gap .gap.ahead{color:var(--ok)}.finish-gap .gap.behind{color:var(--bad)}.table-wrap{max-height:50vh;overflow:auto}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}th,td{text-align:left;border-bottom:1px solid var(--line);padding:9px 10px}th{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px;font-weight:700}th.icon{font-size:18px}tr.me td{background:#fff3c4;font-weight:700}tr.podium td:first-child{white-space:nowrap;font-weight:800}tr.cut td{border-bottom:2px dashed var(--sun)}#hud{pointer-events:none;color:#fff;text-shadow:0 2px #00000059,0 0 12px #00000040;position:fixed;inset:0}.hud-tl{position:absolute;top:16px;left:20px}.hud-tr{text-align:right;position:absolute;top:18px;right:20px}.hud-time{font-variant-numeric:tabular-nums;font-size:46px;font-style:italic;font-weight:900}.hud-delta{font-size:34px;font-style:italic;line-height:1}.hud-vs{text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin:2px 0 6px;font-size:12px;font-weight:800}.hud-sub{text-transform:uppercase;letter-spacing:.04em;font-size:18px;font-weight:800}.hud-bottom{position:absolute;bottom:24px;left:24px}.hud-speed{font-variant-numeric:tabular-nums;font-size:56px;font-style:italic;font-weight:900}.hud-unit{text-transform:uppercase;margin:0 12px 0 6px;font-size:16px;font-weight:700}#minimap{background:#ffffff40;border:2px solid #fff9;border-radius:14px;width:180px;height:180px;position:absolute;bottom:18px;right:18px}.hud-msg{text-align:center;text-transform:uppercase;font-size:64px;font-style:italic;font-weight:900;transition:opacity .25s;position:absolute;top:28%;left:0;right:0}.hud-msg small{text-transform:none;font-size:24px;font-style:normal;font-weight:700;display:block}.hud-drift{text-align:center;text-transform:uppercase;color:var(--sun);opacity:0;font-size:30px;font-style:italic;font-weight:900;position:absolute;top:46%;left:0;right:0}.hud-drift.show{animation:1.1s ease-out drift-flash}@keyframes drift-flash{0%{opacity:0;transform:scale(.7) skewX(var(--slant))}15%{opacity:1;transform:scale(1.12) skewX(var(--slant))}70%{opacity:1;transform:scale(1) skewX(var(--slant))}to{opacity:0;transform:scale(1) skewX(var(--slant))}}.split{font-variant-numeric:tabular-nums;font-weight:900}.split.ahead{color:#6dff95}.split.behind{color:#ff7a6b}:root{--brake-h:clamp(72px, 20vh, 140px)}.touch-pad{grid-template-columns:1fr 1fr;grid-template-rows:1fr var(--brake-h);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;display:grid;position:absolute;inset:0}#hud.done .touch-pad,#hud.done .hud-buttons{display:none!important}.tz{align-items:center;transition:background-color 80ms;display:flex}.tz-left{justify-content:flex-start;padding-left:14px}.tz-right{justify-content:flex-end;padding-right:14px}.tz-arrow{opacity:.35;font-size:72px;font-weight:300;line-height:1}.tz-left.on{background:linear-gradient(90deg,#ffffff38,#0000 70%)}.tz-right.on{background:linear-gradient(270deg,#ffffff38,#0000 70%)}.tz.on .tz-arrow{opacity:.9}.tz-brake{background:#14213d47;border-top:2px dashed #ffffff73;grid-column:1/-1;justify-content:center}.tz-brake.on{background:#d63d3d73}.tz-label{text-transform:uppercase;letter-spacing:.14em;opacity:.85;font-size:15px;font-style:italic;font-weight:900}.hud-buttons{pointer-events:auto;flex-direction:column;align-items:stretch;gap:8px;display:flex;position:absolute;top:74px;right:14px}.hud-buttons button{text-transform:uppercase;letter-spacing:.06em;color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#14213d8c;border:1px solid #fff6;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}html.touch .hud-bottom{bottom:calc(var(--brake-h) + 10px)}html.touch #minimap{bottom:calc(var(--brake-h) + 10px);width:110px;height:110px}.touch-diagram{background:var(--ink);text-transform:uppercase;letter-spacing:.06em;color:#fff;border-radius:16px;grid-template-rows:92px 40px;grid-template-columns:1fr 1fr;gap:4px;padding:6px;font-size:12px;font-weight:800;display:grid}.touch-diagram>div{background:#ffffff1f;border-radius:10px;justify-content:center;align-items:center;gap:6px;display:flex}.touch-diagram .chev{font-size:14px}.td-brake{grid-column:1/-1;background:#d63d3d8c!important}.controls .zone,.controls .pill{text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:12px;font-weight:800}.controls .pill{color:#fff;background:var(--ink);border-color:var(--ink);border-radius:999px}#hud.help-seen .hud-help{display:none}.hud-help{text-align:center;opacity:.8;font-size:12px;position:absolute;bottom:6px;left:0;right:0}@media (height<=940px){.brand-lockup{font-size:clamp(36px,min(8.5vw,6.5vh),96px)}.stage{gap:2vh}#panel-menu{padding-top:24px;padding-bottom:14px}#car-preview{height:160px}.car-caption{padding:6px 14px 7px}.stats{margin-top:8px}.stats>div{padding:7px 12px}.actions{margin-top:14px}.account-bar{margin-top:12px;padding-top:10px}}@media (width>=900px){#panel-menu{grid-template:"car head""car stats""car medals""car ghosts""car actions"1fr"car account""car error"/minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;width:min(900px,100vw - 32px);display:grid}#panel-menu .course-head{grid-area:head}#panel-menu .car-picker{flex-direction:column;grid-area:car;display:flex}#panel-menu .car-stage{flex-direction:column;flex:1;display:flex}#panel-menu #car-preview{flex:1;height:auto;min-height:260px}#panel-menu .stats{grid-area:stats;margin-top:0}#panel-menu .stats.lifetime{grid-area:medals;margin-top:8px}#panel-menu .ghost-cycle{grid-area:ghosts}#panel-menu .actions{grid-area:actions;align-self:end;margin-top:16px}#panel-menu .account-bar{grid-area:account}#panel-menu .error{grid-area:error}html:not(.touch) #panel-controls{width:min(860px,100vw - 32px)}.controls.keys-only{grid-template-columns:1fr 1fr;align-items:start;gap:18px 20px;display:grid}}@media (height<=500px){.hud-time{font-size:32px}.hud-sub{font-size:15px}.hud-speed{font-size:40px}.hud-buttons{flex-direction:row;top:12px;left:50%;right:auto;transform:translate(-50%)}html.touch #minimap{width:90px;height:90px}}@media (width<=640px){.hud-time{font-size:30px}.hud-speed{font-size:36px}#minimap{width:110px;height:110px}.hud-help{display:none}.hud-msg{font-size:40px}.hud-msg small{font-size:20px}.brand-callout{letter-spacing:.08em;font-size:11px}.wide-only{display:none}.panel{padding:26px 18px 18px}#car-preview{height:180px}.controls dl>div{grid-template-columns:124px 1fr;gap:10px;padding:9px 12px}.controls kbd{min-width:26px;padding:3px 6px}.stats>div{padding:8px 10px}.stats .value{font-size:16px}}
