.overlay-preview-slide,
.runtime-slide,
.runtime-slide.minimal,
.runtime-slide.solid {
  box-shadow:
    inset 0 0 0 var(--inner-edge-width, 0px) var(--inner-edge-color, transparent),
    inset 0 1px 0 rgba(255, 255, 255, var(--depth-highlight-alpha, .22)),
    0 var(--depth-contact-y, 4px) 0 rgba(8, 40, 82, var(--depth-edge-alpha, .495)),
    var(--depth-contact-x, 3px)
    var(--depth-contact-y, 4px)
    var(--depth-contact-blur, 11px)
    rgba(0, 0, 0, var(--depth-contact-alpha, .44)),
    var(--depth-shadow-x, 9px)
    var(--depth-shadow-y, 12px)
    var(--depth-shadow-blur, 34px)
    rgba(0, 0, 0, var(--depth-shadow-alpha, .413)),
    0 0 28px rgba(0, 170, 255, .25);
}

/* Keep the builder preview and browser-source output on one visual palette. */
.overlay-preview-slide,
.runtime-slide {
  color: #fff;
  border-color: #25c9ff;
  background: linear-gradient(135deg, rgba(6, 20, 46, .95), rgba(11, 33, 66, .95));
}

.overlay-preview-slide > i,
.runtime-slide > i {
  background: #0d2a4c;
}

.overlay-preview-slide > img,
.runtime-slide > img,
.overlay-slide-identity > i:has(img) {
  background: transparent;
  box-shadow: none;
}

.overlay-preview-slide small,
.runtime-slide small { color: var(--top-text-color, #20dcf4); font-size: var(--top-text-size, 12px); }
.overlay-preview-slide strong,
.runtime-slide strong { color: var(--main-text-color, #ffffff); }
.overlay-preview-slide em,
.runtime-slide em { color: var(--subtext-color, #b8c7da); font-size: var(--subtext-size, 16px); }
.subfont-manrope em { font-family: Manrope, sans-serif; }
.subfont-inter em { font-family: Inter, sans-serif; }
.subfont-mono em { font-family: 'DM Mono', monospace; }
.subfont-serif em { font-family: Georgia, 'Playfair Display', serif; }
.font-montserrat strong, .subfont-montserrat em { font-family: Montserrat, sans-serif; }
.font-poppins strong, .subfont-poppins em { font-family: Poppins, sans-serif; }
.font-oswald strong, .subfont-oswald em { font-family: Oswald, sans-serif; }
.font-rajdhani strong, .subfont-rajdhani em { font-family: Rajdhani, sans-serif; }
.font-orbitron strong, .subfont-orbitron em { font-family: Orbitron, sans-serif; }
.font-audiowide strong, .subfont-audiowide em { font-family: Audiowide, sans-serif; }
.font-russo strong, .subfont-russo em { font-family: 'Russo One', sans-serif; }
.font-bebas strong, .subfont-bebas em { font-family: 'Bebas Neue', sans-serif; letter-spacing: .025em; }
.font-bangers strong, .subfont-bangers em { font-family: Bangers, cursive; letter-spacing: .035em; }
.font-fredoka strong, .subfont-fredoka em { font-family: Fredoka, sans-serif; }
.font-caveat strong, .subfont-caveat em { font-family: Caveat, cursive; }
.topfont-manrope small { font-family: Manrope, sans-serif; }
.topfont-inter small { font-family: Inter, sans-serif; }
.topfont-montserrat small { font-family: Montserrat, sans-serif; }
.topfont-poppins small { font-family: Poppins, sans-serif; }
.topfont-oswald small { font-family: Oswald, sans-serif; }
.topfont-rajdhani small { font-family: Rajdhani, sans-serif; }
.topfont-orbitron small { font-family: Orbitron, sans-serif; }
.topfont-audiowide small { font-family: Audiowide, sans-serif; }
.topfont-russo small { font-family: 'Russo One', sans-serif; }
.topfont-bebas small { font-family: 'Bebas Neue', sans-serif; }
.topfont-bangers small { font-family: Bangers, cursive; }
.topfont-fredoka small { font-family: Fredoka, sans-serif; }
.topfont-caveat small { font-family: Caveat, cursive; }
.topfont-mono small { font-family: 'DM Mono', monospace; }
.topfont-serif small { font-family: Georgia, 'Playfair Display', serif; }
.topstyle-normal small { font-style: normal; font-weight: 500; text-transform: none; }
.topstyle-bold small { font-style: normal; font-weight: 800; text-transform: none; }
.topstyle-italic small { font-style: italic; font-weight: 500; text-transform: none; }
.topstyle-uppercase small { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.substyle-normal em { font-style: normal; font-weight: 500; text-transform: none; }
.substyle-bold em { font-style: normal; font-weight: 800; text-transform: none; }
.substyle-italic em { font-style: italic; font-weight: 500; text-transform: none; }
.substyle-uppercase em { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.overlay-preview-slide.pill,
.runtime-slide.pill { border-color: #c157ff; background: rgba(5, 11, 28, .96); }
.overlay-preview-slide.minimal,
.runtime-slide.minimal { border-color: transparent; border-left-color: #00dbff; background: rgba(2, 8, 20, .75); }
.overlay-preview-slide.solid,
.runtime-slide.solid { border-color: #315fff; background: #0b2452; }

/* Per-item appearance variables override palette colours, but retain each shape. */
.overlay-preview-slide,
.runtime-slide {
  border-style: solid;
  border-width: var(--outline-width, 1px);
  border-color: var(--outline-color, #25c9ff);
  background: var(--inner-card-color, rgba(11, 33, 66, .95));
}
.overlay-preview-slide.hide-border,
.runtime-slide.hide-border { border-width: 0 !important; border-color: transparent !important; }
.overlay-preview-slide.hide-inner,
.runtime-slide.hide-inner { --inner-edge-width: 0px; background: transparent !important; }
.overlay-preview-slide.hide-shadow,
.runtime-slide.hide-shadow { box-shadow: none !important; }
.overlay-preview-slide.hide-icon > i,
.overlay-preview-slide.hide-icon > img,
.runtime-slide.hide-icon > i,
.runtime-slide.hide-icon > img { display: none; }
.overlay-preview-slide.hide-top-text small,
.runtime-slide.hide-top-text small { display: none; }
.overlay-preview-slide.hide-main-text strong,
.runtime-slide.hide-main-text strong { display: none; }
.overlay-preview-slide.hide-subtext em,
.runtime-slide.hide-subtext em { display: none; }

.overlay-preview-slide.animation-float,
.runtime-slide.marquee-item.animation-float { animation: sspSliderFloat 3.2s ease-in-out infinite; }
.overlay-preview-slide.animation-pulse,
.runtime-slide.marquee-item.animation-pulse { animation: sspSliderPulse 2.4s ease-in-out infinite; }
.overlay-preview-slide.animation-breathe,
.runtime-slide.marquee-item.animation-breathe { animation: sspSliderBreathe 2.8s ease-in-out infinite; }
.overlay-preview-slide.animation-tilt,
.runtime-slide.marquee-item.animation-tilt { animation: sspSliderTilt 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
.overlay-preview-slide.animation-bounce,
.runtime-slide.marquee-item.animation-bounce { animation: sspSliderBounce 2.2s ease-in-out infinite; }
.overlay-preview-slide.animation-snake,
.runtime-slide.marquee-item.animation-snake {
  animation: sspSliderSnake 2.8s ease-in-out infinite;
  animation-delay: calc(var(--slider-index, 0) * -.18s);
}
.overlay-preview-slide.animation-wave,
.runtime-slide.marquee-item.animation-wave { animation: sspSliderWave 2.6s ease-in-out infinite; animation-delay: calc(var(--slider-index, 0) * -.16s); }
.overlay-preview-slide.animation-flip,
.runtime-slide.marquee-item.animation-flip { animation: sspSliderFlip 4.2s ease-in-out infinite; backface-visibility: visible; }
.overlay-preview-slide.animation-swing,
.runtime-slide.marquee-item.animation-swing { animation: sspSliderSwing 3s ease-in-out infinite; transform-origin: 50% 0; }
.overlay-preview-slide.animation-heartbeat,
.runtime-slide.marquee-item.animation-heartbeat { animation: sspSliderHeartbeat 2.5s ease-in-out infinite; }
.overlay-preview-slide.animation-rubber,
.runtime-slide.marquee-item.animation-rubber { animation: sspSliderRubber 3.2s ease-in-out infinite; }
.overlay-preview-slide.animation-jelly,
.runtime-slide.marquee-item.animation-jelly { animation: sspSliderJelly 3s ease-in-out infinite; }
.overlay-preview-slide.animation-glitch,
.runtime-slide.marquee-item.animation-glitch { animation: sspSliderGlitch 2.8s steps(1, end) infinite; }
.overlay-preview-slide.animation-electric,
.runtime-slide.marquee-item.animation-electric { animation: sspSliderElectric 2.2s linear infinite; }
.overlay-preview-slide.animation-rainbow,
.runtime-slide.marquee-item.animation-rainbow { animation: sspSliderRainbow 4s linear infinite; }
.overlay-preview-slide.animation-zoom-drift,
.runtime-slide.marquee-item.animation-zoom-drift { animation: sspSliderZoomDrift 4.5s ease-in-out infinite; }
.overlay-preview-slide.animation-hover-3d,
.runtime-slide.marquee-item.animation-hover-3d { animation: sspSliderHover3d 4.2s ease-in-out infinite; transform-style: preserve-3d; }
.overlay-preview-slide.animation-icon-bounce > i,
.overlay-preview-slide.animation-icon-bounce > img,
.runtime-slide.marquee-item.animation-icon-bounce > i,
.runtime-slide.marquee-item.animation-icon-bounce > img { animation: sspSliderIconBounce 1.6s ease-in-out infinite; }
.overlay-preview-slide.animation-icon-spin > i,
.overlay-preview-slide.animation-icon-spin > img,
.runtime-slide.marquee-item.animation-icon-spin > i,
.runtime-slide.marquee-item.animation-icon-spin > img { animation: sspSliderIconSpin 4s linear infinite; }
.overlay-preview-slide.animation-text-reveal strong,
.runtime-slide.marquee-item.animation-text-reveal strong { animation: sspSliderTextReveal 3.2s ease-in-out infinite; }

.overlay-preview-slide.animation-shimmer,
.runtime-slide.marquee-item.animation-shimmer,
.overlay-preview-slide.animation-spotlight,
.runtime-slide.marquee-item.animation-spotlight,
.overlay-preview-slide.animation-particles,
.runtime-slide.marquee-item.animation-particles { position: relative; isolation: isolate; }
.overlay-preview-slide.animation-shimmer::after,
.runtime-slide.marquee-item.animation-shimmer::after {
  content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.34) 46%, transparent 67%);
  transform: translateX(-130%); animation: sspSliderShimmer 2.8s ease-in-out infinite; clip-path: inset(0 round 20px);
}
.overlay-preview-slide.animation-spotlight::after,
.runtime-slide.marquee-item.animation-spotlight::after {
  content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x, 15%) 30%, rgba(73,225,255,.3), transparent 32%);
  animation: sspSliderSpotlight 3.4s ease-in-out infinite; clip-path: inset(0 round 20px);
}

/* Trigger-only effects are demonstrated repeatedly in the builder preview. */
.overlay-preview-slide.animation-pop-trigger { animation: sspSliderPop 2.2s ease-in-out infinite; }
.overlay-preview-slide.animation-shake-trigger { animation: sspSliderShake 2.4s ease-in-out infinite; }
.overlay-preview-slide.animation-flash-trigger { animation: sspSliderFlash 2.4s ease-in-out infinite; }
.overlay-preview-slide.animation-particles::before,
.runtime-slide.marquee-item.animation-particles.triggered::before {
  content: ''; position: absolute; z-index: 4; inset: -30px; pointer-events: none;
  background: radial-gradient(circle at 10% 55%, #28e7ff 0 3px, transparent 4px), radial-gradient(circle at 26% 8%, #ff4bc6 0 4px, transparent 5px), radial-gradient(circle at 48% 95%, #ffe45b 0 3px, transparent 4px), radial-gradient(circle at 72% 4%, #8c63ff 0 4px, transparent 5px), radial-gradient(circle at 92% 62%, #26ffc8 0 3px, transparent 4px);
  opacity: 0; animation: sspSliderParticles 2.2s ease-out infinite;
}

/* A LIVE trigger briefly replaces the ambient effect, which resumes afterwards. */
.runtime-slide.marquee-item.triggered { animation: streamsyncMarqueeTriggered 1.8s ease; }
.runtime-slide.marquee-item.animation-pop-trigger.triggered { animation: sspSliderPop .8s ease-out; }
.runtime-slide.marquee-item.animation-shake-trigger.triggered { animation: sspSliderShake .7s ease-in-out; }
.runtime-slide.marquee-item.animation-flash-trigger.triggered { animation: sspSliderFlash 1s ease-out; }

@keyframes sspSliderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes sspSliderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes sspSliderBreathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.16) saturate(1.2); }
}
@keyframes sspSliderTilt {
  0%, 100% { transform: rotate(-.45deg); }
  50% { transform: rotate(.45deg); }
}
@keyframes sspSliderBounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-9px); }
  60% { transform: translateY(-3px); }
}
@keyframes sspSliderSnake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(6px, -8px) rotate(.55deg); }
  50% { transform: translate(0, 0) rotate(0); }
  75% { transform: translate(-6px, 8px) rotate(-.55deg); }
}
@keyframes sspSliderWave { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes sspSliderFlip { 0%,72%,100%{transform:perspective(900px) rotateY(0)} 86%{transform:perspective(900px) rotateY(360deg)} }
@keyframes sspSliderSwing { 0%,100%{transform:rotate(0)} 25%{transform:rotate(1.2deg)} 75%{transform:rotate(-1.2deg)} }
@keyframes sspSliderHeartbeat { 0%,62%,100%{transform:scale(1)} 68%{transform:scale(1.045)} 74%{transform:scale(1)} 80%{transform:scale(1.025)} }
@keyframes sspSliderRubber { 0%,72%,100%{transform:scale(1)} 78%{transform:scaleX(1.055) scaleY(.95)} 84%{transform:scaleX(.97) scaleY(1.035)} 90%{transform:scaleX(1.02) scaleY(.985)} }
@keyframes sspSliderJelly { 0%,70%,100%{transform:skew(0) scale(1)} 77%{transform:skewX(-2deg) scale(1.02,.98)} 84%{transform:skewX(1.5deg) scale(.99,1.01)} 91%{transform:skewX(-.7deg)} }
@keyframes sspSliderGlitch { 0%,84%,100%{transform:translate(0);filter:none} 86%{transform:translate(4px,-1px);filter:hue-rotate(70deg) contrast(1.25)} 88%{transform:translate(-5px,1px);filter:hue-rotate(-70deg)} 90%{transform:translate(2px);filter:brightness(1.4)} 92%{transform:translate(0);filter:none} }
@keyframes sspSliderElectric { 0%,100%{border-color:#22dcff;filter:drop-shadow(0 0 4px rgba(34,220,255,.25))} 25%{border-color:#9d5cff;filter:drop-shadow(5px 0 8px rgba(157,92,255,.45))} 50%{border-color:#ff4bc6;filter:drop-shadow(0 5px 9px rgba(255,75,198,.42))} 75%{border-color:#21ffd0;filter:drop-shadow(-5px 0 8px rgba(33,255,208,.42))} }
@keyframes sspSliderRainbow { 0%{border-color:#2ee6ff} 20%{border-color:#6f68ff} 40%{border-color:#ff4fd8} 60%{border-color:#ffb72e} 80%{border-color:#40f59d} 100%{border-color:#2ee6ff} }
@keyframes sspSliderZoomDrift { 0%,100%{transform:scale(1) translate(0)} 50%{transform:scale(1.025) translate(4px,-4px)} }
@keyframes sspSliderHover3d { 0%,100%{transform:perspective(900px) rotateX(0) rotateY(0) translateY(0)} 25%{transform:perspective(900px) rotateX(1.5deg) rotateY(-2deg) translateY(-3px)} 75%{transform:perspective(900px) rotateX(-1deg) rotateY(2deg) translateY(-5px)} }
@keyframes sspSliderIconBounce { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-9px) scale(1.05)} }
@keyframes sspSliderIconSpin { to{transform:rotate(360deg)} }
@keyframes sspSliderTextReveal { 0%,15%{opacity:0;transform:translateX(-12px);clip-path:inset(0 100% 0 0)} 35%,82%{opacity:1;transform:translateX(0);clip-path:inset(0)} 100%{opacity:0} }
@keyframes sspSliderShimmer { 0%,15%{transform:translateX(-130%)} 62%,100%{transform:translateX(130%)} }
@keyframes sspSliderSpotlight { 0%,100%{--spot-x:10%;opacity:.65} 50%{--spot-x:90%;opacity:1} }
@keyframes sspSliderPop { 0%,60%,100%{transform:scale(1)} 72%{transform:scale(1.1)} 82%{transform:scale(.98)} 90%{transform:scale(1.02)} }
@keyframes sspSliderShake { 0%,65%,100%{transform:translateX(0)} 70%{transform:translateX(-8px)} 75%{transform:translateX(7px)} 80%{transform:translateX(-5px)} 85%{transform:translateX(4px)} 90%{transform:translateX(-2px)} }
@keyframes sspSliderFlash { 0%,65%,100%{filter:brightness(1)} 72%{filter:brightness(2.2) saturate(1.5)} 82%{filter:brightness(1.25)} }
@keyframes sspSliderParticles { 0%,55%{opacity:0;transform:scale(.75)} 62%{opacity:1} 90%,100%{opacity:0;transform:scale(1.18)} }

@media (prefers-reduced-motion: reduce) {
  .overlay-preview-slide[class*="animation-"],
  .runtime-slide.marquee-item[class*="animation-"],
  .overlay-preview-slide[class*="animation-"]::before,
  .overlay-preview-slide[class*="animation-"]::after,
  .runtime-slide.marquee-item[class*="animation-"]::before,
  .runtime-slide.marquee-item[class*="animation-"]::after,
  .overlay-preview-slide[class*="animation-"] > i,
  .overlay-preview-slide[class*="animation-"] > img,
  .runtime-slide.marquee-item[class*="animation-"] > i,
  .runtime-slide.marquee-item[class*="animation-"] > img,
  .overlay-preview-slide[class*="animation-"] strong,
  .runtime-slide.marquee-item[class*="animation-"] strong { animation: none; }
}