/* The frame and the hand's depth effect are part of the video itself. */
.breakout-visual{position:relative;min-width:0;width:100%;max-width:580px;justify-self:center}
.breakout-stage{margin:0;width:100%;aspect-ratio:1;background:var(--blue)}
.breakout-video{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--blue);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.breakout-video[role=button]{cursor:pointer}
.breakout-stage:has(.breakout-video:focus-visible){outline:3px solid var(--lime);outline-offset:4px;border-radius:12px}
.breakout-message{margin:2px 0 18px;text-align:center;font-size:clamp(1.125rem,2vw,1.65rem);line-height:1.3;letter-spacing:-.035em;font-weight:700;opacity:0;transform:translateY(7px);transition:opacity .6s ease,transform .6s ease}
.breakout-message span,.breakout-message strong{display:block}
.breakout-message strong{color:var(--lime)}
.breakout-message.is-visible{opacity:1;transform:none}
.breakout-status[hidden]{display:none}
.breakout-status{font-size:.75rem;color:#e3e8ff;line-height:1.5;margin:14px 0 0;text-align:center}
@media(min-width:681px) and (max-width:1050px){.hero{gap:2rem;grid-template-columns:1.02fr 1fr}}
@media(max-width:680px){.hero{gap:32px;padding-bottom:38px}.breakout-visual{max-width:440px}.breakout-message{font-size:1.3rem;margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.breakout-message{opacity:1;transform:none;transition:none}}