/* Scoped to the existing full-screen layer. No home or carousel geometry changes. */
#viewerLayer .screenWrap{touch-action:none}
/* The programmatically focused dialog surface is not an interactive control.
   Keep focus indicators on the close button and keyboard playback controls. */
#viewerLayer .screenWrap:focus{outline:none}
#viewerLayer .screenWrap:has(video[controls]){touch-action:auto}
#viewerLayer .closeViewer{width:44px;height:44px;box-sizing:border-box;display:grid;place-items:center;padding:0;margin:0;appearance:none;-webkit-appearance:none;font-size:0;line-height:1;opacity:.8;transition:opacity .45s ease}
#viewerLayer.viewerQuiet .closeViewer{opacity:0;pointer-events:none}
#viewerLayer .closeViewer:focus-visible,#viewerLayer.viewerQuiet .closeViewer:focus-visible{opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:3px}
#viewerLayer .viewerSrOnly,#viewerLayer .viewerAccessibleControls{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#viewerLayer .viewerAccessibleControls:focus-within{clip-path:none;width:auto;height:auto;white-space:normal;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));margin:0;display:flex;justify-content:center;gap:8px;z-index:5}
#viewerLayer .viewerAccessibleControls button{min-height:44px;border:1px solid #ffffff70;border-radius:3px;background:#111e;color:#fff;padding:8px 12px;font:inherit;font-size:13px}
#viewerLayer .viewerAccessibleControls button:disabled{opacity:.4}
#viewerLayer .viewerAccessibleControls button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){#viewerLayer .closeViewer{transition:none}}

/* Geometric cross: independent of Safari font metrics and native button padding. */
#viewerLayer .closeViewer::before,#viewerLayer .closeViewer::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;background:currentColor;border-radius:1px;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
#viewerLayer .closeViewer::after{transform:translate(-50%,-50%) rotate(-45deg)}
#viewerLayer .viewerLivePanel,#viewerLayer .viewerNeighbour,#viewerLayer .viewerOutgoing{position:absolute;inset:0;background:#000;overflow:hidden;will-change:transform}
#viewerLayer .viewerLivePanel{z-index:1}
#viewerLayer .viewerNeighbour{z-index:0;pointer-events:none}
#viewerLayer .viewerOutgoing{z-index:2;pointer-events:none}
#viewerLayer .viewerNeighbour[hidden],#viewerLayer .viewerOutgoing[hidden]{display:none}
#viewerLayer .viewerNeighbour img,#viewerLayer .viewerOutgoing img,#viewerLayer .viewerOutgoing canvas{display:block;width:100%;height:100%;object-fit:contain}
#viewerLayer .viewerNeighbour img[hidden],#viewerLayer .viewerOutgoing img[hidden],#viewerLayer .viewerOutgoing canvas[hidden]{display:none}
#viewerLayer .viewerNeighbour span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12%;font-size:clamp(15px,3vw,22px);color:#e8e5df}
#viewerLayer .viewerNeighbour span[hidden]{display:none}
#viewerLayer .viewerAwaitFrame{background:transparent}
#viewerLayer .viewerAwaitFrame #player{opacity:0}
#viewerLayer .viewerAwaitFrame:has(video[controls]) #player{opacity:1}
#viewerLayer .pauseMark{z-index:3}