:root {
    --bg-deep: #0a0e14;
    --bg-mid: #14181f;

    /* ── Tier 1 — PRIMARY (the "legend" color: warm amber) ── */
    --warm-glow: #d4a574;
    --warm-glow-soft: rgba(212, 165, 116, 0.4);
    --amber: #e8b786;

    /* ── Tier 2 — SECONDARY (the "app helping you" color: deep petrol teal) ── */
    --secondary: #3d8a87;
    --secondary-soft: rgba(61, 138, 135, 0.18);
    --secondary-deep: #2d6664;

    /* ── Tier 3 — TERTIARY (debate only: muted violet, two-voices register) ── */
    --tertiary: #7d6b9e;
    --tertiary-soft: rgba(125, 107, 158, 0.22);

    /* ── PREMIUM (Patron tier: saturated cool-edged gold) ── */
    --premium: #d4a058;
    --premium-deep: #c08540;
    --premium-gradient: linear-gradient(135deg, #d4a058 0%, #c08540 100%);
    --premium-glow: rgba(255, 215, 130, 0.18);

    /* ── SEMANTIC (reserved for their conventional meaning only) ── */
    --crimson: #c44536;
    --semantic-success: #4ade80;
    --semantic-warning: #e8b56a;

    /* Legacy contextual (kept for portrait tints & specific scenes) */
    --cool-accent: #7a9eb8;

    --text: #f4efe6;
    --text-dim: rgba(244, 239, 230, 0.62);
    --text-faint: rgba(244, 239, 230, 0.35);
    --panel-bg: rgba(20, 24, 31, 0.55);
    --panel-border: rgba(244, 239, 230, 0.08);
    --panel-border-hot: rgba(244, 239, 230, 0.18);

    /* Hover tints — light overlay in dark mode, dark overlay in light mode */
    --hover-tint:        rgba(244, 239, 230, 0.06);
    --hover-tint-strong: rgba(244, 239, 230, 0.10);
    --hover-tint-bright: rgba(244, 239, 230, 0.18);
    /* Solid hover backgrounds */
    --chip-hover-bg:     rgba(20, 24, 31, 0.75);
    --tooltip-bg:        rgba(10, 14, 20, 0.92);
    --tooltip-text:      var(--text);

    --paper: #e8dcc4;
    --paper-deep: #dcc9a8;
    --ink: #2a221a;
    --ink-soft: #5a4a38;
    --ink-faint: #8a7860;
    --ink-accent: #8b3a1e;

    /* ── Scene tokens (per-legend can override) ──
       Default values are Leonardo's Tuscan dusk. Each legend defines
       its mood by overriding these on body[data-legend="X"][data-mode="Y"]. */
    --scene-sky-1: #050810;
    --scene-sky-2: #0a0e14;
    --scene-sky-3: #14181f;
    --scene-sky-4: #1f1812;
    --scene-horizon: #5a3a26;
    --scene-horizon-pos: 50% 95%;
    --scene-horizon-size: 80% 55%;
    --scene-glow: rgba(212, 165, 116, 0.18);
    --scene-glow-pos: 50% 65%;
    --scene-glow-size: 60% 40%;
    --scene-mote: var(--warm-glow);
    --scene-mote-shadow: var(--warm-glow);
    --scene-mote-opacity: 0.4;
    --scene-haze: rgba(212, 165, 116, 0.12);
    --scene-haze-pos: 50% 90%;
    --scene-vignette: rgba(0, 0, 0, 0.65);
    --scene-figure-light: rgba(212, 165, 116, 0.22);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    /* Kill native pull-to-refresh / overscroll bounce. A vertical drag on the
       chat (or anywhere) must NEVER bubble into the browser's reload gesture —
       reloading the heavy 3D Lab can crash the tab. */
    overscroll-behavior: none;
    font-family: 'Manrope', sans-serif;
    color: var(--text); background: var(--bg-deep);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── A11Y: KEYBOARD FOCUS RINGS ───────────────────────────
     Universal :focus-visible treatment using the active legend's
     accent (--warm-glow auto-adapts per mode + per legend). Mouse
     clicks never trigger this (browsers skip :focus-visible on
     pointer interactions). Soft outline with offset + house easing. */
  *:focus { outline: none; }
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--warm-glow);
    outline-offset: 3px;
    border-radius: inherit;
    transition: outline-offset 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                outline-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Pills/round buttons get a tighter offset so the ring traces the curve */
  .prompt-chip:focus-visible,
  .filter-pill:focus-visible,
  .hall-view-btn:focus-visible,
  .fact-btn:focus-visible,
  .enter-lab:focus-visible,
  .hall-spotlight:focus-visible,
  .resume-banner:focus-visible,
  .hall-cta:focus-visible,
  .send-btn:focus-visible {
    outline-offset: 2px;
  }
  /* Card-shaped targets (legend cards, books, history items) get a slightly
     softer ring inset so it sits inside the card edge */
  .hall-card:focus-visible,
  .legend-card:focus-visible,
  .lib-book:focus-visible,
  .lesson-tile:focus-visible,
  .history-item:focus-visible,
  .plan:focus-visible {
    outline-offset: -3px;
    outline-width: 2px;
  }
  /* The reader's parchment surface needs a darker accent for contrast on cream */
  .right-panel[data-view="reader"] .reader-nav:focus-visible,
  .right-panel[data-view="reader"] .panel-icon-btn:focus-visible {
    outline-color: var(--ink-accent);
  }

  /* ── SCENE ATMOSPHERE ──────────────────────────────────── */
  .scene {
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse var(--scene-horizon-size) at var(--scene-horizon-pos), var(--scene-horizon) 0%, transparent 50%),
      radial-gradient(ellipse var(--scene-glow-size) at var(--scene-glow-pos), var(--scene-glow) 0%, transparent 60%),
      linear-gradient(180deg, var(--scene-sky-1) 0%, var(--scene-sky-2) 35%, var(--scene-sky-3) 65%, var(--scene-sky-4) 100%);
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s ease;
  }
  body.debate-mode .scene {
    background:
      radial-gradient(ellipse 50% 50% at 30% 90%, #3a2a4a 0%, transparent 50%),
      radial-gradient(ellipse 50% 50% at 70% 90%, #4a2a26 0%, transparent 50%),
      linear-gradient(180deg, #050810 0%, #0a0e14 35%, #14181f 65%, #1a1418 100%);
  }
  .haze {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 30% at var(--scene-haze-pos), var(--scene-haze), transparent 60%);
    mix-blend-mode: screen;
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .vignette {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, var(--scene-vignette) 100%);
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .motes { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
  .mote {
    position: absolute; width: 2px; height: 2px;
    background: var(--scene-mote); border-radius: 50%; opacity: var(--scene-mote-opacity);
    box-shadow: 0 0 6px var(--scene-mote-shadow);
    animation: drift 16s linear infinite;
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes drift {
    0% { transform: translateY(110vh) translateX(0); opacity: 0; }
    10%, 90% { opacity: 0.5; }
    100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
  }
  .grain {
    position: fixed; inset: 0; pointer-events: none; opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
  }

  /* ── FIGURES ───────────────────────────────────────────── */
  .figure-stage {
    position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: min(520px, 60vw); height: 78vh;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
    animation: breathe 8s ease-in-out infinite;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Real-app 3D canvas. Sits ABOVE .figure-portrait but starts hidden;
     ModelViewer mounts/animates it in. The mockup leaves it empty so the
     static portrait shows; on merge, the canvas content takes priority. */
  #canvas-container > #viewer {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    background: transparent;
    pointer-events: auto;
    /* Default to invisible in the mockup (no 3D scene mounted yet). The
       real ModelViewer will set width/height/opacity as it loads. */
    display: none;
  }
  /* Once a model loads (real app dispatches 'model-loaded'), JS adds this
     class so the canvas shows and the static portrait dims out. */
  body.has-3d-model #canvas-container > #viewer { display: block; }
  body.has-3d-model #canvas-container > .figure-portrait { opacity: 0; }
  /* First load: the figure gathers out of dust motes — one-time moment.
     Class is removed by JS after the animation settles. */
  body.is-loading .figure-primary {
    opacity: 0;
    filter: blur(28px) brightness(1.3);
  }
  /* Legend switch: brief dissolve before the new world arrives */
  .figure-primary.is-dissolving {
    opacity: 0;
    filter: blur(18px) brightness(1.2);
  }
  @keyframes breathe {
    0%, 100% { transform: var(--breathe-base, translateX(-50%)) translateY(0); }
    50% { transform: var(--breathe-base, translateX(-50%)) translateY(-6px); }
  }
  .figure-light {
    position: absolute; bottom: -10%;
    width: 100%; height: 110%;
    background: radial-gradient(ellipse 60% 55% at 50% 70%, var(--scene-figure-light), transparent 70%);
    filter: blur(20px);
  }
  .figure-portrait {
    position: relative; width: 100%; height: 100%;
    background-size: contain; background-position: bottom center; background-repeat: no-repeat;
    filter: sepia(0.15) contrast(1.05) brightness(0.92);
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    opacity: 0.92;
    transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .figure-light {
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/600px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg');
  }
  .figure-secondary {
    display: none;
    --breathe-base: translateX(-50%);
  }
  .figure-secondary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Marcus_Aurelius_Glyptothek_Munich.jpg/600px-Marcus_Aurelius_Glyptothek_Munich.jpg');
    background-size: contain;
    filter: sepia(0.05) contrast(1.05) brightness(0.85);
  }

  /* Bio-open shift */
  body.bio-open .figure-primary {
    --breathe-base: translateX(calc(-50% - 200px));
    transform: var(--breathe-base);
  }

  /* Selector-open shift (figure moves right) */
  body.selector-open .figure-primary {
    --breathe-base: translateX(calc(-50% + 200px));
    transform: var(--breathe-base);
  }

  /* Debate mode: two figures side by side */
  body.debate-mode .figure-primary {
    --breathe-base: translateX(calc(-50% - 160px));
    transform: var(--breathe-base);
    width: min(380px, 44vw);
    height: 70vh;
  }
  body.debate-mode .figure-secondary {
    display: flex;
    --breathe-base: translateX(calc(-50% + 160px));
    transform: var(--breathe-base);
    width: min(380px, 44vw);
    height: 70vh;
    animation-delay: -3s;
  }

  /* Story now lives in a right-side panel (no full takeover). The avatar
     shifts left to stay centered in the remaining viewport — same pattern
     as Reader / Library / Bio. */
  body.story-open .figure-primary {
    --breathe-base: translateX(calc(-50% - 560px / 2));
    transform: var(--breathe-base);
  }
  body.reader-open .figure-stage { opacity: 0.7; filter: blur(2px); }
  body.library-open .figure-stage { transform: var(--breathe-base, translateX(-50%)) translateY(0); }

  /* ── TOP BAR ────────────────────────────────────────────── */
  .top-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 36px;
    /* iPhone: clear the status bar / notch (needs viewport-fit=cover). */
    padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 8px));
    padding-left: max(36px, calc(env(safe-area-inset-left, 0px) + 16px));
    padding-right: max(36px, calc(env(safe-area-inset-right, 0px) + 16px));
    transition: opacity 0.4s ease;
  }
  /* Story is now a right-panel; top bar stays visible. (Previously hidden.) */

  /* The legend name doubles as the character-picker trigger, so it carries a
     subtle, persistent "control" treatment (soft pill) that reads as tappable
     at rest on desktop AND mobile — not just on hover. */
  .legend-name {
    display: inline-flex; align-items: baseline; gap: 12px;
    cursor: pointer;
    padding: 7px 16px;
    margin: -7px -16px;
    border-radius: 16px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
  }
  .legend-name:hover {
    opacity: 0.92;
    background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
  }
  .legend-name:focus-visible {
    outline: 2px solid var(--warm-glow);
    outline-offset: 3px;
  }
  .legend-name h1 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 34px;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    letter-spacing: -0.028em; line-height: 1.05; color: var(--text);
  }
  .legend-name h1 em {
    font-style: italic; font-weight: 300; color: var(--warm-glow);
  }
  .legend-name .lifespan {
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .chevron {
    margin-left: 4px; color: var(--warm-glow);
    opacity: 0.8;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .legend-name:hover .chevron { transform: translateY(2px); opacity: 1; }

  /* Debate mode: dual legend names */
  body.debate-mode .legend-name h1 { font-size: 22px; }
  body.debate-mode .legend-name .lifespan { display: none; }
  body.debate-mode .legend-name h1::after {
    content: ' × Marcus Aurelius';
    font-style: italic;
    font-weight: 300;
    color: var(--tertiary);
  }
  .end-debate {
    display: none;
    margin-left: 12px;
    padding: 5px 12px;
    background: rgba(196, 69, 54, 0.1);
    border: 1px solid rgba(196, 69, 54, 0.25);
    border-radius: 999px;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--crimson);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .end-debate:hover { background: rgba(196, 69, 54, 0.18); }
  body.debate-mode .end-debate { display: inline-flex; align-items: center; gap: 6px; }

  .profile-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.06), var(--panel-bg) 60%);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 160, 88, 0.18);
    border-radius: 999px; cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
  }
  .profile-chip:hover {
    border-color: rgba(212, 160, 88, 0.34);
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.12), rgba(28, 34, 44, 0.72) 60%);
    box-shadow: inset 0 0 12px rgba(255, 215, 130, 0.08);
  }
  body[data-mode="light"] .profile-chip {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.10), rgba(255, 250, 240, 0.55) 60%);
    border: 1px solid rgba(184, 138, 62, 0.30);
  }
  body[data-mode="light"] .profile-chip:hover {
    border-color: rgba(184, 138, 62, 0.5);
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.16), rgba(255, 250, 240, 0.75) 60%);
    box-shadow: inset 0 0 12px rgba(184, 138, 62, 0.10);
  }
  .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #6b5638, #3a2d1f);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--text);
    box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px var(--amber), 0 0 12px var(--warm-glow-soft);
  }
  .profile-chip .crown-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
    background: var(--premium-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--premium);
  }
  body.is-patron .profile-chip {
    border-color: rgba(212, 160, 88, 0.4);
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.08), rgba(20, 24, 31, 0.55));
    box-shadow: inset 0 0 12px rgba(255, 215, 130, 0.08);
  }
  body.is-patron .profile-chip .crown-label::before {
    content: '✦  ';
    font-size: 9px;
    -webkit-text-fill-color: var(--premium);
    color: var(--premium);
  }

  /* ── RIGHT RAIL ─────────────────────────────────────────── */
  .right-rail {
    position: fixed; right: max(28px, calc(env(safe-area-inset-right, 0px) + 14px)); top: 50%;
    transform: translateY(-50%); z-index: 10;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 8px;
    /* Short screens (landscape iPhone): keep the rail scrollable instead of
       overflowing off-screen. */
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--panel-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    transition: opacity 0.4s ease;
  }
  .right-rail::-webkit-scrollbar { display: none; }
  /* Story is now a right-panel; rail stays visible. (Previously hidden.) */

  .rail-btn {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-dim); cursor: pointer;
    border-radius: 20px; transition: all 0.2s ease;
  }
  .rail-btn:hover { color: var(--text); background: var(--hover-tint); }
  .rail-btn.active { color: var(--warm-glow); background: rgba(212, 165, 116, 0.08); }
  .rail-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
  /* Tiered emphasis — daily / occasional / meta */
  .rail-btn[data-tier="occasional"]  { opacity: 0.78; }
  .rail-btn[data-tier="occasional"]:hover { opacity: 1; }
  /* Rail button with "coming soon" state — muted by default, hover still
     lights up so it doesn't feel broken. Small italic Fraunces dot in the
     top-right marks it as upcoming. */
  .rail-btn.rail-btn-soon {
    opacity: 0.45;
    cursor: help;
  }
  body.is-signed-in .rail-btn.rail-btn-soon { opacity: 0.45; }
  .rail-btn.rail-btn-soon:hover { opacity: 0.85; }
  .rail-soon-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a058, #8b3a1e);
    box-shadow: 0 0 0 2px var(--panel-bg);
  }
  /* Deeper rooms (Story, Debate, Lessons, Tutor) are hidden for anonymous
     visitors — first-impression rail shows only Bio. After sign-in they
     reveal with a staggered fade, like rooms in a hall lighting up one by one. */
  body:not(.is-signed-in) .rail-btn[data-tier="occasional"],
  body:not(.is-signed-in) .rail-btn.meta,
  body:not(.is-signed-in) .rail-divider {
    opacity: 0; pointer-events: none;
    max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0;
    overflow: hidden;
    transition: none;
  }
  /* Settled state for signed-in users — staggered entrance using house easing */
  body.is-signed-in .rail-btn[data-tier="occasional"],
  body.is-signed-in .rail-btn.meta,
  body.is-signed-in .rail-divider {
    animation: rail-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  body.is-signed-in #rail-library  { animation-delay: 0.05s; }
  body.is-signed-in #rail-museum   { animation-delay: 0.10s; }
  body.is-signed-in #rail-timeline { animation-delay: 0.15s; }
  body.is-signed-in #rail-story    { animation-delay: 0.20s; }
  body.is-signed-in #rail-debate   { animation-delay: 0.25s; }
  body.is-signed-in .rail-divider  { animation-delay: 0.32s; }
  body.is-signed-in #rail-lessons  { animation-delay: 0.40s; }
  body.is-signed-in #rail-tutor    { animation-delay: 0.48s; }
  @keyframes rail-reveal {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* The :not(.is-signed-in) rule above sets occasional opacity to 0; this
     restores the rest state (0.78) for signed-in occasional buttons. */
  body.is-signed-in .rail-btn[data-tier="occasional"] { opacity: 0.78; }
  body.is-signed-in .rail-btn.meta { opacity: 1; }
  .rail-divider { height: 1px; margin: 6px 8px; background: var(--panel-border); }
  .rail-btn::before {
    content: attr(data-label);
    position: absolute; right: calc(100% + 14px); top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: var(--tooltip-bg); backdrop-filter: blur(10px);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    color: var(--tooltip-text); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .rail-btn:hover::before { opacity: 1; transform: translateY(-50%) translateX(-4px); }
  .rail-btn.meta { color: var(--text-faint); }
  .rail-btn.meta:hover { color: var(--secondary); }
  .rail-btn.meta.active { color: var(--secondary); background: var(--secondary-soft); }

  /* ── CHAT ZONE ─────────────────────────────────────────── */
  .chat-zone {
    position: fixed;
    /* --kb-offset is set by ChatDragController when the iOS keyboard opens so
       the input lifts above it; 0 otherwise. */
    bottom: calc(36px + var(--kb-offset, 0px)); left: 50%;
    transform: translateX(-50%); z-index: 10;
    width: min(680px, calc(100% - 180px));
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s ease, bottom 0.25s ease;
  }
  body.bio-open .chat-zone, body.selector-open .chat-zone {
    width: min(420px, calc(100% - 540px));
  }
  body.bio-open .chat-zone { transform: translateX(calc(-50% - 200px)); }
  body.selector-open .chat-zone { transform: translateX(calc(-50% + 200px)); }
  /* Story is now a right-panel; chat stays active so the user can ask
     about what they're reading. Shift left to clear the panel. */
  body.story-open .chat-zone {
    width: min(420px, calc(100% - 620px));
    transform: translateX(calc(-50% - 260px));
  }
  body.reader-open .chat-zone .prompt-row { opacity: 0; pointer-events: none; }
  body.library-open .chat-zone .prompt-row { opacity: 0; pointer-events: none; }

  .prompt-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .prompt-chip {
    padding: 8px 16px;
    background: var(--panel-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 13px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    cursor: pointer; transition: all 0.25s ease;
    animation: chip-float 6s ease-in-out infinite;
  }
  .prompt-chip:nth-child(2) { animation-delay: -2s; }
  .prompt-chip:nth-child(3) { animation-delay: -4s; }
  .prompt-chip:hover {
    color: var(--text); border-color: var(--panel-border-hot);
    background: var(--chip-hover-bg); transform: translateY(-2px);
  }
  .prompt-chip.consumed {
    animation: chip-consume 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
  }

  /* ── RESUME BANNER ────────────────────────────────────────
     "Where were we" moment for returning readers. A quiet italic chip
     near the top of the scene, only on returning visits with a saved
     last-reading. Auto-fades. Click resumes. Museum-y, never alarming. */
  .resume-banner {
    position: fixed;
    top: 96px; left: 50%;
    transform: translateX(-50%) translateY(-14px);
    z-index: 24;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 9px 10px 9px 18px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(28, 34, 44, 0.55));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body[data-mode="light"] .resume-banner {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.18), rgba(255, 250, 240, 0.78));
    border: 1px solid rgba(184, 138, 62, 0.32);
    box-shadow: 0 6px 18px rgba(80, 50, 20, 0.12);
  }
  body.resume-show .resume-banner {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .resume-banner:hover {
    border-color: rgba(212, 165, 116, 0.45);
    transform: translateX(-50%) translateY(-1px);
  }
  body[data-mode="light"] .resume-banner:hover {
    border-color: rgba(184, 138, 62, 0.55);
  }
  .resume-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-dim);
    letter-spacing: 0.005em;
  }
  .resume-text em {
    font-style: italic;
    color: var(--warm-glow);
    font-weight: 400;
  }
  .resume-arrow {
    color: var(--warm-glow);
    font-size: 14px;
    font-family: 'Manrope', sans-serif;
    transition: transform 0.2s ease;
  }
  .resume-banner:hover .resume-arrow { transform: translateX(2px); }
  .resume-dismiss {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    border-radius: 50%;
    margin-left: 4px;
    transition: all 0.18s ease;
  }
  .resume-dismiss:hover { color: var(--text); background: var(--hover-tint); }

  /* ── KEYBOARD SHORTCUTS OVERLAY ─────────────────────────── */
  .kbd-overlay {
    position: fixed; inset: 0; z-index: 250;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20, 14, 8, 0.55), rgba(5, 8, 14, 0.72));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body[data-mode="light"] .kbd-overlay {
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(80, 50, 20, 0.18), rgba(80, 50, 20, 0.40));
  }
  body.kbd-open .kbd-overlay { opacity: 1; pointer-events: auto; }
  .kbd-card {
    position: relative;
    max-width: 460px; width: 90%;
    padding: 36px 36px 28px;
    background: rgba(28, 34, 44, 0.94);
    backdrop-filter: blur(40px);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.05), inset 0 1px 0 rgba(244, 239, 230, 0.07);
  }
  body[data-mode="light"] .kbd-card {
    background: rgba(255, 247, 232, 0.97);
    border: 1px solid rgba(31, 24, 16, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 32px 64px rgba(80, 50, 20, 0.18);
  }
  .kbd-close {
    position: absolute; top: 18px; right: 18px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-dim); cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
  }
  .kbd-close:hover { color: var(--text); background: var(--hover-tint); }
  .kbd-eyebrow {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px;
    color: var(--warm-glow);
  }
  .kbd-title {
    margin-top: 6px;
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: 22px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.2; letter-spacing: -0.018em;
    color: var(--text);
  }
  .kbd-list {
    margin-top: 22px;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
  .kbd-list li {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px;
    color: var(--text-dim);
  }
  .kbd-list kbd {
    flex-shrink: 0;
    min-width: 28px;
    padding: 3px 8px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; font-weight: 600;
    color: var(--text);
    text-align: center;
  }

  /* ── CHAT THREAD ──────────────────────────────────────────
     The conversation surface sits above the chat input. Empty when
     the user hasn't spoken yet (shows an empty-state italic line).
     User messages on the right (warm tinted pill), legend responses
     on the left (parchment-tinted italic paragraph). Older messages
     fade as new ones come in. */
  .chat-thread {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
    margin-bottom: 6px;
    /* Top fade so the older messages dissolve into the scene */
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 100%);
    scroll-behavior: smooth;
  }
  .chat-thread::-webkit-scrollbar { width: 3px; }
  .chat-thread::-webkit-scrollbar-thumb { background: var(--panel-border-hot); border-radius: 4px; }
  .chat-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 36px 10px;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--text-faint);
    line-height: 1.4;
    pointer-events: none;
  }
  /* The empty line is only meaningful while the thread is empty */
  .chat-thread:not(.has-messages) .chat-empty { display: flex; }
  .chat-thread.has-messages .chat-empty { display: none; }

  .chat-msg {
    max-width: 80%;
    padding: 10px 16px;
    border-radius: 18px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14.5px; line-height: 1.5;
    animation: msg-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes msg-rise {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  /* User messages — warm tint, right-aligned */
  .chat-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.18), rgba(212, 165, 116, 0.08));
    border: 1px solid rgba(212, 165, 116, 0.22);
    color: var(--text);
    border-bottom-right-radius: 4px;
  }
  body[data-mode="light"] .chat-msg.user {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.22), rgba(184, 138, 62, 0.10));
    border-color: rgba(184, 138, 62, 0.30);
  }
  /* Legend responses — parchment-tinted, italic, left-aligned */
  .chat-msg.legend {
    align-self: flex-start;
    background: rgba(28, 34, 44, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    color: var(--text);
    font-style: italic;
    border-bottom-left-radius: 4px;
  }
  body[data-mode="light"] .chat-msg.legend {
    background: rgba(255, 247, 232, 0.85);
    border-color: rgba(31, 24, 16, 0.10);
  }
  .chat-msg.legend.is-long::after {
    content: 'Open as thought →';
    display: block;
    margin-top: 8px;
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-size: 11px; letter-spacing: 0.08em;
    color: var(--warm-glow);
    cursor: pointer;
  }
  /* The reading-out portion of a long response when truncated in-thread */
  .chat-msg.legend .legend-snip { display: inline; }

  /* ── Word-by-word reveal for legend responses ──
     Each word fades in with a brief warm-glow flash, like the legend is
     speaking them in sequence. The stagger (--word-step, default 35ms)
     is set on the message via inline style so longer replies scale to
     a sensible cap (see appendChatMessage in JS). */
  @keyframes word-light-up {
    0%   { opacity: 0; filter: brightness(1.45);
           text-shadow: 0 0 14px var(--warm-glow-soft, rgba(212, 160, 88, 0.55)); }
    55%  { opacity: 1; filter: brightness(1.15);
           text-shadow: 0 0 8px var(--warm-glow-soft, rgba(212, 160, 88, 0.35)); }
    100% { opacity: 1; filter: brightness(1); text-shadow: none; }
  }
  .chat-msg.legend .word {
    display: inline-block;
    opacity: 0;
    animation: word-light-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--word-step, 35ms));
  }
  /* Respect motion preferences — skip the per-word reveal */
  @media (prefers-reduced-motion: reduce) {
    .chat-msg.legend .word { opacity: 1; animation: none; }
  }

  /* "Tell me an interesting fact" — the wildcard prompt button.
     Persistent (doesn't rotate), accented with the per-character color
     (--warm-glow) so it tints to match each legend like the rest of the chat. */
  .fact-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px 8px 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--warm-glow) 12%, transparent), var(--panel-bg) 70%);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--warm-glow) 30%, transparent);
    border-radius: 999px;
    color: var(--text);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    animation: chip-float 6s ease-in-out infinite;
    animation-delay: -1s;
  }
  .fact-btn em { font-style: italic; font-weight: 400; color: var(--warm-glow); margin-left: 2px; }
  .fact-btn .fact-icon { color: var(--warm-glow); flex-shrink: 0; }
  .fact-btn:hover {
    border-color: color-mix(in srgb, var(--warm-glow) 50%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--warm-glow) 18%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--warm-glow) 18%, transparent), var(--panel-bg) 70%);
  }
  body[data-mode="light"] .fact-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warm-glow) 18%, transparent), rgba(255, 250, 240, 0.6) 70%);
    border: 1px solid color-mix(in srgb, var(--warm-glow) 40%, transparent);
  }
  body[data-mode="light"] .fact-btn:hover {
    border-color: color-mix(in srgb, var(--warm-glow) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--warm-glow) 26%, transparent), rgba(255, 250, 240, 0.8) 70%);
    box-shadow: 0 8px 18px rgba(80, 50, 20, 0.12);
  }
  /* On send (when fact button fires), briefly pulse to acknowledge */
  .fact-btn.is-firing {
    animation: fact-fire 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes fact-fire {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); box-shadow: 0 12px 28px color-mix(in srgb, var(--warm-glow) 32%, transparent); }
    100% { transform: scale(1); }
  }
  @keyframes chip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes chip-consume {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(24px) scale(0.86); }
  }

  .chat-input {
    width: 100%; position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 16px;
    background: rgba(28, 34, 44, 0.65);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(244, 239, 230, 0.06);
    border-radius: 999px;
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.04),
      inset 0 1px 0 rgba(244, 239, 230, 0.05),
      0 0 32px rgba(212, 165, 116, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .chat-input:focus-within {
    background: rgba(34, 42, 54, 0.78);
    border-color: rgba(244, 239, 230, 0.12);
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.06),
      0 0 32px rgba(212, 165, 116, 0.08);
  }
  body[data-mode="light"] .chat-input {
    background: rgba(255, 250, 240, 0.72);
    border: 1px solid rgba(31, 24, 16, 0.12);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 8px 24px rgba(80, 50, 20, 0.10);
  }
  body[data-mode="light"] .chat-input:focus-within {
    background: rgba(255, 250, 240, 0.88);
    border-color: rgba(31, 24, 16, 0.22);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55) inset,
      0 10px 28px rgba(80, 50, 20, 0.14);
  }
  .chat-icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-dim); cursor: pointer;
    border-radius: 50%; transition: all 0.2s ease;
  }
  .chat-icon-btn:hover { color: var(--text); background: var(--hover-tint); }
  .chat-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.6; }
  .chat-field {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text); font-family: 'Manrope', sans-serif;
    font-size: 15px; padding: 8px 4px;
  }
  .chat-field::placeholder {
    color: var(--text-faint); font-family: 'Fraunces', serif;
    font-style: italic; font-variation-settings: 'opsz' 14;
  }

  /* ── EMPTY-SEND ERROR LINE ────────────────────────────────
     A quiet "A thought, perhaps?" italic line appears below the chat
     input when the user clicks Send with nothing typed. In-character,
     never an "Error" — fades in, holds, fades out. */
  .empty-send-line {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%; transform: translateX(-50%) translateY(6px);
    padding: 5px 14px;
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px; letter-spacing: 0.005em;
    color: var(--text-dim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
  }
  body.is-empty-send .empty-send-line {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .empty-send-line em { font-style: italic; color: var(--warm-glow); }
  /* Send button shakes (gentle, museum-y, not aggressive) when empty-send fires */
  body.is-empty-send .send-btn {
    animation: send-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  @keyframes send-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
  }

  /* Thinking indicator — three italic dots that breathe sequentially.
     Sits above the chat input when the legend is "writing." */
  .thinking-line {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 5px 14px;
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px;
    color: var(--text-dim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
  }
  body.is-thinking .thinking-line { opacity: 1; }
  .thinking-line .dots {
    display: inline-flex; gap: 3px;
  }
  .thinking-line .dots span {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--warm-glow);
    opacity: 0.4;
    animation: dot-breathe 1.4s ease-in-out infinite;
  }
  .thinking-line .dots span:nth-child(2) { animation-delay: 0.18s; }
  .thinking-line .dots span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes dot-breathe {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
  }

  /* Welcome-patron one-shot — fades in, holds, fades out */
  .welcome-patron {
    position: fixed;
    top: 90px; left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.18), rgba(20, 24, 31, 0.7));
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 999px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--premium);
    box-shadow: inset 0 0 12px rgba(255, 215, 130, 0.10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.is-patron .welcome-patron.show {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }
  body[data-mode="light"] .welcome-patron {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.22), rgba(255, 250, 240, 0.92));
    border: 1px solid rgba(184, 138, 62, 0.4);
    color: var(--premium-deep);
    box-shadow: 0 8px 22px rgba(80, 50, 20, 0.18), inset 0 0 12px rgba(184, 138, 62, 0.12);
  }
  .send-btn {
    position: relative;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--warm-glow); color: #1a1208;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .send-btn:hover { background: var(--amber); transform: scale(1.05); }
  .send-btn:active { transform: scale(0.96); }
  .send-btn svg {
    width: 16px; height: 16px;
    position: absolute;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .send-btn .icon-check { opacity: 0; transform: scale(0.5); }
  .send-btn.is-sent .icon-send  { opacity: 0; transform: scale(0.5); }
  .send-btn.is-sent .icon-check { opacity: 1; transform: scale(1); }

  /* Debate mode: portrait dots flanking the input */
  .debate-dot {
    display: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background-size: cover; background-position: center 20%;
    border: 2px solid var(--text-faint);
    cursor: pointer;
    transition: all 0.25s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  body.debate-mode .debate-dot { display: block; }
  .debate-dot.left {
    left: -44px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/200px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg');
    filter: sepia(0.2);
    border-color: var(--warm-glow);
    box-shadow: 0 0 12px var(--warm-glow-soft);
  }
  .debate-dot.right {
    right: -44px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Marcus_Aurelius_Glyptothek_Munich.jpg/200px-Marcus_Aurelius_Glyptothek_Munich.jpg');
    filter: contrast(1.05) brightness(0.95);
  }
  .debate-dot:hover { transform: translateY(-50%) scale(1.1); }

  /* ── CAMERA CONTROLS (debate mode) ─────────────────────── */
  .camera-cluster {
    display: none;
    position: fixed; bottom: 130px; right: 100px; z-index: 9;
    flex-direction: column; gap: 4px;
    padding: 6px;
    background: var(--panel-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
  }
  body.debate-mode .camera-cluster { display: flex; }
  .cam-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-faint);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
  }
  .cam-btn:hover { color: var(--text); background: var(--hover-tint); }
  .cam-btn.active { color: var(--tertiary); background: var(--tertiary-soft); }

  /* ── BIO PANEL ─────────────────────────────────────────── */
  .bio-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 92vw);
    z-index: 20;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto; overflow-x: hidden;
  }
  body.bio-open .bio-panel { transform: translateX(0); }

  /* ── TIMELINE PANEL ───────────────────────────────────────
     Right-side panel matching the user's old-UI screenshot:
     vertical year strip on the right, main event card on the left. */
  .timeline-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 92vw);
    z-index: 22;
    background: rgba(20, 16, 12, 0.82);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  body.timeline-open .timeline-panel { transform: translateX(0); }
  body[data-mode="light"] .timeline-panel {
    background: rgba(255, 247, 232, 0.92);
    border-left: 1px solid rgba(184, 138, 62, 0.22);
  }
  .timeline-panel .timeline-close {
    position: absolute; top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px)); right: 18px;
    z-index: 3;
  }
  .timeline-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 16px;
    padding: 48px 32px 36px;
    overflow: hidden;
  }
  .timeline-main {
    overflow-y: auto;
    padding-right: 8px;
  }
  .timeline-year-big {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    font-weight: 300;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text);
    margin-bottom: 14px;
  }
  body[data-mode="light"] .timeline-year-big { color: var(--ink, #1f1810); }
  .timeline-event-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 18px;
  }
  .timeline-event-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-weight: 400;
    font-size: 24px; line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
  }
  body[data-mode="light"] .timeline-event-title { color: var(--ink, #1f1810); }
  .timeline-event-title em { font-style: italic; color: var(--warm-glow); }
  .timeline-learn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.18), rgba(212, 160, 88, 0.04) 70%);
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 999px;
    color: var(--warm-glow);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .timeline-learn:hover {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.28), rgba(212, 160, 88, 0.08));
    border-color: rgba(212, 160, 88, 0.52);
    transform: translateY(-1px);
  }
  .timeline-learn svg { stroke-width: 1.8; }
  body[data-mode="light"] .timeline-learn {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.18), rgba(184, 138, 62, 0.05) 70%);
    border-color: rgba(184, 138, 62, 0.36);
    color: var(--warm-glow);
  }
  .timeline-body {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14.5px; line-height: 1.65;
    color: var(--text-dim);
    margin: 0;
    max-width: 540px;
  }

  /* Year strip on the right — clickable pills, current = filled */
  .timeline-strip {
    list-style: none; margin: 0; padding: 4px 0;
    display: flex; flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .timeline-strip::-webkit-scrollbar { width: 3px; }
  .timeline-strip::-webkit-scrollbar-thumb { background: var(--panel-border-hot); border-radius: 4px; }
  .timeline-year {
    display: flex; align-items: center; justify-content: center;
    height: 32px;
    padding: 0 10px;
    background: var(--panel-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--text-dim);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .timeline-year:hover {
    background: var(--hover-tint);
    border-color: var(--panel-border-hot);
    color: var(--text);
  }
  .timeline-year.is-current {
    background: linear-gradient(135deg, #2a221a, #1f1810);
    border-color: rgba(212, 160, 88, 0.42);
    color: #f3e2b8;
    box-shadow: 0 0 0 1px rgba(212, 160, 88, 0.18) inset;
    transform: translateX(-4px);
  }
  body[data-mode="light"] .timeline-year.is-current {
    background: linear-gradient(135deg, #2a221a, #1f1810);
    color: #f3e2b8;
  }
  .timeline-year[data-end="true"] {
    margin-top: 6px;
    background: transparent;
    border-style: dashed;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
  }
  .timeline-year[data-end="true"]:hover {
    border-color: var(--panel-border-hot);
    color: var(--text-dim);
  }
  /* Placeholder badge for non-Leonardo timelines */
  .timeline-placeholder-badge {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warm-glow);
    padding: 3px 8px;
    background: rgba(212, 160, 88, 0.18);
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 4px;
    margin-bottom: 12px;
  }
  /* Hide top-bar / chat-zone when timeline is taking over */
  body.timeline-open .figure-primary {
    --breathe-base: translateX(calc(-50% - 440px / 2));
    transform: var(--breathe-base);
  }
  body.timeline-open .chat-zone {
    width: min(420px, calc(100% - 500px));
    transform: translateX(calc(-50% - 200px));
  }
  .bio-panel::before {
    content: ''; position: absolute;
    left: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }
  .panel-close {
    position: sticky; top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px)); left: 100%;
    transform: translateX(-56px);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim); cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2; margin-bottom: -36px;
  }
  .panel-close:hover {
    color: var(--text); background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
    transform: translateX(-56px) rotate(90deg);
  }
  .panel-content { padding: 24px 32px 48px; }
  .bio-header { padding: 24px 0 12px; }

  /* ── BIO "IN PREPARATION" NOTICE ──────────────────────────
     The Bio panel's archive (gallery, bookshelf, prose) is mocked as
     Leonardo's. For any other legend, hide that content and show an
     honest museum-y notice. Honest beats half-right. */
  /* ── PLACEHOLDER BANNER ────────────────────────────────────
     For non-Leonardo legends the bio + shelf sections show LOREM IPSUM
     content (clearly marked) so the structure is visible for the backend
     merge agent. The .bio-preparing section becomes a small banner at
     the top of the Bio panel saying "this is placeholder, replace it". */
  .bio-preparing { display: none; }
  body:not([data-legend="leonardo"]) .bio-preparing {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px -32px 20px;
    padding: 10px 32px;
    background: linear-gradient(90deg, rgba(212, 165, 116, 0.16), rgba(212, 165, 116, 0.04) 70%);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
  }
  body[data-mode="light"]:not([data-legend="leonardo"]) .bio-preparing {
    background: linear-gradient(90deg, rgba(184, 138, 62, 0.14), rgba(184, 138, 62, 0.03) 70%);
  }
  .bio-preparing-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warm-glow);
    padding: 3px 8px;
    background: rgba(212, 160, 88, 0.18);
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0;
  }
  .bio-preparing-eyebrow em { font-style: normal; }
  .bio-preparing-body {
    flex: 1;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px; line-height: 1.5;
    color: var(--text-dim);
    margin: 0; max-width: none;
  }
  .bio-preparing-body em {
    font-style: italic;
    color: var(--warm-glow);
    font-weight: 400;
  }
  /* Hide the decorative ornament in banner mode */
  .bio-preparing-ornament { display: none; }

  /* Lorem ipsum books / images get a subtle "placeholder" treatment:
     muted background, "PLACEHOLDER" diagonal watermark on cover. */
  .book.is-placeholder, .lib-book.is-placeholder {
    position: relative;
    opacity: 0.92;
  }
  .book.is-placeholder::after {
    content: 'LOREM';
    position: absolute;
    top: 6px; right: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 7px; letter-spacing: 0.18em;
    color: rgba(255, 215, 130, 0.55);
    background: rgba(20, 16, 12, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
  }
  .bio-gallery-img.is-placeholder {
    background-image: none !important;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.18), rgba(139, 58, 30, 0.10));
    display: flex; align-items: center; justify-content: center;
    color: rgba(80, 50, 20, 0.32);
  }
  body[data-mode="dark"] .bio-gallery-img.is-placeholder {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.10), rgba(139, 58, 30, 0.08));
    color: rgba(244, 239, 230, 0.30);
  }
  .bio-gallery-img.is-placeholder::after {
    content: '🖼';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    opacity: 0.4;
    pointer-events: none;
  }
  /* Mark text content placeholders with a subtle dotted underline so the
     merge agent (and any human reviewer) can see they're lorem ipsum. */
  [data-placeholder="lorem"] {
    /* No visible style by default — the lorem ipsum text itself is the signal.
       But the attribute is queryable from JS or the merge tool. */
  }

  /* ── LESSON HUB "in preparation" — same pattern as Bio + Story ── */
  .lessons-preparing { display: none; }
  body:not([data-legend="leonardo"]) .lessons-preparing {
    display: block;
    margin: 22px -28px 0;
    padding: 28px 28px 30px;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.04), transparent 70%);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    text-align: center;
  }
  body[data-mode="light"]:not([data-legend="leonardo"]) .lessons-preparing {
    background: linear-gradient(180deg, rgba(184, 138, 62, 0.06), transparent 70%);
  }
  .lessons-preparing-eyebrow {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px; letter-spacing: 0.04em;
    color: var(--warm-glow);
    margin-bottom: 12px;
  }
  .lessons-preparing-body {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14px; line-height: 1.65;
    color: var(--text-dim);
    max-width: 320px;
    margin: 0 auto;
  }
  .lessons-preparing-body em {
    font-style: italic;
    color: var(--warm-glow);
    font-weight: 400;
  }
  .lessons-preparing-ornament {
    margin: 18px auto 0;
    width: 70px; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><g fill='%238b3a1e'><circle cx='20' cy='6' r='1.4'/><circle cx='60' cy='6' r='2.6'/><circle cx='100' cy='6' r='1.4'/></g><g stroke='%238b3a1e' stroke-width='0.9'><line x1='28' y1='6' x2='52' y2='6'/><line x1='68' y1='6' x2='92' y2='6'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
  }

  /* Hide Leonardo-specific lesson content for non-Leonardo legends */
  body:not([data-legend="leonardo"]) .lesson-hub .lesson-continue,
  body:not([data-legend="leonardo"]) .lesson-hub .filter-row,
  body:not([data-legend="leonardo"]) .lesson-hub .lesson-list {
    display: none;
  }

  /* ── TUTOR "in preparation" — fourth surface, same pattern ── */
  .tutor-preparing { display: none; }
  body:not([data-legend="leonardo"]) .tutor-preparing {
    display: block;
    margin: 22px 28px 0;
    padding: 26px 22px 28px;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.04), transparent 70%);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    text-align: center;
  }
  body[data-mode="light"]:not([data-legend="leonardo"]) .tutor-preparing {
    background: linear-gradient(180deg, rgba(184, 138, 62, 0.06), transparent 70%);
  }
  .tutor-preparing-eyebrow {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px; letter-spacing: 0.04em;
    color: var(--warm-glow);
    margin-bottom: 12px;
  }
  .tutor-preparing-body {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14px; line-height: 1.65;
    color: var(--text-dim);
    max-width: 280px;
    margin: 0 auto;
  }
  .tutor-preparing-body em {
    font-style: italic;
    color: var(--warm-glow);
    font-weight: 400;
  }
  .tutor-preparing-ornament {
    margin: 16px auto 0;
    width: 64px; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><g fill='%238b3a1e'><circle cx='20' cy='6' r='1.4'/><circle cx='60' cy='6' r='2.6'/><circle cx='100' cy='6' r='1.4'/></g><g stroke='%238b3a1e' stroke-width='0.9'><line x1='28' y1='6' x2='52' y2='6'/><line x1='68' y1='6' x2='92' y2='6'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
  }

  /* Hide Leonardo-specific tutor sections for non-Leonardo legends */
  body:not([data-legend="leonardo"]) .tutor-panel .tutor-section {
    display: none;
  }
  .bio-header h2 {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: clamp(26px, 4.2vw, 34px);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.05; letter-spacing: -0.028em;
    word-break: break-word;
  }
  .bio-header h2 em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .bio-header .tag {
    margin-top: 10px;
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .shelf {
    margin: 28px -32px 32px;
    padding: 22px 32px 26px;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.04), rgba(212, 165, 116, 0.01) 70%, transparent);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
  }
  .shelf-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 18px;
  }
  .shelf-label h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 18px;
    font-variation-settings: 'opsz' 144;
  }
  .shelf-label .count {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .shelf-row {
    display: flex; gap: 14px;
    overflow-x: auto; padding-bottom: 14px;
    scrollbar-width: thin;
  }
  .shelf-row::-webkit-scrollbar { height: 4px; }
  .shelf-row::-webkit-scrollbar-thumb { background: var(--panel-border-hot); border-radius: 4px; }

  /* ── SAVED PASSAGES ───────────────────────────────────────
     Closes the loop on the reader's paragraph bookmarks: clicking a dot
     in the reader saves it; this section in Bio lists those saves so the
     user can revisit. Hidden when nothing is saved. */
  .saved-passages {
    display: none;
    margin: 0 -32px 28px;
    padding: 22px 32px 22px;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.035), transparent 80%);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
  }
  .saved-passages.has-items { display: block; }
  .saved-passages-list { display: flex; flex-direction: column; gap: 10px; }
  .saved-passage {
    display: block;
    text-align: left;
    width: 100%;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 12px 14px 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body[data-mode="light"] .saved-passage {
    background: rgba(255, 248, 230, 0.55);
  }
  .saved-passage:hover {
    background: var(--hover-tint, rgba(212, 165, 116, 0.08));
    border-color: var(--panel-border-hot);
    transform: translateY(-1px);
  }
  .saved-passage-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .saved-passage-meta em {
    color: var(--warm-glow);
    font-family: 'Fraunces', serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 12px;
  }
  .saved-passage-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 60;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-soft);
  }
  .saved-passage-unsave {
    display: inline-block;
    background: transparent;
    border: 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 8px;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .saved-passage:hover .saved-passage-unsave { opacity: 0.8; }
  .saved-passage-unsave:hover { color: var(--warm-glow); opacity: 1; }

  /* When user jumps to a passage from the Bio list, briefly flash the
     target paragraph so they can locate it on the page. */
  @keyframes bookmark-flash {
    0%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(212, 160, 88, 0); }
    25%      { background: rgba(212, 160, 88, 0.20); box-shadow: 0 0 0 8px rgba(212, 160, 88, 0.06); }
    70%      { background: rgba(212, 160, 88, 0.10); box-shadow: 0 0 0 10px rgba(212, 160, 88, 0.03); }
  }
  .reader-page p.bookmark-flash {
    animation: bookmark-flash 2.2s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 6px;
  }

  /* ── BIO GALLERY (Visual archive) ─────────────────────────
     Horizontal-scroll strip of images relevant to this legend.
     Click any image to enlarge in a lightbox. */
  .bio-gallery {
    margin: 28px -32px 28px;
    padding: 22px 32px 22px;
  }
  .bio-section-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 16px;
  }
  .bio-section-label h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 18px;
    font-variation-settings: 'opsz' 144;
    color: var(--text);
  }
  .bio-section-label .count {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .bio-gallery-row {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 12px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .bio-gallery-row::-webkit-scrollbar { height: 4px; }
  .bio-gallery-row::-webkit-scrollbar-thumb { background: var(--panel-border-hot); border-radius: 4px; }
  .bio-gallery-img {
    position: relative;
    flex-shrink: 0;
    width: 130px; height: 168px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-color: rgba(80, 60, 40, 0.18);
    border: 1px solid var(--panel-border);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    scroll-snap-align: start;
    padding: 0;
  }
  .bio-gallery-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
    border-radius: inherit;
  }
  .bio-gallery-img:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--warm-glow);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.40);
  }
  body[data-mode="light"] .bio-gallery-img:hover {
    box-shadow: 0 10px 22px rgba(80, 50, 20, 0.22);
  }
  .bio-gallery-img .img-caption {
    position: absolute; bottom: 8px; left: 10px; right: 10px;
    z-index: 2;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 11px;
    color: #fbf3e2;
    line-height: 1.2;
    text-align: left;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .bio-gallery-img:hover .img-caption {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── IMAGE LIGHTBOX (full-screen view on click) ── */
  .image-lightbox {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(5, 8, 14, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 60px 40px;
  }
  body[data-mode="light"] .image-lightbox {
    background: rgba(80, 50, 20, 0.72);
  }
  body.lightbox-open .image-lightbox { opacity: 1; pointer-events: auto; }
  .image-lightbox img {
    max-width: 88vw;
    max-height: 78vh;
    border-radius: 6px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.lightbox-open .image-lightbox img { transform: scale(1); }
  .image-lightbox-caption {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 14px;
    color: rgba(244, 239, 230, 0.78);
    letter-spacing: 0.04em;
  }
  .image-lightbox-close {
    position: absolute; top: 24px; right: 24px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(244, 239, 230, 0.08);
    border: 1px solid rgba(244, 239, 230, 0.18);
    border-radius: 50%;
    color: var(--text); cursor: pointer;
    transition: all 0.2s ease;
  }
  .image-lightbox-close:hover {
    background: rgba(244, 239, 230, 0.16);
    transform: rotate(90deg);
  }
  .book {
    flex-shrink: 0;
    width: 108px; height: 156px;
    border-radius: 3px 8px 8px 3px;
    cursor: pointer; position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.25), inset 5px 0 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column;
    padding: 14px 12px 12px 18px;
    overflow: hidden;
  }
  .book:hover {
    transform: translateY(-8px) rotateZ(-1deg);
    box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.25), inset 5px 0 1px rgba(255, 255, 255, 0.05), 0 16px 32px rgba(0, 0, 0, 0.55);
  }
  body[data-mode="light"] .book:hover {
    box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.25), inset 5px 0 1px rgba(255, 255, 255, 0.05), 0 14px 28px rgba(80, 50, 20, 0.30);
  }
  .book::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%);
    pointer-events: none; border-radius: inherit;
  }
  .book .book-meta {
    font-size: 8px; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
  }
  .book .book-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 500; font-size: 13px;
    line-height: 1.15; letter-spacing: -0.01em;
    color: rgba(255, 248, 230, 0.95);
    margin-top: auto;
  }
  .book .book-author {
    font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255, 248, 230, 0.6);
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255, 248, 230, 0.15);
  }
  /* ── LOCKED BOOK (BRIEF Tier 2.2 microinteraction) ────────
     A Patron-only book shows a quiet italic "Patron" tag in the corner
     for non-patrons. Click: book tilts + shimmers, then an italic line
     fades in beneath the shelf ("This volume is kept for Patrons."). */
  .book-locked-tag {
    display: none;
    position: absolute; top: 6px; right: 0;
    padding: 2px 8px 2px 9px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.95), rgba(192, 133, 64, 0.95));
    color: #1a1208;
    border-radius: 4px 0 0 4px;
    font-family: 'Fraunces', serif;
    font-size: 8px;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 6px rgba(192, 133, 64, 0.30);
    z-index: 3;
  }
  body:not(.is-patron) .book.is-locked .book-locked-tag { display: block; }
  /* Patron users see locked books open normally — no tag, no intercept */
  /* Shimmer animation when locked book is clicked by non-patron */
  .book.is-shimmering {
    animation: book-shimmer-tilt 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .book.is-shimmering::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 215, 130, 0.45) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -50% 0;
    animation: book-shimmer-sweep 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
  }
  @keyframes book-shimmer-tilt {
    0%   { transform: translateY(-8px) rotateZ(-1deg); }
    30%  { transform: translateY(-12px) rotateZ(-2.5deg); }
    100% { transform: translateY(-8px) rotateZ(-1deg); }
  }
  @keyframes book-shimmer-sweep {
    0%   { background-position: -50% 0; opacity: 0.8; }
    100% { background-position: 150% 0; opacity: 0; }
  }
  /* The "this volume is kept for Patrons" line — sits under the shelf */
  .locked-volume-line {
    margin: 14px 0 0;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px;
    color: var(--text-faint);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .locked-volume-line em { font-style: italic; color: var(--warm-glow); }
  body.show-locked-line .locked-volume-line {
    opacity: 1; transform: translateY(0);
    cursor: pointer;
    pointer-events: auto;
  }
  /* Patrons never see the locked line either */
  body.is-patron .locked-volume-line { display: none; }

  .book.b1 { background: linear-gradient(135deg, #4a2820, #2a1410); }
  .book.b2 { background: linear-gradient(135deg, #1f3a2e, #0f1f18); }
  .book.b3 { background: linear-gradient(135deg, #3a2a52, #1f1530); }
  .book.b4 { background: linear-gradient(135deg, #5a3a1e, #3a2410); }
  .book.b5 { background: linear-gradient(135deg, #2a3854, #15203a); }

  /* Real cover art: the extracted thumbnail fills the card, and the colored
     title/author text is hidden because the cover already carries them. The
     inset spine shadow + ::after sheen are kept so it still reads as a book. */
  .book.has-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
  }
  .book.has-cover .book-meta,
  .book.has-cover .book-title,
  .book.has-cover .book-author { display: none; }

  .bio-section { border-top: 1px solid var(--panel-border); }
  .bio-section:last-child { border-bottom: 1px solid var(--panel-border); }
  .bio-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0; cursor: pointer; user-select: none;
  }
  .bio-section-header h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 16px;
    font-variation-settings: 'opsz' 144;
  }
  .bio-section-chevron { color: var(--text-faint); transition: transform 0.3s ease; }
  .bio-section.collapsed .bio-section-chevron { transform: rotate(-90deg); }
  .bio-section-body {
    max-height: 600px; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    padding-bottom: 20px; opacity: 1;
  }
  .bio-section.collapsed .bio-section-body {
    max-height: 0; padding-bottom: 0; opacity: 0;
  }
  .bio-section-body p {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14px; line-height: 1.6;
    color: var(--text-dim); margin-bottom: 12px;
  }
  .bio-section-body p:last-child { margin-bottom: 0; }

  /* ── LEGEND SELECTOR (slides from left) ────────────────── */
  .selector-panel {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(460px, 92vw);
    z-index: 20;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-right: 1px solid var(--panel-border);
    transform: translateX(-100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto; overflow-x: hidden;
  }
  body.selector-open .selector-panel { transform: translateX(0); }
  .selector-panel::after {
    content: ''; position: absolute;
    right: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(270deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }
  .selector-close,
  .selector-maximize {
    position: absolute; top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px));
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim); cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
  }
  .selector-close { right: 20px; }
  .selector-maximize { left: 20px; }
  .selector-close:hover,
  .selector-maximize:hover {
    color: var(--text); background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
  }
  .selector-close:hover { transform: rotate(90deg); }
  .selector-maximize:hover { transform: scale(1.06); }
  .selector-header { padding: 72px 32px 0; }
  .selector-eyebrow {
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .selector-header h2 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 32px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.05; letter-spacing: -0.025em;
    margin-top: 6px;
  }
  .selector-header h2 em { font-style: italic; font-weight: 300; color: var(--warm-glow); }

  /* Side-panel search — reuses .hall-search look but spans the panel width
     and sits above the discipline pills. */
  .selector-search-row { padding: 20px 32px 0; }
  .selector-search-row .selector-search { display: flex; width: 100%; }
  .selector-search-row .selector-search input { min-width: 0; flex: 1; }

  /* Friendly empty-state shown when a side-panel search matches no legends. */
  .selector-empty {
    padding: 40px 32px;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--text-faint);
  }
  .selector-empty[hidden] { display: none; }

  .filter-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 18px 32px 24px;
    border-bottom: 1px solid var(--panel-border);
  }
  .filter-pill {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .filter-pill:hover { color: var(--text); border-color: var(--panel-border-hot); }
  .filter-pill.active {
    background: var(--text);
    color: var(--bg-deep);
    border-color: var(--text);
  }

  .legend-grid {
    padding: 20px 24px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .legend-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, #2a1f15, #15100a);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  body[data-mode="light"] .legend-card {
    background: linear-gradient(135deg, #d8c8a8, #b8a280);
    box-shadow: inset 0 0 0 1px rgba(80, 50, 20, 0.10);
  }
  /* Bottom-gradient overlay flips in light mode so portraits still read */
  body[data-mode="light"] .legend-card .gradient-overlay {
    background: linear-gradient(180deg, transparent 35%, rgba(40, 24, 12, 0.75) 100%);
  }
  /* And the info text stays white-on-portrait, since the overlay backs it */
  body[data-mode="light"] .legend-card .info h4 { color: #fbf3e2; }
  body[data-mode="light"] .legend-card .info h4 em { color: #e8b06a; }
  body[data-mode="light"] .legend-card .info .discipline { color: rgba(251, 243, 226, 0.72); }
  .legend-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.08),
      inset 0 0 40px rgba(212, 165, 116, 0.06);
  }
  body[data-mode="light"] .legend-card:hover {
    box-shadow:
      inset 0 0 0 1px rgba(31, 24, 16, 0.08),
      0 12px 24px rgba(80, 50, 20, 0.18);
  }
  .legend-card.is-active::before {
    content: ''; position: absolute; inset: 0;
    border: 2px solid var(--warm-glow);
    border-radius: 14px;
    box-shadow: inset 0 0 24px rgba(212, 165, 116, 0.3);
    z-index: 3; pointer-events: none;
  }
  .legend-card .portrait {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 25%;
    filter: sepia(0.2) contrast(1.05) brightness(0.85);
    transition: filter 0.3s ease, transform 4s ease;
  }
  .legend-card:hover .portrait { filter: sepia(0.05) contrast(1.1) brightness(0.95); transform: scale(1.04); }
  .legend-card .gradient-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  }
  .legend-card .info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 14px 14px;
    z-index: 2;
  }
  .legend-card .info h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-weight: 400; font-size: 17px;
    line-height: 1.1; letter-spacing: -0.015em;
    color: var(--text);
  }
  .legend-card .info h4 em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .legend-card .info .discipline { display: none; }
  .active-pill { display: none; }
  .legend-card.is-active::after {
    content: 'Active';
    position: absolute; top: 10px; right: 10px;
    padding: 3px 8px;
    background: var(--warm-glow);
    color: #1a1208;
    border-radius: 999px;
    font-size: 8px; letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 600;
    z-index: 4;
  }

  /* Portraits per legend */
  .lc-leonardo    .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/400px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg'); }
  .lc-buffett     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Warren_Buffett_KU_Visit.jpg/400px-Warren_Buffett_KU_Visit.jpg'); }
  .lc-ford        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Henry_ford_1919.jpg/400px-Henry_ford_1919.jpg'); }
  .lc-khan        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/YuanEmperorAlbumGenghisPortrait.jpg/400px-YuanEmperorAlbumGenghisPortrait.jpg'); background-position: center 30%; }
  .lc-musa        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Catalan_Atlas_BNF_Sheet_6_Mansa_Musa.jpg/400px-Catalan_Atlas_BNF_Sheet_6_Mansa_Musa.jpg'); background-size: contain; background-color: #2a1f0e; }
  .lc-machiavelli .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Santi_di_Tito_-_Niccolo_Machiavelli%27s_portrait_headcrop.jpg/400px-Santi_di_Tito_-_Niccolo_Machiavelli%27s_portrait_headcrop.jpg'); }
  .lc-nietzsche   .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Nietzsche187a.jpg/400px-Nietzsche187a.jpg'); }
  .lc-ali         .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Muhammad_Ali_NYWTS.jpg/400px-Muhammad_Ali_NYWTS.jpg'); }
  .lc-capone      .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Al_Capone_in_1930.jpg/400px-Al_Capone_in_1930.jpg'); background-position: center 20%; }
  .lc-marx        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Karl_Marx_001.jpg/400px-Karl_Marx_001.jpg'); }
  .lc-smith       .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/AdamSmith.jpg/400px-AdamSmith.jpg'); }
  .lc-maxwell     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/James_Clerk_Maxwell.png/400px-James_Clerk_Maxwell.png'); }
  .lc-darwin      .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/400px-Charles_Darwin_seated_crop.jpg'); }
  .lc-newton      .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/GodfreyKneller-IsaacNewton-1689.jpg/400px-GodfreyKneller-IsaacNewton-1689.jpg'); background-position: center 20%; }
  .lc-vangogh     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Van_Gogh_-_Self-Portrait.jpg/400px-Van_Gogh_-_Self-Portrait.jpg'); }
  .lc-dali        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Salvador_Dal%C3%AD_1939.jpg/400px-Salvador_Dal%C3%AD_1939.jpg'); }
  .lc-orwell      .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/George_Orwell_press_photo.jpg/400px-George_Orwell_press_photo.jpg'); }
  .lc-hemingway   .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/ErnestHemingway.jpg/400px-ErnestHemingway.jpg'); }
  .lc-lincoln     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Abraham_Lincoln_O-77_matte_collodion_print.jpg/400px-Abraham_Lincoln_O-77_matte_collodion_print.jpg'); }
  .lc-feynman     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Richard_Feynman_Nobel.jpg/400px-Richard_Feynman_Nobel.jpg'); }
  .lc-curie       .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Marie_Curie_c._1920s.jpg/400px-Marie_Curie_c._1920s.jpg'); }
  .lc-earhart     .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra.jpg/400px-Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra.jpg'); }
  .lc-fermi       .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Enrico_Fermi_1943-49.jpg/400px-Enrico_Fermi_1943-49.jpg'); }
  .lc-einstein    .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/400px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg'); }
  .lc-oppenheimer .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/JROppenheimer-LosAlamos.jpg/400px-JROppenheimer-LosAlamos.jpg'); }
  .lc-bohr        .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Niels_Bohr.jpg/400px-Niels_Bohr.jpg'); }
  .lc-tesla       .portrait { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/400px-Tesla_circa_1890.jpeg'); }

  /* ── UNIFIED RIGHT PANEL (Library ↔ Reader) ────────── */
  /* The same panel houses both browsing and reading. You drag its
     left edge to resize. The avatar shifts left to stay centered in
     the remaining viewport space. */
  :root { --panel-w: 380px; }

  .right-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--panel-w);
    max-width: 100vw;
    z-index: 30;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  body.panel-open .right-panel { transform: translateX(0); }
  /* During drag, kill the transform transition so width tracks the cursor */
  .right-panel.resizing { transition: background 0.5s ease; }

  /* Gradient bleed so the panel meets the scene softly */
  .right-panel::before {
    content: ''; position: absolute;
    left: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }
  body[data-mode="light"] .right-panel::before {
    background: linear-gradient(90deg, transparent, rgba(255, 250, 240, 0.55));
  }

  /* Reader-mode skin: parchment with character — corner ageing, ink spots, subtle
     ghost of previous-page ink. Felt rather than seen. */
  .right-panel[data-view="reader"] {
    background: var(--paper);
    background-image:
      radial-gradient(ellipse 18% 22% at 4% 6%,  rgba(120, 75, 35, 0.10), transparent 70%),
      radial-gradient(ellipse 16% 20% at 96% 92%, rgba(120, 75, 35, 0.09), transparent 70%),
      radial-gradient(ellipse  6%  8% at 76% 18%, rgba(120, 75, 35, 0.06), transparent 70%),
      radial-gradient(ellipse  4%  6% at 16% 78%, rgba(120, 75, 35, 0.05), transparent 70%),
      radial-gradient(ellipse 80% 60% at 50% 50%, transparent, rgba(120, 90, 50, 0.08)),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
    color: var(--ink);
    border-left-color: rgba(42, 34, 26, 0.18);
  }
  .right-panel[data-view="reader"]::before {
    background: linear-gradient(90deg, transparent, rgba(232, 220, 196, 0.5));
  }

  /* ── Resize handle on the left edge ── */
  .resize-handle {
    position: absolute;
    left: -3px; top: 0; bottom: 0;
    width: 14px;
    cursor: ew-resize;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    touch-action: none;
  }
  .resize-handle::before {
    content: '';
    width: 3px; height: 36px;
    background: var(--panel-border-hot);
    border-radius: 2px;
    transition: all 0.2s ease;
  }
  .resize-handle:hover::before,
  .right-panel.resizing .resize-handle::before {
    background: var(--warm-glow);
    height: 56px;
    width: 4px;
  }
  .resize-handle.snap-gleam::before {
    background: var(--warm-glow);
    height: 64px;
    width: 5px;
    box-shadow: 0 0 16px var(--warm-glow-soft);
  }
  .right-panel[data-view="reader"] .resize-handle::before {
    background: rgba(42, 34, 26, 0.22);
  }
  .right-panel[data-view="reader"] .resize-handle:hover::before {
    background: var(--ink-accent);
  }

  /* ── Panel header (sticky top, view-aware) ── */
  .panel-head {
    position: sticky; top: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px 14px;
    background: inherit;
    z-index: 2;
    flex-shrink: 0;
  }
  .panel-head-left {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
  }
  .panel-head h2 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .panel-head h2 em { font-style: italic; color: var(--warm-glow); }
  .right-panel[data-view="reader"] .panel-head h2 em { color: var(--ink-accent); }

  .panel-icon-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-dim); cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .panel-icon-btn:hover {
    color: var(--text);
    background: var(--hover-tint);
  }
  .panel-icon-btn svg { width: 16px; height: 16px; stroke-width: 1.6; }
  .right-panel[data-view="reader"] .panel-icon-btn { color: var(--ink-soft); }
  .right-panel[data-view="reader"] .panel-icon-btn:hover {
    color: var(--ink);
    background: rgba(42, 34, 26, 0.06);
  }

  /* Back button visible only in reader mode */
  .panel-back { display: none; }
  .right-panel[data-view="reader"] .panel-back { display: flex; }

  /* ── READER TOOLBAR (Apple-Books style) ──────────────────
     Five tool buttons sit between the title and the stretch/close
     buttons when the panel is in reader view. Each opens either a
     popover or an inline overlay. */
  .reader-toolbar {
    display: none;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
  }
  .right-panel[data-view="reader"] .reader-toolbar { display: flex; }
  .reader-tool-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    position: relative;
    flex-shrink: 0;
  }
  .reader-tool-btn:hover {
    background: rgba(42, 34, 26, 0.08);
    color: var(--ink);
  }
  .reader-tool-btn:active { transform: scale(0.94); }
  .reader-tool-btn.is-active {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.25), rgba(139, 58, 30, 0.18));
    color: var(--ink-accent);
  }
  .reader-tool-btn svg { width: 16px; height: 16px; stroke-width: 1.7; }
  .reader-tool-btn-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--ink-soft);
  }
  /* Tooltip on hover — small dark chip below the button */
  .reader-tool-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%; transform: translateX(-50%);
    background: rgba(42, 34, 26, 0.92);
    color: #fbf3e2;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 12;
  }
  .reader-tool-btn:hover[data-tip]::after { opacity: 1; }
  /* Bookmark count badge — only renders if there are saved passages */
  .tool-btn-count {
    position: absolute;
    top: 0; right: 0;
    min-width: 14px; height: 14px;
    padding: 0 3px;
    display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #d4a058 0%, #8b3a1e 100%);
    color: #fbf3e2;
    font-family: 'Manrope', sans-serif;
    font-size: 9px; font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--panel-bg, rgba(28,34,44,0.55));
  }
  .tool-btn-count.has-count { display: flex; }

  /* Read-aloud button icon-swap (play <-> pause) */
  .reader-tool-btn .aloud-pause { display: none; }
  .reader-tool-btn.is-active .aloud-play { display: none; }
  .reader-tool-btn.is-active .aloud-pause { display: block; }

  /* ── POPOVERS anchored under the toolbar ──
     Float beneath the reader-toolbar; hidden until their button toggles. */
  .reader-popover {
    position: absolute;
    top: 56px; right: 14px;
    min-width: 240px; max-width: 320px;
    background: rgba(248, 240, 220, 0.97);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    border: 1px solid rgba(120, 80, 40, 0.18);
    border-radius: 14px;
    padding: 10px 8px;
    box-shadow: 0 14px 36px rgba(80, 50, 20, 0.18);
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 16;
    /* Tall popovers (the Display panel with Scroll/Paged at the bottom, and
       long chapter lists in Contents) were clipped off the panel — the
       Scroll/Paged row simply wasn't reachable, which read as "there is no
       scroll option". Cap the height and let the popover scroll internally. */
    max-height: min(72vh, 540px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .reader-popover.is-open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  /* Dark mode popover — keep parchment feel since reader is always parchment */
  body[data-mode="dark"] .reader-popover {
    background: rgba(248, 240, 220, 0.96);
    border-color: rgba(120, 80, 40, 0.16);
  }
  .popover-eyebrow {
    padding: 4px 10px 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(80, 50, 20, 0.5);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .popover-soon {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 10px; letter-spacing: 0; text-transform: none;
    color: rgba(80, 50, 20, 0.45);
  }
  .toc-item {
    width: 100%;
    display: flex; align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    background: transparent; border: 0;
    border-radius: 8px;
    color: var(--ink, #2a221a);
    font-family: 'Fraunces', serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .toc-item:hover { background: rgba(212, 160, 88, 0.12); }
  .toc-item.is-current {
    background: linear-gradient(90deg, rgba(212, 160, 88, 0.18), transparent);
    box-shadow: inset 2px 0 0 var(--ink-accent, #8b3a1e);
  }
  .toc-num {
    font-style: italic; font-variation-settings: 'opsz' 14;
    color: var(--ink-accent, #8b3a1e);
    flex-shrink: 0; width: 24px;
    font-size: 13px;
  }
  .toc-title {
    flex: 1; font-size: 13.5px; line-height: 1.35;
    font-variation-settings: 'opsz' 14;
  }
  .toc-page {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    color: rgba(80, 50, 20, 0.45);
    flex-shrink: 0;
  }

  .popover-bm-list {
    display: flex; flex-direction: column; gap: 6px;
  }
  .popover-bm-item {
    width: 100%;
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: transparent; border: 0;
    border-radius: 8px;
    text-align: left; cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
  }
  .popover-bm-item:hover { background: rgba(212, 160, 88, 0.12); }
  .popover-bm-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(80, 50, 20, 0.5);
  }
  .popover-bm-meta em {
    color: var(--ink-accent, #8b3a1e);
    font-family: 'Fraunces', serif;
    font-style: italic; font-size: 11.5px;
    letter-spacing: -0.01em; text-transform: none;
  }
  .popover-bm-snippet {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12.5px; line-height: 1.45;
    color: var(--ink, #2a221a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .popover-bm-empty {
    padding: 14px 12px 10px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 12.5px; line-height: 1.5;
    color: rgba(80, 50, 20, 0.55);
    display: block;
  }
  .reader-popover-bm.has-items .popover-bm-empty { display: none; }
  .reader-popover-bm:not(.has-items) .popover-bm-list { display: none; }

  .popover-bm-export {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(80, 50, 20, 0.06);
    border: 1px solid var(--panel-border, rgba(80, 50, 20, 0.18));
    border-radius: 8px;
    color: var(--ink, #2a221a);
    font-family: 'Manrope', sans-serif; font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .popover-bm-export:hover { background: rgba(212, 160, 88, 0.16); }
  .popover-bm-export:focus-visible {
    outline: 2px solid var(--warm-glow, #c98a3a);
    outline-offset: 2px;
  }

  .popover-coming {
    padding: 6px 12px 4px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12.5px; line-height: 1.55;
    color: rgba(80, 50, 20, 0.6);
    margin: 0;
  }

  /* ── DISPLAY POPOVER (Aa) — Iteration B ──
     Brightness slider · font-size A-/A+ · 3 theme tiles · reading-mode seg. */
  .reader-popover-view { min-width: 280px; max-width: 320px; }
  .view-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(120, 80, 40, 0.10);
  }
  .view-row:first-of-type { border-top: 0; }
  .view-icon { width: 14px; height: 14px; color: rgba(80, 50, 20, 0.55); stroke-width: 1.6; flex-shrink: 0; }
  .view-icon-r { width: 18px; height: 18px; }
  .view-range {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 4px;
    background: linear-gradient(to right, rgba(80, 50, 20, 0.2), rgba(212, 160, 88, 0.6));
    border-radius: 999px;
    outline: none;
  }
  .view-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    background: linear-gradient(135deg, #fbf3e2, #e8d4a8);
    border: 1px solid rgba(80, 50, 20, 0.25);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(80, 50, 20, 0.18);
    cursor: pointer;
  }
  .view-range::-moz-range-thumb {
    width: 16px; height: 16px;
    background: linear-gradient(135deg, #fbf3e2, #e8d4a8);
    border: 1px solid rgba(80, 50, 20, 0.25);
    border-radius: 50%;
    cursor: pointer;
  }

  /* Font size row */
  .view-row-fs { gap: 12px; }
  .view-fs-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(120, 80, 40, 0.18);
    border-radius: 50%; cursor: pointer;
    color: var(--ink, #2a221a);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }
  .view-fs-btn:hover {
    background: rgba(212, 160, 88, 0.12);
    border-color: rgba(120, 80, 40, 0.32);
  }
  .view-fs-btn:active { transform: scale(0.94); }
  .view-fs-btn:disabled { opacity: 0.35; cursor: default; }
  .view-fs-letter { font-family: 'Fraunces', serif; font-weight: 500; line-height: 1; }
  .view-fs-letter-sm { font-size: 11px; }
  .view-fs-letter-lg { font-size: 17px; }
  .view-fs-track {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 6px;
    position: relative;
  }
  .view-fs-track::before {
    content: ''; position: absolute;
    left: 6px; right: 6px; top: 50%;
    height: 1px; background: rgba(80, 50, 20, 0.18);
    transform: translateY(-50%);
  }
  .view-fs-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(80, 50, 20, 0.25);
    position: relative; z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .view-fs-dot-current {
    background: var(--ink-accent, #8b3a1e);
    transform: scale(1.45);
    box-shadow: 0 0 0 3px rgba(212, 160, 88, 0.22);
  }

  /* Theme tiles */
  .view-row-themes { gap: 8px; }
  .view-theme-tile {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 8px 6px;
    background: transparent; border: 1px solid rgba(120, 80, 40, 0.15);
    border-radius: 10px; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }
  .view-theme-tile:hover {
    border-color: rgba(120, 80, 40, 0.35);
    background: rgba(212, 160, 88, 0.06);
  }
  .view-theme-tile.is-current {
    border-color: var(--ink-accent, #8b3a1e);
    box-shadow: inset 0 0 0 1px var(--ink-accent, #8b3a1e);
  }
  .view-theme-swatch {
    width: 44px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 16px;
    border: 1px solid rgba(80, 50, 20, 0.12);
  }
  .theme-parchment { background: #f5ebd2; color: #2a221a; }
  .theme-sepia     { background: #e8d2a3; color: #4a2d18; }
  .theme-quiet     { background: #1f1a14; color: #d8c4a0; border-color: rgba(212, 160, 88, 0.25); }
  .view-theme-label {
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.08em;
    color: rgba(80, 50, 20, 0.65);
  }

  /* Reading-mode segment */
  .view-row-scroll { padding-top: 8px; padding-bottom: 12px; }
  .view-row-label {
    flex: 1;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.08em;
    color: rgba(80, 50, 20, 0.7);
  }
  .view-segment {
    display: flex;
    background: rgba(80, 50, 20, 0.08);
    border-radius: 999px;
    padding: 2px;
  }
  .view-seg-btn {
    background: transparent; border: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.04em;
    color: rgba(80, 50, 20, 0.65);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .view-seg-btn.is-current {
    background: rgba(255, 247, 232, 0.92);
    color: var(--ink, #2a221a);
    box-shadow: 0 1px 3px rgba(80, 50, 20, 0.12);
  }

  /* Typography / layout pref rows share the segment look. */
  .view-row-pref { padding-top: 6px; padding-bottom: 6px; }
  .view-pref-btn {
    background: transparent; border: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.04em;
    color: rgba(80, 50, 20, 0.65);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .view-pref-btn.is-current {
    background: rgba(255, 247, 232, 0.92);
    color: var(--ink, #2a221a);
    box-shadow: 0 1px 3px rgba(80, 50, 20, 0.12);
  }
  .view-pref-btn:focus-visible,
  .view-seg-btn:focus-visible,
  .view-theme-tile:focus-visible {
    outline: 2px solid rgba(80, 50, 20, 0.55);
    outline-offset: 2px;
  }
  .view-divider {
    height: 1px;
    margin: 6px 0;
    background: rgba(80, 50, 20, 0.12);
  }

  /* ── READER THEMES ──
     Switch the parchment background + ink colors based on data-reader-theme
     on the right-panel. Default = parchment (no override). */
  .right-panel[data-reader-theme="sepia"] .reader-page {
    background: linear-gradient(180deg, #ecd6a5, #e0c386);
    color: #3a2412;
  }
  .right-panel[data-reader-theme="sepia"] .reader-page blockquote {
    color: rgba(58, 36, 18, 0.85);
  }
  .right-panel[data-reader-theme="quiet"] .reader-page {
    background: linear-gradient(180deg, #1f1a14, #16120d);
    color: #e8d5ad;
  }
  /* Body text needs its own override (the base .reader-page p sets color via var(--ink)) */
  .right-panel[data-reader-theme="quiet"] .reader-page p {
    color: #e8d5ad;
  }
  .right-panel[data-reader-theme="quiet"] .reader-page blockquote {
    color: #f0e0b8;
    border-left-color: #d4a058;
  }
  .right-panel[data-reader-theme="quiet"] .reader-page .chapter-num,
  .right-panel[data-reader-theme="quiet"] .reader-page .reader-chapter-meta {
    color: rgba(232, 213, 173, 0.55);
  }
  .right-panel[data-reader-theme="quiet"] .reader-page h1 {
    color: #f3e2b8;
  }
  .right-panel[data-reader-theme="quiet"] .reader-page h1 em {
    color: #d4a058;
  }
  /* Sepia: body text also needs its own override for the deeper ink */
  .right-panel[data-reader-theme="sepia"] .reader-page p {
    color: #3a2412;
  }
  .right-panel[data-reader-theme="sepia"] .reader-page h1 em {
    color: #8b3a1e;
  }
  /* Brightness via filter on the reader-page (instead of opacity, which dims chrome too) */
  .reader-page { transition: filter 0.3s ease, font-size 0.25s ease; }
  /* Font-size scaling */
  .right-panel[data-reader-fs="s"] .reader-page p,
  .right-panel[data-reader-fs="s"] .reader-page blockquote { font-size: 14px; line-height: 1.65; }
  .right-panel[data-reader-fs="l"] .reader-page p,
  .right-panel[data-reader-fs="l"] .reader-page blockquote { font-size: 18px; line-height: 1.6; }
  /* Paged mode — visual hint only for the mockup (snaps to a single-folio
     "card" feel). Real paginated layout deferred to a later iteration. */
  .right-panel[data-reader-mode="paged"] .reader-page {
    column-count: 1;
    padding-top: 80px; padding-bottom: 80px;
  }
  .right-panel[data-reader-mode="paged"] .reader-page::after {
    content: 'Page IV · folio 4';
    display: block;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(120, 80, 40, 0.18);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 11px; letter-spacing: 0.1em;
    text-align: center;
    color: rgba(80, 50, 20, 0.45);
    text-transform: uppercase;
  }

  /* ── INLINE SEARCH BAR ──
     Slides down from the top of the panel when Search is toggled. */
  .reader-search-bar {
    display: none;
    align-items: center; gap: 8px;
    padding: 10px 16px;
    background: rgba(248, 240, 220, 0.96);
    border-top: 1px solid rgba(120, 80, 40, 0.14);
    border-bottom: 1px solid rgba(120, 80, 40, 0.14);
  }
  .right-panel[data-view="reader"].is-searching .reader-search-bar { display: flex; }
  .reader-search-bar .search-icon {
    width: 14px; height: 14px;
    color: rgba(80, 50, 20, 0.55);
    stroke-width: 1.8;
  }
  #reader-search-input {
    flex: 1;
    background: transparent;
    border: 0; outline: 0;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 14px;
    color: var(--ink, #2a221a);
  }
  #reader-search-input::placeholder {
    color: rgba(80, 50, 20, 0.4);
  }
  .search-matches {
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.06em;
    color: rgba(80, 50, 20, 0.55);
    min-width: 60px; text-align: right;
  }
  .search-close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: rgba(80, 50, 20, 0.55);
    border-radius: 50%; cursor: pointer;
    transition: background 0.2s ease;
  }
  .search-close:hover { background: rgba(80, 50, 20, 0.1); color: var(--ink); }
  .search-close svg { width: 12px; height: 12px; stroke-width: 2; }
  /* Match highlight inside the reader */
  .reader-page mark.search-match {
    background: linear-gradient(180deg, rgba(212, 160, 88, 0.42), rgba(212, 160, 88, 0.28));
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(212, 160, 88, 0.35);
  }

  /* ── READ-ALOUD: per-word highlight cascade ──
     When the read-aloud button is active, words in the reader-page get
     a moving gold underline + brightness pass, like the legend's voice
     is travelling across the page. */
  @keyframes reader-aloud-word {
    0%, 100% { background: transparent; }
    20%      { background: linear-gradient(180deg, transparent 65%, rgba(212, 160, 88, 0.42) 65%); }
    80%      { background: linear-gradient(180deg, transparent 65%, rgba(212, 160, 88, 0.18) 65%); }
  }
  .reader-page .read-aloud-word {
    /* Stay inline so ::first-letter on .lead paragraphs still targets the
       illuminated capital "I" inside the first word span. */
    display: inline;
    border-radius: 2px;
    animation: reader-aloud-word 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--ai, 0) * 180ms);
  }
  /* First word of a .lead paragraph: let the illuminated capital flow.
     The drop-cap rule already styles ::first-letter; ensure the span
     doesn't introduce any layout that breaks the float. */
  .reader-page p.lead .read-aloud-word:first-child::first-letter {
    /* Inherit the drop-cap styles by re-asserting the gradient + size
       so the cascade animation doesn't override the illuminated capital. */
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600;
    font-weight: 600;
    font-size: 76px;
    float: left; line-height: 0.82;
    margin: 10px 12px 0 0;
    background: linear-gradient(160deg, #c08540 0%, #8b3a1e 65%, #5a2010 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* When the listen-pill is in speaking mode, label the legend's voice */
  .right-panel[data-view="reader"].is-reading-aloud .reader-listen-pill span::after {
    content: ' · speaking';
    color: var(--ink-accent);
    font-style: italic;
  }

  /* ══════════════════════════════════════════════════════════
     ITERATION C — TEXT SELECTION MENU + HIGHLIGHTS
     ══════════════════════════════════════════════════════════ */

  /* The selection menu floats above the user's selection. JS positions
     it with absolute coordinates relative to viewport. */
  .selection-menu {
    position: fixed;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #2a221a, #1f1810);
    border: 1px solid rgba(212, 160, 88, 0.22);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .selection-menu.is-open { display: flex; opacity: 1; }
  .selection-menu-row {
    display: flex; align-items: center; gap: 4px;
    padding: 0 2px;
  }
  .selection-menu-divider {
    width: 1px; height: 18px;
    background: rgba(244, 239, 230, 0.16);
    margin: 0 2px;
  }
  .sel-color {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 239, 230, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    padding: 0;
  }
  .sel-color:hover { transform: scale(1.12); border-color: rgba(244, 239, 230, 0.55); }
  .sel-color-amber { background: linear-gradient(135deg, #f5c87e, #d4a058); }
  .sel-color-rose  { background: linear-gradient(135deg, #e89a8a, #c8645c); }
  .sel-color-teal  { background: linear-gradient(135deg, #6fb0a8, #3d8a87); }
  .sel-color-sage  { background: linear-gradient(135deg, #b8c89a, #88a070); }
  .sel-action {
    width: 32px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: rgba(244, 239, 230, 0.78);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .sel-action:hover { background: rgba(244, 239, 230, 0.08); color: #fbf3e2; }
  .sel-action svg { width: 14px; height: 14px; stroke-width: 1.7; }
  /* Tooltips on every selection-menu button — small floating chip above the
     button so the user can hover-discover what each color / action does. */
  .sel-color[data-tip],
  .sel-action[data-tip] { position: relative; }
  .sel-color[data-tip]::after,
  .sel-action[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    background: rgba(20, 16, 12, 0.96);
    color: #fbf3e2;
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid rgba(212, 160, 88, 0.22);
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 12;
  }
  .sel-color:hover[data-tip]::after,
  .sel-action:hover[data-tip]::after { opacity: 1; }
  /* Small downward arrow connecting the menu to the selection */
  .selection-menu-arrow {
    position: absolute;
    left: 50%; top: 100%;
    width: 10px; height: 10px;
    background: linear-gradient(135deg, transparent 50%, #1f1810 50%);
    transform: translate(-50%, -5px) rotate(45deg);
    border-right: 1px solid rgba(212, 160, 88, 0.22);
    border-bottom: 1px solid rgba(212, 160, 88, 0.22);
  }

  /* User-applied highlights inside the reader-page.
     4 colors tuned to the museum palette (not Apple's bright primaries). */
  .reader-page mark.user-highlight {
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    background: var(--hl-color, rgba(212, 160, 88, 0.4));
    box-shadow: 0 0 0 1px var(--hl-edge, rgba(212, 160, 88, 0.35));
    transition: filter 0.2s ease;
    cursor: pointer;
    position: relative;
  }
  .reader-page mark.user-highlight:hover { filter: brightness(1.08); }
  .reader-page mark.color-amber { --hl-color: rgba(212, 160, 88, 0.40); --hl-edge: rgba(212, 160, 88, 0.45); }
  .reader-page mark.color-rose  { --hl-color: rgba(232, 154, 138, 0.40); --hl-edge: rgba(200, 100, 92, 0.45); }
  .reader-page mark.color-teal  { --hl-color: rgba(111, 176, 168, 0.36); --hl-edge: rgba(61, 138, 135, 0.45); }
  .reader-page mark.color-sage  { --hl-color: rgba(184, 200, 154, 0.42); --hl-edge: rgba(136, 160, 112, 0.45); }
  /* Highlights with notes get a small marginal indicator */
  .reader-page mark.has-note::after {
    content: '';
    position: absolute;
    top: -6px; right: -6px;
    width: 8px; height: 8px;
    background: linear-gradient(135deg, #d4a058, #8b3a1e);
    border-radius: 50%;
    border: 1.5px solid var(--panel-bg, rgba(248, 240, 220, 1));
  }

  /* Note popover — appears below the just-highlighted passage */
  .note-popover {
    position: fixed; z-index: 65;
    display: none;
    width: 280px;
    padding: 12px;
    background: rgba(248, 240, 220, 0.98);
    border: 1px solid rgba(120, 80, 40, 0.20);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(80, 50, 20, 0.20);
    transform: translateX(-50%);
  }
  .note-popover.is-open { display: block; }
  #note-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(120, 80, 40, 0.14);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13.5px; line-height: 1.5;
    color: var(--ink, #2a221a);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  #note-input:focus {
    border-color: var(--ink-accent, #8b3a1e);
    background: rgba(255, 255, 255, 0.85);
  }
  #note-input::placeholder { color: rgba(80, 50, 20, 0.45); }
  .note-popover-actions {
    display: flex; justify-content: flex-end; gap: 6px;
    margin-top: 10px;
  }
  .note-cancel, .note-save {
    padding: 5px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .note-cancel {
    background: transparent;
    border: 1px solid rgba(120, 80, 40, 0.22);
    color: rgba(80, 50, 20, 0.6);
  }
  .note-cancel:hover { background: rgba(80, 50, 20, 0.08); color: var(--ink); }
  .note-save {
    background: var(--ink-accent, #8b3a1e);
    border: 1px solid var(--ink-accent, #8b3a1e);
    color: #fbf3e2;
  }
  .note-save:hover { background: #6e2d18; }

  /* "Copied" toast — slides up from selection, lingers briefly */
  .reader-toast {
    position: fixed; z-index: 70;
    padding: 8px 16px;
    background: rgba(42, 34, 26, 0.95);
    color: #fbf3e2;
    border-radius: 999px;
    border: 1px solid rgba(212, 160, 88, 0.32);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 12.5px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    display: none;
  }
  .reader-toast.is-visible {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .reader-toast em { color: var(--warm-glow); }

  /* ── QUOTE SHARE MODAL ──
     Beautifully-rendered card of the selected passage. The kind of share
     that makes other people want the app. */
  .quote-modal {
    max-width: 520px;
    padding: 36px 36px 28px;
    background: linear-gradient(160deg, #fbf3e2 0%, #f5ebd2 100%);
    border: 1px solid rgba(120, 80, 40, 0.18);
    border-radius: 18px;
    position: relative;
  }
  /* X close button on the quote modal — the default --text-dim color
     is cream and invisible on the parchment bg. Override + scale up. */
  .quote-modal .modal-close {
    color: rgba(80, 50, 20, 0.55);
    background: rgba(120, 80, 40, 0.08);
    border: 1px solid rgba(120, 80, 40, 0.18);
  }
  .quote-modal .modal-close:hover {
    color: var(--ink, #2a221a);
    background: rgba(120, 80, 40, 0.16);
    border-color: rgba(120, 80, 40, 0.32);
  }
  .quote-card {
    position: relative;
    padding: 28px 24px 22px;
    background: linear-gradient(180deg, #f8edd0, #f0e0b8);
    border: 1px solid rgba(120, 80, 40, 0.14);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
                0 6px 18px rgba(80, 50, 20, 0.12);
  }
  .quote-mark {
    position: absolute;
    top: -8px; left: 18px;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 86px;
    line-height: 1;
    background: linear-gradient(160deg, #c08540 0%, #8b3a1e 65%, #5a2010 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .quote-text {
    margin: 6px 0 20px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-style: italic;
    font-size: 19px; line-height: 1.5;
    color: var(--ink, #2a221a);
  }
  .quote-attribution {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-top: 16px;
    border-top: 1px solid rgba(120, 80, 40, 0.18);
  }
  .quote-author-name {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-size: 17px;
    color: var(--ink, #2a221a);
    display: block;
  }
  .quote-author-name em { font-style: italic; color: var(--ink-accent, #8b3a1e); }
  .quote-author-source {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.08em;
    color: rgba(80, 50, 20, 0.55);
    text-transform: uppercase;
    margin-top: 2px;
    display: block;
  }
  .quote-brand {
    display: flex; align-items: center; gap: 6px;
    opacity: 0.7;
  }
  .quote-brand-mark {
    width: 18px; height: 18px;
    background: var(--logo-black) no-repeat center / contain;
  }
  .quote-brand-text {
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(80, 50, 20, 0.7);
  }
  .quote-actions {
    margin-top: 22px;
    display: flex; justify-content: flex-end; gap: 10px;
  }
  .quote-act {
    padding: 8px 18px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px; letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .quote-act:active { transform: scale(0.97); }
  #quote-copy {
    background: transparent;
    border: 1px solid rgba(120, 80, 40, 0.28);
    color: rgba(80, 50, 20, 0.75);
  }
  #quote-copy:hover { background: rgba(120, 80, 40, 0.08); color: var(--ink); }
  #quote-share {
    background: linear-gradient(135deg, #d4a058 0%, #8b3a1e 100%);
    border: 1px solid #8b3a1e;
    color: #fbf3e2;
  }
  #quote-share:hover { filter: brightness(1.08); }

  /* ── Views: library list + reader page ── */
  .panel-body {
    flex: 1; min-height: 0;
    position: relative;
    overflow: hidden;
  }
  .panel-view {
    position: absolute; inset: 0;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .right-panel[data-view="library"] .view-library,
  .right-panel[data-view="reader"]  .view-reader,
  .right-panel[data-view="museum"]  .view-museum {
    opacity: 1; pointer-events: auto;
  }
  /* Reader-only chrome (toolbar, search bar) should hide for non-reader views */
  .right-panel:not([data-view="reader"]) .reader-toolbar { display: none; }
  .right-panel:not([data-view="reader"]) .reader-listen-pill { opacity: 0; }

  /* ── Museum view: 2-column gallery of works in their place ── */
  .view-museum { padding: 0 20px 28px; }
  .museum-section { margin-top: 22px; }
  .museum-section:first-child { margin-top: 0; }
  .museum-eyebrow {
    font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--warm-glow);
    margin-bottom: 4px;
  }
  .museum-section-title {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-variation-settings: 'opsz' 144;
    font-size: 24px; letter-spacing: -0.025em;
    margin: 0 0 18px;
    line-height: 1.05;
  }
  .museum-section-title em { font-style: italic; color: var(--warm-glow); }
  .museum-empty {
    margin-top: 28px;
    padding: 28px 18px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 12px;
  }
  .museum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .museum-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-border) center / cover no-repeat;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .museum-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  }
  body[data-mode="light"] .museum-tile:hover {
    box-shadow: 0 14px 28px rgba(80, 50, 20, 0.22);
  }
  .museum-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.62));
    pointer-events: none;
  }
  .museum-caption {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    z-index: 2; pointer-events: none;
  }
  .museum-caption-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-style: italic;
    font-size: 14px; line-height: 1.2;
    color: #fbf3e2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  }
  .museum-caption-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(251, 243, 226, 0.78);
    margin-top: 2px;
  }
  /* Placeholder tiles for non-Leonardo legends */
  .museum-tile.is-placeholder {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.18), rgba(139, 58, 30, 0.10));
    display: flex; align-items: center; justify-content: center;
  }
  .museum-tile.is-placeholder::before {
    content: '🖼';
    font-size: 36px;
    opacity: 0.35;
  }
  .museum-tile.is-placeholder::after { display: none; }
  .museum-tile.is-placeholder .museum-caption-title {
    color: var(--text-dim);
    text-shadow: none;
  }
  .museum-tile.is-placeholder .museum-caption-meta {
    color: var(--text-faint);
  }
  body[data-mode="light"] .museum-tile.is-placeholder .museum-caption-title { color: rgba(80, 50, 20, 0.65); }
  body[data-mode="light"] .museum-tile.is-placeholder .museum-caption-meta { color: rgba(80, 50, 20, 0.45); }
  .panel-view::-webkit-scrollbar { width: 4px; }
  .panel-view::-webkit-scrollbar-thumb { background: var(--panel-border-hot); border-radius: 4px; }
  .right-panel[data-view="reader"] .panel-view::-webkit-scrollbar-thumb {
    background: rgba(42, 34, 26, 0.18);
  }

  /* ── Library view content ── */
  .view-library { padding: 0 20px 24px; }
  .lib-section { margin-top: 22px; }
  .lib-section:first-child { margin-top: 0; }
  .lib-eyebrow {
    font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--warm-glow);
    margin-bottom: 4px;
  }
  .lib-section-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-style: italic; font-weight: 400;
    font-size: 18px; line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
  }
  .lib-book {
    display: flex; gap: 14px;
    padding: 12px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s ease;
  }
  .lib-book:hover {
    background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
    transform: translateX(-2px);
  }

  .lib-spine {
    flex-shrink: 0;
    width: 38px; height: 56px;
    border-radius: 2px 5px 5px 2px;
    box-shadow: inset 3px 0 0 rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.3);
  }
  .lib-spine.s1 { background: linear-gradient(135deg, #4a2820, #2a1410); }
  .lib-spine.s2 { background: linear-gradient(135deg, #1f3a2e, #0f1f18); }
  .lib-spine.s3 { background: linear-gradient(135deg, #3a2a52, #1f1530); }
  .lib-spine.s4 { background: linear-gradient(135deg, #5a3a1e, #3a2410); }
  .lib-spine.s5 { background: linear-gradient(135deg, #2a3854, #15203a); }
  /* Real cover thumbnail on the spine when the EPUB had one. */
  .lib-spine.has-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .lib-book-info { flex: 1; min-width: 0; }
  .lib-book-info h5 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 15px;
    line-height: 1.2; letter-spacing: -0.01em;
  }
  .lib-book-info .meta {
    margin-top: 5px;
    font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-faint);
  }

  /* ── Library at scale: search / sort / progress / continue shelf ── */
  .lib-count { text-transform: none; letter-spacing: 0.06em; }
  .lib-toolbar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 14px;
  }
  .lib-search {
    flex: 1; display: flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
  }
  .lib-search-icon { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }
  .lib-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--ink, inherit);
    font-family: 'Manrope', sans-serif; font-size: 12px;
  }
  .lib-sort {
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--ink, inherit);
    font-family: 'Manrope', sans-serif; font-size: 11px;
    cursor: pointer;
  }
  .lib-subhead {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--warm-glow);
    margin: 4px 0 8px;
  }
  .lib-reading-wrap[hidden] { display: none; }
  .lib-reading-wrap {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--panel-border);
  }
  .lib-progress {
    margin-top: 8px;
    height: 4px; border-radius: 999px;
    background: rgba(120, 80, 40, 0.18);
    overflow: hidden;
  }
  .lib-progress > span {
    display: block; height: 100%;
    background: var(--warm-glow, #c98a3a);
    border-radius: 999px;
  }
  .lib-progress-pct {
    margin-top: 4px;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-faint);
  }
  .lib-empty {
    padding: 24px 8px; text-align: center;
    color: var(--text-faint); font-size: 12px;
  }
  .lib-empty[hidden] { display: none; }
  /* "No books yet" empty state for a legend with no registered EPUBs. */
  .lib-empty-state {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 52px 20px 40px;
  }
  .lib-empty-icon {
    width: 38px; height: 38px;
    opacity: 0.55;
    margin-bottom: 14px;
    color: var(--warm-glow, #c98a3a);
  }
  .lib-empty-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-style: italic; font-weight: 400;
    font-size: 17px; line-height: 1.2;
    color: var(--ink, inherit);
    margin-bottom: 7px;
  }
  .lib-empty-sub {
    font-size: 12px; line-height: 1.5;
    max-width: 230px;
    color: var(--text-faint);
  }
  .lib-search input:focus-visible,
  .lib-sort:focus-visible {
    outline: 2px solid var(--warm-glow, #c98a3a);
    outline-offset: 2px;
  }

  /* ── Reader view content ── */
  .view-reader { display: flex; flex-direction: column; }
  .reader-page {
    flex: 1;
    overflow-y: auto;
    padding: 32px clamp(28px, 6vw, 80px) 24px;
    color: var(--ink);
  }
  .reader-chapter-meta {
    font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 16px;
  }
  .reader-page .chapter-num {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 300; font-size: 14px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-accent); margin-bottom: 6px;
  }
  .reader-page h1 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    font-style: italic; font-weight: 400;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 8px;
  }
  /* Chapter ornament — a per-legend signature glyph instead of generic dots.
     Leonardo gets a Vitruvian flourish; Curie an atom; Aurelius a Stoic
     punctuation mark; Kahlo a marigold; Einstein a quiet spark. */
  .reader-page .ornament {
    text-align: center; margin: 28px 0 32px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0; color: transparent;
  }
  body[data-legend="leonardo"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 22'><path d='M8 11 Q 30 2, 50 11 T 90 11 Q 110 20, 132 11' stroke='%238b3a1e' fill='none' stroke-width='1.4' stroke-linecap='round'/><circle cx='70' cy='11' r='2.6' fill='%238b3a1e'/></svg>");
  }
  body[data-legend="curie"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'><g stroke='%238b3a1e' fill='none' stroke-width='1.1'><ellipse cx='40' cy='11' rx='26' ry='7'/><ellipse cx='40' cy='11' rx='26' ry='7' transform='rotate(60 40 11)'/><ellipse cx='40' cy='11' rx='26' ry='7' transform='rotate(-60 40 11)'/></g><circle cx='40' cy='11' r='2.4' fill='%238b3a1e'/></svg>");
  }
  body[data-legend="aurelius"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><g fill='%238b3a1e'><circle cx='20' cy='6' r='1.4'/><circle cx='60' cy='6' r='2.6'/><circle cx='100' cy='6' r='1.4'/></g><g stroke='%238b3a1e' stroke-width='0.9'><line x1='28' y1='6' x2='52' y2='6'/><line x1='68' y1='6' x2='92' y2='6'/></g></svg>");
  }
  body[data-legend="kahlo"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'><g fill='%238b3a1e'><ellipse cx='40' cy='4' rx='2.6' ry='4.5'/><ellipse cx='40' cy='18' rx='2.6' ry='4.5'/><ellipse cx='32' cy='11' rx='4.5' ry='2.6'/><ellipse cx='48' cy='11' rx='4.5' ry='2.6'/><circle cx='40' cy='11' r='2.6'/></g></svg>");
  }
  body[data-legend="einstein"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'><line x1='10' y1='7' x2='52' y2='7' stroke='%238b3a1e' stroke-width='1'/><path d='M60 2 L64 7 L60 12 L56 7 Z' fill='%238b3a1e'/><line x1='68' y1='7' x2='110' y2='7' stroke='%238b3a1e' stroke-width='1'/></svg>");
  }
  body[data-legend="nostradamus"] .reader-page .ornament {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'><g fill='%238b3a1e'><path d='M60 2 L62 9 L69 11 L62 13 L60 20 L58 13 L51 11 L58 9 Z'/><circle cx='24' cy='11' r='1.6'/><circle cx='96' cy='11' r='1.6'/></g><g stroke='%238b3a1e' stroke-width='0.9' fill='none'><path d='M32 11 Q 46 5, 51 11'/><path d='M88 11 Q 74 5, 69 11'/></g></svg>");
  }
  .reader-page p {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 16px; line-height: 1.7;
    color: var(--ink);
    margin-bottom: 16px;
    text-align: justify; hyphens: auto;
    position: relative;
  }
  /* Bookmark dot — appears at right margin on paragraph hover.
     Click toggles the saved state (filled gold). State persisted per book. */
  .para-bookmark {
    position: absolute;
    top: 8px; right: -22px;
    width: 12px; height: 12px;
    padding: 0;
    background: transparent;
    border: 1.5px solid rgba(139, 58, 30, 0.32);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reader-page p:hover .para-bookmark,
  .para-bookmark:focus-visible,
  .para-bookmark.is-bookmarked {
    opacity: 1;
  }
  .para-bookmark:hover {
    border-color: var(--ink-accent);
    transform: scale(1.15);
  }
  .para-bookmark.is-bookmarked {
    background: linear-gradient(135deg, #d4a058 0%, #8b3a1e 100%);
    border-color: transparent;
    box-shadow: 0 0 6px rgba(212, 160, 88, 0.45);
  }
  /* Tiny tooltip on bookmark hover so the affordance is discoverable */
  .para-bookmark::before {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 8px); top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    background: rgba(42, 34, 26, 0.92);
    color: #fbf3e2;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .para-bookmark:hover::before { opacity: 1; }
  /* Illuminated capital — heavy display weight, gold→deep red gradient.
     Treat as the chapter's brand letter. */
  .reader-page p.lead::first-letter {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600;
    font-weight: 600;
    font-size: 76px;
    float: left; line-height: 0.82;
    margin: 10px 12px 0 0;
    background: linear-gradient(160deg, #c08540 0%, #8b3a1e 65%, #5a2010 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(80, 50, 20, 0.05);
  }
  .reader-page blockquote {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-style: italic;
    font-size: 18px; line-height: 1.5;
    color: var(--ink-soft);
    margin: 24px 0;
    padding-left: 18px;
    border-left: 2px solid var(--ink-accent);
  }
  /* ── Page-color theme extends to the panel chrome (footer + reading
     surround), not just the book iframe. Driven by data-reader-theme, which
     the engine mirrors onto #right-panel in _applyPrefsToRendition. Previously
     only the iframe recolored, so the footer/surround stayed parchment ("only
     the middle changes color"). Only `dark` is a dark theme. ── */
  .right-panel[data-reader-theme="parchment"] .view-reader { background: #f6efe0; }
  .right-panel[data-reader-theme="sepia"]     .view-reader { background: #f5efe2; }
  .right-panel[data-reader-theme="quiet"]     .view-reader { background: #eef0ee; }
  .right-panel[data-reader-theme="light"]     .view-reader { background: #ffffff; }
  .right-panel[data-reader-theme="dark"]      .view-reader { background: #1a1a1a; }

  .right-panel[data-reader-theme="sepia"] .reader-foot { background: rgba(225, 210, 180, 0.5); }
  .right-panel[data-reader-theme="quiet"] .reader-foot { background: rgba(225, 230, 224, 0.6); }
  .right-panel[data-reader-theme="light"] .reader-foot { background: rgba(255, 255, 255, 0.7); }
  .right-panel[data-reader-theme="dark"]  .reader-foot {
    background: rgba(20, 20, 20, 0.92);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  /* Dark theme: light footer text + nav outlines so they stay legible. */
  .right-panel[data-reader-theme="dark"] .reader-nav {
    color: rgba(232, 232, 232, 0.9);
    border-color: rgba(255, 255, 255, 0.22);
  }
  .right-panel[data-reader-theme="dark"] .reader-nav:hover {
    background: rgba(255, 255, 255, 0.08); color: #fff;
  }
  .right-panel[data-reader-theme="dark"] .reader-progress-text { color: rgba(255, 255, 255, 0.55); }
  .right-panel[data-reader-theme="dark"] .reader-progress-bar { background: rgba(255, 255, 255, 0.16); }

  .reader-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    border-top: 1px solid rgba(42, 34, 26, 0.1);
    flex-shrink: 0;
    background: rgba(220, 201, 168, 0.4);
  }
  .reader-progress {
    flex: 1; margin: 0 20px;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
  }
  .reader-progress-bar {
    width: 100%; max-width: 200px;
    height: 2px; background: rgba(42, 34, 26, 0.12);
    border-radius: 2px; overflow: hidden;
  }
  .reader-progress-fill {
    height: 100%; width: 18%;
    background: var(--ink-accent); border-radius: 2px;
  }
  .reader-progress-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-feature-settings: 'onum' 1;
    font-variant-numeric: oldstyle-nums;
    font-size: 11px; letter-spacing: 0.10em;
    color: var(--ink-faint);
  }
  .reader-nav {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(42, 34, 26, 0.18);
    background: transparent; color: var(--ink-soft);
    cursor: pointer; border-radius: 50%;
    transition: all 0.2s ease;
  }
  .reader-nav:hover { background: rgba(42, 34, 26, 0.05); color: var(--ink); }
  .reader-nav:active { transform: scale(0.92); }
  /* Visual-only edge state (start of book on Prev / end on Next). The button
     stays clickable — we never use the native `disabled` property here because
     browsers suppress clicks on disabled buttons. */
  .reader-nav.is-edge { opacity: 0.32; }
  /* Page-turn flicker — subtle parchment translate + opacity dip */
  .reader-page.is-turning {
    animation: page-turn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes page-turn {
    0%   { opacity: 1; transform: translateY(0); }
    35%  { opacity: 0.55; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* The "still listening" pill — pinned in reader mode  */
  .reader-listen-pill {
    position: absolute;
    /* Sits BELOW the panel-head/toolbar so the two don't collide. */
    top: 64px; right: 18px;
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 4px;
    background: rgba(42, 34, 26, 0.06);
    border: 1px solid rgba(42, 34, 26, 0.12);
    border-radius: 999px;
    font-size: 8.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-soft);
    z-index: 5;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .right-panel[data-view="reader"] .reader-listen-pill { opacity: 1; }
  .listen-pill-portrait {
    width: 18px; height: 18px; border-radius: 50%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/200px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg');
    background-size: cover; background-position: center 20%;
    filter: sepia(0.4) contrast(1.05);
    animation: pill-breathe 4s ease-in-out infinite;
  }
  @keyframes pill-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
  /* When the legend is "thinking" (loading state), their figure
     breathes faster — felt rather than seen. */
  body.is-thinking .figure-stage { animation-duration: 4s; }

  /* ── Avatar shift: stay centered in REMAINING viewport ── */
  body.panel-open .figure-primary {
    --breathe-base: translateX(calc(-50% - var(--panel-w) / 2));
    transform: var(--breathe-base);
  }
  /* Dim the scene slightly when panel is wide enough to dominate */
  body.panel-open .scene { filter: brightness(0.88); transition: filter 0.5s ease; }
  body.panel-open[data-panel-mode="wide"] .scene { filter: brightness(0.7); }
  body.panel-open[data-panel-mode="full"] .figure-primary { opacity: 0; }

  /* Top bar / chat / rail stay visible & active throughout */
  body.panel-open .chat-zone .prompt-row { opacity: 0; pointer-events: none; }

  /* ── STORY (right-panel mode) ────────────────────────────
     Story lives in a 560px-wide right-side panel — same architecture as
     Bio / Reader / Library. Avatar stays visible to the left. Chat input
     stays active so the user can ask about the chapter they're hearing. */
  .story {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 92vw);
    z-index: 25;
    background: rgba(14, 17, 23, 0.82);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  body.story-open .story { transform: translateX(0); }
  /* Light mode: parchment-tinted panel + warm border (Tuscan morning) */
  body[data-mode="light"] .story {
    background: rgba(255, 247, 232, 0.88);
    border-left: 1px solid rgba(184, 138, 62, 0.22);
  }
  /* Gradient bleed where the panel meets the scene */
  .story::before {
    content: ''; position: absolute;
    left: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }
  body[data-mode="light"] .story::before {
    background: linear-gradient(90deg, transparent, rgba(80, 50, 20, 0.08));
  }

  .story-bg {
    position: absolute; inset: 0;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/600px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg');
    background-size: cover; background-position: center;
    filter: sepia(0.3) blur(40px) brightness(0.5);
    opacity: 0.45;
  }
  body[data-mode="light"] .story-bg {
    filter: sepia(0.55) blur(40px) brightness(1.05);
    opacity: 0.20;
  }
  .story-content {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 28px 32px 24px;
  }
  .story-top {
    display: flex; justify-content: space-between; align-items: center;
  }
  .story-eyebrow {
    font-size: 11px; letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--warm-glow);
  }
  .story-progress-dots { display: flex; gap: 6px; }
  .story-progress-dots span {
    width: 24px; height: 2px;
    background: rgba(244, 239, 230, 0.2);
    border-radius: 2px;
  }
  .story-progress-dots span.complete { background: var(--text-faint); }
  .story-progress-dots span.active { background: var(--warm-glow); }
  .story-close {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(244, 239, 230, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim); cursor: pointer;
    transition: all 0.2s ease;
  }
  .story-close:hover { color: var(--text); transform: rotate(90deg); }

  .story-center {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    gap: 20px;
    padding: 12px 8px;
  }
  .story-chapter-num {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 300; font-size: 12px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--warm-glow);
  }
  .story-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    font-style: italic; font-weight: 400;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.1; letter-spacing: -0.025em;
    color: var(--text); max-width: 100%;
  }
  .story-narration {
    max-width: 100%;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 15.5px; line-height: 1.6;
    color: var(--text-dim);
    font-style: italic;
  }

  .story-bottom {
    display: flex; justify-content: center; align-items: center;
    gap: 32px;
  }
  .story-control {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(244, 239, 230, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text); cursor: pointer;
    transition: all 0.2s ease;
  }
  .story-control:hover { background: rgba(244, 239, 230, 0.12); border-color: var(--panel-border-hot); }
  .story-control.play {
    width: 64px; height: 64px;
    background: var(--warm-glow); color: var(--bg-deep);
    border-color: var(--warm-glow);
  }
  .story-control.play:hover { background: var(--amber); }

  /* Story play button: default shows Play icon. When .is-speaking is
     set (after the user pressed it), shows Pause + animates the voice
     waveform below. Mirrors the reader-aloud pattern but uses Story's
     existing controls — no separate "Read aloud" button. */
  .story-control.play .story-pause-icon { display: none; }
  .story-control.play.is-speaking .story-play-icon { display: none; }
  .story-control.play.is-speaking .story-pause-icon { display: block; }
  .story-control.play.is-speaking {
    box-shadow: 0 0 0 4px rgba(212, 160, 88, 0.18), 0 0 20px rgba(212, 160, 88, 0.32);
  }

  /* Voice-of-the-legend cue beneath the controls */
  .story-voice-cue {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    opacity: 0.85;
  }
  .story-voice-cue em { color: var(--warm-glow); font-style: italic; }
  .story-voice-wave {
    display: inline-flex; align-items: flex-end; gap: 2px;
    height: 12px;
  }
  .story-voice-wave span {
    width: 2px; height: 100%;
    background: var(--warm-glow);
    border-radius: 1px;
    opacity: 0.45;
    transform-origin: bottom;
    transform: scaleY(0.35);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* Animate the bars only when story is speaking */
  body.story-speaking .story-voice-wave span {
    animation: story-wave-bar 1.1s ease-in-out infinite;
    opacity: 0.9;
  }
  body.story-speaking .story-voice-wave span:nth-child(2) { animation-delay: 0.12s; }
  body.story-speaking .story-voice-wave span:nth-child(3) { animation-delay: 0.24s; }
  body.story-speaking .story-voice-wave span:nth-child(4) { animation-delay: 0.36s; }
  body.story-speaking .story-voice-wave span:nth-child(5) { animation-delay: 0.48s; }
  @keyframes story-wave-bar {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1); }
  }

  /* When story is speaking, narration text gets a per-word cascade
     highlight (same pattern as reader read-aloud) so words "light up"
     as the avatar speaks them. */
  @keyframes story-word-speak {
    0%, 100% { background: transparent; }
    20%      { background: linear-gradient(180deg, transparent 60%, rgba(212, 160, 88, 0.42) 60%); }
    80%      { background: linear-gradient(180deg, transparent 60%, rgba(212, 160, 88, 0.20) 60%); }
  }
  .story-narration .story-word {
    display: inline;
    border-radius: 2px;
    animation: story-word-speak 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--wi, 0) * 200ms);
  }

  /* ── STORY: placeholder banner for non-Leonardo (was full overlay) ──
     Mirrors the Bio panel pattern — the structure stays visible, the
     content is lorem ipsum, the banner makes the placeholder state
     unambiguous. Story-center + bottom + bg STAY visible so the merge
     agent sees where the real story content will go. */
  .story-preparing { display: none; }
  body:not([data-legend="leonardo"]) .story-preparing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(212, 165, 116, 0.16), rgba(212, 165, 116, 0.04) 70%);
    border: 1px solid rgba(212, 160, 88, 0.22);
    border-radius: 10px;
    text-align: left;
    margin: 0 auto 12px;
    max-width: 420px;
  }
  body[data-mode="light"]:not([data-legend="leonardo"]) .story-preparing {
    background: linear-gradient(90deg, rgba(184, 138, 62, 0.14), rgba(184, 138, 62, 0.03) 70%);
    border-color: rgba(184, 138, 62, 0.32);
  }
  /* Hide the larger "step back outside" CTA in banner mode */
  body:not([data-legend="leonardo"]) .story-preparing-title,
  body:not([data-legend="leonardo"]) .story-preparing-back {
    display: none;
  }
  body:not([data-legend="leonardo"]) .story-preparing-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warm-glow);
    padding: 3px 8px;
    background: rgba(212, 160, 88, 0.18);
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 4px;
    flex-shrink: 0;
    font-style: normal;
    margin: 0;
  }
  body:not([data-legend="leonardo"]) .story-preparing-eyebrow em { font-style: normal; }
  body:not([data-legend="leonardo"]) .story-preparing-body {
    flex: 1;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 11.5px; line-height: 1.45;
    color: var(--text-dim);
    margin: 0; max-width: none;
  }
  .story-preparing-eyebrow {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px; letter-spacing: 0.04em;
    color: var(--warm-glow);
  }
  .story-preparing-title {
    margin-top: 4px;
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: clamp(32px, 4vw, 44px);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.1; letter-spacing: -0.025em;
    color: var(--text);
    max-width: 620px;
  }
  .story-preparing-title em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .story-preparing-body {
    margin-top: 6px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 16px; line-height: 1.6;
    color: var(--text-dim);
    max-width: 460px;
  }
  .story-preparing-back {
    margin-top: 24px;
    padding: 11px 24px;
    background: transparent;
    border: 1px solid var(--panel-border-hot);
    border-radius: 999px;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 13px; letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .story-preparing-back:hover {
    background: var(--hover-tint);
    border-color: var(--warm-glow);
    transform: translateY(-1px);
  }
  .story-preparing-back span { color: var(--warm-glow); transition: transform 0.2s ease; }
  .story-preparing-back:hover span { transform: translateX(2px); }

  /* ── LESSON HUB (slides from right) ────────────────────── */
  .lesson-hub {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 92vw);
    z-index: 20;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
  }
  body.lessons-open .lesson-hub { transform: translateX(0); }
  .lesson-hub::before {
    content: ''; position: absolute;
    left: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }

  .lesson-continue {
    margin: 16px 0 32px;
    padding: 20px;
    background: linear-gradient(135deg, var(--secondary-soft), rgba(61, 138, 135, 0.02));
    border: 1px solid var(--secondary-soft);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .lesson-continue:hover { border-color: rgba(61, 138, 135, 0.4); }
  .lesson-continue .eyebrow {
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--secondary);
  }
  .lesson-continue h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 18px;
    margin-top: 8px; letter-spacing: -0.015em;
  }
  .lesson-continue .progress-bar {
    margin-top: 14px;
    height: 3px; background: var(--hover-tint-strong);
    border-radius: 2px; overflow: hidden;
  }
  .lesson-continue .progress-bar > div {
    height: 100%; width: 45%;
    background: var(--secondary); border-radius: 2px;
  }
  .lesson-continue .progress-text {
    margin-top: 8px;
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.08em;
  }

  .lesson-list { display: flex; flex-direction: column; gap: 10px; }
  .lesson-tile {
    display: flex; gap: 14px;
    padding: 14px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .lesson-tile:hover {
    background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
    transform: translateX(2px);
  }
  .lesson-thumb {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(61, 138, 135, 0.18), rgba(61, 138, 135, 0.04));
    display: flex; align-items: center; justify-content: center;
    color: var(--secondary);
  }
  body[data-mode="light"] .lesson-thumb {
    background: linear-gradient(135deg, rgba(45, 102, 100, 0.14), rgba(45, 102, 100, 0.03));
  }
  .lesson-info { flex: 1; min-width: 0; }
  .lesson-info h5 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 15px;
    line-height: 1.2; letter-spacing: -0.01em;
  }
  .lesson-info .meta {
    margin-top: 6px;
    display: flex; gap: 10px; align-items: center;
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.06em;
  }
  .lesson-info .meta .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-faint);
  }

  /* ── TUTOR PANEL (narrower, slides right) ──────────────── */
  .tutor-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(380px, 92vw);
    z-index: 20;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
  }
  body.tutor-open .tutor-panel { transform: translateX(0); }

  .tutor-header { padding: 24px 28px 0; }
  .tutor-header .badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 999px;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: #4ade80;
  }
  .tutor-header h2 {
    margin-top: 14px;
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: 28px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.05; letter-spacing: -0.025em;
  }
  .tutor-header p {
    margin-top: 8px;
    font-size: 13px; color: var(--text-dim);
    line-height: 1.5;
  }

  .tutor-section {
    margin: 24px 28px;
    padding: 18px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
  }
  .tutor-section h5 {
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-faint);
  }

  .tutor-rings {
    display: flex; justify-content: space-between;
    margin-top: 16px;
  }
  .ring {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
  }
  .ring-circle {
    position: relative;
    width: 56px; height: 56px;
  }
  .ring-circle svg { transform: rotate(-90deg); }
  .ring-circle .track { fill: none; stroke: var(--hover-tint-strong); stroke-width: 4; }
  .ring-circle .progress { fill: none; stroke: var(--secondary); stroke-width: 4; stroke-linecap: round; }
  .ring-value {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-size: 16px; font-weight: 400;
  }
  .ring-label {
    font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-faint);
  }

  .tutor-questions {
    margin-top: 14px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .tutor-q {
    padding: 12px 14px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .tutor-q:hover {
    color: var(--text); border-color: var(--panel-border-hot);
    background: var(--hover-tint-strong);
  }

  /* ═══════════════════════════════════════════════════════════════
     LESSON HUB v2 — 3-stage structure matching the real backend.
     Topics list → Subtopics rail → Lesson + Quiz. Accordion behavior
     within Topics stage (subtopics open beneath their topic card).
     CSS class names echo historian.js conventions where possible so
     the merge agent can lift styles or hooks cleanly.
     ═══════════════════════════════════════════════════════════════ */

  /* Sticky header with back arrow + dynamic title */
  .lesson-hub-head {
    position: sticky; top: 0;
    z-index: 2;
    display: flex; align-items: center; gap: 12px;
    padding: 24px 28px 18px;
    background: inherit;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
  }
  .lesson-hub[data-stage="subtopics"] .lesson-hub-head,
  .lesson-hub[data-stage="lesson"]    .lesson-hub-head {
    border-bottom-color: var(--panel-border);
  }
  .lesson-back {
    width: 32px; height: 32px;
    display: none; align-items: center; justify-content: center;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }
  .lesson-back:hover { color: var(--text); background: var(--hover-tint-strong); border-color: var(--panel-border-hot); }
  .lesson-back svg { width: 14px; height: 14px; stroke-width: 1.8; }
  .lesson-hub[data-stage="subtopics"] .lesson-back,
  .lesson-hub[data-stage="lesson"]    .lesson-back { display: flex; }
  /* Always-visible header close (matches Tutor's round panel-close), pinned
     inside the sticky header so it never gets painted over while scrolling. */
  .lesson-hub-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }
  .lesson-hub-close:hover {
    color: var(--text); background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
  }
  .lesson-hub-close svg { width: 14px; height: 14px; stroke-width: 2; }
  .lesson-head-text { flex: 1; min-width: 0; }
  .lesson-head-text h2 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 22px;
    line-height: 1.1; letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lesson-head-text h2 em { font-style: italic; color: var(--warm-glow); }
  .lesson-head-text .tag {
    margin-top: 4px;
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.06em;
  }

  /* Stage visibility — driven by data-stage on .lesson-hub */
  .lesson-stage { display: none; padding: 0 28px 28px; }
  .lesson-hub[data-stage="topics"]    .stage-topics,
  .lesson-hub[data-stage="subtopics"] .stage-subtopics,
  .lesson-hub[data-stage="lesson"]    .stage-lesson { display: block; }

  /* ── TOPIC CARDS (Stage 1) — accordion ──
     Each card shows title + 1-line desc + "X subtopics →".
     Clicking expands the subtopic-rail beneath it (accordion). */
  .topic-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
  .topic-card {
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .topic-card:hover { border-color: var(--panel-border-hot); }
  .topic-card.is-expanded {
    background: var(--hover-tint-strong);
    border-color: rgba(212, 160, 88, 0.35);
  }
  .topic-card-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: transparent; border: 0; width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
  }
  .topic-card-title-wrap { flex: 1; min-width: 0; }
  .topic-card-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 15.5px;
    line-height: 1.25; letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 4px;
  }
  .topic-card-desc {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-dim);
    margin: 0;
  }
  .topic-card-meta {
    flex-shrink: 0;
    align-self: center;
    display: flex; align-items: center; gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.25s ease, transform 0.25s ease;
  }
  .topic-card:hover .topic-card-meta { color: var(--warm-glow); }
  .topic-card.is-expanded .topic-card-meta { color: var(--warm-glow); transform: rotate(90deg); }
  .topic-card-meta svg { width: 10px; height: 10px; stroke-width: 2; }

  /* Subtopic rail inside an accordion-expanded topic card */
  .topic-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .topic-card.is-expanded .topic-card-body { max-height: 600px; }
  .subtopic-rail {
    padding: 4px 8px 12px;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .rail-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 14px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    color: var(--text-dim);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 13px; line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .rail-item:hover {
    color: var(--text);
    background: var(--hover-tint);
    border-left-color: rgba(212, 160, 88, 0.4);
  }
  .rail-item.active {
    color: var(--text);
    background: var(--hover-tint-strong);
    border-left-color: var(--warm-glow);
  }
  .rail-item-num {
    flex-shrink: 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--warm-glow);
    width: 22px;
  }

  /* ── STAGE 2: SUBTOPICS — when a single topic is viewed standalone ── */
  .stage-subtopics .topic-lead {
    margin: 0 0 18px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 14.5px; line-height: 1.6;
    color: var(--text-dim);
  }
  .stage-subtopics .subtopic-rail {
    padding: 4px 0;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
  }

  /* ── STAGE 3: LESSON content + Quiz card ── */
  .lesson-article {
    padding: 22px 22px 24px;
    background: linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02));
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    margin-bottom: 16px;
  }
  body[data-mode="light"] .lesson-article {
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.55), rgba(255, 247, 232, 0.30));
    border-color: rgba(184, 138, 62, 0.22);
  }
  .lesson-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }
  .lesson-head h3.hist-heading-with-btn {
    margin: 0;
    flex: 1;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .lesson-head h3 em { font-style: italic; color: var(--warm-glow); }
  /* Teach Me button — matches the real code's .btn-teach-me class */
  .btn-teach-me {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px 6px 11px;
    background: linear-gradient(135deg, #d4a058 0%, #8b3a1e 100%);
    border: 1px solid rgba(212, 160, 88, 0.4);
    border-radius: 999px;
    color: #fbf3e2;
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.06em;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
  }
  .btn-teach-me:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .btn-teach-me::after { content: '✦'; font-size: 10px; opacity: 0.9; }

  /* The "expanded" Teach Me response card that drops in beneath the title */
  .hist-teach-me-response {
    display: none;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.10), rgba(212, 160, 88, 0.02));
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 10px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13.5px; line-height: 1.6;
    color: var(--text-dim);
  }
  .hist-teach-me-response.is-open { display: block; }
  .hist-teach-me-response em { color: var(--warm-glow); font-style: italic; }

  .hist-lesson-content {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14px; line-height: 1.65;
    color: var(--text-soft, var(--text));
  }
  .hist-lesson-content p { margin: 0 0 12px; }
  .hist-lesson-content p:last-child { margin-bottom: 0; }
  .hist-lesson-content p.lead::first-letter {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600;
    font-weight: 600;
    font-size: 38px;
    float: left; line-height: 0.9;
    margin: 6px 8px 0 0;
    background: linear-gradient(160deg, #c08540 0%, #8b3a1e 65%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* End-of-lesson nav: Mark as read + Next subtopic. Gives forward momentum
     without forcing a back-out to the topics list. */
  .lesson-nav-row {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--panel-border);
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
  }
  .lesson-mark-read {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px 7px 11px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .lesson-mark-read:hover {
    background: var(--hover-tint);
    border-color: var(--panel-border-hot);
    color: var(--text);
  }
  .lesson-mark-read.is-read {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.32);
    color: #4ade80;
  }
  .lesson-mark-read svg { stroke-width: 2; }
  .lesson-next-sub {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.18), rgba(212, 160, 88, 0.04));
    border: 1px solid rgba(212, 160, 88, 0.32);
    border-radius: 999px;
    color: var(--warm-glow);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 60%;
  }
  .lesson-next-sub:hover {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.28), rgba(212, 160, 88, 0.10));
    border-color: rgba(212, 160, 88, 0.52);
    transform: translateX(2px);
  }
  .lesson-next-label {
    flex-shrink: 0;
    color: var(--text-faint);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .lesson-next-title {
    flex: 1;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lesson-next-arrow {
    flex-shrink: 0;
    color: var(--warm-glow);
    transition: transform 0.2s ease;
  }
  .lesson-next-sub:hover .lesson-next-arrow { transform: translateX(2px); }
  /* Last subtopic in a topic → hide the next button (no next to go to) */
  .lesson-next-sub.is-last { display: none; }

  /* ── QUIZ CARD ── */
  .quiz-card {
    padding: 18px 20px 20px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
  }
  .quiz-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
  }
  .quiz-card-head h4 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400;
    font-size: 16px;
    color: var(--text);
  }
  .quiz-controls { display: flex; gap: 6px; align-items: center; }
  .quiz-controls .hist-btn,
  .quiz-controls .hist-ghost {
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .quiz-controls .hist-btn:hover { background: var(--hover-tint); color: var(--text); border-color: var(--panel-border-hot); }
  .quiz-toolbar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
  }
  .quiz-toolbar .hist-ghost {
    width: 28px; height: 28px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .quiz-toolbar .hist-ghost:hover { background: var(--hover-tint-strong); color: var(--text); }
  .quiz-list {
    flex: 1;
    display: flex; gap: 4px; justify-content: center;
  }
  .quiz-list-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--panel-border);
    transition: all 0.25s ease;
  }
  .quiz-list-dot.is-current { background: var(--warm-glow); transform: scale(1.45); }
  .quiz-list-dot.is-correct { background: rgba(74, 222, 128, 0.7); }
  .quiz-list-dot.is-wrong   { background: rgba(232, 100, 92, 0.7); }
  .quiz-zone .quiz-q-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 14.5px; line-height: 1.5;
    color: var(--text);
    margin: 0 0 14px;
  }
  .quiz-zone .quiz-options {
    display: flex; flex-direction: column; gap: 6px;
  }
  .quiz-zone .quiz-option {
    text-align: left;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px; line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: baseline; gap: 10px;
  }
  body[data-mode="light"] .quiz-zone .quiz-option {
    background: rgba(255, 248, 230, 0.6);
  }
  .quiz-zone .quiz-option:hover {
    background: var(--hover-tint);
    border-color: var(--panel-border-hot);
    color: var(--text);
  }
  .quiz-zone .quiz-option.is-selected {
    background: rgba(212, 160, 88, 0.14);
    border-color: var(--warm-glow);
    color: var(--text);
  }
  .quiz-zone .quiz-option.is-correct {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.5);
    color: var(--text);
  }
  .quiz-zone .quiz-option.is-correct .quiz-option-letter { color: rgba(74, 222, 128, 0.9); }
  .quiz-zone .quiz-option.is-wrong {
    background: rgba(232, 100, 92, 0.12);
    border-color: rgba(232, 100, 92, 0.5);
    color: var(--text);
  }
  .quiz-zone .quiz-option.is-wrong .quiz-option-letter { color: rgba(232, 100, 92, 0.9); }
  .quiz-zone .quiz-option:disabled { cursor: default; pointer-events: none; }
  .quiz-zone .quiz-option-letter {
    flex-shrink: 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--warm-glow);
    min-width: 14px;
  }
  .quiz-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 12.5px;
    display: none;
  }
  .quiz-feedback.is-visible { display: block; }
  .quiz-feedback.is-correct { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.32); color: rgba(74, 222, 128, 0.9); }
  .quiz-feedback.is-wrong   { background: rgba(232, 100, 92, 0.1); border: 1px solid rgba(232, 100, 92, 0.32); color: rgba(232, 100, 92, 0.9); }

  /* ═══════════════════════════════════════════════════════════════
     TUTOR v2 — diagnostic test flow matching tutor_diagnostic.py.
     3 stages: Entry (input field) → Active (question + subtopic map) →
     Results (scoring with weight labels). Reuses .tutor-rings CSS.
     ═══════════════════════════════════════════════════════════════ */
  .tutor-panel[data-tutor-stage] { width: min(440px, 92vw); }
  .tutor-stage { display: none; padding: 0 28px 28px; }
  .tutor-panel[data-tutor-stage="entry"]   .stage-entry,
  .tutor-panel[data-tutor-stage="active"]  .stage-active,
  .tutor-panel[data-tutor-stage="results"] .stage-results { display: block; }
  .tutor-panel[data-tutor-stage="entry"] .badge { background: rgba(244, 239, 230, 0.06); border-color: rgba(244, 239, 230, 0.18); color: var(--text-dim); }
  .tutor-panel[data-tutor-stage="active"] .badge { background: rgba(232, 177, 12, 0.12); border-color: rgba(232, 177, 12, 0.32); color: var(--warm-glow); }
  .tutor-panel[data-tutor-stage="results"] .badge { background: rgba(74, 222, 128, 0.10); border-color: rgba(74, 222, 128, 0.30); color: #4ade80; }

  /* Diagnostic entry — topic input + Begin button */
  .stage-entry .diag-prompt {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 14px; line-height: 1.55;
    color: var(--text-dim);
    margin: 16px 0 14px;
  }
  .diag-input-row {
    display: flex; gap: 8px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 6px;
    transition: border-color 0.25s ease;
  }
  .diag-input-row:focus-within { border-color: var(--warm-glow); }
  #diag-topic-input {
    flex: 1;
    background: transparent; border: 0; outline: 0;
    color: var(--text);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 14px;
    padding: 8px 10px;
  }
  #diag-topic-input::placeholder { color: var(--text-faint); }
  .diag-begin {
    background: linear-gradient(135deg, #d4a058, #8b3a1e);
    border: 0;
    border-radius: 999px;
    color: #fbf3e2;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.06em;
    padding: 8px 16px;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
  }
  .diag-begin:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .diag-past {
    margin-top: 24px;
  }
  .diag-past h5 {
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 10px;
  }
  .diag-past-item {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .diag-past-item:hover { background: var(--hover-tint); border-color: var(--panel-border-hot); }
  .diag-past-topic {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13.5px;
    color: var(--text);
  }
  .diag-past-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.06em;
    color: var(--text-faint);
  }

  /* Active diagnostic — subtopic map + question card */
  .diag-subtopic-map {
    margin: 16px 0 18px;
    padding: 14px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
  }
  .diag-subtopic-map h5 {
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 12px;
  }
  .diag-subtopic-list {
    display: flex; flex-direction: column; gap: 8px;
  }
  .diag-subtopic {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 10px;
    align-items: center;
  }
  .diag-subtopic-name {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 12.5px;
    color: var(--text-dim);
  }
  .diag-subtopic[data-mastery="solid"]    .diag-subtopic-name { color: var(--text); }
  .diag-subtopic[data-mastery="exploring"].diag-subtopic-name { color: var(--text-soft, var(--text)); }
  .diag-mastery-sliver {
    height: 4px;
    background: var(--hover-tint-strong);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .diag-mastery-sliver::after {
    content: '';
    position: absolute;
    inset: 0 var(--remain, 100%) 0 0;
    background: var(--mastery-color, var(--text-faint));
    transition: inset 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .diag-subtopic[data-mastery="not-yet"]   { --mastery-color: rgba(244, 239, 230, 0.22); --remain: 90%; }
  .diag-subtopic[data-mastery="exploring"] { --mastery-color: var(--warm-glow);            --remain: 50%; }
  .diag-subtopic[data-mastery="solid"]     { --mastery-color: #4ade80;                     --remain: 12%; }

  .diag-question-card {
    padding: 18px 20px 16px;
    background: linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02));
    border: 1px solid var(--panel-border);
    border-radius: 14px;
  }
  body[data-mode="light"] .diag-question-card {
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.55), rgba(255, 247, 232, 0.30));
    border-color: rgba(184, 138, 62, 0.22);
  }
  .diag-question-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
  }
  .diag-question-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 15px; line-height: 1.5;
    color: var(--text);
    margin: 0 0 14px;
  }
  .diag-options {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 12px;
  }
  .diag-option {
    text-align: left;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: baseline; gap: 10px;
  }
  body[data-mode="light"] .diag-option { background: rgba(255, 248, 230, 0.6); }
  .diag-option:hover { background: var(--hover-tint); color: var(--text); border-color: var(--panel-border-hot); }
  .diag-option.is-selected { background: rgba(212, 160, 88, 0.14); border-color: var(--warm-glow); color: var(--text); }
  .diag-option-letter { font-style: italic; color: var(--warm-glow); min-width: 14px; }
  .diag-confidence {
    margin: 8px 0 14px;
    display: flex; align-items: center; gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .diag-confidence-slider {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 3px;
    background: linear-gradient(to right, var(--hover-tint-strong), var(--warm-glow));
    border-radius: 999px;
  }
  .diag-confidence-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    background: var(--warm-glow);
    border: 2px solid var(--bg-deep);
    border-radius: 50%;
    cursor: pointer;
  }
  .diag-submit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--panel-border);
  }
  .diag-progress-text {
    font-family: 'Manrope', sans-serif;
    font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.04em;
  }
  .diag-submit {
    background: linear-gradient(135deg, #d4a058, #8b3a1e);
    border: 0;
    border-radius: 999px;
    color: #fbf3e2;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.06em;
    padding: 7px 18px;
    cursor: pointer;
    transition: filter 0.2s ease, opacity 0.2s ease;
  }
  .diag-submit:hover:not(:disabled) { filter: brightness(1.12); }
  .diag-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
  }
  /* Cancel button — sits opposite Submit, ghost style so it doesn't compete */
  .diag-cancel {
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: 'Manrope', sans-serif;
    font-size: 11px; letter-spacing: 0.04em;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .diag-cancel:hover {
    background: var(--hover-tint);
    border-color: var(--panel-border-hot);
    color: var(--text);
  }

  /* Results stage — bottom action row */
  .diag-results-actions {
    margin: 12px 28px 0;
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-border);
  }
  .diag-retake, .diag-new-topic {
    flex: 1;
    padding: 9px 12px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .diag-retake {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
  }
  .diag-retake:hover { background: var(--hover-tint); border-color: var(--panel-border-hot); color: var(--text); }
  .diag-new-topic {
    background: linear-gradient(135deg, #d4a058, #8b3a1e);
    border: 1px solid rgba(212, 160, 88, 0.4);
    color: #fbf3e2;
  }
  .diag-new-topic:hover { filter: brightness(1.12); }

  /* Subtopic chips clickable — show a hint cursor + hover treatment */
  .diag-subtopic { padding: 4px; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; }
  .diag-subtopic:hover { background: var(--hover-tint); }
  /* Sent toast — reuses reader-toast styling but separate ID/class */
  .tutor-q { position: relative; }
  .tutor-q[data-send]::after {
    content: 'Send to chat →';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-glow);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .tutor-q[data-send]:hover::after { opacity: 1; }
  .tutor-q[data-send]:hover { padding-right: 100px; }

  /* Results stage — scoring rings with weight labels */
  .stage-results .tutor-rings { margin-top: 18px; }
  .stage-results .ring-weight {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 10px;
    color: var(--warm-glow);
    margin-top: 2px;
  }

  /* ── MODALS ────────────────────────────────────────────── */
  .modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 14, 8, 0.55), rgba(5, 8, 14, 0.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body[data-mode="light"] .modal-backdrop {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(80, 50, 20, 0.20), rgba(80, 50, 20, 0.42));
  }
  .modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .modal {
    background: rgba(28, 34, 44, 0.92);
    backdrop-filter: blur(40px) saturate(1.2);
    -webkit-backdrop-filter: blur(40px) saturate(1.2);
    border: 1px solid rgba(244, 239, 230, 0.08);
    border-radius: 24px;
    padding: 40px;
    max-width: 440px; width: 90%;
    transform: scale(0.96);
    transition: transform 0.3s ease;
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.05),
      inset 0 1px 0 rgba(244, 239, 230, 0.07),
      0 0 80px rgba(212, 165, 116, 0.03);
  }
  body[data-mode="light"] .modal {
    background: rgba(255, 247, 232, 0.97);
    border: 1px solid rgba(31, 24, 16, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 32px 64px rgba(80, 50, 20, 0.18),
      0 8px 20px rgba(80, 50, 20, 0.10);
  }
  .modal-backdrop.is-open .modal { transform: scale(1); }
  .modal-close {
    position: absolute; top: 20px; right: 20px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-dim); cursor: pointer;
    border-radius: 50%; transition: all 0.2s ease;
  }
  .modal-close:hover { color: var(--text); background: var(--hover-tint); }

  /* Switch confirm */
  .switch-modal { max-width: 380px; text-align: center; padding: 36px 32px; }
  .switch-modal .switch-portrait {
    width: 80px; height: 80px;
    border-radius: 50%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Marie_Curie_c._1920s.jpg/300px-Marie_Curie_c._1920s.jpg');
    background-size: cover; background-position: center 15%;
    margin: 0 auto 18px;
    border: 2px solid var(--warm-glow);
    box-shadow: 0 0 24px var(--warm-glow-soft);
    filter: sepia(0.15) contrast(1.05);
  }
  .switch-modal h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.15; letter-spacing: -0.02em;
  }
  .switch-modal h3 em { font-style: italic; color: var(--warm-glow); }
  .switch-modal p {
    margin-top: 8px; font-size: 13px; color: var(--text-dim);
  }
  .switch-actions {
    margin-top: 28px;
    display: flex; gap: 10px;
  }
  .btn {
    flex: 1; padding: 12px 20px;
    border: none; border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-primary { background: var(--warm-glow); color: var(--bg-deep); }
  .btn-primary:hover { background: var(--amber); }
  .btn-secondary {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--panel-border-hot);
  }
  .btn-secondary:hover { color: var(--text); background: var(--hover-tint); }

  /* Subscribe */
  .subscribe-modal { max-width: 560px; padding: 44px; position: relative; }
  .subscribe-modal h2 {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: 32px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.05; letter-spacing: -0.025em;
  }
  .subscribe-modal h2 em { font-style: italic; color: var(--warm-glow); }
  .subscribe-modal > p {
    margin-top: 10px; font-size: 14px; color: var(--text-dim);
    max-width: 380px;
  }
  .subscribe-benefits {
    margin: 24px 0 28px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .benefit {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
  }
  .benefit-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: var(--premium);
    flex-shrink: 0;
  }
  .plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .plan {
    padding: 18px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .plan:hover {
    border-color: var(--panel-border-hot);
    background: var(--hover-tint-strong);
  }
  .plan.featured {
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.12), rgba(212, 160, 88, 0.02));
    border-color: rgba(212, 160, 88, 0.35);
    box-shadow: inset 0 0 24px rgba(255, 215, 130, 0.06);
  }
  .plan .best-value {
    position: absolute; top: -10px; right: 14px;
    padding: 3px 10px;
    background: var(--premium-gradient); color: #1a1208;
    border-radius: 999px;
    font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 600;
    box-shadow: 0 4px 12px rgba(192, 133, 64, 0.35);
  }
  .plan .period {
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .plan .price {
    margin-top: 8px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 400; font-size: 32px;
    letter-spacing: -0.02em;
  }
  .plan .price small { font-size: 14px; color: var(--text-faint); }
  .plan .save {
    margin-top: 4px;
    font-size: 11px; color: var(--premium);
  }

  /* Auth */
  .auth-modal { max-width: 400px; position: relative; padding: 40px 36px; }
  .auth-modal h2 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 26px;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.1; letter-spacing: -0.02em;
  }
  .auth-modal h2 em { font-style: italic; color: var(--warm-glow); }
  .auth-modal > p {
    margin-top: 6px; font-size: 13px; color: var(--text-dim);
  }

  /* Social sign-in — cohesive glass-surface buttons (match fields & panels) */
  .auth-social {
    margin-top: 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .google-btn, .apple-btn {
    width: 100%; padding: 13px 16px;
    background: var(--hover-tint);
    color: var(--text);
    border: 1px solid var(--panel-border-hot);
    border-radius: 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .google-btn svg, .apple-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .google-btn:hover, .apple-btn:hover {
    background: var(--hover-tint-strong);
    border-color: var(--warm-glow);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
  body[data-mode="light"] .google-btn:hover,
  body[data-mode="light"] .apple-btn:hover {
    box-shadow: 0 8px 20px rgba(80, 50, 20, 0.12);
  }
  .auth-divider {
    margin: 20px 0;
    display: flex; align-items: center; gap: 12px;
    color: var(--text-faint);
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--panel-border);
  }

  /* Email + password form */
  .auth-email-form { display: flex; flex-direction: column; gap: 10px; }
  .auth-field {
    /* Solid field background so resting, focus AND browser-autofill states all
       look identical (the autofill box-shadow trick below reuses these vars). */
    --_field-bg: #20262f;
    --_field-bg-focus: #262e39;
    width: 100%; padding: 13px 15px;
    background: var(--_field-bg);
    border: 1px solid var(--panel-border-hot);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    margin: 0;
    outline: none;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  body[data-mode="light"] .auth-field {
    --_field-bg: #f6ecd8;
    --_field-bg-focus: #fffaf0;
  }
  .auth-field:hover { border-color: var(--text-faint); }
  .auth-field:focus {
    border-color: var(--warm-glow);
    background: var(--_field-bg-focus);
    box-shadow: 0 0 0 3px var(--warm-glow-soft);
  }
  .auth-field::placeholder { color: var(--text-faint); }
  /* Keep browser-autofilled fields visually identical to resting/focus
     (kills the default yellow/white autofill restyle so the shape & color
     never jump between empty and autofilled). */
  .auth-field:-webkit-autofill,
  .auth-field:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    -webkit-box-shadow: inset 0 0 0 1000px var(--_field-bg);
    border: 1px solid var(--panel-border-hot);
    border-radius: 12px;
    transition: background-color 9999s ease-in-out 0s;
  }
  .auth-field:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--_field-bg-focus), 0 0 0 3px var(--warm-glow-soft);
    border-color: var(--warm-glow);
  }
  .auth-submit {
    width: 100%; padding: 13px;
    margin-top: 4px;
    background: var(--warm-glow-soft);
    border: 1px solid var(--warm-glow);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .auth-submit:hover {
    background: var(--warm-glow);
    color: var(--bg-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--warm-glow-soft);
  }
  body[data-mode="light"] .auth-submit:hover { color: #fff7e8; }
  .auth-submit:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

  /* Sign-in ⇄ create-account switch — a modern pill, not a plain text link */
  .auth-toggle {
    margin-top: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    font-size: 13px; color: var(--text-dim);
  }
  .auth-switch {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border-hot);
    border-radius: 999px;
    color: var(--warm-glow);
    font-weight: 600; font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .auth-switch:hover {
    background: var(--warm-glow-soft);
    border-color: var(--warm-glow);
    transform: translateY(-1px);
  }
  .auth-switch svg { width: 13px; height: 13px; }

  /* ── DEMO NAVIGATOR ────────────────────────────────────── */
  .demo-nav-toggle {
    position: fixed; bottom: 28px; right: 28px; z-index: 1000;
    width: 44px; height: 44px;
    background: rgba(212, 165, 116, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 50%;
    color: var(--warm-glow); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
  }
  .demo-nav-toggle:hover {
    background: rgba(212, 165, 116, 0.2);
    transform: scale(1.05);
  }
  .demo-nav-toggle svg { width: 18px; height: 18px; }

  .demo-nav {
    position: fixed; bottom: 80px; right: 28px; z-index: 999;
    width: 260px;
    background: rgba(28, 34, 44, 0.92);
    backdrop-filter: blur(30px) saturate(1.2);
    -webkit-backdrop-filter: blur(30px) saturate(1.2);
    border: 1px solid rgba(244, 239, 230, 0.08);
    border-radius: 18px;
    padding: 16px;
    opacity: 0; transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.05),
      inset 0 1px 0 rgba(244, 239, 230, 0.06);
  }
  body[data-mode="light"] .demo-nav {
    background: rgba(255, 247, 232, 0.96);
    border: 1px solid rgba(31, 24, 16, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 16px 32px rgba(80, 50, 20, 0.16);
  }
  .demo-nav.is-open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .demo-nav-label {
    font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--warm-glow);
    margin-bottom: 12px;
  }
  .demo-nav-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .demo-nav-btn:hover { color: var(--text); background: var(--hover-tint); }
  .demo-nav-btn .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
  }
  .demo-nav-btn:hover .dot { background: var(--warm-glow); }
  .demo-nav-divider {
    height: 1px; margin: 8px 0;
    background: var(--panel-border);
  }

  /* ── RESPONSIVE ────────────────────────────────────────── */
  @media (max-width: 720px) {
    .top-bar { padding: 16px; }
    .legend-name h1 { font-size: 20px; }
    .legend-name .lifespan { display: none; }
    .right-rail { right: 10px; padding: 6px 4px; gap: 2px; }
    .rail-btn { width: 38px; height: 38px; border-radius: 16px; }
    /* Mobile: the night-mode / history / share buttons are relocated from the
       top bar into the right rail (see relocateTopControlsForMobile in
       index.html). Restyle them to match the rail buttons EXACTLY so the rail
       reads as one cohesive set — flat, transparent, square-ish, 38px. The
       `.in-rail` class lifts specificity above the day/night `body[data-mode]`
       chrome these buttons normally carry; !important guards the few visual
       props that those later rules would otherwise win. */
    .right-rail .mode-toggle.in-rail,
    .right-rail .history-toggle.in-rail,
    .right-rail .share-toggle.in-rail {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 16px;
      color: var(--text-dim);
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .right-rail .mode-toggle.in-rail:hover,
    .right-rail .history-toggle.in-rail:hover,
    .right-rail .share-toggle.in-rail:hover {
      color: var(--text);
      background: var(--hover-tint) !important;
      border-color: transparent;
      transform: none;
    }
    .right-rail .mode-toggle.in-rail svg,
    .right-rail .history-toggle.in-rail svg,
    .right-rail .share-toggle.in-rail svg { width: 20px; height: 20px; }
    .chat-zone { width: calc(100% - 80px); bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--kb-offset, 0px)); }
    /* Prompt chips: ONE sideways-scrolling row (no wrap) so they can't stack
       onto multiple lines and shove the chat bubbles up the screen. Scrollbar
       hidden; soft fade on the trailing edge hints there's more to swipe. */
    .prompt-row {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: 100%;
      padding: 4px 0;
      -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
      mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    }
    .prompt-row::-webkit-scrollbar { display: none; }
    .prompt-row .prompt-chip,
    .prompt-row .fact-btn { flex: 0 0 auto; }
    /* Pin "Tell me an interesting fact" as the first, always-visible item. */
    .prompt-row .fact-btn { order: -1; }
    .figure-stage { width: 80vw; }
    body.bio-open .figure-primary, body.selector-open .figure-primary {
      --breathe-base: translateX(-50%); transform: var(--breathe-base);
      opacity: 0.25;
    }
    body.bio-open .chat-zone, body.selector-open .chat-zone {
      transform: translateX(-50%); width: 100%; opacity: 0; pointer-events: none;
    }
    .bio-panel, .selector-panel, .lesson-hub, .tutor-panel { width: 100vw; }
    .reader-page { padding: 60px 24px 40px; }
    .reader-page h1 { font-size: 30px; }
    .reader-page p { font-size: 15px; }
    .reader-page p.lead::first-letter { font-size: 52px; }
    .reader-top, .reader-bottom { padding: 12px 16px; }
    .reader-legend-tag { display: none; }
    .library-header, .featured-book, .library-shelves { padding-left: 24px; padding-right: 24px; }
    .featured-book { flex-direction: column; gap: 24px; }
    .featured-book-cover { width: 160px; height: 230px; }
    .featured-book-info h3 { font-size: 26px; }
    .story-content { padding: 24px; }
    .modal { padding: 28px; }
    .plans { grid-template-columns: 1fr; }
    .demo-nav { right: 16px; left: 16px; width: auto; bottom: 80px; }
    .demo-nav-toggle { bottom: 16px; right: 16px; }
  }

  /* ── THE HALL ─────────────────────────────────────────────
     The selector in its maximized (full-screen) form. The sidebar
     selector (.selector-panel) is the minimized form of the same
     conceptual component. Background reads the featured legend's
     mood via the existing scene tokens. */
  .the-hall {
    position: fixed; inset: 0; z-index: 90;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
  }
  body.hall-open .the-hall { opacity: 1; pointer-events: auto; }
  body.hall-open .top-bar,
  body.hall-open .right-rail,
  body.hall-open .chat-zone {
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .hall-scrim {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse 95% 75% at 50% 50%, rgba(15, 10, 4, 0.30), rgba(5, 8, 14, 0.66));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body[data-mode="light"] .hall-scrim {
    background: radial-gradient(ellipse 95% 75% at 50% 50%, rgba(255, 230, 200, 0.10), rgba(80, 50, 20, 0.22));
  }

  .hall-inner {
    position: relative; z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px clamp(24px, 4vw, 56px) 80px;
  }

  /* Top — title + minimize/close */
  .hall-top {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px;
    margin-bottom: 22px;
  }
  .hall-headings { min-width: 0; }
  .hall-eyebrow {
    font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .hall-title {
    margin-top: 8px;
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: clamp(32px, 4.4vw, 48px);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.04; letter-spacing: -0.030em;
    color: var(--text);
  }
  .hall-title em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .hall-top-actions {
    display: flex; gap: 10px; flex-shrink: 0;
  }
  .hall-icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim); cursor: pointer;
    transition: all 0.2s ease;
  }
  .hall-icon-btn:hover {
    color: var(--text);
    background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
  }
  #hall-close:hover { transform: rotate(90deg); }
  /* On first visit there is no escape — pick a legend to enter */
  body.is-first-visit #hall-close,
  body.is-first-visit #hall-minimize { display: none; }

  /* Spotlight — a quiet editorial chip linking to today's recommended legend */
  .hall-spotlight {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 28px;
    padding: 10px 18px 10px 18px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(28, 34, 44, 0.35));
    border: 1px solid rgba(212, 165, 116, 0.22);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
    max-width: max-content;
  }
  body[data-mode="light"] .hall-spotlight {
    background: linear-gradient(135deg, rgba(184, 138, 62, 0.16), rgba(255, 250, 240, 0.50));
    border-color: rgba(184, 138, 62, 0.3);
  }
  .hall-spotlight:hover {
    border-color: rgba(212, 165, 116, 0.4);
    transform: translateY(-1px);
  }
  .hall-spotlight-eyebrow {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px;
    color: var(--text-faint);
  }
  .hall-spotlight-eyebrow em { color: var(--warm-glow); }
  .hall-spotlight-name {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-size: 14px; letter-spacing: -0.005em;
    color: var(--text);
  }
  .hall-spotlight-name em { font-style: italic; color: var(--warm-glow); }
  .hall-spotlight-arrow {
    display: inline-flex; color: var(--warm-glow);
    transition: transform 0.25s ease;
  }
  .hall-spotlight:hover .hall-spotlight-arrow { transform: translateX(2px); }

  /* View switcher — tab-like buttons + search */
  .hall-views {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 4px;
  }
  .hall-view-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .hall-view-btn:hover {
    color: var(--text);
    border-color: var(--panel-border-hot);
  }
  .hall-view-btn.is-active {
    background: var(--text);
    color: var(--bg-deep);
    border-color: var(--text);
  }
  .hall-views-spacer { flex: 1; }
  .hall-search {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    transition: all 0.2s ease;
  }
  .hall-search:focus-within {
    border-color: var(--panel-border-hot);
    background: var(--hover-tint-strong);
  }
  .hall-search svg { color: var(--text-faint); flex-shrink: 0; }
  .hall-search input {
    background: transparent; border: none; outline: none;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    min-width: 160px;
  }
  .hall-search input::placeholder { color: var(--text-faint); }

  /* The body region — populated per view */
  .hall-body { display: flex; flex-direction: column; gap: 36px; }

  /* Section (used in Disciplines / Timeline / Curated views) */
  .hall-section { display: flex; flex-direction: column; gap: 16px; }
  .hall-section-header {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
  }
  .hall-section-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-style: italic; font-weight: 400;
    font-size: 22px; letter-spacing: -0.015em;
    color: var(--text);
  }
  .hall-section-count {
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  /* The card grid — equal cards, breathing room */
  .hall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 16px;
  }
  /* Each card is a button */
  .hall-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden; cursor: pointer;
    background: linear-gradient(135deg, #2a1f15, #15100a);
    border: none;
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
  }
  body[data-mode="light"] .hall-card {
    background: linear-gradient(135deg, #d8c8a8, #b8a280);
    box-shadow: inset 0 0 0 1px rgba(31, 24, 16, 0.10);
  }
  .hall-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.48);
  }
  body[data-mode="light"] .hall-card:hover {
    box-shadow: 0 14px 30px rgba(80, 50, 20, 0.24);
  }
  .hall-card .portrait {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 22%;
    filter: sepia(0.18) contrast(1.05) brightness(0.86);
    transition: filter 0.35s ease, transform 4s ease;
  }
  .hall-card:hover .portrait { filter: sepia(0.04) contrast(1.10) brightness(0.96); transform: scale(1.04); }
  /* Hero preview video layered over the static portrait poster (Lab merge). */
  .hall-card .portrait .card-video,
  .legend-card .portrait .card-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 18%;
    opacity: 0; transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .hall-card .portrait .card-video.is-ready,
  .legend-card .portrait .card-video.is-ready { opacity: 1; }
  .hall-card .gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
  }
  .hall-card .info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px 14px 14px;
    z-index: 2;
    text-align: left;
  }
  .hall-card .info h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-weight: 400; font-size: 16px;
    line-height: 1.1; letter-spacing: -0.018em;
    color: #fbf3e2;
  }
  .hall-card .info h4 em { font-style: italic; font-weight: 300; color: #e8b06a; }
  .hall-card .info .meta {
    margin-top: 4px;
    font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(251, 243, 226, 0.65);
  }
  /* "New" badge — quiet italic mark in the corner */
  .hall-card.is-new::before {
    content: 'new';
    position: absolute; top: 10px; right: 10px;
    padding: 3px 9px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.95), rgba(192, 133, 64, 0.95));
    color: #1a1208;
    border-radius: 999px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 10px; letter-spacing: 0.04em;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(192, 133, 64, 0.35);
  }
  .hall-card.is-active::after {
    content: 'In the Lab';
    position: absolute; top: 10px; left: 10px;
    padding: 3px 9px;
    background: var(--warm-glow);
    color: #1a1208;
    border-radius: 999px;
    font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    z-index: 3;
  }
  /* On first visit no one is yet in the lab — suppress the badge */
  body.is-first-visit .hall-card.is-active::after { display: none; }

  /* Empty state for search */
  .hall-empty {
    padding: 60px 20px;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--text-faint);
  }

  /* Brand mark gets cursor: pointer since clicking it reopens the Hall */
  .brand-mark { cursor: pointer; }

  /* The Patron chip only appears once the user is in the Lab (signed in).
     First-impression is the work, not the wall. */
  body:not(.is-signed-in) .profile-chip { display: none; }

  /* ── PROFILE MENU (small dropdown under the profile chip) ──── */
  .profile-chip-wrap { position: relative; }
  .profile-menu {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    min-width: 220px;
    margin: 0; padding: 8px;
    list-style: none;
    background: rgba(28, 34, 44, 0.92);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow:
      inset 0 0 0 1px rgba(244, 239, 230, 0.05),
      inset 0 1px 0 rgba(244, 239, 230, 0.07);
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 30;
  }
  body[data-mode="light"] .profile-menu {
    background: rgba(255, 247, 232, 0.97);
    border: 1px solid rgba(31, 24, 16, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 16px 32px rgba(80, 50, 20, 0.16);
  }
  body.profile-menu-open .profile-menu {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .profile-menu-eyebrow {
    padding: 6px 12px 4px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 11px;
    color: var(--text-faint);
  }
  .profile-menu-eyebrow em { color: var(--warm-glow); }
  /* ── About you (identity fields inside the profile dropdown) ──
     Optional name / age / gender — the user can leave any of these
     blank. Persists to localStorage on every keystroke. */
  .profile-menu-section.about-you {
    padding: 4px 12px 8px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .about-you-label {
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
  }
  .about-you-aside {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
    opacity: 0.7;
  }
  .about-input {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    outline: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  body[data-mode="light"] .about-input {
    background: rgba(255, 248, 230, 0.55);
  }
  .about-input::placeholder {
    font-style: italic;
    color: var(--text-faint);
    opacity: 0.7;
  }
  .about-input:focus,
  .about-input:focus-visible {
    border-color: var(--warm-glow);
    background: var(--hover-tint);
    outline: none;
  }
  .about-input-full { width: 100%; box-sizing: border-box; }
  .about-row { display: flex; gap: 6px; align-items: stretch; }
  .about-input-age { width: 64px; }
  .about-input-select { flex: 1; font-style: normal; }
  .about-input-select:invalid { color: var(--text-faint); font-style: italic; }

  /* ── Custom on-brand gender dropdown (replaces the dated OS <select>) ── */
  .about-select { position: relative; flex: 1; min-width: 0; }
  .about-select-trigger {
    width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  body[data-mode="light"] .about-select-trigger { background: rgba(255, 248, 230, 0.55); }
  .about-select-trigger:hover { border-color: var(--panel-border-hot); background: var(--hover-tint); }
  .about-select-trigger:focus-visible {
    border-color: var(--warm-glow);
    box-shadow: 0 0 0 2px var(--warm-glow-soft);
    outline: none;
  }
  .about-select-value {
    font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .about-select-value.is-placeholder { color: var(--text-faint); opacity: 0.7; }
  .about-select-caret {
    width: 14px; height: 14px; flex: none;
    color: var(--text-faint);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .about-select-trigger[aria-expanded="true"] .about-select-caret {
    transform: rotate(180deg); color: var(--warm-glow);
  }
  .about-select-menu {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 4px;
    list-style: none;
    background: rgba(28, 34, 44, 0.98);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.40),
      inset 0 0 0 1px rgba(244, 239, 230, 0.05);
    opacity: 0; pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
    max-height: 220px; overflow-y: auto;
  }
  body[data-mode="light"] .about-select-menu {
    background: rgba(255, 250, 240, 0.99);
    border-color: rgba(31, 24, 16, 0.14);
    box-shadow: 0 12px 28px rgba(80, 50, 20, 0.18);
  }
  .about-select-menu.is-open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .about-select-option {
    padding: 7px 10px;
    border-radius: 7px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .about-select-option:hover { background: var(--hover-tint); }
  .about-select-option[aria-selected="true"] {
    color: var(--warm-glow);
    background: rgba(212, 165, 116, 0.10);
  }

  /* ── Save button + status line for the About-you panel ── */
  /* Resting (clean) = quiet & uninviting; .is-dirty = lit, "click me". */
  .about-save-btn {
    margin-top: 4px;
    width: 100%; box-sizing: border-box;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-faint);
    font-family: 'Manrope', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }
  .about-save-btn:hover { border-color: var(--panel-border-hot); color: var(--text-dim); }
  .about-save-btn:active { transform: translateY(0.5px); }
  .about-save-btn:disabled { opacity: 0.6; cursor: default; }
  /* Lit state — there are unsaved changes. */
  .about-save-btn.is-dirty {
    border-color: var(--warm-glow);
    background: rgba(212, 165, 116, 0.20);
    color: var(--warm-glow);
    box-shadow: 0 0 0 1px var(--warm-glow-soft), 0 4px 16px rgba(212, 165, 116, 0.22);
    animation: aboutSaveWake 0.45s ease-out;
  }
  .about-save-btn.is-dirty:hover {
    background: rgba(212, 165, 116, 0.30);
    box-shadow: 0 0 0 1px var(--warm-glow), 0 6px 20px rgba(212, 165, 116, 0.30);
  }
  @keyframes aboutSaveWake {
    0%   { box-shadow: 0 0 0 0 var(--warm-glow-soft), 0 4px 16px rgba(212, 165, 116, 0.22); }
    45%  { box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.28), 0 4px 16px rgba(212, 165, 116, 0.22); }
    100% { box-shadow: 0 0 0 1px var(--warm-glow-soft), 0 4px 16px rgba(212, 165, 116, 0.22); }
  }
  @media (prefers-reduced-motion: reduce) {
    .about-save-btn.is-dirty { animation: none; }
  }
  body[data-mode="light"] .about-save-btn {
    background: rgba(31, 24, 16, 0.03);
    color: #9a8a73;
    border-color: rgba(31, 24, 16, 0.14);
  }
  body[data-mode="light"] .about-save-btn:hover { color: #6f5d44; border-color: rgba(31, 24, 16, 0.24); }
  body[data-mode="light"] .about-save-btn.is-dirty {
    background: rgba(212, 160, 88, 0.20);
    color: #8a5a1e;
    border-color: rgba(212, 160, 88, 0.62);
    box-shadow: 0 0 0 1px rgba(212, 160, 88, 0.40), 0 4px 16px rgba(212, 160, 88, 0.22);
  }
  body[data-mode="light"] .about-save-btn.is-dirty:hover { background: rgba(212, 160, 88, 0.30); }
  .about-save-status {
    margin-top: 2px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-faint);
  }
  .about-save-status.success { color: #7bbf86; }
  .about-save-status.error { color: #e08a7b; }
  .about-save-status.hint { color: var(--warm-glow); }
  .about-save-status.loading { color: var(--text-dim); }
  .profile-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--panel-border);
  }
  .profile-menu-item {
    width: 100%;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .profile-menu-item:hover {
    background: var(--hover-tint);
    color: var(--text);
  }
  .profile-menu-label { flex: 1; }
  .profile-menu-hint {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px;
    color: var(--text-faint);
  }
  .profile-menu-item:hover .profile-menu-hint { color: var(--warm-glow); }
  /* "Become a Patron" item: premium gold accent */
  #profile-menu-patron .profile-menu-label {
    background: var(--premium-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--premium);
  }
  #profile-menu-patron .profile-menu-hint { color: var(--premium); }
  /* For patrons, the patron item changes copy + becomes muted */
  body.is-patron #profile-menu-patron .profile-menu-label {
    -webkit-text-fill-color: var(--text-dim);
    color: var(--text-dim);
    background: none;
  }

  /* "Enter the Lab" — proactive sign-in entry for anonymous visitors.
     Sits where the Patron chip will eventually sit. Quiet italic link,
     warm-glow accent, never shouts. */
  .enter-lab {
    display: none; /* shown only for anonymous visitors */
    align-items: center; gap: 8px;
    padding: 8px 16px 8px 18px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body:not(.is-signed-in) .enter-lab { display: inline-flex; }
  .enter-lab em {
    font-style: italic;
    color: var(--warm-glow);
    font-weight: 400;
  }
  .enter-lab-arrow {
    color: var(--warm-glow);
    font-family: 'Manrope', sans-serif;
    transition: transform 0.25s ease;
  }
  .enter-lab:hover {
    border-color: var(--panel-border-hot);
    background: var(--hover-tint);
    color: var(--text);
    transform: translateY(-1px);
  }
  .enter-lab:hover .enter-lab-arrow { transform: translateX(2px); }
  body[data-mode="light"] .enter-lab {
    background: rgba(255, 250, 240, 0.50);
    border-color: rgba(80, 50, 20, 0.16);
    box-shadow: 0 2px 8px rgba(80, 50, 20, 0.06);
  }
  body[data-mode="light"] .enter-lab:hover {
    background: rgba(255, 250, 240, 0.75);
    border-color: rgba(80, 50, 20, 0.30);
  }

  /* ── HISTORY TOGGLE (top bar) ─────────────────────────────
     Only visible to signed-in users. Same circular treatment as
     the mode toggle — Kole-tier hierarchy as a utility control. */
  .history-toggle {
    position: relative;
    width: 38px; height: 38px;
    display: none; align-items: center; justify-content: center;
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
  }
  body.is-signed-in .history-toggle { display: flex; }
  .history-toggle:hover {
    color: var(--text);
    border-color: var(--panel-border-hot);
  }
  .history-toggle svg { width: 17px; height: 17px; }
  body[data-mode="light"] .history-toggle {
    background: rgba(255, 250, 240, 0.72);
    border-color: rgba(80, 50, 20, 0.16);
    color: var(--text-dim);
    box-shadow: 0 2px 8px rgba(80, 50, 20, 0.08);
  }
  body[data-mode="light"] .history-toggle:hover {
    color: var(--warm-glow);
    border-color: rgba(80, 50, 20, 0.32);
  }
  /* Share button — same ghost-icon family as history-toggle. Always visible
     (no sign-in gate) — sharing should work for the anonymous demo too.
     Tooltip via title attr + matching ::before chip for hover discovery. */
  .share-toggle {
    position: relative;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease, transform 0.2s ease;
  }
  .share-toggle:hover {
    color: var(--text);
    border-color: var(--panel-border-hot);
    transform: translateY(-1px);
  }
  .share-toggle:active { transform: translateY(0) scale(0.96); }
  .share-toggle svg { width: 16px; height: 16px; }
  body[data-mode="light"] .share-toggle {
    background: rgba(255, 250, 240, 0.72);
    border-color: rgba(80, 50, 20, 0.16);
    color: var(--text-dim);
    box-shadow: 0 2px 8px rgba(80, 50, 20, 0.08);
  }
  body[data-mode="light"] .share-toggle:hover {
    color: var(--warm-glow);
    border-color: rgba(80, 50, 20, 0.32);
  }

  /* ── HISTORY PANEL (slides from right) ─────────────────── */
  .history-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 92vw);
    z-index: 22;
    background: rgba(14, 17, 23, 0.78);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  body.history-open .history-panel { transform: translateX(0); }
  body[data-mode="light"] .history-panel {
    background: rgba(252, 244, 228, 0.85);
    border-left: 1px solid rgba(80, 50, 20, 0.12);
    box-shadow: 0 0 40px rgba(80, 50, 20, 0.10);
  }
  .history-panel::before {
    content: ''; position: absolute;
    left: -40px; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.55));
    pointer-events: none;
  }
  body[data-mode="light"] .history-panel::before {
    background: linear-gradient(90deg, transparent, rgba(252, 244, 228, 0.55));
  }
  .history-header { padding: 24px 0 12px; }
  .history-eyebrow {
    font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .history-header h2 {
    margin-top: 8px;
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: clamp(26px, 4vw, 32px);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    line-height: 1.05; letter-spacing: -0.028em;
    color: var(--text);
  }
  .history-header h2 em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .history-list {
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .history-item {
    display: flex; gap: 14px;
    padding: 14px;
    background: var(--hover-tint);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    text-decoration: none;
    color: inherit;
  }
  .history-item:hover {
    background: var(--hover-tint-strong);
    border-color: var(--panel-border-hot);
    transform: translateX(-2px);
  }
  .history-portrait {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background-size: cover; background-position: center 22%;
    background-color: rgba(244, 239, 230, 0.04);
    filter: sepia(0.10) contrast(1.05) brightness(0.92);
    border: 1px solid var(--panel-border);
  }
  .history-info { flex: 1; min-width: 0; }
  .history-info h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
    font-weight: 400; font-size: 16px;
    line-height: 1.15; letter-spacing: -0.012em;
    color: var(--text);
  }
  .history-info h4 em { font-style: italic; font-weight: 300; color: var(--warm-glow); }
  .history-snippet {
    margin-top: 6px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 13px; line-height: 1.4;
    color: var(--text-dim);
    /* Truncate long previews to a single line */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .history-meta {
    margin-top: 6px;
    display: flex; gap: 10px; align-items: center;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .history-meta .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-faint);
  }
  .history-empty {
    margin-top: 32px;
    padding: 32px 16px;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--text-faint);
  }

  /* ── QUESTION COUNTER ─────────────────────────────────────
     Subordinate to the chat input: small, italic, present but quiet.
     Becomes warning-warm at ≤3, premium-gold CTA at 0. Kole hierarchy. */
  .question-counter {
    display: none;
    align-self: flex-end;
    margin-right: 4px;
    margin-top: -4px;
    padding: 4px 12px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 14;
    font-style: italic;
    font-size: 12px; letter-spacing: 0.01em;
    color: var(--text-faint);
    border-radius: 999px;
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Visible only for signed-in non-patrons */
  body.is-signed-in:not(.is-patron) .question-counter { display: inline-flex; align-items: center; }
  .question-counter em {
    font-style: italic; font-weight: 500;
    color: var(--warm-glow);
    margin-right: 6px;
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Low state — gentle warning, no alarms */
  .question-counter.is-low { color: var(--semantic-warning); }
  .question-counter.is-low em { color: var(--semantic-warning); }
  /* Zero state — becomes a Patron CTA */
  .question-counter.is-zero {
    cursor: pointer;
    color: var(--text);
    background: linear-gradient(135deg, rgba(212, 160, 88, 0.10), var(--panel-bg) 70%);
    border: 1px solid rgba(212, 160, 88, 0.30);
  }
  .question-counter.is-zero em {
    background: var(--premium-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--premium);
    font-style: italic;
  }
  /* Tick pulse on decrement */
  .question-counter.is-ticking em {
    animation: counter-tick 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes counter-tick {
    0%   { transform: scale(1); opacity: 1; }
    35%  { transform: scale(1.22); opacity: 0.80; }
    100% { transform: scale(1); opacity: 1; }
  }
  /* When out of questions, the send button visually rests */
  body.has-no-questions .send-btn {
    opacity: 0.45;
    cursor: not-allowed;
  }
  body.has-no-questions .send-btn:hover { transform: none; }

  @media (max-width: 720px) {
    .hall-inner { padding: 24px 20px 60px; }
    .hall-top { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hall-views { flex-wrap: wrap; }
    .hall-search input { min-width: 120px; }
    .hall-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── BRAND LOGO DATA URIs ────────────────────────── */
  :root {
    --logo-black: url("data:image/png;base64,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");
    --logo-white: url("data:image/png;base64,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");
  }

  /* ── BRAND BLOCK + LOGO ──────────────────────────────── */
  .brand-block {
    display: flex; align-items: center;
    gap: 16px;
    min-width: 0;
    position: relative;
  }

  /* ── First-visit character-switcher coachmark ──
     A gentle one-time hint that the legend name opens the picker. Removed for
     good after the first interaction (persisted in localStorage). */
  .switcher-hint {
    position: absolute;
    top: calc(100% + 14px);
    /* Align under the legend name: brand-mark (42px) + brand-block gap (16px). */
    left: 50px;
    z-index: 60;
    display: inline-flex; align-items: center;
    padding: 9px 15px;
    border-radius: 12px;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--panel-border-hot);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    font-size: 12.5px; letter-spacing: 0.01em; white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: switcher-hint-bob 2.4s ease-in-out 0.6s infinite;
  }
  .switcher-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .switcher-hint-arrow {
    position: absolute;
    top: -6px; left: 22px;
    width: 11px; height: 11px;
    background: var(--tooltip-bg);
    border-left: 1px solid var(--panel-border-hot);
    border-top: 1px solid var(--panel-border-hot);
    transform: rotate(45deg);
  }
  @keyframes switcher-hint-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .switcher-hint { animation: none; }
  }
  .brand-mark {
    width: 42px; height: 42px;
    flex-shrink: 0;
    background-image: var(--logo-white);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
  }
  body[data-mode="light"] .brand-mark {
    opacity: 0.72;
  }
  body[data-mode="light"] .brand-mark:hover { opacity: 0.92; }
  /* Light mode uses the white logo (it has finer line detail) as a CSS mask,
     filled with warm ink. Gives crisp black-on-cream that mirrors the dark
     mode treatment exactly. */
  body[data-mode="light"] .brand-mark {
    background-image: none;
    background-color: #1f1810;
    -webkit-mask-image: var(--logo-white);
    mask-image: var(--logo-white);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Top-right cluster (toggle + profile chip) */
  .top-right {
    display: flex; align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  /* ── SUN / MOON MODE TOGGLE ──────────────────────────── */
  .mode-toggle {
    position: relative;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.25s ease;
  }
  .mode-toggle:hover { color: var(--text); border-color: var(--panel-border-hot); }
  .mode-toggle svg {
    width: 18px; height: 18px;
    position: absolute;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mode-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  .mode-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
  body[data-mode="light"] .mode-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
  body[data-mode="light"] .mode-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

  /* The choreographed spin when clicked */
  .mode-toggle.is-flipping { animation: mode-flip 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes mode-flip {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }

  /* ── LIGHT MODE: full palette flip ───────────────────── */
  body[data-mode="light"] {
    --bg-deep: #efe5d0;
    --bg-mid: #e2d5b8;

    --warm-glow: #9c6638;
    --warm-glow-soft: rgba(156, 102, 56, 0.22);
    --amber: #b87642;

    --secondary: #2d6664;
    --secondary-soft: rgba(45, 102, 100, 0.16);
    --secondary-deep: #1f4847;

    --tertiary: #5d4a7e;
    --tertiary-soft: rgba(93, 74, 126, 0.18);

    --premium: #b88a3e;
    --premium-deep: #9c6e2e;
    --premium-gradient: linear-gradient(135deg, #c89456 0%, #a07232 100%);
    --premium-glow: rgba(196, 148, 86, 0.22);

    --text: #1f1810;
    --text-dim: rgba(31, 24, 16, 0.7);
    --text-faint: rgba(31, 24, 16, 0.4);
    --panel-bg: rgba(255, 250, 240, 0.6);
    --panel-border: rgba(31, 24, 16, 0.1);
    --panel-border-hot: rgba(31, 24, 16, 0.22);

    /* Hover tints flip to dark-on-cream in light mode */
    --hover-tint:        rgba(31, 24, 16, 0.05);
    --hover-tint-strong: rgba(31, 24, 16, 0.08);
    --hover-tint-bright: rgba(31, 24, 16, 0.14);
    --chip-hover-bg:     rgba(255, 250, 240, 0.92);
    --tooltip-bg:        rgba(40, 32, 22, 0.92);
    --tooltip-text:      #fbf3e2;

    /* Default light-mode scene tokens (Leonardo morning Florence) */
    --scene-sky-1: #c2cfdf;
    --scene-sky-2: #d2c8b4;
    --scene-sky-3: #e2c8a4;
    --scene-sky-4: #ecb888;
    --scene-horizon: #e8b878;
    --scene-glow: rgba(232, 184, 120, 0.30);
    --scene-glow-pos: 50% 70%;
    --scene-glow-size: 55% 35%;
    --scene-mote: #c08040;
    --scene-mote-shadow: rgba(192, 128, 64, 0.65);
    --scene-mote-opacity: 0.55;
    --scene-haze: rgba(232, 168, 102, 0.32);
    --scene-vignette: rgba(80, 45, 18, 0.22);
    --scene-figure-light: rgba(255, 220, 170, 0.32);
  }

  /* Grain treatment in light mode (motes/scene tokens flow via :root vars above) */
  body[data-mode="light"] .grain { opacity: 0.06; mix-blend-mode: multiply; }
  /* Hide some motes in light mode for reduced density (~30% fewer) */
  body[data-mode="light"] .motes .mote:nth-child(3),
  body[data-mode="light"] .motes .mote:nth-child(6) {
    display: none;
  }
  body[data-mode="light"] .figure-portrait {
    filter: sepia(0.04) contrast(1.0) brightness(1.05);
  }
  /* Warm-pool underneath the figure — softer and cooler in light mode */
  body[data-mode="light"] .figure-light {
    background: radial-gradient(ellipse 55% 50% at 50% 70%, rgba(255, 220, 170, 0.32), transparent 70%);
  }

  /* Light mode: tonal panel layering — each surface gets a slightly different cream */
  body[data-mode="light"] .right-panel {
    background: rgba(255, 250, 240, 0.85);
    border-left: 1px solid rgba(80, 50, 20, 0.12);
  }
  body[data-mode="light"] .bio-panel,
  body[data-mode="light"] .selector-panel,
  body[data-mode="light"] .lesson-hub,
  body[data-mode="light"] .tutor-panel {
    background: rgba(252, 244, 228, 0.85);
    border-left: 1px solid rgba(80, 50, 20, 0.12);
  }
  body[data-mode="light"] .selector-panel {
    border-left: none;
    border-right: 1px solid rgba(80, 50, 20, 0.12);
  }
  body[data-mode="light"] .right-rail {
    background: rgba(255, 247, 232, 0.78);
    border: 1px solid rgba(80, 50, 20, 0.14);
    box-shadow: 0 10px 28px rgba(80, 50, 20, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  /* Anchor the side panels with a soft warm shadow */
  body[data-mode="light"] .bio-panel,
  body[data-mode="light"] .selector-panel,
  body[data-mode="light"] .lesson-hub,
  body[data-mode="light"] .tutor-panel,
  body[data-mode="light"] .right-panel {
    box-shadow: 0 0 40px rgba(80, 50, 20, 0.10);
  }
  /* Top bar gets a barely-perceptible warm gradient bottom for hierarchy */
  body[data-mode="light"] .top-bar {
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.5) 0%, transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Mode toggle gets slightly more presence on cream */
  body[data-mode="light"] .mode-toggle {
    background: rgba(255, 250, 240, 0.78);
    border-color: rgba(80, 50, 20, 0.18);
    color: var(--warm-glow);
    box-shadow: 0 2px 8px rgba(80, 50, 20, 0.08);
  }
  body[data-mode="light"] .mode-toggle:hover {
    color: var(--premium-deep);
    border-color: rgba(80, 50, 20, 0.32);
  }

  /* ── PER-LEGEND MOOD SIGNATURES ─────────────────────────────────
     Each legend lives in their own world. Scene gradient, mote
     color, accent hue and portrait shift on switch. The light/dark
     toggle still applies — their morning vs. their dusk.            */

  /* ── Per-legend moods are defined below as token overrides — each
     legend supplies its own sky, horizon, glow, motes, accent for both
     dark and light modes. Portraits are mapped here. */

  /* Leonardo — Tuscan dusk (default tokens defined on :root above) */
  body[data-legend="leonardo"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/600px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg');
  }

  /* Warren Buffett — Omaha sunrise, value-investor sage-green */
  body[data-legend="buffett"] { --warm-glow: #5e8a6a; --warm-glow-soft: rgba(94, 138, 106, 0.36); }
  body[data-legend="buffett"][data-mode="dark"] {
    --scene-sky-1: #0a0e10; --scene-sky-2: #14181c; --scene-sky-3: #1c2424; --scene-sky-4: #20241c;
    --scene-horizon: #3a4a32; --scene-glow: rgba(120, 168, 132, 0.14);
    --scene-mote: #b4c4a8; --scene-mote-shadow: rgba(180, 196, 168, 0.5); --scene-mote-opacity: 0.4;
  }
  body[data-legend="buffett"][data-mode="light"] {
    --scene-sky-1: #c2d0d0; --scene-sky-2: #d0d4c4; --scene-sky-3: #d4d0b8; --scene-sky-4: #c8c0a4;
    --scene-horizon: #a0b89c;
  }
  body[data-legend="buffett"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Warren_Buffett_KU_Visit.jpg/600px-Warren_Buffett_KU_Visit.jpg');
  }

  /* Henry Ford — assembly-line sodium orange + steel */
  body[data-legend="ford"] { --warm-glow: #c66a3e; --warm-glow-soft: rgba(198, 106, 62, 0.36); }
  body[data-legend="ford"][data-mode="dark"] {
    --scene-sky-1: #0a0c10; --scene-sky-2: #14171c; --scene-sky-3: #1e2128; --scene-sky-4: #2a1e18;
    --scene-horizon: #6a3826; --scene-glow: rgba(232, 132, 70, 0.16);
    --scene-mote: #c68a4c; --scene-mote-shadow: rgba(198, 138, 76, 0.5); --scene-mote-opacity: 0.35;
  }
  body[data-legend="ford"][data-mode="light"] {
    --scene-sky-1: #b8c0c8; --scene-sky-2: #c4c4bc; --scene-sky-3: #d4c0a8; --scene-sky-4: #d4a078;
    --scene-horizon: #c87850;
  }
  body[data-legend="ford"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Henry_ford_1919.jpg/600px-Henry_ford_1919.jpg');
  }

  /* Genghis Khan — Mongolian steppe, blood at dusk */
  body[data-legend="khan"] { --warm-glow: #b04030; --warm-glow-soft: rgba(176, 64, 48, 0.36); }
  body[data-legend="khan"][data-mode="dark"] {
    --scene-sky-1: #0a0810; --scene-sky-2: #14101a; --scene-sky-3: #1f1818; --scene-sky-4: #2a1814;
    --scene-horizon: #6a2218; --scene-glow: rgba(176, 64, 48, 0.18);
    --scene-mote: #c87a52; --scene-mote-shadow: rgba(200, 122, 82, 0.55); --scene-mote-opacity: 0.45;
    --scene-haze: rgba(176, 64, 48, 0.10);
  }
  body[data-legend="khan"][data-mode="light"] {
    --scene-sky-1: #bcc4c4; --scene-sky-2: #c8c0b0; --scene-sky-3: #d4ad8a; --scene-sky-4: #b87858;
    --scene-horizon: #9c4830;
  }
  body[data-legend="khan"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/YuanEmperorAlbumGenghisPortrait.jpg/600px-YuanEmperorAlbumGenghisPortrait.jpg');
  }

  /* Mansa Musa — Saharan gold, the wealthiest sunset */
  body[data-legend="musa"] { --warm-glow: #d4a832; --warm-glow-soft: rgba(212, 168, 50, 0.40); }
  body[data-legend="musa"][data-mode="dark"] {
    --scene-sky-1: #0a0c1a; --scene-sky-2: #1a1820; --scene-sky-3: #2a221a; --scene-sky-4: #3a2810;
    --scene-horizon: #d4a032; --scene-glow: rgba(232, 184, 70, 0.24);
    --scene-mote: #f0c850; --scene-mote-shadow: rgba(240, 200, 80, 0.7); --scene-mote-opacity: 0.55;
  }
  body[data-legend="musa"][data-mode="light"] {
    --scene-sky-1: #c8c4b8; --scene-sky-2: #dcc89c; --scene-sky-3: #e8b870; --scene-sky-4: #dca046;
    --scene-horizon: #c08828;
  }
  body[data-legend="musa"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Catalan_Atlas_BNF_Sheet_6_Mansa_Musa.jpg/600px-Catalan_Atlas_BNF_Sheet_6_Mansa_Musa.jpg');
    background-size: contain;
  }

  /* Niccolo Machiavelli — Florentine candlelit night, wine-dark */
  body[data-legend="machiavelli"] { --warm-glow: #a8404a; --warm-glow-soft: rgba(168, 64, 74, 0.36); }
  body[data-legend="machiavelli"][data-mode="dark"] {
    --scene-sky-1: #0a0610; --scene-sky-2: #160e18; --scene-sky-3: #20141c; --scene-sky-4: #28160e;
    --scene-horizon: #5a1828; --scene-glow: rgba(200, 132, 72, 0.16);
    --scene-mote: #d4a060; --scene-mote-shadow: rgba(212, 160, 96, 0.55); --scene-mote-opacity: 0.4;
  }
  body[data-legend="machiavelli"][data-mode="light"] {
    --scene-sky-1: #c4b8b8; --scene-sky-2: #c8b09c; --scene-sky-3: #c89c84; --scene-sky-4: #b8806a;
    --scene-horizon: #8a4244;
  }
  body[data-legend="machiavelli"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Santi_di_Tito_-_Niccolo_Machiavelli%27s_portrait_headcrop.jpg/600px-Santi_di_Tito_-_Niccolo_Machiavelli%27s_portrait_headcrop.jpg');
  }

  /* Friedrich Nietzsche — Alpine summit dusk, cold violet */
  body[data-legend="nietzsche"] { --warm-glow: #8e7ab0; --warm-glow-soft: rgba(142, 122, 176, 0.36); }
  body[data-legend="nietzsche"][data-mode="dark"] {
    --scene-sky-1: #08081a; --scene-sky-2: #100e22; --scene-sky-3: #1a182c; --scene-sky-4: #221c2a;
    --scene-horizon: #4a3a6a; --scene-glow: rgba(160, 140, 196, 0.16);
    --scene-mote: #b4a4d4; --scene-mote-shadow: rgba(180, 164, 212, 0.55); --scene-mote-opacity: 0.4;
  }
  body[data-legend="nietzsche"][data-mode="light"] {
    --scene-sky-1: #b4b8d0; --scene-sky-2: #b8b8c4; --scene-sky-3: #bcb4c0; --scene-sky-4: #b0a4b8;
    --scene-horizon: #7c6a98;
  }
  body[data-legend="nietzsche"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Nietzsche187a.jpg/600px-Nietzsche187a.jpg');
  }

  /* Frida Kahlo — Mexican folk dusk: magenta, terracotta + deep jungle green */
  body[data-legend="kahlo"] { --warm-glow: #d6356f; --warm-glow-soft: rgba(214, 53, 111, 0.38); }
  body[data-legend="kahlo"][data-mode="dark"] {
    --scene-sky-1: #10060e; --scene-sky-2: #1c0a18; --scene-sky-3: #2a1020; --scene-sky-4: #2a1810;
    --scene-horizon: #8a2a4a; --scene-glow: rgba(214, 64, 110, 0.20);
    --scene-mote: #e88a4c; --scene-mote-shadow: rgba(232, 138, 76, 0.6); --scene-mote-opacity: 0.5;
    --scene-haze: rgba(60, 110, 70, 0.10);
  }
  body[data-legend="kahlo"][data-mode="light"] {
    --scene-sky-1: #d8c0c0; --scene-sky-2: #e0b4a0; --scene-sky-3: #e0a088; --scene-sky-4: #cc7068;
    --scene-horizon: #b83a64;
  }
  body[data-legend="kahlo"] .figure-primary .figure-portrait {
    background-image: url('/static/images/Frida.png');
  }

  /* Nostradamus — Provençal midnight: indigo sky + candle-gold seer's glow */
  body[data-legend="nostradamus"] { --warm-glow: #d8b24a; --warm-glow-soft: rgba(216, 178, 74, 0.36); }
  body[data-legend="nostradamus"][data-mode="dark"] {
    --scene-sky-1: #05060f; --scene-sky-2: #0a0c1e; --scene-sky-3: #121634; --scene-sky-4: #1a1a30;
    --scene-horizon: #2a2c66; --scene-glow: rgba(216, 178, 74, 0.18);
    --scene-mote: #e8cc70; --scene-mote-shadow: rgba(232, 204, 112, 0.6); --scene-mote-opacity: 0.5;
    --scene-haze: rgba(60, 64, 130, 0.12);
  }
  body[data-legend="nostradamus"][data-mode="light"] {
    --scene-sky-1: #bcc0d4; --scene-sky-2: #c4c2cc; --scene-sky-3: #cabfa8; --scene-sky-4: #c0a868;
    --scene-horizon: #6a6aa0;
  }
  body[data-legend="nostradamus"] .figure-primary .figure-portrait {
    background-image: url('/static/images/Nostradamus.png');
  }

  /* Alan Turing — Bletchley dawn: cool slate sky + electric cyan logic glow */
  body[data-legend="turing"] { --warm-glow: #4fd1c5; --warm-glow-soft: rgba(79, 209, 197, 0.34); }
  body[data-legend="turing"][data-mode="dark"] {
    --scene-sky-1: #05070d; --scene-sky-2: #081019; --scene-sky-3: #0e1c2a; --scene-sky-4: #142430;
    --scene-horizon: #1f4a55; --scene-glow: rgba(79, 209, 197, 0.16);
    --scene-mote: #6fe0d4; --scene-mote-shadow: rgba(111, 224, 212, 0.6); --scene-mote-opacity: 0.5;
    --scene-haze: rgba(40, 90, 110, 0.12);
  }
  body[data-legend="turing"][data-mode="light"] {
    --scene-sky-1: #c0ccd4; --scene-sky-2: #b8c8cc; --scene-sky-3: #acc4c4; --scene-sky-4: #9cb8b8;
    --scene-horizon: #4a7a80;
  }
  body[data-legend="turing"] .figure-primary .figure-portrait {
    background-image: url('/static/images/Alan.png');
  }

  /* René Descartes — rationalist study: deep navy night + candle-gold reason */
  body[data-legend="rene"] { --warm-glow: #d8b15c; --warm-glow-soft: rgba(216, 177, 92, 0.36); }
  body[data-legend="rene"][data-mode="dark"] {
    --scene-sky-1: #05070e; --scene-sky-2: #0a0e1c; --scene-sky-3: #111a30; --scene-sky-4: #18203a;
    --scene-horizon: #283566; --scene-glow: rgba(216, 177, 92, 0.16);
    --scene-mote: #e6cf86; --scene-mote-shadow: rgba(230, 207, 134, 0.6); --scene-mote-opacity: 0.5;
    --scene-haze: rgba(50, 60, 120, 0.12);
  }
  body[data-legend="rene"][data-mode="light"] {
    --scene-sky-1: #c4c6d4; --scene-sky-2: #c8c6cc; --scene-sky-3: #ccc4a8; --scene-sky-4: #c2ac72;
    --scene-horizon: #5a5e98;
  }
  body[data-legend="rene"] .figure-primary .figure-portrait {
    background-image: url('/static/images/ReneDescartes.png');
  }

  /* Confucius — Eastern dusk: jade + imperial gold over deep cinnabar horizon */
  body[data-legend="confucius"] { --warm-glow: #e0b24a; --warm-glow-soft: rgba(224, 178, 74, 0.38); }
  body[data-legend="confucius"][data-mode="dark"] {
    --scene-sky-1: #0a0606; --scene-sky-2: #170c0a; --scene-sky-3: #241210; --scene-sky-4: #1c1810;
    --scene-horizon: #6e2a22; --scene-glow: rgba(224, 178, 74, 0.18);
    --scene-mote: #e8c25c; --scene-mote-shadow: rgba(232, 194, 92, 0.6); --scene-mote-opacity: 0.5;
    --scene-haze: rgba(60, 110, 80, 0.10);
  }
  body[data-legend="confucius"][data-mode="light"] {
    --scene-sky-1: #d8c8b8; --scene-sky-2: #d8bca0; --scene-sky-3: #cca888; --scene-sky-4: #b87a5c;
    --scene-horizon: #9a5a3a;
  }
  body[data-legend="confucius"] .figure-primary .figure-portrait {
    background-image: url('/static/images/Confusius.png');
  }

  /* Muhammad Ali — boxing ring, championship gold spotlight */
  body[data-legend="ali"] { --warm-glow: #d4a526; --warm-glow-soft: rgba(212, 165, 38, 0.40); }
  body[data-legend="ali"][data-mode="dark"] {
    --scene-sky-1: #050608; --scene-sky-2: #0a0c10; --scene-sky-3: #181818; --scene-sky-4: #281c10;
    --scene-horizon: #c08820; --scene-glow: rgba(232, 192, 72, 0.30);
    --scene-glow-size: 35% 30%; --scene-glow-pos: 50% 80%;
    --scene-mote: #f0c850; --scene-mote-shadow: rgba(240, 200, 80, 0.7); --scene-mote-opacity: 0.5;
  }
  body[data-legend="ali"][data-mode="light"] {
    --scene-sky-1: #c8c4b8; --scene-sky-2: #d4c4a4; --scene-sky-3: #d8b478; --scene-sky-4: #c8902c;
    --scene-horizon: #b8801a;
  }
  body[data-legend="ali"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Muhammad_Ali_NYWTS.jpg/600px-Muhammad_Ali_NYWTS.jpg');
  }

  /* Al Capone — Chicago speakeasy 1920s, smoke + brass */
  body[data-legend="capone"] { --warm-glow: #c4842e; --warm-glow-soft: rgba(196, 132, 46, 0.36); }
  body[data-legend="capone"][data-mode="dark"] {
    --scene-sky-1: #0a0810; --scene-sky-2: #141014; --scene-sky-3: #20181c; --scene-sky-4: #2a1c14;
    --scene-horizon: #5a3a14; --scene-glow: rgba(212, 148, 56, 0.18);
    --scene-mote: #c0a070; --scene-mote-shadow: rgba(192, 160, 112, 0.55); --scene-mote-opacity: 0.45;
    --scene-haze: rgba(212, 148, 56, 0.14);
  }
  body[data-legend="capone"][data-mode="light"] {
    --scene-sky-1: #aab0b4; --scene-sky-2: #b8b0a8; --scene-sky-3: #c0a888; --scene-sky-4: #b88e54;
    --scene-horizon: #9c6c28;
  }
  body[data-legend="capone"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Al_Capone_in_1930.jpg/600px-Al_Capone_in_1930.jpg');
  }

  /* Karl Marx — Victorian London gas-lamp dusk, revolution-red */
  body[data-legend="marx"] { --warm-glow: #c44830; --warm-glow-soft: rgba(196, 72, 48, 0.36); }
  body[data-legend="marx"][data-mode="dark"] {
    --scene-sky-1: #08090a; --scene-sky-2: #14141a; --scene-sky-3: #1c1a1e; --scene-sky-4: #281a16;
    --scene-horizon: #6a2820; --scene-glow: rgba(196, 86, 56, 0.18);
    --scene-mote: #c47a58; --scene-mote-shadow: rgba(196, 122, 88, 0.55); --scene-mote-opacity: 0.4;
    --scene-haze: rgba(160, 90, 60, 0.10);
  }
  body[data-legend="marx"][data-mode="light"] {
    --scene-sky-1: #b4b8bc; --scene-sky-2: #b8b0a4; --scene-sky-3: #b89c80; --scene-sky-4: #a87454;
    --scene-horizon: #8e3220;
  }
  body[data-legend="marx"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Karl_Marx_001.jpg/600px-Karl_Marx_001.jpg');
  }

  /* Adam Smith — Edinburgh study, hearth + brass */
  body[data-legend="smith"] { --warm-glow: #b88a3a; --warm-glow-soft: rgba(184, 138, 58, 0.36); }
  body[data-legend="smith"][data-mode="dark"] {
    --scene-sky-1: #0a0c12; --scene-sky-2: #14181c; --scene-sky-3: #1c1f24; --scene-sky-4: #2a1f14;
    --scene-horizon: #6a4824; --scene-glow: rgba(196, 148, 78, 0.16);
    --scene-mote: #c4a072; --scene-mote-shadow: rgba(196, 160, 114, 0.55); --scene-mote-opacity: 0.4;
  }
  body[data-legend="smith"][data-mode="light"] {
    --scene-sky-1: #bcc0c8; --scene-sky-2: #c4bcb0; --scene-sky-3: #cab098; --scene-sky-4: #c4a070;
    --scene-horizon: #a87c34;
  }
  body[data-legend="smith"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/AdamSmith.jpg/600px-AdamSmith.jpg');
  }

  /* James Clerk Maxwell — Master of Light, spectrum violet-blue */
  body[data-legend="maxwell"] { --warm-glow: #6c5cb0; --warm-glow-soft: rgba(108, 92, 176, 0.36); }
  body[data-legend="maxwell"][data-mode="dark"] {
    --scene-sky-1: #08081a; --scene-sky-2: #100c24; --scene-sky-3: #181028; --scene-sky-4: #1c1830;
    --scene-horizon: #4a3098; --scene-glow: rgba(120, 100, 200, 0.20);
    --scene-mote: #c8b8f0; --scene-mote-shadow: rgba(200, 184, 240, 0.65); --scene-mote-opacity: 0.5;
  }
  body[data-legend="maxwell"][data-mode="light"] {
    --scene-sky-1: #c4c0d8; --scene-sky-2: #c0bce0; --scene-sky-3: #b4b0d8; --scene-sky-4: #a89cc8;
    --scene-horizon: #7a68b0;
  }
  body[data-legend="maxwell"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/James_Clerk_Maxwell.png/600px-James_Clerk_Maxwell.png');
  }

  /* Charles Darwin — Down House garden + Beagle sea */
  body[data-legend="darwin"] { --warm-glow: #6a8a52; --warm-glow-soft: rgba(106, 138, 82, 0.36); }
  body[data-legend="darwin"][data-mode="dark"] {
    --scene-sky-1: #08100c; --scene-sky-2: #101810; --scene-sky-3: #1a221c; --scene-sky-4: #1c2418;
    --scene-horizon: #3a5a3a; --scene-glow: rgba(140, 180, 110, 0.14);
    --scene-mote: #b8c8a4; --scene-mote-shadow: rgba(184, 200, 164, 0.5); --scene-mote-opacity: 0.4;
  }
  body[data-legend="darwin"][data-mode="light"] {
    --scene-sky-1: #c8d0c8; --scene-sky-2: #c8d0bc; --scene-sky-3: #c4cca8; --scene-sky-4: #b4bc90;
    --scene-horizon: #80a070;
  }
  body[data-legend="darwin"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/600px-Charles_Darwin_seated_crop.jpg');
  }

  /* Isaac Newton — Cambridge candlelit, cold stone + copper */
  body[data-legend="newton"] { --warm-glow: #b8753a; --warm-glow-soft: rgba(184, 117, 58, 0.36); }
  body[data-legend="newton"][data-mode="dark"] {
    --scene-sky-1: #08090f; --scene-sky-2: #10131a; --scene-sky-3: #181d24; --scene-sky-4: #28201a;
    --scene-horizon: #5a3818; --scene-glow: rgba(196, 132, 70, 0.18);
    --scene-mote: #c89868; --scene-mote-shadow: rgba(200, 152, 104, 0.55); --scene-mote-opacity: 0.45;
  }
  body[data-legend="newton"][data-mode="light"] {
    --scene-sky-1: #bcc0c4; --scene-sky-2: #c0bcb4; --scene-sky-3: #c8b09c; --scene-sky-4: #c09474;
    --scene-horizon: #a06834;
  }
  body[data-legend="newton"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/GodfreyKneller-IsaacNewton-1689.jpg/600px-GodfreyKneller-IsaacNewton-1689.jpg');
  }

  /* Van Gogh — STARRY NIGHT, swirling cobalt + sunflower */
  body[data-legend="vangogh"] { --warm-glow: #e8c83a; --warm-glow-soft: rgba(232, 200, 58, 0.40); }
  body[data-legend="vangogh"][data-mode="dark"] {
    --scene-sky-1: #061230; --scene-sky-2: #0c1c4a; --scene-sky-3: #142858; --scene-sky-4: #1a3068;
    --scene-horizon: #2a3a78; --scene-glow: rgba(232, 200, 58, 0.22);
    --scene-glow-size: 50% 55%; --scene-glow-pos: 50% 50%;
    --scene-mote: #f0d448; --scene-mote-shadow: rgba(240, 212, 72, 0.75); --scene-mote-opacity: 0.6;
  }
  body[data-legend="vangogh"][data-mode="light"] {
    --scene-sky-1: #b4c4dc; --scene-sky-2: #cbd0b8; --scene-sky-3: #d8c890; --scene-sky-4: #c8a448;
    --scene-horizon: #a87a28;
  }
  body[data-legend="vangogh"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Van_Gogh_-_Self-Portrait.jpg/600px-Van_Gogh_-_Self-Portrait.jpg');
  }

  /* Salvador Dali — Catalan blood-orange dusk, melted clocks */
  body[data-legend="dali"] { --warm-glow: #d4612e; --warm-glow-soft: rgba(212, 97, 46, 0.36); }
  body[data-legend="dali"][data-mode="dark"] {
    --scene-sky-1: #0a0612; --scene-sky-2: #140e1a; --scene-sky-3: #1c1418; --scene-sky-4: #2c1810;
    --scene-horizon: #b85024; --scene-glow: rgba(232, 132, 56, 0.22);
    --scene-mote: #ec9a5a; --scene-mote-shadow: rgba(236, 154, 90, 0.65); --scene-mote-opacity: 0.5;
  }
  body[data-legend="dali"][data-mode="light"] {
    --scene-sky-1: #c8c0b8; --scene-sky-2: #d4b89c; --scene-sky-3: #dc9c70; --scene-sky-4: #c4682c;
    --scene-horizon: #a44a18;
  }
  body[data-legend="dali"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Salvador_Dal%C3%AD_1939.jpg/600px-Salvador_Dal%C3%AD_1939.jpg');
  }

  /* George Orwell — 1984 concrete grey + ration amber */
  body[data-legend="orwell"] { --warm-glow: #b04830; --warm-glow-soft: rgba(176, 72, 48, 0.36); }
  body[data-legend="orwell"][data-mode="dark"] {
    --scene-sky-1: #0c0d10; --scene-sky-2: #161818; --scene-sky-3: #1e2020; --scene-sky-4: #28201a;
    --scene-horizon: #5a3018; --scene-glow: rgba(184, 96, 60, 0.14);
    --scene-mote: #b09078; --scene-mote-shadow: rgba(176, 144, 120, 0.45); --scene-mote-opacity: 0.4;
    --scene-haze: rgba(140, 100, 80, 0.10);
  }
  body[data-legend="orwell"][data-mode="light"] {
    --scene-sky-1: #b4b4b4; --scene-sky-2: #b8b4a8; --scene-sky-3: #b8a48c; --scene-sky-4: #a88068;
    --scene-horizon: #8a4830;
  }
  body[data-legend="orwell"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/George_Orwell_press_photo.jpg/600px-George_Orwell_press_photo.jpg');
  }

  /* Ernest Hemingway — Cuban dusk, Caribbean teal + Havana lamp */
  body[data-legend="hemingway"] { --warm-glow: #2e9a8a; --warm-glow-soft: rgba(46, 154, 138, 0.36); }
  body[data-legend="hemingway"][data-mode="dark"] {
    --scene-sky-1: #061220; --scene-sky-2: #0a1a2c; --scene-sky-3: #102434; --scene-sky-4: #1c281c;
    --scene-horizon: #1c5a52; --scene-glow: rgba(232, 168, 88, 0.18);
    --scene-mote: #6cc4b4; --scene-mote-shadow: rgba(108, 196, 180, 0.6); --scene-mote-opacity: 0.5;
  }
  body[data-legend="hemingway"][data-mode="light"] {
    --scene-sky-1: #b8d4d0; --scene-sky-2: #c0d0c4; --scene-sky-3: #cccca8; --scene-sky-4: #d4b478;
    --scene-horizon: #4ba898;
  }
  body[data-legend="hemingway"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/ErnestHemingway.jpg/600px-ErnestHemingway.jpg');
  }

  /* Abraham Lincoln — Civil War campfire, Union blue night */
  body[data-legend="lincoln"] { --warm-glow: #4a6aa8; --warm-glow-soft: rgba(74, 106, 168, 0.36); }
  body[data-legend="lincoln"][data-mode="dark"] {
    --scene-sky-1: #08101a; --scene-sky-2: #0e1828; --scene-sky-3: #142038; --scene-sky-4: #281c14;
    --scene-horizon: #4a2c14; --scene-glow: rgba(196, 132, 70, 0.22);
    --scene-mote: #c89058; --scene-mote-shadow: rgba(200, 144, 88, 0.55); --scene-mote-opacity: 0.45;
  }
  body[data-legend="lincoln"][data-mode="light"] {
    --scene-sky-1: #b4c0d0; --scene-sky-2: #b8c0c8; --scene-sky-3: #bcb8b0; --scene-sky-4: #b4a08c;
    --scene-horizon: #6c84a8;
  }
  body[data-legend="lincoln"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Abraham_Lincoln_O-77_matte_collodion_print.jpg/600px-Abraham_Lincoln_O-77_matte_collodion_print.jpg');
  }

  /* Richard Feynman — late-night chalkboard + desk lamp */
  body[data-legend="feynman"] { --warm-glow: #d4a83a; --warm-glow-soft: rgba(212, 168, 58, 0.36); }
  body[data-legend="feynman"][data-mode="dark"] {
    --scene-sky-1: #08090c; --scene-sky-2: #101218; --scene-sky-3: #181e22; --scene-sky-4: #28201a;
    --scene-horizon: #5a481a; --scene-glow: rgba(212, 168, 58, 0.20);
    --scene-mote: #d8c068; --scene-mote-shadow: rgba(216, 192, 104, 0.60); --scene-mote-opacity: 0.45;
  }
  body[data-legend="feynman"][data-mode="light"] {
    --scene-sky-1: #c0c4c8; --scene-sky-2: #c8c4b4; --scene-sky-3: #d0bc90; --scene-sky-4: #c8a458;
    --scene-horizon: #b4882c;
  }
  body[data-legend="feynman"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Richard_Feynman_Nobel.jpg/600px-Richard_Feynman_Nobel.jpg');
  }

  /* Marie Curie — moonlit Paris laboratory, radium-green motes */
  body[data-legend="curie"] { --warm-glow: #e3b878; --warm-glow-soft: rgba(227, 184, 120, 0.36); }
  body[data-legend="curie"][data-mode="dark"] {
    --scene-sky-1: #060a18; --scene-sky-2: #0e1228; --scene-sky-3: #181c34; --scene-sky-4: #261c1c;
    --scene-horizon: #3a2630; --scene-glow: rgba(160, 200, 230, 0.10);
    --scene-mote: #9fc878; --scene-mote-shadow: rgba(159, 200, 120, 0.70); --scene-mote-opacity: 0.50;
    --scene-haze: rgba(232, 168, 102, 0.18);
  }
  body[data-legend="curie"][data-mode="light"] {
    --scene-sky-1: #c6d8e8; --scene-sky-2: #d4d8d0; --scene-sky-3: #e0d4bc; --scene-sky-4: #ecc89c;
    --scene-horizon: #e8d4b0;
  }
  body[data-legend="curie"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Marie_Curie_c._1920s.jpg/600px-Marie_Curie_c._1920s.jpg');
    filter: sepia(0.04) contrast(1.08) brightness(0.88);
  }

  /* Amelia Earhart — aviation dawn, layered cloud above + silver-blue */
  body[data-legend="earhart"] { --warm-glow: #b8c8d4; --warm-glow-soft: rgba(184, 200, 212, 0.40); }
  body[data-legend="earhart"][data-mode="dark"] {
    --scene-sky-1: #0a1424; --scene-sky-2: #142038; --scene-sky-3: #1c2c4c; --scene-sky-4: #283848;
    --scene-horizon: #4a6890; --scene-glow: rgba(212, 196, 168, 0.22);
    --scene-mote: #d4dce4; --scene-mote-shadow: rgba(212, 220, 228, 0.55); --scene-mote-opacity: 0.5;
  }
  body[data-legend="earhart"][data-mode="light"] {
    --scene-sky-1: #b8c8e0; --scene-sky-2: #c4d0e0; --scene-sky-3: #d0d4d8; --scene-sky-4: #d4c8b8;
    --scene-horizon: #8ca8c8;
  }
  body[data-legend="earhart"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra.jpg/600px-Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra.jpg');
  }

  /* Enrico Fermi — Chicago Pile, concrete + nuclear amber */
  body[data-legend="fermi"] { --warm-glow: #d48a2a; --warm-glow-soft: rgba(212, 138, 42, 0.36); }
  body[data-legend="fermi"][data-mode="dark"] {
    --scene-sky-1: #0a0c10; --scene-sky-2: #141618; --scene-sky-3: #1e2024; --scene-sky-4: #2a1c14;
    --scene-horizon: #6c3818; --scene-glow: rgba(232, 132, 56, 0.20);
    --scene-mote: #e09850; --scene-mote-shadow: rgba(224, 152, 80, 0.60); --scene-mote-opacity: 0.50;
  }
  body[data-legend="fermi"][data-mode="light"] {
    --scene-sky-1: #b4b8bc; --scene-sky-2: #c4bcac; --scene-sky-3: #d0a884; --scene-sky-4: #c87a30;
    --scene-horizon: #a05418;
  }
  body[data-legend="fermi"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Enrico_Fermi_1943-49.jpg/600px-Enrico_Fermi_1943-49.jpg');
  }

  /* Albert Einstein — Princeton scholarly study, warm desk lamp */
  body[data-legend="einstein"] { --warm-glow: #d4b884; --warm-glow-soft: rgba(212, 184, 132, 0.36); }
  body[data-legend="einstein"][data-mode="dark"] {
    --scene-sky-1: #0e1218; --scene-sky-2: #14181f; --scene-sky-3: #1f2530; --scene-sky-4: #28201c;
    --scene-horizon: #6a4a28; --scene-glow: rgba(232, 184, 120, 0.22);
    --scene-glow-size: 32% 30%; --scene-glow-pos: 50% 100%;
    --scene-mote: #c8a578; --scene-mote-shadow: rgba(200, 165, 120, 0.5); --scene-mote-opacity: 0.40;
  }
  body[data-legend="einstein"][data-mode="light"] {
    --scene-sky-1: #bcc4cc; --scene-sky-2: #c8c8c0; --scene-sky-3: #d4cab0; --scene-sky-4: #d8c094;
    --scene-horizon: #c4a060;
  }
  body[data-legend="einstein"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/600px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg');
    filter: sepia(0.06) contrast(1.05) brightness(0.94);
  }

  /* Oppenheimer — Trinity dawn, desert + atomic horizon-flash */
  body[data-legend="oppenheimer"] { --warm-glow: #e8d8b8; --warm-glow-soft: rgba(232, 216, 184, 0.36); }
  body[data-legend="oppenheimer"][data-mode="dark"] {
    --scene-sky-1: #0a0a14; --scene-sky-2: #141420; --scene-sky-3: #1c1c20; --scene-sky-4: #2c2418;
    --scene-horizon: #d4b878; --scene-glow: rgba(248, 232, 196, 0.28);
    --scene-glow-size: 70% 25%; --scene-glow-pos: 50% 90%;
    --scene-mote: #e8d8b4; --scene-mote-shadow: rgba(232, 216, 180, 0.55); --scene-mote-opacity: 0.45;
  }
  body[data-legend="oppenheimer"][data-mode="light"] {
    --scene-sky-1: #c0c4c8; --scene-sky-2: #c8c4b8; --scene-sky-3: #d4c4a0; --scene-sky-4: #dcc080;
    --scene-horizon: #c89e50;
  }
  body[data-legend="oppenheimer"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/JROppenheimer-LosAlamos.jpg/600px-JROppenheimer-LosAlamos.jpg');
  }

  /* Niels Bohr — Copenhagen blue evening, cobalt + lab lamp */
  body[data-legend="bohr"] { --warm-glow: #4a6ab8; --warm-glow-soft: rgba(74, 106, 184, 0.36); }
  body[data-legend="bohr"][data-mode="dark"] {
    --scene-sky-1: #06081c; --scene-sky-2: #0c0e2c; --scene-sky-3: #14183c; --scene-sky-4: #20241c;
    --scene-horizon: #2a3884; --scene-glow: rgba(212, 168, 88, 0.18);
    --scene-glow-size: 40% 30%; --scene-glow-pos: 50% 88%;
    --scene-mote: #88a8e0; --scene-mote-shadow: rgba(136, 168, 224, 0.55); --scene-mote-opacity: 0.45;
  }
  body[data-legend="bohr"][data-mode="light"] {
    --scene-sky-1: #b4c0d8; --scene-sky-2: #b8c0d0; --scene-sky-3: #b8c4c0; --scene-sky-4: #c0b8a0;
    --scene-horizon: #5a78b4;
  }
  body[data-legend="bohr"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Niels_Bohr.jpg/600px-Niels_Bohr.jpg');
  }

  /* Nikola Tesla — Colorado Springs electric storm, violet-blue + filament */
  body[data-legend="tesla"] { --warm-glow: #8a6cd4; --warm-glow-soft: rgba(138, 108, 212, 0.40); }
  body[data-legend="tesla"][data-mode="dark"] {
    --scene-sky-1: #04061a; --scene-sky-2: #080a26; --scene-sky-3: #100c30; --scene-sky-4: #18142c;
    --scene-horizon: #50308c; --scene-glow: rgba(168, 132, 232, 0.24);
    --scene-mote: #c8b4f0; --scene-mote-shadow: rgba(200, 180, 240, 0.70); --scene-mote-opacity: 0.55;
    --scene-haze: rgba(168, 132, 232, 0.14);
  }
  body[data-legend="tesla"][data-mode="light"] {
    --scene-sky-1: #c0bcd8; --scene-sky-2: #bcb4d8; --scene-sky-3: #ada8c8; --scene-sky-4: #aa9cbc;
    --scene-horizon: #8064bc;
  }
  body[data-legend="tesla"] .figure-primary .figure-portrait {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/600px-Tesla_circa_1890.jpeg');
  }

  /* ── SCHOLAR'S JOURNAL PANEL (slides from right) ──────────
     Per-user activity recap, fully on the Tuscan-dusk system:
     Fraunces for display/headings, Manrope for body, hairline gold
     accents, soft glow, count-up + draw-in motion. jr-* throughout,
     themed off CSS vars so dark (default) + light both work. */
  .journal-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(468px, 95vw);
    z-index: 22;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(212, 165, 116, 0.10), transparent 60%),
      rgba(20, 16, 12, 0.90);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
    border-left: 1px solid var(--panel-border);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto; overflow-x: hidden;
  }
  body.journal-open .journal-panel { transform: translateX(0); }
  body[data-mode="light"] .journal-panel {
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(212, 165, 116, 0.18), transparent 60%),
      rgba(252, 244, 228, 0.93);
    border-left: 1px solid rgba(80, 50, 20, 0.12);
    box-shadow: -24px 0 60px rgba(80, 50, 20, 0.12);
  }
  .journal-panel .panel-close {
    position: absolute; top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px)); right: 18px;
    z-index: 5;
  }
  .journal-body { padding: 0 22px 34px; }

  /* Entrance motion — each card rises + fades, staggered. */
  @keyframes jrRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes jrFade { from { opacity: 0; } to { opacity: 1; } }
  .jr-anim { opacity: 0; animation: jrRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .jr-anim.d1 { animation-delay: 0.04s; }
  .jr-anim.d2 { animation-delay: 0.10s; }
  .jr-anim.d3 { animation-delay: 0.16s; }
  .jr-anim.d4 { animation-delay: 0.22s; }
  .jr-anim.d5 { animation-delay: 0.28s; }
  .jr-anim.d6 { animation-delay: 0.34s; }
  .jr-anim.d7 { animation-delay: 0.40s; }
  @media (prefers-reduced-motion: reduce) {
    .jr-anim { opacity: 1; animation: none; }
  }

  .jr-loading {
    padding: 90px 0; text-align: center;
    color: var(--text-faint); font-family: 'Fraunces', serif; font-style: italic; font-size: 15px;
    animation: jrFade 0.4s ease;
  }

  .jr-head { padding: 26px 0 16px; }
  .jr-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--text-faint);
  }
  .jr-head h2 {
    margin: 9px 0 0;
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 90;
    font-size: 33px; font-weight: 500; line-height: 1.05; color: var(--text);
  }
  .jr-head h2 em { font-style: italic; color: var(--warm-glow); }

  /* Cards — layered warmth + hairline border + glow on hover. */
  .jr-card {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 17px 19px;
    margin-bottom: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  body[data-mode="light"] .jr-card {
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.75), rgba(255, 248, 236, 0.5));
    border-color: rgba(80, 50, 20, 0.12);
    box-shadow: 0 1px 2px rgba(80, 50, 20, 0.04);
  }
  .jr-card-title {
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 13px;
    display: flex; align-items: center; gap: 8px;
  }

  /* Weekly summary stats */
  .jr-stat-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
    margin-bottom: 14px;
  }
  .jr-stat {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 5px;
    padding: 15px 4px 13px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--panel-border);
    border-radius: 15px;
  }
  body[data-mode="light"] .jr-stat {
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.8), rgba(255, 248, 236, 0.5));
    border-color: rgba(80, 50, 20, 0.12);
  }
  .jr-stat-num {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 40;
    font-size: 27px; font-weight: 500; color: var(--warm-glow); line-height: 1;
    font-feature-settings: 'tnum';
  }
  .jr-stat-label {
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px; letter-spacing: 0.05em; color: var(--text-dim);
    text-transform: uppercase;
  }

  /* Progress bar (rank + goal) */
  .jr-bar {
    height: 8px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden; margin: 9px 0;
  }
  body[data-mode="light"] .jr-bar { background: rgba(80, 50, 20, 0.12); }
  .jr-bar-fill {
    height: 100%; border-radius: 99px; width: 0;
    background: linear-gradient(90deg, var(--warm-glow), #e8c79a);
    box-shadow: 0 0 12px var(--warm-glow-soft);
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Rank */
  .jr-rank-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .jr-rank-name {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 40;
    font-size: 19px; font-weight: 500; color: var(--text);
  }
  .jr-rank-pts { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
  .jr-rank-next { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--text-dim); }
  .jr-rank-next strong { color: var(--warm-glow); font-weight: 600; }

  /* Breadth radar (hero) + streak two-up */
  .jr-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
  .jr-grid2 .jr-card { margin-bottom: 14px; }
  .jr-breadth { display: flex; flex-direction: column; align-items: center; }
  .jr-radar { width: 100%; max-width: 230px; height: auto; display: block; overflow: visible; }
  .jr-radar-grid { fill: none; stroke: var(--panel-border); stroke-width: 1; }
  .jr-radar-spoke { stroke: var(--panel-border); stroke-width: 1; }
  .jr-radar-area {
    fill: url(#jrRadarFill);
    stroke: var(--warm-glow); stroke-width: 2; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px var(--warm-glow-soft));
    transform-origin: center;
    animation: jrRadarPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  }
  @keyframes jrRadarPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .jr-radar-area { animation: none; } }
  .jr-radar-stop0 { stop-color: var(--warm-glow); stop-opacity: 0.45; }
  .jr-radar-stop1 { stop-color: var(--warm-glow); stop-opacity: 0.12; }
  .jr-radar-dot { fill: var(--warm-glow); filter: drop-shadow(0 0 3px var(--warm-glow-soft)); }
  .jr-radar-label {
    fill: var(--text-faint); font-family: 'Manrope', sans-serif;
    font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .jr-radar-label.on { fill: var(--text); font-weight: 600; }
  .jr-breadth-foot { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
  .jr-breadth-foot strong { color: var(--warm-glow); font-weight: 700; }

  .jr-streak { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .jr-streak-flame {
    width: 38px; height: 38px; margin-bottom: 4px;
    color: var(--text-faint); opacity: 0.5;
  }
  .jr-streak.lit .jr-streak-flame {
    color: var(--warm-glow); opacity: 1;
    filter: drop-shadow(0 0 8px var(--warm-glow-soft));
    animation: jrFlicker 2.4s ease-in-out infinite;
  }
  @keyframes jrFlicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  @media (prefers-reduced-motion: reduce) { .jr-streak.lit .jr-streak-flame { animation: none; } }
  .jr-streak-num {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144;
    font-size: 50px; font-weight: 500; color: var(--warm-glow); line-height: 0.95;
    font-feature-settings: 'tnum';
  }
  .jr-streak.dim .jr-streak-num { color: var(--text-faint); }
  .jr-streak-lbl { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--text-dim); margin-top: 3px; }

  /* Weekly goal */
  .jr-goal-met {
    color: #8fcf7d; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
    font-size: 10px;
  }
  .jr-goal-prog {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-size: 17px; font-weight: 500; color: var(--text);
  }
  .jr-goal-prog strong { color: var(--warm-glow); font-weight: 600; }
  .jr-goal-sub { font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
  .jr-goal-edit {
    margin-top: 8px; background: none; border: none; padding: 0;
    color: var(--warm-glow); font-family: 'Manrope', sans-serif; font-size: 12px;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  }
  .jr-goal-edit:hover { filter: brightness(1.1); }
  .jr-goal-form { margin-top: 14px; }
  .jr-goal-row {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--text-dim);
  }
  /* Stepper for the target number (replaces the bare OS number box) */
  .jr-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--panel-border); border-radius: 9px; overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
  }
  body[data-mode="light"] .jr-stepper { background: rgba(255, 248, 230, 0.6); border-color: rgba(80, 50, 20, 0.18); }
  .jr-stepper button {
    width: 30px; border: none; background: none; cursor: pointer;
    color: var(--text-dim); font-size: 17px; line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .jr-stepper button:hover { background: var(--hover-tint); color: var(--warm-glow); }
  .jr-stepper input {
    width: 46px; border: none; background: none; text-align: center;
    color: var(--text); font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-size: 16px; -moz-appearance: textfield;
  }
  .jr-stepper input::-webkit-outer-spin-button,
  .jr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .jr-stepper input:focus { outline: none; }
  .jr-goal-actions { display: flex; gap: 9px; margin-top: 14px; align-items: center; }
  .jr-btn-primary {
    padding: 9px 20px; border-radius: 99px; border: none; cursor: pointer;
    background: linear-gradient(90deg, var(--warm-glow), #e8c79a);
    color: #2a1d0e; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 14px var(--warm-glow-soft);
    transition: filter 0.2s ease, transform 0.1s ease;
  }
  .jr-btn-primary:hover { filter: brightness(1.06); }
  .jr-btn-primary:active { transform: translateY(1px); }
  .jr-btn-primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
  .jr-btn-ghost {
    padding: 9px 16px; border-radius: 99px; cursor: pointer;
    background: none; border: 1px solid var(--panel-border); color: var(--text-dim);
    font-family: 'Manrope', sans-serif; font-size: 13px;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .jr-btn-ghost:hover { border-color: var(--panel-border-hot); color: var(--text); }
  .jr-goal-flash {
    font-family: 'Manrope', sans-serif; font-size: 12px; color: #8fcf7d;
    opacity: 0; transition: opacity 0.3s ease;
  }
  .jr-goal-flash.show { opacity: 1; }

  /* "What are insight points" caption + tap-to-expand scoring guide */
  .jr-points-explain {
    margin: 2px 0 4px; padding: 13px 15px; border-radius: 14px;
    background: rgba(212, 165, 116, 0.06); border: 1px solid var(--panel-border);
  }
  body[data-mode="light"] .jr-points-explain { background: rgba(212, 165, 116, 0.1); }
  .jr-explain-cap {
    margin: 0; font-family: 'Manrope', sans-serif; font-size: 12.5px;
    line-height: 1.55; color: var(--text-dim);
  }
  .jr-explain-cap strong { color: var(--warm-glow); font-weight: 600; }
  .jr-explain-toggle {
    margin-top: 9px; display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--warm-glow);
  }
  .jr-explain-toggle svg { width: 13px; height: 13px; transition: transform 0.25s ease; }
  .jr-explain-toggle.open svg { transform: rotate(180deg); }
  .jr-explain-list {
    list-style: none; margin: 11px 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
  }
  .jr-explain-list li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--panel-border);
    font-family: 'Manrope', sans-serif; font-size: 12.5px; color: var(--text);
  }
  .jr-explain-act { color: var(--text-dim); }
  .jr-explain-pts {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-weight: 600; color: var(--warm-glow); font-feature-settings: 'tnum';
  }
  @media (max-width: 520px) { .jr-explain-list { grid-template-columns: 1fr; } }

  /* Weekly-goal: plain-English headline + quick picks + live preview */
  .jr-goal-headline {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 32;
    font-size: 19px; font-weight: 500; color: var(--text); line-height: 1.25;
    margin-bottom: 4px;
  }
  .jr-goal-headline strong { color: var(--warm-glow); font-weight: 600; }
  .jr-suggest-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4px; }
  .jr-suggest-chip {
    flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: 13px; cursor: pointer; text-align: left;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
  }
  body[data-mode="light"] .jr-suggest-chip { background: rgba(255, 248, 230, 0.55); }
  .jr-suggest-chip:hover { border-color: var(--panel-border-hot); background: var(--hover-tint); }
  .jr-suggest-chip:active { transform: translateY(1px); }
  .jr-suggest-chip.is-active {
    border-color: var(--warm-glow); background: rgba(212, 165, 116, 0.12);
  }
  .jr-suggest-name {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-size: 14px; font-weight: 600; color: var(--text);
  }
  .jr-suggest-hint { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--text-dim); }
  .jr-build-lead {
    margin: 14px 0 9px; font-family: 'Manrope', sans-serif; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  }
  .jr-goal-lead { min-width: 64px; }
  .jr-goal-preview {
    margin-top: 12px; padding: 10px 13px; border-radius: 11px;
    background: rgba(212, 165, 116, 0.08); border: 1px dashed var(--warm-glow-soft);
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-size: 15px; color: var(--text); line-height: 1.3;
  }
  .jr-goal-preview strong { color: var(--warm-glow); font-weight: 600; }

  /* Per-surface breakdown */
  .jr-surface {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 0; border-bottom: 1px solid var(--panel-border);
    font-family: 'Manrope', sans-serif; font-size: 14px; color: var(--text);
  }
  .jr-surface:last-child { border-bottom: none; }
  .jr-surface-ico { width: 17px; height: 17px; flex: none; color: var(--warm-glow); opacity: 0.85; }
  .jr-surface.soon .jr-surface-ico { color: var(--text-faint); opacity: 0.6; }
  .jr-surface-label { flex: 1; }
  .jr-surface-label em {
    font-style: normal; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-faint); margin-left: 7px;
    border: 1px solid var(--panel-border); border-radius: 99px; padding: 2px 7px;
  }
  .jr-surface.soon { color: var(--text-faint); }
  .jr-surface-val {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24;
    font-weight: 500; font-size: 16px; color: var(--warm-glow); font-feature-settings: 'tnum';
  }
  .jr-surface.soon .jr-surface-val { color: var(--text-faint); }

  /* Badges */
  .jr-badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
  .jr-badge {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 15px 7px; border-radius: 15px;
    background: rgba(255, 255, 255, 0.02); border: 1px solid var(--panel-border);
    opacity: 0.45; transition: opacity 0.3s ease, transform 0.2s ease;
  }
  .jr-badge.earned {
    opacity: 1; border-color: var(--warm-glow-soft);
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.12), rgba(212, 165, 116, 0.03));
  }
  .jr-badge.earned:hover { transform: translateY(-2px); }
  .jr-badge-medal { width: 30px; height: 30px; color: var(--text-faint); }
  .jr-badge.earned .jr-badge-medal { color: var(--warm-glow); filter: drop-shadow(0 0 5px var(--warm-glow-soft)); }
  .jr-badge-title {
    font-family: 'Manrope', sans-serif; font-size: 10.5px; line-height: 1.25; color: var(--text-dim);
  }
  .jr-badge.earned .jr-badge-title { color: var(--text); font-weight: 600; }

  /* First-time empty state */
  .jr-empty { text-align: center; padding: 14px 6px 6px; }
  .jr-empty-ico { width: 46px; height: 46px; color: var(--warm-glow); opacity: 0.85; margin-bottom: 12px; }
  .jr-empty h3 {
    font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 40;
    font-size: 21px; font-weight: 500; color: var(--text); margin: 0 0 8px;
  }
  .jr-empty p { font-family: 'Manrope', sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin: 0 auto 4px; max-width: 320px; }
  .jr-empty-hint { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--text-faint); margin-top: 14px; }

  /* Logged-out nudge */
  .jr-nudge { text-align: center; }
  .jr-nudge-ico { width: 44px; height: 44px; color: var(--warm-glow); opacity: 0.85; margin-bottom: 12px; }
  .jr-nudge p { font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0 auto 16px; max-width: 320px; }