[data-lb-theme]{--lb-backdrop:#fafafbf2;--lb-text:#16181d;--lb-text-muted:#565b64;--lb-chrome-bg:#16181d12;--lb-chrome-bg-hover:#16181d24;--lb-chrome-fg:#16181d;--lb-focus:#3b6ef6;--lb-thumb-bg:#e9eaee;--lb-stage-shadow:0 24px 64px #14161c47;color-scheme:light}[data-lb-theme=dark]{--lb-backdrop:#0c0d10f2;--lb-text:#f3f4f6;--lb-text-muted:#a2a7b0;--lb-chrome-bg:#f3f4f617;--lb-chrome-bg-hover:#f3f4f62e;--lb-chrome-fg:#f3f4f6;--lb-focus:#7ea2ff;--lb-thumb-bg:#23252b;--lb-stage-shadow:0 24px 64px #0009;color-scheme:dark}@media (prefers-color-scheme:dark){[data-lb-theme=auto]{--lb-backdrop:#0c0d10f2;--lb-text:#f3f4f6;--lb-text-muted:#a2a7b0;--lb-chrome-bg:#f3f4f617;--lb-chrome-bg-hover:#f3f4f62e;--lb-chrome-fg:#f3f4f6;--lb-focus:#7ea2ff;--lb-thumb-bg:#23252b;--lb-stage-shadow:0 24px 64px #0009;color-scheme:dark}}.lb-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}@media (width<=600px){.lb-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}}.lb-thumb{background:var(--lb-thumb-bg);cursor:zoom-in;border:0;border-radius:10px;width:100%;padding:0;display:block;position:relative;overflow:hidden}.lb-thumb img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;transition:transform .25s;display:block}.lb-thumb:hover img,.lb-thumb:focus-visible img{transform:scale(1.04)}.lb-thumb:focus-visible{outline:2px solid var(--lb-focus);outline-offset:2px}.lb-thumb-title{text-align:left;color:#fff;pointer-events:none;background:linear-gradient(#0000,#0009);padding:22px 10px 8px;font-size:13px;line-height:1.4;position:absolute;bottom:0;left:0;right:0}.lb-overlay{z-index:9999;color:var(--lb-text);--lb-dur:.3s;--lb-chrome-dur:min(var(--lb-dur), .28s);font-family:inherit;position:fixed;inset:0}.lb-backdrop{background:var(--lb-backdrop);opacity:0;transition:opacity var(--lb-chrome-dur) ease;position:absolute;inset:0}.lb-overlay.is-open .lb-backdrop{opacity:1}.lb-overlay.is-closing .lb-backdrop{opacity:0;transition-delay:calc(var(--lb-dur) - var(--lb-chrome-dur))}.lb-layout{padding:56px 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.lb-stage{aspect-ratio:var(--lb-ar);width:min(var(--lb-stage-max-w,92vw), calc(var(--lb-stage-max-h,76vh) * var(--lb-ar-num,1)));max-width:100%;max-height:100%;box-shadow:var(--lb-stage-shadow);touch-action:none;user-select:none;border-radius:6px;position:relative;overflow:hidden}.lb-frame{position:absolute;inset:0}.lb-img{object-fit:cover;width:100%;height:100%;display:block}.lb-frame.lb-swap{animation:.28s lb-swap-in}@keyframes lb-swap-in{0%{opacity:0}}.lb-caption{text-align:center;opacity:0;max-width:min(92vw,640px);transition:opacity var(--lb-chrome-dur) ease;margin-top:14px}.lb-title{font-size:15px;font-weight:600}.lb-desc{color:var(--lb-text-muted);margin-top:4px;font-size:13.5px;line-height:1.6}.lb-btn{background:var(--lb-chrome-bg);width:44px;height:44px;color:var(--lb-chrome-fg);cursor:pointer;opacity:0;transition:background .15s ease, opacity var(--lb-chrome-dur) ease;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.lb-btn:hover{background:var(--lb-chrome-bg-hover)}.lb-btn:focus-visible{outline:2px solid var(--lb-focus);outline-offset:2px}.lb-btn svg{width:22px;height:22px}.lb-close{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right))}.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}.lb-prev{left:max(10px, env(safe-area-inset-left))}.lb-next{right:max(10px, env(safe-area-inset-right))}.lb-counter{top:max(22px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));color:var(--lb-text-muted);opacity:0;transition:opacity var(--lb-chrome-dur) ease;font-size:12.5px;position:absolute}.lb-overlay.is-open .lb-btn,.lb-overlay.is-open .lb-counter,.lb-overlay.is-open .lb-caption{opacity:1}.lb-overlay.is-closing .lb-btn,.lb-overlay.is-closing .lb-counter,.lb-overlay.is-closing .lb-caption{opacity:0}@media (width<=640px){.lb-btn{width:40px;height:40px}.lb-layout{padding-top:64px}}.lb-t-pop .lb-stage{opacity:0;transform:var(--lb-pop-from,scale(.72));transition:transform var(--lb-dur) cubic-bezier(.2, 1.45, .35, 1), opacity calc(var(--lb-dur) * .75) ease}.lb-t-pop.is-open .lb-stage{opacity:1;transform:none}.lb-t-pop.is-closing .lb-stage{opacity:0;transform:var(--lb-pop-from,scale(.72));transition:transform calc(var(--lb-dur) * .85) ease-in, opacity calc(var(--lb-dur) * .7) ease-in}.lb-t-fade .lb-stage{opacity:0;transition:opacity var(--lb-dur) ease}.lb-t-fade.is-open .lb-stage{opacity:1}.lb-t-fade.is-closing .lb-stage{opacity:0}.lb-t-slide .lb-stage{transform:var(--lb-slide-in,translateY(-100vh));transition:transform var(--lb-dur) cubic-bezier(.3, .9, .3, 1)}.lb-t-slide.is-open .lb-stage{transform:none}.lb-t-slide.is-closing .lb-stage{transform:var(--lb-slide-out,translateY(100vh));transition:transform var(--lb-dur) cubic-bezier(.6, .05, .7, .4)}.lb-t-spin .lb-stage{transform:var(--lb-slide-in,translateX(-100vw) rotate(-360deg));transition:transform var(--lb-dur) cubic-bezier(.3, .75, .4, 1)}.lb-t-spin.is-open .lb-stage{transform:none}.lb-t-spin.is-closing .lb-stage{transform:var(--lb-slide-out,translateX(100vw) rotate(360deg));transition:transform var(--lb-dur) cubic-bezier(.55, 0, .7, .35)}.lb-t-roll .lb-stage{clip-path:var(--lb-roll-clip,inset(0 0 100% 0));transition:clip-path var(--lb-dur) ease-in-out}.lb-t-roll.is-open .lb-stage{clip-path:inset(0)}.lb-t-roll.is-closing .lb-stage{clip-path:var(--lb-roll-clip,inset(0 0 100% 0))}.lb-roll-bar{pointer-events:none;opacity:1;transition:top var(--lb-dur) ease-in-out, left var(--lb-dur) ease-in-out, opacity var(--lb-dur) ease-in;position:absolute}.lb-roll-bar-top,.lb-roll-bar-bottom{background:linear-gradient(#0000,#0000008c,#0000);height:30px;left:0;right:0}.lb-roll-bar-left,.lb-roll-bar-right{background:linear-gradient(90deg,#0000,#0000008c,#0000);width:30px;top:0;bottom:0}.lb-roll-bar-top{top:-15px}.lb-t-roll.is-open .lb-roll-bar-top{opacity:0;top:calc(100% - 15px)}.lb-roll-bar-bottom{top:calc(100% - 15px)}.lb-t-roll.is-open .lb-roll-bar-bottom{opacity:0;top:-15px}.lb-roll-bar-left{left:-15px}.lb-t-roll.is-open .lb-roll-bar-left{opacity:0;left:calc(100% - 15px)}.lb-roll-bar-right{left:calc(100% - 15px)}.lb-t-roll.is-open .lb-roll-bar-right{opacity:0;left:-15px}.lb-t-draw .lb-stage{overflow:visible}.lb-draw{grid-template-columns:repeat(var(--lb-cols), 1fr);grid-template-rows:repeat(var(--lb-rows), 1fr);display:grid;position:absolute;inset:0}.lb-tile{opacity:0;transition:opacity var(--lb-tile-dur,.26s) ease var(--d), transform var(--lb-tile-dur,.26s) ease var(--d);position:relative;overflow:hidden}.lb-draw-pop .lb-tile{transition-timing-function:cubic-bezier(.2,1.45,.35,1);transform:scale(.3)}.lb-draw-slide .lb-tile,.lb-draw-spin .lb-tile{transform:var(--lb-t-in,translateY(-100vh));transition:opacity calc(var(--lb-tile-dur,.26s) / 3) ease var(--d), transform var(--lb-tile-dur,.26s) ease var(--d)}.lb-draw.is-shown .lb-tile{opacity:1;transform:none}.lb-draw-slide.is-hiding .lb-tile,.lb-draw-spin.is-hiding .lb-tile{transform:var(--lb-t-out,translateY(100vh));transition:opacity calc(var(--lb-tile-dur,.26s) / 3) ease calc(var(--d) + var(--lb-tile-dur,.26s) * .67), transform var(--lb-tile-dur,.26s) ease var(--d)}.lb-draw-full{object-fit:cover;border-radius:6px;width:100%;height:100%;position:absolute;inset:0}.lb-tile img{left:calc(var(--c) * -100%);top:calc(var(--r) * -100%);width:calc(var(--lb-cols) * 100%);height:calc(var(--lb-rows) * 100%);object-fit:cover;max-width:none;max-height:none;position:absolute}@media (prefers-reduced-motion:reduce){.lb-thumb img,.lb-frame.lb-swap{transition:none;animation:none}}.demo{background:var(--page-bg);min-height:100vh;color:var(--page-fg);--page-bg:#fafafa;--page-fg:#17181c;--page-muted:#565b64;--page-border:#d8dade;transition:background .2s,color .2s}.demo[data-theme=dark]{--page-bg:#101114;--page-fg:#f2f3f5;--page-muted:#a2a7b0;--page-border:#33363d}@media (prefers-color-scheme:dark){.demo[data-theme=auto]{--page-bg:#101114;--page-fg:#f2f3f5;--page-muted:#a2a7b0;--page-border:#33363d}}.demo-main{max-width:960px;margin:0 auto;padding:32px 20px 64px}.demo-main h1{margin:0 0 8px;font-size:26px}.demo-main h2{margin:36px 0 14px;font-size:19px}.demo-intro{color:var(--page-muted);margin:0 0 20px;line-height:1.6}.demo-intro a{color:inherit}.demo-controls{border:1px solid var(--page-border);border-radius:10px;flex-wrap:wrap;gap:16px;padding:14px 16px;display:flex}.demo-controls label{align-items:center;gap:8px;font-size:14px;display:flex}.demo-controls select,.demo-controls input[type=number]{font:inherit;border:1px solid var(--page-border);background:var(--page-bg);color:var(--page-fg);border-radius:6px;padding:4px 8px}.demo-controls input[type=number]{width:60px}.demo-controls input[type=range]{accent-color:#3b6ef6;width:130px}.demo-value{min-width:56px;color:var(--page-muted);font-variant-numeric:tabular-nums}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif}