/* Option B v2 · Sticky stage with an elevator-pitch hero, filled transitions and light/dark themes.
   Colours come from theme tokens below; <html data-theme> is set before paint by the inline head script.
   Product layers inside .layer are authored in film pixels (1920-wide frame) and scaled with `zoom` by script.js. */

/* Theme tokens. Light keeps the film palette; dark follows option C (near-black ink, brighter red for text, glass cards). */
:root {
  color-scheme: light;
  --muted: #6b7686;
  --red-tx: #dc0000;
  --ink-3: #334155;
  --ink-4: #64748b;
  --line-2: #cbd5e1;
  --sub-1: #f8fafc;
  --sub-2: #f1f5f9;
  --glass: #fff;
  --sh: 15 23 42;
  --solid: #0b1220;
  --on-solid: #fff;
  --bar-bg: #0b1220;
  --me-bg: #0b1220;
  --nav-bg: rgb(245 246 248 / 0.82);
  --grid: #e7eaef;
  --sword-c: #141310;
  --stamp-bg: rgb(255 255 255 / 0.86);
  --ind-li: rgb(255 255 255 / 0.7);
  --ind-bg: #eef2ff; --ind-bd: #c7d2fe; --ind-tx: #4338ca;
  --grn-bg: #f0fdf4; --grn-bd: #86efac; --grn-tx: #15803d;
  --red-bg: #fef2f2; --red-bd: #fca5a5; --red-t2: #b91c1c;
  --amb-bg: #fffbeb; --amb-tx: #b45309; --amb-t2: #92400e;
  --org-bg: #fff1e6; --org-bd: #fed7aa; --org-tx: #c2410c;
  --cyn-bg: #cffafe; --cyn-tx: #0891b2;
  --kpi-bg: linear-gradient(135deg, #f8faff, #fff);
  --kpi-r: linear-gradient(135deg, #fff5f5, #fff);
  --kpi-red: #ef4444;
  --sev-c: #fee2e2; --sev-h: #ffedd5; --sev-m: #fef9c3; --sev-m-tx: #a16207;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #07090d;
  --ink: #f1f5f9;
  --ink-2: #aab4c3;
  --ink-3: #cbd5e1;
  --ink-4: #9aa6b6;
  --muted: #8591a3;
  --line: rgb(255 255 255 / 0.1);
  --line-2: rgb(255 255 255 / 0.2);
  --card: #10161f;
  --sub-1: #0d121a;
  --sub-2: #1a2230;
  --glass: linear-gradient(180deg, rgb(27 34 47 / 0.94), rgb(14 19 28 / 0.94));
  --red-tx: #ff4d4d;
  --red-soft: rgb(239 68 68 / 0.14);
  --green-soft: rgb(34 197 94 / 0.14);
  --sh: 0 0 0;
  --solid: #eef2f7;
  --on-solid: #0b1220;
  --bar-bg: #1b2433;
  --me-bg: #2a3446;
  --nav-bg: rgb(7 9 13 / 0.78);
  --grid: rgb(255 255 255 / 0.045);
  --sword-c: #f5f5f4;
  --stamp-bg: rgb(10 12 18 / 0.86);
  --ind-li: rgb(16 22 31 / 0.75);
  --ind-bg: rgb(99 102 241 / 0.16); --ind-bd: rgb(129 140 248 / 0.4); --ind-tx: #a5b4fc;
  --grn-bg: rgb(34 197 94 / 0.13); --grn-bd: rgb(74 222 128 / 0.38); --grn-tx: #4ade80;
  --red-bg: rgb(239 68 68 / 0.15); --red-bd: rgb(248 113 113 / 0.45); --red-t2: #fca5a5;
  --amb-bg: rgb(245 158 11 / 0.14); --amb-tx: #fbbf24; --amb-t2: #fcd34d;
  --org-bg: rgb(249 115 22 / 0.15); --org-bd: rgb(251 146 60 / 0.38); --org-tx: #fb923c;
  --cyn-bg: rgb(34 211 238 / 0.14); --cyn-tx: #22d3ee;
  --kpi-bg: linear-gradient(135deg, rgb(99 102 241 / 0.1), transparent);
  --kpi-r: linear-gradient(135deg, rgb(239 68 68 / 0.12), transparent);
  --kpi-red: #ff6b6b;
  --sev-c: rgb(239 68 68 / 0.16); --sev-h: rgb(249 115 22 / 0.16); --sev-m: rgb(234 179 8 / 0.16); --sev-m-tx: #facc15;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
[data-theme="dark"] body { background: radial-gradient(1100px 700px at 82% -6%, rgb(120 10 18 / 0.28), transparent 62%), var(--paper); }
img, svg { display: block; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--red-tx); outline-offset: 3px; border-radius: 6px; }
.red { color: var(--red-tx); }
.wrap { width: min(1312px, 100% - 48px); margin-inline: auto; }
.mk { color: var(--sword-c); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--solid); color: var(--on-solid); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* Type */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; color: var(--ink); }
.label { font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-tx); display: flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 28px; height: 3px; background: var(--red); border-radius: 2px; flex: none; }
.label-c { justify-content: center; }
.label-c::before { display: none; }
.h2 { font-size: clamp(38px, 4.7vw, 68px); margin-top: 18px; text-wrap: balance; }
.h2s { font-size: clamp(32px, 3.4vw, 50px); margin-top: 16px; text-wrap: balance; line-height: 1.02; }
.h3 { font-size: clamp(28px, 2.8vw, 40px); margin-top: 14px; line-height: 1.05; text-wrap: balance; }
.sub { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 30em; letter-spacing: -0.005em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); font-weight: 500; margin-top: 26px; }
.wm { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; font-size: 22px; line-height: 1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgb(220 0 0 / 0.55); }
.btn-red:hover { background: #c40000; }
.btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 8px 22px -14px rgb(var(--sh) / 0.3); }
.btn-ghost .play { width: 26px; height: 26px; border-radius: 50%; background: var(--solid); color: var(--on-solid); display: grid; place-items: center; }
.btn-ghost .play svg { margin-left: 2px; }
.btn-ghost .dur { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn-lg { height: 62px; padding: 0 34px; font-size: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.ctas.center { justify-content: center; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.nav.scrolled { border-color: var(--line); }
.nav-in { width: min(1312px, 100% - 48px); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-links { display: flex; gap: 26px; margin-left: auto; margin-right: 6px; }
.nav-links a { font-size: 14.5px; font-weight: 550; color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.theme-tg { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; transition: border-color 0.2s, transform 0.2s; }
.theme-tg:hover { border-color: var(--line-2); transform: rotate(-12deg); }
.theme-tg svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.theme-tg .i-sun, [data-theme="dark"] .theme-tg .i-moon { display: none; }
[data-theme="dark"] .theme-tg .i-sun { display: block; }

/* Background grid from the film, masked toward the edges */
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%); }
[data-theme="dark"] .grid-bg { opacity: 1; }
/* The closing grid fades out before the footer line. */
.end .grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%), linear-gradient(#000 55%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%), linear-gradient(#000 55%, transparent);
  mask-composite: intersect; }

/* Hero: elevator pitch */
.hero { position: relative; min-height: min(calc(100svh - 56px), 900px); display: flex; align-items: center; padding: 100px 0 44px; overflow-x: clip; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1; }
.hero h1 > span { display: block; }
.uline { position: relative; display: inline-block; }
.uline::after { content: ""; position: absolute; left: 0.03em; right: 0.12em; bottom: -0.04em; height: 0.06em; background: var(--red); border-radius: 0.03em; transform-origin: 0 50%; }
.js .uline::after { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1) 0.9s; }
.js .hero.ready .uline::after { transform: scaleX(1); }
.pitch { margin-top: 22px; max-width: 33em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); }
.js .hero-copy > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1); }
.js .hero.ready .hero-copy > * { opacity: 1; transform: none; }
.js .hero.ready .hero-copy > :nth-child(2) { transition-delay: 0.1s; }
.js .hero.ready .hero-copy > :nth-child(3) { transition-delay: 0.22s; }
.js .hero.ready .hero-copy > :nth-child(4) { transition-delay: 0.32s; }
.js .hero.ready .hero-copy > :nth-child(5) { transition-delay: 0.42s; }
.js .hero.ready .hero-copy > :nth-child(6) { transition-delay: 0.52s; }

/* The chain: chips with arrows; a red pulse travels along it. */
.chain { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-top: 30px; }
.chain li { display: inline-flex; align-items: center; }
.chain li + li::before { content: "→" / ""; margin: 0 9px; font-size: 15px; font-weight: 700; color: var(--muted); }
.chain span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 650; color: var(--ink); white-space: nowrap; box-shadow: 0 6px 18px -14px rgb(var(--sh) / 0.35); }
.chain span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--line-2); }
.chain li:first-child span::before, .chain li:last-child span::before { background: var(--red); }
.js .chain span { animation: chain-lit 5s linear infinite; animation-delay: calc(var(--i) * 0.75s + 1.2s); }
.js .chain span::before { animation: chain-dot 5s linear infinite; animation-delay: calc(var(--i) * 0.75s + 1.2s); }
.js .chain li + li::before { animation: chain-arr 5s linear infinite; animation-delay: calc(var(--i) * 0.75s + 0.85s); }
@keyframes chain-lit { 0% { border-color: var(--red); color: var(--red-tx); box-shadow: 0 0 0 4px rgb(220 0 0 / 0.14); } 15% { border-color: var(--red); color: var(--red-tx); box-shadow: 0 0 0 4px rgb(220 0 0 / 0.14); } 24%, 100% { border-color: var(--line); color: var(--ink); box-shadow: 0 0 0 0 rgb(220 0 0 / 0); } }
@keyframes chain-dot { 0%, 15% { background: var(--red); transform: scale(1.35); } 24%, 100% { transform: none; } }
@keyframes chain-arr { 0%, 10% { color: var(--red-tx); transform: translateX(3px); } 18%, 100% { color: var(--muted); transform: none; } }
/* Add-ons to the chain: plain text without arrows, so they don't read as steps. */
.chain-x { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.chain-x li { display: inline-flex; align-items: baseline; gap: 6px; }
.chain-x li::before { content: "+" / ""; font-weight: 800; color: var(--red-tx); }
.chain-x b { font-weight: 650; color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.checks li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.checks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--grn-bg); color: var(--grn-tx); }

/* Hook chat (web scale, after film .chat) */
.hero-visual { position: relative; perspective: 2200px; }
.chat { position: relative; width: 100%; max-width: 600px; margin-left: auto; height: 500px; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgb(var(--sh) / 0.04), 0 30px 70px -18px rgb(var(--sh) / 0.24); transform: rotateY(-7deg) rotateX(3deg); transform-origin: 70% 50%; }
[data-theme="dark"] .chat { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 77 77 / 0.08), 0 40px 90px -20px rgb(0 0 0 / 0.8), 0 0 80px -30px rgb(220 0 0 / 0.35); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px 13px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 650; }
.chat-head .cs { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 1px; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--solid); color: var(--on-solid); display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; flex: none; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10.5px; }
.live { margin-left: auto; font-size: 13px; color: var(--grn-tx); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.live b { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.chat-body { flex: 1; padding: 16px 20px 0; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg.me { flex-direction: column; align-items: flex-end; gap: 6px; }
.probe { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bubble { border-radius: 18px; padding: 10px 15px; font-size: 14.5px; line-height: 1.42; }
.bubble.ai { background: var(--sub-2); border-bottom-left-radius: 6px; }
.bubble.me { background: var(--me-bg); color: #fff; max-width: 78%; font-family: var(--mono); font-size: 13px; border-bottom-right-radius: 6px; }
.qr { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 38px; }
.qr span { border: 1.5px solid var(--ind-bd); color: var(--ind-tx); background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.typing { display: none; gap: 5px; padding: 5px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 0.9s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.12s; }
.typing i:nth-child(3) { animation-delay: 0.24s; }
@keyframes dot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
[data-k="reply"].typing-on .typing { display: flex; }
[data-k="reply"].typing-on .leak, [data-k="reply"].typing-on .safe-tx { display: none; }
/* The finished (and static) state is the blocked retest; the leak only shows while the hook plays. */
.leak { display: none; }
.chat.anim [data-k="reply"].leaking .leak { display: block; }
.chat.anim [data-k="reply"].leaking .safe-tx { display: none; }
.safe-tx { max-width: 290px; }
.rows { margin-top: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.rows div { display: grid; grid-template-columns: 76px 160px auto; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--line-2); white-space: nowrap; }
.rows .x { color: var(--ink-2); }
.rows span:not(.x) { filter: blur(2.5px); }
.composer { margin: 14px; height: 56px; background: var(--sub-1); border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; padding: 0 8px 0 16px; gap: 10px; }
.composer .txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 13.5px; display: flex; }
.composer .ph { color: var(--muted); }
.composer.typing-now .ph { display: none; }
.composer.typing-now .txt { justify-content: flex-end; }
.composer .typed { flex: none; }
.composer .typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--red); vertical-align: -0.16em; margin-left: 2px; }
.composer:not(.typing-now) .typed { display: none; }
.send { height: 42px; padding: 0 16px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 7px; transition: transform 0.12s; }
.send.press { transform: scale(0.9); }
.stamp { position: absolute; left: 26%; top: 70%; border: 6px solid var(--grn-tx); color: var(--grn-tx); font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.9vw, 42px); line-height: 0.95; text-align: center; letter-spacing: 0.02em; padding: 10px 22px 12px; border-radius: 14px; background: var(--stamp-bg); white-space: nowrap; transform: translate(-30%, -10%) rotate(-8deg); pointer-events: none; }
.irun { position: absolute; top: -48px; right: -18px; z-index: 3; width: 262px; padding: 12px 14px 13px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 2px 4px rgb(var(--sh) / 0.05), 0 26px 60px -18px rgb(var(--sh) / 0.4); }
[data-theme="dark"] .irun { border-color: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 30px 70px -20px rgb(0 0 0 / 0.85); }
.ir-top { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.ir-pill { margin-left: auto; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--grn-bd); background: var(--grn-bg); color: var(--grn-tx); letter-spacing: 0.08em; transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
.irun[data-tone="work"] .ir-pill { border-color: var(--ind-bd); background: var(--ind-bg); color: var(--ind-tx); }
.irun[data-tone="crit"] .ir-pill { border-color: var(--red-bd); background: var(--red-bg); color: var(--red-tx); }
/* The red teaming loop: done steps are filled, the current one pulses; a passed retest turns the loop green. */
.ir-steps { display: flex; align-items: center; margin-top: 11px; font-size: 10.5px; font-weight: 650; color: var(--muted); }
.ir-steps li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ir-steps li + li { margin-left: 5px; }
.ir-steps li + li::before { content: ""; width: 8px; height: 1.5px; margin: 0 1px; background: var(--line-2); }
.ir-steps i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; transition: background-color 0.3s, border-color 0.3s; }
.ir-steps li.done { color: var(--ink-2); }
.ir-steps li.done i { background: var(--ink-3); border-color: var(--ink-3); }
.ir-steps li.now { color: var(--red-tx); }
.ir-steps li.now i { background: var(--red); border-color: var(--red); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 50% { box-shadow: 0 0 0 4px rgb(220 0 0 / 0.2); } }
.irun[data-tone="ok"] .ir-steps li.done { color: var(--grn-tx); }
.irun[data-tone="ok"] .ir-steps li.done i { background: var(--grn-tx); border-color: var(--grn-tx); }
.ir-t { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.ir-s { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
/* Evaluating: a scan line sweeps the reply being judged. */
[data-k="reply"] .bubble { position: relative; overflow: hidden; transition: box-shadow 0.3s; }
.chat.anim [data-k="reply"].judging .bubble { box-shadow: 0 0 0 1.5px rgb(220 0 0 / 0.45); }
.chat.anim [data-k="reply"].judging .bubble::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(180deg, transparent, rgb(220 0 0 / 0.12) 85%, rgb(220 0 0 / 0.5)); pointer-events: none; animation: scan 0.9s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
/* Animated states only exist when script.js runs the hook. */
.chat.anim [data-k] { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.3, 1); }
.chat.anim [data-k].in { opacity: 1; transform: none; }
.chat.anim .rows div { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.2, 0.3, 1); }
.chat.anim .rows div.in { opacity: 1; transform: none; }
.chat.anim .stamp { opacity: 0; transform: translate(-30%, -10%) rotate(-8deg) scale(2.3); }
.chat.anim .stamp.in { opacity: 1; transform: translate(-30%, -10%) rotate(-8deg) scale(1); transition: opacity 0.1s, transform 0.45s cubic-bezier(0.2, 1.35, 0.4, 1); }
.chat.anim .irun { opacity: 0; transform: translateX(18px) scale(0.96); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.3, 1); }
.chat.anim .irun.in { opacity: 1; transform: none; }
.chat.anim .msg.me.again .bubble { animation: again 0.7s ease-out; }
@keyframes again { from { box-shadow: 0 0 0 0 rgb(99 102 241 / 0.45); } to { box-shadow: 0 0 0 12px rgb(99 102 241 / 0); } }
/* Between loops the hook fades out, then resets without transitions. */
.chat.anim.out .chat-body, .chat.anim.out .irun, .chat.anim.out .stamp { opacity: 0; transition: opacity 0.45s ease; }
.chat.reset, .chat.reset * { transition: none !important; animation: none !important; }
.chat-cap { max-width: 600px; margin: 24px 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.025em; line-height: 1.2; text-align: center; }

/* Band (a): slow ticker of use cases and risks in plain words */
.ticker { position: relative; display: flex; align-items: stretch; height: 58px; border-block: 1px solid var(--line); background: var(--card); overflow: hidden; }
.tk-k { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 max(24px, (100% - 1312px) / 2); border-right: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-tx); white-space: nowrap; }
.tk-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgb(220 0 0 / 0.14); }
.tk-band { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tick-row { display: flex; width: max-content; }
.tick-row li { display: inline-flex; align-items: center; gap: 10px; margin-right: 34px; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tick-row li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--red); opacity: 0.8; }
.tick-row li.more { color: var(--ink-2); font-weight: 500; }
.tick-row li.more::before { display: none; }
.js .tick-row.moving { animation: band 70s linear infinite; }

/* Section shells */
section { position: relative; }
.loop, .enterprise { padding: clamp(72px, 10vh, 108px) 0; overflow-x: clip; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease var(--d, 0s), transform 1s cubic-bezier(0.2, 0.9, 0.25, 1) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* Why band */
.why { padding: clamp(80px, 12vh, 132px) 0; border-bottom: 1px solid var(--line); text-align: center; }
.why .h2 { max-width: 13em; margin-inline: auto; }
.why .sub { max-width: 34em; margin: 22px auto 0; text-wrap: balance; }

/* Loop ring */
.loop-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.loop-list { margin-top: 26px; max-width: 540px; border-top: 1px solid var(--line); }
.loop-list li { display: grid; grid-template-columns: 38px 104px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.loop-list .n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--red-tx); letter-spacing: 0.06em; }
.loop-list b { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.loop-list span:last-child { font-size: 15px; color: var(--ink-2); }
.ring { --size: min(520px, 82vw); --r: calc(var(--size) * 0.36); position: relative; width: var(--size); height: var(--size); margin-inline: auto; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 300px 300px; }
.js .ring .ring-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(0.6, 0, 0.2, 1) 0.2s; }
.js .ring.in .ring-line { stroke-dashoffset: 0; }
.chev path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ring-nodes li { position: absolute; left: calc(50% + cos(var(--a)) * var(--r)); top: calc(50% + sin(var(--a)) * var(--r)); width: 0; height: 0; }
.ring-nodes b { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--red); border: 3px solid var(--red); animation: bump 7.5s ease-out infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes bump { 0% { transform: scale(1.45); box-shadow: 0 0 0 10px rgb(220 0 0 / 0.16); } 14%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(220 0 0 / 0); } }
.ring-nodes li > span { position: absolute; white-space: nowrap; }
.ring-nodes .top > span { left: -120px; width: 240px; bottom: 22px; text-align: center; }
.ring-nodes .bottom > span { left: -120px; width: 240px; top: 22px; text-align: center; }
.ring-nodes .right > span { left: 24px; top: -28px; }
.ring-nodes .left > span { right: 24px; top: -28px; text-align: right; }
.ring-nodes .n { display: block; font-family: var(--mono); color: var(--red-tx); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }
.ring-nodes .h { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.035em; line-height: 1.05; }
.orbit { position: absolute; inset: 0; animation: orbit 7.5s linear infinite; }
.orbit i { position: absolute; left: 50%; top: calc(50% - var(--r)); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 8px rgb(220 0 0 / 0.15); }
[data-theme="dark"] .orbit i { box-shadow: 0 0 0 8px rgb(255 59 59 / 0.18), 0 0 24px 4px rgb(255 59 59 / 0.45); }
@keyframes orbit { to { transform: rotate(360deg); } }
.ring-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.ring-mid .rm { display: block; margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.12; }

/* Framework chips, severity badges and tags */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 560px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 22px -12px rgb(var(--sh) / 0.2); }
.chips i { width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
.sev { font-size: 15px; font-weight: 700; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.sev.critical { background: var(--sev-c); color: var(--red-t2); }
.tag { font-size: 14.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--sub-2); color: var(--ink-3); white-space: nowrap; }
.tag.lang { background: var(--ind-bg); color: var(--ind-tx); }
/* Redaction bars replace adversarial text everywhere except the hook. */
.rd { display: inline-block; height: 0.78em; border-radius: 0.14em; background: var(--ink); margin-right: 0.32em; vertical-align: -0.06em; }
.rd.l { background: var(--line-2); }

/* Targets */
.tvis { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.band-row { display: flex; width: max-content; padding: 6px 0; }
.band-row li { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px -14px rgb(var(--sh) / 0.25); }
.band-row li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--indigo); }
.band-row.g li::before { background: var(--green); }
.js .band-row.moving { animation: band 32s linear infinite; }
.js .band[data-dir="-1"] .band-row.moving { animation-direction: reverse; }
@keyframes band { to { transform: translateX(-33.3333%); } }
.tpanel { display: flex; flex-direction: column; gap: 12px; }
.tconn .k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ind-tx); }
.tconn .t { display: block; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin-top: 2px; }
.tcard { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 16px; background: var(--sub-1); border: 1.5px solid var(--line); }
.tcard.tc-llm { background: var(--ind-bg); border-color: var(--ind-bd); }
.tcard.tc-guard { background: var(--grn-bg); border-color: var(--grn-bd); }
.tcard .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.tcard .ic svg { width: 28px; height: 28px; }
.tc-llm .ic { background: var(--ind-bg); color: var(--ind-tx); }
.tc-app .ic { background: var(--cyn-bg); color: var(--cyn-tx); }
.tc-guard .ic { background: var(--grn-bg); color: var(--grn-tx); }
[data-theme="light"] .tc-llm .ic { background: #e0e7ff; color: #4f46e5; }
[data-theme="light"] .tc-guard .ic { background: #dcfce7; color: #16a34a; }
.tc-llm .k, .tc-llm .ar { color: var(--ind-tx); }
.tc-app .k { color: var(--cyn-tx); }
.tc-guard .k, .tc-guard .ar { color: var(--grn-tx); }
.tcard .k { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.tcard .h { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 1px; }
.tcard .d { font-size: 14px; color: var(--ink-4); margin-top: 2px; }
.tcard .ar { margin-left: auto; font-size: 24px; }

/* Chapters (01, 02, 05): the step heading and its topic index stay pinned while the topics scroll past.
   Below 960px the index becomes a sticky row of chips under the nav. */
.chapter { padding: clamp(72px, 10vh, 108px) 0 clamp(24px, 4vh, 48px); border-top: 1px solid var(--line); overflow-x: clip; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 64px; }
.ch-pin { position: sticky; top: 112px; align-self: start; }
.ch-nav { display: grid; margin-top: 30px; max-width: 360px; border-left: 2px solid var(--line); }
.ch-nav a { display: flex; align-items: center; gap: 12px; margin-left: -2px; padding: 10px 16px; border-left: 2px solid transparent; font-size: 15.5px; font-weight: 650; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.3s, border-color 0.3s; }
.ch-nav svg { width: 20px; height: 20px; flex: none; transition: color 0.3s; }
.ch-nav a:hover, .ch-nav .on a { color: var(--ink); }
.ch-nav .on a { border-color: var(--red); }
.ch-nav .on svg { color: var(--red-tx); }
.topic { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.topic:first-child { justify-content: flex-start; padding-top: 0; }
.tp-k { font-size: 13px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-tx); }
.h3t { font-size: clamp(28px, 2.6vw, 38px); margin-top: 10px; line-height: 1.04; text-wrap: balance; }
.topic .tx { margin-top: 14px; max-width: 36em; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.topic .chips { margin-top: 18px; max-width: none; gap: 8px; }
.topic .chips li { padding: 5px 12px; font-size: 13px; box-shadow: none; }
.topic .pts { margin-top: 16px; max-width: 36em; }
.tp-vis > .layer { flex: none; }
.tp-vis { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: 26px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--sub-1); }
.tp-vis.tvis { flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; padding: 24px 0; }
.tp-vis.tvis .tpanel { padding: 0 24px; }
@media (min-width: 960px) {
  .js .topic { transition: opacity 0.5s ease; }
  .js .topic:not(.active) { opacity: 0.3; }
}

/* Topic layers: small product views in film px (600 wide), scaled to their visual by script.js. */
.l-ui { width: 600px; padding-bottom: 64px; }
.layer.l-ui .card { padding: 22px 24px; border-radius: 20px; }
.uh { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ut { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); }
.layer.l-ui .note { font-size: 13.5px; }
.uk { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--sub-2); color: var(--ink-3); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
.pill.ok, .pill.vio.live { background: var(--grn-bg); color: var(--grn-tx); }
.pill.bad { background: var(--red-bg); color: var(--red-t2); }
.pill.vio { background: var(--ind-bg); color: var(--ind-tx); }
.pill.amb { background: var(--amb-bg); color: var(--amb-tx); }
.ubtn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ubtn.ghost { background: var(--card); color: var(--ink-2); border: 1px solid var(--line); }
.ufoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.urow { display: grid; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: background-color 0.25s; }
.urow b { display: block; color: var(--ink); font-weight: 700; }
.urow em { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.urow.uhd { min-height: 34px; margin-top: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cb { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); background: var(--card); transition: background-color 0.2s, border-color 0.2s; }
.on > .cb { background: var(--indigo); border-color: var(--indigo); }
.on > .cb::after { content: ""; position: absolute; left: 3.5px; top: 2.5px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.layer.l-ui .toast { left: 32px; bottom: 0; gap: 10px; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; }
.layer.l-ui .toast .ok { width: 22px; height: 22px; }
.l-ui .sev { padding: 3px 8px; font-size: 10.5px; }
.l-ui .tag { padding: 3px 7px; border-radius: 6px; font-size: 11px; }
.l-ui .fchip { height: 30px; gap: 6px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; }
.l-ui .fchip svg { width: 10px; height: 10px; }
.pb { height: 8px; border-radius: 5px; background: var(--sub-2); overflow: hidden; }
.pb i { display: block; width: 6%; height: 100%; border-radius: 5px; background: var(--indigo); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s; }
.pb i.p1 { width: 34%; }
.pb i.p2 { width: 68%; }
.pb i.p3 { width: 100%; background: var(--green); }
.pst { font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-align: right; white-space: nowrap; }

/* Layer · Advanced filters */
.l-find .cnt { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.l-find .cnt b { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.fsr { display: flex; align-items: center; gap: 10px; height: 40px; margin-top: 16px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub-1); font-size: 13px; color: var(--muted); }
.fsr svg { width: 18px; height: 18px; color: var(--ind-tx); }
.fsr .n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #4f46e5; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.l-find .fchips { min-height: 30px; margin-top: 12px; gap: 8px; }
.l-find .urow { grid-template-columns: minmax(0, 1fr) 76px 66px 168px; }
.fws { display: flex; gap: 4px; }
.fws i { padding: 3px 7px; border-radius: 6px; background: var(--sub-2); color: var(--ink-3); font-size: 11px; font-weight: 700; font-style: normal; white-space: nowrap; }

/* Layer · Forge */
.l-forge .uk { margin-top: 18px; }
.meth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.mo { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--sub-1); transition: border-color 0.25s, background-color 0.25s; }
.mo b { display: block; font-size: 14px; font-weight: 700; transition: color 0.25s; }
.mo span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mo.sel { border-color: var(--indigo); background: var(--ind-bg); }
.mo.sel b { color: var(--ind-tx); }
.fsteps { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.fsteps > i { flex: 1; height: 2px; background: var(--line); }
.fs { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color 0.25s; }
.fs b { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 11px; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.fs.on { color: var(--ind-tx); }
.fs.on b { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.gen { display: grid; gap: 8px; min-height: 124px; margin-top: 14px; }
.grow { display: flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub-1); font-size: 13px; white-space: nowrap; overflow: hidden; }
.grow svg { width: 16px; height: 16px; flex: none; margin-right: 10px; color: var(--grn-tx); }

/* Layer · Dynamic Attacks */
.techs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tq { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 750; color: var(--ink-3); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.tq.sel { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.tq.more { border-style: dashed; font-weight: 600; color: var(--muted); }
.tdesc { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.turns { display: grid; gap: 8px; min-height: 222px; margin-top: 14px; align-content: start; }
.turn { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub-1); font-size: 13px; }
.turn .tn { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.turn .bars { overflow: hidden; white-space: nowrap; }
.turn.back { border-color: transparent; background: var(--amb-bg); color: var(--amb-t2); font-weight: 650; }
.turn.back .tn { color: var(--amb-tx); }
.meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; }
.meter .track { height: 10px; border-radius: 6px; background: var(--sub-2); overflow: hidden; }
.meter .track i { display: block; width: 0; height: 100%; border-radius: 6px; background: var(--red); transition: width 0.6s cubic-bezier(0.3, 1.2, 0.4, 1); }
.meter .track i.s1 { width: 10%; }
.meter .track i.s2 { width: 30%; }
.meter .track i.s3 { width: 60%; }
.meter .track i.s4 { width: 100%; }
.meter b { min-width: 50px; text-align: right; font-family: var(--display); font-size: 18px; font-weight: 800; }

/* Layer · Strike Lists */
.l-ui.l-sl { padding-bottom: 136px; }
.l-sl .urow { grid-template-columns: minmax(0, 1fr) 64px 64px; margin: 0 -10px; padding: 0 10px; border-radius: 10px; }
.l-sl .urow.sel { background: var(--ind-bg); }
.gdlg { right: -12px; top: 196px; width: 272px; padding: 18px; }
.gdlg .ut { font-size: 16px; }
.tg { display: flex; align-items: center; gap: 10px; height: 36px; margin-top: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 650; transition: border-color 0.2s; }
.tg.on { border-color: var(--ind-bd); }
.gdlg .ubtn { width: 100%; margin-top: 14px; }

/* Layer · Workflow */
.wf-from { display: flex; align-items: center; gap: 10px; margin-top: 16px; white-space: nowrap; }
.wf-from .pill + .uk { margin-left: auto; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sub-2); }
.seg i { padding: 5px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; font-style: normal; color: var(--muted); transition: background-color 0.25s, color 0.25s; }
.seg i.on { background: var(--card); color: var(--ind-tx); box-shadow: 0 1px 3px rgb(var(--sh) / 0.15); }
.pipe { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pipe span { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.pipe span.on { border-color: var(--ind-bd); background: var(--ind-bg); color: var(--ind-tx); }
.pipe > i { flex: 1; height: 2px; background: var(--line-2); }
.paths { display: grid; gap: 8px; margin-top: 14px; }
.path, .prow { display: grid; align-items: center; gap: 12px; height: 52px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sub-1); font-size: 13px; }
.path { grid-template-columns: 26px 150px minmax(0, 1fr) 126px; }
.path b, .prow b { display: block; font-size: 13.5px; }
.path em, .prow em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.pk, .pi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); font-size: 12px; font-weight: 800; }
.wf-n { margin-top: 12px; }

/* Layer · Processes */
.l-proc .uh { margin-bottom: 14px; }
.prow { grid-template-columns: 26px 220px minmax(0, 1fr) 132px; margin-top: 8px; }
.pi { background: var(--ind-bg); color: var(--ind-tx); }
.prow .pst { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.prow .ubtn { height: 28px; padding: 0 12px; font-size: 12px; }
.prow.go .ubtn { display: none; }

/* Layer · Studio */
.l-studio { padding-bottom: 0; }
.layer.l-ui .st { padding: 0; overflow: hidden; }
.st-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.st-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.st-tree { padding: 12px 10px; border-right: 1px solid var(--line); background: var(--sub-1); font-size: 12.5px; }
.tsrch { display: flex; align-items: center; height: 30px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); }
.st-tree .uk { margin: 12px 8px 4px; font-size: 10px; }
.tn { display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 8px; border-radius: 8px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tn.sel { background: var(--ind-bg); color: var(--ind-tx); }
.tn em { margin-left: auto; font-size: 11px; font-weight: 700; font-style: normal; color: var(--ind-tx); }
.tn em.m { color: var(--muted); }
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted); transition: background-color 0.3s; }
.dot.vio { background: var(--indigo); }
.dot.ok { background: var(--green); }
.st-main { padding: 16px 20px; }
.st-tabs { display: flex; gap: 18px; margin-top: 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-tabs span { padding-bottom: 8px; }
.st-tabs .on { color: var(--ind-tx); box-shadow: inset 0 -2px var(--indigo); }
.prow2 { display: flex; align-items: center; justify-content: space-between; height: 38px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-3); overflow: hidden; transition: height 0.4s ease, opacity 0.4s ease, border-color 0.4s; }
.prow2.rm > span:first-child { text-decoration: line-through; color: var(--muted); }
.js .layer .st-main.pub .chg { opacity: 0; transform: none; }
.st-main.pub .rm { height: 0; opacity: 0; border-color: transparent; }
.st-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ind-bd); background: var(--ind-bg); transition: background-color 0.3s, border-color 0.3s; }
.st-bar > span:first-child { margin-right: auto; font-size: 13px; }
.st-bar b { display: block; color: var(--ind-tx); }
.st-bar em { display: block; font-size: 12px; font-style: normal; color: var(--muted); }
.st-bar .ubtn { transition: opacity 0.3s; }
.st-bar.done { border-color: var(--grn-bd); background: var(--grn-bg); }
.st-bar.done b { color: var(--grn-tx); }
.st-bar.done .ubtn { opacity: 0; }

/* Layer · Firewall Logs */
.l-logs .urow { grid-template-columns: 16px 48px 72px minmax(0, 1fr); margin: 0 -10px; padding: 0 10px; border-radius: 10px; }
.l-logs .urow.on { background: var(--ind-bg); }
.l-logs .bars { overflow: hidden; white-space: nowrap; }

/* Everyday features: four cards with small, static product views. */
.apps { padding: clamp(72px, 10vh, 108px) 0; border-top: 1px solid var(--line); }
.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.app { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); box-shadow: 0 1px 2px rgb(var(--sh) / 0.04), 0 18px 44px -18px rgb(var(--sh) / 0.16); }
[data-theme="dark"] .app { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 50px -24px rgb(0 0 0 / 0.8); }
.app-h { display: flex; align-items: center; gap: 12px; padding: 0 4px; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.app-h .fi { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--red-bg); color: var(--red-tx); }
.app > p { margin-top: -8px; padding: 0 4px 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.av { position: relative; height: 236px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--sub-1); font-size: 13px; color: var(--ink-3); }
/* Breadcrumb: the earliest steps slide out of view first on narrow cards, as in the app. */
.bc { display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 56px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.bc > i { flex: none; font-style: normal; color: var(--muted); }
.bc-r { flex: none; font-weight: 650; color: var(--ink); }
.bc-b { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-weight: 650; color: var(--ind-tx); }
.bc-b small { position: absolute; left: 10px; top: -16px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.bc-b.cur { border-color: var(--ind-bd); background: var(--ind-bg); }
.bc-b svg, .bc-n svg { width: 14px; height: 14px; }
.bc-n { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--muted); }
.bc-menu { position: absolute; left: min(250px, calc(100% - 264px)); top: 84px; width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 24px 50px -18px rgb(var(--sh) / 0.35); }
.bc-q { display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); color: var(--muted); }
.bc-q svg { width: 14px; height: 14px; }
.bc-o { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 8px; }
.bc-o b { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.bc-o span { font-size: 12px; color: var(--muted); }
.bc-o svg { width: 14px; height: 14px; margin-left: auto; color: var(--ind-tx); }
.bc-o.on { background: var(--ind-bg); }
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ws-top b { font-size: 15px; color: var(--ink); }
.ws-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 120px; align-items: center; gap: 12px; height: 54px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ws-a { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ind-bg); color: var(--ind-tx); font-size: 11px; font-weight: 800; }
.ws-n { min-width: 0; }
.ws-n b, .ws-n em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-n b { font-size: 13.5px; color: var(--ink); }
.ws-n em, .ws-m em { font-size: 11.5px; font-style: normal; color: var(--muted); }
.ws-m { display: grid; gap: 4px; }
.ws-m i { position: relative; height: 6px; border-radius: 4px; background: var(--sub-2); overflow: hidden; }
.ws-m i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 4px; background: var(--indigo); }
.av-wiki { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
.wk-side { display: grid; align-content: start; gap: 2px; }
.wk-side .uk { margin: 2px 8px 6px; }
.wk-side span:not(.uk) { padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-side .on { background: var(--ind-bg); color: var(--ind-tx); }
.wk-main { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.wk-main > b { display: block; margin-top: 4px; font-size: 16px; color: var(--ink); }
.wk-main p { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.wk-rel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wk-gy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.wk-gy b { display: block; font-size: 12.5px; color: var(--ink); }
.wk-gy .ubtn { height: 28px; padding: 0 12px; font-size: 12px; }
.ld-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ld-k > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ld-k span, .ld-k em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-style: normal; color: var(--muted); }
.ld-k b { display: block; margin: 2px 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.ld-k small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ld-ch { display: block; width: 100%; height: 62px; margin-top: 12px; overflow: visible; }
.ld-ch .gr { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ld-ch .ln { fill: none; stroke: var(--indigo); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.js .app .ld-ch .ln { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.5, 0, 0.2, 1) 0.4s; }
.js .app.in .ld-ch .ln { stroke-dashoffset: 0; }
.ld-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ld-f .note { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Topic points */
.pts { display: grid; gap: 8px; margin-top: 18px; max-width: 30em; }
.pts li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.42; font-weight: 500; color: var(--ink); }
.pts li::before { content: ""; position: absolute; left: 3px; top: 0.36em; width: 10px; height: 5px; border-left: 2.4px solid var(--red-tx); border-bottom: 2.4px solid var(--red-tx); transform: rotate(-45deg); }
/* The remark between analysis and defense: an aside in quiet type, not another heading. */
.remark { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; margin-top: 26px; max-width: 30em; padding: 16px 20px 17px 16px; border-left: 3px solid var(--red); border-radius: 3px 14px 14px 3px; background: var(--sub-2); }
.remark > * { grid-column: 2; }
.remark > .rk-i { grid-column: 1; grid-row: 1 / span 3; width: 22px; height: 22px; margin-top: 1px; color: var(--red-tx); }
.rk-q { font-family: var(--display); font-size: 19px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.rk-s { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pivot { padding: clamp(56px, 9vh, 96px) 0; border-top: 1px solid var(--line); }
.pivot .remark { margin: 0 auto; max-width: 40em; padding: 22px 28px 23px 22px; }
.pivot .rk-q { font-size: clamp(21px, 2.2vw, 28px); }
.pivot .rk-s { font-size: 16px; }

/* Layer · Evaluation methods */
.l-meth .mk { margin-top: 18px; }
.mset { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sub-1); }
.mset > div { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; }
.msel { display: flex; align-items: center; height: 32px; padding: 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mset .ubtn { height: 30px; padding: 0 12px; font-size: 12px; }
.mset .seg { justify-self: start; }

/* Layer · Explained results */
.l-res .urow { grid-template-columns: minmax(0, 1fr) 64px 130px; margin: 0 -10px; padding: 0 10px; border-radius: 10px; }
.l-res .urow > :last-child { justify-self: end; }
.l-res .urow.sel { background: var(--ind-bg); }
.xp { overflow: hidden; max-height: 180px; margin: 6px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sub-1); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.5s ease, margin 0.5s ease; }
.js .layer .xp:not(.in) { max-height: 0; margin-block: 0; padding-block: 0; border-color: transparent; transform: none; }
.xp p, .dr-d p { margin-top: 4px; }
.kv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Layer · Breakdowns (also frameworks and drill-down bars) */
.l-brk .urow { grid-template-columns: minmax(0, 1fr) 72px 56px 150px; }
.asr { display: flex; align-items: center; gap: 10px; }
.asr b { min-width: 44px; text-align: right; font-size: 12.5px; }
.hb { flex: 1; display: block; height: 8px; border-radius: 4px; background: var(--sub-2); overflow: hidden; }
.hb i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 4px; background: var(--red); transition: width 0.9s cubic-bezier(0.5, 0, 0.2, 1); }
.js .layer .hb i[data-in]:not(.in) { width: 0; transform: none; opacity: 1; }
.topf { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.topf .uh { margin-bottom: 6px; }
.tfr { display: grid; grid-template-columns: 180px minmax(0, 1fr) 40px; align-items: center; gap: 12px; height: 30px; margin: 0 -8px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background-color 0.25s; }
.tfr b { text-align: right; color: var(--ink); }
.tfr.sel { background: var(--red-bg); }

/* Layer · Frameworks */
.fw-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.fw-list { display: grid; gap: 2px; align-content: start; }
.fw-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; transition: background-color 0.25s, color 0.25s; }
.fw-li b { font-weight: 650; }
.fw-li span { font-size: 12px; font-weight: 700; color: var(--muted); }
.fw-li.sel, .fw-li.sel span { background: var(--ind-bg); color: var(--ind-tx); }
.fw-h { margin-bottom: 8px; }
.fw-h b { display: block; font-size: 15px; color: var(--ink); }
.fw-h span { font-size: 12px; color: var(--muted); }
.fw-d .tfr { grid-template-columns: 150px minmax(0, 1fr) 36px; }
.unc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; }
.unc .uk { width: 100%; margin-bottom: 2px; }

/* Layer · Drill down */
.l-ui.l-drill { min-height: 440px; padding-bottom: 0; }
.dr-c { width: 340px; }
.dr-c .uk { margin-bottom: 8px; }
.dr-c .tfr { grid-template-columns: 150px minmax(0, 1fr) 30px; }
.drw { right: 0; top: 56px; width: 330px; padding: 16px 18px; }
.drw .uh { align-items: flex-start; margin-bottom: 8px; }
.drw .ut { font-size: 16px; }
.dr-r { display: flex; align-items: center; justify-content: space-between; height: 38px; margin: 0 -8px; padding: 0 8px; border-top: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; transition: background-color 0.25s; }
.dr-r.sel { background: var(--ind-bg); }
.dr-d { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.dr-d .kv { margin-top: 0; }
.dr-d .uk { margin-top: 10px; }
.dr-d .bars { display: block; margin-top: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.dr-d .ubtn { margin-top: 12px; height: 30px; font-size: 12px; }

/* Layers: product-faithful components in film pixels. */
.layer { position: relative; font-family: var(--font); color: var(--ink); zoom: 0.5; }
.layer .note { font-size: 17px; color: var(--muted); font-weight: 500; }
.layer .card { background: var(--glass); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px rgb(var(--sh) / 0.04), 0 24px 64px -12px rgb(var(--sh) / 0.16); }
.layer .float { position: absolute; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 2px 4px rgb(var(--sh) / 0.05), 0 40px 90px -20px rgb(var(--sh) / 0.38); }
[data-theme="dark"] .layer .card, [data-theme="dark"] .layer .float, [data-theme="dark"] .rrow {
  border-color: rgb(255 255 255 / 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 40px 90px -20px rgb(0 0 0 / 0.85); }
.layer .toast { position: absolute; display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-radius: 18px; background: var(--solid); color: var(--on-solid); font-size: 22px; font-weight: 600; white-space: nowrap; box-shadow: 0 24px 60px -16px rgb(var(--sh) / 0.5); }
.layer .toast .ok { width: 30px; height: 30px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; }

/* Timeline states driven by script.js: data-in → .in (entrance), data-tl → state classes. */
.layer [data-in] { transition: opacity 0.45s ease, transform 0.65s cubic-bezier(0.2, 1.15, 0.3, 1), width 0.9s cubic-bezier(0.5, 0, 0.2, 1); }
.js .layer [data-in]:not(.in) { opacity: 0; transform: translateY(26px) scale(0.95); }
.js .layer.reset, .js .layer.reset * { transition: none !important; animation: none !important; }
.js .layer { transition: opacity 0.4s ease; }
.js .layer.fade { opacity: 0; }
.press { animation: press 0.32s ease; }
@keyframes press { 45% { transform: scale(0.9); } }

/* Layer · Evaluate */
.l-eval { width: 900px; height: 760px; }
.rstack { position: absolute; left: 0; top: 0; transition: opacity 0.45s ease, filter 0.45s ease, transform 0.6s ease, visibility 0s; }
.rstack.dim { opacity: 0; visibility: hidden; filter: blur(4px); transform: translate(-40px, -30px) scale(0.95); transition: opacity 0.45s ease, filter 0.45s ease, transform 0.6s ease, visibility 0s linear 0.45s; }
.rrow { position: relative; width: 800px; height: 110px; margin-bottom: 24px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 16px 40px -20px rgb(var(--sh) / 0.28); padding: 20px 26px; }
.rrow .a { font-size: 22px; font-weight: 700; }
.rrow .r { font-family: var(--mono); font-size: 18px; color: var(--ink-2); margin-top: 10px; white-space: nowrap; overflow: hidden; width: 500px; }
.verdict { position: absolute; right: 24px; top: 16px; text-align: right; }
.verdict .v { display: inline-block; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: 0.06em; padding: 7px 16px; border-radius: 10px; border: 3px solid; }
.verdict .v.ok { color: var(--grn-tx); border-color: var(--grn-bd); background: var(--grn-bg); }
.verdict .v.bad { color: #fff; background: var(--red); border-color: var(--red); }
.js .layer .verdict .v[data-in]:not(.in) { transform: scale(1.9) rotate(-6deg); }
.verdict .j { font-size: 16px; color: var(--muted); margin-top: 8px; font-weight: 600; }
.matrix { position: absolute; left: 110px; top: 50px; width: 760px; padding: 34px; }
.matrix .mt { font-size: 28px; font-weight: 750; letter-spacing: -0.01em; }
.matrix .note { margin-top: 6px; font-size: 19px; }
.mgrid { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 12px; margin-top: 18px; }
.mgrid .hd { font-size: 17px; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; }
.cell { height: 150px; border-radius: 18px; padding: 20px 22px; }
.js .layer .cell[data-in]:not(.in) { transform: scale(0.6); }
.cell .num { font-family: var(--display); font-weight: 800; font-size: 54px; letter-spacing: -0.03em; }
.cell .lb { font-size: 19px; font-weight: 650; margin-top: 4px; }
.cell.g { background: var(--grn-bg); color: var(--grn-tx); }
.cell.r { background: var(--red-bg); color: var(--red-t2); }
.cell.a { background: var(--amb-bg); color: var(--amb-tx); }
.mfoot2 { display: flex; justify-content: space-between; margin-top: 20px; font-size: 20px; font-weight: 600; color: var(--ink-2); }

/* Layer · Analyze */
.l-an { width: 860px; height: 600px; }
.kcard { left: 200px; top: 0; width: 660px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; height: 150px; background: var(--kpi-bg); }
.kpi.rdk { background: var(--kpi-r); }
.kpi.rdk::after { content: ""; position: absolute; inset: -9px; border: 5px solid var(--red); border-radius: 22px; opacity: 0; transform: scale(1.08); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.kpi.rdk.ring::after { opacity: 1; transform: none; }
.kpi .l { font-size: 16px; color: var(--ink-3); font-weight: 550; white-space: nowrap; }
.kpi .v { font-family: var(--display); font-weight: 800; font-size: 50px; letter-spacing: -0.03em; margin-top: 6px; color: var(--ink); }
.kpi.rdk .v { color: var(--kpi-red); }
.kpi .s { font-size: 14.5px; color: var(--ink-4); margin-top: 4px; white-space: nowrap; }
.fbar { left: 0; top: 300px; width: 860px; padding: 18px 22px; }
.fbar .fh { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; }
.fbar .fh svg { color: var(--ind-tx); }
.fbar .fh .n { min-width: 26px; height: 26px; border-radius: 13px; background: #4f46e5; color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; padding: 0 7px; }
.fbar .fh .note { margin-left: auto; font-size: 15px; }
.fchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; min-height: 90px; align-content: flex-start; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--ind-bg); color: var(--ind-tx); font-size: 15.5px; font-weight: 650; white-space: nowrap; border: 1px solid var(--ind-bd); }
.js .layer .fchip[data-in]:not(.in) { transform: scale(0.5); transform-origin: 0 50%; }

/* Layer · Optimize */
.l-opt { width: 800px; height: 840px; }
.opt { position: absolute; left: 0; top: 0; width: 800px; padding: 34px 36px; }
.oh { display: flex; align-items: flex-start; justify-content: space-between; }
.oh .ot { font-size: 30px; font-weight: 750; letter-spacing: -0.015em; }
.oh .note { font-size: 18px; margin-top: 6px; }
.osteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.stp { height: 100px; border-radius: 16px; background: var(--sub-1); border: 2px solid var(--line); padding: 14px 18px; transition: background-color 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.stp .no { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); font-size: 15px; font-weight: 700; display: grid; place-items: center; color: var(--muted); background: var(--card); }
.stp .nm { font-size: 20px; font-weight: 700; margin-top: 10px; color: var(--ink-3); }
.stp.on { background: var(--ind-bg); border-color: var(--ind-bd); }
.stp.on .no { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.stp.on .nm { color: var(--ind-tx); }
.prog { height: 8px; border-radius: 5px; background: var(--sub-2); margin-top: 18px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 100%; background: var(--indigo); }
.js .layer .prog i { transition: width 1.8s linear !important; }
.js .layer .prog i:not(.in) { width: 0; transform: none; opacity: 1; }
.rates { margin-top: 26px; }
.rates .ah { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.brow { display: grid; grid-template-columns: 170px 1fr 80px; align-items: center; gap: 16px; height: 46px; font-size: 20px; font-weight: 650; color: var(--ink-3); }
.brow .track { height: 22px; border-radius: 6px; background: var(--sub-2); position: relative; }
.brow .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 6px; background: var(--line-2); transition: width 0.9s cubic-bezier(0.3, 1.2, 0.4, 1), background-color 0.3s !important; }
.js .layer .brow .fill:not(.in) { width: 0; transform: none; opacity: 1; }
.brow.win .fill { background: var(--ink); }
.brow .val { font-family: var(--display); font-weight: 800; font-size: 22px; text-align: right; }
.wb { position: absolute; right: 10px; top: -5px; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap; }
.ofoot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.xbtn { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 21px; font-weight: 650; }
.l-opt .toast { left: 60px; top: 770px; }

/* Band (c): integrations */
.ints-band { padding: clamp(60px, 8.5vh, 88px) 0; border-top: 1px solid var(--line); overflow-x: clip; }
.ib-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.ib-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.ib-groups { display: grid; gap: 20px; }
.ib-k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.ib-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--indigo); flex: none; }
.ib-group.g .ib-k::before { background: var(--green); }
.ib-group.a .ib-k::before { background: var(--cyan); }
.ib-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ib-list li { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); font-size: 15px; font-weight: 650; white-space: nowrap; box-shadow: 0 10px 26px -18px rgb(var(--sh) / 0.3); }
[data-theme="dark"] .ib-list li { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
/* Brand logos keep their own colours; the black ones, and LiteLLM per its guidelines, turn white on the dark theme. */
.ib-logo, .ib-ic, .ib-blue { width: 18px; height: 18px; flex: none; }
[data-theme="dark"] .ib-logo.mono { filter: invert(1); }
[data-theme="dark"] .ib-logo.to-white { filter: brightness(0) invert(1); }
.ib-ic { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Enterprise */
.enterprise { border-top: 1px solid var(--line); }
.ent-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.ent-head .sub { margin-top: 0; padding-bottom: 10px; }
/* Bento: the environment tile spans two columns and rows; the rest carry a small product-like visual. */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.tile { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; min-height: 196px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; color: var(--ink); box-shadow: 0 1px 2px rgb(var(--sh) / 0.04), 0 18px 44px -18px rgb(var(--sh) / 0.16); }
[data-theme="dark"] .tile { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 50px -24px rgb(0 0 0 / 0.8); }
.tile > p b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; }
.tile > p span { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.tile.big { grid-column: span 2; grid-row: span 2; padding: 28px; }
.tile.big > p b { font-size: 24px; }
.tile.big > p span { font-size: 15.5px; }
/* The boundary: Invictus Red and its test targets both sit inside the customer's environment. */
.env { position: relative; flex: 1; display: grid; place-items: center; min-height: 200px; padding: 52px 28px 30px; border: 1.5px dashed var(--red-bd); border-radius: 18px; background: radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 0 / 18px 18px, rgb(220 0 0 / 0.03); }
.env-k { position: absolute; top: 18px; left: 22px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-tx); }
.env-flow { display: grid; grid-template-columns: auto minmax(56px, 190px) auto; justify-content: center; align-items: center; width: 100%; }
.core { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px; border: 1px solid var(--red-bd); border-radius: 16px; background: var(--card); font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; box-shadow: 0 10px 30px -14px rgb(220 0 0 / 0.45); animation: send 3.2s ease-in-out infinite; }
.core .mk { width: 20px; height: 21px; }
.wire { position: relative; height: 1.5px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); }
.wire i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgb(220 0 0 / 0.16); animation: wire 3.2s ease-in-out infinite; }
.env-out { display: grid; gap: 10px; }
.env-out li { padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 650; color: var(--ink-2); text-align: center; white-space: nowrap; animation: hit 3.2s ease-in-out infinite; }
.env-out li:nth-child(2) { animation-delay: 0.1s; }
.env-out li:nth-child(3) { animation-delay: 0.2s; }
/* One pass: Invictus Red sends, the test travels, the targets light up as it arrives, then a short rest. */
@keyframes send { 0%, 22%, 100% { box-shadow: 0 10px 30px -14px rgb(220 0 0 / 0.45); } 6% { box-shadow: 0 10px 30px -14px rgb(220 0 0 / 0.45), 0 0 0 6px rgb(220 0 0 / 0.12); } }
@keyframes wire { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 55% { left: calc(100% - 8px); opacity: 1; } 65%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes wire-v { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 55% { top: calc(100% - 8px); opacity: 1; } 65%, 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes hit { 0%, 52% { border-color: var(--line); color: var(--ink-2); box-shadow: none; } 62% { border-color: var(--red-bd); color: var(--ink); box-shadow: 0 0 0 4px rgb(220 0 0 / 0.1); } 80%, 100% { border-color: var(--line); color: var(--ink-2); box-shadow: none; } }
/* Small tiles: an icon pair, from a muted source to the red outcome. */
.glyph { display: flex; align-items: center; min-height: 48px; }
.gi { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 14px; background: var(--sub-1); color: var(--muted); }
.gi svg { width: 22px; height: 22px; }
.gi.on { border-color: var(--red-bd); background: rgb(220 0 0 / 0.06); color: var(--red-tx); box-shadow: 0 10px 26px -14px rgb(220 0 0 / 0.5); }
.gi.on .mk { color: var(--ink); }
.gl { flex: 0 1 64px; height: 1.5px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); }
.avs { display: flex; }
.avs .gi { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--card); }
.avs .gi + .gi { margin-left: -12px; }
.avs svg { width: 18px; height: 18px; }

/* End card */
.end { padding: clamp(88px, 12vh, 130px) 0 clamp(80px, 11vh, 120px); text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
[data-theme="dark"] .end { background: radial-gradient(700px 380px at 50% 40%, rgb(220 0 0 / 0.14), transparent 70%); }
.end-in { position: relative; }
.lockup { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); }
.mark-wrap { position: relative; width: clamp(64px, 9vw, 120px); flex: none; }
.mark { width: 100%; height: auto; }
.ripple { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--red); opacity: 0; pointer-events: none; }
.js .end-in .mark { transform: translateY(-140%); opacity: 0; }
.js .end-in.in .mark { animation: drop 0.6s cubic-bezier(0.55, 0, 0.6, 1.4) 0.15s both; }
@keyframes drop { 0% { transform: translateY(-140%); opacity: 0; } 60% { opacity: 1; } 75% { transform: translateY(4%); } 100% { transform: none; opacity: 1; } }
.js .end-in.in .ripple { animation: ripple 0.9s ease-out var(--ripple-delay, 0.55s); }
@keyframes ripple { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.wm.big { font-size: clamp(54px, 9vw, 132px); }
.tagline { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.035em; margin-top: clamp(24px, 3.4vw, 40px); }
.end .url { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.end .lede { margin-top: 18px; }

.foot { border-top: 1px solid var(--line); padding: 26px 0; font-size: 14px; color: var(--ink-2); }
.foot-in { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
/* margin-left keeps the credit on the right even when the row wraps. */
.foot-by { display: inline-flex; align-items: baseline; gap: 7px; margin-left: auto; }
.foot .foot-by:hover { text-decoration: none; }
/* The logo is a mask in the text color; its brand colors fade in on hover. top drops the descender below the baseline. */
.ax { position: relative; top: 4.6px; width: 81px; height: 18px; background: currentColor;
  -webkit-mask: url("assets/algoritmax.webp") center / contain no-repeat; mask: url("assets/algoritmax.webp") center / contain no-repeat; }
.ax::after { content: ""; position: absolute; inset: 0; background: url("assets/algoritmax.webp") center / contain no-repeat; opacity: 0; transition: opacity 0.2s ease; }
.foot-by:hover .ax::after, .foot-by:focus-visible .ax::after { opacity: 1; }

/* Film modal */
.film { margin: auto; padding: 0; border: 0; background: transparent; width: min(1200px, 100vw - 32px); max-width: none; overflow: visible; }
.film::backdrop { background: rgb(5 7 12 / 0.84); backdrop-filter: blur(6px); }
.film-in { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -20px rgb(0 0 0 / 0.6); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: #0b1220; display: grid; place-items: center; }

/* Responsive */
@media (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .hero-grid { gap: 36px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.big { grid-row: auto; }
}
@media (max-width: 959px) {
  .nav-links { display: none; }
  .theme-tg { margin-left: auto; }
  .hero { min-height: 0; padding: 100px 0 56px; }
  .hero-grid, .loop-grid, .ib-in { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { margin-top: 60px; }
  .chat { max-width: 560px; margin-inline: auto; transform: none; }
  .chat-cap { margin-inline: auto; }
  .ring { margin-top: 24px; }
  .ib-in { gap: 32px; }
  .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ch-pin { display: contents; }
  .ch-nav { position: sticky; top: 68px; z-index: 20; display: flex; gap: 6px; max-width: none; margin: 22px calc(50% - 50vw) 0; padding: 10px calc(50vw - 50%); overflow-x: auto; scrollbar-width: none; border: 0; border-bottom: 1px solid var(--line); background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
  .ch-nav::-webkit-scrollbar { display: none; }
  .ch-nav::before { content: attr(data-k); flex: none; align-self: center; margin-right: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-tx); }
  .ch-nav a { gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; }
  .ch-nav svg { width: 16px; height: 16px; }
  .ch-nav .on a { border-color: var(--red-bd); }
  .topic, .topic:first-child { min-height: 0; justify-content: flex-start; padding: 44px 0; scroll-margin-top: 128px; }
  .topic + .topic { border-top: 1px solid var(--line); }
  .apps-grid { grid-template-columns: minmax(0, 1fr); }
  .ent-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ent-head .sub { margin-top: 18px; padding-bottom: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .nav-in { width: calc(100% - 40px); }
  .nav-in { gap: 10px; }
  .brand .wm { font-size: 20px; }
  .theme-tg { width: 38px; height: 38px; }
  .btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .hero h1 { font-size: 40px; }
  .chain span { height: 34px; padding: 0 10px; font-size: 13px; }
  .chain li + li::before { margin: 0 6px; }
  .checks { gap: 8px 16px; }
  .checks li { font-size: 14px; }
  .chat { height: 556px; }
  .stamp { font-size: 24px; border-width: 4px; padding: 7px 14px 9px; left: 24%; top: 75%; }
  .hero-visual { margin-top: 112px; }
  .irun { top: -119px; right: -6px; width: 232px; padding: 11px 12px 12px; }
  .ir-steps { font-size: 9.5px; }
  .ir-steps li { gap: 4px; }
  .ir-steps li + li { margin-left: 3px; }
  .ir-steps li + li::before { width: 5px; }
  .ir-top { font-size: 10px; letter-spacing: 0.1em; gap: 6px; }
  .ir-pill { padding: 2px 7px; }
  .chat-body { padding: 14px 14px 0; gap: 10px; }
  .bubble { font-size: 13.5px; }
  .bubble.me { font-size: 12px; }
  .rows { font-size: 11px; }
  .rows div { grid-template-columns: 62px auto; gap: 8px; }
  .rows .x { display: none; }
  .composer { margin: 10px; }
  .ticker { height: 50px; }
  .tk-k { padding: 0 14px 0 20px; font-size: 11px; letter-spacing: 0.14em; }
  .tick-row li { font-size: 13px; margin-right: 26px; }
  .loop-list li { grid-template-columns: 30px 86px minmax(0, 1fr); gap: 8px; }
  .loop-list b { font-size: 17px; }
  .loop-list span:last-child { font-size: 14px; }
  .ring { --size: min(300px, 74vw); }
  .ring-nodes .h { font-size: 19px; }
  .ring-nodes .n { font-size: 11px; }
  .ring-nodes .right > span { left: 16px; }
  .ring-nodes .left > span { right: 16px; }
  .ring-mid .rm { font-size: 17px; }
  .tcard { padding: 14px 16px; gap: 14px; }
  .tcard .ic { width: 44px; height: 44px; }
  .tcard .h { font-size: 17px; }
  .tcard .d { font-size: 13px; }
  .tcard .ar { display: none; }
  .tp-vis { padding: 14px; border-radius: 18px; }
  .l-ui { width: 460px; }
  .l-find .urow { grid-template-columns: minmax(0, 1fr) 66px 162px; }
  .urow.uhd { letter-spacing: 0.08em; }
  .l-ui .uh { flex-wrap: wrap; row-gap: 10px; }
  .gdlg { right: 0; }
  .prow { grid-template-columns: 26px minmax(0, 1fr) 70px 124px; }
  .prow em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-tree .tn em { display: none; }
  .fw-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fw-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .fw-li { height: 28px; border: 1px solid var(--line); }
  .drw { top: 120px; }
  .l-find .urow > :nth-child(3) { display: none; }
  .wf-from { flex-wrap: wrap; row-gap: 8px; }
  .wf-from .pill + .uk { margin-left: 0; }
  .st-body { grid-template-columns: 156px minmax(0, 1fr); }
  .st-tabs span:last-child { display: none; }
  .tp-vis.tvis { padding: 16px 0; }
  .tp-vis.tvis .tpanel { padding: 0 14px; }
  .h3t { font-size: 27px; }
  .topic .tx { font-size: 15.5px; }
  .app { padding: 14px; }
  .app-h { font-size: 19px; }
  .av { height: auto; min-height: 196px; padding: 14px; }
  .ws-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ws-m { display: none; }
  .av-wiki { grid-template-columns: minmax(0, 1fr); }
  .wk-side { display: none; }
  .bc { justify-content: flex-end; }
  .bc-menu { right: auto; left: 14px; }
  .ld-k { gap: 6px; }
  .ld-k > div { padding: 8px 10px; }
  .ld-k b { font-size: 19px; }
  .ld-k span { white-space: normal; }
  .ld-k em { display: none; }
  .ib-list li { padding: 9px 13px; font-size: 14.5px; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .tile { min-height: 0; padding: 18px 16px; }
  .tile.big { grid-column: auto; padding: 20px 16px; }
  .tile > p b, .tile.big > p b { font-size: 17px; }
  .tile > p span, .tile.big > p span { font-size: 13.5px; }
  .env { min-height: 0; padding: 46px 14px 18px; }
  .env-k { top: 16px; left: 16px; }
  .env-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .core { height: 48px; padding: 0 18px; font-size: 15.5px; }
  .wire { width: 1.5px; height: 34px; margin: 6px 0; background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 9px); }
  .wire i { top: 0; left: 50%; margin: 0 0 0 -4px; animation-name: wire-v; }
  .env-out { justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .env-out li { padding: 7px 8px; font-size: 12.5px; }
  .ctas { gap: 10px; }
  .end .ctas { flex-direction: column; }
  .mark-wrap { width: 15vw; }
  .wm.big { font-size: 11.5vw; }
  .tagline { font-size: 8.8vw; }
  .ws-top { flex-wrap: wrap; row-gap: 6px; }
}
/* Narrow phones wrap the chat to more lines; give the leaked rows room above the composer.
   The target pills tighten so "Guardrails" still fits. */
@media (max-width: 380px) {
  .chat { height: 600px; }
  .env-out { gap: 6px; }
  .env-out li { padding: 7px 4px; font-size: 11.5px; }
  .nav-in { gap: 8px; }
  .btn-sm { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .orbit, .band-row, .tick-row, .chain span, .chain span::before, .chain li::before { animation: none !important; }
}