.moroc-media-viewer {
  --moroc-media-viewer-backdrop: oklch(0.12 0 0 / 92%);
  --moroc-media-viewer-control: oklch(0.28 0 0 / 88%);
  --moroc-media-viewer-control-hover: oklch(0.36 0 0 / 92%);
  --moroc-media-viewer-thumb-height: 5.75rem;
  --moroc-media-viewer-image-gutter-inline: clamp(2rem, 8vw, 8rem);
  --moroc-media-viewer-image-gutter-block: clamp(2rem, 10vh, 7rem);
  position: fixed;
  inset: 0;
  z-index: var(--moroc-layer-fullscreen, 2147483200);
  color: oklch(0.985 0 0);
  visibility: hidden;
  isolation: isolate;
  font-family: var(--font-sans, "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.moroc-media-viewer[hidden] { display: none !important; }
.moroc-media-viewer[data-phase="opening"],
.moroc-media-viewer[data-phase="ready"],
.moroc-media-viewer[data-phase="closing"] { visibility: visible; }
.moroc-media-viewer[data-phase="closing"] { pointer-events: none; }
.moroc-media-viewer *, .moroc-media-viewer *::before, .moroc-media-viewer *::after { box-sizing: border-box; }
.moroc-media-viewer button, .moroc-media-viewer input { font: inherit; -webkit-tap-highlight-color: transparent; }
.moroc-media-viewer svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.moroc-media-viewer__backdrop { position: absolute; inset: 0; border: 0; background: var(--moroc-media-viewer-backdrop); opacity: 0; }
.moroc-media-viewer__dialog { position: absolute; inset: 0; overflow: hidden; outline: none; }
.moroc-media-viewer__stage { position: absolute; inset: 0 0 var(--moroc-media-viewer-thumb-height); overflow: hidden; touch-action: none; user-select: none; transition: bottom 300ms ease; }
.moroc-media-viewer[data-thumbs="false"] .moroc-media-viewer__stage { bottom: 0; }
.moroc-media-viewer__viewport { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; opacity: 0; transform-origin: center; will-change: transform; }
.moroc-media-viewer__media { display: block; max-width: calc(100% - var(--moroc-media-viewer-image-gutter-inline)); max-height: calc(100% - var(--moroc-media-viewer-image-gutter-block)); object-fit: contain; transform: translate3d(var(--media-viewer-pan-x, 0), var(--media-viewer-pan-y, 0), 0) scale(var(--media-viewer-zoom, 1)); transform-origin: center; transition: opacity 120ms ease; user-select: none; -webkit-user-drag: none; }
.moroc-media-viewer__image { width: auto; height: auto; min-width: 0; min-height: 0; margin: auto; cursor: zoom-in; }
.moroc-media-viewer__image[data-zoomed="true"] { cursor: grab; }
.moroc-media-viewer__image[data-dragging="true"] { cursor: grabbing; }
.moroc-media-viewer__video-frame { position: relative; width: min(100%, 90rem); height: min(100%, 50.625rem); overflow: hidden; background: #000; user-select: none; -webkit-tap-highlight-color: transparent; }
.moroc-media-viewer__video { position: absolute; inset: 0; z-index: 10; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.moroc-media-viewer__video-frame:fullscreen,
.moroc-media-viewer__video-frame.is-pseudo-fullscreen { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; }
.moroc-media-viewer__video-frame.is-paused.is-media-ready .moroc-content-surface-player-resume { display: inline-flex; }
.moroc-media-viewer__morph { position: fixed; z-index: 15; display: block; max-width: none; max-height: none; margin: 0; object-fit: cover; pointer-events: none; user-select: none; }
[data-media-viewer-morph-restored] { transform: var(--moroc-media-viewer-restored-transform, none) !important; transition: none !important; }
.moroc-media-viewer__drag-slide { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; pointer-events: none; will-change: transform; }
.moroc-media-viewer__drag-media { position: absolute; inset: 0; display: block; width: calc(100% - var(--moroc-media-viewer-image-gutter-inline)); height: calc(100% - var(--moroc-media-viewer-image-gutter-block)); max-width: none; max-height: none; margin: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.moroc-media-viewer__drag-slide[data-type="video"] .moroc-media-viewer__drag-media { width: min(100%, 90rem); height: min(100%, 50.625rem); object-fit: contain; background: #000; }
.moroc-media-viewer__status { position: absolute; inset: 0; display: grid; place-items: center; color: oklch(0.72 0 0); font-size: 0.8125rem; pointer-events: none; }

.moroc-media-viewer__toolbar { position: absolute; inset: 0; z-index: 30; opacity: 0; pointer-events: none; }
.moroc-media-viewer__counter { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); left: max(0.75rem, env(safe-area-inset-left)); min-width: 3.25rem; color: oklch(0.9 0 0); font-size: 0.875rem; font-variant-numeric: tabular-nums; line-height: 2.5rem; text-align: center; text-shadow: 0 1px 2px black; }
.moroc-media-viewer__actions { position: absolute; top: max(0.5rem, env(safe-area-inset-top)); right: max(0.5rem, env(safe-area-inset-right)); display: flex; background: var(--moroc-media-viewer-control); pointer-events: auto; }
.moroc-media-viewer__action { display: grid; width: 3rem; height: 3rem; padding: 0; place-items: center; border: 0; border-radius: 0; background: transparent; color: oklch(0.94 0 0); cursor: pointer; outline: none; transition: background-color 200ms ease; }
.moroc-media-viewer__action:hover { background: var(--moroc-media-viewer-control-hover); }
.moroc-media-viewer__action:focus-visible { box-shadow: inset 0 0 0 2px oklch(0.9 0 0); }
.moroc-media-viewer__action[aria-pressed="true"] { background: var(--moroc-media-viewer-control-hover); }

.moroc-media-viewer__nav { position: absolute; top: 50%; z-index: 20; display: grid; width: 3.25rem; height: 3.25rem; padding: 0; place-items: center; border: 0; border-radius: 50%; background: oklch(0.18 0 0 / 66%); color: oklch(0.94 0 0); opacity: 0; cursor: pointer; outline: none; transform: translateY(-50%); transition: background-color 200ms ease, opacity 200ms ease; }
.moroc-media-viewer__nav[hidden] { display: none; }
.moroc-media-viewer__nav:hover { background: oklch(0.12 0 0 / 84%); }
.moroc-media-viewer__nav:focus-visible { box-shadow: 0 0 0 2px oklch(0.9 0 0); }
.moroc-media-viewer__nav:disabled { opacity: 0.18; cursor: default; }
.moroc-media-viewer__nav--previous { left: 2rem; }
.moroc-media-viewer__nav--next { right: 2rem; }

.moroc-media-viewer__thumbnails { position: absolute; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; height: var(--moroc-media-viewer-thumb-height); align-items: center; justify-content: center; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); opacity: 0; scrollbar-width: none; transition: opacity 300ms ease, transform 300ms ease; }
.moroc-media-viewer__thumbnails::-webkit-scrollbar { display: none; }
.moroc-media-viewer__thumbnail { position: relative; width: 3rem; height: 4.5rem; flex: 0 0 auto; overflow: hidden; padding: 0; border: 1px solid transparent; border-radius: 0.375rem; background: oklch(0.12 0 0); opacity: 0.58; cursor: pointer; outline: none; transition: width 250ms ease-out, opacity 200ms ease, border-color 100ms ease; }
.moroc-media-viewer__thumbnail:hover { opacity: 0.88; }
.moroc-media-viewer__thumbnail[aria-selected="true"] { width: 6rem; border-color: oklch(0.985 0 0); opacity: 1; }
.moroc-media-viewer__thumbnail:focus-visible { box-shadow: 0 0 0 2px oklch(0.9 0 0); opacity: 1; }
.moroc-media-viewer__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moroc-media-viewer__thumbnail-play { position: absolute; inset: 0; display: grid; place-items: center; background: oklch(0 0 0 / 25%); color: white; }
.moroc-media-viewer__thumbnail-play::before { width: 0; height: 0; margin-left: 0.125rem; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; border-left: 0.5rem solid currentColor; content: ""; }

.moroc-media-viewer[data-phase="opening"] .moroc-media-viewer__backdrop,
.moroc-media-viewer[data-phase="opening"] :is(.moroc-media-viewer__toolbar, .moroc-media-viewer__nav, .moroc-media-viewer__thumbnails) { animation: moroc-media-viewer-interface-in 350ms ease both; }
.moroc-media-viewer[data-phase="ready"] .moroc-media-viewer__backdrop,
.moroc-media-viewer[data-phase="ready"] :is(.moroc-media-viewer__toolbar, .moroc-media-viewer__nav, .moroc-media-viewer__thumbnails) { opacity: 1; }
.moroc-media-viewer[data-phase="closing"] .moroc-media-viewer__backdrop,
.moroc-media-viewer[data-phase="closing"] :is(.moroc-media-viewer__toolbar, .moroc-media-viewer__nav, .moroc-media-viewer__thumbnails) { animation: moroc-media-viewer-interface-out 350ms ease both; }
.moroc-media-viewer[data-phase="opening"] .moroc-media-viewer__viewport { animation: moroc-media-viewer-media-in 300ms ease both; }
.moroc-media-viewer[data-phase="ready"] .moroc-media-viewer__viewport { opacity: 1; }
.moroc-media-viewer[data-phase="closing"] .moroc-media-viewer__viewport { animation: moroc-media-viewer-media-out 300ms ease both; }
.moroc-media-viewer[data-morph="true"][data-phase="opening"] .moroc-media-viewer__viewport,
.moroc-media-viewer[data-morph="true"][data-phase="closing"] .moroc-media-viewer__viewport { animation: none; opacity: 1; }
.moroc-media-viewer[data-thumbs="false"] .moroc-media-viewer__thumbnails { opacity: 0; transform: translateY(100%); pointer-events: none; }

@keyframes moroc-media-viewer-interface-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes moroc-media-viewer-interface-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes moroc-media-viewer-media-in { from { opacity: 0; transform: scale(0.975) translate3d(0, 16px, 0); } to { opacity: 1; transform: scale(1) translateZ(0); } }
@keyframes moroc-media-viewer-media-out { from { opacity: 1; transform: scale(1) translateZ(0); } to { opacity: 0; transform: scale(0.975) translate3d(0, 16px, 0); } }

@media (max-width: 720px) {
  .moroc-media-viewer { --moroc-media-viewer-image-gutter-inline: 1.5rem; --moroc-media-viewer-image-gutter-block: 1.5rem; }
  .moroc-media-viewer__nav { width: 3.125rem; height: 3.125rem; }
  .moroc-media-viewer__nav--previous { left: 1rem; }
  .moroc-media-viewer__nav--next { right: 1rem; }
  .moroc-media-viewer__thumbnails { justify-content: flex-start; }
  .moroc-media-viewer__thumbnail { width: 2.75rem; height: 4.25rem; }
  .moroc-media-viewer__thumbnail[aria-selected="true"] { width: 5.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .moroc-media-viewer *, .moroc-media-viewer *::before, .moroc-media-viewer *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}