.hero-preview .bd-preview-heading { margin: 0 0 9px; font-size: 12px; }
.hero-preview .bd-preview-stage { position: relative; overflow: hidden; width: 100%; height: 170px; background: #292b22; }
.hero-preview .bd-preview-frame { position: absolute; inset: 0; background-image: url('./assets/timeline.png'); background-size: 600% auto; background-repeat: no-repeat; }
.hero-preview .bd-preview-frame[data-preview-frame="b"] { opacity: 0; }
.hero-preview .bd-preview-controls { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.hero-preview .bd-preview-play { flex: 0 0 auto; min-width: 48px; min-height: 36px; padding: 0 7px; border: 1px solid #e7e2d7; border-radius: 2px; background: transparent; color: #fff; font-size: 11px; }
.hero-preview .bd-preview-play:focus-visible,.hero-preview .bd-preview-progress:focus-visible { outline: 2px solid #f7d398; outline-offset: 3px; }
.hero-preview .bd-preview-progress { display: block; min-width: 0; width: 100%; accent-color: #eee8da; }
.hero-preview .bd-preview-time { display: block; flex: 0 0 auto; padding: 0; color: #f7f3e9; font-size: 10px; white-space: nowrap; }
.hero-preview .bd-preview-disclaimer { margin: 8px 0 0; color: #e7e2d7; font-size: 10px; line-height: 1.4; }
@media(max-width:850px) { .hero-preview .bd-preview-stage { height: 140px; } .hero-preview .bd-preview-controls { gap: 4px; } .hero-preview .bd-preview-time { font-size: 9px; } }
@media(max-width:600px) { .hero-preview .bd-preview-stage { height: 115px; } }