/*
 * AI System Design — layered on top of how-to-think.css, which supplies the
 * shared field-guide design system (paper, acts, lens rows, examples, print).
 * Everything here is specific to this edition's diagrams and interactives.
 */

body.sys-special {
  --sys-orange: var(--think-orange);
  --sys-blue: var(--think-blue);
  --sys-green: var(--think-green);
  --sys-violet: var(--think-violet);
  --sys-amber: #b36e08;
}

.sys-edition { --act: var(--think-orange); }

/* ---------------------------------------------------------------- hero --- */

.sys-hero-visual { display: flex; flex-direction: column; justify-content: center; }

.sys-engine {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 40px rgba(31, 38, 35, .08));
}

.sys-token-grid rect {
  fill: var(--think-orange);
  opacity: .18;
  animation: sys-prefill 5s ease-in-out infinite;
}

/* Prefill is one parallel pass: every cell lights on the same beat. */
@keyframes sys-prefill {
  0%, 8% { opacity: .12; }
  14%, 46% { opacity: .82; }
  70%, 100% { opacity: .3; }
}

.sys-cache-well {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  color: var(--think-blue);
  opacity: .3;
}

/* The band accumulates on the same 5s beat as prefill and decode: one jump for
   the prompt, then a slow creep as each output token adds its own slice. */
.sys-cache-band {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sys-accumulate 5s ease-in-out infinite;
}

@keyframes sys-accumulate {
  0%, 8% { transform: scaleX(.02); }
  16%, 46% { transform: scaleX(.58); }
  88% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(.02); }
}

.sys-cache-ticks line { stroke: var(--think-blue); stroke-width: 1; stroke-dasharray: 3 5; opacity: .35; }

.sys-decode circle {
  fill: var(--think-blue);
  opacity: 0;
  animation: sys-decode 5s ease-in-out infinite;
}

/* Decode is strictly sequential: one dot per beat, never two at once. */
.sys-decode circle:nth-child(1) { animation-delay: .0s; }
.sys-decode circle:nth-child(2) { animation-delay: .18s; }
.sys-decode circle:nth-child(3) { animation-delay: .36s; }
.sys-decode circle:nth-child(4) { animation-delay: .54s; }
.sys-decode circle:nth-child(5) { animation-delay: .72s; }
.sys-decode circle:nth-child(6) { animation-delay: .9s; }
.sys-decode circle:nth-child(7) { animation-delay: 1.08s; }
.sys-decode circle:nth-child(8) { animation-delay: 1.26s; }
.sys-decode circle:nth-child(9) { animation-delay: 1.44s; }
.sys-decode circle:nth-child(10) { animation-delay: 1.62s; }

@keyframes sys-decode {
  0%, 46% { opacity: 0; transform: scale(.4); }
  54%, 88% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); }
}

.sys-decode circle { transform-box: fill-box; transform-origin: center; }

.sys-engine-labels text {
  fill: var(--think-muted);
  font: 800 11px var(--font-sans);
  letter-spacing: .14em;
}

.sys-engine-labels .sys-label-cache { fill: var(--think-blue); }
.sys-engine-labels .sys-label-decode { fill: var(--think-blue); }
.sys-hero .think-hero-thesis span:last-child { color: var(--think-blue); opacity: calc(.4 + var(--hero-progress)); }

/* -------------------------------------------------------- orientation --- */

.sys-orientation-note {
  max-width: 720px;
  margin: 34px 0 0;
  color: var(--think-muted);
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
}

/* --------------------------------------------------------------- acts --- */

.think-act--mechanics { --act: var(--sys-orange); }
.think-act--shape { --act: var(--sys-blue); background: #e6eaf5; }
.think-act--workloads { --act: var(--sys-green); }
.think-act--config { --act: var(--sys-orange); }
.think-act--levers { --act: var(--sys-violet); background: #ebe7f3; }

/* The shared field-guide template uses exhibition-scale pauses between every
   block. This article now has a continuous argument, so its sections need to
   read as chapters rather than separate posters. */
.sys-edition .think-act {
  padding-top: clamp(80px, 9vw, 125px);
  padding-bottom: clamp(85px, 10vw, 140px);
}

.sys-edition .think-act-head { margin-bottom: clamp(58px, 7vw, 92px); }
.sys-edition .think-act-head h2 { font-size: clamp(3rem, 6vw, 5.8rem); }
.sys-edition .think-lens-row { margin-bottom: clamp(85px, 11vw, 145px); }

/* ----------------------------------------------------- request path --- */

.sys-request-path {
  max-width: 1180px;
  margin: 0 auto clamp(90px, 12vw, 150px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.sys-request-path > div {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--think-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}

.sys-request-path > i {
  align-self: center;
  color: var(--act);
  font-style: normal;
  font-size: 1.4rem;
}

.sys-request-path span,
.sys-workload-grid span {
  display: block;
  margin-bottom: 22px;
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sys-request-path strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.sys-request-path p {
  margin: 10px 0 0;
  color: var(--think-muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ------------------------------------------------ information design --- */

.sys-before-after {
  max-width: 1080px;
  margin: 0 auto clamp(110px, 14vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
}

.sys-before-after > article {
  height: 100%;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--think-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}

.sys-before-after > div {
  color: var(--act);
  font-size: 1.7rem;
  text-align: center;
}

.sys-before-after h3,
.sys-opposed-cases h3 {
  margin: 12px 0 26px;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.sys-before-after ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys-before-after li {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--think-line);
  font-size: .98rem;
}

.sys-before-after li:last-child { border-bottom: 0; }
.sys-before-after article > p:last-child { margin: 26px 0 0; color: var(--think-muted); font-size: .88rem; }

.sys-dual-copy {
  max-width: 1120px;
  margin: 0 auto clamp(95px, 12vw, 150px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(50px, 8vw, 100px);
}

.sys-serving-bridge {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid var(--think-line);
  border-radius: 30px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}

.sys-serving-bridge-head {
  max-width: 830px;
  margin-bottom: clamp(55px, 8vw, 90px);
}

.sys-serving-bridge-head h3 {
  margin: 14px 0 18px;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.sys-serving-bridge-head > p:last-child {
  max-width: 680px;
  color: var(--think-muted);
  font-size: 1.1rem;
  line-height: 1.55;
}

.sys-serving-bridge .think-lens-row {
  margin-bottom: 60px;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
  gap: clamp(45px, 7vw, 85px);
}





.sys-companion-link {
  margin: 38px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--think-line);
  color: var(--think-muted);
  font-size: .98rem;
}

.sys-companion-link a { color: var(--act); font-weight: 700; }

/* ------------------------------------------------ workload contrasts --- */

.sys-opposed-cases {
  max-width: 1120px;
  margin: clamp(90px, 12vw, 150px) auto 24px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: stretch;
  border-radius: 28px;
  background: #16211f;
  color: #f4f1e8;
  box-shadow: var(--think-shadow);
}

.sys-opposed-cases article { padding: clamp(30px, 5vw, 58px); }
.sys-opposed-cases > div { align-self: center; color: var(--act); font-size: 1.8rem; text-align: center; }
.sys-opposed-cases h3 { color: inherit; }
.sys-opposed-cases article > p:not(.think-thinker) { color: #bdc8c3; line-height: 1.65; }
.sys-opposed-cases article > strong { display: block; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); color: color-mix(in srgb, var(--act) 72%, white); font-size: .9rem; line-height: 1.45; }

.sys-workload-grid {
  max-width: 1120px;
  margin: 0 auto clamp(100px, 14vw, 180px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sys-workload-grid article {
  padding: 32px;
  border: 1px solid var(--think-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}

.sys-workload-grid span { margin-bottom: 18px; }
.sys-workload-grid strong { display: block; font-family: var(--font-sans); font-size: 1.08rem; }
.sys-workload-grid p { margin: 10px 0 0; color: var(--think-muted); font-size: .95rem; line-height: 1.55; }

/* -------------------------------------------------------- approaches --- */

.sys-levers-note {
  margin-top: 22px;
  color: var(--think-muted);
  font-size: .96rem;
  line-height: 1.6;
}

.sys-approaches {
  max-width: 1120px;
  margin: 0 auto clamp(70px, 9vw, 110px);
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--think-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .5);
}

.sys-approaches-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sys-approaches-head h3 { margin: 6px 0 12px; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.15; }
.sys-approaches-head > p:last-child { color: var(--think-muted); line-height: 1.65; }

.sys-approach-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--think-line);
}

.sys-approach-list li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--think-line);
}

.sys-approach-list span {
  grid-row: 1 / span 3;
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding-top: 3px;
}

.sys-approach-list strong { font-family: var(--font-sans); font-size: 1.04rem; line-height: 1.3; }
.sys-approach-list p { margin: 0; line-height: 1.62; }
.sys-approach-list em {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .86rem;
  font-style: normal;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 2px solid var(--act);
}

.sys-tension { max-width: 720px; margin: 0 auto clamp(90px, 12vw, 150px); }

/* -------------------------------------------------------- arithmetic --- */

.sys-arithmetic {
  max-width: 1120px;
  margin: clamp(70px, 9vw, 110px) auto clamp(70px, 9vw, 110px);
}

.sys-arithmetic-head { max-width: 66ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sys-arithmetic-head h3 { margin: 6px 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; }
.sys-arithmetic-head > p:last-child { color: var(--think-muted); line-height: 1.65; }

.sys-arith-constants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.sys-arith-constants > div {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--think-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}

.sys-arith-constants span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sys-arith-constants strong { font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1; color: var(--act); }
.sys-arith-constants em {
  color: var(--think-muted);
  font-family: var(--font-mono, monospace);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.5;
}

.sys-arith-table {
  border: 1px solid var(--think-line);
  border-radius: 22px;
  overflow: hidden;
}

.sys-arith-table > div {
  display: grid;
  grid-template-columns: 1.1fr 1fr .7fr 1fr 1.1fr;
  background: color-mix(in srgb, var(--act) 4%, var(--think-paper));
}

.sys-arith-table > div + div { border-top: 1px solid var(--think-line); }
.sys-arith-table > div > * { padding: 18px 20px; }
.sys-arith-table > div > * + * { border-left: 1px solid var(--think-line); }
.sys-arith-table strong { font-family: var(--font-sans); font-size: .95rem; line-height: 1.4; }
.sys-arith-table span { color: var(--think-muted); font-size: .9rem; line-height: 1.5; }
.sys-arith-table b { color: var(--act); font-family: var(--font-sans); font-size: .95rem; line-height: 1.4; }

.sys-arith-head {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sys-arith-head > span { color: var(--think-muted) !important; font-size: .62rem !important; }

.sys-arith-punchline {
  max-width: 72ch;
  margin: 26px 0 clamp(50px, 6vw, 76px);
  font-size: 1.06rem;
  line-height: 1.68;
}

.sys-arith-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 4vw, 52px);
}

.sys-arith-split article {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--think-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .5);
}

.sys-arith-split h3 { margin: 6px 0 14px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; }
.sys-arith-split p { line-height: 1.66; }
.sys-arith-split p + p { margin-top: 14px; }

.sys-arith-formula {
  padding: 18px 20px;
  border-left: 3px solid var(--act);
  background: color-mix(in srgb, var(--act) 6%, transparent);
  font-family: var(--font-mono, monospace);
  font-size: .92rem;
  line-height: 1.7;
}
.sys-arith-formula strong { color: var(--act); }

.sys-edition .think-act-number span { opacity: .45; margin: 0 2px; }

.sys-coda {
  max-width: 68ch;
  margin: clamp(50px, 6vw, 80px) auto clamp(40px, 5vw, 60px);
  font-size: 1.12rem;
  line-height: 1.7;
  text-align: center;
}

/* ---------------------------------------------------- decide table --- */

.sys-decide { max-width: 1120px; margin: 0 auto clamp(85px, 11vw, 145px); }
.sys-decide-head { max-width: 68ch; margin-bottom: 26px; }
.sys-decide-head h3 { margin: 6px 0 12px; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.18; }
.sys-decide-head > p:last-child { color: var(--think-muted); line-height: 1.66; }

.sys-decide-table { border: 1px solid var(--think-line); border-radius: 22px; overflow: hidden; }
.sys-decide-table > div { display: grid; grid-template-columns: 1.25fr .95fr .9fr 1.25fr; background: color-mix(in srgb, var(--act) 4%, var(--think-paper)); }
.sys-decide-table > div + div { border-top: 1px solid var(--think-line); }
.sys-decide-table > div > * { padding: 16px 18px; }
.sys-decide-table > div > * + * { border-left: 1px solid var(--think-line); }
.sys-decide-table strong { font-family: var(--font-sans); font-size: .93rem; line-height: 1.4; }
.sys-decide-table span { color: var(--think-muted); font-size: .88rem; line-height: 1.5; }
.sys-decide-table b { font-family: var(--font-sans); font-size: .89rem; font-weight: 600; line-height: 1.45; color: var(--think-muted); }
.sys-decide-table b.is-in { color: var(--act); }
.sys-decide-head-row { color: var(--think-muted); font-family: var(--font-sans); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sys-decide-head-row > span { color: var(--think-muted) !important; font-size: .6rem !important; }

.sys-decide-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.sys-decide-verdict article { min-width: 0; padding: 22px 24px; border: 1px solid var(--think-line); border-radius: 18px; background: rgba(255, 255, 255, .5); }
.sys-decide-verdict span { display: block; color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sys-decide-verdict strong { display: block; margin: 6px 0 8px; font-family: var(--font-sans); font-size: 1.15rem; line-height: 1.25; }
.sys-decide-verdict p { color: var(--think-muted); font-size: .92rem; line-height: 1.6; }

.sys-decide-note { max-width: 76ch; margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--act); color: var(--think-muted); font-size: .95rem; line-height: 1.66; }

/* ------------------------------------------------- derivation ladder --- */

.sys-ladder-block { margin: clamp(46px, 6vw, 74px) 0; }
.sys-ladder-head { max-width: 68ch; margin-bottom: 26px; }
.sys-ladder-head h3 { margin: 6px 0 12px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.18; }
.sys-ladder-head > p:last-child { color: var(--think-muted); line-height: 1.66; }

.sys-ladder {
  margin: 0 0 clamp(40px, 5vw, 62px);
  padding: 0;
  list-style: none;
  border: 1px solid var(--think-line);
  border-radius: 22px;
  overflow: hidden;
}

.sys-ladder li {
  display: grid;
  grid-template-columns: 46px 1fr 190px;
  align-items: center;
  gap: 0 18px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--act) 4%, var(--think-paper));
}
.sys-ladder li + li { border-top: 1px solid var(--think-line); }

.sys-ladder li > span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.sys-ladder strong { display: block; font-family: var(--font-sans); font-size: 1rem; line-height: 1.35; }
.sys-ladder p { margin: 4px 0 0; color: var(--think-muted); font-size: .9rem; line-height: 1.55; }

.sys-ladder b {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-family: var(--font-mono, monospace);
  font-size: .84rem;
  font-weight: 500;
  color: var(--think-muted);
  text-align: right;
}
.sys-ladder b i {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-style: normal;
  font-weight: 700;
  color: var(--think-ink);
}
/* The accent does not clear 4.5:1 on paper at this size; the payoff figures
   stay on ink and the ladder's emphasis comes from weight and position. */
.sys-ladder li:nth-last-child(-n+3) { background: color-mix(in srgb, var(--act) 9%, var(--think-paper)); }

.sys-cost-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 44px); }
.sys-cost-paths-head { grid-column: 1 / -1; max-width: 68ch; }
.sys-cost-paths-head h3 { margin: 6px 0 12px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; }
.sys-cost-paths-head > p:last-child { color: var(--think-muted); line-height: 1.66; }

.sys-cost-paths > article {
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--think-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .5);
}
.sys-cost-paths h4 { margin: 6px 0 12px; font-family: var(--font-sans); font-size: 1.12rem; line-height: 1.25; }
.sys-cost-paths p { line-height: 1.62; font-size: .96rem; }
.sys-cost-paths p + p { margin-top: 12px; }
.sys-cost-paths a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--act); }

.sys-cost-table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: .9rem; }
.sys-cost-table th {
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--think-line);
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
}
.sys-cost-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--think-line); line-height: 1.4; }
.sys-cost-table th:last-child, .sys-cost-table td:last-child { padding-right: 0; text-align: right; }
.sys-cost-table tr:last-child td { border-bottom: 0; }
.sys-cost-table b { font-family: var(--font-sans); font-size: 1.04rem; color: var(--act); white-space: nowrap; }
.sys-rate { font-family: var(--font-mono, monospace); font-size: .9em; }

.sys-ladder-note {
  max-width: 76ch;
  margin-top: clamp(28px, 4vw, 44px);
  padding-left: 18px;
  border-left: 2px solid var(--act);
  color: var(--think-muted);
  font-size: .95rem;
  line-height: 1.66;
}

/* ------------------------------------------------- column alignment --- */

/* Side-by-side lenses are stretched to equal height by the grid, but their
   inner blocks flowed from the top, so the example card and closing question
   landed at different heights in each column. Make each column a flex stack
   and push the trailing blocks to the bottom so they line up across the row. */
.sys-dual-copy > .think-lens,
.sys-edition .think-lens-row > .think-lens,
.sys-arith-split > article,
.sys-config-notes > article,
.sys-provider-notes > article {
  display: flex;
  flex-direction: column;
}

.sys-dual-copy > .think-lens > .think-example,
.sys-edition .think-lens-row > .think-lens > .think-example,
.sys-arith-split > article > .think-example,
.sys-config-notes > article > .think-example,
.sys-provider-notes > article > .think-example {
  margin-top: auto;
}

/* The question sits below the example; keep the pair together at the bottom
   rather than letting the question absorb the free space on its own. */
.sys-dual-copy > .think-lens > .think-question,
.sys-edition .think-lens-row > .think-lens > .think-question {
  margin-bottom: 0;
}

/* Lenses with no example card still bottom-align their closing question. */
.sys-dual-copy > .think-lens > .think-example ~ .think-question,
.sys-edition .think-lens-row > .think-lens > .think-example ~ .think-question {
  margin-top: 25px;
}

/* ------------------------------------------------------ configuration --- */

.sys-config-intro { max-width: 68ch; margin: 0 auto clamp(48px, 6vw, 76px); }
.sys-config-intro p { line-height: 1.7; }
.sys-config-intro p + p { margin-top: 16px; }

.sys-usecase {
  max-width: 1120px;
  margin: 0 auto clamp(48px, 6vw, 76px);
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--think-line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--act) 5%, var(--think-paper));
}
.sys-usecase h3 { margin: 6px 0 14px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.18; }
.sys-usecase > p:last-of-type { max-width: 70ch; line-height: 1.68; }

.sys-usecase-shape {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--think-line);
}
.sys-usecase-shape > div { display: grid; align-content: start; gap: 6px; }
.sys-usecase-shape span {
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sys-usecase-shape strong { font-family: var(--font-sans); font-size: .92rem; font-weight: 600; line-height: 1.45; }

.sys-param-map { max-width: 1120px; margin: 0 auto clamp(48px, 6vw, 76px); }
.sys-param-map-head { max-width: 60ch; margin-bottom: 26px; }
.sys-param-map-head h3 { margin: 6px 0 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.18; }

.sys-param-table { border: 1px solid var(--think-line); border-radius: 22px; overflow: hidden; }
.sys-param-table > div { display: grid; grid-template-columns: 1.15fr .9fr 1.5fr; background: color-mix(in srgb, var(--act) 4%, var(--think-paper)); }
.sys-param-table > div + div { border-top: 1px solid var(--think-line); }
.sys-param-table > div > * { padding: 18px 20px; }
.sys-param-table > div > * + * { border-left: 1px solid var(--think-line); }
.sys-param-table strong { font-family: var(--font-sans); font-size: .93rem; font-weight: 700; line-height: 1.4; }
.sys-param-table strong em { display: block; color: var(--think-muted); font-size: .82rem; font-style: normal; font-weight: 500; }
.sys-param-table code { color: var(--act); font-family: var(--font-mono, monospace); font-size: .84rem; word-break: break-word; }
.sys-param-table span { color: var(--think-muted); font-size: .9rem; line-height: 1.55; }
.sys-param-head { color: var(--think-muted); font-family: var(--font-sans); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.sys-config-block { max-width: 1120px; margin: 0 auto clamp(48px, 6vw, 76px); }
.sys-config-block h3 { margin: 6px 0 22px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.18; }

.sys-config-code {
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--think-line);
  border-left: 3px solid var(--act);
  border-radius: 16px;
  /* style.css sets `article pre { color: #f5f6fa }` for its dark code slab.
     This block uses the paper background instead, so the colour has to be
     reclaimed explicitly or the text renders near-white on cream in light
     mode. --think-ink flips with the theme; the hard-coded value does not. */
  color: var(--think-ink);
  background: color-mix(in srgb, var(--think-ink) 4%, var(--think-paper));
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .84rem;
  line-height: 1.75;
  tab-size: 4;
}
.sys-config-code code { font: inherit; color: inherit; background: none; padding: 0; }
.sys-config-code--small { font-size: .8rem; margin-top: 16px; }
.sys-config-note { max-width: 70ch; margin-top: 16px; color: var(--think-muted); font-size: .92rem; line-height: 1.6; }
/* The accent is a display colour; at .88em on the lighter note card it does
   not clear 4.5:1. Weight carries the "this is a literal" signal instead. */
.sys-config-note code, .sys-config-notes code { font-family: var(--font-mono, monospace); font-size: .88em; font-weight: 600; color: inherit; background: none; padding: 0; }

.sys-config-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 4vw, 52px);
  max-width: 1120px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}
.sys-config-notes article {
  /* Grid items default to min-width:auto, so the <pre> inside would widen the
     track past the container instead of scrolling within it. */
  min-width: 0;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--think-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .5);
}
.think-act--config .think-example span { color: var(--think-ink); }
.sys-config-notes h3 { margin: 6px 0 14px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.24; }
.sys-config-notes p { line-height: 1.66; }
.sys-config-notes p + p { margin-top: 14px; }

.sys-config-caveat {
  max-width: 72ch;
  margin: 0 auto clamp(90px, 12vw, 150px);
  padding-left: 18px;
  border-left: 2px solid var(--act);
  color: var(--think-muted);
  font-size: .96rem;
  line-height: 1.68;
}

/* ---------------------------------------------------------- providers --- */

.sys-providers { max-width: 1120px; margin: 0 auto clamp(48px, 6vw, 76px); }
.sys-providers-head { max-width: 68ch; margin-bottom: 26px; }
.sys-providers-head h3 { margin: 6px 0 12px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.18; }
.sys-providers-head > p:last-child { color: var(--think-muted); line-height: 1.66; }

.sys-provider-table { border: 1px solid var(--think-line); border-radius: 22px; overflow: hidden; }
.sys-provider-table > div { display: grid; grid-template-columns: .9fr 1fr 1.2fr 1.2fr; background: color-mix(in srgb, var(--act) 4%, var(--think-paper)); }
.sys-provider-table > div + div { border-top: 1px solid var(--think-line); }
.sys-provider-table > div > * { padding: 18px 20px; }
.sys-provider-table > div > * + * { border-left: 1px solid var(--think-line); }
.sys-provider-table strong { font-family: var(--font-sans); font-size: .93rem; line-height: 1.4; }
.sys-provider-table span { color: var(--think-muted); font-size: .89rem; line-height: 1.55; }
/* style.css gives inline <code> a --bg-subtle chip; inside these table cells
   that lightens the ground under already-muted text. Sit on the row instead. */
.sys-provider-table code,
.sys-param-table code { background: none; padding: 0; }
.sys-provider-table code { color: inherit; font-family: var(--font-mono, monospace); font-size: .82rem; font-weight: 600; word-break: break-word; }
/* Inherit the cell's colour rather than naming one: --think-ink resolves to
   the light value inside this subtree, and the accent underline already
   carries the "this is a link" signal in both themes. */
.sys-provider-table a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--act); }
.sys-provider-table a:hover { text-decoration-thickness: 2px; }
.sys-provider-table a code { color: inherit; }
.sys-provider-head { color: var(--think-muted); font-family: var(--font-sans); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sys-provider-head > span { color: var(--think-muted) !important; font-size: .62rem !important; }

.sys-provider-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 4vw, 52px); margin-top: clamp(30px, 4vw, 46px); }
.sys-provider-notes article { min-width: 0; padding: clamp(26px, 3.4vw, 40px); border: 1px solid var(--think-line); border-radius: 24px; background: rgba(255, 255, 255, .5); }
.sys-provider-notes h3 { margin: 6px 0 14px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.24; }
.sys-provider-notes p { line-height: 1.66; }
.sys-provider-notes p + p { margin-top: 14px; }
.sys-provider-notes a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--act); }
.sys-provider-notes a:hover { text-decoration-thickness: 2px; }

.sys-param-table a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--act); }
.sys-param-table a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------- diagnostics --- */

.sys-diagnostic-table {
  max-width: 1120px;
  margin: 0 auto clamp(110px, 14vw, 180px);
  border: 1px solid var(--think-line);
  border-radius: 22px;
  overflow: hidden;
}

.sys-diagnostic-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  background: color-mix(in srgb, var(--act) 4%, var(--think-paper));
}

.sys-diagnostic-table > div + div { border-top: 1px solid var(--think-line); }
.sys-diagnostic-table > div > * { padding: 24px; }
.sys-diagnostic-table > div > * + * { border-left: 1px solid var(--think-line); }
.sys-diagnostic-table strong { font-family: var(--font-sans); font-size: .98rem; line-height: 1.4; }
.sys-diagnostic-table span { color: var(--think-muted); font-size: .94rem; line-height: 1.5; }

.sys-diagnostic-head {
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------- no-script fallback --- */

/* The pass demo is empty until scripted; the classifier and tier panels ship
   with meaningful default markup and stay useful without JS. */
html:not(.sys-js) [data-pass-demo] { display: none; }

/* The workload list is the same content the classifier shows one card at a
   time. Readers with scripting get the interactive version; print, feed
   readers, assistants and anyone without JS get the full list instead. Never
   both. */
html.sys-js .classifier-static { display: none; }
.classifier-static { display: grid; gap: 26px; margin-top: 30px; }
.classifier-static article { padding-top: 22px; border-top: 1px solid var(--think-line); }
.classifier-static h4 { margin: 0 0 10px; font-family: var(--font-sans); font-size: 1.05rem; }
.classifier-static dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; }
.classifier-static dt { color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; padding-top: 3px; }
.classifier-static dd { margin: 0; font-size: .92rem; line-height: 1.5; }
.classifier-static p { line-height: 1.6; }
.classifier-static ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.classifier-static li { padding: 5px 11px; border: 1px solid var(--think-line); border-radius: 999px; font-family: var(--font-sans); font-size: .72rem; }

/* --------------------------------------------------- shared diagram UI --- */

.sys-diagram { gap: 0; }
.sys-diagram > .diagram-label { margin-bottom: 18px; }

.sys-button {
  align-self: center;
  margin-top: 20px;
  padding: 11px 20px;
  border: 1px solid var(--act);
  border-radius: 999px;
  background: transparent;
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.sys-button:hover { background: var(--act); color: #fff; }
.sys-button[disabled] { opacity: .45; cursor: progress; }

.sys-tabs { justify-content: center; margin-bottom: 20px; }
.sys-tabs button.is-active { border-color: var(--act); background: var(--act); color: #fff; }

.kv-control { display: grid; gap: 8px; margin-top: 22px; }
.kv-control > span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kv-control input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 6px 0;
  border-radius: 999px;
  background: var(--think-line);
  accent-color: var(--act);
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}

.kv-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 3px solid var(--think-paper);
  border-radius: 50%;
  background: var(--act);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.kv-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--think-paper);
  border-radius: 50%;
  background: var(--act);
}

.kv-control output {
  color: var(--think-ink);
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ----------------------------------------------- prefill/decode player --- */

.sys-diagram--pass { min-height: 610px; }

.pass-phase {
  margin-bottom: 18px;
  padding: 9px;
  border: 1px solid var(--think-line);
  border-radius: 999px;
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease;
}

.sys-diagram--pass[data-phase="prefill"] .pass-phase { color: var(--think-orange); border-color: var(--think-orange); }
.sys-diagram--pass[data-phase="decode"] .pass-phase { color: var(--think-blue); border-color: var(--think-blue); }

.pass-block-label {
  display: block;
  margin-bottom: 9px;
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pass-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.pass-grid i {
  height: 15px;
  border-radius: 3px;
  background: var(--think-line);
  transition: background .18s ease, opacity .18s ease;
}
.pass-grid i.is-on { background: var(--think-orange); }

.pass-arrow { margin: 16px 0 14px; color: var(--think-muted); font-size: 1.5rem; text-align: center; }

.pass-out { display: flex; flex-wrap: wrap; gap: 5px; min-height: 40px; }
.pass-out i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--think-line);
  transition: background .18s ease, transform .18s ease;
}
.pass-out i.is-on { background: var(--think-blue); transform: scale(1.12); }

.pass-meters { display: grid; gap: 12px; margin-top: 22px; }
.pass-meters > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; }
.pass-meters span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pass-meters i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--think-orange), var(--think-orange));
  background-color: var(--think-line);
  transform-origin: left;
  transform: scaleX(var(--level, .04));
  transition: transform .3s ease;
}
.pass-meters > div:last-child i { background: var(--think-blue); }
.pass-meters > div:first-child i { background: var(--think-orange); }

/* ---------------------------------------------------------- kv sizing --- */

.sys-diagram--kv { min-height: 560px; }

.kv-readout { text-align: center; }
.kv-readout strong {
  display: block;
  color: var(--act);
  font-size: 4.6rem;
  line-height: 1;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}
.kv-readout span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kv-fill {
  position: relative;
  height: 132px;
  margin: 26px 0 4px;
  border: 1px solid var(--think-line);
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--think-muted) 12%, transparent) 15px 16px);
  overflow: hidden;
}
.kv-fill:after {
  content: 'one chip · about 180 GB';
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kv-fill i {
  display: block;
  width: var(--fill, 6%);
  height: 100%;
  background: color-mix(in srgb, var(--act) 42%, transparent);
  border-right: 2px solid var(--act);
  transition: width .3s cubic-bezier(.22, .8, .22, 1);
}

.kv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.kv-stats > div { padding: 15px; border: 1px solid var(--think-line); border-radius: 12px; text-align: center; }
.kv-stats strong { display: block; color: var(--think-ink); font-size: 1.5rem; letter-spacing: -.03em; }
.kv-stats span { color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 750; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------ memory tiers --- */

.sys-diagram--tiers { min-height: 560px; }
.tier-list { display: grid; gap: 9px; }

.tier {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--think-line);
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.tier:hover { border-color: var(--act); }
.tier.is-active { border-color: var(--act); background: color-mix(in srgb, var(--act) 8%, transparent); }
.tier em {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tier strong { color: var(--think-ink); font-size: 1.05rem; letter-spacing: -.02em; }
.tier-bar { display: block; height: 6px; border-radius: 999px; background: var(--think-line); overflow: hidden; }
.tier-bar i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--act); }
.tier-cost { color: var(--think-muted); font-family: var(--font-sans); font-size: .64rem; font-weight: 750; }

.tier-detail {
  margin-top: 20px;
  padding: 18px;
  border-left: 3px solid var(--act);
  background: color-mix(in srgb, var(--act) 7%, transparent);
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.55;
}

/* ------------------------------------------------------ prefix demo --- */

.sys-diagram--prefix { min-height: 590px; }

.prefix-stack { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.prefix-stack li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--think-line);
  border-left: 4px solid var(--think-green);
  border-radius: 8px;
  background: color-mix(in srgb, var(--think-green) 8%, transparent);
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 750;
  transition: background .25s ease, border-color .25s ease;
}
.prefix-stack li b {
  color: var(--think-green);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.prefix-stack li.is-recomputed { border-left-color: var(--think-orange); background: color-mix(in srgb, var(--think-orange) 9%, transparent); }
.prefix-stack li.is-recomputed b { color: var(--think-orange); }
.prefix-stack li.is-volatile { border-style: dashed; }

.prefix-readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.prefix-readout > div { padding: 16px; border: 1px solid var(--think-line); border-radius: 12px; text-align: center; }
.prefix-readout strong { display: block; color: var(--act); font-size: 2.2rem; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.prefix-readout span { color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------- compaction --- */

.sys-diagram--compaction { min-height: 520px; }
.compaction-track { display: grid; gap: 26px; }
.compaction-row { display: grid; gap: 9px; }
.compaction-row em {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compaction-bar {
  position: relative;
  height: 66px;
  border: 1px solid var(--think-line);
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--think-muted) 10%, transparent) 11px 12px);
  overflow: hidden;
}
.compaction-bar i {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fill, 10%);
  background: color-mix(in srgb, var(--act) 40%, transparent);
  border-top: 2px solid var(--act);
  transition: height .12s linear;
}
.compaction-bar.is-flashing { box-shadow: inset 0 0 0 2px var(--think-orange); }
.compaction-row span {
  color: var(--think-ink);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- the classifier --- */

.sys-classifier {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 66px);
  border: 1px solid var(--think-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .5);
  box-shadow: var(--think-shadow);
}
.sys-classifier-head { max-width: 700px; margin-bottom: 38px; }
.sys-classifier-head h3 { margin: 12px 0 14px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.05em; }
.sys-classifier-head > p:last-child { margin: 0; color: var(--think-muted); font-size: 1.05rem; }

.classifier-choices { flex-wrap: wrap; margin-bottom: 34px; }
.classifier-choices button { padding: 11px 16px; font-size: .72rem; }
.classifier-choices button.is-active { border-color: var(--act); background: var(--act); color: #fff; }

.classifier-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.classifier-dials { display: grid; gap: 22px; }
.dial { display: grid; gap: 8px; }
.dial > span {
  color: var(--think-muted);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dial .bayes-track { height: 8px; margin: 0; background: var(--think-line); }
.dial .bayes-track i {
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--level, .2));
  transition: transform .45s cubic-bezier(.22, .8, .22, 1);
}
.dial em { color: var(--think-ink); font-family: var(--font-sans); font-size: .82rem; font-style: normal; font-weight: 750; }

.classifier-verdict { padding: 28px; border: 1px solid var(--think-line); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.classifier-verdict > .diagram-label { text-align: left; }
.classifier-verdict p { margin: 14px 0 20px; font-size: 1.02rem; line-height: 1.6; }
.classifier-verdict .frame-facts span { padding: 8px 12px; border-radius: 999px; }

/* --------------------------------------------------------- glossary --- */

.sys-glossary {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 66px);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(34px, 6vw, 80px);
  align-items: start;
  border: 1px solid var(--think-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .42);
  box-shadow: var(--think-shadow);
}
.sys-glossary-head h3 { margin: 12px 0 16px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: -.05em; }
.sys-glossary-head p:last-child { margin: 0; color: var(--think-muted); font-size: 1rem; line-height: 1.55; }
.sys-glossary .think-definitions { margin: 0; }
.sys-glossary .think-definitions div { grid-template-columns: 140px 1fr; }
.sys-glossary .think-definitions div:first-child { padding-top: 0; }

/* ---------------------------------------- reused how-to-think blocks --- */

/* Four metrics, not the five the integration grid is sized for. */
.sys-dashboard { margin-top: clamp(70px, 10vw, 130px); }
.sys-dashboard ol { grid-template-columns: repeat(4, 1fr); }
.sys-levers { margin-bottom: clamp(70px, 10vw, 130px); }

/* These editions use four decisions, not the six-item grid the shared field
   guide component was designed for. A two-by-two card set avoids the empty
   second row and gives the question and explanation a readable hierarchy. */
.sys-levers .think-memory-head {
  max-width: 860px;
  margin-bottom: 42px;
}

.sys-levers h3 {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: .94;
}

.sys-levers ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  background: transparent;
}

.sys-levers li {
  min-height: 215px;
  padding: 32px;
  border: 1px solid var(--think-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--act) 6%, var(--think-paper));
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

.sys-levers li:before { margin-bottom: 24px; }

.sys-levers li strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 1.12rem;
  line-height: 1.35;
}
.sys-scale { margin-bottom: 0 !important; }
.sys-specimen { margin: clamp(80px, 12vw, 160px) calc(-1 * max(24px, (100vw - 1180px) / 2)); }

/* The quality-versus-cost chart borrows the search diagram's chart styling. */
.sys-diagram--curve .curve-readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; }
.sys-diagram--curve .curve-readout > div { padding: 15px; border: 1px solid var(--think-line); border-radius: 12px; text-align: center; }
.sys-diagram--curve .curve-readout strong { display: block; color: var(--act); font-size: 2.1rem; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.sys-diagram--curve .curve-readout span { color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sys-diagram--curve .search-stop-label { margin: 22px 0 0; }

/* -------------------------------------------------------- ttl cliff --- */

.sys-diagram--ttl { min-height: 560px; }
.ttl-readout { text-align: center; }
.ttl-readout strong { display: block; color: var(--act); font-size: 4.6rem; line-height: 1; letter-spacing: -.07em; transition: color .25s ease; }
.ttl-readout span { color: var(--think-muted); font-family: var(--font-sans); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sys-diagram--ttl[data-state="cold"] .ttl-readout strong { color: var(--think-orange); }

.ttl-cliff { position: relative; display: flex; height: 96px; margin: 28px 0 4px; border: 1px solid var(--think-line); border-radius: 12px; overflow: hidden; }
.ttl-zone { display: grid; place-items: center; align-content: center; }
.ttl-zone span { font-family: var(--font-sans); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ttl-zone--warm { flex: 0 0 50%; background: color-mix(in srgb, var(--think-green) 15%, transparent); color: var(--think-green); }
.ttl-zone--cold { flex: 1; background: color-mix(in srgb, var(--think-orange) 13%, transparent); color: var(--think-orange); }
.ttl-needle { position: absolute; top: 0; bottom: 0; left: var(--pos, 20%); width: 2px; background: var(--think-ink); transition: left .2s ease; }
.ttl-needle:after { content: ''; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--think-ink); }

/* ---------------------------------------------------------- cascade --- */

.sys-diagram--cascade { min-height: 640px; }
.cascade-stage { padding: 16px; border: 1px solid var(--think-line); border-radius: 12px; text-align: center; }
.cascade-stage strong { display: block; color: var(--think-ink); font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cascade-stage span { color: var(--think-muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cascade-stage--frames { border-color: var(--think-muted); }
.cascade-stage--detect strong { color: var(--think-blue); }
.cascade-stage--escalate { border-color: var(--act); background: color-mix(in srgb, var(--act) 9%, transparent); }
.cascade-stage--escalate strong { color: var(--act); font-size: 2.6rem; }
.cascade-funnel { display: grid; place-items: center; height: 34px; }
.cascade-funnel i { width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 15px solid var(--think-line); }

/* ------------------------------------------------------------ motion --- */

@media (prefers-reduced-motion: reduce) {
  .sys-token-grid rect, .sys-decode circle, .sys-cache-band { animation: none; }
  .sys-cache-band { transform-box: fill-box; transform-origin: left center; transform: scaleX(.62); }
  .sys-decode circle { opacity: .8; }
  .sys-token-grid rect { opacity: .5; }
  .kv-fill i, .dial .bayes-track i, .tier-bar i { transition: none !important; }
}

/* ------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .classifier-panel { grid-template-columns: 1fr; }
  .sys-glossary { grid-template-columns: 1fr; gap: 34px; }
  .sys-dashboard ol { grid-template-columns: repeat(2, 1fr); }
  .sys-request-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-request-path > i { display: none; }
}

@media (max-width: 900px) {
  .sys-specimen { margin-left: -20px; margin-right: -20px; }
  .sys-dashboard ol { grid-template-columns: repeat(2, 1fr); }
  .sys-serving-bridge .think-lens-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sys-levers ol { grid-template-columns: 1fr; }
  .sys-levers li { min-height: 0; }
  /* These five are containers and must collapse to a single column on narrow
     screens. Only the arrow glyphs between their panels should rotate, so the
     "→" between before and after reads as "↓" once the panels stack. The two
     selector lists had been merged, which rotated whole sections sideways. */
  .sys-request-path,
  .sys-before-after,
  .sys-opposed-cases,
  .sys-workload-grid,
  .sys-dual-copy { grid-template-columns: minmax(0, 1fr); }
  .sys-before-after > div,
  .sys-opposed-cases > div { transform: rotate(90deg); }
  .sys-diagnostic-table { border-radius: 18px; }
  .sys-diagnostic-head { display: none !important; }
  .sys-diagnostic-table > div { grid-template-columns: 1fr; padding: 24px; }
  .sys-diagnostic-table > div > * { padding: 5px 0; }
  .sys-diagnostic-table > div > * + * { border-left: 0; }
  .sys-diagnostic-table > div strong { margin-bottom: 8px; }
  .sys-serving-bridge { padding: 32px 22px; border-radius: 20px; }
}

@media (max-width: 600px) {
  .sys-diagram { min-height: auto !important; padding: 28px 22px; }
  .pass-grid { grid-template-columns: repeat(8, 1fr); }
  .pass-meters > div { grid-template-columns: 96px 1fr; }
  .kv-readout strong, .ttl-readout strong { font-size: 3.4rem; }
  .kv-stats { grid-template-columns: 1fr; }
  .kv-fill { height: 96px; }
  .kv-fill:after { font-size: .5rem; }
  .sys-classifier, .sys-glossary { padding: 30px 22px; border-radius: 20px; }
  .sys-approaches { padding: 28px 20px; border-radius: 20px; }
  .sys-approach-list li { grid-template-columns: 1fr; gap: 8px; }
  .sys-approach-list span { grid-row: auto; }
  .sys-arith-constants { grid-template-columns: 1fr; }
  .sys-arith-split { grid-template-columns: 1fr; }
  .sys-usecase-shape { grid-template-columns: 1fr 1fr; }
  .sys-config-notes, .sys-provider-notes, .sys-cost-paths, .sys-decide-verdict { grid-template-columns: 1fr; }
  .sys-decide-table > div { grid-template-columns: 1fr; padding: 4px 0; }
  .sys-decide-table > div > * { display: grid; gap: 2px; padding: 10px 18px; }
  .sys-decide-table > div > * + * { border-left: 0; }
  .sys-decide-table > div > *:before { content: attr(data-label); color: var(--think-muted); font-family: var(--font-sans); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .sys-decide-table > .sys-decide-head-row { display: none; }
  .sys-ladder li { grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 16px 16px; }
  .sys-ladder li > span { grid-row: 1 / span 2; align-self: start; }
  .sys-ladder b { justify-items: start; text-align: left; margin-top: 8px; }
  .sys-cost-table { font-size: .84rem; }
  .sys-provider-table > div { grid-template-columns: 1fr; padding: 4px 0; }
  .sys-provider-table > div > * { display: grid; gap: 2px; padding: 10px 18px; }
  .sys-provider-table > div > * + * { border-left: 0; }
  .sys-provider-table > div > *:before {
    content: attr(data-label);
    color: var(--think-muted);
    font-family: var(--font-sans);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .sys-provider-table > .sys-provider-head { display: none; }
  .sys-config-code { padding: 18px 16px; font-size: .76rem; border-radius: 12px; }
  .sys-param-table > div { grid-template-columns: 1fr; padding: 4px 0; }
  .sys-param-table > div > * { display: grid; gap: 2px; padding: 10px 18px; }
  .sys-param-table > div > * + * { border-left: 0; }
  .sys-param-table > div > *:before {
    content: attr(data-label);
    color: var(--think-muted);
    font-family: var(--font-sans);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .sys-param-table > .sys-param-head { display: none; }
  .sys-arith-table > div { grid-template-columns: 1fr; padding: 4px 0; }
  .sys-arith-table > div > * { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 18px; }
  .sys-arith-table > div > * + * { border-left: 0; }
  .sys-arith-table > div > *:before {
    content: attr(data-label);
    color: var(--think-muted);
    font-family: var(--font-sans);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .sys-arith-table > div > strong:before { color: var(--act); }
  .sys-arith-table > .sys-arith-head { display: none; }
  .classifier-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classifier-choices button { min-width: 0; padding: 10px 6px; line-height: 1.25; white-space: normal; }
  .classifier-verdict { padding: 22px; }
  .sys-glossary .think-definitions div { grid-template-columns: 1fr; gap: 4px; }
  .prefix-stack li { grid-template-columns: 1fr; gap: 5px; }
  .sys-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-diagram--curve .curve-readout { grid-template-columns: 1fr; }
  .sys-dashboard ol { grid-template-columns: 1fr; }
  .compaction-bar { height: 52px; }
}

/* ------------------------------------------------------------- dark --- */

@media (prefers-color-scheme: dark) {
  body.sys-special .think-act--shape { background: #161c28; }
  body.sys-special .think-act--levers { background: #1c1a24; }
  body.sys-special .sys-classifier,
  body.sys-special .sys-glossary,
  body.sys-special .classifier-verdict { background: rgba(255, 255, 255, .035); }
  /* The shared field-guide grid is painted with the page background in dark
     mode. The edition-specific colour mix above keeps each card related to
     its blue or violet act without hard-coding a light-only surface. */
  body.sys-special .sys-dashboard li { background: #1c1a24; }
  body.sys-special .sys-approaches,
  body.sys-special .sys-arith-split article,
  body.sys-special .sys-config-notes article,
  body.sys-special .sys-provider-notes article,
  body.sys-special .sys-cost-paths > article,
  body.sys-special .sys-decide-verdict article { background: rgba(255, 255, 255, .035); }
  body.sys-special .sys-config-code { background: rgba(0, 0, 0, .28); }
  body.sys-special .tier-detail,
  body.sys-special .cascade-stage--escalate { background: rgba(255, 255, 255, .04); }
  body.sys-special .ttl-needle,
  body.sys-special .ttl-needle:after { background: var(--think-ink); }
  body.sys-special .kv-control input[type="range"]::-webkit-slider-thumb { border-color: #1b2422; }
  body.sys-special .kv-control input[type="range"]::-moz-range-thumb { border-color: #1b2422; }
  body.sys-special .sys-engine { filter: none; }
  /* The accent fill is a light colour in dark mode, so a white label on these
     pills drops to 2.6:1. Flip the label to the dark ground instead. */
  body.sys-special .classifier-choices button.is-active,
  body.sys-special .sys-tabs button.is-active { color: #151b19; }

}

/* ------------------------------------------------------------ print --- */

@media print {
  /* how-to-think.css already hides its own diagrams and specimen visual; this
     covers the pieces that are specific to this edition. */
  .sys-hero-visual, .sys-diagram, .sys-button, .kv-control, .classifier-choices, .sys-tabs, .classifier-dials { display: none !important; }
  .sys-approaches, .sys-arith-split article { border: 0; padding: 0; background: white !important; }
  .sys-arith-split { grid-template-columns: 1fr; }
  .sys-classifier, .sys-glossary {
    padding: 0;
    margin-bottom: 4mm;
    border: 0;
    background: white !important;
    color: #111 !important;
    box-shadow: none;
  }
  .sys-classifier, .sys-glossary, .classifier-panel { display: block; }
  .sys-classifier-head h3, .sys-glossary-head h3, .classifier-verdict p { color: #111 !important; }
  .classifier-verdict { padding: 0; border: 0; background: transparent; }
  .sys-glossary .think-definitions div { grid-template-columns: 120px 1fr; }
  .sys-specimen { margin: 0; }
}