*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;background:#cfccc5;font-family:ui-monospace,Menlo,Consolas,monospace;color:#1b1b1b;touch-action:manipulation}
#dev{max-width:460px;margin:0 auto;min-height:100vh;background:#e6e4df;padding:12px 12px 20px;box-shadow:0 0 0 1px #bbb inset}
header{display:flex;justify-content:space-between;align-items:center}
.brand b{font-size:22px;letter-spacing:-1px}.brand span{font-size:22px;color:#ff5a1f}.brand i{display:block;font-size:9px;font-style:normal;color:#777;letter-spacing:1px}
.led{width:10px;height:10px;border-radius:50%;background:#555;transition:.05s}.led.on{background:#ff5a1f;box-shadow:0 0 8px #ff5a1f}
#screen{background:#111;border-radius:8px;margin:10px 0;padding:6px;position:relative}
#wave{width:100%;height:84px;display:block;touch-action:none}
#lcd{display:flex;justify-content:space-between;color:#e8ff5a;font-size:12px;padding:4px 2px 0}#lcdName{color:#fff}
.knobs{display:flex;justify-content:space-between;margin:4px 0 8px}
.knob{width:22%;text-align:center;font-size:9px;color:#555;touch-action:none}
.knob .c{width:46px;height:46px;margin:0 auto 3px;border-radius:50%;background:#f7f6f3;border:2px solid #222;position:relative}
.knob .c:after{content:"";position:absolute;left:50%;top:3px;width:3px;height:15px;margin-left:-1.5px;background:var(--col,#222);border-radius:2px;transform-origin:50% 20px;transform:rotate(var(--r,0deg))}
.knob .v{color:#111;font-size:10px}
.row{display:flex;gap:6px;margin:6px 0}
button{font:inherit;font-size:11px;border:0;background:#f7f6f3;border-radius:6px;padding:8px 4px;flex:1;box-shadow:0 2px 0 #aaa;color:#222}
button:active{transform:translateY(2px);box-shadow:none}
button.on{background:#222;color:#fff}
.k.orange{background:#ff5a1f;color:#fff}.k.red{color:#e0261b}.k.red.on{background:#e0261b;color:#fff}.k.on{background:#2f5bff;color:#fff}
.banks{display:flex;gap:3px;flex:2}.banks button.on{background:#ffcf2e;color:#111}
#panel{font-size:11px;min-height:44px}
#panel .row{flex-wrap:wrap}#panel button{flex:0 0 auto;padding:7px 9px}
#pads{-webkit-touch-callout:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0;touch-action:none}
.pad{aspect-ratio:1;border-radius:14px;background:#f7f6f3;box-shadow:0 4px 0 #a9a6a0,inset 0 0 0 1px #ccc;position:relative;font-size:9px;padding:6px;color:#666;transition:transform .04s}
.pad.hit{transform:translateY(3px) scale(.97);box-shadow:0 1px 0 #a9a6a0;background:var(--pc,#ff5a1f);color:#fff}
.pad .n{position:absolute;bottom:6px;right:7px;color:#bbb}
.pad.sel{outline:2px solid #222}
.pad.step{background:#fff;}.pad.step.act{background:#2f5bff;color:#fff}.pad.step.cur{box-shadow:0 4px 0 #ff5a1f,inset 0 0 0 2px #ff5a1f}
.pad .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:transparent}.pad.has .dot{background:var(--pc)}
footer{font-size:8px;color:#999;text-align:center;margin-top:8px;letter-spacing:1px}
#unlock{position:fixed;inset:0;background:rgba(230,228,223,.92);display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:2px;color:#ff5a1f}
#unlock.gone{display:none}
select,input[type=text]{font:inherit;font-size:11px;padding:6px;border-radius:6px;border:1px solid #bbb;background:#fff}
#grid{display:none}
/* folded (cover screen): pads only */
body.folded #screen,body.folded .knobs,body.folded .modes,body.folded #panel,body.folded footer,body.folded #bRec,body.folded #bRpt,body.folded #bMet,body.folded .brand i{display:none}
body.folded #dev{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:8px}
body.folded #main,body.folded #right{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
body.folded #pads{gap:10px}
/* unfolded (inner screen): workstation */
body.wide #dev{max-width:none;padding:16px 20px}
body.wide #main{display:grid;grid-template-columns:1fr minmax(320px,44%);gap:20px}
body.wide #wave{height:140px}
body.wide #grid{display:grid;grid-template-columns:52px repeat(16,1fr);gap:2px;margin-top:10px;font-size:9px}
#grid div{height:18px;border-radius:3px;background:#f7f6f3}#grid .l{background:none;line-height:18px;overflow:hidden;color:#555}
#grid .on{background:#2f5bff}#grid .b4{box-shadow:inset 2px 0 0 #bbb}#grid .cur{outline:2px solid #ff5a1f}#grid .sl{color:#ff5a1f}
body.wide.land #main{grid-template-columns:1fr 46%}
body.folded #pads{flex:1;grid-auto-rows:1fr}body.folded .pad{aspect-ratio:auto;font-size:11px}
#unlock{flex-direction:column;gap:8px;touch-action:none;cursor:pointer;z-index:10}#unlock b{font-size:28px;background:#ff5a1f;color:#fff;padding:22px 30px;border-radius:18px}#unlock small{color:#777;font-size:11px}
#status{position:fixed;left:0;right:0;bottom:0;font-size:10px;color:#666;background:rgba(230,228,223,.9);padding:2px 6px;z-index:11;pointer-events:none;white-space:nowrap;overflow:hidden}