/* BLISS IN TRANCE — BIT://SYSTEM v3.0 — Light Y2K pink/purple stylesheet */
:root {
  --bg:        #eceaf4;
  --bg-deep:   #e2def0;
  --panel:     #f8f7fc;
  --panel-2:   #ffffff;
  --line:      #cfc8e4;
  --line-dim:  #e0dbef;
  --line-hard: #a99fd0;
  --pink:      #ff6ec1;
  --pink-soft: #ff7ac2;
  --pink-pale: #ffe3f1;
  --orange:    #ff9d2e;
  --ink:       #3a3547;
  --purple:    #7a2df0;
  --violet:    #a06bff;
  --violet-pale:#efe7ff;
  --text:      #4a4463;
  --text-hi:   #241d40;
  --text-dim:  #8d86ad;
  --glow:      rgba(255,110,193,.35);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:
    linear-gradient(rgba(122,45,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,45,240,.045) 1px, transparent 1px),
    linear-gradient(180deg, #f2f0f9 0%, var(--bg) 40%, var(--bg-deep) 100%);
  background-size: 28px 28px, 28px 28px, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family:'Share Tech Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}
/* Soft CRT sheen */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px);
}
a { color: var(--purple); text-decoration:none; transition: color .15s, background .15s, border-color .15s; }
a:hover { color: var(--pink); }
::selection { background: var(--pink); color: #fff; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== Status bar ===== */
.statusbar {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 10px; letter-spacing:.12em; color: var(--text-dim);
  flex-wrap:wrap;
}
.statusbar .right { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.statusbar .online { color: var(--orange); display:flex; align-items:center; gap:6px; }
.statusbar .online i { width:6px; height:6px; background: var(--orange); display:inline-block; animation: blink 1.6s steps(2) infinite; }

/* ===== Masthead + mechanized nav ===== */
.masthead {
  display:flex; align-items:stretch;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f3f1fa);
  position: sticky; top:0; z-index:50;
  flex-wrap:wrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 10px rgba(122,45,240,.06);
}
.logo {
  display:flex; align-items:center; gap:12px;
  padding: 12px 20px;
  border-right: 1px solid var(--line);
}
.logo-mark { width:40px; height:40px; flex-shrink:0; }
.logo-text {
  font-family:'Bruno Ace SC', 'Orbitron', sans-serif; font-weight:400;
  font-size: 1rem; letter-spacing:.14em;
  background: linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--orange));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block; white-space:nowrap;
}
.logo-text b {
  font-weight:400;
  background: linear-gradient(90deg, var(--pink), var(--pink));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo-sub { display:block; font-size:.55rem; letter-spacing:.4em; color: var(--text-dim); margin-top:2px; }
.rail { display:flex; flex:1; min-width: 320px; }
.rail a {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding: 8px 14px;
  border-right: 1px solid var(--line);
  color: var(--text);
}
.rail a:last-child { border-right:none; }
.rail a .n { font-size:.6rem; color: var(--text-dim); }
.rail a .t { font-size:.72rem; letter-spacing:.2em; }
.rail a:hover { background: var(--pink-pale); color: var(--pink); }
.rail a.active {
  background: linear-gradient(180deg, var(--pink-pale), transparent);
  box-shadow: inset 0 2px 0 var(--pink);
  color: var(--pink);
}

/* ===== Breadcrumb path ===== */
.crumbs {
  padding: 14px 0 0;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-dim);
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--pink); }
.crumbs span { color: var(--purple); }

/* ===== HUD hero ===== */
.hud {
  position:relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f6f4fb);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 24px rgba(122,45,240,.08);
  margin: 22px 0;
  padding: 44px 30px 40px;
  text-align:center;
  overflow:hidden;
}
.hud .corner { position:absolute; width:26px; height:26px; border:0 solid var(--purple); }
.hud .c1 { top:8px; left:8px; border-top-width:1px; border-left-width:1px; }
.hud .c2 { top:8px; right:8px; border-top-width:1px; border-right-width:1px; }
.hud .c3 { bottom:8px; left:8px; border-bottom-width:1px; border-left-width:1px; }
.hud .c4 { bottom:8px; right:8px; border-bottom-width:1px; border-right-width:1px; }
.hud .tele { position:absolute; font-size:.58rem; letter-spacing:.15em; color: var(--text-dim); }
.hud .t1 { top:14px; left:44px; } .hud .t2 { top:14px; right:44px; }
.hud .t3 { bottom:14px; left:44px; } .hud .t4 { bottom:14px; right:44px; }
.hud .calib {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:110px; height:3px; background: var(--orange);
}
.hud .rings {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 118px, rgba(255,110,193,.12) 119px, transparent 120px),
    radial-gradient(circle at 50% 50%, transparent 155px, rgba(122,45,240,.1) 156px, transparent 157px);
}
.hud .boot { font-size:.68rem; letter-spacing:.5em; color: var(--text-dim); margin-bottom: 14px; }
.hud h1 {
  font-family:'Bruno Ace SC', 'Orbitron', sans-serif; font-weight:400;
  font-size: clamp(1.6rem, 5vw, 2.9rem);
  letter-spacing:.1em;
  background: linear-gradient(90deg, var(--purple) 10%, var(--pink) 55%, var(--orange));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 2px 14px rgba(255,110,193,.25));
}
.hud .tagline { display:inline-flex; align-items:center; gap:12px; margin-top: 14px; }
.hud .tagline i { height:1px; width:64px; background: var(--line-hard); display:inline-block; }
.hud .tagline span { font-size:.72rem; letter-spacing:.34em; color: var(--purple); }
.hud .actions { margin-top: 24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== Buttons ===== */
.btn-cyber {
  display:inline-block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color: #fff; background: linear-gradient(90deg, var(--pink), var(--orange));
  padding: 11px 24px; border:none; cursor:pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 4px 14px rgba(255,110,193,.3);
}
.btn-cyber:hover { background: var(--purple); color:#fff; box-shadow: 0 4px 14px rgba(122,45,240,.35); }
.btn-outline {
  display:inline-block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--purple); border:1px solid var(--purple);
  padding: 10px 24px; background: rgba(255,255,255,.6); cursor:pointer;
}
.btn-outline:hover { background: var(--violet-pale); color: var(--purple); }

/* ===== Modules ===== */
.module {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 18px rgba(122,45,240,.06);
}
.module-head {
  display:flex; justify-content:space-between; align-items:center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--pink-pale), rgba(255,255,255,0) 70%);
}
.module-head.violet { background: linear-gradient(90deg, var(--violet-pale), rgba(255,255,255,0) 70%); }
.module-head.orange { background: linear-gradient(90deg, #ffe9f4, rgba(255,255,255,0) 70%); }
.module-head h2 { font-size:.72rem; letter-spacing:.3em; color: var(--pink); font-weight:400; font-family:'Share Tech Mono',monospace; }
.module-head.violet h2 { color: var(--purple); }
.module-head.orange h2 { color: var(--pink); }
.module-head a { font-size:.65rem; color: var(--text-dim); }
.module-head a:hover { color: var(--pink); }
.module-grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }

/* ===== Stream rows (mixes) ===== */
.stream-row {
  display:flex; align-items:center; gap:14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-dim);
  color: inherit;
  background: var(--panel-2);
}
.stream-row:last-child { border-bottom:none; }
.stream-row:hover { background: var(--pink-pale); }
.stream-row.hot { background: linear-gradient(90deg, #fff, var(--pink-pale)); }
.stream-row .id { color: var(--pink); font-size:.65rem; min-width: 34px; }
.stream-row .info { flex:1; min-width:0; }
.stream-row .title {
  display:block; font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.1em; color: var(--text-hi);
}
.stream-row .meta { display:block; font-size:.62rem; color: var(--text-dim); letter-spacing:.15em; margin-top:2px; }
.eq { display:flex; gap:2px; align-items:flex-end; height:18px; flex-shrink:0; }
.eq i { display:block; width:2px; background: var(--violet); opacity:.9; }
.eq i.o { background: var(--orange); }
.play-cmd {
  color: var(--purple); border:1px solid var(--violet);
  padding: 4px 10px; font-size:.65rem; background: #fff; cursor:pointer;
  font-family:'Share Tech Mono',monospace; letter-spacing:.1em; white-space:nowrap;
}
.play-cmd:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ===== Data files (articles) ===== */
.datafile { display:block; padding: 14px 16px; border-bottom: 1px solid var(--line-dim); color:inherit; background: var(--panel-2); }
.datafile:last-child { border-bottom:none; }
.datafile:hover { background: var(--violet-pale); }
.datafile .fileno { font-size:.62rem; color: var(--pink); letter-spacing:.2em; margin-bottom: 5px; }
.datafile h3 {
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:.88rem; letter-spacing:.08em; color: var(--text-hi); line-height:1.5;
}
.datafile .stamp { font-size:.62rem; color: var(--text-dim); margin-top: 5px; letter-spacing:.12em; }
.datafile p { font-family:'Rajdhani',sans-serif; font-size:.95rem; color: var(--text); margin-top: 8px; font-weight:500; }

/* ===== Record archive rows ===== */
.rec-row {
  display:flex; align-items:baseline; gap:14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-dim);
  flex-wrap:wrap; background: var(--panel-2);
}
.rec-row:last-child { border-bottom:none; }
.rec-row:hover { background: var(--pink-pale); }
.rec-row .tag-c { font-size:.58rem; letter-spacing:.18em; border:1px solid var(--violet); color:var(--purple); padding:2px 7px; background:#fff; }
.rec-row .tag-n { font-size:.58rem; letter-spacing:.18em; border:1px solid var(--pink); color:var(--pink); padding:2px 7px; background:#fff; }
.rec-row .r-title { font-family:'Orbitron',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.08em; color: var(--text-hi); }
.rec-row .r-artist { font-size:.7rem; color: var(--purple); }
.rec-row .r-rate { margin-left:auto; color: var(--pink); font-size:.7rem; letter-spacing:2px; }
.rec-row p { flex-basis:100%; font-family:'Rajdhani',sans-serif; font-size:.95rem; color: var(--text); font-weight:500; }

/* ===== Filters ===== */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin: 18px 0; }
.filters button {
  font-family:'Share Tech Mono',monospace;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  background: #fff; color: var(--text-dim);
  border:1px solid var(--line); padding: 8px 16px; cursor:pointer;
}
.filters button:hover { color: var(--pink); border-color: var(--pink-soft); }
.filters button.active { color: #fff; background: var(--pink); border-color: var(--pink); }

/* ===== Page headers ===== */
.page-head { padding: 26px 0 6px; }
.page-head .sys { font-size:.65rem; letter-spacing:.4em; color: var(--text-dim); margin-bottom: 8px; }
.page-head h1 {
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing:.12em;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.page-head .lede { font-family:'Rajdhani',sans-serif; font-size:1.05rem; color: var(--text); max-width: 680px; margin-top: 10px; font-weight:500; }

/* ===== Mix detail ===== */
.mix-console {
  display:grid; grid-template-columns: 240px 1fr; gap: 0;
  border:1px solid var(--line); background: var(--panel); margin: 22px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 24px rgba(122,45,240,.08);
}
.mix-cover {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, var(--violet) 0%, var(--purple) 40%, var(--pink) 100%);
  min-height: 240px;
  font-family:'Orbitron',sans-serif;
}
.mix-cover .num { font-size:3.4rem; font-weight:900; color: #fff; text-shadow: 0 0 24px rgba(255,255,255,.6); letter-spacing:.1em; }
.mix-cover .lbl { font-size:.6rem; letter-spacing:.4em; color: rgba(255,255,255,.85); font-family:'Share Tech Mono',monospace; }
.mix-data { padding: 22px 24px; }
.mix-data .tags { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 16px; }
.tag-t { font-size:.6rem; letter-spacing:.18em; border:1px solid var(--line); color:var(--text-dim); padding: 4px 10px; background:#fff; }
.tag-t.hot { border-color: var(--pink); color: var(--pink); }
.mix-data .desc { font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:500; max-width: 600px; }

/* ===== BIT Web Audio player ===== */
.bit-player {
  border:1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f4f2fa);
  padding: 14px 16px;
  margin-top: 18px;
}
.bp-main { display:flex; align-items:center; gap:14px; }
.bp-toggle {
  width:48px; height:48px; flex-shrink:0;
  font-family:'Share Tech Mono',monospace; font-size:1rem;
  color:#fff; background: linear-gradient(135deg, var(--pink), var(--purple));
  border:none; cursor:pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 4px 14px rgba(255,110,193,.35);
}
.bp-toggle:hover { filter: brightness(1.1); }
.bp-canvas { flex:1; height:56px; min-width:0; background: rgba(122,45,240,.05); border:1px solid var(--line-dim); }
.bp-row { display:flex; align-items:center; gap:12px; margin-top:10px; }
.bp-time, .bp-dur { font-size:.66rem; color:var(--text-dim); letter-spacing:.08em; white-space:nowrap; }
.bp-seek { flex:1; }
.bp-vol { width:80px; }
.bit-player input[type=range] { -webkit-appearance:none; appearance:none; height:4px; background:var(--line); outline:none; }
.bit-player input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:12px; height:12px;
  background: var(--pink); cursor:pointer; border:2px solid #fff;
  box-shadow: 0 0 6px rgba(255,110,193,.5);
}
.bit-player input[type=range]::-moz-range-thumb {
  width:12px; height:12px; background: var(--pink); cursor:pointer; border:2px solid #fff; border-radius:0;
}
.bp-status { font-size:.6rem; letter-spacing:.2em; color:var(--text-dim); margin-top:8px; }
.bp-status.err { color: var(--pink); }

/* ===== Tracklist ===== */
.tracklist { list-style:none; counter-reset: trk; }
.tracklist li {
  counter-increment: trk;
  display:flex; align-items:baseline; gap:14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-dim);
  background: var(--panel-2);
}
.tracklist li:hover { background: var(--pink-pale); }
.tracklist li::before {
  content: counter(trk, decimal-leading-zero);
  font-size:.68rem; color: var(--pink); min-width: 26px;
}
.tracklist .trk-artist { color: var(--purple); }
.tracklist .trk-title { color: var(--text-hi); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.98rem; }
.tracklist .trk-label { margin-left:auto; font-size:.6rem; letter-spacing:.15em; color: var(--text-dim); white-space:nowrap; }

/* ===== Article ===== */
.article-head {
  border:1px solid var(--line); background: linear-gradient(180deg,#fff,#f6f4fb);
  padding: 26px 28px; margin: 22px 0; position:relative;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 24px rgba(122,45,240,.08);
}
.article-head .fileno { font-size:.65rem; letter-spacing:.3em; color: var(--pink); margin-bottom: 10px; }
.article-head h1 {
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: clamp(1.2rem, 3.6vw, 1.9rem);
  letter-spacing:.1em; line-height:1.5;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.article-head .stamp { font-size:.68rem; color: var(--text-dim); margin-top: 12px; letter-spacing:.15em; }
.article-head .stamp a { color: var(--purple); }
.article-body { max-width: 760px; padding: 8px 0 20px; font-family:'Rajdhani',sans-serif; font-size:1.12rem; font-weight:500; }
.article-body p { margin-bottom: 1.3em; color: var(--text); }
.article-body h2 {
  font-family:'Share Tech Mono',monospace; font-weight:400;
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--purple); margin: 2em 0 .8em;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.article-body h2::before { content:"// "; color: var(--pink); }
.article-body blockquote {
  border:1px solid var(--line); border-left: 3px solid var(--pink);
  margin: 1.6em 0; padding: 14px 20px;
  font-family:'Share Tech Mono',monospace; font-size:.92rem;
  color: var(--purple); background: #fff;
}
.article-body blockquote::before { content:"> "; color: var(--pink); }

/* ===== Footer ===== */
footer {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  margin-top: 30px;
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding: 10px 0; font-size:.65rem; letter-spacing:.15em; color: var(--text-dim);
  flex-wrap:wrap;
}
.footer-inner .hazard { width:44px; height:9px; background: repeating-linear-gradient(45deg, var(--ink) 0 4px, transparent 4px 8px); display:inline-block; vertical-align:middle; margin-right:10px; }
.footer-inner .tx { color: var(--orange); }
.footer-inner .links a { margin-left: 14px; color: var(--text-dim); font-size:.65rem; letter-spacing:.15em; }
.footer-inner .links a:hover { color: var(--pink); }

/* =========================================================
   RESPONSIVE LAYER — device agnostic
   Breakpoints: 900px (small laptop/tablet landscape),
   720px (tablet portrait), 480px (phone)
   ========================================================= */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Comfortable touch targets everywhere */
.rail a, .filters button, .play-cmd, .btn-cyber, .btn-outline { min-height: 44px; }
.rail a { justify-content: center; }
.play-cmd { min-height: 34px; }

@media (max-width: 900px) {
  .logo { padding: 10px 14px; }
  .rail a { padding: 8px 10px; }
  .rail a .t { font-size:.66rem; letter-spacing:.14em; }
  .wrap { padding: 0 16px; }
  .hud { padding: 36px 22px 32px; }
}

@media (max-width: 720px) {
  /* Masthead stacks; nav becomes a 3+2 grid of tap targets */
  .masthead { position: static; }
  .logo { border-right:none; width:100%; border-bottom:1px solid var(--line); justify-content:center; }
  .rail { flex-wrap: wrap; min-width: 0; width: 100%; }
  .rail a { flex: 1 1 33%; border-top: 1px solid var(--line-dim); align-items:center; text-align:center; }
  .rail a .n { display:none; }

  .statusbar { padding: 6px 14px; justify-content:center; text-align:center; }
  .statusbar .right { gap: 12px; justify-content:center; }

  /* HUD: drop telemetry captions that collide on narrow screens */
  .hud .tele { display:none; }
  .hud { padding: 30px 16px 28px; }
  .hud .tagline i { width: 34px; }

  .module-grid-2 { grid-template-columns: 1fr; }

  /* Stream rows: hide decorative EQ, let titles breathe */
  .eq { display:none; }
  .stream-row { gap: 10px; }
  .stream-row .title { white-space: normal; }

  .mix-console { grid-template-columns: 1fr; }
  .mix-cover { border-right:none; border-bottom:1px solid var(--line); min-height:160px; }

  .tracklist .trk-label { display:none; }
  .bp-vol { display:none; }

  .rec-row { gap: 8px 10px; }
  .rec-row .r-rate { margin-left: 0; flex-basis: 100%; }

  .footer-inner { flex-direction: column; text-align:center; gap: 8px; padding: 14px 0; }
  .footer-inner .links a { margin: 0 7px; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  .wrap { padding: 0 12px; }

  .rail a { flex: 1 1 50%; }

  .logo-text { font-size: .88rem; letter-spacing:.1em; }
  .logo-sub { font-size:.5rem; letter-spacing:.3em; }
  .logo-mark { width: 34px; height: 34px; }

  .hud h1 { font-size: clamp(1.15rem, 7.5vw, 1.6rem); }
  .hud .boot { letter-spacing:.3em; font-size:.6rem; }
  .hud .tagline span { letter-spacing:.2em; font-size:.62rem; }
  .hud .actions { flex-direction: column; align-items: stretch; }
  .btn-cyber, .btn-outline { display:block; text-align:center; }

  .filters { gap: 6px; }
  .filters button { flex: 1 1 40%; padding: 8px 8px; }

  .page-head h1 { font-size: clamp(1.15rem, 6.5vw, 1.5rem); }
  .article-head { padding: 18px 16px; }
  .article-head h1 { font-size: clamp(1rem, 5.5vw, 1.3rem); }
  .article-body { font-size: 1.04rem; }

  .stream-row { flex-wrap: wrap; }
  .stream-row .info { flex-basis: calc(100% - 48px); }
  .stream-row .play-cmd { margin-left: 44px; }

  .mix-cover .num { font-size: 2.4rem; }
  .mix-data { padding: 16px 14px; }

  .bp-toggle { width: 44px; height: 44px; }
  .bp-canvas { height: 44px; }

  .crumbs { font-size:.6rem; letter-spacing:.12em; }
  .module-head { flex-wrap: wrap; gap: 4px; }
  .tracklist li { flex-wrap: wrap; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .blink, .statusbar .online i { animation: none; }
  html { scroll-behavior: auto; }
}