/* The same film, edited into a small inline product vignette. No site CSS leakage. */
html,body { margin:0; padding:0; background:#14251b; overflow:hidden; }
main { width:100%; max-width:none; padding:0; margin:0; }
.sr-only { top:0; left:0; margin:-1px; }
.cinema { position:relative; border:0; border-radius:0; box-shadow:none; }
.film { height:360px; --device-scale:.48; }
.film-top,.film-bottom { display:none; }
.story { left:24px; top:0; bottom:48px; width:clamp(118px,calc(100% - 302px),158px); height:auto; }
.scene-copy { top:50%; text-align:left; transform:translateY(-50%)!important; }
.scene-number { display:none; }
.scene-copy h2 { font-size:clamp(26px,6.52vw,30px); letter-spacing:-.6px; line-height:1.08; margin:0; }
.scene-copy h2 br { display:initial; }
.scene-copy h2 em { display:inline; }
.scene-copy p { display:none; }
.discovery-note,.handoff-proof,.extraction-proof,.plan-question,.story .saved-seal { display:none; }
.device-zone { left:38%; right:0; top:0; bottom:48px; clip-path:inset(0 -100px 0 -100px); }
.phone { top:13px; }
.composer .field-place>strong { font-size:24px; }
.composer .field-city>strong { font-size:13px; }
.composer .field-dish>strong { font-size:16px; }
.composer .field>small { font-size:7px; letter-spacing:.9px; }
.composer .recognition { font-size:8px; }
.composer .save-button { flex-basis:92px; height:35px; font-size:12px; }
.composer .save-button>span { min-width:35px; }
.composer .save-button svg { width:14px; height:14px; }
.share-apps b { font-size:9px; }
.share-preview b { font-size:10px; }
.share-copy { font-size:11px; }
.social-actions small { font-size:9px; }
.food-row.featured strong { font-size:16px; }
.food-row.featured p { font-size:12px; }
.device-shadow { bottom:13px; left:23%; right:18%; }
.playback-surface { position:absolute; inset:0; z-index:20; width:100%; height:100%; border:0; border-radius:0; padding:0; background:transparent; cursor:pointer; }
.playback-surface:focus-visible { outline:1px solid #d1bb8c; outline-offset:-5px; border-radius:13px; }
.transport { position:absolute; z-index:21; bottom:7px; left:50%; width:calc(100% - 24px); height:40px; padding:0 10px 0 2px; gap:2px; border:1px solid #dadfc514; border-radius:10px; background:#0b1710c9; color:#d8decf; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); flex-wrap:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,5px); transition:opacity .25s ease,transform .25s ease; }
.controls-revealed .transport { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.transport button { min-width:40px; min-height:38px; padding:0; color:#d8decf; }
.transport button:hover { background:#d1dbc50b; }
.transport .play-control { background:none; }
.transport .play-control svg { width:14px; height:14px; }
.transport .replay-control svg { width:12px; height:12px; }
.transport button:focus-visible,.timeline input:focus-visible { outline:1px solid #cfb784; outline-offset:-2px; }
.timeline { min-width:0; margin:0 0 0 5px; }
.timeline input { height:22px; margin:0; background:linear-gradient(to right,#bba270 var(--pct,0%),#d1dbc52c var(--pct,0%)) center/100% 2px no-repeat; }
.timeline input::-webkit-slider-thumb { width:7px; height:7px; border:0; background:#d1bb8c; box-shadow:none; }
.timeline input::-moz-range-thumb { width:7px; height:7px; border:0; background:#d1bb8c; }
.time { font-size:8px; color:#a1af99; margin-top:-4px; }
.chapters,.loop-control,.control-divider,.source-switch { display:none!important; }
@media (max-width:399px) {
  .story { left:16px; right:16px; width:auto; top:8px; bottom:auto; height:30px; }
  .scene-copy { text-align:center; }
  .scene-copy h2 { font-size:23px; letter-spacing:-.4px; white-space:nowrap; }
  .scene-copy h2 br { display:none; }
  .film { --device-scale:.44; }
  .phone { top:45px; }
  .device-zone { left:0; right:0; clip-path:inset(44px -100px 0 -100px); }
}
@media (min-width:400px) {
  .device-zone { left:calc(100% - 190px); right:18px; }
}
@media (prefers-reduced-motion:reduce) { .transport { transition:none; } }