:root{--mobile-safe-area-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }body:has(.mobile-page-layout),html:has(.mobile-page-layout){overflow:hidden!important;height:100%!important;width:100%!important}.mobile-page-layout{display:flex;flex-direction:column;height:100%;height:100dvh;width:100%;width:100dvw;max-height:100dvh;max-width:100dvw;overflow:hidden;box-sizing:border-box}.mobile-safe-area-spacer{flex:0 0 var(--mobile-safe-area-bottom, 12px);flex-shrink:0;overflow:hidden;background:#0f172ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%}.mobile-page-layout-content{flex:1 1 0;min-height:0;min-width:0;overflow:hidden;position:relative;display:flex;flex-direction:var(--mobile-content-direction, column)}.mobile-page-layout-content:has(.chord-detail-sheet-backdrop),.mobile-page-layout-content:has(.chord-picker-modal-backdrop){z-index:200}.mobile-page-layout:has(.chord-detail-sheet-backdrop) .mobile-page-layout-top-bar,.mobile-page-layout:has(.chord-picker-modal-backdrop) .mobile-page-layout-top-bar{border-bottom-color:transparent}.app-main:has(.mobile-page-layout){padding:0!important;overflow:hidden!important;height:100%!important;max-height:100dvh!important}.mobile-page-layout-top-bar{flex:0 0 3.5rem;flex-shrink:0;overflow:visible;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:#0f172ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(148,163,184,.2);padding:0 .75rem;z-index:120;box-sizing:border-box}.mobile-top-bar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 0;justify-content:flex-start}.mobile-top-bar-center{display:flex;align-items:center;justify-content:center;flex:2 1 0;min-width:0}.mobile-top-bar-right{display:flex;align-items:center;gap:.5rem;flex:1 1 0;justify-content:flex-end}.mobile-page-layout-title{font-size:1.05rem;font-weight:700;color:#f8fafc;margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-page-layout-logo,.mobile-page-layout-learn-btn,.mobile-page-layout-prev-btn,.mobile-page-layout-next-btn{display:inline-flex;align-items:center;justify-content:center;background:#94a3b814;border:1px solid rgba(148,163,184,.2);border-radius:.375rem;color:#cbd5e1;width:2.25rem;height:2.25rem;cursor:pointer;transition:all .2s ease}.mobile-page-layout-logo:hover,.mobile-page-layout-learn-btn:hover,.mobile-page-layout-prev-btn:hover,.mobile-page-layout-next-btn:hover{border-color:#94a3b880;color:#f8fafc;background:#94a3b829}.mobile-page-layout-prev-btn.is-disabled,.mobile-page-layout-next-btn.is-disabled{opacity:.25;pointer-events:none}.mobile-nav-caret-container{position:relative}.mobile-nav-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:#1e293b;border:1px solid rgba(148,163,184,.25);border-radius:.5rem;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #00000080;z-index:130;min-width:140px;max-height:calc(100vh - 4rem);overflow-y:auto;display:flex;flex-direction:column;padding:.25rem 0;animation:mobileDropdownFadeIn .15s ease-out}@keyframes mobileDropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mobile-nav-dropdown-item{padding:.6rem 1rem;color:#cbd5e1;font-size:.85rem;text-decoration:none;text-align:left;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.mobile-nav-dropdown-item:hover,.mobile-nav-dropdown-item:focus-visible{background-color:#94a3b81f;color:#f8fafc}.mobile-nav-dropdown-item.is-detour{color:#c084fc;background-color:#c084fc14}.mobile-nav-dropdown-item.is-detour:hover,.mobile-nav-dropdown-item.is-detour:focus-visible{background-color:#c084fc2e;color:#f3e8ff}.mobile-nav-detour-prefix{font-weight:600;opacity:.85;margin-right:.2rem}.mobile-page-layout-bottom-bar{position:relative;z-index:100;flex:0 0 8.5rem;flex-shrink:0;overflow:hidden;display:flex;flex-direction:row;align-items:stretch;width:100%;border-top:1px solid rgba(148,163,184,.2);background:#0f172ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.5rem;gap:.5rem;box-sizing:border-box}.mobile-page-layout-gear-btn{display:inline-flex;align-items:center;justify-content:center;background:#94a3b814;border:1px solid rgba(148,163,184,.25);border-radius:.5rem;color:#cbd5e1;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;white-space:nowrap;width:3.5rem;height:100%;flex-shrink:0}.mobile-page-layout-gear-btn:hover,.mobile-page-layout-gear-btn:focus-visible,.mobile-page-layout-gear-btn.is-active{border-color:#94a3b899;color:#f8fafc;background:#94a3b833}.mobile-page-layout-piano-container{flex:1 1 0;min-width:0;height:100%;overflow-x:hidden;overflow-y:hidden;display:flex;align-items:stretch}.mobile-page-layout-piano-container .keyboard-card{padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;width:100%;height:100%;display:block}.mobile-page-layout-piano-container .piano-keyboard{height:100%;max-width:none;margin:0;width:100%!important;--piano-white-key-width: calc(100% / var(--white-key-count)) !important;--piano-black-key-width: calc(var(--piano-white-key-width) * .58) !important}.mobile-page-layout.is-landscape .mobile-page-layout-top-bar{flex-basis:2.75rem;flex-shrink:0;overflow:visible}.mobile-page-layout.is-landscape .mobile-page-layout-content{--mobile-content-direction: row;flex:1 1 0;min-width:0;min-height:0;overflow:hidden}.mobile-page-layout.is-landscape .mobile-page-layout-bottom-bar{flex-basis:5rem;flex-shrink:0;overflow:hidden;padding:.3rem .5rem}.mobile-page-layout.is-landscape .mobile-page-layout-piano-container .piano-keyboard{--piano-white-key-width: calc(100% / var(--white-key-count)) !important;--piano-black-key-width: calc(var(--piano-white-key-width) * .58) !important}.mobile-page-layout.is-landscape .mobile-page-layout-gear-btn{width:2.75rem}.mobile-page-layout.is-landscape .mobile-safe-area-spacer{display:none!important}.mobile-page-layout.is-landscape .mobile-popover-body{gap:.6rem;flex:1 1 auto;min-height:0;overflow-y:auto;padding:.75rem}.mobile-page-layout.is-landscape .mobile-frequency-graph{padding:0}.mobile-page-layout.is-landscape .mobile-frequency-graph .frequency-graph-card{padding:0;gap:0}.mobile-page-layout.is-landscape .mobile-frequency-graph .frequency-display{margin-bottom:.1rem;font-size:.8rem;padding:.1rem 0}.mobile-page-layout.is-landscape .mobile-realtime-waveform.is-landscape,.mobile-page-layout.is-landscape .mobile-adsr-waveform.is-landscape{height:100%;min-height:0;flex:1 1 0;padding:0}.mobile-page-layout.is-landscape .mobile-realtime-waveform.is-landscape .real-time-visualizer-card>div,.mobile-page-layout.is-landscape .mobile-adsr-waveform.is-landscape .real-time-visualizer-card>div{min-height:0!important}.mobile-page-layout-content>.mobile-effect-page{flex:1 1 auto;width:100%;min-width:0}.mobile-effect-page .graph-card,.mobile-effect-page .feature-control-card{grid-template-columns:minmax(0,1fr);min-width:0;width:100%;padding:.5rem .6rem;gap:.35rem;border-radius:12px;box-shadow:none}.mobile-effect-page .graph-card>h2,.mobile-effect-page .feature-control-card>h2{margin:0;font-size:.95rem;line-height:1.2}.mobile-effect-page .visualizer-field-row{margin:0!important;gap:.5rem;min-width:0}.mobile-effect-page .visualizer-field-row>label{width:auto;flex:0 0 auto;font-size:.8rem}.mobile-effect-page .visualizer-field-row>div{margin-top:0!important;min-width:0}.mobile-effect-page .graph-card>p,.mobile-effect-page .feature-control-card>p{display:none}.mobile-effect-page-visual{display:flex}.mobile-effect-page-visual>*{flex:1 1 auto;min-height:0;min-width:0}.mobile-effect-page-visual .graph-card{height:100%;grid-template-rows:auto minmax(64px,1fr);overflow:hidden}.mobile-effect-page-visual .graph-card>svg{height:100%;min-height:0!important}.mobile-effect-page .mobile-realtime-waveform,.mobile-effect-page .mobile-adsr-waveform{height:5rem}.mobile-page-layout.is-landscape .mobile-effect-page .mobile-realtime-waveform,.mobile-page-layout.is-landscape .mobile-effect-page .mobile-adsr-waveform{height:100%;min-height:0;flex:1 1 0;padding:0}.mobile-effect-page .noise-eq-card .equalizer-band-controls{flex-wrap:nowrap;justify-content:space-around;gap:.2rem;width:100%;min-height:0}.mobile-effect-page .noise-eq-card .equalizer-band-control{min-inline-size:0;flex:1 1 0;gap:.2rem}.mobile-effect-page .noise-eq-card .equalizer-band-slider-shell{inline-size:1.25rem;min-block-size:3rem}.mobile-effect-page .noise-eq-card .equalizer-band-label,.mobile-effect-page .noise-eq-card .equalizer-band-range,.mobile-effect-page .noise-eq-card .equalizer-band-multiplier{font-size:.55rem;line-height:1.1}.mobile-page-layout.is-landscape .mobile-effect-page .noise-eq-card .equalizer-band-label{font-size:.5rem;line-height:1.15;max-width:100%}.mobile-effect-page .oscillator-filter-control-row{border-radius:10px}.mobile-page-layout.is-landscape .mobile-oscillator-filter-page .oscillator-filter-control-row,.mobile-page-layout.is-landscape .mobile-oscillator-filter-page .oscillator-filter-control-row:hover{border:none;background:transparent}.mobile-page-layout.is-landscape .mobile-oscillator-filter-page .oscillator-filter-parameter-label,.mobile-page-layout.is-landscape .mobile-oscillator-filter-page .dial-label{font-size:.7rem;letter-spacing:.04em;white-space:nowrap}.mobile-page-layout.is-landscape .mobile-chords-container{flex:1 1 auto;width:100%;min-width:0}.mobile-page-layout.is-landscape .chord-visualizer-card{flex-direction:row;align-items:stretch;gap:.75rem;width:100%;padding:.5rem .75rem}.mobile-page-layout.is-landscape .chord-visualizer-card>.graph-card-header{flex:0 0 auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;max-width:11rem}.mobile-page-layout.is-landscape .chord-visualizer-scroll-container{flex:1 1 0;min-width:0}.mobile-page-layout.is-landscape .chord-visualizer-card .chord-visualizer-stack{margin-top:0!important}.mobile-page-layout.is-landscape .chord-visualizer-card .chord-visualizer-row{min-height:0}.mobile-page-layout.is-landscape .chord-visualizer-row .graph-note-pill{padding:0 .4rem;font-size:.68rem;line-height:1.25}.mobile-page-layout.is-landscape .chord-visualizer-note-label{font-size:.62rem;line-height:1.2}.mobile-page-layout.is-landscape .mobile-page-layout-content>.intervals-mobile-content{flex:1 1 auto;width:100%;min-width:0;box-sizing:border-box}.mobile-page-layout.is-landscape .intervals-mobile-left{flex:0 1 16.5rem;min-width:12rem;min-height:0;align-self:stretch;display:flex;flex-direction:column;gap:.4rem;overflow-y:auto}.mobile-page-layout.is-landscape .intervals-mobile-summary{flex:0 0 auto;box-sizing:border-box}.mobile-page-layout.is-landscape .intervals-mobile-summary>div:last-child{flex-direction:column;gap:.3rem}.mobile-page-layout.is-landscape .intervals-mobile-summary-label{display:none}.mobile-page-layout.is-landscape .intervals-mobile-summary>div:first-child>div:first-child{flex-direction:column;align-items:stretch!important;gap:.25rem}.mobile-page-layout.is-landscape .intervals-mobile-summary-selector,.mobile-page-layout.is-landscape .intervals-mobile-summary-selector .interval-picker-controls,.mobile-page-layout.is-landscape .intervals-mobile-summary-selector .interval-popup-container{min-width:0;width:100%;max-width:100%}.mobile-page-layout.is-landscape .intervals-mobile-summary-selector .note-picker-trigger{width:100%;min-width:0}.mobile-page-layout.is-landscape .intervals-mobile-summary-selector .note-picker-value{min-width:0}.mobile-page-layout.is-landscape .intervals-mobile-left>.mobile-left-tabs{width:100%;flex:0 0 auto}.mobile-page-layout.is-landscape .intervals-mobile-graphs>div{min-width:0;min-height:0}.circle-fifths-mobile-landscape-panels{display:flex;flex-direction:row;gap:.5rem;flex:1 1 0;min-height:0;width:100%}.circle-fifths-mobile-landscape-panels>.circle-fifths-mobile-panel{flex:1 1 0;min-width:0;padding:.25rem;box-sizing:border-box}.circle-fifths-mobile-landscape-panels>.circle-fifths-mobile-panel:first-child{flex:0 0 auto;aspect-ratio:1 / 1;padding:0}.circle-fifths-mobile-container.is-landscape .wheel-panel{flex:1 1 0;min-height:0;width:100%;padding:0;border:none;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;box-sizing:border-box}.mobile-page-layout.is-landscape .circle-fifths-mobile-container.is-landscape .svg-wheel{height:100%;width:100%;max-height:100%;max-width:100%}.circle-fifths-mobile-container.is-landscape .wheel-text.major{font-size:1.5rem}.circle-fifths-mobile-container.is-landscape .wheel-text.minor{font-size:1.2rem}.circle-fifths-mobile-container.is-landscape .wheel-text.major.active{font-size:1.7rem}.circle-fifths-mobile-container.is-landscape .wheel-text.minor.active{font-size:1.4rem}.circle-fifths-mobile-container.is-landscape .hub-text-title{font-size:.8rem}.circle-fifths-mobile-container.is-landscape .hub-text-value{font-size:1.5rem}.circle-fifths-mobile-container.is-landscape .details-panel{display:grid;grid-template-columns:11rem minmax(0,1fr);align-items:center;gap:.5rem;padding:.5rem;min-height:0;overflow-y:auto}.circle-fifths-mobile-container.is-landscape .chords-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem}.circle-fifths-mobile-container.is-landscape .chord-card{padding:.35rem .25rem;gap:.1rem}.circle-fifths-mobile-container.is-landscape .staff-visualizer-container{padding:.5rem}.mobile-page-layout.is-landscape .chord-finder-mobile-body.is-landscape>.chord-finder-left-panel,.mobile-page-layout.is-landscape .chord-finder-mobile-body.is-landscape>.chord-finder-right-panel{flex:1 1 0;min-width:0;height:100%;overflow-y:auto}.mobile-page-layout.is-landscape .just-intonation-content{overflow-y:hidden}.mobile-page-layout.is-landscape .just-intonation-content>div:last-child{flex:1 1 0;min-height:0}.mobile-page-layout.is-landscape .mobile-page-layout-content>.just-intonation-content{flex:1 1 auto;width:100%;min-width:0}.mobile-page-layout.is-landscape .just-intonation-mobile-graphs{grid-template-rows:minmax(0,1fr);min-width:0}.mobile-page-layout.is-landscape .just-intonation-mobile-graphs>div{min-height:0;height:100%}.mobile-page-layout.is-landscape .just-intonation-mobile-graphs .graph-card{height:100%;min-height:0;box-sizing:border-box}.mobile-page-layout.is-landscape .white-keys-mobile-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-page-layout.is-landscape .mobile-page-layout-content>.white-keys-mobile-container{flex:1 1 auto;width:100%;min-width:0;padding:.5rem .75rem;box-sizing:border-box}.mobile-page-layout.is-landscape .white-keys-mobile-intro{display:none}.mobile-page-layout.is-landscape .white-keys-mobile-item{padding:.4rem .6rem}.mobile-page-layout.is-landscape .white-keys-mobile-play-btn{width:2rem;height:2rem;flex-shrink:0}.mobile-page-layout.is-landscape .song-analysis-mobile-column{flex:1 1 0;min-width:0;width:100%}.song-analysis-mobile-column{flex:1 1 0;min-width:0;min-height:0;width:100%;display:flex;flex-direction:column}.song-analysis-mobile-scroll{flex:1 1 0;min-width:0;min-height:0;padding:.75rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.key-change-card{flex:0 0 auto;display:flex;flex-direction:column;padding:.6rem .75rem;border-radius:12px;border:1px solid rgba(74,222,128,.3);background:#22c55e12}.key-change-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;font-size:.95rem;color:#cbd5e1}.key-change-summary .key-change-from{font-size:.85rem;color:#94a3b8}.key-change-summary.is-original{color:#94a3b8}.key-change-key-btn{padding:.2rem .6rem;border-radius:8px;border:1px solid rgba(74,222,128,.5);background:#22c55e26;color:#4ade80;font-size:1.05rem;font-weight:700;cursor:pointer}.key-change-key-btn:after{content:" ▾";font-size:.75em;opacity:.8}.key-change-key-btn:hover:not(:disabled),.key-change-key-btn:focus-visible:not(:disabled){background:#22c55e4d;border-color:#4ade80}.key-change-key-btn:disabled{opacity:.5;cursor:not-allowed}.chord-quality-popup-content.key-change-modal{max-width:22rem}.key-change-modal-fields{display:flex;flex-direction:column;gap:1rem;outline:none}.key-change-modal-done{align-self:stretch;padding:.55rem 1rem;border-radius:8px;border:none;background:#38bdf8;color:#0f172a;font-weight:700;cursor:pointer}.mobile-page-layout.is-landscape .key-change-card{padding:.35rem .6rem}@media(max-height:480px){.chord-quality-popup-content.key-change-modal{padding:.75rem 1rem}.key-change-modal .chord-quality-popup-header{margin-bottom:.5rem}.key-change-modal-fields{gap:.6rem}}.song-analysis-mobile-column>.midi-playback-controls-card{flex:0 0 auto;width:100%;box-sizing:border-box;gap:.75rem;padding:.3rem .75rem;border-width:1px 0 0;border-radius:0;box-shadow:none}.song-analysis-mobile-column>.midi-playback-controls-card .midi-playback-controls .midi-control-btn{width:1.75rem;height:1.75rem}.midi-playback-seek{flex:1 1 0;min-width:0;display:flex;align-items:center;margin:0}.midi-playback-seek input[type=range]{width:100%;min-width:0;margin:0}.visualizer-mobile-editor,.visualizer-mobile-editor .stage-editor-container{min-width:0;max-width:100%;box-sizing:border-box}.visualizer-mobile-editor .feature-page-panel-grid{grid-template-columns:minmax(0,1fr)}.visualizer-mobile-editor .feature-control-card{min-width:0;width:100%;box-sizing:border-box}.visualizer-mobile-editor .visualizer-field-row{flex-direction:column;align-items:stretch;gap:.35rem;min-width:0}.visualizer-mobile-editor .visualizer-field-row label{width:auto}.visualizer-mobile-editor .visualizer-field-row>div{margin-top:0!important;min-width:0}.visualizer-mobile-editor .inharmonicity-b-readout{min-width:0!important;white-space:nowrap}.visualizer-mobile-landscape{width:100%}.mobile-page-layout.is-landscape .visualizer-mobile-landscape-waveform.is-landscape{display:flex;align-items:stretch;overflow:hidden}.mobile-page-layout.is-landscape .synthesis-hub-container.is-landscape{height:100%;max-height:100%;min-height:0;padding:.75rem;gap:.75rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-page-layout.is-landscape .synthesis-hub-grid.is-landscape{gap:.75rem;padding-bottom:.5rem;align-content:start}.mobile-popover-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90}.mobile-page-layout-gear-popover{position:absolute;bottom:calc(100% + .5rem);left:.5rem;right:.5rem;background:#1e293b;border:1px solid rgba(148,163,184,.25);border-radius:.75rem;box-shadow:0 -10px 30px -5px #0009;z-index:95;display:flex;flex-direction:column;overflow:visible;max-height:60vh;animation:mobilePopoverSlideUp .25s cubic-bezier(.16,1,.3,1)}@keyframes mobilePopoverSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.mobile-popover-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid rgba(148,163,184,.15);background:#0f172a66}.mobile-popover-header h3{margin:0;font-size:.95rem;font-weight:700;color:#f8fafc;text-transform:uppercase;letter-spacing:.05em}.mobile-popover-close-btn{background:none;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;padding:.2rem;display:flex;align-items:center;justify-content:center;transition:color .15s ease}.mobile-popover-body{padding:1rem;display:flex;flex-direction:column;gap:1.25rem;overflow:visible}.mobile-setting-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;width:100%}.mobile-setting-label{font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;width:8rem;text-align:left}.mobile-setting-control{display:flex;flex-direction:row;align-items:center;flex-grow:1;justify-content:flex-start;max-width:14rem}.mobile-setting-control-block{display:block;width:100%;max-width:none;flex:1 1 auto;min-width:0}.mobile-setting-item-gap{margin-top:.25rem}.mobile-setting-control .note-picker-trigger{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:#0f172a4d;border:1px solid rgba(148,163,184,.25);border-radius:.5rem;color:#cbd5e1;font-size:.9rem;padding:.6rem .75rem;width:100%;height:auto;min-width:0;box-sizing:border-box}.mobile-setting-control .note-picker-trigger:after{content:"▼";font-size:.65rem;margin-left:.5rem;opacity:.7}.mobile-setting-control .chord-quality-picker,.mobile-setting-control .chord-voicing-picker-label-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:1rem!important;width:100%!important}.mobile-setting-control .chord-quality-picker span,.mobile-setting-control .chord-voicing-picker-label-wrapper span{font-size:.75rem!important;font-weight:700!important;color:#94a3b8!important;text-transform:uppercase!important;letter-spacing:.05em!important;flex-shrink:0!important;margin:0!important;width:8rem!important;text-align:left!important}.mobile-setting-control .chord-quality-picker select,.mobile-setting-control .chord-voicing-picker-label-wrapper select{border-radius:.5rem!important;background:#0f172a4d!important;border:1px solid rgba(148,163,184,.25)!important;padding:.6rem 2.5rem .6rem .75rem!important;font-size:.9rem!important;color:#cbd5e1!important;flex-grow:1!important;max-width:14rem!important;box-sizing:border-box!important;background-position:right .75rem center!important}.mobile-select-input{border-radius:.5rem!important;background:#0f172a4d!important;border:1px solid rgba(148,163,184,.25)!important;padding:.6rem 2.5rem .6rem .75rem!important;font-size:.9rem!important;color:#cbd5e1!important;flex-grow:1!important;max-width:14rem!important;box-sizing:border-box!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right .75rem center!important;background-size:1rem!important;transition:border-color .2s ease,background-color .2s ease!important;font-family:inherit;cursor:pointer}.mobile-select-input:hover,.mobile-select-input:focus-visible{border-color:#22c55ecc!important;background-color:#22c55e1f!important;outline:none}.mobile-select-input option{background:#0f172a!important;color:#f8fafc!important}.mobile-select-input[type=number]::-webkit-inner-spin-button,.mobile-select-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mobile-select-input[type=number]{-moz-appearance:textfield}.mobile-setting-control .chord-quality-picker select:hover,.mobile-setting-control .chord-quality-picker select:focus-visible,.mobile-setting-control .chord-voicing-picker-label-wrapper select:hover,.mobile-setting-control .chord-voicing-picker-label-wrapper select:focus-visible{border-color:#22c55ecc!important;background-color:#22c55e1f!important}.mobile-setting-control .preset-picker{width:100%;position:relative}.mobile-setting-control .preset-picker .mobile-bottom-bar-btn{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:#0f172a4d;border:1px solid rgba(148,163,184,.25);border-radius:.5rem;color:#cbd5e1;font-size:.9rem;padding:.6rem .75rem;width:100%;height:auto;min-width:0;box-sizing:border-box}.mobile-setting-control .preset-picker .mobile-bottom-bar-btn:after{content:"▼";font-size:.65rem;margin-left:.5rem;opacity:.7}.mobile-setting-control .preset-picker .mobile-bottom-bar-btn span:first-child:after{content:":"}.mobile-setting-control .preset-picker .mobile-bottom-bar-btn span:nth-child(2){margin-left:.25rem;font-size:.9rem!important;font-weight:700;color:#38bdf8}.mobile-page-layout-bottom-bar .note-picker-trigger:hover,.mobile-page-layout-bottom-bar .note-picker-trigger:focus-visible{border-color:#94a3b899;color:#f8fafc;background:#94a3b814}.mobile-bottom-bar-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:none;border:1px solid rgba(148,163,184,.25);border-radius:.5rem;color:#cbd5e1;font-size:.7rem;font-weight:600;padding:.4rem .75rem;min-width:3.5rem;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;white-space:nowrap}.mobile-bottom-bar-btn:hover,.mobile-bottom-bar-btn:focus-visible{border-color:#94a3b899;color:#f8fafc;background:#94a3b814}.mobile-bottom-bar-btn .app-nav-icon{width:1.25rem;height:1.25rem}.mobile-frequency-graph{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:1rem}.mobile-piano-inline{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;align-items:stretch}.mobile-piano-inline .keyboard-card{padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;width:auto;height:100%;display:block}.mobile-piano-inline .piano-keyboard{height:100%;max-width:none;margin:0;--piano-white-key-width: 40px !important}.mobile-page-layout-bottom-bar .mobile-back-btn{min-width:2.25rem;padding:.4rem;font-size:1rem}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;overflow:hidden}.app-header{position:relative;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid rgba(148,163,184,.2);background:#0f172aa6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.app-header-left{display:flex;align-items:center;gap:.5rem;justify-self:start}.app-header-right{justify-self:end;display:flex;align-items:center;gap:.5rem}.dev-diagnostics-link{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;text-decoration:none;font-size:1rem;line-height:1;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .15s ease}.dev-diagnostics-link:hover{border-color:#94a3b8a6;background:#1e293bd9;transform:translateY(-1px)}.diagnostics-chart{margin:.75rem 0 1rem;border:1px solid rgba(148,163,184,.2);border-radius:.5rem;background:#0f172a99;padding:.5rem .5rem .25rem}.diagnostics-chart--empty{display:flex;align-items:center;justify-content:center;min-height:5rem;color:#94a3b899;font-size:.85rem}.diagnostics-chart__svg{display:block;width:100%;height:auto}.diagnostics-chart__grid{stroke:#94a3b81f;stroke-width:1}.diagnostics-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.4rem .25rem .1rem;font-size:.75rem;color:#cbd5e1d9}.diagnostics-chart__legend-item{display:inline-flex;align-items:center;gap:.35rem}.diagnostics-chart__legend-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0}.diagnostics-chart__legend-peak{color:#94a3b8a6}.diagnostics-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:diagModalFadeIn .18s ease-out}@keyframes diagModalFadeIn{0%{opacity:0}to{opacity:1}}.diagnostics-modal{background:#0f172af2;border:1px solid rgba(148,163,184,.25);border-radius:1rem;box-shadow:0 25px 60px -10px #000000b3,0 0 0 1px #94a3b814;width:min(960px,96vw);height:96vh;max-height:96vh;display:flex;flex-direction:column;animation:diagModalSlideIn .22s cubic-bezier(.16,1,.3,1)}@keyframes diagModalSlideIn{0%{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.diagnostics-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(148,163,184,.15);flex-shrink:0}.diagnostics-modal-title{margin:0;font-size:1.1rem;font-weight:700;color:#f8fafc}.diagnostics-modal-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:#94a3b814;border:1px solid rgba(148,163,184,.2);border-radius:.4rem;color:#94a3b8;font-size:.9rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.diagnostics-modal-close:hover{background:#94a3b82e;border-color:#94a3b873;color:#f8fafc}.diagnostics-modal-body{padding:1rem 1.25rem 1.25rem;overflow-y:auto;flex:1 1 0;display:flex;flex-direction:column;gap:.5rem}.diagnostics-modal-description{margin:0;font-size:.8rem;color:#94a3b8b3;line-height:1.4}.diagnostics-modal-warning{margin:0;padding:.45rem .75rem;background:#fb923c1a;border:1px solid rgba(251,146,60,.3);border-radius:.375rem;font-size:.8rem;color:#fb923ce6}.diagnostics-modal-actions{display:flex;gap:.5rem;flex-wrap:wrap}.diagnostics-modal-table-wrapper{overflow-x:auto;border:1px solid rgba(148,163,184,.15);border-radius:.5rem;flex-shrink:0}.diagnostics-modal-table-wrapper table{width:100%;min-width:700px}.app-brand,.app-nav-link,.primary-link{color:inherit;text-decoration:none}.app-brand{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.app-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;width:100%}.app-nav-left{display:flex;justify-content:flex-end;gap:.75rem;width:100%}.app-nav-center{display:flex;justify-content:center}.app-nav-right{display:flex;justify-content:flex-start;gap:.75rem;width:100%}.app-nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.55rem 1rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;font-weight:600;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease}.app-nav-current{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.55rem 1rem;border:1px solid rgba(34,197,94,.85);border-radius:999px;background:#22c55e2e;color:#dcfce7;font-weight:700;cursor:default;-webkit-user-select:none;user-select:none}.app-nav-current-group{display:inline-flex;align-items:center;gap:.5rem}.info-toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 1rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;color:inherit;font-weight:600;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.info-toggle-label{white-space:nowrap}.info-toggle-btn:hover{border-color:#22c55ed9;background:#22c55e1f}.info-toggle-btn.is-active{border-color:#22c55ed9;background:#22c55e2e;color:#dcfce7}.detours-dropdown-container{position:relative;display:inline-block}.detours-toggle-btn{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 1.25rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;color:inherit;font-weight:600;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.detours-toggle-btn:hover{border-color:#22c55ed9;background:#22c55e1f}.detours-toggle-btn.is-active{border-color:#22c55ed9;background:#22c55e2e;color:#dcfce7}.detours-toggle-btn .dropdown-caret{font-size:.65rem;transition:transform .2s ease}.detours-toggle-btn.is-active .dropdown-caret{transform:rotate(180deg)}.detours-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:#0f172af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.25);border-radius:.5rem;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #00000080;min-width:180px;display:flex;flex-direction:column;padding:.25rem 0;animation:detoursDropdownFadeIn .15s ease-out}@keyframes detoursDropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.detours-dropdown-item{padding:.6rem 1.25rem;color:#cbd5e1;font-size:.9rem;text-decoration:none;text-align:left;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.detours-dropdown-item:hover,.detours-dropdown-item:focus-visible{background-color:#22c55e1f;color:#f8fafc}.app-body{display:flex;grid-row:2;flex:1;min-height:0;overflow:hidden;position:relative}.learning-panel{width:320px;min-width:320px;background:#0f172ad9;border-left:1px solid rgba(148,163,184,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;z-index:10}.learning-panel h3,.learning-panel-overlay h3{font-size:1.25rem;font-weight:700;color:#f8fafc;margin-top:0;margin-bottom:.5rem}.learning-panel p,.learning-panel-overlay p{font-size:.95rem;line-height:1.6;color:#cbd5e1;margin:0 0 1.25rem}.learning-panel p:last-child,.learning-panel-overlay p:last-child{margin-bottom:0}.learning-panel a,.learning-panel-overlay a{color:#4ade80;text-decoration:none;font-weight:600;transition:color .2s ease}.learning-panel a:hover,.learning-panel-overlay a:hover{color:#86efac;text-decoration:underline}.learning-panel a:active,.learning-panel-overlay a:active{color:#22c55e}.learning-panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;background:#0f172af7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.learning-panel-overlay-content{flex:1 1 0;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.learning-panel-overlay-top-bar{flex:0 0 auto;display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid rgba(148,163,184,.2);background:#0f172ad9}.learning-panel-back-btn{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid rgba(148,163,184,.35);border-radius:999px;color:#cbd5e1;font-size:.95rem;font-weight:600;padding:.5rem 1.25rem;cursor:pointer;transition:border-color .2s ease,color .2s ease}.learning-panel-back-btn:hover{border-color:#94a3b8b3;color:#f8fafc}.primary-link{border:1px solid rgba(148,163,184,.35);border-radius:999px;padding:.55rem 1rem;transition:border-color .2s ease,background-color .2s ease}.app-nav-link:hover,.primary-link:hover{border-color:#22c55ecc;background:#22c55e1f}.app-nav-link.is-active,.app-brand:hover,.app-brand:focus-visible{border-color:#22c55ed9;background:#22c55e2e;color:#dcfce7}.app-nav-link.is-active{transform:translateY(-1px)}.app-nav-icon{width:1.25rem;height:1.25rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-main{width:100%;margin:0;padding:1rem 1.5rem 1.25rem;min-height:0;overflow:hidden;display:flex;flex-direction:column;flex:1}.home-page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.25rem;justify-items:center;text-align:center;flex:1;width:100%;padding:0 1rem .5rem;overflow:hidden;touch-action:none}.home-page--mobile{display:flex;flex-direction:column;overflow-y:auto;padding:1rem 1rem calc(2rem + var(--mobile-safe-area-bottom, 12px));height:100%}.app-main:has(.home-page--mobile){overflow-y:auto}.home3d-canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}.home3d-canvas-container--dragging{cursor:grabbing}.home3d-dissolve-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a;opacity:0;pointer-events:none;transition:opacity .9s ease;z-index:30}.home3d-dissolve-overlay--active{opacity:1}.home3d-scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;background:transparent}.home3d-gesture-gate{margin:0;border:none;display:flex;align-items:flex-end;justify-content:center;padding:0 0 96px;cursor:pointer;-webkit-tap-highlight-color:transparent}.home3d-gesture-gate-label{background:#0f172ae6;border:1px solid rgba(255,255,255,.25);color:#f8fafc;padding:14px 32px;border-radius:999px;font-family:system-ui,-apple-system,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;box-shadow:0 10px 30px #00000080}.home3d-path-menu{background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:190px;padding-left:24px;padding-right:24px;gap:16px;cursor:default;pointer-events:none}.home3d-path-menu-intro{text-align:center}.home3d-path-menu-eyebrow{display:block;font-family:system-ui,-apple-system,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8e6;margin-bottom:8px}.home3d-path-menu-title{margin:0;font-family:system-ui,-apple-system,sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#f8fafc;text-shadow:0 4px 12px rgba(0,0,0,.6);letter-spacing:-.01em}.home3d-path-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(240px,300px));gap:24px}.home3d-path-card{--path-color: #3b82f6;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;background:#0f172ae0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-top:4px solid var(--path-color);border-radius:18px;padding:24px 22px 26px;cursor:pointer;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #0000004d;transition:transform .2s ease-in-out,background .2s ease-in-out,border-color .2s ease-in-out}.home3d-path-card:hover,.home3d-path-card:focus-visible{transform:translateY(-4px);background:#1e293be6;border-color:var(--path-color)}.home3d-path-card:focus-visible{outline:2px solid var(--path-color);outline-offset:3px}.home3d-path-card-name{font-size:1.3rem;font-weight:700;color:var(--path-color);letter-spacing:-.005em}.home3d-path-card-desc{font-size:.98rem;line-height:1.5;color:#e2e8f0bf}@media(max-width:767px){.home3d-title-overlay{top:24px!important}.home3d-title-heading{font-size:clamp(1.8rem,6vw,2.5rem)!important}.home3d-path-menu{padding-top:110px;padding-left:16px;padding-right:16px;gap:12px}.home3d-path-menu-title{font-size:1.25rem}.home3d-path-menu-grid{grid-template-columns:repeat(2,minmax(130px,1fr));gap:12px;width:100%;max-width:440px}.home3d-path-card{padding:14px 14px 16px;gap:6px;border-radius:14px;border-top-width:3px}.home3d-path-card-name{font-size:1.05rem}.home3d-path-card-desc{font-size:.82rem;line-height:1.35}}@media(min-width:768px)and (max-width:1099px){.home3d-path-menu{padding-top:130px}.home3d-path-menu-grid{grid-template-columns:repeat(2,minmax(200px,1fr));width:100%;max-width:620px}}@media(orientation:landscape)and (max-height:540px){.home3d-title-overlay{top:10px!important}.home3d-title-heading{font-size:1.35rem!important}.home3d-path-menu{padding-top:48px;padding-left:20px;padding-right:20px;gap:8px}.home3d-path-menu-intro{margin-bottom:0}.home3d-path-menu-eyebrow{font-size:.65rem;margin-bottom:2px}.home3d-path-menu-title{font-size:1.05rem}.home3d-path-menu-grid{grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;width:100%;max-width:840px}.home3d-path-card{padding:8px 12px 10px;gap:4px;border-radius:12px;border-top-width:3px}.home3d-path-card-name{font-size:.95rem}.home3d-path-card-desc{font-size:.72rem;line-height:1.3}}.home-page h1,.frequency-graph-page h1{margin:0;font-size:clamp(2.5rem,5vw,4rem);line-height:1}.page-intro,.selected-note-summary{margin:0;color:#e2e8f0e0}.home-trail-map{width:min(100%,72rem);display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid rgba(148,163,184,.2);border-radius:32px;background:radial-gradient(circle at top,rgba(34,197,94,.12),transparent 45%),#0f172ab8;box-shadow:0 18px 60px #02061759}.home-sine-hero-card{width:80%;height:100%;min-height:400px;align-self:stretch;padding:0;border:0;background:transparent;box-shadow:none}.home-sine-hero-shell{position:relative;width:100%;height:100%;min-height:400px;overflow:hidden}.home-sine-hero-plot{position:absolute;top:0;right:0;bottom:0;left:0;min-width:0}.home-sine-hero-plot svg.function-plot{width:100%;background:transparent}.home-sine-hero-plot svg.function-plot rect{stroke:none}.home-sine-hero-plot svg.function-plot .canvas{stroke:none}.home-sine-hero-plot svg.function-plot .tip{display:none!important}.home-sine-hero-plot .x.axis,.home-sine-hero-plot .y.axis{display:none}.home-sine-hero-plot .x.axis path,.home-sine-hero-plot .x.axis line,.home-sine-hero-plot .y.axis path,.home-sine-hero-plot .y.axis line{stroke:#ffffff59}.home-sine-hero-plot .x.axis text,.home-sine-hero-plot .y.axis text,.home-sine-hero-plot .axis-label{fill:#e2e8f0c7}.home-sine-hero-plot .line.home-sine-wave-line{stroke:#22c55e;stroke-width:2.4}.home-sine-hero-plot .area.home-sine-wave-area{fill:#22c55e2e;stroke:none}.home-trail-connections{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}.home-trail-connection{fill:none;stroke:#e2e8f0b8;stroke-width:.45;stroke-linecap:round;stroke-dasharray:.6 1.1;opacity:.9}.home-page-stop{position:absolute;transform:translate(-50%,-50%);z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}.home-page-stop{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;justify-content:center;min-width:7rem;max-width:10rem;padding:.3rem .35rem;border:0;background:transparent;color:inherit;text-decoration:none;text-align:center;font-weight:600;transition:transform .2s ease;cursor:grab;touch-action:none}.home-page-stop:hover,.home-page-stop:focus-visible{transform:translate(-50%,calc(-50% - 1px))}.home-page-stop:active{cursor:grabbing}.home-page-stop-icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;color:#bbf7d0;flex:0 0 auto;filter:drop-shadow(0 0 12px rgba(34,197,94,.18))}.home-page-stop-icon svg{width:100%;height:100%}.home-page-stop-label{display:inline-block;padding:.15rem .45rem;border:1px solid transparent;border-radius:999px;background:#0f172ac7;transition:border-color .2s ease,background-color .2s ease}.home-page-stop:hover .home-page-stop-label,.home-page-stop:focus-visible .home-page-stop-label{border-color:#22c55ed9;background:#22c55e2e}.home-page-stop.group-sound-group .home-page-stop-icon{color:#bae6fd;filter:drop-shadow(0 0 12px rgba(14,165,233,.28))}.home-page-stop.group-sound-group:hover .home-page-stop-label,.home-page-stop.group-sound-group:focus-visible .home-page-stop-label{border-color:#0ea5e9d9;background:#0ea5e92e}.home-trail-connection.group-sound-group{stroke:#0ea5e9a6}.home-page-stop.group-theory-group .home-page-stop-icon{color:#bbf7d0;filter:drop-shadow(0 0 12px rgba(34,197,94,.28))}.home-page-stop.group-theory-group:hover .home-page-stop-label,.home-page-stop.group-theory-group:focus-visible .home-page-stop-label{border-color:#22c55ed9;background:#22c55e2e}.home-trail-connection.group-theory-group{stroke:#22c55ea6}.home-page-stop.group-creative-group .home-page-stop-icon{color:#e9d5ff;filter:drop-shadow(0 0 12px rgba(168,85,247,.28))}.home-page-stop.group-creative-group:hover .home-page-stop-label,.home-page-stop.group-creative-group:focus-visible .home-page-stop-label{border-color:#a855f7d9;background:#a855f72e}.home-trail-connection.group-creative-group{stroke:#a855f7a6}.home-page-stop.group-chords-group .home-page-stop-icon{color:#fde68a;filter:drop-shadow(0 0 12px rgba(245,158,11,.28))}.home-page-stop.group-chords-group:hover .home-page-stop-label,.home-page-stop.group-chords-group:focus-visible .home-page-stop-label{border-color:#f59e0bd9;background:#f59e0b2e}.home-trail-connection.group-chords-group{stroke:#f59e0ba6}.home-page-mobile-groups{display:flex;flex-direction:column;gap:.75rem;padding:1rem 0;width:100%}.home-page-mobile-group{border-radius:12px;background:#1e293b4d;border:1px solid rgba(148,163,184,.1);overflow:hidden;transition:border-color .2s ease,background-color .2s ease}.home-page-mobile-group.is-expanded{border-color:#94a3b833;background:#1e293b73}.home-page-mobile-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;background:transparent;border:0;color:#f1f5f9;font-size:1.1rem;font-weight:600;text-align:left;cursor:pointer;outline:none}.home-page-mobile-group-header.group-sound-group{border-left:4px solid #0ea5e9}.home-page-mobile-group-header.group-theory-group{border-left:4px solid #10b981}.home-page-mobile-group-header.group-creative-group{border-left:4px solid #8b5cf6}.home-page-mobile-group-header.group-chords-group{border-left:4px solid #f59e0b}.home-page-mobile-group-header:hover{background:#ffffff08}.home-page-mobile-group-caret{display:inline-flex;transition:transform .2s ease;color:#94a3b8}.home-page-mobile-group.is-expanded .home-page-mobile-group-caret{transform:rotate(180deg);color:#f1f5f9}.home-page-mobile-group-pages{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 1rem 1rem;border-top:1px solid rgba(148,163,184,.05);background:#0f172a33}.home-page-mobile-group-pages .home-page-stop{position:static;transform:none;flex-direction:row;justify-content:flex-start;min-width:0;max-width:none;width:100%;padding:.75rem 1rem;border-radius:8px;background:#0f172a66;border:1px solid rgba(148,163,184,.1)}.home-page-mobile-group-pages .home-page-stop.group-sound-group:hover,.home-page-mobile-group-pages .home-page-stop.group-sound-group:focus-visible{border-color:#0ea5e980;background:#0ea5e914}.home-page-mobile-group-pages .home-page-stop.group-theory-group:hover,.home-page-mobile-group-pages .home-page-stop.group-theory-group:focus-visible{border-color:#22c55e80;background:#22c55e14}.home-page-mobile-group-pages .home-page-stop.group-creative-group:hover,.home-page-mobile-group-pages .home-page-stop.group-creative-group:focus-visible{border-color:#a855f780;background:#a855f714}.home-page-mobile-group-pages .home-page-stop.group-chords-group:hover,.home-page-mobile-group-pages .home-page-stop.group-chords-group:focus-visible{border-color:#f59e0b80;background:#f59e0b14}.home-page-mobile-group-pages .home-page-stop-label{background:transparent;border-color:transparent;padding:0}.home-page-mobile-links{display:flex;flex-direction:column;gap:.25rem;padding:.5rem 0}.home-page-mobile-links .home-page-stop{position:static;transform:none;flex-direction:row;justify-content:flex-start;min-width:0;max-width:none;width:100%;padding:.6rem .75rem;border-radius:.5rem;background:#0f172a80;border:1px solid rgba(148,163,184,.15);transition:border-color .2s ease,background-color .2s ease}.home-page-mobile-links .home-page-stop:hover,.home-page-mobile-links .home-page-stop:focus-visible{transform:none;border-color:#22c55e80;background:#22c55e14}.home-page-mobile-links .home-page-stop-label{background:transparent;border-color:transparent;font-size:1rem}.home-page-link-groups{width:min(100%,72rem);display:grid;gap:1rem}.home-page-link-group{display:grid;gap:.85rem;padding:1rem;border:1px solid rgba(148,163,184,.16);border-radius:24px;background:#0f172a8c}.home-page-link-group h2{margin:0;font-size:1.05rem}.home-page-link-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.home-trail-map-stage{position:relative;min-height:min(72vh,44rem);width:100%}.home-trail-map-wave-graphic{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.home-trail-map-wave{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.home-trail-map-wave--left,.home-trail-map-wave--right{stroke:#bbf7d038}.home-trail-map-mountain-silhouette{stroke:#bbf7d04d;stroke-width:1.4;filter:drop-shadow(0 0 20px rgba(34,197,94,.18))}.home-trail-map-path-label,.home-trail-map-trailhead-label,.home-trail-map-connection-pill,.home-trail-stop{position:absolute;transform:translate(-50%,-50%)}.home-trail-map-path-label,.home-trail-map-trailhead-label{margin:0;padding:.45rem .8rem;border:1px solid rgba(148,163,184,.22);border-radius:999px;background:#0f172ac7;color:#e2e8f0eb;font-size:.9rem;font-weight:700;letter-spacing:.03em}.home-trail-map-path-label--sound{left:24%;top:10%}.home-trail-map-path-label--theory{left:76%;top:10%}.home-trail-map-trailhead-label{left:50%;top:98%}.home-trail-map-cross-links{display:grid;gap:.85rem;padding:1rem;border:1px solid rgba(148,163,184,.16);border-radius:24px;background:#0f172a8c}.home-trail-map-cross-links h2{margin:0;font-size:1.05rem}.home-trail-cross-link-list{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.home-trail-stop{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;min-width:min(100%,8rem);max-width:10rem;padding:.65rem 1rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172acc;color:inherit;text-decoration:none;font-weight:600;text-align:center;transition:border-color .2s ease,background-color .2s ease,transform .2s ease}.home-trail-stop:hover,.home-trail-stop:focus-visible{border-color:#22c55ed9;background:#22c55e2e;transform:translate(-50%,calc(-50% - 1px))}.home-trail-stop--shared{min-width:min(100%,11rem);background:#15803d33}.home-trail-map-connection-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;border:1px dashed rgba(134,239,172,.45);border-radius:999px;background:#0f172ad1;color:#e2e8f0e6;font-size:.85rem}.home-trail-cross-link{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:2.75rem;padding:.65rem 1rem;border:1px dashed rgba(134,239,172,.45);border-radius:999px;color:#e2e8f0e6}.home-trail-cross-link-arrow{color:#86efac;font-weight:700}.frequency-graph-page{display:grid;gap:1.5rem}.feature-page-layout{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1rem;height:100%;width:100%;min-height:0}.feature-page-layout-main{min-height:0;overflow:hidden}.feature-page-layout-content{min-height:0;height:100%}.feature-page-layout-dock{display:grid;gap:1rem;align-content:end;align-items:start}.feature-page-layout-dock[data-has-left=false][data-has-right=false]{grid-template-columns:1fr}.feature-page-layout-dock[data-has-left=true][data-has-right=false]{grid-template-columns:max-content 1fr}.feature-page-layout-dock[data-has-left=false][data-has-right=true]{grid-template-columns:1fr 25vw}.feature-page-layout-dock[data-has-left=true][data-has-right=true]{grid-template-columns:max-content 1fr 25vw}.feature-page-layout-dock-left,.feature-page-layout-dock-right{display:grid;gap:.75rem;align-content:end;min-width:0}.feature-page-layout-dock-right{justify-items:end}.feature-page-layout-dock[data-has-right=true] .feature-page-layout-dock-right{align-self:stretch;align-content:stretch}.feature-page-layout-keyboard{grid-column:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.75rem;overflow:visible;width:100%;min-width:0}.feature-page-layout-dock[data-has-left=true] .feature-page-layout-keyboard{grid-column:2}.keyboard-card{width:100%;max-width:100%;min-width:0}.feature-page-layout-keyboard-top-controls{display:flex;gap:.75rem;align-items:center;justify-content:center;position:relative;z-index:2}.feature-page-layout-sidebar-global-controls{display:flex;flex-direction:column;gap:.55rem;width:100%}.feature-page-layout-sidebar-global-controls .note-picker,.feature-page-layout-sidebar-global-controls .note-picker-trigger,.feature-page-layout-sidebar-global-controls .instrument-picker-trigger{width:100%!important;min-width:0!important;box-sizing:border-box}.feature-page-layout-sidebar-global-controls .note-picker-trigger{display:inline-flex;align-items:center;justify-content:center}.feature-page-layout[data-is-mobile=false] .keyboard-container-card[data-has-global-controls=true]{background:#0f172ab3;border:1px solid rgba(148,163,184,.2);box-shadow:0 18px 60px #02061759;border-radius:24px;padding:0;overflow:visible;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease}.feature-page-layout[data-is-mobile=false] .keyboard-container-card[data-has-global-controls=true] .keyboard-card{border:none;background:transparent;box-shadow:none;border-radius:0;padding:0 1rem 1rem}.keyboard-card-top-controls{display:flex;justify-content:flex-start;align-items:center;border-bottom:1px solid rgba(148,163,184,.2);width:100%}.keyboard-card-top-controls .note-picker-trigger{width:auto;min-width:0;border:none;background:#1e293b59;border-radius:0}.keyboard-card-top-controls .interval-picker-controls,.keyboard-card-top-controls .interval-popup-container{width:auto}.keyboard-card-top-controls .key-selector-controls,.keyboard-card-top-controls .key-selector-field{display:inline-flex;align-items:center;height:100%}.keyboard-card-top-controls .key-selector-controls .styled-select{height:100%}.keyboard-card-top-controls .key-selector-controls .styled-select-trigger{width:auto;min-width:0;border:none;background:#1e293b59;border-radius:0;height:100%;padding:.55rem 1rem}.keyboard-card-top-controls .key-selector-controls .styled-select-trigger:hover:not(:disabled),.keyboard-card-top-controls .key-selector-controls .styled-select-trigger:focus-visible:not(:disabled){background:#22c55e1f}.keyboard-card-top-controls .key-selector-controls .styled-select-value{color:#22c55e;font-weight:700;font-size:1.05rem}.keyboard-card-top-controls>*+* .key-selector-controls .styled-select-trigger{border-left:1px solid rgba(148,163,184,.2)}.keyboard-card-top-controls>*:first-child .note-picker-trigger{border-top-left-radius:23px}.keyboard-card-top-controls>*+* .note-picker-trigger{border-left:1px solid rgba(148,163,184,.2)}.keyboard-card-top-controls>*:last-child .note-picker-trigger{border-right:1px solid rgba(148,163,184,.2)}.feature-page-layout[data-is-mobile=false] .keyboard-container-card[data-has-global-controls=true] .piano-keyboard{height:clamp(130px,17vh,180px)}.feature-page-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-height:0}.feature-control-card{width:min(100%,44rem);min-width:min(100%,340px)}.feature-page-layout-dock-left .feature-control-card{width:auto;min-width:0}.adsr-envelope-page{display:grid;min-height:0;height:100%}.adsr-envelope-controls{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 2rem;align-content:start}.adsr-envelope-controls-mobile{display:flex;flex-direction:column;gap:.5rem}.mobile-adsr-waveform{height:4.5rem;flex:0 0 4.5rem;min-height:0}.mobile-adsr-waveform .real-time-visualizer-card{height:100%}.mobile-adsr-waveform .real-time-visualizer-card>div{min-height:0!important}.adsr-envelope-controls-mobile .mobile-setting-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.35rem;width:100%}.adsr-envelope-controls-mobile .mobile-setting-label{width:auto;flex:1 1 auto;min-width:0;font-size:.7rem;line-height:1.15}.adsr-envelope-controls-mobile .mobile-setting-control{flex:0 0 auto;max-width:none;width:5.5rem}.adsr-envelope-controls-mobile .mobile-select-input{width:100%!important;max-width:none!important;flex-grow:0!important;padding:.5rem 1.5rem .5rem .6rem!important;background-size:.8rem!important;background-position:right .4rem center!important;box-sizing:border-box}.adsr-envelope-controls-mobile .mobile-setting-control input[type=checkbox]{margin:0}.mobile-page-layout.is-landscape .adsr-envelope-controls-mobile{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .75rem}.mobile-page-layout.is-landscape .adsr-envelope-controls-mobile .mobile-setting-control{width:4.25rem}.adsr-field-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.adsr-field-row label{font-weight:500;color:#c0c0d0;font-size:.9rem}.adsr-input-wrapper{display:flex;align-items:center;gap:.5rem}.adsr-field-row input[type=number]{background:#0f172ae6;border:1px solid rgba(148,163,184,.35);color:#f8fafc;padding:.45rem .75rem;border-radius:8px;font-size:.9rem;outline:none;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;width:6rem}.adsr-field-row input[type=number]:hover{border-color:#94a3b899;background:#1e293bb3}.adsr-field-row input[type=number]:focus{border-color:#22c55ecc;box-shadow:0 0 0 2px #22c55e2e}.adsr-field-row input[type=number]:disabled{opacity:.5;cursor:not-allowed}.adsr-field-row input[type=number]::-webkit-inner-spin-button,.adsr-field-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.adsr-field-row input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.adsr-unit{font-size:.85rem;color:#ffffff80}.adsr-time-scale-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;margin-top:.5rem}.adsr-time-scale-container label{font-size:.9rem;font-weight:500;color:#c0c0d0}.adsr-time-scale-container input[type=range]{width:85%;max-width:24rem;accent-color:#00e5ff;cursor:pointer}.adsr-envelope-graph-shell{display:grid;min-height:0;height:100%;align-items:stretch}.adsr-envelope-graph-shell .graph-card{width:min(100%,56rem);height:100%;justify-self:center;align-self:stretch;grid-template-rows:minmax(64px,1fr) auto}.adsr-envelope-graph-shell svg{width:100%;height:100%;min-height:0}.frequency-graph-copy{display:grid;gap:.75rem}.eyebrow{margin:0;color:#22c55e;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.graph-card,.keyboard-card{display:grid;gap:1rem;min-height:0;padding:1rem;border:1px solid rgba(148,163,184,.2);border-radius:24px;background:#0f172ab3;box-shadow:0 18px 60px #02061759;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease}.keyboard-card{overflow-x:hidden}.feature-control-card{overflow:visible}.graph-card.active-glow{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e4d,0 24px 68px #22c55e26,0 18px 60px #02061759;transform:scale(1.015)}.just-intonation-content{padding:1rem}.graph-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.graph-card-header h2{margin:0;font-size:1.3rem}.midi-import-page{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start;flex:1;min-height:0;height:100%}.midi-import-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:1rem;flex:1;min-height:0;height:100%}.midi-track-list{display:flex!important;flex-direction:column;align-self:stretch;height:100%;min-height:0}.midi-track-list-items{display:grid;gap:.75rem;margin:0;padding:0;list-style:none;overflow-y:auto;padding-right:.5rem;flex:1;min-height:0}.midi-track-list-item{display:flex;align-items:center;gap:1rem;padding:.8rem .9rem;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:#0f172a73}.midi-track-list-controls{display:flex;gap:.5rem;flex-shrink:0}.midi-track-control-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid rgba(148,163,184,.35);border-radius:8px;background:#0f172ab3;color:#e2e8f099;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s ease}.midi-track-control-btn:hover{border-color:#94a3b899;background:#0f172ae6}.solo-btn.is-active{border-color:#22c55ecc;background:#22c55e2e;color:#4ade80;box-shadow:0 0 12px #22c55e26}.mute-btn.is-active{border-color:#f97316cc;background:#f9731626;color:#fb923c;box-shadow:0 0 12px #f9731626}.look-btn{font-size:.95rem;line-height:1}.look-btn.is-active{border-color:#38bdf8cc;background:#38bdf833;color:#38bdf8;box-shadow:0 0 12px #38bdf833}.midi-timeline-single-track-bar{display:flex;align-items:center;padding:.25rem .5rem;background:#0f172af2;border-bottom:1px solid rgba(148,163,184,.15);height:36px;flex-shrink:0;box-sizing:border-box}.midi-back-to-all-tracks-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border:1px solid rgba(56,189,248,.5);border-radius:6px;background:#0ea5e91f;color:#38bdf8;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.midi-back-to-all-tracks-btn:hover{border-color:#38bdf8cc;background:#0ea5e940;color:#7dd3fc;box-shadow:0 0 10px #38bdf833}.midi-track-list-info{display:flex;flex-grow:1;align-items:center;justify-content:space-between;gap:1rem;min-width:0}.midi-track-list-name,.midi-track-list-instrument{color:#e2e8f0eb}.midi-track-list-name{font-weight:600}.midi-track-list-instrument{text-align:right}.graph-note-pill,.keyboard-subtitle{color:#dcfce7;background:#22c55e24;border:1px solid rgba(34,197,94,.4);border-radius:999px;padding:.35rem .75rem;font-size:.9rem}.frequency-graph-plot-shell{width:100%;min-height:0;overflow:hidden;flex:1;display:flex;flex-direction:column}.frequency-graph-plot{min-width:0;flex:1;min-height:0}.scroll-affordance{--scroll-affordance-fade: 1.75rem}.scroll-affordance,.borrowed-chords-grid{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent}.scroll-affordance::-webkit-scrollbar,.borrowed-chords-grid::-webkit-scrollbar{width:8px;height:8px}.scroll-affordance::-webkit-scrollbar-track,.borrowed-chords-grid::-webkit-scrollbar-track{background:transparent}.scroll-affordance::-webkit-scrollbar-thumb,.borrowed-chords-grid::-webkit-scrollbar-thumb{background-color:#94a3b880;border-radius:4px}.scroll-affordance::-webkit-scrollbar-thumb:hover,.borrowed-chords-grid::-webkit-scrollbar-thumb:hover{background-color:#94a3b8b3}.scroll-affordance[data-overflow-top][data-overflow-bottom]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-affordance-fade),#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-affordance-fade),#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%)}.scroll-affordance[data-overflow-top]:not([data-overflow-bottom]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-affordance-fade));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-affordance-fade))}.scroll-affordance[data-overflow-bottom]:not([data-overflow-top]){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%)}.scroll-affordance-x{--scroll-affordance-fade: 2rem}.scroll-affordance-x[data-overflow-left][data-overflow-right]{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--scroll-affordance-fade),#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--scroll-affordance-fade),#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%)}.scroll-affordance-x[data-overflow-left]:not([data-overflow-right]){-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--scroll-affordance-fade));mask-image:linear-gradient(to right,transparent 0,#000 var(--scroll-affordance-fade))}.scroll-affordance-x[data-overflow-right]:not([data-overflow-left]){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - var(--scroll-affordance-fade)),transparent 100%)}.key-explanation-modal-dialog{max-height:90vh;max-height:90dvh}.key-explanation-body{overscroll-behavior:contain}@media(max-height:540px){.key-explanation-intro{display:none}}.key-explanation-tabs{display:flex;gap:.25rem;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.15);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.key-explanation-tabs::-webkit-scrollbar{display:none}.key-explanation-tab{display:flex;align-items:center;gap:.4rem;flex-shrink:0;padding:.55rem .9rem;margin-bottom:-1px;background:transparent;border:1px solid rgba(255,255,255,.22);border-bottom:3px solid transparent;border-radius:6px 6px 0 0;color:#94a3b8;font-size:.8rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease}.key-explanation-tab:hover{color:#e2e8f0;background:#94a3b814}.key-explanation-tab.is-active{color:#38bdf8;font-weight:600;background:#38bdf81a;border-color:#38bdf899;border-bottom-color:#38bdf8}.key-explanation-tab-score{font-size:.7rem;padding:.05rem .4rem;border-radius:10px;background:#ffffff1a;color:#cbd5e1}.key-explanation-tab.is-active .key-explanation-tab-score{background:#38bdf84d;color:#fff}.frequency-display{margin-bottom:1rem;font-size:1.25rem;text-align:center}.frequency-display-label,.frequency-display-freq-label{font-weight:500;color:#94a3b8;margin-right:.5rem}.frequency-display-value{font-weight:700;color:#fff}.frequency-display-separator{color:#475569;margin:0 .75rem}.frequency-display-freq-value{font-weight:700;color:#22c55e}.frequency-graph-card{border:none;height:100%;display:flex;flex-direction:column;min-height:0;padding:0;gap:0}.harmonics-graph-card{height:100%;display:flex;flex-direction:column;min-height:0}.harmonics-graph-card .frequency-graph-plot-shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.harmonics-graph-rows{display:flex;flex-direction:column;gap:.4rem;padding-right:.25rem}.harmonics-graph-row{display:flex;align-items:center;gap:8px;flex:0 0 auto}.harmonics-graph-row-label{width:112px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end}.harmonics-graph-row-label-text{font-size:.7rem;font-weight:600;color:#94a3b8;white-space:nowrap}.harmonics-graph-row-play-button{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;background:#94a3b81a;border:1px solid rgba(148,163,184,.3);border-radius:999px;padding:.2rem .55rem;font:inherit;font-size:.7rem;font-weight:600;color:#94a3b8;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.harmonics-graph-row-play-button:hover,.harmonics-graph-row-play-button:focus-visible{background:#4ade8026;border-color:#4ade8099;color:#e2e8f0}.harmonics-graph-row-play-icon{font-size:.55rem;line-height:1;flex-shrink:0}.frequency-graph-plot svg.function-plot{width:100%;background:transparent}.frequency-graph-plot svg.function-plot rect{stroke:none}.frequency-graph-plot svg.function-plot .canvas{stroke:none}.frequency-graph-plot .x.axis path,.frequency-graph-plot .x.axis line,.frequency-graph-plot .y.axis path,.frequency-graph-plot .y.axis line{stroke:#ffffffb3}.frequency-graph-plot .x.axis text,.frequency-graph-plot .y.axis text,.frequency-graph-plot .axis-label{display:none}.frequency-graph-plot .tip{display:none!important;pointer-events:none}.frequency-graph-plot .line.frequency-line{stroke:#22c55e;stroke-width:2}.harmonics-legend-swatch{width:.8rem;height:.8rem;border-radius:999px}.harmonics-cycle-graph-dock{justify-self:stretch;align-self:stretch;width:100%;height:100%}.harmonics-cycle-graph-dock .graph-card{width:100%;height:100%}.harmonics-slider-card{width:max-content;max-width:none;height:100%;display:flex;flex-direction:column;padding-bottom:1.5rem}.harmonics-page-panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%;min-height:0}.harmonics-slider-card{width:100%;max-width:none}.harmonics-slider-controls{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.5rem;flex:1;align-items:stretch;overflow-x:auto;padding-bottom:.5rem}.harmonics-control{display:grid;justify-items:center;gap:.6rem;inline-size:3.5rem;height:100%;grid-template-rows:auto 1fr auto auto}.harmonics-control--compact{grid-template-rows:1fr auto}.harmonics-control-label,.harmonics-control-value{display:inline-flex;align-items:center;gap:.45rem;color:#e2e8f0e0;font-size:.85rem}.harmonics-amplitude-slider-shell{position:relative;display:grid;place-items:center;inline-size:2rem;min-block-size:8rem;block-size:100%;container-type:size;overflow:visible}.harmonics-amplitude-slider-shell:focus-within{outline:2px solid #4ade80;outline-offset:.25rem;border-radius:999px}.harmonics-amplitude-slider-track{position:absolute;inset-block:.4rem;inset-inline-start:50%;z-index:0;transform:translate(-50%);inline-size:.55rem;block-size:calc(100% - .8rem);border-radius:999px;background:#94a3b838;overflow:hidden;pointer-events:none}.harmonics-amplitude-slider-fill{position:absolute;inset-inline:0;z-index:1;border-radius:inherit}.harmonics-amplitude-slider-thumb{position:absolute;inset-inline-start:50%;z-index:2;inline-size:1rem;block-size:1rem;border:2px solid rgba(15,23,42,.92);border-radius:999px;box-shadow:0 0 0 2px #f8fafc40;pointer-events:none;transform:translate(-50%,-50%)}.harmonics-amplitude-slider-shell--bottom-up .harmonics-amplitude-slider-fill{inset-block-end:0}.harmonics-amplitude-slider-shell--top-down .harmonics-amplitude-slider-fill{inset-block-start:0}.harmonics-amplitude-slider-thumb--labeled{inline-size:1.15rem;block-size:1.15rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.55rem;font-weight:700;line-height:1}.harmonics-amplitude-slider{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:100cqh;block-size:2rem;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:inherit;opacity:0;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center}.harmonics-amplitude-slider--vertical{writing-mode:initial;-webkit-appearance:none}.harmonics-amplitude-slider--bottom-to-top,.harmonics-amplitude-slider--top-to-bottom{direction:ltr}.harmonics-amplitude-slider:focus{outline:none}.harmonics-amplitude-slider::-webkit-slider-runnable-track{block-size:2rem;background:transparent}.harmonics-amplitude-slider::-webkit-slider-thumb{-webkit-appearance:none;inline-size:2rem;block-size:2rem;border:0;background:transparent;box-shadow:none}.harmonics-amplitude-slider::-moz-range-track{block-size:2rem;border:0;background:transparent}.harmonics-amplitude-slider::-moz-range-progress{background:transparent}.harmonics-amplitude-slider::-moz-range-thumb{inline-size:2rem;block-size:2rem;border:0;background:transparent;box-shadow:none}.harmonics-slider-mode-toggle{display:inline-flex;align-items:center;justify-content:center;inline-size:1.85rem;block-size:1.85rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ae6;color:inherit;cursor:pointer;font-size:.95rem;line-height:1;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.harmonics-slider-mode-toggle:hover,.harmonics-slider-mode-toggle:focus-visible,.harmonics-slider-mode-toggle.is-active{border-color:#22c55ecc;background:#22c55e1f;color:#dcfce7}.harmonics-control-value{min-block-size:1.2rem;font-variant-numeric:tabular-nums}.equalizer-page{display:grid;min-height:0;height:100%}.equalizer-page .feature-page-panel-grid{height:100%}.distortion-page,.noise-page,.harmonic-decay-page,.pitch-envelope-page,.unison-page,.inharmonicity-page{display:grid;min-height:0;height:100%}.distortion-page .feature-page-panel-grid,.noise-page .feature-page-panel-grid,.harmonic-decay-page .feature-page-panel-grid,.pitch-envelope-page .feature-page-panel-grid,.unison-page .feature-page-panel-grid,.inharmonicity-page .feature-page-panel-grid{height:100%}.equalizer-slider-card,.equalizer-page-visualization{width:min(100%,56rem);justify-self:center;height:100%;display:flex;flex-direction:column;min-height:0}.equalizer-slider-card{height:100%;display:flex;flex-direction:column}.noise-eq-card .equalizer-slider-card{width:100%;height:auto;background:transparent;border:none;box-shadow:none;padding:0;margin:0}@media(min-width:1367px){.noise-eq-card .equalizer-band-controls{flex-wrap:nowrap;gap:.4rem}.noise-eq-card .equalizer-band-control{min-inline-size:0;flex:1 1 0;gap:.35rem}.noise-eq-card .equalizer-band-slider-shell{inline-size:1.5rem;min-block-size:8rem}.noise-eq-card .equalizer-band-label,.noise-eq-card .equalizer-band-range,.noise-eq-card .equalizer-band-multiplier{font-size:.62rem;line-height:1.2}}.mobile-eq-page .equalizer-band-controls{gap:.25rem;flex-wrap:nowrap;justify-content:space-around;width:100%}.mobile-eq-page .equalizer-band-control{min-inline-size:0;flex:1 1 0;gap:.25rem}.mobile-eq-page .equalizer-band-label,.mobile-eq-page .equalizer-band-multiplier{font-size:.62rem;line-height:1.15}.equalizer-band-controls-scroll{overflow-y:auto}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-slider-card{height:100%;min-height:0;padding:.25rem .4rem}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-controls-scroll{overflow-y:hidden}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-controls{height:100%;min-height:0;gap:.2rem}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-control{height:100%;min-height:0;gap:.15rem}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-slider-shell{min-block-size:0;flex:1 1 0}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-slider-track{inset:.4rem auto .4rem 50%}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-slider-thumb{inline-size:.75rem;block-size:.75rem}.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-label,.mobile-page-layout.is-landscape .mobile-eq-page .equalizer-band-multiplier{font-size:.52rem;line-height:1.1}@media(min-width:768px){.equalizer-page .equalizer-band-controls,.equalizer-page .equalizer-band-chart{flex-wrap:nowrap;gap:.4rem}.equalizer-page .equalizer-band-control,.equalizer-page .equalizer-band-chart-column{min-inline-size:0;flex:1 1 0;gap:.35rem}.equalizer-page .equalizer-band-label,.equalizer-page .equalizer-band-multiplier,.equalizer-page .equalizer-band-chart-value,.equalizer-page .equalizer-band-chart-label{font-size:.72rem;line-height:1.15}.equalizer-page .equalizer-band-chart-legend{gap:1rem;font-size:.78rem;margin-bottom:.5rem}}.equalizer-band-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;flex:1}.equalizer-band-control{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-inline-size:5rem;height:100%}.equalizer-band-label,.equalizer-band-multiplier,.equalizer-band-chart-value,.equalizer-band-chart-label{font-size:.85rem;text-align:center}.equalizer-band-label{display:flex;align-items:flex-end;justify-content:center;min-block-size:2lh}.equalizer-band-multiplier,.equalizer-band-chart-value{font-variant-numeric:tabular-nums}.equalizer-band-slider-shell{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;flex:1;min-block-size:11rem;container-type:size}.equalizer-band-slider-track{position:absolute;inset:.75rem auto .75rem 50%;inline-size:.35rem;transform:translate(-50%);border-radius:999px;background:#94a3b82e;overflow:hidden}.equalizer-band-slider-fill{position:absolute;inset-inline:0;inset-block-end:0;background:linear-gradient(180deg,#22c55ee6,#3b82f6cc)}.equalizer-band-slider-thumb{position:absolute;inset-inline-start:50%;inline-size:1rem;block-size:1rem;border-radius:999px;background:#f8fafc;box-shadow:0 0 0 .15rem #3b82f633;transform:translate(-50%,-50%)}.equalizer-band-slider-unity-line{position:absolute;inset-block-start:50%;inset-inline:0;block-size:1px;background:#94a3b866;transform:translateY(-50%);pointer-events:none}.mobile-eq-page .equalizer-band-controls,.mobile-effect-page .noise-eq-card .equalizer-band-controls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}.mobile-eq-page .equalizer-band-control,.mobile-effect-page .noise-eq-card .equalizer-band-control{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;align-items:stretch;justify-items:center}.mobile-eq-page .equalizer-band-label,.mobile-effect-page .noise-eq-card .equalizer-band-label{min-block-size:0}@media(min-width:768px){.equalizer-page .equalizer-band-controls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}.equalizer-page .equalizer-band-control{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;align-items:stretch;justify-items:center}.equalizer-page .equalizer-band-label{min-block-size:0}}@media(min-width:1367px){.noise-eq-card .equalizer-band-controls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}.noise-eq-card .equalizer-band-control{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;align-items:stretch;justify-items:center}.noise-eq-card .equalizer-band-label{min-block-size:0}}.equalizer-band-slider{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:100cqh;block-size:2rem;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;opacity:0;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center}.equalizer-band-slider--vertical{writing-mode:initial;-webkit-appearance:none}.equalizer-band-slider:focus{outline:none}.equalizer-band-slider::-webkit-slider-runnable-track{block-size:2rem;background:transparent}.equalizer-band-slider::-webkit-slider-thumb{-webkit-appearance:none;inline-size:2rem;block-size:2rem;border:0;background:transparent;box-shadow:none}.equalizer-band-slider::-moz-range-track{block-size:2rem;border:0;background:transparent}.equalizer-band-slider::-moz-range-progress{background:transparent}.equalizer-band-slider::-moz-range-thumb{inline-size:2rem;block-size:2rem;border:0;background:transparent;box-shadow:none}.equalizer-band-chart{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1rem;flex:1;min-height:0}.equalizer-band-chart-legend{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;font-size:.875rem;color:var(--color-text-secondary, #64748b);width:100%}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color-box{width:.75rem;height:.75rem;border-radius:2px}.legend-color-box.input-color{background:linear-gradient(180deg,#6366f1,#4f46e5)}.legend-color-box.output-color{background:linear-gradient(180deg,#10b981,#059669)}.equalizer-band-chart-column{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:.5rem;min-inline-size:5rem;min-height:0}.equalizer-band-chart-labels{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0;width:100%}.equalizer-band-chart-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.equalizer-band-chart-bars-container{display:flex;align-items:end;gap:.35rem;flex:1;min-height:0;border-bottom:2px solid var(--color-border-light, #e2e8f0);padding-bottom:2px}.equalizer-band-chart-bar.input-bar{width:.75rem;min-block-size:0px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#6366f1,#4f46e5)}.equalizer-band-chart-bar.output-bar{width:.75rem;min-block-size:0px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#10b981,#059669)}.distortion-transfer-curve-card,.harmonic-decay-chart-card,.pitch-envelope-chart-card,.unison-chart-card,.inharmonicity-chart-card{display:grid;grid-template-rows:auto minmax(64px,1fr) auto;min-height:0;height:100%}.distortion-transfer-curve-card svg,.harmonic-decay-chart-card svg,.pitch-envelope-chart-card svg,.unison-chart-card svg,.inharmonicity-chart-card svg{width:100%;height:100%;min-height:0}.harmonic-decay-page .harmonic-decay-page-controls{gap:.6rem;align-content:start;min-height:0;overflow:hidden auto}.harmonic-decay-page-controls>h2{margin-block:.25rem}.harmonic-decay-page-controls>.visualizer-field-row{margin-bottom:.4rem}.harmonic-decay-explanation{margin-top:.5rem;margin-bottom:0;font-size:.875rem;color:#94a3b8cc}.oscillator-filter-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:0}.oscillator-filter-page .feature-control-card{width:min(100%,80rem)}.oscillator-parameter-toggle{display:inline-flex;background:#0f172ab3;border:1px solid rgba(148,163,184,.25);border-radius:8px;padding:3px;gap:2px}.oscillator-toggle-btn{padding:.4rem .9rem;border-radius:6px;border:1px solid transparent;background:transparent;color:#94a3b8;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease}.oscillator-toggle-btn.is-active{background:#22c55e33;color:#4ade80;border-color:#22c55e66;font-weight:600}.oscillator-toggle-btn:hover:not(.is-active){color:#f8fafc;background:#ffffff0f}.oscillator-remove-btn{padding:.45rem 1.1rem!important;font-size:.85rem!important;border:1px solid rgba(239,68,68,.4)!important;border-radius:8px!important;background:#ef44441f!important;color:#f87171!important;font-weight:600!important;cursor:pointer;transition:all .2s ease;height:auto!important}.oscillator-remove-btn:hover{background:#ef444440!important;border-color:#ef4444!important;color:#ef4444!important}.oscillator-remove-btn:disabled{opacity:.4;cursor:not-allowed}.oscillator-remove-btn:disabled:hover{background:#ef44441f!important;border-color:#ef444466!important;color:#f87171!important}.oscillator-keep-one-hint{font-size:.8rem;color:#94a3b8e6;margin:0}.oscillator-filter-control-rows{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.oscillator-filter-control-row{display:flex;flex-wrap:nowrap;gap:1.5rem;align-items:flex-end;padding:1.25rem;border:1px solid rgba(148,163,184,.16);border-radius:16px;background:#0f172a66;transition:border-color .2s ease,background-color .2s ease}.oscillator-filter-control-row:hover{border-color:#22c55e66;background:#0f172a99}.oscillator-filter-parameter-group{display:flex;flex-direction:column;gap:.5rem}.oscillator-filter-parameter-label{font-size:.85rem;font-weight:500;color:#c0c0d0}.oscillator-filter-parameter-radios{display:flex;gap:1rem;align-items:center;height:2.25rem}.oscillator-filter-radio-label{display:flex;align-items:center;gap:.35rem;font-size:.9rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}.oscillator-filter-radio-label input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;border:1px solid rgba(255,255,255,.3);border-radius:50%;outline:none;background:#0c0c12cc;display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.oscillator-filter-radio-label input[type=radio]:checked{border-color:#22c55e}.oscillator-filter-radio-label input[type=radio]:checked:after{content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;background:#22c55e}.oscillator-filter-radio-label input[type=radio]:focus-visible{box-shadow:0 0 0 2px #22c55e33}.oscillator-filter-control-row label{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;font-weight:500;color:#c0c0d0}.oscillator-filter-control-row select,.oscillator-filter-control-row input[type=number]{background:#0c0c12cc;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.45rem .75rem;border-radius:8px;font-size:.9rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.oscillator-filter-control-row select:focus,.oscillator-filter-control-row input[type=number]:focus{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e33}.oscillator-filter-control-row button{padding:.45rem 1rem;border:1px solid rgba(239,68,68,.4);border-radius:8px;background:#ef44441a;color:#ef4444;font-weight:600;font-size:.9rem;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;height:2.25rem}.oscillator-filter-control-row button:hover{background:#ef444440;border-color:#ef4444}.oscillator-filter-control-row .styled-select-trigger,.oscillator-card-preset-group .styled-select-trigger{border:1px solid rgba(148,163,184,.35);background:#0f172ae6;color:#e2e8f0;height:auto}.oscillator-filter-control-row .styled-select-trigger:hover,.oscillator-card-preset-group .styled-select-trigger:hover{border-color:#22c55ecc;background:#22c55e1f}.dial-container{display:flex;flex-direction:column;align-items:center;gap:.35rem}.dial-label{font-size:.75rem;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.dial-control{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .1s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none}.dial-control:hover{transform:scale(1.05)}.dial-control:focus-visible{outline:2px solid #4ade80;outline-offset:2px}.dial-control svg circle{transition:fill .2s ease,stroke .2s ease}.dial-control:hover svg circle{fill:#0f172acc;stroke:#4ade8066}.oscillator-control-field{display:flex;align-items:flex-end;gap:1rem}.bypass-toggle-row{display:flex;align-items:center;gap:.75rem}.bypass-toggle-caption{font-size:.8rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.bypass-toggle{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.bypass-toggle-switch{position:relative;display:inline-block;width:2.25rem;height:1.25rem;border-radius:999px;background:#94a3b84d;transition:background .15s ease;flex:none}.bypass-toggle-knob{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:#e2e8f0;transition:transform .15s ease}.bypass-toggle.is-enabled .bypass-toggle-switch{background:#22c55ed9}.bypass-toggle.is-enabled .bypass-toggle-knob{transform:translate(1rem)}.bypass-toggle.is-enabled{border-color:#22c55ed9;color:#4ade80}.bypass-toggle.is-bypassed{border-color:#94a3b859;color:#94a3b8}.bypass-toggle-state{font-weight:700}.instrument-picker-current-badge{display:inline-flex;align-items:center;justify-content:center;padding:.15rem .45rem;margin-left:auto;font-size:.7rem;font-weight:700;border-radius:4px;background:#3b82f62e;border:1px solid rgba(59,130,246,.5);color:#93c5fd;letter-spacing:.05em}.instrument-picker-option.is-active{border-color:#3b82f6;background:#3b82f61f}.instrument-picker-legend{display:flex;flex-direction:column;gap:.25rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(148,163,184,.2);font-size:.75rem;color:#94a3b8e6}.instrument-picker-legend strong{color:#cbd5e1}.harmonics-preset-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%}.harmonics-preset-button{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.85rem .6rem;background:#0f172abf;border:1px solid rgba(148,163,184,.2);border-radius:.5rem;color:#e2e8f0cc;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center}.harmonics-preset-button:hover,.harmonics-preset-button:focus-visible{background:#1e293bcc;border-color:#3b82f699;color:#fff;transform:translateY(-2px)}.harmonics-preset-button.is-active{background:linear-gradient(135deg,#3b82f62e,#6366f12e);border-color:#3b82f6;color:#fff;box-shadow:0 0 14px #3b82f640}.harmonics-preset-icon-container{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.375rem;background:#0f172a66;color:#e2e8f0e6;transition:all .25s ease}.harmonics-preset-button.is-active .harmonics-preset-icon-container{background:#3b82f62e;color:#3b82f6}.harmonics-preset-icon{width:1.5rem;height:1.5rem}.harmonics-preset-button-label{font-size:.75rem;font-weight:500;letter-spacing:.025em}.harmonics-reset-button{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;padding:.6rem;background:#0f172a8c;border:1px dashed rgba(148,163,184,.35);border-radius:.5rem;color:#e2e8f0cc;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.harmonics-reset-button:hover,.harmonics-reset-button:focus-visible{background:#1e293bcc;border-color:#3b82f699;color:#fff}.harmonics-reset-button .harmonics-preset-button-label{font-size:.75rem;font-weight:500;letter-spacing:.025em}.scales-page{display:grid;min-height:0;height:100%}.scales-page .graph-card{height:100%;grid-template-rows:auto minmax(0,1fr)}.scales-page .scale-table-shell{min-height:0}.interval-picker-controls{display:grid;gap:.75rem;justify-items:start}.scale-quality-list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.75rem}.scale-quality-list-groups{display:flex;flex-direction:column;gap:.5rem}.styled-select{display:inline-flex}.styled-select-trigger{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(148,163,184,.35);background:#0f172ae6;color:#e2e8f0;border-radius:999px;padding:.55rem 1rem;font:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.styled-select-trigger:hover:not(:disabled),.styled-select-trigger:focus-visible:not(:disabled){border-color:#22c55ecc;background:#22c55e1f}.styled-select-trigger:disabled{opacity:.5;cursor:not-allowed}.styled-select-value{font-weight:600}.styled-select-caret{font-size:.6rem;opacity:.7}.progression-chord .styled-select{width:100%}.progression-chord .styled-select-trigger{width:100%;padding:.25rem .4rem;border-radius:6px;font-size:.75rem;justify-content:space-between;background:#0f172acc;border:1px solid rgba(148,163,184,.3);color:#f8fafc;margin-top:.25rem}.progression-chord .styled-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:500}.interactive-chord-quality-pill .styled-select-trigger{background:transparent;border:none;color:inherit;font:inherit;font-weight:700;padding:0;border-radius:0;gap:.2rem}.interactive-chord-quality-pill .styled-select-trigger:hover:not(:disabled),.interactive-chord-quality-pill .styled-select-trigger:focus-visible:not(:disabled){background:transparent;border-color:transparent;color:#4ade80}.scale-quality-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#02061799;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.scale-quality-picker-dialog{background:#0f172af7;border:1px solid rgba(148,163,184,.2);border-radius:1rem;padding:1.25rem;box-shadow:0 24px 60px #00000080;display:flex;flex-direction:column;gap:.75rem;max-width:min(90vw,28rem);max-height:85vh;overflow-y:auto}.scale-quality-picker-title{margin:0;font-size:.75rem;font-weight:700;color:#94a3b8b3;text-transform:uppercase;letter-spacing:.08em}.scale-quality-button,.scale-table-quality-button,.note-picker-trigger,.instrument-picker-category-button,.instrument-picker-option,.instrument-picker-close,.instrument-picker-secondary-action,.interval-select,.note-picker-radial-button{border:1px solid rgba(148,163,184,.35);background:#0f172ae6;color:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.scale-quality-button,.scale-table-quality-button,.note-picker-trigger,.instrument-picker-category-button,.instrument-picker-option,.instrument-picker-close,.instrument-picker-secondary-action,.interval-select{border-radius:999px;padding:.55rem 1rem}.scale-quality-button:hover,.scale-quality-button:focus-visible,.scale-table-quality-button:hover,.scale-table-quality-button:focus-visible,.note-picker-trigger:hover,.note-picker-trigger:focus-visible,.instrument-picker-category-button:hover,.instrument-picker-category-button:focus-visible,.instrument-picker-option:hover,.instrument-picker-option:focus-visible,.instrument-picker-close:hover,.instrument-picker-close:focus-visible,.instrument-picker-secondary-action:hover,.instrument-picker-secondary-action:focus-visible,.interval-select:hover,.interval-select:focus-visible,.note-picker-radial-button:hover,.note-picker-radial-button:focus-visible{border-color:#22c55ecc;background:#22c55e1f}.interval-select-label{display:grid;gap:.35rem;justify-items:center;color:#e2e8f0e0;font-size:.9rem}.chord-quality-picker,.chord-voicing-picker-label-wrapper{display:grid;gap:.35rem;justify-items:start;color:#e2e8f0e0;font-size:.9rem;width:100%}.chord-quality-picker select,.chord-voicing-picker-label-wrapper select{width:100%;min-width:12rem;padding:.55rem 2.5rem .55rem 1rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ae6;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;outline:none;transition:border-color .2s ease,background-color .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f8fafc'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem}.chord-quality-picker select:hover,.chord-quality-picker select:focus-visible,.chord-voicing-picker-label-wrapper select:hover,.chord-voicing-picker-label-wrapper select:focus-visible{border-color:#22c55ecc;background:#22c55e1f}.chord-voicings-mobile-top-controls .chord-quality-picker select,.chord-voicings-mobile-top-controls .chord-voicing-picker-label-wrapper select{min-width:0;padding:.5rem 1.75rem .5rem .6rem;font-size:.85rem;background-position:right .6rem center}.chord-quality-picker select option,.chord-voicing-picker-label-wrapper select option{background:#0f172a;color:#f8fafc}.chords-keyboard-shell{width:100%;max-width:100%;min-width:0;overflow:visible}.chords-keyboard-shell .keyboard-card{width:fit-content;min-width:100%;overflow:visible}.chords-page{display:flex;flex-direction:column;gap:1rem;min-height:0;height:100%}.chords-main-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-shrink:0}.chords-main-controls .chord-quality-picker-controls{width:auto;flex:1 1 auto;min-width:0}.chords-main-controls .chord-quality-buttons-title{display:none}.chords-page .chord-visualizer-card{flex:1 1 0;min-height:0;height:auto}.chord-voicings-page{display:flex;flex-direction:column;gap:1rem;min-height:0;height:100%}.chord-voicings-main-controls{display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}.chord-voicings-main-controls .chord-quality-buttons-title{display:none}.chord-voicings-main-controls .chord-voicing-buttons-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem}.chord-voicings-page .chord-visualizer-card{flex:1 1 0;min-height:0;height:auto}.play-mode-picker{position:relative}.play-mode-picker-desktop-label{font-size:.95rem;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-right:.5rem}.play-mode-picker-value{color:#22c55e;font-weight:700}.play-mode-picker-caret{margin-left:.4rem;font-size:.75rem;color:#94a3b8;display:inline-block;transition:transform .2s ease}.play-mode-picker-trigger[aria-expanded=true] .play-mode-picker-caret{transform:rotate(180deg)}@media(max-width:768px){.play-mode-picker-desktop-label{display:none}}.play-mode-picker-popover{position:absolute;z-index:1000;inset-block-end:calc(100% + .5rem);inset-inline-start:0;display:flex;flex-direction:column;gap:.35rem;min-width:14rem;padding:.5rem;border:1px solid rgba(148,163,184,.2);border-radius:.75rem;background:#0f172af5;box-shadow:0 18px 60px #02061773}.play-mode-picker-option{border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ae6;color:#e2e8f0eb;cursor:pointer;padding:.5rem .9rem;font-size:.9rem;text-align:left;transition:border-color .2s ease,background-color .2s ease}.play-mode-picker-option:hover,.play-mode-picker-option:focus-visible{border-color:#22c55ecc;background:#22c55e1f}.play-mode-picker-option.is-selected{border-color:#22c55ecc;background:#22c55e2e;font-weight:700}.interval-select{min-width:18rem;color:#f8fafc}.interval-select option{background:#0f172a;color:#f8fafc}.interval-graph-summary{margin:0;color:#e2e8f0d1}.interval-root-swatch{background:#ef4444cc}.interval-note-swatch{background:#3b82f6cc}.interval-overlap-swatch{background:#a855f7cc}.interval-wave-area{mix-blend-mode:screen}.interval-wave-root{fill:#ef444459}.interval-wave-interval{fill:#3b82f659}.interval-wave-line-root{stroke:#ef4444}.interval-wave-line-interval{stroke:#3b82f6}.interval-harmonics-grid-line{stroke:#94a3b83d;stroke-width:1}.interval-harmonics-stem{stroke:#0f172a73;stroke-width:1}.interval-harmonics-stem-guide{stroke:#94a3b847;stroke-width:1}.chord-visualizer-card{width:min(100%,32rem);margin:0 auto;display:flex;flex-direction:column;height:100%;box-sizing:border-box}.chord-visualizer-scroll-container{flex-grow:1;min-height:0;overflow-y:hidden;position:relative}.mobile-page-layout .chord-visualizer-scroll-container{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.chord-visualizer-stack{display:grid;gap:.08rem}.chord-visualizer-row{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}.chord-visualizer-card .chord-visualizer-row{display:flex;align-items:center;min-height:1.1rem}.chord-visualizer-line{flex-grow:1;height:2px;background-color:#94a3b847;border-radius:1px}.chord-visualizer-dash{color:#94a3b8b8;font-size:1.25rem;line-height:1}.chord-visualizer-spacer{min-height:1px}.chord-visualizer-note-label{width:2.5rem;text-align:right;flex-shrink:0;margin-right:.5rem;opacity:.7;font-family:monospace;font-size:.75rem}.chord-visualizer-row .graph-note-pill{padding:.08rem .4rem;font-size:.75rem}.chord-visualizer-row .graph-note-pill.chord-visualizer-moved-note{color:#fbbf24}.chord-visualizer-moved-legend{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;opacity:.75;white-space:nowrap}.chord-visualizer-moved-swatch{width:.7rem;height:.7rem;border-radius:3px;border:1px solid rgba(245,158,11,.75);background:#f59e0b29}.chord-visualizer-space-placeholder{flex-grow:1;height:2px;visibility:hidden}.interval-frequency-label{font-size:.72rem;fill:#e2e8f0b8}.scale-table-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem;margin:0 0 1rem;font-size:.8rem;color:#94a3b8}.scale-table-legend-item{display:inline-flex;align-items:center;gap:.4rem}.scale-table-note-button{background:transparent;border:none;color:inherit;font-size:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;outline:none;transition:transform .1s ease,color .1s ease;font-family:monospace;font-weight:700}.scale-table-note-button:hover,.scale-table-note-button:focus-visible{color:#22c55e;transform:scale(1.3)}.scale-table-note-button:active{transform:scale(.9)}.scale-table-note-button.is-deselected{opacity:.35}.scale-table-note-button.is-deselected:hover{opacity:.8}.scale-quality-button.is-selected,.scale-table-quality-button.is-selected,.note-picker-radial-button.is-selected{border-color:#22c55ecc;background:#22c55e2e}.scale-quality-button.is-unavailable,.scale-quality-button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}.scale-quality-button.is-unavailable:hover,.scale-quality-button:disabled:hover{border-color:#94a3b859;background:#0f172ae6}.note-picker{position:relative}.note-picker-trigger{min-width:13rem;font-size:1.05rem;font-weight:700}.note-picker-desktop-label,.instrument-picker-desktop-label{font-size:.95rem;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-right:.5rem}.note-picker-value,.instrument-picker-value{color:#22c55e;font-weight:700}.instrument-picker-modified-tag{font-style:italic;font-weight:400;opacity:.85}@media(max-width:768px){.note-picker-desktop-label,.instrument-picker-desktop-label{display:none}.note-picker-trigger{min-width:7rem}}.instrument-picker-trigger{min-width:17rem}.instrument-picker-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1001;display:grid;place-items:center;padding:1.5rem;background:#020617b3}.instrument-picker-modal{display:grid;gap:1rem;width:min(64rem,100%);max-height:min(80vh,56rem);padding:1rem;border:1px solid rgba(148,163,184,.2);border-radius:28px;background:#0f172af5;box-shadow:0 18px 60px #02061773}.instrument-picker-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.instrument-picker-modal-header-copy{display:grid;gap:.5rem}.instrument-picker-modal-header h2{margin:0;font-size:1.2rem}.instrument-picker-close{min-width:2.5rem;padding-inline:0;font-size:1.2rem;line-height:1}.instrument-picker-groups{display:grid;gap:1rem;min-height:0;overflow:auto;padding-right:.25rem}.instrument-picker-category-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;min-height:0;overflow:auto;padding-right:.25rem}.instrument-picker-category-button{display:grid;gap:.35rem;justify-items:start;text-align:left}.instrument-picker-category-button span:last-child{color:#e2e8f0c7;font-size:.9rem}.instrument-picker-group{display:grid;gap:.75rem;align-content:start}.instrument-picker-group h3{margin:0;color:#dcfce7;font-size:1rem}.instrument-picker-option-list{display:flex;flex-wrap:wrap;gap:.6rem}.instrument-picker-option,.instrument-picker-secondary-action{justify-self:start}.instrument-picker-more-button{border-color:#60a5fa66;background:#3b82f62e;color:#93c5fd;font-weight:600}.instrument-picker-more-button:hover,.instrument-picker-more-button:focus-visible{border-color:#60a5fab3;background:#3b82f659;color:#fff}.note-picker-popover{position:absolute;z-index:1000;inset-block-end:calc(100% + .5rem);inset-block-start:auto;inset-inline-start:50%;transform:translate(-50%);padding:1rem;border:1px solid rgba(148,163,184,.2);border-radius:50%;background:#0f172af5;box-shadow:0 18px 60px #02061773}.feature-page-layout-sidebar-global-controls .note-picker-popover{inset-inline-start:0;transform:none}.scale-quality-picker-overlay .note-picker-popover{position:relative;inset:auto;transform:none}.scale-quality-picker-overlay .note-picker-radial{width:14rem;height:14rem}.note-picker-radial{position:relative;width:18rem;height:18rem}.note-picker-radial-button{position:absolute;width:3rem;height:3rem;min-width:3rem!important;border-radius:50%!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.note-picker-octave{position:absolute;inset:50% auto auto 50%;display:grid;gap:.35rem;justify-items:center;transform:translate(-50%,-50%);color:#e2e8f0e0;font-size:.9rem}.note-picker-octave select{min-width:4rem;padding:.45rem .65rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ae6;color:inherit}.scale-table-toggle{display:inline-flex;background:#0f172a99;border:1px solid rgba(148,163,184,.2);border-radius:999px;padding:.2rem}.scale-table-toggle-button{background:transparent;border:1px solid transparent;border-radius:999px;color:#e2e8f0b3;padding:.4rem 1.1rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.scale-table-toggle-button:hover{color:#f8fafc}.scale-table-toggle-button.is-selected{background:#22c55e1f;border-color:#22c55ecc;color:#22c55e}.scale-table-shell{overflow-x:auto;-webkit-overflow-scrolling:touch}.scale-table{width:100%;border-collapse:collapse}.scale-table th,.scale-table td{min-width:3rem;padding:.65rem .45rem;text-align:center;border-bottom:1px solid rgba(148,163,184,.18)}.scale-table th:first-child,.scale-table td:first-child{position:sticky;left:0;background:#0f172af5}.scale-table thead th{color:#dcfce7}.scale-table tbody tr.is-selected{background:#22c55e14}.scale-table-quality-button{min-width:9rem}.scale-table td.is-in-scale{color:#4ade80;font-size:1.1rem}.combined-waveform-line{stroke:#f8fafc}.harmonics-graph-svg{width:100%;min-width:0;overflow:visible}.harmonics-graph-row-svg{flex:1;min-width:0;display:block;overflow:visible}.harmonics-axis-line,.harmonics-handle-guide{stroke-width:1.5;stroke:#fff9}.harmonics-axis-label{fill:#fff;font-size:.9rem}.harmonics-wave-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.harmonics-handle{cursor:ns-resize;stroke:#0f172ad9;stroke-width:2}.piano-keyboard{--piano-white-key-width: clamp(56px, 5vw, 76px);--piano-black-key-width: calc(var(--piano-white-key-width) * .58);position:relative;max-width:100%;height:clamp(180px,22vh,240px);margin:0 auto;touch-action:none}.drum-kit-button-grid{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:.6rem;width:100%;max-width:100%;height:clamp(180px,22vh,240px);margin:0 auto;padding:.75rem;overflow-y:auto}.drum-kit-piece-btn{display:flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:6rem;padding:.9rem 1rem;border-radius:14px;border:1px solid rgba(0,229,255,.35);background:linear-gradient(180deg,#00e5ff1f,#0f172a99);color:#e0f7fa;font-size:.9rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}.drum-kit-piece-btn:hover{background:linear-gradient(180deg,#00e5ff33,#0f172a99)}.drum-kit-piece-btn:active{transform:translateY(2px)}.drum-kit-piece-btn:focus-visible{outline:3px solid #4ade80;outline-offset:2px}.drum-kit-piece-btn.is-active{border-color:#4ade80;background:linear-gradient(180deg,#4ade8047,#0f172a99)}.piano-key{position:absolute;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}.piano-key:hover{transform:translateY(2px)}.piano-key:disabled{cursor:not-allowed}.piano-key:disabled:hover{transform:none}.piano-key:focus-visible{outline:3px solid #4ade80;outline-offset:2px}.piano-key-white{width:var(--piano-white-key-width);height:100%;padding:1rem .5rem;border-radius:0 0 18px 18px;border:1px solid #94a3b8;background:linear-gradient(180deg,#fff,#e2e8f0);color:#0f172a;display:flex;align-items:flex-end;justify-content:center}.piano-key-white.is-selected{background:linear-gradient(180deg,#dcfce7,#86efac)}.piano-key-white.is-highlighted:not(.is-selected){background:linear-gradient(180deg,#ecfccb,#bef264)}.piano-key-white:disabled{background:linear-gradient(180deg,#cbd5e1,#94a3b8);color:#0f172a99}.piano-key-black{z-index:1;width:var(--piano-black-key-width);height:62%;padding:.75rem .35rem;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#1e293b,#020617);color:#f8fafc;display:flex;align-items:flex-end;justify-content:center;box-shadow:0 10px 20px #02061773}.piano-key-black.is-selected{background:linear-gradient(180deg,#22c55e,#15803d)}.piano-key-black.is-highlighted:not(.is-selected){background:linear-gradient(180deg,#65a30d,#3f6212)}.piano-key-black:disabled{background:linear-gradient(180deg,#334155,#0f172a);color:#f8fafc4d;opacity:.35}.piano-key-white.is-out-of-key:not(.is-selected){background:linear-gradient(180deg,#fee2e2,#f87171);color:#7f1d1d}.piano-key-black.is-out-of-key:not(.is-selected){background:linear-gradient(180deg,#ef4444,#991b1b);color:#fef2f2;opacity:1}.piano-key.is-out-of-key .piano-key-degree{color:#7f1d1d}.piano-key-label{font-size:.8rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.15rem}.piano-key-degree{font-size:.75rem;font-weight:600;color:#64748b}.piano-key.is-highlighted .piano-key-degree,.piano-key.is-selected .piano-key-degree{color:#0f172a}@media(max-width:720px){.app-header{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding-inline:1rem}.app-header-left{justify-content:center;width:100%}.app-header-right{display:none}.app-nav{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem}.app-nav-left,.app-nav-center,.app-nav-right{display:contents}.app-main{padding:.75rem 1rem 1rem}.feature-page-panel-grid{grid-template-columns:1fr}.home-trail-map{padding:1rem}.home-trail-map-stage{min-height:32rem}.home-trail-map-path-label--sound{left:28%;top:8%}.home-trail-map-path-label--theory{left:72%;top:8%}.home-trail-cross-link{flex-wrap:wrap}.feature-page-layout-dock{grid-template-columns:1fr}.feature-page-layout-keyboard{grid-column:auto}.feature-page-layout-dock-right{justify-items:start}.piano-keyboard{--piano-white-key-width: 56px;height:180px}.chords-keyboard-shell{width:100%}.graph-card-header{flex-direction:column;align-items:flex-start}.mobile-setting-control .note-picker{position:static}.mobile-page-layout-gear-popover .note-picker-popover{inset-inline-start:50%!important;transform:translate(-50%)!important;inset-block-start:auto!important;inset-block-end:calc(100% + .5rem)!important}.note-picker-popover{inset-inline-start:50%;transform:translate(-50%)}.note-picker-radial{width:14rem;height:14rem}.scale-table-quality-button{min-width:8rem}}.instrument-visualizer-page{display:flex;flex-direction:column;gap:.75rem;height:100%;min-height:0}.instrument-visualizer-instrument-header{display:flex;justify-content:center;flex-shrink:0}.visualizer-layout-container{display:flex;gap:1.5rem;align-items:stretch;width:100%;height:100%;flex:1 1 0;min-height:0}.instrument-pipeline{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:#1e1e2d73;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #0000005e}.instrument-pipeline.vertical-pipeline{flex-direction:column;width:18rem;flex-shrink:0;gap:.5rem;padding:1.25rem 1rem;margin-bottom:0;justify-content:flex-start;align-self:stretch;height:auto}.vertical-pipeline .pipeline-stage-card{width:100%;flex:none}.vertical-pipeline .pipeline-arrow{margin:.15rem 0;text-align:center;width:100%}.pipeline-stage-card{flex:1;background:#12121abf;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.75rem 1rem;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column;gap:.4rem;box-shadow:0 4px 6px #00000026;min-width:0}.pipeline-stage-card:hover{border-color:#00e5ff66;background:#1a1a26d9;transform:translateY(-2px);box-shadow:0 6px 12px #00e5ff1a}.pipeline-stage-card.is-active{border-color:#00e5ff;background:#00e5ff0f;box-shadow:0 0 16px #00e5ff33,inset 0 0 8px #00e5ff0d}.pipeline-stage-card.is-bypassed{opacity:.55;border-style:dashed;border-color:#ffffff26;background:#0a0a0f80}.pipeline-stage-card.is-bypassed:hover{opacity:.75}.pipeline-stage-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.95rem;color:#fff;letter-spacing:.02em}.pipeline-stage-summary{font-size:.8rem;color:#a0a0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pipeline-arrow{color:#ffffff26;font-size:1.1rem;-webkit-user-select:none;user-select:none;font-weight:300}.bypass-btn{background:#ff52521a;border:1px solid rgba(255,82,82,.3);color:#ff8a8a;border-radius:4px;padding:.15rem .45rem;font-size:.72rem;cursor:pointer;transition:all .2s ease;font-weight:500}.bypass-btn:hover{background:#ff525233;border-color:#ff5252;color:#fff}.bypass-btn.is-bypassed{background:#ffffff14;border-color:#fff3;color:#ccc}.bypass-btn.is-bypassed:hover{background:#00e5ff26;border-color:#00e5ff;color:#00e5ff}.visualizer-editor-panel{background:#18182380;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.5rem;min-height:0;box-shadow:0 4px 20px #0003}.node-edit-view{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:1rem}.node-edit-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.back-to-graph-btn{background:#00e5ff14;border:1px solid rgba(0,229,255,.3);color:#00e5ff;border-radius:6px;padding:.4rem .75rem;font-size:.85rem;cursor:pointer;transition:all .2s ease;font-weight:600;flex-shrink:0}.back-to-graph-btn:hover{background:#00e5ff2e}.node-edit-header-label{font-size:1.05rem;font-weight:700;color:#fff;flex:1}.instrument-graph{gap:1.25rem 1.5rem;padding:1.25rem 1rem;flex:1 1 42%;min-width:22rem;align-self:center;align-items:center;overflow-x:auto;overflow-y:hidden}.instrument-graph--vertical{flex:none;width:100%;min-width:0;gap:2.5rem 1.25rem;overflow-x:hidden;overflow-y:visible}.instrument-graph-node{background:#12121abf;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.75rem 1rem;min-height:3.5rem;box-sizing:border-box;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;box-shadow:0 4px 6px #00000026;min-width:0}.instrument-graph-node-controls{display:flex;align-items:center;justify-content:center;gap:.5rem}.instrument-graph-node .bypass-btn,.instrument-graph-node .node-edit-btn{flex-shrink:0}.node-edit-btn{background:#00e5ff14;border:1px solid rgba(0,229,255,.3);color:#00e5ff;border-radius:4px;padding:.15rem .45rem;font-size:.72rem;cursor:pointer;transition:all .2s ease;font-weight:500}.node-edit-btn:hover{background:#00e5ff2e}.instrument-graph-node:hover{border-color:#00e5ff66;background:#1a1a26d9;transform:translateY(-2px);box-shadow:0 6px 12px #00e5ff1a}.instrument-graph-node--generator{border-color:#ffb74d66}.instrument-graph-node--generator:hover{border-color:#ffb74db3;box-shadow:0 6px 12px #ffb74d1f}.instrument-graph-node.is-active{border-color:#00e5ff;background:#00e5ff0f;box-shadow:0 0 16px #00e5ff33,inset 0 0 8px #00e5ff0d}.instrument-graph-node.is-bypassed{opacity:.55;border-style:dashed;border-color:#ffffff26;background:#0a0a0f80}.instrument-graph-node.is-bypassed:hover{opacity:.75}.instrument-graph-node-label{font-weight:600;font-size:.9rem;color:#fff;letter-spacing:.02em}.instrument-graph-node--output{cursor:default;align-self:center;justify-self:start;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:#c0c0d0;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;position:relative;z-index:1}.instrument-graph-edges{z-index:0}.instrument-graph-edge{stroke:#00e5ff59;stroke-width:.035}.instrument-graph-edge.is-passthrough{stroke:#ffffff40;stroke-dasharray:.12 .08}.instrument-graph-edges--measured .instrument-graph-edge{stroke-width:1.5}.instrument-graph-edges--measured .instrument-graph-edge.is-passthrough{stroke-dasharray:5 4}.instrument-graph-edge-arrow{fill:#00e5ff80}.visualizer-field-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}.visualizer-field-row label{width:8rem;font-weight:500;color:#c0c0d0;font-size:.9rem}.visualizer-field-row select,.visualizer-field-row input{background:#0c0c12cc;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.45rem .75rem;border-radius:6px;font-size:.9rem;outline:none;transition:border-color .2s ease}.visualizer-field-row select:focus,.visualizer-field-row input:focus{border-color:#00e5ff;box-shadow:0 0 0 2px #00e5ff26}.frequency-sweep-subpanel{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}.frequency-sweep-subpanel h3{font-size:1rem;margin-bottom:1rem;color:#fff}.noise-subpanel{padding:1.5rem;background:#ffffff05;border:1px dashed rgba(255,255,255,.1);border-radius:8px;color:#a0a0b0;font-size:.9rem;line-height:1.5}.harmonics-presets-subpanel{margin-top:1.5rem}.harmonics-presets-subpanel h3{font-size:1rem;color:#fff}.diatonic-chords-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem;margin-top:1rem}@media(max-width:1200px){.diatonic-chords-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:768px){.diatonic-chords-grid{grid-template-columns:repeat(2,1fr)}.instrument-picker-category-list{gap:0!important}.instrument-picker-category-button{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:1rem!important;padding:.6rem 1rem!important;border-radius:0!important;width:100%!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid rgba(148,163,184,.15)!important}}.diatonic-chord-card{--accent-color: #94a3b8;--accent-glow: rgba(148, 163, 184, .15);--accent-bg: rgba(148, 163, 184, .05);border:1px solid rgba(148,163,184,.2);border-radius:12px;background:#0f172a8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer;position:relative;overflow:hidden}.diatonic-chord-card.card-major{--accent-color: #22c55e;--accent-glow: rgba(34, 197, 94, .25);--accent-bg: rgba(34, 197, 94, .05)}.diatonic-chord-card.card-minor{--accent-color: #3b82f6;--accent-glow: rgba(59, 130, 246, .25);--accent-bg: rgba(59, 130, 246, .05)}.diatonic-chord-card.card-diminished{--accent-color: #f97316;--accent-glow: rgba(249, 115, 22, .25);--accent-bg: rgba(249, 115, 22, .05)}.diatonic-chord-card:hover{transform:translateY(-4px);border-color:var(--accent-color);box-shadow:0 8px 20px -4px var(--accent-glow)}.diatonic-chord-card.is-active{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color),0 8px 24px -4px var(--accent-glow)}.diatonic-chord-card-header{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.diatonic-chord-roman{font-size:2rem;font-weight:800;color:var(--accent-color);line-height:1}.diatonic-chord-name{font-size:.95rem;font-weight:600;color:#f1f5f9;text-align:right}.diatonic-chord-notes-section{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.diatonic-sub-chord{padding:.5rem;border-radius:6px;background:#1e293b80;border:1px solid rgba(255,255,255,.05);transition:background .2s,border-color .2s;display:flex;flex-direction:column;gap:.25rem}.diatonic-sub-chord:hover{background:#1e293bcc;border-color:var(--accent-color)}.diatonic-sub-chord.is-selected{background:var(--accent-bg);border-color:var(--accent-color)}.diatonic-sub-chord-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}.diatonic-sub-chord.is-selected .diatonic-sub-chord-title{color:var(--accent-color)}.diatonic-sub-chord-notes{font-size:.85rem;font-family:monospace;color:#cbd5e1}.subset-chord-card{--accent-color: #6366f1;--accent-glow: rgba(99, 102, 241, .25);--accent-bg: rgba(99, 102, 241, .05);border:1px solid rgba(99,102,241,.2);border-radius:12px;background:#0f172a8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer}.subset-chord-card:hover{transform:translateY(-4px);border-color:var(--accent-color);box-shadow:0 8px 20px -4px var(--accent-glow)}.subset-chord-card.is-selected{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color),0 8px 24px -4px var(--accent-glow);background:var(--accent-bg)}.subset-chord-card-title{font-weight:700;font-size:1.1em;color:#f1f5f9}.subset-chord-card-notes{font-size:.9em;opacity:.8;color:#cbd5e1}.borrowed-chords-grid{display:flex;flex-wrap:nowrap;gap:1rem;align-items:start;overflow-x:auto;padding-top:6px;padding-bottom:.5rem}.borrowed-chords-column{display:flex;flex-direction:column;gap:.75rem;flex:1 1 160px;min-width:160px}.feature-page-layout-content .scale-chords-container{height:100%;min-height:0;overflow-y:auto}.mobile-page-layout.is-landscape .scale-chords-container:has(.borrowed-chords-mobile-landscape){flex:1 1 0;min-height:0;width:100%;overflow:hidden}.mobile-page-layout.is-landscape .scale-chords-container:has(.borrowed-chords-mobile-landscape)>p{display:none}.mobile-page-layout:not(.is-landscape) .scale-chords-container:has(.borrowed-chords-mobile-portrait){flex:1 1 0;min-height:0;overflow-y:auto}.borrowed-chords-mobile-portrait .mobile-carousel-tabs{flex-shrink:0}.borrowed-chords-mobile-landscape{display:flex;flex-direction:row;gap:.5rem;height:100%;min-height:0;width:100%}.borrowed-chords-mobile-landscape .mobile-left-tabs{min-height:0;overflow-y:auto;scrollbar-width:none}.borrowed-chords-mobile-landscape .mobile-left-tabs::-webkit-scrollbar{display:none}.borrowed-chords-mobile-landscape-content{flex:1 1 0;min-width:0;min-height:0;overflow-y:auto;padding:6px 4px 4px}.scale-chords-mobile-landscape{display:flex;flex-direction:row;gap:.5rem;flex:1 1 0;min-height:0;min-width:0;width:100%;padding:.5rem .75rem;box-sizing:border-box}.scale-chords-mobile-landscape-content{flex:1 1 0;min-width:0;min-height:0;overflow-y:auto;padding:6px 4px 4px}.scale-chords-mobile-landscape-content [style*="repeat(2, 1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}.borrowed-chord-sources{font-size:.75rem;color:#64748b;margin-top:.25rem;line-height:1.25}.diatonic-chord-card.compact-chord-card{padding:.75rem;gap:.4rem}.diatonic-chord-card.compact-chord-card .diatonic-chord-roman{font-size:1.25rem}.diatonic-chord-card.compact-chord-card .diatonic-chord-name{font-size:.85rem}.diatonic-chord-card.compact-chord-card .diatonic-chord-notes-section{gap:.3rem}.diatonic-chord-card.compact-chord-card .diatonic-sub-chord{padding:.25rem .4rem!important;flex-direction:row;justify-content:space-between;align-items:center;gap:.25rem!important}.diatonic-chord-card.compact-chord-card .diatonic-sub-chord-title{font-size:.65rem!important}.diatonic-chord-card.compact-chord-card .diatonic-sub-chord-notes{font-size:.72rem!important;white-space:nowrap!important;letter-spacing:-.01em!important}.diatonic-chord-card.compact-chord-card .borrowed-chord-sources{font-size:.7rem;color:#64748b;margin-top:.1rem}.subset-chord-card.compact-chord-card{padding:.75rem;gap:.4rem}.subset-chord-card.compact-chord-card .subset-chord-card-title{font-size:.9rem}.subset-chord-card.compact-chord-card .subset-chord-card-notes{font-size:.8rem}.midi-key-visualizer-container{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:.4rem;padding:.4rem 0;width:100%;height:100%}.midi-visualizer-card{width:100%;max-width:44rem;display:flex;flex-direction:column;gap:1.5rem}.midi-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed rgba(148,163,184,.25);border-radius:20px;padding:2.5rem 2rem;background:#0f172a66;text-align:center;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}.midi-dropzone:hover{border-color:#22c55e99;background:#22c55e0a}.midi-dropzone.is-dragging{border-color:#22c55e;background:#22c55e14;box-shadow:0 0 20px #22c55e26}.midi-dropzone.has-file{border-color:#22c55e80;background:#22c55e08}.midi-dropzone-content{display:flex;flex-direction:column;align-items:center;gap:1.25rem;pointer-events:none;width:100%}.midi-dropzone-content .file-input-label{pointer-events:auto}.midi-dropzone-content .example-song-picker{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%}.example-song-picker-label{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b}.example-song-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.example-song-chip{min-height:2rem;padding:.35rem .9rem;border-radius:999px;border:1px solid rgba(148,163,184,.4);background:#94a3b814;color:#e2e8f0;font-size:.85rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}.example-song-chip:hover:not(:disabled){border-color:#4ade80;background:#22c55e1f;transform:translateY(-1px)}.example-song-chip:disabled{opacity:.5;cursor:default}.example-song-chip[aria-busy=true]{opacity:.9;border-color:#4ade80}.example-song-picker-error{margin:0;font-size:.85rem;color:#f87171}.upload-icon{width:3.25rem;height:3.25rem;color:#94a3b8;transition:color .2s ease,transform .2s ease}.midi-dropzone:hover .upload-icon,.midi-dropzone.is-dragging .upload-icon{color:#4ade80;transform:translateY(-2px)}.empty-state,.success-state{display:flex;flex-direction:column;gap:.5rem}.dropzone-prompt{margin:0;font-size:1.15rem;font-weight:600;color:#f8fafc}.dropzone-subprompt{margin:0;font-size:.875rem;color:#64748b}.success-message{margin:0;font-size:1.15rem;color:#4ade80}.success-message strong{color:#f8fafc}.song-details{margin:0;font-size:.9rem;color:#94a3b8}.file-input-label{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.5rem 1.5rem;border-radius:999px;background:#22c55e;color:#0f172a;font-weight:700;font-size:.925rem;cursor:pointer;box-shadow:0 4px 12px #22c55e33;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}.file-input-label:hover{background:#4ade80;transform:translateY(-1px);box-shadow:0 6px 16px #22c55e59}.file-input-label:active{background:#16a34a;transform:translateY(0)}.error-message{margin:.5rem 0 0;padding:.65rem 1rem;border:1px solid rgba(239,68,68,.25);border-radius:8px;background:#ef44441a;color:#f87171;font-size:.9rem;width:100%}.midi-file-gate{margin:0 auto;justify-items:center}.mobile-page-layout-content .midi-file-gate{flex-shrink:0}.midi-file-gate-reopen-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.35rem .75rem;margin-bottom:.4rem}.midi-file-gate-reopen-row.has-right-content,.midi-file-gate-reopen-row.has-left-content{justify-content:space-between}.midi-file-gate-header-left,.midi-file-gate-header-right{display:flex;align-items:center}.midi-header-time-sig-bpm{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.4rem 1.1rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172a66;color:#e2e8f0;font-size:.85rem;font-weight:600;white-space:nowrap;box-sizing:border-box}.midi-header-time-sig-bpm .midi-header-dot{color:#94a3b899}.midi-file-gate-reopen-btn,.midi-settings-song-btn,.midi-file-gate-cancel-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;padding:.4rem 1.1rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172a66;color:#e2e8f0;font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.midi-file-gate-reopen-btn:hover,.midi-settings-song-btn:hover,.midi-file-gate-cancel-btn:hover{border-color:#22c55e99;background:#22c55e14}.midi-file-gate-cancel-btn{justify-self:center}.midi-zoom-control{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:#94a3b8;background:#0f172a66;padding:.25rem .75rem;border-radius:999px;border:1px solid rgba(148,163,184,.2)}.midi-zoom-control label{white-space:nowrap}.midi-zoom-control input[type=range]{width:90px;cursor:pointer}.midi-zoom-control .midi-zoom-value{min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums;color:#e2e8f0}.mobile-page-layout .midi-file-gate-reopen-row:not(:has(.vgm-view-toggle-wrapper)){flex-wrap:nowrap;gap:.25rem .4rem}.mobile-page-layout .midi-file-gate-reopen-row:not(:has(.vgm-view-toggle-wrapper))>*{min-width:0}.mobile-page-layout .midi-file-gate-reopen-row .midi-header-time-sig-bpm,.mobile-page-layout .midi-file-gate-reopen-row .midi-file-gate-reopen-btn{padding-left:.55rem;padding-right:.55rem;font-size:.72rem;white-space:nowrap}.mobile-page-layout .midi-file-gate-reopen-row .midi-zoom-control{gap:.3rem;padding-left:.5rem;padding-right:.5rem;font-size:.72rem}.mobile-page-layout .midi-file-gate-reopen-row .midi-zoom-control input[type=range]{width:48px}.mobile-page-layout:not(.is-landscape) .midi-file-gate-reopen-row .midi-zoom-control .midi-zoom-value{display:none}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row{margin-bottom:.2rem;gap:.2rem .5rem;flex-wrap:nowrap}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-file-gate-header-left,.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-file-gate-header-right{flex:0 1 auto;min-width:0}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-header-time-sig-bpm,.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-file-gate-reopen-btn{min-height:0;padding:.1rem .8rem;font-size:.75rem;line-height:1.2;white-space:nowrap}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-zoom-control{padding:.05rem .6rem;font-size:.75rem;gap:.4rem}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-zoom-control input[type=range]{width:64px;height:1rem;margin:0}.mobile-page-layout.is-landscape .midi-file-gate-reopen-row .midi-zoom-control .midi-zoom-value{min-width:2rem;white-space:nowrap}.midi-settings-stack{display:flex;flex-direction:column;align-items:stretch;gap:.75rem}.mobile-setting-item+.midi-settings-stack{margin-top:1.25rem}.midi-settings-stack .midi-header-time-sig-bpm,.midi-settings-stack .midi-settings-song-btn,.midi-settings-stack .midi-zoom-control{align-self:stretch;justify-content:center}.midi-settings-stack .midi-zoom-control input[type=range]{flex:1 1 auto;width:auto;min-width:0}.midi-settings-stack .vgm-view-toggle-wrapper{align-self:center}.midi-visualizer-control-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:.75rem 1rem;background:#1e293b66;border:1px solid rgba(148,163,184,.15);border-radius:12px;margin-bottom:.5rem}.key-selector-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.key-selector-field{display:flex;align-items:center;gap:.4rem}.key-selector-label{font-size:.85rem;font-weight:500;color:#94a3b8}.key-selector-dropdown{background:#0f172ae6;border:1px solid rgba(148,163,184,.35);border-radius:999px;color:#f8fafc;padding:.35rem .75rem;font-size:.85rem;cursor:pointer;outline:none;transition:border-color .2s ease,background-color .2s ease,opacity .2s ease}.key-selector-dropdown:hover:not(:disabled),.key-selector-dropdown:focus:not(:disabled){border-color:#22c55ecc;background:#22c55e1f}.key-selector-dropdown:disabled{opacity:.5;cursor:not-allowed;border-color:#94a3b826;background:#0f172a66}.key-selector-dropdown option{background:#0f172a;color:#f8fafc}.active-scale-display{font-size:.9rem;color:#e2e8f0}.active-scale-display strong{color:#22c55e;font-weight:600}.suggested-key-card{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#22c55e14;border:1px solid rgba(34,197,94,.3);border-radius:16px;margin-top:.5rem;margin-bottom:.5rem}.suggested-key-info{display:flex;flex-direction:column;gap:.25rem;text-align:left}.suggested-key-title{margin:0;font-size:1rem;font-weight:600;color:#f8fafc}.suggested-key-title strong{color:#4ade80}.suggested-key-match-rate{margin:0;font-size:.85rem;color:#94a3b8}.midi-timeline-card{width:100%;margin-top:1.5rem}.midi-timeline-container{position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.midi-timeline-wrapper{display:flex;align-items:stretch;background:#0f172a73;border:1px solid rgba(148,163,184,.12);border-radius:16px;overflow:hidden;width:100%;height:100%;min-height:0}.midi-playback-controls-card{display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;margin:0;box-shadow:0 8px 30px #02061773;background:#1e293b73;border:1px solid rgba(148,163,184,.15);border-radius:12px}.midi-timeline-left-col{width:200px;min-width:200px;max-width:200px;background:#0f172ad9;border-right:1px solid rgba(148,163,184,.15);display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.midi-timeline-left-col::-webkit-scrollbar{display:none}@media(max-width:768px){.midi-timeline-left-col{width:68px;min-width:68px;max-width:68px}.midi-timeline-track-controls{flex-wrap:wrap;justify-content:center}}.midi-timeline-left-col.is-mobile{width:72px;min-width:72px;max-width:72px}.midi-timeline-left-col.is-mobile .midi-timeline-track-info{padding:.4rem .2rem}.midi-timeline-left-col.is-mobile .midi-timeline-track-controls{flex-wrap:wrap;justify-content:center}.midi-timeline-left-col.scroll-affordance{scrollbar-width:none}.midi-timeline-left-col.scroll-affordance::-webkit-scrollbar{display:none}.midi-timeline-track-info{display:flex;flex-direction:column;justify-content:center;gap:.25rem;flex-shrink:0;padding:.4rem .6rem;border-bottom:1px solid rgba(148,163,184,.12);overflow:hidden;box-sizing:border-box}.midi-timeline-track-info:last-child{border-bottom:none}.midi-timeline-track-info.is-alt-row{background:#94a3b814}.midi-timeline-track-controls{display:flex;flex-direction:row;align-items:center;gap:.25rem;flex-shrink:0}.midi-timeline-track-controls .midi-track-control-btn{width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:6px}.midi-timeline-track-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0;width:100%;text-align:left}.midi-timeline-track-name{font-size:.875rem;font-weight:600;color:#f8fafc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-timeline-track-info.is-percussion{border-left:3px solid #f59e0b;background:#f59e0b0f}.midi-track-list-item.is-percussion{border-color:#f59e0b59;background:#f59e0b14}.midi-timeline-track-name-row,.midi-track-list-name-row{display:flex;align-items:center;gap:.4rem;min-width:0}.midi-timeline-track-number{display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.midi-timeline-track-swatch{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;box-shadow:0 0 0 1px #0f172a99 inset}.midi-percussion-badge{display:inline-flex;align-items:center;padding:.1rem .4rem;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fbbf24;background:#f59e0b2e;border:1px solid rgba(245,158,11,.4);border-radius:4px;flex-shrink:0;line-height:1.2}.midi-timeline-track-instrument{font-size:.75rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-timeline-right-col{flex-grow:1;min-width:0;display:flex;flex-direction:column;height:100%;min-height:0;position:relative}.midi-timeline-lanes-scroll{width:100%;height:100%;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.3) transparent}.midi-timeline-lanes-scroll::-webkit-scrollbar{height:8px;width:8px}.midi-timeline-lanes-scroll::-webkit-scrollbar-track{background:transparent}.midi-timeline-lanes-scroll::-webkit-scrollbar-thumb{background-color:#94a3b84d;border-radius:4px}.midi-timeline-lanes-container{display:flex;flex-direction:column;position:relative}.midi-timeline-canvas{display:block;cursor:pointer}.midi-timeline-lane{position:relative;height:5rem;border-bottom:1px solid rgba(148,163,184,.12);background:#0f172a33}.midi-timeline-lane:last-child{border-bottom:none}.midi-timeline-lane:nth-child(2n){background:#0f172a4d}.midi-timeline-lane-grid{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,rgba(148,163,184,.05) 1px,transparent 1px);background-size:100px 100%;pointer-events:none}.midi-controls-card{width:560px;display:flex;flex-direction:column;gap:.75rem;padding:.75rem;margin:0;box-shadow:0 8px 30px #02061766}.midi-controls-row{display:flex;gap:.75rem;align-items:stretch}.midi-controls-col-left{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background:#1e293b33;border:1px solid rgba(148,163,184,.15);border-radius:12px;justify-content:space-between}.midi-controls-col-right{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}.midi-controls-card .key-selector-controls{flex-direction:column;align-items:stretch;gap:.35rem}.midi-controls-card .key-selector-field{justify-content:space-between}.midi-controls-card .midi-dropzone{padding:1rem;border-radius:12px}.midi-controls-card .upload-icon{width:1.75rem;height:1.75rem;margin-bottom:.25rem}.midi-controls-card .dropzone-prompt{font-size:.85rem}.midi-controls-card .dropzone-subprompt{font-size:.7rem}.midi-controls-card .success-message{font-size:.85rem}.midi-controls-card .song-details{font-size:.75rem}.midi-controls-card .file-input-label{min-height:2rem;padding:.25rem .75rem;font-size:.8rem;margin-top:.25rem}.midi-controls-card .error-message{padding:.4rem .6rem;font-size:.75rem}.midi-controls-card .suggested-key-card{margin:0;padding:.5rem .75rem;border-radius:12px}.midi-controls-card .suggested-key-title{font-size:.85rem}.midi-controls-card .suggested-key-match-rate{font-size:.75rem}.midi-timeline-placeholder{width:100%;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.midi-timeline-placeholder h2{font-size:1.5rem;margin:0 0 1rem;color:#f8fafc}.midi-timeline-note-block{position:absolute;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 .4rem;font-size:.7rem;font-weight:700;box-shadow:0 2px 4px #00000026;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}.midi-timeline-note-block.is-in-scale{background:linear-gradient(135deg,#22c55e40,#22c55e1a);color:#4ade80;border-color:#22c55e66}.midi-timeline-note-block.is-in-scale:hover{border-color:#22c55ecc;box-shadow:0 0 8px #22c55e4d}.midi-timeline-note-block.is-out-of-scale{background:linear-gradient(135deg,#ef444440,#ef44441a);color:#f87171;border-color:#ef444466}.midi-timeline-note-block.is-out-of-scale:hover{border-color:#ef4444cc;box-shadow:0 0 8px #ef44444d}.midi-timeline-note-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background-color:#f59e0b;box-shadow:0 0 8px #f59e0b,0 0 2px #f59e0b;z-index:5;pointer-events:none}.midi-playhead-indicator-bar{position:absolute;top:.5rem;left:0;right:0;height:0;z-index:25;pointer-events:none;display:flex;align-items:center}.midi-playhead-indicator{position:absolute;top:0;z-index:25;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;color:#fbbf24;background:#0f172aeb;border:1px solid rgba(245,158,11,.6);border-radius:9999px;box-shadow:0 4px 14px #00000080,0 0 10px #f59e0b40;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s ease-in-out,transform .15s ease-in-out;white-space:nowrap}.midi-playhead-indicator:hover{background:#1e293bfa;border-color:#f59e0b;transform:translateY(-1px);box-shadow:0 6px 18px #0009,0 0 14px #f59e0b73}.midi-playhead-indicator.indicator-left{left:.75rem}.midi-playhead-indicator.indicator-right{right:.75rem}.midi-playback-controls{display:flex;align-items:center;gap:.5rem}.midi-playback-controls .midi-control-btn{width:2rem;height:2rem;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}.midi-playback-time{font-family:monospace;font-size:.85rem;color:#94a3b8;margin-left:.5rem;white-space:nowrap;flex:0 0 auto}.midi-timeline-lane.is-muted,.midi-timeline-track-info.is-muted{opacity:.5;transition:opacity .2s ease}.midi-timeline-lane.is-muted .midi-timeline-note-block{opacity:.45;filter:saturate(.6);transition:opacity .2s ease,filter .2s ease}.midi-timeline-lane.is-soloed{background:#22c55e0d;box-shadow:inset 4px 0 #4ade80;transition:background-color .2s ease,box-shadow .2s ease}.midi-timeline-track-info.is-soloed{background:#22c55e14;box-shadow:inset 4px 0 #4ade80;transition:background-color .2s ease,box-shadow .2s ease}.chord-voicing-button-picker{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.chord-voicing-picker-label{font-size:.82rem;color:#e2e8f0b8;font-weight:600}.chord-voicing-buttons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.interval-buttons-container{display:none;flex-direction:column;gap:.5rem;width:100%}.interval-select-container{display:block;width:100%}.interval-buttons-title{font-size:.9rem;color:#e2e8f0e0;font-weight:500}.interval-buttons-grid{display:flex;flex-wrap:wrap;gap:.5rem;max-width:320px}.interval-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172a99;border:1px solid rgba(148,163,184,.2);color:#e2e8f0cc;padding:.4rem .6rem;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:75px;flex:1 1 75px}.interval-btn:hover{border-color:#22c55ecc;background:#22c55e1f;color:#f8fafc}.interval-btn.is-active{border-color:#22c55ed9;background:#22c55e40;color:#f8fafc;box-shadow:0 0 10px #22c55e40}.interval-btn-name{font-size:.75rem;font-weight:600;text-align:center;white-space:nowrap}.interval-btn-ratio{font-size:.7rem;color:#94a3b8d9;margin-top:.15rem}.interval-btn.is-active .interval-btn-ratio{color:#e2e8f0f2}.ratio-input-container{display:flex;flex-direction:column;gap:.4rem;width:100%;margin-top:.5rem}.ratio-input-label{display:flex;flex-direction:column;gap:.35rem;color:#e2e8f0e0;font-size:.9rem}.ratio-input{background:#0f172ae6;border:1px solid rgba(148,163,184,.35);color:#f8fafc;padding:.55rem .8rem;border-radius:8px;font-size:.95rem;font-family:inherit;transition:all .2s ease}.ratio-input:focus{outline:none;border-color:#22c55ecc;box-shadow:0 0 0 2px #22c55e33}.ratio-input.is-invalid{border-color:#ef4444b3;box-shadow:0 0 0 2px #ef444440}.ratio-validation-error{font-size:.75rem;color:#ef4444d9}.chord-quality-buttons-container{display:none;flex-direction:column;gap:.5rem;width:100%}.chord-quality-select-container{display:block;width:100%}.chord-quality-buttons-title{font-size:.9rem;color:#e2e8f0e0;font-weight:500;margin-bottom:.25rem}.chord-quality-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem;width:100%}.chord-quality-group{display:flex;flex-direction:column;gap:.2rem;width:100%}.chord-quality-group+.chord-quality-group{margin-top:.35rem}.chord-quality-group-label{font-size:.7rem;color:#94a3b8d9;font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}.chord-quality-btn{display:flex;align-items:center;justify-content:center;background:#0f172a99;border:1px solid rgba(148,163,184,.2);color:#e2e8f0cc;padding:.5rem .6rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.82rem;font-weight:600;text-align:center}.chord-quality-btn:hover{border-color:#22c55ecc;background:#22c55e1f;color:#f8fafc}.chord-quality-btn.is-active{border-color:#22c55ed9;background:#22c55e40;color:#f8fafc;box-shadow:0 0 10px #22c55e40}@media(min-width:768px){.chord-quality-buttons-container{display:flex}.chord-quality-select-container{display:none}}.chord-quality-buttons-container.inline-buttons{display:flex!important}.chord-quality-select-container.inline-select{display:block!important}.interval-buttons-container.inline-buttons{display:flex!important}.interval-select-container.inline-select{display:block!important}.chord-quality-popup-container{display:flex;flex-direction:column;gap:.5rem;width:100%}.chord-quality-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#020617b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:overlayFadeIn .2s ease-out}.chord-quality-popup-content{background:#0f172af2;border:1px solid rgba(148,163,184,.25);border-radius:16px;padding:1.5rem;width:90%;max-width:480px;box-shadow:0 24px 72px #02061799;animation:popupScaleIn .25s cubic-bezier(.34,1.56,.64,1)}.chord-quality-popup-content.interval-popup-content{max-width:600px}.interval-popup-content .interval-buttons-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:.6rem!important;max-width:none!important;width:100%!important}.interval-popup-content .interval-btn{flex:none!important;width:100%!important;box-sizing:border-box!important}@media(max-width:640px){.interval-popup-content .interval-buttons-grid{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:480px){.interval-popup-content .interval-buttons-grid{grid-template-columns:repeat(2,1fr)!important}}.chord-quality-popup-content .interval-buttons-grid{max-width:none;width:100%}.chord-quality-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.chord-quality-popup-title{margin:0;font-size:1.15rem;font-weight:700;color:#f8fafc;background:linear-gradient(135deg,#f8fafc,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.chord-quality-popup-close{background:none;border:none;font-size:1.2rem;color:#e2e8f099;cursor:pointer;transition:color .15s ease;padding:.2rem .5rem}.chord-quality-popup-close:hover{color:#ef4444d9}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes popupScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.voice-leading-page-shell{display:flex;flex-direction:column;height:100%;width:100%;min-height:0}.voice-leading-keyboard-dock{flex-shrink:0;padding:0 1.5rem 1rem}.voice-leading-graph-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.graph-node circle{transition:r .2s cubic-bezier(.34,1.56,.64,1),stroke .2s ease,fill .2s ease}.graph-node:hover circle{fill:#1e3a8a;stroke:#60a5fa}.graph-node.is-selected circle{animation:pulse-border 2s infinite ease-in-out}@keyframes pulse-border{0%{stroke-width:3px;box-shadow:0 0 #60a5fa66}50%{stroke-width:4px;stroke:#93c5fd}to{stroke-width:3px;box-shadow:0 0 0 8px #60a5fa00}}.graph-jump-btn{background:#0f172af2;border:1px solid #10b981;color:#10b981;padding:.35rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #00000080,0 0 8px #10b9814d;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}.graph-jump-btn:hover{background:#10b981;color:#0f172a;box-shadow:0 4px 16px #10b98199;transform:translate(-50%,-50%) scale(1.1)}.page-loading-fallback{display:flex;align-items:center;justify-content:center;height:60vh;width:100%}.loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-radius:50%;border-top-color:#22c55e;animation:spin-loader .8s ease-in-out infinite}@keyframes spin-loader{to{transform:rotate(360deg)}}.midi-analyzing-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem;text-align:center;color:#e2e8f0e0}.midi-analyzing-status .loading-spinner{width:28px;height:28px}.chord-voicing-picker-controls{position:relative;width:100%}.chord-voicing-select-container{display:block;width:100%}.chord-voicing-select-container.inline-select{display:block!important}.chord-voicing-buttons-container{display:none;flex-direction:column;gap:.5rem;width:100%}.chord-voicing-buttons-container.inline-buttons{display:flex!important}.chord-voicing-popup-container,.interval-popup-container{display:flex;flex-direction:column;gap:.5rem;width:100%}.intervals-mobile-summary-selector .interval-buttons-title{display:none}.intervals-mobile-summary-selector .note-picker-trigger{padding:.35rem .65rem;font-size:.85rem;width:15rem;display:inline-flex;gap:.4rem;box-sizing:border-box}.intervals-mobile-summary-selector .note-picker-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}.mobile-harmonics-container{display:flex;flex-direction:column;height:100%;width:100%;min-height:0}.mobile-carousel-tabs{display:flex;flex-direction:row;border-bottom:1px solid rgba(148,163,184,.1);background:#0f172a66}.mobile-carousel-tab{flex:1;background:none;border:none;color:#94a3b8;font-size:.85rem;font-weight:600;padding:.75rem 0;cursor:pointer;text-align:center;transition:color .2s ease,border-color .2s ease;border-bottom:2px solid transparent}.mobile-carousel-tab.is-active{color:#22c55e;border-bottom-color:#22c55e}.mobile-harmonics-carousel{flex:1;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;width:100%;height:100%;-ms-overflow-style:none;scrollbar-width:none}.mobile-harmonics-carousel::-webkit-scrollbar{display:none}.mobile-harmonics-panel{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;overflow:hidden;padding:.5rem 1rem}.mobile-harmonics-panel .graph-card{padding:0;border:none;background:transparent;box-shadow:none;border-radius:0;width:100%}.mobile-harmonics-panel .harmonics-slider-card{padding:0;border:none;background:transparent;box-shadow:none;width:100%;max-width:100%;margin:0}.mobile-harmonics-panel .harmonics-slider-controls{overflow:hidden;width:100%;padding-bottom:0;display:flex;justify-content:space-between;gap:.2rem}.mobile-harmonics-panel .harmonics-control{inline-size:2.25rem!important}.mobile-harmonics-panel .harmonics-amplitude-slider-shell{inline-size:1.5rem!important}.mobile-harmonics-container.is-landscape{flex-direction:column;gap:.35rem;padding:.35rem .5rem 0}.mobile-harmonics-landscape-top{display:flex;flex-direction:row;align-items:stretch;gap:.5rem;flex-shrink:0;height:2.75rem}.mobile-harmonics-container.is-landscape .mobile-harmonics-presets{flex:1 1 0;min-width:0;height:100%;padding:0;flex-shrink:0;display:flex;align-items:center;overflow:hidden}.mobile-harmonics-container.is-landscape .mobile-preset-grid{grid-template-columns:repeat(5,1fr)!important;gap:.3rem!important}.mobile-harmonics-container.is-landscape .mobile-preset-grid .harmonics-preset-button,.mobile-harmonics-container.is-landscape .mobile-preset-grid .harmonics-reset-button{flex-direction:row!important;padding:.25rem .2rem!important;gap:.3rem!important}.mobile-harmonics-container.is-landscape .mobile-preset-grid .harmonics-reset-button{grid-column:auto}.mobile-harmonics-container.is-landscape .mobile-preset-grid .harmonics-preset-icon-container{width:1rem!important;height:1rem!important}.mobile-harmonics-landscape-body{flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:row;gap:.5rem}.mobile-harmonics-left-tabs,.mobile-left-tabs{display:flex;flex-direction:column;gap:.35rem;width:5.5rem;flex-shrink:0;justify-content:flex-start}.mobile-harmonics-left-tabs .mobile-carousel-tab,.mobile-left-tabs .mobile-carousel-tab{width:100%;padding:.5rem .25rem;font-size:.85rem;font-weight:600;text-align:center;border-radius:.375rem;background:#94a3b814;border:1px solid rgba(148,163,184,.2);color:#94a3b8;cursor:pointer;transition:all .15s ease}.mobile-left-tabs .mobile-carousel-tab{flex:0 0 auto}.mobile-harmonics-left-tabs .mobile-carousel-tab.is-active,.mobile-left-tabs .mobile-carousel-tab.is-active{background:#22c55e26;border-color:#22c55e80;color:#22c55e}.mobile-harmonics-landscape-content{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column}.mobile-harmonics-container.is-landscape .mobile-harmonics-panel{flex:1 1 0;height:100%;min-width:0;min-height:0;padding:0;display:flex;flex-direction:column;scroll-snap-align:unset}.mobile-harmonics-container.is-landscape .mobile-harmonics-panel--sliders{flex:1 1 0;overflow-x:auto;overflow-y:hidden}.mobile-harmonics-container.is-landscape .mobile-harmonics-panel--sliders .harmonics-slider-controls{justify-content:flex-start;gap:1rem}.mobile-harmonics-container.is-landscape .mobile-harmonics-panel--sliders .harmonics-amplitude-slider-shell{min-block-size:0}.mobile-harmonics-container.is-landscape .mobile-harmonics-panel--graph .harmonics-graph-card{flex:1 1 0;min-height:0}.mobile-harmonics-container.is-landscape .mobile-harmonics-waveform{flex:1 1 0;min-width:0;height:100%;padding:0}.mobile-harmonics-container.is-landscape .mobile-harmonics-waveform .real-time-visualizer-card{padding:0!important}.mobile-harmonics-container.is-landscape .mobile-harmonics-waveform .real-time-visualizer-card>div{min-height:0!important}.preset-picker{position:relative;display:inline-flex}.preset-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999}.preset-picker-popover{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:.5rem;background:#0f172af2;border:1px solid rgba(148,163,184,.2);border-radius:.75rem;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;min-width:10rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -10px 25px #00000080;z-index:1000}.preset-picker-option{background:none;border:none;color:#cbd5e1;padding:.5rem .75rem;text-align:left;font-size:.8rem;font-weight:500;border-radius:.35rem;cursor:pointer;width:100%;transition:background .15s ease,color .15s ease}.preset-picker-option:hover{background:#94a3b81a;color:#f8fafc}.preset-picker-option.is-active{background:#22c55e26;color:#22c55e}.white-keys-mobile-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100%;overflow-y:auto}.white-keys-mobile-intro{font-size:.9rem;color:#94a3b8;line-height:1.4;text-align:center}.page-music_theory-white_keys .feature-page-layout{border:1px solid rgba(148,163,184,.15);border-radius:24px;background:#0f172a73;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px #0000004d;padding:1.5rem;gap:0}.page-music_theory-white_keys .keyboard-card{border:none;background:transparent;box-shadow:none;padding:0;overflow:visible;width:100%}.white-keys-page{--piano-white-key-width: clamp(36px, 2.5vw, 48px);--white-key-count: 22;display:flex;flex-direction:column;height:100%;width:100%}.white-keys-modes-container{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:visible;padding-bottom:0;width:100%}.white-keys-modes-grid{position:relative;width:calc(var(--white-key-count) * var(--piano-white-key-width));height:100%}.white-key-mode-column{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none}.white-key-mode-label-btn{pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:.35rem;white-space:nowrap;background:#0f172ae6;border:1px solid rgba(139,92,246,.45);border-radius:8px;padding:.35rem .65rem;cursor:pointer;color:#f1f5f9;transition:transform .2s,border-color .2s,background-color .2s,box-shadow .2s;box-shadow:0 4px 12px #0003}.white-key-mode-label-btn:hover{transform:scale(1.05);border-color:#8b5cf6f2;background:#8b5cf640;box-shadow:0 6px 16px #8b5cf640}.white-key-mode-label-btn .note-name{font-size:.7rem;font-weight:700;color:#a78bfa}.white-key-mode-label-btn .mode-name{font-size:.75rem;font-weight:600}.white-key-mode-label-btn .scale-name{font-size:.65rem;font-weight:500;color:#94a3b8}.white-key-mode-line{width:1px;flex-shrink:0;border-left:1px dashed rgba(139,92,246,.55);margin-top:.25rem}.white-key-mode-column.is-active .white-key-mode-label-btn{border-color:#22c55ed9;background:#22c55e2e;box-shadow:0 0 16px #22c55e59}.white-key-mode-column.is-active .white-key-mode-label-btn .note-name{color:#4ade80}.white-key-mode-column.is-active .white-key-mode-line{border-left-style:solid;border-left-color:#22c55ed9;filter:drop-shadow(0 0 4px rgba(34,197,94,.5))}.white-keys-mobile-list{display:flex;flex-direction:column;gap:.5rem}.white-keys-mobile-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#1e293b66;border:1px solid rgba(255,255,255,.05);border-radius:12px;cursor:pointer;transition:border-color .2s,background-color .2s}.white-keys-mobile-item.is-active{border-color:#8b5cf680;background:#8b5cf614}.white-keys-mobile-item-left{display:flex;flex-direction:column;gap:.15rem}.white-keys-mobile-note{font-size:.75rem;font-weight:700;color:#a78bfa}.white-keys-mobile-mode{font-size:.95rem;font-weight:600;color:#f1f5f9}.white-keys-mobile-play-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:#8b5cf633;border:1px solid rgba(139,92,246,.4);color:#c084fc;cursor:pointer;transition:transform .2s,background-color .2s}.white-keys-mobile-play-btn:active{transform:scale(.95)}.missing-fundamental-desktop-page{width:100%;height:100%;padding:1.5rem;box-sizing:border-box}@media(min-width:768px){.page-audio_processing-frequencies .piano-keyboard{--piano-white-key-width: clamp(56px, 5vw, 76px) !important;--piano-black-key-width: calc(var(--piano-white-key-width) * .58) !important}.page-audio_processing-frequencies .note-picker-popover{inset-inline-start:0;transform:none}}@media(max-width:767px){.page-audio_processing-frequencies .note-picker-popover{inset-inline-start:0!important;transform:none!important}}@media(min-width:768px){.page-audio_processing-missing_fundamental .note-picker-popover,.page-audio_processing-equalizer .note-picker-popover,.page-audio_processing-oscillators .note-picker-popover{inset-inline-start:0;transform:none}}@media(max-width:767px){.page-audio_processing-missing_fundamental .note-picker-popover,.page-audio_processing-equalizer .note-picker-popover,.page-audio_processing-oscillators .note-picker-popover{inset-inline-start:0!important;transform:none!important}}@media(min-width:768px){.page-music_theory-scales .note-picker-popover,.page-music_theory-chords .note-picker-popover,.page-music_theory-chord_voicings .note-picker-popover{inset-inline-start:0;transform:none}}@media(min-width:768px){.harmonics-page-panel-grid{grid-template-columns:auto 1fr}.harmonics-slider-card{width:auto}.harmonics-slider-controls{overflow-x:visible}.page-audio_processing-harmonics .feature-page-layout-sidebar-global-controls{flex-direction:row;align-items:center;gap:.75rem;margin-bottom:0}.page-audio_processing-harmonics .feature-page-layout-sidebar-global-controls>*{flex:1;min-width:0}.page-audio_processing-harmonics .feature-page-layout-dock-left .feature-control-card{width:25vw;max-width:25vw;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.page-audio_processing-harmonics .feature-page-layout-dock-left{align-self:stretch;align-content:stretch}.page-audio_processing-harmonics .feature-page-layout-keyboard{align-self:stretch}.page-audio_processing-harmonics .harmonics-preset-actions{grid-template-columns:repeat(2,1fr);gap:.75rem}.page-audio_processing-harmonics .harmonics-preset-button{padding:.6rem .4rem;gap:.4rem}.page-audio_processing-harmonics .harmonics-preset-icon-container{width:1.8rem;height:1.8rem}.page-audio_processing-harmonics .harmonics-preset-icon{width:1.2rem;height:1.2rem}.page-audio_processing-harmonics .harmonics-preset-button-label{font-size:.7rem}.page-audio_processing-harmonics .feature-page-layout-sidebar-global-controls .note-picker-trigger{padding:.5rem .6rem;font-size:.82rem;justify-content:flex-start}.page-audio_processing-harmonics .feature-page-layout-sidebar-global-controls .note-picker-desktop-label{flex-shrink:0}.page-audio_processing-harmonics .feature-page-layout-sidebar-global-controls .note-picker-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}}.mobile-harmonics-presets{padding:0 1rem .5rem;width:100%;box-sizing:border-box;flex-shrink:0}.mobile-preset-grid{grid-template-columns:repeat(4,1fr)!important;gap:.4rem!important}.mobile-preset-grid .harmonics-preset-button{padding:.5rem .25rem!important;border-radius:6px!important;gap:.35rem!important}.mobile-preset-grid .harmonics-preset-button-label{font-size:.65rem!important}.mobile-preset-grid .harmonics-preset-icon-container{width:1.6rem!important;height:1.6rem!important}.mobile-preset-grid .harmonics-preset-icon{width:1.1rem!important;height:1.1rem!important}.mobile-harmonics-waveform,.mobile-realtime-waveform,.mobile-adsr-waveform{width:100%;height:8rem;flex-shrink:0;box-sizing:border-box}.mobile-harmonics-waveform{padding:0 1rem}.mobile-harmonics-waveform .real-time-visualizer-card,.mobile-realtime-waveform .real-time-visualizer-card,.mobile-adsr-waveform .real-time-visualizer-card{padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;height:100%!important}.mobile-harmonics-waveform .real-time-waveform-header,.mobile-realtime-waveform .real-time-waveform-header,.mobile-adsr-waveform .real-time-waveform-header{display:none!important}.mobile-harmonics-waveform .graph-card,.mobile-realtime-waveform .graph-card,.mobile-adsr-waveform .graph-card{height:100%;width:100%}.mobile-realtime-waveform .real-time-visualizer-card>div{min-height:0!important}.scale-step-cell-connector{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2rem;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.scale-step-horizontal-line{position:absolute;left:0;right:0;top:50%;height:2px;background:#94a3b838;transform:translateY(-50%);z-index:1}.scale-step-horizontal-line--start{left:50%}.scale-step-horizontal-line--end{right:50%}.scale-step-badge{position:relative;z-index:2;font-family:monospace;font-size:.65rem;font-weight:700;color:#94a3b8;background:#111a2e;padding:.1rem .25rem;border-radius:4px;border:1px solid rgba(148,163,184,.25);line-height:1}.scale-step-badge--boundary{position:absolute;right:0;top:50%;transform:translate(50%,-50%);z-index:3}.scale-dot-container{position:relative;z-index:2}.scale-mobile-step-badge{font-family:monospace;font-size:.65rem;font-weight:700;color:#64748b;line-height:1;display:inline-block;margin:0 .1rem}.adsr-cycle-graph-dock{justify-self:stretch;align-self:stretch;width:100%;height:100%}.adsr-cycle-graph-dock .graph-card{width:100%;height:100%}.mobile-adsr-waveform{width:100%;height:8rem;flex-shrink:0;box-sizing:border-box}.mobile-adsr-waveform .graph-card{height:100%;width:100%}.page-music_theory-voice_leading .note-picker-popover{inset-block-start:calc(100% + .5rem);inset-block-end:auto;inset-inline-start:0;transform:none}@media(max-width:767px){.page-music_theory-voice_leading .note-picker-popover{inset-block-start:calc(100% + .5rem)!important;inset-block-end:auto!important;inset-inline-start:0!important;transform:none!important}}@media(min-width:768px){.page-audio_processing-envelopes-adsr .feature-page-layout-sidebar-global-controls{flex-direction:row;align-items:center;gap:.75rem;margin-bottom:0}.page-audio_processing-envelopes-adsr .feature-page-layout-sidebar-global-controls>*{flex:1;min-width:0}.page-audio_processing-envelopes-adsr .adsr-envelope-controls{gap:.5rem .75rem}.page-audio_processing-envelopes-adsr .adsr-field-row label{font-size:.82rem}.page-audio_processing-envelopes-adsr .adsr-field-row input[type=number]{width:4.5rem;padding:.35rem .5rem;font-size:.85rem}}.waveform-dock-column{display:flex;flex-direction:column;align-self:stretch;height:100%;width:100%}.waveform-dock-column .graph-card,.waveform-dock-column .real-time-visualizer-card{flex:1;height:100%;width:100%;min-width:0}@media(min-width:768px){.page-audio_processing-instrument_visualizer .piano-keyboard{--piano-white-key-width: clamp(40px, 4vw, 68px) !important;--piano-black-key-width: calc(var(--piano-white-key-width) * .58) !important}}.synthesis-hub-desktop-wrapper{display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:2rem;box-sizing:border-box;overflow-y:auto}.synthesis-hub-container{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.synthesis-hub-intro{margin:0;font-size:1rem;line-height:1.6;color:#cbd5e1}.synthesis-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem;width:100%}.synthesis-hub-card{position:relative;text-decoration:none;background:#1e293b4d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;justify-content:space-between}.synthesis-hub-card-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 0%,rgba(59,130,246,.15),transparent 70%);opacity:.5;transition:opacity .3s ease;pointer-events:none}.synthesis-hub-card-content{padding:1.25rem;display:flex;flex-direction:column;height:100%;box-sizing:border-box}.synthesis-hub-card h3{font-size:1.25rem;font-weight:700;margin:0 0 .75rem;color:#f8fafc;transition:color .2s ease}.synthesis-hub-card p{font-size:.95rem;line-height:1.5;color:#cbd5e1;margin:0 0 1rem;flex-grow:1}.synthesis-hub-card-arrow{font-size:.9rem;font-weight:600;color:#60a5fa;display:flex;align-items:center;gap:.25rem;transition:transform .2s ease}.synthesis-hub-card-arrow span{transition:transform .2s ease}.synthesis-hub-card:hover{transform:translateY(-4px);background:#1e293b8c;border-color:#60a5fa66;box-shadow:0 12px 28px #0000004d,0 0 15px #3b82f61a}.synthesis-hub-card:hover .synthesis-hub-card-glow{opacity:1}.synthesis-hub-card:hover h3{color:#60a5fa}.synthesis-hub-card:hover .synthesis-hub-card-arrow span{transform:translate(4px)}.synthesis-hub-card:active{transform:translateY(-2px);box-shadow:0 6px 15px #00000040}.mobile-page-layout .synthesis-hub-container{padding:1rem;box-sizing:border-box}@media(max-width:767px){.synthesis-hub-container{padding:1rem;gap:1rem;overflow-y:auto;max-height:100%;-webkit-overflow-scrolling:touch}.synthesis-hub-grid{grid-template-columns:1fr;gap:.75rem;padding-bottom:1.5rem}.synthesis-hub-card-content{padding:1rem}}.visualizer-mobile-tabs{display:flex;background:#0f172a99;border-bottom:1px solid rgba(148,163,184,.2);padding:.5rem .75rem;gap:.5rem}.visualizer-mobile-tab-btn{flex:1;padding:.45rem 1rem;border-radius:.375rem;border:1px solid rgba(148,163,184,.2);background:#94a3b814;color:#cbd5e1;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease;text-align:center}.visualizer-mobile-tab-btn.is-active{background:#3b82f633;border-color:#3b82f699;color:#60a5fa}.song-chord-analyzer-container{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:.4rem;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.song-chord-analyzer-panels{display:grid;grid-template-columns:280px 1fr;grid-template-rows:minmax(0,1fr);gap:1.25rem;width:100%;height:100%;min-height:0;box-sizing:border-box;overflow:hidden}@media(max-width:900px){.song-chord-analyzer-panels{grid-template-columns:1fr;grid-template-rows:auto auto}}.song-chord-analyzer-panels.is-tabbed{display:flex;flex-direction:column;gap:.25rem;min-height:16rem}.song-analysis-mobile-scroll:has(>.song-chord-analyzer-panels.is-tabbed){padding:.25rem .5rem .4rem;gap:0}.mobile-page-layout.is-landscape .song-analysis-mobile-scroll:has(>.song-chord-analyzer-panels.is-tabbed){padding:.1rem .5rem .25rem}.mobile-page-layout.is-landscape .song-chord-analyzer-panels.is-tabbed{min-height:0;gap:.15rem}.song-chord-analyzer-panels.is-tabbed>.visualizer-mobile-tabs{flex:0 0 auto}.visualizer-mobile-tabs.mobile-tab-bar{background:transparent;border-bottom:1px solid rgba(148,163,184,.25);padding:0;gap:0}.visualizer-mobile-tabs.mobile-tab-bar .visualizer-mobile-tab-btn{min-height:1.75rem;padding:.1rem 1rem;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:transparent;color:#94a3b8;font-size:.9rem;line-height:1.2}.visualizer-mobile-tabs.mobile-tab-bar .visualizer-mobile-tab-btn.is-active{background:transparent;border-bottom-color:#60a5fa;color:#f1f5f9}.mobile-page-layout.is-landscape .visualizer-mobile-tabs.mobile-tab-bar .visualizer-mobile-tab-btn{min-height:1.5rem;padding-top:0;padding-bottom:0;font-size:.8rem}.song-chord-analyzer-panels.is-tabbed>.main-chords-panel,.song-chord-analyzer-panels.is-tabbed>.chord-timeline-panel{flex:1 1 0;min-height:0;height:auto}.song-chord-analyzer-controls-card{width:340px;max-width:340px}.main-chords-panel{background:#0f172a99;border:1px solid rgba(148,163,184,.16);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;flex:1;min-height:0;max-height:100%;box-sizing:border-box;overflow:hidden}.main-chords-panel.empty{align-items:center;justify-content:center;color:#94a3b8;font-size:.9rem}.main-chords-grid{display:flex;flex-direction:column;gap:.5rem;width:100%;overflow-y:auto;flex:1;padding-right:4px;box-sizing:border-box}.main-chords-grid::-webkit-scrollbar{width:6px}.main-chords-grid::-webkit-scrollbar-track{background:#0f172a99;border-radius:3px}.main-chords-grid::-webkit-scrollbar-thumb{background:#3b82f666;border-radius:3px}.main-chords-grid::-webkit-scrollbar-thumb:hover{background:#3b82f6b3}.main-chord-card{display:flex;flex-direction:column;gap:.35rem;padding:.6rem .75rem;background:#1e293b80;border:1px solid rgba(148,163,184,.16);border-radius:8px;color:#f8fafc;cursor:pointer;transition:all .15s ease;width:100%;box-sizing:border-box;text-align:left}.main-chord-card:hover{background:#1e293bd9;border-color:#3b82f680}.main-chord-card.selected{background:#3b82f640;border-color:#60a5fa;box-shadow:0 0 10px #60a5fa59}.chord-card-header{display:flex;align-items:center;gap:.5rem}.roman-badge{font-size:.75rem;font-weight:700;padding:.1rem .4rem;background:#3b82f64d;border-radius:4px;color:#93c5fd}.chord-card-name{font-size:.9rem;font-weight:600;color:#f8fafc}.chord-card-duration{display:flex;align-items:center;gap:.5rem}.duration-bar-outer{flex:1;height:6px;background:#94a3b833;border-radius:3px;overflow:hidden}.duration-bar-inner{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px;transition:width .3s ease}.duration-text{font-size:.75rem;color:#94a3b8;min-width:36px;text-align:right;font-weight:500}.chord-timeline-panel{background:#0f172a99;border:1px solid rgba(148,163,184,.16);border-radius:12px;padding:.6rem .5rem;display:flex;flex-direction:column;flex:1;min-height:0;height:100%;box-sizing:border-box;overflow:hidden}.timeline-scroll-container{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:scroll;overflow-y:auto;border:none;border-radius:0;background:transparent;box-sizing:border-box;padding:0 .5rem;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.3) transparent}.timeline-scroll-container::-webkit-scrollbar{height:8px;width:8px}.timeline-scroll-container::-webkit-scrollbar-track{background:transparent}.timeline-scroll-container::-webkit-scrollbar-thumb{background-color:#94a3b84d;border-radius:4px}.timeline-container{position:relative;min-height:0;height:100%;flex:1;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;overflow:visible;padding-bottom:.5rem}.timeline-ticks{position:absolute;top:0;left:0;right:0;height:24px;border-bottom:1px solid rgba(148,163,184,.15);pointer-events:none}.timeline-tick{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(148,163,184,.25);padding-left:3px}.tick-label{font-size:.65rem;color:#94a3b8;font-weight:500;-webkit-user-select:none;user-select:none;position:absolute;bottom:2px;left:3px;line-height:1}.bar-time-sig-badge{position:absolute;top:-21px;left:2px;font-size:.62rem;color:#38bdf8;font-weight:600;white-space:nowrap;line-height:1;background:#0f172ae6;border:1px solid rgba(56,189,248,.35);border-radius:3px;padding:1px 4px;z-index:2;pointer-events:none}.timeline-track{position:relative;width:100%;min-height:75px;margin-top:24px}.bar-raw-columns-track{position:relative;width:100%;margin-top:1rem;min-height:50px}.bar-raw-column{position:absolute;top:0;display:flex;flex-direction:column;gap:4px;padding:0 3px;box-sizing:border-box;container-type:inline-size}.bar-raw-chord-chip{display:flex;align-items:center;justify-content:space-between;column-gap:4px;background:#1e293bbf;border:1px solid rgba(245,158,11,.35);border-radius:4px;padding:3px 6px;white-space:nowrap;font-size:clamp(.5rem,calc((100cqw - 30px) / 7),.75rem);color:#e2e8f0;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.bar-raw-chord-chip:hover{background:#f59e0b40;border-color:#f59e0bb3;color:#fff;transform:translateY(-1px)}.raw-chord-name{font-weight:600;flex:0 1 auto;min-width:0}.raw-chord-pct{font-size:.93em;color:#f59e0b;font-weight:600;margin-left:6px;flex-shrink:0}.timeline-chord-block{position:absolute;top:6px;bottom:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 6px;cursor:pointer;overflow:visible;box-sizing:border-box;transition:background .15s ease}.timeline-chord-block.category-blank{background:#1e293b99;border:1px solid rgba(148,163,184,.25)}.timeline-chord-block.category-blank .block-label{color:#94a3b8}.timeline-chord-block.category-scale{background:#3b82f640;border:1px solid rgba(59,130,246,.5)}.timeline-chord-block.category-scale:hover{background:#3b82f673;border-color:#60a5fa}.timeline-chord-block.category-borrowed{background:#a78bfa40;border:1px solid rgba(167,139,250,.5)}.timeline-chord-block.category-borrowed:hover{background:#a78bfa73;border-color:#c4b5fd}.timeline-chord-block.category-other{background:#f59e0b38;border:1px solid rgba(245,158,11,.5)}.timeline-chord-block.category-other:hover{background:#f59e0b6b;border-color:#fbbf24}.timeline-chord-block.active{box-shadow:0 0 0 2px #f8fafc,0 0 10px #f8fafc8c}.block-label{font-size:.75rem;font-weight:600;color:#f8fafc;white-space:normal;overflow-wrap:break-word;overflow:hidden;max-height:100%;line-height:1.15;text-align:center}.timeline-chord-block.is-none{container-type:inline-size}.timeline-chord-block.is-none .block-label{white-space:nowrap}@container (max-width: 2rem){.timeline-chord-block.is-none .block-label{visibility:hidden}}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;box-shadow:0 0 6px #ef4444;z-index:10;pointer-events:none;transition:left .05s linear}.bar-raw-chord-more{display:inline-flex;align-items:center;justify-content:center;background:#94a3b81f;border:1px dashed rgba(148,163,184,.4);border-radius:4px;padding:2px 6px;font-size:.68rem;font-weight:600;color:#94a3b8;cursor:pointer;transition:all .15s ease;white-space:nowrap}.bar-raw-chord-more:hover{background:#94a3b840;border-color:#cbd5e1;color:#fff}.bar-explain-button{display:inline-flex;align-items:center;justify-content:center;background:#3b82f626;border:1px solid rgba(59,130,246,.4);border-radius:4px;padding:3px 6px;font-size:.72rem;font-weight:600;color:#60a5fa;cursor:pointer;margin-top:4px;transition:all .15s ease;white-space:nowrap}.bar-explain-button:hover{background:#3b82f659;border-color:#60a5fa;color:#fff}.bar-explanation-view{display:flex;flex-direction:column;gap:1.25rem;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:1.25rem;box-sizing:border-box;width:100%}.bar-explanation-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.15);padding-bottom:.75rem}.explanation-title{margin:0;font-size:1.25rem;font-weight:700;color:#f8fafc}.explanation-slice-info{display:block;font-size:.85rem;font-weight:600;color:#cbd5e1}.bar-explanation-header .header-actions{display:flex;align-items:center;gap:.75rem}.explain-play-bar-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:6px;background:#10b981;color:#fff;border:1px solid #059669;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.explain-play-bar-btn:hover{background:#059669;border-color:#34d399}.explain-back-btn{background:#1e293bcc;border:1px solid rgba(148,163,184,.3);border-radius:6px;color:#e2e8f0;padding:.4rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease}.explain-back-btn:hover{background:#334155e6;color:#fff;border-color:#38bdf8}.piano-roll-container{width:100%;overflow-x:auto;border:1px solid rgba(148,163,184,.2);border-radius:8px;background:#090d16}.bar-explanation-piano-roll{position:relative;width:100%;height:240px;background:radial-gradient(circle at 50% 50%,#1e293b4d,#0f172a99);overflow:hidden}.no-notes-message{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:.9rem;font-style:italic}.chord-pitch-line{position:absolute;left:0;right:0;height:1px;border-top:1px dashed rgba(245,158,11,.7);pointer-events:none;z-index:2}.pitch-line-label{position:absolute;right:8px;top:-10px;font-size:.7rem;font-weight:700;color:#f59e0b;background:#0f172ae6;padding:1px 4px;border-radius:3px;border:1px solid rgba(245,158,11,.4)}.piano-roll-note{position:absolute;height:24px;background:#3b82f699;border:1px solid rgba(96,165,250,.8);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box;z-index:3;transition:all .2s ease}.piano-roll-note-label{font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.8)}.piano-roll-note.chord-contributing-note{background:#f59e0bd9;border-color:#fbbf24;box-shadow:0 0 8px #f59e0b99;z-index:4}.piano-roll-note.chord-non-contributing-note{background:#64748b66;border-color:#64748b;color:#94a3b8;opacity:.7;z-index:2}.bar-chord-guesses-container{display:flex;flex-direction:column;gap:.6rem}.guesses-heading{margin:0;font-size:.9rem;font-weight:600;color:#cbd5e1}.guesses-controls-row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}.explain-chord-guess-select-wrapper .styled-select{width:100%;max-width:340px}.explain-chord-guess-select-wrapper .styled-select-trigger{width:100%;max-width:340px;padding:.5rem .75rem;border-radius:6px;background:#1e293b;color:#e2e8f0;border:1px solid #334155;font-size:.9rem;font-weight:500;justify-content:space-between}.explain-chord-guess-select-wrapper .styled-select-trigger:hover:not(:disabled),.explain-chord-guess-select-wrapper .styled-select-trigger:focus-visible:not(:disabled){border-color:#3b82f6;background:#1e293b}.explain-chord-guess-select-wrapper .styled-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.explain-play-chord-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:6px;background:#2563eb;color:#fff;border:1px solid #3b82f6;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.explain-play-chord-btn:hover:not(:disabled){background:#1d4ed8;border-color:#60a5fa}.explain-play-chord-btn:disabled{opacity:.5;cursor:not-allowed}.chord-notes-display{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem;background:#1e293bb3;border:1px solid rgba(148,163,184,.2);border-radius:6px}.chord-notes-heading{font-size:.8rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.chord-notes-pills{display:flex;align-items:center;gap:.35rem}.chord-note-pill{display:inline-block;padding:.15rem .45rem;border-radius:4px;background:#f59e0b33;border:1px solid rgba(245,158,11,.4);color:#fbbf24;font-size:.85rem;font-weight:700;font-family:monospace}.bar-explanation-view.is-mobile{padding:.75rem;gap:.75rem}.bar-explanation-view.is-mobile .bar-explanation-header{flex-direction:column;align-items:stretch;gap:.6rem}.bar-explanation-view.is-mobile .bar-explanation-header .header-actions{flex-wrap:wrap;gap:.5rem}.bar-explanation-view.is-mobile .header-actions>button{flex:1 1 auto;justify-content:center;text-align:center}.bar-explanation-view.is-mobile .explain-back-btn{order:-1}.bar-explanation-view.is-mobile .bar-explanation-piano-roll{height:clamp(140px,32vh,240px)}.bar-explanation-view.is-mobile .guesses-controls-row{flex-direction:column;align-items:stretch;gap:.5rem;flex-wrap:nowrap}.bar-explanation-view.is-mobile .explain-chord-guess-select-wrapper .styled-select,.bar-explanation-view.is-mobile .explain-chord-guess-select-wrapper .styled-select-trigger{max-width:none}.bar-explanation-view.is-mobile .explain-play-chord-btn{justify-content:center}.bar-explanation-view.is-mobile .chord-notes-display,.bar-explanation-view.is-mobile .chord-notes-pills{flex-wrap:wrap}.song-section-visualizer-container{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;gap:.75rem;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.part-timeline-canvas{cursor:pointer}.song-section-visualizer-progress-notice{margin:0;padding:.5rem .75rem;border:1px solid rgba(234,179,8,.4);border-left:3px solid rgba(234,179,8,.8);border-radius:6px;background:#eab3081a;color:#fde68a;font-size:.85rem;line-height:1.4}.song-section-visualizer-progress-notice strong{color:#fef3c7}.error-boundary-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;margin:2rem auto;max-width:650px;width:90%;background:#0f172ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(239,68,68,.3);border-radius:12px;box-shadow:0 8px 32px #0006;color:#f8fafc;text-align:center;box-sizing:border-box}.error-boundary-outer-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0f172a;padding:1rem;box-sizing:border-box}.error-boundary-title{font-size:1.5rem;font-weight:700;color:#f87171;margin-top:0;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem;justify-content:center}.error-boundary-message{font-size:1rem;color:#cbd5e1;margin-bottom:1.25rem;line-height:1.5}.error-boundary-details{width:100%;text-align:left;margin-bottom:1.5rem;background:#0006;border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:.75rem;max-height:200px;overflow-y:auto;box-sizing:border-box}.error-boundary-stack{font-family:monospace;font-size:.8rem;color:#fca5a5;white-space:pre-wrap;word-break:break-word;margin:0}.error-boundary-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.error-boundary-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1.25rem;font-size:.95rem;font-weight:600;border-radius:6px;cursor:pointer;text-decoration:none;transition:all .2s ease}.error-boundary-btn-primary{background:#ef4444;color:#fff;border:none}.error-boundary-btn-primary:hover{background:#dc2626}.error-boundary-btn-secondary{background:#94a3b826;color:#e2e8f0;border:1px solid rgba(148,163,184,.3)}.error-boundary-btn-secondary:hover{background:#94a3b840;color:#fff}.mobile-popover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#02061799;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200}.mobile-page-layout-gear-popover{position:fixed;bottom:5.5rem;left:50%;transform:translate(-50%);width:calc(100% - 2rem);max-width:380px;max-height:calc(100vh - 7rem);background:#0f172a;border:1px solid rgba(148,163,184,.3);border-radius:12px;box-shadow:0 20px 25px -5px #000000b3,0 8px 10px -6px #000000b3;z-index:210;display:flex;flex-direction:column;overflow:visible;animation:mobilePopoverSlideUp .2s ease-out}.mobile-page-layout.is-landscape .mobile-page-layout-gear-popover{bottom:3.5rem;max-height:calc(100vh - 4.5rem)}@keyframes mobilePopoverSlideUp{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.mobile-popover-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;border-bottom:1px solid rgba(148,163,184,.2);background:#1e293bcc}.mobile-popover-header h3{margin:0;font-size:.95rem;font-weight:700;color:#f8fafc}.mobile-popover-close-btn{background:transparent;border:none;color:#94a3b8;font-size:1.1rem;cursor:pointer;padding:.2rem .4rem;line-height:1}.mobile-popover-close-btn:hover{color:#f8fafc}.mobile-popover-body{padding:.75rem;display:flex;flex-direction:column;gap:.75rem;overflow:visible}.mobile-setting-control .note-picker{position:static}.mobile-page-layout-gear-popover .note-picker-popover{inset-inline-start:50%!important;transform:translate(-50%)!important;inset-block-start:auto!important;inset-block-end:calc(100% + .5rem)!important;z-index:1000!important}.feedback-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border:none;background:transparent;color:inherit}.feedback-btn--header{width:2.25rem;height:2.25rem;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#0f172ab3;color:#94a3b8;font-size:1rem;line-height:1;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .15s ease}.feedback-btn--header:hover{border-color:#94a3b8a6;background:#1e293bd9;color:#f8fafc;transform:translateY(-1px)}.feedback-btn--mobile{width:2.25rem;height:2.25rem;background:#94a3b814;border:1px solid rgba(148,163,184,.2);border-radius:.375rem;color:#cbd5e1;transition:all .2s ease}.feedback-btn--mobile:hover{border-color:#94a3b880;color:#f8fafc;background:#94a3b829}.feedback-btn--home{pointer-events:auto;width:38px;height:38px;border-radius:999px;background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#e2e8f0;box-shadow:0 4px 12px #0000004d;transition:all .2s ease-in-out}.feedback-btn--home:hover{background:#1e293bf2;border-color:#ffffff4d;transform:scale(1.03)}.feedback-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0f172abf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}.feedback-modal{position:relative;background:#0f172a;border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:20px 24px;width:100%;max-width:380px;box-shadow:0 20px 25px -5px #00000080,0 8px 10px -6px #0006;color:#e2e8f0;font-family:inherit}.feedback-modal:focus{outline:none}.feedback-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.feedback-modal-title{font-size:1.125rem;font-weight:600;color:#f8fafc;margin:0}.feedback-modal-close{background:transparent;border:none;color:#94a3b8;font-size:1.125rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .15s ease,background-color .15s ease}.feedback-modal-close:hover{color:#f8fafc;background:#94a3b826}.feedback-modal-form{display:flex;flex-direction:column;gap:16px}.feedback-modal-field{display:flex;flex-direction:column;gap:8px}.feedback-modal-label{font-size:.875rem;color:#cbd5e1;font-weight:500}.feedback-rating-radiogroup{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0}.feedback-rating-note{background:none;border:none;font-size:2.25rem;line-height:1;cursor:pointer;color:#94a3b84d;padding:0 4px;border-radius:6px;transition:color .15s ease,transform .15s ease;-webkit-user-select:none;user-select:none}.feedback-rating-note.is-filled{color:#38bdf8;text-shadow:0 0 10px rgba(56,189,248,.4)}.feedback-rating-note:hover{transform:scale(1.18)}.feedback-rating-note:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}.feedback-comment-input{width:100%;box-sizing:border-box;background:#0f172acc;border:1px solid rgba(148,163,184,.25);border-radius:6px;color:#f8fafc;padding:10px 12px;font-family:inherit;font-size:.875rem;resize:vertical;min-height:72px}.feedback-comment-input:focus{border-color:#38bdf8;outline:none}.feedback-comment-input::placeholder{color:#64748b}.feedback-modal-error{color:#f87171;background:#f871711f;border:1px solid rgba(248,113,113,.35);border-radius:6px;padding:8px 12px;font-size:.8125rem;margin:0}.feedback-modal-actions{display:flex;justify-content:flex-end}.feedback-submit-btn{background:#2563eb;color:#fff;border:none;border-radius:6px;padding:8px 20px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.feedback-submit-btn:hover:not(:disabled){background:#1d4ed8}.feedback-submit-btn:disabled{opacity:.45;cursor:not-allowed}.feedback-modal-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 16px;gap:12px;text-align:center}.feedback-modal-confirmation-icon{font-size:2.75rem;color:#38bdf8;text-shadow:0 0 12px rgba(56,189,248,.6)}.feedback-modal-confirmation-text{font-size:1.125rem;font-weight:600;color:#f8fafc;margin:0}.feedback-dismiss-btn{margin-top:8px;background:#2563eb;color:#fff;border:none;border-radius:6px;padding:8px 24px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,transform .15s ease}.feedback-dismiss-btn:hover{background:#1d4ed8;transform:translateY(-1px)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffeb;background:radial-gradient(circle at top,rgba(34,197,94,.18),transparent 35%),linear-gradient(180deg,#0f172a,#020617);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}