/* ─────────────────────────────────────────────────────────────────────
   Skein — product website, prototype.
   Tokens are taken from the app's light theme:
   projects/skein-frontend/src/index.css (the `[data-theme='light']` block).
   Sharp corners — theme.ts (`defaultRadius: '2px'`).
   ───────────────────────────────────────────────────────────────────── */

/* Fonts: Geist and Geist Mono (SIL Open Font License 1.1, fonts/OFL.txt),
   self-hosted — variable woff2 files split by unicode range as on Google
   Fonts; a page downloads only the ranges its text uses. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-symbols2.woff2) format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --n-50: #ffffff;
  --n-100: #f6f4f1;
  --n-200: #efece7;
  --n-300: #e2ddd6;
  --n-400: #c6bfb6;
  --n-500: #8c847b;
  --n-600: #6a635b;
  --n-700: #46413b;
  --n-800: #2b2622;
  --n-900: #1c1917;

  --bg: var(--n-100);
  --surface: var(--n-50);
  --elev: var(--n-200);
  --line: var(--n-300);
  --line-2: var(--n-500);
  --ink: var(--n-900);
  --ink-2: var(--n-700);
  --ink-3: var(--n-600);

  --primary: #8a2d2d;
  --primary-h: #6f2222;
  --primary-t: rgba(138, 45, 45, 0.09);
  --on-primary: #ffffff;
  --secondary: #1f5f66;
  --secondary-t: rgba(31, 95, 102, 0.10);
  --accent: #d2521a;
  --accent-text: #9b390e;
  --accent-t: rgba(210, 82, 26, 0.12);
  --ok: #196534;
  --ok-t: rgba(31, 122, 63, 0.12);
  --warn: #794e04;
  --warn-t: rgba(154, 93, 5, 0.14);
  --err: #a82121;
  --err-t: rgba(180, 35, 35, 0.10);
  --info: #1b57a9;
  --info-t: rgba(30, 95, 184, 0.10);
  --violet: #5e39d1;
  --violet-t: rgba(105, 71, 212, 0.10);
  --focus: #1e5fb8;
  --shadow-segment: 0 1px 2px rgba(20, 18, 16, 0.12);
  --shadow-popover: 0 8px 24px rgba(20, 18, 16, 0.16);

  /* Yarn — every shade is derived from --accent (ember). */
  --yarn: #d2521a;
  --yarn-core: #7a2e0e;
  --yarn-ply: #ec7a3f;
  --yarn-hi: #ffd9c2;
  --yarn-shadow: rgba(60, 25, 10, 0.22);

  --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius: 2px;           /* the product's sharp corners */
  --radius-panel: 6px;     /* dialogs / large panels only */
  --radius-pill: 999px;

  --measure: 62ch;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-h); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.4vw, 64px); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--elev); padding: 1px 5px; border-radius: var(--radius); }
small, .small { font-size: 14px; color: var(--ink-3); }
ul { padding-left: 1.2em; }
li { margin: 0.25em 0; }
mark { background: rgba(234, 179, 8, 0.38); color: var(--ink); padding: 0 2px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }

/* Swappable mode names (On me, Delegated, Accept…). */
.term {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-t);
  border-bottom: 1px dashed var(--primary);
  padding: 0 4px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ── Main thread, a fixed layer behind the content ───────────────── */
#yarn-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
/* Background yarn (bg.js) — under the main thread, above section backgrounds. */
#bg-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; overflow: visible; }
/* Content sits above the thread, section backgrounds below it: .page creates
   no stacking context, and every .wrap is raised above the thread layer. */
.page { position: relative; }
.wrap { position: relative; z-index: 2; }

/* Yarn layer styles — the same for the main thread, arrows and the ball. */
.yarn use, .yarn path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.yarn-shadow { stroke: var(--yarn-shadow); }
.yarn-core { stroke: var(--yarn-core); }
.yarn-body { stroke: var(--yarn); }
.yarn-ply { stroke: var(--yarn-ply); opacity: 0.88; }
.yarn-hi { stroke: var(--yarn-hi); opacity: 0.85; }
.yarn-tip { fill: var(--yarn-hi); stroke: var(--yarn-core); stroke-width: 1.5; }

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; }
.brand:hover { color: var(--accent-text); }
.brand svg { width: 26px; height: 26px; }
.brand-word { font-size: 18px; }
/* Yarn-ball logo — the same drawing as in the app header (SkeinMark.tsx). */
.skein-mark-ball { fill: var(--accent); }
.skein-mark-thread { stroke: var(--accent); fill: none; }
.skein-mark-wrap { stroke: color-mix(in srgb, var(--accent) 62%, black); fill: none; }
.skein-mark-sheen { stroke: color-mix(in srgb, var(--accent) 72%, white); opacity: 0.9; fill: none; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: var(--radius); }
.nav a:hover { background: var(--elev); color: var(--ink); }
.nav a.cta { background: var(--primary); color: var(--on-primary); font-weight: 500; }
.nav a.cta:hover { background: var(--primary-h); color: var(--on-primary); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 6px 10px; font: inherit; color: var(--ink); }
/* Eight items in one row: below 1180px tighten the row; below 1000px it no
   longer fits even tightened, and the menu folds behind the toggle. */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .topbar-inner { gap: 16px; }
  .nav { gap: 0; }
  .nav a { padding: 6px 8px; }
}
@media (max-width: 1000px) {
  .nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-popover); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; font-size: 16px; }
  .nav-toggle { display: inline-block; }
}

/* Language switcher (EN / RU) — stays in the top bar on phones too. */
.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-left: 8px; }
.lang-switch a { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3); text-decoration: none; padding: 4px 8px; }
.lang-switch a:hover { color: var(--ink); background: var(--elev); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: var(--elev); }
/* "There is a Russian version" suggestion — fixed overlay, never shifts layout. */
.lang-suggest { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-popover); font-size: 14px; color: var(--ink); }
.lang-suggest-text { margin-right: 4px; }
.lang-suggest-x { background: none; border: 0; font: inherit; font-size: 18px; line-height: 1; color: var(--ink-3); padding: 4px 6px; cursor: pointer; }
.lang-suggest-x:hover { color: var(--ink); }
@media (max-width: 520px) {
  .lang-suggest { left: 16px; right: 16px; flex-wrap: wrap; }
  .lang-suggest-text { flex: 1 0 100%; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius);
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 80ms ease-out, color 80ms ease-out, border-color 80ms ease-out;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-h); color: var(--on-primary); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--elev); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-text); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn:has(> .btn-tag) { position: relative; }
.btn-tag {
  position: absolute; right: 10px; bottom: 0; transform: translateY(50%);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(var(--ok-t), var(--ok-t)), var(--surface); color: var(--ok); border: 1px solid var(--ok);
  padding: 2px 6px; border-radius: var(--radius);
}

/* Side colours: people — primary, agents — accent (as in the hero heading) */
.hl-people { color: var(--primary); }
/* Highlighted list item: the box starts at the list edge, its text lines up with the other items. */
.li-hl { list-style: none; margin: 10px 0 10px -1.2em; padding: 10px 14px 10px calc(1.2em - 3px); background: var(--accent-t); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.li-hl b { color: var(--ink); }
.hl-num { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, var(--accent-t) 62%); padding: 0 2px; }
.hl-agents { color: var(--accent); }

/* ── Sections ───────────────────────────────────────────────────────── */
.section { padding: clamp(56px, 9vw, 120px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 14px;
}
.kicker::before { content: ''; width: 22px; height: 3px; background: var(--accent); border-radius: 2px; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: var(--measure); }
.band-dark { background: var(--n-900); color: var(--n-100); }
.band-dark .kicker { color: #f0a070; }
.band-dark .kicker::before { background: #f0a070; }
.band-dark .lead { color: var(--n-300); }
.band-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-tint { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); overflow: visible; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 { max-width: 14ch; }
.hero h1 .line2 { color: var(--primary); }
.hero-sub { margin-top: 22px; }
.hero-sub .lead { margin-bottom: 10px; }
.hero-sub .static { color: var(--ink-3); font-size: 16px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; min-height: 320px; }
.hero-art svg { width: 100%; height: auto; overflow: visible; display: block; }
.hero-caption { position: absolute; left: 50%; bottom: -10px; }
.hero-caption.top { bottom: auto; top: -4px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hero-variants {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 6px 8px 6px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.hero-variants button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface);
  font: 600 12px var(--font-mono); color: var(--ink-2); cursor: pointer;
}
.hero-variants button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.hero-fade { transition: opacity 220ms ease-out; }
.hero-fade.swap { opacity: 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: 220px; order: -1; max-width: 420px; margin: 0 auto; }
}

/* ── Before / now: mirrored rows (prototype-review #10) ────────────── */
.pane-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius); }
.pane-tag.then { background: var(--elev); color: var(--ink-3); }
.pane-tag.now { background: var(--accent-t); color: var(--accent-text); }
.tn-table {
  border-collapse: separate; border-spacing: clamp(20px, 3vw, 40px) 0; margin: 0 calc(-1 * clamp(20px, 3vw, 40px));
  width: calc(100% + 2 * clamp(20px, 3vw, 40px)); table-layout: fixed; position: relative; z-index: 2;
}
.tn-table th { text-align: left; padding: 0 0 12px; }
.tn-table td { padding: 14px 18px; background: var(--surface); border-top: 1px solid var(--line); vertical-align: top; font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.45; }
.tn-table tbody tr:first-child td { border-top: 1px solid var(--line); }
.tn-table td:first-child { color: var(--ink-3); border-left: 3px solid var(--n-400); }
.tn-table td:last-child { color: var(--ink); border-left: 3px solid var(--accent); }
.tn-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.tn-table .tn-strong td { font-size: clamp(17px, 1.6vw, 20px); }
.tn-table .tn-strong td:first-child strong { color: var(--ink-2); }
.tn-table .tn-strong td:last-child strong { color: var(--accent-text); }
.tn-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.tn-term { position: relative; z-index: 2; }
.tn-term .terminal { margin: 18px 0 30px; }
.tn-pt { position: absolute; bottom: 12px; width: 1px; height: 1px; pointer-events: none; }
.tn-pt-l { left: -6px; }
.tn-pt-r { right: 18px; }
.tangle-zone { min-height: 220px; position: relative; }
.tangle-zone span { position: absolute; left: 16px; bottom: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); background: color-mix(in srgb, var(--bg) 80%, transparent); padding: 2px 6px; z-index: 2; }
.tn-outro { margin-top: clamp(28px, 4vw, 44px); max-width: 720px; position: relative; z-index: 2; }
.tn-conclusion { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.tn-outro p:not(.tn-conclusion) { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); font-weight: 500; }
.tn-bridge { margin-top: clamp(36px, 5vw, 56px); max-width: 640px; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-size: 16px; line-height: 1.55; color: var(--ink-3); position: relative; z-index: 2; }
.tn-bridge b { color: var(--ink); font-weight: 600; }

.terminal {
  background: var(--n-900); color: var(--n-200); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 14px 16px; margin: 14px 0 18px;
  box-shadow: var(--shadow-popover); border: 1px solid var(--n-800);
}
.terminal-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-700); display: block; }
.terminal-bar i:first-child { background: var(--accent); }
.terminal .ps { color: #f0a070; }
.terminal .dim { color: var(--n-500); }
.terminal .cursor { display: inline-block; width: 8px; height: 15px; background: var(--n-200); vertical-align: -3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .terminal .cursor { animation: none; } }
@media (max-width: 760px) {
  /* Phone: each "before / now" pair is a card, one under the other. */
  .tn-table, .tn-table tbody, .tn-table tr, .tn-table td { display: block; width: auto; margin: 0; }
  .tn-table thead { display: none; }
  .tn-table tr { margin-top: 12px; border: 1px solid var(--line); background: var(--surface); }
  .tn-table tbody tr td { border: 0; padding: 10px 14px; }
  .tn-table tbody tr td:first-child { border-left: 3px solid var(--n-400); }
  .tn-table tbody tr td:last-child { border-left: 3px solid var(--accent); border-top: 1px dashed var(--line); }
  .tn-table td::before { content: attr(data-tag); display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .tn-table td:last-child::before { color: var(--accent-text); }
  .tn-foot { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tangle-zone { min-height: 170px; }
  .tn-pt-l { left: 8px; }
  .tn-pt-r { right: 8px; }
}

/* ── Theses: balls on the thread + panel (prototype-review #12, variant B) ──
   The balls sit in a "lane" on the left, shifted horizontally (--x, 0..1), so
   the main thread passing through their centres (data-yarn="bead") winds down.
   Labels form an even column right of the lane; the thread doesn't cross them.
   All panels share one grid cell: height = the tallest panel, so the page
   doesn't move when switching. */
.th { --lane: 200px; --amp: 140px; --ball: 46px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 8px; }
.th-rail { position: relative; display: flex; flex-direction: column; }
.th-tab {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 78px;
  padding: 12px 8px 12px var(--lane); margin: 0; border: 0; background: none; cursor: pointer;
  font: 500 17px/1.3 var(--font-ui); color: var(--n-300); text-align: left; border-radius: var(--radius);
}
.th-tab:hover .th-title { color: var(--n-50); }
.th-tab:focus-visible { outline: 2px solid #f0a070; outline-offset: 2px; }
.th-tab[aria-selected="true"] .th-title { color: var(--n-50); font-weight: 600; }
.th-title { position: relative; z-index: 2; transition: color 200ms; }
.th-title .ours { margin-left: 6px; font-weight: 500; }
.th-ball { position: absolute; z-index: 2; top: 50%; left: calc(var(--x, 0) * var(--amp)); width: var(--ball); height: var(--ball); margin-top: calc(var(--ball) / -2); }
.th-ball svg { width: 100%; height: 100%; overflow: visible; display: block; }
.th-ball .th-spin { transform-box: fill-box; transform-origin: center; transition: transform 500ms ease-out; }
.th-tab[aria-selected="true"] .th-ball .th-spin { transform: scale(0.84); }
.th-tab.is-unwinding .th-ball .th-spin { animation: th-unwind 700ms ease-out; }
@keyframes th-unwind { 0% { transform: scale(1) rotate(0); } 100% { transform: scale(0.84) rotate(-300deg); } }
.th-tab:not([aria-selected="true"]):hover .th-ball .th-spin { transform: scale(1.06); }
/* The "tail" of an unwound ball — a thin thread from the ball under the label. */
.th-tail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.th-tab:not([aria-selected="true"]) .th-tail { visibility: hidden; }
.th-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .th-tab.is-unwinding .th-ball .th-spin { animation: none; }
  .th-ball .th-spin { transition: none; }
}

.th-sheet-bar, .th-backdrop { display: none; }
.th-panels { display: grid; }
.th-panel {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 260ms ease-out, visibility 0s linear 260ms;
  background: var(--n-800); border: 1px solid rgba(255, 255, 255, 0.09); border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px);
}
.th-panel.is-active { visibility: visible; opacity: 1; transition: opacity 260ms ease-out; }
.th-panel:focus-visible { outline: 2px solid #f0a070; outline-offset: 2px; }
.th-panel h3 { color: var(--n-50); font-size: clamp(21px, 2.1vw, 27px); margin-bottom: 16px; }
.th-panel h3 .ours { font-size: 11px; }
.th-points { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.th-points li { position: relative; margin: 0; padding-left: 22px; color: var(--n-100); font-size: 17px; font-weight: 500; line-height: 1.4; }
.th-points li::before { content: ''; position: absolute; left: 2px; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9c2 0%, #ec7a3f 45%, #a8400f 100%); }
.th-expl { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 18px; }
.th-expl p, .th-expl li { color: var(--n-300); font-size: 15.5px; line-height: 1.55; }
.th-expl strong { color: var(--n-100); }
.th-expl ul { margin: -4px 0 1em; }
.band-dark .term { color: #f0a070; background: rgba(240, 160, 112, 0.12); border-bottom-color: #f0a070; }

/* Thesis 7: "before / now" in threads. */
.th-viz { margin: 0 0 20px; padding: 10px 12px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); }
.th-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.th-replay { margin-top: 6px; background: transparent; color: var(--n-200); border-color: rgba(255, 255, 255, 0.25); }
.th-replay:hover { background: rgba(255, 255, 255, 0.08); color: var(--n-50); }
.tv-row-label { font: 600 12px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--n-400); }
.tv-row-label.now { fill: #f0a070; }
.tv-node-label { font: 500 12px var(--font-mono); fill: var(--n-300); text-anchor: middle; letter-spacing: 0.03em; }
.tv-human { fill: var(--n-50); stroke: #c86b6b; stroke-width: 2.4; }
.tv-human-ico { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; }
.tv-box { fill: var(--n-700); stroke: var(--n-500); stroke-width: 1.2; }
.tv-box-line { stroke: var(--n-500); stroke-width: 3; stroke-linecap: round; }
.tv-box-title { font: 600 13px var(--font-ui); fill: var(--n-100); text-anchor: middle; }
.tv-box-sub { font: 500 10px var(--font-mono); fill: var(--n-400); text-anchor: middle; }
.tv-arrow { fill: var(--yarn-core); }
.tv-arrow.grey { fill: var(--n-500); }
.tv-skein-label { font: 700 12px var(--font-ui); letter-spacing: 0.14em; fill: #6fc4cd; text-anchor: start; }
.th-viz .engine-badge circle { fill: var(--n-50); stroke: var(--accent); stroke-width: 2; }
.th-viz .engine-badge path, .th-viz .engine-badge text { fill: var(--accent-text); }

@media (max-width: 760px) {
  .th { --lane: 104px; --amp: 50px; --ball: 40px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .th-tab { min-height: 58px; padding: 8px 4px 8px var(--lane); font-size: 15.5px; }
  .th-title .ours { font-size: 9.5px; padding: 1px 5px; margin-left: 4px; }
  .th-hint { display: block; margin: 12px 0 0; font-size: 13px; color: var(--n-400); font-family: var(--font-mono); }
  /* The explanation is a bottom sheet over the page: content doesn't shift. */
  .th-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--n-800); border-top: 3px solid var(--accent); border-radius: 12px 12px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    transform: translateY(105%); visibility: hidden; transition: transform 280ms ease-out, visibility 0s linear 280ms;
  }
  .th.is-open .th-sheet { transform: none; visibility: visible; transition: transform 280ms ease-out; }
  .th-sheet-bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; padding: 10px 14px 8px 18px; background: var(--n-800); }
  .th-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--n-600); }
  .th-close { border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--n-100); font: 500 13px var(--font-ui); padding: 6px 10px; border-radius: var(--radius); }
  .th-backdrop { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(12, 10, 9, 0.55); }
  .th-backdrop[hidden] { display: none; }
  .th-panels { display: block; }
  .th-panel { display: none; border: 0; background: none; padding: 4px 18px 28px; }
  .th-panel.is-active { display: block; }
  .th-points li { font-size: 16px; }
  /* The sheet lives inside .wrap (its own stacking context) — raise it above the top bar. */
  #theses.th-sheet-open .wrap { z-index: 70; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .th-sheet, .th.is-open .th-sheet { transition: none; } }

/* ── Pushes and persistent reminders (prototype-review #1) ─────────── */
.push-block {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  background: var(--n-900); color: var(--n-100); border-radius: var(--radius); border-left: 4px solid var(--accent);
  padding: clamp(22px, 3.5vw, 44px); position: relative; z-index: 2;
}
.push-block .kicker { color: #f0a070; }
.push-block .kicker::before { background: #f0a070; }
.push-block h3 { color: var(--n-50); margin-bottom: 18px; }
.push-block .term { color: #f0a070; background: rgba(240, 160, 112, 0.12); border-bottom-color: #f0a070; }
.push-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.push-who > div { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); padding: 12px 14px; }
.push-who h4 { color: var(--n-50); font-size: 14px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.push-who p { color: var(--n-300); font-size: 15px; }
.push-who b { color: var(--n-50); font-weight: 600; }
.push-rules { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.push-rules li { position: relative; margin: 0; padding-left: 22px; color: var(--n-300); font-size: 15.5px; }
.push-rules li::before { content: ''; position: absolute; left: 2px; top: 0.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.push-rules b { color: var(--n-50); font-weight: 600; }
.push-note { font-size: 14px; color: var(--n-400); }

.push-phones { display: flex; gap: 16px; justify-content: center; }
.phone {
  flex: 0 1 216px; min-width: 0; height: 376px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2f2925, #1f1b18); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px;
  padding: 10px 9px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.phone-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.phone-who { font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-400); }
.phone-notch { width: 42px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.phone-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
/* Newest pushes on top: markup goes oldest to newest, the screen shows the reverse. */
.phone-stack .pn:nth-child(1) { order: 4; } .phone-stack .pn:nth-child(2) { order: 3; } .phone-stack .pn:nth-child(3) { order: 2; } .phone-stack .pn:nth-child(4) { order: 1; }
.pn {
  display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 11.5px; line-height: 1.3;
}
.pn .t { font-weight: 600; color: var(--n-50); }
.pn .s { color: var(--n-400); font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-mono); color: #1c1917; background: var(--n-400); }
.pn-assign .pn-ico { background: #8fb8f0; }
.pn-nudge .pn-ico { background: var(--accent); color: #fff; }
.pn-nudge { border-color: rgba(210, 82, 26, 0.45); }
.pn-ok .pn-ico, .pn-done .pn-ico { background: #6cc98a; }
.pn-prog .pn-ico { background: #6fc4cd; }
.phone-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding: 7px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font: 500 10.5px var(--font-mono); color: var(--n-400); }
.phone-accept { background: var(--primary); color: #fff; padding: 4px 9px; border-radius: var(--radius); font: 600 11px var(--font-ui); transition: transform 150ms, background 200ms; }
.phone-accept.is-pressed { background: #2f7d4a; transform: scale(0.94); }
/* The animation is switched on from JS (is-anim class): pushes appear one by one
   and "knock". Without JS and under reduced-motion a static series is shown. */
.push-block.is-anim .pn { display: none; }
.push-block.is-anim .pn.is-in { display: flex; animation: pn-in 360ms ease-out; }
.push-block.is-anim .pn.is-out { animation: pn-out 320ms ease-in forwards; }
.phone.knock { animation: knock 520ms ease-in-out; }
@keyframes pn-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pn-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes knock { 0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-0.8deg); } 40% { transform: translateX(3px) rotate(0.8deg); } 60% { transform: translateX(-2px) rotate(-0.5deg); } 80% { transform: translateX(2px); } }
@media (max-width: 900px) { .push-block { grid-template-columns: minmax(0, 1fr); } }
/* Thread waypoints above the block — wide screens only (on phones they cause horizontal scroll). */
@media (max-width: 767px) { .push-block .yarn-pt[data-yarn-m="skip"] { display: none; } }
@media (max-width: 520px) {
  .push-who { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .push-phones { gap: 10px; }
  .phone { height: 372px; border-radius: 18px; padding: 9px 7px; }
  .pn { font-size: 10.5px; padding: 6px 6px; gap: 6px; }
  .pn .s { font-size: 10px; }
  .pn-ico { width: 17px; height: 17px; font-size: 10px; }
  .phone-foot { font-size: 9.5px; padding: 6px; }
}

.ours { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: #f0a070; border: 1px solid rgba(240,160,112,0.45); padding: 2px 7px; border-radius: var(--radius); margin-left: 8px; vertical-align: middle; }

/* ── Where it hurts ─────────────────────────────────────────────────── */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.pain h3 { font-size: 19px; }
.quote { margin: 0; padding-left: 14px; border-left: 3px solid var(--accent); color: var(--ink-2); font-size: 15px; }
.quote p { margin: 0 0 6px; }
.quote cite { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); }
.quote cite a { color: var(--ink-3); }
.bridge { margin-top: 36px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; max-width: 30ch; }
.bridge em { font-style: normal; color: var(--primary); }
@media (max-width: 760px) { .pains { grid-template-columns: minmax(0, 1fr); } }

/* ── Interactive diagrams (flow) ───────────────────────────────────── */
.flow { position: relative; margin: 28px 0 0; }
.flow-canvas { position: relative; display: grid; gap: clamp(18px, 3vw, 36px) clamp(16px, 4vw, 56px); padding: 8px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.flow-node {
  position: relative; z-index: 2;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 14px 16px; min-height: 84px; display: flex; flex-direction: column; gap: 6px; justify-content: center;
  box-shadow: var(--shadow-segment); transition: border-color 200ms, box-shadow 200ms, transform 200ms, opacity 200ms;
  opacity: 0.55;
}
.flow-node .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.flow-node .who i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-3); }
.flow-node.human .who i { background: var(--secondary); }
.flow-node.agent .who i { background: var(--accent); }
.flow-node.skein .who i { background: var(--primary); }
.flow-node.human .who { color: var(--secondary); }
.flow-node.agent .who { color: var(--accent-text); }
.flow-node.skein .who { color: var(--primary); }
.flow-node strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.flow-node .sub { font-size: 13px; color: var(--ink-3); }
.flow-node { grid-column: var(--c, auto); grid-row: var(--r, auto); }
.flow-node.is-done { opacity: 1; }
.flow-node.is-active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-t), var(--shadow-popover); transform: translateY(-2px); }
.flow-node.branch { border-style: dashed; }
.flow-node.skein { background: var(--primary-t); border-color: var(--primary); }
.flow-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.flow-caption { flex: 1 1 320px; min-height: 96px; padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--accent); font-size: 15px; color: var(--ink-2); }
.flow-caption b { color: var(--ink); }
.flow-step { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); min-width: 6ch; }
.flow-arrow { fill: var(--yarn-core); }
.flow-edge-label { font: 500 11px var(--font-mono); fill: var(--ink-3); }
.flow-edge-label rect { fill: var(--bg); }
.flow-canvas.is-mobile { grid-template-columns: minmax(0, 1fr) !important; gap: 52px 0 !important; padding: 8px 40px !important; }
.flow-canvas.is-mobile .flow-node { grid-column: auto; grid-row: auto; }
@media (max-width: 760px) {
  .flow-node { min-height: 72px; padding: 10px 12px; }
  .flow-node strong { font-size: 14px; }
  .flow-node .sub { display: none; }
}

/* ── "Why an external task tracker" reason cards ───────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.why { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.why .ico { color: var(--accent); margin-bottom: 8px; display: block; height: 26px; }
.why h4 { margin-bottom: 6px; }
.why p { font-size: 14px; color: var(--ink-2); }
@media (max-width: 900px) { .why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

.formula { margin: 36px 0 0; padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); max-width: 820px; }

/* ── For people: features + mockups ─────────────────────────────────── */
.feature-rows { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); margin-top: 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; gap: clamp(24px, 4vw, 64px); align-items: center; }
.feature:nth-child(even of .feature) .feature-text { order: 2; }
.feature h3 { margin-bottom: 12px; }
.feature p { color: var(--ink-2); }
.feature .say { margin-top: 12px; padding: 12px 16px; background: var(--primary-t); border-left: 3px solid var(--primary); font-size: 15px; }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature:nth-child(even of .feature) .feature-text { order: 0; } }

.mock {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-popover); font-size: 13px; overflow: hidden; position: relative; z-index: 2;
}
.mock-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--n-100); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.mock-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--n-400); }
.mock-bar .title { margin-left: 6px; color: var(--ink-2); }
.mock-body { padding: 12px; }
.lenses { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 2px; background: var(--elev); gap: 2px; }
.lens { padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.lens.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-segment); font-weight: 600; }
.lens.on.teal { color: var(--secondary); }
.lens.on.amber { color: var(--warn); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--elev); color: var(--ink-2); }
.badge.n { background: var(--primary); color: #fff; }
.badge.ok { background: var(--ok-t); color: var(--ok); }
.badge.info { background: var(--info-t); color: var(--info); }
.badge.warn { background: var(--warn-t); color: var(--warn); }
.badge.violet { background: var(--violet-t); color: var(--violet); }
.badge.teal { background: var(--secondary-t); color: var(--secondary); }
.badge.err { background: var(--err-t); color: var(--err); }
.card-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 8px; background: var(--surface); }
.card-row .id { font-family: var(--font-mono); font-size: 11px; color: var(--primary); background: var(--primary-t); padding: 1px 5px; border-radius: var(--radius); white-space: nowrap; }
.card-row .ttl { flex: 1; font-size: 13.5px; line-height: 1.35; }
.card-row .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.card-row .btn-accept { background: var(--primary); color: #fff; border: 0; border-radius: var(--radius); font: 500 12px var(--font-ui); padding: 6px 10px; cursor: default; white-space: nowrap; }
.card-row .btn-accept.done { background: var(--ok-t); color: var(--ok); }
.avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10px var(--font-mono); color: #fff; background: var(--secondary); flex: none; }
.avatar.a2 { background: var(--violet); }
.avatar.a3 { background: var(--info); }
.avatar.bot { background: var(--accent); border-radius: 3px; }
.push {
  position: absolute; right: -12px; bottom: -14px; z-index: 3;
  background: var(--n-900); color: var(--n-100); border-radius: var(--radius-panel); padding: 10px 14px; font-size: 12.5px; box-shadow: var(--shadow-popover);
  display: flex; gap: 10px; align-items: center; max-width: 280px;
}
.push .t { font-weight: 600; }
.push .s { color: var(--n-400); font-size: 12px; }
.mock-wrapper { position: relative; }
/* Screenshots of the live UI in place of the former HTML mockups */
.shot { margin: 0; }
.shot + .shot { margin-top: 14px; }
.shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px -14px rgba(0,0,0,0.25); background: var(--surface); }


.comment { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment .who { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.comment .who b { color: var(--ink-2); font-weight: 600; }
.comment .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 5px; border-radius: var(--radius); border: 1px solid var(--line-2); margin-left: 6px; }
.comment .txt { font-size: 13px; margin-top: 2px; }

.ring { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--warn); background: var(--warn-t); color: var(--warn); border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px; }
.ring .bell { display: inline-flex; line-height: 0; animation: shake 1.4s ease-in-out infinite; transform-origin: top center; }
@keyframes shake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .ring .bell { animation: none; } }

.quiet { display: flex; flex-direction: column; gap: 6px; }
.quiet .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.quiet .row .sw { width: 30px; height: 16px; border-radius: 999px; background: var(--n-400); position: relative; flex: none; }
.quiet .row .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.quiet .row .sw.on { background: var(--ok); }
.quiet .row .sw.on::after { left: 16px; }
.quiet .row.muted { color: var(--ink-3); }

/* ── For agents ─────────────────────────────────────────────────────── */
.agent-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 36px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.checklist li::before { content: ''; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9c2 0%, #ec7a3f 45%, #a8400f 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.checklist b { display: block; font-weight: 600; margin-bottom: 2px; grid-column: 2; }
.checklist span { color: var(--ink-2); font-size: 15px; grid-column: 2; }
.checklist li::before { grid-row: 1 / span 2; }
.codeblock { white-space: pre; background: var(--n-900); color: var(--n-200); border-radius: var(--radius); padding: 16px 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; overflow-x: auto; box-shadow: var(--shadow-popover); }
.codeblock .k { color: #f0a070; } .codeblock .s { color: #a7d7a4; } .codeblock .c { color: var(--n-500); }
.beads { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .agent-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Cases ──────────────────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.case {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; z-index: 2;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.case:hover { border-color: var(--accent); box-shadow: var(--shadow-popover); transform: translateY(-2px); color: var(--ink); }
.case .kicker { margin-bottom: 0; }
.case h3 { font-size: 21px; }
.case p { color: var(--ink-2); font-size: 15px; }
.case .more { margin-top: auto; color: var(--primary); font-weight: 500; font-size: 14px; }
.case.soon .more { color: var(--ink-3); }
@media (max-width: 760px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* ── Methodology ────────────────────────────────────────────────────── */
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.method-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.method-card h4 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.method-card p { font-size: 14px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.chip { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--n-100); color: var(--ink-2); }
.chip.st-open { border-color: var(--ok); color: var(--ok); background: var(--ok-t); }
.chip.st-prog { border-color: var(--info); color: var(--info); background: var(--info-t); }
.chip.st-def { color: var(--ink-3); background: var(--elev); }
.chip.st-done { border-color: var(--line-2); color: var(--ink-2); text-decoration: line-through; }
.chip.st-stand { border-color: var(--secondary); color: var(--secondary); background: var(--secondary-t); }
.chip.ty-epic { border-color: var(--violet); color: var(--violet); background: var(--violet-t); }
.chip.ty-bug { border-color: var(--err); color: var(--err); background: var(--err-t); }
.chip.edge { background: var(--surface); border-style: dashed; }
.prio { display: flex; align-items: center; gap: 4px; margin: 8px 0 10px; }
.prio i { height: 10px; flex: 1; border-radius: 1px; background: var(--n-300); }
.prio i:nth-child(1) { background: var(--err); height: 18px; }
.prio i:nth-child(2) { background: var(--accent); height: 15px; }
.prio i:nth-child(3) { background: var(--warn); height: 12px; }
.prio i:nth-child(4) { background: var(--n-500); }
.prio i:nth-child(5) { background: var(--n-400); height: 8px; }
.prio-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
@media (max-width: 900px) { .method { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .method { grid-template-columns: minmax(0, 1fr); } }

/* ── What else it can do ────────────────────────────────────────────── */
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.more-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.more-card h4 { font-size: 16px; }
.more-card p { font-size: 14px; color: var(--ink-2); }
.more-card.wide { grid-column: span 2; }
/* The screenshot in a wide card is pinned to the bottom: images in neighbouring cards line up whatever the text length */
.more-card.wide > .shot { margin-top: auto !important; padding-top: 8px; }
@media (max-width: 900px) { .more-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .more-grid { grid-template-columns: minmax(0, 1fr); } .more-card.wide { grid-column: span 1; } }

/* HOT ZONE mockup */
.hotzone { background: var(--n-900); color: var(--n-100); border-radius: var(--radius); padding: 14px; font-family: var(--font-mono); font-size: 12px; position: relative; overflow: hidden; }
.hotzone::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--accent) 0 6px, transparent 6px 12px); opacity: 0.7; }
.hotzone h5 { margin: 0 0 10px; font: 700 20px/1 var(--font-ui); letter-spacing: -0.02em; color: #f59a6c; }
.hz-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 480px) { .hz-grid { grid-template-columns: minmax(0, 1fr); } }
.hz-ticker div { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.hz-ticker .t { color: var(--n-500); }
.hz-ticker .k { padding: 0 5px; border-radius: 2px; background: rgba(255,255,255,0.08); }
.hz-ticker .k.h { color: #6fc4cd; } .hz-ticker .k.d { color: #f0a070; } .hz-ticker .k.a { color: #aa9dee; }
.hz-podium { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.hz-podium div { flex: 1; background: linear-gradient(180deg, #f0834d, #9b390e); border-radius: 2px 2px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: #1c1917; font-weight: 700; }
.hz-live { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.hz-live span { padding: 2px 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; }
.hz-live span::before { content: '●'; color: #6cc98a; margin-right: 5px; }

/* Kanban / tree mini-mockups */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kanban .col { background: var(--n-100); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; min-height: 90px; }
.kanban .col h6 { margin: 0 0 6px; font: 600 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.kanban .k-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 7px; font-size: 12px; margin-bottom: 5px; box-shadow: var(--shadow-segment); }
.kanban .k-card .id { font-family: var(--font-mono); font-size: 10px; color: var(--primary); }
.tree { font-size: 13px; line-height: 1.7; }
.tree div { display: flex; align-items: baseline; gap: 8px; }
.tree div > * { flex-shrink: 0; white-space: nowrap; }
.tree div > .tt { flex-shrink: 1; min-width: 0; white-space: normal; }
.tree .id { font-family: var(--font-mono); font-size: 11px; color: var(--primary); background: var(--primary-t); padding: 0 5px; border-radius: var(--radius); }
.tree .d1 { padding-left: 18px; } .tree .d2 { padding-left: 36px; } .tree .d3 { padding-left: 54px; }
.tree .tw { color: var(--n-400); width: 10px; display: inline-block; }
.tree .blocked { color: var(--err); font-family: var(--font-mono); font-size: 11px; }

/* ── Get started ────────────────────────────────────────────────────── */
.start-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ball-wrap { position: relative; display: grid; place-items: center; min-height: 300px; }
.ball-wrap svg { width: min(100%, 460px); height: auto; overflow: visible; position: relative; z-index: 2; }
.start-steps { display: grid; gap: 14px; margin-top: 24px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; position: relative; z-index: 2; }
.step .no { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font: 700 14px var(--font-mono); }
.step h4 { margin-bottom: 4px; }
.step p { font-size: 14.5px; color: var(--ink-2); }
.step .codeblock { margin-top: 8px; font-size: 12px; padding: 10px 12px; }
.fair { margin-top: 28px; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); position: relative; z-index: 2; }
.fair b { color: var(--primary); }
.community { margin-top: 24px; font-size: 17px; color: var(--ink-2); max-width: var(--measure); }
@media (max-width: 900px) { .start-grid { grid-template-columns: minmax(0, 1fr); } .ball-wrap { min-height: 220px; } }

/* ── Geese ──────────────────────────────────────────────────────────── */
.geese { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 28px 0; }
.geese svg { width: 100%; height: auto; padding-left: clamp(0px, 6vw, 80px); }
.geese .goose { fill: var(--ink-2); }
.geese .goose.lead { fill: var(--accent); }
.geese p { color: var(--ink-2); font-size: 15px; }
.geese h4 { font-size: 20px; margin-bottom: 8px; }
@media (max-width: 760px) { .geese { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .geese .goose { animation: flap 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .geese .goose:nth-child(odd) { animation-delay: -1.1s; }
  @keyframes flap { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(0.82); } }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0 28px; color: var(--ink-3); font-size: 14px; background: var(--surface); position: relative; z-index: 2; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--primary); }
.footer-top { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { margin: 0 0 8px; max-width: 30ch; line-height: 1.5; }
.footer-col h2 { font: 600 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-col a { line-height: 1.35; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; }
.footer-lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ── Inner pages ────────────────────────────────────────────────────── */
.article { padding: clamp(40px, 6vw, 80px) 0; }
.article .wrap { max-width: 820px; }
.article h1 { margin-bottom: 20px; }
.article h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 48px 0 16px; }
.article h3 { margin: 32px 0 10px; }
.article p, .article li { font-size: 17px; color: var(--ink-2); }
.article p strong { color: var(--ink); }
.article blockquote { margin: 28px 0; padding: 18px 24px; border-left: 4px solid var(--accent); background: var(--surface); font-size: 19px; color: var(--ink); }
.article blockquote footer { margin-top: 10px; font-size: 14px; color: var(--ink-3); font-family: var(--font-mono); }
.article .aside { padding: 16px 20px; background: var(--primary-t); border-left: 3px solid var(--primary); margin: 24px 0; }
/* Data tables (pricing, licensing): a card on wide screens, one card per row on phones. */
.article .table-wrap { margin: 20px 0 24px; position: relative; z-index: 2; }
.article table.data { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.article table.data th, .article table.data td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.article table.data thead th { border-top: 0; background: var(--elev); font: 500 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.article table.data tbody th { color: var(--ink); font-weight: 600; }
.article table.data td.price { color: var(--ink); font-weight: 600; white-space: nowrap; }
.article table.data td.free { color: var(--ok); font-weight: 500; }
.article table.data td.none { color: var(--ink-3); }
.article .price-table th:first-child { width: 62%; }
.article .rules-table tbody th { width: 18%; }
.article .rules-table td { width: 41%; }
@media (max-width: 640px) {
  .article table.data, .article table.data tbody, .article table.data tr, .article table.data th, .article table.data td { display: block; width: auto; }
  .article table.data thead { display: none; }
  .article table.data tr + tr { border-top: 1px solid var(--line); }
  .article table.data th, .article table.data td { border-top: 0; padding: 4px 14px; }
  .article table.data tbody th { padding-top: 12px; }
  .article table.data tbody tr > :last-child { padding-bottom: 12px; }
  .article table.data td.price { white-space: normal; }
  .article table.data td.none { display: none; }
  .article .rules-table td::before { content: attr(data-label); display: block; font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
}
/* On-page contents (licensing FAQ). */
.article .toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 28px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 15px; position: relative; z-index: 2; }
.article .toc a { color: var(--ink-2); text-decoration: none; }
.article .toc a:hover { color: var(--primary); text-decoration: underline; }
.article h2[id], .article h3[id] { scroll-margin-top: 72px; }
.page-hero { padding: clamp(40px, 6vw, 72px) 0 0; }
.breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-3); }
.wide-flow .wrap { max-width: var(--wrap); }
.scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
@media (max-width: 900px) { .scenario-grid { grid-template-columns: minmax(0, 1fr); } }
.scenario { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.scenario h3 { font-size: 20px; margin: 0 0 10px; }
.scenario p { font-size: 15px; }

/* The "lots and lots of tasks" cloud on the development case */
.cloudlet { position: relative; margin: 24px 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 220px; overflow: hidden; }
.cloudlet .tiny { position: absolute; font: 500 9px var(--font-mono); color: var(--primary); background: var(--primary-t); padding: 1px 4px; border-radius: var(--radius); border: 1px solid rgba(138,45,45,0.25); white-space: nowrap; }
.cloudlet .tiny.e { color: var(--violet); background: var(--violet-t); border-color: rgba(94,57,209,0.3); }
.cloudlet .tiny.d { color: var(--ink-3); background: var(--elev); border-color: var(--line); text-decoration: line-through; }
.cloudlet .legend { position: absolute; left: 12px; bottom: 10px; font: 12px var(--font-mono); color: var(--ink-3); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 4px 8px; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 760px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Step captions of a playable diagram (<ol class="… steps-src">): the same
   text the caption box shows step by step, kept in the page so it is there
   for screen readers, search engines and agents that don't run scripts.
   Visually hidden; pages show it in place when scripts are off (<noscript>
   style in the page head). */
.steps-src { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hero chain: Human → Agent → Skein → Agent → Human ─────────────── */
.hero-chain { text-align: center; padding-top: clamp(28px, 5vw, 64px); }
.chain-art { margin: 0 auto; max-width: 1100px; }
.chain-box { position: relative; }
.chain-svg { width: 100%; height: auto; overflow: visible; display: block; }
.chain-tall { display: none; max-width: 380px; margin: 0 auto; }
.yarn-pt { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.chain-node rect:not(.chain-ico) { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; filter: drop-shadow(0 1px 2px rgba(20, 18, 16, 0.12)); }
.chain-node text { font-family: var(--font-ui); font-size: 19px; font-weight: 600; fill: var(--ink); }
.chain-human rect:not(.chain-ico) { stroke: var(--primary); stroke-width: 1.6; }
.chain-engine-name { font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 500 !important; fill: var(--ink-3) !important; letter-spacing: 0.04em; }
/* Engine badges: identical circles, monochrome icon. */
.engine-badge circle { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.1; }
.engine-badge path { fill: var(--ink-2); }
.engine-badge text { font-family: var(--font-mono); font-weight: 700; fill: var(--ink-2); }
.chain-agent .engine-badge circle { stroke: var(--accent); fill: var(--accent-t); }
.chain-agent .engine-badge path, .chain-agent .engine-badge text { fill: var(--accent-text); }
.chain-swarm-label { font-family: var(--font-mono) !important; font-size: 13px !important; font-weight: 500 !important; fill: var(--ink-3) !important; letter-spacing: 0.04em; }
/* The scatter is alive: a gentle sway, each icon with its own phase. */
@media (prefers-reduced-motion: no-preference) {
  .swarm-item { animation: sway var(--sway-dur, 3.6s) ease-in-out var(--sway-delay, 0s) infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes sway { from { transform: translate(0, -2.5px) rotate(-2deg); } to { transform: translate(1.5px, 2.5px) rotate(2deg); } }
}
.chain-ico { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; }
.chain-ball-label text { text-anchor: middle; font-family: var(--font-ui); }
.chain-ball-name { font-size: 26px; font-weight: 700; fill: var(--ink); letter-spacing: -0.01em; }
.chain-ball-sub { font-family: var(--font-mono) !important; font-size: 15px; fill: var(--ink-3); }
.hero .chain-tagline { max-width: 30ch; margin: clamp(14px, 2.4vw, 28px) auto 0; font-size: clamp(26px, 3.4vw, 44px); text-wrap: balance; }
.chain-cta { justify-content: center; }
@media (max-width: 700px) {
  .chain-wide { display: none; }
  .chain-tall { display: block; }
}

/* ── Line under the diagram: agents and people in different colours (variant B — depth) ──
   "agents" — yarn colour; "agents' agents" — lighter and dashed, like the subagent
   frames in the diagram; "people" — burgundy, like the people cards. */
.chain-tagline .tg { white-space: nowrap; }
.chain-tagline .tg-ico { display: none; }
.chain-tagline .tg-agent { color: var(--accent); }
.chain-tagline .tg-sub { color: #e2834f; text-decoration: underline dashed var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
.chain-tagline .tg-human { color: var(--primary); }

/* The name in the ball — uppercase, in its own colour (teal --secondary: cool
   against the orange yarn, the same theme token as secondary accents). */
.chain-ball-name { fill: var(--secondary) !important; letter-spacing: 0.14em !important; font-size: 28px !important; }
.chain-ball-sub { letter-spacing: 0.04em; transform-box: fill-box; transform-origin: center; }
.yarn-faint { opacity: 0.7; }

/* Circle nodes (instead of cards) */
.chain-human-ring { fill: var(--surface); stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(20, 18, 16, 0.12)); }
.chain-human .chain-ico { stroke-width: 2.4; }
.chain-node text.chain-human-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; fill: var(--ink-3); letter-spacing: 0.04em; }
.chain-agent .engine-badge circle { stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(20, 18, 16, 0.12)); }

/* Main-thread curl points between the thesis balls (desktop only). */
.th-k { position: absolute; width: 1px; height: 1px; pointer-events: none; left: calc(var(--x, 0) * var(--amp) + var(--ball) / 2 + var(--dx, 0px)); top: calc(50% + var(--dy, 0px)); }

/* "How it was — how it is": pulsing arrows in the gap between "before" and "now" */
.tn-table td:last-child { position: relative; }
.tn-table td:last-child::before {
  content: "→"; position: absolute; top: 50%;
  left: calc(-0.5 * clamp(20px, 3vw, 40px) - 3px);
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1; color: var(--accent);
  animation: tn-pulse 1.6s ease-in-out infinite;
}
.tn-table tbody tr:nth-child(2) td:last-child::before { animation-delay: 0.2s; }
.tn-table tbody tr:nth-child(3) td:last-child::before { animation-delay: 0.4s; }
.tn-table tbody tr:nth-child(4) td:last-child::before { animation-delay: 0.6s; }
.tn-table tbody tr:nth-child(5) td:last-child::before { animation-delay: 0.8s; }
@keyframes tn-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-70%, -50%); }
  50% { opacity: 1; transform: translate(-30%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .tn-table td:last-child::before { animation: none; opacity: 1; } }
@media (max-width: 760px) { .tn-table td:last-child::before { display: none; } }

/* "That's how SKEIN came about." — highlighted */
.tn-bridge .tn-born { display: block; margin-top: 14px; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.tn-bridge .tn-born span { color: var(--secondary); letter-spacing: 0.08em; }

/* Theses: make it obvious they are buttons */
.th-lead-hint { grid-column: 1 / -1; margin: 0 0 6px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; color: #f0a070; }
.th-tab { transition: background 160ms ease-out; }
.th-tab:hover { background: rgba(255, 255, 255, 0.05); }
.th-tab[aria-selected="true"] { background: rgba(210, 82, 26, 0.16); box-shadow: inset 3px 0 0 var(--accent); }
.th-tab[aria-selected="true"] .th-title::after { content: " →"; color: #f0a070; }
.th-tab .th-title { text-decoration: underline dotted rgba(255, 255, 255, 0.28); text-underline-offset: 4px; }
.th-tab[aria-selected="true"] .th-title { text-decoration: none; }
/* Until the first click, unselected balls call with a pulsing ring */
.th-rail:not(.th-touched) .th-tab:not([aria-selected="true"]) .th-ball::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #f0a070;
  animation: th-call 1.8s ease-out infinite; pointer-events: none;
}
.th-rail:not(.th-touched) .th-tab:nth-child(3) .th-ball::after { animation-delay: 0.25s; }
.th-rail:not(.th-touched) .th-tab:nth-child(4) .th-ball::after { animation-delay: 0.5s; }
.th-rail:not(.th-touched) .th-tab:nth-child(5) .th-ball::after { animation-delay: 0.75s; }
.th-rail:not(.th-touched) .th-tab:nth-child(6) .th-ball::after { animation-delay: 1s; }
@keyframes th-call { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .th-rail .th-ball::after { animation: none !important; opacity: 0.6; } }
@media (max-width: 760px) { .th-lead-hint { display: none; } }

/* The "How SKEIN helps with this" divider: from the story about work to the product */
.section-divider { padding: clamp(56px, 8vw, 110px) 0; text-align: center; position: relative; }
.divider-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.divider-ball { display: block; width: 1px; height: 1px; margin: 0 auto 18px; }
.section-divider h2 { font-size: clamp(32px, 4.6vw, 58px); letter-spacing: -0.02em; }
.section-divider .divider-name { color: var(--secondary); letter-spacing: 0.08em; }
.section-divider p { margin-top: 14px; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-3); }
.section-divider .divider-sub b { font-weight: 700; }
.divider-pre { font-family: var(--font-mono); font-size: clamp(13px, 1.2vw, 15px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 4px; }
.divider-word { width: min(100%, 900px); height: auto; display: block; margin: 0 auto; overflow: visible; }
.divider-letter { font-family: var(--font-ui); font-weight: 700; font-size: 230px; fill: var(--secondary); }
.divider-sub { margin-top: 6px; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-3); }

/* Readability safety net: if the thread does pass behind text — a soft halo in the background colour */
.section h2, .section h3, .section .lead, .feature-text p { text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }
.band-dark h2, .band-dark h3, .band-dark p, .push-block h2, .push-block h3, .push-block p { text-shadow: none; }
.section .kicker { text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }

/* The highlighted item of the "SKEIN for agents" list: the task monitor */
/* The highlight doesn't shift content: negative margins = border + padding, so the bullet and text stay on the same verticals as neighbouring items */
li.feat-hl { background: var(--accent-t); border-left: 3px solid var(--accent); padding: 14px; margin: 0 -17px; border-radius: var(--radius); }
li.feat-hl b { font-size: 1.08em; }
.case-link { display: inline-block; margin-top: 8px; }
li.feat-hl a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Current page menu item ─────────────────────────────────────────── */
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* ── Skip link to the features (home page) ──────────────────────────── */
.fx-skip { position: relative; z-index: 2; margin: 18px 0 0; font-size: 15px; }
.fx-skip a { color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 4px; text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }
.fx-skip a:hover { color: var(--accent-text); text-decoration-style: solid; }
.hero-intro { max-width: 640px; margin-left: auto; margin-right: auto; color: var(--ink-2); line-height: 1.5; text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }

/* ── Features page ──────────────────────────────────────────────────── */
.fx-page { padding-top: clamp(32px, 5vw, 64px); }
.fx-intro { position: relative; z-index: 2; max-width: 760px; }
.fx-intro h1 { margin-bottom: 14px; }
.fx-intro .lead { text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }

/* Search and table-of-contents panel — sticks under the top bar */
.fx-bar {
  position: sticky; top: 56px; z-index: 40; margin-top: clamp(24px, 3vw, 36px);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fx-bar .wrap { padding: 12px 0 10px; }
.fx-bar-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.fx-search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 10px;
}
.fx-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.fx-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }
.fx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 0; }
.fx-search input::placeholder { color: var(--ink-3); }
.fx-kbd { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 6px; }
@media (hover: none) { .fx-kbd { display: none; } }
.fx-aud { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.fx-aud button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  font: 500 14px var(--font-ui); color: var(--ink-2); padding: 9px 14px;
}
.fx-aud button + button { border-left: 1px solid var(--line); }
.fx-aud button:hover { background: var(--elev); }
.fx-aud button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.fx-aud button[data-aud="people"] .fx-ico { fill: none; stroke: var(--primary); stroke-width: 2; }
.fx-aud button[data-aud="agents"] .fx-ico { fill: var(--accent); }
.fx-aud button[aria-checked="true"] .fx-ico { stroke: currentColor; }
.fx-aud button[data-aud="agents"][aria-checked="true"] .fx-ico { fill: currentColor; }
.fx-ico { width: 14px; height: 14px; flex: none; }

.fx-toc { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; }
.fx-toc a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13px; color: var(--ink-2); text-decoration: none; padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.fx-toc a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset -1px -2px 0 rgba(0,0,0,.18); }
.fx-toc a:hover { background: var(--elev); color: var(--ink); }
.fx-toc a.is-active { border-color: var(--c); color: var(--ink); background: var(--surface); }
.fx-toc a.is-empty { opacity: 0.35; }

/* Groups */
.fx-groups { padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 4vw, 40px); }
.fx-group { position: relative; z-index: 2; margin-bottom: clamp(36px, 5vw, 56px); scroll-margin-top: var(--fx-offset, 140px); }
.fx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fx-ball { width: 52px; height: 52px; flex: none; overflow: visible; }
.fx-head h2 { font-size: clamp(24px, 2.6vw, 32px); text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }
.fx-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 15px; text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }

.fx-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--radius);
}
.fx-row {
  display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) 150px; gap: 4px 24px; align-items: baseline;
  margin: 0; padding: 12px 18px; border-top: 1px solid var(--line);
}
.fx-row:first-child { border-top: 0; }
.fx-row[hidden] { display: none; }
.fx-name { font-weight: 600; color: var(--ink); }
.fx-name .term { font-size: 0.92em; }
.fx-desc { color: var(--ink-2); font-size: 15px; }
.fx-desc .chips { margin: 0 0 6px; }
.fx-desc .chip { font-size: 11.5px; padding: 1px 7px; }
.fx-code { display: block; margin-top: 8px; font-size: 13px; }
.fx-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.fx-tag {
  display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1.6 var(--font-mono); letter-spacing: 0.02em;
  padding: 0 6px; border-radius: var(--radius); border: 1px solid;
}
.fx-tag .fx-ico { width: 11px; height: 11px; }
.fx-tag-people { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-t); }
.fx-tag-people .fx-ico { fill: none; stroke: currentColor; stroke-width: 2; }
.fx-tag-agents { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-t); }
.fx-tag-agents .fx-ico { fill: currentColor; }
.fx-row mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.fx-row.fx-hl { background: var(--accent-t); box-shadow: inset 3px 0 0 var(--accent); }
.fx-row.fx-hl a { color: var(--accent-text); }

.fx-empty { position: relative; z-index: 2; padding: 28px 0 8px; color: var(--ink-3); }
.fx-start { padding-top: clamp(24px, 4vw, 48px); }
.fx-start .hero-cta, .fx-start .section-head { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .fx-row { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 14px; }
  .fx-desc { grid-column: 1 / -1; }
  .fx-tags { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  .fx-bar .wrap { padding: 10px 0 8px; }
  .fx-search { flex-basis: 100%; }
  .fx-aud { width: 100%; }
  .fx-aud button { flex: 1; justify-content: center; padding: 8px 6px; }
  .fx-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .fx-toc::-webkit-scrollbar { display: none; }
  .fx-ball { width: 40px; height: 40px; }
  .fx-tag { font-size: 10.5px; }
}
.fx-code { padding: 10px 12px; font-size: 12.5px; box-shadow: none; }
.fx-row { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) 96px; }
.fx-tag-both { border-color: var(--line); background: transparent; gap: 6px; padding: 2px 6px; }
.fx-tag-both .fx-tag-people, .fx-tag-both .fx-tag-agents { background: none; border: 0; display: inline-flex; }
.fx-tag-both .fx-tag-people .fx-ico { fill: none; stroke: var(--primary); stroke-width: 2; }
.fx-tag-both .fx-tag-agents .fx-ico { fill: var(--accent); }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .fx-row { grid-template-columns: minmax(0, 1fr) auto; } }
.fx-legend { margin: 10px 0 0; font-size: 14px; color: var(--ink-3); text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg); }

/* ── "Any communication" diagram (prototype-review #16, js/scenes.js) ── */
.comms { position: relative; margin: 28px 0 0; z-index: 2; }
.comms-stage { position: relative; }
.comms-svg { width: 100%; height: auto; display: block; overflow: visible; }
.comms-tall { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) { .comms-wide { display: none; } .comms-tall { display: block; } }
.comms .cm-label { font: 500 13px var(--font-mono); fill: var(--ink-3); letter-spacing: 0.03em; }
.comms .cm-sk-label { font: 700 22px var(--font-ui); letter-spacing: 0.16em; fill: var(--secondary); text-anchor: middle; }
.comms .cm-halo { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transition: opacity 250ms; }
.comms .cm-halo-sk { stroke: var(--secondary); }
.comms .is-on > .cm-halo, .comms .cm-halo.is-on { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .comms .is-on > .cm-halo, .comms .cm-halo.is-on { animation: cm-pulse 1.6s ease-in-out infinite; }
  @keyframes cm-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
}
.comms .cm-sub { opacity: 0.32; transition: opacity 300ms; }
.comms .cm-sub.is-live { opacity: 1; }
.comms .cm-sub-label { opacity: 0.4; transition: opacity 300ms; }
.comms .cm-sub-label.is-live { opacity: 1; }
.comms .cm-item { opacity: 0; transition: opacity 320ms ease-out; }
.comms .cm-item.is-on { opacity: 1; }
.comms .cm-check circle { fill: #2f7d4a; stroke: var(--surface); stroke-width: 1.5; }
.comms .cm-check path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.comms .cm-mini-label { font: 500 11px var(--font-mono); fill: var(--ink-3); }
.comms .cm-bubble rect { fill: var(--n-900); }
.comms .cm-bubble-ico { fill: #6cc98a; }
.comms .cm-bubble-ck { fill: none; stroke: #1c1917; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.comms .cm-bubble-text { font: 600 12px var(--font-mono); fill: var(--n-50); }
.comms .cm-tag rect { fill: var(--primary-t); stroke: var(--primary); stroke-width: 1; }
.comms .cm-tag text { font: 600 11.5px var(--font-mono); fill: var(--primary); text-anchor: middle; }
.comms .cm-tag.ok rect { fill: var(--ok-t); stroke: var(--ok); }
.comms .cm-tag.ok text { fill: var(--ok); }
.comms .flow-edge-label text { text-anchor: middle; }
.comms .flow-edge-label rect { fill: var(--surface); }
@media (max-width: 700px) { .comms .cm-label { font-size: 12px; } }

/* ── "Why an external task tracker": drawings and one thread (prototype-review #17) ── */
.why-grid { position: relative; }
.why-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.why { position: relative; }
.why-art { height: 112px; margin: -4px -6px 10px; }
.why-ill { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity 500ms ease-out, transform 500ms ease-out; }
.why-ill.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .why-ill { opacity: 1; transform: none; transition: none; } }
.why-layer .wa-box { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.6; }
.why-layer .wa-screen { fill: var(--n-900); }
.why-layer .wa-slot { stroke: var(--n-400); stroke-width: 2; stroke-linecap: round; }
.why-layer .wa-led { fill: #6cc98a; }
.why-layer .wa-prompt { font: 600 12px var(--font-mono); fill: #f0a070; }
.why-layer .wa-cap { font: 500 11px var(--font-mono); fill: var(--ink-3); letter-spacing: 0.04em; }
.why-layer .engine-badge circle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.8; }
.why-layer .engine-badge path, .why-layer .engine-badge text { fill: var(--accent-text); }
.why-layer .chain-human-ring { stroke-width: 1.8; }
.why-layer .chain-ico { stroke-width: 1.8; }

/* ── Thesis mini-scenes (prototype-review #13) ──────────────────────────
   Panels still share one grid cell and one height; the scene fills the rest
   of the panel at the bottom, so there's no empty space under the text. */
@media (min-width: 761px) {
  .th-panel { display: flex; flex-direction: column; }
  .th-scene { flex: 1 1 auto; min-height: 160px; }
}
.th-scene { position: relative; margin: 16px 0 0; background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015) 70%); border-radius: var(--radius); }
.th-scene svg { position: absolute; inset: 8px 10px; width: calc(100% - 20px); height: calc(100% - 16px); overflow: visible; }
@media (max-width: 760px) { .th-scene { height: 190px; } }
.th-scene text { font-family: var(--font-ui); }
.th-scene .sc-mono { font-family: var(--font-mono); font-size: 13px; }
.th-scene .sc-ps { fill: #f0a070; }
.th-scene .sc-ans { fill: var(--n-200); }
.th-scene .sc-dim { fill: var(--n-500); font-size: 12px; }
.th-scene .sc-head { fill: var(--n-400); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.th-scene .sc-term { fill: #0f0d0c; stroke: rgba(255, 255, 255, 0.14); }
.th-scene .sc-dot { fill: var(--n-700); } .th-scene .sc-dot.first { fill: var(--accent); }
.th-scene .sc-cursor { fill: var(--n-200); }
.th-scene .sc-sk { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; fill: #6fc4cd; text-anchor: middle; }
.th-scene .sc-row { font: 600 12px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--n-400); }
.th-scene .sc-row.now { fill: #f0a070; }
.th-scene .sc-sep { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 3 5; }
.th-scene .sc-card { fill: var(--n-100); stroke: var(--accent); stroke-width: 1.2; }
.th-scene .sc-card.grey { fill: var(--n-600); stroke: var(--n-500); }
.th-scene .sc-hang { stroke: var(--n-400); stroke-width: 1.2; }
.th-scene .chain-human-ring { fill: var(--n-50); stroke: #c86b6b; }
.th-scene .engine-badge circle { fill: var(--n-50); stroke: var(--accent); stroke-width: 2; }
.th-scene .engine-badge path, .th-scene .engine-badge text { fill: var(--accent-text); }
.th-scene .sc-panel { fill: var(--n-700); stroke: rgba(255, 255, 255, 0.12); }
.th-scene .sc-li rect { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.1); }
.th-scene .sc-li-text { font-size: 13px; fill: var(--n-100); }
.th-scene .sc-li.done .sc-li-text { fill: var(--n-500); text-decoration: line-through; }
.th-scene .sc-li-ck { fill: none; stroke: #6cc98a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.th-scene .sc-title { font-size: 16px; font-weight: 600; fill: var(--n-50); }
.th-scene .sc-accept rect { fill: var(--primary); transition: fill 200ms; }
.th-scene .sc-accept text { font-size: 13px; font-weight: 600; fill: #fff; text-anchor: middle; }
.th-scene .sc-accept.is-pressed rect { fill: #2f7d4a; }
.th-scene .sc-accept { transform-box: fill-box; transform-origin: center; }
.th-scene .sc-phone { fill: #221d1a; stroke: rgba(255, 255, 255, 0.18); }
.th-scene .sc-push rect { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.12); }
.th-scene .sc-push-ico { fill: #6cc98a; }
.th-scene .sc-push-ck { fill: none; stroke: #1c1917; stroke-width: 2; stroke-linecap: round; }
.th-scene .sc-push-t { font-size: 13px; font-weight: 600; fill: var(--n-50); }
.th-scene .sc-push-s { font: 500 10.5px var(--font-mono); fill: var(--n-400); }
.th-scene .sc-chip rect { fill: var(--n-700); stroke: rgba(255, 255, 255, 0.16); transition: fill 300ms, stroke 300ms, opacity 300ms; }
.th-scene .sc-chip text { font: 500 12px var(--font-mono); fill: var(--n-200); text-anchor: middle; }
.th-scene .sc-chip.lit rect { fill: rgba(210, 82, 26, 0.35); stroke: #f0a070; }
.th-scene .sc-chip.lit text { fill: var(--n-50); }
.th-scene .sc-chip.dim text { opacity: 0.45; }
.th-scene .sc-search { fill: #0f0d0c; stroke: #f0a070; }
.th-scene .sc-noise rect { fill: var(--n-700); }
.th-scene .sc-noise text { font: 500 11px var(--font-mono); fill: var(--n-300); }
.th-scene .sc-you rect { fill: var(--n-50); stroke: var(--accent); stroke-width: 2.5; }
.th-scene .sc-you-k { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--accent-text); }
.th-scene .sc-you-t { font-size: 16px; font-weight: 600; fill: var(--ink); }
.th-scene .sc-you.ping rect { stroke-width: 4; }

/* ── "For people" / "For agents" — two different worlds (prototype-review #23) ── */
.realm { display: flex; align-items: center; gap: 0.4em; margin: 0 0 18px; font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.realm-ico { display: inline-flex; flex: none; gap: 0.08em; }
.realm-ico svg { width: 0.95em; height: 0.95em; display: block; overflow: visible; }
.realm-people .realm-name { color: var(--primary); }
.realm-ring { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }
.realm-fig { fill: none; stroke: var(--primary); stroke-width: 3.4; stroke-linecap: round; }
.realm-agents .realm-name { color: #f0a070; font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.04em; }
.realm-eng { width: 0.82em !important; height: 0.82em !important; }
.realm-eng circle { fill: rgba(240, 160, 112, 0.1); stroke: #f0a070; stroke-width: 2; }
.realm-eng path { fill: #f0a070; }
.realm-eng text { font: 700 20px var(--font-mono); fill: #f0a070; }
.realm-cursor { display: inline-block; width: 0.42em; height: 0.08em; margin-left: 0.1em; background: #f0a070; vertical-align: baseline; }
@media (prefers-reduced-motion: no-preference) { .realm-cursor { animation: blink 1.1s steps(2) infinite; } }
@media (max-width: 520px) { .realm { flex-wrap: wrap; gap: 0.3em; } }

/* People — a light warm background, burgundy accents. */
.realm-people-sec { --bg: #f8ede3; background: var(--bg); border-top: 4px solid var(--primary); }
.realm-people-sec .feature h3 { padding-left: 14px; border-left: 3px solid var(--primary); }
.realm-people-sec .mock { border-color: color-mix(in srgb, var(--primary) 22%, var(--line)); }

/* Agents — a dark terminal background, monospace accents. Tokens are overridden
   inside the section so shared components (text, halo, chips) read on dark. */
.realm-agents-sec {
  --bg: #12100e; --surface: #1d1916; --elev: #2b2622; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.24);
  --ink: var(--n-50); --ink-2: var(--n-300); --ink-3: var(--n-400); --primary: #f0a070; --primary-h: #ffc49c; --accent-text: #f0a070;
  background: var(--bg) repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
  color: var(--ink); border-top: 4px solid var(--accent);
}
.realm-agents-sec h2 { color: var(--n-50); }
.realm-agents-sec .lead { color: var(--n-300); }
.realm-agents-sec .checklist { gap: 26px; }
.realm-agents-sec .checklist b { font-family: var(--font-mono); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--n-50); margin-bottom: 6px; }
.realm-agents-sec .checklist b::before { content: '› '; color: #f0a070; }
.realm-agents-sec .checklist span { color: var(--n-300); }
.realm-agents-sec li.feat-hl { background: rgba(210, 82, 26, 0.16); }
.realm-agents-sec li.feat-hl a { color: #f0a070; }
.realm-agents-sec .codeblock { background: #0a0908; border: 1px solid rgba(255, 255, 255, 0.1); }
.realm-agents-sec .beads { background: var(--surface); color: var(--n-300); }
.realm-agents-sec .beads a { color: #f0a070; }
.realm-people-sec .section-head h2, .realm-agents-sec .section-head h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.comms-tall .cm-sk-label { font-size: 17px; }

/* ── Easter egg skein.net → SKYNET (why.html, js/skynet.js) ─────────── */
.skynet { --sn-red: #ff3b2b; position: relative; margin: 44px 0 0; height: 210px; border-radius: var(--radius); background: radial-gradient(ellipse at center, #1d1a17 0%, #0d0c0b 75%); overflow: hidden; display: grid; place-items: center; cursor: default; }
.sn-face { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
.sn-word { font-family: var(--font-mono); font-weight: 600; font-size: clamp(30px, 6vw, 56px); letter-spacing: 0.06em; color: #f0a070; text-shadow: 0 0 18px rgba(240, 160, 112, 0.45); animation: sn-blink 2.4s steps(1, end) infinite; }
.sn-cursor { width: 0.55em; height: 1.1em; font-size: clamp(30px, 6vw, 56px); background: #f0a070; animation: sn-caret 1s steps(1, end) infinite; }
/* The T-800 ghost: appears instantly and translucent, over skein.net */
.sn-t800 { opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.sn-skull { width: auto; height: 168px; overflow: visible; }
.sn-s0 { stop-color: var(--n-50); } .sn-s1 { stop-color: var(--n-300); } .sn-s2 { stop-color: var(--n-500); } .sn-s3 { stop-color: var(--n-800); }
.sn-cavity { fill: var(--n-900); }
.sn-edge { fill: none; stroke: var(--n-50); stroke-width: 0.8; stroke-linejoin: round; opacity: 0.5; }
.sn-socket { fill: none; stroke: var(--n-600); stroke-width: 0.8; }
.sn-tooth { stroke: var(--n-800); stroke-width: 0.7; }
.sn-rod { stroke: var(--n-200); stroke-width: 1.4; stroke-linecap: round; }
.sn-sleeve { stroke: var(--n-600); stroke-width: 3.4; stroke-linecap: round; }
.sn-seam { fill: none; stroke: var(--n-600); stroke-width: 0.9; }
.sn-rivet { fill: var(--n-400); stroke: var(--n-700); stroke-width: 0.5; }
.sn-pupil { fill: #fff1ea; }
.sn-eyes { filter: drop-shadow(0 0 4px var(--sn-red)); }
.sn-eye { animation: sn-eyes 0.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.sn-red { color: var(--sn-red); text-shadow: 0 0 14px rgba(255, 40, 20, 0.85); animation: none; letter-spacing: 0.22em; font-size: clamp(22px, 4vw, 38px); }
.skynet.is-skynet .sn-skein { opacity: 0.08; }
.skynet.is-skynet .sn-t800 { opacity: 0.62; animation: sn-ghost 0.24s steps(3, end) infinite; }
.skynet.is-hover .sn-t800 { opacity: 0.8; animation: none; }
.skynet.is-glitch .sn-face { animation: sn-glitch 0.2s steps(2, end); }
.skynet.is-glitch::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 5px); pointer-events: none; }
@keyframes sn-blink { 0%, 86% { opacity: 1; } 88% { opacity: 0.25; } 90%, 100% { opacity: 1; } }
@keyframes sn-caret { 50% { opacity: 0; } }
@keyframes sn-eyes { from { transform: scale(0.85); opacity: 0.75; } to { transform: scale(1.1); opacity: 1; } }
@keyframes sn-glitch { 0% { transform: translate(-6px, 2px) skewX(-8deg); filter: hue-rotate(40deg); } 50% { transform: translate(5px, -2px) skewX(6deg); } 100% { transform: none; } }
@keyframes sn-ghost { 0% { opacity: 0.62; } 33% { opacity: 0.4; } 66% { opacity: 0.7; } 100% { opacity: 0.55; } }
@media (max-width: 560px) { .skynet { height: 170px; } .sn-skull { height: 128px; } .sn-face { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .sn-word, .sn-cursor, .sn-eye, .skynet.is-skynet .sn-t800 { animation: none; } }

/* ── Development pipeline (case-dev.html, js/pipeline.js) ────────────
   Three lanes: owner · agents · SKEIN. Each row is a stage; on the right are
   the records the stage leaves in SKEIN, tied to the thread with knots. */
.pp-wrap { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }
.pp { --own: 200px; --sk: 340px; --g: 40px; --rowgap: 48px; position: relative; margin-top: 8px; }
.pp-head { display: grid; grid-template-columns: var(--own) minmax(0, 1fr) var(--sk); column-gap: var(--g); margin-bottom: 22px; }
.pp-col-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line-2); font-family: var(--font-mono); }
.pp-col-h i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); align-self: center; }
.pp-col-h b { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-col-h span { font-size: 12px; color: var(--ink-3); }
.pp-col-h em { font-style: normal; font-weight: 600; color: var(--primary); }
.pp-col-h.human { border-color: var(--secondary); } .pp-col-h.human i { background: var(--secondary); } .pp-col-h.human b { color: var(--secondary); }
.pp-col-h.agent { border-color: var(--accent); } .pp-col-h.agent i { background: var(--accent); } .pp-col-h.agent b { color: var(--accent-text); }
.pp-col-h.skein { border-color: var(--primary); padding-left: 34px; } .pp-col-h.skein i { background: var(--primary); } .pp-col-h.skein b { color: var(--primary); }

.pp-body { position: relative; display: flex; flex-direction: column; gap: var(--rowgap); padding-bottom: 64px; }
.pp-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.pp-row { position: relative; display: grid; grid-template-columns: var(--own) minmax(0, 1fr) var(--sk); column-gap: var(--g); align-items: start; }

/* Agents: stage block */
.pp-ag { position: relative; z-index: 2; min-width: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px 16px; box-shadow: var(--shadow-segment); transition: border-color 220ms, box-shadow 220ms, opacity 220ms; }
.pp-row + .pp-row .pp-ag::before { content: ''; position: absolute; left: 30px; top: calc(-1 * var(--rowgap) + 4px); height: calc(var(--rowgap) - 14px); border-left: 2px solid var(--ink-3); }
.pp-row + .pp-row .pp-ag::after { content: ''; position: absolute; left: 25px; top: -11px; border: 6px solid transparent; border-top: 8px solid var(--ink-3); border-bottom: 0; }
.pp-stage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pp-stage b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pp-tag { font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-t); padding: 2px 7px; border-radius: var(--radius); }
.pp-tool { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ink-3); }
.pp-line, .pp-review { display: flex; align-items: stretch; margin-top: 12px; }
.pp-review { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.pp-n { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); transition: opacity 220ms, border-color 220ms, box-shadow 220ms, background 220ms, filter 220ms; }
.pp-n b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.pp-n > span { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.pp-n.pp-gate { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: var(--ok-t); }
.pp-n.pp-gate b { color: var(--ok); font-family: var(--font-mono); font-size: 13px; }
.pp-n.pp-loopn { border-style: dashed; border-color: var(--accent); }
.pp-rnd, .pp-cyc em { font: 600 10px var(--font-mono); color: var(--accent-text); font-style: normal; white-space: nowrap; }
.pp-rnd { align-self: flex-start; margin-top: 2px; background: var(--accent-t); padding: 1px 5px; border-radius: var(--radius); }
.pp-to { flex: none; width: 22px; position: relative; align-self: center; height: 12px; }
.pp-to::before { content: ''; position: absolute; left: 3px; right: 7px; top: 5px; border-top: 2px solid var(--ink-3); }
.pp-to::after { content: ''; position: absolute; right: 2px; top: 0; border: 6px solid transparent; border-left: 7px solid var(--ink-3); border-right: 0; }
.pp-cyc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 40px; padding: 0 4px; align-self: center; font-style: normal; transition: opacity 220ms; }
.pp-cyc svg { width: 34px; height: 34px; overflow: visible; }
.pp-cyc use { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
#pp-cyc-sym polygon { fill: var(--accent); stroke: none; }
.pp-fan { flex: none; display: flex; flex-direction: column; gap: 4px; padding-left: 8px; border-left: 2px solid var(--line-2); transition: opacity 220ms; }
.pp-eng { display: inline-block; font: 600 11px var(--font-mono); line-height: 1.5; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radius); background: var(--surface); white-space: nowrap; }
.pp-eng.grok { color: var(--ink); }
.pp-eng.codex { color: var(--info); }
.pp-eng.fable { color: var(--violet); }
.pp-n b .pp-eng { font-size: 10.5px; margin-left: 2px; vertical-align: 1px; }
.pp-note, .pp-sub { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); transition: opacity 220ms; }
.pp-sub { margin-top: 6px; color: var(--ink-2); }
.pp-cfg { margin-top: 12px; padding: 6px 10px; font: 500 11.5px/1.5 var(--font-mono); color: var(--ink-2); background: var(--elev); border-radius: var(--radius); transition: opacity 220ms; }
.pp-cfg span { color: var(--primary); font-weight: 600; margin-right: 4px; }

/* Stages 2–4: three "author ⇄ critics" cells */
.pp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pp-cell { min-width: 0; padding: 8px 8px 10px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 60%, transparent); transition: opacity 220ms, border-color 220ms; }
.pp-cell-h { font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.pp-crit { display: flex; flex-wrap: wrap; align-items: center; }
.pp-crit .pp-author { flex: 1 1 100%; }
.pp-crit .pp-cyc { flex-direction: row; gap: 4px; padding: 0; margin: 6px 6px 0 2px; }
.pp-crit .pp-cyc svg { width: 26px; height: 26px; }
.pp-crit .pp-fan { flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; margin-top: 6px; }
.pp-gate-l { margin-top: 8px; font: 600 10.5px var(--font-mono); color: var(--ok); letter-spacing: 0.04em; transition: opacity 220ms; }
.pp-gate-l::before { content: '✓ '; }

/* Stage 5: mini tree */
.pp-treeline { align-items: center; }
.pp-tree { flex: 0 1 268px; min-width: 180px; height: auto; overflow: visible; transition: opacity 220ms; }
.pp-tree text { font: 600 9.5px var(--font-mono); fill: var(--primary); text-anchor: middle; }
.pp-tree .tr-root { fill: var(--primary-t); stroke: var(--primary); }
.pp-tree .tr-g { fill: var(--surface); stroke: var(--primary); stroke-width: 1; }
.pp-tree .tr-g.g0 { stroke-dasharray: 3 2; }
.pp-tree .tr-edges path { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.pp-tree .tr-deps path { fill: none; stroke: var(--primary); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: 0.55; }
.pp-tree .tr-t rect { fill: var(--surface); stroke: var(--primary); stroke-width: 1; rx: 1; transition: fill 300ms; }
.pp-tree .tr-t rect.is-closed { fill: var(--primary); }

/* Stage 6: stream lanes */
.pp-lanes { position: relative; display: grid; gap: 8px; margin: 12px 0 34px; }
.pp-lane { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 12px; align-items: center; transition: opacity 220ms; }
.pp-lane-h { display: flex; flex-direction: column; font-family: var(--font-mono); line-height: 1.3; }
.pp-lane-h b { font-size: 12.5px; font-weight: 600; }
.pp-lane-h span { font-size: 11px; color: var(--accent-text); }
.pp-track { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 0; min-width: 0; }
.pp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--line-2); }
.pp-stn { position: relative; z-index: 1; flex: 1 1 auto; text-align: center; font: 600 11px var(--font-mono); padding: 3px 6px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); white-space: nowrap; transition: opacity 220ms, box-shadow 220ms; }
.pp-stn.w { color: var(--accent-text); border-color: var(--accent); background: linear-gradient(var(--accent-t), var(--accent-t)), var(--surface); }
.pp-stn.r { color: var(--info); border-color: color-mix(in srgb, var(--info) 60%, transparent); }
.pp-stn.f { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); border-style: dashed; }
.pp-stn.d { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); background: linear-gradient(var(--ok-t), var(--ok-t)), var(--surface); }
.pp-bead { position: absolute; z-index: 0; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--yarn-hi), var(--yarn) 55%, var(--yarn-core)); box-shadow: 0 1px 3px var(--yarn-shadow); opacity: 0; animation: pp-run var(--sp, 6s) linear infinite; animation-delay: var(--dl, 0s); animation-play-state: paused; }
.pp-lane.is-on .pp-bead { opacity: 1; animation-play-state: running; }
@keyframes pp-run { from { left: 0; } to { left: 100%; } }
.pp-barrier { position: absolute; z-index: 3; left: 146px; top: -6px; bottom: -6px; border-left: 2px dashed var(--primary); transition: opacity 220ms; }
.pp-barrier span { position: absolute; left: -2px; bottom: -20px; white-space: nowrap; font: 600 10.5px var(--font-mono); color: var(--primary); }
.pp-talk { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-width: 520px; transition: opacity 220ms; }
.pp-talk span { font-size: 12.5px; padding: 5px 10px; border-radius: var(--radius); }
.pp-talk b { font: 600 11px var(--font-mono); margin-right: 6px; }
.pp-talk .q { background: var(--accent-t); border-left: 3px solid var(--accent); align-self: flex-start; }
.pp-talk .q b { color: var(--accent-text); }
.pp-talk .a { background: var(--elev); border-left: 3px solid var(--ink-3); align-self: flex-end; }

/* Owner */
.pp-own { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-dec { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px 26px; background: var(--surface); border: 1px solid var(--secondary); border-radius: var(--radius); box-shadow: var(--shadow-segment); transition: opacity 220ms, box-shadow 220ms, border-color 220ms; }
.pp-dec::before { content: ''; position: absolute; left: 9px; top: 14px; width: 7px; height: 7px; background: var(--secondary); transform: rotate(45deg); }
.pp-dec b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.pp-dec > span { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.pp-dec code { font-size: 10.5px; }
.pp-dec.pp-idea { background: var(--secondary-t); }
.pp-dec.pp-idea b { font-size: 16px; }
.pp-dec.pp-stop { border-style: dashed; }
.pp-dec.pp-stop::before { background: var(--err); }
.pp-bridge { position: absolute; left: 100%; top: 50%; width: var(--g); height: 0; border-top: 2px dashed var(--secondary); }
.pp-bridge::before, .pp-bridge::after { content: ''; position: absolute; top: -7px; border: 6px solid transparent; }
.pp-bridge::before { left: -1px; border-right: 7px solid var(--secondary); border-left: 0; }
.pp-bridge::after { right: -1px; border-left: 7px solid var(--secondary); border-right: 0; }

/* SKEIN: records on the thread */
.pp-recs { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rec { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 5px 8px; transition: opacity 300ms, transform 300ms, border-color 220ms, box-shadow 220ms; }
.rec code { font-size: 11.5px; padding: 0 4px; }
.rec em { display: inline-block; font: 600 9.5px/1.6 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 5px; margin-right: 6px; border-radius: var(--radius); vertical-align: 1px; }
.t-task { color: var(--primary); background: var(--primary-t); }
.t-com { color: var(--secondary); background: var(--secondary-t); }
.t-att { color: var(--violet); background: var(--violet-t); }
.t-lab { color: var(--warn); background: var(--warn-t); }
.t-lnk { color: var(--info); background: var(--info-t); }
.t-cmt { color: var(--n-50); background: var(--n-700); }
.t-cls { color: var(--ok); background: var(--ok-t); }
.t-clm { color: var(--accent-text); background: var(--accent-t); }
.t-dsc { color: var(--ink-2); background: var(--elev); }
.pp-tie { fill: none; stroke: var(--yarn); stroke-width: 2.2; stroke-linecap: round; transition: opacity 300ms; }
.pp-knot { fill: var(--yarn); stroke: var(--yarn-core); stroke-width: 1.6; transition: opacity 300ms; }
.pp-knot-x { fill: none; stroke: var(--yarn-hi); stroke-width: 1.2; stroke-linecap: round; transition: opacity 300ms; }
.pp-svg .is-off { opacity: 0; }
.pp-ball-label { font: 600 12px var(--font-mono); letter-spacing: 0.1em; fill: var(--primary); }

/* Playback */
.pp.is-play .pp-row.is-future .pp-ag, .pp.is-play .pp-row.is-future .pp-own { opacity: 0.45; }
.pp.is-play .pp-row.is-now .pp-ag { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-t), var(--shadow-popover); }
.pp.is-play [data-st]:not(.rec):not(.is-on) { opacity: 0.25; }
.pp.is-play .pp-n.is-now, .pp.is-play .pp-cell.is-now { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-t); }
.pp.is-play .pp-dec.is-now { box-shadow: 0 0 0 3px var(--secondary-t), var(--shadow-popover); }
.pp.is-play .pp-stn.is-now { box-shadow: 0 0 0 2px var(--accent-t); }
.pp.is-play .rec:not(.is-on) { opacity: 0; transform: translateX(-10px); }
.pp.is-play .rec.is-now { border-color: var(--accent); border-left-color: var(--primary); box-shadow: 0 0 0 2px var(--accent-t); }
.pp-cyc.is-now svg { animation: pp-spin 2.4s linear infinite; }
.pp-cell.is-now .pp-cyc svg { animation: pp-spin 2.4s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp-tree.is-now { filter: drop-shadow(0 0 6px var(--accent-t)); }

.pp-controls { position: relative; bottom: 52px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; padding: 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
.pp-step { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); min-width: 9ch; }
.pp.is-play .pp-controls { position: sticky; }
.pp-short { display: none; }
.pp-svg .yarn-ball { transform-box: fill-box; transform-origin: center; transition: transform 500ms cubic-bezier(.3,1.6,.5,1); }
.pp-svg .yarn-ball.pp-ball-full { transform: scale(1.25); }
.pp:not(.is-play) .pp-controls { bottom: auto; }
.pp-caption { flex: 1 1 360px; min-height: 64px; padding: 8px 12px; background: var(--surface); border-left: 3px solid var(--accent); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pp-caption b { color: var(--ink); }

/* Medium width: the owner is a strip above the agents block */
@media (max-width: 1180px) {
  .pp { --sk: 300px; --g: 28px; }
  .pp-head { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .pp-head .pp-col-h { flex: 0 1 auto; }
  .pp-head .pp-col-h.skein { margin-left: auto; width: var(--sk); }
  .pp-row { grid-template-columns: minmax(0, 1fr) var(--sk); grid-template-areas: "own rec" "ag rec"; }
  .pp-own { grid-area: own; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .pp-own:empty { display: none; }
  .pp-own .pp-dec { flex: 1 1 220px; }
  .pp-ag { grid-area: ag; }
  .pp-recs { grid-area: rec; grid-row: 1 / span 2; }
  .pp-bridge { display: none; }
  .pp-row + .pp-row .pp-ag::before, .pp-row + .pp-row .pp-ag::after { display: none; }
}

@media (max-width: 920px) { .pp-trio { grid-template-columns: minmax(0, 1fr); } }

/* Phone: everything in one column, the SKEIN thread along the left edge */
@media (max-width: 760px) {
  .pp { --rowgap: 34px; }
  .pp-head { gap: 6px 14px; margin-bottom: 14px; }
  .pp-head .pp-col-h { border-bottom: 0; padding-bottom: 0; }
  .pp-head .pp-col-h span { display: none; }
  .pp-head .pp-col-h.skein { margin-left: 0; width: auto; padding-left: 0; }
  .pp-head .pp-col-h.skein span { display: inline; }
  .pp-body { padding-left: 24px; padding-bottom: 54px; }
  .pp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "own" "ag" "rec"; }
  .pp-recs { grid-row: auto; padding-left: 8px; margin-top: 10px; }
  .pp-own { flex-direction: column; margin: 0 0 10px; }
  .pp-own .pp-dec { flex: none; }
  .pp-ag { padding: 12px 12px 14px; }
  .pp-stage b { font-size: 16px; }
  .pp-tool { margin-left: 0; flex-basis: 100%; }
  .pp-line, .pp-review { flex-direction: column; align-items: stretch; }
  .pp-to { width: 100%; height: 18px; }
  .pp-to::before { left: 20px; right: auto; top: 2px; bottom: 6px; border-top: 0; border-left: 2px solid var(--ink-3); }
  .pp-to::after { left: 15px; right: auto; top: auto; bottom: 0; border: 6px solid transparent; border-top: 7px solid var(--ink-3); border-bottom: 0; }
  .pp-line > .pp-cyc, .pp-review > .pp-cyc { flex-direction: row; width: auto; gap: 6px; align-self: flex-start; margin: 2px 0 2px 4px; }
  .pp-line > .pp-cyc svg, .pp-review > .pp-cyc svg { width: 26px; height: 26px; }
  .pp-review > .pp-fan { flex-direction: row; border-left: 0; padding: 6px 0 2px; align-self: flex-start; }
  .pp-tree { flex: none; width: 100%; max-width: 300px; align-self: center; margin: 4px 0; }
  .pp-lane { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pp-lane-h { flex-direction: row; gap: 8px; align-items: baseline; }
  .pp-track { flex-wrap: wrap; padding: 0; }
  .pp-track::before, .pp-bead { display: none; }
  .pp-stn { flex: 0 1 auto; }
  .pp-lanes { margin-bottom: 8px; }
  .pp-barrier { position: static; border-left: 0; border-top: 2px dashed var(--primary); padding-top: 4px; order: 9; }
  .pp-barrier span { position: static; white-space: normal; }
  .pp-controls { bottom: 46px; padding: 8px; gap: 6px; }
  .pp-step { min-width: 0; font-size: 11px; }
  .pp:not(.is-play) .pp-caption { min-height: 0; }
  .pp-controls .btn-sm { padding: 5px 9px; font-size: 13px; }
  .pp-long { display: none; }
  .pp-short { display: inline; }
  .pp-caption { flex-basis: 100%; min-height: 66px; font-size: 13.5px; padding: 6px 10px; order: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-svg .yarn-ball { transition: none; }
  .pp-bead { display: none; }
  .pp-cyc.is-now svg, .pp-cell.is-now .pp-cyc svg { animation: none; }
  .pp-ag, .pp-n, .pp-dec, .rec, .pp-tie, .pp-knot, .pp-knot-x { transition: none; }
}
@media (max-width: 760px) {
  .pp-row + .pp-row .pp-ag::before, .pp-row + .pp-row .pp-ag::after { display: none; }
  .pp-row + .pp-row::before { content: ''; position: absolute; left: 30px; top: calc(-1 * var(--rowgap) + 4px); height: calc(var(--rowgap) - 14px); border-left: 2px solid var(--ink-3); }
  .pp-row + .pp-row::after { content: ''; position: absolute; left: 25px; top: -11px; border: 6px solid transparent; border-top: 8px solid var(--ink-3); border-bottom: 0; }
}