:root{
  --bg:#f6f7f4;
  --panel:#ffffff;
  --ink:#111815;
  --muted:#5f6d66;
  --line:#d7ddd8;
  --line-dark:#b8c1bb;
  --accent:#2e6ea6;
  --accent2:#5aa17a;
  --accent3:#d59a38;
  --accent4:#8b75b3;
  --soft:#eef2ee;
  --max:1380px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
.site-head,main,.site-foot{width:min(calc(100% - 40px),var(--max));margin:0 auto}
.site-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:36px 0 22px;border-bottom:1px solid var(--line-dark)}
.kicker,.panel-kicker,.stat-label,.meta-label{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.73rem;color:var(--muted)}
h1{margin:3px 0 0;font-size:clamp(2.4rem,5vw,4.9rem);line-height:.95;letter-spacing:-.055em;font-weight:650}
.lede{max-width:760px;margin:14px 0 0;color:var(--muted);font-size:1rem;line-height:1.55}
.head-meta{min-width:220px;display:grid;gap:9px}
.meta-pair{display:flex;justify-content:space-between;gap:16px;padding-top:9px;border-top:1px solid var(--line);font-size:.9rem}
.range-tabs{display:flex;margin:22px 0;gap:0}
.tab{appearance:none;background:var(--panel);color:var(--muted);border:1px solid var(--line-dark);padding:10px 14px;font:inherit;font-size:.9rem;cursor:pointer;margin-right:-1px}
.tab:first-child{border-radius:8px 0 0 8px}.tab:last-child{border-radius:0 8px 8px 0}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.stat-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-bottom:24px}
.stat-box{background:var(--panel);padding:14px 16px 16px;min-height:86px}
.stat-value{display:block;margin-top:7px;font-size:1.55rem;line-height:1;letter-spacing:-.04em;font-weight:620}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.panel{background:var(--panel);padding:20px;min-height:250px}.span-2{grid-column:span 2}.full-width{grid-column:1/-1}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.panel-title{margin:4px 0 0;font-size:1.15rem;letter-spacing:-.02em;font-weight:560}
.hero-number{font-size:clamp(5rem,10vw,9.4rem);line-height:.88;letter-spacing:-.075em;font-weight:650;margin:28px 0 10px}
.hero-subline{margin:0;color:var(--muted)}.hero-subline span{color:var(--ink)}
.hero-yearly-wrap{margin-top:28px;padding-top:12px;border-top:1px solid var(--line-dark)}
.hero-yearly-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:6px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.hero-yearly-head span:last-child{text-transform:none;letter-spacing:0;font-size:.72rem}
.hero-yearly-chart{width:100%;height:170px;display:block;overflow:visible}
.hero-year-bar{fill:var(--ink);opacity:.88;cursor:pointer;transition:opacity .12s ease,fill .12s ease}
.hero-year-bar:hover,.hero-year-bar.is-hovered{fill:var(--accent);opacity:1}
.hero-year-tick{fill:var(--muted);font-size:11px}
.sparkline-wrap{margin-top:30px}.sparkline-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin-bottom:8px}
.mini-bars{height:78px;display:flex;align-items:flex-end;gap:8px}.mini-bars i{display:block;flex:1;background:var(--ink);min-height:2px;border-radius:2px 2px 0 0}
.newest-card{display:grid;gap:15px;margin-top:16px}.taxon-image,.image-placeholder{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);border:1px solid var(--line)}
.image-placeholder{display:grid;place-items:center;padding:20px;text-align:center;color:var(--muted);font-size:.9rem}.newest-card h3{margin:0;font-size:1.5rem;font-style:italic;font-weight:560}.newest-card p{margin:5px 0 0;color:var(--muted);line-height:1.4}.credit{font-size:.76rem}
.composition-panel{padding-bottom:26px}.donut-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:12px}.donut-block{display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto 1fr;column-gap:24px;align-items:center}
.donut-block h3{grid-column:1/-1;margin:0 0 10px;font-size:1rem;font-weight:600}.donut-wrap{width:240px;height:240px}.donut{width:100%;height:100%;display:block}
.donut-bg{fill:none;stroke:#edf0ed;stroke-width:28}.donut-seg{fill:none;stroke-width:28;transform:rotate(-90deg);transform-origin:120px 120px}
.donut-center-main{font-size:30px;font-weight:650;fill:var(--ink);text-anchor:middle}.donut-center-sub{font-size:11px;fill:var(--muted);text-anchor:middle;text-transform:uppercase;letter-spacing:.08em}
.donut-legend{border-top:1px solid var(--line)}.donut-row{display:grid;grid-template-columns:16px 1fr auto auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.84rem}.dot{width:10px;height:10px;border-radius:50%}.donut-row .pct,.donut-row .n{color:var(--muted);font-variant-numeric:tabular-nums}
.chart{width:100%;height:305px;display:block;margin-top:12px}.axis,.gridline{stroke:var(--line-dark);stroke-width:1}.gridline{stroke:var(--line)}.tick-label{fill:var(--muted);font-size:12px}.series-a{fill:none;stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke}.series-b{fill:none;stroke:var(--accent);stroke-width:2.3;vector-effect:non-scaling-stroke}.area-a{fill:rgba(17,24,21,.055)}
.legend{display:flex;gap:18px;color:var(--muted);font-size:.8rem;margin-top:8px}.swatch{display:inline-block;width:18px;height:2px;margin-right:7px;vertical-align:middle}.swatch-a{background:var(--ink)}.swatch-b{background:var(--accent)}
.subsection{margin-top:18px}.subsection h3{font-size:.94rem;margin:0 0 6px;font-weight:600}.list-table,.simple-table,.recent-table{border-top:1px solid var(--line)}.list-row,.table-row{display:grid;gap:12px;align-items:baseline;border-bottom:1px solid var(--line);padding:9px 0;font-size:.84rem}.list-row{grid-template-columns:1fr auto}.table-row{grid-template-columns:1fr 70px 70px}.list-row span:last-child,.table-row span:last-child{color:var(--muted)}
.note{color:var(--muted);font-size:.8rem;margin:0;max-width:440px;line-height:1.4}
.recent-table .header,.recent-table .row{display:grid;grid-template-columns:100px 1.55fr 1.15fr 1.25fr 115px 120px;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}.recent-table .header{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.recent-table .species{font-style:italic}.recent-table .muted{color:var(--muted)}
.site-foot{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line-dark);margin-top:22px;padding:24px 0 56px;color:var(--muted);font-size:.8rem;line-height:1.55}
@media(max-width:1180px){.stat-strip{grid-template-columns:repeat(3,1fr)}.donut-block{grid-template-columns:220px 1fr}.donut-wrap{width:210px;height:210px}}
@media(max-width:900px){.site-head{display:block}.head-meta{margin-top:18px}.layout-grid{grid-template-columns:1fr}.span-2,.full-width{grid-column:auto}.stat-strip{grid-template-columns:repeat(2,1fr)}.donut-pair{grid-template-columns:1fr}.donut-block{grid-template-columns:220px 1fr}.recent-table .header,.recent-table .row{grid-template-columns:95px 1fr}.recent-table .header>*:nth-child(n+3),.recent-table .row>*:nth-child(n+3){display:none}.site-foot{grid-template-columns:1fr}}
@media(max-width:600px){.site-head,main,.site-foot{width:min(calc(100% - 24px),var(--max))}.stat-strip{grid-template-columns:1fr}.donut-block{grid-template-columns:1fr}.donut-wrap{margin:auto}.donut-block h3{text-align:center}.hero-number{font-size:4.2rem}}

.featured-details{color:var(--ink)!important;font-weight:560}
.chart-tooltip{position:fixed;z-index:9999;pointer-events:none;background:rgba(17,24,21,.96);color:#fff;border-radius:6px;padding:9px 11px;font-size:.78rem;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.16);min-width:150px}
.chart-tooltip strong,.chart-tooltip span{display:block}.chart-tooltip span{margin-top:3px;color:#dfe6e1}
.hover-guide{stroke:#7c8882;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.hover-dot{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.hover-dot-a{fill:var(--ink)}.hover-dot-b{fill:var(--accent)}
.chart{cursor:crosshair}

.milestone-section{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-dark)}
.milestone-table{margin-top:10px}
.milestone-row{grid-template-columns:90px 1fr 0!important}
.milestone-date{color:var(--muted)}

.byline{margin:7px 0 10px;font-size:.82rem;color:var(--muted)}
.byline strong{color:var(--ink);font-weight:600}
.byline a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-dark)}
.byline a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.donut-seg{cursor:pointer;transition:stroke-width .12s ease,opacity .12s ease}
.donut-seg.is-hovered{stroke-width:34;opacity:.9}

.section-tabs{display:flex;gap:20px;margin-top:22px;border-bottom:1px solid var(--line-dark)}
.section-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;padding:0 0 10px;color:var(--muted);font:inherit;font-size:.94rem;font-weight:560;cursor:pointer}
.section-tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.section-tab:hover{color:var(--ink)}

#taxa-view{margin-top:22px}
.taxon-search-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:42px;align-items:end;background:var(--panel);border:1px solid var(--line-dark);padding:24px}
.taxon-search-panel h2{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em;margin:5px 0 8px;font-weight:620}
.taxon-intro{margin:0;color:var(--muted);line-height:1.5;max-width:650px}
.taxon-search-wrap{position:relative}
#taxon-search{width:100%;appearance:none;border:1px solid var(--line-dark);border-radius:6px;background:#fff;color:var(--ink);padding:13px 14px;font:inherit;font-size:1rem;outline:none}
#taxon-search:focus{border-color:var(--ink);box-shadow:0 0 0 2px rgba(17,24,21,.07)}
.taxon-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);border:1px solid var(--line-dark);box-shadow:0 14px 30px rgba(17,24,21,.12);max-height:430px;overflow:auto}
.taxon-results:empty{display:none}
.taxon-results-label,.taxon-loading{padding:9px 12px;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.taxon-result{width:100%;appearance:none;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);display:flex;justify-content:space-between;gap:18px;text-align:left;padding:10px 12px;font:inherit;cursor:pointer}
.taxon-result:last-child{border-bottom:0}
.taxon-result:hover,.taxon-result:focus{background:var(--soft);outline:none}
.taxon-result span:first-child{display:grid;gap:2px}
.taxon-result strong{font-size:.91rem;font-weight:600}
.taxon-result small{color:var(--muted);font-size:.75rem}
.taxon-result>span:last-child{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}

.taxon-empty{border:1px solid var(--line-dark);border-top:0;background:var(--panel);padding:42px 24px;color:var(--muted)}
.taxon-heading{background:var(--panel);border:1px solid var(--line-dark);border-top:0;padding:24px}
.taxon-heading h2{font-size:clamp(2.3rem,5vw,4.6rem);line-height:.95;letter-spacing:-.055em;margin:6px 0 8px;font-weight:650}
.taxon-lineage{margin:0;color:var(--muted)}
.taxon-stats{grid-template-columns:repeat(5,1fr);margin:0;border-top:0}
.stat-date{font-size:1.08rem;line-height:1.2;letter-spacing:-.02em}
.taxon-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-top:0}
.taxon-grid .panel{min-width:0}

@media(max-width:900px){
  .taxon-search-panel{grid-template-columns:1fr;gap:20px}
  .taxon-stats{grid-template-columns:repeat(2,1fr)}
  .taxon-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .taxon-stats{grid-template-columns:1fr}
  .section-tabs{gap:14px}
}


#status-view{margin-top:22px}
.status-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end;background:var(--panel);border:1px solid var(--line-dark);padding:24px}
.status-intro h2{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em;margin:5px 0 8px;font-weight:620}
.status-tabs{display:flex;align-items:stretch}
.status-tab{appearance:none;background:var(--panel);color:var(--muted);border:1px solid var(--line-dark);padding:10px 14px;font:inherit;font-size:.9rem;cursor:pointer;margin-right:-1px;display:grid;gap:2px;text-align:left}
.status-tab:first-child{border-radius:8px 0 0 8px}
.status-tab:last-child{border-radius:0 8px 8px 0}
.status-tab span{font-size:.68rem;letter-spacing:.05em;color:inherit}
.status-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.status-loading{background:var(--panel);border:1px solid var(--line-dark);border-top:0;padding:42px 24px;color:var(--muted)}
.status-stats{margin-top:0;border-top:0}
@media(max-width:900px){.status-intro{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){.status-tabs{width:100%}.status-tab{flex:1}}


#countries-view{margin-top:22px}
.country-map-panel{background:var(--panel);border:1px solid var(--line-dark);padding:24px}
.country-map-head{align-items:end}
.country-map-head h2,.country-search-panel h2{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em;margin:5px 0 8px;font-weight:620}
.country-map{width:100%;height:auto;display:block;margin-top:18px;background:#f7f8fa;border:1px solid var(--line)}
.map-ocean{fill:#f7f8fa;stroke:none}
.country-shape{stroke:#fff;stroke-width:.55;vector-effect:non-scaling-stroke;cursor:pointer;transition:opacity .12s ease,stroke-width .12s ease}
.country-shape.is-hovered{stroke:var(--ink);stroke-width:1.4}
.country-shape.is-selected{stroke:var(--ink);stroke-width:2}
.country-map-status{margin:10px 0 0;color:var(--muted);font-size:.78rem}
.country-map-legend{min-width:220px;color:var(--muted);font-size:.76rem}
.country-map-legend>span{display:block;margin-bottom:6px}
.map-gradient{height:10px;border:1px solid var(--line-dark);background:linear-gradient(90deg,#f7fbff,#deebf7,#9ecae1,#4292c6,#084594)}
.map-legend-ticks{display:flex;justify-content:space-between;margin-top:3px;font-variant-numeric:tabular-nums}
.country-search-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:42px;align-items:end;background:var(--panel);border:1px solid var(--line-dark);border-top:0;padding:24px}
#country-search{width:100%;appearance:none;border:1px solid var(--line-dark);border-radius:6px;background:#fff;color:var(--ink);padding:13px 14px;font:inherit;font-size:1rem;outline:none}
#country-search:focus{border-color:var(--ink);box-shadow:0 0 0 2px rgba(17,24,21,.07)}
.country-heading{border-top:0}
.country-stats{grid-template-columns:repeat(4,1fr);margin:0;border-top:0}
.country-history-panel{border:1px solid var(--line-dark);border-top:0}
@media(max-width:900px){
  .country-map-head{display:block}
  .country-map-legend{margin-top:18px;max-width:300px}
  .country-search-panel{grid-template-columns:1fr;gap:20px}
  .country-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .country-stats{grid-template-columns:1fr}
  .country-map-panel{padding:14px}
}

.country-map-tools{display:grid;gap:14px;justify-items:end;min-width:320px}
.country-facet-tabs{justify-self:end}
.country-facet-tabs .status-tab{min-width:128px;text-align:center}
@media(max-width:900px){
  .country-map-tools{justify-items:start;min-width:0;margin-top:18px}
  .country-facet-tabs{justify-self:start}
}
@media(max-width:600px){
  .country-facet-tabs{width:100%}
  .country-facet-tabs .status-tab{min-width:0}
}


/* Genome Observatory Live visual system */
:root{
  --obs-night:#0d1b22;
  --obs-night-2:#132832;
  --obs-cyan:#7fc7d5;
  --obs-cyan-bright:#b9edf4;
  --obs-grid:rgba(46,110,166,.08);
}

.site-head{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:34px max(20px,calc((100vw - var(--max))/2)) 26px;
  border-bottom:1px solid rgba(185,237,244,.18);
  color:#eef8f8;
  background:
    linear-gradient(rgba(127,199,213,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,199,213,.045) 1px,transparent 1px),
    radial-gradient(circle at 82% 18%,rgba(46,110,166,.22),transparent 28%),
    linear-gradient(135deg,var(--obs-night),var(--obs-night-2));
  background-size:34px 34px,34px 34px,auto,auto;
}
.site-head::after{
  content:"";
  position:absolute;
  left:max(20px,calc((100vw - var(--max))/2));
  right:max(20px,calc((100vw - var(--max))/2));
  bottom:8px;
  height:1px;
  background:linear-gradient(90deg,var(--obs-cyan),transparent 72%);
  opacity:.55;
}
.site-head .kicker,.site-head .meta-label{color:#9eb5ba}
.site-head .byline,.site-head .lede,.site-head .lede-detail,.site-head .meta-pair{color:#bed0d4}
.site-head .byline strong{color:#fff}
.site-head .byline a{color:#bed0d4;border-bottom-color:rgba(190,208,212,.45)}
.site-head .byline a:hover{color:#fff;border-bottom-color:#fff}
.site-head h1{display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap;color:#fff}
.brand-main{font-weight:650}
.brand-live{
  font-size:.29em;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--obs-cyan-bright);
  font-weight:700;
  transform:translateY(-.12em);
}
.observatory-kicker{display:flex;align-items:center;gap:6px}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--obs-cyan-bright);
  box-shadow:0 0 0 3px rgba(185,237,244,.10),0 0 12px rgba(185,237,244,.45);
  display:inline-block;
}
.live-word{color:var(--obs-cyan-bright);font-weight:700}
.lede{font-size:1.03rem;color:#e3eff1!important;margin-top:15px}
.lede-detail{max-width:760px;margin:5px 0 0;font-size:.82rem;line-height:1.5;color:#9eb5ba!important}
.site-head .meta-pair{border-top-color:rgba(190,208,212,.22)}
.site-head #updated,.site-head #range-label{color:#fff;font-variant-numeric:tabular-nums}

.section-tabs{
  gap:24px;
  margin-top:18px;
  background:rgba(255,255,255,.56);
  backdrop-filter:blur(5px);
}
.section-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-bottom:11px;
}
.tab-icon{
  width:16px;height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
  opacity:.78;
}
.section-tab.active .tab-icon{opacity:1;color:var(--accent)}
.section-tab.active{border-bottom-color:var(--accent)}
.section-tab:hover .tab-icon{opacity:1}

.panel,.stat-box,.taxon-search-panel,.status-intro,.country-map-panel,.country-search-panel,.taxon-heading{
  position:relative;
}
.panel::before,.country-map-panel::before,.taxon-search-panel::before,.status-intro::before,.country-search-panel::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:24px;height:1px;
  background:var(--accent);
  opacity:.5;
}
.hero-panel{
  background:
    linear-gradient(var(--obs-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--obs-grid) 1px,transparent 1px),
    var(--panel);
  background-size:28px 28px,28px 28px,auto;
}
.hero-number{font-variant-numeric:tabular-nums;letter-spacing:-.07em}
.hero-panel .hero-number{
  text-shadow:0 0 24px rgba(46,110,166,.08);
}
.mini-bars{position:relative}
.mini-bars::before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  border-bottom:1px dashed var(--line-dark);
  pointer-events:none;
}
.mini-bars i{background:linear-gradient(to top,var(--ink),#314b58)}

.chart-panel{
  background:
    linear-gradient(rgba(46,110,166,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,110,166,.035) 1px,transparent 1px),
    var(--panel);
  background-size:32px 32px,32px 32px,auto;
}
.chart{position:relative}
.gridline{stroke-dasharray:2 5}
.hover-guide{stroke:var(--accent);stroke-dasharray:2 3}
.hover-dot{filter:drop-shadow(0 0 2px rgba(46,110,166,.28))}

.country-map{
  background:
    linear-gradient(rgba(46,110,166,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,110,166,.055) 1px,transparent 1px),
    #f7f8fa;
  background-size:34px 34px,34px 34px,auto;
}
.country-map-panel{
  box-shadow:inset 0 2px 0 rgba(46,110,166,.06);
}
.country-map-legend{
  border-left:2px solid var(--accent);
  padding-left:12px;
}
.map-gradient{border-radius:999px;height:8px}
.country-shape.is-hovered,.country-shape.is-selected{
  filter:drop-shadow(0 0 2px rgba(17,24,21,.25));
}

.stat-value,.hero-number,.donut-center-main{
  font-variant-numeric:tabular-nums lining-nums;
}
.stat-box:hover{
  background:#fbfcfb;
}
.panel-kicker{
  position:relative;
  padding-left:12px;
}
.panel-kicker::before{
  content:"";
  position:absolute;
  left:0;top:.45em;
  width:6px;height:1px;
  background:var(--accent);
}

.chart-tooltip{
  border:1px solid rgba(185,237,244,.16);
  box-shadow:0 10px 32px rgba(0,0,0,.22);
}
.chart-tooltip::before{
  content:"";
  display:block;
  width:18px;height:1px;
  margin-bottom:6px;
  background:var(--obs-cyan);
}

@media(max-width:900px){
  .site-head{padding-left:20px;padding-right:20px}
  .site-head::after{left:20px;right:20px}
  .section-tabs{gap:16px;overflow-x:auto}
  .section-tab{flex:0 0 auto}
}
@media(max-width:600px){
  .site-head{padding-left:12px;padding-right:12px}
  .site-head::after{left:12px;right:12px}
  .tab-icon{width:15px;height:15px}
}


#genometrics-view{margin-top:22px}
.genometrics-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:end;
  background:var(--panel);
  border:1px solid var(--line-dark);
  padding:24px;
}
.genometrics-intro h2{
  font-size:clamp(1.6rem,3vw,2.5rem);
  letter-spacing:-.035em;
  margin:5px 0 8px;
  font-weight:620;
}
.genometrics-updated{
  margin:0;
  color:var(--muted);
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.genometrics-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  border-top:0;
}
.genometrics-card{
  min-width:0;
  min-height:500px;
  background:
    linear-gradient(rgba(46,110,166,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,110,166,.03) 1px,transparent 1px),
    var(--panel);
  background-size:32px 32px,32px 32px,auto;
}
.genometrics-card .panel-title{font-size:1.25rem}
.genometrics-summary{
  color:var(--muted);
  line-height:1.5;
  min-height:72px;
  margin:10px 0 16px;
  font-size:.88rem;
}
.genometrics-donut-row{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin-top:8px;
}
.genometrics-donut-row .donut-wrap{
  width:220px;
  height:220px;
}
.genometrics-card .donut-row{
  grid-template-columns:12px minmax(0,1fr) auto auto;
  font-size:.78rem;
  gap:7px;
}
.genometrics-center-main{font-size:28px}
.genometrics-denominator{
  border-top:1px solid var(--line);
  padding-top:12px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}
.sex-compare{
  display:grid;
  gap:18px;
  margin:10px 0 4px;
}
.sex-compare-row{
  display:grid;
  gap:7px;
}
.sex-compare-rowhead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  font-size:.78rem;
}
.sex-compare-rowhead strong{
  color:var(--ink);
  font-weight:620;
}
.sex-compare-rowhead span{
  color:var(--muted);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.sex-compare-track{
  height:28px;
  width:100%;
  display:flex;
  overflow:hidden;
  border:1px solid var(--line-dark);
  background:#eef1ef;
}
.sex-compare-seg{
  display:block;
  min-width:1px;
  height:100%;
}
.sex-compare-legend{
  display:grid;
  gap:7px;
  margin-top:2px;
  color:var(--muted);
  font-size:.74rem;
}
.sex-compare-legend span{
  display:flex;
  align-items:center;
  gap:7px;
}
.sex-compare-legend i{
  width:10px;
  height:10px;
  flex:0 0 10px;
}
.genometrics-source-note{
  margin:9px 0 0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.4;
}
.genometrics-source-note a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(46,110,166,.3);
}
.genometrics-method{
  min-height:0;
  border:1px solid var(--line-dark);
  border-top:0;
}
.genometrics-method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:16px;
}
.genometrics-method-grid p{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
}
.genometrics-method-grid strong{color:var(--ink)}
@media(max-width:1180px){
  .genometrics-grid{grid-template-columns:1fr}
  .genometrics-card{min-height:0}
  .genometrics-summary{min-height:0}
  .genometrics-donut-row{grid-template-columns:240px minmax(0,1fr)}
}
@media(max-width:900px){
  .genometrics-intro{grid-template-columns:1fr;gap:14px}
  .genometrics-method-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .genometrics-donut-row{grid-template-columns:1fr}
  .genometrics-donut-row .donut-wrap{margin:auto}
}

.assembly-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(46,110,166,.28);
  transition:color .12s ease,border-color .12s ease;
}
.assembly-link:hover,.assembly-link:focus{
  color:var(--accent);
  border-bottom-color:var(--accent);
  outline:none;
}

@media(max-width:600px){
  .hero-yearly-head{display:block}
  .hero-yearly-head span{display:block}
  .hero-yearly-head span:last-child{margin-top:3px}
  .hero-yearly-chart{height:150px}
}

.genometrics-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.genometrics-stat-grid>div{padding:14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:5px}
.genometrics-stat-grid strong{font-size:1.35rem}
.genometrics-stat-grid span,.trait-block span{font-size:.82rem;color:var(--muted)}
.trait-summary{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.trait-block{display:flex;flex-direction:column;gap:7px}
.trait-block>strong{font-size:.9rem}
.trait-block span{display:flex;justify-content:space-between;gap:10px}
.trait-block span b{font-weight:500;color:var(--text)}
@media(max-width:700px){.genometrics-stat-grid{grid-template-columns:1fr}.trait-summary{grid-template-columns:1fr}}

.genometrics-histograms{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 8px}
.genometrics-histograms h3{font-size:.9rem;margin:0 0 4px}
.genometrics-hist{display:block;width:100%;height:auto;overflow:visible}
.genometrics-hist-bar{fill:var(--accent);opacity:.78;transition:opacity .12s ease}
.genometrics-hist-bar.is-hovered{opacity:1}
.genometrics-hist-tick{fill:var(--muted);font-size:9px}
@media(max-width:700px){.genometrics-histograms{grid-template-columns:1fr}}