/* =========================================================
   IntelligenceOS — Technical Demonstration
   Design tokens: instrument-panel aesthetic
   ========================================================= */

:root{
  --ink:#06070A;
  --panel:#0B0D13;
  --panel-2:#101319;
  --raise:#151922;
  --line:#1B2029;
  --line-2:#262C38;
  --text:#E8EBF2;
  --muted:#98A1B4;
  --dim:#697184;
  --signal:#6E8BFF;
  --signal-soft:rgba(110,139,255,.12);
  --verify:#35CFA8;
  --verify-soft:rgba(53,207,168,.12);
  --warn:#E8B14A;
  --warn-soft:rgba(232,177,74,.12);
  --rose:#F2788F;

  --font-display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --wrap:1220px;
  --pad:clamp(20px,4vw,40px);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.9);
  --grid-line:rgba(255,255,255,.028);
}

html[data-theme="light"]{
  --ink:#F7F8FA;
  --panel:#FFFFFF;
  --panel-2:#FBFCFD;
  --raise:#F2F4F8;
  --line:#E3E7ED;
  --line-2:#D2D8E2;
  --text:#10131A;
  --muted:#5A6376;
  --dim:#818B9E;
  --signal:#3F5FE0;
  --signal-soft:rgba(63,95,224,.09);
  --verify:#0E9C7B;
  --verify-soft:rgba(14,156,123,.1);
  --warn:#A9720B;
  --warn-soft:rgba(169,114,11,.1);
  --rose:#C7405C;
  --shadow:0 1px 2px rgba(16,19,26,.04), 0 20px 50px -35px rgba(16,19,26,.35);
  --grid-line:rgba(16,19,26,.035);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:150px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-body); font-size:15.5px; line-height:1.62;
  font-feature-settings:"cv05" 1,"ss01" 1; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.14; margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:4px}

/* ---------- confidential banner ---------- */
.confbar{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(90deg, var(--warn-soft), transparent 45%, var(--warn-soft));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
html[data-theme="dark"] .confbar{background:linear-gradient(90deg, rgba(232,177,74,.10), rgba(6,7,10,.85) 45%, rgba(232,177,74,.10))}
.confbar__inner{
  max-width:var(--wrap); margin:0 auto; padding:9px var(--pad);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.confbar__tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em; font-weight:600;
  color:var(--warn); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.confbar__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft); animation:breathe 2.6s ease-in-out infinite}
.confbar__text{font-size:12.2px; color:var(--muted); line-height:1.45; max-width:900px}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- nav ---------- */
.nav{position:sticky; top:41px; z-index:50; background:color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--line)}
.nav__inner{max-width:var(--wrap); margin:0 auto; padding:10px var(--pad); display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand__mark{width:30px;height:30px;color:var(--signal); display:block}
.brand__mark svg{width:100%;height:100%; animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__text strong{font-family:var(--font-display); font-size:15px; letter-spacing:-.01em}
.brand__text em{font-family:var(--font-mono); font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.nav__links{display:flex; gap:2px; margin-left:auto}
.nav__links a{
  font-size:13.2px; color:var(--muted); padding:7px 11px; border-radius:var(--r-sm);
  transition:color .18s, background .18s; position:relative;
}
.nav__links a:hover{color:var(--text); background:var(--raise)}
.nav__links a.is-active{color:var(--text)}
.nav__links a.is-active::after{content:""; position:absolute; left:11px; right:11px; bottom:1px; height:1.5px; background:var(--signal); border-radius:2px}
.nav__actions{display:flex; gap:8px; align-items:center}
.icon-btn{
  width:34px;height:34px; display:grid; place-items:center; background:transparent;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); cursor:pointer;
  transition:.18s;
}
.icon-btn:hover{color:var(--text); border-color:var(--line-2); background:var(--raise)}
.icon-btn svg{width:18px;height:18px}
html[data-theme="dark"] .icon-sun{display:none}
html[data-theme="light"] .icon-moon{display:none}
.menu-btn{display:none; flex-direction:column; gap:4px}
.menu-btn span{width:15px;height:1.5px;background:currentColor; border-radius:2px; transition:.2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav__progress{height:1.5px; background:transparent}
.nav__progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--signal),var(--verify)); transition:width .1s linear}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--r-md);
  font-size:14px; font-weight:500; border:1px solid transparent; cursor:pointer; transition:.2s;
  background:transparent;
}
.btn svg{width:15px;height:15px; transition:transform .2s}
.btn--primary{background:var(--signal); color:#fff; border-color:var(--signal); box-shadow:0 12px 30px -14px var(--signal)}
.btn--primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn--primary:hover svg{transform:translateX(3px)}
.btn--ghost{border-color:var(--line-2); color:var(--text); background:var(--panel)}
.btn--ghost:hover{background:var(--raise); border-color:var(--signal)}
.btn--sm{padding:8px 14px; font-size:13px}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important}

/* ---------- shared section furniture ---------- */
.section{padding:clamp(64px,8vw,112px) 0; position:relative; border-top:1px solid var(--line)}
.section--tint{background:var(--panel-2)}
.sec-head{max-width:760px; margin-bottom:clamp(32px,4vw,52px)}
.sec-head--split{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}
.sec-head--split > div{max-width:760px}
.sec-head--center{max-width:720px; margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(27px,3.4vw,40px); margin-bottom:14px}
.sec-lede{color:var(--muted); font-size:16px; max-width:70ch}
.sec-lede em{color:var(--text); font-style:normal; font-weight:500}
.eyebrow{
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--signal);
  margin-bottom:16px; font-weight:500;
}
.eyebrow--center{justify-content:center}
.eyebrow__rule{width:26px;height:1px;background:var(--signal); opacity:.55; display:block}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.panel--inset{background:var(--panel-2); box-shadow:none}
.tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:100px; border:1px solid var(--line-2); color:var(--muted);
}
.tag--signal{color:var(--signal); border-color:color-mix(in srgb, var(--signal) 35%, transparent); background:var(--signal-soft)}
.tag--warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 35%, transparent); background:var(--warn-soft)}
.tag--muted{color:var(--dim)}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px); overflow:hidden}
.hero__grid-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 25%, #000 20%, transparent 78%);
}
.hero__inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
.hero__title{font-size:clamp(36px,5.4vw,62px); letter-spacing:-.035em; margin-bottom:18px}
.grad{background:linear-gradient(100deg,var(--signal) 10%, var(--verify) 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{font-size:clamp(16px,1.6vw,18.5px); color:var(--muted); max-width:52ch}
.badges{display:flex; flex-wrap:wrap; gap:7px; margin:26px 0}
.badges li{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--line-2); border-radius:100px; color:var(--muted);
  background:var(--panel); transition:.2s;
}
.badges li:hover{color:var(--signal); border-color:color-mix(in srgb, var(--signal) 45%, transparent); background:var(--signal-soft)}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__stats{display:flex; gap:30px; flex-wrap:wrap; margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}
.hero__stats dt{font-family:var(--font-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); margin-bottom:5px}
.hero__stats dd{font-family:var(--font-display); font-size:17px; font-weight:500}

/* signature lattice */
.lattice{margin:0}
.lattice__frame{border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--panel),var(--panel-2)); overflow:hidden; box-shadow:var(--shadow)}
.lattice__hud{display:flex; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line)}
.lattice__hud-right{display:inline-flex; align-items:center; gap:7px; color:var(--verify)}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--verify); animation:breathe 1.8s ease-in-out infinite}
.lattice__svg{display:block; width:100%; height:auto}
.lat-doc rect{fill:none; stroke:var(--line-2); stroke-width:1.2}
.lat-doc line{stroke:var(--muted); stroke-width:1.6; opacity:.35; stroke-linecap:round}
.lat-doc{animation:docFloat 6s ease-in-out infinite}
.lat-doc[data-i="1"]{animation-delay:-2s}
.lat-doc[data-i="2"]{animation-delay:-4s}
@keyframes docFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lat-flow path{fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:4 7; animation:dash 3.2s linear infinite}
.lat-flow--2 path{stroke:color-mix(in srgb, var(--signal) 55%, transparent); animation-duration:2.2s}
@keyframes dash{to{stroke-dashoffset:-22}}
.lat-cell{fill:var(--signal); opacity:.14}
.lat-cell.hot{animation:cellHot 3.4s ease-in-out infinite}
@keyframes cellHot{0%,100%{opacity:.12}45%{opacity:.85}}
.lat-core .ring{fill:none; stroke:color-mix(in srgb, var(--signal) 45%, transparent); stroke-width:1.1; transform-origin:424px 200px}
.lat-core .ring--1{stroke-dasharray:3 9; animation:spinSlow 24s linear infinite}
.lat-core .ring--2{stroke-dasharray:24 12; animation:spinSlow 16s linear infinite reverse; opacity:.75}
.lat-core .ring--3{stroke-dasharray:2 6; animation:spinSlow 10s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.lat-core .nucleus{fill:var(--signal); animation:breathe 2.4s ease-in-out infinite}
.lat-beam{stroke:url(#beam); stroke-width:2; fill:none; stroke-dasharray:14 60; animation:beamDown 2.6s linear infinite}
@keyframes beamDown{to{stroke-dashoffset:-74}}
.lat-answer{fill:var(--verify-soft); stroke:color-mix(in srgb, var(--verify) 45%, transparent); stroke-width:1}
.lat-answer-line{stroke:var(--verify); stroke-width:2; stroke-linecap:round; stroke-dasharray:96; stroke-dashoffset:96; animation:writeIn 2.6s ease-in-out infinite}
@keyframes writeIn{0%{stroke-dashoffset:96}50%,100%{stroke-dashoffset:0}}
.lattice__legend{display:flex; gap:18px; padding:11px 14px; border-top:1px solid var(--line); flex-wrap:wrap}
.lattice__legend span{display:inline-flex; align-items:center; gap:7px}
.lattice__legend i{width:8px;height:2px;border-radius:2px; display:block}

/* =========================================================
   3 · STACK (concept)
   ========================================================= */
.stack{display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:clamp(20px,3vw,36px); align-items:start}
.stack__rail{position:relative; padding-left:4px}
.stack__rail::before{content:""; position:absolute; left:16px; top:22px; bottom:22px; width:1px; background:var(--line)}
.stage{position:relative; display:flex; gap:14px; align-items:center; width:100%; text-align:left; padding:9px 12px 9px 0; background:none; border:0; cursor:pointer; border-radius:var(--r-sm); transition:.2s}
.stage:hover{background:var(--raise)}
.stage__node{
  position:relative; z-index:1; flex-shrink:0; width:25px;height:25px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--panel); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:9.5px; color:var(--dim); transition:.25s;
}
.stage__name{font-size:14.5px; color:var(--muted); transition:.2s; font-weight:450}
.stage.is-active .stage__node{border-color:var(--signal); color:var(--signal); background:var(--signal-soft); box-shadow:0 0 0 4px var(--signal-soft)}
.stage.is-active .stage__name{color:var(--text); font-weight:500}
.stage__flag{margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); opacity:0; transition:.2s}
.stage.is-active .stage__flag{opacity:1; color:var(--signal)}
.stack__detail{padding:clamp(22px,3vw,34px); min-height:340px}
.sd__top{display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.sd__idx{font-family:var(--font-mono); font-size:11px; color:var(--signal); letter-spacing:.1em}
.sd h3{font-size:24px; margin:6px 0 12px}
.sd__desc{color:var(--muted); margin-bottom:22px; max-width:62ch}
.sd__points{display:grid; gap:11px; margin-bottom:22px}
.sd__points li{display:flex; gap:11px; font-size:14.5px; color:var(--muted); line-height:1.55}
.sd__points li::before{content:""; flex-shrink:0; width:5px;height:5px;border-radius:1px; background:var(--signal); margin-top:9px; transform:rotate(45deg)}
.sd__points strong{color:var(--text); font-weight:500}
.sd__chips{display:flex; flex-wrap:wrap; gap:7px; padding-top:20px; border-top:1px solid var(--line)}
.sd__chips span{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:5px 9px; border-radius:var(--r-sm); background:var(--raise); color:var(--muted); border:1px solid var(--line)}
.fade-swap{animation:fadeSwap .34s ease}
@keyframes fadeSwap{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* =========================================================
   4 · WORKSPACE
   ========================================================= */
.ws{display:grid; grid-template-columns:262px 1fr; overflow:hidden}
.ws__side{border-right:1px solid var(--line); background:var(--panel-2); padding:18px; display:flex; flex-direction:column; gap:18px}
.ws__side-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.ws__side-head h3{font-size:13px; letter-spacing:.01em}
.ws__sources{display:grid; gap:4px}
.src{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:var(--r-sm); border:1px solid transparent; background:none; cursor:pointer; text-align:left; transition:.18s}
.src:hover{background:var(--raise)}
.src__box{width:15px;height:15px;border-radius:4px;border:1px solid var(--line-2); flex-shrink:0; display:grid; place-items:center; transition:.18s}
.src__box svg{width:9px;height:9px; color:#fff; opacity:0; transition:.18s}
.src.is-on .src__box{background:var(--signal); border-color:var(--signal)}
.src.is-on .src__box svg{opacity:1}
.src__body{min-width:0}
.src__name{font-size:13.4px; display:block; color:var(--muted); transition:.18s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.src.is-on .src__name{color:var(--text)}
.src__meta{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; color:var(--dim)}
.src.is-locked{opacity:.45; cursor:not-allowed}
.src.is-locked .src__box{border-style:dashed}
.src.is-locked .src__meta{color:var(--warn)}
.src.is-hit{animation:hit .8s ease}
@keyframes hit{0%,100%{background:transparent}30%{background:var(--signal-soft)}}
.ws__scope{margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.ws__scope-label{margin-bottom:7px}
.ws__scope p{font-size:12.4px; color:var(--dim); line-height:1.55}
.ws__role{display:flex; align-items:center; gap:8px; margin-top:12px}
.ws__role select{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:6px 8px; font-size:12.5px; flex:1; cursor:pointer}
.ws__main{display:flex; flex-direction:column; min-width:0}
.ws__bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--panel)}
.ws__tabs{display:flex; gap:2px}
.ws__tab{background:none; border:0; border-bottom:2px solid transparent; padding:13px 12px; font-size:13.2px; color:var(--dim); cursor:pointer; transition:.18s; display:inline-flex; align-items:center; gap:7px}
.ws__tab:hover{color:var(--text)}
.ws__tab.is-active{color:var(--text); border-bottom-color:var(--signal)}
.ws__tab .count{font-family:var(--font-mono); font-size:10px; padding:1px 6px; border-radius:100px; background:var(--raise); color:var(--muted)}
.ws__state{color:var(--dim)}
.ws__state.is-live{color:var(--signal)}
.ws__state.is-done{color:var(--verify)}
.ws__query{padding:16px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.ws__query textarea{
  width:100%; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:12px 14px; font-size:14.5px; resize:vertical; line-height:1.5; transition:.2s;
}
.ws__query textarea:focus{border-color:var(--signal); outline:none; box-shadow:0 0 0 3px var(--signal-soft)}
.ws__query-actions{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:11px; flex-wrap:wrap}
.ws__chips{display:flex; gap:6px; flex-wrap:wrap}
.ws__chips button{
  font-size:12.2px; padding:5px 10px; border-radius:100px; border:1px dashed var(--line-2);
  background:none; color:var(--dim); cursor:pointer; transition:.18s;
}
.ws__chips button:hover{color:var(--signal); border-color:var(--signal); border-style:solid; background:var(--signal-soft)}
.ws__stages{display:flex; gap:0; padding:0 16px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.ws__stages::-webkit-scrollbar{display:none}
.ws__stages[aria-hidden="true"]{display:none}
.wst{display:flex; align-items:center; gap:8px; padding:10px 14px 10px 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.wst::after{content:""; width:16px; height:1px; background:var(--line-2); margin-left:8px}
.wst:last-child::after{display:none}
.wst i{width:6px;height:6px;border-radius:50%; background:var(--line-2); flex-shrink:0; transition:.3s}
.wst.is-run i{background:var(--signal); box-shadow:0 0 0 4px var(--signal-soft); animation:breathe 1s ease-in-out infinite}
.wst.is-run{color:var(--signal)}
.wst.is-done i{background:var(--verify)}
.wst.is-done{color:var(--muted)}
.ws__panels{position:relative; min-height:400px}
.ws__panel{display:none; padding:22px}
.ws__panel.is-active{display:block; animation:fadeSwap .3s ease}
.ws__panel-note{font-size:13px; color:var(--dim); margin-bottom:16px; max-width:74ch}
.ws__empty{display:grid; place-items:center; gap:14px; padding:70px 20px; text-align:center; color:var(--dim)}
.ws__empty svg{width:40px;height:40px}
.ws__empty p{max-width:36ch; font-size:14px}
.ws__answer h4{font-size:12px; font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin:26px 0 10px; font-weight:600}
.ws__answer h4:first-child{margin-top:0}
.ws__answer p{font-size:15px; line-height:1.7; color:var(--text); margin-bottom:12px; max-width:78ch}
.ws__answer ol.num{counter-reset:f; display:grid; gap:14px; margin-bottom:12px}
.ws__answer ol.num li{position:relative; padding-left:38px; font-size:14.6px; line-height:1.65; color:var(--muted); max-width:78ch}
.ws__answer ol.num li::before{
  counter-increment:f; content:counter(f,decimal-leading-zero);
  position:absolute; left:0; top:1px; font-family:var(--font-mono); font-size:10.5px; color:var(--signal);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:2px 5px; background:var(--panel-2);
}
.ws__answer ol.num strong{color:var(--text); font-weight:550}
.ws__answer .ev{display:grid; gap:8px; margin-bottom:14px}
.ws__answer .ev li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); font-size:14px; color:var(--muted)}
.ws__answer .ev .val{font-family:var(--font-mono); font-size:13px; color:var(--verify); font-weight:500; white-space:nowrap}
.ws__answer .cite{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--signal);
  border:1px solid color-mix(in srgb,var(--signal) 30%,transparent); background:var(--signal-soft);
  padding:1px 5px; border-radius:4px; margin-left:5px; white-space:nowrap; cursor:help;
}
.caret{display:inline-block; width:7px;height:15px; background:var(--signal); vertical-align:-2px; margin-left:2px; animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ws__meta{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.ws__conf-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.ws__conf-head strong{font-family:var(--font-display); font-size:20px; color:var(--verify)}
.meter{height:5px; border-radius:100px; background:var(--raise); overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--signal),var(--verify)); border-radius:100px; transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.ws__conf-note{font-size:12.3px; color:var(--dim); margin-top:9px; line-height:1.5}
.ws__sources-out{display:flex; flex-direction:column; gap:10px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips span{
  display:inline-flex; align-items:center; gap:7px; font-size:12.4px; padding:6px 11px;
  border-radius:100px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted);
  animation:fadeSwap .4s ease backwards;
}
.chips span::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--signal)}
/* retrieved context */
.ctx{display:grid; gap:10px}
.ctxc{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel-2); animation:fadeSwap .4s ease backwards}
.ctxc__head{display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; user-select:none}
.ctxc__rank{font-family:var(--font-mono); font-size:10px; color:var(--dim); width:22px}
.ctxc__src{font-size:13.4px; font-weight:500}
.ctxc__doc{font-size:12.3px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctxc__score{margin-left:auto; display:flex; align-items:center; gap:9px; flex-shrink:0}
.ctxc__score .bar{width:54px; height:4px; border-radius:100px; background:var(--raise); overflow:hidden}
.ctxc__score .bar i{display:block; height:100%; background:var(--signal); border-radius:100px}
.ctxc__score .num{font-family:var(--font-mono); font-size:11.5px; color:var(--signal)}
.ctxc__body{display:none; padding:0 14px 14px 48px; font-size:13.6px; color:var(--muted); line-height:1.65; border-top:1px solid var(--line); padding-top:12px}
.ctxc.is-open .ctxc__body{display:block; animation:fadeSwap .25s ease}
.ctxc__tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.ctxc__tags span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line); padding:3px 7px; border-radius:4px}
/* trace */
.trace{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.trace li{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:11px 14px; background:var(--panel); font-size:13.6px; animation:fadeSwap .3s ease backwards}
.trace .t-op{font-family:var(--font-mono); font-size:11.5px; color:var(--signal); text-transform:none}
.trace .t-desc{color:var(--muted)}
.trace .t-ms{font-family:var(--font-mono); font-size:11.5px; color:var(--dim)}

/* =========================================================
   5 · FLOW
   ========================================================= */
.flow{display:grid; gap:22px}
.flow__track{display:grid; grid-template-columns:repeat(10,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
.fs{position:relative; padding:16px 12px 18px; background:none; border:0; border-right:1px solid var(--line); text-align:left; cursor:pointer; transition:.25s; overflow:hidden}
.fs:last-child{border-right:0}
.fs::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--signal),var(--verify)); transition:width .3s}
.fs:hover{background:var(--raise)}
.fs.is-active{background:var(--signal-soft)}
.fs.is-active::after{width:100%}
.fs.is-past::after{width:100%; background:var(--line-2)}
.fs__num{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--dim); display:block; margin-bottom:9px}
.fs.is-active .fs__num{color:var(--signal)}
.fs__name{font-size:13px; line-height:1.35; color:var(--muted); font-weight:450; display:block}
.fs.is-active .fs__name{color:var(--text); font-weight:500}
.flow__detail{padding:clamp(22px,3vw,32px); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,40px)}
.fd__label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--signal); margin-bottom:10px}
.fd h3{font-size:23px; margin-bottom:12px}
.fd__desc{color:var(--muted); margin-bottom:20px; font-size:15px}
.fd__points{display:grid; gap:10px}
.fd__points li{font-size:14.2px; color:var(--muted); display:flex; gap:10px; line-height:1.55}
.fd__points li::before{content:"→"; color:var(--signal); flex-shrink:0}
.fd__aside{border-left:1px solid var(--line); padding-left:clamp(18px,2.5vw,32px)}
.fd__aside h4{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; font-weight:500}
.fd__io{display:grid; gap:12px; margin-bottom:22px}
.fd__io div{border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; background:var(--panel-2)}
.fd__io dt{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin-bottom:4px}
.fd__io dd{font-size:13.4px; color:var(--text); font-family:var(--font-mono)}
.fd__chips{display:flex; flex-wrap:wrap; gap:6px}
.fd__chips span{font-family:var(--font-mono); font-size:10px; padding:4px 8px; border-radius:4px; background:var(--raise); color:var(--muted); border:1px solid var(--line)}

/* =========================================================
   6 · ARCHITECTURE
   ========================================================= */
.arch{overflow:hidden; margin-bottom:44px}
.arch__tabs{display:flex; border-bottom:1px solid var(--line); background:var(--panel-2)}
.arch__tab{background:none; border:0; border-bottom:2px solid transparent; padding:14px 20px; font-size:13.6px; color:var(--dim); cursor:pointer; transition:.18s}
.arch__tab:hover{color:var(--text)}
.arch__tab.is-active{color:var(--text); border-bottom-color:var(--signal); background:var(--panel)}
.arch__body{display:grid; grid-template-columns:1fr 300px; gap:0}
.arch__chain{padding:clamp(20px,3vw,30px); display:grid; gap:0; position:relative}
.ar{position:relative; display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:center; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel-2); cursor:pointer; transition:.22s; margin-bottom:26px}
.ar:last-child{margin-bottom:0}
.ar::after{
  content:""; position:absolute; left:31px; top:100%; height:26px; width:1px;
  background:linear-gradient(180deg,var(--line-2),var(--line-2));
}
.ar:last-child::after{display:none}
.ar__pk{position:absolute; left:29px; top:100%; width:5px;height:5px;border-radius:50%; background:var(--signal); opacity:0}
.ar.is-flow .ar__pk{animation:pk 1s linear}
@keyframes pk{0%{opacity:1; transform:translateY(0)}100%{opacity:0; transform:translateY(26px)}}
.ar:hover{border-color:var(--line-2); background:var(--raise)}
.ar.is-active{border-color:var(--signal); background:var(--signal-soft); box-shadow:0 0 0 3px var(--signal-soft)}
.ar__ico{width:34px;height:34px; border-radius:var(--r-sm); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--signal); background:var(--panel)}
.ar__ico svg{width:16px;height:16px}
.ar__name{font-size:14.6px; font-weight:500; display:block}
.ar__sub{font-size:12.6px; color:var(--dim)}
.ar__tech{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--dim); text-align:right; white-space:nowrap}
.arch__note{border-left:1px solid var(--line); border-radius:0; padding:clamp(20px,3vw,28px); border-top:0; border-right:0; border-bottom:0}
.an__k{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin-bottom:10px}
.an h4{font-size:18px; margin-bottom:11px}
.an p{font-size:13.8px; color:var(--muted); line-height:1.65; margin-bottom:16px}
.an ul{display:grid; gap:8px}
.an li{font-size:13px; color:var(--muted); display:flex; gap:9px}
.an li::before{content:""; width:4px;height:4px;border-radius:50%; background:var(--signal); margin-top:8px; flex-shrink:0}
.concepts__title{margin-bottom:16px}
.concepts__grid{display:flex; flex-wrap:wrap; gap:8px}
.concepts__grid li{
  font-family:var(--font-mono); font-size:11.5px; padding:8px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel); color:var(--muted); transition:.2s;
}
.concepts__grid li:hover{color:var(--signal); border-color:color-mix(in srgb,var(--signal) 40%,transparent); background:var(--signal-soft); transform:translateY(-2px)}

/* =========================================================
   7 · COMPARE
   ========================================================= */
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:34px}
.cmp__card{padding:clamp(20px,2.6vw,28px)}
.cmp__card header{display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-bottom:22px}
.cmp__card h3{font-size:20px}
.cmp__card--accent{border-color:color-mix(in srgb,var(--signal) 28%,var(--line))}
.cmp__flow{display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:16px; border:1px dashed var(--line-2); border-radius:var(--r-md); margin-bottom:22px; background:var(--panel-2)}
.cn{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--panel); color:var(--muted); white-space:nowrap}
.cn--sig{color:var(--signal); border-color:color-mix(in srgb,var(--signal) 35%,transparent); background:var(--signal-soft)}
.cn--ver{color:var(--verify); border-color:color-mix(in srgb,var(--verify) 35%,transparent); background:var(--verify-soft)}
.carr{color:var(--dim); font-size:12px}
.cmp__list{display:grid; gap:10px}
.cmp__list li{font-size:14.2px; color:var(--muted); display:flex; gap:11px; line-height:1.55}
.cmp__list li::before{flex-shrink:0; font-family:var(--font-mono); font-size:12px; margin-top:1px}
.cmp__list--limits li::before{content:"—"; color:var(--rose)}
.cmp__list--gains li::before{content:"✓"; color:var(--verify)}
.cmp__table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; font-size:14px}
.cmp__table th{
  text-align:left; padding:13px 16px; font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); background:var(--panel-2); border-bottom:1px solid var(--line); font-weight:500;
}
.cmp__table td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top}
.cmp__table tr:last-child td{border-bottom:0}
.cmp__table td:first-child{color:var(--text); font-weight:500}
.cmp__table td:last-child{color:var(--text)}
.cmp__table tbody tr:hover td{background:var(--raise)}

/* =========================================================
   8 · AGENTS
   ========================================================= */
.agents{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}
.agents__map{padding:clamp(22px,3vw,34px)}
.agents__supervisor{
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:18px 20px; background:var(--panel-2);
  max-width:520px; margin:0 auto; text-align:center; transition:.3s;
}
.agents__supervisor.is-on{border-color:var(--signal); background:var(--signal-soft); box-shadow:0 0 0 4px var(--signal-soft)}
.agents__supervisor strong{display:block; font-family:var(--font-display); font-size:19px; margin:6px 0 8px}
.agents__supervisor p{font-size:13.4px; color:var(--muted); max-width:46ch; margin-inline:auto}
.agents__spine{height:34px; display:grid; place-items:center}
.agents__spine i{width:1px; height:100%; background:var(--line-2); display:block; position:relative; overflow:visible}
.agents__row{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; position:relative; padding-top:16px}
.agents__row::before{content:""; position:absolute; top:0; left:10%; right:10%; height:1px; background:var(--line-2)}
.ag{position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 14px; background:var(--panel-2); transition:.3s}
.ag::before{content:""; position:absolute; top:-16px; left:50%; width:1px; height:16px; background:var(--line-2)}
.ag__ico{width:30px;height:30px;border-radius:var(--r-sm); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--muted); margin-bottom:11px; transition:.3s}
.ag__ico svg{width:15px;height:15px}
.ag h4{font-size:13.6px; margin-bottom:7px; line-height:1.25}
.ag p{font-size:12.4px; color:var(--dim); line-height:1.5}
.ag.is-on{border-color:var(--signal); background:var(--signal-soft); transform:translateY(-3px)}
.ag.is-on .ag__ico{color:var(--signal); border-color:var(--signal); background:var(--panel)}
.ag.is-done{border-color:color-mix(in srgb,var(--verify) 32%,transparent)}
.ag.is-done .ag__ico{color:var(--verify)}
.agents__log{padding:18px; min-height:330px}
.agents__log-head{display:flex; justify-content:space-between; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
#agentStatus{color:var(--signal)}
.agents__log ol{display:grid; gap:10px}
.agents__log li{display:grid; grid-template-columns:auto 1fr; gap:11px; font-size:13.2px; color:var(--muted); line-height:1.5; animation:fadeSwap .3s ease backwards}
.agents__log li .ts{font-family:var(--font-mono); font-size:10.5px; color:var(--dim); padding-top:2px}
.agents__log li strong{color:var(--text); font-weight:500}
.agents__log .empty{color:var(--dim); font-size:13px; display:block}

/* =========================================================
   9 · SECURITY
   ========================================================= */
.principle{
  margin:0 0 34px; padding:clamp(22px,3vw,34px); border:1px solid var(--line);
  border-left:2px solid var(--signal); border-radius:var(--r-md);
  background:linear-gradient(100deg,var(--signal-soft),transparent 60%);
}
.principle p{font-family:var(--font-display); font-size:clamp(17px,2.2vw,23px); line-height:1.45; letter-spacing:-.015em; max-width:60ch}
.sec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.sc{border:1px solid var(--line); border-radius:var(--r-md); padding:18px; background:var(--panel); transition:.22s}
.sc:hover{border-color:var(--line-2); transform:translateY(-2px)}
.sc__head{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.sc__ico{width:28px;height:28px;border-radius:var(--r-sm); display:grid; place-items:center; background:var(--signal-soft); color:var(--signal); flex-shrink:0}
.sc__ico svg{width:14px;height:14px}
.sc h3{font-size:14.4px}
.sc p{font-size:13.2px; color:var(--muted); line-height:1.6}

/* =========================================================
   10 · OBSERVABILITY
   ========================================================= */
.obs{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-bottom:20px}
.ob{border:1px solid var(--line); border-radius:var(--r-md); padding:17px; background:var(--panel); position:relative; overflow:hidden}
.ob__label{font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin-bottom:9px}
.ob__val{font-family:var(--font-display); font-size:28px; font-weight:500; letter-spacing:-.02em; display:flex; align-items:baseline; gap:4px}
.ob__val .unit{font-size:14px; color:var(--muted); font-weight:400}
.ob__delta{font-family:var(--font-mono); font-size:10.5px; margin-top:6px}
.ob__delta.up{color:var(--verify)} .ob__delta.down{color:var(--rose)} .ob__delta.flat{color:var(--dim)}
.ob__spark{margin-top:12px; height:34px; width:100%; display:block; overflow:visible}
.ob__spark path.l{fill:none; stroke:var(--signal); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round}
.ob__spark path.a{fill:url(#sparkfill); opacity:.16}
.obs__strip{padding:20px}
.obs__strip-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; gap:12px; flex-wrap:wrap}
.obs__strip-head h3{font-size:15px}
.obs__bars{display:flex; align-items:flex-end; gap:5px; height:110px}
.obs__bars i{
  flex:1; background:linear-gradient(180deg,var(--signal),color-mix(in srgb,var(--signal) 25%,transparent));
  border-radius:3px 3px 0 0; height:0; transition:height .9s cubic-bezier(.2,.7,.3,1); position:relative;
}
.obs__bars i:hover{background:var(--verify)}
.obs__disclaimer{font-size:12.4px; color:var(--dim); margin-top:16px; max-width:80ch}

/* =========================================================
   11 · ROADMAP
   ========================================================= */
.road{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rd{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
.rd__head{padding:18px 20px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.rd__head h3{font-size:16px; margin-bottom:6px}
.rd__head p{font-size:12.6px; color:var(--dim)}
.rd__items{padding:8px}
.rd__items li{display:grid; grid-template-columns:18px 1fr auto; gap:11px; align-items:center; padding:11px 12px; border-radius:var(--r-sm); font-size:13.8px; color:var(--muted); transition:.18s}
.rd__items li:hover{background:var(--raise)}
.rd__items .mk{width:16px;height:16px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-family:var(--font-mono)}
.rd--done .mk{background:var(--verify-soft); color:var(--verify); border:1px solid color-mix(in srgb,var(--verify) 35%,transparent)}
.rd--dev .mk{background:var(--signal-soft); color:var(--signal); border:1px solid color-mix(in srgb,var(--signal) 35%,transparent)}
.rd--next .mk{background:var(--raise); color:var(--dim); border:1px solid var(--line-2)}
.rd__items .lbl{font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:100px; border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.rd--done .rd__head{border-bottom-color:color-mix(in srgb,var(--verify) 28%,var(--line))}
.rd--dev .rd__head{border-bottom-color:color-mix(in srgb,var(--signal) 28%,var(--line))}

/* =========================================================
   12 · WHY
   ========================================================= */
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.wc{border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px; background:var(--panel); position:relative; overflow:hidden; transition:.25s}
.wc::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%, var(--signal-soft), transparent 60%); opacity:0; transition:.3s}
.wc:hover{border-color:var(--line-2); transform:translateY(-3px)}
.wc:hover::before{opacity:1}
.wc__n{font-family:var(--font-mono); font-size:10px; color:var(--dim); letter-spacing:.1em; position:relative}
.wc h3{font-size:17px; margin:12px 0 10px; position:relative}
.wc p{font-size:13.8px; color:var(--muted); line-height:1.62; position:relative}

/* =========================================================
   13 · SUMMARY
   ========================================================= */
.section--closing{background:var(--panel-2)}
.chain{display:grid; gap:0; max-width:660px; margin:0 auto 52px; counter-reset:c}
.chn{position:relative; display:flex; align-items:center; gap:16px; padding:14px 20px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); margin-bottom:22px; transition:.3s}
.chn:last-child{margin-bottom:0}
.chn::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:22px; background:var(--line-2)}
.chn:last-child::after{display:none}
.chn__i{font-family:var(--font-mono); font-size:10px; color:var(--dim)}
.chn__t{font-family:var(--font-display); font-size:16px; font-weight:500}
.chn__d{font-size:12.8px; color:var(--dim); margin-left:auto; text-align:right}
.chn.is-in{border-color:color-mix(in srgb,var(--signal) 30%,var(--line))}
.chn.is-in .chn__i{color:var(--signal)}
.statement{
  text-align:center; font-family:var(--font-display); font-size:clamp(23px,3.6vw,38px);
  line-height:1.3; letter-spacing:-.03em; max-width:22ch; margin:0 auto;
}
.statement span{background:linear-gradient(100deg,var(--signal),var(--verify)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--line); background:var(--ink); padding:clamp(38px,5vw,58px) 0}
.foot__inner{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,4vw,60px); align-items:start}
.foot__note h3{font-size:16px; margin-bottom:12px; color:var(--warn)}
.foot__note p{font-size:13.4px; color:var(--muted); line-height:1.7; max-width:68ch; margin-bottom:14px}
.foot__stamp{color:var(--dim); letter-spacing:.1em}
.foot__meta dl{display:grid; gap:14px}
.foot__meta div{display:grid; gap:3px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.foot__meta dd{font-size:13.6px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr}
  .lattice{order:-1}
  .arch__body{grid-template-columns:1fr}
  .arch__note{border-left:0; border-top:1px solid var(--line)}
  .agents{grid-template-columns:1fr}
  .why{grid-template-columns:repeat(2,1fr)}
  .flow__track{grid-template-columns:repeat(5,1fr)}
  .fs:nth-child(5){border-right:0}
  .flow__detail{grid-template-columns:1fr}
  .fd__aside{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:22px}
}
@media (max-width:940px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line); padding:8px;
    display:none; box-shadow:var(--shadow);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:12px 14px}
  .nav__links a.is-active::after{display:none}
  .menu-btn{display:flex}
  .nav__inner{gap:12px}
  .nav__actions{margin-left:auto}
  .ws{grid-template-columns:1fr}
  .ws__side{border-right:0; border-bottom:1px solid var(--line)}
  .ws__scope{margin-top:0}
  .stack{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}
  .road{grid-template-columns:1fr}
  .agents__row{grid-template-columns:repeat(2,1fr)}
  .agents__row::before{display:none}
  .ag::before{display:none}
  .foot__inner{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:15px}
  .confbar__text{font-size:11.5px}
  .confbar{position:static}
  .nav{top:0}
  .flow__track{grid-template-columns:repeat(2,1fr)}
  .fs{border-bottom:1px solid var(--line)}
  .fs:nth-child(2n){border-right:0}
  .why{grid-template-columns:1fr}
  .ws__meta{grid-template-columns:1fr}
  .obs{grid-template-columns:repeat(2,1fr)}
  .hero__stats{gap:20px}
  .cmp__table{font-size:13px}
  .cmp__table th,.cmp__table td{padding:10px 11px}
  .ctxc__doc{display:none}
  .chn__d{display:none}
  .ws__panel{padding:16px}
  .trace li{grid-template-columns:1fr auto}
  .trace .t-desc{grid-column:1/-1; order:3}
}
@media (max-width:460px){
  .obs{grid-template-columns:1fr}
  .agents__row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}