/* Stanzai dev styles 12/14 — desktop >=1024 — wide rail, session rail, top bar, desktop home, DNA card, style-prompt typography, LIGHT MODE block, collapse states — extracted VERBATIM from index.html <style> block lines 6073-8860 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── TEXT SELECTION ─────────────────────────────────────────────────────── */
body.light-mode ::selection {
  background: rgba(var(--gold-rgb),0.28); color: var(--t1);
}

/* Preserved from pre-V247 v9 block — the ready-pulse animation pair.
   The new patch handles .v9-chip.glow statically; the animation override
   kicks in only when .ready-pulse class is present. */
@keyframes v9PulseReadyLight {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 14px rgba(200,160,80,0.2), 0 0 0 3px rgba(200,160,80,0.1); }
}
body.light-mode .v9-chip.glow.ready-pulse { animation: v9PulseReadyLight 2s ease-in-out 3; }

@media (min-width: 1024px) {
  #s-manual .dtpk-closing {
    display: block;
    margin: 64px 0 8px;
    max-width: 720px;  /* narrower than chapters so the closing feels focused */
    text-align: center;
  }
  #s-manual .dtpk-closing .dtpk-closing-rule {
    height: 1px;
    background: linear-gradient(90deg,
      rgba(var(--gold-rgb), 0) 0%,
      rgba(var(--gold-rgb), 0.35) 50%,
      rgba(var(--gold-rgb), 0) 100%);
    margin: 0 auto 36px;
    max-width: 560px;
  }
  #s-manual .dtpk-kicker {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
  }
  #s-manual .dtpk-closing-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: 26px; line-height: 1.28; letter-spacing: -0.005em;
    color: var(--t1);
    margin: 0 auto 32px;
    max-width: 600px;
  }
  #s-manual .dtpk-closing-title em {
    font-style: italic;
    color: var(--gold);
  }
  #s-manual .dtpk-closing-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 32px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    border-radius: 12px;
    cursor: pointer;
    color: var(--gold);
    box-shadow: 0 8px 22px -10px rgba(var(--gold-rgb), 0.28);
    transition: border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard),
                box-shadow var(--state-dur) var(--easing-standard),
                transform var(--press-dur) var(--easing-standard);
  }
  #s-manual .dtpk-closing-btn:hover:not(:disabled) {
    border-color: rgba(var(--gold-rgb), 0.65);
    background: rgba(var(--gold-rgb), 0.05);
    box-shadow: 0 12px 34px -10px rgba(var(--gold-rgb), 0.42);
  }
  #s-manual .dtpk-closing-btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
  #s-manual .dtpk-closing-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo);
  }
  #s-manual .dtpk-closing-btn:disabled {
    cursor: not-allowed;
    opacity: 0.32;
    box-shadow: none;
  }
  #s-manual .dtpk-closing-btn .it {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 500;
    font-size: 20px; line-height: 1;
  }
  #s-manual .dtpk-closing-btn .tx {
    font-family: 'Outfit', sans-serif; font-weight: 400;
    font-size: 15px; letter-spacing: 0.03em;
  }
  #s-manual .dtpk-closing-btn svg {
    width: 16px; height: 16px;
    transition: transform var(--state-dur) var(--easing-standard);
  }
  #s-manual .dtpk-closing-btn:hover:not(:disabled) svg { transform: translateX(3px); }
  #s-manual .dtpk-substep {
    margin-top: 18px;
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t4);
  }
  #s-manual .dtpk-substep em {
    font-style: normal;
    color: var(--gold);
  }

  /* Hide mobile-era bottom controls on desktop — the closing CTA + rail
     backlink supersede them. "Need more control?" and "Other ways to begin"
     stay visible (they're functional entry points, not redundant). */
  #s-manual .dtpk-main > div > div > .begin-btn,
  #s-manual .dtpk-main > div > div > .secbtn {
    display: none;
  }
}
/* End V220 D-4 */

@media (min-width: 1024px) {
  /* V162 E4: Show top bar at desktop widths */
  #dtTopBar { display: block; }
  /* ── LEFT RAIL — expanded from icon strip to labeled nav ── */
  .tabbar {
    width: 240px; padding: 0 0 16px;
    align-items: stretch; gap: 2px;
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .tabbar::before {
    content: 'stanzai';
    display: block; padding: 28px 20px 20px;
    font-family: 'Cormorant Garamond', serif; font-size: 22px;
    font-weight: 300; font-style: italic; color: var(--gold);
    letter-spacing: 0.02em; border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px; order: -2;
  }
  .tab {
    width: 100%; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 11px 20px; border-radius: 10px;
    margin: 0 8px; width: calc(100% - 16px);
    position: relative; /* V185 Fix C: anchors the ::before active-state accent */
  }
  .tab .tabicon { font-size: 18px; width: 24px; text-align: center; }
  .tablabel { font-size: 13px; letter-spacing: 0.01em; margin-top: 0; }
  /* V185 Fix C: Active-state tab. Was a full rgba(200,160,80,0.1) background
     fill which read as a chunky box dominating the rail. Replaced with a
     quieter background tint (0.04) + a 3px gold left-edge accent bar, which
     is the standard sidebar-active pattern (Linear, Arc, Notion). The label
     + icon color shift at line 1355-1357 still carries the "this is active"
     signal. Left-edge accent keeps focus without adding visual weight. */
  .tab.on { background: rgba(200,160,80,0.04); }
  .tab.on::before {
    content: ''; position: absolute; left: 2px; top: 20%; bottom: 20%;
    width: 2px; border-radius: 1px; background: var(--gold);
    opacity: 0.85;
  }
  /* V185 Fix B: "New" button. Was a heavy gold-tinted background box that
     visually out-competed every other nav item. Now a gold-ring CTA with
     no background fill — still clearly primary, but in scale with the rail.
     Matches the "5% gold rule" — gold as state/accent, not a fill. */
  #tab-new {
    margin: 8px 8px 4px; padding: 11px 20px; width: calc(100% - 16px);
    background: transparent;
    border: 1px solid rgba(200,160,80,0.28);
    border-radius: 10px; order: -1;
    transition: border-color var(--state-dur, 160ms) var(--easing-standard, cubic-bezier(0.2,0.8,0.2,1)), background var(--state-dur, 160ms) var(--easing-standard, cubic-bezier(0.2,0.8,0.2,1));
  }
  #tab-new:hover {
    border-color: rgba(200,160,80,0.50);
    background: rgba(200,160,80,0.04);
  }
  #tab-new .tabicon {
    background: var(--gold) !important; border-radius: 7px !important;
    width: 24px !important; height: 24px !important; font-size: 16px !important;
    margin-top: 0 !important;
  }
  #tab-profile { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); margin-left: 8px; margin-right: 8px; border-radius: 0 0 10px 10px; }

  /* ── Song Map — breathing room in wide rail ── */
  body.session-active #v9SongMap { padding: 16px 20px; }
  .smap-phase { padding: 8px 0; }
  .smap-label { font-size: 12px; letter-spacing: 0.02em; }
  .smap-dot { width: 10px; height: 10px; }
  .smap-dot.seeded { width: 8px; height: 8px; }
  .smap-line { height: 12px; margin-left: 24px; }

  /* ── ALL SCREENS — offset for wider rail (when tabbar is visible) ── */
  .screen { left: 240px; }

  /* ── V196: Hide mobile tabbar on non-session desktop screens ──
     The top bar (V194/V195) now handles all navigation on home/library/vault/profile.
     Duplicating that nav in a left rail creates confusion — clicking a top-bar nav
     item shouldn't make another nav appear. Left rail is reserved exclusively for
     the session screen, where it becomes the session list (Today/Yesterday/This Week)
     in V197. Mobile is untouched — tabbar remains bottom nav below 1024px. */
  body:not(.session-active) .tabbar { display: none !important; }
  body:not(.session-active) .screen { left: 0; }

  /* ── V197: Desktop session rail — editorial session list ──
     When body.session-active on desktop (≥1024px), the tabbar transforms from
     mobile nav-icon row into a full session list: New Song / search / Vault
     quick-access up top; Today/Yesterday/This Week grouped sessions below;
     Settings footer at bottom. Mobile and non-session desktop unchanged. */
  body.session-active .tabbar .tab-chev,
  body.session-active .tabbar .tab,
  body.session-active .tabbar #v9SongMap { display: none !important; }

  body.session-active .tabbar {
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Rail elements hidden outside desktop session. V196 already hides whole tabbar on non-session desktop. */
  .rail-head, .rail-body, .rail-footer { display: none; }
  body.session-active .tabbar .rail-head { display: block; padding: 22px 24px 14px; border-bottom: 1px solid var(--dt-edge); }
  body.session-active .tabbar .rail-body { display: block; flex: 1; overflow-y: auto; padding: 10px 0 20px; }
  body.session-active .tabbar .rail-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-top: 1px solid var(--dt-edge);
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t4);
  }
  .rail-footer .link { color: var(--t3); cursor: pointer; transition: color var(--state-dur) var(--easing-standard); }
  .rail-footer .link:hover { color: var(--gold); }

  /* New Song button — gold gradient */
  .rail-new {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.10), rgba(var(--gold-rgb), 0.04));
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    border-radius: 10px; cursor: pointer;
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold);
    transition: background var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                transform var(--press-dur) var(--easing-standard);
  }
  .rail-new:hover { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.06)); border-color: rgba(var(--gold-rgb), 0.45); }
  .rail-new:active { transform: scale(var(--press-scale)); }
  .rail-new .rn-label { display: inline-flex; align-items: center; gap: 6px; }
  .rail-new .rn-plus { font-size: 14px; line-height: 1; font-weight: 400; opacity: 0.9; }
  .rail-new .rn-hint { color: rgba(var(--gold-rgb), 0.55); font-size: 9px; }

  /* Search input */
  .rail-search {
    margin-top: 12px; width: 100%; padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--dt-edge);
    border-radius: 8px; color: var(--t2);
    font-family: 'Outfit', sans-serif; font-weight: 300; font-size: 13px;
    outline: none;
    transition: border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard);
  }
  .rail-search:focus { border-color: rgba(var(--gold-rgb), 0.30); background: rgba(var(--gold-rgb), 0.02); }
  .rail-search::placeholder { color: var(--t4); }

  /* Vault quick-access */
  .rail-vault {
    margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--dt-edge);
    border-radius: 8px; cursor: pointer;
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t2);
    position: relative;
    transition: background var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                color var(--state-dur) var(--easing-standard);
  }
  .rail-vault:hover { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.35); background: rgba(var(--gold-rgb), 0.04); }
  .rail-vault .rv-left { display: flex; align-items: center; gap: 10px; }
  .rail-vault .rv-glyph { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold); opacity: 0.75; transition: opacity 180ms; }
  .rail-vault:hover .rv-glyph { opacity: 1; }
  .rail-vault .rv-count {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 12px; letter-spacing: 0; text-transform: none;
    color: var(--gold); opacity: 0.7;
  }
  .rail-vault .rv-pulse {
    position: absolute; top: -3px; right: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.8);
    animation: rvPulse 2.4s ease-in-out infinite;
  }
  @keyframes rvPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  /* Group headers */
  .rail-group { padding: 14px 24px 6px; }
  .rail-group-label {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--t4);
  }

  /* Session items */
  .rail-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 24px; cursor: pointer; position: relative;
    border-left: 2px solid transparent;
    transition: background-color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard);
  }
  .rail-item:hover { background: rgba(255, 255, 255, 0.025); }
  .rail-item.active { background: rgba(var(--gold-rgb), 0.05); border-left-color: var(--gold); }
  .rail-item .stage-dot {
    width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex-shrink: 0;
    background: var(--t4);
  }
  .rail-item .stage-dot.ready { background: var(--slate); box-shadow: 0 0 6px rgba(94, 136, 170, 0.4); }
  .rail-item .stage-dot.writing { background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5); animation: railItemPulse 2s ease-in-out infinite; }
  .rail-item .stage-dot.loved { background: var(--rose); box-shadow: 0 0 6px rgba(var(--rose-rgb), 0.4); }
  @keyframes railItemPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

  .rail-item .item-meta { flex: 1; min-width: 0; }
  .rail-item .item-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 15px; color: var(--t1); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rail-item.active .item-title { color: var(--gold); }
  .rail-item .item-sub {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--t4); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rail-item .rail-del {
    flex-shrink: 0; opacity: 0; background: none; border: none;
    color: var(--t4); font-size: 13px; line-height: 1; padding: 3px 5px;
    cursor: pointer; border-radius: 4px; align-self: center;
    transition: opacity 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent;
  }
  .rail-item:hover .rail-del { opacity: 1; }
  .rail-item .rail-del:hover { color: var(--rose); }

  /* Empty state */
  .rail-empty {
    margin: 20px 24px;
    padding: 16px; border: 1px dashed var(--dt-edge);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 300;
    color: var(--t3); line-height: 1.5;
    text-align: center;
  }

  /* ── BROWSE SHELL — wider content ──
     V218: #s-manual removed from this cap — at ≥1024px it uses the
     V215 .dtpk-shell two-column grid which needs full viewport width.
     Cap still applies at 768-1023px via the line ~3369 rule for the
     mobile picker single-column layout. */
  #s-home > div,
  #s-hub > div,
  #s-profile > div,
  #s-dna, #s-textdna, #s-dna-review, #s-stylepromptdna,
  #s-photodna, #s-conceptonly, #s-generated,
  #s-styler { max-width: 1200px; }

  #libStatGrid { max-width: 1200px; }
  .lib-topnav { max-width: 1200px; }
  .topnav { max-width: 1200px; }
  #songViewContent { max-width: 1200px; }

  /* ── SESSION SHELL — adjust for wider rail ── */
  body.session-active #s-session { left: 240px; right: 360px; }
  body.session-active .v9-thread { max-width: 100%; }
  body.session-active .v9-input-area {
    left: 240px; right: 360px;
    max-width: 100%;
  }
  body.session-active .v9-nav { max-width: 100%; }
  body.session-active .v9-ctx-bar { max-width: 100%; }
  body.session-active .v9-dna-bar { max-width: 100%; }
  body.session-active .v9-prog-wrap { max-width: 100%; }
  body.session-active #v9CollapsedStrip { max-width: 100%; }

  /* ── NON-SESSION — browse widths with wider rail offset ── */
  .v9-thread { max-width: 1200px; }
  .v9-input-area { left: 240px; max-width: 1200px; }
  .v9-nav { max-width: 1200px; }
  .v9-ctx-bar, .v9-dna-bar, .v9-prog-wrap, #v9CollapsedStrip { max-width: 1200px; }

  /* ── OVERLAYS — offset for wider rail ── */
  .hist-drawer { left: 240px; }
  #selectActionBar { left: 240px; }
  #newSongSheet { left: 240px !important; }
  #genSheetOverlay { left: 240px !important; }
  #sfConfirmModal { left: 240px !important; }

  /* ── HOME — desktop launch surface ── */
  #s-home .home-hero { font-size: 36px !important; }
  #s-home .home-hero-sub { font-size: 18px !important; }

  /* ════════════════════════════════════════════════════════════════
     V198: NOCTURNE HOME ATMOSPHERE (desktop ≥1024px)
     Editorial masthead treatment. Aurora warm-glow + 6 drifting embers +
     breathing Cormorant wordmark + animated rule + Cormorant tagline.
     Overrides the mobile .nocturne-home baseline via desktop-scoped rules.
     Animation sequence (on page load):
       0.0s  wordmark begins ink-in
       0.9s  rule begins draw
       1.3s  tagline begins fade
       2.4s  wordmark breath loop begins
     ════════════════════════════════════════════════════════════════ */

  #s-home .nocturne-home {
    display: flex !important;
    flex-direction: column;
    position: absolute; inset: 0;
    padding: 0;
    max-width: none; /* escape the #s-home > div 1200px cap */
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 50% at 50% 42%, rgba(var(--gold-rgb), 0.035), transparent 70%),
      radial-gradient(ellipse 120% 40% at 50% 100%, rgba(var(--gold-rgb), 0.02), transparent 60%),
      var(--dt-void);
    text-align: left;
  }

  /* Noise dithering overlay — eliminates gradient banding in dark radials by
     introducing sub-pixel variation. Inline SVG (no network), 150×150 tile,
     repeated. 2.5% opacity is enough to break banding without being visible
     as texture. This is the standard fix used by Linear/Vercel/Apple. */
  #s-home .nocturne-home::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    opacity: 0.025;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 150px 150px;
  }

  /* Desktop candlelit room photo. Full-fidelity (opacity 1) — topscrim
     handles upper-band contrast for eyebrow/date legibility. */
  #s-home .home-bg-desktop {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }
  /* Photo legibility mask — darker top/bottom, lighter middle. No radial
     vignette: the lamp upper-left and the candle/piano right ARE the light
     sources, so keeping the sides lighter lets them glow through. */
  #s-home .nh-photo-mask {
    display: block;
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background: linear-gradient(180deg,
      rgba(5,5,5,0.55) 0%,
      rgba(5,5,5,0.18) 32%,
      rgba(5,5,5,0.18) 68%,
      rgba(5,5,5,0.65) 100%);
  }

  /* Layout grid — full viewport, 3 rows:
       row 1 (auto)  — eyebrow row, pinned to top
       row 2 (1fr)   — masthead + flex breathing room (wordmark/rule/tagline centered vertically)
       row 3 (auto)  — routes + continue bar, pinned to bottom
     This distributes vertical space properly at any viewport height. */
  #s-home .nh-layout {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 80px 80px 56px; /* 64px top bar + 16px breathing — eyebrow sits right under nav */
    z-index: 2;
    max-width: none;
    width: auto;
    margin: 0;
  }

  /* Aurora — warm radial glow that drifts */
  #s-home .nh-aurora {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
    z-index: 0;
  }
  #s-home .nh-aurora::before {
    content: ''; position: absolute;
    width: 70vw; height: 70vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06), transparent 60%);
    filter: blur(120px); opacity: 0.55;
    left: -20vw; top: -20vw;
    animation: nhWarmGlow 38s ease-in-out infinite alternate;
  }
  @keyframes nhWarmGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10vw, 8vh) scale(1.08); }
  }

  /* Embers — 6 drifting gold particles */
  #s-home .nh-embers {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
    z-index: 1;
  }
  #s-home .nh-embers span {
    position: absolute; bottom: -10px;
    width: 1.5px; height: 1.5px; border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.6);
    box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.45);
    opacity: 0;
    animation: nhEmber 46s linear infinite;
  }
  #s-home .nh-embers span:nth-child(1) { left: 14%; animation-duration: 52s; animation-delay: -6s; }
  #s-home .nh-embers span:nth-child(2) { left: 29%; animation-duration: 58s; animation-delay: -22s; width: 1px; height: 1px; }
  #s-home .nh-embers span:nth-child(3) { left: 46%; animation-duration: 48s; animation-delay: -14s; }
  #s-home .nh-embers span:nth-child(4) { left: 62%; animation-duration: 54s; animation-delay: -30s; width: 1px; height: 1px; }
  #s-home .nh-embers span:nth-child(5) { left: 78%; animation-duration: 50s; animation-delay: -8s; }
  #s-home .nh-embers span:nth-child(6) { left: 90%; animation-duration: 56s; animation-delay: -36s; width: 1px; height: 1px; }
  @keyframes nhEmber {
    0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
    10%  { opacity: 0.38; }
    45%  { transform: translate(-6px, -50vh) scale(1); opacity: 0.55; }
    80%  { opacity: 0.18; }
    100% { transform: translate(2px, -110vh) scale(0.5); opacity: 0; }
  }

  /* Eyebrow row — Nocturne · Vol + date + history button.
     Grid row 1 (top spacer) — pinned to top of row with align-self: start. */
  #s-home .nh-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; padding: 0;
    align-self: start;
  }
  #s-home .nh-eyebrow {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.65);
    margin-top: 0; opacity: 1;
  }
  #s-home .nh-topright { display: flex; align-items: center; gap: 16px; }
  #s-home .nh-date {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t3);
  }
  /* Override mobile's absolute-positioned nh-history at desktop widths */
  #s-home .nocturne-home .nh-history {
    position: relative;
    top: auto; right: auto;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(var(--gold-rgb), 0.10);
    color: rgba(var(--gold-rgb), 0.55);
  }
  #s-home .nocturne-home .nh-history:hover {
    background: rgba(var(--gold-rgb), 0.06);
    border-color: rgba(var(--gold-rgb), 0.30);
    color: var(--gold);
    transform: none;
  }

  /* Masthead — grid row 2 (the "1fr" flex row). Centers vertically inside the row. */
  #s-home .nh-masthead {
    align-self: center;
    justify-self: center;
    text-align: center;
    position: relative;
    z-index: 3;
  }
  #s-home .nocturne-home .nh-wordmark {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 300;
    font-size: clamp(72px, 9vw, 148px); /* mockup spec: 148px at 1920×1080 */
    line-height: 0.95;
    /* Mockup 3-stop gold gradient via background-clip:text */
    background: linear-gradient(180deg, #E8C070 0%, #C8A050 55%, #A07830 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    text-shadow: 0 0 80px rgba(var(--gold-rgb), 0.18);
    letter-spacing: -0.02em;
    opacity: 1;
    animation: nhWordmarkInk 1400ms cubic-bezier(0.5, 0, 0.2, 1) both;
  }
  #s-home .nocturne-home .nh-wordmark::after {
    content: ''; position: absolute; inset: -10% -5%;
    pointer-events: none; z-index: -1;
    background: radial-gradient(ellipse 40% 50% at 50% 50%, rgba(var(--gold-rgb), 0.12), transparent 70%);
    animation: nhWordmarkBreath 18s ease-in-out 2400ms infinite;
    filter: blur(20px);
  }
  @keyframes nhWordmarkInk {
    0%   { opacity: 0; letter-spacing: 0.04em; filter: blur(6px) brightness(0.6); text-shadow: 0 0 0 rgba(var(--gold-rgb), 0); }
    60%  { opacity: 1; letter-spacing: 0.002em; filter: blur(0) brightness(1.05); text-shadow: 0 0 36px rgba(var(--gold-rgb), 0.28); }
    100% { opacity: 1; letter-spacing: -0.01em; filter: blur(0) brightness(1); text-shadow: 0 0 24px rgba(var(--gold-rgb), 0.18); }
  }
  @keyframes nhWordmarkBreath {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.06); }
  }

  /* Wordmark ember — small gold dot with breathing glow between the
     wordmark and tagline. Replaces the V198 horizontal rule. Reuses the
     existing .nh-rule DOM node so no markup change is needed. */
  #s-home .nh-rule {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 14px 2px rgba(var(--gold-rgb), 0.6),
                0 0 40px rgba(var(--gold-rgb), 0.35);
    margin: 24px auto 18px;
    animation: nhEmberBreathe 4s ease-in-out 900ms infinite;
    opacity: 0;
    animation-fill-mode: both;
  }
  @keyframes nhEmberBreathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.15); }
  }

  #s-home .nh-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 300;
    font-size: 19px; color: rgba(224, 220, 208, 0.55);
    line-height: 1.55;
    letter-spacing: 0.005em;
    max-width: 620px; margin: 0 auto;
    opacity: 0;
    animation: nhTaglineFade 900ms ease-out 1300ms forwards;
  }
  @keyframes nhTaglineFade { to { opacity: 1; } }
  #s-home .nh-tagline em { color: var(--gold); font-style: italic; }

  /* Bottom zone — grid row 3. Flex column stacking route cards (V199) and
     continue bar (V200) with 32px gap. Pinned to end of row. */
  #s-home .nh-bottom {
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 0;
  }

  /* ════════════════════════════════════════════════════════════════
     V199: THE TWO ROUTES — editorial route cards
     Freeflow (gold) + DNA Session (teal). Equal weight. Animated
     accent bars draw in on load. Hover lifts card + fills CTA pill.
     ════════════════════════════════════════════════════════════════ */

  #s-home .nh-routes {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    animation: studyRise 700ms var(--easing-standard) both;
    animation-delay: 200ms;
  }
  @keyframes studyRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #s-home .nh-route {
    --accent: var(--gold);
    --accent-rgb: var(--gold-rgb);
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 16px;
    padding: 28px 32px 24px;
    background: linear-gradient(180deg, rgba(30, 28, 24, 0.6), rgba(16, 16, 16, 0.75));
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 18px;
    cursor: pointer; text-align: left; color: inherit;
    overflow: hidden;
    transition: transform 420ms var(--easing-standard),
                border-color 300ms,
                box-shadow 420ms;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 30px 60px -40px rgba(0, 0, 0, 0.8);
    min-height: 200px;
    font-family: inherit;
  }
  /* V200: Start with Intent (gold) is the default — .nh-route--intent is a no-op class for semantic clarity. */
  #s-home .nh-route--intent {
    --accent: var(--gold);
    --accent-rgb: var(--gold-rgb);
  }
  /* V237/V238: Freeflow (Start anywhere) uses the brand's neutral
     warm-white (--t1) as its accent. V237's sand attempt read as
     "faded gold" against the gold intent card, which was worse than
     teal. Neutral cream differentiates by weight rather than hue:
     gold speaks loudly, cream whispers — one warm color on the surface,
     clean hierarchy. */
  #s-home .nh-route--freeflow {
    --accent: var(--t1);
    --accent-rgb: 224, 220, 208;
  }
  /* V239: Slight mute on freeflow title + CTA text so gold clearly leads.
     Title 0.95 → 0.82, CTA text solid → 0.82. Same cream hue, just dialed
     back a hair. Scoped to freeflow only — intent card unaffected. */
  #s-home .nh-route--freeflow .nh-route-title {
    color: rgba(var(--accent-rgb), 0.82);
  }
  #s-home .nh-route--freeflow .nh-route-cta {
    color: rgba(var(--accent-rgb), 0.82);
  }

  /* Top accent bar — draws in on load */
  #s-home .nh-route-accent {
    position: absolute; top: 0; left: 32px; right: 32px; height: 2px;
    background: linear-gradient(90deg, transparent,
      rgba(var(--accent-rgb), 0.65) 20%,
      rgba(var(--accent-rgb), 0.85) 50%,
      rgba(var(--accent-rgb), 0.65) 80%, transparent);
    transform: scaleX(0); transform-origin: left;
    animation: accentDraw 1100ms cubic-bezier(0.7, 0, 0.3, 1) 550ms forwards;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
  }
  #s-home .nh-route--freeflow .nh-route-accent { animation-delay: 700ms; }
  @keyframes accentDraw { to { transform: scaleX(1); } }

  /* Ambient corner glow */
  #s-home .nh-route::before {
    content: ''; position: absolute; inset: -1px; border-radius: 18px;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 80% 100%,
      rgba(var(--accent-rgb), 0.18), transparent 70%);
    opacity: 0.55; transition: opacity 500ms;
  }

  /* Noise veneer on card — kills gradient banding within card interior */
  #s-home .nh-route::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity: 0.04; mix-blend-mode: overlay;
  }

  #s-home .nh-route:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.38);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 40px 80px -30px rgba(0, 0, 0, 0.85),
                0 0 40px -10px rgba(var(--accent-rgb), 0.25);
  }
  #s-home .nh-route:hover::before { opacity: 1; }
  #s-home .nh-route:active { transform: translateY(-1px) scale(var(--press-scale)); }

  #s-home .nh-route:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo),
                0 30px 60px -40px rgba(0, 0, 0, 0.8);
  }

  #s-home .nh-route-head {
    display: flex; align-items: baseline; gap: 14px;
    width: 100%; position: relative; z-index: 2;
  }
  #s-home .nh-route-label {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.7);
  }

  #s-home .nh-route-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 400; font-style: italic;
    font-size: 38px; line-height: 1.1; letter-spacing: -0.015em;
    color: rgba(var(--accent-rgb), 0.95);
    position: relative; z-index: 2;
  }

  #s-home .nh-route-sub {
    font-family: 'Outfit', sans-serif; font-weight: 300;
    font-size: 14.5px; line-height: 1.55; letter-spacing: 0.005em;
    color: var(--t3);
    max-width: 360px;
    position: relative; z-index: 2;
    margin-top: -6px;
  }

  #s-home .nh-route-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 12px 20px 12px 22px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase;
    transition: background 220ms var(--easing-standard),
                color 220ms var(--easing-standard),
                border-color 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard);
    margin-top: auto;
    position: relative; z-index: 2;
  }
  #s-home .nh-route:hover .nh-route-cta {
    background: var(--accent); color: #0a0a0a;
    border-color: var(--accent);
    box-shadow: 0 8px 30px -8px rgba(var(--accent-rgb), 0.55);
  }
  #s-home .nh-route-arrow svg { width: 14px; height: 14px; transition: transform 200ms; }
  #s-home .nh-route:hover .nh-route-arrow svg { transform: translateX(3px); }

  /* Reduced motion — skip route animations, render final state */
  @media (prefers-reduced-motion: reduce) {
    #s-home .nh-routes,
    #s-home .nh-route-accent {
      animation: none !important;
    }
    #s-home .nh-route-accent { transform: scaleX(1); }
  }

  /* ════════════════════════════════════════════════════════════════
     V310: ROUTE CARDS — mockup-aligned redesign.
     Radio-dot prefix inline with title (filled gold for intent, hollow
     ring for freeflow). White titles for higher contrast. No bottom CTA
     pill — the dot + title carry the action affordance now.
     ════════════════════════════════════════════════════════════════ */
  #s-home .nh-route {
    min-height: 156px;
    padding: 22px 28px 24px;
    background: linear-gradient(180deg, rgba(18, 16, 14, 0.62), rgba(10, 10, 10, 0.78));
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* Title gets the radio dot inline via ::before. Intent = gold, Freeflow = white. */
  #s-home .nh-route-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 30px;
  }
  #s-home .nh-route--intent .nh-route-title { color: var(--gold); }
  #s-home .nh-route--freeflow .nh-route-title { color: var(--t1); }
  #s-home .nh-route-title::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    flex: 0 0 14px;
    background: transparent;
    transition: background 220ms, box-shadow 320ms, border-color 220ms;
  }
  /* Default state: both dots hollow with subtle accent ring. Light up on hover. */
  #s-home .nh-route--intent .nh-route-title::before {
    border: 1.5px solid rgba(var(--gold-rgb), 0.55);
  }
  #s-home .nh-route--freeflow .nh-route-title::before {
    border: 1.5px solid rgba(255, 255, 255, 0.55);
  }
  #s-home .nh-route--intent:hover .nh-route-title::before {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.85), 0 0 32px rgba(var(--gold-rgb), 0.35);
  }
  #s-home .nh-route--freeflow:hover .nh-route-title::before {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
  }
  /* Indent label + sub to align under the title text (past the 14px dot + 14px gap). */
  #s-home .nh-route-head { padding-left: 28px; }
  #s-home .nh-route-sub {
    color: var(--t2);
    font-size: 14px;
    max-width: 320px;
    margin-top: 2px;
    padding-left: 28px;
  }
  /* Drop the bottom CTA pill — the dot + title carry the action affordance now. */
  #s-home .nh-route-cta { display: none; }
  /* Soften the top accent bar — present but subtle to keep editorial cue without competing. */
  #s-home .nh-route-accent { opacity: 0.45; }

  /* V310: Brighter editorial text contrast to match the mockup — eyebrow,
     date, tagline pushed to full luminance so they read clearly over the
     photo. */
  #s-home .nh-eyebrow { color: var(--gold); opacity: 1; }
  #s-home .nh-date { color: var(--t1); opacity: 0.95; }
  /* V310 brightened the tagline to var(--t1); reverted to mockup's subtler
     cream@0.55 — "elegant but luxury pop" without competing with wordmark. */
  #s-home .nh-tagline { color: rgba(224, 220, 208, 0.55); }

  /* ════════════════════════════════════════════════════════════════
     V310: SOUND DESIGNER chip on desktop — the desktop duplicate pill
     lives inside .nh-bottom (.nh-doors is hidden on desktop, killing the
     mobile pill that lives inside it). Centered below routes.
     ════════════════════════════════════════════════════════════════ */
  #s-home .nocturne-home .nh-sd-pill--desktop {
    display: inline-flex;
    margin: 18px auto 0;
    padding: 11px 22px;
    background: rgba(10, 10, 10, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #s-home .nocturne-home .nh-sd-pill--desktop:hover {
    border-color: rgba(var(--gold-rgb), 0.30);
    background: rgba(14, 12, 10, 0.65);
  }
  /* Center the pill in .nh-bottom — flex column, all children centered. */
  #s-home .nh-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  #s-home .nh-bottom .nh-routes { width: 100%; }

  /* ════════════════════════════════════════════════════════════════
     V201: CONTINUE BAR — low-key horizontal pill strip below routes.
     Shows 2–3 most recent sessions with stage-dot color + title + meta,
     plus "All songs →" at the end. One-click resume. Full-width pill.
     ════════════════════════════════════════════════════════════════ */

  #s-home .nh-continue-bar {
    width: 100%; max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px;
    background: rgba(14, 14, 14, 0.4);
    border: 1px solid var(--dt-edge);
    border-radius: 999px;
    animation: studyRise 700ms var(--easing-standard) both;
    animation-delay: 380ms;
    overflow: hidden;
  }
  /* Hide the whole bar when empty (JS sets data-empty=true) */
  #s-home .nh-continue-bar[data-empty="true"] { display: none; }

  #s-home .nh-cb-label {
    flex-shrink: 0;
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.30em; text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.7);
    padding-right: 2px;
  }
  #s-home .nh-cb-item {
    flex-shrink: 1; min-width: 0;
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer; color: inherit;
    padding: 6px 10px; border-radius: 999px;
    transition: background 200ms var(--easing-standard),
                color 200ms var(--easing-standard);
    text-align: left;
    font-family: inherit;
  }
  #s-home .nh-cb-item:hover { background: rgba(var(--gold-rgb), 0.06); }
  #s-home .nh-cb-dot {
    flex-shrink: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--t4);
  }
  #s-home .nh-cb-dot.writing { background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5); }
  #s-home .nh-cb-dot.ready { background: var(--slate); box-shadow: 0 0 6px rgba(94, 136, 170, 0.4); }
  #s-home .nh-cb-dot.loved { background: var(--rose); box-shadow: 0 0 6px rgba(var(--rose-rgb), 0.4); }
  #s-home .nh-cb-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
    font-size: 15px; letter-spacing: -0.005em; color: var(--t2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
  }
  #s-home .nh-cb-item:hover .nh-cb-title { color: var(--t1); }
  #s-home .nh-cb-meta {
    flex-shrink: 0;
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--t4);
  }
  #s-home .nh-cb-item--active .nh-cb-meta { color: rgba(var(--gold-rgb), 0.7); }
  #s-home .nh-cb-sep {
    flex-shrink: 0;
    width: 1px; height: 14px; background: var(--dt-edge);
  }
  #s-home .nh-cb-spacer { flex: 1; min-width: 8px; }
  #s-home .nh-cb-all {
    flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--t3);
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 200ms, background 200ms;
  }
  #s-home .nh-cb-all span:last-child { transition: transform 200ms; }
  #s-home .nh-cb-all:hover { color: var(--gold); background: rgba(var(--gold-rgb), 0.06); }
  #s-home .nh-cb-all:hover span:last-child { transform: translateX(3px); }

  @media (prefers-reduced-motion: reduce) {
    #s-home .nh-continue-bar { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     V310: CONTINUE — bottom-left corner format.
     "• Continue - <title> →" — single most recent in-progress session.
     Drops the pill background; sits as a quiet eyebrow line.
     ════════════════════════════════════════════════════════════════ */
  #s-home .nh-continue-bar {
    position: absolute;
    left: 32px;
    bottom: 28px;
    width: auto; max-width: 420px; margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 8px;
    z-index: 4;
  }
  /* Single-item layout: gold dot · "Continue —" label · title · arrow.
     Hide every item beyond the first, plus the spacer + "All songs" link
     + per-item meta (stage · time). Keep the structure intact for the JS. */
  #s-home .nh-continue-bar .nh-cb-item ~ .nh-cb-item,
  #s-home .nh-continue-bar .nh-cb-sep,
  #s-home .nh-continue-bar .nh-cb-spacer,
  #s-home .nh-continue-bar .nh-cb-all,
  #s-home .nh-continue-bar .nh-cb-meta { display: none; }
  #s-home .nh-continue-bar .nh-cb-label {
    color: rgba(var(--gold-rgb), 0.85);
    padding: 0;
  }
  #s-home .nh-continue-bar .nh-cb-label::before {
    content: '• ';
    color: var(--gold);
  }
  #s-home .nh-continue-bar .nh-cb-label::after { content: ' —'; opacity: 0.6; }
  #s-home .nh-continue-bar .nh-cb-item {
    padding: 2px 4px;
    background: transparent;
    border-radius: 4px;
  }
  #s-home .nh-continue-bar .nh-cb-item:hover {
    background: rgba(var(--gold-rgb), 0.08);
  }
  #s-home .nh-continue-bar .nh-cb-item .nh-cb-dot { display: none; }
  #s-home .nh-continue-bar .nh-cb-title {
    color: var(--t1);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  #s-home .nh-continue-bar .nh-cb-item::after {
    content: '→';
    color: rgba(var(--gold-rgb), 0.85);
    margin-left: 8px;
    transition: transform 200ms;
  }
  #s-home .nh-continue-bar .nh-cb-item:hover::after { transform: translateX(3px); }

  /* Hide mobile-era elements that aren't part of V198 masthead */
  #s-home .nocturne-home .nh-line { display: none; }
  #s-home .nocturne-home .nh-eyebrow-mobile { display: none; }
  /* Mobile nh-doors and nh-continue live INSIDE the old structure — V199/V200 rebuild them in .nh-bottom */
  #s-home .nocturne-home .nh-doors { display: none; }
  #s-home .nocturne-home .nh-continue { display: none; }
  /* V310: Sound Designer pill is now shown on desktop too — see styling above. */
  /* V201: legacy inline continue bar is replaced by .nh-continue-bar pill strip on desktop */
  #s-home .nocturne-home #noctContinueBar { display: none; }
  /* V198: show editorial top row, hide mobile floating history button on desktop */
  #s-home .nocturne-home .nh-top-editorial { display: flex; }
  #s-home .nocturne-home .nh-history-mobile { display: none; }
  /* V198: show rule + tagline on desktop (mobile hides them) */
  #s-home .nocturne-home .nh-rule { display: block; }
  #s-home .nocturne-home .nh-tagline { display: block; }
  /* V198: show aurora + embers on desktop (mobile hides them) */
  #s-home .nocturne-home .nh-aurora { display: block; }
  #s-home .nocturne-home .nh-embers { display: block; }
  /* V198: hide the mobile .nh-particles on desktop — embers replace it */
  #s-home .nocturne-home .nh-particles { display: none; }
  /* V199: show route cards on desktop (mobile uses .nh-doors) */
  #s-home .nocturne-home .nh-routes { display: grid; }

  /* Reduced-motion — skip all Nocturne animations, render final state */
  @media (prefers-reduced-motion: reduce) {
    #s-home .nh-aurora::before,
    #s-home .nh-embers span,
    #s-home .nocturne-home .nh-wordmark,
    #s-home .nocturne-home .nh-wordmark::after,
    #s-home .nh-rule,
    #s-home .nh-tagline {
      animation: none !important;
    }
    #s-home .nh-rule { opacity: 1; }
    #s-home .nh-tagline { opacity: 1; }
    #s-home .nocturne-home .nh-wordmark { opacity: 1; filter: none; }
  }

  /* ════════════════════════════════════════════════════════════════
     V311: HOME REDESIGN — entry panel (DNA + Freeflow + Sound Designer
     chip) replaces the V199/V310 .nh-routes + .nh-sd-pill--desktop pair.
     Founder-approved tweak values: room visibility 0.64, wordmark gold,
     DNA/Freeflow tags on, SD chip on. Source: docs/design/Desktop
     homepage/HANDOFF.md.
     ════════════════════════════════════════════════════════════════ */

  /* Topscrim — 200px gradient darken at top of stage. Lets eyebrow + history
     read cleanly over the lamp without collision (mockup spec, was missing).
     Photo opacity 0.64 lives on .home-bg-desktop now; mobile keeps photo-mask. */
  #s-home .nh-photo-mask { display: none; }
  #s-home .nh-room-veil {
    display: block;
    /* z-index 1 sits above photo (0) and below layout content (2) — was
       z-index: 5 which painted OVER the eyebrow row, dimming it. */
    position: absolute; top: 0; left: 0; right: 0; height: 220px;
    pointer-events: none; z-index: 1;
    background: linear-gradient(180deg,
      rgba(5, 5, 5, 0.92) 0%,
      rgba(5, 5, 5, 0.88) 35%,
      rgba(5, 5, 5, 0.65) 60%,
      rgba(5, 5, 5, 0.25) 80%,
      rgba(5, 5, 5, 0.00) 100%);
  }

  /* Entry panel — 2-column card grid + SD chip spanning both columns.
     Narrower than 1040px so cards don't sprawl; bigger bottom margin
     pulls cards + SD chip up toward the reference image position. */
  #s-home .stz-entry-panel {
    width: clamp(640px, 60vw, 920px);
    margin: 0 auto 180px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    align-items: stretch;
    position: relative; z-index: 2;
  }
  #s-home .stz-entry-card {
    position: relative; min-height: 172px; padding: 30px 32px;
    border-radius: 22px; border: 1px solid rgba(241, 238, 231, 0.22);
    /* Polished-glass recipe: warm gold light-spill from top + dark glass body */
    background:
      radial-gradient(circle at 50% -12%, rgba(255, 232, 169, 0.16), transparent 35%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.18)),
      rgba(8, 7, 5, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 160, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.60),
      0 18px 50px rgba(0, 0, 0, 0.45),
      0 0 42px rgba(var(--gold-rgb), 0.08);
    color: var(--t1);
    display: flex; align-items: center; justify-content: center; gap: 18px;
    text-align: left; cursor: pointer; overflow: hidden;
    font-family: inherit;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform 220ms var(--easing-standard),
                border-color 220ms var(--easing-standard),
                background 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard);
  }
  /* Top-edge hairline — the "shimmer" that makes the card feel like
     polished glass catching light. Inset 16% from each edge so the line
     fades to nothing at the corners. */
  #s-home .stz-entry-card::after {
    content: ''; position: absolute;
    left: 16%; right: 16%; top: 0; height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  }
  #s-home .stz-entry-card:hover {
    transform: translateY(-2px);
    border-color: rgba(241, 238, 231, 0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 160, 0.20),
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 0 56px rgba(var(--gold-rgb), 0.12);
  }
  #s-home .stz-entry-card:active { transform: translateY(-1px) scale(var(--press-scale, 0.99)); }
  #s-home .stz-entry-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo),
                0 18px 50px rgba(0, 0, 0, 0.45);
  }

  /* DNA card — gold-tinted active variant */
  #s-home .stz-entry-card--active {
    border-color: rgba(var(--gold-rgb), 0.55);
    background:
      radial-gradient(ellipse 80% 60% at 30% 30%, rgba(var(--gold-rgb), 0.07), transparent 70%),
      linear-gradient(180deg, rgba(var(--gold-rgb), 0.045), rgba(0, 0, 0, 0.20)),
      rgba(8, 7, 5, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 160, 0.10),
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 0 36px rgba(var(--gold-rgb), 0.10);
  }
  #s-home .stz-entry-card--active:hover {
    border-color: rgba(var(--gold-rgb), 0.80);
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 160, 0.14),
      0 28px 70px rgba(0, 0, 0, 0.60),
      0 0 52px rgba(var(--gold-rgb), 0.20);
  }

  /* Radio orb — hollow ring; fills on hover (gold for DNA, cream for Freeflow) */
  #s-home .stz-entry-orb {
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 999px; position: relative;
    border: 1.5px solid rgba(241, 238, 231, 0.45);
    background: transparent;
    transition: border-color 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard),
                background 220ms var(--easing-standard);
  }
  #s-home .stz-entry-orb::after {
    content: ''; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: transparent;
    transition: background 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard);
  }
  #s-home .stz-entry-card--active .stz-entry-orb {
    border-color: rgba(var(--gold-rgb), 0.65);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.20);
  }
  #s-home .stz-entry-card--active:hover .stz-entry-orb {
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.65);
  }
  #s-home .stz-entry-card--active:hover .stz-entry-orb::after {
    background: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.80);
  }
  #s-home .stz-entry-card:not(.stz-entry-card--active):hover .stz-entry-orb {
    border-color: rgba(241, 238, 231, 0.85);
    box-shadow: 0 0 18px rgba(241, 238, 231, 0.30);
  }
  #s-home .stz-entry-card:not(.stz-entry-card--active):hover .stz-entry-orb::after {
    background: var(--t1);
    box-shadow: 0 0 10px rgba(241, 238, 231, 0.55);
  }

  /* DNA / Freeflow micro-tag (top-right of each card) */
  #s-home .stz-entry-tag {
    position: absolute; top: 14px; right: 18px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'DM Mono', monospace; font-weight: 400;
    font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(241, 238, 231, 0.32); pointer-events: none;
    transition: color 220ms var(--easing-standard);
  }
  #s-home .stz-entry-tag::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(241, 238, 231, 0.40);
    transition: background 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard);
  }
  #s-home .stz-entry-card--active .stz-entry-tag { color: rgba(var(--gold-rgb), 0.55); }
  #s-home .stz-entry-card--active .stz-entry-tag::before { background: rgba(var(--gold-rgb), 0.65); }
  #s-home .stz-entry-card--active:hover .stz-entry-tag { color: rgba(var(--gold-rgb), 0.85); }
  #s-home .stz-entry-card--active:hover .stz-entry-tag::before {
    background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.65);
  }
  #s-home .stz-entry-card:not(.stz-entry-card--active):hover .stz-entry-tag { color: rgba(241, 238, 231, 0.70); }
  #s-home .stz-entry-card:not(.stz-entry-card--active):hover .stz-entry-tag::before {
    background: var(--t1); box-shadow: 0 0 8px rgba(241, 238, 231, 0.55);
  }

  /* Copy block: Cormorant italic title + Outfit subtitle */
  #s-home .stz-entry-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  #s-home .stz-entry-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-style: italic; font-weight: 400;
    font-size: 38px; line-height: 1.05; letter-spacing: -0.005em;
    color: var(--t1);
  }
  #s-home .stz-entry-card--active .stz-entry-title { color: var(--gold); }
  #s-home .stz-entry-card--active:hover .stz-entry-title {
    color: #E8C070; text-shadow: 0 0 28px rgba(var(--gold-rgb), 0.28);
  }
  #s-home .stz-entry-subtitle {
    font-family: 'Outfit', sans-serif; font-weight: 400;
    font-size: 14.5px; line-height: 1.55;
    color: rgba(224, 220, 208, 0.55); max-width: 38ch;
  }

  /* Sound Designer chip — DM Mono gold, full-width row inside the grid */
  #s-home .stz-sound-chip {
    grid-column: 1 / -1; justify-self: center;
    margin-top: 22px; min-width: 0;
    height: 52px; padding: 0 26px; border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    background: rgba(8, 7, 5, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 14px 32px rgba(0, 0, 0, 0.30);
    color: rgba(var(--gold-rgb), 0.78);
    font-family: 'DM Mono', monospace; font-weight: 400;
    font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center; gap: 18px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: border-color 220ms var(--easing-standard),
                color 220ms var(--easing-standard),
                box-shadow 220ms var(--easing-standard);
  }
  #s-home .stz-sound-chip:hover {
    border-color: rgba(var(--gold-rgb), 0.55); color: #E8C070;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 32px rgba(0, 0, 0, 0.35),
      0 0 28px rgba(var(--gold-rgb), 0.18);
  }
  #s-home .stz-sound-icon {
    width: 18px; height: 16px;
    display: inline-flex; align-items: end; gap: 2px;
    color: rgba(var(--gold-rgb), 0.85);
  }
  #s-home .stz-sound-icon span {
    width: 2.5px; border-radius: 999px; background: currentColor; opacity: 0.95;
  }
  #s-home .stz-sound-icon span:nth-child(1) { height: 6px; }
  #s-home .stz-sound-icon span:nth-child(2) { height: 11px; }
  #s-home .stz-sound-icon span:nth-child(3) { height: 15px; }
  #s-home .stz-sound-icon span:nth-child(4) { height: 8px; }
  #s-home .stz-sound-arrow {
    color: rgba(var(--gold-rgb), 0.85); font-size: 15px; line-height: 1;
    transition: transform 220ms var(--easing-standard),
                color 220ms var(--easing-standard);
  }
  #s-home .stz-sound-chip:hover .stz-sound-arrow { transform: translateX(3px); color: #E8C070; }

  /* Short-viewport overrides — mockup is a fixed 1920×1080 stage; on a
     typical 1366×768 laptop with browser chrome we have ~620px tall.
     Tightens the chunky dimensions AND pushes the masthead toward the top
     of its 1fr row so the wordmark isn't sitting on top of the cards. */
  @media (max-height: 860px) {
    #s-home .nocturne-home .nh-wordmark {
      font-size: clamp(56px, 11vh, 104px);
    }
    /* Masthead — sit near top of 1fr row, not centered, so the wordmark
       has breathing room above cards instead of crowding them. */
    #s-home .nh-masthead {
      align-self: start;
      padding-top: clamp(8px, 2vh, 32px);
    }
    #s-home .stz-entry-panel {
      width: clamp(600px, 58vw, 860px);
      margin: 0 auto clamp(56px, 11vh, 132px);
    }
    #s-home .stz-entry-card {
      min-height: 148px;
      padding: 22px 28px;
      border-radius: 18px;
    }
    #s-home .stz-entry-title {
      font-size: clamp(26px, 3.6vh, 34px);
    }
    #s-home .stz-entry-subtitle {
      font-size: 13.5px;
    }
    #s-home .stz-sound-chip {
      margin-top: 12px;
      height: 44px;
      font-size: 10.5px;
    }
  }

  /* Eyebrow / history contrast bump for the room backdrop */
  #s-home .nh-eyebrow {
    color: rgba(var(--gold-rgb), 0.88);
    font-weight: 400;
  }
  #s-home .nh-date { color: rgba(224, 220, 208, 0.82); font-weight: 400; }
  #s-home .nocturne-home .nh-history {
    border-color: rgba(var(--gold-rgb), 0.45);
    color: rgba(var(--gold-rgb), 0.85);
  }
  #s-home .nocturne-home .nh-history:hover {
    border-color: var(--gold);
    color: #E8C070;
    background: rgba(var(--gold-rgb), 0.10);
  }

  /* ════════════════════════════════════════════════════════════════
     V202: SESSION CONTEXT STRIP (desktop ≥1024px, session-active only)
     Anchored at top of chat well. Replaces the mobile nav/ctx/dna bar
     stack — phase + title + genre/structure + status in a single line.
     Prototype-faithful port from lines 740-760.

     Mobile-oriented bars at desktop session:
       .v9-nav, .v9-ctx-bar, .v9-dna-bar, #v9ProgressDots, #v9CollapsedStrip
       are all hidden — the context strip + top bar + Song Brain cover
       every piece of information they carried, with zero redundancy.
     ════════════════════════════════════════════════════════════════ */

  body.session-active #s-session .v9-nav,
  body.session-active #s-session .v9-ctx-bar,
  body.session-active #s-session .v9-dna-bar,
  body.session-active #s-session #v9ProgressDots,
  body.session-active #s-session #v9CollapsedStrip {
    display: none !important;
  }

  /* Context strip — stays hidden except on desktop session screen */
  .center-context { display: none; }
  body.session-active #s-session .center-context {
    display: flex;
    align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 22px 40px 18px;
    border-bottom: 1px solid var(--dt-edge);
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.4), transparent);
  }
  /* Hide the whole strip when empty (no session state yet) */
  body.session-active #s-session .center-context[data-empty="true"] {
    display: none;
  }

  .ctx-phase {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.70);
    padding: 5px 10px;
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 999px;
    white-space: nowrap;
  }
  .ctx-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--t1);
    letter-spacing: 0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 380px;
  }
  .ctx-divider {
    width: 1px; height: 16px; background: var(--dt-edge);
    flex-shrink: 0;
  }
  .ctx-meta {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--t3);
    white-space: nowrap;
  }
  .ctx-meta.ctx-meta--status { color: rgba(var(--gold-rgb), 0.65); }

  /* ── DESKTOP HOME — atmospheric Nocturne masthead (V198) ──
     Mobile Nocturne (#nocturneHome) is reused and augmented for desktop via
     media-query overrides. The legacy #desktopHome block is retired. */
  #s-home #homeMain { display: none !important; }
  #s-home #desktopHome { display: none !important; }
  #s-home { left: 0 !important; overflow: hidden !important; }

  /* Hide sidebar when on home screen */
  body.on-home .tabbar { display: none !important; }
  body.on-home #s-home { left: 0 !important; }

  /* ── V194: Persistent Desktop Top Bar (upgraded from V162 E4) ──
     Three-zone grid: wordmark (left) | centralized nav (center) | icon buttons + user chip (right).
     Zone separators via border-right/border-left on the left/right zones.
     Background + border adapt by context (on-home / session / other). */
  #dtTopBar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    z-index: 200;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s var(--easing-standard),
                border-color 0.4s var(--easing-standard);
    pointer-events: none; /* let interior elements opt-in */
  }
  #dtTopBar > * { pointer-events: auto; }
  .dt-topbar-inner {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
    align-items: center;
    height: 100%;
  }
  .dt-topbar-left {
    display: flex; align-items: center; gap: 20px;
    padding: 0 28px;
    height: 100%;
    justify-self: start;
    border-right: 1px solid transparent;
    transition: border-color 0.4s var(--easing-standard);
  }
  .dt-topbar-center {
    display: flex; align-items: center; justify-content: center; gap: 28px;
    padding: 0 24px;
    min-width: 0;
    justify-self: center;
  }
  .dt-topbar-right {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 0 28px;
    height: 100%;
    justify-self: end;
    border-left: 1px solid transparent;
    transition: border-color 0.4s var(--easing-standard);
  }

  /* ── Left zone: wordmark + mark-dot ── */
  .dt-topbar-mark {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 300;
    font-size: 22px; letter-spacing: 0.01em;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(var(--gold-rgb), 0.30);
    background: none; border: none; padding: 0;
    transition: opacity 0.2s ease;
  }
  .dt-topbar-mark:hover { opacity: 0.85; }
  .dt-topbar-mark:active { transform: scale(var(--press-scale)); transition: transform var(--press-dur) ease; }
  .dt-topbar-mark .mark-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.65);
  }

  /* ── Center zone: nav items (refined DM Mono with gold-dot active indicator) ── */
  .dt-nav-item {
    font-family: 'DM Mono', monospace;
    font-size: 10px; font-weight: 400;
    color: var(--t1);
    letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer;
    padding: 6px 2px;
    position: relative;
    background: none; border: none;
    transition: color var(--state-dur) var(--easing-standard);
    user-select: none;
  }
  .dt-nav-item:hover { color: var(--gold); }
  .dt-nav-item.active { color: var(--gold); }
  .dt-nav-item.active::after {
    content: '';
    position: absolute; bottom: -3px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.70);
  }

  /* V234: "New" dropdown — triggers live inline with other nav items.
     Menu opens below the label, dismisses on outside click / item select. */
  .dt-nav-has-menu {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .dt-nav-chev {
    width: 10px; height: 10px;
    opacity: 0.55;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity var(--state-dur) var(--easing-standard);
  }
  .dt-nav-has-menu:hover .dt-nav-chev { opacity: 0.9; }
  .dt-nav-has-menu.open .dt-nav-chev { transform: rotate(180deg); opacity: 1; }
  .dt-nav-has-menu.open { color: var(--t1); }

  .dt-nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 300px;
    background: var(--s1);
    border: 1px solid var(--b2);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
    padding: 6px;
    z-index: 600;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1);
  }
  .dt-nav-has-menu.open .dt-nav-menu {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .dt-nav-menu-item {
    display: block; width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: transparent;
    border: none; border-radius: 10px;
    cursor: pointer;
    color: var(--t2);
    transition: background var(--state-dur) var(--easing-standard);
    -webkit-tap-highlight-color: transparent;
  }
  .dt-nav-menu-item:hover { background: rgba(255,255,255,0.035); }
  .dt-nav-menu-item:active { background: rgba(var(--gold-rgb), 0.06); }
  .dt-nav-menu-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--t1);
    margin-bottom: 3px;
  }
  .dt-nav-menu-sub {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--t4);
  }

  /* Session label lives inside center zone, hidden by default */
  .dt-topbar-label {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300; font-style: italic;
    font-size: 17px;
    color: var(--t1);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 420px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
  }
  .dt-topbar-label.show { opacity: 1; display: inline-block; }
  .dt-topbar-label .dt-label-phase {
    color: var(--gold); opacity: 0.75;
    margin-left: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    font-style: normal;
  }
  .dt-topbar-label .dt-label-sep {
    color: var(--t4); opacity: 0.5;
    margin: 0 10px;
  }

  /* ── Right zone: icon buttons + user chip ── */
  .dt-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--t3);
    cursor: pointer;
    transition: background var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                color var(--state-dur) var(--easing-standard);
  }
  .dt-icon-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--t1);
  }
  .dt-icon-btn:active {
    transform: scale(var(--press-scale));
    transition: transform var(--press-dur) ease;
  }
  .dt-icon-btn svg { width: 16px; height: 16px; }

  .dt-user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard);
  }
  .dt-user-chip:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(var(--gold-rgb), 0.18);
  }
  .dt-user-chip:active { transform: scale(var(--press-scale)); transition: transform var(--press-dur) ease; }
  .dt-user-chip .avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--gold-rgb),0.35), rgba(var(--gold-rgb),0.12));
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: 12px; color: var(--gold);
    font-style: italic;
  }
  .dt-user-chip .name {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t2);
  }
  /* V233: Two states for the top-right chip.
     Signed in → avatar circle only (no name); chip loses its pill background
     so it reads as an avatar icon, not a labeled chip.
     Signed out → no avatar; just the "Sign in" text inside the pill. */
  .dt-user-chip.signed-in {
    padding: 4px;
    background: transparent;
    border-color: transparent;
    gap: 0;
  }
  .dt-user-chip.signed-in:hover {
    background: transparent;
    border-color: transparent;
  }
  .dt-user-chip.signed-in:hover .avatar {
    border-color: rgba(var(--gold-rgb), 0.55);
  }
  .dt-user-chip.signed-in .name { display: none !important; }
  .dt-user-chip.signed-out { padding: 7px 16px; gap: 0; }
  .dt-user-chip.signed-out .avatar { display: none !important; }
  .dt-user-chip.signed-out .name { color: var(--gold); }

  /* ── State: ON HOME — fully transparent, no zone separators ── */
  body.on-home #dtTopBar {
    background: transparent;
    border-bottom-color: transparent;
  }
  body.on-home .dt-topbar-left,
  body.on-home .dt-topbar-right {
    border-color: transparent;
  }
  body.on-home .dt-topbar-label { display: none; }

  /* ── State: SESSION ACTIVE — Tier 3 blur, nav dims, song label visible ── */
  body.session-active #dtTopBar {
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--dt-edge);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }
  body.session-active .dt-topbar-left,
  body.session-active .dt-topbar-right {
    border-color: var(--dt-edge);
  }
  /* Hide nav items when in session (label takes over center) */
  body.session-active .dt-nav-item {
    opacity: 0.35;
    transition: opacity 0.3s ease;
  }
  body.session-active .dt-topbar-center:hover .dt-nav-item {
    opacity: 1;
  }

  /* ── State: VAULT/LIBRARY/PROFILE — Tier 3 blur, nav fully visible ── */
  body:not(.on-home):not(.session-active) #dtTopBar {
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--dt-edge);
  }
  body:not(.on-home):not(.session-active) .dt-topbar-left,
  body:not(.on-home):not(.session-active) .dt-topbar-right {
    border-color: var(--dt-edge);
  }

  /* ═══════════════════════════════════════════════════════════════
     V236: VAULT PANEL — slide-in drawer for saved material (DNA /
     Sound Prompts / Concepts). Desktop-only. Renders as an overlay
     when the user is mid-session; outside a session the top-nav Vault
     goes to the full #s-hub page instead. Data source identical to
     the full page (clibGet / spLibGet / dnaPresetsGet). */
  .vault-scrim{
    display:block;  /* V245: override global display:none on desktop */
    position:fixed;inset:0;z-index:1500;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;pointer-events:none;
    transition:opacity 300ms var(--easing-standard);
  }
  .vault-scrim.show{opacity:1;pointer-events:auto}

  .vault-panel{
    position:fixed;top:0;right:0;bottom:0;width:min(560px, 92vw);z-index:1600;
    background:var(--dt-surface);
    border-left:1px solid var(--dt-edge);
    box-shadow:-40px 0 120px rgba(0,0,0,0.5);
    transform:translateX(100%);
    transition:transform 380ms var(--easing-standard);
    display:flex;flex-direction:column;
  }
  .vault-panel.show{transform:translateX(0)}

  .vp-head{
    padding:28px 32px 18px;border-bottom:1px solid var(--dt-edge);
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  }
  .vp-head-l h2{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:40px;line-height:1;color:var(--t1);letter-spacing:-0.01em;
    margin:0;
  }
  .vp-head-l .vp-sub{
    font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;
    color:var(--t3);margin-top:10px;
  }
  .vp-close{
    background:none;border:1px solid var(--dt-edge);cursor:pointer;
    width:34px;height:34px;border-radius:50%;color:var(--t2);
    display:flex;align-items:center;justify-content:center;
    transition:all 160ms;
    padding:0;
  }
  .vp-close:hover{border-color:rgba(var(--gold-rgb),0.40);color:var(--gold)}
  .vp-close svg{width:14px;height:14px}

  .vp-tabs{
    display:flex;gap:2px;padding:0 32px;
    border-bottom:1px solid var(--dt-edge);
    font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  }
  .vp-tab{
    background:none;border:none;cursor:pointer;
    padding:14px 14px 12px;color:var(--t3);position:relative;
    font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
    transition:color 160ms;
    display:flex;align-items:center;gap:8px;
  }
  .vp-tab:hover{color:var(--t1)}
  .vp-tab.active{color:var(--gold)}
  .vp-tab.active::after{
    content:'';position:absolute;left:14px;right:14px;bottom:-1px;
    height:2px;background:var(--gold);
    box-shadow:0 0 8px rgba(var(--gold-rgb),0.55);
  }
  .vp-tab .count{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:12px;letter-spacing:0;text-transform:none;
    color:var(--t4);
  }
  .vp-tab.active .count{color:rgba(var(--gold-rgb),0.75)}

  .vp-toolbar{
    padding:14px 32px;display:flex;gap:10px;align-items:center;
    border-bottom:1px solid var(--dt-edge);
  }
  .vp-search{
    flex:1;padding:9px 14px 9px 34px;
    background:rgba(255,255,255,0.02);border:1px solid var(--dt-edge);
    border-radius:999px;color:var(--t1);
    font-family:'Outfit',sans-serif;font-weight:300;font-size:13px;outline:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='1.5'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat:no-repeat;background-position:12px center;background-size:13px 13px;
  }
  .vp-search:focus{border-color:rgba(var(--gold-rgb),0.35)}
  .vp-add{
    background:rgba(var(--gold-rgb),0.10);border:1px solid rgba(var(--gold-rgb),0.35);
    color:var(--gold);cursor:pointer;
    width:36px;height:36px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    transition:all 160ms;padding:0;
  }
  .vp-add:hover{background:rgba(var(--gold-rgb),0.20)}
  .vp-add svg{width:14px;height:14px}

  .vp-body{flex:1;overflow-y:auto;padding:18px 0 24px;scrollbar-width:thin}

  .vp-empty{
    padding:50px 32px;text-align:center;
    font-family:'Outfit',sans-serif;font-weight:300;font-size:14px;
    color:var(--t4);font-style:italic;line-height:1.55;
  }

  .vp-item{
    padding:14px 32px;display:flex;gap:14px;align-items:flex-start;
    border-left:2px solid transparent;cursor:pointer;
    transition:background-color 160ms, border-color 160ms;
  }
  .vp-item:hover{background:rgba(var(--gold-rgb),0.035);border-left-color:rgba(var(--gold-rgb),0.45)}

  .vp-item-kind{
    flex:0 0 auto;width:32px;height:32px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.03);color:var(--t2);
  }
  .vp-item-kind svg{width:15px;height:15px}
  .vp-item[data-kind="concept"] .vp-item-kind{background:rgba(var(--gold-rgb),0.09);color:var(--gold)}
  .vp-item[data-kind="sound"] .vp-item-kind{background:rgba(var(--teal-rgb),0.09);color:var(--teal)}
  .vp-item[data-kind="dna"] .vp-item-kind{background:rgba(var(--dusk-rgb,94,80,140),0.10);color:var(--dusk,#8678b6)}

  .vp-item-body{flex:1;min-width:0}
  .vp-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
  .vp-item-title{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:17px;color:var(--t1);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    flex:1;min-width:0;
  }
  .vp-item:hover .vp-item-title{color:var(--gold)}
  .vp-item-date{
    flex:0 0 auto;
    font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--t4);
  }
  .vp-item-text{
    font-family:'Outfit',sans-serif;font-weight:300;font-size:13px;line-height:1.55;
    color:var(--t3);margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .vp-item-snippet{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:14px;line-height:1.55;color:var(--t2);
    padding-left:10px;border-left:1px solid var(--dt-edge);
    margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .vp-item-meta{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .vp-item-chip{
    font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.22em;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;
    background:rgba(255,255,255,0.025);border:1px solid var(--dt-edge);
    color:var(--t3);
  }
  .vp-pane{display:none}
  .vp-pane.active{display:block}

  /* ═══════════════════════════════════════════════════════════════
     V237: LIBRARY GALLERY — editorial desktop treatment.
     Hides the mobile library surface children and renders a gallery
     inside #s-library > .lib-wrap. Reads from the same getSessions()
     data as the mobile list — no data fork, no duplicate truth. */

  /* Hide the mobile library surface on desktop — everything that's not
     the new .lib-wrap gallery is hidden here. Mobile untouched at <1024. */
  #s-library > *:not(.lib-wrap):not(#selectActionBar) { display: none !important; }
  #s-library > .lib-wrap { display: block; }
  #s-library {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--gold-rgb),0.06), transparent 70%),
      var(--bg);
  }

  .lib-wrap { max-width: 1320px; margin: 0 auto; padding: 48px 60px 120px; }

  /* Header — 80px Cormorant italic, gold em with hairline underglow */
  .lib-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
    margin-bottom: 40px; padding-bottom: 24px;
    border-bottom: 1px solid var(--dt-edge);
  }
  .lib-head h1 {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 80px; line-height: 0.95; color: var(--t1); letter-spacing: -0.01em;
    margin: 0;
  }
  .lib-head h1 em { color: var(--gold); font-style: italic; position: relative; }
  .lib-head h1 em::after {
    content: ''; position: absolute; left: 4%; right: -2%; bottom: 8px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.55), transparent);
  }
  .lib-metrics { display: flex; gap: 36px; margin-top: 18px; }
  .lib-metric { display: flex; flex-direction: column; gap: 4px; }
  .lib-metric .num {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 28px; color: var(--t1); line-height: 1;
  }
  .lib-metric .num.gold { color: var(--gold); }
  .lib-metric .num.rose { color: var(--rose); }
  .lib-metric .lbl {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--t4);
  }

  /* Tools row — search + filter chips + grid/stack view toggle */
  .lib-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  .lib-search {
    width: 280px; padding: 10px 14px 10px 36px;
    background: rgba(255,255,255,0.02); border: 1px solid var(--dt-edge);
    border-radius: 999px; color: var(--t1);
    font-family: 'Outfit', sans-serif; font-weight: 300; font-size: 13px; outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='1.5'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat: no-repeat; background-position: 12px center; background-size: 14px 14px;
    transition: all 160ms;
  }
  .lib-search:focus { border-color: rgba(var(--gold-rgb),0.35); background-color: rgba(var(--gold-rgb),0.03); }
  .lib-controls { display: flex; gap: 12px; align-items: center; }
  .lib-filters { display: flex; gap: 2px; padding: 3px; background: var(--dt-raised); border-radius: 999px; border: 1px solid var(--dt-edge); }
  .lib-filter {
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    background: none; border: none; cursor: pointer;
    padding: 7px 14px; border-radius: 999px; color: var(--t3);
    transition: all 150ms;
  }
  .lib-filter:hover { color: var(--t1); }
  .lib-filter.active { background: rgba(var(--gold-rgb),0.12); color: var(--gold); }
  .lib-view { display: flex; gap: 2px; padding: 3px; background: var(--dt-raised); border-radius: 8px; border: 1px solid var(--dt-edge); }
  .lib-view button {
    background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px;
    color: var(--t3); display: flex; align-items: center; justify-content: center;
    transition: all 150ms;
  }
  .lib-view button svg { width: 14px; height: 14px; }
  .lib-view button.active { background: rgba(var(--gold-rgb),0.12); color: var(--gold); }
  .lib-view button:hover { color: var(--t1); }

  /* Featured hero card */
  .lib-hero {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
    margin-bottom: 64px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--dt-edge); background: var(--dt-surface);
    min-height: 340px; cursor: pointer;
    transition: border-color 300ms; position: relative;
  }
  .lib-hero:hover { border-color: rgba(var(--gold-rgb),0.28); }
  .lib-hero-art {
    position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 70% 30%, rgba(var(--rose-rgb),0.22), transparent 55%),
      radial-gradient(circle at 30% 80%, rgba(var(--gold-rgb),0.14), transparent 60%),
      linear-gradient(135deg, #1a1413, #0c0a0a);
  }
  .lib-hero-art::after {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0%, transparent 1%),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 1%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 1%);
    background-size: 3px 3px, 5px 5px, 7px 7px;
    opacity: 0.4;
  }
  .lib-hero-mark {
    position: absolute; top: 24px; left: 24px;
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(var(--gold-rgb),0.75);
    display: flex; align-items: center; gap: 10px;
  }
  .lib-hero-mark::before { content: ''; width: 24px; height: 1px; background: rgba(var(--gold-rgb),0.55); }
  .lib-hero-lyric {
    position: absolute; inset: auto 32px 28px 32px;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 24px; line-height: 1.4; color: rgba(224,220,208,0.92);
    letter-spacing: 0.005em;
  }
  .lib-hero-lyric::before {
    content: '\201C'; font-size: 72px; color: rgba(var(--gold-rgb),0.55);
    position: absolute; top: -40px; left: -20px; font-family: 'Cormorant Garamond', serif;
  }
  .lib-hero-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
  .lib-hero-eyebrow {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(var(--gold-rgb),0.7);
  }
  .lib-hero-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 52px; line-height: 1.0; color: var(--t1); letter-spacing: -0.01em;
    margin: 12px 0 22px;
  }
  .lib-hero-meta {
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t3); line-height: 1.8;
  }
  .lib-hero-meta .sep { color: var(--t4); margin: 0 10px; }
  .lib-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .lib-chip {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 999px;
    border: 1px solid var(--dt-edge); color: var(--t2);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .lib-chip.gold { border-color: rgba(var(--gold-rgb),0.35); color: var(--gold); background: rgba(var(--gold-rgb),0.05); }
  .lib-chip.rose { border-color: rgba(var(--rose-rgb),0.30); color: var(--rose); background: rgba(var(--rose-rgb),0.05); }
  .lib-hero-cta {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    padding: 10px 18px; border-radius: 999px;
    background: rgba(var(--gold-rgb),0.10); border: 1px solid rgba(var(--gold-rgb),0.40);
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold); cursor: pointer;
    transition: all 180ms;
  }
  .lib-hero-cta:hover { background: rgba(var(--gold-rgb),0.18); }

  /* Section headers */
  .lib-section { margin-bottom: 56px; }
  .lib-section[hidden] { display: none; }
  .lib-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 22px; padding-bottom: 14px;
    border-bottom: 1px solid var(--dt-edge);
  }
  .lib-sec-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 32px; color: var(--t1); letter-spacing: -0.005em;
    display: flex; align-items: baseline; gap: 14px;
    margin: 0;
  }
  .lib-sec-title .count {
    font-family: 'DM Mono', monospace; font-style: normal; font-size: 11px;
    letter-spacing: 0.24em; color: var(--t4);
  }
  .lib-sec-sub {
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--t4);
  }

  /* Card grid */
  .lib-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }
  .song-card {
    position: relative; background: var(--dt-surface);
    border: 1px solid var(--dt-edge); border-radius: 12px;
    padding: 22px 22px 18px; cursor: pointer;
    display: flex; flex-direction: column; gap: 14px; min-height: 220px;
    transition: border-color 260ms var(--easing-standard), transform 260ms var(--easing-standard), background-color 260ms;
    overflow: hidden;
  }
  .song-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    background: var(--stage-color, var(--t4));
    opacity: 0.85; transition: width 260ms var(--easing-standard);
  }
  .song-card:hover {
    border-color: rgba(var(--gold-rgb),0.30);
    background: var(--dt-raised);
    transform: translateY(-2px);
  }
  .song-card:hover::before { width: 5px; }
  .song-card[data-stage="ready"] { --stage-color: var(--slate); }
  .song-card[data-stage="writing"] { --stage-color: var(--gold); }
  .song-card[data-stage="loved"] { --stage-color: var(--rose); }
  .song-card[data-stage="archive"] { --stage-color: var(--t4); }

  .lib-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .lib-card-stage {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--stage-color); display: flex; align-items: center; gap: 7px;
  }
  .lib-card-stage .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--stage-color);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.0);
  }
  .song-card[data-stage="writing"] .lib-card-stage .dot {
    animation: libPulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.55);
  }
  @keyframes libPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .lib-card-love {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--t4); transition: color 150ms;
  }
  .lib-card-love.on { color: var(--rose); }
  .lib-card-love:hover { color: var(--rose); }
  .lib-card-love svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
  .lib-card-love:not(.on) svg { fill: none; }

  .lib-card-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 28px; color: var(--t1); line-height: 1.08; letter-spacing: -0.005em;
    margin: 0;
  }
  .song-card:hover .lib-card-title { color: var(--gold); }

  .lib-card-pull {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 13px; line-height: 1.55; color: var(--t2);
    padding-left: 12px; border-left: 1px solid var(--dt-edge);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .lib-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  .lib-card-chip {
    font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--dt-edge);
    color: var(--t3);
  }

  .lib-card-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding-top: 12px; border-top: 1px solid var(--dt-edge);
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t4);
  }
  .lib-card-foot .date { color: var(--t3); }

  .lib-empty {
    grid-column: 1 / -1;
    padding: 80px 20px; text-align: center;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 22px; color: var(--t4); line-height: 1.5;
  }

  /* Stack view — activated by body.lib-stack on desktop only */
  body.lib-stack .lib-grid {
    grid-template-columns: 1fr; gap: 1px;
    background: var(--dt-edge); border: 1px solid var(--dt-edge);
    border-radius: 12px; overflow: hidden;
  }
  body.lib-stack .song-card {
    min-height: auto; border: none; border-radius: 0; padding: 18px 24px;
    flex-direction: row; align-items: center; gap: 24px;
  }
  body.lib-stack .song-card::before { width: 3px; }
  body.lib-stack .lib-card-top { flex: 0 0 auto; }
  body.lib-stack .lib-card-title { flex: 0 0 240px; font-size: 22px; }
  body.lib-stack .lib-card-pull { flex: 1; border: none; padding: 0; -webkit-line-clamp: 1; }
  body.lib-stack .lib-card-chips { flex: 0 0 auto; margin: 0; }
  body.lib-stack .lib-card-foot { border: none; padding: 0; flex: 0 0 auto; }
  body.lib-stack .lib-card-love { margin-left: auto; }
  body.lib-stack .lib-hero { grid-template-columns: 1fr; }
  body.lib-stack .lib-hero-art { display: none; }

  /* ═══════════════════════════════════════════════════════════════
     V241: HELP DROPDOWN — anchored panel under the topbar ? icon.
     Replaces the full-screen What Is modal on desktop. Two tabs:
     What is Stanzai (same copy as the mobile modal) and Shortcuts.
     Close affordances: click ? again, click outside, Escape. */
  .help-dropdown {
    position: fixed;
    top: 56px; right: 16px;
    width: min(440px, 92vw);
    max-height: calc(100vh - 80px);
    background: var(--dt-raised, #14110d);
    border: 1px solid var(--dt-edge);
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85),
                0 0 0 1px rgba(255,255,255,0.02) inset;
    z-index: 2000;
    opacity: 0; transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 180ms var(--easing-standard),
                transform 220ms var(--easing-standard);
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .help-dropdown.open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .help-dd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--dt-edge);
  }
  .help-dd-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: 22px; color: var(--t1); line-height: 1;
  }
  .help-dd-title em { color: var(--gold); }
  .help-dd-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: none; border: 1px solid var(--dt-edge);
    color: var(--t3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; padding: 0;
    transition: all 150ms;
  }
  .help-dd-close:hover { color: var(--t1); border-color: rgba(var(--gold-rgb), 0.3); }
  .help-dd-tabs {
    display: flex; gap: 2px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--dt-edge);
  }
  .help-dd-tab {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    background: none; border: none; cursor: pointer;
    padding: 10px 14px; color: var(--t3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms, border-color 150ms;
  }
  .help-dd-tab:hover { color: var(--t1); }
  .help-dd-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  .help-dd-body {
    padding: 20px 22px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  .help-dd-pane { display: none; }
  .help-dd-pane.active { display: block; }
  .help-dd-pane p {
    font-family: 'Outfit', sans-serif; font-weight: 300;
    font-size: 13.5px; line-height: 1.65;
    color: var(--t2); margin: 0 0 12px;
  }
  .help-dd-pane p strong { color: var(--t1); font-weight: 400; }
  .help-dd-pane p:last-child { margin-bottom: 0; }

  /* Shortcuts table */
  .help-sc-group { margin-bottom: 20px; }
  .help-sc-group:last-child { margin-bottom: 0; }
  .help-sc-label {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--t4); margin-bottom: 10px;
  }
  .help-sc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .help-sc-row:last-child { border-bottom: none; }
  .help-sc-desc {
    font-family: 'Outfit', sans-serif; font-weight: 300;
    font-size: 13px; color: var(--t2); line-height: 1.3;
  }
  .help-sc-keys { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; }
  .help-sc-key {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--dt-edge);
    border-radius: 5px;
    color: var(--t1);
    min-width: 22px;
    text-align: center;
  }
  .help-sc-plus { color: var(--t4); font-family: 'DM Mono', monospace; font-size: 10px; }

  /* ═══════════════════════════════════════════════════════════════
     V242: DESKTOP SONG VIEW — editorial container + action layout.
     Mobile song view uses the V225–V229 tab system. On desktop the
     mobile DOM renders with inline `margin:0 var(--sp-page)` on every
     section — edge-to-edge stretched buttons and code-terminal Style
     Prompt text. This block reshapes without DOM reparenting: width
     caps via ID/class selectors + !important to override inline
     styles; Style Prompt typography inherits V228's mobile editorial
     treatment; action buttons become inline pills not full-width rails. */

  /* Container cap — every major section centered at 920px max */
  #s-song-view .sva-card,
  #s-song-view #svStyleSection,
  #s-song-view .sv-hero-separator,
  #s-song-view #similarStyleResult,
  #s-song-view .sv-hero-details-wrap {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Topnav inside song view — cap title + history button zone */
  #s-song-view .topnav {
    max-width: 920px;
    margin: 0 auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* Hide the mobile-only 3-dot More button on desktop (More sheet is
     mobile-scoped; shouldn't be visible in desktop topnav). */
  #s-song-view .svt-more-btn { display: none !important; }

  /* Primary action — centered pill, capped width, pulled in from edges.
     Parent wrapper has inline `margin:0 var(--sp-page)` and flex-column;
     child centers via margin auto + max-width. */
  #s-song-view #svPrimaryAction {
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto;
    align-self: center;
  }
  #s-song-view #buildStyleBtn {
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
  }

  /* Secondary actions row — capped + gap reshaped */
  #s-song-view .sv-hero-secondary {
    max-width: 920px !important;
    margin: 14px auto 0 !important;
    justify-content: center;
    gap: 10px !important;
  }
  #s-song-view .sv-hero-secondary > button {
    flex: 0 0 auto !important;
    max-width: 180px;
    padding: 10px 22px !important;
  }

  /* Primary action parent — inline style has margin:0 var(--sp-page);
     can't remove but can cap the row above via sibling rules. Wrap
     the primary action in visible breathing room. */

  /* ── V228-parity: Style Prompt editorial typography on desktop ──
     Mobile (V228) swapped DM Mono code-terminal for Outfit 300 editorial.
     Desktop was intentionally left on the code-terminal look until V242.
     Now aligned: #styleContent receives the same editorial treatment. */
  #s-song-view #styleContent {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    letter-spacing: 0.005em;
    color: var(--t2) !important;
    background: rgba(200, 160, 80, 0.025) !important;
    border: 1px solid rgba(200, 160, 80, 0.14) !important;
    padding: 18px 22px !important;
    border-radius: 12px !important;
  }

  /* Style Prompt section eyebrow + Copy/Edit buttons get a little room */
  #s-song-view #svStyleSection {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  /* Details & Settings — wider, more editorial than mobile collapsible.
     Still collapsible (so user can hide), but with desktop typography. */
  #s-song-view .sv-hero-details-wrap {
    margin-top: 28px !important;
  }

  /* Hero card — give it a little more room to breathe on desktop */
  #s-song-view .sva-card {
    padding: 36px 40px !important;
    margin-top: 28px !important;
  }

  /* Audio player in Details — wider + better framed when expanded.
     Uses existing #songAudioPlayer (native <audio controls>). */
  #s-song-view #songAudioPlayer {
    height: 44px !important;
    border-radius: 10px !important;
  }

  /* Suno URL input — capped width so it doesn't stretch edge-to-edge */
  #s-song-view #sunoUrlInput {
    max-width: 680px;
  }

  /* Topnav history icon — slightly larger + bordered for discoverability */
  #s-song-view .topnav > button:last-child {
    width: 34px !important;
    height: 34px !important;
  }

  /* ── V243: Hero title editorial treatment on desktop ── */
  #s-song-view .sva-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-weight: 300 !important;
    font-size: 58px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 14px !important;
  }
  #s-song-view .sva-credit {
    font-family: 'DM Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--t3) !important;
    margin-bottom: 18px !important;
  }
  #s-song-view .sva-summary {
    font-family: 'DM Mono', monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
    line-height: 2 !important;
    color: var(--t3) !important;
    margin-bottom: 28px !important;
  }
  #s-song-view .sva-stamp {
    font-family: 'DM Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: rgba(var(--gold-rgb), 0.65) !important;
    margin-bottom: 14px !important;
  }
  #s-song-view .sva-lyrics-area {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    color: var(--t1) !important;
    margin-top: 20px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--dt-edge);
  }

  /* ── V243: Always-expand Details & Settings on desktop ──
     Mobile collapses this block behind a ⚙️ tap. On desktop the
     user has the screen real estate — Suno URL + audio player +
     Rating + Stage should be always visible. Hide the collapsible
     header/chevron row; force the body open. */
  #s-song-view .sv-hero-details-wrap > div:first-child {
    display: none !important;  /* hide the collapsible toggle row */
  }
  #s-song-view #songViewMore {
    display: block !important;  /* force open */
  }

  /* Each inner Details block gets the 920px cap + editorial spacing */
  #s-song-view #songViewMore > div {
    max-width: 920px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Section-label styling for Suno Link / Song File labels */
  #s-song-view #songViewMore > div > div:first-child {
    letter-spacing: 0.22em !important;
  }
  /* ═══════════════════════════════════════════════════════════════ */

  /* Push fixed-position screens down to make room for top bar */
  .screen { top: 64px; }
  .v9-input-area { /* leave alone — bottom-anchored */ }
  body.session-active #v9SongBrain { top: 64px; }
  .tabbar { top: 64px; }

  .dt-home-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(ellipse at center,
      rgba(200,160,80,0.08) 0%,
      rgba(200,160,80,0.04) 25%,
      rgba(200,160,80,0.015) 45%,
      transparent 70%
    );
    pointer-events: none;
  }

  .dt-home-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; z-index: 2;
    width: 100%; max-width: 700px; padding: 0 40px;
  }

  .dt-home-tagline {
    display: flex; justify-content: center; align-items: baseline;
    gap: 12px; margin-bottom: 36px;
  }
  .dt-tag-left {
    font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300;
    color: var(--t2); font-style: italic;
  }
  .dt-tag-right {
    font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300;
    color: var(--gold); font-style: italic;
    text-shadow: 0 0 24px rgba(200,160,80,0.25);
  }

  .dt-home-buttons {
    display: flex; flex-direction: column; gap: 14px; align-items: center;
  }
  .dt-home-btn {
    width: 100%; max-width: 420px; padding: 28px 32px;
    border-radius: 16px; cursor: pointer;
    transition: all 0.25s; text-align: center;
    position: relative; overflow: hidden;
  }
  .dt-home-btn:hover { transform: translateY(-2px); }

  .dt-btn-sound {
    border: 1px solid rgba(78,158,144,0.2);
    background: rgba(78,158,144,0.04);
  }
  .dt-btn-sound:hover { border-color: rgba(78,158,144,0.35); background: rgba(78,158,144,0.07); }

  .dt-btn-anywhere {
    border: 1px solid rgba(200,160,80,0.15);
    background: rgba(200,160,80,0.03);
  }
  .dt-btn-anywhere:hover { border-color: rgba(200,160,80,0.3); background: rgba(200,160,80,0.06); }

  .dt-btn-title {
    font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 400;
    color: var(--gold); margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(200,160,80,0.3), 0 0 40px rgba(200,160,80,0.1);
  }
  .dt-btn-sub {
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 300;
    color: var(--t3); line-height: 1.5;
  }

  .dt-home-footer {
    position: absolute; bottom: 36px; left: 50%;
    transform: translateX(-50%);
    text-align: center; z-index: 2;
  }

  /* ── LIGHT MODE ── */

  /* ════════════════════════════════════════════════════════
     V163 E1: Home → workspace transition choreography
     400ms total. Driven by body class swaps already in place.
     ════════════════════════════════════════════════════════ */

  /* Home content (Nocturne) fades out as session activates */
  .nocturne-home {
    transition: opacity 0.3s cubic-bezier(0.2,0.8,0.2,1);
  }
  body.session-active .nocturne-home,
  body:not(.on-home) .nocturne-home {
    opacity: 0;
    pointer-events: none;
  }

  /* Sidebar slides in from left when entering session */
  .tabbar {
    transition:
      transform 0.25s cubic-bezier(0.2,0.8,0.2,1) 0.15s,
      width 0.25s cubic-bezier(0.2,0.8,0.2,1);
  }
  body.on-home .tabbar {
    transform: translateX(-100%);
    transition-delay: 0s;
  }

  /* Song Brain slides in from right after sidebar */
  body.session-active #v9SongBrain {
    animation: dtBrainSlideIn 0.25s cubic-bezier(0.2,0.8,0.2,1) 0.25s both;
  }
  @keyframes dtBrainSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  /* Center workspace fades in slightly later than sidebar */
  body.session-active #s-session {
    animation: dtCenterFadeIn 0.3s cubic-bezier(0.2,0.8,0.2,1) 0.2s both;
  }
  @keyframes dtCenterFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Reduced motion: skip animations, instant state */
  @media (prefers-reduced-motion: reduce) {
    .nocturne-home,
    .tabbar,
    body.session-active #v9SongBrain,
    body.session-active #s-session {
      animation: none !important;
      transition: opacity 0.01ms !important;
    }
  }

  /* ════════════════════════════════════════════════════════
     V163 E3: Panel collapse/expand
     Cmd/Ctrl+[ toggles left rail. Cmd/Ctrl+] toggles Song Brain.
     Center workspace absorbs freed space.
     ════════════════════════════════════════════════════════ */

  /* All panels and their dependents transition smoothly */
  .tabbar,
  body.session-active #s-session,
  body.session-active #v9SongBrain,
  body.session-active .v9-input-area,
  body.session-active .hist-drawer {
    transition:
      transform 0.28s cubic-bezier(0.2,0.8,0.2,1),
      left 0.28s cubic-bezier(0.2,0.8,0.2,1),
      right 0.28s cubic-bezier(0.2,0.8,0.2,1),
      width 0.28s cubic-bezier(0.2,0.8,0.2,1),
      opacity 0.2s ease;
  }

  /* LEFT COLLAPSED — slide tabbar off-screen, push center to viewport edge */
  body.left-collapsed .tabbar {
    transform: translateX(-100%);
    pointer-events: none;
  }
  body.left-collapsed.session-active #s-session { left: 0; }
  body.left-collapsed.session-active .v9-input-area { left: 0; }
  body.left-collapsed.session-active .hist-drawer { left: 0; }
  body.left-collapsed .screen { left: 0; }

  /* RIGHT COLLAPSED — slide Song Brain off-screen, expand center */
  body.right-collapsed.session-active #v9SongBrain {
    transform: translateX(100%);
    pointer-events: none;
  }
  body.right-collapsed.session-active #s-session { right: 0; }
  body.right-collapsed.session-active .v9-input-area { right: 0; }
  body.right-collapsed.session-active .hist-drawer { right: 0; }

  /* ════════════════════════════════════════════════════════
     V246 — Panel resize handles + left-panel collapse affordance
     Two 4px-wide drag rails at each panel's inner edge.
     Left-panel collapse button in rail-head.
     Floating reopen chevron when left is collapsed.
     ════════════════════════════════════════════════════════ */

  /* Resize handles — 4px drag rails at panel inner edges.
     Session-active only; don't show outside a session.
     V250: subtle neutral hairline at rest so the affordance is visible
     without hovering (Audit 2 flag — 4px transparent was too hidden). */
  body.session-active .dt-left-resize,
  body.session-active .dt-right-resize {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    width: 4px;
    cursor: ew-resize;
    z-index: 410;
    background: rgba(255, 255, 255, 0.04);
    transition: background var(--state-dur) var(--easing-standard);
    touch-action: none;
  }
  /* Left handle — right edge of tabbar */
  body.session-active .dt-left-resize { right: 0; }
  /* Right handle — left edge of song brain */
  body.session-active .dt-right-resize { left: 0; }
  /* Hover + active states — subtle gold tint */
  body.session-active .dt-left-resize:hover,
  body.session-active .dt-right-resize:hover,
  body.dt-resizing .dt-left-resize,
  body.dt-resizing .dt-right-resize {
    background: rgba(var(--gold-rgb), 0.32);
  }
  /* Hide left resize when left is collapsed; same for right */
  body.left-collapsed .dt-left-resize,
  body.right-collapsed .dt-right-resize { display: none; }
  /* While actively resizing, suppress transitions on panels so drag feels 1:1 */
  body.dt-resizing .tabbar,
  body.dt-resizing #s-session,
  body.dt-resizing #v9SongBrain,
  body.dt-resizing .v9-input-area,
  body.dt-resizing .hist-drawer,
  body.dt-resizing .screen {
    transition: none !important;
  }
  /* Force ew-resize cursor globally during drag */
  body.dt-resizing,
  body.dt-resizing * { cursor: ew-resize !important; user-select: none !important; }

  /* Left-panel collapse button — anchored top-right of rail-head.
     Only shows inside a session (rail-head itself is session-gated). */
  body.session-active .rail-head { position: relative; }
  body.session-active .dt-left-collapse-btn {
    display: flex;
    align-items: center; justify-content: center;
    position: absolute;
    top: 18px; right: 14px;
    width: 22px; height: 22px;
    padding: 0; margin: 0;
    background: transparent;
    border: 1px solid var(--dt-edge);
    border-radius: 6px;
    color: var(--t3);
    cursor: pointer;
    transition: color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard);
  }
  body.session-active .dt-left-collapse-btn svg { width: 13px; height: 13px; display: block; }
  body.session-active .dt-left-collapse-btn:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.35);
    background: rgba(var(--gold-rgb), 0.04);
  }

  /* Floating reopen chevron — visible only when left is collapsed. */
  body.left-collapsed.session-active .dt-left-reopen {
    display: flex;
    align-items: center; justify-content: center;
    position: fixed;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 56px;
    padding: 0; margin: 0;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid var(--dt-edge);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: var(--t3);
    cursor: pointer;
    z-index: 420;
    transition: color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard);
  }
  body.left-collapsed.session-active .dt-left-reopen svg { width: 14px; height: 14px; display: block; }
  body.left-collapsed.session-active .dt-left-reopen:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.35);
    background: rgba(20, 18, 14, 0.96);
  }

  /* V250: Mirrored right-rail reopen affordance — audit 2 flagged that
     a user collapsing the Song Brain via Cmd+] had no on-screen cue
     that the panel still existed. This chevron tab on the right edge
     closes that gap. */
  body.right-collapsed.session-active .dt-right-reopen {
    display: flex;
    align-items: center; justify-content: center;
    position: fixed;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 56px;
    padding: 0; margin: 0;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid var(--dt-edge);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--t3);
    cursor: pointer;
    z-index: 420;
    transition: color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard);
  }
  body.right-collapsed.session-active .dt-right-reopen svg { width: 14px; height: 14px; display: block; }
  body.right-collapsed.session-active .dt-right-reopen:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.35);
    background: rgba(20, 18, 14, 0.96);
  }
}