:root {
  --design-width: 941;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #fff5e4;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.7), transparent 460px),
    linear-gradient(180deg, #fff8e9 0%, #fff3df 100%);
}

.poster {
  position: relative;
  width: min(100vw, 941px);
  margin: 0 auto;
  box-shadow: 0 0 55px rgba(74, 45, 20, 0.08);
}

.poster-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.hotspot,
.anchor,
.anchor {
  position: absolute;
}

.hotspot {
  z-index: 5;
  display: block;
  border-radius: 10px;
}

.hotspot:focus-visible {
  outline: 3px solid rgba(255, 81, 18, 0.75);
  outline-offset: 3px;
}

.login {
  left: 86.6%;
  top: 2.05%;
  width: 9.5%;
  height: 2.7%;
}

.hero-start {
  left: 30%;
  top: 17.5%;
  width: 19.9%;
  height: 2.85%;
}

.look {
  left: 52.5%;
  top: 17.5%;
  width: 17.1%;
  height: 2.85%;
}

.cta-start {
  left: 39.2%;
  top: 90.9%;
  width: 20.7%;
  height: 2.9%;
}

.anchor {
  left: 0;
  top: 50%;
  width: 1px;
  height: 1px;
}

@media (max-width: 640px) {
  .poster {
    width: 100vw;
  }
}