:root{
  --matrix-bg:#000; --matrix-fg:rgba(0,255,140,.15); --matrix-glow:rgba(0,255,140,.35);
  --ink:#e6ffee;
}
html,body{margin:0;padding:0}
body.matrix-bg{background:var(--matrix-bg);color:var(--ink);min-height:100vh;overflow-x:hidden}
.matrix-overlay{
  position:fixed;inset:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse at top, var(--matrix-glow) 0%, transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 28px, var(--matrix-fg) 29px 29px);
  opacity:.4;filter:saturate(1.1) blur(.2px);animation:scan 3s linear infinite
}
@keyframes scan{0%{background-position-y:0}100%{background-position-y:60px}}
/* sensible defaults */
img,video{max-width:100%;height:auto}
.container{max-width:1100px;margin:0 auto;padding:16px}
a{color:#7fffd4}
a:hover{text-decoration:underline}


/* Matrix falling letters canvas layering */
#matrix-canvas.matrix-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
.matrix-overlay{ z-index: 1; } /* sits above canvas */
header, .container, footer, nav, main, .content, .wrapper { position: relative; z-index: 2; }


/* Global typography baseline */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45;font-size:16px}
h1,h2,h3{line-height:1.2;margin:0.5em 0 0.3em}
p{margin:0 0 0.8em}