:root{
  --paper:#F4F1EA;
  --paper-2:#FBFAF7;
  --ink:#1C1B17;
  --ink-2:#6F6A61;
  --line:#E4DFD4;
  --line-2:#EBE6DB;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  font-size:clamp(1rem,0.97rem + 0.2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;letter-spacing:-.01em}
.brand svg{width:26px;height:26px;display:block}
.brand b{font-family:var(--sans);font-weight:600;font-size:1.06rem}
.nav-link{font-size:.92rem;color:var(--ink-2);text-decoration:none}
.nav-link:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(2rem,5vw,3rem)}
.hero .eyebrow{margin-bottom:1.4rem}
h1{
  font-family:var(--serif);font-weight:430;
  font-size:clamp(2.7rem,1.6rem + 5vw,4.9rem);line-height:1.02;
  letter-spacing:-.022em;margin:0;max-width:16ch;
  font-optical-sizing:auto;
}
h1 .q{display:block;font-style:normal;font-size:.56em;font-weight:460;color:var(--ink-2);letter-spacing:-.012em;margin-top:.18em;line-height:1.04}
.lede{margin:1.6rem 0 0;max-width:46ch;color:var(--ink-2);font-size:1.12rem;line-height:1.55}
.cta{display:flex;align-items:center;gap:1.4rem;margin-top:2.4rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:500;font-size:.97rem;padding:.85rem 1.4rem;border-radius:9px;
  transition:transform .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn:focus-visible,.nav-link:focus-visible,.text-link:focus-visible,.dl-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.text-link{color:var(--ink);text-decoration:none;font-size:.97rem;border-bottom:1px solid var(--ink);padding-bottom:1px}
.text-link:hover{color:var(--ink-2);border-color:var(--ink-2)}
.plat{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);letter-spacing:.04em;margin-top:1.5rem}

/* ---- editor stage (the signature) ---- */
.stage{padding-block:clamp(2rem,5vw,3.5rem) clamp(3.5rem,8vw,6rem)}
.editor{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 0 rgba(28,27,23,.02),0 24px 60px -28px rgba(28,27,23,.22);
  overflow:hidden;
}
.editor-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.05rem;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.76rem;color:var(--ink-2);letter-spacing:.02em;
}
.editor-bar .file{display:flex;align-items:center;gap:.55rem}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}
.panes{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
.pane{padding:clamp(1.2rem,3vw,2rem) clamp(1.3rem,3.2vw,2.2rem)}
.pane.src{border-right:1px solid var(--line-2);font-family:var(--mono);font-size:.92rem;line-height:1.85;color:var(--ink)}
.pane.src .tok{color:#B3AC9E}            /* syntax markers: minimal contrast */
.pane.src .row{white-space:pre-wrap}
.caret{display:inline-block;width:.5ch;height:1.05em;vertical-align:-.16em;background:var(--ink);margin-left:1px;animation:blink 1.15s step-end infinite}
@keyframes blink{50%{opacity:0}}
.pane.prev{background:var(--paper)}
.prev :is(h2,h3){font-family:var(--serif);font-weight:480;letter-spacing:-.01em;margin:.1rem 0 .7rem}
.prev h2{font-size:1.6rem;line-height:1.1}
.prev p{margin:0 0 .9rem;color:var(--ink);line-height:1.6}
.prev p.mut,.prev li{color:var(--ink)}
.prev strong{font-weight:600}
.prev em{font-style:italic}
.prev ul{margin:.2rem 0 1rem;padding-left:1.1rem}
.prev li{margin:.2rem 0}
.prev blockquote{margin:1rem 0 0;padding:.1rem 0 .1rem 1.1rem;border-left:2px solid var(--ink);
  font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.45;color:var(--ink)}

/* ---- ethos ---- */
.ethos{padding-block:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--line)}
.ethos h2{font-family:var(--serif);font-weight:440;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);
  line-height:1.08;letter-spacing:-.018em;margin:.9rem 0 0;max-width:18ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2.2rem,5vw,3.4rem)}
.col .scale{font-family:var(--serif);line-height:.9;letter-spacing:-.03em;display:flex;align-items:baseline;gap:.4rem;color:var(--ink)}
.col.max .scale .big{font-size:clamp(3.2rem,7vw,5.2rem);font-weight:500}
.col.max .scale .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.col.min .scale .big{font-size:clamp(1.5rem,3vw,2rem);font-weight:480;color:var(--ink-2)}
.col.min .scale .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.col h3{font-family:var(--sans);font-weight:560;font-size:1.18rem;margin:1.3rem 0 .5rem;letter-spacing:-.01em}
.col p{margin:0;color:var(--ink-2);max-width:34ch}

/* ---- features ---- */
.features{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem);border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.8rem}
.cell{background:var(--paper);padding:clamp(1.4rem,3vw,2.1rem)}
.cell h4{font-family:var(--sans);font-weight:560;font-size:1.06rem;margin:0 0 .45rem;letter-spacing:-.01em}
.cell p{margin:0;color:var(--ink-2);font-size:.97rem;max-width:38ch}
.cell .k{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);letter-spacing:.04em;display:block;margin-bottom:.9rem}

/* ---- dark cta band (echoes the app icon) ---- */
.band{background:var(--ink);color:var(--paper)}
.band .wrap{padding-block:clamp(3.5rem,8vw,6rem);text-align:center}
.band svg{width:38px;height:38px;color:var(--paper);margin-bottom:1.4rem}
.band h2{font-family:var(--serif);font-weight:430;font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem);
  line-height:1.05;letter-spacing:-.02em;margin:0 auto;max-width:16ch}
.band .btn{background:var(--paper);color:var(--ink);margin-top:2rem}
.band .plat{color:color-mix(in srgb,var(--paper) 60%,var(--ink));margin-top:1.2rem}

/* ---- download page ---- */
.dl{padding-block:clamp(3rem,8vw,5rem) clamp(3.5rem,8vw,6rem)}
.dl-head{max-width:52ch}
.dl h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.4rem);max-width:none}
.dl .lede{margin-top:1.2rem}
.dl-list{margin-top:clamp(2.2rem,5vw,3rem);display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dl-row{background:var(--paper);display:flex;align-items:center;gap:1.1rem;text-decoration:none;
  padding:clamp(1.1rem,3vw,1.45rem) clamp(1.2rem,3.2vw,1.8rem);transition:background .15s ease}
.dl-row:hover{background:var(--paper-2)}
.dl-row .meta-col{flex:1;min-width:0}
.dl-row .os{font-weight:560;font-size:1.08rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
.dl-row .note{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);letter-spacing:.03em;margin-top:.3rem}
.dl-row .badge{display:none;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem}
.dl-row.rec{background:var(--paper-2)}
.dl-row.rec .badge{display:inline-block}
.dl-row .alt{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.55rem}
.dl-row .alt:empty{display:none}
.dl-row .alt-link{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px}
.dl-row .alt-link:hover{color:var(--ink);border-color:var(--ink-2)}
.dl-row .btn{flex:none}
.dl-row:hover .btn{transform:translateY(-1px);opacity:.92}
.dl-note{font-size:.92rem;color:var(--ink-2);margin-top:1.6rem;max-width:60ch}

/* ---- footer ---- */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.6rem;flex-wrap:wrap}
footer .brand b{font-weight:540}
footer .meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);letter-spacing:.03em}
footer a{color:var(--ink-2);text-decoration:none;font-size:.86rem}
footer a:hover{color:var(--ink)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .panes{grid-template-columns:1fr}
  .pane.src{border-right:0;border-bottom:1px solid var(--line-2)}
  .split{grid-template-columns:1fr;gap:2.4rem}
  .grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dl-row{flex-wrap:wrap}
  .dl-row .btn{width:100%;justify-content:center;margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .caret{animation:none}
  .btn{transition:none}
}