/* ──────────────────────────────────────────────────────────────────────────────
   base.css — Reset, CSS custom properties, shared utilities
   ────────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@300;400;700&display=swap');

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

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100dvh;
  width: 100%;
  position: relative;
}

/* ── Loading / Error states ── */
.loading, .error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}

.error p { text-align: center; max-width: 28ch; line-height: 1.6; }
.error strong { color: rgba(255,255,255,0.8); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }