/* =============================================================
   The Threshold — brettlevine.com  ·  Chapter 1
   An elegant digital escape room turned interactive myth.
   Obsidian + warm paper + brass, one electric-blue signal.
   All motion via transform / opacity. Responsive, touch +
   keyboard, reduced-motion aware.
   ============================================================= */

:root {
  /* Palette */
  --obsidian:   #090a0e;
  --graphite:   #14171d;
  --graphite-2: #1b1f27;
  --paper:      #ece4d4;   /* warm off-white */
  --paper-dim:  #9aa0a8;
  --paper-faint:#8a9099;
  --brass:      #c8a24a;
  --brass-soft: #a98a3f;
  --brass-glow: rgba(200, 162, 74, 0.35);
  --star:       #3da9fc;   /* the single electric blue signal */
  --star-glow:  rgba(61, 169, 252, 0.55);
  --line:       rgba(236, 228, 212, 0.06);
  --line-strong:rgba(236, 228, 212, 0.12);
  --bad:        #c98b7a;   /* gentle, never alarming */

  /* Rhythm */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --beat: 0.6s;

  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
          Georgia, "Times New Roman", serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--paper);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.is-final { overflow: auto; }

/* ---------------------- Skip link ---------------------- */
.skip-link {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-faint);
  background: rgba(20, 23, 29, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 16px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: color var(--beat) var(--ease), border-color var(--beat) var(--ease), opacity var(--beat) var(--ease);
  opacity: 0.55;
}
.skip-link:hover, .skip-link:focus-visible { color: var(--paper); border-color: var(--brass-soft); opacity: 1; }

/* ---------------------- Background ---------------------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg__motes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.bg__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  animation: gridDrift 60s linear infinite;
  will-change: transform;
}
.bg__sweep {
  position: absolute; inset: -40% -10%;
  background: linear-gradient(115deg, transparent 40%, rgba(236, 228, 212, 0.05) 50%, transparent 60%);
  animation: sweep 14s var(--ease-in-out) infinite;
}
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(27,31,39,0) 0%, rgba(9,10,14,0.55) 70%, rgba(9,10,14,0.92) 100%);
}
@keyframes gridDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-48px,-48px,0); } }
@keyframes sweep { 0% { transform: translateX(-30%); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } }

/* ---------------------- Stage / scenes ---------------------- */
.stage { position: relative; z-index: 10; min-height: 100vh; min-height: 100dvh; }
.scene {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 36px);
  padding: 6vmin;
  opacity: 0; visibility: hidden; transform: scale(0.992);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), visibility 0s linear 0.9s;
}
.scene.is-active {
  opacity: 1; visibility: visible; transform: none; /* settle at no transform: a persistent transform/containing-block dismisses native <select> popups (global dropdown-flash fix) */
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), visibility 0s; /* entrance still animates scale(0.992) -> none */
}
/* Hard single-root safety net: a hidden registered scene/view/tab is truly removed
   from layout (never merely faded or buried), so two roots can never overlap. */
[data-app-scene][hidden],
[data-lab-tab][hidden],
[data-wonder-view][hidden],
[data-room-view][hidden],
[data-route-chapter][hidden] { display: none !important; }
[inert] { pointer-events: none; }

/* ---------------------- Typography ---------------------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.4vw, 12px); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--brass); margin: 0; opacity: 0.85;
}
.copy { text-align: center; max-width: 36ch; }
.headline {
  font-size: clamp(1.5rem, 4.4vw, 2.9rem); line-height: 1.18; font-weight: 500;
  letter-spacing: -0.01em; margin: 0 0 0.5em; text-wrap: balance;
}
.subhead {
  font-family: var(--font-ui); font-size: clamp(0.85rem, 1.7vw, 1rem);
  letter-spacing: 0.04em; color: var(--paper-dim); margin: 0;
}
.prologue-beat {
  font-style: italic; color: var(--paper-dim);
  font-size: clamp(0.9rem, 2vw, 1.1rem); margin: 0.9em 0 0;
  opacity: 0; transform: translateY(6px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.prologue-beat.is-show { opacity: 0.9; transform: translateY(0); }
.creed {
  position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-faint);
  opacity: 0.6; margin: 0; text-align: center; max-width: 90vw; pointer-events: none;
}

.begin {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper); background: transparent;
  border: 1px solid var(--brass-soft); border-radius: 999px; padding: 12px 30px; cursor: pointer;
  transition: background var(--beat) var(--ease), box-shadow var(--beat) var(--ease),
              transform var(--beat) var(--ease), color var(--beat) var(--ease), opacity var(--beat) var(--ease);
}
.begin:hover, .begin:focus-visible {
  background: rgba(200, 162, 74, 0.1);
  box-shadow: 0 0 0 1px var(--brass-soft), 0 8px 30px -12px var(--brass-glow);
  transform: translateY(-1px);
}
.begin.is-hidden { opacity: 0; pointer-events: none; transform: translateY(6px); position: absolute; }

/* ---------------------- Threshold door ---------------------- */
.threshold { position: relative; width: clamp(150px, 22vmin, 230px); aspect-ratio: 5 / 8; perspective: 900px; }
.threshold__frame {
  position: absolute; inset: 0;
  border: 1px solid var(--line-strong); border-radius: 6px 6px 2px 2px;
  transform-style: preserve-3d;
  box-shadow: 0 40px 120px -50px rgba(0,0,0,0.9), inset 0 0 60px rgba(0,0,0,0.6);
  overflow: hidden;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite) 60%, #0d0f14);
}
.threshold__plane { position: absolute; inset: 0; }
.threshold__plane--back { background: radial-gradient(ellipse at 50% 30%, rgba(61,169,252,0.05), transparent 60%); }
.threshold__plane--mid {
  inset: 8% 10%; border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
.threshold__seam {
  position: absolute; top: 6%; bottom: 6%; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  transition: box-shadow 1.2s var(--ease);
}
.threshold.is-charged .threshold__seam {
  box-shadow: 0 0 26px var(--star-glow);
  background: linear-gradient(180deg, transparent, var(--star) 20%, var(--star) 80%, transparent);
}

/* Door marks: I lights (blue), II aligns (brass), III appears */
.door-marks {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  display: flex; flex-direction: row; gap: 14px; align-items: center;
  pointer-events: none; z-index: 6; /* above the centred monogram */
}
.door-mark {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  transition: background var(--beat) var(--ease), box-shadow var(--beat) var(--ease),
              border-color var(--beat) var(--ease), transform var(--beat) var(--ease);
}
.door-mark.is-lit[data-mark="1"] { background: var(--star); border-color: var(--star); box-shadow: 0 0 14px var(--star-glow); }
.door-mark.is-lit[data-mark="2"] { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 14px var(--brass-glow); transform: rotate(45deg); }
.door-mark.is-lit[data-mark="3"] { background: var(--paper); border-color: var(--paper); box-shadow: 0 0 14px rgba(236,228,212,0.4); }

/* Assembled 4 · 1 · 1 on the door after all three keys */
.door-seq {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; z-index: 4;
  font-size: clamp(0.9rem, 4vmin, 1.3rem); color: var(--brass);
  opacity: 0; transition: opacity var(--beat) var(--ease); text-shadow: 0 0 14px var(--brass-glow);
}
.door-seq.is-show { opacity: 1; }
.door-seq__d { opacity: 0; transform: translateY(4px); }
.door-seq.is-show .door-seq__d { animation: seqIn 0.5s var(--ease) forwards; }
.door-seq.is-show .door-seq__d[data-d="1"] { animation-delay: 0.35s; }
.door-seq.is-show .door-seq__d[data-d="2"] { animation-delay: 0.7s; }
.door-seq__dot { opacity: 0.4; }
@keyframes seqIn { to { opacity: 1; transform: translateY(0); } }

/* Monogram area with one "awake" square (clue 3) */
.threshold__monogram {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56%; aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; outline: none; z-index: 5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 25%;
}
.threshold__monogram:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--star); }
.awake-square {
  position: absolute; right: 14%; top: 16%;
  width: 18%; aspect-ratio: 1; border: 1px solid var(--line-strong);
  background: rgba(236,228,212,0.02);
  transition: background var(--beat) var(--ease), box-shadow var(--beat) var(--ease), transform var(--beat) var(--ease);
}
/* faint "alive" pulse so it is discoverable without being obvious */
.scene--arrival.is-begun .threshold__monogram:not(.clue--done) .awake-square {
  animation: awakeBreath 3.4s var(--ease-in-out) infinite;
}
.threshold__monogram.is-armed .awake-square { background: rgba(61,169,252,0.12); box-shadow: 0 0 12px var(--star-glow); }
.threshold__monogram.clue--done .awake-square {
  background: var(--star); box-shadow: 0 0 18px var(--star-glow); transform: rotateY(180deg); animation: none;
}
@keyframes awakeBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(61,169,252,0); background: rgba(236,228,212,0.02); }
  50%      { box-shadow: 0 0 10px var(--star-glow); background: rgba(61,169,252,0.07); }
}
.bl-flash {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-ui); letter-spacing: 0.2em; font-size: clamp(0.8rem, 4vmin, 1.2rem);
  color: var(--paper); opacity: 0; pointer-events: none;
}
.threshold__monogram.clue--done .bl-flash { animation: blFlash 1.4s var(--ease) forwards; }
@keyframes blFlash { 0% { opacity: 0; } 25% { opacity: 0.9; } 60% { opacity: 0.9; } 100% { opacity: 0; } }

/* ---------------------- Clue 1: the star ---------------------- */
.clue-star { position: fixed; top: 22%; right: 18%; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; z-index: 30; }
.clue-star__core {
  position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
  background: var(--star); border-radius: 50%;
  box-shadow: 0 0 12px 2px var(--star-glow), 0 0 32px 6px var(--star-glow);
  animation: starPulse 2.6s var(--ease-in-out) infinite;
}
.clue-star__core::before, .clue-star__core::after {
  content: ""; position: absolute; inset: 50%;
  background: linear-gradient(var(--star), transparent); width: 1px; height: 26px;
  transform: translate(-50%, -50%); opacity: 0.6;
}
.clue-star__core::after { transform: translate(-50%, -50%) rotate(90deg); }
.clue-star__ripple { position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--star); opacity: 0; transform: scale(1); }
.clue-star.is-rippling .clue-star__ripple { animation: ripple 0.9s var(--ease) forwards; }
.clue-star.clue--done .clue-star__core { animation: none; background: var(--star); box-shadow: 0 0 10px var(--star-glow); }
.clue-star.clue--done { opacity: 0.65; }
@keyframes starPulse { 0%,100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ripple { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(7); } }

/* Signal trail (created in JS): a blue spark travelling to the door */
.signal-trail {
  position: fixed; z-index: 45; width: 7px; height: 7px; border-radius: 50%;
  background: var(--star); box-shadow: 0 0 14px 3px var(--star-glow); pointer-events: none;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}

/* ---------------------- Clue 2: the brass ring ---------------------- */
.clue-ring { position: fixed; bottom: 16%; left: 16%; width: clamp(78px, 12vmin, 110px); aspect-ratio: 1; z-index: 30; cursor: grab; touch-action: none; outline: none; }
.clue-ring:active { cursor: grabbing; }
.clue-ring__ticks {
  position: absolute; inset: 0; border-radius: 50%;
  /* 24 tick marks via repeating conic gradient */
  background: repeating-conic-gradient(from 0deg, var(--line-strong) 0deg 0.6deg, transparent 0.6deg 15deg);
  mask: radial-gradient(circle, transparent 64%, #000 66%, #000 78%, transparent 80%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 78%, transparent 80%);
  opacity: 0.7;
}
.clue-ring__dial {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--brass-soft);
  background:
    conic-gradient(from 0deg, rgba(200,162,74,0), rgba(200,162,74,0.14), rgba(200,162,74,0) 60%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), transparent 60%), var(--graphite);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6), 0 10px 30px -16px #000;
  transform: rotate(0deg);
}
.clue-ring__notch { position: absolute; top: 6px; left: 50%; width: 3px; height: 16px; transform: translateX(-50%); background: var(--brass); border-radius: 2px; box-shadow: 0 0 8px var(--brass-glow); }
.clue-ring__index { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid var(--line-strong); }
.clue-ring__target { position: absolute; top: -6px; left: 50%; width: 2px; height: 10px; transform: translateX(-50%); background: var(--paper-faint); opacity: 0.6; }
.clue-ring.is-aligned .clue-ring__dial { border-color: var(--brass); box-shadow: inset 0 0 18px rgba(0,0,0,0.6), 0 0 26px -4px var(--brass-glow); }
.clue-ring.clue--done { opacity: 0.7; cursor: default; }

/* ---------------------- Key tracker ---------------------- */
.keytrack { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 35; }
.key-slot {
  display: flex; align-items: center; gap: 8px; min-width: 58px; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(20,23,29,0.5);
  backdrop-filter: blur(6px); font-family: var(--font-ui);
  transition: border-color var(--beat) var(--ease), background var(--beat) var(--ease), box-shadow var(--beat) var(--ease);
}
.key-slot__num { font-size: 10px; letter-spacing: 0.15em; color: var(--paper-faint); }
.key-slot__val { font-family: var(--font); font-size: 16px; line-height: 1; color: var(--paper); min-width: 10px; opacity: 0; transform: translateY(4px); transition: opacity var(--beat) var(--ease), transform var(--beat) var(--ease); }
.key-slot.is-filled { border-color: var(--brass-soft); box-shadow: 0 0 22px -10px var(--brass-glow); }
.key-slot.is-filled .key-slot__val { opacity: 1; transform: translateY(0); }
.key-slot.is-filled .key-slot__num { color: var(--brass); }

/* ---------------------- Two-line reveal ---------------------- */
.reveal {
  position: fixed; left: 50%; bottom: 24%; transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 40; pointer-events: none; opacity: 0; text-align: center; max-width: 90vw;
}
.reveal.is-show { animation: revealPop 3s var(--ease) forwards; }
.reveal__key { font-family: var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; font-size: clamp(13px, 2vw, 16px); color: var(--brass); text-shadow: 0 0 18px var(--brass-glow); }
.reveal__line { font-style: italic; color: var(--paper-dim); font-size: clamp(0.85rem, 1.8vw, 1rem); }
@keyframes revealPop {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  14% { opacity: 1; transform: translate(-50%, 0); }
  82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* ---------------------- First revelation ---------------------- */
.scene--interstitial { background: rgba(9,10,14,0.4); }
.first-seq { display: flex; align-items: center; gap: 10px; font-size: clamp(2.4rem, 12vw, 5rem); color: var(--brass); text-shadow: 0 0 40px var(--brass-glow); }
.first-seq__d { opacity: 0; transform: translateY(10px) scale(0.9); }
.scene--interstitial.is-active .first-seq__d { animation: seqIn 0.7s var(--ease) forwards; }
.scene--interstitial.is-active .first-seq__d:nth-of-type(3) { animation-delay: 0.3s; }
.scene--interstitial.is-active .first-seq__d:nth-of-type(5) { animation-delay: 0.6s; }
.first-seq__dot { opacity: 0.4; }
.interstitial__line { font-size: clamp(1.1rem, 3vw, 1.9rem); font-style: italic; color: var(--paper); max-width: 24ch; text-align: center; text-wrap: balance; margin: 0; }
.interstitial__line--sub { font-size: clamp(0.95rem, 2.2vw, 1.3rem); color: var(--paper-dim); }

/* ---------------------- The Ledger (Sudoku) ---------------------- */
/* On short viewports the stacked grid + numpad can exceed the height;
   allow the scene to scroll and never clip controls out of reach.
   `safe center` keeps the top reachable instead of clipping when overflowing. */
.scene--sudoku { overflow-y: auto; justify-content: safe center; }
.ledger__title { font-family: var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase; font-size: clamp(13px, 2vw, 16px); color: var(--brass); margin: 0; }
.ledger__copy, .ledger__rules, .sudoku__status {
  font-family: var(--font-ui); font-size: clamp(12px, 1.6vw, 14px); letter-spacing: 0.03em;
  color: var(--paper-dim); text-align: center; max-width: 34ch; margin: 0;
}
.ledger__rules { color: var(--paper-faint); }
.sudoku__status { min-height: 1.2em; color: var(--brass); }
.sudoku__status.is-bad { color: var(--bad); }

.sudoku {
  display: grid; grid-template-rows: repeat(4, 1fr);
  width: min(82vw, 360px); aspect-ratio: 1; gap: 2px; padding: 6px;
  background: var(--line-strong); border: 1px solid var(--brass-soft); border-radius: 8px;
  box-shadow: 0 30px 80px -40px #000, inset 0 0 40px rgba(0,0,0,0.5);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.sudoku-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.sudoku-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--graphite); color: var(--paper); font-family: var(--font);
  font-size: clamp(1.2rem, 6vw, 2rem); border: 0; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.sudoku-cell[data-c="1"] { border-right: 2px solid var(--line-strong); }
.sudoku-cell[data-r="1"] { border-bottom: 2px solid var(--line-strong); }
.sudoku-cell.is-given { color: var(--paper-dim); background: #11141a; cursor: default; }
.sudoku-cell.is-selected { box-shadow: inset 0 0 0 2px var(--brass); }
.sudoku-cell.is-peer { background: #171b22; }
.sudoku-cell.is-bad { color: var(--bad); }
.sudoku-cell.is-gold { color: var(--brass); background: radial-gradient(circle at 50% 45%, rgba(200,162,74,0.18), #14110b); box-shadow: inset 0 0 18px -6px var(--brass-glow); }
.sudoku-cell.is-gold.is-selected { box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 18px -6px var(--brass-glow); }

/* Unlock sequence: numbers glow, seams deepen */
.sudoku.is-correct { border-color: var(--brass); box-shadow: 0 0 50px -10px var(--brass-glow), inset 0 0 40px rgba(0,0,0,0.5); background: var(--brass-soft); }
.sudoku.is-correct .sudoku-cell { color: var(--paper); }
.sudoku.is-correct .sudoku-cell[data-c="1"] { border-right-color: var(--brass-soft); }
.sudoku.is-correct .sudoku-cell[data-r="1"] { border-bottom-color: var(--brass-soft); }
/* sequential gold pulse: 4, then 1, then 1 */
.sudoku-cell.pulse-1 { animation: goldPulse 0.6s var(--ease) 0s 1; }
.sudoku-cell.pulse-2 { animation: goldPulse 0.6s var(--ease) 0.45s 1; }
.sudoku-cell.pulse-3 { animation: goldPulse 0.6s var(--ease) 0.9s 1; }
@keyframes goldPulse {
  0% { transform: scale(1); box-shadow: inset 0 0 18px -6px var(--brass-glow); }
  45% { transform: scale(1.12); box-shadow: 0 0 28px var(--brass-glow), inset 0 0 18px -2px var(--brass-glow); }
  100% { transform: scale(1); box-shadow: inset 0 0 18px -6px var(--brass-glow); }
}
.sudoku.is-collapsing { animation: sudokuCollapse 1s var(--ease-in-out) forwards; }
@keyframes sudokuCollapse {
  0% { transform: scale(1) rotateX(0); opacity: 1; }
  60% { transform: scale(0.35) rotateX(28deg); opacity: 0.8; }
  100% { transform: scale(0.03) rotateX(62deg); opacity: 0; filter: blur(3px); }
}

/* Numpad */
.numpad { display: flex; gap: 8px; }
.numpad__btn {
  width: clamp(40px, 12vw, 52px); aspect-ratio: 1; font-family: var(--font); font-size: 1.1rem;
  color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong);
  border-radius: 8px; cursor: pointer;
  transition: background var(--beat) var(--ease), border-color var(--beat) var(--ease), transform 0.15s var(--ease);
}
.numpad__btn:hover, .numpad__btn:focus-visible { background: rgba(200,162,74,0.12); border-color: var(--brass-soft); }
.numpad__btn:active { transform: scale(0.94); }
.numpad__btn--clear { color: var(--paper-faint); }

/* ---------------------- Unlock overlay ---------------------- */
.unlock {
  position: fixed; inset: 0; z-index: 48; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(200,162,74,0.05), var(--obsidian) 70%);
  opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
.unlock.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
.unlock__line {
  font-size: clamp(1.3rem, 4vw, 2.2rem); color: var(--paper); letter-spacing: 0.02em; text-align: center;
  opacity: 0; transform: translateY(8px);
}
.unlock__line.is-show { animation: unlockLine 1.4s var(--ease) forwards; }
@keyframes unlockLine { 0% { opacity: 0; transform: translateY(8px); } 22% { opacity: 1; transform: translateY(0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------------------- The Dive ---------------------- */
.dive {
  position: fixed; inset: 0; z-index: 50; opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(61,169,252,0.04), var(--obsidian) 70%);
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; perspective: 800px;
}
.dive.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.dive__canvas { width: 100%; height: 100%; display: block; }

/* brass ring becomes a passing halo; blue star a distant target */
.dive-halo {
  position: absolute; left: 50%; top: 50%; width: 40vmin; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--brass); transform: translate(-50%, -50%) scale(0.1); opacity: 0;
  box-shadow: 0 0 40px var(--brass-glow);
}
.dive.is-active .dive-halo { animation: haloPass 2.4s var(--ease-in-out) 0.2s 1; }
@keyframes haloPass { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.05); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(6); } }
.dive-target {
  position: absolute; left: 50%; top: 50%; width: 6px; aspect-ratio: 1; border-radius: 50%;
  background: var(--star); box-shadow: 0 0 18px 5px var(--star-glow); transform: translate(-50%,-50%) scale(0.3); opacity: 0;
}
.dive.is-active .dive-target { animation: targetApproach 2.6s var(--ease-in) 1; }
@keyframes targetApproach { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); } 40% { opacity: 0.9; } 90% { opacity: 1; transform: translate(-50%,-50%) scale(2.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(5); } }

/* barely-there word fragments */
.dive-fragments { position: absolute; inset: 0; pointer-events: none; }
.dive-fragment {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-ui); letter-spacing: 0.3em; text-transform: uppercase;
  font-size: clamp(11px, 2vw, 15px); color: var(--paper); opacity: 0; white-space: nowrap;
}
.dive.is-active .dive-fragment { animation: fragmentPass 1.8s var(--ease-in) 1 both; }
.dive-fragment:nth-child(1) { transform: translate(-160%, -260%); animation-delay: 0.15s; }
.dive-fragment:nth-child(2) { transform: translate(70%, -180%);  animation-delay: 0.45s; }
.dive-fragment:nth-child(3) { transform: translate(-200%, 120%); animation-delay: 0.8s; }
.dive-fragment:nth-child(4) { transform: translate(120%, 200%);  animation-delay: 1.05s; }
.dive-fragment:nth-child(5) { transform: translate(-50%, -50%);  animation-delay: 1.3s; letter-spacing: 0.5em; }
@keyframes fragmentPass { 0% { opacity: 0; } 40% { opacity: 0.16; } 100% { opacity: 0; } }

/* transform/opacity plane wipes layered over the warp */
.dive__plane { position: absolute; inset: -20%; opacity: 0; transform: scale(0.2); transform-origin: 50% 50%; pointer-events: none; }
.dive__plane--paper { background: radial-gradient(ellipse at 50% 50%, rgba(236,228,212,0.9), rgba(236,228,212,0) 62%), repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0 2px, transparent 2px 4px); }
.dive__plane--glass { background: radial-gradient(ellipse at 50% 45%, rgba(61,169,252,0.35), rgba(61,169,252,0) 60%); }
.dive.is-active .dive__plane--paper { animation: planeThrough 1.2s var(--ease-in-out) 1.5s both; }
.dive.is-active .dive__plane--glass { animation: planeThrough 1.3s var(--ease-in-out) 1.9s both; }
@keyframes planeThrough { 0% { opacity: 0; transform: scale(0.18); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: scale(3.6); } }

/* ---------------------- Final 411 ---------------------- */
.scene--final { gap: 0; }
.final__inner { text-align: center; }
.final__number {
  position: relative;
  font-size: clamp(5rem, 26vw, 16rem); line-height: 0.9; font-weight: 500; letter-spacing: -0.03em; margin: 0;
  color: var(--paper); text-shadow: 0 0 60px rgba(236,228,212,0.12);
  background: linear-gradient(180deg, var(--paper), #b9b0a0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.scene--final.is-active .final__number { animation: finalRise 1.6s var(--ease) both, finalGlow 3.6s var(--ease-in-out) 0.9s 1; }
.final__caption { font-family: var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase; font-size: clamp(11px, 1.6vw, 13px); color: var(--brass); margin: 1.4em 0 0; }
.scene--final.is-active .final__caption { animation: finalRise 1.6s var(--ease) 0.25s both; }
.final__more { font-style: italic; color: var(--paper-faint); font-size: clamp(0.85rem, 1.6vw, 1rem); margin: 0.8em 0 0; }
.scene--final.is-active .final__more { animation: finalRise 1.6s var(--ease) 0.5s both; }
.final__replay {
  margin-top: 2.6em; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper-faint); background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 20px; cursor: pointer;
  transition: color var(--beat) var(--ease), border-color var(--beat) var(--ease);
}
.final__replay:hover, .final__replay:focus-visible { color: var(--paper); border-color: var(--brass-soft); }
@keyframes finalRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes finalGlow { 0%,100% { filter: drop-shadow(0 0 22px rgba(236,228,212,0.10)); } 50% { filter: drop-shadow(0 0 44px rgba(200,162,74,0.34)); } }

/* ---------------------- Focus visibility ---------------------- */
:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; border-radius: 3px; }

/* =============================================================
   CHAPTERS 2–5 — shared chrome + per-chapter puzzles
   ============================================================= */
.scene--directory, .scene--archive, .scene--engine, .scene--signal {
  overflow-y: auto; justify-content: safe center;
}
.chapter-tag {
  font-family: var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase;
  font-size: clamp(9px, 1.3vw, 11px); color: var(--paper-faint); margin: 0;
}
.chapter-title {
  font-size: clamp(1.3rem, 3.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.01em;
  margin: 0; text-align: center; max-width: 22ch; text-wrap: balance;
}
.chapter-copy {
  font-family: var(--font-ui); font-size: clamp(0.85rem, 1.7vw, 1rem);
  color: var(--paper-dim); margin: 0; text-align: center; max-width: 36ch;
}
.chapter-status {
  font-family: var(--font-ui); font-size: clamp(12px, 1.6vw, 14px); letter-spacing: 0.03em;
  color: var(--brass); min-height: 1.2em; margin: 0; text-align: center; max-width: 34ch;
}
.chapter-status.is-bad { color: var(--bad); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ---------- Chapter 2 — Directory ---------- */
.dir-cards { display: flex; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; justify-content: center; max-width: 680px; }
.dir-card {
  position: relative; width: clamp(120px, 40vw, 150px); min-height: 124px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--paper);
  font-family: var(--font); cursor: pointer;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease);
}
.dir-card:hover, .dir-card:focus-visible { border-color: var(--brass-soft); transform: translateY(-3px); box-shadow: 0 14px 40px -20px var(--brass-glow); }
.dir-card__name { font-size: 1.1rem; }
.dir-card__hint { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-faint); }
.dir-card__order { position: absolute; top: 8px; right: 11px; font-family: var(--font-ui); font-size: 13px; color: var(--brass); opacity: 0; transition: opacity .3s var(--ease); }
.dir-card.is-picked { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass-soft), 0 0 24px -10px var(--brass-glow); }
.dir-card.is-picked .dir-card__order { opacity: 1; }
.dir-card.is-wrong { animation: shake .4s var(--ease); border-color: var(--bad); }
.dir-cards.is-folding .dir-card { transform: scaleY(0.03); opacity: 0; }

/* ---------- Chapter 3 — Archive ---------- */
.archive-stage { position: relative; width: min(92vw, 560px); height: min(54vh, 360px); }
.archive-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.archive-lines polyline { fill: none; stroke: var(--star); stroke-width: 1.5; opacity: .65; filter: drop-shadow(0 0 6px var(--star-glow)); }
.frag {
  position: absolute; transform: translate(-50%, -50%); max-width: 42%;
  padding: 10px 12px; background: rgba(20,23,29,.72); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--paper-dim); font-family: var(--font);
  font-size: clamp(.78rem, 1.6vw, .95rem); cursor: pointer; backdrop-filter: blur(4px); text-align: left;
  transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), opacity .5s var(--ease);
}
.frag:hover, .frag:focus-visible { color: var(--paper); border-color: var(--brass-soft); }
.frag.is-picked { color: var(--paper); border-color: var(--star); box-shadow: 0 0 22px -8px var(--star-glow); }
.frag__order { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; color: var(--star); margin-top: 4px; opacity: 0; }
.frag.is-picked .frag__order { opacity: 1; }

/* ---------- Chapter 4 — Engine ---------- */
.engine { position: relative; width: min(76vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.engine__line { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 2px; height: 18px; background: var(--paper); opacity: .6; z-index: 6; }
.eng-ring { position: absolute; border-radius: 50%; border: 2px solid var(--brass-soft); cursor: pointer; }
.eng-ring--1 { inset: 0; }
.eng-ring--2 { inset: 16%; }
.eng-ring--3 { inset: 32%; border-color: var(--brass); }
.eng-ring__mark { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 8px; height: 12px; border-radius: 2px; background: var(--star); box-shadow: 0 0 10px var(--star-glow); }
.eng-ring--2 .eng-ring__mark { background: var(--brass); box-shadow: 0 0 10px var(--brass-glow); }
.eng-ring--3 .eng-ring__mark { background: var(--paper); box-shadow: 0 0 10px rgba(236,228,212,.4); }
.eng-ring.is-locked { border-color: var(--brass); box-shadow: 0 0 24px -8px var(--brass-glow); }
.engine__halo { position: absolute; inset: 8%; border-radius: 50%; border: 2px solid var(--star); opacity: 0; transform: scale(.6); }
/* rings stay brass; only the halo blooms blue — blue is kept scarce as "the signal" */
.engine.is-synced .eng-ring { border-color: var(--brass); }
.engine.is-synced .engine__halo { animation: haloForm 1s var(--ease) forwards; }
@keyframes haloForm { to { opacity: .85; transform: scale(1); } }
.eng-locks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.eng-lock {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease);
}
.eng-lock:hover, .eng-lock:focus-visible { background: rgba(200,162,74,.12); border-color: var(--brass-soft); }
.eng-lock.is-done { opacity: .4; }

/* ---------- Chapter 5 — Signal Room ---------- */
.receiver { position: relative; width: min(70vw, 260px); height: 72px; display: grid; place-items: center; }
.receiver__wave {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(61,169,252,.10) 6px 7px);
  mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%); opacity: .5;
}
.receiver.is-scattered .receiver__wave { animation: staticJitter .35s steps(3) 2; }
@keyframes staticJitter { 0%{transform:translateX(0)} 33%{transform:translateX(-3px)} 66%{transform:translateX(3px)} 100%{transform:translateX(0)} }
.receiver__star { width: 6px; height: 6px; border-radius: 50%; background: var(--star); box-shadow: 0 0 14px 4px var(--star-glow); opacity: .5; transition: opacity .6s var(--ease), box-shadow .6s var(--ease); }
.receiver.is-tuned .receiver__star { opacity: 1; box-shadow: 0 0 24px 9px var(--star-glow); }
.receiver__ghost { position: absolute; font-size: 2rem; color: var(--paper); opacity: .09; letter-spacing: .1em; transition: opacity .6s var(--ease); }
.receiver.is-tuned .receiver__ghost { opacity: 0; }
.dials { display: flex; gap: clamp(10px, 3vw, 24px); }
.dial { display: flex; flex-direction: column; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; font-family: var(--font); color: var(--paper); }
.dial__face {
  width: clamp(64px, 16vw, 86px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--brass-soft); display: grid; place-items: center;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.05), transparent 60%), var(--graphite);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dial:hover .dial__face, .dial:focus-visible .dial__face { border-color: var(--brass); box-shadow: 0 0 22px -8px var(--brass-glow); }
.dial__label { font-family: var(--font-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-faint); }
.dial.is-set .dial__face { border-color: var(--brass); }

/* ---------- Final additions ---------- */
.final__quiet { font-family: var(--font-ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-dim); margin: 1.6em 0 0; }
.scene--final.is-active .final__quiet { animation: finalRise 1.6s var(--ease) .75s both; }
.final__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 2.4em; }
.final__actions .final__replay { margin-top: 0; }
.final__replay--ghost { opacity: .7; }

/* =============================================================
   THE 411 PARLOR — post-puzzle content counter
   ============================================================= */
.final__approach {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--obsidian); background: var(--brass); border: 1px solid var(--brass);
  border-radius: 999px; padding: 11px 26px; cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.final__approach:hover, .final__approach:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 34px -14px var(--brass-glow); }

.scene--lab { overflow-y: auto; overflow-x: hidden; justify-content: safe center; }
.lab { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 24px); width: 100%; max-width: 1040px; }
.lab__head { text-align: center; }
.lab__title { font-size: clamp(1.5rem, 4.5vw, 2.4rem); font-weight: 500; letter-spacing: -.01em; margin: .3em 0 .2em; }
.lab__sub { font-family: var(--font-ui); color: var(--paper-dim); font-size: clamp(.85rem, 1.7vw, 1rem); margin: 0; }
/* Order ticket — a warm paper counter-slip, perforated, lightly stamped */
.ticket {
  position: relative; display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--font-ui); padding: 8px 18px; border-radius: 2px; transform: rotate(-1.3deg);
  color: #2a2620;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #efe7d6, #ddd1b9);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4);
}
.ticket::before, .ticket::after { /* perforated torn edges */
  content: ""; position: absolute; top: 0; bottom: 0; width: 5px;
  background: radial-gradient(circle at center, var(--obsidian) 0 1.7px, transparent 2px) 0 1px / 5px 7px repeat-y;
}
.ticket::before { left: -2px; } .ticket::after { right: -2px; }
.ticket__label { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #6a5f4a; }
.ticket__no { font-family: var(--font); font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; color: #17130d; }
.ticket__count { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5e5341; }
.ticket.is-stamp { animation: ticketStamp .5s var(--ease); }
@keyframes ticketStamp { 0% { transform: rotate(-1.3deg) scale(1); } 30% { transform: rotate(-1.3deg) scale(1.09); } 100% { transform: rotate(-1.3deg) scale(1); } }
/* bench: technician + spectrophotometer */
.lab__bench { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 36px); align-items: center; width: 100%; padding-bottom: 16px; border-bottom: 1px solid var(--brass-soft); }
.spectro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spectro__screen { position: relative; width: 100%; height: clamp(200px, 30vh, 260px); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(61,169,252,.05), transparent 70%), #0c0e13; box-shadow: inset 0 0 30px rgba(0,0,0,.5); }
.spectro__canvas { width: 100%; height: 100%; display: block; }
.spectro__readout { position: absolute; top: 8px; right: 10px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .03em; color: var(--paper); background: rgba(9,10,14,.65); padding: 3px 8px; border-radius: 4px; pointer-events: none; }
.spectro__legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend__btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 12px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.legend__btn::before { content: ""; width: 11px; height: 3px; border-radius: 2px; }
.legend--R::before { background: #3da9fc; } .legend--T::before { background: #e7dcc4; } .legend--A::before { background: #c0734f; }
.legend__btn.is-off { opacity: .42; }
.legend__btn:hover, .legend__btn:focus-visible { border-color: var(--brass-soft); }
.spectro__summary { font-family: var(--font-ui); font-size: 12px; color: var(--paper-dim); margin: 0; }

/* ---- Attendant face ---- */
.attendant-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.attendant { width: clamp(120px, 30vw, 176px); height: auto; outline: none; cursor: default; touch-action: none; }
.att-head { fill: #171b22; stroke: var(--brass-soft); stroke-width: 1.5; }
/* eye openness lives in a var so blink and mood compose instead of fighting */
.attendant { --eye-open: 1; }
.att-eye__white { fill: var(--paper); transform: scaleY(var(--eye-open)); transition: transform .22s var(--ease); transform-box: fill-box; transform-origin: center; }
.att-eye__pupil { fill: #14171d; transition: transform .2s cubic-bezier(.2,.7,.3,1); transform-box: fill-box; transform-origin: center; }
.att-eye__lid { display: none; }
.attendant.is-blink .att-eye__white, .attendant.is-blink .att-eye__pupil { animation: attBlink .17s ease; }
@keyframes attBlink { 50% { transform: scaleY(calc(var(--eye-open) * .1)); } }
/* per-mood eye openness — a warm squint when pleased, wider when curious */
.attendant[data-mood="pleased"], .attendant[data-mood="delighted"], .attendant[data-mood="cheerful"] { --eye-open: .84; }
.attendant[data-mood="interested"] { --eye-open: 1.08; }
.attendant[data-mood="sleepy"] { --eye-open: .66; }
/* order-placed reaction — a small, pleased step-forward bob */
.attendant.is-served { animation: attBob .6s var(--ease); }
@keyframes attBob { 0% { transform: translateY(0) scale(1); } 32% { transform: translateY(-6px) scale(1.045); } 100% { transform: translateY(0) scale(1); } }
.att-brow { stroke: var(--brass-soft); stroke-width: 3; stroke-linecap: round; transition: transform .25s var(--ease); transform-box: fill-box; transform-origin: center; }
/* d isn't reliably animatable cross-browser; a tiny transform settle (set in JS)
   makes each mood swap read as motion, not a hard cut */
.att-mouth { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; transition: transform .22s var(--ease); transform-box: fill-box; transform-origin: center; }
.attendant:focus-visible .att-head { stroke: var(--star); }
.attendant__say { font-style: italic; color: var(--paper-dim); font-size: clamp(.85rem, 1.7vw, 1rem); text-align: center; max-width: 26ch; margin: 0; min-height: 1.4em; }

.lab__prompt { font-family: var(--font-ui); font-size: clamp(.85rem, 1.6vw, .98rem); color: var(--paper-dim); text-align: center; max-width: 52ch; margin: 0; }

/* ---- panels (work + controls + notes) ---- */
.panel { background: rgba(20,23,29,.5); border: 1px solid var(--line-strong); border-radius: 10px; padding: 14px; min-width: 0; }
.panel__title { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel__hint { font-size: 9px; letter-spacing: .12em; color: var(--paper-faint); text-transform: none; }
.panel__btn, .preset, .ed-btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: .07em; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 12px; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); }
.panel__btn:hover, .preset:hover, .ed-btn:hover, .panel__btn:focus-visible, .preset:focus-visible, .ed-btn:focus-visible { background: rgba(200,162,74,.12); border-color: var(--brass-soft); }
.panel__btn { margin-top: 10px; width: 100%; }

.lab__work { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 14px; width: 100%; align-items: start; }

/* film menu (the order menu) */
.film-menu { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.film { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 11px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--paper); cursor: pointer; font-family: var(--font); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.film:hover, .film:focus-visible { transform: translateX(2px); border-color: var(--brass-soft); }
.film:active { transform: scale(.98); }
.film__top { display: flex; align-items: center; gap: 8px; }
.film__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 2px rgba(255,255,255,.3); }
.film__name { font-size: .95rem; }
.film__meta { font-family: var(--font-ui); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); }
.film__nk { font-family: var(--font-ui); font-size: 10px; color: var(--paper-dim); }

/* stack cross-section */
.stack-viz { display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.slab { font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-faint); text-align: center; padding: 7px; border-radius: 4px; background: rgba(255,255,255,.02); border: 1px dashed var(--line-strong); }
.slab--substrate { background: rgba(236,228,212,.04); }
.layer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; min-height: 20px; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; color: #0d0f14; cursor: pointer; overflow: hidden; transition: box-shadow .2s var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.18); }
.layer.is-selected { box-shadow: 0 0 0 2px var(--brass), 0 0 18px -6px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.layer.is-off { opacity: .55; filter: grayscale(.45); }
.layer.is-new { animation: layerIn .4s var(--ease); }
@keyframes layerIn { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.layer__name { font-family: var(--font); font-size: .82rem; font-weight: 600; text-shadow: 0 1px 1px rgba(255,255,255,.3); }
.layer__d { font-family: var(--font-ui); font-size: 10px; color: rgba(0,0,0,.62); white-space: nowrap; }

/* layer editor */
.editor__hint { font-family: var(--font-ui); font-size: 12px; color: var(--paper-faint); margin: 0; line-height: 1.5; }
.ed-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ed-row > label, .ed-row span > label { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); }
.ed-row--split { flex-direction: row; gap: 12px; }
.ed-row--split span { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ed-input, .ed-num, .ctl-grid input, .ctl-grid select { font-family: var(--font-ui); font-size: 13px; color: var(--paper); background: #0e1116; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 9px; width: 100%; }
.ed-input:focus, .ed-num:focus, .ctl-grid input:focus, .ctl-grid select:focus { outline: 2px solid var(--star); outline-offset: 1px; }
.ed-range { width: 100%; accent-color: var(--brass); }
.ed-facts { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-ui); font-size: 11px; color: var(--paper-dim); margin: 6px 0 10px; }
.ed-facts strong { color: var(--paper); font-weight: 500; }
.ed-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.ed-toggle { font-family: var(--font-ui); font-size: 11px; color: var(--paper-dim); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ed-btn--warn { color: var(--bad); border-color: rgba(201,139,122,.4); }

/* controls + presets */
.lab__controls { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; width: 100%; align-items: start; }
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
.ctl-grid label { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-faint); }
.preset-menu { display: flex; flex-direction: column; gap: 7px; }
.preset { width: 100%; text-align: left; }

/* notes + accuracy */
.notes { width: 100%; }
.notes__body { font-family: var(--font); font-size: 1rem; color: var(--paper); line-height: 1.5; margin: 0; }
.lab__accuracy { font-family: var(--font-ui); font-size: 11px; line-height: 1.5; color: var(--paper-faint); max-width: 64ch; text-align: center; margin: 0; }
.lab__utility { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- Utility ---- */
.lab__util { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.lab__util:hover, .lab__util:focus-visible { background: rgba(200,162,74,.12); border-color: var(--brass-soft); }
.lab__util--ghost { color: var(--paper-faint); }

/* entrance: the bench rises like the 411 room unfolding into a lab */
@keyframes labRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.scene--lab.is-active .lab__head   { animation: labRise .6s var(--ease) both; }
.scene--lab.is-active .lab__bench  { animation: labRise .7s var(--ease) .06s both; }
.scene--lab.is-active .lab__work   { animation: labRise .7s var(--ease) .12s both; }
.scene--lab.is-active .lab__controls { animation: labRise .7s var(--ease) .18s both; }

@media (max-width: 900px) {
  .lab__work { grid-template-columns: 1fr; }
  .lab__controls { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lab__bench { grid-template-columns: 1fr; justify-items: center; }
  .spectro { width: 100%; }
}

/* =============================================================
   LAB TABS + TOOLING/RUN PLANNER + SWEEP STUDIO
   ============================================================= */
.lab-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; width: 100%; border-bottom: 1px solid var(--line-strong); }
/* the tab bar must always sit above canvases / technician / decorative layers and accept pointer input */
.lab-tabs, .lab-tabs .lab-tab, [role="tablist"], [role="tab"] { position: relative; z-index: 20; pointer-events: auto; }
.lab-tab { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; color: var(--paper-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease); }
.lab-tab:hover, .lab-tab:focus-visible { color: var(--paper); }
.lab-tab.is-active { color: var(--brass); border-bottom-color: var(--brass); }
.tab-pane { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 24px); position: relative; z-index: 1; }
.tab-pane[hidden] { display: none; }

.seg { display: flex; gap: 4px; background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; flex-wrap: wrap; justify-content: center; }
.seg__btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em; color: var(--paper-dim); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.seg__btn.is-active { background: rgba(200,162,74,.16); color: var(--paper); }
.mode-tag { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0; }
.mode-pane { width: 100%; }
.mode-pane[hidden] { display: none; }
.mode-note { font-family: var(--font-ui); font-size: 11px; color: var(--paper-faint); margin: 8px 0 0; line-height: 1.5; }
.mode-pane .ctl-grid { margin-bottom: 10px; }

.table-wrap { width: 100%; overflow-x: auto; margin: 10px 0; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 12px; min-width: 480px; font-variant-numeric: tabular-nums; }
.data-table th { text-align: left; color: var(--paper-faint); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.data-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--paper); }
.data-table--run { min-width: 560px; }
.row-del { background: none; border: 0; color: var(--paper-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.row-del:hover, .row-del:focus-visible { color: var(--bad); background: rgba(201,139,122,.12); }
.run-in { font-family: var(--font-ui); font-size: 12px; color: var(--paper); background: #0e1116; border: 1px solid var(--line-strong); border-radius: 4px; padding: 7px 6px; min-height: 34px; }
.geo-cap { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 8px 0 -2px; }
.stat-line { font-family: var(--font-ui); font-size: 12px; color: var(--paper-dim); margin: 6px 0 0; }
.stat-line.is-bad { color: var(--bad); }

.ctl-grid--tight { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.ctl-mini { font-size: 10px; color: var(--paper-faint); letter-spacing: .08em; text-transform: none; }
.io-check { flex-direction: row !important; align-items: center; gap: 7px; text-transform: none; }
.block-label { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-faint); margin-top: 10px; }
.block-label input, .block-label select { font-family: var(--font-ui); font-size: 13px; color: var(--paper); background: #0e1116; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 9px; }

.geo-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.geo-vis { display: flex; flex-direction: column; gap: 8px; }
.geo-canvas { width: 100%; height: 130px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0c0e13; }

.sweep-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; align-items: start; }
.sweep-canvas { width: 100%; height: 300px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0c0e13; touch-action: none; display: block; }
.sweep-canvas--heat { height: 120px; margin-top: 8px; }
.nogo-list, .saved-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.nogo-row, .saved-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-size: 11px; color: var(--paper-dim); background: rgba(20,23,29,.5); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
.saved-row .ed-btn { flex: 1; text-align: left; }

@media (max-width: 900px) { .geo-wrap, .sweep-wrap { grid-template-columns: 1fr; } }

/* ---- Thermal Dwell ---- */
.thWarn { font-family: var(--font-ui); font-size: 12px; color: var(--bad); margin: 0; min-height: 1em; text-align: center; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; width: 100%; align-items: start; }
.th-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; align-items: start; }
.th-canvas { width: 100%; height: 260px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0c0e13; display: block; touch-action: none; }
.th-canvas--trace { height: 150px; }
@media (max-width: 760px) { .th-maps { grid-template-columns: 1fr; } }

/* ---- Calibrate confidence dashboard ---- */
.cal-dash { display: flex; flex-direction: column; gap: 6px; }
.cal-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 11px; background: rgba(20,23,29,.5); border: 1px solid var(--line); border-radius: 6px; }
.cal-key { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); }
.cal-val { font-family: var(--font-ui); font-size: 12px; color: var(--brass); text-align: right; }

/* =============================================================
   PRODUCT PRESET LIBRARY (Optics beginner shelf)
   ============================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.optics-presets { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.presets-head { text-align: center; }
.presets-title { font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 500; letter-spacing: -.01em; margin: .25em 0 .2em; }
.presets-sub { font-family: var(--font-ui); color: var(--paper-dim); font-size: clamp(.85rem, 1.7vw, 1rem); margin: 0 auto; max-width: 60ch; }
.presets-bar { display: flex; justify-content: center; }
.mode-toggle { /* reuses .seg */ }
.preset-filters { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.filter-chip { font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em; color: var(--paper-dim); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.filter-chip:hover, .filter-chip:focus-visible { border-color: var(--brass-soft); color: var(--paper); }
.filter-chip.is-active { background: rgba(200,162,74,.16); color: var(--brass); border-color: var(--brass-soft); }

.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; width: 100%; }
.preset-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong); border-radius: 10px; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.preset-card:hover, .preset-card:focus-within { transform: translateY(-2px); border-color: var(--brass-soft); box-shadow: 0 14px 36px -22px var(--brass-glow); }
.preset-card.is-loaded { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass-soft), 0 0 26px -12px var(--brass-glow); }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pc-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.pc-conf { font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); text-align: right; white-space: nowrap; }
.pc-title { font-size: 1.02rem; font-weight: 500; margin: 0; }
.pc-stack { display: flex; flex-direction: column; gap: 1px; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.18); }
.pc-stack__air, .pc-stack__sub { font-family: var(--font-ui); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-faint); text-align: center; padding: 1px 0; }
.pc-stack__layer { height: 7px; border-radius: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.pc-stack__sub { color: var(--paper-dim); border-top: 1px solid var(--brass-soft); margin-top: 2px; padding-top: 3px; }
.pc-outcome { font-family: var(--font-ui); font-size: .82rem; color: var(--paper-dim); line-height: 1.45; margin: 0; }
.pc-why { font-family: var(--font-ui); font-size: 11px; }
.pc-why summary { cursor: pointer; color: var(--brass); letter-spacing: .04em; }
.pc-why p { color: var(--paper-dim); margin: 6px 0 0; line-height: 1.5; }
.pc-try { font-family: var(--font-ui); font-size: 10px; color: var(--paper-faint); margin: 0; line-height: 1.4; }
.pc-load { margin-top: auto; }

.preset-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.preset-actions .ed-btn.is-active { background: rgba(61,169,252,.14); border-color: #3da9fc; }
.preset-explain { width: 100%; }
.preset-explain:empty { display: none; }
.pe-card { padding: 16px 18px; border: 1px solid var(--line-strong); border-left: 3px solid var(--brass); border-radius: 8px; background: rgba(20,23,29,.5); }
.pe-title { font-size: 1.1rem; margin: 0 0 .5em; }
.pe-sec { margin: 0 0 .55em; font-family: var(--font-ui); font-size: .9rem; line-height: 1.5; color: var(--paper-dim); }
.pe-sec b { color: var(--brass); font-weight: 500; letter-spacing: .03em; }
.glossary { font-family: var(--font-ui); font-size: 12px; color: var(--paper-dim); }
.glossary summary { cursor: pointer; color: var(--brass); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.glossary__list { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.glossary__list b { color: var(--paper); }
.preset-disclaimer { font-family: var(--font-ui); font-size: 11px; line-height: 1.5; color: var(--paper-faint); text-align: center; max-width: 68ch; margin: 0 auto; }

/* Beginner mode: simplify the first impression (tools still reachable via Lab mode) */
#paneOptics.optics-beginner .lab__work,
#paneOptics.optics-beginner .opt-advanced { display: none; }

/* toast */
.lab-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); z-index: 70; font-family: var(--font-ui); font-size: 13px; letter-spacing: .04em; color: var(--paper); background: rgba(20,23,29,.92); border: 1px solid var(--brass-soft); border-radius: 999px; padding: 10px 20px; box-shadow: 0 12px 34px -16px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.lab-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) { .preset-grid { grid-template-columns: 1fr; } }

/* ---------------------- Begin gate ---------------------- */
.clue-star, .clue-ring { transition: opacity 1.1s var(--ease); }
.scene--arrival:not(.is-begun) .clue-star,
.scene--arrival:not(.is-begun) .clue-ring { opacity: 0; pointer-events: none; }

/* ---------------------- No-JS fallback ---------------------- */
.scene--final:target { opacity: 1; visibility: visible; transform: none; }

/* ---------------------- Responsive ---------------------- */
@media (max-width: 640px) {
  .clue-star { top: 16%; right: 12%; }
  .clue-ring { bottom: 13%; left: 50%; transform: translateX(-50%); }
  .reveal { bottom: 28%; }
  .keytrack { gap: 8px; }
  .key-slot { min-width: 50px; padding: 6px 9px; }
  .creed { bottom: 46px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .threshold { width: clamp(110px, 16vmin, 160px); }
  .scene { gap: 10px; }
  .clue-star { top: 12%; right: 8%; }
  .clue-ring { bottom: 8%; left: 8%; transform: none; width: 72px; }
  .reveal { bottom: 12%; }
  .keytrack { top: 8px; }
  .creed { display: none; }
}

/* Final room sits in stillness — pause the ambient background drift */
body.is-final .bg__grid, body.is-final .bg__sweep { animation-play-state: paused; }

/* Archive: give fragments more room and smaller footprint on phones so they
   never overlap or run off the fixed-size stage */
@media (max-width: 640px) {
  .archive-stage { height: min(66vh, 460px); }   /* taller -> more vertical spacing */
  .frag { max-width: 40%; font-size: .76rem; padding: 8px 10px; } /* smaller footprint */
}

/* ---------------------- Reduced motion ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.18s !important;
  }
  .bg__grid, .bg__sweep, .clue-star__core, .awake-square { animation: none !important; }
  .scene { transition: opacity 0.2s linear, visibility 0s; transform: none; }
  .scene.is-active { transform: none; }
  .sudoku.is-collapsing { animation: none !important; opacity: 0; }
  .signal-trail { transition: opacity 0.18s linear !important; }
  .layer.is-new { animation: none !important; } /* layers appear instantly */
  .scene--lab.is-active .lab__head,
  .scene--lab.is-active .lab__bench,
  .scene--lab.is-active .lab__work,
  .scene--lab.is-active .lab__controls,
  .attendant.is-served, .ticket.is-stamp { animation: none !important; }
  /* face mood/eye/brow changes are instant under reduced motion */
  .att-eye__white, .att-eye__pupil, .att-brow, .att-mouth { transition: none !important; }
}

/* ============================ THE INSTRUMENT ROOMS ============================ */
.rooms { max-width: 1100px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 32px) 60px; }
.rooms__head { text-align: center; margin-bottom: 22px; }
.rooms__title { font-size: clamp(1.3rem, 4.5vmin, 2.1rem); color: var(--paper); margin: 8px 0 6px; }
.rooms__sub { color: var(--paper-dim); font-style: italic; margin: 0; }
.rooms-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; border-bottom: 1px solid var(--brass-soft); padding-bottom: 10px; margin-bottom: 22px; position: relative; z-index: 20; }
.room-tab { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--paper-dim); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 14px; cursor: pointer; position: relative; z-index: 20; }
.room-tab:hover { color: var(--paper); border-color: var(--brass-soft); }
.room-tab.is-active { color: var(--graphite); background: var(--brass); border-color: var(--brass); }
.room-tab:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.room-pane { animation: roomfade var(--beat) var(--ease); }
.room-pane[hidden] { display: none; }
@keyframes roomfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* hub cards */
.room-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.room-card { text-align: left; background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong); border-left: 3px solid var(--brass-soft); border-radius: 6px; padding: 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--beat) var(--ease), transform var(--beat) var(--ease); }
.room-card:hover { border-color: var(--brass); border-left-color: var(--brass); transform: translateY(-2px); }
.room-card:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.room-card__n { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--brass); }
.room-card__t { font-size: 1.05rem; color: var(--paper); }
.room-card__d { font-size: 0.85rem; color: var(--paper-dim); }
.obs-record { margin-top: 8px; }
.ctl-grid--tight { gap: 8px; }
.ctl-grid--tight label { font-size: 0.78rem; }

/* lens bench */
.lb-canvas { width: 100%; height: 240px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--obsidian); display: block; }
.lb-modes .seg__btn { font-size: 0.74rem; padding: 6px 9px; }
.ex-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ex-btn { font-family: var(--font-ui); font-size: 0.78rem; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--brass-soft); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ex-btn:hover { background: var(--brass); color: var(--graphite); }
.ex-btn:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

/* probe room */
.probe-sub { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); margin: 12px 0 6px; }
.probe-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; padding: 12px; background: linear-gradient(160deg, #0c1410, #0a0d12); border: 1px solid var(--line-strong); border-radius: 6px; }
.probe-node { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--brass-soft); border-radius: 4px; padding: 9px 4px; cursor: pointer; min-height: 40px; }
.probe-node:hover { border-color: var(--brass); }
.probe-node.is-sel { background: var(--star); color: var(--graphite); border-color: var(--star); box-shadow: 0 0 12px var(--star-glow); }
.probe-node:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.dmm-display { font-family: "SFMono-Regular", "Consolas", ui-monospace, monospace; font-size: 1.5rem; color: var(--star); background: #06140f; border: 1px solid var(--brass-soft); border-radius: 4px; padding: 14px 16px; margin: 8px 0; text-shadow: 0 0 8px var(--star-glow); }
.scope-canvas { width: 100%; height: 180px; background: #05140d; border: 1px solid var(--brass-soft); border-radius: 4px; display: block; margin-bottom: 8px; }

/* theory theater */
.episode-list { display: flex; flex-direction: column; gap: 6px; }
.episode-btn { text-align: left; font-family: var(--font-ui); font-size: 0.82rem; color: var(--paper-dim); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 9px 12px; cursor: pointer; }
.episode-btn:hover { color: var(--paper); border-color: var(--brass-soft); }
.episode-btn.is-active { color: var(--graphite); background: var(--brass); border-color: var(--brass); }
.episode-btn:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.th-canvas { width: 100%; height: 200px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 4px; display: block; margin-bottom: 8px; }

@media (max-width: 620px) {
  .fault-grid, .cabinet-grid { grid-template-columns: 1fr; }
  .room-cards { grid-template-columns: 1fr 1fr; }
  .lb-canvas, .th-canvas { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .room-pane { animation: none; }
  .room-card { transition: none; }
}

/* ===================== INSTRUMENT WORKSPACE (Cabinet / Fault Atlas) ===================== */
.iw-sub { color: var(--paper-dim); font-style: italic; margin: 0 0 14px; }
.iw-shell { display: grid; grid-template-columns: 230px 1fr 340px; gap: 14px; }
@media (min-width: 901px) { .iw-shell { height: clamp(540px, calc(100dvh - 13rem), 820px); overflow: hidden; } }
.iw-rail, .iw-browser, .iw-inspector { background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong); border-radius: 8px; }
.iw-rail { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.iw-rail__title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0; }
.iw-rail__lbl { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); margin: 4px 0 0; }
.iw-search { font-family: var(--font-ui); font-size: 0.85rem; color: var(--paper); background: var(--obsidian); border: 1px solid var(--brass-soft); border-radius: 6px; padding: 8px 12px; width: 100%; }
.iw-search:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; }
.iw-seg { display: flex; gap: 4px; }
.iw-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.iw-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 0.8rem; color: var(--paper-dim); cursor: pointer; }
.iw-count { font-family: var(--font-ui); font-size: 0.72rem; color: var(--paper-faint); margin: 2px 0 0; }
.iw-browser { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.iw-row { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--obsidian); border: 1px solid var(--line-strong); border-left: 3px solid transparent; border-radius: 6px; padding: 9px 11px; cursor: pointer; width: 100%; }
.iw-row:hover { border-color: var(--brass-soft); }
.iw-row.is-sel { border-color: var(--brass); border-left-color: var(--brass); background: #161a22; }
.iw-row.is-sel .iw-row__name { font-weight: 700; }
.iw-row.is-sel .iw-row__name::before { content: "▸ "; color: var(--brass); }
.iw-row:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; }
.iw-row__sig { width: 64px; height: 38px; flex: 0 0 auto; background: #05140d; border: 1px solid var(--line); border-radius: 3px; }
.iw-row__icon { width: 30px; flex: 0 0 auto; font-size: 1.2rem; color: var(--brass); text-align: center; }
.iw-row__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.iw-row__tag { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.iw-row__name { font-size: 0.95rem; color: var(--paper); }
.iw-row__desc { font-size: 0.78rem; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; }
.iw-row__meta { font-family: var(--font-ui); font-size: 0.68rem; color: var(--paper-faint); }
.iw-inspector { padding: 0; overflow-y: auto; }
.iw-note { padding: 16px 16px 18px; border-top: 2px solid var(--brass-soft); }
.iw-note__tag { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.iw-note__title { font-size: 1.15rem; color: var(--paper); margin: 4px 0 8px; }
.iw-note__sig { width: 100%; height: 72px; background: #05140d; border: 1px solid var(--brass-soft); border-radius: 4px; margin-bottom: 8px; }
.iw-note__lead { font-style: italic; color: var(--paper-dim); }
.iw-note p { font-size: 0.83rem; margin: 5px 0; color: var(--paper); }
.iw-note b { color: var(--paper); }
.iw-note__hint { font-size: 0.78rem; color: var(--paper-faint); font-style: italic; }
.iw-note .pc-conf { font-size: 0.7rem; color: var(--paper-dim); }
.iw-note .cab-pin { font-family: var(--font-ui); font-size: 0.72rem; color: var(--brass); background: transparent; border: 1px solid var(--brass-soft); border-radius: 999px; padding: 3px 10px; cursor: pointer; float: right; }
.iw-note .cab-pin:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; }
.iw-empty { padding: 28px 18px; color: var(--paper-faint); font-style: italic; text-align: center; }

/* ===================== PROBE ROOM (bench) ===================== */
.probe-top { margin-bottom: 12px; }
.probe-grid { display: grid; grid-template-columns: 280px 1fr 300px; gap: 14px; align-items: start; }
.mplan__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mplan__step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--obsidian); border: 1px solid var(--line-strong); border-left: 3px solid var(--brass-soft); border-radius: 6px; }
.mplan__step.is-done { border-left-color: var(--star); }
.mplan__n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--brass); color: var(--graphite); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mplan__step.is-done .mplan__n { background: var(--star); }
.mplan__d { font-size: 0.8rem; color: var(--paper-dim); }
.mplan__step b { font-size: 0.84rem; color: var(--paper); }
.dmm-face { display: flex; flex-direction: column; gap: 8px; }
.dmm-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dmm-rotary { font-family: var(--font-ui); font-size: 0.78rem; color: var(--paper-dim); display: flex; flex-direction: column; gap: 4px; }
.dmm-jacks { display: flex; gap: 8px; }
.jack { font-family: var(--font-ui); font-size: 0.72rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-strong); }
.jack--red { color: #e0917f; } .jack--black { color: var(--paper-dim); }
.mislead-d { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.mislead-d summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem; color: var(--brass); }

@media (max-width: 900px) {
  .iw-shell { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .iw-browser { max-height: 420px; }
  .iw-inspector { max-height: none; }
  .iw-rail .iw-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .probe-grid { grid-template-columns: 1fr; }
  /* larger touch targets on phones */
  .filter-chip { padding: 10px 15px; min-height: 40px; }
  .seg__btn { padding: 11px 14px; min-height: 40px; }
  .ex-btn, .episode-btn, .ed-btn { min-height: 40px; }
}

/* ===================== SWEEP STUDIO GUIDED BUILDER ===================== */
.sw-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sw-step { font-family: var(--font-ui); font-size: 0.76rem; color: var(--paper-dim); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.sw-step:hover { color: var(--paper); border-color: var(--brass-soft); }
.sw-step.is-active { color: var(--graphite); background: var(--brass); border-color: var(--brass); }
.sw-step:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.sw-stage { margin-bottom: 14px; }
.sw-classic-h { margin: 18px 0 8px; color: var(--paper-faint); font-size: 0.85rem; }
.sw-intent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sw-intent { text-align: left; font-family: var(--font-ui); font-size: 0.82rem; color: var(--paper); background: var(--graphite-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--brass-soft); border-radius: 5px; padding: 10px 12px; cursor: pointer; }
.sw-intent:hover { border-color: var(--brass); }
.sw-intent.is-active { border-left-color: var(--star); background: #161a22; }
.sw-intent:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.mg-card p, #swIntentInfo { font-size: 0.85rem; margin: 4px 0; }
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tmpl-card { display: flex; gap: 10px; background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 10px; }
.tmpl-card.is-rec { border-color: var(--brass); border-left: 3px solid var(--brass); }
.tmpl-prev { width: 72px; height: 60px; flex: 0 0 auto; background: var(--obsidian); border: 1px solid var(--line); border-radius: 4px; }
.tmpl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmpl-grp { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.tmpl-name { font-size: 0.95rem; color: var(--paper); }
.tmpl-meta { font-size: 0.72rem; color: var(--paper-dim); }
.tmpl-card .ed-btn { margin-top: 4px; align-self: flex-start; }
/* point editor */
.sp-grid { display: grid; grid-template-columns: 150px 1fr 300px; gap: 12px; align-items: start; }
.sp-ops { display: flex; flex-direction: column; gap: 5px; }
.sp-ops .ed-btn { width: 100%; }
.sp-play { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.sp-canvas-wrap #spCanvas, .sp-canvas-wrap canvas { width: 100%; height: 300px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 6px; display: block; }
.sp-side { display: flex; flex-direction: column; gap: 8px; }
.sp-table { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sp-row { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--obsidian); border: 1px solid var(--line-strong); border-left: 3px solid transparent; border-radius: 5px; padding: 6px 8px; cursor: pointer; }
.sp-row.is-sel { border-left-color: var(--star); background: #161a22; }
.sp-row:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; }
.sp-n { font-family: var(--font-ui); font-weight: 700; color: var(--brass); width: 22px; flex: 0 0 auto; }
.sp-xy { font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--paper-dim); width: 92px; flex: 0 0 auto; }
.sp-dw { font-size: 0.72rem; color: var(--paper-dim); }
.sp-inspector { background: var(--graphite-2); border: 1px solid var(--line-strong); border-top: 2px solid var(--brass-soft); border-radius: 6px; padding: 10px; }
.sp-title { margin: 0 0 8px; font-size: 0.9rem; color: var(--paper); }

/* ===================== THERMAL STABILITY PLAN ===================== */
.ts-panel { border-left: 3px solid var(--brass-soft); }
.ts-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
.ts-card { min-height: 80px; }
.ts-status { display: inline-block; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--graphite-2); border: 1px solid var(--brass-soft); color: var(--brass); margin-bottom: 8px; }
.ts-status.tsplanningestimate, .ts-status.tscalibratedestimate { color: var(--star); border-color: var(--star); }
.ts-status.tsnostablewindowfound, .ts-status.tsreviewwarning { color: var(--bad); border-color: var(--bad); }
.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0; }
.ts-fld { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; border-bottom: 1px dotted var(--line-strong); padding: 2px 0; }
.ts-fld span { color: var(--paper-dim); } .ts-fld b { color: var(--paper); }
.ts-say { font-size: 0.86rem; color: var(--paper); background: rgba(61,169,252,0.08); border-left: 3px solid var(--star); padding: 8px 10px; border-radius: 4px; margin: 8px 0; }
.ts-warn { color: var(--bad); font-size: 0.86rem; }
.ts-timeline { width: 100%; height: 90px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 6px; display: block; margin-top: 10px; }
.ts-strategy summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.78rem; color: var(--brass); margin-top: 8px; }

/* ===================== COMPARE + VALIDATE ===================== */
.cv-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--brass-soft); padding-bottom: 8px; margin-bottom: 14px; }
.cv-tab { font-family: var(--font-ui); font-size: 0.82rem; color: var(--paper-dim); background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.cv-tab:hover { color: var(--paper); border-color: var(--brass-soft); }
.cv-tab.is-active { color: var(--graphite); background: var(--brass); border-color: var(--brass); }
.cv-tab:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.cv-out { margin: 8px 0; }
.cv-canvas { width: 100%; height: 180px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 6px; display: block; margin-bottom: 6px; }
.cr-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-height: 280px; overflow-y: auto; }
.cr-row { background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.cr-title { font-size: 0.95rem; color: var(--paper); }
.cr-meta { font-family: var(--font-ui); font-size: 0.68rem; color: var(--paper-faint); }
.refine-d { border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.refine-d summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.84rem; color: var(--brass); }
.refine-body { padding-top: 8px; }
.refine-body p { font-size: 0.84rem; }

@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-ops { flex-direction: row; flex-wrap: wrap; }
  .sp-ops .ed-btn { width: auto; min-height: 40px; }
  .ts-wrap { grid-template-columns: 1fr; }
  .ts-grid { grid-template-columns: 1fr; }
  .sw-rail { overflow-x: auto; flex-wrap: nowrap; }
  .sw-step { min-height: 40px; white-space: nowrap; }
  .cv-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .cv-tab { min-height: 40px; white-space: nowrap; }
  .sp-row { min-height: 40px; }
}

/* ===================== CONTEXTUAL HELP SYSTEM ===================== */
.help-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 1px solid var(--brass-soft); background: transparent; color: var(--brass); font-family: var(--font-ui); font-size: 0.72rem; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0; }
.help-i:hover { background: var(--brass); color: var(--graphite); }
.help-i:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.room-guidebar { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.help-backdrop { position: fixed; inset: 0; background: rgba(9,10,14,0.45); z-index: 90; }
.help-backdrop[hidden] { display: none; }
.help-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 92vw); background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border-left: 2px solid var(--brass-soft); box-shadow: -12px 0 40px -20px rgba(0,0,0,0.8); z-index: 95; transform: translateX(100%); transition: transform var(--beat) var(--ease); overflow-y: auto; padding: 0; }
.help-drawer.is-open { transform: none; }
.help-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; border-bottom: 1px solid var(--brass-soft); position: sticky; top: 0; background: var(--graphite-2); }
.help-drawer__title { font-size: 1rem; color: var(--paper); margin: 0; }
.help-close { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--line-strong); background: transparent; color: var(--paper-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.help-close:hover { color: var(--paper); border-color: var(--brass-soft); }
.help-close:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.help-drawer__body { padding: 14px 18px; }
.help-dl dt { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-top: 12px; }
.help-dl dt:first-child { margin-top: 0; }
.help-dl dd { margin: 4px 0 0; font-size: 0.88rem; color: var(--paper); line-height: 1.5; }
.help-drawer__foot { padding: 0 18px 18px; }
@media (prefers-reduced-motion: reduce) { .help-drawer { transition: none; } }

/* ===================== PROBE ROOM BOARD-FIRST ===================== */
.pr-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.pr-head__main { min-width: 0; }
.pr-scenario { font-size: clamp(1.1rem, 3vmin, 1.5rem); color: var(--paper); margin: 2px 0 4px; }
.pr-objective { color: var(--star); }
.pr-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-btn--go { background: var(--brass); color: var(--graphite); border-color: var(--brass); font-weight: 600; }
.ed-btn--go:hover { box-shadow: 0 0 14px var(--brass-glow); }
.pr-viewbar { margin-bottom: 8px; }
.seg--mini .seg__btn { font-size: 0.72rem; padding: 5px 9px; }
.panel__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.pr-board-visual { width: 100%; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 8px; }
.bd-svg { width: 100%; height: auto; display: block; }
.bd-outline { fill: rgba(20,40,30,0.5); stroke: var(--brass-soft); stroke-width: 1; }
.bd-trace { fill: none; stroke: rgba(200,162,74,0.55); stroke-width: 2; }
.bd-comp rect { fill: var(--graphite-2); stroke: var(--paper-faint); stroke-width: 1; }
.bd-glyph { fill: var(--paper-dim); font-size: 9px; text-anchor: middle; font-family: var(--font-ui); }
.bd-clabel { fill: var(--paper-faint); font-size: 7px; text-anchor: middle; font-family: var(--font-ui); }
.bd-tp { cursor: pointer; }
.bd-tp circle { fill: var(--graphite); stroke: var(--brass); stroke-width: 1.5; }
.bd-tp:hover circle { stroke: var(--paper); }
.bd-tp.is-sel circle { fill: var(--star); stroke: var(--star); }
.bd-tp.is-sel .bd-tpn { fill: var(--graphite); }
.bd-tp:focus-visible { outline: none; }
.bd-tp:focus-visible circle { stroke: var(--star); stroke-width: 2.5; }
.bd-tpn { fill: var(--brass); font-size: 8px; font-weight: 700; text-anchor: middle; font-family: var(--font-ui); pointer-events: none; }
.bd-tplabel { fill: var(--paper-dim); font-size: 7.5px; text-anchor: middle; font-family: var(--font-ui); pointer-events: none; }
.bd-arrow { fill: none; stroke: var(--star); stroke-width: 1.5; }
.bd-state { fill: var(--paper-dim); font-size: 8px; text-anchor: middle; font-style: italic; }
.pr-callout { margin-top: 10px; }
.bd-callout { background: var(--graphite-2); border: 1px solid var(--line-strong); border-top: 2px solid var(--brass-soft); border-radius: 6px; padding: 12px; }
.bd-co-t { margin: 0 0 6px; font-size: 1rem; color: var(--paper); }
.bd-callout p { font-size: 0.84rem; margin: 4px 0; }
.pr-tplist { margin-top: 10px; }
.pr-tplist summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.78rem; color: var(--brass); }
.pr-side { display: flex; flex-direction: column; gap: 12px; }
.pr-adv summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.82rem; color: var(--brass); }
.pr-adv { margin-top: 10px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; }

/* workspace modes */
#roomProbe[data-view="focus"] .pr-guided, #roomProbe[data-view="focus"] .pr-adv { display: none; }
#roomProbe[data-view="focus"] .pr-layout { grid-template-columns: 1fr; }
#roomProbe[data-view="guided"] .pr-adv { display: none; }

@media (max-width: 900px) {
  .pr-layout { grid-template-columns: 1fr; }
  .pr-head__actions { width: 100%; }
  .ed-btn--go, .pr-head__actions .ed-btn { min-height: 40px; }
  .help-drawer { width: 100vw; height: 70dvh; top: auto; bottom: 0; border-left: none; border-top: 2px solid var(--brass-soft); transform: translateY(100%); border-radius: 12px 12px 0 0; }
  .help-drawer.is-open { transform: none; }
}

/* ===================== THE WONDER WORKSHOP ===================== */
.scene--wonder { --coral:#e0917f; --teal:#7fbfb3; --sun:#e6c068; --sand:#d8c4a0; }
.scene--wonder .rooms__title { color: var(--paper); }
.scene--wonder .eyebrow { color: var(--sun); }
.words-toggle { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; }
.final__approach--wonder { border-color: var(--sun); }
.lab__util--wonder { border-color: var(--sun); color: var(--paper); }
.lab__hint { font-family: var(--font-ui); font-size: 0.74rem; color: var(--paper-faint); font-style: italic; align-self: center; }
.wonder-real { color: var(--teal) !important; font-size: 0.72rem !important; }
.scene--wonder .room-card { border-left-color: var(--sun); }
.scene--wonder .room-card:hover { border-color: var(--sun); border-left-color: var(--sun); }

/* magic window */
.wm-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 6px; margin-bottom: 10px; }
.wm-chip { text-align: left; background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.wm-chip:hover { border-color: var(--sun); }
.wm-chip:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.wm-chip b { color: var(--paper); font-size: 0.86rem; } .wm-chip span { color: var(--paper-dim); font-size: 0.72rem; }
.wm-stack { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.wm-layer { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--obsidian); border: 1px solid var(--line-strong); border-left: 4px solid var(--teal); border-radius: 5px; padding: 6px 9px; }
.wm-layer.wm-thin { border-left-width: 2px; } .wm-layer.wm-medium { border-left-width: 5px; } .wm-layer.wm-thick { border-left-width: 9px; }
.wm-name { font-size: 0.84rem; color: var(--paper); } .wm-ctrl { display: flex; gap: 5px; }
.wm-ctrl .ed-btn { padding: 4px 9px; font-size: 0.72rem; }
.wm-modes .seg__btn { font-size: 0.72rem; padding: 6px 9px; }
.wm-gauges { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.wg-top { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--paper); }
.wg-bar { height: 9px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; margin-top: 3px; }
.wg-fill { display: block; height: 100%; border-radius: 999px; }
.wg-r { background: var(--coral); } .wg-t { background: var(--teal); } .wg-a { background: var(--paper-faint); }
.wm-spectrum { width: 100%; height: 70px; background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 6px; display: block; margin: 6px 0; }

/* sprinkle */
.spk-ptlist { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.spk-pt { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--paper-dim); background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 4px; }
.spk-pt .ed-btn { padding: 1px 6px; font-size: 0.7rem; }

/* signal detective tools */
.sd-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-tool { text-align: left; background: var(--graphite-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.sd-tool:hover { border-color: var(--sun); }
.sd-tool.is-active { border-color: var(--star); background: #161a22; }
.sd-tool:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.sd-tool b { color: var(--paper); font-size: 0.84rem; } .sd-tool span { color: var(--paper-dim); font-size: 0.7rem; }

/* stuff shelf / clue cabinet cards */
.stuff-card { background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.stuff-n { margin: 0; font-size: 1rem; color: var(--paper); }
.stuff-real { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin: 0 0 4px; }
.stuff-card p { font-size: 0.8rem; margin: 2px 0; }
.clue-sig { width: 100%; height: 48px; background: #05140d; border: 1px solid var(--line); border-radius: 4px; }

@media (max-width: 620px) { .sd-tools { grid-template-columns: 1fr; } }

/* ===================== OBSERVATION HUNT ===================== */
.hunt-control { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--brass-soft); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.hunt-compass { font-size: 1.3rem; color: var(--brass); }
.hunt-control__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hunt-control__body b { color: var(--paper); font-size: 0.92rem; }
.hunt-control__body span { color: var(--paper-dim); font-size: 0.76rem; }
.hunt-rail { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.hunt-path { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 10px 0 2px; }
.hunt-mrow { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--obsidian); border: 1px solid var(--line-strong); border-left: 3px solid transparent; border-radius: 5px; padding: 7px 9px; cursor: pointer; }
.hunt-mrow:hover { border-color: var(--brass-soft); }
.hunt-mrow.is-sel { border-left-color: var(--star); background: #161a22; }
.hunt-mrow.is-done { border-left-color: var(--brass); }
.hunt-mrow:focus-visible { outline: 2px solid var(--star); outline-offset: 1px; }
.hunt-dot { color: var(--brass); width: 16px; flex: 0 0 auto; text-align: center; }
.hunt-mrow.is-done .hunt-dot { color: var(--brass); }
.hunt-mrow__t { flex: 1; font-size: 0.84rem; color: var(--paper); min-width: 0; }
.hunt-mrow__m { font-family: var(--font-ui); font-size: 0.7rem; color: var(--paper-faint); }
.hunt-flow__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.hunt-flow__t { margin: 0; font-size: 1.05rem; color: var(--paper); }
.hunt-flow__marks { font-family: var(--font-ui); font-size: 0.74rem; color: var(--star); }
.hunt-flow p { font-size: 0.85rem; margin: 5px 0; }
.hunt-marks { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.mk { font-family: var(--font-ui); font-size: 0.68rem; color: var(--paper-faint); background: var(--obsidian); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; }
.mk.is-on { color: var(--graphite); background: var(--brass); border-color: var(--brass); }
.hunt-opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.hunt-opt { font-size: 0.82rem; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.stamp { font-family: var(--font-ui); font-size: 0.72rem; color: var(--brass); border: 1px solid var(--brass-soft); border-radius: 4px; padding: 4px 10px; background: rgba(200,162,74,0.06); }
.clue-strip .iw-row__sig { width: 60px; height: 34px; }
.scene--wonder .ed-btn--go, .scene--wonder .hunt-mrow.is-sel { } /* inherit */
@media (max-width: 900px) {
  .hunt-rail { max-height: 240px; }
  .hunt-control { flex-wrap: wrap; }
}

/* keep clue strips compact (~<=96px) */
.clue-strip .iw-row__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.clue-strip { align-items: center; }

/* ===================== MAGIC WINDOW — BUILD STAGE ===================== */
.wm-step { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--brass); color:var(--graphite); font-family:var(--font-ui); font-size:0.7rem; font-weight:700; margin-right:6px; }
.wm-stage { display:grid; grid-template-columns: 1fr 64px; gap:12px; align-items:stretch; margin:6px 0 10px; }
.wm-pane { position:relative; min-height:180px; border-radius:10px; background:linear-gradient(135deg, rgba(120,150,170,0.10), rgba(20,30,40,0.30)); border:1px solid var(--brass-soft); box-shadow: inset 0 0 30px rgba(0,0,0,0.4); overflow:hidden; display:flex; align-items:flex-end; }
.wm-glass { position:relative; width:100%; height:100%; min-height:180px; display:flex; flex-direction:column-reverse; }
.wm-coat { width:100%; flex:0 0 auto; border-top:1px solid rgba(236,228,212,0.12); }
.wm-coat.wm-h-thin { height:18px; } .wm-coat.wm-h-medium { height:34px; } .wm-coat.wm-h-thick { height:58px; }
.wm-coat.is-sel { box-shadow: inset 0 0 0 2px var(--star); }
.wm-coat.wm-rainbow { background:linear-gradient(90deg, rgba(224,145,127,0.4), rgba(230,192,104,0.4), rgba(127,191,179,0.4), rgba(61,169,252,0.4), rgba(176,120,205,0.4)) !important; }
.wm-sheen { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%); }
.wm-pane-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--paper-faint); font-style:italic; font-size:0.85rem; padding:12px; margin:0; }
.wm-cross { display:flex; flex-direction:column; align-items:center; }
.wm-cross-strip { width:46px; flex:1; min-height:180px; display:flex; flex-direction:column-reverse; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--obsidian); }
.wm-band { width:100%; flex:0 0 auto; }
.wm-band--glass { height:26px; background:rgba(140,170,190,0.18); color:var(--paper-faint); font-family:var(--font-ui); font-size:0.6rem; text-align:center; line-height:26px; border-top:1px solid var(--brass-soft); }
.wm-band.wm-bh-thin { height:12px; } .wm-band.wm-bh-medium { height:22px; } .wm-band.wm-bh-thick { height:38px; }
.wm-band.is-sel { box-shadow: inset 0 0 0 2px var(--star); }
.wm-cross-cap { font-family:var(--font-ui); font-size:0.58rem; color:var(--paper-faint); text-align:center; margin:4px 0 0; max-width:64px; }
/* tray */
.wm-tray { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:6px; }
.wm-chip { display:flex; gap:8px; align-items:center; text-align:left; background:var(--graphite-2); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; cursor:pointer; }
.wm-chip:hover { border-color:var(--sun, var(--brass)); }
.wm-chip:focus-visible { outline:2px solid var(--star); outline-offset:2px; }
.wm-swatch { width:22px; height:22px; flex:0 0 auto; border-radius:6px; border:1px solid rgba(236,228,212,0.2); box-shadow: inset 0 0 8px rgba(0,0,0,0.3); }
.wm-chip__b { display:flex; flex-direction:column; min-width:0; }
.wm-chip__b b { color:var(--paper); font-size:0.84rem; } .wm-chip__b span { color:var(--paper-dim); font-size:0.7rem; }
/* stack rows */
.wm-layer__sel { flex:1; display:flex; align-items:center; gap:8px; text-align:left; background:transparent; border:none; color:var(--paper); font-size:0.84rem; cursor:pointer; padding:2px 0; }
.wm-layer__sel:focus-visible { outline:2px solid var(--star); outline-offset:2px; }
.wm-dot { width:14px; height:14px; flex:0 0 auto; border-radius:4px; border:1px solid rgba(236,228,212,0.2); }
.wm-layer.is-sel { border-left-color:var(--star); }
.wm-ctrl .ed-btn { padding:3px 8px; font-size:0.72rem; }

/* per-material apply animations (run once on the just-added coat) */
@keyframes wmPour { 0%{ transform:translateY(-140%); opacity:0.2; } 60%{ transform:translateY(6%); } 100%{ transform:translateY(0); opacity:1; } }
@keyframes wmPlop { 0%{ transform:scale(0.5); opacity:0; } 55%{ transform:scale(1.12); } 75%{ transform:scale(0.95); } 100%{ transform:scale(1); opacity:1; } }
@keyframes wmSlide { 0%{ transform:translateX(-110%); } 80%{ transform:translateX(2%); } 100%{ transform:translateX(0); } }
@keyframes wmFlood { 0%{ transform:scaleX(0); transform-origin:left; opacity:0.3; } 100%{ transform:scaleX(1); opacity:1; } }
@keyframes wmSprinkle { 0%{ opacity:0; filter:blur(2px); } 100%{ opacity:1; filter:blur(0); } }
@keyframes wmWash { 0%{ opacity:0; transform:translateX(-30%); filter:blur(3px); } 100%{ opacity:1; transform:translateX(0); filter:blur(0); } }
@keyframes wmDollop { 0%{ transform:scale(0.3); opacity:0; } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } }
@keyframes wmDrizzle { 0%{ opacity:0; transform:translateY(-40%); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes wmGoo { 0%{ transform:scaleY(0.2); transform-origin:bottom; opacity:0.4; } 60%{ transform:scaleY(1.18); } 80%{ transform:scaleY(0.92); } 100%{ transform:scaleY(1); opacity:1; } }
@keyframes wmMist { 0%{ opacity:0; filter:blur(6px); } 100%{ opacity:1; filter:blur(0); } }
.wm-coat.is-applying.wm-anim-pour { animation:wmPour 0.55s var(--ease); }
.wm-coat.is-applying.wm-anim-plop { animation:wmPlop 0.5s var(--ease); }
.wm-coat.is-applying.wm-anim-slide { animation:wmSlide 0.5s var(--ease); }
.wm-coat.is-applying.wm-anim-flood { animation:wmFlood 0.5s var(--ease); }
.wm-coat.is-applying.wm-anim-sprinkle { animation:wmSprinkle 0.55s var(--ease); }
.wm-coat.is-applying.wm-anim-wash { animation:wmWash 0.6s var(--ease); }
.wm-coat.is-applying.wm-anim-dollop { animation:wmDollop 0.5s var(--ease); }
.wm-coat.is-applying.wm-anim-drizzle { animation:wmDrizzle 0.55s var(--ease); }
.wm-coat.is-applying.wm-anim-goo { animation:wmGoo 0.6s var(--ease); }
.wm-coat.is-applying.wm-anim-mist { animation:wmMist 0.7s var(--ease); }
.wm-anim-sprinkle { background-image:radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px); background-size:7px 7px; }

@media (max-width: 620px){ .wm-stage { grid-template-columns: 1fr 52px; } .wm-tray { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .wm-coat { animation:none !important; } }

/* layer list reads glass-at-bottom to match the pane + cross-section + heading,
   so the ↓ (toward the glass) / ↑ (outward) arrows line up with the visual order */
.wm-stack { flex-direction: column-reverse; }
@media (max-width: 620px){ .wm-ctrl .ed-btn { min-height: 38px; } }

/* ===================== SPRINKLE PATH — PRECISE EDITOR ===================== */
.spk-grid { display:grid; grid-template-columns: 220px 1fr 320px; gap:14px; align-items:start; }
.spk-controls .io-check { display:flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:0.8rem; color:var(--paper-dim); margin:6px 0; }
.spk-stage #spkCanvas { width:100%; height:300px; }
.spk-side { display:flex; flex-direction:column; }
.spk-insp__h { font-family:var(--font-ui); font-size:0.78rem; letter-spacing:0.1em; color:var(--brass); margin-bottom:6px; }
.spk-insp .ts-warn { font-size:0.82rem; }
#spkInspector .ed-btn { padding:4px 9px; font-size:0.72rem; }
.spk-table { display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:6px; padding:4px; }
.spk-trow { display:grid; grid-template-columns: 24px 1fr 1fr 48px 48px 20px; gap:4px; align-items:center; padding:5px 6px; border-radius:4px; font-family:ui-monospace,monospace; font-size:0.72rem; color:var(--paper-dim); background:var(--obsidian); border:1px solid transparent; cursor:pointer; text-align:right; }
.spk-trow span:first-child, .spk-trow span:last-child { text-align:center; }
.spk-trow.spk-thead { background:transparent; color:var(--paper-faint); cursor:default; font-family:var(--font-ui); letter-spacing:0.04em; position:sticky; top:0; }
.spk-trow.is-sel { border-color:var(--star); background:#161a22; color:var(--paper); }
.spk-trow:focus-visible { outline:2px solid var(--star); outline-offset:1px; }
@media (max-width: 980px){ .spk-grid { grid-template-columns:1fr; } .spk-table { max-height:200px; } .spk-controls .ed-actions .ed-btn, #spkInspector .ed-btn, .spk-controls .seg__btn { min-height:40px; } }

/* ===================== WARM-UP WATCH — THERMAL THEATER ===================== */
.wt-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.wt-chip { font-family:var(--font-ui); font-size:0.76rem; color:var(--paper-dim); background:linear-gradient(180deg,var(--graphite-2),var(--graphite)); border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; }
.wt-chip b { color:var(--paper); }
.wt-chip.wt-state { border-color:var(--brass-soft); }
.wt-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap:14px; align-items:start; }
.wt-stage .wt-theater { width:100%; height:240px; background:#06080c; border:1px solid var(--brass-soft); border-radius:8px; display:block; }
.wt-timeline { width:100%; height:34px; background:var(--obsidian); border:1px solid var(--line-strong); border-radius:6px; display:block; margin-top:10px; }
.wt-side { display:flex; flex-direction:column; }
.wt-interp dl, .wt-int { margin:6px 0; }
.wt-int dt { font-family:var(--font-ui); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-top:10px; }
.wt-int dt:first-child { margin-top:0; }
.wt-int dd { margin:3px 0 0; font-size:0.85rem; color:var(--paper); line-height:1.45; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 900px){
  .wt-grid { grid-template-columns:1fr; }
  .wt-stage .wt-theater { height:200px; }
  .wt-stage .ed-btn, .wt-side .ed-btn { min-height:40px; }
}

/* larger range tap targets on touch */
@media (max-width: 900px){ #wtScrub, #wuKnob, .spk-controls input[type=range] { min-height:40px; } }

/* ===================== TARGET TEMPERATURE EXPLORER ===================== */
.tte { margin:0 0 16px; border:1px solid var(--brass-soft); border-radius:10px; background:linear-gradient(180deg,#0c0f15,#0a0d12); padding:0 12px 12px; }
.tte__sum { list-style:none; cursor:pointer; padding:12px 2px 8px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.tte__sum::-webkit-details-marker { display:none; }
.tte__h { font-family:var(--font-ui); font-size:0.96rem; font-weight:600; letter-spacing:0.02em; color:var(--paper); }
.tte__tag { font-size:0.78rem; color:var(--brass); }
.tte__lede { margin:0 0 10px; font-size:0.82rem; color:var(--paper-dim); }
.tte__metriclbl { color:var(--paper-faint); }
.tte__grid { display:grid; grid-template-columns: 0.95fr 1.5fr 1fr; gap:12px; align-items:start; }
.tte-controls, .tte-charts, .tte-summary { min-width:0; }
.tte-field { margin:10px 0; }
.tte-targetrow { display:flex; align-items:center; gap:6px; margin:4px 0; }
.tte-targetrow input[type=number] { flex:1 1 auto; min-width:0; font-family:ui-monospace,monospace; font-size:1rem; text-align:center; background:var(--obsidian); color:var(--paper); border:1px solid var(--line-strong); border-radius:6px; padding:7px 6px; }
.tte-step { min-width:38px; font-size:1.1rem; line-height:1; padding:6px 10px; }
#tteTargetRange { width:100%; margin-top:6px; }
.tte-basis { margin:10px 0; }
.tte-chips { display:flex; flex-direction:column; gap:5px; max-height:230px; overflow-y:auto; padding:2px; }
.tte-chip { text-align:left; background:var(--obsidian); border:1px solid var(--line-strong); border-radius:7px; padding:6px 9px; cursor:pointer; color:var(--paper-dim); display:flex; flex-direction:column; gap:1px; }
.tte-chip.is-on { border-color:var(--star); background:#141a24; color:var(--paper); }
.tte-chip__n { font-family:var(--font-ui); font-size:0.82rem; font-weight:600; color:var(--paper); }
.tte-chip__w { font-size:0.68rem; color:var(--brass); }
.tte-chip__d { font-size:0.66rem; letter-spacing:0.02em; color:var(--paper-faint); text-transform:uppercase; }
.tte-chip__p { font-family:ui-monospace,monospace; font-size:0.66rem; color:var(--paper-dim); }
.tte-chip:focus-visible { outline:2px solid var(--star); outline-offset:1px; }
.tte-chart { width:100%; height:188px; background:#06080c; border:1px solid var(--line-strong); border-radius:8px; display:block; }
.tte-chart2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.tte-chart--sm { height:150px; }
.tte-hover { font-family:ui-monospace,monospace; font-size:0.7rem; color:var(--paper-dim); min-height:1.4em; margin:6px 0; }
.tte-snaps { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0; }
.tte-snap { background:var(--obsidian); border:1px solid var(--line-strong); border-radius:8px; padding:6px; }
.tte-snap__h { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--paper); margin-bottom:4px; }
.tte-snap__cv { width:100%; height:90px; display:block; border-radius:5px; background:#06080c; }
.tte-snap__cap { font-size:0.68rem; color:var(--paper-dim); margin-top:4px; line-height:1.4; }
.tte-key { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:3px; }
.tte-warnflag { color:var(--ember,#c0734f); font-weight:600; }
.tte-race { background:var(--obsidian); border:1px solid var(--brass-soft); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.tte-race__h { font-family:var(--font-ui); font-size:0.84rem; margin:0 0 6px; color:var(--paper); }
.tte-race__cap { font-weight:400; font-size:0.68rem; color:var(--paper-faint); }
.tte-race__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.tte-race__list li { font-size:0.78rem; color:var(--paper); }
.tte-race__lbl { display:inline-block; min-width:140px; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--paper-faint); }
.tte-racetoggle { display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; color:var(--paper-dim); margin:0 0 8px; }
.tte-interp { margin:8px 0; }
.tte-int__h { font-family:var(--font-ui); font-size:0.84rem; margin:0 0 4px; color:var(--brass); }
.tte-interp p { font-size:0.82rem; color:var(--paper); line-height:1.45; margin:4px 0; }
.tte-tablewrap { overflow-x:auto; border:1px solid var(--line-strong); border-radius:8px; margin:8px 0; }
#tteTable:focus-visible { outline:2px solid var(--star); outline-offset:-2px; }
.tte-tbl { width:100%; border-collapse:collapse; font-size:0.72rem; min-width:420px; }
.tte-tbl th, .tte-tbl td { padding:5px 7px; text-align:right; border-bottom:1px solid var(--line-strong); white-space:nowrap; color:var(--paper-dim); }
.tte-tbl th { color:var(--paper-faint); font-weight:500; text-transform:uppercase; letter-spacing:0.03em; font-size:0.64rem; position:sticky; top:0; background:#0c0f15; }
.tte-tbl td:first-child, .tte-tbl th:first-child { text-align:left; color:var(--paper); }
.tte-yes { color:#5ad19a; }
.tte-no { color:var(--ember,#c0734f); }
.tte-why p { font-size:0.78rem; color:var(--paper-dim); margin:5px 0; }
.tte-foot { margin:10px 0 0; }
.tte__planrow { margin:6px 0; }
@media (max-width: 1100px){ .tte__grid { grid-template-columns:1fr 1fr; } .tte-summary { grid-column:1 / -1; } }
@media (max-width: 760px){
  .tte__grid { grid-template-columns:1fr; }
  .tte-chart2 { grid-template-columns:1fr; }
  .tte-snaps { grid-template-columns:1fr 1fr; }
  .tte-chips { max-height:none; }
  .tte-controls .ed-btn, .tte-summary .ed-btn, .tte .seg__btn { min-height:40px; }
  .tte-targetrow input[type=number], #tteTarget, #tteHorizon { min-height:40px; }
  #tteTargetRange, #tteMetric { min-height:40px; }
}

/* TTE legend + metric field */
.tte-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:5px 0 2px; font-size:0.72rem; color:var(--paper-dim); }
.tte-leg { display:inline-flex; align-items:center; gap:5px; }
.tte-leg svg { flex:0 0 auto; }
.tte-metricfield { display:flex; flex-direction:column; gap:3px; font-size:0.78rem; color:var(--paper-dim); }
.tte-flbl { font-family:var(--font-ui); }

/* ===================== WONDER WORKSHOP — WARMTH RACE ===================== */
.wrace { display:flex; flex-direction:column; gap:16px; margin:4px 0 8px; }
.wrace-step { background:linear-gradient(180deg,#0e1118,#0b0e14); border:1px solid var(--line-strong); border-radius:12px; padding:12px 14px; }
.wrace-steph { font-family:var(--font-ui); font-size:0.92rem; font-weight:600; color:var(--paper); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.wrace-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:var(--brass-soft); color:var(--obsidian); font-size:0.82rem; font-weight:700; }
.wrace-pairnav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.wrace-pairname { font-family:var(--font-ui); font-size:0.86rem; color:var(--brass); text-align:center; flex:1 1 auto; }
.wrace-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wrace-card { display:flex; gap:10px; align-items:flex-start; background:var(--obsidian); border:1px solid var(--line-strong); border-radius:10px; padding:10px; }
.wrace-card__sw { flex:0 0 auto; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; border:1px solid rgba(255,255,255,0.18); }
.wrace-card__n { font-family:var(--font-ui); font-size:0.92rem; font-weight:600; color:var(--paper); }
.wrace-card__t { font-size:0.8rem; color:var(--paper-dim); line-height:1.4; margin-top:2px; }
.wrace-card__r { font-size:0.7rem; color:var(--brass); margin-top:3px; }
.wrace-goals { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wrace-goal { display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 8px; border-radius:12px; border:2px solid var(--line-strong); background:var(--obsidian); color:var(--paper-dim); cursor:pointer; }
.wrace-goal.is-on { border-color:var(--star); background:#141a24; color:var(--paper); }
.wrace-goal:focus-visible { outline:2px solid var(--star); outline-offset:2px; }
.wrace-goal__i { font-size:1.6rem; line-height:1; }
.wrace-goal__l { font-family:var(--font-ui); font-size:0.92rem; font-weight:600; color:var(--paper); }
.wrace-goal__c { font-size:0.68rem; color:var(--paper-faint); }
.wrace-goalc { margin:8px 0 0; }
.wrace-exact { margin-top:8px; }
.wrace-runbtns { margin-bottom:8px; }
#wraceStart { font-size:1rem; padding:12px 22px; font-weight:700; letter-spacing:0.03em; }
.wrace-theaters { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0; }
.wrace-th { margin:0; display:flex; flex-direction:column; }
.wrace-th__lbl { font-family:var(--font-ui); font-size:0.84rem; font-weight:600; color:var(--paper); margin-bottom:5px; text-align:center; }
.wrace-canvas { width:100%; height:200px; background:#06080c; border:1px solid var(--brass-soft); border-radius:10px; display:block; }
.wrace-th__state { font-size:0.78rem; color:var(--paper-dim); margin:6px 0 0; text-align:center; min-height:1.2em; }
.wrace-result { background:linear-gradient(180deg,#101622,#0b0f16); border:1px solid var(--brass-soft); border-radius:12px; padding:12px 14px; }
.wrace-rh { font-family:var(--font-ui); font-size:0.96rem; margin:0 0 6px; color:var(--paper); }
.wrace-rtext { font-size:0.9rem; color:var(--paper); line-height:1.5; margin:0 0 10px; }
.wrace-rhint { font-size:0.86rem; color:var(--paper-dim); margin:0; }
.wrace-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.wrace-badge { font-size:0.78rem; color:var(--paper); background:var(--obsidian); border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; }
.wrace-badge b { color:var(--brass); }
.wrace-badge.is-warn { border-color:var(--ember,#c0734f); }
.wrace-badge.is-warn b { color:var(--ember,#c0734f); }
.wrace-badge.is-soft { color:var(--paper-dim,#b9b3a6); border-style:dashed; }
.wrace-reftoggle { display:inline-flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--paper); margin:4px 0; cursor:pointer; }
.wrace-reftoggle input { width:18px; height:18px; accent-color:var(--brass); }
.wrace-refbody { margin-top:6px; }
.wrace-sci { margin:4px 0; }
.wrace-sci dt { font-family:var(--font-ui); font-size:0.82rem; color:var(--paper); margin-top:8px; }
.wrace-sci dt:first-child { margin-top:0; }
.wrace-sci__r { color:var(--brass); font-weight:400; }
.wrace-sci dd { margin:2px 0 0; font-size:0.78rem; color:var(--paper-dim); font-family:ui-monospace,monospace; }
.wt-solo { margin-top:8px; }
.wt-solo > summary { font-family:var(--font-ui); font-size:0.86rem; color:var(--brass); }
/* adult drawer lives in Thermal Dwell now */
.th-advanced { margin-top:6px; }
.tte--adult { margin-top:8px; }
.cv-thermlink { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; font-size:0.84rem; color:var(--paper-dim); }
@media (max-width: 760px){
  .wrace-cards, .wrace-theaters { grid-template-columns:1fr; }
  .wrace-goals { grid-template-columns:1fr; }
  .wrace-goal { flex-direction:row; justify-content:flex-start; gap:10px; min-height:48px; }
  .wrace-canvas { height:170px; }
  .wrace .ed-btn, #wraceStart, .wrace-goal { min-height:44px; }
  #wraceCustom, #wraceScrub { min-height:40px; }
}

/* ===================== WONDER WORKSHOP — THE GUILD OF 411 ===================== */
.guild-intro { text-align:center; max-width:680px; margin:0 auto 18px; }
.guild-eyebrow { color:var(--brass); }
.guild-headline { font-family:var(--font-ui); font-size:clamp(1.1rem,2.6vw,1.5rem); color:var(--paper); margin:4px 0 8px; line-height:1.25; }
.guild-copy { font-size:0.92rem; color:var(--paper-dim); line-height:1.5; }
.guild-routes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }
.guild-route-card { display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,var(--graphite-2),var(--graphite)); border:1px solid var(--line-strong); border-top:3px solid var(--brass-soft); border-radius:10px; padding:18px 16px; }
.guild-route-card.is-done { border-top-color:var(--brass); }
.grc-seal { width:40px; height:40px; border-radius:50%; border:1px solid var(--brass-soft); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--brass); background:rgba(200,162,74,0.08); }
.grc-name { font-family:var(--font-ui); font-size:1.02rem; color:var(--paper); margin:2px 0 0; }
.grc-story { font-size:0.84rem; color:var(--paper-dim); line-height:1.45; margin:0; }
.grc-focus { font-size:0.78rem; color:var(--paper-faint); margin:2px 0 0; line-height:1.4; }
.grc-k { display:inline-block; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass); margin-right:5px; }
.grc-chips { display:flex; gap:5px; margin-top:4px; }
.grc-chip { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.74rem; border:1px solid var(--line-strong); color:var(--paper-faint); background:var(--obsidian); }
.grc-chip.is-cur { border-color:var(--star); color:var(--paper); }
.grc-chip.is-done { border-color:var(--brass); color:var(--brass); background:rgba(200,162,74,0.12); }
.grc-prog { font-size:0.74rem; color:var(--paper-dim); margin:2px 0 0; }
.guild-route-card .ed-actions { margin-top:auto; }
.guild-map-panel { margin-bottom:18px; }
.guild-routemap { border:1px solid var(--line-strong); border-radius:8px; padding:14px; background:var(--obsidian); }
.gm-hall { text-align:center; font-family:var(--font-ui); font-size:0.78rem; color:var(--brass); border-bottom:1px dashed var(--brass-soft); padding-bottom:8px; margin-bottom:12px; }
.gm-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gm-col { display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:1px solid transparent; border-radius:8px; padding:8px 6px; cursor:pointer; color:var(--paper-dim); }
.gm-col:hover { border-color:var(--brass-soft); }
.gm-col:focus-visible { outline:2px solid var(--star); outline-offset:2px; }
.gm-route { font-size:0.74rem; color:var(--paper); text-align:center; }
.gm-line { display:flex; align-items:center; gap:0; }
.gm-node { width:12px; height:12px; border-radius:50%; border:1px solid var(--line-strong); background:var(--graphite); }
.gm-node.gm-cur { border-color:var(--star); box-shadow:0 0 0 2px rgba(61,169,252,0.3); background:var(--star); }
.gm-node.gm-done { border-color:var(--brass); background:var(--brass); }
.gm-link { width:16px; height:2px; background:var(--brass-soft); }
.gm-seal { font-size:0.6rem; letter-spacing:0.08em; color:var(--brass); min-height:0.8em; }
.guild-maplist { display:flex; flex-direction:column; gap:2px; margin-top:10px; font-size:0.72rem; color:var(--paper-faint); }
.guild-secondary { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px; }
.guild-notes-badge { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.8rem; color:var(--paper-dim); background:var(--obsidian); border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; }
.gnb-label { color:var(--brass); }
.gnb-btns { display:flex; gap:6px; }
.gnb-btns .ed-btn { padding:4px 10px; font-size:0.72rem; }
/* route chapter view */
.route-topbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.route-topbar__t { font-family:var(--font-ui); font-size:0.9rem; color:var(--brass); flex:1 1 auto; }
.guild-back { padding:6px 12px; }
.guild-routebar { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:14px; background:rgba(61,169,252,0.08); border:1px solid rgba(61,169,252,0.3); border-radius:8px; flex-wrap:wrap; }
.guild-routebar__t { font-size:0.78rem; color:var(--paper-dim); }
.route-view .route-chapter { max-width:720px; margin:0 auto; }
.route-progress { display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.rp-dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.84rem; border:1px solid var(--line-strong); color:var(--paper-faint); background:var(--obsidian); }
.rp-dot.is-cur { border-color:var(--star); color:var(--paper); }
.rp-dot.is-done { border-color:var(--brass); color:var(--brass); background:rgba(200,162,74,0.12); }
.rc-eyebrow { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass); margin:0 0 4px; }
.rc-title { font-family:var(--font-ui); font-size:clamp(1.1rem,2.4vw,1.4rem); color:var(--paper); margin:0 0 8px; }
.rc-story { font-size:0.92rem; color:var(--paper-dim); font-style:italic; line-height:1.5; margin:0 0 10px; }
.rc-obj { font-size:0.96rem; color:var(--paper); line-height:1.5; margin:0 0 14px; }
.rc-k { display:inline-block; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass); margin-right:6px; }
.rc-actions { margin-bottom:10px; }
.rc-bridge { font-style:italic; }
.route-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; border-top:1px solid var(--line-strong); padding-top:12px; }
.rc-count { font-size:0.78rem; color:var(--paper-faint); }
.route-nav .ed-btn[disabled] { opacity:0.4; cursor:default; }
@media (max-width: 820px){
  .guild-routes, .gm-cols { grid-template-columns:1fr; }
  .guild-notes-badge { margin-left:0; width:100%; }
  .guild-secondary { flex-direction:column; align-items:stretch; }
  .guild-secondary .ed-btn, .route-nav .ed-btn, .route-topbar .ed-btn, .grc-start, .grc-learn { min-height:44px; }
  .gm-line { justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .route-view, .guild-hall { animation:none; } }

/* defensive: no page-level horizontal overflow in the Wonder Workshop */
.scene--wonder { overflow-x: hidden; }
@media (max-width: 820px){ .gm-link { display:none; } }

/* ===================== THE 411 FIELD GUIDE ===================== */
.fg-launcher { position:fixed; right:14px; bottom:14px; z-index:80; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:linear-gradient(180deg,var(--graphite-2),var(--graphite)); border:1px solid var(--brass-soft); color:var(--brass); font-family:var(--font-ui); font-size:0.82rem; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,0.4); }
.fg-launcher:hover { border-color:var(--brass); color:var(--paper); }
.fg-launcher:focus-visible { outline:2px solid var(--star); outline-offset:2px; }
.fg-launcher__ic { font-size:1rem; }
.fg-overlay { position:fixed; inset:0; z-index:82; pointer-events:none; }
/* spotlight ring — non-blocking; rings the target, never covers it */
.fg-spot { position:fixed; z-index:83; border:2px solid var(--star); border-radius:8px; box-shadow:0 0 0 2px rgba(61,169,252,0.25), 0 0 0 9999px rgba(8,10,14,0.0); pointer-events:none; transition:left .18s var(--ease), top .18s var(--ease), width .18s var(--ease), height .18s var(--ease); }
.fg-spot__tag { position:absolute; top:-22px; left:0; background:var(--star); color:#06080c; font-family:var(--font-ui); font-size:0.66rem; font-weight:600; padding:2px 7px; border-radius:5px; white-space:nowrap; }
@keyframes fgPulse { 0%,100%{ box-shadow:0 0 0 2px rgba(61,169,252,0.25);} 50%{ box-shadow:0 0 0 5px rgba(61,169,252,0.12);} }
.fg-spot { animation:fgPulse 1.8s var(--ease-in-out) infinite; }
/* current guided target gets a ring + raised z so it stays usable */
.fg-target { outline:2px solid var(--star) !important; outline-offset:2px; border-radius:6px; position:relative; z-index:84; }
/* coach rail — fixed bottom panel, never covers the target */
.fg-coach { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:85; width:min(440px,calc(100vw - 24px)); max-height:60vh; overflow:auto; pointer-events:auto; background:linear-gradient(180deg,#10141d,#0b0e14); border:1px solid var(--brass-soft); border-radius:12px; padding:14px 16px; box-shadow:0 10px 34px rgba(0,0,0,0.5); }
.fg-coach__head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fg-step { font-family:var(--font-ui); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--star); }
.fg-coach__tool { font-size:0.72rem; color:var(--paper-faint); flex:1 1 auto; }
.fg-coach__t { font-family:var(--font-ui); font-size:1rem; color:var(--paper); margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.fg-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--brass); color:var(--obsidian); font-size:0.74rem; font-weight:700; }
.fg-coach__dl { margin:0 0 10px; }
.fg-coach__dl dt { font-family:var(--font-ui); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-top:8px; }
.fg-coach__dl dt:first-child { margin-top:0; }
.fg-coach__dl dd { margin:2px 0 0; font-size:0.86rem; color:var(--paper); line-height:1.45; }
.fg-coach__nav { display:flex; flex-wrap:wrap; gap:6px; }
.fg-coach__nav .ed-btn { font-size:0.74rem; padding:7px 11px; }
.fg-x { margin-left:auto; background:transparent; border:0; color:var(--paper-faint); font-size:0.9rem; cursor:pointer; padding:2px 6px; border-radius:5px; }
.fg-x:hover { color:var(--paper); }
.fg-x:focus-visible { outline:2px solid var(--star); }
/* menu / Start Here */
.fg-menu { position:fixed; right:14px; bottom:62px; z-index:85; width:min(360px,calc(100vw - 24px)); max-height:70vh; overflow:auto; pointer-events:auto; background:linear-gradient(180deg,#10141d,#0b0e14); border:1px solid var(--brass-soft); border-radius:12px; padding:14px 16px; box-shadow:0 10px 34px rgba(0,0,0,0.5); }
.fg-menu__head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fg-menu__t { font-family:var(--font-ui); font-size:0.92rem; color:var(--paper); margin:0; flex:1 1 auto; }
.fg-modeseg { display:flex; gap:4px; margin-bottom:10px; }
.fg-modebtn { flex:1; padding:8px 6px; border-radius:7px; border:1px solid var(--line-strong); background:var(--obsidian); color:var(--paper-dim); font-size:0.74rem; cursor:pointer; }
.fg-modebtn.is-active { border-color:var(--star); color:var(--paper); background:#141a24; }
.fg-modebtn:focus-visible { outline:2px solid var(--star); outline-offset:1px; }
.fg-k { font-family:var(--font-ui); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin:8px 0 3px; }
.fg-purpose { font-size:0.86rem; color:var(--paper); margin:0 0 4px; line-height:1.45; }
.fg-goals { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:5px; }
.fg-goal { width:100%; text-align:left; background:var(--obsidian); border:1px solid var(--line-strong); border-radius:7px; padding:8px 10px; color:var(--paper-dim); font-size:0.82rem; cursor:pointer; }
.fg-goal:hover { border-color:var(--brass-soft); color:var(--paper); }
.fg-goal:focus-visible { outline:2px solid var(--star); outline-offset:1px; }
.fg-note { font-size:0.82rem; color:var(--paper-dim); margin:6px 0; }
.fg-menu__foot { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; border-top:1px solid var(--line-strong); padding-top:10px; }
.fg-menu__foot .ed-btn { font-size:0.72rem; padding:6px 10px; }
/* importance-based control language (color is never the only cue — labels/badges/rings accompany) */
.fg-primary { border-color:var(--brass) !important; }
.fg-supporting { opacity:0.92; }
.fg-warn { border-color:var(--ember,#c0734f) !important; }
.fg-danger { border-color:#8c4a4a !important; }
@media (prefers-reduced-motion: reduce){ .fg-spot { animation:none; transition:none; } }
@media (max-width: 760px){
  .fg-launcher { right:10px; bottom:10px; padding:11px 14px; min-height:44px; }
  .fg-launcher__t { display:none; }
  .fg-coach { left:0; right:0; transform:none; bottom:0; width:100%; max-height:54vh; border-radius:14px 14px 0 0; }
  .fg-menu { left:0; right:0; bottom:60px; width:100%; border-radius:12px 12px 0 0; }
  .fg-coach__nav .ed-btn, .fg-modebtn, .fg-goal, .fg-menu__foot .ed-btn { min-height:44px; }
}

/* Warmth Race — exposure testing controls + header strip + result table */
.wrace-header { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 10px; }
.wrace-hcell { background:var(--obsidian); border:1px solid var(--line-strong); border-radius:8px; padding:7px 9px; display:flex; flex-direction:column; gap:1px; }
.wrace-hk { font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); }
.wrace-hcell b { color:var(--paper); font-size:0.9rem; }
.wrace-targetrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.wrace-targetrow input[type=number] { width:110px; font-family:ui-monospace,monospace; font-size:0.95rem; text-align:center; background:var(--obsidian); color:var(--paper); border:1px solid var(--line-strong); border-radius:6px; padding:7px 6px; }
.wrace-targetrow .block-label { margin:0; }
.wrace-durout { font-size:0.8rem; color:var(--paper-dim); }
#wraceDurationRange { width:100%; margin:4px 0; }
.wrace-presets { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.wrace-preset { background:var(--obsidian); border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; color:var(--paper-dim); font-size:0.78rem; cursor:pointer; }
.wrace-preset.is-on { border-color:var(--star); color:var(--paper); background:#141a24; }
.wrace-preset:focus-visible { outline:2px solid var(--star); outline-offset:1px; }
.wrace-adv summary { font-size:0.82rem; color:var(--brass); }
.wrace-st { color:var(--paper); }
.wrace-dir { font-size:0.74rem; color:var(--paper-faint); }
.wrace-rmeta { font-size:0.82rem; color:var(--paper-dim); margin:0 0 8px; }
.wrace-rmeta b { color:var(--paper); }
.wrace-tablewrap { overflow-x:auto; border:1px solid var(--line-strong); border-radius:8px; margin:8px 0; }
.wrace-tbl { width:100%; border-collapse:collapse; font-size:0.74rem; min-width:380px; }
.wrace-tbl th, .wrace-tbl td { padding:6px 8px; text-align:right; border-bottom:1px solid var(--line-strong); white-space:nowrap; color:var(--paper-dim); }
.wrace-tbl th { color:var(--paper-faint); font-weight:500; text-transform:uppercase; letter-spacing:0.03em; font-size:0.62rem; }
.wrace-tbl td:first-child, .wrace-tbl th:first-child { text-align:left; color:var(--paper); }
@media (max-width: 760px){
  .wrace-header { grid-template-columns:1fr 1fr; }
  .wrace-targetrow input[type=number], .wrace-preset, #wraceMetric, #wraceStrength, #wraceDurationRange { min-height:40px; }
}

/* ===================== SOURCE BEHAVIOR MONITOR ===================== */
.sb-info { --sb:rgba(90,209,154,0.5); }
.sb-watch { --sb:var(--brass-soft); }
.sb-elevated { --sb:#c0734f; }
.sb-warning { --sb:#c0524f; }
.sb-ic { display:inline-block; min-width:1.1em; text-align:center; }
.sb-status, .sb-care__h, .sb-flag__h, .sb-pre { display:flex; align-items:center; gap:7px; }
.sb-status { font-family:var(--font-ui); font-size:0.9rem; color:var(--paper); padding:7px 10px; border-radius:8px; border:1px solid var(--sb,var(--line-strong)); background:var(--obsidian); margin-bottom:8px; }
.sb-status .sb-conf { color:var(--paper-faint); font-weight:400; font-size:0.78rem; }
.sb-care { border:1px solid var(--sb,var(--brass-soft)); border-left:3px solid var(--sb,var(--brass-soft)); border-radius:10px; background:linear-gradient(180deg,#0f1219,#0b0e14); padding:12px 14px; margin:10px 0; }
.sb-care__h { font-family:var(--font-ui); font-size:0.9rem; color:var(--paper); margin-bottom:6px; }
.sb-why { font-size:0.84rem; color:var(--paper); line-height:1.45; margin:4px 0; }
.sb-seewhy summary { font-size:0.8rem; color:var(--brass); }
.sb-flag { border:1px solid var(--line-strong); border-left:3px solid var(--sb,var(--line-strong)); border-radius:8px; padding:9px 11px; margin:8px 0; background:var(--obsidian); }
.sb-flag__h { font-family:var(--font-ui); font-size:0.84rem; color:var(--paper); }
.sb-flag__p { font-size:0.82rem; color:var(--paper-dim); margin:4px 0; line-height:1.45; }
.sb-flag__t { font-size:0.74rem; color:var(--paper-faint); margin:2px 0; }
.sb-flag__dl { margin:6px 0 0; }
.sb-flag__dl dt { font-family:var(--font-ui); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); margin-top:7px; }
.sb-flag__dl dd { margin:2px 0 0; font-size:0.78rem; color:var(--paper-dim); line-height:1.4; }
.sw-preflight { margin:8px 0; }
.sb-pre { font-family:var(--font-ui); font-size:0.82rem; color:var(--paper); padding:7px 10px; border-radius:8px; border:1px solid var(--sb,var(--line-strong)); border-left:3px solid var(--sb,var(--line-strong)); background:var(--obsidian); }
.sb-pre__f { color:var(--paper-faint); font-weight:400; font-size:0.74rem; }
.th-risk > summary { cursor:pointer; }
.th-risk[open] > summary { margin-bottom:8px; }
.th-obslog { margin-top:12px; border-top:1px solid var(--line-strong); padding-top:10px; }
.th-obslog .panel__hint { color:var(--paper-dim); }
@media (max-width: 760px){
  .sb-flag__dl dd { font-size:0.82rem; }
  .th-obslog .ctl-grid { grid-template-columns:1fr; }
  #thObsSave, #obsParticle, #obsPlume, #obsAppearance, #obsQcm, #obsNotes { min-height:40px; }
}

/* ===================== ANCHORED WORKSPACE — stable scroll/headers ===================== */
/* Each app scene is its own scroll owner; rooms/wonder now match lab so the masthead is
   always reachable and the scene scrollTop can be reset to the canonical header on nav. */
.scene--rooms, .scene--wonder { overflow-y: auto; overflow-x: hidden; justify-content: safe center; }
.scroll-anchor { display: block; height: 0; width: 0; margin: 0; padding: 0; pointer-events: none; }
/* Dynamic top chrome must not become a scroll anchor (prevents shove-down when async content lands) */
#wonderRouteReturn, .guild-routebar, .lab-toast, #wraceProgress, #wraceCareLive, #tteProgress, #thRiskLive, #thObsNote, #wraceSaveNote, .fg-launcher { overflow-anchor: none; }
/* Reserve space so async result/loading regions don't collapse then expand (avoidable layout shift) */
#wraceResult, #thRiskMonitorBody, #wcOut, #cvOut { min-height: 2.2em; }
#wraceProgress, #tteProgress, #thObsNote, #wraceSaveNote, #thInterp { min-height: 1.2em; }