:root {
  color-scheme: dark;
  --bg: #111411;
  --panel: #191e1b;
  --panel-raised: #202822;
  --text: #edf2ed;
  --muted: #aab5aa;
  --line: #39443a;
  --green: #83d39b;
  --aqua: #79d4ce;
  --amber: #ffc36c;
  --coral: #ff9d86;
  --link: #9fc6ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], .anchor-alias { scroll-margin-top: calc(var(--papers-bar-height, 0px) + 68px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.72 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: 0;
}
a { color: var(--link); overflow-wrap: anywhere; touch-action: manipulation; }
a:hover { color: var(--aqua); }
code {
  border: 1px solid #465448;
  border-radius: 4px;
  background: #151a16;
  padding: 1px 5px;
  color: #d5e5d7;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 4px max(20px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  background: rgba(17, 20, 17, .97);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.topbar a:hover { color: var(--green); }
.topbar a[aria-current="location"] { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.topbar a:active { transform: scale(.985); transition-duration: 80ms; }
.brand { color: var(--green) !important; font-weight: 800; letter-spacing: 0; }
main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 80px; }
.hero { max-width: 900px; padding: 28px 0 18px; }
.eyebrow { margin: 0 0 9px; color: var(--green); font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1 { max-width: 980px; margin: 0; font-size: 46px; line-height: 1.13; letter-spacing: 0; }
h2 { margin: 50px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 26px; line-height: 1.25; }
h3 { margin: 0; font-size: 18px; line-height: 1.35; }
h4 { margin: 22px 0 7px; color: var(--aqua); font-size: 16px; }
p { margin: 10px 0; }
.lead { max-width: 880px; color: #d7ded7; font-size: 18px; }
.notice { margin: 22px 0; padding: 14px 16px; border-left: 4px solid var(--amber); background: #282419; }
.notice strong { color: #ffe1a8; }
.status { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 7px; border: 1px solid #4f5d50; border-radius: 999px; color: var(--muted); font-size: 12px; }
.status.current { border-color: #3d7b59; color: #b8edc7; background: #17281d; }
.status.limited { border-color: #875f31; color: #ffd398; background: #2c2215; }
.architecture-figure { margin: 24px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f5f5f0; }
.architecture-figure > a { display: block; }
.architecture-figure img { display: block; width: 100%; height: auto; border: 0; background: #fff; }
.architecture-figure figcaption { margin: 10px 4px 1px; color: #3f4b42; font-size: 14px; line-height: 1.55; }
.architecture-figure figcaption a { color: #215f8b; }
.architecture-figure figcaption strong { color: #203628; }
.mainline-causal-flow {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}
.mainline-causal-flow figcaption { margin: 12px 2px 0; }
.causal-flow-nav {
  display: grid;
  gap: 28px;
  padding: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, hsl(0 80% 98%) 0%, hsl(23 82% 97%) 17%, hsl(47 88% 97%) 33%, hsl(70 78% 96%) 50%, hsl(93 73% 96%) 67%, hsl(117 70% 96%) 83%, hsl(140 70% 96%) 100%);
}
.causal-flow-step {
  --step-color: hsl(0 72% 40%);
  --step-bg: hsl(0 78% 97%);
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  color: #17212b;
  text-decoration: none;
}
.causal-flow-step:not(:last-child)::after {
  position: absolute;
  bottom: -26px;
  left: calc(52px + 18px + (100% - 70px) / 2);
  color: #64748b;
  content: "↓";
  font-size: 21px;
  line-height: 24px;
  transform: translateX(-50%);
}
.causal-flow-no {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--step-color) 82%, #17212b);
  border-radius: 50%;
  background: var(--step-color);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.causal-flow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 82px;
  padding: 16px 20px;
  border: 2px solid var(--step-color);
  border-radius: 8px;
  background: var(--step-bg);
  transition: box-shadow 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.causal-flow-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.causal-flow-copy strong { color: #17212b; font-size: 17px; line-height: 1.3; }
.causal-flow-copy span { color: #475569; font-size: 14px; line-height: 1.5; }
.causal-flow-action { color: color-mix(in srgb, var(--step-color) 76%, #17212b); font-size: 13px; font-weight: 750; white-space: nowrap; }
.causal-flow-action::after { margin-left: 6px; content: "→"; }
.causal-flow-step:hover { color: #17212b; }
.causal-flow-step:hover .causal-flow-panel { box-shadow: 0 7px 20px rgba(23, 33, 43, .11); transform: translateY(-1px); }
.causal-flow-step:active .causal-flow-panel { transform: scale(.985); transition-duration: 80ms; }
.causal-flow-step:focus-visible { border-radius: 8px; outline: 3px solid #17212b; outline-offset: 4px; }
.causal-flow-step--model { --step-color: hsl(0 72% 40%); --step-bg: hsl(0 78% 97%); }
.causal-flow-step--compute { --step-color: hsl(23 80% 36%); --step-bg: hsl(23 82% 97%); }
.causal-flow-step--execution { --step-color: hsl(47 85% 28%); --step-bg: hsl(47 88% 97%); }
.causal-flow-step--memory { --step-color: hsl(70 70% 27%); --step-bg: hsl(70 78% 96%); }
.causal-flow-step--runtime { --step-color: hsl(93 62% 29%); --step-bg: hsl(93 73% 96%); }
.causal-flow-step--interconnect { --step-color: hsl(117 55% 30%); --step-bg: hsl(117 70% 96%); }
.causal-flow-step--control { --step-color: hsl(140 60% 30%); --step-bg: hsl(140 70% 96%); }
.mainline-stage { position: relative; }
#stage-model-structure { --stage-color: hsl(0 72% 40%); }
#stage-layer-compute { --stage-color: hsl(23 80% 36%); }
#stage-execution-loop { --stage-color: hsl(47 85% 28%); }
#stage-gpu-state { --stage-color: hsl(70 70% 27%); }
#stage-runtime-strategy { --stage-color: hsl(93 62% 29%); }
#stage-parallel-interconnect { --stage-color: hsl(117 55% 30%); }
#stage-datacenter-control { --stage-color: hsl(140 60% 30%); }
.mainline-stage > h2 { display: flex; gap: 12px; align-items: baseline; }
.stage-order { color: var(--stage-color, var(--papers-teal-dark, var(--green))); font: 800 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stage-subgroup { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--papers-line, var(--line)); }
.stage-subgroup > h3 { margin-bottom: 12px; padding-left: 11px; border-left: 3px solid var(--stage-color, var(--papers-teal, var(--green))); color: var(--papers-ink, var(--text)); }
.stage-subgroup > p { max-width: 920px; color: var(--papers-muted, var(--muted)); }
.anchor-alias { display: block; height: 0; overflow: hidden; }
.back-to-mainline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 20px;
  padding: 8px 12px;
  border: 1px solid var(--stage-color, var(--papers-teal, var(--green)));
  border-radius: 6px;
  color: var(--stage-color, var(--papers-teal-dark, var(--green)));
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.back-to-mainline::before { content: "↑"; }
.back-to-mainline:hover { background: color-mix(in srgb, var(--stage-color, var(--papers-teal, var(--green))) 10%, var(--papers-surface, var(--panel-raised))); color: var(--stage-color, var(--papers-teal-dark, var(--aqua))); }
.back-to-mainline:active { transform: scale(.985); transition-duration: 80ms; }
.back-to-mainline:focus-visible { outline: 3px solid var(--stage-color, var(--papers-teal, var(--green))); outline-offset: 3px; }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  isolation: isolate;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.mainline-home .topic-card,
body.mainline-home.papers-mainline .topic-card { min-height: 0; }
.topic-card p { color: var(--muted); font-size: 14px; }
.topic-card .open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--aqua);
  font-weight: 700;
  text-decoration: none;
}
.topic-card .open::before { position: absolute; z-index: 1; inset: 0; border-radius: inherit; content: ""; }
.topic-card .open::after { margin-left: 7px; content: "→"; }
.topic-card .open:hover { color: #d2fff5; }
.topic-card:focus-within { outline: 3px solid var(--papers-blue, var(--link)); outline-offset: 3px; }
.topic-card:active { transform: scale(.985); transition-duration: 80ms; }
.topic-no { margin-bottom: 11px; color: var(--amber); font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.track { margin: 16px 0; padding: 18px; border-left: 4px solid var(--green); background: var(--panel); }
.track h3 { color: var(--green); }
.track ul { margin: 9px 0 0; padding-left: 22px; }
.connections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.connection { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); }
.connection h3 { color: var(--amber); }
.reference-directory-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 18px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.reference-directory-link > span:first-child { display: grid; gap: 4px; }
.reference-directory-link strong { font-size: 18px; }
.reference-directory-link > span:first-child > span { color: var(--muted); font-size: 14px; }
.reference-directory-link > span:last-child { color: var(--aqua); font-size: 22px; transition: transform 140ms ease; }
.reference-directory-link:hover { color: var(--text); }
.reference-directory-link:hover > span:last-child { transform: translateX(3px); }
.reference-directory-link:focus-visible { outline: 3px solid var(--papers-blue, var(--link)); outline-offset: 3px; }
.source-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.source-table th, .source-table td { padding: 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.source-table th { background: var(--panel-raised); }
.small { color: var(--muted); font-size: 14px; }
.page-hero { padding: 28px 0 10px; }
.page-hero h1 { font-size: 39px; }
.page-meta { margin-top: 13px; color: var(--muted); }
.page-meta a { margin-right: 10px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
.article-body { min-width: 0; }
.article-aside { align-self: start; position: sticky; top: 72px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.article-aside h2 { margin: 0 0 10px; padding: 0; border: 0; color: var(--green); font-size: 16px; }
.article-aside a { display: block; margin: 7px 0; color: var(--muted); font-size: 14px; text-decoration: none; }
.article-aside a:hover { color: var(--aqua); }
.formula { padding: 15px; border: 1px solid #475448; border-radius: 6px; background: #121712; overflow-x: auto; font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comparison > div { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.comparison strong { color: var(--amber); }
.callout { margin: 18px 0; padding: 14px 16px; border-left: 4px solid var(--aqua); background: #142322; }
.callout.warn { border-left-color: var(--coral); background: #2a1b18; }
footer { margin-top: 58px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .topic-card:hover {
    border-color: color-mix(in srgb, var(--papers-teal, var(--green)) 46%, var(--line));
    box-shadow: 0 10px 26px rgba(23, 33, 43, .08);
    transform: translateY(-1px);
  }
}
@media (max-width: 900px) {
  .topic-grid, .connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  h1 { font-size: 38px; }
  .page-hero h1 { font-size: 34px; }
}
@media (max-width: 620px) {
  main { width: min(100% - 28px, 1240px); padding-top: 18px; }
  .topbar { padding-inline: 14px; gap: 12px; }
  .topic-grid, .connections, .comparison { grid-template-columns: 1fr; }
  .reference-directory-link { gap: 10px; padding-block: 15px; }
  h2 { font-size: 23px; }
  .causal-flow-nav { gap: 25px; padding: 8px; }
  .causal-flow-step { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .causal-flow-step:not(:last-child)::after { left: calc(38px + 10px + (100% - 48px) / 2); bottom: -24px; }
  .causal-flow-no { width: 36px; height: 36px; font-size: 15px; }
  .causal-flow-panel { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 13px 14px; }
  .causal-flow-copy strong { font-size: 15px; }
  .causal-flow-copy span { font-size: 13px; }
  .causal-flow-action { justify-self: start; }
  .mainline-stage > h2 { align-items: flex-start; }
  h1, .page-hero h1 { font-size: 28px; }
  .topic-card .open { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--papers-canvas, var(--bg));
  }
}
@media (prefers-contrast: more) {
  .topbar { border-bottom-color: currentColor; background: var(--papers-canvas, var(--bg)); }
  .topic-card, .causal-flow-panel, .back-to-mainline { border-width: 2px; }
  .topic-card .open, .back-to-mainline { text-decoration: underline; }
}