* { box-sizing: border-box; }
html { background: #101010; color-scheme: dark; }
body { margin: 0; font-family: Arial, sans-serif; }
.landing { position: relative; width: 100%; max-width: 720px; margin-inline: auto; background: #000; }
.artwork { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; display: block; left: calc(var(--x) / 640 * 100%); top: calc(var(--y) / 6113 * 100%); width: calc(var(--w) / 640 * 100%); height: calc(var(--h) / 6113 * 100%); border-radius: 999px; -webkit-tap-highlight-color: #ffffff30; touch-action: manipulation; }
.hotspot:hover { background: #ffffff16; }
.hotspot:active { background: #0000001a; }
.hotspot:focus-visible { outline: 3px solid #ffe16b; outline-offset: 4px; background: #ffffff20; }
.small { border-radius: 4px; }
.social { border-radius: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media print { html, body { background: white; } .landing { max-width: 100%; } }