/* haydengross.com design system. Tokens mirror DESIGN.md. Light paper is the default. */
:root{
  --paper:#FAF8F4; --paper-2:#F3F0EA; --ink:#14181C; --ink-2:#2B323A; --muted:#5B6470; --rule:#E4E0D8; --rule-2:#D6D1C7;
  --accent:#0F5C4A; --accent-soft:#E6F0EC; --node:15,92,74;
  --display:"Fraunces","Iowan Old Style",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --max:1120px; --gutter:clamp(20px,4vw,48px);
  --r:10px; --shadow:0 1px 2px rgba(20,24,28,.05),0 18px 40px -24px rgba(20,24,28,.18);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.6s;
}
:root[data-theme="dark"]{
  --paper:#0F1214; --paper-2:#151A1D; --ink:#ECE8E1; --ink-2:#D3CEC5; --muted:#98A1AA; --rule:#242A2F; --rule-2:#30373D;
  --accent:#7FD1B4; --accent-soft:#12251F; --node:127,209,180;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -24px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1214; --paper-2:#151A1D; --ink:#ECE8E1; --ink-2:#D3CEC5; --muted:#98A1AA; --rule:#242A2F; --rule-2:#30373D;
    --accent:#7FD1B4; --accent-soft:#12251F; --node:127,209,180;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -24px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.05;font-variation-settings:"opsz" 96}
h1.display{font-size:clamp(40px,6.2vw,72px)}
h2.display{font-size:clamp(30px,4vw,46px)}
h3{font-size:19px;font-weight:600;letter-spacing:-.005em}
p{max-width:64ch}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:transform .2s var(--ease),opacity .2s}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.nav ul{display:flex;gap:26px;list-style:none;font-size:14px;color:var(--muted)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink)}
.nav .right{display:flex;align-items:center;gap:16px}
.theme{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.menu{display:none}
@media (max-width:760px){.nav ul{display:none} .nav ul.open{display:flex;position:absolute;left:0;right:0;top:60px;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:8px var(--gutter) 16px} .nav ul.open li{padding:12px 0;border-bottom:1px solid var(--rule)} .menu{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--rule-2);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}}
/* sections */
section{padding:clamp(64px,9vw,120px) 0}
section+section{border-top:1px solid var(--rule)}
.lead{font-size:clamp(20px,2.2vw,26px);line-height:1.4;max-width:30ch;color:var(--ink);font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.grid{display:grid;gap:clamp(24px,4vw,56px)}
.g-5-7{grid-template-columns:5fr 7fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.g-5-7,.g-3,.g-2{grid-template-columns:1fr}}
/* hero */
.hero{padding-top:clamp(56px,8vw,110px);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .lead{margin-top:22px}
.hero p.intro{margin-top:22px;color:var(--ink-2)}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .meta{margin-top:36px;font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.hero .meta a:hover{color:var(--ink)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
/* numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.num{padding:26px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.num:nth-child(4n){border-right:0} .num:nth-last-child(-n+4){border-bottom:0}
.num b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,48px);letter-spacing:-.02em;line-height:1;color:var(--ink);font-variation-settings:"opsz" 96}
.num b small{font-size:.55em;color:var(--muted)}
.num > span{display:block;margin-top:10px;font-size:14px;color:var(--muted);line-height:1.45}
.num b span{display:inline;font-size:inherit;color:inherit;margin:0;line-height:inherit}
@media (max-width:860px){.numbers{grid-template-columns:repeat(2,1fr)} .num:nth-child(2n){border-right:0} .num:nth-child(4n){border-right:1px solid var(--rule)} .num:nth-child(2n){border-right:0} .num:nth-last-child(-n+4){border-bottom:1px solid var(--rule)} .num:nth-last-child(-n+2){border-bottom:0}}
.foot{margin-top:16px;font-size:13.5px;color:var(--muted);max-width:70ch}
/* lists */
.plain{list-style:none}
.plain li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink-2)}
.plain li b{color:var(--ink);font-weight:600}
.plain li:first-child{border-top:1px solid var(--rule)}
/* brain */
.brain{margin-top:clamp(40px,6vw,72px);border:1px solid var(--rule);border-radius:14px;background:var(--paper-2);box-shadow:var(--shadow);overflow:hidden}
.brain-stage{position:relative;height:clamp(360px,52vw,560px)}
#brainCanvas{position:absolute;inset:0;width:100%;height:100%}
.brain-label{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;opacity:0;transition:opacity .8s var(--ease)}
.brain-label.on{opacity:1}
.brain-label b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.01em;color:var(--ink);text-transform:none;line-height:1}
.brain-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted);font-family:var(--mono)}
.brain-cap b{color:var(--ink);font-weight:600}
/* method */
.method{margin-top:clamp(48px,7vw,88px)}
.method svg{width:100%;height:auto;display:block}
.method .steps{list-style:none;counter-reset:s}
.method .steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink-2)}
.method .steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:5px}
.method .steps li b{color:var(--ink)}
.callout{margin-top:24px;font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.35;max-width:32ch}
.callout em{font-style:italic;color:var(--accent)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--rule);border-radius:var(--r);padding:22px 22px 24px;background:var(--paper);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.card:hover{border-color:var(--rule-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.card .k{font-family:var(--display);font-size:32px;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variation-settings:"opsz" 96}
.card h3{margin-top:14px}
.card p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.5}
.card .go{margin-top:16px;font-size:13px;color:var(--accent);font-weight:600}
/* prose pages */
.prose{max-width:none}
.wrap.prose{max-width:var(--max)}
.prose>*{max-width:68ch}
.prose>.tablewrap,.prose>table,.prose>.notprove{max-width:none}
.prose h2{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.01em;margin:44px 0 12px}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:17px}
.prose p+p{margin-top:14px}
.prose ul{padding-left:20px;margin-top:8px;margin-bottom:16px}
.prose li+li{margin-top:6px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin-top:12px}
.prose th,.prose td{text-align:left;padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
.tablewrap{overflow-x:auto}
.kicker{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tag{font-family:var(--mono);font-size:12px;padding:5px 10px;border:1px solid var(--rule-2);border-radius:999px;color:var(--muted)}
.notprove{margin-top:44px;padding:20px 22px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--paper-2)}
.notprove h3{margin:0 0 8px}
/* footer */
footer{border-top:1px solid var(--rule);padding:44px 0 60px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
/* reveal */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* brand page */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:860px){.swatches{grid-template-columns:repeat(2,1fr)}}
.sw{border:1px solid var(--rule);border-radius:8px;padding:12px 12px 10px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;color:#14181C;font-size:12px}
.sw.dark{color:#ECE8E1}
.sw span{font-family:var(--mono)} .sw b{font-family:var(--mono);font-weight:600;margin-top:2px} .sw i{font-style:normal;margin-top:2px}
/* The label sits on the swatch it describes, so it cannot be dimmed: at opacity .75
   on the mid-tone chips it measured 1.81:1. Full opacity plus a shadow that lifts it
   off whatever colour is behind, in both directions. */
.sw{text-shadow:0 1px 2px rgba(250,248,244,.85)}
.sw.dark{text-shadow:0 1px 2px rgba(20,24,28,.85)}
.specimen>div{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule);align-items:baseline}
.specimen>div:last-child{border-bottom:1px solid var(--rule)}
.specimen span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
@media (max-width:860px){.specimen>div{grid-template-columns:1fr;gap:6px}}
.prompt{white-space:pre-wrap;font-family:var(--mono);font-size:13.5px;line-height:1.55;background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;color:var(--ink-2)}
/* hero portrait */
.portrait{width:104px;height:104px;object-fit:cover;object-position:center 22%;border-radius:14px;border:1px solid var(--rule);margin-bottom:26px;display:block;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,var(--paper-2)),var(--accent-soft) 62%,color-mix(in srgb,var(--accent) 40%,var(--paper-2)))}
@media (max-width:760px){.portrait{width:84px;height:84px;margin-bottom:20px}}
#heroCanvas{opacity:.85}
:root[data-theme="dark"] #heroCanvas{opacity:.6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #heroCanvas{opacity:.6}}
/* catalog table of contents */
.toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 28px;max-width:none}
.toc a{font-family:var(--mono);font-size:12px;padding:6px 10px;border:1px solid var(--rule-2);border-radius:999px;color:var(--muted)}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.prose h2{scroll-margin-top:80px}
/* live strip */
.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
@media (max-width:1000px){.live-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.live-grid{grid-template-columns:1fr}}
.live{display:block;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.live:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--rule-2)}
.live img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.live-t{padding:14px 16px 16px}
.live-t b{display:block;font-size:15px;color:var(--ink)}
.live-t span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.5}
.meta a svg,.meta .li{vertical-align:-3px}
.meta a:hover .li{color:var(--accent)}

/* theme icon: show the mode you would switch TO (moon in light, sun in dark) */
.theme .ic-sun{display:none}.theme .ic-moon{display:block}
:root[data-theme="dark"] .theme .ic-sun{display:block}:root[data-theme="dark"] .theme .ic-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .ic-sun{display:block}:root:not([data-theme="light"]) .theme .ic-moon{display:none}}

/* catalog index */
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-bottom:18px}
.search{flex:1 1 260px;max-width:420px;padding:10px 14px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:15px}
.search:focus{outline:2px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;padding:6px 11px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
table.index{width:100%;border-collapse:collapse;font-size:15px}
table.index th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 10px 10px 0;border-bottom:1px solid var(--rule-2)}
table.index td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.index .c-g{width:150px}.c-w{width:130px;color:var(--muted);font-size:13.5px;white-space:nowrap}.c-s{width:150px;color:var(--muted);font-size:13.5px}
.rowbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;font-weight:600}
.rowbtn:hover{color:var(--accent)}
.detail{margin-top:8px;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:70ch}
tr.hide{display:none}
@media (max-width:760px){table.index .c-g,table.index th:first-child{display:none}.c-w{white-space:normal}}

/* compact live strip on first screen */
.live-t i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px}
.live-t .ext{font-weight:400;color:var(--muted);font-size:13px;margin-left:2px}
.live img{aspect-ratio:16/9}
.hero .lead{margin-top:18px}
.hero p.intro{margin-top:16px;max-width:60ch}
.hero .cta{margin-top:24px}
.hero .meta{margin-top:24px}
/* vault: full-screen graph with floating panes */
.vault{position:relative;height:calc(100vh - 60px);min-height:560px;overflow:hidden}
.vault-graph{position:absolute;inset:0;background:#0F1214}
#vaultCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.pane{position:absolute;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px) saturate(1.1);border:1px solid var(--rule-2);border-radius:14px;box-shadow:0 20px 60px -24px rgba(0,0,0,.6);z-index:5}
.pane-tl{left:18px;top:18px;width:min(340px,calc(100vw - 36px));padding:16px 16px 14px}
.pane-tr{right:18px;top:18px;width:min(440px,calc(100vw - 36px));max-height:calc(100% - 36px);overflow:auto;padding:22px 24px 26px}
.pane-bc{left:50%;transform:translateX(-50%);bottom:18px;max-width:min(380px,calc(100vw - 36px));padding:12px 14px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.5}
.pane-bc b{color:var(--accent);font-weight:600}.pane-bc span{display:block;opacity:.85}
.pane-close{position:absolute;right:6px;top:4px;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px}
.vault-legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.vault-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.vault-hint{position:absolute;right:18px;bottom:18px;font-family:var(--mono);font-size:11px;color:#6b7580;z-index:4;max-width:50vw;text-align:right}
.ask-fab{position:absolute;right:18px;bottom:44px;z-index:6}
.note-kind{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.note-title{font-family:var(--display);font-size:24px;letter-spacing:-.01em;line-height:1.15;margin-top:6px;color:var(--ink);padding-right:20px}
.note-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}
.note-body{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.6;white-space:pre-line}
.note-links{margin-top:20px}
.note-links h3,.note-links h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px}
.note-links a{display:inline-block;margin:0 6px 6px 0;padding:5px 10px;border:1px solid var(--rule-2);border-radius:999px;font-size:13px;color:var(--ink-2)}
.note-links a:hover{border-color:var(--accent);color:var(--accent)}
.note-open{margin-top:16px}
/* ask window: bottom-left so it does not fight the note pane */
.ask{left:18px;bottom:18px;width:min(440px,calc(100vw - 36px));max-height:min(64vh,620px);display:flex;flex-direction:column;overflow:hidden;z-index:7}
/* display:flex overrides the hidden attribute, so the panel was on screen before it
   was ever opened. The attribute has to win. */
.ask[hidden],.pane[hidden],.vault-note[hidden]{display:none!important}
.ask-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.ask-head b{font-size:14px}
.ask-close{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;flex:0 0 auto}
.ask-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:120px}
.msg{max-width:92%;font-size:14.5px;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--ink);color:var(--paper);padding:9px 12px;border-radius:12px 12px 2px 12px}
.msg.ai{align-self:flex-start;color:var(--ink-2)}
.msg.ai .cites{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.msg.ai .cites a{font-family:var(--mono);font-size:11.5px;padding:3px 8px;border:1px solid var(--rule-2);border-radius:999px;color:var(--accent)}
.pulled{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pulled b{color:var(--ink);font-weight:600}.pulled a{color:var(--accent)}
.ask-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--rule)}
.ask-form input{flex:1;padding:10px 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px}
.ask-rules{font-size:11.5px;padding:0 14px 12px}.ask-rules a{color:var(--accent)}
.vault ~ footer{display:none}
@media (max-width:900px){.pane-tl{width:calc(100vw - 36px)}.pane-tr{top:auto;bottom:18px;max-height:56vh}.pane-bc{bottom:auto;top:calc(18px + 190px)}.ask{width:calc(100vw - 36px)}.vault-hint{display:none}.ask-fab{bottom:18px}}

/* Phone catalog. The floating panes were laid out for a desktop canvas: on a phone the
   filter panel, the retrieval tooltip, the note card and the ask window all landed on top
   of each other. Here the header shrinks to a search box and one scrolling row of filters,
   the tooltip is dropped (the thread already carries a "Pulled N notes" line), and the note
   and the ask window become bottom sheets that vault.js keeps mutually exclusive. */
@media (max-width:760px){
  .vault{height:calc(100dvh - 60px);min-height:0}
  .pane-tl{left:10px;right:10px;top:10px;width:auto;padding:10px 12px}
  .pane-tl .pane-title h1{font-size:17px}
  .pane-tl .search{margin-top:8px!important;padding:9px 12px;font-size:16px}
  .pane-tl .chips{margin-top:8px!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .pane-tl .chips::-webkit-scrollbar{display:none}
  .pane-tl .chip{flex:0 0 auto;padding:8px 12px}
  .pane-tl .vault-legend{display:none}
  .pane-bc{display:none}
  .pane-tr,.ask{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-width:none;
    max-height:min(72dvh,620px);border-radius:16px 16px 12px 12px}
  .ask{max-height:min(78dvh,660px)}
  .ask-log{min-height:0}
  .ask-form{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .ask-rules{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .note-title{font-size:21px}
  .ask-fab{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:11px 16px}
  /* one sheet at a time */
  body.sheet-ask .vault-note{display:none}
  body.sheet-note .ask{display:none}
}

/* home embed of the vault */
.askme{padding-bottom:0}
.vault.embed{position:relative;height:min(76vh,760px);min-height:520px;margin-top:26px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.vault.embed .pane-tl{width:min(300px,calc(100vw - 36px))}
.vault.embed ~ section{border-top:0}

/* forces panel (obsidian-style) */
.pane-forces{right:18px;top:18px;width:220px;padding:0;overflow:hidden;z-index:6}
.pane-forces summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 14px}
.pane-forces summary::-webkit-details-marker{display:none}
.pane-forces[open] summary{border-bottom:1px solid var(--rule)}
.pane-forces label{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2);padding:8px 14px 2px}
.pane-forces input[type=range]{width:100%;accent-color:var(--accent);margin:4px 0 6px}
.vault-note.pane-tr{top:70px}
@media (max-width:900px){.pane-forces{display:none}.vault-note.pane-tr{top:auto}}

/* home preview of the vault + inline ask */
.preview{margin-top:clamp(36px,5vw,56px)}
.preview-stage{position:relative;height:clamp(340px,44vw,500px);overflow:hidden;background:transparent;-webkit-mask-image:radial-gradient(ellipse 85% 88% at 55% 42%,#000 35%,transparent 92%);mask-image:radial-gradient(ellipse 85% 88% at 55% 42%,#000 35%,transparent 92%)}
.preview-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:default}
.preview-cap{display:flex;justify-content:space-between;gap:12px;padding:6px 2px 0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.preview-cap b{color:var(--ink);font-weight:600}.preview-cap a{color:var(--accent)}
.askbar{display:flex;gap:10px;margin-top:16px}
.askbar input{flex:1;padding:14px 18px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.askbar input:focus{outline:2px solid var(--accent);outline-offset:2px}
.asklog{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.asklog .msg.user{align-self:flex-end;max-width:min(46ch,86%);background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--rule-2);color:var(--ink);padding:10px 14px;border-radius:14px 14px 3px 14px;font-size:15px;line-height:1.45}
.asklog .msg.ai{max-width:68ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.asklog .msg.ai .cites a{font-family:var(--mono);font-size:12px;padding:4px 10px;border:1px solid var(--rule-2);border-radius:999px;color:var(--accent)}
.asklog .pulled{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* hero with chat + brain */
.hero{overflow:hidden}
.hero-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
.hero-right{position:sticky;top:70px;margin-top:0;position:relative}
.hero-brain{height:clamp(420px,46vw,560px);margin:-70px calc(-1*max(24px,((100vw - 1120px)/2 + 60px))) 10px -40%;}
.hero .askbar{margin-top:24px;max-width:560px}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qchip{font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;text-decoration:none}
.qchip:hover{border-color:var(--accent);color:var(--accent)}
.qchip.more{color:var(--accent)}
.askfine{margin-top:10px}
.hero-right .asklog{max-height:min(300px,34vh);overflow:auto;padding:0 2px}
.hero-right .asklog:empty{display:none}
.hero-right .askfine{margin-top:12px}
.hero-right .asklog .msg.ai{font-size:14.5px}
.hero .cta{margin-top:22px}
@media (max-width:900px){.hero-cols{grid-template-columns:1fr}.hero-right{position:relative;order:2;margin-top:0}.hero-brain{height:clamp(300px,70vw,420px);margin:0 calc(-1*var(--gutter))}}

/* collapsed retrieval trace (vault.js emits <details class="pulled">) */
details.pulled>summary{cursor:pointer;list-style:none;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
details.pulled>summary::-webkit-details-marker{display:none}
details.pulled>summary::before{content:"\25b8";font-size:10px;transition:transform .15s ease}
details.pulled[open]>summary::before{transform:rotate(90deg)}
details.pulled a{display:block;margin-top:6px;color:var(--accent)}

/* section labels on the brand page are real headings for the document outline,
   styled exactly as the eyebrow label they replaced */
h2.eyebrow{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}