/* NOCTURNE design system v2 — black / graphite / silver / glam pink.
   Type: Bodoni Moda italic (fashion-editorial display) + Archivo (wide caps for Y2K labels, normal width for text). */
:root{color-scheme:dark;
--bg:#030304;--s1:#0b0b0f;--s2:#131318;--s3:#1d1d24;--line:#24242c;--line2:#3a3a46;
--tx:#f4f1f3;--mu:#8f8c97;--sv:#d6d8e0;
--pk:#ff3fa8;--pk2:#ff8ccc;--pk3:#ffd6ee;--pkd:#d81f8a;
--chrome:linear-gradient(135deg,#fafbff 0%,#a7aab8 38%,#eef0f6 56%,#80838f 100%);
--gloss:linear-gradient(180deg,#ff80c8 0%,#ff3fa8 52%,#dc1f8a 100%);
--disp:'Bodoni Moda','Didot','GFS Didot','Playfair Display','Times New Roman',serif;
--ui:Archivo,Inter,system-ui,sans-serif;
--r1:3px;--r2:10px;--r3:18px;--ease:cubic-bezier(.2,.7,.2,1);--side:252px;
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--tx);font:400 14px/1.5 var(--ui);font-stretch:100%;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:var(--noise);opacity:.035;pointer-events:none;z-index:60}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:left}
input{font:inherit;color:inherit}a{color:var(--sv)}
:focus-visible{outline:2px solid var(--pk2);outline-offset:3px}
.ic{width:20px;height:20px;flex:none}.mu{color:var(--mu)}.pad{padding:22px 0}
.cap,small{font:600 10.5px/1.2 var(--ui);font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;color:var(--mu)}
/* ---- type scale ---- */
h1{font:italic 500 clamp(42px,5.2vw,76px)/.98 var(--disp);letter-spacing:-.02em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
h2{font:italic 500 clamp(28px,3vw,38px)/1.05 var(--disp);letter-spacing:-.01em;color:var(--tx);margin:56px 0 22px;display:flex;align-items:center;gap:14px}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
h2:has(.chip)::after{display:none}h2 .chip{margin-left:auto;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.sp{width:12px;height:12px;fill:var(--pk);flex:none}
/* ---- sidebar (desktop) / top bar (mobile) ---- */
#top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(3,3,4,.9);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none}
.brand img{width:44px;height:auto;filter:drop-shadow(0 0 14px rgba(255,63,168,.35));transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand b{font:600 11px var(--ui);font-stretch:125%;letter-spacing:.42em;color:var(--sv)}
#top nav{display:none}.tp{margin-left:auto}
.nv{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;position:relative;color:var(--mu);font:600 11.5px var(--ui);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;border-radius:var(--r2);transition:color .25s,background .25s,transform .35s var(--ease)}
.nv:hover{color:var(--tx);transform:translateX(3px)}
.nv.on{color:var(--tx);background:linear-gradient(90deg,rgba(255,63,168,.14),transparent 85%)}
.nv::before{content:"";position:absolute;left:-18px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--pk);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);transform:scale(0) rotate(-90deg);transition:transform .45s var(--ease)}
.nv.on::before{transform:scale(1) rotate(0)}
.sc{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;border:1px solid var(--line2);font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;transition:border-color .25s,transform .2s}
.sc:hover{border-color:var(--pk2)}.sc:active{transform:scale(.97)}
.sc i{width:7px;height:7px;border-radius:50%;background:var(--s3)}.sc.on i{background:var(--pk);box-shadow:0 0 10px var(--pk)}
.sc.cta{background:var(--gloss);border-color:transparent;color:#1a0010}.sc.cta i{background:#1a0010}
.ib{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--mu);flex:none;position:relative;transition:color .2s,transform .2s,background .2s}
.ib:hover{color:var(--tx);background:rgba(255,255,255,.05)}.ib:active{transform:scale(.9)}.ib.on{color:var(--pk)}.ib sup{position:absolute;font-size:9px;top:5px;right:5px}
.tp .ib{display:none}
#main{padding:28px 20px 190px;position:relative}
@media(min-width:821px){
#top{position:fixed;inset:0 auto 0 0;width:var(--side);flex-direction:column;align-items:stretch;gap:6px;padding:30px 18px 24px 28px;background:linear-gradient(180deg,#09090d,#030304);border-right:1px solid var(--line);border-bottom:0}
.brand{flex-direction:column;align-items:flex-start;gap:14px;padding:0 0 26px;margin-bottom:14px;position:relative}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.brand img{width:112px}
#top nav{display:flex;flex-direction:column;gap:4px;margin:0}
.tp{margin:auto 0 0;flex-direction:column;align-items:stretch;gap:10px;display:flex}.tp .ib{display:grid;width:auto;border-radius:var(--r2);justify-content:start;padding:0 14px;height:40px}
.sc{justify-content:center}
#main{margin-left:var(--side);padding:44px 56px 190px;max-width:calc(1380px + var(--side))}}
/* ---- buttons, inputs ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:99px;font:600 11.5px var(--ui);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line2);transition:border-color .25s,transform .2s var(--ease),background .25s}
.btn:hover{border-color:var(--sv);background:rgba(255,255,255,.04)}.btn:active{transform:scale(.96)}
.btn.p{background:var(--gloss);color:#1a0010;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(150,0,90,.35),0 10px 26px -10px rgba(255,63,168,.7)}
.btn.p:hover{filter:brightness(1.08)}.btn[disabled]{opacity:.4;cursor:default}
.si{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line2);padding:0 4px;height:64px;margin-top:22px;color:var(--mu);transition:border-color .3s}
.si:focus-within{border-color:var(--pk);color:var(--pk)}.si input{flex:1;background:none;border:0;outline:0;font:italic 500 28px var(--disp);color:var(--tx);min-width:0}
.chip{padding:9px 16px;border-radius:99px;border:1px solid var(--line);color:var(--mu);white-space:nowrap;flex:none;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;transition:all .25s}
.chip:hover{color:var(--tx);border-color:var(--line2)}.chip.on{background:var(--tx);color:#000;border-color:var(--tx)}
.hs{display:flex;gap:22px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}.hs.wrap{flex-wrap:wrap}.hs.chips{gap:8px;margin:20px 0 4px}
/* ---- covers: disc + sleeve ---- */
.cw{position:relative;display:block;flex:none}
.cw>img,.cv{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;background:var(--s2);border-radius:var(--r1);position:relative;z-index:1}
.dsc{position:absolute;inset:4%;border-radius:50%;z-index:0;transition:transform .7s var(--ease);background:radial-gradient(circle,#030304 0 9%,#d6d8e0 10% 14%,transparent 15%)}
.dsc::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:conic-gradient(from 30deg,#e8eaf2,#7d808e,#f7dcee,#ff8ccc,#868998,#f0f2f8,#6d707e,#e8eaf2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 18px rgba(0,0,0,.6)}
@keyframes spin{to{transform:rotate(360deg)}}
.dsc::before{animation:spin 7s linear infinite;animation-play-state:paused}
.on-air .dsc,.cd:hover .dsc,.cs-art:hover .dsc{animation-play-state:running}
.on-air .dsc::before,.cd:hover .dsc::before,.cs-art:hover .dsc::before{animation-play-state:running}
.on-air .dsc,.cd:hover .dsc{transform:translateX(34%)}
/* ---- cards ---- */
.cd{display:block;width:176px;flex:none;transition:transform .5s var(--ease)}
.cd .cw{margin-bottom:14px}.cd .cw>img{border:1px solid var(--line);box-shadow:0 14px 30px -14px #000;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.cd:hover .cw>img{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 26px 40px -16px #000,0 0 0 1px rgba(255,255,255,.06)}
.cd b{display:block;font:italic 500 19px/1.15 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd span.s{display:block;margin-top:4px;color:var(--mu);font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd.ar .cw>img{aspect-ratio:3/4;border-radius:999px 999px 4px 4px}.cd.ar{width:190px}.cd.ar:nth-child(even){margin-top:34px}
.cd.ar .cw::after{content:"";position:absolute;inset:-7px;border:1px solid var(--line2);border-radius:999px 999px 8px 8px;opacity:.7;transition:inset .5s var(--ease),border-color .3s}.cd.ar:hover .cw::after{inset:-11px;border-color:var(--pk)}
.cd.ar{text-align:center}
.mag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px;align-items:start}.mag .cd{width:auto}
.mag .cd:first-child{grid-column:span 2;grid-row:span 2}.mag .cd:first-child b{font-size:34px;margin-top:4px}.mag .cd:nth-child(3n+2){margin-top:30px}
.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:34px 24px;margin-top:22px}.g .cd{width:auto}
/* ---- track rows ---- */
.tl{display:flex;flex-direction:column}
.tr{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 12px;border-radius:var(--r2);cursor:pointer;width:100%;border-bottom:1px solid rgba(255,255,255,.04);transition:background .25s,transform .3s var(--ease)}
.tr:hover{background:linear-gradient(90deg,var(--s2),transparent)}.tr:active{transform:scale(.995)}.tr.pl{grid-template-columns:48px 1fr}
.tr .cv{width:48px;height:48px}
.tt{min-width:0}.tt b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt span{color:var(--mu);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr.cur .tt b{color:var(--pk2)}.du{color:var(--mu);font:500 12px var(--ui);font-variant-numeric:tabular-nums;text-align:right}
.hr{counter-reset:n}.hr .tr{counter-increment:n;grid-template-columns:54px 52px minmax(0,1fr) auto}
.hr .tr::before{content:counter(n,decimal-leading-zero);font:italic 400 34px/1 var(--disp);color:var(--line2);transition:color .3s}.hr .tr:hover::before,.hr .tr.cur::before{color:var(--pk)}
.hr .tr .cv{width:52px;height:52px}
/* ---- home: cover story ---- */
.mast{display:flex;justify-content:space-between;padding:0 0 14px;border-bottom:1px solid var(--line2);margin-bottom:34px}
.cover-story{display:grid;grid-template-columns:minmax(260px,420px) 1fr;align-items:center;gap:0;position:relative;padding:8px 0 20px}
.cover-story::before{content:"";position:absolute;left:-6%;top:-20%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(255,63,168,.14),transparent);pointer-events:none}
.cs-art{position:relative;width:100%;max-width:420px;cursor:pointer}.cs-art .cw{width:78%}.cs-art .dsc{transform:translateX(34%)}
.cs-art .cw>img{box-shadow:0 40px 80px -20px #000,0 0 0 1px var(--line2);transition:transform .8s var(--ease)}.cs-art:hover .cw>img{transform:translate(-4px,-6px) rotate(-1.5deg)}
.cs-tx{position:relative;z-index:2;margin-left:-8%}.cs-tx h1{font-size:clamp(48px,7.4vw,118px);margin:16px 0 18px}
.cs-tx p{font:italic 400 22px/1.3 var(--disp);color:var(--sv);margin-bottom:30px}.cs-tx .cap{display:flex;align-items:center;gap:10px;color:var(--pk2)}
.ac{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.qa{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.qt{display:flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:99px;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;transition:all .25s}.qt:hover{border-color:var(--pk);color:var(--pk2)}.qt .ic{width:16px;height:16px;color:var(--pk)}
.duo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}
.quote{border:1px solid var(--line);border-radius:var(--r3);padding:34px;background:linear-gradient(160deg,var(--s2),var(--s1));position:sticky;top:28px}
.quote b{display:block;font:italic 500 34px/1.05 var(--disp);margin:14px 0}.quote p{color:var(--mu);margin-bottom:6px}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:62vh;justify-content:center;position:relative}
.hero::before{content:"";position:absolute;left:-4%;top:6%;width:560px;height:560px;max-width:100%;background:radial-gradient(closest-side,rgba(255,63,168,.18),transparent);animation:breathe 5s ease-in-out infinite;pointer-events:none}
.hero img{width:min(300px,60vw);position:relative}.hero h1,.hero p,.hero .btn{position:relative}.hero p{color:var(--mu);max-width:420px}
@keyframes breathe{50%{opacity:.45;transform:scale(.94)}}
.sig{display:flex;align-items:center;gap:16px;margin-top:80px;color:var(--mu)}.sig img{width:46px}.sig::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.em{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:64px 20px;border:1px solid var(--line);border-radius:var(--r3);margin-top:26px;background:radial-gradient(closest-side,rgba(255,63,168,.06),transparent)}
.em .sp{width:20px;height:20px}.em h3{font:italic 500 32px var(--disp)}.em p{color:var(--mu);max-width:420px;margin-bottom:8px}
/* ---- detail ---- */
.dh{display:flex;gap:44px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 40px}.dh .cw{width:min(300px,70vw)}.dh .cw>img{box-shadow:0 40px 70px -24px #000,0 0 0 1px var(--line2)}.dh .cw .dsc{transform:translateX(30%)}
.dh .cw.rd>img{border-radius:999px 999px 6px 6px;aspect-ratio:3/4}.dh .cw.rd .dsc{display:none}.dh small{color:var(--pk2)}.dh h1{margin:12px 0}.ac .btn{margin:0}
.bk .ic{transform:rotate(90deg)}
.demo{margin-top:40px;color:var(--mu);font-size:12px}
/* ---- loader & motion ---- */
.ld{display:grid;place-items:center;min-height:55vh}.ld img{width:110px;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
#main.in>*{animation:rise .7s var(--ease) both}#main.in>:nth-child(2){animation-delay:.07s}#main.in>:nth-child(3){animation-delay:.14s}#main.in>:nth-child(4){animation-delay:.21s}#main.in>:nth-child(n+5){animation-delay:.28s}
/* ---- player: digital device ---- */
#bar{position:fixed;z-index:25;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,540px) minmax(0,1fr);align-items:center;gap:20px;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));min-height:88px;background:linear-gradient(180deg,#1a1a20,#0a0a0d);border-top:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -20px 40px rgba(0,0,0,.6)}
.bl{display:flex;align-items:center;gap:16px;min-width:0;cursor:pointer}.bl .cw{width:60px;height:60px}.bl .cw>img{border:1px solid var(--line2)}.bl .dsc{transform:translateX(0)}
.bl .tt b{font:italic 500 18px var(--disp)}
.bc{display:flex;flex-direction:column;gap:6px}
.ctl{display:flex;justify-content:center;align-items:center;gap:14px}
.pp{width:46px;height:46px;background:var(--gloss);color:#1a0010!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px -8px rgba(255,63,168,.8)}.pp:hover{filter:brightness(1.1);background:var(--gloss)}
.tm{display:flex;align-items:center;gap:12px;color:var(--mu);font:500 11px var(--ui);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:.06em}.tm .seek{flex:1}
.br{display:flex;justify-content:flex-end;align-items:center;gap:8px}.vl{display:flex;align-items:center;gap:10px;color:var(--mu)}.vl .seek{width:100px}
.seek{-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--pk) var(--p,0%),var(--s3) var(--p,0%));cursor:pointer;transition:height .2s}.seek:hover{height:5px}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--chrome);border:0;box-shadow:0 0 0 3px rgba(0,0,0,.5)}
.seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e8eaf2;border:0}
.mini{display:none}
#full{position:fixed;inset:0;z-index:30;background:radial-gradient(70% 50% at 50% 0,rgba(255,63,168,.12),transparent),var(--bg);display:flex;flex-direction:column;align-items:center;gap:22px;padding:calc(14px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;animation:rise .5s var(--ease)}
#full>*{width:min(460px,100%);flex:none}.fh{display:flex;justify-content:space-between;align-items:center}
#full .cw.big{width:min(86%,44vh);margin:auto;transform:translateX(-8%)}#full .cw.big>img{box-shadow:0 50px 90px -30px #000,0 0 0 1px var(--line2)}#full .cw.big .dsc{transform:translateX(30%)}
.fi{display:flex;align-items:center;justify-content:space-between;gap:12px}.fi .tt b{font:italic 500 38px/1.05 var(--disp);white-space:normal}.fi .tt span{font-size:14px;margin-top:6px}
#full .ctl{justify-content:space-between}#full .pp{width:68px;height:68px}#full .vl{width:100%}#full .vl .seek{flex:1;width:auto}
#sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;justify-content:center;animation:rise .3s var(--ease)}#sheet[hidden],#full[hidden]{display:none}
.sh{width:min(540px,100%);max-height:74%;overflow:auto;background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line2);border-radius:var(--r3) var(--r3) 0 0;padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.sh h3{font:italic 500 32px var(--disp);margin-bottom:12px;padding:0 10px}.sh .tr{grid-template-columns:48px 1fr}.sh .tr.src{grid-template-columns:minmax(0,1fr) auto;cursor:default}.sh .tr.src:hover{background:none}
#toast{position:fixed;left:50%;bottom:116px;transform:translate(-50%,8px);background:var(--s2);border:1px solid var(--pk);padding:10px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease);z-index:50;font-size:13px}#toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:821px){#sheet{align-items:center}.sh{border-radius:var(--r3)}
#bar{left:calc(var(--side) + 18px);right:18px;bottom:16px;border:1px solid var(--line2);border-radius:var(--r3)}}
.tp .sc{max-width:100%}
/* ---- mobile ---- */
#tabs{display:none}
@media(max-width:820px){
#main{padding:18px 18px 200px}.mag{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.mag .cd:first-child{grid-column:span 2}.mag .cd:nth-child(3n+2){margin-top:0}
.cover-story{grid-template-columns:1fr;gap:6px}.cs-tx{margin:0}.cs-art{max-width:300px}.duo{grid-template-columns:1fr;gap:10px}.quote{position:static}
.hr .tr{grid-template-columns:40px 48px minmax(0,1fr)}.hr .tr .du,.tr .du{display:none}.hr .tr::before{font-size:26px}
.cd{width:150px}.cd.ar{width:150px}.si input{font-size:22px}.dh{gap:26px}
#bar{grid-template-columns:minmax(0,1fr) auto;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:9px 12px;min-height:68px;border:1px solid var(--line2);border-radius:var(--r3);overflow:hidden}
.bl .cw{width:48px;height:48px}.bc .ctl>:not(.pp),.bc .tm,.br{display:none}.pp{width:42px;height:42px}.bl .dsc{display:none}
.mini{display:block;position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:var(--pk)}
#tabs{display:grid;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:25;grid-template-columns:repeat(5,1fr);padding:6px;border:1px solid var(--line2);border-radius:var(--r3);background:linear-gradient(180deg,#17171c,#09090c)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;color:var(--mu);font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;transition:color .25s}.tb.on{color:var(--pk2)}
.tb img{width:44px;filter:grayscale(.7) brightness(.8);transition:filter .3s}.tb.k.on img{filter:drop-shadow(0 0 8px rgba(255,63,168,.7))}
#toast{bottom:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}
.tp .ib{gap:14px;font:600 11.5px var(--ui);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;width:auto}
@media(max-width:820px){.tp .ib{display:none}}
.tp .ib{display:flex;align-items:center}
.quote .cap{display:flex;align-items:center;gap:10px;color:var(--pk2)}
.bl .cw{margin-right:22px}.bl .dsc{transform:none}#bar.on-air .bl .dsc{transform:translateX(36%)}
@media(max-width:820px){.tp .ib{display:none}}
.dh .cw{margin-right:calc(min(300px,70vw)*.3)}@media(max-width:820px){.dh .cw{margin-right:0}.dh .cw .dsc{display:none}}