1:root {2 color-scheme: dark;3 --ink: #f1f0e7;4 --muted: #96aaae;5 --mint: #a4e9d5;6 --orange: #f7ac86;7 --line: rgba(193,225,224,.13);8 font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont,9 "Segoe UI", sans-serif;10}11* {12 box-sizing: border-box;13}14html,15body {16 margin: 0;17 height: 100%;18 overflow: hidden;19 background: #0b1721;20 color: var(--ink);21}22button,23input,24select,25summary {26 font: inherit;27}28button {29 cursor: pointer;30}31button,32input,33select {34 -webkit-tap-highlight-color: transparent;35}36button:focus-visible,37input:focus-visible,38select:focus-visible,39summary:focus-visible,40a:focus-visible {41 outline: 2px solid var(--mint);42 outline-offset: 4px;43}44button:disabled,45input:disabled,46select:disabled {47 cursor: default;48}49[hidden] {50 display: none ;51}52#app {53 position: fixed;54 inset: 0;55}56.wordmark {57 display: inline-flex;58 align-items: center;59 gap: 10px;60 font-size: 21px;61 font-weight: 750;62 letter-spacing: -.8px;63 text-decoration: none;64 color: var(--ink);65}66.wordmark i {67 display: inline-block;68 width: 17px;69 height: 17px;70 border-radius: 50%;71 background: radial-gradient(circle at 30% 25%, #fff3dd, #f6aa82 48%, #bc6672);72 box-shadow: 0 0 24px #f6aa8220;73}74#menu {75 position: fixed;76 inset: 0;77 z-index: 40;78 overflow: auto;79 background: radial-gradient(ellipse at 25% 45%, #1b3940 0%, #101f2c 43%,80 #0b1721 76%);81 padding: 30px 5vw 20px;82}83.menu-top {84 display: flex;85 align-items: center;86 justify-content: space-between;87 max-width: 1280px;88 margin: auto;89}90.menu-layout {91 display: grid;92 grid-template-columns: 1.2fr 1fr;93 gap: 50px;94 align-items: center;95 max-width: 1130px;96 min-height: calc(100svh - 134px);97 margin: auto;98 padding: 32px 0;99}100.menu-art {101 position: relative;102 align-self: center;103 min-width: 0;104}105.track-art {106 display: block;107 width: 110%;108 margin-left: -7%;109 position: relative;110 z-index: 1;111 animation: art-float 8s ease-in-out infinite;112}113.art-orbit {114 position: absolute;115 border: 1px solid #b1e7df14;116 border-radius: 50%;117 width: 90%;118 aspect-ratio: 1;119 top: 3%;120 left: 0;121}122.orbit-two {123 width: 120%;124 left: -15%;125 top: -12%;126 border-style: dashed;127 border-color: #b1e7df0a;128}129@keyframes art-float {130 0%,131 100% {132 transform: translateY(0);133 }134 50% {135 transform: translateY(-12px);136 }137}138.menu-panel {139 max-width: 440px;140 width: 100%;141 margin: auto;142}143#menu h1 {144 margin: 0 0 28px;145 font-size: clamp(54px, 6.5vw, 84px);146 line-height: 1.08;147 letter-spacing: -.075em;148 font-weight: 750;149}150#menu h1 span {151 color: var(--orange);152}153#menu fieldset {154 border: 0;155 padding: 0;156 margin: 0 0 24px;157 min-width: 0;158}159#menu legend,160.seed-field label {161 display: block;162 padding: 0;163 font-weight: 600;164 font-size: 12px;165 margin-bottom: 10px;166}167.racer-options {168 display: grid;169 grid-template-columns: repeat(4,1fr) 1.25fr;170 gap: 7px;171}172.racer-options button,173.racer-options input {174 min-width: 0;175 width: 100%;176 border-radius: 8px;177 border: 1px solid var(--line);178 background: #ffffff03;179 color: var(--muted);180 text-align: center;181 padding: 9px 4px;182 font-size: 12px;183}184.racer-options button:hover {185 color: var(--ink);186 border-color: #a4e9d566;187}188.racer-options button[aria-pressed=true] {189 color: var(--mint);190 border-color: #a4e9d577;191 background: #a4e9d50b;192}193.racer-options input {194 color: var(--ink);195 appearance: textfield;196 -moz-appearance: textfield;197}198.racer-options input::-webkit-inner-spin-button {199 -webkit-appearance: none;200}201.endless-only.off {202 opacity: .4;203}204.seed-field {205 margin-bottom: 22px;206}207.seed-field label span {208 color: #82999e;209 font-size: 10px;210 font-weight: 400;211 margin-left: 6px;212}213#menu-seed {214 width: 100%;215 background: #08141d55;216 border: 1px solid var(--line);217 border-radius: 8px;218 padding: 11px 12px;219 color: var(--ink);220 font-size: 13px;221}222#menu-seed::placeholder {223 color: #738d92;224}225.start-run {226 display: flex;227 justify-content: space-between;228 align-items: center;229 width: 100%;230 color: #162a2c;231 background: var(--mint);232 border: 0;233 border-radius: 10px;234 padding: 14px 17px;235 font-size: 14px;236 font-weight: 700;237 box-shadow: 0 5px 30px #6dc9ba0d;238 transition: background .18s, transform .18s;239}240.start-run:hover {241 background: #c7f7e6;242 transform: translateY(-1px);243}244.start-run span {245 font-size: 21px;246 line-height: 1;247}248.menu-advanced {249 margin-top: 17px;250 color: #8da3a8;251 font-size: 11px;252}253.menu-advanced summary {254 cursor: pointer;255 width: max-content;256 padding: 4px 0;257}258.adv {259 display: grid;260 grid-template-columns: 1fr 1fr;261 gap: 10px;262 padding: 13px 0 4px;263}264.adv label {265 display: flex;266 gap: 7px;267 align-items: center;268 line-height: 1.5;269}270.adv input {271 accent-color: var(--mint);272 margin: 0;273}274.steering-setting {275 grid-column: 1 / -1;276}277.adv select {278 min-width: 0;279 padding: 7px 10px;280 border: 1px solid var(--line);281 border-radius: 8px;282 background: #101f2c;283 color: var(--ink);284}285#hud {286 position: fixed;287 inset: 0;288 z-index: 10;289 pointer-events: none;290}291#hud button,292#hud summary,293#hud .controls-card {294 pointer-events: auto;295}296.run-topbar {297 position: absolute;298 top: max(20px, env(safe-area-inset-top));299 left: max(24px, env(safe-area-inset-left));300 right: max(24px, env(safe-area-inset-right));301 display: flex;302 align-items: center;303 justify-content: space-between;304 gap: 15px;305}306.run-identity {307 display: flex;308 align-items: center;309 gap: 18px;310 min-width: 0;311 text-shadow: 0 1px 8px #06121a;312}313#run-mode {314 font-size: 11px;315 color: #d3e4e2;316 border-left: 1px solid #cfece333;317 padding-left: 18px;318 white-space: nowrap;319}320#seed {321 font-size: 10px;322 color: #c0d4d3;323 max-width: min(25vw, 25ch);324 overflow: hidden;325 text-overflow: ellipsis;326 white-space: nowrap;327}328.run-actions {329 display: flex;330 gap: 8px;331 flex-shrink: 0;332}333#hud button {334 border: 1px solid #d4f1e22e;335 border-radius: 9px;336 background: #0d1c29b8;337 backdrop-filter: blur(16px);338 color: #f1f2e8;339 padding: 10px 13px;340 font-size: 12px;341 line-height: 1.2;342 transition: background .16s, border-color .16s;343}344#hud button:hover {345 background: #28414ded;346 border-color: #d4f1e277;347}348#hud button.primary {349 background: #a4e9d5ed;350 color: #162a2c;351 font-weight: 650;352 border-color: transparent;353}354#hud button.primary:hover {355 background: #c7f7e6;356}357.control-dock {358 pointer-events: auto;359 position: absolute;360 bottom: max(24px, env(safe-area-inset-bottom));361 left: 50%;362 transform: translateX(-50%);363 display: flex;364 align-items: center;365 gap: 3px;366 padding: 6px;367 border: 1px solid #d4f1e226;368 border-radius: 14px;369 background: #0b1824e0;370 box-shadow: 0 8px 28px #0003;371 backdrop-filter: blur(18px);372 white-space: nowrap;373}374#hud .control-dock button {375 background: transparent;376 border-color: transparent;377 padding: 10px 12px;378 font-size: 11px;379}380#hud .control-dock button:hover,381#hud .control-dock button[aria-pressed=true] {382 background: #a4e9d515;383 color: var(--mint);384}385.dock-divider {386 width: 1px;387 height: 20px;388 background: #cfece320;389 margin: 0 5px;390}391#controls-help {392 position: relative;393}394#controls-help summary {395 cursor: pointer;396 display: grid;397 place-items: center;398 list-style: none;399 width: 32px;400 height: 32px;401 border: 1px solid #cfece333;402 border-radius: 50%;403 color: #afc8c8;404 font-size: 12px;405}406#controls-help summary::-webkit-details-marker {407 display: none;408}409.controls-card {410 position: absolute;411 bottom: 57px;412 right: -6px;413 width: 290px;414 padding: 20px;415 border: 1px solid #d4f1e22e;416 border-radius: 12px;417 background: #101f2cf5;418 box-shadow: 0 14px 35px #0005;419 white-space: normal;420}421.controls-card strong {422 font-size: 14px;423}424.controls-card p {425 font-size: 12px;426 color: #aac0c3;427 line-height: 1.6;428}429.controls-card dl {430 display: grid;431 grid-template-columns: 90px 1fr;432 gap: 10px;433 font-size: 11px;434 margin: 18px 0 0;435}436.controls-card dt {437 color: var(--mint);438}439.controls-card dd {440 margin: 0;441 color: #c1d2d2;442}443#paused-label {444 position: absolute;445 top: 26%;446 left: 50%;447 transform: translateX(-50%);448 font-size: 23px;449 font-weight: 650;450 text-align: center;451 text-shadow: 0 2px 12px #07121b;452}453#paused-label span {454 display: block;455 margin-top: 8px;456 font-size: 12px;457 font-weight: 400;458 color: #cfdfdf;459}460#share-status {461 position: absolute;462 top: 72px;463 left: 50%;464 transform: translateX(-50%);465 font-size: 12px;466 color: var(--mint);467 background: #0d1c29e8;468 border-radius: 8px;469 max-width: calc(100vw - 32px);470 text-align: center;471}472#share-status:not(:empty) {473 padding: 10px 14px;474}475#stats {476 position: fixed;477 bottom: 95px;478 left: 16px;479 z-index: 10;480 font: 10px/1.5 ui-monospace, monospace;481 color: #c8ddde;482 white-space: pre-wrap;483 max-width: calc(100vw - 32px);484}485#loading {486 position: fixed;487 inset: 0;488 z-index: 30;489 background: radial-gradient(ellipse at center, #1a343c, #0b1721 75%);490 display: flex;491 flex-direction: column;492 align-items: center;493 justify-content: center;494 gap: 14px;495 text-align: center;496 padding: 28px;497}498.loading-orb {499 width: 44px;500 height: 44px;501 border-radius: 50%;502 background: radial-gradient(circle at 30% 25%, #fff2dc, #f7ae85 48%, #ab596b);503 box-shadow: 0 10px 35px #f7ae8522;504 animation: art-float 1.5s ease-in-out infinite;505 margin-bottom: 15px;506}507#loading strong {508 font-size: 18px;509 font-weight: 600;510}511#loading > span {512 color: var(--muted);513 font-size: 12px;514}515#loading.failed {516 pointer-events: none;517 background: #0b1721e8;518 z-index: 9;519}520@media (max-width: 900px) {521 .menu-layout {522 gap: 24px;523 grid-template-columns: 1fr 1.2fr;524 }525 #seed {526 display: none;527 }528}529@media (max-width: 640px) {530 #menu {531 padding: 22px 22px 24px;532 }533 .menu-layout {534 display: block;535 padding: 32px 0 28px;536 min-height: auto;537 }538 .menu-art {539 display: none;540 }541 .menu-panel {542 max-width: 420px;543 }544 #menu h1 {545 font-size: 68px;546 }547 .run-topbar {548 top: max(14px, env(safe-area-inset-top));549 left: 14px;550 right: 14px;551 gap: 8px;552 }553 .run-identity {554 gap: 8px;555 flex-wrap: wrap;556 }557 .run-identity .wordmark {558 font-size: 18px;559 }560 #run-mode {561 display: none;562 }563 #hud .run-actions button {564 padding: 10px;565 font-size: 11px;566 }567 .control-dock {568 bottom: max(17px, env(safe-area-inset-bottom));569 gap: 0;570 padding: 5px;571 max-width: calc(100vw - 20px);572 }573 #hud .control-dock button {574 padding: 10px 7px;575 font-size: 10px;576 }577 .dock-divider {578 margin: 0 3px;579 }580 #fullscreen {581 display: none;582 }583 #controls-help summary {584 width: 27px;585 height: 27px;586 }587 .controls-card {588 right: -5px;589 width: min(290px, calc(100vw - 28px));590 }591 #paused-label {592 width: 90%;593 }594 #paused-label span {595 font-size: 11px;596 }597}598@media (max-height: 800px) and (min-width: 641px) {599 #menu {600 padding-top: 20px;601 }602 .menu-layout {603 padding: 16px 0;604 gap: 35px;605 }606 #menu h1 {607 font-size: 65px;608 }609 #menu fieldset {610 margin-bottom: 18px;611 }612 .seed-field {613 margin-bottom: 16px;614 }615}616@media (prefers-reduced-motion: reduce) {617 *,618 *::before,619 *::after {620 animation: none ;621 transition: none ;622 }623}624/* Sharing takes priority in the notification area. */625body:has(#share-status:not(:empty)) #milestone {626 visibility: hidden;627}628629@media (max-height: 800px) and (min-width: 641px) {630 .track-art {631 max-height: 68svh;632 }633 #menu fieldset {634 margin-bottom: 14px;635 }636 .menu-advanced {637 margin-top: 12px;638 }639}