:root{
  --bg:#0a0a0f;
  --panel:#12121a;
  --panel2:#181824;
  --mag:#ff2fd6;
  --cyan:#00e5ff;
  --lime:#39ff14;
  --dim:#5a5a72;
  --line:#25253a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 20% -10%, rgba(255,47,214,.12), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(0,229,255,.10), transparent 45%),
    var(--bg);
  color:#e8e8f2;
  font-family:'Space Mono',monospace;
  display:flex;flex-direction:column;min-height:100vh;
  overflow-x:hidden;
}

/* flicker + scanline atmosphere */
#flicker-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference){
  #flicker-overlay{animation:flick 6s infinite;}
  @keyframes flick{0%,97%{opacity:.4}98%{opacity:.9}99%{opacity:.2}100%{opacity:.5}}
}

/* header */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,47,214,.06),transparent);
}
h1.glitch{
  font-family:'Major Mono Display',monospace;
  font-size:clamp(18px,4vw,34px);font-weight:400;letter-spacing:2px;
  position:relative;color:#fff;text-transform:lowercase;
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
}
.glitch::before{color:var(--mag);z-index:-1;transform:translate(-2px,0);}
.glitch::after{color:var(--cyan);z-index:-1;transform:translate(2px,0);}
@media (prefers-reduced-motion:no-preference){
  .glitch::before{animation:g1 2.4s infinite steps(2);}
  .glitch::after{animation:g2 3.1s infinite steps(2);}
  @keyframes g1{0%,90%,100%{transform:translate(-2px,0)}92%{transform:translate(-5px,-1px)}}
  @keyframes g2{0%,88%,100%{transform:translate(2px,0)}90%{transform:translate(5px,1px)}}
}
#signal{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;color:var(--dim);}
.dot{width:10px;height:10px;border-radius:50%;background:var(--dim);}
.dot.live{background:var(--lime);box-shadow:0 0 10px var(--lime);animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.3}}

/* layout */
#app{display:flex;flex:1;gap:16px;padding:16px;align-items:flex-start;}
@media (max-width:860px){#app{flex-direction:column;}}

#stage{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}
#canvas-wrap{
  position:relative;border:1px solid var(--mag);border-radius:6px;overflow:hidden;
  box-shadow:0 0 30px rgba(255,47,214,.25), inset 0 0 40px rgba(0,0,0,.6);
  background:#000;aspect-ratio:16/9;
}
#canvas{width:100%;height:100%;display:block;image-rendering:pixelated;}
#scanline-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
}
#no-signal-msg{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;color:var(--dim);
}
.ns-title{font-family:'Major Mono Display';font-size:clamp(16px,3vw,26px);color:var(--cyan);}
.ns-sub{font-size:12px;max-width:280px;line-height:1.5;}
.hidden{display:none !important;}
#rec-badge{
  position:absolute;top:10px;left:10px;background:rgba(0,0,0,.7);color:#ff4444;
  padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:1px;
  animation:blink 1s infinite;border:1px solid #ff4444;
}
#strawberry{position:absolute;bottom:8px;right:10px;font-size:20px;filter:drop-shadow(0 0 6px var(--mag));}
#strawberry.jitter{animation:jit .12s infinite;}
@keyframes jit{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(2px,-1px) rotate(4deg)}50%{transform:translate(-2px,1px) rotate(-4deg)}75%{transform:translate(1px,2px)}}

#scope{width:100%;height:60px;border:1px solid var(--line);border-radius:4px;background:#0a0a0f;}

/* buttons */
.btn{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;font-weight:700;
  background:var(--panel2);color:#e8e8f2;border:1px solid var(--line);
  padding:9px 14px;border-radius:4px;cursor:pointer;transition:.12s;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.btn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.3);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.primary{background:var(--mag);color:#0a0a0f;border-color:var(--mag);}
.btn.primary:hover{box-shadow:0 0 16px var(--mag);color:#0a0a0f;}
.btn.danger{border-color:#ff4444;color:#ff6666;}
.btn.danger.recording{background:#ff4444;color:#000;animation:blink 1s infinite;}
.btn.tiny{padding:6px 9px;font-size:10px;}
.file-btn{position:relative;}
#source-controls,#transport{display:flex;flex-wrap:wrap;gap:8px;}

/* rack */
#rack{
  width:340px;max-width:100%;display:flex;flex-direction:column;gap:14px;
}
@media (max-width:860px){#rack{width:100%;}}
.rack-title{font-size:10px;letter-spacing:2px;color:var(--dim);display:block;margin-bottom:8px;}
#presets{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px;}
.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.preset-row:last-child{margin-bottom:0;}
.btn.preset{background:var(--panel2);border-color:var(--line);}
.btn.preset:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 10px rgba(57,255,20,.25);}

#modules{display:flex;flex-direction:column;gap:8px;}
.module{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;
  border-left:3px solid var(--mag);
}
.module.audio-mod{border-left-color:var(--cyan);}
.mod-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.mod-label{font-size:11px;letter-spacing:1px;font-weight:700;}
.audio-mod .mod-label{color:var(--cyan);}
.mod-row{display:flex;align-items:center;gap:10px;}
.mod-val{font-size:11px;color:var(--lime);min-width:52px;text-align:right;}
.mod-desc{font-size:9px;color:var(--dim);margin-top:5px;letter-spacing:.5px;}

/* range styling */
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--mag),var(--cyan));outline:none;
}
.audio-mod input[type=range]{background:linear-gradient(90deg,var(--cyan),var(--lime));}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;cursor:pointer;box-shadow:0 0 8px var(--cyan);border:2px solid var(--panel);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid var(--panel);
}

/* toggles */
.toggle{
  font-family:'Space Mono';font-size:9px;font-weight:700;letter-spacing:1px;
  padding:3px 8px;border-radius:3px;cursor:pointer;
  background:transparent;color:var(--dim);border:1px solid var(--dim);
}
.toggle.on{color:var(--lime);border-color:var(--lime);box-shadow:0 0 8px rgba(57,255,20,.3);}
.toggle.wide{padding:6px 10px;font-size:10px;flex:1;}
.extra-row{display:flex;gap:6px;flex-wrap:wrap;}

/* console */
#console{background:#050508;border:1px solid var(--line);border-radius:6px;padding:12px;}
#log{font-size:10px;line-height:1.6;color:var(--lime);max-height:130px;overflow-y:auto;}
.log-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#log::-webkit-scrollbar{width:6px;}
#log::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

/* footer */
#footer{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  padding:14px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--dim);letter-spacing:.5px;
}
#footer .warn{color:#ffb347;}
#footer a{color:var(--mag);text-decoration:none;font-weight:700;}
#footer a:hover{color:var(--cyan);text-shadow:0 0 8px var(--cyan);}
</parameter>