/* Trace V5 — Workspace (round 2). The homepage behaves like the product.
   Hero = a glass query over refracted light (the brief's first wow); the full workspace appears once, at §21, and its
   sidebar stays as the page's navigation. One pill language drives the thread for the whole page.
   Inter (UI, display via opsz) + Roboto Serif Light (film statement + finale only).
   Signals = data encoding for source types only: Blue documents · Butter conversations · Coral meetings & interviews. */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Inter', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t2: #8B8A85;                 /* grey second line: two headlines only */
  --hair: rgb(17 17 17 / .08);
  --hair-2: rgb(17 17 17 / .12);
  --fill: #F4F3F0;
  --pane: #FAFAF8;

  --nav-h: 72px;
  --rail-w: 216px;
  --ws-pad: clamp(20px, 4.45vw, 80px);
  --room-pad: clamp(32px, 3.9vw, 56px);
  --room-max: 1120px;

  --k-doc: var(--blue);    --k-doc-ink: var(--blue-ink);
  --k-conv: var(--butter); --k-conv-ink: var(--butter-ink);
  --k-meet: var(--coral);  --k-meet-ink: var(--coral-ink);

  --tr-accent: #E4E2DD;
  --tr-accent-ink: var(--graphite);
  --tr-highlight: color-mix(in srgb, var(--coral) 40%, transparent);
  --tr-dot: var(--ink);
  --tr-edge: #CFCDC7;
  --tr-map-dim: .42;
  --map-idea: #E6E3DC;
  --map-person: var(--white);
  --map-source: var(--white);
  --tr-radius-l: 14px;
}

/* ---------- source kinds: one rule, every component ---------- */
:is([data-id=S01], [data-id=S08], [data-id=S09], [data-id=S11], [data-id=S12]) { --k: var(--k-doc); --k-ink: var(--k-doc-ink); }
:is([data-id=S07]) { --k: var(--k-conv); --k-ink: var(--k-conv-ink); }
:is([data-id=S02], [data-id=S03], [data-id=S04], [data-id=S05], [data-id=S06], [data-id=S10], [data-id=S13], [data-id=S14]) { --k: var(--k-meet); --k-ink: var(--k-meet-ink); }

/* ---------- base ---------- */
html { scroll-padding-top: 20px; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--white); font-feature-settings: 'cv11'; overflow-x: clip; }
.tnum, .room__meta, .rail__n, .win__upd, .insp, .tl, .mix__legend, .peek__h, .peek__meta, .rc__t span, .rs__steps li > span:first-child, .cx__table .num, .cx__sum, .pane__meta, .mapinsp__meta,
.tr-src__meta, .tr-tl__date, .tr-chain__date, .tr-frag__date, .tr-frag__ann, .tr-conn__date, .tr-conn__when, .tr-sv__t, .tr-sv__meta, .tr-kn__v, .tr-int__count, .fraglist time { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--butter) 60%, transparent); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }
.serif { font-family: var(--font-serif); font-weight: 300; font-feature-settings: normal; }
.js:not(.serif-ok) :is(.serif, .tr-conn__q) { font-family: var(--font-sans); }
.eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--graphite); text-transform: none; }
.h2 { margin: 0; font-size: clamp(36px, 4.15vw, 60px); font-weight: 460; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; }
.h2 > span { display: block; }
.h2--pair > span + span { color: var(--t2); }
.lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; max-width: 28em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn .arr { display: inline-block; transition: transform var(--t) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--ink { background: var(--ink); color: var(--white); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
.btn--ink:hover { background: var(--graphite); }
.btn--glass { color: var(--ink); background: rgb(255 255 255 / .62); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 1px 2px rgb(17 17 17 / .06); }
.btn--glass:hover { background: rgb(255 255 255 / .9); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: #E9E8E4; }
.btn--s { height: 36px; padding: 0 15px; font-size: 14px; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

/* reveal (quiet layer) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-reveal), transform .9s var(--ease-reveal); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================ pills: the one thread control ============================ */
.pills { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--graphite); font: inherit; font-size: 14px; font-weight: 450; letter-spacing: -.006em; line-height: 1.2; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast), box-shadow var(--t-fast) var(--ease-out);
}
.pill:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgb(17 17 17 / .3); }
.pill__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.25px currentColor; opacity: .55; transition: background-color var(--t) var(--ease-out), opacity var(--t); }
.pill[aria-pressed=true] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill[aria-pressed=true] .pill__dot { background: var(--ink); opacity: 1; }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pills--hero .pill { background: rgb(255 255 255 / .74); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 1px 2px rgb(17 17 17 / .06), 0 6px 16px -8px rgb(40 30 60 / .18); }
.pills--hero .pill:hover { background: rgb(255 255 255 / .95); }
.pills--hero .pill[aria-pressed=true] { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink), 0 1px 2px rgb(17 17 17 / .06), 0 8px 20px -10px rgb(40 30 60 / .25); }
.pills--compact .pill { height: 32px; padding: 0 12px 0 10px; font-size: 13px; gap: 7px; }
.pills--compact .pill__dot { width: 6px; height: 6px; }

/* ============================ top nav ============================ */
.top { position: relative; z-index: 5; display: flex; align-items: center; gap: 24px; height: var(--nav-h); padding: 0 var(--ws-pad); }
.top__brand { display: inline-flex; color: var(--ink); text-decoration: none; border-radius: 6px; }
.top__nav { display: flex; gap: 4px; margin-left: 28px; }
.top__nav a, .top__signin { padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 450; color: var(--graphite); text-decoration: none; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast); }
.top__nav a:hover, .top__signin:hover { background: rgb(255 255 255 / .6); color: var(--ink); }
.top__end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.top a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================ hero ============================ */
.hero { position: relative; isolation: isolate; padding: 0 var(--ws-pad) clamp(56px, 8vh, 84px); }
.hero__plate { position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--nav-h)); bottom: 0; overflow: hidden; background: #C9D2E6; pointer-events: none; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 36%;
}
.hero__plate::after { /* keep the top luminous for type, let the colour sit in the middle, fade into the page */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .42) 0%, rgb(255 255 255 / .1) 30%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / .5) 90%, #fff 100%);
}
.hero__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; column-gap: 64px; padding: clamp(24px, 4.5vh, 48px) 0 clamp(26px, 4vh, 40px); }
.hero__h1 { margin: 0; font-size: clamp(42px, 5.75vw, 88px); font-weight: 460; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hero__sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--graphite); letter-spacing: -.006em; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.js .hero__side { animation: v5-rise 900ms var(--ease-reveal) both; }
.js .hero__side { animation-delay: 120ms; }
.js .hero__stage { animation: v5-rise 900ms var(--ease-reveal) 220ms both; }
@keyframes v5-rise { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__stage .pills { margin-bottom: 16px; }
.hero__ask { position: relative; }
.hero__open { position: absolute; left: 24px; bottom: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.hero__open .arr { display: inline-block; transition: transform var(--t) var(--ease-out); }
.hero__open:hover .arr { transform: translateY(2px); }
.hero__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* the glass query (the page's one real-blur element on desktop) */
#hero-ask { --tr-scale: 1; }
#hero-ask .tr-glass { background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 1px 0 rgb(255 255 255 / .9) inset, 0 2px 6px rgb(40 30 60 / .05), 0 30px 70px -30px rgb(40 30 60 / .28); }
#hero-ask .tr-glass::before { inset: -4px; border-radius: calc(var(--tr-radius-l) + 4px); background: rgb(255 255 255 / .2); }
#hero-ask .tr-ask__query { padding-left: 22px; }
#hero-ask .tr-ask__inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 48px; align-items: start; padding: 0 24px; }
#hero-ask .tr-ask__status { grid-column: 1 / -1; padding-top: 16px; }
#hero-ask .tr-ask__answer { grid-column: 1; grid-row: 2; margin-top: 8px; font-size: 19px; text-wrap: pretty; }
#hero-ask .tr-ask__sources { grid-column: 2; grid-row: 2; margin-top: 10px; padding-bottom: 20px; }
#hero-ask .tr-src__btn { min-height: 40px; padding-block: 6px; }

/* ============================ the quiet beat (§19) ============================ */
.beat { padding: clamp(96px, 13vh, 132px) var(--ws-pad) 0; text-align: center; }
.beat__h { margin: 18px auto 0; max-width: 14em; font-size: clamp(40px, 5.6vw, 84px); font-weight: 440; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.beat__h > span { display: block; }
.beat__premise { max-width: 33em; margin: 30px auto 0; font-size: 16px; line-height: 1.6; color: var(--graphite); text-wrap: pretty; }
.beat__premise p { margin: 0; }
.beat__lead, .beat__close { color: var(--ink); }
.beat__lines { margin: 4px 0 !important; }
.beat__chain { position: relative; margin-top: clamp(40px, 6vh, 64px); text-align: left; }
.beat__when { display: flex; justify-content: flex-end; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.beat__chain tr-chain { height: 340px; --tr-chain-bg: var(--white); }

/* ============================ fragments (§20) ============================ */
.frag { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(96px, 13vh, 136px) var(--ws-pad) 0; }
.frag__text .h2 { margin-top: 14px; font-size: clamp(34px, 3.4vw, 48px); }
.frag__text .lead { margin-top: 18px; }
.kinds { display: flex; flex-direction: column; gap: 6px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair); list-style: none; font-size: 13px; color: var(--graphite); }
.kinds li { display: flex; align-items: center; gap: 9px; }
.sw { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.frag__canvas tr-fragments { height: 520px; }
.fraglist { display: none; }

/* ============================ demo head + workspace ============================ */
.demohead { padding: clamp(104px, 14vh, 144px) var(--ws-pad) clamp(32px, 4.5vh, 44px); }
.demohead .h2 { margin-top: 14px; }

.ws { position: relative; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; padding: 0 var(--ws-pad) clamp(96px, 12vh, 128px); overflow-x: clip; }
.ws__main { grid-column: 2; min-width: 0; }

/* ---------- rail ---------- */
.rail {
  grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 20px; z-index: 6; align-self: start; width: var(--rail-w);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 0s;
}
.rail__in { position: relative; display: flex; flex-direction: column; max-height: inherit; overflow: auto; scrollbar-width: none; padding: 16px 12px 14px; border-radius: 16px; background: transparent; transition: background-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.rail__in::-webkit-scrollbar { display: none; }
.rail.is-float .rail__in { background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .07), 0 1px 2px rgb(17 17 17 / .04), 0 18px 40px -18px rgb(17 17 17 / .2); }
.rail.is-away { opacity: 0; visibility: hidden; transform: translateX(-10px); transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms; }
.rail__ws { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--hair); }
.rail__wsmark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--ink); color: var(--white); }
.rail__wsmark svg { width: 17px; height: 17px; }
.rail__wsname { min-width: 0; font-size: 13.5px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__wsname b { font-weight: 550; letter-spacing: -.01em; color: var(--ink); }
.rail__nav { position: relative; display: flex; flex-direction: column; gap: 1px; }
.rail__ind { position: absolute; left: 0; right: 0; top: 0; height: 36px; border-radius: 9px; background: var(--fill); transform: translateY(var(--y, 0)); opacity: 0; transition: transform 420ms var(--ease-out), opacity 200ms; }
.rail__nav.has-active .rail__ind { opacity: 1; }
.rail__item { position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 14px; font-weight: 450; color: var(--muted-2); text-decoration: none; transition: color var(--t-fast); }
.rail__item .ic { color: var(--muted); transition: color var(--t-fast); }
.rail__item:hover, .rail__item[aria-current] { color: var(--ink); }
.rail__item:hover .ic, .rail__item[aria-current] .ic { color: var(--ink); }
.rail__item[aria-current] { font-weight: 520; }
.rail__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.rail__n { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rail__n--new i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.rail__n.is-bump { animation: v5-bump 520ms var(--ease-out); }
@keyframes v5-bump { 30% { color: var(--ink); transform: translateY(-2px); } }
.rail__thread { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 12px 10px 0; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.35; }
.rail__th { color: var(--muted); font-size: 12px; }
.rail__tq { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; }
.rail__tq::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.rail__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-out); }
.rail.is-float .rail__more { grid-template-rows: 1fr; }
.rail__morein { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 280ms var(--ease-out); }
.rail.is-float .rail__morein { opacity: 1; transition-delay: 120ms; }
.rail:not(.is-float) .rail__morein { visibility: hidden; }
.rail__cta { width: calc(100% - 4px); margin: 14px 2px 2px; }

/* ---------- the workspace window (§21) ---------- */
.win { position: relative; z-index: 0; }
.win::before { /* the window frame, spanning rail + main */
  content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; right: 0; left: calc(-1 * var(--rail-w));
  border-radius: 16px; background: var(--white);
  box-shadow: 0 0 0 1px rgb(17 17 17 / .09), 0 1px 2px rgb(17 17 17 / .04), 0 40px 80px -48px rgb(17 17 17 / .28);
}
.win::after { /* sidebar half of the frame */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--rail-w)); width: var(--rail-w);
  border-radius: 16px 0 0 16px; background: var(--pane); box-shadow: inset -1px 0 0 var(--hair);
}
.win__bar { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px 0 28px; border-bottom: 1px solid var(--hair); }
.crumb { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.crumb .ic { width: 14px; height: 14px; color: #B9B7B1; }
.crumb b { color: var(--ink); font-weight: 520; }
.win__bar .pills { margin-left: auto; }
.win__upd { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.win__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 340px); }
.win__ask { min-width: 0; }
.win__ask tr-ask { --tr-scale: 1.04; padding: 24px 28px 28px; }
.win .tr-ask__panel--plain { background: none; box-shadow: none; border-radius: 0; }
.win .tr-ask__query { border-radius: 12px; box-shadow: 0 0 0 1px rgb(17 17 17 / .1), 0 1px 2px rgb(17 17 17 / .04); padding-left: 16px; }
.win .tr-ask__query::after { display: none; }
.win .tr-ask__inner { padding: 0 2px; }
.win .tr-ask__answer { text-wrap: pretty; }
.win__side { min-width: 0; border-left: 1px solid var(--hair); }

/* source preview */
.peek { padding: 22px 24px 20px; font-size: 13px; min-height: 248px; }
.peek__h { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; }
.peek__top { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.peek__name { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -.012em; line-height: 1.3; }
.peek__meta { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.peek__ex { margin: 14px 0 0; font-size: 15px; line-height: 1.5; letter-spacing: -.008em; color: var(--ink); text-wrap: pretty; }
.peek__ex mark { color: inherit; padding: 0 1px; border-radius: 2px; background: linear-gradient(color-mix(in srgb, var(--k, var(--coral)) 42%, transparent), color-mix(in srgb, var(--k, var(--coral)) 42%, transparent)) no-repeat 0 62% / 100% 80%; }
.peek__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 14px 0 0; font-size: 12.5px; }
.peek__dl dt { color: var(--muted); }
.peek__dl dd { margin: 0; }
.peek__go { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.peek__go .arr { display: inline-block; transition: transform var(--t) var(--ease-out); }
.peek__go:hover .arr { transform: translateY(2px); }
.peek__in { transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.peek__in.is-out { opacity: 0; transform: translateY(5px); }
.peek__wait { display: grid; gap: 10px; padding-top: 6px; }
.peek__wait i { display: block; height: 10px; border-radius: 5px; background: var(--fill); }
.peek__wait i:nth-child(1) { width: 62%; height: 34px; border-radius: 9px; } .peek__wait i:nth-child(3) { width: 78%; }

/* thread context (inspector) */
.insp { padding: 18px 24px 24px; border-top: 1px solid var(--hair); font-size: 13px; }
.insp__h { margin: 0 0 9px; font-size: 12px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.insp__blk + .insp__blk { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.insp__dec { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.insp__glyph { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); display: flex; align-items: center; justify-content: center; }
.insp__glyph::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.insp__dtitle { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -.012em; line-height: 1.3; }
.insp__dmeta { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.insp__swap { transition: opacity 240ms var(--ease-out), transform 340ms var(--ease-out); }
.insp__swap.is-out { opacity: 0; transform: translateY(6px); }
.tl { position: relative; height: 58px; margin: 2px 2px 0; }
.tl__axis { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: rgb(17 17 17 / .22); }
.tl__tick { position: absolute; top: 18px; width: 1px; height: 9px; background: rgb(17 17 17 / .22); }
.tl__tick--s { top: 20px; height: 5px; background: rgb(17 17 17 / .14); }
.tl__lab { position: absolute; top: 36px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tl__lab--r { transform: translateX(-100%); }
.tl__today { position: absolute; top: 4px; width: 1px; height: 26px; background: var(--ink); }
.tl__today span { position: absolute; top: -3px; right: 5px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.tl__dot {
  position: absolute; top: 22px; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--k, var(--ink)); box-shadow: 0 0 0 2px var(--white), inset 0 0 0 1px color-mix(in srgb, var(--k-ink, #000) 40%, transparent);
  transform: translateY(var(--dy, 0)); transition: left 680ms var(--ease-out), width 680ms var(--ease-out), transform 680ms var(--ease-out), opacity 300ms;
}
.tl__dot.is-range { border-radius: 6px; width: calc(var(--w) + 11px); }
.mix { display: flex; height: 6px; gap: 3px; margin: 2px 0 9px; }
.mix i { display: block; height: 100%; border-radius: 3px; flex: var(--n) 1 0; background: var(--c); transition: flex-grow 620ms var(--ease-out); }
.mix__legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mix__legend li { display: flex; align-items: center; gap: 8px; color: var(--graphite); font-size: 12.5px; }
.mix__legend li span:last-child { margin-left: auto; color: var(--ink); }
.ppl { display: flex; align-items: center; gap: 10px; }
.ppl ul { display: flex; margin: 0; padding: 0 0 0 5px; list-style: none; }
.ppl li { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -5px; border-radius: 50%; background: #F1F0EC; box-shadow: 0 0 0 2px var(--white); font-size: 12px; font-weight: 550; letter-spacing: -.02em; color: var(--graphite); }
.ppl p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.kn5 { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px 10px; margin: 0; }
.kn5 div { display: flex; flex-direction: column-reverse; }
.kn5 dt { font-size: 12px; color: var(--muted); }
.kn5 dd { margin: 0; font-size: 20px; font-weight: 460; letter-spacing: -.03em; line-height: 1.15; }

/* kind tiles (my components + kit rows) */
.kt, .tr-src__ic, .peek__kt {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: color-mix(in srgb, var(--k, #DDDBD6) 30%, var(--white)); color: var(--k-ink, var(--muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, #DDDBD6) 45%, transparent);
}
.tr-src__ic .tr-icon { width: 14px; height: 14px; }
.peek__kt { width: 34px; height: 34px; border-radius: 9px; }
.peek__kt .tr-icon { width: 17px; height: 17px; }
.kt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-ink, var(--muted)); opacity: .9; }
.kt:has(svg)::before { display: none; }

/* kit: citations and rows light in the cited source's colour */
.tr-cite[data-id] { background: #EDEBE6; color: var(--graphite); }
.tr-cite[data-id]:hover, .tr-cite[data-id].is-lit { background: color-mix(in srgb, var(--k) 55%, var(--white)); color: var(--ink); }
.tr-src[data-id] .tr-src__n { background: #EDEBE6; color: var(--graphite); }
.tr-src[data-id] .tr-src__btn.is-lit .tr-src__n { background: color-mix(in srgb, var(--k) 55%, var(--white)); color: var(--ink); }
/* kit: citations are visible (opacity 1 → 0) until their token is reached; keep them hidden while the answer streams */
tr-ask:is([data-phase=reading], [data-phase=answering]) .tr-ask__answer .tr-cite:not(.is-in) { opacity: 0; transition: none; }
tr-ask .tr-seg.is-lit { background: var(--seg-fill, color-mix(in srgb, var(--tr-accent) 50%, transparent)); }
.tr-node[data-id] .tr-glyph--source, .tr-mapl__btn[data-id] .tr-glyph--source { background: color-mix(in srgb, var(--k) 30%, var(--white)); border-color: color-mix(in srgb, var(--k-ink) 30%, transparent); color: var(--k-ink); }
.tr-chain__node[data-i="0"], .tr-chain__node[data-i="1"] { --k: var(--k-meet); --k-ink: var(--k-meet-ink); }
.tr-chain__node[data-i="2"] { --k: var(--k-conv); --k-ink: var(--k-conv-ink); }
.tr-chain__node[data-i="3"], .tr-chain__node[data-i="4"] { --k: var(--k-doc); --k-ink: var(--k-doc-ink); }
.tr-chain__ic { padding-top: 0; }
.tr-chain__ic .tr-icon, .tr-frag__top .tr-icon { width: 22px; height: 22px; padding: 4px; border-radius: 6px; box-sizing: border-box; background: color-mix(in srgb, var(--k) 30%, var(--white)); color: var(--k-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent); }
.tr-chain__node.is-late .tr-chain__ic { color: var(--k-ink); }
.tr-conn__links .tr-conn__link:nth-child(1) .tr-conn__name .tr-icon, .tr-conn__link--also .tr-conn__name .tr-icon { color: var(--k-doc-ink); }
.tr-conn__links .tr-conn__link:nth-child(2) .tr-conn__name .tr-icon, .tr-conn__links .tr-conn__link:nth-child(3) .tr-conn__name .tr-icon { color: var(--k-meet-ink); }
.tr-sv__docic { background: color-mix(in srgb, var(--k-meet) 30%, var(--white)); color: var(--k-meet-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-meet) 45%, transparent); }
tr-source-view.is-lit .tr-sv__x mark { background-image: linear-gradient(color-mix(in srgb, var(--coral) 70%, transparent), color-mix(in srgb, var(--coral) 70%, transparent)); }

/* ============================ rooms ============================ */
.room { position: relative; padding: 0 0 0 var(--room-pad); max-width: calc(var(--room-max) + var(--room-pad)); scroll-margin-top: 20px; }
.ws__main > * + * { margin-top: clamp(112px, 14vh, 140px); }
.ws__main > .caps { margin-top: 0; }
.room__bar { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: clamp(30px, 4.5vh, 44px); border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.room__ic { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--fill); color: var(--ink); }
.room__name { font-weight: 520; color: var(--ink); }
.room__label { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--graphite); }
.room__meta { margin-left: auto; white-space: nowrap; }

/* map (§23) */
.maphead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vh, 40px); }
.maphead__ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.maphead__label { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.mapbox { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair-2); background: repeating-linear-gradient(90deg, transparent 0 79px, rgb(17 17 17 / .03) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgb(17 17 17 / .03) 79px 80px), var(--white); }
.mapbox__canvas tr-map { aspect-ratio: auto; height: clamp(420px, 35vw, 500px); }
.mapbox__canvas tr-map.is-list { height: auto; }
#map-el .tr-map__tip { display: none; }
.mapinsp { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); align-items: center; gap: 12px 28px; min-height: 76px; padding: 14px 22px; border-top: 1px solid var(--hair-2); background: rgb(250 250 248 / .92); border-radius: 0 0 6px 6px; }
.mapinsp__who { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.mapinsp__glyph { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); display: flex; }
.mapinsp__glyph::before { content: ""; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: var(--ink); }
.mapinsp__glyph[data-kind=idea] { box-shadow: none; } .mapinsp__glyph[data-kind=idea]::before { width: 14px; height: 14px; background: var(--map-idea); box-shadow: inset 0 0 0 1px rgb(17 17 17 / .14); }
.mapinsp__glyph[data-kind=person] { box-shadow: inset 0 0 0 1px rgb(17 17 17 / .4); } .mapinsp__glyph[data-kind=person]::before { display: none; }
.mapinsp__glyph[data-kind=source] { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); } .mapinsp__glyph[data-kind=source]::before { display: none; }
.mapinsp__kind { margin: 0; font-size: 12px; color: var(--muted); }
.mapinsp__title { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -.012em; }
.mapinsp__meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.mapinsp__rel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mapinsp__rel li { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 4px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 12.5px; white-space: nowrap; }
.mapinsp__rel .kt { width: 20px; height: 20px; border-radius: 6px; }
.mapinsp__rel .kt .tr-icon { width: 12px; height: 12px; }
.mapinsp__swap { transition: opacity 220ms var(--ease-out); }
.mapinsp__swap.is-out { opacity: 0; }

/* evidence (§24): a split pane */
.evhead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 20px 48px; margin-bottom: clamp(30px, 4.5vh, 44px); }
.evhead .lead { justify-self: end; }
.pane { border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .09), 0 30px 60px -44px rgb(17 17 17 / .3); overflow: hidden; }
.pane__bar { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 22px; border-bottom: 1px solid var(--hair); }
.pane__meta { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pane__body { position: relative; padding: 28px 28px 30px; background: linear-gradient(90deg, var(--pane) 0 var(--split, 40%), var(--hair) var(--split, 40%) calc(var(--split, 40%) + 1px), var(--white) calc(var(--split, 40%) + 1px)); }
.pane__body tr-source-view .tr-sv__claim { background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 8px 20px -14px rgb(17 17 17 / .2); }
.pane__body tr-source-view .tr-sv__doc { box-shadow: none; background: none; border-radius: 0; }
.pane__body tr-source-view .tr-sv__head { padding-left: 0; padding-right: 0; }
.pane__body tr-source-view .tr-sv__speaker, .pane__body tr-source-view .tr-sv__rows { padding-left: 0; padding-right: 0; }

/* connection found (§25): full-bleed */
.atmo { position: relative; margin-left: calc(-1 * (var(--rail-w) + var(--ws-pad))); margin-right: calc(-1 * var(--ws-pad)); min-height: min(100vh, 860px); overflow: hidden; isolation: isolate; background: #C9D3B8; scroll-margin-top: 0; }
.atmo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.atmo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(255 253 246 / .5) 0%, rgb(255 253 246 / .14) 42%, rgb(255 253 246 / 0) 62%), linear-gradient(180deg, rgb(255 253 246 / .2), rgb(255 253 246 / 0) 30%); }
.atmo__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(84px, 13vh, 120px) var(--ws-pad) clamp(72px, 10vh, 96px); }
.atmo__eye { color: var(--ink); }
.atmo__h { margin: 14px 0 0; font-size: clamp(38px, 4.6vw, 68px); font-weight: 460; line-height: 1; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.atmo__h > span { display: block; }
.atmo__card { width: min(440px, 100%); margin-top: clamp(36px, 6vh, 64px); }
.atmo .tr-glass { background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 1px 0 rgb(255 255 255 / .9) inset, 0 30px 60px -30px rgb(30 40 10 / .35); }
.atmo .tr-glass::before { inset: -4px; border-radius: calc(var(--tr-radius-l) + 4px); background: rgb(255 255 255 / .2); }

/* capabilities (§26): wide strip, rail away */
.caps { margin-left: calc(-1 * var(--rail-w)); padding-top: clamp(104px, 13vh, 136px); }
.caps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.cap { position: relative; padding: 22px 0 0; min-width: 0; }
.cap + .cap::before { content: ""; position: absolute; left: -28px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.cap__n { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.cap__n span { color: var(--ink); }
.cap__line { margin: 12px 0 0; min-height: 2.5em; font-size: clamp(19px, 1.55vw, 23px); font-weight: 460; line-height: 1.24; letter-spacing: -.02em; text-wrap: balance; }
.crop { position: relative; height: 248px; margin-top: 24px; overflow: hidden; border-radius: 6px; background: var(--pane); box-shadow: inset 0 0 0 1px var(--hair); font-size: 13px; padding: 18px 18px 0; }
.rc__q { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 12px; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .08), 0 4px 12px -6px rgb(17 17 17 / .14); color: var(--ink); font-size: 14px; }
.rc__q .ic { color: var(--muted); }
.rc__q span::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: var(--ink); animation: tr-blink 1.1s steps(1) 4; }
.rc__q kbd { margin-left: auto; padding: 2px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 12px; color: var(--muted); }
.rc__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 9px; }
.rc__row.is-top { background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .06); margin-top: 12px; }
.rc__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rc__t b { font-weight: 520; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc__t span { font-size: 12px; color: var(--muted); }
.rc__ex { margin: 8px 8px 2px 42px; font-size: 13px; line-height: 1.45; color: var(--graphite); }
.rc__ex mark { background: color-mix(in srgb, var(--coral) 38%, transparent); color: var(--ink); padding: 0 1px; border-radius: 2px; }
.crop--connect { padding: 0; display: flex; align-items: flex-start; justify-content: center; container-type: inline-size; }
.cc { position: relative; flex: none; width: 290px; height: 196px; margin-top: 24px; transform-origin: 50% 0; scale: var(--cc-s, 1); }
.cc__svg { position: absolute; inset: 0; width: 290px; height: 196px; overflow: visible; }
.cc__svg path { fill: none; stroke: var(--ink); stroke-width: 1; }
.cc__svg path.is-faint { stroke: #B9B7B0; stroke-dasharray: 2 4; }
.cc__n { position: absolute; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px 0 4px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .07); font-size: 12px; font-weight: 500; white-space: nowrap; }
.cc__n .kt { width: 18px; height: 18px; border-radius: 5px; }
.cc__n .kt::before { width: 6px; height: 6px; }
.cc__n--a { left: 0; top: 6px; } .cc__n--c { right: 0; top: 6px; } .cc__n--b { left: 0; top: 118px; }
.cc__dec { position: absolute; left: 118px; top: 74px; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 5px rgb(17 17 17 / .06); display: flex; }
.cc__dec::before { content: ""; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: var(--ink); }
.cc__card { position: absolute; left: 112px; top: 94px; width: 172px; padding: 10px 13px 11px; border-radius: 11px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .06), 0 12px 28px -12px rgb(17 17 17 / .24); }
.cc__kind { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.cc__glyph { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink); margin: 0 3px; }
.cc__title { margin: 4px 0 0; font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.cc__meta { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.rs__scope { display: flex; flex-wrap: wrap; gap: 6px; }
.rs__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .07); font-size: 12px; color: var(--graphite); white-space: nowrap; }
.rs__q { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .08); font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.rs__steps { margin: 12px 0 0; padding: 0 0 0 4px; list-style: none; }
.rs__steps li { position: relative; display: grid; grid-template-columns: 58px 12px minmax(0, 1fr); column-gap: 8px; padding-bottom: 9px; font-size: 12.5px; line-height: 1.38; color: var(--graphite); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.rs__steps li > span:first-child { color: var(--muted); white-space: nowrap; }
.rs__steps i { position: relative; }
.rs__steps i::before { content: ""; position: absolute; left: 3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--k, var(--white)); box-shadow: inset 0 0 0 1px var(--k-ink, var(--ink)); }
.rs__steps i::after { content: ""; position: absolute; left: 6px; top: 14px; bottom: -14px; width: 1px; background: rgb(17 17 17 / .25); }
.rs__steps li:last-child i::after { display: none; }
.rs__steps.is-out li { opacity: 0; transform: translateY(4px); transition-delay: 0ms; }

/* connectors (§27) */
.cx { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.cx__text .h2 { margin-top: 14px; font-size: clamp(32px, 3.2vw, 46px); }
.cx__notes { display: grid; gap: 8px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hair); list-style: none; font-size: 14px; color: var(--graphite); }
.cx__notes li { display: flex; align-items: center; gap: 10px; }
.cx__notes .ic { color: var(--ink); }
.cx__panel { border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px rgb(17 17 17 / .09), 0 30px 60px -44px rgb(17 17 17 / .3); overflow: hidden; }
.cx__bar { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 22px; border-bottom: 1px solid var(--hair); }
.cx__sum { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.cx__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx__table th { padding: 10px 22px 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; border-bottom: 1px solid var(--hair); }
.cx__table td { padding: 0 22px; height: 50px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.cx__table tbody tr:last-child td { border-bottom: 0; }
.cx__table .num { text-align: right; width: 72px; }
.cx__table td.num { font-weight: 500; }
.cx__tool { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.cx__logo { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair); font-size: 12px; font-weight: 600; color: var(--graphite); letter-spacing: -.03em; }
.cx__name b { display: block; font-weight: 520; }
.cx__name small { display: block; font-size: 12px; color: var(--muted); }
.cx__barcell { width: 42%; }
.cx__share { display: block; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.cx__share i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--graphite); transform-origin: left; transition: transform 900ms var(--ease-reveal); transition-delay: calc(var(--i) * 60ms); }
.js .cx:not(.is-in) .cx__share i { transform: scaleX(0); }
.cx__acc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--graphite); white-space: nowrap; }
.cx__acc .ic { width: 13px; height: 13px; color: var(--muted); }

/* ============================ texture (interruption) ============================ */
.texture {
  position: relative; margin-left: calc(-1 * (var(--rail-w) + var(--ws-pad))); margin-right: calc(-1 * var(--ws-pad));
  height: min(100vh, 860px); min-height: 600px; overflow: hidden; isolation: isolate; color: var(--white); background: #8E8A80;
}
.texture__media, .texture__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.texture__video { object-fit: cover; object-position: 50% 50%; filter: saturate(.62) brightness(1.1) contrast(.94); }
.texture__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(196 214 232 / .2); mix-blend-mode: soft-light; }
.texture__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(270deg, rgb(24 24 30 / .42) 0%, rgb(24 24 30 / .1) 46%, rgb(24 24 30 / 0) 62%), linear-gradient(0deg, rgb(24 24 30 / .3) 0%, rgb(24 24 30 / 0) 40%); }
.texture__trace { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tt-line { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.tt-origin { fill: var(--white); }
.tt-ring { fill: none; stroke: var(--white); stroke-width: 2.2; }
.texture__copy { position: absolute; z-index: 3; right: var(--ws-pad); bottom: clamp(48px, 8vh, 84px); width: min(560px, 40vw); }
.texture__h { margin: 0; font-size: clamp(56px, 7.2vw, 120px); line-height: .96; letter-spacing: -.035em; font-stretch: 92%; text-shadow: 0 2px 30px rgb(20 20 30 / .22); }
.texture__h > span { display: block; }
.texture__last { display: inline-block !important; }
.texture__p { margin: 30px 0 0; max-width: 30em; font-size: 16.5px; line-height: 1.5; color: rgb(255 255 255 / .95); text-wrap: pretty; text-shadow: 0 1px 16px rgb(20 20 30 / .35); }
.texture__btn { position: absolute; z-index: 4; right: var(--ws-pad); top: 28px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; color: var(--white); background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); transition: background-color var(--t-fast); }
.texture__btn:hover { background: rgb(255 255 255 / .28); }
.texture__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.texture__btn .ic { width: 14px; height: 14px; }
.texture__btn[aria-pressed=true] .ic { fill: currentColor; }

/* ============================ finale: the workspace closes to the wordmark ============================ */
.finale { position: relative; background: var(--ink); color: var(--white); padding: clamp(112px, 15vh, 160px) 0 0; overflow: hidden; }
.finale__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 0 var(--ws-pad); }
.finale__h { margin: 0; font-size: clamp(36px, 5.4vw, 82px); line-height: 1.02; letter-spacing: -.03em; font-stretch: 94%; }
.finale__h span { display: block; text-wrap: balance; }
.finale__h span + span { color: var(--muted-dark); }
.finale__cta { flex: none; margin-bottom: 8px; }
.finale__cta:focus-visible { outline-color: var(--white); }
.finale__stage { position: relative; margin: clamp(56px, 8vh, 88px) var(--ws-pad) 0; }
.finale__wm { display: block; color: var(--white); --wordmark-solid: var(--white); font-family: var(--font-sans); font-weight: 560; }
.ghost { position: absolute; z-index: 2; left: 4%; right: 4%; top: 2%; bottom: 6%; border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .62), 0 0 0 6px rgb(255 255 255 / .05); pointer-events: none; opacity: 0;
  transform-origin: 90% 62%; transition: transform 1100ms cubic-bezier(.7, 0, .2, 1), opacity 900ms cubic-bezier(.6, 0, .4, 1), border-radius 1100ms; }
.ghost__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 16%; border-right: 1px solid rgb(255 255 255 / .34); }
.ghost__rail::before, .ghost__rail::after { content: ""; position: absolute; left: 14%; right: 14%; height: 6%; border-radius: 4px; background: rgb(255 255 255 / .16); }
.ghost__rail::before { top: 8%; } .ghost__rail::after { top: 22%; }
.ghost__bar { position: absolute; left: 16%; right: 0; top: 0; height: 12%; border-bottom: 1px solid rgb(255 255 255 / .34); }
.ghost__row { position: absolute; left: 20%; right: 34%; height: 1.5px; background: rgb(255 255 255 / .3); }
.ghost__row:nth-of-type(3) { top: 30%; } .ghost__row:nth-of-type(4) { top: 46%; right: 46%; } .ghost__row:nth-of-type(5) { top: 62%; right: 40%; }
.finale.is-open .ghost { opacity: 1; transition: opacity 500ms var(--ease-out); }
.finale.is-closing .ghost { opacity: 0; transform: scale(.03); border-radius: 50%; }
.js .finale__wmslot { transition: opacity 600ms var(--ease-out); }
.js .finale:not(.is-closing):not(.is-done) .finale__wmslot { opacity: .2; }

.foot { background: var(--ink); color: var(--muted-dark); padding: 36px var(--ws-pad) 44px; }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .12); }
.foot__brand { display: flex; align-items: center; gap: 18px; color: var(--white); }
.foot__tag { margin: 0; font-size: 14px; color: var(--muted-dark); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center; }
.foot__nav a { font-size: 14px; color: var(--muted-dark); text-decoration: none; padding: 4px 0; }
.foot__nav a:hover { color: var(--white); }
.foot a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }
.foot__legal { margin: 0; font-size: 13px; }

.dock { display: none; }

/* lazy slots keep their rendered height until the kit component mounts; the hero query reserves its height before the kit upgrades */
#hero-ask:not(.tr-ui) { display: block; min-height: 342px; border-radius: 14px; background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 30px 70px -30px rgb(40 30 60 / .28); }
@media (max-width: 899px) { #hero-ask:not(.tr-ui) { min-height: 382px; } }
@media (max-width: 520px) { #hero-ask:not(.tr-ui) { min-height: 467px; } }
.beat__chain:has(> template) { min-height: 380px; }
.frag__canvas:has(> template) { min-height: 520px; }
.win__ask:has(> template) { min-height: 760px; }
.mapbox__canvas:has(> template) { min-height: clamp(420px, 35vw, 500px); }
.pane__body:has(> template) { min-height: 470px; }
.finale__wmslot:has(> template) { min-height: 29.8vw; }
.atmo__card:has(> template) { min-height: 150px; }

/* ============================ ≤ 1399: headlines span the room, leads go below ============================ */
@media (max-width: 1399px) {
  .evhead { grid-template-columns: minmax(0, 1fr); }
  .evhead .lead { justify-self: start; }
  .win__bar { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .win__bar .pills { order: 3; margin-left: 0; flex-basis: 100%; }
  .cx { grid-template-columns: minmax(0, 1fr); }
  .cx__text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .cx__text .eyebrow { grid-column: 1 / -1; }
  .cx__notes { margin: 0; padding: 0 0 4px 24px; border-top: 0; border-left: 1px solid var(--hair); }
}

/* ============================ tablet ============================ */
@media (max-width: 1199px) and (min-width: 900px) {
  :root { --rail-w: 188px; --room-pad: 32px; }
  .hero__head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hero__side { max-width: 560px; }
  .pills--hero { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ws-pad)); padding-inline: var(--ws-pad); }
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .win__side { border-left: 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insp { border-top: 0; border-left: 1px solid var(--hair); }
  .frag { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .caps__list { grid-template-columns: minmax(0, 1fr); }
  .cap + .cap { border-top: 1px solid var(--hair); margin-top: 32px; }
  .cap + .cap::before { display: none; }
  .crop { max-width: 520px; }
  .cx { grid-template-columns: minmax(0, 1fr); }
  .rail__n { display: none; }
}

/* ============================ phones ============================ */
@media (max-width: 899px) {
  :root { --nav-h: 60px; --ws-pad: 16px; --rail-w: 0px; --room-pad: 0px; --switch-offset: 86px; }
  .top { gap: 12px; }
  .top__nav { display: none; }
  .top__signin { padding: 8px; font-size: 14px; }
  .hero { padding-bottom: 48px; }
  .hero__img { object-position: 46% 30%; }
  .hero__open { position: static; display: flex; justify-content: center; margin-top: 10px; }
  .hero__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 20px 0 24px; }
  .hero__h1 { font-size: clamp(44px, 13.6vw, 60px); line-height: .96; letter-spacing: -.045em; }
  .hero__sub { font-size: 16px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .pills--hero { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .pills--hero::-webkit-scrollbar { display: none; }
  .pills--hero .pill { scroll-snap-align: start; flex: none; width: 72vw; height: auto; min-height: 48px; padding: 10px 16px 11px 14px; white-space: normal; align-items: flex-start; text-align: left; font-size: 14.5px; line-height: 1.35; }
  .pills--hero .pill__dot { margin-top: 6px; }
  #hero-ask .tr-ask__inner { display: block; padding: 0 16px; }
  #hero-ask .tr-ask__query { padding-left: 16px; }
  #hero-ask .tr-ask__answer { font-size: 17px; }
  #hero-ask .tr-src:nth-child(n+3) { display: none; }
  #hero-ask .tr-ask__list::after { content: "+ 2 more sources"; display: block; padding: 10px 6px 0; font-size: 13px; color: var(--muted); }
  #hero-ask .tr-ask__sources { margin-top: 18px; padding-bottom: 16px; }
  .beat { padding-top: 88px; }
  .beat__h { font-size: clamp(36px, 10vw, 44px); }
  .beat__premise { font-size: 15.5px; text-align: left; }
  .beat__lines span { display: block; }
  .beat__chain tr-chain { height: 480px; }
  .frag { grid-template-columns: minmax(0, 1fr); padding-top: 88px; row-gap: 28px; }
  .frag__canvas > template, .frag__canvas tr-fragments { display: none; }
  .frag__canvas:has(> template) { min-height: 0; }
  .fraglist { display: block; position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
  .fraglist::before { content: ""; position: absolute; left: 11px; top: 16px; bottom: 30px; width: 1px; background: rgb(17 17 17 / .3); }
  .fraglist li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 10px 0; }
  .fraglist li + li { border-top: 1px solid var(--hair); }
  .fraglist .kt { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--white), inset 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent); }
  .fraglist b { display: block; font-size: 15px; font-weight: 520; line-height: 1.3; }
  .fraglist span.k { display: block; font-size: 12.5px; color: var(--muted); }
  .fraglist time { font-size: 12.5px; color: var(--muted); }
  .fraglist .hub { grid-template-columns: 24px auto minmax(0, 1fr); border-top: 0; padding-top: 18px; }
  .fraglist .hub::before { content: ""; position: relative; z-index: 1; width: 9px; height: 9px; margin-left: 7.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--white); }
  .fraglist .hub b { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; }
  .fraglist .hub span { font-size: 12.5px; color: var(--muted); }
  .demohead { padding-top: 96px; padding-bottom: 24px; }
  .ws { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
  .ws__main { grid-column: 1; }
  .rail { display: none; }
  .ws__main > * + * { margin-top: 96px; }
  .ws__main > .caps { margin-top: 0; }
  .win { margin: 0 -8px; }
  .win::before { left: 0; border-radius: 14px; }
  .win::after { display: none; }
  .win__bar { padding: 10px 14px; flex-wrap: wrap; }
  .win__upd { display: none; }
  .win__bar .pills { overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; flex-basis: calc(100% + 28px); }
  .win__bar .pills::-webkit-scrollbar { display: none; }
  .pills--compact .pill { flex: none; height: 36px; }
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .win__ask tr-ask { --tr-scale: 1; padding: 14px 14px 18px; }
  .win__ask:has(> template) { min-height: 900px; }
  .win__side { border-left: 0; border-top: 1px solid var(--hair); }
  .peek { min-height: 0; padding: 18px 16px; }
  .insp { padding: 16px; }
  .insp__blk--mix, .insp__blk--kn { display: none; }
  .room { padding: 0; scroll-margin-top: 12px; }
  .room__bar { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 2px; padding-bottom: 10px; margin-bottom: 26px; }
  .room__label { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; order: 3; }
  .room__meta { font-size: 12px; }
  .h2 { font-size: clamp(32px, 8.6vw, 40px); }
  .lead { font-size: 16px; }
  .maphead__ctl { align-items: flex-start; width: 100%; }
  .maphead .pills { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; max-width: calc(100% + 32px); }
  .mapbox { background: none; box-shadow: none; }
  .mapbox__canvas tr-map { height: auto; }
  .mapbox__canvas:has(> template) { min-height: 1100px; }
  .mapinsp { display: none; }
  .evhead { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  .pane { margin: 0 -8px; }
  .pane__bar .crumb span:nth-child(1), .pane__bar .crumb span:nth-child(1) + .ic { display: none; }
  .pane__body { padding: 16px; background: var(--white); }
  .pane__body:has(> template) { min-height: 880px; }
  .atmo { margin-left: -16px; margin-right: -16px; min-height: 0; }
  .atmo__img { object-position: 64% 50%; }
  .atmo::after { background: linear-gradient(180deg, rgb(255 253 246 / .55) 0%, rgb(255 253 246 / .1) 40%, rgb(255 253 246 / 0) 60%); }
  .atmo__in { padding: 72px 16px 28px; }
  .atmo__card { margin-top: 220px; }
  .caps { margin-left: 0; padding-top: 96px; }
  .caps__list { grid-template-columns: minmax(0, 1fr); }
  .cap + .cap { border-top: 1px solid var(--hair); margin-top: 36px; }
  .cap + .cap::before { display: none; }
  .cap__line { min-height: 0; font-size: 21px; }
  .crop { height: 236px; }
  .cx { grid-template-columns: minmax(0, 1fr); }
  .cx__panel { margin: 0 -8px; }
  .cx__table th, .cx__table td { padding-left: 14px; padding-right: 14px; }
  .cx__barcell, .cx__table th:nth-child(2), .cx__table td:nth-child(4), .cx__table th:nth-child(4) { display: none; }
  .cx__text { display: block; }
  .cx__notes { margin: 24px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .cx__bar { padding: 0 14px; }
  .cx__sum { display: none; }
  .texture { margin-left: -16px; margin-right: -16px; height: 86vh; height: 86svh; min-height: 560px; }
  .texture__copy { display: contents; }
  .texture__h { position: absolute; z-index: 3; left: 16px; right: 16px; top: 56px; font-size: clamp(48px, 13.5vw, 64px); }
  .texture__p { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 28px; margin: 0; font-size: 15.5px; }
  .texture__media::after { background: linear-gradient(180deg, rgb(24 24 30 / .5) 0%, rgb(24 24 30 / 0) 42%), linear-gradient(0deg, rgb(24 24 30 / .55) 0%, rgb(24 24 30 / 0) 34%); }
  .texture__btn { top: 16px; right: 16px; width: 44px; height: 44px; }
  .finale { padding-top: 96px; }
  .finale__in { flex-direction: column; align-items: flex-start; gap: 28px; }
  .finale__h { font-size: clamp(25px, 7.1vw, 38px); font-stretch: 86%; }
  .finale__cta { width: 100%; }
  .finale__stage { margin-top: 56px; }
  .foot { padding-bottom: 112px; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__nav { justify-content: flex-start; }

  .dock {
    display: flex; position: fixed; z-index: 20; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 0); gap: 2px; padding: 4px; border-radius: 18px; background: var(--white);
    box-shadow: 0 0 0 1px rgb(17 17 17 / .1), 0 10px 30px -10px rgb(17 17 17 / .3);
    transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out), visibility 0s linear 0s;
  }
  .dock.is-hidden { transform: translate(-50%, 140%); opacity: 0; visibility: hidden; transition: transform 420ms var(--ease-out), opacity 300ms, visibility 0s linear 420ms; }
  .dock__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 80px; height: 54px; border-radius: 14px; color: var(--muted-2); text-decoration: none; font-size: 12px; font-weight: 500; transition: background-color 260ms var(--ease-out), color 200ms; }
  .dock__item[aria-current] { background: var(--ink); color: var(--white); }
  .dock__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
}
@media (max-width: 370px) { .dock__item { width: 72px; } }

/* ============================ motion preferences / review ============================ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero__h1, .js .hero__side, .js .hero__stage { animation: none; }
  .rail, .rail__in, .rail__more, .rail__morein, .rail__ind, .tl__dot, .mix i, .insp__swap, .peek__in, .rs__steps li, .mapinsp__swap, .cx__share i, .ghost { transition: none !important; }
  .ghost { display: none; }
  .js .finale__wmslot { opacity: 1 !important; }
}
.is-still .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.is-still .hero__h1, .is-still .hero__side, .is-still .hero__stage { animation: none !important; }
.is-still .ghost { display: none; }
.is-still .finale__wmslot { opacity: 1 !important; }
.is-still .cx__share i { transform: none !important; }