/* 首页主视觉：真实数据画的活体基因组环（hero-genome.js） */
#hero-genome{position:relative;width:100%;aspect-ratio:1/1;max-height:470px;margin-inline:auto;
  cursor:pointer}
#hero-genome.hg-fail{display:none}
/* app.css 里有 svg{stroke:currentColor;stroke-width:1.7}，那是给界面图标用的。
   这里的图形凡是没显式声明 stroke 的（装饰圆、闪烁点…）都会被继承出一圈近白色描边，
   所以在根上关掉，需要描边的类各自再声明。 */
.hg{display:block;width:100%;height:100%;overflow:visible;stroke:none;stroke-width:1}
.hg text{stroke:none;font-family:var(--mono)}
.hg-ring{fill:none;stroke:var(--line2);stroke-width:1}
.hg-tick{stroke:var(--ink2);stroke-width:1.6;opacity:.8}
.hg-tlab{font-size:19px;fill:var(--ink3);letter-spacing:.06em}
.hg-base{fill:none;stroke:var(--line2);stroke-width:.8;opacity:.7}
.hg-cds{stroke:none}
.hg-cds.f{fill:#39d8c8;opacity:.5}
.hg-cds.r{fill:#5b8cff;opacity:.45}
.hg-skew{stroke:none;animation:hg-breathe 8s ease-in-out infinite}
.hg-skew.up{fill:#48d78a;opacity:.5}
.hg-skew.dn{fill:#ffb648;opacity:.45}
@keyframes hg-breathe{0%,100%{opacity:.42}50%{opacity:.72}}
.hg-mk{stroke-width:2.2;opacity:.75;transition:opacity .25s ease}
.hg-mk.hot{opacity:1}
.hg-orit{stroke:#b779ff;stroke-width:1.4;stroke-dasharray:4 5;opacity:.75}
.hg-oridot{fill:#b779ff;stroke:#0b1220;stroke-width:1.5}
.hg-orilab{font-size:21px;fill:#cba6ff;letter-spacing:.04em;font-weight:500}
.hg-beam{stroke:none}
.hg-beam-edge{stroke:#8ff0e4;stroke-width:1.6;opacity:.75}
.hg-acc{font-size:26px;fill:var(--ink2);letter-spacing:.04em}
.hg-len{font-size:20px;fill:var(--ink3);letter-spacing:.03em}
.hg-cap{font-size:34px;fill:var(--acc);letter-spacing:-.01em;transition:fill .4s ease}
.hg-cap2{font-size:19px;fill:var(--ink3)}

/* 环外的柔光，让主视觉从背景里浮起来 */
.hero-viz:after{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(57,216,200,.10),rgba(91,140,255,.05) 55%,transparent 72%);
  animation:hg-halo 9s ease-in-out infinite}
@keyframes hg-halo{0%,100%{transform:scale(.97);opacity:.75}50%{transform:scale(1.03);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .hg-skew,.hero-viz:after{animation:none}
}
@media (max-width:980px){
  #hero-genome{max-height:360px}
  .hg-tlab{font-size:22px}
  .hg-cap{font-size:38px}
  .hg-acc{font-size:28px}
}

/* 浅色模式：深色那套颜色在近白底上几乎看不见。
   正确做法是换一套够深的颜色，而不是把整体 opacity 压低 —— 压低只会变成一团虚影。 */
:root[data-theme="light"] .hg-cds.f{fill:#0e9e91;opacity:.52}
:root[data-theme="light"] .hg-cds.r{fill:#3463e8;opacity:.42}
:root[data-theme="light"] .hg-gc.up{fill:#8b45e0;opacity:.5}
:root[data-theme="light"] .hg-gc.dn{fill:#8aa0c8;opacity:.5}
:root[data-theme="light"] .hg-skew.up{fill:#12a05f}
:root[data-theme="light"] .hg-skew.dn{fill:#d08400}
@media (prefers-reduced-motion:no-preference){
  :root[data-theme="light"] .hg-skew{animation:hg-breathe-l 8s ease-in-out infinite}
}
@keyframes hg-breathe-l{0%,100%{opacity:.34}50%{opacity:.58}}
:root[data-theme="light"] .hg-mk{opacity:.72}
:root[data-theme="light"] .hg-ins{fill:#1b2740;opacity:.8}
:root[data-theme="light"] .hg-tick{stroke:#7b8aa5}
:root[data-theme="light"] .hg-tlab{fill:#6b7a95}
:root[data-theme="light"] .hg-ring,
:root[data-theme="light"] .hg-base{stroke:#c6d3e7}
:root[data-theme="light"] .hg-orit{stroke:#8b45e0;opacity:.8}
:root[data-theme="light"] .hg-oridot{fill:#8b45e0;stroke:#fff}
:root[data-theme="light"] .hg-orilab{fill:#7b36cf}
:root[data-theme="light"] .hg-beam-edge{stroke:#0e9e91;opacity:.6}
:root[data-theme="light"] .hg-acc{fill:#44536e}
:root[data-theme="light"] .hg-len{fill:#7b8aa5}