/* Fonts are the visitor's own system fonts; none are downloaded (see README).
   Both languages use one stack, labels included: Latin letters and digits in Helvetica (Arial where it
   is missing), Chinese characters in PingFang SC, Hiragino Sans GB, Source Han / Noto Sans SC or
   Microsoft YaHei. English therefore looks the same on the English and Chinese pages; names keep the
   case they have on the Chinese pages (PerturbSeek, AlphaCell, bioRxiv) even inside labels set in capitals. */

/* ==========================================================================
   PERTURBMIND design system
   1. Tokens          5. Hero               9. Science            13. Footer
   2. Base            6. Sections, map      10. People            14. Motion
   3. Labels, figures 7. Cards and glyphs   11. Partnerships      15. Responsive
   4. Header, buttons 8. Bands              12. Contact
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Installed CJK fonts only (nothing is downloaded): Chinese quote marks keep their full-width form */
@font-face { font-family: 'CJK Quotes'; font-weight: 400; unicode-range: U+2018-2019, U+201C-201D; src: local('PingFangSC-Regular'), local('PingFang SC Regular'), local('NotoSansSC-Regular'), local('Noto Sans SC Regular'), local('SourceHanSansSC-Regular'), local('Microsoft YaHei'); }
@font-face { font-family: 'CJK Quotes'; font-weight: 500 700; unicode-range: U+2018-2019, U+201C-201D; src: local('PingFangSC-Medium'), local('PingFang SC Medium'), local('NotoSansSC-Medium'), local('Noto Sans SC Medium'), local('SourceHanSansSC-Medium'), local('Microsoft YaHei Bold'); }

:root {
  /* A cool base (ink, tech blue, metallic grey) with warm accents used only as focal points */
  --ink: #0a1230;
  --body: #222b47;
  --muted: #47526e;
  --label: #2a3870;
  --blue: #2450f0;
  --blue-deep: #1a36c4;
  --cyan: #0e9cbc;
  --teal: #0a8aa6;
  --metal: #6f7a92;
  --orange: #ff7a30;
  --orange-deep: #d9581a;
  --red: #ec4840;
  --violet: #8d5bff;
  --paper: #f7f9fc;
  --line: rgba(10, 18, 48, .16);
  --line-strong: rgba(10, 18, 48, .28);
  --nav-line: rgba(10, 18, 48, .4);
  --card-fill: rgba(255, 255, 255, .84);
  --wash: radial-gradient(46% 60% at 84% 6%, rgba(46, 91, 255, .13), transparent 70%), radial-gradient(38% 50% at 6% 0%, rgba(16, 167, 200, .12), transparent 70%), radial-gradient(26% 36% at 66% 44%, rgba(255, 122, 48, .07), transparent 70%);
  --tint: radial-gradient(60% 90% at 100% 0%, rgba(141, 91, 255, .1), transparent 60%), radial-gradient(55% 80% at 0% 100%, rgba(16, 167, 200, .11), transparent 62%), #eff3fe;
  /* Vivid surface for the contact blocks: tech blue, with a warm glow in one corner */
  --vivid: radial-gradient(70% 95% at 100% 100%, rgba(255, 122, 48, .34), transparent 56%), radial-gradient(60% 80% at 0% 0%, rgba(14, 156, 188, .34), transparent 60%), linear-gradient(135deg, #142cc0 0%, #1f44de 56%, #2552ea 100%);
  --vivid-body: #fff;
  /* Render frames: a white field with a faint cool rim, as in the PerturbSeek concept figure */
  --specimen: radial-gradient(90% 80% at 50% 45%, #fff 58%, #f7f9fe 100%);
  --specimen-line: rgba(10, 18, 48, .13);

  /* One stack for both languages, labels included, so English looks the same in the EN and 中文 versions:
     Latin and digits in Helvetica (else Arial), Chinese in 思源黑体 (Noto Sans SC), PingFang / YaHei as fallback. */
  --latin: Helvetica, 'Helvetica Neue', Arial;
  --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei';
  --display: var(--latin), var(--cjk), sans-serif;
  --sans: var(--display);
  --label-font: var(--display);

  /* Type scale. Headings are written to fit one line at desktop widths. */
  --fs-display: clamp(40px, 4.6vw, 70px);
  --fs-h1: clamp(32px, 3.6vw, 54px);
  --fs-h2: clamp(28px, 3.3vw, 50px);
  --fs-h3-lg: clamp(22px, 2vw, 30px);
  --fs-h3: clamp(19px, 1.45vw, 22px);
  --fs-card: 18px;
  --fs-lede: 18px;
  --fs-body: 16px;
  --fs-text: 15px;  /* one-line card descriptions */
  --fs-small: 14px;
  --fs-index: 14px;
  --fs-label: 12.5px;
  --fs-micro: 11.5px;
  --fs-nav: 12px;
  --lh-display: 1;
  --lh-h2: 1.08;
  --lh-h3: 1.2;
  --lh-body: 1.55;
  --ls-display: -.04em;
  --ls-h2: -.03em;
  --ls-h3: -.015em;
  --ls-index: .12em;
  --ls-label: .1em;

  /* Layout */
  --gutter: clamp(16px, 3.6vw, 72px);
  --chrome-gutter: clamp(12px, 2.4vw, 40px);
  --shell-max: 1560px;
  --section-y: clamp(96px, 9vw, 152px);
  --radius-card: 18px;
  --radius-m: 14px;
  --radius-s: 8px;
}

/* CJK glyphs fill the em box: smaller display sizes, open leading, near-zero tracking.
   Chinese rules key on data-language (set by i18n.js), not on lang, which browser translation
   tools may rewrite. */
html[data-language='zh'] {
  --fs-display: clamp(36px, 4.2vw, 62px);
  --fs-h1: clamp(30px, 3.2vw, 48px);
  --fs-h2: clamp(26px, 2.8vw, 40px);
  --fs-h3-lg: clamp(21px, 1.9vw, 28px);
  --fs-h3: clamp(18px, 1.35vw, 21px);
  --fs-card: 17px;
  --fs-lede: 17px;
  --fs-index: 15px;
  --fs-label: 13.5px;
  --fs-micro: 12.5px;
  --fs-nav: 13.5px;
  --lh-display: 1.18;
  --lh-h2: 1.25;
  --lh-h3: 1.4;
  --lh-body: 1.8;
  --ls-display: -.01em;
  --ls-h2: 0em;
  --ls-h3: 0em;
  --ls-index: .08em;
  --ls-label: .04em;
  --display: 'CJK Quotes', var(--latin), var(--cjk), sans-serif;  /* Chinese “ ” ‘ ’ stay full-width */
  --sans: var(--display);
}

/* 2. Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--wash) no-repeat, var(--paper); background-size: 100% 1240px, auto; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Chinese breaks only at punctuation, spaces and the phrase marks (U+200B) written into i18n.js. */
html[data-language='zh'] body { word-break: keep-all; overflow-wrap: break-word; }
/* Chinese: each clause of a multi-clause text is a .nw span (i18n.js), so lines end only after punctuation;
   headings balance their lines, body text is set pretty and kept to a readable measure */
.nw { white-space: nowrap; }
html[data-language='zh'] p { text-wrap: pretty; }
/* one-sentence texts that fit one line on a laptop keep it; other body text is kept to 32em */
html[data-language='zh'] p:not(:is(.lede-one, .model-closing, .partner-cta p, .contact-card > p, .footer-brand-panel p, .partner-block p, .step p, .pillar p, .worlds-list p, .press-item > p, .record-intro, .record-industry, .level-card > p, .next-copy > p, .who-lede, .figure-hint, .ladder-goal-bar, .principle-row-2 p)) { max-width: 32em; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin-top: 0; }
::selection { background: rgba(46, 91, 255, .16); }
:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
main [id], .tech-tabs { scroll-margin-top: calc(var(--chrome-gutter) + 84px); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; text-wrap: balance; }
html[data-language='zh'] h1, html[data-language='zh'] h2, html[data-language='zh'] h3 { line-break: strict; }
p { text-wrap: pretty; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin-bottom: 0; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.shell { width: min(var(--shell-max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.section { margin-top: var(--section-y); }

/* 3. Labels and figure language -------------------------------------------- */
.kicker { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--blue-deep); font: 500 var(--fs-index)/1.3 var(--label-font); letter-spacing: var(--ls-index); text-transform: uppercase; }
.kicker::before { content: ''; flex: 0 0 auto; width: 1.6em; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.eyebrow { display: flex; align-items: center; gap: .7em; margin: 0; color: var(--ink); font: 500 var(--fs-index)/1.3 var(--label-font); letter-spacing: var(--ls-index); text-transform: uppercase; }
.signal-dot { flex: 0 0 auto; width: .55em; height: .55em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .3em rgba(255, 122, 48, .16); }
.label, .card-meta, .paper-meta, .step small {
  font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--label);
}

/* 4. Header, navigation, buttons ------------------------------------------- */
.site-header { position: sticky; top: var(--chrome-gutter); z-index: 30; display: flex; align-items: center; gap: 8px; width: calc(100% - 2 * var(--chrome-gutter)); margin: var(--chrome-gutter) auto 0; }
/* content fades out as it scrolls under the floating header */
.site-header::before { content: ''; position: fixed; z-index: -1; top: 0; right: 0; left: 0; height: calc(2 * var(--chrome-gutter) + 52px); background: linear-gradient(180deg, rgba(247, 249, 252, .96) 50%, rgba(247, 249, 252, 0)); pointer-events: none; }
.brand { display: inline-flex; align-items: center; }
.site-header > .brand { position: relative; isolation: isolate; flex: 0 0 auto; width: 186px; padding: 4px 8px; }
/* The transparent logo sits straight on the page. A feathered glass halo (no edge, no border) keeps it
   legible when content scrolls underneath the sticky header. */
.site-header > .brand::before { content: ''; position: absolute; inset: -12px -20px; z-index: -1; border-radius: 999px; background: rgba(247, 249, 252, .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); pointer-events: none; }
.brand-logo { display: block; width: 100%; height: auto; }
/* Navigation and language switch as joined outlined cells, set in monospace capitals */
.language-switcher, .site-nav, .menu-toggle { border: 1px solid var(--nav-line); border-radius: var(--radius-s); background: rgba(250, 251, 253, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.language-switcher { display: inline-flex; align-items: stretch; margin-left: auto; overflow: hidden; color: var(--muted); font: 500 var(--fs-nav)/1 var(--sans); letter-spacing: .08em; white-space: nowrap; }
.language-switcher span { display: none; }
.language-switcher button { padding: 12px 12px; border: 0; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.language-switcher button + span + button { border-left: 1px solid var(--nav-line); }
.language-switcher button:hover, .language-switcher button:focus-visible { color: var(--ink); background: rgba(46, 91, 255, .06); outline: none; }
.language-switcher button.active { color: var(--blue-deep); background: rgba(46, 91, 255, .1); }
.site-nav { display: flex; }
.site-nav > a, .nav-drop > a { padding: 12px 16px; border-left: 1px solid var(--nav-line); color: var(--ink); font: 500 var(--fs-nav)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s; }
html[data-language='zh'] :is(.site-nav > a, .nav-drop > a) { letter-spacing: .04em; }
.site-nav > a:first-child { border-left: 0; border-radius: 7px 0 0 7px; }
.site-nav > a:nth-last-child(2) { border-radius: 0 7px 7px 0; }  /* News (the menu's motion button comes last) */
.site-nav > a:hover, .nav-drop > a:hover { background: rgba(46, 91, 255, .06); }
:is(.site-nav > a, .nav-drop > a)[aria-current='page'] { color: var(--blue-deep); background: rgba(46, 91, 255, .1); box-shadow: inset 0 -2px 0 var(--blue); }
/* Our tech opens a menu of its models (AlphaCell, and a place kept for those coming); on phones the two
   entries sit under it in the menu */
.nav-drop { position: relative; display: flex; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 8px; }
.nav-caret { width: 8px; height: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 40; transform: translateX(-50%); display: none; min-width: 264px; padding: 8px; border: 1px solid var(--nav-line); border-radius: var(--radius-s); background: rgba(250, 251, 253, .98); box-shadow: 0 18px 40px -24px rgba(10, 18, 48, .45); }
.nav-menu::before { content: ''; position: absolute; top: -9px; right: 0; left: 0; height: 9px; }  /* keeps the menu open as the pointer moves down to it */
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: grid; gap: 4px; }
.nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu a { display: grid; gap: 4px; padding: 12px 16px; border-radius: 6px; color: var(--ink); transition: background .2s; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(46, 91, 255, .07); }
.nav-menu b { color: var(--ink); font: 500 var(--fs-small)/1.2 var(--sans); white-space: nowrap; }
.nav-menu a + a b { color: var(--muted); }
.nav-menu span { color: var(--muted); font-size: var(--fs-label); white-space: nowrap; }
.menu-toggle { display: none; padding: 8px 12px; font: 500 var(--fs-nav)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-toggle span { white-space: nowrap; }
.menu-toggle i, .menu-toggle i::after { display: block; width: 18px; height: 1px; background: currentColor; content: ''; transition: transform .25s; }
.menu-toggle i { margin-top: 4px; }
/* Pause / play for every animation on the site (shown as an icon in the header, as a row in the phone menu).
   Animations play by default; a pause lasts for the browsing session. */
.motion-toggle { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: calc(var(--fs-nav) + 26px); padding: 0; border: 1px solid var(--nav-line); border-radius: var(--radius-s); background: rgba(250, 251, 253, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.motion-toggle:hover { background: rgba(46, 91, 255, .06); color: var(--blue-deep); }
.motion-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mt-icon { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--mt) center / contain no-repeat; mask: var(--mt) center / contain no-repeat; --mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 1.5h2.2v9H2.5zM7.3 1.5h2.2v9H7.3z'/%3E%3C/svg%3E"); }
.mt-play { display: none; }
html[data-motion='off'] .mt-pause { display: none; }
html[data-motion='off'] .mt-play { display: inline; }
html[data-motion='off'] .mt-icon { --mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.4l7.2 4.6L3 10.6z'/%3E%3C/svg%3E"); }
.site-nav .motion-toggle-menu { display: none; }

/* Buttons carry their arrow in a separate cell */
.button { display: inline-flex; align-items: center; min-height: 48px; padding-left: 24px; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-s); font-size: var(--fs-body); font-weight: 500; line-height: 1.2; white-space: nowrap; transition: transform .25s, background .25s, color .25s, border-color .25s; }
.button > span { align-self: stretch; display: flex; align-items: center; margin-left: 20px; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .28); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(46, 91, 255, .7); }
.button-primary:hover { background: var(--blue-deep); box-shadow: 0 12px 24px -12px rgba(31, 63, 214, .8); }
.button-light { background: #fff; color: var(--ink); box-shadow: 0 8px 18px -10px rgba(10, 18, 48, .45); }
.button-light > span { border-left-color: var(--line); }
.button-outline { border-color: var(--nav-line); background: rgba(255, 255, 255, .6); color: var(--ink); }
.button-outline > span { border-left-color: var(--nav-line); }
.button-outline:hover { border-color: var(--ink); background: #fff; }
.text-link { display: inline-flex; align-items: center; gap: .45em; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--blue-deep); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
/* Line icons from inline SVG masks: arrows render the same in every font and weight */
.ico { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -.14em; }
.ico-ne { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M5 11L11 5M6.5 5H11V9.5'/%3E%3C/svg%3E"); }
.ico-e { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M3 8H13M9 4L13 8L9 12'/%3E%3C/svg%3E"); }
.ico-s { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M8 3V13M4 9L8 13L12 9'/%3E%3C/svg%3E"); }
a > .ico, .text-link > .ico { margin-left: .1em; }
.button > span .ico { width: 14px; height: 14px; }

/* 5. Hero ------------------------------------------------------------------ */
/* A title band over a two-cell body, drawn as outlined cells. On the home page the render is not
   framed: it rises out of its cell across the band's edge. */
.hero { position: relative; padding-top: clamp(24px, 2.6vw, 40px); }
.hero-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; }
.hero-cell { position: relative; z-index: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: clamp(24px, 3.2vw, 56px); background: rgba(255, 255, 255, .55); }
.hero-head { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(24px, 3vw, 48px); }
.hero-head h1 { margin: 0; }
.hero-page .hero-head h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: var(--ls-h2); }
html[data-language='zh'] .hero-page .hero-head h1 { line-height: 1.25; }
.hero-intro { display: flex; flex-direction: column; gap: 24px; }
.hero-dek { max-width: 34em; margin: 0; color: var(--body); font-size: var(--fs-lede); }
.hero-facts { max-width: 30em; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hero-facts li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-card); font-weight: 500; }
.hero-facts .n { flex: 0 0 2em; color: var(--blue-deep); font-size: var(--fs-small); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.hero-facts i { flex: 0 0 auto; width: 8px; height: 8px; margin-right: -4px; border-radius: 50%; background: var(--c); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero-page .hero-actions { margin-top: auto; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; width: fit-content; margin-top: auto; color: var(--ink); font: 500 var(--fs-label)/1.2 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; }
.scroll-cue > span { color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.scroll-cue .ico { color: var(--blue); animation: cue 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: var(--blue-deep); }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.route-row { display: grid; grid-template-columns: repeat(3, auto); width: fit-content; max-width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nav-line); border-radius: var(--radius-s); list-style: none; }
.route-row li { min-width: 0; }
.route-row li + li { border-left: 1px solid var(--nav-line); }
.route-row a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; color: var(--ink); font: 500 var(--fs-label)/1.2 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.route-row a::after { content: ''; flex: 0 0 auto; width: 12px; height: 12px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M5 11L11 5M6.5 5H11V9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M5 11L11 5M6.5 5H11V9.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.route-row a:hover { background: rgba(46, 91, 255, .07); color: var(--blue-deep); }
.route-label { margin: 0 0 8px; color: var(--muted); font: 500 var(--fs-micro)/1 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; }
/* home: the title band sets the headline at its foot; the cell render rises out of the cell below
   and crosses the band's lower edge */
.hero-home { --head-h: clamp(220px, 18vw, 290px); }
.hero-home .hero-head { z-index: auto; justify-content: space-between; min-height: var(--head-h); }
/* the headline stays above the cell render where the render rises across the band */
.hero-home .hero-head > * { position: relative; z-index: 3; }
/* the headline ends before the cell render rises into the band (i18n.js scales it to stay on one line) */
@media (min-width: 901px) { .hero-home .hero-head h1 { max-width: 60%; white-space: nowrap; } }
.hero-figure { position: relative; min-height: clamp(400px, 31vw, 520px); }
.hero-figure > .visual { inset: calc(28px - var(--head-h)) calc(-1 * var(--gutter)) -50px 5%; z-index: 2; }
/* coloured blooms behind the render: depth without a frame */
.hero-home::before { content: ''; position: absolute; z-index: 0; right: 2%; top: 26%; width: min(58vw, 860px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(46, 91, 255, .16), rgba(16, 167, 200, .08) 55%, transparent 72%); pointer-events: none; }
.hero-home::after { content: ''; position: absolute; z-index: 0; right: 32%; bottom: 4%; width: min(22vw, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 48, .14), transparent 70%); pointer-events: none; }
/* inner pages: the render in a white frame, without labels */
.hero-media { position: relative; min-height: clamp(420px, 38vw, 560px); overflow: hidden; border: 1px solid var(--specimen-line); border-radius: var(--radius-card); background: var(--specimen); }

/* Procedural renders (visuals.js) */
.visual { position: absolute; inset: 0; z-index: 0; cursor: grab; touch-action: pan-y; }
.visual:active { cursor: grabbing; }
.visual-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the five disciplines (team): dot colours match the motifs in the team render */
.lg-compbio { --c: #1098ac; } .lg-ml { --c: #2860e0; } .lg-singlecell { --c: #7058e6; } .lg-drug { --c: #f26e42; } .lg-product { --c: #606c84; }

/* 6. Sections -------------------------------------------------------------- */
/* Every section opens with a full-width head so the heading has room for one line. */
.section-head { margin-bottom: clamp(40px, 4.4vw, 64px); }
.section-head h2 { margin-top: clamp(24px, 2.4vw, 32px); }
.section-lede { max-width: 36em; margin: 20px 0 0; color: var(--body); font-size: var(--fs-lede); }
html[data-language='zh'] .section-lede { max-width: 34em; }
/* The home page tells one story in six chapters: the challenge → our approach → what we are building →
   who we are → updates → contact. Each chapter has one visual, and the visuals share one
   language: a cell state on the virtual cell space. */
/* 01 · the challenge: the copy over a field of possible experiments that recedes to the horizon */
.challenge { position: relative; display: grid; align-content: start; min-height: clamp(560px, 44vw, 720px); overflow: hidden; border: 1px solid var(--specimen-line); border-radius: var(--radius-card); background: var(--specimen); }
.challenge-figure { position: absolute; inset: 0; }
.challenge-copy { position: relative; z-index: 1; max-width: none; padding: clamp(32px, 4vw, 64px); }
/* a white halo around the letters keeps the copy legible over the field without washing the figure out */
.challenge-copy > * { text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 22px rgba(255, 255, 255, .9); }
.challenge-copy h2 { margin: 24px 0 16px; }
.challenge-copy > p:not(.kicker) { max-width: 36em; margin: 0; color: var(--body); font-size: var(--fs-lede); }
/* the challenge's two parts are named on the figure; visuals.js keeps each name over what it names */
.fig-tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fig-tag { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font: 500 var(--fs-small)/1.3 var(--sans); white-space: nowrap; visibility: hidden; box-shadow: 0 6px 16px -12px rgba(10, 18, 48, .45); }
.fig-tag.is-placed { visibility: visible; }
.fig-tag::before { content: ''; width: 9px; height: 9px; border: 1.5px solid #283044; border-radius: 50%; background: #fff; box-sizing: border-box; }
.fig-tag-measured::before { border-color: var(--blue-deep); background: var(--blue-deep); }
/* 02 · our approach: the figure stays in view while the three choices scroll past; the reader can drag the
   cell, and it follows the learned field */
.scrolly { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(32px, 4vw, 64px); }
.scrolly-sticky { position: sticky; top: calc(var(--chrome-gutter) + 88px); }
.flow-frame { aspect-ratio: 5 / 4; }
.flow-frame .visual { cursor: grab; touch-action: pan-y; }
.figure-hint { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--label); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; transition: opacity .4s; }
.figure-hint::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(36, 80, 240, .16); }
.scrolly[data-step='1'] .figure-hint { opacity: 0; }
.scrolly-steps { margin: 0; padding: 0; list-style: none; }
.scrolly-steps li { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding: 32px 0 32px 32px; border-left: 2px solid var(--line); transition: border-color .4s; }
.scrolly-steps li.is-active { border-left-color: var(--blue); }
.scrolly-steps .n { color: var(--blue-deep); font: 500 var(--fs-label)/1 var(--label-font); letter-spacing: var(--ls-label); font-variant-numeric: tabular-nums; }
.scrolly-steps h3 { margin: 16px 0 16px; font-size: var(--fs-h3-lg); letter-spacing: var(--ls-h2); }
.scrolly-steps p { max-width: 26em; margin: 0; color: var(--body); font-size: var(--fs-lede); }
/* PerturbSeek map, drawn as a still architecture diagram: numbered layers from the foundations (01) up to
   the applications (04), joined by arrows. */
.eco-stack { --eco-gap: 40px; display: grid; gap: 16px; }
.eco-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px 28px; padding: 20px 24px; }
.eco-apps { position: relative; z-index: 2; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--card-fill); box-shadow: 0 1px 2px rgba(10, 18, 48, .04), 0 14px 34px -26px rgba(10, 18, 48, .26); }
.eco-core { position: relative; z-index: 1; padding-top: 12px; border: 1px solid rgba(36, 80, 240, .55); border-radius: var(--radius-card); background: radial-gradient(circle, rgba(36, 80, 240, .17) 0 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(180deg, rgba(36, 80, 240, .08), rgba(14, 156, 188, .04) 60%, transparent), var(--card-fill); box-shadow: 0 18px 40px -30px rgba(26, 54, 196, .55); }
.eco-core > .eco-row + .eco-row { border-top: 1px solid var(--line); }
.eco-name { position: absolute; top: -13px; left: 24px; margin: 0; padding: 4px 12px; border-radius: 6px; background: var(--blue); color: #fff; font: 500 var(--fs-label)/1.2 var(--label-font); letter-spacing: var(--ls-label); box-shadow: 0 6px 14px -8px rgba(36, 80, 240, .8); }
.eco-label { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--ink); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.eco-n { color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.eco-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--eco-gap); margin: 0; padding: 0; list-style: none; }
.eco-chips > li { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font-size: var(--fs-small); font-weight: 500; text-align: center; white-space: nowrap; box-shadow: 0 6px 16px -14px rgba(10, 18, 48, .5); }
/* line icons (CSS masks): orange for the applications, blue inside PerturbSeek */
.eco-ico { flex: 0 0 auto; width: 18px; height: 18px; background: var(--blue); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.eco-apps .eco-ico { background: var(--orange-deep); }
.ei-mech { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='18' cy='6.5' r='2.4'/%3E%3Ccircle cx='12.5' cy='17.5' r='2.8'/%3E%3Cpath d='M8.4 7.1l7.2-.4M7.2 9.1l3.9 6.1M16.9 8.8l-3.1 6.3'/%3E%3C/svg%3E"); }
.ei-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4'/%3E%3C/svg%3E"); }
.ei-drug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l6.4 3.7v7.4L12 18.6l-6.4-3.7V7.5z'/%3E%3Ccircle cx='12' cy='11.2' r='2.4'/%3E%3Cpath d='M12 18.6v2.6M18.4 7.5l2.3-1.3'/%3E%3C/svg%3E"); }
.ei-build { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l6-3.5 6 3.2 6-3.7'/%3E%3Cpath d='M3 15.5l6-3.5 6 3.2 6-3.7'/%3E%3Cpath d='M3 9.5v6M9 6v6M15 9.2v6M21 5.5v6'/%3E%3Cpath d='M3 15.5l6 3.5 6-3 6 3'/%3E%3C/svg%3E"); }
.ei-simulate { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='18' r='2.2'/%3E%3Cpath d='M7 17c5-1 4.5-8.6 9.6-9.6'/%3E%3Ccircle cx='19' cy='6.6' r='2.6'/%3E%3C/svg%3E"); }
.ei-identify { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11.5' cy='12' r='8'/%3E%3Cpath d='M7.8 12.2l2.6 2.6 5.2-5.4'/%3E%3C/svg%3E"); }
.ei-omics { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M6 17.5v-6M10 17.5V6M14 17.5V9.5M18 17.5V4'/%3E%3C/svg%3E"); }
.ei-geometry { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18.5L9 5.5l6.5 8L4 18.5zM9 5.5l11 .5-4.5 7.5L20 18.5H4'/%3E%3C/svg%3E"); }
.ei-theory { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cellipse cx='12' cy='12' rx='3.6' ry='8.5'/%3E%3Cpath d='M3.5 12h17'/%3E%3C/svg%3E"); }
/* links between layers: one arrow badge on each boundary (apps | models | engine | foundations), centred on the
   chip area and clear of every box, so it reads as one layer feeding the next rather than box-to-box links */
.eco-stack { --eco-mid: calc(50% + 99px); }  /* centre of the chip column: (24px padding + 170px label + 28px gap − 24px) / 2 */
.eco-core > .eco-row { position: relative; }
.eco-apps::after, .eco-core > .eco-row + .eco-row::before {
  content: ''; position: absolute; left: var(--eco-mid); z-index: 3; width: 26px; height: 26px; margin-left: -13px; border: 1px solid rgba(36, 80, 240, .55); border-radius: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232450f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3.5M4 7.5L8 3.5l4 4'/%3E%3C/svg%3E") 50% 50% / 14px 14px no-repeat, #fff;
  box-shadow: 0 4px 10px -6px rgba(36, 80, 240, .6);
}
.eco-apps::after { top: calc(100% + 8px); transform: translateY(-50%); }  /* in the gap between the applications card and PerturbSeek */
.eco-core > .eco-row + .eco-row::before { top: -13.5px; }  /* on the divider between two PerturbSeek layers */
/* the engine: build → simulate → identify */
.eco-flow > li + li::before {
  content: ''; position: absolute; top: 50%; right: calc(100% + 3px); width: calc(var(--eco-gap) - 6px); height: 12px; margin-top: -6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 5L0 0l2.2 5L0 10z' fill='%232450f0'/%3E%3C/svg%3E") 100% 50% / 8px 10px no-repeat, linear-gradient(90deg, rgba(36, 80, 240, .22), rgba(36, 80, 240, .8)) 0 50% / calc(100% - 6px) 2px no-repeat;
}
/* the model row: AlphaCell, the model in use with its four versions, and the models still in development */
.eco-models > li.eco-model { grid-column: span 2; }
.eco-chips > li.eco-model, .eco-chips > li.eco-planned { display: block; padding: 0; border-radius: var(--radius-m); white-space: normal; }
.eco-model > a, .eco-planned > a { display: grid; align-content: center; justify-items: center; gap: 4px; height: 100%; padding: 16px 20px; }
.eco-planned > a:hover strong { color: var(--blue-deep); }
.eco-chips > li.eco-model { border-color: rgba(36, 80, 240, .6); background: linear-gradient(160deg, #fff, #eaf0ff); box-shadow: 0 10px 24px -18px rgba(36, 80, 240, .75); transition: transform .25s, box-shadow .25s; }
.eco-chips > li.eco-model:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(36, 80, 240, .85); }
.eco-model strong { display: flex; align-items: center; gap: 8px; color: var(--blue-deep); font-size: var(--fs-card); font-weight: 600; }
.eco-model strong::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 48, .18); }
.eco-model-head { display: grid; justify-items: center; gap: 4px; }
.eco-model-head > span, .eco-planned span { color: var(--muted); font-size: var(--fs-small); }
.eco-more { margin-top: 24px; }
.eco-chips > li.eco-planned { border: 1px dashed rgba(36, 80, 240, .5); background: rgba(255, 255, 255, .6); }
.eco-planned strong { color: var(--ink); font-size: var(--fs-card); font-weight: 500; }
@media (max-width: 1280px) { .eco-planned strong { font-size: var(--fs-small); } }

/* 7. Cards and glyphs ------------------------------------------------------ */
.card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); box-shadow: 0 1px 2px rgba(10, 18, 48, .03), 0 14px 34px -26px rgba(10, 18, 48, .22); }
.card-grid { display: grid; gap: 16px; }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
a.card { transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; }
a.card:hover { transform: translateY(-2px); border-color: rgba(46, 91, 255, .35); background: #fff; box-shadow: 0 18px 40px -28px rgba(31, 63, 214, .45); }
/* a schematic inside a card: a white field and a hairline frame; the drawing comes from visuals.js */
.glyph { position: relative; height: 150px; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--specimen-line); border-radius: 12px; background: var(--specimen); }
.glyph .visual { cursor: default; }
.glyph-tall { height: 190px; }
.glyph-short { height: 120px; }

.media-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--specimen-line); border-radius: var(--radius-m); background: var(--specimen); }
.card-meta { display: flex; justify-content: space-between; gap: 12px; }
.spec-list { margin: 20px 0 0; padding: 0; list-style: none; color: var(--label); font: 400 var(--fs-label)/1.35 var(--label-font); }
.spec-list li { padding: 8px 0; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-list li::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4.5 3V9H12.5M9.5 6L12.5 9L9.5 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4.5 3V9H12.5M9.5 6L12.5 9L9.5 12'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-language='zh'] .spec-list li { white-space: normal; }
/* the three engines read as one figure: numbered cells joined by arrows */
.engine-row { position: relative; }
.engine-row .card + .card::before { content: ''; position: absolute; top: 34%; left: -14px; z-index: 2; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232e5bff' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M3 8H13M9 4L13 8L9 12'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 4px 12px -6px rgba(10, 18, 48, .25); }

/* Media coverage (news): a timeline, oldest first. Each headline has the full width, so it stays on one line. */
.press-list { position: relative; margin: 0; padding: 0 0 0 48px; list-style: none; }
.press-list::before { content: ''; position: absolute; top: 34px; bottom: 34px; left: 7px; width: 2px; background: linear-gradient(var(--line-strong), var(--blue)); }
.press-entry { position: relative; }
.press-entry::before { content: ''; position: absolute; top: 31px; left: -44px; width: 12px; height: 12px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; box-sizing: border-box; }
.press-entry:last-child::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(36, 80, 240, .16); }
.press-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 72px 32px 0; border-bottom: 1px solid var(--line-strong); }
.press-entry:first-child .press-item { border-top: 1px solid var(--line-strong); }
.press-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 0; color: var(--label); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; }
.press-meta time { color: var(--ink); font-variant-numeric: tabular-nums; }
.press-meta span:first-of-type { color: var(--blue-deep); }
.press-item h3 { margin: 8px 0 0; font-size: var(--fs-h3-lg); letter-spacing: var(--ls-h3); transition: color .25s; }
.press-item > p:not(.press-meta) { margin: 0; color: var(--muted); font-size: var(--fs-text); }
.press-arrow { position: absolute; top: 50%; right: 12px; width: 22px; height: 22px; color: var(--blue); transform: translateY(-50%); transition: transform .25s; }
.press-item:hover h3 { color: var(--blue-deep); }
.press-item:hover .press-arrow { transform: translate(3px, calc(-50% - 3px)); }
.press-list::after { content: ''; position: absolute; top: 34px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(36, 80, 240, .18), 0 0 12px rgba(36, 80, 240, .7); animation: rail-run 5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes rail-run { 0% { top: 34px; opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { top: calc(100% - 42px); opacity: 0; } }
.press-compact .press-item { gap: 8px; padding: 24px 64px 24px 0; }
.press-compact .press-entry::before { top: 29px; }
.press-compact .press-item h3 { margin: 0; font-size: var(--fs-h3); }
.updates-more { margin-top: 24px; }

/* the last block of each inner page: one card to the next chapter of the story */
.next-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px) auto; align-items: center; gap: 32px; padding: 24px 32px 24px 40px; }
.next-copy .label { color: var(--blue-deep); }
.next-title { display: flex; align-items: baseline; gap: 16px; margin: 16px 0 8px; color: var(--ink); font: 500 var(--fs-h2)/var(--lh-h2) var(--display); letter-spacing: var(--ls-h2); }
.next-title span { color: var(--blue-deep); font: 500 var(--fs-index)/1 var(--label-font); letter-spacing: var(--ls-index); font-variant-numeric: tabular-nums; }
.next-title + p { margin: 0; color: var(--muted); font-size: var(--fs-text); }  /* the line under the title, where a card has one */
.next-glyph { height: 168px; margin: 0; }
.next-arrow { width: 32px; height: 32px; color: var(--blue); transition: transform .25s; }
a.next-card:hover .next-arrow { transform: translateX(4px); }

.pillar { display: flex; flex-direction: column; min-height: 300px; padding: 24px 24px 24px; }
.pillar .glyph { margin: 16px 0 16px; }
.pillar h3 { margin: 0 0 8px; }
.pillar p { margin: 0; color: var(--muted); font-size: var(--fs-text); }
.pillar .spec-list { margin-top: 16px; }

/* Design principles (tech): four short statements set like a results line */
.principle-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-strong); }
.principle-row > div { padding: 24px 24px 28px; border-left: 1px solid var(--line); }
.principle-row > div:first-child { padding-left: 0; border-left: 0; }
.principle-row .n { color: var(--blue-deep); font-size: var(--fs-label); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.principle-row h3 { margin: 16px 0 8px; font-size: var(--fs-card); white-space: nowrap; }
.principle-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.principle-row.principle-row-2 p { max-width: none; }
.principle-row p { max-width: 24em; margin: 0; color: var(--muted); font-size: var(--fs-text); }

/* Feature (paper) card */
.feature-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); }
.feature-media { position: relative; min-height: 500px; border-right: 1px solid var(--specimen-line); background: var(--specimen); }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(32px, 3.4vw, 56px); }
.paper-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; }
/* the DOI stays on one line; in a narrow column the year moves below it */
.paper-meta a { border-bottom: 1px solid currentColor; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.paper-meta a:hover { color: var(--blue-deep); }
.feature-copy h3 { margin: auto 0 16px; padding-top: 48px; font-size: var(--fs-h3-lg); letter-spacing: var(--ls-h2); }
.feature-copy p { max-width: 520px; color: var(--muted); }
.feature-copy .button { margin-top: 16px; }

/* 8. Bands ----------------------------------------------------------------- */
.band-tint { position: relative; margin-top: var(--section-y); padding-block: clamp(96px, 9vw, 152px); background: var(--tint); }
.band-tint > * { position: relative; }
.band-figure { position: relative; overflow: hidden; aspect-ratio: 21 / 8; border: 1px solid var(--specimen-line); border-radius: var(--radius-card); background: var(--specimen); }
.band-figure .visual { cursor: default; }
.concept-figure { margin-bottom: clamp(40px, 4vw, 64px); }
.concept-frame { overflow: hidden; border: 1px solid var(--specimen-line); border-radius: var(--radius-card); background: #fff; }
.concept-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1800 / 691; object-fit: cover; }
.band-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4.6vw, 80px); }
.band-split .media-frame { aspect-ratio: 16 / 11; }
@media (min-width: 901px) { .band-split.worlds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }  /* each world's line stays on one line */
/* how we work (team): the digital, living and physical worlds, each with a colour from the render */
.worlds-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.worlds-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 24px 0 24px; border-bottom: 1px solid var(--line); }
.worlds-list .n { padding-top: 4px; color: var(--blue-deep); font-size: var(--fs-label); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.worlds-list h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.worlds-list h3::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.worlds-list li:nth-child(1) { --c: #2860e0; } .worlds-list li:nth-child(2) { --c: #7058e6; } .worlds-list li:nth-child(3) { --c: #1098ac; }
.worlds-list p { margin: 0; color: var(--muted); font-size: var(--fs-text); }

/* 9. Science (tech page) --------------------------------------------------- */
.pipeline-frame { aspect-ratio: 21 / 7.4; margin-top: 16px; }
.pipeline-frame .pipeline-steps { position: absolute; z-index: 3; top: 79%; right: 0; left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; pointer-events: none; color: var(--ink); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* L1–L3 as a ladder of capabilities (Our tech, AlphaCell): each level shows whether the cell, the
   perturbation and the pairing were seen in training. Each level's label keeps one colour (blue, violet,
   teal); the goal is deep blue. */
.ladder-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
.ladder-figure { aspect-ratio: auto; min-height: 440px; }
.ladder-steps { position: relative; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 8px; margin: 0; padding: 0 0 0 32px; list-style: none; }
.ladder-steps::before, .ladder-steps::after { content: ''; position: absolute; top: 32px; bottom: 32px; left: 7px; width: 2px; border-radius: 2px; background: var(--line-strong); }
.ladder-steps::after { background: linear-gradient(to top, var(--blue), var(--violet)); transform: scaleY(var(--p, .08)); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.ladder-steps li:nth-child(1) { --c: #2450f0; } .ladder-steps li:nth-child(2) { --c: #5530cc; } .ladder-steps li:nth-child(3) { --c: #04667f; } .ladder-steps li:nth-child(4) { --c: var(--blue-deep); }
.ladder-steps button { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 16px; width: 100%; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card-fill); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s, background .3s; }
.ladder-steps button::before { content: ''; position: absolute; top: 50%; left: -31px; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--line-strong); border-radius: 50%; background: #fff; box-sizing: border-box; transition: border-color .3s, background .3s; }
.ladder-steps .lv { grid-row: span 2; color: var(--c); font: 500 var(--fs-h3)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ladder-steps strong { font-size: var(--fs-card); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.ladder-steps button > span:last-child { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; white-space: nowrap; }
.ladder-steps button:hover { border-color: var(--c); }
.ladder-steps button[aria-pressed='true'] { border-color: var(--c); background: #fff; box-shadow: 0 14px 30px -22px var(--c); }
.ladder-steps button[aria-pressed='true']::before { border-color: var(--c); background: var(--c); }
.ladder-goal button { border-style: dashed; border-color: rgba(26, 54, 196, .45); }
/* L1–L4 figures (visuals.js "levels"): a grid of cell types (columns) × perturbations (rows). The axis
   names sit where the render puts them (--ax-*). On the home page the level is stated above the figure
   (the ladder carries data-level): a filled marker for seen in training, a hollow dashed one for not
   seen, half and half for the goal (any); the legend sits below. */
.lv-axis { position: absolute; z-index: 1; font: 600 var(--fs-small)/1.2 var(--sans); white-space: nowrap; pointer-events: none; }
.lv-axis-cell { top: var(--ax-cell-y, 88%); left: var(--ax-cell-x, 50%); color: var(--blue-deep); transform: translate(-50%, 0); }
.lv-axis-pert { top: var(--ax-pert-y, 12%); left: var(--ax-pert-x, 12%); color: #b0440c; transform: translate(-50%, -100%); }
.ladder-fig { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ladder-fig .ladder-figure { flex: 1 1 auto; }
.lv-status { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; color: var(--body); font-size: var(--fs-small); }
.lv-st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lv-st > span { color: var(--ink); font-weight: 500; }
.lv-st i { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.lv-st-cell { color: var(--blue-deep); } .lv-st-pert { color: #b0440c; } .lv-st-pair { color: #4b5568; }
.lv-st b { display: none; color: var(--body); font-weight: 400; }
.lv-st .lv-yes { display: inline; }
.ladder[data-level='3'] .lv-status .lv-st-cell .lv-yes, .ladder[data-level='2'] .lv-status .lv-st-pair .lv-yes, .ladder[data-level='3'] .lv-status .lv-st-pair .lv-yes, .ladder[data-level='4'] .lv-status .lv-yes { display: none; }
.ladder[data-level='3'] .lv-status .lv-st-cell .lv-no, .ladder[data-level='2'] .lv-status .lv-st-pair .lv-no, .ladder[data-level='3'] .lv-status .lv-st-pair .lv-no, .ladder[data-level='4'] .lv-status .lv-any { display: inline; }
.ladder[data-level='3'] .lv-status .lv-st-cell i, .ladder[data-level='2'] .lv-status .lv-st-pair i, .ladder[data-level='3'] .lv-status .lv-st-pair i { background: #fff; border-style: dashed; }
.ladder[data-level='4'] .lv-status i { background: linear-gradient(90deg, currentColor 50%, #fff 50%); }
/* the legend: what a tile is, then the three ways a tile can look */
.lv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; color: var(--body); font-size: var(--fs-small); }
.lv-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lv-legend span:not(.lv-tile)::before { content: ''; width: 14px; height: 14px; border: 1.5px solid #4b5568; border-radius: 3px; box-sizing: border-box; }
.lv-tile { color: var(--ink); font-weight: 500; }
.lv-legend span.lv-seen::before { background: #7f8ba6; }
.lv-legend span.lv-unseen::before { background: #fff; border-style: dashed; }
.lv-legend span.lv-target::before { border: 0; background: linear-gradient(135deg, #2450f0, #5530cc 38%, #04667f 66%, #b0440c); }
.lv-legend-bar { margin: 0 0 16px; }
/* 06 · who we are: the disciplines as chips; pointing at one lights its motif in the render */
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
.who-lede { margin: 0 0 16px; color: var(--body); font-size: var(--fs-lede); }
.who-facts { max-width: none; margin: 0 0 24px; }
.who-record { margin: 0 0 24px; color: var(--muted); font-size: var(--fs-text); }
.who-figure { aspect-ratio: 16 / 11; }
/* the story's short paragraphs set balanced lines, so none ends on a lone word or character */
html:not([data-language='zh']) :is(.scrolly-steps, .challenge-copy, .who-copy, .next-copy, .coming-copy) p { text-wrap: balance; }
.hero-facts li[data-focus] { outline: none; cursor: default; transition: background .2s; }
.hero-facts li.is-active, .hero-facts li[data-focus]:focus-visible { background: linear-gradient(90deg, rgba(46, 91, 255, .07), transparent); }

/* 10. People and roles ----------------------------------------------------- */
.discipline { display: flex; flex-direction: column; min-height: 250px; padding: 16px 16px 24px; }
.discipline .glyph { margin: 12px 0 16px; height: 124px; }
.discipline strong { margin-top: auto; font-size: clamp(16px, 1.25vw, 19px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }

/* 11. Partnerships --------------------------------------------------------- */
.partner-block { display: flex; flex-direction: column; min-height: 360px; padding: 24px clamp(24px, 2.6vw, 40px) 32px; }
.partner-block .glyph { margin: 0 0 16px; height: 190px; }
/* the four partners named under the research-collaboration render (positions match visuals.js) */
.glyph-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.glyph-tags span { position: absolute; top: 76%; transform: translateX(-50%); color: var(--ink); font: 500 var(--fs-label)/1.2 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.glyph-tags span:nth-child(1) { left: 12%; } .glyph-tags span:nth-child(2) { left: 32%; } .glyph-tags span:nth-child(3) { left: 68%; } .glyph-tags span:nth-child(4) { left: 88%; }
/* a narrow card: smaller English names, alternately above and below their partner so none collide */
.partner-block .glyph { container-type: inline-size; }
@container (max-width: 470px) {
  html:not([data-language='zh']) .glyph-tags span { font-size: var(--fs-micro); letter-spacing: .02em; text-transform: none; }
  html:not([data-language='zh']) .glyph-tags span:nth-child(even) { top: 7%; }
  html:not([data-language='zh']) .glyph-tags span:nth-child(1) { transform: translateX(-40%); }
  html:not([data-language='zh']) .glyph-tags span:nth-child(4) { transform: translateX(-62%); }
}
.partner-block .label { color: var(--blue-deep); }
.partner-block h3 { margin: 12px 0 8px; font-size: var(--fs-h3-lg); }
.partner-block p { margin: 0; color: var(--muted); font-size: var(--fs-text); }
.step { display: flex; flex-direction: column; min-height: 300px; padding: 16px 20px 24px; }
.step .glyph { margin: 12px 0 12px; height: 124px; }
.step small { display: block; margin-top: 16px; color: var(--blue-deep); }
.step h3 { margin: 8px 0 8px; font-size: var(--fs-card); white-space: nowrap; }
.step p { margin: 0; color: var(--muted); font-size: var(--fs-text); }
/* Our tech: one tab per model; the address picks the tab (script.js) */
.tech-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 4vw, 64px); overflow: hidden; border: 1px solid var(--nav-line); border-radius: var(--radius-card); background: rgba(250, 251, 253, .7); }
.tech-tab { display: grid; gap: 8px; padding: 24px 32px; color: var(--ink); transition: background .2s, box-shadow .2s; }
.tech-tab + .tech-tab { border-left: 1px solid var(--nav-line); }
.tech-tab b { font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: var(--ls-h3); white-space: nowrap; }
.tech-tab span { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.tech-tab:hover { background: rgba(46, 91, 255, .05); }
.tech-tab[aria-selected='true'] { background: #fff; box-shadow: inset 0 -3px 0 var(--blue); }
.tech-tab[aria-selected='true'] b { color: var(--blue-deep); }
.tab-panel[hidden] { display: none; }
.tab-panel > .section:first-child { margin-top: clamp(48px, 5vw, 80px); }
.coming { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 32px; padding: clamp(24px, 3.2vw, 48px); border-style: dashed; border-color: rgba(26, 54, 196, .45); }
.coming h2 { margin: 24px 0 16px; }
.coming-copy > p:not(.kicker) { max-width: 34em; margin: 0 0 24px; color: var(--body); font-size: var(--fs-lede); }
.coming-glyph { height: 220px; margin: 0; }
/* AlphaCell 1.0 model family */
.model-card { display: flex; flex-direction: column; min-height: 360px; padding: 16px 24px 24px; }
.model-card .glyph { margin: 12px 0 16px; height: 132px; }
.model-spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.model-spec strong { color: var(--ink); font: 500 var(--fs-h3-lg)/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.model-spec small { color: var(--label); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.model-card h3 { margin: 16px 0 8px; white-space: nowrap; }
.model-card p { margin: 0; color: var(--muted); font-size: var(--fs-text); }
.model-card .text-link { align-self: flex-start; margin-top: auto; padding-top: 16px; }
a.model-card:hover h3 { color: var(--blue-deep); }
.model-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.model-notes p { max-width: 36em; margin: 0; color: var(--body); }
.model-notes .label { margin-bottom: 8px; color: var(--blue-deep); }
/* track record (team): the journals the team has published in, as a wall of names — methods
   journals in the first row, application journals in the second */
/* one-sentence ledes that run the full width, on one line at desktop widths */
.lede-one, html[data-language='zh'] .lede-one { max-width: none; }
.record { border-top: 1px solid var(--line-strong); }
.record-intro, .record-industry { max-width: none; margin: 0; color: var(--body); font-size: var(--fs-lede); }
.record-intro { padding: 28px 0 24px; }
.record-industry { padding-top: 24px; }
.journal-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: rgba(255, 255, 255, .7); }
.journal-wall li { grid-column: span 3; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 104px; padding: 16px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font: 500 clamp(16px, 1.45vw, 22px)/1.25 var(--display); letter-spacing: -.01em; text-align: center; white-space: nowrap; }
.journal-wall li:nth-child(-n + 3) { grid-column: span 4; color: var(--blue-deep); }
.model-notes .model-closing { grid-column: 1 / -1; max-width: none; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
/* contact blocks on a vivid tech-blue surface */
.partner-cta, .contact-card { position: relative; overflow: hidden; margin-top: var(--section-y); padding: clamp(40px, 4.2vw, 64px); border-radius: var(--radius-card); background: var(--vivid); color: #fff; }
.partner-cta .kicker, .contact-card .kicker { color: #fff; }
.partner-cta .kicker::before, .contact-card .kicker::before { background: linear-gradient(90deg, #fff, var(--orange)); }
.partner-cta h2, .contact-card h2 { margin: 24px 0 16px; color: #fff; }
.partner-cta p, .contact-card > p:not(.kicker) { position: relative; z-index: 1; max-width: none; margin: 0; color: var(--vivid-body); font-size: var(--fs-lede); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.contact-email { padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .6); color: #fff; font-size: var(--fs-text); }
.contact-orbit { position: absolute; right: -10px; bottom: -195px; width: 430px; height: 430px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; pointer-events: none; }
.contact-orbit::before, .contact-orbit::after { content: ''; position: absolute; inset: 35px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; }
.contact-orbit::after { inset: 95px; }
.contact-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.contact-orbit i:nth-child(1) { top: 40px; left: 210px; }
.contact-orbit i:nth-child(2) { bottom: 130px; left: 45px; background: var(--orange); }
.contact-orbit i:nth-child(3) { top: 174px; right: 18px; background: #9fe7f5; }

/* 12. Contact (home) ------------------------------------------------------- */
.contact { margin-top: var(--section-y); }
.contact .contact-card { margin-top: 0; min-height: 420px; }
.contact-routes { position: relative; z-index: 1; margin-top: 40px; }
.contact-routes .route-label { color: #fff; }
.contact-routes .route-row { border-color: rgba(255, 255, 255, .6); }
.contact-routes .route-row li + li { border-color: rgba(255, 255, 255, .6); }
.contact-routes .route-row a { color: #fff; }
.contact-routes .route-row a::after { background: #fff; }
.contact-routes .route-row a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Chapter rail: the home page's eight chapters, in the right-hand margin on wide screens */
.chapter-rail { position: fixed; z-index: 20; top: 50%; right: max(12px, calc((100vw - var(--shell-max)) / 2 - 64px)); display: none; flex-direction: column; gap: 4px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .4s; }
.chapter-rail.is-shown { opacity: 1; pointer-events: auto; }
.chapter-rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 24px; color: var(--muted); font: 500 var(--fs-micro)/1 var(--label-font); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.chapter-rail a::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; transition: background .3s, border-color .3s, transform .3s; }
.chapter-rail a b { position: absolute; top: 50%; right: calc(100% + 8px); padding: 4px 8px; border-radius: 6px; background: #fff; box-shadow: 0 6px 16px -10px rgba(10, 18, 48, .45); color: var(--ink); font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(4px, -50%); transition: opacity .2s, transform .2s; pointer-events: none; }
.chapter-rail a:hover b, .chapter-rail a:focus-visible b { opacity: 1; transform: translate(0, -50%); }
.chapter-rail a:hover, .chapter-rail a.is-active { color: var(--blue-deep); }
.chapter-rail a.is-active::after { border-color: var(--blue); background: var(--blue); transform: scale(1.25); }
@media (min-width: 1280px) { .chapter-rail { display: flex; } }

/* 13. Footer --------------------------------------------------------------- */
.site-footer { margin-top: var(--section-y); padding: 0 0 var(--chrome-gutter); }
/* two panels: the brand (tagline, contact, copyright) and the site map */
.footer-shell { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; width: calc(100% - 2 * var(--chrome-gutter)); min-height: 296px; margin-inline: auto; }
.footer-shell > * { min-width: 0; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .8); }
.footer-brand-panel, .footer-nav-panel { display: flex; flex-direction: column; }
.footer-brand-panel .footer-brand { width: 100%; max-width: 264px; }
.footer-brand-panel p { margin: 24px 0 0; color: var(--body); font-size: var(--fs-lede); }
.footer-brand-panel small { margin-top: auto; color: var(--muted); font: 400 var(--fs-label)/1.5 var(--label-font); letter-spacing: .06em; }
.footer-shell span:not(.nw) { margin-bottom: 24px; color: var(--label); font: 500 var(--fs-label)/1.35 var(--label-font); letter-spacing: var(--ls-label); text-transform: uppercase; }
.footer-shell a { display: inline-flex; align-items: center; gap: .35em; width: fit-content; margin-bottom: 16px; color: var(--ink); font-size: var(--fs-body); }
.footer-shell a:hover { color: var(--blue-deep); }
/* the email sits with the brand, under its own label */
.footer-contact { display: flex; flex-direction: column; margin-top: 24px; }
.footer-shell .footer-contact span { margin-bottom: 12px; }
.footer-contact a { word-break: break-word; }
.footer-brand-panel small { padding-top: 24px; }
/* perturbmind.com only (data-site='cn', set by script.js): the ICP and public-security filing numbers under the
   footer, with the copyright moved down beside them */
.site-filing { display: none; }
html[data-site='cn'] .site-filing { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; width: calc(100% - 2 * var(--chrome-gutter)); margin: 24px auto 0; color: var(--ink); font: 400 var(--fs-small)/1.6 var(--label-font); }
.site-filing a { color: var(--blue); }
.site-filing a:hover { color: var(--blue-deep); text-decoration: underline; }
.site-filing .sep { color: var(--muted); }
html[data-site='cn'] .footer-brand-panel small { display: none; }

/* 14. Motion --------------------------------------------------------------- */
/* Animations play by default; the header button pauses them (data-motion='off', see script.js). */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] .reveal { opacity: 1; transform: none; transition: none; }
html[data-motion='off'] .scroll-cue .ico { animation: none; }
html[data-motion='off'] .press-list::after { display: none; }

/* 15. Responsive ----------------------------------------------------------- */
@media (max-width: 1360px) {
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .pipeline-frame .pipeline-steps { font-size: var(--fs-micro); letter-spacing: .02em; }  /* four stage names still fit their columns */
  .site-nav > a, .nav-drop > a { padding-inline: 12px; }
  .engine-row { grid-template-columns: minmax(0, 1fr); }
  .engine-row .card + .card::before { top: -13px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .principle-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder-body, .coming { grid-template-columns: minmax(0, 1fr); }
  .next-card { grid-template-columns: minmax(0, 1fr) minmax(0, 280px) auto; }
  .eco-row { grid-template-columns: 132px minmax(0, 1fr); column-gap: 20px; }
  .eco-stack { --eco-mid: calc(50% + 76px); }  /* (24 + 132 + 20 − 24) / 2 */
  .eco-stack { --eco-gap: 32px; }
  .eco-models { grid-template-columns: minmax(0, 1fr); }  /* AlphaCell takes the full row, so its four versions stay legible */
  .eco-models > li.eco-model { grid-column: auto; }
  .principle-row > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .principle-row > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .route-row { grid-template-columns: minmax(0, 1fr); }  /* three labels side by side need a desktop-wide card */
  .route-row li + li { border-left: 0; border-top: 1px solid var(--nav-line); }
  .site-header { gap: 8px; }
  .site-header > .brand { width: 156px; }
  .menu-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
  .menu-toggle[aria-expanded='true'] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded='true'] i::after { transform: rotate(-90deg); }
  .site-nav { position: absolute; top: calc(100% + 8px); right: 0; left: 0; display: none; flex-direction: column; background: rgba(250, 251, 253, .96); }
  .site-nav.open { display: flex; }
  .site-nav > a, .nav-drop > a { padding: 16px 16px; border-top: 1px solid var(--nav-line); border-left: 0; border-radius: 0; }
  .site-nav > a:first-child { border-top: 0; }
  .site-nav > a:first-child, .site-nav > a:nth-last-child(2) { border-radius: 0; }
  .nav-drop { display: block; }
  .nav-drop > a { display: flex; }
  .nav-caret { display: none; }
  .nav-menu, .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { position: static; display: grid; gap: 0; min-width: 0; transform: none; padding: 0 0 8px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-menu::before { display: none; }
  .nav-menu a { padding: 8px 16px; }

  .hero-stage { grid-template-columns: minmax(0, 1fr); }
  .hero-home .hero-head { min-height: 0; }
  .hero-home::after { display: none; }
  .hero-figure { min-height: 500px; }
  .hero-figure > .visual { inset: -20px -16px 0; }
  .hero-media { min-height: 440px; }
  .feature-card, .model-notes, .band-split, .who, .ladder-body { grid-template-columns: minmax(0, 1fr); }
  .journal-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-wall li, .journal-wall li:nth-child(-n + 3) { grid-column: auto; min-height: 84px; }
  .eco-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .eco-stack { --eco-mid: 50%; }  /* labels now sit above the chips, which span the row */
  .eco-chips > li { padding-inline: 12px; white-space: normal; text-align: center; }  /* three long application names share a tablet-wide row */
  .card-grid-2, .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .card-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-media { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--specimen-line); }
  .band-figure, .pipeline-frame { aspect-ratio: 2 / 1; }
  .site-header > .motion-toggle { order: 2; }
  .challenge { display: flex; flex-direction: column-reverse; min-height: 0; }
  .challenge-figure { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  /* phones and tablets: the figure stays at the top of the screen; the choices scroll up beneath it */
  .scrolly { grid-template-columns: minmax(0, 1fr); }
  .scrolly-figure, .scrolly-steps { grid-area: 1 / 1; }
  .scrolly-figure { z-index: 2; pointer-events: none; }
  .scrolly-sticky { top: calc(var(--chrome-gutter) + 64px); padding-bottom: 16px; background: var(--paper); pointer-events: auto; }
  .flow-frame { aspect-ratio: 16 / 11; }
  .scrolly-steps { padding-top: calc((100vw - 2 * var(--gutter)) * 11 / 16 + 64px); }
  .scrolly-steps li { min-height: 56vh; justify-content: flex-start; padding: 24px 0 24px 24px; }
  .ladder-figure { min-height: 0; aspect-ratio: 4 / 3; }
  .next-card { grid-template-columns: minmax(0, 1fr) auto; padding: 24px; }
  .next-glyph { grid-row: 2; grid-column: 1 / -1; }
  .contact-orbit { right: -160px; opacity: .5; }
  .step h3, .model-card h3, .discipline strong { white-space: normal; }
}
@media (max-width: 720px) {
  .pipeline-frame .pipeline-steps { display: none; }  /* too narrow for four stage names; the engine cards above name them */
  .eco-chips { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  html[data-site='cn'] .site-filing { flex-direction: column; gap: 2px; }  /* one item per line */
  .site-filing .sep { display: none; }
  .tech-tab { gap: 4px; padding: 16px; }
  .footer-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-facts li { font-size: var(--fs-body); }
  .tech-tab span { white-space: normal; }
  .coming-glyph { height: 160px; }
  :root { --fs-index: 13px; --fs-nav: 11.5px; }
  html[data-language='zh'] { --fs-index: 14px; --fs-nav: 13px; }
  .site-header > .brand { width: 124px; padding: 4px; }
  .language-switcher button { padding: 8px 8px; }
  .menu-toggle { min-width: 56px; padding-inline: 8px; }
  .hero-media { min-height: 0; aspect-ratio: 4 / 3; }  /* phones: the renders keep their landscape composition */
  .card-grid-4, .card-grid-5, .principle-row { grid-template-columns: minmax(0, 1fr); }
  .principle-row > div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .principle-row > div:first-child { border-top: 0; }
  .principle-row h3 { white-space: normal; }
  .eco-row { padding: 16px 16px 20px; }
  .eco-chips { grid-template-columns: minmax(0, 1fr); }
  .eco-flow { row-gap: 32px; }
  .eco-flow > li + li::before { top: auto; right: auto; bottom: calc(100% + 2px); left: 50%; width: 12px; height: 26px; margin: 0 0 0 -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M5 8L0 0l5 2.2L10 0z' fill='%232450f0'/%3E%3C/svg%3E") 50% 100% / 10px 8px no-repeat, linear-gradient(rgba(36, 80, 240, .22), rgba(36, 80, 240, .8)) 50% 0 / 2px calc(100% - 6px) no-repeat; }
  .concept-frame img { aspect-ratio: 4 / 3; }  /* phones: the manifold at the centre of the figure */
  .press-list { padding-left: 32px; }
  .press-entry::before { left: -30px; }
  .press-list::before { left: 5px; }
  .press-item { padding-right: 48px; }
  .press-item h3 { font-size: var(--fs-h3); }
  .press-arrow { right: 4px; }
  .kicker { letter-spacing: .08em; }
  .journal-wall { grid-template-columns: minmax(0, 1fr); }
  .button { padding-left: 16px; }
  .button > span { margin-left: 16px; padding: 0 12px; }
  .partner-cta, .contact-card { padding: 32px 24px; }
  .paper-meta a { white-space: normal; }
  .spec-list li { white-space: normal; }
  .scroll-cue { display: none; }
  .site-header > .motion-toggle { display: none; }
  .site-nav .motion-toggle-menu { display: flex; justify-content: flex-start; gap: 12px; width: auto; height: auto; padding: 16px 16px; border: 0; border-top: 1px solid var(--nav-line); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 var(--fs-nav)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
  html[data-language='zh'] .site-nav .motion-toggle-menu { letter-spacing: .04em; }
  .site-nav .motion-toggle-menu > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .ladder-steps strong, .ladder-steps button > span:last-child { white-space: normal; }
  .ladder-steps button { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .contact-routes { margin-top: 32px; }
  .next-title { font-size: var(--fs-h3-lg); }
}

/* Chinese pages: no uppercasing — Chinese has no case, and embedded brand names keep their spelling */
html[data-language='zh'] body * { text-transform: none; }

/* names keep the case and tracking they have in the Chinese version (PerturbSeek, AlphaCell, bioRxiv) inside labels set in capitals */
.keep-case { --ls-index: .08em; --ls-label: .04em; text-transform: none; }
span.keep-case { letter-spacing: var(--ls-label); }

/* the narrowest phones (under 360 px): Chinese body text one step smaller, and a clause may wrap
   rather than push the page sideways */
@media (max-width: 359px) {
  html[data-language='zh'] { --fs-body: 14px; --fs-lede: 14px; --fs-text: 13.5px; --fs-card: 15px; }
  html[data-language='zh'] .nw { white-space: normal; }
  .tech-tabs { grid-template-columns: minmax(0, 1fr); }
}