html.film-embedded .studio-header,
html.film-embedded .studio-footer { display:none; }
html.film-embedded body { margin:0; }
html.film-embedded main { max-width:none; padding:0 0 16px; }
html.film-embedded .stage { border:0; box-shadow:none; }
html.film-embedded .controls { padding:0 16px; margin-top:16px; }
.transport #fullscreen { margin-left:auto; }
.chapter-browser > summary { display:none; }
html.film-hero body { background:#fff; }
html.film-hero main { padding-bottom:0; }
html.film-hero .stage { border-radius:0; }
html.film-hero .controls { display:flex; align-items:center; gap:16px; max-width:1152px; margin:0 auto; padding:8px 20px; }
html.film-hero .transport { order:2; flex-wrap:nowrap; gap:4px; flex-shrink:0; }
html.film-hero .transport button { display:grid; place-items:center; width:32px; height:32px; min-width:0; padding:0; border:0; border-radius:50%; font-size:17px; background:transparent; color:#719087; }
html.film-hero .transport button:hover { background:#edf6f2; color:#27826b; }
html.film-hero #restart,
html.film-hero .time,
html.film-hero .scrub { display:none; }
html.film-hero .chapter-browser { display:block; flex:1; min-width:0; }
html.film-hero .chapter-browser > summary { display:none; }
html.film-hero .chapters { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px; margin:0; }
html.film-hero .chapters button { position:relative; padding:13px 2px 9px; text-align:center; border:0; border-radius:0; background:transparent; color:#78918a; }
html.film-hero .chapters button::before { content:''; position:absolute; top:3px; left:50%; width:5px; height:5px; border-radius:50%; background:#c9dbd3; transform:translateX(-50%); transition:width .2s,background .2s; }
html.film-hero .chapters button.active { color:#27826b; }
html.film-hero .chapters button.active::before { width:22px; border-radius:3px; background:#27826b; }
html.film-hero .chapters small { display:none; }
html.film-hero .chapters strong { font-size:11px; white-space:nowrap; }
@media(max-width:767px) {
 html.film-hero .controls { gap:8px; padding-top:14px; }
 html.film-hero .chapters { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:8px; }
}
@media(min-width:768px) {
 html.film-hero .stage { height:clamp(360px,calc(var(--host-viewport-height,768px) - 220px),720px); aspect-ratio:auto; }
 html.film-hero .controls { padding:0 32px; }
}
html.film-hero .stage:fullscreen { height:100vh; }