@font-face{
  font-family:"Spline Sans Mono";
  src:url("/assets/fonts/spline-sans-mono-latin.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spline Sans";
  src:url("/assets/fonts/spline-sans-latin.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Spline Sans","Spline Sans Mono",ui-sans-serif,system-ui,sans-serif;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:112px; --s10:160px;

  --measure:60ch;
  --shell:min(1180px, 100% - 2 * var(--s5));

  --bg:#FBF9F6;
  --surface:#FFFFFF;
  --fg:#14110E;
  --muted:#57514A;
  --faint:#6E675E;
  --line:#E6E0D7;
  --accent:#C2410C;
  --accent-hi:#9A330A;
  --accent-on:#FFFFFF;
  --field:#FFFFFF;
}
:root[data-theme="dark"]{
  --bg:#100E0C;
  --surface:#171412;
  --fg:#F2EDE6;
  --muted:#B5ADA3;
  --faint:#9C948B;
  --line:#2A241E;
  --accent:#FF7A1A;
  --accent-hi:#FF8C42;
  --accent-on:#100E0C;
  --field:#100E0C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#100E0C;
    --surface:#171412;
    --fg:#F2EDE6;
    --muted:#B5ADA3;
    --faint:#9C948B;
    --line:#2A241E;
    --accent:#FF7A1A;
    --accent-hi:#FF8C42;
    --accent-on:#100E0C;
    --field:#100E0C;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{margin:0; font-family:var(--mono); font-weight:600; letter-spacing:-0.015em; line-height:1.18; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-on); padding:var(--s3) var(--s4); font-family:var(--mono); z-index:20}
.skip:focus{left:var(--s4); top:var(--s4)}
.shell{width:var(--shell); margin-inline:auto}

/* Header */
.site{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding-block:var(--s5)}
.brand{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:0.01em}
.brand svg{display:block; width:26px; height:26px; flex:none}

.modes{display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface)}
.modes button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em; color:var(--faint);
  padding:0 var(--s4); min-height:44px; min-width:58px;
  touch-action:manipulation;
  transition:color 140ms ease, background-color 140ms ease;
}
.modes button + button{border-left:1px solid var(--line)}
.modes button:hover{color:var(--fg)}
.modes button[aria-pressed="true"]{background:var(--accent); color:var(--accent-on)}

/* Hero */
.hero{display:grid; gap:var(--s8); padding-block:var(--s9) var(--s8); align-items:center}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); padding-block:var(--s10) var(--s9)}
}
h1{font-size:clamp(30px,5.2vw,54px)}
.lead{margin-top:var(--s6); max-width:var(--measure); color:var(--muted); font-size:clamp(17px,2vw,19px)}
.pull{
  margin-top:var(--s7);
  padding:var(--s5) 0 var(--s5) var(--s5);
  border-left:2px solid var(--accent);
  font-family:var(--mono);
  font-size:clamp(18px,2.4vw,23px);
  line-height:1.42;
  color:var(--fg);
  max-width:52ch;
}
.after-pull{margin-top:var(--s5); max-width:var(--measure); color:var(--muted)}

/* Hero diagram */
.viz{width:100%; height:auto; max-width:460px; justify-self:center; overflow:visible}
.viz .edge{stroke:var(--line); stroke-width:1; fill:none}
.viz .flow{stroke:var(--accent); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-dasharray:7 93; animation:flow 4.4s linear infinite}
.viz .flow.d2{animation-duration:6s; animation-delay:-1.2s}
.viz .flow.d3{animation-duration:5.2s; animation-delay:-2.6s}
.viz .flow.d4{animation-duration:7.1s; animation-delay:-3.4s}
.viz .flow.d5{animation-duration:5.8s; animation-delay:-0.6s}
.viz .node{fill:var(--bg); stroke:var(--fg); stroke-width:1.4}
.viz .node.hot{fill:var(--accent); stroke:var(--accent)}
.viz .halo{fill:none; stroke:var(--accent); stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:center; animation:halo 4.4s ease-out infinite}
.viz .halo.h2{animation-delay:-2.2s}
@keyframes flow{from{stroke-dashoffset:100} to{stroke-dashoffset:0}}
@keyframes halo{
  0%{opacity:0.55; transform:scale(0.6)}
  70%{opacity:0; transform:scale(1.9)}
  100%{opacity:0; transform:scale(1.9)}
}

/* Sections */
.sec{padding-block:var(--s9); border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--faint); margin-bottom:var(--s8)}
.eyebrow::before{content:"// "; color:var(--accent)}

.cols{display:grid; gap:var(--s8)}
@media (min-width:900px){
  .cols{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s8); row-gap:var(--s8)}
}
.cell{min-width:0}
.cell h3{font-size:19px; margin-bottom:var(--s4)}
.cell p{color:var(--muted); max-width:54ch}
.marked .cell h3::before{
  content:""; display:inline-block; width:7px; height:7px;
  background:var(--accent); margin-right:12px; vertical-align:middle;
  position:relative; top:-2px;
}

.stack{display:grid; gap:var(--s8)}
.item{display:grid; gap:var(--s4); min-width:0}
@media (min-width:820px){
  .item{grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--s7)}
}
.item h3{font-size:19px}
.item p{color:var(--muted); max-width:var(--measure)}

/* Contact */
.contact{padding-block:var(--s9) var(--s10); border-top:1px solid var(--line)}
.contact-grid{display:grid; gap:var(--s8)}
@media (min-width:820px){.contact-grid{grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--s7)}}
.contact-note{color:var(--muted); max-width:38ch}
form{display:grid; gap:var(--s5); max-width:34rem; min-width:0}
.field{display:grid; gap:var(--s2); min-width:0}
label{font-family:var(--mono); font-size:13px; color:var(--fg)}
label .opt{color:var(--faint)}
input,textarea{
  width:100%; min-width:0;
  font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--fg);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:2px;
  padding:var(--s3) var(--s4);
  min-height:48px;
  transition:border-color 140ms ease;
}
textarea{min-height:150px; resize:vertical}
input:hover,textarea:hover{border-color:var(--faint)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--accent)}
.err{font-family:var(--mono); font-size:13px; color:var(--accent)}
.err:empty{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.turnstile{min-height:66px}
.turnstile:empty::before{
  content:"Cloudflare Turnstile check loads here";
  display:flex; align-items:center; justify-content:center;
  height:66px; border:1px dashed var(--line); border-radius:2px;
  font-family:var(--mono); font-size:12px; color:var(--faint);
}

button.send{
  appearance:none; cursor:pointer;
  font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:0.01em;
  color:var(--accent-on); background:var(--accent);
  border:1px solid var(--accent); border-radius:2px;
  padding:var(--s3) var(--s6); min-height:48px;
  justify-self:start; touch-action:manipulation;
  transition:background-color 140ms ease, border-color 140ms ease;
}
button.send:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
button.send[data-busy="true"]{opacity:0.72; cursor:progress}
.status{font-family:var(--mono); font-size:14px; color:var(--muted)}
.status:empty{display:none}
.status[data-tone="bad"]{color:var(--accent)}

/* Footer */
.foot{border-top:1px solid var(--line); padding-block:var(--s5) var(--s7); font-family:var(--mono); font-size:12px; color:var(--faint)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:0.01ms !important}
}