html,
body {
  width: 320px;
  height: 100px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #02070d;
}

body { font-family: Arial, sans-serif; }
.creative-viewport { position: relative; width: 320px; height: 100px; overflow: hidden; background: #02070d; }
.fallback, #motion-canvas { position: absolute; inset: 0; display: block; width: 320px; height: 100px; }
.fallback[hidden], #motion-canvas[hidden] { display: none; }
.cta-hit { position: absolute; top: 25px; right: 0; width: 91px; height: 70px; display: block; cursor: pointer; z-index: 1; }
.sound-toggle { position: absolute; top: 3px; right: 4px; z-index: 3; display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 1px solid rgba(214, 235, 242, 0.58); border-radius: 50%; background: rgba(2, 8, 15, 0.68); color: #d9edf3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sound-toggle:hover, .sound-toggle:focus-visible { border-color: #e05660; background: rgba(10, 29, 45, 0.92); outline: 2px solid rgba(224, 86, 96, 0.5); outline-offset: 2px; }
.sound-toggle:focus:not(:focus-visible) { outline: none; }
.sound-icon, .sound-icon svg { display: block; width: 14px; height: 14px; }
.sound-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sound-speaker { fill: currentColor !important; stroke: none !important; }
.sound-wave { display: none; }
.sound-toggle.enabled .sound-wave { display: block; }
.sound-toggle.enabled .sound-slash { display: none; }
@media (prefers-reduced-motion: reduce) { #motion-canvas { display: none; } .fallback { display: block; } }