/* =============================================================================
   BASE

   Tokens, type and the handful of primitives both pages use.
   ========================================================================== */

:root {
  --bg: #08080a;
  --panel: #0e0e12;
  --panel-2: #15151b;
  --raised: #1c1c23;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #f3f3f5;
  --muted: #8b8f98;
  --dim: #5d616a;

  --up: #22d07a;
  --down: #ff4d5e;

  /* The landing palette: the sun, the neon and the night behind them. */
  --yellow: #fff9cb;
  --pink: #ffb0c4;
  --hot: #ff2e88;
  --cyan: #00e5ff;
  --gold: #ffb020;
  --violet: #2a1140;
  --violet-2: #140a24;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: Barlow, "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: Anton, Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;

  --r: 10px;
  --pad: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 0.95;
}

h1 { font-size: clamp(40px, 8vw, 96px); }
h2 { font-size: clamp(24px, 3.4vw, 38px); }
h3 { font-size: 17px; letter-spacing: 0.06em; }

p { margin: 0 0 1em; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.up { color: var(--up); }
.down { color: var(--down); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { width: min(1280px, 100% - 32px); margin-inline: auto; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  white-space: nowrap;
}

.tag.era { color: #0a0a0b; border-color: transparent; font-weight: 700; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

button, .btn {
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button:hover, .btn:hover { background: #24242c; border-color: rgba(255, 255, 255, 0.3); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary, button.primary { background: var(--hot); border-color: var(--hot); color: #0a0a0b; font-weight: 700; }
.btn.primary:hover, button.primary:hover { background: #ff4f9c; border-color: #ff4f9c; }
.btn.long, button.long { background: var(--up); border-color: var(--up); color: #04140b; font-weight: 700; }
.btn.short, button.short { background: var(--down); border-color: var(--down); color: #170406; font-weight: 700; }
button.ghost { background: transparent; }

input, select {
  font: inherit;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 10px;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid rgba(255, 46, 136, 0.55); outline-offset: -1px; }

.plate { display: block; border-radius: 6px; }

.stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--hot), var(--gold) 35%, var(--cyan) 70%, var(--up));
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232329; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }