src/index.css

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

:root {
  --bg0:        #0c0c10;
  --bg1:        #111116;
  --bg2:        #17171e;
  --bg3:        #1e1e28;
  --bg4:        #252532;
  --border:     rgba(255,255,255,0.07);
  --border-hi:  rgba(255,255,255,0.14);
  --accent:     #4f8eff;
  --accent2:    #7c3aed;
  --accent3:    #06d6a0;
  --warn:       #f59e0b;
  --danger:     #ef4444;
  --text0:      #f0f0f8;
  --text1:      #a0a0b8;
  --text2:      #606078;
  --text3:      #383848;
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --font-ui:    'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
  --font-brand: 'Syne', sans-serif;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.7);
  --glow:       0 0 20px rgba(79,142,255,0.25);
  --glow-green: 0 0 20px rgba(6,214,160,0.25);
}

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

html, body, #root {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg0);
  color: var(--text0);
  font-family: var(--font-ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── Global inputs ─────────────────────────────────────────────────── */
input[type=range] {
  -webkit-appearance: none;
  height: 3px;
  background: var(--bg4);
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(79,142,255,0.2);
  transition: transform 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]:focus { outline: none; }

input[type=number], input[type=text], select, textarea {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text0);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 7px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input[type=number]:focus,
input[type=text]:focus,
select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,142,255,0.15); }

button { font-family: var(--font-ui); cursor: pointer; outline: none; border: none; }

* { -webkit-tap-highlight-color: transparent; }

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes shimmer  {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}