@layer components{.video{margin:var(--space-l)0;& .video__stage{position:relative;overflow:hidden;border-radius:4px;background:var(--color-surface-mixed)}& .video__el{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}& .video__poster{position:absolute;inset:0;transition:opacity .35s ease}& .video__controls{position:absolute;right:var(--space-xs);bottom:var(--space-xs);display:flex;gap:.5rem}& .video__btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface);color:var(--color-text);cursor:pointer;opacity:.85;transition:opacity .2s ease,transform .2s ease;&:hover{opacity:1;transform:scale(1.06)}&:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;opacity:1}}& .video__icon{grid-area:1/1}& .video__caption{margin-top:var(--space-xs);color:var(--color-text-muted);font-size:.875rem;line-height:1.5;text-align:center}& .video__icon--pause, & .video__icon--sound{display:none}&[data-state=playing]{& .video__poster{opacity:0;pointer-events:none}& .video__icon--play{display:none}& .video__icon--pause{display:block}}&[data-sound=on]{& .video__icon--muted{display:none}& .video__icon--sound{display:block}}&[data-orientation=portrait] .video__stage{aspect-ratio:9/16;max-width:360px;margin-inline:auto}&[data-orientation=landscape] .video__stage{aspect-ratio:16/9}}}.video__poster>.progressive-image-container{width:100%;height:100%;aspect-ratio:auto}