:root {
  color-scheme: dark;
  --blue: #3b82f6;
  --cyan: #06b6d4;
  --dark: #020617;
  --text: #f8fafc;
  --muted: #9cacc3;
  --line: rgba(148, 163, 184, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--dark);
}
a { color: inherit; }
button, input { font: inherit; }
button, input:not([type="hidden"]) { min-height: 40px; }
button {
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: white;
  background: linear-gradient(100deg, var(--blue), var(--cyan));
  cursor: pointer;
}
input:not([type="hidden"]) {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(15, 23, 42, 0.8);
}

.content-shell {
  width: min(720px, calc(100% - 32px));
  margin: 48px auto;
}
.content-shell form { display: grid; gap: 16px; }
.content-shell label { display: grid; gap: 6px; }
.content-shell section, .content-shell article {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}