:root{--forest:#173b31;--ink:#203128;--paper:#f7f6f1;--line:#dfe6dc;--accent:#d7e7a8;--muted:#65766b}
html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Inter,Manrope,Segoe UI,system-ui,sans-serif}
header{max-width:1600px;background:var(--paper);border-bottom:1px solid #e0e6dd}header nav a,header nav button{font-weight:650}header .brand{letter-spacing:-.06em}
main{max-width:1600px;width:min(96%,1560px);display:flex;flex-direction:column;gap:0}
.intro{order:0;position:relative;display:flex;align-items:center;overflow:hidden;min-height:365px;margin:18px 0 22px;padding:48px clamp(24px,5vw,76px);border-radius:20px;background:#17372c;color:#fff;isolation:isolate}
.intro:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,37,29,.98) 0%,rgba(10,37,29,.82) 33%,rgba(10,37,29,.14) 72%,rgba(10,37,29,.06) 100%)}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2}
.hero-copy{position:relative;max-width:710px}.intro .eyebrow{color:#d9ecb1;font-size:10px;letter-spacing:.22em;margin:0 0 18px}.intro h1{font:500 clamp(40px,5vw,75px)/1.01 Georgia,Times New Roman,serif;letter-spacing:-.055em;margin:0 0 18px;color:white}.intro h1 em{font-style:italic;color:#d7e9ae}.intro .lead{max-width:560px;color:#ecf3e6;font-size:clamp(13px,1.2vw,17px);line-height:1.6;margin:0 0 24px}
.hero-link{display:inline-flex;gap:30px;align-items:center;padding:12px 18px;border-radius:999px;background:#e9f4c6;color:#1d3c31;text-decoration:none;font-size:12px;font-weight:800;box-shadow:0 8px 24px #0a241e40}.hero-link:hover{background:white}.hero-caption{position:absolute;right:22px;bottom:18px;padding:7px 10px;border-radius:5px;background:#0d251c9c;color:#f1f5ea;font-size:9px;letter-spacing:.03em}
.atlas-summary{order:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.atlas-summary>div{display:flex;align-items:baseline;gap:14px;min-width:0;padding:15px 20px;background:#fff;border:1px solid #e3e8df;border-radius:12px}.atlas-summary strong{font:500 clamp(25px,2.6vw,36px)/1 Georgia,serif;color:var(--forest)}.atlas-summary span{font-size:11px;color:#647469}
.explorer{order:2;display:grid;grid-template-columns:minmax(225px,260px) minmax(0,1fr) minmax(255px,305px);gap:14px;margin:0;align-items:start;scroll-margin-top:14px}
#library,.viewer,.taxa-panel{min-width:0;border:1px solid #dce4da;border-radius:14px;background:#fff;box-shadow:0 8px 30px #193b2a09}
#library{position:sticky;top:12px;padding:18px 12px 16px;max-height:calc(100vh - 24px);overflow:auto}
#library .section-label{padding:0 8px}#library .section-label h2,.taxa-head h2{font:600 22px/1.1 Georgia,serif;white-space:normal;letter-spacing:-.035em;color:#1b3e32}
#library .aside-intro{margin:13px 8px 18px;font-size:11px;line-height:1.55;color:#67776c}
.categories{display:block;margin:0}.category{width:100%;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:transparent;border-radius:9px;padding:8px 9px;text-align:left;color:#263e32}.category:hover{background:#f3f7ee}.category.active{background:#edf3e6;border-color:#d6e4cf}.category img{width:46px;height:46px;flex:none;object-fit:cover;border-radius:7px}.category .category-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:7px;background:#e6ebdf}.category strong{font-size:12px}.category small{display:block;font-size:9px;color:#708074;margin-top:3px}.category .arrow{margin-left:auto;color:#7d9581}
.subnav{display:block;padding:4px 2px 8px 15px}.subnav button{display:block;width:100%;padding:8px 8px 8px 15px;border:none;border-left:1px solid #d9e3d7;background:transparent;text-align:left;color:#64736a;font-size:10px;line-height:1.3;white-space:normal}.subnav button:hover{color:#173b31;background:#f6f9f2}.subnav button.selected{border-left:3px solid #2c7358;color:#174534;background:#f0f6e9;font-weight:800}
.primate-picker{padding:9px 0 0 8px}.primate-picker details{border-top:1px solid #e7ece3;padding-top:9px}.primate-picker summary{cursor:pointer;color:#365b43;font-size:10px;font-weight:750}.primate-picker p{font-size:10px;color:#6e7b70;line-height:1.4;margin:8px 0}.primate-picker label{font-size:10px;margin:6px 0}.primate-picker>details>div{display:flex;gap:5px;flex-wrap:wrap}.primate-picker button{border:1px solid #cbd7c5;background:#edf4e5;border-radius:5px;padding:6px 8px;font-size:10px;color:#294b39}.primate-picker input{width:75px;padding:5px;border:1px solid #cbd7c5;border-radius:5px}
.library-note{margin:14px 8px 0;padding:14px 0 0}.library-note strong{font-size:10px}.library-note p{font-size:10px;line-height:1.5;margin:5px 0 0}.library-note>span{display:none}
.viewer{overflow:hidden}.viewer-top{padding:22px 22px 18px;align-items:flex-start}.viewer-top h2{font:500 clamp(25px,2.3vw,33px)/1.1 Georgia,serif;color:#1b4031;letter-spacing:-.045em}.viewer-top .eyebrow{color:#6a816e}.exports{display:flex;flex-wrap:wrap;justify-content:flex-end}.exports button{border:1px solid #cfdccd;background:#f6f9f2;color:#285742;font-weight:800;font-size:10px;border-radius:7px;padding:8px 10px}.exports button:hover{background:#e4f0d9}
.viewer-tools{padding:12px 20px;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;border-color:#e8ece4}.segments{background:#edf2e9}.segments button{font-size:10px}.search-wrap{margin-left:auto;width:min(100%,190px);min-width:155px}.search-wrap input{width:100%;font-size:11px}.overview-button{border:1px solid #d8e3d3;border-radius:6px;padding:8px 10px;background:white;color:#3f654d;font-size:10px;font-weight:700;cursor:pointer}.overview-button:hover{background:#eff5e9}
.tree-stage{height:610px;min-height:0;overflow:hidden;background-color:#fbfcf8;background-image:radial-gradient(#dfe8d8 .7px,transparent .7px);background-size:20px 20px;touch-action:none}.tree-stage:fullscreen{height:100vh;background-color:#fbfcf8}#tree{display:block;width:100%;height:100%;min-width:0;min-height:0;cursor:grab;touch-action:none}#tree:active{cursor:grabbing}#tree text{font-family:Segoe UI,system-ui,sans-serif}
.zoom-tools{display:flex;gap:3px;align-items:center;right:14px;bottom:14px;z-index:3;padding:4px;background:#fffffff2;border:1px solid #dce7d7;border-radius:8px;box-shadow:0 5px 18px #193c261c}.zoom-tools button{min-width:34px;min-height:31px;color:#28523b}.zoom-tools #resetZoom{min-width:52px}
.tree-meta{padding:13px 20px;gap:10px;flex-wrap:wrap;border-top:1px solid #e9eee7;font-size:10px}.tree-description{padding:14px 20px}.tree-description p{line-height:1.5}.tree-description #description{font-size:11px;color:#44584b}#speciesDetail{margin:0 20px 16px;padding:10px 12px;border-radius:7px;background:#eff5e9;color:#2f5a41;font-size:11px}
.taxa-panel{position:sticky;top:12px;overflow:hidden}.taxa-head{padding:20px 17px 13px;border-bottom:1px solid #e5ece2}.taxa-head .eyebrow{font-size:9px;color:#6a866b;margin:0 0 7px}.taxa-head h2{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin:0 0 8px}.taxa-head h2 span{font:700 12px/1 Segoe UI,system-ui,sans-serif;color:#286a4a}.taxa-head p{font-size:10px;line-height:1.5;color:#718174;margin:0}
.taxa-list{height:575px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b8c9ba transparent}.taxon{display:flex;align-items:center;width:100%;gap:10px;min-height:50px;padding:7px 14px;border:0;border-bottom:1px solid #eff2ec;background:white;text-align:left;cursor:pointer;color:#294133}.taxon:hover,.taxon.active{background:#edf5e6}.taxon-number{font:700 9px/1.2 Consolas,monospace;color:#8da090;min-width:26px}.taxon-label{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.taxon-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}.taxon-label small{font-size:9px;color:#788678}.taxon-arrow{color:#7c9a7a}.taxa-pager{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px 14px;border-top:1px solid #e9eee6;font-size:9px;color:#5a6f60}.taxa-pager button,.taxa-jump button{border:1px solid #d2decf;background:#f3f7ef;border-radius:5px;color:#2f5b42;padding:5px 9px;cursor:pointer}.taxa-pager button:disabled{opacity:.4;cursor:default}.taxa-jump{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px 13px;color:#6c7e70;font-size:10px}.taxa-jump input{width:65px;border:1px solid #d2decf;border-radius:5px;padding:5px;text-align:center;color:#2c5039}
.upload-card{order:3;margin-top:38px;scroll-margin-top:20px;padding:25px;border-radius:15px}.upload-card .section-label h2{font:600 26px/1.1 Georgia,serif;color:#1d4132}.how{order:4;margin-top:36px}footer{order:5;margin-top:25px}
:focus-visible{outline:3px solid #89b97b;outline-offset:2px}
@media(max-width:1250px){.explorer{grid-template-columns:220px minmax(0,1fr)}.taxa-panel{grid-column:2;position:static}.taxa-list{height:300px}#library{max-height:850px}}
@media(max-width:850px){main{width:min(94%,720px)}.intro{min-height:315px;padding:35px 28px}.intro:after{background:linear-gradient(90deg,#0c2c24ef 0%,#0c2c24b5 70%,#0c2c2460 100%)}.hero-image{object-position:64% center}.hero-copy{max-width:550px}.hero-caption{display:none}.atlas-summary{grid-template-columns:repeat(3,1fr)}.atlas-summary>div{display:block;padding:12px}.atlas-summary strong{display:block;margin-bottom:4px}.explorer{display:block}#library,.viewer,.taxa-panel{position:static;margin-bottom:12px;max-height:none}#library{overflow:visible}.categories{display:flex;flex-wrap:wrap;gap:5px}.category{order:0;width:calc(50% - 3px);padding:5px;gap:7px}.category img,.category .category-icon{width:35px;height:35px}.category small{display:none}.category strong{font-size:10px}.subnav{order:1;width:100%;display:flex;flex-wrap:wrap;padding:6px 0;gap:5px}.subnav button{width:auto;border:1px solid #d9e3d7;border-radius:5px;padding:7px}.subnav button.selected{border:1px solid #2c7358}.primate-picker{width:100%;padding:8px 0}.taxa-list{height:360px}.tree-stage{height:520px}}
@media(max-width:560px){header{padding:12px 3%}header nav{gap:8px}header nav a{font-size:10px}header .header-tag{display:none}main{width:96%}.intro{min-height:300px;margin:8px 0 12px;padding:23px}.intro h1{font-size:43px}.intro .lead{font-size:12px;max-width:290px}.hero-link{font-size:11px;padding:10px 14px}.atlas-summary{gap:5px}.atlas-summary>div{padding:9px 8px}.atlas-summary strong{font-size:20px}.atlas-summary span{font-size:8px;line-height:1.3}.viewer-top{padding:16px}.viewer-top h2{font-size:25px}.exports button{font-size:9px;padding:6px}.viewer-tools{padding:10px}.search-wrap{order:3;width:100%;margin-left:0}.tree-stage{height:460px}.tree-meta{padding:10px 15px}.tree-description{padding:12px 15px}.category{width:calc(50% - 3px)}.category img{width:32px;height:32px}}
.intro{min-height:500px}.hero-image{left:auto;right:0;width:61%;height:100%;object-fit:cover;object-position:59% center}.intro:after{background:linear-gradient(90deg,#0b2b22 0%,#0b2b22 33%,#0b2b22d9 47%,#0b2b2255 70%,#0b2b2200 100%)}
.catalog-pictogram{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:10px;background:#e4efe0}.catalog-pictogram svg{width:36px;height:36px;display:block}.catalog-pictogram--small{width:29px;height:29px;border-radius:7px;background:#edf4e9}.catalog-pictogram--small svg{width:23px;height:23px}.catalog-pictogram--person{background:#e1ebdf}.catalog-pictogram--bird,.catalog-pictogram--fish,.catalog-pictogram--jelly{background:#e0eeeb}.catalog-pictogram--flower,.catalog-pictogram--mushroom,.catalog-pictogram--shell{background:#f4e8dd}.catalog-pictogram--network,.catalog-pictogram--cell,.catalog-pictogram--microbe{background:#e9eee6}
.category .catalog-pictogram{width:46px;height:46px}.subnav button[data-tree]{display:flex;align-items:center;gap:8px;min-height:38px}.subnav button[data-tree] .catalog-pictogram{display:inline-flex;float:none;padding:0}.subnav button .subcategory-label{display:block;float:none;flex:1;padding:0;font-size:10px;line-height:1.25}.subnav button.selected .catalog-pictogram{background:#dcebd5}
@media(max-width:950px){.intro{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0}.intro:after{display:none}.hero-copy{max-width:none;padding:31px 30px 28px}.hero-image{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}.intro .lead{max-width:610px}}
@media(max-width:560px){.intro{padding:0;min-height:0}.hero-copy{padding:25px 22px}.intro .lead{max-width:none}.category .catalog-pictogram{width:34px;height:34px;border-radius:7px}.category .catalog-pictogram svg{width:27px;height:27px}.subnav button[data-tree] .catalog-pictogram{display:inline-flex}}