:root {
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-display: 'Satoshi', 'Helvetica Neue', sans-serif;
  --text-xs: clamp(.75rem, .73rem + .1vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .1vw, .9375rem);
  --text-base: clamp(1rem, .95rem + .15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-hero: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --radius-sm: .2rem; --radius-md: .375rem;
  --color-bg: #f2f0e9;
  --color-surface: #faf9f5;
  --color-surface-2: #eae8e0;
  --color-surface-offset: #e4e8e3;
  --color-text: #1b2a31;
  --color-text-muted: #596269;
  --color-text-faint: #687279;
  --color-border: #d2d3ca;
  --color-primary: #28665f;
  --color-primary-highlight: #e3eee7;
  --color-primary-hover: #1c544e;
  --color-copper: #965e3b;
  --color-copper-highlight: #eee2d3;
  --color-chart: #657c80;
  --color-chart-track: #d8ded8;
  --color-inverse: #f3f0e7;
  --color-navy: #17262e;
  --shadow-panel: 0 8px 24px #17262e06;
  --transition-interactive: 160ms ease;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-bg: #111c23;
  --color-surface: #19262e;
  --color-surface-2: #202f38;
  --color-surface-offset: #263a3e;
  --color-text: #eeeae0;
  --color-text-muted: #b0bbbd;
  --color-text-faint: #9caaaf;
  --color-border: #35464e;
  --color-primary: #8fc6b5;
  --color-primary-highlight: #233d3d;
  --color-primary-hover: #b1dfcd;
  --color-copper: #d6a07b;
  --color-copper-highlight: #3a312d;
  --color-chart: #91a6ac;
  --color-chart-track: #344951;
  --shadow-panel: 0 8px 24px #050d1310;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #111c23; --color-surface: #19262e; --color-surface-2: #202f38;
    --color-surface-offset: #263a3e; --color-text: #eeeae0; --color-text-muted: #b0bbbd;
    --color-text-faint: #9caaaf; --color-border: #35464e; --color-primary: #8fc6b5;
    --color-primary-highlight: #233d3d; --color-primary-hover: #b1dfcd; --color-copper: #d6a07b;
    --color-copper-highlight: #3a312d; --color-chart: #91a6ac; --color-chart-track: #344951;
    --shadow-panel: 0 8px 24px #050d1310; color-scheme: dark;
  }
}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--space-6);}
body {min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg);}
img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto;}
input, button, textarea, select {font: inherit; color: inherit;}
h1, h2, h3, h4 {text-wrap: balance; line-height: 1.15;}
p, li, figcaption {text-wrap: pretty;}
button {cursor: pointer; background: none; border: none;}
a {color: inherit;}
button, a, input, summary {transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);}
table {border-collapse: collapse; width: 100%;}
fieldset {border: 0; min-width: 0;}
button, a {touch-action: manipulation;}
[hidden] {display: none !important;}
::selection {background: var(--color-primary-highlight); color: var(--color-primary);}
:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm);}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;}
.skip-link {position: absolute; top: -100px; left: var(--space-4); z-index: 10; padding: var(--space-3) var(--space-5); background: var(--color-text); color: var(--color-bg);}
.skip-link:focus {top: var(--space-4);}
.page-width {max-width: 1360px; margin-inline: auto; padding-inline: clamp(var(--space-5), 4vw, var(--space-16));}
.site-header {min-height: 88px; max-width: 1488px; margin-inline: auto; padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-16)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); border-bottom: 1px solid var(--color-border);}
.brand {display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none;}
.brand-mark {width: 42px; height: 42px; color: var(--color-text);}
.brand-name {font-size: var(--text-lg); font-weight: 900; letter-spacing: .06em; line-height: 1.1;}
.brand-name > span {display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 500; letter-spacing: .13em;}
.main-nav {display: flex; gap: var(--space-8); align-items: center;}
.main-nav a {font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; display: flex; align-items: center; min-height: 44px;}
.main-nav a:hover {color: var(--color-primary);}
.header-actions {display: flex; align-items: center; gap: var(--space-6);}
.edition-label, .eyebrow, .small-label, .section-id, .cutoff-label {font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; line-height: 1.5;}
.edition-label {color: var(--color-text-faint);}
.theme-toggle {display: inline-flex; gap: var(--space-2); align-items: center; justify-content: center; font-size: var(--text-xs); min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.theme-toggle:hover {background: var(--color-surface-2);}
.theme-symbol {width: 16px; height: 16px; display: block; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%);}
.hero {padding-block: clamp(var(--space-10), 4vw, var(--space-16)); display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: center;}
.hero .eyebrow {color: var(--color-text-muted); margin-bottom: var(--space-6);}
.hero-copy .eyebrow {display: flex; align-items: center; gap: var(--space-3);}
.small-rule {width: 28px; height: 2px; display: inline-block; background: var(--color-copper);}
h1 {font-size: var(--text-hero); font-weight: 500; letter-spacing: -.045em; line-height: 1.06;}
h1 span {color: var(--color-text-faint);}
.hero-description {margin-top: var(--space-6); max-width: 55ch; color: var(--color-text-muted);}
.release-review {display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: var(--space-5);}
.release-badge {color: var(--color-copper); background: var(--color-copper-highlight); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; border-radius: var(--radius-sm);}
.release-review p {font-size: var(--text-xs); color: var(--color-text-muted);}
.briefing-note {padding: var(--space-6) 0 var(--space-6) var(--space-8); border-left: 1px solid var(--color-border);}
.briefing-note .eyebrow {font-size: var(--text-xs); margin-bottom: var(--space-4); color: var(--color-copper);}
.briefing-note > p:not(.eyebrow) {font-size: var(--text-lg); line-height: 1.5; font-weight: 500;}
.briefing-meta {margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted);}
.briefing-meta strong {font-weight: 500; color: var(--color-text);}
.text-link {display: inline-flex; align-items: center; gap: var(--space-4); text-underline-offset: 5px; font-size: var(--text-sm); min-height: 44px; color: var(--color-text-muted);}
.text-link:hover {color: var(--color-primary);}
.section-kicker {display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); color: var(--color-text-muted);}
.section-kicker > span:last-child {font-size: var(--text-xs);}
.case-tabs {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);}
.case-tabs button {display: flex; text-align: left; align-items: center; padding: var(--space-5) var(--space-6); gap: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); min-height: 94px;}
.case-tabs button:hover {border-color: var(--color-chart);}
.case-tabs button[aria-selected="true"] {background: var(--color-navy); color: var(--color-inverse); border-color: var(--color-navy);}
[data-theme="dark"] .case-tabs button[aria-selected="true"] {background: #eae6dc; color: #17262e; border-color: #eae6dc;}
.case-index {font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: .7; align-self: flex-start; margin-top: var(--space-1);}
.case-tab-copy {display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-5);}
.case-tab-copy strong {font-weight: 700; font-size: var(--text-lg); line-height: 1.3;}
.case-tab-copy > span {font-size: var(--text-sm); opacity: .8;}
.case-arrow {margin-left: auto; font-size: var(--text-lg); opacity: .7;}
.case-tabs-expanded {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);}
.case-tabs-expanded button {padding: var(--space-5) var(--space-4); gap: var(--space-3);}
.case-tabs-expanded .case-tab-copy {flex-direction: column; gap: var(--space-1);}
.case-tabs-expanded .case-tab-copy strong {font-size: var(--text-base);}
.case-tabs-expanded .case-tab-copy > span {font-size: var(--text-xs);}
.case-tabs-expanded .case-index {align-self: center; margin: 0;}
.case-intro {display: grid; grid-template-columns: 1fr 290px; align-items: start; gap: var(--space-12); padding-block: var(--space-8) var(--space-6);}
.case-heading-line {display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3);}
.case-heading-line h2 {font-size: var(--text-lg); font-weight: 700; letter-spacing: -.025em;}
.version-tag {font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); white-space: nowrap;}
.case-intro > div:first-child > p {color: var(--color-text-muted); font-size: var(--text-sm); max-width: 72ch;}
.case-scope {padding-left: var(--space-6); border-left: 1px solid var(--color-border);}
.case-scope > .eyebrow {color: var(--color-text-faint);}
.case-scope > p {font-size: var(--text-base); font-weight: 700; margin-top: var(--space-2);}
.case-scope > span:last-child {display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs);}
.authority-notice {display: flex; align-items: center; gap: var(--space-5); background: var(--color-copper-highlight); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); color: var(--color-text);}
.notice-label {font-size: var(--text-xs); font-weight: 700; letter-spacing: .065em; color: var(--color-copper); flex: 0 0 auto;}
.authority-notice p {font-size: var(--text-xs); line-height: 1.5;}
.authority-notice.review-incomplete {align-items: flex-start;}
.authority-notice.review-incomplete .notice-label {max-width: 290px;}
.mode-row {display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-6); border-bottom: 1px solid var(--color-border);}
.mode-tabs {display: flex; gap: var(--space-3);}
.mode-tabs button {position: relative; display: flex; gap: var(--space-3); align-items: center; justify-content: center; padding: var(--space-4) var(--space-5); min-height: 64px; font-size: var(--text-base); color: var(--color-text-muted); font-weight: 700; line-height: 1.35; border: 1px solid var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface); white-space: nowrap;}
.mode-tabs button::after {content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: transparent;}
.mode-tabs button[aria-selected="true"] {color: var(--color-primary); font-weight: 700; background: var(--color-primary-highlight); border-color: var(--color-primary);}
.mode-tabs button[aria-selected="true"]::after {background: var(--color-primary); height: 3px;}
.mode-tabs button:hover {color: var(--color-primary);}
.mode-dot {display: block; width: 7px; height: 7px; border: 1px solid currentColor;}
.mode-tabs button[aria-selected="true"] .mode-dot {background: var(--color-primary); border-color: var(--color-primary);}
.mode-descriptor {font-size: var(--text-xs); color: var(--color-text-faint);}
.workspace-panel {margin-top: var(--space-5); padding: clamp(var(--space-5), 3vw, var(--space-8)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel);}
.panel-heading {display: flex; justify-content: space-between; align-items: start; gap: var(--space-6);}
.copper {color: var(--color-copper);}
.panel-heading h3 {font-size: var(--text-xl); font-weight: 500; letter-spacing: -.035em; margin-block: var(--space-2) var(--space-3);}
.panel-heading > div > p:last-child {color: var(--color-text-muted); font-size: var(--text-sm); max-width: 78ch;}
.panel-heading > .small-label {font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); white-space: nowrap;}
.mode-guidance {margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-primary-highlight); border-radius: var(--radius-sm); font-size: var(--text-sm);}
.mode-guidance p {max-width: 100ch; color: var(--color-text-muted);}
.mode-guidance strong {font-weight: 700; color: var(--color-text);}
.mode-guidance .no-duration {color: var(--color-copper); font-weight: 700; margin-top: var(--space-2);}
.demo-steps-heading {font-size: var(--text-lg); font-weight: 700; line-height: 1.35; margin-top: var(--space-8);}
.demo-steps {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); list-style: none; counter-reset: demo-step; padding-block: var(--space-4) var(--space-6);}
.demo-steps li {display: flex; flex-direction: column; gap: var(--space-3); align-items: start; min-width: 0; font-size: var(--text-base); color: var(--color-text-muted); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg);}
.demo-steps li:first-child {border-color: var(--color-primary); background: var(--color-primary-highlight);}
.demo-steps li::before {counter-increment: demo-step; content: counter(demo-step, decimal-leading-zero); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary); background: var(--color-surface); font-weight: 700; font-variant-numeric: tabular-nums;}
.demo-steps li:first-child::before {border-color: var(--color-primary);}
.demo-steps li > div {min-width: 0;}
.demo-steps .demo-step-title {display: flex; align-items: center; gap: var(--space-2); text-align: left; min-height: 44px; font-size: var(--text-base); color: var(--color-text); font-weight: 700; line-height: 1.4;}
.demo-steps p {font-size: var(--text-base); line-height: 1.55; margin-top: var(--space-2);}
.demo-steps a.demo-step-title, .demo-steps button.demo-step-title {color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px;}
.demo-steps a:hover, .demo-steps button:hover {color: var(--color-primary-hover);}
.mode-help {border-block: 1px solid var(--color-border); margin-top: var(--space-4);}
.mode-help summary {min-height: 52px; color: var(--color-primary); font-weight: 700;}
.mode-help > div {padding-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 100ch;}
.mode-help p + p {margin-top: var(--space-3);}
.mode-help strong {color: var(--color-text); font-weight: 700;}
.demo-steps + .mode-help {margin-top: 0;}
.demo-coach {display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); background: var(--color-primary-highlight); border-radius: var(--radius-sm);}
.demo-coach > span {color: var(--color-primary); padding-top: var(--space-1);}
.demo-coach > p {font-size: var(--text-sm); color: var(--color-text);}
.join-summary > .selection-count {color: var(--color-primary) !important; font-weight: 700; font-size: var(--text-sm) !important;}
.preset-fieldset {margin-top: var(--space-6);}
.preset-fieldset legend {font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2);}
.preset-buttons {display: flex; flex-wrap: wrap; gap: var(--space-2);}
.preset-buttons button {font-size: var(--text-sm); padding: var(--space-2) var(--space-4); min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.preset-buttons button:hover {background: var(--color-surface-2);}
.preset-buttons button[aria-pressed="true"] {border-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary);}
.dependency-workbench {display: grid; grid-template-columns: 1.45fr 88px 1fr; align-items: stretch; margin-block: var(--space-6); gap: 0;}
.inline-demo-status {display: none;}
.prerequisite-list {display: flex; flex-direction: column; gap: var(--space-2);}
.prerequisite {position: relative; padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius-sm); display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-3); align-items: start; cursor: pointer; min-height: 81px;}
.prerequisite:hover {background: var(--color-surface-2); border-color: var(--color-chart);}
.prerequisite:focus-within {outline: 2px solid var(--color-primary); outline-offset: 2px;}
.prerequisite input {appearance: none; -webkit-appearance: none; margin: var(--space-1) 0 0; width: 20px; height: 20px; border: 1px solid var(--color-text-faint); border-radius: 2px; background: var(--color-surface); display: grid; place-content: center; cursor: pointer;}
.prerequisite input:checked {background: var(--color-primary); border-color: var(--color-primary);}
.prerequisite input:checked::after {content: ''; width: 9px; height: 5px; border-left: 2px solid var(--color-surface); border-bottom: 2px solid var(--color-surface); transform: translateY(-1px) rotate(-45deg);}
.prerequisite-text > strong {font-size: var(--text-sm); font-weight: 700; display: block;}
.prerequisite-text > span {display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1);}
.prerequisite-state {font-size: var(--text-xs); color: var(--color-primary); white-space: nowrap; padding-top: var(--space-1);}
.prerequisite.is-missing {background: var(--color-copper-highlight); border-color: color-mix(in srgb, var(--color-copper) 45%, var(--color-border));}
.prerequisite.is-missing .prerequisite-state {color: var(--color-copper);}
.prerequisite::after {content: ''; position: absolute; left: 100%; top: 50%; width: 44px; height: 1px; background: var(--color-primary); opacity: .55;}
.prerequisite.is-missing::after {height: 0; background: transparent; border-top: 1px dashed var(--color-copper); opacity: 1;}
.join-connector {position: relative;}
.join-connector::before {content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px; background: var(--color-border);}
.join-connector::after {content: ''; position: absolute; left: 50%; right: 0; top: 50%; height: 1px; background: var(--color-border);}
.join-connector > span {position: absolute; font-size: var(--text-xs); color: var(--color-text-faint); top: 50%; left: 50%; transform: translate(-50%, -50%); writing-mode: vertical-rl; background: var(--color-surface); padding-block: var(--space-3); letter-spacing: .15em; line-height: 1.8;}
.join-summary {padding: var(--space-8); background: var(--color-surface-2); border: 1px solid var(--color-border); display: flex; flex-direction: column; justify-content: center; border-radius: var(--radius-sm);}
.join-summary > .eyebrow {color: var(--color-text-muted);}
.join-state-symbol {height: 32px; width: 32px; border: 1px solid var(--color-copper); margin-block: var(--space-6); position: relative;}
.join-state-symbol::before, .join-state-symbol::after {content: ''; position: absolute; left: 9px; width: 12px; height: 1px; background: var(--color-copper);}
.join-state-symbol::before {top: 12px;}
.join-state-symbol::after {top: 18px;}
.join-summary h4 {font-size: var(--text-lg); font-weight: 500; letter-spacing: -.02em;}
.join-summary > p:not(.eyebrow) {font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3);}
.missing-block {margin-top: var(--space-6);}
.missing-block > p {color: var(--color-copper); font-size: var(--text-xs);}
.missing-block ul {list-style: none; margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1);}
.missing-block li {font-size: var(--text-sm); font-weight: 700;}
.join-summary .join-footnote {font-size: var(--text-xs) !important; padding-top: var(--space-5); margin-top: var(--space-5) !important; border-top: 1px solid var(--color-border);}
.join-summary.all-selected {background: var(--color-primary-highlight);}
.all-selected .join-state-symbol {border-color: var(--color-primary);}
.all-selected .join-state-symbol::before {width: 14px; height: 8px; top: 9px; left: 8px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); background: transparent;}
.all-selected .join-state-symbol::after {display: none;}
.all-selected .missing-block > p {color: var(--color-primary);}
.teaching-takeaway {border-top: 1px solid var(--color-border); padding-top: var(--space-5); display: grid; grid-template-columns: 144px 1fr; gap: var(--space-5);}
.teaching-takeaway > span {color: var(--color-primary); padding-top: var(--space-1);}
.teaching-takeaway p {font-size: var(--text-sm); max-width: 85ch;}
.panel-footnote {font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4);}
.reference-warning {font-size: var(--text-sm); margin-top: var(--space-5); color: var(--color-copper); font-weight: 700;}
.reference-layout {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); margin-block: var(--space-8); align-items: start;}
.reference-chart-column {min-width: 0;}
.range-chart {min-width: 0; padding-top: var(--space-2);}
.range-chart figcaption {display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted);}
.range-chart figcaption > span:first-child {font-size: var(--text-xs); letter-spacing: .06em;}
.chart-legend {display: inline-flex; gap: var(--space-3);}
.chart-legend > span {display: inline-flex; align-items: center; gap: var(--space-1);}
.chart-legend i {display: block; width: 7px; height: 7px; border: 1px solid var(--color-chart);}
.legend-p50 {border-radius: 50%; background: var(--color-chart);}
.chart-legend .legend-p80 {width: 2px; height: 12px; background: var(--color-chart); border: 0;}
.legend-p90 {transform: rotate(45deg); background: var(--color-surface);}
.chart-rows {display: flex; flex-direction: column; gap: var(--space-1);}
.chart-row {display: grid; grid-template-columns: 145px 1fr; gap: var(--space-4); align-items: center; text-align: left; width: 100%; padding: var(--space-4) var(--space-3); min-height: 65px; border-radius: var(--radius-sm); border: 1px solid transparent;}
.chart-row:hover {background: var(--color-surface-2);}
.chart-row[aria-pressed="true"] {background: var(--color-primary-highlight); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));}
.chart-row-name {font-size: var(--text-sm); line-height: 1.25; color: var(--color-text-muted);}
.chart-row[aria-pressed="true"] .chart-row-name {color: var(--color-primary); font-weight: 700;}
.chart-row-name::after {content: ''; display: inline-block; margin-left: var(--space-2); width: 5px; height: 5px; border: 1px solid currentColor; vertical-align: middle; opacity: 0;}
.chart-row[aria-pressed="true"] .chart-row-name::after {opacity: 1; background: var(--color-primary);}
.chart-track {position: relative; width: 100%; height: 24px; background: repeating-linear-gradient(to right, var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent 25%);}
.chart-track::after {content: ''; position: absolute; inset-block: 0; right: 0; width: 1px; background: var(--color-border);}
.range-bar {position: absolute; height: 6px; top: 9px; left: var(--p50); width: calc(var(--p90) - var(--p50)); background: var(--color-chart); opacity: .7;}
.range-point {position: absolute; top: 8px; width: 9px; height: 9px; margin-left: -4px; color: var(--color-chart); z-index: 1;}
.range-point.p50 {left: var(--p50); border-radius: 50%; background: currentColor;}
.range-point.p80 {left: var(--p80); width: 3px; height: 20px; margin-left: -1px; top: 2px; background: currentColor; box-shadow: 0 0 0 2px var(--color-surface);}
.range-point.p90 {left: var(--p90); transform: rotate(45deg); border: 2px solid currentColor; background: var(--color-surface);}
.chart-row[aria-pressed="true"] .range-point {color: var(--color-primary);}
.chart-row[aria-pressed="true"] .range-bar {background: var(--color-primary); opacity: 1;}
.chart-row[aria-pressed="true"] .p80 {box-shadow: 0 0 0 2px var(--color-primary-highlight);}
.chart-row[aria-pressed="true"] .p90 {background: var(--color-primary-highlight);}
.chart-axis {margin-left: calc(145px + var(--space-3) + var(--space-4) + 1px); margin-right: calc(var(--space-3) + 1px); display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); font-variant-numeric: tabular-nums;}
.chart-axis > span {width: 0; white-space: nowrap; display: flex; justify-content: center;}
.chart-axis > span:first-child {justify-content: flex-start;}
.chart-axis > span:last-child {justify-content: flex-end;}
.chart-explanation {margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-xs); max-width: 80ch;}
.selection-summary {border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-6);}
.selection-summary .eyebrow {font-size: var(--text-xs); color: var(--color-primary); letter-spacing: .075em;}
.selection-summary h4 {font-size: var(--text-lg); margin-block: var(--space-3); font-weight: 700;}
.selection-summary > p:not(.eyebrow) {color: var(--color-text-muted); font-size: var(--text-xs);}
.percentile-values {margin-block: var(--space-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);}
.percentile-values > div + div {border-left: 1px solid var(--color-border); padding-left: var(--space-4);}
.percentile-values dt {font-size: var(--text-xs); color: var(--color-text-muted);}
.percentile-values dd {font-size: var(--text-lg); font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums;}
.selection-footnote {line-height: 1.5;}
details summary {cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: var(--space-4); font-size: var(--text-sm); font-weight: 500;}
details summary::-webkit-details-marker {display: none;}
details summary > span {font-size: var(--text-lg); font-weight: 400; color: var(--color-text-muted);}
details[open] summary > span {transform: rotate(45deg);}
details summary:hover {color: var(--color-primary);}
.percentile-explainer {border-block: 1px solid var(--color-border); margin-bottom: var(--space-6);}
.percentile-explainer > div {padding-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 90ch;}
.percentile-explainer p + p {margin-top: var(--space-3);}
.table-scroll-cue {display: none;}
.reference-table-wrap {overflow-x: auto; border-radius: var(--radius-sm);}
.reference-table {font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap;}
.reference-table caption {text-align: left; color: var(--color-text-muted); font-size: var(--text-xs); padding-bottom: var(--space-3); white-space: normal;}
.reference-table th, .reference-table td {text-align: right; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4);}
.reference-table th {font-weight: 500;}
.reference-table thead {background: var(--color-surface-2); font-size: var(--text-xs); color: var(--color-text-muted);}
.reference-table th:first-child, .reference-table td:first-child {text-align: left;}
.reference-table tbody tr.is-selected {background: var(--color-primary-highlight); color: var(--color-primary);}
.reference-table tbody tr.is-selected th {font-weight: 700;}
.comparison-panel {min-width: 0; padding: var(--space-5); border: 1px solid var(--color-primary); border-top-width: 3px; border-radius: var(--radius-sm); background: var(--color-bg); scroll-margin-top: var(--space-6);}
.comparison-panel > .eyebrow {color: var(--color-primary); letter-spacing: .075em;}
.comparison-panel h4 {font-size: var(--text-lg); font-weight: 700; margin-block: var(--space-3);}
.comparison-purpose {font-size: var(--text-sm); color: var(--color-text-muted);}
.comparison-fieldset {margin-top: var(--space-5);}
.comparison-fieldset legend {font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3);}
.comparison-options {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);}
.comparison-option {display: flex; align-items: center; gap: var(--space-2); cursor: pointer; min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.35; background: var(--color-surface);}
.comparison-option:hover {border-color: var(--color-primary);}
.comparison-option.is-selected {background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); font-weight: 700;}
.comparison-option input {width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--color-primary); cursor: pointer;}
.comparison-status {font-size: var(--text-sm); color: var(--color-primary); font-weight: 700; margin-block: var(--space-3) var(--space-4);}
.comparison-status.is-limit {color: var(--color-copper);}
.comparison-definition, .comparison-footnote {font-size: var(--text-xs); color: var(--color-text-muted);}
.comparison-definition {padding-top: var(--space-4); border-top: 1px solid var(--color-border);}
.comparison-definition strong {color: var(--color-text); font-weight: 700;}
.comparison-empty {font-size: var(--text-sm); padding: var(--space-5) var(--space-4); margin-top: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-sm);}
.comparison-table-wrap {max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.comparison-table {font-size: var(--text-sm); font-variant-numeric: tabular-nums;}
.comparison-table caption {text-align: left; padding: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface);}
.comparison-table th, .comparison-table td {padding: var(--space-3) var(--space-2); text-align: center; border-top: 1px solid var(--color-border);}
.comparison-table th {font-weight: 700; font-size: var(--text-xs);}
.comparison-table thead {background: var(--color-primary-highlight); color: var(--color-primary);}
.comparison-table thead th:not(:first-child) {min-width: 88px; max-width: 120px; overflow-wrap: normal;}
.comparison-table tbody th {text-align: left; color: var(--color-text-muted); background: var(--color-surface);}
.comparison-table td {white-space: nowrap;}
.comparison-table tbody tr:nth-child(2) td {background: var(--color-surface-2);}
.comparison-footnote {margin-top: var(--space-4);}
.comparison-scroll-cue {display: none;}
.all-reference-results {border-block: 1px solid var(--color-border);}
.all-reference-results[open] {padding-bottom: var(--space-4);}
.sensitivity-note {display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); margin-top: var(--space-6); padding: var(--space-6); background: var(--color-copper-highlight); border-radius: var(--radius-sm);}
.sensitivity-note h4 {font-size: var(--text-base); font-weight: 700; line-height: 1.35; margin-block: var(--space-2);}
.sensitivity-note p:not(.eyebrow) {font-size: var(--text-xs); color: var(--color-text-muted);}
.sensitivity-note dl {display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);}
.sensitivity-note dl > div + div {padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--color-copper) 30%, transparent);}
.sensitivity-note dt {font-size: var(--text-sm); font-weight: 700;}
.sensitivity-note dd {display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1);}
.sensitivity-note strong {font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums;}
.snapshot-provenance {margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted);}
.oem-scenario-note {padding: var(--space-5) var(--space-6); background: var(--color-primary-highlight); margin-top: var(--space-6); border-radius: var(--radius-sm);}
.oem-scenario-note strong {font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);}
.oem-scenario-note p {font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 90ch;}
.oem-section-heading {display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-block: var(--space-8) var(--space-4);}
.oem-section-heading h4 {font-size: var(--text-lg); font-weight: 500; letter-spacing: -.02em;}
.oem-section-heading .eyebrow {color: var(--color-text-muted); margin-bottom: var(--space-2);}
.oem-section-heading > .small-label {font-size: var(--text-xs); color: var(--color-copper); text-align: right;}
.oem-workstreams {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);}
.oem-workstream {padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.oem-workstream:first-child {grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1fr; gap: var(--space-6);}
.oem-workstream h5 {font-size: var(--text-base); font-weight: 700; line-height: 1.35; margin-bottom: var(--space-2);}
.oem-workstream .workstream-status {font-size: var(--text-xs); color: var(--color-copper); display: block; margin-bottom: var(--space-4);}
.oem-workstream p {font-size: var(--text-sm); color: var(--color-text-muted);}
.oem-workstream .workstream-finding {margin-top: var(--space-3); color: var(--color-text);}
.workstream-sources {display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3);}
.workstream-sources a {font-size: var(--text-xs); color: var(--color-primary); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center;}
.oem-schedule {border-top: 1px solid var(--color-border); margin-top: var(--space-8);}
.oem-schedule-intro {font-size: var(--text-sm); color: var(--color-text-muted); max-width: 90ch;}
.oem-cycle-fieldset {margin-top: var(--space-5);}
.oem-cycle-fieldset legend {font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2);}
.oem-timeline-result {margin-top: var(--space-5);}
.oem-empty-state {padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);}
.oem-empty-state strong {font-size: var(--text-base); font-weight: 500;}
.oem-empty-state p {font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 85ch;}
.oem-evidence-pending {font-size: var(--text-sm); color: var(--color-text-muted); padding-block: var(--space-6);}
.oem-timeline-heading {display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-5);}
.oem-timeline-heading span {color: var(--color-text-muted);}
.oem-timeline-rows {display: grid; gap: var(--space-4);}
.oem-timeline-row {display: grid; grid-template-columns: 180px 1fr 100px; gap: var(--space-4); align-items: center;}
.oem-timeline-row > span:first-child {font-size: var(--text-sm);}
.oem-timeline-track {position: relative; height: 24px; background: var(--color-surface-2);}
.oem-timeline-bar {position: absolute; inset-block: 8px; left: var(--start); width: var(--width); background: var(--color-primary);}
.oem-timeline-range {font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right;}
.oem-timeline-notes {font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-5);}
.limitations-section {padding-top: var(--space-16);}
.section-heading {display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6);}
.section-heading h2 {font-size: var(--text-xl); font-weight: 500; letter-spacing: -.03em; margin-top: var(--space-3);}
.section-id, .cutoff-label {color: var(--color-text-faint); white-space: nowrap;}
.limitations-grid {display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-10); border-top: 1px solid var(--color-border); padding-top: var(--space-6);}
.limitations-grid h3 {font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-3);}
.limitations-grid p, .limitations-grid li {font-size: var(--text-sm); color: var(--color-text-muted);}
.fermi-review-note {margin-top: var(--space-5); color: var(--color-copper) !important;}
.case-limitations {padding-left: var(--space-8); border-left: 1px solid var(--color-border);}
.case-limitations ul {padding-left: var(--space-4);}
.case-limitations li {padding-left: var(--space-1); margin-bottom: var(--space-2);}
.universal-boundary {margin-top: var(--space-6); font-size: var(--text-xs); padding-block: var(--space-4); border-block: 1px solid var(--color-border); color: var(--color-text-muted);}
.evidence-section {padding-top: var(--space-16);}
.section-intro {max-width: 85ch; color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6);}
.evidence-list {border-top: 1px solid var(--color-border);}
.evidence-item {display: grid; grid-template-columns: 110px 1fr 1.2fr; gap: var(--space-6); align-items: start; padding-block: var(--space-5); border-bottom: 1px solid var(--color-border);}
.evidence-item .source-type {color: var(--color-copper); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; padding-top: var(--space-1);}
.evidence-item a {font-size: var(--text-base); font-weight: 500; line-height: 1.4; display: inline-flex; align-items: start; gap: var(--space-4); text-decoration: none; min-height: 44px;}
.evidence-item a span {text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-border);}
.evidence-item a:hover {color: var(--color-primary);}
.evidence-item a > i {font-style: normal; font-size: var(--text-base);}
.evidence-item p {font-size: var(--text-sm); color: var(--color-text-muted);}
.evidence-domain {font-size: var(--text-xs); color: var(--color-text-faint); display: block; margin-top: var(--space-1);}
.milestone-note {padding-block: var(--space-5); display: flex; align-items: baseline; gap: var(--space-6); border-bottom: 1px solid var(--color-border);}
.milestone-note > strong {font-size: var(--text-sm); font-weight: 700; min-width: 180px;}
.milestone-note > p {font-size: var(--text-sm); color: var(--color-text-muted);}
.milestone-note a {text-underline-offset: 4px;}
.framework-section {display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-20); padding-top: var(--space-16);}
.framework-intro {padding-top: var(--space-3);}
.framework-intro > .eyebrow {color: var(--color-primary);}
.framework-intro h2 {font-size: var(--text-xl); font-weight: 500; letter-spacing: -.03em; margin-block: var(--space-4) var(--space-6); line-height: 1.2;}
.framework-intro > p:not(.eyebrow) {font-size: var(--text-sm); color: var(--color-text-muted); max-width: 45ch;}
.framework-intro > .framework-note {margin-top: var(--space-6); font-size: var(--text-xs) !important;}
.dimension-list {border-top: 1px solid var(--color-border);}
.dimension-list details {border-bottom: 1px solid var(--color-border);}
.dimension-list details summary {min-height: 55px; padding-inline: var(--space-1);}
.dimension-list details > p {font-size: var(--text-sm); color: var(--color-text-muted); padding: 0 var(--space-1) var(--space-5); max-width: 65ch;}
.closing-note {margin-top: var(--space-20); padding-block: var(--space-10); border-top: 1px solid var(--color-border); display: flex; align-items: end; justify-content: space-between; gap: var(--space-8);}
.closing-note > p {font-size: var(--text-xl); letter-spacing: -.03em; line-height: 1.25; font-weight: 500;}
.closing-note > p > span {color: var(--color-copper);}
.closing-note > span {font-size: var(--text-xs); letter-spacing: .12em; color: var(--color-text-faint);}
.site-footer {display: flex; justify-content: space-between; gap: var(--space-12); border-top: 1px solid var(--color-border); padding-block: var(--space-6) var(--space-8); color: var(--color-text-muted); font-size: var(--text-xs);}
.site-footer strong {font-weight: 700; color: var(--color-text);}
.site-footer p {margin-top: var(--space-2); max-width: 72ch;}
.site-footer > div:last-child {display: flex; flex-direction: column; gap: var(--space-2); text-align: right; flex-shrink: 0;}
.noscript-note {padding: var(--space-6); border: 1px solid var(--color-copper); margin-top: var(--space-4);}
@media (min-width: 1500px) {.page-width {padding-inline: var(--space-10);}}
@media (max-width: 1100px) {
  .demo-steps {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .case-tabs-expanded {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .edition-label {display: none;}
  .hero {grid-template-columns: 1.5fr 1fr; gap: var(--space-8);}
  .briefing-note {padding-left: var(--space-6);}
  .case-intro {grid-template-columns: 1fr 240px; gap: var(--space-6);}
  .authority-notice {align-items: start; gap: var(--space-3); flex-direction: column;}
  .authority-notice.review-incomplete .notice-label {max-width: none;}
  .dependency-workbench {grid-template-columns: 1.35fr 64px 1fr;}
  .prerequisite {grid-template-columns: 22px 1fr;}
  .prerequisite-state {display: none;}
  .prerequisite::after {width: 32px;}
  .join-summary {padding: var(--space-6);}
  .reference-layout {grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6);}
  .comparison-panel {padding: var(--space-4);}
  .chart-row {grid-template-columns: 115px 1fr;}
  .chart-axis {margin-left: calc(115px + var(--space-3) + var(--space-4) + 1px);}
  .chart-axis > span:nth-child(2), .chart-axis > span:nth-child(4) {visibility: hidden;}
  .range-chart figcaption {align-items: start; flex-direction: column; gap: var(--space-2);}
  .framework-section {gap: var(--space-12);}
}
@media (max-width: 800px) {
  .demo-steps {grid-template-columns: 1fr; gap: var(--space-3);}
  .demo-steps li {flex-direction: row; gap: var(--space-4); padding: var(--space-4);}
  .oem-section-heading {align-items: start; flex-direction: column; gap: var(--space-2);}
  .oem-section-heading > .small-label {text-align: left;}
  .oem-workstream:first-child {display: block;}
  .oem-workstream {padding: var(--space-5);}
  .oem-timeline-row {grid-template-columns: 145px 1fr 80px; gap: var(--space-3);}
  .site-header {gap: var(--space-4); min-height: 80px;}
  .main-nav {gap: var(--space-4);}
  .main-nav a {font-size: var(--text-xs);}
  .hero {grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-10);}
  .briefing-note {border-left: 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); padding: var(--space-5) 0 0;}
  .briefing-note .eyebrow {margin-bottom: var(--space-2); grid-column: 1;}
  .briefing-note > p:not(.eyebrow) {font-size: var(--text-base); grid-column: 1; grid-row: 2 / 4;}
  .briefing-meta {margin: 0; grid-column: 2; grid-row: 1 / 3; flex-direction: column; gap: 0;}
  .briefing-note .text-link {grid-column: 2; grid-row: 3; min-height: 36px;}
  .case-tabs button {padding: var(--space-4); gap: var(--space-3); min-height: 90px;}
  .case-tab-copy {display: flex; flex-direction: column; gap: var(--space-1);}
  .case-tab-copy > span {font-size: var(--text-xs);}
  .case-intro {grid-template-columns: 1fr; gap: var(--space-4);}
  .case-scope {border-left: 0; border-top: 1px solid var(--color-border); padding: var(--space-3) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4);}
  .case-scope > p, .case-scope > span:last-child {margin: 0;}
  .case-scope > .eyebrow {display: none;}
  .mode-descriptor {display: none;}
  .dependency-workbench {grid-template-columns: 1fr; gap: 0;}
  .inline-demo-status {display: block; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--color-primary-highlight); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; line-height: 1.5;}
  .prerequisite {grid-template-columns: 22px 1fr auto; min-height: 76px;}
  .prerequisite-state {display: block;}
  .prerequisite::after {display: none;}
  .join-connector {height: 60px;}
  .join-connector::before {top: 0; bottom: 0;}
  .join-connector::after {display: none;}
  .join-connector > span {writing-mode: initial; padding-inline: var(--space-3); padding-block: 0; white-space: nowrap;}
  .join-summary {display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-4); padding: var(--space-6);}
  .join-summary .eyebrow {grid-column: 2;}
  .join-state-symbol {grid-row: 1 / 4; margin: 0; align-self: start;}
  .join-summary h4 {grid-column: 2; margin-top: var(--space-2);}
  .join-summary > p:not(.eyebrow), .missing-block {grid-column: 2;}
  .missing-block {margin-top: var(--space-4);}
  .teaching-takeaway {grid-template-columns: 1fr; gap: var(--space-2);}
  .panel-heading > .small-label {display: none;}
  .reference-layout {grid-template-columns: 1fr;}
  .comparison-scroll-cue {display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3);}
  .range-chart figcaption {flex-direction: row; align-items: center;}
  .chart-row {grid-template-columns: 125px 1fr;}
  .chart-axis {margin-left: calc(125px + var(--space-3) + var(--space-4) + 1px);}
  .chart-axis > span:nth-child(2), .chart-axis > span:nth-child(4) {visibility: visible;}
  .selection-summary {border-left: 0; border-top: 1px solid var(--color-border); padding: var(--space-5) 0 0;}
  .selection-summary h4 {margin-block: var(--space-2);}
  .percentile-values {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);}
  .percentile-values > div {display: block; border-bottom: 0; padding-block: 0;}
  .percentile-values > div + div {border-left: 1px solid var(--color-border); padding-left: var(--space-4);}
  .percentile-values dd {margin-top: var(--space-1);}
  .sensitivity-note, .snapshot-provenance {grid-template-columns: 1fr; gap: var(--space-4);}
  .limitations-grid {grid-template-columns: 1fr; gap: var(--space-6);}
  .case-limitations {border-left: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border);}
  .section-id {display: none;}
  .evidence-section .section-heading {align-items: start; flex-direction: column; gap: var(--space-3);}
  .evidence-item {grid-template-columns: 80px 1fr; gap: var(--space-3) var(--space-4);}
  .evidence-item p {grid-column: 2;}
  .milestone-note {flex-direction: column; gap: var(--space-2);}
  .framework-section {grid-template-columns: 1fr; gap: var(--space-6);}
  .framework-intro h2 br {display: none;}
  .framework-intro > p:not(.eyebrow) {max-width: 70ch;}
  .framework-intro > .framework-note {margin-top: var(--space-3);}
  .site-footer {flex-direction: column; gap: var(--space-4);}
  .site-footer > div:last-child {text-align: left;}
}
@media (max-width: 480px) {
  .comparison-options {grid-template-columns: 1fr;}
  .case-tabs-expanded button {padding: var(--space-4) var(--space-3); gap: var(--space-2);}
  .case-tabs-expanded .case-arrow {display: none;}
  .case-tabs-expanded .case-tab-copy strong {font-size: var(--text-sm);}
  .release-review {padding-top: var(--space-4);}
  .release-review p {font-size: var(--text-xs);}
  .oem-workstreams {grid-template-columns: 1fr;}
  .oem-workstream:first-child {grid-column: auto;}
  .oem-scenario-note, .oem-workstream, .oem-empty-state {padding: var(--space-4);}
  .oem-section-heading h4 {font-size: var(--text-base); font-weight: 700;}
  .oem-timeline-row {grid-template-columns: 1fr 80px; gap: var(--space-2);}
  .oem-timeline-track {grid-column: 1 / -1; grid-row: 2;}
  .oem-timeline-range {grid-column: 2; grid-row: 1;}
  .main-nav {display: none;}
  .brand-name {font-size: var(--text-base);}
  .brand-mark {width: 36px; height: 36px;}
  .brand-name > span {font-size: var(--text-xs);}
  .hero-copy .eyebrow {margin-bottom: var(--space-4);}
  .hero-description {font-size: var(--text-sm);}
  .briefing-note {column-gap: var(--space-4);}
  .briefing-note > p:not(.eyebrow) {font-size: var(--text-sm);}
  .briefing-note .eyebrow {font-size: var(--text-xs); letter-spacing: .05em;}
  .briefing-meta {font-size: var(--text-xs);}
  .briefing-note .text-link {font-size: var(--text-xs); gap: var(--space-2);}
  .section-kicker > span:last-child {display: none;}
  .case-tabs {gap: var(--space-2);}
  .case-tabs button {padding: var(--space-4) var(--space-3); gap: var(--space-2);}
  .case-index {display: none;}
  .case-arrow {font-size: var(--text-base);}
  .case-intro {padding-top: var(--space-6);}
  .case-heading-line h2 {font-size: var(--text-lg);}
  .mode-tabs {width: 100%; justify-content: space-between; gap: var(--space-3);}
  .mode-tabs button {font-size: var(--text-base); padding-inline: var(--space-3); flex: 1; min-height: 68px; white-space: normal;}
  .mode-tabs .mode-dot {display: none;}
  .mode-tabs {gap: var(--space-2);}
  .mode-guidance {padding: var(--space-4);}
  .demo-coach {grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4);}
  .workspace-panel {padding: var(--space-4);}
  .panel-heading {flex-wrap: wrap; gap: var(--space-4);}
  .panel-heading h3 {font-size: var(--text-lg); font-weight: 700;}
  .preset-buttons {gap: var(--space-2);}
  .preset-buttons button {padding-inline: var(--space-3); font-size: var(--text-xs);}
  .prerequisite {grid-template-columns: 20px 1fr; padding: var(--space-3); gap: var(--space-3);}
  .prerequisite-state {display: none;}
  .join-summary {padding: var(--space-5) var(--space-4); grid-template-columns: 24px 1fr; column-gap: var(--space-3);}
  .join-state-symbol {width: 24px; height: 24px;}
  .join-state-symbol::before, .join-state-symbol::after {left: 5px;}
  .join-state-symbol::before {top: 9px;}
  .join-state-symbol::after {top: 14px;}
  .all-selected .join-state-symbol::before {left: 4px; top: 6px;}
  .range-chart figcaption {align-items: start; flex-direction: column; gap: var(--space-3);}
  .chart-row {grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3); min-height: 82px;}
  .chart-row-name {font-size: var(--text-sm);}
  .chart-axis {margin-left: calc(var(--space-3) + 1px); margin-top: var(--space-3);}
  .chart-axis > span {font-size: var(--text-xs);}
  .chart-axis > span:nth-child(2), .chart-axis > span:nth-child(4) {visibility: hidden;}
  .chart-explanation {margin-top: var(--space-6);}
  .percentile-values {gap: var(--space-2);}
  .percentile-values > div + div {padding-left: var(--space-2);}
  .percentile-values dd {font-size: var(--text-base); font-weight: 700;}
  .reference-table {font-size: var(--text-xs);}
  .table-scroll-cue {display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2);}
  .reference-table td, .reference-table th {padding: var(--space-3) var(--space-2);}
  .reference-table th:first-child {min-width: 114px;}
  .sensitivity-note {padding: var(--space-4);}
  .limitations-section, .evidence-section, .framework-section {padding-top: var(--space-12);}
  .section-heading h2, .framework-intro h2 {font-size: var(--text-lg); font-weight: 700;}
  .evidence-item {grid-template-columns: 1fr; gap: var(--space-2);}
  .evidence-item p {grid-column: 1;}
  .evidence-item a {min-height: 44px;}
  .closing-note {margin-top: var(--space-12); align-items: start; flex-direction: column; gap: var(--space-4);}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;}
}
@media print {
  .site-header, .hero, .case-tabs, .mode-row, .preset-fieldset, #demo-panel, .theme-toggle, .closing-note {display: none !important;}
  body {background: white; color: #17262e;}
  .page-width {max-width: none; padding-inline: 0;}
  #reference-panel[hidden] {display: block !important;}
  html[data-case-family="oem"] #reference-panel {display: none !important;}
  .workspace-panel {border: 0; padding: 0;}
  .reference-layout {display: block;}
  .selection-summary {display: none;}
  .limitations-section, .evidence-section, .framework-section {padding-top: var(--space-6);}
  .evidence-item a::after {content: " (" attr(href) ")"; font-size: var(--text-xs); overflow-wrap: anywhere;}
  .evidence-item {display: block;}
}