/* UserDemos player, v1. Frame chrome, controls and the cursor. */
.ud-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
  outline: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ud-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

/* Cursor: a pointer arrow with a click ripple, moved by t.cursor(). */
.ud-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 50;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.ud-cursor svg { position: absolute; inset: 0; transform-origin: 5px 3px; }
.ud-cursor__ring {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #2563eb;
  opacity: 0;
}

/* Controls: a strip beneath the picture, so it never covers the demo. */
.ud-player-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
/* Demos set .ud-frame { height: 100% } against a full-height body. The shell
   takes that height instead and the frame shrinks to leave room for the strip,
   so the pair fits the page rather than overflowing it by the strip's height. */
.ud-player-shell > .ud-frame {
  height: auto;
  min-height: 0;
  flex: 0 1 auto;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ud-player {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 0 0 12px 12px;
  background: #2f3542;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  z-index: 100;
}
/* ?controls=0 / config.controls:false hide the bar with the hidden attribute;
   the display: flex above would otherwise override it. */
.ud-player[hidden] { display: none; }
.ud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ud-btn:hover { background: rgba(255, 255, 255, 0.12); }
/* Touch: bigger hit areas inside the same 44px strip. */
@media (pointer: coarse) {
  .ud-btn { width: 36px; height: 36px; }
  .ud-track { height: 28px; }
  .ud-player { gap: 6px; padding: 0 8px; }
}
.ud-ico-pause { display: none; }
.is-playing .ud-ico-play { display: none; }
.is-playing .ud-ico-pause { display: block; }
.ud-track {
  flex: 1;
  height: 16px;
  touch-action: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ud-track::before {
  content: "";
  position: absolute;
  height: 4px;
  left: 0;
  right: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.ud-track { position: relative; }
.ud-fill {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  width: 0;
}
.ud-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  white-space: nowrap;
}
.ud-x { display: none; }
.is-muted .ud-wave { display: none; }
.is-muted .ud-x { display: block; }
.ud-unmute {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font: 600 13px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.ud-unmute[hidden] { display: none; }