@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* base reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; text-wrap: pretty;
       background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:not(.btn) { color: var(--color-accent-700); text-decoration: none; border-bottom: 1px solid currentColor; }
a:not(.btn):hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.grayscale { filter: grayscale(1) contrast(1.08); }

/* rules */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; height: 36px;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-sm { height: 28px; font-size: 12px; padding: 0 10px; min-width: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* forms */
.field > label { display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* cards */
.card { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* tags */
.tag { display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* navigation */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* tables (system) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* dialog */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ─── page layout ─────────────────────────────────────── */

.page { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px); }

.section      { padding: 56px 0; }
.section-hero { padding: 84px 0 56px; }
.section-end  { padding: 56px 0 98px; }

/* text utilities */
.kicker { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
          color: var(--color-accent-700); margin-bottom: 14px; }
.muted { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.dim   { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* content rows: number | heading | body */
.rows > .row { display: grid;
  grid-template-columns: 64px minmax(0,1fr) minmax(0,2fr);
  gap: 28px clamp(24px,4vw,56px); align-items: baseline; padding: 42px 0; }
.rows > .row + .row { border-top: 2px solid var(--color-divider); }
.rows-wide > .row { grid-template-columns: minmax(min-content,160px) minmax(0,1fr); }

/* tab nav bar */
.tab-btn { appearance: none; background: none; border: 0;
  border-bottom: 3px solid transparent;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 18px 0 15px; margin-right: 32px; cursor: pointer; white-space: nowrap; }
.tab-btn:last-child { margin-right: 0; }
.tab-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tab-btn.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab { display: none; }
.tab.active { display: block; }

/* cite code blocks */
.citation-shell { margin-top: 18px; margin-bottom: 6px; }
.citation-shell .cite-wrap { margin-bottom: 0; }
.cite-wrap { position: relative; margin-bottom: 8px; }
.cite-block { background: var(--color-surface); padding: 16px 20px;
  font: 13px/1.7 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all;
  border-left: 3px solid var(--color-accent); margin-bottom: 0; }
.cite-copy-btn { position: absolute; top: 8px; right: 8px;
  appearance: none; cursor: pointer; padding: 5px; line-height: 0;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.cite-copy-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cite-opt { display: block; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 13px; background: none; border: 0;
  cursor: pointer; font-family: var(--font-body); color: var(--color-text); }
.cite-opt + .cite-opt { border-top: 1px solid var(--color-divider); }
.cite-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* authors */
.author-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 0 clamp(20px,3vw,48px); }
.author-card { padding: 28px 0; display: flex; flex-direction: column; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 14px; flex-shrink: 0; }
.author-card a { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: 26px; color: var(--color-text); border-bottom: none; }
.author-card a:hover { color: var(--color-accent); }
.author-card sup { color: var(--color-accent); font-size: 12px; }
.author-card .role { font-size: 13px; line-height: 20px; margin: 5px 0 0; }
.inst-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; border-top: 2px solid var(--color-divider); padding-top: 32px; margin-top: 28px; }
@media (max-width: 640px) { .inst-grid { grid-template-columns: repeat(2, 1fr); } }
.inst-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.inst-logo-box { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; }
.inst-logo-box img { width: 100%; height: 100%; object-fit: contain; opacity: .85; }
.inst-logo-none { opacity: .4; }
.inst-name { font-size: 13px; font-weight: 600; margin: 0; line-height: 18px; }
.inst-name sup { color: var(--color-accent); }
.inst-country { font-size: 12px; margin: 0; letter-spacing: .04em; }

/* hero two columns */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px,6vw,100px); align-items: center; }
@media (max-width: 700px) { .hero-split { grid-template-columns: 1fr; } }

/* paper abstract + pdf side-by-side */
.paper-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(280px,2fr);
  gap: clamp(40px,6vw,72px); align-items: start; }
.paper-pdf-panel { position: sticky; top: 110px; max-height: calc(100vh - 130px); height: 640px; display: flex; flex-direction: column; overflow: hidden; }
.paper-pdf-panel iframe { flex: 1; min-height: 0; }
@media (max-width: 860px) { .paper-layout { grid-template-columns: 1fr; }
  .paper-pdf-panel { position: static; height: 480px; max-height: none; } }

/* pdf preview panel */
.pdf-preview { position: relative; border: 1px solid var(--color-divider);
  height: 560px; overflow: hidden; cursor: pointer; background: var(--color-surface); }
.pdf-preview iframe { width: 100%; height: 100%; border: none; pointer-events: none; }
.pdf-preview-label { position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  background: linear-gradient(transparent, color-mix(in srgb, var(--color-surface) 90%, transparent));
  text-align: right; }
.pdf-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; }

/* pdf modal overlay */
.pdf-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); }
.pdf-modal iframe { width: 100%; height: 100%; border: none; }
.pdf-modal-close { position: fixed; top: 18px; right: 22px; z-index: 1001;
  appearance: none; background: var(--color-neutral-900); border: 0;
  color: #fff; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer; }
.pdf-modal-close:hover { background: var(--color-accent); }

/* copy toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--color-neutral-900); color: #fff;
  font-size: 13px; padding: 8px 18px; letter-spacing: .04em;
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 500; }
.toast.show { opacity: 1; }

/* tool comparison grid */
.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); isolation: isolate; }
.tool-cell { display: flex; flex-direction: column; background: var(--color-bg);
  cursor: pointer; position: relative; transition: opacity 180ms ease-out; }
.tool-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.tool-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 10px; margin: 0; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.tool-img-wrap { aspect-ratio: 16/10; }
.tool-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
  box-sizing: border-box; border: 2px solid transparent;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out; }
.tool-cell:nth-child(1) .tool-img-wrap img { transform-origin: left center; }
.tool-cell:nth-child(2) .tool-img-wrap img,
.tool-cell:nth-child(3) .tool-img-wrap img,
.tool-cell:nth-child(4) .tool-img-wrap img { transform-origin: center; }
.tool-cell:nth-child(5) .tool-img-wrap img { transform-origin: right center; }
@media (hover: hover) {
  .tool-cell:hover, .tool-cell:focus-visible { z-index: 20; }
  .tool-cell:hover .tool-img-wrap img,
  .tool-cell:focus-visible .tool-img-wrap img { transform: scale(2.4); border-color: var(--color-text); box-shadow: var(--shadow-lg); }
  .tool-grid:has(.tool-cell:hover) .tool-cell:not(:hover),
  .tool-grid:has(.tool-cell:focus-visible) .tool-cell:not(:focus-visible) { opacity: 0.35; }
}
.tool-grid-caption { display: block; font-size: 14px; line-height: 21px; margin-top: 14px; max-width: 58ch; }
@media (max-width: 760px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tool-grid { grid-template-columns: 1fr; } }

/* data tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-table { border-collapse: collapse; width: 100%; }
.dt-table caption { text-align: left; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); caption-side: top; }
.dt-table thead th { text-align: left; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: 14px 20px;
  border-bottom: 2px solid var(--color-divider); white-space: nowrap; }
.dt-table thead th.num { text-align: right; }
.dt-table tbody td { font-size: 15px; padding: 14px 20px; border-bottom: 1px solid var(--color-divider); }
.dt-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-table tbody td.ci { color: color-mix(in srgb, var(--color-text) 50%, transparent); font-size: 13px; font-variant-numeric: tabular-nums; }
.dt-table tbody td.nowrap { white-space: nowrap; }
.dt-table tbody td.worst { color: var(--color-accent); font-weight: 600; }
.dt-table tbody tr:hover { background: none; }
.dt-table .tbl-summary td { border-top: 2px solid var(--color-divider); border-bottom: none; font-variant-numeric: tabular-nums; }

/* figure bar chart */
.bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.bar-label { font-size: 9px; line-height: 1; text-align: center; font-feature-settings: 'tnum' 1;
             color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.bar-val { display: block; transform-origin: bottom; transition: filter .15s, transform .15s; cursor: default; }
.bar-val:hover { filter: brightness(1.2); transform: scaleY(1.04); }

/* ─── theater stage ───────────────────────────────────── */

.theater-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.theater-stage-outer { position: relative; width: 100%; margin-top: -250px; height: clamp(280px,36vw,300px); }
.theater-stage { position: absolute; inset: 0; background: #0c0a09;
  border: 3px solid rgba(245,158,11,.22); border-radius: 8px 8px 0 0; overflow: hidden; }
.theater-spotlight { position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 38%,rgba(8,40,246,.436) 0%,transparent 100%);
  animation: th-glow 6s ease-in-out infinite; }
.spotlight-sweep { position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(to right,transparent 0%,rgba(255,210,100,.07) 50%,transparent 100%);
  animation: th-sweep 6s linear infinite; }
.el-nav { position: absolute; top: 0; left: 0; right: 0; height: 8%;
  background: #3f3f46; border-bottom: 1px solid #52525b; animation: th-nav 6s ease-out infinite; }
.el-nav::before { content: ''; position: absolute; left: 3%; top: 50%;
  transform: translateY(-50%); width: 9%; height: 4px; background: #71717a; border-radius: 2px; }
.el-nav::after { content: ''; position: absolute; right: 3%; top: 50%;
  transform: translateY(-50%); width: 4%; height: 4px; background: #52525b; border-radius: 2px; }
.el-sidebar { position: absolute; top: 10%; left: 0; bottom: 0; width: 20%;
  background: #27272a; border-right: 1px solid #3f3f46; animation: th-sidebar 6s ease-out infinite; }
.el-sidebar::before { content: ''; position: absolute; top: 14px; left: 15%; right: 15%;
  height: 4px; background: #3f3f46; border-radius: 2px;
  box-shadow: 0 12px 0 #3f3f46, 0 24px 0 #3f3f46, 0 36px 0 #3f3f46; }
.el-card1 { position: absolute; top: 13%; left: 22%; right: 2.5%; height: 37%;
  background: #27272a; border-radius: 3px; border: 1px solid #3f3f46; animation: th-card1 6s ease-out infinite; }
.el-card1::before { content: ''; position: absolute; top: 12%; left: 6%; right: 6%;
  height: 6px; background: #52525b; border-radius: 2px; }
.el-card1::after { content: ''; position: absolute; top: 32%; left: 6%; right: 25%;
  height: 4px; background: #3f3f46; border-radius: 2px;
  box-shadow: 0 10px 0 #3f3f46, 0 20px 0 rgba(63,63,70,.5); }
.el-card2 { position: absolute; bottom: 3.5%; left: 22%; right: 2.5%; height: 43%;
  background: #27272a; border-radius: 3px; border: 1px solid #3f3f46; animation: th-card2 6s ease-out infinite; }
.el-card2::before { content: ''; position: absolute; top: 12%; left: 6%; width: 13%;
  height: 6px; background: #52525b; border-radius: 2px; }
.el-card2::after { content: ''; position: absolute; top: 32%; left: 6%; right: 20%;
  height: 4px; background: #3f3f46; border-radius: 2px; box-shadow: 0 10px 0 rgba(63,63,70,.6); }
.el-ghost { position: absolute; bottom: 3.5%; left: 22%; right: 2.5%; height: 43%;
  border-radius: 3px; border: 1.5px solid rgba(245,158,11,.7);
  background: rgba(245,158,11,.03); animation: th-ghost 6s ease-in-out infinite; }
.sl-lamp-l, .sl-lamp-r { position: absolute; top: 0; width: 3%; min-width: 14px; height: 4%; background: #141313; z-index: 22; }
.sl-lamp-l { left: 8.5%; }
.sl-lamp-r { right: 8.5%; }
.sl-lamp-l::after, .sl-lamp-r::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: var(--color-accent); animation: sl-flicker 4.3s ease-in-out infinite; }
.sl-beam-l, .sl-beam-r { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 15;
  background: linear-gradient(to bottom,
    color-mix(in srgb,var(--color-accent) 40%,transparent),
    color-mix(in srgb,var(--color-accent) 16%,transparent) 65%,
    transparent);
  transition: transform 260ms ease-out; }
.sl-beam-l { transform-origin: 10% 4%; clip-path: polygon(10% 4%, 80% 100%, -1% 100%);
  animation: sl-sweep-l 7s ease-in-out infinite; }
.sl-beam-r { transform-origin: 90% 4%; clip-path: polygon(90% 4%, 100% 100%, 12% 100%);
  animation: sl-sweep-r 8s ease-in-out -4s infinite; }
@media (prefers-reduced-motion: reduce) { .sl-beam-l, .sl-beam-r, .sl-lamp-l::after, .sl-lamp-r::after { animation: none !important; } }
.curtain { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; }
.curtain-left { left: 0; transform-origin: left; background: linear-gradient(to right,#991b1b,#b91c1c);
  box-shadow: inset -10px 0 20px rgba(0,0,0,.3); animation: th-curtain 6s ease-in-out infinite; }
.curtain-right { right: 0; transform-origin: right; background: linear-gradient(to left,#991b1b,#b91c1c);
  box-shadow: inset 10px 0 20px rgba(0,0,0,.3); animation: th-curtain 6s ease-in-out infinite; }
.curtain-folds { position: absolute; inset: 0; opacity: .3; }
.curtain-folds span { position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,transparent,#450a0a,transparent); }
.curtain-left  .curtain-folds span:nth-child(1) { left: 18%; }
.curtain-left  .curtain-folds span:nth-child(2) { left: 36%; }
.curtain-left  .curtain-folds span:nth-child(3) { left: 54%; }
.curtain-left  .curtain-folds span:nth-child(4) { left: 72%; }
.curtain-left  .curtain-folds span:nth-child(5) { left: 90%; }
.curtain-right .curtain-folds span:nth-child(1) { right: 18%; }
.curtain-right .curtain-folds span:nth-child(2) { right: 36%; }
.curtain-right .curtain-folds span:nth-child(3) { right: 54%; }
.curtain-right .curtain-folds span:nth-child(4) { right: 72%; }
.curtain-right .curtain-folds span:nth-child(5) { right: 90%; }
.theater-valance { position: absolute; top: -3px; left: 0; right: 0; height: 14px;
  background: linear-gradient(to bottom,#7f1d1d,#991b1b); border-radius: 8px 8px 0 0; z-index: 10; }
.valance-trim { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(245,158,11,.4); }

/* theater keyframes */
@keyframes th-curtain { 0%,13.3% { transform:scaleX(1); } 30% { transform:scaleX(.1); } 86.7% { transform:scaleX(.1); } 100% { transform:scaleX(1); } }
@keyframes th-glow    { 0%,13.3% { opacity:.18; } 30% { opacity:1; } 86.7% { opacity:1; } 100% { opacity:.18; } }
@keyframes th-nav     { 0%,29%  { opacity:0; transform:translateY(-18px); } 36% { opacity:1; transform:translateY(0); } 86.7% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-18px); } }
@keyframes th-sidebar { 0%,32%  { opacity:0; transform:translateX(-18px); } 41% { opacity:1; transform:translateX(0); } 86.7% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(-18px); } }
@keyframes th-card1   { 0%,35%  { opacity:0; transform:translateY(18px); } 45% { opacity:1; transform:translateY(0); } 86.7% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(18px); } }
@keyframes th-card2   { 0%,40%  { opacity:0; transform:translateY(18px); filter:blur(0); } 49% { opacity:1; transform:translateY(0); filter:blur(0); } 54% { opacity:1; transform:translateY(0); filter:blur(0); } 66% { opacity:0; transform:translateY(30px); filter:blur(3px); } 100% { opacity:0; transform:translateY(18px); filter:blur(0); } }
@keyframes th-ghost   { 0%,64% { opacity:0; box-shadow:none; } 69% { opacity:.5; box-shadow:0 0 6px rgba(245,158,11,.3); } 74% { opacity:1; box-shadow:0 0 12px rgba(245,158,11,.6); } 80% { opacity:.7; box-shadow:0 0 5px rgba(245,158,11,.3); } 84% { opacity:1; box-shadow:0 0 14px rgba(245,158,11,.7); } 86.7% { opacity:.8; } 100% { opacity:0; box-shadow:none; } }
@keyframes th-sweep   { 0%,69% { transform:translateX(-120%); } 86.7% { transform:translateX(230%); } 100% { transform:translateX(-120%); } }
@keyframes sl-sweep-l { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg); } }
@keyframes sl-sweep-r { 0%,100% { transform:rotate(8deg); } 50% { transform:rotate(-8deg); } }
@keyframes sl-flicker  { 0%,100% { opacity:1; } 22% { opacity:.78; } 26% { opacity:.96; } 60% { opacity:.82; } 64% { opacity:1; } 81% { opacity:.75; } 85% { opacity:.97; } }

/* ─── responsive ──────────────────────────────────────── */

@media (max-width: 640px) {
  .study-stats { grid-template-columns: repeat(2, 1fr) !important; justify-content: start !important; gap: 28px 20px !important; }
  .rows > .row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .bar-rows > div { grid-template-columns: 72px 1fr 44px !important; gap: 10px !important; }
  .section-hero { padding: 48px 0 40px; }
  .section { padding: 40px 0; }
  .section-end { padding: 40px 0 64px; }
}
@media (max-width: 480px) {
  .study-stats { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .paper-body { gap: 40px; }
}

/* ─── extracted inline styles ─────────────────────────── */

/* Layout */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.nav { position: sticky; top: 0; z-index: 100; background: var(--color-bg);
  padding-inline: max(clamp(20px,5vw,72px), calc((100% - 1200px)/2 + clamp(20px,5vw,72px))); }
.nav-links { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
.nav-badge { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1; }
.nav-icon { margin-right: 5px; font-size: 14px; vertical-align: middle; }
#tab-bar { border-bottom: 2px solid var(--color-divider); overflow-x: auto;
  position: sticky; z-index: 99; background: var(--color-bg); }
.tab-bar-inner { display: flex; gap: 0; }
.content-flex { flex: 1; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.paper-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

/* Typography */
.hero-h1 { font-size: clamp(18px,5.4vw,64px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 0 -.058em; }
.display-h1 { font-size: clamp(34px,4.6vw,62px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 0 -.058em; }
.paper-h1 { font-size: clamp(26px,3.8vw,48px); line-height: 1.1; letter-spacing: -.018em; margin: 0 0 0 -.04em; }
.d-block { display: block; }
.text-accent { color: var(--color-accent); }
.hero-lead { font-size: 17px; line-height: 28px; margin: 42px 0 0; }
.hero-sub { font-size: 17px; line-height: 28px; margin: 28px 0 0; }
.section-lead { font-size: 17px; line-height: 28px; margin: 42px 0 0; }
.section-h2 { font-size: 32px; line-height: 42px; letter-spacing: -.015em; margin: 0 0 14px; }
.section-h2--wide { margin-bottom: 42px; }
.section-p { font-size: 15.5px; line-height: 28px; margin: 0 0 42px; }
.row-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; margin: 0; font-feature-settings: 'tnum' 1; }
.row-h { font-size: 20px; line-height: 28px; letter-spacing: -.01em; margin: 0; }
.row-p { font-size: 15.5px; line-height: 28px; margin: 0; }
.stat-num { font-size: clamp(34px,3.4vw,48px); line-height: 56px; color: var(--color-accent);
  margin: 0 0 0 -.045em; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.stat-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 0; }
.abstract-p { font-size: 15.5px; line-height: 28px; margin: 0 0 28px; text-align: justify; }
.abstract-p--last { margin-bottom: 42px; }

/* Stats grid */
.study-stats { display: grid; grid-template-columns: repeat(4,auto);
  justify-content: space-between; gap: 42px 28px; }

/* Bar rows (Results tab) */
.bar-rows { display: grid; gap: 21px; margin-bottom: 56px; }
.bar-row { display: grid; grid-template-columns: minmax(90px,130px) minmax(0,1fr) 56px;
  gap: 20px; align-items: center; }
.bar-tool-label { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.bar-track { display: block; height: 20px; background: var(--color-accent); }
.bar-score { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; font-feature-settings: 'tnum' 1; }
.bar-val { background: var(--color-accent); }
.bar-styling { opacity: .55; }
.bar-functional { opacity: .25; }

/* Paper tab */
.pdf-iframe { width: 100%; height: 100%; border: none; display: block; }
.pdf-newtab-link { display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 10px; text-align: right; }
.cite-section { display: grid; gap: 20px; }
.cite-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.cite-icon { margin-right: 6px; }

/* Tool grid caption */
.tool-grid-caption { white-space: nowrap; }

/* Method tab */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  border-top: 2px solid var(--color-divider); }
.tier-cell--left { padding: 42px 32px 42px 0; border-right: 2px solid var(--color-divider); }
.tier-cell--mid { padding: 42px 32px; border-right: 2px solid var(--color-divider); }
.tier-cell--right { padding: 42px 0 42px 32px; }
.tier-h3 { font-size: 22px; line-height: 28px; margin: 0 0 14px; }
.metric-acronym { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 28px; line-height: 32px; margin: 0; color: var(--color-accent); }
.metric-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 0; }
.metric-h3 { font-size: 24px; line-height: 28px; letter-spacing: -.01em; margin: 0 0 14px; }
.metric-desc { font-size: 15.5px; line-height: 28px; margin: 0 0 28px; }
.metric-formula { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 28px; margin: 0; padding: 14px 0; }
.dhi-dims { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dhi-dim { border-top: 2px solid var(--color-divider); padding-top: 14px; }
.dhi-dim-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; margin: 0 0 7px; }
.dhi-dim-desc { font-size: 14px; line-height: 21px; margin: 0; }

/* Results tab charts */
.chart-legend { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.legend-item { display: flex; align-items: center; gap: 10px; }
.legend-swatch { width: 16px; height: 16px; background: var(--color-accent); }
.legend-styling { opacity: .55; }
.legend-functional { opacity: .25; }
.chart-fig { margin-bottom: 70px; }
.chart-grid { display: grid; grid-template-columns: 28px minmax(0,1fr); }
.chart-yaxis { position: relative; height: 200px; }
.chart-ytick { position: absolute; right: 4px; font-size: 10px; line-height: 1;
  font-feature-settings: 'tnum' 1; }
.chart-ytick--top { top: 0; transform: translateY(-50%); }
.chart-ytick--mid { top: 50%; transform: translateY(-50%); }
.chart-ytick--bot { bottom: 0; transform: translateY(50%); }
.chart-bars { display: grid; grid-template-columns: repeat(5,1fr);
  gap: clamp(12px,3vw,40px); align-items: end; border-bottom: 2px solid var(--color-divider); }
.chart-group { display: flex; gap: 6px; height: 200px; }
.chart-xlabels { display: grid; grid-template-columns: repeat(5,1fr);
  gap: clamp(12px,3vw,40px); margin-top: 14px; }
.chart-xlabel { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.fig-caption { font-size: 14px; line-height: 21px; margin: 28px 0 0; }
.tbl-wrap--mb { margin-bottom: 56px; }
.dhi-figure { margin: 0; max-width: 860px; }
.dhi-grid { display: grid; grid-template-columns: minmax(70px,90px) minmax(0,1fr);
  gap: 42px 24px; align-items: center; }
.dhi-range { position: relative; height: 34px; border-bottom: 2px solid var(--color-divider); }
.range-fill { position: absolute; top: 14px; height: 6px; background: var(--color-accent); opacity: .3; }
.range-tick { position: absolute; top: 6px; width: 2px; height: 22px; background: var(--color-accent); }
.range-mean { position: absolute; top: 2px; width: 4px; height: 30px; background: var(--color-text); }
.range-label { position: absolute; top: -20px; font-size: 13px; font-feature-settings: 'tnum' 1; }
.range-label--mean { transform: translateX(-50%); font-weight: 600; }
.range-label--max { transform: translateX(-100%); }

/* Authors tab */
.section-end--flush { padding-top: 0; }
.kicker--top { margin-top: 8%; }
.inst-icon { font-size: 30px; opacity: .35; }
.corresponding-note { font-size: 13px; margin: 14px 0 0; }
.contact-section { border-top: 2px solid var(--color-divider); padding-top: 42px; margin-top: 42px; }

/* Footer */
.footer { padding: 28px 0 42px; font-size: 13px; line-height: 28px;
  display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; }
.footer-right { display: flex; gap: 16px; margin-left: auto; }

/* 120-preview grid */
.pg-wrap { overflow-x: auto; padding-bottom: 8px; }
.pg-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.pg-row-label { width: 72px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0; text-align: right; padding-right: 8px; }
.pg-col-label { width: 120px; font-size: 9px; flex-shrink: 0; text-align: center;
  letter-spacing: .04em; }
.pg-cell { display: block; width: 120px; height: 90px; flex-shrink: 0; position: relative;
  overflow: hidden; border-radius: 4px; border: 1px solid var(--color-divider);
  background: var(--color-surface); text-decoration: none; }
.pg-cell iframe { width: 960px; height: 720px; border: none; display: block;
  transform: scale(0.125); transform-origin: top left; pointer-events: none; }
.pg-cell-label { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px;
  padding: 2px 4px; background: rgba(0,0,0,.5); color: #fff;
  letter-spacing: .04em; text-align: center; }