:root { color-scheme: dark; }
.gate-pending > :is(header, main, footer, #exit) { visibility: hidden; }
body:has(dialog[open]) { overflow: hidden; }
dialog {
  --orba-line: rgba(243,229,217,.5);
  width: min(30rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 2rem; border: 1px solid var(--orba-line); border-radius: 14px;
  background: var(--orba-surface); color: var(--orba-text);
  font: 500 1rem/1.5 "Satoshi", -apple-system, sans-serif;
}
dialog::backdrop { background: rgba(5,3,8,.92); }
dialog h2 { margin: 0.5rem 0 0.75rem; font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
dialog p { margin: 0 0 1.5rem; color: var(--orba-text-secondary); }
dialog label, dialog legend { font-weight: 700; }
dialog input[type=email] {
  display: block; width: 100%; margin: 0.5rem 0 1.5rem; padding: 0.75rem;
  border: 1px solid var(--orba-line); border-radius: 7px;
  background: var(--orba-bg); color: var(--orba-text); font: inherit;
}
dialog fieldset { padding: 0; margin: 0 0 1.5rem; border: 0; min-width: 0; }
dialog legend { margin-bottom: 0.75rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem; border: 1px solid var(--orba-line); border-radius: 7px;
  cursor: pointer; font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.choices label:has(:checked) { border-color: var(--orba-accent); background: rgba(255,106,42,.12); }
.choices input { margin: 0; accent-color: var(--orba-accent); }
dialog button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem;
  padding: 0.75rem 1rem; border: 0; border-radius: 7px; font: inherit; font-weight: 700;
  cursor: pointer;
}
dialog button.primary { background: var(--orba-accent); color: var(--orba-bg); }
dialog button.primary:disabled { opacity: .7; cursor: wait; }
:is(button, a, input, .choices label) { touch-action: manipulation; }
:is(button, a, input):focus-visible { outline: 2px solid var(--orba-cool); outline-offset: 4px; }
.choices label:has(:focus-visible) { outline: 2px solid var(--orba-cool); outline-offset: 3px; }
header :is(a, button), #exit { min-height: 2.75rem; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
  dialog { padding: 1.5rem; margin-block: max(1rem, env(safe-area-inset-top)); }
  dialog h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { header, nav a, #fs { transition: none; } }