:root{
  --cream:#f7f1e3; --paper:#fffdf7; --ink:#17211f; --ink2:#3c4a47;
  --teal:#0e6b62; --teal2:#0a4f48; --teal-soft:#dcefe9; --line:#d8cfba;
  --warn:#8a5a00; --warn-bg:#fdf0d3; --danger:#8c2f2f;
  --radius:10px; --focus:#0a4f48;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.55}
h1,h2,h3,.brand,button,input,select,textarea,label,.chip,.stat b{font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
h1{font-size:1.55rem;margin:0} h2{font-size:1.35rem;margin:.2rem 0 .6rem} h3{font-size:1.05rem;margin:1.2rem 0 .5rem}
a{color:var(--teal2);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:60}
.skip:focus{left:0}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:var(--ink);color:#f3efe2;padding:1.4rem 1.1rem;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar a{color:#7fd1c0}
header.oddsprig-nav-header{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.oddsprig-brand{color:var(--ink)}
.oddsprig-main-nav>a{color:var(--ink2)}
.oddsprig-main-nav>a:hover,.oddsprig-main-nav>a[aria-current="page"]{color:var(--teal2);border-bottom-color:var(--teal2)}
#panel-overview{min-height:80vh}
.brand{display:flex;gap:.7rem;align-items:center}
.brand-mark{width:44px;height:44px;border:2px solid #7fd1c0;border-radius:50%;display:grid;place-items:center;color:#7fd1c0;font-size:1.3rem}
.brand strong{display:block;letter-spacing:.14em;font-size:1.15rem}
.brand span{display:block;font-size:.8rem;color:#c9d6d1}
.checked{font-size:.82rem;color:#c9d6d1;border-bottom:1px solid #33413d;padding-bottom:.8rem}
.tabs{display:flex;flex-direction:column;gap:.25rem;margin:1rem 0}
.tabs button{text-align:left;background:transparent;border:1px solid transparent;color:#e9e4d3;padding:.62rem .7rem;border-radius:8px;cursor:pointer;font-size:.95rem}
.tabs button:hover{background:#243330}
.tabs button[aria-selected="true"]{background:var(--teal);color:#fff;border-color:#3aa696}
.side-note{border-top:1px solid #33413d;padding-top:.8rem;font-size:.88rem;color:#d8ded6}
.side-note h2{font-size:.95rem;color:#fff}
.side-actions{display:flex;flex-direction:column;gap:.45rem;margin-top:1rem}
.main{padding:1.4rem clamp(1rem,3vw,2.4rem) 5rem;min-width:0}
.toolbar{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1.4rem}
.toolbar p{margin:.25rem 0 .8rem;color:var(--ink2)}
.controls{display:flex;flex-wrap:wrap;gap:.9rem;align-items:end}
.controls label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--ink2)}
.controls label.check{flex-direction:row;align-items:center;padding-bottom:.55rem}
input,select,textarea{border:1px solid #b9ac8d;border-radius:8px;padding:.55rem .65rem;background:#fff;color:var(--ink);font-size:.95rem}
input[type="search"]{min-width:min(340px,80vw)}
textarea{width:100%}
.result-count{font-size:.9rem;color:var(--teal2);margin:.7rem 0 0!important;min-height:1.4em}
.import-banner{background:var(--warn-bg);color:var(--warn);border:1px solid #e3c87e;border-radius:8px;padding:.6rem .8rem}
.hero{display:grid;grid-template-columns:1.25fr .85fr;gap:1.6rem;align-items:start}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin:1rem 0;min-height:84px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.stat b{display:block;font-size:1.5rem;color:var(--teal2)}
.stat span{font-size:.82rem;color:var(--ink2)}
.breakdown{display:flex;flex-wrap:wrap;gap:.45rem;min-height:60px}
#watchlistOverview{min-height:76px}
.cell-fig{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.cell-fig figcaption{font-size:.85rem;color:var(--ink2);margin-top:.5rem}
.cell-body{fill:#eef6f1;stroke:var(--teal);stroke-width:2.5}
.cell-inner{fill:none;stroke:#9ccabc;stroke-dasharray:4 5}
.nucleus{fill:#bfe0d6;stroke:var(--teal2);stroke-width:2}
.nucleolus{fill:var(--teal)}
.mito{fill:#f2d492;stroke:#b98a2e;stroke-width:1.5}
.vesicle{fill:#fff;stroke:var(--teal);stroke-width:1.5}
.dna{stroke:var(--teal2);stroke-width:2;stroke-linecap:round}
.lede{max-width:72ch;color:var(--ink2)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin:.8rem 0 1.4rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.card h3{margin:0;font-size:1.02rem}
.card h3 button{all:unset;cursor:pointer;color:var(--teal2);font:inherit;font-weight:700}
.card h3 button:hover{text-decoration:underline}
.card p{margin:0;font-size:.93rem}
.card .meta{font-size:.83rem;color:var(--ink2)}
.card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border-top:1px solid #eee3cb;padding-top:.6rem}
.chip{display:inline-block;border-radius:999px;padding:.18rem .6rem;font-size:.74rem;font-weight:700;border:1px solid}
.chip.ev-human-outcomes{background:#d9efe4;color:#14532d;border-color:#7fb99a}
.chip.ev-human-early{background:#e2f0e8;color:#1d5c43;border-color:#93bfa9}
.chip.ev-human-association{background:#e8eefc;color:#274268;border-color:#9db2d9}
.chip.ev-animal{background:#fdf0d3;color:#7a5200;border-color:#ddb95e}
.chip.ev-cell{background:#f3e6cf;color:#6b4e12;border-color:#cdb27f}
.chip.ev-hypothesis{background:#f1e9dc;color:#5c5342;border-color:#c9bda3}
.chip.type{background:var(--teal-soft);color:var(--teal2);border-color:#8fbdb2}
.chip.imported{background:var(--warn-bg);color:var(--warn);border-color:#ddb95e}
.chip.sample{background:#fbe4e4;color:var(--danger);border-color:#d99}
.genes{font-family:Consolas,monospace;font-size:.82rem}
.btn{background:var(--teal);color:#fff;border:1px solid var(--teal2);border-radius:8px;padding:.52rem .85rem;cursor:pointer;font-size:.88rem;font-weight:600}
.btn:hover{background:var(--teal2)}
.btn-ghost{background:transparent;color:inherit;border-color:#8aa39c}
.sidebar .btn-ghost{color:#e9e4d3}
.btn-ghost:hover{background:rgba(14,107,98,.12)}
.btn[aria-pressed="true"]{background:var(--teal2)}
.empty{border:1px dashed #b9ac8d;border-radius:var(--radius);padding:1.2rem;background:var(--paper);color:var(--ink2);grid-column:1/-1}
.framework{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.framework article{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.framework h3{margin-top:0;color:var(--teal2)}
.hypo{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1rem 0}
.hypo label{display:inline-flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--ink2);margin-right:.8rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.7rem 0}
.row.between{justify-content:space-between}
.file-label{display:inline-flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;margin:.6rem 0}
.source-list{max-width:85ch}
.source-list li{margin:.6rem 0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem}
.source-list .meta,.proj .meta{font-size:.82rem;color:var(--ink2)}
.proj{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin:.5rem 0;max-width:85ch}
.compare-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;background:var(--ink);color:#fff;border-radius:12px;padding:.7rem 1rem;display:flex;gap:.7rem;align-items:center;z-index:40;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.compare-bar[hidden]{display:none}
.modal{position:fixed;inset:0;background:rgba(23,33,31,.55);z-index:50;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal-card{background:var(--paper);border-radius:12px;max-width:1100px;width:100%;max-height:88vh;overflow:auto;padding:1.2rem}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border:1px solid var(--line);padding:.55rem .65rem;vertical-align:top;text-align:left}
th{background:var(--teal-soft)}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(480px,94vw);background:var(--paper);border-left:2px solid var(--teal);z-index:45;overflow:auto;padding:1.2rem;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
.drawer[hidden]{display:none}
.drawer dt{font-family:"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:.82rem;color:var(--teal2);margin-top:.9rem}
.drawer dd{margin:.2rem 0 0}
.scrim{position:fixed;inset:0;background:rgba(23,33,31,.35);z-index:44}
.scrim[hidden]{display:none}
.footer{border-top:1px solid var(--line);color:var(--ink2);font-size:.85rem;margin-top:2rem;padding-top:1rem}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .tabs{flex-direction:row;flex-wrap:wrap}
  .hero{grid-template-columns:1fr}
}