:root{color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif;color:#e8e5dc;background:#171918;--amber:#e9b668;--muted:#aaa99f;--line:#e8e5dc26}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
#world{width:100vw;height:100vh;display:block}
header{position:absolute;top:32px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.brand{font-size:28px;font-weight:650;letter-spacing:-1px;color:inherit;text-decoration:none;pointer-events:auto}
.brand span{color:var(--amber)}
.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:6px}
.badge{font-size:10px;letter-spacing:1px;border-top:1px solid var(--line);padding:10px 0;color:var(--muted)}
.badge i{display:inline-block;width:4px;height:4px;background:var(--amber);margin:0 8px}
.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff9;font-size:19px;pointer-events:none}
.telemetry{position:absolute;right:48px;bottom:76px;width:230px;pointer-events:none;text-shadow:0 2px 6px #000c;font-variant-numeric:tabular-nums}
.telemetry #timer{font-size:46px;letter-spacing:-1.5px;line-height:1.1;font-weight:500;margin:0 0 15px;color:#f1ede2}
.speed-readout{display:flex;align-items:baseline;gap:12px}
.telemetry strong{font-size:29px;font-weight:400;min-width:3ch}
.telemetry span{font-size:9px;letter-spacing:1px;color:var(--muted)}
.telemetry p{font-size:11px;color:var(--muted);margin:10px 0;line-height:1.5}
.telemetry #best{color:var(--amber);letter-spacing:1px}
.telemetry #progress.invalid{color:#df9990}
.meter{width:100%;height:2px;background:#ffffff20;margin:10px 0}
.meter b{display:block;width:0;height:100%;background:var(--amber)}
.panel{position:absolute;width:430px;max-width:calc(100vw - 40px);top:50%;left:48px;transform:translateY(-50%);padding:28px 32px;background:#20221fed;border:1px solid var(--line);border-top:2px solid var(--amber);box-shadow:0 16px 60px #0005;max-height:calc(100dvh - 180px);overflow:auto}
.eyebrow{letter-spacing:2.5px;font-size:10px;color:var(--amber)}
h1{font-size:36px;font-weight:400;letter-spacing:-1px;margin:12px 0}
.panel p{line-height:1.6;font-size:13px;color:var(--muted)}
.panel b{color:#e8e5dc}
.menu-actions{display:grid;gap:3px;margin:22px 0}
.menu-actions button{font-size:19px;text-align:left;border:0;border-left:2px solid transparent;background:transparent;padding:10px 14px}
.menu-actions #play{color:var(--amber);border-left-color:var(--amber);background:#e9b6680d}
button,.import{font:inherit;font-size:11px;cursor:pointer;color:#e8e5dc;border:1px solid var(--line);background:#242723;padding:8px 10px;border-radius:0}
button:hover,.import:hover,.menu-actions button:hover{color:#171918;background:var(--amber)}
button:focus-visible,a:focus-visible,.import:focus-within{outline:2px solid var(--amber);outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
.controls{display:flex;flex-wrap:wrap;gap:9px 15px;font-size:10px;color:#d5d2c8}
.controls em{font-style:normal;color:var(--muted);margin-left:4px}
.panel .note{font-size:10px;margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.panel a{color:var(--muted);text-underline-offset:4px}
.panel a:hover{color:var(--amber)}
.panel nav[aria-label="Course options"]{font-size:11px;line-height:1.8}
.recording-actions{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
footer{position:absolute;bottom:0;left:0;right:0;padding:18px 48px;display:flex;justify-content:space-between;gap:16px;background:linear-gradient(transparent,#111511c9);font-size:10px;color:var(--muted)}
.pause-hint{white-space:nowrap;letter-spacing:2px}
.import input{position:absolute;width:1px;height:1px;opacity:0}
.hidden{display:none!important}
.playing header{display:none}
.playing .telemetry{left:48px;right:auto}
.playing footer #status{max-width:70%;opacity:.65}
@media(max-width:700px){header{top:20px;left:20px;right:20px}
.panel{left:20px;padding:20px 24px;max-height:calc(100dvh - 150px)}
h1{font-size:30px}
.telemetry{display:none}
.playing .telemetry{display:block;left:20px;bottom:64px;width:210px}
.telemetry #timer{font-size:40px}
footer{padding:16px 20px}
.badge{font-size:9px}
.menu-actions{margin:16px 0}
.menu-actions button{padding:8px 12px}
}

.credits-page{overflow:auto;background:#171918}
.credits-content{max-width:760px;margin:48px auto;padding:0 24px 48px;color:var(--muted);line-height:1.7}
.credits-content h1,.credits-content h2{color:#e8e5dc}
.credits-content h2{font-size:22px;font-weight:400;margin-top:32px}
.credits-content a{color:var(--amber);text-underline-offset:3px}
.credits-content section{border-top:1px solid var(--line);margin-top:24px}