#photo-carousel { width:96vw; max-width:1600px; height:94dvh; max-height:96dvh; margin:auto; padding:22px; border:1px solid #586073; border-radius:24px; color:#f8fafc; background:radial-gradient(ellipse at 50% 40%,#35435b 0%,#151b28 52%,#080d16 100%); box-shadow:0 30px 100px #0009; overflow:auto; }
#photo-carousel::backdrop { background:#020617d9; backdrop-filter:blur(12px); }
#photo-carousel [hidden] { display:none !important; }
#photo-carousel button, #photo-carousel a { color:#fff; background:#ffffff13; border:1px solid #ffffff30; border-radius:12px; padding:10px 14px; cursor:pointer; text-decoration:none; min-height:44px; }
#photo-carousel button:hover, #photo-carousel a:hover { background:#ffffff29; }
#photo-carousel :focus-visible { outline:3px solid #67e8f9; outline-offset:3px; }
#photo-carousel button:disabled { opacity:.35; cursor:default; }
.photo-carousel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.photo-carousel-header > div { min-width:0; flex:1; }
#photo-carousel h2 { color:#fff; font-size:1.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:4px 0; }
.photo-carousel-eyebrow { color:#a5b4fc; font-size:.7rem; letter-spacing:.2em; }
#photo-carousel-counter { color:#cbd5e1; margin:0; font-size:.85rem; }
.photo-carousel-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 0; }
#photo-carousel-tag { background:#0f766e !important; border-color:#5eead4 !important; }
.photo-carousel-stage { height:52vh; min-height:180px; position:relative; display:flex; justify-content:center; align-items:center; perspective:1000px; touch-action:pan-y; overflow:hidden; }
#photo-carousel .photo-carousel-main { z-index:2; border:0; padding:0; background:transparent; width:64%; height:100%; display:flex; align-items:center; justify-content:center; }
.photo-carousel-main img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 20px 45px #000a; }
#photo-carousel .photo-carousel-side { position:absolute; top:15%; width:26%; height:70%; border:0; padding:0; background:none; opacity:.65; }
.photo-carousel-side img { width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 14px 35px #0009; }
.photo-carousel-left { left:1%; transform:rotateY(40deg) scale(.87); }
.photo-carousel-right { right:1%; transform:rotateY(-40deg) scale(.87); }
.photo-carousel-navigation { display:flex; justify-content:center; align-items:center; gap:12px; margin:8px 0; }
.photo-carousel-navigation span { font-size:.75rem; color:#cbd5e1; text-align:center; }
#photo-carousel-status { text-align:center; font-size:.85rem; margin:8px; min-height:1.5em; }
.photo-carousel-strip { display:flex; gap:8px; overflow-x:auto; padding:8px; scroll-snap-type:x mandatory; }
#photo-carousel .photo-carousel-strip button { flex:0 0 70px; height:64px; padding:3px; opacity:.6; scroll-snap-align:center; }
#photo-carousel .photo-carousel-strip button[aria-current="true"] { opacity:1; border:2px solid #5eead4; }
.photo-carousel-strip img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
#photo-carousel.is-enlarged .photo-carousel-side, #photo-carousel.is-enlarged .photo-carousel-strip { display:none; }
#photo-carousel.is-enlarged .photo-carousel-main { width:100%; }
#photo-carousel.is-enlarged .photo-carousel-stage { height:65vh; }
#photo-carousel.is-enlarged .photo-carousel-main img { max-height:65vh; }
#photo-carousel-shell:fullscreen { width:100vw; height:100dvh; padding:20px; overflow:auto; background:radial-gradient(ellipse at 50% 40%,#35435b,#080d16); color:#fff; }
@media (max-width:600px) { #photo-carousel { padding:12px; width:100vw; height:100dvh; max-height:100dvh; border-radius:0; } .photo-carousel-actions { font-size:.8rem; } .photo-carousel-stage { height:42vh; } .photo-carousel-main img { max-height:42vh; } }
@media (prefers-reduced-motion:reduce) { #photo-carousel * { transition:none !important; scroll-behavior:auto !important; } }