:root{--bg:#221f22;--surface:#2d2a2e;--surface-2:#403e41;--text:#fcfcfa;--text-dim:#939293;--accent:#fc9867;--accent-active:#ffd866;--danger:#ff6188;--on-accent:#221f22;--tonic:#a9dc76;--predominant:#ffd866;--dominant:#ff6188;--radius:14px;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{font-family:inherit}.app{max-width:640px;min-height:100vh;padding:env(safe-area-inset-top,12px) 12px calc(env(safe-area-inset-bottom,12px) + 12px);flex-direction:column;gap:12px;margin:0 auto;display:flex}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:8px;display:flex}.app-header h1{font-family:var(--font-mono);margin:0;font-size:1.3rem;font-weight:700}.key-selector{align-items:center;gap:8px;display:flex}.key-selector-label{color:var(--text-dim);font-size:.9rem;font-weight:600}.key-selector select{background:var(--surface);color:var(--text);border:1px solid var(--surface-2);border-radius:10px;min-height:44px;padding:10px 12px;font-size:1rem}.pad-area{flex-direction:column;flex:1;gap:12px;display:flex}.pad-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (width>=420px){.pad-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=640px){.pad-grid{grid-template-columns:repeat(4,1fr)}}.pad-wrapper{flex-direction:column;gap:6px;display:flex;position:relative}.pad-wrapper.dragging{opacity:.5}.pad-wrapper.drag-over .pad{border-color:var(--accent);border-style:dashed}.pad{background:var(--surface);border:2px solid var(--surface-2);border-radius:var(--radius);width:100%;min-height:92px;color:var(--text);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px;transition:transform 50ms,background .15s,border-color .15s;display:flex;position:relative}.pad-function{font-family:var(--font-mono);letter-spacing:.03em;white-space:nowrap;background:#ffffff1a;border-radius:999px;padding:2px 8px;font-size:.65rem;font-weight:700}.pad-function-tonic{color:var(--tonic)}.pad-function-predominant{color:var(--predominant)}.pad-function-dominant{color:var(--dominant)}.pad.active .pad-function{filter:brightness(.8);background:#0000002e}.pad:active{transform:scale(.96)}.pad.active{background:var(--accent);border-color:var(--accent-active);color:var(--on-accent)}.drag-handle{width:28px;height:28px;color:var(--text);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff24;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:6px;right:6px}.drag-handle svg circle{fill:currentColor}.pad-roman{font-family:var(--font-mono);font-size:1.1rem;font-weight:700}.pad-chord-name{font-family:var(--font-mono);color:var(--text-dim);font-size:.95rem}.pad.active .pad-chord-name{color:var(--on-accent);opacity:.75}.pad-beats{color:var(--text-dim);font-size:.75rem}.pad-edit-controls{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.pad-edit-controls button{background:var(--surface-2);min-height:40px;color:var(--text);border:none;border-radius:8px;font-size:.85rem}.pad-edit-controls .remove-btn{color:var(--danger)}.pad-edit-controls .octave-shifted{color:var(--on-accent);background:var(--accent)}.empty-state{text-align:center;color:var(--text-dim);grid-column:1/-1;padding:24px}.editor-tools{justify-content:center;display:flex}.keyboard-section{width:100%}.keyboard{background:var(--surface);border:1px solid var(--surface-2);border-radius:var(--radius);width:100%;height:110px;display:flex;position:relative;overflow:hidden}.keyboard-white-keys{width:100%;height:100%;display:flex}.white-key{appearance:none;cursor:pointer;background:#eef0f4;border:none;border-right:1px solid #00000026;flex:1 0 0;margin:0;padding:0;transition:background .1s}.white-key:last-child{border-right:none}.white-key.out-of-scale{background:#aeb0b8}.white-key.active{background:var(--accent-active)}.keyboard-black-keys{pointer-events:none;position:absolute;inset:0}.black-key{appearance:none;cursor:pointer;pointer-events:auto;background:#1a1c22;border:1px solid #000;border-top:none;border-radius:0 0 4px 4px;width:4%;height:62%;margin:0;padding:0;transition:background .1s;position:absolute;top:0;transform:translate(-50%)}.black-key.out-of-scale{background:#6b6e78}.black-key.active{background:var(--accent);border-color:var(--accent-active)}.transport{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.big-btn{cursor:pointer;border:none;border-radius:12px;min-height:56px;font-size:1.15rem;font-weight:700}.big-btn.primary{background:var(--accent);color:var(--on-accent)}.big-btn.stop{background:var(--danger);color:var(--on-accent)}.transport-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.bpm-label{color:var(--text-dim);flex:1;align-items:center;gap:8px;min-width:120px;font-size:.9rem;display:flex}.bpm-label input{background:var(--surface-2);width:100%;min-height:44px;color:var(--text);font-family:var(--font-mono);border:none;border-radius:8px;padding:8px 10px;font-size:1rem}.toggle-btn{background:var(--surface-2);min-height:44px;color:var(--text-dim);cursor:pointer;border:none;border-radius:10px;padding:0 16px;font-weight:600}.toggle-btn.on{background:var(--accent);color:var(--on-accent)}.progression-tools{border-top:1px solid var(--surface-2);border-bottom:1px solid var(--surface-2);flex-wrap:wrap;gap:8px;margin-top:8px;margin-bottom:8px;padding-top:16px;padding-bottom:16px;display:flex}.secondary-btn{background:var(--surface);border:1px solid var(--surface-2);min-width:100px;min-height:48px;color:var(--text);cursor:pointer;border-radius:10px;flex:1;font-weight:600}.secondary-btn.on{background:var(--accent);border-color:var(--accent-active);color:var(--on-accent)}.modal{z-index:10;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal[hidden]{display:none}@media (width>=640px){.modal{align-items:center}}.modal-content{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:80vh;padding:16px;overflow-y:auto}@media (width>=640px){.modal-content{border-radius:16px}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.modal-header h2{font-family:var(--font-mono);margin:0;font-size:1.1rem}.close-btn{background:var(--surface-2);color:var(--text);cursor:pointer;border:none;border-radius:50%;width:36px;height:36px;font-size:1rem}.bank-list{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.bank-item{text-align:left;background:var(--surface-2);width:100%;min-height:48px;color:var(--text);cursor:pointer;border:none;border-radius:10px;padding:0 14px;font-size:1rem}.bank-item-row{gap:8px;display:flex}.bank-item-row .bank-item{flex:1}.bank-item-row .remove-btn{background:var(--surface-2);min-width:44px;color:var(--danger);cursor:pointer;border:none;border-radius:10px}.modal-tabs{gap:6px;margin-bottom:12px;display:flex}.tab-btn{background:var(--surface-2);min-height:40px;color:var(--text-dim);cursor:pointer;border:none;border-radius:10px;flex:1;font-weight:600}.tab-btn.active{background:var(--accent);color:var(--on-accent)}.chord-palette{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.palette-chip{background:var(--surface-2);min-height:48px;color:var(--text);font-family:var(--font-mono);cursor:pointer;border:none;border-radius:10px;font-weight:600}.palette-chip:active{background:var(--accent);color:var(--on-accent)}.manual-help{color:var(--text-dim);margin:0 0 12px;font-size:.85rem;line-height:1.4}.manual-help code{background:var(--surface-2);font-family:var(--font-mono);border-radius:4px;padding:1px 5px;font-size:.85em}.manual-input{background:var(--surface-2);border:1px solid var(--surface-2);width:100%;color:var(--text);font-family:var(--font-mono);resize:vertical;box-sizing:border-box;border-radius:10px;padding:10px 12px;font-size:1rem}.manual-input:focus{border-color:var(--accent);outline:none}.manual-error{color:var(--danger);margin:10px 0 0;font-size:.85rem}.manual-input+.manual-error,.manual-error+.secondary-btn{margin-top:10px}