:root {
  --paper: #F5F8F9;
  --white: #FFF;
  --frost: #E4EBEE;
  --rule: #C6D2D8;
  --steel: #4F5F67;
  --ink: #0D1A20;
  --signal: #0FA899;
  --signal-ink: #0B6F66;

  --ink-2: #1B2B33;
  --ink-3: #2A3C45;
  --rule-strong: #9FB0B8;
  --rule-dark: #2E4049;
  --steel-light: #A9B8BF;
  --signal-wash: #E3F4F2;
  --signal-deep: #08564F;
  --danger: #B3261E;
  --danger-wash: #FBECEA;
  --zinc-yellow: #C9A227;

  --bega-867: 'Chakra Petch', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --bega-114: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --bega-822: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-hero: clamp(2.4rem, 9vw + .5rem, 7.5rem);
  --fs-display: clamp(2.1rem, 5vw + .4rem, 4.75rem);
  --fs-h1: clamp(2rem, 3.6vw + .6rem, 3.75rem);
  --fs-h2: clamp(1.6rem, 2.4vw + .55rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1vw + .8rem, 1.6rem);
  --fs-h4: clamp(1.06rem, .4vw + .92rem, 1.2rem);
  --fs-lead: clamp(1.08rem, .5vw + .95rem, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-meta: .8125rem;
  --fs-label: .72rem;
  --fs-figure: clamp(3rem, 6vw + 1rem, 6rem);

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.6;
  --track-display: -0.01em;
  --track-tight: -0.022em;
  --track-label: .08em;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.375rem;
  --sp-6: 1.75rem;
  --sp-7: 2.375rem;
  --sp-8: 3.25rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;
  --sp-11: 8.25rem;

  --gutter: clamp(16px, 4vw, 56px);
  --content-max: 1240px;
  --measure: 64ch;
  --measure-wide: 78ch;
  --sidebar-w: max(240px, min(280px, 22vw));
  --topbar-h: 60px;
  --panel-pad: clamp(64px, 10vh, 140px);
  --section-lg: clamp(64px, 8vw, 96px);
  --section-md: clamp(44px, 6vw, 64px);
  --section-sm: clamp(28px, 4vw, 40px);

  --radius: 0;
  --bw: 1px;
  --bw-state: 2px;
  --bracket: 14px;
  --bracket-w: 2px;

  --shadow-1: 0 1px 0 rgba(13, 26, 32, .06), 0 2px 6px -2px rgba(13, 26, 32, .08);
  --shadow-2: 0 1px 0 rgba(13, 26, 32, .05), 0 14px 32px -18px rgba(13, 26, 32, .32);
  --shadow-3: 0 24px 60px -28px rgba(13, 26, 32, .45);
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--signal);

  --grid-texture:
    linear-gradient(to right, rgba(13, 26, 32, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 26, 32, .04) 1px, transparent 1px);
  --grid-size: 24px 24px;
  --scanlines: repeating-linear-gradient(to bottom, rgba(13, 26, 32, .03) 0 1px, transparent 1px 2px);

  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --dur-med: 280ms;
  --dur-slow: 420ms;
  --dur-draw: 900ms;
  --dur-count: 1400ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.2, .9, .1, 1);
  --ease-linear: linear;

  --z-base: 1;

  --z-raised: 10;
  --z-topbar: 60;
  --z-scrim: 70;

  --z-sidebar: 80;
  --z-chat: 90;
  --z-cookie: 95;
  --z-skip: 100;

  --cookie-h: 0px;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  scroll-padding-block-start: calc(var(--topbar-h) + 16px);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--paper);
  background-image: var(--grid-texture);
  background-size: var(--grid-size);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--bega-114);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
iframe, embed, object { max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
a { color: inherit; }
p, li, dd, figcaption, blockquote { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }
[hidden] { display: none !important; }
::selection { background: var(--signal); color: var(--white); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bega-867);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.04; letter-spacing: var(--track-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-body); }

p { text-wrap: pretty; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-small); }
code, kbd, samp, pre { font-family: var(--bega-822); font-size: .92em; }

.display-hero { font-family: var(--bega-867); font-size: var(--fs-hero); font-weight: 700; line-height: .94; letter-spacing: var(--track-tight); }
.display { font-family: var(--bega-867); font-size: var(--fs-display); font-weight: 700; line-height: 1; letter-spacing: var(--track-tight); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.meta { font-family: var(--bega-822); font-size: var(--fs-meta); color: var(--steel); letter-spacing: .02em; }
.label {
  font-family: var(--bega-822);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--steel);
}
.mono { font-family: var(--bega-822); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.signal { color: var(--signal-ink); }
.muted { color: var(--steel); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--bega-822);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--signal-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--signal); flex: none; }

.prose { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.1em; font-size: var(--fs-h3); line-height: 1.18; }
.prose h3 { margin-top: 1.8em; font-size: var(--fs-h4); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--signal-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out); }
.prose a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.prose a:active { color: var(--signal-deep); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose ul li::marker { color: var(--signal); }
.prose ol li::marker { font-family: var(--bega-822); font-size: .88em; color: var(--steel); }
.prose blockquote {
  hanging-punctuation: first last;
  border-left: 2px solid var(--signal);
  padding: .2em 0 .2em 1.1em;
  font-family: var(--bega-867);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.prose code { background: var(--frost); padding: .08em .35em; }
.prose strong { color: var(--ink); }
.prose dl { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: .5em 1.2em; }
.prose dt { font-family: var(--bega-822); font-size: var(--fs-meta); color: var(--steel); padding-top: .2em; }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--measure) + 2 * var(--gutter) + 8rem); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); }
.grid-12 > * { min-width: 0; grid-column: 1 / -1; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--sp-5); }
.grid-auto > *, .split > *, .cluster > *, .stack > * { min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-3)); }
.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }
.section { padding-block: var(--section-lg); }
.section--md { padding-block: var(--section-md); }
.section--sm { padding-block: var(--section-sm); }
.surface { background: var(--white); }
.surface-frost { background: var(--frost); }
.surface-ink { background: var(--ink); color: var(--frost); }
.surface-ink h1, .surface-ink h2, .surface-ink h3, .surface-ink h4 { color: var(--white); }
.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.flow > * + * { margin-top: var(--flow, 1em); }

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.media { position: relative; overflow: hidden; background: var(--frost); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-med: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-draw: 0.01ms;
    --dur-count: 0.01ms;
  }
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #FFF; }
  .sidebar, .topbar, .cookie-bar, .chat-launcher, .chat-panel, .nav-scrim { display: none !important; }
  .site-main { margin: 0 !important; }
}