/* the living artwork in the opening section */
.artwork-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.artwork-live.is-live { opacity: 1; }
.canvas.quiet { cursor: none; }
.canvas-controls { flex-direction: column; gap: 12px; }
.canvas-buttons { display: flex; align-items: center; gap: 8px; }
.artwork-stages { display: flex; justify-content: center; gap: 2px; }
.artwork-stage {
  display: grid;
  place-items: center;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.artwork-stage::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fffdf2;
  opacity: 0.3;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.artwork-stage.on::after { opacity: 1; transform: scale(1.5); }
.artwork-stage:focus-visible { outline-offset: 0; }
.sound-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgb(233 229 216 / 25%);
  border-radius: 0;
  color: #fffdf2;
  background: rgb(13 17 14 / 76%);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.sound-toggle::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 0.4s ease;
}
.sound-toggle[aria-pressed="true"]::before { background: currentColor; }
.sound-toggle:hover { background: rgb(35 40 31 / 90%); }
.artwork-hint {
  position: absolute;
  top: max(26px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  color: rgb(233 229 216 / 55%);
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .16em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.artwork-hint.show { opacity: 1; }
@media (max-width: 600px) {
  .artwork-hint { font-size: 9px; white-space: normal; text-align: center; width: 82vw; }
  .sound-toggle { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .artwork-live, .artwork-stages, .artwork-hint, .sound-toggle { display: none; }
}