:root{--ink:#e9f2ef;--mute:#8aa39c;--cyan:#6ff3e0;--green:#7dffb0;--red:#ff5d6c;--line:rgba(160,255,230,.14);--glass:rgba(6,12,12,.72)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:#030606;color:var(--ink);font:400 15px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-family:Fraunces,serif;font-style:italic;font-weight:400;color:var(--cyan)}

.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh*1376/768));aspect-ratio:1376/768;transform:translate(-50%,-50%)}
.bg{position:absolute;inset:0;width:100%;height:100%}
#dish{position:absolute;left:31.47%;top:16.8%;width:37.06%;aspect-ratio:1;cursor:crosshair;border-radius:50%}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 50% 50%,transparent 60%,rgba(3,6,6,.65)),linear-gradient(180deg,rgba(3,6,6,.6),transparent 18%,transparent 80%,rgba(3,6,6,.9))}
header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:18px 26px;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font:600 20px Fraunces,serif;letter-spacing:-.01em}
.brand i{width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.brand span{font:600 11px 'JetBrains Mono';color:var(--cyan);letter-spacing:.12em}
.sp{flex:1}
.pill{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);padding:8px 12px;font:600 12px Inter;border-radius:8px;backdrop-filter:blur(8px)}
.pill:hover{border-color:var(--cyan)}
.ca code{font:500 12px 'JetBrains Mono';max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca b{color:var(--cyan)}

.intro{position:absolute;left:3.5vw;top:17vh;width:min(330px,26vw);z-index:4}
.kick{display:flex;align-items:center;gap:8px;font:600 11px 'JetBrains Mono';letter-spacing:.16em;color:var(--cyan)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.intro h1{font:300 clamp(32px,3.4vw,52px)/1.02 Fraunces,serif;margin:14px 0}
.intro p{color:#b9cdc7;font-size:14.5px}
.intro .hint{margin-top:12px;font:500 12px 'JetBrains Mono';color:var(--green)}

.panel{position:absolute;right:2.5vw;top:12vh;width:min(330px,26vw);z-index:4;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px;backdrop-filter:blur(10px);max-height:80vh;overflow:auto}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:10px;overflow:hidden}
.grid div{background:rgba(3,8,8,.9);padding:10px 12px}
.grid span,.cgrid span{display:block;font:500 10px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.grid b{font:600 24px 'JetBrains Mono'}
#graph{width:100%;margin-top:12px;display:block}
.gl{display:flex;gap:12px;font:500 11px 'JetBrains Mono';color:var(--mute);margin-top:4px}
.gl i{display:inline-block;width:9px;height:2px;margin-right:5px;vertical-align:middle}
.c1{background:var(--cyan)}.c2{background:var(--green);opacity:.6}
.dr{color:#ffb24d;margin-left:auto;animation:pulse 1s infinite}
.ft{font:600 10px 'JetBrains Mono';letter-spacing:.14em;color:var(--mute);margin:14px 0 6px;text-transform:uppercase}
.famrow{display:grid;grid-template-columns:70px 1fr 30px;align-items:center;gap:8px;font:500 12px 'JetBrains Mono';margin:4px 0}
.famrow .b{height:6px;border-radius:3px}
#evs div{font:400 12px/1.4 Inter;color:#b9cdc7;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
#evs b{font:600 10px 'JetBrains Mono';margin-right:6px}
#evs .food b{color:var(--green)}#evs .predator b{color:var(--red)}#evs .extinct b{color:#ffb24d}#evs .record b{color:var(--cyan)}#evs .immigrants b,#evs .genesis b,#evs .live b{color:#c9b6ff}

.cell{position:absolute;left:3.5vw;bottom:4vh;width:min(420px,32vw);z-index:6;background:rgba(4,10,10,.92);border:1px solid var(--line);border-radius:14px;padding:16px;backdrop-filter:blur(10px);box-shadow:0 20px 50px -20px #000}
.close{position:absolute;right:12px;top:8px;font-size:22px;color:var(--mute)}
.ch{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ch i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 12px currentColor}
.ch b{font:600 18px Fraunces,serif;display:block}.ch small{font:500 11px 'JetBrains Mono';color:var(--mute)}
#brain{width:100%;display:block;background:rgba(0,0,0,.35);border-radius:10px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cgrid b{font:600 15px 'JetBrains Mono'}
.anc{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.anc i{width:12px;height:12px;border-radius:50%;display:inline-block;position:relative}
.anc i.me{width:16px;height:16px;outline:2px solid #fff}
.anc span{font:500 10px 'JetBrains Mono';color:var(--mute);margin-left:6px}

.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.ex{background:#040909;padding:40px 34px}
.ex .n{font:600 12px 'JetBrains Mono';color:var(--cyan)}
.ex h3{font:400 28px Fraunces,serif;margin:10px 0}
.ex p{color:#a8bdb7}
.fossil{padding:80px 5vw}
.fh h2{font:300 clamp(34px,4.5vw,60px)/1.05 Fraunces,serif;margin:10px 0}
.fh p{color:#a8bdb7;max-width:560px}
.fs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0}
.fs div{border:1px solid var(--line);border-radius:12px;padding:16px}
.fs span{display:block;font:500 10px 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fs b{font:600 28px 'JetBrains Mono'}
.fl div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.fl time{font:500 12px 'JetBrains Mono';color:var(--mute)}
footer{display:flex;justify-content:space-between;gap:20px;padding:22px 5vw 40px;border-top:1px solid var(--line);color:#6f8781;font-size:12px}
@media(max-width:980px){
  .hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .stage{position:relative;left:auto;top:auto;transform:none;width:190vw;margin-left:-45vw;margin-top:-10vw;margin-bottom:-12vw}
  .vig{display:none}
  .intro,.panel,.cell{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:12px}
  .intro{order:-1;margin-top:70px}
  header{padding:12px}.ca code{max-width:90px}
  .explain,.fs{grid-template-columns:1fr}
  footer{flex-direction:column}
}
.intro{transition:opacity .3s}.intro.dim{opacity:0;pointer-events:none}
.tl{margin-top:14px;font:600 12px 'JetBrains Mono';color:#031414;background:var(--cyan);padding:10px 14px;border-radius:8px;box-shadow:0 0 20px rgba(111,243,224,.35)}
.tl:hover{background:#9ffbef}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:5;text-align:center;pointer-events:none;opacity:0;transition:opacity .5s,transform .5s;width:min(640px,80vw)}
.banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner b{display:block;font:300 clamp(34px,5vw,74px)/1 Fraunces,serif;text-shadow:0 0 40px rgba(0,0,0,.9)}
.banner small{display:block;margin-top:10px;font:500 13px 'JetBrains Mono';color:#d6e6e2;text-shadow:0 2px 10px #000}
.banner.cambrian b{color:var(--green)}.banner.massextinction b{color:var(--red)}.banner.species b{color:var(--cyan);font-style:italic}
.tlbar{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:6;width:min(420px,80vw);background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:500 12px 'JetBrains Mono'}
.tlbar i{display:block;height:3px;background:var(--cyan);width:0;margin-top:8px;border-radius:2px}
.science,.guide{padding:80px 5vw;border-top:1px solid var(--line)}
.sh h2{font:300 clamp(34px,4.5vw,60px)/1.05 Fraunces,serif;margin:10px 0}
.sh p{color:#a8bdb7;max-width:620px}
.claim{margin:34px 0 26px;font:300 clamp(26px,3vw,42px)/1.15 Fraunces,serif;color:#fff;max-width:900px}
.claim b{color:var(--green);font-weight:600}
.sci{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.02)}
.sc>span{font:600 10px 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:14px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bar i{display:block;width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(111,243,224,.25))}
.bar b{font:600 11px 'JetBrains Mono';margin-bottom:4px}.bar small{font:500 10px 'JetBrains Mono';color:var(--mute);margin-top:4px;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.card{border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(255,255,255,.02);position:relative}
.card .sw{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.card h4{font:italic 400 26px Fraunces,serif;display:inline}
.card .cn{font:500 12px 'JetBrains Mono';color:var(--mute);margin:6px 0 10px}
.card p{color:#c3d4cf;font-size:14px}
.card .st{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font:500 11px 'JetBrains Mono';color:var(--mute)}
.card .st b{color:#fff}
.card.ex{opacity:.6}.card.ex:after{content:'EXTINCT';position:absolute;right:14px;top:14px;font:600 10px 'JetBrains Mono';color:var(--red);letter-spacing:.12em}
.card.al:after{content:'ALIVE';position:absolute;right:14px;top:14px;font:600 10px 'JetBrains Mono';color:var(--green);letter-spacing:.12em}
@media(max-width:980px){.sci,.cards{grid-template-columns:1fr}.banner b{font-size:30px}}