/* ============================================================================
   Talmaara — Hero "self-navigating app" mock window
   A scaled-down, paper-cutout mock of the app that plays itself: the content
   viewport flows forward through scenes (Dashboard → Worlds → Lore → Books →
   Timeline) while a persistent shell (mini sidebar + breadcrumb) syncs along.
   Pure HTML/CSS — no real content, no clickability. Fully fluid via container
   query units (1cqi = 1% of the window's width), so everything scales as one.
   ========================================================================== */

.tmw-stage {
  width: min(940px, 100%);
  margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
  position: relative;
  z-index: 1;
  perspective: 1600px;
  --mx: 0; --my: 0;
}

/* float (idle bob) and tilt (mouse) are separate layers so they don't fight */
.tmw-float { animation: tmw-bob 9s ease-in-out infinite; will-change: transform; }
.tmw-tilt {
  transform: rotateX(calc(var(--my) * -3.2deg)) rotateY(calc(var(--mx) * 5deg));
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes tmw-bob { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(7px); } }

/* ── the window ─────────────────────────────────────────────────────────── */
.tmw {
  container-type: inline-size;
  container-name: tmw;
  width: 100%;
  aspect-ratio: 92 / 53;
  border-radius: 1.6cqi;
  background: linear-gradient(165deg, #0e1a29 0%, #0a121d 60%, #080f18 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 4px rgba(0,0,0,0.4),
    0 40px 120px -20px rgba(0,0,0,0.65),
    0 0 80px -30px rgba(0,179,255,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tmw::after { /* faint screen sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,0.05), transparent 35%);
}

/* ── top chrome bar ─────────────────────────────────────────────────────── */
.tmw-top {
  height: 5.4cqi; flex: 0 0 auto;
  display: flex; align-items: center; gap: 1.6cqi;
  padding: 0 2.4cqi;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}
.tmw-logo { width: 2.6cqi; height: 2.6cqi; color: #EDE9DF; opacity: 0.9; flex: 0 0 auto; }
.tmw-logo svg { width: 100%; height: 100%; display: block; }
.tmw-crumb { font-family: 'Inter', sans-serif; font-size: 1.7cqi; letter-spacing: 0.02em; display: flex; align-items: center; gap: 1cqi; }
.tmw-crumb-home { color: rgba(237,233,223,0.4); }
.tmw-crumb-sep { color: rgba(237,233,223,0.25); }
.tmw-crumb-active { color: #EDE9DF; font-weight: 600; }
.tmw-crumb-anim { animation: tmw-crumb-in 0.5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes tmw-crumb-in { from { opacity: 0; transform: translateY(0.8cqi); } to { opacity: 1; transform: none; } }
.tmw-top-search {
  margin-left: auto; width: 22cqi; height: 3cqi; border-radius: 1.5cqi;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}

/* ── body: sidebar + view ───────────────────────────────────────────────── */
.tmw-body { flex: 1; display: flex; min-height: 0; }

.tmw-side {
  width: 7cqi; flex: 0 0 auto; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.5cqi;
  padding: 2.2cqi 0;
  border-right: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
}
.tmw-nav-ind {
  position: absolute; left: 0; top: 0; width: 100%; height: 4.6cqi;
  border-radius: 1.2cqi;
  background: rgba(0,179,255,0.12);
  box-shadow: inset 0.35cqi 0 0 #00B3FF;
  transition: transform 0.55s cubic-bezier(.5,.05,.2,1);
  will-change: transform;
}
.tmw-nav-item {
  position: relative;
  width: 4.6cqi; height: 4.6cqi; border-radius: 1.2cqi; z-index: 1;
  display: grid; place-items: center;
}
/* official sidebar icons: default + highlight swap on active (mirrors the app) */
.tmw-nav-item .ic { position: absolute; width: 3cqi; height: 3cqi; object-fit: contain; transition: opacity 0.35s ease; }
.tmw-nav-item .ic.h { opacity: 0; }
.tmw-nav-item.is-active .ic.d { opacity: 0; }
.tmw-nav-item.is-active .ic.h { opacity: 1; }
.tmw-nav-deco .ic.d { opacity: 0.78; }
/* the Dashboard/home item is the official logo mark (currentColor) */
.tmw-nav-logo { color: rgba(237,233,223,0.5); transition: color 0.4s ease; }
.tmw-nav-logo svg { width: 3.1cqi; height: 3.1cqi; display: block; }
.tmw-nav-logo.is-active { color: #00B3FF; }
.tmw-nav-sep { width: 3.4cqi; height: 1px; background: rgba(255,255,255,0.08); margin: 0.4cqi 0; }

.tmw-view { position: relative; flex: 1; min-width: 0; overflow: hidden; }

/* ── scene flow (forward: in from below, out the top) ───────────────────── */
.tmw-scene {
  position: absolute; inset: 0; padding: 3cqi 3.4cqi;
  opacity: 0; transform: translateY(4cqi); pointer-events: none;
  transition: opacity 0.38s ease, transform 0.46s cubic-bezier(.22,.61,.36,1);
}
.tmw-scene.is-active  { opacity: 1; transform: none; }
.tmw-scene.is-leaving { opacity: 0; transform: translateY(-4cqi); }
/* per-scene directional entrance — content whooshes in laterally on the cut (the one cut-energizer;
   :not(.is-leaving) so scenes still exit upward). dashboard keeps the default rise as the "arrival". */
.s-worlds:not(.is-active):not(.is-leaving)    { transform: translateX(7cqi); }
.s-time:not(.is-active):not(.is-leaving)      { transform: translateX(-8cqi); }
.s-lore:not(.is-active):not(.is-leaving)      { transform: translateX(7cqi); }
.s-loreedit:not(.is-active):not(.is-leaving)  { transform: translateX(-8cqi); }
.s-booksdash:not(.is-active):not(.is-leaving) { transform: translateX(7cqi); }
.s-books:not(.is-active):not(.is-leaving)     { transform: translateX(-8cqi); }
/* loreedit: the Connections card whooshes in late from the right (it IS the "linked together" subject) */
.s-loreedit .tmw-refcard { transform: translateX(8cqi) translateY(2.4cqi); }

/* staggered children appear when the scene is active (snappy cascade) */
.tmw-scene .st { opacity: 0; transform: translateY(2.4cqi); transition: opacity .38s ease, transform .44s cubic-bezier(.22,.61,.36,1); }
.tmw-scene.is-active .st { opacity: 1; transform: none; }
.tmw-scene.is-active .st:nth-child(1){ transition-delay:.04s; }
.tmw-scene.is-active .st:nth-child(2){ transition-delay:.10s; }
.tmw-scene.is-active .st:nth-child(3){ transition-delay:.16s; }
.tmw-scene.is-active .st:nth-child(4){ transition-delay:.22s; }
.tmw-scene.is-active .st:nth-child(5){ transition-delay:.28s; }
.tmw-scene.is-active .st:nth-child(6){ transition-delay:.34s; }
.tmw-scene.is-active .st:nth-child(7){ transition-delay:.54s; }
.tmw-scene.is-active .st:nth-child(8){ transition-delay:.62s; }
.tmw-scene.is-active .st:nth-child(9){ transition-delay:.70s; }
.tmw-scene.is-active .st:nth-child(10){ transition-delay:.78s; }
.tmw-scene.is-active .st:nth-child(11){ transition-delay:.86s; }
.tmw-scene.is-active .st:nth-child(12){ transition-delay:.94s; }

/* ── shared mock primitives ─────────────────────────────────────────────── */
.tmw-h { font-family: 'EB Garamond', Georgia, serif; color: #EDE9DF; font-size: 3.4cqi; line-height: 1.1; }
.tmw-eyebrow { font-family: 'Inter', sans-serif; font-size: 1.5cqi; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,179,255,0.75); margin-bottom: 1cqi; }
.tmw-line { height: 1.5cqi; border-radius: 0.8cqi; background: rgba(237,233,223,0.14); }
.tmw-card {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.6cqi;
}

/* ── SCENE: dashboard ───────────────────────────────────────────────────── */
.s-dash .tmw-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.6cqi; }
.s-dash .tmw-pill { width: 12cqi; height: 3.4cqi; border-radius: 1cqi; background: rgba(0,179,255,0.16); border: 1px solid rgba(0,179,255,0.3); }
.s-dash .tmw-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 2cqi; margin-bottom: 2.8cqi; }
.s-dash .tmw-stat { padding: 2cqi; display: flex; flex-direction: column; gap: 0.8cqi; }
.s-dash .tmw-stat-ic { width: 3.2cqi; height: 3.2cqi; border-radius: 0.9cqi; margin-bottom: 0.6cqi; }
.s-dash .tmw-stat-num { font-family: 'EB Garamond', serif; color: #EDE9DF; font-size: 4.6cqi; line-height: 1; }
.s-dash .tmw-stat-lbl { font-family: 'Inter', sans-serif; font-size: 1.5cqi; color: rgba(237,233,223,0.42); }
.s-dash .tmw-break { padding: 2.4cqi; }
.s-dash .tmw-break-bar { height: 2.6cqi; border-radius: 1.3cqi; overflow: hidden; display: flex; margin-bottom: 1.8cqi; }
.s-dash .tmw-break-bar i { height: 100%; width: 0; transition: width 0.9s cubic-bezier(.22,.61,.36,1); }
.s-dash.is-active .tmw-break-bar i { width: var(--w); }
.s-dash .tmw-legend { display: flex; flex-wrap: wrap; gap: 1.4cqi 2.4cqi; }
.s-dash .tmw-leg { display: flex; align-items: center; gap: 0.8cqi; font-family: 'Inter', sans-serif; font-size: 1.4cqi; color: rgba(237,233,223,0.5); }
.s-dash .tmw-leg b { width: 1.4cqi; height: 1.4cqi; border-radius: 50%; }

/* ── SCENE: worlds (planet) ─────────────────────────────────────────────── */
.s-worlds { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqi; }
.tmw-planet {
  position: relative; width: 30cqi; height: 30cqi; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #2f6dbd 0%, #1c4a86 45%, #0e2c54 78%, #0a2244 100%);
  overflow: hidden;
  box-shadow:
    inset -2.2cqi -2.2cqi 5cqi rgba(0,0,0,0.55),
    inset 1.4cqi 1.4cqi 3cqi rgba(255,255,255,0.18),
    0 0 9cqi -1cqi rgba(0,179,255,0.5);
}
.tmw-planet-surface { position: absolute; top: 0; left: 0; width: 200%; height: 100%; animation: tmw-spin 26s linear infinite; }
.tmw-planet-surface span {
  position: absolute; background: linear-gradient(160deg, #5fa55a, #3f7e44); border-radius: 50% 42% 55% 48%;
  opacity: 0.95;
}
.tmw-planet-gloss { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.4) 0%, transparent 26%); pointer-events: none; }
@keyframes tmw-spin { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tmw-planet-name { font-family: 'EB Garamond', serif; color: #EDE9DF; font-size: 3cqi; text-align: center; }
.tmw-world-stats { display: flex; gap: 3cqi; }
.tmw-world-stats div { text-align: center; font-family: 'Inter', sans-serif; }
.tmw-world-stats .n { color: #00B3FF; font-size: 2.6cqi; font-weight: 700; }
.tmw-world-stats .l { color: rgba(237,233,223,0.4); font-size: 1.4cqi; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── SCENE: lore (card grid) ────────────────────────────────────────────── */
.s-lore .tmw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2cqi; margin-top: 1.2cqi; }
.tmw-lorecard { padding: 1.6cqi; display: flex; flex-direction: column; gap: 1cqi; position: relative; overflow: hidden; }
.tmw-lorecard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.7cqi; background: var(--c, #00B3FF); }
.tmw-lorecard .av { width: 5cqi; height: 5cqi; border-radius: 50%; background: linear-gradient(150deg, var(--c,#00B3FF), rgba(255,255,255,0.1)); margin-top: 0.6cqi; }
.tmw-lorecard .l1 { width: 80%; }
.tmw-lorecard .l2 { width: 55%; opacity: 0.6; }

/* ── SCENE: books (the real 3-pane editor: manuscript · page · notes) ────── */
.s-books { display: grid; grid-template-columns: 26cqi 1fr 5cqi; gap: 2.4cqi; align-items: stretch; }
.tmw-caret { display: inline-block; width: 0.35cqi; height: 2.4cqi; background: #00B3FF; vertical-align: middle; animation: tmw-blink 1.1s steps(1) infinite; }
@keyframes tmw-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* manuscript panel */
.bk-side { display: flex; flex-direction: column; gap: 1.1cqi; padding-right: 1.6cqi; border-right: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.bk-title { font-family: 'EB Garamond', Georgia, serif; color: #EDE9DF; font-size: 3.1cqi; line-height: 1; }
.bk-meta  { font-family: 'Inter', sans-serif; font-size: 1.4cqi; color: rgba(237,233,223,0.4); }
.bk-stats { font-family: 'Inter', sans-serif; font-size: 1.4cqi; color: #00B3FF; }
.bk-sec   { font-family: 'Inter', sans-serif; font-size: 1.25cqi; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(237,233,223,0.35); margin-top: 1cqi; }
.bk-tree  { display: flex; flex-direction: column; gap: 0.5cqi; }
.bk-ch, .bk-sc { font-family: 'Inter', sans-serif; font-size: 1.6cqi; color: rgba(237,233,223,0.6); padding: 0.85cqi 1cqi; border-radius: 0.8cqi; display: flex; align-items: center; gap: 0.9cqi; white-space: nowrap; overflow: hidden; }
.bk-ch::before { content: ""; width: 1.7cqi; height: 1.7cqi; border-radius: 0.4cqi; background: rgba(237,233,223,0.2); flex: 0 0 auto; }
.bk-sc { margin-left: 2.4cqi; font-size: 1.5cqi; color: rgba(237,233,223,0.42); }
.bk-sc::before { content: ""; width: 1.4cqi; height: 1.4cqi; border-radius: 0.35cqi; background: rgba(237,233,223,0.14); flex: 0 0 auto; }
.bk-active { background: rgba(0,179,255,0.13); color: #EDE9DF; box-shadow: inset 0.32cqi 0 0 #00B3FF; }

/* editor */
.bk-main { display: flex; flex-direction: column; gap: 1.6cqi; min-width: 0; }
.bk-toolbar { display: flex; gap: 1cqi; padding-bottom: 1.4cqi; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bk-toolbar span { width: 2.6cqi; height: 2.6cqi; border-radius: 0.6cqi; background: rgba(255,255,255,0.05); }
.bk-page { position: relative; flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 1.4cqi; padding: 2.8cqi 3.2cqi; display: flex; flex-direction: column; gap: 1.5cqi; }
.bk-ch-eyebrow { font-family: 'Inter', sans-serif; font-size: 1.3cqi; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,179,255,0.7); text-align: center; }
.bk-page-title { font-family: 'EB Garamond', Georgia, serif; color: #EDE9DF; font-size: 3.8cqi; text-align: center; line-height: 1; }
.bk-divider { width: 8cqi; height: 1px; background: rgba(255,255,255,0.16); margin: 0.3cqi auto 1cqi; }
.bk-page .tmw-line { width: 100%; }
.bk-page .tmw-line.short { width: 46%; }
.bk-typeline { transform-origin: left; }

/* sample manuscript prose + the word the engine links to a lore item */
.bk-proseline { font-family: 'EB Garamond', Georgia, serif; font-size: 2.35cqi; line-height: 1.55; color: rgba(237,233,223,0.72); margin: 0; }
.bk-link { position: relative; color: inherit; padding: 0 0.25cqi; border-radius: 0.4cqi; transition: color .3s ease, background .3s ease, box-shadow .3s ease; }
.bk-link.is-linked {
  color: var(--ll, #4A9B7F);
  background: color-mix(in srgb, var(--ll, #4A9B7F) 16%, transparent);
  box-shadow: inset 0 -0.32cqi 0 color-mix(in srgb, var(--ll, #4A9B7F) 60%, transparent);
  text-transform: capitalize;   /* "the capital" becomes its entry title, "The Capital" */
}
/* the lore item the engine drags from the list onto the page (starts hidden);
   rests centered ON the .bk-link phrase — calibrated 2026-07-04 */
.bk-drop {
  position: absolute; left: 30.75cqi; top: 17.9cqi;
  display: inline-flex; align-items: center; gap: 0.8cqi;
  padding: 0.7cqi 1.1cqi; border-radius: 0.9cqi;
  background: rgba(14,26,41,0.94); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 1.8cqi 4cqi -1cqi rgba(0,0,0,0.65);
  font-family: 'Inter', sans-serif; font-size: 1.55cqi; color: rgba(237,233,223,0.88);
  white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity;
}
/* the source row dims while it's "picked up" */
.bk-side.lore-active .bk-drag-src.is-lifting { opacity: 0.35; }

/* Chapters | Lore tabs + the lore-list panel (the side switches to Lore when the narration reaches it) */
.bk-tabs { display: flex; gap: 2cqi; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.4cqi; }
.bk-tab { font-family: 'Inter', sans-serif; font-size: 1.5cqi; font-weight: 600; color: rgba(237,233,223,0.4); padding-bottom: 1cqi; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bk-tab-ch { color: #EDE9DF; border-bottom-color: #00B3FF; }
.bk-panels { position: relative; flex: 1; }
.bk-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.6cqi; transition: opacity .35s ease; }
.bk-lore { opacity: 0; pointer-events: none; }
.bk-lore-search { font-family: 'Inter', sans-serif; font-size: 1.4cqi; color: rgba(237,233,223,0.4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 0.8cqi; padding: 1cqi 1.2cqi; margin-bottom: 1.2cqi; }
.bk-lore-list { display: flex; flex-direction: column; gap: 1cqi; }
.bk-lore-row { display: flex; align-items: center; gap: 1cqi; font-family: 'Inter', sans-serif; font-size: 1.55cqi; color: rgba(237,233,223,0.78); white-space: nowrap; overflow: hidden; }
.bk-tag { font-family: 'Inter', sans-serif; font-size: 1.05cqi; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lc); background: color-mix(in srgb, var(--lc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); border-radius: 0.5cqi; padding: 0.35cqi 0.7cqi; flex: 0 0 auto; }
.bk-side.lore-active .bk-manuscript { opacity: 0; pointer-events: none; }
.bk-side.lore-active .bk-lore { opacity: 1; pointer-events: auto; }
.bk-side.lore-active .bk-tab-ch { color: rgba(237,233,223,0.4); border-bottom-color: transparent; }
.bk-side.lore-active .bk-tab-lore { color: #EDE9DF; border-bottom-color: #00B3FF; }

/* notes rail */
.bk-notes { writing-mode: vertical-rl; text-orientation: mixed; text-align: center; font-family: 'Inter', sans-serif; font-size: 1.4cqi; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(237,233,223,0.3); border-left: 1px solid rgba(255,255,255,0.07); }

/* ── SCENE: lore editor (single entry — description + connections) ───────── */
.s-loreedit { display: flex; flex-direction: column; gap: 2.6cqi; }
/* the lore entry header — portrait + type eyebrow + name */
.rc-head { display: flex; align-items: center; gap: 2cqi; margin-bottom: 1.8cqi; }
.rc-portrait {
  width: 7cqi; height: 7cqi; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(150deg, #C8933A, rgba(255,255,255,0.12));
  box-shadow: 0 0 0 0.28cqi rgba(200,147,58,0.22);
}
.rc-headtx { display: flex; flex-direction: column; gap: 0.6cqi; text-align: left; }
/* connections — sentence rows, the way the product renders them */
.rc-conn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1cqi; }
.rc-add {
  font-family: 'Inter', sans-serif; font-size: 1.3cqi; color: #00B3FF;
  border: 1px solid rgba(0,179,255,0.5); border-radius: 0.7cqi; padding: 0.4cqi 1cqi; white-space: nowrap;
}
.rc-sentence {
  font-family: 'EB Garamond', Georgia, serif; font-size: 2.05cqi; text-align: left;
  color: rgba(237,233,223,0.82); padding: 1cqi 0.2cqi;
}
.rc-sentence + .rc-sentence { border-top: 1px solid rgba(255,255,255,0.07); }
.rc-sentence b { color: #55A8E8; font-weight: 500; }
.rc-sentence .rc-pulse { display: inline-block; will-change: transform; }
.tmw-doc { display: flex; flex-direction: column; gap: 1.7cqi; }
.tmw-doc .tmw-h { margin-bottom: 1cqi; }
.tmw-doc .tmw-line { width: 100%; }
.tmw-doc .tmw-line.short { width: 38%; }
.tmw-refcard { align-self: start; padding: 2cqi; display: flex; flex-direction: column; gap: 1.4cqi; box-shadow: 0 2cqi 5cqi -1cqi rgba(0,0,0,0.5); }
.tmw-refcard .rc-top { display: flex; align-items: center; gap: 1.4cqi; }
.tmw-refcard .rc-av { width: 5.2cqi; height: 5.2cqi; border-radius: 50%; background: linear-gradient(150deg,#C8933A,rgba(255,255,255,0.12)); flex: 0 0 auto; }
.tmw-refcard .rc-tag { font-family: 'Inter', sans-serif; font-size: 1.3cqi; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,179,255,0.7); }

/* ── SCENE: books dashboard (the shelf of covers) ───────────────────────── */
.s-booksdash { display: flex; align-items: center; justify-content: center; gap: 2.6cqi; }
.bd-book {
  position: relative; width: 18cqi; aspect-ratio: 5 / 7; border-radius: 1.2cqi;
  background: linear-gradient(155deg, var(--bc, #2f5a3f), color-mix(in srgb, var(--bc, #2f5a3f) 45%, #070d14));
  border: 1px solid rgba(255,255,255,0.12); padding: 2.2cqi 2cqi;
  display: flex; flex-direction: column; gap: 1.1cqi;
  /* stacked pages = solid offset shadows (always painted behind — no z-index flicker) + drop shadow */
  box-shadow:
    0.8cqi 0.7cqi 0 -0.2cqi color-mix(in srgb, var(--bc, #2f5a3f) 72%, #05090f),
    1.7cqi 1.5cqi 0 -0.5cqi color-mix(in srgb, var(--bc, #2f5a3f) 58%, #05090f),
    0 3cqi 7cqi -1.5cqi rgba(0,0,0,0.65);
}
.bd-badge { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 1.2cqi; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6cqi 1.1cqi; border-radius: 0.6cqi; background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); }
.bd-genre { font-family: 'Inter', sans-serif; font-size: 1.25cqi; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.bd-title { font-family: 'EB Garamond', Georgia, serif; font-size: 3cqi; line-height: 1.05; color: #fff; }
.bd-tag { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.7cqi; color: rgba(255,255,255,0.55); margin-top: auto; }
.bd-foot { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 1.1cqi; font-family: 'Inter', sans-serif; font-size: 1.35cqi; color: rgba(255,255,255,0.55); }
.bd-add { width: 14cqi; aspect-ratio: 5 / 7; border-radius: 1.2cqi; border: 1px dashed rgba(255,255,255,0.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8cqi;
  color: var(--accent-primary, #00B3FF); font-family: 'Inter', sans-serif; font-size: 1.5cqi; font-weight: 700; }
.bd-add .bd-plus { font-size: 5cqi; line-height: 1; font-weight: 300; }

/* ── SCENE: timeline ────────────────────────────────────────────────────── */
.s-time { display: flex; flex-direction: column; gap: 1.8cqi; }
.tmw-eras { display: flex; flex-direction: column; gap: 0.9cqi; }
.tmw-era { display: flex; gap: 0.5cqi; height: 3cqi; }
.tmw-era i { height: 100%; border-radius: 0.6cqi; opacity: 0.92; }
.tmw-tl { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.5cqi; padding-top: 1cqi; }
.tmw-trow { display: flex; align-items: center; gap: 1.4cqi; }
.tmw-trow .lbl { width: 16cqi; flex: 0 0 auto; }
.tmw-trow .track { position: relative; flex: 1; height: 2.4cqi; }
.tmw-bar { position: absolute; top: 0; height: 100%; border-radius: 1.2cqi;
  width: 0; transition: width 0.9s cubic-bezier(.22,.61,.36,1); }
.s-time.is-active .tmw-bar { width: var(--w); }
.tmw-pip { position: absolute; top: 0.2cqi; width: 2cqi; height: 2cqi; border-radius: 0.4cqi;
  opacity: 0; transform: scale(.4) rotate(0deg); transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.5,.5,1); }
.tmw-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,179,255,0.5); left: 20%;
  animation: tmw-sweep 6s ease-in-out infinite; }
@keyframes tmw-sweep { 0%,100% { left: 16%; } 50% { left: 82%; } }
/* bars fill in TIME order (sorted by left%), not DOM order — reads as a playhead laying events down */
.s-time.is-active .tmw-trow:nth-child(2) .tmw-bar { transition-delay: 0s; }
.s-time.is-active .tmw-trow:nth-child(4) .tmw-bar { transition-delay: .12s; }
.s-time.is-active .tmw-trow:nth-child(3) .tmw-bar { transition-delay: .24s; }
.s-time.is-active .tmw-trow:nth-child(5) .tmw-bar { transition-delay: .36s; }
.s-time.is-active .tmw-pip { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .5s; }

/* ── SCENE: maps ────────────────────────────────────────────────────────── */
.s-maps { display: grid; place-items: center; }
.tmw-map {
  position: relative; width: 92%; height: 86%; border-radius: 2cqi; overflow: hidden;
  background: radial-gradient(130% 100% at 28% 18%, #163349 0%, #0c1f30 58%, #0a1925 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 0 6cqi rgba(0,0,0,0.4);
}
.tmw-map .land { position: absolute; background: linear-gradient(155deg,#3f6e4e,#2b4d38); opacity: 0.94; filter: blur(0.25cqi); box-shadow: 0 0 2cqi rgba(0,0,0,0.3); }
.tmw-map .l1 { left: 7%;  top: 16%; width: 36%; height: 54%; border-radius: 58% 42% 52% 48%; }
.tmw-map .l2 { left: 50%; top: 30%; width: 40%; height: 50%; border-radius: 46% 54% 50% 50%; }
.tmw-map .l3 { left: 30%; top: 60%; width: 20%; height: 26%; border-radius: 50% 50% 45% 55%; transform: rotate(8deg); }
.tmw-map .route { position: absolute; height: 0; border-top: 0.32cqi dashed rgba(214,206,180,0.45); }
.tmw-map .pin {
  position: absolute; width: 2.4cqi; height: 2.4cqi; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 0.5cqi 1cqi rgba(0,0,0,0.55);
  animation: tmw-pin 3.2s ease-in-out infinite;
}
.tmw-map .pin::after { content: ""; position: absolute; inset: 32%; background: rgba(12,18,24,0.85); border-radius: 50%; }
@keyframes tmw-pin { 0%,100% { transform: rotate(-45deg) translateY(0); } 50% { transform: rotate(-45deg) translateY(-0.7cqi); } }
.tmw-map .compass {
  position: absolute; right: 4%; bottom: 6%; width: 7cqi; height: 7cqi; border-radius: 50%;
  border: 1px solid rgba(214,206,180,0.3);
  background: radial-gradient(circle, rgba(214,206,180,0.06), transparent 70%);
}
.tmw-map .compass::before, .tmw-map .compass::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(214,206,180,0.4); }
.tmw-map .compass::before { width: 0.3cqi; height: 70%; transform: translate(-50%,-50%); }
.tmw-map .compass::after  { width: 70%; height: 0.3cqi; transform: translate(-50%,-50%); }

/* ── SCENE: family tree ─────────────────────────────────────────────────── */
.s-family { display: grid; place-items: center; }
.tmw-fam { position: relative; width: 70cqi; max-width: 92%; height: 80%; }
.tmw-fam .node {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.9cqi;
}
.tmw-fam .node .av { width: 6cqi; height: 6cqi; border-radius: 50%; background: linear-gradient(150deg, var(--c,#C8933A), rgba(255,255,255,0.12)); box-shadow: 0 0 0 0.5cqi rgba(255,255,255,0.04), 0 1cqi 2cqi rgba(0,0,0,0.4); }
.tmw-fam .node .nm { width: 9cqi; height: 1.3cqi; border-radius: 0.7cqi; background: rgba(237,233,223,0.22); }
.tmw-fam .ln { position: absolute; background: rgba(0,179,255,0.4); }
.tmw-fam .ln.v { width: 0.34cqi; transform: translateX(-50%); }
.tmw-fam .ln.h { height: 0.34cqi; }

/* ── two-column hero (desktop) ──────────────────────────────────────────── */
.lp-hero-grid { width: min(820px, 100%); }
@media (min-width: 1000px) {
  .lp-hero-grid {
    width: min(1240px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(2rem, 4.5vw, 4.5rem);
    text-align: left;
  }
  .lp-hero-grid .lp-hero-inner { width: 100%; }
  .lp-hero-grid .lp-hero h1 { font-size: clamp(2.6rem, 4vw, 4.1rem); }
  .lp-hero-grid .lp-hero-sub { margin-left: 0; margin-right: 0; max-width: 30rem; }
  .lp-hero-grid .lp-kicker { margin-bottom: 1.75rem; }
  .lp-hero-grid .lp-hero-actions { justify-content: flex-start; }
  .lp-hero-grid .lp-hero-proof { justify-content: flex-start; }
  .lp-hero-grid .tmw-stage { margin: 0; }
}

/* ── parallax starfield / nebula behind the hero ────────────────────────── */
.lp-stars {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  --sx: 0px; --sy: 0px;
}
.lp-stars span {
  position: absolute; inset: -10%;
  background-repeat: repeat;
  transform: translate(var(--sx), var(--sy));
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.lp-stars .s1 {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.6px 1.6px at 64% 14%, rgba(180,220,255,0.7), transparent),
    radial-gradient(1.3px 1.3px at 38% 62%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 82% 48%, rgba(200,225,255,0.6), transparent),
    radial-gradient(1.2px 1.2px at 24% 84%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 90% 78%, rgba(255,255,255,0.55), transparent);
  background-size: 100% 100%;
  animation: tmw-twinkle 6s ease-in-out infinite;
}
.lp-stars .s2 {
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 48% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 8% 54%, rgba(180,220,255,0.5), transparent),
    radial-gradient(1px 1px at 72% 66%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 56% 88%, rgba(200,225,255,0.45), transparent);
  animation: tmw-twinkle 8s ease-in-out infinite reverse;
}
@keyframes tmw-twinkle { 0%,100% { opacity: 0.85; } 50% { opacity: 0.5; } }

/* ════════════════════════════════════════════════════════════════════════
   LANDING SECTIONS (redesign) — reuse the page's theme tokens
   ════════════════════════════════════════════════════════════════════════ */

/* feature panel: the locked mock window is the visual (no extra card frame) */
.lp-feature-stage { width: 100%; }
.lp-feature-stage .tmw-stage { margin: 0 auto; width: 100%; max-width: 560px; }
/* the "samples" are square (taller) for more vertical presence; even columns */
.lp-features .lp-feature-panel { grid-template-columns: 1fr 1fr; }
.lp-feature-stage .tmw { aspect-ratio: 1 / 1; }
/* center each scene's content in the taller frame so nothing sits top-stuck
   (worlds/maps/family already center themselves) */
.lp-feature-stage .s-dash,
.lp-feature-stage .s-lore { display: flex; flex-direction: column; justify-content: center; }
.lp-feature-stage .s-time { justify-content: center; }
.lp-feature-stage .s-books { align-content: center; }
/* extra content that only fills the taller SQUARE feature windows
   (kept hidden in the wide hero so it never clips there) */
.tmw-extra { display: none; }
.lp-feature-stage .tmw-era.tmw-extra,
.lp-feature-stage .tmw-trow.tmw-extra,
.lp-feature-stage .tmw-lorecard.tmw-extra,
.lp-feature-stage .tmw-refcard.tmw-extra { display: flex; }
.lp-feature-stage .tmw-line.tmw-extra { display: block; }

/* "why us" contrast line inside a feature */
.lp-contrast {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1.05rem;
  border-left: 2px solid var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  border-radius: 0 10px 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem; line-height: 1.55;
  color: color-mix(in srgb, var(--text-light) 74%, transparent);
}
.lp-contrast b { color: var(--text-light); font-weight: 700; }

/* ── capability grid (breadth) ──────────────────────────────────────────── */
.lp-caps-head { text-align: center; margin: 4rem auto 2.5rem; }
.lp-caps-head .lp-label { justify-content: center; display: inline-flex; }
.lp-caps-head h3 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; margin: 0.4rem 0 0;
}
/* auto-scrolling marquee — keeps the section short by showing one row that
   continuously slides. The track holds two copies of the cards; the animation
   translates it by exactly half its width for a seamless, jump-free loop. */
.lp-caps-carousel {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-caps-track {
  display: flex; gap: 1rem; width: max-content;
  animation: lp-caps-scroll 55s linear infinite;
}
.lp-caps-carousel:hover .lp-caps-track { animation-play-state: paused; }
@keyframes lp-caps-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.5rem)); } /* half the gap bridges the seam */
}
.lp-cap {
  flex: 0 0 300px; padding: 1.6rem 1.5rem; border: 1px solid var(--border-light); border-radius: 15px;
  background: var(--card-bg-light);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lp-caps-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .lp-cap[aria-hidden="true"] { display: none; }
}
.lp-cap:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-light)); }
.lp-cap-ic {
  --ic: var(--accent-primary);
  width: 2.4rem; height: 2.4rem; border-radius: 9px; margin-bottom: 1rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ic) 15%, transparent);
  color: var(--ic);                 /* inline svgs (calendar/search) use currentColor */
}
.lp-cap-ic svg { width: 1.4rem; height: 1.4rem; }
/* file-based sidebar SVGs can't be recolored as <img>, so recolor via mask */
.lp-cap-glyph {
  display: block; width: 1.5rem; height: 1.5rem;
  background-color: var(--ic);
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}
.lp-cap h4 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text-light); }
.lp-cap p { font-family: 'Inter', sans-serif; font-size: 0.86rem; line-height: 1.55; margin: 0; color: color-mix(in srgb, var(--text-light) 56%, transparent); }

/* ── "Without / With Talmaara" comparison ───────────────────────────────── */
.lp-why { padding: 4.5rem 1.5rem; }
.lp-why-inner { width: min(960px, 100%); margin: 0 auto; }
.lp-why-head { text-align: center; margin-bottom: 2.25rem; }
.lp-why-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;
}
.lp-why-head h2 em { color: var(--accent-primary); font-style: italic; }
.lp-why-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.lp-why-col { border-radius: 18px; padding: 2rem 1.9rem; border: 1px solid var(--border-light); }
.lp-why-col.bad { background: color-mix(in srgb, var(--text-light) 3%, transparent); }
.lp-why-col.good {
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--card-bg-light));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-light));
  box-shadow: 0 8px 50px -18px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}
.lp-why-tag {
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 1.4rem;
}
.lp-why-col.bad  .lp-why-tag { color: color-mix(in srgb, var(--text-light) 45%, transparent); }
.lp-why-col.good .lp-why-tag { color: var(--accent-primary); }
.lp-why-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.45; }
.lp-why-row + .lp-why-row { border-top: 1px solid color-mix(in srgb, var(--text-light) 8%, transparent); }
.lp-why-col.bad  .lp-why-row { color: color-mix(in srgb, var(--text-light) 52%, transparent); }
.lp-why-col.good .lp-why-row { color: color-mix(in srgb, var(--text-light) 86%, transparent); }
.lp-why-ic { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; }
.lp-why-col.bad  .lp-why-ic { color: color-mix(in srgb, var(--text-light) 38%, transparent); }
.lp-why-col.good .lp-why-ic { color: var(--accent-primary); }

@media (max-width: 760px) {
  .lp-cap { flex-basis: 78vw; max-width: 300px; }
  .lp-why-cols { grid-template-columns: 1fr; }
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tmw-float, .tmw-planet-surface, .tmw-doc .tmw-caret, .tmw-playhead,
  .tmw-map .pin, .lp-stars .s1, .lp-stars .s2 { animation: none !important; }
  .tmw-tilt, .lp-stars span { transition: none !important; }
  .tmw-scene { transition: opacity .3s ease !important; }
  .tmw-pip, .tmw-bar { transition: none !important; }
  /* the directional whoosh + connections-card slide collapse to a simple fade */
  .s-worlds:not(.is-active):not(.is-leaving), .s-time:not(.is-active):not(.is-leaving),
  .s-lore:not(.is-active):not(.is-leaving), .s-loreedit:not(.is-active):not(.is-leaving),
  .s-booksdash:not(.is-active):not(.is-leaving), .s-books:not(.is-active):not(.is-leaving),
  .s-loreedit .tmw-refcard { transform: none !important; }
}

/* ── small screens: cap the size so it never dwarfs the copy ─────────────── */
@media (max-width: 620px) {
  .tmw-stage { width: min(440px, 100%); }
  .tmw-top-search { display: none; }
}