:root {
  color-scheme: dark;
  background: #000;
  font-family: ui-serif, "Iowan Old Style", "Baskerville", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body { min-height: 100svh; }

main {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.glow {
  position: absolute;
  z-index: -1;
  width: min(92vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 137, 0.25), rgba(255, 0, 137, 0.06) 36%, transparent 70%);
  filter: blur(28px);
}

.candy {
  width: min(82vw, 720px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 26px 55px rgba(255, 0, 128, 0.17));
}

.identity {
  position: absolute;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 22px));
  display: grid;
  justify-items: center;
  gap: 11px;
}

h1 {
  margin: 0;
  color: #fff4fa;
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1;
  text-indent: 0.19em;
  text-shadow: 0 0 32px rgba(255, 173, 217, 0.32);
}

.lock {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  filter: saturate(0.72) brightness(1.16);
}

@media (max-height: 570px) {
  .candy { width: min(66vw, 520px); }
  .identity { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: no-preference) {
  .candy { animation: arrive 1.2s cubic-bezier(.2,.8,.2,1) both; }
  .identity { animation: reveal 1.1s .22s ease both; }

  @keyframes arrive {
    from { opacity: 0; transform: scale(.97); filter: blur(10px) drop-shadow(0 26px 55px rgba(255, 0, 128, 0)); }
    to { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 26px 55px rgba(255, 0, 128, 0.17)); }
  }

  @keyframes reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}