*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;line-height:1.4;color:#333;background:#f8f9fa;overflow-x:hidden}.app-container{min-height:100vh;display:flex;flex-direction:column;position:relative}.nav-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 12px #00000026;position:sticky;top:0;z-index:100}.nav-brand-mobile{min-width:0;flex:1;color:#fff;padding-right:10px}.brand-title{font-size:15px;font-weight:700;line-height:1.1}.nav-brand-mobile p{margin:2px 0 0;font-size:11px;line-height:1.2;opacity:.9}.nav-controls,.nav-settings{display:flex;gap:8px;align-items:center}.nav-btn,.settings-btn{width:44px;height:44px;border:none;border-radius:12px;background:#fff3;color:#fff;font-size:18px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);user-select:none;-webkit-tap-highlight-color:transparent}.nav-btn:hover,.settings-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.nav-btn:active,.settings-btn:active{transform:translateY(0);background:#fff6}.nav-btn.active{background:#ffffffe6;color:#667eea}.play-btn.active{background:#2ecc71e6;color:#fff}.metronome-btn.active{background:#e74c3ce6;color:#fff}.main-content{flex:1;display:flex;flex-direction:column;position:relative}.fretboard-area{flex:1;display:flex;align-items:center;justify-content:center;padding:0 8px 8px;min-height:calc(100vh - 80px)}#chart-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;margin:0;padding:0}#scale-chart{max-width:100%;max-height:100%}#note-names-container,#interval-names-container{margin-top:16px;padding:0 16px;text-align:center}#note-names-display,#interval-names-display{font-size:16px;font-weight:500;color:#666}.notes-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}.note-item{padding:6px 12px;background:#fff;border-radius:20px;border:1px solid #e0e0e0;font-weight:600;box-shadow:0 2px 4px #0000001a}.note-item.root{background:#667eea;color:#fff;border-color:#667eea}.horizontal-fretboard-container{width:100%;display:flex;justify-content:center;padding:20px;background:#fff;border-bottom:1px solid #e0e0e0}#horizontal-fretboard-wrapper{width:100%;max-width:100%;overflow-x:auto}.piano-container{width:100%;display:flex;flex-direction:column;align-items:center;padding:20px;background:#fff;border-bottom:1px solid #e0e0e0}.app-container.piano-layout{flex-direction:column}.app-container.piano-layout .piano-container{order:1}.app-container.piano-layout .horizontal-fretboard-container{order:2;border-top:1px solid #e0e0e0}.app-container.piano-layout .main-content{display:none}.staff-container{background:transparent!important;border:none!important;padding:10px!important;margin:10px auto!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.staff-container svg{max-width:100%;height:auto}.settings-panel{position:fixed;top:80px;right:-100%;width:90%;max-width:400px;height:calc(100vh - 80px);background:#fff;border-radius:16px 0 0 16px;box-shadow:-4px 0 20px #00000026;transition:right .3s ease;z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch}.settings-panel.show{right:0}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px 0 0}.settings-header h3{font-size:18px;font-weight:600;margin:0}.close-btn{width:32px;height:32px;border:none;border-radius:50%;background:#fff3;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.close-btn:hover{background:#ffffff4d}.gear-toggle{width:32px;height:32px;border:none;border-radius:50%;background:#fff3;color:#fff;font-size:16px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .2s ease}.gear-toggle:hover{background:#ffffff4d}.settings-content{padding:24px 24px 80px}.settings-section{margin-bottom:32px}.settings-section h4{font-size:16px;font-weight:600;color:#333;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #667eea}.setting-group{margin-bottom:16px}.setting-group label{display:block;font-weight:500;color:#555;margin-bottom:6px;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.setting-group input[type=checkbox]{margin-right:8px}select,input[type=range],input[type=number]{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fff;transition:border-color .2s ease}select:focus,input[type=number]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}input[type=range]{padding:0;height:6px;background:#ddd;appearance:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid white;box-shadow:0 2px 6px #0003}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid white;box-shadow:0 2px 6px #0003}.string-voicing-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.action-buttons{display:flex;flex-direction:column;gap:12px;margin-top:20px}.action-buttons button{padding:12px 20px;border:none;border-radius:8px;background:#667eea;color:#fff;font-weight:500;cursor:pointer;transition:background .2s ease}.action-buttons button:hover{background:#5a67d8}.action-buttons button:active{background:#4c51bf}small{display:block;font-size:11px;color:#888;margin-top:4px;line-height:1.3}small.is-problem{color:#b83232;font-weight:600}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:150;opacity:0;visibility:hidden;transition:all .3s ease}.settings-overlay.show{opacity:1;visibility:visible}.quick-settings .settings-content{padding:24px}.quick-settings .setting-group{margin-bottom:20px}@media(min-width:768px){.nav-bar{padding:16px 32px}.nav-controls,.nav-settings{gap:12px}.nav-btn,.settings-btn{width:48px;height:48px;font-size:20px}.nav-brand-mobile p{font-size:12px}.fretboard-area{padding:0 12px 12px}.settings-panel{top:96px;height:calc(100vh - 96px);max-width:480px}.settings-content{padding:32px}.string-voicing-controls{grid-template-columns:1fr 1fr 1fr}.action-buttons{flex-direction:row;flex-wrap:wrap}.action-buttons button{flex:1;min-width:140px}}@media(min-width:900px){.app-container.vertical-layout .quick-settings{position:fixed;top:80px;right:0;width:320px;height:calc(100vh - 80px);background:#fff;border-radius:0;box-shadow:-4px 0 20px #00000026;transition:none;z-index:50;overflow-y:auto;border-left:1px solid #e0e0e0}.app-container.vertical-layout .quick-settings .settings-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:0;position:relative}.app-container.vertical-layout .quick-settings .close-btn{display:none}.app-container.vertical-layout .quick-settings .gear-toggle{display:flex}.app-container.vertical-layout .main-content{margin-right:320px}.app-container.vertical-layout .nav-settings .settings-btn{display:none}.app-container.vertical-layout .nav-settings .gear-toggle{display:flex}.app-container.vertical-layout .settings-overlay{display:none!important}}@media(min-width:1200px){.settings-panel{max-width:520px}.settings-content{padding:32px}.string-voicing-controls{grid-template-columns:1fr 1fr 1fr;gap:16px}}@media(max-height:500px)and (orientation:landscape){.nav-bar{padding:8px 16px}.nav-btn,.settings-btn{width:36px;height:36px;font-size:16px}.fretboard-area{padding:0 8px 8px;min-height:calc(100vh - 60px)}.settings-panel{top:60px;height:calc(100vh - 60px);width:95%;max-width:600px}.settings-header{padding:12px 20px}.settings-content{padding:16px 16px 60px}.settings-section{margin-bottom:20px}.setting-group{margin-bottom:12px}}.horizontal-fretboard-container,.piano-container{display:none}.horizontal-fretboard-container.show,.piano-container.show{display:flex}.dot{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);cursor:pointer;transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0000004d;border:2px solid #fff;background-color:#000;width:25px;height:25px}.dot-black{background-color:#000;border:2px solid white;color:#fff;font-weight:700;width:30px;height:30px}.dot-white{background-color:#fff;border:3px solid black;color:#000;width:25px;height:25px}.dot.root{background:#e74c3c;border:2px solid #c0392b}.dot.open-string{background:#3498db;border:3px solid #2980b9}.dot:hover{transform:scale(1.1);box-shadow:0 4px 8px #0006}.interval-label,.note-label{font-size:12px;font-family:sans-serif;line-height:1;user-select:none;color:inherit;font-weight:700;text-shadow:0 1px 3px #000,0 0 2px #333;text-align:center;width:100%;display:block;pointer-events:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6}.scale-dot{position:absolute;border-radius:50%;background:#667eea4d;border:1px solid rgba(102,126,234,.5);z-index:5;opacity:.75;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none}#dynamic-fretboard{box-shadow:none!important;background:transparent!important;border:none!important;padding:0!important;margin:0!important}#dynamic-fretboard .dot,#horizontal-fretboard-wrapper .dot,#dynamic-fretboard .scale-dot,#horizontal-fretboard-wrapper .scale-dot{transform:none!important}#dynamic-fretboard .dot .interval-label,#horizontal-fretboard-wrapper .dot .interval-label{transform:translate(-50%,-50%)!important}.piano-key{cursor:pointer;transition:all .1s ease}.piano-key:hover{transform:translateY(-1px)}.piano-key.active{background:#667eea!important;transform:translateY(2px)}@media(max-width:480px){.nav-bar{align-items:flex-start;gap:8px}.nav-brand-mobile p{max-width:13rem}#scale-chart{transform:scale(.85);transform-origin:center}}@media(max-width:320px){.nav-brand-mobile p{display:none}#scale-chart{transform:scale(.75)}}@media(pointer:coarse){.nav-btn,.settings-btn{min-width:44px;min-height:44px}select,input[type=number],.action-buttons button{min-height:44px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.nav-btn,.settings-btn{border:.5px solid rgba(255,255,255,.1)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.nav-btn:focus-visible,.settings-btn:focus-visible,select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid #667eea;outline-offset:2px}@media print{.nav-bar,.settings-panel,.settings-overlay{display:none!important}.main-content{margin:0;padding:0}body{background:#fff}}.nav-settings .gear-toggle{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;width:auto;height:auto;padding:8px 12px;font-size:14px}.nav-settings .gear-toggle:hover{background:#fff3;border-color:#ffffff4d}#dynamic-fretboard .dot,#dynamic-fretboard .scale-dot{pointer-events:auto;cursor:pointer}.fret-range-status{margin-top:8px;padding:8px 12px;font-size:.85rem;line-height:1.4;color:#654c16;background:#fff4d6;border-radius:6px;text-align:center}#dynamic-fretboard .scale-dot.parent-overlay,#horizontal-fretboard-wrapper .scale-dot.parent-overlay{background:#ffffff73;border:1px solid rgba(255,255,255,.35);opacity:1;box-shadow:none;pointer-events:none;z-index:2}#dynamic-fretboard .scale-dot.parent-root,#horizontal-fretboard-wrapper .scale-dot.parent-root{background:#ffb000a6}.practice-header-status{margin-top:4px;padding:6px 9px;border-radius:6px;font-size:13px;line-height:1.35;min-height:2.7em;max-width:38rem;overflow-wrap:anywhere;color:inherit;background:#7f7f7f1a}.practice-header-status.has-message{color:#593f06;background:#fff0bf;box-shadow:inset 3px 0 #d49b19}.nav-bar{flex-wrap:wrap}@media(max-width:700px){.nav-bar .nav-brand-mobile{flex:0 0 100%;padding:0 0 8px}.practice-header-status{max-width:none;font-size:12px}}#dynamic-fretboard .source-anchor,#horizontal-fretboard-wrapper .source-anchor,#scale-chart .source-anchor{position:absolute;box-sizing:border-box;display:grid;place-items:center;color:#513900;font-weight:700;line-height:1;text-shadow:0 0 2px white,0 0 2px white;padding:0;margin:0;min-width:0;min-height:0;border:3px dashed #b58108;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #ffffffd9;z-index:12;cursor:pointer;touch-action:manipulation;transform:none}.source-anchor:focus-visible{outline:2px solid #604100;outline-offset:3px}.source-anchor.source-sounding{color:#fff!important;text-shadow:none!important}.desktop-layout{height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.desktop-app-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden}.desktop-nav-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#fffffff2;backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 2px 20px #0000001a;z-index:100}.nav-brand h1{font-size:1.4rem;font-weight:600;color:#2d3748;margin:0}.nav-brand p{margin:.15rem 0 0;max-width:32rem;color:#4a5568;font-size:.78rem;line-height:1.25}.nav-controls{display:flex;gap:.75rem}.nav-btn{width:48px;height:48px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #667eea4d}.nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #667eea66}.nav-btn:active{transform:translateY(0)}.nav-btn.active{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 15px #f093fb66}.nav-utils{display:flex;gap:.75rem}.utility-btn{padding:.5rem 1rem;border:none;border-radius:8px;background:#2d3748cc;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.utility-btn:hover{background:#2d3748;transform:translateY(-1px)}.desktop-main-layout{display:grid;grid-template-columns:280px 1fr 280px;gap:1rem;flex:1;padding:1rem;overflow:hidden;min-height:0}.desktop-layout .left-settings-panel,.desktop-layout .right-settings-panel{background:#fffffff2;backdrop-filter:blur(10px);border-radius:16px;padding:1.5rem;overflow-y:auto!important;overflow-x:hidden!important;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);min-height:0;max-height:calc(100vh - 120px);position:static!important;right:auto!important;width:auto!important;transform:none!important}.desktop-layout .left-settings-panel::-webkit-scrollbar,.desktop-layout .right-settings-panel::-webkit-scrollbar{width:12px;background:#0000000d}.desktop-layout .left-settings-panel::-webkit-scrollbar-track,.desktop-layout .right-settings-panel::-webkit-scrollbar-track{background:#0000000d;border-radius:6px;margin:2px}.desktop-layout .left-settings-panel::-webkit-scrollbar-thumb,.desktop-layout .right-settings-panel::-webkit-scrollbar-thumb{background:#667eea99;border-radius:6px;border:2px solid rgba(255,255,255,.3)}.desktop-layout .left-settings-panel::-webkit-scrollbar-thumb:hover,.desktop-layout .right-settings-panel::-webkit-scrollbar-thumb:hover{background:#667eeacc}.desktop-layout .left-settings-panel,.desktop-layout .right-settings-panel{scrollbar-width:thin!important;scrollbar-color:rgba(102,126,234,.6) rgba(0,0,0,.05)!important;-webkit-overflow-scrolling:touch}.desktop-layout .left-settings-panel .settings-content,.desktop-layout .right-settings-panel .settings-content{min-height:100%}.left-settings-panel{border-right:1px solid rgba(0,0,0,.05)}.right-settings-panel{border-left:1px solid rgba(0,0,0,.05)}.center-content{display:flex;flex-direction:column;background:#fffffff2;backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;position:relative}.center-content .main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:0}.center-content .main-content .fretboard-area{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0}.center-content .main-content #chart-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-height:0;padding:.25rem 0}.center-content .piano-container{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;min-height:auto;max-height:70vh}.center-content .horizontal-fretboard-container{flex:none;display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:auto;max-height:60vh}.settings-section{margin-bottom:2rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{font-size:1.1rem;font-weight:600;color:#2d3748;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.setting-group{margin-bottom:1rem}.setting-group.compact{margin-bottom:.75rem}.setting-group label{display:block;font-size:.875rem;font-weight:500;color:#4a5568;margin-bottom:.5rem}.setting-group small{display:block;font-size:.75rem;color:#718096;margin-top:.25rem}.setting-group small.is-problem{color:#b83232;font-weight:600}.setting-group select,.setting-group input[type=number]{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;background:#fff;transition:border-color .2s ease}.setting-group select:focus,.setting-group input[type=number]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.setting-group input[type=range]{width:100%;margin:.5rem 0;appearance:none;height:6px;border-radius:3px;background:#e2e8f0;outline:none}.setting-group input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 8px #667eea4d}.setting-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 8px #667eea4d}.setting-group input[type=checkbox]{margin-right:.5rem;transform:scale(1.1)}.string-voicing-controls{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.string-voicing-controls .setting-group{margin-bottom:.75rem}.string-voicing-controls label{font-size:.8rem;margin-bottom:.25rem}.string-voicing-controls select{padding:.375rem;font-size:.8rem}.action-buttons{margin-top:1.5rem}.action-buttons button{width:100%;padding:.75rem;border:none;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:.5rem}.action-buttons button:hover{transform:translateY(-1px);box-shadow:0 4px 15px #667eea4d}.action-buttons button:active{transform:translateY(0)}.action-buttons button:last-child{margin-bottom:0}#volume-display,#bpm-display,#click-volume-display{font-size:.8rem;font-weight:500;color:#667eea;margin-left:.5rem}#scale-chart{max-width:100%;max-height:100%;margin:0}#note-names-container,#interval-names-container{padding:.5rem;background:#0000000d;border-radius:6px;margin-top:.5rem;margin-bottom:.25rem}#note-names-display,#interval-names-display{text-align:center;font-weight:500;font-size:.875rem;line-height:1.2}.center-content.vertical-layout .main-content{height:100%;max-height:100%}.center-content.piano-layout .piano-container,.center-content.horizontal-layout .horizontal-fretboard-container{background:#f7fafc;border-radius:12px;margin:.5rem;overflow:hidden}.piano-container .staff-container{margin:0;padding:.5rem 0}#horizontal-fretboard-wrapper{margin:0;padding:.5rem}@media(max-width:1400px){.desktop-main-layout{grid-template-columns:260px 1fr 260px}.left-settings-panel,.right-settings-panel{padding:1.25rem}}@media(max-width:1200px){.desktop-main-layout{grid-template-columns:240px 1fr 240px}.settings-section h3{font-size:1rem}.setting-group label{font-size:.8rem}.nav-brand p{max-width:24rem;font-size:.72rem}}@media(max-width:1000px){.desktop-main-layout{grid-template-columns:220px 1fr 220px}.left-settings-panel,.right-settings-panel{padding:1rem}}@media(max-width:900px){.desktop-main-layout{grid-template-columns:200px 1fr 200px}.left-settings-panel,.right-settings-panel{padding:.75rem}.settings-section h3{font-size:.9rem}.setting-group label{font-size:.75rem}.nav-brand p{display:none}}@media(max-width:800px){.desktop-main-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:.5rem}.left-settings-panel,.right-settings-panel{display:none}.center-content{grid-row:1 / -1}}.desktop-nav-bar{position:sticky;top:0;gap:16px;flex-wrap:wrap}.desktop-nav-bar .nav-brand{flex:1 1 300px;min-width:0}.desktop-nav-bar .practice-header-status{color:#394559}.desktop-nav-bar .practice-header-status.has-message{color:#593f06}@media(max-width:700px){.desktop-nav-bar .nav-brand{flex-basis:100%}}#piano-container{box-sizing:border-box;width:100%;max-height:none;padding:18px;margin:0;background:#fff;border-radius:12px;overflow:visible}.piano-heading{width:100%;color:#243e4c}.piano-heading h2{font-size:16px;margin:0 0 5px}.piano-heading p{font-size:13px;color:#60717c;margin:0 0 14px}#piano-container .piano-wrapper{width:100%;overflow-x:auto;padding:0 0 6px}#piano-keyboard{position:relative;width:100%;min-width:700px;height:144px;margin:0;box-sizing:border-box;border:1px solid #344957;border-top:5px solid #344957;border-radius:0 0 5px 5px}#piano-keyboard .piano-key{position:absolute;top:0;box-sizing:border-box;cursor:default;transform:none;transition:background-color .12s}#piano-keyboard .white-key{width:calc(100% / var(--white-keys));height:100%;background:linear-gradient(#f6f8f8,#fff 70%);border-right:1px solid #8999a2;border-bottom:3px solid #bdc8ce;border-radius:0 0 4px 4px}#piano-keyboard .black-key{width:calc(62% / var(--white-keys));height:62%;z-index:2;background:linear-gradient(#344550,#172630);border:1px solid #15232b;border-bottom:4px solid #0c171d;border-radius:0 0 3px 3px}#piano-keyboard .piano-key.active{background:#087e8b!important;color:#fff}#piano-keyboard .piano-key.bass{box-shadow:inset 0 -6px #d2a441}#piano-keyboard .piano-key-label{position:absolute;bottom:11px;left:50%;transform:translate(-50%);font-size:10px;color:#667983;white-space:nowrap}#piano-keyboard .active .piano-key-label{color:#fff;font-weight:650}#piano-container #staff-notation{width:min(100%,360px);min-height:0;margin:8px auto 0;padding:0;color:#253640}#staff-notation svg{display:block;width:100%;height:auto}#piano-container #staff-notation{display:block!important;max-width:360px;height:auto!important;padding:0!important;margin:8px auto 0!important}#piano-container #staff-notation svg{position:static!important;display:block!important}[hidden]{display:none!important}.center-content{overflow:auto;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}.study-heading{text-align:center;color:#fff}.study-heading h2{margin:4px 0;font-size:18px}.study-heading p{font-size:12px;margin:4px}.instrument-scroll{max-width:100%;overflow:auto;flex-shrink:0}#horizontal-fretboard-container{display:block;padding:0;background:transparent}#scale-chart{margin:auto!important}#piano{width:100%;background:#fff;border-radius:12px;padding:12px;box-sizing:border-box}#piano svg{width:100%;min-width:480px;max-height:220px}.ingredient-parent-dot{background:#d7cce8;color:#45335c;opacity:.8}#dynamic-fretboard .dot{cursor:pointer}#dynamic-fretboard .dot.active{background:#e59c31;box-shadow:0 0 0 3px #fff}.phrase-card{background:#fffffff5;border-radius:12px;padding:18px;width:100%;box-sizing:border-box;min-width:0}.phrase-card h3{margin:0 0 8px;font-size:15px}#progress,#range-message{color:#596579;font-size:12px}.note-strip,#degree-cycle{display:flex;gap:8px;overflow-x:auto;padding:8px 0}.note-tile{padding:8px 12px;background:#edf0fa;border-radius:6px;flex-shrink:0}.note-tile small{display:block;font-size:10px}#degree-cycle button{width:38px;min-width:38px;height:38px;padding:0;border:2px solid #9db5bd;border-radius:50%;white-space:nowrap;background:#fff;color:#28515d;font:inherit;font-size:12px;font-weight:700;cursor:pointer}#degree-cycle button:hover{border-color:#087e8b;background:#eef8f8}#degree-cycle button:focus-visible{outline:3px solid #8876d1;outline-offset:2px}#degree-cycle button.selected{border-color:#b78022;background:#087e8b;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #b78022}.piano-key.active rect{fill:#e9ae48}#notation{min-width:0}.setting-group input[type=number]{width:100%;box-sizing:border-box;padding:8px;border:1px solid #ddd;border-radius:6px}@media(max-width:800px){.desktop-layout,.desktop-app-container{height:auto;min-height:100vh;overflow:visible}.desktop-nav-bar{position:sticky;top:0;padding:10px;flex-wrap:wrap;gap:8px}.nav-brand{flex:1 1 100%}.nav-brand p{font-size:11px}.nav-controls{gap:8px}.nav-btn{width:40px;height:40px}.nav-utils{margin-left:auto}.desktop-main-layout{display:flex;flex-direction:column;overflow:visible}.left-settings-panel,.right-settings-panel{display:block;width:100%;max-width:none;max-height:none;overflow:visible;box-sizing:border-box}.center-content{overflow:visible;padding:16px}.settings-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings-section h3{grid-column:1/-1}.setting-group{margin:0;min-width:0}}#piano-container{display:block;width:100%;padding:0;box-sizing:border-box}.piano-key.ingredient-key{background:#ac9cd7}.piano-key.active{background:#e9ae48!important}.study-heading{color:#2d3748;padding:12px 16px 0}#scale-chart{max-height:none;max-width:none}.ingredient-parent-dot{text-shadow:none}#piano-keyboard .piano-key.ingredient-key{background:#ac9cd7}#piano-keyboard .piano-key{cursor:pointer}#piano-keyboard .piano-key.active{background:#e9ae48!important}@media(max-width:800px){.desktop-layout .left-settings-panel,.desktop-layout .right-settings-panel{max-height:none;overflow:visible!important}}.ingredient-select{width:100%;text-align:left;padding:10px 12px;border:1px solid #cbc7df;border-radius:7px;background:#fff;color:#38304e;cursor:pointer;line-height:1.35}.ingredient-select:after{content:" \2315";color:#7662a9}.sequence-help{font-size:12px;line-height:1.5;color:#5f5970;grid-column:1/-1}#ingredient-picker{width:min(760px,calc(100vw - 32px));max-height:85vh;box-sizing:border-box;padding:24px;border:0;border-radius:16px;color:#2d3748;background:#f8f8fc;box-shadow:0 20px 90px #21163d66}#ingredient-picker::backdrop{background:#19172c88}.picker-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.picker-header h2{margin:0;font-size:22px}.picker-header p{font-size:13px;color:#626779}#picker-close{border:0;background:#e8e5f0;border-radius:8px;padding:8px 12px;cursor:pointer}#ingredient-search{display:block;width:100%;box-sizing:border-box;margin:8px 0 14px;padding:12px;border:1px solid #c5c3d2;border-radius:8px;font:inherit}#ingredient-categories{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}#ingredient-categories button,#remove-ingredient{border:1px solid #ccc6db;border-radius:20px;padding:7px 12px;background:#fff;color:#4d4263;cursor:pointer}#ingredient-categories [aria-pressed=true]{background:#6c5caf;color:#fff}#ingredient-results h3{font-size:14px;margin:20px 0 10px}.ingredient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ingredient-choice{text-align:left;padding:12px;border:1px solid #ddd9e9;border-radius:8px;background:#fff;color:#38344c;cursor:pointer}.ingredient-choice strong,.ingredient-choice small{display:block}.ingredient-choice small{margin-top:6px;color:#756c85}.ingredient-choice[aria-pressed=true]{border:2px solid #7560b3;background:#efeafa}.note-tile.second-ingredient{background:#e2f0ec}.note-tile.shared-note{box-shadow:inset 0 -3px #71978d}.note-tile.active{background:#ffd68b}@media(max-width:500px){#ingredient-picker{padding:16px}.ingredient-grid{grid-template-columns:1fr}}#ingredient-picker{margin:auto}#ingredient-picker button:focus-visible,.ingredient-select:focus-visible{outline:3px solid #8876d1;outline-offset:2px}.ingredient-options-trigger{width:100%;padding:10px 12px;border:1px solid #cbc7df;border-radius:7px;background:#f0ebfa;color:#38304e;font:inherit;text-align:left;cursor:pointer}.ingredient-options-trigger:disabled{opacity:.55;cursor:not-allowed}.ingredient-options-trigger:focus-visible,.ingredient-options-dialog button:focus-visible,.ingredient-options-dialog select:focus-visible,.ingredient-options-dialog input:focus-visible{outline:3px solid #8876d1;outline-offset:2px}.ingredient-options-dialog{width:min(520px,calc(100vw - 32px));max-height:85vh;box-sizing:border-box;margin:auto;padding:24px;border:0;border-radius:16px;color:#2d3748;background:#f8f8fc;box-shadow:0 20px 90px #21163d66}.ingredient-options-dialog::backdrop{background:#19172c88}.ingredient-options-dialog h2{margin:0 0 16px;font-size:20px}.dialog-close{border:0;background:#e8e5f0;border-radius:8px;padding:8px 12px;cursor:pointer}.ingredient-options-content{display:grid;gap:12px}.ingredient-options-content .setting-group{margin:0}@media(max-width:500px){.ingredient-options-dialog{padding:16px}}.natback-notes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}.natback-notes[hidden]{display:none}.natback-notes label{font-size:.8rem;cursor:pointer}.natback-notes p{flex-basis:100%;margin:.3rem 0;font-size:.8rem;font-weight:600}.natback-notes label:has(input:disabled){opacity:.5}.note-tile.borrowed-note{box-shadow:inset 0 -3px #8a65c7}.ingredient-parent-dot.original-hand-ghost{opacity:.35}.desktop-nav-bar .practice-transport-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:54px;min-width:54px;height:54px;padding:5px 3px;border-radius:10px;font-size:0;line-height:1;flex-shrink:0}.practice-transport-button:before{content:"";display:block;width:22px;height:22px;background:currentColor;mask:var(--transport-icon) center / contain no-repeat;-webkit-mask:var(--transport-icon) center / contain no-repeat}.practice-transport-button:after{content:attr(data-label);font-size:10px;font-weight:650;letter-spacing:.1px}.practice-transport-button:focus-visible{outline:3px solid #bf922c;outline-offset:3px}.desktop-nav-bar #settings-toggle{width:62px;min-width:62px;margin-left:8px}.desktop-nav-bar #reset-position{width:54px;min-width:54px}@media(min-width:1161px){.desktop-layout{--ingredients-core-width:280px;--ingredients-board-width:clamp(280px,25vw,320px);--ingredients-instrument-top:10px}.desktop-layout .desktop-nav-bar{display:grid;grid-template-columns:calc(50% + var(--ingredients-core-width)/2 + 8px - var(--ingredients-board-width)/2 - 24px) var(--ingredients-board-width) minmax(0,1fr);min-height:78px;box-sizing:border-box;gap:0}.desktop-layout .desktop-nav-bar .nav-brand{grid-column:1;min-width:0;padding-right:12px}.desktop-layout .ingredient-header-transport{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}.desktop-layout .ingredient-header-transport .nav-controls,.desktop-layout .ingredient-header-transport .nav-utils{gap:5px}.desktop-layout .desktop-nav-bar .practice-transport-button,.desktop-layout .desktop-nav-bar #reset-position{width:46px;min-width:46px}.desktop-layout .desktop-nav-bar #settings-toggle{width:54px;min-width:54px;margin-left:7px}.desktop-layout .center-content{backdrop-filter:none}.desktop-layout .center-content[data-instrument=vertical] .ingredient-instrument{position:fixed;left:calc(50% + var(--ingredients-core-width)/2 + 8px - var(--ingredients-board-width)/2);top:var(--ingredients-instrument-top);bottom:10px;width:var(--ingredients-board-width);height:auto;z-index:101;border-color:#cdd9df;border-radius:14px;contain:layout}}@media(min-width:1161px)and (max-width:1450px){.desktop-layout .desktop-nav-bar .practice-transport-button,.desktop-layout .desktop-nav-bar #reset-position{width:42px;min-width:42px}.desktop-layout .desktop-nav-bar #settings-toggle{width:50px;min-width:50px}.desktop-layout .ingredient-header-transport .nav-controls,.desktop-layout .ingredient-header-transport .nav-utils{gap:4px}}@media(max-width:1160px){.ingredient-header-transport{display:contents}}.desktop-layout .desktop-main-layout{grid-template-columns:280px minmax(0,1fr)}.desktop-layout #secondary-settings[hidden]{display:none!important}.desktop-layout #secondary-settings{position:fixed!important;right:10px!important;top:10px;bottom:10px;width:min(370px,calc(100vw - 20px))!important;max-height:none!important;z-index:300;overflow-y:auto!important;box-sizing:border-box;background:#f5f7f8;border:1px solid #cdd9df;border-radius:14px;box-shadow:0 8px 40px #20344140;padding:16px}.secondary-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.secondary-settings-heading h2{margin:0;font-size:18px;color:#2d3748}.desktop-layout #secondary-settings .settings-section{margin-bottom:20px}@media(max-width:800px){.desktop-layout .desktop-main-layout{display:flex;flex-direction:column}.desktop-nav-bar .practice-transport-button{width:40px;min-width:40px;height:44px}.desktop-nav-bar #settings-toggle{width:50px;min-width:50px;margin-left:0}.desktop-nav-bar #reset-position{width:46px;min-width:46px}.practice-transport-button:after{font-size:9px}}.ingredient-visual-stage{display:grid;grid-template-columns:minmax(190px,1fr) minmax(260px,320px) minmax(190px,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;width:100%;min-height:0;flex:1;box-sizing:border-box;padding:12px;background:#f3f6f7}.ingredient-visual-stage>*{min-width:0}#scale-aid{grid-column:1;grid-row:2}#path-aid{grid-column:1;grid-row:1}.ingredient-instrument{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0;overflow:auto;padding:10px;box-sizing:border-box;background:#fff;border:1px solid #dce5e9;border-radius:12px}#phrase-aid{grid-column:3;grid-row:1}#piano-aid{grid-column:3;grid-row:2}.ingredient-aid-card{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:12px;border:1px solid #dce5e9;border-radius:12px;background:#fff;box-shadow:0 2px 10px #24404e05}.ingredient-aid-card h2{margin:0 0 5px;color:#243e4c;font-size:15px;font-weight:650}.ingredient-aid-card p{margin:0;color:#71818a;font-size:11px;line-height:1.5}.ingredient-aid-drawing{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.ingredient-aid-drawing svg{display:block;width:100%;height:100%;max-height:none;overflow:visible;font-family:inherit}.ingredient-aid-drawing text{fill:#314653;font-size:12px}.ingredient-aid-drawing .aid-node-active{fill:#fff;font-size:11px;font-weight:650}.ingredient-aid-drawing .aid-node-inactive{fill:#667983;font-size:11px}.ingredient-aid-drawing .aid-note-label{font-size:13px;font-weight:650}.ingredient-aid-drawing .aid-center-label{font-size:9px;letter-spacing:.7px;fill:#536b76}.ingredient-aid-drawing .aid-center-sub{font-size:9px;fill:#71828c}.ingredient-aid-drawing .aid-current{stroke:#b78022;stroke-width:4}.ingredient-aid-sequence{max-height:4.5em;overflow:auto;padding-top:7px;border-top:1px solid #edf1f3;color:#647680!important;font-size:11px!important;line-height:1.5}.ingredient-aid-piano{margin:10px 0 6px;flex:none}.ingredient-aid-piano svg{display:block;width:100%;height:auto}.ingredient-aid-piano .aid-key-label{fill:#6e7e87;font-size:8px}.ingredient-aid-piano .aid-current{stroke:#b78022;stroke-width:2}.ingredient-instrument .phrase-card{flex:none}@media(max-width:900px){.ingredient-visual-stage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(2,minmax(310px,auto))}.ingredient-instrument{grid-column:1 / -1;grid-row:1;max-height:620px}#scale-aid{grid-column:2;grid-row:2}#path-aid{grid-column:1;grid-row:2}#phrase-aid{grid-column:1;grid-row:3}#piano-aid{grid-column:2;grid-row:3}}@media(max-width:600px){.ingredient-visual-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}.ingredient-instrument,#scale-aid,#path-aid,#phrase-aid,#piano-aid{grid-column:1;grid-row:auto}.ingredient-aid-card{min-height:320px}}.ingredient-instrument{justify-content:center;overflow:hidden}.ingredient-instrument .instrument-scroll{overflow:hidden;flex:none;max-width:100%}.phrase-aid{overflow:auto;gap:8px;clip-path:inset(0 round 12px)}.phrase-aid .study-heading{color:#2d3748;padding:0;text-align:left}.phrase-aid .study-heading h2{font-size:15px;line-height:1.3}.phrase-aid .study-heading p{color:#71818a;line-height:1.4}.phrase-aid .phrase-card{padding:0;border-radius:0;background:none;box-shadow:none}.phrase-aid .note-strip{padding:6px 0}.phrase-aid .note-tile{padding:6px 9px}.phrase-aid #degree-cycle{padding:6px 0}.phrase-aid #range-message{line-height:1.4}@media(max-width:900px){.ingredient-visual-stage{grid-template-rows:minmax(280px,calc(100dvh - 120px)) repeat(2,minmax(310px,auto))}.ingredient-instrument{max-height:none}}@media(max-width:800px){.desktop-main-layout .center-content{order:-1}.ingredient-visual-stage{padding:8px}}@media(max-width:600px){.ingredient-visual-stage{grid-template-rows:minmax(280px,calc(100dvh - 120px))}.ingredient-aid-card.phrase-aid{min-height:0}}@media(max-width:600px){.ingredient-visual-stage{grid-template-rows:minmax(280px,calc(100dvh - 160px))}.ingredient-instrument{grid-row:1}#phrase-aid{grid-row:2}#scale-aid{grid-row:4}#path-aid{grid-row:3}#piano-aid{grid-row:5}}#cycle-score-title{margin:8px 0 0;font-size:13px;color:#243e4c}.cycle-score-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.score-download-button{flex:none;min-height:34px;padding:6px 10px;border:1px solid #a9bcc4;border-radius:7px;background:#fff;color:#243e4c;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.score-download-button:hover:not(:disabled){border-color:#567481;background:#f2f7f8}.score-download-button:focus-visible{outline:3px solid #8876d1;outline-offset:2px}.score-download-button:disabled{cursor:default;opacity:.5}.score-download-status{min-height:1.3em;margin:0;color:#5f7078;font-size:11px;line-height:1.3}.cycle-score-scroll{flex:none;overflow:auto;max-height:270px;width:100%;border:1px solid #e2e9ec;border-radius:7px;background:#fffdf7}#notation{min-width:max-content}#notation svg{display:block;max-width:none;height:auto}#notation .abcjs-tab-number text{font-weight:700}.fretboard-overlays{border:1px solid #c6cbd0;border-radius:8px;padding:12px;margin:12px 0;min-width:0}.fretboard-overlays legend{font-size:13px;font-weight:700}.fretboard-overlays label{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px}.fretboard-overlays input{width:18px;height:18px;flex-shrink:0}.fretboard-overlays small{display:block;line-height:1.5;margin-top:8px}.fretboard-overlay-graphics{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:hidden}#dynamic-fretboard.path-visible .ingredient-parent-dot{opacity:.32;box-shadow:none}#dynamic-fretboard.path-visible .ingredient-parent-dot.active{opacity:1}#dynamic-fretboard .dot{transition:background-color .15s,opacity .15s}#dynamic-fretboard .dot.current-cycle-start,#dynamic-fretboard .dot.current-cycle-start.active{border-color:#f5c451;box-shadow:inset 0 0 0 2px #f5c451}.mobile-only{display:none}.mobile-sheet{border:0;padding:0;color:#243e4c;background:#f5f7fb}.mobile-sheet::backdrop{background:#14263988}.mobile-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid #dce5e9;flex:none}.mobile-sheet-heading h2{font-size:18px;margin:0}.mobile-sheet-heading button{min-height:44px;min-width:60px}.mobile-sheet-body{padding:16px;overflow:auto;overscroll-behavior:contain;min-height:0}@media(max-width:800px){html,body.desktop-layout{height:auto;overflow:visible!important;margin:0}.desktop-layout .desktop-app-container{height:auto;min-height:100dvh;display:flex;flex-direction:column;overflow:visible;padding:0 0 calc(76px + env(safe-area-inset-bottom));box-sizing:border-box}.desktop-layout .desktop-nav-bar{position:relative;top:auto;flex:none;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;min-height:0}.desktop-layout .nav-brand{flex:none;display:flex;align-items:center;gap:10px;min-width:0}.desktop-layout .nav-brand h1{font-size:17px;flex:none;margin:0}.desktop-layout .nav-brand #playback-status{display:block;font-size:10px;line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desktop-layout .nav-utils{display:flex;justify-content:stretch;gap:8px;margin:0}.desktop-layout .nav-utils button{flex:1;min-height:44px;margin:0!important;width:auto!important;min-width:0!important}.desktop-layout #settings-toggle{height:44px;flex-direction:row;gap:6px}.desktop-layout #settings-toggle:before{width:18px;height:18px}.desktop-layout #settings-toggle:after{font-size:12px}.desktop-layout .nav-controls{position:fixed;z-index:100;bottom:0;left:0;right:0;height:76px;box-sizing:content-box;padding:0 10px env(safe-area-inset-bottom);display:flex;align-items:center;gap:8px;background:#f8f9ff;border-top:1px solid #dce5e9;box-shadow:0 -3px 15px #243e4c0c}.desktop-layout .nav-controls .practice-transport-button{flex:1;width:auto;min-width:44px;height:56px}.desktop-layout .nav-controls .practice-transport-button:before{width:25px;height:25px}.desktop-layout .nav-controls .practice-transport-button:after{font-size:11px}.mobile-only{display:block}#mobile-study-summary{flex:none;font-size:12px;line-height:1.4;color:#fff;padding:6px 14px;overflow:hidden;max-height:2.8em}.desktop-layout .desktop-main-layout{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;height:auto;padding:0 8px 8px;overflow:visible;gap:0}.desktop-layout .desktop-main-layout .center-content{display:flex;flex:1 0 auto;min-height:0;width:100%;padding:0;overflow:visible;margin:0}.desktop-layout .ingredient-visual-stage{display:flex;flex:1 0 auto;min-height:0;height:auto;width:100%;padding:0;background:none}.desktop-layout .ingredient-instrument{flex:1 0 auto;width:100%;min-height:0;max-height:none;margin:0;padding:8px;gap:8px;overflow:visible}.desktop-layout .ingredient-instrument #piano{padding:0;flex:0 1 auto;max-height:100%;overflow:auto}#piano-container{padding:8px}.piano-heading p{margin-bottom:10px}.mobile-sheet[open]{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:600px;max-height:88dvh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}.mobile-sheet .left-settings-panel{display:block!important;position:static!important;width:100%!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible!important;height:auto!important;max-height:none!important}.mobile-sheet .settings-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;padding:0}.mobile-sheet .settings-section h3{grid-column:1 / -1;margin:0}.mobile-sheet .setting-group{min-width:0;margin:0}.mobile-sheet select,.mobile-sheet input,.mobile-sheet .ingredient-select,.mobile-sheet .ingredient-options-trigger{min-height:44px;font-size:16px;box-sizing:border-box;max-width:100%}.mobile-sheet #reset-position{margin:12px 0 0;min-height:44px}#mobile-details .mobile-sheet-body{display:flex;flex-direction:column;gap:12px}#mobile-details .ingredient-aid-card{flex:none;min-height:300px;overflow:visible}#mobile-details #phrase-aid{min-height:0}#mobile-details .ingredient-aid-drawing{min-height:260px}#mobile-details .ingredient-aid-drawing svg{height:260px}#mobile-details #piano-aid{min-height:150px}.desktop-layout #secondary-settings{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);right:0!important;width:min(400px,100vw)!important;border-radius:14px 0 0 14px}}@media(max-width:800px)and (max-height:500px){.desktop-layout .desktop-nav-bar{flex-direction:row;align-items:center;padding:4px 10px}.desktop-layout .nav-brand{flex:1}.desktop-layout .nav-brand #playback-status{display:none}.desktop-layout .nav-utils{flex:1}.desktop-layout .nav-controls{height:62px}.desktop-layout .nav-controls .practice-transport-button{height:48px}.desktop-layout .desktop-app-container{padding-bottom:calc(62px + env(safe-area-inset-bottom))}#mobile-study-summary{padding-top:3px;padding-bottom:3px}}@media(max-width:800px){.desktop-layout .nav-controls{top:auto;transform:none}}@media(max-width:800px){#scale-chart{transform:none!important}}#share-setup-dialog{width:min(36rem,calc(100vw - 2rem));max-height:85dvh;overflow:auto}#share-setup-dialog button{min-height:44px;min-width:44px}#share-setup-link{width:100%;box-sizing:border-box;margin:10px 0;padding:12px;font-size:16px}#setup-link-feedback{font-size:.8rem;line-height:1.4;grid-column:1 / -1}#setup-link-feedback:empty{display:none}@media(min-width:801px){.desktop-layout .desktop-nav-bar{display:flex!important;align-items:center;justify-content:space-between;gap:14px}.ingredient-header-primary{display:flex;align-items:center;gap:18px;min-width:0;flex:1}.ingredient-header-primary .nav-brand{flex:0 1 auto;min-width:180px;padding-right:0}.ingredient-header-primary .nav-controls{flex:none;gap:5px}.desktop-layout .desktop-nav-bar .nav-utils{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}.desktop-layout .desktop-nav-bar #sound-settings-toggle{width:54px;min-width:54px;margin-left:0}.desktop-layout .desktop-nav-bar #settings-toggle{margin-left:0}}@media(max-width:800px){.ingredient-header-primary{display:contents}}.sound-settings-dialog{width:min(560px,calc(100vw - 24px));max-height:min(760px,calc(100dvh - 24px));overflow:auto}#sound-settings-content{display:grid;gap:14px;margin-top:10px}#sound-settings-content>.setting-group{margin:0}#sound-settings-content #audio-rhythm-settings{margin:0;padding-top:4px;border-top:1px solid #dce5e9}#sound-settings-content #audio-rhythm-settings h3{margin:10px 0 12px;color:#243e4c;font-size:14px}#sound-settings-content .setting-group label{display:block;margin-bottom:6px;color:#526970;font-size:12px;font-weight:650}#sound-settings-content :is(select,input[type=number]){width:100%;min-height:42px;box-sizing:border-box}#sound-settings-content input[type=range]{width:100%}#mobile-setup-feedback:empty{display:none}#mobile-setup-feedback #setup-link-feedback{color:#fff;padding:0 14px 6px;margin:0;font-size:12px}.ingredient-release-badge{display:inline-block;vertical-align:middle;padding:3px 7px;border:1px solid #b9afd8;border-radius:6px;color:#62518b;background:#f1edfa;font-size:10px;line-height:1.2;font-weight:600;white-space:nowrap}@media(max-width:800px){.desktop-layout .nav-brand{flex-wrap:wrap;column-gap:8px;row-gap:2px}.desktop-layout .nav-brand #playback-status{flex:1;min-width:100px}}@media(min-width:801px){.center-content[data-instrument=horizontal] .ingredient-visual-stage,.center-content[data-instrument=piano] .ingredient-visual-stage{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(310px,auto);flex:none;min-height:100%;align-content:start}.center-content[data-instrument=piano] .ingredient-visual-stage{grid-template-columns:repeat(3,minmax(0,1fr))}.center-content[data-instrument=horizontal] .ingredient-instrument,.center-content[data-instrument=piano] .ingredient-instrument{grid-column:1 / -1;grid-row:1;width:100%;height:clamp(250px,35dvh,360px);min-height:0}.center-content[data-instrument=piano] .ingredient-instrument{height:260px}.center-content[data-instrument=piano][data-piano-fretboard=true] .ingredient-instrument{height:clamp(410px,60dvh,600px)}.center-content[data-instrument=horizontal] :is(#scale-aid,#path-aid,#phrase-aid,#piano-aid),.center-content[data-instrument=piano] :is(#scale-aid,#path-aid,#phrase-aid,#piano-aid){grid-column:auto;grid-row:auto;min-height:310px;max-height:460px}.center-content[data-instrument=piano] #piano-aid{display:none}.center-content[data-instrument=piano] #piano-keyboard{min-width:0}.center-content[data-instrument=piano] #piano .piano-wrapper{overflow-x:hidden}}@media(min-width:801px)and (max-width:1200px){.center-content[data-instrument=horizontal] .ingredient-visual-stage,.center-content[data-instrument=piano] .ingredient-visual-stage{grid-template-columns:repeat(2,minmax(0,1fr))}.center-content[data-instrument=piano] #phrase-aid{grid-column:1 / -1}}#piano-keyboard .white-key.parent-key:not(.ingredient-key){background:linear-gradient(#e7e0f2,#f1edf7 70%)}#piano-keyboard .black-key.parent-key:not(.ingredient-key){background:linear-gradient(#756583,#51435f)}#piano-keyboard .black-key.parent-key:not(.ingredient-key) .piano-key-label{color:#f1edf7}#piano-keyboard .black-key.ingredient-key .piano-key-label,#piano-keyboard .piano-key.active .piano-key-label{color:#30233f}#piano-keyboard .piano-key.current-cycle-start:before{content:"";position:absolute;inset:0;border:3px solid #f5c451;border-radius:0 0 4px 4px;z-index:4;pointer-events:none}#piano-keyboard .piano-next-marker{position:absolute;inset:5px;border:3px dotted #7b3d86;border-radius:3px;z-index:5;pointer-events:none}#piano-keyboard .piano-overlay-layer{position:absolute;top:0;left:0;z-index:6;pointer-events:none}#piano-keyboard .fretboard-overlay-graphics{border:0;padding:0;margin:0;overflow:hidden}@media(min-width:901px){.center-content[data-instrument=vertical] .ingredient-visual-stage{grid-template-rows:minmax(0,1fr) max-content}.center-content[data-instrument=vertical] :is(#scale-aid,#path-aid){grid-row:1 / 3;height:calc(50% - 6px);box-sizing:border-box}.center-content[data-instrument=vertical] #scale-aid{align-self:end}.center-content[data-instrument=vertical] #path-aid{align-self:start}}#ingredient-chain{display:grid;gap:14px;grid-column:1 / -1;min-width:0}.ingredient-slot{display:grid;gap:7px;min-width:0}.ingredient-slot>label{font-size:12px;text-transform:uppercase;color:#4a5568}.ingredient-slot-actions{display:flex;gap:8px}.ingredient-about{font-size:12px;line-height:1.5;color:#5f5970}.ingredient-about summary{cursor:pointer;padding:4px 0}.ingredient-about p{margin:5px 0}#chain-feedback{padding:10px 12px;border-left:3px solid #8b6baa;background:#f4f0f8;border-radius:4px}.ingredient-slot-actions .ingredient-options-trigger{flex:1;width:auto}.ingredient-remove{padding:8px 10px;border:1px solid #dce5e9;border-radius:7px;background:#fff;color:#625b71;cursor:pointer}.ingredient-remove:disabled{display:none}#add-ingredient{grid-column:1 / -1;margin:12px 0}.ingredient-remove:focus-visible{outline:3px solid #8876d1;outline-offset:2px}@media(max-width:800px){.ingredient-slot-actions button{min-height:44px}}.setup-aid{overflow:auto;gap:10px;clip-path:inset(0 round 12px)}.setup-aid>*,.setup-aid .phrase-card{flex:none}.setup-aid .study-heading{padding:0;text-align:left}.setup-aid .study-heading small{color:#71818a;font-size:11px}.setup-aid #study-title{margin:0;color:#243e4c;font-size:15px;line-height:1.45;font-weight:650}.setup-aid .study-heading p{font-size:11px;line-height:1.5}.setup-aid .phrase-card{padding:0;border-radius:0;background:none;box-shadow:none}.setup-aid #phrase-caption{margin:2px 0 6px;font-size:14px}.current-score-scroll{width:100%;overflow-x:auto;margin:0 0 8px;border:1px solid #e2e9ec;border-radius:7px;background:#fffdf7}#current-notation{min-width:max-content}#current-notation svg{display:block;max-width:none;height:auto}.start-selector-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px}.start-selector-heading h3{margin:0;color:#314653;font-size:12px}.setup-aid #degree-cycle{flex-wrap:wrap;overflow:visible}.setup-aid #degree-cycle button{min-width:38px;min-height:38px}#phrase-aid .cycle-score-scroll{flex:1;min-height:0;max-height:none}@media(max-width:800px){#mobile-details #path-aid{min-height:0}.setup-aid #degree-cycle button{width:44px;min-width:44px;height:44px;min-height:44px}#mobile-details #phrase-aid .cycle-score-scroll{flex:none}}#note-position{font-size:12px;line-height:1.4;color:#526970;margin:4px 0 8px}@media(max-width:480px){.desktop-layout .nav-controls{gap:4px}}.nav-controls #previous-note{margin-left:12px}@media(max-width:480px){.nav-controls #previous-note{margin-left:8px}}.center-content[data-instrument=vertical] .ingredient-instrument{overflow:hidden}.center-content[data-instrument=vertical] .ingredient-instrument .instrument-scroll{overflow:visible}@media(min-width:1161px){.ingredient-header-primary .nav-brand{flex:0 0 248px;max-width:248px}.ingredient-header-primary .nav-controls{gap:4px}.ingredient-header-primary .nav-controls .practice-transport-button{width:44px;min-width:44px}}.important-families{border:1px solid #d8c9ad;border-radius:10px;padding:.65rem .75rem;margin:0;background:#fffaf0}.important-families legend{font-weight:700;padding:0 .3rem}.important-families p{font-size:.82rem;margin:.1rem 0 .55rem;color:#5d5142}.important-families ol{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.important-families li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.45rem}.important-families button{min-width:2.1rem;padding:.25rem .45rem}