:root {
  color-scheme: light;
  --ink: #0b1739;
  --ink-2: #182647;
  --ink-soft: #3c4862;
  --paper: #f5f7fb;
  --surface: #ffffff;
  --line: #dce3ed;
  --line-dark: #34415f;
  --teal: #087f76;
  --teal-bright: #3ed6c3;
  --teal-soft: #d9f5f1;
  --saffron: #e99b36;
  --blue: #4769d8;
  --blue-soft: #e8edff;
  --muted: #6d778e;
  --danger-soft: #fff3dc;
  --shadow: 0 18px 50px rgba(11, 23, 57, 0.08);
  --radius: 1.1rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
  margin: 0;
  background: radial-gradient(circle at 82% 6%, rgba(62, 214, 195, 0.14), transparent 25rem), var(--paper);
  color: var(--ink);
  font-family: Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(71, 105, 216, 0.45); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; border-radius: .55rem; background: var(--ink); color: white; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 4.75rem; padding: 0 4vw; border-bottom: 1px solid rgba(220, 227, 237, .9);
  background: rgba(245, 247, 251, .92); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: .98rem; letter-spacing: -.015em; }
.brand-copy small { margin-top: .25rem; color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 4px); align-items: end; gap: 3px; width: 1.95rem; height: 1.95rem; padding: 5px; border-radius: .55rem; background: var(--ink); }
.brand-mark i { display: block; border-radius: 2px; background: var(--teal-bright); }
.brand-mark i:nth-child(1) { height: 45%; } .brand-mark i:nth-child(2) { height: 100%; } .brand-mark i:nth-child(3) { height: 70%; }
nav { display: flex; align-items: center; gap: 1.35rem; }
nav a { position: relative; padding: 1.7rem 0 1.55rem; color: var(--muted); font-size: .88rem; font-weight: 680; text-decoration: none; }
nav a::after { position: absolute; bottom: 1rem; left: 0; width: 100%; height: 2px; border-radius: 2px; background: transparent; content: ""; }
nav a:hover, nav a.active { color: var(--ink); } nav a.active::after { background: var(--teal); }
.status-banner { display: flex; justify-content: center; gap: .75rem; padding: .6rem 4vw; background: var(--ink); color: #dfe7ff; font-size: .88rem; }
.status-banner strong { color: #ffd08a; }

main { overflow: hidden; }
.overview-shell, .content-section { width: min(1180px, 92vw); margin: 0 auto; }
.overview-shell { padding: 5rem 0 4.5rem; }
.content-section { padding: 6rem 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, .8fr); align-items: end; gap: 4rem; }
.intro-copy { max-width: 820px; }
.eyebrow, .section-kicker { margin: 0 0 .55rem; color: var(--teal); font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; line-height: 1.1; }
h1 { max-width: 830px; font-size: clamp(2.55rem, 5vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
h3 { font-size: 1.25rem; }
.lede { max-width: 750px; margin: 1.35rem 0 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .7rem; font-size: .92rem; font-weight: 750; text-decoration: none; }
.button-primary { border-color: var(--ink); background: var(--ink); color: white; }
.button-primary:hover { background: var(--ink-2); }
.button-quiet { background: rgba(255,255,255,.72); }
.button-quiet:hover { border-color: #aab6ca; background: white; }

.interpretation-card { position: relative; overflow: hidden; padding: 1.45rem; border: 1px solid rgba(62, 214, 195, .3); border-radius: var(--radius); background: var(--ink); color: white; box-shadow: var(--shadow); }
.interpretation-card::before { position: absolute; right: -2rem; top: -2rem; width: 10rem; height: 10rem; border: 1px solid rgba(62,214,195,.18); border-radius: 50%; box-shadow: 0 0 0 24px rgba(62,214,195,.04), 0 0 0 48px rgba(62,214,195,.025); content: ""; }
.interpretation-card h2 { margin-top: 1.2rem; font-size: 1rem; letter-spacing: -.01em; }
.interpretation-card p { position: relative; margin: .4rem 0 0; color: #c8d3eb; font-size: .9rem; }
.ledger-code { position: relative; color: var(--teal-bright); font: 750 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.ledger-rule { height: 1px; margin: 1.25rem 0; background: var(--line-dark); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin: 3.2rem 0 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--line); box-shadow: var(--shadow); }
.kpi { min-height: 148px; padding: 1.35rem; background: var(--surface); }
.kpi-primary { background: var(--ink); color: white; }
.kpi-label { display: block; margin-bottom: .65rem; color: var(--muted); font-size: .86rem; font-weight: 700; }
.kpi-primary .kpi-label, .kpi-primary > span:last-child { color: #c8d4ee; }
.kpi strong { display: block; margin-bottom: .15rem; font-size: clamp(2rem, 3.5vw, 3.15rem); letter-spacing: -.05em; }
.kpi > span:last-child { color: var(--ink-soft); font-size: .86rem; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.trend-panel { padding: clamp(1.35rem,3vw,2.2rem); }
.panel-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.panel-heading h2 { max-width: 680px; }
.panel-heading.compact h3 { margin-top: .15rem; font-size: 1.45rem; }
.panel-heading.compact > p { max-width: 440px; margin: 0; color: var(--muted); font-size: .9rem; }
.segmented { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); }
.segmented button { min-height: 38px; padding: .45rem .8rem; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); font-size: .84rem; font-weight: 750; cursor: pointer; }
.segmented button.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(11,23,57,.09); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.2rem; color: var(--ink-soft); font-size: .86rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend-line { display: inline-block; width: 1.8rem; height: 3px; border-radius: 99px; }
.chart-wrap { position: relative; margin-top: .6rem; }
.line-chart { display: block; width: 100%; min-height: 260px; overflow: visible; }
.chart-tooltip { position: absolute; display: none; z-index: 4; min-width: 150px; padding: .65rem .75rem; border-radius: .6rem; background: var(--ink); color: white; font-size: .82rem; pointer-events: none; box-shadow: 0 12px 30px rgba(11,23,57,.2); }
.chart-tooltip.visible { display: block; }
.chart-foot { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.chart-foot strong { color: var(--ink); }
.finding-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.finding-grid article { position: relative; padding: 2rem 2rem 2rem 3.4rem; }
.finding-grid article + article { border-left: 1px solid var(--line); }
.finding-number { position: absolute; left: 0; top: 2.1rem; color: var(--teal); font: 750 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.finding-grid p { margin: .65rem 0 0; color: var(--ink-soft); }

.institution-section { width: 100%; padding-inline: max(4vw, calc((100vw - 1180px)/2)); background: #eef2f8; }
.section-heading { margin-bottom: 2.2rem; }
.split-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.7fr); gap: 3rem; align-items: end; }
.split-heading > p { margin: 0; color: var(--ink-soft); }
.explorer-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.filter-row { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(140px,.7fr)); gap: 1rem; padding: 1.2rem; border-bottom: 1px solid var(--line); background: #fafbfe; }
.filter-row label { display: grid; gap: .4rem; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.filter-row input, .filter-row select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid #cbd4e2; border-radius: .6rem; background: white; color: var(--ink); font-size: .92rem; }
.explorer-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,.65fr); min-height: 530px; }
.table-panel { min-width: 0; border-right: 1px solid var(--line); }
.table-meta { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: var(--muted); font-size: .82rem; }
.table-meta strong { color: var(--ink); }
.table-scroll { max-height: 565px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { position: sticky; top: 0; z-index: 2; padding: .75rem .8rem; border-block: 1px solid var(--line); background: #f5f7fb; color: var(--muted); font-size: .74rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
th:nth-child(n+3), td:nth-child(n+3) { text-align: right; }
td { padding: .72rem .8rem; border-bottom: 1px solid #edf0f5; vertical-align: middle; }
tbody tr:hover, tbody tr.selected { background: #f1fbf9; }
.institution-button { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 720; text-align: left; cursor: pointer; }
.type-tag { display: inline-block; padding: .2rem .45rem; border-radius: .35rem; background: var(--blue-soft); color: #3852a7; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.institution-detail { padding: 1.5rem; background: linear-gradient(180deg,#fff,#f9fbfd); }
.institution-detail .empty-state { margin: 2rem 0; color: var(--muted); }
.profile-code { color: var(--teal); font: 750 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; }
.institution-detail h3 { margin-top: .75rem; font-size: 1.55rem; }
.profile-type { margin: .5rem 0 1.5rem; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: .7rem; background: var(--line); }
.profile-stats div { padding: .8rem; background: white; }
.profile-stats span { display: block; color: var(--muted); font-size: .72rem; }
.profile-stats strong { display: block; margin-top: .15rem; font-size: 1.3rem; }
.sparkline-label { display: flex; justify-content: space-between; margin: 1.4rem 0 .5rem; color: var(--muted); font-size: .76rem; }
.profile-sparkline { display: block; width: 100%; height: 140px; }
.profile-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: .82rem; }

.dark-section { position: relative; width: 100%; max-width: none; padding-inline: max(4vw, calc((100vw - 1180px)/2)); background: var(--ink); color: white; }
.dark-section::before { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle at center, var(--teal-bright) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom,black,transparent 80%); content: ""; pointer-events: none; }
.dark-section > * { position: relative; }
.split-heading.inverse > p { color: #c5d0e8; }
.dark-section .section-kicker { color: var(--teal-bright); }
.dual-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dark-panel { padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(17,31,66,.88); }
.metric-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.metric-heading span { color: #c8d3eb; font-size: .9rem; }
.metric-heading strong { color: var(--teal-bright); font-size: 1.35rem; letter-spacing: -.03em; }
.mini-chart { display: block; width: 100%; min-height: 210px; overflow: visible; }
.pairs-shell { display: grid; grid-template-columns: minmax(230px,.55fr) minmax(0,1.45fr); gap: 3rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line-dark); }
.pairs-shell h3 { font-size: 1.7rem; }
.pairs-note { color: #c5d0e8; }
.pair-list { display: grid; gap: .75rem; }
.pair-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line-dark); border-radius: .7rem; background: rgba(11,23,57,.76); }
.pair-names { min-width: 0; }
.pair-names strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.pair-names span { color: #99a7c5; font-size: .76rem; }
.pair-count { min-width: 3.4rem; color: var(--teal-bright); font-size: 1.2rem; font-weight: 800; text-align: right; }
.pair-bar { grid-column: 1/-1; height: 3px; overflow: hidden; border-radius: 99px; background: #2b3857; }
.pair-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal-bright),#7ae4d6); }

.robustness-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.7fr); gap: 1rem; }
.concentration-panel, .quality-panel, .sensitivity-panel { padding: clamp(1.3rem,3vw,2rem); }
.value-pair { min-width: 130px; text-align: right; }
.value-pair span, .value-pair small { display: block; color: var(--muted); font-size: .75rem; }
.value-pair strong { display: block; font-size: 2rem; letter-spacing: -.05em; }
.panel-note { margin: .8rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .86rem; }
.quality-panel h3 { margin-top: .2rem; font-size: 1.45rem; }
.quality-list { display: grid; gap: 1.5rem; margin-top: 2rem; }
.quality-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.meter { height: 7px; margin-top: .5rem; overflow: hidden; border-radius: 99px; background: #e8edf4; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.validation-state { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem; border: 1px solid #efc473; border-radius: .75rem; background: var(--danger-soft); }
.state-icon { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--saffron); color: var(--ink); font-weight: 850; }
.validation-state p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.sensitivity-panel { margin-top: 1rem; }
.sensitivity-list { display: grid; gap: .85rem; margin-top: 1.7rem; }
.sensitivity-row { display: grid; grid-template-columns: minmax(190px,1.1fr) minmax(170px,1.4fr) 95px 95px; gap: 1rem; align-items: center; }
.sensitivity-row strong { font-size: .86rem; }
.sensitivity-track { height: 10px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.sensitivity-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),var(--teal-bright)); }
.sensitivity-value, .sensitivity-correlation { color: var(--ink-soft); font-size: .82rem; text-align: right; }

.methods-section { padding-bottom: 4rem; }
.method-grid { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--line); }
.method-grid article { padding: 1.6rem; }
.method-grid article + article { border-left: 1px solid var(--line); }
.method-grid span { color: var(--teal); font: 750 .74rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.method-grid h3 { margin-top: 1rem; }
.method-grid p { margin: .65rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.download-shell { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: 3rem; margin-top: 3rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.download-shell h3 { font-size: 1.55rem; }
.download-shell p { color: var(--ink-soft); }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.download-grid a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: #fafbfe; text-decoration: none; }
.download-grid a:hover { border-color: #aebacf; background: white; }
.download-grid span { font-size: .86rem; font-weight: 700; }
.download-grid strong { color: var(--teal); font: 800 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.final-caveat { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); gap: 2rem; margin-top: 1rem; padding: 1.3rem 1.5rem; border-radius: .75rem; background: var(--ink); color: white; }
.final-caveat p { margin: 0; color: #c8d3eb; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2.5rem max(4vw,calc((100vw - 1180px)/2)); border-top: 1px solid var(--line); background: white; color: var(--muted); font-size: .82rem; }
footer div { display: grid; } footer strong { color: var(--ink); } footer p { margin: 0; text-align: right; }
.noscript { margin: 0; padding: 1rem; background: #fff3dc; text-align: center; }

@media (max-width: 980px) {
  .site-header { align-items: flex-start; padding-block: .8rem; }
  nav { max-width: 50vw; overflow-x: auto; gap: 1rem; }
  nav a { padding-block: .7rem; white-space: nowrap; } nav a::after { bottom: .25rem; }
  .hero-grid, .explorer-grid, .robustness-grid { grid-template-columns: 1fr; }
  .interpretation-card { max-width: 580px; }
  .table-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .institution-detail { min-height: 320px; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .method-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .method-grid article:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .site-header { position: static; display: block; }
  nav { max-width: none; margin-top: .8rem; gap: .85rem; }
  nav a { font-size: .8rem; }
  .status-banner { justify-content: flex-start; flex-wrap: wrap; }
  .overview-shell { padding-top: 3.5rem; }
  .hero-grid { gap: 2rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .panel-heading, .chart-foot, .metric-heading { align-items: flex-start; flex-direction: column; }
  .finding-grid, .dual-chart-grid, .pairs-shell, .split-heading, .download-shell, .final-caveat { grid-template-columns: 1fr; }
  .finding-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .pair-row { grid-template-columns: 1fr auto; }
  .sensitivity-row { grid-template-columns: minmax(150px,1fr) 80px 80px; }
  .sensitivity-row strong { grid-column: 1; grid-row: 1; }
  .sensitivity-track { grid-column: 1/-1; grid-row: 2; }
  .sensitivity-value { grid-column: 2; grid-row: 1; }
  .sensitivity-correlation { grid-column: 3; grid-row: 1; }
  footer { display: grid; } footer p { text-align: left; }
}

@media (max-width: 520px) {
  .status-banner { display: block; } .status-banner span { display: block; margin-top: .15rem; }
  .content-section { padding-block: 4rem; }
  .kpi-grid, .filter-row, .method-grid, .download-grid { grid-template-columns: 1fr; }
  .kpi { min-height: 125px; }
  .method-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .table-meta { display: grid; }
  th, td { padding-inline: .65rem; }
  .profile-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .hero-actions, .filter-row, .download-grid { display: none; } body { background: white; } .content-section, .overview-shell { width: 100%; padding: 1.5rem; } .panel, .explorer-shell { box-shadow: none; } }