.viewer{gap:14px;display:grid}.viewer__stage{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);place-items:center;min-height:260px;display:grid;position:relative;overflow:hidden}.viewer__item{width:100%;color:inherit;font:inherit;background:0 0;border:0;grid-area:1/1;padding:0;display:none}.viewer__item.is-active{place-items:center;display:grid}.viewer__item img,.viewer__video{object-fit:contain;width:100%;height:auto;max-height:78vh;display:block}.viewer__item:is(button){cursor:zoom-in}.viewer__placeholder{color:var(--muted);font-size:.9rem}.viewer__arrow{border:1px solid var(--line);background:var(--bg);width:42px;height:42px;color:var(--fg);cursor:pointer;opacity:.82;transition:opacity .25s var(--ease), transform .25s var(--ease);border-radius:50%;place-items:center;padding:0 0 4px;font-size:1.5rem;line-height:1;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.viewer__arrow:hover{opacity:1;transform:translateY(-50%)scale(1.07)}.viewer__arrow--prev{left:14px}.viewer__arrow--next{right:14px}.viewer__thumbs{flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;display:flex}.viewer__thumbs li{aspect-ratio:1;flex:44px;max-width:72px;display:flex}.viewer__thumb{border:1px solid var(--line);background:var(--surface);opacity:.6;cursor:pointer;width:100%;height:100%;transition:opacity .25s var(--ease), border-color .25s var(--ease);border-radius:6px;padding:0;display:block;position:relative;overflow:hidden}.viewer__thumb:hover{opacity:.85}.viewer__thumb.is-active{border-color:var(--accent);opacity:1}.viewer__thumb img{object-fit:cover;width:100%;height:100%}.viewer__play{color:#fff;place-items:center;display:grid;position:absolute;inset:0}.viewer__play:before{content:"";filter:drop-shadow(0 0 3px #000000b3);border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:10px solid;width:0;height:0}