@font-face {
  font-family: "Guide Sans";
  src: url("/static/fonts/guide-sans-variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --ink: #fafafa;
  --muted: #a1a1a1;
  --quiet: #858585;
  --canvas: #0a0a0a;
  --surface-1: #171717;
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --accent: #20b8cd;
  --accent-text: #20b8cd;
  --accent-ink: #071012;
  --measure: 720px;
  --chrome: "Guide Sans", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
body::before { position: fixed; z-index: -1; top: 0; bottom: 0; left: 16px; width: 1px; background: rgba(42,42,42,.34); content: ""; pointer-events: none; }
a { color: inherit; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  min-height: 44px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid var(--surface-3); background: rgba(10,10,10,.96); }
.site-header__inner { width: min(100%, calc(var(--measure) + 64px)); margin: 0 auto; padding: 16px; }
.site-header__brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  font-family: var(--chrome);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.2px;
  text-decoration: none;
}
.site-header__brand span { color: var(--accent); font-size: 24px; }
.anchor-rail {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 8px 0 16px;
  padding: 0;
  gap: 4px;
}
.anchor-rail__link {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--chrome);
  font-size: 16px;
  text-decoration: none;
}
.anchor-rail__link:hover, .anchor-rail__link:focus-visible { border-color: var(--surface-3); color: var(--ink); }
.anchor-rail__link--active { border-color: rgba(32,184,205,.55); background: var(--surface-2); color: var(--ink); }
.jump-menu__label { display: block; margin-bottom: 8px; font-family: var(--chrome); font-size: 16px; font-weight: 620; }
.jump-menu__control { position: relative; display: flex; gap: 8px; }
.jump-menu__input {
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding: 12px 54px 12px 18px;
  border: 1px solid var(--surface-3);
  border-radius: 24px;
  outline: 0;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 16px;
}
.jump-menu__input::placeholder { color: var(--quiet); opacity: 1; }
.jump-menu__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(32,184,205,.2); }
.jump-menu__button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  font-family: var(--chrome);
  font-size: 23px;
  font-weight: 750;
}
.jump-menu__button:hover { filter: brightness(1.08); }
.jump-menu__help { margin: 6px 12px 0; color: var(--muted); font-size: 16px; }
.notebook { width: min(100%, calc(var(--measure) + 64px)); margin: 0 auto; padding: 28px 16px 0; }
.question__eyebrow { margin: 0 0 8px; color: var(--accent-text); font-family: var(--chrome); font-size: 16px; font-weight: 680; letter-spacing: .01em; }
h1, h2, h3, strong { font-family: var(--chrome); }
h1 { max-width: 19ch; margin: 0; font-size: clamp(1.75rem, 5.4vw, 1.875rem); line-height: 1.12; letter-spacing: -.3px; }
h2 { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.18px; }
.page--home h1 { max-width: 18ch; font-size: clamp(2rem, 7vw, 2.5rem); letter-spacing: -.5px; }
.source-rail {
  display: grid;
  width: 100%;
  margin: 20px 0 0;
  padding: 2px 0 10px;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
.source-rail__card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--surface-3);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: 0 8px 18px rgba(0,0,0,.42);
  scroll-margin-top: 16px;
  scroll-snap-align: start;
  text-decoration: none;
  animation: source-rise 350ms both;
}
.source-rail__card:nth-child(2) { animation-delay: 60ms; }
.source-rail__card:nth-child(3) { animation-delay: 120ms; }
.source-rail__card:nth-child(4) { animation-delay: 180ms; }
.source-rail__card:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.source-rail__top { display: flex; align-items: center; gap: 8px; }
.source-rail__icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(32,184,205,.7); border-radius: 50%; color: var(--ink); font-family: var(--mono); font-size: 16px; }
.source-rail__icon::before, .citation__pill::before { content: attr(data-number); }
.source-rail__domain, .source-rail__note { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 16px; }
.source-rail__title { display: -webkit-box; margin: 12px 0 6px; overflow: hidden; font-family: var(--chrome); font-size: 16px; font-weight: 620; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.source-rail__note { margin-top: auto; line-height: 1.35; }
.question__deck { max-width: 62ch; margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.line-figure { position: relative; margin: 24px 0 0; overflow: hidden; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); box-shadow: 0 12px 26px rgba(0,0,0,.48); }
.line-figure::after { position: absolute; inset: 0; border: 1px solid rgba(32,184,205,.16); border-radius: inherit; content: ""; pointer-events: none; }
.answer-layout { display: grid; gap: 24px; margin-top: 32px; }
.answer__section { padding: 28px 0; border-top: 1px solid var(--surface-3); }
.answer__section--lead { padding-top: 0; border-top: 0; }
.answer__label, .definition-rail__heading { margin: 0 0 12px; color: var(--accent-text); font-family: var(--chrome); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.answer p, .answer li, .takeaway p, .definition-rail dd { font-size: 16px; line-height: 1.55; }
.answer p { max-width: 68ch; margin: 0 0 16px; }
.answer__lede p:first-child { color: var(--ink); font-size: 19px; line-height: 1.55; }
.answer__list { margin: 0; padding-left: 22px; }
.answer__list li { max-width: 64ch; margin: 0 0 12px; padding-left: 6px; }
.citation { display: inline-flex; min-width: 44px; min-height: 44px; margin: -10px -5px; align-items: center; justify-content: center; vertical-align: middle; text-decoration: none; }
.citation__pill { display: grid; min-width: 24px; height: 24px; place-items: center; border: 1px solid var(--surface-3); border-radius: 4px; background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 16px; font-weight: 600; line-height: 1; }
.citation:hover .citation__pill, .citation:focus-visible .citation__pill { border-color: var(--accent); }
.citation:focus-visible { outline: none; }
.definition-rail { padding: 20px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); }
.definition-rail dl { margin: 0; }
.definition-rail__item { padding: 16px 0; border-top: 1px solid var(--surface-3); }
.definition-rail__item:first-child { padding-top: 0; border-top: 0; }
.definition-rail dt { font-family: var(--chrome); font-size: 16px; font-weight: 680; }
.definition-rail dd { margin: 6px 0 0; color: var(--muted); }
.takeaway { margin-top: 12px; padding: 20px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-1); }
.takeaway h3 { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.2; letter-spacing: -.18px; }
.takeaway p { margin: 0; }
.card-pager { display: grid; gap: 12px; margin: 40px 0 0; padding: 24px 0 40px; border-top: 1px solid var(--surface-3); }
.card-pager__link { display: flex; min-height: 92px; flex-direction: column; justify-content: center; padding: 14px 16px; border: 1px solid var(--surface-3); border-radius: 8px; background: var(--surface-1); text-decoration: none; }
.card-pager__link:hover, .card-pager__link:focus-visible { border-color: var(--accent); }
.card-pager__link span { color: var(--muted); font-size: 16px; }
.card-pager__link strong { margin-top: 4px; font-size: 16px; }
.site-footer { width: min(100%, calc(var(--measure) + 64px)); margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--surface-3); color: var(--muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
.site-footer__links a { display: inline-flex; min-height: 44px; align-items: center; font-size: 16px; }
.site-footer p { max-width: 66ch; margin: 0; font-size: 16px; line-height: 1.55; }
.stream-word { opacity: .72; animation: word-settle 280ms both; }
.stream-word:nth-child(2n) { animation-delay: 35ms; }
.stream-word:nth-child(3n) { animation-delay: 70ms; }
.stream-word:nth-child(5n) { animation-delay: 105ms; }
@keyframes source-rise { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes word-settle { to { opacity: 1; } }

@media (min-width: 760px) {
  .site-header__inner { padding-top: 20px; }
  .notebook { padding-top: 40px; }
  .source-rail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .source-rail__card { min-height: 158px; }
  .answer-layout { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 32px; }
  .definition-rail { position: sticky; top: 16px; }
  .card-pager { grid-template-columns: 1fr 1fr; }
  .card-pager__link--next { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .stream-word { opacity: 1; }
}

@media (prefers-color-scheme: light) {
  :root { --ink: #141414; --muted: #565656; --quiet: #6e6e6e; --canvas: #ffffff; --surface-1: #f5f7f7; --surface-2: #e9eeee; --surface-3: #cfd7d8; --accent: #1591a3; --accent-text: #0e7180; --accent-ink: #ffffff; }
  body::before { background: rgba(21,145,163,.08); }
  .site-header { background: rgba(255,255,255,.96); }
  .source-rail__card, .line-figure { box-shadow: 0 8px 18px rgba(0,0,0,.10); }
}