/* A readout and an explicit exit/continue branch after each full decoder pass. */
.hero { grid-template-columns: .84fr 1.3fr; column-gap: 42px; padding-top: 36px; }
.hero-copy { align-self: center; padding-bottom: 28px; }
.hero h1 { font-size: clamp(52px, 4.7vw, 68px); }
.hero .title-tail { font-size: 26px; }
.hero-summary .desktop-break { display: none; }
.decision-demo { --teal: #197b73; --flow-columns: .85fr 1fr 1.1fr; margin: 0; min-width: 0; width: 100%; padding: 23px 25px 17px; border: 1px solid #d9dedb; background: #fffefa; border-radius: 8px; box-shadow: 0 12px 38px -30px #283b58; }
.demo-heading { position: relative; }
.demo-heading .eyebrow { font-size: 9px; letter-spacing: 1.4px; color: var(--blue); }
.demo-heading h2 { font: 25px/1.2 var(--serif); letter-spacing: -.6px; margin-top: 5px; }
.demo-live { position: absolute; top: 0; right: 0; display: inline-flex; gap: 6px; align-items: center; margin-top: 5px; white-space: nowrap; font: 10px var(--mono); color: var(--muted); }
.demo-live > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.demo-scenarios { display: flex; gap: 6px; margin: 14px 0 12px; }
.demo-scenarios button { flex: 1; min-height: 32px; border: 1px solid var(--rule); border-radius: 4px; padding: 5px 7px; background: transparent; font: 11px var(--sans); color: var(--muted); }
.demo-scenarios button[aria-pressed="true"] { background: var(--wash); color: var(--blue); border-color: #b6c4ee; }
.demo-scenarios button:disabled { cursor: default; }
.flow-headings { display: grid; grid-template-columns: var(--flow-columns); gap: 14px; color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .2px; }
.flow-headings > :nth-child(2), .flow-headings > :nth-child(3) { text-align: center; }
.loop-flow { list-style: none; padding: 0; margin: 10px 0 0; }
.loop-row { display: grid; grid-template-columns: var(--flow-columns); gap: 14px; height: 120px; position: relative; align-items: start; }
.loop-row:last-child { height: 108px; }
.loop-compute { height: 97px; display: flex; align-items: center; gap: 10px; position: relative; }
.loop-number { color: var(--muted); font: 11px var(--mono); }
.layer-stack { position: relative; flex: 1; height: 48px; }
.layer-stack > span { position: absolute; inset: 0 9px 13px 0; border: 1px solid #c3cbdc; background: #eef1f8; border-radius: 3px; }
.layer-stack > span:nth-child(2) { transform: translate(4px, 6px); }
.layer-stack > span:nth-child(3) { transform: translate(8px, 12px); display: flex; justify-content: center; align-items: center; font: 23px var(--serif); color: #4e6393; }
.layer-stack sub { font-size: 12px; margin: 9px 0 0 1px; }
.compute-arrow { color: #a3adc3; font-size: 20px; padding-left: 3px; }
.option-distribution { display: flex; justify-content: center; gap: 12px; padding-top: 14px; height: 89px; }
.option-bar { width: 29px; display: flex; flex-direction: column; align-items: center; }
.bar-value { font: 10px/15px var(--mono); color: var(--muted); height: 15px; }
.bar-track { height: 42px; width: 22px; display: block; position: relative; background: #f0f1ee; border-bottom: 1px solid #c7cec9; }
.bar-fill { display: block; position: absolute; inset: 0; background: #a9b7d7; transform-origin: bottom; transform: scaleY(var(--probability)); }
.bar-label { color: var(--muted); font: 10px/18px var(--mono); }
.option-bar.is-top .bar-fill { background: var(--blue); }
.option-bar.is-top .bar-value { color: var(--blue); }
.loop-gate { margin-top: 0; position: relative; text-align: center; }
.loop-gate::before { content: '→'; position: absolute; left: -13px; top: 28px; color: #a3adc3; }
.gate-label { display: block; font: 11px/1.4 var(--sans); min-height: 16px; color: var(--muted); }
.gate-branches { display: flex; justify-content: center; gap: 5px; }
.gate-branches > span { flex: 1; max-width: 58px; font: 10px/20px var(--mono); border: 1px solid #dce0db; border-radius: 3px; color: #747c79; background: #fafaf7; }
.gate-branches .is-chosen { background: #e9edf9; border-color: #9baee7; color: var(--blue); }
.gate-branches .exit-branch.is-chosen { background: #dff1ea; border-color: #8cbfb2; color: #156d61; }
.return-route { position: absolute; top: 101px; bottom: -2px; right: 6%; left: 21%; border-right: 1px solid #dce1e2; border-bottom: 1px solid #dce1e2; border-radius: 0 0 7px 0; height: 13px; }
.return-route::after { content: ''; position: absolute; left: -3px; top: 12px; height: 14px; width: 6px; background: #c8d0d5; clip-path: polygon(40% 0, 60% 0, 60% 60%, 100% 60%, 50% 100%, 0 60%, 40% 60%); }
.return-route span { position: absolute; right: 26%; bottom: -6px; padding: 0 8px; background: #fffefa; color: #899392; font: 8px var(--mono); }
.loop-row[data-state="waiting"] .layer-stack, .loop-row[data-state="skipped"] .layer-stack { opacity: .45; }
.loop-row[data-state="waiting"] .gate-branches, .loop-row[data-state="skipped"] .gate-branches { opacity: .45; }
.loop-row[data-state="skipped"] .loop-number { text-decoration: line-through; }
.loop-row[data-state="computing"] .layer-stack > span, .loop-row[data-state="reading"] .layer-stack > span { border-color: var(--blue); background: #e1e9ff; }
.loop-row[data-state="computing"] .loop-number, .loop-row[data-state="reading"] .loop-number { color: var(--blue); font-weight: bold; }
.loop-row[data-state="complete"] .return-route { border-color: var(--blue); }
.loop-row[data-state="complete"] .return-route::after { background: var(--blue); }
.loop-row[data-state="complete"] .return-route span { color: var(--blue); }
.loop-row[data-state="exited"] .layer-stack > span { border-color: #87afa6; background: #e3efe9; }
.loop-row[data-state="exited"] .gate-label { color: #156d61; font-weight: bold; }
.loop-row[data-state="exited"] .return-route,
.loop-row[data-state="skipped"] .return-route { visibility: hidden; }
.demo-outcome { display: flex; align-items: center; gap: 10px; background: var(--wash); color: #334b86; border-radius: 4px; min-height: 44px; padding: 8px 11px; }
.demo-outcome p { font-size: 11px; line-height: 1.5; }
.outcome-symbol { font: 21px var(--serif); }
.decision-demo[data-finished="true"] .demo-outcome { color: #186c61; background: #e6f1eb; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.demo-step-controls { display: flex; gap: 15px; }
.demo-step-controls button { background: transparent; border: 0; padding: 8px 0; color: var(--muted); font: 10px var(--mono); }
.demo-step-controls button:hover { color: var(--blue); }
.demo-step-controls button:disabled { display: none; }
.decision-demo figcaption { font: 9px/1.5 var(--sans); color: var(--muted); margin-top: 7px; }
.motion-enabled .bar-fill { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.motion-enabled .decision-demo.is-running .loop-row[data-state="computing"] .layer-stack > span { animation: layer-pass 1.2s ease-in-out infinite; }
.motion-enabled .decision-demo.is-running .loop-row[data-state="computing"] .layer-stack > span:nth-child(2) { animation-delay: .2s; }
.motion-enabled .decision-demo.is-running .loop-row[data-state="computing"] .layer-stack > span:nth-child(3) { animation-delay: .4s; }
@keyframes layer-pass { 50% { background: #b4c8ff; } }
@media (max-width: 1100px) and (min-width: 761px) {
  .hero { column-gap: 24px; grid-template-columns: .75fr 1.3fr; }
  .hero h1 { font-size: 52px; }
  .decision-demo { padding: 19px 17px 14px; }
  .demo-heading h2 { font-size: 22px; }
  .demo-live { font-size: 8px; }
  .flow-headings, .loop-row { gap: 10px; }
  .option-distribution { gap: 7px; }
  .loop-compute { gap: 5px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 29px; }
  .hero-copy { padding-bottom: 25px; }
  .hero h1 { font-size: clamp(42px, 12.3vw, 64px); margin-top: 16px; }
  .hero .title-tail { font-size: 22px; margin-top: 12px; }
  .hero-summary { margin-top: 12px; font-size: 14px; }
  .decision-demo { max-width: 600px; padding: 19px 16px 14px; margin: 0 auto; }
  .hero-diagram { width: 100%; }
  .demo-heading h2 { font-size: 24px; }
  .demo-live { font-size: 9px; }
  .authors { margin-top: 27px; }
}
@media (max-width: 400px) {
  .decision-demo { padding: 16px 12px 13px; --flow-columns: .65fr .95fr 1.3fr; }
  .demo-heading h2 { font-size: 21px; }
  .demo-live { font-size: 8px; gap: 4px; }
  .demo-scenarios { gap: 4px; }
  .demo-scenarios button { font-size: 10px; padding-inline: 4px; }
  .flow-headings { font-size: 8px; }
  .flow-headings, .loop-row { gap: 9px; }
  .loop-compute { gap: 4px; }
  .loop-number { font-size: 10px; }
  .compute-arrow { font-size: 15px; padding-left: 0; }
  .option-distribution { gap: 4px; }
  .option-bar { width: 24px; }
  .bar-track { width: 18px; }
  .gate-label { font-size: 10px; }
  .gate-branches { gap: 3px; }
  .gate-branches > span { font-size: 9px; }
  .return-route { left: 18%; }
  .return-route span { font-size: 7px; right: 24%; }
  .demo-step-controls { gap: 11px; }
}
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }
@media print { .demo-scenarios, .demo-toolbar { display: none; } .decision-demo { break-inside: avoid; box-shadow: none; } }

.motion-enabled .decision-demo.is-running .loop-row[data-current="true"][data-state="complete"] .return-route::before {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #254cce18; animation: continue-state 2.3s linear infinite;
}
@keyframes continue-state {
  0% { right: -3px; top: -3px; opacity: 0; }
  10% { right: -3px; top: -3px; opacity: 1; }
  25% { right: -3px; top: 10px; }
  90% { right: calc(100% - 3px); top: 10px; opacity: 1; }
  100% { right: calc(100% - 3px); top: 23px; opacity: 0; }
}

/* The stopper is a separate predictor, between the option head and the exit. */
.stopper-explainer { color: var(--muted); font: 10px/1.55 var(--sans); margin-bottom: 13px; }
.stopper-explainer strong { color: var(--teal); font-weight: 600; }
.stopper-explainer > span { display: block; color: var(--teal); }
.stopper-block { border: 1px solid #aac7c2; border-radius: 4px; background: #f0f6f3; padding: 5px 7px 6px; display: grid; grid-template-columns: 1fr auto; gap: 2px 4px; text-align: left; margin-bottom: 4px; color: var(--teal); }
.stopper-name { font: 9px/1.3 var(--mono); }
.stopper-name sub { font-size: 8px; }
.stopper-inputs { font: 9px/1.3 var(--mono); color: #4d7770; }
.stopper-comparison { grid-column: 1 / -1; font: 13px/1.4 var(--mono); font-weight: bold; }
.stopper-meter { grid-column: 1 / -1; height: 4px; background: #d7e5df; position: relative; margin-top: 3px; }
.stopper-fill { position: absolute; inset: 0; background: var(--teal); transform: scaleX(var(--agreement)); transform-origin: left; }
.stopper-threshold { position: absolute; left: 95%; width: 1px; top: -3px; bottom: -3px; background: #243d37; }
.loop-row[data-state="waiting"] .stopper-block, .loop-row[data-state="skipped"] .stopper-block { opacity: .45; }
.loop-row[data-loop="4"] .stopper-block { border-style: dashed; color: var(--muted); background: #f5f5f0; }
.loop-row[data-loop="4"] .stopper-comparison { font-size: 11px; }
.loop-row[data-state="stopping"] .stopper-block { border-color: var(--teal); box-shadow: 0 0 0 3px #197b7317; }
.loop-row[data-state="stopping"] .loop-number { color: var(--teal); font-weight: bold; }
.loop-row[data-state="exited"] .stopper-block { border-color: #6ba693; background: #e1f0e8; }
.motion-enabled .stopper-fill { transition: transform .95s cubic-bezier(.2,.7,.2,1); }
.motion-enabled .decision-demo.is-running .loop-row[data-state="stopping"] .stopper-block { animation: stopper-predict 1.9s ease-in-out infinite; }
@keyframes stopper-predict { 50% { box-shadow: 0 0 0 4px #197b7327; background: #e0efe8; } }
@media (max-width: 1100px) and (min-width: 761px) {
  .stopper-block { padding-inline: 5px; }
  .stopper-inputs { font-size: 8px; }
  .stopper-name { font-size: 8px; }
  .stopper-comparison { font-size: 11px; }
}
@media (max-width: 400px) {
  .stopper-block { padding-inline: 5px; gap: 2px; }
  .stopper-name, .stopper-inputs { font-size: 8px; }
  .stopper-comparison { font-size: 11px; }
  .stopper-explainer { font-size: 9px; }
  .loop-gate::before { left: -10px; }
}

/* Two cases make the depth contrast explicit before playback starts. */
.demo-scenarios button { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 8px 10px; }
.demo-scenarios button strong { font: 600 13px var(--sans); }
.demo-scenarios button > span { font: 10px var(--mono); }
.case-summary { font: 11px/1.5 var(--sans); color: var(--ink); min-height: 33px; margin: 0 0 9px; }
@media (max-width: 400px) {
  .demo-scenarios button { flex-direction: column; align-items: center; gap: 3px; }
  .demo-scenarios button > span { font-size: 9px; }
  .case-summary { font-size: 10px; min-height: 30px; }
}

/* Keep the complete request beside the computation, with controls next to it. */
.hero-copy { align-self: start; padding-top: 12px; padding-bottom: 0; }
.hero .hero-summary { font-size: 14px; margin-top: 20px; }
.case-worked-example { margin-top: 28px; padding: 19px 20px 16px; border: 1px solid #d9dedb; border-radius: 7px; background: #fffefa; }
.case-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.case-card-heading .eyebrow { font-size: 9px; color: var(--blue); }
.case-kind { color: var(--muted); font: 9px var(--mono); }
.case-worked-example h2 { font: 23px/1.25 var(--serif); letter-spacing: -.4px; margin-top: 9px; }
.case-worked-example .demo-scenarios { margin: 15px 0; }
.demo-scenarios[hidden], .case-input[hidden] { display: none; }
.case-worked-example .demo-scenarios button { min-height: 42px; cursor: pointer; background: #f7f8f4; }
.case-worked-example .demo-scenarios button:hover { border-color: #708aca; color: var(--blue); }
.case-worked-example .demo-scenarios button[aria-pressed="true"] { color: white; background: var(--blue); border-color: var(--blue); }
.case-input { min-height: 233px; }
.case-rule { color: var(--muted); font: 12px/1.55 var(--sans); margin-bottom: 12px; }
.case-rule strong { color: var(--ink); font-weight: 600; }
.case-options { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e1e4dc; }
.case-options li { display: grid; grid-template-columns: 20px 1fr 10px; gap: 9px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #e1e4dc; }
.case-options li > div { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; gap: 7px; }
.case-options strong { font: 600 12px var(--sans); }
.case-options li > div > span { color: var(--muted); font: 11px/1.6 var(--sans); }
.option-key { font: 10px var(--mono); color: var(--blue); }
.case-options li.is-selected { background: #e9f4ed; }
.answer-mark { color: var(--teal); font-size: 13px; }
.case-answer { min-height: 61px; padding: 9px 11px; background: #f0f6f3; color: #336257; border-left: 2px solid #7ea99b; font: 11px/1.55 var(--sans); margin-top: 11px; }
.case-playback { margin-top: 10px; color: var(--muted); font: 9px/1.5 var(--mono); }
.decision-demo .demo-heading { margin-bottom: 19px; }
.bar-label { font-size: 9px; letter-spacing: -.3px; white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 761px) {
  .case-worked-example { padding: 15px 13px; }
  .case-worked-example h2 { font-size: 21px; }
  .case-options li { gap: 5px; }
  .case-options li > div { grid-template-columns: 40px 1fr; gap: 4px; }
  .case-options li > div > span { font-size: 10px; }
  .case-input { min-height: 262px; }
  .case-kind { font-size: 8px; }
}
@media (max-width: 760px) {
  .hero-copy { padding-top: 0; padding-bottom: 24px; }
  .case-worked-example { margin-top: 20px; }
  .case-input { min-height: 222px; }
}
@media (max-width: 400px) {
  .case-worked-example { padding: 16px 13px; }
  .case-worked-example .demo-scenarios button { flex-direction: row; gap: 9px; }
  .case-options li { gap: 6px; }
  .case-options li > div { grid-template-columns: 45px 1fr; gap: 5px; }
  .case-options li > div > span { font-size: 10px; }
  .case-kind { font-size: 8px; }
  .case-input { min-height: 249px; }
}
@media (max-width: 400px) {
  .option-distribution { flex-direction: column; justify-content: flex-start; gap: 4px; padding-top: 11px; }
  .option-bar { width: 100%; display: grid; grid-template-columns: 1fr 28px; grid-template-rows: 13px 4px; }
  .bar-label { grid-area: 1 / 1; font: 9px/13px var(--sans); letter-spacing: 0; }
  .bar-value { grid-area: 1 / 2; font-size: 9px; line-height: 13px; height: 13px; text-align: right; }
  .bar-track { grid-area: 2 / 1 / 3 / 3; width: 100%; height: 4px; }
  .bar-fill { transform-origin: left; transform: scaleX(var(--probability)); }
}

/* Recorded examples retain every option, including MathQA's five candidates. */
.case-input { min-height: 0; }
.case-options li > div { display: block; min-width: 0; }
.case-options strong { line-height: 1.45; }
.case-options--numeric { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; border: 0; }
.case-options--numeric li { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 9px 2px; border: 1px solid var(--rule); border-radius: 4px; }
.case-options--numeric strong { font-size: 15px; }
.case-source { font: 10px/1.6 var(--sans); color: var(--muted); margin-top: 12px; }
.case-provenance { margin-top: 12px; font: 10px/1.65 var(--sans); color: var(--muted); }
.case-provenance summary { cursor: pointer; color: var(--blue); }
.case-provenance p { font: inherit; margin-top: 8px; overflow-wrap: anywhere; }
.case-source a, .case-provenance a, #diagram-desc a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.stopper-explainer #demo-threshold { display: inline; }
.stopper-threshold { left: var(--threshold, 92.25%); }
.stopper-comparison { font-size: clamp(9px, .86vw, 12px); white-space: nowrap; letter-spacing: -.25px; }
.option-distribution { flex-direction: column; justify-content: center; gap: 7px; padding-top: 4px; height: 89px; }
.option-bar { width: 100%; display: grid; grid-template-columns: 12px minmax(10px, 1fr) 38px; grid-template-rows: 12px; align-items: center; gap: 4px; }
.bar-label { grid-area: 1 / 1; font: 10px/12px var(--mono); letter-spacing: 0; }
.bar-track { grid-area: 1 / 2; width: 100%; height: 7px; border: 0; }
.bar-value { grid-area: 1 / 3; font: 9px/12px var(--mono); height: 12px; text-align: right; }
.bar-fill { transform-origin: left; transform: scaleX(var(--probability)); }
.decision-demo[data-option-count="5"] .option-distribution { gap: 5px; }
@media (max-width: 1100px) and (min-width: 761px), (max-width: 400px) {
  .option-bar { grid-template-columns: 8px minmax(5px, 1fr) 31px; gap: 3px; }
  .bar-value { font-size: 8px; }
  .bar-label { font-size: 9px; }
  .stopper-block { padding-inline: 4px; }
  .stopper-comparison { font-size: 8.5px; letter-spacing: -.4px; }
}

/* Keep the full worked example above the fold in laptop-sized viewports. */
.hero-copy, .case-worked-example, .case-input, .case-answer { min-width: 0; }
.case-worked-example { overflow-wrap: anywhere; }
a.case-provenance { display: inline-block; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.case-source-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 24px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); overflow: auto; }
.case-source-dialog::backdrop { background: #14212966; }
.source-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.case-worked-example .source-dialog-heading h2 { margin: 0; font: 26px/1.2 var(--serif); }
.source-dialog-heading button { flex-shrink: 0; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px; background: white; font: 12px var(--sans); }
.case-source-dialog p { margin-top: 12px; font: 13px/1.6 var(--sans); }
.case-source-dialog a { color: var(--blue); }
html:has(.case-source-dialog[open]) { overflow: hidden; }
@media (min-width: 761px) {
  .site-header { height: 60px; }
  .wordmark { font-size: 31px; }
  .site-header nav { font-size: 12px; gap: 26px; }
  .hero { --loop-height: clamp(86px, calc((100svh - 340px) / 4), 110px); padding-top: 16px; grid-template-columns: minmax(0, .87fr) minmax(0, 1.3fr); column-gap: 28px; align-items: start; }
  .hero-copy { padding: 0; }
  .hero-copy > .eyebrow { font-size: 9px; line-height: 1.4; }
  .hero h1 { margin-top: 8px; font-size: clamp(36px, 5.4svh, 50px); line-height: 1.02; letter-spacing: -1.8px; }
  .hero .title-tail { margin-top: 6px; font-size: 20px; line-height: 1.2; }
  .hero .hero-summary { margin-top: 8px; font-size: 12px; line-height: 1.45; }
  .case-worked-example { margin-top: 14px; padding: 13px 16px 11px; }
  .case-worked-example h2 { margin-top: 5px; font-size: 21px; line-height: 1.2; }
  .case-worked-example .demo-scenarios { margin: 10px 0; }
  .case-worked-example .demo-scenarios button { min-height: 34px; padding: 6px 8px; }
  .case-rule { margin-bottom: 8px; font-size: 12px; line-height: 1.45; }
  .case-options li { padding: 7px 3px; gap: 6px; }
  .case-options strong { font-size: 12px; line-height: 1.35; }
  .case-options--numeric li { padding: 6px 2px; }
  .case-options--numeric strong { font-size: 15px; }
  .case-source { margin-top: 7px; font-size: 10px; line-height: 1.4; }
  .case-answer { margin-top: 8px; min-height: 0; padding: 7px 9px; font-size: 11px; line-height: 1.4; }
  .case-playback { margin-top: 6px; font-size: 9px; line-height: 1.4; }
  .case-provenance { margin-top: 6px; font-size: 10px; line-height: 1.4; }
  .decision-demo { align-self: start; margin: 0; padding: 15px 18px 12px; }
  .decision-demo .demo-heading { margin-bottom: 8px; }
  .demo-heading h2 { margin-top: 3px; font-size: 23px; line-height: 1.2; }
  .stopper-explainer { margin-bottom: 8px; font-size: 10px; line-height: 1.45; }
  .flow-headings { font-size: 9px; line-height: 1.25; }
  .loop-flow { margin-top: 6px; }
  .loop-row { height: var(--loop-height); }
  .loop-row:last-child { height: calc(var(--loop-height) - 10px); }
  .loop-compute, .option-distribution { height: calc(var(--loop-height) - 14px); }
  .option-distribution { padding-top: 0; }
  .decision-demo[data-option-count="5"] .option-distribution { gap: 3px; }
  .layer-stack { height: 40px; }
  .layer-stack > span:nth-child(3) { font-size: 20px; }
  .stopper-block { padding: 3px 6px 4px; gap: 1px 4px; margin-bottom: 2px; }
  .stopper-comparison { line-height: 1.25; }
  .stopper-meter { margin-top: 2px; height: 3px; }
  .gate-label { min-height: 13px; font-size: 10px; line-height: 1.3; }
  .gate-branches > span { font-size: 9px; line-height: 17px; }
  .loop-gate::before { top: 24px; }
  .return-route { top: calc(var(--loop-height) - 12px); height: 6px; --route-turn: 5px; }
  .return-route::after { top: 5px; height: 10px; }
  .return-route span { font-size: 7px; }
  .demo-outcome { min-height: 34px; padding: 6px 9px; gap: 7px; }
  .demo-outcome p { font-size: 10px; line-height: 1.4; }
  .outcome-symbol { font-size: 18px; }
  .demo-toolbar { margin-top: 5px; }
  .demo-step-controls button { padding: 6px 0; }
  .decision-demo figcaption { margin-top: 5px; font-size: 9px; line-height: 1.4; }
  .authors { margin-top: 24px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .site-header { height: 52px; }
  .hero { padding-top: 12px; }
  .hero h1 { font-size: 36px; }
  .hero .title-tail { font-size: 18px; }
  .case-worked-example { margin-top: 10px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero { column-gap: 18px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr); }
  .hero .title-tail { font-size: 17px; }
  .case-worked-example { padding-inline: 11px; }
  .case-worked-example h2 { font-size: 19px; }
  .case-card-heading { flex-wrap: wrap; gap: 3px 8px; }
  .decision-demo { padding-inline: 12px; }
  .demo-heading h2 { font-size: 21px; }
  .demo-live { font-size: 8px; }
}
@keyframes continue-state {
  0% { right: -3px; top: -3px; opacity: 0; }
  10% { right: -3px; top: -3px; opacity: 1; }
  25% { right: -3px; top: var(--route-turn, 10px); }
  90% { right: calc(100% - 3px); top: var(--route-turn, 10px); opacity: 1; }
  100% { right: calc(100% - 3px); top: calc(var(--route-turn, 10px) + 13px); opacity: 0; }
}
@media (min-width: 761px) {
  .case-options li { line-height: 1.3; }
}
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 700px) {
  .hero { --loop-height: 80px; }
  .hero h1 { font-size: 28px; }
  .hero h1 br { display: none; }
  .hero .hero-summary { display: none; }
  .decision-demo .demo-heading h2 { display: none; }
  .decision-demo { padding-block: 12px 10px; }
}
/* Compact portrait layout keeps the example readable without a giant title. */
@media (max-width: 760px) {
  .wrap { width: calc(100% - 28px); }
  .site-header { height: 45px; }
  .wordmark { font-size: 26px; }
  .wordmark svg { width: 18px; height: 18px; }
  .site-header nav { gap: 14px; font-size: 10px; }
  .hero { --loop-height: 68px; padding-top: 9px; row-gap: 10px; }
  .hero-copy { padding: 0; }
  .hero-copy > .eyebrow, .hero .hero-summary { display: none; }
  .hero h1 { margin: 0; font-size: clamp(25px, 7vw, 36px); line-height: 1.05; letter-spacing: -1px; }
  .hero h1 br { display: none; }
  .hero .title-tail { margin-top: 3px; font-size: 15px; line-height: 1.2; letter-spacing: -.3px; }
  .case-worked-example { margin-top: 9px; padding: 10px 12px 8px; }
  .case-card-heading .eyebrow { font-size: 8px; }
  .case-worked-example h2 { margin-top: 4px; font-size: 20px; line-height: 1.15; }
  .case-worked-example .demo-scenarios { margin: 7px 0; }
  .case-worked-example .demo-scenarios button { min-height: 32px; padding: 5px 8px; }
  .case-rule { font-size: 11px; line-height: 1.4; margin-bottom: 6px; }
  .case-options li { padding: 5px 2px; line-height: 1.25; }
  .case-options strong { font-size: 11px; line-height: 1.3; }
  .case-options--numeric li { padding: 5px 2px; }
  .case-options--numeric strong { font-size: 14px; }
  .case-source { margin-top: 5px; font-size: 9px; line-height: 1.35; }
  .case-answer { min-height: 0; margin-top: 6px; padding: 5px 7px; font-size: 10px; line-height: 1.4; }
  .case-playback { display: none; }
  .case-provenance { margin-top: 5px; font-size: 9px; line-height: 1.4; }
  .decision-demo { align-self: start; max-width: none; padding: 10px 12px 8px; }
  .decision-demo .demo-heading { margin-bottom: 5px; }
  .decision-demo .demo-heading h2 { display: none; }
  .demo-heading .eyebrow { display: block; font-size: 8px; line-height: 1.3; }
  .demo-live { margin-top: 0; font-size: 8px; }
  .stopper-explainer { margin-bottom: 5px; font-size: 9px; line-height: 1.4; }
  .flow-headings { font-size: 8px; line-height: 1.2; }
  .loop-flow { margin-top: 5px; }
  .loop-row { height: var(--loop-height); }
  .loop-row:last-child { height: calc(var(--loop-height) - 5px); }
  .loop-compute, .option-distribution { height: calc(var(--loop-height) - 8px); }
  .loop-compute { gap: 4px; }
  .layer-stack { height: 33px; }
  .layer-stack > span:nth-child(3) { font-size: 17px; }
  .compute-arrow { font-size: 14px; }
  .option-distribution { padding-top: 0; gap: 5px; }
  .decision-demo[data-option-count="5"] .option-distribution { gap: 2px; }
  .option-bar { grid-template-rows: 10px; }
  .bar-label, .bar-value { height: 10px; font-size: 8px; line-height: 10px; }
  .bar-track { height: 5px; }
  .stopper-block { padding: 2px 4px 3px; gap: 1px 3px; margin-bottom: 1px; }
  .stopper-name, .stopper-inputs { font-size: 8px; line-height: 1.15; }
  .stopper-comparison { font-size: 9px; line-height: 1.15; }
  .stopper-meter { height: 3px; margin-top: 2px; }
  .gate-label { font-size: 9px; line-height: 1.15; min-height: 11px; }
  .gate-branches > span { font-size: 8px; line-height: 13px; }
  .loop-gate::before { top: 17px; }
  .return-route { top: calc(var(--loop-height) - 7px); height: 4px; --route-turn: 3px; }
  .return-route::after { top: 3px; height: 7px; }
  .return-route span { font-size: 6px; bottom: -4px; padding-inline: 5px; }
  .demo-outcome { min-height: 30px; padding: 4px 6px; gap: 6px; }
  .demo-outcome p { font-size: 9px; line-height: 1.3; }
  .outcome-symbol { font-size: 16px; }
  .demo-toolbar { margin-top: 3px; }
  .demo-step-controls button { font-size: 9px; padding: 5px 0; }
  #motion-toggle { font-size: 9px; padding-block: 5px; }
  .decision-demo figcaption { margin-top: 3px; font-size: 8px; line-height: 1.3; }
  .authors { margin-top: 15px; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .hero { --loop-height: 80px; }
  .hero .hero-summary { display: none; }
  .decision-demo .demo-heading h2 { display: none; }
  .decision-demo { padding-block: 12px 10px; }
}
@media (max-width: 760px) {
  .site-header { height: 40px; }
  .hero { row-gap: 8px; }
  .case-worked-example { padding-block: 8px 6px; }
  .case-options li { padding-block: 3px; }
  .case-options--numeric li { padding-block: 4px; }
}