:root {
  color-scheme: light;
  --paper: #f4f4f0;
  --surface: #fff;
  --ink: #111318;
  --muted: #666b73;
  --faint: #969aa1;
  --line: #e1e2de;
  --line-strong: #d1d3ce;
  --blue: #2868e8;
  --blue-dark: #1f59c8;
  --blue-soft: #edf3ff;
  --green: #238459;
  --green-soft: #eaf6ef;
  --amber: #9a6727;
  --amber-soft: #fbf3e7;
  --shadow: 0 30px 80px rgba(24, 27, 33, .08), 0 2px 12px rgba(24, 27, 33, .04);
  --shell: min(1240px, calc(100vw - 48px));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Onest", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.section-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 12px 16px; border-radius: 10px; color: #fff; background: var(--ink); }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed; z-index: 50; top: 14px; left: 50%; width: var(--shell); height: 64px;
  padding: 0 12px 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border: 1px solid rgba(216, 218, 213, .8); border-radius: 18px;
  background: rgba(250, 250, 247, .82); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 30px rgba(28, 30, 36, .04); transform: translateX(-50%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 17px; font-weight: 680; letter-spacing: -.03em; }
.brand-mark { width: 28px; height: 28px; color: var(--ink); }
.main-nav { display: flex; gap: 30px; color: #555961; font-size: 14px; }
.main-nav a { transition: color 160ms ease; }
.main-nav a:hover { color: var(--ink); }
.site-header > .button { justify-self: end; }

.button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; cursor: pointer; font-weight: 650; letter-spacing: -.015em; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.button:hover { transform: translateY(-1px); }
.button-small { min-height: 40px; padding-inline: 17px; border-radius: 12px; font-size: 14px; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 28px rgba(40, 104, 232, .2); }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 14px 34px rgba(40, 104, 232, .25); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { background: #282b31; }
.button-quiet { color: #555961; background: transparent; border: 1px solid var(--line); }
.eyebrow { display: block; color: var(--blue); font-size: 11px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }

/* Living Project hero */
.assembly { position: relative; height: 235vh; min-height: 1600px; }
.hero-stage-anchor { position: absolute; top: 27.6%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.assembly-sticky { position: sticky; top: 0; height: 100vh; min-height: 720px; padding: 108px 0 34px; display: grid; grid-template-columns: .82fr 1.18fr; grid-template-rows: 1fr 58px; align-items: center; gap: 0 40px; }
.hero-copy { position: relative; z-index: 8; align-self: center; }
.hero-chapters { position: relative; height: 460px; margin-top: 18px; }
.hero-chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 500ms ease, transform 600ms cubic-bezier(.2,.8,.2,1); }
.hero-chapter.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-chapter h1, .hero-chapter h2 { max-width: 590px; margin: 0; font-size: clamp(54px, 4.7vw, 74px); line-height: .94; letter-spacing: -.068em; font-weight: 640; }
.hero-chapter p { max-width: 520px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; letter-spacing: -.018em; }
.hero-cta { margin-top: 18px; }

.living-project { position: relative; height: min(68vh, 680px); min-height: 580px; overflow: hidden; border: 1px solid rgba(211, 213, 208, .92); border-radius: 34px; background: rgba(251, 251, 248, .86); box-shadow: var(--shadow); perspective: 1200px; }
.living-project::before { content: ""; position: absolute; z-index: 0; inset: 18% 13%; border-radius: 50%; background: radial-gradient(circle, rgba(40,104,232,.09), transparent 68%); filter: blur(12px); }
.scene-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(19,22,27,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(19,22,27,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000 28%, transparent 75%); }
.scene-card { position: absolute; border: 1px solid var(--line-strong); background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(27,31,39,.08); }
.prompt-surface { z-index: 8; left: 16%; top: 31%; width: 68%; padding: 20px; border-radius: 20px; transition: all 700ms cubic-bezier(.2,.8,.2,1); }
.scene-card-top { display: flex; align-items: center; gap: 10px; color: #72767e; font-size: 11px; }
.scene-card-top i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.scene-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--ink); font-size: 9px; font-weight: 750; }
.prompt-surface > p { min-height: 98px; margin: 20px 0 34px; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.42; letter-spacing: -.03em; font-weight: 560; }
.prompt-footer { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 10px; }
.prompt-footer span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }
.prompt-footer b { font-weight: 500; }
.prompt-submit { padding: 6px 11px 6px 6px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; color: #fff; background: var(--blue); box-shadow: 0 8px 20px rgba(40,104,232,.18); cursor: pointer; font: inherit; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.prompt-submit > span { color: #fff; background: rgba(255,255,255,.16); }
.prompt-submit > span svg { width: 13px; height: 13px; overflow: visible; }.prompt-submit > span svg path { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.prompt-submit:hover { background: var(--blue-dark); transform: translateY(-1px); }
.prompt-submit:focus-visible { outline: 2px solid rgba(40,104,232,.35); outline-offset: 5px; border-radius: 7px; }
.prompt-submit.sent { color: var(--green); background: var(--green-soft); box-shadow: none; }
.prompt-submit.sent > span { color: var(--green); background: rgba(35,132,89,.1); }
.prompt-surface:not(.typed) .prompt-submit { visibility: hidden; opacity: 0; transform: translateY(7px); pointer-events: none; }
.prompt-surface.typed .prompt-submit { visibility: visible; animation: submit-reveal 420ms cubic-bezier(.2,.8,.2,1) both; }
.demo-cursor { position: absolute; z-index: 20; left: 76%; bottom: 23px; width: 21px; height: 23px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(17,20,26,.3)); }
.demo-cursor svg { width: 100%; height: 100%; overflow: visible; }
.demo-cursor path { fill: #111318; stroke: #fff; stroke-width: 1.65; stroke-linejoin: round; }
.demo-cursor i { position: absolute; left: -5px; top: -5px; width: 15px; height: 15px; border: 1px solid rgba(40,104,232,.4); border-radius: 50%; opacity: 0; }
.prompt-surface.auto-clicking .demo-cursor { animation: cursor-approach 1750ms cubic-bezier(.2,.72,.18,1) both; }
.prompt-surface.auto-clicking .demo-cursor i { animation: cursor-ripple 300ms 1420ms ease-out both; }
.prompt-surface.auto-clicking .prompt-submit { animation: submit-auto-press 1750ms ease both; }
.typing-caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; border-radius: 2px; vertical-align: -.06em; background: var(--blue); animation: caret-blink 850ms steps(1) infinite; }
.prompt-surface.typed .typing-caret { animation-duration: 1.4s; opacity: .35; }

.project-receiver { z-index: 3; left: 4%; top: 6%; bottom: 18%; width: 43%; padding: 24px; border-radius: 24px; opacity: 0; transform: translateX(-18px); transition: opacity 550ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.project-receiver > * { display: block; }
.project-receiver > span { color: var(--blue); font-size: 8px; font-weight: 760; letter-spacing: .12em; }
.project-receiver > b { margin-top: 9px; font-size: 14px; letter-spacing: -.02em; }
.project-receiver > small { position: absolute; left: 24px; right: 24px; bottom: 21px; color: var(--faint); font-size: 8px; line-height: 1.45; }
.project-core { z-index: 7; left: 8%; top: 17%; width: 35%; padding: 17px 18px; border-radius: 18px; text-align: left; opacity: 0; transform: translateX(-18px) scale(.96); transition: all 650ms cubic-bezier(.2,.8,.2,1); }
.project-core > * { display: block; }
.core-mark { width: 32px; height: 32px; margin: 0 0 13px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 750; }
.project-core small { color: var(--blue); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.project-core strong { margin-top: 7px; font-size: 15px; letter-spacing: -.025em; }
.project-core em { margin-top: 7px; color: var(--faint); font-size: 9px; font-style: normal; opacity: 0; transform: translateY(3px); }
.project-core em i { margin-right: 3px; color: var(--green); font-style: normal; }
.system-activity { z-index: 9; left: 8%; top: 65%; width: 35%; padding: 13px 14px; display: flex; align-items: center; gap: 10px; border-radius: 15px; opacity: 0; transform: translateY(10px); pointer-events: none; }
.system-activity .scene-avatar { flex: 0 0 auto; background: var(--blue); }
.system-activity small, .system-activity b { display: block; }
.system-activity small { color: var(--blue); font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.system-activity b { margin-top: 5px; font-size: 10px; }
.activity-dots::after { content: ""; display: inline-block; width: 12px; text-align: left; animation: activity-dots 800ms steps(4,end) infinite; }
.module { position: absolute; z-index: 6; right: 4%; width: 42%; min-height: 54px; padding: 10px 14px 10px 48px; overflow: visible; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(25,28,34,.06); opacity: 0; transform: translateX(18px); }
.module > * { display: block; }
.module span { position: absolute; left: 14px; top: 50%; color: var(--faint); font-size: 8px; transform: translateY(-50%); }
.module b { font-size: 11px; }
.module small { margin-top: 3px; color: var(--faint); font-size: 7px; }
.module-check { position: absolute; top: 50%; right: 13px; width: 21px; height: 21px; display: grid !important; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 5px 14px rgba(35,132,89,.22); font-size: 9px; font-style: normal; opacity: 0; transform: translateY(-50%) scale(.4); }
.module-web { top: 5%; }.module-api { top: 17%; }.module-data { top: 29%; }.module-auth { top: 41%; }.module-ai { top: 53%; }.module-flow { top: 65%; }
.scene-connections { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.scene-connections > .connection-line { fill: none; stroke: #78a2e4; stroke-width: 1.65; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene-connections > .connection-arrow { fill: #78a2e4; stroke: none; opacity: 0; }

.project-ready { z-index: 12; left: 4%; right: 4%; bottom: 3.5%; min-height: 66px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 17px; opacity: 0; transform: translateY(16px); pointer-events: none; }
.project-ready > div { display: grid; grid-template-columns: 15px auto; align-items: center; gap: 2px 9px; }
.project-ready .build-dot { grid-row: 1 / 3; }
.project-ready b, .project-ready small { display: block; }
.project-ready b { font-size: 11px; }
.project-ready small { color: var(--faint); font-size: 8px; }
.project-ready button { padding: 10px 13px; border: 0; border-radius: 10px; color: #fff; background: var(--ink); cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.project-ready button span { margin-left: 9px; }
.ready-cursor { position: absolute; z-index: 22; right: 16px; bottom: -14px; width: 21px; height: 23px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(17,20,26,.3)); }
.ready-cursor svg { width: 100%; height: 100%; overflow: visible; }
.ready-cursor path { fill: #111318; stroke: #fff; stroke-width: 1.65; stroke-linejoin: round; }
.ready-cursor i { position: absolute; left: -5px; top: -5px; width: 15px; height: 15px; border: 1px solid rgba(40,104,232,.4); border-radius: 50%; opacity: 0; }
.project-ready.auto-clicking-ready .ready-cursor { animation: ready-cursor-approach 1900ms cubic-bezier(.2,.72,.18,1) both; }
.project-ready.auto-clicking-ready .ready-cursor i { animation: cursor-ripple 300ms 1540ms ease-out both; }
.project-ready.auto-clicking-ready button { animation: ready-button-press 1900ms ease both; }

.live-window { z-index: 9; inset: 5% 5% 23%; overflow: hidden; border-radius: 22px; opacity: 0; transform: translateY(30px) scale(.9) rotateX(5deg); transition: all 750ms cubic-bezier(.2,.8,.2,1); }
.live-bar { height: 42px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); color: #8a8e95; background: #fbfbf9; font-size: 8px; }
.live-dots { color: #c9cbc7; letter-spacing: 3px; }.live-bar b { justify-self: end; color: var(--green); font-size: 8px; }
.live-content { position: relative; height: calc(100% - 42px); overflow: hidden; background: #f8f8f4; }
.live-page { min-height: 590px; opacity: .18; transform: translateY(0); }
.live-loader { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(248,248,244,.97); }
.loader-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 750; box-shadow: 0 8px 24px rgba(18,20,25,.12); }
.live-loader b { margin-top: 13px; font-size: 12px; }
.live-loader small { margin-top: 5px; color: var(--faint); font-size: 8px; }
.live-loader > div { width: 150px; height: 3px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: #e5e7e3; }
.live-loader > div i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transform: translateX(-100%); }
.live-nav { height: 52px; padding: 0 26px; display: flex; align-items: center; gap: 25px; border-bottom: 1px solid #e8e8e3; font-size: 9px; }
.live-nav strong { margin-right: auto; font-size: 12px; }.live-nav span { color: #858990; }.live-nav span.active { color: var(--ink); font-weight: 650; }.live-nav i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.live-hero { padding: 26px 42px 8px; }
.live-hero small { color: var(--blue); font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.live-hero h3 { margin: 8px 0 8px; font-size: clamp(34px, 3.3vw, 48px); line-height: .94; letter-spacing: -.06em; }
.live-hero p { margin: 0; color: #787c84; font-size: 10px; }.live-hero button { margin-top: 14px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: var(--ink); font-size: 8px; }
.live-dashboard { margin: 18px 28px 0; display: grid; grid-template-columns: 1.25fr .9fr; gap: 10px; }
.live-request { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.82); }
.live-request-head { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 7px; }.live-request-head b { color: var(--green); font-weight: 650; }
.live-request article { margin-top: 8px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; }.live-request article > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 7px; font-style: normal; font-weight: 750; }.live-request strong, .live-request small { display: block; }.live-request strong { font-size: 8px; }.live-request small { margin-top: 3px; color: var(--faint); font-size: 6px; }.live-request em { padding: 5px 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 6px; font-style: normal; }
.live-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.live-metrics div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.8); }
.live-metrics b, .live-metrics span { display: block; }.live-metrics b { font-size: 16px; }.live-metrics span { margin-top: 3px; color: var(--faint); font-size: 7px; }
.live-list { margin: 18px 28px 30px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.82); }
.live-list header { display: flex; align-items: end; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #e9eae6; }
.live-list header small { color: var(--blue); font-size: 6px; font-weight: 750; letter-spacing: .1em; }.live-list h4 { margin: 3px 0 0; font-size: 13px; letter-spacing: -.025em; }.live-list header button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: #686c73; background: #fff; font-size: 6px; }
.live-list article { min-height: 43px; display: grid; grid-template-columns: 25px 1fr auto 34px; align-items: center; gap: 9px; border-bottom: 1px solid #edeee9; }.live-list article:last-child { border-bottom: 0; }.request-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-size: 6px; font-weight: 750; }.request-avatar.blue { color: var(--blue); background: var(--blue-soft); }.request-avatar.violet { color: #7555b7; background: #f0ebfb; }.request-avatar.green { color: var(--green); background: var(--green-soft); }.live-list article b, .live-list article small { display: block; }.live-list article b { font-size: 7px; }.live-list article small { margin-top: 2px; color: var(--faint); font-size: 6px; }.live-list article em { padding: 5px 7px; border-radius: 7px; font-size: 6px; font-style: normal; }.status-work { color: var(--blue); background: var(--blue-soft); }.status-new { color: #9b6917; background: #fff5d8; }.status-done { color: var(--green); background: var(--green-soft); }.live-list article > strong { color: var(--faint); font-size: 6px; font-weight: 500; text-align: right; }
.live-cursor { position: absolute; z-index: 30; left: 70%; top: 45%; width: 21px; height: 23px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(17,20,26,.3)); }
.live-cursor svg { width: 100%; height: 100%; overflow: visible; }.live-cursor path { fill: #111318; stroke: #fff; stroke-width: 1.65; stroke-linejoin: round; }.live-cursor i { position: absolute; left: -5px; top: -5px; width: 15px; height: 15px; border: 1px solid rgba(40,104,232,.4); border-radius: 50%; opacity: 0; }
.publish-card { z-index: 11; left: 12%; right: 12%; bottom: 4.5%; height: 82px; padding: 11px 17px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 16px; border-radius: 18px; opacity: 0; transform: translateY(20px); transition: all 650ms 180ms cubic-bezier(.2,.8,.2,1); }
.publish-card > div:first-child { grid-row: 1 / 3; display: grid; grid-template-columns: 16px auto; align-items: center; gap: 2px 8px; }.publish-card b, .publish-card small { display: block; }.publish-card b { font-size: 11px; }.publish-card small { grid-column: 2; color: var(--faint); font-size: 8px; }.build-dot { grid-row: 1/3; width: 13px; height: 13px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.publish-line { grid-row: 1 / 3; height: 1px; background: var(--line); }.publish-card button { grid-column: 3; grid-row: 1; align-self: end; padding: 9px 13px; border: 0; border-radius: 10px; color: #fff; background: var(--blue); cursor: pointer; font-size: 9px; font-weight: 700; }.publish-card p { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; margin: 4px 0 0; color: var(--faint); font-size: 8px; }

.living-project[data-stage="1"] .project-receiver { opacity: 1; transform: translateX(0); }
.living-project[data-stage="1"] .prompt-surface { left: 8%; top: 43%; width: 35%; padding: 13px 14px; opacity: 1; transform: scale(1); }
.living-project[data-stage="1"] .prompt-surface > p { min-height: 0; margin: 10px 0 5px; font-size: 10px; line-height: 1.38; }.living-project[data-stage="1"] .prompt-footer, .living-project[data-stage="1"] .typing-caret { display: none; }
.living-project[data-stage="1"] .project-core { opacity: 1; transform: translateX(0) scale(1); }
.living-project[data-stage="1"] .scene-connections { opacity: 1; }
.living-project[data-stage="1"] .system-activity { animation: activity-cycle 2700ms 1000ms ease both; }
.living-project[data-stage="1"] .scene-connections > .connection-line { animation: trace-link 650ms cubic-bezier(.25,.75,.2,1) 2930ms forwards; }
.living-project[data-stage="1"] .scene-connections > .connection-line:nth-of-type(2) { animation-delay: 3480ms; }.living-project[data-stage="1"] .scene-connections > .connection-line:nth-of-type(3) { animation-delay: 4030ms; }.living-project[data-stage="1"] .scene-connections > .connection-line:nth-of-type(4) { animation-delay: 4580ms; }.living-project[data-stage="1"] .scene-connections > .connection-line:nth-of-type(5) { animation-delay: 5130ms; }.living-project[data-stage="1"] .scene-connections > .connection-line:nth-of-type(6) { animation-delay: 5680ms; }
.living-project[data-stage="1"] .scene-connections > .connection-arrow { animation: connection-arrow-in 180ms ease forwards; }.living-project[data-stage="1"] .scene-connections > .arrow-1 { animation-delay: 3510ms; }.living-project[data-stage="1"] .scene-connections > .arrow-2 { animation-delay: 4060ms; }.living-project[data-stage="1"] .scene-connections > .arrow-3 { animation-delay: 4610ms; }.living-project[data-stage="1"] .scene-connections > .arrow-4 { animation-delay: 5160ms; }.living-project[data-stage="1"] .scene-connections > .arrow-5 { animation-delay: 5710ms; }.living-project[data-stage="1"] .scene-connections > .arrow-6 { animation-delay: 6260ms; }
.living-project[data-stage="1"] .module { animation: module-arrive 480ms cubic-bezier(.2,.8,.2,1) forwards; }.living-project[data-stage="1"] .module-web { animation-delay: 3280ms; }.living-project[data-stage="1"] .module-api { animation-delay: 3830ms; }.living-project[data-stage="1"] .module-data { animation-delay: 4380ms; }.living-project[data-stage="1"] .module-auth { animation-delay: 4930ms; }.living-project[data-stage="1"] .module-ai { animation-delay: 5480ms; }.living-project[data-stage="1"] .module-flow { animation-delay: 6030ms; }
.living-project[data-stage="1"] .module-check { animation: check-in-row 420ms cubic-bezier(.2,1.5,.4,1) forwards; }.living-project[data-stage="1"] .module-web .module-check { animation-delay: 3580ms; }.living-project[data-stage="1"] .module-api .module-check { animation-delay: 4130ms; }.living-project[data-stage="1"] .module-data .module-check { animation-delay: 4680ms; }.living-project[data-stage="1"] .module-auth .module-check { animation-delay: 5230ms; }.living-project[data-stage="1"] .module-ai .module-check { animation-delay: 5780ms; }.living-project[data-stage="1"] .module-flow .module-check { animation-delay: 6330ms; }
.living-project[data-stage="1"] .project-core em { animation: status-in 480ms 6580ms ease forwards; }
.living-project[data-stage="1"] .project-ready { animation: ready-in 560ms 6830ms cubic-bezier(.2,.8,.2,1) forwards; pointer-events: auto; }
.living-project[data-stage="2"] .project-receiver, .living-project[data-stage="2"] .system-activity, .living-project[data-stage="2"] .project-ready, .living-project[data-stage="2"] .prompt-surface, .living-project[data-stage="2"] .project-core, .living-project[data-stage="2"] .module, .living-project[data-stage="2"] .scene-connections { opacity: 0; transform: scale(.88); pointer-events: none; }
.living-project[data-stage="2"] .live-window, .living-project[data-stage="2"] .publish-card { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
.living-project[data-stage="2"] .live-loader { animation: preview-loader-out 520ms 1800ms ease forwards; }
.living-project[data-stage="2"] .live-loader > div i { animation: preview-load-bar 1350ms 300ms cubic-bezier(.2,.8,.2,1) forwards; }
.living-project[data-stage="2"] .live-page { animation: preview-ready 600ms 1650ms ease forwards, preview-scroll 4400ms 3000ms cubic-bezier(.55,.08,.25,1) forwards; }
.living-project[data-stage="2"] .live-cursor { animation: live-cursor-tour 8200ms 2100ms cubic-bezier(.22,.7,.2,1) both; }
.living-project[data-stage="2"] .live-cursor i { animation: cursor-ripple 320ms 9400ms ease-out both; }
.living-project.publishing .publish-card button { color: #fff; background: #4f78cf; }.living-project.publishing .publish-card .build-dot { animation: publish-pulse 700ms ease infinite alternate; }.living-project.publishing .publish-card p { color: var(--blue); }
.living-project.published .publish-card button { color: var(--green); background: var(--green-soft); }.living-project.published .publish-card p, .living-project.published .live-bar b { color: var(--green); }

.chapter-nav { grid-column: 2; align-self: end; justify-self: center; padding: 5px; display: flex; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(25,28,34,.05); }
.chapter-nav button { padding: 10px 16px; border: 0; border-radius: 10px; color: #7f838a; background: transparent; cursor: pointer; font-size: 10px; }
.chapter-nav button span { margin-right: 5px; color: #a0a4aa; }.chapter-nav button.active { color: #fff; background: var(--ink); }.chapter-nav button.active span { color: #fff; }
.scroll-hint { align-self: end; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.scroll-hint span { width: 18px; height: 30px; border: 1px solid var(--line-strong); border-radius: 99px; }.scroll-hint span::after { content: ""; display: block; width: 3px; height: 6px; margin: 5px auto; border-radius: 99px; background: var(--faint); animation: scroll-dot 1.8s infinite; }

/* Shared sections */
.manifesto { padding: 150px 0; }
.manifesto h2, .section-heading h2, .section-copy h2, .final-cta h2 { margin: 18px 0 0; font-size: clamp(48px, 5.4vw, 78px); line-height: 1; letter-spacing: -.064em; font-weight: 630; }
.manifesto-grid { margin-top: 68px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--line); }
.manifesto-grid article { min-height: 270px; padding: 34px; background: rgba(255,255,255,.72); }.manifesto-grid article > span { color: var(--faint); font-size: 10px; }.manifesto-grid h3 { margin: 86px 0 12px; font-size: 28px; letter-spacing: -.045em; }.manifesto-grid p { max-width: 290px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 90px; }.section-heading > p, .section-copy > p { margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.65; letter-spacing: -.015em; }

/* Build journal */
.journal-section { padding: 150px 0; background: #ecece7; }
.journal-shell { margin-top: 68px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); }
.journal-topbar { height: 74px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.journal-project { display: flex; align-items: center; gap: 12px; }.journal-project > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 750; }.journal-project b, .journal-project small { display: block; }.journal-project b { font-size: 13px; }.journal-project small { margin-top: 4px; color: var(--faint); font-size: 9px; }
.journal-controls { display: flex; gap: 7px; }.journal-controls button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: #70747b; background: #fafaf8; cursor: pointer; font-size: 9px; }
.journal-progress { height: 78px; padding: 0 24px; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.journal-progress::-webkit-scrollbar { display: none; }
.journal-progress button { position: relative; padding: 0 8px; display: grid; grid-template-columns: 23px 1fr; align-content: center; text-align: left; border: 0; color: #8b8f96; background: transparent; cursor: pointer; }.journal-progress button span { font-size: 9px; }.journal-progress button b { font-size: 11px; }.journal-progress button i { position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: transparent; }.journal-progress button.active { color: var(--ink); }.journal-progress button.complete { color: var(--green); }.journal-progress button.active i { background: var(--blue); }.journal-progress button.complete i { background: var(--green); }
.journal-body { min-height: 560px; display: grid; grid-template-columns: .37fr .63fr; }
.journal-story { padding: 54px 46px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fafaf8; }
.journal-index { color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .12em; }.journal-story h3 { margin: 28px 0 18px; font-size: clamp(35px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.055em; }.journal-story > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }.journal-fact { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }.journal-fact span, .journal-fact b { display: block; }.journal-fact span { color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.journal-fact b { margin-top: 8px; font-size: 12px; line-height: 1.45; }
.journal-stage { position: relative; overflow: hidden; min-height: 560px; background: #f4f5f2; }.journal-panel { position: absolute; inset: 0; padding: 42px; display: none; }.journal-panel.active { display: block; animation: panel-in 400ms cubic-bezier(.2,.8,.2,1) both; }
.conversation-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }.conversation-role { color: var(--faint); font-size: 9px; }.conversation-card p { min-height: 52px; max-width: 570px; margin: 10px 0 0; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }.journal-caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; border-radius: 2px; vertical-align: -.06em; background: var(--blue); animation: caret-blink 850ms steps(1) infinite; }.journal-panel.typing-done .journal-caret { animation: none; opacity: 0; }
.agent-clarifies { margin-top: 24px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; opacity: 0; transform: translateY(9px); }.agent-orb, .plan-head span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cad8f7; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 750; }.agent-clarifies > div:last-child > b { display: block; margin: 7px 0 15px; font-size: 13px; }.clarify-dots::after { content: ""; display: inline-block; width: 13px; height: 4px; margin-left: 6px; vertical-align: middle; background: radial-gradient(circle, var(--blue) 1.3px, transparent 1.7px) 0 50% / 6px 4px repeat-x; animation: dots-shift 800ms linear infinite; }.agent-clarifies button { width: 100%; padding: 13px 15px; display: flex; justify-content: space-between; border: 1px solid var(--line); border-bottom: 0; color: #555961; background: #fff; font-size: 11px; opacity: 0; transform: translateY(7px); }.agent-clarifies button:nth-of-type(1) { border-radius: 13px 13px 0 0; }.agent-clarifies button:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 13px 13px; }.agent-clarifies button span { color: var(--ink); font-weight: 650; opacity: 0; transform: translateX(6px); }.journal-panel.dialog-ready .agent-clarifies { animation: agent-clarify-in 420ms ease forwards; }.journal-panel.dialog-ready .agent-clarifies button { animation: clarify-row-in 420ms cubic-bezier(.2,.8,.2,1) forwards; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(1) { animation-delay: 480ms; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(2) { animation-delay: 1160ms; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(3) { animation-delay: 1840ms; }.journal-panel.dialog-ready .agent-clarifies button span { animation: clarify-answer-in 300ms ease forwards; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(1) span { animation-delay: 820ms; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(2) span { animation-delay: 1500ms; }.journal-panel.dialog-ready .agent-clarifies button:nth-of-type(3) span { animation-delay: 2180ms; }
.plan-head { display: flex; justify-content: space-between; align-items: center; }.plan-head > div { display: flex; align-items: center; gap: 11px; }.plan-head b { font-size: 13px; }.plan-head em { padding: 7px 10px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 9px; font-style: normal; }
.plan-progress { height: 29px; margin-top: 14px; padding: 0 11px; display: flex; align-items: center; gap: 9px; overflow: hidden; border: 1px solid #dce5f7; border-radius: 10px; color: #6d7480; background: #f8faff; font-size: 8px; opacity: 0; transform: translateY(5px); }.plan-progress i { width: 12px; height: 12px; border: 2px solid #a9c2f1; border-top-color: var(--blue); border-radius: 50%; }.journal-panel.plan-building .plan-progress { animation: plan-progress-in 350ms ease forwards; }.journal-panel.plan-complete .plan-progress i { border-color: var(--green); background: var(--green-soft); }.journal-panel.plan-complete .plan-progress i::after { content: "✓"; display: grid; place-items: center; color: var(--green); font-size: 7px; font-style: normal; transform: translateY(-1px); }
.component-plan { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.component-plan article { position: relative; min-height: 100px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; opacity: 0; transform: translateY(10px) scale(.98); }.component-plan span, .component-plan b, .component-plan small { display: block; }.component-plan span { color: var(--faint); font-size: 8px; }.component-plan b { margin-top: 14px; font-size: 13px; }.component-plan small { margin-top: 5px; color: var(--faint); font-size: 9px; }.component-plan article > i { position: absolute; top: 11px; right: 11px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 4px 12px rgba(35,132,89,.18); font-size: 7px; font-style: normal; opacity: 0; transform: scale(.45); }.journal-panel.plan-building .component-plan article { animation: plan-card-in 430ms cubic-bezier(.2,.8,.2,1) forwards; }.journal-panel.plan-building .component-plan article:nth-child(1) { animation-delay: 400ms; }.journal-panel.plan-building .component-plan article:nth-child(2) { animation-delay: 850ms; }.journal-panel.plan-building .component-plan article:nth-child(3) { animation-delay: 1300ms; }.journal-panel.plan-building .component-plan article:nth-child(4) { animation-delay: 1750ms; }.journal-panel.plan-building .component-plan article:nth-child(5) { animation-delay: 2200ms; }.journal-panel.plan-building .component-plan article:nth-child(6) { animation-delay: 2650ms; }.journal-panel.plan-building .component-plan article > i { animation: plan-check-in 320ms cubic-bezier(.2,1.5,.4,1) forwards; }.journal-panel.plan-building .component-plan article:nth-child(1) > i { animation-delay: 680ms; }.journal-panel.plan-building .component-plan article:nth-child(2) > i { animation-delay: 1130ms; }.journal-panel.plan-building .component-plan article:nth-child(3) > i { animation-delay: 1580ms; }.journal-panel.plan-building .component-plan article:nth-child(4) > i { animation-delay: 2030ms; }.journal-panel.plan-building .component-plan article:nth-child(5) > i { animation-delay: 2480ms; }.journal-panel.plan-building .component-plan article:nth-child(6) > i { animation-delay: 2930ms; }.model-note { margin-top: 11px; padding: 14px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #d8e2f7; border-radius: 13px; background: #f7f9ff; opacity: 0; transform: translateY(8px); }.journal-panel.plan-building .model-note { animation: model-note-in 450ms 3250ms ease forwards; }.model-note span, .model-note small { color: #7b8290; font-size: 9px; }.model-note b { grid-row: 1/3; grid-column: 2; font-size: 12px; }.model-note small { margin-top: 3px; }
.build-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.build-list > div { min-height: 82px; padding: 0 17px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }.build-list > div:last-child { border-bottom: 0; }.build-list i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #d6d8d4; border-radius: 50%; color: #fff; font-size: 9px; font-style: normal; }.build-list b, .build-list small { display: block; }.build-list b { font-size: 12px; }.build-list small { margin-top: 5px; color: var(--faint); font-size: 9px; }.build-list > div > span { padding: 6px 9px; border-radius: 8px; color: #747880; background: #f2f3f0; font-size: 8px; }.build-list .done i { border-color: var(--green); background: var(--green); }.build-list .running { background: #fafcff; }.build-list .running i { border-color: var(--blue); border-top-color: transparent; animation: spin 900ms linear infinite; }.build-list .running > span { color: var(--blue); background: var(--blue-soft); }
.review-preview { height: 100%; display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }.mini-browser, .review-gate { border: 1px solid var(--line); border-radius: 16px; background: #fff; }.mini-browser { overflow: hidden; }.mini-browser > div { height: 44px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 8px; }.mini-browser > div b { color: var(--green); }.mini-browser main { padding: 70px 24px; }.mini-browser main small { color: var(--blue); font-size: 8px; letter-spacing: .1em; }.mini-browser h4 { margin: 12px 0 10px; font-size: 33px; line-height: 1; letter-spacing: -.055em; }.mini-browser p { color: var(--muted); font-size: 10px; }
.review-gate { padding: 23px; align-self: center; box-shadow: 0 18px 40px rgba(24,27,34,.06); }.review-gate > span { color: var(--amber); font-size: 8px; font-weight: 750; }.review-gate h4 { margin: 10px 0 20px; font-size: 21px; letter-spacing: -.04em; }.review-gate ul { margin: 0; padding: 0; list-style: none; }.review-gate li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.review-gate li::before { content: "✓"; margin-right: 8px; color: var(--green); }.review-gate p { color: var(--faint); font-size: 9px; }.review-gate button { width: 100%; padding: 11px; border: 0; border-radius: 10px; color: #fff; background: var(--ink); cursor: pointer; font-size: 10px; font-weight: 650; }
.live-result { height: 100%; padding: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.live-check { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 8px var(--green-soft); }.live-result > span { margin-top: 25px; color: var(--blue); font-size: 8px; font-weight: 750; letter-spacing: .12em; }.live-result h4 { margin: 10px 0 8px; font-size: 34px; letter-spacing: -.055em; }.live-result > p { margin: 0; color: var(--muted); font-size: 11px; }.release-steps { width: 100%; margin: 38px 0 28px; display: flex; align-items: center; color: #777b82; font-size: 8px; }.release-steps b { white-space: nowrap; }.release-steps b:not(:last-child) { color: var(--green); }.release-steps i { font-style: normal; }.release-steps span { width: 100%; height: 1px; margin: 0 8px; background: var(--line); }.live-result button { padding: 12px 17px; border: 0; border-radius: 11px; color: #fff; background: var(--blue); cursor: pointer; font-size: 10px; font-weight: 650; }.live-result > small { margin-top: 10px; color: var(--faint); font-size: 8px; }.live-result.published button { color: var(--green); background: var(--green-soft); }.live-result.published > small, .live-result.published #journalLiveState { color: var(--green); }

/* Product capability explorer */
.capability-section { padding: 150px 0; background: #ecece7; }
.capability-shell { margin-top: 68px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 30px; background: #f8f8f5; box-shadow: var(--shadow); }
.capability-topbar { height: 74px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); }
.capability-project { display: flex; align-items: center; gap: 12px; }.capability-project > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 750; }.capability-project b, .capability-project small { display: block; }.capability-project b { font-size: 13px; }.capability-project small { margin-top: 4px; color: var(--faint); font-size: 9px; }.capability-state { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 9px; font-weight: 650; }.capability-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.capability-layout { min-height: 620px; display: grid; grid-template-columns: 30% 70%; }.capability-tabs { padding: 22px; display: grid; align-content: center; gap: 8px; border-right: 1px solid var(--line); background: #fafaf8; }
.capability-tabs button { position: relative; min-height: 104px; padding: 20px 18px; display: grid; grid-template-columns: 30px 1fr; align-items: center; overflow: hidden; text-align: left; border: 1px solid transparent; border-radius: 16px; color: #7a7e85; background: transparent; cursor: pointer; transition: 260ms ease; }.capability-tabs button > span { align-self: start; margin-top: 3px; color: #a2a6ad; font-size: 9px; }.capability-tabs button b, .capability-tabs button small { display: block; }.capability-tabs button b { color: var(--ink); font-size: 14px; }.capability-tabs button small { margin-top: 7px; color: #8a8e95; font-size: 9px; }.capability-tabs button > i { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--blue); }.capability-tabs button.active { border-color: #d6d8d4; background: #fff; box-shadow: 0 12px 28px rgba(24,27,34,.05); transform: translateX(3px); }.capability-tabs button.active > span { color: var(--blue); }.capability-tabs button.active > i { animation: capability-progress 5600ms linear forwards; }.capability-shell.user-controlled .capability-tabs button.active > i { width: 100%; animation: none; }
.capability-stage { position: relative; overflow: hidden; min-height: 620px; background-color: #f4f5f2; background-image: radial-gradient(#d8dad6 .7px, transparent .7px); background-size: 22px 22px; }.capability-panel { position: absolute; inset: 0; padding: 44px; display: none; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 38px; }.capability-panel.active { display: grid; animation: capability-panel-in 520ms cubic-bezier(.2,.8,.2,1) both; }
.capability-copy > span { color: var(--blue); font-size: 9px; font-weight: 750; letter-spacing: .12em; }.capability-copy h3 { margin: 18px 0 16px; font-size: clamp(34px, 3.4vw, 49px); line-height: .98; letter-spacing: -.055em; }.capability-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }.capability-copy ul { margin: 30px 0 0; padding: 0; list-style: none; }.capability-copy li { padding: 10px 0; border-bottom: 1px solid #dde0db; color: #555961; font-size: 10px; }.capability-copy li::before { content: "✓"; margin-right: 9px; color: var(--green); font-weight: 750; }
.capability-copy .product-result-title { font-size: clamp(34px, 3.05vw, 46px); }.product-result-title > span { display: block; white-space: nowrap; }
.product-visual, .platform-visual, .intelligence-visual, .operations-visual, .internal-visual, .assistant-visual, .analytics-visual { position: relative; min-width: 0; }.product-browser { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: #fff; box-shadow: 0 24px 55px rgba(25,28,34,.09); transform: rotate(.5deg); }.product-browser header { height: 38px; padding: 0 13px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 7px; }.product-browser header i { width: 30px; height: 6px; background: radial-gradient(circle, #c7cac6 2px, transparent 2.5px) 0 50% / 10px 6px repeat-x; }.product-browser header b { justify-self: end; color: var(--green); font-size: 7px; }.product-browser nav { height: 46px; padding: 0 18px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); font-size: 8px; }.product-browser nav strong { margin-right: auto; font-size: 11px; }.product-browser nav span { color: var(--faint); }.product-browser main { padding: 32px 28px; }.product-browser main > small { color: var(--blue); font-size: 7px; font-weight: 750; letter-spacing: .1em; }.product-browser h4 { margin: 8px 0; font-size: 34px; letter-spacing: -.055em; }.product-browser main > p { margin: 0 0 26px; color: var(--muted); font-size: 9px; }.product-browser main > div { min-height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-size: 8px; }.product-browser main > div em { padding: 5px 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 6px; font-style: normal; }.proof-note { width: 86%; margin: -18px auto 0; padding: 14px 16px; position: relative; z-index: 2; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 18px 40px rgba(24,27,34,.08); }.proof-note span, .proof-note b { display: block; }.proof-note span { color: var(--green); font-size: 7px; font-weight: 750; letter-spacing: .1em; }.proof-note b { margin-top: 5px; font-size: 10px; line-height: 1.4; }

/* Deep product preview */
.capability-panel { grid-template-columns: .7fr 1.3fr; gap: 30px; }.product-browser-rich { height: 458px; display: flex; flex-direction: column; transform: rotate(.25deg); box-shadow: 0 28px 70px rgba(25,28,34,.13), 0 2px 10px rgba(25,28,34,.05); }.product-browser-rich > header { height: 30px; min-height: 30px; }.product-browser-rich > header b { letter-spacing: .04em; }
.product-appbar { min-height: 44px; padding: 0 13px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }.product-appbar > strong { margin-right: auto; font-size: 11px; }.product-browser-rich .product-appbar nav { width: auto; height: auto; padding: 0; gap: 6px; border: 0; }.product-browser-rich .product-appbar nav span { padding: 6px 8px; border-radius: 7px; color: #8b8f96; font-size: 7px; }.product-browser-rich .product-appbar nav span.active { color: var(--ink); background: #f1f3ef; }.product-user { display: flex; align-items: center; gap: 6px; color: #696e75; font-size: 7px; }.product-user i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: 6px; font-style: normal; font-weight: 700; }
.product-workspace { min-height: 0; flex: 1; display: flex; background: #f6f7f4; }.product-sidebar { width: 42px; padding: 12px 7px 9px; display: flex; align-items: center; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); background: #fbfbf9; }.product-sidebar b { width: 24px; height: 24px; margin-bottom: 5px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--ink); font-size: 8px; }.product-sidebar span, .product-sidebar > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #8a8f96; font-size: 9px; font-style: normal; }.product-sidebar span.active { color: var(--blue); background: var(--blue-soft); }.product-sidebar > i { margin-top: auto; border: 1px solid var(--line); font-size: 7px; }
.product-dashboard { min-width: 0; flex: 1; padding: 14px; }.product-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }.product-title small { color: var(--blue); font-size: 6px; font-weight: 750; letter-spacing: .1em; }.product-browser-rich .product-title h4 { margin: 4px 0 2px; font-size: 22px; letter-spacing: -.05em; }.product-title p { margin: 0; color: var(--faint); font-size: 7px; }.product-title button { padding: 8px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--ink); font-size: 7px; font-weight: 650; white-space: nowrap; }.product-title button span { margin-right: 4px; color: #91b2ff; }
.product-kpis { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.product-kpis article { min-width: 0; padding: 9px 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.product-kpis small { grid-column: 1/-1; color: var(--faint); font-size: 5px; letter-spacing: .08em; }.product-kpis b { margin-top: 4px; font-size: 15px; }.product-kpis em { color: var(--green); font-size: 5px; font-style: normal; }
.product-content { margin-top: 8px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(112px,.65fr); gap: 8px; }.product-requests, .product-health { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.product-requests > header { height: 30px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.product-requests > header b { font-size: 7px; }.product-requests > header span { color: var(--blue); font-size: 5px; }.product-requests article { min-height: 39px; padding: 0 9px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid #edeee9; }.product-requests article:last-child { border-bottom: 0; }.product-requests article > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 5px; font-style: normal; font-weight: 750; }.product-requests i.blue { color: var(--blue); background: var(--blue-soft); }.product-requests i.violet { color: #7657b5; background: #f1edfb; }.product-requests i.green { color: var(--green); background: var(--green-soft); }.product-requests article div { min-width: 0; }.product-requests article b, .product-requests article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-requests article b { font-size: 6px; }.product-requests article small { margin-top: 3px; color: var(--faint); font-size: 5px; }.product-requests article > em { padding: 4px 6px; border-radius: 6px; font-size: 5px; font-style: normal; white-space: nowrap; }.product-requests em.work { color: var(--blue); background: var(--blue-soft); }.product-requests em.new { color: #9b6917; background: #fff5d8; }.product-requests em.done { color: var(--green); background: var(--green-soft); }
.product-health { padding: 10px; text-align: center; }.product-health > header { display: flex; align-items: center; justify-content: space-between; }.product-health header b { font-size: 6px; }.product-health header em { color: var(--green); font-size: 5px; font-style: normal; }.health-ring { width: 56px; height: 56px; margin: 10px auto 6px; display: grid; grid-template-columns: auto auto; place-content: center; align-items: end; border-radius: 50%; background: conic-gradient(var(--green) 0 96%,#e7ebe7 96%); box-shadow: inset 0 0 0 7px #fff; }.health-ring strong { font-size: 14px; }.health-ring span { margin-bottom: 2px; font-size: 6px; }.product-health p { margin: 0; color: var(--faint); font-size: 5px; line-height: 1.45; }.product-health footer { margin-top: 9px; display: flex; justify-content: center; }.product-health footer span { width: 20px; height: 20px; margin-left: -4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #59606a; background: #edf0ed; font-size: 5px; font-weight: 700; }.product-health footer span:first-child { margin-left: 0; }
.product-statusbar { min-height: 42px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #fff; }.product-statusbar > div { display: flex; align-items: center; gap: 9px; }.product-statusbar > div > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }.product-statusbar span b, .product-statusbar span small { display: block; }.product-statusbar span b { font-size: 7px; }.product-statusbar span small { margin-top: 2px; color: var(--faint); font-size: 5px; }.product-statusbar > em { color: var(--faint); font-size: 5px; font-style: normal; }
.platform-visual { height: 420px; }.platform-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }.platform-visual path { fill: none; stroke: #94b2eb; stroke-width: 1.6; stroke-dasharray: 5 7; }.platform-core, .platform-node { position: absolute; z-index: 2; border: 1px solid var(--line-strong); background: rgba(255,255,255,.96); box-shadow: 0 16px 38px rgba(24,27,34,.07); }.platform-core { left: 50%; top: 50%; width: 165px; padding: 25px 15px; text-align: center; border-radius: 19px; transform: translate(-50%,-50%); }.platform-core > span { width: 34px; height: 34px; margin: auto; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--ink); font-weight: 750; }.platform-core small, .platform-core b { display: block; }.platform-core small { margin-top: 12px; color: var(--blue); font-size: 7px; font-weight: 750; letter-spacing: .08em; }.platform-core b { margin-top: 6px; font-size: 13px; }.platform-node { width: 135px; padding: 15px; border-radius: 15px; }.platform-node span, .platform-node small { display: block; }.platform-node span { font-size: 11px; font-weight: 700; }.platform-node small { margin-top: 4px; color: var(--faint); font-size: 7px; }.platform-node i { position: absolute; right: 11px; top: 50%; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 7px; font-style: normal; transform: translateY(-50%); }.node-web { left: 0; top: 38px; }.node-api { right: 0; top: 38px; }.node-data { left: 0; bottom: 38px; }.node-auth { right: 0; bottom: 38px; }
.intelligence-visual { padding: 28px; border: 1px solid var(--line-strong); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 20px 48px rgba(24,27,34,.06); }.model-pill { padding: 15px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; border: 1px solid #ccdaf5; border-radius: 14px; background: #f5f8ff; }.model-pill > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 750; }.model-pill small, .model-pill b { display: block; }.model-pill small { color: var(--blue); font-size: 7px; letter-spacing: .08em; }.model-pill b { margin-top: 4px; font-size: 12px; }.model-pill em { padding: 6px 8px; border-radius: 7px; color: #6b7690; background: #fff; font-size: 7px; font-style: normal; }.flow-rail { margin: 44px 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }.flow-rail > div { min-height: 95px; padding: 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.flow-rail > div.active { border-color: #9db9ee; box-shadow: 0 0 0 4px var(--blue-soft); }.flow-rail > div > i { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 8px; font-style: normal; font-weight: 750; }.flow-rail small, .flow-rail b { display: block; }.flow-rail small { color: var(--faint); font-size: 6px; }.flow-rail b { margin-top: 5px; font-size: 9px; line-height: 1.25; }.flow-rail > strong { color: #a0a4aa; font-size: 12px; }.run-proof { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 2px 9px; }.run-proof .build-dot { grid-row: 1/3; }.run-proof b, .run-proof small { display: block; }.run-proof b { font-size: 10px; }.run-proof small { color: var(--faint); font-size: 7px; }
.operations-visual { display: grid; gap: 12px; }.release-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: #fff; box-shadow: 0 22px 48px rgba(24,27,34,.07); }.release-card > header { height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.release-card > header span { font-size: 9px; font-weight: 750; letter-spacing: .08em; }.release-card > header em { padding: 6px 8px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 7px; font-style: normal; }.release-track { padding: 35px 20px; display: flex; align-items: center; }.release-track > div { text-align: center; }.release-track > div i { width: 26px; height: 26px; margin: auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 8px; font-style: normal; }.release-track > div.done i { color: #fff; border-color: var(--green); background: var(--green); }.release-track > div.live i { border-color: var(--blue); box-shadow: inset 0 0 0 6px var(--blue-soft); }.release-track b, .release-track small { display: block; }.release-track b { margin-top: 8px; font-size: 8px; }.release-track small { margin-top: 3px; color: var(--faint); font-size: 6px; }.release-track > span { width: 100%; height: 1px; margin: 0 7px; background: #cfd7e4; }.release-card > footer { min-height: 70px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #fbfbf9; }.release-card > footer > div { display: flex; align-items: center; gap: 11px; }.release-card footer p { margin: 0; }.release-card footer b, .release-card footer small { display: block; }.release-card footer b { font-size: 9px; }.release-card footer small { margin-top: 4px; color: var(--faint); font-size: 7px; }.release-card footer button { padding: 9px 12px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-size: 8px; font-weight: 700; }.ops-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.ops-metrics div { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.82); }.ops-metrics span, .ops-metrics b { display: block; }.ops-metrics span { color: var(--faint); font-size: 7px; }.ops-metrics b { margin-top: 7px; font-size: 15px; }

/* Market scenarios */
.internal-visual, .assistant-visual, .analytics-visual { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 24px 55px rgba(25,28,34,.08); }
.internal-visual > header, .assistant-visual > header, .analytics-visual > header { min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.internal-visual > header > div, .assistant-visual > header > div { display: flex; align-items: center; gap: 10px; }.internal-visual > header span, .assistant-visual > header > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--ink); font-size: 9px; font-weight: 750; }.internal-visual > header b { font-size: 11px; }.internal-visual > header em, .assistant-visual > header em, .analytics-visual > header em { padding: 6px 8px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 7px; font-style: normal; }
.internal-metrics { padding: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.internal-metrics > div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }.internal-metrics small, .internal-metrics b, .internal-metrics i { display: block; }.internal-metrics small { color: var(--faint); font-size: 6px; letter-spacing: .06em; }.internal-metrics b { margin-top: 7px; font-size: 17px; }.internal-metrics i { margin-top: 3px; color: var(--green); font-size: 6px; font-style: normal; }
.ops-board { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.ops-board > section { min-width: 0; padding: 10px; border-radius: 12px; background: #f3f4f1; }.ops-board > section > small { color: var(--faint); font-size: 6px; font-weight: 750; letter-spacing: .07em; }.ops-board article { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 5px 12px rgba(24,27,34,.03); }.ops-board article b, .ops-board article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ops-board article b { font-size: 7px; }.ops-board article span { margin-top: 5px; color: var(--faint); font-size: 6px; }.ops-board article.done b::before { content: "✓"; margin-right: 5px; color: var(--green); }
.assistant-visual { padding-bottom: 14px; }.assistant-visual > header > div > span { background: var(--blue); }.assistant-visual > header b, .assistant-visual > header small { display: block; }.assistant-visual > header b { font-size: 10px; }.assistant-visual > header small { margin-top: 3px; color: var(--faint); font-size: 6px; }.assistant-visual > header em { display: flex; align-items: center; gap: 5px; }.assistant-visual > header em i, .analytics-visual > header em i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.assistant-chat { min-height: 280px; padding: 22px 20px 12px; background: linear-gradient(180deg,#f7f8f6,#fff); }.user-message { width: 72%; margin-left: auto; padding: 13px 15px; border-radius: 15px 15px 4px 15px; color: #fff; background: var(--ink); font-size: 9px; line-height: 1.45; }.ai-message { width: 90%; margin-top: 17px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }.ai-message > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 750; }.ai-message > div { padding: 14px; border: 1px solid var(--line); border-radius: 4px 15px 15px; background: #fff; }.ai-message small { color: var(--blue); font-size: 6px; font-weight: 750; letter-spacing: .08em; }.ai-message p { margin: 8px 0 11px; font-size: 9px; line-height: 1.5; }.ai-message > div > div { padding: 7px 0; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); font-size: 7px; }.ai-message em { color: var(--faint); font-style: normal; }.assistant-visual > footer { padding: 0 20px; display: flex; align-items: center; gap: 6px; }.assistant-visual > footer span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: #666b73; background: #fafaf8; font-size: 6px; }.assistant-visual > footer small { margin-left: auto; color: var(--faint); font-size: 6px; }
.analytics-visual > header b, .analytics-visual > header small { display: block; }.analytics-visual > header b { font-size: 11px; }.analytics-visual > header small { margin-top: 4px; color: var(--faint); font-size: 7px; }.analytics-visual > header em { display: flex; align-items: center; gap: 6px; }.analytics-metrics { padding: 14px 14px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.analytics-metrics > div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; }.analytics-metrics small, .analytics-metrics b, .analytics-metrics span { display: block; }.analytics-metrics small { min-height: 15px; color: var(--faint); font-size: 6px; }.analytics-metrics b { margin-top: 6px; font-size: 17px; }.analytics-metrics span { margin-top: 4px; color: var(--green); font-size: 6px; }
.analytics-chart { margin: 12px 14px 0; padding: 14px 14px 8px; border: 1px solid var(--line); border-radius: 14px; }.analytics-chart > div:first-child { display: flex; align-items: center; justify-content: space-between; }.analytics-chart > div small { color: var(--faint); font-size: 7px; }.analytics-chart > div b { font-size: 7px; }.analytics-chart svg { width: 100%; height: 145px; overflow: visible; }.chart-area { fill: url(#chartFill); }.chart-line { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }.chart-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 6px; }.analytics-visual > footer { min-height: 42px; padding: 0 18px; display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 6px; }.analytics-visual > footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }.analytics-visual > footer b { margin-left: auto; color: var(--ink); font-size: 6px; }

/* Production product scenarios */
.internal-visual-rich, .assistant-visual-rich, .analytics-visual-rich { height: 458px; display: flex; flex-direction: column; background: #f7f8f6; box-shadow: 0 28px 70px rgba(25,28,34,.13), 0 2px 10px rgba(25,28,34,.05); }
.internal-visual-rich > header, .assistant-visual-rich > header, .analytics-visual-rich > header { min-height: 48px; padding-inline: 13px; background: rgba(255,255,255,.96); }.internal-visual-rich > header > div > div b, .internal-visual-rich > header > div > div small { display: block; }.internal-visual-rich > header > div > div b { font-size: 9px; }.internal-visual-rich > header > div > div small { margin-top: 3px; color: var(--faint); font-size: 5px; }.internal-visual-rich > header nav, .assistant-visual-rich > header nav, .analytics-visual-rich > header nav { display: flex; align-items: center; gap: 7px; }.internal-visual-rich > header nav i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }.internal-visual-rich > header nav b { color: #646970; font-size: 6px; }.internal-visual-rich > header nav em { padding: 5px 7px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 5px; font-style: normal; }
.internal-shell { min-height: 0; flex: 1; display: flex; }.workspace-rail, .assistant-rail { width: 39px; padding: 10px 6px 8px; display: flex; align-items: center; flex-direction: column; gap: 7px; border-right: 1px solid var(--line); background: #fbfbfa; }.workspace-rail b, .assistant-rail b { width: 23px; height: 23px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--ink); font-size: 7px; }.workspace-rail span, .assistant-rail span, .workspace-rail > i, .assistant-rail > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #92969d; font-size: 8px; font-style: normal; }.workspace-rail span.active, .assistant-rail span.active { color: var(--blue); background: var(--blue-soft); }.workspace-rail > i, .assistant-rail > i { margin-top: auto; color: #fff; background: #6c7380; font-size: 5px; font-weight: 750; }
.internal-main { min-width: 0; flex: 1; padding: 11px 12px 10px; }.workspace-title { display: flex; align-items: center; gap: 9px; }.workspace-title > div:first-child { margin-right: auto; }.workspace-title small { color: var(--blue); font-size: 5px; font-weight: 750; letter-spacing: .08em; }.workspace-title h4 { margin: 3px 0 0; font-size: 15px; letter-spacing: -.035em; }.workspace-title button { padding: 7px 9px; border: 0; border-radius: 8px; color: #fff; background: var(--ink); font-size: 6px; font-weight: 700; }.team-stack { display: flex; }.team-stack span, .team-stack b { width: 21px; height: 21px; margin-left: -5px; display: grid; place-items: center; border: 2px solid #f7f8f6; border-radius: 50%; color: #555c66; background: #e7e9e6; font-size: 5px; }.team-stack span:first-child { margin-left: 0; }.team-stack b { color: var(--blue); background: var(--blue-soft); }
.internal-visual-rich .internal-metrics { padding: 10px 0 8px; gap: 6px; }.internal-visual-rich .internal-metrics > div { padding: 8px 9px; background: #fff; }.internal-visual-rich .internal-metrics small { font-size: 5px; }.internal-visual-rich .internal-metrics b { margin-top: 4px; font-size: 14px; }.internal-visual-rich .internal-metrics i { font-size: 5px; }
.internal-visual-rich .ops-board { padding: 0; gap: 6px; }.internal-visual-rich .ops-board > section { padding: 7px; border: 1px solid #e3e5e1; background: #f0f2ef; }.internal-visual-rich .ops-board > section > small { display: flex; align-items: center; font-size: 5px; }.internal-visual-rich .ops-board > section > small i { width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #b6bbc2; }.internal-visual-rich .ops-board > section:nth-child(2) > small i { background: var(--blue); }.internal-visual-rich .ops-board > section:nth-child(3) > small i { background: var(--green); }.internal-visual-rich .ops-board article { margin-top: 6px; padding: 7px; }.internal-visual-rich .ops-board article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 4px; }.internal-visual-rich .ops-board article > div b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; }.internal-visual-rich .ops-board article > div em { padding: 3px 4px; border-radius: 4px; color: #8c6820; background: #fff3d8; font-size: 4px; font-style: normal; white-space: nowrap; }.internal-visual-rich .ops-board article.done > div em { color: var(--green); background: var(--green-soft); }.internal-visual-rich .ops-board article > span { margin-top: 4px; font-size: 5px; }.internal-visual-rich .ops-board article footer { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; }.internal-visual-rich .ops-board article footer i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #5d6570; background: #eceeeb; font-size: 4px; font-style: normal; }.internal-visual-rich .ops-board article footer b { color: var(--faint); font-size: 5px; }.task-progress { height: 3px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: #e5e8e4; }.task-progress i { width: 68%; height: 100%; display: block; border-radius: inherit; background: var(--blue); }.internal-status, .analytics-status { min-height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #fff; }.internal-status > div, .analytics-status > div { display: flex; align-items: center; gap: 8px; }.internal-status > div > i, .analytics-status > div > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }.internal-status span b, .internal-status span small { display: block; }.internal-status span b { font-size: 6px; }.internal-status span small { margin-top: 2px; color: var(--faint); font-size: 5px; }.internal-status > em { color: var(--faint); font-size: 5px; font-style: normal; }

.assistant-visual-rich { padding-bottom: 0; background: #f4f6f3; }.assistant-visual-rich > header nav span { color: var(--faint); font-size: 5px; }.assistant-visual-rich > header nav em { margin-left: 3px; }.assistant-shell { min-height: 0; flex: 1; display: grid; grid-template-columns: 39px minmax(0,1fr) 126px; }.assistant-rail { width: auto; }.assistant-rail b { background: var(--blue); }.assistant-visual-rich .assistant-chat { min-width: 0; min-height: 0; padding: 11px 12px 9px; background: #f7f8f6; }.assistant-context { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 5px; }.assistant-context b { color: var(--ink); font-size: 6px; }.assistant-context em { margin-left: auto; padding: 4px 6px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 5px; font-style: normal; }.assistant-visual-rich .user-message { width: 75%; margin-top: 10px; padding: 9px 11px; font-size: 7px; }.assistant-visual-rich .ai-message { width: 100%; margin-top: 10px; grid-template-columns: 24px minmax(0,1fr); gap: 7px; }.assistant-visual-rich .ai-message > span { width: 24px; height: 24px; border-radius: 8px; font-size: 7px; }.assistant-visual-rich .ai-message > div { min-width: 0; padding: 10px; border-radius: 4px 12px 12px; }.assistant-visual-rich .ai-message small { display: flex; align-items: center; font-size: 5px; }.assistant-visual-rich .ai-message small i { width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--green); }.assistant-visual-rich .ai-message p { margin: 6px 0 7px; font-size: 7px; }.assistant-visual-rich .ai-message > div > div { padding: 5px 0; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 5px; font-size: 5px; }.assistant-visual-rich .ai-message > div > div b, .assistant-visual-rich .ai-message > div > div em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.assistant-visual-rich .ai-message > div > div button { padding: 4px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--blue); background: #fff; font-size: 4px; }.assistant-visual-rich .ai-message > div > footer { margin-top: 6px; padding-top: 7px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); font-size: 5px; }.assistant-visual-rich .ai-message > div > footer span { color: var(--green); }.assistant-visual-rich .ai-message > div > footer b { color: var(--faint); font-weight: 500; }.assistant-composer { min-height: 34px; margin-top: 8px; padding: 0 6px 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.assistant-composer span { color: #8a9098; font-size: 9px; }.assistant-composer p { flex: 1; margin: 0; color: var(--faint); font-size: 5px; }.assistant-composer button { width: 23px; height: 23px; border: 0; border-radius: 7px; color: #fff; background: var(--blue); font-size: 9px; }.assistant-actions { padding: 10px 8px; border-left: 1px solid var(--line); background: #fff; }.assistant-actions > header { display: flex; align-items: center; justify-content: space-between; }.assistant-actions > header span { color: var(--faint); font-size: 4px; font-weight: 750; letter-spacing: .06em; }.assistant-actions > header b { padding: 3px 5px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: 5px; }.assistant-actions article { margin-top: 8px; padding: 8px 6px; display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; }.assistant-actions article > i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 4px; font-style: normal; }.assistant-actions article b, .assistant-actions article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.assistant-actions article b { font-size: 5px; }.assistant-actions article small { margin-top: 3px; color: var(--faint); font-size: 4px; }.assistant-actions article > em { color: var(--blue); font-size: 7px; font-style: normal; }.assistant-actions > footer { margin-top: 11px; padding: 8px; display: flex; gap: 6px; border-radius: 9px; background: var(--green-soft); }.assistant-actions > footer > i { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 6px; font-style: normal; }.assistant-actions > footer b, .assistant-actions > footer small { display: block; }.assistant-actions > footer b { color: var(--green); font-size: 5px; }.assistant-actions > footer small { margin-top: 3px; color: #708078; font-size: 4px; line-height: 1.35; }.assistant-sources { min-height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); background: #fff; }.assistant-visual-rich > .assistant-sources span { padding: 4px 6px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; }.assistant-visual-rich > .assistant-sources span i { color: var(--blue); font-size: 4px; font-style: normal; font-weight: 750; }.assistant-visual-rich > .assistant-sources span b { color: #686d74; font-size: 4px; }.assistant-sources > em { margin-left: auto; color: var(--faint); font-size: 5px; font-style: normal; }

.analytics-visual-rich > header nav button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: #6e737b; background: #fff; font-size: 5px; }.analytics-visual-rich > header nav em { margin-left: 2px; }.analytics-body { min-height: 0; flex: 1; padding: 11px 12px 9px; }.analytics-visual-rich .analytics-metrics { padding: 0; grid-template-columns: repeat(4,1fr); gap: 6px; }.analytics-visual-rich .analytics-metrics > div { padding: 8px 9px; background: #fff; }.analytics-visual-rich .analytics-metrics small { min-height: 0; font-size: 5px; }.analytics-visual-rich .analytics-metrics b { margin-top: 4px; font-size: 14px; }.analytics-visual-rich .analytics-metrics span { margin-top: 2px; font-size: 5px; }.analytics-visual-rich .analytics-metrics em { display: block; margin-top: 2px; color: var(--faint); font-size: 4px; font-style: normal; }.analytics-grid { min-height: 0; margin-top: 8px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(126px,.7fr); gap: 8px; }.analytics-visual-rich .analytics-chart { margin: 0; padding: 10px 11px 7px; background: #fff; }.analytics-visual-rich .analytics-chart > div:first-child > span small, .analytics-visual-rich .analytics-chart > div:first-child > span b { display: block; }.analytics-visual-rich .analytics-chart > div:first-child > span b { margin-top: 3px; font-size: 6px; }.analytics-visual-rich .analytics-chart nav { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 4px; }.analytics-visual-rich .analytics-chart nav i { width: 6px; height: 2px; background: var(--blue); }.analytics-visual-rich .analytics-chart nav i:nth-of-type(2) { margin-left: 4px; background: #78a6a0; }.analytics-visual-rich .analytics-chart svg { height: 145px; }.chart-grid { fill: none; stroke: #eceeea; stroke-width: 1; }.chart-line-secondary { stroke: #78a6a0; stroke-width: 1.6; stroke-dasharray: 4 4; }.analytics-visual-rich .analytics-chart circle { fill: #fff; stroke: var(--blue); stroke-width: 2; }.analytics-insights { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.analytics-insights > header { display: flex; align-items: center; justify-content: space-between; }.analytics-insights > header span { color: var(--faint); font-size: 5px; font-weight: 750; letter-spacing: .07em; }.analytics-insights > header b { color: var(--blue); font-size: 5px; }.analytics-insights article { padding: 9px 0; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }.analytics-insights article > i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; font-size: 7px; font-style: normal; font-weight: 750; }.analytics-insights i.risk { color: #b16a24; background: #fff1df; }.analytics-insights i.win { color: var(--green); background: var(--green-soft); }.analytics-insights i.info { color: var(--blue); background: var(--blue-soft); }.analytics-insights article b, .analytics-insights article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.analytics-insights article b { font-size: 5px; }.analytics-insights article small { margin-top: 3px; color: var(--faint); font-size: 4px; }.analytics-insights article > em { color: var(--blue); font-size: 7px; font-style: normal; }.analytics-insights > footer { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; }.analytics-insights > footer span { color: var(--green); font-size: 5px; }.analytics-insights > footer button { padding: 5px 6px; border: 0; border-radius: 6px; color: #fff; background: var(--ink); font-size: 4px; }.analytics-status { min-height: 38px; }.analytics-status > div { color: var(--faint); font-size: 5px; }.analytics-status > b { color: #686d74; font-size: 5px; }.analytics-status > em { color: var(--green); font-size: 5px; font-style: normal; }

/* Control */
.control-section { padding: 150px 0; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 86px; }
.section-copy > p { margin-top: 27px; }.feature-list { margin: 34px 0 0; padding: 0; display: grid; gap: 14px; list-style: none; color: #484c53; font-size: 14px; }.feature-list li { display: flex; align-items: center; gap: 10px; }.feature-list span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 9px; }
.approval-card { overflow: hidden; min-height: 560px; border: 1px solid var(--line-strong); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }.approval-topline { padding: 30px 32px 24px; display: flex; justify-content: space-between; gap: 20px; }.approval-topline span { color: var(--amber); font-size: 9px; font-weight: 750; letter-spacing: .08em; }.approval-topline h3 { margin: 8px 0 0; font-size: 23px; letter-spacing: -.035em; }.approval-topline em { height: fit-content; padding: 7px 10px; border-radius: 9px; color: var(--amber); background: var(--amber-soft); font-size: 9px; font-style: normal; }
.approval-tabs { padding: 0 32px; display: flex; gap: 24px; border-bottom: 1px solid var(--line); }.approval-tabs button { position: relative; padding: 0 0 14px; border: 0; color: var(--faint); background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; }.approval-tabs button.active { color: var(--ink); }.approval-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.approval-panel { min-height: 310px; padding: 24px 32px; display: none; }.approval-panel.active { display: block; animation: panel-in 260ms ease both; }.change-row { padding: 17px 0; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }.change-row > span { color: var(--faint); font-size: 9px; }.change-row b, .change-row small { display: block; }.change-row b { font-size: 12px; }.change-row small { margin-top: 5px; color: var(--faint); font-size: 9px; }.change-row em { padding: 6px 9px; border-radius: 8px; color: #686c73; background: #f3f4f1; font-size: 8px; font-style: normal; }
.diff-file { padding: 12px 14px; display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: #f7f7f5; font: 10px ui-monospace, monospace; }.diff-file span { color: var(--green); }.approval-panel pre { min-height: 190px; margin: 0; padding: 22px 16px; overflow: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; color: #555961; background: #fcfcfb; font: 9px/1.9 ui-monospace, monospace; }.approval-panel pre span, .approval-panel pre del, .approval-panel pre ins { display: block; text-decoration: none; }.approval-panel pre del { color: #a64b4b; background: #fbf0f0; }.approval-panel pre ins { color: #2d7956; background: #eff8f3; }
.approval-result { min-height: 165px; display: flex; align-items: center; justify-content: center; gap: 17px; }.approval-result > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 8px var(--green-soft); }.approval-result b, .approval-result small { display: block; }.approval-result b { font-size: 18px; }.approval-result small { margin-top: 6px; color: var(--muted); font-size: 10px; }.result-rail { margin-top: 30px; display: flex; align-items: center; color: var(--faint); font-size: 8px; }.result-rail b { color: var(--green); white-space: nowrap; }.result-rail i { width: 100%; height: 1px; margin: 0 9px; background: var(--line); }
.approval-actions { min-height: 78px; padding: 15px 20px 15px 32px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #fbfbf9; }.approval-actions > small { color: var(--faint); font-size: 9px; }.approval-actions > div { display: flex; gap: 8px; }.approval-actions .button { min-height: 40px; font-size: 10px; }

/* Models */
.models-section { padding: 145px 0; background: #ebece8; }.models-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 86px; }.model-router { position: relative; min-height: 590px; padding: 28px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 30px; background: #f7f7f4; box-shadow: var(--shadow); }.model-router::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(#d1d3cf .7px, transparent .7px); background-size: 20px 20px; mask-image: radial-gradient(circle, #000, transparent 78%); opacity: .55; pointer-events: none; }.router-topline, .router-journey, .model-options, .router-invariant { position: relative; z-index: 2; }.router-topline { height: 42px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }.router-topline > div { display: flex; align-items: center; gap: 9px; }.router-topline b { font-size: 10px; }.router-topline small { color: var(--faint); font-size: 8px; }.router-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.router-journey { height: 190px; display: grid; grid-template-columns: 1fr 116px 1fr; align-items: center; gap: 26px; }.router-journey > svg { position: absolute; z-index: 0; inset: 10px 0; width: 100%; height: calc(100% - 20px); }.router-journey path { fill: none; stroke: #a9bde5; stroke-width: 1.6; stroke-dasharray: 5 6; }.router-pulse { position: absolute; z-index: 4; left: 17%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(41,104,225,.11), 0 0 17px rgba(41,104,225,.35); opacity: 0; transform: translateY(-50%); }.model-router.routing .router-pulse { animation: router-pulse-run 1050ms cubic-bezier(.5,.08,.3,1) both; }.router-input, .router-output, .router-core { position: relative; z-index: 2; }.router-input, .router-output { min-height: 102px; padding: 17px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(24,27,34,.04); }.router-input span, .router-input b, .router-input small, .router-output span, .router-output b, .router-output small { display: block; }.router-input span, .router-output span { color: var(--faint); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }.router-input b, .router-output b { margin-top: 8px; font-size: 12px; line-height: 1.3; }.router-input small, .router-output small { margin-top: 6px; color: var(--faint); font-size: 7px; line-height: 1.35; }.model-router.routing .router-output { animation: router-output-flash 650ms 720ms ease both; }.router-core { padding: 21px 8px; text-align: center; border: 1px solid #cbd8f4; border-radius: 18px; background: var(--blue-soft); box-shadow: 0 12px 28px rgba(40,96,205,.08); }.router-core span { width: 34px; height: 34px; margin: auto; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--blue); font-weight: 750; }.router-core b, .router-core small { display: block; }.router-core b { margin-top: 10px; font-size: 10px; }.router-core small { margin-top: 5px; color: #7180a0; font-size: 6px; }
.model-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.model-options button { position: relative; min-height: 82px; padding: 14px 38px 14px 13px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; text-align: left; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.84); cursor: pointer; transition: 220ms ease; }.model-options button > span { color: var(--faint); font-size: 7px; }.model-options b, .model-options small { display: block; }.model-options b { font-size: 10px; }.model-options small { margin-top: 5px; color: var(--faint); font-size: 7px; }.model-options button > i { position: absolute; right: 13px; top: 50%; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 7px; font-style: normal; opacity: 0; transform: translateY(-50%) scale(.5); }.model-options button.active { border-color: #9db9ee; background: #fff; box-shadow: 0 0 0 3px var(--blue-soft), 0 12px 28px rgba(24,27,34,.05); transform: translateY(-2px); }.model-options button.active > i { opacity: 1; transform: translateY(-50%) scale(1); transition: 250ms cubic-bezier(.2,1.5,.4,1); }
.router-invariant { margin-top: 14px; padding: 16px 17px; display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 4px 16px; border: 1px solid #d9ded7; border-radius: 15px; background: rgba(255,255,255,.72); }.router-invariant > span { grid-row: 1/3; color: var(--faint); font-size: 7px; font-weight: 750; letter-spacing: .09em; }.router-invariant > div { display: flex; gap: 7px; }.router-invariant > div b { padding: 6px 8px; border-radius: 8px; color: #4e545b; background: #f1f3ef; font-size: 8px; }.router-invariant > div i { color: var(--green); font-style: normal; }.router-invariant > small { color: var(--faint); font-size: 7px; }

/* Workflow */
.workflow-section { padding: 150px 0 130px; color: #f7f7f5; background: #15171b; }.workflow-section .eyebrow { color: #8caeff; }.workflow-section .section-heading > p { color: #a9adb4; }.workflow-canvas { position: relative; height: 360px; margin-top: 70px; overflow: hidden; border: 1px solid #2b2e34; border-radius: 28px; background-color: #191b20; background-image: radial-gradient(#30333a .8px, transparent .8px); background-size: 22px 22px; }.workflow-canvas > svg { position: absolute; inset: 50px 40px; width: calc(100% - 80px); height: calc(100% - 100px); }.workflow-canvas path { fill: none; stroke: #444851; stroke-width: 2; stroke-linecap: round; }.workflow-mobile-links { display: none; }.workflow-node { position: absolute; z-index: 2; width: 165px; min-height: 112px; padding: 17px; border: 1px solid #393d45; border-radius: 17px; background: rgba(32,35,41,.96); box-shadow: 0 16px 40px rgba(0,0,0,.16); transition: 240ms ease; }.workflow-node[data-node="start"] { left: 5%; top: 124px; }.workflow-node[data-node="ai"] { left: 29%; top: 124px; }.workflow-node[data-node="data"] { left: 53%; top: 124px; }.workflow-node[data-node="notify"] { right: 5%; top: 70px; }.workflow-node[data-node="approve"] { right: 5%; top: 210px; }.workflow-node.active { border-color: #6f93e8; background: #222936; transform: translateY(-3px); }.workflow-node.complete { border-color: #39664f; }.workflow-node > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #454a54; border-radius: 8px; color: #c3c7ce; background: #282b32; font-size: 9px; font-weight: 750; }.workflow-node small { display: block; margin: -22px 0 12px 34px; color: #858b95; font-size: 8px; }.workflow-node h3 { margin: 0 0 15px; font-size: 13px; }.workflow-node em { color: #747a84; font-size: 8px; font-style: normal; }.workflow-node.active em { color: #9fbbfb; }.workflow-node.complete em { color: #78bd94; }.workflow-mobile-branch { display: none; }.data-pulse { position: absolute; z-index: 3; left: 18%; top: 178px; width: 9px; height: 9px; border-radius: 50%; background: #8aafff; box-shadow: 0 0 0 5px rgba(138,175,255,.12), 0 0 20px rgba(138,175,255,.5); opacity: 0; }.workflow-canvas.running .data-pulse { opacity: 1; animation: pulse-route 3.2s cubic-bezier(.55,.1,.35,1) both; }.workflow-canvas.route-approval .data-pulse { animation-name: pulse-route-approval; }.workflow-controls { margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 7px; color: #858a93; font-size: 10px; }.workflow-controls > span { margin-right: 7px; }.workflow-controls button { padding: 9px 12px; border: 1px solid #33363d; border-radius: 10px; color: #a9adb5; background: transparent; cursor: pointer; font-size: 9px; }.workflow-controls button.active { border-color: #58647d; color: #f4f5f7; background: #23262c; }

/* Production workflow nodes */
.workflow-canvas { height: 390px; }.workflow-canvas > svg:not(.workflow-mobile-links) { inset: 56px 38px; width: calc(100% - 76px); height: calc(100% - 112px); }.workflow-canvas path { stroke: #4b5563; stroke-width: 1.5; }
.workflow-node { width: 190px; min-height: 128px; padding: 0; display: flex; overflow: hidden; flex-direction: column; border-color: #3a424d; border-radius: 18px; background: linear-gradient(145deg,rgba(35,39,47,.98),rgba(27,30,36,.98)); box-shadow: 0 18px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025); }
.workflow-node[data-node="start"] { left: 4%; top: 130px; }.workflow-node[data-node="ai"] { left: 28%; top: 130px; }.workflow-node[data-node="data"] { left: 52%; top: 130px; }.workflow-node[data-node="notify"] { right: 4%; top: 46px; }.workflow-node[data-node="approve"] { right: 4%; top: 216px; }
.node-head { min-height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.018); }.node-head > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #4b5563; border-radius: 8px; color: #c5ccd6; background: #2a2f38; font-size: 9px; font-weight: 750; }.node-head small { min-width: 0; margin: 0; overflow: hidden; color: #858e9b; font-size: 7px; font-weight: 650; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }.node-head i { margin-left: auto; color: #656d79; font: 8px/1 sans-serif; letter-spacing: 1px; }
.workflow-node[data-node="ai"] .node-head > span { color: #b9caff; border-color: #4e608a; background: #2c3549; }.workflow-node[data-node="data"] .node-head > span { color: #a9d4da; border-color: #466068; background: #29383d; }.workflow-node[data-node="notify"] .node-head > span { color: #a9c9ff; border-color: #465d7d; background: #293546; }.workflow-node[data-node="approve"] .node-head > span { color: #d9c49b; border-color: #6b5b42; background: #3b3429; }
.workflow-node h3 { flex: 1; margin: 14px 14px 11px; font-size: 14px; line-height: 1.18; letter-spacing: -.025em; }.node-foot { min-height: 34px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.045); background: rgba(13,15,18,.13); }.node-foot em { display: flex; align-items: center; gap: 6px; color: #7d8590; font-size: 7px; font-style: normal; white-space: nowrap; }.node-foot em::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #59616c; }.node-foot b { padding: 4px 6px; border: 1px solid #3d4550; border-radius: 6px; color: #7f8894; background: #252a31; font-size: 6px; font-weight: 650; }
.workflow-node.active { border-color: #6b8fe1; background: linear-gradient(145deg,#252c39,#1d222b); box-shadow: 0 0 0 1px rgba(107,143,225,.18), 0 20px 48px rgba(0,0,0,.24), 0 0 28px rgba(91,132,224,.08); }.workflow-node.active .node-foot em { color: #9fbbfb; }.workflow-node.active .node-foot em::before { background: #7ca4ff; box-shadow: 0 0 0 4px rgba(124,164,255,.1); }.workflow-node.complete { border-color: #356449; }.workflow-node.complete .node-foot em { color: #72c491; }.workflow-node.complete .node-foot em::before { background: #52b57a; box-shadow: 0 0 0 4px rgba(82,181,122,.09); }

.final-cta { padding: 160px 0; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 90px; }.final-cta > div:last-child { padding-bottom: 8px; }.final-cta p { margin: 0 0 25px; color: var(--muted); line-height: 1.6; }.site-footer { padding: 28px 0 36px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #7b7f86; font-size: 10px; }.site-footer .brand { color: var(--ink); }

@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes capability-panel-in { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes capability-progress { from { width: 0; } to { width: 100%; } }
@keyframes router-pulse-run { 0% { left: 17%; opacity: 0; } 12% { opacity: 1; } 48% { left: 50%; opacity: 1; } 58% { left: 50%; opacity: 1; transform: translateY(-50%) scale(1.35); } 100% { left: 82%; opacity: 0; transform: translateY(-50%) scale(1); } }
@keyframes router-output-flash { 0% { border-color: var(--line); box-shadow: 0 12px 30px rgba(24,27,34,.04); } 45% { border-color: #8fb0ee; box-shadow: 0 0 0 4px var(--blue-soft), 0 16px 34px rgba(41,104,225,.08); } 100% { border-color: var(--line); box-shadow: 0 12px 30px rgba(24,27,34,.04); } }
@keyframes agent-clarify-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clarify-row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clarify-answer-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dots-shift { to { background-position: 6px 50%; } }
@keyframes plan-progress-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plan-card-in { from { opacity: 0; transform: translateY(10px) scale(.98); border-color: var(--line); } to { opacity: 1; transform: translateY(0) scale(1); border-color: #d4def2; } }
@keyframes plan-check-in { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }
@keyframes model-note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes caret-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes trace-link { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes connection-arrow-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }
@keyframes check-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes check-in-row { from { opacity: 0; transform: translateY(-50%) scale(.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes module-arrive { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ready-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes submit-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cursor-approach { 0% { left: 76%; bottom: 34px; opacity: 0; transform: rotate(-6deg); } 14% { opacity: 1; } 70% { left: 82px; bottom: 25px; opacity: 1; transform: rotate(0); } 82% { left: 78px; bottom: 21px; opacity: 1; transform: scale(.9); } 92% { left: 82px; bottom: 25px; opacity: 1; transform: scale(1); } 100% { left: 82px; bottom: 25px; opacity: 0; } }
@keyframes cursor-ripple { 0% { opacity: 0; transform: scale(.35); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes submit-auto-press { 0%, 73% { transform: translateY(0) scale(1); } 81% { transform: translateY(1px) scale(.97); } 91%, 100% { transform: translateY(0) scale(1); } }
@keyframes ready-cursor-approach { 0% { right: 16px; bottom: -14px; opacity: 0; transform: rotate(-7deg); } 16% { opacity: 1; } 72% { right: 76px; bottom: 15px; opacity: 1; transform: rotate(0); } 84% { right: 82px; bottom: 11px; opacity: 1; transform: scale(.9); } 94% { right: 78px; bottom: 15px; opacity: 1; transform: scale(1); } 100% { right: 78px; bottom: 15px; opacity: 0; } }
@keyframes ready-button-press { 0%, 76% { transform: translateY(0) scale(1); } 84% { transform: translateY(1px) scale(.97); } 94%, 100% { transform: translateY(0) scale(1); } }
@keyframes preview-load-bar { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes preview-loader-out { 0% { opacity: 1; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes preview-ready { from { opacity: .18; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes preview-scroll { 0%, 20% { transform: translateY(0); } 72%, 100% { transform: translateY(-225px); } }
@keyframes live-cursor-tour { 0% { left: 72%; top: 42%; opacity: 0; transform: rotate(-7deg); } 8% { opacity: 1; } 22% { left: 68%; top: 49%; opacity: 1; transform: rotate(0); } 45% { left: 76%; top: 55%; opacity: 1; } 62% { left: 61%; top: 48%; opacity: 1; } 72% { left: 61%; top: 48%; opacity: 1; } 88% { left: 78.5%; top: 86%; opacity: 1; transform: scale(1); } 92% { left: 79%; top: 87%; opacity: 1; transform: scale(.9); } 97% { left: 78.5%; top: 86%; opacity: 1; transform: scale(1); } 100% { left: 78.5%; top: 86%; opacity: 0; } }
@keyframes live-cursor-tour-mobile { 0% { left: 72%; top: 42%; opacity: 0; transform: rotate(-7deg); } 8% { opacity: 1; } 22% { left: 68%; top: 49%; opacity: 1; transform: rotate(0); } 45% { left: 76%; top: 55%; opacity: 1; } 62% { left: 61%; top: 48%; opacity: 1; } 72% { left: 61%; top: 48%; opacity: 1; } 88% { left: 85%; top: 88%; opacity: 1; transform: scale(1); } 92% { left: 85.5%; top: 89%; opacity: 1; transform: scale(.9); } 97% { left: 85%; top: 88%; opacity: 1; transform: scale(1); } 100% { left: 85%; top: 88%; opacity: 0; } }
@keyframes publish-pulse { from { box-shadow: 0 0 0 4px var(--green-soft); } to { box-shadow: 0 0 0 7px rgba(35,132,89,.08); } }
@keyframes activity-cycle { 0% { opacity: 0; transform: translateY(10px); } 10%, 82% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes activity-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@keyframes status-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scroll-dot { 0%,100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(11px); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-route { 0% { left: 17%; top: 178px; } 29% { left: 41%; top: 178px; } 62% { left: 65%; top: 178px; } 100% { left: 88%; top: 124px; } }
@keyframes pulse-route-approval { 0% { left: 17%; top: 178px; } 29% { left: 41%; top: 178px; } 62% { left: 65%; top: 178px; } 100% { left: 88%; top: 265px; } }

.proof-note { width: 92%; margin: 14px auto 0; box-shadow: 0 12px 28px rgba(24,27,34,.06); }
.proof-note::before { content: ""; position: absolute; left: 26px; top: -15px; width: 1px; height: 14px; background: var(--line-strong); }

@media (max-width: 1060px) {
  .main-nav { display: none; }.site-header { grid-template-columns: 1fr auto; }
  .assembly-sticky { grid-template-columns: .78fr 1.22fr; gap: 24px; }.hero-chapter h1, .hero-chapter h2 { font-size: clamp(48px, 5.5vw, 66px); }
  .module { width: 42%; }.live-dashboard { display: none; }
  .control-section, .models-grid, .final-cta { grid-template-columns: 1fr; gap: 54px; }.control-section, .models-grid { max-width: 820px; }.section-heading { grid-template-columns: 1fr; gap: 28px; }.section-heading > p { max-width: 600px; }
  .workflow-node[data-node="start"] { left: 3%; }.workflow-node[data-node="ai"] { left: 27%; }.workflow-node[data-node="data"] { left: 51%; }.workflow-node[data-node="notify"], .workflow-node[data-node="approve"] { right: 3%; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 640px); }
  .site-header { top: 8px; height: 58px; margin: 0; }.site-header > .button { min-height: 36px; padding-inline: 13px; }
  .assembly { height: 220vh; min-height: 1450px; }.hero-stage-anchor { top: 26.2%; }.assembly-sticky { min-height: 650px; padding: 82px 0 18px; grid-template-columns: 1fr; grid-template-rows: 40% 1fr 48px; gap: 8px; }.hero-copy { align-self: end; text-align: center; }.hero-copy > .eyebrow { margin-bottom: 10px; }.hero-chapters { height: 190px; margin-top: 0; }.hero-chapter { align-items: center; justify-content: flex-start; }.hero-chapter h1, .hero-chapter h2 { font-size: clamp(42px, 11.4vw, 58px); line-height: .93; }.hero-chapter p { max-width: 520px; margin-top: 16px; font-size: 14px; line-height: 1.45; }.hero-cta { display: none; }
  .living-project { height: 100%; min-height: 0; border-radius: 24px; }.prompt-surface { left: 8%; top: 21%; width: 84%; padding: 15px; }.prompt-surface > p { margin: 14px 0 20px; font-size: 15px; }.project-receiver { left: 3%; top: 4%; bottom: 13%; width: 43%; padding: 12px; }.project-receiver > b { font-size: 10px; }.project-receiver > small { display: none; }.project-core { left: 6%; top: 18%; width: 37%; padding: 11px; }.core-mark { width: 25px; height: 25px; margin-bottom: 8px; }.project-core small { font-size: 6px; }.project-core strong { margin-top: 5px; font-size: 9px; }.project-core em { display: none; }.living-project[data-stage="1"] .prompt-surface { left: 6%; top: 46%; width: 37%; padding: 10px; }.living-project[data-stage="1"] .prompt-surface > p { margin: 7px 0 2px; font-size: 7px; }.living-project[data-stage="1"] .scene-card-top { gap: 5px; font-size: 7px; }.living-project[data-stage="1"] .scene-avatar { width: 19px; height: 19px; border-radius: 6px; font-size: 6px; }.system-activity { left: 6%; right: auto; top: 70%; width: 37%; padding: 9px; gap: 7px; }.system-activity small { font-size: 5px; }.system-activity b { margin-top: 3px; font-size: 7px; }.module { right: 3%; width: 43%; min-height: 45px; padding: 8px 34px 8px 31px; }.module span { left: 10px; font-size: 6px; }.module b { font-size: 8px; }.module small { margin-top: 2px; font-size: 6px; }.module-check { right: 8px; width: 18px; height: 18px; font-size: 7px; }.module-web { top: 4%; }.module-api { top: 16%; }.module-data { top: 28%; }.module-auth { top: 40%; }.module-ai { top: 52%; }.module-flow { top: 64%; }.project-ready { left: 3%; right: 3%; bottom: 3%; min-height: 58px; padding: 9px 10px; }.project-ready b { font-size: 9px; }.project-ready small { font-size: 6px; }.project-ready button { padding: 9px; font-size: 7px; }.live-window { inset: 3% 3% 25%; }.live-bar { grid-template-columns: 1fr auto; }.live-dots { display: none; }.live-bar b { grid-column: 2; }.live-nav { padding-inline: 14px; }.live-nav span { display: none; }.live-hero { padding: 30px 24px; }.live-hero h3 { font-size: clamp(31px, 9vw, 44px); }.publish-card { left: 5%; right: 5%; bottom: 3.5%; height: 64px; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; padding: 0 12px; gap: 9px; }.publish-card > div:first-child, .publish-line { grid-row: 1; }.publish-card button { grid-row: 1; align-self: center; }.publish-card small, .publish-card p { display: none; }.chapter-nav { grid-column: 1; padding: 4px; }.chapter-nav button { padding: 9px 12px; }.scroll-hint { display: none; }
  .living-project[data-stage="2"] .live-cursor { animation-name: live-cursor-tour-mobile; }
  .manifesto, .journal-section, .control-section, .models-section, .workflow-section, .final-cta { padding-top: 96px; padding-bottom: 96px; }.manifesto h2, .section-heading h2, .section-copy h2, .final-cta h2 { font-size: clamp(42px, 12vw, 58px); }.manifesto-grid { grid-template-columns: 1fr; margin-top: 45px; }.manifesto-grid article { min-height: 190px; }.manifesto-grid h3 { margin-top: 42px; }
  .journal-shell { margin-top: 44px; border-radius: 22px; }.journal-topbar { height: 64px; padding-inline: 16px; }.journal-progress { height: 66px; padding-inline: 8px; overflow-x: auto; }.journal-progress button { min-width: 82px; grid-template-columns: 18px 1fr; }.journal-body { display: block; }.journal-story { min-height: 330px; padding: 34px 24px; border-right: 0; border-bottom: 1px solid var(--line); }.journal-story h3 { font-size: 38px; }.journal-fact { margin-top: 35px; }.journal-stage { min-height: 610px; }.journal-panel { padding: 20px; }.conversation-card p { font-size: 14px; }.component-plan { grid-template-columns: repeat(2, 1fr); }.component-plan article { min-height: 92px; }.review-preview { grid-template-columns: 1fr; }.mini-browser main { padding: 35px 20px; }.review-gate { align-self: stretch; }.live-result { padding: 20px; }.release-steps { overflow-x: auto; }.journal-controls #journalPause { display: none; }
  .capability-section { padding: 96px 0; }.capability-shell { margin-top: 44px; border-radius: 22px; }.capability-topbar { height: 64px; padding: 0 16px; }.capability-state span { display: none; }.capability-layout { display: block; }.capability-tabs { padding: 10px; grid-template-columns: repeat(2, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }.capability-tabs button { min-height: 82px; padding: 14px 11px; grid-template-columns: 22px 1fr; }.capability-tabs button b { font-size: 11px; }.capability-tabs button small { font-size: 7px; }.capability-stage { min-height: 850px; }.capability-panel { padding: 28px 20px; grid-template-columns: 1fr; align-content: start; gap: 34px; }.capability-copy h3 { font-size: 40px; }.capability-copy ul { margin-top: 20px; }.platform-visual { height: 380px; }.platform-node { width: 115px; }.flow-rail { margin: 28px 0; grid-template-columns: 1fr; }.flow-rail > strong { display: none; }.flow-rail > div { min-height: 64px; }.operations-visual { align-self: start; }.release-track { padding-inline: 12px; }.release-track > span { margin-inline: 4px; }
  .product-browser-rich { height: 430px; transform: none; }.product-browser-rich .product-sidebar { display: none; }.product-dashboard { padding: 12px; }.product-content { grid-template-columns: minmax(0,1fr) 106px; }.product-browser-rich .product-title h4 { font-size: 20px; }
  .internal-visual-rich, .assistant-visual-rich, .analytics-visual-rich { height: 430px; }.workspace-rail, .assistant-rail { display: none; }.assistant-shell { grid-template-columns: minmax(0,1fr) 118px; }.analytics-grid { grid-template-columns: minmax(0,1fr) 118px; }
  .control-section { display: block; }.approval-card { margin-top: 52px; }.approval-topline, .approval-panel { padding-inline: 20px; }.approval-tabs { padding-inline: 20px; }.approval-actions { padding: 15px 20px; align-items: stretch; flex-direction: column; gap: 12px; }.approval-actions > div { display: grid; grid-template-columns: 1fr 1fr; }.approval-actions .button { padding-inline: 10px; }
  .models-grid { display: block; }.model-router { min-height: 620px; margin-top: 50px; padding: 24px 20px; }.router-topline small { display: none; }.router-journey { height: auto; padding: 24px 0; grid-template-columns: 1fr; gap: 14px; }.router-journey > svg, .router-pulse { display: none; }.router-core { width: 150px; justify-self: center; }.model-options { grid-template-columns: 1fr; }.router-output { text-align: center; }.router-invariant { grid-template-columns: 1fr; }.router-invariant > span { grid-row: auto; }.router-invariant > div { flex-wrap: wrap; }
  .workflow-canvas { height: 600px; display: block; }.workflow-canvas > svg:not(.workflow-mobile-links), .data-pulse { display: none; }.workflow-canvas > .workflow-mobile-links { inset: 0; width: 100%; height: 100%; display: block; }.workflow-mobile-links > path { fill: none; stroke: #667181; stroke-width: 1.5; stroke-dasharray: 5 7; marker-end: url(#mobileFlowArrow); vector-effect: non-scaling-stroke; }.workflow-mobile-links marker path { fill: #7f8a9a; stroke: none; }.workflow-mobile-links circle { fill: #8caeff; stroke: #20252d; stroke-width: 1.2; vector-effect: non-scaling-stroke; }.workflow-canvas::before, .workflow-canvas::after { display: none; }.workflow-node { width: clamp(150px, 30vw, 165px); min-height: 108px; height: 108px; padding: 0; transform: none; }.workflow-node.active { transform: translateY(-2px); }.workflow-node[data-node="start"] { left: 6% !important; right: auto !important; top: 28px; }.workflow-node[data-node="ai"] { left: auto !important; right: 6% !important; top: 142px; }.workflow-node[data-node="data"] { left: 6% !important; right: auto !important; top: 256px; }.workflow-node[data-node="notify"] { left: auto !important; right: 6% !important; top: 348px; }.workflow-node[data-node="approve"] { left: auto !important; right: 6% !important; top: 470px; }.node-head { min-height: 35px; padding: 0 10px; gap: 7px; }.node-head > span { width: 21px; height: 21px; border-radius: 7px; font-size: 7px; }.node-head small { margin: 0; font-size: 5px; }.node-head i { font-size: 6px; }.workflow-node h3 { margin: 10px 11px 7px; font-size: 11px; }.node-foot { min-height: 27px; padding: 0 10px; }.node-foot em { font-size: 5px; }.node-foot em::before { width: 5px; height: 5px; }.node-foot b { padding: 3px 5px; font-size: 5px; }.workflow-node::before, .workflow-node::after, .workflow-mobile-branch { display: none; }.workflow-controls { align-items: stretch; flex-direction: column; }.workflow-controls > span { margin: 0 0 5px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 15px; }
}

@media (max-width: 520px) {
  :root { --shell: calc(100% - 20px); }
  .site-header { padding: 0 8px 0 12px; border-radius: 16px; }
  .brand { gap: 7px; font-size: 15px; }.brand-mark { width: 25px; height: 25px; flex: 0 0 auto; }
  .site-header > .button { max-width: 142px; min-height: 36px; padding-inline: 12px; font-size: 11px; white-space: nowrap; }

  .assembly { min-height: 1370px; }.assembly-sticky { padding-top: 76px; }
  .hero-chapter h1, .hero-chapter h2 { font-size: clamp(36px, 10.8vw, 48px); }
  .hero-chapter p { padding-inline: 5px; font-size: 12px; }
  .living-project { border-radius: 20px; }
  .project-receiver { left: 2%; width: 45%; }.project-core, .living-project[data-stage="1"] .prompt-surface, .system-activity { left: 4%; width: 41%; }.living-project[data-stage="1"] .prompt-surface { top: 45%; }.system-activity { top: 70.5%; }
  .module { right: 2%; width: 47%; padding: 8px 29px 8px 26px; overflow: hidden; }
  .module span { left: 8px; }.module b, .module small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .module-check { right: 6px; width: 16px; height: 16px; box-shadow: 0 3px 9px rgba(35,132,89,.18); }
  .project-ready { left: 2%; right: 2%; gap: 7px; }.project-ready > div { min-width: 0; grid-template-columns: 13px minmax(0,1fr); }.project-ready .build-dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px var(--green-soft); }.project-ready small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-ready button { flex: 0 0 auto; padding: 9px 8px; }.project-ready button span { display: none; }
  .publish-card { left: 3%; right: 3%; grid-template-columns: minmax(0,auto) 1fr auto; }.publish-card > div:first-child { min-width: 0; }.publish-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.publish-card button { padding-inline: 9px; }
  .chapter-nav button { padding-inline: 9px; }.chapter-nav button span { margin-right: 3px; }

  .capability-topbar { padding-inline: 12px; }.capability-project { min-width: 0; gap: 9px; }.capability-project > span { width: 30px; height: 30px; flex: 0 0 auto; }.capability-project > div { min-width: 0; }.capability-project b, .capability-project small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.capability-project b { font-size: 11px; }
  .capability-tabs { grid-template-columns: 1fr; gap: 5px; }.capability-tabs button { min-height: 61px; padding: 10px 12px; grid-template-columns: 24px minmax(0,1fr); }.capability-tabs button.active { transform: none; }.capability-tabs button div { min-width: 0; }.capability-tabs button b, .capability-tabs button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .capability-stage { min-height: 830px; }.capability-panel { padding: 24px 14px; gap: 25px; }.capability-copy h3 { font-size: 34px; }.capability-copy p { font-size: 12px; }.capability-copy li { font-size: 9px; }
  .product-browser-rich { height: 410px; border-radius: 16px; }.product-browser-rich .product-appbar { padding-inline: 10px; gap: 8px; }.product-browser-rich .product-appbar nav { display: none; }.product-user span { display: none; }.product-dashboard { padding: 10px; }.product-title { align-items: center; }.product-browser-rich .product-title h4 { font-size: 19px; }.product-title p { display: none; }.product-title button { padding: 7px 8px; }.product-kpis { gap: 5px; }.product-kpis article { padding: 8px 7px; }.product-content { grid-template-columns: 1fr; }.product-health { display: none; }.product-statusbar > em { display: none; }
  .internal-visual-rich, .assistant-visual-rich, .analytics-visual-rich { height: 410px; border-radius: 16px; }.internal-visual-rich > header nav b, .internal-visual-rich > header nav em, .assistant-visual-rich > header nav span, .analytics-visual-rich > header nav button { display: none; }.workspace-title .team-stack { display: none; }.workspace-title button { padding-inline: 7px; }.internal-main { padding-inline: 9px; }.internal-visual-rich .internal-metrics { gap: 4px; }.internal-visual-rich .internal-metrics > div { padding-inline: 6px; }.internal-visual-rich .ops-board { gap: 4px; }.internal-visual-rich .ops-board > section { padding: 5px; }.internal-visual-rich .ops-board article { padding: 6px 5px; }.internal-visual-rich .ops-board article:nth-of-type(2) { display: none; }.internal-visual-rich .ops-board article > div em { display: none; }.internal-status > em { display: none; }
  .assistant-shell { grid-template-columns: 1fr; }.assistant-actions { display: none; }.assistant-visual-rich .assistant-chat { padding-inline: 10px; }.assistant-visual-rich .ai-message > div > div { align-items: center; flex-direction: row; }.assistant-sources > em { display: none; }
  .analytics-visual-rich .analytics-metrics { grid-template-columns: repeat(2,1fr); }.analytics-visual-rich .analytics-metrics > div:last-child { grid-column: auto; }.analytics-grid { grid-template-columns: 1fr; }.analytics-insights { display: none; }.analytics-visual-rich .analytics-chart svg { height: 132px; }.analytics-status > b { display: none; }.analytics-status > em { margin-left: auto; }
  .proof-note { width: 96%; padding-inline: 12px; }.proof-note b { font-size: 9px; }
  .internal-visual > header, .assistant-visual > header, .analytics-visual > header { padding-inline: 12px; }.internal-visual > header > div, .assistant-visual > header > div { min-width: 0; }.internal-visual > header span, .assistant-visual > header > div > span { flex: 0 0 auto; }.internal-visual > header b, .assistant-visual > header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .internal-metrics { padding: 10px; gap: 5px; }.internal-metrics > div { min-width: 0; padding: 9px; }.internal-metrics small { min-height: 16px; }.internal-metrics b { font-size: 14px; }.ops-board { padding: 0 10px 10px; gap: 5px; }.ops-board > section { padding: 7px; }.ops-board article { padding: 8px 6px; }
  .assistant-visual > header em { flex: 0 0 auto; }.assistant-chat { min-height: 270px; padding: 18px 12px 10px; }.user-message { width: 86%; }.ai-message { width: 100%; grid-template-columns: 25px minmax(0,1fr); gap: 7px; }.ai-message > span { width: 25px; height: 25px; }.ai-message > div { min-width: 0; padding: 12px; }.ai-message > div > div { align-items: flex-start; flex-direction: column; gap: 3px; }.assistant-visual > footer { padding-inline: 12px; flex-wrap: wrap; }.assistant-visual > footer small { display: none; }
  .analytics-metrics { padding: 10px 10px 0; grid-template-columns: 1fr 1fr; gap: 6px; }.analytics-metrics > div { min-width: 0; padding: 10px; }.analytics-metrics > div:last-child { grid-column: 1 / -1; }.analytics-chart { margin-inline: 10px; padding-inline: 10px; }.analytics-chart > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }.analytics-chart svg { height: 112px; }.analytics-visual > footer { padding-inline: 12px; }.analytics-visual > footer b { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .feature-list span, .approval-result > span, .workflow-node > span, .router-live-dot { flex: 0 0 auto; }
  .approval-topline { padding: 24px 20px 18px; align-items: flex-start; flex-direction: column; gap: 12px; }.approval-topline em { flex: 0 0 auto; }.approval-panel { padding-inline: 18px; }.change-row { grid-template-columns: 24px minmax(0,1fr) auto; gap: 6px; }.change-row > div { min-width: 0; }.change-row b, .change-row small { overflow-wrap: anywhere; }.change-row em { padding-inline: 7px; }
  .approval-result { align-items: flex-start; flex-direction: column; }.result-rail { overflow-x: auto; }
  .model-router { padding-inline: 14px; }.model-options button { grid-template-columns: 24px minmax(0,1fr); padding-right: 46px; }.model-options button > div { min-width: 0; }.model-options b, .model-options small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-options button > i { right: 14px; flex: 0 0 auto; }
  .router-invariant { padding-inline: 12px; }.router-invariant > div { gap: 5px; }.router-invariant > div b { padding-inline: 6px; font-size: 7px; white-space: nowrap; }
  .workflow-node { width: clamp(148px, 40vw, 158px); padding: 0; }.workflow-node[data-node="start"], .workflow-node[data-node="data"] { left: 5% !important; }.workflow-node[data-node="ai"], .workflow-node[data-node="notify"], .workflow-node[data-node="approve"] { right: 5% !important; }.node-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workflow-node h3 { font-size: 11px; }.workflow-controls button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .living-project[data-stage="1"] .scene-connections > .connection-line { stroke-dashoffset: 0; }
  .living-project[data-stage="1"] .scene-connections > .connection-arrow { opacity: 1; transform: none; }
  .living-project[data-stage="1"] .module, .living-project[data-stage="1"] .project-ready { opacity: 1; transform: none; }
  .living-project[data-stage="1"] .module-check { opacity: 1; transform: translateY(-50%) scale(1); }
  .living-project[data-stage="1"] .project-core em { opacity: 1; transform: none; }
  .living-project[data-stage="2"] .live-loader, .living-project[data-stage="2"] .live-cursor { display: none; }
  .living-project[data-stage="2"] .live-page { opacity: 1; transform: none; filter: none; }
  .journal-panel.dialog-ready .agent-clarifies, .journal-panel.dialog-ready .agent-clarifies button, .journal-panel.dialog-ready .agent-clarifies button span, .journal-panel.plan-building .plan-progress, .journal-panel.plan-building .component-plan article, .journal-panel.plan-building .component-plan article > i, .journal-panel.plan-building .model-note { opacity: 1; transform: none; }
}