:root {
  --bg: #0b101b;
  --surface: #111827;
  --surface-2: #151e2f;
  --surface-3: #1b2639;
  --ink: #eef4ff;
  --muted: #9aa8bd;
  --dim: #61708a;
  --line: rgba(174, 193, 224, 0.15);
  --line-strong: rgba(174, 193, 224, 0.26);
  --blue: #8ab7ff;
  --blue-strong: #4c8dff;
  --teal: #74e2cb;
  --green: #86e2a4;
  --amber: #f0c47a;
  --rose: #f19aaa;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: linear-gradient(rgba(134, 167, 215, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 167, 215, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent 54%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { position: relative; overflow: hidden; }
.ambient { position: absolute; z-index: -1; pointer-events: none; filter: blur(2px); border-radius: 999px; opacity: .55; }
.ambient-one { width: 520px; height: 520px; top: -220px; left: -160px; background: radial-gradient(circle, rgba(75, 125, 255, .25), transparent 67%); }
.ambient-two { width: 680px; height: 680px; top: 760px; right: -330px; background: radial-gradient(circle, rgba(77, 192, 178, .15), transparent 65%); }
.section-pad { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }
.topbar { width: min(1180px, calc(100% - 56px)); height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(138, 183, 255, .6); border-radius: 10px 10px 10px 3px; color: var(--blue); font-size: 18px; font-weight: 800; letter-spacing: -.06em; background: linear-gradient(145deg, rgba(76, 141, 255, .28), rgba(116, 226, 203, .08)); box-shadow: inset 0 0 20px rgba(76, 141, 255, .16); }
.brand strong, .footer-brand strong { display: block; font-size: 13px; letter-spacing: .04em; }
.brand small, .footer-brand small { display: block; color: var(--dim); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.nav-links { display: flex; gap: 28px; color: var(--muted); font-size: 12px; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.public-badge { padding: 8px 12px; border: 1px solid rgba(116, 226, 203, .2); border-radius: 999px; color: var(--teal); font-size: 11px; letter-spacing: .05em; background: rgba(116, 226, 203, .06); white-space: nowrap; }
.status-dot, .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 99px; background: var(--teal); box-shadow: 0 0 0 4px rgba(116, 226, 203, .1), 0 0 15px var(--teal); vertical-align: middle; }
.hero { min-height: 600px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; padding-top: 86px; padding-bottom: 76px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow i { display: block; width: 30px; height: 1px; background: var(--blue-strong); opacity: .7; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(42px, 5vw, 72px); line-height: 1.1; letter-spacing: -.065em; font-weight: 650; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-lede { max-width: 575px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; gap: 12px; align-items: center; margin: 32px 0 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 44px; padding: 0 17px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-size: 12px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(138, 183, 255, .55); }
.button-primary { border-color: rgba(138, 183, 255, .55); background: linear-gradient(135deg, rgba(76, 141, 255, .94), rgba(88, 120, 228, .95)); box-shadow: 0 10px 26px rgba(76, 141, 255, .2); }
.button-primary:hover { background: linear-gradient(135deg, rgba(99, 159, 255, .98), rgba(110, 142, 242, .98)); }
.button-quiet { background: rgba(255, 255, 255, .025); color: var(--muted); }
.button.compact { min-height: 36px; padding: 0 13px; font-size: 11px; }
.hero-note { color: var(--dim); font-size: 11px; }
.lock-icon { color: var(--teal); margin-right: 5px; }
.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.visual-orbit { position: absolute; border: 1px solid rgba(138, 183, 255, .18); border-radius: 50%; transform: rotate(-12deg); }
.orbit-a { width: 330px; height: 330px; box-shadow: 0 0 90px rgba(76, 141, 255, .08); }
.orbit-b { width: 465px; height: 180px; border-color: rgba(116, 226, 203, .18); transform: rotate(35deg); }
.visual-center { position: relative; z-index: 2; display: grid; place-items: center; width: 172px; height: 172px; border: 1px solid rgba(138, 183, 255, .56); border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(76, 141, 255, .35), rgba(17, 24, 39, .96) 63%); box-shadow: 0 0 0 12px rgba(76, 141, 255, .045), 0 0 80px rgba(76, 141, 255, .22); }
.visual-center strong { margin-top: -3px; font-size: 22px; letter-spacing: -.04em; }
.visual-center small { color: var(--teal); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.center-kicker { color: var(--muted); font-size: 9px; letter-spacing: .2em; }
.center-line { display: block; width: 28px; height: 1px; background: var(--blue); opacity: .6; }
.orbit-node { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; color: var(--muted); font-size: 10px; }
.orbit-node b { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--blue); font-size: 10px; background: rgba(17, 24, 39, .95); }
.node-top { top: 10px; left: 50%; transform: translateX(-50%); }
.node-right { right: 15px; top: 43%; }
.node-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.node-left { left: 15px; top: 43%; }
.visual-caption { position: absolute; right: -4px; bottom: -8px; color: var(--dim); font-size: 10px; line-height: 1.7; text-align: right; }
.visual-caption strong { color: var(--muted); font-weight: 500; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr) .9fr; gap: 0; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-item { display: flex; flex-direction: column; gap: 3px; padding: 3px 24px; border-right: 1px solid var(--line); }
.stat-item:first-child { padding-left: 0; }
.stat-item strong { color: var(--ink); font-size: 24px; letter-spacing: -.04em; }
.stat-item span, .stat-note { color: var(--dim); font-size: 10px; letter-spacing: .08em; }
.stat-note { align-self: center; justify-self: end; padding-left: 24px; line-height: 1.8; text-align: right; }
.stat-note span { color: var(--blue); font-size: 9px; }
.demo-section, .agents-section, .workflow-section, .boundary-section, .evidence-section { padding-top: 126px; padding-bottom: 30px; }
.section-heading { margin-bottom: 42px; }
.split-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 60px; }
.split-heading p, .section-heading > p { max-width: 430px; margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.9; }
h2 { margin: 13px 0 0; font-size: clamp(31px, 3.6vw, 48px); line-height: 1.16; letter-spacing: -.06em; font-weight: 620; }
.demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stage-card, .replay-panel, .agent-card, .workflow-card, .boundary-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(21, 30, 47, .86), rgba(15, 22, 35, .88)); box-shadow: var(--shadow); }
.stage-card { min-height: 410px; padding: 25px; border-radius: 12px; }
.card-topline, .panel-head { display: flex; align-items: center; justify-content: space-between; }
.mini-label { color: var(--dim); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.replay-state { color: var(--teal); font-size: 10px; }
.stage-rail { position: relative; display: grid; gap: 0; max-height: 292px; margin: 31px 0 25px; overflow-y: auto; padding-right: 5px; }
.stage-rail::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 11px; width: 1px; background: var(--line-strong); }
.stage-step { position: relative; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 11px; min-height: 30px; color: var(--dim); font-size: 11px; transition: color .3s ease; }
.stage-marker { position: relative; z-index: 1; display: block; width: 9px; height: 9px; margin-left: 7px; border: 1px solid var(--dim); border-radius: 50%; background: var(--surface); }
.stage-step.active { color: var(--ink); }
.stage-step.active .stage-marker { width: 11px; height: 11px; margin-left: 6px; border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 5px rgba(116, 226, 203, .1), 0 0 18px rgba(116, 226, 203, .8); }
.stage-step.done { color: var(--muted); }
.stage-step.done .stage-marker { border-color: var(--blue); background: var(--blue); }
.stage-step.blocked .stage-marker { border-color: var(--amber); background: var(--amber); }
.stage-owner { color: var(--dim); font-size: 9px; }
.demo-controls { display: flex; align-items: center; gap: 9px; }
.control-hint { margin-left: auto; color: var(--dim); font-size: 9px; }
.replay-panel { display: flex; flex-direction: column; min-height: 410px; padding: 25px; border-radius: 12px; background: #0c131f; }
.panel-time { color: var(--dim); font-size: 9px; letter-spacing: .12em; }
.live-dot { background: var(--rose); box-shadow: 0 0 0 4px rgba(241, 154, 170, .1), 0 0 15px rgba(241, 154, 170, .8); }
.log-window { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 13px; min-height: 270px; padding: 20px 0; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.log-line { display: grid; grid-template-columns: 71px 1fr; gap: 10px; line-height: 1.55; animation: fade-up .35s ease both; }
.log-time { color: var(--dim); }
.log-line strong { color: var(--teal); font-weight: 500; }
.log-line .log-warn { color: var(--amber); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.artifact-strip { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--line); }
.artifact-strip > div { display: flex; gap: 10px; align-items: center; }
.artifact-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(138, 183, 255, .25); border-radius: 6px; color: var(--blue); }
.artifact-strip small, .artifact-strip strong { display: block; }
.artifact-strip small { color: var(--dim); font-size: 8px; letter-spacing: .13em; }
.artifact-strip strong { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.artifact-status, .row-status, .status-pill { color: var(--teal); font-size: 9px; letter-spacing: .12em; }
.artifact-status { padding: 5px 8px; border: 1px solid rgba(116, 226, 203, .2); border-radius: 5px; background: rgba(116, 226, 203, .07); }
.artifact-status.blocked, .row-status.blocked, .status-pill.blocked { color: var(--amber); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 24px; }
.filter-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .02); font-size: 10px; cursor: pointer; }
.filter-chip:hover, .filter-chip.active { border-color: rgba(138, 183, 255, .48); color: var(--blue); background: rgba(76, 141, 255, .1); }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.agent-card { position: relative; min-height: 193px; padding: 20px; border-radius: 10px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.agent-card:hover, .agent-card.selected { transform: translateY(-3px); border-color: rgba(138, 183, 255, .5); background: linear-gradient(145deg, rgba(30, 46, 73, .9), rgba(15, 22, 35, .95)); }
.agent-index { color: var(--dim); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .08em; }
.agent-card h3 { margin: 12px 0 7px; font-size: 16px; letter-spacing: -.03em; }
.agent-role { min-height: 46px; margin-bottom: 16px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.agent-meta { display: flex; gap: 6px; align-items: center; }
.model-tag, .group-tag { padding: 4px 7px; border-radius: 4px; font-size: 8px; letter-spacing: .08em; }
.model-tag { color: var(--teal); background: rgba(116, 226, 203, .09); }
.group-tag { color: var(--blue); background: rgba(138, 183, 255, .08); }
.agent-arrow { position: absolute; top: 20px; right: 20px; color: var(--dim); font-size: 15px; }
.agent-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; padding: 19px 20px; border: 1px solid rgba(138, 183, 255, .32); border-radius: 10px; background: rgba(76, 141, 255, .07); }
.agent-detail h4 { margin: 0 0 6px; color: var(--blue); font-size: 9px; letter-spacing: .12em; }
.agent-detail p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.detail-title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.detail-title strong { font-size: 15px; }
.detail-close { border: 0; color: var(--muted); background: none; cursor: pointer; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.workflow-card { min-height: 220px; padding: 22px; border-radius: 10px; }
.workflow-number { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.workflow-card h3 { margin: 31px 0 9px; font-size: 17px; }
.workflow-card p { min-height: 76px; margin-bottom: 20px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.workflow-tag { color: var(--dim); font-size: 9px; letter-spacing: .15em; }
.boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.boundary-card { display: flex; gap: 15px; min-height: 246px; padding: 24px; border-radius: 10px; }
.boundary-card h3 { margin: 0 0 17px; font-size: 16px; }
.boundary-icon { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border-radius: 50%; font-size: 15px; font-weight: 700; }
.boundary-card.can { border-color: rgba(116, 226, 203, .25); }.boundary-card.can .boundary-icon { color: var(--teal); background: rgba(116, 226, 203, .1); }
.boundary-card.gate { border-color: rgba(240, 196, 122, .25); }.boundary-card.gate .boundary-icon { color: var(--amber); background: rgba(240, 196, 122, .1); }
.boundary-card.cannot { border-color: rgba(241, 154, 170, .22); }.boundary-card.cannot .boundary-icon { color: var(--rose); background: rgba(241, 154, 170, .1); }
.boundary-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 11px; }
.boundary-card li::before { content: "—"; margin-right: 7px; color: var(--dim); }
.evidence-section { padding-top: 126px; padding-bottom: 126px; }
.evidence-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 58px; padding: 42px; border: 1px solid rgba(116, 226, 203, .2); border-radius: 14px; background: linear-gradient(130deg, rgba(18, 44, 51, .47), rgba(16, 24, 39, .86) 50%, rgba(27, 31, 60, .65)); }
.evidence-copy h2 { margin-bottom: 17px; }
.evidence-copy p { max-width: 380px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.evidence-meta { display: flex; gap: 9px; margin-top: 23px; }
.status-pill { padding: 6px 9px; border: 1px solid rgba(116, 226, 203, .22); border-radius: 5px; background: rgba(116, 226, 203, .08); }
.status-pill.blocked { border-color: rgba(240, 196, 122, .26); background: rgba(240, 196, 122, .08); }
.evidence-list { display: grid; align-content: center; gap: 0; }
.evidence-row { display: grid; grid-template-columns: 63px 1fr auto; align-items: center; gap: 14px; min-height: 72px; border-bottom: 1px solid var(--line); }
.evidence-row:last-child { border-bottom: 0; }
.evidence-code { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.evidence-row strong, .evidence-row small { display: block; }
.evidence-row strong { font-size: 12px; font-weight: 550; }
.evidence-row small { margin-top: 4px; color: var(--dim); font-size: 10px; }
.row-status { color: var(--green); }.row-status.blocked { color: var(--amber); }
.footer { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; padding-bottom: 34px; border-top: 1px solid var(--line); }
.footer-note { color: var(--dim); font-size: 10px; line-height: 1.8; text-align: right; }.footer-note span { color: #4d5b73; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 67px; }.hero-visual { min-height: 390px; }.split-heading { grid-template-columns: 1fr; gap: 20px; }.demo-layout, .evidence-panel { grid-template-columns: 1fr; }.agent-grid { grid-template-columns: repeat(2, 1fr); }.workflow-grid { grid-template-columns: repeat(2, 1fr); }.boundary-grid { grid-template-columns: 1fr; }.evidence-panel { gap: 28px; }
}
@media (max-width: 620px) {
  .section-pad, .topbar { width: min(100% - 32px, 1180px); }.topbar { height: 74px; }.nav-links { display: none; }.public-badge { font-size: 9px; padding: 7px 8px; }.brand strong { font-size: 11px; }.brand small { font-size: 8px; }.hero { min-height: auto; padding-top: 62px; padding-bottom: 55px; }.hero-lede { font-size: 14px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.hero-visual { min-height: 360px; transform: scale(.82); margin: -22px 0; }.visual-caption { right: 0; }.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 17px 0; }.stat-item { padding: 2px 13px; }.stat-item:nth-child(3) { padding-left: 0; }.stat-item:nth-child(2) { border-right: 0; }.stat-item:nth-child(4) { border-right: 0; }.stat-note { display: none; }.demo-section, .agents-section, .workflow-section, .boundary-section, .evidence-section { padding-top: 85px; }.agent-grid, .workflow-grid { grid-template-columns: 1fr; }.stage-card, .replay-panel { padding: 18px; }.stage-card { min-height: 390px; }.control-hint { display: none; }.agent-detail { grid-template-columns: 1fr; }.detail-title { grid-column: auto; }.evidence-panel { padding: 25px 20px; }.evidence-row { grid-template-columns: 45px 1fr; gap: 9px; padding: 10px 0; }.row-status { grid-column: 2; }.footer { align-items: flex-start; flex-direction: column; gap: 20px; }.footer-note { text-align: left; }.evidence-meta { flex-wrap: wrap; }
}