* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: -webkit-fill-available;
  background: #000;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  touch-action: manipulation;
}
#card-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
#card-stage {
  position: relative;
  --stage-h: min(100dvh, 1280px);
  height: var(--stage-h);
  height: min(-webkit-fill-available, 1280px);
  width: min(720px, calc(var(--stage-h) * 1080 / 1920));
  aspect-ratio: 1080 / 1920;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
#card-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.hotspot-circle { border-radius: 50%; }
.hotspot:focus-visible { outline: 2px solid #4da3ff; outline-offset: 1px; }