:root{
  --bg:#07060d;
  --panel:#0f0d1a;
  --blue:#00e5ff;
  --magenta:#ff2bd6;
  --lime:#a6ff00;
  --red:#ff2b45;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,43,214,.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,229,255,.12), transparent 45%),
    var(--bg);
  color:#eaeaf5;
  font-family:'JetBrains Mono', monospace;
  min-height:100vh;
}
#app{max-width:1100px;margin:0 auto;padding:16px;}

/* Header */
#topbar{text-align:center;padding:14px 0 18px;}
h1.glitch{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:800;
  font-size:clamp(2rem,7vw,4rem);
  letter-spacing:-2px;
  color:#fff;
  position:relative;
  text-shadow:2px 0 var(--magenta), -2px 0 var(--blue);
  animation:flicker 4s infinite;
}
h1.glitch:hover{animation:shake .25s infinite;}
@keyframes flicker{
  0%,97%,100%{opacity:1;} 98%{opacity:.4;} 99%{opacity:.85;}
}
@keyframes shake{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(-2px,1px);}
  50%{transform:translate(2px,-1px);}
  75%{transform:translate(-1px,-2px);}
}
.subtitle{margin-top:6px;color:#a9a9c8;font-size:.95rem;}
.nbfx{color:var(--lime);font-weight:700;text-shadow:0 0 8px var(--lime);}

/* Layout */
#main{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start;}
@media(max-width:820px){#main{grid-template-columns:1fr;}}

/* Stage */
#stage{background:var(--panel);border:1px solid #221f33;border-radius:14px;padding:14px;position:relative;}
#canvas{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:8px;
  image-rendering:pixelated;
  border:2px solid #2a2740;
  box-shadow:0 0 30px rgba(0,229,255,.15);
}
#badge{
  position:absolute;top:24px;right:24px;
  background:rgba(0,0,0,.6);
  border:1px solid #333;
  padding:4px 10px;border-radius:20px;
  font-size:.75rem;font-weight:700;
  transition:.2s;
}
#badge.lit{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 12px rgba(255,43,214,.4);}

#transport,#sources,#presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#presets{align-items:center;margin-top:10px;}
.plabel{font-size:.75rem;color:#888;}

.tbtn,.pbtn{
  background:#181528;color:#eaeaf5;
  border:1px solid #2f2b45;
  padding:8px 12px;border-radius:8px;
  font-family:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:4px;
}
.tbtn:hover,.pbtn:hover{transform:translateY(-2px);border-color:var(--blue);}
.tbtn.accent{border-color:var(--blue);color:var(--blue);}
.tbtn.hot{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 10px rgba(255,43,214,.3);}
.pbtn{padding:6px 10px;font-size:.72rem;}

/* Panel */
#panel{
  background:var(--panel);border:1px solid #221f33;border-radius:14px;
  padding:14px;max-height:70vh;overflow-y:auto;
}
.cat-group{margin-bottom:16px;}
.cat-group h3{
  font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:1px;
  margin-bottom:8px;border-bottom:1px solid #221f33;padding-bottom:4px;
}
.fx-card{
  background:#131020;border:1px solid #26233a;border-radius:10px;
  padding:10px 12px;margin-bottom:8px;transition:.2s;
}
.fx-card.active{
  border-color:var(--lime);
  box-shadow:0 0 12px rgba(166,255,0,.25);
  background:#161425;
}
.fx-row{display:flex;justify-content:space-between;align-items:center;}
.fx-name{font-weight:700;font-size:.85rem;}
.switch{
  width:44px;height:24px;border-radius:14px;
  background:#2a2740;border:none;position:relative;cursor:pointer;transition:.2s;padding:0;
}
.switch.on{background:var(--lime);box-shadow:0 0 8px var(--lime);}
.knob{
  position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:.2s;
}
.switch.on .knob{left:23px;}
.slider-wrap{margin-top:10px;}
input[type=range]{
  width:100%;-webkit-appearance:none;height:5px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--magenta));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;cursor:pointer;box-shadow:0 0 6px rgba(255,255,255,.6);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:none;cursor:pointer;
}

/* Footer */
#footer{text-align:center;color:#777;font-size:.78rem;padding:22px 0 8px;}
#footer a{color:var(--blue);text-decoration:none;}
#footer a:hover{text-decoration:underline;color:var(--magenta);}

#video{display:none;}
</parameter>