.biomodes-atlas-breakout{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
  padding:0 clamp(1rem, 3vw, 2.5rem);
}
.biomodes-atlas{
  --bma-ground:#eef2f2; --bma-panel:#e4ecec; --bma-ink:#16231f; --bma-ink-dim:#4c5c58;
  --bma-rule:rgba(22,35,31,.14); --bma-accent:#2d96bd; --bma-hub:#3a4a46;
  display:grid;
  grid-template-columns:min(440px, 42%) 1fr;
  gap:0;
  background:var(--bma-panel);
  border:1px solid var(--bma-rule);
  border-radius:8px;
  overflow:hidden;
  color:var(--bma-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
}
[theme=dark] .biomodes-atlas{
  --bma-ground:#0f1a1c; --bma-panel:#132123; --bma-ink:#dce8e6; --bma-ink-dim:#8fa5a1;
  --bma-rule:rgba(220,232,230,.14); --bma-accent:#5fb8d9; --bma-hub:#c7d6d2;
}
[theme=black] .biomodes-atlas{
  --bma-ground:#000; --bma-panel:#0a0a0a; --bma-ink:#d9d9d9; --bma-ink-dim:#8a8a8a;
  --bma-rule:rgba(255,255,255,.14); --bma-accent:#5fb8d9; --bma-hub:#cfcfcf;
}
.bma-serif{ font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
.bma-mono{ font-family:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }

@media (max-width:760px){ .biomodes-atlas{ grid-template-columns:1fr; } }

.bma-sidebar{ padding:1.3rem 1.1rem; display:flex; flex-direction:column; gap:1rem; max-height:640px; overflow-y:auto; }
@media (max-width:760px){ .bma-sidebar{ max-height:none; border-bottom:1px solid var(--bma-rule); } }

.bma-sidebar-header{ display:flex; flex-direction:column; gap:.6rem; }
.bma-sidebar-columns{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem; align-items:start; }
.bma-col{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
@media (max-width:560px){ .bma-sidebar-columns{ grid-template-columns:1fr; gap:1rem; } }

.bma-view-toggle{ display:inline-flex; border:1px solid var(--bma-rule); border-radius:6px; overflow:hidden; }
.bma-view-btn{ font:inherit; font-size:.72rem; font-weight:600; padding:.32rem .7rem; border:none; background:none; color:var(--bma-ink-dim); cursor:pointer; }
.bma-view-btn + .bma-view-btn{ border-left:1px solid var(--bma-rule); }
.bma-view-btn[aria-pressed="true"]{ background:var(--bma-accent); color:#fff; }
.bma-title{ font-size:1.25rem; margin:.5rem 0 0; font-weight:600; text-wrap:balance; }
.bma-thesis{ color:var(--bma-ink-dim); font-size:.82rem; max-width:38ch; }

.bma-stat-row{ display:flex; gap:1.4rem; padding:.6rem 0; border-top:1px solid var(--bma-rule); border-bottom:1px solid var(--bma-rule); }
.bma-stat-num{ display:block; font-size:1.05rem; font-weight:700; }
.bma-stat-label{ display:block; font-size:.62rem; color:var(--bma-ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-top:.1rem; }

.bma-section-title{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bma-ink-dim); margin-bottom:.25rem; }
.bma-hub-list{ display:flex; flex-direction:column; gap:.15rem; }
.bma-hub-item{ display:flex; align-items:center; gap:.4rem; padding:.28rem .4rem; border-radius:3px; cursor:pointer; border:none; background:none; text-align:left; font:inherit; color:var(--bma-ink); width:100%; min-width:0; }
.bma-hub-item:hover{ background:var(--bma-rule); }
.bma-hub-item[aria-pressed="false"]{ opacity:.4; }
.bma-hub-mark{ width:7px; height:7px; border-radius:1px; background:var(--bma-hub); flex:none; transform:rotate(45deg); }
.bma-hub-name{ font-size:.74rem; flex:1; min-width:0; }
.bma-hub-count{ font-size:.66rem; color:var(--bma-ink-dim); flex:none; }

.bma-cat-legend{ display:flex; flex-wrap:wrap; gap:.3rem; }
.bma-cat-chip{ display:inline-flex; align-items:center; gap:.28rem; font-size:.64rem; padding:.12rem .4rem; border-radius:9px; border:1px solid var(--bma-rule); }
.bma-cat-dot{ width:6px; height:6px; border-radius:50%; flex:none; }

.bma-detail{ min-height:7.5rem; }
.bma-detail-empty{ color:var(--bma-ink-dim); font-size:.78rem; }
.bma-detail-kind{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.2rem; color:var(--bma-ink-dim); }
.bma-detail-name{ font-size:.95rem; font-weight:600; margin:0 0 .3rem; text-wrap:balance; }
.bma-detail-desc{ font-size:.74rem; color:var(--bma-ink-dim); margin-bottom:.45rem; }
.bma-detail-tags{ display:flex; flex-wrap:wrap; gap:.28rem; margin-bottom:.45rem; }
.bma-detail-tag{ font-size:.64rem; padding:.08rem .38rem; border-radius:8px; background:var(--bma-rule); }
.bma-detail-link{ display:inline-flex; align-items:center; gap:.28rem; font-size:.74rem; color:var(--bma-accent); text-decoration:none; border-bottom:1px solid transparent; }
.bma-detail-link:hover{ border-bottom-color:var(--bma-accent); }

.bma-chart-pane{ position:relative; background:var(--bma-ground); }
.bma-chart-head{ display:flex; justify-content:space-between; align-items:baseline; padding:.6rem .9rem 0; }
.bma-chart-title{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--bma-ink-dim); }
.bma-chart-note{ font-size:.68rem; color:var(--bma-ink-dim); }
.bma-canvas-wrap{ position:relative; width:100%; height:600px; }
@media (max-width:760px){ .bma-canvas-wrap{ height:440px; } }
.biomodes-atlas canvas{ display:block; width:100%; height:100%; cursor:default; }

.bma-tooltip{ position:absolute; pointer-events:none; background:var(--bma-panel); border:1px solid var(--bma-rule); box-shadow:0 1px 4px rgba(0,0,0,.15); border-radius:4px; padding:.45rem .6rem; font-size:.72rem; max-width:220px; transform:translate(-50%,-115%); opacity:0; transition:opacity .1s ease; z-index:5; color:var(--bma-ink); }
.bma-tooltip.show{ opacity:1; }
.bma-tooltip .bma-t-name{ font-weight:600; margin-bottom:.12rem; text-wrap:balance; }
.bma-tooltip .bma-t-meta{ color:var(--bma-ink-dim); }
.bma-tooltip .bma-t-hint{ color:var(--bma-accent); font-size:.66rem; margin-top:.25rem; }

.bma-caveat{ font-size:.68rem; color:var(--bma-ink-dim); border-top:1px dashed var(--bma-rule); padding-top:.55rem; }
.bma-loading{ padding:2rem; text-align:center; color:var(--bma-ink-dim); font-size:.85rem; }

@media (prefers-reduced-motion: reduce){ .biomodes-atlas *{ transition:none !important; } }
