:root{
  --ground:#07090a; --panel:#10161a; --metal:#19222a; --line:#26323a;
  --teal:#2fe0c8; --amber:#ff8a3d; --text:#e4efed; --muted:#7f928f;
  --disp:"Syncopate","Arial Black",sans-serif;
  --body:"Barlow Condensed","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ground);color:var(--text)}
body{font-family:var(--body);font-size:17px;line-height:1.35}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:flex;flex-direction:column;gap:18px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 45% at 20% 0%,rgba(47,224,200,calc(.10 + var(--pa,0)*.18)),transparent 70%),
             radial-gradient(60% 45% at 80% 0%,rgba(255,138,61,calc(.06 + var(--pb,0)*.18)),transparent 70%)}
body.flash::after{content:"";position:fixed;inset:0;background:#fff;pointer-events:none;animation:fl .45s ease-out forwards;z-index:50}
@keyframes fl{from{opacity:.55}to{opacity:0}}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.wordmark{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3.4vw,34px);letter-spacing:.06em;line-height:1;display:block}
.wordmark em{font-style:normal;color:var(--teal)}
.sub{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.status{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);flex-wrap:wrap}
.status b{color:var(--text);font-variant-numeric:tabular-nums}
.live{color:#ff4d5e;display:flex;align-items:center;gap:6px;letter-spacing:.1em}
.live i{width:8px;height:8px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.proto{margin:0;font-size:14px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}

/* console */
.console{display:grid;grid-template-columns:1fr minmax(260px,320px) 1fr;gap:14px;
  background:linear-gradient(180deg,#121a1f,#0b1013);border:1px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)}
.deck{--acc:var(--teal);display:flex;flex-direction:column;gap:14px;align-items:center;padding:6px}
.deck-b{--acc:var(--amber)}
.deck-head{width:100%;display:flex;flex-direction:column;gap:2px}
.ch{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acc)}
.deck-head h2{margin:0;font-family:var(--disp);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.genre{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.1em}

.platter{position:relative;width:min(100%,250px);aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;
  background:repeating-radial-gradient(circle,#0c0f10 0 2px,#171c1e 2px 3px);
  box-shadow:0 0 0 6px #1d262b,0 0 0 7px #2b363c,0 18px 40px rgba(0,0,0,.7)}
.platter:active{cursor:grabbing}
.platter::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.07) 14%,transparent 20% 60%,rgba(255,255,255,.05) 64%,transparent 70%)}
.disc{position:absolute;inset:0;border-radius:50%}
.label{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle,#0a0d0e 0 7%,var(--acc) 8% 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#051312;padding:8%}
.lbl-top{font-family:var(--mono);font-size:9px;letter-spacing:.2em;opacity:.7;transform:translateY(-14px)}
.lbl-name{font-weight:600;font-size:13px;line-height:1.05;text-transform:uppercase;transform:translateY(10px)}
.marker{position:absolute;left:50%;top:3%;width:3px;height:26%;background:#fff;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 8px #fff}
.ring{position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--acc);opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 0 22px var(--acc)}
.deck.on .ring{opacity:.55}

.deck-row{display:flex;gap:12px;align-items:center;width:100%;justify-content:space-between}
.play{font-family:var(--mono);font-weight:700;letter-spacing:.12em;font-size:13px;color:var(--acc);background:#0b1012;
  border:1px solid var(--acc);border-radius:10px;padding:10px 16px;cursor:pointer}
.deck.on .play{background:var(--acc);color:#061010;box-shadow:0 0 20px var(--acc)}
.bpm{font-family:var(--mono);color:var(--muted);font-size:12px}
.bpm b{color:var(--text);font-size:20px}

.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.kbox{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.knob{width:52px;height:52px;border-radius:50%;position:relative;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#3a474e,#141a1d 70%);box-shadow:0 0 0 2px #0a0e10,0 6px 14px rgba(0,0,0,.6)}
.knob::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 225deg,var(--acc) 0 calc(var(--k,50)*2.7deg),#1f292e 0 270deg,transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);z-index:-1}
.knob{isolation:isolate}
.knob i{position:absolute;left:50%;top:6px;width:3px;height:14px;margin-left:-1.5px;background:var(--text);border-radius:2px;transform-origin:50% 20px}
.knob:focus-visible,.play:focus-visible,.pad:focus-visible,.power:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* mixer */
.mixer{display:flex;flex-direction:column;align-items:center;gap:14px;background:#0a0f12;border:1px solid var(--line);border-radius:14px;padding:14px}
#spec{width:100%;height:90px;display:block;border-radius:8px;background:#05080a}
.power{width:100%;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.12em;color:#061010;border:0;border-radius:10px;padding:14px;cursor:pointer;
  background:linear-gradient(90deg,var(--teal),#9cf3e6 50%,var(--amber));box-shadow:0 0 30px rgba(47,224,200,.4);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 50px rgba(255,138,61,.5)}}
.power[hidden]{display:none}
.channels{display:flex;align-items:stretch;justify-content:center;gap:14px}
.vu{width:12px;height:170px;border-radius:3px;background:#05080a;position:relative;overflow:hidden}
.vu::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 5px,#05080a 5px 7px),linear-gradient(0deg,#2fe0c8 0 60%,#f7e35a 60% 82%,#ff4d5e 82%);
  clip-path:inset(calc(100% - var(--v,0)*100%) 0 0 0);transition:clip-path .06s}
.chcol{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.14em}
.midread{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;min-width:56px}
.midread b{font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}

input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;margin:0;cursor:pointer}
input.v{writing-mode:vertical-lr;direction:rtl;width:40px;height:170px}
input.v::-webkit-slider-runnable-track{width:6px;background:#030506;border-radius:3px;box-shadow:inset 0 0 0 1px #2a3640}
input.v::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:20px;margin-left:-16px;border-radius:4px;
  background:linear-gradient(180deg,#dfe7e5 0 45%,#111 45% 55%,#8d9996 55%);box-shadow:0 4px 10px rgba(0,0,0,.7)}
input.v::-moz-range-track{width:6px;background:#030506;border-radius:3px}
input.v::-moz-range-thumb{width:38px;height:20px;border:0;border-radius:4px;background:linear-gradient(180deg,#dfe7e5 0 45%,#111 45% 55%,#8d9996 55%)}
.xf{display:flex;align-items:center;gap:10px;width:100%;font-family:var(--mono);font-size:12px}
.xf span:first-child{color:var(--teal)} .xf span:last-child{color:var(--amber)}
.hint{margin:0;color:var(--muted);font-size:14px;text-align:center}

/* zones */
.zones{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.zone{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.zone-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.zone-head h3{margin:0;font-family:var(--disp);font-size:13px;letter-spacing:.14em}
.zone-head span{color:var(--muted);font-size:14px}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pad{--c:var(--teal);aspect-ratio:1.25;border-radius:10px;border:1px solid #2a363d;cursor:pointer;touch-action:none;user-select:none;
  background:linear-gradient(160deg,#1b252b,#0d1215);color:var(--text);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .06s}
.pad small{font-weight:500;font-size:10px;color:var(--muted)}
.pad:nth-child(even){--c:var(--amber)}
.pad.hit{transform:scale(.95);background:var(--c);color:#061010;box-shadow:0 0 28px var(--c)}
.pad.hit small{color:#061010}
.pad.drop{--c:#ff4d5e}

.navgrid{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch}
.navfaders{display:flex;gap:6px}
.nf{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.nf input.v{height:150px;width:34px}
.nf.act{color:var(--teal)}
.panel{background:#0a0f12;border:1px solid var(--line);border-radius:10px;padding:14px;min-height:150px;
  opacity:calc(.35 + var(--lvl,1)*.65);transform:translateY(calc((1 - var(--lvl,1))*8px));transition:opacity .15s}
.panel h4{margin:0 0 8px;font-family:var(--disp);font-size:12px;letter-spacing:.12em;color:var(--teal)}
.panel ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.panel li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #1a2328;padding-bottom:5px}
.panel li span:last-child{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:right}
.panel .cities{display:flex;flex-wrap:wrap;gap:6px}
.panel .cities span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:15px}
.panel a{color:var(--amber)}
.panel p{margin:0 0 8px;color:var(--muted)}

@media (max-width:900px) and (min-height:521px){
  .console{grid-template-columns:1fr 1fr}
  .mixer{grid-column:1 / -1;order:-1}
  .zones{grid-template-columns:1fr}
}
@media (max-width:560px) and (min-height:521px){
  .console{grid-template-columns:1fr;padding:10px}
  .pads{grid-template-columns:repeat(4,1fr);gap:6px}
  .pad{font-size:10px}
  .navgrid{grid-template-columns:1fr}
  .knob{width:44px;height:44px}
}

/* ---------- news crate ---------- */
.sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:16px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sec-head h3{margin:0;font-family:var(--disp);font-size:clamp(15px,2vw,20px);letter-spacing:.12em}
.sec-head h3 em{font-style:normal;color:var(--teal)}
.sec-head span{color:var(--muted);font-size:15px}
.newsgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center}
.crate{position:relative;height:350px;perspective:1100px;perspective-origin:50% -10%;outline:none;overflow:hidden;border-radius:12px;
  background:radial-gradient(70% 60% at 50% 30%,#17232a,transparent 70%)}
.crate:focus-visible{box-shadow:0 0 0 2px #fff}
.sleeve{--c:var(--teal);position:absolute;left:50%;top:22px;width:230px;height:230px;margin-left:-115px;border-radius:6px;
  transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s;cursor:pointer;touch-action:none;user-select:none;
  background:linear-gradient(150deg,var(--c) 0%,color-mix(in srgb,var(--c) 35%,#0b1114) 45%,#0b1114 100%);
  box-shadow:0 -2px 0 rgba(255,255,255,.08) inset,0 14px 30px rgba(0,0,0,.55);color:#f2f7f6;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:14px}
.sleeve[data-cat="Eventos"]{--c:var(--amber)} .sleeve[data-cat="Reseña"]{--c:#b99cff}
.sleeve::before{content:"";position:absolute;width:190px;height:190px;right:-70px;top:-60px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(0,0,0,.35) 0 2px,rgba(0,0,0,.15) 2px 4px);opacity:.55}
.sleeve .sl-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.12em;position:relative}
.sleeve .sl-title{font-weight:600;font-size:21px;line-height:1.02;text-transform:uppercase;position:relative;text-wrap:balance}
.sleeve .stamp{position:absolute;right:12px;bottom:70px;font-family:var(--disp);font-size:9px;letter-spacing:.14em;border:1px solid currentColor;padding:3px 6px;transform:rotate(-8deg);opacity:.8}
.sleeve.focus:hover{filter:brightness(1.12)}
.crate-front{position:absolute;left:50%;bottom:0;width:min(92%,340px);transform:translateX(-50%);height:96px;z-index:300;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#26313a,#141b20);border-top:3px solid #394650;display:flex;align-items:center;justify-content:space-between;padding:0 10px;
  box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.crate-front b{font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:#8fa3a0}
.cnav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#0b1013;color:var(--text);font-size:18px;cursor:pointer}
.cnav:hover{border-color:var(--teal);color:var(--teal)}
.count{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}
.newsinfo{display:flex;flex-direction:column;gap:10px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.newsinfo h4{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.02;font-weight:600;text-transform:uppercase;text-wrap:balance}
.newsinfo p{margin:0;color:#b6c6c3;max-width:52ch}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:9px;padding:10px 14px;cursor:pointer;border:1px solid var(--line);background:#0b1013;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--teal)}
.btn.pri{background:var(--teal);color:#061010;border-color:var(--teal)}
.btn.amb{border-color:var(--amber);color:var(--amber)}
.btn:focus-visible,.cnav:focus-visible,.mk:focus-visible{outline:2px solid #fff;outline-offset:2px}
.small{font-size:14px;color:var(--muted)}

/* ---------- mix shelf ---------- */
.mixtop{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.moodknob{--acc:var(--amber);width:78px;height:78px}
.moods{display:flex;gap:6px;flex-wrap:wrap}
.mood{font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.mood.on{background:var(--amber);border-color:var(--amber);color:#140a02}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.mixcard{background:#0a0f12;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:opacity .35s,filter .35s}
.mixcard.dim{opacity:.28;filter:grayscale(.9)}
.mcover{--c:var(--teal);aspect-ratio:1;position:relative;cursor:grab;touch-action:none;user-select:none;overflow:hidden;
  background:radial-gradient(circle at 70% 30%,var(--c),transparent 60%),repeating-conic-gradient(from 0deg,#0d1316 0 6deg,#121a1e 6deg 12deg)}
.mcover::after{content:"";position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#0a0d0e 0 6%,var(--c) 7% 22%,transparent 23%),repeating-radial-gradient(circle,#0b0e0f 0 2px,#181e21 2px 3px);box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .6s}
.mixcard:hover .mcover::after{transform:translate(-50%,-50%) rotate(200deg)}
.mcover b{position:absolute;left:12px;top:12px;right:12px;font-family:var(--disp);font-size:12px;letter-spacing:.1em;line-height:1.2;z-index:1;text-shadow:0 2px 8px #000}
.mcover .dur{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:4px;z-index:1}
.mbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.mbody .mt{font-weight:600;font-size:18px;line-height:1.1}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chips span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;border:1px solid var(--line);border-radius:999px;padding:2px 7px;color:var(--muted);text-transform:uppercase}
.mact{display:flex;gap:6px;margin-top:auto}
.mact .btn{padding:7px 9px;font-size:11px}

/* ---------- dock (persistent player) ---------- */
body.hasdock .wrap{padding-bottom:190px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(7,9,10,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.mbar{--acc:var(--teal);display:grid;grid-template-columns:auto minmax(0,250px) minmax(0,1fr) auto auto;gap:12px;align-items:center;max-width:1180px;margin:0 auto;width:100%}
.mbar[data-k="B"]{--acc:var(--amber)}
.mtag{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#061010;font-family:var(--mono);font-weight:700;display:grid;place-items:center}
.mnow{display:flex;flex-direction:column;min-width:0}
.mnow b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--acc)}
.mnow span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnow a{color:var(--muted);font-family:var(--mono);font-size:11px}
.mwave{position:relative;height:46px;cursor:pointer}
.mwave canvas{width:100%;height:100%;display:block}
.mk{position:absolute;top:-4px;bottom:-4px;width:18px;margin-left:-9px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--text)}
.mk::before{content:"";position:absolute;left:8px;top:10px;bottom:0;width:2px;background:rgba(255,255,255,.35)}
.mk span{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;line-height:12px;background:#0b1013;border:1px solid var(--line);border-radius:3px;padding:0 3px}
.mk.cur span{background:var(--acc);color:#061010;border-color:var(--acc)}
.mk.cur::before{background:var(--acc)}
.mtime{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mbtns{display:flex;gap:6px}
.mbtns .btn{padding:6px 9px;font-size:11px}
.deck .prog{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(var(--acc) calc(var(--p,0) * 1turn),rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 94%,#000 95%);mask:radial-gradient(closest-side,transparent 94%,#000 95%)}
.deck.mixmode .prog{opacity:1}
.deck.newsmode .ring{opacity:1;animation:pulse2 1s infinite}

/* drag */
.ghost{position:fixed;left:0;top:0;width:86px;height:86px;border-radius:50%;pointer-events:none;z-index:90;
  background:radial-gradient(circle,#0a0d0e 0 6%,var(--c,#2fe0c8) 7% 24%,transparent 25%),repeating-radial-gradient(circle,#0c0f10 0 2px,#1a2023 2px 3px);
  box-shadow:0 14px 34px rgba(0,0,0,.8);animation:spin 1s linear infinite}
@keyframes spin{to{rotate:1turn}}
.dropdock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:none;gap:12px;z-index:80}
body.dragging .dropdock{display:flex}
body.dragging{cursor:grabbing}
.dz{--acc:var(--teal);width:150px;height:74px;border:2px dashed var(--acc);border-radius:14px;display:grid;place-items:center;background:rgba(10,15,18,.96);font-family:var(--mono);font-weight:700;letter-spacing:.1em;color:var(--acc);text-align:center;font-size:12px}
.dz[data-drop="B"]{--acc:var(--amber)}
.dz.over,.platter.over .ring{background:var(--acc);color:#061010}
.platter.over .ring{opacity:.4}
body.dragging .platter .ring{opacity:.8;animation:pulse2 .8s infinite}
@keyframes pulse2{50%{box-shadow:0 0 44px var(--acc)}}

/* sheet */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.sheet[hidden]{display:none}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.sheet-card{position:relative;width:min(760px,100%);max-height:calc(100% - 20px);overflow:auto;background:#0d1316;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 90px #000;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(30px) scale(.97);opacity:0}}
.addr{position:sticky;top:0;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#141b1f;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:#b6c6c3;z-index:2}
.addr .dots{display:flex;gap:5px}.addr .dots i{width:9px;height:9px;border-radius:50%;background:#2b363c}
.addr .u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#0a0f12;border-radius:6px;padding:5px 9px}
.addr button{background:none;border:0;color:var(--text);font-size:18px;cursor:pointer;padding:4px 8px}
.tabs{display:flex;gap:4px;padding:12px 18px 0}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:8px 12px;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:0;background:transparent;color:var(--muted);cursor:pointer}
.tab.on{background:#141b1f;color:var(--text)}
.pane{padding:20px 22px 26px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.pane h2{margin:0;font-size:clamp(26px,4vw,40px);line-height:1;font-weight:600;text-transform:uppercase;text-wrap:balance}
.pane .lead{font-size:20px;color:#d3e0de;margin:0;max-width:60ch}
.pane .note{margin:0;color:var(--muted);font-size:15px;border-left:2px solid var(--line);padding-left:10px}
.rel{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rel li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #1a2328;padding:6px 0}
.rel li span:first-child{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:44px}
.rel li a,.rel li button{color:var(--text);background:none;border:0;font:inherit;cursor:pointer;text-align:left;padding:0;flex:1;text-decoration:none}
.rel li a:hover,.rel li button:hover{color:var(--teal)}
.serp{background:#fff;color:#202124;border-radius:10px;padding:16px 18px;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;gap:4px}
.serp .site{display:flex;align-items:center;gap:8px;font-size:13px}
.serp .site i{width:26px;height:26px;border-radius:50%;background:#0b1013;color:#2fe0c8;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px}
.serp .site small{display:block;color:#4d5156;font-size:12px}
.serp .st{color:#1a0dab;font-size:20px;line-height:1.3}
.serp .sd{font-size:14px;color:#4d5156;line-height:1.5}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.checks li::before{content:"✓ ";color:var(--teal);font-weight:700}
pre.jsonld{margin:0;background:#070a0b;border:1px solid var(--line);border-radius:8px;padding:12px;font-family:var(--mono);font-size:11px;color:#9fb5b1;overflow-x:auto;max-width:100%}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--teal);color:#061010;font-family:var(--mono);font-weight:700;font-size:12px;padding:9px 14px;border-radius:999px;z-index:120;animation:rise .3s}

@media (max-width:900px) and (min-height:521px){.newsgrid{grid-template-columns:1fr}}
@media (max-width:700px) and (min-height:521px){
  .mbar{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .mwave{grid-column:1 / -1;order:5}
  .mtime{display:none}
  body.hasdock .wrap{padding-bottom:260px}
}

/* ---------- hardware look ---------- */
.rig{--brush:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  display:grid;grid-template-columns:1fr minmax(270px,330px) 1fr;gap:0;border-radius:18px;overflow:hidden;
  background:var(--brush),linear-gradient(180deg,#1e2023,#111214 60%,#0c0d0e);
  box-shadow:0 40px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px #2a2d31;position:relative}
.rig::before,.rig::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;top:12px;background:radial-gradient(circle at 35% 35%,#6a6f75,#1a1c1e 70%);box-shadow:inset 0 0 0 1px #000}
.rig::before{left:12px}.rig::after{right:12px}
.hdeck{--acc:var(--teal);padding:22px 20px 20px;display:flex;flex-direction:column;gap:16px;align-items:center}
.hdeck.hb{--acc:var(--amber)}
.dh{width:100%;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:1px solid #2a2d31;padding-bottom:8px}
.dtag{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;color:#061010;background:var(--acc);padding:2px 7px;border-radius:3px}
.dname{font-family:var(--disp);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#e8eeee}
.dgen{font-size:14px;color:#8a9395;text-transform:uppercase;letter-spacing:.1em;margin-left:auto}
.jogwrap{position:relative;width:min(100%,290px);aspect-ratio:1;display:grid;place-items:center}
.leds{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from -2deg,#25282c 0 4deg,transparent 4deg 10deg);
  -webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93% 99%,transparent 100%);mask:radial-gradient(closest-side,transparent 92%,#000 93% 99%,transparent 100%)}
.hdeck.on .leds{background:repeating-conic-gradient(from -2deg,var(--acc) 0 4deg,transparent 4deg 10deg);filter:drop-shadow(0 0 6px var(--acc))}
.jog.platter{width:90%;aspect-ratio:1;border-radius:50%;cursor:grab;
  background:conic-gradient(from 0deg,#8e959b,#d9dee2 12%,#6b7176 25%,#c9ced2 38%,#5d6267 50%,#d4d9dd 62%,#72787d 75%,#dfe3e6 88%,#8e959b);
  box-shadow:0 18px 40px rgba(0,0,0,.8),inset 0 0 0 2px #0b0c0d}
.jog.platter::after{display:none}
.jog .ring{inset:-7%;border-width:2px}
.jog .prog{position:absolute;inset:-4%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(var(--acc) calc(var(--p,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent 95%,#000 96%);mask:radial-gradient(closest-side,transparent 95%,#000 96%)}
.hdeck.mixmode .prog{opacity:1}
.hdeck.newsmode .ring{opacity:1;animation:pulse2 1s infinite}
.hdeck.on .ring{opacity:.35}
.jog .disc{inset:5%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 0 30%,rgba(255,255,255,.04) 30.5%,transparent 31%),
    repeating-radial-gradient(circle,#141517 0 1.5px,#1c1e21 1.5px 3px);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.08),inset 0 -10px 30px rgba(0,0,0,.6)}
.jog .disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,transparent 0 8%,rgba(255,255,255,.08) 14%,transparent 22% 58%,rgba(255,255,255,.05) 64%,transparent 72%)}
.jog .label{inset:30%;padding:8%;border-radius:50%;color:#e9f5f3;
  background:radial-gradient(circle,#0a0c0d 0 9%,#16242a 10% 62%,var(--acc) 63% 69%,#0a0c0d 70%);
  box-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent),inset 0 0 0 2px #000}
.jog .lbl-top{font-size:9px;color:var(--acc);opacity:1;transform:translateY(-12px)}
.jog .lbl-name{font-size:11px;transform:translateY(8px);max-width:70%}
.jog .marker{top:1.5%;height:10%;width:4px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.dctl{width:100%;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.tport{display:flex;flex-direction:column;gap:10px}
.hbtn{width:58px;height:58px;border-radius:50%;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;color:#cfd6d8;
  background:radial-gradient(circle at 40% 30%,#34373b,#141517 70%);border:0}
.hbtn.cue{box-shadow:0 0 0 3px #ff8a1f,0 0 16px rgba(255,138,31,.45),0 6px 12px #000}
.hbtn.play{box-shadow:0 0 0 3px #1f7a3f,0 6px 12px #000;color:#7fdc9c}
.hbtn.play.lit{box-shadow:0 0 0 3px #3dff7a,0 0 26px rgba(61,255,122,.7),0 6px 12px #000;color:#eaffef}
.hbtn:active{transform:translateY(1px)}
.hbtn:focus-visible,.onair:focus-visible,.pad.hw:focus-visible{outline:2px solid #fff;outline-offset:4px}
.kn4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kb{display:flex;flex-direction:column;align-items:center;gap:6px}
.kb label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#8a9395}
.knob.pk{width:50px;height:50px;background:none;box-shadow:none;cursor:ns-resize;touch-action:none;isolation:isolate;border-radius:50%;position:relative}
.knob.pk::before{inset:-7px;z-index:0;-webkit-mask:radial-gradient(circle,transparent 64%,#000 66%);mask:radial-gradient(circle,transparent 64%,#000 66%)}
.pkimg{position:absolute;inset:3px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 42% 32%,#4b5055 0 18%,#26292c 45%,#101113 72%),repeating-conic-gradient(#0d0e0f 0 6deg,#26292c 6deg 12deg);
  background-blend-mode:normal;box-shadow:0 5px 10px #000,inset 0 1px 1px rgba(255,255,255,.18)}
.pkimg::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:36%;margin-left:-1.5px;background:#f3f5f5;border-radius:2px;box-shadow:0 0 4px rgba(255,255,255,.6)}
.hmix{padding:18px 16px;display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--brush),linear-gradient(180deg,#151618,#0d0e0f);
  box-shadow:inset 1px 0 0 #2a2d31,inset -1px 0 0 #2a2d31}
.screen{position:relative;width:100%;aspect-ratio:16/10;border-radius:8px;background:#04070a;overflow:hidden;
  box-shadow:0 0 0 6px #0b0c0d,0 0 0 7px #34383c,0 14px 30px #000}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.08),transparent 35%)}
.scr-home{display:flex;flex-direction:column;height:100%;padding:10px;gap:6px}
.scr-decks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd{--acc:var(--teal);display:flex;flex-direction:column;min-width:0;border-top:2px solid var(--acc);padding-top:4px;font-size:12px;line-height:1.15}
.sdb{--acc:var(--amber)}
.sd i{font-style:normal;font-family:var(--mono);color:var(--acc);font-size:10px}
.sd b{font-family:var(--disp);font-size:10px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.sd span{color:#8a9395;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd em{font-style:normal;font-family:var(--mono);color:#8a9395;font-size:10px}
.sd em b{font-family:var(--mono);color:var(--text);font-size:14px}
.screen #spec{flex:1;min-height:0;height:auto;width:100%;background:#020406}
.scr-mix{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:#8a9395}
.scr-mix b{color:var(--text)}
.scr-mix .live i{width:6px;height:6px}
.screen .power{position:absolute;inset:0;border-radius:0;font-size:12px;z-index:2}
.chans{display:flex;align-items:stretch;justify-content:center;gap:14px}
.hmix .vu{height:190px;width:10px;background:#050607;box-shadow:inset 0 0 0 1px #222}
.chf{display:flex;flex-direction:column;align-items:center;gap:6px}
.chn{font-family:var(--mono);font-weight:700;color:#d6dcdd;font-size:14px}
input.hwf{writing-mode:vertical-lr;direction:rtl;width:46px;height:170px;
  background:repeating-linear-gradient(0deg,transparent 0 16px,#3a3e42 16px 17px) left/8px 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 16px,#3a3e42 16px 17px) right/8px 100% no-repeat}
input.hwf.sm{height:140px;width:40px}
input.hwf::-webkit-slider-runnable-track{width:6px;background:#000;border-radius:3px;box-shadow:0 0 0 2px #1d1f22}
input.hwf::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:26px;margin-left:-17px;border-radius:4px;
  background:linear-gradient(180deg,#43474c 0,#1c1e21 30%,#1c1e21 42%,#f4f6f6 42% 56%,#1c1e21 56%,#121315 100%);box-shadow:0 6px 10px #000,inset 0 1px 0 rgba(255,255,255,.2)}
input.hwf::-moz-range-track{width:6px;background:#000;border-radius:3px}
input.hwf::-moz-range-thumb{width:40px;height:26px;border:0;border-radius:4px;background:linear-gradient(180deg,#43474c 0,#1c1e21 42%,#f4f6f6 42% 56%,#1c1e21 56%)}
.mid{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8a9395}
.onair{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 45% 40%,#bcdcff 0 20%,#3d8bff 55%,#163a73 100%);
  box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 18px rgba(61,139,255,.55);animation:pulse3 1.6s infinite}
.onair.lit{animation:none;box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 34px 8px rgba(61,139,255,.9)}
@keyframes pulse3{50%{box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 30px 6px rgba(61,139,255,.8)}}
.xfw{display:flex;align-items:center;gap:10px;width:100%;font-family:var(--mono);font-size:12px;color:#8a9395}
input.hwx{flex:1;height:44px;background:repeating-linear-gradient(90deg,transparent 0 14px,#3a3e42 14px 15px) center top/100% 8px no-repeat,repeating-linear-gradient(90deg,transparent 0 14px,#3a3e42 14px 15px) center bottom/100% 8px no-repeat}
input.hwx::-webkit-slider-runnable-track{height:6px;background:#000;border-radius:3px;box-shadow:0 0 0 2px #1d1f22}
input.hwx::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:42px;margin-top:-18px;border-radius:4px;
  background:linear-gradient(90deg,#43474c,#1c1e21 36%,#f4f6f6 36% 62%,#1c1e21 62%,#121315);box-shadow:0 6px 10px #000}
input.hwx::-moz-range-track{height:6px;background:#000}
input.hwx::-moz-range-thumb{width:24px;height:42px;border:0;border-radius:4px;background:linear-gradient(90deg,#43474c,#1c1e21 36%,#f4f6f6 36% 62%,#1c1e21 62%)}
.brand{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;color:#dfe5e6;display:flex;gap:8px}
.brand b{color:var(--teal)}
.hwz{background:var(--brush,none),linear-gradient(180deg,#1a1c1f,#0e0f11);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1a1c1f,#0e0f11);border-color:#2a2d31}
.pad.hw{aspect-ratio:1.2;border-radius:8px;background:#0c0d0f;border:3px solid color-mix(in srgb,var(--c) 70%,#000);color:#d8dfe0;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--c) 25%,transparent),0 0 10px color-mix(in srgb,var(--c) 30%,transparent),0 6px 10px #000}
.pad.hw small{color:#7d8588}
.pad.hw.hit{background:var(--c);border-color:#fff;color:#061010;box-shadow:0 0 34px var(--c);transform:scale(.96)}
.pad.hw.hit small{color:#061010}
.lcd{background:#05080a;box-shadow:inset 0 0 0 1px #000,0 0 0 4px #0b0c0d,0 0 0 5px #34383c}
.nf input.hwf{height:140px}
@media (max-width:900px) and (min-height:521px){.rig{grid-template-columns:1fr 1fr}.hmix{grid-column:1 / -1;order:-1;box-shadow:inset 0 -1px 0 #2a2d31}}
@media (max-width:600px) and (min-height:521px){.rig{grid-template-columns:1fr}.dctl{grid-template-columns:1fr}.tport{flex-direction:row;justify-content:center}.knob.pk{width:42px;height:42px}}

/* ---------- on demand ---------- */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.crumbs button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:4px 0}
.crumbs button:hover{color:var(--text)}
.crumbs button:last-of-type:not(:first-child),.crumbs span{color:var(--c,var(--teal))}
.crumbs i{font-style:normal;color:#4a5558}
.progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.progcard{--c:var(--teal);background:#0a0f12;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pcover{position:relative;aspect-ratio:16/10;border:0;padding:0;cursor:pointer;overflow:hidden;
  background:radial-gradient(90% 90% at 80% 20%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),#0d1215}
.pcover b{position:absolute;left:16px;bottom:14px;font-family:var(--disp);font-size:clamp(16px,2vw,22px);letter-spacing:.08em;color:#fff;text-shadow:0 2px 12px #000}
.pdisc{position:absolute;right:-12%;top:50%;width:62%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle,#0a0d0e 0 5%,var(--c) 6% 20%,transparent 21%),repeating-radial-gradient(circle,#0b0e0f 0 2px,#1a2023 2px 3px);box-shadow:0 10px 40px #000;transition:transform .8s}
.progcard:hover .pdisc{transform:translateY(-50%) rotate(180deg)}
.pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pdesc{margin:0;font-size:18px;line-height:1.2}
.psched{margin:0;font-family:var(--mono);font-size:11px;color:var(--c);letter-spacing:.06em}
.pcount{margin:0;color:var(--muted)}
.pbody .btns{margin-top:auto;padding-top:6px}
.odhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.odhead div{display:flex;flex-direction:column}
.odhead b{font-family:var(--disp);font-size:18px;letter-spacing:.08em;color:var(--c)}
.odhead span{color:var(--muted)}
.djgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.djcard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#0a0f12;border:1px solid var(--line);border-radius:12px;padding:12px}
.djcard:hover{border-color:var(--c)}
.djcard div{display:flex;flex-direction:column;min-width:0}
.djcard b{font-size:19px;font-weight:600}
.djcard span{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.djcard em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--c)}
.avatar{width:58px;height:58px;border-radius:50%;border:0;cursor:grab;touch-action:none;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:15px;color:#061010;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 0 0 3px #0a0f12,0 0 0 4px color-mix(in srgb,var(--c) 60%,transparent)}
.avatar.big{width:110px;height:110px;font-size:26px;cursor:default}
.btn.sm{padding:6px 10px;font-size:11px}
.djpage{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.djside{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.djside b{font-size:26px;font-weight:600;margin-top:8px}
.djside span{color:var(--muted)}
.djside em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--c)}
.sesslist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sesslist.many{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.sesslist li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"v t d" "v a a";gap:4px 12px;align-items:center;background:#0a0f12;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sesslist li:hover{border-color:var(--c)}
.sesslist .vinyl{grid-area:v;width:46px;height:46px;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle,#0a0d0e 0 7%,var(--c) 8% 24%,transparent 25%),repeating-radial-gradient(circle,#0b0e0f 0 2px,#1a2023 2px 3px);box-shadow:0 4px 10px #000}
.sesslist b{grid-area:t;font-family:var(--mono);font-size:16px}
.sesslist .dur{grid-area:d;font-family:var(--mono);font-size:12px;color:var(--muted)}
.sesslist .acts{grid-area:a;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:900px) and (min-height:521px){.progs{grid-template-columns:1fr}.djpage{grid-template-columns:1fr}.djside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}.avatar.big{width:70px;height:70px;font-size:18px}}

/* ---------- TV ---------- */
.tvbtn{width:44px;height:26px;border-radius:5px;border:0;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;color:#cfd6d8;
  background:linear-gradient(180deg,#34373b,#17191b);box-shadow:0 0 0 1px #000,0 0 0 2px #3a3e42,0 4px 8px #000;margin-bottom:6px}
.tvbtn.lit{background:#ff3b4e;color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #ff7a86,0 0 18px rgba(255,59,78,.8)}
.tvbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.scr-tv{position:absolute;inset:0;z-index:1;cursor:zoom-in;overflow:hidden;background:#000}
.scr-tv[hidden]{display:none}
.tvvid{position:absolute;inset:0;filter:blur(18px) saturate(1.3)}
.tvvid i{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;opacity:.75;animation:blob 9s ease-in-out infinite alternate}
.tvvid i:nth-child(1){background:#2fe0c8;left:-10%;top:-20%}
.tvvid i:nth-child(2){background:#ff8a3d;right:-15%;top:10%;animation-duration:7s}
.tvvid i:nth-child(3){background:#b99cff;left:25%;bottom:-40%;animation-duration:11s}
@keyframes blob{to{transform:translate(18%,12%) scale(1.25)}}
.scr-tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px)}
.tvtxt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;display:flex;flex-direction:column;gap:2px;z-index:1;text-shadow:0 2px 12px #000}
.tvtxt b{font-family:var(--disp);font-size:clamp(14px,3.2vw,22px);letter-spacing:.14em}
.tvtxt span{font-size:12px;color:#e6f1ef}
.tvbadge{position:absolute;left:8px;top:8px;z-index:1;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700;font-size:10px;background:#ff3b4e;color:#fff;padding:2px 7px;border-radius:3px}
.tvbadge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.tvhint{position:absolute;right:8px;bottom:6px;z-index:1;font-family:var(--mono);font-size:9px;color:#fff;opacity:.8}
.tvfullbar{display:none}
.scr-tv.full{position:fixed;inset:0;z-index:200;cursor:default}
.scr-tv.full .tvtxt b{font-size:clamp(28px,6vw,72px)}
.scr-tv.full .tvtxt span{font-size:20px}
.scr-tv.full .tvbadge{left:20px;top:calc(20px + env(safe-area-inset-top,0px));font-size:14px;padding:4px 10px}
.scr-tv.full .tvhint{display:none}
.scr-tv.full .tvfullbar{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:2;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.scr-tv.full .tvfullbar .small{color:#dfe7e6;width:100%;text-align:center}
/* ---------- v8: header lines, logos, round TV, langs ---------- */
.hdeck .dh{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;width:100%;border-bottom:1px solid #2a2d31;padding-bottom:8px;min-height:0}
.hdeck .dtag{grid-row:1 / span 2;align-self:center}
.dart,.dtit{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;height:22px}
.dart{font-family:var(--disp);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#eef3f3}
.dtit{font-size:17px;color:#9aa4a6}
.jog .label{background:#111a1d;display:grid;place-items:center;padding:9%;overflow:hidden;box-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent),inset 0 0 0 3px var(--acc),inset 0 0 0 5px #000}
.jog .label.lg2{padding:6%;background:#0e1a18}
.jog .label img.logo{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.jog .label{box-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent);isolation:isolate;-webkit-mask-image:radial-gradient(circle,#000 70.5%,transparent 71%);mask-image:radial-gradient(circle,#000 70.5%,transparent 71%)}
.jog .label img.logo{position:relative;z-index:0}
.jog .label::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 3px var(--acc),inset 0 0 0 5px #000}
.jog .lglow{position:absolute;inset:30%;border-radius:50%;box-shadow:0 0 22px color-mix(in srgb,var(--acc) 55%,transparent);pointer-events:none}
.jog .label.lg2{padding:9%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hmix .mid{justify-content:space-between;padding-top:4px}
.rb{display:flex;flex-direction:column;align-items:center;gap:6px}
.tvbtn{width:44px;height:44px;border-radius:50%;border:0;margin:0;cursor:pointer;font-size:0;
  background:radial-gradient(circle at 45% 40%,#ffd0d5 0 20%,#ff3b4e 55%,#6e0d18 100%);
  box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 18px rgba(255,59,78,.55)}
.tvbtn.lit{background:radial-gradient(circle at 45% 40%,#fff 0 22%,#ff5a6a 58%,#8a1020 100%);box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 34px 8px rgba(255,59,78,.9)}
.langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langs button{background:none;border:0;color:var(--muted);font:inherit;font-size:11px;padding:3px 9px;cursor:pointer}
.langs button.on{background:var(--teal);color:#061010}

/* ---------- v11: narrow crossfader ---------- */
.xfw{width:auto;justify-content:center}
input.hwx{flex:0 0 132px;width:132px}

/* ---------- v12: realistic jog ---------- */
.hdeck .dh{grid-template-columns:auto minmax(0,1fr) auto}
.cover{grid-column:3;grid-row:1 / span 2;width:48px;height:48px;border-radius:4px;overflow:hidden;background:#0b0c0d center/cover no-repeat;
  box-shadow:0 0 0 1px #000,0 0 0 2px #2c3034,0 6px 12px rgba(0,0,0,.6)}
.cover.gen{display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px;color:#061010}
.jogwrap{width:min(100%,300px)}
.leds{inset:0;background:repeating-conic-gradient(from -1deg,#1d2023 0 1.6deg,transparent 1.6deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 97%,#000 97.5% 99.5%,transparent 100%);mask:radial-gradient(closest-side,transparent 97%,#000 97.5% 99.5%,transparent 100%)}
.hdeck.on .leds{background:repeating-conic-gradient(from -1deg,color-mix(in srgb,var(--acc) 85%,#000) 0 1.6deg,transparent 1.6deg 7.5deg);filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--acc) 60%,transparent))}
.jogwrap::before{content:"";position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,transparent 95.5%,#000 96.5%,#000 98.2%,rgba(255,255,255,.09) 99%,transparent 100%)}
.jogwrap::after{content:"";position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent 0 3%,rgba(255,255,255,.55) 12%,rgba(255,255,255,.1) 22%,transparent 30% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 98.3%,#000 98.8% 99.8%,transparent 100%);mask:radial-gradient(closest-side,transparent 98.3%,#000 98.8% 99.8%,transparent 100%)}
.jog.platter{width:90%;background:radial-gradient(circle,#0a0b0c 0 70%,#1f2023 71%,#18191b 80%,#1b1c1f 92%,#111213 97%,#2c2f33 99%,#070707 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.85),0 0 0 1.5px #000}
.jog .rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jog .disc{inset:13%;box-shadow:0 0 0 1.5px #000,0 0 0 2.5px rgba(255,255,255,.07),0 0 10px rgba(0,0,0,.9);background:
  conic-gradient(from 8deg,transparent 0 4%,rgba(255,255,255,.085) 8.5%,transparent 13% 29%,rgba(255,255,255,.05) 33.5%,transparent 38% 54%,rgba(255,255,255,.085) 58.5%,transparent 63% 79%,rgba(255,255,255,.05) 83.5%,transparent 88%),
  radial-gradient(circle,transparent 0 47%,#050606 48% 50.5%,rgba(255,255,255,.05) 51%,transparent 52%),
  repeating-radial-gradient(circle,#121315 0 1px,#191b1d 1px 2.2px)}
.jog .disc::before{background:none}
.jog .lglow,.jog .label{inset:26%}
.jog .marker{top:2%;height:7%;width:3px}
.dirs{position:absolute;inset:-8%;width:116%;height:116%;pointer-events:none;overflow:visible}
.dirs line{stroke:#9aa3a6;stroke-width:.7}
.dirs path{fill:#9aa3a6;stroke:none}
.dirs text{fill:#aeb6b8;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:5.2px;letter-spacing:.02em}
.dirs .sign{font-size:6.5px;font-weight:400}

.hdeck.on .ring{opacity:0}
.jog .ring{box-shadow:none}

/* ---------- v13: steel transport buttons ---------- */
.tport{gap:8px;align-items:center;padding:8px 6px}
.blbl{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:8px;letter-spacing:.02em;color:#c5ccce;margin-top:6px}
.hbtn{--rc:#ff8a1f;width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;display:grid;place-items:center;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:9px;letter-spacing:0;color:#26292c;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0 8%,transparent 30%),
    radial-gradient(circle,transparent 0 62%,rgba(0,0,0,.28) 88%,rgba(0,0,0,.5) 100%),
    conic-gradient(from 18deg,#2f3236,#9ea3a8 9%,#3c3f43 19%,#80858a 27%,#2b2e31 37%,#8e9398 47%,#35383c 57%,#a3a8ac 66%,#3a3d41 76%,#7f8489 85%,#2f3236),
    repeating-conic-gradient(rgba(255,255,255,.07) 0 .8deg,rgba(0,0,0,.07) .8deg 1.6deg);
  background-blend-mode:normal,normal,normal,overlay;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.45),
    0 0 0 4px #070808,0 0 0 5px #1e2124,0 0 0 9px var(--rc),0 0 0 10px color-mix(in srgb,var(--rc) 55%,#000),0 0 16px 9px color-mix(in srgb,var(--rc) 35%,transparent),0 8px 14px 8px rgba(0,0,0,.6)}
.hbtn span{text-shadow:0 1px 0 rgba(255,255,255,.45);position:relative}
.hbtn.cue{--rc:#ff8a1f}
.hbtn.play{--rc:#1f9a4a;color:#26292c}
.hbtn.play.lit{--rc:#3dff6e}
.hbtn.play.lit{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.45),
    0 0 0 4px #070808,0 0 0 5px #1e2124,0 0 0 9px var(--rc),0 0 0 10px color-mix(in srgb,var(--rc) 55%,#000),0 0 22px 12px rgba(61,255,110,.45),0 8px 14px 8px rgba(0,0,0,.6)}
.hbtn:active{transform:scale(.97)}
.dirs path{fill:#aab2b5;stroke:none}
.dirs text{font-size:5px;fill:#b9c1c3}
.dirs .sign{font-size:6.5px}
@media (max-width:600px) and (min-height:521px){.tport{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px}.blbl{display:none}}

.hbtn.cue,.hbtn.play{box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.55),
    0 0 0 4px #070808,0 0 0 5px #1e2124,0 0 0 9px var(--rc),0 0 0 10px color-mix(in srgb,var(--rc) 55%,#000),0 0 16px 9px color-mix(in srgb,var(--rc) 30%,transparent),0 8px 14px 8px rgba(0,0,0,.6)}
.hbtn.play.lit{box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.55),
    0 0 0 4px #070808,0 0 0 5px #1e2124,0 0 0 9px var(--rc),0 0 0 10px color-mix(in srgb,var(--rc) 55%,#000),0 0 22px 12px rgba(61,255,110,.4),0 8px 14px 8px rgba(0,0,0,.6)}
.hbtn span{color:#d9dee0;text-shadow:0 -1px 0 rgba(0,0,0,.7)}

/* ---------- v14: deck display + transport spacing ---------- */
.hdeck .dh{position:relative;border-bottom:0;padding:9px 10px;border-radius:8px;background:linear-gradient(180deg,#05090c,#03060800);background-color:#04070a;
  box-shadow:0 0 0 5px #0b0c0d,0 0 0 6px #34383c,0 10px 22px rgba(0,0,0,.7),inset 0 0 18px rgba(0,0,0,.9);overflow:hidden;width:calc(100% - 12px);margin-top:4px}
.hdeck .dh::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 38%)}
.hdeck .dh .dtag{font-size:10px;padding:2px 6px}
.hdeck .dart{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--acc);text-shadow:0 0 8px color-mix(in srgb,var(--acc) 45%,transparent)}
.hdeck .dtit{font-family:var(--mono);font-size:13px;color:#d6e2e0}
.hdeck .cover{width:44px;height:44px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #1f2a2e}
.tport{gap:0;padding:12px 8px}
.tport .hbtn.cue{margin-bottom:26px}
.tport .blbl{margin:0 0 16px}

/* ---------- v15: brushed aluminium ---------- */
:root{--alu:url(/assets/home/img/8ddbdb922298.svg)}
.rig{background:
   linear-gradient(115deg,rgba(255,255,255,.0) 0 30%,rgba(255,255,255,.045) 42%,rgba(255,255,255,0) 55%,rgba(255,255,255,.03) 72%,rgba(255,255,255,0) 85%),
   var(--alu),
   linear-gradient(180deg,#232528,#17181a 45%,#111214);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal;
  box-shadow:0 40px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.5),0 0 0 1px #050505}
.hmix{background:
   linear-gradient(115deg,rgba(255,255,255,0) 0 35%,rgba(255,255,255,.035) 48%,rgba(255,255,255,0) 60%),
   var(--alu),linear-gradient(180deg,#191a1c,#0f1011);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal;
  box-shadow:inset 2px 0 0 #050505,inset 3px 0 0 rgba(255,255,255,.06),inset -2px 0 0 #050505,inset -3px 0 0 rgba(255,255,255,.06)}
.hwz{background:
   linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 60%),
   var(--alu),linear-gradient(180deg,#202225,#141517);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal;
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.6),0 0 0 1px #050505;border-color:transparent}

/* ---------- v16: channel balance ---------- */
.balk{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:6px}
.knob.pk.bal{width:34px;height:34px}
.knob.pk.bal::before{inset:-5px;background:conic-gradient(from 225deg,#2a2e32 0 270deg,transparent 0)}
.knob.pk.bal[data-deck="A"]{--acc:var(--teal)} .knob.pk.bal[data-deck="B"]{--acc:var(--amber)}
.knob.pk.bal .pkimg::after{top:3px;height:34%;width:2px;margin-left:-1px}
.balbl{display:flex;justify-content:space-between;width:54px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:7px;color:#9aa3a6}
.balbl span:nth-child(2){font-size:6px;letter-spacing:.02em;color:#7d8588}
.hmix .vu{align-self:flex-end;height:170px}
.hmix .mid{padding-top:58px}

/* ---------- v17: bigger jogs in a recessed well, display, spacing ---------- */
.hmix .chans{margin-top:26px}
.hdeck .dh{padding:7px 7px 7px 8px;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px}
.hdeck .dh .dtag{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 6px;line-height:1;align-self:stretch;border-radius:4px}
.hdeck .dh .dtag small{font-size:8px;letter-spacing:.14em;font-weight:700}
.hdeck .dh .dtag b{font-size:22px;font-family:var(--disp);line-height:1;margin-top:2px}
.hdeck .dart,.hdeck .dtit{line-height:24px;height:24px}
.hdeck .dart{font-size:14px}.hdeck .dtit{font-size:14px}
.hdeck .cover{width:auto;height:58px;aspect-ratio:1;align-self:stretch;border-radius:4px}
.hdeck{gap:20px}
.jogwrap{width:min(100%,392px);border-radius:50%;
  background:radial-gradient(circle,#070808 0 84%,#101113 93%,#0a0b0c 100%);
  box-shadow:inset 7px 9px 16px rgba(0,0,0,.95),inset -4px -5px 8px rgba(255,255,255,.06),
    0 0 0 2px #040404,0 0 0 3.5px rgba(255,255,255,.07),0 0 0 7px #121315,0 0 0 8px rgba(0,0,0,.8),-3px -4px 6px rgba(0,0,0,.5),4px 5px 8px rgba(255,255,255,.03)}
.jogwrap::before{inset:-2.4%;background:none;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,0,0,.55) 0 8%,rgba(255,255,255,.02) 20%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.05) 48%,rgba(0,0,0,.45) 65%,rgba(0,0,0,.6) 85%,rgba(0,0,0,.55));
  -webkit-mask:radial-gradient(closest-side,transparent 95.4%,#000 96% 99.4%,transparent 100%);mask:radial-gradient(closest-side,transparent 95.4%,#000 96% 99.4%,transparent 100%)}
.jogwrap::after{inset:0;background:conic-gradient(from 60deg,transparent 0 4%,rgba(255,255,255,.28) 14%,rgba(255,255,255,.06) 26%,transparent 34% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 98.2%,#000 98.8% 99.8%,transparent 100%);mask:radial-gradient(closest-side,transparent 98.2%,#000 98.8% 99.8%,transparent 100%)}
.leds{inset:2.2%;-webkit-mask:radial-gradient(closest-side,transparent 97.2%,#000 97.6% 99.4%,transparent 100%);mask:radial-gradient(closest-side,transparent 97.2%,#000 97.6% 99.4%,transparent 100%)}
.jog.platter{width:88%;box-shadow:0 14px 26px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.8),0 0 0 1.5px #000,0 -1px 0 1.5px rgba(255,255,255,.05)}
.dirs{inset:-10%;width:120%;height:120%}
.rig{grid-template-columns:1fr minmax(270px,320px) 1fr}
@media (max-width:1100px) and (min-height:521px){.jogwrap{width:min(100%,340px)}}

.jogwrap{width:min(100%,356px)}
.hmix .chans{margin-top:64px}
.hmix .xfw{margin-top:18px}

/* ---------- v18: pro EQ knobs ---------- */
.kb{gap:2px}
.kb label,.kb .ktop{order:-1;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.02em;color:#e3e8e9;margin-bottom:4px}
.knob.pk,.knob.pk.bal{width:44px;height:44px;margin:12px}
.knob.pk::before,.knob.pk.bal::before{inset:-12px;z-index:0;opacity:1;border-radius:0;background:url(/assets/home/img/863853c853cc.svg) center/100% 100% no-repeat;-webkit-mask:none;mask:none}
.pkimg,.knob.pk.bal .pkimg{inset:0;border-radius:50%;
  background:
    radial-gradient(circle,rgba(0,0,0,0) 0 60%,rgba(0,0,0,.55) 63%,rgba(0,0,0,0) 66%),
    radial-gradient(circle at 50% 50%,#1b1c1e 0 34%,transparent 35%),
    repeating-conic-gradient(#0c0d0e 0 5deg,#2b2d30 5deg 10deg),
    conic-gradient(from 25deg,#6d7277,#e4e8eb 10%,#7d8287 22%,#cfd4d8 34%,#5c6166 48%,#dfe3e6 60%,#6b7075 72%,#c6cbcf 86%,#6d7277);
  -webkit-mask:none;mask:none;
  box-shadow:0 6px 10px rgba(0,0,0,.85),0 2px 3px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.6)}
.pkimg::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 0 63.5%,transparent 64%),
    radial-gradient(circle at 45% 38%,rgba(255,255,255,.12),transparent 55%);
  -webkit-mask:radial-gradient(circle,#000 0 62%,transparent 63%);mask:radial-gradient(circle,#000 0 62%,transparent 63%)}
.pkimg{background-clip:border-box}
.pkimg::after,.knob.pk.bal .pkimg::after{top:1px;height:52%;width:4px;margin-left:-2px;border-radius:3px;background:linear-gradient(#ffffff,#dfe3e4);box-shadow:0 0 0 .5px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.6)}
.ksc{display:flex;justify-content:space-between;width:74px;margin-top:-6px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:8px;color:#d7dcdd;white-space:nowrap}
.ksc span:first-child{margin-left:-4px}
.balk{margin-bottom:2px}
.balbl{display:none}
.hmix .chans{margin-top:34px}

.pkimg,.knob.pk.bal .pkimg{background:
    radial-gradient(circle at 42% 30%,rgba(255,255,255,.35),transparent 45%),
    conic-gradient(from 25deg,#5f6469,#eef1f3 9%,#7b8085 20%,#d6dade 32%,#50555a 46%,#e6e9ec 58%,#666b70 70%,#cdd2d6 84%,#5f6469)}
.pkimg::before{inset:17%;border-radius:50%;-webkit-mask:none;mask:none;
  background:radial-gradient(circle at 45% 35%,rgba(255,255,255,.1),transparent 60%),repeating-conic-gradient(#0a0b0c 0 6deg,#26292c 6deg 12deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 6px rgba(0,0,0,.8)}
.pkimg::after,.knob.pk.bal .pkimg::after{z-index:1}
.ksc{width:66px;font-size:6.5px;margin-top:-8px}
.ksc span:first-child{margin-left:-2px}

.balk .ktop{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:10px;letter-spacing:.02em;color:#e3e8e9;margin-bottom:0}
.balk{gap:0}
/* ---------- v19: pro layout (EQ in mixer, pads under jog) ---------- */
.blbl{white-space:nowrap}
.hdeck .dctl{grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.dpads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.dpads .pad.hw{aspect-ratio:1;border-width:2.5px;border-radius:6px;font-size:10px;padding:0;min-width:0}
.dpads .pad.hw small{font-size:7px}
.hmix{gap:10px;padding:16px 10px}
.strips{display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:start;margin-top:6px}
.strip{display:flex;flex-direction:column;align-items:center}
.hmix .kb{gap:0}
.hmix .kb label{font-size:9px;margin-bottom:0}
.hmix .knob.pk,.hmix .knob.pk.bal{width:34px;height:34px;margin:9px 9px 8px}
.hmix .knob.pk::before{inset:-9px}
.hmix .ksc{width:54px;font-size:6px;margin-top:-7px;margin-bottom:3px}
.hmix .kb:last-child .knob.pk{width:40px;height:40px}
.mcenter{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 4px 0}
.vus{display:flex;gap:6px}
.hmix .vus .vu{height:190px;width:9px;align-self:auto}
.faders{display:grid;grid-template-columns:1fr 1fr;width:62%;justify-items:center}
.hmix .xfw{margin-top:4px}
@media (max-width:600px) and (min-height:521px){.hdeck .dctl{grid-template-columns:1fr}.dpads{gap:6px}}

.faders{grid-template-columns:1fr auto 1fr;width:100%;align-items:end}
.fmid{display:flex;flex-direction:column;gap:12px;align-items:center;padding-bottom:4px}
.rb span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8a9395}
.hmix input.hwf{height:140px}
.hmix .vus .vu{height:250px}
.screen{aspect-ratio:16/9}
.hmix .knob.pk,.hmix .knob.pk.bal{margin:8px 9px 7px}
.hmix{gap:8px}

.hmix .vus .vu{height:200px}
/* ---------- v21: master meter panel ---------- */
.mcenter{padding:0 2px}
.mpanel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:6px;
  background:linear-gradient(180deg,#0b0c0d,#070808);box-shadow:inset 0 0 0 1px #000,inset 0 2px 8px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.mlevel{display:flex;flex-direction:column;align-items:center}
.mlt{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:8px;line-height:1.05;text-align:center;color:#e3e8e9}
.hmix .knob.pk.mlev{width:30px;height:30px;margin:8px 8px 7px}
.hmix .knob.pk.mlev::before{inset:-8px}
.hmix .mlevel .ksc{width:52px;margin-top:-6px}
.mhead{display:flex;justify-content:space-between;width:100%;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:6.5px;color:#cfd5d6;margin-top:4px}
.mclip{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:6px;color:#ff3b4e;margin-bottom:-1px}
.meters{display:flex;gap:4px;align-items:stretch}
.mcol{display:flex;flex-direction:column;gap:4px}
.mcol i{display:block;width:5px;height:7px;border-radius:1px;background:#1b2a1c}
.mcol i[data-db="15"],.mcol i[data-db="12"]{background:#3a1216}
.mcol i[data-db="9"],.mcol i[data-db="6"],.mcol i[data-db="3"],.mcol i[data-db="0"]{background:#3a2a10}
.mcol i.on{background:#3dff5a;box-shadow:0 0 4px rgba(61,255,90,.8)}
.mcol i.on[data-db="9"],.mcol i.on[data-db="6"],.mcol i.on[data-db="3"],.mcol i.on[data-db="0"]{background:#ffb02e;box-shadow:0 0 4px rgba(255,176,46,.8)}
.mcol i.on[data-db="15"],.mcol i.on[data-db="12"]{background:#ff3b4e;box-shadow:0 0 4px rgba(255,59,78,.8)}
.mst{display:flex;gap:2px}
.mscale{display:flex;flex-direction:column;gap:4px}
.mscale b{display:block;height:7px;line-height:7px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:5.5px;color:#cfd5d6;text-align:center;width:12px}
.mdb{display:flex;justify-content:space-around;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:6px;color:#9aa3a6}

/* ---------- v22: scale console to window (up and down) ---------- */
.rigbox{width:100%;display:flex;justify-content:center}
@media (min-width:900px),(max-height:520px){
  .rigbox .rig{width:1180px;flex:none}
}
/* ---------- v23: rack below console ---------- */
.belowbox{width:100%;display:flex;justify-content:center}
.below{width:100%;display:flex;flex-direction:column;gap:18px}
@media (min-width:900px),(max-height:520px){.below{width:1180px;flex:none}}
.rack{position:relative;padding:14px 44px;border-radius:12px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,#0c0d0e,#070808);box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 0 0 1px #000,0 0 0 1px rgba(255,255,255,.05)}
.rack::before,.rack::after{content:"";position:absolute;top:10px;bottom:10px;width:26px;border-radius:4px;
  background:radial-gradient(circle at 50% 50%,#020202 0 3.2px,transparent 3.6px) 50% 12px/26px 30px repeat-y,linear-gradient(90deg,#26292c,#3b3f43 45%,#1c1e20);
  box-shadow:inset 0 0 0 1px #000,inset 1px 0 0 rgba(255,255,255,.12)}
.rack::before{left:9px}.rack::after{right:9px}
.rmod{position:relative;border-radius:5px;padding:14px 22px 16px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 60%),var(--alu),linear-gradient(180deg,#222427,#141517);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.7),0 0 0 1px #050505}
.screw{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a9095,#2a2d30 70%);box-shadow:inset 0 0 0 1px #000}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.5px;margin-top:-.75px;background:#111;transform:rotate(35deg)}
.screw.tl{left:7px;top:7px}.screw.tr{right:7px;top:7px}.screw.bl{left:7px;bottom:7px}.screw.br{right:7px;bottom:7px}
.rtitle{display:flex;align-items:baseline;gap:10px;margin:0 6px 10px}
.rtitle b{font-family:var(--disp);font-size:13px;letter-spacing:.16em;color:#e8eeee}
.rtitle span{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--teal)}
.rhint{font-style:normal;margin-left:auto;color:#8a9395;font-size:13px}
.rbody{display:grid;grid-template-columns:230px 230px minmax(0,1fr) 150px;gap:16px;align-items:stretch;height:250px}
.rprogs{display:flex;flex-direction:column;gap:10px}
.rprog{--c:var(--teal);flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;text-align:left;cursor:pointer;
  border:0;border-radius:6px;padding:8px 12px;color:#cfd6d8;background:linear-gradient(180deg,#2a2d31,#17191b);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #000,0 4px 8px rgba(0,0,0,.6)}
.rprog i{grid-row:1 / span 3;width:10px;height:10px;border-radius:50%;background:#2a2d30;box-shadow:inset 0 0 0 1px #000}
.rprog b{font-family:var(--disp);font-size:11px;letter-spacing:.1em}
.rprog span{font-family:var(--mono);font-size:9px;color:#8a9395;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rprog em{font-style:normal;font-family:var(--mono);font-size:9px;color:#6f787b}
.rprog.on{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #000,0 0 0 2px var(--c),0 0 18px color-mix(in srgb,var(--c) 35%,transparent)}
.rprog.on i{background:var(--c);box-shadow:0 0 8px var(--c)}
.rprog.on span{color:var(--c)}
.rlcd{display:flex;flex-direction:column;min-height:0;border-radius:6px;background:#04070a;padding:8px 6px 6px;
  box-shadow:0 0 0 4px #0b0c0d,0 0 0 5px #34383c,inset 0 0 16px rgba(0,0,0,.9)}
.rlh{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--teal);padding:0 6px 6px;border-bottom:1px solid #16242a;white-space:nowrap;overflow:hidden}
.rlcd ul{list-style:none;margin:4px 0 0;padding:0;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#2a3a3e transparent}
.rlcd li button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:#cfdcda;font-family:var(--mono);font-size:12px;padding:5px 8px;border-radius:3px;cursor:pointer;text-align:left}
.rlcd li button em{font-style:normal;color:#5f6b6e;font-size:10px}
.rlcd li button:hover{background:#0c1519}
.rlcd li button.sel{background:var(--teal);color:#061010}.rlcd li button.sel em{color:#061010}
#rSess li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:5px 8px;border-radius:3px;cursor:grab;font-family:var(--mono);font-size:13px;color:#cfdcda;touch-action:none}
#rSess li:hover{background:#0c1519}
#rSess li.sel{background:color-mix(in srgb,var(--c) 22%,#04070a);box-shadow:inset 3px 0 0 var(--c)}
#rSess li .rv{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#0a0d0e 0 12%,var(--c) 13% 30%,transparent 31%),repeating-radial-gradient(circle,#0b0e0f 0 1px,#1a2023 1px 2px)}
#rSess li em{font-style:normal;color:#8a9395;font-size:11px}
#rSess li u{text-decoration:none;color:var(--teal);font-size:10px;min-width:30px;text-align:right}
.rctl{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 0}
.enc{width:74px;height:74px;border-radius:50%;cursor:ns-resize;touch-action:none;position:relative;
  background:conic-gradient(from 25deg,#5f6469,#eef1f3 9%,#7b8085 20%,#d6dade 32%,#50555a 46%,#e6e9ec 58%,#666b70 70%,#cdd2d6 84%,#5f6469);
  box-shadow:0 0 0 4px #0a0b0c,0 0 0 5px #3a3e42,0 8px 14px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.6)}
.enc span{position:absolute;inset:14%;border-radius:50%;background:repeating-conic-gradient(#0a0b0c 0 5deg,#26292c 5deg 10deg);box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 8px rgba(0,0,0,.8);transition:transform .12s}
.enc span::after{content:"";position:absolute;left:50%;top:5px;width:4px;height:12px;margin-left:-2px;border-radius:2px;background:var(--teal);box-shadow:0 0 6px var(--teal)}
.enc:focus-visible{outline:2px solid #fff;outline-offset:6px}
.rctl label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:9px;color:#cfd5d6;margin-top:-6px}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.rbtn{border:0;border-radius:4px;padding:8px 4px;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.06em;color:#cfd6d8;
  background:linear-gradient(180deg,#34373b,#17191b);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.14),0 3px 6px rgba(0,0,0,.6)}
.rbtn.a{color:var(--teal)}.rbtn.b{color:var(--amber)}
.rbtn:last-child{grid-column:1 / -1}
.rbtn:active{transform:translateY(1px)}
.rmod-ch .navgrid{margin:0 6px}
.below .sec{background:linear-gradient(180deg,#101315,#0b0d0f)}
@media (max-width:900px) and (min-height:521px){.rbody{grid-template-columns:1fr;height:auto}.rlcd ul{max-height:220px}.rctl{flex-direction:row;flex-wrap:wrap;gap:12px}.rack{padding:12px}.rack::before,.rack::after{display:none}}
/* ---------- v24: fixed CHANNELS display + silver news receiver rack ---------- */
.rmod-ch .navgrid{height:200px;align-items:stretch}
.rmod-ch .panel{height:200px;min-height:0;overflow:auto;opacity:1;transform:none;scrollbar-width:thin;scrollbar-color:#2a3a3e transparent}
.rack-news{background:linear-gradient(180deg,#1b1c1e,#111213)}
.rack-news::before,.rack-news::after{background:radial-gradient(circle at 50% 50%,#1a1a1a 0 3.2px,transparent 3.6px) 50% 12px/26px 30px repeat-y,linear-gradient(90deg,#9a9ea2,#e0e3e5 45%,#8b8f93)}
.nmod{padding:14px 24px 18px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0 25%,rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 58%),var(--alu),linear-gradient(180deg,#d4d7d9,#b3b7ba 60%,#a4a8ab);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,multiply,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.7),0 0 0 1px #3a3d40}
.nmod .screw{background:radial-gradient(circle at 35% 35%,#f2f4f5,#7d8286 70%);box-shadow:inset 0 0 0 1px #55595d}
.nhead{display:flex;align-items:center;gap:10px;margin:0 6px 12px}
.nhead b{font-family:var(--disp);font-size:14px;letter-spacing:.18em;color:#1b1d1f}
.nhead span{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.24em;color:#c0262f}
.nhead .rhint{color:#44494d;font-size:13px}
.lamp{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd0d2,#e0212f 55%,#6b0a10);box-shadow:0 0 0 2px #7c8084,0 0 10px rgba(224,33,47,.8)}
.lamp.blink{animation:lampb .5s 2}
@keyframes lampb{50%{box-shadow:0 0 0 2px #7c8084,0 0 2px rgba(224,33,47,.2);filter:brightness(.6)}}
.nbody{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 150px;gap:18px;align-items:stretch;height:200px}
.vfd{border-radius:6px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#15130c,#070705 70%);box-shadow:0 0 0 5px #1c1d1e,0 0 0 6px #777b7f,inset 0 0 22px rgba(0,0,0,.95);
  color:#ffb547;font-family:var(--mono);text-shadow:0 0 6px rgba(255,160,40,.75),0 0 1px #ffd89a}
.vfd-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;opacity:.8}
.vfd-title{overflow:hidden;white-space:nowrap;font-size:22px;font-weight:700;letter-spacing:.04em;padding:4px 0;border-top:1px dashed rgba(255,181,71,.18);border-bottom:1px dashed rgba(255,181,71,.18)}
.vfd-title span{display:inline-block}
@keyframes vfdscroll{to{transform:translateX(var(--sx))}}
.vfd-sum{font-size:13px;line-height:1.45;color:#ffcf85;opacity:.9;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.tuner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.dial{position:relative;height:100%;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#2a2112,#171108 70%),radial-gradient(80% 60% at 50% 40%,rgba(255,190,90,.35),transparent);background-blend-mode:screen;
  box-shadow:0 0 0 5px #1c1d1e,0 0 0 6px #777b7f,inset 0 0 20px rgba(0,0,0,.9)}
.dial::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 40%)}
.dscale{position:absolute;inset:0}
.dscale u{position:absolute;top:40%;width:1px;height:10px;background:rgba(255,214,150,.5)}
.dscale u.big{height:18px;top:36%;background:rgba(255,214,150,.85)}
.dscale .st{position:absolute;z-index:3;top:10%;transform:translateX(-50%);background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:#ffd79a;font-family:var(--mono);padding:0 4px}
.dscale .st i{width:7px;height:7px;border-radius:50%;background:#4a3410;box-shadow:inset 0 0 0 1px #000}
.dscale .st b{font-size:12px}
.dscale .st span{position:absolute;top:120px;font-size:8px;line-height:1.15;text-align:center;white-space:nowrap;opacity:.7;padding:2px 3px;border-radius:2px}
.dscale .st.on span{opacity:1;color:#fff;background:#1a1208}
.dscale .st.on b{padding:0 3px;border-radius:2px;background:#1a1208}
.dscale .st.on i{background:#ff4a3d;box-shadow:0 0 8px #ff4a3d}
.dscale .st.on b{color:#fff;text-shadow:0 0 8px #ffb547}
.needle{position:absolute;top:6%;bottom:6%;width:3px;margin-left:-1.5px;background:linear-gradient(#ff5a4a,#c81f18);box-shadow:0 0 8px rgba(255,80,60,.9);transition:left .6s cubic-bezier(.3,1.4,.5,1);z-index:1}
.tk{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.tk label{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%)}
#news .tk{margin:0 4.5px 0 13.5px}
.tknob{width:86px;height:86px;border-radius:50%;cursor:ns-resize;touch-action:none;position:relative;
  background:radial-gradient(circle at 40% 30%,#4a4d50,#141516 70%);box-shadow:0 0 0 6px #b9bdc0,0 0 0 7px #6d7175,0 10px 18px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.2)}
.tknob span{position:absolute;inset:10%;border-radius:50%;background:repeating-conic-gradient(#141516 0 6deg,#2b2d30 6deg 12deg);box-shadow:inset 0 0 10px rgba(0,0,0,.8);transition:transform .35s}
.tknob span::after{content:"";position:absolute;left:50%;top:5px;width:5px;height:16px;margin-left:-2.5px;border-radius:3px;background:#f2f2f2}
.tknob:focus-visible{outline:2px solid #1b1d1f;outline-offset:10px}
.tk label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;color:#c5ccce}
.nbtns{display:grid;grid-template-rows:repeat(4,1fr);gap:8px}
.sbtn{border:0;border-radius:4px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;color:#1b1d1f;
  background:linear-gradient(180deg,#f4f5f6,#c3c7ca);box-shadow:0 0 0 1px #6d7175,inset 0 1px 0 #fff,0 3px 5px rgba(0,0,0,.35)}
.sbtn.red{background:linear-gradient(180deg,#e8454d,#a8151d);color:#fff;box-shadow:0 0 0 1px #5d0a0f,inset 0 1px 0 rgba(255,255,255,.4),0 3px 5px rgba(0,0,0,.35)}
.sbtn:active{transform:translateY(1px);box-shadow:0 0 0 1px #6d7175,inset 0 2px 3px rgba(0,0,0,.3)}
.sbtn:focus-visible{outline:2px solid #1b1d1f;outline-offset:2px}
@media (max-width:900px) and (min-height:521px){.nbody{grid-template-columns:1fr;height:auto}.dial{height:150px}.nbtns{grid-template-columns:1fr 1fr;grid-template-rows:auto}.sbtn{padding:10px}}

#newsCrate{display:none!important}/* ---------- v26: DJ info sheet ---------- */
.sheet-card{width:min(860px,100%)}
.djsheet{display:flex;flex-direction:column;gap:22px}
.djtop{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:start}
.djphoto{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;
  background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--c) 45%,transparent),transparent 65%),#101417;border:1px dashed #33403f}
.djphoto b{font-family:var(--disp);font-size:44px;color:#e8eeee}
.djphoto small{font-size:11px;color:#7f8c8b;line-height:1.2}
.djtxt{display:flex;flex-direction:column;gap:8px}
.djtxt .eyebrow{color:var(--c)}
.djtxt h2{margin:0;font-family:var(--disp);font-size:clamp(22px,3vw,30px);letter-spacing:.06em;text-transform:none}
.djtxt p{margin:0;color:#c7d3d1;font-size:16px;line-height:1.45;max-width:62ch}
.djfollow{color:var(--teal);font-weight:600;text-decoration:none;font-size:15px}
.djfollow:hover{text-decoration:underline}
.djdisco h4,.djsess h4{display:flex;gap:12px;align-items:baseline;margin:0 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.djdisco h4 b,.djsess h4 b{font-family:var(--disp);font-size:12px;letter-spacing:.14em}
.djdisco h4 span,.djsess h4 span{font-size:13px;color:var(--muted)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.drel{display:flex;flex-direction:column;gap:4px;min-width:0}
.dcov{aspect-ratio:1;border-radius:6px;display:flex;align-items:flex-end;padding:8px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 70%,#000),#0c1012 80%);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.dcov span{font-family:var(--disp);font-size:10px;letter-spacing:.06em;color:#fff;line-height:1.2;text-shadow:0 1px 6px #000}
.drel b{font-size:14px;line-height:1.15;font-weight:600}
.drel em{font-style:normal;font-size:12px;color:var(--muted)}
.djsess{display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 4px;border-bottom:1px solid #182125}
.srow.cur{background:color-mix(in srgb,var(--c) 10%,transparent);border-radius:6px}
.splay{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--c);color:#061010;font-size:14px;box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.smeta{display:flex;flex-direction:column;gap:5px;min-width:0}
.smeta div:first-child{display:flex;gap:8px;align-items:baseline}
.smeta b{font-size:16px}.smeta span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.sbar{height:3px;border-radius:2px;background:#26323a}
.smeta em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.sbtns{display:flex;gap:6px}
@media (max-width:600px) and (min-height:521px){.djtop{grid-template-columns:1fr}.djphoto{width:140px}}

/* ---------- v27: news photos ---------- */
.nbody{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 150px}
.vfdwrap{display:grid;grid-template-columns:auto minmax(0,1fr);border-radius:6px;overflow:hidden;min-width:0;
  box-shadow:0 0 0 5px #1c1d1e,0 0 0 6px #777b7f}
.vfdwrap .vfd{box-shadow:inset 0 0 22px rgba(0,0,0,.95);border-radius:0}
.vfdphoto{height:100%;aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:8px;
  background:radial-gradient(circle at 65% 30%,color-mix(in srgb,var(--c,#ffb547) 55%,transparent),transparent 65%),linear-gradient(160deg,#1d1a12,#07060404);background-color:#0b0a07;border-right:1px solid #2a2418}
.vfdphoto::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);pointer-events:none}
.vfdphoto span{position:relative;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#ffcf85;opacity:.75;text-transform:uppercase}
.nphoto{--c:#2fe0c8;aspect-ratio:16/7;border-radius:10px;display:flex;align-items:flex-end;justify-content:flex-start;padding:14px;margin-bottom:4px;
  background:radial-gradient(90% 90% at 75% 20%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(160deg,#151c1f,#0a0e10);border:1px dashed #33403f}
.nphoto span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#9fb0ae;text-transform:uppercase}
@media (max-width:900px) and (min-height:521px){.vfdwrap{grid-template-columns:1fr}.vfdphoto{height:auto;width:100%}}

:root{--wood:url(/assets/home/img/7ac671864fd2.svg)}
/* ---------- v28: intro + classic experience ---------- */
body[data-exp="intro"] .wrap,body[data-exp="intro"] #classic,body[data-exp="classic"] .wrap,body[data-exp="dj"] #classic,body[data-exp="dj"] #intro,body[data-exp="classic"] #intro{display:none!important}
body:not([data-exp="dj"]) .dock,body:not([data-exp="dj"]) .dropdock{display:none!important}
body:not([data-exp="dj"]) .wrap{padding-bottom:0}
#intro{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(60% 50% at 20% 10%,rgba(47,224,200,.12),transparent 70%),radial-gradient(50% 50% at 90% 90%,rgba(255,138,61,.1),transparent 70%)}
.intro-in{width:min(1080px,100%);display:flex;flex-direction:column;gap:22px}
.intro-top{display:flex;justify-content:flex-end}
.intro-brand{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.intro-brand .wordmark{font-size:clamp(28px,5vw,58px)}
.intro-q{margin:0;text-align:center;color:#b7c5c3;font-size:clamp(18px,2vw,24px)}
.intro-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.icard{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;border:1px solid #26323a;border-radius:18px;padding:22px;color:var(--text);
  background:linear-gradient(180deg,#141a1d,#0c1012);transition:transform .25s,border-color .25s,box-shadow .25s;font-family:var(--body)}
.icard:hover,.icard:focus-visible{transform:translateY(-4px);border-color:#c79a5b;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px #c79a5b;outline:none}
.icard.dj:hover,.icard.dj:focus-visible{border-color:var(--teal);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px var(--teal)}
.icard b{font-family:var(--disp);font-size:clamp(16px,2vw,22px);letter-spacing:.1em}
.icard span{color:#aebcba;font-size:18px;line-height:1.35}
.icard em{font-style:normal;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;color:#c79a5b;margin-top:auto}
.icard.dj em{color:var(--teal)}
.ill{width:100%;aspect-ratio:16/8;border-radius:12px;display:grid;place-items:center;background:#080a0b;overflow:hidden}
.ir-cab{width:78%;aspect-ratio:2.3;border-radius:16px;display:grid;grid-template-columns:1fr 1.15fr;gap:8%;padding:5%;
  background:linear-gradient(180deg,#7a4a28,#4a2914);box-shadow:0 18px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.2)}
.ir-gr{border-radius:10px;background:radial-gradient(circle,#161616 0 1px,transparent 1.3px) 0 0/5px 5px,#2a2a2a}
.ir-face{border-radius:10px;background:linear-gradient(#efe6d2,#d6c8aa);padding:8%;display:flex;flex-direction:column;gap:10%}
.ir-scr{flex:1;border-radius:5px;background:#0d1418;box-shadow:inset 0 0 0 2px #000;position:relative}
.ir-scr::after{content:"";position:absolute;left:12%;right:30%;top:40%;height:12%;background:var(--teal);border-radius:2px;box-shadow:0 0 8px var(--teal)}
.ir-k{display:flex;justify-content:space-between}.ir-k i{width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 30%,#4a3b2e,#140f0b 70%);box-shadow:0 4px 6px rgba(0,0,0,.5)}
.ill-dj{display:flex;gap:6%;align-items:center;justify-content:center;background:linear-gradient(180deg,#1b1d20,#0f1012)}
.ill-dj .j{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#111a1d 0 22%,var(--teal) 23% 25%,#0b0c0d 26% 62%,#1f2023 63% 90%,#0a0b0c 91%);box-shadow:0 0 0 3px #050505,0 10px 20px rgba(0,0,0,.6)}
.ill-dj .j:last-child{background:radial-gradient(circle,#111a1d 0 22%,var(--amber) 23% 25%,#0b0c0d 26% 62%,#1f2023 63% 90%,#0a0b0c 91%)}
.ill-dj .m{width:12%;height:70%;border-radius:6px;background:repeating-linear-gradient(0deg,#2a2d31 0 3px,transparent 3px 14px),#141517}
@media (max-width:700px) and (min-height:521px){.intro-cards{grid-template-columns:1fr}}

#classic{min-height:100vh;padding:16px;display:flex;flex-direction:column;gap:18px;align-items:center;
  background:radial-gradient(70% 60% at 50% 40%,rgba(199,154,91,.12),transparent 70%)}
.ctop{width:min(1100px,100%);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cbrand{background:none;border:0;color:var(--text);cursor:pointer;padding:0}
.cbrand .wordmark{font-size:clamp(18px,2.6vw,28px)}
.expsw{border:1px solid #26323a;background:#0c1012;color:var(--teal);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;padding:7px 12px;border-radius:999px;cursor:pointer}
.expsw:hover{border-color:var(--teal)}
.radio{width:min(1100px,100%);display:flex;flex-direction:column;gap:12px;margin:auto 0}
.cab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:24px;border-radius:30px;padding:26px;
  background:var(--wood),linear-gradient(180deg,#7a4a27,#5a3419 50%,#40230f);background-size:100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:multiply,normal;
  box-shadow:0 60px 120px rgba(0,0,0,.75),0 0 0 1px #1d0f06,inset 0 3px 0 rgba(255,210,160,.25),inset 0 -8px 16px rgba(0,0,0,.45)}
.grille{--lvl:0;position:relative;border-radius:20px;min-height:360px;
  background:radial-gradient(circle,rgba(0,0,0,.55) 0 1.1px,transparent 1.4px) 0 0/6px 6px,radial-gradient(70% 70% at 50% 50%,rgba(255,255,255,calc(.03 + var(--lvl)*.06)),transparent 70%),linear-gradient(180deg,#3a3633,#262321);
  box-shadow:inset 0 0 0 3px #1d0f06,inset 0 6px 20px rgba(0,0,0,.7),0 1px 0 rgba(255,210,160,.2)}
.plate{position:absolute;left:22px;bottom:22px;display:flex;flex-direction:column;padding:6px 12px;border-radius:4px;
  background:linear-gradient(180deg,#e6c98d,#b58a45);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6);color:#3a250c}
.plate b{font-family:var(--disp);font-size:14px;letter-spacing:.2em}.plate span{font-family:var(--disp);font-size:8px;letter-spacing:.24em}
.face{border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 60%),var(--alu),linear-gradient(180deg,#f1e8d4,#dccdb0 60%,#cbbb9b);
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,multiply,normal;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(0,0,0,.2),0 0 0 3px #2b170a}
.rdisp{position:relative;border-radius:12px;background:#0b1216;height:200px;overflow:hidden;
  box-shadow:0 0 0 6px #1a1512,0 0 0 7px #8a7657,inset 0 0 30px rgba(0,0,0,.9)}
.rdisp::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 40%)}
#cSpec{position:absolute;left:0;right:0;bottom:0;width:100%;height:60px;opacity:.55;pointer-events:none}
.rscreen{position:absolute;inset:0;padding:14px 18px;display:flex;flex-direction:column;gap:6px;color:#e8f3f1;font-family:var(--body);z-index:1}
.rscreen.off{background:#050708}
.rs-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#7fb2aa}
.rs-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.rs-list li{display:flex;justify-content:space-between;gap:10px;padding:4px 10px;border-radius:5px;font-size:19px;line-height:1.15;white-space:nowrap}
.rs-list li span{overflow:hidden;text-overflow:ellipsis}
.rs-list li em{font-style:normal;font-family:var(--mono);font-size:11px;color:#7f9a96;flex:none}
.rs-list li.on{background:var(--teal);color:#061010}.rs-list li.on em{color:#063a33}
.rs-now{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.rs-now small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--teal)}
.rs-now b{font-family:var(--disp);font-size:clamp(18px,2.2vw,26px);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-now span{font-size:18px;color:#c6d6d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-now p{margin:4px 0 0;font-size:15px;color:#a9bcb9;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-hint{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#6f8a86}
.presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.presets button{position:relative;border:0;border-radius:6px;padding:14px 4px 10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;color:#3a2a17;
  background:linear-gradient(180deg,#fbf6ea,#d9ccb0);box-shadow:0 0 0 1px #8a7657,inset 0 1px 0 #fff,0 4px 0 #a8946f,0 6px 10px rgba(0,0,0,.3)}
.presets button i{position:absolute;left:50%;top:5px;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:#b3a384}
.presets button.on i{background:#ff6a2b;box-shadow:0 0 6px #ff6a2b}
.presets button:active{transform:translateY(3px);box-shadow:0 0 0 1px #8a7657,inset 0 1px 0 #fff,0 1px 0 #a8946f}
.cknobs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:auto}
.ck{display:flex;flex-direction:column;align-items:center;gap:8px}
.ck label,.cbtns label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;color:#3a2a17}
.bknob{width:120px;height:120px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 40% 30%,#5a4636,#1a120c 72%);box-shadow:0 0 0 8px #b9a37e,0 0 0 9px #7a6547,0 14px 22px rgba(0,0,0,.5),inset 0 3px 3px rgba(255,255,255,.18)}
.bknob span{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 45% 35%,#d9d4ca,#8c857a 60%,#5c564d);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.4);transition:transform .15s}
.bknob span::after{content:"";position:absolute;left:50%;top:6px;width:6px;height:16px;margin-left:-3px;border-radius:3px;background:#2b1b0e}
.bknob.tune span::before{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 45% 35%,#f4f0e8,#b9b2a6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.bknob:focus-visible{outline:3px solid #2b1b0e;outline-offset:12px}
.bknob.push span{transform:scale(.96)}
.cbtns{display:flex;flex-direction:column;align-items:center;gap:6px}
.pwr{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 40% 35%,#e6d8bf,#a8946f);box-shadow:0 0 0 4px #7a6547,0 6px 10px rgba(0,0,0,.35);display:grid;place-items:center}
.pwr i{width:14px;height:14px;border-radius:50%;background:#5a1a10;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.pwr.on i{background:#ff3b2b;box-shadow:0 0 12px #ff3b2b}
.back{margin-top:8px;border:0;border-radius:999px;padding:7px 14px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;color:#3a2a17;background:linear-gradient(180deg,#fbf6ea,#d9ccb0);box-shadow:0 0 0 1px #8a7657,0 3px 0 #a8946f}
.chelp{margin:0;text-align:center;color:#9aa8a6;font-size:16px}
@media (max-width:900px) and (min-height:521px){.cab{grid-template-columns:1fr;padding:16px;border-radius:22px}.grille{min-height:120px}.bknob{width:92px;height:92px}}

.top .cbrand{text-align:left}
.rdisp.menu #cSpec{display:none}
.rdisp:not(.menu) .rs-hint{margin-bottom:44px}
/* ---------- v29: visible experience switch ---------- */
.top .cbrand{display:block}
.expsw{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:12px;border-width:2px;border-style:solid;border-radius:999px;cursor:pointer;font-family:var(--mono);font-weight:700;letter-spacing:.1em}
.expsw[data-exp="classic"]{color:#f1d9a8;border-color:#c79a5b;background:linear-gradient(180deg,rgba(199,154,91,.28),rgba(199,154,91,.1));box-shadow:0 0 18px rgba(199,154,91,.25)}
.expsw[data-exp="classic"]::before{content:"📻";font-size:15px}
.expsw[data-exp="classic"]:hover{background:#c79a5b;color:#1a0f05}
.expsw[data-exp="dj"]{color:var(--teal);border-color:var(--teal);background:rgba(47,224,200,.12);box-shadow:0 0 18px rgba(47,224,200,.2)}
.expsw[data-exp="dj"]::before{content:"🎛️";font-size:15px}
.expsw[data-exp="dj"]:hover{background:var(--teal);color:#061010}

/* ---------- v31: realistic retro radio ---------- */
:root{--woodg:url(/assets/home/img/e030b96e2543.svg);--brushH:url(/assets/home/img/00691ebc0873.svg);--fabric:url(/assets/home/img/6a2eb1c00882.svg)}
.cab{padding:30px;border-radius:34px 34px 30px 30px;position:relative;
  background:
    linear-gradient(180deg,rgba(255,225,180,.22) 0,rgba(255,225,180,0) 9%,rgba(0,0,0,0) 80%,rgba(0,0,0,.35) 100%),
    radial-gradient(120% 90% at 30% 20%,rgba(255,200,140,.18),transparent 55%),
    var(--woodg),
    linear-gradient(180deg,#8a532b,#6b3c1d 45%,#4c2a12);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;
  box-shadow:0 70px 80px -40px rgba(0,0,0,.9),0 30px 60px rgba(0,0,0,.55),0 0 0 1px #1c0d05,
    inset 0 2px 1px rgba(255,220,170,.45),inset 0 -3px 2px rgba(0,0,0,.5),inset 6px 0 10px rgba(0,0,0,.25),inset -6px 0 10px rgba(0,0,0,.25)}
.cab::after{content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:16px;border-radius:0 0 10px 10px;background:linear-gradient(#2a1608,#120904);box-shadow:0 10px 20px rgba(0,0,0,.6);z-index:-1}
.grille{border-radius:18px;
  background:
    radial-gradient(75% 75% at 50% 45%,rgba(255,255,255,calc(.04 + var(--lvl)*.05)),rgba(0,0,0,.35) 100%),
    var(--fabric),
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#5a4a3d,#3f342b);
  box-shadow:0 0 0 6px #3b200e,0 0 0 7px rgba(255,210,160,.25),inset 0 10px 24px rgba(0,0,0,.75),inset 0 -4px 10px rgba(0,0,0,.4);transform:none}
.plate{background:linear-gradient(180deg,#f0d9a6 0,#c9a060 45%,#9b7236 55%,#d6b172 100%);border:1px solid #6b4a1c;box-shadow:0 3px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.7)}
.plate b,.plate span{text-shadow:0 1px 0 rgba(255,240,200,.6)}
.face{border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.12)),var(--brushH),linear-gradient(180deg,#e9dfc9,#d2c3a3);
  background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:normal,multiply,normal;
  box-shadow:0 0 0 2px #3b200e,0 0 0 4px #b89a66,0 0 0 5px #5e4320,inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.18)}
.rdisp{border-radius:10px;background:radial-gradient(120% 100% at 50% 0%,#132026,#070b0d 70%);
  box-shadow:0 0 0 3px #0c0a08,0 0 0 6px #6f5a3c,0 0 0 7px #d9c49a,inset 0 0 40px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.04)}
.rdisp::after{background:linear-gradient(170deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 22%,transparent 23%),radial-gradient(90% 50% at 50% -10%,rgba(255,255,255,.08),transparent 60%)}
.rdisp::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.rscreen{text-shadow:0 0 8px rgba(120,255,230,.25)}
.rs-list li.on{background:linear-gradient(180deg,#3de6cf,#23b9a5);box-shadow:0 0 14px rgba(47,224,200,.35)}
.presets{padding:8px;border-radius:8px;background:linear-gradient(180deg,#2a1d12,#1a110a);box-shadow:inset 0 3px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.6)}
.presets button{border-radius:3px 3px 6px 6px;padding:16px 4px 11px;
  background:linear-gradient(180deg,#fffaf0 0,#efe5cf 55%,#d8c9a8 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(120,95,55,.35),0 5px 0 #8e7650,0 7px 8px rgba(0,0,0,.55)}
.presets button:active,.presets button.on{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(120,95,55,.35),0 2px 0 #8e7650,0 3px 4px rgba(0,0,0,.5)}
.bknob{background:
    radial-gradient(circle at 40% 28%,rgba(255,255,255,.18),transparent 45%),
    repeating-conic-gradient(from 0deg,#2a1a10 0 5deg,#140c07 5deg 10deg),
    radial-gradient(circle,#3a2616,#120a05);
  box-shadow:0 0 0 7px #cdb68a,0 0 0 8px #7a6040,0 0 0 11px rgba(0,0,0,.18),0 16px 22px rgba(0,0,0,.55),inset 0 -6px 10px rgba(0,0,0,.6),inset 0 4px 6px rgba(255,255,255,.12)}
.bknob span{inset:16%;
  background:radial-gradient(circle at 42% 32%,rgba(255,255,255,.85),rgba(255,255,255,0) 38%),repeating-radial-gradient(circle,#c9c6bf 0 1px,#a9a59c 1px 2px),radial-gradient(circle,#e6e3dc,#8f8a80);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 -3px 6px rgba(0,0,0,.3),0 3px 6px rgba(0,0,0,.45)}
.bknob span::after{top:8px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#b4231a;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.bknob.tune span::before{inset:36%;background:radial-gradient(circle at 45% 35%,#fff,#bdb6a8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4)}
.pwr{background:radial-gradient(circle at 40% 30%,#fff,#cfc7b8 45%,#8c8578);box-shadow:0 0 0 4px #5e4320,0 0 0 6px #d9c49a,0 6px 10px rgba(0,0,0,.4),inset 0 -3px 5px rgba(0,0,0,.25)}
.back{background:linear-gradient(180deg,#fffaf0,#d8c9a8);box-shadow:0 0 0 1px #6f5a3c,inset 0 1px 0 #fff,0 3px 0 #8e7650,0 4px 6px rgba(0,0,0,.35)}
.ck label,.cbtns label,.presets button{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.presets button{color:#3a2a17}

.presets button{display:flex;align-items:center;justify-content:center;min-height:58px;padding:16px 4px 9px;font-size:10.5px;line-height:1.2;letter-spacing:.06em;text-align:center}
@media (max-width:600px) and (min-height:521px){.presets{grid-template-columns:repeat(3,1fr)}}

/* ---------- v33: real 3D radio ---------- */
.stage3d{perspective:1600px;perspective-origin:50% 40%;padding:40px 20px 70px}
.tilt{--rx:6deg;--ry:0deg;--lx:50%;--ly:30%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out;position:relative}
.cab{transform-style:preserve-3d;overflow:visible}
.cab::after{display:none}
.cab-top,.cab-side{position:absolute;pointer-events:none;background:var(--woodg),linear-gradient(180deg,#5a3418,#3c220e);background-size:100% 100%}
.cab-top{left:0;right:0;top:0;height:46px;border-radius:34px 34px 0 0;transform-origin:50% 0;transform:rotateX(90deg) translateZ(0px);
  background:linear-gradient(180deg,rgba(255,235,200,.35),rgba(255,235,200,0) 40%),var(--woodg),linear-gradient(180deg,#9a5f31,#6b3c1d);background-size:100% 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.cab-side{top:0;bottom:0;right:0;width:46px;border-radius:0 30px 30px 0;transform-origin:100% 50%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15)),var(--woodg),linear-gradient(180deg,#5a3418,#3c220e);background-size:100% 100%}
.cab-side.l{right:auto;left:0;border-radius:30px 0 0 30px;transform-origin:0 50%;transform:rotateY(90deg)}
.gloss{position:absolute;inset:0;border-radius:34px 34px 30px 30px;pointer-events:none;z-index:5;
  background:radial-gradient(38% 30% at var(--lx) var(--ly),rgba(255,240,215,.28),rgba(255,240,215,0) 70%),linear-gradient(115deg,rgba(255,255,255,0) 0 35%,rgba(255,255,255,.10) 48%,rgba(255,255,255,0) 60%);mix-blend-mode:screen}
.face,.grille{transform:translateZ(6px)}
.rdisp{transform:translateZ(8px)}
.rdisp::after{background:radial-gradient(45% 40% at var(--lx) calc(var(--ly) - 10%),rgba(255,255,255,.22),rgba(255,255,255,0) 70%),linear-gradient(170deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.03) 22%,transparent 23%)}
.presets{transform:translateZ(10px)}
.presets button{transform:translateZ(6px)}
.presets button:active,.presets button.on{transform:translateZ(2px) translateY(3px)}
.bknob{transform:translateZ(26px);box-shadow:0 0 0 7px #cdb68a,0 0 0 8px #7a6040,0 0 0 11px rgba(0,0,0,.18),calc((50% - var(--lx))*.12) 22px 26px rgba(0,0,0,.55),inset 0 -6px 10px rgba(0,0,0,.6),inset 0 4px 6px rgba(255,255,255,.12)}
.bknob span{transform-style:preserve-3d}
.bknob::after{content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,255,255,.28),transparent 45%)}
.pwr,.back{transform:translateZ(14px)}
.plate{transform:translateZ(4px)}
.floor{position:absolute;left:4%;right:4%;bottom:-70px;height:90px;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 30%,rgba(0,0,0,.75),rgba(0,0,0,0) 70%);transform:translateZ(-60px);filter:blur(6px)}
.chelp{margin-top:-30px}
@media (max-width:900px) and (min-height:521px){.stage3d{padding:20px 0 40px}.cab-side,.cab-top{display:none}}
/* ---------- v34: static, photoreal ---------- */
.tilt{--rx:5deg;--ry:-7deg;--lx:38%;--ly:22%;transition:none!important;transform:rotateX(var(--rx)) rotateY(var(--ry))!important}
.stage3d{perspective:2200px}
.cab-side{width:34px}.cab-top{height:34px}
.cab{box-shadow:0 80px 90px -40px rgba(0,0,0,.95),0 30px 60px rgba(0,0,0,.6),0 0 0 1px #1c0d05,
  inset 0 2px 1px rgba(255,220,170,.5),inset 0 -3px 2px rgba(0,0,0,.55),inset 8px 0 14px rgba(0,0,0,.28),inset -8px 0 14px rgba(0,0,0,.28)}
.gloss{background:radial-gradient(34% 26% at var(--lx) var(--ly),rgba(255,240,215,.22),rgba(255,240,215,0) 70%),linear-gradient(112deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.09) 44%,rgba(255,255,255,0) 58%)}
.grille::before{content:"";position:absolute;inset:-6px;border-radius:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,230,190,.35),transparent 12%,transparent 88%,rgba(0,0,0,.5));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px}
.grille::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 14px 20px -8px rgba(0,0,0,.9),inset 0 -8px 14px -8px rgba(0,0,0,.6),inset 10px 0 18px -10px rgba(0,0,0,.7),inset -10px 0 18px -10px rgba(0,0,0,.7)}
.face::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(circle at 18px 18px,#6f5a3c 0 3px,#d9c49a 3.5px 4.5px,transparent 5px),radial-gradient(circle at calc(100% - 18px) 18px,#6f5a3c 0 3px,#d9c49a 3.5px 4.5px,transparent 5px),radial-gradient(circle at 18px calc(100% - 18px),#6f5a3c 0 3px,#d9c49a 3.5px 4.5px,transparent 5px),radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),#6f5a3c 0 3px,#d9c49a 3.5px 4.5px,transparent 5px)}
.face{position:relative;box-shadow:0 0 0 2px #3b200e,0 0 0 4px #b89a66,0 0 0 5px #5e4320,inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.18),inset 0 0 40px rgba(90,60,20,.12)}
.rdisp{box-shadow:0 0 0 3px #0c0a08,0 0 0 6px #6f5a3c,0 0 0 7px #d9c49a,inset 0 0 40px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.04),0 6px 12px rgba(0,0,0,.35)}
.rdisp::after{background:linear-gradient(170deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.05) 20%,transparent 21%),radial-gradient(60% 40% at 30% 0%,rgba(255,255,255,.1),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 30%)}
.bknob{box-shadow:0 0 0 7px #cdb68a,0 0 0 8px #7a6040,0 0 0 11px rgba(0,0,0,.18),-6px 24px 26px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.5),inset 0 -8px 12px rgba(0,0,0,.65),inset 0 5px 6px rgba(255,255,255,.14)}
.bknob::after{background:radial-gradient(circle at 38% 22%,rgba(255,255,255,.3),transparent 42%)}
.bknob::before{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:-1;
  background:repeating-conic-gradient(from -135deg,#5e4320 0 1.2deg,transparent 1.2deg 27deg);
  -webkit-mask:radial-gradient(circle,transparent 0 54%,#000 55% 62%,transparent 63%),conic-gradient(from 135deg,transparent 0 90deg,#000 90deg 360deg);-webkit-mask-composite:source-in;mask:radial-gradient(circle,transparent 0 54%,#000 55% 62%,transparent 63%),conic-gradient(from 135deg,transparent 0 90deg,#000 90deg 360deg);mask-composite:intersect}
.bknob span{box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),inset 0 -4px 7px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.7),0 4px 7px rgba(0,0,0,.5)}
.presets button{box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(120,95,55,.35),inset 1px 0 0 rgba(255,255,255,.5),inset -1px 0 0 rgba(0,0,0,.08),0 5px 0 #8e7650,0 7px 10px rgba(0,0,0,.6)}
.presets{box-shadow:inset 0 4px 8px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.6)}
.plate{box-shadow:0 3px 5px rgba(0,0,0,.65),0 1px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.25)}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3d0,#6b4a1c);box-shadow:0 0 0 .5px #3a250c}
.plate::before{left:4px}.plate::after{right:4px}
.floor{bottom:-64px;background:radial-gradient(48% 55% at 48% 30%,rgba(0,0,0,.8),rgba(0,0,0,0) 72%)}

/* ---------- v35: frontal, straight ---------- */
.tilt{transform:none!important}
.stage3d{perspective:none;padding:20px 20px 60px}
.cab-top,.cab-side{display:none!important}
.cab{transform:none}
.face,.grille,.rdisp,.presets,.presets button,.bknob,.pwr,.back,.plate{transform:none!important}
.presets button:active,.presets button.on{transform:translateY(3px)!important}
.floor{transform:none;bottom:-56px}

/* ---------- v36: artwork on radio display ---------- */
.rs-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-top:4px}
.rs-art{--c:#2fe0c8;width:92px;height:92px;border-radius:6px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--c) 55%,transparent),transparent 65%),#101417;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 12px rgba(0,0,0,.6)}
.rs-art img{width:100%;height:100%;object-fit:contain;display:block}
.rs-art b{font-family:var(--disp);font-size:26px;color:#e8eeee}
.rs-art small{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:#9fb0ae;text-transform:uppercase;text-shadow:0 1px 2px #000}
.rs-art img+small{display:none}
.rs-body .rs-now{margin-top:0;min-width:0}
.rdisp{height:210px}

/* ---------- v37: onde del sito originale dietro la radio ---------- */
#classic{position:relative;overflow:hidden;background:#07090a}
#heroFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* v69: sul telefono le onde di sfondo non si vedono: tolte (e il disegno si ferma, meno lavoro per il telefono) */
body.mport #heroFx,body.mland #heroFx{display:none!important}

/* v72: sul telefono la consolle vive in verticale; in orizzontale resta solo Graba TV */
#rotmsg{display:none}
body.lockport{overflow:hidden}
body.lockport #rotmsg{display:flex;position:fixed;inset:0;z-index:9999;background:#05070a;color:#cfe8e4;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:26px;font-family:var(--mono)}
body.lockport #rotmsg .rotic{font-size:44px;color:#2fe0c8;animation:rotspin 2.4s ease-in-out infinite}
@keyframes rotspin{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}
body.lockport #rotmsg b{font-size:15px;letter-spacing:.12em;font-weight:700}
body.lockport #rotmsg span:not(.rotic){font-size:12px;color:#8fa6a3;max-width:34ch;line-height:1.6}
body.lockport .wrap,body.lockport #classic,body.lockport .sitefoot,body.lockport .belowbox{display:none!important}
/* telefono in orizzontale con Graba TV accesa: resta solo il video, a tutto schermo */
body.tvlive .top,body.tvlive .ctop,body.tvlive .wrap,body.tvlive .sitefoot,body.tvlive .belowbox,body.tvlive .socialbar{display:none!important}
body.tvlive #classic{padding:0!important;gap:0!important;min-height:100dvh;background:#000}
body.tvlive .rs-tv{position:fixed!important;inset:0!important;z-index:9998;border-radius:0!important;background:#000;margin:0!important}
body.tvlive .rs-tv video{width:100%!important;height:100%!important;object-fit:contain!important}
body.mport .radio.tvmob #cSpec{display:none!important}
body.tvlive .rs-tvx{position:fixed!important;top:12px;right:14px;z-index:9999;display:grid!important;opacity:1!important;pointer-events:auto!important}
#classic>*:not(#heroFx){position:relative;z-index:1}

/* ---------- v38: photoreal DJ console & racks ---------- */
.rig{position:relative;border-radius:20px;isolation:isolate;
  box-shadow:0 60px 70px -30px rgba(0,0,0,.95),0 30px 60px rgba(0,0,0,.6),0 0 0 1px #050505,0 0 0 2px #2c2f33,
    inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 0 rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.35)}
.rig::before,.rig::after{display:none}
.rig-edge{position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:9;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 6%,transparent 94%,rgba(0,0,0,.45)),linear-gradient(90deg,rgba(255,255,255,.05),transparent 3%,transparent 97%,rgba(0,0,0,.4));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.rscrew{position:absolute;z-index:10;width:13px;height:13px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#9aa0a6,#3a3e43 55%,#141618 100%);box-shadow:0 0 0 1px #000,0 0 0 2.5px #1d2023,0 1px 2px rgba(255,255,255,.12),inset 0 -1px 2px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.8)}
.rscrew::before,.rscrew::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.6px;margin-top:-.8px;background:linear-gradient(90deg,#0a0b0c,#2a2d30,#0a0b0c);transform:rotate(45deg)}
.rscrew::after{transform:rotate(-45deg)}
.rscrew.tl{left:9px;top:9px}.rscrew.tr{right:9px;top:9px}.rscrew.bl{left:9px;bottom:9px}.rscrew.br{right:9px;bottom:9px}
.hdeck{position:relative}
.hmix{box-shadow:inset 3px 0 0 #030303,inset 4px 0 0 rgba(255,255,255,.08),inset -3px 0 0 #030303,inset -4px 0 0 rgba(255,255,255,.08),inset 0 30px 40px -30px rgba(0,0,0,.6)}
.hdeck .dh{box-shadow:0 0 0 5px #0b0c0d,0 0 0 6px #3b3f44,0 0 0 7px #0a0b0c,0 12px 24px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.8),inset 0 0 22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.hdeck .dh::after{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 30%,transparent 42%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 30%)}
.screen{box-shadow:0 0 0 6px #0b0c0d,0 0 0 7px #3b3f44,0 0 0 8px #0a0b0c,0 16px 30px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.9),inset 0 0 30px rgba(0,0,0,.9)}
.screen::after{background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 28%,transparent 40%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 25%)}
.jogwrap{box-shadow:inset 9px 11px 20px rgba(0,0,0,.97),inset -5px -6px 10px rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.9),
    0 0 0 2px #040404,0 0 0 3.5px rgba(255,255,255,.08),0 0 0 8px #121315,0 0 0 9px rgba(0,0,0,.85),-4px -5px 8px rgba(0,0,0,.55),5px 6px 10px rgba(255,255,255,.035),0 0 40px rgba(0,0,0,.5)}
.jog.platter{box-shadow:0 18px 30px rgba(0,0,0,.95),0 6px 10px rgba(0,0,0,.9),0 0 0 1.5px #000,0 -1px 0 1.5px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.08)}
.jog .disc{box-shadow:0 0 0 1.5px #000,0 0 0 2.5px rgba(255,255,255,.08),0 0 14px rgba(0,0,0,.95),inset 0 2px 3px rgba(255,255,255,.05),inset 0 -12px 24px rgba(0,0,0,.65)}
.jog .label{box-shadow:0 0 26px color-mix(in srgb,var(--acc) 45%,transparent),0 6px 12px rgba(0,0,0,.8),inset 0 0 0 3px var(--acc),inset 0 0 0 5px #000,inset 0 0 18px rgba(0,0,0,.9)}
.hbtn.cue,.hbtn.play{box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.6),
    0 0 0 4px #070808,0 0 0 5px #1e2124,0 0 0 9px var(--rc),0 0 0 10px color-mix(in srgb,var(--rc) 45%,#000),0 0 16px 9px color-mix(in srgb,var(--rc) 28%,transparent),0 10px 16px 8px rgba(0,0,0,.65),0 2px 3px 9px rgba(0,0,0,.5)}
.pkimg,.knob.pk.bal .pkimg{box-shadow:0 8px 12px rgba(0,0,0,.9),0 2px 3px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.65)}
.knob.pk::before{filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.hmix .kb label{text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}
input.hwf{background:repeating-linear-gradient(0deg,transparent 0 16px,#3a3e42 16px 17px) left/8px 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 16px,#3a3e42 16px 17px) right/8px 100% no-repeat,
  linear-gradient(90deg,transparent 0 calc(50% - 7px),#000 calc(50% - 7px) calc(50% + 7px),transparent calc(50% + 7px)) no-repeat;
  box-shadow:inset 0 0 0 0 transparent}
input.hwf::-webkit-slider-runnable-track{width:6px;background:linear-gradient(90deg,#000,#0c0d0e,#000);border-radius:3px;box-shadow:0 0 0 2px #1d1f22,inset 0 0 4px #000,0 0 10px rgba(0,0,0,.9)}
input.hwf::-webkit-slider-thumb{box-shadow:0 8px 12px rgba(0,0,0,.9),0 2px 2px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.6)}
input.hwx::-webkit-slider-runnable-track{background:linear-gradient(0deg,#000,#0c0d0e,#000);box-shadow:0 0 0 2px #1d1f22,inset 0 0 4px #000}
input.hwx::-webkit-slider-thumb{box-shadow:0 8px 12px rgba(0,0,0,.9),0 2px 2px rgba(0,0,0,.9),inset 1px 0 0 rgba(255,255,255,.25),inset -2px 0 0 rgba(0,0,0,.6)}
.dpads .pad.hw{box-shadow:inset 0 0 16px color-mix(in srgb,var(--c) 22%,transparent),inset 0 2px 3px rgba(0,0,0,.8),0 0 10px color-mix(in srgb,var(--c) 28%,transparent),0 8px 12px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.08)}
.dpads .pad.hw::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 45%)}
.dpads .pad.hw{position:relative}
.mpanel{box-shadow:inset 0 0 0 1px #000,inset 0 3px 10px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07),0 6px 12px rgba(0,0,0,.6)}
.mcol i.on{box-shadow:0 0 5px currentColor,0 0 2px #fff3}
.tvbtn,.onair{box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 0 5px #000,0 8px 12px rgba(0,0,0,.8),inset 0 -6px 8px rgba(0,0,0,.5),inset 0 3px 4px rgba(255,255,255,.35)}
.tvbtn.lit{box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 0 5px #000,0 0 34px 8px rgba(255,59,78,.9),inset 0 -6px 8px rgba(0,0,0,.5),inset 0 3px 4px rgba(255,255,255,.35)}
.onair.lit{box-shadow:0 0 0 3px #0c0d0e,0 0 0 4px #3a3e42,0 0 0 5px #000,0 0 34px 8px rgba(61,139,255,.9),inset 0 -6px 8px rgba(0,0,0,.5),inset 0 3px 4px rgba(255,255,255,.35)}
.rack{box-shadow:0 50px 70px -30px rgba(0,0,0,.95),0 20px 50px rgba(0,0,0,.6),inset 0 0 0 1px #000,0 0 0 1px rgba(255,255,255,.06),inset 0 2px 0 rgba(255,255,255,.05)}
.rack::before,.rack::after{background:radial-gradient(circle at 50% 50%,#000 0 2.6px,#2a2d30 3px 3.6px,transparent 4px) 50% 12px/26px 30px repeat-y,linear-gradient(90deg,#1f2225,#3f4347 45%,#181a1c);box-shadow:inset 0 0 0 1px #000,inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(0,0,0,.6),2px 0 6px rgba(0,0,0,.5)}
.rmod{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.25),0 6px 12px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.9),0 0 0 1px #050505}
.screw{width:11px;height:11px;background:radial-gradient(circle at 35% 35%,#9aa0a6,#3a3e43 55%,#141618);box-shadow:inset 0 0 0 1px #000,0 1px 2px rgba(0,0,0,.9),0 0 0 2px rgba(0,0,0,.4)}
.rlcd,.lcd{box-shadow:0 0 0 4px #0b0c0d,0 0 0 5px #3b3f44,0 0 0 6px #0a0b0c,inset 0 0 18px rgba(0,0,0,.95),0 8px 14px rgba(0,0,0,.7)}
.rprog{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 1px #000,0 6px 10px rgba(0,0,0,.7)}
.enc{box-shadow:0 0 0 4px #0a0b0c,0 0 0 5px #3a3e42,0 12px 18px rgba(0,0,0,.85),0 2px 3px rgba(0,0,0,.9),inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 5px rgba(0,0,0,.5)}
.rbtn,.sbtn{box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.45),0 4px 6px rgba(0,0,0,.7)}
.vfd,.dial{box-shadow:0 0 0 5px #1c1d1e,0 0 0 6px #777b7f,0 0 0 7px #2a2c2e,inset 0 0 24px rgba(0,0,0,.95),0 8px 14px rgba(0,0,0,.6)}
.tknob{box-shadow:0 0 0 6px #b9bdc0,0 0 0 7px #6d7175,0 0 0 8px #2a2c2e,0 14px 20px rgba(0,0,0,.7),0 2px 3px rgba(0,0,0,.9),inset 0 2px 2px rgba(255,255,255,.2),inset 0 -5px 8px rgba(0,0,0,.6)}
.dirs path{fill:#c4ccce}.dirs text{fill:#cdd5d7}

/* ---------- v39: Pioneer-like look ---------- */
.rig{background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.035) 42%,rgba(255,255,255,0) 55%),var(--alu),linear-gradient(180deg,#17181a,#101113 60%,#0b0c0d);background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal}
.hmix{background:linear-gradient(115deg,rgba(255,255,255,0) 0 35%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 60%),var(--alu),linear-gradient(180deg,#121315,#0a0b0c);background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal}
.hwz,.rmod{background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 60%),var(--alu),linear-gradient(180deg,#17181a,#0f1012);background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,soft-light,normal}
/* printed labels: white, condensed, Pioneer style */
.hmix .kb label,.ck label,.blbl,.chn,.rb span,.kb label,.dirs text,.rctl label,.hmix .ksc,.balbl{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;color:#f2f4f4;letter-spacing:.06em;text-shadow:none}
.hmix .kb label{font-size:11px}.blbl{font-size:10px;color:#f2f4f4}.chn{font-size:15px;font-weight:700;color:#fff}
.rb span{font-size:10px;color:#f2f4f4;letter-spacing:.08em}
.hmix .ksc{color:#d5dadb;font-size:6.5px}
.dirs text{fill:#f2f4f4}.dirs path{fill:#f2f4f4}
/* Pioneer knob: black knurled cap, white line, silver skirt ring */
.pkimg,.knob.pk.bal .pkimg{background:
    radial-gradient(circle at 42% 30%,rgba(255,255,255,.14),transparent 45%),
    radial-gradient(circle,#1c1e20 0 66%,#0d0e0f 68%,#2a2d30 70%,#c9ced2 74%,#7b8085 82%,#3a3e42 100%);
  box-shadow:0 6px 10px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.6)}
.pkimg::before{inset:0;background:radial-gradient(circle at 45% 35%,rgba(255,255,255,.08),transparent 55%),repeating-conic-gradient(#0f1012 0 4deg,#26292c 4deg 8deg);-webkit-mask:radial-gradient(circle,#000 0 66%,transparent 67%);mask:radial-gradient(circle,#000 0 66%,transparent 67%);box-shadow:none}
.pkimg::after,.knob.pk.bal .pkimg::after{top:3px;height:48%;width:3px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.6)}
.knob.pk::before{background:url(/assets/home/img/99f3072d4493.svg) center/100% 100% no-repeat}
/* CUE / PLAY: Pioneer style — black rubber with silver bezel, colored ring */
/* pads: rubber RGB with soft top highlight */
.dpads .pad.hw{background:linear-gradient(180deg,#25282b,#101214 55%,#0b0c0d);border-width:2px;color:#fff;font-family:"Barlow Condensed",Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;border-radius:5px}
.dpads .pad.hw small{color:#c9ced2}
.dpads .pad.hw::after{background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 40%),radial-gradient(60% 40% at 50% 100%,color-mix(in srgb,var(--c) 30%,transparent),transparent)}
/* faders: Pioneer black cap with white stripe & metal slot */
input.hwf::-webkit-slider-thumb{background:linear-gradient(180deg,#3d4145 0,#1b1d20 34%,#1b1d20 44%,#f4f6f6 44% 56%,#1b1d20 56%,#0f1011 100%);border-radius:3px}
input.hwx::-webkit-slider-thumb{background:linear-gradient(90deg,#3d4145 0,#1b1d20 34%,#f4f6f6 40% 60%,#1b1d20 66%,#0f1011);border-radius:3px}
/* deck section outline like printed frame */
.hdeck::after{content:"";position:absolute;inset:8px;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dtag{background:#fff;color:#0b0c0d}
#deckA .dtag{background:var(--teal);color:#04120f}#deckB .dtag{background:var(--amber);color:#1a0a02}
/* printed section titles */
.zone-head h3,.rtitle b{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;color:#f2f4f4;letter-spacing:.14em}
.hmix .mlt,.mhead,.mclip,.mdb,.mscale b{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:600}
.mhead,.mscale b,.mdb{color:#e6eaeb}
.tvbtn{background:radial-gradient(circle at 45% 38%,#ffb3ba 0 18%,#ff3b4e 55%,#5a0a12 100%)}
.onair{background:radial-gradient(circle at 45% 38%,#cfe4ff 0 18%,#3d8bff 55%,#0f2c63 100%)}

.dpads .pad.hw{font-size:11px;letter-spacing:.05em;padding:0 2px;line-height:1.05}
.dpads .pad.hw small{font-size:8px}
#intro{display:none!important}
.lt:hover{border-color:var(--teal)}
.rel li small{white-space:normal}
.vfdphoto.has{background-size:cover;background-position:center}
.vfdphoto.has span{display:none}
.rs-art img{object-fit:cover}
/* ---------- NEW MUSIC rack ---------- */
.nmrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:4px 6px 2px}
.nmc{--c:#2fe0c8;background:none;border:0;padding:0;cursor:pointer;color:var(--text);text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0;font-family:var(--body)}
.nmcov{display:block;aspect-ratio:1;border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 70%,#000),#0c1012 80%);box-shadow:0 0 0 1px #000,0 8px 14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .2s}
.nmcov i{position:absolute;left:8px;right:8px;bottom:8px;font-style:normal;font-family:var(--disp);font-size:10px;color:#fff;line-height:1.2;text-shadow:0 1px 6px #000}
.nmc:hover .nmcov{transform:translateY(-3px)}
.nmc b{font-size:15px;line-height:1.1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmc em{font-style:normal;font-size:13px;color:#b6c6c3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmc small{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em}
@media (max-width:900px) and (min-height:521px){.nmrow{grid-template-columns:repeat(3,1fr)}}

/* ---------- v48: usability fixes ---------- */
.livebtn{display:none;grid-column:1 / -1;margin-top:6px;border:0;border-radius:6px;padding:7px 10px;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:#061010;
  background:linear-gradient(180deg,#ff5a6a,#d8202f);box-shadow:0 0 14px rgba(255,59,78,.6),inset 0 1px 0 rgba(255,255,255,.35);display:none;align-items:center;justify-content:center;gap:6px}
.livebtn small{font-size:10px;font-weight:600;color:#3a0a10}
.livebtn.show{display:flex}
.hdeck .dh{grid-template-rows:auto auto auto}
.hdeck .dh .dtag{grid-row:1 / span 2}
.hdeck .dh .cover{grid-row:1 / span 2}
.ck label,.cbtns label{font-size:13px;letter-spacing:.12em;color:#1b1207;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ck label.lbl2{font-size:10px;letter-spacing:.14em;color:#5a3a12;margin-top:-4px}
.bknob.tune em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;color:#2b1b0e;pointer-events:none;z-index:2}
.bknob.tune span::before{inset:30%}
.bknob{cursor:pointer}
.rs-list li{cursor:pointer;position:relative}
.rs-list li i{font-style:normal;color:#5f6b6e;font-size:16px;line-height:1}
.rs-list li.on i{color:#063a33}
.rs-list li:hover{background:rgba(47,224,200,.18)}
.rs-list li.on:hover{background:var(--teal)}
.rs-back{background:none;border:1px solid rgba(127,178,170,.5);color:#7fb2aa;font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:3px 8px;border-radius:4px;cursor:pointer;align-self:flex-start}
.rs-back:hover{background:rgba(47,224,200,.15);color:#fff}
.rs-stop{margin-top:6px;align-self:flex-start;border:0;border-radius:5px;padding:7px 12px;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;background:linear-gradient(180deg,#e8454d,#a8151d);box-shadow:0 0 12px rgba(255,59,78,.6)}
.nbtns{grid-template-rows:repeat(5,1fr)}

@media (prefers-reduced-motion:reduce){.tilt{transform:none!important}}

@media (prefers-reduced-motion:reduce){.tvvid i{animation:none}}

@media (prefers-reduced-motion:reduce){.onair{animation:none}.ghost{animation:none}.live i,.power{animation:none}body.flash::after{display:none}}
/* ---------- lightbox zoom ---------- */
.zoomable{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(6px)}
#lightbox[hidden]{display:none}
#lightbox img{max-width:min(96vw,1400px);max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.8);animation:lbIn .22s ease-out}
#lightbox figcaption{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#cfe0dd;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
#lightbox .lbx{position:absolute;top:14px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);color:#fff;font-size:22px;line-height:40px;text-align:center;cursor:pointer}
@keyframes lbIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.livebtn{display:none!important}
/* ---------- v50: classic knobs aligned, PUSH only when usable ---------- */
.cknobs{align-items:start}
.ck{position:relative;padding-bottom:18px}
.ck label.lbl2{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:-14px;white-space:nowrap;opacity:0;transition:opacity .25s}
.bknob.tune em{opacity:0;transition:opacity .25s}
.radio.menuopen .bknob.tune em,.radio.menuopen .ck label.lbl2{opacity:1}
/* ---------- v93: desktop only, VOLUME and SELECT knobs lowered ---------- */
@media (pointer:fine){
  body:not(.mport):not(.mland) .cknobs>.ck{margin-top:28px}
  body:not(.mport):not(.mland) .radio.tvon .cknobs>.ck{margin-top:0}
}
/* ---------- v50: TV / ON AIR dim when off ---------- */
.onair{animation:none}
.onair:not(.lit){background:radial-gradient(circle at 45% 38%,#5c6672 0 18%,#2a3541 55%,#0d1218 100%)}
.tvbtn:not(.lit){background:radial-gradient(circle at 45% 38%,#726062 0 18%,#412a2d 55%,#180d0e 100%)}
.onair:not(.lit):hover{background:radial-gradient(circle at 45% 38%,#8fa3bb 0 18%,#3a4f6b 55%,#0d1218 100%)}
.tvbtn:not(.lit):hover{background:radial-gradient(circle at 45% 38%,#b08a8e 0 18%,#6b3a40 55%,#180d0e 100%)}
/* ---------- v50: mobile = landscape only ---------- */
#rotate{display:none;position:fixed;inset:0;z-index:10000;background:#07090a;color:#e9f5f3;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;font-family:var(--disp),system-ui,sans-serif}
#rotate svg{width:96px;height:96px;animation:rot90 1.6s ease-in-out infinite alternate}
#rotate b{font-size:20px;letter-spacing:.08em}
#rotate span{color:#9fb3b0;font-size:14px;max-width:320px;line-height:1.4}
@keyframes rot90{from{transform:rotate(0)}to{transform:rotate(-90deg)}}
@media (orientation:portrait) and (max-width:820px){#rotate{display:flex}body>*:not(#rotate){visibility:hidden}}
@media (max-height:520px){html,body{overflow-x:hidden}#classic{padding:8px 12px;gap:8px}.stage3d{padding:6px 10px 20px}.top,.ctop{padding:4px 0!important;gap:6px!important;flex-wrap:nowrap!important}.top .sub,.proto,.top p{display:none!important}.wordmark{font-size:16px!important}.status{gap:6px!important;flex-wrap:nowrap!important}.expsw{padding:4px 8px!important;font-size:10px!important}.status>span:not(.langs){display:none!important}.wordmark{white-space:nowrap}}
.fsbtn{display:none;width:34px;height:34px;border-radius:50%;border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;font-size:16px;cursor:pointer}
@media (pointer:coarse){.fsbtn{display:inline-grid;place-items:center}html,body{overscroll-behavior:none}}
:fullscreen body,html:fullscreen{background:#07090a}
/* ---------- v52: MOBILE LANDSCAPE (phone held sideways) — dedicated minimal layout, no zoom ---------- */
body.mland{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
body.mland .wrap,body.mland #classic{padding:4px calc(8px + var(--sr)) 8px calc(8px + var(--sl))!important;gap:6px!important;min-height:0}
body.mland .proto,body.mland .chelp,body.mland .dirs,body.mland .leds,body.mland .rscrew,body.mland .rig-edge,body.mland .livebtn,body.mland .blbl{display:none!important}
body.mland .top,body.mland .ctop{padding:2px 0!important;min-height:0}
/* console */
body.mland .rigbox .rig{width:var(--rigw,100%)!important;grid-template-columns:1fr 150px 1fr;grid-template-rows:minmax(0,1fr);box-sizing:border-box;align-items:stretch;gap:6px;padding:4px 6px;border-radius:12px}
body.mland .hdeck{padding:4px 6px 4px;gap:4px;display:grid;grid-template-rows:auto 1fr auto;justify-items:center}
body.mland .dh{padding-bottom:4px;gap:4px 8px;grid-template-rows:auto auto;align-items:center}
body.mland .dh .dtag{transform:scale(.8);transform-origin:left center}
body.mland .dh .dart{font-size:11px}body.mland .dh .dtit{font-size:11px}
body.mland .hdeck .cover{height:34px;width:34px}
body.mland .jogwrap{width:min(100%,156px);box-shadow:none;margin:0}
body.mland .dctl{display:grid;grid-template-columns:auto 1fr;gap:6px;width:100%;align-items:center}
body.mland .tport{flex-direction:column;gap:6px;padding:0}
body.mland .hbtn{width:42px;height:42px;font-size:9px}
body.mland .dpads{gap:5px}
body.mland .pad.hw{aspect-ratio:auto;height:34px;border-width:2px;border-radius:6px;font-size:9px;padding:0;display:grid;place-items:center}
body.mland .pad.hw small{display:none}
body.mland .hmix{padding:6px 6px;gap:6px}
body.mland .screen{aspect-ratio:auto;height:92px;box-shadow:0 0 0 3px #0b0c0d,0 0 0 4px #3b3f44}
body.mland .scr-home{padding:6px;gap:3px}body.mland .sd{font-size:10px}body.mland .sd b{font-size:10px}body.mland .sd em b{font-size:11px}body.mland .sd em{font-size:9px}
body.mland .scr-mix{font-size:8px;white-space:nowrap;gap:4px}body.mland .scr-mix .live{white-space:nowrap}
body.mland .strips{display:none}
body.mland .eqbtn{display:block;width:100%;height:30px;border-radius:6px;border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em}
body.mland .faders{width:100%;grid-template-columns:1fr auto 1fr;align-items:end}
body.mland .hmix input.hwf{height:96px;width:34px}
body.mland .chn{font-size:10px}
body.mland .fmid{gap:6px;transform:scale(.78);transform-origin:center bottom}
body.mland .xfw{font-size:10px}
body.mland .rb span{font-size:9px}
body.mland .power{font-size:12px}
/* EQ / FILTER sheet (touch sliders replace the small knobs) */
#eqSheet{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#0e1113;border-top:1px solid #2a2d31;box-shadow:0 -20px 50px rgba(0,0,0,.8);padding:8px calc(12px + var(--sr,0px)) 10px calc(12px + var(--sl,0px));display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;font-family:var(--mono);font-size:10px;color:#cfd6d8}
#eqSheet[hidden]{display:none}
#eqSheet h5{grid-column:1/-1;margin:0 0 2px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em}
#eqSheet h5 button{border:0;background:#2fe0c8;color:#061010;font-weight:700;border-radius:5px;padding:4px 12px;font-family:var(--mono)}
#eqSheet label{display:grid;grid-template-columns:72px 1fr 34px;align-items:center;gap:8px}
#eqSheet label b{color:var(--acc,#2fe0c8)}
#eqSheet .eqb{--acc:#ff8a3d}
#eqSheet input{width:100%;height:28px;accent-color:#2fe0c8}
#eqSheet .eqb input{accent-color:#ff8a3d}
#eqSheet button.rst{grid-column:1/-1;justify-self:center;border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;border-radius:6px;padding:4px 14px;font-family:var(--mono);font-size:10px}
/* classic */
body.mland .radio{width:100%;zoom:1!important;margin:0}
body.mland .stage3d{padding:0!important;perspective:none}
body.mland .cab{grid-template-columns:1fr;padding:6px;border-radius:14px;gap:0}
body.mland .cab-top,body.mland .cab-side,body.mland .grille,body.mland .floor,body.mland #cGloss{display:none!important}
body.mland .face{display:grid;grid-template-columns:1fr 210px;grid-template-rows:1fr auto;gap:8px;padding:8px;border-radius:10px}
body.mland .rdisp{grid-row:1/3;height:auto;min-height:0;transform:none}
body.mland .presets{grid-template-columns:1fr;gap:4px;padding:5px;transform:none}
body.mland .presets button{min-height:0;height:40px;padding:0 6px;font-size:10px;line-height:1.05}
body.mland .cknobs{grid-template-columns:1fr auto 1fr;gap:4px;margin:0;align-items:start}
body.mland .bknob{width:56px;height:56px;box-shadow:0 0 0 4px #b9a37e,0 0 0 5px #7a6547,0 6px 10px rgba(0,0,0,.5)}
body.mland .ck{gap:3px;padding-bottom:12px}
body.mland .ck label,body.mland .cbtns label{font-size:9px;letter-spacing:.08em}
body.mland .ck label.lbl2{display:none}
body.mland .bknob.tune em{font-size:8px}
body.mland .pwr{width:34px;height:34px}
body.mland .cbtns{gap:3px}
body.mland .back{padding:3px 8px;font-size:9px}
body.mland .rscreen{padding:10px 14px;gap:8px}
body.mland .rs-art{width:150px;height:150px}
body.mland .rscreen b{font-size:22px}
body.mland .rs-list li{min-height:44px}
body.mland .presets{box-shadow:none;background:none}
/* below the console on phones: plain full-width stack */
body.mland .below{width:100%!important;zoom:1!important}
/* ---------- v53: MOBILE PORTRAIT — single "player" (CDJ-style) built from the real console parts ---------- */
body.mport .rigbox,body.mport .proto,body.mport .dirs,body.mport .leds,body.mport .livebtn,body.mport .blbl{display:none!important}
body.mport .wrap{padding:4px 8px 10px!important;gap:6px!important}
body.mport .top{padding:2px 0!important}
body.mport .status>span:not(.langs){display:none!important}
body.mport .top .sub{display:none!important}
body.mport .wordmark{font-size:15px!important;white-space:nowrap}
body.mport .expsw{padding:4px 8px!important;font-size:9px!important}
.mplayer{display:none}
body.mport .mplayer{display:grid;gap:7px;padding:10px 8px 8px;border-radius:16px;position:relative;
  background:var(--brush),linear-gradient(180deg,#1a1c1e,#0d0e10 40%,#080909);
  box-shadow:0 0 0 1px #000,0 0 0 2px #2a2d31,0 30px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.mp-top{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center}
.mp-decks{display:flex;gap:4px}
.mp-deck{border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;padding:0 9px;height:30px;border-radius:5px}
.mp-deck.on{background:var(--teal);color:#061010;box-shadow:0 0 14px rgba(47,224,200,.5)}
.mp-deck[data-mdeck="A"]:not(.on){color:var(--teal);border-color:rgba(47,224,200,.45)}.mp-deck[data-mdeck="B"]:not(.on){color:var(--amber);border-color:rgba(255,138,61,.45)}
.mp-deck[data-mdeck="B"].on{background:var(--amber);box-shadow:0 0 14px rgba(255,138,61,.5)}
.mp-browse{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mp-browse button{border:0;border-radius:4px;height:30px;background:linear-gradient(180deg,#25282b,#131517);color:#cfd6d8;font-family:var(--mono);font-weight:700;font-size:8.5px;letter-spacing:.06em;box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.6)}
.mp-screen .screen{aspect-ratio:auto;height:172px}
.mp-screen .scr-home{padding:8px;gap:4px}
.mp-screen #spec{min-height:70px}
.mp-head .dh{border:0;padding:6px 10px;border-radius:8px;background:#04070a;box-shadow:0 0 0 1px #000,0 0 0 2px #2a2d31;display:grid;grid-template-columns:auto 1fr 40px;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center}
.mp-head .dh .dtag{grid-row:1/3;grid-column:1}.mp-head .dh .dart{grid-row:1;grid-column:2}.mp-head .dh .dtit{grid-row:2;grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-head .dh .cover{grid-row:1/3;grid-column:3}
.mp-head .dh .dart{font-size:12px}.mp-head .dh .dtit{font-size:13px}
.mp-head .cover{width:40px;height:40px}
.mp-pads .dpads{grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.mp-pads .pad.hw{aspect-ratio:auto;height:42px;border-width:2px;border-radius:6px;font-size:10px;display:grid;place-items:center;padding:0}
.mp-pads .pad.hw small{display:none}
.mp-mid{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:8px;align-items:end}
.mp-left{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:100%}
.mp-left .tport{flex-direction:column;gap:14px;padding:0;align-items:center}
.mp-left .hbtn{width:56px;height:56px;font-size:10px}
.mp-jog{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;overflow:visible}
.mp-jog .mp-decks{gap:8px}
.mp-jog .mp-deck{height:34px;padding:0 14px;font-size:11px}
.mp-jog .jogwrap{width:100%;max-width:250px;margin:0;aspect-ratio:1}
.mp-jog .jog.platter{width:92%;height:auto}
.mp-right{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.mp-right .fmid{flex-direction:column;gap:8px;padding:0;transform:none}
.mp-right .rb span{font-size:8px}
.mp-right .tvbtn,.mp-right .onair{width:38px;height:38px}
.mp-right .chf{gap:2px}
.mp-right .chn{display:none}
.mp-right input.hwf{height:120px;width:34px}
.mp-eq{width:56px;height:30px;border-radius:5px;border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em}
.mp-xf{margin-top:8px}
.mp-xf .xfw{width:100%;justify-content:stretch;font-size:11px}
.mp-xf input.hwx{flex:1}
.mp-brand{text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#5f6a6d;margin-top:2px}
.mp-brand b{color:#9fb3b0}
/* the display keeps the mixer power button */
.mp-screen .power{font-size:14px}
/* classic in portrait */
body.mport #classic{padding:4px 8px 10px!important;gap:6px!important;min-height:0}
body.mport .ctop{padding:2px 0!important}
body.mport .chelp,body.mport .cab-top,body.mport .cab-side,body.mport .grille,body.mport .floor,body.mport #cGloss{display:none!important}
body.mport .radio{width:100%;zoom:1!important;margin:0}
body.mport .stage3d{padding:0!important;perspective:none}
body.mport .cab{grid-template-columns:1fr;padding:8px;border-radius:16px;gap:0}
body.mport .face{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:12px}
body.mport .rdisp{height:300px;transform:none}
body.mport .presets{grid-template-columns:1fr 1fr 1fr;gap:6px;padding:6px;transform:none}
body.mport .presets button{min-height:46px;padding:12px 4px 8px;font-size:10px}

body.mport .cknobs{grid-template-columns:1fr auto 1fr;margin:22px 0 0;align-items:start}
body.mport .bknob{width:80px;height:80px;box-shadow:0 0 0 6px #b9a37e,0 0 0 7px #7a6547,0 8px 14px rgba(0,0,0,.5)}
body.mport .ck label.lbl2{font-size:8px}
body.mport .rs-list li{min-height:44px}
body.mport .rscreen b{font-size:20px}
body.mport .rs-art{width:120px;height:120px}
/* no rotate prompt on phones any more: portrait has its own layout */
@media (orientation:portrait) and (max-width:820px){#rotate{display:none}body>*:not(#rotate){visibility:visible}}
/* v54: mobile display */
.mp-disp{position:relative;display:grid;grid-template-columns:140px 1fr;grid-template-rows:140px auto;gap:8px 12px;padding:10px;border-radius:10px;background:#04070a;box-shadow:0 0 0 3px #0b0c0d,0 0 0 4px #3b3f44,inset 0 0 30px rgba(0,0,0,.9);overflow:hidden}
.mp-cov{width:140px;height:140px;border-radius:6px;background:#0b0c0d center/cover no-repeat;box-shadow:0 0 0 1px #000,0 8px 20px rgba(0,0,0,.7);cursor:zoom-in}
.mp-info{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;font-family:var(--body)}
.mp-info small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#ff5a6a}
.mp-info small.mix{color:var(--teal)}
.mp-info b{font-family:var(--disp);font-size:17px;letter-spacing:.04em;color:#eef3f3;text-transform:uppercase;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-info span{font-size:14px;color:#9aa4a6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-info em{font-style:normal;font-family:var(--mono);font-size:13px;color:#cfd6d8}
.mp-info i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#5f6a6d;margin-top:2px}
#mpSpec{grid-column:1/-1;width:100%;height:56px;border-radius:4px;background:#020405}
.mp-power{position:absolute;inset:0;border:0;border-radius:10px;background:radial-gradient(120% 120% at 50% 45%,rgba(47,224,200,.18),rgba(5,10,12,.92) 62%),#05090b;color:#2fe0c8;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.14em;cursor:pointer;text-shadow:0 0 18px rgba(47,224,200,.45)}
.mp-power[hidden]{display:none}
/* touch faders: bigger, no page scroll while dragging */
body.mport input.hwx,body.mport input.hwf,body.mland input.hwx,body.mland input.hwf{touch-action:none}
body.mport input.hwx{height:44px}
body.mport .dock{display:none!important}
body.mport input.hwx::-webkit-slider-thumb{width:34px;height:44px}
/* v55: mobile lists (replace the racks on phones) */
.mlists{display:none}
body.mport .belowbox{display:none!important}
body.mport .mlists{display:block;border-radius:14px;background:linear-gradient(180deg,#121416,#0a0b0c);box-shadow:0 0 0 1px #000,0 0 0 2px #2a2d31,0 20px 40px rgba(0,0,0,.7);overflow:hidden}
.ml-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#08090a;border-bottom:1px solid #2a2d31}
.ml-tabs button{border:0;background:none;color:#7d8588;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.08em;height:44px;border-bottom:3px solid transparent}
.ml-tabs button.on{color:var(--teal);border-bottom-color:var(--teal)}
.ml-pane{padding:10px;font-family:var(--body);color:var(--text)}
.ml-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ml-head button{border:1px solid #2a3a3e;background:#0c1417;color:#7ab8b0;font-family:var(--mono);font-weight:700;font-size:11px;padding:8px 12px;border-radius:6px}
.ml-head b{font-family:var(--disp);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#eef3f3}
.ml-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ml-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:10px;background:#141719;box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.ml-list li .sw{width:8px;height:40px;border-radius:4px;background:var(--c,#2fe0c8);box-shadow:0 0 12px var(--c,#2fe0c8)}
.ml-list li .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.ml-list li .tx b{font-size:15px;color:#eef3f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-list li .tx span{font-size:12px;color:#9aa4a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-list li .go{font-family:var(--mono);color:#5f6a6d;font-size:16px}
.ml-list li .th{width:56px;height:56px;border-radius:6px;background:#0b0c0d center/cover no-repeat;box-shadow:0 0 0 1px #000}
.ml-list li .th.gen{display:grid;place-items:center;font-family:var(--disp);font-size:16px;color:#fff}
.ml-btns{display:flex;gap:6px}
.ml-btns button{border:0;border-radius:6px;min-width:44px;height:40px;padding:0 10px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;color:#061010;background:var(--teal);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.ml-btns button.b{background:var(--amber)}
.ml-btns button.g{background:#1d2225;color:#cfd6d8}
.ml-btns button.r{background:#ff3b4e;color:#fff}
.ml-news li{grid-template-columns:64px 1fr}
.ml-news li .th{width:64px;height:64px}
.ml-news li .tx b{white-space:normal;font-size:14px;line-height:1.25}
.ml-news li .tx small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#ffb547;text-transform:uppercase}
.ml-news li .ml-btns{grid-column:1/-1}
.ml-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ml-grid button{min-width:0;overflow:hidden;border:0;background:#141719;border-radius:10px;padding:8px;text-align:left;color:var(--text);box-shadow:0 0 0 1px #000}
.ml-grid .cv{aspect-ratio:1;border-radius:6px;background:#0b0c0d center/cover no-repeat;margin-bottom:6px;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-size:12px;text-align:center;padding:6px}
.ml-grid b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-grid em{display:block;font-style:normal;font-size:12px;color:#9aa4a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-grid small{font-family:var(--mono);font-size:10px;color:#5f6a6d}
.ml-acc{display:flex;flex-direction:column;gap:8px}
.ml-acc>button{border:0;border-radius:10px;height:52px;padding:0 14px;text-align:left;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;color:#eef3f3;background:linear-gradient(180deg,#25282b,#131517);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center}
.ml-acc>button.on{color:var(--teal)}
.ml-acc .panel{position:static;opacity:1;transform:none;min-height:0;padding:12px;border-radius:10px;background:#0c1417;font-size:14px}
.ml-acc .panel[hidden]{display:none}
.ml-acc .panel h4{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--teal)}
.ml-acc .panel ul{list-style:none;margin:0;padding:0}
.ml-acc .panel li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #1b2326}
.ml-acc .panel a{color:var(--teal)}
.ml-acc .panel .cities{display:flex;flex-wrap:wrap;gap:6px}
.ml-acc .panel .cities span{padding:4px 8px;border-radius:4px;background:#132026;font-size:12px}
/* v56: custom touch sliders (pointer events, no native range on phones) */
.mp-head{display:none!important}
.msl{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.msl i{position:absolute;background:#000;border-radius:3px;box-shadow:0 0 0 2px #1d1f22,inset 0 1px 2px rgba(255,255,255,.08)}
.msl b{position:absolute;border-radius:4px;background:linear-gradient(180deg,#34383b 0,#15181a 45%,#e8f0ee 45% 55%,#15181a 55%,#0b0d0e);box-shadow:0 4px 8px #000,0 0 0 1px #000}
.msl.h{height:30px;flex:1;margin:0 12px}
.msl.h i{left:0;right:0;top:50%;height:6px;margin-top:-3px}
.msl.h b{top:50%;width:22px;height:30px;margin:-15px 0 0 -11px;background:linear-gradient(90deg,#34383b,#15181a 40%,#e8f0ee 40% 60%,#15181a 60%,#0b0d0e)}
.msl.v{width:40px;height:130px}
.msl.v i{top:0;bottom:0;left:50%;width:6px;margin-left:-3px}
.msl.v b{left:50%;width:34px;height:22px;margin:-11px 0 0 -17px}
.msl-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#7d8588}
.mp-xf{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:#8a9395;padding:0 4px;width:58%;margin:0 auto}
.mp-right{gap:6px}
/* v57: phone player — EQ/FILTER column right, TV/ON AIR left above CUE */
.mp-mid{grid-template-columns:64px minmax(0,1fr) 64px;align-items:stretch}
.mp-left{justify-content:space-between;gap:8px}
.mp-left .fmid{order:0;flex-direction:column;gap:8px;padding:0;transform:none;align-items:center}
.mp-left .tport{order:1}
.mp-left .tvbtn,.mp-left .onair{width:40px;height:40px}
.mp-left .rb span{font-size:8px}
.mp-right{justify-content:space-between}
.mp-eqs{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:4px}
.mp-eqs .strip{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:6px;align-items:center}
.mp-eqs .kb{gap:3px}
.mp-eqs .knob.pk{width:46px;height:46px}
.mp-eqs .kb label{font-size:8px}
.mp-eqs .kb label{font-size:9px}
.mp-eqs .ksc{display:none}
.mp-eq1{display:flex;flex-direction:column;align-items:center;gap:2px}
.mp-eq1 small{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:#7d8588}
.mp-eq1.flt small{color:var(--teal)}
.msl.v.eq{width:44px;height:58px}
.msl.v.eq i{width:5px}
.msl.v.eq i::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:2px;margin-top:-1px;background:#3a3e42}
.msl.v.eq b{width:30px;height:16px;margin:-8px 0 0 -15px}
.mp-eq1.flt .msl.v.eq{height:76px}
.mp-eq1.flt .msl.v.eq b{background:linear-gradient(180deg,#34383b 0,#15181a 45%,#2fe0c8 45% 55%,#15181a 55%,#0b0d0e)}
.mp-jog .jogwrap{max-width:300px}
/* no text selection / long-press callouts while playing on touch screens */
.mplayer,.rig,.radio,.mlists .ml-tabs,.pad,.knob,.platter,.jogwrap,.hbtn,.msl,.presets,.bknob,.tvbtn,.onair,.mp-deck{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mplayer *,.rig *{-webkit-tap-highlight-color:transparent}
/* v58: landscape phone — pads that fit, real knobs in the EQ panel */
body.mland .dctl{grid-template-columns:54px minmax(0,1fr);gap:10px;width:100%;align-items:center}
body.mland .tport{gap:8px}
body.mland .hbtn{width:36px;height:36px;font-size:7.5px}
body.mland .tport{gap:6px}
body.mland .dh{padding:2px 6px 3px}body.mland .hdeck .cover{height:28px;width:28px}body.mland .dh .dart{font-size:10px}body.mland .dh .dtit{font-size:10px}
body.mland .dpads{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
body.mland .pad.hw{height:26px;font-size:7.5px;padding:0 2px;min-width:0;overflow:hidden;white-space:nowrap;border-width:2px;letter-spacing:0}
body.mland .dpads{gap:5px}
body.mland .hdeck{padding:4px 6px 12px;height:100%;min-height:0;box-sizing:border-box;overflow:visible!important;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto minmax(0,1fr) auto;column-gap:6px;row-gap:4px;overflow:hidden;align-items:center}
body.mland .hdeck .dh{grid-column:1;grid-row:1}body.mland .hdeck .jogwrap{grid-column:1;grid-row:2;align-self:center}body.mland .hdeck .dctl{grid-column:1;grid-row:3}
body.mland .hdeck .strip{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;height:100%;gap:2px;padding-top:4px}
body.mland .hdeck .strip .knob.pk{width:34px;height:34px}body.mland .hdeck .strip .kb{gap:1px}body.mland .hdeck .strip .kb label{font-size:7px}body.mland .hdeck .strip .ksc{display:none}
body.mland .eqbtn{display:none!important}
body.mland .jogwrap{width:auto;height:calc(100% - 10px);max-width:100%;aspect-ratio:1;margin:10px auto 0;align-self:end;justify-self:center}
body.mland .hdeck .dh{margin-bottom:0;z-index:2;position:relative}
body.mland #eqSheet{grid-template-columns:1fr 1fr;gap:6px 14px}
body.mland #eqSheet .eqa>label,body.mland #eqSheet .eqb>label,body.mland #eqSheet .rst{display:none}
body.mland #eqSheet .kb label{display:block;font-size:9px;color:#cfd6d8}
body.mland #eqSheet .strip{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-start;gap:6px}
body.mland #eqSheet .knob.pk{width:52px;height:52px}
body.mland #eqSheet .ksc{display:none}
body.mland #eqSheet .eqa::before{content:"DECK A";font-size:10px;letter-spacing:.14em;color:var(--teal);display:block;margin-bottom:4px}
body.mland #eqSheet .eqb::before{content:"DECK B";font-size:10px;letter-spacing:.14em;color:var(--amber);display:block;margin-bottom:4px}
/* v59: landscape phone — balanced mixer column: display top, faders + TV/ON AIR centred, crossfader at the bottom */
body.mland .hmix{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;gap:6px;padding:6px 6px 8px;min-height:0}
body.mland .screen{height:112px;flex:none}
body.mland .faders{flex:1;align-items:center;align-content:center;width:100%;grid-template-columns:1fr auto 1fr}
body.mland .hmix input.hwf{height:150px;width:34px}
body.mland .fmid{transform:none;gap:10px;padding:0}
body.mland .fmid .tvbtn,body.mland .fmid .onair{width:38px;height:38px}
body.mland .xfw{flex:none;margin:0 0 4px;padding:0 4px;width:100%;box-sizing:border-box;gap:6px;min-width:0}
body.mland .xfw input.hwx{flex:1 1 0;width:0;min-width:0;max-width:none}
body.mland .xfw span{flex:none}
body.mland .top,body.mland .ctop{padding:0!important;min-height:0;margin:0}
body.mland .wordmark{font-size:14px!important}
body.mland .expsw{padding:3px 8px!important;font-size:9px!important}
body.mland .fsbtn{width:28px;height:28px}
body.mland .wrap{padding-top:2px!important;padding-bottom:4px!important}
#nDeck,.rs-stop{display:none!important}
/* ---------- social bar ---------- */
.socialbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:2px auto 0;padding:10px 16px 14px;border-radius:10px;
  background:linear-gradient(180deg,#121416,#0b0c0d);box-shadow:0 0 0 1px #000,0 0 0 2px #2a2d31,inset 0 1px 0 rgba(255,255,255,.06)}
.socialbar .sb-l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#5f6a6d;margin-right:6px}
.socialbar a{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;color:#cfd6d8;text-decoration:none;padding:7px 11px;border-radius:5px;background:linear-gradient(180deg,#25282b,#131517);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.6)}
.socialbar a:hover{color:#061010;background:var(--teal);box-shadow:0 0 14px rgba(47,224,200,.5)}
#classic .socialbar{width:max-content;max-width:100%}
body.mport .socialbar{width:max-content;max-width:100%;gap:5px;padding:8px 10px 12px}
body.mport .socialbar a{font-size:9px;padding:8px 9px}
body.mland .socialbar{display:none}
/* ---------- share ---------- */
#shareBox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.75);display:flex;align-items:flex-end;justify-content:center;padding:16px}
#shareBox[hidden]{display:none}
@media (pointer:fine){#shareBox{align-items:center}}
.shb{width:min(520px,100%);background:#0e1113;border:1px solid #2a2d31;border-radius:14px;padding:12px 14px 16px;box-shadow:0 30px 70px rgba(0,0,0,.8)}
.shb h5{margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--teal)}
.shb h5 button{border:0;background:none;color:#cfd6d8;font-size:16px;cursor:pointer}
.shb p{margin:0 0 10px;font-size:13px;color:#9aa4a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sh{display:grid;place-items:center;height:44px;border:0;border-radius:8px;text-decoration:none;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;color:#cfd6d8;background:linear-gradient(180deg,#25282b,#131517);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.6);cursor:pointer}
.sh:hover{color:#061010;background:var(--teal)}
.sh.ok{color:#061010;background:#3dff7a}
.nbtns{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;row-gap:6.5px}
.nbtns .sbtn{min-width:0;padding:10px 6px}
a.sbtn{display:grid;place-items:center;text-decoration:none;text-align:center}
.ml-btns button.s{background:#1d2225;color:var(--teal)}
.relinfo{cursor:pointer}
/* experience switch: two-position selector CLASSIC | DJ CONSOLE */
.modesw{display:inline-flex!important;flex:0 0 auto;padding:4px;border-radius:999px;background:#07090a;border:1px solid #2a3338;box-shadow:inset 0 2px 6px #000}
.modesw button{border:0;border-radius:999px;padding:10px 18px;font:700 12px/1 var(--mono);letter-spacing:.12em;color:#8c979a;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background .2s,color .2s}
.modesw button[data-exp="classic"]{color:#c9a877}
#dj .modesw button[data-exp="classic"],body .modesw button[data-exp="classic"]{background:linear-gradient(180deg,#e7c38e,#b88a4e);color:#1a0f05;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.modesw button[data-exp="classic"]:hover{background:linear-gradient(180deg,#f0d09e,#c49658);color:#1a0f05}
.modesw button[data-exp="dj"]{color:var(--teal)}
.modesw button:hover{background:rgba(255,255,255,.06)}
body[data-exp="classic"] .modesw button[data-exp="classic"],body[data-exp="intro"] .modesw button[data-exp="classic"]{background:linear-gradient(180deg,#e7c38e,#b88a4e);color:#1a0f05;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:default}
body[data-exp="dj"] .modesw button[data-exp="dj"]{background:linear-gradient(180deg,#46f0d8,#1bb7a2);color:#04120f;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:default}
@media (max-width:820px){#classic .ctop{flex-wrap:nowrap!important;align-items:center!important}#classic .ctop .status{flex-wrap:nowrap;width:auto;margin-left:auto}#classic .modesw{order:5;width:100%;margin-top:6px}#classic .modesw button{flex:1;padding:14px 10px;font-size:14px}}
body.mport .modesw button,body.mland .modesw button{padding:6px 10px!important;font-size:10px!important}
body.mport #classic .modesw button{padding:14px 10px!important;font-size:14px!important}
/* Graba TV: live HLS inside the mixer screen, tap = full screen */
.scr-tv video.tvlive{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .4s;z-index:0}
.scr-tv.playing video.tvlive{opacity:1}
.scr-tv.playing .tvvid,.scr-tv.playing .tvtxt{display:none}
.scr-tv.playing::after{display:none}
.scr-tv.full video.tvlive{object-fit:contain}
.scr-tv .tvtxt span.err{color:#ffb3ba}
#mpDisp .scr-tv{position:absolute;inset:0;z-index:5;border-radius:10px}
/* classic: Graba TV inside the radio screen */
.rs-tvslot{position:relative;flex:1;min-height:0;border-radius:6px;overflow:hidden;background:#000}
.rs-tv{position:absolute;inset:0;background:#000;cursor:zoom-in;overflow:hidden}
.rs-tv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.rs-tv.playing video{opacity:1}
.rs-tv .tvbadge{z-index:2}
.rs-tv .tvhint{z-index:2;display:none}
.rs-tv.playing .tvhint{display:block}
.rs-tvmsg{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#cfe;z-index:1;text-align:center;padding:0 10px}
.rs-tv.playing .rs-tvmsg{display:none}
.rs-tvmsg.err{color:#ffb3ba}
.rs-tvx{display:none}
.rs-tv.full{position:fixed;inset:0;z-index:9000;border-radius:0;cursor:default}
.rs-tv.full video{object-fit:contain}
.rs-tv.full .tvhint{display:none}
.rs-tv.full .rs-tvx{display:block;position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.55);color:#fff;font-size:20px;cursor:pointer}
.rs-tv.full .tvbadge{left:20px;top:calc(20px + env(safe-area-inset-top,0px));font-size:14px;padding:4px 10px}
/* classic radio: same visible margin above the display as below the controls; display takes the free height */
body:not(.mport):not(.mland) #classic .face{padding-top:34px!important;padding-bottom:17px!important}
body:not(.mport):not(.mland) #classic .rdisp{height:236px}
body.mport #classic .face{padding-top:20px}
/* deck names in the mixer screen: condensed face, same size for both radios, always complete */
.scr-decks .sd b{font-family:"Barlow Condensed","Arial Narrow",sans-serif!important;font-weight:600!important;font-size:16px;letter-spacing:.08em!important;line-height:1.05;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
/* mixer serigraphy: fader and crossfader scale as white as the EQ knob dots */
.chf input.hwf{background:repeating-linear-gradient(0deg,transparent 0 16px,#f2f4f4 16px 17px) left/8px 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 16px,#f2f4f4 16px 17px) right/8px 100% no-repeat,linear-gradient(90deg,transparent 0 calc(50% - 7px),#000 calc(50% - 7px) calc(50% + 7px),transparent calc(50% + 7px)) no-repeat}
.xfw input.hwx{background:repeating-linear-gradient(90deg,transparent 0 14px,#f2f4f4 14px 15px) center top/100% 8px no-repeat,repeating-linear-gradient(90deg,transparent 0 14px,#f2f4f4 14px 15px) center bottom/100% 8px no-repeat}
.xfw>span{color:#f2f4f4}
/* on-demand displays: no trackpad/wheel scrolling inside (rows are clicked, BROWSE scrolls) */
.rmod-od .rlcd ul{overflow:hidden!important;overscroll-behavior:auto}
#rDjs li button{padding-top:4.5px;padding-bottom:4.5px}
/* on-demand controls: bigger BROWSE encoder, label as strong as the buttons, knob+label centred in the free space */
.rmod-od .rctl{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-start;gap:0!important}
.rmod-od .enc{width:min(112px,72%);height:auto;aspect-ratio:1;margin-top:auto;flex:none}
.rmod-od .enc span::after{top:7px;width:5px;height:16px;margin-left:-2.5px}
.rmod-od .rctl label{font-size:13px!important;letter-spacing:.14em!important;margin:14px 0 auto!important;line-height:1}
.rmod-od .rbtns{margin-top:0;flex:none}

/* rack hint lines readable on the brushed metal, same tone on every module */
.rhint,.nhead .rhint{color:#b9c2c4!important}
/* dial stations: no browser focus ring on mouse click, teal ring for keyboard only */
.dscale .st:focus{outline:none}.dscale .st:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
/* NEWS RECEIVER: display + dial + one big TUNE/PUSH knob, no button column */
#news .nbody{grid-template-columns:minmax(0,1.6fr) minmax(0,1.15fr)!important}
#news .tuner{grid-template-columns:minmax(0,1fr) 150px!important;gap:0!important}
#news .tk{margin:0!important;justify-self:center}
#news .tknob{width:124px;height:124px;cursor:grab}
#news .tknob span::after{top:8px;width:6px;height:22px;margin-left:-3px}
#news .tknob .tpush{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;color:#e8ecec;background:radial-gradient(circle at 45% 35%,#3a3d41,#141517 70%);box-shadow:0 0 0 2px #0b0c0d,0 0 0 3px #3a3e42,inset 0 1px 1px rgba(255,255,255,.25),0 3px 6px rgba(0,0,0,.7);pointer-events:none;transition:transform .08s}
#news .tknob.down .tpush{transform:translate(-50%,-50%) scale(.92);box-shadow:0 0 0 2px #0b0c0d,0 0 0 3px var(--teal),inset 0 2px 4px rgba(0,0,0,.8),0 0 12px rgba(47,224,200,.45)}
#news .tk label{top:calc(100% + 14px);font-size:12px;white-space:nowrap}
#news .vfdwrap{cursor:pointer;transition:box-shadow .2s}
#news .vfdwrap:hover{box-shadow:0 0 0 2px rgba(255,181,71,.55),0 0 18px rgba(255,181,71,.18)}
#news .vfdwrap:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#news .nhead .rhint{display:none}
#news .tuner{grid-template-columns:minmax(0,1fr) auto!important}#news .tuner .tk{justify-self:center!important;margin:0 1px 0 33px!important}
#news .vfd-top{gap:10px}#news .vfd-top span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#news .vfd-top span:last-child{white-space:nowrap;flex:none}
#news .nhead b{color:#e8ecec}
/* program cards: schedule may take two lines instead of being cut */
.rprog span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3}
/* session fader next to long lists */
.rlcd.wide{position:relative}
#rSess.hasfader{margin-right:26px}
.odfader{position:absolute;right:8px;width:18px;touch-action:none;cursor:ns-resize}
.odfader[hidden]{display:none}
.odfader i{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:#000;box-shadow:0 0 0 1px #1d2a2e,inset 0 0 3px #000}
.odfader b{position:absolute;left:0;right:0;border-radius:3px;background:linear-gradient(180deg,#3d4145 0,#1b1d20 40%,#f2f4f4 40% 60%,#1b1d20 60%,#0f1011);box-shadow:0 0 0 1px #000,0 3px 6px rgba(0,0,0,.8);cursor:grab}
.odfader b:active{cursor:grabbing}

/* experience rocker CLASSIC | DJ STYLE (3D render in REAL 3D block) */
.xsw{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:5px}
.xsw .xB{display:grid;grid-template-columns:1fr;width:88px;height:45px;padding:4px 7px 5px;box-sizing:border-box;background:center/100% 100% no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.xsw .xB button{all:unset;cursor:pointer;display:grid;place-items:center;padding-top:7px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.12em;color:#f3ece0;text-shadow:0 1px 1px rgba(0,0,0,.75);-webkit-tap-highlight-color:transparent}
.xsw .xB.r button{color:#fff;transform:translateY(1px)}
.xsw .xB button:focus-visible{outline:2px solid #2fe0c8;outline-offset:-2px;border-radius:3px}
body.mland .xsw{margin-top:4px;gap:2px}body.mland .xsw .xB{width:62px;height:32px;padding:3px 5px 4px}body.mland .xsw .xB button{font-size:7px;padding-top:5px;letter-spacing:.06em}body.mland .xsw label{font-size:8px!important}body.mport #classic .face{padding-bottom:26px!important}

/* ===== TV MODE: la radio Classic diventa un televisore retro (NEWS e GRABA TV) ===== */
.radio.tvon .grille{display:none!important}
.radio.tvon .cab{grid-template-columns:minmax(0,1fr)!important}
.radio.tvon .rdisp{width:auto!important;max-width:none!important}
.radio.tvon .face{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 146px!important;grid-template-rows:minmax(0,1fr)!important;column-gap:16px!important;padding:20px!important;align-items:stretch}
.radio.tvon .rdisp{grid-column:1;grid-row:1;height:100%!important;margin:0!important;min-height:0}
.radio.tvon .rscreen{height:100%!important;max-height:none!important;padding:0!important;overflow:hidden}
.radio.tvon #cSpec,.radio.tvon #cPresets{display:none!important}
.radio.tvon .cknobs{grid-column:2;grid-row:1;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;height:100%;padding:4px 0!important}
.radio.tvon .cknobs>.ck{order:1}
.radio.tvon .cknobs>.ck:last-child{order:2}
.radio.tvon .cknobs>.cbtns{order:3;margin-top:auto}
.radio.tvon .ck label.lbl2{display:none}
.radio.tvon .rscreen.crton{animation:crton .5s ease-out}
.radio.tvon:not(.gtv) .rdisp::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,rgba(0,0,0,0) 1px 3px),radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,.06),rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
@keyframes crton{0%{transform:scaleY(.02) scaleX(.9);filter:brightness(3)}45%{transform:scaleY(1) scaleX(1);filter:brightness(1.8)}100%{transform:none;filter:none}}
/* schermo del televisore */
.tvv{display:flex;flex-direction:column;height:100%;min-height:0;font-family:Arial,Helvetica,sans-serif}
.tvv .tvhead{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(180deg,rgba(47,224,200,.16),rgba(0,0,0,0));border-bottom:1px solid rgba(47,224,200,.28);flex:0 0 auto}
.tvv .tvhead b{font-family:var(--disp,inherit);font-size:15px;letter-spacing:.18em;color:#2fe0c8}
.tvv .tvhead span{font-size:11px;letter-spacing:.12em;color:#9fb5b1;margin-left:auto}
.tvv .tvhead button{border:1px solid rgba(47,224,200,.5);background:rgba(0,0,0,.35);color:#cfe9e4;border-radius:5px;padding:5px 10px;font:700 10px/1 Arial,sans-serif;letter-spacing:.12em;cursor:pointer}
.tvv .tvhead button:hover{background:rgba(47,224,200,.2)}
.tvgrid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:calc(50% - 6px);gap:12px;padding:12px;overflow-y:scroll;overscroll-behavior:contain}

.gnwrap{flex:1 1 auto;min-height:0;display:flex;gap:8px;padding-right:10px}
.gnwrap .tvgrid{flex:1 1 auto;padding-right:2px}
.gnbar{flex:0 0 12px;align-self:stretch;margin:12px 0;border-radius:8px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 6px rgba(0,0,0,.6);position:relative;cursor:pointer}
.gnthumb{position:absolute;left:1px;right:1px;top:0;min-height:26px;border-radius:7px;background:linear-gradient(180deg,#7dfae8,#1fae9a);box-shadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(47,224,200,.45)}
.gnbar.off{opacity:.25}
body.mport .gnbar,body.mland .gnbar{flex-basis:9px}
.tvcard{position:relative;color:inherit;text-decoration:none;-webkit-user-drag:none;display:grid;grid-template-rows:minmax(0,1fr) auto;border-radius:8px;overflow:hidden;background:#0d1416;border:2px solid transparent;cursor:pointer;min-height:0}
.tvcard .tvimg{background:#101a1c center/cover no-repeat;min-height:0}
.tvcard .tvtx{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85))}
.tvcard em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.14em;color:#04120f;background:var(--c,#2fe0c8);padding:2px 6px;border-radius:3px;align-self:flex-start}
.tvcard time{font-size:10px;color:#8ea6a2;letter-spacing:.08em}
.tvcard h4{margin:0;font-size:14px;line-height:1.25;color:#eaf5f3;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tvcard.on{border-color:#2fe0c8;box-shadow:0 0 0 2px rgba(47,224,200,.35),0 0 22px rgba(47,224,200,.25)}
.tvcard:hover{border-color:rgba(47,224,200,.6)}
.tvfoot{flex:0 0 auto;padding:7px 14px;font-size:10px;letter-spacing:.12em;color:#7f938f;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:14px}
.tvart{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:16px;padding:14px}
.tvart .tvimg{background:#101a1c center/cover no-repeat;border-radius:8px;min-height:0}
.tvart .gnbody{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
.tvart .gnbody em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;color:#04120f;background:var(--c,#2fe0c8);padding:3px 7px;border-radius:3px;align-self:flex-start}
.tvart h3{margin:0;font-size:22px;line-height:1.2;color:#eaf5f3}
.tvart p{margin:0;font-size:14px;line-height:1.5;color:#c3d5d2}
.tvart a.tvlink{margin-top:auto;align-self:flex-start;color:#04120f;background:#2fe0c8;border-radius:6px;padding:8px 14px;font:700 11px/1 Arial,sans-serif;letter-spacing:.12em;text-decoration:none}
.tvvideo{flex:1 1 auto;min-height:0;position:relative;background:#000}
.tvvideo .rs-tvslot{position:absolute;inset:0}
.tvvideo .rs-tvslot>*{width:100%;height:100%}
body.mport .radio.tvon .face{grid-template-columns:minmax(0,1fr) 86px!important;padding:12px!important;column-gap:10px!important}
body.mport .radio.tvon .cknobs{gap:8px!important}
body.mport .tvgrid{grid-template-columns:1fr;grid-auto-rows:calc(50% - 4px);gap:8px;padding:8px}
body.mport .tvcard h4{font-size:12px}
body.mport .tvart{grid-template-columns:1fr;grid-template-rows:38% minmax(0,1fr)}
body.mland .radio.tvon .face{grid-template-columns:minmax(0,1fr) 104px!important;padding:10px!important}
body.mland .tvgrid{gap:7px;padding:7px}
body.mland .tvcard h4{font-size:11px}
body.mland .tvv .tvhead{padding:5px 9px}
body.mland .tvv .tvhead b{font-size:11px}
.radio.tvon.gtv .rdisp{background:#000!important}
.radio.tvon .rs-tv{cursor:pointer;background:#000}
.radio.tvon .rs-tv video{object-fit:contain!important;image-rendering:auto}
.radio.tvon .rs-tv .tvhint{right:auto;left:50%;transform:translateX(-50%);bottom:12px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;color:#04120f;background:rgba(47,224,200,.92);padding:8px 16px;border-radius:999px;opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform .15s,opacity .15s}
.radio.tvon .rs-tv:hover .tvhint{opacity:1;transform:translateX(-50%) scale(1.06)}
.radio.tvon .rs-tv.full .tvhint{display:none}
body.mport .radio.tvon .rs-tv .tvhint,body.mland .radio.tvon .rs-tv .tvhint{font-size:10px;padding:6px 12px}
.nmod .vfdwrap.swap .vfdphoto,.nmod .vfdwrap.swap .vfd{animation:nswap .5s ease}
@keyframes nswap{0%{opacity:.15;filter:brightness(1.6)}55%{opacity:.5}100%{opacity:1;filter:none}}
/* striscia indice notizie: link veri (servono a Google) e scorciatoia per chi legge */
.newsidx{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
.newsidx a{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#9fb0b3;text-decoration:none;border-bottom:1px solid rgba(47,224,200,.25);padding-bottom:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newsidx a:hover{color:#2fe0c8;border-bottom-color:#2fe0c8}
.newsidx b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#6f7a7c;align-self:center;margin-right:2px}
body.mport .newsidx a{font-size:10px}
.sf-links .nf-in{display:contents}
.sf-links b{white-space:nowrap}
.jog .label img.logo.proglogo{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.02)}
/* presentazione del sito: testo e collegamenti veri, presenti in tutte e due le esperienze */
.sitefoot{width:min(1100px,calc(100% - 32px));margin:14px auto 26px;padding:0;font-family:var(--body,Arial,sans-serif)}
body[data-exp="dj"] .sitefoot{width:min(1312px,calc(100% - 24px))}
.sitefoot .sf-in{position:relative;padding:20px 26px 18px;border-radius:6px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.05) 44%,rgba(255,255,255,0) 58%),var(--alu),#121416;
  background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal,multiply,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.6),0 0 0 1px #050505,0 10px 20px rgba(0,0,0,.6)}
.sitefoot .sf-in::before,.sitefoot .sf-in::after{content:"";position:absolute;top:10px;bottom:10px;width:12px;
  background:radial-gradient(circle at 50% 12px,#2a2d30 0 4px,transparent 4.4px),radial-gradient(circle at 50% calc(100% - 12px),#2a2d30 0 4px,transparent 4.4px)}
.sitefoot .sf-in::before{left:7px}.sitefoot .sf-in::after{right:7px}
.sitefoot .sf-h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#9fb6b2;margin:0 0 12px;font-weight:700;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.8)}.ctop>h1.hbrand{display:contents;font:inherit;margin:0}
.sitefoot p{margin:0 0 9px;font-size:13px;line-height:1.6;color:#8d9c9a;max-width:96ch;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.sitefoot p b{color:#b8c9c6;font-weight:600}
.sitefoot a{color:#9fb0b3;text-decoration:none;border-bottom:1px solid rgba(47,224,200,.22)}
.sitefoot a:hover{color:#2fe0c8;border-bottom-color:#2fe0c8}
.sf-links{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:8px;font-family:var(--mono);font-size:11px}
.sf-links b{font-size:10px;letter-spacing:.16em;color:#63706f}
body.mport .sitefoot p,body.mland .sitefoot p{font-size:12px}
/* CHANNELS: sezione canali come un banco vero — canali incassati, indicatori di livello, display acceso */
.rmod-ch .navgrid{grid-template-columns:auto minmax(0,1fr);gap:18px}
.rmod-ch .navfaders{gap:10px;padding:10px 12px;border-radius:8px;background:linear-gradient(180deg,#0a0c0d,#141719);box-shadow:inset 0 2px 8px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.05)}
.rmod-ch .nf{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:7px;padding:8px 6px 6px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.rmod-ch .nf::before{content:"";position:absolute;left:6px;top:10px;bottom:34px;width:5px;border-radius:3px;background:linear-gradient(180deg,#05070a,#0d1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rmod-ch .nf .vu{position:absolute;left:6px;top:10px;bottom:34px;width:5px;border-radius:3px;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px)}
.rmod-ch .nf .vu i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v,0)*100%);background:linear-gradient(0deg,#2fe0c8,#7dfae8 70%,#ffd23f);box-shadow:0 0 8px rgba(47,224,200,.55);transition:height .08s linear}
.rmod-ch .nf.act .vu i{background:linear-gradient(0deg,#2fe0c8,#9dffee 60%,#ffd23f)}
.rmod-ch .nf>label,.rmod-ch .nf>span:not(.chlbl):not(.vu){display:none}
.rmod-ch .nf .chlbl{font-family:var(--mono);font-size:8px;letter-spacing:.05em;white-space:nowrap;color:#7f8b8d;background:linear-gradient(180deg,#171b1d,#0d1012);padding:4px 7px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rmod-ch .nf.act .chlbl{color:#04120f;background:linear-gradient(180deg,#54f0da,#1fae9a);box-shadow:0 0 12px rgba(47,224,200,.45)}
.rmod-ch .panel{padding:0;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#0e1a1c,#05090a 75%);box-shadow:inset 0 0 0 1px rgba(47,224,200,.16),inset 0 2px 26px rgba(0,0,0,.9)}
.chsec{height:100%;padding:12px 14px;overflow:auto;font-family:var(--mono)}
.chsec h4{margin:0 0 8px;font-size:11px;letter-spacing:.18em;color:#2fe0c8}
.chnote{margin:10px 0 0;font-size:11px;color:#6f807f}
.chrow{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin}
.chrow::-webkit-scrollbar{height:8px}
.chrow::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:6px}
.chrow::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#54f0da,#1fae9a);border-radius:6px}
.chcard{flex:0 0 auto;width:116px;display:grid;grid-template-rows:104px auto auto;gap:4px;text-decoration:none;border-radius:7px;padding:6px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.chcard:hover{box-shadow:inset 0 0 0 1px rgba(47,224,200,.6)}
.chcov{width:100%;height:104px;border-radius:5px;background:#0b1214 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.5)}
.chcard b{font-size:11px;line-height:1.25;color:#e6f4f1;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chcard em{font-style:normal;font-size:9px;letter-spacing:.12em;color:#8fa3a1}
body.mport .chcard{width:104px;grid-template-rows:104px auto auto}body.mport .chcov{height:104px}
.chcities{display:flex;flex-wrap:wrap;gap:8px}
.chcity{display:flex;align-items:flex-end;gap:2px;font-size:11px;color:#cfe0de;background:rgba(255,255,255,.04);padding:5px 9px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.chcity i{width:3px;background:#2fe0c8;border-radius:1px;margin-right:1px;animation:chsig 1.6s ease-in-out infinite;animation-delay:var(--d)}
.chcity i:nth-child(1){height:5px}.chcity i:nth-child(2){height:8px;animation-delay:calc(var(--d) + .12s)}.chcity i:nth-child(3){height:11px;animation-delay:calc(var(--d) + .24s)}.chcity i:nth-child(4){height:14px;animation-delay:calc(var(--d) + .36s);margin-right:6px}
@keyframes chsig{0%,100%{opacity:.25}50%{opacity:1}}
.chtv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center}
.chtvlogo{width:104px;height:104px;border-radius:8px;background:#05090a center/78% no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.chtv p{margin:0 0 10px;font-size:12px;color:#93a6a4;line-height:1.5}
.chtvbtn{display:inline-block;text-decoration:none;font-size:11px;letter-spacing:.12em;color:#04120f;background:#2fe0c8;padding:8px 14px;border-radius:6px;font-weight:700}
body.mport body.mport body.mport .chtv{grid-template-columns:1fr}
.chempty{display:grid;place-items:center;text-align:center}
.chempty span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#4f6a67;text-transform:uppercase}
/* sistema a due vie appena intuibile dietro la tela: il woofer in basso, il tweeter in alto */
.spk{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.14;mix-blend-mode:overlay}
.spkw{aspect-ratio:1/1}
.spkw,.spkt{position:absolute;pointer-events:none}
.spkw{left:12%;top:33.7%;width:76%}
.spkt{left:27.5%;top:11%;width:45%;aspect-ratio:360/163}
.spkw{transform:scale(calc(1 + var(--lvl)*.02));transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.spkw{transform:none!important}}
/* solo la zona di tela davanti al woofer, in basso al centro, riceve la spinta d'aria: il telaio non si muove */
.woof{position:absolute;left:17.7%;top:37.7%;width:64.6%;height:44.6%;pointer-events:none;z-index:1;
  -webkit-mask:radial-gradient(58% 58% at 50% 50%,#000 26%,rgba(0,0,0,.35) 58%,transparent 76%);mask:radial-gradient(58% 58% at 50% 50%,#000 26%,rgba(0,0,0,.35) 58%,transparent 76%);
  transform:scale(calc(1 + var(--lvl)*.032));transform-origin:50% 50%;will-change:transform}
.woof::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 46% at 50% 44%,rgba(255,236,206,.09),transparent 70%),radial-gradient(52% 52% at 50% 62%,rgba(0,0,0,.10),transparent 72%);
  opacity:var(--lvl);will-change:opacity}
@media (prefers-reduced-motion:reduce){.woof{transform:none!important}}
/* schede dei programmi dentro il display della radio: logo grande, nome e orario */
.rs-cards{flex:1 1 auto;min-height:0;display:flex;gap:10px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:4px 3px 6px}
.rs-cards::-webkit-scrollbar{height:7px}
.rs-cards::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:5px}
.rs-cards::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#54f0da,#1fae9a);border-radius:5px}
.rs-card{flex:1 1 0;min-width:104px;max-width:170px;display:grid;grid-template-rows:96px auto auto;align-content:start;gap:4px;padding:6px;border:0;cursor:pointer;border-radius:7px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.28));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:inherit;font-family:inherit}
.rs-cov{width:100%;height:96px;border-radius:5px;background:#0b1214 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rs-card b{font-size:12px;line-height:1.2;overflow-wrap:anywhere;color:#eaf5f3;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-card em{font-style:normal;font-size:10px;letter-spacing:.06em;color:#93a6a4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-card.on{box-shadow:inset 0 0 0 2px #2fe0c8,0 0 18px rgba(47,224,200,.25)}
body.mport .rs-cards{flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto;gap:8px}
body.mport .rs-card{flex:0 0 auto;max-width:none;min-width:0;width:100%;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:7px}
body.mport .rs-cov{grid-row:1/3;height:62px;aspect-ratio:1/1}
body.mport .rs-card b{grid-column:2;align-self:end;font-size:13px;-webkit-line-clamp:1}
body.mport .rs-card em{grid-column:2;align-self:start;font-size:10px}
body.mland .rs-card{min-width:84px;grid-template-rows:58px auto auto}body.mland .rs-cov{height:58px}
body.mland .rs-card b{font-size:11px}body.mland .rs-card em{font-size:9px}
/* le due linguette in cima al televisore: notizie e nuove uscite, stessa sezione informativa */
.gntabs{display:flex;gap:6px}
.gntabs button{font-family:var(--disp,inherit);font-size:12px;letter-spacing:.16em;padding:5px 12px;border-radius:5px 5px 0 0;
  border:1px solid rgba(47,224,200,.3);border-bottom:0;background:rgba(0,0,0,.35);color:#7f9a96;cursor:pointer}
.gntabs button.on{background:linear-gradient(180deg,rgba(47,224,200,.30),rgba(47,224,200,.08));color:#eafffb;border-color:rgba(47,224,200,.65);box-shadow:0 0 14px rgba(47,224,200,.22)}
.gntabs button:hover{color:#eafffb}
.tvcard{font:inherit;text-align:left}
.tvcard .tvimg,.tvart .tvimg{display:grid;place-items:center;padding:10px}
.tvplate{font-style:normal;font-family:var(--disp,inherit);font-size:17px;line-height:1.2;letter-spacing:.04em;text-align:center;color:rgba(6,14,13,.78);text-shadow:0 1px 0 rgba(255,255,255,.22);max-width:86%}
.tvplate.big{font-size:26px}
body.mport .tvplate{font-size:14px}
.tvcard .tvsub{font-size:11px;color:#9fb5b1;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tvlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body.mland .gntabs button{font-size:10px;padding:4px 8px}
body.mport .gntabs button{font-size:10px;padding:4px 8px;letter-spacing:.1em}
body.mport .tvv .tvhead span{display:none}
/* schermata d'invito: i cinque tasti sono la navigazione, non serve piu' nessun elenco */
.rs-welcome{margin:auto;text-align:center;display:grid;gap:10px;padding:0 24px}
.rs-welcome b{font-family:var(--disp,inherit);font-size:26px;letter-spacing:.2em;color:#2fe0c8;text-shadow:0 0 18px rgba(47,224,200,.35)}
.rs-welcome span{font-size:12px;letter-spacing:.08em;color:#8ea6a2;line-height:1.6}
body.mport .rs-welcome b{font-size:18px}body.mland .rs-welcome b{font-size:16px}
/* tasto per condividere quello che si sta ascoltando, in alto a destra nel display */
.rs-share{background:none;border:1px solid rgba(127,178,170,.5);color:#7fb2aa;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  padding:3px 10px;border-radius:4px;cursor:pointer;align-self:center;justify-self:end;white-space:nowrap}
.rs-share:hover{color:#eafffb;border-color:#2fe0c8;box-shadow:0 0 12px rgba(47,224,200,.25)}
/* v93: pausa vera sui mixati, riparte dal punto in cui si e' fermato */
.rs-pp{display:inline-block;align-self:flex-start;justify-self:start;width:max-content;margin-top:8px;background:none;border:1px solid rgba(127,178,170,.5);color:#7fb2aa;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:4px 12px;border-radius:4px;cursor:pointer;white-space:nowrap}
.rs-pp:hover{color:#eafffb;border-color:#2fe0c8;box-shadow:0 0 12px rgba(47,224,200,.25)}
/* v93: barra di scorrimento visibile e trascinabile col mouse in tutti i menu che scorrono */
.rs-list.scrl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:16px}
.rs-list.scrl>li{flex:0 0 auto;min-height:30px}
/* v93: barra di scorrimento propria, sempre visibile e trascinabile col mouse (macOS nasconde quelle di sistema) */
.csb{position:absolute;width:9px;border-radius:5px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);z-index:7;display:none;touch-action:none}
.csb i{position:absolute;left:1px;top:0;width:7px;border-radius:4px;background:linear-gradient(180deg,#54f0da,#1fae9a);box-shadow:0 0 8px rgba(47,224,200,.35);cursor:grab;display:block}
.csb i:hover{background:linear-gradient(180deg,#7dfbe9,#2fe0c8)}
.csb i:active{cursor:grabbing}
.rlcd ul,.rmod-ch .panel,.tvgrid,.tvart .gnbody,.chsec,.rs-list.scrl,.ml-list,.sheet-card{scrollbar-width:thin;scrollbar-color:#2fe0c8 rgba(255,255,255,.08)}
.rlcd ul::-webkit-scrollbar,.rmod-ch .panel::-webkit-scrollbar,.tvgrid::-webkit-scrollbar,.tvart .gnbody::-webkit-scrollbar,.chsec::-webkit-scrollbar,.rs-list.scrl::-webkit-scrollbar,.ml-list::-webkit-scrollbar,.sheet-card::-webkit-scrollbar{width:9px;height:9px}
.rlcd ul::-webkit-scrollbar-track,.rmod-ch .panel::-webkit-scrollbar-track,.tvgrid::-webkit-scrollbar-track,.tvart .gnbody::-webkit-scrollbar-track,.chsec::-webkit-scrollbar-track,.rs-list.scrl::-webkit-scrollbar-track,.ml-list::-webkit-scrollbar-track,.sheet-card::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:6px}
.rlcd ul::-webkit-scrollbar-thumb,.rmod-ch .panel::-webkit-scrollbar-thumb,.tvgrid::-webkit-scrollbar-thumb,.tvart .gnbody::-webkit-scrollbar-thumb,.chsec::-webkit-scrollbar-thumb,.rs-list.scrl::-webkit-scrollbar-thumb,.ml-list::-webkit-scrollbar-thumb,.sheet-card::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#54f0da,#1fae9a);border-radius:6px;border:2px solid rgba(0,0,0,.35)}
.rlcd ul::-webkit-scrollbar-thumb:hover,.rs-list.scrl::-webkit-scrollbar-thumb:hover,.ml-list::-webkit-scrollbar-thumb:hover,.tvgrid::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7dfbe9,#2fe0c8)}
.ml-list{overflow-y:auto;overscroll-behavior:contain}
/* tasto share dentro il display di ogni deck della console */
.dshare{grid-column:1;justify-self:stretch;align-self:center;margin-top:3px;border:1px solid rgba(47,224,200,.4);background:rgba(4,10,12,.6);color:#9fd8d0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  padding:3px 4px;border-radius:4px;cursor:pointer;white-space:nowrap}
.dshare:hover{color:#eafffb;border-color:#2fe0c8;box-shadow:0 0 12px rgba(47,224,200,.25)}
body.mland .dshare{display:none}
/* ogni sessione ha il suo tasto per condividere il link diretto */
#rSess li{position:relative}
#rSess li .rshare{position:absolute;right:8px;left:auto;width:auto;min-width:0;max-width:none;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;
  border:1px solid rgba(47,224,200,.5);background:rgba(4,10,12,.92);color:#9fd8d0;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  padding:3px 8px;border-radius:4px;cursor:pointer;transition:opacity .12s}
#rSess li:hover .rshare,#rSess li.sel .rshare,.rshare:focus-visible{opacity:1;pointer-events:auto}
/* v66: SHARE sempre nella sua colonna, visibile anche su desktop (non piu' sopra la durata) */
#rSess li .rshare{opacity:.5;pointer-events:auto}
#rSess li .rshare:hover{color:#eafffb;border-color:#2fe0c8;box-shadow:0 0 12px rgba(47,224,200,.3)}
body.mport #rSess li .rshare,body.mland #rSess li .rshare{opacity:1;pointer-events:auto;font-size:9px;padding:2px 6px}
/* ===== TELEFONO IN VERTICALE: la radio classica su un solo schermo alto ===== */
/* quello che sta suonando: copertina grande al centro, titolo su piu righe, niente vuoto in mezzo */
body.mport .rdisp:not(.menu) .rs-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(64px,1fr) auto;justify-items:stretch;text-align:center;gap:12px;margin-top:8px;flex:1 1 auto;min-height:0;overflow:hidden}
body.mport .rdisp:not(.menu) .rs-art{height:auto;width:auto;aspect-ratio:1/1;max-width:min(62vw,100%);align-self:stretch;justify-self:center;margin:0}
/* i cinque tasti: tre sopra e due sotto, larghezze uguali per riga */
body.mport .presets{grid-template-columns:repeat(2,1fr)!important}
body.mport .presets button{grid-column:span 1}
body.mport .presets button:nth-child(5){grid-column:span 2}
body.mport .rdisp:not(.menu) .rs-now{align-items:center}
body.mport .rs-now b{white-space:normal;overflow:visible;text-overflow:clip;font-size:22px;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.mport .rs-now span{white-space:normal;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.mport .rs-now small{font-size:10px}
body.mport .rdisp:not(.menu) .rs-hint{margin-bottom:52px;text-align:center;white-space:normal;line-height:1.4}
/* elenchi e schede: righe piu alte, occupano lo schermo invece di lasciare il vuoto in fondo */
body.mport .rs-list{gap:8px}
body.mport .rs-list li{padding:14px 12px;font-size:15px}
body.mport .rs-list li em{font-size:12px}
body.mport .rs-cards{gap:10px}
body.mport .rs-card{padding:10px}
body.mport .rs-card b{font-size:15px}
body.mport .rs-card em{font-size:11px}
body.mport .rs-cov{height:74px}
body.mport .rs-top{font-size:10px}
/* vetrina notizie e novita: linguette e tasto su una riga sola */
body.mport .tvv .tvhead{padding:6px 8px;gap:6px}
body.mport .gntabs button{font-size:9.5px;padding:5px 7px;letter-spacing:.06em}
body.mport .tvv .tvhead button{font-size:9px;padding:5px 7px}
body.mport .tvv .tvhead b{font-size:11px}
body.mport .tvfoot span{font-size:9px;line-height:1.35}
/* sul telefono i menu si scorrono con il dito e la barra si vede */
body.mport .rs-list.scrl,body.mport .rs-cards.scrl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:8px}
body.mport .rs-list.scrl::-webkit-scrollbar,body.mport .rs-cards.scrl::-webkit-scrollbar{width:7px}
body.mport .rs-list.scrl::-webkit-scrollbar-track,body.mport .rs-cards.scrl::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:5px}
body.mport .rs-list.scrl::-webkit-scrollbar-thumb,body.mport .rs-cards.scrl::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#54f0da,#1fae9a);border-radius:5px}
body.mland .rs-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.mland .rs-list::-webkit-scrollbar{width:6px}
body.mland .rs-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#54f0da,#1fae9a);border-radius:4px}
/* ===== TELEFONO IN VERTICALE: notizie, novita e Graba TV dentro il display, senza trasformare la radio ===== */
body.mport .rdisp .tvv{height:100%;display:flex;flex-direction:column;min-height:0}
body.mport .rdisp .gnwrap{padding-right:6px}
/* le schede diventano righe: foto a sinistra, titolo a destra: si leggono e si toccano bene */
body.mport .rdisp .tvgrid{grid-template-columns:1fr;grid-auto-rows:min-content;gap:8px;padding:8px}
body.mport .rdisp .tvcard{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto;min-height:84px;align-items:stretch}
body.mport .rdisp .tvcard .tvimg{min-height:84px;height:100%;border-radius:8px 0 0 8px}
body.mport .rdisp .tvcard .tvtx{padding:8px 10px;justify-content:center;background:none}
body.mport .rdisp .tvcard h4{font-size:13px;-webkit-line-clamp:3}
body.mport .rdisp .tvcard time{font-size:9px}
body.mport .rdisp .tvcard em{font-size:8.5px;padding:2px 5px}
body.mport .rdisp .tvcard .tvsub{font-size:10px}
body.mport .rdisp .tvplate{font-size:12px}
/* la notizia aperta: foto sopra, testo sotto che si scorre col dito */
body.mport .rdisp .tvart{display:flex;flex-direction:column;min-height:0;gap:0}
body.mport .rdisp .tvart .tvimg{flex:0 0 42%;height:auto;min-height:90px;border-radius:8px}
body.mport .rdisp .tvart .gnbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 2px 0}
body.mport .rdisp .tvart .gnbody h3{font-size:17px;line-height:1.25}
body.mport .rdisp .tvart .gnbody p{font-size:13px;line-height:1.5}
/* Graba TV: il video occupa il display in 16:9, senza tagli */
body.mport .rdisp .tvvideo{display:flex;align-items:center;justify-content:center;min-height:0;flex:1 1 auto}
body.mport .rdisp .tvvideo .rs-tvslot{width:100%;aspect-ratio:16/9;height:auto}
/* ===== CONSOLLE SUL TELEFONO: equilibrio degli elementi ===== */
/* TV, ON AIR, i due tasti DECK e la ruota scendono insieme */
body.mport .mp-left .fmid{margin-top:30px;gap:18px}
/* v65: rack SESSIONS ON DEMAND — un solo display in orizzontale (telefono) e colonne piu' strette su finestre basse */
@media (max-width:1180px){.rbody{grid-template-columns:minmax(0,200px) minmax(0,180px) minmax(200px,1fr) 124px;gap:12px}}
.odback{display:none;margin-left:auto;background:#0d1417;border:1px solid #2a3a3e;border-radius:4px;color:#9fd9d0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:4px 9px;cursor:pointer}
.odback:hover{border-color:#2fe0c8;color:#eafffb}
body.mland .odback{display:inline-flex;align-items:center;gap:4px}
body.mland .rmod-od .rbody{grid-template-columns:minmax(0,1fr) 128px;gap:10px;height:210px}
body.mland .rmod-od .rbody>.rprogs,body.mland .rmod-od .rbody>.rlcd{display:none}
body.mland .rmod-od .rbody[data-step="0"]>.rprogs{display:flex}
body.mland .rmod-od .rbody[data-step="1"]>.rlcd:not(.wide){display:flex}
body.mland .rmod-od .rbody[data-step="2"]>.rlcd.wide{display:flex}
body.mland .rmod-od .rprogs{flex-direction:row;gap:8px}
body.mland .rmod-od .rprog{flex:1 1 0;min-width:0}
body.mland .odback[hidden]{display:none}
#rSess li{padding-right:78px}
body.mland .rctl .rbtn{font-size:9.5px;padding:5px 6px;letter-spacing:.06em;white-space:nowrap}
body.mport .mp-jog{margin-top:16px}
body.mport .mp-jog .jogwrap{max-width:min(248px,54vw)}
body.mport .mp-left .tport{justify-content:flex-end;flex:0 0 auto;gap:8px}
/* CUE e PLAY staccati dal bordo sinistro */
body.mport .mp-left .tport{padding-left:18px}
/* il logo al centro della ruota, piu grande */
body.mport .mp-jog .jog .label,body.mport .mp-jog .jog .lglow{inset:20%}
body.mport .mp-jog .jog .label{padding:5%}
/* crossfader: piu corto, con la serigrafia dei riferimenti come su una console vera */
body.mport .mp-xf{width:52%;gap:6px;position:relative;padding:7px 8px 5px;border-radius:9px;margin:-50px auto 0;
  background:linear-gradient(180deg,#0e1113,#090b0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.04)}
body.mport .mp-xf .msl.h{position:relative}
body.mport .mp-xf .msl.h::after{content:"";position:absolute;left:6px;right:6px;top:-6px;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px calc(10% - 0px));
  -webkit-mask:linear-gradient(90deg,#000 0 100%);opacity:.5}
body.mport .mp-xf::after{content:"MIX";position:absolute;left:50%;transform:translateX(-50%);bottom:1px;font-family:var(--mono);font-size:8px;letter-spacing:.24em;color:#5d6a6d}
body.mport .mp-xf span{font-size:10px;letter-spacing:.12em;color:#93a6a4}
body.mport .mp-xf .msl.h{height:26px}
body.mport .mp-xf .msl.h b{width:18px;height:24px;margin:-12px 0 0 -9px}
/* v63: pads effetti — bordi netti, tasto fisico (solo telefono verticale) */
body.mport .dpads .pad.hw,body.mport .dpads .pad.hw:not(.hit):not(:active),body.mport .dpads .pad.hw:not(.hit):not(:active):hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,#15171a) 0,color-mix(in srgb,var(--c) 48%,#0d0f10) 49%,color-mix(in srgb,var(--c) 32%,#08090a) 50%,color-mix(in srgb,var(--c) 25%,#050607) 100%)!important;
  border:1px solid #000!important;border-radius:4px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.92),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.6),0 2px 0 #000,0 3px 4px rgba(0,0,0,.55)!important;
  color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.8)!important}
body.mport .dpads .pad.hw.hit,body.mport .dpads .pad.hw:active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 86%,#000) 0,color-mix(in srgb,var(--c) 70%,#000) 100%)!important;
  color:#05100e!important;text-shadow:0 1px 0 rgba(255,255,255,.3)!important;transform:translateY(2px)!important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 10px color-mix(in srgb,var(--c) 45%,transparent)!important}
/* ===== REAL 3D RENDERS (Blender/Cycles): silicone pads, jog platter + top plate, chrome transport caps ===== */
.pad.hw[style*="2fe0c8"]{--p-off:url(/assets/home/img/422c64811fc2.webp);--p-on:url(/assets/console/8989bd5371d3.webp)}
.pad.hw[style*="3d8bff"]{--p-off:url(/assets/home/img/31df6e62d5ba.webp);--p-on:url(/assets/console/b3bbcabf346a.webp)}
.pad.hw[style*="3dff7a"]{--p-off:url(/assets/home/img/cc4d8e80daf6.webp);--p-on:url(/assets/console/af2479319005.webp)}
.pad.hw[style*="a66bff"]{--p-off:url(/assets/home/img/07f4c07c8f77.webp);--p-on:url(/assets/console/df3b21d17266.webp)}
.pad.hw[style*="ff3b4e"]{--p-off:url(/assets/home/img/c6e9f38db9bd.webp);--p-on:url(/assets/console/8428d881f941.webp)}
.pad.hw[style*="ff8a3d"]{--p-off:url(/assets/home/img/3fd2a93d04e1.webp);--p-on:url(/assets/console/cd9a6e24a972.webp)}
.pad.hw[style*="ffd23f"]{--p-off:url(/assets/home/img/426b169e6d8a.webp);--p-on:url(/assets/console/12b4204a18ad.webp)}
.pad.hw[style*="ffe14d"]{--p-off:url(/assets/home/img/3d5777f11c84.webp);--p-on:url(/assets/console/b12a384dcb3b.webp)}
.pad.hw{background:var(--p-off) center/106% 106% no-repeat!important;overflow:hidden;border:0!important;border-radius:7px!important;box-shadow:0 0 9px color-mix(in srgb,var(--c) 22%,transparent),0 3px 5px rgba(0,0,0,.8),0 1px 1px rgba(0,0,0,.9)!important;
 color:rgba(235,242,240,.9)!important;text-shadow:0 1px 2px rgba(0,0,0,.9)!important;transition:transform .05s,box-shadow .12s,color .12s}
.pad.hw::before,.pad.hw::after{display:none!important}
.pad.hw:not(.hit):not(:active){background:linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.36)),var(--p-off) center/106% 106% no-repeat!important}.pad.hw:not(.hit):not(:active):hover{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),var(--p-off) center/106% 106% no-repeat!important}
.pad.hw small{color:rgba(225,232,230,.6)!important}.pad.hw.hit small,.pad.hw:active small{color:rgba(4,16,14,.7)!important}
.pad.hw.hit,.pad.hw:active{background-image:var(--p-on)!important;color:#061312!important;text-shadow:0 1px 0 rgba(255,255,255,.35)!important;transform:translateY(1px) scale(.985)!important;
 box-shadow:0 0 22px 2px color-mix(in srgb,var(--c) 60%,transparent),0 0 6px color-mix(in srgb,var(--c) 70%,transparent),0 2px 3px rgba(0,0,0,.8)!important}
.dpads{padding:9px;border-radius:12px;background:linear-gradient(180deg,#060708,#0b0c0e)!important;box-shadow:inset 0 3px 7px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.06)}
.platter.jog{background:url(/assets/console/44cc93e3922d.webp) center/100% 100% no-repeat!important}
.platter.jog>.jgrip{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;background:url(/assets/console/c5de60829887.webp) center/100% 100% no-repeat;will-change:transform}
.platter.jog>svg{display:none!important}
.platter .disc{background:url(/assets/console/2852284b214c.webp) center/100% 100% no-repeat!important}
.platter .disc::before{display:none!important}
/* static studio reflection over the rotating plate */
.platter.jog::after{display:block!important;content:"";position:absolute;inset:13%;border-radius:50%;pointer-events:none;z-index:3;background:radial-gradient(120% 80% at 30% 18%,rgba(255,255,255,.10),transparent 45%),conic-gradient(from 300deg,transparent 0 6%,rgba(255,255,255,.05) 10%,transparent 16% 55%,rgba(255,255,255,.035) 60%,transparent 66%);-webkit-mask:radial-gradient(circle,transparent 32.5%,#000 33.5%);mask:radial-gradient(circle,transparent 32.5%,#000 33.5%)}
.hbtn{background:url(/assets/console/14ad8e893acb.webp) center/100% 100% no-repeat,#08090a!important}
.pkimg,.knob.pk.bal .pkimg{background:url(/assets/console/54de0039b7de.webp) center/112% 112% no-repeat!important;box-shadow:0 6px 10px rgba(0,0,0,.85),0 2px 3px rgba(0,0,0,.8)!important;border-radius:50%}
.knob.pk[data-p="filter"] .pkimg{background-image:url(/assets/console/faf2016921c3.webp)!important}
.pkimg::before,.pkimg::after,.knob.pk.bal .pkimg::after{display:none!important}
input.hwf::-webkit-slider-thumb{background:url(/assets/home/img/29f09fe57648.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:0 7px 10px rgba(0,0,0,.85)!important;border-radius:4px}
input.hwf::-moz-range-thumb{background:url(/assets/home/img/29f09fe57648.webp) center/100% 100% no-repeat!important;border:0!important}
input.hwx::-webkit-slider-thumb{background:url(/assets/home/img/53a9a61ee7a0.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:0 7px 10px rgba(0,0,0,.85)!important;border-radius:4px}
input.hwx::-moz-range-thumb{background:url(/assets/home/img/53a9a61ee7a0.webp) center/100% 100% no-repeat!important;border:0!important}
.tvbtn,.tvbtn:not(.lit){background:url(/assets/console/6cd326c386f3.webp) center/104% 104% no-repeat,#07080a!important}
.tvbtn.lit{background:url(/assets/console/47efb8db46fe.webp) center/104% 104% no-repeat,#07080a!important}
.onair,.onair:not(.lit){background:url(/assets/console/eac7866744ea.webp) center/104% 104% no-repeat,#07080a!important}
.onair.lit{background:url(/assets/console/477f595efb38.webp) center/104% 104% no-repeat,#07080a!important}
.rig,.rmod,.nmod{background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.045) 44%,rgba(255,255,255,0) 58%),url(/assets/console/6f78b31fb9f7.webp) center/cover no-repeat,#141517!important;background-blend-mode:normal!important}
.hmix{background:linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.045) 44%,rgba(255,255,255,0) 58%),url(/assets/console/a6872d04eee0.webp) center/cover no-repeat,#0c0d0e!important;background-blend-mode:normal!important}
.screw{background:url(/assets/home/img/27a6bd68c016.webp) center/100% 100% no-repeat!important;box-shadow:0 1px 2px rgba(0,0,0,.8)!important;border-radius:50%}
.screw.tr{transform:rotate(38deg)}.screw.bl{transform:rotate(71deg)}.screw.br{transform:rotate(17deg)}
.enc{background:none!important;box-shadow:0 10px 16px rgba(0,0,0,.85),0 2px 3px rgba(0,0,0,.9)!important;border-radius:50%}
.enc span{inset:0!important;background:url(/assets/console/d826663cc93c.webp) center/104% 104% no-repeat!important;box-shadow:none!important;border-radius:50%}.enc span::after{display:none!important}
.tknob{background:none!important;box-shadow:0 12px 18px rgba(0,0,0,.8),0 2px 3px rgba(0,0,0,.9)!important}
.tknob span{inset:0!important;background:url(/assets/console/f3f3298074b1.webp) center/104% 104% no-repeat!important;box-shadow:none!important;border-radius:50%}.tknob span::after{display:none!important}
#news .tknob .tpush{width:40%;height:40%;background:radial-gradient(circle at 45% 35%,#2a2d31,#0c0d0f 72%)!important}
.rack::before,.rack::after{background:url(/assets/home/img/b2a98d90a00f.webp) center top/100% auto repeat-y,#0b0c0d!important}
.socialbar{gap:10px!important;align-items:center;flex-wrap:wrap;justify-content:center}
.socialbar a{position:relative;width:54px;height:54px;padding:0!important;border-radius:9px!important;font-size:0!important;color:transparent!important;background:linear-gradient(color-mix(in srgb,var(--br) 58%,transparent),color-mix(in srgb,var(--br) 38%,transparent)),var(--p-off) center/106% 106% no-repeat!important;box-shadow:0 0 10px color-mix(in srgb,var(--sc) 25%,transparent),0 3px 6px rgba(0,0,0,.8)!important;transition:transform .06s,box-shadow .15s;overflow:visible}
.socialbar a::before{content:"";position:absolute;inset:27%;background:rgba(255,255,255,.93);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.socialbar a::after{content:attr(data-n);position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font:600 9px/1 var(--mono);letter-spacing:.08em;color:#8f989b;white-space:nowrap}
.socialbar a:hover,.socialbar a:focus-visible{background:linear-gradient(color-mix(in srgb,var(--br) 30%,transparent),color-mix(in srgb,var(--br) 18%,transparent)),var(--p-on) center/106% 106% no-repeat!important;box-shadow:0 0 22px 2px color-mix(in srgb,var(--sc) 60%,transparent),0 3px 6px rgba(0,0,0,.8)!important}
.socialbar a:active{transform:translateY(1px) scale(.97)}
.socialbar{padding-bottom:22px!important}
body.mport .socialbar a{width:46px;height:46px}
/* telefono: le scritte sotto le icone si accavallavano, restano solo le icone (i nomi restano per i lettori di schermo) */
body.mport .socialbar a::after{display:none}
body.mport .socialbar,body.mport #classic .socialbar,body.mport #dj .socialbar{padding-bottom:10px!important;gap:8px!important;width:max-content;max-width:244px;margin-top:10px!important}
body.mport .sitefoot{margin-top:6px}
body.mport .socialbar .sb-l{width:100%;text-align:center;margin:0 0 4px}
.socialbar a[href*="instagram"]{--sc:#e1306c;--br:#e1306c;--ico:url(/assets/home/img/9a36be6623d0.svg);--p-off:url(/assets/home/img/3bb065e56850.webp);--p-on:url(/assets/home/img/2b1fa8d5a1e2.webp)}
.socialbar a[href*="tiktok"]{--sc:#25f4ee;--br:#121212;--ico:url(/assets/home/img/d93a3aa795f9.svg);--p-off:url(/assets/home/img/93d2a5106e14.webp);--p-on:url(/assets/home/img/bfb943bfa8da.webp)}
.socialbar a[href*="facebook"]{--sc:#0866ff;--br:#0866ff;--ico:url(/assets/home/img/7947a34dfd1d.svg);--p-off:url(/assets/home/img/cfddc037fcbc.webp);--p-on:url(/assets/home/img/8e906f456ced.webp)}
.socialbar a[href*="x.com"]{--sc:#d8e0e4;--br:#000000;--ico:url(/assets/home/img/8d2ccd22e6f4.svg);--p-off:url(/assets/home/img/e099c3d60a60.webp);--p-on:url(/assets/home/img/c533ffe49b67.webp)}
.socialbar a[href*="youtube"]{--sc:#ff0000;--br:#ff0000;--ico:url(/assets/home/img/52aedc5516a6.svg);--p-off:url(/assets/home/img/96a15ce5c3cf.webp);--p-on:url(/assets/home/img/b1dbc8f83b0e.webp)}
.socialbar a[href*="soundcloud"]{--sc:#ff5500;--br:#ff5500;--ico:url(/assets/home/img/b857fa0844e7.svg);--p-off:url(/assets/home/img/ac2c8f71f0a0.webp);--p-on:url(/assets/home/img/cfb13151479b.webp)}
.socialbar a[href*="spotify"]{--sc:#1db954;--br:#1db954;--ico:url(/assets/home/img/b8eefe7f7903.svg);--p-off:url(/assets/home/img/fd4e05d335f3.webp);--p-on:url(/assets/home/img/93c6235ded43.webp)}
.socialbar a[href*="apple.com"]{--sc:#fa233b;--br:#fa233b;--ico:url(/assets/home/img/c2dc52ceeb6e.svg);--p-off:url(/assets/home/img/b5f859a6e2cb.webp);--p-on:url(/assets/home/img/9786c37209b5.webp)}
.cab{background:linear-gradient(160deg,rgba(255,235,200,.10),rgba(255,255,255,0) 35%,rgba(0,0,0,.22) 100%),url(/assets/console/5d56fd740afe.webp) center/cover no-repeat,#3a200c!important}
.cab-top,.cab-side{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url(/assets/console/5d56fd740afe.webp) center/cover no-repeat!important}
.grille{background:radial-gradient(75% 75% at 50% 45%,rgba(255,240,210,.07),rgba(0,0,0,.35)),url(/assets/console/959b35ea5ddf.webp) 0 0/128px 128px repeat,#2a221b!important}
.woof{background:url(/assets/console/959b35ea5ddf.webp) 0 0/128px 128px repeat!important}
.face{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 22%,rgba(0,0,0,0) 70%,rgba(80,50,20,.12)),url(/assets/home/img/bfe428267745.webp) center/cover no-repeat,#ece0c6!important}
.presets button{background:url(/assets/console/9c77655b60b0.webp) center/104% 108% no-repeat!important;border:0!important;box-shadow:0 3px 4px rgba(0,0,0,.45)!important}
.presets button.on,.presets button:active{background-image:url(/assets/console/5fe5a0e0be44.webp)!important;box-shadow:0 1px 2px rgba(0,0,0,.5),0 0 16px rgba(47,224,200,.35)!important}
.presets button i{display:none!important}
.bknob{background:url(/assets/console/27f5f4a22624.webp) center/118% 118% no-repeat!important}
.bknob span{inset:4%!important;background:url(/assets/console/f550ce8a6eba.webp) center/100% 100% no-repeat!important;box-shadow:0 6px 10px rgba(0,0,0,.45)!important}
.bknob.tune span{background-image:url(/assets/console/c07bec22b1ad.webp)!important}
.bknob span::after,.bknob.tune span::before{display:none!important}
.pwr{background:url(/assets/console/55f6d54ff6b5.webp) center/104% 104% no-repeat!important;box-shadow:0 6px 10px rgba(0,0,0,.4)!important}.pwr.on{background-image:url(/assets/console/3a7980dffe76.webp)!important;box-shadow:0 6px 10px rgba(0,0,0,.4),0 0 18px rgba(47,224,200,.4)!important}.pwr i{display:none!important}
.rack{background:url(/assets/home/img/b2a98d90a00f.webp) left top/46px auto repeat-y,url(/assets/home/img/b2a98d90a00f.webp) right top/46px auto repeat-y!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column;gap:6px}
.rack::before,.rack::after{display:none!important}
.rack .rmod{padding-left:58px!important;padding-right:58px!important;border:0!important;border-radius:3px!important;background:url(/assets/console/95e5a14e04dc.webp) left 4px top 2px/43px 46px no-repeat,url(/assets/console/95e5a14e04dc.webp) right 4px top 2px/43px 46px no-repeat,url(/assets/console/6416e9be170b.webp) left 4px bottom 2px/43px 46px no-repeat,url(/assets/console/6416e9be170b.webp) right 4px bottom 2px/43px 46px no-repeat,linear-gradient(115deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.045) 44%,rgba(255,255,255,0) 58%),url(/assets/console/6f78b31fb9f7.webp) center/cover no-repeat,#141517!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.7),0 0 0 1px #050505,0 14px 22px rgba(0,0,0,.75),0 3px 5px rgba(0,0,0,.8)!important}
.rack .rmod .screw{display:none!important}
.xsw .xB{background-image:url(/assets/home/img/e96dae7abccb.webp)!important}.xsw .xB.r{background-image:url(/assets/home/img/55e0fe0d108e.webp)!important}
.spkw{background:url(/assets/console/9639a7de34b5.webp) center/100% 100% no-repeat}
.spkt{background:url(/assets/home/img/5825cfb98fe2.webp) center/100% 100% no-repeat}
/* ===== END REAL 3D */
/* transport lights: text inside the button glows like a lit LED */
.hbtn.play span{transition:color .15s,text-shadow .15s}
.hbtn.play.lit span{color:#19e85a!important;text-shadow:0 0 1px #0a5a24,0 0 5px #3dff7a,0 0 10px #3dff7a,0 0 18px rgba(61,255,122,.9)!important;filter:saturate(1.4)}
.hbtn.cue span{color:#9aa2a6!important;transition:color .15s,text-shadow .15s}
.hbtn.cue.cue-on span{color:#ff8a1f!important;text-shadow:0 0 1px #6a3000,0 0 5px #ff8a1f,0 0 10px #ff8a1f,0 0 18px rgba(255,138,31,.9)!important}
.hbtn.cue.cue-blink span{animation:cueBlink .9s steps(1,end) infinite}
@keyframes cueBlink{0%{color:#ff8a1f;text-shadow:0 0 1px #6a3000,0 0 5px #ff8a1f,0 0 10px #ff8a1f,0 0 18px rgba(255,138,31,.9)}50%{color:#8a9296;text-shadow:none}}
.hbtn.cue.cue-off{opacity:.55}
.hbtn.cue.cue-deny{transform:translateX(2px)}
/* CUE ring: dim when idle (like PLAY), bright when the cue is active, blinking with the text when paused off the cue point */
.hbtn.cue{--rc:#8a4a12!important}
.hbtn.cue.cue-on{--rc:#ff8a1f!important}
.hbtn.cue.cue-blink{animation:cueRing .9s steps(1,end) infinite}
@keyframes cueRing{0%{--rc:#ff8a1f}50%{--rc:#8a4a12}}
@property --rc{syntax:'<color>';inherits:true;initial-value:#ff8a1f}
/* classic knob names: clear of the knob shadow */
.ck>label:not(.lbl2){margin-top:12px!important;position:relative;z-index:2}
.ck label.lbl2{margin-top:-8px!important;font-size:9px!important}
/* classic screen menus: strict columns (name | detail | arrow) and one baseline per row */
.rscreen .rs-top{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px}
.rscreen .rs-top>span:first-of-type{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rscreen .rs-top>span:last-child{text-align:right}
.rscreen .rs-top .rs-back{align-self:center}
.rs-list li{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,40%) 14px;align-items:center!important;column-gap:14px;min-height:0}
.rs-list li span{text-align:left}
.rs-list li em{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}
.rs-list li i{text-align:right;line-height:1}
body.mland .rs-list li,body.mport .rs-list li{min-height:40px}
.rscreen{overflow:hidden}
.rs-hint{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mport .rs-list li,body.mland .rs-list li{grid-template-columns:minmax(0,1fr) minmax(0,34%) 12px;column-gap:10px}
/* v69: tasto SHARE su ogni sessione dell'elenco della radio classica */
.rs-list li.hassh{grid-template-columns:minmax(0,1fr) auto auto 14px!important}
body.mport .rs-list li.hassh,body.mland .rs-list li.hassh{grid-template-columns:minmax(0,1fr) auto auto 12px!important;column-gap:8px}
.rs-list li .rlsh{background:none;border:1px solid rgba(127,178,170,.5);color:#7fb2aa;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:4px;cursor:pointer;line-height:1;white-space:nowrap}
.rs-list li.on .rlsh{border-color:rgba(6,16,16,.45);color:#063a33}
.rs-list li .rlsh:hover{color:#eafffb;border-color:#2fe0c8}
body.mport .rs-list li .rlsh,body.mland .rs-list li .rlsh{font-size:11px;padding:5px 9px}
body.mport .rs-list li span,body.mland .rs-list li span{font-size:17px}
body.mport .rs-list li em,body.mland .rs-list li em{font-size:10px}