/* Longevity Vaccines — concept page · Insilico black + green */

:root {
  --bg: #060807;
  --bg-alt: #0a0d0b;
  --panel: #0c110d;
  --panel-2: #101711;
  --line: #1c271f;
  --text: #e8f2ea;
  --muted: #93a89a;
  --dim: #62766a;
  --accent: #35d96a;      /* ISM green */
  --accent-2: #7bef9b;    /* light green */
  --warn: #f0b45c;
  --bad: #f0736a;
  --good: #57d9a3;
  --radius: 14px;
  --maxw: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(53, 217, 106, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 217, 106, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 80%);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.narrow { max-width: 820px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
  background: rgba(6, 8, 7, 0.78); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
/* Insilico social accounts, top right of the nav (replaces the concept badge) */
.social { display: flex; align-items: center; gap: 8px; }
.social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
  transition: color .18s, border-color .18s, background .18s;
}
.social a:hover { color: var(--accent); border-color: rgba(53,217,106,.5); background: var(--panel); }
.social a:focus-visible { outline: none; color: var(--accent-2); border-color: var(--accent-2); }
.social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
@media (max-width: 620px) { .social a { width: 28px; height: 28px; } .social svg { width: 13px; height: 13px; } }
.badge { font-size: 12px; color: var(--accent); border: 1px solid rgba(53,217,106,.35);
  padding: 6px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

/* Hero */
.hero { padding: 40px 0 62px; text-align: center; }   /* logo now sits near the nav */
.hero-logo {
  display: block; width: clamp(132px, 15vw, 178px); margin: 0 auto 22px;
  transition: opacity .2s, transform .2s;
}
.hero-logo img { width: 100%; height: auto; display: block; }
.hero-logo:hover { opacity: .88; transform: translateY(-2px); }
.hero-logo:focus-visible { outline: 1px solid var(--accent-2); outline-offset: 6px; border-radius: 4px; }
.eyebrow { color: var(--accent); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
.principle {
  font-size: clamp(32px, 5.2vw, 60px); font-weight: 800; line-height: 1.07; letter-spacing: -0.03em;
  max-width: 920px; margin: 0 auto 24px;
  background: linear-gradient(180deg, #ffffff, #a9e6bd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--muted); max-width: 700px; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-bottom: 28px; }
.micro { font-size: 13px; color: var(--dim); max-width: 620px; margin: 0 auto; }

.btn { display: inline-block; padding: 13px 26px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; transition: transform .15s, box-shadow .2s, background .2s; }
.btn.primary { background: var(--accent); color: #04120a; box-shadow: 0 6px 30px rgba(53,217,106,.28); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(53,217,106,.45); }
.btn.ghost { border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Sections */
.section { padding: 56px 0; position: relative; z-index: 1; }   /* was 92: ~184px between sections */
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { color: var(--accent); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.section h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px; }
.section.cta h2 { margin-left: auto; margin-right: auto; }
.body-lg { font-size: 18px; color: var(--muted); margin-bottom: 20px; }
.body-lg a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(123,239,155,.35); }
.body-lg a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.body-lg.center { }

/* Concept graphic placeholder */
.concept-graphic {
  margin: 12px 0 32px; min-height: 240px; border: 1px dashed var(--line); border-radius: var(--radius);
  display: grid; place-items: center; background:
    repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(53,217,106,.03) 18px, rgba(53,217,106,.03) 36px), var(--panel);
}
.concept-graphic span { color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: 13px; }

/* Chassis — circular mRNA explainer */
.chassis-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 22px; }
.chassis-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.chassis-card.accent { border-color: rgba(53,217,106,.45); box-shadow: 0 0 30px rgba(53,217,106,.08); }
.chassis-card h3 { font-size: 16px; margin-bottom: 10px; }
.chassis-card.accent h3 { color: var(--accent); }
.chassis-card p { font-size: 14.5px; color: var(--muted); }
.chassis-note { font-size: 15px; color: var(--muted); padding-left: 16px; border-left: 2px solid var(--accent-2); }

/* Console */
.console { margin-top: 40px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.console-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--panel-2); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #223026; display: block; }
.console-title { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted); }

/* Track tabs (diseases) */
.track-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--panel); }
.track-tab { flex: 1 1 auto; padding: 14px 16px; font-size: 14px; color: var(--dim); cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; transition: all .2s; min-width: 140px; text-align: left; font-weight: 500; }
.track-tab:hover { color: var(--muted); background: rgba(255,255,255,.02); }
.track-tab.active { color: var(--text); border-bottom-color: var(--accent); background: rgba(53,217,106,.06); }

.console-body { display: grid; grid-template-columns: 220px 1fr; min-height: 440px; }
.stepper { list-style: none; border-right: 1px solid var(--line); padding: 18px 0; }
.stepper li { padding: 13px 20px; font-size: 14px; color: var(--dim); cursor: pointer;
  border-left: 2px solid transparent; transition: all .2s; }
.stepper li:hover { background: rgba(255,255,255,.02); }
.stepper li.active { border-left-color: var(--accent); background: rgba(53,217,106,.06); color: var(--text); font-weight: 600; }
.stepper li.done { color: var(--muted); }

.panel { padding: 32px 36px; min-width: 0; }
.panel.fade { animation: fadeUp .45s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.p-stage { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--accent); letter-spacing: .06em; margin-bottom: 12px; }
.p-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.p-sub { color: var(--muted); font-size: 15px; margin-bottom: 20px; }

/* Scored targets */
.tgt { background: var(--panel-2); border: 1px solid rgba(53,217,106,.5); border-radius: 12px; padding: 15px 18px; margin-bottom: 12px; }
.tgt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tgt-rank { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--dim); }
.tgt-name { font-size: 16px; font-weight: 600; }
.tgt-uni { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--accent-2); text-decoration: none;
  border: 1px solid rgba(123,239,155,.3); border-radius: 999px; padding: 2px 8px; }
.tgt-uni:hover { border-color: var(--accent-2); background: rgba(123,239,155,.08); }
.tgt-score { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; color: var(--accent); }
.tgt-score small { font-size: 11px; color: var(--dim); font-weight: 400; }
.tgt-fn { font-size: 13px; color: var(--dim); margin: 10px 0 12px; }
.scores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.prog-scores { grid-template-columns: repeat(5, 1fr); }
.sc { font-size: 10px; color: var(--muted); }
.sc-top { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; margin-bottom: 4px; }
.sc-top b { color: var(--text); font-weight: 500; }
.sc-bar { height: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s ease; }
.tgt-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
/* target card: score barplot on the left under the name, prose on the right */
/* barplot under the target name on the left; the prose begins where the plot
   ends rather than running beneath it — verdict first, fainter note under that.
   Flex (not a fixed grid) so it reflows on the console panel's own width. */
/* barplot under the target name with the AlphaFold model beside it; both texts
   run the full card width beneath them — verdict first, fainter note under that */
.tgt-row {
  display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px;
  align-items: center;        /* drops the shorter barplot down level with the model */
  justify-content: center;    /* balances the leftover space instead of pooling it right */
}
.tgt-plot {
  flex: 0 1 318px; max-width: 318px;
  border: 1px solid rgba(53,217,106,.5); border-radius: 12px;
  padding: 13px 14px 11px;                     /* green contour so the plot reads as a panel */
}
.tgt-struct { flex: 0 0 auto; }
.tgt-struct-view {
  position: relative; width: 228px; height: 180px;
  background: var(--panel); border: 1px solid rgba(53,217,106,.5); border-radius: 12px;
  overflow: hidden; cursor: grab;
}
.tgt-struct-view canvas { display: block; border-radius: 12px; }
.tgt-struct-view::after {
  content: "loading model‚6"; position: absolute; inset: 0;
  display: grid; place-items: center; pointer-events: none;
  font: 10px/1 "JetBrains Mono", monospace; color: var(--dim);
}
.tgt-struct-view.ready::after { content: ""; }
.tgt-struct-view.failed::after { content: "model unavailable"; }
.tgt-struct figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font: 9.5px/1 "JetBrains Mono", monospace; color: var(--dim);
}
.tgt-struct figcaption a { color: var(--accent-2); text-decoration: none; }
.tgt-struct figcaption a:hover { text-decoration: underline; }
.af-key { display: flex; align-items: center; gap: 3px; }
.af-key i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.tgt-text { margin-top: 18px; text-align: center; }
.tgt-text .tgt-note { margin: 0 0 8px; }
.tgt-text .tgt-fn { margin: 0; }
.sp { position: relative; display: grid; grid-template-columns: 42px 1fr 44px; column-gap: 8px; row-gap: 6px; align-items: center; }
.sp-yaxis { position: absolute; left: 42px; top: 1px; bottom: 40px; width: 1px; background: var(--line); }
.sp-grid {
  position: absolute; left: 50px; right: 52px; top: 1px; bottom: 40px; pointer-events: none;
  background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 20%);
  opacity: .55;
}
.sp-k { font: 500 10px/1 "JetBrains Mono", monospace; color: var(--dim); letter-spacing: .04em; }
.sp-k.lead { color: var(--accent); font-weight: 700; }
.sp-track {
  position: relative; height: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.sp-track.lead { height: 10px; }
.sp-track i {
  display: block; height: 100%; width: 0;
  background: rgba(123,239,155,.5);              /* dimensions: light green */
  transition: width .8s ease;
}
.sp-track.lead i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.sp-v { font: 700 13px/1 "JetBrains Mono", monospace; color: var(--accent); text-align: right; }
.sp-v small { font-size: 9px; color: var(--dim); font-weight: 400; }
.sp-x { position: relative; height: 16px; margin-top: 5px; }
.sp-x::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.sp-t { position: absolute; top: 5px; transform: translateX(-50%); font: 9.5px/1 "JetBrains Mono", monospace; color: var(--dim); }
.sp-t::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 4px; background: var(--line); }
.sp-xlab { font: 9.5px/1 "JetBrains Mono", monospace; color: var(--dim); text-align: center; letter-spacing: .1em; }
.score-legend { font-size: 11px; color: var(--dim); font-family: "JetBrains Mono", monospace; margin: 4px 0 18px; }
.tgt-refs { margin-top: 14px; font-size: 12.5px; color: var(--dim); }
.tgt-refs a { color: var(--accent-2); text-decoration: none; }
.tgt-refs a:hover { text-decoration: underline; }

/* Construct — SVG ring */
.design-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; }
.ring-wrap { position: relative; }
.ring { width: 100%; height: auto; display: block; }
.seg { cursor: pointer; transition: opacity .2s, stroke-width .2s; }
.seg:hover { opacity: 1 !important; }
.ring-center { fill: var(--text); font-family: "JetBrains Mono", monospace; }
.legend { display: flex; flex-direction: column; gap: 8px; }
.leg-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  border: 1px solid transparent; font-size: 13px; color: var(--muted); transition: all .2s; }
.leg-item:hover { background: rgba(255,255,255,.02); }
.leg-item.sel { border-color: var(--line); background: var(--panel-2); color: var(--text); }
.leg-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.seg-detail { margin-top: 22px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.seg-detail h4 { font-size: 15px; margin-bottom: 6px; }
.seg-detail p { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
/* Design cmRNA panel: circular construct drawn to scale + selectable elements */
.cmr { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(262px, 320px);
  gap: 12px 18px; align-items: center; }
.cmr-svg { grid-column: 1; grid-row: 1; }
.cmr-beside { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 9px; }
.cmr-below { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cmr-svg { width: 100%; height: auto; display: block; }
.cmr-seg { fill: none; stroke-width: 48; stroke-linecap: butt; pointer-events: none; transition: opacity .18s; }
.cmr-hit { fill: none; stroke: transparent; stroke-width: 64; stroke-linecap: butt; cursor: pointer; pointer-events: stroke; }
.cmr-node { fill: #e8f2ea; stroke: var(--bg); stroke-width: 2.5; cursor: pointer; transition: opacity .18s; }
.cmr-seg.dim, .cmr-node.dim { opacity: .5; }
.cmr-lbl { cursor: pointer; font: 600 18px/1 "Inter", sans-serif; fill: var(--muted); transition: fill .18s; }
.cmr-lbl:hover { fill: var(--text); }
.cmr-lbl.on { fill: var(--accent-2); }
.cmr-mid { font: 500 16px/1 "JetBrains Mono", monospace; fill: var(--dim); }
.cmr-mid2 { font: 700 23px/1 "Inter", sans-serif; fill: var(--text); }
.cmr-card { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; transition: opacity .18s;
  font-family: inherit; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 13px; transition: border-color .18s, background .18s; }
.cmr-card:hover { border-color: rgba(53,217,106,.5); }
.cmr-card.on { border-color: var(--accent); background: rgba(53,217,106,.07); opacity: 1; }
.cmr-card:not(.on) { opacity: .6; }
.cmr-card:not(.on):hover { opacity: .85; }
.cmr-ct { display: flex; align-items: center; gap: 8px; font: 700 13.5px/1.2 "Inter", sans-serif; color: var(--text); }
.cmr-ct i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; display: block; }
.cmr-card.on .cmr-ct { color: var(--accent-2); }
.cmr-cs { font: 500 10px/1.45 "JetBrains Mono", monospace; color: var(--dim); }
.cmr-card.on .cmr-cs { color: var(--muted); }
.cmr-cb { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) {
  .cmr { grid-template-columns: 1fr; }
  .cmr-svg, .cmr-beside, .cmr-below { grid-column: 1; grid-row: auto; }
  .cmr-below { grid-template-columns: 1fr; }
}

.seg-detail .seq { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--accent-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; word-break: break-all; }
.delivery { margin-top: 22px; }
.delivery svg { width: 100%; max-width: 460px; height: auto; }
.ligand { margin-top: 12px; font-size: 13px; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.ligand b { color: var(--accent-2); font-weight: 500; }
.p-note { margin-top: 16px; font-size: 14px; color: var(--dim); font-style: italic; max-width: 560px; }

/* Trial — program scorecard, flanked by disease-track arrows */
.trk-row { display: flex; align-items: stretch; gap: 10px; }
.trk-row > .program, .trk-row > .trial-item { flex: 1; min-width: 0; }
.prog-row { margin-bottom: 14px; }
.prog-row .program { margin-bottom: 0; }
/* per-section arrows stretch to their row, so they match an expanded section */
.trk-arrow.mid { align-self: stretch; flex: 0 0 40px; height: auto; font-size: 22px; }
.trk-arrow { flex: 0 0 46px; background: var(--panel); border: 1px solid rgba(53,217,106,.5);
  border-radius: 12px; color: var(--accent); font: 400 26px/1 "Inter", sans-serif; cursor: pointer;
  display: grid; place-items: center; padding: 0; transition: background .18s, border-color .18s, color .18s; }
.trk-arrow:hover { background: var(--panel-2); border-color: var(--accent); color: var(--accent-2); }
.trk-arrow:active { transform: scale(.98); }
.trk-arrow:focus-visible { outline: none; border-color: var(--accent-2); }
.prog-track { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .06em; color: var(--dim); }
@media (max-width: 720px) {
  .trk-row { flex-wrap: wrap; }
  .trk-row > .program, .trk-row > .trial-item { order: -1; flex: 1 1 100%; }
  .trk-arrow, .trk-arrow.mid { flex: 1 1 45%; height: auto; min-height: 42px; font-size: 22px; }
}

.program { background: var(--panel-2); border: 1px solid rgba(53,217,106,.5);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.prog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.prog-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.prog-grade { font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 700; color: var(--accent);
  background: rgba(53,217,106,.1); border: 1px solid rgba(53,217,106,.35); border-radius: 8px; padding: 2px 12px; }
.prog-verdict { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

/* Trial — accordion */
.trial { display: flex; flex-direction: column; gap: 8px; }
.trial-item { background: var(--panel-2); border: 1px solid rgba(53,217,106,.5); border-radius: 10px; overflow: hidden; }
.trial-item summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; color: var(--accent); }
.trial-item summary::-webkit-details-marker { display: none; }
.trial-item summary::after { content: "+"; font-family: "JetBrains Mono", monospace; color: var(--accent); font-size: 18px; }
.trial-item[open] summary::after { content: "–"; }
.trial-item summary:hover { background: rgba(255,255,255,.02); }
.trial-body { padding: 0 18px 16px; font-size: 14px; color: var(--muted); }
.trial-body a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(123,239,155,.35); }

.console-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  padding: 16px 18px; border-top: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.controls { display: flex; gap: 8px; }
.ctrl { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 0 16px; height: 36px;
  border-radius: 9px; cursor: pointer; font-size: 13px; transition: all .15s; }
.ctrl:hover { border-color: var(--accent); color: var(--accent); }
/* the disclaimer used to sit in a 520px column beside the buttons, so it began
   mid-width; it now takes its own full-width line under them */
.disclaimer { font-size: 12px; color: var(--dim); flex: 1 0 100%; max-width: none; }

/* Platform loop — centered flex for symmetry */
.loop { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }
.loop-stage { flex: 1 1 300px; max-width: 352px; background: var(--panel); border: 1px solid rgba(53,217,106,.5);
  border-radius: var(--radius); padding: 22px; transition: border-color .2s, transform .2s;
  display: block; text-decoration: none; color: inherit; cursor: pointer; }
.loop-stage:focus-visible { outline: none; border-color: var(--accent-2); }
.loop-stage:hover { border-color: rgba(53,217,106,.8); transform: translateY(-3px); }
.loop-stage .ls-k { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.loop-stage .ls-tool { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--accent); margin-bottom: 12px; display: inline-block; text-decoration: none; }
.loop-stage:hover .ls-tool { text-decoration: underline; }
.loop-stage ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.loop-stage li { font-size: 13.5px; color: var(--muted); padding-left: 16px; position: relative; }
.loop-stage li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* Tool logos in the platform panels (index_v3).
   The logo shares a flex row with the stage name rather than being absolutely
   positioned over a pixel-reserved gap — the wordmarks run 4.2:1 to 6.6:1, so any
   fixed reserve either clipped the wide ones or wrapped the long titles at
   narrower panel widths. Each logo is capped by HEIGHT so they read at the same
   ink size regardless of aspect. */
.loop-stage .ls-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.loop-stage .ls-head .ls-k { margin-bottom: 0; }
.loop-stage .ls-logo {
  flex: 0 1 auto; min-width: 0; width: auto; height: auto;
  max-width: 46%; opacity: .92; pointer-events: none; object-fit: contain;
}
.ls-logo.panda       { max-height: 21px; }
.ls-logo.biology42   { max-height: 21px; }
.ls-logo.chemistry42 { max-height: 20px; }
.ls-logo.inclinico   { max-height: 21px; }
.ls-logo.lifestar2   { max-height: 26px; }

.loop-note { margin-top: 26px; font-size: 15px; color: var(--muted); padding-left: 16px; border-left: 2px solid var(--accent-2); }

/* Our research (prose + bibliography) */
.research { margin-top: 10px; }
.research p { font-size: 17px; color: var(--muted); margin-bottom: 20px; line-height: 1.7; }
.research a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(123,239,155,.35); }
.research a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.research sup.cite { font-size: .62em; top: -0.6em; }
.research sup.cite a { border-bottom: none; color: var(--accent); padding: 0 1px; }
.bib-h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 36px 0 14px; }
.bib { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.bib li { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.bib li::marker { color: var(--accent); font-family: "JetBrains Mono", monospace; }
.bib a { color: var(--accent-2); text-decoration: none; border: none; }
.bib a:hover { text-decoration: underline; }

/* CTA / footer */
.section.cta { text-align: center; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(53,217,106,.09), transparent 70%), var(--bg); }
.section.cta .btn { margin: 12px 0 18px; }
.footer { border-top: 1px solid var(--line); padding: 26px 0 30px; }
.social-center { justify-content: center; margin-bottom: 18px; }
.footer-inner { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 10px; }
.footer-owner { color: var(--muted); text-decoration: none; transition: color .18s; }
.footer-owner:hover { color: var(--accent-2); }
.footer-owner:focus-visible { outline: none; color: var(--accent-2); text-decoration: underline; }
.muted { color: var(--dim); }
.footer-updated { color: var(--dim); font-size: 12px; }
.footer-disclaimer {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 11.5px; line-height: 1.7; max-width: 900px;
}

/* Responsive */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .console-body { grid-template-columns: 1fr 1fr; }
  .stepper { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .panel { grid-column: 1 / -1; }
  .stepper { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 10px; }
  .stepper li { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .stepper li.active { border-left: none; border-bottom-color: var(--accent); }
  .design-wrap { grid-template-columns: 1fr; }
  .ring-wrap { max-width: 260px; margin: 0 auto; }
  .scores { grid-template-columns: repeat(3, 1fr); }
  .prog-scores { grid-template-columns: repeat(3, 1fr); }
  .chassis-compare { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   IN-VIVO CAR-T SECTION
   ══════════════════════════════════════════════ */

.cart-section { background: var(--bg); }

/* ── Mechanism stepper ── */
.cart-mechanism {
  margin: 36px 0 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.cart-mech-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.cart-mech-label {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--accent); letter-spacing: .08em;
}
.cart-step-dots { display: flex; gap: 6px; }
.cart-step-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: background .3s, transform .3s;
}
.cart-step-dots span.active { background: var(--accent); transform: scale(1.3); }

.cart-mech-body {
  display: grid; grid-template-columns: 1fr 360px; min-height: 340px;
}
.cart-anim-panel {
  border-right: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; background: var(--bg);
}
.cart-anim-panel svg { width: 100%; max-width: 520px; height: auto; display: block; }

.cart-mech-text {
  padding: 28px 26px; display: flex; flex-direction: column; justify-content: center;
}
.cart-mech-step-n {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--accent); letter-spacing: .1em; margin-bottom: 10px;
}
.cart-mech-text h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.cart-mech-text p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.cart-mech-text ul { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.cart-mech-text li {
  font-size: 13.5px; color: var(--muted); padding-left: 16px; position: relative;
}
.cart-mech-text li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cart-mech-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.cart-step-counter {
  font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted);
}
.cart-mech-fade { animation: fadeUp .4s ease; }

/* ── CAR Generations ── */
.cart-gens {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 8px;
}
.cart-gen-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 14px; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; gap: 8px;
}
.cart-gen-card:hover { border-color: rgba(53,217,106,.35); transform: translateY(-3px); }
.cart-gen-card.active {
  border-color: var(--accent); box-shadow: 0 0 28px rgba(53,217,106,.15);
  background: rgba(53,217,106,.06);
}
.cart-gen-num {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--accent); letter-spacing: .1em;
}
.cart-gen-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cart-gen-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cart-gen-tag {
  font-size: 10px; font-family: "JetBrains Mono", monospace;
  color: var(--accent-2); border: 1px solid rgba(123,239,155,.3);
  border-radius: 999px; padding: 2px 7px;
}
.cart-gen-detail {
  margin-top: 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  animation: fadeUp .35s ease;
}
.cart-gen-detail h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.cart-gen-detail p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.cart-gen-detail .cart-gen-examples {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px;
}
.cart-example-pill {
  font-size: 12px; background: rgba(53,217,106,.08);
  border: 1px solid rgba(53,217,106,.25); border-radius: 999px;
  padding: 4px 12px; color: var(--accent-2);
  font-family: "JetBrains Mono", monospace;
}

/* ── Perfect Targets ── */
.cart-targets { display: flex; flex-direction: column; gap: 14px; }

.cart-tgt {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; transition: border-color .2s;
}
.cart-tgt.prime { border-color: rgba(53,217,106,.4); box-shadow: 0 0 24px rgba(53,217,106,.07); }
.cart-tgt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cart-tgt-rank { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--dim); }
.cart-tgt-name { font-size: 18px; font-weight: 700; }
.cart-tgt-badge {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(53,217,106,.4); color: var(--accent);
  border-radius: 999px; padding: 3px 10px;
  font-family: "JetBrains Mono", monospace;
}
.cart-tgt-badge.warn { border-color: rgba(240,180,92,.4); color: var(--warn); }
.cart-tgt-score {
  margin-left: auto; font-family: "JetBrains Mono", monospace;
  font-size: 22px; font-weight: 700; color: var(--accent);
}
.cart-tgt-score small { font-size: 12px; color: var(--dim); font-weight: 400; }

.cart-tgt-body { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.cart-tgt-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.cart-meta-item { font-size: 12px; }
.cart-meta-label {
  color: var(--dim); font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;
}
.cart-meta-val { color: var(--text); font-weight: 500; }
.cart-meta-val.good { color: var(--good); }
.cart-meta-val.warn { color: var(--warn); }
.cart-meta-val.bad  { color: var(--bad); }

.cart-tgt-scores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }

/* ── Workflow Screencast ── */
.cart-screencast {
  margin: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  position: relative;
}
.cart-screen-inner { padding: 28px 28px 20px; }
.screen-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-family: "JetBrains Mono", monospace;
  color: var(--muted); margin-top: 18px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
}
.screen-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* Workflow steps */
.wf-steps {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 22px; overflow-x: auto;
}
.wf-step {
  flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column;
  align-items: center; text-align: center; position: relative;
}
.wf-step:not(:last-child)::after {
  content: ""; position: absolute;
  right: 0; top: 22px; width: 1px; height: 30px;
  background: var(--line);
}
.wf-step-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 10px;
  transition: border-color .5s, box-shadow .5s, background .5s;
}
.wf-step.active .wf-step-icon {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(53,217,106,.35);
  background: rgba(53,217,106,.12);
}
.wf-step.done .wf-step-icon {
  border-color: rgba(53,217,106,.4);
  background: rgba(53,217,106,.06);
}
.wf-step-label { font-size: 12px; color: var(--dim); font-weight: 500; padding: 0 6px; }
.wf-step.active .wf-step-label { color: var(--text); }
.wf-step.done .wf-step-label { color: var(--muted); }

.wf-progress-bar {
  height: 4px; background: var(--panel-2); border-radius: 999px;
  overflow: hidden; margin-bottom: 14px;
}
.wf-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px; transition: width 1.2s cubic-bezier(.4,0,.2,1); width: 0%;
}
.wf-caption {
  font-size: 13px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  min-height: 20px; text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .cart-mech-body { grid-template-columns: 1fr; }
  .cart-anim-panel { border-right: none; border-bottom: 1px solid var(--line); min-height: 220px; }
  .cart-gens { grid-template-columns: repeat(3, 1fr); }
  .cart-tgt-meta { grid-template-columns: repeat(2, 1fr); }
  .cart-tgt-scores { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cart-gens { grid-template-columns: 1fr 1fr; }
  .cart-tgt-scores { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════
   In-vivo CAR-T · interactive process illustration
   (steps 1–6, ported from in_vivo_CART_description.html)
   ═══════════════════════════════════════════════ */
.ivc { margin-top: 4px; outline: none; }
.ivc-visual {
  position: relative; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; background: #010402; box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.ivc-visual img { width: 100%; height: auto; display: block; }
.ivc-hotspot {
  /* spans tile the strip on the artwork's own divider lines, so the selected
     border lands on the panel edge instead of cutting through its text */
  position: absolute; background: transparent; border: 1px solid transparent;
  border-radius: 9px; cursor: pointer; padding: 0;
}
.ivc-hotspot:hover, .ivc-hotspot:focus-visible, .ivc-hotspot.active {
  outline: none; border-color: rgba(255,255,255,.7);
  background: rgba(53,217,106,.07);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 28px rgba(53,217,106,.28);
}
.ivc-nav {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px;
}
.ivc-step {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; text-align: left; min-height: 66px;
  font-family: inherit; transition: border-color .2s, background .2s, box-shadow .2s;
}
.ivc-step:hover, .ivc-step.active {
  background: var(--panel-2); border-color: rgba(53,217,106,.45);
  box-shadow: 0 0 0 2px rgba(53,217,106,.08);
}
.ivc-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 28px; background: rgba(53,217,106,.14); border: 1px solid rgba(53,217,106,.5);
  color: var(--accent-2); font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700;
}
.ivc-label { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ivc-detail {
  display: grid; grid-template-columns: 160px 1fr 1fr; gap: 18px; flex: 1; min-width: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
}
.ivc-badge {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-right: 1px solid rgba(53,217,106,.18); min-height: 160px;
}
.ivc-bignum {
  font-size: 62px; line-height: 1; color: var(--accent-2); font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}
.ivc-badge span {
  color: var(--dim); text-transform: uppercase; font-size: 11px;
  letter-spacing: .12em; margin-top: 8px;
}
.ivc-block h4 {
  margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
.ivc-summary { color: var(--accent-2); font-weight: 600; font-size: 15.5px; margin-top: 8px; }
.ivc-block p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.ivc-role { margin-top: 10px; }
/* step arrows flank a detail panel and stretch to its height (cascade + use cases) */
.ivc-stage, .cuc-stage { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.ivc-arrow, .cuc-arrow {
  flex: 0 0 52px; align-self: stretch;
  background: var(--panel); border: 1px solid rgba(53,217,106,.5); border-radius: 14px;
  color: var(--accent); font: 400 30px/1 "Inter", system-ui, sans-serif;
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.ivc-arrow:hover, .cuc-arrow:hover { background: var(--panel-2); border-color: var(--accent); color: var(--accent-2); }
.ivc-arrow:active, .cuc-arrow:active { transform: scale(.98); }
.ivc-arrow:focus-visible, .cuc-arrow:focus-visible { outline: none; border-color: var(--accent-2); }
.ivc-fade { animation: fadeUp .4s ease; }
@media (max-width: 1000px) {
  .ivc-nav { grid-template-columns: repeat(3, 1fr); }
  .ivc-detail { grid-template-columns: 1fr; }
  .ivc-stage, .cuc-stage { flex-wrap: wrap; }
  .ivc-arrow, .cuc-arrow { flex: 1 1 45%; align-self: auto; min-height: 44px; font-size: 24px; }
  .ivc-badge {
    border-right: 0; border-bottom: 1px solid rgba(53,217,106,.18);
    min-height: auto; padding-bottom: 14px; flex-direction: row; gap: 12px;
  }
  .ivc-bignum { font-size: 40px; }
  .ivc-badge span { margin-top: 0; }
}
@media (max-width: 620px) {
  .ivc-nav { grid-template-columns: repeat(2, 1fr); }
  .ivc-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════
   CAR-T applications · use cases
   (ported from CART_use_cases.html, namespaced cuc-)
   ═══════════════════════════════════════════════ */
.cuc { margin-top: 4px; }
/* category strip: one real element per category, so numbering comes from the
   data and the selected-state border sits exactly on the panel it belongs to */
.cuc-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; align-items: stretch; }
.cuc-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left; height: 100%;
  padding: 14px 14px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; cursor: pointer;
  font-family: inherit; color: var(--text);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.cuc-card:hover { border-color: rgba(53,217,106,.38); transform: translateY(-2px); }
.cuc-card:focus-visible { outline: none; border-color: var(--accent-2); }
.cuc-card.active {
  background: var(--panel-2); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(53,217,106,.28), 0 0 30px rgba(53,217,106,.14);
}
.cuc-card-head { display: flex; align-items: center; gap: 9px; }
.cuc-badge {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(53,217,106,.12);
  border: 1px solid rgba(53,217,106,.5); color: var(--accent-2);
  font: 700 12px/1 "JetBrains Mono", monospace;
}
.cuc-card.active .cuc-badge { background: var(--accent); border-color: var(--accent); color: #05170b; }
.cuc-card-title { font-size: 14px; font-weight: 650; line-height: 1.25; color: var(--accent-2); }
.cuc-card.active .cuc-card-title { color: var(--accent); }
.cuc-card-sub { font-size: 11.5px; line-height: 1.4; color: var(--dim); min-height: 3.2em; }
.cuc-card img {
  /* the illustrations are cut out (transparent backdrop), so no plate is drawn —
     the fixed box keeps every card the same size while the art just floats in it */
  width: 100%; height: 132px; object-fit: contain; display: block;
  margin: auto auto 0;
}
.cuc-card-cap { font-size: 12px; color: var(--muted); text-align: center; }
.cuc-titlebar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.cuc-titlebar h4 {
  font-size: clamp(19px,2vw,26px); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-2);
}
.cuc-titlebar span { color: var(--muted); font-size: 14.5px; }
.cuc-detail {
  /* three equal panels now the duplicated figure is gone */
  display: grid; grid-template-columns: repeat(3, 1fr); flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.cuc-panel { padding: 22px 24px; border-right: 1px solid var(--line); }
.cuc-panel:last-child { border-right: 0; }
.cuc-panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  color: var(--accent); font-weight: 600; font-size: 15px;
}
.cuc-icon {
  width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(53,217,106,.5);
  border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: rgba(53,217,106,.1);
}
.cuc-panel p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.cuc-subhead {
  color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; margin: 18px 0 8px;
}
.cuc-list { padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.7; }
.cuc-list li::marker { color: var(--accent); }
.cuc-fade { animation: fadeUp .4s ease; }
@media (max-width: 1100px) {
  .cuc-detail { grid-template-columns: 1fr 1fr; }
  .cuc-panel { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cuc-panel:nth-child(even) { border-right: 0; }
}
@media (max-width: 1080px) { .cuc-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .cuc-detail { grid-template-columns: 1fr; } .cuc-panel { border-right: 0; border-bottom: 1px solid var(--line); } .cuc-panel:last-child { border-bottom: 0; } }
@media (max-width: 720px) {
  .cuc-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cuc-card img { height: 108px; }
}

/* ═══════════════════════════════════════════════
   Chassis · drawn comparison (index_v3)
   Linear vs circular mRNA rendered as diagrams
   ═══════════════════════════════════════════════ */
.chassis-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 22px; }
.chassis-fig {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 14px 10px;
}
.chassis-fig.accent {
  border-color: rgba(53,217,106,.45); box-shadow: 0 0 30px rgba(53,217,106,.08);
}
.chassis-fig svg { width: 100%; height: auto; display: block; }
/* figure typography */
.cf-title {
  font: 700 15px/1 "Inter", system-ui, sans-serif; letter-spacing: .06em;
  fill: var(--muted);
}
.cf-title.on { fill: var(--accent); }
.cf-lab { font: 500 12.5px/1 "Inter", system-ui, sans-serif; fill: var(--dim); }
.cf-lab.warn { fill: var(--bad); }
.cf-lab.on { fill: var(--accent-2); }
.cf-win { font: 600 13.5px/1 "Inter", system-ui, sans-serif; fill: var(--muted); }
.cf-win.on { fill: var(--accent-2); }
/* figure marks */
.cf-strand { fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; }
.cf-strand.on { stroke: var(--accent); }
/* dark dashes laid over the strand notch it into nucleotides */
.cf-ticks { fill: none; stroke: var(--panel); stroke-width: 3.4; stroke-dasharray: 1.6 7; }
.cf-ring-ticks { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 1.6 7.4; opacity: .5; }
.cf-cap { fill: var(--panel-2); stroke: var(--muted); stroke-width: 2; }
.cf-tail { fill: none; stroke: var(--dim); stroke-width: 2.2; stroke-dasharray: 4 4; stroke-linecap: round; }
.cf-nuc { fill: var(--bad); opacity: .85; }
.cf-debris { fill: var(--bad); opacity: .55; }
.cf-arrow { fill: none; stroke: var(--bad); stroke-width: 1.6; }
.cf-block { fill: none; stroke: var(--bad); stroke-width: 1.8; stroke-linecap: round; }
.cf-junction { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.cf-ribo { fill: var(--accent-2); opacity: .9; }
.cf-flow { fill: none; stroke: var(--accent-2); stroke-width: 1.6; opacity: .8; }
.cf-chain { fill: none; stroke: var(--accent-2); stroke-width: 1.6; opacity: .7; }
.cf-bead { fill: var(--accent-2); }
.cf-rule { stroke: var(--line); stroke-width: 1; }
.cf-axis { stroke: var(--line); stroke-width: 1.4; }
.cf-thresh { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 4; }
.cf-curve { fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linejoin: round; }
.cf-curve.on { stroke: var(--accent); }
.cf-area { fill: var(--muted); opacity: .16; }
.cf-area.on { fill: var(--accent); opacity: .2; }
.cf-brace { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.cf-brace.on { stroke: var(--accent-2); }
@media (max-width: 820px) { .chassis-figures { grid-template-columns: 1fr; } }

/* ── PandaClaw walkthrough (pcv-) ─────────────────────────────────────────────
   The demo capture in the CTA, dressed as an app window: title bar, ambient
   green bleed, play overlay and a progress hairline. Aspect ratio is declared
   (1280×578, the cropped recording) so the block reserves its height before a
   single video byte arrives and nothing below it jumps. demo_video_v3.js owns
   .is-playing and the width of .pcv-prog i. */
.pcv { position: relative; max-width: 940px; margin: 30px auto 26px; }

.pcv::before {                      /* ambient glow pooled under the frame */
  content: ""; position: absolute; z-index: 0;
  left: 8%; right: 8%; top: 12%; bottom: -6%;
  background: radial-gradient(ellipse at 50% 50%, rgba(53, 217, 106, .20), transparent 72%);
  filter: blur(38px); pointer-events: none;
}

.pcv-frame {
  position: relative; z-index: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .95), 0 0 44px -24px rgba(53, 217, 106, .35);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), box-shadow .38s, border-color .38s;
}
.pcv-frame::after {                 /* lit top edge, brightest in the middle */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(53, 217, 106, .65), transparent);
}
.pcv:hover .pcv-frame {
  transform: translateY(-3px); border-color: rgba(53, 217, 106, .32);
  box-shadow: 0 42px 100px -34px rgba(0, 0, 0, .95), 0 0 66px -22px rgba(53, 217, 106, .5);
}

/* title bar */
.pcv-bar {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 13px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--line);
}
.pcv-dots { display: flex; gap: 6px; flex: none; }
.pcv-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(147, 168, 154, .22); }
.pcv-title {
  flex: 1; text-align: left; font-size: 12px; letter-spacing: .06em;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcv-full {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer;
  transition: color .18s, background .18s;
}
.pcv-full:hover { color: var(--accent); background: rgba(53, 217, 106, .10); }
.pcv-full:focus-visible { outline: none; color: var(--accent-2); background: rgba(53, 217, 106, .14); }
.pcv-full svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; display: block; }

/* stage */
.pcv-stage { position: relative; aspect-ratio: 1280 / 578; background: #080b0e; }
.pcv-video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

.pcv-play {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(53, 217, 106, .45); border-radius: 50%;
  background: rgba(6, 8, 7, .58); color: var(--accent);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 10px rgba(53, 217, 106, .07), 0 14px 40px -12px rgba(0, 0, 0, .8);
  transition: opacity .3s, transform .3s cubic-bezier(.2, .7, .2, 1), background .3s, box-shadow .3s;
}
.pcv-play svg { width: 30px; height: 30px; fill: currentColor; display: block; margin-left: 3px; }
.pcv-play:hover { transform: scale(1.07); background: rgba(53, 217, 106, .16);
  box-shadow: 0 0 0 14px rgba(53, 217, 106, .10), 0 14px 40px -12px rgba(0, 0, 0, .8); }
.pcv-play:focus-visible { outline: none; border-color: var(--accent-2); transform: scale(1.07); }
.pcv.is-playing .pcv-play { opacity: 0; transform: scale(.86); pointer-events: none; }

.pcv-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(232, 242, 234, .07); opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.pcv.is-playing .pcv-prog { opacity: 1; }
.pcv-prog i {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(53, 217, 106, .65);
}

.pcv-cap {
  margin-top: 15px; font-size: 13.5px; line-height: 1.55; color: var(--dim);
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.pcv-cap b { color: var(--muted); font-weight: 600; }

/* fullscreen: the frame becomes the whole screen, letterboxing the capture */
.pcv-frame:fullscreen { border: 0; border-radius: 0; background: #000;
  display: flex; flex-direction: column; }
.pcv-frame:fullscreen .pcv-stage { aspect-ratio: auto; flex: 1; background: #000; }
.pcv-frame:fullscreen .pcv-video { object-fit: contain; }

@media (max-width: 720px) {
  .pcv { margin: 22px auto 20px; }
  .pcv-bar { height: 32px; padding: 0 10px; }
  .pcv-title { font-size: 11px; }
  .pcv-play { width: 58px; height: 58px; }
  .pcv-play svg { width: 24px; height: 24px; }
  .pcv-cap { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcv-frame, .pcv-play { transition: none; }
  .pcv:hover .pcv-frame { transform: none; }
}