/* Deep biological evolution modules */
.bio-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin:26px 0}
.bio-panel{border:1px solid #2d2d2d;background:#0d0d0d;padding:22px}
.bio-panel.light{background:#f1f0eb;color:#111}
.bio-panel.light p,.bio-panel.light li{color:#333}
.bio-panel p,.bio-panel li{color:#aaa}
.bio-panel ul{padding-left:1.1rem}
.bio-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #373737;border-radius:999px;padding:5px 9px;font-size:.68rem;color:#aaa;text-transform:uppercase;letter-spacing:.08em}
.bio-callout{margin:18px 0;border-left:3px solid var(--science);padding:15px 18px;background:#10151a;color:#c6d9e6}
.bio-callout.islamic{border-left-color:var(--revelation);background:#17150f;color:#ded4b7}
.bio-callout strong{color:#fff}
.bio-source{font-size:.72rem;color:#8d8d8d;margin-top:9px}
.bio-source a{text-underline-offset:3px}

.deep-details{display:grid;gap:8px;margin-top:18px}
.deep-details details{border:1px solid #2a2a2a;background:#0d0d0d}
.deep-details summary{cursor:pointer;padding:16px 18px;font-weight:700;color:#e8e8e4;list-style:none;display:flex;justify-content:space-between;gap:20px}
.deep-details summary::-webkit-details-marker{display:none}
.deep-details summary:after{content:"+";font-size:1.2rem;color:#777}
.deep-details details[open] summary:after{content:"−"}
.deep-details .detail-body{padding:0 18px 18px;color:#aaa}
.deep-details .detail-body p{margin:.6rem 0}
.deep-details .detail-body strong{color:#e8e8e4}

.evo-river{display:flex;overflow-x:auto;gap:0;border:1px solid #2c2c2c;margin:26px 0;scroll-snap-type:x mandatory}
.evo-stop{min-width:240px;max-width:240px;padding:20px;border-right:1px solid #252525;background:#0c0c0c;scroll-snap-align:start;position:relative}
.evo-stop:last-child{border-right:0}
.evo-stop .age{font-size:.68rem;color:var(--science);text-transform:uppercase;letter-spacing:.08em}
.evo-stop h3{font-size:1.25rem;margin:.4rem 0}
.evo-stop p{font-size:.83rem;color:#9f9f9f}
.evo-stop .glyph{font-size:2.4rem;margin:8px 0 12px}

.protocell-lab{border:1px solid #2d2d2d;background:#0b0b0b;margin:28px 0;padding:20px}
.protocell-grid{display:grid;grid-template-columns:minmax(300px,1fr) 1fr;gap:24px;align-items:center}
#abiogenesisCanvas{width:100%;height:330px;display:block;border:1px solid #2b2b2b;background:radial-gradient(circle at 50% 30%,#174866,#071723 55%,#03080d);border-radius:4px}
.lab-controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.lab-btn{border:1px solid #444;background:#111;color:#ddd;padding:8px 11px;border-radius:999px;cursor:pointer;font-size:.78rem}
.lab-btn.active{background:#f2f1ed;color:#111;border-color:#f2f1ed}
.lab-note{font-size:.76rem;color:#838383}
.stage-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:14px 0}
.stage-meter span{height:5px;background:#242424;border-radius:10px}
.stage-meter span.on{background:#d9d9d9}

.transition-lab{margin:28px 0;border:1px solid #2c2c2c;background:#0c0c0c;padding:22px}
.transition-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.transition-tab{border:1px solid #333;background:#0d0d0d;color:#aaa;padding:8px 11px;cursor:pointer;border-radius:999px;font-size:.76rem}
.transition-tab.active{background:#eae9e4;color:#111}
.transition-view{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.transition-animal{height:210px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid #232323;background:linear-gradient(#071923 0 58%,#684b2c 58% 100%)}
.transition-animal .body{width:130px;height:56px;border-radius:55% 45% 50% 50%;background:#58a8c0;position:relative;transition:.5s}
.transition-animal .tail{position:absolute;width:88px;height:24px;border-radius:100% 0 0 100%;background:#58a8c0;left:38px;top:91px;transform:rotate(10deg);transform-origin:right center;transition:.5s}
.transition-animal .eye{position:absolute;width:7px;height:7px;background:#111;border-radius:50%;right:19px;top:15px}
.transition-animal .fin{position:absolute;width:48px;height:17px;border-radius:60%;border:5px solid #7bd0d0;left:48px;top:120px;transform:rotate(22deg);transition:.5s}
.transition-animal .limb{position:absolute;width:11px;height:65px;background:#6ba46f;left:76px;top:108px;transform:rotate(25deg);transform-origin:top;display:none;transition:.5s}
.transition-animal .limb:after{content:"";position:absolute;width:38px;height:9px;background:#6ba46f;bottom:-1px;left:-3px;border-radius:8px}
.transition-view[data-stage="tetrapod"] .body,.transition-view[data-stage="amniote"] .body{background:#6ba46f;width:120px;height:62px}
.transition-view[data-stage="tetrapod"] .tail,.transition-view[data-stage="amniote"] .tail{background:#6ba46f;width:70px;top:88px}
.transition-view[data-stage="tetrapod"] .fin,.transition-view[data-stage="amniote"] .fin{display:none}
.transition-view[data-stage="tetrapod"] .limb,.transition-view[data-stage="amniote"] .limb{display:block}
.transition-view[data-stage="amniote"] .transition-animal{background:linear-gradient(#253b4a 0 45%,#8d7147 45% 100%)}
.transition-view[data-stage="amniote"] .body{background:#91764c}
.transition-view[data-stage="amniote"] .tail{background:#91764c}
.transition-view[data-stage="amniote"] .limb,.transition-view[data-stage="amniote"] .limb:after{background:#91764c}

.innovation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.innovation{border:1px solid #292929;padding:17px;background:#0d0d0d}
.innovation .n{font-size:.68rem;color:#777}
.innovation b{display:block;margin:6px 0;color:#eee}
.innovation p{font-size:.8rem;color:#9a9a9a;margin:0}

.dino-periods{margin:26px 0;border:1px solid #2d2d2d;background:#0c0c0c;padding:22px}
.dino-timebar{display:grid;grid-template-columns:1.35fr 1.7fr 2.6fr;height:22px;margin:14px 0 18px;border:1px solid #3a3a3a}
.dino-timebar span:nth-child(1){background:#4d3568}
.dino-timebar span:nth-child(2){background:#326a64}
.dino-timebar span:nth-child(3){background:#7a6236}
.dino-period-tabs{display:flex;gap:8px;flex-wrap:wrap}
.dino-tab{padding:8px 13px;background:#111;border:1px solid #3b3b3b;color:#aaa;border-radius:999px;cursor:pointer}
.dino-tab.active{background:#eee;color:#111}
.dino-period-content{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.dino-period-content>div{border-top:1px solid #333;padding-top:14px}
.dino-period-content p{color:#aaa}

.dino-tree{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.dino-branch{border:1px solid #2c2c2c;background:#0d0d0d;padding:20px}
.dino-branch h3{margin-top:0}
.dino-groups{display:grid;gap:6px}
.dino-group{border:1px solid #292929;padding:12px;background:#0a0a0a;cursor:pointer}
.dino-group:hover{border-color:#666}
.dino-group b{display:block;color:#eee}
.dino-group small{color:#888}
.dino-explain{margin-top:18px;border-left:2px solid #777;padding-left:15px;color:#aaa;min-height:88px}

.anatomy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.anatomy-card{border:1px solid #2c2c2c;background:#0d0d0d;padding:18px}
.anatomy-card .icon{font-size:2rem}
.anatomy-card p{font-size:.82rem;color:#9c9c9c}

.extinction-stage{border:1px solid #2c2c2c;background:#070707;overflow:hidden;margin:26px 0}
.extinction-sky{height:250px;position:relative;background:linear-gradient(#102138,#301b13 70%,#080808);transition:1s}
.asteroid{position:absolute;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#f58c4b 35%,#522115 70%);right:16%;top:26px;box-shadow:0 0 25px #ff9f62;}
.dust-layer{position:absolute;inset:0;background:rgba(45,33,25,0);}
.extinction-ground{position:absolute;left:0;right:0;bottom:0;height:62px;background:#161309}
.extinction-copy{padding:18px;color:#aaa}
.extinction-copy strong{color:#fff}

.fossil-lab{display:grid;grid-template-columns:1fr .8fr;gap:20px;margin:25px 0}
.strata{position:relative;height:360px;border:1px solid #302a25;overflow:hidden;background:#14100c}
.layer{position:absolute;left:0;right:0;transition:.6s}
.layer.l1{bottom:0;height:24%;background:#5f4933}
.layer.l2{bottom:24%;height:22%;background:#81664b}
.layer.l3{bottom:46%;height:20%;background:#4b5960}
.layer.l4{bottom:66%;height:17%;background:#6d5941}
.layer.l5{bottom:83%;height:17%;background:#343334}
.fossil-bone{position:absolute;left:38%;bottom:34%;width:120px;height:25px;background:#e6d2a9;border-radius:40% 15% 15% 40%;transform:rotate(-9deg);transition:.6s}
.fossil-bone:after{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:#e6d2a9;left:-17px;top:-8px}
.fossil-bone.mineralized{background:#86a5b5;box-shadow:inset 0 0 0 5px #516a75}
.fossil-bone.mineralized:after{background:#86a5b5}
.fossil-water{position:absolute;left:0;right:0;bottom:20%;height:55%;background:repeating-linear-gradient(120deg,rgba(93,180,215,.0) 0 12px,rgba(93,180,215,.22) 12px 14px);opacity:0;transition:.5s}
.fossil-water.show{opacity:1}
.fossil-controls{display:grid;gap:8px}
.fossil-step{border:1px solid #303030;background:#0d0d0d;color:#aaa;text-align:left;padding:12px;cursor:pointer}
.fossil-step.active{border-color:#aaa;color:#fff}

.fossil-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.fossil-type{border:1px solid #2c2c2c;padding:16px;background:#0d0d0d}
.fossil-type b{display:block;color:#eee}
.fossil-type p{font-size:.79rem;color:#999}

.fuel-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#303030;border:1px solid #303030;margin:24px 0}
.fuel-side{background:#0d0d0d;padding:22px}
.fuel-side h3{margin-top:0}
.fuel-stack{display:flex;height:110px;margin:14px 0;border:1px solid #262626}
.fuel-stack span{flex:1;display:grid;place-items:center;font-size:.7rem;color:#ddd;text-align:center;padding:5px}
.fuel-stack.coal span:nth-child(1){background:#31563e}.fuel-stack.coal span:nth-child(2){background:#403327}.fuel-stack.coal span:nth-child(3){background:#1a1a1a}.fuel-stack.coal span:nth-child(4){background:#050505}
.fuel-stack.oil span:nth-child(1){background:#1d5f77}.fuel-stack.oil span:nth-child(2){background:#756142}.fuel-stack.oil span:nth-child(3){background:#3a342e}.fuel-stack.oil span:nth-child(4){background:#17120d}
.myth-box{border:1px solid #eee;background:#eee;color:#111;padding:18px;margin:18px 0}
.myth-box b{font-family:Georgia,serif;font-size:1.4rem}
.myth-box p{color:#333;margin-bottom:0}

.external-explorer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.external-card{border:1px solid #303030;background:#0d0d0d;padding:20px}
.external-card p{color:#999;font-size:.85rem}
.external-card a{display:inline-block;border-bottom:1px solid #777;text-decoration:none;padding-bottom:2px}

@media(max-width:900px){
  .bio-intro-grid,.protocell-grid,.transition-view,.dino-period-content,.fossil-lab,.fuel-compare,.external-explorer{grid-template-columns:1fr}
  .innovation-grid,.fossil-types{grid-template-columns:1fr 1fr}
  .dino-tree{grid-template-columns:1fr}
  .anatomy-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .innovation-grid,.fossil-types,.anatomy-grid{grid-template-columns:1fr}
  .evo-stop{min-width:210px;max-width:210px}
  #abiogenesisCanvas{height:280px}
}


/* Free-source scientific image system */
.entity-figure{margin:0 0 12px;border:1px solid #292929;background:#090909;overflow:hidden}
.entity-figure img{display:block;width:100%;height:190px;object-fit:cover;background:#111}
.entity-figure.contain img{object-fit:contain;padding:10px;background:#111}
.entity-credit{font-size:.62rem;line-height:1.35;color:#858585;padding:7px 9px;border-top:1px solid #242424}
.entity-credit a{color:#a9a9a9;text-underline-offset:2px}
.species .entity-figure{margin:-19px -19px 14px}
.species .entity-figure img{height:210px}
.dino-group{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.dino-group .mini-img{width:92px;height:72px;object-fit:cover;border:1px solid #292929;background:#111}
.dino-group .mini-copy{min-width:0}
.named-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0}
.named-card{border:1px solid #2c2c2c;background:#0d0d0d;overflow:hidden}
.named-card img{width:100%;height:165px;object-fit:cover;display:block;background:#111}
.named-card .body{padding:12px}
.named-card b{display:block;color:#eee;margin-bottom:4px}
.named-card small{display:block;color:#888;line-height:1.35}
.named-card .credit{padding:0 12px 12px;font-size:.6rem;color:#777;line-height:1.35}
.named-card .credit a{color:#999}
.real-image-note{border:1px solid #333;padding:14px 16px;margin:16px 0;background:#0d0d0d;color:#aaa;font-size:.8rem}
.real-image-note strong{color:#fff}
@media(max-width:900px){.named-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.named-gallery{grid-template-columns:1fr}.dino-group{grid-template-columns:80px 1fr}.dino-group .mini-img{width:80px;height:68px}}


/* Third-party science animations/interactives — embedded from original publishers */
.verified-animation{
  margin:28px 0;border:1px solid #303030;background:#0a0a0a;overflow:hidden;
}
.verified-animation-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding:18px 20px;border-bottom:1px solid #282828;background:#0d0d0d;
}
.verified-animation-head h3{margin:.25rem 0 .35rem;font-size:1.35rem}
.verified-animation-head p{margin:0;color:#999;font-size:.84rem;max-width:760px;line-height:1.5}
.verified-source{
  flex:0 0 auto;border:1px solid #353535;border-radius:999px;padding:6px 9px;
  color:#aaa;text-decoration:none;font-size:.66rem;white-space:nowrap;
}
.verified-source:hover{border-color:#777;color:#fff}
.embed-frame{position:relative;width:100%;background:#050505}
.embed-frame.ratio-16x9{aspect-ratio:16/9}
.embed-frame.deep-history{height:730px}
.embed-frame.tiktaalik{height:680px}
.embed-frame.mass-extinction{height:560px}
.embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050505}
.verified-note{
  padding:10px 18px;border-top:1px solid #242424;color:#777;font-size:.68rem;line-height:1.5;
}
.animation-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0}
.animation-pair .verified-animation{margin:0}
@media(max-width:900px){
  .animation-pair{grid-template-columns:1fr}
  .verified-animation-head{display:block}
  .verified-source{display:inline-block;margin-top:10px}
  .embed-frame.deep-history{height:600px}
  .embed-frame.tiktaalik{height:600px}
  .embed-frame.mass-extinction{height:520px}
}
@media(max-width:600px){
  .embed-frame.deep-history{height:520px}
  .embed-frame.tiktaalik{height:500px}
  .embed-frame.mass-extinction{height:500px}
}