:root {
  color-scheme: light;
  --paper: #f5f3ee;
  --ink: #22211f;
  --muted: #76736d;
  --line: #dedbd3;
  --accent: #e85d3f;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #e9e5db;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; }
.app-shell {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.topbar, .viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -.04em; }
h1 { font-size: clamp(25px, 7vw, 34px); }
h2 { font-size: 20px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 23px; line-height: 1; cursor: pointer; }
.icon-button:active { transform: scale(.94); }

.viewer-section {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hint { color: var(--muted); font-size: 11px; white-space: nowrap; }
.map-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e9e5db;
  box-shadow: none;
  touch-action: none;
  cursor: grab;
}
.map-frame.dragging { cursor: grabbing; }
.map-canvas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: center; will-change: transform; }
.map-canvas img { display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.zoom-controls { position: absolute; right: 12px; top: 12px; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: rgba(250, 249, 246, .94); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.zoom-controls button { width: 37px; height: 37px; border: 0; background: transparent; font-size: 23px; cursor: pointer; }
.zoom-controls button + button { border-top: 1px solid var(--line); }
.map-tip { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 0; background: rgba(34,33,31,.72); color: white; font-size: 10px; opacity: .85; pointer-events: none; }

.image-tabs { position: fixed; z-index: 10; right: 12px; bottom: 0; left: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; border: 1px solid rgba(222,219,211,.9); border-radius: 14px; overflow: hidden; background: rgba(235,232,225,.92); box-shadow: 0 5px 18px rgba(40,35,25,.18); backdrop-filter: blur(10px); }
.tab { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.tab-icon { font-size: 17px; line-height: 1; }
.tab.active { background: #fffdf9; color: var(--ink); box-shadow: 0 2px 8px rgba(40,35,25,.08); font-weight: 650; }
.tab:focus-visible, .icon-button:focus-visible, .zoom-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 600px) {
  .image-tabs { right: auto; left: 50%; width: min(calc(100% - 24px), 760px); transform: translateX(-50%); }
}