:root{
  --bg:#070b08; --ph:#5dff8a; --ph2:#2a8f4a; --amber:#ffb347; --metal1:#3a3f44; --metal2:#1b1e21;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#12241a 0%,var(--bg) 60%);color:var(--ph);
  font-family:'VT323',monospace;font-size:20px;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.rack{max-width:1000px;margin:0 auto;padding:18px 14px 30px}
header{text-align:center;margin-bottom:14px;animation:rise .6s both}
.brand{display:flex;align-items:center;justify-content:center;gap:14px}
h1{margin:0;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(40px,9vw,78px);letter-spacing:4px;
  text-shadow:0 0 12px var(--ph),0 0 30px rgba(93,255,138,.4)}
h1 span{color:var(--amber);font-weight:300;margin-left:10px;text-shadow:0 0 12px var(--amber)}
.tag{margin:2px 0 0;color:var(--ph2);font-size:20px}
.led{width:18px;height:18px;border-radius:50%;background:#300;box-shadow:inset 0 0 4px #000}
.led.on{background:#ff3b3b;box-shadow:0 0 14px #ff3b3b,0 0 4px #fff inset;animation:blink .25s infinite alternate}
@keyframes blink{to{opacity:.5}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.panel{background:linear-gradient(160deg,#101a13,#0a0f0b);border:1px solid #1f3a27;border-radius:10px;padding:12px;margin-bottom:14px;
  box-shadow:0 0 0 3px #050705,0 0 24px rgba(93,255,138,.06) inset;animation:rise .6s both}
.panel:nth-of-type(2){animation-delay:.1s}.panel:nth-of-type(3){animation-delay:.2s}
.label{font-family:'Chakra Petch',sans-serif;font-size:12px;letter-spacing:3px;color:var(--amber);margin-bottom:8px}
.dim{color:#3d6b4b;letter-spacing:1px}
.screens{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
.screens .panel{margin-bottom:14px}
canvas{width:100%;height:220px;display:block;background:#020402;border-radius:6px;border:1px solid #143020}
textarea{width:100%;background:#020402;color:var(--ph);border:1px solid #1f5a33;border-radius:6px;padding:10px;
  font-family:'VT323',monospace;font-size:24px;resize:vertical;outline:none;text-shadow:0 0 6px rgba(93,255,138,.6)}
textarea:focus{border-color:var(--ph)}
.phrases{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.phrases button{font-size:16px;padding:3px 10px;background:transparent;border:1px dashed #2a8f4a;color:var(--ph2)}
.phrases button:hover{color:var(--ph);border-color:var(--ph)}
button{font-family:'VT323',monospace;font-size:22px;cursor:pointer;color:var(--ph);background:linear-gradient(#1d2a21,#0d140f);
  border:1px solid #2a8f4a;border-radius:6px;padding:6px 16px;transition:.15s}
button:hover{box-shadow:0 0 12px rgba(93,255,138,.4)}
button:active{transform:translateY(1px)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.big{font-size:30px;padding:6px 40px;background:linear-gradient(#2fbf5f,#13652f);color:#021;border-color:#7dffa2;font-weight:bold}
#rec{color:#ff6b6b;border-color:#8a2a2a}
#rec.on{background:#5a0f0f;animation:blink .5s infinite alternate}
.ticker{margin-top:10px;min-height:40px;display:flex;flex-wrap:wrap;gap:4px;font-size:16px}
.chip{padding:1px 6px;border:1px solid #1d4029;border-radius:4px;color:#3d8a58}
.chip.word{border:none;color:var(--amber);opacity:.7}
.chip.cur{background:var(--ph);color:#020;box-shadow:0 0 10px var(--ph)}
.knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.knob-wrap{text-align:center;user-select:none;touch-action:none}
.knob{width:72px;height:72px;margin:0 auto;border-radius:50%;position:relative;cursor:ns-resize;
  background:conic-gradient(from 0deg,#555b61,#2a2e32,#6a7076,#2a2e32,#555b61,#2a2e32,#6a7076,#2a2e32,#555b61);
  box-shadow:0 4px 10px #000,inset 0 2px 2px rgba(255,255,255,.2),0 0 0 4px #0b0e0c,0 0 0 5px #1f3a27}
.knob::after{content:'';position:absolute;left:50%;top:6px;width:4px;height:18px;margin-left:-2px;border-radius:2px;
  background:var(--amber);box-shadow:0 0 8px var(--amber)}
.knob-name{font-family:'Chakra Petch',sans-serif;font-size:11px;letter-spacing:2px;color:var(--amber);margin-top:8px}
.knob-val{font-size:18px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button.sel{background:var(--amber);color:#210;border-color:var(--amber)}
footer{text-align:center;color:#3d6b4b;font-size:18px;margin-top:10px}
footer a{color:var(--amber)}
@media (max-width:720px){
  .screens{grid-template-columns:1fr}
  .knobs{grid-template-columns:repeat(3,1fr)}
  canvas{height:180px}
  .big{flex:1}
}