.hero-drawing{position:relative;aspect-ratio:16/9;background:#fff;margin:10px;overflow:hidden;border-radius:6px}
.canvas .hero-drawing>img,.hero-drawing>video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;padding:0;margin:0}
.hero-drawing>video{position:absolute;inset:0;opacity:0;pointer-events:none}
.hero-drawing.has-played>video{opacity:1}.hero-drawing.has-played>img{visibility:hidden}
.hero-animation-toggle{position:absolute;bottom:10px;right:10px;z-index:1;background:#fff;color:#173e3c;border:1px solid #a5bab4;box-shadow:0 2px 10px #142a3a12;border-radius:20px;font:600 12px/1.2 Arial,sans-serif;padding:9px 13px;cursor:pointer}
.hero-animation-toggle[hidden]{display:none}.hero-animation-toggle:focus-visible{outline:3px solid #006e68;outline-offset:3px}
.hero-drawing [role=status]{position:absolute;left:10px;bottom:10px;right:110px;font-size:11px;line-height:1.4;background:#fff;color:#526473;margin:0}
.hero-drawing [role=status]:empty{display:none}
.scenario-preview{display:block;position:relative;width:calc(100% + 20px);aspect-ratio:3/2;max-height:280px;margin:-8px -10px 18px;overflow:hidden;background:#fff}
.scenario-preview>.scenario-thumb{display:block;width:100%;height:100%;max-height:none;aspect-ratio:3/2;margin:0;object-fit:contain}
.scenario-preview>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s ease}
.scenario-preview.is-playing>video{opacity:1}
.scenario-preview-toggle{display:block;margin:0 0 16px auto;border:1px solid #b8ceca;border-radius:20px;padding:8px 16px;background:#fff;color:#006e68;font:600 13px/1.3 Arial,sans-serif;cursor:pointer}
[dir=rtl] .scenario-preview-toggle{margin-left:0;margin-right:auto}
@media(max-width:700px){.scenario-preview{max-height:230px}}
@media(prefers-reduced-motion:reduce){.scenario-preview>video{transition:none}}