:root{
  --bg:#04050a; --panel:#0a0d15; --panel2:#0d1120; --line:#1d2538;
  --green:#3dff6a; --cyan:#28e0ff; --amber:#ffb300; --red:#ff4d5e; --orange:#ff8c3b; --purple:#c06bff;
  --dim:#4d5d7d; --text:#c8f5d0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Courier New",Courier,monospace;display:flex;justify-content:center;padding:20px;min-height:100vh}
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.app{width:1240px;max-width:96vw;background:var(--panel);border:2px solid var(--line);box-shadow:0 0 60px rgba(40,224,255,.07),inset 0 0 120px rgba(0,0,0,.4)}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:2px solid var(--line)}
.title{font-size:26px;letter-spacing:4px;color:var(--green);text-shadow:0 0 12px var(--green)}
.title span{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.subtitle{font-size:11px;color:var(--dim);letter-spacing:2px;margin-top:3px}
.transport{display:flex;gap:10px;align-items:center}
button{font-family:inherit;font-size:13px;letter-spacing:2px;color:var(--green);background:transparent;border:2px solid var(--green);padding:8px 16px;cursor:pointer;text-transform:uppercase}
button:hover{background:rgba(61,255,106,.12);box-shadow:0 0 12px rgba(61,255,106,.35)}
button:active{transform:translateY(1px)}
button.alt{color:var(--cyan);border-color:var(--cyan)}
button.alt:hover{background:rgba(40,224,255,.12);box-shadow:0 0 12px rgba(40,224,255,.35)}
button.warn{color:var(--red);border-color:var(--red)}
button.warn:hover{background:rgba(255,77,94,.12);box-shadow:0 0 12px rgba(255,77,94,.35)}
button.on{background:rgba(61,255,106,.18);box-shadow:0 0 16px rgba(61,255,106,.5)}
.statusline{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:2px solid var(--line);font-size:12px;letter-spacing:2px}
.led{width:10px;height:10px;border:1px solid var(--green);display:inline-block}
.led.on{background:var(--green);box-shadow:0 0 8px var(--green);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
#statusText{color:var(--cyan)}
.hint{margin-left:auto;color:var(--dim);font-size:10px}
#grid{display:grid;grid-template-columns:200px repeat(16,minmax(0,1fr)) 84px;gap:5px;padding:16px 18px}
.trackrow{display:contents}
.tr0{--tc:var(--green)} .tr1{--tc:var(--cyan)} .tr2{--tc:var(--amber)}
.tr3{--tc:var(--red)} .tr4{--tc:var(--orange)} .tr5{--tc:var(--purple)}
.tlabel{display:flex;align-items:center;gap:6px;font-size:11px;border:1px solid var(--line);background:var(--panel2);padding:4px 8px}
.tlabel .tname{width:52px;letter-spacing:1px;font-weight:bold;color:var(--tc)}
select{font-family:inherit;font-size:11px;background:#0a0f1a;color:var(--text);border:1px solid var(--line);padding:2px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;background:#1a2338;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:16px;background:var(--green);border:none}
input[type=range]::-moz-range-thumb{width:10px;height:16px;background:var(--green);border:none;border-radius:0}
.num{font-size:10px;color:var(--dim);text-align:center;padding:3px 0;letter-spacing:1px}
.num.loop{color:var(--cyan)}
.num.dim{color:#2a3550}
.cell{position:relative;height:44px;border:1px solid #22304d;cursor:pointer;background:#0b101d}
.cell.tr0,.cell.tr1,.cell.tr2,.cell.tr3,.cell.tr4,.cell.tr5{border-color:color-mix(in srgb,var(--tc) 35%,#1a2233)}
.cell.loop{background:#0e1526}
.cell:hover{filter:brightness(1.5)}
.cell.on{background:var(--tc);box-shadow:0 0 10px var(--tc);border-color:var(--tc)}
.cell.on::after{content:attr(data-note);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(0,0,0,.7);font-weight:bold}
.cell.sel{outline:1px dashed rgba(255,255,255,.8);outline-offset:-3px}
.cell.playing{border-color:#fff;box-shadow:0 0 18px var(--tc),inset 0 0 12px rgba(255,255,255,.45)}
.panel{display:grid;grid-template-columns:1fr 1fr 1.05fr 1.15fr 1.05fr;gap:2px;border-top:2px solid var(--line)}
.pgroup{padding:14px 18px;border-right:1px solid var(--line)}
.pgroup:last-child{border-right:none}
.ptitle{font-size:11px;letter-spacing:3px;color:var(--dim);margin-bottom:10px}
.ctl{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;letter-spacing:1px}
.ctl label{width:96px;flex:none;color:var(--text)}
.ctl .val{width:56px;flex:none;color:var(--cyan);text-align:right}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.btnrow button{flex:1;padding:8px 4px;font-size:11px}
footer{padding:8px 18px;border-top:2px solid var(--line);font-size:10px;color:var(--dim);letter-spacing:1px;display:flex;justify-content:space-between}