/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============ TOKENS (light is the default world) ============ */
:root {
  --paper:   #F7F6F2;
  --paper-2: #FCFBF8;
  --ink:     #1C1B18;
  --ink-soft:#494640;
  --muted:   #837D72;
  --hair:    rgba(28,27,24,0.14);
  --hair-2:  rgba(28,27,24,0.06);
  /* the only color: spectral dispersion in fig.1 */
  --red: #BC4A3D;
  --grn: #4A8A5F;
  --blu: #4560B4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #171612;
    --paper-2: #1E1D18;
    --ink:     #ECEAE2;
    --ink-soft:#C6C3B9;
    --muted:   #928C80;
    --hair:    rgba(236,234,226,0.15);
    --hair-2:  rgba(236,234,226,0.06);
    --red: #E0705F;
    --grn: #74C08A;
    --blu: #8397EC;
  }
}
:root[data-theme="light"] {
  --paper:#F7F6F2; --paper-2:#FCFBF8; --ink:#1C1B18; --ink-soft:#494640;
  --muted:#837D72; --hair:rgba(28,27,24,0.14); --hair-2:rgba(28,27,24,0.06);
  --red:#BC4A3D; --grn:#4A8A5F; --blu:#4560B4;
}
:root[data-theme="dark"] {
  --paper:#171612; --paper-2:#1E1D18; --ink:#ECEAE2; --ink-soft:#C6C3B9;
  --muted:#928C80; --hair:rgba(236,234,226,0.15); --hair-2:rgba(236,234,226,0.06);
  --red:#E0705F; --grn:#74C08A; --blu:#8397EC;
}

/* ============ BASE ============ */
body {
  background: var(--paper); color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.62; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.serif { font-family: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; }
.mono  { font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace; }
.wrap  { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 32px; }
.label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}

/* ============ TOP BAR ============ */
header { border-bottom: 1px solid var(--hair); }
.bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.mark { font-family: ui-serif,"New York",Georgia,serif; font-size: 20px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; }
.navlinks { display: flex; align-items: center; gap: 22px; }
.navlinks a { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); transition: color .18s; }
.navlinks a:hover { color: var(--ink); }
.tog { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--muted); display: grid; place-items: center; transition: color .18s; }
.tog:hover { color: var(--ink); }

/* ============ HERO ============ */
.hero { padding: clamp(48px, 8vw, 92px) 0 clamp(44px, 6vw, 76px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (max-width: 720px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 {
  font-family: ui-serif,"New York",Georgia,serif; font-weight: 500;
  font-size: clamp(34px, 5.4vw, 53px); line-height: 1.08; letter-spacing: -0.017em;
  margin: 18px 0 0; max-width: 14ch; text-wrap: balance;
}
.hero .lede { margin: 20px 0 0; max-width: 40ch; color: var(--ink-soft); font-size: 17px; }
/* at 375px the label is a fraction of a pixel too wide for one line */
@media (max-width: 380px) { .hero .label { letter-spacing: 0.1em; } }
.hero .actions { margin-top: 30px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.go { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 13px; letter-spacing: 0.03em; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 3px; transition: opacity .18s; }
.go:hover { opacity: .6; }

/* figure */
.fig { justify-self: center; width: 100%; max-width: 360px; }
.fig svg { width: 100%; height: auto; }
.figcap { margin-top: 12px; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }
.stroke { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.slab   { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: var(--hair); stroke-width: 1; }
.ghost  { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.node   { fill: var(--ink); }
.rr { stroke: var(--red); } .gg { stroke: var(--grn); } .bb { stroke: var(--blu); }

/* draw-on animation */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .draw { animation: draw .55s cubic-bezier(.4,.05,.2,1) forwards; }
.anim .d2 { animation-delay: .5s; }
.anim .d3 { animation-delay: .92s; }
.anim .fade { opacity: 0; animation: fade .6s ease forwards; animation-delay: 1.35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: .55; } }

/* ============ SECTIONS ============ */
section { border-top: 1px solid var(--hair); }

/* ============ DOCUMENT PAGES (privacy, support) ============ */
/* top and bottom only: the side gutter comes from .wrap */
.doc { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.doc h1 { font-family: ui-serif,"New York",Georgia,serif; font-weight: 500; font-size: clamp(30px, 4.5vw, 42px); letter-spacing: -0.015em; margin: 14px 0 0; }
.doc .updated { margin-top: 10px; }
.doc h2 { font-family: ui-serif,"New York",Georgia,serif; font-weight: 500; font-size: 21px; letter-spacing: -0.01em; margin: 40px 0 4px; }
.doc p { color: var(--ink-soft); max-width: 66ch; margin: 12px 0 0; }
.doc a.inline { color: var(--ink); border-bottom: 1px solid var(--hair); }
.doc a.inline:hover { border-color: var(--muted); }

/* ============ FOOTER ============ */
footer { border-top: 1px solid var(--hair); padding: 40px 0 48px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 26px; align-items: baseline; }
.foot .fl { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: var(--muted); font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12.5px; transition: color .18s; }
.foot a:hover { color: var(--ink); }
.foot .cr { color: var(--muted); font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dashoffset: 0; }
  .anim .draw, .anim .fade { animation: none; }
  .fade { opacity: .55; }
  a, .go, .tog { transition: none; }
}
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; border-radius: 3px; }