/* 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: 100%;
  transform: scaleX(0);
  transform-origin: left;
}
.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; }

/* Calls to action (?cta=&cta_url=): an end card when the demo finishes. */
.ud-endcard {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}
.ud-endcard[hidden] { display: none; }
.ud-endcard__cta {
  padding: 16px 30px;
  border-radius: 999px;
  background: #14130f;
  color: #fff;
  font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, filter 0.15s;
}
.ud-endcard__cta:hover { transform: translateY(-1px); filter: brightness(1.12); }
.ud-endcard__cta--second { font-size: 15px; padding: 12px 22px; background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.ud-endcard__replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.ud-endcard__replay:hover { background: rgba(255, 255, 255, 0.24); }