:root{
  --bg: #020302;
  --panel: rgba(0,16,7,0.6);
  --muted: #9fb3a6;
  --accent: #66ff99;
  --glass: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--muted);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
canvas#matrix{position:fixed;inset:0;width:100%;height:100%;display:block;background:#000;z-index:0}
.prevent-zoom, html, body, canvas#matrix { touch-action: none; -ms-touch-action: none; }
.overlay{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.card{max-width:820px;width:100%;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));border-radius:12px;padding:28px;border:1px solid rgba(102,255,153,0.06);backdrop-filter: blur(6px);text-align:center;box-shadow:0 10px 40px rgba(2,6,8,0.6)}
.brand{color:var(--accent);font-weight:700;letter-spacing:1px;margin-bottom:6px}
.title{font-size:28px;margin:6px 0;color:#dfffe5}
.desc{color:var(--muted);margin:8px 0 16px}
.controls{display:flex;gap:10px;justify-content:center;margin-top:8px}
button{background:rgba(102,255,153,0.08);border:1px solid rgba(102,255,153,0.12);color:var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer}
button[aria-pressed="true"]{background:rgba(102,255,153,0.16)}
.hint{font-size:12px;color:#83a28f;margin-top:10px}

/* subtle flicker effect applied to .card when toggled */
@keyframes flicker {
  0%{filter:brightness(1)}
  40%{filter:brightness(1.35)}
  60%{filter:brightness(0.85)}
  100%{filter:brightness(1)}
}
.card.flick{animation: flicker 140ms ease-in-out 3}

/* responsive */
@media (max-width:720px){
  .card{padding:20px;border-radius:10px}
  .title{font-size:20px}
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .card.flick{animation:none}
}