/* Desktop is a broadcasting desk, not a mobile console with empty margins. */
:root{--accent-rgb:62,233,255;--secondary:#dc8bd2;--secondary-rgb:220,139,210}
body::before{background:radial-gradient(110% 65% at 90% 0%,rgba(var(--accent-rgb),.09),transparent 62%),radial-gradient(85% 55% at 0% 100%,rgba(var(--secondary-rgb),.065),transparent 72%)}
.app .fill{background:linear-gradient(90deg,var(--acc),var(--secondary))}
.brand .wm b{color:color-mix(in srgb,var(--fg) 65%,var(--secondary))}
.brand svg circle:first-child{fill:var(--acc)}
.brand svg path{stroke:var(--fg)}
#themeControl{display:flex;align-items:center;position:relative}
@media(max-width:650px){
 .model{display:none}
 .brand{gap:8px}.brand>svg{width:22px;height:22px}
 .wm{font-size:11px;letter-spacing:.14em}
 .tools{gap:4px}.top{gap:8px}
 .hbtn{padding-inline:9px}
}
/* Hardware volume is the authority on handheld devices. The remaining controls
   form one balanced transport row, rather than leaving a vacant volume strip. */
.is-handheld .volrow,.is-handheld #btnVolDown,.is-handheld #btnVolUp{display:none}
.is-handheld .controls{grid-template-columns:minmax(0,1fr) 52px 52px;gap:10px}
.is-handheld .controls>.ib,.is-handheld .controls>#btnSettings{width:52px;height:52px;border-radius:17px}
.is-handheld .controls>.play{grid-column:1}
.is-handheld .controls #btnMute{grid-column:2}
.is-handheld .controls #btnSettings{grid-column:3}
.is-handheld .app{grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
.is-handheld .controls .play{font-size:18px;gap:9px;padding-inline:12px}
.is-handheld .controls .play .pico{width:34px;height:34px}
@media(max-width:350px){
 .is-handheld .controls{grid-template-columns:minmax(0,1fr) 46px 46px;gap:8px}
 .is-handheld .controls>.ib,.is-handheld .controls>#btnSettings{width:46px;height:48px}
 .is-handheld .controls .play{gap:7px;padding-inline:10px}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:540px){
 .is-handheld .app{grid-template-rows:auto minmax(0,1fr) auto auto auto}
 .is-handheld .now{grid-row:2/6}
 .is-handheld .dock{grid-row:5}
 .is-handheld .controls{grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px}
 .is-handheld .controls>.ib,.is-handheld .controls>#btnSettings{width:44px;height:48px}
}
@media(min-width:1000px) and (min-height:500px){
 .app{width:calc(100% - 64px);max-width:1600px;height:calc(100dvh - 48px);max-height:1100px;margin:24px auto;
  padding:28px 32px;gap:18px 34px;border:1px solid var(--line2);border-radius:28px;
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.035),transparent 48%,rgba(var(--secondary-rgb),.025)),var(--bg);
  box-shadow:0 28px 90px -54px rgba(var(--accent-rgb),.25);
  grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;
  grid-template-areas:'top top' 'status status' 'now rail' 'timeline rail' 'controls rail' 'volume rail' 'dock dock'}
 .app>.top{grid-area:top;grid-column:1/-1;padding-bottom:16px;border-bottom:1px solid var(--line2)}
 .app>.status{grid-area:status;grid-column:1/-1}
 .top .brand{gap:14px}.top .brand>svg{width:30px;height:30px}
 .top .wm{font-size:16px;letter-spacing:.25em}.top .model{font-size:12px}
 .app>.now{grid-area:now;min-height:0;display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,1.2fr);
  grid-template-rows:auto auto auto auto auto;grid-template-areas:'banner kicker' 'banner title' 'banner artist' 'banner notice' 'banner spec';
  align-content:center;gap:14px 26px;justify-content:normal;padding-block:10px}
 .now>.banner{grid-area:banner;align-self:stretch;height:100%;min-height:0;max-height:none;margin:0;padding:12px;border-radius:22px;background:rgba(var(--accent-rgb),.025)}
 .now>.kicker{grid-area:kicker}.now>.title{grid-area:title;font-size:clamp(36px,3.6vw,70px);line-height:1.03;-webkit-line-clamp:4;padding-inline-start:20px}
 .now>.artist{grid-area:artist;font-size:20px;padding-inline-start:22px}
 .now>.notice{grid-area:notice}.now>.spec{grid-area:spec;margin-top:12px}
 .app>.timeline{grid-area:timeline;margin-top:8px}
 .app>.controls{grid-area:controls;grid-template-columns:56px minmax(200px,360px) 56px;justify-content:center;gap:20px}
 .app>.volrow{grid-area:volume;width:100%;max-width:530px;justify-self:center;gap:14px}
 .app>.dock{grid-area:dock;grid-column:1/-1;gap:14px;border-top:1px solid var(--line2);padding-top:18px}
 .dock button{height:52px;background:rgba(var(--accent-rgb),.025);font-size:14px;letter-spacing:.03em}
 .app>.desktop-rail{grid-area:rail;display:flex;flex-direction:column;gap:24px;padding-inline-start:28px;border-inline-start:1px solid var(--line2);overflow:hidden;min-height:0}
 .desktop-rail h2{font:500 13px/1.4 var(--mono);color:var(--mid);letter-spacing:.08em;margin:0 0 16px}
 .desktop-title,.desktop-artist{display:none}
 .desktop-live{flex:none;padding:0 0 20px;border-bottom:1px solid var(--line)}
 .desktop-live .note{font-size:14px;line-height:1.6;margin:8px 0}
 .desktop-history{border:0;padding:0;overflow:auto;min-height:0;scrollbar-width:thin}
 .desktop-history>h2{position:sticky;top:0;padding-block:8px;background:var(--bg)}
 .desktop-rail .hist li{padding-block:15px}.desktop-rail .hist b{font-size:16px;line-height:1.35}
 .desktop-rail .hist time{color:var(--acc)}
 .is-handheld .app{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:'top top' 'status status' 'now rail' 'timeline rail' 'controls rail' 'dock dock'}
 .is-handheld .app>.controls{grid-template-columns:minmax(0,1fr) 52px 52px;justify-content:stretch;gap:10px}
}
/* Keep a real desk in short desktop windows, without sacrificing transport space. */
@media(min-width:1000px) and (min-height:500px) and (max-height:760px){
 .app{width:calc(100% - 32px);height:calc(100dvh - 24px);margin:12px auto;padding:16px 24px;gap:10px 26px}
 .app>.top{padding-bottom:8px}
 .app>.now{gap:8px 18px;padding-block:0;align-content:center;grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr)}
 .now>.title{font-size:clamp(28px,2.6vw,44px);line-height:1.08;-webkit-line-clamp:3}
 .now>.artist{font-size:16px;-webkit-line-clamp:1}
 .now>.spec{margin-top:0}
 .app>.timeline{margin-top:0}
 .app>.dock{padding-top:8px}
 .dock button{height:44px}
 .app>.desktop-rail{gap:12px;padding-inline-start:20px}
 .desktop-live{padding-bottom:8px}
 .desktop-live .note{font-size:13px;line-height:1.4}
 .desktop-rail h2{margin-bottom:8px}
 .desktop-rail .hist li{padding-block:10px}
}
.shenx-mark{background:radial-gradient(ellipse at 30% 20%,rgba(var(--secondary-rgb),.15),transparent 70%),var(--bg3);color:var(--acc)}
.shenx-mark svg{width:64%;height:64%;max-width:130px;max-height:130px}
.np-full-title,.desktop-rail .hist b{overflow-wrap:anywhere}
@media(min-width:1600px) and (min-height:850px){
 .app{padding:36px 44px;gap:22px 48px}
 .app>.now{grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);column-gap:36px}
 .now>.title{font-size:clamp(50px,4vw,78px)}
 .desktop-rail .hist li{padding-block:19px}
}

/* r3 — ShenDigital family, aligned on Albums and Link (2026-11-04): same 10–18 px radius scale,
   mono eyebrows tinted by the accent, tighter sans titles and an accent-filled primary action.
   Theme-aware through the existing variables; playing/connecting/error states keep their own rules. */
.hbtn,.ib,.bn-b,.vbtn,.pbtn{border-radius:10px}
.dock button,.item,.warn,.seg,.notice{border-radius:12px}
.is-handheld .controls>.ib,.is-handheld .controls>#btnSettings{border-radius:12px}
.banner{border-radius:16px}
dialog.sheet{border-radius:18px 18px 0 0}
.kicker,.bn-k,.sh-head p,.sh-body h3,.vlbl{color:var(--acc)}
/* Phones: the 44 px "Details" target extends downward over the title, not upward onto the banner arrows. */
@media(max-width:999px){.now>.kicker .dbtn{margin:-4px 0 -24px;margin-inline-end:-6px;align-items:flex-start;padding-top:4px}}
.title{letter-spacing:-.04em}
:lang(ja) .title,:lang(zh) .title,:lang(ko) .title,[lang=ar] .title{letter-spacing:0}
.sh-head h2{letter-spacing:-.03em}
.play{border-radius:14px;background:var(--acc);color:var(--acc-ink);box-shadow:0 10px 30px -14px rgba(var(--accent-rgb),.55)}
.play .pico{background:var(--acc-ink);color:var(--acc)}
@media(min-width:1000px) and (min-height:500px){
 .app{border-radius:18px}
 .now>.banner{border-radius:14px}
}
/* Narrow but tall banner (e.g. 375x667): the arrows sit in the bottom row, so they must stay side by side
   instead of inheriting the stacked column of the compact mode, which overflowed the banner. */
@container une (max-width:329px) and (min-height:190px) and (min-aspect-ratio:111/100){
 .bn-nav{justify-content:space-between}
 .bn-btns{flex-direction:row;gap:6px}
 .bn-meta{position:static;padding:0;padding-inline-start:2px;background:none;font-size:11px}
}
/* Off-screen slides keep their visually hidden labels inside the scrolling track (no page-wide overflow). */
.bn-slide{position:relative}