:root {
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: #3e5346;
  background: #edf3e9;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.sanctuary {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.5rem max(1.25rem, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 35%, #fff9ed 0%, #f3f4e9 48%, #e5eee3 100%);
}
.portrait-stage { position: relative; flex: 0 0 auto; max-width: 100%; }
.sam {
  display: block;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  border-radius: 1.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sam:focus-visible { outline: 3px solid #725c88; outline-offset: 7px; }
.sam img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 31rem);
  max-height: min(70svh, 43rem);
  object-fit: contain;
  border-radius: inherit;
  box-shadow: 0 12px 40px #42583c18;
}
.message { width: min(100%, 30rem); text-align: center; }
.cuddle { min-height: 1.4em; margin: 0 0 .4rem; font-family: system-ui, sans-serif; font-size: .8rem; letter-spacing: .03em; color: #65516f; }
.quote { font-size: clamp(1.15rem, 3.8vw, 1.5rem); line-height: 1.45; margin: 0; text-wrap: balance; }
.hearts { position: absolute; inset: 0; pointer-events: none; }
.heart { position: absolute; left: var(--x); top: 58%; color: var(--color); font-size: var(--size); opacity: 0; animation: float-heart 1.6s ease-out forwards; }
.sam.cuddling { animation: cuddle .55s ease-in-out; }
@keyframes float-heart {
  15% { opacity: .95; }
  100% { transform: translate(var(--drift), -150px) rotate(var(--tilt)); opacity: 0; }
}
@keyframes cuddle { 50% { transform: scale(.975) rotate(-.7deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
