:root {
  color-scheme: dark;
  --ink: #f9f4f0;
  --muted: #b8aeb6;
  --background: #17131d;
  --panel: #241d2b;
  --panel-light: #2d2436;
  --accent: #e77a91;
  --accent-strong: #f19bad;
  --line: rgba(255, 255, 255, .12);
  font-family: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 15% 0%, #3b2638 0, transparent 36rem), var(--background);
}

.shell {
  width: min(100% - 32px, 680px);
  margin: 0 auto;
  padding: 56px 0 72px;
}

.intro { margin-bottom: 28px; }
.eyebrow { margin: 0 0 12px; color: var(--accent-strong); font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(42px, 10vw, 72px); font-weight: 400; line-height: .98; }
.lede { margin: 18px 0 0; color: var(--muted); font: 16px/1.5 Arial, sans-serif; }

.status, .form { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 29, 43, .88); box-shadow: 0 20px 70px rgba(0, 0, 0, .2); }
.status.error { color: #ffb2b2; }
.status.success { color: #c5efcf; }

.form { display: grid; gap: 24px; }
.fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 2px; font-size: 24px; }
.hint { margin: -4px 0 2px; color: var(--muted); font: 13px/1.4 Arial, sans-serif; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option label { display: block; min-height: 52px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-light); cursor: pointer; font: 14px/1.25 Arial, sans-serif; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.option label:hover { transform: translateY(-1px); border-color: rgba(241, 155, 173, .65); }
.option input:checked + label { border-color: var(--accent); background: rgba(231, 122, 145, .2); }

.submit { border: 0; border-radius: 12px; padding: 17px 20px; color: white; background: var(--accent); cursor: pointer; font: 700 15px Arial, sans-serif; }
.submit:disabled { cursor: wait; opacity: .6; }

@media (max-width: 480px) {
  .shell { width: min(100% - 24px, 680px); padding-top: 36px; }
  .status, .form { padding: 18px; }
}