:root {
  --ink: #163F52;
  --ink-soft: #3D5A66;
  --pearl: #F3F2EE;
  --glass: rgba(255, 252, 248, .38);
  --blue: #3D8FBE;
  --green: #5EA783;
  --orange: #D77D42;
  --violet: #8A6EAE;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--pearl);
  color: var(--ink);
  font-family: Outfit, "Avenir Next", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(28px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.field, .field span {
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.field {
  background:
    radial-gradient(120% 90% at 50% 0%, #FBFAF6 0%, var(--pearl) 42%, #E4EBE7 100%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  animation: drift 18s ease-in-out infinite;
}

.orb-a { width: 78vw; height: 78vw; max-width: 520px; max-height: 520px; left: -22%; top: -6%; background: #9ED4B6; opacity: .55; }
.orb-b { width: 70vw; height: 70vw; max-width: 460px; max-height: 460px; right: -24%; top: -12%; background: #E8B089; opacity: .48; animation-delay: -6s; }
.orb-c { width: 86vw; height: 86vw; max-width: 560px; max-height: 560px; right: -18%; bottom: -22%; background: #8EC6E2; opacity: .50; animation-delay: -11s; }
.orb-d { width: 62vw; height: 62vw; max-width: 400px; max-height: 400px; left: -8%; bottom: -4%; background: #C4B0DC; opacity: .46; animation-delay: -3s; }

.sheen {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 210deg at 48% 42%,
    transparent 0deg,
    rgba(61, 143, 190, .28) 48deg,
    rgba(94, 167, 131, .24) 110deg,
    rgba(215, 125, 66, .22) 168deg,
    rgba(138, 110, 174, .22) 230deg,
    transparent 300deg);
  opacity: .85;
  mix-blend-mode: multiply;
  animation: sheen 26s linear infinite;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 2fr;
  min-height: 0;
}

header {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

.plate {
  align-self: center;
  width: 100%;
  background: var(--glass);
  border: 1.5px solid rgba(255, 255, 255, .78);
  border-radius: 28px;
  padding: 10px;
  box-shadow:
    0 18px 48px rgba(28, 54, 65, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 0 0 1px rgba(61, 143, 190, .10);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

header p {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

h1 {
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}

a.choice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 18px 18px 18px 22px;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.plate.single a.choice { min-height: 108px; }

a.choice + a.choice { margin-top: 6px; }

a.choice:hover,
a.choice:focus-visible {
  background: rgba(255, 255, 255, .46);
}

a.choice:active { transform: scale(.985); }

a.choice:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

a.choice strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}

a.choice span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
}

a.choice svg {
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  opacity: .45;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 4%) scale(1.08); }
}

@keyframes sheen {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .sheen { animation: none; }
  a.choice { transition: none; }
}