.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--base); }
.ambient, .backdrop-wash, .band-notes { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-notes { overflow: hidden; }
.band-notes g, .band-note-button { opacity: 0; }
.band-notes path {
  fill: none; stroke: var(--copper); stroke-width: 1; opacity: .68;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.band-notes .band-note-hit { stroke: transparent; stroke-width: 16; }
.band-notes g[data-visible] .band-note-hit { pointer-events: stroke; cursor: pointer; }
.band-notes circle { fill: var(--copper); opacity: .85; }
.band-labels { position: fixed; z-index: 2; inset: 0; pointer-events: none; }
.band-note-button, .work-examples button {
  font-size: .825rem; font-weight: 620; color: var(--secondary);
  cursor: pointer; border: 0; border-radius: 4px; background: transparent;
}
.band-note-button {
  position: absolute; min-height: 44px; padding: 0 .36rem;
  background: radial-gradient(ellipse at center, var(--base) 26%, transparent 74%);
  white-space: nowrap;
}
.band-note-button[data-visible] { pointer-events: auto; }
.band-note-button::after, .work-examples button::after { content: "+" / ""; margin-inline-start: .38rem; color: var(--accent-text); }
.band-note-button:is(:hover, :focus-visible), .work-examples button:is(:hover, :focus-visible) {
  color: var(--text); text-decoration: underline; text-underline-offset: .25em;
}
.work-examples {
  display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .1rem;
  margin: -.9rem 0 1.35rem;
}
.work-examples button { min-height: 44px; padding: .2rem 0; }
.work-dialog {
  width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem);
  padding: clamp(1.25rem, 4vw, 2.15rem); background: var(--panel); color: var(--text);
  border: 1px solid var(--edge); border-radius: 9px; box-shadow: 0 18px 70px rgb(10 18 14 / .23);
}
.work-dialog::backdrop { background: rgb(17 24 21 / .58); }
.work-dialog form { display: flex; justify-content: end; margin-bottom: .75rem; }
.work-dialog h2 { margin: 0 0 .85rem; font-size: clamp(1.65rem, 5vw, 2.25rem); }
.work-dialog p { color: var(--secondary); }
.work-dialog .work-example-impact { margin-top: .85rem; color: var(--text); }
.ambient {
  --ground: var(--base);
  --ink: var(--base);
  --shadow: var(--base);
  --face-top: var(--alt);
  --face-mid: var(--panel);
  --face-bottom: var(--base);
  --reveal: var(--ambient-copper);
  --warm-top: var(--ambient-copper);
  --warm-edge: var(--ambient-copper);
  --edge: var(--divider);
}
[data-theme="light"] .ambient {
  --face-top: var(--panel);
  --face-mid: var(--base);
  --face-bottom: var(--alt);
}
.backdrop-wash {
  background: linear-gradient(90deg, color-mix(in srgb, var(--base) 84%, transparent), color-mix(in srgb, var(--base) 63%, transparent) 38%, transparent 90%);
}

.ambient-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 60px;
  padding-block: .35rem .9rem;
}
.ambient-state {
  min-width: 1.2rem;
  color: var(--accent-text);
  text-align: center;
}
.motion-icon {
  position: relative;
  width: 12px;
  height: 10px;
  border: solid currentColor;
  border-width: 1px 0;
}
.motion-icon::after {
  content: "";
  position: absolute;
  inset: 3px 0 auto;
  border-top: 1px solid currentColor;
  transform: rotate(-13deg);
}


@media (max-width: 690px) {
  .work-examples { column-gap: 1.1rem; margin-top: -.8rem; }
  .work-examples button, .band-note-button { font-size: .78rem; }
}