*{box-sizing:border-box} :root{color-scheme:dark;--bg:#101013;--line:#35343c;--dim:#aaa6ae;--ink:#f4f0e9;--hot:#ff643f;--mono:ui-monospace,Consolas,monospace}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,"Segoe UI",sans-serif}.wrap{width:min(1080px,calc(100% - 64px));margin:auto}.mast,footer,.console-top,.strip{display:flex;align-items:center;justify-content:space-between}.mast{height:82px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;color:inherit;font-size:24px;font-weight:900;letter-spacing:-2px;text-decoration:none}.brand>span:not(.brand-icon),h1 span,h2 span{color:var(--hot)}.brand-icon{margin-right:9px;background:var(--hot);color:#191418;border-radius:6px;line-height:32px;width:32px;text-align:center;font-size:23px}.station,.kicker,.badge,footer,.strip,.records small{font-family:var(--mono)}.station,.kicker,.records small{font-size:11px;letter-spacing:.13em;font-weight:700}.station,.kicker,.hint,footer,.records small{color:var(--dim)}.station i,.kicker i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hot);vertical-align:1px;margin-right:7px}.home{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;padding:64px 0 50px}.kicker{margin:0}.dash{display:inline-block;vertical-align:middle;width:28px;height:2px;background:var(--hot);margin-right:8px}h1,h2{font-weight:850;letter-spacing:-.065em;line-height:.99;margin:24px 0}h1{font-size:clamp(64px,7.4vw,104px)}h1 em{font-style:normal;color:#dbd3c9}h2{font-size:clamp(42px,5vw,66px)}.intro{color:#c5c0c5;max-width:430px;line-height:1.6;margin:0 0 26px}.primary,.secondary,.play,.skip,.suggest button,summary{cursor:pointer}.primary,.secondary{font:inherit;font-weight:700;border:0;border-radius:7px;padding:14px 23px}.primary,.play{background:var(--hot);color:#1b1314}.primary:hover,.play:hover{background:#ff825f}.primary span{margin-right:12px}.secondary{background:#39353c;color:var(--ink)}button:disabled{opacity:.65;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #ffa78a;outline-offset:3px}.strip{justify-content:flex-start;gap:28px;border-block:1px solid var(--line);padding:18px 0;color:var(--dim);font-size:13px}.strip b{color:var(--ink)}.records{padding:20px 0;border-bottom:1px solid var(--line)}summary{display:flex;align-items:center;justify-content:space-between;font-weight:650;min-height:36px}summary:after{content:"+";margin-left:16px}.records[open] summary:after{content:"−"}.records small{margin-left:auto;font-size:10px}#scores{color:#c7c0c4}footer{font-size:11px;margin:28px auto!important;letter-spacing:.04em}.console{max-width:710px;margin:38px auto;padding:28px;border:1px solid var(--line);background:#19191e;border-radius:12px}.badge{border:1px solid #534345;border-radius:30px;padding:5px 14px;color:#ffb397;font-size:14px}.player{display:flex;align-items:center;gap:15px;border:1px solid var(--line);padding:16px;background:#24232a;border-radius:9px}.player>div{flex:1;font-weight:650}.player>b{font:14px var(--mono)}.play{border:none;border-radius:50%;width:52px;height:52px;font-size:20px;flex-shrink:0}.progress{display:block;background:#444148;height:4px;border-radius:3px;margin-top:8px}.progress i{display:block;background:var(--hot);height:100%;width:0}.hint,.notice{font-size:14px}.notice{color:#ffb397}.notice:empty{display:none}.console label{display:block;margin:24px 0 6px;font-weight:600}input{width:100%;min-height:48px;background:#101013;color:var(--ink);border:1px solid #58555c;padding:12px 15px;border-radius:7px;font:inherit}.suggest{list-style:none;margin:0;padding:0}.suggest button{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--line);padding:10px 12px;background:#25242a;color:var(--ink);text-align:left;font:inherit}.suggest button:hover{background:#353038}.suggest small{display:block;color:var(--dim)}.skip{margin-top:14px;color:var(--dim);background:none;border:0;min-height:44px;text-decoration:underline;font:inherit}.reveal{display:flex;align-items:center;gap:14px;margin:20px 0;padding:14px;border:1px solid #524144;border-radius:8px}.reveal img{border-radius:5px;object-fit:cover}.reveal div>*{display:block}.reveal strong{font-size:18px}.reveal span:not(.kicker),.reveal a{font-size:13px}.reveal a{color:#ffab8f}.actions{display:flex;gap:12px;flex-wrap:wrap}#connection{position:fixed;bottom:18px;left:5%;right:5%;padding:12px;background:#663925;color:white}
@media(max-width:670px){.wrap{width:calc(100% - 36px)}.mast{height:62px}.station{font-size:9px}.home{grid-template-columns:1fr;gap:25px;padding:34px 0 26px}.strip{gap:12px;flex-wrap:wrap;font-size:11px}.console{margin:20px 0;padding:15px}.player{padding:10px;gap:10px}.records small{font-size:8px}.reveal{align-items:flex-start}.actions button{width:100%}.intro{max-width:35ch}.primary{min-height:48px}}
.volume {
    display: grid;
    grid-template-columns: auto minmax(80px, 200px) 4ch;
    align-items: center;
    justify-content: end;
    gap: 12px;
    padding: 2px 4px;
    color: var(--dim);
    font-size: 14px;
}
.console .volume label { margin: 0; font-weight: 500; }
.volume output { text-align: right; font: 13px var(--mono); }
.volume input[type="range"] {
    appearance: none;
    --level: 20%;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    accent-color: var(--hot);
}
.volume input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--hot) var(--level), #47454d var(--level));
}
.volume input::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: var(--ink);
}
.volume input::-moz-range-track { height: 5px; border-radius: 5px; background: #47454d; }
.volume input::-moz-range-progress { height: 5px; background: var(--hot); }
.volume input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); }
.mast nav,.profile-head {display:flex;align-items:center;gap:18px;justify-content:space-between}
.nav-link,.text-btn {color:var(--ink);font:inherit;font-weight:650;text-underline-offset:4px}
.nav-link {display:inline-block;padding:10px 0}
.text-btn {border:0;background:none;text-decoration:underline;cursor:pointer;min-height:44px}
.account {max-width:780px;margin:42px auto}
.account h1 {font-size:clamp(52px,8vw,82px)}
.account h2 {font-size:clamp(26px,4vw,36px);margin:3px 0 16px}
.panel {padding:22px;margin:16px 0;background:#19191e;border:1px solid var(--line);border-radius:10px}
.account a.primary {display:inline-block;text-decoration:none;margin-right:15px}
.account .toggle {display:flex;align-items:center;gap:12px;min-height:44px}
.account .toggle input {width:19px;height:19px;min-height:0;accent-color:var(--hot)}
.account form.panel .primary {margin-top:16px}
@media(max-width:480px){.mast nav .station{display:none}.account{margin:26px auto}.panel{padding:16px}}

.tabs {display:flex;gap:8px;margin:18px auto 0}
.tab {display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;border:1px solid var(--line);border-radius:999px;color:var(--dim);text-decoration:none;font-weight:700;font-size:14px}
.tab:hover {color:var(--ink);border-color:#56535c}
.tab[aria-current="page"] {background:var(--hot);border-color:var(--hot);color:#1b1314}
.hero-art {width:100%;max-width:385px;height:auto;justify-self:end;border-radius:16px}
@media(max-width:670px){.tabs{gap:6px;margin-top:14px}.tab{flex:1;justify-content:center;padding:11px 10px;font-size:13px}.hero-art{max-width:235px;justify-self:center}}