.slide-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

.slide-stage.module-stage {
  background: #4f7df3;
}

.slide-stage > img {
  width: 100%;
  height: 100%;
}

.slide.has-embed.active { z-index: 6; }
body.interactive-active .tap-zone { pointer-events: none; }
.tap-zone:focus { outline: none; }
.tap-zone:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.interactive-overlay {
  position: absolute;
  z-index: 3;
  left: var(--embed-left, 4.4%);
  top: var(--embed-top, 18.2%);
  right: var(--embed-right, 4.4%);
  bottom: var(--embed-bottom, 7.4%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, .18);
  border-radius: clamp(8px, .62vw, 13px);
  background: #fff;
  box-shadow: 0 15px 42px rgba(0, 0, 0, .16);
}

.interactive-overlay.on-blue {
  border-color: rgba(255, 255, 255, .48);
  box-shadow: 0 18px 48px rgba(18, 47, 121, .24);
}

.interactive-overlay.widescreen {
  right: var(--embed-right, 17%);
  bottom: auto;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
}

.interactive-overlay.no-toolbar {
  border-radius: clamp(7px, .55vw, 12px);
  box-shadow: 0 16px 44px rgba(18, 47, 121, .2);
}

.interactive-overlay.module-frame {
  border-color: rgba(255,255,255,.34);
  border-radius: clamp(8px, .55vw, 12px);
  background: #fff;
  box-shadow: 0 22px 64px rgba(11,24,64,.28);
}

.interactive-overlay.immersive-overlay {
  border-radius: clamp(16px, 1.25vw, 24px);
  border-color: rgba(17,17,17,.14);
  box-shadow: 0 24px 68px rgba(18,31,58,.2);
}

.immersive-overlay .embed-toolbar {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: 1.25%;
  left: auto;
  width: clamp(94px, 7.8vw, 132px);
  min-height: 0;
  padding: clamp(8px,.7vw,12px);
  flex-direction: column;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: clamp(14px,1vw,20px);
  background: rgba(17,18,24,.62);
  box-shadow: 0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}

.immersive-overlay .embed-toolbar > span { display: none; }

.immersive-overlay .embed-toolbar .embed-tabs {
  width: 100%;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.immersive-overlay .embed-toolbar .embed-tabs button {
  width: 100%;
  padding: 7px 8px;
  text-align: left;
}

.immersive-overlay .embed-toolbar > a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 0;
}

.immersive-overlay .embed-toolbar > a::after {
  content: "↗";
  font-size: 14px;
}

.immersive-overlay .embed-viewport {
  position: absolute;
  inset: 0;
}

.immersive-overlay .embed-narrative {
  position: absolute;
  z-index: 7;
  top: auto;
  bottom: 3.2%;
  left: 1.8%;
  width: min(25%, 390px);
  padding: clamp(13px, 1.15vw, 22px) clamp(15px, 1.3vw, 25px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: clamp(12px, .9vw, 18px);
  color: #111318;
  background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(244,245,246,.28));
  box-shadow: 0 18px 48px rgba(18,31,58,.12), inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(28px) saturate(1.38);
  backdrop-filter: blur(28px) saturate(1.38);
}

.immersive-overlay .embed-narrative span {
  display: block;
  margin-bottom: .52em;
  color: #2d6bec;
  font-size: clamp(8px, .6vw, 11px);
  font-weight: 750;
  letter-spacing: .12em;
}

.immersive-overlay .embed-narrative h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(20px, 1.75vw, 34px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.immersive-overlay .embed-narrative p {
  margin: .72em 0 0;
  max-width: 46ch;
  color: #5c626d;
  font-size: clamp(9px, .7vw, 13px);
  line-height: 1.35;
}

.module-frame .embed-toolbar {
  min-height: clamp(34px, 2.35vw, 46px);
}

.interactive-overlay.interactive-hotspot {
  display: grid;
  place-items: end;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.interactive-hotspot > span {
  margin: 0 10px 10px 0;
  padding: 7px 10px;
  border: 1px solid rgba(20, 75, 190, .24);
  border-radius: 999px;
  color: #195bd1;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 18px rgba(24, 67, 144, .14);
  font-size: clamp(8px, .58vw, 11px);
  font-weight: 700;
  letter-spacing: .025em;
}

.interactive-hotspot:hover > span,
.interactive-hotspot:focus-visible > span {
  color: #fff;
  background: #246dea;
}

.embed-modal {
  position: fixed;
  z-index: 100;
  inset: 5vh 5vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.embed-modal::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.embed-modal-controls { margin-left: auto; }
.embed-modal-close {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}

.embed-toolbar {
  min-height: clamp(34px, 2.7vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(12px, 1.2vw, 22px);
  color: #d8dbe4;
  background: #101116;
  font-size: clamp(9px, .68vw, 13px);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.embed-toolbar strong { color: #fff; font-weight: 700; }
.embed-toolbar a { color: #a9c4ff; text-decoration: none; white-space: nowrap; }
.embed-toolbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.embed-tabs { display: flex; align-items: center; gap: 5px; overflow-x: auto; }
.embed-tabs button {
  min-width: 0;
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  color: #aeb2be;
  background: transparent;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.embed-tabs button.active { color: #fff; background: #315fdb; }

.embed-viewport { position: relative; flex: 1; min-height: 0; background: #f7f7f9; }
.embed-viewport iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.embed-file-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f2f1ee;
}

.embed-file-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  box-shadow: none;
}

.embed-file-fallback span {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(11,12,16,.82);
  font-size: 10px;
  letter-spacing: .04em;
}

.theme-compare { --split: 50%; background: #090a0d; }
.theme-compare .embed-viewport { background: #090a0d; }
.theme-layer { position: absolute; inset: 0; overflow: hidden; }
.theme-layer.light { clip-path: inset(0 0 0 var(--split)); }
.theme-layer iframe { pointer-events: none; }
.theme-divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: #e20074;
  transform: translateX(-1px);
  pointer-events: none;
}
.theme-divider::before {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #e20074;
  transform: translate(-50%, -50%);
}
.theme-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.theme-label { position: absolute; z-index: 3; top: 14px; padding: 6px 9px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.68); font-size: 11px; pointer-events: none; }
.theme-label.dark { left: 14px; }
.theme-label.light { right: 14px; }

@media (max-width: 800px) {
  .embed-toolbar { padding-inline: 10px; }
  .embed-toolbar > span { display: none; }
  .embed-tabs button { padding: 5px 7px; }
}