/* ReGFLoW project page. Plain CSS; no build step, external fonts, or framework required.
   Palette, spacing, and widths can be adjusted here without changing the HTML. */
:root {
  --ink: #192237;
  --muted: #586275;
  --soft: #718096;
  --accent: #5849c8;
  --accent-deep: #4337a1;
  --teal: #187b75;
  --line: #dfe4ef;
  --paper: #ffffff;
  --tint: #f7f8fc;
  --ours: #eeecfb;
  --max: 1200px;
  --radius: 22px;
  --shadow: 0 16px 54px -32px rgba(25,34,55,.23);
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 86px;}
body {margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;}
::selection {background: #dedaf9; color: #271c6e;}
a {color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px;}
a:hover {color: var(--accent-deep);}
button, input {font: inherit;}
button {cursor: pointer;}
button:disabled {cursor: not-allowed;}
:focus-visible {outline: 3px solid var(--teal); outline-offset: 4px;}
h1, h2, h3, p, figure {margin: 0;}
h1, h2, h3 {line-height: 1.16;}
strong {font-weight: 700;}
img {display: block; max-width: 100%; height: auto;}
[hidden] {display: none !important;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.skip-link {position: fixed; left: 16px; top: -100px; padding: 10px 20px; background: var(--ink); color: white; z-index: 1000;}
.skip-link:focus {top: 12px; color: white;}
.container {width: min(var(--max), calc(100% - 72px)); margin-inline: auto;}
.container.narrow {max-width: 990px;}
.section {padding: 84px 0;}
.section-tint {background: var(--tint); border-block: 1px solid #edf0f6;}
.section-heading {max-width: 850px; margin-bottom: 38px;}
.section-heading.compact {margin-bottom: 28px;}
.eyebrow {font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px;}
h2 {font-size: clamp(30px, 3.35vw, 46px); letter-spacing: -.035em; font-weight: 700;}
.section-heading > p:not(.eyebrow) {margin-top: 20px; font-size: 17px; color: var(--muted); line-height: 1.75; max-width: 800px;}
h3 {font-size: 24px; letter-spacing: -.025em;}
.gradient-text {color: var(--accent); background: linear-gradient(110deg,#6550cd 8%,#336e9d 70%,#187b75 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.reading-progress {position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; pointer-events: none;}
.reading-progress span {display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--accent),var(--teal)); transform: scaleX(0); transform-origin: left;}
.site-header {position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid #eaeef5;}
.nav-shell {max-width: 1336px; padding: 15px 36px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px;}
.brand {display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -.04em; white-space: nowrap;}
.brand-mark {height: 29px; width: 29px; display: inline-grid; place-items: center; border-radius: 9px; background: linear-gradient(140deg,#6e57c9,#25777b); color: white; font-size: 17px; font-weight: 700; line-height: 1;}
.brand-divider {color: #c7cbd8; font-weight: 400; margin-inline: 3px;}
.brand-note {font-size: 12px; font-weight: 400; color: var(--soft); letter-spacing: 0;}
.nav-links {display: flex; align-items: center; gap: 28px;}
.nav-links a {font-size: 12px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap;}
.nav-links a:hover,.nav-links a[aria-current="location"] {color: var(--accent);}
.menu-toggle {display: none; padding: 6px 12px; border: 1px solid var(--line); background: white; border-radius: 9px; color: var(--ink); font-size: 13px;}
.hero {padding: 72px 0 50px; background: radial-gradient(ellipse at 30% 0%,rgba(100,83,205,.065),transparent 55%), radial-gradient(ellipse at 90% 65%,rgba(27,128,115,.045),transparent 45%), #fff; text-align: center;}
.hero-inner {max-width: 1120px;}
.hero .eyebrow {display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 24px; color: #636078; font-size: 10px;}
.status-dot {width: 6px; height: 6px; border-radius: 50%; background: var(--teal);}
.hero-main {display: block; font-size: clamp(42px, 4.8vw, 67px); font-weight: 750; line-height: 1.1; letter-spacing: -.047em;}
.hero-subtitle {display: block; font-size: clamp(22px, 2.25vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -.027em; margin-top: 19px;}
.authors {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; font-size: 16px; font-weight: 500;}
.author {white-space: nowrap;}
.author a {text-decoration: none; color: var(--ink);}
.author a:hover {color: var(--accent);}
.author sup {font-size: 10px; margin-left: 2px; color: var(--accent);}
.affiliations {display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 23px; margin-top: 9px; color: var(--muted); font-size: 13px;}
.affiliations sup {font-size: 9px; margin-right: 3px;}
.author-note {font-size: 11px; color: var(--soft); margin-top: 5px;}
.venue {margin: 15px 0 -5px; font-weight: 700; color: var(--accent);}
.resource-links {display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 24px 0;}
.button {display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 10px 19px; border-radius: 9px; border: 1px solid var(--line); background: white; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.5; color: var(--ink); transition: transform .15s, box-shadow .15s;}
.button:hover {transform: translateY(-2px); box-shadow: var(--shadow); color: var(--accent);}
.button-primary {background: var(--ink); border-color: var(--ink); color: white;}
.button-primary:hover {color: white; background: #2c3550;}
.button-disabled {background: #f5f6f9; color: #788093; border-color: #e8ebf2; font-weight: 400; cursor: default;}
.button svg {width: 15px; height: 15px; flex-shrink: 0;}
.hero-tagline {font-size: 17px; color: var(--muted); line-height: 1.65; margin-top: 30px;}
.hero-tagline strong {color: #394153;}
.hero-tags {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 21px;}
.hero-tags span {font-size: 10px; letter-spacing: .01em; padding: 4px 10px; border: 1px solid #e4e8f2; border-radius: 6px; color: #677084; background: rgba(255,255,255,.75);}
.story-link {display: inline-flex; align-items: center; gap: 15px; margin-top: 36px; font-size: 11px; color: #697284; text-decoration: none;}
.story-link span {font-size: 18px;}
.context-section {padding-top: 48px; padding-bottom: 32px;}
.context-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px;}
.context-card {border: 1px solid var(--line); border-radius: 15px; padding: 26px; display: flex; flex-direction: column; background: #fff;}
.step-label {font-size: 10px; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; font-weight: 700;}
.context-card h3 {font-size: 23px; margin: 13px 0 12px;}
.context-card p {font-size: 14px; color: var(--muted); line-height: 1.8; flex: 1;}
.card-bottom {font-size: 10px; display: block; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--line); color: #6d7383;}
.context-card-accent {background: #f6f5fc; border-color: #dfdaf2;}
.context-card-accent .step-label,.context-card-accent h3 {color: var(--accent);}
.question-section {padding: 32px 0 28px;}
.question-panel {position: relative; overflow: hidden; border: 1px solid #d9d5f0; border-radius: var(--radius); padding: 55px 50px 46px; text-align: center; background: radial-gradient(ellipse at 100% 5%,rgba(121,103,212,.12),transparent 52%),linear-gradient(120deg,#f6f5fe,#fafaff 56%,#f0f8f7); box-shadow: var(--shadow);}
.question-panel > *:not(.question-watermark) {position: relative;}
.question-panel .eyebrow {margin-bottom: 20px;}
.question-panel h2 {font-size: clamp(29px, 3.2vw, 45px); line-height: 1.3; letter-spacing: -.04em;}
.question-panel h2 span {color: var(--accent);}
.question-sub {color: #6a6982; margin-top: 20px; font-size: 14px;}
.question-watermark {position: absolute; top: -40px; right: 25px; font-size: 295px; font-weight: 700; line-height: 1; color: rgba(98,83,180,.045);}
.answer-cue {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 29px; color: #5d5b76; font-size: 13px;}
.answer-pill {display: inline-block; background: white; padding: 6px 15px; border: 1px solid #dedaf1; color: var(--accent); font-weight: 700; border-radius: 999px;}
.insight-section {padding-top: 32px;}
.insight-panel {position: relative; border: 1px solid #e2e0ed; border-radius: var(--radius); background: linear-gradient(155deg,#fffaf3,#fff 45%,#f5f6ff); padding: 45px 44px 33px; box-shadow: var(--shadow); overflow: hidden;}
.insight-panel::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#e1b381,#8771d4,#6bafa8);}
.insight-copy {max-width: 890px;}
.insight-copy h2 {font-size: clamp(30px, 3.5vw, 48px);}
.lead {font-size: 17px; color: #4d5463; line-height: 1.85; margin-top: 25px;}
.claim-scope {font-size: 11px; color: #707383; margin-top: 17px; max-width: 870px;}
.claim-scope a {white-space: nowrap;}
.paper-figure {background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px -22px rgba(30,35,58,.15);}
.figure-link {display: block; position: relative; padding: 26px; cursor: zoom-in; color: inherit;}
.figure-link img {width: 100%; height: auto;}
.zoom-hint {position: absolute; right: 14px; top: 13px; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; border-radius: 5px; border: 1px solid #e1e5ed; background: rgba(255,255,255,.96); color: #555d72; padding: 3px 8px; opacity: 0; transform: translateY(-3px); transition: opacity .2s,transform .2s; box-shadow: 0 2px 12px #dfe3ed;}
.figure-link:hover .zoom-hint,.figure-link:focus-visible .zoom-hint {opacity: 1; transform: none;}
figcaption {padding: 18px 24px; background: #fbfcfe; border-top: 1px solid #e8ecf4; font-size: 12px; line-height: 1.8; color: var(--muted);}
.fig-label {display: inline-block; text-transform: uppercase; font-size: 9px; letter-spacing: .09em; font-weight: 700; padding: 2px 8px; margin-right: 8px; border: 1px solid #dee3ee; border-radius: 4px; color: var(--accent); background: white;}
.source-link {font-size: 11px; white-space: nowrap; text-decoration: none;}
.inset-figure {margin-top: 30px;}
.mechanism-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; margin-top: 26px;}
.mechanism-grid > div + div {border-left: 1px solid #dedeea; padding-left: 25px;}
.mini-label {font-size: 10px; color: #76738a; text-transform: uppercase; letter-spacing: .06em;}
.mechanism-grid p {font-size: 13px; line-height: 1.7; margin-top: 6px;}
.signature-line {font-size: clamp(20px,2.1vw,28px); text-align: center; padding: 28px 0 0; margin-top: 28px; border-top: 1px solid #e1deee; letter-spacing: -.025em; color: #45405f;}
.signature-line strong {color: var(--accent);}
.context-note {max-width: 950px; color: #758093; font-size: 12px; line-height: 1.85; margin: 19px auto 0; text-align: center;}
.novelty-banner {display: flex; align-items: center; gap: 30px; margin-bottom: 32px; border: 1px solid #d9d2ee; border-radius: 17px; padding: 29px 34px; background: linear-gradient(120deg,#eeebfb,#f6f4ff 58%,#eef7f5);}
.novelty-number {font-size: 63px; font-weight: 700; line-height: 1; color: #7d6bc1; letter-spacing: -.075em; padding-right: 29px; border-right: 1px solid #d4cce8;}
.novelty-banner .eyebrow {margin-bottom: 9px; font-size: 9px;}
.novelty-banner h3 {font-size: 24px; max-width: 920px; line-height: 1.35;}
.novelty-banner p:not(.eyebrow) {font-size: 12px; color: #65627b; margin-top: 12px;}
.contrast-strip {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 17px; padding: 26px 20px 0; color: #6c7488; font-size: 13px;}
.contrast-strip s {text-decoration-color: #aca8be;}
.contrast-strip strong {color: var(--teal);}
.acronym {font-size: 16px !important; color: var(--ink) !important; margin-top: 14px !important;}
.acronym strong {color: var(--accent);}
.method-tags {display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 26px;}
.method-tags span {padding: 5px 12px; font-size: 11px; border: 1px solid #e4dfef; background: #f7f5fb; border-radius: 6px; color: #665a8c;}
.framework-figure .figure-link {padding: 35px 65px;}
.method-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 28px 0;}
.method-card {padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff;}
.step-index {display: inline-grid; place-items: center; width: 30px; height: 30px; font-size: 11px; border-radius: 8px; background: #f0edf9; color: var(--accent); font-weight: 700;}
.method-card h3 {font-size: 20px; margin: 18px 0 12px; line-height: 1.3;}
.method-card p {font-size: 13px; color: var(--muted); line-height: 1.85;}
.formula {padding-top: 17px; margin-top: 18px; border-top: 1px solid #e7e8ef; color: #51427c; font-family: Georgia, 'Times New Roman',serif; font-size: 17px; line-height: 1.9;}
.formula-note {display: block; font-family: Arial,Helvetica,sans-serif; font-size: 10px; color: var(--soft);}
.detail-block {border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; overflow: hidden;}
.detail-block summary {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 23px; cursor: pointer; font-size: 13px; font-weight: 600; color: #444f64; background: #fafbfd; list-style: none;}
.detail-block summary::-webkit-details-marker {display: none;}
.detail-block summary span {font-size: 21px; font-weight: 400; color: var(--accent); transition: transform .2s;}
.detail-block[open] summary {border-bottom: 1px solid var(--line);}
.detail-block[open] summary span {transform: rotate(45deg);}
.detail-body {padding: 24px; color: var(--muted); font-size: 14px; line-height: 1.9;}
.detail-body p + p {margin-top: 15px;}
.detail-body .small-note {font-size: 12px; background: #f7f5fc; padding: 13px 17px; border-radius: 8px;}
.metrics-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 24px;}
.metric-card {position: relative; background: white; border: 1px solid #dedfeb; border-radius: 14px; text-decoration: none; padding: 26px; display: flex; flex-direction: column; color: var(--ink); box-shadow: var(--shadow);}
.metric-card:hover {border-color: #afa5d4; color: var(--ink);}
.metric-kicker {font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; color: #78738d;}
.metric-value {display: block; font-size: 52px; line-height: 1.1; letter-spacing: -.06em; font-weight: 700; color: var(--accent); margin: 17px 0 12px; font-variant-numeric: tabular-nums;}
.metric-unit {font-size: 23px; margin-left: 3px; color: #a099bc; font-weight: 400;}
.metric-detail {font-size: 12px; color: #657084;}
.metric-detail strong {color: var(--ink);}
.metric-source {font-size: 10px; color: var(--accent); margin-top: 16px;}
.protocol-note {display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 19px; padding: 16px 20px; background: #eeeef7; border: 1px solid #e1e1ee; border-radius: 11px; font-size: 11px; color: #65657c; margin-bottom: 36px;}
.protocol-note > strong {color: #45425e;}
.result-block {margin-top: 31px; padding: 31px; background: white; border: 1px solid var(--line); border-radius: 17px; overflow: hidden;}
.result-block-featured {border-color: #c7bedf; box-shadow: 0 0 0 3px rgba(104,79,172,.025);}
.result-heading {display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 15px;}
.result-heading .eyebrow {font-size: 9px; margin-bottom: 10px;}
.result-heading h3 {font-size: clamp(20px,2vw,27px); line-height: 1.25;}
.setting-badge {font-size: 10px; color: #706689; border: 1px solid #e3dded; border-radius: 6px; padding: 5px 10px; background: #faf8fd; white-space: nowrap; flex-shrink: 0;}
.result-block > p {font-size: 14px; color: var(--muted); margin-bottom: 23px; line-height: 1.8; max-width: 1000px;}
.table-shell {width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #e4e7ee; border-radius: 9px; -webkit-overflow-scrolling: touch;}
.results-table {border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.5; text-align: center;}
.results-table caption {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);}
.results-table th, .results-table td {padding: 10px 8px; border-bottom: 1px solid #e7eaf1; background: white; vertical-align: middle; white-space: nowrap; font-weight: 400;}
.results-table thead th {background: #f7f8fc; font-weight: 600; color: #435067;}
.results-table thead tr:first-child th {padding-block: 12px;}
.results-table thead tr:last-child th {border-bottom: 1px solid #b7bfd1;}
.results-table .method-col {text-align: left; min-width: 163px; padding-left: 16px; position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #e4e7ee;}
.results-table .method-ref {font-size: 10px; color: #7f7998; font-weight: 400; margin-left: 4px; text-decoration: none; white-space: nowrap;}
.results-table .method-ref:hover {color: var(--accent); text-decoration: underline;}
.results-table thead .method-col {z-index: 3;}
.results-table .group-row th {text-align: left; background: #f2f4f8; color: #758096; font-size: 10px; font-weight: 500; font-style: italic; letter-spacing: .02em; padding: 7px 16px; border-top: 1px solid #e0e4ec;}
.results-table .ours-row td,.results-table .ours-row th {background: var(--ours); color: #49378b;}
.results-table .ours-row .method-col {font-weight: 700;}
.results-table .ours-tag {font-size: 10px; margin-left: 3px; font-weight: 400; color: #8677ad;}
.results-table tbody tr:not(.group-row):not(.ours-row):hover td,.results-table tbody tr:not(.group-row):not(.ours-row):hover th {background: #fafbfe;}
.results-table strong {font-weight: 750;}
.results-table .group-start {border-left: 1px solid #cdd4e1;}
.results-table .average-col {background: #fafafe;}
.results-table .ours-row .average-col {background: #e5e0f6;}
.results-table .ood-col {background: #f3f5fa;}
.results-table .ours-row .ood-col {background: #ded7f4;}
.results-table tbody tr:last-child td,.results-table tbody tr:last-child th {border-bottom: 0;}
.table-wide {min-width: 1090px; font-size: 11px;}
.table-wide th,.table-wide td {padding: 9px 7px;}
.table-wide .method-col {min-width: 153px;}
.table-mid {min-width: 770px;}
.table-three {min-width: 600px; font-size: 14px;}
.table-three th,.table-three td {padding: 14px 22px;}
.table-three .method-col {width: 34%; min-width: 190px;}
.table-three .group-start {border-left: 2px solid #c8cfdc;}
.table-three .group-row th {padding: 9px 22px;}
.table-three thead th {font-size: 12px;}
.table-three tbody td {font-size: 15px;}
.table-ablation {min-width: 705px;}
.table-ablation .method-col {min-width: 210px;}
.table-domain {min-width: 835px;}
.table-domain .method-col {min-width: 95px;}
.delta-positive {color: #2c7b6c; font-size: 10px; margin-left: 4px;}
.delta-negative {color: #9a6961; font-size: 10px; margin-left: 4px;}
.check-yes {color: #357568; font-weight: 700;}
.check-no {color: #8590a4;}
.table-footer {display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-top: 14px; color: #7a8293; font-size: 10px; line-height: 1.8;}
.table-footer span {max-width: 880px;}
.table-footer a {white-space: nowrap; text-decoration: none;}
.qualitative-figure .figure-link {padding: 35px 55px;}
.takeaway-section {padding-top: 30px;}
.takeaway-panel {text-align: center; padding: 63px 75px 49px; border: 1px solid #d7dce9; border-radius: var(--radius); background: radial-gradient(ellipse at 20% 0%,#efebfb,transparent 70%),radial-gradient(ellipse at 100% 100%,#e9f3f1,transparent 70%),#f8f9fc;}
.takeaway-panel h2 {font-size: clamp(28px,3.1vw,43px); line-height: 1.32; max-width: 1010px; margin: 0 auto 26px;}
.takeaway-panel h2 em {font-family: Georgia,'Times New Roman',serif; color: var(--accent); font-weight: 500;}
.takeaway-panel > p:not(.eyebrow) {font-size: 15px; line-height: 1.85; color: #5e6475; max-width: 830px; margin: 15px auto 0;}
.takeaway-rule {height: 1px; width: 80px; background: #c6bddf; margin: 33px auto;}
.takeaway-panel .takeaway-signature {font-size: clamp(23px,2.5vw,34px) !important; line-height: 1.45 !important; letter-spacing: -.02em; color: #5a5377 !important;}
.takeaway-signature strong {color: var(--accent);}
.takeaway-panel .takeaway-scope {font-size: 11px !important; color: #868498 !important; margin-top: 21px !important;}
.citation-section {padding-top: 5px; padding-bottom: 65px;}
.citation-box {border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #f8f9fc;}
.citation-toolbar {display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #f0f2f7; color: #6b7384; font-size: 11px;}
.copy-button {border: 1px solid #d7dce6; border-radius: 6px; background: white; padding: 5px 11px; font-size: 10px; color: var(--ink);}
.copy-button:hover {border-color: var(--accent); color: var(--accent);}
pre {margin: 0; padding: 25px; overflow-x: auto;}
pre code {font: 12px/1.9 'SFMono-Regular',Consolas,'Liberation Mono',monospace; color: #4b5271; white-space: pre-wrap; overflow-wrap: anywhere;}
.copy-feedback {min-height: 20px; font-size: 11px; color: var(--teal); margin-top: 6px;}
.site-footer {border-top: 1px solid var(--line); background: #fafbfd; padding: 32px 0;}
.footer-inner {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.footer-inner .brand {font-size: 16px;}
.footer-inner .brand-mark {width: 24px; height: 24px; font-size: 14px; border-radius: 7px;}
.footer-inner p {font-size: 10px; color: #8990a0; line-height: 1.8;}
.footer-inner > div > p {margin-top: 7px;}
.footer-inner p a {color: #706584;}
.back-top {font-size: 11px; text-decoration: none; white-space: nowrap;}
.lightbox {width: min(1480px,96vw); max-width: 96vw; max-height: 94vh; margin: auto; padding: 0; background: white; border: 1px solid #d5d9e5; border-radius: 14px; box-shadow: 0 30px 100px #10172b66; color: var(--ink);}
.lightbox::backdrop {background: rgba(20,23,40,.8); backdrop-filter: blur(3px);}
.lightbox-toolbar {padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; background: #f5f7fc; border-bottom: 1px solid var(--line);}
.lightbox-toolbar button {font-size: 12px; background: white; border: 1px solid #d8deeb; border-radius: 7px; padding: 5px 13px;}
.lightbox-image-wrap {padding: 24px; overflow: auto; max-height: 72vh; display: flex; justify-content: center;}
.lightbox-image-wrap img {width: auto; height: auto; object-fit: contain; max-height: 66vh; max-width: 100%;}
.lightbox-bottom {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 11px; color: #72798b;}
.lightbox-bottom a {white-space: nowrap;}
body.dialog-open {overflow: hidden;}
@media (min-width: 1450px) {.hero {padding-top: 86px;} .hero-main {font-size: 70px;} }
@media (max-width: 1024px) {
  .container {width: calc(100% - 48px);} .section {padding-block: 62px;}
  .nav-shell {padding-inline: 24px;} .nav-links {gap: 18px;} .brand-note,.brand-divider {display: none;}
  .hero {padding-top: 52px;} .context-section {padding-top: 35px; padding-bottom: 24px;} .question-section {padding: 24px 0;} .insight-section {padding-top: 24px;}
  .context-card,.method-card {padding: 21px;} .context-card h3 {font-size: 21px;}
  .insight-panel {padding: 35px 30px 28px;} .question-panel {padding: 42px 25px;}
  .framework-figure .figure-link {padding: 25px 35px;} .result-block {padding: 26px;}
  .metric-card {padding: 22px;} .metric-value {font-size: 46px;} .takeaway-panel {padding: 48px 42px;}
  .takeaway-section {padding-top: 20px;} .citation-section {padding-top: 0;}
}
@media (max-width: 760px) {
  html {scroll-padding-top: 75px;}
  .container {width: calc(100% - 32px);} .section {padding-block: 46px;}
  .nav-shell {padding: 12px 16px; min-height: 60px; flex-wrap: wrap; gap: 10px;}
  .brand {font-size: 17px;}
  .nav-links {width: 100%; gap: 19px; overflow-x: auto; padding: 9px 0 5px;}
  .nav-links a {font-size: 11px;}
  .has-js .menu-toggle {display: inline-block;}
  .has-js .nav-links:not(.is-open) {display: none;}
  .hero {padding-top: 40px; padding-bottom: 29px;}
  .hero .eyebrow {font-size: 8px; letter-spacing: .12em; margin-bottom: 21px;}
  .hero-main {font-size: clamp(35px,7.2vw,50px); letter-spacing: -.05em;}
  .hero-subtitle {font-size: clamp(19px,4vw,25px); margin-top: 15px; line-height: 1.45;}
  .authors {gap: 7px 14px; font-size: 13px; margin-top: 24px;}
  .affiliations {font-size: 11px; gap: 6px 12px;}
  .author-note {font-size: 10px;}
  .resource-links {gap: 7px; margin: 20px 0;} .button {font-size: 11px; padding: 9px 13px; border-radius: 8px;}
  .hero-tagline {font-size: 14px; margin-top: 22px;}
  .hero-tags {gap: 6px; margin-top: 16px;}
  .hero-tags span {font-size: 9px; padding: 3px 7px;}
  .story-link {margin-top: 23px; font-size: 10px;}
  .context-section {padding-top: 31px; padding-bottom: 16px;}
  .section-heading {margin-bottom: 27px;}
  h2 {font-size: 30px;} .eyebrow {font-size: 9px; margin-bottom: 13px;}
  .section-heading > p:not(.eyebrow) {font-size: 15px; margin-top: 16px;}
  .context-grid,.method-grid {grid-template-columns: 1fr; gap: 12px;}
  .context-card {padding: 23px;} .context-card h3 {font-size: 22px; margin: 9px 0;}
  .context-card p {font-size: 13px;} .card-bottom {margin-top: 15px; padding-top: 11px; font-size: 9px;}
  .question-section {padding-block: 17px;} .question-panel {padding: 35px 23px; border-radius: 17px;}
  .question-panel h2 {font-size: clamp(26px,5.5vw,36px);}
  .question-panel h2 br {display: none;}
  .question-sub {font-size: 12px; margin-top: 17px;}
  .question-watermark {font-size: 245px; right: -5px; top: -16px;}
  .answer-cue {gap: 10px; font-size: 11px; margin-top: 22px; flex-direction: column;}
  .insight-section {padding-top: 18px;} .insight-panel {padding: 30px 20px 25px; border-radius: 17px;}
  .insight-copy h2 {font-size: 31px;} .insight-copy h2 br {display: none;}
  .lead {font-size: 15px; line-height: 1.85; margin-top: 20px;}
  .claim-scope {font-size: 10px;} .claim-scope a {white-space: normal;}
  .figure-link {padding: 16px;} .framework-figure .figure-link,.qualitative-figure .figure-link {padding: 15px;}
  figcaption {font-size: 11px; padding: 14px 16px;}
  .zoom-hint {font-size: 8px; padding: 2px 5px; opacity: .95; right: 7px; top: 5px; transform: none;}
  .fig-label {font-size: 8px; padding: 2px 6px;} .source-link {font-size: 10px; white-space: normal;}
  .mechanism-grid {grid-template-columns: 1fr; gap: 15px; margin-top: 22px;}
  .mechanism-grid > div + div {border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px solid #e1deed;}
  .mini-label {font-size: 9px;} .mechanism-grid p {font-size: 12px; margin-top: 4px;}
  .signature-line {font-size: 22px; line-height: 1.5; margin-top: 23px; padding-top: 23px;}
  .context-note {font-size: 10px; text-align: left; margin-top: 15px; padding: 0 3px;}
  .novelty-banner {padding: 23px; gap: 18px; align-items: flex-start; border-radius: 14px;}
  .novelty-number {font-size: 37px; padding-right: 16px;}
  .novelty-banner h3 {font-size: 20px; line-height: 1.4;}
  .novelty-banner p:not(.eyebrow) {font-size: 11px;}
  .contrast-strip {font-size: 11px; gap: 8px; flex-direction: column; text-align: center;}
  .method-tags {margin-top: -5px; margin-bottom: 22px;} .method-tags span {font-size: 10px;}
  .method-card {padding: 24px;} .method-card h3 {margin-top: 13px;} .method-card p {font-size: 13px;}
  .detail-block summary {padding: 15px 17px; font-size: 12px;} .detail-body {padding: 18px; font-size: 13px;}
  .metrics-grid {grid-template-columns: 1fr; gap: 12px;}
  .metric-card {padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;}
  .metric-kicker {font-size: 9px;} .metric-value {grid-column: 2; grid-row: 1 / 4; font-size: 43px; margin: 0;}
  .metric-detail {font-size: 10px; margin-top: 6px; max-width: 210px;}
  .metric-source {font-size: 9px; margin-top: 7px;} .metric-unit {font-size: 19px;}
  .protocol-note {font-size: 10px; flex-direction: column; gap: 5px; padding: 15px 18px; margin-bottom: 23px;}
  .result-block {padding: 23px 16px; border-radius: 13px; margin-top: 23px;}
  .result-heading {flex-direction: column; align-items: flex-start; gap: 12px;}
  .result-heading h3 {font-size: 23px;} .result-heading .eyebrow {font-size: 8px;}
  .setting-badge {font-size: 9px; padding: 3px 7px;}
  .result-block > p {font-size: 13px; margin-bottom: 19px;}
  .results-table .method-col {min-width: 130px; padding-left: 12px;}
  .table-three .method-col {min-width: 165px;}
  .table-three {min-width: 560px; font-size: 12px;} .table-three th,.table-three td {padding-inline: 15px;}
  .table-footer {font-size: 9px; flex-direction: column; gap: 6px;}
  .takeaway-section {padding-top: 10px;} .takeaway-panel {padding: 37px 25px; border-radius: 17px;}
  .takeaway-panel h2 {font-size: 28px;} .takeaway-panel h2 br {display: none;}
  .takeaway-panel > p:not(.eyebrow) {font-size: 13px;}
  .takeaway-panel .takeaway-signature {font-size: 24px !important;}
  .citation-section {padding-top: 3px; padding-bottom: 30px;}
  pre {padding: 17px;} pre code {font-size: 10px;}
  .footer-inner {flex-direction: column; text-align: center; gap: 20px;} .footer-inner p {font-size: 9px;}
  .lightbox-image-wrap {padding: 10px;} .lightbox-bottom {flex-direction: column; gap: 7px; align-items: flex-start; padding: 12px; font-size: 10px;}
}
@media (max-width: 380px) {
  .container {width: calc(100% - 24px);} .hero-main {font-size: 33px;}
  .hero .eyebrow {font-size: 7px;} .desktop-break {display: none;}
  .metric-value {font-size: 35px;} .metric-detail {max-width: 160px;}
  .novelty-number {display: none;} .insight-copy h2 {font-size: 28px;}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *,*::before,*::after {animation: none !important; transition: none !important;}
}
@media print {
  .site-header,.reading-progress,.story-link,.zoom-hint,.menu-toggle,.copy-button,.back-top,.lightbox,.resource-links {display: none !important;}
  .container {width: 100%; max-width: none;}
  body {font-size: 11px;}
  .hero {padding-top: 15px;} .hero-main {font-size: 38px;}
  .section {padding-block: 25px;}
  h2 {font-size: 26px;}
  .result-block,.paper-figure,.question-panel,.insight-panel,.takeaway-panel {box-shadow: none; break-inside: avoid;}
  .table-shell {overflow: visible;}
  .results-table {min-width: 0; font-size: 7px;}
  .results-table th,.results-table td {padding: 4px;}
  .results-table .method-col {position: static; min-width: 0;}
  .gradient-text {-webkit-text-fill-color: var(--accent); background: none;}
}

/* --- Final revision: quieter palette, larger typography, and simplified emphasis --- */
:root {
  --ink: #171717;
  --muted: #4f4f4f;
  --soft: #6a6a6a;
  --accent: #8a3131;
  --accent-deep: #682525;
  --teal: #355b58;
  --line: #dddddd;
  --tint: #f6f6f4;
  --ours: #f4f4f4;
  --shadow: 0 12px 36px -24px rgba(0,0,0,.18);
}
html {scroll-padding-top: 92px;}
body {font-size: 17px; line-height: 1.78; color: var(--ink);}
a {color: var(--ink);} 
a:hover {color: var(--accent-deep);} 
.eyebrow {font-size: 14px; color: #666; margin-bottom: 14px;}
h2 {font-size: clamp(34px, 3.3vw, 48px);}
h3 {font-size: 26px;}
.section-heading > p:not(.eyebrow), .context-card p, .result-block > p, .detail-body, .takeaway-panel > p:not(.eyebrow), .hero-tagline, .lead, figcaption, .claim-scope, .context-note, .metric-detail, .table-footer, .source-link, pre code, .question-sub, .author-note, .affiliations, .nav-links a, .button, .setting-badge, .protocol-note, .metric-kicker, .metric-source, .step-label, .card-bottom, .mini-label, .mechanism-grid p, .result-heading .eyebrow, .footer-inner p, .copy-feedback, .citation-toolbar, .fig-label, .method-ref, .detail-block summary, .story-link {font-size: 15px;}
.reading-progress span {background: linear-gradient(90deg, #8a3131, #355b58);}
.gradient-text {background: linear-gradient(110deg,#8a3131 0%, #6d4141 55%, #355b58 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.site-header {background: rgba(255,255,255,.97);}
.brand {font-size: 19px; color: var(--ink);} 
.brand-title {display: inline-block;}
.brand-mark {background: #111; border-radius: 8px; height: 30px; width: 30px; font-size: 15px;}
.nav-links a {font-weight: 600; color: #555;}
.nav-links a:hover,.nav-links a[aria-current="location"] {color: #111;}
.hero {padding: 72px 0 54px; background: radial-gradient(circle at 20% 0%, rgba(138,49,49,.04), transparent 32%), #fff;}
.hero .eyebrow {color: #666; font-size: 14px;}
.hero-main {font-size: clamp(48px, 5vw, 70px);} 
.hero-subtitle {font-size: clamp(24px, 2.25vw, 31px); color: #2f2f2f;}
.authors {font-size: 18px;}
.author sup, .affiliations sup {font-size: 12px; color: var(--accent);} 
.resource-links {gap: 12px; margin: 28px 0 18px;}
.button {font-size: 15px; padding: 12px 20px; border-radius: 10px; color: var(--ink);}
.button:hover {color: var(--ink);}
.button-primary {background: #111; border-color: #111; color: #fff;}
.button-primary:hover {background: #222; color: #fff;}
.button-disabled {font-weight: 500; color: #666; background: #f0f0f0; border-color: #e3e3e3;}
.hero-tagline {max-width: 820px; margin-inline: auto; color: #4b4b4b;}
.story-link {margin-top: 26px; color: #444;}
.context-section {padding-top: 44px;}
.context-card, .method-card, .result-block, .paper-figure, .citation-box {border-color: #dcdcdc; box-shadow: none;}
.context-card-accent {background: #f3f2ef; border-color: #ddd8cf;}
.context-card-accent .step-label,.context-card-accent h3 {color: var(--ink);}
.card-bottom {color: #666;}
.question-panel {padding: 58px 50px 50px; background: #faf8f4; border: 1px solid #ddd6cc; box-shadow: none;}
.question-panel::before {content:""; position:absolute; left:0; right:0; top:0; height:4px; background: linear-gradient(90deg, #8a3131, #355b58);} 
.question-panel h2 span {color: var(--accent);} 
.question-sub, .answer-cue {color: #4f4f4f;}
.question-watermark {color: rgba(17,17,17,.04);} 
.answer-pill {color: var(--accent); border-color: #d8c9c9;}
.insight-panel {background: #fbfaf7; border-color: #ddd8cf; box-shadow: none; padding: 42px 40px 34px;}
.insight-panel::before {background: linear-gradient(90deg, #8a3131, #355b58);} 
.insight-copy h2 {font-size: clamp(34px, 3.3vw, 48px);} 
.lead {font-size: 18px; line-height: 1.8; color: #303030;}
.claim-scope {font-size: 15px; color: #555; max-width: 900px;}
.fig-label {color: #444; border-color: #d9d9d9; background: #fff;}
figcaption {font-size: 15px; color: #444; background: #fbfbfb;}
.source-link {font-size: 15px; color: #444;}
.novelty-banner {background: #f5f3ee; border-color: #ddd6cc;}
.novelty-number {color: #111; border-right-color: #d9d2ca;}
.novelty-banner p:not(.eyebrow) {font-size: 16px; color: #444;}
.contrast-strip {font-size: 16px; color: #555;}
.contrast-strip strong {color: var(--accent);} 
.acronym {font-size: 17px !important; color: #2c2c2c !important;}
.acronym strong {color: var(--accent);} 
.framework-figure .figure-link {padding: 28px 40px;}
.method-grid {gap: 18px;}
.method-card {padding: 24px 24px 22px; background: #fff; border-top: 5px solid #ccc;}
.method-card.recon {border-top-color: #3d6e96; background: #f7fbff;}
.method-card.fusion {border-top-color: #7b5f95; background: #faf7fd;}
.method-card.mil {border-top-color: #a44646; background: #fff8f8;}
.step-index {width: 34px; height: 34px; border-radius: 999px; background: #111; color: #fff; font-size: 15px;}
.method-card h3 {font-size: 22px; margin: 16px 0 10px;}
.method-card p {font-size: 16px; color: #3d3d3d; line-height: 1.8;}
.formula {padding-top: 14px; margin-top: 14px; border-top-color: #ddd; color: #222; font-size: 18px;}
.formula-note {font-size: 14px; color: #666; margin-top: 6px;}
.detail-block {margin-top: 16px; border-color: #ddd;}
.detail-block summary {background: #fafafa; color: #333;}
.detail-block summary span {color: #555;}
.detail-body p + p {margin-top: 14px;}
.detail-body .small-note {font-size: 15px; background: #f5f5f5;}
.metrics-grid {gap: 16px;}
.metric-card {border-color: #ddd; box-shadow: none;}
.metric-card:hover {border-color: #bbb;}
.metric-kicker {font-size: 14px; color: #555;}
.metric-value {color: var(--accent); font-size: 50px;}
.metric-unit {color: #777;}
.metric-detail {font-size: 15px; color: #444;}
.metric-source {font-size: 15px; color: #444;}
.protocol-note {font-size: 15px; background: #f5f5f5; color: #444; border-color: #e0e0e0;}
.result-block-featured {border-color: #d9d9d9; box-shadow: none;}
.result-heading h3 {font-size: clamp(24px,2.1vw,30px);} 
.setting-badge {font-size: 14px; color: #555; border-color: #ddd; background: #f5f5f5;}
.table-shell {border-color: #ddd;}
.results-table {font-size: 14px; line-height: 1.5;}
.results-table th, .results-table td {padding: 12px 10px;}
.results-table thead th {background: #f6f6f6; color: #333;}
.results-table thead tr:last-child th {border-bottom-color: #c8c8c8;}
.results-table .method-col {padding-left: 16px; box-shadow: 1px 0 0 #e7e7e7;}
.results-table .method-ref {font-size: 13px; color: #666;}
.results-table .method-ref:hover {color: #111;}
.results-table .group-row th {background: #f1f1f1; color: #555; font-size: 14px; font-style: normal;}
.results-table .ours-row td,.results-table .ours-row th {background: #f4f4f4; color: #222;}
.results-table .ours-row .method-col {font-weight: 700; color: var(--accent);} 
.results-table .ours-tag {font-size: 13px; color: #666;}
.results-table .group-start {border-left-color: #d1d1d1;}
.results-table .average-col {background: #fafafa;}
.results-table .ours-row .average-col {background: #eeeeee;}
.results-table .ood-col {background: #f7f7f7;}
.results-table .ours-row .ood-col {background: #ececec;}
.table-wide {font-size: 13px;}
.table-wide th,.table-wide td {padding: 10px 8px;}
.table-three {font-size: 15px;}
.table-three thead th, .table-three tbody td {font-size: 15px;}
.delta-positive, .check-yes {color: var(--teal); font-size: 13px;}
.delta-negative {color: #8a3131; font-size: 13px;}
.table-footer {font-size: 14px; color: #555; margin-top: 16px;}
.qualitative-compact {max-width: 1080px; margin-inline: auto;}
.qualitative-figure .figure-link {padding: 20px 28px;}
.takeaway-panel {background: #faf8f4; border-color: #ddd6cc; box-shadow: none; padding: 58px 64px 48px;}
.takeaway-rule {background: #cbb7b7;}
.takeaway-panel h2 em {color: var(--accent);}
.takeaway-panel .takeaway-signature {font-size: clamp(28px,2.5vw,36px) !important; color: #3b3b3b !important;}
.takeaway-signature strong {color: var(--accent);}
.takeaway-panel .takeaway-scope {font-size: 15px !important; color: #666 !important;}
.appendix-section {padding-top: 20px; padding-bottom: 14px;}
.citation-toolbar {font-size: 15px;}
.copy-button {font-size: 14px;}
pre code {font-size: 15px; line-height: 1.8; color: #333;}
.site-footer {background: #fbfbfb; border-top-color: #e4e4e4;}
.footer-inner .brand {font-size: 17px;}
.footer-inner p {font-size: 14px; color: #666;}
.back-top {font-size: 15px;}
.lightbox-toolbar, .lightbox-bottom {font-size: 14px;}
@media (max-width: 1024px) {
  .container {width: calc(100% - 42px);} 
  .question-panel, .takeaway-panel {padding-left: 34px; padding-right: 34px;}
}
@media (max-width: 760px) {
  body {font-size: 16px;}
  .container {width: calc(100% - 24px);} 
  .nav-links a, .button, .eyebrow, .source-link, figcaption, .metric-detail, .table-footer, .question-sub, .claim-scope, .footer-inner p, .story-link, .setting-badge, .detail-body, pre code, .protocol-note {font-size: 14px;}
  .hero-main {font-size: clamp(38px, 8.5vw, 50px);} 
  .hero-subtitle {font-size: clamp(20px, 4.5vw, 24px);} 
  .authors {font-size: 15px;}
  .affiliations, .author-note {font-size: 14px;}
  .question-panel, .insight-panel, .takeaway-panel {padding: 30px 20px 26px; border-radius: 16px;}
  .question-watermark {font-size: 220px;}
  .lead {font-size: 17px;}
  .framework-figure .figure-link, .qualitative-figure .figure-link, .figure-link {padding: 14px;}
  .metric-value {font-size: 42px;}
  .result-block {padding: 20px;}
  .results-table {font-size: 13px;}
  .results-table th, .results-table td {padding: 10px 8px;}
  .fig-label {font-size: 12px;}
}


/* final compact refinements */
.answer-emphasis{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px;padding:12px 20px;border-radius:12px;background:#f8f1f1;border:1px solid #e2cfcf;color:#222;font-size:18px;font-weight:600;line-height:1.7}.answer-emphasis strong{color:var(--accent)}.qa-mark{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700}.mini-support-figure{max-width:780px;margin:18px auto 20px}.mini-support-figure .figure-link{padding:12px 16px}.mini-support-figure figcaption{padding:14px 16px}.qualitative-compact{max-width:900px;margin-inline:auto}.qualitative-figure .figure-link{padding:12px 16px}@media (max-width:760px){.answer-emphasis{font-size:16px;padding:10px 14px}.qa-mark{min-width:30px;height:30px}.mini-support-figure{max-width:100%}.qualitative-compact{max-width:100%}}

/* Hide only the mark in the top navigation. */
.site-header .brand-mark {
  display: none;
}