:root {
  --ink: #1C1233;
  --ink-2: #2A1F45;
  --ink-3: #3A2E52;
  --line: #4A3D66;
  --muted: #CFC6E0;
  --sun: #FFC43D;
  --sun-pale: #FFE7A3;
  --flame: #FF4D2E;
  --lagoon: #17A89B;
  --white: #FFFFFF;
  --danger: #FF7A66;
  --display: "Anybody", "Arial Black", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--ink); color: var(--white);
  font-family: var(--body); font-size: 1rem; line-height: 1.45;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.brand {
  font-family: var(--display); font-weight: 900; font-stretch: 130%;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--white); text-decoration: none;
}
.brand span { color: var(--sun); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 1rem; line-height: 1.1;
  padding: 12px 18px; border-radius: 999px; border: 3px solid var(--ink);
  background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 0 #0006;
  transition: transform .1s ease, box-shadow .1s ease, opacity .15s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #0006; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sun { background: var(--sun); }
.btn-flame { background: var(--flame); color: var(--white); }
.btn-lagoon { background: var(--lagoon); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line); box-shadow: none; }
.btn-sm { padding: 8px 12px; font-size: .9rem; }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .92rem; color: var(--muted); }
.input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--ink-2); color: var(--white);
}
.input:focus { outline: none; border-color: var(--sun); }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--white); color: var(--ink); font-weight: 600;
  padding: 12px 18px; border-radius: 12px; border: 3px solid var(--ink);
  box-shadow: 0 6px 0 #0008; z-index: 50; max-width: calc(100vw - 32px);
}

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