/* Shared base + atomic components (buttons, pills, inputs, keys, tables). Built from the tokens only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--mag); color: var(--mag-ink); }

:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; border-radius: var(--r-sm); }

[hidden] { display: none !important; }           /* .btn, .grid... must never win over the hidden attribute */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--mag); color: var(--mag-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: var(--s-4); }

.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }
.mag { color: var(--mag); }

/* ── buttons ─────────────────────────────────────────────────────────────────────────── */
.btn {
  --bg: var(--surface-2); --fg: var(--ink); --bd: var(--line-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.01em; white-space: nowrap;
  transition: transform var(--d-med) var(--ease-spring), background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
  will-change: transform;
}
.btn:hover { transform: var(--lift); border-color: var(--ink-3); }
.btn:active { transform: var(--press); transition-duration: 80ms; }
.btn--primary { --bg: var(--mag); --fg: var(--mag-ink); --bd: var(--mag); }
.btn--primary:hover { --bg: #f43bff; border-color: #f43bff; }
.btn--ghost { --bg: transparent; }
.btn--danger { --bg: var(--bad-soft); --fg: var(--bad); --bd: rgba(255, 90, 95, 0.35); }
.btn--sm { min-height: 34px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.btn--icon { width: 36px; min-height: 36px; padding: 0; border-radius: var(--r-md); }
.btn .arrow { transition: transform var(--d-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── pills / badges ──────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap;
}
.pill--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill--bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill--mag { background: var(--mag-soft); color: var(--mag); border-color: transparent; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot--live { animation: live 1.8s var(--ease-out) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }

/* ── key caps ────────────────────────────────────────────────────────────────────────── */
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
}

/* ── inputs ──────────────────────────────────────────────────────────────────────────── */
.input {
  width: 100%; min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--mag); background: var(--surface-3); }
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; letter-spacing: 0.02em; }

/* ── code / console ──────────────────────────────────────────────────────────────────── */
.code {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--t-sm);
}
.code .prompt { color: var(--mag); margin-right: 8px; user-select: none; }

/* reveal on scroll (motion.js adds .is-in) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
.no-js [data-reveal] { opacity: 1; transform: none; }