:root {
  color-scheme: dark;
  --ink: #f6f2e9;
  --muted: #aaa49a;
  --panel: rgba(20,20,21,.88);
  --accent: #d9503e;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #141415; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button { color: inherit; background: #2b2928; border: 1px solid #494541; border-radius: 999px; padding: 10px 16px; font: inherit; cursor: pointer; }
button:hover, button:focus-visible,.back-site:hover,.back-site:focus-visible { border-color: #b5ada3; background: #373330; outline: none; }
.back-site{color:inherit;background:#2b2928;border:1px solid #494541;border-radius:999px;padding:10px 16px;font:inherit;text-decoration:none;white-space:nowrap}

.topbar {
  position: fixed; z-index: 20; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
  min-height: 82px; padding: 14px 22px; background: linear-gradient(180deg,rgba(12,12,13,.96),rgba(12,12,13,.72),transparent);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.eyebrow { margin: 0 0 2px; color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 800; }
h1 { margin: 0; font-family: Georgia,serif; font-size: clamp(24px,3vw,38px); font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.hint { color: var(--muted); font-size: 13px; }

#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(circle at center,#282625,#111); }
#viewport.dragging { cursor: grabbing; }
#canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background-size: 100% 100%; box-shadow: 0 28px 100px rgba(0,0,0,.55); }
.artwork { position: absolute; border: 0; margin: 0; padding: 0; background: white; border-radius: 0; overflow: hidden; box-shadow: 0 0 0 0 rgba(217,80,62,0); transition: box-shadow .25s,filter .25s; }
.artwork img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.artwork:hover { box-shadow: 0 0 0 5px rgba(217,80,62,.8),0 8px 26px rgba(0,0,0,.2); filter: contrast(1.03); z-index: 5; }
.artwork.active { box-shadow: 0 0 0 4px var(--accent),0 14px 38px rgba(0,0,0,.3); z-index: 6; }

.controls { position: fixed; z-index: 22; bottom: max(18px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px; background: var(--panel); border: 1px solid #413e3a; border-radius: 999px; backdrop-filter: blur(14px); }
.controls button { width: 43px; height: 43px; padding: 0; font-size: 21px; }
.focus-panel { position: fixed; z-index: 21; left: 20px; bottom: 22px; display: none; align-items: center; gap: 15px; padding: 10px 11px 10px 16px; background: var(--panel); border: 1px solid #413e3a; border-radius: 14px; backdrop-filter: blur(14px); }
.focus-panel.show { display: flex; }
.focus-panel span,.focus-panel strong { display: block; }
.focus-panel span { color: var(--muted); font-size: 11px; }
.focus-panel strong { margin-top: 2px; }

dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; border: 0; background: rgba(12,12,13,.96); color: var(--ink); }
dialog::backdrop { background: #000; }
dialog figure { width: 100%; height: 100%; margin: 0; display: grid; place-items: center; padding: 42px 28px 72px; }
dialog img { max-width: min(92vw,1500px); max-height: calc(100vh - 120px); object-fit: contain; background: white; box-shadow: 0 20px 80px rgba(0,0,0,.45); }
dialog figcaption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 20px; align-items: baseline; white-space: nowrap; }
dialog figcaption small { color: var(--muted); }
.dialog-close { position: fixed; z-index: 3; right: 18px; top: 18px; width: 46px; height: 46px; padding: 0; font-size: 29px; }

@media (max-width: 720px) {
  .topbar { min-height: 70px; padding: 10px 14px; }
  .hint { display: none; }
  .back-site { font-size: 12px; padding: 9px 12px; }
  .focus-panel { left: 10px; right: 10px; bottom: 78px; justify-content: space-between; }
  .controls { bottom: 14px; }
  dialog figure { padding: 58px 10px 68px; }
  dialog img { max-width: 96vw; max-height: calc(100vh - 130px); }
}

@media (prefers-reduced-motion: reduce) {
  #canvas { transition: none !important; }
}