.hero-playback{position:relative}
/* The original image determines desktop frame height; phones use the composition below. */
.hero-playback>iframe{position:absolute;left:0;top:0;border:0;transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .35s}
.hero-playback.is-ready{overflow:hidden;border-radius:12px}
.hero-playback.is-ready::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
.hero-playback.is-ready .workspace-screenshot{border-color:transparent}
.hero-playback.is-ready>iframe{opacity:1}
/* The inert iframe lets clicks reach the original full-frame demo link. */
.hero-playback:has(>a:focus-visible){outline:3px solid #8cabff;outline-offset:4px;border-radius:12px}
.hero-pause{display:none}
.hero-footer-actions{display:inline-flex;align-items:center;gap:16px}
@media(prefers-reduced-motion:no-preference){
  .hero-pause:not([hidden]){display:inline-flex;align-items:center;gap:5px;position:relative;padding:0;border:0;border-radius:2px;color:inherit;background:transparent;font:inherit;cursor:pointer}
  .hero-pause::after{content:"";position:absolute;inset:-6px -4px}
  .hero-pause:hover{color:#fff}
  .hero-pause:focus-visible{outline:2px solid #8cabff;outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.hero-playback>iframe{display:none}}
@media(max-width:780px){.hero-footer-actions{gap:12px}.hero-pause:not([hidden]){min-height:44px;min-width:44px;justify-content:center}.hero-pause::after{inset:0}}
/* A phone-sized window into the same demo renderer, never a scaled desktop board. */
@media(max-width:780px){
  .hero-playback{height:520px;overflow:hidden;border-radius:12px}
  .hero-playback>a{display:block;height:100%}
  .hero-playback .workspace-screenshot{height:100%;object-fit:cover;object-position:30% top}
  .hero-playback.is-ready>iframe{display:block}
}