@redot-src/glare 1.0.0 → 1.1.0

package/README.md

@@ -2,16 +2,16 @@
 
 Modern, touch-enabled lightbox for the web. **Zero dependencies.** MIT licensed.
 
-Open images, HTML5 video, YouTube/Vimeo, maps, iframes, inline nodes, AJAX fragments, and custom HTML — with galleries, zoom, thumbnails, slideshow, fullscreen, deep links, and a polished toolbar.
+Open images, HTML5 video, YouTube/Vimeo, maps, iframes, inline nodes, AJAX fragments, and custom HTML, with galleries, zoom, thumbnails, slideshow, fullscreen, deep links, and a polished toolbar.
 
 ## Features
 
-- **Vanilla JS / TypeScript** — no jQuery, no framework lock-in
+- **Vanilla JS / TypeScript**, no jQuery, no framework lock-in
 - **Galleries** with loop, arrows, keyboard, mouse wheel, and swipe
 - **Content types**: image, video, iframe, inline, AJAX, HTML
 - **Media helpers** for YouTube, Vimeo, and Google Maps URLs
-- **Pinch-zoom & pan**, click-to-zoom, protect mode
-- **Thumbnails**, **slideshow**, **fullscreen**, **share**, **hash** deep-linking
+- **Pinch-zoom and pan**, click-to-zoom, protect mode
+- **Thumbnails**, **slideshow**, **fullscreen**, **share**, **hash** deep links
 - **Accessible** dialog: focus trap, ARIA, Escape, restored focus
 - **Theming** via CSS custom properties
 - ESM + UMD builds, full type declarations
@@ -65,14 +65,46 @@ Glare.open(
 
 - Docs: [redot-src.github.io/glare](https://redot-src.github.io/glare/)
 - Live demo: [redot-src.github.io/glare/demo](https://redot-src.github.io/glare/demo/)
-- Repository: [github.com/redot-src/glare](https://github.com/redot-src/glare)
+
+## Development
 
 ```bash
 npm install
-npm run dev          # interactive demo
+npm run dev          # interactive demo with live reload
+npm run build        # typecheck + library build → dist/
 npm run docs:dev     # VitePress documentation
-npm run build        # library build → dist/
-npm run pages:build  # docs + demo for GitHub Pages
+npm run pages:build  # docs + demo, as deployed to GitHub Pages
+```
+
+### Project structure
+
+```
+src/
+  index.ts        public API and type exports
+  esm.ts          ESM build entry: the API plus the stylesheet
+  umd.ts          UMD/CDN build entry: exposes the class as window.Glare
+  types.ts        public types
+  defaults.ts     default options
+  i18n.ts         built-in strings
+  icons.ts        inline SVG icons
+  templates.ts    HTML templates for the dialog and buttons
+  core/           the Glare class and its collaborators
+    glare.ts        lifecycle, navigation, public API
+    dom.ts          building and updating the dialog markup
+    loaders.ts      one loader per content type
+    interactions.ts clicks, keyboard, focus trap
+    animation.ts    open animation and slide-transition settings
+    zoom.ts         image zoom and pan maths
+    idle.ts         idle timer that hides the controls
+    options.ts      merges defaults, mobile overrides, and module shorthands
+    registry.ts     stack of open instances
+    bind.ts         declarative `Glare.bind()` and hash restore
+  media/          URL type detection, providers (YouTube, Vimeo, Maps), item normalization
+  modules/        optional features: fullscreen, gestures, hash, share, slideshow, thumbs, wheel
+  styles/         stylesheet split by concern; tokens.css holds the public CSS variables
+  utils/          small DOM, object, environment, and template helpers
+demo/             Vite demo site (npm run dev)
+docs/             VitePress documentation
 ```
 
 ## License

package/dist/core/animation.d.ts

@@ -0,0 +1,7 @@
+import type { ResolvedOptions, SlideItem } from '../types';
+/** Writes the effect and duration settings onto the container for the stylesheet to use. */
+export declare function applyMotionSettings(container: HTMLElement, opts: ResolvedOptions): void;
+/** Marks the container so slide-change keyframes apply from now on. */
+export declare function enableTransitions(container: HTMLElement, opts: ResolvedOptions): void;
+/** Flies the opened image in from its trigger element. */
+export declare function animateOpen(container: HTMLElement, item: SlideItem, opts: ResolvedOptions): void;

package/dist/core/bind.d.ts

@@ -0,0 +1,8 @@
+import type { BoundGroup, GlareOptions } from '../types';
+export type BindTarget = string | HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>;
+/** Opens `elements` as a gallery named `gallery`, starting at `index`. */
+type Opener = (elements: HTMLElement[], index: number, gallery: string) => void;
+/** Attaches click handlers that open a lightbox for the clicked element's gallery. */
+export declare function bind(target: BindTarget, options: GlareOptions, open: Opener): BoundGroup;
+export declare function unbindAll(): void;
+export {};

package/dist/core/dom.d.ts

@@ -0,0 +1,18 @@
+import type { GlareRefs, I18nDict, ResolvedOptions, SlideItem } from '../types';
+export declare function buildContainer(opts: ResolvedOptions, dict: I18nDict, id: number, count: number): GlareRefs;
+/** Creates a hidden slide with an empty content box and appends it to the stage. */
+export declare function mountSlide(stage: HTMLElement, item: SlideItem, opts: ResolvedOptions): HTMLElement;
+/** Makes a mounted slide the current one, fading it in unless `instant`. */
+export declare function revealSlide(slide: HTMLElement, instant: boolean): void;
+/** Fades out every slide except `keep` and removes it after `delay`. */
+export declare function retireSlides(stage: HTMLElement, keep: HTMLElement, delay: number): void;
+export declare function addSmallButton(slide: HTMLElement, opts: ResolvedOptions, dict: I18nDict): void;
+export declare function showSpinner(stage: HTMLElement, opts: ResolvedOptions, dict: I18nDict): void;
+export declare function hideSpinner(stage: HTMLElement): void;
+export declare function showError(item: SlideItem, error: unknown, opts: ResolvedOptions, dict: I18nDict): void;
+export declare function usesSmallButton(opts: ResolvedOptions, item: SlideItem): boolean;
+/** Updates every piece of chrome that depends on the current slide. */
+export declare function syncChrome(refs: GlareRefs, opts: ResolvedOptions, dict: I18nDict, item: SlideItem, total: number, caption: string): void;
+export declare function syncZoomButton(container: HTMLElement, dict: I18nDict, zoomed: boolean, hasImage: boolean): void;
+/** Swaps a toolbar toggle's label and icon and marks it active. */
+export declare function setToggleState(button: HTMLElement, active: boolean, label: string, icon: string): void;

package/dist/core/glare.d.ts

@@ -0,0 +1,65 @@
+import type { BoundGroup, GlareInstance, GlareOptions, GlareRefs, I18nDict, ResolvedOptions, SlideItem, SlideSource } from '../types';
+import { Fullscreen } from '../modules/fullscreen';
+import { Share } from '../modules/share';
+import { Slideshow } from '../modules/slideshow';
+import { Thumbs } from '../modules/thumbs';
+import { type BindTarget } from './bind';
+import { Zoom, type Point } from './zoom';
+export declare class Glare implements GlareInstance {
+    readonly id: number;
+    readonly opts: ResolvedOptions;
+    readonly group: SlideItem[];
+    readonly dict: I18nDict;
+    readonly zoom: Zoom;
+    current: SlideItem | null;
+    currIndex: number;
+    prevIndex: number;
+    isActive: boolean;
+    isClosing: boolean;
+    isIdle: boolean;
+    $refs: GlareRefs | null;
+    slideshow?: Slideshow;
+    thumbs?: Thumbs;
+    fullscreen?: Fullscreen;
+    share?: Share;
+    private readonly galleryName;
+    private readonly idle;
+    private hash;
+    private gestures;
+    private wheel;
+    private cleanups;
+    private previouslyFocused;
+    constructor(items: Array<SlideSource | string> | HTMLElement[], options?: GlareOptions, index?: number, galleryName?: string);
+    open(index?: number): void;
+    close(): void;
+    next(): void;
+    prev(): void;
+    jumpTo(index: number): void;
+    toggleZoom(focus?: Point): void;
+    update(): void;
+    focus(): void;
+    toggleControls(force?: boolean): void;
+    /** True once per drag gesture, so the click that follows it can be ignored. */
+    consumeGesture(): boolean;
+    private showSlide;
+    private syncChrome;
+    private captionFor;
+    private syncZoomState;
+    private resolveParent;
+    private startModules;
+    private onActivity;
+    private teardown;
+    private emit;
+    private emitSlide;
+    private clampIndex;
+    static defaults: ResolvedOptions;
+    static open(items: Array<SlideSource | string> | HTMLElement[], options?: GlareOptions, index?: number): Glare;
+    static bind(target: BindTarget, options?: GlareOptions): BoundGroup;
+    static close(all?: boolean): void;
+    static getInstance(id?: number): Glare | null;
+    static getInstances(): Glare[];
+    /** Closes every instance and removes all `bind()` handlers. */
+    static destroy(): void;
+    /** Binds every `[data-glare]` element once the DOM is ready. */
+    static autoBind(options?: GlareOptions): void;
+}

package/dist/core/idle.d.ts

@@ -0,0 +1,9 @@
+/** Calls `onIdle` after `seconds` of no activity; `false` disables it. */
+export declare class IdleTimer {
+    private readonly seconds;
+    private readonly onIdle;
+    private timer;
+    constructor(seconds: number | false, onIdle: () => void);
+    reset(): void;
+    stop(): void;
+}

package/dist/core/interactions.d.ts

@@ -0,0 +1,3 @@
+import type { Glare } from './glare';
+/** Wires clicks, keyboard, focus trapping and idle tracking. Returns a cleanup function. */
+export declare function bindInteractions(glare: Glare, container: HTMLElement, onActivity: () => void): () => void;

package/dist/core/loaders.d.ts

@@ -0,0 +1,5 @@
+import type { I18nDict, ResolvedOptions, SlideItem } from '../types';
+/** Renders the slide's content into `content` and resolves once it can be shown. */
+export declare function loadContent(item: SlideItem, content: HTMLElement, opts: ResolvedOptions, dict: I18nDict): Promise<void>;
+/** Warms the browser cache for neighbouring images. */
+export declare function preloadNeighbours(group: SlideItem[], index: number): void;

package/dist/core/options.d.ts

@@ -0,0 +1,5 @@
+import type { GlareOptions, ResolvedOptions } from '../types';
+/** Merges user options over the defaults, then applies `mobile` overrides on touch devices. */
+export declare function resolveOptions(options: GlareOptions): ResolvedOptions;
+/** Normalizes a `T | boolean` module option: `true` yields the defaults, falsy disables it. */
+export declare function moduleOptions<T extends object>(value: Partial<T> | boolean | undefined, fallback: T): T | null;

package/dist/core/registry.d.ts

@@ -0,0 +1,9 @@
+import type { Glare } from './glare';
+export declare const registry: {
+    add(instance: Glare): void;
+    remove(instance: Glare): void;
+    top(): Glare | null;
+    get(id: number): Glare | null;
+    all(): Glare[];
+    readonly size: number;
+};

package/dist/core/zoom.d.ts

@@ -0,0 +1,36 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface ZoomState extends Point {
+    scale: number;
+}
+export interface ZoomTarget {
+    image(): HTMLImageElement | null;
+    stage(): HTMLElement | null;
+    onChange(zoomed: boolean): void;
+}
+export declare const ZOOM_MIN = 1;
+export declare const ZOOM_MAX = 5;
+/**
+ * Controls the transform of the current image.
+ * The image is scaled around its centre and then translated by (x, y).
+ */
+export declare class Zoom {
+    private readonly target;
+    scale: number;
+    x: number;
+    y: number;
+    constructor(target: ZoomTarget);
+    get isZoomed(): boolean;
+    get state(): ZoomState;
+    /** Centre of the image in viewport coordinates, ignoring the current translation. */
+    center(): Point | null;
+    apply(scale: number, x: number, y: number, duration?: number): void;
+    toFit(duration?: number): void;
+    /** Zooms to the image's natural size (at least 1.5x), keeping `focus` under the pointer. */
+    toActual(focus?: Partial<Point>, duration?: number): void;
+    reset(): void;
+    /** Keeps the scaled image from being dragged fully out of the stage. */
+    private bounded;
+}

package/dist/defaults.d.ts

@@ -1,5 +1,5 @@
-import type { I18nDict, MediaProvider, GlareOptions } from './types';
-export declare const i18nEn: I18nDict;
-export declare const defaultMedia: Record<string, MediaProvider>;
-export declare const defaults: GlareOptions;
-//# sourceMappingURL=defaults.d.ts.map
+import type { FullscreenOptions, ResolvedOptions, SlideshowOptions, ThumbsOptions } from './types';
+export declare const thumbsDefaults: Required<Omit<ThumbsOptions, 'parentEl'>> & ThumbsOptions;
+export declare const slideshowDefaults: Required<SlideshowOptions>;
+export declare const fullscreenDefaults: Required<FullscreenOptions>;
+export declare const defaults: ResolvedOptions;

package/dist/esm.d.ts

@@ -0,0 +1,3 @@
+import './styles/index.css';
+export * from './index';
+export { default } from './index';

package/dist/glare.css

@@ -1 +1 @@
-:root{--glare-bg: rgba(12, 14, 18, .92);--glare-bg-solid: #0c0e12;--glare-fg: #f4f6f8;--glare-muted: rgba(244, 246, 248, .62);--glare-accent: #ff4d4d;--glare-accent-soft: rgba(255, 77, 77, .18);--glare-toolbar-bg: rgba(12, 14, 18, .55);--glare-button-bg: rgba(255, 255, 255, .08);--glare-button-hover: rgba(255, 255, 255, .16);--glare-button-size: 44px;--glare-radius: 14px;--glare-shadow: 0 24px 80px rgba(0, 0, 0, .45);--glare-ease: cubic-bezier(.22, 1, .36, 1);--glare-duration: 366ms;--glare-transition-duration: 366ms;--glare-caption-bg: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));--glare-z: 100000;--glare-font: "Segoe UI", system-ui, -apple-system, sans-serif}.glare-lock{overflow:hidden!important}.glare-container{position:fixed;inset:0;z-index:var(--glare-z);display:flex;color:var(--glare-fg);font-family:var(--glare-font);outline:none;opacity:0;visibility:hidden;transition:opacity var(--glare-duration) var(--glare-ease),visibility var(--glare-duration);-webkit-tap-highlight-color:transparent}.glare-container.glare-is-open{opacity:1;visibility:visible}.glare-container.glare-is-closing{opacity:0}.glare-bg{position:absolute;inset:0;background:var(--glare-bg);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}.glare-inner{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr auto;width:100%;height:100%;min-height:0}.glare-toolbar,.glare-infobar,.glare-navigation,.glare-caption{transition:opacity .22s var(--glare-ease),transform .22s var(--glare-ease)}.glare-container.glare-is-idle .glare-toolbar,.glare-container.glare-is-idle .glare-infobar,.glare-container.glare-is-idle .glare-navigation,.glare-container.glare-is-idle .glare-caption:not(:hover){opacity:0;pointer-events:none}.glare-toolbar{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--glare-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glare-shadow)}.glare-infobar{position:absolute;top:18px;left:18px;z-index:5;padding:8px 14px;border-radius:999px;background:var(--glare-toolbar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--glare-muted)}.glare-button{appearance:none;border:0;margin:0;padding:0;width:var(--glare-button-size);height:var(--glare-button-size);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--glare-button-bg);color:var(--glare-fg);cursor:pointer;text-decoration:none;transition:background .16s ease,transform .16s ease,color .16s ease}.glare-button svg{width:20px;height:20px;display:block}.glare-button:hover,.glare-button:focus-visible{background:var(--glare-button-hover);outline:none}.glare-button:focus-visible{box-shadow:0 0 0 2px var(--glare-accent)}.glare-button.is-active{background:var(--glare-accent-soft);color:var(--glare-accent)}.glare-button.glare-disabled,.glare-button:disabled{opacity:.35;pointer-events:none}.glare-navigation{position:absolute;inset:0;z-index:4;pointer-events:none}.glare-button--prev,.glare-button--next{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;width:52px;height:52px;background:var(--glare-toolbar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.glare-button--prev{left:16px}.glare-button--next{right:16px}.glare-button--prev:hover,.glare-button--next:hover{transform:translateY(-50%) scale(1.04)}.glare-stage{position:relative;grid-row:1 / -1;width:100%;height:100%;overflow:hidden;touch-action:none}.glare-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--glare-transition-duration) var(--glare-ease)}.glare-slide--current{opacity:1;z-index:2}.glare-slide--out{opacity:0;z-index:1;pointer-events:none}.glare-space{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:64px 72px 88px;box-sizing:border-box}.glare-content{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--glare-radius);box-shadow:var(--glare-shadow)}.glare-content--image{background:transparent;box-shadow:none;overflow:visible}.glare-image{display:block;max-width:min(100vw - 48px,100%);max-height:min(100vh - 160px,100%);width:auto;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;transition:transform var(--glare-duration) var(--glare-ease),opacity var(--glare-duration) var(--glare-ease);border-radius:8px}.glare-content--html,.glare-content--inline,.glare-content--ajax{background:#11151c;color:var(--glare-fg);padding:28px;max-width:min(720px,calc(100vw - 48px));max-height:min(80vh,calc(100vh - 160px));overflow:auto;border:1px solid rgba(255,255,255,.08)}.glare-content--video,.glare-content--iframe{background:#000;overflow:hidden}.glare-video{display:block;max-width:min(960px,calc(100vw - 48px));max-height:min(80vh,calc(100vh - 160px));width:100%;background:#000}.glare-iframe-wrap{width:min(960px,calc(100vw - 48px));height:min(70vh,calc(100vh - 180px));max-width:100%}.glare-iframe{width:100%;height:100%;border:0;display:block;background:#000}.glare-caption{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:48px 24px 24px;background:var(--glare-caption-bg);text-align:center;font-size:15px;line-height:1.5;pointer-events:none}.glare-caption a{color:var(--glare-accent);pointer-events:auto}.glare-close-small{position:absolute;top:12px;right:12px;z-index:6}.glare-spinner{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--glare-accent);animation:glare-spin .8s linear infinite;z-index:3}@keyframes glare-spin{to{transform:rotate(360deg)}}.glare-error{padding:28px 32px;border-radius:var(--glare-radius);background:#161a22;border:1px solid rgba(255,255,255,.08);text-align:center;max-width:420px;color:var(--glare-muted)}.glare-hidden{display:none!important}.glare-thumbs{position:absolute;z-index:6;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.glare-thumbs--active{opacity:1;pointer-events:auto}.glare-thumbs--y{top:72px;right:12px;bottom:88px;width:88px;transform:translate(12px)}.glare-thumbs--y.glare-thumbs--active{transform:translate(0)}.glare-thumbs--x{left:12px;right:12px;bottom:72px;height:78px;transform:translateY(12px)}.glare-thumbs--x.glare-thumbs--active{transform:translateY(0)}.glare-thumbs-list{display:flex;gap:8px;height:100%;padding:8px;border-radius:16px;background:var(--glare-toolbar-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:auto;scrollbar-width:thin}.glare-thumbs--y .glare-thumbs-list{flex-direction:column}.glare-thumbs--x .glare-thumbs-list{flex-direction:row}.glare-thumbs-item{appearance:none;border:2px solid transparent;padding:0;margin:0;width:64px;height:64px;border-radius:10px;overflow:hidden;background:#ffffff0f;cursor:pointer;flex:0 0 auto;color:var(--glare-muted);font-size:12px}.glare-thumbs-item img{width:100%;height:100%;object-fit:cover;display:block}.glare-thumbs-item.is-active{border-color:var(--glare-accent)}.glare-container.glare-show-thumbs.glare-thumbs-axis-y .glare-space,.glare-show-thumbs .glare-space{padding-right:110px}.glare-share-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0000008c;padding:24px}.glare-share{width:min(420px,100%);background:#12161e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;box-shadow:var(--glare-shadow)}.glare-share-title{margin:0 0 16px;font-size:18px}.glare-share p{margin:0 0 10px}.glare-share-link{color:var(--glare-fg);text-decoration:none;display:inline-flex;padding:10px 12px;border-radius:10px;background:#ffffff0f;width:100%;box-sizing:border-box}.glare-share-link:hover{background:#ffffff1f}.glare-share-input{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#00000059;color:var(--glare-fg);padding:10px 12px;font:inherit}.glare-container[data-transition=slide] .glare-slide--out{transform:translate3d(-40px,0,0)}.glare-container[data-transition=circular] .glare-slide--current{animation:glare-circular var(--glare-transition-duration) var(--glare-ease)}.glare-container[data-transition=tube] .glare-slide--current{animation:glare-tube var(--glare-transition-duration) var(--glare-ease)}.glare-container[data-transition=rotate] .glare-slide--current{animation:glare-rotate var(--glare-transition-duration) var(--glare-ease)}.glare-container[data-transition=zoom-in-out] .glare-slide--current{animation:glare-zoom-inout var(--glare-transition-duration) var(--glare-ease)}@keyframes glare-circular{0%{transform:scale(.85) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}@keyframes glare-tube{0%{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}@keyframes glare-rotate{0%{transform:rotate(12deg) scale(.92);opacity:0}to{transform:none;opacity:1}}@keyframes glare-zoom-inout{0%{transform:scale(1.18);opacity:0}to{transform:none;opacity:1}}.glare-container.glare-is-slideshow .glare-button--slideshow{color:var(--glare-accent)}.glare-container.glare-is-modal .glare-bg{pointer-events:none}@media(max-width:720px){.glare-space{padding:56px 16px 96px}.glare-button--prev,.glare-button--next{width:44px;height:44px}.glare-button--prev{left:8px}.glare-button--next{right:8px}.glare-toolbar{top:8px;right:8px;gap:4px;padding:4px}.glare-button{width:40px;height:40px}.glare-thumbs--y{display:none}.glare-infobar{top:12px;left:12px;font-size:12px}}@media(prefers-reduced-motion:reduce){.glare-container,.glare-slide,.glare-image,.glare-toolbar,.glare-infobar,.glare-navigation,.glare-caption,.glare-thumbs{transition:none!important;animation:none!important}}
+:root{--glare-z: 100000;--glare-font: system-ui, -apple-system, "Segoe UI", sans-serif;--glare-bg: rgba(12, 14, 18, .92);--glare-fg: #f4f6f8;--glare-muted: rgba(244, 246, 248, .62);--glare-surface: #11151c;--glare-border: rgba(255, 255, 255, .08);--glare-accent: #ff4d4d;--glare-accent-soft: rgba(255, 77, 77, .18);--glare-toolbar-bg: rgba(12, 14, 18, .55);--glare-toolbar-bg-hover: rgba(12, 14, 18, .8);--glare-button-bg: rgba(255, 255, 255, .08);--glare-button-hover: rgba(255, 255, 255, .16);--glare-button-size: 44px;--glare-caption-bg: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));--glare-radius: 14px;--glare-shadow: 0 24px 80px rgba(0, 0, 0, .45);--glare-backdrop: blur(14px);--glare-blur: blur(12px);--glare-ease: cubic-bezier(.22, 1, .36, 1);--glare-iframe-bg: #fff;--glare-iframe-radius: 5px;--glare-thumbs-size: 95px}.glare-lock{overflow:hidden!important}.glare-container{position:fixed;inset:0;z-index:var(--glare-z);color:var(--glare-fg);font-family:var(--glare-font);outline:none;visibility:hidden;transition:visibility var(--glare-duration);-webkit-tap-highlight-color:transparent}.glare-container.glare-is-open{visibility:visible}.glare-bg,.glare-inner{opacity:0;transition:opacity var(--glare-duration) var(--glare-ease);will-change:opacity}.glare-is-open .glare-bg,.glare-is-open .glare-inner{opacity:1}.glare-is-closing .glare-bg,.glare-is-closing .glare-inner,.glare-is-closing .glare-thumbs,.glare-is-closing .glare-share-overlay{opacity:0;pointer-events:none}.glare-bg{position:absolute;inset:0;background:var(--glare-bg);-webkit-backdrop-filter:var(--glare-backdrop);backdrop-filter:var(--glare-backdrop)}.glare-inner{position:relative;z-index:1;width:100%;height:100%}.glare-hidden{display:none!important}.glare-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.glare-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--glare-button-size);height:var(--glare-button-size);margin:0;padding:0;border:0;border-radius:50%;background:var(--glare-button-bg);color:var(--glare-fg);cursor:pointer;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease}.glare-button svg{display:block;width:20px;height:20px}.glare-toolbar .glare-button{background:transparent}.glare-button:hover,.glare-button:focus-visible{background:var(--glare-button-hover);outline:none}.glare-button:focus-visible{box-shadow:0 0 0 2px var(--glare-accent)}.glare-button.glare-is-active{background:var(--glare-accent-soft);color:var(--glare-accent)}.glare-button.glare-is-disabled{opacity:.35;pointer-events:none}.glare-toolbar,.glare-infobar,.glare-button--prev,.glare-button--next,.glare-close-small{border:1px solid var(--glare-border);background:var(--glare-toolbar-bg);-webkit-backdrop-filter:var(--glare-blur);backdrop-filter:var(--glare-blur)}.glare-button--prev:hover,.glare-button--next:hover,.glare-close-small:hover,.glare-button--prev:focus-visible,.glare-button--next:focus-visible,.glare-close-small:focus-visible{background:var(--glare-toolbar-bg-hover)}.glare-toolbar,.glare-infobar{position:absolute;top:12px;z-index:5;border-radius:999px}.glare-toolbar{right:12px;display:flex;gap:6px;padding:5px}.glare-infobar{top:18px;left:18px;padding:8px 14px;color:var(--glare-muted);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em}.glare-navigation{position:absolute;inset:0;z-index:4;pointer-events:none}.glare-button--prev,.glare-button--next{position:absolute;top:50%;width:52px;height:52px;transform:translateY(-50%);pointer-events:auto}.glare-button--prev{left:16px}.glare-button--next{right:16px}.glare-close-small{position:absolute;top:12px;right:12px;z-index:6}.glare-caption{position:absolute;inset:auto 0 0;z-index:5;padding:48px 24px 24px;background:var(--glare-caption-bg);font-size:15px;line-height:1.5;text-align:center;pointer-events:none}.glare-caption a{color:var(--glare-accent);pointer-events:auto}.glare-infobar,.glare-navigation,.glare-caption{transition:opacity .22s var(--glare-ease),visibility .22s}.glare-is-idle .glare-infobar,.glare-is-idle .glare-navigation,.glare-is-idle .glare-caption:not(:hover){opacity:0;visibility:hidden;pointer-events:none}.glare-progress{position:absolute;top:0;left:0;right:0;z-index:30;height:3px;background:var(--glare-accent);transform:scaleX(0);transform-origin:left center;transition:transform 0s linear;pointer-events:none}.glare-spinner{position:absolute;top:50%;left:50%;z-index:3;pointer-events:none;width:42px;height:42px;margin:-21px 0 0 -21px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--glare-accent);border-radius:50%;animation:glare-spin .8s linear infinite}@keyframes glare-spin{to{transform:rotate(360deg)}}.glare-error{max-width:420px;padding:28px 32px;border:1px solid var(--glare-border);border-radius:var(--glare-radius);background:var(--glare-surface);color:var(--glare-muted);text-align:center}.glare-container{--glare-thumbs-inset: 0px;--glare-inset-top: 64px;--glare-inset-x: 72px;--glare-inset-bottom: max(88px, var(--glare-thumbs-inset))}.glare-show-thumbs.glare-thumbs-axis-x{--glare-thumbs-inset: calc(var(--glare-thumbs-size) + 16px)}.glare-show-thumbs.glare-thumbs-axis-y{--glare-inset-x: 110px}.glare-slide:where(:not(.glare-slide--image)){--glare-inset-top: 30px;--glare-inset-x: 30px;--glare-inset-bottom: max(30px, var(--glare-thumbs-inset))}.glare-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;transition:transform .2s var(--glare-ease)}.glare-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--glare-inset-top) var(--glare-inset-x) var(--glare-inset-bottom);opacity:0;transition:opacity var(--glare-transition-duration) var(--glare-ease),transform var(--glare-transition-duration) var(--glare-ease)}.glare-slide--current{z-index:2;opacity:1}.glare-slide--out{z-index:1;opacity:0;pointer-events:none}.glare-content{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}.glare-image{display:block;width:auto;height:auto;max-width:calc(100vw - 2 * var(--glare-inset-x));max-height:calc(100vh - var(--glare-inset-top) - var(--glare-inset-bottom));max-height:calc(100dvh - var(--glare-inset-top) - var(--glare-inset-bottom));border-radius:8px;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transform-origin:center;will-change:transform;transition:transform var(--glare-duration) var(--glare-ease),opacity var(--glare-duration) var(--glare-ease)}.glare-can-zoom-in .glare-image{cursor:zoom-in}.glare-can-zoom-out .glare-image{cursor:zoom-out}.glare-video{display:block;width:min(960px,100vw - 2 * var(--glare-inset-x));max-width:100%;max-height:calc(100vh - var(--glare-inset-top) - var(--glare-inset-bottom));max-height:calc(100dvh - var(--glare-inset-top) - var(--glare-inset-bottom));border-radius:var(--glare-iframe-radius);background:#000;box-shadow:var(--glare-shadow);object-fit:contain}.glare-content--iframe{width:100%;height:100%}.glare-iframe-wrap{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;border-radius:var(--glare-iframe-radius);background:var(--glare-iframe-bg);box-shadow:var(--glare-shadow)}.glare-iframe{display:block;width:100%;height:100%;border:0}.glare-content--html,.glare-content--inline,.glare-content--ajax{display:block;box-sizing:border-box;max-width:min(720px,100%);padding:28px;overflow:auto;border:1px solid var(--glare-border);border-radius:var(--glare-radius);background:var(--glare-surface);box-shadow:var(--glare-shadow)}.glare-content--html>:first-child,.glare-content--inline>:first-child,.glare-content--ajax>:first-child{margin-top:0}.glare-content--html>:last-child,.glare-content--inline>:last-child,.glare-content--ajax>:last-child{margin-bottom:0}.glare-thumbs{position:absolute;z-index:6;opacity:0;pointer-events:none;transition:opacity .22s var(--glare-ease),transform .22s var(--glare-ease)}.glare-thumbs--active{opacity:1;pointer-events:auto;transform:none}.glare-thumbs--x{left:0;right:0;bottom:0;height:var(--glare-thumbs-size);transform:translateY(8px)}.glare-thumbs--y{top:72px;right:12px;bottom:88px;width:88px;transform:translate(12px)}.glare-thumbs-list{display:flex;gap:8px;height:100%;box-sizing:border-box;overflow:auto;scrollbar-width:thin;-webkit-backdrop-filter:var(--glare-blur);backdrop-filter:var(--glare-blur)}.glare-thumbs--x .glare-thumbs-list{padding:10px 10px 5px;background:#0000004d}.glare-thumbs--y .glare-thumbs-list{flex-direction:column;padding:8px;border:1px solid var(--glare-border);border-radius:16px;background:var(--glare-toolbar-bg)}.glare-thumbs-item{appearance:none;flex:0 0 auto;box-sizing:border-box;width:70px;height:70px;margin:0;padding:0;border:4px solid transparent;border-radius:10px;overflow:hidden;background:var(--glare-button-bg);color:var(--glare-muted);font-size:12px;cursor:pointer}.glare-thumbs-item img{display:block;width:100%;height:100%;object-fit:cover}.glare-thumbs-item.glare-is-active{border-color:var(--glare-accent)}.glare-thumbs-item:focus-visible{outline:2px solid var(--glare-accent);outline-offset:-4px}.glare-show-thumbs.glare-thumbs-axis-x .glare-caption{bottom:var(--glare-thumbs-size)}.glare-share-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#0000008c}.glare-share{width:min(420px,100%);padding:24px;border:1px solid var(--glare-border);border-radius:var(--glare-radius);background:var(--glare-surface);box-shadow:var(--glare-shadow)}.glare-share-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.glare-share-title{margin:0;font-size:18px}.glare-share-close{width:36px;height:36px}.glare-share p{margin:0 0 10px}.glare-share-row{display:flex;gap:8px}.glare-share-link,.glare-share-input,.glare-share-copy{display:block;box-sizing:border-box;padding:10px 12px;border-radius:10px;color:var(--glare-fg);font:inherit}.glare-share-link{width:100%;background:var(--glare-button-bg);text-decoration:none}.glare-share-link:hover,.glare-share-copy:hover{background:var(--glare-button-hover)}.glare-share-input{flex:1;min-width:0;border:1px solid var(--glare-border);background:#00000059}.glare-share-copy{flex:0 0 auto;border:0;background:var(--glare-button-bg);cursor:pointer}[data-transition=slide] .glare-slide--out{transform:translate3d(-40px,0,0)}[data-transition=circular] .glare-slide--current{animation:glare-circular var(--glare-transition-duration) var(--glare-ease)}[data-transition=tube] .glare-slide--current{animation:glare-tube var(--glare-transition-duration) var(--glare-ease)}[data-transition=rotate] .glare-slide--current{animation:glare-rotate var(--glare-transition-duration) var(--glare-ease)}[data-transition=zoom-in-out] .glare-slide--current{animation:glare-zoom-in-out var(--glare-transition-duration) var(--glare-ease)}@keyframes glare-circular{0%{transform:scale(.85) rotate(-8deg);opacity:0}}@keyframes glare-tube{0%{transform:scaleX(.2);opacity:0}}@keyframes glare-rotate{0%{transform:rotate(12deg) scale(.92);opacity:0}}@keyframes glare-zoom-in-out{0%{transform:scale(1.18);opacity:0}}@media(prefers-reduced-motion:reduce){.glare-container,.glare-container *{transition:none!important;animation:none!important}}@media(max-width:720px){.glare-container{--glare-button-size: 40px;--glare-inset-top: 56px;--glare-inset-x: 16px;--glare-inset-bottom: max(96px, var(--glare-thumbs-inset))}.glare-slide:where(:not(.glare-slide--image)){--glare-inset-top: 15px;--glare-inset-x: 15px;--glare-inset-bottom: max(15px, var(--glare-thumbs-inset))}.glare-toolbar{top:8px;right:8px;gap:4px;padding:3px}.glare-close-small{top:8px;right:8px}.glare-infobar{top:12px;left:12px;font-size:12px}.glare-button--prev,.glare-button--next{width:44px;height:44px}.glare-button--prev{left:8px}.glare-button--next{right:8px}.glare-thumbs--y,.glare-thumbs-axis-y [data-glare-thumbs]{display:none}.glare-show-thumbs.glare-thumbs-axis-y{--glare-inset-x: 16px}}