/* Static equivalent of gallery-engine.js's buildUI() injected styles.
   Colors baked in for the "dark-museum" theme (ui.fg / ui.bg / ui.accent) —
   see gallery-engine.js buildUI() comment for why this lives here instead
   of being injected at runtime. If gallery.json's theme changes, regenerate
   this file with the new theme's ui colors. */

.gal-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.gal-root{position:fixed;inset:0;pointer-events:none;z-index:10;
  font:400 15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#ece6da}
.gal-root *{box-sizing:border-box}
.gal-title{position:absolute;top:26px;left:28px;max-width:min(42ch,60vw)}
.gal-title h1{margin:0;font:600 19px/1.25 Georgia,"Times New Roman",serif;letter-spacing:.01em}
.gal-title p{margin:5px 0 0;font-size:13px;opacity:.62}
.gal-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  padding:9px 16px;border-radius:999px;background:rgba(16,18,22,.9);font-size:13px;
  backdrop-filter:blur(8px);opacity:.9;transition:opacity .3s;white-space:nowrap}
.gal-hint.is-hidden{opacity:0}
.gal-panel{position:absolute;right:28px;bottom:28px;width:min(340px,calc(100vw - 56px));
  padding:20px 22px;border-radius:14px;background:rgba(16,18,22,.9);backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.24);opacity:0;transform:translateY(14px);
  transition:opacity .35s,transform .35s;pointer-events:none}
.gal-panel.is-open{opacity:1;transform:none;pointer-events:auto}
.gal-panel .artist{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#c9a86a}
.gal-panel h2{margin:6px 0 2px;font:italic 400 21px/1.3 Georgia,serif}
.gal-panel .meta{font-size:13px;opacity:.66;margin-bottom:10px}
.gal-panel .desc{font-size:14px;opacity:.86}
.gal-panel button{margin-top:14px;border:0;border-radius:8px;padding:7px 13px;cursor:pointer;
  font-size:13px;background:#c9a86a;color:#0c0c0e}
.gal-loader{position:fixed;inset:0;z-index:50;display:grid;place-content:center;gap:16px;
  background:rgba(16,18,22,.9);color:#ece6da;transition:opacity .6s}
.gal-loader.is-done{opacity:0;pointer-events:none}
.gal-loader .bar{width:210px;height:2px;background:currentColor;opacity:.2;border-radius:2px;overflow:hidden}
.gal-loader .bar i{display:block;height:100%;width:0;background:#c9a86a;transition:width .25s}
.gal-loader p{margin:0;text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.gal-joy{position:absolute;left:26px;bottom:26px;width:118px;height:118px;border-radius:50%;
  border:1px solid currentColor;opacity:.28;pointer-events:auto;display:none;touch-action:none}
.gal-joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:currentColor;opacity:.5}
/* Must stay in normal flow: an absolutely positioned spacer gives the document
   no height, and scroll mode silently has nothing to scroll. */
.gal-scrollspace{position:relative;width:100%;height:0;pointer-events:none;visibility:hidden}
.gal-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gal-a11y:focus-within{position:fixed;width:auto;height:auto;clip:auto;inset:auto 20px 20px auto;
  max-height:60vh;overflow:auto;padding:16px;border-radius:12px;background:rgba(16,18,22,.9);pointer-events:auto}
.gal-a11y button{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;
  padding:6px 4px;cursor:pointer;font:inherit}
@media (max-width:640px){.gal-title{top:18px;left:18px}.gal-panel{right:14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.gal-panel,.gal-hint,.gal-loader{transition:none}}