:root{--ink:#080806;--card:#171510;--yellow:#f2c230;--orange:#f28c28;--cream:#fff3dc;--muted:#c6bfb1;--line:#51432c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% 10%,#292011 0,transparent 28%),var(--ink);color:var(--cream);font:16px/1.55 Manrope,Arial,sans-serif}
button,select{font:inherit}
a{color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.topbar{max-width:1180px;margin:auto;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px}
.brand img{width:250px;max-width:100%;height:auto;display:block}
.site-link{color:var(--yellow);font-weight:800;text-decoration:none;white-space:nowrap}
main{max-width:1180px;margin:auto;padding:0 28px 80px}
.intro{padding:46px 0 32px;max-width:940px}
.eyebrow{color:var(--yellow);font:800 15px/1.3 'Barlow Condensed',Arial,sans-serif;letter-spacing:.13em;margin:0 0 13px}
h1,h2,p{margin-top:0}
h1{font:800 clamp(42px,6vw,78px)/.99 'Barlow Condensed',Arial,sans-serif;letter-spacing:-.015em;text-transform:uppercase;margin-bottom:20px}
h1 span{color:var(--yellow)}
.intro>p:not(.eyebrow){max-width:660px;color:var(--muted);font-size:18px}
.intro .edition{font:800 14px Manrope,Arial,sans-serif;color:var(--orange)!important;letter-spacing:.02em;margin:18px 0 0}
.player{background:linear-gradient(135deg,#201b12,#13120f 70%);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,45px);box-shadow:0 24px 80px #0007}
.player-heading{display:flex;align-items:center;gap:12px;color:var(--yellow);font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.12em}
.player-heading p{margin:0}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px #f2c23024}
.player h2{font-size:clamp(26px,3.2vw,42px);line-height:1.18;letter-spacing:-.03em;max-width:850px;margin:22px 0 12px}
.summary{color:var(--muted);max-width:890px;font-size:16px;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.play-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 10px}
.play-actions button{min-height:54px;border-radius:14px;padding:12px 19px;font-weight:800}
.primary{background:var(--yellow);color:#12100b;border:1px solid var(--yellow);min-width:220px}
.secondary{background:transparent;color:var(--cream);border:1px solid var(--line)}
.text-button{background:none;border:0;color:var(--yellow)}
.play-actions [hidden],.install [hidden]{display:none}
.status{min-height:25px;color:var(--orange);font-size:14px;font-weight:700;margin:0 0 20px}
.settings{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:15px;flex-wrap:wrap}
.settings label{font-size:13px;color:var(--muted);font-weight:800;display:grid;gap:7px;min-width:170px}
.settings label[hidden]{display:none}
.settings select{min-height:45px;border:1px solid var(--line);border-radius:10px;background:#282216;color:var(--cream);padding:8px 32px 8px 12px;max-width:250px}
.play-note{font-size:13px;color:var(--muted);margin:18px 0 0}
.queue{padding:57px 0}
.queue-head{display:flex;justify-content:space-between;align-items:end;gap:18px}
.queue h2{font:800 clamp(27px,3vw,38px)/1.1 'Barlow Condensed',Arial,sans-serif;text-transform:uppercase;margin:0 0 21px}
.queue-head>span{color:var(--muted);font-weight:700;white-space:nowrap;margin-bottom:20px}
.queue ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.queue li{margin:0}
.queue li button{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;text-align:left;gap:15px;padding:19px 22px;border:1px solid #443a2a;background:#15130f;color:var(--cream);border-radius:16px;transition:border-color .2s,background .2s}
.queue li button:hover,.queue li button[aria-current="true"]{border-color:var(--yellow);background:#242014}
.queue li button:disabled{opacity:.68}
.number{font:800 27px 'Barlow Condensed',Arial,sans-serif;color:var(--yellow)}
.news-title{font-size:16px;line-height:1.35;font-weight:800}
.news-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.queue .loading{padding:22px;border:1px solid var(--line);border-radius:16px;color:var(--muted)}
.install{padding:26px 30px;border:1px solid var(--line);background:#171510;border-radius:22px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.install h2{font:800 28px 'Barlow Condensed',Arial,sans-serif;text-transform:uppercase;margin-bottom:4px}
.install p{margin:0;color:var(--muted);max-width:670px}
.install button{background:var(--yellow);color:var(--ink);border:0;border-radius:12px;padding:12px 20px;font-weight:800;white-space:nowrap}
footer{max-width:1180px;margin:auto;padding:30px 28px 45px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:20px}
footer a{color:var(--yellow);font-weight:800;text-decoration:none}
@media(max-width:650px){.topbar{padding:14px 19px}.brand img{width:180px}.site-link{font-size:13px}main{padding:0 18px 60px}.intro{padding:20px 0 14px}.intro .eyebrow{margin-bottom:8px}.intro h1{font-size:40px;margin-bottom:8px}.intro>p:not(.eyebrow):not(.edition){display:none}.intro .edition{font-size:13px;margin:8px 0 0}.player{padding:20px}.player h2{font-size:25px;margin:12px 0 8px}.play-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 10px}.primary{grid-column:1/-1;grid-row:1;width:100%}.secondary{width:100%}.text-button{grid-column:1/-1}.settings{padding-top:16px}.summary{margin-top:20px;padding-top:18px}.queue{padding:43px 0}.queue li button{grid-template-columns:34px minmax(0,1fr);padding:15px}.news-meta{grid-column:2;white-space:normal}.install,footer{display:block}.install button{margin-top:17px}.queue-head>span{font-size:13px}}
