body {
  min-height: 100svh;
  color: #f5f7eb;
  background: #28503b;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 85% 15%, #90ad6b88, transparent 65%),
    radial-gradient(ellipse at 5% 90%, #1a6d4b99, transparent 65%),
    linear-gradient(130deg, #102d23 0%, #2d5d40 40%, #668751 75%, #98aa73 100%);
  background-size: 160% 160%;
  animation: green-drift 36s ease-in-out infinite alternate;
  filter: grayscale(0) brightness(1);
  transition: filter .6s ease;
}

body.trash-screen:not(.question-screen)::before {
  filter: grayscale(.85) brightness(.58);
}

.questions-layout {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 28px;
}

.questions {
  width: min(100%, 880px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6.5vh, 66px);
  text-align: center;
}

.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.question label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.45px;
  text-wrap: balance;
  text-shadow: 0 1px 12px #163c2020;
}

.question input {
  color-scheme: dark;
  width: 224px;
  min-height: 53px;
  padding: 12px 17px;
  border: 1px solid #ebf1da66;
  border-radius: 7px;
  background: #153e2524;
  color: #f6f7ec;
  font-family: LocalSans, system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.question input:hover { background: #153e2540; }
.question input:focus-visible {
  outline: 2px solid #e4ebcb;
  outline-offset: 4px;
  background: #153e2540;
}
.question input[aria-invalid="true"] {
  border-color: #ffcfb9;
  box-shadow: 0 0 0 1px #ffcfb955;
}
.question input:disabled { opacity: .6; }
.question input::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }

@keyframes green-drift {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}

@media (max-width: 600px) {
  .questions-layout { padding: 44px 24px; }
  .questions { gap: 38px; }
  .question { gap: 18px; }
  .question label { max-width: 390px; font-size: 24px; }
  .question input { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transition: none; }
  .question input { transition: none; }
}