/* Static Divisions Synth Box — hardware-ish soft synth / drum machine UI
   Deep near-black, teal neon, Manrope. Big PC / iPad layout. */
@font-face{font-family:Manrope;src:url("fonts/Manrope-Var.woff") format("woff");font-weight:200 800;font-display:swap}
:root{
  --bg:#040a0b;--bg2:#071214;--fg:#eafffb;--mut:rgba(234,255,251,.55);
  --teal:#00e5cc;--pink:#ff2bd6;--vio:#9b5cff;--line:rgba(0,229,204,.28);
  --panel:rgba(0,229,204,.04);--shadow:0 0 40px rgba(0,229,204,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:Manrope,system-ui,sans-serif}
body{min-height:100dvh;overflow:auto}

#sb{
  min-height:100dvh;display:grid;
  grid-template-columns:220px minmax(0,1fr) 280px;
  grid-template-rows:auto minmax(0,1fr) 120px;
  grid-template-areas:
    "top top top"
    "trks seq bank"
    "trks keys bank";
  gap:12px;padding:14px 16px 16px;
  background:
    radial-gradient(1200px 600px at 70% -10%,rgba(0,229,204,.07),transparent 60%),
    radial-gradient(800px 400px at 10% 100%,rgba(155,92,255,.06),transparent 50%),
    var(--bg);
}

/* ----- top bar ----- */
.top{grid-area:top;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,rgba(0,229,204,.06),rgba(0,229,204,.02));box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;margin-right:6px}
.brand .mark{width:28px;height:28px;border-radius:50%;border:2px solid var(--teal);
  background:radial-gradient(circle at 35% 35%,rgba(0,229,204,.55),transparent 65%);
  box-shadow:0 0 14px rgba(0,229,204,.55)}
.brand b{font:800 15px/1 Manrope,sans-serif;letter-spacing:.04em}
.brand small{display:block;font:700 7px/1 Manrope,sans-serif;letter-spacing:.32em;color:var(--teal);margin-top:4px;text-transform:uppercase}
.credit{font:700 6.5px/1 Manrope,sans-serif;letter-spacing:.28em;color:var(--mut);text-transform:uppercase;margin-left:4px}

button{font:700 10px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  background:rgba(4,10,11,.75);border:1px solid var(--line);border-radius:5px;padding:0 10px;height:32px;cursor:pointer;touch-action:manipulation}
button:hover{border-color:rgba(0,229,204,.7)}
button:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.play{min-width:72px;border-color:var(--teal);color:var(--teal);font-size:11px}
.play[aria-pressed=true]{background:rgba(0,229,204,.16);box-shadow:0 0 14px rgba(0,229,204,.45)}
.bpm{display:flex;align-items:center;gap:4px}
.bpm button{width:28px;padding:0;font-size:14px;letter-spacing:0}
.bpmv{font:800 16px Manrope,sans-serif;min-width:36px;text-align:center;cursor:pointer}
.bpm small{font-size:8px;letter-spacing:.18em;color:var(--mut)}
.pgs{display:flex;gap:4px}
.pg{width:36px;padding:0}
.pg[aria-pressed=true]{border-color:var(--teal);color:var(--teal);background:rgba(0,229,204,.12)}
.scw{position:relative;flex:1;min-width:140px;height:36px;border:1px solid rgba(0,229,204,.14);border-radius:6px;background:rgba(0,229,204,.03);overflow:hidden}
.scope{width:100%;height:100%;display:block}
.np{position:absolute;left:8px;top:4px;font:600 8px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:rgba(234,255,251,.7);pointer-events:none}
.np b{color:var(--teal)}

/* knobs */
.knobs{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-left:auto}
.knob{--v:.5;position:relative;width:36px;height:36px;border-radius:50%;cursor:ns-resize;touch-action:none;flex:none;
  background:conic-gradient(from 225deg,var(--pink) 0,var(--teal) calc(var(--v)*270deg),rgba(0,229,204,.12) calc(var(--v)*270deg) 270deg,transparent 270deg)}
.knob::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(0,229,204,.25)}
.knob span{position:absolute;left:50%;top:5px;width:2px;height:10px;margin-left:-1px;background:#eafffb;transform-origin:50% 13px;transform:rotate(calc(-135deg + var(--v)*270deg));border-radius:1px;z-index:1}
.knob small{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:7px;font-weight:700;letter-spacing:.12em;color:var(--mut);margin-top:3px;white-space:nowrap}
.knob em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 8px/1 Manrope,sans-serif;color:var(--fg);z-index:1;pointer-events:none;font-style:normal}

/* ----- tracks ----- */
.trks{grid-area:trks;display:flex;flex-direction:column;gap:8px;min-height:0;
  border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel)}
.trks h2,.bank-wrap h2,.seq-wrap .sec-label{font:800 9px/1 Manrope,sans-serif;letter-spacing:.28em;color:var(--teal);text-transform:uppercase;margin:0 0 6px}
.trk-list{display:flex;flex-direction:column;gap:3px;overflow:auto;flex:1;min-height:0}
.trk{display:grid;grid-template-columns:28px 1fr 24px;align-items:center;gap:6px;height:34px;padding:0 8px;text-align:left;letter-spacing:.04em;text-transform:none;font-weight:700;font-size:11px}
.trk.on{border-color:var(--teal);background:rgba(0,229,204,.12);box-shadow:0 0 12px rgba(0,229,204,.25)}
.trk .tn{font:800 10px ui-monospace,Menlo,monospace;color:var(--mut)}
.trk .tv{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid var(--c,var(--teal));padding-left:6px}
.trk .tm{font-size:8px;color:var(--pink);letter-spacing:.08em}
.voice-read{font:600 10px/1.35 Manrope,sans-serif;color:var(--mut);padding:8px;border:1px solid rgba(0,229,204,.12);border-radius:6px;background:rgba(0,0,0,.25)}
.voice-read b{color:var(--teal);font-weight:800;margin-right:4px}
.voice-read i{display:block;font-style:normal;font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;color:rgba(234,255,251,.4)}
.note-read{font:800 12px ui-monospace,Menlo,monospace;color:var(--fg);margin-top:4px}

/* ----- sequencer ----- */
.seq-wrap{grid-area:seq;display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel)}
.seq{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow:auto}
.seq-head,.row{display:grid;grid-template-columns:36px 22px 22px repeat(16,minmax(0,1fr));gap:3px;align-items:stretch}
.seq-head .sn{font:700 8px/1 Manrope,sans-serif;color:var(--mut);text-align:center;padding-top:2px}
.seq-head .sn.beat{color:var(--teal)}
.row{min-height:28px}
.row.sel .lb{color:var(--teal);text-shadow:0 0 8px rgba(0,229,204,.5)}
.row.off .pad{opacity:.22}
.lb{font:800 10px Manrope,sans-serif;letter-spacing:.06em;color:var(--fg);border-left:3px solid var(--pc,var(--teal));padding:0 0 0 5px;background:transparent;height:auto;text-align:left}
.sm{height:auto;padding:0;font-size:8px;letter-spacing:0;border-radius:3px;border-color:rgba(234,255,251,.18);color:var(--mut);background:rgba(234,255,251,.03)}
.sm.s.lit{background:var(--teal);border-color:var(--teal);color:#04221f;box-shadow:0 0 8px rgba(0,229,204,.6)}
.sm.m.lit{background:var(--pink);border-color:var(--pink);color:#2a0322;box-shadow:0 0 8px rgba(255,43,214,.55)}
.pad{height:auto;min-height:26px;padding:0;border-radius:3px;border:1px solid rgba(0,229,204,.14);background:rgba(234,255,251,.03)}
.pad.q{background:rgba(234,255,251,.07)}
.pad.on{background:var(--pc,var(--teal));border-color:transparent;box-shadow:0 0 8px var(--pc,var(--teal))}
.pad.ph{border-color:rgba(234,255,251,.85)}
.pad.ph.on{filter:brightness(1.45);box-shadow:0 0 14px var(--pc,var(--teal))}
.pad:hover{border-color:rgba(0,229,204,.55)}

/* ----- voice bank ----- */
.bank-wrap{grid-area:bank;display:flex;flex-direction:column;gap:8px;min-height:0;
  border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel)}
.cats{display:flex;flex-wrap:wrap;gap:4px}
.cat-btn{height:24px;font-size:8px;padding:0 7px}
.cat-btn.on{border-color:var(--pink);color:var(--pink);box-shadow:0 0 10px rgba(255,43,214,.3)}
.bank{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:auto;flex:1;min-height:0;align-content:start}
.vpad{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:42px;padding:6px 8px;text-transform:none;letter-spacing:.02em;font-weight:700;font-size:10px;border-left:3px solid var(--c,var(--teal))}
.vpad b{font:800 9px ui-monospace,Menlo,monospace;color:var(--teal);letter-spacing:.08em}
.vpad span{color:var(--fg);line-height:1.15;text-align:left}
.vpad.on{background:rgba(0,229,204,.14);border-color:var(--teal);box-shadow:0 0 10px rgba(0,229,204,.3)}
.vpad:hover{border-color:rgba(0,229,204,.6)}

/* ----- synth controls strip in bank footer ----- */
.synth-panel{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid rgba(0,229,204,.12)}
.waves{display:flex;gap:4px;flex-wrap:wrap}
.wave-btn{height:26px;font-size:8px;padding:0 8px}
.wave-btn.on{border-color:var(--teal);color:var(--teal);background:rgba(0,229,204,.12)}
.panel-knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;justify-items:center;padding:8px 0 4px}
.panel-knobs .knob{width:40px;height:40px}
.panel-actions{display:flex;gap:6px;flex-wrap:wrap}
.panel-actions button{flex:1;min-width:0;height:28px;font-size:8px}

/* ----- keyboard ----- */
.keys{grid-area:keys;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel)}
.keys .kmeta{display:flex;align-items:center;gap:10px;font:700 8px Manrope,sans-serif;letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.krow{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;flex:1;min-height:70px}
.key{height:auto;display:flex;align-items:flex-end;justify-content:center;padding:0 0 8px;border-radius:0 0 5px 5px;
  border-color:rgba(234,255,251,.14);background:linear-gradient(180deg,rgba(234,255,251,.05),rgba(234,255,251,.1))}
.key b{font-size:9px;font-weight:700;color:rgba(234,255,251,.75);letter-spacing:0}
.key.blk{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(20,30,32,.9));border-color:rgba(0,229,204,.2)}
.key.blk b{color:rgba(234,255,251,.45);font-size:8px}
.key.rt b{color:var(--teal)}
.key.dn{background:rgba(255,43,214,.3);border-color:var(--pink);box-shadow:0 0 14px rgba(255,43,214,.5)}

/* power overlay */
.pwr{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(4,10,11,.88);backdrop-filter:blur(6px);border:0;border-radius:0;height:auto;width:100%;
  font:800 18px/1 Manrope,sans-serif;letter-spacing:.4em;color:var(--teal);text-shadow:0 0 18px rgba(0,229,204,.7);text-transform:uppercase}
.pwr::before{content:"";width:48px;height:48px;border-radius:50%;border:2px solid var(--teal);
  box-shadow:0 0 20px rgba(0,229,204,.6),inset 0 0 14px rgba(0,229,204,.35);
  background:radial-gradient(circle,rgba(0,229,204,.4),transparent 65%);margin-bottom:8px}
.pwr small{font-size:10px;letter-spacing:.28em;color:var(--mut);text-shadow:none;font-weight:700}
.pwr[hidden]{display:none!important}

/* iPad / tablet */
@media (max-width:1100px){
  #sb{grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto 110px;
    grid-template-areas:"top top" "trks seq" "bank bank" "keys keys"}
  .bank{grid-template-columns:repeat(4,1fr);max-height:200px}
  .panel-knobs{grid-template-columns:repeat(7,1fr)}
}
@media (max-width:720px){
  #sb{grid-template-columns:1fr;grid-template-areas:"top" "seq" "trks" "bank" "keys";padding:8px;gap:8px}
  .trks{max-height:180px}
  .krow{grid-template-columns:repeat(12,minmax(0,1fr))}
  .krow .key:nth-child(n+13){display:none}
  .knobs .knob:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  .pad.on,.play[aria-pressed=true],.trk.on{box-shadow:none}
}