:root {
  --think-paper: #f3efe7;
  --think-ink: #17211f;
  /* 4.31:1 on the tinted table rows and act backgrounds — just under AA for
     the small labels and cells it carries. Darkened until the worst surface
     (the violet act ground) clears 4.5. Dark mode has its own value below. */
  --think-muted: #5f6a66;
  --think-line: rgba(23, 33, 31, 0.16);
  --think-orange: #f05b32;
  --think-blue: #3559e0;
  --think-green: #167c66;
  --think-yellow: #e7b940;
  --think-violet: #7657c8;
  --think-panel: rgba(255, 255, 255, 0.58);
  --think-shadow: 0 24px 70px rgba(31, 38, 35, 0.10);
}

html:has(body.think-special) { scroll-behavior: auto; }

body.think-special {
  --bg-body: var(--think-paper);
  --text-main: var(--think-ink);
  --text-muted: var(--think-muted);
  --accent: var(--think-orange);
  --accent-hover: #c33c1b;
  background:
    radial-gradient(circle at 8% 12%, rgba(240, 91, 50, .08), transparent 28rem),
    radial-gradient(circle at 91% 34%, rgba(53, 89, 224, .07), transparent 34rem),
    var(--think-paper);
}

body.think-special > header,
body.think-special > footer {
  max-width: 1440px;
}

body.think-special > header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-top: 28px;
  padding-bottom: 20px;
}

body.think-special > header h1 {
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -.02em;
}

body.think-special > header p { display: none; }
body.think-special > header nav { grid-column: 2; grid-row: 1; margin: 0; }
body.think-special > header nav a { font-size: .85rem; }

body.think-special > main {
  max-width: none;
  padding: 0 0 80px;
  overflow: clip;
}

.think-edition {
  --act: var(--think-orange);
  color: var(--think-ink);
  font-family: var(--font-sans);
}

.think-edition p,
.think-edition li { font-family: var(--font-body); }

.think-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.8,.22,1);
}

.think-reveal.is-visible { opacity: 1; transform: none; }

.think-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: rgba(255, 255, 255, .15);
}

.think-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--act);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.think-rail {
  position: fixed;
  z-index: 20;
  /* Keep the rail in the page gutter rather than aligning it to the hero.
     The hero copy begins well inside its 1440px frame; a 1500px reference
     placed longer chapter labels directly over that copy. */
  left: max(20px, calc((100vw - 1760px) / 2));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 190px;
  margin: 0;
}

.think-rail a {
  display: grid;
  grid-template-columns: 28px auto;
  gap: 5px;
  color: var(--think-muted);
  padding: 5px 8px;
  border-left: 2px solid transparent;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .55;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}

.think-rail a span { font-variant-numeric: tabular-nums; }
.think-rail a:hover { text-decoration: none; opacity: 1; }
.think-rail a.is-active { color: var(--act); border-color: currentColor; opacity: 1; }

.think-hero {
  --hero-progress: 0;
  min-height: min(880px, calc(100svh - 76px));
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 120px) clamp(28px, 7vw, 100px) 70px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(440px, 1.18fr);
  align-items: center;
  gap: clamp(28px, 5vw, 90px);
}

.think-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.075em;
  color: var(--think-ink);
}

.think-kicker,
.think-thinker,
.think-act-number {
  font-family: var(--font-sans) !important;
  color: var(--act, var(--think-orange));
  font-size: .72rem !important;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.think-hero .think-kicker { margin-bottom: 25px; }

.think-dek {
  max-width: 600px;
  margin: 34px 0 0;
  color: var(--think-muted);
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  line-height: 1.32 !important;
}

.think-premise {
  max-width: 610px;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--think-line);
  font-size: 1.04rem !important;
  line-height: 1.55 !important;
}

.think-meta {
  margin: 24px 0 0;
  color: var(--think-muted);
  font-family: var(--font-sans) !important;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.think-meta span { margin: 0 8px; }

.think-start {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  color: var(--think-ink);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.think-start span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--think-line);
  border-radius: 50%;
  transition: transform .2s ease, background .2s ease;
}

.think-start:hover { color: var(--think-orange); text-decoration: none; }
.think-start:hover span { transform: translateY(4px); background: white; }

.think-hero-visual { position: relative; min-width: 0; }

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

.terrain-blob { transform: scale(calc(1 - var(--hero-progress) * .04)); transform-origin: center; }
.contours { stroke-width: 1.4; opacity: calc(1 - var(--hero-progress) * .7); }
.contours path:nth-child(2) { stroke-dasharray: 4 7; }
.relations { fill: none; stroke-width: 1.5; opacity: calc(1 - var(--hero-progress) * .62); }
.territory-points { fill: var(--think-orange); }
.territory-points circle:nth-child(even) { fill: var(--think-blue); }
.map-grid { color: var(--think-blue); opacity: calc(.08 + var(--hero-progress) * .55); }
.map-labels { fill: var(--think-blue); font: 700 14px var(--font-sans); letter-spacing: .12em; opacity: calc(var(--hero-progress) * 1.2); }

.territory-points circle { animation: think-pulse 3s ease-in-out infinite alternate; transform-origin: center; }
.territory-points circle:nth-child(2n) { animation-delay: -.9s; }
.territory-points circle:nth-child(3n) { animation-delay: -1.7s; }

@keyframes think-pulse { to { transform: scale(1.45); opacity: .65; } }

.think-hero-thesis {
  display: flex;
  justify-content: space-between;
  padding: 8px 9%;
  color: var(--think-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.think-hero-thesis span:last-child { color: var(--think-blue); opacity: calc(.35 + var(--hero-progress)); }

.think-content { position: relative; }

.think-orientation {
  max-width: 1120px;
  margin: 0 auto 80px;
  padding: clamp(48px, 7vw, 90px);
  border: 1px solid var(--think-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .42);
  box-shadow: var(--think-shadow);
}

.think-orientation > h2 {
  max-width: 760px;
  margin: 12px 0 16px;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.think-orientation > p:not(.think-kicker) {
  max-width: 670px;
  color: var(--think-muted);
  font-size: 1.25rem;
}

.think-lens-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 50px;
  border: 1px solid var(--think-line);
  background: var(--think-line);
}

.think-lens-index div {
  min-height: 118px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--think-paper);
}

.think-lens-index strong { font-size: .84rem; letter-spacing: .04em; }
.think-lens-index span { color: var(--think-muted); font-family: var(--font-body); font-size: .95rem; line-height: 1.35; }

.think-act {
  --act: var(--think-orange);
  position: relative;
  padding: clamp(90px, 13vw, 190px) max(24px, calc((100vw - 1180px) / 2));
  scroll-margin-top: 30px;
}

.think-act--system { --act: var(--think-green); background: #e4eee8; }
.think-act--frame { --act: var(--think-violet); }
.think-act--limits { --act: #b36e08; background: #f0ead9; }
.think-act--probability { --act: var(--think-blue); }
.think-act--stack { --act: var(--think-orange); background: #ebe6dd; }

.think-act-head {
  max-width: 920px;
  margin: 0 auto clamp(80px, 12vw, 150px);
  text-align: center;
}

.think-act-head h2 {
  margin: 16px auto 22px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.think-act-head > p:last-child {
  max-width: 650px;
  margin: 0 auto;
  color: var(--think-muted);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
}

.think-lens-row {
  max-width: 1120px;
  margin: 0 auto clamp(120px, 16vw, 210px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .84fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.think-lens-row--reverse { grid-template-columns: minmax(380px, .84fr) minmax(0, 1fr); }
.think-lens-row--reverse .think-lens { grid-column: 2; }
.think-lens-row--reverse .think-diagram { grid-column: 1; grid-row: 1; }
.think-lens-row:last-child { margin-bottom: 0; }

.think-lens > h3,
.think-probability-grid h3 {
  margin: 11px 0 32px;
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.think-lens > h4 {
  margin: 38px 0 9px;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.think-lens > p:not(.think-thinker),
.think-probability-grid p {
  margin-bottom: 20px;
  font-size: 1.12rem;
  line-height: 1.66;
}

.think-formula {
  padding: 22px 0;
  border-top: 1px solid var(--think-line);
  border-bottom: 1px solid var(--think-line);
  color: var(--think-muted);
  font-family: var(--font-sans) !important;
  line-height: 1.8 !important;
}

.think-formula strong { color: var(--act); }

.think-example {
  /* Block flow, not grid: the body is bare text with occasional inline
     elements (<code>, <em>), and a grid/flex container turns each of those
     into its own item, so an inline <code> lands in a separate cell and
     collides with the text around it. The label stays out of flow. */
  position: relative;
  /* Tall enough that the rotated label never spills past the border. */
  min-height: 142px;
  margin: 25px 0;
  padding: 22px 24px 22px 68px;
  border: 1px solid var(--think-line);
  border-radius: 14px;
  background: rgba(255,255,255,.38);
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.55;
}

.think-example > span {
  position: absolute;
  left: 17px;
  top: 20px;
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  /* Without this the label's height is bounded by the card and any label
     longer than the card is tall wraps into a second vertical column. */
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.think-question {
  margin: 42px 0 0;
  padding: 26px 0 0;
  border: 0;
  border-top: 3px solid var(--act);
  background: none;
  color: var(--think-ink);
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.think-definitions { margin: 34px 0; }
.think-definitions div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--think-line); }
.think-definitions dt { color: var(--act); font-weight: 800; }
.think-definitions dd { font-family: var(--font-body); }

.think-diagram {
  position: sticky;
  top: 80px;
  min-height: 530px;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--think-line);
  border-radius: 28px;
  background: rgba(255,255,255,.58);
  box-shadow: var(--think-shadow);
  overflow: hidden;
}

.think-diagram > p {
  margin: auto 0 0;
  padding-top: 30px;
  color: var(--think-muted);
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
}

.think-diagram > p strong { color: var(--think-ink); }

.diagram-label {
  display: block;
  color: var(--act);
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.genesis-output {
  margin-top: 10px;
  padding: 20px;
  border: 2px solid var(--act);
  color: var(--act);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
}

.genesis-arrow { color: var(--act); font-size: 2.2rem; line-height: 1.1; text-align: center; }
.diagram-label--forces { margin: 4px 0 10px; color: var(--think-muted); }
.genesis-forces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.genesis-forces span { padding: 13px 8px; border: 1px solid var(--think-line); border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; }

.omission-territory {
  position: relative;
  height: 330px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
}

.omission-territory i { width: 9px; height: 9px; border-radius: 50%; background: var(--act); opacity: .35; }
.omission-territory i:nth-child(2n) { width: 17px; height: 17px; background: var(--think-blue); }
.omission-territory i:nth-child(3n) { border-radius: 2px; transform: rotate(20deg); }
.omission-map { position: absolute; inset: 84px 55px; display: grid; place-items: center; align-content: center; border: 2px solid var(--act); background: rgba(243,239,231,.93); z-index: 2; }
.omission-map > span { color: var(--think-muted); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.omission-map strong { color: var(--act); font-size: 4.4rem; line-height: 1; }
.omission-map em { color: var(--think-muted); font-family: var(--font-sans); font-size: .7rem; font-style: normal; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.omission-item { position: absolute; z-index: 3; padding: 6px 9px; border: 1px solid var(--think-line); border-radius: 999px; background: var(--think-paper); color: var(--think-muted); font-family: var(--font-sans); font-size: .6rem; font-weight: 750; }
.omission-item--debt { top: 25px; left: 8px; }
.omission-item--cycle { top: 31px; right: 12px; }
.omission-item--quality { bottom: 29px; left: -7px; }
.omission-item--reinvestment { bottom: 18px; right: 1px; }

.think-diagram--loop { align-items: center; min-height: 600px; }
.think-diagram--loop svg { position: absolute; inset: 70px 30px auto; width: calc(100% - 60px); color: var(--act); }
.think-diagram--loop svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; marker-end: url(#loop-arrow); }
.think-diagram--loop svg marker path { fill: currentColor; stroke: none; }
.loop-node { position: absolute; z-index: 1; width: 110px; min-height: 58px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--think-line); border-radius: 50%; background: #f8fbf8; font-size: .76rem; font-weight: 750; text-align: center; }
.loop-node--one { top: 86px; left: 50%; transform: translateX(-50%); }
.loop-node--two { top: 270px; right: 38px; }
.loop-node--three { top: 270px; left: 38px; }
.loop-core { position: absolute; z-index: 2; top: 218px; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--act); color: white; font-size: 2rem; font-weight: 800; line-height: .8; text-align: center; }
.loop-core span { display: block; margin-top: 3px; font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
.think-diagram--loop > p { align-self: stretch; }

.think-diagram--relation { align-items: center; min-height: 560px; }
.think-diagram--relation > .diagram-label { position: absolute; top: 42px; left: 25px; right: 25px; }
.relation-price { position: absolute; top: 205px; z-index: 3; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--act); color: white; font-size: 2rem; font-weight: 800; box-shadow: 0 0 0 18px rgba(22,124,102,.11); }
.relation-price span { margin-top: -10px; font-family: var(--font-sans); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.relation-comparisons { position: absolute; top: 80px; width: 100%; height: 370px; }
.relation-comparisons:before { content: ''; position: absolute; top: 182px; left: 50%; width: 320px; height: 320px; border: 1px dashed var(--think-line); border-radius: 50%; transform: translate(-50%,-50%); }
.relation-comparisons span { --distance: 145px; position: absolute; top: 185px; left: 50%; width: 110px; padding: 10px; border: 1px solid var(--think-line); border-radius: 999px; background: #fff; font-size: .7rem; font-weight: 700; text-align: center; transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) rotate(calc(-1 * var(--angle))); }
.think-diagram--relation > p { align-self: stretch; }

.frame-tabs,
.bayes-events { display: flex; gap: 6px; }
.frame-tabs button,
.bayes-events button,
.think-print {
  border: 1px solid var(--think-line);
  border-radius: 999px;
  background: transparent;
  color: var(--think-muted);
  padding: 9px 12px;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.frame-tabs button.is-active,
.bayes-events button.is-active { border-color: var(--act); background: var(--act); color: white; }
.frame-object { display: grid; place-items: center; align-content: center; height: 170px; margin: 30px 0 20px; border: 1px solid var(--act); background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--act) 7%, transparent) 12px 24px); color: var(--act); }
.frame-object span { color: var(--think-muted); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.frame-object strong { margin-top: 8px; font-size: 2.2rem; letter-spacing: .15em; }
.frame-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.frame-facts span { padding: 8px 11px; border-radius: 4px; background: color-mix(in srgb, var(--act) 13%, white); color: var(--act); font-size: .72rem; font-weight: 750; }

.think-diagram--search > .diagram-label { margin: 0 8px 18px; line-height: 1.45; }
.search-chart { position: relative; margin-top: 4px; }
.search-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.search-axis { stroke: var(--think-line); stroke-width: 1.5; }
.search-benefit { fill: none; stroke: var(--act); stroke-width: 4; }
.search-cost-line { fill: none; stroke: var(--think-muted); stroke-width: 3; }
.search-marker { stroke: var(--act); stroke-dasharray: 5 5; stroke-width: 1.5; }
.search-dot { fill: var(--act); }
.search-chart text { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.search-benefit-label { fill: var(--act); }
.search-cost-label, .search-x-label, .search-y-label { fill: var(--think-muted); }
.search-y-label { font-size: 9px !important; }
.search-stop-label { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 8px 16px 0 48px; padding: 12px 14px; border-left: 4px solid var(--act); background: color-mix(in srgb, var(--act) 10%, transparent); color: var(--think-ink); }
.search-stop-label strong { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.search-stop-label span { font-family: var(--font-body); font-size: .78rem; line-height: 1.35; }

.think-diagram--simplify { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 18px; align-items: center; }
.variable-cloud { position: relative; width: 150px; height: 220px; background-image: radial-gradient(circle, color-mix(in srgb, var(--think-muted) 42%, transparent) 0 3px, transparent 4px); background-size: 22px 22px; mask-image: radial-gradient(ellipse, #000 45%, transparent 72%); }
.variable-cloud span { position: absolute; inset: 75px -10px auto; padding: 5px; border: 1px solid var(--think-line); background: var(--think-paper); color: var(--think-ink); font-family: var(--font-sans); font-size: .68rem; font-weight: 800; line-height: 1.35; text-align: center; }
.simplify-arrow { color: var(--act); font-size: 2rem; }
.think-diagram--simplify ol { margin: 0; padding: 0; list-style: none; counter-reset: cues; }
.think-diagram--simplify li { counter-increment: cues; margin: 8px 0; padding: 13px; border: 1px solid var(--act); border-radius: 8px; color: var(--act); font-family: var(--font-sans); font-size: .72rem; font-weight: 750; }
.think-diagram--simplify li:before { content: '0' counter(cues); margin-right: 8px; opacity: .5; }
.think-diagram--simplify > p { grid-column: 1 / -1; }

.bayes-readout strong { display: block; color: var(--act); font-size: 6rem; line-height: 1; letter-spacing: -.08em; transition: color .3s ease; }
.bayes-readout span { color: var(--think-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bayes-track { height: 10px; margin: 35px 0 20px; border-radius: 999px; background: rgba(53,89,224,.13); overflow: hidden; }
.bayes-track i { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--act); transition: width .45s cubic-bezier(.22,.8,.22,1); }
.bayes-events { flex-wrap: wrap; }

.think-probability-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.think-probability-grid article { display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--think-line); border-radius: 20px; background: rgba(255,255,255,.42); }
.think-probability-grid h3 { margin-bottom: 24px; font-size: 2rem; }
.think-probability-grid p { font-size: 1rem; }
.think-probability-grid .think-question { margin-top: auto; font-size: 1.05rem; }
.think-bug-list { margin: 0 0 20px; padding: 0; list-style: none; }
.think-bug-list li { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--think-line); }
.think-bug-list strong, .think-bug-list span { display: block; }
.think-bug-list strong { color: var(--act); font-family: var(--font-sans); font-size: .82rem; }
.think-bug-list span { margin-top: 3px; color: var(--think-muted); font-size: .9rem; line-height: 1.35; }

.think-specimen {
  --specimen: var(--think-orange);
  padding: clamp(100px, 13vw, 190px) max(24px, calc((100vw - 1180px) / 2));
  background: var(--think-ink);
  color: #f7f2e9;
}
.specimen-switch { max-width: 1120px; margin: 0 auto 46px; display: flex; gap: 8px; }
.specimen-switch button { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: transparent; color: #aeb8b3; padding: 11px 16px; font-family: var(--font-sans); font-size: .72rem; font-weight: 800; cursor: pointer; }
.specimen-switch button.is-active { border-color: var(--think-orange); background: var(--think-orange); color: #1b2422; }
.think-specimen-intro { max-width: 790px; margin-bottom: 100px; }
.think-specimen-intro h2 { margin: 14px 0 25px; color: white; font-size: clamp(3.2rem, 7vw, 6.5rem); line-height: .92; letter-spacing: -.065em; }
.think-specimen-intro > p:last-child { max-width: 600px; color: #aeb8b3; font-size: 1.25rem; }
.think-specimen-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr); gap: clamp(60px, 10vw, 140px); align-items: start; }
.think-specimen-steps article { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .3s ease; }
.think-specimen-steps article.is-active { opacity: 1; }
.think-specimen-steps article > span { color: var(--think-orange); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.think-specimen-steps h3 { margin: 13px 0 18px; color: white; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -.05em; }
.think-specimen-steps p { max-width: 540px; color: #c9d0cd; font-size: 1.12rem; line-height: 1.65; }

.specimen-visual {
  position: sticky;
  top: 70px;
  min-height: 650px;
  padding: 50px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: #202b29;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.25);
}
.specimen-label { color: #84928c; font-family: var(--font-sans) !important; font-size: .68rem !important; font-weight: 800; letter-spacing: .15em; }
.specimen-multiple { position: absolute; top: 125px; left: 50px; transition: transform .5s ease, opacity .5s ease; }
.specimen-multiple strong { display: block; color: white; font-size: 7.5rem; line-height: .8; letter-spacing: -.1em; }
.specimen-multiple span { color: #8b9893; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.specimen-peer { position: absolute; top: 145px; right: 50px; color: #8b9893; font-size: .8rem; }
.specimen-peer strong { color: #e1e6e3; }
.specimen-omissions, .specimen-loop, .specimen-frames, .specimen-rule, .specimen-probability { position: absolute; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.specimen-omissions { top: 270px; left: 50px; right: 50px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.specimen-omissions span { padding: 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #cbd2cf; font-size: .7rem; text-align: center; }
.specimen-loop { top: 280px; left: 45px; right: 45px; display: flex; align-items: center; gap: 7px; }
.specimen-loop span { flex: 1; padding: 13px 6px; border: 1px solid var(--think-orange); border-radius: 7px; color: #ff8c69; font-size: .62rem; text-align: center; }
.specimen-loop i { color: #65736d; font-style: normal; }
.specimen-frames { top: 275px; left: 50px; right: 50px; display: grid; gap: 8px; }
.specimen-frames span { padding: 17px; border-left: 3px solid var(--think-violet); background: rgba(118,87,200,.13); color: #c9bcf0; font-size: .77rem; font-weight: 700; }
.specimen-rule { top: 280px; left: 50px; right: 50px; padding: 24px; border: 1px solid var(--think-yellow); color: #e7d29b; font-size: .72rem; letter-spacing: .05em; text-align: center; }
.specimen-rule strong { color: var(--think-yellow); }
.specimen-probability { top: 270px; left: 50px; right: 50px; }
.specimen-probability span { display: block; color: #8b9893; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.specimen-probability strong { display: block; margin: 12px 0 20px; color: #9eb1ff; font-size: 4rem; line-height: 1; }
.specimen-probability i { display: block; width: 38%; height: 8px; border-radius: 99px; background: var(--think-blue); }
.specimen-caption { position: absolute; bottom: 45px; left: 50px; right: 50px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: #a9b3af; font-size: .9rem !important; }
.specimen-visual[data-step="1"] .specimen-multiple { transform: scale(.55) translate(-42%, -38%); opacity: .4; }
.specimen-visual[data-step="1"] .specimen-omissions,
.specimen-visual[data-step="2"] .specimen-loop,
.specimen-visual[data-step="3"] .specimen-frames,
.specimen-visual[data-step="4"] .specimen-rule,
.specimen-visual[data-step="5"] .specimen-probability { opacity: 1; transform: none; }
.specimen-visual[data-step="2"] .specimen-multiple,
.specimen-visual[data-step="3"] .specimen-multiple,
.specimen-visual[data-step="4"] .specimen-multiple,
.specimen-visual[data-step="5"] .specimen-multiple { opacity: .16; transform: scale(.55) translate(-42%, -38%); }

.think-tensions { max-width: 1120px; margin: 0 auto 160px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.think-tensions article { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 28px; border: 1px solid var(--think-line); border-radius: 18px; background: rgba(255,255,255,.45); }
.think-tensions p { margin: 0; font-size: .98rem; line-height: 1.45; }
.think-tensions strong { display: block; color: var(--act); font-family: var(--font-sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.think-tensions span { color: var(--act); font-size: 1.5rem; }

.think-workflow { max-width: 1000px; margin: 0 auto 180px; }
.think-workflow-head { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 30px; margin-bottom: 50px; }
.think-workflow-head h3 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.055em; }
.think-workflow ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--think-line); }
.think-workflow li { display: grid; grid-template-columns: 82px 1fr; gap: 20px; margin: 0; padding: 26px 0; border-bottom: 1px solid var(--think-line); }
.think-workflow li > span { color: var(--act); font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.think-workflow li strong { font-size: 1.22rem; }
.think-workflow li p { margin: 6px 0 0; color: var(--think-muted); font-size: 1rem; }

.think-transfer { max-width: 1120px; margin: 0 auto 180px; padding: clamp(40px, 7vw, 80px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; border-radius: 28px; background: var(--think-ink); color: #f5f1e8; box-shadow: var(--think-shadow); }
.think-transfer h3 { margin: 15px 0 20px; color: white; font-size: clamp(2.4rem, 4vw, 4rem); line-height: .98; letter-spacing: -.05em; }
.think-transfer ul { margin: 0; padding: 0; list-style: none; }
.think-transfer li { margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #c6cfca; font-size: 1rem; line-height: 1.5; }
.think-transfer li:last-child { border: 0; }
.think-transfer li strong { color: #ff8c69; }

.think-memory { max-width: 1120px; margin: 0 auto 120px; }
.think-memory-head { max-width: 700px; margin-bottom: 55px; }
.think-memory h3 { margin: 14px 0 0; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .92; letter-spacing: -.06em; }
.think-memory ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--think-line); background: var(--think-line); list-style: none; counter-reset: memory; }
.think-memory li { counter-increment: memory; min-height: 160px; margin: 0; padding: 27px; background: var(--think-paper); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.think-memory li:before { content: counter(memory, decimal-leading-zero); display: block; margin-bottom: 30px; color: var(--act); font-family: var(--font-sans); font-size: .66rem; letter-spacing: .1em; }
.think-product-example { max-width: 1120px; margin: 0 auto; padding: clamp(42px, 6vw, 76px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: #263431; color: #f4f1e8; }
.think-product-example h2 { margin: 15px 0 20px; color: white; font-size: clamp(2.35rem, 4vw, 4rem); line-height: .98; letter-spacing: -.05em; }
.think-product-example > div > p:last-child { color: #c5d0ca; font-size: 1.08rem; line-height: 1.55; }
.think-product-example ol { margin: 0; padding: 0; list-style: none; counter-reset: product-case; }
.think-product-example li { counter-increment: product-case; position: relative; margin: 0; padding: 18px 0 18px 52px; border-bottom: 1px solid rgba(255,255,255,.14); color: #c5d0ca; font-size: 1rem; line-height: 1.5; }
.think-product-example li:before { content: counter(product-case, decimal-leading-zero); position: absolute; left: 0; top: 20px; color: #ff8c69; font-family: var(--font-sans); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.think-product-example li:last-child { border-bottom: 0; }
.think-product-example li strong { color: white; }

.think-integration { max-width: 1000px; margin: 0 auto; padding-top: 50px; border-top: 1px solid var(--think-line); }
.think-integration h3 { max-width: 830px; margin: 15px 0 42px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.03; letter-spacing: -.05em; }
.think-integration ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border: 1px solid var(--think-line); background: var(--think-line); list-style: none; counter-reset: stack-check; }
.think-integration li { counter-increment: stack-check; min-height: 195px; margin: 0; padding: 23px; background: var(--think-paper); font-family: var(--font-body); font-size: .98rem; line-height: 1.45; }
.think-integration li:before { content: counter(stack-check, decimal-leading-zero); display: block; margin-bottom: 24px; color: var(--act); font-family: var(--font-sans); font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.think-integration li strong { display: block; margin-bottom: 6px; font-family: var(--font-sans); }

.think-coda { padding: clamp(100px, 16vw, 240px) 24px; text-align: center; }
.think-coda h2 { margin: 16px 0 30px; font-size: clamp(3rem, 7vw, 7rem); line-height: .9; letter-spacing: -.07em; }
.think-coda > p:not(.think-kicker) { max-width: 850px; margin: 0 auto; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.4; }
.think-print { margin-top: 45px; padding: 13px 20px; border-color: var(--think-ink); color: var(--think-ink); }
.think-print:hover { background: var(--think-ink); color: white; }
.think-post-nav { max-width: 680px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

@media (max-width: 1680px) {
  .think-rail { display: none; }
}

@media (max-width: 900px) {
  .think-hero { grid-template-columns: 1fr; min-height: auto; }
  .think-hero h1 { font-size: clamp(5rem, 20vw, 9rem); }
  .think-hero-visual { max-width: 680px; margin: 0 auto; }
  .think-lens-index { grid-template-columns: repeat(2, 1fr); }
  .think-lens-row, .think-lens-row--reverse { grid-template-columns: 1fr; gap: 50px; }
  .think-lens-row--reverse .think-lens, .think-lens-row--reverse .think-diagram { grid-column: 1; }
  .think-lens-row--reverse .think-lens { grid-row: 1; }
  .think-lens-row--reverse .think-diagram { grid-row: 2; }
  .think-diagram { position: relative; top: auto; min-height: 500px; }
  .think-probability-grid { grid-template-columns: 1fr; }
  .think-specimen-stage { grid-template-columns: 1fr; }
  .think-specimen-steps article { min-height: auto; padding: 60px 0; opacity: 1; }
  .specimen-visual { position: sticky; top: 16px; align-self: start; grid-row: 1; }
  .think-tensions { grid-template-columns: 1fr; }
  .think-transfer { grid-template-columns: 1fr; gap: 30px; }
  .think-memory ol { grid-template-columns: repeat(2, 1fr); }
  .think-product-example { grid-template-columns: 1fr; gap: 28px; }
  .think-integration ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  body.think-special > header { display: block; padding: 18px 20px 12px; }
  body.think-special > header nav { margin-top: 12px; gap: 12px; }
  body.think-special > header nav a { font-size: .76rem; }
  .think-hero { padding: 58px 20px 55px; gap: 38px; }
  .think-hero h1 { font-size: 27vw; }
  .think-premise { font-size: .96rem !important; }
  .think-orientation { margin: 0 16px 45px; padding: 35px 24px; border-radius: 20px; }
  .think-lens-index { grid-template-columns: 1fr; }
  .think-lens-index div { min-height: 90px; }
  .think-act, .think-specimen { padding-left: 20px; padding-right: 20px; }
  .think-act-head { text-align: left; }
  .think-act-head h2 { margin-left: 0; }
  .think-act-head > p:last-child { margin-left: 0; }
  .think-lens-row { margin-bottom: 115px; gap: 38px; }
  .think-lens > h3 { font-size: 2.35rem; }
  .think-example { padding: 18px 18px 18px 55px; }
  .think-question { font-size: 1.2rem; }
  .think-diagram { min-height: 440px; padding: 30px 24px; border-radius: 20px; }
  .omission-map { inset: 74px 38px; }
  .think-diagram--relation { min-height: auto; gap: 18px; }
  .think-diagram--relation > .diagram-label { position: static; }
  .relation-price { position: static; width: 104px; height: 104px; font-size: 1.7rem; }
  .relation-comparisons { position: static; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .relation-comparisons:before { display: none; }
  .relation-comparisons span { position: static; width: auto; padding: 11px 7px; font-size: .64rem; transform: none; }
  .think-diagram--relation > p { margin: 0; padding-top: 4px; }
  .frame-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frame-tabs button { min-width: 0; padding: 8px 5px; line-height: 1.2; white-space: normal; }
  .frame-object { height: 140px; margin: 22px 0 16px; padding: 12px; text-align: center; }
  .frame-object span { max-width: 230px; line-height: 1.35; }
  .frame-object strong { font-size: 1.45rem; letter-spacing: .08em; }
  .think-diagram--simplify { grid-template-columns: 1fr; gap: 12px; min-height: auto; }
  .variable-cloud { width: 100%; height: 110px; border: 1px solid var(--think-line); border-radius: 12px; mask-image: none; background-size: 18px 18px; }
  .variable-cloud span { inset: 30px 22px auto; }
  .simplify-arrow { justify-self: center; line-height: 1; transform: rotate(90deg); }
  .think-diagram--simplify ol { width: 100%; }
  .think-diagram--simplify > p { margin-top: 8px; padding-top: 8px; }
  .think-diagram--search { min-height: auto; }
  .search-chart text { font-size: 13px; }
  .bayes-readout strong { font-size: 5rem; }
  .think-probability-grid article { padding: 28px 22px; }
  .think-specimen-intro { margin-bottom: 24px; }
  .think-specimen-stage { display: block; }
  .specimen-visual { display: none; }
  .think-specimen-steps { border-top: 1px solid rgba(255,255,255,.14); }
  .think-specimen-steps article { min-height: auto; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.14); opacity: 1; }
  .think-specimen-steps article:last-child { border-bottom: 0; }
  .think-specimen-steps h3 { margin-top: 9px; font-size: 1.85rem; }
  .think-specimen-steps p { margin-bottom: 0; font-size: 1rem; line-height: 1.55; }
  .specimen-multiple { left: 25px; }
  .specimen-multiple strong { font-size: 6rem; }
  .specimen-peer { right: 25px; }
  .specimen-omissions, .specimen-loop, .specimen-frames, .specimen-rule, .specimen-probability { left: 25px; right: 25px; }
  .specimen-loop { flex-wrap: wrap; }
  .specimen-loop span { flex: 1 0 38%; }
  .specimen-caption { left: 25px; right: 25px; bottom: 28px; }
  .think-tensions article { grid-template-columns: 1fr; }
  .think-tensions span { transform: rotate(90deg); justify-self: start; }
  .think-workflow-head { grid-template-columns: 1fr; }
  .think-workflow li { grid-template-columns: 48px 1fr; }
  .think-transfer { padding: 38px 24px; border-radius: 20px; }
  .think-memory ol { grid-template-columns: 1fr; }
  .think-memory li { min-height: 130px; }
  .think-product-example { padding: 36px 24px; border-radius: 20px; }
  .think-integration ol { grid-template-columns: 1fr; }
  .think-integration li { min-height: auto; }
  .search-stop-label { grid-template-columns: 1fr; gap: 5px; margin-left: 0; margin-right: 0; }
}

@media (prefers-color-scheme: dark) {
  body.think-special { --think-paper: #151b19; --think-ink: #eef2ef; --think-muted: #9aa6a1; --think-line: rgba(238,242,239,.16); --think-panel: rgba(35,45,42,.7); background: #151b19; }

  /* The act accents are chosen for ink-on-paper. Against the dark ground they
     carry the same small uppercase labels, numerals and table verdicts, where
     green, blue and violet all fell below 4.5:1. Lightened here only — the
     light palette above is untouched. Orange already cleared the bar.
     Measured against the darkest surface each accent lands on (the act cards
     at #1e2430): green 5.95, blue 5.70, violet 5.08. */
  body.think-special {
    --think-blue: #8098f2;
    --think-green: #25b493;
    --think-violet: #9d85e0;
  }
  .think-orientation, .think-diagram, .think-probability-grid article, .think-tensions article { background: rgba(255,255,255,.035); }
  .think-lens-index div, .think-memory li, .think-integration li { background: #151b19; }
  .think-act--system { background: #14231e; }
  .think-act--limits { background: #211e16; }
  .think-act--stack { background: #1d1b18; }
  .think-example { background: rgba(255,255,255,.025); }
  .loop-node { background: #1b2924; }
  .frame-object { background-color: rgba(255,255,255,.02); }
  /* The act accents are lightened above for contrast, so white text on an
     accent-filled pill no longer clears the bar. Use the dark ground. */
  .frame-tabs button.is-active, .bayes-events button.is-active { color: #151b19; }

  /* The deliberately-inverted panels take their background from --think-ink,
     which is a light colour here. Pin them to a dark tone instead, or they
     render as pale blocks carrying the light text they were built for. */
  .think-specimen, .think-transfer { background: #101816; }

  /* Same trap on the print button: an ink background with white text. */
  .think-print:hover { border-color: var(--act); background: var(--act); color: #fff; }

  /* Panels and pills that were hard-coded to paper or white. */
  .omission-map { background: rgba(21,27,25,.94); }
  .relation-comparisons span { background: #1b2924; }
  .frame-facts span { background: color-mix(in srgb, var(--act) 22%, transparent); color: var(--think-ink); }
  .think-start:hover span { background: rgba(255,255,255,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .territory-points circle { animation: none; }
  .think-territory *, .specimen-visual *, .think-specimen-steps article { transition: none !important; }
}

@media print {
  @page { size: A4; margin: 10mm 12mm; }
  body.think-special > header, body.think-special > footer, .think-progress, .think-rail, .think-hero-visual, .think-diagram, .think-start, .think-print, .think-post-nav, .specimen-switch, .specimen-visual { display: none !important; }
  /* Print has no scroll-driven reveal state: show every chapter immediately. */
  .think-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.think-special, .think-act, .think-specimen, .think-act--system, .think-act--limits, .think-act--stack, .think-product-example, .think-transfer { background: white !important; color: #111 !important; }
  body.think-special { font-size: 9.5pt; line-height: 1.4; }
  .think-hero { display: block; min-height: auto; padding: 0 0 6mm; }
  .think-hero h1 { color: #111; font-size: 34pt; }
  .think-hero .think-dek { font-size: 13pt !important; }
  .think-content, .think-hero, .think-coda { max-width: 100%; }
  .think-act, .think-specimen, .think-coda { padding: 6mm 0; break-before: auto; }
  .think-orientation { margin: 0; padding: 0; border: 0; box-shadow: none; }
  .think-orientation, .think-lens-index, .think-product-example, .think-transfer, .think-memory ol, .think-integration ol { break-inside: auto; }
  .think-lens-row, .think-probability-grid, .think-specimen-stage, .think-tensions, .think-transfer, .think-product-example { display: block; }
  .think-lens-row { margin-bottom: 6mm; }
  .think-act-head { margin-bottom: 6mm; text-align: left; break-after: auto; }
  .think-act-head h2 { font-size: 24pt; }
  .think-lens, .think-probability-grid article, .think-specimen-steps article, .think-tensions article, .think-product-example li { break-inside: auto; margin-bottom: 4mm; color: #111; }
  .think-probability-grid article { display: block; padding: 0; border: 0; }
  .think-example { padding: 0; border: 0; border-radius: 0; background: transparent; }
  [data-specimen-case][hidden] { display: block !important; }
  .think-specimen-steps article { min-height: auto; padding: 0; opacity: 1; }
  .think-specimen-intro > p:last-child, .think-specimen-steps p, .think-transfer li, .think-specimen-steps h3, .think-transfer h3, .think-transfer h3, .think-specimen-intro h2, .think-product-example h2, .think-product-example li strong { color: #111; }
  .think-product-example { padding: 0; border: 0; }
  .think-transfer, .think-coda { display: block; margin: 0; padding: 6mm 0; border: 0; border-radius: 0; box-shadow: none; }
  .think-product-example > div > p:last-child, .think-product-example li { color: #333; }
  .think-lens-index, .think-memory ol, .think-integration ol { display: block; border: 0; background: transparent; }
  .think-lens-index div, .think-memory li, .think-integration li { min-height: auto; padding: 3pt 0; border: 0; background: white; }
  .think-memory li:before, .think-integration li:before { display: inline; margin: 0 6pt 0 0; }
  .think-coda { text-align: left; }
}