:root{
  --bg:#020202;
  --matrix-green:#00ff66;
  --muted:#9aa0a6;
  --card-bg:rgba(0,0,0,0.55);
  --glass:rgba(255,255,255,0.03);
  --accent:#00ffd1;
  --mono: "Consolas", "Courier New", monospace;
}

/* Reset & layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--mono);background:var(--bg);color:var(--matrix-green);overflow:hidden;
}
#canvas-binary,#canvas-particles{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}

/* Topbar */
.topbar{position:fixed;left:0;right:0;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));border-bottom:1px solid rgba(0,255,102,0.06);backdrop-filter: blur(4px);z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.brand-text{font-weight:700;letter-spacing:1px}
.topnav{display:flex;gap:8px}
.tab-btn{background:transparent;border:1px solid transparent;color:var(--matrix-green);padding:8px 12px;border-radius:6px;cursor:pointer}
.tab-btn.active{background:rgba(0,255,102,0.06);border-color:rgba(0,255,102,0.12);color:#eafff0}

/* Controls aside */
.controls{position:fixed;right:18px;top:84px;width:200px;background:rgba(0,0,0,0.55);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);z-index:12;color:var(--muted)}
.controls h4{margin:0 0 8px 0;color:var(--matrix-green)}
.controls label{display:block;font-size:13px;margin:6px 0}
.controls .small{margin-top:8px;padding:6px 8px;font-size:13px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--matrix-green);cursor:pointer}

/* Main content */
.main{position:relative;padding:100px 40px 80px 40px;height:calc(100vh - 144px);overflow:auto}
.page{display:none;opacity:0;transform:translateY(6px);transition:opacity 260ms ease, transform 260ms ease}
.page.active{display:block;opacity:1;transform:none}
h1,h2{margin:0 0 12px 0}
.lead{color:var(--muted);max-width:720px}

/* Hero CTA */
.hero-cta{margin-top:18px;display:flex;gap:12px;align-items:center}
.cta{display:inline-block;padding:12px 18px;background:var(--matrix-green);color:#001;border-radius:8px;font-weight:700;text-decoration:none}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--matrix-green);padding:10px 14px;border-radius:8px;cursor:pointer}

/* Card */
.card{display:flex;gap:18px;padding:16px;background:var(--card-bg);border:1px solid rgba(0,255,102,0.06);border-radius:10px;max-width:900px}
.card-left{width:96px;display:flex;align-items:center;justify-content:center}
.file-icon{font-size:36px}
.file-title{font-weight:700}
.file-meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.actions{display:flex;gap:10px;margin-top:8px}
.btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--matrix-green);cursor:pointer}
.btn.primary{background:var(--matrix-green);color:#001;border:none;font-weight:700}

/* Status & progress */
.status{margin-top:12px;color:var(--muted);font-size:13px}
.progress-bar{height:8px;background:rgba(255,255,255,0.03);border-radius:6px;margin-top:8px;overflow:hidden}
.progress-inner{height:100%;width:0;background:linear-gradient(90deg,var(--matrix-green),var(--accent));transition:width 220ms linear}

/* Changelog */
.changelog{max-height:60vh;overflow:auto;padding:12px;background:var(--glass);border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.changelog .entry{margin-bottom:14px}
.changelog h3{color:var(--matrix-green);margin-bottom:6px}

/* Footer */
.footer{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));border-top:1px solid rgba(0,255,102,0.04)}

/* Glitch titles */
.glitch-title{position:relative;display:inline-block}
.glitch-title::before,.glitch-title::after{content:attr(data-text);position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.glitch-active::before{opacity:0.9;color:#00ffd1;transform:translate(2px,-1px)}
.glitch-active::after{opacity:0.6;color:#00a0ff;transform:translate(-2px,1px)}

/* Scanline & grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size:100% 3px;opacity:0.12}

/* Neon halo for cards */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg, rgba(0,255,150,0.04), rgba(0,255,150,0.08));filter:blur(12px);z-index:-1}

/* Logo stroke animation */
#logo-path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 900ms ease}
#logo:hover #logo-path{stroke-dashoffset:0}

/* Rainbow theme */
body[data-theme="rainbow"]{
  --matrix-green:#000;background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff);color:#000;
}
body[data-theme="rainbow"] .cta, body[data-theme="rainbow"] .btn.primary{background:#fff;color:#000;border:none}

/* Responsive */
@media (max-width:900px){
  .controls{display:none}
  .main{padding:90px 18px 100px}
  .card{flex-direction:column}
}