/* ============================================================================
   Talmaara intro — a LIVE, seekable animated explainer that behaves like a video.
   The whole animation is a function of one clock (see lp-intro.js seek(t)), so it
   can be played in-page (audio-driven) AND rendered frame-by-frame to an mp4.
   All look/feel knobs are CSS variables on .lp-intro for easy swapping.
   ========================================================================== */

.lp-intro-section { padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.lp-intro-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lp-intro-head h2 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0.5rem 0 0;
  color: var(--text-light, #EDE9DF);
}

.lp-intro {
  /* ── style tokens (swap freely) ───────────────────────────── */
  --intro-display: 'EB Garamond', Georgia, serif;
  --intro-ui: 'Inter', sans-serif;
  --intro-accent: #00B3FF;
  --intro-ink: #EDE9DF;
  --intro-dim: rgba(237,233,223,0.55);

  position: relative; width: min(1000px, 100%); margin: 0 auto;
  border-radius: 16px; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 130px -34px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07);
}

/* ── the 16:9 stage ─────────────────────────────────────────── */
.lp-intro-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 35%, #0e2138 0%, #081320 55%, #060d17 100%);
  container-type: inline-size;
}
/* Dither overlay — browsers render gradients at 8-bit with no dithering, so the
   dark radial glows/backdrops band into visible stair-steps (worst in video).
   A fine grayscale-noise tile at very low opacity breaks the steps into
   imperceptible grain AT THE SOURCE, so it looks smooth on the page and in any
   capture. Sits above everything, ignores input, doesn't animate (no perf hit). */
.lp-intro-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 9;
  background-image: url("/assets/images/noise-dither.svg");
  background-size: 180px 180px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* starfield */
.lp-intro-sky { position: absolute; inset: -5%; pointer-events: none; }
.lp-intro-sky::before, .lp-intro-sky::after {
  content: ""; position: absolute; inset: -30%;   /* oversized so the transform drift never reveals an edge */
  background-image:
    radial-gradient(1.4px 1.4px at 14% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 62% 16%, rgba(180,220,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 38% 64%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 82% 48%, rgba(200,225,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 24% 84%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 90% 78%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 6% 56%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 48% 38%, rgba(210,230,255,.65), transparent),
    radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 30% 12%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 54% 90%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 96% 22%, rgba(190,220,255,.6), transparent),
    radial-gradient(1px 1px at 18% 46%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 76% 32%, rgba(255,255,255,.55), transparent);
  background-repeat: repeat;
  background-size: 32cqi 32cqi;
  /* drift via transform (compositor-only, no per-frame repaint) so it never janks scrolling.
     back layer (::before) drifts slower than the front (::after) for a parallax night-sky feel */
  animation: lpi-twinkle 7s ease-in-out infinite, lpi-drift-a 66s linear infinite;
}
.lp-intro-sky::after {
  opacity: .6; background-size: 24cqi 24cqi;
  animation: lpi-twinkle 9s ease-in-out infinite reverse, lpi-drift-b 48s linear infinite;
}
@keyframes lpi-twinkle { 0%,100%{opacity:.9} 50%{opacity:.5} }
/* night-sky drift via transform; drift = one tile so the loop is seamless, oversized layer hides the seam */
@keyframes lpi-drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-32cqi, 32cqi, 0); } }
@keyframes lpi-drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(24cqi, -24cqi, 0); } }
/* stop every intro animation (starfield, planet, carets, transitions) when scrolled out of view (perf) */
.lp-intro.is-suspended *, .lp-intro.is-suspended *::before, .lp-intro.is-suspended *::after,
.v2-hero.is-suspended *, .v2-hero.is-suspended *::before, .v2-hero.is-suspended *::after { animation-play-state: paused !important; }

/* camera (panned/zoomed by JS via --cx/--cy/--cs) */
.lp-intro-cam {
  position: absolute; inset: 0; transform-origin: center center;
  transform: translate(var(--cx,0px), var(--cy,0px)) scale(var(--cs,1));
  will-change: transform;
}

/* a beat = a full-stage layer the engine fades/moves */
.lp-beat { position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; will-change: opacity, transform; pointer-events: none; }
.lpi-close-btn { pointer-events: auto; }   /* only the visible CTA stays clickable */

/* ── beat: cold open (logo mark) ────────────────────────────── */
.lpi-mark { width: 26cqi; height: 26cqi; color: var(--intro-ink); filter: drop-shadow(0 0 6cqi rgba(0,179,255,.45)); }
.lpi-mark svg { width: 100%; height: 100%; display: block; }
.lpi-wordmark { font-family: var(--intro-display); font-size: 6cqi; letter-spacing: .28em; text-transform: uppercase; color: var(--intro-ink); margin-top: 3cqi; }
.lpi-tagline { font-family: var(--intro-display); font-size: 2.5cqi; font-style: italic; color: rgba(237,233,223,0.62); margin-top: 1.2cqi; opacity: 0; }
.lpi-close-note { font-family: var(--intro-ui); font-size: 1.5cqi; letter-spacing: .04em; color: rgba(237,233,223,0.4); margin-top: 1.4cqi; opacity: 0; }

/* ── beat: scatter (drifting fragments) ─────────────────────── */
.lpi-frags { position: absolute; inset: 0; }
.lpi-frag {
  position: absolute; left: calc(50% - 8.5cqi); top: calc(50% - 5.5cqi);
  width: 17cqi; height: 11cqi; border-radius: 1.4cqi;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 2cqi 5cqi rgba(0,0,0,0.4); padding: 1.6cqi;
  display: flex; flex-direction: column; gap: 1.1cqi; will-change: transform, opacity;
}
.lpi-frag::before { content:""; height: 1.4cqi; width: 60%; border-radius: .7cqi; background: var(--fc, rgba(237,233,223,.4)); }
.lpi-frag i { height: 1.1cqi; border-radius: .6cqi; background: rgba(237,233,223,.16); display:block; }
.lpi-frag i:nth-child(2){ width:85% } .lpi-frag i:nth-child(3){ width:55% }

/* ── opening word-synced layer: the world assembles, then scatters into tools ── */
.op-layer { position: absolute; inset: 0; pointer-events: none; }
.op-layer > * { position: absolute; opacity: 0; will-change: transform, opacity; }

/* the "world" container the facets assemble into (legacy box — superseded by .lps-planet) */
.op-world { left: calc(50% - 23cqi); top: calc(50% - 15cqi); width: 46cqi; height: 30cqi;
  border: 1px solid rgba(255,255,255,0.13); border-radius: 2cqi; box-shadow: inset 0 0 7cqi rgba(0,179,255,0.07); }

/* the created world — a spinning, painted planet the lore cards dock onto.
   Resolves big and bright on "so you've created an intricate world", then the
   engine shrinks + dims it behind the cards; it gives way on the break. */
.lps-glow {
  left: calc(50% - 23cqi); top: calc(50% - 23cqi); width: 46cqi; height: 46cqi;
  border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(0,179,255,0.16) 0%, rgba(0,179,255,0.05) 44%, transparent 66%);
}
.lps-planet {
  left: calc(50% - 15cqi); top: calc(50% - 15cqi); width: 30cqi; height: 30cqi;
  border-radius: 50%; overflow: hidden; will-change: transform, opacity;
  background: radial-gradient(circle at 36% 30%, #2F6EA8 0%, #1B4F82 36%, #0C2A4C 66%, #061224 100%);
  box-shadow:
    inset -3cqi -2.6cqi 6cqi rgba(0,0,0,0.55),
    inset 1.1cqi 1cqi 3cqi rgba(150,205,255,0.22),
    0 0 5cqi rgba(0,179,255,0.22), 0 0 14cqi rgba(0,179,255,0.10);
}
/* painted detail — landmasses and cloud streaks on a slowly rotating layer */
.lps-band {
  position: absolute; inset: -16%; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(9cqi 6cqi at 30% 38%, rgba(122,190,152,0.34) 0%, rgba(122,190,152,0.10) 55%, transparent 70%),
    radial-gradient(7cqi 4.6cqi at 62% 60%, rgba(101,160,120,0.30) 0%, transparent 68%),
    radial-gradient(5cqi 3.4cqi at 48% 24%, rgba(160,150,110,0.26) 0%, transparent 70%),
    radial-gradient(4cqi 3cqi at 72% 34%, rgba(122,190,152,0.22) 0%, transparent 72%),
    radial-gradient(3.4cqi 2.4cqi at 22% 62%, rgba(150,170,130,0.20) 0%, transparent 72%),
    linear-gradient(104deg, transparent 30%, rgba(200,225,255,0.10) 38%, transparent 46%, rgba(200,225,255,0.07) 58%, transparent 66%);
}
.lps-limb { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 2.4cqi rgba(165,215,255,0.42); }

/* ── word-synced flyins over the Worlds scene (v5) — a month calendar card
   ("…its own calendar") and an ages/eras card ("…and its own ages"), flown
   in by the engine in the same grammar as the opening tool cards ────────── */
.lpa-flyins { position: absolute; inset: 0; pointer-events: none; }
.lpa-flyins > * {
  position: absolute; opacity: 0; will-change: transform, opacity;
  font-family: var(--intro-ui);
  background: rgba(10,20,34,0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1cqi; box-shadow: 0 1.6cqi 4cqi rgba(0,0,0,0.5);
  padding: 1.1cqi 1.3cqi;
}
.lpa-card-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85cqi;
  font-size: 0.9cqi; letter-spacing: 0.14em; text-transform: uppercase; color: var(--intro-dim);
}
.lpa-card-head b { font-size: 1.3cqi; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: rgba(237,233,223,0.88); }
.lpa-cal { left: calc(50% - 8cqi); top: calc(50% - 7cqi); width: 16cqi; }
.lpa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45cqi; }
.lpa-cal-grid i { display: block; aspect-ratio: 1; border-radius: 0.3cqi; background: rgba(237,233,223,0.13); }
.lpa-cal-grid i.on { background: var(--intro-accent); box-shadow: 0 0 0.8cqi rgba(0,179,255,0.7); }
.lpa-ages { left: calc(50% - 8.5cqi); top: calc(50% - 4.8cqi); width: 17cqi; }
.lpa-ages-row { display: flex; align-items: center; gap: 0.7cqi; }
.lpa-ages-row + .lpa-ages-row { margin-top: 0.7cqi; }
.lpa-ages-row .nm { font-size: 0.95cqi; color: rgba(237,233,223,0.7); width: 5.6cqi; flex: none; white-space: nowrap; }
.lpa-ages-row .bar { height: 1.15cqi; border-radius: 0.6cqi; background: var(--c, #3A6A8C); opacity: 0.9; }

/* facet cards (people / places / history) */
.op-facet { left: calc(50% - 8cqi); top: calc(50% - 5cqi); width: 16cqi; height: 10cqi; border-radius: 1.4cqi;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 2cqi 5cqi rgba(0,0,0,0.4);
  padding: 1.6cqi 1.6cqi 1.6cqi 4.6cqi; display: flex; flex-direction: column; gap: 1cqi; }
.op-facet::before { content:""; position:absolute; left:1.6cqi; top:1.6cqi; bottom:1.6cqi; width:1cqi; border-radius:0.5cqi; background: var(--fc); }
.op-facet i { height: 1.1cqi; border-radius: 0.6cqi; background: rgba(237,233,223,0.2); }
.op-facet i:nth-child(3){ width: 66%; }
.op-people { --fc:#C8933A; } .op-places { --fc:#4A9B7F; } .op-history { --fc:#2D35A8; }
/* identity glyphs */
.og { position: absolute; right: 1.6cqi; top: calc(50% - 1.5cqi); width: 3cqi; height: 3cqi; }
.og-avatar { border-radius: 50%; background: #C8933A; }
.og-avatar::after { content:""; position:absolute; left:-0.7cqi; right:-0.7cqi; bottom:-1.4cqi; height:1.7cqi; border-radius: 1.7cqi 1.7cqi 0 0; background:#C8933A; }
.og-pin { background:#4A9B7F; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.og-pin::after { content:""; position:absolute; inset:34%; background:#0c1320; border-radius:50%; }
/* a clean solid vertical accent bar (reads better than the old barbell) */
.og-time { top: calc(50% - 2cqi); width: 0.9cqi; height: 4cqi; background: #2D35A8; border-radius: 0.5cqi; }
.og-time::before, .og-time::after { display: none; }

/* named tools (recognizable props) */
.op-tool { box-shadow: 0 3cqi 7cqi rgba(0,0,0,0.55); }
/* notebook */
.op-notebook { left: calc(50% - 7cqi); top: calc(50% - 9cqi); width: 14cqi; height: 18cqi; border-radius: 0.6cqi 1.4cqi 1.4cqi 0.6cqi;
  background: linear-gradient(160deg,#3b3327,#28221a); border: 1px solid rgba(255,255,255,0.1);
  padding: 3cqi 2.2cqi 2.2cqi 5cqi; display:flex; flex-direction:column; gap:2cqi; }
.nb-spiral { position:absolute; left:1.5cqi; top:1.4cqi; bottom:1.4cqi; width:1.3cqi;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 38%, transparent 42%) center/100% 2.8cqi repeat-y; }
.op-notebook::before { content:""; position:absolute; left:3.6cqi; top:1cqi; bottom:1cqi; width:0.35cqi; background:#C05858; opacity:0.55; }
.op-notebook i { height:1cqi; border-radius:0.5cqi; background: rgba(237,233,223,0.24); }
.op-notebook i:nth-child(4){ width:72%; }
/* document */
.op-doc { left: calc(50% - 6cqi); top: calc(50% - 7.5cqi); width: 12cqi; height: 15cqi; border-radius: 0.8cqi;
  background: #d9d5c9; padding: 2.2cqi; display:flex; flex-direction:column; gap:1.3cqi; }
.doc-dogear { position:absolute; right:0; top:0; width:3.2cqi; height:3.2cqi; background: linear-gradient(225deg, transparent 0 50%, #c2bca8 50%); }
.doc-title { height: 1.6cqi; width: 58%; border-radius:0.4cqi; background:#2D35A8; }
.op-doc i { height: 0.9cqi; border-radius:0.4cqi; background: rgba(20,30,45,0.32); }
.op-doc i:nth-child(5){ width:66%; }
/* browser of tabs */
.op-tabs { left: calc(50% - 9cqi); top: calc(50% - 6cqi); width: 18cqi; height: 12cqi; border-radius:1.2cqi; overflow:hidden;
  background:#10141d; border: 1px solid rgba(255,255,255,0.1); }
.tab-bar { position:absolute; top:0; left:0; right:0; height: 3.6cqi; background:#0c1019; display:flex; align-items:flex-end; gap:0.5cqi; padding: 0 1cqi; }
.tab-bar b { width: 3.4cqi; height: 2.7cqi; border-radius: 0.6cqi 0.6cqi 0 0; display:block; }
.tab-bar b:nth-child(1){ background:#C8933A; } .tab-bar b:nth-child(2){ background:#4A9B7F; }
.tab-bar b:nth-child(3){ background:#C05858; } .tab-bar b:nth-child(4){ background:#4F85C0; opacity:.55; }
.tab-body { position:absolute; top:3.6cqi; left:0; right:0; bottom:0; background:#141a26; }
/* ghost tabs (the "dozen") */
.op-ghost { left: calc(50% - 3cqi); top: calc(50% - 4.5cqi); width: 6cqi; height: 2.3cqi;
  background: rgba(160,190,230,0.16); border-radius: 0.6cqi 0.6cqi 0 0; }

@media (prefers-reduced-motion: reduce) {
  /* calm fallback: show the assembled facets in place, no travel/jitter, tools hidden */
  .op-world { opacity: 0.6 !important; }
  .op-people, .op-places, .op-history { opacity: 0.9 !important; }
  .op-tool, .op-ghost, .lpi-frag { opacity: 0 !important; }
}

/* ── beat: reveal (the app window) ──────────────────────────── */
.lpi-window { width: 82%; }
.lpi-window .tmw-stage { margin: 0 auto; }

/* ── beat: closing CTA ──────────────────────────────────────── */
.lpi-close { display: flex; flex-direction: column; align-items: center; gap: 1.4cqi; will-change: transform; }
.lpi-close .lpi-mark { width: 17cqi; height: 17cqi; }
.lpi-close-btn {
  margin-top: 1.8cqi; font-family: var(--intro-ui); font-weight: 600; font-size: 1.95cqi; line-height: 1;
  color: #08121d; background: var(--intro-accent); text-decoration: none;
  padding: 1.45cqi 3.4cqi; border-radius: 999px; letter-spacing: .01em;
  box-shadow: 0 0.6cqi 1.8cqi -0.7cqi rgba(0,179,255,.5);
  animation: lpi-cta-pulse 2.6s ease-in-out infinite;
}
@keyframes lpi-cta-pulse {
  0%,100% { box-shadow: 0 0.6cqi 1.6cqi -0.8cqi rgba(0,179,255,.45); }
  50%     { box-shadow: 0 0.6cqi 2.4cqi -0.7cqi rgba(0,179,255,.7); }
}

/* ── captions / kinetic text ────────────────────────────────── */
.lp-intro-caps { position: absolute; left: 0; right: 0; bottom: 2.5%; padding: 0 9%; text-align: center; pointer-events: none; z-index: 3; }
.lp-cap-line {
  display: inline-block; margin: 0;
  font-family: var(--intro-display); font-size: 2.35cqi; line-height: 1.3; color: var(--intro-ink);
  text-shadow: 0 1cqi 4cqi rgba(0,0,0,0.75);
  opacity: 0; transform: translateY(1.4cqi); transition: none;
}
.lp-cap-line em { color: var(--intro-accent); font-style: italic; }

/* ── player chrome ──────────────────────────────────────────── */
.lp-intro-poster {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(6,12,22,0.35); backdrop-filter: blur(1px);
  transition: opacity .4s ease; cursor: pointer;
}
.lp-intro.is-playing .lp-intro-poster { opacity: 0; pointer-events: none; }
.lp-intro-play {
  width: 9cqi; height: 9cqi; min-width: 64px; min-height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(0,179,255,0.16);
  backdrop-filter: blur(6px); color: var(--intro-ink); cursor: pointer;
  display: grid; place-items: center; transition: transform .16s ease, background .16s ease;
  box-shadow: 0 8px 40px rgba(0,179,255,0.3);
}
.lp-intro-play:hover { transform: scale(1.06); background: rgba(0,179,255,0.26); }
.lp-intro-play svg { width: 42%; height: 42%; margin-left: 6%; }

.lp-intro-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem;
  background: linear-gradient(to top, rgba(6,12,22,0.85), transparent);
  opacity: 0; transition: opacity .25s ease; font-family: var(--intro-ui);
}
.lp-intro:hover .lp-intro-bar, .lp-intro.is-paused .lp-intro-bar, .lp-intro.is-ended .lp-intro-bar { opacity: 1; }
.lp-intro-cc { transition: opacity .15s ease; }
.lp-intro-cc.is-off { opacity: 0.4; }
.lp-intro-sound .snd-wave { transition: opacity .15s ease; }
.lp-intro-sound.is-off .snd-wave { opacity: 0; }   /* hide the wave when muted */
.lp-intro-bar button { background: none; border: 0; color: var(--intro-ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.lp-intro-bar button svg { width: 18px; height: 18px; }
.lp-intro-scrub { flex: 1; appearance: none; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.2); cursor: pointer; }
.lp-intro-scrub::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--intro-accent); cursor: pointer; }
.lp-intro-scrub::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--intro-accent); }
.lp-intro-time { font-size: 0.78rem; color: var(--intro-dim); min-width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lp-intro-sky::before, .lp-intro-sky::after { animation: none; }
  .lpi-close-btn { animation: none; }
}

/* ── beat: hook — the continuity catch (manuscript page + Scene Lens + verdict)
   All motion is driven by lp-intro.js; initial opacities are the pre-roll state. */
.lph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--intro-ui); }
.lph-pair { display: flex; align-items: center; gap: 2.4cqi; transform: translate(11.5cqi, -4.5cqi); }

.lph-page {
  width: 42cqi; padding: 2.6cqi 3.2cqi; border-radius: 1.1cqi; opacity: 0;
  background: linear-gradient(180deg, #101E32, #0B1524);   /* solid — the catch plays over the app window */
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 2.2cqi 5.5cqi rgba(0,0,0,0.45);
}
.lph-eyebrow { font-size: 1.05cqi; letter-spacing: 0.16em; text-transform: uppercase; color: var(--intro-dim); }
.lph-ptitle { font-family: var(--intro-display); font-size: 2.5cqi; color: var(--intro-ink); margin: 0.4cqi 0 1.5cqi; }
.lph-line { display: block; height: 0.72cqi; border-radius: 0.4cqi; background: rgba(237,233,223,0.13); margin: 1cqi 0; }
.lph-prose {
  font-family: var(--intro-display); font-size: 1.72cqi; line-height: 1.55;
  color: rgba(237,233,223,0.88); margin: 1.3cqi 0 0;
  clip-path: inset(-10% 100% -10% 0);
}
.lph-name { color: #C8933A; border-bottom: 1px solid rgba(200,147,58,0.4); position: relative; white-space: nowrap; }
.lph-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.28cqi; height: 0.24cqi;
  background: #C05858; border-radius: 0.2cqi;
  transform: scaleX(var(--u, 0)); transform-origin: left;
}
.lph-typerow { display: flex; align-items: center; gap: 0.8cqi; margin-top: 1.2cqi; }
.lph-typeline { display: block; height: 0.72cqi; width: 17cqi; border-radius: 0.4cqi; background: rgba(237,233,223,0.16); transform: scaleX(0); transform-origin: left; }

.lph-lens {
  width: 22.5cqi; padding: 1.5cqi; border-radius: 1.1cqi; opacity: 0;
  background: #0A1422; border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 2cqi 5cqi rgba(0,0,0,0.4);
}
.lph-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* chips can never push out of the row */
.lph-lens-head { display: flex; align-items: center; gap: 0.7cqi; font-size: 1.02cqi; letter-spacing: 0.14em; text-transform: uppercase; color: var(--intro-dim); margin-bottom: 1.1cqi; }
.lph-lens-dot { width: 0.8cqi; height: 0.8cqi; border-radius: 50%; background: var(--intro-accent); box-shadow: 0 0 0.9cqi var(--intro-accent); }
.lph-row { display: flex; align-items: center; gap: 0.9cqi; padding: 0.7cqi 0.8cqi; border-radius: 0.7cqi; opacity: 0; }
.lph-row + .lph-row { margin-top: 0.45cqi; }
.lph-row .av { width: 1.9cqi; height: 1.9cqi; border-radius: 50%; background: var(--c, #4F85C0); flex: none; opacity: 0.9; }
.lph-row .nm { font-size: 1.32cqi; color: rgba(237,233,223,0.85); flex: 1; }
.lph-chip { font-size: 0.95cqi; padding: 0.28cqi 0.7cqi; border-radius: 2cqi; white-space: nowrap; }
.lph-chip.ok { color: #7fd1a8; background: rgba(74,155,127,0.16); border: 1px solid rgba(74,155,127,0.35); }
.lph-chip.bad { color: #ff9b93; background: rgba(192,88,88,0.18); border: 1px solid rgba(192,88,88,0.5); }
.lph-row.lph-dead { background: rgba(192,88,88,0.10); border: 1px solid rgba(192,88,88,0.28); }

.lph-audit {
  position: absolute; left: 50%; top: 69%; width: 46cqi; opacity: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.3cqi;
  padding: 1.4cqi 1.8cqi; border-radius: 1.1cqi;
  background: #1A0D11; border: 1px solid rgba(192,88,88,0.55);
  box-shadow: 0 2cqi 6cqi rgba(0,0,0,0.55), 0 0 3cqi rgba(192,88,88,0.15);
}
.lph-audit-dot { width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: #C05858; box-shadow: 0 0 1.1cqi rgba(192,88,88,0.8); flex: none; }
.lph-audit-title { font-size: 1.45cqi; font-weight: 700; color: #ffb1a8; letter-spacing: 0.02em; }
.lph-audit-line { font-size: 1.22cqi; color: rgba(237,233,223,0.8); margin-top: 0.25cqi; }
.lph-audit-rule { margin-left: auto; font-size: 0.9cqi; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,233,223,0.5); border: 1px solid rgba(237,233,223,0.22); padding: 0.32cqi 0.8cqi; border-radius: 0.5cqi; white-space: nowrap; }

/* ── window-scene accents driven by the engine ──────────────── */
/* worlds: a moon in orbit ("…even their own moons") */
.tmw-moon {
  position: absolute; left: 50%; top: 50%; width: 1.5cqi; height: 1.5cqi; margin: -0.75cqi 0 0 -0.75cqi;
  border-radius: 50%; background: #d8dee9; box-shadow: 0 0 0.9cqi rgba(216,222,233,0.7);
  opacity: 0; z-index: 3; pointer-events: none;
}
/* books: the scene gets pinned to the timeline */
.bk-pin {
  position: absolute; left: 4.5%; top: 3%; display: inline-flex; align-items: center; gap: 0.55cqi;
  font-family: var(--intro-ui); font-size: 0.98cqi; color: #9fd9ff; white-space: nowrap;
  background: rgba(0,179,255,0.12); border: 1px solid rgba(0,179,255,0.4);
  padding: 0.42cqi 0.9cqi; border-radius: 2cqi; opacity: 0;
}
.bk-pin-ic { width: 0.85cqi; height: 0.85cqi; border-radius: 0.22cqi; background: var(--intro-accent); box-shadow: 0 0 0.7cqi rgba(0,179,255,0.7); }
/* books: highlight a phrase you wrote → it becomes lore, instantly (quick-capture) */
.bk-cap-t {
  background-image: linear-gradient(rgba(0,179,255,0.30), rgba(0,179,255,0.30));
  background-repeat: no-repeat; background-size: calc(var(--hl, 0) * 100%) 100%;
  border-radius: 0.3cqi;
}
/* …and once the chip lands in the lore list, the captured phrase becomes a
   live lore link — same treatment as .bk-link.is-linked, in its chip's color —
   and capitalizes into its proper entry title ("salt road" → "Salt Road") */
.bk-cap-t.is-linked {
  color: #4F85C0;
  background-color: color-mix(in srgb, #4F85C0 16%, transparent);
  box-shadow: inset 0 -0.32cqi 0 color-mix(in srgb, #4F85C0 60%, transparent);
  text-transform: capitalize;
}
/* the new lore-list entry the capture creates — absent from the list until
   the chip lands, then it INSERTS: the engine grows it from zero height so
   the rows below shift down to make room */
.bk-cap-row { display: none; opacity: 0; will-change: max-height, margin-top, opacity; }
.bk-cap-chip {
  position: absolute; left: 9%; top: 30%; display: inline-flex; align-items: center; gap: 0.55cqi;
  font-family: var(--intro-ui); font-size: 0.98cqi; color: rgba(237,233,223,0.9); white-space: nowrap;
  background: rgba(10,20,34,0.97); border: 1px solid rgba(0,179,255,0.5);
  padding: 0.42cqi 0.8cqi; border-radius: 0.6cqi; opacity: 0; z-index: 6;
  box-shadow: 0 1cqi 2.6cqi rgba(0,0,0,0.5), 0 0 1cqi rgba(0,179,255,0.2);
  will-change: transform, opacity;
}
.bk-cap-new {
  font-size: 0.72cqi; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9fd9ff; border: 1px solid rgba(0,179,255,0.55); border-radius: 2cqi; padding: 0.16cqi 0.5cqi;
}
/* books: the Scene Lens reads along while you write (the payoff) */
.bk-lens {
  position: absolute; right: 1.6%; top: 16%; width: 23%; z-index: 5; opacity: 0;
  padding: 1.1cqi; border-radius: 0.9cqi; font-family: var(--intro-ui);
  background: rgba(10,20,34,0.96); border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1.6cqi 4cqi rgba(0,0,0,0.5);
}
.bk-lens-head { display: flex; align-items: center; gap: 0.55cqi; font-size: 0.8cqi; letter-spacing: 0.14em; text-transform: uppercase; color: var(--intro-dim); margin-bottom: 0.8cqi; }
.bk-lens-dot { width: 0.6cqi; height: 0.6cqi; border-radius: 50%; background: var(--intro-accent); box-shadow: 0 0 0.7cqi var(--intro-accent); }
.bk-lens-row { display: flex; align-items: center; gap: 0.65cqi; padding: 0.5cqi 0.6cqi; border-radius: 0.55cqi; }
.bk-lens-row + .bk-lens-row { margin-top: 0.35cqi; }
.bk-lens-row .av { width: 1.35cqi; height: 1.35cqi; border-radius: 50%; background: var(--c, #4F85C0); flex: none; opacity: 0.9; }
.bk-lens-row .nm { font-size: 1cqi; color: rgba(237,233,223,0.85); flex: 1; }
.bk-lens-chip { font-size: 0.74cqi; padding: 0.2cqi 0.55cqi; border-radius: 2cqi; white-space: nowrap; }
.bk-lens-chip.ok { color: #7fd1a8; background: rgba(74,155,127,0.16); border: 1px solid rgba(74,155,127,0.35); }
.bk-lens-chip.bad { color: #ff9b93; background: rgba(192,88,88,0.18); border: 1px solid rgba(192,88,88,0.5); }
.bk-lens-row.bk-lens-dead { background: rgba(192,88,88,0.10); border: 1px solid rgba(192,88,88,0.28); }
/* books: the verdict bar ("After death — …") */
.bk-audit {
  position: absolute; left: 30%; right: 5%; bottom: 7%; z-index: 5; opacity: 0;
  display: flex; align-items: center; gap: 0.9cqi; font-family: var(--intro-ui);
  padding: 0.9cqi 1.2cqi; border-radius: 0.8cqi;
  background: rgba(26,13,17,0.96); border: 1px solid rgba(192,88,88,0.55);
  box-shadow: 0 1.4cqi 3.6cqi rgba(0,0,0,0.5);
}
.bk-audit-dot { width: 0.85cqi; height: 0.85cqi; border-radius: 50%; background: #C05858; box-shadow: 0 0 0.8cqi rgba(192,88,88,0.8); flex: none; }
.bk-audit-text { font-size: 0.98cqi; color: rgba(237,233,223,0.82); }
.bk-audit-text b { color: #ffb1a8; }
.bk-audit-rule {
  margin-left: auto; font-size: 0.74cqi; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(237,233,223,0.5); border: 1px solid rgba(237,233,223,0.22);
  padding: 0.26cqi 0.65cqi; border-radius: 0.45cqi; white-space: nowrap;
}
.bk-audit-rule.is-hot { color: #9fd9ff; border-color: rgba(0,179,255,0.65); box-shadow: 0 0 1cqi rgba(0,179,255,0.35); }