:root{--bg: #0b1220;--fg: #e5e7eb;--muted: #94a3b8;--brand: #a78bfa}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif}.container{max-width:840px;margin:0 auto;padding:24px}.card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;box-shadow:0 10px 25px #0003}.btn{background:var(--brand);color:#0b1220;padding:10px 16px;border:0;border-radius:12px;font-weight:700;cursor:pointer}.btn:disabled{opacity:.5;cursor:default}.input{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--fg);border-radius:12px;padding:10px}.range{width:100%}.small{color:var(--muted);font-size:12px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:640px){.row{grid-template-columns:1fr}}.piano-roll-container{min-height:300px}@media(max-width:768px){.container{padding:12px}.piano-roll-container{min-height:400px}.btn{min-height:44px;min-width:44px;padding:12px 20px}.card{padding:16px}}.virtual-keyboard{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media(max-width:768px){.virtual-keyboard button{min-width:44px;min-height:44px}}@supports (-webkit-overflow-scrolling: touch){.piano-roll-container>div{-webkit-overflow-scrolling:touch}}.piano-roll-container{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}