/* Keep the original scene untouched; expose keyboard-accessible playback controls. */
.embedded body {
  min-height: 0;
  display: block;
  overflow: hidden;
}
.embedded .player {
  max-width: none;
}
.embedded .controls {
  display: flex;
  gap: 8px;
  left: auto;
  right: 12px;
  bottom: 12px;
  transform: none;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.embedded .controls > :not(#play):not(#play-toggle):not(#replay) {
  display: none;
}
.embedded .controls button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  background: #ffffffe6;
  color: #18181b;
  box-shadow: 0 1px 3px #0000001a;
}
.embedded .controls button:hover {
  background: #f5f5f4;
}
.embedded .controls button:focus-visible {
  outline: 2px solid #606052;
  outline-offset: 3px;
}
.embedded .controls button > * {
  display: none;
}
.embedded .controls button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("./pause.svg") center / contain no-repeat;
}
.embedded .paused .controls button::before,
.embedded .is-paused .controls button::before {
  mask-image: url("./play.svg");
}
.embedded .controls #replay { order: -1; }
.embedded .controls #replay::before { mask-image: url("./restart.svg?v=1"); }
@media (hover: none) {
  .embedded .controls {
    opacity: 1;
  }
}