.scene-media-button {
  position: fixed; z-index: 1100; top: 50%; right: max(18px, calc((100vw - 750px)/2 - 84px));
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid #c6aa727d; border-radius: 50%; background: #1c3140f2; box-shadow: 0 8px 26px #030a13aa;
  color: #f0d9a5; cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(.88); transition: opacity .2s, transform .2s, background .2s;
}
body.reading-mode .scene-media-button.visible {opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1)}
.scene-media-button:hover, .scene-media-button:focus-visible {background: #294659; outline-color: #dfbd7f}
.scene-media-button svg {width: 20px; height: 20px; flex: none}
.scene-media-button-count {position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 2px 4px; border-radius: 50%; background: #d2b276; color: #152637; text-align: center; font: 700 10px/14px 'DM Sans',sans-serif}
.scene-media-button-count[hidden] {display: none}

.scene-media-overlay[hidden] {display: none}
.scene-media-overlay {
  position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(70px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(70px, env(safe-area-inset-left));
  background: #050c15e8; backdrop-filter: blur(12px);
}
.scene-media-panel {display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; min-width: 0; color: #ead9b8; pointer-events: none}
.scene-media-panel header, .scene-media-panel footer {display: contents}
.scene-media-heading, .scene-media-meta {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0}
.scene-media-panel button {
  position: fixed; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid #c6aa7280; border-radius: 50%; background: #1b3040d9; box-shadow: 0 8px 28px #0008;
  color: #f2d9a5; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px);
}
.scene-media-panel button:hover, .scene-media-panel button:focus-visible {background: #355162; outline: 2px solid #e8c78d; outline-offset: 2px}
.scene-media-panel button svg {display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round}
.scene-media-close {top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right))}
.scene-media-prev, .scene-media-next {top: 50%; transform: translateY(-50%)}
.scene-media-prev {left: max(18px, env(safe-area-inset-left))}
.scene-media-next {right: max(18px, env(safe-area-inset-right))}
.scene-media-panel footer button:disabled, .scene-media-panel footer.single button {visibility: hidden}
.scene-media-stage {display: grid; place-items: center; width: min(100%, 1100px); height: 100%; min-height: 0; overflow: auto; pointer-events: auto}
.scene-media-stage img, .scene-media-stage video {display: block; max-width: 100%; max-height: calc(100dvh - 44px); object-fit: contain; filter: drop-shadow(0 18px 44px #0009)}
.scene-media-stage img {cursor: zoom-in}
.scene-media-stage img.enlarged {max-width: none; max-height: none; cursor: zoom-out}
.scene-media-stage.enlarged {display: block}

.scene-media-overlay.is-opening {animation: scene-media-backdrop-in .24s ease-out both}
.scene-media-overlay.is-opening .scene-media-stage {animation: scene-media-panel-in .24s cubic-bezier(.2,.8,.2,1) both}
.scene-media-overlay.is-closing {pointer-events: none; animation: scene-media-backdrop-out .2s ease-in both}
.scene-media-overlay.is-closing .scene-media-stage {animation: scene-media-panel-out .2s ease-in both}
@keyframes scene-media-backdrop-in {from {opacity: 0} to {opacity: 1}}
@keyframes scene-media-backdrop-out {from {opacity: 1} to {opacity: 0}}
@keyframes scene-media-panel-in {from {opacity: 0; transform: translateY(14px) scale(.97)} to {opacity: 1; transform: translateY(0) scale(1)}}
@keyframes scene-media-panel-out {from {opacity: 1; transform: translateY(0) scale(1)} to {opacity: 0; transform: translateY(10px) scale(.98)}}
@media (max-width: 760px) {
  .scene-media-button {top: auto; right: max(17px, env(safe-area-inset-right)); bottom: calc(91px + env(safe-area-inset-bottom)); transform: scale(.88)}
  body.reading-mode .scene-media-button.visible {transform: scale(1)}
  .scene-media-overlay {padding: max(62px, env(safe-area-inset-top)) max(54px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(54px, env(safe-area-inset-left))}
  .scene-media-panel button {width: 40px; height: 40px}
  .scene-media-close {top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right))}
  .scene-media-prev {left: max(7px, env(safe-area-inset-left))}
  .scene-media-next {right: max(7px, env(safe-area-inset-right))}
  .scene-media-stage img, .scene-media-stage video {max-height: calc(100dvh - 86px)}
}
@media (prefers-reduced-motion: reduce) {
  .scene-media-button {transition: none}
  .scene-media-overlay {backdrop-filter: none}
  .scene-media-overlay.is-opening, .scene-media-overlay.is-opening .scene-media-stage,
  .scene-media-overlay.is-closing, .scene-media-overlay.is-closing .scene-media-stage {animation: none}
}