

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  
  --cf-ink: #232427;
  --cf-paper: #f6f7f8;
  --cf-surface: #ffffff;
  --cf-line: #d3d5da;
  --cf-muted: #74767c;

  --cf-spec-1: #ffd700;
  --cf-spec-2: #ff8714;
  --cf-spec-3: #e1454d;
  --cf-spec-4: #a726a6;
  --cf-spec-5: #6c1bf2;
  --cf-spec-6: #3d6af2;
  --cf-spec-7: #0dbaf2;
  --cf-spectrum: linear-gradient(90deg,
    var(--cf-spec-1) 0%, var(--cf-spec-2) 20%, var(--cf-spec-3) 40%,
    var(--cf-spec-4) 50%, var(--cf-spec-5) 70%, var(--cf-spec-6) 85%,
    var(--cf-spec-7) 100%);
  --cf-spectrum-mark: linear-gradient(45deg,
    var(--cf-spec-1) 0%, var(--cf-spec-2) 20%, var(--cf-spec-3) 40%,
    var(--cf-spec-4) 50%, var(--cf-spec-5) 70%, var(--cf-spec-6) 85%,
    var(--cf-spec-7) 100%);
  --cf-spectrum-edge: linear-gradient(0deg,
    var(--cf-spec-1) 0%, var(--cf-spec-2) 20%, var(--cf-spec-3) 40%,
    var(--cf-spec-4) 50%, var(--cf-spec-5) 70%, var(--cf-spec-6) 85%,
    var(--cf-spec-7) 100%);
  
  --cf-band: var(--cf-spectrum);
  --cf-band-edge: var(--cf-spectrum-edge);
  --cf-band-cover: 96px;
  --cf-band-head: 10mm;
  --cf-band-memo: 6mm;
  --cf-band-page: 6px;

  --cf-gain: #389878;
  --cf-pos: #1f7a63;
  --cf-neg: #9f3049;
  --cf-up: #c08a3e;
  --cf-down: #6d7aa8;

  --cf-role: var(--cf-ink);
  --cf-role-text: var(--cf-ink);
  --cf-role-tint: var(--cf-paper);
  --cf-role-line: var(--cf-line);

  --cf-font-body: "Space Grotesk", system-ui, sans-serif;
  --cf-font-mono: "Space Mono", ui-monospace, monospace;

  --cf-radius: 0px;
  --cf-measure: 34em;
}

*, *::before, *::after { box-sizing: border-box; }

body.cf {
  margin: 0;
  padding: 0;
  background: var(--cf-paper);
  color: var(--cf-ink);
  font-family: var(--cf-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.58;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

.cf-page {
  
  max-width: calc(46rem + 128px);
  margin: 0 auto;
  padding: 32px 64px 56px;
}
@media (max-width: 640px) {
  .cf-page { padding: 24px 20px 56px; }
}

body.cf ::selection { background: var(--cf-role-tint); }

.cf h1, .cf h2, .cf h3, .cf h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
}
.cf h1 { font-size: clamp(36px, 6vw, 72px); letter-spacing: -0.045em; line-height: 0.96; }
.cf h2 { font-size: 32px; margin-top: 2.4em; letter-spacing: -0.03em; }
.cf h3 { font-size: 18px; margin-top: 2em; }
.cf h4 { font-size: 16px; margin-top: 1.6em; color: var(--cf-muted); }
.cf h2 + p, .cf h3 + p, .cf h1 + p { margin-top: 0.8em; }

.cf-doc-head h1 {
  font-size: 60px;
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-top: 18px;
  max-width: 9em;
}
.cf-doc-head .cf-subtitle { font-size: 18px; line-height: 1.4; margin-top: 18px; max-width: 28em; }

.cf-page > section[class^="level"] > h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: normal;
  margin-top: 44px;
}
.cf-page section[class^="level"] > h2 { font-size: 18px; margin-top: 2em; }
.cf-page section[class^="level"] > h3 { font-size: 16px; margin-top: 1.6em; color: var(--cf-muted); }
.cf-page section[class^="level"] > h1 + p,
.cf-page section[class^="level"] > h2 + p,
.cf-page section[class^="level"] > h3 + p { margin-top: 12px; }
.header-section-number { color: var(--cf-muted); margin-right: 0.35em; }
.cf p { margin: 1.1em 0 0; max-width: var(--cf-measure); }
.cf strong { font-weight: 700; }
.cf small { font-size: 0.8em; color: var(--cf-muted); }

.cf .cf-section-number { color: var(--cf-muted); }

.cf a {
  color: var(--cf-role-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cf a:hover { color: var(--cf-ink); }
.cf a:focus-visible {
  outline: 2px solid var(--cf-role);
  outline-offset: 2px;
}

.cf ul, .cf ol { margin: 1.1em 0 0; padding-left: 1.3em; max-width: var(--cf-measure); }
.cf li { margin-bottom: 0.35em; }
.cf li::marker { color: var(--cf-muted); }

.cf blockquote {
  margin: 1.6em 0 0;
  padding-left: 1.1em;
  border-left: 2px solid var(--cf-line);
  color: var(--cf-muted);
  max-width: var(--cf-measure);
}

.cf hr {
  border: 0;
  height: 1px;
  background: var(--cf-line);
  margin: 2.6em 0 0;
}

.cf-eyebrow, .cf-kicker {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cf-muted);
  display: block;
}
.cf-kicker { color: var(--cf-role-text); }

.cf-doc-head > .cf-eyebrow { line-height: normal; }

.cf-band {
  display: block;
  width: 100%;
  height: var(--cf-band-page);
  background: var(--cf-band);
  flex: 0 0 auto;
}
.cf-band--cover { height: var(--cf-band-cover); }
.cf-band--head { height: var(--cf-band-head); }
.cf-band--memo { height: var(--cf-band-memo); }

.cf-band-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: var(--cf-band-edge);
}

.cf-mark {
  display: block;
  width: 1rem;
  height: 1rem;
  background: var(--cf-spectrum-mark);
  flex: 0 0 auto;
}

.cf-lockup { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; line-height: 1.27; }
.cf-lockup__name { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.cf-lockup__endorse { font-size: 13px; color: var(--cf-muted); }

.cf-doc-head { display: flex; flex-direction: column; padding-top: 0; }
.cf-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 38px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--cf-ink);
}
.cf-doc-meta div { display: flex; flex-direction: column; gap: 0; }
.cf-doc-meta .cf-eyebrow { font-size: 10px; line-height: normal; }
.cf-doc-meta div > span + span { margin-top: 4px; }
.cf-doc-meta div > span:not(.cf-eyebrow):not(.cf-val) { font-size: 15px; line-height: normal; }
.cf-doc-meta .cf-val { font-family: var(--cf-font-mono); font-size: 13px; line-height: normal; }

.cf-card, .cf-note {
  border-top: 1px solid var(--cf-ink);
  border-bottom: 1px solid var(--cf-ink);
  padding: 1rem 0;
  margin: 1.6em 0 0;
  max-width: var(--cf-measure);
}

.cf-doc-head + .cf-card {
  margin-top: 32px;
  max-width: 34em;
  padding: 16px 0;
}
.cf-doc-head + .cf-card > .cf-eyebrow { font-size: 10px; line-height: normal; }
.cf-doc-head + .cf-card > p { font-size: 15px; line-height: 1.58; margin-top: 8px; }
.cf-note {
  background: var(--cf-role-tint);
  border-color: var(--cf-role-text);
  padding: 1rem 1.2rem;
}
.cf-card > :first-child, .cf-note > :first-child { margin-top: 0; }
.cf-card p, .cf-note p { max-width: none; }

.cf-statement {
  background: var(--cf-ink);
  color: var(--cf-paper);
  padding: 1.6rem 1.6rem;
  margin: 1.8em 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.cf-pill {
  display: inline-block;
  font-family: var(--cf-font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--cf-role-text);
  color: #fff;
  padding: 0.3em 0.6em;
}

.cf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 2rem;
  margin: 40px 0 0;
  border-top: 1px solid var(--cf-ink);
  padding-top: 16px;
}
.cf-stat { padding: 0; }
.cf-stat__value {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cf-ink);
}
.cf-stat__caption { font-size: 12px; line-height: 1.33; color: var(--cf-muted); margin-top: 6px; }
.cf-stat__run {
  font-family: var(--cf-font-mono);
  font-size: 9px;
  color: var(--cf-muted);
  margin-top: 3px;
}

.cf-lede {
  display: flex;
  gap: 40px;
  margin-top: 36px;
}
.cf-lede__rail {
  flex: 0 0 200px;
  font-size: 12.5px;
  color: var(--cf-muted);
  line-height: 1.5;
}
.cf-lede__body { flex: 1; max-width: 400px; }

.cf-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-bars--bottom { margin-top: auto; }
.cf-bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.cf-bar__label {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  color: var(--cf-muted);
  width: 120px;
  flex: 0 0 auto;
}
.cf-bar__fill { height: 28px; background: var(--cf-ink); }
.cf-bar__value { font-family: var(--cf-font-mono); font-size: 13px; }
.cf-bar--muted .cf-bar__fill { background: var(--cf-line); }
.cf-bar--muted .cf-bar__value { color: var(--cf-muted); }

.cf-chart {
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  background: var(--cf-surface);
  border-top: 1px solid var(--cf-ink);
  border-bottom: 1px solid var(--cf-line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.6em;
}
.cf-chart img { max-width: 100%; display: block; }
.cf-chart__caption {
  font-family: var(--cf-font-mono);
  font-size: 12px;
  color: var(--cf-muted);
}

.cf table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cf thead th {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cf-muted);
  text-align: left;
  padding: 0.55em 0.8em 0.55em 0;
  border-top: 1px solid var(--cf-ink);
  border-bottom: 1px solid var(--cf-line);
}
.cf tbody td { padding: 0.55em 0.8em 0.55em 0; vertical-align: top; }
.cf tbody tr:last-child td { border-bottom: 1px solid var(--cf-ink); }
.cf td.cf-num, .cf th.cf-num { text-align: right; font-family: var(--cf-font-mono); font-size: 14px; }
.cf .cf-se { color: var(--cf-muted); }
.cf caption, .cf figcaption {
  font-family: var(--cf-font-mono);
  font-size: 12px;
  color: var(--cf-muted);
  text-align: left;
  padding-bottom: 0.5em;
  line-height: 1.45;
}
.cf caption b, .cf figcaption b { color: var(--cf-ink); font-weight: 700; }
.cf .cf-notes { font-size: 13px; color: var(--cf-muted); margin-top: 0.8em; line-height: 1.5; }

.cf code {
  font-family: var(--cf-font-mono);
  font-size: 0.88em;
}
.cf pre {
  font-family: var(--cf-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--cf-surface);
  border-top: 1px solid var(--cf-line);
  border-bottom: 1px solid var(--cf-line);
  padding: 14px 16px;
  margin: 20px 0 0;
  overflow-x: auto;
}
.cf pre code { font-size: inherit; }
.cf .kw { color: var(--cf-ink); font-weight: 700; }
.cf .st { color: var(--cf-pos); }
.cf .cm { color: var(--cf-muted); }

.cf figure { margin: 1.8em 0 0; }
.cf img, .cf svg { max-width: 100%; height: auto; display: block; }
.cf .cf-grayscale img { filter: grayscale(1); }

.cf-provenance {
  font-family: var(--cf-font-mono);
  font-size: 11px;
  line-height: normal;
  color: var(--cf-muted);
  border-top: 1px solid var(--cf-line);
  margin-top: 40px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.cf-provenance span:not(:last-child)::after { content: " ·"; color: var(--cf-line); }

.cf-toc { margin: 2.2em 0 0; padding: 0; list-style: none; max-width: var(--cf-measure); }
.cf-toc a { text-decoration: none; color: var(--cf-ink); }
.cf-toc a:hover { color: var(--cf-role-text); }
.cf-toc ul { list-style: none; padding-left: 1.1em; margin: 0.3em 0 0; }
.cf-toc > li { border-top: 1px solid var(--cf-line); padding: 0.5em 0; }
.cf-toc > li:first-child { border-top: 0; }

body.cf--dark {
  background: #17181a;
  color: #e9eaec;
  --cf-ink: #e9eaec;
  --cf-paper: #1e2023;
  --cf-surface: #17181a;
  --cf-line: #2f3237;
  --cf-muted: #9a9da4;
  --cf-role: #e9eaec;
  --cf-role-text: #e9eaec;
}

@media print {
  body.cf { font-size: 10.5pt; }
  .cf-page { max-width: none; padding: 0; }
  .cf-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cf-provenance { position: static; }
  .cf a { color: var(--cf-ink); text-decoration: none; }
  .cf h2, .cf h3 { break-after: avoid; }
  .cf pre, .cf table, .cf figure, .cf-card, .cf-note { break-inside: avoid; }
}
