:root {
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    repeating-linear-gradient(160deg, rgba(90,66,39,.035) 0 1px, transparent 1px 10px),
    #efe5d3;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.poster-shell {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.poster {
  width: min(100%, 928px);
  position: relative;
  line-height: 0;
  user-select: none;
}

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

.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Keep hover visually neutral so the clickable overlay never changes the artwork. */
.hotspot:hover::after {
  background: transparent;
  box-shadow: none;
}

/* Keyboard-only focus stays subtle and does not appear on mouse hover. */
.hotspot:focus-visible {
  outline: 2px dashed rgba(17,17,17,.55);
  outline-offset: 3px;
}

.anchor {
  position: absolute;
  left: 0;
  top: var(--ay);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  z-index: 50;
  padding: 11px 16px;
  background: #f7eedf;
  border: 3px solid #111;
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(48,37,25,.2);
  color: #111;
  font: 700 14px/1.2 system-ui, sans-serif;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 929px) {
  body { padding: 0 0 18px; }
  .poster { margin-top: 0; }
}

@media (max-width: 620px) {
  .hotspot:hover::after { box-shadow: none; background: transparent; }
  .toast { bottom: 12px; font-size: 13px; }
}