.sound-playground {
  position: relative;
  margin: 1.5rem 0 0;
  padding: clamp(20px, 3vw, 40px) 8px;
  border: 1px solid rgba(107, 106, 92, .16);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 42%, #faf8f2 0, #efebe2 85%);
  overflow: hidden;
}
.sound-playground [hidden] { display: none !important; }
.waveform-stage { position: relative; width: 100%; height: clamp(330px, 37vw, 440px); }
.waveform-stage canvas, .waveform-fallback { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; }
.waveform-stage canvas { cursor: grab; outline: none; touch-action: none; }
.waveform-stage canvas.is-grabbing { cursor: grabbing; }
.waveform-stage canvas:focus-visible:not(.is-pointer-focused) { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 12px; }
.waveform-reset { position: absolute; top: 3px; right: 9px; width: 70px; height: 70px; padding: 16px; border: 0; border-radius: 12px; background: none; cursor: pointer; touch-action: manipulation; }
.waveform-reset svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: .22; transform: perspective(220px) rotateX(8deg) rotateY(-12deg) rotate(-6deg); filter: drop-shadow(.3px 1px .6px #71442618); transition: transform 180ms ease, opacity 180ms ease; }
.waveform-reset:hover svg { opacity: .48; transform: perspective(220px) rotateX(4deg) rotateY(-7deg) rotate(-2deg) translateY(-1px); }
.waveform-reset:focus-visible svg { opacity: .8; }
.waveform-reset:active svg { transform: perspective(220px) rotateX(8deg) rotateY(-12deg) rotate(-6deg) translateY(1px); }
@media (prefers-reduced-motion: reduce) { .waveform-reset svg { transition: none; } }
.waveform-modes { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 18px 12px 0; }
.waveform-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 17px; border: 1px solid transparent; border-radius: 100px; background: transparent; color: var(--muted); font: inherit; font-size: .94rem; cursor: pointer; }
.waveform-modes button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mode-color); }
.waveform-modes button[aria-pressed="true"] { color: var(--ink); background: #fffdf8; border-color: rgba(107,106,92,.15); box-shadow: 0 2px 5px rgba(60,45,20,.04); }
.waveform-modes button:hover { color: var(--ink); background: rgba(255,255,255,.45); }
.waveform-listen-row { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px 0 0; padding: 0 12px; min-height: 48px; }
.waveform-listen-row p { margin: 0; font-size: .92rem; color: var(--muted); }
.waveform-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 112px; height: 46px; padding: 0 18px; border: 0; border-radius: 100px; background: var(--ink); color: #fffdf5; font: inherit; cursor: pointer; }
.wave-pause-icon { display: none; }
.is-playing .wave-pause-icon { display: block; }
.is-playing .wave-play-icon { display: none; }
.waveform-status { margin: 10px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.waveform-status:empty { display: none; }
.sound-playground audio { display: block; max-width: 100%; margin: 12px auto 0; }
.sound-playground audio:not([controls]) { display: none; }
@media (max-width: 600px) {
  .waveform-stage { height: 340px; }
  .waveform-modes { gap: 2px; }
  .waveform-modes button { padding: 10px 12px; }
  .waveform-listen-row { flex-direction: column; gap: 12px; }
}

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

.waveform-modes::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: calc(50% + var(--shadow-y, 0px));
  left: var(--shadow-x, 50%);
  width: var(--shadow-width, 220px);
  height: var(--shadow-height, 42px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #4b4033 0, transparent 70%);
  opacity: var(--shadow-opacity, 0);
  filter: blur(var(--shadow-blur, 10px));
}