* {box-sizing:border-box}
:root {color-scheme: dark;--bg:#03150e;--gold:#ffd46e}
html,body {margin:0;padding:0;min-height:100%;background:var(--bg)}
body {min-height:100svh;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
#app {min-height:100svh;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 20%,#113b28 0,#03150e 67%)}
.artboard {position:relative;width:min(100%,calc(100dvh * 941 / 1672),600px);flex:none;line-height:0;touch-action:pan-y;user-select:none; -webkit-user-select:none}
.artboard.offer {width:min(100%,calc(100dvh * 941 / 1581),600px)}
#screenImage {display:block;width:100%;height:auto;object-fit:contain;-webkit-user-drag:none}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspot{position:absolute;display:block;padding:0;margin:0;border:2px solid transparent;border-radius:13px;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
.hotspot:hover {background:rgba(255,213,103,.09);border-color:rgba(255,216,115,.5)}
.hotspot:focus-visible{outline:3px solid white;outline-offset:0;background:rgba(255,207,82,.08)}
.hotspot.selected{background:rgba(255,215,85,.17);border-color:#ffdf88;box-shadow:inset 0 0 15px rgba(255,225,122,.16)}
.hotspot.buy{border-radius:99px}
.hotspot.buy:hover,.hotspot.buy:focus-visible{background:rgba(255,253,212,.16);border-color:#fff4bd;box-shadow:0 0 22px rgba(255,200,71,.42)}
.screen-reader-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{width:min(90vw,430px);border:1px solid #dfb65e;border-radius:17px;color:#fff1d0;background:linear-gradient(160deg,#0a3120,#03160f);box-shadow:0 16px 80px #0009;padding:0}
dialog::backdrop{background:rgba(0,0,0,.78)}
.dialog-inner{padding:26px;line-height:1.55}
.dialog-inner h2{font-size:22px;line-height:1.2;margin:0 0 15px;color:#ffe7a2}
.dialog-inner p{font-size:15px;margin:0 0 13px}
.dialog-inner .smaller{font-size:13px;color:#dad9c2}
.dialog-inner code{background:#18462b;padding:2px 4px;border-radius:3px}
.close-dialog{padding:12px 20px;background:linear-gradient(#f6d67b,#dea443);color:#1c170d;border:0;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer}
@media (max-width:600px){.artboard,.artboard.offer{max-width:100vw}.hotspot{border-radius:9px}}
@media (prefers-reduced-motion:reduce){.hotspot{transition:none}}