:root {
  --bg:#071018;
  --bg-soft:#0a151f;
  --surface:rgba(255,255,255,.045);
  --surface-strong:#0d1922;
  --text:#eef7f5;
  --muted:#9aadb1;
  --muted-2:#6f8489;
  --line:rgba(255,255,255,.12);
  --accent:#5fe2d1;
  --accent-2:#89b5ff;
  --accent-soft:rgba(95,226,209,.12);
  --grid:rgba(95,226,209,.075);
  --shadow:0 28px 74px rgba(0,0,0,.24);
  --radius:28px;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html[data-theme="light"] {
  --bg:#f7faf9;
  --bg-soft:#eef4f2;
  --surface:rgba(255,255,255,.82);
  --surface-strong:#ffffff;
  --text:#11272b;
  --muted:#536d72;
  --muted-2:#74898d;
  --line:rgba(17,39,43,.14);
  --accent:#087d73;
  --accent-2:#355f9e;
  --accent-soft:rgba(8,125,115,.09);
  --grid:rgba(8,125,115,.075);
  --shadow:0 24px 64px rgba(38,71,73,.10);
  color-scheme:light;
}
html[data-theme="dark"] { color-scheme:dark; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-5;
  background:
    radial-gradient(circle at 52% -14%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 36%),
    radial-gradient(circle at 105% 62%, color-mix(in srgb,var(--accent-2) 5%,transparent), transparent 32%);
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
img,svg { max-width:100%; }
::selection { background:color-mix(in srgb,var(--accent) 28%,transparent); color:var(--text); }

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:2000;
  transform:translateY(-140%);
  padding:10px 14px;
  border-radius:10px;
  background:var(--text);
  color:var(--bg);
  font-size:12px;
}
.skip-link:focus { transform:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.shell { width:min(1220px, calc(100% - 48px)); margin-inline:auto; }
.section { padding:136px 0 20px; }
.top-anchor { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

#scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:2px;
  z-index:1000;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 65%,transparent);
}

.site-header {
  position:fixed;
  z-index:100;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px, calc(100% - 34px));
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:9px 10px 9px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 40px rgba(0,0,0,.10);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; }
.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--mono);
  font-size:11px;
}
.brand-text { font-size:14px; }
.nav { display:flex; gap:26px; color:var(--muted); font-size:12px; }
.nav a { position:relative; transition:color .2s ease; }
.nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:var(--accent);
  transition:right .25s ease;
}
.nav a:hover,.nav a.active { color:var(--text); }
.nav a:hover::after,.nav a.active::after { right:0; }
.header-actions { display:flex; align-items:center; gap:6px; }
.theme-toggle,.menu-button {
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  border-radius:11px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.theme-toggle:hover,.menu-button:hover { background:var(--surface); }
.theme-icon { position:absolute; width:18px; fill:none; stroke:currentColor; stroke-width:1.7; transition:opacity .2s,transform .2s; }
html[data-theme="dark"] .theme-icon-sun { opacity:0; transform:rotate(-25deg) scale(.7); }
html[data-theme="dark"] .theme-icon-moon { opacity:1; }
html[data-theme="light"] .theme-icon-sun { opacity:1; }
html[data-theme="light"] .theme-icon-moon { opacity:0; transform:rotate(25deg) scale(.7); }
.menu-button { display:none; align-content:center; gap:5px; }
.menu-button span { display:block; width:20px; height:1px; background:currentColor; transition:.2s; }
.mobile-nav {
  position:fixed;
  z-index:99;
  top:90px;
  left:17px;
  right:17px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--bg) 95%,transparent);
  backdrop-filter:blur(18px);
}
.mobile-nav a { display:block; padding:12px 8px; border-bottom:1px solid var(--line); color:var(--muted); }
.mobile-nav a:last-child { border-bottom:0; }

.hero {
  min-height:100svh;
  position:relative;
  padding-top:146px;
  padding-bottom:68px;
}
#network-canvas {
  position:absolute;
  inset:-6% -12%;
  width:124%;
  height:116%;
  z-index:-2;
  opacity:.54;
  mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 82%, transparent 100%);
}
html[data-theme="light"] #network-canvas { opacity:.25; }
.hero-grid {
  min-height:700px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:68px;
  align-items:center;
}
.eyebrow {
  margin:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 8%,transparent),0 0 17px color-mix(in srgb,var(--accent) 45%,transparent);
}
.hero h1 {
  margin:24px 0 24px;
  max-width:780px;
  font-size:clamp(52px,6vw,84px);
  line-height:1.01;
  letter-spacing:-.058em;
  font-weight:620;
}
.gradient-text {
  background:linear-gradient(110deg,var(--accent),color-mix(in srgb,var(--accent) 22%,var(--text)) 45%,var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lede {
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.76;
  text-wrap:pretty;
}
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:32px; }
.button {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 18px;
  border-radius:13px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:650;
  transition:transform .2s ease,background .2s,border-color .2s;
}
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--text); color:var(--bg); }
.button-secondary { border-color:var(--line); background:var(--surface); color:var(--text); }
.button-secondary:hover { background:color-mix(in srgb,var(--surface) 70%,var(--surface-strong)); }
.hero-facts {
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.hero-facts div { display:flex; flex-direction:column; gap:6px; }
.hero-facts span { color:var(--muted-2); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.hero-facts strong { font-size:13px; font-weight:560; }

.hero-portrait { min-height:620px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.portrait-backdrop {
  position:absolute;
  width:min(100%,470px);
  aspect-ratio:.86;
  opacity:.42;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.10));
}
.portrait-backdrop svg { width:100%; height:100%; fill:none; stroke:color-mix(in srgb,var(--accent) 44%,transparent); stroke-width:1.2; }
.portrait-frame {
  position:relative;
  width:min(76%,365px);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:30px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent) 4%,var(--bg-soft)));
  box-shadow:0 35px 90px rgba(0,0,0,.27);
}
.portrait-frame::after {
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--text) 7%,transparent);
  border-radius:22px;
  z-index:2;
}
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; position:relative; z-index:1; filter:saturate(.95) contrast(1.01); }
.portrait-fallback { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:10px; }
.portrait-fallback span { color:var(--accent); font-family:var(--mono); font-size:66px; letter-spacing:-.12em; }
.portrait-fallback small { color:var(--muted); font-family:var(--mono); font-size:9px; }
.portrait-frame.fallback img { display:none; }
.portrait-meta {
  width:min(76%,365px);
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.portrait-meta span { color:var(--accent); font-family:var(--mono); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.portrait-meta strong { color:var(--muted); font-size:11px; font-weight:520; }

.research-lens {
  margin-top:18px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,var(--surface),transparent);
  display:grid;
  grid-template-columns:1.25fr 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:18px;
  box-shadow:var(--shadow);
}
.lens-intro { display:flex; flex-direction:column; gap:7px; }
.lens-intro small,.lens-step span { color:var(--accent); font-family:var(--mono); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.lens-intro strong { font-size:15px; font-weight:600; letter-spacing:-.02em; }
.lens-step { display:flex; flex-direction:column; gap:4px; }
.lens-step strong { font-size:12px; font-weight:620; }
.lens-step small { color:var(--muted); font-size:9px; line-height:1.45; }
.lens-arrow { color:var(--muted-2); font-family:var(--mono); font-size:14px; }

.section-heading {
  display:grid;
  grid-template-columns:190px minmax(0,1.1fr) minmax(280px,.62fr);
  gap:34px;
  align-items:start;
  margin-bottom:48px;
}
.section-heading .eyebrow { padding-top:10px; }
.section-heading h2 {
  margin:0;
  font-size:clamp(38px,4.6vw,62px);
  line-height:1.08;
  letter-spacing:-.052em;
  font-weight:620;
}
.section-heading > p:last-child { margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.8; text-wrap:pretty; }
.section-heading.no-side h2 { grid-column:2 / 4; max-width:1200px; }
.section-heading.no-side > p:last-child { display:none; }

.project {
  margin-bottom:18px;
  min-height:590px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(145deg,var(--surface),transparent);
  box-shadow:var(--shadow);
}
.project-copy { padding:48px 46px; display:flex; flex-direction:column; justify-content:center; }
.project-number { margin-bottom:34px; color:var(--muted-2); font-family:var(--mono); font-size:9px; letter-spacing:.08em; }
.project-kicker { margin:0 0 14px; color:var(--accent); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.project-copy h3 { margin:0 0 20px; font-size:clamp(30px,3.2vw,43px); line-height:1.13; letter-spacing:-.045em; font-weight:620; }
.project-copy > p:not(.project-kicker) { margin:0; color:var(--muted); font-size:15px; line-height:1.82; text-wrap:pretty; }
.project-details { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.project-details div { display:flex; flex-direction:column; gap:5px; }
.project-details span { color:var(--muted-2); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.project-details strong { font-size:12px; font-weight:560; line-height:1.6; }
.project-visual { position:relative; min-height:590px; border-left:1px solid var(--line); background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%),var(--bg-soft); }
html[data-theme="light"] .project-visual { background:radial-gradient(circle at 50% 50%,rgba(8,125,115,.055),transparent 64%),#f3f8f6; }
.ev-visual { display:grid; place-items:center; color:var(--accent); }
.ev-visual svg { width:92%; height:auto; }
.hydrogel-mesh { fill:none; stroke:color-mix(in srgb,var(--accent) 22%,transparent); stroke-width:2.2; }
.hydrogel-mesh-front { stroke:color-mix(in srgb,var(--accent) 32%,transparent); stroke-width:1.8; }
.hydrogel-nodes { fill:color-mix(in srgb,var(--accent) 40%,transparent); }
.ev { transform-box:fill-box; transform-origin:center; animation:evFloat 6s ease-in-out infinite; }
.ev-b { animation-delay:-1.2s; }.ev-c { animation-delay:-2.1s; }.ev-d { animation-delay:-3.2s; }.ev-e { animation-delay:-4.3s; }
.ev-halo { opacity:.6; }
.ev-membrane-outer { fill:rgba(255,255,255,.12); stroke:rgba(235,255,252,.92); stroke-width:2.1; }
.ev-membrane-inner { fill:none; stroke:rgba(113,228,214,.7); stroke-width:1.25; }
.ev-lumen { opacity:.96; }
.ev-proteins circle { fill:#dcfffb; stroke:#4dcfc1; stroke-width:.9; }
.ev-cargo circle { fill:#c7fff8; opacity:.92; }
.ev-cargo path { fill:none; stroke:#d5fffb; stroke-width:1.5; stroke-linecap:round; }
.visual-caption text { fill:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.04em; }

.project-hspc { grid-template-columns:1.02fr .98fr; }
.interaction-panel { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:12px; }
.interaction-copy { display:grid; gap:6px; }
.interaction-eyebrow { color:var(--accent); font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.interaction-copy p { margin:0; color:var(--muted); font-size:15px; line-height:1.75; max-width:540px; }
.interaction-slider-meta { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.interaction-slider-wrap,.temperature-track { position:relative; display:block; --slider-percent:0; }
.interaction-slider-wrap::before,.temperature-track::before { content:""; position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%); border-radius:999px; background:var(--line); }
.interaction-slider-fill,.temperature-fill { position:absolute; left:0; top:50%; width:calc(var(--slider-percent) * 1%); height:3px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent-2) 44%,var(--accent))); pointer-events:none; }
.temperature-slider,.temperature-range-visual { appearance:none; -webkit-appearance:none; width:100%; height:26px; background:transparent; position:relative; z-index:2; margin:0; cursor:pointer; }
.temperature-slider::-webkit-slider-runnable-track,.temperature-range-visual::-webkit-slider-runnable-track { height:26px; background:transparent; }
.temperature-slider::-moz-range-track,.temperature-range-visual::-moz-range-track { height:26px; background:transparent; border:0; }
.temperature-slider::-webkit-slider-thumb,.temperature-range-visual::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; margin-top:3px; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); background:var(--surface-strong); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent),0 10px 24px rgba(0,0,0,.18); }
.temperature-slider::-moz-range-thumb,.temperature-range-visual::-moz-range-thumb { width:20px; height:20px; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); background:var(--surface-strong); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent),0 10px 24px rgba(0,0,0,.18); }
.thermo-visual { display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 58%),var(--bg-soft); }
.thermo-status { position:absolute; top:34px; right:34px; z-index:4; text-align:right; display:flex; flex-direction:column; gap:3px; }
.thermo-status strong { font-size:42px; line-height:1; letter-spacing:-.05em; font-weight:600; }
.thermo-status span { color:var(--muted); font-family:var(--mono); font-size:10px; text-transform:uppercase; }
.polymer-field { position:relative; width:88%; height:64%; min-height:340px; }
.polymer-chain { position:absolute; width:76%; height:auto; overflow:visible; }
.polymer-chain path { fill:none; stroke:var(--accent); stroke-width:3.2; stroke-linecap:round; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 28%,transparent)); }
.chain-1 { top:8%; left:8%; transform:translate(calc(-18px * var(--gel-progress,0)), calc(52px * var(--gel-progress,0))) rotate(calc(-6deg + 16deg * var(--gel-progress,0))) scale(calc(1 - .25 * var(--gel-progress,0))); opacity:calc(1 - .78 * var(--gel-progress,0)); }
.chain-2 { top:34%; right:4%; transform:translate(calc(-50px * var(--gel-progress,0)), calc(-16px * var(--gel-progress,0))) rotate(calc(8deg - 20deg * var(--gel-progress,0))) scale(calc(1 - .28 * var(--gel-progress,0))); opacity:calc(1 - .8 * var(--gel-progress,0)); }
.chain-3 { bottom:2%; left:11%; transform:translate(calc(32px * var(--gel-progress,0)), calc(-48px * var(--gel-progress,0))) rotate(calc(-3deg + 11deg * var(--gel-progress,0))) scale(calc(1 - .28 * var(--gel-progress,0))); opacity:calc(1 - .8 * var(--gel-progress,0)); }
.gel-network { position:absolute; inset:0 4% 7% 4%; width:92%; height:auto; overflow:visible; opacity:calc(.05 + .95 * var(--gel-progress,0)); transform:translateY(calc(16px - 16px * var(--gel-progress,0))) scale(calc(.92 + .08 * var(--gel-progress,0))); filter:drop-shadow(0 16px 36px rgba(0,0,0,.12)); }
.gel-shadow { fill:color-mix(in srgb,var(--accent) 8%,transparent); opacity:calc(.2 + .45 * var(--gel-progress,0)); }
.gel-shell { stroke:color-mix(in srgb,var(--accent) 22%,var(--line)); stroke-width:1.2; }
.gel-shell.back { fill:color-mix(in srgb,var(--surface-solid) 88%,transparent); opacity:.55; }
.gel-shell.front { fill:color-mix(in srgb,var(--surface) 92%,transparent); opacity:.95; }
.gel-strands path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.gel-back-strands path { stroke:color-mix(in srgb,var(--accent) 26%,transparent); stroke-width:2; }
.gel-front-strands path { stroke:color-mix(in srgb,var(--accent) 42%,transparent); stroke-width:2.2; }
.gel-vertical-strands path { stroke:color-mix(in srgb,var(--accent-2) 26%,transparent); stroke-width:1.8; }
.gel-links line { stroke:color-mix(in srgb,var(--accent) 56%,transparent); stroke-width:1.8; stroke-linecap:round; opacity:calc(.15 + .85 * var(--gel-progress,0)); }
.gel-nodes circle { fill:color-mix(in srgb,var(--accent) 85%,white); opacity:calc(.2 + .8 * var(--gel-progress,0)); }
.gel-cell { fill:url(#gelCellCore); stroke:rgba(235,255,252,.85); stroke-width:1.2; filter:drop-shadow(0 0 14px rgba(107,232,216,.26)); }
.gel-cell-wrap { opacity:calc(.05 + .95 * var(--gel-progress,0)); }
.gel-cells text { fill:var(--text); font-family:var(--mono); font-size:10px; text-anchor:middle; dominant-baseline:middle; letter-spacing:.03em; }
.cell { position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--accent-2) 14%,var(--surface-strong)); border:1px solid color-mix(in srgb,var(--accent-2) 32%,var(--line)); color:var(--text); font-family:var(--mono); font-size:9px; box-shadow:0 12px 30px rgba(0,0,0,.14); }
.cell-1 { left:14%; top:34%; transform:translate(calc(42px * var(--gel-progress,0)), calc(26px * var(--gel-progress,0))) scale(calc(1 - .24 * var(--gel-progress,0))); opacity:calc(1 - .95 * var(--gel-progress,0)); }
.cell-2 { right:13%; top:45%; transform:translate(calc(-34px * var(--gel-progress,0)), calc(-10px * var(--gel-progress,0))) scale(calc(1 - .24 * var(--gel-progress,0))); opacity:calc(1 - .95 * var(--gel-progress,0)); }
.cell-3 { left:48%; bottom:9%; transform:translate(0, calc(-28px * var(--gel-progress,0))) scale(calc(1 - .24 * var(--gel-progress,0))); opacity:calc(1 - .95 * var(--gel-progress,0)); }
.temperature-control { position:absolute; left:36px; right:36px; bottom:30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.temperature-track { height:24px; }
.temperature-range-visual::-webkit-slider-thumb { background:var(--text); }
.temperature-range-visual::-moz-range-thumb { background:var(--text); }
.project-computational { grid-template-columns:.82fr 1.18fr; min-height:650px; }
.computational-copy { justify-content:center; }
.computation-tabs { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.computation-tab { appearance:none; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:10px 12px; font-family:var(--mono); font-size:8px; line-height:1.25; cursor:pointer; transition:.2s ease; }
.computation-tab:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.computation-tab.active { color:var(--text); border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,transparent),color-mix(in srgb,var(--accent-2) 7%,transparent)); }
.computational-stage { min-height:650px; position:relative; overflow:hidden; border-left:1px solid var(--line); background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 46%),var(--bg-soft); }
html[data-theme="light"] .computational-stage { background:radial-gradient(circle at 55% 45%,rgba(8,125,115,.05),transparent 46%),#f1f7f5; }
.tech-grid { position:absolute; inset:0; opacity:.65; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 84%,transparent); }
.computation-panel { position:absolute; inset:0; padding:38px 34px 28px; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .35s ease,transform .35s ease; }
.computation-panel.active { opacity:1; transform:none; pointer-events:auto; }
.workflow-heading { position:relative; z-index:2; display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; }
.workflow-heading > span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); color:var(--accent); font-family:var(--mono); font-size:8px; }
.workflow-heading div { display:flex; flex-direction:column; gap:4px; }
.workflow-heading strong { font-size:14px; line-height:1.35; font-weight:620; }
.workflow-heading small { color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.03em; }
.workflow-svg { position:relative; z-index:2; width:100%; height:100%; min-height:340px; }
.diagram-surface,.data-frame { fill:color-mix(in srgb,var(--surface-strong) 78%,transparent); stroke:color-mix(in srgb,var(--accent) 30%,var(--line)); stroke-width:1.4; }
.diagram-line,.molecule-bond,.tree-line,.map-contour { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.diagram-line.soft { stroke:color-mix(in srgb,var(--accent) 42%,var(--line)); stroke-width:1.2; }
.diagram-text { fill:var(--muted); font-family:var(--mono); font-size:8.6px; letter-spacing:.045em; }
.data-row { stroke:color-mix(in srgb,var(--accent) 45%,var(--line)); stroke-width:4; stroke-linecap:round; }
.flow-line,.signal-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:7 8; animation:flowDash 4.8s linear infinite; }
.signal-line { stroke:var(--accent-2); }
.d1 { animation-delay:-1.1s; }.d2 { animation-delay:-2.2s; }.d3 { animation-delay:-3.3s; }
.network-lines line { stroke:color-mix(in srgb,var(--accent) 35%,var(--line)); stroke-width:1.2; }
.network-nodes circle,.molecule-graph circle,.ensemble-model circle,.model-core circle { fill:var(--surface-strong); stroke:var(--accent); stroke-width:1.6; }
.output-node { fill:color-mix(in srgb,var(--accent) 22%,var(--surface-strong)) !important; }
.molecule-ring { fill:none; stroke:var(--accent); stroke-width:2; }
.descriptor-bar { fill:color-mix(in srgb,var(--accent) 68%,transparent); transform-origin:left center; animation:descriptorPulse 3.8s ease-in-out infinite; }
.b2 { animation-delay:-.8s; }.b3 { animation-delay:-1.6s; }.b4 { animation-delay:-2.4s; }.b5 { animation-delay:-3.1s; }
.solar-panel { fill:color-mix(in srgb,var(--accent-2) 18%,var(--surface-strong)); stroke:var(--accent-2); stroke-width:1.3; }
.sampler-ring { fill:none; stroke:var(--accent); stroke-width:2; }
.map-cells rect { fill:color-mix(in srgb,var(--accent) 12%,var(--surface-strong)); stroke:color-mix(in srgb,var(--accent) 28%,var(--line)); stroke-width:1; }
.map-cells rect:nth-child(3n+1) { fill:color-mix(in srgb,var(--accent) 24%,var(--surface-strong)); }
.map-cells rect:nth-child(4n) { fill:color-mix(in srgb,var(--accent-2) 17%,var(--surface-strong)); }
.workflow-description { position:relative; z-index:2; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:10.5px; line-height:1.6; }
.workflow-meta { position:relative; z-index:2; margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.workflow-meta span { min-height:62px; padding:10px 11px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 75%,transparent),transparent); color:var(--muted); font-size:9px; line-height:1.45; }
.workflow-meta small { display:block; margin-bottom:5px; color:var(--text); font-family:var(--mono); font-size:7px; text-transform:uppercase; letter-spacing:.08em; }

.trajectory-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:54px; align-items:start; }
.timeline { position:relative; }
.timeline-line { position:absolute; left:164px; top:4px; bottom:0; width:1px; background:var(--line); }
.timeline-line span { display:block; width:100%; height:0; background:linear-gradient(var(--accent),var(--accent-2)); transition:height .15s linear; }
.timeline-item { position:relative; display:grid; grid-template-columns:140px 48px 1fr; gap:0; padding:0 0 46px; }
.timeline-date { color:var(--muted-2); font-family:var(--mono); font-size:11px; padding-top:3px; }
.timeline-dot { width:9px; height:9px; margin:3px auto 0; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 6px var(--bg); z-index:2; }
.timeline-item small { color:var(--accent); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.timeline-item h3 { margin:8px 0 10px; font-size:24px; line-height:1.2; letter-spacing:-.035em; font-weight:610; }
.timeline-item p { margin:0; color:var(--muted); font-size:11px; line-height:1.72; max-width:690px; }
.academic-card { position:sticky; top:110px; padding:26px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,var(--surface),transparent); box-shadow:var(--shadow); }
.academic-card .eyebrow { margin-bottom:20px; }
.degree { padding:20px 0; border-top:1px solid var(--line); }
.degree:first-of-type { border-top:0; padding-top:0; }
.degree span { color:var(--muted-2); font-family:var(--mono); font-size:8px; }
.degree h3 { margin:7px 0 4px; font-size:18px; letter-spacing:-.03em; font-weight:620; }
.degree p { margin:0 0 8px; color:var(--muted); font-size:10px; line-height:1.5; }
.degree small { color:var(--accent); font-size:9px; line-height:1.5; }

.publication {
  min-height:180px;
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:24px;
  align-items:center;
  padding:28px 30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s;
}
.publication:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent); padding-left:40px; padding-right:40px; }
.publication-number { color:var(--muted-2); font-family:var(--mono); font-size:11px; }
.publication small { color:var(--accent); font-family:var(--mono); font-size:10px; }
.publication h3 { margin:8px 0 10px; max-width:920px; font-size:clamp(22px,2.8vw,34px); line-height:1.22; letter-spacing:-.04em; font-weight:600; }
.publication p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.publication-link { color:var(--text); font-family:var(--mono); font-size:11px; }

.experience-list { border-top:1px solid var(--line); }
.experience-role {
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 300px;
  gap:30px;
  align-items:center;
  padding:36px 6px;
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s;
}
.experience-role:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 72%); padding-left:16px; padding-right:16px; }
.experience-date { align-self:start; padding-top:4px; color:var(--muted-2); font-family:var(--mono); font-size:11px; line-height:1.6; }
.experience-company { margin:0 0 8px; color:var(--accent); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.experience-main h3 { margin:0 0 11px; font-size:clamp(22px,2.5vw,31px); line-height:1.18; letter-spacing:-.036em; font-weight:610; }
.experience-main > p:last-child { margin:0; max-width:700px; color:var(--muted); font-size:11px; line-height:1.72; text-wrap:pretty; }
.experience-side { display:flex; flex-direction:column; gap:11px; }
.experience-graphic { min-height:142px; display:grid; place-items:center; padding:8px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 72%,transparent),transparent); overflow:hidden; }
.experience-graphic svg { width:100%; height:118px; }
.experience-graphic text { fill:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.05em; }
.exp-shape { fill:color-mix(in srgb,var(--surface-strong) 82%,transparent); stroke:color-mix(in srgb,var(--accent) 34%,var(--line)); stroke-width:1.4; }
.exp-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.exp-line.muted { stroke:color-mix(in srgb,var(--accent) 38%,var(--line)); stroke-width:1.4; }
.exp-ring { fill:none; stroke:var(--accent-2); stroke-width:2; }
.experience-impact { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.experience-impact span { padding:10px 11px; border:1px solid var(--line); border-radius:13px; color:var(--muted); font-size:9px; line-height:1.4; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 72%,transparent),transparent); }
.experience-impact strong { display:block; margin-bottom:3px; color:var(--text); font-size:14px; letter-spacing:-.03em; }

.methods-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.methods-grid > div { min-height:250px; padding:28px 24px; border-right:1px solid var(--line); }
.methods-grid > div:last-child { border-right:0; }
.methods-grid small { color:var(--accent); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.methods-grid p { margin:26px 0 0; color:var(--muted); font-size:13px; line-height:2; }

.contact-section { padding-bottom:116px; }
.contact-panel { min-height:370px; display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; padding:50px 54px; border:1px solid var(--line); border-radius:30px; background:radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 35%),linear-gradient(145deg,var(--surface),transparent); box-shadow:var(--shadow); }
.contact-panel h2 { margin:18px 0; max-width:720px; font-size:clamp(38px,4.5vw,58px); line-height:1.08; letter-spacing:-.052em; font-weight:620; }
.contact-panel p:not(.eyebrow) { margin:0; max-width:650px; color:var(--muted); font-size:14px; line-height:1.8; }
.contact-actions { display:flex; flex-direction:column; gap:9px; }
.contact-actions .button { justify-content:space-between; }

.footer { padding:32px 0 46px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:center; color:var(--muted); font-size:10px; }
.footer div { display:flex; flex-direction:column; gap:4px; }
.footer strong { color:var(--text); font-size:11px; }.footer a { color:var(--text); font-family:var(--mono); font-size:8px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); transition-delay:var(--delay,0ms); }
.reveal.visible { opacity:1; transform:none; }

@keyframes evFloat { 0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(7px,-10px) scale(1.06)}70%{transform:translate(-6px,6px) scale(.96)} }
@keyframes flowDash { to{stroke-dashoffset:-90} }
@keyframes descriptorPulse { 0%,100%{opacity:.55;transform:scaleX(.86)}50%{opacity:1;transform:scaleX(1)} }

@media (max-width:1080px) {
  .nav { gap:18px; }
  .hero-grid { gap:34px; }
  .research-lens { grid-template-columns:1fr 1fr; }
  .lens-arrow { display:none; }
  .section-heading { grid-template-columns:150px 1fr; }
  .section-heading > p:last-child { grid-column:2; max-width:700px; margin-top:-14px; }
  .project-computational { grid-template-columns:1fr; }
  .computational-stage { border-left:0; border-top:1px solid var(--line); min-height:640px; }
  .trajectory-layout { grid-template-columns:1fr 300px; gap:34px; }
  .experience-role { grid-template-columns:120px 1fr; align-items:start; }
  .experience-side { grid-column:2; display:grid; grid-template-columns:290px 1fr; }
}

@media (max-width:900px) {
  .nav { display:none; }
  .menu-button { display:grid; }
  .hero { padding-top:130px; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { max-width:820px; }
  .hero-portrait { min-height:540px; }
  .research-lens { margin-top:42px; }
  .project,.project-hspc { grid-template-columns:1fr; }
  .project-visual { border-left:0; border-top:1px solid var(--line); min-height:500px; }
  .trajectory-layout { grid-template-columns:1fr; }
  .academic-card { position:relative; top:auto; }
  .experience-side { grid-template-columns:260px 1fr; }
  .methods-grid { grid-template-columns:1fr 1fr; }
  .methods-grid > div:nth-child(2) { border-right:0; }
  .methods-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .contact-panel { grid-template-columns:1fr; gap:30px; }
}

@media (max-width:660px) {
  .shell { width:min(100% - 28px,1220px); }
  .section { padding-top:96px; }
  .site-header { top:9px; width:calc(100% - 18px); }
  .brand-text { display:none; }
  .hero { padding-top:112px; padding-bottom:48px; }
  .hero h1 { font-size:47px; }
  .hero-lede { font-size:16px; }
  .hero-facts { grid-template-columns:1fr; gap:14px; }
  .hero-portrait { min-height:470px; }
  .portrait-frame { width:72%; border-radius:24px; }
  .portrait-meta { width:72%; }
  .research-lens { grid-template-columns:1fr; padding:20px; }
  .lens-intro { padding-bottom:12px; border-bottom:1px solid var(--line); }
  .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:34px; }
  .section-heading .eyebrow,.section-heading h2,.section-heading > p:last-child { grid-column:1; }
  .section-heading > p:last-child { margin-top:0; }
   .section-heading h2 { font-size:39px; }
  .section-heading.no-side h2 { grid-column:1; max-width:none; }
  .subsection-heading { grid-template-columns:1fr; gap:10px; margin:40px 0 22px; }
  .subsection-heading .eyebrow,.subsection-heading h3 { grid-column:1; }
  .subsection-heading h3 { font-size:30px; }
  .project { border-radius:22px; min-height:auto; }
  .project-copy { padding:32px 23px; }
  .project-copy h3 { font-size:29px; }
  .project-details { grid-template-columns:1fr; }
  .project-visual { min-height:390px; }
  .thermo-status { top:24px; right:24px; }.thermo-status strong { font-size:34px; }
  .polymer-field { width:94%; min-height:280px; }
  .temperature-control { left:22px; right:22px; bottom:22px; gap:10px; }
  .interaction-panel { margin-top:22px; }
  .interaction-copy p { font-size:12px; }
  .computational-stage { min-height:610px; }
  .computation-panel { padding:26px 16px 20px; }
  .workflow-svg { min-height:300px; }
  .workflow-heading strong { font-size:12px; }
  .workflow-meta { grid-template-columns:1fr; }
  .workflow-meta span { min-height:auto; }
  .timeline-line { left:20px; }
  .timeline-item { grid-template-columns:40px 1fr; }
  .timeline-date { display:none; }
  .timeline-dot { grid-column:1; }
  .timeline-item > div:last-child { grid-column:2; }
  .publication { grid-template-columns:34px 1fr; gap:10px; padding:22px 4px; }
  .publication-link { grid-column:2; margin-top:8px; }
  .experience-role { grid-template-columns:1fr; padding:28px 2px; }
  .experience-date,.experience-main,.experience-side { grid-column:1; }
  .experience-side { grid-template-columns:1fr; }
  .experience-impact { grid-template-columns:1fr; }
  .methods-grid { grid-template-columns:1fr; }
  .methods-grid > div { min-height:180px; border-right:0; border-bottom:1px solid var(--line); }
  .methods-grid > div:last-child { border-bottom:0; }
  .contact-panel { padding:32px 22px; min-height:auto; }.contact-panel h2 { font-size:38px; }
  .footer { grid-template-columns:1fr; align-items:start; }.footer p { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

/* =========================================================
   V6 MOBILE COMPUTATIONAL WORKFLOW FIX
   Prevents SVG diagrams, descriptions, and metadata cards
   from overlapping on phones.
   ========================================================= */
@media (max-width:660px) {
  .project-computational {
    overflow:visible;
  }

  .computational-stage {
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  .computation-panel {
    position:relative !important;
    inset:auto !important;
    display:none;
    grid-template-rows:auto auto auto auto !important;
    gap:0;
    min-height:0;
    padding:28px 18px 22px;
    opacity:1;
    transform:none;
    pointer-events:none;
  }

  .computation-panel.active {
    display:grid;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  .workflow-heading {
    margin-bottom:18px;
  }

  .workflow-heading strong {
    font-size:14px;
    line-height:1.38;
  }

  .workflow-heading small {
    margin-top:6px;
    font-size:9px;
    line-height:1.5;
  }

  .workflow-svg {
    width:100%;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:760 / 420;
    margin:8px 0 18px;
    display:block;
    position:relative;
    z-index:1;
  }

  .workflow-description {
    position:relative;
    z-index:2;
    margin:0;
    padding:18px 0 0;
    border-top:1px solid var(--line);
    font-size:11px;
    line-height:1.72;
    background:transparent;
  }

  .workflow-meta {
    position:relative;
    z-index:2;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:18px;
  }

  .workflow-meta span {
    min-height:auto;
    padding:13px 14px;
  }

  .workflow-meta small {
    margin-bottom:6px;
  }

  .diagram-text {
    font-size:8px;
  }
}

@media (max-width: 760px) {
  .gel-network { width:96%; inset:2% 2% 12% 2%; }
}