:root {
  --bg:        #0a0a0b;
  --bg2:       #0f0f10;
  --surface:   #141416;
  --surface2:  #1c1c1f;
  --surface3:  #242428;
  --border:    #2a2a2e;
  --border-hi: #3d1a20;
  --border-red:#5a1e28;
  --red:       #e02840;
  --red-hi:    #ff3d55;
  --red-dim:   rgba(224,40,64,0.13);
  --red-glow:  rgba(224,40,64,0.28);
  --red-deep:  #8b0e1a;
  --ash:       #b0a8a8;
  --ash2:      #6e6868;
  --ash3:      #3a3535;
  --green:     #2ea86a;
  --amber:     #d4820a;
  --t1: #e8e2e2;
  --t2: #8a8080;
  --t3: #3e3838;
  --code: #c4b8b8;
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Inter', system-ui, sans-serif;
  --display: 'Orbitron', sans-serif;
  --r: 8px; --r-sm: 5px;
  --purple:      #7c3aed;
  --purple-hi:   #9d5cf0;
  --purple-dim:  rgba(124,58,237,0.15);
  --purple-glow: rgba(124,58,237,0.35);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  line-height: 1.5;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.09) 2px,rgba(0,0,0,0.09) 4px);
  pointer-events:none;
  z-index:9999;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background:
    linear-gradient(var(--red) 2px, transparent 2px) 0 0 / 28px 28px no-repeat,
    linear-gradient(90deg, var(--red) 2px, transparent 2px) 0 0 / 28px 28px no-repeat,
    linear-gradient(var(--red) 2px, transparent 2px) 100% 0 / 28px 28px no-repeat,
    linear-gradient(90deg, var(--red) 2px, transparent 2px) calc(100% - 26px) 0 / 28px 28px no-repeat,
    linear-gradient(var(--red) 2px, transparent 2px) 0 100% / 28px 28px no-repeat,
    linear-gradient(90deg, var(--red) 2px, transparent 2px) 0 100% / 28px 28px no-repeat,
    linear-gradient(var(--red) 2px, transparent 2px) 100% 100% / 28px 28px no-repeat,
    linear-gradient(90deg, var(--red) 2px, transparent 2px) calc(100% - 26px) 100% / 28px 28px no-repeat;
  pointer-events:none;
  z-index:9998;
  opacity:0.35;
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-red); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--red-deep); }

/* GLITCH LOGO */