* { box-sizing: border-box; }
      html { background: #ffffff; color: #29251f; }
      body { margin: 0; }
      main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 24px; }
      h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 5.5vw, 4.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.035em; text-align: center; text-wrap: balance; }

h1 { color: #201b19; }
.name-word { display: inline-block; white-space: nowrap; }
.letter-slot, .letter { display: inline-block; }
.letter { transform-origin: 50% 75%; }
.celebration { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; perspective: 700px; }
.celebration span { position: absolute; top: 0; }
.confetti { width: 7px; height: 11px; border-radius: 1px; }
.streamer { width: 5px; height: 65px; border-radius: 60% 15% 60% 15%; background-image: linear-gradient(100deg, #ffffff77, transparent 45%, #00000022); }
@media (prefers-reduced-motion: reduce) { .celebration { display: none; } }

.trolley-detail { position: absolute; top: max(calc(100svh - 140px), calc(50svh + 110px)); left: 50%; transform: translateX(-50%); padding-bottom: 20px; }
.trolley-toggle { display: block; border: 0; padding: 0; background: #fff; cursor: pointer; border-radius: 8px; }
.trolley-toggle img { display: block; width: 112px; height: 112px; image-rendering: pixelated; }
.trolley-toggle:focus-visible { outline: 2px solid #9d1027; outline-offset: 4px; }