*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--panel: rgba(22, 33, 62, .88);--panel-strong: #121c33;--control-surface: #14395f;--control-surface-strong: #183f68;--border: #2a2a4a;--border-strong: #355173;--text: #e0e0e0;--text-muted: #b8c7d9;--text-soft: #8ea0b6;--text-faint: #7f91a8;--accent: #e2b714;--accent-warm: #f0c832;--accent-cool: #6ec6ff;--danger: #c96c7d;--success: #2ecc71;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--shadow-soft: 0 10px 24px rgba(4, 10, 24, .18)}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at top,rgba(110,198,255,.08),transparent 28%),linear-gradient(180deg,#1b1d34,var(--bg));color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:860px;padding:2rem 1.5rem;text-align:center}.app-header{margin-bottom:1rem}.feedback-banner{text-align:center;margin-bottom:.5rem;background:var(--accent-cool);padding:.4rem 1rem;border-radius:var(--radius-sm)}.feedback-banner a{font-size:.85rem;font-weight:600;color:var(--panel-strong);text-decoration:none;letter-spacing:.03em}.feedback-banner a:hover{text-decoration:underline}.app-layout{display:grid;gap:1rem}#app-version{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-cool);margin-bottom:.45rem}h1{font-size:1.3rem;font-weight:400;color:var(--text-soft);letter-spacing:.05em;text-transform:uppercase}.surface-block,.control-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-soft)}.surface-display{padding:1rem}.section-heading{display:flex;justify-content:flex-start;margin-bottom:.85rem;text-align:left}.section-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-cool)}#display{padding:.5rem .25rem 0;position:relative}#display-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;column-gap:1.5rem;width:100%}.col-header{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-cool);min-height:1.4rem;display:flex;align-items:flex-end}#current-header{grid-column:1;grid-row:1}#next-header{grid-column:2;grid-row:1}#display.alternate-display-sides.display-current-right #current-header{grid-column:2}#display.alternate-display-sides.display-current-right #next-header{grid-column:1}#key-display,#next-key-display{grid-row:2;font-size:1.1rem;font-weight:700;line-height:1.1;color:var(--accent);min-height:1.5rem;display:flex;align-items:center;gap:.4rem;transition:color .15s}#key-display{grid-column:1}#next-key-display{grid-column:2;color:var(--accent-cool)}#display.alternate-display-sides.display-current-right #key-display{grid-column:2}#display.alternate-display-sides.display-current-right #next-key-display{grid-column:1}#key-display:not(:empty):before,#next-key-display:not(:empty):before{content:"key:";font-size:.72em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8}#chord-display,#next-chord-display{grid-row:3;font-size:5rem;font-weight:700;line-height:1.1;color:var(--text);display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:visible}#chord-display{grid-column:1}#next-chord-display{grid-column:2;color:var(--text-soft)}#display.alternate-display-sides.display-current-right #chord-display{grid-column:2}#display.alternate-display-sides.display-current-right #next-chord-display{grid-column:1}#next-header.hidden,#next-key-display.hidden,#next-chord-display.hidden{opacity:0;pointer-events:none;transition:opacity .2s}#next-header:not(.hidden),#next-key-display:not(.hidden),#next-chord-display:not(.hidden){opacity:.55;transition:opacity .2s}.display-show-both #key-display,.display-show-both #next-key-display{font-size:1.1rem;min-height:1.5rem}.display-show-both #chord-display,.display-show-both #next-chord-display{font-size:5rem}.display-chords-only #key-display,.display-chords-only #next-key-display{display:none}.display-chords-only #display-columns{grid-template-rows:auto auto}.display-chords-only #chord-display,.display-chords-only #next-chord-display{grid-row:2;font-size:6rem}.display-key-only #chord-display,.display-key-only #next-chord-display{display:none}.display-key-only #display-columns{grid-template-rows:auto auto}.display-key-only #key-display,.display-key-only #next-key-display{grid-row:2;font-size:1.5rem;min-height:1.8rem}#beat-indicator{display:flex;justify-content:center;gap:12px;margin-top:1rem}.beat-dot{width:14px;height:14px;border-radius:50%;background:var(--border);transition:background .08s}.beat-dot.active{background:var(--accent)}.beat-dot.intro{background:var(--accent-cool)}#controls{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:start}.control-panel{text-align:left}.control-panel-compact{grid-column:1 / -1}.control-panel .control-row+.control-row,.control-panel details+details,.control-panel .toggles{margin-top:1rem}.control-row{text-align:left}.control-row label,.control-row legend{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.3rem}select,input[type=text]{width:100%;padding:.5rem .65rem;font-size:.95rem;background:var(--control-surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:border-color .15s,background .15s,box-shadow .15s}select:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e2b71424}.pattern-picker{position:relative}.pattern-picker-select,.pattern-picker-custom input[type=text]{min-height:2.4rem}.pattern-picker-custom{position:relative}.pattern-picker-custom input[type=text]{padding-right:2.5rem}.pattern-picker.custom-active .pattern-picker-custom{display:block}.pattern-picker.custom-active .pattern-picker-select{position:absolute;top:0;right:0;width:2.4rem;height:100%;opacity:0;z-index:2}.pattern-picker-arrow{position:absolute;top:50%;right:.8rem;width:.7rem;height:.4rem;transform:translateY(-50%);pointer-events:none}.pattern-picker-arrow:before{content:"";display:block;width:100%;height:100%;background:var(--text);clip-path:polygon(0 0,100% 0,50% 100%)}input[type=range]{width:100%;accent-color:#e2b714}.hint{font-size:.75rem;color:var(--text-faint);margin-top:.25rem}.pattern-preview-row{margin-top:.1rem}.pattern-preview-field{min-height:2.5rem;padding:.65rem .8rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#14395f85;color:var(--text-muted);text-align:left;line-height:1.45;white-space:normal;word-break:break-word}#preset-feedback{color:var(--text-faint);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}#preset-feedback.error-text{color:var(--danger)}.preset-feedback-action{padding:.3rem .65rem;border:1px solid rgba(110,198,255,.28);border-radius:999px;background:#6ec6ff14;color:var(--accent-cool);font-size:.74rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.preset-feedback-action:hover{background:#6ec6ff1f;border-color:#6ec6ff6b}.modal-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:#070c1cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-overlay.hidden{display:none}.modal-card{width:min(100%,32rem);padding:1.25rem;border:1px solid rgba(110,198,255,.2);border-radius:1rem;background:linear-gradient(180deg,#182852fa,#0e1936fa);box-shadow:0 24px 60px #00000059}.modal-card h2{margin:0 0 .65rem;font-size:1.15rem}.modal-card p{margin:0;color:var(--text-faint);line-height:1.5}.modal-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.modal-button{padding:.7rem 1rem;border:1px solid transparent;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;box-shadow:inset 0 1px #ffffff0a}.modal-button:hover{transform:translateY(-1px)}.modal-button-primary{background:var(--accent);color:var(--bg);box-shadow:0 10px 24px #e2b7142e}.modal-button-primary:hover{background:var(--accent-warm)}.modal-button-secondary{background:#6ec6ff24;border-color:#6ec6ff47;color:#dce8f5}.modal-button-secondary:hover{background:#6ec6ff38;border-color:#6ec6ff6b}.modal-button-tertiary{background:#8ea0b61f;border-color:#8ea0b63d;color:var(--text-muted)}.modal-button-tertiary:hover{background:#8ea0b62e;border-color:#8ea0b657}.custom-pattern-panel{margin-top:.85rem}.custom-pattern-body{display:grid;gap:.9rem}.custom-pattern-panel input[type=text]{background:var(--control-surface-strong);border-color:var(--border-strong)}.custom-pattern-panel input[type=text]:focus{border-color:#e2b714}.custom-pattern-panel label,.custom-pattern-panel legend{color:var(--text-muted)}.custom-pattern-panel.hidden,.pattern-picker-custom.hidden{display:none}.preset-manager-row{border:0;min-width:0;padding:0}.preset-manager-grid{display:grid;grid-template-columns:auto auto;gap:.6rem;align-items:center;justify-content:start}#save-preset,#cancel-preset-edit,#new-preset,#edit-preset,#delete-preset,#manage-presets,#restore-default-presets,#clear-all-presets{padding:.55rem .85rem;font-size:.88rem;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s,transform .15s,box-shadow .15s;box-shadow:inset 0 1px #ffffff0a}#save-preset{background:var(--accent);color:var(--bg)}#save-preset:hover{background:var(--accent-warm)}#cancel-preset-edit{background:#8ea0b624;border-color:#8ea0b647;color:var(--text-muted)}#cancel-preset-edit:hover:not(:disabled){background:#8ea0b638}#new-preset{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#new-preset:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#edit-preset{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#edit-preset:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#delete-preset{background:#c96c7d24;border-color:#c96c7d47;color:#f0d7df}#delete-preset:hover:not(:disabled){background:#c96c7d38;border-color:#c96c7d66}#manage-presets{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#manage-presets:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#restore-default-presets{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#restore-default-presets:hover{background:#6ec6ff33;border-color:#6ec6ff66}#clear-all-presets{background:#c96c7d24;border-color:#c96c7d47;color:#f0d7df}#clear-all-presets:hover:not(:disabled){background:#c96c7d38;border-color:#c96c7d66}#save-preset.hidden,#cancel-preset-edit.hidden,#new-preset.hidden,#edit-preset.hidden,#delete-preset.hidden,#manage-presets.hidden,#restore-default-presets.hidden{display:none}#cancel-preset-edit:disabled,#edit-preset:disabled,#delete-preset:disabled{opacity:.45;cursor:default}.preset-manager-panel{margin-top:.9rem;padding:.85rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel-strong)}.preset-manager-panel.hidden{display:none}.preset-manager-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem;font-size:.8rem;color:var(--accent-cool)}.preset-manager-back-button{padding:.4rem .75rem;border:1px solid rgba(110,198,255,.28);border-radius:999px;background:#6ec6ff14;color:var(--accent-cool);font-size:.76rem;font-weight:600;cursor:pointer}.preset-manager-back-button:hover{background:#6ec6ff1f;border-color:#6ec6ff6b}.preset-manager-list{display:grid;gap:.45rem}.preset-manager-item{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.65rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#182543}.preset-manager-item.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px #e2b71433}.preset-manager-item.is-dragging{opacity:.55}.preset-manager-item.drop-before{box-shadow:inset 0 2px 0 var(--accent)}.preset-manager-item.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}.preset-manager-handle{color:var(--text-soft);cursor:grab;font-size:1rem;-webkit-user-select:none;user-select:none}.preset-manager-item-name{min-width:0;font-size:.88rem;color:#dfe8f2}.preset-manager-item-mode{color:var(--text-soft)}.preset-manager-item-delete{padding:.45rem .7rem;border:1px solid rgba(201,108,125,.28);border-radius:var(--radius-sm);background:#c96c7d24;color:#f0d7df;font-size:.8rem;font-weight:600;cursor:pointer}.preset-manager-item-delete:hover{background:#c96c7d38;border-color:#c96c7d66}.preset-manager-item-actions{display:flex;gap:.4rem}.preset-manager-item-edit,.preset-manager-item-copy{padding:.45rem .7rem;border:1px solid rgba(226,183,20,.22);border-radius:var(--radius-sm);background:#e2b7141a;color:#f0e6c0;font-size:.8rem;font-weight:600;cursor:pointer}.preset-manager-item-edit:hover,.preset-manager-item-copy:hover{background:#e2b7142e;border-color:#e2b71459}.preset-manager-undo-placeholder{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.55rem .75rem;border:1px dashed var(--border);border-radius:var(--radius-sm);background:#c96c7d0f}.preset-manager-undo-message{font-size:.84rem;color:var(--text-soft);font-style:italic}.preset-manager-undo-button{padding:.4rem .75rem;border:1px solid rgba(226,183,20,.28);border-radius:var(--radius-sm);background:#e2b7141f;color:#f0e6c0;font-size:.8rem;font-weight:600;cursor:pointer}.preset-manager-undo-button:hover{background:#e2b71438;border-color:#e2b71466}.preset-manager-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.85rem}.pattern-help,#key-picker,#mixer-panel{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--panel-strong);overflow:hidden}.pattern-help-static{margin-top:.9rem}.pattern-help-title{padding:.72rem .85rem;font-size:.84rem;color:var(--accent-cool);font-weight:600}.pattern-help summary{cursor:pointer;list-style:none;padding:.72rem .85rem;font-size:.84rem;color:var(--accent-cool);-webkit-user-select:none;user-select:none;background:#14395f6b}.pattern-help summary::-webkit-details-marker{display:none}.pattern-help summary:before{content:"▸";display:inline-block;margin-right:.45rem;transition:transform .15s ease}.pattern-help[open] summary:before{transform:rotate(90deg)}.pattern-help summary:before{content:"▶"}.pattern-help-body{padding:0 .8rem .8rem;font-size:.8rem;color:var(--text-muted)}.pattern-help-body p+p,.pattern-help-body ul+p{margin-top:.6rem}.pattern-help-body ul{margin:.5rem 0 0;padding-left:1.1rem}.pattern-help-body li+li{margin-top:.3rem}.pattern-help-body code{color:#f2d675}.pattern-help-comment{color:var(--text-faint);font-style:italic}.error{font-size:.8rem;color:var(--danger);margin-top:.25rem}.error.hidden{display:none}.toggles{display:flex;flex-direction:column;gap:.6rem}.toggle-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}.toggle-label{display:flex!important;align-items:center;gap:.4rem;font-size:.9rem!important;color:var(--text)!important;cursor:pointer}.toggle-label strong{color:var(--accent);font-weight:700}.mode-row{display:grid;gap:.35rem}.mode-toggle{display:block!important;margin-bottom:0!important;cursor:pointer}.mode-toggle input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.mode-toggle input[type=checkbox]:disabled+.mode-toggle-track{opacity:.45;cursor:default}.mode-toggle input[type=checkbox]:disabled+.mode-toggle-track:before{background:#8f9aa7}.mode-toggle input[type=checkbox]:disabled+.mode-toggle-track .mode-option{color:#5e6a77}.mode-toggle input[type=checkbox]:disabled:not(:checked)+.mode-toggle-track .mode-option-major,.mode-toggle input[type=checkbox]:disabled:checked+.mode-toggle-track .mode-option-minor{color:#1a1a2e}.mode-toggle-track{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:.15rem;background:#0f3460;border:1px solid #2a2a4a;border-radius:999px;overflow:hidden;max-width:220px}.mode-toggle-track:before{content:"";position:absolute;top:.15rem;bottom:.15rem;left:.15rem;width:calc(50% - .15rem);background:#e2b714;border-radius:999px;transition:transform .18s ease}.mode-toggle input:checked+.mode-toggle-track:before{transform:translate(100%)}.mode-option{position:relative;z-index:1;text-align:center;padding:.4rem .65rem;font-size:.82rem;font-weight:700;color:var(--text-faint);transition:color .18s ease}.mode-toggle input:not(:checked)+.mode-toggle-track .mode-option-major{color:#1a1a2e}.mode-toggle input:checked+.mode-toggle-track .mode-option-minor{color:#1a1a2e}.toggle-label input[type=checkbox]{accent-color:#e2b714;width:16px;height:16px}.toggle-select-label{flex-wrap:wrap}.toggle-select-label select{width:auto;min-width:220px}#transport-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:-.1rem 0 .15rem}#start-stop,#pause{padding:.75rem 2rem;font-size:1.1rem;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;letter-spacing:.03em;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;box-shadow:0 8px 18px #040a1833}#start-stop{color:var(--bg);background:var(--accent)}#start-stop:hover{background:var(--accent-warm)}#start-stop.running{background:#d98c1f;color:var(--bg);border-color:#ffd2643d}#start-stop.running:hover{background:#e8a12f}#pause{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#pause:hover{background:#6ec6ff33;border-color:#6ec6ff66}#pause.paused{background:var(--success);color:var(--bg);border-color:#73ffad38}#pause.paused:hover{background:#3ddb80}#pause.hidden{display:none}#key-picker,#mixer-panel{padding:0}.key-picker-summary{display:flex;justify-content:space-between;align-items:center;padding:.72rem .85rem;cursor:pointer;font-size:.84rem;font-weight:600;color:var(--accent-cool);list-style:none;-webkit-user-select:none;user-select:none;background:#14395f6b}.key-picker-summary::-webkit-details-marker{display:none}.key-picker-summary>span:first-child:before{content:"▶";display:inline-block;font-size:.6rem;margin-right:.45rem;transition:transform .15s;vertical-align:middle}#key-picker[open]>.key-picker-summary>span:first-child:before{transform:rotate(90deg)}#key-checkboxes{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem .5rem;padding:.35rem .65rem .6rem}.key-picker-actions{display:flex;gap:.45rem;padding:0 .65rem .2rem}.key-picker-action{padding:.38rem .72rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#dce8f5;background:#6ec6ff1f;border:1px solid rgba(110,198,255,.28);border-radius:999px;box-shadow:inset 0 1px #ffffff14,0 1px 2px #0000001f;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}.key-picker-action:hover{background:#6ec6ff33;border-color:#6ec6ff66;box-shadow:inset 0 1px #ffffff1f,0 3px 8px #00000024}.key-picker-action:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #0000002e}.key-picker-action:focus-visible{outline:2px solid rgba(226,183,20,.85);outline-offset:2px}.key-checkbox-label{display:flex;align-items:center;gap:.35rem;font-size:.88rem;color:var(--text);cursor:pointer;padding:.15rem 0}.key-checkbox-label input[type=checkbox]{accent-color:#e2b714;width:15px;height:15px}.mixer-controls{display:flex;flex-direction:column;gap:.8rem;padding:.35rem .65rem .8rem}.mixer-slider{display:flex!important;flex-direction:column;gap:.35rem;margin:0!important}.mixer-slider>span{font-size:.88rem;color:var(--text)}.mixer-slider-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center}.mixer-slider-row output{min-width:3.5rem;text-align:right;font-size:.84rem;color:var(--accent-cool)}@media(max-width:720px){#app{max-width:520px}#display{padding-left:0;padding-right:0}#display-columns{column-gap:.8rem}.display-show-both #chord-display,.display-show-both #next-chord-display{font-size:3rem}.display-chords-only #chord-display,.display-chords-only #next-chord-display{font-size:3.5rem}.display-key-only #key-display,.display-key-only #next-key-display{font-size:1.3rem;min-height:1.5rem}#controls{grid-template-columns:1fr}.control-panel-compact{grid-column:auto}.preset-manager-grid{grid-template-columns:1fr}}