/* Shared ground for every page: the palette, the reset, and the type.
   Kept separate from the per-page files so the landing page's atmospherics
   cannot drift away from the panel's. */

:root {
  --void: #07070b;
  --ink: #0d0d14;
  --panel: #131320;
  --line: #23233a;
  --text: #e8e8f2;
  --dim: #9a9ab4;
  --faint: #5a5a75;

  --neon: #b64bff;
  --neon-soft: #d08bff;
  --neon-deep: #7b1fd4;

  --good: #34d67f;
  --bad: #ff5470;
  --warn: #ffb03d;
  --gold: #ffd166;

  --radius: 14px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

a { color: var(--neon-soft); }

/* Focus is never removed, only restyled. Taking it away makes the whole site
   unusable by keyboard, and it is the single most common accessibility bug on
   pages that care about how they look. */
:focus-visible {
  outline: 2px solid var(--neon-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
button:hover:not(:disabled) { border-color: var(--neon-deep); background: #1a1a2c; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

input, select {
  font: inherit;
  color: var(--text);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  width: 100%;
}
input:focus { border-color: var(--neon-deep); }

.hidden { display: none !important; }

/* The `hidden` ATTRIBUTE has to win, and by default it does not.
   ---------------------------------------------------------------------------
   The browser's own stylesheet says `[hidden] { display: none }`, but that is a
   UA rule with the lowest possible weight - so the moment a class rule says
   `display: grid` or `display: flex`, the element stays on screen with its
   hidden attribute set and nobody any the wiser.

   That is exactly what happened here: five elements were marked hidden and all
   five were still being painted, including a full-screen modal overlay that sat
   invisible over the whole page swallowing clicks. Scripted tests never noticed,
   because element.click() dispatches straight at the node and does not care
   what is on top of it. A person with a mouse would have noticed immediately.

   One line, applied to everything, so it cannot be got wrong per component. */
[hidden] { display: none !important; }

.err {
  color: var(--bad);
  font-size: 0.9rem;
  min-height: 1.2em;
}
.ok { color: var(--good); }

/* Anyone who has asked their system to stop moving things gets a still page.
   The atmosphere is decoration; the content is not. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}