:root{--gr:57,255,20;--bg:#050805;--bg2:#0b110b;--line:#16301a;--g:#39ff14;--g2:#b6ff9e;--txt:#e8f5e4;--dim:#7f957b;--red:#ff3b3b}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 'Barlow',system-ui,sans-serif}
body{background:radial-gradient(1200px 500px at 50% -120px,#0f2a0c 0,transparent 70%),var(--bg);min-height:100vh}
.wrap{max-width:1000px;margin:0 auto;padding:0 18px}
.top{border-bottom:1px solid var(--line);background:rgba(5,8,5,.9);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;gap:18px;padding-block:12px;flex-wrap:wrap}
.logo{text-decoration:none;display:flex;align-items:baseline;gap:10px}
.one{font:400 26px 'Press Start 2P',monospace;color:var(--g);text-shadow:0 0 14px rgba(var(--gr),.65)}
.rad{font:700 20px 'Barlow Condensed',sans-serif;letter-spacing:.34em;color:var(--txt)}
.tag{margin:0;font:600 15px 'Barlow Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--g2)}
.blink{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}
.onair{margin-left:auto;display:flex;align-items:center;gap:8px;font:700 12px 'Press Start 2P',monospace;color:var(--dim)}
.onair i{width:10px;height:10px;background:#333;display:block}.onair.on{color:var(--red)}.onair.on i{background:var(--red);box-shadow:0 0 10px var(--red);animation:bl 1.2s steps(2) infinite}
.player{margin:34px 0 22px;border:1px solid var(--line);background:linear-gradient(180deg,#0c150c,#070b07);padding:26px 24px 20px;position:relative;overflow:hidden}
.player::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(var(--gr),.035) 0 1px,transparent 1px 4px);pointer-events:none}
.eq{display:flex;align-items:flex-end;gap:5px;height:54px;margin-bottom:18px}
.eq i{flex:1;background:var(--g);height:6px;opacity:.55;box-shadow:0 0 8px rgba(var(--gr),.5)}
.eq.on i{animation:eq 1s ease-in-out infinite}
.eq.on i:nth-child(3n){animation-duration:.7s}.eq.on i:nth-child(4n){animation-duration:1.3s}.eq.on i:nth-child(5n){animation-delay:.2s}.eq.on i:nth-child(2n){animation-delay:.35s}
@keyframes eq{0%,100%{height:6px}50%{height:50px}}
.lab{font:400 10px 'Press Start 2P',monospace;color:var(--dim);letter-spacing:.1em}
.title{font:700 clamp(24px,4.4vw,40px)/1.15 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:8px 0 2px;color:#fff;overflow-wrap:anywhere}
.artist{color:var(--g2);font-weight:600;min-height:1.5em}
.bar{height:6px;background:#10200f;margin-top:16px}.fill{height:100%;width:0;background:var(--g);box-shadow:0 0 10px var(--g)}
.ctl{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap}
.play{width:78px;height:78px;border:0;background:var(--g);color:#031200;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 28px rgba(var(--gr),.45);transition:transform .1s}
.play:hover{transform:scale(1.04)}.play:active{transform:scale(.97)}.play svg{width:34px;height:34px;fill:currentColor}.play .ia{display:none}.play.on .ip{display:none}.play.on .ia{display:block}
.vol{display:flex;align-items:center;gap:12px;flex:1;min-width:230px}.vol span{font:400 11px 'Press Start 2P',monospace;color:var(--g)}.vol b{font:400 12px 'Press Start 2P',monospace;width:3.2ch;text-align:right;color:var(--g2)}
input[type=range]{flex:1;accent-color:var(--g);height:28px}
.hint{color:var(--dim);font-size:13px;margin:14px 0 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.card{border:1px solid var(--line);background:var(--bg2);padding:18px 20px}
h2{font:700 15px 'Barlow Condensed',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--g);margin:0 0 10px}
.list{list-style:none;margin:0;padding:0}.list li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid rgba(var(--gr),.1);font-size:15px}
.list li time{font:400 10px 'Press Start 2P',monospace;color:var(--dim);flex:none;width:10.6ch;white-space:nowrap;padding-top:4px}.list li span{min-width:0;overflow-wrap:anywhere}
.list li.now{color:var(--g)}.list.long{max-height:520px;overflow:auto}
.days{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.days button{background:transparent;border:1px solid var(--line);color:var(--dim);padding:7px 12px;cursor:pointer;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.days button.on{background:var(--g);color:#031200;border-color:var(--g)}
.note{font-size:12.5px;color:var(--dim);margin:0 0 8px}
footer{border-top:1px solid var(--line);margin-top:34px;padding-block:22px;color:var(--dim);font-size:13px}footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
#yt{position:fixed;left:-10000px;top:0;width:200px;height:200px;overflow:hidden;pointer-events:none}
@media(max-width:720px){.cols{grid-template-columns:1fr}.tag{display:none}.rad{letter-spacing:.2em}}
@media(prefers-reduced-motion:reduce){.eq.on i,.blink,.onair.on i{animation:none}}
.logo img{width:56px;height:56px;border-radius:12px;align-self:center;box-shadow:0 0 0 2px var(--g),0 0 18px rgba(var(--gr),.4)}.logo{align-items:center!important}.one{font-size:22px!important}
footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}footer a:hover{color:var(--fg,#fff)}

.savebtn{margin-top:10px;background:transparent;border:2px solid var(--g);color:var(--g);font:700 12px 'Press Start 2P',monospace;padding:11px 14px;cursor:pointer;letter-spacing:.04em;transition:background .15s,color .15s}
.savebtn:hover:not(:disabled){background:var(--g);color:#031200}
.savebtn.on{background:var(--g);color:#031200}
.savebtn:disabled{opacity:.35;cursor:default}
.saved .srow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.saved .srow .st{flex:1;min-width:0;overflow-wrap:anywhere}
.saved .sgo,.saved .sdel{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--g);background:transparent;text-decoration:none;cursor:pointer;font:inherit}
.saved .sgo:hover,.saved .sdel:hover{border-color:var(--g)}
#savedn{color:var(--dim)}


/* header: retro lettering, centred on one line, blinking underscore */
.top .wrap{flex-direction:row;justify-content:center;align-items:center;gap:6px 22px;position:relative;padding-block:12px;flex-wrap:wrap}
.logo{justify-content:center}
.tag{display:block!important;margin:0;text-align:center}
.onair{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin-left:0}
@media(max-width:900px){.onair{position:static;transform:none;margin:0}}
@media(max-width:720px){.rad{letter-spacing:.2em}.tag{font-size:14px}}
footer #credit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
footer .stk{display:inline-flex;text-decoration:none}footer .stk img{height:42px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

.themebtn,.skinbtn{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;background:transparent;border:2px solid var(--g);color:var(--g);font:400 10px 'Press Start 2P',monospace;padding:9px 11px;cursor:pointer;letter-spacing:.04em}
.themebtn i{width:12px;height:12px;background:var(--g);box-shadow:0 0 8px var(--g);display:block}
.themebtn:hover,.skinbtn:hover{background:var(--g);color:#031200}.themebtn:hover i{background:#031200;box-shadow:none}
@media(max-width:900px){.themebtn{position:static;transform:none}}

/* the BEATS head floats around the page; tap it to visit billylegal.com */
.bh{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.bhx{position:absolute;left:0;top:0;animation:bhx 19s linear infinite alternate}
.bhy{display:block;width:62px;pointer-events:auto;cursor:pointer;animation:bhy 13s linear infinite alternate;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.bhy img{display:block;width:100%;height:auto}
@keyframes bhx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 62px))}}
@keyframes bhy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 88px))}}
@media(prefers-reduced-motion:reduce){.bhx,.bhy{animation:none}}

/* floating Omarchy Store shuttle */
.sh{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.shx{position:absolute;left:0;top:0;animation:shx 29s linear infinite alternate;animation-delay:-11s}
.shy{display:block;width:96px;pointer-events:auto;cursor:pointer;animation:shy 21s linear infinite alternate;animation-delay:-7s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.shy img{display:block;width:100%;height:auto}
@keyframes shx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 96px))}}
@keyframes shy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 70px))}}
@media(prefers-reduced-motion:reduce){.shx,.shy{animation:none}}

#tapgate{position:fixed;inset:0;z-index:2147483000;background:radial-gradient(900px 500px at 50% 40%,#0f2a0c 0,#050805 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#tapgate .one{font-size:clamp(40px,12vw,84px)}#tapgate .rad{font-size:clamp(22px,6vw,44px);margin-left:14px}
#tapgate p{margin:0;font:400 clamp(14px,3.6vw,22px) 'Press Start 2P',monospace;color:var(--g2);letter-spacing:.08em;animation:bl 1.4s steps(2) infinite}
#tapgate img{width:min(46vw,260px);height:auto;filter:drop-shadow(0 0 24px rgba(var(--gr),.5))}
.list li .hb{flex:none;margin-left:auto;align-self:flex-start;width:34px;height:30px;background:transparent;border:1px solid var(--line);color:var(--g);font:700 16px/1 system-ui,sans-serif;cursor:pointer;padding:0}.list li .hb:hover{border-color:var(--g)}.list li .hb.on{background:var(--g);color:#031200;border-color:var(--g)}

.skinbtn{left:150px}
@media(max-width:900px){.skinbtn{left:auto}}
/* ================= SKINS (html[data-skin]) — retro is the default look above ================= */
/* --- stream: dark, rounded, album-art-forward streaming-app feel --- */
html[data-skin=stream]{--bg:#121212;--bg2:#181818!important;--line:#2a2a2a!important;--txt:#fff;--dim:#a7a7a7;--g2:#d9d9d9!important}
html[data-skin=stream] body{background:#121212}
html[data-skin=stream] *{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important}
html[data-skin=stream] .top{background:rgba(18,18,18,.92);border-bottom:0}
html[data-skin=stream] .one{text-shadow:none!important;font-weight:800;letter-spacing:-.02em;font-size:24px!important}html[data-skin=stream] .rad{font-weight:700;letter-spacing:.14em;font-size:15px}
html[data-skin=stream] .tag{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:14px}
html[data-skin=stream] .logo img{border-radius:10px;box-shadow:none}
html[data-skin=stream] .themebtn,html[data-skin=stream] .skinbtn{border:1px solid #555;color:#fff;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.04em;padding:8px 16px}
html[data-skin=stream] .themebtn i{border-radius:50%;box-shadow:none}
html[data-skin=stream] .themebtn:hover,html[data-skin=stream] .skinbtn:hover{background:#fff;color:#000;border-color:#fff}html[data-skin=stream] .themebtn:hover i{background:#000}
html[data-skin=stream] .onair{font-weight:700;font-size:12px;letter-spacing:.08em}html[data-skin=stream] .onair i{border-radius:50%}
html[data-skin=stream] .player{border:0;border-radius:18px;background:linear-gradient(165deg,rgba(var(--gr),.38),#181818 58%);padding:30px 28px 24px}
html[data-skin=stream] .player::before{display:none}
html[data-skin=stream] .eq{height:44px;gap:4px}html[data-skin=stream] .eq i{border-radius:3px;box-shadow:none;opacity:.8;background:#fff}
html[data-skin=stream] .lab{font-weight:700;font-size:11px;letter-spacing:.14em;color:#d0d0d0}
html[data-skin=stream] .title{text-transform:none;font-weight:800;font-size:clamp(28px,5vw,52px);line-height:1.08;letter-spacing:-.02em}
html[data-skin=stream] .artist{color:#c8c8c8;font-weight:500;font-size:17px}
html[data-skin=stream] .savebtn{border:1px solid #888;color:#fff;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.02em;padding:9px 18px}
html[data-skin=stream] .savebtn:hover:not(:disabled){background:transparent;border-color:#fff;color:#fff}html[data-skin=stream] .savebtn.on{background:var(--g);border-color:var(--g);color:#000}
html[data-skin=stream] .bar{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}html[data-skin=stream] .fill{border-radius:2px;background:#fff;box-shadow:none}
html[data-skin=stream] .play{width:66px;height:66px;border-radius:50%;background:#fff;color:#000;box-shadow:none}html[data-skin=stream] .play:hover{transform:scale(1.07)}
html[data-skin=stream] .vol span,html[data-skin=stream] .vol b{font-weight:700;font-size:11px;color:#bbb}html[data-skin=stream] .vol input{accent-color:#fff}
html[data-skin=stream] .card{border:0;border-radius:14px;padding:22px 22px 14px}
html[data-skin=stream] h2{font-size:20px;font-weight:800;letter-spacing:-.01em;text-transform:none}
html[data-skin=stream] .list li{border-bottom:0;border-radius:8px;padding:10px 10px;align-items:center}html[data-skin=stream] .list li:hover{background:#262626}
html[data-skin=stream] .list li time{font-weight:500;font-size:12px;color:#a7a7a7;width:9ch}
html[data-skin=stream] .list li.now{color:var(--g)}html[data-skin=stream] .list li .hb{border:0;border-radius:50%;height:32px;width:32px}
html[data-skin=stream] .days button{background:#2a2a2a;border:0;border-radius:999px;color:#fff;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;padding:8px 14px}html[data-skin=stream] .days button.on{background:#fff;color:#000}
html[data-skin=stream] footer{border-top:1px solid #2a2a2a}

/* --- glass: light, airy, frosted cards --- */
html[data-skin=glass]{--bg:#f2f2f7;--bg2:#fff!important;--line:#e4e4ea!important;--txt:#1c1c1e;--dim:#6e6e73;--g:#ff3b5c;--gr:255,59,92;--g2:#3a3a3c!important;--red:#ff3b5c}
html[data-skin=glass] body{background:linear-gradient(180deg,#fafafc,#ecebf3);color:#1c1c1e}
html[data-skin=glass] *{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important}
html[data-skin=glass] .top{background:rgba(255,255,255,.72);border-bottom:1px solid #e4e4ea;backdrop-filter:blur(18px) saturate(1.4)}
html[data-skin=glass] .one{color:var(--g);text-shadow:none!important;font-weight:800;font-size:24px!important;letter-spacing:-.02em}html[data-skin=glass] .rad{color:#1c1c1e;font-weight:700;letter-spacing:.14em;font-size:15px}
html[data-skin=glass] .tag{color:#6e6e73;text-transform:none;font-weight:500;letter-spacing:.02em;font-size:14px}
html[data-skin=glass] .logo img{border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
html[data-skin=glass] .themebtn,html[data-skin=glass] .skinbtn{border:1px solid #d1d1d6;color:#1c1c1e;background:rgba(255,255,255,.7);border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.04em;padding:8px 16px}
html[data-skin=glass] .themebtn i{display:none}
html[data-skin=glass] .themebtn:hover,html[data-skin=glass] .skinbtn:hover{background:#1c1c1e;color:#fff;border-color:#1c1c1e}
html[data-skin=glass] .onair{font-weight:700;font-size:12px;letter-spacing:.08em;color:#6e6e73}html[data-skin=glass] .onair i{border-radius:50%;background:#c7c7cc}html[data-skin=glass] .onair.on{color:var(--g)}html[data-skin=glass] .onair.on i{background:var(--g);box-shadow:none}
html[data-skin=glass] .player{border:0;border-radius:26px;background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(30,30,60,.12);padding:32px 30px 26px;backdrop-filter:blur(20px)}
html[data-skin=glass] .player::before{display:none}
html[data-skin=glass] .eq{height:44px;gap:4px}html[data-skin=glass] .eq i{border-radius:3px;box-shadow:none;background:var(--g);opacity:.75}
html[data-skin=glass] .lab{font-weight:700;font-size:11px;letter-spacing:.14em;color:#8e8e93}
html[data-skin=glass] .title{color:#1c1c1e;text-transform:none;font-weight:800;font-size:clamp(28px,5vw,50px);line-height:1.08;letter-spacing:-.025em}
html[data-skin=glass] .artist{color:var(--g);font-weight:600;font-size:17px}
html[data-skin=glass] .savebtn{border:1px solid #d1d1d6;color:#1c1c1e;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.02em;padding:9px 18px}
html[data-skin=glass] .savebtn:hover:not(:disabled){background:#f2f2f7;color:#1c1c1e}html[data-skin=glass] .savebtn.on{background:var(--g);border-color:var(--g);color:#fff}
html[data-skin=glass] .bar{height:5px;border-radius:3px;background:#e5e5ea}html[data-skin=glass] .fill{border-radius:3px;background:var(--g);box-shadow:none}
html[data-skin=glass] .play{width:68px;height:68px;border-radius:50%;background:var(--g);color:#fff;box-shadow:0 8px 24px rgba(var(--gr),.35)}
html[data-skin=glass] .vol span,html[data-skin=glass] .vol b{font-weight:700;font-size:11px;color:#8e8e93}html[data-skin=glass] .vol input{accent-color:var(--g)}
html[data-skin=glass] .hint,html[data-skin=glass] .note{color:#8e8e93}
html[data-skin=glass] .card{border:0;border-radius:20px;background:rgba(255,255,255,.8);box-shadow:0 8px 30px rgba(30,30,60,.08);padding:22px 22px 14px}
html[data-skin=glass] h2{color:#1c1c1e;font-size:20px;font-weight:800;letter-spacing:-.01em;text-transform:none}
html[data-skin=glass] .list li{border-bottom:1px solid #eeeef2;padding:11px 4px;align-items:center;color:#1c1c1e}
html[data-skin=glass] .list li time{font-weight:500;font-size:12px;color:#8e8e93;width:9ch}html[data-skin=glass] .list li.now{color:var(--g)}
html[data-skin=glass] .list li .hb{border:1px solid #e4e4ea;border-radius:50%;height:32px;width:32px;color:var(--g)}html[data-skin=glass] .list li .hb.on{background:var(--g);color:#fff}
html[data-skin=glass] .days button{background:#efeff4;border:0;border-radius:999px;color:#1c1c1e;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;padding:8px 14px}html[data-skin=glass] .days button.on{background:var(--g);color:#fff}
html[data-skin=glass] footer{border-top:1px solid #e4e4ea;color:#8e8e93}html[data-skin=glass] footer a{color:#6e6e73}

/* --- mono: pure black & white, sharp, minimal --- */
html[data-skin=mono]{--bg:#000;--bg2:#000!important;--line:#3a3a3a!important;--txt:#fff;--dim:#9a9a9a;--g:#fff!important;--gr:255,255,255!important;--g2:#fff!important;--red:#fff}
html[data-skin=mono] body{background:#000}
html[data-skin=mono] *{font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif!important}
html[data-skin=mono] .top{background:#000;border-bottom:1px solid #fff}
html[data-skin=mono] .one{text-shadow:none!important;font-weight:700;font-size:26px!important;letter-spacing:.04em}html[data-skin=mono] .rad{letter-spacing:.4em;font-weight:500}
html[data-skin=mono] .tag{letter-spacing:.3em;font-size:13px}
html[data-skin=mono] .logo img{border-radius:0;box-shadow:none;filter:grayscale(1)}
html[data-skin=mono] .themebtn,html[data-skin=mono] .skinbtn{border:1px solid #fff;color:#fff;border-radius:0;font-weight:700;font-size:13px;letter-spacing:.2em;padding:8px 14px}
html[data-skin=mono] .themebtn i{display:none}html[data-skin=mono] .themebtn:hover,html[data-skin=mono] .skinbtn:hover{background:#fff;color:#000}
html[data-skin=mono] .onair{font-weight:700;font-size:13px;letter-spacing:.2em}html[data-skin=mono] .onair i{background:#555;box-shadow:none}html[data-skin=mono] .onair.on i{background:#fff;box-shadow:none}
html[data-skin=mono] .player{border:1px solid #fff;background:#000;border-radius:0;padding:30px 28px 24px}html[data-skin=mono] .player::before{display:none}
html[data-skin=mono] .eq{height:40px;gap:3px}html[data-skin=mono] .eq i{background:#fff;box-shadow:none;opacity:1;border-radius:0}
html[data-skin=mono] .lab{font-weight:700;font-size:12px;letter-spacing:.4em;color:#9a9a9a}
html[data-skin=mono] .title{font-weight:700;font-size:clamp(30px,6vw,60px);line-height:1;letter-spacing:.01em}html[data-skin=mono] .artist{color:#d6d6d6;font-weight:500;font-size:18px;letter-spacing:.12em;text-transform:uppercase}
html[data-skin=mono] .savebtn{border:1px solid #fff;color:#fff;border-radius:0;font-weight:700;font-size:13px;letter-spacing:.2em;padding:10px 16px;text-transform:uppercase}
html[data-skin=mono] .savebtn:hover:not(:disabled),html[data-skin=mono] .savebtn.on{background:#fff;color:#000}
html[data-skin=mono] .bar{height:2px;background:#3a3a3a}html[data-skin=mono] .fill{background:#fff;box-shadow:none}
html[data-skin=mono] .play{width:70px;height:70px;border-radius:0;background:#fff;color:#000;box-shadow:none}
html[data-skin=mono] .vol span,html[data-skin=mono] .vol b{font-weight:700;font-size:13px;letter-spacing:.2em;color:#fff}html[data-skin=mono] .vol input{accent-color:#fff}
html[data-skin=mono] .card{border:1px solid #3a3a3a;border-radius:0;padding:20px 22px 12px}
html[data-skin=mono] h2{font-size:22px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
html[data-skin=mono] .list li{border-bottom:1px solid #222;padding:10px 0;align-items:center}html[data-skin=mono] .list li:hover{background:#111}
html[data-skin=mono] .list li time{font-weight:500;font-size:13px;letter-spacing:.1em;color:#9a9a9a;width:9ch}html[data-skin=mono] .list li.now{color:#000;background:#fff;padding-left:8px;padding-right:8px}html[data-skin=mono] .list li.now time{color:#000}
html[data-skin=mono] .list li .hb{border:1px solid #fff;border-radius:0;height:30px;width:32px}html[data-skin=mono] .list li .hb.on{background:#fff;color:#000}html[data-skin=mono] .list li.now .hb{border-color:#000;color:#000}
html[data-skin=mono] .days button{background:transparent;border:1px solid #555;border-radius:0;color:#fff;font-weight:700;font-size:13px;letter-spacing:.14em;padding:7px 12px}html[data-skin=mono] .days button.on{background:#fff;color:#000;border-color:#fff}
html[data-skin=mono] footer{border-top:1px solid #fff}
html[data-skin=mono] .bh img,html[data-skin=mono] .sh img,html[data-skin=mono] .stk img{filter:grayscale(1) contrast(1.1)}

/* ============ more skins ============ */
/* --- synth: neon sunset, grid floor, glowing pink & cyan --- */
html[data-skin=synth]{--bg:#12002b;--bg2:rgba(38,10,68,.72)!important;--line:#7a2fb8!important;--txt:#ffe9ff;--dim:#c3a4e6;--g:#ff3df2;--gr:255,61,242;--g2:#4de8ff;--red:#ff3df2}
html[data-skin=synth] body{background:linear-gradient(180deg,transparent 55%,rgba(var(--gr),.28)),repeating-linear-gradient(90deg,rgba(var(--gr),.1) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(var(--gr),.1) 0 1px,transparent 1px 64px),linear-gradient(180deg,#0e0023 0,#2e0b57 55%,#7b1b8f 100%);background-attachment:fixed}
html[data-skin=synth] *{font-family:'Orbitron','Barlow',system-ui,sans-serif!important}
html[data-skin=synth] .top{background:rgba(18,0,43,.8);border-bottom:1px solid #7a2fb8;box-shadow:0 4px 30px rgba(var(--gr),.25)}
html[data-skin=synth] .one{color:var(--g);font-weight:900;font-size:24px!important;text-shadow:0 0 10px var(--g),0 0 28px var(--g)!important}html[data-skin=synth] .rad{color:var(--g2);font-weight:700;letter-spacing:.3em;text-shadow:0 0 10px var(--g2);font-size:16px}
html[data-skin=synth] .tag{color:#ffe9ff;letter-spacing:.2em;font-size:12px}
html[data-skin=synth] .logo img{border-radius:10px;box-shadow:0 0 0 2px var(--g),0 0 22px var(--g)}
html[data-skin=synth] .themebtn,html[data-skin=synth] .skinbtn{border:1px solid var(--g2);color:var(--g2);border-radius:2px;font-weight:700;font-size:10px;letter-spacing:.2em;box-shadow:0 0 12px rgba(var(--gr),.4),inset 0 0 8px rgba(var(--gr),.25);padding:9px 12px}
html[data-skin=synth] .themebtn i{display:none}html[data-skin=synth] .themebtn:hover,html[data-skin=synth] .skinbtn:hover{background:var(--g2);color:#12002b}
html[data-skin=synth] .onair{font-size:11px;letter-spacing:.2em}html[data-skin=synth] .onair i{background:#7a2fb8;box-shadow:none}html[data-skin=synth] .onair.on{color:var(--g)}html[data-skin=synth] .onair.on i{background:var(--g);box-shadow:0 0 12px var(--g)}
html[data-skin=synth] .player{border:1px solid var(--g);border-radius:4px;background:linear-gradient(180deg,rgba(60,10,95,.78),rgba(20,0,48,.82));box-shadow:0 0 40px rgba(var(--gr),.28),inset 0 0 40px rgba(var(--gr),.08);backdrop-filter:blur(6px)}
html[data-skin=synth] .player::before{display:none}
html[data-skin=synth] .eq i{background:linear-gradient(0deg,var(--g),var(--g2));box-shadow:0 0 12px rgba(var(--gr),.7);opacity:.95;border-radius:2px}
html[data-skin=synth] .lab{color:var(--g2);font-size:10px;letter-spacing:.35em}
html[data-skin=synth] .title{font-weight:900;font-size:clamp(24px,4.6vw,44px);letter-spacing:.04em;background:linear-gradient(90deg,var(--g2),var(--g) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(var(--gr),.55))}
html[data-skin=synth] .artist{color:#ffe9ff;font-weight:700;letter-spacing:.12em;font-size:15px}
html[data-skin=synth] .savebtn{border:1px solid var(--g);color:var(--g);border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.14em;box-shadow:0 0 12px rgba(var(--gr),.4);padding:11px 14px}
html[data-skin=synth] .savebtn:hover:not(:disabled),html[data-skin=synth] .savebtn.on{background:var(--g);color:#12002b}
html[data-skin=synth] .bar{background:rgba(255,255,255,.12);height:5px}html[data-skin=synth] .fill{background:linear-gradient(90deg,var(--g2),var(--g));box-shadow:0 0 12px var(--g)}
html[data-skin=synth] .play{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--g),#7a2fb8);color:#fff;box-shadow:0 0 28px var(--g),0 0 60px rgba(var(--gr),.4)}
html[data-skin=synth] .vol span,html[data-skin=synth] .vol b{font-size:10px;color:var(--g2);font-weight:700}html[data-skin=synth] .vol input{accent-color:var(--g)}
html[data-skin=synth] .card{border:1px solid #7a2fb8;border-radius:4px;box-shadow:0 0 24px rgba(var(--gr),.14);backdrop-filter:blur(6px)}
html[data-skin=synth] h2{color:var(--g2);font-size:14px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;text-shadow:0 0 10px rgba(var(--gr),.7)}
html[data-skin=synth] .list li{border-bottom:1px solid rgba(122,47,184,.4);align-items:center}html[data-skin=synth] .list li time{color:var(--g2);font-size:10px;font-weight:700}html[data-skin=synth] .list li.now{color:var(--g);text-shadow:0 0 10px rgba(var(--gr),.8)}
html[data-skin=synth] .list li .hb{border:1px solid var(--g);border-radius:2px;color:var(--g)}html[data-skin=synth] .list li .hb.on{background:var(--g);color:#12002b}
html[data-skin=synth] .days button{border:1px solid #7a2fb8;border-radius:2px;color:#ffe9ff;font-size:11px;font-weight:700;letter-spacing:.14em}html[data-skin=synth] .days button.on{background:var(--g);border-color:var(--g);color:#12002b}
html[data-skin=synth] footer{border-top:1px solid #7a2fb8}

/* --- vinyl: warm wood, cream type, the play button is a spinning record --- */
html[data-skin=vinyl]{--bg:#1b1410;--bg2:#241a14!important;--line:#4d3829!important;--txt:#f4e6d0;--dim:#b09a82;--g:#e8a33d;--gr:232,163,61;--g2:#f4d28c;--red:#e8643d}
html[data-skin=vinyl] body{background:radial-gradient(1100px 600px at 50% -120px,#43291a,transparent 70%),#1b1410}
html[data-skin=vinyl] *{font-family:'Barlow',system-ui,sans-serif!important}
html[data-skin=vinyl] .one,html[data-skin=vinyl] .title,html[data-skin=vinyl] h2,html[data-skin=vinyl] .rad{font-family:'Fraunces',Georgia,serif!important}
html[data-skin=vinyl] .top{background:repeating-linear-gradient(90deg,#3a2415 0 2px,#33200f 2px 5px,#3d2716 5px 7px);border-bottom:3px solid #1b1410;box-shadow:0 4px 18px rgba(0,0,0,.5)}
html[data-skin=vinyl] .one{color:var(--g2);font-style:italic;font-weight:700;font-size:26px!important;text-shadow:0 2px 0 #000!important}html[data-skin=vinyl] .rad{font-style:italic;font-weight:700;letter-spacing:.08em;font-size:18px;color:#f4e6d0}
html[data-skin=vinyl] .tag{text-transform:none;font-weight:500;letter-spacing:.04em;font-style:italic;color:#e8c98a}
html[data-skin=vinyl] .logo img{border-radius:50%;box-shadow:0 0 0 3px var(--g),0 0 0 6px #111}
html[data-skin=vinyl] .themebtn,html[data-skin=vinyl] .skinbtn{border:2px solid var(--g);color:var(--g2);border-radius:4px;font-weight:700;font-size:12px;letter-spacing:.14em;background:rgba(0,0,0,.25);padding:7px 12px}
html[data-skin=vinyl] .themebtn i{border-radius:50%;box-shadow:none}html[data-skin=vinyl] .themebtn:hover,html[data-skin=vinyl] .skinbtn:hover{background:var(--g);color:#1b1410}
html[data-skin=vinyl] .onair{font-size:12px;font-weight:700;letter-spacing:.14em}html[data-skin=vinyl] .onair i{border-radius:50%}
html[data-skin=vinyl] .player{border:2px solid #4d3829;border-radius:10px;background:linear-gradient(180deg,#2d2018,#1d140f);box-shadow:inset 0 0 0 4px #1b1410,inset 0 0 0 5px #4d3829,0 12px 36px rgba(0,0,0,.55);padding:30px 30px 24px}
html[data-skin=vinyl] .player::before{display:none}
html[data-skin=vinyl] .eq i{background:var(--g);box-shadow:none;opacity:.8;border-radius:3px}
html[data-skin=vinyl] .lab{font-weight:700;font-size:11px;letter-spacing:.3em;color:#b09a82}
html[data-skin=vinyl] .title{text-transform:none;font-weight:700;font-style:italic;font-size:clamp(28px,5vw,50px);line-height:1.08;color:#f4e6d0}
html[data-skin=vinyl] .artist{color:var(--g);font-weight:600;font-size:17px;letter-spacing:.04em}
html[data-skin=vinyl] .savebtn{border:2px solid var(--g);color:var(--g);border-radius:4px;font-size:13px;font-weight:700;letter-spacing:.1em;padding:9px 16px}
html[data-skin=vinyl] .savebtn:hover:not(:disabled),html[data-skin=vinyl] .savebtn.on{background:var(--g);color:#1b1410}
html[data-skin=vinyl] .bar{height:5px;border-radius:3px;background:#3a2a1f}html[data-skin=vinyl] .fill{background:var(--g);box-shadow:none;border-radius:3px}
html[data-skin=vinyl] .play{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,var(--g) 0 21%,#0b0b0b 22% 24%,#1d1d1d 25% 38%,#0b0b0b 39% 41%,#1d1d1d 42% 58%,#0b0b0b 59% 61%,#1a1a1a 62% 100%);color:#1b1410;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 3px #2a2a2a}
html[data-skin=vinyl] .play svg{width:26px;height:26px}
html[data-skin=vinyl] .play.on{animation:vspin 3.2s linear infinite}@keyframes vspin{to{transform:rotate(360deg)}}
html[data-skin=vinyl] .vol span,html[data-skin=vinyl] .vol b{font-size:12px;font-weight:700;letter-spacing:.14em;color:#e8c98a}html[data-skin=vinyl] .vol input{accent-color:var(--g)}
html[data-skin=vinyl] .card{border:2px solid #4d3829;border-radius:8px;box-shadow:inset 0 0 0 3px #1b1410,inset 0 0 0 4px #3a2a1f}
html[data-skin=vinyl] h2{color:var(--g2);font-style:italic;font-size:21px;font-weight:700;text-transform:none;letter-spacing:.02em}
html[data-skin=vinyl] .list li{border-bottom:1px dashed #4d3829;align-items:center}html[data-skin=vinyl] .list li time{color:#b09a82;font-size:12px;font-weight:600;letter-spacing:.06em}html[data-skin=vinyl] .list li.now{color:var(--g)}
html[data-skin=vinyl] .list li .hb{border:1px solid #6b4f38;border-radius:50%;color:var(--g)}html[data-skin=vinyl] .list li .hb.on{background:var(--g);color:#1b1410}
html[data-skin=vinyl] .days button{border:1px solid #6b4f38;border-radius:4px;color:#e8c98a;font-weight:700;font-size:13px;letter-spacing:.1em}html[data-skin=vinyl] .days button.on{background:var(--g);border-color:var(--g);color:#1b1410}
html[data-skin=vinyl] footer{border-top:3px double #4d3829}

/* --- terminal: amber CRT, monospace, scanlines, blinking cursor --- */
html[data-skin=terminal]{--bg:#0a0700;--bg2:#0d0a02!important;--line:#5a3d00!important;--txt:var(--g);--dim:rgba(var(--gr),.62);--g:#ffb000;--gr:255,176,0;--g2:#ffd36a;--red:#ff7a00}
html[data-skin=terminal] body{background:radial-gradient(900px 500px at 50% 0,#1c1100,#0a0700 70%)}
html[data-skin=terminal] *{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace!important;text-shadow:0 0 6px rgba(var(--gr),.45)}
html[data-skin=terminal] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147482000;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
html[data-skin=terminal] .top{background:#0a0700;border-bottom:1px solid var(--g)}
html[data-skin=terminal] .one{font-weight:700;font-size:22px!important}html[data-skin=terminal] .rad{font-weight:500;letter-spacing:.3em;font-size:15px}
html[data-skin=terminal] .tag{text-transform:none;letter-spacing:.04em;font-size:13px}html[data-skin=terminal] .tag::before{content:'$ ';color:var(--dim)}
html[data-skin=terminal] .logo img{border-radius:0;box-shadow:0 0 0 1px var(--g);filter:sepia(1) saturate(3) hue-rotate(-15deg)}
html[data-skin=terminal] .themebtn,html[data-skin=terminal] .skinbtn{border:1px solid var(--g);color:var(--g);border-radius:0;font-weight:700;font-size:12px;letter-spacing:.1em;padding:8px 12px}
html[data-skin=terminal] .themebtn i{display:none}html[data-skin=terminal] .themebtn:hover,html[data-skin=terminal] .skinbtn:hover{background:var(--g);color:#0a0700;text-shadow:none}
html[data-skin=terminal] .onair{font-size:12px;font-weight:700;letter-spacing:.1em}html[data-skin=terminal] .onair i{border-radius:0;box-shadow:none}
html[data-skin=terminal] .player{border:1px solid var(--g);border-radius:0;background:#0d0a02;box-shadow:0 0 24px rgba(var(--gr),.12),inset 0 0 30px rgba(var(--gr),.05)}html[data-skin=terminal] .player::before{display:none}
html[data-skin=terminal] .eq{height:40px;gap:3px}html[data-skin=terminal] .eq i{border-radius:0;background:repeating-linear-gradient(0deg,var(--g) 0 4px,transparent 4px 6px);box-shadow:none;opacity:.9}
html[data-skin=terminal] .lab{font-weight:700;font-size:11px;letter-spacing:.2em}html[data-skin=terminal] .lab::before{content:'[ ';}html[data-skin=terminal] .lab::after{content:' ]'}
html[data-skin=terminal] .title{text-transform:uppercase;font-weight:700;font-size:clamp(22px,4.2vw,40px);letter-spacing:.02em;color:var(--g2)}html[data-skin=terminal] .title::before{content:'> ';color:var(--dim)}
html[data-skin=terminal] .artist{color:var(--g);font-weight:500;font-size:16px}html[data-skin=terminal] .artist::after{content:'\2588';margin-left:6px;animation:bl 1s steps(2) infinite}
html[data-skin=terminal] .savebtn{border:1px solid var(--g);color:var(--g);border-radius:0;font-size:12px;font-weight:700;letter-spacing:.1em;padding:10px 14px}
html[data-skin=terminal] .savebtn:hover:not(:disabled),html[data-skin=terminal] .savebtn.on{background:var(--g);color:#0a0700;text-shadow:none}
html[data-skin=terminal] .bar{height:10px;background:repeating-linear-gradient(90deg,#2a1c00 0 6px,transparent 6px 8px)}html[data-skin=terminal] .fill{background:repeating-linear-gradient(90deg,var(--g) 0 6px,transparent 6px 8px);box-shadow:none}
html[data-skin=terminal] .play{width:70px;height:70px;border-radius:0;background:transparent;color:var(--g);border:2px solid var(--g);box-shadow:0 0 14px rgba(var(--gr),.35)}html[data-skin=terminal] .play:hover{background:var(--g);color:#0a0700}
html[data-skin=terminal] .vol span,html[data-skin=terminal] .vol b{font-size:12px;font-weight:700}html[data-skin=terminal] .vol input{accent-color:var(--g)}
html[data-skin=terminal] .card{border:1px solid #5a3d00;border-radius:0}
html[data-skin=terminal] h2{font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}html[data-skin=terminal] h2::before{content:'## ';color:var(--dim)}
html[data-skin=terminal] .list li{border-bottom:1px dashed #3a2800;align-items:center}html[data-skin=terminal] .list li time{font-size:12px;font-weight:500;color:var(--dim)}html[data-skin=terminal] .list li.now{background:var(--g);color:#0a0700;text-shadow:none;padding:0 6px}html[data-skin=terminal] .list li.now time{color:#0a0700}
html[data-skin=terminal] .list li .hb{border:1px solid var(--g);border-radius:0;color:var(--g)}html[data-skin=terminal] .list li .hb.on{background:var(--g);color:#0a0700}html[data-skin=terminal] .list li.now .hb{border-color:#0a0700;color:#0a0700}
html[data-skin=terminal] .days button{border:1px solid #5a3d00;border-radius:0;color:var(--g);font-size:12px;font-weight:700;letter-spacing:.06em}html[data-skin=terminal] .days button.on{background:var(--g);color:#0a0700;border-color:var(--g);text-shadow:none}
html[data-skin=terminal] footer{border-top:1px solid var(--g)}

/* --- brutal: loud poster look, thick black outlines, hard offset shadows --- */
html[data-skin=brutal]{--bg:#fff3c4;--bg2:#fff!important;--line:#000!important;--txt:#000;--dim:#3d3d3d;--g:#ff5c39;--gr:255,92,57;--g2:#000!important;--red:#ff5c39}
html[data-skin=brutal] body{background:#fff3c4;color:#000}
html[data-skin=brutal] *{font-family:'Barlow',system-ui,sans-serif!important}
html[data-skin=brutal] .one,html[data-skin=brutal] .title,html[data-skin=brutal] h2,html[data-skin=brutal] .rad{font-family:'Archivo Black','Barlow',sans-serif!important}
html[data-skin=brutal] .top{background:#ffd23f;border-bottom:4px solid #000;backdrop-filter:none}
html[data-skin=brutal] .one{color:#000;font-size:26px!important;text-shadow:3px 3px 0 var(--g)!important;letter-spacing:-.01em}html[data-skin=brutal] .rad{color:#000;font-size:18px;letter-spacing:.1em}
html[data-skin=brutal] .tag{color:#000;text-transform:uppercase;font-weight:800;letter-spacing:.1em;font-size:13px}
html[data-skin=brutal] .logo img{border-radius:0;box-shadow:4px 4px 0 #000;border:3px solid #000}
html[data-skin=brutal] .themebtn,html[data-skin=brutal] .skinbtn{background:#fff;border:3px solid #000;color:#000;border-radius:0;font-weight:900;font-size:13px;letter-spacing:.08em;box-shadow:4px 4px 0 #000;padding:6px 12px}
html[data-skin=brutal] .themebtn i{display:none}html[data-skin=brutal] .themebtn:hover,html[data-skin=brutal] .skinbtn:hover{background:var(--g);color:#000}
html[data-skin=brutal] .onair{font-weight:900;font-size:13px;letter-spacing:.1em;color:#000}html[data-skin=brutal] .onair i{border:2px solid #000;background:#fff}html[data-skin=brutal] .onair.on i{background:var(--g)}
html[data-skin=brutal] .player{border:4px solid #000;border-radius:0;background:#7ee0ff;box-shadow:10px 10px 0 #000;padding:28px 26px 22px}html[data-skin=brutal] .player::before{display:none}
html[data-skin=brutal] .eq{height:48px}html[data-skin=brutal] .eq i{background:#000;box-shadow:none;opacity:1;border-radius:0}
html[data-skin=brutal] .lab{color:#000;font-weight:900;font-size:12px;letter-spacing:.2em;background:#fff;display:inline-block;border:2px solid #000;padding:2px 8px}
html[data-skin=brutal] .title{color:#000;text-transform:uppercase;font-size:clamp(26px,5vw,50px);line-height:1.02;letter-spacing:-.01em;margin-top:14px}
html[data-skin=brutal] .artist{color:#000;font-weight:800;font-size:18px;background:#ffd23f;display:inline-block;padding:0 8px;border:2px solid #000;min-height:0}html[data-skin=brutal] .artist:empty{display:none}
html[data-skin=brutal] .savebtn{background:#fff;border:3px solid #000;color:#000;border-radius:0;font-weight:900;font-size:13px;letter-spacing:.06em;box-shadow:4px 4px 0 #000;padding:9px 14px;display:block}
html[data-skin=brutal] .savebtn:hover:not(:disabled){background:#ffd23f;color:#000}html[data-skin=brutal] .savebtn.on{background:var(--g);color:#000}
html[data-skin=brutal] .bar{height:14px;background:#fff;border:3px solid #000}html[data-skin=brutal] .fill{background:var(--g);box-shadow:none}
html[data-skin=brutal] .play{width:80px;height:80px;border-radius:0;background:var(--g);color:#000;border:4px solid #000;box-shadow:6px 6px 0 #000}html[data-skin=brutal] .play:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 #000}
html[data-skin=brutal] .vol span,html[data-skin=brutal] .vol b{font-weight:900;font-size:13px;letter-spacing:.1em;color:#000}html[data-skin=brutal] .vol input{accent-color:#000}
html[data-skin=brutal] .hint{color:#000;font-weight:600}html[data-skin=brutal] .note{color:#3d3d3d;font-weight:600}
html[data-skin=brutal] .card{border:4px solid #000;border-radius:0;background:#fff;box-shadow:8px 8px 0 #000;padding:20px 22px 14px}
html[data-skin=brutal] h2{color:#000;font-size:22px;text-transform:uppercase;letter-spacing:0}
html[data-skin=brutal] .list li{border-bottom:2px solid #000;align-items:center;color:#000}html[data-skin=brutal] .list li time{color:#000;font-weight:800;font-size:12px}html[data-skin=brutal] .list li.now{background:#ffd23f}
html[data-skin=brutal] .list li .hb{background:#fff;border:2px solid #000;border-radius:0;color:#000;height:30px}html[data-skin=brutal] .list li .hb.on{background:var(--g)}
html[data-skin=brutal] .days button{background:#fff;border:3px solid #000;border-radius:0;color:#000;font-weight:900;font-size:13px;letter-spacing:.04em;box-shadow:3px 3px 0 #000}html[data-skin=brutal] .days button.on{background:var(--g);color:#000}
html[data-skin=brutal] footer{border-top:4px solid #000;color:#000;font-weight:600}html[data-skin=brutal] footer a{color:#000}

/* ============ skins 9-12 ============ */
/* --- aegean: Greek-islands blue & white --- */
html[data-skin=aegean]{--bg:#f4f9ff;--bg2:#fff!important;--line:#c4dcf6!important;--txt:#0b2a55;--dim:#4f6f99;--g:#0d5eaf;--gr:13,94,175;--g2:#0b2a55!important;--red:#e0483e}
html[data-skin=aegean] body{background:linear-gradient(180deg,#cfe8ff 0,#f4f9ff 360px,#fff);color:#0b2a55}
html[data-skin=aegean] *{font-family:'Barlow',system-ui,sans-serif!important}
html[data-skin=aegean] .one,html[data-skin=aegean] .title,html[data-skin=aegean] h2,html[data-skin=aegean] .rad{font-family:'Fraunces',Georgia,serif!important}
html[data-skin=aegean] .top{background:#fff;border-bottom:4px double var(--g);backdrop-filter:none}
html[data-skin=aegean] .one{color:var(--g);font-weight:700;font-size:26px!important;text-shadow:none!important}html[data-skin=aegean] .rad{color:#0b2a55;font-weight:700;letter-spacing:.14em;font-size:17px}
html[data-skin=aegean] .tag{color:#4f6f99;text-transform:none;font-style:italic;letter-spacing:.02em;font-size:14px}
html[data-skin=aegean] .logo img{border-radius:50%;box-shadow:0 0 0 3px var(--g)}
html[data-skin=aegean] .themebtn,html[data-skin=aegean] .skinbtn{background:#fff;border:2px solid var(--g);color:var(--g);border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.12em;padding:7px 14px}
html[data-skin=aegean] .themebtn i{display:none}html[data-skin=aegean] .themebtn:hover,html[data-skin=aegean] .skinbtn:hover{background:var(--g);color:#fff}
html[data-skin=aegean] .onair{font-size:12px;font-weight:700;letter-spacing:.12em;color:#4f6f99}html[data-skin=aegean] .onair i{border-radius:50%;background:#c4dcf6}html[data-skin=aegean] .onair.on{color:#e0483e}html[data-skin=aegean] .onair.on i{background:#e0483e;box-shadow:none}
html[data-skin=aegean] .player{border:2px solid var(--g);border-radius:8px;background:#fff;box-shadow:0 14px 40px rgba(var(--gr),.18);padding:34px 28px 24px}
html[data-skin=aegean] .player::before{inset:0 0 auto 0;height:10px;background:repeating-linear-gradient(90deg,var(--g) 0 26px,#fff 26px 52px);border-bottom:2px solid var(--g)}
html[data-skin=aegean] .eq i{background:var(--g);box-shadow:none;opacity:.85;border-radius:2px 2px 0 0}
html[data-skin=aegean] .lab{color:#4f6f99;font-weight:700;font-size:11px;letter-spacing:.3em}
html[data-skin=aegean] .title{color:#0b2a55;text-transform:none;font-weight:700;font-size:clamp(28px,5vw,50px);line-height:1.08}
html[data-skin=aegean] .artist{color:var(--g);font-weight:600;font-size:17px}
html[data-skin=aegean] .savebtn{border:2px solid var(--g);color:var(--g);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;padding:9px 18px}
html[data-skin=aegean] .savebtn:hover:not(:disabled),html[data-skin=aegean] .savebtn.on{background:var(--g);color:#fff}
html[data-skin=aegean] .bar{height:6px;border-radius:3px;background:#dcebfb}html[data-skin=aegean] .fill{background:var(--g);box-shadow:none;border-radius:3px}
html[data-skin=aegean] .play{width:70px;height:70px;border-radius:50%;background:var(--g);color:#fff;box-shadow:0 8px 22px rgba(var(--gr),.4),0 0 0 5px #fff,0 0 0 7px var(--g)}
html[data-skin=aegean] .vol span,html[data-skin=aegean] .vol b{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--g)}html[data-skin=aegean] .vol input{accent-color:var(--g)}
html[data-skin=aegean] .hint,html[data-skin=aegean] .note{color:#4f6f99}
html[data-skin=aegean] .card{border:2px solid #c4dcf6;border-radius:8px;box-shadow:0 8px 26px rgba(var(--gr),.1)}
html[data-skin=aegean] h2{color:var(--g);font-size:21px;font-weight:700;text-transform:none;letter-spacing:.01em}
html[data-skin=aegean] .list li{border-bottom:1px solid #e1eefb;align-items:center;color:#0b2a55}html[data-skin=aegean] .list li time{color:#4f6f99;font-size:12px;font-weight:600}html[data-skin=aegean] .list li.now{color:var(--g);font-weight:700}
html[data-skin=aegean] .list li .hb{border:1px solid #c4dcf6;border-radius:50%;color:var(--g)}html[data-skin=aegean] .list li .hb.on{background:var(--g);color:#fff}
html[data-skin=aegean] .days button{border:2px solid #c4dcf6;border-radius:999px;color:#0b2a55;font-weight:700;font-size:13px;letter-spacing:.04em;background:#fff}html[data-skin=aegean] .days button.on{background:var(--g);border-color:var(--g);color:#fff}
html[data-skin=aegean] footer{border-top:4px double var(--g);color:#4f6f99}

/* --- gameboy: four shades of green, chunky pixels --- */
html[data-skin=gameboy]{--ga:#0f380f;--gb:#306230;--gc:#8bac0f;--gd2:#9bbc0f;--bg:var(--gc);--bg2:var(--gd2)!important;--line:var(--gb)!important;--txt:var(--ga);--dim:var(--gb);--g:var(--ga)!important;--gr:15,56,15;--g2:var(--ga)!important;--red:var(--ga)}
html[data-skin=gameboy] body{background:var(--gc);color:var(--ga);font-size:11px;line-height:1.9}
html[data-skin=gameboy] *{font-family:'Press Start 2P',monospace!important;border-radius:0!important;text-shadow:none!important}
html[data-skin=gameboy] .top{background:var(--gd2);border-bottom:4px solid var(--ga);backdrop-filter:none}
html[data-skin=gameboy] .one{font-size:20px!important;color:var(--ga)}html[data-skin=gameboy] .rad{font-size:13px;letter-spacing:.2em;color:var(--ga)}
html[data-skin=gameboy] .tag{font-size:9px;letter-spacing:.1em;color:var(--gb);text-transform:uppercase}
html[data-skin=gameboy] .logo img{box-shadow:0 0 0 3px var(--ga);filter:grayscale(1) contrast(1.4) sepia(1) hue-rotate(40deg)}
html[data-skin=gameboy] .themebtn,html[data-skin=gameboy] .skinbtn{border:3px solid var(--ga);color:var(--ga);background:var(--gd2);font-size:9px;letter-spacing:.1em;padding:8px 10px;box-shadow:3px 3px 0 var(--gb)}
html[data-skin=gameboy] .themebtn i{display:none}html[data-skin=gameboy] .themebtn:hover,html[data-skin=gameboy] .skinbtn:hover{background:var(--ga);color:var(--gd2)}
html[data-skin=gameboy] .onair{font-size:9px;color:var(--gb)}html[data-skin=gameboy] .onair i{background:var(--gb);box-shadow:none}html[data-skin=gameboy] .onair.on{color:var(--ga)}html[data-skin=gameboy] .onair.on i{background:var(--ga)}
html[data-skin=gameboy] .player{border:4px solid var(--ga);background:var(--gd2);box-shadow:6px 6px 0 var(--gb)}html[data-skin=gameboy] .player::before{background:repeating-linear-gradient(0deg,rgba(var(--ga-rgb,15,56,15),.07) 0 2px,transparent 2px 4px)}
html[data-skin=gameboy] .eq i{background:var(--ga);box-shadow:none;opacity:1}
html[data-skin=gameboy] .lab{font-size:9px;color:var(--gb);letter-spacing:.1em}
html[data-skin=gameboy] .title{color:var(--ga);text-transform:uppercase;font-size:clamp(14px,3.2vw,26px);line-height:1.5;letter-spacing:0}
html[data-skin=gameboy] .artist{color:var(--gb);font-size:11px;font-weight:400}
html[data-skin=gameboy] .savebtn{border:3px solid var(--ga);color:var(--ga);font-size:10px;padding:10px 12px;box-shadow:3px 3px 0 var(--gb)}
html[data-skin=gameboy] .savebtn:hover:not(:disabled),html[data-skin=gameboy] .savebtn.on{background:var(--ga);color:var(--gd2)}
html[data-skin=gameboy] .bar{height:12px;background:var(--gc);border:3px solid var(--ga)}html[data-skin=gameboy] .fill{background:var(--ga);box-shadow:none}
html[data-skin=gameboy] .play{width:64px;height:64px;background:var(--ga);color:var(--gd2);border:0;box-shadow:4px 4px 0 var(--gb)}html[data-skin=gameboy] .play:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gb)}
html[data-skin=gameboy] .vol span,html[data-skin=gameboy] .vol b{font-size:9px;color:var(--ga)}html[data-skin=gameboy] .vol input{accent-color:var(--ga)}
html[data-skin=gameboy] .hint,html[data-skin=gameboy] .note{color:var(--gb);font-size:9px;line-height:1.9}
html[data-skin=gameboy] .card{border:4px solid var(--ga);background:var(--gd2);box-shadow:6px 6px 0 var(--gb)}
html[data-skin=gameboy] h2{font-size:12px;color:var(--ga);letter-spacing:.1em;text-transform:uppercase}
html[data-skin=gameboy] .list li{border-bottom:2px dotted var(--gb);font-size:10px;line-height:1.7;color:var(--ga);align-items:center}html[data-skin=gameboy] .list li time{font-size:8px;color:var(--gb)}html[data-skin=gameboy] .list li.now{background:var(--ga);color:var(--gd2);padding:2px 6px}html[data-skin=gameboy] .list li.now time{color:var(--gd2)}
html[data-skin=gameboy] .list li .hb{border:2px solid var(--ga);color:var(--ga);font-size:12px}html[data-skin=gameboy] .list li .hb.on{background:var(--ga);color:var(--gd2)}html[data-skin=gameboy] .list li.now .hb{border-color:var(--gd2);color:var(--gd2)}
html[data-skin=gameboy] .days button{border:3px solid var(--ga);color:var(--ga);font-size:9px;letter-spacing:.04em;background:var(--gd2)}html[data-skin=gameboy] .days button.on{background:var(--ga);color:var(--gd2)}
html[data-skin=gameboy] footer{border-top:4px solid var(--ga);color:var(--gb);font-size:9px}html[data-skin=gameboy] footer a{color:var(--ga)}

/* --- cassette: beige deck plastic, orange key buttons, typed labels --- */
html[data-skin=cassette]{--bg:#d8cdb4;--bg2:#efe6cf!important;--line:#2b2118!important;--txt:#2b2118;--dim:#6b5a45;--g:#e8541e;--gr:232,84,30;--g2:#2b2118!important;--red:#c4301a}
html[data-skin=cassette] body{background:#d8cdb4 repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px);color:#2b2118}
html[data-skin=cassette] *{font-family:'IBM Plex Mono',ui-monospace,monospace!important}
html[data-skin=cassette] .one,html[data-skin=cassette] .title,html[data-skin=cassette] h2,html[data-skin=cassette] .rad{font-family:'Archivo Black','IBM Plex Mono',sans-serif!important}
html[data-skin=cassette] .top{background:#efe6cf;border-bottom:4px solid #2b2118;backdrop-filter:none;box-shadow:inset 0 -8px 0 var(--g)}
html[data-skin=cassette] .one{color:var(--g);font-size:24px!important;text-shadow:2px 2px 0 #2b2118!important}html[data-skin=cassette] .rad{color:#2b2118;font-size:16px;letter-spacing:.14em}
html[data-skin=cassette] .tag{color:#6b5a45;text-transform:uppercase;font-weight:700;letter-spacing:.1em;font-size:12px}
html[data-skin=cassette] .logo img{border-radius:6px;box-shadow:0 0 0 3px #2b2118}
html[data-skin=cassette] .themebtn,html[data-skin=cassette] .skinbtn{background:#d8cdb4;border:2px solid #2b2118;color:#2b2118;border-radius:5px;font-weight:700;font-size:12px;letter-spacing:.08em;box-shadow:0 4px 0 #2b2118;padding:7px 12px;margin-top:-2px}
html[data-skin=cassette] .themebtn i{display:none}html[data-skin=cassette] .themebtn:hover,html[data-skin=cassette] .skinbtn:hover{background:var(--g);color:#fff}
html[data-skin=cassette] .onair{font-weight:700;font-size:12px;color:#6b5a45;letter-spacing:.1em}html[data-skin=cassette] .onair i{border-radius:50%;background:#8c7b64}html[data-skin=cassette] .onair.on{color:#c4301a}html[data-skin=cassette] .onair.on i{background:#c4301a;box-shadow:0 0 8px #c4301a}
html[data-skin=cassette] .player{border:4px solid #2b2118;border-radius:16px;background:#efe6cf;box-shadow:0 8px 0 #2b2118;padding:36px 28px 22px}
html[data-skin=cassette] .player::before{inset:0 0 auto 0;height:14px;background:linear-gradient(90deg,var(--g) 0 33%,#f2a81d 33% 66%,#2b2118 66%)}
html[data-skin=cassette] .eq i{background:#2b2118;box-shadow:none;opacity:1;border-radius:1px}
html[data-skin=cassette] .lab{color:#6b5a45;font-weight:700;font-size:11px;letter-spacing:.2em}
html[data-skin=cassette] .title{color:#2b2118;text-transform:uppercase;font-size:clamp(24px,4.6vw,44px);line-height:1.05;letter-spacing:-.01em}
html[data-skin=cassette] .artist{color:var(--g);font-weight:700;font-size:16px}
html[data-skin=cassette] .savebtn{background:#d8cdb4;border:2px solid #2b2118;color:#2b2118;border-radius:5px;font-weight:700;font-size:12px;letter-spacing:.06em;box-shadow:0 4px 0 #2b2118;padding:9px 14px}
html[data-skin=cassette] .savebtn:hover:not(:disabled){background:#f2a81d;color:#2b2118}html[data-skin=cassette] .savebtn.on{background:var(--g);color:#fff}
html[data-skin=cassette] .bar{height:10px;background:#d8cdb4;border:2px solid #2b2118;border-radius:5px}html[data-skin=cassette] .fill{background:var(--g);box-shadow:none;border-radius:3px}
html[data-skin=cassette] .play{width:84px;height:68px;border-radius:8px;background:var(--g);color:#fff;border:3px solid #2b2118;box-shadow:0 7px 0 #2b2118}html[data-skin=cassette] .play:hover{transform:none}html[data-skin=cassette] .play:active,html[data-skin=cassette] .play.on{transform:translateY(5px);box-shadow:0 2px 0 #2b2118}
html[data-skin=cassette] .vol span,html[data-skin=cassette] .vol b{font-weight:700;font-size:12px;letter-spacing:.1em;color:#2b2118}html[data-skin=cassette] .vol input{accent-color:var(--g)}
html[data-skin=cassette] .hint,html[data-skin=cassette] .note{color:#6b5a45}
html[data-skin=cassette] .card{border:3px solid #2b2118;border-radius:12px;box-shadow:0 6px 0 #2b2118}
html[data-skin=cassette] h2{color:#2b2118;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
html[data-skin=cassette] .list li{border-bottom:1px dashed #8c7b64;align-items:center;color:#2b2118}html[data-skin=cassette] .list li time{color:#6b5a45;font-weight:700;font-size:12px}html[data-skin=cassette] .list li.now{background:#f2a81d;padding:0 6px}
html[data-skin=cassette] .list li .hb{background:#d8cdb4;border:2px solid #2b2118;border-radius:4px;color:#2b2118}html[data-skin=cassette] .list li .hb.on{background:var(--g);color:#fff}
html[data-skin=cassette] .days button{background:#d8cdb4;border:2px solid #2b2118;border-radius:5px;color:#2b2118;font-weight:700;font-size:12px;letter-spacing:.04em;box-shadow:0 3px 0 #2b2118}html[data-skin=cassette] .days button.on{background:var(--g);color:#fff}
html[data-skin=cassette] footer{border-top:4px solid #2b2118;color:#6b5a45}

/* --- dash: night-drive dashboard, carbon texture, orange gauge ring --- */
html[data-skin=dash]{--bg:#090b0e;--bg2:#101419!important;--line:#262c34!important;--txt:#e8eef6;--dim:#8a95a5;--g:#ff6a00;--gr:255,106,0;--g2:#ffd2a8;--red:#ff3b30}
html[data-skin=dash] body{background:repeating-linear-gradient(45deg,#0d0f13 0 4px,#0a0c10 4px 8px),#090b0e}
html[data-skin=dash] *{font-family:'Orbitron','Barlow',system-ui,sans-serif!important}
html[data-skin=dash] .top{background:linear-gradient(180deg,#171b21,#0d0f13);border-bottom:2px solid var(--g);box-shadow:0 0 22px rgba(var(--gr),.25)}
html[data-skin=dash] .one{color:var(--g);font-weight:900;font-size:24px!important;text-shadow:0 0 14px rgba(var(--gr),.7)!important}html[data-skin=dash] .rad{font-weight:700;letter-spacing:.3em;font-size:14px}
html[data-skin=dash] .tag{font-size:11px;letter-spacing:.22em;color:#8a95a5}
html[data-skin=dash] .logo img{border-radius:50%;box-shadow:0 0 0 2px var(--g),0 0 16px rgba(var(--gr),.5)}
html[data-skin=dash] .themebtn,html[data-skin=dash] .skinbtn{border:1px solid var(--g);color:var(--g);border-radius:999px;font-weight:700;font-size:10px;letter-spacing:.2em;padding:8px 14px;box-shadow:inset 0 0 8px rgba(var(--gr),.25)}
html[data-skin=dash] .themebtn i{display:none}html[data-skin=dash] .themebtn:hover,html[data-skin=dash] .skinbtn:hover{background:var(--g);color:#090b0e}
html[data-skin=dash] .onair{font-size:11px;letter-spacing:.2em}html[data-skin=dash] .onair i{border-radius:50%;background:#2c333c;box-shadow:none}html[data-skin=dash] .onair.on{color:#2dff8a}html[data-skin=dash] .onair.on i{background:#2dff8a;box-shadow:0 0 12px #2dff8a}
html[data-skin=dash] .player{border:2px solid #262c34;border-radius:18px;background:radial-gradient(600px 220px at 20% 0,rgba(var(--gr),.14),transparent 70%),linear-gradient(180deg,#141920,#0d1015);box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.6)}html[data-skin=dash] .player::before{display:none}
html[data-skin=dash] .eq i{background:linear-gradient(0deg,var(--g),var(--g2));box-shadow:0 0 8px rgba(var(--gr),.6);opacity:.95;border-radius:1px}
html[data-skin=dash] .lab{font-size:10px;letter-spacing:.35em;color:#8a95a5}
html[data-skin=dash] .title{font-weight:900;font-size:clamp(22px,4.4vw,42px);letter-spacing:.03em;color:#fff;text-shadow:0 0 18px rgba(var(--gr),.35)}
html[data-skin=dash] .artist{color:var(--g2);font-weight:700;letter-spacing:.1em;font-size:14px}
html[data-skin=dash] .savebtn{border:1px solid var(--g);color:var(--g);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.14em;padding:10px 16px}
html[data-skin=dash] .savebtn:hover:not(:disabled),html[data-skin=dash] .savebtn.on{background:var(--g);color:#090b0e}
html[data-skin=dash] .bar{height:6px;border-radius:3px;background:#222831}html[data-skin=dash] .fill{background:linear-gradient(90deg,var(--g),var(--g2));box-shadow:0 0 12px rgba(var(--gr),.7);border-radius:3px}
html[data-skin=dash] .play{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#1c222a,#0d1015);color:var(--g);border:3px solid var(--g);box-shadow:0 0 0 6px #0d1015,0 0 0 8px #262c34,0 0 26px rgba(var(--gr),.5)}
html[data-skin=dash] .vol span,html[data-skin=dash] .vol b{font-size:10px;font-weight:700;color:var(--g)}html[data-skin=dash] .vol input{accent-color:var(--g)}
html[data-skin=dash] .card{border:1px solid #262c34;border-radius:14px;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
html[data-skin=dash] h2{color:var(--g);font-size:14px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
html[data-skin=dash] .list li{border-bottom:1px solid #1d232b;align-items:center}html[data-skin=dash] .list li time{color:#8a95a5;font-size:10px;font-weight:700}html[data-skin=dash] .list li.now{color:var(--g);text-shadow:0 0 10px rgba(var(--gr),.6)}
html[data-skin=dash] .list li .hb{border:1px solid var(--g);border-radius:50%;color:var(--g)}html[data-skin=dash] .list li .hb.on{background:var(--g);color:#090b0e}
html[data-skin=dash] .days button{border:1px solid #262c34;border-radius:999px;color:#e8eef6;font-size:10px;font-weight:700;letter-spacing:.12em}html[data-skin=dash] .days button.on{background:var(--g);border-color:var(--g);color:#090b0e}
html[data-skin=dash] footer{border-top:2px solid var(--g)}

html[data-skin=mono] .themebtn{display:none}html[data-skin=mono] .skinbtn{left:20px}@media(max-width:900px){html[data-skin=mono] .skinbtn{left:auto}}

/* --- space: floating in deep space, see-through glass panels drifting over a starfield --- */
html[data-skin=space]{--bg:#02030a;--bg2:rgba(255,255,255,.035)!important;--line:rgba(255,255,255,.2)!important;--txt:#eaf2ff;--dim:#9db3d6;--g:#7fd6ff;--gr:127,214,255;--g2:#d6f1ff;--red:#ff6b8a}
html[data-skin=space]{background:radial-gradient(1100px 700px at 82% 8%,rgba(122,74,214,.38),transparent 60%),radial-gradient(900px 600px at 8% 92%,rgba(24,110,200,.32),transparent 62%),radial-gradient(600px 400px at 50% 50%,rgba(255,80,160,.07),transparent 70%),#02030a;background-attachment:fixed}
html[data-skin=space] body{background:transparent;color:#eaf2ff}
html[data-skin=space] *{font-family:'Barlow','Barlow Condensed',system-ui,sans-serif!important}
html[data-skin=space] body::before{content:"";position:fixed;left:0;top:0;width:1px;height:1px;border-radius:50%;z-index:-2;pointer-events:none;box-shadow:41vw 19vh 0 0 #fff,50vw 83vh 0 0 #fff,6vw 9vh 0 0 #fff,68vw 12vh 0 0 #fff,46vw 74vh 0 0 #fff,7vw 64vh 0 0 #fff,27vw 4vh 0 0 #fff,11vw 55vh 0 0 #fff,53vw 8vh 0 0 #fff,30vw 11vh 0 0 #fff,70vw 54vh 0 0 #fff,7vw 72vh 0 0 #fff,15vw 28vh 0 0 #fff,80vw 80vh 0 0 #fff,74vw 7vh 0 0 #fff,73vw 74vh 0 0 #fff,50vw 6vh 0 0 #fff,28vw 5vh 0 0 #fff,71vw 17vh 0 0 #fff,37vw 53vh 0 0 #fff,18vw 69vh 0 0 #fff,15vw 73vh 0 0 #fff,39vw 71vh 0 0 #fff,87vw 23vh 0 0 #fff,13vw 74vh 0 0 #fff,73vw 81vh 0 0 #fff,24vw 47vh 0 0 #fff,12vw 70vh 0 0 #fff,91vw 8vh 0 0 #fff,72vw 7vh 0 0 #fff,79vw 26vh 0 0 #fff,63vw 87vh 0 0 #fff,68vw 54vh 0 0 #fff,99vw 40vh 0 0 #fff,59vw 74vh 0 0 #fff,58vw 46vh 0 0 #fff,38vw 31vh 0 0 #fff,23vw 89vh 0 0 #fff,99vw 31vh 0 0 #fff,10vw 73vh 0 0 #fff,38vw 67vh 0 0 #fff,63vw 43vh 0 0 #fff,93vw 57vh 0 0 #fff,36vw 77vh 0 0 #fff,9vw 15vh 0 0 #fff,65vw 53vh 0 0 #fff,21vw 96vh 0 0 #fff,43vw 19vh 0 0 #fff,62vw 53vh 0 0 #fff,5vw 85vh 0 0 #fff,9vw 97vh 0 0 #fff,71vw 73vh 0 0 #fff,40vw 43vh 0 0 #fff,88vw 44vh 0 0 #fff,76vw 63vh 0 0 #fff,74vw 58vh 0 0 #fff,8vw 11vh 0 0 #fff,34vw 60vh 0 0 #fff,89vw 85vh 0 0 #fff,8vw 7vh 0 0 #fff,93vw 89vh 0 0 #fff,39vw 82vh 0 0 #fff,73vw 87vh 0 0 #fff,57vw 36vh 0 0 #fff,91vw 49vh 0 0 #fff,85vw 44vh 0 0 #fff,2vw 59vh 0 0 #fff,45vw 21vh 0 0 #fff,78vw 14vh 0 0 #fff,63vw 7vh 0 0 #fff,27vw 98vh 0 0 #fff,36vw 16vh 0 0 #fff,94vw 31vh 0 0 #fff,50vw 50vh 0 0 #fff,63vw 10vh 0 0 #fff,21vw 57vh 0 0 #fff,51vw 70vh 0 0 #fff,35vw 17vh 0 0 #fff,55vw 70vh 0 0 #fff,35vw 90vh 0 0 #fff,53vw 45vh 0 0 #fff,87vw 48vh 0 0 #fff,29vw 19vh 0 0 #fff,10vw 22vh 0 0 #fff,19vw 29vh 0 0 #fff,84vw 29vh 0 0 #fff,1vw 62vh 0 0 #fff,75vw 23vh 0 0 #fff,33vw 36vh 0 0 #fff,0vw 18vh 0 0 #fff,53vw 68vh 0 0 #fff,47vw 78vh 0 0 #fff,72vw 40vh 0 0 #fff,16vw 88vh 0 0 #fff,65vw 79vh 0 0 #fff,83vw 86vh 0 0 #fff,94vw 6vh 0 0 #fff,58vw 99vh 0 0 #fff,87vw 71vh 0 0 #fff,50vw 50vh 0 0 #fff,51vw 50vh 0 0 #fff,13vw 61vh 0 0 #fff,81vw 51vh 0 0 #fff,7vw 24vh 0 0 #fff,8vw 26vh 0 0 #fff,56vw 20vh 0 0 #fff,14vw 43vh 0 0 #fff,76vw 6vh 0 0 #fff,13vw 0vh 0 0 #fff,72vw 19vh 0 0 #fff,68vw 12vh 0 0 #fff,46vw 78vh 0 0 #fff,3vw 9vh 0 0 #fff,26vw 78vh 0 0 #fff,48vw 19vh 0 0 #fff,81vw 32vh 0 0 #fff,44vw 77vh 0 0 #fff,46vw 60vh 0 0 #fff,15vw 14vh 0 0 #fff,62vw 59vh 0 0 #fff,61vw 61vh 0 0 #fff,39vw 10vh 0 0 #fff,18vw 13vh 0 0 #fff,95vw 43vh 0 0 #fff,94vw 33vh 0 0 #fff,61vw 88vh 0 0 #fff,20vw 66vh 0 0 #fff,2vw 26vh 0 0 #fff,67vw 46vh 0 0 #fff,18vw 88vh 0 0 #fff,69vw 3vh 0 0 #fff,97vw 67vh 0 0 #fff,38vw 82vh 0 0 #fff,11vw 89vh 0 0 #fff,33vw 66vh 0 0 #fff,46vw 21vh 0 0 #fff,45vw 98vh 0 0 #fff,28vw 68vh 0 0 #fff,69vw 99vh 0 0 #fff,64vw 42vh 0 0 #fff,81vw 28vh 0 0 #fff,78vw 97vh 0 0 #fff,24vw 30vh 0 0 #fff,51vw 94vh 0 0 #fff,29vw 25vh 0 0 #fff,66vw 63vh 0 0 #fff,45vw 93vh 0 0 #fff,3vw 3vh 0 0 #fff,35vw 60vh 0 0 #fff,33vw 24vh 0 0 #fff,88vw 177vh 0 0 #fff,44vw 157vh 0 0 #fff,92vw 144vh 0 0 #fff,46vw 110vh 0 0 #fff,28vw 113vh 0 0 #fff,29vw 160vh 0 0 #fff,25vw 143vh 0 0 #fff,26vw 161vh 0 0 #fff,79vw 178vh 0 0 #fff,0vw 161vh 0 0 #fff,83vw 144vh 0 0 #fff,82vw 110vh 0 0 #fff,84vw 115vh 0 0 #fff,49vw 191vh 0 0 #fff,96vw 125vh 0 0 #fff,61vw 122vh 0 0 #fff,55vw 181vh 0 0 #fff,42vw 111vh 0 0 #fff,92vw 150vh 0 0 #fff,59vw 151vh 0 0 #fff,95vw 110vh 0 0 #fff,92vw 120vh 0 0 #fff,21vw 116vh 0 0 #fff,3vw 119vh 0 0 #fff,75vw 159vh 0 0 #fff,83vw 118vh 0 0 #fff,78vw 176vh 0 0 #fff,60vw 184vh 0 0 #fff,44vw 119vh 0 0 #fff,70vw 170vh 0 0 #fff,16vw 102vh 0 0 #fff,1vw 192vh 0 0 #fff,83vw 113vh 0 0 #fff,67vw 195vh 0 0 #fff,17vw 155vh 0 0 #fff,24vw 127vh 0 0 #fff,3vw 132vh 0 0 #fff,27vw 137vh 0 0 #fff,64vw 130vh 0 0 #fff,97vw 175vh 0 0 #fff,41vw 133vh 0 0 #fff,69vw 153vh 0 0 #fff,16vw 107vh 0 0 #fff,94vw 145vh 0 0 #fff,58vw 184vh 0 0 #fff,74vw 166vh 0 0 #fff,53vw 164vh 0 0 #fff,16vw 168vh 0 0 #fff,19vw 167vh 0 0 #fff,65vw 102vh 0 0 #fff,56vw 199vh 0 0 #fff,23vw 177vh 0 0 #fff,0vw 199vh 0 0 #fff,19vw 122vh 0 0 #fff,18vw 160vh 0 0 #fff,79vw 192vh 0 0 #fff,15vw 171vh 0 0 #fff,7vw 141vh 0 0 #fff,87vw 166vh 0 0 #fff,67vw 171vh 0 0 #fff,61vw 199vh 0 0 #fff,13vw 171vh 0 0 #fff,7vw 131vh 0 0 #fff,24vw 135vh 0 0 #fff,5vw 198vh 0 0 #fff,12vw 164vh 0 0 #fff,57vw 171vh 0 0 #fff,3vw 197vh 0 0 #fff,8vw 156vh 0 0 #fff,41vw 178vh 0 0 #fff,64vw 177vh 0 0 #fff,65vw 125vh 0 0 #fff,88vw 135vh 0 0 #fff,57vw 165vh 0 0 #fff,68vw 161vh 0 0 #fff,64vw 131vh 0 0 #fff,89vw 166vh 0 0 #fff,33vw 171vh 0 0 #fff,25vw 157vh 0 0 #fff,17vw 153vh 0 0 #fff,15vw 150vh 0 0 #fff,56vw 140vh 0 0 #fff,9vw 185vh 0 0 #fff,30vw 154vh 0 0 #fff,9vw 127vh 0 0 #fff,85vw 138vh 0 0 #fff,15vw 199vh 0 0 #fff,19vw 191vh 0 0 #fff,82vw 184vh 0 0 #fff,46vw 118vh 0 0 #fff,32vw 117vh 0 0 #fff,59vw 128vh 0 0 #fff,95vw 112vh 0 0 #fff,50vw 162vh 0 0 #fff,20vw 185vh 0 0 #fff,28vw 120vh 0 0 #fff,90vw 155vh 0 0 #fff,65vw 151vh 0 0 #fff,43vw 153vh 0 0 #fff,25vw 145vh 0 0 #fff,40vw 111vh 0 0 #fff,92vw 146vh 0 0 #fff,2vw 143vh 0 0 #fff,70vw 158vh 0 0 #fff,56vw 190vh 0 0 #fff,2vw 149vh 0 0 #fff,42vw 166vh 0 0 #fff,79vw 137vh 0 0 #fff,65vw 108vh 0 0 #fff,14vw 129vh 0 0 #fff,13vw 110vh 0 0 #fff,33vw 134vh 0 0 #fff,5vw 199vh 0 0 #fff,23vw 134vh 0 0 #fff,96vw 116vh 0 0 #fff,54vw 186vh 0 0 #fff,33vw 151vh 0 0 #fff,19vw 168vh 0 0 #fff,65vw 173vh 0 0 #fff,63vw 189vh 0 0 #fff,41vw 111vh 0 0 #fff,35vw 107vh 0 0 #fff,88vw 123vh 0 0 #fff,54vw 109vh 0 0 #fff,34vw 102vh 0 0 #fff,81vw 111vh 0 0 #fff,33vw 110vh 0 0 #fff,77vw 128vh 0 0 #fff,8vw 133vh 0 0 #fff,15vw 158vh 0 0 #fff,1vw 143vh 0 0 #fff,70vw 153vh 0 0 #fff,34vw 179vh 0 0 #fff,16vw 105vh 0 0 #fff,67vw 190vh 0 0 #fff,30vw 114vh 0 0 #fff,20vw 133vh 0 0 #fff,6vw 123vh 0 0 #fff,25vw 139vh 0 0 #fff,80vw 139vh 0 0 #fff,67vw 197vh 0 0 #fff,26vw 137vh 0 0 #fff,57vw 164vh 0 0 #fff,86vw 122vh 0 0 #fff,34vw 144vh 0 0 #fff,2vw 132vh 0 0 #fff,4vw 101vh 0 0 #fff,2vw 193vh 0 0 #fff,64vw 170vh 0 0 #fff,24vw 165vh 0 0 #fff;animation:spacedrift 240s linear infinite}
html[data-skin=space] body::after{content:"";position:fixed;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:-2;pointer-events:none;box-shadow:60vw 31vh 0 0 #fff,57vw 13vh 0 0 #fff,84vw 83vh 0 0 #fff,55vw 84vh 0 0 #fff,63vw 69vh 0 0 #fff,50vw 64vh 0 0 #fff,39vw 88vh 0 0 #fff,27vw 29vh 0 0 #fff,43vw 25vh 0 0 #fff,90vw 93vh 0 0 #fff,81vw 17vh 0 0 #fff,51vw 44vh 0 0 #fff,6vw 16vh 0 0 #fff,1vw 9vh 0 0 #fff,80vw 94vh 0 0 #fff,32vw 55vh 0 0 #fff,20vw 7vh 0 0 #fff,10vw 85vh 0 0 #fff,48vw 64vh 0 0 #fff,85vw 36vh 0 0 #fff,76vw 31vh 0 0 #fff,88vw 37vh 0 0 #fff,5vw 58vh 0 0 #fff,23vw 20vh 0 0 #fff,34vw 57vh 0 0 #fff,0vw 33vh 0 0 #fff,46vw 42vh 0 0 #fff,70vw 41vh 0 0 #fff,31vw 4vh 0 0 #fff,39vw 27vh 0 0 #fff,45vw 23vh 0 0 #fff,0vw 42vh 0 0 #fff,48vw 10vh 0 0 #fff,60vw 35vh 0 0 #fff,64vw 83vh 0 0 #fff,25vw 31vh 0 0 #fff,64vw 99vh 0 0 #fff,0vw 11vh 0 0 #fff,33vw 11vh 0 0 #fff,18vw 51vh 0 0 #fff;animation:spacetwinkle 5s ease-in-out infinite alternate}
@keyframes spacedrift{to{transform:translateY(-100vh)}}@keyframes spacetwinkle{from{opacity:.25}to{opacity:1}}
@keyframes spacefloat{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-9px) rotate(.12deg)}100%{transform:translate(-3px,3px) rotate(-.1deg)}}
html[data-skin=space] .top{background:rgba(2,3,12,.45);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
html[data-skin=space] .one{color:var(--g);font-weight:700;font-size:26px!important;letter-spacing:.06em;text-shadow:0 0 18px rgba(var(--gr),.8)!important}html[data-skin=space] .rad{font-weight:300;letter-spacing:.5em;font-size:16px;color:#eaf2ff}
html[data-skin=space] .tag{color:var(--dim);letter-spacing:.3em;font-size:12px;text-transform:uppercase;font-weight:300}
html[data-skin=space] .logo img{border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 24px rgba(var(--gr),.6)}
html[data-skin=space] .themebtn,html[data-skin=space] .skinbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.3);color:#eaf2ff;border-radius:999px;font-weight:600;font-size:11px;letter-spacing:.22em;padding:8px 14px;backdrop-filter:blur(6px)}
html[data-skin=space] .themebtn i{border-radius:50%;box-shadow:0 0 10px var(--g)}html[data-skin=space] .themebtn:hover,html[data-skin=space] .skinbtn:hover{background:rgba(var(--gr),.25);color:#fff;border-color:var(--g)}html[data-skin=space] .themebtn:hover i{background:var(--g)}
html[data-skin=space] .onair{font-size:11px;letter-spacing:.25em;font-weight:600}html[data-skin=space] .onair i{border-radius:50%;background:#46567a;box-shadow:none}html[data-skin=space] .onair.on{color:#8dffc7}html[data-skin=space] .onair.on i{background:#8dffc7;box-shadow:0 0 14px #8dffc7}
html[data-skin=space] .player{border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 0 60px rgba(var(--gr),.14),inset 0 0 40px rgba(255,255,255,.03);backdrop-filter:blur(7px);padding:32px 30px 24px;animation:spacefloat 11s ease-in-out infinite alternate}
html[data-skin=space] .player::before{display:none}
html[data-skin=space] .eq i{background:linear-gradient(0deg,var(--g),transparent);box-shadow:0 0 10px rgba(var(--gr),.7);opacity:.9;border-radius:2px;width:3px;flex:0 0 3px}html[data-skin=space] .eq{justify-content:space-between}
html[data-skin=space] .lab{color:var(--dim);font-weight:600;font-size:11px;letter-spacing:.45em}
html[data-skin=space] .title{font-weight:300;text-transform:uppercase;font-size:clamp(26px,5vw,52px);letter-spacing:.07em;line-height:1.1;color:#fff;text-shadow:0 0 24px rgba(var(--gr),.55)}
html[data-skin=space] .artist{color:var(--g2);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:14px}
html[data-skin=space] .savebtn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);color:#eaf2ff;border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.2em;padding:9px 18px}
html[data-skin=space] .savebtn:hover:not(:disabled){background:rgba(var(--gr),.22);border-color:var(--g);color:#fff}html[data-skin=space] .savebtn.on{background:rgba(var(--gr),.35);border-color:var(--g);color:#fff}
html[data-skin=space] .bar{height:2px;background:rgba(255,255,255,.18)}html[data-skin=space] .fill{background:var(--g);box-shadow:0 0 12px var(--g)}
html[data-skin=space] .play{position:relative;width:74px;height:74px;border-radius:50%;background:rgba(var(--gr),.12);color:var(--g);border:1px solid rgba(var(--gr),.7);box-shadow:0 0 30px rgba(var(--gr),.45),inset 0 0 18px rgba(var(--gr),.25);backdrop-filter:blur(4px)}
html[data-skin=space] .play::after{content:"";position:absolute;inset:-13px;border:1px dashed rgba(var(--gr),.45);border-radius:50%;animation:spacespin 16s linear infinite;pointer-events:none}@keyframes spacespin{to{transform:rotate(360deg)}}
html[data-skin=space] .vol span,html[data-skin=space] .vol b{font-size:11px;font-weight:600;letter-spacing:.25em;color:var(--g)}html[data-skin=space] .vol input{accent-color:var(--g)}
html[data-skin=space] .hint,html[data-skin=space] .note{color:var(--dim);font-weight:300;letter-spacing:.04em}
html[data-skin=space] .card{border:1px solid rgba(255,255,255,.16);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.01));box-shadow:0 0 44px rgba(var(--gr),.09);backdrop-filter:blur(7px);animation:spacefloat 14s ease-in-out infinite alternate}
html[data-skin=space] .cols .card:nth-child(2){animation-duration:17s;animation-delay:-5s}html[data-skin=space] .card.saved{animation-duration:15s;animation-delay:-3s}html[data-skin=space] .card.sched{animation-duration:19s;animation-delay:-8s}
html[data-skin=space] h2{color:var(--g2);font-size:13px;font-weight:600;letter-spacing:.4em;text-transform:uppercase}
html[data-skin=space] .list li{border-bottom:1px solid rgba(255,255,255,.08);align-items:center;color:#eaf2ff;font-weight:300}html[data-skin=space] .list li time{color:var(--dim);font-size:10px;font-weight:600}html[data-skin=space] .list li.now{color:var(--g);text-shadow:0 0 12px rgba(var(--gr),.7);font-weight:600}
html[data-skin=space] .list li .hb{border:1px solid rgba(255,255,255,.28);border-radius:50%;color:var(--g);background:transparent}html[data-skin=space] .list li .hb.on{background:rgba(var(--gr),.3);border-color:var(--g);color:#fff}
html[data-skin=space] .days button{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#eaf2ff;font-weight:600;font-size:12px;letter-spacing:.16em}html[data-skin=space] .days button.on{background:rgba(var(--gr),.3);border-color:var(--g);color:#fff}
html[data-skin=space] footer{border-top:1px solid rgba(255,255,255,.12);color:var(--dim)}html[data-skin=space] footer a{color:var(--g2)}
@media(prefers-reduced-motion:reduce){html[data-skin=space] .player,html[data-skin=space] .card,html[data-skin=space] body::before,html[data-skin=space] body::after,html[data-skin=space] .play::after{animation:none}}
/* --- nebula: the Legal Dock "Nebula" desktop theme (purple space wallpaper) --- */
html[data-skin=nebula]{--bg:#07050F;--bg2:rgba(139,92,246,.07)!important;--line:rgba(184,162,255,.28)!important;--txt:#E6E1FA;--dim:#8E86B0;--g:#8B5CF6;--gr:139,92,246;--g2:#CC8CFF;--red:#F0517A}
html[data-skin=nebula]{background:#07050F url(assets/nebula-bg.jpg) center/cover fixed}
html[data-skin=nebula] body{background:transparent;color:#E6E1FA}
html[data-skin=nebula] *{font-family:'Barlow','Barlow Condensed',system-ui,sans-serif!important}
@keyframes nebuladrift{to{transform:translateY(-100vh)}}@keyframes nebulatwinkle{from{opacity:.25}to{opacity:1}}
@keyframes nebulafloat{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-9px) rotate(.12deg)}100%{transform:translate(-3px,3px) rotate(-.1deg)}}
html[data-skin=nebula] .top{background:rgba(2,3,12,.45);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
html[data-skin=nebula] .one{color:var(--g);font-weight:700;font-size:26px!important;letter-spacing:.06em;text-shadow:0 0 18px rgba(var(--gr),.8)!important}html[data-skin=nebula] .rad{font-weight:300;letter-spacing:.5em;font-size:16px;color:#eaf2ff}
html[data-skin=nebula] .tag{color:var(--dim);letter-spacing:.3em;font-size:12px;text-transform:uppercase;font-weight:300}
html[data-skin=nebula] .logo img{border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 24px rgba(var(--gr),.6)}
html[data-skin=nebula] .themebtn,html[data-skin=nebula] .skinbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.3);color:#eaf2ff;border-radius:999px;font-weight:600;font-size:11px;letter-spacing:.22em;padding:8px 14px;backdrop-filter:blur(6px)}
html[data-skin=nebula] .themebtn i{border-radius:50%;box-shadow:0 0 10px var(--g)}html[data-skin=nebula] .themebtn:hover,html[data-skin=nebula] .skinbtn:hover{background:rgba(var(--gr),.25);color:#fff;border-color:var(--g)}html[data-skin=nebula] .themebtn:hover i{background:var(--g)}
html[data-skin=nebula] .onair{font-size:11px;letter-spacing:.25em;font-weight:600}html[data-skin=nebula] .onair i{border-radius:50%;background:#46567a;box-shadow:none}html[data-skin=nebula] .onair.on{color:#8dffc7}html[data-skin=nebula] .onair.on i{background:#8dffc7;box-shadow:0 0 14px #8dffc7}
html[data-skin=nebula] .player{border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 0 60px rgba(var(--gr),.14),inset 0 0 40px rgba(255,255,255,.03);backdrop-filter:blur(7px);padding:32px 30px 24px;animation:nebulafloat 11s ease-in-out infinite alternate}
html[data-skin=nebula] .player::before{display:none}
html[data-skin=nebula] .eq i{background:linear-gradient(0deg,var(--g),transparent);box-shadow:0 0 10px rgba(var(--gr),.7);opacity:.9;border-radius:2px;width:3px;flex:0 0 3px}html[data-skin=nebula] .eq{justify-content:nebula-between}
html[data-skin=nebula] .lab{color:var(--dim);font-weight:600;font-size:11px;letter-spacing:.45em}
html[data-skin=nebula] .title{font-weight:300;text-transform:uppercase;font-size:clamp(26px,5vw,52px);letter-spacing:.07em;line-height:1.1;color:#fff;text-shadow:0 0 24px rgba(var(--gr),.55)}
html[data-skin=nebula] .artist{color:var(--g2);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:14px}
html[data-skin=nebula] .savebtn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);color:#eaf2ff;border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.2em;padding:9px 18px}
html[data-skin=nebula] .savebtn:hover:not(:disabled){background:rgba(var(--gr),.22);border-color:var(--g);color:#fff}html[data-skin=nebula] .savebtn.on{background:rgba(var(--gr),.35);border-color:var(--g);color:#fff}
html[data-skin=nebula] .bar{height:2px;background:rgba(255,255,255,.18)}html[data-skin=nebula] .fill{background:var(--g);box-shadow:0 0 12px var(--g)}
html[data-skin=nebula] .play{position:relative;width:74px;height:74px;border-radius:50%;background:rgba(var(--gr),.12);color:var(--g);border:1px solid rgba(var(--gr),.7);box-shadow:0 0 30px rgba(var(--gr),.45),inset 0 0 18px rgba(var(--gr),.25);backdrop-filter:blur(4px)}
html[data-skin=nebula] .play::after{content:"";position:absolute;inset:-13px;border:1px dashed rgba(var(--gr),.45);border-radius:50%;animation:nebulaspin 16s linear infinite;pointer-events:none}@keyframes nebulaspin{to{transform:rotate(360deg)}}
html[data-skin=nebula] .vol span,html[data-skin=nebula] .vol b{font-size:11px;font-weight:600;letter-spacing:.25em;color:var(--g)}html[data-skin=nebula] .vol input{accent-color:var(--g)}
html[data-skin=nebula] .hint,html[data-skin=nebula] .note{color:var(--dim);font-weight:300;letter-spacing:.04em}
html[data-skin=nebula] .card{border:1px solid rgba(255,255,255,.16);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.01));box-shadow:0 0 44px rgba(var(--gr),.09);backdrop-filter:blur(7px);animation:nebulafloat 14s ease-in-out infinite alternate}
html[data-skin=nebula] .cols .card:nth-child(2){animation-duration:17s;animation-delay:-5s}html[data-skin=nebula] .card.saved{animation-duration:15s;animation-delay:-3s}html[data-skin=nebula] .card.sched{animation-duration:19s;animation-delay:-8s}
html[data-skin=nebula] h2{color:var(--g2);font-size:13px;font-weight:600;letter-spacing:.4em;text-transform:uppercase}
html[data-skin=nebula] .list li{border-bottom:1px solid rgba(255,255,255,.08);align-items:center;color:#eaf2ff;font-weight:300}html[data-skin=nebula] .list li time{color:var(--dim);font-size:10px;font-weight:600}html[data-skin=nebula] .list li.now{color:var(--g);text-shadow:0 0 12px rgba(var(--gr),.7);font-weight:600}
html[data-skin=nebula] .list li .hb{border:1px solid rgba(255,255,255,.28);border-radius:50%;color:var(--g);background:transparent}html[data-skin=nebula] .list li .hb.on{background:rgba(var(--gr),.3);border-color:var(--g);color:#fff}
html[data-skin=nebula] .days button{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#eaf2ff;font-weight:600;font-size:12px;letter-spacing:.16em}html[data-skin=nebula] .days button.on{background:rgba(var(--gr),.3);border-color:var(--g);color:#fff}
html[data-skin=nebula] footer{border-top:1px solid rgba(255,255,255,.12);color:var(--dim)}html[data-skin=nebula] footer a{color:var(--g2)}
@media(prefers-reduced-motion:reduce){html[data-skin=nebula] .player,html[data-skin=nebula] .card,html[data-skin=nebula] body::before,html[data-skin=nebula] body::after,html[data-skin=nebula] .play::after{animation:none}}

/* skin name inside the SKIN button */
.skinbtn{flex-direction:column;gap:3px!important;line-height:1.1;align-items:center}
.skinbtn small{font-size:.72em;opacity:.85;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ============ skins 14-19 ============ */
/* --- marquee: casino-sign gold, blinking bulbs --- */
html[data-skin=marquee]{--bg:#140006;--bg2:#1f0a10!important;--line:#5a1a26!important;--txt:#fff3d6;--dim:#d1b070;--g:#ffc933;--gr:255,201,51;--g2:#fff0b3;--red:#ff2d4a}
html[data-skin=marquee] body{background:radial-gradient(900px 520px at 50% 0,#4d0a1e,#140006 72%)}
html[data-skin=marquee] *{font-family:'Barlow',system-ui,sans-serif!important}
html[data-skin=marquee] .one,html[data-skin=marquee] .title,html[data-skin=marquee] h2,html[data-skin=marquee] .rad{font-family:'Archivo Black','Barlow',sans-serif!important}
html[data-skin=marquee] .top{background:#1c0309;border-bottom:3px solid var(--g);box-shadow:0 0 24px rgba(var(--gr),.35)}
html[data-skin=marquee] .one{color:var(--g);font-size:26px!important;text-shadow:0 0 14px rgba(var(--gr),.8),0 3px 0 #6b0f26!important}html[data-skin=marquee] .rad{color:#fff3d6;font-size:17px;letter-spacing:.18em}
html[data-skin=marquee] .tag{color:var(--g2);text-transform:uppercase;font-weight:700;letter-spacing:.2em;font-size:12px}
html[data-skin=marquee] .logo img{border-radius:50%;box-shadow:0 0 0 3px var(--g),0 0 18px rgba(var(--gr),.6)}
html[data-skin=marquee] .themebtn,html[data-skin=marquee] .skinbtn{background:#2a0a13;border:2px solid var(--g);color:var(--g);border-radius:6px;font-weight:800;font-size:12px;letter-spacing:.1em;padding:6px 12px;box-shadow:0 0 12px rgba(var(--gr),.3)}
html[data-skin=marquee] .themebtn i{border-radius:50%}html[data-skin=marquee] .themebtn:hover,html[data-skin=marquee] .skinbtn:hover{background:var(--g);color:#140006}
html[data-skin=marquee] .onair{font-weight:800;font-size:12px;letter-spacing:.14em}html[data-skin=marquee] .onair i{border-radius:50%}
html[data-skin=marquee] .player{border:4px solid var(--g);border-radius:14px;background:linear-gradient(180deg,#2c0a16,#1a0610);box-shadow:0 0 34px rgba(var(--gr),.35),inset 0 0 30px rgba(0,0,0,.6);padding:34px 30px 24px}
html[data-skin=marquee] .player::before{inset:8px;background:none;border:7px dotted var(--g);border-radius:8px;opacity:1;animation:marq 1.1s steps(1) infinite;pointer-events:none}@keyframes marq{0%{opacity:1}50%{opacity:.35}}
html[data-skin=marquee] .eq i{background:linear-gradient(0deg,#ff2d4a,var(--g));box-shadow:0 0 10px rgba(var(--gr),.6);opacity:1;border-radius:3px 3px 0 0}
html[data-skin=marquee] .lab{color:var(--g2);font-weight:800;font-size:11px;letter-spacing:.35em}
html[data-skin=marquee] .title{color:var(--g);text-transform:uppercase;font-size:clamp(26px,5vw,52px);line-height:1.05;text-shadow:0 0 22px rgba(var(--gr),.7),0 3px 0 #6b0f26}
html[data-skin=marquee] .artist{color:#fff3d6;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:15px}
html[data-skin=marquee] .savebtn{background:transparent;border:2px solid var(--g);color:var(--g);border-radius:999px;font-weight:800;font-size:13px;letter-spacing:.1em;padding:9px 18px}
html[data-skin=marquee] .savebtn:hover:not(:disabled),html[data-skin=marquee] .savebtn.on{background:var(--g);color:#140006}
html[data-skin=marquee] .bar{height:8px;background:#3a0f1c;border-radius:4px}html[data-skin=marquee] .fill{background:linear-gradient(90deg,#ff2d4a,var(--g));box-shadow:0 0 10px rgba(var(--gr),.6);border-radius:4px}
html[data-skin=marquee] .play{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5470,#c4112c);color:#fff;box-shadow:0 0 0 4px var(--g),0 0 26px rgba(var(--gr),.55)}
html[data-skin=marquee] .vol span,html[data-skin=marquee] .vol b{font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--g)}html[data-skin=marquee] .vol input{accent-color:var(--g)}
html[data-skin=marquee] .card{border:3px solid var(--g);border-radius:12px;background:#1f0a10;box-shadow:0 0 22px rgba(var(--gr),.2)}
html[data-skin=marquee] h2{color:var(--g);font-size:20px;text-transform:uppercase;letter-spacing:.04em}
html[data-skin=marquee] .list li{border-bottom:1px solid #4a1523;align-items:center}html[data-skin=marquee] .list li time{color:var(--g2);font-weight:700;font-size:12px}html[data-skin=marquee] .list li.now{color:var(--g);text-shadow:0 0 12px rgba(var(--gr),.6)}
html[data-skin=marquee] .list li .hb{border:2px solid var(--g);border-radius:50%;color:var(--g)}html[data-skin=marquee] .list li .hb.on{background:var(--g);color:#140006}
html[data-skin=marquee] .days button{border:2px solid var(--g);border-radius:999px;color:var(--g);font-weight:800;font-size:12px;letter-spacing:.1em}html[data-skin=marquee] .days button.on{background:var(--g);color:#140006}
html[data-skin=marquee] footer{border-top:3px solid var(--g)}

/* --- blueprint: white linework on drafting blue --- */
html[data-skin=blueprint]{--bg:#0c3b82;--bg2:rgba(255,255,255,.04)!important;--line:rgba(255,255,255,.5)!important;--txt:#e8f2ff;--dim:#a9c7f2;--g:#ffffff;--gr:255,255,255;--g2:#cfe3ff}
html[data-skin=blueprint] body{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 120px),#0c3b82;background-attachment:fixed}
html[data-skin=blueprint] *{font-family:'IBM Plex Mono',ui-monospace,monospace!important}
html[data-skin=blueprint] .top{background:rgba(8,40,92,.92);border-bottom:2px solid var(--g)}
html[data-skin=blueprint] .one{color:var(--g);font-weight:700;font-size:22px!important;text-shadow:none!important}html[data-skin=blueprint] .rad{font-weight:500;letter-spacing:.3em;font-size:14px}
html[data-skin=blueprint] .tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase}html[data-skin=blueprint] .tag::before{content:'// '}
html[data-skin=blueprint] .logo img{border-radius:0;box-shadow:0 0 0 1px var(--g),4px 4px 0 rgba(var(--gr),.3)}
html[data-skin=blueprint] .themebtn,html[data-skin=blueprint] .skinbtn{background:transparent;border:1px dashed var(--g);color:var(--g);border-radius:0;font-weight:700;font-size:11px;letter-spacing:.14em;padding:7px 10px}
html[data-skin=blueprint] .themebtn i{display:none}html[data-skin=blueprint] .themebtn:hover,html[data-skin=blueprint] .skinbtn:hover{background:var(--g);color:#0c3b82}
html[data-skin=blueprint] .onair{font-size:12px;font-weight:700;letter-spacing:.12em}html[data-skin=blueprint] .onair i{border-radius:0;box-shadow:none}
html[data-skin=blueprint] .player{border:2px solid var(--g);border-radius:0;background:rgba(8,40,92,.55);box-shadow:inset 0 0 0 6px rgba(12,59,130,.9),inset 0 0 0 7px rgba(var(--gr),.7)}
html[data-skin=blueprint] .player::before{display:none}
html[data-skin=blueprint] .eq i{background:transparent;border:1px solid var(--g);box-shadow:none;opacity:1;border-bottom:0}
html[data-skin=blueprint] .lab{color:var(--g);font-size:11px;letter-spacing:.2em;font-weight:700}html[data-skin=blueprint] .lab::before{content:'FIG.1 \2014  '}
html[data-skin=blueprint] .title{color:#fff;text-transform:uppercase;font-weight:700;font-size:clamp(22px,4.2vw,40px);letter-spacing:.02em}
html[data-skin=blueprint] .artist{color:var(--g2);font-weight:500;font-size:15px}html[data-skin=blueprint] .artist::before{content:'by '; opacity:.7}
html[data-skin=blueprint] .savebtn{border:1px dashed var(--g);color:var(--g);border-radius:0;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 14px;background:transparent}
html[data-skin=blueprint] .savebtn:hover:not(:disabled),html[data-skin=blueprint] .savebtn.on{background:var(--g);color:#0c3b82}
html[data-skin=blueprint] .bar{height:8px;background:transparent;border:1px solid var(--g)}html[data-skin=blueprint] .fill{background:repeating-linear-gradient(90deg,var(--g) 0 4px,transparent 4px 6px);box-shadow:none}
html[data-skin=blueprint] .play{width:68px;height:68px;border-radius:50%;background:transparent;color:var(--g);border:2px solid var(--g);box-shadow:0 0 0 6px rgba(12,59,130,.9),0 0 0 7px rgba(var(--gr),.6)}html[data-skin=blueprint] .play:hover{background:var(--g);color:#0c3b82}
html[data-skin=blueprint] .vol span,html[data-skin=blueprint] .vol b{font-size:12px;font-weight:700;color:var(--g)}html[data-skin=blueprint] .vol input{accent-color:#fff}
html[data-skin=blueprint] .card{border:1px dashed var(--g);border-radius:0;background:rgba(8,40,92,.5)}
html[data-skin=blueprint] h2{color:var(--g);font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}html[data-skin=blueprint] h2::before{content:'[ '}html[data-skin=blueprint] h2::after{content:' ]'}
html[data-skin=blueprint] .list li{border-bottom:1px dotted rgba(255,255,255,.4);align-items:center}html[data-skin=blueprint] .list li time{color:var(--g2);font-size:11px;font-weight:500}html[data-skin=blueprint] .list li.now{color:#0c3b82;background:var(--g);padding:0 6px}html[data-skin=blueprint] .list li.now time{color:#0c3b82}
html[data-skin=blueprint] .list li .hb{border:1px dashed var(--g);border-radius:0;color:var(--g)}html[data-skin=blueprint] .list li .hb.on{background:var(--g);color:#0c3b82}html[data-skin=blueprint] .list li.now .hb{border-color:#0c3b82;color:#0c3b82}
html[data-skin=blueprint] .days button{border:1px dashed var(--g);border-radius:0;color:var(--g);font-size:12px;font-weight:700}html[data-skin=blueprint] .days button.on{background:var(--g);color:#0c3b82}
html[data-skin=blueprint] footer{border-top:2px solid var(--g)}

/* --- candy: bubblegum pastels, polka dots, bouncy --- */
html[data-skin=candy]{--bg:#ffe3f1;--bg2:#fff!important;--line:#ffc2e0!important;--txt:#6a2a55;--dim:#a8708f;--g:#ff5fa8;--gr:255,95,168;--g2:#6a2a55!important;--red:#ff5fa8}
html[data-skin=candy] body{background:radial-gradient(#fff 2.5px,transparent 3px) 0 0/30px 30px,linear-gradient(180deg,#ffd3ea,#d9f6ec 70%,#fff3c9);background-attachment:fixed;color:#6a2a55}
html[data-skin=candy] *{font-family:'Barlow',system-ui,sans-serif!important}
html[data-skin=candy] .one,html[data-skin=candy] .title,html[data-skin=candy] h2,html[data-skin=candy] .rad{font-family:'Archivo Black','Barlow',sans-serif!important}
html[data-skin=candy] .top{background:rgba(255,255,255,.85);border-bottom:4px solid var(--g);border-radius:0 0 26px 26px;backdrop-filter:none}
html[data-skin=candy] .one{color:var(--g);font-size:26px!important;text-shadow:3px 3px 0 #fff,5px 5px 0 #ffc2e0!important}html[data-skin=candy] .rad{color:#6a2a55;font-size:17px;letter-spacing:.1em}
html[data-skin=candy] .tag{color:#a8708f;text-transform:none;font-weight:700;letter-spacing:.04em;font-size:14px}
html[data-skin=candy] .logo img{border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--g)}
html[data-skin=candy] .themebtn,html[data-skin=candy] .skinbtn{background:#fff;border:3px solid var(--g);color:var(--g);border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.06em;padding:6px 14px;box-shadow:0 4px 0 #ffc2e0}
html[data-skin=candy] .themebtn i{border-radius:50%;box-shadow:none}html[data-skin=candy] .themebtn:hover,html[data-skin=candy] .skinbtn:hover{background:var(--g);color:#fff}html[data-skin=candy] .themebtn:hover i{background:#fff}
html[data-skin=candy] .onair{font-weight:800;font-size:12px;letter-spacing:.08em;color:#a8708f}html[data-skin=candy] .onair i{border-radius:50%;background:#ffc2e0}html[data-skin=candy] .onair.on{color:var(--g)}html[data-skin=candy] .onair.on i{background:var(--g);box-shadow:none}
html[data-skin=candy] .player{border:4px solid #fff;border-radius:36px;background:linear-gradient(160deg,#fff,#ffe9f4);box-shadow:0 0 0 4px var(--g),0 14px 0 4px #ffc2e0;padding:30px 28px 24px;margin-bottom:34px}html[data-skin=candy] .player::before{display:none}
html[data-skin=candy] .eq i{border-radius:999px;box-shadow:none;opacity:1;background:var(--g)}html[data-skin=candy] .eq i:nth-child(3n+1){background:#7be3c3}html[data-skin=candy] .eq i:nth-child(3n+2){background:#ffd24f}
html[data-skin=candy] .lab{color:#a8708f;font-weight:800;font-size:11px;letter-spacing:.25em}
html[data-skin=candy] .title{color:#6a2a55;text-transform:none;font-size:clamp(28px,5vw,50px);line-height:1.05}
html[data-skin=candy] .artist{color:var(--g);font-weight:800;font-size:17px}
html[data-skin=candy] .savebtn{background:#fff;border:3px solid var(--g);color:var(--g);border-radius:999px;font-weight:800;font-size:13px;padding:9px 18px;box-shadow:0 4px 0 #ffc2e0}
html[data-skin=candy] .savebtn:hover:not(:disabled){background:#fff0f8;color:var(--g)}html[data-skin=candy] .savebtn.on{background:var(--g);color:#fff}
html[data-skin=candy] .bar{height:12px;border-radius:999px;background:#ffd8ec}html[data-skin=candy] .fill{border-radius:999px;background:linear-gradient(90deg,var(--g),#ffd24f);box-shadow:none}
html[data-skin=candy] .play{width:78px;height:78px;border-radius:50%;background:var(--g);color:#fff;box-shadow:0 7px 0 #c9317a,0 0 0 5px #fff,0 0 0 8px var(--g);animation:candybob 1.6s ease-in-out infinite}@keyframes candybob{50%{transform:translateY(-5px)}}
html[data-skin=candy] .vol span,html[data-skin=candy] .vol b{font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--g)}html[data-skin=candy] .vol input{accent-color:var(--g)}
html[data-skin=candy] .hint,html[data-skin=candy] .note{color:#a8708f}
html[data-skin=candy] .card{border:4px solid #fff;border-radius:28px;background:#fff;box-shadow:0 0 0 3px #ffc2e0,0 10px 0 2px #ffe0f0}
html[data-skin=candy] h2{color:var(--g);font-size:21px;text-transform:none}
html[data-skin=candy] .list li{border-bottom:2px dotted #ffd0e6;align-items:center;color:#6a2a55}html[data-skin=candy] .list li time{color:#a8708f;font-weight:800;font-size:11px}html[data-skin=candy] .list li.now{color:var(--g);font-weight:800}
html[data-skin=candy] .list li .hb{border:2px solid var(--g);border-radius:50%;color:var(--g);background:#fff}html[data-skin=candy] .list li .hb.on{background:var(--g);color:#fff}
html[data-skin=candy] .days button{background:#fff;border:3px solid #ffc2e0;border-radius:999px;color:#6a2a55;font-weight:800;font-size:12px;letter-spacing:.04em}html[data-skin=candy] .days button.on{background:var(--g);border-color:var(--g);color:#fff}
html[data-skin=candy] footer{border-top:4px dotted var(--g);color:#a8708f}

/* --- glitch: black, RGB-split text, jittering --- */
html[data-skin=glitch]{--bg:#05050a;--bg2:#0a0a12!important;--line:#1c2a33!important;--txt:#e9fffb;--dim:#7fa8a2;--g:#00ffd0;--gr:0,255,208;--g2:#ff2bd6;--red:#ff2bd6}
html[data-skin=glitch] body{background:linear-gradient(0deg,rgba(var(--gr),.05) 50%,transparent 50%) 0 0/100% 4px,#05050a}
html[data-skin=glitch] *{font-family:'IBM Plex Mono',ui-monospace,monospace!important}
html[data-skin=glitch] .top{background:#05050a;border-bottom:1px solid var(--g);box-shadow:0 2px 0 var(--g2)}
html[data-skin=glitch] .one{color:var(--g);font-weight:700;font-size:24px!important;text-shadow:2px 0 var(--g2),-2px 0 var(--g)!important;animation:glj 4s steps(1) infinite}html[data-skin=glitch] .rad{font-weight:500;letter-spacing:.3em;font-size:14px}
html[data-skin=glitch] .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
html[data-skin=glitch] .logo img{border-radius:0;box-shadow:3px 0 0 var(--g2),-3px 0 0 var(--g)}
html[data-skin=glitch] .themebtn,html[data-skin=glitch] .skinbtn{background:#05050a;border:1px solid var(--g);color:var(--g);border-radius:0;font-weight:700;font-size:11px;letter-spacing:.14em;box-shadow:2px 2px 0 var(--g2);padding:7px 11px}
html[data-skin=glitch] .themebtn i{display:none}html[data-skin=glitch] .themebtn:hover,html[data-skin=glitch] .skinbtn:hover{background:var(--g);color:#05050a}
html[data-skin=glitch] .onair{font-size:12px;font-weight:700;letter-spacing:.12em}html[data-skin=glitch] .onair i{border-radius:0;box-shadow:none}
html[data-skin=glitch] .player{border:1px solid var(--g);border-radius:0;background:#0a0a12;box-shadow:4px 4px 0 var(--g2);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));padding:28px 26px 22px}html[data-skin=glitch] .player::before{display:none}
html[data-skin=glitch] .eq i{background:var(--g);box-shadow:3px 0 0 var(--g2);opacity:1;border-radius:0}
html[data-skin=glitch] .lab{color:var(--g2);font-weight:700;font-size:11px;letter-spacing:.3em}
html[data-skin=glitch] .title{color:#fff;text-transform:uppercase;font-weight:700;font-size:clamp(22px,4.4vw,42px);line-height:1.1;text-shadow:3px 0 var(--g2),-3px 0 var(--g);animation:glj 3.2s steps(1) infinite}
@keyframes glj{0%,90%,100%{transform:none}91%{transform:translate(-4px,1px) skewX(-8deg)}93%{transform:translate(5px,-1px)}95%{transform:translate(-2px,0) skewX(6deg)}97%{transform:none}}
html[data-skin=glitch] .artist{color:var(--g);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
html[data-skin=glitch] .savebtn{background:transparent;border:1px solid var(--g);color:var(--g);border-radius:0;font-size:12px;font-weight:700;letter-spacing:.1em;padding:10px 14px;box-shadow:2px 2px 0 var(--g2)}
html[data-skin=glitch] .savebtn:hover:not(:disabled),html[data-skin=glitch] .savebtn.on{background:var(--g);color:#05050a}
html[data-skin=glitch] .bar{height:6px;background:#12202a}html[data-skin=glitch] .fill{background:var(--g);box-shadow:3px 0 0 var(--g2)}
html[data-skin=glitch] .play{width:68px;height:68px;border-radius:0;background:var(--g);color:#05050a;box-shadow:5px 5px 0 var(--g2);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
html[data-skin=glitch] .vol span,html[data-skin=glitch] .vol b{font-size:12px;font-weight:700;color:var(--g)}html[data-skin=glitch] .vol input{accent-color:var(--g)}
html[data-skin=glitch] .card{border:1px solid var(--g);border-radius:0;background:#0a0a12;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
html[data-skin=glitch] h2{color:var(--g);font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-shadow:2px 0 var(--g2)}
html[data-skin=glitch] .list li{border-bottom:1px solid #12202a;align-items:center}html[data-skin=glitch] .list li time{color:var(--g2);font-size:11px;font-weight:700}html[data-skin=glitch] .list li.now{color:var(--g);text-shadow:2px 0 var(--g2)}
html[data-skin=glitch] .list li .hb{border:1px solid var(--g);border-radius:0;color:var(--g)}html[data-skin=glitch] .list li .hb.on{background:var(--g);color:#05050a}
html[data-skin=glitch] .days button{border:1px solid var(--g);border-radius:0;color:var(--g);font-size:12px;font-weight:700}html[data-skin=glitch] .days button.on{background:var(--g);color:#05050a;box-shadow:2px 2px 0 var(--g2)}
html[data-skin=glitch] footer{border-top:1px solid var(--g)}
@media(prefers-reduced-motion:reduce){html[data-skin=glitch] .title,html[data-skin=glitch] .one,html[data-skin=candy] .play,html[data-skin=marquee] .player::before{animation:none}}

/* --- press: old newspaper, ink and halftone --- */
html[data-skin=press]{--bg:#efe8d8;--bg2:#f7f1e3!important;--line:#1a1a1a!important;--txt:#1a1a1a;--dim:#5b5448;--g:#b3261e;--gr:179,38,30;--g2:#1a1a1a!important;--red:#b3261e}
html[data-skin=press] body{background:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1.5px) 0 0/6px 6px,#efe8d8;color:#1a1a1a}
html[data-skin=press] *{font-family:'Fraunces',Georgia,'Times New Roman',serif!important}
html[data-skin=press] .top{background:#efe8d8;border-top:6px double #1a1a1a;border-bottom:3px double #1a1a1a;backdrop-filter:none}
html[data-skin=press] .one{color:#1a1a1a;font-size:30px!important;font-weight:700;text-shadow:none!important;letter-spacing:-.01em}html[data-skin=press] .rad{color:#1a1a1a;font-weight:700;font-size:20px;letter-spacing:.2em}
html[data-skin=press] .tag{color:#5b5448;text-transform:none;font-style:italic;font-weight:700;font-size:14px;letter-spacing:.02em}
html[data-skin=press] .logo img{border-radius:0;filter:grayscale(1) contrast(1.15);box-shadow:0 0 0 2px #1a1a1a}
html[data-skin=press] .themebtn,html[data-skin=press] .skinbtn{background:#efe8d8;border:2px solid #1a1a1a;color:#1a1a1a;border-radius:0;font-weight:700;font-size:12px;letter-spacing:.1em;padding:6px 11px}
html[data-skin=press] .themebtn i{display:none}html[data-skin=press] .themebtn:hover,html[data-skin=press] .skinbtn:hover{background:#1a1a1a;color:#efe8d8}
html[data-skin=press] .onair{font-weight:700;font-size:12px;letter-spacing:.14em;color:#5b5448}html[data-skin=press] .onair i{border-radius:0;background:#8d8576}html[data-skin=press] .onair.on{color:var(--g)}html[data-skin=press] .onair.on i{background:var(--g);box-shadow:none}
html[data-skin=press] .player{border:3px solid #1a1a1a;border-radius:0;background:#f7f1e3;box-shadow:6px 6px 0 #1a1a1a;padding:28px 28px 22px}html[data-skin=press] .player::before{display:none}
html[data-skin=press] .eq i{background:#1a1a1a;box-shadow:none;opacity:1;border-radius:0}
html[data-skin=press] .lab{color:var(--g);font-weight:700;font-size:12px;letter-spacing:.25em;text-transform:uppercase}html[data-skin=press] .lab::before{content:'EXTRA! \2014  '}
html[data-skin=press] .title{color:#1a1a1a;text-transform:none;font-weight:900;font-size:clamp(30px,6vw,64px);line-height:.98;letter-spacing:-.02em}
html[data-skin=press] .artist{color:#1a1a1a;font-style:italic;font-weight:600;font-size:18px;border-top:1px solid #1a1a1a;display:inline-block;padding-top:4px;margin-top:6px}
html[data-skin=press] .savebtn{background:transparent;border:2px solid #1a1a1a;color:#1a1a1a;border-radius:0;font-weight:700;font-size:13px;letter-spacing:.06em;padding:8px 14px}
html[data-skin=press] .savebtn:hover:not(:disabled){background:#1a1a1a;color:#efe8d8}html[data-skin=press] .savebtn.on{background:var(--g);border-color:var(--g);color:#fff}
html[data-skin=press] .bar{height:6px;background:#d8d0bd;border:1px solid #1a1a1a}html[data-skin=press] .fill{background:#1a1a1a;box-shadow:none}
html[data-skin=press] .play{width:70px;height:70px;border-radius:50%;background:#1a1a1a;color:#f7f1e3;box-shadow:0 0 0 4px #f7f1e3,0 0 0 6px #1a1a1a}
html[data-skin=press] .vol span,html[data-skin=press] .vol b{font-weight:700;font-size:12px;letter-spacing:.12em;color:#1a1a1a}html[data-skin=press] .vol input{accent-color:#1a1a1a}
html[data-skin=press] .hint,html[data-skin=press] .note{color:#5b5448;font-style:italic}
html[data-skin=press] .card{border:2px solid #1a1a1a;border-radius:0;background:#f7f1e3;box-shadow:4px 4px 0 #1a1a1a}
html[data-skin=press] h2{color:#1a1a1a;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border-bottom:3px double #1a1a1a;padding-bottom:6px}
html[data-skin=press] .list li{border-bottom:1px solid #b8ae98;align-items:center;color:#1a1a1a}html[data-skin=press] .list li time{color:#5b5448;font-weight:700;font-size:11px}html[data-skin=press] .list li.now{color:var(--g);font-weight:900}
html[data-skin=press] .list li .hb{border:1px solid #1a1a1a;border-radius:0;color:#1a1a1a;background:transparent}html[data-skin=press] .list li .hb.on{background:var(--g);border-color:var(--g);color:#fff}
html[data-skin=press] .days button{background:transparent;border:2px solid #1a1a1a;border-radius:0;color:#1a1a1a;font-weight:700;font-size:12px;letter-spacing:.06em}html[data-skin=press] .days button.on{background:#1a1a1a;color:#efe8d8}
html[data-skin=press] footer{border-top:3px double #1a1a1a;color:#5b5448}html[data-skin=press] footer a{color:#1a1a1a}

/* --- meters: no panels, no cards — just a full-screen wall of pumping meter bars, in every colour --- */
html[data-skin=meters]{--bg:#000;--bg2:#000!important;--line:#333!important;--txt:#fff;--dim:#bbb;--g:#fff;--gr:255,255,255;--g2:#fff}
html[data-skin=meters] body{background:#000}
html[data-skin=meters] *{font-family:'Archivo Black','Barlow',sans-serif!important}
html[data-skin=meters] .top{background:rgba(0,0,0,.72);border-bottom:2px solid #fff;z-index:6;backdrop-filter:blur(6px)}
html[data-skin=meters] .one{font-size:22px!important;text-shadow:none!important}html[data-skin=meters] .rad{font-size:15px;letter-spacing:.2em}html[data-skin=meters] .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
html[data-skin=meters] .logo img{border-radius:0;box-shadow:none}
html[data-skin=meters] .themebtn,html[data-skin=meters] .skinbtn{background:#000;border:2px solid #fff;color:#fff;border-radius:0;font-size:11px;letter-spacing:.14em;padding:6px 10px}
html[data-skin=meters] .themebtn i{display:none}html[data-skin=meters] .themebtn:hover,html[data-skin=meters] .skinbtn:hover{background:#fff;color:#000}
html[data-skin=meters] .onair{font-size:11px;letter-spacing:.2em}
html[data-skin=meters] .cols,html[data-skin=meters] .card,html[data-skin=meters] footer,html[data-skin=meters] .hint,html[data-skin=meters] .lab,html[data-skin=meters] .bar,html[data-skin=meters] .savebtn{display:none!important}
html[data-skin=meters] main.wrap{max-width:none;padding:0}
html[data-skin=meters] .player{position:static;overflow:visible;border:0;background:none;box-shadow:none;padding:0;margin:0}html[data-skin=meters] .player::before{display:none}
html[data-skin=meters] .eq{position:fixed;left:0;right:0;top:64px;bottom:0;height:auto;margin:0;display:flex;align-items:flex-end;gap:4px;padding:0 6px;z-index:0}
html[data-skin=meters] .eq i{flex:1;height:7%;opacity:1;border-radius:0;box-shadow:none;min-width:0;background:repeating-linear-gradient(0deg,var(--bc,#fff) 0 14px,transparent 14px 18px);animation:mpump var(--d,.8s) ease-in-out var(--dl,0s) infinite;animation-play-state:paused}
html[data-skin=meters] .eq.on i{animation:mpump var(--d,.8s) ease-in-out var(--dl,0s) infinite;animation-play-state:running}
@keyframes mpump{0%,100%{height:7%}30%{height:var(--hh,90%)}50%{height:calc(var(--hh,90%) * .45)}75%{height:var(--hh,95%)}}
html[data-skin=meters][data-themed] .eq i{--bc:var(--g)!important}
html[data-skin=meters] .np{position:fixed;left:22px;right:22px;bottom:104px;z-index:3;mix-blend-mode:difference;pointer-events:none;padding:0}
html[data-skin=meters] .title{font-size:clamp(30px,8vw,100px);line-height:.92;text-transform:uppercase;color:#fff;margin:0;letter-spacing:-.02em;text-shadow:none}
html[data-skin=meters] .artist{color:#fff;font-size:clamp(14px,2.4vw,26px);text-transform:uppercase;letter-spacing:.1em;margin-top:8px}
html[data-skin=meters] .ctl{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;margin:0;width:min(92vw,560px);background:rgba(0,0,0,.78);border:2px solid #fff;padding:10px 16px;gap:14px;flex-wrap:nowrap;backdrop-filter:blur(6px)}
html[data-skin=meters] .play{width:56px;height:56px;border-radius:0;background:#fff;color:#000;box-shadow:none;flex:none}
html[data-skin=meters] .vol{min-width:0}html[data-skin=meters] .vol span,html[data-skin=meters] .vol b{font-size:11px;letter-spacing:.14em;color:#fff}html[data-skin=meters] .vol input{accent-color:#fff}
@media(prefers-reduced-motion:reduce){html[data-skin=meters] .eq i,html[data-skin=meters] .eq.on i{animation:none;height:40%}}

/* --- wormhole: a spaceship flying down a glowing tunnel (canvas), with meter bars --- */
#wh{display:none}
html[data-skin=wormhole]{--bg:#02020c;--bg2:rgba(8,6,26,.55)!important;--line:rgba(var(--gr),.35)!important;--txt:#f1ecff;--dim:#b8abe6;--g:#a98bff;--gr:169,139,255;--g2:#d8c9ff}
html[data-skin=wormhole] body{background:#02020c}
html[data-skin=wormhole] #wh{display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:0}
html[data-skin=wormhole] *{font-family:'Orbitron','Barlow',system-ui,sans-serif!important}
html[data-skin=wormhole] .top{background:rgba(3,2,16,.55);border-bottom:1px solid rgba(var(--gr),.5);z-index:6;backdrop-filter:blur(8px)}
html[data-skin=wormhole] .one{color:var(--g);font-weight:900;font-size:24px!important;text-shadow:0 0 16px rgba(var(--gr),.9)!important}html[data-skin=wormhole] .rad{font-weight:700;letter-spacing:.3em;font-size:14px;color:#f1ecff}
html[data-skin=wormhole] .tag{font-size:11px;letter-spacing:.22em;color:var(--dim)}
html[data-skin=wormhole] .logo img{border-radius:50%;box-shadow:0 0 0 2px var(--g),0 0 22px rgba(var(--gr),.8)}
html[data-skin=wormhole] .themebtn,html[data-skin=wormhole] .skinbtn{background:rgba(5,3,24,.6);border:1px solid var(--g);color:var(--g);border-radius:999px;font-weight:700;font-size:10px;letter-spacing:.18em;padding:7px 13px;box-shadow:0 0 14px rgba(var(--gr),.35)}
html[data-skin=wormhole] .themebtn i{box-shadow:0 0 10px var(--g)}html[data-skin=wormhole] .themebtn:hover,html[data-skin=wormhole] .skinbtn:hover{background:var(--g);color:#02020c}
html[data-skin=wormhole] .onair{font-size:11px;letter-spacing:.2em}html[data-skin=wormhole] .onair i{border-radius:50%}
html[data-skin=wormhole] .cols,html[data-skin=wormhole] .card,html[data-skin=wormhole] footer,html[data-skin=wormhole] .hint,html[data-skin=wormhole] .lab,html[data-skin=wormhole] .bar,html[data-skin=wormhole] .eq,html[data-skin=wormhole] .savebtn{display:none!important}
html[data-skin=wormhole] main.wrap{max-width:none;padding:0}
html[data-skin=wormhole] .player{position:static;overflow:visible;border:0;background:none;box-shadow:none;padding:0;margin:0}html[data-skin=wormhole] .player::before{display:none}
html[data-skin=wormhole] .np{position:fixed;left:24px;right:24px;top:84px;bottom:auto;z-index:3;pointer-events:none;padding:0;text-align:center}
html[data-skin=wormhole] .title{font-size:clamp(22px,5vw,54px);line-height:1.05;text-transform:uppercase;color:#fff;margin:0;font-weight:900;letter-spacing:.06em;text-shadow:0 0 22px rgba(var(--gr),.95),0 0 4px #000}
html[data-skin=wormhole] .artist{color:var(--g2);font-size:clamp(12px,2vw,18px);text-transform:uppercase;letter-spacing:.25em;margin-top:8px;text-shadow:0 0 10px #000}
html[data-skin=wormhole] .ctl{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;margin:0;width:min(92vw,520px);background:rgba(3,2,16,.6);border:1px solid rgba(var(--gr),.55);border-radius:999px;padding:8px 18px 8px 10px;gap:14px;flex-wrap:nowrap;backdrop-filter:blur(8px);box-shadow:0 0 24px rgba(var(--gr),.3)}
html[data-skin=wormhole] .play{width:54px;height:54px;border-radius:50%;background:rgba(var(--gr),.18);color:var(--g);border:2px solid var(--g);box-shadow:0 0 20px rgba(var(--gr),.55);flex:none}
html[data-skin=wormhole] .vol{min-width:0}html[data-skin=wormhole] .vol span,html[data-skin=wormhole] .vol b{font-size:10px;letter-spacing:.2em;color:var(--g);font-weight:700}html[data-skin=wormhole] .vol input{accent-color:var(--g)}

.hint.promo{color:var(--g);font-weight:700;animation:bl 1.2s steps(2) 3}

/* "try our new skins and themes" pop-up, pointing at the two buttons */
#tip{position:fixed;z-index:2147483200;background:#0b0b10;color:#fff;border:2px solid var(--g);border-radius:12px;padding:12px 36px 12px 14px;font:600 15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 10px 34px rgba(0,0,0,.55),0 0 22px rgba(var(--gr),.35);max-width:min(330px,92vw);animation:tipin .4s ease-out}
#tip[hidden]{display:none}
#tip b{color:var(--g);letter-spacing:.06em;margin-right:4px}#tip u{text-decoration:none;color:var(--g);font-weight:800}
#tip #tipx{position:absolute;top:4px;right:6px;background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;opacity:.8}#tip #tipx:hover{opacity:1}
#tip i{position:absolute;top:-14px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:13px solid var(--g);animation:tipb 1s ease-in-out infinite}
@keyframes tipin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes tipb{50%{transform:translateY(-5px)}}
.themebtn.pulse,.skinbtn.pulse{animation:pulsebtn 1.2s ease-in-out infinite}
@keyframes pulsebtn{0%{box-shadow:0 0 0 0 rgba(var(--gr),.7)}70%{box-shadow:0 0 0 12px rgba(var(--gr),0)}100%{box-shadow:0 0 0 0 rgba(var(--gr),0)}}
@media(prefers-reduced-motion:reduce){#tip,#tip i,.themebtn.pulse,.skinbtn.pulse{animation:none}}

/* skin button: [ < | SKIN name ] - the arrow goes back one skin, the rest goes forward */
.skinbtn{flex-direction:row!important;gap:8px!important;left:134px}
.skinbtn .sk-t{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.1}
.skinbtn .sk-b{font-style:normal;font-size:1.9em;line-height:.8;padding:2px 9px 4px 2px;margin-right:1px;border-right:1px solid currentColor;opacity:.95;cursor:pointer}
.skinbtn .sk-b:hover{transform:scale(1.25)}
@media(max-width:900px){.skinbtn{left:auto}}
html[data-skin=mono] .skinbtn{left:20px}@media(max-width:900px){html[data-skin=mono] .skinbtn{left:auto}}

@media(max-height:560px){html[data-skin=wormhole] .np{top:76px}html[data-skin=wormhole] .title{font-size:clamp(16px,3.4vw,26px)}html[data-skin=wormhole] .artist{font-size:11px;margin-top:3px}}

/* ============ phones: a tidy two-row header with big thumb-sized THEME / SKIN buttons (desktop unchanged) ============ */
@media(max-width:900px){
  .top{position:static!important}
  .top .wrap{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 10px;padding:8px 12px 10px!important;align-items:center;justify-items:stretch;position:static!important}
  .top .logo{grid-column:1;grid-row:1;justify-self:start}.top .logo img{width:44px!important;height:44px!important}
  .top .logo .one{font-size:19px!important}.top .logo .rad{font-size:12px!important;letter-spacing:.14em!important}
  .top .tag{display:none!important}
  .top .onair{grid-column:2;grid-row:1;justify-self:end;position:static!important;transform:none!important;margin:0!important}
  .top .themebtn,.top .skinbtn{position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;width:100%;min-height:48px;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;font-size:12px!important;letter-spacing:.1em!important;padding:6px 8px!important}
  .top .themebtn{grid-column:1;grid-row:2}
  .top .skinbtn{grid-column:2;grid-row:2;gap:4px!important}
  .skinbtn .sk-b{font-size:2.3em!important;padding:0 10px 2px 2px!important;min-width:42px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
  .skinbtn .sk-t small{font-size:.85em}
  html[data-skin=mono] .themebtn{display:none!important}html[data-skin=mono] .top .skinbtn{grid-column:1 / 3}
  html[data-skin=meters] .eq{top:120px}
  html[data-skin=wormhole] .np{top:128px!important}
}
/* compact controls: small play button + short volume slider */
.ctl{gap:14px;margin-top:14px}
.play{width:52px;height:52px}.play svg{width:22px;height:22px}
html[data-skin]:not([data-skin=meters]):not([data-skin=wormhole]) .play{width:52px!important;height:52px!important}
html[data-skin=cassette] .play{width:60px!important;height:48px!important}
html[data-skin]:not([data-skin=meters]):not([data-skin=wormhole]) .play svg{width:22px!important;height:22px!important}
.vol{flex:none;min-width:0;gap:8px}.vol input[type=range]{flex:none;width:110px;height:22px}
.vol span{font-size:9px}.vol b{font-size:10px}
/* mobile only: tagline in top bar next to logo, 2-line live hint */
.mbr{display:none}
@media(max-width:900px){
  .top .wrap{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:8px!important}
  .top .logo{grid-column:1 / 6;grid-row:1}
  .top .tag{display:block!important;grid-column:6 / 9;grid-row:1;margin:0;text-align:left;font-size:10px!important;line-height:1.25;letter-spacing:0;white-space:normal!important;min-width:0;padding-left:6px}
  .top .tag .blink{display:inline!important}
  .top .onair{grid-column:9 / 13;white-space:nowrap;grid-row:1;justify-self:end;font-size:11px!important;letter-spacing:0!important;gap:5px}.top .onair span{font-size:11px!important;letter-spacing:0!important}
  .top .themebtn{grid-column:1 / 7!important;grid-row:2!important}
  .top .skinbtn{grid-column:7 / 13!important;grid-row:2!important}
  html[data-skin=mono] .top .skinbtn{grid-column:1 / 13!important;grid-row:2!important}
  .mbr{display:inline}
  .hint .live{text-transform:capitalize;display:block;text-align:center;line-height:1.5}
}
@media(max-width:380px){.top .tag{font-size:9px!important}.top .logo .rad{letter-spacing:.06em!important;font-size:11px!important}}
@media(max-width:900px){.hint .kvu{display:none}}

/* streaming-service links under each saved song */
.saved .slinks{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.saved .chip{font-size:12px;line-height:1;padding:7px 10px;border:1px solid var(--line);color:inherit;text-decoration:none;border-radius:999px;white-space:nowrap}
.saved .chip:hover{border-color:var(--g)}
.saved .chip.found{border-color:var(--g);color:var(--g);font-weight:700}
.saved .chip.srch{border-style:dashed;opacity:.7}
.saved .snf{font-size:11px;opacity:.65}


/* skin button: forward arrow on the right too  [ < | SKIN name | > ] */
.skinbtn .sk-f{font-style:normal;font-size:1.9em;line-height:.8;padding:2px 2px 4px 9px;margin-left:1px;border-left:1px solid currentColor;opacity:.95;cursor:pointer}
.skinbtn .sk-f:hover{transform:scale(1.25)}
@media(max-width:900px){.skinbtn .sk-f{font-size:2.3em!important;padding:0 2px 2px 10px!important;min-width:42px;text-align:center;display:inline-flex;align-items:center;justify-content:center}}

/* ---- QA fixes ---- */
@media(max-width:340px){.top .tag{display:none!important}}   /* the tagline was squashed against RADIO on 320px phones */
@media(pointer:coarse){
  #tip #tipx{min-width:40px;min-height:40px;font-size:24px;display:grid;place-items:center}
  .hb{min-width:40px;min-height:40px}
  .vol input[type=range]{height:34px}
  .top .skinbtn .sk-b,.top .skinbtn .sk-f{min-height:40px}
}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}.btnrow .savebtn{margin-top:0}
.lyrbtn.on{background:transparent;color:var(--g)}.lyrbtn.on:hover{background:var(--g);color:#031200}
#lyrics{overflow:hidden;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,92vw);height:min(72vh,72dvh);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0a0a0e;color:#fff;border:2px solid var(--g);border-radius:14px;z-index:2147483400;box-shadow:0 14px 50px rgba(0,0,0,.7);font-family:system-ui,sans-serif;text-shadow:none;letter-spacing:0;text-transform:none}
#lyrics.hidden{display:none}
#lyrics .lh{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.18)}#lyT{font-weight:800;font-size:16px}#lyA{color:#aab;font-size:13px;margin-top:2px}
#lyX{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;align-self:flex-start}
#lyB{white-space:pre-wrap;overflow-y:auto;padding:14px 18px;font-size:15px;line-height:1.55;text-align:center;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
#lyrics .lf{background:#0a0a0e;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 14px;font-size:10.5px;color:#aab;border-top:1px solid rgba(255,255,255,.18)}#lyH{flex:1;min-width:0}
#lyrics .lyn{display:none;gap:6px}#lyrics.sync .lyn{display:flex}#lyrics .lyn button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:6px 9px;font:700 11px system-ui;cursor:pointer}
#lyrics.sync #lyB{padding:30vh 18px;font-size:18px}
#lyrics.sync .ll{padding:5px 0;opacity:.38;transition:opacity .25s,transform .25s,color .25s;cursor:pointer;line-height:1.35}
#lyrics.sync .ll.on{opacity:1;color:var(--g);transform:scale(1.04);font-weight:800}
html[data-skin=meters] .lyrbtn{display:none!important}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:330px}
.btnrow .savebtn{box-sizing:border-box;width:100%;min-width:0;margin:0;padding:9px 6px!important;font-size:11px!important;line-height:1.2;text-align:center;white-space:nowrap;display:block!important}

#lyrics .lbt{display:flex;gap:8px;align-items:flex-start}#lyC{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:5px 10px;font:700 12px system-ui;cursor:pointer;white-space:nowrap}#lyC.done{background:var(--g);color:#000}

/* big Billy Legal sticker beside the player: desktop only (hidden on tablet + phone) */
.bigst{display:none}
@media(min-width:1280px){.bigst{display:block;position:absolute;z-index:30;top:128px;--w:min(230px,calc((100vw - 1000px)/2 - 26px));width:var(--w);left:calc(50% - 500px - var(--w) - 10px);transform:rotate(-6deg);filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));transition:transform .2s}
.bigst:hover{transform:rotate(-2deg) scale(1.04)}.bigst img{display:block;width:100%;height:auto}}
html[data-skin=mono] .bigst img{filter:grayscale(1) contrast(1.1)}
@media(prefers-reduced-motion:reduce){.bigst{transition:none}}

@media(min-width:1280px){.bigr{top:128px;left:auto;right:calc(50% - 500px - var(--w) - 10px);transform:rotate(6deg)}.bigr:hover{transform:rotate(2deg) scale(1.04)}
.bigs{position:fixed;top:auto;bottom:34px;left:auto;right:calc(50% - 500px - var(--w) - 10px);transform:rotate(-8deg)}.bigs:hover{transform:rotate(-3deg) scale(1.05)}}
html[data-skin=mono] .bigr img,html[data-skin=mono] .bigs img{filter:grayscale(1) contrast(1.1)}

/* shuttle sticker: animated engine flames (desktop only, same as the sticker) */
.bigs .fl{display:none}
@media(min-width:1280px){.bigs{right:calc(50% - 500px - var(--w) - 10px + var(--w) * .2)}
.bigs img{position:relative;z-index:1}
.bigs .fl{display:block;position:absolute;z-index:0;left:80%;top:37%;width:38%;height:auto;overflow:visible;transform-origin:0 50%;transform:rotate(-25deg);pointer-events:none;filter:drop-shadow(0 0 7px rgba(255,120,0,.85))}
.bigs .fl path{transform-box:fill-box;transform-origin:0 50%}
.bigs .fl .o{animation:fo .13s ease-in-out infinite alternate}.bigs .fl .m{animation:fm .09s ease-in-out infinite alternate}.bigs .fl .c{animation:fc .07s ease-in-out infinite alternate}}
@keyframes fo{from{transform:scale(.82,.9)}to{transform:scale(1.18,1.08)}}
@keyframes fm{from{transform:scale(1.1,.9)}to{transform:scale(.8,1.1)}}
@keyframes fc{from{transform:scale(.8,1)}to{transform:scale(1.15,.85)}}
html[data-skin=mono] .bigs .fl{filter:grayscale(1)}
@media(prefers-reduced-motion:reduce){.bigs .fl path{animation:none}}

/* small shuttle (all screen sizes): flies across the top banner end to end, back and forth, with engine flames */
.sh{inset:0 0 auto 0;height:84px}
.shx{animation:shflyx 24s linear infinite;animation-delay:0s}
.shy{position:relative;width:84px;margin-top:4px;animation:shflip 24s linear infinite,shbob 2.6s ease-in-out infinite alternate;animation-delay:0s,0s}
.shx:hover,.shx:hover .shy{animation-play-state:paused}
.shy .fl{display:block;position:absolute;z-index:0;left:80%;top:37%;width:42%;height:auto;overflow:visible;transform-origin:0 50%;transform:rotate(-25deg);pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,120,0,.85))}
.shy img{position:relative;z-index:1}
.shy .fl path{transform-box:fill-box;transform-origin:0 50%}
.shy .fl .o{animation:fo .13s ease-in-out infinite alternate}.shy .fl .m{animation:fm .09s ease-in-out infinite alternate}.shy .fl .c{animation:fc .07s ease-in-out infinite alternate}
@keyframes shflyx{0%{transform:translateX(-130px)}50%{transform:translateX(calc(100vw + 40px))}100%{transform:translateX(-130px)}}
@keyframes shflip{0%,49.99%{transform:rotate(-25deg) scaleX(-1)}50%,100%{transform:rotate(25deg)}}
@keyframes shbob{from{translate:0 0}to{translate:0 9px}}
html[data-skin=mono] .shy .fl{filter:grayscale(1)}
@media(prefers-reduced-motion:reduce){.shy .fl path{animation:none}}
@media(prefers-reduced-motion:reduce){.sh{display:none}}
@media(max-width:1279px){.sh{height:70px}.shy{width:62px;margin-top:3px}}
@media(max-width:720px){.sh{height:84px}.shy{width:80px;margin-top:0;animation-duration:46s,2.8s}.shx{animation-duration:46s}}

#gclock{font-family:'Press Start 2P',monospace;color:var(--g2);text-align:center;margin-top:6px}#gclock .gd{font-size:clamp(9px,2.4vw,13px);letter-spacing:.06em;opacity:.8;margin-bottom:14px}#gclock .gz{display:flex;gap:clamp(18px,6vw,48px);justify-content:center}#gclock .gz b{display:block;font-weight:400;font-size:clamp(8px,2vw,11px);letter-spacing:.12em;opacity:.7;margin-bottom:8px}#gclock .gt{display:block;font-size:clamp(13px,4vw,24px);letter-spacing:.05em;text-shadow:0 0 14px rgba(var(--gr),.55)}

/* wormhole: no floating stickers over the flight (the small sticker in the footer stays) */
html[data-skin=wormhole] .bigst,html[data-skin=wormhole] .bh,html[data-skin=wormhole] .sh{display:none!important}

/* header buttons: keep the text inside on small screens, per skin */
@media(max-width:700px){
  html[data-skin=gameboy] .tag{display:none!important}
  html[data-skin=wormhole] .np{top:182px!important}
  html[data-skin=wormhole] .title{font-size:clamp(16px,5.4vw,26px)}
  .themebtn,.skinbtn{min-width:0;white-space:nowrap}
  .skinbtn small{font-size:.6em;letter-spacing:.02em}
  html[data-skin=gameboy] .skinbtn small,html[data-skin=wormhole] .skinbtn small{font-size:.58em;letter-spacing:0}
  html[data-skin=gameboy] .skinbtn,html[data-skin=gameboy] .themebtn{padding-left:6px;padding-right:6px}
}
html[data-skin=gameboy] .themebtn,html[data-skin=gameboy] .skinbtn{font-size:8px;letter-spacing:.06em}