:root{
  --phos: rgb(80,255,120);
  --bg:#040604;
  --panel:#0b0f0b;
  --metal:linear-gradient(180deg,#242a24,#141814);
  --edge:#2c332c;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 50% 0%, #10160f 0%, #050705 55%, #020302 100%);
  color:#cfe;
  font-family:'JetBrains Mono',monospace;
  overflow:hidden;
}

#app{
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:1100px;
  margin:0 auto;
  padding:10px 14px;
  gap:10px;
}

/* ---------- Header ---------- */
#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 14px;
  background:var(--metal);
  border:1px solid var(--edge);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.5);
}
.pwr{
  font-size:.7rem;
  letter-spacing:.15em;
  color:#7a8a7a;
  display:flex;align-items:center;gap:6px;
}
.dot{
  width:9px;height:9px;border-radius:50%;
  background:#3a1010;
  box-shadow:inset 0 0 3px #000;
  transition:.2s;
}
.dot.on{
  background:var(--phos);
  box-shadow:0 0 8px var(--phos),0 0 16px var(--phos);
}
.titleblock{text-align:center;flex:1;}
.titleblock h1{
  font-family:'VT323',monospace;
  font-size:2.2rem;
  line-height:.9;
  letter-spacing:.18em;
  color:var(--phos);
  text-shadow:0 0 8px var(--phos),0 0 20px rgba(80,255,120,.4);
}
.subtitle{
  font-size:.6rem;
  letter-spacing:.3em;
  color:#6f7f6f;
  text-transform:uppercase;
}
.readout{
  display:flex;gap:12px;
  font-family:'VT323',monospace;
  font-size:1.05rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:48%;
}
.readout > div{display:flex;flex-direction:column;line-height:1;color:var(--phos);}
.rlabel{font-size:.55rem;color:#6f7f6f;letter-spacing:.15em;font-family:'JetBrains Mono';}

/* ---------- Stage / scope ---------- */
#stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
#scopeWrap{
  position:relative;
  aspect-ratio:1/1;
  height:100%;
  max-height:100%;
  max-width:100%;
  border-radius:22px;
  padding:14px;
  background:
    radial-gradient(circle at 30% 20%, #1a201a, #0a0d0a 70%),
    #060806;
  border:1px solid #1c221c;
  box-shadow:
    inset 0 0 0 3px #101410,
    inset 0 0 40px rgba(0,0,0,.9),
    0 10px 40px rgba(0,0,0,.7);
  transition:box-shadow .2s;
}
#scopeWrap.drag{
  box-shadow:inset 0 0 0 3px var(--phos),0 0 30px var(--phos);
}
#canvas{
  display:block;
  width:100%;height:100%;
  border-radius:12px;
  background:#040604;
}
/* CRT glass reflection */
#glass{
  position:absolute;inset:14px;
  border-radius:12px;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 30% 8%, rgba(255,255,255,.09), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
#scanlines{
  position:absolute;inset:14px;
  border-radius:12px;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  opacity:.5;
  animation:flick 5s infinite steps(60);
}
@keyframes flick{
  0%,100%{opacity:.5;}
  47%{opacity:.55;}
  48%{opacity:.42;}
  49%{opacity:.55;}
}

#dropHint{
  position:absolute;inset:14px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  border-radius:12px;
  transition:opacity .4s;
}
#dropHint.hidden{opacity:0;pointer-events:none;}
.dh-inner{color:var(--phos);text-shadow:0 0 10px var(--phos);}
.dh-icon{font-size:3rem;margin-bottom:8px;animation:pulse 2s infinite ease-in-out;}
@keyframes pulse{50%{opacity:.4;}}
.dh-title{font-family:'VT323';font-size:1.4rem;letter-spacing:.2em;}
.dh-sub{font-size:.65rem;color:#7f8f7f;margin-top:6px;letter-spacing:.05em;}

#peakMeter{
  position:absolute;
  right:20px;bottom:20px;top:20px;
  width:6px;
  background:rgba(0,0,0,.5);
  border:1px solid #1c221c;
  border-radius:3px;
  display:flex;align-items:flex-end;
  overflow:hidden;
  pointer-events:none;
}
#peakFill{
  width:100%;height:0%;
  background:linear-gradient(180deg,var(--phos),rgba(80,255,120,.2));
  box-shadow:0 0 8px var(--phos);
  transition:height .08s linear;
}

/* ---------- Controls ---------- */
#controls{
  background:var(--metal);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.transport{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.btn{
  font-family:'JetBrains Mono';
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:9px 14px;
  min-width:52px;
  color:#bdd;
  background:linear-gradient(180deg,#2a312a,#171c17);
  border:1px solid #333b33;
  border-radius:7px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.5);
  transition:.12s;
}
.btn:hover:not(:disabled){color:var(--phos);border-color:var(--phos);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.primary{
  color:var(--phos);
  text-shadow:0 0 6px var(--phos);
  border-color:#3f5f3f;
}

.knobs{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:10px;
}
.kval{
  font-family:'VT323',monospace;
  font-size:.95rem;
  letter-spacing:.05em;
  color:var(--phos);
  text-shadow:0 0 5px var(--phos);
  margin-top:2px;
}
.knob{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.55rem;
  letter-spacing:.13em;
  color:#8a9a8a;
  text-align:center;
}
.knob input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:5px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--phos),#1a221a);
  outline:none;
  cursor:pointer;
}
.knob input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eaffea,#3a5f3a);
  border:1px solid #0a0d0a;
  box-shadow:0 0 6px var(--phos),0 1px 3px rgba(0,0,0,.6);
  cursor:pointer;
}
.knob input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:1px solid #0a0d0a;
  background:radial-gradient(circle at 35% 30%,#eaffea,#3a5f3a);
  box-shadow:0 0 6px var(--phos);
  cursor:pointer;
}
.modebtn{
  font-family:'VT323';
  font-size:1rem;
  letter-spacing:.1em;
  padding:6px 4px;
  color:var(--phos);
  background:#0b110b;
  border:1px solid #2c3a2c;
  border-radius:6px;
  cursor:pointer;
  text-shadow:0 0 6px var(--phos);
  box-shadow:inset 0 0 8px rgba(0,0,0,.7);
  transition:.12s;
}
.modebtn:hover{border-color:var(--phos);}
.modebtn:active{transform:translateY(1px);}

/* ---------- Footer ---------- */
#footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.62rem;
  color:#6f7f6f;
  padding:2px 6px;
}
#footer a{
  color:var(--phos);
  text-decoration:none;
  border-bottom:1px dotted rgba(80,255,120,.4);
}
#footer a:hover{text-shadow:0 0 8px var(--phos);}
#msg{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
  font-style:italic;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .knobs{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:640px){
  .titleblock h1{font-size:1.5rem;}
  .readout{display:none;}
  .knobs{grid-template-columns:repeat(3,1fr);}
  .btn{flex:1;min-width:0;padding:10px 6px;}
  #scopeWrap{padding:10px;}
  #footer{font-size:.55rem;}
  .kval{font-size:.85rem;}
}
@media (max-height:680px){
  .titleblock h1{font-size:1.5rem;}
  #controls{padding:8px 10px;gap:8px;}
}
</parameter>
</invoke>