:root {
  --ink: #10211f;
  --muted: #60706c;
  --paper: #f5f3ed;
  --surface: #fffef9;
  --teal: #008b82;
  --teal-dark: #006b64;
  --orange: #f47a43;
  --line: #d7d9cf;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 74px;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
}
.brand { font: 800 1.55rem/1 var(--mono); letter-spacing: -0.1em; }
.brand span { color: var(--orange); }
nav { display: flex; gap: 24px; }
nav a, .header-link { color: #39504b; font-size: 0.82rem; font-weight: 700; }
nav a:hover, .header-link:hover { color: var(--teal); }
.hero { padding: 112px 0 82px; }
.eyebrow { color: var(--teal); font: 700 0.73rem/1.2 var(--mono); letter-spacing: 0.08em; margin: 0 0 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.8rem, 6vw, 5.9rem); letter-spacing: -0.072em; line-height: 1.01; margin-bottom: 30px; max-width: 1030px; }
h1 em { color: var(--teal); font-style: normal; }
h2 { font-size: clamp(2rem, 4vw, 3.7rem); letter-spacing: -0.06em; line-height: 1.08; margin-bottom: 20px; }
h3 { font-size: 1.15rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.hero-positioning { color: var(--teal-dark); font-size: clamp(1.12rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.35; margin-bottom: 14px; max-width: 860px; }
.hero-copy { color: #425450; font-size: 1.16rem; max-width: 720px; }
.authors { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 34px 0 26px; }
.authors span { border-left: 2px solid var(--orange); display: grid; padding-left: 10px; }
.authors strong { font-size: 0.9rem; }
.authors small { color: var(--muted); font-size: 0.72rem; }
.authors a { color: var(--teal-dark); font: 0.68rem var(--mono); margin-top: 3px; }
.authors a:hover { text-decoration: underline; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { align-items: center; display: inline-flex; font-size: 0.9rem; font-weight: 800; gap: 22px; padding: 13px 17px; }
.button span { font-size: 1.15rem; }
.button-primary { background: var(--teal); color: white; }
.button-primary:hover { background: var(--teal-dark); }
.button-secondary { border: 1px solid #9ca7a2; }
.button-secondary:hover { border-color: var(--teal); color: var(--teal); }
.publication-note { color: var(--muted); font-size: 0.77rem; margin: 18px 0 0; }
.hero-media-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin: 54px 0 0; }
.hero-clip { aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; position: relative; }
.hero-clip img { display: block; height: 100%; object-fit: cover; width: 100%; }
.hero-clip::after { background: linear-gradient(0deg, rgba(5, 24, 22, 0.7), transparent 44%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hero-clip span { bottom: 13px; color: white; font: 0.67rem var(--mono); left: 14px; position: absolute; z-index: 1; }
.signal-strip { background: var(--ink); color: white; display: grid; font: 600 0.78rem var(--mono); gap: 18px; grid-template-columns: repeat(3, 1fr); padding: 18px max(24px, calc((100vw - 1120px) / 2)); }
.signal-number { color: #6ee3ce; margin-right: 10px; }
.method-section { padding: 124px 0; }
.section-intro { display: grid; grid-template-columns: 0.8fr 2fr; gap: 36px; align-items: start; }
.section-intro .eyebrow { padding-top: 10px; }
.section-intro > p:last-child { color: var(--muted); font-size: 1.05rem; grid-column: 2; max-width: 660px; }
.method-visual { align-items: stretch; background: #dff6ef; display: grid; gap: 14px; grid-template-columns: 1fr auto 1.15fr auto 1fr; margin: 58px 0 32px; padding: 26px; }
.flow-node { background: var(--surface); display: flex; flex-direction: column; justify-content: center; min-height: 160px; padding: 20px; }
.flow-node > span, .flow-node small { color: var(--muted); font: 0.68rem var(--mono); }
.flow-node strong { font-size: 1.12rem; letter-spacing: -0.04em; margin: 8px 0; }
.flow-entropy { background: var(--teal); color: white; }
.flow-entropy > span, .flow-entropy small { color: #c9fff4; }
.flow-arrow { align-self: center; color: var(--teal); font-size: 2rem; }
.feature-grid, .research-grid, .resource-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.feature-grid article { border-top: 1px solid var(--ink); padding-top: 16px; }
.feature-grid p:last-child, .research-grid p:last-child { color: var(--muted); font-size: 0.9rem; }
.feature-index, .research-tag { color: var(--orange); font: 700 0.72rem var(--mono); }
.evidence-figure { border-top: 1px solid var(--ink); margin: 74px 0 0; padding-top: 22px; }
.evidence-heading { align-items: end; display: grid; gap: 28px; grid-template-columns: 0.8fr 2fr; }
.evidence-heading .eyebrow { margin: 0; }
.evidence-heading h3 { font-size: 1.5rem; margin: 0; max-width: 640px; }
.evidence-grid { display: grid; gap: 18px; grid-template-columns: 1.1fr 0.9fr; margin-top: 30px; }
.evidence-grid article { background: var(--surface); border: 1px solid var(--line); padding: 15px; }
.evidence-grid img { background: white; display: block; height: 300px; object-fit: contain; width: 100%; }
.evidence-grid p { color: var(--muted); font-size: 0.78rem; line-height: 1.55; margin: 14px 3px 2px; }
.evidence-grid strong { color: var(--ink); }
.evidence-grid-single { grid-template-columns: 1fr; }
.evidence-grid-single img { height: auto; max-height: 640px; }
.advantage-section { background: var(--paper); color: var(--ink); padding: 118px 0; }
.advantage-section .eyebrow { color: var(--teal); }
.advantage-intro { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.2fr 0.8fr; }
.advantage-intro h2 { margin: 0; max-width: 650px; }
.advantage-intro > p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; margin: 0; max-width: 390px; }
.comparison-wrap { border: 1px solid var(--line); margin-top: 50px; overflow-x: auto; }
.comparison-table { border-collapse: collapse; min-width: 850px; table-layout: fixed; width: 100%; }
.comparison-table th, .comparison-table td { border-bottom: 1px solid var(--line); padding: 19px 18px; text-align: left; vertical-align: middle; }
.comparison-table thead th { background: #e9ece3; color: var(--muted); font: 700 0.68rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.comparison-table thead th:first-child { width: 42%; }
.comparison-table thead span { color: var(--ink); display: block; font-size: 0.79rem; margin-bottom: 4px; }
.comparison-table thead small { color: var(--muted); font-size: 0.58rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table tbody th strong { color: var(--ink); display: block; font-size: 0.89rem; line-height: 1.35; }
.comparison-table tbody th span { color: var(--muted); display: block; font-size: 0.71rem; font-weight: 400; line-height: 1.45; margin-top: 4px; }
.comparison-table td { color: var(--ink); font-size: 0.77rem; }
.comparison-table td small { color: var(--muted); display: block; font-size: 0.66rem; line-height: 1.4; margin-top: 4px; }
.comparison-table .scq-column { background: #dff6ef; }
.comparison-table thead .scq-column { background: #19a88e; color: #f6fffc; }
.comparison-table thead .scq-column span, .comparison-table thead .scq-column small { color: #f6fffc; }
.status-yes, .status-no, .status-neutral { display: inline-block; font: 700 0.69rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.status-yes { color: var(--teal-dark); }
.status-no { color: #b34a20; }
.status-neutral { color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
.comparison-note { color: var(--muted); font-size: 0.68rem; line-height: 1.55; margin: 16px 0 0; max-width: 950px; }
.research-section { background: #e6e5db; padding: 104px 0; }
.research-section h2 { max-width: 790px; }
.research-lead { color: #425450; font-size: 1.04rem; margin: 0; max-width: 760px; }
.coverage-block { border-top: 1px solid #b9bcb1; margin-top: 52px; padding-top: 22px; }
.coverage-block .eyebrow { color: var(--teal-dark); }
.coverage-list { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.coverage-list li { align-items: baseline; border-bottom: 1px solid #c5c8bd; display: flex; gap: 16px; justify-content: space-between; padding: 15px 4px 15px 0; }
.coverage-list li:nth-child(odd) { margin-right: 28px; }
.coverage-list strong { font-size: 0.88rem; letter-spacing: -0.02em; }
.coverage-list span { color: var(--muted); font-size: 0.75rem; text-align: right; }
.innovation-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.innovation-grid article { background: var(--ink); color: white; min-height: 232px; padding: 24px; }
.innovation-grid span { color: #6ee3ce; font: 700 0.72rem var(--mono); }
.innovation-grid h3 { font-size: 1.05rem; margin: 42px 0 10px; }
.innovation-grid p { color: #bfcbc7; font-size: 0.83rem; margin: 0; }
.task-list { margin-top: 72px; }
.task-row { border-top: 1px solid #aeb3a8; padding: 26px 0 32px; }
.task-row:last-child { border-bottom: 1px solid #aeb3a8; }
.task-summary { align-items: end; display: grid; gap: 16px; grid-template-columns: 0.7fr 1fr 1.45fr; margin-bottom: 22px; }
.task-summary p { margin: 0; }
.task-summary h3 { font-size: 1.42rem; margin: 0; }
.task-summary > p:last-child { color: var(--muted); font-size: 0.87rem; max-width: 430px; }
.clip-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-color: var(--teal) transparent; }
.clip-grid { cursor: grab; }
.clip-grid.is-dragging { cursor: grabbing; }
.clip-grid .video-shell { flex: 0 0 176px; }
.clip-grid video { aspect-ratio: 4 / 3; background: var(--ink); display: block; height: 100%; object-fit: cover; width: 100%; }
.video-shell { aspect-ratio: 4 / 3; position: relative; }
.video-shell video { cursor: pointer; }
.precision-details { border-left: 2px solid var(--teal); margin: 24px 0 0; padding-left: 18px; }
.precision-details > .research-tag { margin: 0 0 9px; }
.precision-table { border-collapse: collapse; font-size: 0.88rem; max-width: 650px; width: 100%; }
.precision-table th, .precision-table td { border-bottom: 1px solid #c5c8bd; padding: 10px 12px; text-align: left; }
.precision-table thead th { background: #d7ebe5; color: var(--teal-dark); font: 700 0.69rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.precision-table tbody th { color: var(--ink); font-weight: 700; width: 62%; }
.precision-table td { color: var(--teal-dark); font-family: var(--mono); font-weight: 700; }
.precision-protocol { border-top: 1px solid #c5c8bd; margin-top: 16px; padding-top: 15px; }
.precision-protocol p { margin: 0; }
.precision-protocol .research-tag { margin-bottom: 7px; }
.precision-protocol dl { display: grid; gap: 0; margin: 0 0 12px; max-width: 650px; }
.precision-protocol dl > div { border-bottom: 1px solid #c5c8bd; display: grid; grid-template-columns: 140px 1fr; padding: 9px 0; }
.precision-protocol dt { color: var(--ink); font-size: 0.84rem; font-weight: 700; }
.precision-protocol dd { color: var(--teal-dark); font: 0.78rem var(--mono); margin: 0; }
.precision-protocol > p:last-child { color: var(--muted); font-size: 0.82rem; line-height: 1.5; max-width: 650px; }
.resources-section { padding: 124px 0; }
.resource-grid { margin-top: 38px; }
.resource-card { background: var(--surface); border: 1px solid var(--line); display: block; min-height: 220px; padding: 25px; transition: transform 160ms ease, border-color 160ms ease; }
.resource-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.resource-card-disabled { cursor: not-allowed; opacity: 0.62; }
.resource-card-disabled:hover { border-color: var(--line); transform: none; }
.resource-icon { color: var(--teal); display: block; font: 1.6rem var(--mono); margin-bottom: 31px; }
.resource-card p { color: var(--muted); font-size: 0.88rem; }
.resource-status { color: var(--teal); font: 700 0.66rem var(--mono); }
.citation-section { border-top: 1px solid var(--line); display: grid; gap: 80px; grid-template-columns: 0.9fr 1.1fr; padding: 100px 0; }
.citation-copy { color: var(--muted); max-width: 380px; }
.citation-block { position: relative; }
pre { background: var(--ink); color: #d7f8ee; font: 0.72rem/1.7 var(--mono); margin: 0; overflow: auto; padding: 50px 24px 24px; white-space: pre-wrap; }
.copy-button { background: transparent; border: 1px solid #8fb8ad; color: white; cursor: pointer; font: 700 0.65rem var(--mono); padding: 7px 9px; position: absolute; right: 12px; top: 12px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 0.75rem; justify-content: space-between; padding-bottom: 28px; padding-top: 28px; }
.site-footer p { margin: 0; }

@media (max-width: 720px) {
  .site-header { height: 62px; padding: 0 20px; }
  nav { display: none; }
  .section-shell { width: min(100% - 40px, 1120px); }
  .hero { padding: 76px 0 60px; }
  .signal-strip { grid-template-columns: 1fr; padding: 17px 20px; }
  .method-section, .resources-section { padding: 82px 0; }
  .section-intro, .citation-section { display: block; }
  .section-intro > p:last-child { margin-top: 22px; }
  .method-visual { grid-template-columns: 1fr; margin-top: 40px; }
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .feature-grid, .research-grid, .resource-grid, .innovation-grid, .coverage-list, .evidence-grid, .advantage-intro { grid-template-columns: 1fr; }
  .hero-media-grid { grid-template-columns: repeat(4, minmax(200px, 1fr)); overflow-x: auto; }
  .clip-grid .video-shell { flex-basis: 78vw; }
  .evidence-heading { grid-template-columns: 1fr; }
  .evidence-grid img { height: auto; }
  .advantage-section { padding: 82px 0; }
  .advantage-intro { gap: 18px; }
  .precision-table { font-size: 0.81rem; }
  .precision-table th, .precision-table td { padding: 9px 8px; }
  .precision-protocol dl > div { grid-template-columns: 1fr; gap: 3px; }
  .coverage-list li:nth-child(odd) { margin-right: 0; }
  .task-summary { align-items: start; grid-template-columns: 1fr; }
  .research-section { padding: 76px 0; }
  .citation-section { padding: 72px 0; }
  .citation-block { margin-top: 34px; }
  .site-footer { gap: 8px; flex-direction: column; }
}