/* Taken from the app's DesignSystem.swift so the pages and the app cannot drift. */
:root{
  --ink:#0A0F0E; --surface:#18211E; --surface-hi:#202B28; --line:#2C3A36;
  --text-hi:#F2F7F5; --text-mid:#A6B8B2; --text-lo:#6F817B;
  --accent:#7CE7C4; --accent-ink:#06110D; --ember:#FF6B3D;
  /* ui-rounded resolves to SF Rounded on Apple devices, which is the face the
     app itself uses; Nunito carries the same feel everywhere else. */
  --display:ui-rounded,"Nunito",system-ui,-apple-system,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --measure:70ch;
  --r-card:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--ink);color:var(--text-mid);
  font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:10;background:rgba(10,15,14,.86);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1080px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mark{display:flex;gap:3px;align-items:center;text-decoration:none}
.mark i{position:relative;display:grid;place-items:center;width:19px;height:23px;border-radius:4px;
  background:linear-gradient(#232f2b,#131b19);border:1px solid var(--line);
  font-family:var(--display);font-style:normal;font-weight:800;font-size:12px;color:var(--text-hi)}
.mark i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(10,15,14,.9)}
.mark i.on{color:var(--accent)}
/* Two links to two pages, not a switch inside one.
   This was drawn as a segmented pill control — the shape an app uses to swap
   views without leaving the page — and it read as exactly that: a toggle
   holding both documents. They have always been separate pages; the styling
   said otherwise, so the styling changed. */
.bar nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.bar nav a{font:600 14px/1 var(--body);color:var(--text-lo);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent}
.bar nav a:hover{color:var(--text-hi)}
.bar nav a[aria-current="page"]{color:var(--text-hi);border-bottom-color:var(--accent)}
.bar nav a:focus-visible,.rail a:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 96px}
.cols{display:grid;grid-template-columns:214px minmax(0,1fr);gap:48px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:0}.rail{display:none}}
.rail{position:sticky;top:78px;padding-top:44px;max-height:calc(100vh - 100px);overflow-y:auto}
.rail p{font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-lo);margin:0 0 12px}
.rail a{display:block;padding:5px 0 5px 12px;font-size:13px;color:var(--text-mid);
  text-decoration:none;border-left:2px solid transparent;line-height:1.35}
.rail a:hover{color:var(--text-hi)}
.rail a.here{color:var(--accent);border-left-color:var(--accent)}

/* ---------- masthead ---------- */
header.doc{padding:52px 0 6px;max-width:var(--measure)}
.eyebrow{font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
header.doc h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,5.2vw,46px);
  line-height:1.08;letter-spacing:-.02em;color:var(--text-hi);margin:0 0 18px;text-wrap:balance}
.lede{font-size:18px;line-height:1.6;color:var(--text-hi);margin:0 0 22px}
.stamp{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-lo);
  border:1px solid var(--line);background:var(--surface);padding:7px 13px;border-radius:999px}
.stamp b{color:var(--text-mid);font-weight:600}

/* ---------- body ---------- */
section{max-width:var(--measure);padding:32px 0;border-top:1px solid var(--line)}
section h2{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;
  color:var(--text-hi);margin:0 0 14px;scroll-margin-top:92px}
section h3{font:600 15.5px/1.4 var(--body);color:var(--text-hi);margin:24px 0 8px;scroll-margin-top:92px}
p{margin:0 0 14px}
a{color:var(--accent);text-decoration-color:rgba(124,231,196,.4);text-underline-offset:3px;
  overflow-wrap:anywhere}
ul{margin:0 0 14px;padding:0;list-style:none}
li{position:relative;padding-left:22px;margin-bottom:9px}
li::before{content:"";position:absolute;left:6px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--text-lo)}
strong{color:var(--text-hi);font-weight:600}

/* A note the authors left for themselves. Loud on purpose: it is the one thing
   on the page that must not survive to publication unnoticed. */
.unresolved{border:1px solid rgba(255,107,61,.45);background:rgba(255,107,61,.09);
  border-radius:16px;padding:18px 20px;margin:4px 0 18px}
.unresolved .tag{display:block;font:700 11px/1 var(--display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.unresolved p{margin:0;color:var(--text-hi)}

footer{max-width:var(--measure);border-top:1px solid var(--line);padding:30px 0 0;
  font-size:14px;color:var(--text-lo)}
footer a{font-weight:600}

/* "> something" in the source: a point the reader must not miss. */
.important{border:1px solid rgba(255,107,61,.42);background:rgba(255,107,61,.09);
  border-radius:16px;padding:18px 20px;margin:4px 0 18px}
.important .tag{display:block;font:700 11px/1 var(--display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.important p{margin:0;color:var(--text-hi);font-weight:600}