*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; color-scheme: light; }
body { margin: 0; padding: 0; font-family: system-ui, sans-serif; }
main { margin: 0; padding: 0; width: 100%; outline: none; }
.artboard { position: relative; width: 100%; isolation: isolate; }
.artwork-source { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; }
.artboard-section { position: absolute; left: 0; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.artboard-section img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
.hotspot { position: absolute; z-index: 2; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hotspot:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
.hotspot[aria-current="page"] { cursor: pointer; }
.hotspot::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  [data-motion="allowed"] .hotspot::after { transition: backdrop-filter 150ms ease, box-shadow 150ms ease; }
  [data-motion="allowed"] .hotspot.is-hovered::after { backdrop-filter: brightness(1.08); box-shadow: inset 0 0 0 1px currentColor; }
  [data-motion="allowed"][data-scroll-direction] .hotspot[data-in-viewport="true"]::after { animation: enter-interaction 320ms ease-out; }
  @keyframes enter-interaction { from { backdrop-filter: brightness(1.025); } to { backdrop-filter: brightness(1); } }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: 0; left: 8px; transform: translateY(-150%); padding: 12px 18px; color: CanvasText; background: Canvas; border: 2px solid; font: inherit; }
.skip-link:focus { transform: translateY(0); }
.settings-link { left: 180px; }
dialog { max-width: min(92vw, 520px); max-height: 85dvh; overflow: auto; padding: 28px; color: CanvasText; background: Canvas; border: 1px solid GrayText; border-radius: 10px; }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog h2 { margin: 0 0 16px; font-size: 1.25rem; }
dialog p { line-height: 1.65; }
dialog button, dialog a { min-height: 44px; padding: 10px 18px; font: inherit; }
dialog nav { display: grid; gap: 8px; }
dialog nav a { color: LinkText; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dialog-error { padding: 1rem; }
.reference-only { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}