* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #07090b; }
body { min-height: 100dvh; overflow: hidden; }
.stage { width: 100vw; height: 100dvh; display: grid; place-items: center; background: #07090b; }
.artwork { position: relative; width: min(100vw, calc(100dvh * 1.5)); aspect-ratio: 3 / 2; }
.artwork img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.cloud-link { position: absolute; left: 53.7%; top: 41.4%; width: 33.9%; height: 17.7%; border-radius: 1.2vw; cursor: pointer; }
.cloud-link:hover, .cloud-link:focus-visible { outline: 2px solid rgba(255, 203, 93, .95); outline-offset: 3px; box-shadow: 0 0 24px rgba(255, 184, 54, .28); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-aspect-ratio: 3/2) {
  body { overflow: auto; }
  .stage { height: auto; min-height: 100dvh; align-items: start; }
  .artwork { width: 100vw; }
}