#lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
#lightbox.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; }
#lightbox .lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); transition: background-color .5s ease-in-out; }
#lightbox.is-open .lb-backdrop { background: rgba(0,0,0,.47); }
#lightbox .lb-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--gnoise); opacity: 0; pointer-events: none; transition: opacity .5s ease-in-out; }
#lightbox.is-open .lb-backdrop::after { opacity: 1; }
#lightbox .lb-stage { position: relative; max-width: calc(90 * var(--cvw)); max-height: 90vh; display: flex; align-items: center; justify-content: center; }
#lightbox .lb-stage:focus { outline: none; }
#lightbox .lb-img { max-width: 100%; max-height: 90vh; object-fit: contain; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); opacity: 0; transform: scale(.95); }
#lightbox .lb-vid { width: auto; height: auto; max-width: 100%; max-height: 90vh; object-fit: contain; background: transparent; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); transform: translateZ(0); }
#lightbox .lb-img.is-sized, #lightbox .lb-vid.is-sized {
  aspect-ratio: var(--ar);
  width: min(calc(90 * var(--cvw)), calc(90vh * var(--ar)), var(--cap));
  width: min(calc(90 * var(--cvw)), calc(90svh * var(--ar)), var(--cap));
  height: auto;
  max-width: none;
  max-height: none;
}
#lightbox .lb-ytbox { --fr: 1.77778; position: relative; display: block; overflow: hidden; aspect-ratio: var(--fr); height: auto; background: #000; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: min(calc(84 * var(--cvw)), calc(100vw - 14rem), calc(min(84vh, 100vh - 14rem) * var(--fr))); width: min(calc(84 * var(--cvw)), calc(100vw - 14rem), calc(min(84svh, 100svh - 14rem) * var(--fr))); }
#lightbox .lb-yt { position: absolute; top: 0; left: 50%; display: block; height: 100%; width: calc(100% * 1.77778 / var(--fr)); max-width: none; border: 0; background: #000; transform: translateX(-50%); }
#lightbox.lb-f32 .lb-ytbox, #lightbox.lb-f32 .lb-framebox { --fr: 1.5; }
#lightbox.lb-f43 .lb-ytbox, #lightbox.lb-f43 .lb-framebox { --fr: 1.33333; }
#lightbox.lb-f11 .lb-ytbox, #lightbox.lb-f11 .lb-framebox { --fr: 1; }
#lightbox.lb-f45 .lb-ytbox, #lightbox.lb-f45 .lb-framebox { --fr: .8; }
#lightbox.lb-f916 .lb-ytbox, #lightbox.lb-f916 .lb-framebox { --fr: .5625; }
@media (max-width: 767.98px) { #lightbox .lb-ytbox { width: min(100vw, calc(min(84vh, 100vh - 9rem) * var(--fr))); width: min(100vw, calc(min(84svh, 100svh - 9rem) * var(--fr))); } }
#lightbox .lb-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#lightbox .lb-framebox { --fr: 1.77778; position: relative; display: block; overflow: hidden; aspect-ratio: var(--fr); height: auto; background: #111; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: min(calc(84 * var(--cvw)), calc(100vw - 14rem), calc(min(84vh, 100vh - 14rem) * var(--fr))); width: min(calc(84 * var(--cvw)), calc(100vw - 14rem), calc(min(84svh, 100svh - 14rem) * var(--fr))); }
@media (max-width: 767.98px) {
  #lightbox .lb-framebox { aspect-ratio: auto; width: 100vw; height: min(78vh, 100vh - 9rem); height: min(78svh, 100svh - 9rem); }
  #lightbox.lb-f32 .lb-framebox, #lightbox.lb-f43 .lb-framebox, #lightbox.lb-f11 .lb-framebox, #lightbox.lb-f45 .lb-framebox, #lightbox.lb-f916 .lb-framebox { aspect-ratio: var(--fr); height: auto; width: min(100vw, calc(min(78vh, 100vh - 9rem) * var(--fr))); width: min(100vw, calc(min(78svh, 100svh - 9rem) * var(--fr))); }
}
#lightbox .lb-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #111; }
#lightbox.lb-framemode:not(.lb-framelive) .lb-fmt, #lightbox.lb-framemode .lb-vidctl { display: none; }
#lightbox .lb-gate { position: absolute; inset: 0; display: flex; overflow-y: auto; color: #fff; background: var(--anthrazit-dunkel); }
#lightbox .lb-gate-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
#lightbox .lb-gate-body { position: relative; display: grid; justify-items: center; margin: auto; gap: clamp(12px, 2.2vh, 20px); max-width: 40rem; padding: 24px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
#lightbox .lb-gate-title { margin: 0; font-size: clamp(22px, min(2.6vw, 4.6vh), 40px); font-weight: 700; line-height: 1.15; }
#lightbox .lb-gate-play { display: grid; place-items: center; padding: 10px; border: 0; background: none; color: #fff; line-height: 0; cursor: pointer; }
#lightbox .lb-gate-icon { width: clamp(84px, 17vh, 152px); height: clamp(84px, 17vh, 152px); overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s ease; }
#lightbox .lb-gate-play:focus-visible .km-t3d-cube { stroke-width: 1.7; }
@media (hover: hover) and (pointer: fine) {
  #lightbox .lb-gate-play:hover .km-t3d-cube { stroke-width: 1.7; }
  #lightbox .lb-gate-play:hover .lb-gate-icon { transform: scale(1.06); }
}
#lightbox .lb-gate-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0,0,0,0.6); }
#lightbox .lb-gate-note { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); }
#lightbox .lb-gate-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#lightbox .lb-gate a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html.reduce-motion #lightbox .lb-gate-icon { transition: none; }
html.reduce-motion #lightbox .lb-gate-play:hover .lb-gate-icon { transform: none; }
#lightbox.lb-ytmode .lb-vidctl { display: none; }
#lightbox .lb-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.lb-btn { pointer-events: auto; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,0.28); background: var(--gnoise), rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.lb-btn[hidden] { display: none; }
#lightbox:not(.is-open) .lb-btn { background: rgba(255,255,255,0); border-color: rgba(255,255,255,0); color: rgba(255,255,255,0); }
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: #fff; color: #000; transform: scale(1.05); } }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,0,0,0.6); }
.lb-cluster { position: absolute; top: 1rem; right: calc(var(--edge) + 1rem); display: flex; gap: .5rem; align-items: center; }
.lb-count { display: inline-flex; align-items: center; height: 3rem; padding: 0 .85rem; border: 1px solid rgba(255,255,255,0.28); background: var(--gnoise), rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .9rem; font-weight: 700; white-space: nowrap; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
html.reduce-motion .lb-count { transition: background-color .15s linear, border-color .15s linear, color .15s linear; }
#lightbox:not(.lb-multi) .lb-count { display: none; }
#lightbox:not(.is-open) .lb-count { background: rgba(255,255,255,0); border-color: rgba(255,255,255,0); color: rgba(255,255,255,0); }
.lb-playpause .lb-pp-play { display: none; }
#lightbox.lb-vid-paused .lb-pp-pause { display: none; }
#lightbox.lb-vid-paused .lb-pp-play { display: block; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: none; }
@media (hover: hover) and (pointer: fine) { .lb-arrow:hover { transform: translateY(-50%) scale(1.05); } }
.lb-prev { left: calc(var(--edge) + 1rem); } .lb-next { right: calc(var(--edge) + 1rem); }
#lightbox:not(.lb-multi) .lb-nav { display: none; }
.lb-fmt { position: absolute; top: 1rem; left: calc(var(--edge) + 1rem); display: flex; gap: .5rem; }
.lb-fmt-btn { width: auto; padding: 0 .85rem; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .9rem; font-weight: 700; }
.lb-fmt-btn[aria-pressed="true"] { background: #fff; color: #000; }
.lb-vidctl { position: absolute; right: 6px; bottom: 6px; display: none; gap: .3rem; z-index: 5; }
#lightbox.lb-vidmode .lb-vidctl { display: flex; }
#lightbox .lb-vidctl .lb-btn { width: 1.75rem; height: 1.75rem; }
.lb-vidctl svg { width: 1rem; height: 1rem; }
.lb-mute .lb-m-off { display: none; }
#lightbox.lb-muted .lb-m-on { display: none; }
#lightbox.lb-muted .lb-m-off { display: block; }
#lightbox.lb-f32 .lb-img, #lightbox.lb-f32 .lb-vid {
  aspect-ratio: 3 / 2; object-fit: cover; height: auto; max-width: none; max-height: none;
  width: min(calc(90 * var(--cvw)), calc(90vh * 3 / 2), var(--cap, 99999px));
  width: min(calc(90 * var(--cvw)), calc(90svh * 3 / 2), var(--cap, 99999px));
}
#lightbox.lb-f43 .lb-img, #lightbox.lb-f43 .lb-vid {
  aspect-ratio: 4 / 3; object-fit: cover; height: auto; max-width: none; max-height: none;
  width: min(calc(90 * var(--cvw)), calc(90vh * 4 / 3), var(--cap, 99999px));
  width: min(calc(90 * var(--cvw)), calc(90svh * 4 / 3), var(--cap, 99999px));
}
#lightbox.lb-f11 .lb-img, #lightbox.lb-f11 .lb-vid {
  aspect-ratio: 1 / 1; object-fit: cover; height: auto; max-width: none; max-height: none;
  width: min(calc(90 * var(--cvw)), 90vh, var(--cap, 99999px));
  width: min(calc(90 * var(--cvw)), 90svh, var(--cap, 99999px));
}
#lightbox.lb-f45 .lb-img, #lightbox.lb-f45 .lb-vid {
  aspect-ratio: 4 / 5; object-fit: cover; height: auto; max-width: none; max-height: none;
  width: min(calc(90 * var(--cvw)), calc(90vh * 4 / 5), var(--cap, 99999px));
  width: min(calc(90 * var(--cvw)), calc(90svh * 4 / 5), var(--cap, 99999px));
}
#lightbox.lb-f916 .lb-img, #lightbox.lb-f916 .lb-vid {
  aspect-ratio: 9 / 16; object-fit: cover; height: auto; max-width: none; max-height: none;
  width: min(calc(90 * var(--cvw)), calc(90vh * 9 / 16), var(--cap, 99999px));
  width: min(calc(90 * var(--cvw)), calc(90svh * 9 / 16), var(--cap, 99999px));
}
@media (min-width: 768px) {
  .lb-btn { width: 3.5rem; height: 3.5rem; }
  .lb-count { height: 3.5rem; }
  .lb-fmt-btn { width: auto; }
  .lb-cluster { top: 2.5rem; right: calc(var(--edge) + 2.5rem); }
  .lb-fmt { top: 2.5rem; left: calc(var(--edge) + 2.5rem); }
  .lb-mobile { display: none; }
  #lightbox.lb-multi .lb-arrow { display: inline-flex; }
  .lb-prev { left: calc(var(--edge) + 2.5rem); } .lb-next { right: calc(var(--edge) + 2.5rem); }
}
@media (max-width: 767.98px) {
  #lightbox .lb-stage { max-width: 100vw; }
  #lightbox .lb-img.is-sized, #lightbox .lb-vid.is-sized {
    width: min(100vw, calc(90vh * var(--ar)), var(--cap));
    width: min(100vw, calc(90svh * var(--ar)), var(--cap));
  }
  #lightbox.lb-f32 .lb-img, #lightbox.lb-f32 .lb-vid {
    width: min(100vw, calc(90vh * 3 / 2), var(--cap, 99999px));
    width: min(100vw, calc(90svh * 3 / 2), var(--cap, 99999px));
  }
  #lightbox.lb-f43 .lb-img, #lightbox.lb-f43 .lb-vid {
    width: min(100vw, calc(90vh * 4 / 3), var(--cap, 99999px));
    width: min(100vw, calc(90svh * 4 / 3), var(--cap, 99999px));
  }
  #lightbox.lb-f11 .lb-img, #lightbox.lb-f11 .lb-vid {
    width: min(100vw, 90vh, var(--cap, 99999px));
    width: min(100vw, 90svh, var(--cap, 99999px));
  }
  #lightbox.lb-f45 .lb-img, #lightbox.lb-f45 .lb-vid {
    width: min(100vw, calc(90vh * 4 / 5), var(--cap, 99999px));
    width: min(100vw, calc(90svh * 4 / 5), var(--cap, 99999px));
  }
  #lightbox.lb-f916 .lb-img, #lightbox.lb-f916 .lb-vid {
    width: min(100vw, calc(90vh * 9 / 16), var(--cap, 99999px));
    width: min(100vw, calc(90svh * 9 / 16), var(--cap, 99999px));
  }
  .lb-fmt { top: auto; left: .6rem; bottom: .8rem; gap: .35rem; }
  .lb-fmt-btn { height: 2.4rem; padding: 0 .55rem; font-size: .8rem; }
}
.lb-hover { position: absolute; z-index: 20; pointer-events: none; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: flex-start; padding: 1rem; visibility: hidden; transition: visibility 0s linear .55s; }
.lb-hover.on { visibility: visible; transition: visibility 0s linear 0s; }
.lb-hover-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: rgba(0,0,0,0); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0); color: rgba(255,255,255,0); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; transform: scale(.96); transition: background-color .35s ease, border-color .35s ease, transform .4s ease, color .4s ease .12s; }
.lb-hover-badge svg { width: 1rem; height: 1rem; }
.lb-hover.on .lb-hover-badge { background: var(--gnoise), rgba(0,0,0,0.54); border-color: rgba(255,255,255,0.2); color: #fff; transform: scale(1); transition: background-color .3s ease, border-color .3s ease, transform .3s ease, color .28s ease; }
html.reduce-motion #lightbox .lb-backdrop { transition: background-color .15s linear; }
html.reduce-motion .lb-btn { transition: background-color .15s linear, border-color .15s linear, color .15s linear; }
html.reduce-motion .lb-btn:hover { transform: none; }
html.reduce-motion .lb-arrow:hover { transform: translateY(-50%); }
html.reduce-motion .lb-hover-badge { transition: background-color .15s linear, border-color .15s linear, color .15s linear; transform: none; }
html.reduce-motion .lb-hover.on .lb-hover-badge { transform: none; }