:root {
  --ink: #0a1010;
  --paper: #f1f0eb;
  --paper-2: #e9e8e2;
  --night: #050708;
  --night-2: #0b1010;
  --mint: #79e9cd;
  --mint-soft: #c5fff1;
  --blue: #839fff;
  --muted: #5f6866;
  --line: rgba(10,16,16,.14);
  --light-line: rgba(255,255,255,.14);
  --shell: 1320px;
  --sans: Manrope, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --serif: Newsreader, Georgia, serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 10000; background: white; padding: 10px 14px; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 16px; }
.section-shell { width: min(calc(100% - 64px), var(--shell)); margin: 0 auto; }

.loader { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: var(--night); transition: opacity .7s cubic-bezier(.7,0,.2,1), visibility .7s; }
.loader-mark { color: #fff; font: 500 .8rem/1 var(--mono); letter-spacing: .42em; transform: translateX(.2em); }
.loader-line { position: absolute; top: 50%; width: 120px; height: 1px; margin-top: 24px; background: rgba(255,255,255,.12); overflow: hidden; }
.loader-line::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform: translateX(-100%); animation: loadline 1.1s ease forwards; }
.loaded .loader { opacity: 0; visibility: hidden; }
@keyframes loadline { to { transform: translateX(100%); } }

.site-header { position: fixed; z-index: 1200; inset: 0 0 auto; height: 82px; padding: 0 max(26px, calc((100vw - var(--shell))/2)); display: flex; align-items: center; justify-content: space-between; color: white; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, height .35s; }
.site-header.scrolled { height: 68px; background: rgba(5,7,8,.87); border-color: rgba(255,255,255,.1); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font: 500 .76rem/1 var(--mono); }
.brand-name { font-size: .91rem; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 34px; }
.desktop-nav a { position: relative; font-size: .78rem; color: rgba(255,255,255,.68); transition: color .2s; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--mint); transition: right .25s; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.profile-link { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint-soft); }
.profile-link span { margin-left: 5px; }
.menu-button { width: 42px; height: 42px; padding: 0; display: none; place-items: center; border: 1px solid rgba(255,255,255,.2); background: transparent; cursor: pointer; }
.menu-button span { position: absolute; width: 17px; height: 1px; background: white; transition: transform .25s; }
.menu-button span:first-child { transform: translateY(-3px); }
.menu-button span:last-child { transform: translateY(3px); }
.menu-open .menu-button span:first-child { transform: rotate(45deg); }
.menu-open .menu-button span:last-child { transform: rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 1100; inset: 0; padding: 110px 28px 40px; background: rgba(5,7,8,.98); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mobile-menu nav { display: grid; gap: 8px; }
.mobile-menu a { color: white; font-family: var(--serif); font-size: clamp(2.3rem, 11vw, 4rem); line-height: 1.05; border-bottom: 1px solid rgba(255,255,255,.1); padding: 10px 0; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }

.hero { min-height: 100vh; position: relative; display: grid; align-items: center; overflow: hidden; background: radial-gradient(circle at 77% 43%, rgba(85,147,140,.15), transparent 27%), radial-gradient(circle at 70% 80%, rgba(70,80,150,.12), transparent 34%), var(--night); color: white; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.18) 55%, transparent); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,8,.16), transparent 50%, rgba(5,7,8,.12)); pointer-events: none; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.sequence { position: absolute; z-index: 1; color: rgba(189,252,239,.18); font: 400 .62rem/1 var(--mono); letter-spacing: .28em; white-space: nowrap; text-transform: uppercase; }
.sequence-a { left: -40px; bottom: 75px; transform: rotate(-90deg); transform-origin: left bottom; }
.sequence-b { right: 34px; top: 125px; }
.hero-inner { position: relative; z-index: 2; width: min(calc(100% - 64px), 1440px); margin: 0 auto; padding: 132px 0 90px; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(520px, .94fr); gap: 32px; align-items: center; }
.hero-copy { max-width: 790px; padding-top: 24px; }
.overline { display: flex; align-items: center; gap: 12px; margin: 0 0 34px; color: rgba(255,255,255,.62); font: 500 .65rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.overline span { width: 34px; height: 1px; background: var(--mint); }
.hero h1 { margin: 0; }
.name-line { display: block; margin-bottom: 25px; color: rgba(255,255,255,.7); font: 600 clamp(.9rem, 1.35vw, 1.15rem)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.statement { display: block; font: 500 clamp(3.8rem, 6.25vw, 7.3rem)/.88 var(--serif); letter-spacing: -.055em; }
.statement em { color: var(--mint-soft); font-weight: 500; }
.hero-intro { max-width: 680px; margin: 32px 0 0; color: rgba(255,255,255,.64); font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.8; }
.hero-links { margin-top: 35px; display: flex; flex-wrap: wrap; gap: 11px; }
.button { min-height: 50px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; border: 1px solid rgba(255,255,255,.16); font-size: .8rem; font-weight: 700; transition: transform .22s, background .22s, color .22s, border-color .22s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--mint); color: #06100d; border-color: var(--mint); }
.button-primary:hover { background: var(--mint-soft); }
.button-quiet { color: rgba(255,255,255,.76); background: rgba(255,255,255,.02); }
.button-quiet:hover { border-color: rgba(255,255,255,.45); color: white; }
.affiliation-line { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 45px; color: rgba(255,255,255,.38); font: 500 .66rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.affiliation-line span + span::before { content: "•"; margin-right: 24px; color: var(--mint); }

.hero-art { position: relative; display: grid; place-items: center; min-height: 650px; }
.art-frame { position: relative; width: min(100%, 650px); aspect-ratio: 1; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 120px rgba(0,0,0,.35), inset 0 0 80px rgba(125,233,205,.025); transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.art-frame::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.055); }
.frame-corner { position: absolute; width: 20px; height: 20px; z-index: 2; }
.corner-tl { left: -1px; top: -1px; border-left: 2px solid var(--mint); border-top: 2px solid var(--mint); }
.corner-tr { right: -1px; top: -1px; border-right: 2px solid var(--mint); border-top: 2px solid var(--mint); }
.corner-bl { left: -1px; bottom: -1px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); }
.corner-br { right: -1px; bottom: -1px; border-right: 2px solid var(--mint); border-bottom: 2px solid var(--mint); }
.art-topline { position: absolute; z-index: 3; left: 32px; right: 32px; top: 28px; display: flex; justify-content: space-between; color: rgba(255,255,255,.4); font: 500 .56rem/1 var(--mono); letter-spacing: .14em; }
.art-frame > svg { width: 100%; height: 100%; }
.orbit-group { stroke: rgba(255,255,255,.07); stroke-width: 1; fill: none; stroke-dasharray: 4 9; transform-origin: 362px 360px; animation: orbitspin 55s linear infinite; }
.phylo { stroke: url(#cyanGlow); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 7; animation: trace 15s linear infinite; }
.phylo circle:not(.pulse-node) { fill: #dffff7; stroke: none; }
.pulse-node { fill: rgba(121,233,205,.12); stroke: var(--mint); stroke-width: 1.5; animation: pulse 3s ease-in-out infinite; transform-origin: center; }
.pulse-node.delay { animation-delay: -1.5s; }
.connector { stroke: rgba(121,233,205,.55); stroke-width: 1.4; fill: var(--mint); stroke-dasharray: 3 6; }
.protein { fill: none; stroke: url(#cyanGlow); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 11; animation: traceReverse 18s linear infinite; }
.protein-secondary { stroke: rgba(153,178,255,.48); stroke-width: 2; }
.protein-nodes { fill: #e7fff9; }
.host-orbs { fill: var(--mint); animation: drift 5s ease-in-out infinite; transform-origin: 594px 120px; }
.art-labels { fill: rgba(255,255,255,.38); font: 500 10px var(--mono); letter-spacing: 1.3px; }
.art-readout { position: absolute; left: 30px; right: 30px; bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px; }
.art-readout div { padding-right: 12px; }
.art-readout small { display: block; color: rgba(255,255,255,.32); font: 500 .52rem/1 var(--mono); letter-spacing: .12em; }
.art-readout strong { display: block; margin-top: 7px; color: rgba(255,255,255,.8); font: 500 .66rem/1 var(--mono); }
.scroll-cue { position: absolute; z-index: 3; left: max(32px, calc((100vw - 1440px)/2)); bottom: 24px; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.34); font: 500 .58rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 44px; height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform: translateX(-100%); animation: scrollline 2.2s ease infinite; }
@keyframes trace { to { stroke-dashoffset: -200; } }
@keyframes traceReverse { to { stroke-dashoffset: 220; } }
@keyframes orbitspin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .25; transform: scale(1.45); } }
@keyframes drift { 50% { transform: translateY(-7px) translateX(4px); } }
@keyframes scrollline { 50%,100% { transform: translateX(100%); } }

.section-index { margin: 0 0 42px; color: #68716f; font: 500 .62rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.manifesto { padding: 150px 0 125px; background: var(--paper); }
.manifesto-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 90px; align-items: start; }
.manifesto h2, .section-heading h2, .about h2, .contact h2 { margin: 0; font: 500 clamp(3.1rem, 5.4vw, 6.15rem)/.98 var(--serif); letter-spacing: -.047em; }
.manifesto h2 em, .section-heading h2 em, .about h2 em, .contact h2 em { font-weight: 500; color: #25725f; }
.manifesto-grid > div { padding-top: 12px; }
.manifesto-grid p { margin: 0 0 20px; color: #56605e; font-size: 1rem; line-height: 1.85; }
.manifesto-grid .lead { color: var(--ink); font: 500 clamp(1.35rem, 2vw, 1.75rem)/1.45 var(--serif); }
.research-spectrum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 105px; background: var(--line); border: 1px solid var(--line); }
.spectrum-card { min-height: 440px; position: relative; padding: 38px 34px 32px; background: var(--paper); overflow: hidden; transition: background .3s, color .3s, transform .3s; }
.spectrum-card::after { content: attr(data-number); position: absolute; top: 24px; right: 26px; color: #8a918f; font: 500 .6rem/1 var(--mono); }
.spectrum-card:hover { background: var(--night-2); color: white; transform: translateY(-8px); }
.spectrum-card h3 { margin: 40px 0 16px; max-width: 300px; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.025em; }
.spectrum-card p { margin: 0; color: #68716f; font-size: .9rem; line-height: 1.75; transition: color .3s; }
.spectrum-card:hover p { color: rgba(255,255,255,.58); }
.tags { position: absolute; left: 34px; right: 34px; bottom: 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { border: 1px solid var(--line); padding: 5px 8px; color: #6a7471; font: 500 .55rem/1 var(--mono); text-transform: uppercase; transition: border-color .3s, color .3s; }
.spectrum-card:hover .tags span { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.56); }
.spectrum-icon { height: 74px; width: 108px; position: relative; color: #277964; }
.tree-icon span { position: absolute; height: 1px; background: currentColor; }
.tree-icon span:nth-child(1) { width: 75px; left: 0; top: 36px; }
.tree-icon span:nth-child(2) { width: 45px; left: 40px; top: 18px; transform: rotate(-36deg); transform-origin: left; }
.tree-icon span:nth-child(3) { width: 45px; left: 40px; top: 54px; transform: rotate(36deg); transform-origin: left; }
.tree-icon span:nth-child(4) { width: 25px; right: 0; top: 18px; box-shadow: 0 36px 0 currentColor; }
.helix-icon { display: flex; align-items: center; gap: 7px; }
.helix-icon i { width: 25px; height: 66px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; border-radius: 50%; transform: rotate(28deg); }
.graph-icon b { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.graph-icon b:nth-child(1) { left: 3px; top: 33px; }.graph-icon b:nth-child(2) { left: 46px; top: 7px; }.graph-icon b:nth-child(3) { left: 53px; top: 57px; }.graph-icon b:nth-child(4) { right: 0; top: 24px; }.graph-icon b:nth-child(5) { right: 16px; bottom: 0; }
.graph-icon::before, .graph-icon::after { content: ""; position: absolute; height: 1px; width: 72px; background: currentColor; left: 10px; top: 35px; transform: rotate(-25deg); transform-origin: left; box-shadow: 2px 11px 0 currentColor; }
.graph-icon::after { left: 55px; top: 12px; width: 54px; transform: rotate(27deg); box-shadow: 0 43px 0 currentColor; }
.spectrum-card:hover .spectrum-icon { color: var(--mint); }

.program { padding: 145px 0; background: #07100e; color: white; }
.light-heading .section-index { color: rgba(255,255,255,.37); }
.light-heading h2 em { color: var(--mint-soft); }
.program-list { margin-top: 90px; }
.program-item { position: relative; display: grid; grid-template-columns: 70px 1.05fr .95fr; gap: 50px; align-items: center; min-height: 430px; padding: 70px 0; border-top: 1px solid rgba(255,255,255,.13); }
.program-item:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.program-number { align-self: start; color: var(--mint); font: 500 .72rem/1 var(--mono); }
.program-label { margin: 0 0 15px; color: rgba(255,255,255,.36); font: 500 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.program-copy h3 { margin: 0 0 22px; max-width: 600px; font: 500 clamp(2.1rem, 3.5vw, 4rem)/1.03 var(--serif); letter-spacing: -.035em; }
.program-copy > p:not(.program-label) { max-width: 610px; margin: 0; color: rgba(255,255,255,.57); line-height: 1.8; }
.program-copy ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 29px 0 0; }
.program-copy li { border: 1px solid rgba(255,255,255,.13); padding: 6px 10px; color: rgba(255,255,255,.55); font: 500 .55rem/1 var(--mono); text-transform: uppercase; }
.program-visual { height: 310px; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(121,233,205,.08), transparent 56%); }
.program-visual svg { width: 100%; max-width: 530px; }
.program-visual path { fill: none; stroke: rgba(121,233,205,.67); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visual-tree svg g path, .visual-tree svg > path { stroke-dasharray: 7 8; animation: trace 13s linear infinite; }
.visual-tree circle, .visual-protein circle { fill: #dcfff7; }
.visual-protein > svg > path:first-child { stroke-width: 7; stroke: url(#cyanGlow); stroke-dasharray: 13 10; animation: traceReverse 16s linear infinite; }
.visual-protein > svg > path:nth-child(2) { stroke: rgba(131,159,255,.45); }
.visual-graph .edges { fill: none; stroke: rgba(121,233,205,.36); stroke-width: 1.5; }
.visual-graph .nodes circle { fill: #0c1b18; stroke: var(--mint); stroke-width: 2; }

.publications { padding: 145px 0; background: var(--paper); }
.section-heading { margin-bottom: 70px; }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.split-heading > p { max-width: 520px; margin: 0 0 6px; color: #636d6a; }
.publication-feature { position: relative; padding: 52px 54px; margin-bottom: 52px; background: #0a1110; color: white; overflow: hidden; }
.publication-feature::before { content: ""; position: absolute; width: 460px; height: 460px; right: -140px; top: -180px; border: 1px solid rgba(121,233,205,.2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(121,233,205,.025), 0 0 0 140px rgba(131,159,255,.02); }
.feature-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.42); font: 500 .56rem/1 var(--mono); letter-spacing: .13em; }
.publication-feature h3 { position: relative; z-index: 1; max-width: 980px; margin: 70px 0 20px; font: 500 clamp(2.4rem, 4.2vw, 5rem)/1.03 var(--serif); letter-spacing: -.04em; }
.publication-feature > p { position: relative; z-index: 1; max-width: 750px; margin: 0; color: rgba(255,255,255,.57); }
.feature-authors { position: relative; z-index: 1; max-width: 880px; margin-top: 35px; color: rgba(255,255,255,.35); font-size: .72rem; line-height: 1.7; }
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.publication-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 12px; }
.publication-tabs { display: none; flex-wrap: wrap; gap: 7px; }
html.js .publication-tabs { display: flex; }
html.js .publication-row.is-filtered { display: none; }
.publication-tabs button { border: 1px solid var(--line); background: transparent; padding: 8px 12px; cursor: pointer; color: #66706d; font: 500 .58rem/1 var(--mono); text-transform: uppercase; transition: background .2s, color .2s; }
.publication-tabs button.active, .publication-tabs button:hover { background: var(--ink); color: white; }
.publication-toolbar > a { color: #276e5c; font-size: .77rem; font-weight: 700; }
.publication-list { border-top: 1px solid var(--line); }
.publication-row { display: grid; grid-template-columns: 75px 1fr 40px; gap: 25px; padding: 30px 0; border-bottom: 1px solid var(--line); animation: listIn .45s both; animation-delay: var(--delay); }
@keyframes listIn { from { opacity: 0; transform: translateY(8px); } }
.pub-year { padding-top: 4px; color: #60706c; font: 500 .66rem/1 var(--mono); }
.pub-status { margin-bottom: 8px; color: #297763; font: 500 .56rem/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.pub-main h3 { margin: 0; max-width: 1000px; font: 600 clamp(1.12rem, 1.75vw, 1.48rem)/1.36 var(--sans); letter-spacing: -.025em; }
.pub-authors { margin: 10px 0 0; color: #6b7472; font-size: .77rem; }
.pub-authors strong { color: var(--ink); }
.pub-venue { margin: 6px 0 0; color: #4f5957; font: 500 .67rem/1.4 var(--mono); }
.pub-arrow { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); transition: background .2s, color .2s; }
.pub-arrow:hover { background: var(--ink); color: white; }
.pub-arrow.muted { color: #a8aeac; }

.conferences { padding: 145px 0; background: #0b1010; color: white; }
.conferences .split-heading > p { color: rgba(255,255,255,.48); }
.conference-stage { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: start; }
.conference-spotlight { position: sticky; top: 100px; min-height: 470px; padding: 42px; background: linear-gradient(150deg, rgba(121,233,205,.13), rgba(131,159,255,.045)); border: 1px solid rgba(255,255,255,.13); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.conference-spotlight::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(121,233,205,.17); border-radius: 50%; right: -120px; bottom: -140px; box-shadow: 0 0 0 55px rgba(121,233,205,.025); }
.spotlight-year { color: var(--mint); font: 500 .68rem/1 var(--mono); }
.spotlight-type { color: rgba(255,255,255,.35); font: 500 .55rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.conference-spotlight h3 { margin: 15px 0 18px; font: 500 clamp(2rem, 3vw, 3.3rem)/1.05 var(--serif); letter-spacing: -.035em; }
.conference-spotlight p { margin: 0; color: rgba(255,255,255,.48); font-size: .78rem; }
.conference-list { border-top: 1px solid rgba(255,255,255,.13); }
.conference-list article { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.conference-list article > div:first-child { display: grid; align-content: start; gap: 8px; }
.conference-list span { color: var(--mint); font: 500 .65rem/1 var(--mono); }
.conference-list small { color: rgba(255,255,255,.29); font: 500 .52rem/1 var(--mono); text-transform: uppercase; }
.conference-list h3 { margin: 0; font-size: 1.08rem; line-height: 1.45; }
.conference-list p { margin: 8px 0 0; color: rgba(255,255,255,.42); font-size: .74rem; }

.about { padding: 145px 0; background: var(--paper-2); }
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; align-items: center; }
.about-portrait { position: relative; min-height: 680px; background: #131817; overflow: hidden; }
.about-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,8,.88), transparent 48%); }
.about-portrait img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; filter: grayscale(100%) contrast(1.05); opacity: .87; }
.portrait-monogram { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(121,233,205,.12); font: 500 clamp(4rem, 10vw, 9rem)/1 var(--mono); letter-spacing: .12em; }
.portrait-caption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 27px; display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font: 500 .55rem/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.about-copy .lead { margin: 38px 0 18px; color: #27302e; font: 500 clamp(1.28rem, 2vw, 1.7rem)/1.5 var(--serif); }
.about-copy > p:not(.lead) { max-width: 760px; color: #606a67; }
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 44px 0 34px; background: var(--line); border: 1px solid var(--line); }
.about-facts div { min-height: 105px; padding: 22px; background: var(--paper-2); }
.about-facts small { display: block; margin-bottom: 10px; color: #6f7976; font: 500 .56rem/1 var(--mono); text-transform: uppercase; }
.about-facts strong { display: block; font-size: .86rem; line-height: 1.4; }
.text-link { display: inline-flex; align-items: center; gap: 40px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: .8rem; font-weight: 700; }

.news { padding: 145px 0; background: var(--paper); }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.news-card { position: relative; min-height: 270px; padding: 30px; background: var(--paper); transition: background .25s, color .25s; }
.news-card:hover { background: #0a1110; color: white; }
.news-meta { display: flex; justify-content: space-between; gap: 20px; color: #737c79; font: 500 .55rem/1 var(--mono); text-transform: uppercase; }
.news-card:hover .news-meta { color: rgba(255,255,255,.42); }
.news-card h3 { margin: 60px 0 0; max-width: 520px; font: 500 clamp(1.45rem, 2.2vw, 2.2rem)/1.22 var(--serif); letter-spacing: -.025em; }
.news-arrow { position: absolute; right: 28px; bottom: 25px; color: #337966; }
.news-card:hover .news-arrow { color: var(--mint); }

.contact { position: relative; padding: 150px 0 95px; background: #050708; color: white; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 760px; height: 760px; right: -200px; top: -300px; border: 1px solid rgba(121,233,205,.11); border-radius: 50%; box-shadow: 0 0 0 110px rgba(121,233,205,.018), 0 0 0 220px rgba(131,159,255,.012); }
#contact-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.contact-inner { position: relative; z-index: 2; }
.contact .section-index { color: rgba(255,255,255,.35); }
.contact h2 { max-width: 1050px; }
.contact h2 em { color: var(--mint-soft); }
.contact-inner > p:not(.section-index) { max-width: 650px; margin: 34px 0 40px; color: rgba(255,255,255,.52); }
.contact-email { display: inline-flex; align-items: center; gap: 36px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.55); font: 500 clamp(1.25rem, 2.5vw, 2rem)/1 var(--mono); color: var(--mint-soft); }
.social-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 85px; }
.social-links a { border: 1px solid rgba(255,255,255,.14); padding: 10px 13px; color: rgba(255,255,255,.58); font: 500 .58rem/1 var(--mono); text-transform: uppercase; transition: background .2s, color .2s; }
.social-links a:hover { background: var(--mint); color: #06100d; border-color: var(--mint); }
footer { background: #050708; color: rgba(255,255,255,.28); border-top: 1px solid rgba(255,255,255,.09); }
.footer-inner { width: min(calc(100% - 64px), var(--shell)); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 25px; font: 500 .55rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.footer-inner a { color: rgba(255,255,255,.55); }

.reveal { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { transform: none; }
.program-item:nth-child(2) { transition-delay: .08s; }.program-item:nth-child(3) { transition-delay: .16s; }
.spectrum-card:nth-child(2) { transition-delay: .08s; }.spectrum-card:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 18px; margin-right: 22px; }
  .hero-inner { grid-template-columns: 1fr 500px; }
  .hero-art { min-height: 540px; }
  .program-item { grid-template-columns: 55px 1fr .78fr; gap: 30px; }
  .about-grid { gap: 55px; }
}

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .hero { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 145px; }
  .hero-copy { max-width: 860px; }
  .hero-art { min-height: auto; margin-top: 30px; }
  .art-frame { max-width: 670px; }
  .scroll-cue { display: none; }
  .manifesto-grid, .split-heading, .conference-stage, .about-grid { grid-template-columns: 1fr; gap: 42px; }
  .research-spectrum { grid-template-columns: 1fr; }
  .spectrum-card { min-height: 350px; }
  .program-item { grid-template-columns: 42px 1fr; }
  .program-visual { grid-column: 2; height: 280px; }
  .conference-spotlight { position: relative; top: auto; min-height: 390px; }
  .about-portrait { min-height: 560px; max-width: 620px; }
  .about-portrait img { min-height: 560px; }
}

@media (max-width: 680px) {
  .section-shell, .hero-inner, .footer-inner { width: min(calc(100% - 34px), var(--shell)); }
  .site-header { padding-inline: 17px; height: 70px; }
  .brand-name { display: none; }
  .profile-link { display: none; }
  .hero-inner { padding-top: 116px; padding-bottom: 70px; }
  .overline { margin-bottom: 26px; }
  .statement { font-size: clamp(3.25rem, 16vw, 5rem); }
  .hero-intro { line-height: 1.7; }
  .affiliation-line { display: grid; gap: 8px; }
  .affiliation-line span + span::before { display: none; }
  .hero-art { margin-inline: -7px; }
  .art-frame { width: 100%; }
  .art-topline { left: 20px; right: 20px; }
  .art-readout { left: 18px; right: 18px; }
  .sequence { display: none; }
  .manifesto, .program, .publications, .conferences, .about, .news { padding: 95px 0; }
  .section-index { margin-bottom: 28px; }
  .manifesto h2, .section-heading h2, .about h2, .contact h2 { font-size: clamp(2.75rem, 13vw, 4.7rem); }
  .manifesto-grid { gap: 32px; }
  .research-spectrum { margin-top: 65px; }
  .spectrum-card { padding: 30px 25px; }
  .tags { left: 25px; right: 25px; }
  .program-list { margin-top: 55px; }
  .program-item { grid-template-columns: 1fr; padding: 48px 0; }
  .program-number { grid-row: 1; }
  .program-visual { grid-column: 1; height: 230px; }
  .publication-feature { padding: 32px 25px; }
  .publication-feature h3 { margin-top: 45px; }
  .feature-meta { display: grid; }
  .publication-toolbar { align-items: flex-start; flex-direction: column; }
  .publication-row { grid-template-columns: 48px 1fr; gap: 14px; padding: 25px 0; }
  .pub-arrow { grid-column: 2; }
  .conference-spotlight { padding: 30px 25px; }
  .conference-list article { grid-template-columns: 60px 1fr; }
  .about-portrait, .about-portrait img { min-height: 480px; }
  .about-facts, .news-grid { grid-template-columns: 1fr; }
  .contact { padding: 105px 0 72px; }
  .contact-email { font-size: 1rem; gap: 18px; }
  .social-links { margin-top: 60px; }
  .footer-inner { min-height: 120px; display: grid; align-content: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== 2026 research-program expansion ===== */
.hero-scan { position: absolute; z-index: 2; left: 23px; right: 23px; height: 1px; top: 23px; background: linear-gradient(90deg, transparent, rgba(121,233,205,.55), transparent); box-shadow: 0 0 20px rgba(121,233,205,.22); animation: scanframe 7s ease-in-out infinite; pointer-events: none; }
@keyframes scanframe { 0%,100% { transform: translateY(0); opacity: 0; } 12%,85% { opacity: .72; } 50% { transform: translateY(596px); opacity: .35; } }
.flow-particle { fill: #e9fff9; stroke: none; filter: drop-shadow(0 0 6px rgba(121,233,205,.9)); }
.ha-structure { fill: none; }
.ha-chain path { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 13 7; }
.chain-one > path:first-child { stroke: url(#chainA); animation: traceReverse 17s linear infinite; }
.chain-two > path:first-child { stroke: url(#chainB); animation: trace 19s linear infinite; }
.chain-three > path:first-child { stroke: url(#chainC); animation: traceReverse 21s linear infinite; }
.ha-chain .ribbon-thin { stroke: rgba(229,255,249,.42); stroke-width: 2.2; stroke-dasharray: 4 7; animation: trace 12s linear infinite; }
.beta-sheets { fill: rgba(143,170,255,.55); stroke: rgba(200,214,255,.76); stroke-width: 1; animation: sheetFloat 5.5s ease-in-out infinite; transform-origin: 520px 240px; }
.rbs-highlight ellipse { fill: rgba(121,233,205,.04); stroke: rgba(121,233,205,.68); stroke-width: 1.4; stroke-dasharray: 4 6; animation: rbsPulse 3.6s ease-in-out infinite; transform-origin: 520px 174px; }
.rbs-highlight circle { fill: #e9fff9; }
.rbs-highlight path { fill: none; stroke: rgba(199,255,241,.74); stroke-width: 2; }
.glycans { fill: #c9fff2; stroke: rgba(121,233,205,.75); stroke-width: 1.4; stroke-linecap: round; animation: glycanSway 4.4s ease-in-out infinite; transform-origin: 520px 250px; }
.host-orbs { fill: var(--mint); animation: drift 5s ease-in-out infinite; transform-origin: 626px 116px; }
.host-orbs path { fill: none; stroke: rgba(121,233,205,.36); stroke-width: 1; stroke-dasharray: 3 5; }
@keyframes rbsPulse { 50% { transform: scale(1.07); opacity: .55; } }
@keyframes glycanSway { 50% { transform: rotate(2.4deg) translateY(-4px); } }
@keyframes sheetFloat { 50% { transform: translateY(-5px) rotate(.8deg); } }

.program { background: radial-gradient(circle at 82% 22%, rgba(70,132,119,.11), transparent 28%), #07100e; }
.program-item { grid-template-columns: 58px minmax(0, 1.13fr) minmax(380px, .87fr); gap: 44px; min-height: 570px; padding: 86px 0; }
.program-copy h3 { max-width: 710px; font-size: clamp(2.2rem, 3.45vw, 4.15rem); }
.program-copy .project-question { max-width: 690px; margin: 0 0 18px; color: var(--mint-soft); font: 500 clamp(1.05rem, 1.35vw, 1.28rem)/1.5 var(--serif); }
.program-copy .project-summary { max-width: 710px; color: rgba(255,255,255,.54); font-size: .88rem; line-height: 1.85; }
.project-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 28px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.project-metrics span { min-height: 62px; padding: 13px 12px; display: grid; align-items: center; background: #081310; color: rgba(255,255,255,.65); font: 500 .55rem/1.45 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.program-copy ul { margin-top: 18px; }
.program-visual { position: relative; height: 390px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 52% 48%, rgba(121,233,205,.1), transparent 54%), linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.004)); }
.program-visual::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.045); pointer-events: none; }
.program-visual svg { position: relative; z-index: 2; }
.program-visual text { fill: rgba(255,255,255,.38); font: 500 9px var(--mono); letter-spacing: 1px; }
.atlas-tree path { stroke: rgba(121,233,205,.7); stroke-dasharray: 7 8; animation: trace 14s linear infinite; }
.atlas-flow path { stroke: rgba(131,159,255,.46); stroke-dasharray: 4 7; animation: traceReverse 11s linear infinite; }
.phenotype-rings { fill: none; stroke: rgba(121,233,205,.27); stroke-width: 1; transform-origin: 426px 158px; animation: orbitspin 28s linear infinite; }
.atlas-nodes circle { fill: #dffff7; filter: drop-shadow(0 0 7px rgba(121,233,205,.65)); }
.visual-label { fill: rgba(255,255,255,.36) !important; }
.globe-lines { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.global-arcs { fill: none; stroke: rgba(121,233,205,.62); stroke-width: 1.8; stroke-dasharray: 6 7; animation: trace 12s linear infinite; }
.global-nodes circle { fill: #dffff7; stroke: rgba(121,233,205,.55); stroke-width: 3; animation: globalNode 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.global-nodes circle:nth-child(2n) { animation-delay: -1.7s; }
.global-timeline path { stroke: rgba(255,255,255,.18); }
.global-timeline circle { fill: var(--mint); }
.project-orbit { position: absolute; z-index: 1; width: 260px; height: 260px; border: 1px solid rgba(121,233,205,.08); border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%,-50%); }
.project-orbit.orbit-b { width: 320px; height: 320px; border-style: dashed; animation: orbitspin 44s linear infinite; }
@keyframes globalNode { 50% { opacity: .4; transform: scale(1.45); } }
.input-stream rect, .model-output rect { fill: rgba(121,233,205,.05); stroke: rgba(121,233,205,.38); stroke-width: 1; }
.input-stream text, .model-output text { fill: rgba(255,255,255,.55); font: 500 8px var(--mono); letter-spacing: .7px; }
.model-edges { fill: none; stroke: rgba(121,233,205,.34); stroke-width: 1.2; stroke-dasharray: 4 6; animation: trace 10s linear infinite; }
.model-nodes circle { fill: #0a1815; stroke: var(--mint); stroke-width: 1.8; filter: drop-shadow(0 0 7px rgba(121,233,205,.28)); }
.model-output path { stroke: rgba(131,159,255,.6); stroke-dasharray: 4 5; }
.attention-rings { fill: none; stroke: rgba(131,159,255,.2); stroke-width: 1; transform-origin: 302px 146px; animation: attention 4.4s ease-in-out infinite; }
.model-pulse { position: absolute; z-index: 1; width: 160px; height: 160px; left: 56%; top: 43%; border-radius: 50%; background: radial-gradient(circle, rgba(121,233,205,.12), transparent 68%); animation: modelPulse 4s ease-in-out infinite; }
@keyframes attention { 50% { transform: scale(1.18); opacity: .3; } }
@keyframes modelPulse { 50% { transform: scale(1.25); opacity: .45; } }

.foundations { padding: 145px 0 125px; background: var(--paper-2); }
.foundation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.foundation-card { position: relative; min-height: 610px; padding: 30px; background: var(--paper-2); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s; }
.foundation-card:hover { z-index: 2; transform: translateY(-9px); background: #0a1110; color: white; box-shadow: 0 28px 70px rgba(20,30,27,.13); }
.foundation-top { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.foundation-top > span { color: #277964; font: 500 .68rem/1 var(--mono); }
.foundation-top small { max-width: 250px; color: #737d7a; font: 500 .55rem/1.4 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.foundation-card:hover .foundation-top > span { color: var(--mint); }
.foundation-card:hover .foundation-top small { color: rgba(255,255,255,.4); }
.foundation-visual { position: relative; height: 210px; margin: 38px 0 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(10,16,16,.09); background: radial-gradient(circle at center, rgba(43,121,99,.07), transparent 64%); }
.foundation-card:hover .foundation-visual { border-color: rgba(255,255,255,.09); background: radial-gradient(circle at center, rgba(121,233,205,.1), transparent 64%); }
.foundation-card h3 { margin: 0 0 16px; max-width: 360px; font: 500 clamp(1.65rem, 2vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.03em; }
.foundation-card > p { margin: 0; color: #626d69; font-size: .82rem; line-height: 1.75; }
.foundation-card:hover > p { color: rgba(255,255,255,.53); }
.foundation-tags { position: absolute; left: 30px; right: 30px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 6px; }
.foundation-tags span { padding: 5px 8px; border: 1px solid rgba(10,16,16,.12); color: #68736f; font: 500 .51rem/1 var(--mono); text-transform: uppercase; }
.foundation-card:hover .foundation-tags span { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
.consensus-lines { display: grid; gap: 12px; width: min(80%, 320px); color: rgba(26,104,82,.55); font: 500 .7rem/1 var(--mono); letter-spacing: .14em; }
.consensus-lines span { opacity: .55; animation: sequenceShift 5s ease-in-out infinite; }
.consensus-lines span:nth-child(2) { animation-delay: -.9s; }.consensus-lines span:nth-child(3) { animation-delay: -1.8s; }
.consensus-lines strong { padding-top: 14px; border-top: 1px solid rgba(39,121,100,.24); color: #1d745c; }
.foundation-card:hover .consensus-lines { color: rgba(121,233,205,.52); }.foundation-card:hover .consensus-lines strong { color: var(--mint); border-color: rgba(121,233,205,.25); }
@keyframes sequenceShift { 50% { transform: translateX(12px); opacity: 1; } }
.proline-helix { position: absolute; top: 34px; left: 50%; width: 168px; height: 90px; transform: translateX(-50%); display: flex; align-items: center; }
.proline-helix i { width: 36px; height: 82px; margin-left: -8px; border-left: 1px solid #28765f; border-right: 1px solid #28765f; border-radius: 50%; transform: rotate(31deg); animation: helixBreath 3.2s ease-in-out infinite; }
.proline-helix i:nth-child(2n) { animation-delay: -1.6s; }
.scan-sequence { position: absolute; left: 25px; right: 25px; bottom: 31px; display: grid; grid-template-columns: repeat(10, 1fr); border-top: 1px solid rgba(10,16,16,.12); padding-top: 18px; font: 500 .6rem/1 var(--mono); text-align: center; }
.scan-sequence span.p { color: #14785e; transform: translateY(-8px); font-weight: 700; animation: prolinePulse 2.5s ease-in-out infinite; }
.scan-sequence span.p:nth-child(6) { animation-delay: -.8s; }.scan-sequence span.p:nth-child(9) { animation-delay: -1.6s; }
.foundation-card:hover .proline-helix i { border-color: var(--mint); }.foundation-card:hover .scan-sequence { border-color: rgba(255,255,255,.13); }.foundation-card:hover .scan-sequence span.p { color: var(--mint); }
@keyframes helixBreath { 50% { transform: rotate(31deg) scaleY(.84); opacity: .55; } }
@keyframes prolinePulse { 50% { transform: translateY(-12px) scale(1.3); } }
.virus-orbit { position: relative; width: 155px; height: 155px; border: 1px dashed rgba(39,121,100,.34); border-radius: 50%; animation: orbitspin 22s linear infinite; }
.virus-core { position: absolute; inset: 50% auto auto 50%; width: 52px; height: 52px; transform: translate(-50%,-50%); display: grid; place-items: center; border-radius: 50%; background: #1e765e; color: white; font: 500 .65rem/1 var(--mono); box-shadow: 0 0 0 13px rgba(39,121,100,.08); }
.virus-orbit b { --angle: calc(var(--i) * 90deg); position: absolute; left: 50%; top: 50%; transform: rotate(var(--angle)) translateX(94px) rotate(calc(var(--angle) * -1)); color: #3a6e60; font: 500 .52rem/1 var(--mono); }
.foundation-card:hover .virus-orbit { border-color: rgba(121,233,205,.45); }.foundation-card:hover .virus-core { background: var(--mint); color: #07100e; }.foundation-card:hover .virus-orbit b { color: var(--mint-soft); }
.virus-ribbon { margin-top: 48px; padding: 18px 0; display: flex; align-items: center; justify-content: center; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #606a67; font: 500 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; overflow: hidden; }
.virus-ribbon i { width: 18px; height: 1px; background: #2d7863; }

.learning { position: relative; padding: 145px 0; background: radial-gradient(circle at 15% 50%, rgba(63,118,108,.12), transparent 28%), #07100e; color: white; overflow: hidden; }
#learning-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.learning::after { content: ""; position: absolute; width: 680px; height: 680px; right: -260px; top: -260px; border: 1px solid rgba(121,233,205,.1); border-radius: 50%; box-shadow: 0 0 0 100px rgba(121,233,205,.018), 0 0 0 200px rgba(131,159,255,.012); }
.learning-inner { position: relative; z-index: 2; }
.learning .split-heading > p { color: rgba(255,255,255,.47); }
.learning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.12); }
.resource-card { position: relative; min-height: 430px; padding: 28px; display: flex; flex-direction: column; background: rgba(5,12,10,.86); overflow: hidden; transition: background .3s, transform .3s; }
.resource-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(121,233,205,.13), transparent 70%); transform: scale(.7); transition: transform .45s; }
.resource-card:hover { z-index: 2; transform: translateY(-7px); background: #0c1916; }
.resource-card:hover::after { transform: scale(1.35); }
.resource-top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.38); font: 500 .55rem/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.resource-top i { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(121,233,205,.3); border-radius: 50%; color: var(--mint); font-style: normal; font-size: .58rem; }
.resource-signal { position: relative; height: 92px; margin: 38px 0 28px; display: flex; align-items: center; gap: 8px; }
.resource-signal::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.08); }
.resource-signal b { position: relative; z-index: 1; width: 8px; height: calc(18px + var(--resource-index, 0) * 1px); border: 1px solid rgba(121,233,205,.45); background: rgba(121,233,205,.07); animation: signalBar 2.5s ease-in-out infinite; }
.resource-signal b:nth-child(2) { height: 52px; animation-delay: -.45s; }.resource-signal b:nth-child(3) { height: 76px; animation-delay: -.9s; }.resource-signal b:nth-child(4) { height: 36px; animation-delay: -1.35s; }
@keyframes signalBar { 50% { transform: scaleY(.52); background: rgba(121,233,205,.24); } }
.resource-card h3 { position: relative; z-index: 2; margin: 0 0 16px; max-width: 330px; font: 500 clamp(1.55rem, 2vw, 2.15rem)/1.12 var(--serif); letter-spacing: -.028em; }
.resource-card > p { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,.49); font-size: .78rem; line-height: 1.72; }
.resource-source { position: relative; z-index: 2; margin-top: auto; padding-top: 25px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.42); font: 500 .55rem/1 var(--mono); text-transform: uppercase; }
.resource-source span { color: var(--mint); }
.learning-note { margin-top: 32px; padding: 22px 0; display: grid; grid-template-columns: 180px 1fr; gap: 30px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.learning-note > span { color: rgba(255,255,255,.32); font: 500 .55rem/1.5 var(--mono); letter-spacing: .1em; }
.learning-note p { margin: 0; color: rgba(255,255,255,.5); font-size: .8rem; }
.learning-note a { color: var(--mint-soft); border-bottom: 1px solid rgba(197,255,241,.4); }

.js-ready .reveal { opacity: 0; transform: translateY(26px); }
.js-ready .reveal.in-view { opacity: 1; transform: translateY(0); }
.foundation-card:nth-child(2), .resource-card:nth-child(2), .resource-card:nth-child(5) { transition-delay: .07s; }
.foundation-card:nth-child(3), .resource-card:nth-child(3), .resource-card:nth-child(6) { transition-delay: .14s; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 16px; margin-right: 22px; }
  .desktop-nav a { font-size: .72rem; }
  .program-item { grid-template-columns: 48px minmax(0, 1.1fr) minmax(330px, .9fr); gap: 30px; }
}

@media (max-width: 980px) {
  .program-item { grid-template-columns: 42px 1fr; min-height: auto; }
  .program-visual { grid-column: 2; height: 360px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-card { min-height: 520px; }
  .learning-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-card { min-height: 390px; }
}

@media (max-width: 680px) {
  .art-topline { letter-spacing: .08em; font-size: .47rem; }
  .hero-scan { display: none; }
  .program-item { grid-template-columns: 1fr; padding: 62px 0; }
  .program-visual { grid-column: 1; height: 300px; }
  .project-metrics { grid-template-columns: 1fr; }
  .project-metrics span { min-height: 48px; }
  .foundation-card { min-height: 570px; padding: 25px; }
  .foundation-tags { left: 25px; right: 25px; }
  .virus-ribbon { justify-content: flex-start; overflow-x: auto; }
  .learning-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 400px; padding: 25px; }
  .learning-note { grid-template-columns: 1fr; gap: 10px; }
}


/* --- Real science hero: Nextstrain topology + experimental 9DIP structure --- */
.hero-art { min-height: 690px; overflow: visible; }
.science-stage {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1.02;
  isolation: isolate;
  overflow: visible;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.science-stage::before {
  content: "";
  position: absolute;
  inset: 8% -8% 5% -5%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 46%, rgba(75,214,180,.14), transparent 38%), radial-gradient(circle at 77% 56%, rgba(114,139,255,.12), transparent 42%);
  filter: blur(24px);
}
.science-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,8,.55), transparent 16%, transparent 78%, rgba(5,7,8,.2)), linear-gradient(0deg, rgba(5,7,8,.82), transparent 20%, transparent 82%, rgba(5,7,8,.46));
}
.nextstrain-layer {
  position: absolute;
  z-index: 1;
  left: -8%;
  top: 7%;
  width: 78%;
  height: 73%;
  opacity: .84;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 68%, transparent 100%), linear-gradient(0deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 68%, transparent 100%);
  filter: drop-shadow(0 0 14px rgba(95,215,189,.12));
}
.nextstrain-tree { width: 100%; height: 100%; object-fit: fill; opacity: .88; animation: treeBreathe 7s ease-in-out infinite; }
.tree-echo { position: absolute; inset: 0; background: url('../img/h5-nextstrain-tree.svg') center/100% 100% no-repeat; mix-blend-mode: screen; opacity: .08; }
.tree-echo-a { transform: translateX(7px); animation: treeEcho 8s ease-in-out infinite; }
.tree-echo-b { transform: translateX(14px); animation: treeEcho 8s -4s ease-in-out infinite reverse; }
.tree-sweep { position: absolute; top: 0; bottom: 0; width: 25%; background: linear-gradient(90deg, transparent, rgba(184,255,241,.13), transparent); filter: blur(4px); animation: treeSweep 6.5s ease-in-out infinite; }
@keyframes treeBreathe { 50% { opacity: .68; filter: brightness(1.18); } }
@keyframes treeEcho { 50% { transform: translateX(0); opacity: .13; } }
@keyframes treeSweep { 0%,100% { left: -28%; opacity: 0; } 15% { opacity: .8; } 70% { opacity: .35; } 85% { left: 105%; opacity: 0; } }

.structure-layer {
  position: absolute;
  z-index: 3;
  right: -10%;
  top: -2%;
  width: 78%;
  height: 84%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 52% 47%, #000 47%, rgba(0,0,0,.92) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 52% 47%, #000 47%, rgba(0,0,0,.92) 62%, transparent 100%);
}
#molstar-viewer { position: absolute; inset: 0; background: transparent; opacity: 0; transition: opacity 1s ease; }
.structure-ready #molstar-viewer { opacity: .94; }
#molstar-viewer .msp-plugin, #molstar-viewer .msp-plugin-content, #molstar-viewer .msp-layout-standard, #molstar-viewer .msp-layout-static {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #050708 !important;
}
#molstar-viewer .msp-viewport, #molstar-viewer canvas { background: #050708 !important; }
#molstar-viewer .msp-viewport-controls, #molstar-viewer .msp-logo, #molstar-viewer .msp-sequence-wrapper, #molstar-viewer .msp-layout-top, #molstar-viewer .msp-layout-bottom, #molstar-viewer .msp-layout-left, #molstar-viewer .msp-layout-right { display: none !important; }
#molstar-viewer canvas { filter: saturate(.9) contrast(1.04) brightness(1.08); }
.structure-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; justify-items: center; color: rgba(219,255,247,.42); font: 500 .55rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: opacity .6s, visibility .6s; }
.structure-ready .structure-fallback { opacity: 0; visibility: hidden; }
.structure-error .structure-fallback span::after { content: " · open RCSB PDB"; }
.molecular-loader { position: relative; width: 96px; height: 96px; border: 1px solid rgba(121,233,205,.14); border-radius: 50%; animation: molecularSpin 9s linear infinite; }
.molecular-loader::before, .molecular-loader::after { content: ""; position: absolute; border: 1px solid rgba(131,159,255,.14); border-radius: 50%; }
.molecular-loader::before { inset: 17px -12px; transform: rotate(62deg); }
.molecular-loader::after { inset: -8px 25px; transform: rotate(-52deg); }
.molecular-loader i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(121,233,205,.8); transform: rotate(calc(var(--i) * 60deg)) translateY(-45px); }
.molecular-loader i:nth-child(1){--i:0}.molecular-loader i:nth-child(2){--i:1}.molecular-loader i:nth-child(3){--i:2}.molecular-loader i:nth-child(4){--i:3}.molecular-loader i:nth-child(5){--i:4}.molecular-loader i:nth-child(6){--i:5}
@keyframes molecularSpin { to { transform: rotate(360deg); } }

.evolution-flow { position: absolute; z-index: 4; left: 42%; top: 43%; width: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgba(121,233,205,.48), transparent); transform: rotate(-7deg); }
.evolution-flow span { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #dffff7; box-shadow: 0 0 10px rgba(121,233,205,.9); animation: realFlow 3.3s linear infinite; }
.evolution-flow span:nth-child(2){animation-delay:-.8s}.evolution-flow span:nth-child(3){animation-delay:-1.6s}.evolution-flow span:nth-child(4){animation-delay:-2.4s}
@keyframes realFlow { from { left: 0; opacity: 0; } 18%,78% { opacity: 1; } to { left: 100%; opacity: 0; } }

.science-caption { position: absolute; z-index: 8; display: grid; gap: 3px; pointer-events: none; }
.science-caption .caption-kicker { color: var(--mint); font: 500 .48rem/1 var(--mono); letter-spacing: .16em; }
.science-caption strong { color: rgba(255,255,255,.78); font: 600 .72rem/1.35 var(--sans); }
.science-caption small { color: rgba(255,255,255,.34); font: 400 .49rem/1.4 var(--mono); }
.science-caption a { width: max-content; margin-top: 7px; color: rgba(203,255,244,.62); font: 500 .49rem/1 var(--mono); letter-spacing: .06em; pointer-events: auto; transition: color .2s, transform .2s; }
.science-caption a:hover { color: white; transform: translateX(3px); }
.tree-caption { left: 2%; top: 6%; }
.structure-caption { right: 0; top: 7%; text-align: right; justify-items: end; }
.live-indicator { position: absolute; z-index: 8; right: 2%; bottom: 20.5%; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.31); font: 500 .45rem/1 var(--mono); letter-spacing: .13em; }
.live-indicator i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(121,233,205,.8); animation: liveBlink 2s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }
.seamless-readout { position: absolute; z-index: 9; left: 2%; right: 1%; bottom: 1%; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; }
.seamless-readout::before { content: "SEQUENCE → STRUCTURE → HOST"; position: absolute; top: -22px; left: 0; color: rgba(255,255,255,.22); font: 500 .43rem/1 var(--mono); letter-spacing: .16em; }

/* Responsive viral cursor; disabled on touch and for reduced motion. */
.virus-cursor-core, .virus-cursor-shell { position: fixed; z-index: 10000; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-50%,-50%); transition: opacity .2s, width .22s, height .22s, filter .22s; }
.virus-cursor-core { width: 5px; height: 5px; border-radius: 50%; background: #e5fff8; box-shadow: 0 0 11px rgba(121,233,205,.95); }
.virus-cursor-shell { width: 32px; height: 32px; color: rgba(121,233,205,.8); filter: drop-shadow(0 0 6px rgba(121,233,205,.38)); }
.virus-cursor-shell svg { overflow: visible; animation: cursorDrift 12s linear infinite; }
.virus-cursor-shell circle, .virus-cursor-shell line { fill: none; stroke: currentColor; stroke-width: 1.2; }
.virus-cursor-shell .cursor-node { fill: #cffff3; stroke: none; }
.virus-cursor-shell b { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); padding: 4px 6px; color: rgba(218,255,247,.72); background: rgba(5,7,8,.7); border: 1px solid rgba(121,233,205,.14); font: 500 .42rem/1 var(--mono); letter-spacing: .1em; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cursor-visible .virus-cursor-core, .cursor-visible .virus-cursor-shell { opacity: 1; }
.cursor-active .virus-cursor-shell { width: 47px; height: 47px; color: rgba(204,255,243,.95); }
.cursor-active .virus-cursor-shell b { opacity: 1; }
.cursor-down .virus-cursor-shell { width: 25px; height: 25px; filter: drop-shadow(0 0 12px rgba(121,233,205,.85)); }
@keyframes cursorDrift { to { transform: rotate(360deg); } }
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on [data-cursor-label], body.cursor-on #molstar-viewer, body.cursor-on canvas { cursor: none !important; }
}

@media (max-width: 1180px) {
  .hero-art { min-height: 580px; }
  .science-stage { max-width: 650px; }
}
@media (max-width: 820px) {
  .hero-art { min-height: 530px; margin-top: 20px; }
  .science-stage { width: min(100%, 610px); }
  .structure-layer { right: -8%; width: 75%; }
  .tree-caption, .structure-caption small { display: none; }
  .science-caption { top: 2%; }
  .seamless-readout { bottom: -2%; }
}
@media (max-width: 560px) {
  .hero-art { min-height: 430px; margin-inline: -18px; }
  .science-stage { aspect-ratio: 1 / .92; }
  .nextstrain-layer { left: -11%; top: 12%; width: 75%; height: 68%; }
  .structure-layer { right: -18%; top: 3%; width: 83%; height: 82%; }
  .structure-caption { right: 7%; }
  .tree-caption { left: 7%; }
  .science-caption strong { font-size: .58rem; }
  .science-caption a { font-size: .43rem; }
  .evolution-flow { left: 39%; width: 20%; }
  .seamless-readout { left: 7%; right: 7%; }
  .live-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nextstrain-tree, .tree-echo, .tree-sweep, .evolution-flow span, .molecular-loader, .live-indicator i { animation: none !important; }
}

/* Live Nextstrain layer. The iframe is the real public Auspice tree; the SVG below it
   is a topology-preserving fallback for slow networks and mobile browsers. */
.nextstrain-frame {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: -7%;
  width: 142%;
  height: 118%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.92);
  transform-origin: 30% 48%;
  filter: invert(1) hue-rotate(154deg) saturate(.68) brightness(.72) contrast(1.22);
  mix-blend-mode: screen;
  transition: opacity 1.35s ease, transform 1.35s cubic-bezier(.2,.8,.2,1);
}
.nextstrain-live-ready .nextstrain-frame {
  opacity: .43;
  transform: scale(.95);
}
.nextstrain-live-ready .nextstrain-tree { opacity: .48; }
.nextstrain-live-ready .tree-echo { opacity: .045; }
.nextstrain-layer::after {
  content: "LIVE NEXTSTRAIN";
  position: absolute;
  z-index: 5;
  left: 13%;
  bottom: 7%;
  color: rgba(201,255,244,.32);
  font: 500 .42rem/1 var(--mono);
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity .8s ease;
}
.nextstrain-live-ready .nextstrain-layer::after { opacity: 1; }

/* Keep the real science composition borderless and visually continuous with the hero. */
.science-stage { background: transparent; }
.science-stage::before { opacity: .92; }
.structure-layer { filter: drop-shadow(0 0 24px rgba(93,218,190,.08)); }
#molstar-viewer .msp-plugin { border: 0 !important; box-shadow: none !important; }

/* A little more biological character in the cursor without sacrificing precision. */
.virus-cursor-shell::before,
.virus-cursor-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .35;
  transform: translate(-50%,-50%) rotate(24deg);
}
.virus-cursor-shell::after { transform: translate(-50%,-50%) rotate(-38deg); }
.cursor-active .virus-cursor-shell { filter: drop-shadow(0 0 10px rgba(121,233,205,.62)); }

@media (max-width: 820px), (hover:none) {
  .nextstrain-frame { display: none; }
  .nextstrain-layer::after { display: none; }
}
.virus-cursor-shell .cursor-genome { fill: none; stroke: currentColor; stroke-width: .85; opacity: .45; }

/* ========================================================================== 
   Structure-first hero + dedicated live Nextstrain panorama
   ========================================================================== */

/* Make room for the additional navigation destination without crowding. */
.desktop-nav { gap: 22px; }

.hero-inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(550px, .98fr);
  gap: 18px;
}
.hero-art {
  min-height: 730px;
  overflow: visible;
}

/* A borderless scientific stage: the actual Mol* structure is the focus. */
.structure-stage {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 1 / 1.03;
  isolation: isolate;
  overflow: visible;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.structure-stage::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 5% -8% 7% -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 54% 42%, rgba(121,233,205,.17), transparent 25%),
    radial-gradient(circle at 62% 53%, rgba(88,112,220,.14), transparent 43%),
    radial-gradient(circle at 42% 68%, rgba(188,74,139,.08), transparent 40%);
  filter: blur(28px);
  animation: structureAura 9s ease-in-out infinite;
}
.structure-stage::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,8,.94) 0, rgba(5,7,8,.24) 15%, transparent 34%, transparent 78%, rgba(5,7,8,.22) 92%, rgba(5,7,8,.72) 100%),
    linear-gradient(0deg, rgba(5,7,8,.96) 0, transparent 17%, transparent 84%, rgba(5,7,8,.62) 100%);
}
@keyframes structureAura {
  50% { transform: scale(1.04) translate3d(1.5%, -1%, 0); filter: blur(34px); }
}

.structure-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbit {
  position: absolute;
  left: 50%;
  top: 43%;
  border: 1px solid rgba(121,233,205,.1);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(var(--rotation));
  animation: orbitFloat var(--duration) linear infinite;
}
.orbit::before, .orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(215,255,246,.78);
  box-shadow: 0 0 12px rgba(121,233,205,.9);
}
.orbit::before { left: 8%; top: 18%; }
.orbit::after { right: 4%; bottom: 29%; }
.orbit-a { --rotation: 18deg; --duration: 42s; width: 74%; height: 48%; }
.orbit-b { --rotation: -38deg; --duration: 54s; width: 61%; height: 78%; border-color: rgba(131,159,255,.11); animation-direction: reverse; }
.orbit-c { --rotation: 72deg; --duration: 62s; width: 47%; height: 87%; border-style: dashed; opacity: .65; }
@keyframes orbitFloat {
  to { transform: translate(-50%,-50%) rotate(calc(var(--rotation) + 360deg)); }
}

.scan-plane {
  position: absolute;
  z-index: 4;
  left: 11%;
  right: 3%;
  top: 17%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(188,255,241,.78), transparent);
  box-shadow: 0 0 24px rgba(121,233,205,.4);
  opacity: 0;
  animation: scanStructure 7.5s ease-in-out infinite;
}
.scan-plane::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -46px;
  width: 1px;
  height: 92px;
  background: linear-gradient(0deg, transparent, rgba(121,233,205,.26), transparent);
}
@keyframes scanStructure {
  0%, 8%, 100% { top: 16%; opacity: 0; }
  18% { opacity: .8; }
  72% { opacity: .38; }
  85% { top: 76%; opacity: 0; }
}

.molecular-cloud {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow:
    34px 18px 0 -1px rgba(121,233,205,.48),
    68px -22px 0 -1.5px rgba(131,159,255,.55),
    101px 39px 0 -1px rgba(121,233,205,.32),
    139px -7px 0 -1.5px rgba(255,255,255,.36),
    178px 26px 0 -1px rgba(121,233,205,.42),
    211px -18px 0 -1.5px rgba(131,159,255,.42);
  filter: drop-shadow(0 0 6px rgba(121,233,205,.36));
  opacity: .48;
}
.cloud-a { left: 5%; top: 28%; transform: rotate(13deg); animation: cloudDrift 9s ease-in-out infinite; }
.cloud-b { right: 7%; top: 62%; transform: rotate(-31deg) scale(.72); animation: cloudDrift 11s -3s ease-in-out infinite reverse; }
.cloud-c { left: 20%; bottom: 17%; transform: rotate(6deg) scale(.55); animation: cloudDrift 13s -7s ease-in-out infinite; }
@keyframes cloudDrift { 50% { translate: 8px -10px; opacity: .75; } }

.glycan-trace {
  position: absolute;
  width: 34px;
  height: 48px;
  border-left: 1px solid rgba(121,233,205,.2);
  border-top: 1px solid rgba(121,233,205,.2);
  opacity: .55;
}
.glycan-trace::before, .glycan-trace::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 14px;
  border-left: 1px solid rgba(121,233,205,.2);
  border-top: 1px solid rgba(121,233,205,.2);
}
.glycan-trace::before { left: 8px; top: 11px; transform: rotate(33deg); }
.glycan-trace::after { left: 21px; top: 23px; transform: rotate(-26deg); }
.trace-a { right: 9%; top: 21%; transform: rotate(28deg); animation: glycanPulse 5.5s ease-in-out infinite; }
.trace-b { left: 10%; top: 53%; transform: rotate(-42deg) scale(.72); animation: glycanPulse 6.5s -2s ease-in-out infinite; }
.trace-c { right: 24%; bottom: 13%; transform: rotate(71deg) scale(.55); animation: glycanPulse 7.5s -4s ease-in-out infinite; }
@keyframes glycanPulse { 50% { opacity: .16; filter: drop-shadow(0 0 8px rgba(121,233,205,.5)); } }

.hero-structure {
  z-index: 3;
  right: -2%;
  top: -3%;
  width: 92%;
  height: 91%;
  filter: drop-shadow(0 0 34px rgba(93,218,190,.09));
  -webkit-mask-image: radial-gradient(ellipse 73% 82% at 55% 48%, #000 54%, rgba(0,0,0,.94) 67%, transparent 100%);
  mask-image: radial-gradient(ellipse 73% 82% at 55% 48%, #000 54%, rgba(0,0,0,.94) 67%, transparent 100%);
}
.structure-ready #molstar-viewer { opacity: .98; }
#molstar-viewer canvas { filter: saturate(.96) contrast(1.06) brightness(1.12); }

.binding-pulse {
  position: absolute;
  z-index: 8;
  left: 62%;
  top: 27%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid rgba(121,233,205,.18);
  display: grid;
  place-items: center;
  color: rgba(220,255,248,.55);
  font: 500 .44rem/1 var(--mono);
  letter-spacing: .16em;
  pointer-events: none;
  animation: bindingBreathe 3.6s ease-in-out infinite;
}
.binding-pulse::before, .binding-pulse::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(121,233,205,.24);
}
.binding-pulse::after { inset: 29px; background: rgba(121,233,205,.08); box-shadow: 0 0 20px rgba(121,233,205,.14); }
.binding-pulse i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(121,233,205,.9); transform: translate(-50%,-50%); }
.binding-pulse span { transform: translateY(58px); }
@keyframes bindingBreathe { 50% { transform: scale(1.12); opacity: .55; } }

.structure-annotation {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(219,255,247,.42);
  font: 500 .43rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.structure-annotation i { width: 48px; height: 1px; background: linear-gradient(90deg, rgba(121,233,205,.08), rgba(121,233,205,.58)); position: relative; }
.structure-annotation i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(121,233,205,.72); }
.annotation-130 { left: 4%; top: 34%; }
.annotation-190 { right: 1%; top: 47%; flex-direction: row-reverse; }
.annotation-190 i { transform: rotate(180deg); }
.annotation-220 { left: 9%; bottom: 28%; }

.structure-title-block {
  position: absolute;
  z-index: 10;
  right: 2%;
  top: 4%;
  display: grid;
  justify-items: end;
  text-align: right;
  gap: 4px;
}
.structure-title-block > span { color: var(--mint); font: 500 .48rem/1 var(--mono); letter-spacing: .18em; }
.structure-title-block strong { color: rgba(255,255,255,.83); font: 600 .8rem/1.35 var(--sans); }
.structure-title-block small { color: rgba(255,255,255,.36); font: 400 .49rem/1.4 var(--mono); }
.structure-title-block a { margin-top: 7px; color: rgba(203,255,244,.66); font: 500 .49rem/1 var(--mono); letter-spacing: .06em; transition: color .2s, transform .2s; }
.structure-title-block a:hover { color: white; transform: translateX(3px); }

.structure-live {
  position: absolute;
  z-index: 10;
  right: 2%;
  bottom: 19%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.3);
  font: 500 .43rem/1 var(--mono);
  letter-spacing: .14em;
}
.structure-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(121,233,205,.9); animation: liveBlink 2s ease-in-out infinite; }
.structure-axis {
  position: absolute;
  z-index: 9;
  left: 5%;
  bottom: 20%;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.25);
  font: 500 .4rem/1 var(--mono);
  letter-spacing: .14em;
}
.structure-axis i { width: 18px; height: 1px; background: rgba(121,233,205,.25); }
.structure-readout { z-index: 10; left: 5%; right: 2%; bottom: 2%; background: transparent; }
.structure-readout::before { content: "STRUCTURE → RECEPTOR BIOLOGY → HOST RANGE"; position: absolute; top: -22px; left: 0; color: rgba(255,255,255,.2); font: 500 .42rem/1 var(--mono); letter-spacing: .14em; }

/* Dedicated phylodynamics section: the tree gets room to breathe. */
.nextstrain-section {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 72% 43%, rgba(82,170,153,.12), transparent 38%),
    radial-gradient(circle at 19% 86%, rgba(87,101,187,.1), transparent 36%),
    #070a0b;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 120px 0 105px;
}
.nextstrain-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 67% 48%, #000, transparent 72%);
}
#tree-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.nextstrain-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), 1450px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .36fr) minmax(660px, .64fr);
  gap: 48px;
  align-items: center;
}
.nextstrain-copy { max-width: 440px; }
.nextstrain-copy .section-index { color: rgba(255,255,255,.38); }
.nextstrain-copy h2 { margin: 22px 0 24px; font: 500 clamp(3.2rem, 5.2vw, 6.2rem)/.9 var(--serif); letter-spacing: -.045em; }
.nextstrain-copy h2 em { color: var(--mint-soft); font-weight: 500; }
.nextstrain-copy > p:not(.section-index) { margin: 0; color: rgba(255,255,255,.58); font-size: .99rem; line-height: 1.85; }
.tree-actions { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.tree-actions > span { color: rgba(255,255,255,.3); font: 500 .54rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tree-key { margin-top: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: rgba(255,255,255,.29); font: 500 .48rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tree-key i { width: 22px; height: 1px; background: rgba(121,233,205,.24); }

.nextstrain-panorama {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: rgba(3,6,7,.26);
  border-top: 1px solid rgba(121,233,205,.22);
  border-bottom: 1px solid rgba(121,233,205,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(0deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  filter: drop-shadow(0 0 35px rgba(72,177,155,.08));
}
.nextstrain-section-frame,
.nextstrain-section-fallback {
  position: absolute;
  inset: -8% -14% -6% -8%;
  width: 122%;
  height: 114%;
}
.nextstrain-section-frame {
  z-index: 2;
  border: 0;
  opacity: 0;
  background: transparent;
  filter: invert(1) hue-rotate(154deg) saturate(.73) brightness(.82) contrast(1.18);
  mix-blend-mode: screen;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
  transform: scale(.985);
  transform-origin: 48% 50%;
}
.nextstrain-section-fallback {
  z-index: 1;
  object-fit: fill;
  opacity: .62;
  filter: saturate(.85) brightness(.9);
  animation: treeBreathe 7s ease-in-out infinite;
  transition: opacity 1s ease;
}
.nextstrain-section-ready .nextstrain-section-frame { opacity: .66; transform: scale(1); }
.nextstrain-section-ready .nextstrain-section-fallback { opacity: .22; }
.tree-panorama-wash {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,10,11,.92), transparent 12%, transparent 88%, rgba(7,10,11,.78)),
    linear-gradient(0deg, rgba(7,10,11,.95), transparent 13%, transparent 84%, rgba(7,10,11,.68));
}
.tree-panorama-scan {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(186,255,241,.1), transparent);
  filter: blur(5px);
  animation: panoramaScan 8s ease-in-out infinite;
}
@keyframes panoramaScan { 0%,100% { left: -22%; opacity: 0; } 15% { opacity: .7; } 75% { opacity: .22; } 90% { left: 108%; opacity: 0; } }
.tree-status {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.34);
  font: 500 .44rem/1 var(--mono);
  letter-spacing: .15em;
  pointer-events: none;
}
.tree-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(121,233,205,.9); animation: liveBlink 2s ease-in-out infinite; }
.tree-window-label {
  position: absolute;
  z-index: 6;
  left: 5%;
  top: 7%;
  display: grid;
  gap: 5px;
  pointer-events: none;
}
.tree-window-label span { color: rgba(255,255,255,.72); font: 600 .66rem/1 var(--sans); }
.tree-window-label small { color: rgba(255,255,255,.3); font: 500 .46rem/1 var(--mono); letter-spacing: .08em; }
.nextstrain-statline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nextstrain-statline div { min-height: 94px; padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.08); display: grid; align-content: center; gap: 6px; }
.nextstrain-statline div:last-child { border-right: 0; }
.nextstrain-statline strong { color: rgba(255,255,255,.82); font: 600 .78rem/1 var(--sans); }
.nextstrain-statline span { color: rgba(255,255,255,.33); font: 500 .47rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1240px) {
  .desktop-nav { gap: 17px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(500px, .9fr); }
  .structure-stage { max-width: 680px; }
  .nextstrain-shell { grid-template-columns: .34fr .66fr; gap: 30px; }
  .nextstrain-panorama { min-height: 540px; }
}

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { min-height: 650px; }
  .structure-stage { width: min(100%, 720px); margin-inline: auto; }
  .nextstrain-shell { grid-template-columns: 1fr; }
  .nextstrain-copy { max-width: 690px; }
  .nextstrain-panorama { min-height: 570px; }
}

@media (max-width: 720px) {
  .hero-art { min-height: 520px; margin-inline: -12px; }
  .structure-stage { aspect-ratio: 1 / .92; }
  .hero-structure { right: -9%; top: -1%; width: 103%; height: 92%; }
  .structure-title-block { right: 7%; top: 0; }
  .structure-annotation { display: none; }
  .binding-pulse { left: 60%; top: 25%; transform: scale(.72); }
  .structure-axis { left: 8%; bottom: 22%; }
  .structure-live { display: none; }
  .structure-readout { left: 7%; right: 7%; bottom: 0; }
  .orbit-a { width: 88%; }
  .orbit-b { width: 75%; }
  .nextstrain-section { padding: 88px 0 80px; }
  .nextstrain-shell { width: min(calc(100% - 36px), 1450px); }
  .nextstrain-copy h2 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .nextstrain-panorama { min-height: 430px; margin-inline: -8px; }
  .nextstrain-statline { grid-template-columns: repeat(2, 1fr); }
  .nextstrain-statline div:nth-child(2) { border-right: 0; }
  .nextstrain-statline div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 480px) {
  .hero-art { min-height: 440px; }
  .structure-title-block small { display: none; }
  .structure-title-block strong { font-size: .65rem; }
  .structure-axis { display: none; }
  .binding-pulse { display: none; }
  .structure-readout small { font-size: .43rem; }
  .structure-readout strong { font-size: .58rem; }
  .nextstrain-panorama { min-height: 350px; }
  .nextstrain-section-frame,
  .nextstrain-section-fallback { inset: -3% -22% -3% -13%; width: 135%; height: 106%; }
  .tree-window-label { left: 7%; top: 8%; }
  .tree-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .structure-stage::before, .orbit, .scan-plane, .molecular-cloud, .glycan-trace,
  .binding-pulse, .nextstrain-section-fallback, .tree-panorama-scan, .tree-status i { animation: none !important; }
}

/* ========================================================================== 
   Refined structure-first hero + playable evolution tree (v4)
   ========================================================================== */

/* Research scale belongs to the identity copy rather than the molecular canvas. */
.hero-facts {
  width: min(100%, 650px);
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero-facts > div {
  min-height: 76px;
  padding: 15px 18px 14px 0;
  display: grid;
  align-content: center;
  gap: 5px;
}
.hero-facts > div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.hero-facts strong {
  color: rgba(255,255,255,.88);
  font: 600 .76rem/1 var(--sans);
}
.hero-facts span {
  color: rgba(255,255,255,.32);
  font: 500 .48rem/1.4 var(--mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}

/* Clean molecular canvas: one focus, no explanatory callouts over the structure. */
.structure-stage-refined {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: .96 / 1;
  isolation: isolate;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.structure-stage-refined::before {
  content: "";
  position: absolute;
  z-index: -4;
  inset: 3% -7% 5%;
  border-radius: 48% 52% 46% 54% / 54% 42% 58% 46%;
  background:
    radial-gradient(ellipse at 55% 43%, rgba(119,234,205,.16), transparent 33%),
    radial-gradient(ellipse at 68% 57%, rgba(111,129,230,.11), transparent 48%),
    radial-gradient(ellipse at 39% 71%, rgba(205,71,112,.055), transparent 41%);
  filter: blur(30px);
  animation: refinedAura 11s ease-in-out infinite;
}
.structure-stage-refined::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: -1%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 72% at 53% 46%, transparent 57%, rgba(5,7,8,.22) 77%, rgba(5,7,8,.86) 100%),
    linear-gradient(0deg, rgba(5,7,8,.72), transparent 20%, transparent 84%, rgba(5,7,8,.46));
}
@keyframes refinedAura {
  50% { transform: translate3d(1.2%, -1.2%, 0) scale(1.035); filter: blur(36px); }
}

.structure-ambient {
  position: absolute;
  z-index: -2;
  inset: 1% -3% 3%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 76% at 53% 47%, #000 30%, rgba(0,0,0,.9) 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 76% at 53% 47%, #000 30%, rgba(0,0,0,.9) 65%, transparent 100%);
}
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .32;
  animation: ambientDrift 13s ease-in-out infinite;
}
.glow-one { width: 39%; height: 31%; left: 31%; top: 23%; background: rgba(92,224,194,.28); }
.glow-two { width: 34%; height: 38%; right: 12%; top: 41%; background: rgba(99,112,218,.18); animation-delay: -4s; }
.glow-three { width: 28%; height: 25%; left: 23%; bottom: 16%; background: rgba(214,78,111,.085); animation-delay: -8s; }
@keyframes ambientDrift {
  50% { transform: translate3d(6%, -5%, 0) scale(1.12); opacity: .46; }
}
.ambient-thread {
  position: absolute;
  width: 74%;
  height: 42%;
  left: 14%;
  top: 30%;
  border-radius: 50%;
  border: 1px solid rgba(146,239,220,.075);
  transform: rotate(18deg);
  animation: threadFloat 18s ease-in-out infinite;
}
.thread-two {
  width: 56%;
  height: 70%;
  left: 25%;
  top: 13%;
  border-color: rgba(131,159,255,.07);
  transform: rotate(-34deg);
  animation-delay: -9s;
}
@keyframes threadFloat {
  50% { transform: rotate(23deg) scale(1.04); opacity: .55; }
}
.ambient-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(221,255,248,.78);
  box-shadow: 0 0 10px rgba(121,233,205,.75);
  animation: particleHover 7s ease-in-out infinite;
}
.particle-one { left: 20%; top: 32%; }
.particle-two { right: 17%; top: 26%; animation-delay: -2s; }
.particle-three { left: 26%; bottom: 23%; animation-delay: -4s; }
.particle-four { right: 20%; bottom: 29%; animation-delay: -6s; }
@keyframes particleHover {
  50% { transform: translate3d(8px,-12px,0) scale(1.4); opacity: .35; }
}

.structure-stage-refined .hero-structure {
  position: absolute;
  z-index: 2;
  inset: -1% -2% 5% -2%;
  width: auto;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0 0 32px rgba(81,201,174,.08));
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 52% 47%, #000 52%, rgba(0,0,0,.95) 67%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 78% at 52% 47%, #000 52%, rgba(0,0,0,.95) 67%, transparent 100%);
}
.structure-stage-refined #molstar-viewer,
.structure-stage-refined #molstar-viewer .msp-plugin,
.structure-stage-refined #molstar-viewer .msp-plugin-content,
.structure-stage-refined #molstar-viewer .msp-layout-standard,
.structure-stage-refined #molstar-viewer .msp-layout-static,
.structure-stage-refined #molstar-viewer .msp-viewport,
.structure-stage-refined #molstar-viewer canvas {
  background: #050708 !important;
}
.structure-stage-refined #molstar-viewer canvas {
  filter: saturate(.96) contrast(1.055) brightness(1.10);
}
.structure-minimal-meta {
  position: absolute;
  z-index: 10;
  left: 8%;
  right: 7%;
  bottom: 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.31);
  font: 500 .46rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.structure-minimal-meta span { display: inline-flex; align-items: center; gap: 8px; }
.structure-minimal-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 9px rgba(121,233,205,.9);
  animation: liveBlink 2s ease-in-out infinite;
}
.structure-minimal-meta a {
  color: rgba(210,255,245,.62);
  transition: color .2s, transform .2s;
}
.structure-minimal-meta a:hover { color: white; transform: translateX(2px); }

/* The phylodynamic view behaves like an evolution player rather than a framed embed. */
.nextstrain-section {
  background:
    radial-gradient(ellipse at 70% 47%, rgba(80,177,154,.105), transparent 42%),
    radial-gradient(ellipse at 22% 80%, rgba(97,108,196,.07), transparent 38%),
    #06090a;
}
.nextstrain-section::before {
  opacity: .34;
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse at 68% 48%, #000 0, rgba(0,0,0,.72) 48%, transparent 82%);
}
.evolution-player {
  --tree-pan: 0%;
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 0 44px rgba(63,174,151,.07));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(0deg, transparent, #000 4%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.evolution-player .nextstrain-section-frame,
.evolution-player .nextstrain-section-fallback {
  position: absolute;
  inset: -6% -10% -5% -7%;
  width: 117%;
  height: 111%;
  transform-origin: 50% 50%;
}
.evolution-player .nextstrain-section-frame {
  z-index: 1;
  border: 0;
  opacity: 0;
  pointer-events: none;
  filter: invert(1) hue-rotate(154deg) saturate(.68) brightness(.76) contrast(1.21);
  mix-blend-mode: screen;
  transition: opacity 1.25s ease;
}
.nextstrain-section-ready .evolution-player .nextstrain-section-frame { opacity: .33; }
.evolution-player .nextstrain-section-fallback {
  z-index: 2;
  object-fit: fill;
  opacity: .78;
  filter: saturate(.86) brightness(.92) contrast(1.06);
  clip-path: inset(0 92% 0 0);
  transition: opacity .7s ease;
  will-change: clip-path, transform;
}
.evolution-player.is-complete .nextstrain-section-fallback { opacity: .48; }
.evolution-vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 78% at 54% 48%, transparent 56%, rgba(6,9,10,.48) 83%, rgba(6,9,10,.92) 100%),
    linear-gradient(0deg, rgba(6,9,10,.92), transparent 20%, transparent 83%, rgba(6,9,10,.66));
}
.evolution-sweep {
  position: absolute;
  z-index: 5;
  top: 7%;
  bottom: 12%;
  left: 8%;
  width: 1px;
  background: linear-gradient(0deg, transparent, rgba(207,255,246,.74), transparent);
  box-shadow: 0 0 18px rgba(121,233,205,.5);
  opacity: 0;
  pointer-events: none;
}
.evolution-player.is-playing .evolution-sweep { opacity: .8; }
.evolution-year {
  position: absolute;
  z-index: 7;
  left: 6%;
  top: 7%;
  display: grid;
  gap: 7px;
  pointer-events: none;
}
.evolution-year small {
  color: rgba(255,255,255,.3);
  font: 500 .45rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.evolution-year strong {
  color: rgba(230,255,249,.86);
  font: 500 clamp(1.9rem, 3vw, 3.4rem)/1 var(--serif);
  letter-spacing: -.04em;
}
.evolution-play {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%);
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(198,255,243,.22);
  background: rgba(5,10,10,.66);
  backdrop-filter: blur(12px);
  color: rgba(230,255,249,.84);
  font: 600 .58rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .25s, background .25s, border-color .25s, transform .25s;
}
.evolution-play:hover { background: rgba(16,34,30,.78); border-color: rgba(198,255,243,.44); transform: translate(-50%,-52%); }
.evolution-player.is-playing .evolution-play { opacity: .2; }
.evolution-player:hover.is-playing .evolution-play { opacity: .85; }
.evolution-play-icon {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--mint-soft);
}
.evolution-player.is-playing .evolution-play-icon {
  width: 8px;
  height: 10px;
  border: 0;
  border-left: 2px solid var(--mint-soft);
  border-right: 2px solid var(--mint-soft);
}
.evolution-live-link {
  position: absolute;
  z-index: 8;
  right: 6%;
  top: 7%;
  color: rgba(213,255,246,.58);
  font: 500 .49rem/1 var(--mono);
  letter-spacing: .075em;
  text-transform: uppercase;
  transition: color .2s, transform .2s;
}
.evolution-live-link:hover { color: white; transform: translateX(2px); }
.evolution-timeline {
  position: absolute;
  z-index: 8;
  left: 6%;
  right: 6%;
  bottom: 7%;
  pointer-events: none;
}
.evolution-track {
  position: relative;
  height: 1px;
  background: rgba(255,255,255,.14);
}
.evolution-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(.08);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(121,233,205,.42), rgba(213,255,246,.9));
  box-shadow: 0 0 9px rgba(121,233,205,.36);
}
.evolution-track > i {
  position: absolute;
  left: 8%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #ddfff7;
  box-shadow: 0 0 13px rgba(121,233,205,.85);
}
.evolution-years {
  margin-top: 11px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.26);
  font: 500 .43rem/1 var(--mono);
}

/* Reddish, restrained virus cursor. */
.virus-cursor-core {
  background: #fff0ed;
  box-shadow: 0 0 12px rgba(255,84,92,.95);
}
.virus-cursor-shell {
  color: rgba(255,85,94,.84);
  filter: drop-shadow(0 0 7px rgba(255,76,86,.45));
}
.virus-cursor-shell .cursor-node { fill: #ffb4ac; }
.virus-cursor-shell b {
  color: rgba(255,220,216,.82);
  border-color: rgba(255,94,101,.22);
}
.cursor-active .virus-cursor-shell {
  color: rgba(255,125,126,.98);
  filter: drop-shadow(0 0 11px rgba(255,73,83,.72));
}
.cursor-down .virus-cursor-shell { filter: drop-shadow(0 0 14px rgba(255,73,83,.92)); }

/* Tablet: maintain hierarchy and remove unnecessary 3D tilt. */
@media (max-width: 1050px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 850px; }
  .hero-art { min-height: auto; margin-top: 0; }
  .structure-stage-refined { width: min(100%, 690px); margin-inline: auto; }
  .nextstrain-shell { grid-template-columns: 1fr; gap: 42px; }
  .nextstrain-copy { max-width: 720px; }
  .evolution-player { min-height: 560px; }
}

/* Mobile receives its own composition rather than a scaled desktop canvas. */
@media (max-width: 720px) {
  .hero { min-height: auto; align-items: start; }
  .hero-inner {
    width: min(calc(100% - 34px), var(--shell));
    padding: 108px 0 72px;
    gap: 30px;
  }
  .hero-copy { padding-top: 0; }
  .overline {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    font-size: .54rem;
    line-height: 1.65;
    letter-spacing: .095em;
  }
  .overline span { margin-top: 6px; flex: 0 0 24px; }
  .name-line { margin-bottom: 18px; font-size: .75rem; letter-spacing: .17em; }
  .statement { font-size: clamp(3.25rem, 15.7vw, 4.85rem); line-height: .91; letter-spacing: -.052em; }
  .hero-intro { margin-top: 25px; font-size: .94rem; line-height: 1.72; }
  .hero-links { margin-top: 27px; display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; min-height: 50px; justify-content: space-between; }
  .affiliation-line { margin-top: 31px; font-size: .56rem; line-height: 1.55; }
  .hero-facts { margin-top: 22px; }
  .hero-facts > div { min-height: 68px; padding: 11px 9px 10px 0; }
  .hero-facts > div + div { padding-left: 10px; }
  .hero-facts strong { font-size: .65rem; }
  .hero-facts span { font-size: .39rem; line-height: 1.35; letter-spacing: .045em; }

  .hero-art { min-height: auto; margin: 0 -5px; }
  .structure-stage-refined {
    width: 100%;
    max-width: 510px;
    aspect-ratio: .88 / 1;
    margin-inline: auto;
  }
  .structure-stage-refined::before { inset: 5% -2% 7%; filter: blur(24px); }
  .structure-stage-refined::after {
    background:
      radial-gradient(ellipse 78% 76% at 52% 45%, transparent 57%, rgba(5,7,8,.2) 77%, rgba(5,7,8,.8) 100%),
      linear-gradient(0deg, rgba(5,7,8,.75), transparent 17%, transparent 86%, rgba(5,7,8,.3));
  }
  .structure-stage-refined .hero-structure { inset: -3% -9% 6%; }
  .ambient-thread { opacity: .55; }
  .ambient-particle { opacity: .58; }
  .structure-minimal-meta { left: 5%; right: 5%; bottom: 4%; font-size: .4rem; }
  .structure-minimal-meta span { letter-spacing: .07em; }

  .nextstrain-section { padding: 84px 0 76px; }
  .nextstrain-shell { width: min(calc(100% - 34px), 1450px); gap: 34px; }
  .nextstrain-copy h2 { margin: 17px 0 21px; font-size: clamp(3.25rem, 15vw, 4.75rem); }
  .nextstrain-copy > p:not(.section-index) { font-size: .9rem; line-height: 1.75; }
  .tree-actions { margin-top: 25px; }
  .tree-actions .button { width: 100%; }
  .tree-key { margin-top: 29px; gap: 7px; }
  .tree-key i { width: 14px; }

  .evolution-player {
    --tree-pan: 0%;
    min-height: 430px;
    margin-inline: -8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .evolution-player .nextstrain-section-frame { display: none; }
  .evolution-player .nextstrain-section-fallback {
    inset: 1% auto 5% 0;
    width: 148%;
    height: 94%;
    object-fit: fill;
    transform: translate3d(var(--tree-pan),0,0) scale(1.03);
    transform-origin: left center;
    opacity: .72;
  }
  .evolution-vignette {
    background:
      linear-gradient(90deg, rgba(6,9,10,.82), transparent 13%, transparent 86%, rgba(6,9,10,.72)),
      linear-gradient(0deg, rgba(6,9,10,.94), transparent 24%, transparent 80%, rgba(6,9,10,.66));
  }
  .evolution-year { left: 7%; top: 7%; }
  .evolution-year strong { font-size: 2.25rem; }
  .evolution-live-link { right: 7%; top: 8%; font-size: .4rem; }
  .evolution-play { top: 48%; min-height: 44px; padding-inline: 14px; font-size: .5rem; }
  .evolution-timeline { left: 7%; right: 7%; bottom: 8%; }
  .evolution-years { font-size: .36rem; }

  .nextstrain-statline { grid-template-columns: repeat(2, 1fr); }
  .nextstrain-statline div { min-height: 82px; padding: 16px; }
  .nextstrain-statline strong { font-size: .7rem; }
  .nextstrain-statline span { font-size: .41rem; }
}

@media (max-width: 430px) {
  .statement { font-size: clamp(3.05rem, 15.3vw, 4.1rem); }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts > div { min-height: 52px; padding: 10px 0; grid-template-columns: 88px 1fr; align-items: center; }
  .hero-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .hero-facts strong { font-size: .68rem; }
  .hero-facts span { font-size: .43rem; }
  .structure-stage-refined { aspect-ratio: .86 / 1; }
  .structure-minimal-meta span { max-width: 160px; line-height: 1.45; }
  .evolution-player { min-height: 380px; }
  .evolution-live-link { max-width: 84px; text-align: right; line-height: 1.45; }
  .evolution-play { width: auto; }
}

@media (hover:none) {
  .structure-stage-refined { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .structure-stage-refined::before, .ambient-glow, .ambient-thread, .ambient-particle,
  .structure-minimal-meta i, .evolution-sweep { animation: none !important; }
}

/* ========================================================================== 
   Final refinements: clean structure metadata, single-tree evolution, violet lab
   ========================================================================== */

/* Quiet experimental-structure metadata: informative without annotating the molecule. */
.structure-info-panel {
  position: absolute;
  z-index: 11;
  left: 4.5%;
  top: 8.5%;
  width: min(52%, 390px);
  padding: 4px 0 4px 18px;
  border-left: 1px solid rgba(136, 238, 215, .34);
  background: linear-gradient(90deg, rgba(5,7,8,.82), rgba(5,7,8,.28) 72%, transparent);
  color: rgba(255,255,255,.62);
  pointer-events: auto;
}
.structure-info-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(204,255,244,.56);
  font: 500 .45rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.structure-info-kicker i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(121,233,205,.84);
  animation: liveBlink 2.2s ease-in-out infinite;
}
.structure-info-panel h3 {
  margin: 13px 0 5px;
  color: rgba(255,255,255,.9);
  font: 600 clamp(.95rem, 1.25vw, 1.2rem)/1.15 var(--sans);
  letter-spacing: -.025em;
}
.structure-info-panel > p {
  max-width: 340px;
  margin: 0;
  color: rgba(255,255,255,.42);
  font: 500 .52rem/1.6 var(--mono);
  letter-spacing: .035em;
}
.structure-info-details {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  color: rgba(255,255,255,.3);
  font: 500 .43rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.structure-info-details span + span::before,
.structure-info-details a::before {
  content: "·";
  margin-right: 14px;
  color: rgba(121,233,205,.3);
}
.structure-info-details a {
  color: rgba(205,255,244,.68);
  transition: color .2s, transform .2s;
}
.structure-info-details a:hover { color: white; transform: translateX(2px); }

/* One phylogeny only: local art is the cinematic overview; live Nextstrain opens separately. */
.evolution-section {
  background:
    radial-gradient(ellipse at 74% 42%, rgba(98,83,190,.14), transparent 43%),
    radial-gradient(ellipse at 18% 78%, rgba(215,91,139,.07), transparent 38%),
    #06080c;
}
.evolution-section::before {
  opacity: .22;
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse at 62% 48%, #000 0, rgba(0,0,0,.64) 50%, transparent 84%);
}
.evolution-player {
  filter: drop-shadow(0 0 48px rgba(105,91,207,.095));
}
.evolution-player .evolution-tree-art {
  position: absolute;
  z-index: 2;
  inset: -4% -7% -3% -5%;
  width: 112%;
  height: 107%;
  object-fit: fill;
  opacity: .9;
  filter: saturate(1.08) brightness(.94) contrast(1.08);
  clip-path: inset(0 92% 0 0);
  transform-origin: 50% 50%;
  will-change: clip-path, transform;
}
.evolution-player.is-complete .evolution-tree-art { opacity: .72; }
.evolution-vignette {
  background:
    radial-gradient(ellipse 84% 80% at 54% 49%, transparent 61%, rgba(6,8,12,.42) 84%, rgba(6,8,12,.9) 100%),
    linear-gradient(0deg, rgba(6,8,12,.92), transparent 19%, transparent 84%, rgba(6,8,12,.58));
}
.evolution-sweep {
  background: linear-gradient(0deg, transparent, rgba(202,190,255,.82), transparent);
  box-shadow: 0 0 20px rgba(128,105,255,.65);
}
.evolution-year strong { color: rgba(236,232,255,.94); }
.evolution-live-link { color: rgba(218,207,255,.72); }
.evolution-live-link:hover { color: #fff; }
.evolution-play {
  border-color: rgba(197,184,255,.28);
  background: rgba(8,8,17,.68);
  color: rgba(239,235,255,.88);
}
.evolution-play:hover { background: rgba(27,22,52,.84); border-color: rgba(205,193,255,.5); }
.evolution-play-icon { border-left-color: #c8baff; }
.evolution-player.is-playing .evolution-play-icon { border-left-color: #c8baff; border-right-color: #c8baff; }
.evolution-track > span {
  background: linear-gradient(90deg, rgba(111,92,221,.48), rgba(232,194,255,.96), rgba(246,197,102,.92));
  box-shadow: 0 0 11px rgba(143,116,255,.5);
}
.evolution-track > i {
  background: #f4eaff;
  box-shadow: 0 0 14px rgba(165,135,255,.9);
}
.tree-key i { background: linear-gradient(90deg, #7464d8, #d462a0, #efbd62); }

/* Antigen is the shared center of the multi-virus structural-biology animation. */
.virus-core {
  width: 66px;
  height: 66px;
  font-size: .48rem;
  letter-spacing: .055em;
}

/* Open-science section has its own violet / electric-blue visual identity. */
.learning {
  padding: 150px 0;
  background:
    radial-gradient(circle at 12% 23%, rgba(137,107,255,.2), transparent 31%),
    radial-gradient(circle at 88% 72%, rgba(69,174,222,.12), transparent 34%),
    radial-gradient(circle at 64% 16%, rgba(229,93,155,.09), transparent 27%),
    #0a0916;
}
.learning::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(177,159,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177,159,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 48% 44%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse at 48% 44%, #000, transparent 78%);
}
.learning::after {
  width: 760px;
  height: 760px;
  right: -300px;
  top: -310px;
  border-color: rgba(173,150,255,.12);
  box-shadow: 0 0 0 105px rgba(130,105,230,.024), 0 0 0 210px rgba(75,168,219,.018);
}
.learning .section-index { color: rgba(190,174,255,.7); }
.learning .light-heading h2 em { color: #c8b8ff; }
.learning .split-heading > p { color: rgba(236,232,255,.48); }

.learning-subhead {
  margin: 72px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 50px;
  align-items: end;
}
.learning-subhead span {
  display: block;
  margin-bottom: 12px;
  color: rgba(190,174,255,.72);
  font: 500 .5rem/1 var(--mono);
  letter-spacing: .14em;
}
.learning-subhead h3 {
  margin: 0;
  max-width: 660px;
  color: rgba(255,255,255,.92);
  font: 500 clamp(1.65rem, 2.5vw, 2.6rem)/1.08 var(--serif);
  letter-spacing: -.035em;
}
.learning-subhead > p {
  margin: 0;
  color: rgba(239,235,255,.42);
  font-size: .83rem;
  line-height: 1.75;
}
.learning-shelf-head { margin-top: 96px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.tool-card {
  --tool-accent: #a98cff;
  position: relative;
  min-height: 340px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(192,178,255,.13);
  background: linear-gradient(145deg, rgba(21,18,43,.9), rgba(11,10,25,.92));
  color: white;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s;
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: auto -18% -40% 25%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tool-accent) 18%, transparent), transparent 70%);
  filter: blur(10px);
  transition: transform .45s, opacity .45s;
}
.tool-card:hover {
  z-index: 2;
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--tool-accent) 45%, transparent);
  background: linear-gradient(145deg, rgba(31,25,62,.96), rgba(13,11,29,.97));
}
.tool-card:hover::before { transform: scale(1.18) translateY(-8%); }
.tool-violet { --tool-accent: #ad8dff; }
.tool-cyan { --tool-accent: #59d4e8; }
.tool-coral { --tool-accent: #ff7f91; }
.tool-amber { --tool-accent: #f4c76d; }
.tool-blue { --tool-accent: #77a8ff; }
.tool-mint { --tool-accent: #64d9bd; }
.tool-card-top,
.tool-card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.tool-card-top {
  color: rgba(238,233,255,.42);
  font: 500 .49rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tool-card-top i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 42%, transparent);
  color: var(--tool-accent);
  font-style: normal;
}
.tool-glyph {
  position: relative;
  z-index: 2;
  height: 76px;
  margin: 30px 0 22px;
}
.tool-glyph::before,
.tool-glyph::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tool-accent) 70%, transparent), transparent);
}
.tool-glyph::after { transform: rotate(-12deg); opacity: .38; }
.tool-glyph b {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tool-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tool-accent) 70%, transparent);
  animation: toolPulse 3.8s ease-in-out infinite;
}
.tool-glyph b:nth-child(1) { left: 9%; top: 47%; }
.tool-glyph b:nth-child(2) { left: 29%; top: 23%; animation-delay: -.7s; }
.tool-glyph b:nth-child(3) { left: 51%; top: 55%; animation-delay: -1.4s; }
.tool-glyph b:nth-child(4) { left: 72%; top: 31%; animation-delay: -2.1s; }
.tool-glyph b:nth-child(5) { right: 7%; top: 48%; animation-delay: -2.8s; }
@keyframes toolPulse { 50% { transform: scale(1.7); opacity: .38; } }
.tool-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 13px;
  color: rgba(255,255,255,.94);
  font: 600 1.18rem/1.2 var(--sans);
  letter-spacing: -.025em;
}
.tool-card > p {
  position: relative;
  z-index: 2;
  margin: 0 0 28px;
  color: rgba(238,233,255,.47);
  font-size: .75rem;
  line-height: 1.72;
}
.tool-card-foot {
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(203,191,255,.1);
  color: rgba(238,233,255,.34);
  font: 500 .48rem/1 var(--mono);
  letter-spacing: .065em;
  text-transform: uppercase;
}
.tool-card-foot strong { color: var(--tool-accent); font-weight: 500; }

.learning-grid {
  border-color: rgba(192,178,255,.14);
  background: rgba(177,157,255,.11);
}
.resource-card {
  min-height: 390px;
  background: rgba(13,11,29,.9);
}
.resource-card::after { background: radial-gradient(circle, rgba(176,146,255,.16), transparent 70%); }
.resource-card:hover { background: #17132e; }
.resource-top { color: rgba(239,234,255,.4); }
.resource-top i { border-color: rgba(183,158,255,.34); color: #c2adff; }
.resource-signal::before { background: rgba(181,163,255,.15); }
.resource-signal b { background: #b69dff; box-shadow: 0 0 12px rgba(166,139,255,.72); }
.resource-card h3 { color: rgba(255,255,255,.93); }
.resource-card > p { color: rgba(239,235,255,.46); }
.resource-source { border-color: rgba(193,177,255,.11); color: rgba(237,232,255,.34); }
.resource-source span { color: #c1adff; }
.learning-note { border-color: rgba(193,177,255,.13); background: rgba(17,14,35,.62); }
.learning-note > span { color: rgba(190,172,255,.72); }
.learning-note p, .learning-note a { color: rgba(239,235,255,.53); }
.learning-note a:hover { color: white; }

@media (max-width: 1050px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-subhead { grid-template-columns: 1fr; gap: 18px; }
  .learning-subhead > p { max-width: 700px; }
}

@media (max-width: 720px) {
  .structure-info-panel {
    left: 5%;
    top: 6.5%;
    width: min(72%, 340px);
    padding-left: 13px;
  }
  .structure-info-kicker { font-size: .39rem; }
  .structure-info-panel h3 { margin-top: 9px; font-size: .83rem; }
  .structure-info-panel > p { font-size: .42rem; line-height: 1.55; }
  .structure-info-details { margin-top: 8px; gap: 5px 9px; font-size: .36rem; }
  .structure-info-details span + span::before,
  .structure-info-details a::before { margin-right: 9px; }

  .evolution-player .evolution-tree-art {
    inset: 1% auto 5% 0;
    width: 148%;
    height: 94%;
    object-fit: fill;
    transform: translate3d(var(--tree-pan),0,0) scale(1.03);
    transform-origin: left center;
    opacity: .84;
  }
  .evolution-player.is-complete .evolution-tree-art { opacity: .72; }

  .learning { padding: 104px 0; }
  .learning-subhead { margin-top: 54px; }
  .learning-shelf-head { margin-top: 72px; }
  .learning-subhead h3 { font-size: 1.75rem; }
  .learning-subhead > p { font-size: .75rem; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 310px; padding: 23px; }
  .tool-glyph { height: 64px; margin: 24px 0 18px; }
  .learning-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .structure-info-kicker i, .tool-glyph b { animation: none !important; }
}

/* Final evolution-layout refinement: reserve a clean band below the tree for the timeline. */
.evolution-player {
  min-height: 700px;
}

.evolution-player .evolution-tree-art {
  top: -1.5%;
  right: auto;
  bottom: auto;
  left: -5%;
  width: 112%;
  height: 84%;
}

.evolution-sweep {
  bottom: 19%;
}

.evolution-play {
  top: 43%;
}

.evolution-timeline {
  left: 6%;
  right: 6%;
  bottom: 3.5%;
}

.evolution-vignette {
  background:
    radial-gradient(ellipse 84% 77% at 54% 43%, transparent 61%, rgba(6,8,12,.4) 84%, rgba(6,8,12,.88) 100%),
    linear-gradient(0deg, rgba(6,8,12,.97), rgba(6,8,12,.58) 10%, transparent 23%, transparent 84%, rgba(6,8,12,.58));
}

@media (max-width: 720px) {
  .evolution-player {
    min-height: 470px;
  }

  .evolution-player .evolution-tree-art {
    top: 2%;
    right: auto;
    bottom: auto;
    left: 0;
    width: 148%;
    height: 76%;
    transform: translate3d(var(--tree-pan),0,0) scale(1.02);
  }

  .evolution-sweep {
    bottom: 22%;
  }

  .evolution-play {
    top: 42%;
  }

  .evolution-timeline {
    left: 7%;
    right: 7%;
    bottom: 4.5%;
  }
}

@media (max-width: 430px) {
  .evolution-player {
    min-height: 420px;
  }

  .evolution-player .evolution-tree-art {
    height: 74%;
  }
}

/* Final phylodynamics polish: one shared violet environment and a timeline
   that lives below, not on top of, the complete phylogeny. */
.evolution-section {
  background:
    radial-gradient(ellipse at 72% 38%, rgba(115, 93, 218, .17), transparent 44%),
    radial-gradient(ellipse at 24% 63%, rgba(87, 72, 173, .12), transparent 46%),
    linear-gradient(180deg, #070711 0%, #090816 52%, #070711 100%);
}
.evolution-section::before {
  opacity: .19;
  background-size: 82px 82px;
  -webkit-mask-image: radial-gradient(ellipse at 52% 48%, #000 0, rgba(0,0,0,.72) 55%, transparent 88%);
  mask-image: radial-gradient(ellipse at 52% 48%, #000 0, rgba(0,0,0,.72) 55%, transparent 88%);
}
.nextstrain-copy {
  color: rgba(244, 241, 255, .96);
}
.nextstrain-copy .section-index,
.nextstrain-copy > p:not(.section-index),
.tree-actions > span,
.tree-key {
  color: rgba(231, 225, 255, .48);
}
.nextstrain-copy h2 em { color: #cfc5ff; }
.evolution-section .tree-actions .button-primary {
  color: #090713;
  background: linear-gradient(135deg, #d4cbff 0%, #b9a9ff 58%, #9d8cff 100%);
  border-color: rgba(222, 214, 255, .72);
  box-shadow: 0 12px 42px rgba(116, 91, 224, .16);
}
.evolution-section .tree-actions .button-primary:hover {
  color: #05040b;
  background: linear-gradient(135deg, #e2dcff 0%, #c5b8ff 58%, #ab9aff 100%);
  box-shadow: 0 16px 52px rgba(116, 91, 224, .23);
}
.tree-key i { background: linear-gradient(90deg, #7667dc, #c880ff, #efbd62); }

.evolution-player {
  --tree-pan: 0%;
  display: block;
  min-height: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 0 48px rgba(105, 91, 207, .10));
  -webkit-mask-image: none;
  mask-image: none;
}
.evolution-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 48%, rgba(101, 82, 194, .10), transparent 54%),
    linear-gradient(180deg, rgba(9, 8, 23, .34), rgba(7, 7, 17, .08));
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.evolution-player .evolution-tree-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: .91;
  filter: saturate(1.11) brightness(.98) contrast(1.08);
  clip-path: inset(0 92% 0 0);
  transform: none;
  transform-origin: center center;
  will-change: clip-path;
}
.evolution-player.is-complete .evolution-tree-art { opacity: .78; }
.evolution-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse 86% 84% at 52% 49%, transparent 64%, rgba(7,7,17,.34) 86%, rgba(7,7,17,.82) 100%),
    linear-gradient(180deg, rgba(7,7,17,.40), transparent 12%, transparent 88%, rgba(7,7,17,.44));
}
.evolution-sweep {
  top: 5%;
  bottom: 5%;
}
.evolution-year strong {
  white-space: nowrap;
  font-size: clamp(1.75rem, 2.7vw, 3.05rem);
  letter-spacing: -.035em;
}
.evolution-play { top: 50%; }
.evolution-timeline {
  position: relative;
  z-index: 8;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 24px 6% 0;
  padding: 0 0 20px;
  pointer-events: none;
}
.evolution-track { background: rgba(222, 214, 255, .18); }
.evolution-years { color: rgba(224, 217, 255, .36); }

@media (max-width: 1050px) {
  .nextstrain-copy { max-width: 720px; }
  .evolution-viewport { min-height: 560px; }
}

@media (max-width: 720px) {
  .evolution-section {
    background:
      radial-gradient(ellipse at 68% 25%, rgba(115, 93, 218, .15), transparent 44%),
      linear-gradient(180deg, #070711 0%, #090816 54%, #070711 100%);
  }
  .evolution-player { min-height: 0; }
  .evolution-viewport {
    min-height: 0;
    aspect-ratio: 1 / 1.03;
  }
  .evolution-player .evolution-tree-art {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    opacity: .88;
  }
  .evolution-year { left: 7%; top: 6%; }
  .evolution-year strong { font-size: clamp(1.35rem, 8vw, 2.25rem); }
  .evolution-live-link { right: 7%; top: 7%; }
  .evolution-play { top: 50%; }
  .evolution-timeline {
    margin: 18px 7% 0;
    padding-bottom: 14px;
  }
  .evolution-years { margin-top: 9px; }
}

@media (max-width: 430px) {
  .evolution-viewport { aspect-ratio: 1 / 1.06; }
  .evolution-year strong { font-size: 1.55rem; }
  .evolution-play { padding-inline: 12px; gap: 8px; }
  .evolution-timeline { margin-top: 14px; }
}

/* ==========================================================
   Responsive SVG research ecosystem
   ========================================================== */
.methods-map {
  position: relative;
  padding: 132px 0 118px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(110,231,208,.10), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(169,156,255,.12), transparent 30%),
    radial-gradient(circle at 88% 53%, rgba(246,193,119,.075), transparent 24%),
    radial-gradient(circle at 72% 82%, rgba(255,113,140,.075), transparent 29%),
    radial-gradient(circle at 22% 78%, rgba(255,157,102,.075), transparent 29%),
    linear-gradient(180deg, #050708 0%, #070911 54%, #070812 100%);
}
.methods-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.methods-map::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -360px;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(104,184,255,.065);
  box-shadow: 0 0 0 130px rgba(169,156,255,.014), 0 0 0 260px rgba(110,231,208,.009);
  pointer-events: none;
}
.methods-map .section-shell { position: relative; z-index: 2; }
.methods-heading {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 78px;
  align-items: end;
  margin-bottom: 54px;
}
.methods-heading .section-index { margin-bottom: 30px; color: rgba(255,255,255,.36); }
.methods-heading h2 {
  margin: 0;
  max-width: 850px;
  font: 500 clamp(3.15rem, 5.35vw, 6.1rem)/.96 var(--serif);
  letter-spacing: -.048em;
}
.methods-heading h2 em { color: #d9d1ff; font-weight: 500; }
.methods-heading-copy { display: flex; align-items: flex-end; padding-bottom: 7px; }
.methods-instruction {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.40);
  font: 500 .56rem/1.55 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.methods-instruction i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #ff718c;
  box-shadow: 0 0 14px rgba(255,113,140,.72);
  animation: methodsPulse 2.6s ease-in-out infinite;
}
@keyframes methodsPulse { 50% { opacity: .35; transform: scale(.65); } }
.methods-network-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), 1500px);
  margin: 0 auto;
}
.methods-network-stage {
  position: relative;
  min-height: 850px;
  border: 1px solid rgba(255,255,255,.105);
  background:
    radial-gradient(circle at 50% 45%, rgba(217,209,255,.034), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.005)),
    rgba(2,4,10,.36);
  box-shadow: 0 50px 140px rgba(0,0,0,.24), inset 0 0 100px rgba(125,113,255,.026);
  overflow: hidden;
  isolation: isolate;
}
.methods-network-stage::before,
.methods-network-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.methods-network-stage::before {
  width: 430px;
  height: 430px;
  left: calc(50% - 215px);
  top: calc(45% - 215px);
  border: 1px solid rgba(238,252,255,.045);
  box-shadow: 0 0 0 90px rgba(238,252,255,.009), 0 0 0 180px rgba(238,252,255,.006);
}
.methods-network-stage::after {
  width: 620px;
  height: 620px;
  right: -260px;
  bottom: -330px;
  border: 1px solid rgba(255,113,140,.04);
}
.research-ecosystem-svg {
  display: block;
  width: 100%;
  height: 850px;
  max-width: none;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ecosystem-backdrop circle {
  fill: none;
  stroke: rgba(255,255,255,.032);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ecosystem-edge {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .28s ease, stroke-width .28s ease;
}
.ecosystem-edge--primary { stroke-width: 1.25; opacity: .28; }
.ecosystem-edge--member { stroke-width: .8; opacity: .19; }
.ecosystem-edge--cross { stroke-width: .65; opacity: .085; stroke-dasharray: 3 7; }
.ecosystem-edge.is-highlighted { opacity: .9; stroke-width: 1.8; }
.ecosystem-edge.is-muted { opacity: .018; }
.ecosystem-pulse {
  pointer-events: none;
  filter: url(#ecosystem-soft-glow);
  opacity: .85;
}
.ecosystem-node {
  cursor: grab;
  outline: none;
  touch-action: none;
  transition: opacity .26s ease;
}
.ecosystem-node:active { cursor: grabbing; }
.ecosystem-node.is-muted { opacity: .13; }
.ecosystem-node.is-hidden { opacity: 0; pointer-events: none; }
.ecosystem-node .node-halo {
  fill: none;
  stroke-width: 1;
  opacity: .16;
  transform-box: fill-box;
  transform-origin: center;
  animation: ecosystemHalo 4.4s ease-in-out infinite;
}
.ecosystem-node .node-disc {
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  transition: filter .22s ease, stroke-width .22s ease, fill-opacity .22s ease;
}
.ecosystem-node .node-dot { opacity: .88; filter: url(#ecosystem-soft-glow); }
.ecosystem-node .node-label {
  fill: rgba(255,255,255,.88);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.012em;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.ecosystem-node .node-substatus {
  fill: rgba(255,255,255,.37);
  font-family: var(--mono);
  font-size: 6.7px;
  font-weight: 500;
  letter-spacing: .08em;
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}
.ecosystem-node--center .node-disc { fill: url(#ecosystem-core-fill); stroke: #eefcff; stroke-width: 1.45; filter: url(#ecosystem-glow); }
.ecosystem-node--center .node-halo { stroke: #eefcff; opacity: .22; }
.ecosystem-node--center .node-label { font-family: var(--serif); font-size: 13px; font-weight: 500; }
.ecosystem-node--hub .node-disc { fill-opacity: .13; stroke-width: 1.45; filter: url(#ecosystem-soft-glow); }
.ecosystem-node--hub .node-halo { opacity: .24; }
.ecosystem-node--hub .node-label { font-size: 10px; }
.ecosystem-node--tool .node-disc { fill-opacity: .07; }
.ecosystem-node--tool .node-label { font-size: 7.8px; font-weight: 550; }
.ecosystem-node--tool[data-status="learning"] .node-disc { stroke-dasharray: 3 3; fill-opacity: .025; }
.ecosystem-node--tool[data-status="current"] .node-dot { display: none; }
.ecosystem-node:hover .node-disc,
.ecosystem-node:focus-visible .node-disc,
.ecosystem-node.is-selected .node-disc { stroke-width: 2; filter: url(#ecosystem-glow); fill-opacity: .19; }
.ecosystem-node:hover .node-label,
.ecosystem-node:focus-visible .node-label,
.ecosystem-node.is-selected .node-label { fill: #fff; }
.ecosystem-node.is-selected .node-halo { opacity: .55; animation-duration: 2.2s; }
@keyframes ecosystemHalo { 50% { opacity: .07; transform: scale(1.08); } }
.ecosystem-mobile-title { fill: rgba(255,255,255,.38); font: 500 8px/1 var(--mono); letter-spacing: .12em; text-anchor: middle; text-transform: uppercase; }
.ecosystem-mobile-domain { fill: #fff; font: 600 15px/1 var(--sans); text-anchor: middle; letter-spacing: -.025em; }
.methods-network-topbar {
  position: absolute;
  z-index: 8;
  top: 20px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
.methods-network-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.39);
  font: 500 .53rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.methods-network-kicker i { width: 30px; height: 1px; background: linear-gradient(90deg, #6ee7d0, #a99cff, #ff718c); }
.methods-controls { display: flex; gap: 7px; pointer-events: auto; }
.methods-controls button {
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(5,7,14,.64);
  color: rgba(255,255,255,.62);
  font: 500 .52rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.methods-controls button:hover,
.methods-controls button[aria-pressed="true"] { color: white; border-color: rgba(217,209,255,.45); background: rgba(169,156,255,.11); }
.methods-inspector {
  position: absolute;
  z-index: 8;
  left: 22px;
  bottom: 22px;
  width: min(390px, calc(100% - 44px));
  min-height: 170px;
  padding: 20px 21px 18px;
  background: rgba(5,7,14,.80);
  border: 1px solid rgba(255,255,255,.115);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.methods-inspector::before { content: ""; position: absolute; left: -1px; top: -1px; width: 74px; height: 1px; background: linear-gradient(90deg, #6ee7d0, #a99cff, #ff718c); }
.methods-inspector small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.34); font: 500 .52rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.methods-inspector h3 { margin: 0; color: white; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.025em; }
.methods-inspector p { margin: 9px 0 13px; color: rgba(255,255,255,.52); font-size: .76rem; line-height: 1.63; }
.methods-inspector-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 16px; }
.methods-inspector-status { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.42); font: 500 .49rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.methods-inspector-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--inspector-color, #a99cff); box-shadow: 0 0 12px var(--inspector-color, #a99cff); }
.methods-inspector a { color: #d9d1ff; font: 500 .53rem/1 var(--mono); letter-spacing: .05em; border-bottom: 1px solid rgba(217,209,255,.34); }
.methods-inspector a[hidden] { display: none; }
.methods-legend {
  position: absolute;
  z-index: 8;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 8px;
  width: 205px;
  padding: 14px 15px;
  color: rgba(255,255,255,.38);
  background: rgba(5,7,14,.56);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  font: 500 .49rem/1.35 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.methods-legend span { display: flex; align-items: center; gap: 9px; }
.methods-legend i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #a99cff; background: rgba(169,156,255,.13); }
.methods-legend .legend-core i { position: relative; border-color: #6ee7d0; background: rgba(110,231,208,.15); }
.methods-legend .legend-core i::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; right: -1px; top: -1px; background: #6ee7d0; }
.methods-legend .legend-working i { border-color: #68b8ff; background: rgba(104,184,255,.07); }
.methods-legend .legend-learning i { border-style: dashed; border-color: #ff718c; background: rgba(255,113,140,.03); }
.methods-accessible-list { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.methods-fallback { margin: 22px auto 0; width: min(calc(100% - 64px), 900px); color: rgba(255,255,255,.56); text-align: center; }

@media (max-width: 1060px) {
  .methods-heading { grid-template-columns: 1fr; gap: 25px; }
  .methods-heading-copy { max-width: 740px; }
  .methods-network-stage { min-height: 910px; }
  .research-ecosystem-svg { height: 910px; }
  .methods-legend { width: 185px; }
}

@media (max-width: 760px) {
  .methods-map { padding: 96px 0 82px; }
  .methods-heading { margin-bottom: 34px; }
  .methods-heading h2 { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .methods-instruction { font-size: .48rem; line-height: 1.55; }
  .methods-network-shell { width: calc(100% - 24px); }
  .methods-network-stage { min-height: 0; overflow: hidden; }
  .research-ecosystem-svg { height: 770px; }
  .methods-network-topbar { top: 13px; left: 13px; right: 13px; align-items: flex-start; }
  .methods-network-kicker { max-width: 155px; line-height: 1.45; }
  .methods-network-kicker i { width: 18px; flex: 0 0 18px; }
  .methods-controls { flex-direction: column; }
  .methods-controls button { padding: 8px 9px; font-size: .46rem; }
  #methods-expand { display: none; }
  .methods-inspector {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    min-height: 142px;
    margin: 0 12px 12px;
    padding: 17px 17px 15px;
  }
  .methods-inspector h3 { font-size: 1.02rem; }
  .methods-inspector p { font-size: .7rem; }
  .methods-legend {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0 12px 12px;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 12px;
    font-size: .42rem;
  }
  .methods-legend span { gap: 5px; }
  .methods-legend i { width: 11px; height: 11px; flex: 0 0 11px; }
  .ecosystem-node--hub .node-label { font-size: 9.2px; }
  .ecosystem-node--tool .node-label { font-size: 8.5px; }
}

@media (max-width: 430px) {
  .research-ecosystem-svg { height: 735px; }
  .methods-network-kicker { max-width: 118px; font-size: .45rem; }
  .methods-controls button { padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .methods-instruction i,
  .ecosystem-node .node-halo { animation: none; }
}

@media (max-width: 760px) {
  .methods-network-kicker span { display: none; }
  .methods-network-kicker::after { content: "Research ecosystem"; }
}

/* ========================================================================== 
   Final layout refinement: theme toggle, top-first biography, compact learning
   ========================================================================== */

:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html, body { transition: background-color .35s ease, color .35s ease; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px 4px 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.68);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: rgba(255,255,255,.38); color: #fff; }
.theme-toggle-track {
  position: relative;
  width: 50px;
  height: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  overflow: hidden;
}
.theme-toggle-track i { position: relative; z-index: 2; display: grid; place-items: center; font: normal 12px/1 var(--mono); opacity: .55; }
.theme-toggle-track b {
  position: absolute;
  z-index: 1;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff806f;
  box-shadow: 0 0 18px rgba(255,105,91,.32);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .28s;
}
html[data-theme="light"] .theme-toggle-track b { transform: translateX(24px); background: #f5b94f; }
.theme-toggle-text { font: 500 .52rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }

/* Text-led opening: the experimental structure now has its own chapter. */
.hero-inner-text { grid-template-columns: minmax(0, 1fr); max-width: var(--shell); }
.hero-copy-wide { max-width: 1040px; }
.hero-copy-wide .statement { font-size: clamp(4.4rem, 8.3vw, 9.1rem); }
.hero-copy-wide .hero-intro { max-width: 800px; }
.hero-copy-wide .hero-facts { max-width: 820px; }

/* The biography is intentionally the first chapter after the landing view. */
.about-portrait { min-height: 590px; }
.about-portrait img { min-height: 590px; }

/* Dedicated experimental-structure chapter. */
.structure-section {
  position: relative;
  padding: 120px 0 108px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 73% 42%, rgba(80,159,148,.15), transparent 27%),
    radial-gradient(circle at 20% 80%, rgba(111,101,191,.10), transparent 31%),
    linear-gradient(180deg, #060909 0%, #07100f 100%);
}
.structure-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.65), transparent 78%);
}
.structure-section-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px,.78fr) minmax(520px,1.22fr);
  align-items: center;
  gap: 44px;
}
.structure-section-copy { position: relative; z-index: 3; }
.structure-section-copy .section-index { color: rgba(255,255,255,.36); }
.structure-section-copy h2 {
  margin: 0;
  font: 500 clamp(3.4rem, 5.8vw, 6.4rem)/.96 var(--serif);
  letter-spacing: -.05em;
}
.structure-section-copy h2 em { color: var(--mint-soft); font-weight: 500; }
.structure-lead { max-width: 590px; margin: 30px 0 34px; color: rgba(255,255,255,.56); font-size: .94rem; line-height: 1.82; }
.structure-summary-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  max-width: 590px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
}
.structure-summary-grid div { min-height: 82px; padding: 17px 18px; background: rgba(5,10,10,.82); }
.structure-summary-grid small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.32); font: 500 .52rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.structure-summary-grid strong { display: block; font-size: .78rem; line-height: 1.35; }
.structure-hint { margin: 20px 0 0; color: rgba(255,255,255,.31); font: 500 .53rem/1.55 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.structure-section-art { position: relative; min-width: 0; display: grid; place-items: center; }
.structure-section-art .structure-stage-refined { width: min(100%,760px); }

/* Remove the obsolete status legend: node colors now encode domains, not status. */
.methods-legend { display: none !important; }

/* Compact open-science links: two small, visually distinct panels. */
.learning {
  padding: 76px 0 68px;
  background: linear-gradient(180deg,#090b15 0%,#080a12 100%);
}
.learning::after { width: 420px; height: 420px; right: -180px; top: -190px; }
.learning-compact-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: end;
  gap: 50px;
  margin-bottom: 30px;
}
.learning-compact-heading .section-index { margin-bottom: 18px; }
.learning-compact-heading h2 { margin: 0; font: 500 clamp(2.7rem,4.4vw,4.9rem)/.98 var(--serif); letter-spacing: -.045em; }
.learning-compact-heading h2 em { color: #c7b7ff; font-weight: 500; }
.learning-compact-heading > p { margin: 0 0 4px; max-width: 560px; color: rgba(255,255,255,.43); font-size: .78rem; line-height: 1.7; }
.learning-compact-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.learning-panel { border: 1px solid rgba(255,255,255,.10); overflow: hidden; }
.toolkit-panel { background: linear-gradient(145deg,rgba(75,176,196,.085),rgba(31,72,103,.035)); border-color: rgba(91,205,224,.18); }
.shelf-panel { background: linear-gradient(145deg,rgba(181,117,255,.085),rgba(255,113,140,.03)); border-color: rgba(190,151,255,.18); }
.learning-panel-head { padding: 18px 20px 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
.learning-panel-head span { display: block; margin-bottom: 6px; font: 500 .5rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.toolkit-panel .learning-panel-head span { color: #6edbed; }
.shelf-panel .learning-panel-head span { color: #d4b7ff; }
.learning-panel-head h3 { margin: 0; color: #fff; font-size: .87rem; }
.compact-link-list { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border: 0 !important; background: transparent !important; }
.compact-resource-link {
  min-height: 58px;
  padding: 11px 16px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 20px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  transition: background .2s ease, transform .2s ease;
}
.compact-resource-link:last-child { border-bottom: 0; }
.compact-resource-link:hover { transform: translateX(3px); }
.compact-tool-link:hover { background: rgba(81,206,226,.075); }
.compact-learning-link:hover { background: rgba(192,142,255,.075); }
.compact-link-index { color: rgba(255,255,255,.26); font: 500 .48rem/1 var(--mono); }
.compact-link-copy { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: 12px; }
.compact-link-copy small { grid-column: 1 / -1; margin-bottom: 3px; color: rgba(255,255,255,.28); font: 500 .45rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.compact-link-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.82); font-size: .7rem; }
.compact-link-copy em { color: rgba(255,255,255,.29); font: normal 500 .45rem/1 var(--mono); white-space: nowrap; }
.compact-resource-link > i { color: rgba(255,255,255,.38); font-style: normal; font-size: .65rem; text-align: right; }
.compact-learning-note { position: relative; z-index: 2; margin-top: 16px; padding: 12px 0; grid-template-columns: 170px 1fr; }

/* Reliable footer control. */
.back-to-top {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.58);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.back-to-top:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Light theme. The same information architecture, with a true white canvas.
   -------------------------------------------------------------------------- */
html[data-theme="light"] { background: #f7f8f5; }
html[data-theme="light"] body { background: #f7f8f5; color: #151a1a; }
html[data-theme="light"] ::selection { background: #ffd0c9; color: #141818; }
html[data-theme="light"] :focus-visible { outline-color: #d85d52; }
html[data-theme="light"] .loader { background: #f7f8f5; }
html[data-theme="light"] .loader-mark { color: #151a1a; }
html[data-theme="light"] .loader-line { background: rgba(10,16,16,.11); }
html[data-theme="light"] .loader-line::after { background: #d85d52; }

html[data-theme="light"] .site-header { color: #171c1b; }
html[data-theme="light"] .site-header.scrolled { background: rgba(247,248,245,.88); border-color: rgba(12,18,18,.11); }
html[data-theme="light"] .brand-mark { border-color: rgba(12,18,18,.28); }
html[data-theme="light"] .desktop-nav a { color: rgba(15,21,21,.60); }
html[data-theme="light"] .desktop-nav a:hover { color: #101515; }
html[data-theme="light"] .desktop-nav a::after { background: #d85d52; }
html[data-theme="light"] .profile-link { color: #8b463f; }
html[data-theme="light"] .theme-toggle { border-color: rgba(12,18,18,.16); background: rgba(255,255,255,.62); color: rgba(12,18,18,.64); }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(12,18,18,.34); color: #111; }
html[data-theme="light"] .theme-toggle-track { background: rgba(12,18,18,.075); }
html[data-theme="light"] .menu-button { border-color: rgba(12,18,18,.22); }
html[data-theme="light"] .menu-button span { background: #111; }
html[data-theme="light"] .mobile-menu { background: rgba(247,248,245,.98); }
html[data-theme="light"] .mobile-menu a { color: #151a1a; border-color: rgba(12,18,18,.10); }

html[data-theme="light"] .hero {
  color: #131918;
  background:
    radial-gradient(circle at 77% 43%, rgba(85,147,140,.12), transparent 28%),
    radial-gradient(circle at 70% 80%, rgba(139,123,220,.09), transparent 34%),
    #f7f8f5;
}
html[data-theme="light"] .hero::before { background-image: linear-gradient(rgba(10,16,16,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,16,16,.035) 1px,transparent 1px); }
html[data-theme="light"] .hero::after { background: linear-gradient(90deg,rgba(247,248,245,.08),transparent 50%,rgba(247,248,245,.15)); }
html[data-theme="light"] .sequence { color: rgba(33,91,77,.16); }
html[data-theme="light"] .overline { color: rgba(15,21,21,.57); }
html[data-theme="light"] .overline span { background: #d85d52; }
html[data-theme="light"] .name-line { color: rgba(15,21,21,.58); }
html[data-theme="light"] .statement em { color: #245f54; }
html[data-theme="light"] .hero-intro { color: rgba(15,21,21,.62); }
html[data-theme="light"] .button-primary { background: #d85d52; border-color: #d85d52; color: #fff; }
html[data-theme="light"] .button-primary:hover { background: #b94840; }
html[data-theme="light"] .button-quiet { color: rgba(15,21,21,.72); border-color: rgba(15,21,21,.17); background: rgba(255,255,255,.45); }
html[data-theme="light"] .button-quiet:hover { color: #111; border-color: rgba(15,21,21,.42); }
html[data-theme="light"] .affiliation-line { color: rgba(15,21,21,.39); }
html[data-theme="light"] .affiliation-line span + span::before { color: #d85d52; }
html[data-theme="light"] .hero-facts { border-color: rgba(12,18,18,.12); }
html[data-theme="light"] .hero-facts span { color: rgba(12,18,18,.45); }
html[data-theme="light"] .scroll-cue { color: rgba(12,18,18,.42); }
html[data-theme="light"] .scroll-cue i { background: rgba(12,18,18,.24); }

html[data-theme="light"] .about,
html[data-theme="light"] .manifesto,
html[data-theme="light"] .foundations,
html[data-theme="light"] .publications,
html[data-theme="light"] .news { background: #fff; }
html[data-theme="light"] .about-facts div { background: #fff; }
html[data-theme="light"] .about { border-top: 1px solid rgba(12,18,18,.08); }

html[data-theme="light"] .methods-map {
  color: #171a24;
  background:
    radial-gradient(circle at 16% 20%, rgba(66,176,157,.12), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(126,104,218,.12), transparent 30%),
    radial-gradient(circle at 85% 72%, rgba(238,105,128,.07), transparent 29%),
    #f5f4fb;
}
html[data-theme="light"] .methods-map::before { background-image: linear-gradient(rgba(20,18,40,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,18,40,.035) 1px,transparent 1px); }
html[data-theme="light"] .methods-heading .section-index { color: rgba(25,22,45,.42); }
html[data-theme="light"] .methods-heading h2 em { color: #6857bd; }
html[data-theme="light"] .methods-instruction { color: rgba(25,22,45,.49); }
html[data-theme="light"] .methods-network-stage { border-color: rgba(43,37,79,.13); background: rgba(255,255,255,.66); box-shadow: 0 35px 100px rgba(53,44,94,.10),inset 0 0 100px rgba(113,93,214,.035); }
html[data-theme="light"] .ecosystem-backdrop circle { stroke: rgba(26,22,48,.07); }
html[data-theme="light"] .ecosystem-node .node-label { fill: rgba(20,18,35,.88); }
html[data-theme="light"] .ecosystem-node .node-substatus { fill: rgba(20,18,35,.44); }
html[data-theme="light"] .ecosystem-node--center .node-disc { stroke: #272238; }
html[data-theme="light"] .ecosystem-node--center .node-halo { stroke: #54468b; }
html[data-theme="light"] .ecosystem-node:hover .node-label,
html[data-theme="light"] .ecosystem-node:focus-visible .node-label,
html[data-theme="light"] .ecosystem-node.is-selected .node-label { fill: #11101b; }
html[data-theme="light"] .ecosystem-mobile-title { fill: rgba(20,18,35,.48); }
html[data-theme="light"] .ecosystem-mobile-domain { fill: #171421; }
html[data-theme="light"] .methods-network-kicker { color: rgba(25,22,45,.46); }
html[data-theme="light"] .methods-controls button { border-color: rgba(39,32,75,.14); background: rgba(255,255,255,.75); color: rgba(25,22,45,.62); }
html[data-theme="light"] .methods-controls button:hover,
html[data-theme="light"] .methods-controls button[aria-pressed="true"] { color: #211a3b; background: rgba(126,104,218,.10); border-color: rgba(92,71,180,.33); }
html[data-theme="light"] .methods-inspector { background: rgba(255,255,255,.88); border-color: rgba(39,32,75,.13); box-shadow: 0 18px 50px rgba(40,31,74,.12); }
html[data-theme="light"] .methods-inspector small { color: rgba(25,22,45,.45); }
html[data-theme="light"] .methods-inspector h3 { color: #1b1729; }
html[data-theme="light"] .methods-inspector p { color: rgba(25,22,45,.62); }
html[data-theme="light"] .methods-inspector-status { color: rgba(25,22,45,.52); }
html[data-theme="light"] .methods-inspector a { color: #604eae; }

html[data-theme="light"] .structure-section {
  color: #171c1b;
  background:
    radial-gradient(circle at 73% 42%, rgba(73,167,151,.13), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(126,108,210,.08), transparent 31%),
    #f6f8f5;
}
html[data-theme="light"] .structure-section::before { background-image: linear-gradient(rgba(10,16,16,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(10,16,16,.025) 1px,transparent 1px); }
html[data-theme="light"] .structure-section-copy .section-index { color: rgba(15,21,21,.42); }
html[data-theme="light"] .structure-section-copy h2 em { color: #28675a; }
html[data-theme="light"] .structure-lead { color: rgba(15,21,21,.61); }
html[data-theme="light"] .structure-summary-grid { border-color: rgba(15,21,21,.11); background: rgba(15,21,21,.11); }
html[data-theme="light"] .structure-summary-grid div { background: rgba(255,255,255,.86); }
html[data-theme="light"] .structure-summary-grid small { color: rgba(15,21,21,.42); }
html[data-theme="light"] .structure-hint { color: rgba(15,21,21,.40); }
html[data-theme="light"] .structure-stage-refined::before { opacity: .5; }
html[data-theme="light"] .structure-info-panel { background: rgba(255,255,255,.72); border-color: rgba(15,21,21,.10); color: #151a19; }
html[data-theme="light"] .structure-info-panel p,
html[data-theme="light"] .structure-info-details { color: rgba(15,21,21,.52); }
html[data-theme="light"] .structure-info-kicker { color: #2a6e60; }
html[data-theme="light"] .structure-info-details a { color: #85534d; }

html[data-theme="light"] .nextstrain-section { color: #181625; background: linear-gradient(180deg,#f5f3fc,#faf9fe); }
html[data-theme="light"] .nextstrain-copy p { color: rgba(28,24,50,.62); }
html[data-theme="light"] .nextstrain-copy h2 em { color: #725fbf; }
html[data-theme="light"] .tree-actions > span,
html[data-theme="light"] .tree-key { color: rgba(28,24,50,.42); }
html[data-theme="light"] .evolution-player { background: rgba(255,255,255,.54); border-color: rgba(55,45,97,.12); }
html[data-theme="light"] .evolution-year { color: #28213e; }
html[data-theme="light"] .evolution-live-link { color: #554497; }
html[data-theme="light"] .evolution-play { color: #28213e; border-color: rgba(55,45,97,.28); background: rgba(255,255,255,.70); }
html[data-theme="light"] .evolution-track { background: rgba(55,45,97,.15); }
html[data-theme="light"] .evolution-years { color: rgba(40,33,62,.42); }
html[data-theme="light"] .nextstrain-statline { border-color: rgba(55,45,97,.12); }
html[data-theme="light"] .nextstrain-statline span { color: rgba(40,33,62,.47); }

html[data-theme="light"] .program,
html[data-theme="light"] .conferences,
html[data-theme="light"] .learning,
html[data-theme="light"] .contact { color: #171c1b; background: #fff; }
html[data-theme="light"] .program { background: #f7faf8; }
html[data-theme="light"] .program .light-heading h2 em,
html[data-theme="light"] .conferences .light-heading h2 em,
html[data-theme="light"] .learning h2 em,
html[data-theme="light"] .contact h2 em { color: #735fb8; }
html[data-theme="light"] .program-item { border-color: rgba(12,18,18,.12); }
html[data-theme="light"] .program-label,
html[data-theme="light"] .program-number { color: #4d8073; }
html[data-theme="light"] .project-question { color: #202826; }
html[data-theme="light"] .project-summary,
html[data-theme="light"] .program-copy li { color: rgba(20,28,26,.62); }
html[data-theme="light"] .project-metrics { border-color: rgba(12,18,18,.10); }
html[data-theme="light"] .project-metrics span { background: rgba(255,255,255,.72); color: rgba(20,28,26,.62); }

html[data-theme="light"] .learning { background: #f7f6fc; }
html[data-theme="light"] #learning-field { opacity: .16; mix-blend-mode: multiply; }
html[data-theme="light"] .learning-compact-heading > p { color: rgba(31,27,50,.58); }
html[data-theme="light"] .toolkit-panel { background: #eef9fb; border-color: rgba(38,154,178,.20); }
html[data-theme="light"] .shelf-panel { background: #f7f1fc; border-color: rgba(142,92,193,.20); }
html[data-theme="light"] .learning-panel-head { border-color: rgba(31,27,50,.10); }
html[data-theme="light"] .learning-panel-head h3 { color: #1d1a29; }
html[data-theme="light"] .toolkit-panel .learning-panel-head span { color: #167d91; }
html[data-theme="light"] .shelf-panel .learning-panel-head span { color: #7e4ca5; }
html[data-theme="light"] .compact-resource-link { border-color: rgba(31,27,50,.085); }
html[data-theme="light"] .compact-link-index { color: rgba(31,27,50,.32); }
html[data-theme="light"] .compact-link-copy small { color: rgba(31,27,50,.43); }
html[data-theme="light"] .compact-link-copy strong { color: rgba(31,27,50,.84); }
html[data-theme="light"] .compact-link-copy em { color: rgba(31,27,50,.42); }
html[data-theme="light"] .compact-resource-link > i { color: rgba(31,27,50,.48); }
html[data-theme="light"] .compact-learning-note { border-color: rgba(31,27,50,.12); }
html[data-theme="light"] .compact-learning-note > span,
html[data-theme="light"] .compact-learning-note p { color: rgba(31,27,50,.52); }
html[data-theme="light"] .compact-learning-note a { color: #6e48a0; border-color: rgba(110,72,160,.35); }

html[data-theme="light"] .conferences { background: #f8f8f5; }
html[data-theme="light"] .conferences .split-heading > p { color: rgba(20,28,26,.58); }
html[data-theme="light"] .conference-spotlight { background: linear-gradient(150deg,rgba(79,185,163,.13),rgba(132,110,211,.06)); border-color: rgba(12,18,18,.12); }
html[data-theme="light"] .spotlight-type,
html[data-theme="light"] .conference-spotlight p,
html[data-theme="light"] .conference-list p { color: rgba(20,28,26,.52); }
html[data-theme="light"] .conference-list { border-color: rgba(12,18,18,.12); }
html[data-theme="light"] .conference-list article { border-color: rgba(12,18,18,.12); }
html[data-theme="light"] .conference-list small { color: rgba(20,28,26,.40); }

html[data-theme="light"] .contact { background: #f5f7f5; }
html[data-theme="light"] .contact::before { border-color: rgba(45,119,101,.12); }
html[data-theme="light"] #contact-field { opacity: .16; mix-blend-mode: multiply; }
html[data-theme="light"] .contact .section-index { color: rgba(15,21,21,.42); }
html[data-theme="light"] .contact-inner > p:not(.section-index) { color: rgba(15,21,21,.58); }
html[data-theme="light"] .contact-email { color: #2b6b5d; border-color: rgba(15,21,21,.35); }
html[data-theme="light"] .social-links a { color: rgba(15,21,21,.60); border-color: rgba(15,21,21,.14); }
html[data-theme="light"] .social-links a:hover { background: #d85d52; color: #fff; border-color: #d85d52; }
html[data-theme="light"] footer { background: #f5f7f5; color: rgba(15,21,21,.42); border-color: rgba(15,21,21,.10); }
html[data-theme="light"] .back-to-top { color: rgba(15,21,21,.60); }
html[data-theme="light"] .back-to-top:hover { color: #111; }

@media (max-width: 1120px) {
  .structure-section-inner { grid-template-columns: 1fr; gap: 20px; }
  .structure-section-copy { max-width: 780px; }
  .structure-section-art { margin-top: -10px; }
  .hero-copy-wide .statement { font-size: clamp(4rem,9.6vw,7.6rem); }
}

@media (max-width: 760px) {
  .theme-toggle { padding-right: 5px; }
  .theme-toggle-text { display: none; }
  .theme-toggle-track { width: 48px; }
  .hero-copy-wide .statement { font-size: clamp(3.35rem,16vw,5.25rem); }
  .about-portrait,.about-portrait img { min-height: 440px; }
  .structure-section { padding: 88px 0 74px; }
  .structure-section-inner { gap: 6px; }
  .structure-section-copy h2 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .structure-summary-grid { grid-template-columns: 1fr 1fr; }
  .structure-summary-grid div { min-height: 72px; padding: 14px; }
  .structure-section-art { margin-inline: -10px; }
  .learning { padding: 64px 0 58px; }
  .learning-compact-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .learning-compact-heading h2 { font-size: clamp(2.6rem,12vw,4rem); }
  .learning-compact-grid { grid-template-columns: 1fr; gap: 12px; }
  .compact-link-copy { grid-template-columns: 1fr; gap: 3px; }
  .compact-link-copy em { display: none; }
  .compact-learning-note { grid-template-columns: 1fr; gap: 5px; }
  .footer-inner { flex-wrap: wrap; justify-content: center; padding: 22px 0; text-align: center; }
}

html[data-theme="light"] .hero-facts strong { color: #202625; }
html[data-theme="light"] .hero-facts > div + div { border-color: rgba(12,18,18,.11); }
@media (max-width: 680px) { html[data-theme="light"] .hero-facts > div + div { border-top-color: rgba(12,18,18,.11); } }

/* ========================================================================== 
   Light-theme contrast pass
   The dark theme remains unchanged. These rules redraw text, figures, canvases,
   and animated scientific graphics for a bright background.
   ========================================================================== */
html[data-theme="light"] {
  --light-ink-strong: #14191a;
  --light-ink: #27302f;
  --light-muted: #52605d;
  --light-soft: #6a7774;
  --light-line: rgba(18, 28, 27, .16);
  --light-teal: #167562;
  --light-teal-deep: #0e5f50;
  --light-violet: #6250ad;
  --light-violet-deep: #4b3c91;
  --light-coral: #b94e49;
  --light-amber: #9c6816;
}

/* Global type and fine-detail contrast. */
html[data-theme="light"] body { color: var(--light-ink-strong); }
html[data-theme="light"] .section-index { color: #56635f; }
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .manifesto h2,
html[data-theme="light"] .about h2,
html[data-theme="light"] .program h2,
html[data-theme="light"] .foundations h2,
html[data-theme="light"] .publications h2,
html[data-theme="light"] .learning h2,
html[data-theme="light"] .conferences h2,
html[data-theme="light"] .news h2,
html[data-theme="light"] .contact h2 { color: var(--light-ink-strong); }
html[data-theme="light"] .manifesto h2 em,
html[data-theme="light"] .section-heading h2 em,
html[data-theme="light"] .about h2 em { color: var(--light-teal-deep); }
html[data-theme="light"] .manifesto-grid p,
html[data-theme="light"] .split-heading > p,
html[data-theme="light"] .about-copy > p:not(.lead) { color: var(--light-muted); }
html[data-theme="light"] .manifesto-grid .lead,
html[data-theme="light"] .about-copy .lead { color: #202827; }
html[data-theme="light"] .text-link { color: #173f37; border-color: #173f37; }

/* Canvas-based ambient fields use darker particles in light mode. */
html[data-theme="light"] #field,
html[data-theme="light"] #tree-field,
html[data-theme="light"] #learning-field,
html[data-theme="light"] #contact-field {
  filter: saturate(1.2) contrast(1.16) brightness(.82);
  mix-blend-mode: multiply;
}
html[data-theme="light"] #field { opacity: .60; }
html[data-theme="light"] #tree-field { opacity: .44; }
html[data-theme="light"] #learning-field,
html[data-theme="light"] #contact-field { opacity: .25; }

/* Research ecosystem: stronger nodes, edges, labels, and inspector. */
html[data-theme="light"] .methods-map {
  background:
    radial-gradient(circle at 16% 20%, rgba(36, 144, 125, .15), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(97, 78, 177, .15), transparent 30%),
    radial-gradient(circle at 85% 72%, rgba(194, 66, 92, .08), transparent 29%),
    #f2f1f8;
}
html[data-theme="light"] .methods-heading h2 { color: #181623; }
html[data-theme="light"] .methods-heading h2 em { color: var(--light-violet-deep); }
html[data-theme="light"] .methods-instruction,
html[data-theme="light"] .methods-network-kicker { color: #5b566d; }
html[data-theme="light"] .methods-network-stage {
  border-color: rgba(48, 39, 86, .20);
  background:
    radial-gradient(circle at 50% 45%, rgba(104, 82, 190, .08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,252,.93));
  box-shadow: 0 32px 90px rgba(48, 38, 89, .13), inset 0 0 100px rgba(93, 72, 176, .05);
}
html[data-theme="light"] .methods-network-stage::before { border-color: rgba(43, 34, 80, .10); box-shadow: 0 0 0 90px rgba(69,53,128,.018), 0 0 0 180px rgba(69,53,128,.012); }
html[data-theme="light"] .ecosystem-backdrop circle { stroke: rgba(39, 31, 70, .115); }
html[data-theme="light"] .ecosystem-edge--primary { opacity: .52; stroke-width: 1.45; }
html[data-theme="light"] .ecosystem-edge--member { opacity: .36; stroke-width: 1; }
html[data-theme="light"] .ecosystem-edge--cross { opacity: .18; stroke-width: .8; }
html[data-theme="light"] .ecosystem-edge.is-highlighted { opacity: .96; stroke-width: 2; }
html[data-theme="light"] .ecosystem-edge.is-muted { opacity: .035; }
html[data-theme="light"] .ecosystem-pulse { opacity: 1; filter: drop-shadow(0 0 4px rgba(47,35,99,.38)); }
html[data-theme="light"] .ecosystem-node .node-disc { filter: saturate(1.18) brightness(.86); }
html[data-theme="light"] .ecosystem-node--hub .node-disc { fill-opacity: .22; stroke-width: 1.75; }
html[data-theme="light"] .ecosystem-node--tool .node-disc { fill-opacity: .12; stroke-width: 1.35; }
html[data-theme="light"] .ecosystem-node--tool[data-status="learning"] .node-disc { fill-opacity: .075; }
html[data-theme="light"] .ecosystem-node .node-halo { opacity: .28; }
html[data-theme="light"] .ecosystem-node .node-dot { opacity: 1; }
html[data-theme="light"] .ecosystem-node .node-label { fill: #211e2d; }
html[data-theme="light"] .ecosystem-node .node-substatus { fill: #665f75; }
html[data-theme="light"] .ecosystem-node:hover .node-label,
html[data-theme="light"] .ecosystem-node:focus-visible .node-label,
html[data-theme="light"] .ecosystem-node.is-selected .node-label { fill: #0f0d16; }
html[data-theme="light"] #ecosystem-core-fill stop:nth-child(1) { stop-color: #342c57; stop-opacity: .20; }
html[data-theme="light"] #ecosystem-core-fill stop:nth-child(2) { stop-color: #6f5fc0; stop-opacity: .13; }
html[data-theme="light"] #ecosystem-core-fill stop:nth-child(3) { stop-color: #239b84; stop-opacity: .06; }
html[data-theme="light"] .methods-controls button { color: #4f4861; border-color: rgba(50,40,91,.22); background: rgba(255,255,255,.90); }
html[data-theme="light"] .methods-controls button:hover,
html[data-theme="light"] .methods-controls button[aria-pressed="true"] { color: #211a3b; background: #ece8fa; border-color: rgba(80,59,157,.48); }
html[data-theme="light"] .methods-inspector { background: rgba(255,255,255,.97); border-color: rgba(48,38,87,.20); }
html[data-theme="light"] .methods-inspector small { color: #666073; }
html[data-theme="light"] .methods-inspector h3 { color: #17131f; }
html[data-theme="light"] .methods-inspector p { color: #50505d; }
html[data-theme="light"] .methods-inspector-status { color: #625b70; }

/* Structural-biology chapter: remove the dark vignette and truly switch Mol* to white. */
html[data-theme="light"] .structure-section {
  background:
    radial-gradient(circle at 73% 42%, rgba(35, 137, 119, .14), transparent 29%),
    radial-gradient(circle at 20% 80%, rgba(103, 82, 181, .09), transparent 32%),
    #f3f6f3;
}
html[data-theme="light"] .structure-section-copy h2 { color: #151b1a; }
html[data-theme="light"] .structure-section-copy h2 em { color: var(--light-teal-deep); }
html[data-theme="light"] .structure-lead { color: #4b5956; }
html[data-theme="light"] .structure-summary-grid { border-color: rgba(17,28,26,.17); background: rgba(17,28,26,.17); }
html[data-theme="light"] .structure-summary-grid div { background: rgba(255,255,255,.96); }
html[data-theme="light"] .structure-summary-grid small { color: #68736f; }
html[data-theme="light"] .structure-summary-grid strong { color: #202826; }
html[data-theme="light"] .structure-hint { color: #62706d; }
html[data-theme="light"] .structure-stage-refined::before {
  opacity: .82;
  background:
    radial-gradient(ellipse at 55% 43%, rgba(40, 153, 130, .18), transparent 34%),
    radial-gradient(ellipse at 68% 57%, rgba(89, 76, 174, .13), transparent 49%),
    radial-gradient(ellipse at 39% 71%, rgba(184, 71, 86, .07), transparent 42%);
}
html[data-theme="light"] .structure-stage-refined::after {
  background:
    radial-gradient(ellipse 74% 74% at 53% 46%, transparent 60%, rgba(243,246,243,.18) 78%, rgba(243,246,243,.91) 100%),
    linear-gradient(0deg, rgba(243,246,243,.88), transparent 19%, transparent 85%, rgba(243,246,243,.54));
}
html[data-theme="light"] .ambient-thread { border-color: rgba(23,112,94,.15); }
html[data-theme="light"] .thread-two { border-color: rgba(83,67,160,.13); }
html[data-theme="light"] .ambient-particle { background: #176f5d; box-shadow: 0 0 10px rgba(28,112,93,.45); }
html[data-theme="light"] .structure-stage-refined #molstar-viewer,
html[data-theme="light"] .structure-stage-refined #molstar-viewer .msp-plugin,
html[data-theme="light"] .structure-stage-refined #molstar-viewer .msp-plugin-content,
html[data-theme="light"] .structure-stage-refined #molstar-viewer .msp-layout-standard,
html[data-theme="light"] .structure-stage-refined #molstar-viewer .msp-layout-static,
html[data-theme="light"] .structure-stage-refined #molstar-viewer .msp-viewport,
html[data-theme="light"] .structure-stage-refined #molstar-viewer canvas { background: #f3f6f3 !important; }
html[data-theme="light"] .structure-stage-refined #molstar-viewer canvas { filter: saturate(1.08) contrast(1.08) brightness(.98); }
html[data-theme="light"] .structure-fallback { color: #43514e; }
html[data-theme="light"] .molecular-loader i { background: #247b68; }
html[data-theme="light"] .structure-info-panel { background: rgba(255,255,255,.92); border-color: rgba(18,28,27,.17); box-shadow: 0 16px 46px rgba(27,55,49,.10); }
html[data-theme="light"] .structure-info-panel h3 { color: #141b19; }
html[data-theme="light"] .structure-info-panel p,
html[data-theme="light"] .structure-info-details { color: #5a6663; }
html[data-theme="light"] .structure-info-kicker { color: var(--light-teal-deep); }
html[data-theme="light"] .structure-info-details a { color: #8f403b; }

/* Section 03 / phylodynamics: high-contrast tree, controls, timeline and labels. */
html[data-theme="light"] .nextstrain-section {
  color: #1a1728;
  background:
    radial-gradient(ellipse at 72% 38%, rgba(101, 81, 184, .15), transparent 44%),
    radial-gradient(ellipse at 24% 63%, rgba(81, 63, 155, .08), transparent 46%),
    linear-gradient(180deg, #f1eff9 0%, #f8f7fc 52%, #f3f1fa 100%);
}
html[data-theme="light"] .nextstrain-copy { color: #1c182b; }
html[data-theme="light"] .nextstrain-copy .section-index { color: #645d75; }
html[data-theme="light"] .nextstrain-copy > p:not(.section-index) { color: #514b61; }
html[data-theme="light"] .nextstrain-copy h2 { color: #171421; }
html[data-theme="light"] .nextstrain-copy h2 em { color: var(--light-violet-deep); }
html[data-theme="light"] .tree-actions > span,
html[data-theme="light"] .tree-key { color: #625c70; }
html[data-theme="light"] .tree-key i { background: linear-gradient(90deg, #5542a8, #ae3f78, #a96c13); }
html[data-theme="light"] .evolution-section .tree-actions .button-primary { color: #fff; background: linear-gradient(135deg,#6b58bc,#56439f); border-color: #56439f; box-shadow: 0 12px 36px rgba(71,52,145,.18); }
html[data-theme="light"] .evolution-section .tree-actions .button-primary:hover { color: #fff; background: linear-gradient(135deg,#5e4ba9,#47358c); }
html[data-theme="light"] .evolution-viewport {
  background:
    radial-gradient(circle at 55% 48%, rgba(91, 72, 169, .09), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,242,251,.74));
  border: 1px solid rgba(55,45,97,.12);
}
html[data-theme="light"] .evolution-player .evolution-tree-art {
  opacity: 1;
  filter: saturate(1.42) contrast(1.58) brightness(.64) drop-shadow(0 5px 9px rgba(48,37,91,.12));
}
html[data-theme="light"] .evolution-player.is-complete .evolution-tree-art { opacity: .94; }
html[data-theme="light"] .evolution-vignette {
  background:
    radial-gradient(ellipse 88% 86% at 52% 49%, transparent 69%, rgba(244,242,251,.20) 86%, rgba(244,242,251,.82) 100%),
    linear-gradient(180deg, rgba(244,242,251,.44), transparent 11%, transparent 89%, rgba(244,242,251,.62));
}
html[data-theme="light"] .evolution-sweep { background: linear-gradient(0deg,transparent,rgba(82,62,166,.74),transparent); box-shadow: 0 0 17px rgba(82,62,166,.46); }
html[data-theme="light"] .evolution-year small { color: #6a6377; }
html[data-theme="light"] .evolution-year strong { color: #29203d; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
html[data-theme="light"] .evolution-live-link { color: #4d3c92; }
html[data-theme="light"] .evolution-live-link:hover { color: #2f2462; }
html[data-theme="light"] .evolution-play { color: #2c2340; border-color: rgba(65,49,130,.34); background: rgba(255,255,255,.90); box-shadow: 0 10px 30px rgba(53,41,103,.10); }
html[data-theme="light"] .evolution-play:hover { color: #171120; background: #fff; border-color: rgba(65,49,130,.58); }
html[data-theme="light"] .evolution-play-icon { border-left-color: #5844a8; }
html[data-theme="light"] .evolution-player.is-playing .evolution-play-icon { border-left-color: #5844a8; border-right-color: #5844a8; }
html[data-theme="light"] .evolution-track { background: rgba(50,39,91,.22); }
html[data-theme="light"] .evolution-track > span { background: linear-gradient(90deg,#5945aa,#a9477f,#a66d18); box-shadow: 0 0 9px rgba(78,59,157,.28); }
html[data-theme="light"] .evolution-track > i { background: #4d3b98; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(58,43,112,.28),0 0 10px rgba(77,59,152,.32); }
html[data-theme="light"] .evolution-years { color: #625b70; }
html[data-theme="light"] .nextstrain-statline { border-color: rgba(55,45,97,.18); background: rgba(255,255,255,.42); }
html[data-theme="light"] .nextstrain-statline div { border-color: rgba(55,45,97,.13); }
html[data-theme="light"] .nextstrain-statline strong { color: #252035; }
html[data-theme="light"] .nextstrain-statline span { color: #665f73; }

/* Research overview. */
html[data-theme="light"] .spectrum-card { background: #fff; }
html[data-theme="light"] .spectrum-card::after { color: #6e7774; }
html[data-theme="light"] .spectrum-card h3 { color: #1c2422; }
html[data-theme="light"] .spectrum-card p { color: #596561; }
html[data-theme="light"] .spectrum-icon { color: var(--light-teal); }
html[data-theme="light"] .tags span { color: #5e6b67; border-color: rgba(17,28,26,.15); }

/* Aim 1, Aim 2, and future Aim 3: redraw every generated SVG for white. */
html[data-theme="light"] .program { color: #151c1a; background: linear-gradient(180deg,#f4f8f5,#fbfcfb); }
html[data-theme="light"] .program .light-heading .section-index { color: #596661; }
html[data-theme="light"] .program .light-heading h2 { color: #151b19; }
html[data-theme="light"] .program .light-heading h2 em { color: var(--light-teal-deep); }
html[data-theme="light"] .program-item { border-color: rgba(18,28,27,.17); }
html[data-theme="light"] .program-number { color: var(--light-teal-deep); }
html[data-theme="light"] .program-label { color: #64716d; }
html[data-theme="light"] .program-copy h3 { color: #171d1b; }
html[data-theme="light"] .program-copy .project-question { color: #215e51; }
html[data-theme="light"] .program-copy .project-summary { color: #4e5c58; }
html[data-theme="light"] .program-copy li { color: #54615d; border-color: rgba(18,28,27,.17); background: rgba(255,255,255,.64); }
html[data-theme="light"] .project-metrics { background: rgba(18,28,27,.15); border-color: rgba(18,28,27,.15); }
html[data-theme="light"] .project-metrics span { color: #4a5753; background: #fff; }
html[data-theme="light"] .program-visual {
  border-color: rgba(21,34,31,.16);
  background:
    radial-gradient(circle at 52% 48%, rgba(32,128,109,.09), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,245,.96));
  box-shadow: inset 0 0 70px rgba(25,98,84,.035);
}
html[data-theme="light"] .program-visual::before { border-color: rgba(23,37,34,.095); }
html[data-theme="light"] .program-visual text { fill: #4d5956; }
html[data-theme="light"] .program-visual path { stroke: #287b69; }
html[data-theme="light"] .atlas-tree path { stroke: #187461; }
html[data-theme="light"] .atlas-flow path { stroke: #5a50a1; }
html[data-theme="light"] .phenotype-rings { stroke: rgba(28,111,94,.47); }
html[data-theme="light"] .atlas-nodes circle { fill: #0f6654; filter: drop-shadow(0 0 5px rgba(20,102,84,.27)); }
html[data-theme="light"] .visual-label { fill: #4d5956 !important; }
html[data-theme="light"] .globe-lines { stroke: rgba(43,53,50,.34); }
html[data-theme="light"] .global-arcs { stroke: #5b50a4; }
html[data-theme="light"] .global-nodes circle { fill: #176f5d; stroke: rgba(23,111,93,.27); }
html[data-theme="light"] .global-timeline path { stroke: rgba(38,48,45,.42); }
html[data-theme="light"] .global-timeline circle { fill: #9a681a; }
html[data-theme="light"] .project-orbit { border-color: rgba(89,75,161,.18); }
html[data-theme="light"] .input-stream rect,
html[data-theme="light"] .model-output rect { fill: rgba(83,69,151,.06); stroke: rgba(83,69,151,.48); }
html[data-theme="light"] .input-stream text,
html[data-theme="light"] .model-output text { fill: #49405f; }
html[data-theme="light"] .model-edges { stroke: rgba(31,112,94,.52); }
html[data-theme="light"] .model-nodes circle { fill: #fff; stroke: #a33e66; filter: drop-shadow(0 0 5px rgba(157,54,96,.18)); }
html[data-theme="light"] .model-output path { stroke: #5b4da8; }
html[data-theme="light"] .attention-rings { stroke: rgba(91,77,168,.38); }
html[data-theme="light"] .model-pulse { background: radial-gradient(circle,rgba(163,62,102,.11),transparent 68%); }

/* Earlier platforms and their motion graphics. */
html[data-theme="light"] .foundations { background: #f2f1ec; }
html[data-theme="light"] .foundation-grid { background: rgba(18,28,27,.15); border-color: rgba(18,28,27,.15); }
html[data-theme="light"] .foundation-card { background: #f7f6f1; }
html[data-theme="light"] .foundation-card h3 { color: #1b2321; }
html[data-theme="light"] .foundation-card > p { color: #596560; }
html[data-theme="light"] .foundation-top > span { color: var(--light-teal-deep); }
html[data-theme="light"] .foundation-top small { color: #68736f; }
html[data-theme="light"] .foundation-visual { border-color: rgba(18,28,27,.14); background: radial-gradient(circle at center,rgba(28,114,96,.07),transparent 64%); }
html[data-theme="light"] .foundation-tags span { color: #5c6864; border-color: rgba(18,28,27,.14); }
html[data-theme="light"] .consensus-lines { color: rgba(20,94,76,.72); }
html[data-theme="light"] .consensus-lines strong { color: #145f4f; border-color: rgba(20,95,79,.28); }
html[data-theme="light"] .proline-helix i { border-color: #176c59; }
html[data-theme="light"] .scan-sequence { color: #596560; border-color: rgba(18,28,27,.16); }
html[data-theme="light"] .scan-sequence span.p { color: #9b3f4a; }
html[data-theme="light"] .virus-orbit { border-color: rgba(22,108,89,.42); }
html[data-theme="light"] .virus-core { background: #176c59; color: #fff; }
html[data-theme="light"] .virus-orbit b { color: #355f55; }

/* Publications, conferences, news, learning and contact. */
html[data-theme="light"] .publication-tabs button { color: #56615e; border-color: rgba(18,28,27,.17); }
html[data-theme="light"] .publication-tabs button.active,
html[data-theme="light"] .publication-tabs button:hover { color: #fff; background: #1d2926; }
html[data-theme="light"] .publication-row { border-color: rgba(18,28,27,.16); }
html[data-theme="light"] .pub-year { color: #5b6763; }
html[data-theme="light"] .pub-status { color: var(--light-teal-deep); }
html[data-theme="light"] .pub-main h3 { color: #1b2321; }
html[data-theme="light"] .pub-authors { color: #5b6663; }
html[data-theme="light"] .pub-venue { color: #44504c; }

html[data-theme="light"] .learning { background: linear-gradient(180deg,#f5f3fb,#faf9fd); }
html[data-theme="light"] .learning-compact-heading h2 { color: #191622; }
html[data-theme="light"] .learning-compact-heading h2 em { color: var(--light-violet-deep); }
html[data-theme="light"] .learning-compact-heading > p { color: #575163; }
html[data-theme="light"] .toolkit-panel { background: #e8f6f8; border-color: rgba(24,126,146,.27); }
html[data-theme="light"] .shelf-panel { background: #f3ebf9; border-color: rgba(121,70,165,.27); }
html[data-theme="light"] .learning-panel-head h3 { color: #1c1925; }
html[data-theme="light"] .toolkit-panel .learning-panel-head span { color: #086d80; }
html[data-theme="light"] .shelf-panel .learning-panel-head span { color: #704091; }
html[data-theme="light"] .compact-resource-link { border-color: rgba(31,27,50,.13); }
html[data-theme="light"] .compact-link-index { color: #6c6675; }
html[data-theme="light"] .compact-link-copy small { color: #696272; }
html[data-theme="light"] .compact-link-copy strong { color: #22202a; }
html[data-theme="light"] .compact-link-copy em { color: #635d6b; }
html[data-theme="light"] .compact-resource-link > i { color: #554d65; }
html[data-theme="light"] .compact-resource-link:hover { background: rgba(255,255,255,.70); }
html[data-theme="light"] .compact-learning-note > span,
html[data-theme="light"] .compact-learning-note p { color: #5b5564; }

html[data-theme="light"] .conferences { background: #f5f6f3; }
html[data-theme="light"] .conferences .light-heading .section-index { color: #5d6864; }
html[data-theme="light"] .conferences .light-heading h2 { color: #161d1b; }
html[data-theme="light"] .conferences .light-heading h2 em { color: var(--light-violet-deep); }
html[data-theme="light"] .conference-spotlight { background: linear-gradient(150deg,rgba(43,144,124,.14),rgba(100,80,178,.08)); border-color: rgba(18,28,27,.16); }
html[data-theme="light"] .spotlight-year,
html[data-theme="light"] .conference-list span { color: var(--light-teal-deep); }
html[data-theme="light"] .spotlight-type { color: #69736f; }
html[data-theme="light"] .conference-spotlight h3,
html[data-theme="light"] .conference-list h3 { color: #18201e; }
html[data-theme="light"] .conference-spotlight p,
html[data-theme="light"] .conference-list p { color: #56625e; }
html[data-theme="light"] .conference-list small { color: #6c7672; }

html[data-theme="light"] .news-card { background: #fff; }
html[data-theme="light"] .news-meta { color: #66716d; }
html[data-theme="light"] .news-card h3 { color: #1b2321; }
html[data-theme="light"] .news-arrow { color: var(--light-teal-deep); }
html[data-theme="light"] .news-card:hover h3 { color: #fff; }

html[data-theme="light"] .contact { background: #f1f5f2; }
html[data-theme="light"] .contact h2 { color: #141b19; }
html[data-theme="light"] .contact h2 em { color: var(--light-teal-deep); }
html[data-theme="light"] .contact-inner > p:not(.section-index) { color: #53605c; }
html[data-theme="light"] .contact-email { color: #145e4f; border-color: rgba(20,94,79,.44); }
html[data-theme="light"] .social-links a { color: #56635f; border-color: rgba(18,28,27,.17); background: rgba(255,255,255,.52); }
html[data-theme="light"] footer { color: #64706c; }
html[data-theme="light"] .back-to-top { color: #4d5a56; }

@media (max-width: 760px) {
  html[data-theme="light"] .methods-network-stage { box-shadow: 0 20px 55px rgba(48,38,89,.11); }
  html[data-theme="light"] .ecosystem-node--hub .node-disc { fill-opacity: .25; }
  html[data-theme="light"] .ecosystem-node--tool .node-disc { fill-opacity: .15; }
  html[data-theme="light"] .evolution-player .evolution-tree-art { filter: saturate(1.46) contrast(1.62) brightness(.60) drop-shadow(0 4px 7px rgba(48,37,91,.12)); }
  html[data-theme="light"] .program-visual { min-height: 285px; }
}


/* =========================================================
   FINAL 2026 SCIENTIFIC STORY UPDATE
   ========================================================= */

/* Scientific vision replaces the repetitive domain-card section. */
.scientific-vision {
  position: relative;
  padding: 145px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(121,233,205,.13), transparent 31%),
    radial-gradient(circle at 12% 82%, rgba(151,139,255,.11), transparent 29%),
    #07100e;
  color: #fff;
}
#vision-field { position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.scientific-vision-inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); gap:80px; align-items:center; }
.vision-copy h2 { margin:18px 0 30px; font:500 clamp(3.2rem,6vw,7rem)/.91 var(--serif); letter-spacing:-.055em; }
.vision-copy h2 em { color:var(--mint-soft); }
.vision-copy p { max-width:650px; color:rgba(255,255,255,.52); font-size:.92rem; line-height:1.85; }
.vision-copy .vision-lead { color:#fff; font:500 clamp(1.2rem,1.75vw,1.65rem)/1.48 var(--serif); }
.vision-flow { position:relative; min-height:520px; display:grid; grid-template-columns:1fr 56px 1fr; grid-template-rows:1fr 56px 1fr; gap:0; align-items:center; }
.vision-stage { position:relative; min-height:166px; padding:25px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(6,18,15,.74); backdrop-filter:blur(14px); transition:transform .35s, border-color .35s, background .35s; }
.vision-stage::before { content:""; position:absolute; width:140px; height:140px; right:-55px; top:-55px; border:1px solid rgba(121,233,205,.22); border-radius:50%; box-shadow:0 0 0 26px rgba(121,233,205,.025),0 0 0 52px rgba(121,233,205,.016); animation:visionOrbit 9s linear infinite; }
.vision-stage:hover { transform:translateY(-6px); border-color:rgba(121,233,205,.38); background:rgba(10,29,24,.9); }
.vision-stage small { position:absolute; top:18px; left:20px; color:var(--mint); font:500 .55rem/1 var(--mono); letter-spacing:.14em; }
.vision-stage strong { color:#fff; font:500 1.25rem/1.12 var(--serif); }
.vision-stage span { margin-top:8px; color:rgba(255,255,255,.42); font:500 .57rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.stage-genetic { grid-column:1; grid-row:1; }
.stage-structural { grid-column:3; grid-row:1; }
.stage-functional { grid-column:1; grid-row:3; }
.stage-risk { grid-column:3; grid-row:3; }
.vision-connector { position:relative; align-self:stretch; justify-self:stretch; display:grid; place-items:center; }
.vision-connector:nth-of-type(2) { grid-column:2; grid-row:1; }
.vision-connector:nth-of-type(4) { grid-column:3; grid-row:2; transform:rotate(90deg); }
.vision-connector:nth-of-type(6) { grid-column:2; grid-row:3; transform:rotate(180deg); }
.vision-connector i { width:100%; height:1px; background:linear-gradient(90deg,rgba(121,233,205,.08),rgba(121,233,205,.65),rgba(121,233,205,.08)); }
.vision-connector b { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 18px rgba(121,233,205,.9); animation:visionTravel 2.8s ease-in-out infinite; }
.vision-signal { position:absolute; inset:42% 42% auto auto; width:76px; height:76px; transform:translate(50%,-50%); }
.vision-signal span { position:absolute; inset:50%; width:8px; height:8px; margin:-4px; border:1px solid rgba(121,233,205,.6); border-radius:50%; animation:visionSignal 3.2s ease-out infinite; }
.vision-signal span:nth-child(2){animation-delay:-.8s}.vision-signal span:nth-child(3){animation-delay:-1.6s}.vision-signal span:nth-child(4){animation-delay:-2.4s}
@keyframes visionOrbit { to { transform:rotate(360deg); } }
@keyframes visionTravel { 0%,100%{transform:translateX(-19px);opacity:.25}50%{transform:translateX(19px);opacity:1} }
@keyframes visionSignal { from{transform:scale(.3);opacity:.9}to{transform:scale(9);opacity:0} }

/* Structure source attribution. */
.structure-citation { margin:22px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.46); font-size:.68rem; line-height:1.65; }
.structure-citation span { margin-right:8px; color:var(--mint); font:500 .53rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.structure-citation a { margin-left:10px; color:var(--mint-soft); border-bottom:1px solid rgba(197,255,241,.35); }

/* Current program hierarchy. */
.program .section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.45fr); gap:44px; align-items:end; }
.program-intro { margin:0 0 6px; max-width:430px; color:rgba(255,255,255,.46); font-size:.8rem; line-height:1.7; }
.project-status { margin:22px 0 0; display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(121,233,205,.17); background:rgba(121,233,205,.045); color:var(--mint-soft); font:500 .58rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.project-status i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px rgba(121,233,205,.8); animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 50%{opacity:.35;transform:scale(.75)} }

/* Richer Aim 1, Aim 2 and future-direction diagrams. */
.atlas-sequence-stream { position:absolute; left:18px; top:18px; display:flex; gap:4px; z-index:3; }
.atlas-sequence-stream i { width:20px; height:5px; background:rgba(121,233,205,.35); animation:sequencePacket 2.8s ease-in-out infinite; }
.atlas-sequence-stream i:nth-child(2){animation-delay:-.4s}.atlas-sequence-stream i:nth-child(3){animation-delay:-.8s}.atlas-sequence-stream i:nth-child(4){animation-delay:-1.2s}.atlas-sequence-stream i:nth-child(5){animation-delay:-1.6s}.atlas-sequence-stream i:nth-child(6){animation-delay:-2s}
@keyframes sequencePacket { 50%{transform:translateX(12px);background:var(--mint)} }
.atlas-host-labels text,.ssf-labels text,.global-hosts text,.global-phenotypes text,.encoder-column text,.latent-flow text { fill:rgba(255,255,255,.38); font:500 7px var(--mono); letter-spacing:.7px; }
.structure-glyph path { fill:none; stroke:rgba(121,233,205,.45); stroke-width:1.2; animation:glyphBreathe 4s ease-in-out infinite; }
.structure-glyph circle { fill:rgba(121,233,205,.15); stroke:var(--mint); stroke-width:1; }
.ssf-labels path,.global-hosts path { fill:none; stroke:rgba(121,233,205,.35); stroke-width:1; }
@keyframes glyphBreathe { 50%{transform:translateY(3px);opacity:.55} }
.global-hosts,.global-phenotypes { animation:globalLayer 5.5s ease-in-out infinite; }
.global-phenotypes { animation-delay:-2.4s; }
.global-phenotypes circle { fill:rgba(121,233,205,.18); stroke:var(--mint); stroke-width:1; }
.global-phenotypes path { fill:none; stroke:rgba(121,233,205,.4); stroke-width:1; }
@keyframes globalLayer { 50%{transform:translateY(-5px);opacity:.62} }
.encoder-column rect { fill:rgba(151,139,255,.08); stroke:rgba(169,156,255,.45); }
.model-edges path { stroke-dasharray:4 6; animation:modelFlow 3.5s linear infinite; }
.latent-flow circle,.latent-flow path { fill:none; stroke:rgba(255,113,140,.55); stroke-width:1; transform-origin:322px 130px; }
.latent-flow circle:first-child { animation:latentSpin 8s linear infinite; }
.latent-flow circle:nth-child(2) { animation:latentSpin 12s linear reverse infinite; }
.latent-flow path { animation:latentPulse 4s ease-in-out infinite; }
.fusion-graph circle { fill:rgba(121,233,205,.14); stroke:var(--mint); }
.fusion-graph path { fill:none; stroke:rgba(121,233,205,.4); stroke-dasharray:3 4; }
.flow-particle { position:absolute; z-index:4; width:7px; height:7px; border-radius:50%; background:#ff718c; box-shadow:0 0 17px rgba(255,113,140,.9); animation:flowParticle 4.8s ease-in-out infinite; }
.fp-one{left:29%;top:28%}.fp-two{left:47%;top:50%;animation-delay:-1.6s}.fp-three{left:69%;top:38%;animation-delay:-3.2s}
@keyframes latentSpin { to{transform:rotate(360deg)} }
@keyframes latentPulse { 50%{transform:scale(.88);opacity:.45} }
@keyframes flowParticle { 0%,100%{transform:translate(-18px,18px);opacity:.15}50%{transform:translate(34px,-22px);opacity:1} }

/* More vibrant Rosetta design animation. */
.rosetta-design-stage { position:absolute; inset:16px 18px 48px; overflow:hidden; }
.rosetta-helix { position:absolute; left:18px; top:22px; width:145px; height:105px; display:flex; align-items:center; filter:drop-shadow(0 0 12px rgba(121,233,205,.18)); }
.rosetta-helix i { width:34px; height:92px; margin-left:-8px; border-left:2px solid #277b65; border-right:1px solid #6ee7d0; border-radius:50%; transform:rotate(31deg); animation:rosettaHelix 3.4s ease-in-out infinite; }
.rosetta-helix i:nth-child(2n){animation-delay:-1.7s}
.rosetta-scan-beam { position:absolute; left:0; top:15px; width:2px; height:125px; background:linear-gradient(transparent,#ff9d66,transparent); box-shadow:0 0 18px rgba(255,157,102,.75); animation:scanBeam 4.1s ease-in-out infinite; }
.rosetta-energy { position:absolute; right:18px; bottom:22px; width:122px; height:100px; display:flex; align-items:flex-end; gap:8px; border-left:1px solid rgba(10,16,16,.16); border-bottom:1px solid rgba(10,16,16,.16); padding:0 0 0 10px; }
.rosetta-energy span { width:13px; height:var(--h); background:rgba(39,121,100,.22); border:1px solid rgba(39,121,100,.38); animation:energyBars 3s ease-in-out infinite; }
.rosetta-energy span:nth-child(2){animation-delay:-.5s}.rosetta-energy span:nth-child(3){animation-delay:-1s}.rosetta-energy span:nth-child(4){animation-delay:-1.5s}.rosetta-energy span:nth-child(5){animation-delay:-2s}
.rosetta-energy .best { background:rgba(255,157,102,.35); border-color:#ff9d66; box-shadow:0 0 14px rgba(255,157,102,.35); }
.rosetta-score { position:absolute; right:14px; top:13px; text-align:right; }
.rosetta-score small { display:block; color:#77827e; font:500 .5rem/1 var(--mono); }
.rosetta-score strong { display:block; margin-top:7px; color:#287b65; font:500 .58rem/1 var(--mono); letter-spacing:.08em; }
.foundation-card:hover .rosetta-score strong { color:var(--mint); }
.foundation-card:hover .rosetta-energy { border-color:rgba(255,255,255,.15); }
@keyframes rosettaHelix { 50%{transform:rotate(31deg) scaleY(.83);opacity:.62} }
@keyframes scanBeam { 0%,100%{transform:translateX(4px);opacity:.2}50%{transform:translateX(148px);opacity:1} }
@keyframes energyBars { 50%{transform:scaleY(.72);filter:saturate(1.6)} }

/* Light-theme refinements for the new sections. */
html[data-theme="light"] .scientific-vision { color:#151c1a; background:radial-gradient(circle at 82% 24%,rgba(36,119,97,.1),transparent 31%),radial-gradient(circle at 12% 82%,rgba(133,111,213,.08),transparent 29%),#f6f8f5; }
html[data-theme="light"] .vision-copy .vision-lead { color:#1a2522; }
html[data-theme="light"] .vision-copy p { color:#53615d; }
html[data-theme="light"] .vision-copy h2 { color:#17201e; }
html[data-theme="light"] .vision-copy h2 em { color:#236e5c; }
html[data-theme="light"] .vision-stage { border-color:rgba(18,28,27,.13); background:rgba(255,255,255,.82); }
html[data-theme="light"] .vision-stage strong { color:#18211f; }
html[data-theme="light"] .vision-stage span { color:#62706b; }
html[data-theme="light"] .structure-citation { border-color:rgba(18,28,27,.13); color:#64706c; }
html[data-theme="light"] .structure-citation span,html[data-theme="light"] .structure-citation a { color:#226c5a; }
html[data-theme="light"] .program-intro { color:#54615d; }
html[data-theme="light"] .project-status { color:#215f51; border-color:rgba(30,111,92,.2); background:rgba(30,111,92,.055); }
html[data-theme="light"] .atlas-host-labels text,html[data-theme="light"] .ssf-labels text,html[data-theme="light"] .global-hosts text,html[data-theme="light"] .global-phenotypes text,html[data-theme="light"] .encoder-column text,html[data-theme="light"] .latent-flow text { fill:#50615c; }

@media (max-width: 1040px) {
  .scientific-vision-inner { grid-template-columns:1fr; gap:52px; }
  .vision-flow { min-height:460px; max-width:760px; }
  .program .section-heading { grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 680px) {
  .scientific-vision { padding:105px 0; }
  .vision-copy h2 { font-size:clamp(2.9rem,14vw,4.8rem); }
  .vision-flow { min-height:auto; display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:12px; }
  .vision-stage,.stage-genetic,.stage-structural,.stage-functional,.stage-risk { grid-column:1; grid-row:auto; min-height:132px; }
  .vision-connector { display:none; }
  .vision-signal { right:26px; top:50%; }
  .structure-citation a { display:inline-block; margin:8px 10px 0 0; }
  .program-intro { max-width:none; }
}

/* ========================================================================== 
   Final responsive and visual polish
   ========================================================================== */
:root {
  --v3-teal: #1f7667;
  --v3-violet: #6658aa;
  --v3-coral: #c86758;
  --v3-gold: #ba842e;
  --v3-slate: #30403c;
}

/* Refined interface icons replace oversized text glyphs on small screens. */
.ui-icon { width: 17px; height: 17px; flex: 0 0 auto; overflow: visible; }
.ui-icon path { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon-play path { fill: currentColor; stroke: none; }
.link-icon, .button-icon { display: inline-grid; place-items: center; line-height: 0; }
.button-icon { width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; opacity: .72; }
.button-icon .ui-icon { width: 14px; height: 14px; }
.text-link .link-icon, .profile-link .link-icon, .contact-email .link-icon { transition: transform .22s ease; }
.text-link:hover .link-icon, .profile-link:hover .link-icon, .contact-email:hover .link-icon { transform: translate(2px,-2px); }
.structure-citation .ui-icon, .evolution-live-link .ui-icon, .publication-toolbar .ui-icon, .compact-learning-note .ui-icon { display: inline-block; width: 13px; height: 13px; margin-left: 3px; vertical-align: -2px; }
.compact-link-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; opacity: .72; }
.compact-link-icon .ui-icon { width: 14px; height: 14px; }
.pub-arrow, .news-arrow { border-radius: 50%; }
.pub-arrow .ui-icon, .news-arrow .ui-icon { width: 15px; height: 15px; }
.news-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.back-to-top { display: inline-flex; align-items: center; gap: 8px; }
.back-to-top .ui-icon { width: 14px; height: 14px; }

/* New Aim 2, global H5 evolutionary architecture. */
.visual-global, .visual-learning { isolation: isolate; }
.visual-global svg, .visual-learning svg { width: 100%; height: 100%; }
.global-aurora, .future-halo { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .24; pointer-events: none; }
.global-aurora.aurora-one { width: 210px; height: 210px; left: 23%; top: 14%; background: rgba(42,157,143,.26); animation: v3Aura 8s ease-in-out infinite; }
.global-aurora.aurora-two { width: 190px; height: 190px; right: 8%; bottom: 9%; background: rgba(200,103,88,.18); animation: v3Aura 10s ease-in-out infinite reverse; }
.global-panel > rect { fill: rgba(255,255,255,.028); stroke: rgba(255,255,255,.10); stroke-width: 1; }
.global-panel .panel-kicker, .future-output .panel-kicker { fill: rgba(255,255,255,.55); font: 500 8px var(--mono); letter-spacing: 1.05px; }
.global-tree-trunk { fill: none; stroke: url(#globalTreeGrad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 7; animation: v3Trace 11s linear infinite; }
.global-tree-events circle { fill: #d9f5ee; stroke: rgba(42,157,143,.74); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: v3NodePulse 3.2s ease-in-out infinite; }
.global-tree-events circle:nth-child(2n) { animation-delay: -1.45s; }
.axis-text, .host-label, .global-phase-track text, .future-output text, .future-input text, .future-flow-core text { fill: rgba(255,255,255,.47); font: 500 7px var(--mono); letter-spacing: .65px; }
.global-map-ring, .global-map-grid { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.global-map-ring { stroke: rgba(82,113,196,.38); }
.global-route path { fill: none; stroke: rgba(42,157,143,.78); stroke-width: 1.8; stroke-dasharray: 7 6; animation: v3Trace 8.5s linear infinite; }
.global-route path:nth-child(2n) { stroke: rgba(200,103,88,.70); animation-direction: reverse; }
.global-host-nodes circle { fill: #f4f8f7; stroke: rgba(102,88,170,.72); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: v3NodePulse 3.8s ease-in-out infinite; }
.global-route-particle, .future-particle { fill: #f3c36a; filter: drop-shadow(0 0 6px rgba(243,195,106,.72)); }
.global-route-particle.particle-delay, .future-particle.p2 { fill: #7ed1be; }
.phenotype-matrix rect { stroke: rgba(255,255,255,.10); stroke-width: 1; animation: v3Matrix 4.8s ease-in-out infinite; }
.phenotype-matrix rect:nth-child(4n+1) { fill: rgba(42,157,143,.46); }
.phenotype-matrix rect:nth-child(4n+2) { fill: rgba(82,113,196,.42); animation-delay: -.8s; }
.phenotype-matrix rect:nth-child(4n+3) { fill: rgba(210,138,82,.44); animation-delay: -1.6s; }
.phenotype-matrix rect:nth-child(4n+4) { fill: rgba(189,94,100,.40); animation-delay: -2.4s; }
.phenotype-links path, .phenotype-output path { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 1; }
.phenotype-output circle { fill: rgba(255,255,255,.07); stroke: rgba(126,209,190,.72); stroke-width: 1.5; animation: v3NodePulse 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.phenotype-output circle:nth-child(2) { stroke: rgba(210,138,82,.82); animation-delay: -1.4s; }
.phenotype-output circle:nth-child(3) { stroke: rgba(102,88,170,.82); animation-delay: -2.5s; }
.global-phase-track > rect:first-of-type { fill: rgba(255,255,255,.08); }
.global-phase-progress { fill: url(#phaseGrad); transform-origin: 142px 314px; animation: v3Phase 6.5s ease-in-out infinite; }
.phase-marks circle { fill: #fff; stroke: rgba(0,0,0,.20); stroke-width: 1; }

/* New future structure-informed model. */
.future-halo.halo-a { width: 225px; height: 225px; left: 39%; top: 16%; background: rgba(102,88,170,.25); animation: v3Aura 9s ease-in-out infinite; }
.future-halo.halo-b { width: 170px; height: 170px; right: 3%; bottom: 10%; background: rgba(42,157,143,.21); animation: v3Aura 11s ease-in-out infinite reverse; }
.future-input > rect, .future-output > rect { fill: rgba(255,255,255,.028); stroke: rgba(255,255,255,.11); stroke-width: 1; }
.future-input text { fill: rgba(255,255,255,.56); }
.sequence-tokens rect { stroke: none; }
.sequence-tokens rect:nth-child(1), .sequence-tokens rect:nth-child(5) { fill: rgba(42,157,143,.75); }
.sequence-tokens rect:nth-child(2) { fill: rgba(82,113,196,.72); }
.sequence-tokens rect:nth-child(3) { fill: rgba(210,138,82,.75); }
.sequence-tokens rect:nth-child(4) { fill: rgba(189,94,100,.72); }
.mini-tree, .mini-protein, .input-ecology path { fill: none; stroke: rgba(126,209,190,.75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; animation: v3Trace 7s linear infinite; }
.mini-protein { stroke: rgba(200,103,88,.80); stroke-width: 2.4; }
.input-structure circle, .input-ecology circle { fill: rgba(255,255,255,.10); stroke: rgba(102,88,170,.82); stroke-width: 1.4; }
.input-ecology circle:nth-of-type(2) { stroke: rgba(210,138,82,.86); }
.future-streams path, .future-output > path { fill: none; stroke: rgba(126,209,190,.38); stroke-width: 1.3; stroke-dasharray: 5 6; animation: v3Trace 8s linear infinite; }
.future-flow-core > circle { fill: url(#futureCoreGrad); stroke: rgba(255,255,255,.10); stroke-width: 1; transform-origin: 326px 177px; }
.future-flow-core > circle:nth-child(1) { animation: v3Orbit 18s linear infinite; stroke-dasharray: 5 8; }
.future-flow-core > circle:nth-child(2) { animation: v3Orbit 13s linear infinite reverse; stroke: rgba(102,88,170,.48); stroke-dasharray: 3 6; }
.future-flow-core > circle:nth-child(3) { stroke: rgba(42,157,143,.60); animation: v3CorePulse 4s ease-in-out infinite; }
.flow-vectors path { fill: none; stroke: url(#futureFlowGrad); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-origin: 326px 177px; animation: v3Orbit 9s linear infinite; }
.future-flow-core text { fill: rgba(255,255,255,.65); text-anchor: middle; font-size: 7.2px; }
.output-trajectory path { fill: none; stroke: url(#futureFlowGrad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 5; animation: v3Trace 6s linear infinite; }
.output-trajectory circle { fill: #f5f8f7; stroke: rgba(102,88,170,.82); stroke-width: 2; animation: v3NodePulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.output-bars rect { fill: rgba(42,157,143,.28); stroke: rgba(42,157,143,.58); stroke-width: 1; transform-origin: left; animation: v3Bar 4s ease-in-out infinite; }
.output-bars rect:nth-child(2) { fill: rgba(210,138,82,.25); stroke: rgba(210,138,82,.63); animation-delay: -.9s; }
.output-bars rect:nth-child(3) { fill: rgba(102,88,170,.25); stroke: rgba(102,88,170,.60); animation-delay: -1.8s; }
.risk-dial circle { fill: rgba(255,255,255,.03); stroke: rgba(200,103,88,.62); stroke-width: 1.5; }
.risk-dial path { stroke: rgba(243,195,106,.88); stroke-width: 2; stroke-linecap: round; transform-origin: 529px 268px; animation: v3Needle 4.5s ease-in-out infinite; }
.risk-dial circle:last-of-type { fill: #f3c36a; stroke: none; }

/* More expressive earlier-platform graphics, without the feel of a template. */
.consensus-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.consensus-stage::before { content: ""; position: absolute; inset: 18px; background: linear-gradient(135deg,rgba(42,157,143,.08),rgba(102,88,170,.06),rgba(200,103,88,.07)); border: 1px solid rgba(42,157,143,.10); }
.consensus-scan { position: absolute; z-index: 3; left: 10%; right: 10%; height: 2px; top: 23%; background: linear-gradient(90deg,transparent,#d28a52,transparent); box-shadow: 0 0 16px rgba(210,138,82,.55); animation: v3ConsensusScan 5.4s ease-in-out infinite; }
.consensus-lines { position: relative; z-index: 2; }
.consensus-lines span, .consensus-lines strong { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 9px; }
.consensus-lines i { width: 7px; height: 7px; border-radius: 50%; background: #2a9d8f; box-shadow: 0 0 9px rgba(42,157,143,.45); }
.consensus-lines span:nth-child(2) i { background: #5271c4; }
.consensus-lines span:nth-child(3) i { background: #c86758; }
.consensus-lines strong i { background: #d28a52; box-shadow: 0 0 12px rgba(210,138,82,.62); }
.consensus-meter { position: absolute; right: 29px; bottom: 28px; display: flex; gap: 4px; align-items: end; }
.consensus-meter b { width: 4px; height: calc(8px + var(--i, 1) * 5px); background: rgba(42,157,143,.38); animation: v3Meter 2.8s ease-in-out infinite; }
.consensus-meter b:nth-child(2) { height: 18px; animation-delay: -.4s; background: rgba(82,113,196,.45); }
.consensus-meter b:nth-child(3) { height: 28px; animation-delay: -.8s; background: rgba(210,138,82,.56); }
.consensus-meter b:nth-child(4) { height: 21px; animation-delay: -1.2s; background: rgba(200,103,88,.48); }
.consensus-meter b:nth-child(5) { height: 12px; animation-delay: -1.6s; }
.virus-constellation { position: relative; width: 190px; height: 190px; }
.virus-core { z-index: 3; }
.orbit-ring { position: absolute; inset: 16px; border: 1px solid rgba(42,157,143,.30); border-radius: 50%; animation: v3Orbit 18s linear infinite; }
.orbit-ring.ring-two { inset: 38px -7px; border-color: rgba(102,88,170,.26); border-style: dashed; animation-duration: 25s; animation-direction: reverse; }
.virus-node { position: absolute; z-index: 4; min-width: 37px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid rgba(42,157,143,.22); color: #2a6e60; font: 500 .48rem/1 var(--mono); box-shadow: 0 6px 14px rgba(37,55,50,.10); white-space: nowrap; animation: v3Float 4.6s ease-in-out infinite; }
.virus-node.v1 { left: 1px; top: 76px; }
.virus-node.v2 { right: 0; top: 36px; animation-delay: -.9s; border-color: rgba(102,88,170,.28); color: #5e54a1; }
.virus-node.v3 { right: 3px; bottom: 24px; animation-delay: -1.8s; border-color: rgba(200,103,88,.28); color: #a55247; }
.virus-node.v4 { left: 23px; bottom: 1px; animation-delay: -2.7s; border-color: rgba(210,138,82,.30); color: #986820; }
.virus-node.v5 { left: 65px; top: -2px; animation-delay: -3.6s; }
.virus-wave { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border: 1px solid rgba(42,157,143,.55); border-radius: 50%; animation: v3Wave 4s ease-out infinite; }
.virus-wave.wave-b { border-color: rgba(102,88,170,.45); animation-delay: -2s; }

/* Editorial dark theme, intentionally quieter than the light presentation. */
html[data-theme="dark"] {
  --night: #111517;
  --night-2: #171c1e;
  --mint: #86b8aa;
  --mint-soft: #c8dbd5;
  --blue: #929eb9;
  background: #111517;
}
html[data-theme="dark"] body { background: #171c1d; }
html[data-theme="dark"] .hero { background: radial-gradient(circle at 76% 39%,rgba(79,112,104,.16),transparent 29%),radial-gradient(circle at 70% 80%,rgba(80,83,110,.10),transparent 35%),#111517; }
html[data-theme="dark"] .hero::before { opacity: .45; }
html[data-theme="dark"] #field, html[data-theme="dark"] #vision-field, html[data-theme="dark"] #tree-field, html[data-theme="dark"] #learning-field, html[data-theme="dark"] #contact-field { opacity: .28; }
html[data-theme="dark"] .scientific-vision, html[data-theme="dark"] .methods-map, html[data-theme="dark"] .structure-section { background-color: #151a1c; }
html[data-theme="dark"] .program { background: linear-gradient(180deg,#151b1b,#111718); }
html[data-theme="dark"] .learning { background: linear-gradient(180deg,#17191f,#14171b); }
html[data-theme="dark"] .conferences { background: #171c1d; }
html[data-theme="dark"] .contact { background: #121617; }
html[data-theme="dark"] .methods-network-stage, html[data-theme="dark"] .program-visual { box-shadow: none; }
html[data-theme="dark"] .program-visual { background: radial-gradient(circle at 50% 48%,rgba(77,114,104,.10),transparent 56%),linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.006)); }
html[data-theme="dark"] .foundation-card:hover { background: #202627; box-shadow: 0 24px 54px rgba(0,0,0,.18); }
html[data-theme="dark"] .ambient-glow, html[data-theme="dark"] .global-aurora, html[data-theme="dark"] .future-halo { opacity: .12; }
html[data-theme="dark"] .sequence { opacity: .62; }

/* Light mode is the first impression and uses a restrained editorial palette. */
html[data-theme="light"] .program-item { padding-left: 8px; padding-right: 8px; }
html[data-theme="light"] .program-visual { box-shadow: 0 18px 48px rgba(36,74,65,.07), inset 0 0 70px rgba(31,118,103,.025); }
html[data-theme="light"] .global-panel > rect, html[data-theme="light"] .future-input > rect, html[data-theme="light"] .future-output > rect { fill: rgba(255,255,255,.75); stroke: rgba(25,45,40,.13); }
html[data-theme="light"] .global-panel .panel-kicker, html[data-theme="light"] .future-output .panel-kicker, html[data-theme="light"] .axis-text, html[data-theme="light"] .host-label, html[data-theme="light"] .global-phase-track text, html[data-theme="light"] .future-output text, html[data-theme="light"] .future-input text, html[data-theme="light"] .future-flow-core text { fill: #55635f; }
html[data-theme="light"] .global-map-ring { stroke: rgba(82,83,160,.35); }
html[data-theme="light"] .global-map-grid { stroke: rgba(28,47,42,.15); }
html[data-theme="light"] .global-tree-events circle, html[data-theme="light"] .global-host-nodes circle, html[data-theme="light"] .output-trajectory circle { fill: #fff; }
html[data-theme="light"] .phenotype-links path, html[data-theme="light"] .phenotype-output path { stroke: rgba(31,52,47,.22); }
html[data-theme="light"] .global-phase-track > rect:first-of-type { fill: rgba(31,52,47,.10); }
html[data-theme="light"] .future-flow-core > circle { stroke: rgba(31,52,47,.13); }
html[data-theme="light"] .future-input > rect, html[data-theme="light"] .future-output > rect { filter: drop-shadow(0 7px 16px rgba(36,62,55,.04)); }
html[data-theme="light"] .foundation-card { background: #fbfbf8; }
html[data-theme="light"] .foundation-card:hover { background: #fff; color: #17201e; box-shadow: 0 24px 54px rgba(37,55,50,.10); }
html[data-theme="light"] .foundation-card:hover .foundation-top > span { color: var(--v3-teal); }
html[data-theme="light"] .foundation-card:hover .foundation-top small, html[data-theme="light"] .foundation-card:hover > p { color: #596560; }
html[data-theme="light"] .foundation-card:hover .foundation-tags span { border-color: rgba(18,28,27,.14); color: #5c6864; }
html[data-theme="light"] .foundation-card:hover .foundation-visual { border-color: rgba(18,28,27,.14); background: radial-gradient(circle at center,rgba(31,118,103,.075),transparent 64%); }
html[data-theme="light"] .compact-link-icon { color: #5b536b; }
html[data-theme="light"] .button-icon { background: rgba(255,255,255,.16); }

/* Mobile is redesigned, not merely compressed. */
@media (max-width: 760px) {
  body { word-break: normal; overflow-wrap: normal; hyphens: none; }
  .section-shell, .hero-inner, .footer-inner { width: min(calc(100% - 32px), var(--shell)); }
  .site-header { height: 68px; padding-inline: 15px; }
  .header-actions { gap: 9px; }
  .theme-toggle { height: 38px; }
  .menu-button { width: 38px; height: 38px; border-radius: 50%; }
  .mobile-menu { padding: 94px 21px 30px; }
  .mobile-menu a { font-size: clamp(2.05rem,10vw,3.35rem); padding: 11px 2px; }
  .hero { min-height: 100svh; }
  .hero-inner { padding-top: 104px; padding-bottom: 74px; }
  .overline { font-size: .56rem; letter-spacing: .105em; line-height: 1.55; }
  .statement { font-size: clamp(3.15rem,15.6vw,5rem); line-height: .92; }
  .hero-intro { margin-top: 27px; font-size: .96rem; line-height: 1.72; }
  .hero-links { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .button { width: 100%; min-height: 52px; justify-content: space-between; padding-inline: 17px; border-radius: 3px; }
  .button:hover { transform: none; }
  .button-icon { width: 26px; height: 26px; }
  .affiliation-line { margin-top: 34px; }
  .hero-facts { grid-template-columns: 1fr; gap: 0; }
  .hero-facts > div { min-height: 66px; display: grid; grid-template-columns: 95px 1fr; align-items: center; }
  .hero-facts > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.11); }
  html[data-theme="light"] .hero-facts > div + div { border-top-color: rgba(12,18,18,.11); }
  .hero-facts strong { font-size: 1rem; }
  .hero-facts span { font-size: .52rem; }

  .about, .scientific-vision, .methods-map, .structure-section, .nextstrain-section, .program, .foundations, .publications, .learning, .conferences, .news, .contact { padding-top: 82px; padding-bottom: 82px; }
  .section-index { margin-bottom: 22px; }
  .about-copy h2, .vision-copy h2, .methods-heading h2, .structure-section-copy h2, .nextstrain-copy h2, .section-heading h2, .contact h2 { font-size: clamp(2.62rem,12.2vw,4.25rem); line-height: .96; }
  .about-portrait, .about-portrait img { min-height: 410px; }
  .about-facts { gap: 1px; }
  .about-facts div { min-height: 84px; padding: 15px; }

  .methods-heading { gap: 20px; }
  .methods-instruction { font-size: .54rem; line-height: 1.5; }
  .methods-network-stage { border-radius: 14px; }
  .methods-network-topbar { padding: 12px; }
  .methods-network-kicker { display: none; }
  .methods-controls { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .methods-controls button { min-height: 36px; padding: 0 6px; font-size: .43rem; line-height: 1.2; }
  .research-ecosystem-svg { min-height: 510px; }
  .methods-inspector { margin: 8px; padding: 17px; }

  .structure-summary-grid { gap: 1px; }
  .structure-lead { font-size: .91rem; line-height: 1.72; }
  .structure-citation { font-size: .65rem; }
  .structure-section-art { margin-inline: -8px; }
  .structure-stage { aspect-ratio: .9; }
  .structure-info-panel { left: 12px; right: 12px; bottom: 12px; padding: 15px; }

  .nextstrain-shell { gap: 34px; }
  .tree-actions { display: grid; gap: 9px; }
  .tree-actions > span { text-align: left; }
  .tree-key { display: flex; flex-wrap: wrap; gap: 8px; }
  .evolution-player { min-height: 390px; }
  .evolution-year { left: 16px; top: 16px; }
  .evolution-play { left: 16px; bottom: 16px; min-height: 40px; padding: 0 13px; }
  .evolution-live-link { right: 16px; bottom: 24px; font-size: .52rem; }
  .nextstrain-statline { grid-template-columns: 1fr 1fr; }
  .nextstrain-statline div { min-height: 78px; }

  .program .section-heading { margin-bottom: 0; }
  .program-list { margin-top: 32px; }
  .program-item { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 52px 0; }
  .program-number { font-size: .68rem; }
  .program-copy h3 { font-size: clamp(2rem,9.8vw,3rem); line-height: 1.03; }
  .program-copy .project-question { font-size: 1rem; }
  .program-copy .project-summary { font-size: .82rem; line-height: 1.75; }
  .project-status { max-width: 100%; font-size: .51rem; line-height: 1.45; }
  .project-metrics { display: flex; flex-wrap: wrap; gap: 6px; border: 0; background: transparent; }
  .project-metrics span { min-height: 0; flex: 1 1 145px; padding: 11px; border: 1px solid rgba(255,255,255,.10); white-space: nowrap; }
  html[data-theme="light"] .project-metrics span { border-color: rgba(18,28,27,.13); }
  .program-copy ul { gap: 5px; }
  .program-copy li { white-space: nowrap; }
  .program-visual { grid-column: 1; width: 100%; height: auto; min-height: 270px; aspect-ratio: 620 / 360; margin-top: 6px; border-radius: 12px; }
  .program-visual.visual-atlas { aspect-ratio: 540 / 330; }
  .program-visual::before { inset: 8px; border-radius: 8px; }
  .program-visual text { font-size: 7px; letter-spacing: .45px; }

  .foundations .split-heading { gap: 18px; }
  .foundation-grid { gap: 12px; background: transparent; border: 0; }
  .foundation-card { min-height: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; }
  .foundation-top { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
  .foundation-top small { max-width: none; text-align: left; font-size: .52rem; line-height: 1.55; }
  .foundation-visual { height: 190px; margin: 26px 0 25px; border-radius: 9px; }
  .foundation-card h3 { font-size: clamp(1.65rem,8.4vw,2.35rem); }
  .foundation-card > p { font-size: .79rem; }
  .foundation-tags { position: static; margin-top: 22px; }
  .foundation-tags span { white-space: nowrap; }
  .virus-ribbon { margin-top: 30px; padding: 16px 0; justify-content: center; flex-wrap: wrap; gap: 7px; overflow: visible; }
  .virus-ribbon i { display: none; }
  .virus-ribbon span { padding: 7px 9px; border: 1px solid rgba(45,120,99,.18); background: rgba(255,255,255,.35); border-radius: 999px; white-space: nowrap; line-height: 1; }
  html[data-theme="dark"] .virus-ribbon span { background: rgba(255,255,255,.025); border-color: rgba(134,184,170,.18); }

  .publication-feature { border-radius: 12px; }
  .publication-feature h3 { font-size: clamp(2rem,9.5vw,3.25rem); }
  .publication-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .publication-tabs button { width: 100%; min-height: 40px; }
  .publication-row { grid-template-columns: 42px 1fr 34px; gap: 10px; }
  .pub-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 34px; height: 34px; }
  .pub-main h3 { font-size: 1.22rem; line-height: 1.32; }

  .learning-compact-grid { gap: 11px; }
  .learning-panel { border-radius: 12px; overflow: hidden; }
  .compact-resource-link { min-height: 72px; padding: 12px 13px; grid-template-columns: 31px 1fr 34px; }
  .compact-link-copy strong { overflow-wrap: normal; word-break: normal; }
  .compact-link-icon { width: 31px; height: 31px; }

  .conference-spotlight { min-height: 0; padding: 25px; border-radius: 12px; }
  .conference-list article { grid-template-columns: 54px 1fr; gap: 13px; }
  .news-grid { gap: 10px; }
  .news-card { min-height: 210px; padding: 23px; border-radius: 12px; }
  .news-arrow { width: 34px; height: 34px; right: 20px; bottom: 20px; display: grid; place-items: center; border: 1px solid currentColor; }
  .contact-email { max-width: 100%; font-size: clamp(.83rem,4.1vw,1rem); gap: 10px; }
  .contact-email .link-icon { width: 24px; height: 24px; }
  .social-links { gap: 7px; }
  .social-links a { padding: 9px 10px; }
  .footer-inner { min-height: 0; padding: 25px 0; display: grid; justify-items: center; gap: 9px; }
}

@media (max-width: 430px) {
  .section-shell, .hero-inner, .footer-inner { width: min(calc(100% - 26px), var(--shell)); }
  .statement { font-size: clamp(2.9rem,15vw,4rem); }
  .hero-intro { font-size: .91rem; }
  .about-copy h2, .vision-copy h2, .methods-heading h2, .structure-section-copy h2, .nextstrain-copy h2, .section-heading h2, .contact h2 { font-size: clamp(2.45rem,12.4vw,3.55rem); }
  .research-ecosystem-svg { min-height: 475px; }
  .program-visual { min-height: 245px; }
  .program-visual text { font-size: 6.5px; }
  .project-metrics span { flex-basis: 100%; white-space: normal; }
  .program-copy li { white-space: normal; }
  .foundation-visual { height: 175px; }
  .virus-constellation { transform: scale(.88); }
  .publication-row { grid-template-columns: 38px 1fr 31px; }
  .pub-arrow { width: 31px; height: 31px; }
  .compact-resource-link { grid-template-columns: 28px 1fr 31px; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-route-particle, .future-particle { display: none; }
}

@keyframes v3Aura { 50% { transform: translate3d(12px,-8px,0) scale(1.08); opacity: .36; } }
@keyframes v3Trace { to { stroke-dashoffset: -90; } }
@keyframes v3NodePulse { 50% { transform: scale(1.34); opacity: .56; } }
@keyframes v3Matrix { 50% { opacity: .48; transform: translateY(-1px); } }
@keyframes v3Phase { 0%,100% { transform: scaleX(.12); opacity: .55; } 55% { transform: scaleX(1); opacity: .92; } }
@keyframes v3Orbit { to { transform: rotate(360deg); } }
@keyframes v3CorePulse { 50% { transform: scale(1.12); opacity: .62; } }
@keyframes v3Bar { 50% { transform: scaleX(.72); opacity: .66; } }
@keyframes v3Needle { 0%,100% { transform: rotate(-25deg); } 50% { transform: rotate(28deg); } }
@keyframes v3ConsensusScan { 0%,100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(112px); opacity: .9; } }
@keyframes v3Meter { 50% { transform: scaleY(.55); opacity: .55; } }
@keyframes v3Float { 50% { transform: translateY(-7px); } }
@keyframes v3Wave { from { transform: scale(.3); opacity: .7; } to { transform: scale(8); opacity: 0; } }


/* ========================================================================== 
   V4 precision pass: overlap repair, compact mobile visuals, clearer scanners
   ========================================================================== */

/* Recent Signals always keeps legible contrast during hover and keyboard focus. */
.news-card:hover,
.news-card:focus-visible { background: #0a1110 !important; color: #fff !important; }
.news-card:hover h3,
.news-card:focus-visible h3 { color: #fff !important; }
.news-card:hover .news-meta,
.news-card:focus-visible .news-meta { color: rgba(255,255,255,.62) !important; }
.news-card:hover .news-arrow,
.news-card:focus-visible .news-arrow { color: #aee9dc !important; }

/* Project illustrations use the full grid column without forcing horizontal overflow. */
.program-copy, .program-visual { min-width: 0; }
.program-visual svg { width: 100%; height: 100%; max-width: none; overflow: visible; }

/* Aim 1, replace the eye-like target with a rectangular phenotype scanner. */
.phenotype-scanner .scanner-shell { fill: rgba(102,88,170,.045); stroke: url(#scannerFrameGrad); stroke-width: 1.5; }
.phenotype-scanner .scanner-window { fill: rgba(8,18,18,.24); stroke: rgba(113,107,194,.48); stroke-width: 1; }
.phenotype-scanner .scanner-title { fill: rgba(255,255,255,.58); font: 500 8px var(--mono); letter-spacing: 1px; }
.phenotype-scanner .scanner-protein { fill: none; stroke: rgba(79,205,181,.80); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(79,205,181,.25)); animation: scannerProtein 4.2s ease-in-out infinite; }
.phenotype-scanner .scanner-focus { fill: rgba(216,121,97,.20); stroke: #e08c72; stroke-width: 1.5; animation: scannerFocus 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.phenotype-scanner .scanner-beam { fill: url(#scannerBeamGrad); opacity: .78; animation: scannerSweep 4.5s ease-in-out infinite; }
.phenotype-scanner .scanner-corners { fill: none; stroke: rgba(242,164,95,.75); stroke-width: 1.4; stroke-linecap: square; }
.ssf-labels text { font-size: 6.6px; letter-spacing: .48px; }
.ssf-labels path { stroke: rgba(216,121,97,.55); }

/* Aim 2, coordinate-driven labels prevent overlaps at all sizes. */
.global-panel .panel-kicker { font-size: 7.5px; letter-spacing: .82px; }
.global-host-label-row .host-label,
.phenotype-label-row .host-label { font-size: 6.2px; letter-spacing: .42px; }
.global-phase-track > text { font-size: 6.5px; letter-spacing: .45px; }
.phase-label-row text { font-size: 5.9px; letter-spacing: .42px; }
.axis-end { text-anchor: end; }

/* Aim 3, method names are captions below the animated fusion core. */
.future-core-caption text { fill: rgba(255,255,255,.63); font: 500 7px var(--mono); letter-spacing: .72px; }
html[data-theme="light"] .future-core-caption text { fill: #485a55; }

/* The evolutionary tree is intentionally shorter so its time label and timeline
   are visible within one desktop viewport. */
.evolution-viewport { aspect-ratio: 16 / 10; min-height: 0; max-height: 570px; }
.evolution-player .evolution-tree-art { inset: 2% 3% 2%; width: 94%; height: 96%; object-fit: contain; object-position: center; }
.evolution-timeline { margin-top: 14px; padding-bottom: 12px; }

/* Light-theme scanner and panel contrast. */
html[data-theme="light"] .phenotype-scanner .scanner-shell { fill: rgba(105,86,184,.035); stroke: url(#scannerFrameGrad); }
html[data-theme="light"] .phenotype-scanner .scanner-window { fill: rgba(255,255,255,.74); stroke: rgba(91,73,169,.30); }
html[data-theme="light"] .phenotype-scanner .scanner-title { fill: #5c536c; }
html[data-theme="light"] .phenotype-scanner .scanner-protein { stroke: #167562; }
html[data-theme="light"] .phenotype-scanner .scanner-focus { fill: rgba(216,93,82,.13); stroke: #b94e49; }
html[data-theme="light"] .phenotype-scanner .scanner-corners { stroke: #a66b18; }

@media (max-width: 760px) {
  /* Keep the three headline metrics on one horizontal row. */
  .hero-facts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
  .hero-facts > div { min-width: 0; min-height: 76px; padding: 9px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .hero-facts > div + div { border-top: 0; border-left: 1px solid rgba(255,255,255,.11); }
  html[data-theme="light"] .hero-facts > div + div { border-top: 0; border-left-color: rgba(12,18,18,.11); }
  .hero-facts strong { white-space: nowrap; font-size: clamp(.69rem,2.7vw,.9rem); line-height: 1.15; letter-spacing: -.02em; }
  .hero-facts span { margin-top: 5px; font-size: .41rem; line-height: 1.35; letter-spacing: .04em; }

  /* Compact structure caption reveals substantially more of the molecule. */
  .structure-stage { aspect-ratio: 1 / .82; }
  .structure-stage-refined .hero-structure { inset: -1% -5% 2%; }
  .structure-info-panel { left: 10px; right: auto; top: auto; bottom: 10px; width: auto; max-width: 205px; padding: 9px 11px; border: 1px solid rgba(121,233,205,.20); border-left-width: 1px; border-radius: 8px; background: rgba(5,11,11,.70); backdrop-filter: blur(10px); }
  .structure-info-kicker,
  .structure-info-panel > p,
  .structure-info-details span { display: none; }
  .structure-info-panel h3 { margin: 0 0 5px; font-size: .67rem; line-height: 1.2; }
  .structure-info-details { margin: 0; display: block; font-size: .39rem; }
  .structure-info-details a::before { display: none; }
  .structure-info-details a { display: inline-flex; align-items: center; gap: 3px; }
  html[data-theme="light"] .structure-info-panel { background: rgba(255,255,255,.78); border-color: rgba(18,28,27,.15); }

  /* The tree player becomes a compact landscape panel, not a full phone screen. */
  .evolution-viewport { aspect-ratio: 4 / 3; max-height: none; }
  .evolution-player .evolution-tree-art { inset: 4% 4% 3%; width: 92%; height: 93%; object-fit: contain; }
  .evolution-year { left: 13px; top: 12px; }
  .evolution-year small { font-size: .39rem; }
  .evolution-year strong { font-size: clamp(1.15rem,6.2vw,1.65rem); }
  .evolution-live-link { right: 13px; top: 14px; }
  .evolution-play { left: 13px; top: auto; bottom: 12px; min-height: 36px; }
  .evolution-timeline { margin: 11px 5% 0; padding-bottom: 8px; }

  /* Project metrics remain one row like desktop, including 37K, 4K, 1996 to 2026. */
  .project-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .project-metrics span { min-width: 0; min-height: 52px; padding: 8px 5px; display: grid; place-items: center; text-align: center; white-space: normal; font-size: .43rem; line-height: 1.38; }
  .project-global .project-metrics span { white-space: nowrap; font-size: .41rem; letter-spacing: .025em; }

  .program-visual { min-height: 245px; aspect-ratio: 680 / 360; }
  .program-visual.visual-atlas { aspect-ratio: 620 / 360; }
  .program-visual text { font-size: 6.5px; letter-spacing: .32px; }
  .global-panel .panel-kicker { font-size: 6.2px; letter-spacing: .55px; }
  .global-host-label-row .host-label,
  .phenotype-label-row .host-label { font-size: 5.2px; letter-spacing: .26px; }
  .phase-label-row text { font-size: 4.8px; letter-spacing: .22px; }
  .global-phase-track > text { font-size: 5px; }
  .ssf-labels text { font-size: 5.8px; letter-spacing: .28px; }
  .future-core-caption text { font-size: 6px; letter-spacing: .46px; }
}

@media (max-width: 430px) {
  .hero-facts strong { font-size: .68rem; }
  .hero-facts span { font-size: .37rem; }
  .project-metrics span { min-height: 48px; font-size: .39rem; }
  .project-global .project-metrics span { font-size: .37rem; }
  .program-visual { min-height: 225px; }
  .structure-stage { aspect-ratio: 1 / .78; }
  .structure-info-panel { max-width: 178px; }
  .global-panel .panel-kicker { font-size: 5.65px; }
  .global-host-label-row .host-label,
  .phenotype-label-row .host-label { font-size: 4.8px; }
  .phase-label-row text { font-size: 4.35px; }
}

@keyframes scannerSweep { 0%,100% { transform: translateY(0); opacity: .22; } 50% { transform: translateY(72px); opacity: .92; } }
@keyframes scannerFocus { 50% { transform: scale(1.36); opacity: .62; } }
@keyframes scannerProtein { 50% { transform: translateY(-2px); opacity: .70; } }

/* =========================================================
   V5 refinements: light-first theme, photographic sections,
   experimental foundations, and clearer learning resources.
   ========================================================= */

/* A small personal note that adds personality without competing with the CV. */
.about-personal {
  margin: 22px 0 24px;
  padding: 13px 15px;
  border-left: 2px solid rgba(121,233,205,.52);
  background: rgba(121,233,205,.045);
  color: rgba(255,255,255,.55);
  font-size: .76rem;
  line-height: 1.65;
}
.about-personal span {
  margin-right: 7px;
  color: var(--mint);
  font: 500 .52rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
html[data-theme="light"] .about-personal {
  border-left-color: rgba(31,118,103,.56);
  background: rgba(31,118,103,.055);
  color: #596560;
}
html[data-theme="light"] .about-personal span { color: #176f60; }

/* Wet-lab foundations are presented as grounding, not as the primary identity. */
.experimental-foundation {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr);
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.experimental-photo-grid {
  min-height: 480px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1px;
  background: var(--line);
}
.experimental-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #101717;
}
.experimental-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 56%,rgba(5,8,8,.30));
  pointer-events: none;
}
.experimental-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.91) contrast(1.02);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.experimental-photo-wide img { object-position: 51% 45%; }
.experimental-photo:not(.experimental-photo-wide) img { object-position: 53% 43%; }
.experimental-foundation:hover .experimental-photo img { transform: scale(1.025); filter: saturate(1) contrast(1.03); }
.experimental-copy {
  padding: clamp(32px,4.5vw,62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.experimental-kicker {
  margin: 0 0 18px;
  color: var(--mint);
  font: 500 .54rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.experimental-copy h3 {
  margin: 0 0 20px;
  max-width: 580px;
  font: 500 clamp(2rem,3vw,3.35rem)/1.04 var(--serif);
  letter-spacing: -.035em;
}
.experimental-copy > p:not(.experimental-kicker) {
  margin: 0;
  color: #626d69;
  font-size: .82rem;
  line-height: 1.78;
}
.experimental-tags {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.experimental-tags span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: #65706c;
  font: 500 .49rem/1 var(--mono);
  letter-spacing: .035em;
  white-space: nowrap;
}
html[data-theme="dark"] .experimental-foundation { background: #171d1c; border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .experimental-photo-grid { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .experimental-copy h3 { color: #f4f7f5; }
html[data-theme="dark"] .experimental-copy > p:not(.experimental-kicker) { color: rgba(255,255,255,.53); }
html[data-theme="dark"] .experimental-tags span { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html[data-theme="light"] .experimental-foundation { background: #fbfbf8; border-color: rgba(18,28,27,.15); box-shadow: 0 24px 70px rgba(37,55,50,.055); }
html[data-theme="light"] .experimental-photo-grid { background: rgba(18,28,27,.12); }
html[data-theme="light"] .experimental-copy h3 { color: #1b2321; }
html[data-theme="light"] .experimental-copy > p:not(.experimental-kicker) { color: #596560; }
html[data-theme="light"] .experimental-kicker { color: #176f60; }
html[data-theme="light"] .experimental-tags span { border-color: rgba(18,28,27,.14); color: #5b6663; background: rgba(255,255,255,.68); }

/* Make the BEAST tutorial visibly distinct in both themes. */
.compact-learning-note {
  padding: 15px 17px;
  border: 1px solid rgba(193,177,255,.18);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(104,87,181,.14),rgba(121,233,205,.055));
}
.compact-learning-note a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(202,188,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #e3d8ff;
  font-weight: 600;
}
.compact-learning-note a:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="light"] .compact-learning-note {
  border-color: rgba(104,72,160,.22);
  background: linear-gradient(135deg,#eee8f8,#edf8f6);
  box-shadow: 0 12px 35px rgba(79,61,113,.055);
}
html[data-theme="light"] .compact-learning-note > span,
html[data-theme="light"] .compact-learning-note p { color: #4f4959; }
html[data-theme="light"] .compact-learning-note a {
  border-color: rgba(104,72,160,.23);
  background: rgba(255,255,255,.72);
  color: #6848a0;
}
html[data-theme="light"] .compact-learning-note a:hover { background: #fff; color: #50327e; }

/* Conference photograph adds a human, public-facing layer to the scientific story. */
.conferences,
html[data-theme="light"] .conferences,
html[data-theme="dark"] .conferences {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(90deg,rgba(4,9,14,.94) 0%,rgba(5,11,16,.84) 45%,rgba(6,11,16,.66) 100%),
    url('../img/conference-ceirr.webp') center 42% / cover no-repeat;
}
.conferences::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.13),rgba(0,0,0,.30)),
    radial-gradient(circle at 22% 42%,rgba(39,143,126,.13),transparent 34%);
}
.conferences .section-shell { position: relative; z-index: 1; }
.conferences .light-heading .section-index,
html[data-theme="light"] .conferences .light-heading .section-index { color: rgba(230,255,249,.70); }
.conferences .light-heading h2,
html[data-theme="light"] .conferences .light-heading h2,
.conferences .conference-spotlight h3,
.conferences .conference-list h3,
html[data-theme="light"] .conferences .conference-spotlight h3,
html[data-theme="light"] .conferences .conference-list h3 { color: #fff; }
.conferences .split-heading > p,
html[data-theme="light"] .conferences .split-heading > p,
.conferences .conference-spotlight p,
.conferences .conference-list p,
html[data-theme="light"] .conferences .conference-spotlight p,
html[data-theme="light"] .conferences .conference-list p { color: rgba(255,255,255,.68); }
.conference-spotlight,
html[data-theme="light"] .conference-spotlight {
  background: linear-gradient(145deg,rgba(7,17,20,.84),rgba(26,26,47,.64));
  border-color: rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.conference-list,
html[data-theme="light"] .conference-list { border-color: rgba(255,255,255,.20); }
.conference-list article,
html[data-theme="light"] .conference-list article {
  padding-inline: 18px;
  border-color: rgba(255,255,255,.17);
  background: rgba(5,12,15,.48);
  backdrop-filter: blur(8px);
  transition: background .25s ease, transform .25s ease;
}
.conference-list article:hover { background: rgba(8,20,22,.70); transform: translateX(4px); }
.conference-list span,
html[data-theme="light"] .conference-list span { color: #9cebd9; }
.conference-list small,
html[data-theme="light"] .conference-list small { color: rgba(255,255,255,.48); }

@media (max-width: 980px) {
  .experimental-foundation { grid-template-columns: 1fr; }
  .experimental-photo-grid { min-height: 430px; }
  .conferences,
  html[data-theme="light"] .conferences,
  html[data-theme="dark"] .conferences {
    background-position: 46% center;
  }
}

@media (max-width: 760px) {
  .about-personal { margin: 18px 0 20px; font-size: .72rem; }
  .experimental-foundation { margin-top: 24px; border-radius: 12px; }
  .experimental-photo-grid { min-height: 0; height: 360px; grid-template-columns: 1.15fr .85fr; }
  .experimental-copy { padding: 27px 22px 29px; }
  .experimental-copy h3 { font-size: clamp(1.85rem,9.5vw,2.7rem); }
  .experimental-copy > p:not(.experimental-kicker) { font-size: .78rem; }
  .experimental-tags { gap: 6px; }
  .experimental-tags span { padding: 7px 8px; font-size: .45rem; }
  .compact-learning-note { padding: 14px; gap: 8px; }
  .compact-learning-note a { margin: 6px 0 0; }
  .conferences,
  html[data-theme="light"] .conferences,
  html[data-theme="dark"] .conferences {
    background-position: 42% center;
    background-attachment: scroll;
  }
  .conference-list article { padding-inline: 14px; border-radius: 8px; margin-top: 8px; }
}

@media (max-width: 430px) {
  .experimental-photo-grid { height: 315px; }
  .experimental-copy { padding: 24px 18px 26px; }
  .experimental-tags span { white-space: normal; }
}

/* =========================================================
   V6 refinements: public presentation foreground and a compact
   scientific exchange gallery. Captions remain context focused.
   ========================================================= */

/* The public presentation is now visible as a foreground photograph,
   while the auditorium remains a quiet atmospheric background. */
.conference-spotlight,
html[data-theme="light"] .conference-spotlight,
html[data-theme="dark"] .conference-spotlight {
  min-height: 610px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  border-radius: 18px;
}
.conference-feature {
  position: relative;
  height: 322px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 13px;
  background: #071012;
  box-shadow: 0 22px 55px rgba(0,0,0,.23);
}
.conference-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(4,9,12,.05) 35%,rgba(4,9,12,.82) 100%),
    linear-gradient(90deg,rgba(5,11,14,.08),transparent 54%);
  pointer-events: none;
}
.conference-feature img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 49%;
  filter: saturate(.96) contrast(1.025);
  transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.conference-spotlight:hover .conference-feature img {
  transform: scale(1.025);
  filter: saturate(1.03) contrast(1.035);
}
.conference-feature-year {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(5,14,16,.62);
  backdrop-filter: blur(9px);
  color: #d9fff5;
  font: 600 .55rem/1 var(--mono);
  letter-spacing: .12em;
}
.conference-feature figcaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 17px;
  color: rgba(255,255,255,.88);
  font: 500 .66rem/1.45 var(--mono);
  letter-spacing: .015em;
}
.conference-spotlight-copy {
  padding: 27px 25px 28px;
}
.conference-spotlight-copy h3 {
  margin: 15px 0 18px;
}
.conference-spotlight-copy p { margin: 0; }

/* Scientific exchange is visual evidence of participation in the field,
   not a personality or celebrity gallery. */
.practice {
  padding: 145px 0;
  background: #111716;
  color: #f3f6f4;
}
.practice .split-heading > p { color: rgba(255,255,255,.48); }
.practice .section-index { color: rgba(255,255,255,.38); }
.practice .section-heading h2 { color: #f4f7f5; }
.practice .section-heading h2 em { color: #91dfcd; }
.practice-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.practice-card {
  position: relative;
  min-height: 610px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: #0b1111;
  box-shadow: 0 28px 80px rgba(0,0,0,.20);
}
.practice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,transparent 48%,rgba(4,8,8,.18) 60%,rgba(4,8,8,.94) 100%),
    radial-gradient(circle at 70% 20%,rgba(121,233,205,.08),transparent 38%);
  pointer-events: none;
}
.practice-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(.90) contrast(1.02);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.practice-card-predictive img { object-position: center 42%; }
.practice-card:hover img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.03);
}
.practice-card figcaption {
  position: absolute;
  z-index: 2;
  left: 31px;
  right: 31px;
  bottom: 29px;
  display: grid;
  gap: 11px;
}
.practice-card figcaption span {
  color: #9cebd9;
  font: 600 .53rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.practice-card figcaption strong {
  max-width: 590px;
  color: #fff;
  font: 500 clamp(1.65rem,2.25vw,2.65rem)/1.08 var(--serif);
  letter-spacing: -.028em;
}

html[data-theme="light"] .practice {
  background: #f3f5f1;
  color: #18201e;
}
html[data-theme="light"] .practice .section-index { color: #69736f; }
html[data-theme="light"] .practice .section-heading h2 { color: #18201e; }
html[data-theme="light"] .practice .section-heading h2 em { color: #176f60; }
html[data-theme="light"] .practice .split-heading > p { color: #596560; }
html[data-theme="light"] .practice-card {
  border-color: rgba(20,30,28,.15);
  box-shadow: 0 28px 80px rgba(40,58,53,.10);
}

@media (max-width: 980px) {
  .conference-spotlight,
  html[data-theme="light"] .conference-spotlight,
  html[data-theme="dark"] .conference-spotlight { min-height: 0; }
  .conference-feature { height: 430px; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-card { min-height: 680px; }
}

@media (max-width: 760px) {
  .practice { padding: 82px 0; }
  .conference-spotlight,
  html[data-theme="light"] .conference-spotlight,
  html[data-theme="dark"] .conference-spotlight {
    padding: 10px;
    border-radius: 13px;
  }
  .conference-feature { height: 250px; border-radius: 9px; }
  .conference-feature-year { left: 12px; top: 12px; padding: 7px 9px; }
  .conference-feature figcaption { left: 13px; right: 13px; bottom: 12px; font-size: .56rem; }
  .conference-spotlight-copy { padding: 22px 15px 20px; }
  .conference-spotlight-copy h3 { margin-top: 12px; }
  .practice-grid { gap: 13px; }
  .practice-card { min-height: 470px; border-radius: 13px; }
  .practice-card figcaption { left: 21px; right: 21px; bottom: 20px; gap: 9px; }
  .practice-card figcaption strong { font-size: clamp(1.55rem,7.7vw,2.2rem); }
}

@media (max-width: 430px) {
  .conference-feature { height: 218px; }
  .practice-card { min-height: 420px; }
  .practice-card-predictive { min-height: 455px; }
  .practice-card figcaption strong { font-size: clamp(1.42rem,7.5vw,1.9rem); }
}