@layer components{.lb{z-index:200;overscroll-behavior:contain;justify-content:center;align-items:center;padding:clamp(10px,2vw,26px);display:flex;position:fixed;inset:0}.lb__scrim{z-index:0;background:color-mix(in oklch, var(--color-tide-900) 56%, transparent);-webkit-backdrop-filter:var(--glass-blur-scrim);backdrop-filter:var(--glass-blur-scrim);cursor:pointer;animation:lb-scrim-in .28s var(--ease-water);position:absolute;inset:0}@keyframes lb-scrim-in{0%{opacity:0}to{opacity:1}}.lb__window{z-index:1;border-radius:var(--radius-2xl);background:color-mix(in oklch, var(--color-tide-900) 90%, #000);width:100%;max-width:min(77.5rem,96vw);height:90dvh;max-height:90dvh;box-shadow:0 50px 130px -34px #000000c7, inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 16%, transparent);-webkit-backdrop-filter:blur(10px)saturate(120%);backdrop-filter:blur(10px)saturate(120%);animation:lb-pop .3s var(--ease-water);transition:transform .32s var(--ease-water), opacity .32s var(--ease-water);flex-direction:column;gap:clamp(8px,1.4vh,16px);padding:clamp(12px,1.8vh,22px) clamp(12px,1.6vw,24px);display:flex;position:relative;overflow:hidden}@keyframes lb-pop{0%{opacity:0;transform:translateY(10px)scale(.985)}to{opacity:1;transform:none}}.lb__top{z-index:3;flex:none;justify-content:space-between;align-items:center;gap:12px;min-height:46px;display:flex;position:relative}.lb__counter{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-feature-settings:normal;letter-spacing:.02em;color:var(--on-deep-soft);font-size:.9rem}.lb__viewport{z-index:1;pointer-events:none;flex:auto;min-height:0;position:relative}.lb__frame{pointer-events:none;transition:transform .32s var(--ease-water), opacity .32s var(--ease-water);justify-content:center;align-items:center;gap:clamp(8px,1.8vw,22px);display:flex;position:absolute;inset:0}.lb__img{border-radius:var(--radius-lg);pointer-events:auto;width:auto;min-width:0;max-width:100%;height:auto;max-height:100%;box-shadow:0 44px 110px -30px #000000d1, inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 22%, transparent);flex:0 auto;display:block}.lb__close,.lb__nav,.lb__fs{cursor:pointer;color:#fff;background:color-mix(in oklch, var(--color-tide-800) 58%, transparent);width:46px;height:46px;-webkit-backdrop-filter:var(--glass-blur-tool);backdrop-filter:var(--glass-blur-tool);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 28%, transparent);transition:background .2s var(--ease-water), box-shadow .2s var(--ease-water), transform .2s var(--ease-water);border:0;border-radius:50%;place-items:center;display:grid}.lb__top-tools{align-items:center;gap:10px;display:flex}.lb__close,.lb__fs{z-index:3;flex:none;position:relative}.lb__nav{z-index:3;pointer-events:auto;background:color-mix(in oklch, var(--color-tide-900) 46%, transparent);color:#ffffffdb;opacity:.94;width:clamp(38px,4.2vw,48px);height:clamp(38px,4.2vw,48px);transition:opacity .22s var(--ease-water), color .22s var(--ease-water), background .22s var(--ease-water), box-shadow .22s var(--ease-water), transform .2s var(--ease-water);flex:none;align-self:center;position:relative;box-shadow:inset 0 0 0 1px #fff3}.lb__close:hover,.lb__fs:hover{background:color-mix(in oklch, var(--color-surf-500) 26%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 62%, transparent)}:is(.lb__nav:hover,.lb__nav:focus-visible){opacity:1;color:#fff;background:color-mix(in oklch, var(--color-tide-800) 52%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 40%, transparent)}.lb__close:active,.lb__nav:active,.lb__fs:active{transform:scale(.94)}:is(.lb__close:focus-visible,.lb__nav:focus-visible,.lb__fs:focus-visible,.lb__thumb:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}.lb__window:fullscreen{background:color-mix(in oklch, var(--color-tide-900) 96%, #000);border-radius:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:clamp(14px,2.2vh,30px) clamp(16px,2.4vw,40px)}.lb__foot{z-index:3;pointer-events:none;flex-direction:column;flex:none;align-items:center;gap:clamp(8px,1.5vh,14px);display:flex;position:relative}.lb__caption{text-align:center;max-width:80ch;color:var(--on-deep);text-shadow:0 1px 12px #0000008c;padding:0 12px;font-size:.95rem;line-height:1.5}.lb__thumbs{scrollbar-width:none;pointer-events:auto;gap:8px;max-width:100%;padding:4px;display:flex;overflow-x:auto}.lb__thumbs::-webkit-scrollbar{display:none}.lb__thumbs[data-edge=both]{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%)}.lb__thumbs[data-edge=left]{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 6% 100%);mask-image:linear-gradient(90deg,#0000 0,#000 6% 100%)}.lb__thumbs[data-edge=right]{-webkit-mask-image:linear-gradient(90deg,#000 0 94%,#0000 100%);mask-image:linear-gradient(90deg,#000 0 94%,#0000 100%)}.lb__thumbs[data-edge=none]{-webkit-mask-image:none;mask-image:none}.lb__thumb{border-radius:var(--radius-md);cursor:pointer;opacity:.55;width:clamp(66px,9vw,94px);height:clamp(48px,6.4vw,66px);transition:opacity .22s var(--ease-water), box-shadow .22s var(--ease-water);background:0 0;border:0;flex:none;padding:0;overflow:hidden}.lb__thumb img{object-fit:cover;width:100%;height:100%;display:block}.lb__thumb:hover{opacity:.9}.lb__thumb.is-active{opacity:1;box-shadow:0 0 0 2px var(--color-surf-400)}.lb__grab{display:none}.lb__swipe-hint{z-index:4;border-radius:var(--radius-pill);font-family:var(--font-sans);color:#fff;background:color-mix(in oklch, var(--color-tide-900) 62%, transparent);-webkit-backdrop-filter:var(--glass-blur-tool);backdrop-filter:var(--glass-blur-tool);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--color-surf-300) 30%, transparent);pointer-events:none;animation:lb-hint 2.6s var(--ease-water) forwards;align-items:center;gap:8px;padding:8px 14px;font-size:.82rem;display:none;position:absolute;bottom:clamp(96px,16vh,150px);left:50%;transform:translate(-50%)}.lb__swipe-hint svg{color:var(--color-surf-300)}@keyframes lb-hint{0%{opacity:0;transform:translate(-50%)translateY(6px)}12%{opacity:1;transform:translate(-50%)translateY(0)}78%{opacity:1}to{opacity:0;visibility:hidden}}@media (max-width:768px){.lb{padding:clamp(8px,2vh,16px)}.lb__window{border-radius:var(--radius-2xl);width:100%;max-width:100%;height:90dvh;max-height:90dvh;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:color-mix(in oklch, var(--color-tide-900) 94%, #000)}.lb__grab{background:color-mix(in oklch, var(--color-surf-300) 50%, transparent);border-radius:4px;flex:none;width:44px;height:4px;margin:0 auto 4px;display:block}.lb__close{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.lb__frame{gap:0}.lb__nav{clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.lb__img{max-width:100%}.lb__swipe-hint{display:flex}}@media (prefers-reduced-motion:reduce){.lb__frame{transition:none}.lb__scrim{animation:none}}}