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

:root {
  /* Backgrounds */
  --bg-0: #070809;
  --bg-1: #0d1014;
  --bg-2: #131820;
  --bg-3: #1a2030;

  /* Borders */
  --border: rgba(255,255,255,0.07);
  --border-active: rgba(0,220,180,0.3);
  --border-hover: rgba(255,255,255,0.14);

  /* Accent */
  --cyan: #00DCB4;
  --cyan-dim: rgba(0,220,180,0.12);
  --cyan-glow: 0 0 12px rgba(0,220,180,0.3);
  --amber: #F5A623;
  --amber-dim: rgba(245,166,35,0.12);
  --red: #FF4757;
  --red-dim: rgba(255,71,87,0.12);
  --blue: #4A9EFF;
  --blue-dim: rgba(74,158,255,0.12);
  --purple: #A855F7;

  /* Text */
  --text-0: rgba(255,255,255,0.95);
  --text-1: rgba(255,255,255,0.65);
  --text-2: rgba(255,255,255,0.38);
  --text-3: rgba(255,255,255,0.18);

  /* Typography */
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'IBM Plex Mono', monospace;

  /* Spacing */
  --r: 6px;
  --panel-pad: 18px;
}

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

body {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}