:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
  background: #090807;
  color: #f6eedc;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 28px 18px;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 18%, #60431d66, transparent 62%),
    radial-gradient(ellipse at 9% 100%, #5f3c153d, transparent 55%),
    #090807;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

body::before {
  background: repeating-linear-gradient(127deg, transparent 0 74px, #e9b95b10 75px 76px, transparent 77px 140px);
  mask-image: radial-gradient(ellipse, transparent 12%, black);
}

body::after {
  background: conic-gradient(from 210deg at 50% 65%, transparent 0deg, #d4a55224 42deg, transparent 80deg, transparent 360deg);
  animation: ambient-light 11s ease-in-out infinite alternate;
}

@keyframes ambient-light {
  from { opacity: .35; transform: translateX(-7%) scale(1.08); }
  to { opacity: .95; transform: translateX(7%) scale(1.2); }
}

.card {
  width: min(100%, 470px);
  padding: clamp(26px, 6vw, 48px);
  border: 1px solid #b88a4560;
  border-radius: 24px;
  background: linear-gradient(150deg, #211b13f5, #0e0c0bf7 68%);
  box-shadow: 0 30px 90px #0009, 0 0 50px #b781261a, inset 0 1px #ffe0a228;
}

.brand-line {
  width: 60px;
  height: 3px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6c4318, #ffdb8a, #6c4318);
  box-shadow: 0 0 18px #f6b85383;
}

h1 {
  margin: 0 0 28px;
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1.15;
  text-align: center;
  color: #f5c972;
  background: linear-gradient(180deg, #fff1ba 9%, #e8b754 48%, #b7802d 80%, #ffe2a4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 16px #d39c3c36);
}

p { color: #cdbb9a; font-size: 14px; line-height: 1.6; }
label { display: block; margin: 17px 0 8px; font-size: 14px; }
input, button { width: 100%; padding: 13px 15px; border-radius: 10px; font: inherit; }

input {
  color: #fff5dc;
  background: #0f0d0b;
  border: 1px solid #755b366f;
}

input:focus-visible, button:focus-visible {
  outline: 2px solid #e8bc67;
  outline-offset: 3px;
}

button {
  margin-top: 24px;
  border: 1px solid #ffe3a290;
  color: #211407;
  background: linear-gradient(115deg, #c18c36, #ffe4a4 50%, #d2a04c);
  font-weight: 800;
  cursor: pointer;
}

button:enabled:hover { filter: brightness(1.1); }
button:disabled { opacity: .55; cursor: default; }
#status { color: #f1c884; overflow-wrap: anywhere; }
#status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

#setup { display: none; }

.falling-leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.card {
  position: relative;
  z-index: 1;
}

.falling-leaves span {
  position: absolute;
  top: -36px;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * .62);
  border-radius: 0 85% 0 85%;
  background:
    linear-gradient(30deg, transparent 47%, #71431caa 48% 51%, transparent 52%),
    linear-gradient(145deg, #ffe8a9, #c28c3f 55%, #804718);
  box-shadow: 0 0 9px #e6ad4755;
  animation: gold-leaf-fall var(--duration) var(--delay) linear infinite;
  will-change: transform;
}

@keyframes gold-leaf-fall {
  0% { transform: translate3d(0, 0, 0) rotate(10deg); opacity: 0; }
  12% { opacity: .82; }
  35% { transform: translate3d(var(--drift), 36vh, 0) rotate(135deg); }
  70% { transform: translate3d(calc(var(--drift) * -.4), 72vh, 0) rotate(255deg); }
  86% { opacity: .72; }
  100% { transform: translate3d(var(--drift), calc(100vh + 72px), 0) rotate(370deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .falling-leaves { display: none; }
}