.preview-root { min-width: 0; background: #0d0f12; }
.preview-page { min-height: 100svh; overflow: hidden; background: #0d0f12; }
.preview-canvas { min-height: 100svh; display: grid; place-items: center; padding: clamp(14px, 4vw, 70px); background: radial-gradient(circle at 50% 45%, #2a2e35, #0b0d10 62%); }
.preview-stage { width: min(100%, 1540px); aspect-ratio: var(--canvas-width, 1920) / var(--canvas-height, 1080); box-shadow: 0 35px 130px #000d, 0 0 0 1px #ffffff15; }
.preview-stage .scene-title { font-size: clamp(42px, 7.2vw, 124px); }
.preview-stage .scene-kicker, .preview-stage .scene-body { font-size: clamp(10px, 1.15vw, 18px); }
.preview-stage .scene-cta { padding: clamp(10px, 1vw, 17px) clamp(15px, 1.5vw, 25px); font-size: clamp(10px, .85vw, 15px); }
.preview-controls { position: fixed; z-index: 20; top: 16px; left: 50%; display: grid; grid-template-columns: auto minmax(170px, 1fr) auto auto auto; align-items: center; gap: 9px; width: min(calc(100% - 32px), 850px); padding: 7px; border: 1px solid #ffffff24; border-radius: 9px; background: #15181de8; box-shadow: 0 15px 50px #0008, 0 1px 0 #ffffff1c inset; backdrop-filter: blur(18px); transform: translateX(-50%); }
.preview-controls a, .preview-controls button { min-height: 36px; display: grid; place-items: center; padding: 0 13px; border: 1px solid #3a404a; border-radius: 5px; background: #252931; color: #f3f4f6; text-decoration: none; font-size: 10px; font-weight: 800; cursor: pointer; }
.preview-controls span { min-width: 0; padding-left: 7px; }
.preview-controls span small { display: block; color: #767e89; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.preview-controls span strong { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.preview-controls output { color: #b4ff2c; font: 10px "JetBrains Mono", monospace; }
.preview-controls .preview-play { min-width: 46px; background: #8870ff; }
.preview-progress { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; height: 5px; background: #ffffff12; }
.preview-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8870ff, #b4ff2c); box-shadow: 0 0 18px #b4ff2c; }
@media (max-width: 700px) {
  .preview-canvas { padding: 10px; }
  .preview-controls { top: auto; bottom: 15px; grid-template-columns: auto 1fr auto auto; }
  .preview-controls output { display: none; }
  .preview-controls a { padding: 0 9px; }
}