.media-dialog{position:fixed;inset:0;margin:auto;padding:0;width:min(1200px,96vw);height:94dvh;max-width:96vw;max-height:94dvh;border:0;border-radius:16px;background:#fff;color:#111}
.media-dialog::backdrop{background:rgba(0,0,0,.85)}
.media-dialog[open]{display:flex;flex-direction:column}
.media-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid #ddd}
.media-toolbar h2{font-size:1rem;margin:0;max-width:48ch}
.media-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.media-toolbar button{min-height:44px;min-width:44px;border:1px solid #bbb;border-radius:8px;background:#fff;color:#111;padding:8px 12px;cursor:pointer;font:inherit}
.media-toolbar button:focus-visible,.media-viewport:focus-visible{outline:3px solid #111;outline-offset:-3px}
.media-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;touch-action:pan-x pan-y}
.media-viewport img{display:block;margin:auto;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.media-viewport.is-zoomed{cursor:grab}
.media-viewport.is-dragging{cursor:grabbing}
.media-help{margin:0;padding:8px 12px;font-size:.8rem;border-top:1px solid #ddd}
.gallery-zoom-hint{font-size:.8rem;color:#555;margin:8px 0 0}
.guide-inner iframe,.guide-inner video{display:block;max-width:100%;height:auto;aspect-ratio:16/9}
@media(max-width:600px){.media-dialog{height:96dvh;max-height:96dvh}.media-toolbar h2{width:100%}.media-controls{width:100%;justify-content:space-between}.media-toolbar{padding:8px}}