/* Shared slide stage — used by the TV player and all previews. */
.sg-host { position: relative; overflow: hidden; background: #000; }
.sg-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  overflow: hidden; background: #000; perspective: 2400px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
.sg-slide { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.sg-media-wrap { position: absolute; inset: 0; }
.sg-media { width: 100%; height: 100%; display: block; }
.sg-missing {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #888; font-size: 56px; background: repeating-linear-gradient(45deg, #1a1a1a 0 40px, #222 40px 80px);
}

.sg-text { position: absolute; max-width: 78%; padding: 0; line-height: 1.1; }
.sg-text.boxed { background: rgba(0, 0, 0, .6); padding: 36px 52px; border-radius: 18px; }
.sg-title { font-weight: 800; letter-spacing: -.02em; white-space: pre-wrap; }
.sg-subtitle { margin-top: .35em; font-weight: 500; opacity: .92; white-space: pre-wrap; line-height: 1.25; }
.sg-text:not(.boxed) .sg-title, .sg-text:not(.boxed) .sg-subtitle { text-shadow: 0 4px 24px rgba(0,0,0,.45); }

.size-s .sg-title { font-size: 64px; }  .size-s .sg-subtitle { font-size: 34px; }
.size-m .sg-title { font-size: 96px; }  .size-m .sg-subtitle { font-size: 46px; }
.size-l .sg-title { font-size: 140px; } .size-l .sg-subtitle { font-size: 60px; }
.size-xl .sg-title { font-size: 200px; } .size-xl .sg-subtitle { font-size: 76px; }

.pos-top-left     { top: 80px; left: 90px; }
.pos-top          { top: 80px; left: 50%; transform: translateX(-50%); text-align: center; }
.pos-top-right    { top: 80px; right: 90px; text-align: right; }
.pos-left         { top: 50%; left: 90px; transform: translateY(-50%); }
.pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.pos-right        { top: 50%; right: 90px; transform: translateY(-50%); text-align: right; }
.pos-bottom-left  { bottom: 80px; left: 90px; }
.pos-bottom       { bottom: 80px; left: 50%; transform: translateX(-50%); text-align: center; }
.pos-bottom-right { bottom: 80px; right: 90px; text-align: right; }