:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #dce6f5;
  background: #080b13;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 280px;
  margin: 0;
  background: #080b13;
  color: #dce6f5;
  line-height: 1.7;
}

a {
  color: #8cc8ff;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: #c3e5ff;
}

a:focus-visible {
  outline: 3px solid #8cc8ff;
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #080b13;
}

.skip-link:focus {
  top: 16px;
}

.site-header,
.page-shell,
.site-footer {
  width: min(calc(100% - 40px), 920px);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
}

.brand img {
  width: 38px;
  height: 38px;
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
}

.site-nav a {
  color: #c3d2e5;
  font-size: 0.94rem;
}

.page-shell {
  padding: clamp(48px, 8vw, 92px) 0 72px;
}

.breadcrumbs {
  margin-bottom: 30px;
  color: #9fb0c5;
  font-size: 0.9rem;
}

/* A plain line of context above the title, set in ordinary sentence case.
   Not a kicker chip: no uppercase, no tracking, no pill. */
.eyebrow {
  margin: 0 0 12px;
  color: #9fb0c5;
  font-size: 0.9rem;
}

h1,
h2,
h3 {
  color: #fff;
  line-height: 1.15;
}

h1 {
  max-width: 820px;
  margin: 0 0 22px;
  font-size: clamp(2.45rem, 8vw, 5rem);
  letter-spacing: -0.035em;
}

h2 {
  margin: 56px 0 16px;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  letter-spacing: -0.015em;
}

h3 {
  margin: 28px 0 8px;
  font-size: 1.18rem;
}

p,
li,
dd,
dt {
  font-size: clamp(1rem, 1.7vw, 1.12rem);
}

p {
  margin: 0 0 18px;
}

.lede {
  max-width: 780px;
  color: #f2f6fc;
  font-size: clamp(1.18rem, 2.5vw, 1.45rem);
  line-height: 1.6;
}

.meta-line {
  margin-top: 24px;
  color: #aebed2;
  font-size: 0.92rem;
}

.prose {
  max-width: 780px;
}

.prose ul,
.prose ol {
  padding-left: 24px;
}

.prose li + li {
  margin-top: 10px;
}

/* A screenshot from the simulator, placed next to the text it illustrates.
   Explicit width/height on the img reserves the space before it loads. */
.page-figure {
  margin: 28px 0;
}

.page-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(140, 200, 255, 0.2);
  border-radius: 4px;
}

.page-figure figcaption {
  margin-top: 10px;
  font-size: 0.95em;
  color: rgba(226, 236, 250, 0.78);
}

.callout {
  margin: 32px 0;
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid rgba(140, 200, 255, 0.2);
  border-radius: 4px;
  background: rgba(16, 24, 38, 0.8);
}

.callout h2,
.callout h3 {
  margin-top: 0;
}

/* Blank run between a prediction and its answer, so the answer is not sitting
   in the reader's eye while they are still supposed to be guessing. Scales with
   the viewport rather than a fixed pixel height, and collapses on short screens
   so it never becomes a wall of nothing. */
.answer-gap {
  height: clamp(180px, 48vh, 420px);
}

/* Inline term definitions, marked in the text with an asterisk. */
.term-notes {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 2px solid rgba(140, 200, 255, 0.28);
  font-size: 0.95em;
  color: rgba(226, 236, 250, 0.78);
}

.term-notes p {
  margin: 6px 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 8px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid #8cc8ff;
  border-radius: 4px;
  background: #8cc8ff;
  color: #07101b;
  font-weight: 750;
  text-decoration: none;
}

.button:hover {
  background: #c3e5ff;
  color: #07101b;
}

.button-secondary {
  background: transparent;
  color: #8cc8ff;
}

/* Key facts as a definition list, one per line, read top to bottom. It used to
   be three identical bordered cards side by side, which is the stock AI layout
   and made three short facts look like a dashboard. */
.fact-grid {
  margin: 28px 0;
  border-top: 1px solid rgba(140, 200, 255, 0.16);
}

.fact-grid > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(140, 200, 255, 0.16);
}

.fact-grid dt {
  flex: 0 0 11rem;
  color: #9fb0c5;
}

.fact-grid dd {
  margin: 0;
  color: #fff;
}

.site-footer {
  padding: 28px 0 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9fb0c5;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
}

.site-footer p,
.site-footer a {
  font-size: 0.9rem;
}

@media (max-width: 680px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .page-shell {
    padding-top: 34px;
  }

  .fact-grid dt {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}