:root{
  --bg:#0A0C0E; --section:#0A0C0E; --surface:#111418; --raised:#151A20; --raised-2:#1B2027;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.12);
  --text:#F2F3F5; --text-2:#9097A1; --text-3:#5F6670;
  --brand:#F0443A; --brand-hover:#FF574D; --accent:#F2F3F5; --accent-hover:#FFFFFF;
  --paper:#F2F1ED; --paper-2:#E9E7E1; --ink:#111315; --ink-2:#565C63; --ink-3:#8A9097; --ink-mute:#969CA3; --rule:rgba(17,20,22,.14);
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); --attn:#C99A43; --ok:#59A978; --danger:#D46060;
  --attn-tint:rgba(201,154,67,.035);
  --island:#000;
  --nav:64px;
  --r-card:8px; --r-btn:7px; --r-win:10px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s12:96px; --s18:144px;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.45,0,.2,1);
  --t-small:220ms; --t-panel:300ms; --t-reveal:600ms;
  color-scheme:dark;
  --body:#C3C8CF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
code,kbd,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid rgba(242,243,245,.7);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1240px;margin:0 auto;padding:0 30px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s1);height:42px;padding:0 18px;border-radius:var(--r-btn);font-size:14px;font-weight:550;white-space:nowrap;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn-primary{background:var(--brand);color:#0A0A0A}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.04)}
.btn-light{background:var(--text);color:var(--bg)}
.btn-light:hover{background:#fff}
.btn-quiet{color:var(--text-2);padding:0 12px}
.btn-quiet:hover{color:var(--text)}
.btn-sm{height:30px;padding:0 12px;font-size:13px}
.btn-lg{height:42px;padding:0 18px;font-size:14px}
kbd{font-size:12px;color:var(--text-2);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;line-height:18px}

.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-3)}
.dot.ok{background:var(--ok)} .dot.attn{background:var(--attn)} .dot.review{background:var(--text)} .dot.danger{background:var(--danger)}
.dot.pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,164,65,.5)}70%,100%{box-shadow:0 0 0 6px rgba(217,164,65,0)}}

/* nav: split around the notch */
.nav{position:sticky;top:0;z-index:20;background:rgba(11,13,16,.88);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav)}
.nav-side{display:flex;align-items:center;gap:var(--s3)}
.mark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.14em;margin-right:var(--s2)}
.nav-links{display:flex;gap:var(--s3);font-size:13px;color:var(--text-2)}
.nav-links.minor{color:var(--text-3)}
.nav-links a:hover{color:var(--text)}
.nav .btn{height:32px;font-size:13px;padding:0 12px}
.menu-btn{display:none;font-size:14px;color:var(--text-2);padding:6px 10px;border-radius:6px}
.menu-btn:hover{color:var(--text)}
.menu-panel{position:fixed;top:calc(var(--nav) + 6px);left:16px;z-index:70;min-width:200px;padding:6px;background:var(--raised);border:1px solid var(--border-2);border-radius:var(--r-card);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.menu-panel[hidden]{display:none}
.menu-panel a{display:block;padding:9px 12px;border-radius:5px;font-size:15px}
.menu-panel a:hover{background:rgba(255,255,255,.05)}

/* the notch: one, fixed, for the whole page */
.nshell{position:fixed;top:calc((var(--nav) - 32px) / 2);left:50%;z-index:60;transform:translate(-50%,-10px);opacity:0;transition:transform .5s var(--ease),opacity .3s}
.nshell.down{transform:translate(-50%,0);opacity:1}

.notch{position:relative;width:232px;height:32px;background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-radius:16px;box-shadow:inset 0 0 0 1px var(--border-2),0 10px 30px rgba(0,0,0,.45);overflow:hidden;transition:width .38s var(--ease),height .38s var(--ease),box-shadow .38s var(--ease),border-radius .38s var(--ease)}
.notch.open{border-radius:16px;box-shadow:inset 0 0 0 1px var(--border-2),0 24px 60px -12px rgba(0,0,0,.8)}
.ninner{position:absolute;top:0;left:50%;transform:translateX(-50%);min-width:200px;font-size:13.5px;line-height:1.45}
.n-compact{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:32px;padding:0 18px;color:var(--text);font:500 13px/1 var(--sans);white-space:nowrap}
div.n-compact{cursor:default}
.n-compact:focus-visible{outline-offset:-4px;border-radius:14px}
.n-compact kbd{font-size:10.5px;padding:0 4px;line-height:16px}
.n-mono{font:400 12px/1 var(--mono);color:var(--text-2)}
.n-head{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 18px;white-space:nowrap}
.n-head strong{font-weight:500}
.n-head .grow{flex:1}
.n-body{padding:2px 18px 18px}
.n-sub{color:var(--text-2);font-size:13.5px}
.n-actions{display:flex;gap:8px;margin-top:16px}
.n-actions .btn{flex:1;justify-content:center}
.n-ghost{color:var(--text-2);font-size:13px;padding:4px 8px;border-radius:5px}
.n-ghost:hover{color:var(--text)}
.n-prog{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--border)}
.n-prog i{display:block;height:100%;background:var(--text-2);transition:width .25s var(--ease)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.opt{border:1px solid var(--border);border-radius:var(--r-card);padding:12px 14px;background:rgba(255,255,255,.02)}
.opt-k{font:500 12px/1 var(--mono);color:var(--text-3)}
.opt code{display:block;margin-top:8px;font-size:13px;color:var(--text)}
.opt p{margin-top:6px;font-size:13px;line-height:1.45;color:var(--text-2)}
.affected{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--text-3)}
.chip{font:400 12px/1 var(--mono);color:var(--text-2);border:1px solid var(--border);border-radius:5px;padding:5px 7px}
.affected .chip:first-child{margin-left:4px}

/* hero + work field */
.hero{position:relative;overflow:hidden;padding:120px 0 var(--s12);background:var(--grain-l) 0 0/180px 180px,radial-gradient(50% 50% at 72% 45%,rgba(255,255,255,.025),transparent 75%),var(--bg)}
.hero>.wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:56px;align-items:center}
.hero-copy{padding-bottom:var(--s4)}
.hero h1{font-size:clamp(40px,3.9vw,54px);line-height:1.05;letter-spacing:-.04em;font-weight:600}
.hero h1 span{display:block;white-space:nowrap}
.sub{margin-top:var(--s3);font-size:18px;line-height:29px;color:var(--body);max-width:25em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.works{margin-top:var(--s3);font:400 12.5px/1 var(--mono);color:var(--text-3)}
.stage{position:relative;min-height:600px}
.stage[hidden]{display:none}

/* product window */
.win{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-win);overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.win-bar{display:flex;align-items:center;gap:var(--s2);height:40px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--raised)}
.lights{display:flex;gap:7px}
.lights i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
.win-brand{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--text-2)}
.win-bar button:hover kbd{color:var(--text);border-color:var(--text-3)}
.summary{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:13px;color:var(--text-2)}
.summary .needs{display:flex;align-items:center;gap:8px;color:var(--text-2);transition:color .3s}
.summary .needs.on{color:var(--attn)}
.rows li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);row-gap:2px;padding:11px 18px;border-top:1px solid var(--border);transition:background .4s}
.rows .nm{font-size:14px;font-weight:550;color:var(--text)}
.rows .st{justify-self:end;font-size:12px;font-weight:500;color:var(--text-3)}
.rows .act{grid-column:1/-1;display:flex;min-width:0;font-size:12.5px;line-height:1.4;color:var(--text-2);white-space:nowrap;transition:opacity .15s}
.rows .rest{flex:none;color:var(--text-3)}
.rows .act.fade{opacity:0}
.act-t{overflow:hidden;text-overflow:ellipsis}
.rows li.needs{background:var(--attn-tint)}
.rows li.needs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--attn)}
.rows li.needs .st,.rows li.needs .act-t{color:var(--attn)}
.rows li.review .st{color:var(--text)}
.rows li.flash{animation:flash 1s var(--ease)}
@keyframes flash{0%{background:rgba(255,255,255,.06)}100%{background:transparent}}
.rows li.needs.flash{animation:none}

.reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.reveal>div{overflow:hidden;min-height:0}
.reveal.open{grid-template-rows:1fr}
.decision{margin:6px 16px 16px;padding:18px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r-card)}
.decision h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.decision p{font-size:14px;color:var(--text-2);margin-top:6px}
.decision .k{margin-top:14px;font-size:12.5px;color:var(--text-3)}
.decision .k+p{margin-top:2px;color:var(--text)}
.decision .acts{display:flex;gap:8px;margin-top:18px}
.resolved{margin:6px 16px 16px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-card);font-size:14px;color:var(--text-2);display:flex;gap:10px;align-items:baseline}
.resolved b{color:var(--ok);font-weight:500}

/* sections */
.sec{padding:var(--s18) 0}
.sec.paper{background:var(--grain-d) 0 0/180px 180px,var(--paper);color:var(--ink);box-shadow:inset 0 1px 0 var(--rule)}
.paper .h2,.paper .h2-huge{color:var(--ink)}
.paper .h2-huge span:first-child{color:var(--ink-mute)}
.paper .lede{color:var(--ink-2)}
.paper .lede strong{color:var(--ink)}
.paper :focus-visible{outline-color:var(--ink)}
.h2{font-size:clamp(32px,3.6vw,44px);line-height:1.09;letter-spacing:-.035em;font-weight:600;max-width:18em}
.h2-huge{font-size:clamp(40px,6.2vw,84px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.h2-huge span{display:block}
.h2-huge span:first-child{color:var(--text-2)}
.lede{font-size:18px;color:var(--text-2);max-width:32em}
.lede strong{color:var(--text);font-weight:500}

/* section 2: the pounce, centered */
#attention .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.pstage{position:relative;width:min(820px,100%);margin-top:var(--s8);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-win);min-height:340px;display:flex;flex-direction:column;overflow:hidden;text-align:left;color:var(--text);box-shadow:0 30px 60px -30px rgba(18,20,22,.45)}
.menubar{position:relative;display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 14px;font-size:12.5px;color:var(--text-3);border-bottom:1px solid var(--border)}
.menubar .l{display:flex;gap:18px}
.menubar .l b{color:var(--text-2);font-weight:500}
.island{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;width:min(520px,calc(100% - 32px));background:var(--island);border-radius:0 0 20px 20px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -12px rgba(0,0,0,.8);font-size:13.5px;line-height:1.45;padding-top:4px}
.island .n-head{height:40px}
.screen-work{margin:var(--s3) var(--s4) var(--s3);padding-top:64px;font:400 13px/1.7 var(--mono);color:var(--text-3);overflow:hidden}
.screen-work>div{white-space:pre}
.screen-work .f{color:var(--text-2);font-family:var(--sans);margin-bottom:var(--s1)}
.screen-work .add{color:rgba(89,169,120,.55)}
.screen-work .del{color:rgba(212,96,96,.5);text-decoration:line-through}
.screen-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:12px 14px;border-top:1px solid var(--border);font:400 12.5px/1.4 var(--mono);color:var(--text-3)}
.screen-foot button{color:var(--text-2);font-family:var(--sans);font-size:13px;white-space:nowrap}
.screen-foot button:hover{color:var(--text)}
.s2-note{margin-top:var(--s5)}
.handled{width:min(820px,100%);margin-top:var(--s4);text-align:left}
.handled-h{font-size:13px;color:var(--ink-3);margin-bottom:var(--s1)}
.handled-h span{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.h-note{margin-top:var(--s2);font-size:14.5px;color:var(--ink-2)}
.h-note b{color:var(--ink);font-weight:550}
.log{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s4)}
.log li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink)}
.log b{color:var(--ok);font-weight:500}
.log .lp{font:400 12px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap}

/* section 3: palette */
.desk{position:relative;margin-top:var(--s8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-win);min-height:500px;overflow:hidden}
.desk .menubar{height:32px}
.desk .menubar .r{display:flex;align-items:center;gap:10px}
.desk .menubar button{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:12.5px}
.desk .menubar button:hover{color:var(--text)}
.ws{padding:var(--s4);transition:opacity .25s,filter .25s}
.desk.dim .ws{opacity:.1}
.ws-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.ws-head h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.ws-head span{font:400 13px/1 var(--mono);color:var(--text-3)}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--s3)}
.pane{border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;background:rgba(255,255,255,.015)}
.pane h4{margin:0 0 10px;font-size:13px;font-weight:500;color:var(--text-3)}
.pane li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0}
.pane li span:last-child{color:var(--text-2);text-align:right}
.pane .mono{font-size:12.5px}
.pane.block{border-color:rgba(217,164,65,.28);background:var(--attn-tint)}
.pane.block p{font-size:14px}
.pane.block .btn{margin-top:12px}
.rs{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin-top:var(--s3)}
.rs section{border-top:1px solid var(--border);padding:12px 0 14px}
.rs h4{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--text-3)}
.rs li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13.5px}
.rs li span:last-child{color:var(--text-2);text-align:right;white-space:nowrap}
.rs .st-wait{color:var(--attn)!important}
.rs .st-ok{color:var(--ok)!important}
.rs-term{font:400 12px/1.7 var(--mono);color:var(--text-2)}
.rs-term div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-term .ok{color:var(--ok)}
.rs-files li{font:400 12.5px/1.5 var(--mono)}
.rs-files b{font-weight:400;color:rgba(89,169,120,.85)}
.rs-files i{font-style:normal;color:var(--text-3);margin-left:6px}
.rs-dec li{justify-content:flex-start;gap:10px;color:var(--text)}
.rs-dec li::before{content:"—";color:var(--text-3)}
.rs-block p{color:var(--attn);font-size:14px}
.rs-block .btn{margin-top:10px}
.rs-q p{color:var(--text-2);font-size:14px}
@media (max-width:768px){.rs{grid-template-columns:1fr}}
.ws-hint{margin-top:var(--s3);font-size:13px;color:var(--text-3)}

.palette{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:min(720px,calc(100% - 32px));background:var(--raised);border:1px solid var(--border-2);border-radius:var(--r-win);box-shadow:0 40px 80px -20px rgba(0,0,0,.75);overflow:hidden;z-index:3}
.palette[hidden]{display:none}
.palette.pop{animation:palpop .16s var(--ease)}
@keyframes palpop{from{opacity:0;transform:translateX(-50%) scale(.985)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.pal-in{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border-bottom:1px solid var(--border)}
.pal-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:400 16px var(--sans)}
.pal-in input::placeholder{color:var(--text-3)}
.pal-body{display:grid;grid-template-columns:5fr 7fr;height:330px}
.pal-list{border-right:1px solid var(--border);padding:6px;overflow:auto}
.pal-list [role=option]{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:14px;cursor:pointer;position:relative}
.pal-list [role=option] span{font:400 12px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.pal-list [aria-selected=true]{background:rgba(255,255,255,.06)}
.pal-list [aria-selected=true]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--accent)}
.pal-empty{padding:14px 12px;font-size:14px;color:var(--text-2)}
.pal-detail{padding:18px 20px;overflow:auto;display:flex;flex-direction:column}
.pal-detail h3{font-size:16px;font-weight:600}
.pal-detail .last{font:400 12.5px/1 var(--mono);color:var(--text-3);margin-top:6px}
.pal-detail h4{margin:18px 0 8px;font-size:12.5px;font-weight:500;color:var(--text-3)}
.since li{display:flex;gap:10px;font-size:14px;padding:2px 0}
.since b{width:14px;flex:none;font-weight:500;color:var(--ok)}
.since li.attn b,.since li.attn{color:var(--attn)}
.since li.wait b{color:var(--text-3)}
.cur{display:flex;flex-wrap:wrap;gap:6px 18px;font:400 13px/1.4 var(--mono);color:var(--text-2)}
.cur .hot{color:var(--attn)}
.pal-go{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px}
.pal-go small{font-size:12.5px;color:var(--text-3)}
.steps li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:7px 0;font-size:14px;color:var(--text-3);transition:color .2s}
.steps li b{font-weight:500;color:var(--text-3)}
.steps li span:last-child{font:400 12.5px/1 var(--mono)}
.steps li.done{color:var(--text)}
.steps li.done b{color:var(--ok)}
.steps li.done span:last-child{color:var(--text-2)}

/* section 4: workstate */
.ws4-grid{display:grid;grid-template-columns:4fr 8fr;gap:var(--s8);margin-top:var(--s8);align-items:start}
.wso{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);color:var(--text);box-shadow:0 30px 60px -30px rgba(18,20,22,.45)}
.wso:focus{outline:none}
.wso:focus-visible{outline:2px solid rgba(242,243,245,.7);outline-offset:4px}
.wso-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border)}
.wso-head h3{font:500 14px/1 var(--mono);letter-spacing:.04em}
.wso-head span{font:400 12.5px/1 var(--mono);color:var(--text-3)}
.wso dl{display:grid;grid-template-columns:140px 1fr}
.wso dt,.wso dd{padding:14px 20px;border-bottom:1px solid var(--border);font-size:15px}
.wso dt{color:var(--text-3);font-size:13.5px;padding-top:16px}
.wso dd{padding-left:0}
.wso dd p+p{margin-top:6px}
.fact{position:relative;display:inline}
.prov{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;margin-left:6px;padding:0 4px;border-radius:4px;font:400 10.5px/1 var(--mono);color:var(--text-3);border:1px solid var(--border);vertical-align:2px;transition:color .15s,border-color .15s}
.fact:hover .prov,.prov:focus-visible{color:var(--text);border-color:var(--text-3)}
.pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:max-content;max-width:300px;padding:8px 10px;background:var(--raised);border:1px solid var(--border-2);border-radius:6px;font:400 12px/1.45 var(--mono);color:var(--text-2);box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none}
.pop b{display:block;color:var(--text);font-weight:500}
.fact:hover .pop,.prov:focus-visible+.pop{opacity:1;visibility:visible;transform:none}
.bad{color:var(--text-2);text-decoration:line-through;text-decoration-color:var(--text-3)}
.muted{color:var(--text-2)}
.wso-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
.wso-foot button{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.wso-foot button:hover{color:var(--text)}
.wso-foot button b{font-weight:500;color:var(--text)}
.src{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;padding:4px 20px 18px;font:400 12.5px/1.9 var(--mono);color:var(--text-2)}
.src[hidden]{display:none}
.src li span{color:var(--text-3);margin-right:8px}

.foot{border-top:1px solid var(--border);padding:var(--s4) 0 var(--s6);font-size:13px;color:var(--text-3)}
.foot .wrap{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}


/* ---------- motion system ----------
   A reveal: product blocks only, 600ms ease-out, 16px
   B state:  220ms small, 300ms panels, ease-in-out
   C scenes: one scripted loop per section (JS)
   D ambient: one amber pulse, counters, nothing else */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
.js .rows li{animation:rowin 500ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hint{animation:hint 700ms var(--ease-io) 1}
@keyframes hint{0%{box-shadow:0 0 0 0 rgba(242,243,245,.55)}100%{box-shadow:0 0 0 7px rgba(242,243,245,0)}}
.dot.pulse{animation:pulse 2.4s ease-out 2}
.island.drop{animation:drop var(--t-panel) var(--ease-io) both}
@keyframes drop{from{transform:translate(-50%,-100%)}to{transform:translate(-50%,0)}}
.js .wso .rvr{opacity:0;transform:translateY(8px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.js .wso.in .rvr{opacity:1;transform:none}
.js .wso .prov{opacity:0;transition:opacity 300ms ease-out,color .15s,border-color .15s;transition-delay:calc(var(--i,0) * 90ms + 650ms)}
.js .wso.in .prov{opacity:1}
.pal-list [role=option]{animation:rowin 400ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.replay{font-size:13px;color:var(--text-3)}
.replay:hover{color:var(--text)}
.paper .replay{color:var(--ink-3)}
.paper .replay:hover{color:var(--ink)}

/* ---------- dark sections get their own surface ---------- */
.sec.ink{background:var(--grain-l) 0 0/180px 180px,var(--section)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.sec-head .lede{margin-top:var(--s2)}
.h2 .q{display:block;color:var(--text-3)}
.paper .h2 .q{color:var(--ink-mute)}

/* light-section product frames: darker shell, quiet shadow */
.paper .pstage,.paper .wso,.paper .vcard,.paper .tiers{box-shadow:0 12px 40px rgba(0,0,0,.10)}
.paper .pstage,.paper .wso,.paper .vcard{background:#0E1115;border-color:#0E1115}
#attention{padding-top:112px}
#attention .h2-huge{max-width:760px;line-height:.98}

/* ---------- section 5: fork ---------- */
.fork{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);margin-top:var(--s8);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-win);overflow:hidden}
.fork-col{padding:var(--s4)}
.fork .k{font-size:12.5px;color:var(--text-3);margin-bottom:10px}
.fork h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.fork .meta{font:400 12px/1.5 var(--mono);color:var(--text-3);margin-top:4px}
.pkg{margin-top:var(--s3);border-top:1px solid var(--border)}
.pkg li{display:grid;grid-template-columns:18px 110px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-2);transition:color var(--t-small) var(--ease-io)}
.pkg li b{font-weight:500;color:var(--text-3);transition:color var(--t-small)}
.pkg li span{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkg li.sent{color:var(--text)}
.pkg li.sent b{color:var(--ok)}
.pkg li.sent span{color:var(--text-2)}
.lane{position:relative;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--section)}
.lane::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:1px;background:var(--border-2)}
.targets{display:flex;flex-wrap:wrap;gap:8px}
.targets button{height:32px;padding:0 12px;border:1px solid var(--border-2);border-radius:var(--r-btn);font-size:13.5px;color:var(--text-2);transition:border-color var(--t-small),color var(--t-small),background var(--t-small)}
.targets button[aria-checked=true]{color:var(--text);border-color:var(--text-2);background:rgba(255,255,255,.04)}
.fork .task{font-size:15px;margin-bottom:var(--s3)}
.fork-go{display:flex;align-items:center;gap:var(--s2)}
.fork-out{margin-top:var(--s3);border:1px solid var(--border);border-radius:var(--r-card);padding:12px 14px;background:var(--raised)}
.fork-out .t{display:flex;justify-content:space-between;font-size:14px;font-weight:550}
.fork-out .t span{font-weight:500;font-size:12px;color:var(--text-3)}
.fork-out p{font-size:12.5px;color:var(--text-2);margin-top:3px}

/* ---------- section 6: verify ---------- */
.v-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.vcard{border:1px solid var(--border-2);border-radius:var(--r-win);color:var(--text);overflow:hidden}
.vcard header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border)}
.vcard h3{font:500 13.5px/1 var(--mono);letter-spacing:.04em}
.vstat{font-size:12px;font-weight:500;color:var(--text-3);transition:color var(--t-small)}
.vstat.ready{color:var(--text)}
.claim{padding:14px 20px;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--border)}
.claim b{font-weight:500;color:var(--text)}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--text-3);transition:color var(--t-small) var(--ease-io)}
.checks li span{font:400 12.5px/1 var(--mono);color:var(--text-3);opacity:0;transition:opacity var(--t-small)}
.checks li i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--text-3);font-style:normal}
.checks li.run i{border-color:var(--text-2);border-top-color:transparent;animation:spin .7s linear infinite}
.checks li.ok{color:var(--text)}
.checks li.ok span{opacity:1}
.checks li.ok i{border:0;width:auto;height:auto;color:var(--ok);font-size:13px}
.checks li.ok i::before{content:"✓"}
@keyframes spin{to{transform:rotate(360deg)}}
.vwarn{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-io)}
.vwarn>div{overflow:hidden;min-height:0}
.vwarn.on{grid-template-rows:1fr}
.vwarn p{margin:0;padding:11px 20px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-2)}
.vwarn b{color:var(--attn);font-weight:500;margin-right:8px}
.vcard footer{display:flex;align-items:center;gap:var(--s4);padding:14px 20px;font:400 12.5px/1 var(--mono);color:var(--text-3)}
.vcard footer b{color:var(--text);font-weight:500}
.vcard footer .btn{margin-left:auto}
.vcard footer .btn:disabled{opacity:.35;cursor:default}

/* ---------- section 7: points ---------- */
.p-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.pcard{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-win);overflow:hidden}
.pcard header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-3)}
.pcard header h3{font-size:14px;font-weight:550;color:var(--text)}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.pstats div{padding:16px 20px;border-right:1px solid var(--border)}
.pstats div:last-child{border-right:0}
.pstats dt{font-size:12.5px;color:var(--text-3)}
.pstats dd{margin-top:6px;font:500 24px/1 var(--mono);font-variant-numeric:tabular-nums}
.ptotal{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px;border-bottom:1px solid var(--border)}
.ptotal span{font-size:14px;color:var(--text-2)}
.ptotal b{font:500 40px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pfeed li{display:flex;justify-content:space-between;gap:var(--s2);padding:10px 20px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.pfeed li:last-child{border-bottom:0}
.pfeed li span{font:400 12.5px/1.4 var(--mono);color:var(--text)}

/* ---------- section 8: scale ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s8);border:1px solid var(--ink);background:#fff}
.tier{border-right:1px solid var(--rule)}
.tier:last-child{border-right:0}
.tier h3{padding:14px 20px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:550;border-right:1px solid rgba(255,255,255,.12)}
.tier:last-child h3{border-right:0}
.tier p{padding:14px 20px 4px;font-size:13.5px;color:var(--ink-2)}
.tier ul{padding:6px 20px 8px}
.tier li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink)}
.tier li:last-child{border-bottom:0}
.tier a{display:block;padding:14px 20px;border-top:1px solid var(--rule);font-size:14px;font-weight:550;color:var(--ink)}
.tier a:hover{background:var(--paper)}

/* ---------- network band ---------- */
.netband{background:var(--grain-l) 0 0/180px 180px,var(--bg);padding:var(--s18) 0}
.netband .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.netband .btn{margin-top:var(--s4)}
.foot .btn{height:32px;font-size:13px;padding:0 12px}

@media (max-width:1100px){
  .v-grid,.p-grid,.netband .wrap{grid-template-columns:1fr;gap:var(--s5)}
  .fork{grid-template-columns:1fr}
  .lane{display:none}
  .fork-col+.fork-col{border-top:1px solid var(--border)}
    }
@media (max-width:768px){
  .tiers{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--ink)}
  .pstats{grid-template-columns:1fr 1fr}
  .pstats div:nth-child(2){border-right:0}
  .pstats div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .ptotal b{font-size:32px}
  #attention{padding-top:var(--s12)}
}
@media (max-width:560px){
  .pkg li{grid-template-columns:18px minmax(0,1fr)}
  .pkg li span{grid-column:2}
    .fork-col{padding:var(--s3) 16px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .wso .rvr,.js .wso .prov{opacity:1;transform:none}
}


/* ---------- the Workstate strip: Vistara's recurring object ---------- */
.wstrip{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;background:var(--raised);border:1px solid var(--border-2);border-radius:6px;overflow:hidden;font:400 12px/1.3 var(--mono);color:var(--text-2);text-align:left}
.wstrip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brand)}
.wstrip .ws-id{display:flex;align-items:center;padding:10px 14px 10px 16px;color:var(--text);font-weight:500;letter-spacing:.04em;border-right:1px solid var(--border)}
.wstrip .ws-kv{padding:8px 14px;border-right:1px solid var(--border);min-width:0}
.wstrip .ws-kv b{display:block;font-weight:400;font-size:10px;letter-spacing:.08em;color:var(--text-3);margin-bottom:3px}
.wstrip .ws-kv span{color:var(--text);white-space:nowrap}
.wstrip .ws-kv .wait{color:var(--attn)}
.wstrip .ws-src{display:flex;align-items:center;margin-left:auto;padding:8px 14px;color:var(--text-3);white-space:nowrap}
.wstrip.mini .ws-id{padding:8px 12px 8px 14px}
.wstrip.mini .ws-kv{padding:6px 12px}
.wstrip.mini .ws-src{flex-basis:100%;margin:0;border-top:1px solid var(--border);padding:6px 12px 6px 14px}
.wstrip.chip{flex-wrap:nowrap;position:absolute;left:12px;top:calc(50% - 16px)}
.wstrip.chip .ws-id{padding:8px 10px 8px 12px;border-right:0;font-size:11px}
.pal-detail .wstrip{margin-top:14px}
.fork .wstrip{margin-top:var(--s3)}
.attn-t{color:var(--attn)}

/* ---------- section 8: one Workstate, three coordination surfaces ---------- */
.sys{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);margin-top:var(--s8)}
.st{display:flex;flex-direction:column;border:1px solid rgba(17,20,22,.22);background:rgba(255,255,255,.5)}
.st h3{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:550}
.st h3 span{font:400 11.5px/1 var(--mono);color:var(--ink-mute)}
.st ul{padding:8px 16px;flex:1}
.st li{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink);opacity:.28;transition:opacity 300ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.st li:last-child{border-bottom:0}
.st.lit li{opacity:1}
.st .who i{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border:1px solid var(--ink);font:500 10px/1 var(--mono);font-style:normal}
.st .slot{min-height:86px;padding:14px 16px;border-top:1px dashed rgba(17,20,22,.28)}
.conn{position:relative}
.conn::before{content:"";position:absolute;left:8px;right:10px;top:50%;border-top:1px solid var(--ink-3)}
.conn::after{content:"";position:absolute;right:8px;top:calc(50% - 4px);border:4px solid transparent;border-left:6px solid var(--ink-3);border-right:0}

/* ---------- network: a job ticket ---------- */
.ticket{position:relative;width:100%;max-width:540px;justify-self:end;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;font-family:var(--mono);color:var(--text)}
.ticket header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 10px;font-size:11px;letter-spacing:.1em;color:var(--text-3)}
.tk-state{letter-spacing:0;font-size:12px;color:var(--text-2);transition:color var(--t-small)}
.tk-state.ok{color:var(--ok)}
.ticket h3{padding:0 20px 16px;font:550 19px/1.3 var(--sans);letter-spacing:-.015em}
.tk-kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.tk-kv div{padding:12px 20px;border-bottom:1px solid var(--border)}
.tk-kv div:nth-child(odd){border-right:1px solid var(--border)}
.tk-kv dt{font-size:10.5px;letter-spacing:.08em;color:var(--text-3)}
.tk-kv dd{margin-top:5px;font-size:13.5px}
.perf{position:relative;height:0;margin:0 16px;border-top:1px dashed var(--border-2)}
.perf::before,.perf::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2)}
.perf::before{left:-26px;clip-path:inset(0 0 0 50%)}
.perf::after{right:-26px;clip-path:inset(0 50% 0 0)}
.tk-step{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-io)}
.tk-step>div{overflow:hidden;min-height:0}
.tk-step.on{grid-template-rows:1fr}
.tk-row{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:14px 20px;font-size:13px}
.tk-h{font-size:10.5px;letter-spacing:.1em;color:var(--text-3)}
.tk-row .dim{color:var(--text-3);font-size:12px;margin-top:3px}
.tk-bar{grid-column:2/-1;height:3px;background:var(--border);margin-top:2px}
.tk-bar i{display:block;height:100%;width:0;background:var(--text-2);transition:width 200ms var(--ease-io)}
.tk-paid{color:var(--ok)}
@media (max-width:1100px){
  .sys{grid-template-columns:1fr}
  .conn{height:32px}
  .conn::before{left:50%;right:auto;top:6px;bottom:10px;border-top:0;border-left:1px solid var(--ink-3)}
  .conn::after{left:calc(50% - 4px);right:auto;top:auto;bottom:6px;border:4px solid transparent;border-top:6px solid var(--ink-3);border-bottom:0}
  .ticket{justify-self:start}
}
@media (max-width:560px){
  .tk-kv{grid-template-columns:1fr}
  .tk-kv div:nth-child(odd){border-right:0}
  .tk-row{grid-template-columns:78px minmax(0,1fr)}
  .tk-row>*:nth-child(3){grid-column:2}
  .wstrip .ws-kv span{white-space:normal}
}


/* ---------- hero: the ambient layer over your existing work ---------- */
.hero.paper-hero{padding:96px 0;min-height:780px;display:flex;align-items:center;background:var(--grain-d) 0 0/180px 180px,var(--paper);color:var(--ink)}
.hero.paper-hero>.wrap{width:100%}
.paper-hero h1 span{display:block}
.paper-hero .sub{color:var(--ink-2)}
.paper-hero .btn-ghost{border-color:rgba(17,20,22,.22);color:var(--ink)}
.paper-hero .btn-ghost:hover{background:rgba(17,20,22,.04)}
.paper-hero .works{color:var(--ink-3)}
.paper-hero .replay{color:var(--ink-3)}
.paper-hero .replay:hover{color:var(--ink)}
.paper-hero :focus-visible{outline-color:var(--ink)}
.nshell.away{opacity:0!important;pointer-events:none;transform:translate(-50%,-10px)!important}

.amb{position:relative;width:100%;aspect-ratio:720/560}
/* drafted table plate: the sheets lie on it; multiply so its paper disappears into the section paper */
.amb::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-8%;right:-32%;background:url(art/table-plate.webp) center/100% 100% no-repeat;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 50%,transparent 100%)}
.amb-in{z-index:1}
.amb-in{position:absolute;left:0;top:0;width:720px;height:560px;transform-origin:0 0;color:#16191C}
.crop{position:absolute;width:14px;height:14px;border-color:rgba(22,25,28,.35);border-style:solid;border-width:0}
.crop.tl{left:6px;top:6px;border-left-width:1px;border-top-width:1px}
.crop.tr{right:6px;top:6px;border-right-width:1px;border-top-width:1px}
.crop.bl{left:6px;bottom:6px;border-left-width:1px;border-bottom-width:1px}
.crop.br{right:6px;bottom:6px;border-right-width:1px;border-bottom-width:1px}
.stamp{position:absolute;right:28px;top:22px;display:flex;align-items:center;gap:6px;font:400 9px/1 var(--mono);letter-spacing:.08em;color:#6A7077}
.stamp img{width:12px;height:12px}

.sheet{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:var(--z,1);background:#F8F7F3;border:1.25px solid #16191C;border-radius:2px;box-shadow:2px 3px 0 rgba(22,25,28,.08);transform:rotate(var(--r)) scale(var(--s,1));transition:border-color 240ms var(--ease-io),box-shadow 300ms var(--ease-io)}
.js .sheet{opacity:0;transform:translateY(4px) rotate(var(--r)) scale(var(--s,1));transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),border-color 240ms var(--ease-io),box-shadow 300ms var(--ease-io);transition-delay:calc(var(--i) * 50ms),calc(var(--i) * 50ms),0s,0s}
.js .amb.go .sheet{opacity:1;transform:rotate(var(--r)) scale(var(--s,1))}
/* depth: 1 primary, 1 progressing, 3 quiet */
.sheet.quiet{border-color:rgba(22,25,28,.55);box-shadow:0 2px 8px -4px rgba(22,25,28,.14)}
.sheet.quiet>.sh-h,.sheet.quiet>.sh-b{opacity:.7}
.sheet.prog{box-shadow:1px 2px 0 rgba(22,25,28,.1),0 4px 12px -8px rgba(22,25,28,.25)}
.sheet.primary{box-shadow:1px 1px 0 rgba(22,25,28,.9),0 8px 18px -10px rgba(22,25,28,.28)}
.sheet.primary.near{box-shadow:1px 1px 0 rgba(22,25,28,.9),0 18px 34px -14px rgba(22,25,28,.45)}
#shTerm .tab{left:96px}
.sh-st{transition:opacity 110ms var(--ease-io)}
.sh-st.swap{opacity:0}
.sh-st i.ok{background:var(--ok)}
.cite{color:var(--ok);margin-left:4px;opacity:0;transition:opacity 220ms var(--ease-io)}
.cite.on{opacity:1}
/* authored texture: drafting ticks, table edge, coordinate labels */
.amb-in::before{content:"";position:absolute;left:44px;right:44px;top:0;height:5px;background:repeating-linear-gradient(90deg,rgba(22,25,28,.28) 0 1px,transparent 1px 40px);pointer-events:none}
.amb-in::after{content:"";position:absolute;top:44px;bottom:44px;left:0;width:5px;background:repeating-linear-gradient(180deg,rgba(22,25,28,.28) 0 1px,transparent 1px 40px);pointer-events:none}
.amb-tex{position:absolute;inset:0;background:var(--grain-d) 0 0/140px 140px;opacity:.55;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.edge{position:absolute;left:0;right:0;top:432px;height:1px;background:rgba(22,25,28,.08);pointer-events:none}
.coord{position:absolute;font:400 8.5px/1 var(--mono);letter-spacing:.08em;color:rgba(22,25,28,.38);pointer-events:none}
.trace2{position:absolute;inset:0;width:720px;height:560px;pointer-events:none;z-index:7;opacity:0;transition:opacity 300ms var(--ease-io)}
.amb.go .trace2{opacity:1;transition-delay:450ms}
.trace2 path,.trace2 circle{transition:stroke 300ms var(--ease-io),fill 300ms var(--ease-io)}
.trace2 path{stroke:rgba(22,25,28,.32)}
.trace2 circle{fill:rgba(22,25,28,.32)}
.trace2.attn path{stroke:var(--attn)}
.trace2.attn circle{fill:var(--attn)}
.sh-h{display:flex;justify-content:space-between;align-items:center;height:24px;padding:0 9px;border-bottom:1px solid rgba(22,25,28,.18);font:400 10.5px/1 var(--mono);color:#3C4148;white-space:nowrap}
.sh-h{gap:8px;overflow:hidden}
.sh-h>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sh-st{flex:none}
.sh-st{display:flex;align-items:center;gap:5px;color:#80868D}
.sh-st i{width:5px;height:5px;border-radius:50%;background:#9AA0A6}
.sh-b{position:relative;padding:8px 10px;overflow:hidden;height:calc(100% - 24px)}
.mono{font-family:var(--mono)}
.code{font:400 10.5px/1.7 var(--mono);color:#6A7077;white-space:pre}
.code .k{color:#16191C}
.code .caret{display:inline-block;width:5px;height:11px;background:#16191C;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.br-url{font:400 10px/1 var(--mono);color:#80868D;padding:3px 6px;border:1px solid rgba(22,25,28,.15);border-radius:2px;margin-bottom:9px}
.br-t{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.br-l{position:relative;font-size:10.5px;line-height:1.55;color:#4A5057;padding:2px 0}
.hl{position:absolute;left:8px;right:8px;height:17px;background:rgba(22,25,28,.07);border-left:2px solid #16191C;transition:top 320ms var(--ease-io)}
.term{font:400 10.5px/1.65 var(--mono);color:#4A5057}
.term div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term .ok{color:#3E8A5C}
.term .q{color:#9A7322}
.doc-h{font-size:13px;font-weight:600;margin-bottom:6px}
.doc-l{font-size:10.5px;line-height:1.6;color:#4A5057;padding:1px 0;background:linear-gradient(#16191C,#16191C) 0 100%/0 1px no-repeat;transition:background-size 400ms var(--ease-io)}
.doc-l.ed{background-size:100% 1px;color:#16191C}
.bar{height:6px;border:1px solid #16191C;border-radius:1px;margin:10px 0 8px;overflow:hidden}
.bar i{display:block;height:100%;background:#16191C;transition:width 600ms var(--ease-io)}
.rp-l{font:400 10.5px/1.6 var(--mono);color:#4A5057}

/* attention on one sheet only */
.sheet.attn{border:1.5px solid var(--attn);box-shadow:2px 3px 0 rgba(201,154,67,.18)}
.sheet.attn .sh-st{color:#9A7322}
.sheet.attn .sh-st i{background:var(--attn)}
.tab{position:absolute;left:14px;top:-12px;height:14px;padding:0 6px;display:flex;align-items:center;background:var(--attn);color:#1A1406;font:500 9px/1 var(--mono);border-radius:2px 2px 0 0;opacity:0;transform:translateY(4px);transition:opacity 220ms var(--ease-io),transform 220ms var(--ease-io)}
.sheet.attn .tab{opacity:1;transform:none}

.leader{position:absolute;inset:0;width:720px;height:560px;pointer-events:none;z-index:8;clip-path:inset(0 0 100% 0);transition:clip-path 300ms var(--ease-io)}
.leader.on{clip-path:inset(0 0 0 0)}

.amb .wstrip{position:absolute;left:110px;top:452px;width:560px;flex-wrap:nowrap;font-size:10.5px;z-index:0;transform:rotate(-.3deg)}
.amb .wstrip .ws-kv:nth-of-type(2){box-shadow:inset 0 -2px 0 rgba(201,154,67,0);transition:box-shadow 300ms var(--ease-io)}
.amb .wstrip.attn .ws-kv:nth-of-type(2){box-shadow:inset 0 -2px 0 var(--attn)}
.amb .wstrip .ws-src{display:none}
.amb .wstrip .ws-id{white-space:nowrap}
.amb .wstrip .ws-kv{flex:1 1 0;min-width:0}
.amb .wstrip .ws-kv:nth-of-type(2){flex:1.7 1 0}
.amb .wstrip .ws-kv:first-of-type{display:none}
.amb .wstrip .ws-kv span{display:block;overflow:hidden;text-overflow:ellipsis}

.apill{position:absolute;left:50%;top:14px;z-index:10;transform:translate(-50%,-8px);opacity:0;min-width:180px;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F2F3F5;border-radius:14px;box-shadow:0 10px 28px -10px rgba(0,0,0,.55);transition:opacity 260ms var(--ease-io),transform 300ms var(--ease-io);overflow:hidden}
.apill.on{opacity:1;transform:translate(-50%,0)}
.ap-c{display:flex;align-items:center;justify-content:center;gap:8px;height:28px;padding:0 14px;font-size:12px;font-weight:500;white-space:nowrap}
.ap-c .d{width:6px;height:6px;border-radius:50%;background:#9097A1}
.ap-c .d.attn{background:var(--attn)}
.ap-c .d.ok{background:var(--ok)}
.ap-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease-io)}
.ap-x>div{overflow:hidden;min-height:0}
.apill.open .ap-x{grid-template-rows:1fr}
.ap-b{width:320px;padding:0 14px 14px}
.ap-b p{font-size:11.5px;color:#9097A1}
.ap-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.ap-opts button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:6px;text-align:left;font-size:11.5px;font-weight:550;color:#F2F3F5}
.ap-opts button:hover{background:rgba(255,255,255,.06)}
.ap-opts button span{font:400 10.5px/1.2 var(--mono);color:#9097A1}
.ap-later{margin-top:8px;font-size:11px;color:#9097A1}
.ap-later:hover{color:#F2F3F5}
.ap-c button{font-size:11px;color:#C3C8CF;margin-left:4px;text-decoration:underline;text-underline-offset:2px}

/* capability strip, directly under the hero */
.caps{background:var(--grain-l) 0 0/180px 180px,var(--bg);border-top:1px solid #16191C}
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.cap{padding:40px 32px 44px}
.cap:first-child{padding-left:0}
.cap+.cap{border-left:1px solid var(--border)}
.cap h2{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#F4F4F1}
.cap p{margin-top:10px;font-size:16px;line-height:1.5;color:#C3C8CF;max-width:30ch}
.cap .ind{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 10px;border:1px solid var(--border-2);border-radius:999px;font:400 12px/1 var(--mono);color:var(--text-2)}
.cap .ind i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.cap .ind.attn{color:var(--attn)}
.cap .ind.attn i{background:var(--attn)}
@media (max-width:1100px){
  .hero.paper-hero{min-height:0;padding:72px 0}
}
@media (max-width:768px){
  .caps-grid{grid-template-columns:1fr}
  .cap,.cap:first-child{padding:20px 0}
  .cap+.cap{border-left:0;border-top:1px solid var(--border)}
}


/* responsive */
@media (max-width:1100px){
  .stage{min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:var(--s8)}
  .hero-copy{padding-top:0;max-width:640px}
  .stage{margin-top:0}
  .pounce-grid,.ws4-grid{grid-template-columns:1fr;gap:var(--s5)}
  .explain{padding-top:0}
}
@media (max-width:1000px){
  .nav-links{display:none}
  .menu-btn{display:inline-block}
  .ws-grid{grid-template-columns:1fr 1fr}
  .ws-grid .pane.block{grid-column:1/-1}
}
@media (max-width:768px){
  .wrap{padding:0 24px}
  .hero{padding:var(--s8) 0 var(--s12)}
  .sec{padding-bottom:var(--s12)}
  .pal-body{grid-template-columns:1fr;height:auto}
  .pal-list{border-right:0;border-bottom:1px solid var(--border);max-height:220px}
  .pal-detail{min-height:300px}
  .wso dl{grid-template-columns:1fr}
  .wso dt{border-bottom:0;padding:14px 16px 0}
  .wso dd{padding:4px 16px 14px}
}
@media (max-width:640px){
  html{scroll-padding-top:128px}
  .nshell{top:calc(var(--nav) + 8px);transform:translate(-50%,-8px);opacity:0;transition:transform .45s var(--ease),opacity .3s}
  .nshell.down{transform:translate(-50%,0);opacity:1}
  .nshell::before,.nshell::after{display:none}
  .notch,.notch.open{border-radius:12px;box-shadow:inset 0 0 0 1px var(--border-2),0 12px 32px rgba(0,0,0,.5)}
  .n-compact:focus-visible{border-radius:12px}
  .hero{padding-top:88px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .menu-panel{left:8px}
  .hero h1{font-size:40px}
  .ctas .btn{flex:1 1 100%;justify-content:center}
  .rows li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:10px 14px}
  .rows .name{grid-column:1/-1}
  .rows .name .nm{font-weight:500}
  .rows .st{justify-content:flex-end}
  .summary{padding:12px 14px}
  .decision{margin:6px 12px 12px;padding:16px}
  .opts{grid-template-columns:1fr}
  .menubar .l span{display:none}
  .nub{width:88px}
  .screen-work{margin:var(--s3) 16px;font-size:12px}
  .ws{padding:var(--s3) 16px}
  .ws-grid{grid-template-columns:1fr}
  .palette{position:relative;left:auto;transform:none;top:auto;width:auto;margin:12px}
  .palette.pop{animation:none}
  .desk.open .ws{display:none}
  .src{grid-template-columns:1fr}
  .wso-head{padding:14px 16px}
  .wso-foot{padding:12px 16px}
  .pop{max-width:240px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- lower sections: one focal object each, drafting marks, depth ---------- */
.paper{--cm:rgba(22,25,28,.34);--cm-t:rgba(22,25,28,.42)}
.ink,.netband{--cm:rgba(255,255,255,.2);--cm-t:rgba(255,255,255,.3)}
.plate{position:relative}
.plate::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;background:
  linear-gradient(var(--cm),var(--cm)) 0 0/12px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--cm),var(--cm)) 100% 0/12px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% 0/1px 12px no-repeat,
  linear-gradient(var(--cm),var(--cm)) 0 100%/12px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 0 100%/1px 12px no-repeat,
  linear-gradient(var(--cm),var(--cm)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% 100%/1px 12px no-repeat}
.plate::after{content:attr(data-coord);position:absolute;right:-16px;top:-34px;font:400 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--cm-t);pointer-events:none}
.tickcol{position:absolute;left:-34px;top:0;bottom:0;width:6px;z-index:0;pointer-events:none;background:repeating-linear-gradient(180deg,var(--cm) 0 1px,transparent 1px 24px)}
.focal{box-shadow:0 1px 0 rgba(0,0,0,.35),0 22px 44px -22px rgba(0,0,0,.75)}
.paper .focal{box-shadow:0 1px 0 rgba(22,25,28,.5),0 20px 44px -20px rgba(22,25,28,.45)}

.spot-host{position:relative}

/* workstate: calm, marks only */
#workstate .wso{box-shadow:0 1px 0 rgba(22,25,28,.5),0 20px 44px -20px rgba(22,25,28,.4)}

/* fork: the Workstate strip travels, Cursor's sheet receives it */
#fork .wrap{position:relative}
.fork{background:rgba(17,20,24,.6);border-color:var(--border)}
.fork>.fork-col:first-child{opacity:.92}
.pkg li{border-bottom-color:rgba(255,255,255,.05);font-size:13px}
.lane::before{height:0;background:none;border-top:1px dashed rgba(255,255,255,.18)}
.lane::after{content:"lane";position:absolute;left:16px;top:calc(50% + 8px);font:400 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--text-3)}
.lane .wstrip.chip{box-shadow:0 1px 0 rgba(0,0,0,.5),0 16px 32px -12px rgba(0,0,0,.9)}
.fsheet{position:relative;margin-top:var(--s3);background:#F2F1ED;color:#16191C;border:1.25px solid rgba(22,25,28,.9);border-radius:2px;transform:rotate(-.8deg) scale(.97);transform-origin:50% 0;opacity:.62;box-shadow:2px 3px 0 rgba(0,0,0,.25);transition:opacity 300ms var(--ease-io),transform 300ms var(--ease-io),box-shadow 300ms var(--ease-io)}
.fsheet.got{opacity:1;transform:rotate(-.8deg) scale(1);box-shadow:0 1px 0 rgba(0,0,0,.5),0 22px 44px -18px rgba(0,0,0,.85)}
.fsheet .fs-h{display:flex;justify-content:space-between;gap:8px;height:26px;align-items:center;padding:0 10px;border-bottom:1px solid rgba(22,25,28,.18);font:400 10.5px/1 var(--mono);color:#3C4148}
.fsheet .fs-h span:last-child{display:flex;align-items:center;gap:5px;transition:color 220ms var(--ease-io)}
.fsheet .fs-h i{width:5px;height:5px;border-radius:50%;background:#8A9097}
.fsheet.got .fs-h i{background:var(--ok)}
.fsheet .fs-b{padding:10px 10px 12px;font:400 12px/1.55 var(--mono);color:#565C63}
.fsheet .fs-b .ln{color:#16191C}
.fsheet .wstrip{margin:8px 0 0;display:none}
.fsheet.got .wstrip{display:flex}

/* verify: the card is focal; Cursor's own claim sits behind it */
.vstack{position:relative;margin:28px 0 0 28px}
.vmsg{position:absolute;left:-44px;top:-40px;width:270px;z-index:0;background:#F8F7F3;border:1.25px solid rgba(22,25,28,.5);border-radius:2px;transform:rotate(-3deg);box-shadow:2px 3px 0 rgba(22,25,28,.06);color:rgba(22,25,28,.7)}
.vmsg .fs-h{display:flex;justify-content:space-between;height:24px;align-items:center;padding:0 9px;border-bottom:1px solid rgba(22,25,28,.14);font:400 10px/1 var(--mono)}
.vmsg p{padding:9px 9px 11px;font:400 11.5px/1.5 var(--mono)}
.vstack .vcard{position:relative;z-index:1}
.vstamp{position:absolute;right:-14px;top:-16px;z-index:2;padding:6px 10px 5px;background:var(--paper);border:1.5px solid var(--ink);border-radius:3px;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink);transform:rotate(-7deg);opacity:0;pointer-events:none}
.vstamp small{display:block;margin-top:3px;font:400 8.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.vstamp.on{opacity:1;animation:stampset 220ms var(--ease-out) both}
@keyframes stampset{from{transform:rotate(-7deg) scale(1.06)}to{transform:rotate(-7deg) scale(1)}}
#verify .v-grid>div:first-child{position:relative}

/* points: the epoch card on a ledger */
.ledger{position:relative}
.ledger>.rules{position:absolute;inset:-36px -48px;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,transparent 0 44px,rgba(255,255,255,.07) 44px 45px,transparent 45px) 0 0/100% 100% no-repeat,
  repeating-linear-gradient(180deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px);
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.ledger .pcard{position:relative;z-index:1}
.pfeed li.land{animation:land 1200ms var(--ease-out) both}
@keyframes land{0%{background:rgba(255,255,255,.1)}18%{background:rgba(255,255,255,.1)}100%{background:transparent}}

/* scale: three sheets at three depths, the strip is what moves */
.sys .st{background:#F8F7F3;transition:opacity 300ms var(--ease-io)}
.sys .st:nth-child(1){position:relative;z-index:3;transform:rotate(-.6deg);border-color:rgba(17,20,22,.85);box-shadow:0 1px 0 rgba(22,25,28,.4),0 14px 30px -18px rgba(22,25,28,.35)}
.sys .st:nth-child(3){position:relative;z-index:2;transform:translateY(8px) rotate(.5deg) scale(.985);border-color:rgba(17,20,22,.55);box-shadow:1px 2px 0 rgba(22,25,28,.08)}
.sys .st:nth-child(5){position:relative;z-index:1;transform:translateY(16px) rotate(-.4deg) scale(.97);border-color:rgba(17,20,22,.38);box-shadow:none}
.sys .st:nth-child(5) h3{background:#2A2E33}
.sys .wstrip{box-shadow:0 1px 0 rgba(0,0,0,.4),0 16px 30px -14px rgba(0,0,0,.6)}

/* network: a physical ticket */
.tkwrap{position:relative;justify-self:end;width:100%;max-width:540px}
.tkwrap>.rules{position:absolute;inset:-40px -60px;z-index:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.tkwrap .ticket{position:relative;z-index:1;transform:rotate(-1deg);max-width:none;box-shadow:0 1px 0 rgba(0,0,0,.5),0 26px 50px -22px rgba(0,0,0,.85)}
.ticket::before{content:"";position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.8);border:1px solid var(--border-2)}
.ticket header{padding-top:30px}
.netband .wrap>div:first-child{position:relative}

@media (max-width:1100px){
  .vstack{margin:44px 0 0 20px}
  .tkwrap{justify-self:start}
}
@media (max-width:900px){
    .plate::after{right:0}
  .tickcol{display:none}
}
@media (max-width:560px){
  .vmsg{left:-12px;width:220px}
  .vstamp{right:-4px}
  .sys .st:nth-child(n){transform:none}
  .tkwrap>.rules,.ledger>.rules{inset:-20px -10px}
}
@media (prefers-reduced-motion:reduce){
  .vstamp.on{animation:none}
}

/* ---------- tightening pass ---------- */
/* hero: ledger of quiet parallel work under the strip */
.ledger2{position:absolute;left:110px;top:502px;width:560px;z-index:1;font:400 10.5px/1.6 var(--mono);color:rgba(22,25,28,.6)}
.ledger2 div{display:flex;gap:8px;white-space:nowrap;overflow:hidden}
.ledger2 b{font-weight:500;color:rgba(22,25,28,.8);flex:none;width:52px}
.ledger2 span{overflow:hidden;text-overflow:ellipsis;transition:opacity 220ms var(--ease-io)}
.ledger2 span.fade{opacity:0}

/* section 2: parallel work inside the stage */
.pbody{flex:1;display:grid;grid-template-columns:210px minmax(0,1fr)}
.prail{border-right:1px solid var(--border);padding:8px 0 8px;background:rgba(255,255,255,.012)}
.prail li{position:relative;padding:8px 12px;border-bottom:1px solid var(--border)}
.prail li b{display:block;font-size:12px;font-weight:550;color:var(--text);white-space:nowrap}
.prail li span{display:block;margin-top:2px;font:400 10.5px/1.3 var(--mono);color:var(--text-3);transition:opacity 220ms var(--ease-io),color 220ms var(--ease-io)}
.prail li span.fade{opacity:0}
.prail li.attn{background:rgba(201,154,67,.05)}
.prail li.attn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--attn)}
.prail li.attn span{color:var(--attn)}
.pbody .screen-work{margin:var(--s3) var(--s3) var(--s3)}

/* network: board + ticket */
.netband .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.market{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.board{position:relative;z-index:0;margin-top:34px;margin-right:-6px;background:rgba(17,20,24,.72);border:1px solid var(--border);border-radius:8px;font-family:var(--mono);color:var(--text-2)}
.board header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-size:10.5px;letter-spacing:.08em;color:var(--text-3)}
.board header b{font-weight:500;color:var(--text-2);letter-spacing:.04em}
.jb li{position:relative;padding:9px 46px 9px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.jb li:last-child{border-bottom:0}
.jb .t{display:block;font:500 12px/1.35 var(--sans);color:rgba(242,243,245,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jb .m{display:block;margin-top:2px;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jb .chip{position:absolute;right:10px;top:10px;padding:2px 5px;border:1px solid var(--border-2);border-radius:3px;font-size:9.5px;color:var(--text-3);background:none}
.jb li.match{background:rgba(255,255,255,.04)}
.jb li.match::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--text-2)}
.jb li.match .t{color:var(--text)}
.jb .chip.on{color:var(--text);border-color:var(--text-3)}
.jb .chip.ok{color:rgba(89,169,120,.85);border-color:rgba(89,169,120,.35)}
.market .tkwrap{position:relative;z-index:1;max-width:none}

/* scale: governance layers, the Workstate moves upward */
.layers{display:flex;flex-direction:column;gap:10px;margin-top:var(--s6)}
.band{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) auto 316px;align-items:center;gap:16px;min-height:72px;padding:10px 14px 10px 0;background:#F8F7F3;border:1px solid rgba(17,20,22,.3);border-radius:2px;transition:opacity 300ms var(--ease-io)}
.band h3{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 14px;margin:-10px 0;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:550}
.band h3 span{font:400 10.5px/1 var(--mono);color:var(--ink-mute)}
.band .items{font-size:13.5px;color:var(--ink-2);opacity:.45;transition:opacity 300ms var(--ease-out)}
.band .items i{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:4px;border:1px solid var(--ink);font:500 9.5px/1 var(--mono);font-style:normal;vertical-align:-3px}
.band .chk{font:400 11.5px/1.3 var(--mono);color:var(--ink);white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity 220ms var(--ease-io),transform 220ms var(--ease-io)}
.band .chk b{color:var(--ok);font-weight:500}
.band .slot{min-height:48px;display:flex;align-items:center}
.band.lit .items{opacity:1}
.band.done .chk{opacity:1;transform:none}
.band[data-l="0"]{z-index:3;border-color:rgba(17,20,22,.85);box-shadow:0 1px 0 rgba(22,25,28,.4),0 14px 30px -18px rgba(22,25,28,.35)}
.band[data-l="1"]{z-index:2;transform:scale(.99);border-color:rgba(17,20,22,.5)}
.band[data-l="2"]{z-index:1;transform:scale(.98);border-color:rgba(17,20,22,.32)}
.band[data-l="2"] h3{background:#2A2E33}
.band .wstrip{box-shadow:0 1px 0 rgba(0,0,0,.4),0 16px 30px -14px rgba(0,0,0,.6)}
.shipped{margin-top:12px;text-align:right;font:400 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);opacity:0;transition:opacity 300ms var(--ease-io)}
.shipped.on{opacity:1}
#scale.sec{padding:96px 0}

/* spacing */
.sec.paper{padding:120px 0}
#attention{padding-top:104px}
.hero.paper-hero{padding:88px 0 80px;min-height:0}
.v-grid,.p-grid,.netband .wrap{align-items:start}
.v-grid>div:first-child,.p-grid>div:first-child,.netband .wrap>div:first-child{padding-top:44px}


/* workstate: secondary metadata a touch stronger */
.wso dt{color:#7C838C}
.prov{color:#80878F;border-color:rgba(255,255,255,.14)}

@media (max-width:1100px){
  .netband .wrap{grid-template-columns:1fr}
  .market{grid-template-columns:1fr}
  .board{margin:0 0 18px}
  .band{grid-template-columns:120px minmax(0,1fr) 300px}
  .band .chk{grid-column:2;grid-row:2;margin-top:-4px}
  .band .slot{grid-row:1/3;grid-column:3}
  .v-grid>div:first-child,.p-grid>div:first-child,.netband .wrap>div:first-child{padding-top:0}
}
@media (max-width:640px){
  .pbody{grid-template-columns:1fr}
  .prail{display:none}
  .jb .m .acc{display:none}
  .band{grid-template-columns:1fr;padding:0 0 12px}
  .band h3{flex-direction:row;justify-content:space-between;align-items:center;margin:0;padding:10px 14px}
  .band .items,.band .chk{padding:0 14px}
  .band .chk{grid-column:1;grid-row:auto;margin:0}
  .band .slot{grid-column:1;grid-row:auto;padding:0 14px}
  .band[data-l]{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .band .items,.band .chk,.shipped{transition:none}
}

@media (max-width:768px){
  .sec.paper,#scale.sec{padding:var(--s12) 0}
  #attention{padding-top:var(--s12)}
  .hero.paper-hero{padding:72px 0}
}

/* ---------- hero: one full-viewport composition ---------- */
.hero.paper-hero.hx{--gut:max(30px,calc((100% - 1240px) / 2 + 30px));--hh:clamp(600px,calc(100vh - 64px),980px);min-height:var(--hh);padding:0;display:flex;align-items:center}
.hx-copy{position:relative;z-index:3;margin-left:var(--gut);max-width:480px;padding:40px 0}
.hx-copy::before{content:"";position:absolute;inset:-100px -150px -100px -130px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(242,241,237,.95),rgba(242,241,237,.82) 55%,rgba(242,241,237,0))}
.hx-field{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);width:min(57vw,calc((var(--hh) - 96px) * 1.419));z-index:1}
.hero.hx .amb{aspect-ratio:880/620}
.hero.hx .amb::before{display:none}
/* the drafted table covers the whole hero; it fades out toward the copy so the headline sits on clean paper */
.hx-plate{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:url(art/table-plate.webp) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 18%,#000 45%);mask-image:linear-gradient(90deg,transparent 0,transparent 18%,#000 45%)}
.hero.hx .amb-in{width:880px;height:620px}
.hero.hx .leader,.hero.hx .trace2{width:880px;height:620px}
.hero.hx .edge{top:476px}
.hero.hx #shTerm .tab{left:84px}
.hero.hx .amb .wstrip{left:250px;top:492px;width:560px}
.hero.hx .ledger2{left:252px;top:544px;width:560px}
/* the two sheets nearest the copy sit behind it, quiet */
.sheet.ghost{box-shadow:none!important;border-color:rgba(22,25,28,.5)}
.js .amb.go .sheet.ghost{opacity:.42}
#shCode .sh-b{height:calc(100% - 46px)}
.cfoot{position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:center;gap:8px;padding:0 9px;border-top:1px solid rgba(22,25,28,.18);font:400 10px/1 var(--mono);color:#6A7077;background:#F8F7F3}
.cfoot span{flex:none;min-width:74px}
.cfoot i{flex:1;height:3px;background:rgba(22,25,28,.12)}
.cfoot b{display:block;height:100%;background:#16191C;transition:width 600ms var(--ease-io)}
.term .nl{animation:nlIn 220ms var(--ease-io) both}
.term .gone{transition:opacity 200ms var(--ease-io);opacity:0}
@keyframes nlIn{from{opacity:0}to{opacity:1}}
.br-l .txt,.hx-swap{transition:opacity 220ms var(--ease-io)}
.hx-fade{opacity:0}
.term .q.done{text-decoration:line-through;text-decoration-color:rgba(22,25,28,.45);color:#9AA0A6}
.ap-opts button{transition:background 160ms var(--ease-io),border-color 160ms var(--ease-io),transform 160ms var(--ease-io)}
.ap-opts button.pressed{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);transform:scale(.98)}
.rs-block p.rs-ok{color:var(--text)}

/* decorative ruling in points/network must never cause sideways scroll */
#points,#network{overflow-x:clip}

/* stepper: what the scene is showing, pausable */
.hx-steps{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px 22%;font:400 11px/1 var(--mono);color:var(--ink-3)}
.hx-steps ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;min-width:0}
.hx-steps li[data-s]{position:relative;display:flex;align-items:center;gap:6px;padding:6px 0;white-space:nowrap;transition:color 220ms var(--ease-io)}
.hx-steps .sd{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.hx-steps li.on,.hx-steps li.done{color:var(--ink)}
.hx-steps li[data-s="1"].on .sd{background:var(--attn);opacity:1}
.hx-steps u{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);text-decoration:none}
.hx-steps u b{display:block;height:100%;width:0;background:var(--ink)}
.hx-steps .sep{width:28px;height:1px;background:var(--rule)}
.hx-ctl{display:flex;gap:14px;flex:none}
.hx-ctl button{font:400 11px/1 var(--mono);color:var(--ink-2);padding:6px 2px}
.hx-ctl button:hover{color:var(--ink)}
.hx-ctl button:disabled{opacity:.4;cursor:default}
.hx-ctl button:focus-visible,.hx-steps :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (max-width:1100px){
  .hero.paper-hero.hx{min-height:0;display:block;padding:72px 0 56px}
  .hx-copy{margin:0 24px;max-width:640px;padding:0}
  .hx-copy::before{display:none}
  .hx-plate{opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 30%,#000 60%);mask-image:linear-gradient(180deg,transparent 0,transparent 30%,#000 60%)}
  .hx-field{position:relative;right:auto;top:auto;transform:none;width:auto;margin:40px 24px 0}
  .hx-steps{margin-left:0;flex-wrap:wrap}
  .js .amb.go .sheet.ghost{opacity:.8}
}
@media (max-width:560px){
  .hx-copy{margin:0 16px}
  .hx-field{margin:32px 16px 0}
  .hx-steps ol{flex-wrap:wrap}
  .hx-steps .sep{width:12px}
}


/* ---------- pre-ship tightening ---------- */
.js .amb.go .sheet.ghost{opacity:.54}
.sheet.quiet>.sh-h,.sheet.quiet>.sh-b{opacity:.82}
.apill{min-width:196px}
.ap-c{height:30px;padding:0 16px;font-size:13px;font-weight:550}
.hero.hx .amb .wstrip{left:220px;width:620px;z-index:5}
.hero.hx .ledger2{left:222px;width:620px}
.amb .wstrip .ws-kv span{overflow:visible;text-overflow:clip}
.amb .wstrip .ws-kv:last-of-type{flex:1.25 1 0}
.ledger2 span{text-overflow:clip}
.exnote{margin:4px 0 0;font:400 9.5px/1 var(--mono);letter-spacing:.06em;color:rgba(22,25,28,.45)}
.exnote.dark{margin-top:10px;font-size:10.5px;color:var(--text-3)}
#attention .h2-huge{font-size:clamp(36px,5.6vw,76px)}
.vstamp{transition:opacity 300ms var(--ease-io)}
.js .layers .band{opacity:0;transition:opacity 500ms var(--ease-out),translate 500ms var(--ease-out);translate:0 10px}
.js .layers.in .band{opacity:1;translate:0 0}
.js .layers.in .band[data-l="0"]{transition-delay:0ms}
.js .layers.in .band[data-l="1"]{transition-delay:140ms}
.js .layers.in .band[data-l="2"]{transition-delay:280ms}
.betaband{background:var(--grain-l) 0 0/180px 180px,var(--bg);padding:var(--s12) 0;border-top:1px solid var(--border)}
.betaband .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.betaband .lede{max-width:34em}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s3)}
.foot-links a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){ .js .layers .band{opacity:1;translate:none} }

/* team feedback: demo text must never sit behind copy */
.hero.hx .sheet.ghost{display:none}
@media (max-width:1100px){.cap:first-child{padding-left:0}.cap{padding:28px 0}.cap+.cap{border-left:0;border-top:1px solid var(--border)}}
#verify .h2{font-size:clamp(30px,3vw,42px)}
#verify .h2 .q{white-space:nowrap}

/* hero: code + billing doc return as minimized sheets (header + live status only), clear of the copy */
.hero.hx .sheet.ghost{display:block}
.hero.hx #shCode{--x:560px!important;--y:92px!important;--w:300px!important;--h:28px!important;--r:1.4deg!important;--s:1!important}
.hero.hx #shDoc{--x:590px!important;--y:128px!important;--w:270px!important;--h:28px!important;--r:-1.2deg!important;--s:1!important}
.hero.hx #shCode>:not(.sh-h),.hero.hx #shDoc>:not(.sh-h){display:none}
.hero.hx #shCode .sh-h,.hero.hx #shDoc .sh-h{border-bottom:0}
.js .hero.hx .amb.go #shCode,.js .hero.hx .amb.go #shDoc{opacity:.92}

/* ---------- cleanup: one thing at a time (headline → main demo → CTA → support → props → micro labels) ---------- */
body{line-height:1.6}
/* hero: constrained two-column band, aligned to the nav container; wider viewport ≠ wider storytelling */
.hero.paper-hero.hx{display:flex;align-items:center;min-height:clamp(540px,calc(100vh - 64px),720px);padding:56px 0 72px}
.hx-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 30px;display:grid;grid-template-columns:minmax(0,460px) clamp(560px,44vw,656px);column-gap:64px;justify-content:start;align-items:center}
.hero.hx .hx-copy{margin:0;max-width:460px;padding:0}
.hero.hx .hx-copy::before{display:none}
.hero.hx .hx-field{position:relative;right:auto;top:auto;transform:none;width:auto;margin:0}
.hero.hx .amb{aspect-ratio:640/440}
.hero.hx .amb-in{width:640px;height:440px}
.hero.hx .leader{display:none}
.hero.hx .amb-in::before,.hero.hx .amb-in::after{display:none}
.hero.hx .sheet.hx-off{display:none!important}
.hero.hx #shTerm .tab{left:84px}
.js .hero.hx .amb.go .sheet.hx-support{opacity:.55}
.hero.hx .sheet.hx-support>.sh-h,.hero.hx .sheet.hx-support>.sh-b{opacity:1}
.hero.hx #shTerm .sh-b.term{height:calc(100% - 26px - 30px);overflow:hidden}
.t-foot{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;padding:0 12px;border-top:1px solid rgba(22,25,28,.14);background:#F8F7F3;font:500 12px/1 var(--sans);color:#3C4148;transition:color 220ms var(--ease-io)}
.t-foot:empty{display:none}
.t-foot.attn{color:#8A6516}
/* the pill: small, attached above the main card */
.hero.hx .apill{top:20px;min-width:0;border-radius:14px}
.hero.hx .ap-c{height:28px;padding:0 14px;font-size:12.5px;font-weight:550}
.hero.hx .ap-b{width:300px}
.hx-replay{position:absolute;right:4px;bottom:-30px;font:500 12.5px/1 var(--sans);color:var(--ink-3);padding:6px 2px}
.hx-replay:hover{color:var(--ink)}
.hx-replay:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* props: faint, only in the far right margin and the bottom edge; fixed size so big screens do not get louder */
.hero.hx .hx-plate{opacity:.28;background:url(art/table-plate.webp) right bottom/1500px auto no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% + 620px),#000 calc(50% + 720px));
  mask-image:linear-gradient(90deg,transparent calc(50% + 620px),#000 calc(50% + 720px))}
/* typography: sans for messaging, mono only inside demo internals */
.hero.hx .works{font:400 13px/1.4 var(--sans);color:var(--ink-3)}
.cap .ind{font:500 12.5px/1 var(--sans)}
.handled-h span{font-family:var(--sans)}
/* section 2: let it breathe */
#attention{padding-top:144px;padding-bottom:144px}
#attention .h2-huge{font-size:clamp(32px,4.9vw,66px)}
#attention .pstage{margin-top:72px}
.pstage .menubar{border-bottom-color:transparent}
.prail{border-right-color:rgba(255,255,255,.05)}
.prail li{border-bottom:0}
.screen-foot{border-top-color:rgba(255,255,255,.05)}
.n-choose{flex-wrap:wrap}
.n-choose .btn{flex:1 1 180px;justify-content:center}
/* simulated product UI is not text: no selection, no text cursor, no accidental interaction */
.hx-field,.hx-field *,.hx-plate,.pstage,.pstage *,#switch .desk,#switch .desk *,.wso,.wso *,.fork,.fork *,.vstack,.vstack *,.layers,.layers *,.market,.market *,.tkwrap,.tkwrap *{-webkit-user-select:none;user-select:none;cursor:default}
:is(.hx-field,.pstage,#switch .desk,.wso,.fork,.vstack,.layers,.market) :is(button,a,[role=radio],[role=option],label){cursor:pointer}
#switch .desk input{-webkit-user-select:text;user-select:text;cursor:text}
.hx-plate,.hero.hx .sheet,.hero.hx .leader,.hero.hx .crop,.pstage .menubar,.pstage .prail,.pstage .screen-work,.fork .pkg,.fork .lane,.fsheet,.vmsg,.vstamp,.vcard .checks,.board,.ticket,.layers .band{pointer-events:none}
@media (max-width:1100px){
  .hero.paper-hero.hx{display:block;min-height:0;padding:64px 0 72px}
  .hx-inner{grid-template-columns:minmax(0,1fr);row-gap:48px;padding:0 30px;max-width:none}
  .hero.hx .hx-field{max-width:720px}
  .hero.hx .hx-copy{max-width:640px}
  .hero.hx .hx-plate{display:none}
}
@media (max-width:768px){
  .hx-inner{padding:0 24px}
}
@media (max-width:560px){
  .hx-inner{padding:0 16px}
  .hx-replay{bottom:-28px}
}
.hero.hx .sub{max-width:30em;text-wrap:pretty}
.hero.hx h1{text-wrap:balance}
.prail li b{overflow:visible}
.cap{display:flex;flex-direction:column;align-items:flex-start}
.cap .ind{margin-top:auto;transform:translateY(0)}
.cap p{margin-bottom:18px}
.cap .ind i{background:var(--text-3)}
.nshell{display:none!important}
.hero.hx .sub{color:#3F454C}
.paper .lede{color:#4A5057}
.cap p{margin-bottom:0}
.hero.hx .eyebrow{margin:0 0 18px;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--ink-3)}
.hero.hx .pts-line{margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);max-width:360px;font:550 14px/1.4 var(--sans)}
.hero.hx .pts-line a{color:var(--ink);text-decoration:none}
.hero.hx .pts-line a:hover{text-decoration:underline;text-underline-offset:3px}

/* narrative draft */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--s3)}
.flow li{display:flex;align-items:center;padding:6px 10px;border:1px solid rgba(17,20,22,.2);border-radius:var(--r-btn);font-size:13px;white-space:nowrap}
.flow li b{font-weight:550;color:var(--ink)}
.flow li:not(.now):not(.key){border-style:dashed}
.flow li:not(.now):not(.key) b{color:var(--ink-2)}
.flow li.key{border:0;padding:6px 0 6px 6px;gap:6px;font:400 11.5px/1 var(--mono);color:var(--ink-3)}
.flow .key i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(17,20,22,.35)}
.flow .key i.k-next{border-style:dashed;margin-left:6px}
.thesis .th-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:start}
.thesis .q2{display:block;color:var(--text-2)}
.th-body p{font-size:18px;line-height:1.6;color:var(--body);max-width:32em}
.th-body p+p{margin-top:var(--s2)}
.pr-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:center}
.pr-steps{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.pr-steps li{display:grid;grid-template-columns:96px 1fr;gap:var(--s2);padding:16px 20px;font-size:15px;color:var(--body)}
.pr-steps li+li{border-top:1px solid var(--border)}
.pr-steps b{font-weight:550;color:var(--text)}
.pr-run{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s3);border-top:1px solid var(--border)}
.pr-run div{padding:16px 0 0}
.pr-run dt{font-size:12.5px;color:var(--text-2)}
.pr-run dd{margin-top:6px;font:500 24px/1 var(--mono);color:var(--text)}
.road{margin-top:var(--s4);display:grid;gap:0;border-top:1px solid var(--border);max-width:30em}
.road li{display:grid;grid-template-columns:72px 1fr;gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-2)}
.road b{font:500 12.5px/1.6 var(--mono);color:var(--text-3)}
.road li.now b{color:var(--ok)}
.road li.now span{color:var(--text)}
@media (max-width:900px){.thesis .th-grid,.pr-grid{grid-template-columns:1fr;gap:var(--s5)}}
@media (max-width:560px){.pr-steps li{grid-template-columns:1fr;gap:4px}.pr-run{grid-template-columns:1fr}.pr-run div{padding:12px 0;border-bottom:1px solid var(--border)}.hero h1 span{white-space:normal}}
/* narrative v2 */
.hero.hx h1{font-size:clamp(38px,3.3vw,47px);line-height:1.06}
.hero.hx h1 span{display:block}
.tag{display:inline-block;margin-top:var(--s2);padding:3px 8px;border:1px dashed var(--border-2);border-radius:6px;font:400 11.5px/1.4 var(--mono);color:var(--text-3)}
.tag.live{border-style:solid;color:var(--ok);border-color:rgba(89,169,120,.45)}
.paper .tag{border-color:rgba(17,20,22,.3);color:var(--ink-3)}
.paper .tag.live{color:#2F7A4E;border-color:rgba(47,122,78,.45)}
.lc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--s6);counter-reset:none}
.lc li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;background:#fff;border:1px solid rgba(17,20,22,.16);border-radius:var(--r-card);color:var(--ink)}
.lc li .n{font:500 12px/1 var(--mono);color:var(--ink-3)}
.lc li b{font-size:16px;font-weight:550}
.lc li span:not(.n){font-size:14px;line-height:1.5;color:var(--ink-2)}
.lc li em{margin-top:auto;padding-top:10px;font:normal 400 11.5px/1 var(--mono);color:var(--ink-3)}
.lc li em.live{color:#2F7A4E}
.lc li.check{border:1.5px solid var(--ink);box-shadow:0 1px 0 rgba(17,20,22,.08),0 14px 30px -18px rgba(17,20,22,.35)}
.lc li.out{border-color:rgba(17,20,22,.3)}
.lc li:not(:nth-child(3n))::after{content:"";position:absolute;right:-9px;top:50%;width:6px;height:6px;border-top:1px solid var(--ink-3);border-right:1px solid var(--ink-3);transform:translateY(-50%) rotate(45deg)}
.market{position:relative}
.market-note{position:absolute;top:-28px;left:0;margin:0}
.caps .cap .tag{margin-top:var(--s2)}
@media (max-width:900px){.lc{grid-template-columns:1fr}.lc li::after{display:none}.market-note{position:static;margin-bottom:var(--s2)}}