:root{--serif:"Instrument Serif",Georgia,serif;--paper:#f6f2ea;--card:#fffdf8;--deep:#131210;--deep2:#1c1a17}
@media (prefers-color-scheme:dark){:root{--paper:#0e1013;--card:#15181c;--deep:#08090b;--deep2:#121418}}
body{background:var(--paper)}
main{max-width:1200px}
.serif{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
.serif em{font-style:italic;color:var(--accent)}
.kicker{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.muted{color:var(--muted)} .small{font-size:14px}

/* header */
.top{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px)}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
nav a{margin-left:20px}
nav .nav-cta{background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:999px}
nav .nav-cta:hover{color:var(--paper);background:var(--accent)}

/* hero */
.hero-dark{background:radial-gradient(1200px 500px at 85% -10%,#ff5a1f33,transparent 60%),var(--deep);color:#f3eee4}
.hero-inner{max-width:1200px;margin:0 auto;padding:clamp(56px,9vw,120px) clamp(16px,5vw,40px) clamp(48px,6vw,80px)}
.hero-dark h1{font-size:clamp(46px,8vw,104px);line-height:.98;max-width:13ch;margin:0 0 26px;color:#f7f2e8}
.hero-dark .eyebrow{color:#ff8a5c}
.lede{max-width:58ch;font-size:clamp(17px,2vw,20px);color:#c9c2b4;margin:0 0 34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:64px}
.btn-primary,.btn-ghost{display:inline-block;text-decoration:none;padding:14px 24px;border-radius:999px;font-weight:600}
.btn-primary{background:var(--accent);color:#fff;transition:transform .2s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid #ffffff33;color:#f3eee4}
.btn-ghost:hover{border-color:#ffffff88}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);border-top:1px solid #ffffff22;padding-top:28px}
.facts strong{display:block;font:400 clamp(34px,4.5vw,54px)/1 var(--serif);color:#fff;margin-bottom:8px}
.facts span{font-size:14px;color:#a9a294;line-height:1.45}

/* problem band */
.band{padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,70px);border-bottom:1px solid var(--rule)}
.statement{font-size:clamp(28px,3.8vw,46px);line-height:1.15;max-width:28ch;margin:0}

/* how */
.how{padding:clamp(56px,8vw,100px) 0}
.h2{font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:0 0 40px;max-width:20ch}
.chain{display:flex;align-items:stretch;gap:0;margin:0 0 56px;overflow-x:auto;padding-bottom:6px}
.node{flex:1 1 0;min-width:150px;padding:18px 16px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:6px;animation:rise .7s both}
.node:nth-child(3){animation-delay:.1s}.node:nth-child(5){animation-delay:.2s}.node:nth-child(7){animation-delay:.3s}.node:nth-child(9){animation-delay:.4s}
.node span{font:600 12px var(--mono);color:var(--muted)}
.node b{font:400 26px/1.1 var(--serif)}
.node i{font-style:normal;font-size:14px;color:var(--muted);line-height:1.4}
.node.accent{border-top-color:var(--accent)} .node.accent b{color:var(--accent)}
.link{flex:0 0 28px;align-self:flex-start;margin-top:26px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 10px);background-size:20px 2px;animation:flow 1.2s linear infinite}
@keyframes flow{to{background-position:20px 0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
.h3{font:400 26px var(--serif);text-transform:none;letter-spacing:0;margin:0 0 10px}
.how-grid p{color:var(--muted);margin:0;font-size:16px}

/* workspace */
.workspace{padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--rule)}
.ws-head .h2{margin-bottom:10px}
.ws-head{margin-bottom:36px}
.ws-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:start}
.panel{background:var(--card);border-radius:20px;padding:8px 24px 24px;box-shadow:0 1px 0 var(--rule),0 24px 60px -40px #0006;border-top:0}
.panel .field{padding:20px 0}
.label{font:600 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--ink)}
.field-head select{font-size:13px;max-width:60%}
.rows.scroll{max-height:260px;overflow:auto;padding-right:6px}
.crow{grid-template-columns:1fr 84px auto}
.sliders .slider{margin-top:14px}
.go{border-radius:999px;margin-top:18px}
.results{position:sticky;top:84px}
.empty{border:1px dashed var(--rule);border-radius:20px;padding:56px 32px;text-align:center}
.empty .serif{font-size:30px;margin:0 0 8px}
.board-wrap{border-radius:20px}
.results:has(#boardWrap:not([hidden])) .empty{display:none}
.board-head,.brow{grid-template-columns:2.2ch minmax(0,2.4fr) 6ch minmax(0,1.6fr) 6ch 7ch}

/* ask */
.ask{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--rule)}
.ask .h2{margin-bottom:14px}
.console{background:var(--deep2);color:#efe9dc;border-radius:20px;padding:22px}
.console input[type=text]{color:#efe9dc;border-bottom-color:#ffffff55}
.console .chip{background:transparent;color:#d8d1c3;border-color:#ffffff33}
.console .answer{color:#efe9dc}

/* proof */
.proof{padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--rule)}
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px)}
.qdetails{background:var(--card);border-radius:20px;padding:18px 22px}
.qdetails summary{cursor:pointer;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sources{padding-left:18px}

/* footer */
.foot{background:var(--deep);color:#c9c2b4;margin-top:40px;padding:clamp(48px,6vw,80px) clamp(16px,5vw,40px) 32px}
.foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot .wordmark{color:#f3eee4}
.foot-brand p{max-width:36ch;font-size:15px}
.foot h4{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f3eee4;margin:6px 0 14px}
.foot-grid a,.foot-grid span{display:block;color:#c9c2b4;text-decoration:none;font-size:15px;margin-bottom:8px}
.foot-grid a:hover{color:var(--accent)}
.foot-note{max-width:1200px;margin:40px auto 0;padding-top:20px;border-top:1px solid #ffffff1a;font-size:13px;color:#8a8478}
footer:not(.foot){display:none}

@media (max-width:900px){
  .ws-grid,.ask,.proof-grid{grid-template-columns:1fr}
  .results{position:static}
  .facts,.how-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  nav a:not(.nav-cta){display:none}
  .chain{flex-direction:column}.link{width:2px;height:22px;margin:0 0 0 18px;flex-basis:22px;background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 10px)}
}
@media (prefers-reduced-motion:reduce){.node,.link{animation:none}}
.foot{display:block}
.panel .go{font-size:clamp(24px,3vw,34px);padding:16px}
.workspace .cell{font-size:clamp(12px,1.25vw,17px)}
.board-head,.brow{grid-template-columns:2.4ch minmax(0,1fr) 4.2ch 6ch 5ch 5ch;gap:10px}
.row-actions .link{white-space:nowrap}
.proof-grid{align-items:start}
.ws-grid>*,.ask>*,.proof-grid>*{min-width:0}
html{overflow-x:hidden}
@media (max-width:900px){
  .node{min-width:0}
  .board-head,.brow{grid-template-columns:2ch minmax(0,1fr) 5.5ch 4.5ch 4.5ch;gap:6px}
  .board-head span:nth-child(3),.brow>*:nth-child(3){display:none}
  .workspace .cell{font-size:12px}
  .field-head select{max-width:100%}
  .hero-dark h1{font-size:clamp(40px,11vw,60px)}
}
.wsbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:var(--card);border-radius:16px;padding:14px 20px;margin-bottom:20px;box-shadow:0 1px 0 var(--rule)}
.ws-copy{flex:1 1 280px}
.ws-form{display:flex;gap:8px}
.ws-form input{min-width:200px}
.ws-btn{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:9px 18px;font:600 14px var(--body);cursor:pointer}
.ws-link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:14px;margin-left:8px}
.ws-hist{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.ws-pill{font:500 13px var(--mono);border:1px solid var(--rule);border-radius:999px;padding:4px 12px}
.ws-pill.accent{border-color:var(--accent);color:var(--accent)}