html.media-viewer-open { overflow: hidden; }
.media-expandable { position: relative; }
.media-open { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; border-radius: var(--radius); padding: 0; background: transparent; color: #fff; cursor: zoom-in; }
.media-open:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.media-open-symbol { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .3); border-radius: 50%; background: rgb(17 16 14 / .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate(-50%, -50%); transition: background .2s, opacity .2s; }
.media-open-symbol svg { width: 20px; height: 20px; fill: currentColor; }
.media-open:hover .media-open-symbol, .media-open:focus-visible .media-open-symbol { background: rgb(255 255 255 / .2); }
.media-open--photo .media-open-symbol { top: auto; left: auto; right: 10px; bottom: 10px; width: 32px; height: 32px; transform: none; opacity: 0; }
.media-open--photo .media-open-symbol svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.media-open--photo:hover .media-open-symbol, .media-open--photo:focus-visible .media-open-symbol { opacity: 1; }
.media-origin-placeholder { display: block; max-width: 100%; background: var(--background); }
.media-origin-open > .media-open { visibility: hidden; }
.media-badge, .media-viewer-stage[data-badge]::after { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; background: rgb(25 24 22 / .4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #f5f5f7; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .025em; pointer-events: none; }
.media-viewer-stage[data-badge]::after { content: attr(data-badge); }
.media-origin-open > .media-badge { visibility: hidden; }
.media-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--text); overscroll-behavior: contain; }
.media-viewer[open] { display: grid; place-items: center; }
.media-viewer::backdrop { background: rgb(7 6 4 / .65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: media-backdrop-in .42s ease both; }
.media-viewer.is-closing::backdrop { animation: media-backdrop-out .28s ease both; }
.media-viewer-stage { position: relative; flex: none; border-radius: 18px; background: var(--background); box-shadow: 0 24px 100px rgb(0 0 0 / .34); transform-origin: center; overflow: hidden; }
.media-viewer .viewer-media { display: block; position: static; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: inherit; transform: none; }
.media-viewer .viewer-media[hidden] { display: none; }
.media-viewer-loading { position: absolute; top: 50%; left: 50%; z-index: 2; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: none; }
.media-viewer-loading[hidden] { display: none; }
.media-viewer-loading-ring { display: block; width: 100%; height: 100%; border: 2.5px solid rgb(255 255 255 / .2); border-top-color: #fff; border-radius: 50%; animation: media-loading-spin .85s linear infinite; filter: drop-shadow(0 1px 4px rgb(0 0 0 / .4)); }
.media-viewer-stage.is-rotated > img { position: absolute; top: 50%; left: 50%; width: 56.25%; height: 177.777778%; transform: translate(-50%, -50%) rotate(-90deg); border-radius: 0; }
.media-viewer-close { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(30 29 27 / .5); color: #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); cursor: pointer; }
.media-viewer-close:hover { background: rgb(255 255 255 / .2); }
.media-viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.media-viewer-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.media-viewer-feedback { position: absolute; bottom: max(20px, env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: min(480px, calc(100% - 32px)); padding: 16px 20px; border: 1px solid rgb(255 255 255 / .18); border-radius: 22px; background: rgb(17 16 14 / .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(-50%); text-align: center; }
.media-viewer-feedback[hidden], .media-viewer-feedback [hidden] { display: none; }
.media-viewer-status { width: 100%; font-size: 13px; line-height: 1.5; }
.media-viewer-retry { border: 0; border-radius: 999px; padding: 11px 18px; background: var(--text); color: var(--background); font: inherit; font-size: 13px; cursor: pointer; }
.media-viewer-direct { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.media-viewer-retry:focus-visible, .media-viewer-direct:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes media-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes media-loading-spin { to { transform: rotate(360deg); } }
@keyframes media-loading-pulse { 50% { opacity: .4; } }
@keyframes media-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 600px) {
  .media-open { border-radius: 20px; }
  .gallery-photo .media-open { border-radius: 12px; }
  .media-open-symbol { width: 44px; height: 44px; }
  .media-viewer-stage { border-radius: 14px; }
  .media-viewer-loading { width: 36px; height: 36px; }
}
@media (hover: none) { .media-open--photo .media-open-symbol { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .media-viewer::backdrop, .media-viewer.is-closing::backdrop { animation: none; }
  .media-open-symbol { transition: none; }
  .media-viewer-loading-ring { animation: media-loading-pulse 1.5s ease-in-out infinite; }
}