/* Stanzai dev styles 10/14 — concept library, tablet 768+, V161 Song Brain (section groups, structure map, DNA field rows), desktop sidebar + session rail blocks — extracted VERBATIM from index.html <style> block lines 4456-5563 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── Concept Library ── */
.clib-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.clib-filters::-webkit-scrollbar{display:none}
.clib-filter{padding:5px 12px;border-radius:14px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.08em;white-space:nowrap;color:var(--t3);background:var(--s2);border:1px solid var(--b2);cursor:pointer;transition:all 0.15s}
.clib-filter.active{background:rgba(200,160,80,0.1);border-color:rgba(200,160,80,0.3);color:var(--gold)}
.clib-card{padding:14px 16px;border-radius:var(--radius-md);background:var(--s2);border:1px solid var(--b2);margin-bottom:8px;cursor:pointer;transition:all 0.15s;position:relative}
.clib-card:active{transform:scale(0.99)}
.clib-card-title{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:400;color:#e0d8c8;font-style:italic;margin-bottom:4px;padding-right:28px}
.clib-card-body{font-size:13px;color:var(--t2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clib-card-tags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.clib-card-tag{padding:2px 8px;border-radius:10px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.06em}
.clib-card-tag.genre{background:rgba(200,160,80,0.1);border:1px solid rgba(200,160,80,0.2);color:var(--gold)}
.clib-card-tag.mood{background:rgba(136,120,184,0.1);border:1px solid rgba(136,120,184,0.2);color:var(--dusk)}
.clib-card-tag.energy{background:rgba(78,158,144,0.1);border:1px solid rgba(78,158,144,0.2);color:var(--teal)}
.clib-card-delete{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:8px;background:rgba(196,104,120,0.06);border:1px solid rgba(196,104,120,0.12);color:var(--t3);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.clib-card-delete:hover,.clib-card-delete:active{color:var(--rose);background:rgba(196,104,120,0.15);border-color:rgba(196,104,120,0.25)}
.clib-empty{text-align:center;padding:20px 16px;border-radius:var(--radius-md);border:1px dashed var(--b2)}
.clib-empty p{font-size:13px;color:var(--t3);line-height:1.6}

/* Bookmark icon on concept cards */
.v9-concept-bookmark{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;background:rgba(200,160,80,0.06);border:1px solid rgba(200,160,80,0.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--t3);font-size:15px}
.v9-concept-bookmark:active{transform:scale(0.9)}
.v9-concept-bookmark.saved{background:rgba(200,160,80,0.15);border-color:rgba(200,160,80,0.35);color:var(--gold)}
.v9-concept{position:relative}
#v9SongMap{display:none}
/* ══════════════════════════════════════════════════
   P6: RESPONSIVE DESKTOP LAYOUT
   Purely additive — zero mobile CSS changed above.
   Tablet (768px+): breathing room, wider content
   Desktop (1024px+): sidebar nav, offset content
   ══════════════════════════════════════════════════ */

/* ── TABLET: 768px+ ── */
/* ══════════════════════════════════════════════════════════
   SONG BRAIN — Desktop Right Rail (hidden on mobile)
   ══════════════════════════════════════════════════════════ */
#v9SongBrain { display: none; }
.sb-header { margin-bottom: 20px; }
.sb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 400; color: var(--t1);
  margin-bottom: 2px;
}
.sb-subtitle {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t4);
  /* V250: clamp long song titles. Prevents Song Brain header from jittering
     between songs when a long title lands in #sbSongTitle. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.sb-section {
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.05);
}
.sb-section-label {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.sb-section-content {
  font-family: 'Outfit', sans-serif; font-size: 13px;
  color: var(--t2); line-height: 1.55;
}
.sb-section-content em { color: var(--t3); font-style: normal; }
.sb-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 2px 4px 2px 0;
}
.sb-pill-gold { background: rgba(200,160,80,0.1); color: var(--gold); border: 1px solid rgba(200,160,80,0.15); }
.sb-pill-teal { background: rgba(78,158,144,0.1); color: #4e9e90; border: 1px solid rgba(78,158,144,0.15); }
.sb-pill-dim { background: rgba(255,255,255,0.03); color: var(--t4); border: 1px solid rgba(255,255,255,0.05); }
.sb-lyrics-peek {
  max-height: 120px; overflow: hidden; position: relative;
  font-family: 'Outfit', sans-serif; font-size: 12px;
  color: var(--t3); line-height: 1.6; white-space: pre-wrap;
}
.sb-lyrics-peek::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 40px; background: linear-gradient(transparent, var(--bg));
}
.sb-phase-map { display: flex; flex-direction: column; gap: 2px; }
.sb-phase-step {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-family: 'Outfit', sans-serif; font-size: 12px;
}
.sb-phase-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sb-phase-dot.done { background: var(--gold); }
.sb-phase-dot.seeded { background: transparent; border: 2px solid var(--gold); box-sizing: border-box; }
.sb-phase-dot.active { background: var(--gold); box-shadow: 0 0 6px rgba(200,160,80,0.5); animation: breathe 2.5s ease-in-out infinite; }
.sb-phase-dot.pending { background: rgba(255,255,255,0.1); }
.sb-phase-label { color: var(--t3); }
.sb-phase-label.active { color: var(--t1); font-weight: 500; }

/* ── V161 E2: Collapsible Section Groups ── */
.sb-group {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sb-group:first-of-type { border-top: none; }
.sb-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.sb-group-header:hover { opacity: 0.85; }
.sb-group-header:active { opacity: 0.7; transition: opacity 50ms ease; }
.sb-group-title {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); opacity: 0.9;
}
.sb-group-meta {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; color: var(--t4);
  margin-left: auto; margin-right: 10px;
}
.sb-chev {
  width: 10px; height: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t3); opacity: 0.6;
  transition: transform 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
.sb-chev svg { width: 100%; height: 100%; }
.sb-group.collapsed .sb-chev { transform: rotate(-90deg); }
.sb-group-body {
  max-height: 800px;
  overflow: hidden;
  transition: max-height 0.22s cubic-bezier(0.2,0.8,0.2,1), opacity 0.18s ease;
  opacity: 1;
  padding-bottom: 14px;
}
.sb-group.collapsed .sb-group-body {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
}
/* Override flat .sb-section border when inside a group */
.sb-group .sb-section {
  border-top: none;
  padding: 0 0 12px;
}
.sb-group .sb-section:last-child { padding-bottom: 0; }

/* Always-visible Overview group has no chevron */
.sb-group.always-open .sb-group-header { cursor: default; }
.sb-group.always-open .sb-group-header:hover { opacity: 1; }
.sb-group.always-open .sb-chev { display: none; }

/* ── V161 E2: Compact horizontal structure map ── */
.sb-structure-map {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.sb-struct-step {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--t3);
  text-transform: uppercase;
  transition: all 0.18s ease;
}
.sb-struct-step.approved {
  background: rgba(200,160,80,0.08);
  border-color: rgba(200,160,80,0.25);
  color: var(--gold);
}
.sb-struct-step.current {
  background: rgba(200,160,80,0.12);
  border-color: rgba(200,160,80,0.45);
  color: var(--gold);
  box-shadow: 0 0 8px rgba(200,160,80,0.15);
}
/* V186: New structure step entrance. Applied to .sb-struct-step--new for one frame
   when updateSongBrain() detects more steps than last render. 180ms scale+translate
   reads as "item inserted" not "item appeared" — shorter than a full reveal so it
   doesn't compete with the source-pulse happening in chat. */
.sb-struct-step--new {
  animation: sbStructStepIn 180ms var(--easing-standard) both;
}
@keyframes sbStructStepIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sb-struct-sep {
  color: var(--t4); opacity: 0.5; font-size: 9px;
}

/* ════════════════════════════════════════════════════════════════
   V203: SONG BRAIN EDITORIAL STYLE CLASSES (prototype-faithful)
   Four upgraded treatments that replace bare text / pill renders:
     .sb-concept      — gold-bordered editorial card for approved concept
     .sb-field        — mono-key + Cormorant-italic value row (replaces DNA pills)
     .sb-struct-row   — stacked structure row with code badge + desc + check
     .sb-hint         — dashed-border italic footnote
   All five work inside the existing .sb-group collapsible architecture.
   Prototype reference: lines 903-1019 of Stanzai Desktop Redesign.html
   ════════════════════════════════════════════════════════════════ */

/* Concept — gold-bordered editorial card */
.sb-concept {
  padding: 16px 18px;
  background: rgba(var(--gold-rgb), 0.04);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 10px;
}
.sb-concept-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--gold); line-height: 1.3;
  margin-bottom: 8px;
}
.sb-concept-body {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  font-size: 13px; line-height: 1.6; color: var(--t2);
}

/* DNA field rows — mono key + italic Cormorant value */
.sb-field {
  display: flex; gap: 14px;
  margin-bottom: 10px;
  align-items: baseline;
}
.sb-field:last-child { margin-bottom: 0; }
.sb-field-key {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t4); min-width: 70px;
  flex-shrink: 0;
}
.sb-field-val {
  flex: 1;
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: 14px; line-height: 1.5; color: var(--t1);
}

/* Structure rows — code badge + description + optional check */
.sb-structure {
  display: flex; flex-direction: column; gap: 6px;
}
.sb-struct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dt-edge);
  transition: background var(--state-dur) var(--easing-standard),
              border-color var(--state-dur) var(--easing-standard);
}
.sb-struct-row.done {
  background: rgba(var(--gold-rgb), 0.04);
  border-color: rgba(var(--gold-rgb), 0.20);
}
.sb-struct-row .code {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; color: var(--gold);
  width: 36px;
  padding: 2px 6px;
  background: rgba(var(--gold-rgb), 0.10);
  border-radius: 4px;
  text-align: center;
  flex-shrink: 0;
}
.sb-struct-row .desc {
  flex: 1;
  font-family: 'Outfit', sans-serif; font-weight: 300;
  font-size: 12px; color: var(--t2);
  line-height: 1.4;
}
.sb-struct-row .check {
  width: 14px; height: 14px;
  color: var(--gold); opacity: 0.75;
  flex-shrink: 0;
}

/* Dashed hint notes — quiet italic footnote beneath content */
.sb-hint {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--dt-edge);
  border-radius: 8px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 12px; color: var(--t3); line-height: 1.5;
}
.sb-hint em {
  color: var(--t2); font-style: italic; font-weight: 400;
}

/* Section-level pulse (prototype alias for V186 sb-group--pulse).
   Spec says `.sb-section.updated` triggers a gold-bg fade. V186 already
   has the same mechanics on .sb-group--pulse; this adds the section-level
   alias for direct spec compliance. */
.sb-section.updated {
  animation: sbGroupPulse 860ms var(--easing-standard) both;
}
@media (prefers-reduced-motion: reduce) {
  .sb-section.updated { animation: none; }
}

/* V186: Destination pulse. When a cross-panel change lands in Song Brain (lyrics
   approved → Lyrics section updates, structure committed → Structure section updates),
   the target group pulses gold to solve change-blindness. 160ms ramp-in, 220ms hold,
   480ms fade-out = 860ms total. Subtle enough for periphery vision, visible enough to
   register. The 0.06 bg + 0.22 border respect the 5% gold rule. */
.sb-group--pulse {
  animation: sbGroupPulse 860ms var(--easing-standard) both;
}
@keyframes sbGroupPulse {
  0%   { background: transparent; border-color: transparent; }
  18%  { background: rgba(var(--gold-rgb),0.06); border-color: rgba(var(--gold-rgb),0.22); }
  44%  { background: rgba(var(--gold-rgb),0.06); border-color: rgba(var(--gold-rgb),0.22); }
  100% { background: transparent; border-color: transparent; }
}
/* The .sb-group wrapper by default has no border/bg — the pulse animation needs these
   to animate TO and FROM, which the keyframe handles. Adding 1px transparent border so
   the pulse doesn't cause layout shift when border-color transitions. */
.sb-group { border: 1px solid transparent; border-radius: 8px; transition: none; }

/* V186: Source pulse. When the user commits content in chat (approve lyrics, lock
   structure), the originating card/button pulses gold box-shadow so the user sees
   "the thing I just tapped → caused the thing happening over there in Song Brain."
   Shorter than destination pulse (480ms total) so attention can travel. */
.v9-source-pulse {
  animation: v9SourcePulse 480ms var(--easing-standard) both;
}
@keyframes v9SourcePulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0); }
  30%  { box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.32), 0 0 16px rgba(var(--gold-rgb),0.10); }
  100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-struct-step--new, .sb-group--pulse, .v9-source-pulse { animation: none; }
}

/* ── V161 E2: Empty state — "Your song takes shape here" ── */
.sb-empty {
  padding: 60px 16px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 300; font-style: italic;
  color: var(--t3);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.sb-empty-mark {
  width: 1px; height: 32px;
  margin: 0 auto 22px;
  background: linear-gradient(180deg, transparent, rgba(200,160,80,0.4), transparent);
}

/* ── V161 E2: Lyrics in Cormorant Garamond when expanded in Song Brain.
   V171: Scrollbar styling delegated to .sz-scroll-gold tokens.
   Width override kept at 4px since this is a denser content surface. ── */
.sb-lyrics-full {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 300;
  color: var(--t2);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.20) transparent;
  transition: scrollbar-color var(--state-dur) var(--easing-standard);
}
.sb-lyrics-full:hover {
  scrollbar-color: rgba(var(--gold-rgb), 0.32) transparent;
}
.sb-lyrics-full::-webkit-scrollbar { width: 4px; }
.sb-lyrics-full::-webkit-scrollbar-track { background: transparent; }
.sb-lyrics-full::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.20);
  border-radius: 2px;
  transition: background var(--state-dur) var(--easing-standard);
}
.sb-lyrics-full:hover::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.32); }
.sb-lyrics-full::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.45); }

/* ══════════════════════════════════════════════════════════
   TABLET: 600px+
   ══════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  :root { --sp-page: 32px; }
  .screen { padding-left: 0; padding-right: 0; }

  /* Browse pages — centered columns */
  /* NOTE: #s-library excluded — position:fixed;inset:0 must stay full-viewport-width.
     Applying max-width+margin:auto centers it, leaving tabbar edges uncovered so only
     Profile tab is tappable. Content centering is handled per-element below. */
  #s-home > div,
  #s-hub > div,
  #s-profile > div,
  #s-dna, #s-textdna, #s-dna-review, #s-stylepromptdna,
  #s-manual, #s-photodna, #s-conceptonly, #s-generated,
  #s-styler { max-width: 680px; margin-left: auto; margin-right: auto; }
  .lib-topnav { max-width: 680px; margin-left: auto; margin-right: auto; }

  #libStatGrid { max-width: 680px; margin-left: auto; margin-right: auto; }

  /* Chat session — comfortable reading column */
  .v9-thread { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  .v9-ai { max-width: 88%; }
  .v9-user { max-width: 72%; }
  .v9-input-area { max-width: 720px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; padding-left: 32px; padding-right: 32px; }
  .v9-nav { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  .v9-ctx-bar, .v9-dna-bar, .v9-prog-wrap, #v9CollapsedStrip { max-width: 720px; margin-left: auto; margin-right: auto; }
  .topnav { max-width: 680px; margin-left: auto; margin-right: auto; }
  #songViewContent { max-width: 680px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP: 768px+ — Two-Shell Architecture
   Browse Shell: sidebar + wide canvas
   Session Shell: sidebar + chat center + song brain rail
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --tab-h: 0px; }

  /* Body background = void (visible in panel gaps) */
  body { background: var(--dt-void); }

  /* ── Sidebar nav — Tier 2 surface ── */
  .tabbar {
    position: fixed; top: 0; left: 0; bottom: 0; right: auto;
    width: 76px; height: 100vh; flex-direction: column;
    align-items: center; padding: 20px 0 16px; gap: 4px;
    border-top: none; border-right: var(--dt-gap) solid var(--dt-void);
    background: var(--dt-surface);
    z-index: 500;
  }
  .tab { width: 56px; padding: 10px 0; border-radius: 12px; transition: background 0.15s, opacity 0.15s; }
  .tab:hover { background: rgba(200,160,80,0.06); }
  .tab.on { background: rgba(200,160,80,0.1); }
  .tab .tabicon { margin-top: 0; }
  .tablabel { font-size: 9px; }
  #tab-profile { margin-top: auto; }

  /* ── Song Map — vertical phase stepper in sidebar during sessions ── */
  #v9SongMap { display: none; }
  body.session-active #v9SongMap {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    width: 100%;
  }
  .smap-phase {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 14px; cursor: default;
    transition: opacity 0.15s;
  }
  .smap-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.12); flex-shrink: 0;
    transition: all 0.2s;
  }
  .smap-dot.done { background: var(--sage); }
  .smap-dot.active { background: var(--gold); box-shadow: 0 0 8px rgba(200,160,80,0.4); }
  .smap-dot.seeded { background: transparent; border: 2px solid var(--gold); width: 6px; height: 6px; }
  .smap-label {
    font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 300;
    color: var(--t4); letter-spacing: 0.04em; white-space: nowrap;
  }
  .smap-label.done { color: var(--sage); }
  .smap-label.active { color: var(--gold); font-weight: 400; }
  .smap-line {
    width: 1px; height: 10px; background: rgba(255,255,255,0.08);
    margin-left: 17px;
  }
  .smap-line.done { background: rgba(110,158,120,0.3); }

  /* ── All screens offset for sidebar ── */
  .screen { left: 76px; padding-bottom: 24px; }

  /* ══ BROWSE SHELL — wide canvas for non-session pages ══ */
  #s-home > div,
  #s-hub > div,
  #s-profile > div,
  #s-dna, #s-textdna, #s-dna-review, #s-stylepromptdna,
  #s-manual, #s-photodna, #s-conceptonly, #s-generated,
  #s-styler { max-width: 1100px; }

  #libStatGrid { grid-template-columns: repeat(4, 1fr) !important; max-width: 1100px; }
  .lib-topnav { max-width: 1100px; }
  .topnav { max-width: 1100px; }
  #songViewContent { max-width: 1100px; }

  /* ══ SESSION SHELL — three-column layout ══ */

  /* Session screen: leave room for brain rail on right — Tier 1 recessed well */
  body.session-active #s-session { right: 340px; background: var(--dt-well); }

  /* Song Brain panel: fixed right rail — Tier 2 surface */
  body.session-active #v9SongBrain {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 340px;
    background: var(--dt-surface);
    border-left: var(--dt-gap) solid var(--dt-void);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    padding: 24px 20px;
    z-index: 100;
  }
  /* Edge lighting — top edge simulates overhead illumination */
  body.session-active #v9SongBrain::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--dt-edge-top);
  }
  body.session-active #v9SongBrain::-webkit-scrollbar { display: none; }

  /* Chat content — center in available space */
  body.session-active .v9-thread { max-width: 800px; }
  body.session-active .v9-ai { max-width: 85%; }
  body.session-active .v9-user { max-width: 65%; }

  /* Input area — constrained to session column.
     width:auto resets the @600+ tablet rule's width:100% so the left/right
     offsets actually compute the box width; otherwise the explicit width
     wins over `right` and the composer extends behind the Song Brain rail. */
  body.session-active .v9-input-area {
    left: 76px; right: 340px;
    width: auto;
    max-width: 800px; transform: none;
    margin-left: auto; margin-right: auto;
    bottom: 0; padding-bottom: 16px;
  }

  /* Chat nav and bars — fit within session column */
  body.session-active .v9-nav { max-width: 800px; }
  body.session-active .v9-ctx-bar { max-width: 800px; }
  body.session-active .v9-dna-bar { max-width: 800px; }
  body.session-active .v9-prog-wrap { max-width: 800px; }
  body.session-active #v9CollapsedStrip { max-width: 800px; }

  /* Non-session chat elements (when session NOT active, use browse widths) */
  .v9-thread { max-width: 1100px; }
  .v9-input-area {
    left: 76px; right: 0; max-width: 1100px;
    transform: none; margin-left: auto; margin-right: auto;
    bottom: 0; padding-bottom: 16px;
  }
  .v9-nav { max-width: 1100px; }
  .v9-ctx-bar, .v9-dna-bar, .v9-prog-wrap, #v9CollapsedStrip { max-width: 1100px; }

  /* History drawer — offset for sidebar */
  .hist-drawer { left: 76px; max-width: none; margin: 0; right: 0; }
  body.session-active .hist-drawer { right: 340px; }

  /* Overlays — offset for sidebar */
  #selectActionBar { left: 76px; bottom: 0 !important; max-width: 800px; margin-left: auto; margin-right: auto; }
  #newSongSheet { left: 76px !important; }
  #genSheetOverlay { left: 76px !important; }
  #sfConfirmModal { left: 76px !important; }
}

/* V162 E4: Persistent desktop top bar — hidden on mobile */
#dtTopBar { display: none; }

/* ══════════════════════════════════════════════════════════
   MOBILE-ONLY HIDE RULES for desktop-only DOM elements
   These elements are injected into shared DOM for progressive enhancement.
   Default = hidden. Desktop media query below flips them back on.
   CRITICAL: if you add a new desktop-only element, add its hide rule here.
   ══════════════════════════════════════════════════════════ */
.rail-head, .rail-body, .rail-footer { display: none; }
#s-home .nh-continue-bar { display: none; }
#s-home .nh-routes { display: none; }
/* Desktop entry-panel is the V311 replacement for .nh-routes — hide on
   mobile baseline; @media (min-width:1024px) flips it to display: grid.
   Without this rule the buttons/spans render as default blocks above
   the mobile .nh-doors for a brief FOUC on load. */
#s-home .stz-entry-panel { display: none; }
.center-context { display: none; }

/* ══════════════════════════════════════════════════════════
   WIDE DESKTOP: 1024px+ — full desktop rail + prestige layout
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   V215 — DESKTOP DNA PICKER SHELL (Phase D-1)
   Two-column shell (rail + main) for Start with Intent at ≥1024px.
   D-1 ships structure only — rail is empty; D-2 fills it.
   Namespace: .dtpk-* to avoid collision with V197 session rail (.rail-*).
   ══════════════════════════════════════════════════════════ */
/* Mobile-first default: shell is transparent pass-through; rail is hidden.
   Per V202 pattern, desktop-only elements need global-scope display:none
   BEFORE the 1024px media query so mobile never sees them. */
#s-manual .dtpk-shell { display: contents; }
#s-manual .dtpk-rail { display: none; }
#s-manual .dtpk-main { display: contents; }

@media (min-width: 1024px) {
  /* V215 shell — activates the two-column grid at desktop widths. */
  /* Release the 768px-era #s-manual 1100px cap so the shell spans full width. */
  #s-manual { max-width: none; }

  #s-manual .dtpk-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: calc(100vh - 64px);
    max-width: 1520px;         /* V219: cap the total shell for wide viewports */
    margin-left: auto;          /* V219: center the shell so rail isn't pinned */
    margin-right: auto;         /*       viewport-left on ultrawide monitors */
  }
  #s-manual .dtpk-rail {
    display: block;
    position: sticky;
    top: 52px; /* below the 52px-tall sticky .topnav */
    align-self: start;
    height: calc(100vh - 116px); /* viewport - dtTopBar(64) - topnav(52) */
    overflow-y: auto;
    border-right: 1px solid rgba(var(--gold-rgb), 0.08);
    box-sizing: border-box;
  }
  #s-manual .dtpk-main {
    display: block;
    padding: 40px 56px 64px;
    max-width: 1080px;
    min-width: 0; /* prevent grid track blowout from long inner content */
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════════════════
   V216 — D-3: CHAPTER REFACTOR + LAYOUT SCALING
   Typography, grid, and accordion neuter for the desktop picker.
   Builds on the V215 shell. Mobile picker (V210/V211) untouched.
   Scope: .dtpk-main + #s-manual only.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* (1) Hide mobile composition strip per spec — desktop rail (D-2) will
     replace it as the composition indicator. Until D-2 ships, no composition
     strip at desktop; the step progress bar above the hero remains as
     progress feedback. */
  #s-manual .dtpk-main .dna-comp { display: none; }

  /* (2) Accordion neuter — desktop chapters stay fully expanded. The JS
     state (_dnaExpanded, dnaApplyExpansion, .fs-collapsed toggling) still
     runs, but its CSS effect is overridden here. Specificity wins via
     the added .dtpk-main class — no !important needed. */
  #s-manual .dtpk-main .flowstep[data-fs] .fs-chev,
  #s-manual .dtpk-main .flowstep[data-fs] .fs-collapsed-summary {
    display: none;
  }
  #s-manual .dtpk-main .flowstep[data-fs] .fs-head { cursor: default; }
  #s-manual .dtpk-main .flowstep[data-fs] .fs-head:active { background: transparent; }
  /* Restore display values that the mobile .fs-collapsed rule hid.
     Order matters: generic > * rule first, then specific overrides for
     grid/flex children (equal specificity; later rule wins). */
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed > *:not(.fs-head):not(.fs-collapsed-summary) {
    display: block;
  }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .fs-question { display: block; }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .moodgrid { display: grid; }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .genrerow { display: flex; }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .genre-explorer { display: block; }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .optcard { display: flex; }
  #s-manual .dtpk-main .flowstep[data-fs].fs-collapsed .soundchip { display: flex; }

  /* (3) Chapter header refactor — Roman numeral + name + hairline gold rule
     + hint/optional tag. The rule is a ::after pseudo that flex-grows to
     fill space between .fs-name and .fs-optional. Zero HTML change. */
  .dtpk-main .flowstep[data-fs] .fs-head {
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
  }
  .dtpk-main .flowstep[data-fs] .fs-num {
    font-size: 22px;
    order: 0;
  }
  .dtpk-main .flowstep[data-fs] .fs-name {
    font-size: 12px;
    letter-spacing: 0.28em;
    order: 1;
  }
  .dtpk-main .flowstep[data-fs] .fs-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.22), rgba(var(--gold-rgb), 0));
    order: 2;
    margin: 0 4px;
    min-width: 40px;
  }
  .dtpk-main .flowstep[data-fs] .fs-optional {
    order: 3;
    margin-left: 0;
    font-size: 10px;
    letter-spacing: 0.22em;
  }
  .dtpk-main .flowstep[data-fs] .fs-question {
    font-size: 32px;
    line-height: 1.18;
    margin: 16px 0 26px;
  }

  /* (4) Hero upscale — the only .flowstep without data-fs is the
     "Your song has a DNA." hero. Existing inline styles force !important
     override. When hero gets its own class in a future refactor, these
     !important flags can be dropped. */
  .dtpk-main .flowstep:not([data-fs]) > div:nth-child(1) {
    font-size: 46px !important;
    line-height: 1.08 !important;
    margin-bottom: 20px !important;
  }
  .dtpk-main .flowstep:not([data-fs]) > div:nth-child(2) {
    max-width: 680px;
  }
  .dtpk-main .flowstep:not([data-fs]) > div:nth-child(3) {
    max-width: 680px;
  }

  /* (5) Mood grid base — 4 cols at 1024-1279px. Upgraded at wider breakpoints. */
  .dtpk-main .moodgrid { grid-template-columns: repeat(4, 1fr); gap: 10px; }

  /* (6) Pill + card upscale */
  .dtpk-main .moodpill { padding: 16px 6px 14px; }
  .dtpk-main .moodpill .moodemoji svg { width: 23px; height: 23px; }
  .dtpk-main .moodpill .moodlabel { font-size: 13px; }
  .dtpk-main .gchip { padding: 10px 18px; font-size: 13px; }
  .dtpk-main .optcard { padding: 16px 18px; transition: border-color var(--state-dur), box-shadow var(--state-dur); }
  .dtpk-main .optcard.sel { box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.15), 0 6px 24px -8px rgba(var(--gold-rgb),0.2); }
  .dtpk-main .soundchip { padding: 14px 8px; }
  .dtpk-main .soundchip .soundchip-lbl { font-size: 13px; }

  /* (6a) Section numeral — Cormorant italic for editorial feel */
  .dtpk-main .flowstep[data-fs] .fs-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold);
    opacity: 0.75;
  }

  /* (6b) Energy + Approach optcard grid — 3-column card layout */
  .dtpk-main .optcard-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .dtpk-main .optcard-group .optcard {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
    padding: 20px 18px 18px;
    background: linear-gradient(160deg, var(--s2) 0%, var(--s1) 100%);
  }
  .dtpk-main .optcard-group .opticon { width: 44px; height: 44px; border-radius: 12px; }
  .dtpk-main .optcard-group .opticon svg { width: 22px; height: 22px; }
  .dtpk-main .optcard-group .opttxt { flex: unset; }
  .dtpk-main .optcard-group .opttitle { font-size: 15px; }
  .dtpk-main .optcard-group .optcheck { position: absolute; top: 16px; right: 16px; }

  /* (7) Inter-chapter spacing */
  .dtpk-main .flowstep[data-fs] { margin: 40px 0; }
  .dtpk-main .flowstep:not([data-fs]) { margin-bottom: 40px; }
}

/* Mood grid breakpoint upgrades — flat media queries (not nested) per
   iOS Safari compatibility. */
@media (min-width: 1280px) {
  .dtpk-main .moodgrid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1440px) {
  .dtpk-main .moodgrid { grid-template-columns: repeat(6, 1fr); }
}
/* End V216 D-3 */

/* ══════════════════════════════════════════════════════════
   V217 — D-2: RAIL CONTENT + SCROLL-SPY + DUAL-CTA WIRING
   Populates the Companion Rail with backlink, context block, 5 nav rows,
   and a write-DNA CTA. State is read-only from existing picker DOM + state
   object via _dtRenderRail(), piggybacked on updateDnaPreview() — same
   cadence as V210 renderComposition. No new persisted state fields.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Hide sticky .topnav on s-manual — rail's backlink replaces it. Scoped
     to #s-manual only so other screens' topnavs (library, profile, etc.)
     stay untouched. */
  #s-manual > .topnav { display: none; }

  /* Rail padding + scroll behavior */
  #s-manual .dtpk-rail {
    padding: 32px 26px 28px;
    display: flex; flex-direction: column;
    scrollbar-width: thin;
  }
  #s-manual .dtpk-rail::-webkit-scrollbar { width: 4px; }
  #s-manual .dtpk-rail::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.15); border-radius: 2px;
  }

  /* Scroll-margin on chapters so rail-nav jumps land below the rail top */
  #s-manual .dtpk-main .flowstep[data-fs],
  #s-manual .dtpk-main .flowstep:not([data-fs]) {
    scroll-margin-top: 24px;
  }

  /* ─── RAIL : BACKLINK ─── */
  .dtpk-backlink {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t3); cursor: pointer;
    align-self: flex-start;
    margin-bottom: 24px;
    transition: color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard),
                transform var(--press-dur) var(--easing-standard);
  }
  .dtpk-backlink:hover {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.30);
  }
  .dtpk-backlink:active { transform: scale(var(--press-scale)); }
  .dtpk-backlink:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo);
  }
  .dtpk-backlink svg { width: 11px; height: 11px; flex-shrink: 0; }

  /* ─── RAIL : CONTEXT BLOCK ─── */
  .dtpk-topsmall {
    font-family: 'DM Mono', monospace;
    font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 12px;
  }
  .dtpk-pagetitle {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: 30px; line-height: 1.05; letter-spacing: -0.01em;
    color: var(--t1);
    margin-bottom: 10px;
  }
  .dtpk-pagetitle em {
    font-style: italic; color: var(--gold);
  }
  .dtpk-leder {
    font-family: 'Outfit', sans-serif; font-weight: 300;
    font-size: 12.5px; line-height: 1.55;
    color: var(--t3);
    margin-bottom: 24px;
  }

  /* ─── RAIL : NAV HEAD ─── */
  .dtpk-navhead {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 0 10px;
    border-top: 1px solid rgba(var(--gold-rgb), 0.10);
    font-family: 'DM Mono', monospace;
    font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 6px;
  }
  .dtpk-navhead .cnt em {
    font-style: normal; color: var(--gold);
  }
  .dtpk-navhead .cnt-sep { opacity: 0.45; }

  /* ─── RAIL : NAV ROWS ─── */
  .dtpk-navrows {
    display: flex; flex-direction: column; gap: 2px;
  }
  .dtpk-navrow {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--t3);
    text-decoration: none;
    position: relative;
    transition: background var(--state-dur) var(--easing-standard),
                color var(--state-dur) var(--easing-standard),
                transform var(--press-dur) var(--easing-standard);
  }
  .dtpk-navrow::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 2px; border-radius: 1px;
    background: var(--gold);
    opacity: 0;
    transition: opacity var(--state-dur) var(--easing-standard);
  }
  .dtpk-navrow:hover { background: rgba(255, 255, 255, 0.03); color: var(--t2); }
  .dtpk-navrow:active { transform: scale(var(--press-scale)); }
  .dtpk-navrow:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo);
  }
  .dtpk-navrow.current::before { opacity: 0.85; }
  .dtpk-navrow.current { color: var(--t1); background: rgba(var(--gold-rgb), 0.03); }
  .dtpk-navrow.filled .glyph { color: var(--gold); }
  .dtpk-navrow.filled .ln2 { color: var(--gold); opacity: 0.85; }

  .dtpk-navrow .glyph {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--t3);
    transition: color var(--state-dur) var(--easing-standard),
                border-color var(--state-dur) var(--easing-standard),
                background var(--state-dur) var(--easing-standard);
  }
  .dtpk-navrow:hover .glyph { color: var(--t2); border-color: rgba(255, 255, 255, 0.08); }
  .dtpk-navrow.current .glyph {
    border-color: rgba(var(--gold-rgb), 0.25);
    background: rgba(var(--gold-rgb), 0.04);
  }
  .dtpk-navrow .glyph svg { width: 16px; height: 16px; }

  .dtpk-navrow .meta {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; /* allow text truncation */
    flex: 1;
  }
  .dtpk-navrow .ln1 {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--t3);
  }
  .dtpk-navrow.current .ln1 { color: var(--t2); }
  .dtpk-navrow .ln2 {
    font-family: 'Outfit', sans-serif; font-weight: 400;
    font-size: 13px; color: var(--t4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ─── RAIL : FOOTER (CTA + HINT) ─── */
  .dtpk-foot {
    margin-top: auto; /* push to bottom of flex column */
    padding-top: 24px;
    border-top: 1px solid rgba(var(--gold-rgb), 0.10);
  }
  .dtpk-writebtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.38);
    border-radius: 10px;
    cursor: pointer;
    color: var(--gold);
    box-shadow: 0 4px 14px -8px rgba(var(--gold-rgb), 0.22);
    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);
  }
  .dtpk-writebtn:hover:not(:disabled) {
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(var(--gold-rgb), 0.04);
    box-shadow: 0 8px 22px -10px rgba(var(--gold-rgb), 0.38);
  }
  .dtpk-writebtn:active:not(:disabled) { transform: scale(var(--press-scale)); }
  .dtpk-writebtn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo);
  }
  .dtpk-writebtn:disabled {
    cursor: not-allowed;
    opacity: 0.32;
    box-shadow: none;
  }
  .dtpk-writebtn .it {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 500;
    font-size: 17px; line-height: 1;
  }
  .dtpk-writebtn .tx {
    font-family: 'Outfit', sans-serif; font-weight: 400;
    font-size: 12.5px; letter-spacing: 0.04em;
  }
  .dtpk-writebtn svg {
    width: 13px; height: 13px;
    transition: transform var(--state-dur) var(--easing-standard);
  }
  .dtpk-writebtn:hover:not(:disabled) svg { transform: translateX(2px); }
  .dtpk-foothint {
    margin-top: 10px;
    font-family: 'DM Mono', monospace;
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t4);
    text-align: center;
  }
  .dtpk-foothint em {
    font-style: normal; color: var(--gold);
  }
}
/* End V217 D-2 */

/* ══════════════════════════════════════════════════════════
   V220 — D-4: CLOSING CTA SECTION
   Editorial end-of-scroll destination for the desktop picker. Gold
   hairline threshold + Cormorant italic closing line + larger Begin
   button + dynamic substep count. Same buildAndShow() handler as the
   rail CTA. Mobile-era .begin-btn + .secbtn hidden on desktop — their
   functionality is covered by the closing CTA + rail backlink.
   ══════════════════════════════════════════════════════════ */
/* Mobile-first default: closing section is hidden. */
#s-manual .dtpk-closing { display: none; }

/* V244 hotfix — V237 put the Library Gallery CSS inside @media min-width:1024
   but never added a global-scope hide on .lib-wrap. On mobile the desktop DOM
   rendered unstyled above the mobile library (V202 regression pattern).
   Fix: global display:none by default; desktop @media block overrides below. */
#s-library .lib-wrap { display: none; }

/* V245 hotfix — V241's .help-dropdown, V236's .vault-scrim / .vault-panel all
   hit the SAME V202 regression. CSS lived inside @media min-width:1024 with no
   global display:none default. On mobile the help dropdown's hardcoded content
   (paragraphs, shortcut keys) rendered as unstyled text behind every screen.
   Fix: global-scope display:none for every desktop-only overlay element.
   Desktop @media blocks override to flex/block. Write this into the skill as
   a hard rule: EVERY desktop-only element needs a global-scope hide BEFORE
   its desktop @media block. No exceptions. */
.help-dropdown { display: none; }
.vault-scrim { display: none; }
.vault-panel { display: none; }

/* V246 — Left/right panel resize handles, left collapse button, and
   floating reopen chevron are all desktop-only. Per the V245 hard rule:
   every desktop-only element needs a global-scope hide BEFORE its
   @media block. Desktop @media below restores visibility. */
.dt-left-resize { display: none; }
.dt-right-resize { display: none; }
.dt-left-collapse-btn { display: none; }
.dt-left-reopen { display: none; }
.dt-right-reopen { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   V247 LIGHT MODE — CONSOLIDATED
   Replaces the scattered shallow light-mode rules that previously lived in
   three separate blocks (around lines 1607, 3143, 3650, 6245 pre-V247).
   One canonical location, V246-aware (covers dt-nav-menu, help-dropdown,
   dt-user-chip, rail-*, svt-*, etc.). Scoped entirely under body.light-mode.
   Zero dark-mode impact. ══════════════════════════════════════════════════ */

body.light-mode {
  --lm-ink-02: rgba(26,20,16,0.04);
  --lm-ink-04: rgba(26,20,16,0.06);
  --lm-ink-06: rgba(26,20,16,0.08);
  --lm-ink-08: rgba(26,20,16,0.10);
  --lm-ink-10: rgba(26,20,16,0.12);
  --lm-ink-12: rgba(26,20,16,0.14);
  --lm-ink-15: rgba(26,20,16,0.18);
  --lm-ink-20: rgba(26,20,16,0.24);
  --lm-ink-30: rgba(26,20,16,0.36);
  --lm-ink-40: rgba(26,20,16,0.48);
  --lm-ink-50: rgba(26,20,16,0.60);

  --lm-shadow-sm: 0 1px 2px rgba(90,60,20,0.06), 0 1px 1px rgba(90,60,20,0.04);
  --lm-shadow-md: 0 2px 8px rgba(90,60,20,0.08), 0 1px 2px rgba(90,60,20,0.05);
  --lm-shadow-lg: 0 8px 24px rgba(90,60,20,0.10), 0 2px 6px rgba(90,60,20,0.05);
  --lm-shadow-xl: 0 16px 40px rgba(90,60,20,0.12), 0 4px 12px rgba(90,60,20,0.06);

  --dt-void:    #ede6d8;
  --dt-well:    #f0eadd;
  --dt-surface: #f5f0e8;
  --dt-raised:  #faf6ee;
  --dt-float:   #fdfaf2;
  --dt-overlay: #ffffff;

  --border-struct-weak:   var(--lm-ink-04);
  --border-struct:        var(--lm-ink-08);
  --border-struct-strong: var(--lm-ink-12);
  --edge-highlight-weak:  rgba(255,255,255,0.6);
  --edge-highlight:       rgba(255,255,255,0.8);
  --dt-edge:              var(--lm-ink-06);
  --dt-edge-top:          var(--lm-ink-08);

  --focus-ring: 0 0 0 1px rgba(var(--gold-rgb), 0.55);
  --focus-soft: 0 0 12px rgba(var(--gold-rgb), 0.18);
  --focus-halo: 0 0 24px rgba(var(--gold-rgb), 0.08);

  color: var(--t1);
}

body.light-mode { background: var(--bg); color: var(--t1); }
html:has(body.light-mode) { background: var(--bg); }

body.light-mode ::placeholder,
body.light-mode ::-webkit-input-placeholder {
  color: var(--lm-ink-40);
  font-weight: 300;
}
body.light-mode input,
body.light-mode textarea,
body.light-mode [contenteditable] { caret-color: var(--gold); }