.sr4-scene {
  --sr-width: var(--sr-width-desktop, 100vw);
  --sr-travel: var(--sr-travel-desktop, 5);
  --sr-offset: var(--sr-offset-desktop, 0px);
  --sr-top: calc(var(--sr-offset) + var(--wp-admin--admin-bar--height, 0px));
  --sr-stage: calc(100vh - var(--sr-top));
  --sr-ink: #f5f5f2;
  --sr-line: rgba(255,255,255,.22);
  position: relative;
  width: 100%;
  height: calc(var(--sr-stage) + var(--sr-travel) * 100vh);
  color: var(--sr-ink);
  isolation: isolate;
}
@supports (height: 100svh) {
  .sr4-scene { --sr-stage: calc(100svh - var(--sr-top)); height: calc(var(--sr-stage) + var(--sr-travel) * 100svh); }
}
.sr4-scene * { box-sizing: border-box; }
.sr4-stage {
  position: absolute;
  top: 0;
  height: var(--sr-stage);
  min-height: 280px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0,1fr) auto;
  align-items: center;
  justify-items: center;
  padding: 28px 0 max(26px, env(safe-area-inset-bottom));
}
.sr4-media {
  position: relative;
  width: min(100%, var(--sr-width), calc((var(--sr-stage) - 125px) * var(--sr-ratio, 1.777777778)));
  aspect-ratio: var(--sr-aspect, 16 / 9);
  align-self: center;
}
.sr4-canvas, .sr4-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.sr4-poster[hidden], .sr4-canvas[hidden] { display: none !important; }
.sr4-scene[data-sr-portrait="true"] { --sr-aspect: 58 / 61; --sr-ratio: .950819672; }
.sr4-scene[data-sr-portrait="true"] .sr4-media {
  /* Frame the artwork, not the transparent export margins. The phone source
     is 1080 x 1296; every moving device fits within x=104..1032, y=320..1296.
     This constant framing avoids zoom/pan jumps as the scene changes. */
  width: min(calc(100vw - 16px), var(--sr-width), calc((var(--sr-stage) - 125px) * var(--sr-ratio)));
  overflow: clip;
}
.sr4-scene[data-sr-portrait="true"] .sr4-canvas,
.sr4-scene[data-sr-portrait="true"] .sr4-poster {
  inset: auto;
  left: -11.206896552%;
  top: -32.786885246%;
  width: 116.379310345%;
  height: 132.786885246%;
  max-width: none;
}
.sr4-scene[data-sr-portrait="true"] .sr4-controls { max-width: calc(100vw - 24px); }
.sr4-decoder {
  position: absolute;
  left: 0; top: var(--sr-top);
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  /* Keep the decoder attached and renderable on Safari. */
}
.sr4-controls {
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 5px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(21,24,29,.95);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  font-family: inherit;
  color: var(--sr-ink);
}
.sr4-cue { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: inherit; letter-spacing: .015em; }
.sr4-cue svg { flex: 0 0 18px; width: 18px; height: 26px; }
.sr4-wheel { fill: #ffab49; animation: sr4-scroll-wheel 1.6s ease-in-out infinite; animation-play-state: paused; }
.sr4-scene[data-sr-pin="active"] .sr4-wheel { animation-play-state: running; }
@keyframes sr4-scroll-wheel {
  0% { opacity: 0; transform: translateY(-1px); }
  20% { opacity: 1; }
  75%, 100% { opacity: 0; transform: translateY(7px); }
}
.sr4-progress {
  width: clamp(48px, 8vw, 112px);
  flex: 0 0 auto;
  height: 4px;
  background: var(--sr-line);
  border-radius: 8px;
  overflow: hidden;
}
.sr4-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg,#f04432 0%,#f87732 50%,#ffc35a 100%); transform: scaleX(var(--sr-progress,0)); transform-origin: left; }
.sr4-button, .sr4-link {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--sr-line);
  border-radius: 999px;
  background: rgba(28,28,28,.45);
  color: var(--sr-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 13px 18px;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s;
}
.sr4-button:hover, .sr4-button:focus-visible, .sr4-link:hover, .sr4-link:focus-visible { background: rgba(100,100,100,.35); border-color: currentColor; color: var(--sr-ink); }
.sr4-button:focus-visible, .sr4-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr4-button:disabled { opacity: .45; cursor: default; }
.sr4-link { border-color: transparent; background: transparent; padding-inline: 4px; }
.sr4-controls .sr4-link { color: var(--sr-ink); opacity: .9; font-size: 12px; }
.sr4-controls .sr4-link:hover { opacity: 1; }
.sr4-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr4-after { display: block; height: 1px; width: 1px; scroll-margin-top: var(--wp-admin--admin-bar--height,0px); }
.sr4-scene[data-sr-pin="active"] > .sr4-stage { position: fixed; top: var(--sr-top); left: var(--sr-left,0px); width: var(--sr-host-width,100%); }
.sr4-scene[data-sr-pin="after"] > .sr4-stage { top: auto; bottom: 0; }
/* Native sticky does not switch positioning modes at the entry boundary. Only
   opt in after verifying that the page viewport is the stage's scrollport. */
/* The guard only adds this class when the document owns scrolling. Both axes
   must be explicit: a theme's overflow-y:auto coerces overflow-x:clip to hidden
   and silently creates a different sticky scrollport, especially in Elementor. */
body.sr4-viewport-scroll { overflow-x: clip !important; overflow-y: visible !important; }
.sr4-scene[data-sr-layout="sticky"] > .sr4-stage {
  position: sticky;
  top: var(--sr-top);
  bottom: auto;
  left: auto;
  width: 100%;
}
/* Suppress retired controls even if the page builder serves older markup. */
.sr4-scene [data-sr-watch], .sr4-scene dialog { display: none !important; }
.sr4-reduced, .sr4-unavailable { height: var(--sr-stage); }
.sr4-reduced .sr4-stage, .sr4-unavailable .sr4-stage { position: relative !important; top: 0 !important; bottom: auto !important; transform: none !important; }
.sr4-reduced .sr4-cue, .sr4-reduced .sr4-progress, .sr4-unavailable .sr4-cue, .sr4-unavailable .sr4-progress { display: none; }
.sr4-unavailable .sr4-status { position: static; grid-column: 1; width: auto; height: auto; clip-path: none; white-space: normal; font-size: 13px; text-align: center; padding: 8px 20px; }
@media (max-width: 1024px) {
  .sr4-scene { --sr-width: var(--sr-width-tablet,100vw); --sr-travel: var(--sr-travel-tablet,4.5); --sr-offset: var(--sr-offset-tablet,0px); }
}
@media (max-width: 767px) {
  .sr4-scene { --sr-width: var(--sr-width-mobile,100vw); --sr-travel: var(--sr-travel-mobile,4); --sr-offset: var(--sr-offset-mobile,0px); }
  .sr4-stage { padding-top: 18px; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .sr4-controls { gap: 10px; max-width: calc(100% - 24px); padding: 4px 12px; font-size: 11px; }
  .sr4-cue { justify-content: center; }
  .sr4-progress { width: 38px; margin-right: 0; }
  .sr4-controls .sr4-link { font-size: 10px; padding-inline: 0; }
  .sr4-cue { gap: 7px; }
  .sr4-button { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr4-scene { height: var(--sr-stage); }
  .sr4-stage { position: relative !important; top: 0 !important; bottom: auto !important; transform: none !important; }
  .sr4-cue, .sr4-progress { display: none; }
  .sr4-button, .sr4-link { transition: none; }
  .sr4-wheel { animation: none; }
}