*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --desk:#008080;
  --win-bg:#c0c0c0;
  --win-face:#d4d0c8;
  --win-dark:#808080;
  --win-darker:#404040;
  --win-black:#000000;
  --win-white:#ffffff;
  --win-hi:#ffffff;
  --win-shadow:#404040;
  --win-blue:#000080;
  --win-blue2:#1084d0;
  --panel-in:#b8b4ac;
  --panel-deep:#a8a49c;
  --inset-bg:#a0a098;
  --kick:#c45c20;
  --snare:#3060a8;
  --hihat:#8c7a14;
  --perc:#6040a0;
  --bass:#207858;
  --chord:#a03060;
  --led-off:#5a4a3a;
  --led-on:#f0a000;
  --led-play:#40c040;
  --led-red:#d03020;
  --font:'VT323','Share Tech Mono','Courier New',monospace;
  --mono:'Share Tech Mono','Courier New',monospace;
  --pixel:'Press Start 2P',monospace;
  --bev-out:inset -1px -1px 0 var(--win-shadow),inset 1px 1px 0 var(--win-hi);
  --bev-in:inset 1px 1px 0 var(--win-shadow),inset -1px -1px 0 var(--win-hi);
  --bev-out2:inset -2px -2px 0 var(--win-darker),inset -1px -1px 0 var(--win-shadow),inset 2px 2px 0 var(--win-white),inset 1px 1px 0 var(--win-hi);
  --bev-in2:inset 2px 2px 0 var(--win-darker),inset 1px 1px 0 var(--win-shadow),inset -2px -2px 0 var(--win-white),inset -1px -1px 0 var(--win-hi);
  --taskbar-h:36px;
}

html,body{
  height:100%;
  background:var(--desk);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);
  font-family:var(--font);
  font-size:14px;
  color:var(--win-black);
  overflow:hidden;
}

#desktop{
  position:fixed;
  top:0;left:0;right:0;
  bottom:var(--taskbar-h);
  overflow:hidden;
}

#taskbar{
  position:fixed;
  bottom:0;left:0;right:0;
  height:var(--taskbar-h);
  background:var(--win-face);
  box-shadow:inset 0 1px 0 var(--win-hi),inset 0 2px 0 var(--win-white);
  display:flex;align-items:center;gap:2px;
  padding:2px 4px;
  z-index:9999;
}

.taskbar-start{
  display:flex;align-items:center;gap:4px;
  background:var(--win-face);
  box-shadow:var(--bev-out2);
  border:none;
  padding:3px 8px 3px 6px;
  font-family:var(--pixel);
  font-size:7px;
  font-weight:700;
  color:var(--win-black);
  cursor:pointer;
  height:28px;
  white-space:nowrap;
  user-select:none;
  letter-spacing:.5px;
}
.taskbar-start:active{box-shadow:var(--bev-in2);}
.taskbar-start-icon{font-size:14px;line-height:1;}

.taskbar-sep{
  width:2px;height:28px;
  background:var(--win-shadow);
  margin:0 3px;
  box-shadow:1px 0 0 var(--win-hi);
  flex-shrink:0;
}

.taskbar-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--win-face);
  box-shadow:var(--bev-out2);
  border:none;
  padding:3px 8px;
  font-family:var(--font);
  font-size:14px;
  color:var(--win-black);
  cursor:pointer;
  height:28px;
  min-width:140px;
  white-space:nowrap;
  user-select:none;
  text-align:left;
}
.taskbar-btn:hover{background:#ccc8c0;}
.taskbar-btn:active{box-shadow:var(--bev-in2);}
.taskbar-btn.active{box-shadow:var(--bev-in2);background:var(--panel-in);}
.taskbar-btn-icon{font-size:12px;flex-shrink:0;}

.taskbar-spacer{flex:1;}

.taskbar-clock{
  display:flex;align-items:center;
  background:var(--inset-bg);
  box-shadow:var(--bev-in);
  padding:3px 8px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--win-black);
  height:28px;
  white-space:nowrap;
  min-width:70px;
  justify-content:center;
}

.app-window{
  background:var(--win-face);
  width:min(1100px,calc(100vw - 16px));
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  box-shadow:2px 2px 0 var(--win-white) inset,-2px -2px 0 var(--win-shadow) inset,4px 4px 12px rgba(0,0,0,.6);
  user-select:none;
  min-width:340px;
}
.app-window.dragging{opacity:.95;cursor:grabbing;}
.app-window.minimized{display:none;}

.titlebar{
  background:linear-gradient(90deg,var(--win-blue) 0%,var(--win-blue2) 100%);
  padding:3px 4px;
  display:flex;align-items:center;gap:4px;
  cursor:grab;
}
.titlebar:active{cursor:grabbing;}
.title-icon{
  width:16px;height:16px;
  background:var(--win-face);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--win-blue);
  flex-shrink:0;
}
.title-text{
  color:#fff;
  font-family:var(--pixel);
  font-size:7px;
  letter-spacing:.3px;
  flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.title-btns{display:flex;gap:2px;}
.tbtn{
  width:16px;height:14px;
  background:var(--win-face);
  box-shadow:var(--bev-out);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--win-black);
  cursor:pointer;flex-shrink:0;line-height:1;
  font-family:'VT323',monospace;
}
.tbtn:active,.tbtn:hover{box-shadow:var(--bev-in);}

.app-body{
  padding:6px;
  display:flex;flex-direction:column;gap:4px;
}

.panel{background:var(--win-face);box-shadow:var(--bev-in2);padding:2px;}
.panel-inner{background:var(--win-face);padding:6px 8px;}
.inset-field{
  background:var(--inset-bg);
  box-shadow:var(--bev-in2);
  padding:3px 6px;
  font-family:var(--mono);
}

.btn{
  background:var(--win-face);
  box-shadow:var(--bev-out2);
  border:none;
  font-family:var(--font);
  font-size:14px;
  color:var(--win-black);
  cursor:pointer;
  padding:3px 10px;
  min-height:24px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  white-space:nowrap;user-select:none;
}
.btn:hover{background:#d0ccc4;}
.btn:active,.btn.depressed{box-shadow:var(--bev-in2);padding:4px 9px 2px 11px;}
.btn.active{box-shadow:var(--bev-in2);background:var(--panel-in);}

.btn-transport{
  background:var(--win-face);
  box-shadow:var(--bev-out2);
  border:none;
  font-size:16px;font-weight:700;
  color:var(--win-black);
  cursor:pointer;
  width:64px;height:44px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:2px;user-select:none;transition:none;
  font-family:var(--font);
}
.btn-transport:hover{background:#ccc8c0;}
.btn-transport:active{box-shadow:var(--bev-in2);padding-top:2px;padding-left:2px;}
.btn-transport.playing{box-shadow:var(--bev-in2);background:var(--panel-in);}
.btn-transport .t-label{font-family:var(--mono);font-size:9px;letter-spacing:.5px;font-weight:400;color:var(--win-darker);}

.led{
  width:10px;height:10px;border-radius:50%;
  background:var(--led-off);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  flex-shrink:0;
}
.led.on{background:var(--led-on);box-shadow:0 0 4px var(--led-on),inset 0 1px 0 rgba(255,255,255,.4);}
.led.play.on{background:var(--led-play);box-shadow:0 0 4px var(--led-play),inset 0 1px 0 rgba(255,255,255,.4);}


.beat-led{
  width:14px;height:14px;border-radius:2px;
  background:var(--led-off);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  flex-shrink:0;
  transition:background .04s,box-shadow .04s;
}
.beat-led.active{
  background:var(--led-on)!important;
  box-shadow:0 0 6px var(--led-on),inset 0 1px 0 rgba(255,255,255,.4)!important;
}
.bpm-display{
  background:#1a1a0a;
  box-shadow:var(--bev-in2);
  padding:4px 10px;
  display:flex;flex-direction:column;align-items:center;
  min-width:72px;cursor:ns-resize;
}
.bpm-digits{
  font-family:var(--mono);font-size:28px;line-height:1;font-weight:600;
  color:#f0e060;text-shadow:0 0 8px rgba(240,224,96,.5);letter-spacing:2px;
}
.bpm-unit{font-family:var(--mono);font-size:8px;color:#888860;letter-spacing:2px;text-transform:uppercase;}

.step-display{
  background:#1a1a0a;box-shadow:var(--bev-in2);
  padding:4px 8px;display:flex;flex-direction:column;align-items:center;min-width:48px;
}
.step-digits{font-family:var(--mono);font-size:18px;line-height:1;color:#60f060;text-shadow:0 0 6px rgba(96,240,96,.4);}
.step-unit{font-family:var(--mono);font-size:7px;color:#408040;letter-spacing:2px;}

.transport-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 8px;background:var(--panel-in);box-shadow:var(--bev-in);
}
.transport-cluster{display:flex;align-items:center;gap:3px;}
.bpm-cluster{display:flex;align-items:center;gap:3px;}
.bpm-arrow{
  background:var(--win-face);box-shadow:var(--bev-out2);border:none;cursor:pointer;
  width:20px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--win-black);user-select:none;
  font-family:var(--font);
}
.bpm-arrow:hover{background:#ccc8c0;}
.bpm-arrow:active{box-shadow:var(--bev-in2);padding:2px 0 0 2px;}
.transport-sep{width:1px;height:44px;background:var(--win-shadow);margin:0 4px;flex-shrink:0;}
.status-cluster{
  display:flex;align-items:center;gap:6px;
  background:#1a1a0a;box-shadow:var(--bev-in2);
  padding:4px 10px;min-width:100px;
}
.status-text{font-family:var(--mono);font-size:12px;color:#f0e060;letter-spacing:1px;}

.sl-row{display:flex;align-items:center;gap:6px;}
.sl-label{font-family:var(--font);font-size:14px;font-weight:700;color:var(--win-black);white-space:nowrap;}
.sl-val{font-family:var(--mono);font-size:12px;color:var(--win-black);min-width:34px;text-align:right;}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:16px;border:none;background:transparent;
  outline:none;cursor:pointer;flex:1;padding:0;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--inset-bg);box-shadow:var(--bev-in);border:none;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:22px;margin-top:-8px;
  background:var(--win-face);box-shadow:var(--bev-out2);border:none;cursor:grab;border-radius:0;
}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;}
input[type=range]::-moz-range-track{height:6px;background:var(--inset-bg);border:none;}
input[type=range]::-moz-range-thumb{width:14px;height:22px;background:var(--win-face);box-shadow:var(--bev-out2);border:none;cursor:grab;border-radius:0;}

.tvol{
  -webkit-appearance:none;appearance:none;
  width:20px;height:2px;background:var(--inset-bg);border:none;
  box-shadow:var(--bev-in);outline:none;cursor:pointer;
  transform:rotate(-90deg);margin:0;padding:0;
}
.tvol::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:16px;
  background:var(--win-face);box-shadow:var(--bev-out);border:none;cursor:grab;border-radius:0;
}


.main-area{
  display:grid;grid-template-columns:1fr 180px;gap:4px;align-items:start;
}

.seq-panel{background:var(--win-face);box-shadow:var(--bev-in2);padding:2px;}
.seq-header{
  background:var(--panel-in);box-shadow:var(--bev-in);
  padding:4px 8px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.5px;
}
.seq-body{padding:8px;}

.seq-track{
  display:grid;grid-template-columns:62px 1fr 28px;
  align-items:center;gap:6px;padding:4px 0;
}
.seq-track+.seq-track{border-top:1px solid var(--win-shadow);}

.trk-info{display:flex;align-items:center;gap:5px;}
.trk-pip{width:10px;height:10px;border-radius:1px;box-shadow:var(--bev-out);flex-shrink:0;}
.trk-lbl{font-family:var(--font);font-size:14px;font-weight:700;white-space:nowrap;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.beat-group{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  padding:1px;background:var(--panel-in);box-shadow:var(--bev-in);
}

.step{
  aspect-ratio:1/1;width:100%;
  background:var(--win-face);box-shadow:var(--bev-out2);
  cursor:pointer;position:relative;transition:none;border:none;
}
.step:hover{background:#d8d4cc;}
.step:active{box-shadow:var(--bev-in2);}

.t-kick  .step.on{background:var(--kick);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}
.t-snare .step.on{background:var(--snare);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}
.t-hihat .step.on{background:var(--hihat);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}
.t-perc  .step.on{background:var(--perc);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}
.t-bass  .step.on{background:var(--bass);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}
.t-chord .step.on{background:var(--chord);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2);}


.step.now{outline:2px solid #f0e060;outline-offset:-2px;z-index:2;}
.step.now::after{content:'';position:absolute;inset:0;background:rgba(240,224,96,.35);pointer-events:none;}

.side-panel{display:flex;flex-direction:column;gap:4px;}
.preset-list{background:var(--inset-bg);box-shadow:var(--bev-in2);overflow-y:auto;max-height:240px;}
.preset-item{
  padding:4px 8px;cursor:default;
  font-family:var(--font);font-size:14px;
  border-bottom:1px solid var(--win-shadow);
  display:flex;align-items:center;gap:6px;user-select:none;
}
.preset-item:last-child{border-bottom:none;}
.preset-item:hover{background:var(--win-blue);color:#fff;}
.preset-item.active{background:var(--win-blue);color:#fff;}
.preset-num{font-family:var(--mono);font-size:10px;opacity:.6;flex-shrink:0;min-width:16px;}

.bottom-area{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr 160px;gap:4px;align-items:start;
}
.fx-module{background:var(--win-face);box-shadow:var(--bev-in2);padding:2px;}
.fx-header{
  background:var(--panel-in);box-shadow:var(--bev-in);
  padding:3px 8px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.5px;
}
.fx-body{padding:8px 8px 6px;}
.fx-val-row{display:flex;align-items:center;justify-content:space-between;}
.fx-val-sub{font-family:var(--mono);font-size:9px;color:var(--win-darker);}
.fx-val-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--win-black);}

.vu-bar{display:flex;gap:1px;margin-top:3px;}
.vu-seg{flex:1;height:5px;background:var(--panel-in);box-shadow:var(--bev-in);}
.vu-seg.lit.g{background:#207820;}
.vu-seg.lit.a{background:#b88000;}
.vu-seg.lit.r{background:#c03020;}

.master-module{background:var(--win-face);box-shadow:var(--bev-in2);padding:2px;}
.master-header{
  background:var(--win-blue);color:#fff;padding:3px 8px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;
}
.master-body{padding:8px;}
.master-meter{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.meter-bar{height:8px;background:var(--inset-bg);box-shadow:var(--bev-in);position:relative;overflow:hidden;}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#207820 0%,#b88000 70%,#c03020 100%);transition:width .05s;}
.meter-label{font-family:var(--mono);font-size:8px;color:var(--win-darker);letter-spacing:1px;}

.viz-wrap{background:#1a1a0a;box-shadow:var(--bev-in2);height:44px;margin-bottom:4px;overflow:hidden;}
#vizCanvas{display:block;width:100%;height:44px;}

.beat-strip{background:var(--panel-in);box-shadow:var(--bev-in);padding:4px 6px;}
.beat-leds{display:flex;gap:4px;margin-top:3px;}

.scene-header{
  background:var(--panel-in);box-shadow:var(--bev-in);
  padding:3px 8px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.5px;
}

@media(max-width:860px){
  .main-area{grid-template-columns:1fr;}
  .side-panel{flex-direction:row;flex-wrap:wrap;}
  .preset-list{max-height:120px;flex:1;}
  .bottom-area{grid-template-columns:1fr 1fr;}
  .transport-row{flex-wrap:wrap;gap:4px;}
  .transport-sep{display:none;}
}
@media(max-width:560px){
  .bottom-area{grid-template-columns:1fr 1fr;}
  .steps{gap:3px;}
  .beat-group{gap:1px;}
  .seq-track{grid-template-columns:14px 1fr 18px;gap:4px;}
  .trk-lbl{display:none;}
  .bpm-digits{font-size:20px;}
  .bpm-arrow[data-step="5"]{display:none;}
}
@media(max-width:400px){
  .sl-val{display:none;}
  .status-cluster{min-width:70px;}
}