:root {
      --ink: #0a0806;
      --ink-2: #100c09;
      --panel: #171109;
      --panel-2: #1e1610;
      --line: #2e2118;
      --ember: #ff6a1f;
      --ember-hot: #ffa257;
      --ember-deep: #c33f0c;
      --steel: #9db3c4;
      --bone: #f4e9dd;
      --muted: #9c8878;
      --text-2: #cbb9a8;
      --on-accent: #16100a;
      /* RGB channels so alpha tints can follow the page palette. Every themed
         page must define these three or its accents fall back to album orange. */
      --ember-rgb: 255, 106, 31;
      --ink-rgb: 10, 8, 6;
      --panel-rgb: 23, 17, 9;
      --max: 1180px;
      --bar: 128px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      min-width: 320px;
      overflow-x: hidden;
      padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom));
      background: var(--ink);
      color: var(--bone);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    /* Ambient glow + scanlines live on fixed layers so they rasterise once and
       composite on scroll, instead of repainting the whole tall page. No
       mix-blend-mode here on purpose — blending a full-viewport overlay forces
       a re-composite of everything under it on every single scroll frame. */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% -6%, rgba(var(--ember-rgb), .17), transparent 40rem),
        radial-gradient(circle at 92% 42%, rgba(195, 63, 12, .10), transparent 30rem),
        radial-gradient(circle at 4% 74%, rgba(157, 179, 196, .05), transparent 26rem);
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none;
      opacity: .5;
      background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 1px, transparent 1px, transparent 4px);
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 3px; border-radius: 3px; }
    ::selection { background: var(--ember); color: var(--on-accent); }

    h1, h2, h3, .display, .eyebrow, .btn, .mark {
      font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
    }
    .shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    @media (max-width: 480px) { .shell { width: calc(100% - 28px); } }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ember);
      font-size: 11px;
      letter-spacing: .3em;
    }
    .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 12px currentColor; }

    /* ---------- top bar ---------- */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      border-bottom: 1px solid transparent;
      background: linear-gradient(180deg, rgba(var(--ink-rgb), .92), rgba(var(--ink-rgb), 0));
      transition: background .25s ease, border-color .25s ease;
    }
    .topbar.stuck { background: var(--ink); border-bottom-color: var(--line); }
    .nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 21px; letter-spacing: .16em; }
    .mark b { color: var(--ember); font-weight: 900; }
    .mark svg { width: 20px; height: 20px; flex: none; }
    /* Album switcher. Every page shows all three albums and highlights the one
       you're on, so there is always one obvious way to move between them. */
    .albums { display: flex; align-items: center; gap: 4px; }
    .albums a {
      padding: 7px 13px;
      border: 1px solid transparent;
      border-radius: 99px;
      color: var(--muted);
      text-decoration: none;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: color .15s ease, background .15s ease, border-color .15s ease;
    }
    .albums a:hover { color: var(--ember-hot); background: rgba(255,255,255,.06); }
    .albums a[aria-current="page"] {
      color: var(--ember-hot);
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
    }
    /* The page's own sections, kept visually separate from the album switcher —
       mixing the two is what made the old nav read as one confusing list. */
    .nav-right { display: flex; align-items: center; gap: 20px; }
    .page-links { display: flex; align-items: center; gap: 18px; padding-left: 20px; border-left: 1px solid var(--line); }
    .page-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .page-links a:hover { color: var(--ember-hot); }
    @media (max-width: 1080px) { .page-links { display: none; } }

    .nav-cta {
      color: var(--muted);
      text-decoration: none;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .nav-cta:hover { color: var(--ember); }
    @media (max-width: 860px) { .nav-cta { display: none; } }
    @media (max-width: 520px) {
      .albums a { padding: 6px 9px; font-size: 10px; letter-spacing: .08em; }
      .mark { font-size: 17px; letter-spacing: .1em; }
      .mark svg { width: 16px; height: 16px; }
      .nav { gap: 8px; }
    }
    /* Below ~390px the mark plus three tabs no longer fit on one line and the
       header dragged the page sideways. Tighten first, then give the tabs their
       own row rather than letting any album become unreachable. */
    @media (max-width: 400px) {
      .albums { gap: 2px; }
      .albums a { padding: 5px 7px; font-size: 9.5px; letter-spacing: .04em; }
      .mark { font-size: 15px; gap: 7px; }
      .mark svg { width: 14px; height: 14px; }
      .nav { gap: 6px; min-height: 56px; }
    }
    /* With four albums the switcher stops fitting beside the wordmark well
       before phone widths, so it takes its own centred row. Every album stays
       visible — none of them get hidden behind a menu. */
    @media (max-width: 820px) {
      .nav { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 9px 0; min-height: 0; }
      .albums { order: 2; width: 100%; justify-content: center; flex-wrap: wrap; }
    }

    /* ---------- hero ---------- */
    /* overflow-x: clip, not hidden — the cover glow deliberately bleeds past the
       art on every side, and without clipping it widens the page at both edges.
       clip contains it without turning the hero into a scroll container. */
    .hero { position: relative; padding: 42px 0 60px; overflow-x: clip; }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
    }
    /* A grid item's min-width is auto, so one unbreakable child — a big display
       heading — can force its whole column wider than the screen. The hero clips
       rather than scrolls, so that shows up as cut-off text instead of a
       scrollbar, which is why an overflow sweep can pass while it looks broken. */
    .hero-grid > * { min-width: 0; }
    .art-wrap { position: relative; }
    /* A gradient is already soft — an extra filter: blur() on top of it buys
       nothing visually and costs a full re-rasterise per frame (badly so in
       Firefox). Only opacity animates here, which stays on the compositor. */
    .glow {
      position: absolute;
      inset: -14%;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(var(--ember-rgb),.42), rgba(var(--ember-rgb),.10) 42%, rgba(var(--ember-rgb),0) 70%);
      opacity: .42;
      transition: opacity .18s linear;
      will-change: opacity;
    }
    .art {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: 0 34px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .vol-tag {
      position: absolute;
      left: 14px;
      bottom: 14px;
      padding: 6px 12px;
      border: 1px solid rgba(var(--ember-rgb),.55);
      border-radius: 99px;
      background: rgba(var(--ink-rgb),.88);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .24em;
      color: var(--ember-hot);
    }

    .hero h1 {
      margin: 14px 0 6px;
      font-size: clamp(62px, 12vw, 126px);
      line-height: .82;
      letter-spacing: .04em;
      background: linear-gradient(180deg, var(--bone) 6%, var(--ember) 58%, var(--ember-deep) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* text-shadow, not filter: drop-shadow — a filter on a big element makes
         it its own layer that Firefox re-rasterises while scrolling. */
      text-shadow: 0 6px 26px rgba(var(--ember-rgb),.28);
    }
    .hero .sub {
      font-family: "Arial Black", Arial, sans-serif;
      font-size: clamp(15px, 2.3vw, 23px);
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--text-2);
    }
    .tagline { margin-top: 18px; max-width: 520px; color: var(--muted); font-size: 16px; }
    .tagline b { color: var(--bone); font-weight: 700; }

    .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
    .chip {
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: rgba(var(--panel-rgb),.6);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--text-2);
    }
    .chip b { color: var(--ember-hot); }

    .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 26px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: linear-gradient(180deg, var(--ember-hot), var(--ember-deep));
      color: var(--on-accent);
      font-size: 13px;
      letter-spacing: .16em;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 12px 34px rgba(var(--ember-rgb),.26);
      transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(var(--ember-rgb),.36); }
    .btn:active { transform: translateY(0); }
    .btn.ghost {
      background: transparent;
      border-color: var(--line);
      color: var(--bone);
      box-shadow: none;
    }
    .btn.ghost:hover { border-color: var(--ember); color: var(--ember-hot); }
    .btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

    @media (max-width: 900px) {
      .hero { padding-top: 26px; }
      .hero-grid { grid-template-columns: 1fr; gap: 30px; }
      .art-wrap { max-width: 380px; margin-inline: auto; }
      .hero-copy { text-align: center; }
      .hero-copy .tagline { margin-inline: auto; }
      .meta-row, .cta-row, .eyebrow { justify-content: center; }
      .cta-row .btn { flex: 1 1 210px; justify-content: center; }
    }

    /* ---------- section frame ---------- */
    section { position: relative; }
    .band { padding: 62px 0; border-top: 1px solid var(--line); }
    .band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
    .band-head h2 { margin-top: 8px; font-size: clamp(34px, 5.4vw, 58px); line-height: .92; letter-spacing: -.01em; }
    .band-head p { max-width: 560px; margin-top: 10px; color: var(--muted); font-size: 15px; }

    /* ---------- tracklist ---------- */
    .disc-label {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 26px 0 10px;
      color: var(--ember);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .28em;
      text-transform: uppercase;
    }
    .disc-label:first-child { margin-top: 0; }
    .disc-label .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--ember-rgb),.45), transparent); }
    .disc-label span { color: var(--muted); letter-spacing: .16em; }
    .disc-label a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: none;
      padding: 4px 11px;
      border: 1px solid rgba(var(--ember-rgb),.42);
      border-radius: 99px;
      color: var(--ember-hot);
      text-decoration: none;
      letter-spacing: .14em;
      white-space: nowrap;
    }
    .disc-label a:hover { background: rgba(var(--ember-rgb),.14); border-color: var(--ember); }
    .disc-note {
      margin: -2px 0 12px;
      max-width: 720px;
      color: var(--muted);
      font-size: 13.5px;
    }
    .disc-note a { color: var(--ember-hot); }

    .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
    @media (max-width: 860px) { .tracks { grid-template-columns: 1fr; } }

    .track {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 11px 14px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .track:hover { background: rgba(var(--ember-rgb),.07); border-color: rgba(var(--ember-rgb),.22); }
    .track .num { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
    .track .name-wrap { min-width: 0; }
    .track .name { display: block; min-width: 0; font-size: 15px; font-weight: 700; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .track .note {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* ---------- lyric hooks ---------- */
    #hooklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
    .hook-quote {
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-left: 3px solid var(--ember);
      border-radius: 0 10px 10px 0;
      background: linear-gradient(90deg, rgba(var(--ember-rgb), .07), transparent);
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease;
    }
    .hook-quote:hover { border-color: rgba(var(--ember-rgb), .5); border-left-color: var(--ember-hot); }
    .hook-quote p {
      color: var(--bone);
      font-size: 16px;
      font-style: italic;
      line-height: 1.5;
    }
    .hook-quote cite {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .track .style {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .09em;
      text-transform: uppercase;
      opacity: .75;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .track .len { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    .track[aria-current="true"] { background: rgba(var(--ember-rgb),.13); border-color: rgba(var(--ember-rgb),.42); }
    .track[aria-current="true"] .name { color: var(--ember-hot); }
    .track[aria-current="true"] .num { color: var(--ember); }

    .bars { display: none; gap: 2px; align-items: flex-end; height: 13px; width: 15px; }
    .track[aria-current="true"] .bars { display: flex; }
    .track[aria-current="true"] .num-text { display: none; }
    /* scaleY, not height — animating height relayouts the row every frame. */
    .bars i { flex: 1; height: 100%; transform-origin: bottom; background: var(--ember); border-radius: 1px; animation: eq .9s ease-in-out infinite; }
    .bars i:nth-child(2) { animation-delay: .18s; }
    .bars i:nth-child(3) { animation-delay: .36s; }
    body.paused .bars i { animation-play-state: paused; }
    @keyframes eq { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
    @media (prefers-reduced-motion: reduce) { .bars i { animation: none; transform: scaleY(.6); } }

    /* ---------- cross-page promo ---------- */
    .promo {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 40px;
      align-items: center;
      padding: 34px 38px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background:
        radial-gradient(circle at 88% 30%, rgba(var(--ember-rgb), .08), transparent 60%),
        linear-gradient(180deg, var(--panel), rgba(var(--panel-rgb),.35));
      text-decoration: none;
      transition: border-color .18s ease, transform .18s ease;
    }
    .promo:hover { border-color: rgba(var(--ember-rgb),.55); transform: translateY(-2px); }
    .promo + .promo { margin-top: 16px; }
    .promo h3 {
      margin: 10px 0 12px;
      font-size: clamp(30px, 4.4vw, 46px);
      line-height: .92;
    }
    .promo p { max-width: 520px; color: var(--muted); font-size: 15px; }
    .promo p b { color: var(--bone); }
    .promo-cta {
      display: inline-block;
      margin-top: 20px;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ember-hot);
    }
    .promo-art {
      width: 150px;
      height: 150px;
      flex: none;
      border-radius: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 14px 34px rgba(0,0,0,.5);
    }
    @media (max-width: 760px) { .promo-art { width: 120px; height: 120px; } }


    /* ---------- story ---------- */
    .story-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
    @media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 34px; } }
    code {
      font-family: Consolas, "Courier New", monospace;
      font-size: .9em;
      color: var(--ember-hot);
      background: rgba(var(--ember-rgb),.10);
      padding: 1px 5px;
      border-radius: 3px;
    }
    .prose p { margin-bottom: 17px; color: var(--text-2); font-size: 16px; }
    .prose p:last-child { margin-bottom: 0; }
    .prose b { color: var(--bone); }
    .prose .lead { font-size: 19px; color: var(--bone); }
    .prose .lead::first-letter {
      float: left;
      margin: 4px 10px 0 0;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 58px;
      line-height: .78;
      color: var(--ember);
    }
    .pull {
      margin: 26px 0;
      padding: 18px 22px;
      border-left: 3px solid var(--ember);
      background: linear-gradient(90deg, rgba(var(--ember-rgb),.09), transparent);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 17px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--bone);
    }

    .file-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: linear-gradient(180deg, var(--panel), rgba(var(--panel-rgb),.4));
    }
    .file-card h3 { font-size: 12px; letter-spacing: .24em; color: var(--ember); }
    .file-card dl { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13px; }
    .file-card dt { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 800; padding-top: 3px; }
    .file-card dd { color: var(--text-2); }
    .file-card .sep { grid-column: 1 / -1; height: 1px; background: var(--line); }
    .movement { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
    .movement h4 { font-size: 13px; font-weight: 900; color: var(--bone); }
    .movement h4 span { color: var(--ember); font-size: 10px; letter-spacing: .2em; display: block; margin-bottom: 2px; }
    .movement p { margin-top: 5px; color: var(--muted); font-size: 13px; }
    .movement a { color: var(--ember-hot); }

    /* ---------- footer ---------- */
    footer { padding: 44px 0 34px; border-top: 1px solid var(--line); }
    .foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
    .foot p { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
    /* Must wrap: unwrapped this was 525px of links on a 320px screen, hanging
       225px off the side and dragging the whole page with it. */
    .foot-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
    .foot-links a { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
    .foot-links a:hover { color: var(--ember); }

    /* ---------- player ---------- */
    /* Opaque on purpose. A backdrop-filter on a full-width fixed bar re-blurs
       everything behind it on every scroll frame; Firefox in particular falls
       off a cliff. translateZ pins it to its own compositor layer so scrolling
       the page never repaints it. */
    .player {
      position: fixed;
      z-index: 50;
      inset: auto 0 0;
      border-top: 1px solid rgba(var(--ember-rgb),.28);
      background: linear-gradient(180deg, var(--ink-2), var(--ink));
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -18px 40px rgba(0,0,0,.55);
      transform: translateZ(0);
      will-change: transform;
    }
    #viz {
      display: block;
      width: 100%;
      height: 46px;
      opacity: .95;
      cursor: pointer;
      transition: height .2s ease;
    }
    body.viz-off #viz { height: 8px; opacity: .7; }
    /* Turning the visualizer off is the "make this page cheap" lever, so it also
       drops the scanline overlay — a full-viewport fixed layer costs a whole
       screen of blending per frame on a machine that has fallen back to
       software compositing. */
    body.viz-off::after { display: none; }
    .player-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 20px;
      padding: 10px 0 14px;
    }
    .np { display: flex; align-items: center; gap: 13px; min-width: 0; }
    .np img { width: 46px; height: 46px; border-radius: 5px; border: 1px solid var(--line); flex: none; }
    .np-text { min-width: 0; }
    .np-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--bone);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .np-sub { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

    .controls { display: flex; flex-direction: column; align-items: center; gap: 7px; width: min(100%, 460px); }
    .btn-row { display: flex; align-items: center; gap: 8px; }
    .ctl {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--text-2);
      cursor: pointer;
      transition: color .15s ease, background .15s ease;
    }
    .ctl:hover { color: var(--bone); background: rgba(255,255,255,.07); }
    .ctl svg { width: 17px; height: 17px; fill: currentColor; }
    .ctl.on { color: var(--ember); }
    .ctl.on::after { content: ""; position: absolute; margin-top: 26px; width: 4px; height: 4px; border-radius: 50%; background: var(--ember); }
    .ctl[aria-pressed] { position: relative; }
    .ctl.play {
      width: 46px;
      height: 46px;
      background: linear-gradient(180deg, var(--ember-hot), var(--ember-deep));
      color: var(--on-accent);
      box-shadow: 0 6px 22px rgba(var(--ember-rgb),.34);
    }
    .ctl.play:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--ember-hot), var(--ember-deep)); }
    .ctl.play svg { width: 19px; height: 19px; }

    .scrub { display: flex; align-items: center; gap: 11px; width: 100%; }
    .time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 16px;
      background: transparent;
      cursor: pointer;
    }
    input[type=range]::-webkit-slider-runnable-track {
      height: 5px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--ember) var(--p, 0%), rgba(255,255,255,.15) var(--p, 0%));
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 13px;
      height: 13px;
      margin-top: -4px;
      border-radius: 50%;
      background: var(--bone);
      box-shadow: 0 0 10px rgba(var(--ember-rgb),.9);
    }
    input[type=range]::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(255,255,255,.15); }
    input[type=range]::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--ember); }
    input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--bone); box-shadow: 0 0 10px rgba(var(--ember-rgb),.9); }

    .aux { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .aux .vol { width: 96px; }

    @media (max-width: 860px) {
      :root { --bar: 118px; }
      #viz { height: 32px; }
      .player-inner { grid-template-columns: 1fr; gap: 8px; padding: 8px 0 12px; }
      .aux { display: none; }
      .np img { width: 38px; height: 38px; }
      .controls { width: 100%; }
      .np { justify-content: flex-start; }
    }
    @media (max-width: 420px) {
      .btn-row { gap: 4px; }
    }