*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#16161e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}#root{min-height:100vh}.scene{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100vh;padding:40px 20px;display:flex}.op1{-webkit-user-select:none;user-select:none;background:linear-gradient(176deg,#f0ede6 0%,#e9e5de 40%,#e2ded7 100%);border-radius:16px;width:960px;max-width:95vw;padding:22px 28px 20px;position:relative;box-shadow:inset 0 1px #ffffff73,0 2px #d8d4cd,0 4px #ccc8c1,0 6px #c0bcb5,0 8px #b4b0a9,0 14px 28px #00000038,0 32px 64px #0000001f}.op1-badge{letter-spacing:3px;color:#d0ccc5;font-size:11px;font-weight:700;position:absolute;top:10px;right:22px}.op1-brand{letter-spacing:2.5px;color:#cbc7c0;font-size:7.5px;font-weight:500;position:absolute;bottom:6px;right:22px}.op1-top{align-items:center;gap:36px;margin-bottom:18px;display:flex}.screen{background:#000;border-radius:6px;flex-shrink:0;padding:5px;box-shadow:inset 0 2px 6px #0009,0 1px #ffffff14}.screen canvas{border-radius:3px;display:block}.knobs{flex:1;justify-content:flex-end;gap:28px;padding-right:14px;display:flex}.knob-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.knob{background:var(--kc);cursor:grab;border-radius:50%;width:54px;height:54px;transition:box-shadow .15s;position:relative;box-shadow:0 3px 6px #0000002e,0 6px 12px #00000014,inset 0 -3px 6px #0000002e,inset 0 3px 4px #ffffff40}.knob:hover{box-shadow:0 3px 8px #0000003d,0 6px 16px #0000001f,inset 0 -3px 6px #0000002e,inset 0 3px 4px #ffffff4d}.knob:active{cursor:grabbing}.knob-cap{border-radius:50%;justify-content:center;display:flex;position:absolute;inset:0}.knob-mark{background:#00000059;border-radius:2px;width:4px;height:10px;margin-top:6px}.knob-label{text-transform:uppercase;color:#a09c96;letter-spacing:1.2px;font-size:8px;font-weight:600}.op1-buttons{align-items:center;gap:12px;margin-bottom:14px;padding:0 2px;display:flex}.btn-group{gap:3px;display:flex}.seq-group{flex:1;justify-content:center}.op1-btn{color:#908c86;cursor:pointer;letter-spacing:.5px;background:linear-gradient(#dcd8d2 0%,#d2cec7 100%);border:none;border-radius:3px;justify-content:center;align-items:center;gap:3px;min-width:36px;height:22px;padding:0 6px;font-family:inherit;font-size:7.5px;font-weight:700;transition:all 80ms;display:flex;box-shadow:0 1.5px 2px #0000001f,inset 0 1px #ffffff40}.op1-btn:active{background:#ccc8c1;transform:translateY(1px);box-shadow:0 .5px 1px #0000001f}.mode-btn.active{background:linear-gradient(#eae6e0 0%,#e0dcd5 100%);box-shadow:0 1.5px 2px #0000001a,inset 0 1px #fff6}.mode-dot{border-radius:50%;flex-shrink:0;width:5px;height:5px}.rec-btn{color:#d94040}.rec-btn.recording{color:#ff2020;background:linear-gradient(#f0d0d0 0%,#e8c0c0 100%);animation:.7s ease-in-out infinite rec-pulse}.mode-btn.sample-active{background:linear-gradient(#dde8dd 0%,#d0ddd0 100%);box-shadow:0 1.5px 2px #0000001a,inset 0 1px #fff6}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.5}}.keyboard{border-radius:4px;height:116px;position:relative;overflow:hidden}.white-keys{gap:2px;height:100%;display:flex}.wkey{cursor:pointer;background:linear-gradient(#faf9f6 0%,#f1eee8 100%);border-radius:0 0 5px 5px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:6px;transition:background 40ms,box-shadow 40ms,transform 40ms;display:flex;box-shadow:1px 0 #e0ddd7,-1px 0 #e0ddd7,0 2px 3px #00000014,inset 0 -4px 8px #00000008,inset 0 1px #fff}.wkey:hover{background:linear-gradient(#f5f3f0 0%,#edebe5 100%)}.wkey.pressed{transform-origin:top;background:linear-gradient(#eae7e1 0%,#e0ddd7 100%);transform:scaleY(.99);box-shadow:1px 0 #ddd,-1px 0 #ddd,0 1px 1px #0000000f,inset 0 2px 4px #00000014}.black-keys{pointer-events:none;height:62%;position:absolute;inset:0}.bkey{cursor:pointer;pointer-events:auto;z-index:2;background:linear-gradient(#404040 0%,#2d2d2d 50%,#1d1d1d 100%);border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;height:100%;padding-bottom:5px;transition:background 40ms,height 40ms,box-shadow 40ms;display:flex;position:absolute;box-shadow:0 3px 5px #00000040,inset 0 -3px 5px #0000004d,inset 0 1px #ffffff14}.bkey:hover{background:linear-gradient(#4a4a4a 0%,#363636 50%,#262626 100%)}.bkey.pressed{background:linear-gradient(#353535 0%,#252525 100%);height:58%;box-shadow:0 1px 2px #00000040,inset 0 1px 3px #0006}.keyhint{color:#c0bdb7;pointer-events:none;letter-spacing:.5px;font-size:7px;font-weight:600}.bkey .keyhint{color:#5a5a5a}.hint{color:#6b6b8a;text-align:center;letter-spacing:.15px;max-width:640px;font-size:13px;line-height:1.65}.hint kbd{color:#b0b0cc;background:#2a2a40;border:1px solid #3a3a55;border-radius:3px;margin:0 1px;padding:1px 5px;font-family:inherit;font-size:11px}