/* NULLSECT// — cyberpunk-brutalism tokens */
:root {
  /* core palette — deep dark cyberpunk (SIGNAL mode, default) */
  --bg:        #050507;
  --bg-2:      #0d0d11;
  --bg-3:      #15151b;
  --ink:       #ededea;
  --ink-dim:   #a7a79d;
  --ink-mute:  #5c5c55;
  --line:      #ededea;

  /* neon accents */
  --lime:      #caff33;
  --lime-2:    #9fd61e;
  --magenta:   #ff2bd6;
  --magenta-2: #c41fa9;
  --cyan:      #22e6ff;
  --amber:     #ffb020;
  --red:       #ff4f4f;

  /* grid/hex texture */
  --grid-tint: rgba(202,255,51,0.035);
  --bg-glow-a: rgba(255,43,214,0.06);
  --bg-glow-b: rgba(202,255,51,0.05);

  /* scanline overlay opacity (0 = off) */
  --scan-opacity: 0;

  /* type */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* tweakable */
  --border-w: 3px;
  --shadow-d: 8px;
  --radius:   0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 10% 0%, var(--bg-glow-a), transparent 55%),
    radial-gradient(ellipse at 90% 100%, var(--bg-glow-b), transparent 55%);
  background-attachment: fixed, fixed;
}

/* global CRT scanline overlay — driven by --scan-opacity token */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.55) 2px,
    rgba(0,0,0,0.55) 3px
  );
  opacity: var(--scan-opacity, 0);
  mix-blend-mode: multiply;
}
/* type scale */
.display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}
.mono { font-family: var(--f-mono); }
.caps { text-transform: uppercase; letter-spacing: 0.08em; }
.dim  { color: var(--ink-dim); }
.mute { color: var(--ink-mute); }

/* surfaces */
.panel {
  background: var(--bg-2);
  border: var(--border-w) solid var(--line);
  box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--line);
  border-radius: var(--radius);
}
.panel-lime   { border-color: var(--lime);    box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--lime); }
.panel-mag    { border-color: var(--magenta); box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--magenta); }
.panel-cyan   { border-color: var(--cyan);    box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--cyan); }
.panel-amber  { border-color: var(--amber);   box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--amber); }

/* buttons */
.btn {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  border: var(--border-w) solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--line);
  transition: transform 80ms ease, box-shadow 80ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--shadow-d) + 2px) calc(var(--shadow-d) + 2px) 0 0 var(--line); }
.btn:active { transform: translate(var(--shadow-d), var(--shadow-d)); box-shadow: 0 0 0 0 var(--line); }

.btn-primary { background: var(--lime); color: #0a0a0b; border-color: var(--lime); box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--line); }
.btn-primary:hover { box-shadow: calc(var(--shadow-d) + 2px) calc(var(--shadow-d) + 2px) 0 0 var(--line); }

.btn-danger  { background: var(--magenta); color: #0a0a0b; border-color: var(--magenta); box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--line); }
.btn-ghost   { background: transparent; }

/* chips / tags */
.chip {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chip-lime  { background: var(--lime);    color: #0a0a0b; border-color: var(--lime); }
.chip-mag   { background: var(--magenta); color: #0a0a0b; border-color: var(--magenta); }
.chip-cyan  { background: var(--cyan);    color: #0a0a0b; border-color: var(--cyan); }
.chip-amber { background: var(--amber);   color: #0a0a0b; border-color: var(--amber); }
.chip-ghost { background: transparent; }

/* inputs */
.input {
  font-family: var(--f-mono);
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  border: var(--border-w) solid var(--line);
  padding: 12px 14px;
  outline: none;
  width: 100%;
  box-shadow: inset 0 0 0 0 transparent;
  border-radius: var(--radius);
}
.input:focus { border-color: var(--lime); box-shadow: var(--shadow-d) var(--shadow-d) 0 0 var(--lime); }
.input::placeholder { color: var(--ink-mute); }

/* hex-dump background block */
.hexdump {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  color: #44443e;
  white-space: pre;
  overflow: hidden;
  user-select: none;
}

/* scanline overlay (optional) */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.25) 2px,
    rgba(0,0,0,0.25) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.4;
}

/* terminal cursor */
.cursor::after {
  content: '_';
  display: inline-block;
  color: var(--lime);
  animation: blink 1s steps(2, end) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* shared layout utils */
.container { max-width: 1280px; margin: 0 auto; padding: 40px 32px; }
.stack > * + * { margin-top: var(--s, 16px); }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* section header */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: var(--border-w) solid var(--line);
}
.sec-head .idx {
  font-family: var(--f-mono);
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
}
.sec-head .title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.sec-head .meta {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 12px;
}

/* marching ants border */
@keyframes march {
  to { background-position: 32px 0, -32px 0, 0 -32px, 0 32px; }
}
.ants {
  background-image:
    linear-gradient(90deg, var(--lime) 50%, transparent 0) repeat-x,
    linear-gradient(90deg, var(--lime) 50%, transparent 0) repeat-x,
    linear-gradient(0deg, var(--lime) 50%, transparent 0) repeat-y,
    linear-gradient(0deg, var(--lime) 50%, transparent 0) repeat-y;
  background-size: 16px 3px, 16px 3px, 3px 16px, 3px 16px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: march 0.8s linear infinite;
}

/* blink */
.blink { animation: blink 1.1s steps(2, end) infinite; }

/* hard rules */
hr.rule { border: 0; border-top: var(--border-w) solid var(--line); margin: 24px 0; }
hr.rule-lime { border-top-color: var(--lime); }
hr.rule-mag  { border-top-color: var(--magenta); }