*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--panel: rgba(22, 33, 62, .88);--panel-strong: #121c33;--control-surface: #14395f;--input-surface: #225382;--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:1.25rem}.app-header-links{display:flex;justify-content:center;gap:.85rem;margin-bottom:.65rem;flex-wrap:wrap}.app-header-link{font-size:.82rem;font-weight:600;color:var(--accent-cool);text-decoration:none;letter-spacing:.04em;text-transform:uppercase}.app-header-link-button{padding:0;border:0;background:transparent;font:inherit;cursor:pointer}.app-header-link:hover{text-decoration:underline}.social-share-links{display:flex;justify-content:center;gap:.65rem;margin-bottom:.95rem;flex-wrap:wrap}.social-share-link{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border:1px solid rgba(110,198,255,.25);border-radius:999px;background:#14395f7a;color:var(--text-muted);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:transform .12s ease,border-color .12s ease,color .12s ease,background .12s ease}.social-share-link:hover,.social-share-link:focus-visible{transform:translateY(-1px);border-color:#6ec6ff8c;background:#225382b3;color:var(--text)}.social-share-link svg{width:.95rem;height:.95rem;fill:currentColor;flex:0 0 auto}.app-layout{display:grid;gap:1rem}.app-footer{margin-top:1.5rem;padding-bottom:.2rem}#app-version{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);opacity:.9}h1{font-size:1.5rem;font-weight:400;color:var(--text);letter-spacing:.06em;text-transform:uppercase}.app-subtitle{max-width:42rem;margin:.7rem auto 0;font-size:.98rem;line-height:1.55;color:var(--text-muted)}.demo-page{align-items:flex-start}.demo-app{max-width:980px}.demo-header{margin-bottom:1.5rem}.demo-back-link{display:inline-block;margin-bottom:.9rem;color:var(--accent-cool);text-decoration:none;font-size:.84rem;letter-spacing:.04em;text-transform:uppercase}.demo-back-link:hover{text-decoration:underline}.demo-grid{display:grid;gap:1rem}.demo-card{text-align:left}.demo-card h2{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.35rem}.demo-card p{color:var(--text-muted);font-size:.92rem;line-height:1.5;margin-bottom:.9rem}.demo-video-frame{position:relative;width:100%;max-width:720px;aspect-ratio:16 / 9;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow-soft);background:#00000040}.demo-video-frame-portrait{max-width:420px;aspect-ratio:9 / 16}.demo-video-frame iframe{width:100%;height:100%;border:0}.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)}.selected-keys-summary{display:inline;margin:-.2rem 0 .55rem;padding:0;border:0;background:transparent;font-size:.88rem;color:var(--text-faint);text-align:left;line-height:1.35;cursor:pointer;list-style:none;transition:color .15s}.selected-keys-summary:hover,.selected-keys-summary:focus-visible{color:var(--accent-cool)}.selected-keys-summary:focus-visible{outline:2px solid rgba(110,198,255,.45);outline-offset:4px}.selected-keys-summary::-webkit-details-marker{display:none}.display-key-picker#key-picker{position:relative;padding:0;border:0;background:transparent;overflow:visible;width:fit-content;text-align:left}.display-key-picker-backdrop{position:fixed;inset:0;background:#07101a75;backdrop-filter:blur(10px) saturate(.78);-webkit-backdrop-filter:blur(10px) saturate(.78);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:30}.display-key-picker[open] .display-key-picker-backdrop{opacity:1;pointer-events:auto}.display-key-picker-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,calc(-50% - .5rem));width:min(68rem,calc(100vw - 2rem));max-height:min(40rem,calc(100vh - 2rem));margin-top:0;padding:1rem 1rem 1.1rem;border:1px solid var(--border-strong);border-radius:calc(var(--radius-md) + .3rem);background:#0c1826f0;box-shadow:0 1.25rem 3rem #00000052;overflow:auto;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:31}.display-key-picker[open] .display-key-picker-panel{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.display-key-picker-header{display:flex;justify-content:flex-end;margin-bottom:.35rem}.display-key-picker-close{padding:.38rem .72rem;border:1px solid rgba(110,198,255,.28);border-radius:999px;background:#6ec6ff1a;color:var(--accent-cool);font-size:.76rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.display-key-picker-close:hover{background:#6ec6ff2e;border-color:#6ec6ff66}body.key-picker-open{overflow:hidden}#display{padding:.5rem .25rem 2.5rem;position:relative;height:clamp(11rem,24vw,13.5rem)}.display-placeholder{position:absolute;inset:.25rem .25rem 2rem;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none}.display-placeholder.hidden{display:none}.display-placeholder p{max-width:26rem;color:var(--text-faint);font-size:.95rem;line-height:1.5;display:none}.display-quickstart-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;white-space:nowrap;padding:0;border:0;background:none;color:var(--text-faint);font:inherit;font-size:1.18rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff2e;transition:color .15s,text-decoration-color .15s}.display-quickstart-button.hidden{display:none}.display-quickstart-button:hover{color:var(--text);text-decoration-color:#ffffff73}#display-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;align-content:start;column-gap:1.5rem;width:100%;min-height: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}#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)}#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;margin-top:.22rem;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)}.chord-symbol{display:inline-grid;grid-auto-flow:column;align-items:start;column-gap:.02em}.chord-symbol-main{display:inline-flex;align-items:baseline}.chord-symbol-root,.chord-symbol-root-letter,.chord-symbol-root-accidental,.chord-symbol-base,.chord-symbol-sup{display:inline-block}.chord-symbol-root-accidental{font-size:.78em;transform:translateY(-.18em);transform-origin:left bottom}.chord-symbol-base{font-size:.68em;margin-left:.04em}.chord-symbol-sup{font-size:.5em;line-height:1;white-space:nowrap;color:inherit;transform:translateY(-.12em);transform-origin:left bottom}#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-hide-current #current-header,.display-hide-current #key-display,.display-hide-current #chord-display{display:none}.display-hide-current #next-header,.display-hide-current #next-key-display,.display-hide-current #next-chord-display{grid-column:1 / -1}.display-hide-current #next-header:not(.hidden),.display-hide-current #next-key-display:not(.hidden),.display-hide-current #next-chord-display:not(.hidden){opacity:1}.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{position:absolute;left:50%;bottom:.6rem;transform:translate(-50%);display:flex;justify-content:center;gap:12px}#beat-indicator.hidden{display:none}.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{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.3rem}.inline-select-row{display:flex;align-items:center;gap:.75rem}.inline-select-row label{margin-bottom:0;white-space:nowrap}.inline-select-row select{width:auto;min-width:4.5rem;padding-right:2rem}.transposition-row{flex-wrap:wrap}.transposition-row select{min-width:0;width:fit-content;max-width:100%;field-sizing:content;flex:0 1 auto}.next-preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}.next-preview-controls input[type=number]{width:6rem}.next-preview-mode-toggle{margin-bottom:0!important}.next-preview-mode-toggle .mode-toggle-track{max-width:190px}.control-row legend{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.3rem}select,input[type=text],input[type=number]{width:100%;padding:.5rem .65rem;font-size:.95rem;color:var(--text);border-radius:var(--radius-sm);outline:none;transition:border-color .15s,background .15s,box-shadow .15s}select{background:var(--control-surface);border:1px solid var(--border)}input[type=text],input[type=number]{background:var(--input-surface);border:1px solid var(--border-strong)}select:focus,input[type=text]:focus,input[type=number]: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:0}.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:pre-wrap;word-break:break-word}#progression-feedback{color:var(--text-faint);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}#progression-feedback.error-text{color:var(--danger)}.progression-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}.progression-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}body.welcome-open{overflow:hidden}.welcome-overlay{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:radial-gradient(circle at top left,rgba(226,183,20,.18),transparent 34%),radial-gradient(circle at right 20%,rgba(110,198,255,.18),transparent 30%),#060a18d6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.welcome-overlay.hidden{display:none}.welcome-card{width:min(100%,52rem);max-height:min(92vh,60rem);overflow:auto;padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;background:linear-gradient(135deg,#161f3cfa,#0b1228fa);box-shadow:0 28px 90px #0000006b}.welcome-skip-button{padding:.55rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#ffffff0d;color:var(--text-faint);font:inherit;font-size:.84rem;cursor:pointer}.welcome-skip-button:hover{color:var(--text);border-color:#ffffff3d;background:#ffffff17}.welcome-kicker{margin:0 0 .55rem;color:var(--accent);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.welcome-card h2{margin:0;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.04}.welcome-intro{max-width:48rem;margin:.85rem 0 0;color:var(--text-faint);line-height:1.6}.welcome-title{margin:0 0 .25rem;font-size:1.4rem;font-weight:800;letter-spacing:-.01em}.welcome-kicker,.welcome-intro{display:none}.welcome-section{margin-top:1.35rem}.welcome-section.hidden{display:none}.welcome-section h3{margin:0 0 .75rem;font-size:1rem}.welcome-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.welcome-choice-card,.welcome-pill{position:relative;display:block;cursor:pointer}.welcome-choice-card input,.welcome-pill input{position:absolute;opacity:0;pointer-events:none}.welcome-choice-card:before,.welcome-pill:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:1.1rem;background:#ffffff0a;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}.welcome-choice-card{min-height:100%;padding:1rem}.welcome-choice-title,.welcome-choice-copy,.welcome-pill span{position:relative;z-index:1;display:block}.welcome-choice-title{font-size:1rem;font-weight:700}.welcome-choice-copy{margin-top:.45rem;color:var(--text-faint);font-size:.92rem;line-height:1.5}.welcome-pill-row{display:flex;flex-wrap:wrap;gap:.75rem}.welcome-standard-select{width:100%;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:#1a233d;color:var(--text);font:inherit;font-weight:600}.welcome-standard-select option{background:#1a233d;color:var(--text)}.welcome-standard-select:focus{outline:2px solid rgba(226,183,20,.45);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.welcome-pill span{padding:.75rem 1rem;border-radius:999px;color:var(--text);font-weight:600}.welcome-pill:before{border-radius:999px}.welcome-choice-card:hover:before,.welcome-pill:hover:before{transform:translateY(-1px);border-color:#ffffff38;background:#ffffff12}.welcome-choice-card:has(input:checked):before,.welcome-pill:has(input:checked):before{border-color:#e2b7148c;background:linear-gradient(135deg,#e2b71429,#6ec6ff24);box-shadow:0 14px 36px #00000038}.welcome-choice-card:has(input:checked) .welcome-choice-title,.welcome-pill:has(input:checked) span{color:#fff5d7}.welcome-choice-card:has(input:checked) .welcome-choice-copy{color:#fff7d9d1}.welcome-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.welcome-footer-meta{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}.welcome-summary{margin:0;color:var(--text-faint);line-height:1.5}.welcome-apply-button{padding:.9rem 2rem;border:0;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-warm));color:#0d1322;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 16px 34px #e2b7143d}.welcome-apply-button:hover{transform:translateY(-1px)}.welcome-show-next-time{display:inline-flex;align-items:center;gap:.65rem;color:var(--text-faint);font-size:.95rem;font-weight:600;cursor:pointer}.welcome-show-next-time input{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}.welcome-show-next-time span{line-height:1.2}.custom-pattern-panel{margin-top:.75rem}.pattern-help.hidden{display:none}.custom-pattern-body{display:grid;gap:1rem}.custom-pattern-panel input[type=text]{background:var(--input-surface);border-color:var(--border-strong)}.custom-pattern-panel input[type=text]:focus{border-color:var(--accent)}.custom-pattern-panel label,.custom-pattern-panel legend{color:var(--text-muted)}.custom-pattern-panel.hidden,.pattern-picker-custom.hidden,#double-time-row.hidden{display:none}.progression-manager-row{border:0;min-width:0;padding:0;margin-top:.75rem}.progression-manager-grid{display:grid;grid-template-columns:auto auto;gap:.6rem;align-items:center;justify-content:start}#save-progression,#cancel-progression-edit,#new-progression,#edit-progression,#delete-progression,#manage-progressions,#restore-default-progressions,#clear-all-progressions{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-progression{background:var(--accent);color:var(--bg)}#save-progression:hover{background:var(--accent-warm)}#cancel-progression-edit{background:#8ea0b624;border-color:#8ea0b647;color:var(--text-muted)}#cancel-progression-edit:hover:not(:disabled){background:#8ea0b638}#new-progression{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#new-progression:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#edit-progression{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#edit-progression:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#delete-progression{background:#c96c7d24;border-color:#c96c7d47;color:#f0d7df}#delete-progression:hover:not(:disabled){background:#c96c7d38;border-color:#c96c7d66}#manage-progressions{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#manage-progressions:hover:not(:disabled){background:#6ec6ff33;border-color:#6ec6ff66}#restore-default-progressions{background:#6ec6ff1f;border-color:#6ec6ff47;color:#dce8f5}#restore-default-progressions:hover{background:#6ec6ff33;border-color:#6ec6ff66}#clear-all-progressions{background:#c96c7d24;border-color:#c96c7d47;color:#f0d7df}#clear-all-progressions:hover:not(:disabled){background:#c96c7d38;border-color:#c96c7d66}#save-progression.hidden,#cancel-progression-edit.hidden,#new-progression.hidden,#edit-progression.hidden,#delete-progression.hidden,#manage-progressions.hidden,#restore-default-progressions.hidden{display:none}#cancel-progression-edit:disabled,#edit-progression:disabled,#delete-progression:disabled{opacity:.45;cursor:default}.progression-manager-panel{margin-top:.9rem;padding:.85rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel-strong)}.progression-manager-panel.hidden{display:none}.progression-manager-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}.progression-manager-panel-heading{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}.progression-manager-panel-title{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}.progression-manager-panel-hint{font-size:.8rem;color:var(--accent-cool)}.progression-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}.progression-manager-back-button:hover{background:#6ec6ff1f;border-color:#6ec6ff6b}.progression-manager-list{display:grid;gap:.45rem}.progression-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}.progression-manager-item.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px #e2b71433}.progression-manager-item.is-dragging{opacity:.55}.progression-manager-item.drop-before{box-shadow:inset 0 2px 0 var(--accent)}.progression-manager-item.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}.progression-manager-handle{color:var(--text-soft);cursor:grab;font-size:1rem;-webkit-user-select:none;user-select:none}.progression-manager-item-name{min-width:0;font-size:.88rem;color:#dfe8f2}.progression-manager-item-mode{color:var(--text-soft)}.progression-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}.progression-manager-item-delete:hover{background:#c96c7d38;border-color:#c96c7d66}.progression-manager-item-actions{display:flex;gap:.4rem}.progression-manager-item-edit,.progression-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}.progression-manager-item-edit:hover,.progression-manager-item-copy:hover{background:#e2b7142e;border-color:#e2b71459}.progression-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}.progression-manager-undo-message{font-size:.84rem;color:var(--text-soft);font-style:italic}.progression-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}.progression-manager-undo-button:hover{background:#e2b71438;border-color:#e2b71466}.progression-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:.75rem}.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;margin-top:.75rem}.mode-row+.custom-pattern-panel{margin-top:.75rem}.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:nowrap}.toggle-select-label select{width:auto;min-width:0}#transport-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:-.1rem 0 .15rem}.transport-tempo{display:grid;gap:.45rem;width:min(100%,640px);margin:0 auto 1.1rem}.transport-tempo label{font-size:.92rem;font-weight:600;color:var(--text);text-align:center}#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(7,minmax(0,1fr));grid-template-rows:auto auto;gap:.4rem .5rem;width:min(100%,54rem);margin:0 auto;padding:.55rem 0 .8rem;align-items:end}.key-picker-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;width:min(100%,54rem);margin:0 auto;padding:.55rem 0 .1rem}.key-picker-action{padding:.42rem .82rem;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}.reset-settings-button{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#ffffff0a;color:var(--text-faint);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.reset-settings-button:hover{background:#ffffff14;border-color:#ffffff38;color:var(--text)}.reset-settings-button:active{transform:translateY(1px)}.reset-settings-button:focus-visible{outline:2px solid rgba(226,183,20,.85);outline-offset:2px}.key-checkbox-label{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:4.8rem;padding:.45rem .35rem .55rem;border-radius:.85rem;border:1px solid rgba(255,255,255,.1);font-size:.82rem;font-weight:700;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s}.key-checkbox-label input[type=checkbox]{position:absolute;inset:0;opacity:0;cursor:pointer}.key-checkbox-text{position:relative;z-index:1;line-height:1.1}.key-checkbox-white{color:#17324e;background:linear-gradient(180deg,#fffffffa,#dfe9f4eb);box-shadow:inset 0 1px #ffffffd9,0 4px 12px #00000024}.key-checkbox-white.is-selected{color:#102437;border-color:#e2b7149e;background:linear-gradient(180deg,#fff4c7fa,#f2d175f5)}.key-checkbox-black{min-height:3.3rem;width:72%;justify-self:end;transform:translate(50%);color:#f4f7fb;background:linear-gradient(180deg,#223040fa,#090f16fa);box-shadow:inset 0 1px #ffffff0f,0 6px 16px #00000047}.key-checkbox-black.is-selected{border-color:#e2b714b8;background:linear-gradient(180deg,#bf9310fa,#745300fa)}.key-checkbox-label:hover{transform:translateY(-1px)}.key-checkbox-black:hover{transform:translate(50%) translateY(-1px)}.key-checkbox-label:focus-within{outline:2px solid rgba(226,183,20,.85);outline-offset:2px}@media(max-width:560px){.display-key-picker-panel{width:calc(100vw - 1rem);padding-left:.75rem;padding-right:.75rem}#key-checkboxes{gap:.35rem .32rem}.key-checkbox-label{min-height:4.2rem;padding-left:.2rem;padding-right:.2rem;font-size:.74rem}.key-checkbox-black{min-height:2.9rem;width:76%}}.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){.social-share-link span{display:none}.social-share-link{padding:.55rem}#app{max-width:520px}#display{height:10rem;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}.progression-manager-grid{grid-template-columns:1fr}.progression-manager-panel-header{align-items:flex-start;flex-wrap:wrap}.progression-manager-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.progression-manager-actions button{width:100%}.progression-manager-item{grid-template-columns:auto 1fr;align-items:start}.progression-manager-item-actions{grid-column:2;flex-wrap:wrap}.progression-manager-item-mode{display:none}.welcome-card{padding:1.15rem}.welcome-choice-grid{grid-template-columns:1fr}.welcome-footer{flex-direction:column;align-items:center}.welcome-apply-button{width:100%}}