.play-page {
  display: block;
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.play-field {
  position: relative;
  display: block;
  width: min(100%, 26rem);
  max-width: none;
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
  touch-action: none;
}

#play-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.play-back {
  position: absolute;
  top: max(0.5rem, env(safe-area-inset-top));
  left: 0.75rem;
  width: 3rem;
  height: 3rem;
  justify-content: center;
  color: #90989c;
  z-index: 2;
}

.play-control {
  position: absolute;
  top: 82%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #70777a;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  cursor: pointer;
  z-index: 1;
}

.play-control svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
  transition: color 200ms ease, opacity 40ms linear;
  filter: var(--audio-glow, none);
}

.play-control[data-control="tint"] circle { fill: currentColor; }

.play-control[aria-pressed="true"] { color: rgb(var(--active-rgb, 255 255 255)); }
.play-control[aria-pressed="true"] svg { opacity: var(--brightness, 1); }
.play-control:where([data-control="spiral"], [data-control="spiralReverse"]) svg {
  transition: color 200ms ease, opacity 800ms ease;
}
.play-control[data-control="spiral"][aria-pressed="true"] svg,
.play-control[data-control="spiralReverse"][aria-pressed="true"] svg,
.play-control[data-control="attract"][aria-pressed="true"] svg,
.play-control[data-control="repel"][aria-pressed="true"] svg { opacity: 0; animation: none; }
.play-control[aria-busy="true"] svg { animation: play-loading 1s ease-in-out infinite; }
.play-control[data-draggable="true"] { cursor: grab; }
.play-control[data-dragging="true"] { cursor: grabbing; }
.play-control:focus { outline: none; }
.play-control:focus-visible svg { stroke-width: 2; }
.play-control.revealing svg { animation: play-reveal 900ms ease-out both; }

.play-control[hidden], #play-error[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#play-error, .play-noscript {
  position: absolute;
  top: 4.5rem;
  left: 1.5rem;
  right: 1.5rem;
  font-size: 0.875rem;
  font-weight: 300;
  text-align: center;
}

@media (min-width: 640px) {
  .play-field { border-inline: 1px solid #15191b; }
}

@keyframes play-reveal {
  from { opacity: 0; transform: scale(0.85); }
  50% { filter: drop-shadow(0 0 12px rgb(255 255 255 / 45%)); }
  to { opacity: 0.9; transform: scale(1); }
}

@keyframes play-loading { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .play-control svg { transition: none; animation: none !important; }
}

@media (forced-colors: active) {
  .play-control { color: ButtonText; }
  .play-control[aria-pressed="true"] { color: Highlight; }
  #play-particles { display: none; }
}