#embedding-plot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  grid-template-areas: "stage side";
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
#embedding-plot .em-stage { grid-area: stage; }
#embedding-plot .em-side { grid-area: side; }
.em-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  border-left: 1px solid var(--line);
  background: var(--bg-soft);
}
.em-heading { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.em-modes { display: flex; flex-direction: column; gap: 8px; }
.em-modes button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.em-modes button span { width: 14px; text-align: center; }
.em-modes button:hover { border-color: #bdc6d1; }
.em-modes button[aria-pressed="true"] { border-color: var(--accent); background: var(--ours); color: var(--accent); }
.em-modes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-legend { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.em-legend span { display: flex; align-items: center; gap: 8px; }
.em-legend i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.em-stage { position: relative; align-self: start; min-width: 0; overflow: hidden; }
.em-stage canvas.em-zoomed { touch-action: none; cursor: grab; }
.em-stage canvas.em-zoomed:active { cursor: grabbing; }
.em-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); }
.em-zoom button { width: 34px; height: 34px; padding: 0; border: 0; background: var(--bg); color: var(--ink-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.em-zoom button + button { border-top: 1px solid var(--line); }
.em-zoom button:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); }
.em-zoom button:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.em-zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.em-stage canvas { display: block; width: 100%; min-height: 420px; aspect-ratio: 4 / 3; touch-action: pan-y; }
.em-tip { position: absolute; pointer-events: none; padding: 3px 8px; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  #embedding-plot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side"; }
  .em-stage canvas { min-height: 0; aspect-ratio: 1; }
  .em-side {
    display: grid;
    grid-template-columns: minmax(80px, .9fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 16px;
    padding: 20px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .em-legend { font-size: 12px; }
}