@import url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono/index.css');

:root {
  --bg-base:      #030710;
  --bg-surface:   #060A14;
  --bg-panel:     #040810;
  --bg-deep:      #02050D;
  --border:       #0D1828;
  --border-mid:   #142038;
  --green:        #00E5A0;
  --green-dim:    rgba(0,229,160,.07);
  --green-border: rgba(0,229,160,.22);
  --text-primary: #C8DDF0;
  --text-mid:     #4A6A8A;
  --text-muted:   #253850;
  --text-deep:    #1C2E44;
  --warning:      #D4870A;
  --info:         #4A90D9;
  --danger:       #E05A4A;
  --font-sans:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  12px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; cursor: pointer; }

button { cursor: pointer; font-family: var(--font-sans); }

.mono { font-family: var(--font-mono); }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-child {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-child.revealed { opacity: 1; transform: translateY(0); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0}  }
@keyframes draw   { to { stroke-dashoffset: 0; }         }