:root { color-scheme: dark; --bg: #091515; --text: #e8f3f3; --muted: #abc0c0; --accent: #c0e0e0; --line: #294646; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.7 Inter,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover, button:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.wrap { width: min(1180px,calc(100% - 140px)); margin-inline: auto; }
.header { min-height: 110px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 28px; font-weight: 500; letter-spacing: -.6px; }
.brand span { font-weight: 400; color: var(--accent); }
.brand img { display: block; width: 168px; height: 48px; object-fit: contain; }
.header nav { display: flex; align-items: center; gap: 30px; font-size: 16px; }
#language { padding: 6px 12px; background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--text); min-width: 56px; }
.hero { padding: 70px 0 65px; }
.release { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.release>span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
h1 { margin: 28px 0 22px; font-size: clamp(44px,5.7vw,76px); font-weight: 550; letter-spacing: -3px; line-height: 1.2; }
h1 em { font-style: normal; color: var(--accent); }
.intro { max-width: 800px; text-wrap: pretty; font-size: 22px; line-height: 1.8; color: var(--muted); margin: 0; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 35px; background: var(--accent); color: #102929; padding: 12px 24px; border-radius: 6px; font-size: 18px; font-weight: 550; }
.button:hover { background: #daefef; color: #102929; }
.technology { font-size: 16px; color: var(--muted); }
.motion-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 25px; color: var(--muted); font-size: 16px; }
#motion-toggle { background: transparent; border: 0; color: var(--muted); font-size: 15px; padding: 8px; }
.capability-stack { display: flex; flex-direction: column; }
.feature-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 70px; min-height: 400px; padding: 45px 0; border-top: 1px solid var(--line); scroll-margin-top: 135px; }
.feature-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.diagram { grid-column: 2; grid-row: 1; width: 100%; max-width: 500px; margin: 0 auto; min-width: 0; }
.diagram svg { width: 100%; height: auto; display: block; }
h2 { margin: 0 0 22px; font-size: 36px; font-weight: 500; line-height: 1.4; letter-spacing: -.6px; text-wrap: pretty; }
.feature-copy p { margin: 0; font-size: 21px; color: var(--muted); line-height: 1.8; }
.svg-label { fill: #d1e2d7; font: 18px "Helvetica Neue","PingFang SC",sans-serif; }
.svg-note { fill: #aebfb3; font: 16px "Helvetica Neue","PingFang SC",sans-serif; }
.rust-label { display: block; margin-bottom: 17px; font-size: 14px; letter-spacing: 1.5px; color: var(--accent); }
.engine-word { fill: #d3f5d8; font: 36px monospace; }
.data-note { font-size: 14px; color: var(--muted); }
#replay-status:empty { display: none; }
.api-class { fill: #a5bcb0; font: 23px monospace; }
.api-step { fill: #6e8e7d; animation: api-step 4.8s infinite; }
.api-step text { font: 26px monospace; }
.api-step-two { animation-delay: -3.2s; }
.api-step-three { animation-delay: -1.6s; }
.api-result { fill: #e1d19a; font: 25px monospace; }
.api-trace { stroke-dasharray: 22 280; animation: api-flow 4.8s linear infinite; }
.section-dots { position: fixed; z-index: 5; top: 50%; left: max(14px,calc((100vw - 1180px)/2 - 66px)); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.section-dots a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.section-dots span { width: 6px; height: 6px; border-radius: 50%; background: #5c7769; transition: background .2s,transform .2s; }
.section-dots a[aria-current] span { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 0 5px #b8efd015; }
.section-dots a:hover span { background: var(--accent); }
.install-section { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 50px 0; border-top: 1px solid var(--line); }
.install { min-width: 0; width: min(470px,100%); }
.command { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px solid #3e5949; border-radius: 6px; }
.command code { font: 17px "SFMono-Regular",Consolas,monospace; }
.copy { padding: 7px 9px; border: 0; border-left: 1px solid #3e5949; background: none; color: var(--accent); font-size: 15px; white-space: nowrap; }
.install p { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.install p span { padding-inline: 10px; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 23px 0 30px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.skip { position: absolute; top: -100px; left: 20px; background: var(--accent); color: var(--bg); padding: 10px; }
.skip:focus { top: 10px; z-index: 20; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[lang=en] h1 { font-size: clamp(44px,5.2vw,69px); }
html[lang=en] h1>span { display: block; }
@keyframes api-step { 0%,28% { fill: #c2f3d2; } 34%,100% { fill: #6e8e7d; } }
@keyframes api-flow { to { stroke-dashoffset: -302; } }
@media(max-width:1000px) {
  .feature-card { gap: 35px; min-height: 390px; padding: 50px 0; }
  h2 { font-size: 30px; }
  .feature-copy p { font-size: 19px; }
  .command { flex-wrap: wrap; }
}
@media(max-width:720px) {
  .wrap { width: calc(100% - 70px); margin-left: 44px; margin-right: 26px; }
  .section-dots { left: 5px; gap: 6px; }
  .section-dots a { width: 26px; height: 28px; }
  .section-dots span { width: 5px; height: 5px; }
  .header { min-height: 85px; gap: 10px; }
  .brand { font-size: 21px; gap: 4px; }
  .brand img { width: 112px; height: 32px; }
  .header nav { gap: 12px; font-size: 14px; }
  .header nav>a:first-child { display: none; }
  #language { min-width: 36px; padding: 4px 6px; }
  .hero { padding: 40px 0; }
  .release { font-size: 13px; }
  h1,html[lang=en] h1 { font-size: clamp(34px,8.5vw,52px); letter-spacing: -1.5px; }
  h1>span,h1 em { display: block; }
  .intro { font-size: 19px; }
  .motion-toolbar { font-size: 14px; gap: 8px; }
  #motion-toggle { font-size: 13px; flex-shrink: 0; }
  .feature-card { grid-template-columns: 1fr; gap: 28px; padding: 38px 0; }
  .feature-copy { grid-column: 1; grid-row: 1; }
  .diagram { grid-column: 1; grid-row: 2; max-width: 390px; }
  h2 { font-size: 27px; }
  .feature-copy p { font-size: 19px; }
  .install-section { flex-direction: column; align-items: flex-start; gap: 28px; }
  .command { padding: 12px; }
  .command code { font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .section-dots span { transition: none; } }
.aggregate-cells rect { animation: aggregate-update 3.6s ease-in-out infinite; }
.aggregate-cells rect:nth-child(3n + 1) { animation-delay: -.9s; }
.aggregate-cells rect:nth-child(3n + 2) { animation-delay: -1.8s; }
.aggregate-cells rect:nth-child(3n) { animation-delay: -2.7s; }
.life-stage rect { fill: #16392e; stroke: #608c71; animation: stage-active 6s infinite; }
.life-stage text { fill: #d1e2d7; font: 16px "Helvetica Neue", "PingFang SC", sans-serif; }
.hook-label { fill: #e9ce8f; font: 16px monospace; }
.drive-conversion { animation: homing-copy 3s infinite; }
.drive-arrow { stroke-dasharray: 12 6; animation: arrow-flow 1.8s linear infinite; }
.data-blocks rect { animation: data-throughput 1.6s ease-in-out infinite; }
.data-blocks rect:nth-child(2) { animation-delay: -.55s; }
.data-blocks rect:nth-child(3) { animation-delay: -1.1s; }
.engine-core { animation: engine-compute 1.6s ease-in-out infinite; }
.result-line { stroke-dasharray: 160; animation: result-output 1.6s ease-in-out infinite; }
@keyframes aggregate-update { 0%,100% { opacity: .18; } 40% { opacity: .95; } 70% { opacity: .5; } }
@keyframes stage-active { 0%,18% { fill: #467e59; stroke: #d0f7d5; } 23%,100% { fill: #16392e; stroke: #608c71; } }
@keyframes homing-copy { 0%,20% { stroke: #577c6a; } 55%,90% { stroke: #b8efd0; } 100% { stroke: #577c6a; } }
@keyframes arrow-flow { to { stroke-dashoffset: -36; } }
@keyframes data-throughput { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
@keyframes engine-compute { 0%,100% { fill: #1c3c2c; } 50% { fill: #386448; } }
@keyframes result-output { 0% { stroke-dashoffset: 160; opacity: .2; } 70%,100% { stroke-dashoffset: 0; opacity: 1; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.drive-result-d { animation: drive-label 3s infinite; }
.drive-result-w { animation: wild-label 3s infinite; }
@keyframes drive-label { 0%,20% { opacity: 0; } 55%,90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wild-label { 0%,20% { opacity: 1; } 55%,90% { opacity: 0; } 100% { opacity: 1; } }
.genetics-chromosomes { animation: create-chromosomes 9s ease-in-out infinite; }
.chromosome-rails path { stroke-dasharray: 1; animation: draw-chromosomes 9s ease-in-out infinite; }
.genetics-loci { animation: add-loci 9s ease-in-out infinite; }
.genetics-alleles { animation: add-alleles 9s ease-in-out infinite; }
.genetics-allele-options { fill: #d1e2d7; font: 21px monospace; }
@keyframes create-chromosomes { 0%,100% { opacity: 0; } 8%,92% { opacity: 1; } }
@keyframes draw-chromosomes { 0% { stroke-dashoffset: 1; } 22%,100% { stroke-dashoffset: 0; } }
@keyframes add-loci { 0%,27%,100% { opacity: 0; } 39%,92% { opacity: 1; } }
@keyframes add-alleles { 0%,51%,100% { opacity: 0; } 64%,92% { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  .genetics-card svg * { animation: none !important; }
}

.life-stage[data-stage="1"] rect { animation-delay: -3.6s; }
.life-stage[data-stage="2"] rect { animation-delay: -1.2s; }
.hook-junction { animation: between-stage-hook 6s infinite; }
.hook-two { animation-delay: -3.6s; }
.hook-wire { stroke-dasharray: 5 4; }
.preset-label { fill: #d1e2d7; font: 19px "Helvetica Neue","PingFang SC",sans-serif; }
.allele-letter { fill: #d1e2d7; font: 24px monospace; }
.mutant-letter { fill: #16392e; }
.mutation-arrow,.toxin-arrow { stroke-dasharray: 10 6; animation: arrow-flow 2s linear infinite; }
.mutant-allele { animation: mutation-reveal 3.2s ease-in-out infinite; }
.disrupted-allele { fill: #e2aa95; animation: mutation-reveal 4.2s ease-in-out infinite; }
.toxin-loss { animation: toxin-loss 4.2s ease-in-out infinite; }
.toxin-rescue { animation: toxin-rescue 4.2s ease-in-out infinite; }
@keyframes between-stage-hook { 0%,19%,40%,100% { opacity: .35; } 23%,35% { opacity: 1; } }
@keyframes mutation-reveal { 0%,15%,100% { opacity: .35; } 45%,85% { opacity: 1; } }
@keyframes toxin-loss { 0%,25%,100% { opacity: .9; } 60%,85% { opacity: .25; } }
@keyframes toxin-rescue { 0%,25%,100% { opacity: .4; } 60%,85% { opacity: 1; } }

.hook-before { animation-delay: -4.7s; }
.preset-deck { position: relative; width: calc(100% - 30px); height: 270px; margin: 35px 0 0; isolation: isolate; }
.preset-slide { position: absolute; inset: 0; padding: 26px 22px; background: #11241c; border: 1px solid #456650; border-radius: 12px; box-shadow: 0 18px 40px #0003; transition: transform .65s ease,opacity .65s ease; transform-origin: center; }
.preset-slide[data-position="0"] { z-index: 3; transform: translate(0,0); opacity: 1; }
.preset-slide[data-position="1"] { z-index: 2; transform: translate(15px,-17px) scale(.97); opacity: .8; }
.preset-slide[data-position="2"] { z-index: 1; transform: translate(30px,-34px) scale(.94); opacity: .55; }
.preset-slide h3 { margin: 0 0 18px; font-size: 23px; font-weight: 500; }
.preset-slide:not([data-position="0"]) > * { visibility: hidden; }
.preset-slide svg { width: 100%; height: auto; }
.preset-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.preset-pagination button { background: none; border: 0; padding: 10px 4px; }
.preset-pagination span { display: block; width: 28px; height: 3px; background: #42604f; border-radius: 3px; }
.preset-pagination [aria-pressed="true"] span { background: var(--accent); }
@media(max-width:1000px) { .preset-deck { height: 230px; } .preset-slide { padding: 22px 16px; } .preset-slide h3 { font-size: 20px; } }
@media(max-width:720px) { .preset-deck { height: 215px; } .preset-slide h3 { font-size: 19px; } }
@media(prefers-reduced-motion:reduce) { .preset-slide { transition: none; } }

.life-phase rect { fill: #16392e; stroke: #608c71; }
.life-phase text { fill: #d1e2d7; font: 16px "Helvetica Neue", "PingFang SC", sans-serif; text-anchor: middle; }
.life-phase[data-active="true"] rect { fill: #467e59; stroke: #d0f7d5; }

.life-hook-node { fill: #1d3027; stroke: #e9ae80; stroke-width: 2; }
.life-inserted-hook text { fill: #e9ae80; }
.life-inserted-hook[data-active="true"] .life-hook-node { fill: #e9ae80; }

.header nav a { white-space: nowrap; }
@media(max-width:380px) {
  .brand { font-size: 18px; }
  .brand img { width: 91px; height: 26px; }
  .header nav { gap: 8px; font-size: 12px; }
  #language { min-width: 44px; padding: 4px 8px; }
}

.header-shell { position: sticky; top: 0; z-index: 10; background: var(--bg); }
@media(max-width:720px) { .feature-card { scroll-margin-top: 110px; } }

.natal-full-name { margin: 0 0 22px; max-width: 780px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.natal-full-name strong { color: var(--accent); font-weight: 600; }
.start-actions { display: flex; align-items: center; gap: 18px; }
.version { color: var(--muted); font-size: 15px; }
.hero-actions .command { margin: 0; }
.section-dots[hidden] { display: none; }
@media(max-width:720px) {
  .natal-full-name { font-size: 14px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
}