:root{color-scheme:dark;--night:#030505;--ivory:#eeeade;--yellow:#e4bd51;--brightness:1;font-family:Arial,Helvetica,sans-serif;background:var(--night);color:var(--ivory)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;background:var(--night);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}button:not(:disabled){cursor:pointer}.title-screen{position:relative;isolation:isolate;width:min(100%,max(360px,56.25svh));height:100vh;height:100svh;min-height:680px;overflow:hidden;background:#020404}.road{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(var(--brightness))}.back-link{position:absolute;top:max(14px,env(safe-area-inset-top));left:18px;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;color:#d6d7cd;opacity:.7}.back-link:hover{opacity:1}.title-logo{position:absolute;top:4.2%;left:31.5%;width:37%;margin:0;line-height:0}.title-logo img{width:100%;height:auto}.mileage{position:absolute;top:35.3%;right:5.3%;width:26%;padding:2px 0 2px 9px;border-left:2px solid var(--yellow);text-shadow:0 2px 10px #000;background:linear-gradient(90deg,#0003,transparent)}.mileage h2{font-weight:400;font-size:11px;letter-spacing:.09em;line-height:1.45;text-transform:uppercase;margin:0 0 13px}.mileage dl{margin:0}.mileage dl>div+div{margin-top:16px}.mileage dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}.mileage dd{margin:0;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:400;font-size:20px;line-height:1.1;letter-spacing:.015em;font-variant-numeric:tabular-nums}.mileage abbr{font-size:15px;text-decoration:none}.menu{position:absolute;bottom:max(9%,calc(env(safe-area-inset-bottom) + 35px));left:17%;width:66%;display:flex;align-items:center;flex-direction:column}.begin-drive{display:block;min-height:47px;width:100%;background:#0002;border:1.5px solid var(--yellow);border-radius:2px;color:var(--ivory);font-size:15px;letter-spacing:.17em;text-transform:uppercase;font-weight:400;padding:12px 8px;opacity:1}.begin-drive:disabled{cursor:default}.menu p{font-size:11px;letter-spacing:.02em;color:#c2bca8;margin:10px 0 2px;text-align:center}.settings-button{min-height:44px;border:0;background:transparent;color:var(--ivory);padding:10px 20px;font-size:12px;letter-spacing:.21em;text-transform:uppercase}.settings-button:hover{color:var(--yellow)}.studio-credit{position:absolute;left:8%;right:8%;bottom:max(4.4%,env(safe-area-inset-bottom));display:block;text-align:center;font-size:9px;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:#b4b2a7;padding:6px 0}.studio-credit:hover{color:var(--ivory)}
dialog{width:min(360px,calc(100% - 36px));padding:25px;background:#111614;color:var(--ivory);border:1px solid #d5b4595c;box-shadow:0 20px 80px #000b}dialog::backdrop{background:#000b}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px}.dialog-heading h2{font-size:20px;letter-spacing:.05em;font-weight:400;margin:0}.close-button{height:44px;width:44px;border:0;background:transparent;color:var(--ivory);font-size:28px;line-height:1}.brightness-label{display:flex;justify-content:space-between;gap:20px;font-size:14px;margin-bottom:10px}.brightness-label output{font-variant-numeric:tabular-nums;color:var(--yellow)}input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--yellow)}.settings-note{font-size:12px;line-height:1.6;color:#bdc4b9;margin:8px 0}.save-note{font-size:11px;color:#9ea897;margin:5px 0 27px;line-height:1.5}.done-button{width:100%;min-height:46px;border:1px solid var(--yellow);background:transparent;color:var(--ivory);font-size:13px;letter-spacing:.1em;text-transform:uppercase}.done-button:hover{background:#e4bd5115}
@media(max-width:370px){.title-screen{min-height:680px}.mileage{right:4%;width:29%;padding-left:8px;top:34%}.mileage h2{font-size:10px;letter-spacing:.05em;margin-bottom:11px}.mileage dt{font-size:10px;letter-spacing:.075em}.mileage dd{font-size:19px}.mileage abbr{font-size:13px}.menu{left:14%;width:72%}.begin-drive{font-size:14px}.studio-credit{font-size:8px;letter-spacing:.1em}.title-logo{width:40%;left:30%}}
@media(min-width:700px) and (min-height:900px){.mileage h2{font-size:13px}.mileage dt{font-size:12px}.mileage dd{font-size:25px}.mileage abbr{font-size:17px}.begin-drive{min-height:56px;font-size:19px}.settings-button{font-size:15px}.menu p{margin-top:13px}.studio-credit{font-size:11px}}