.listen{--outline-offset:4px;left:var(--spot-x);top:var(--spot-y);width:var(--spot-w);height:var(--spot-h);position:absolute;container-type:inline-size}.listen__video{opacity:0;transition:opacity .6s}.listen__video:not([data-state=idle]){opacity:1}.listen__video canvas{pointer-events:none;display:block}.listen__screen{color:var(--color-fg);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:var(--border-width) dashed var(--color-fg);outline-offset:var(--outline-offset);background:0 0;border:0;place-items:center;padding:0;transition:outline-offset .15s;display:grid;position:absolute;inset:0;container-type:size}.listen__cta{--bubble-x:50%;--bubble-y:calc(100% + 4cqw);--bubble-width:140cqw;--bubble-font-size:15.5cqw;transition:opacity .6s}:root[data-layout=compact] .listen__cta{--bubble-x:62%}.listen:not([data-state=idle]) .listen__cta{opacity:0}.listen__sign{aspect-ratio:1;background:#0000008c;border-radius:50%;place-items:center;width:min(55cqw,55cqh);transition:opacity .6s,scale .15s;display:grid;position:relative}.listen__icon{grid-area:1/1;width:40%;height:40%}.listen__icon--play{translate:8%}.listen[data-state=playing] .listen__icon--play,.listen:not([data-state=playing]) .listen__icon--pause{display:none}.listen[data-state=playing] .listen__sign{opacity:0}@media (hover:hover){.listen[data-state=paused] .listen__sign{opacity:0}}.listen:has(.listen__screen:focus-visible){--outline-offset:8px}.listen:has(.listen__screen:focus-visible) .listen__sign{opacity:1;transition-duration:0s,.15s;scale:1.15}@media (hover:hover){.listen:has(.listen__screen:hover){--outline-offset:8px}.listen:has(.listen__screen:hover) .listen__sign{opacity:1;transition-duration:0s,.15s;scale:1.15}}