:root{
  --bg:#0d0d14; --panel:rgba(22,22,36,.72); --line:rgba(0,255,230,.18);
  --cyan:#00ffe0; --mag:#ff2bd6; --amber:#ffc23d; --text:#e6e6f0; --dim:#8a8aa3;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Mono',monospace}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,43,214,.14), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(0,255,224,.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 28px),
    var(--bg);
  min-height:100vh;
}
.display{font-family:'Unbounded',sans-serif}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
.title-diffuse{
  background:linear-gradient(90deg,var(--cyan),#fff 40%,var(--mag));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:denoise 2.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes denoise{
  0%{filter:blur(14px) contrast(3);letter-spacing:.4em;opacity:.2}
  60%{filter:blur(3px);opacity:.8}
  100%{filter:blur(0);letter-spacing:-.02em;opacity:1}
}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,43,214,.05) inset, 0 20px 60px -30px rgba(0,255,224,.25);
  animation:rise .7s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}
.btn{border:1px solid var(--line);border-radius:12px;padding:.5rem .9rem;font-weight:600;transition:all .15s;background:rgba(255,255,255,.03)}
.btn:hover:not(:disabled){box-shadow:0 0 18px rgba(0,255,224,.35);border-color:var(--cyan)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-cyan{background:var(--cyan);color:#05121a;border-color:var(--cyan)}
.btn-mag{background:var(--mag);color:#1a0516;border-color:var(--mag)}
.btn-mag:hover:not(:disabled){box-shadow:0 0 18px rgba(255,43,214,.55)}
input[type=range]{accent-color:var(--cyan);width:100%}
select{background:#14141f;border:1px solid var(--line);border-radius:10px;padding:.35rem .5rem;color:var(--text)}
.drop{border:2px dashed rgba(0,255,224,.35);border-radius:18px;transition:all .2s}
.drop.over{border-color:var(--mag);background:rgba(255,43,214,.08)}
.tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.flicker{animation:fl 1.6s infinite}
@keyframes fl{0%,100%{opacity:1}50%{opacity:.55}}
a{color:var(--cyan)}