.chord-select,.tuning-input,#scale-library-select,#tonic-note-select,.preset-select{font-family:var(--font-family);background-color:var(--secondary-color);color:var(--text-color);border:2px solid var(--secondary-color);padding:.3rem 2rem .3rem 1rem;border-radius:20px;font-size:.95rem;cursor:pointer;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .3s ease;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E1DD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .8rem center;background-size:.65em auto;height:36px;box-sizing:border-box;display:flex;align-items:center}[data-theme=light] .chord-select,[data-theme=light] .tuning-input,[data-theme=light] #scale-library-select,[data-theme=light] #tonic-note-select,[data-theme=light] .preset-select{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B263B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E)}.custom-select-trigger:not(.logic-mode-trigger):after{content:"";width:.8em;height:.8em;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E1DD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.5;flex-shrink:0;margin-left:.5rem}[data-theme=light] .custom-select-trigger:not(.logic-mode-trigger):after{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B263B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E)}.theme-eco .mini-handpan-svg.show-texture.material-black .handpan-body{fill:url(#grad-black)}.theme-eco .mini-handpan-svg.show-texture.material-metal .handpan-body{fill:url(#grad-metal)}.theme-eco .mini-handpan-svg.show-texture.material-walnut .handpan-body{fill:url(#grad-walnut)}.theme-eco .mini-handpan-svg.show-texture.material-beech .handpan-body{fill:url(#grad-beech)}.theme-eco .mini-handpan-svg.show-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.hands-mode-color .note-group.hand-split .note-hand-outline,.hands-mode-text .note-group.hand-split .note-hand-outline,.hands-mode-precise .note-group.hand-split .note-hand-outline,.partition-main-handpan.hands-mode-visible .note-group.hand-split .note-hand-outline{stroke:url(#splitHandGradient);opacity:1}.note-text-bg{fill:url(#noteTextBgGradient);pointer-events:none}.highlight-both{stroke:url(#grad-learn-both)!important;stroke-width:4px!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))!important;opacity:1!important}.mini-handpan-svg.show-texture .handpan-body{fill:url(#grad-neotone)}.mini-handpan-svg.show-texture.material-neotone .handpan-body{fill:url(#grad-neotone)}.mini-handpan-svg.show-texture.material-black .handpan-body{fill:url(#grad-black)}.mini-handpan-svg.show-texture.material-white .handpan-body{fill:url(#grad-white)}.mini-handpan-svg.show-texture.material-metal .handpan-body{fill:url(#grad-metal)}.mini-handpan-svg.show-texture.material-walnut .handpan-body{fill:url(#pattern-walnut)}.mini-handpan-svg.show-texture.material-beech .handpan-body{fill:url(#pattern-beech)}.mini-handpan-svg.show-texture.material-oak .handpan-body{fill:url(#pattern-oak)}.mini-handpan-svg.show-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.mini-handpan-svg.show-texture.material-metal-realistic .handpan-body{fill:url(#pattern-metal-realistic)}.mini-handpan-svg.show-texture.material-neotone-walnut .handpan-body{fill:url(#pattern-neotone-walnut)}.mini-handpan-svg.show-texture.material-metal-new .handpan-body{fill:url(#pattern-metal-new)}.mini-handpan-svg.show-texture.material-hetre-new .handpan-body{fill:url(#pattern-hetre-new)}.mini-handpan-svg.show-texture.material-noyer-new .handpan-body{fill:url(#pattern-noyer-new)}.theme-eco .partition-main-handpan.force-texture.material-neotone .handpan-body{fill:url(#grad-neotone)}.theme-eco .partition-main-handpan.force-texture.material-black .handpan-body{fill:url(#grad-black)}.theme-eco .partition-main-handpan.force-texture.material-metal .handpan-body{fill:url(#grad-metal)}.theme-eco .partition-main-handpan.force-texture.material-walnut .handpan-body{fill:url(#pattern-walnut)}.theme-eco .partition-main-handpan.force-texture.material-beech .handpan-body{fill:url(#pattern-beech)}.theme-eco .partition-main-handpan.force-texture.material-oak .handpan-body{fill:url(#pattern-oak)}.theme-eco .partition-main-handpan.force-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.theme-eco .partition-main-handpan.force-texture.material-metal-realistic .handpan-body{fill:url(#pattern-metal-realistic)}.theme-eco .partition-main-handpan.force-texture.material-neotone-walnut .handpan-body{fill:url(#pattern-neotone-walnut)}.theme-eco .partition-main-handpan.force-texture.material-metal-new .handpan-body{fill:url(#pattern-metal-new)}.theme-eco .partition-main-handpan.force-texture.material-hetre-new .handpan-body{fill:url(#pattern-hetre-new)}.theme-eco .partition-main-handpan.force-texture.material-noyer-new .handpan-body{fill:url(#pattern-noyer-new)}.theme-eco .mini-handpan-svg.show-texture .handpan-body{fill:url(#grad-neotone)}.tuto-pointer-arrow path{fill:none;stroke:#ef4444;stroke-width:3px;stroke-linecap:round;marker-end:url(#arrowhead-red)}.mobile-nav-bar,.mobile-fab,.mobile-menu-toggle-btn,.mobile-menu-dropdown{display:none}.scroll-to-top-btn{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0));width:44px;height:44px;border-radius:50%;background:var(--highlight-color, #22D3EE);color:#0d1b2a;border:none;box-shadow:0 4px 14px #00000059,0 0 0 1px #ffffff14;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px) scale(.9);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:800;touch-action:manipulation}.scroll-to-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.scroll-to-top-btn:hover{transform:translateY(-2px) scale(1.05)}.scroll-to-top-btn:active{transform:scale(.92)}[data-theme=light] .scroll-to-top-btn{background:#2563eb;color:#fff}@media(max-width:1023px){.workspace-grid{flex-direction:column!important;gap:.75rem!important;padding:.5rem!important}.main-column,#right-sidebar{width:100%!important;flex:none!important;max-width:100%!important}#handpan-container{width:75%!important;max-width:520px!important;margin:0 auto}#right-sidebar{position:relative;max-height:55vh;overflow-y:auto;overflow-x:hidden;border-top:2px solid var(--current-outline-color, #FFC80088);border-radius:16px 16px 0 0;padding:.6rem .8rem 1rem;background:var(--primary-color);scroll-behavior:smooth}#right-sidebar:before{content:"";display:block;width:44px;height:4px;background:var(--secondary-color, #1E3A56);border-radius:2px;margin:4px auto 8px;opacity:.6}#toolbox{padding:.4rem .6rem!important}.controls-header{gap:.4rem!important;flex-wrap:wrap!important}.main-navigation-bar{gap:.2rem!important}.toolbox-footer-tools{flex-wrap:wrap!important;gap:.4rem!important}#toolbox .tool-group{flex:1 1 240px;min-width:0}.chord-rows-wrapper,#chord-rows-wrapper{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px}.chord-rows-wrapper>.control-group,#chord-rows-wrapper>.control-group{scroll-snap-align:start;flex:0 0 auto}button,.tool-button,.modifier-btn,.play-chord-button,.show-path-button,.nav-tab,.segment-btn{min-height:40px;min-width:40px}.icon-btn{min-width:40px;min-height:40px}header h1{font-size:1.6rem!important;margin-block:.4rem!important}header .subtitle,header .byline{font-size:.8rem!important;margin-block:0!important}#tutorial-card{max-width:90vw!important;width:90vw!important}#tuto-content{font-size:.88rem!important;line-height:1.45!important}}@media(max-width:640px){#btn-fullscreen{display:none!important}header{padding:.4rem .4rem .2rem!important}header h1{font-size:1.05rem!important;margin:0!important;line-height:1.1!important}header .subtitle,header .byline,header .powered-by{display:none!important}.controls-header{flex-wrap:nowrap!important;align-items:center!important;gap:.4rem!important;padding:.3rem .4rem!important}.main-navigation-bar{flex:0 0 auto}.right-header-controls{flex:1 1 auto;justify-content:flex-end!important;gap:.3rem!important}.right-header-controls #btn-toggle-toolbox{padding:.4rem .55rem!important}.right-header-controls #btn-toggle-toolbox span:not(.toggle-icon){display:none!important}.theme-slider-wrapper,.header-left{display:none!important}#btn-launch-tutorial{padding:.4rem .55rem!important;font-size:1.1rem!important}.main-navigation-bar{position:relative;flex-wrap:nowrap;justify-content:flex-start;gap:0;flex:0 0 auto}.main-navigation-bar>.nav-tab{display:none!important}.mobile-menu-toggle-btn{display:inline-flex!important;align-items:center;gap:.55rem;background:#22d3ee14;border:1px solid rgba(34,211,238,.25);border-radius:14px;padding:.4rem .75rem;color:var(--text-color);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease;touch-action:manipulation}.mobile-menu-toggle-btn:active,.mobile-menu-toggle-btn[aria-expanded=true]{background:#22d3ee2e;border-color:#22d3ee73}.hamburger-icon{display:inline-flex;flex-direction:column;justify-content:space-between;width:18px;height:14px}.hamburger-icon span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .2s ease,opacity .15s ease}.mobile-menu-toggle-btn[aria-expanded=true] .hamburger-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}.mobile-menu-toggle-btn[aria-expanded=true] .hamburger-icon span:nth-child(2){opacity:0}.mobile-menu-toggle-btn[aria-expanded=true] .hamburger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.mobile-menu-current{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem}.mobile-menu-current-icon{font-size:1.05rem;line-height:1}.mobile-menu-current-label{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-menu-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:auto;min-width:180px;background:var(--primary-color, #0D1B2A);border:1px solid rgba(34,211,238,.35);border-radius:14px;box-shadow:0 12px 32px #00000073;padding:.35rem;z-index:700;flex-direction:column;gap:.15rem;animation:mobileMenuDropIn .16s ease-out}.mobile-menu-dropdown.open{display:flex!important}@keyframes mobileMenuDropIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.mobile-menu-item{display:flex;align-items:center;gap:.7rem;background:transparent;border:none;color:var(--text-color);padding:.65rem .8rem;border-radius:10px;font-family:inherit;font-size:.92rem;font-weight:500;text-align:left;cursor:pointer;transition:background .12s ease;min-height:44px;touch-action:manipulation}.mobile-menu-item:active,.mobile-menu-item:hover{background:#22d3ee1f}.mobile-menu-item.active{background:#22d3ee2e;color:var(--highlight-color, #22D3EE);font-weight:700}.mobile-menu-item .mmi-icon{font-size:1.25rem;line-height:1;flex-shrink:0;width:24px;text-align:center}[data-theme=light] .mobile-menu-dropdown{background:#fff;border-color:#2563eb4d;box-shadow:0 12px 32px #0000002e}[data-theme=light] .mobile-menu-toggle-btn{background:#2563eb14;border-color:#2563eb40;color:#1b263b}[data-theme=light] .mobile-menu-item.active{color:#2563eb;background:#2563eb1f}.right-header-controls #btn-language,.right-header-controls #btn-toggle-toolbox span:not(.toggle-icon){display:none!important}.right-header-controls{gap:6px!important}.workspace-grid{padding:.3rem!important;gap:.4rem!important}#handpan-container{width:70%!important;max-width:78vw!important;margin:0 auto}.model-toggle-aligned-right{gap:.3rem!important;padding:.25rem .5rem!important;font-size:.72rem!important}.model-toggle-label{font-size:.7rem!important;white-space:nowrap}.model-toggle-label sup{font-size:.55rem}.model-toggle-switch{transform:scale(.85)}#right-sidebar{position:fixed!important;bottom:0;left:0;right:0;z-index:500;max-height:75vh;background:var(--primary-color);border-radius:18px 18px 0 0;box-shadow:0 -6px 24px #0006;transform:translateY(calc(100% - 44px));transition:transform .25s cubic-bezier(.2,.8,.2,1);padding:0 .8rem 1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0));will-change:transform}#right-sidebar:before{content:"";display:block;width:50px;height:5px;background:var(--highlight-color, #22D3EE);border-radius:3px;margin:8px auto 6px;opacity:.7;cursor:grab}#right-sidebar.mobile-open{transform:translateY(0);overflow-y:auto;-webkit-overflow-scrolling:touch}#right-sidebar:not(.mobile-open):after{content:"↑ Panneau accords";display:block;text-align:center;font-size:.75rem;color:var(--text-color);opacity:.6;font-weight:600;margin-bottom:4px}.mobile-nav-bar{display:none!important}body{padding-bottom:env(safe-area-inset-bottom,0)}.toolbox-footer-tools{display:none}.toolbox-footer-tools:not(.collapsed){display:flex!important;flex-direction:column!important;gap:.5rem!important;padding:.5rem!important;max-height:60vh;overflow-y:auto}.play-chord-button,.show-path-button,.modifier-btn{min-width:44px;min-height:44px;padding:.4rem!important}.control-group{min-width:110px}.partition-modal-content{width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important}.partition-editor-body{flex-direction:column!important}.partition-settings{width:100%!important;max-width:100%!important;max-height:40vh!important;overflow-y:auto;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.1)}.partition-preview-container{width:100%!important;flex:1}.partition-editor-header{flex-wrap:wrap!important;gap:.4rem!important;padding:.5rem!important}.partition-editor-header .header-actions{flex-wrap:wrap!important;gap:.3rem!important;justify-content:center!important;flex:1 1 100%}.language-modal-content,.modal-content{width:95vw!important;max-width:95vw!important}#tutorial-card.visible{position:fixed!important;bottom:calc(10px + env(safe-area-inset-bottom,0))!important;left:50%!important;top:auto!important;transform:translate(-50%)!important;width:92vw!important;max-width:92vw!important;max-height:60vh!important;overflow-y:auto!important}#tutorial-card.arrow-top:after,#tutorial-card.arrow-bottom:after,#tutorial-card.arrow-left:after,#tutorial-card.arrow-right:after{display:none!important}#tutorial-spotlight{box-shadow:0 0 0 9999px #0006!important}.panel-title,.group-title{font-size:.85rem!important}.control-group-label{font-size:.78rem!important}}@media(max-width:900px)and (orientation:landscape)and (max-height:500px){header{display:none!important}.workspace-grid{flex-direction:row!important;gap:.4rem!important;padding:.3rem!important}.main-column{width:55%!important;max-width:55%!important}#right-sidebar{position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;max-height:100vh!important;width:45%!important;flex:1!important;transform:none!important;border-radius:12px;box-shadow:none}#right-sidebar:before,#right-sidebar:after{display:none!important}#handpan-container{width:90%!important;max-width:100%!important}.mobile-nav-bar{display:none!important}body{padding-bottom:0}#toolbox .toolbox-footer-tools{display:none!important}}@media(max-width:380px){.nav-tab{padding:.3rem .4rem!important;font-size:.7rem!important}.mobile-nav-bar button{font-size:.62rem}.mobile-nav-bar button .icon{font-size:1.2rem}header h1{font-size:.95rem!important}}@media(hover:none)and (pointer:coarse){.control-group .chord-modifiers-wrapper{opacity:1!important;visibility:visible!important;transform:none!important}button,.tool-button,a{touch-action:manipulation}button:active,.tool-button:active,.nav-tab:active{opacity:.7}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:fullscreen .workspace-grid,body.app-fullscreen .workspace-grid{height:calc(100vh - 90px);overflow:auto}:fullscreen header,body.app-fullscreen header{padding:.3rem!important}:fullscreen header h1,body.app-fullscreen header h1{font-size:1.4rem!important}:root{--bg-color: #0D1B2A;--primary-color: #1B263B;--secondary-color: #415A77;--highlight-color: #22D3EE;--text-color: #E0E1DD;--font-family: "Poppins", sans-serif;--note-default-fill: #415a7780;--note-default-stroke: #0D1B2A;--note-text-color: #ffffff;--shadow-light: rgba(224, 225, 221, .05);--shadow-dark: rgba(0, 0, 0, .7);--chakra-c: #DC2626;--chakra-cs: #EF4444;--chakra-d: #EA580C;--chakra-ds: #F97316;--chakra-e: #EAB308;--chakra-f: #16A34A;--chakra-fs: #22C55E;--chakra-g: #0EA5E9;--chakra-gs: #38BDF8;--chakra-a: #0806FF;--chakra-as: #5050FF;--chakra-b: #EB00FF;--chakra-bg-c: rgba(220, 38, 38, .6);--chakra-bg-cs: rgba(239, 68, 68, .3);--chakra-bg-d: rgba(234, 88, 12, .6);--chakra-bg-ds: rgba(249, 115, 22, .3);--chakra-bg-e: rgba(234, 179, 8, .6);--chakra-bg-f: rgba(22, 163, 74, .6);--chakra-bg-fs: rgba(34, 197, 94, .3);--chakra-bg-g: rgba(14, 165, 233, .6);--chakra-bg-gs: rgba(56, 189, 248, .3);--chakra-bg-a: rgba(8, 6, 255, .6);--chakra-bg-as: rgba(80, 80, 255, .3);--chakra-bg-b: rgba(235, 0, 255, .6);--chakra-grad-c: linear-gradient(to top, rgba(220, 38, 38, .4), rgba(220, 38, 38, .9));--chakra-grad-cs: linear-gradient(to top, rgba(239, 68, 68, .3), rgba(239, 68, 68, .7));--chakra-grad-d: linear-gradient(to top, rgba(234, 88, 12, .4), rgba(234, 88, 12, .9));--chakra-grad-ds: linear-gradient(to top, rgba(249, 115, 22, .3), rgba(249, 115, 22, .7));--chakra-grad-e: linear-gradient(to top, rgba(234, 179, 8, .4), rgba(234, 179, 8, .9));--chakra-grad-f: linear-gradient(to top, rgba(22, 163, 74, .4), rgba(22, 163, 74, .9));--chakra-grad-fs: linear-gradient(to top, rgba(34, 197, 94, .3), rgba(34, 197, 94, .7));--chakra-grad-g: linear-gradient(to top, rgba(14, 165, 233, .4), rgba(14, 165, 233, .9));--chakra-grad-gs: linear-gradient(to top, rgba(56, 189, 248, .3), rgba(56, 189, 248, .7));--chakra-grad-a: linear-gradient(to top, rgba(8, 6, 255, .4), rgba(8, 6, 255, .9));--chakra-grad-as: linear-gradient(to top, rgba(80, 80, 255, .3), rgba(80, 80, 255, .7));--chakra-grad-b: linear-gradient(to top, rgba(235, 0, 255, .4), rgba(235, 0, 255, .9));--hand-color-right: #EF4444;--hand-color-left: #3B82F6;--gold-color: #FFD700;--gold-gradient: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);--current-outline-color: #FFFFFF}body.outline-white{--current-outline-color: #FFFFFF}body.outline-black{--current-outline-color: #000000}body.outline-gold{--current-outline-color: var(--gold-color)}[data-theme=light]{--bg-color: #F0F2F5;--primary-color: #FFFFFF;--secondary-color: #E4E6EB;--highlight-color: #5ccb5f;--text-color: #1B263B;--shadow-light: rgba(0, 0, 0, .05);--shadow-dark: rgba(0, 0, 0, .1);--note-default-fill: #E4E6EB;--note-default-stroke: #CCCCCC}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;transition:background-color .3s ease,color .3s ease}html,body{height:100%;margin:0;padding:0}.optimizer-btn{margin:10px;padding:8px 16px;background-color:var(--highlight-color);color:#fff;border:none;border-radius:4px;cursor:pointer}.no-optimization-found{animation:flash-red .5s ease-out}@keyframes flash-red{0%{background-color:transparent}50%{background-color:#ef44444d}to{background-color:transparent}}#app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100vh;padding:.25rem 1rem 1rem;text-align:center;transition:justify-content .3s ease,padding .3s ease}header{margin-top:0;padding-top:0}header h1{font-size:clamp(2.2rem,6vw,3rem);color:var(--text-color);margin-top:0;margin-bottom:.15rem;font-weight:600;line-height:1.05}header .byline{color:var(--highlight-color);margin-top:0;margin-bottom:.75rem;font-style:italic;transition:opacity .5s ease}header h2{font-size:clamp(1.8rem,5vw,2.5rem);color:var(--text-color);margin-bottom:.5rem;font-weight:400}header p{font-size:clamp(.9rem,2.5vw,1.1rem);margin-bottom:2rem}main{width:100%;max-width:1500px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex:1}.content-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;height:100%}.workspace-grid{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative;z-index:150}.inversion-lines{position:absolute;bottom:2px;left:50%;transform:translate(-50%);display:flex;gap:4px;height:2px}.inversion-line{width:12px;height:2px;background-color:#fffc;border-radius:1px}[data-theme=light] .inversion-line{background-color:#000c}.inversion-hover-btn{background:transparent;border:.5px solid var(--current-outline-color);color:var(--current-outline-color);border-radius:12px;padding:4px 8px;font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;white-space:nowrap;width:100%;box-sizing:border-box}.inversion-hover-btn:hover{background-color:var(--current-outline-color);color:var(--primary-color)}.inversion-dropdown-menu{position:absolute;background:rgba(var(--surface-color-rgb),.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.5px solid var(--current-outline-color);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:2px;z-index:1000;box-shadow:0 4px 12px #0003;min-width:150px;color:var(--current-outline-color)}.inversion-dropdown-item{background:transparent;border:none;color:var(--text-color);padding:6px 12px;text-align:left;font-size:.8rem;cursor:pointer;border-radius:4px;transition:background-color .2s}.inversion-dropdown-item:hover{background:#ffd70033}.inversion-dropdown-item.active{color:var(--current-outline-color);font-weight:700}#right-sidebar{position:relative;transition:width .3s ease,min-width .3s ease,transform .3s ease,flex-basis .3s ease;border-left:1px solid transparent;flex-basis:300px;flex-shrink:0;height:100%;display:flex;flex-direction:column}main #right-sidebar.collapsed{min-width:16px!important;width:16px!important;flex:0 0 16px!important;padding:0!important;border:.5px solid var(--current-outline-color)!important;background:#ffffff0d!important;margin-left:2px!important;border-radius:4px!important;height:100%!important}#right-sidebar.collapsed>*:not(.sidebar-toggle-btn){display:none!important}.sidebar-toggle-btn{position:absolute;left:-24px;top:1.2rem;width:24px;height:60px;background:transparent;border:1px solid var(--current-outline-color);border-right:none;border-radius:12px 0 0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;color:var(--current-outline-color);transition:background-color .2s,color .2s;box-shadow:-4px 0 10px #0000001a}.sidebar-toggle-btn:hover{background:var(--current-outline-color);color:var(--primary-color)}.sidebar-toggle-btn svg{transform:rotate(180deg);transition:transform .3s ease}#right-sidebar.collapsed .sidebar-toggle-btn svg{transform:rotate(0)}#right-sidebar.collapsed .sidebar-toggle-btn{border-color:var(--current-outline-color);color:var(--current-outline-color)}#right-sidebar.collapsed .sidebar-toggle-btn:hover{background:var(--current-outline-color);color:var(--primary-color)}.main-column{display:flex;flex-direction:column;gap:0;flex:2;width:100%;min-width:0;justify-content:flex-start;position:relative;transition:flex .3s ease,width .3s ease;padding-right:16px}#handpan-container{position:relative;z-index:1;transition:margin-top .3s cubic-bezier(.4,0,.2,1);width:65%;max-width:480px;margin:0 auto}#handpan-container.palette-off{margin-top:-1rem}#handpan-container.palette-compact{margin-top:60px}#handpan-container.palette-full{margin-top:0}.sidebar{flex:1;display:flex;flex-direction:column;gap:1.5rem;width:100%;justify-content:flex-start}footer{margin-top:auto;padding-top:6rem;font-size:.9rem;opacity:.7;transition:opacity .5s ease}@media(min-width:1024px){#app{padding:2rem 1rem}.content-wrapper{flex-direction:column;align-items:center}.workspace-grid{flex-direction:row;align-items:stretch}.sidebar{width:auto;max-width:400px}}@media(max-width:1023px){#app{padding-left:0;padding-right:0}main{max-width:none}header,.sidebar,footer{padding-left:1rem;padding-right:1rem}}@media print{:root{--bg-color: #ffffff;--text-color: #000000;--primary-color: #ffffff;--secondary-color: #cccccc}body{background-color:#fff;color:#000}#app{padding:0;display:block;height:auto}.toolbox-footer-tools,#language-selector,.mode-switcher,#toolbox,#image-exporter,.modal-overlay{display:none!important}.content-wrapper{display:block;width:100%}.workspace-grid{display:flex;flex-direction:column;align-items:center;width:100%;gap:2rem}.main-column{width:100%;flex:none;display:block;margin-bottom:2rem}#handpan-container{width:100%;max-width:600px;margin:0 auto;break-inside:avoid}body.printing-no-footer footer{display:none!important}.sidebar{display:none;width:100%;max-width:800px;break-inside:avoid}body.printing-chords .sidebar{display:block!important}body.printing-chords .sidebar .controls{box-shadow:none;border:1px solid #ddd;background-color:#fff}body.printing-chords #scale-library-panel,body.printing-chords #song-manager,body.printing-chords .header-actions,body.printing-chords .chord-actions-group,body.printing-chords .drag-handle,body.printing-chords .degree-checkbox,body.printing-chords .chord-logic-actions{display:none!important}body.printing-chords #chords-container{display:flex!important;flex-wrap:wrap}body.printing-chords .control-group{border-bottom:1px solid #eee;page-break-inside:avoid}body.printing-chords .chord-select{border:1px solid #000;background-color:#fff;color:#000;appearance:none;background-image:none;padding-right:.5rem}body.printing-numbers .note-number-text{opacity:1!important;fill:#000!important}}#btn-optimize-layout{position:relative;top:-50px;z-index:10}.app-hidden{visibility:hidden;opacity:0;pointer-events:none}body.presentation-mode ::-webkit-scrollbar{display:none!important}body.presentation-mode .help-trigger-small,body.presentation-mode #handpan-resize-handle,body.presentation-mode footer,body.presentation-mode .byline,body.presentation-mode .theme-slider-wrapper,body.presentation-mode #btn-launch-tutorial,body.presentation-mode #texture-editor-overlay{opacity:0!important;pointer-events:none!important;transition:opacity .5s ease}body.presentation-mode #app{justify-content:center;height:100vh;padding-top:0;padding-bottom:0}body.presentation-mode header{margin-top:0}div#app:nth-of-type(1)>main:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(2)>div#right-sidebar:nth-of-type(2)>div#chords-container:nth-of-type(5){border:.5px solid var(--current-outline-color)!important}div#app:nth-of-type(1)>main:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(2)>div#right-sidebar:nth-of-type(2)>div#scale-library-panel:nth-of-type(4){border:.5px solid var(--current-outline-color)!important}div#app:nth-of-type(1)>main:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(2)>div#right-sidebar:nth-of-type(2)>div#midi-settings-panel:nth-of-type(1){border:.5px solid var(--current-outline-color)!important}.mode-creation #song-manager{display:none!important}#right-sidebar.mode-library #scale-library-panel{border-bottom:none!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;margin-bottom:0!important;padding-bottom:.5rem!important}#right-sidebar.mode-library #chords-container{border-top:none!important;border-top-left-radius:0!important;border-top-right-radius:0!important;margin-top:0!important;padding-top:.5rem!important;box-shadow:inset 0 1px #ffffff14!important}.chord-select,.tuning-input,#scale-library-select,#tonic-note-select,.preset-select{font-family:var(--font-family);background-color:var(--secondary-color);color:var(--text-color);border:2px solid var(--secondary-color);padding:.3rem 2rem .3rem 1rem;border-radius:20px;font-size:.95rem;cursor:pointer;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .3s ease;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E1DD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .8rem center;background-size:.65em auto;height:36px;box-sizing:border-box;display:flex;align-items:center}.mode-library .chord-type-select:not(#scale-library-select):not(#tonic-note-select){cursor:default;pointer-events:none;font-size:.75rem;background-image:none;padding-right:1rem}.mode-library #scale-library-panel,.mode-library #chords-container{display:flex!important;flex-direction:column;overflow:visible!important}.mode-library #scale-library-panel{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem;margin-bottom:1rem}[data-theme=light] .chord-select,[data-theme=light] .tuning-input,[data-theme=light] #scale-library-select,[data-theme=light] #tonic-note-select,[data-theme=light] .preset-select{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B263B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E)}.tuning-input{text-align:center}.tuning-input::-webkit-outer-spin-button,.tuning-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tuning-input[type=number]{-moz-appearance:textfield}.chromakeys-title-wrapper{display:flex;align-items:center;gap:.8rem;flex:1;min-width:0}.title-icon{font-size:1.8rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.title-text-group{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.title-main{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;opacity:.8;font-weight:600}.title-rainbow{font-size:1.4rem;font-weight:800;font-family:Poppins,sans-serif;letter-spacing:.5px;background:linear-gradient(to right,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.enharmonic-toggle-container{display:flex;background-color:var(--secondary-color);border-radius:20px;padding:1px;border:1px solid var(--highlight-color);height:32px;box-sizing:border-box;align-items:center;margin-left:.2rem;flex-shrink:0}.enharmonic-btn{background:transparent;border:none;color:var(--text-color);padding:0 6px;height:100%;border-radius:18px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s;min-width:24px}.enharmonic-btn:hover{background-color:#ffffff1a}.enharmonic-btn.active{background-color:var(--highlight-color);color:var(--primary-color)}.magic-wand-icon{width:16px;height:16px}.tooltip-container{position:relative;display:inline-block}.info-circle-btn{width:24px;height:24px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;font-weight:700;font-size:.85rem;cursor:help;display:flex;align-items:center;justify-content:center;transition:all .2s}.info-circle-btn:hover{background:#ffffff1a;color:#fff;border-color:#fff}[data-theme=light] .info-circle-btn{border-color:#0003;color:#00000080}[data-theme=light] .info-circle-btn:hover{color:#000;border-color:#000}.tooltip-content{visibility:hidden;width:220px;background-color:var(--primary-color);color:var(--text-color);text-align:left;border-radius:12px;padding:1rem;position:absolute;z-index:100;top:135%;right:0;opacity:0;transition:opacity .3s,transform .3s;border:1px solid var(--highlight-color);box-shadow:0 10px 30px #00000080;font-size:.8rem;line-height:1.4;transform:translateY(-10px);pointer-events:none}.tooltip-container:hover .tooltip-content{visibility:visible;opacity:1;transform:translateY(0)}.app-tooltip{position:fixed;top:-9999px;left:-9999px;z-index:2147483000;max-width:270px;background:var(--primary-color, #0D1B2A);color:var(--text-color, #E6EBF2);border:1px solid var(--highlight-color, #22D3EE);border-radius:10px;padding:.55rem .7rem;font-family:var(--font-family, "Poppins", sans-serif);font-size:.78rem;font-weight:500;line-height:1.45;text-align:left;box-shadow:0 10px 30px #00000080;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease}.app-tooltip.visible{opacity:1;transform:translateY(0)}.app-tooltip:after{content:"";position:absolute;left:var(--tip-arrow-x, 50%);width:9px;height:9px;background:var(--primary-color, #0D1B2A);border:1px solid var(--highlight-color, #22D3EE);transform:translate(-50%) rotate(45deg)}.app-tooltip[data-placement=top]:after{bottom:-5px;border-top:none;border-left:none}.app-tooltip[data-placement=bottom]:after{top:-5px;border-bottom:none;border-right:none}.app-tooltip svg{vertical-align:-2px}[data-theme=light] .app-tooltip{background:#fff;color:#1b263b}[data-theme=light] .app-tooltip:after{background:#fff}.theme-slider-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}.theme-icon-label{color:gold!important;display:flex;align-items:center;justify-content:center}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--secondary-color);transition:.4s;border-radius:24px;border:1px solid var(--highlight-color)}.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--highlight-color)}input:focus+.slider{box-shadow:0 0 1px var(--highlight-color)}input:checked+.slider:before{transform:translate(20px)}#chords-container .chord-select{display:none!important}.custom-select-trigger{display:none;background-color:var(--secondary-color);color:var(--text-color);border:2px solid var(--secondary-color);padding:.3rem 1rem;border-radius:20px;font-size:.95rem;cursor:pointer;width:100%;flex-direction:row;justify-content:space-between;align-items:center;position:relative;font-weight:500;min-height:auto;text-align:left;transition:background-color .2s,border-color .2s;height:36px;box-sizing:border-box;white-space:nowrap;overflow:visible;text-overflow:ellipsis}.custom-select-trigger>div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.custom-select-trigger:not(.logic-mode-trigger):after{content:"";width:.8em;height:.8em;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E1DD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.5;flex-shrink:0;margin-left:.5rem}[data-theme=light] .custom-select-trigger:not(.logic-mode-trigger):after{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B263B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E)}.custom-dropdown-menu{display:none;position:absolute;top:110%;left:-20%;width:140%;max-height:400px;overflow-y:auto;background:#1b263bcc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid var(--highlight-color);border-radius:16px;z-index:200;box-shadow:0 10px 40px #000000e6;padding:.8rem;color:var(--highlight-color)}.custom-menu-none{width:100%;text-align:left;background:#ffffff1a;border-radius:8px;color:var(--text-color);cursor:pointer;font-weight:700;font-size:.7rem;margin-bottom:.5rem;border:1px dashed var(--secondary-color);padding:.4rem .4rem .4rem 1rem}.logic-col-info .item-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;flex-shrink:0}.chord-selection-area{display:flex;flex-direction:column;flex:1;gap:.2rem;min-width:0;position:relative}.inversion-menu-container{position:absolute;top:100%;left:50%;transform:translate(-50%);display:none;z-index:20;padding-top:4px}.chord-row-main:hover .inversion-menu-container{display:flex}.mode-logic .inversion-menu-container{display:none!important}.inversion-menu{display:flex;gap:2px}.chord-modifiers{display:flex;gap:.2rem;padding-left:.5rem}.modifier-btn{background:transparent;border:none;color:#ffffff80;border-radius:8px;padding:.2rem .4rem;font-size:clamp(.55rem,8cqw,.75rem);cursor:pointer;transition:all .2s;font-weight:600}.modifier-btn.active{background-color:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);font-weight:600}.modifier-btn.active-seventh{background-color:#3b82f6;color:#fff;border-color:#3b82f6;font-weight:600}#appearance-help-overlay,#chords-help-overlay{position:absolute;top:20px;left:50%;transform:translate(-50%);width:90%;max-width:600px;max-height:85vh;overflow-y:auto;background-color:#0d1b2afa;backdrop-filter:blur(10px);border:1px solid #EF4444;border-radius:16px;padding:1.5rem;z-index:500;box-shadow:0 20px 50px #000c;display:flex;flex-direction:column;animation:fadeIn .3s ease-out}#appearance-help-overlay.hidden,#chords-help-overlay.hidden{display:none}[data-theme=light] #appearance-help-overlay,[data-theme=light] #chords-help-overlay{background-color:#fffffffa;border-color:#ef4444;color:#000}.help-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.3rem}.help-header h3{margin:0;color:#ef4444;font-size:1.2rem}.close-help-btn{background:none;border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;padding:0 .5rem}.close-help-btn:hover{color:#ef4444}.help-section-title{font-size:.85rem;text-transform:uppercase;color:var(--highlight-color);margin-bottom:.4rem;font-weight:700;letter-spacing:1px}.enharmonic-toggle-wrapper.alterations-corner-toggle{position:absolute;top:8px;right:12px;z-index:2}.tonic-flower{--flower-size: 88px;--flower-petal-radius: 32px;--flower-petal-size: 36px;--flower-trigger-size: 60px;position:relative;width:var(--flower-trigger-size);height:var(--flower-trigger-size);margin:0 auto;overflow:visible}#tonic-flower-backdrop{position:fixed;inset:0;z-index:999998;background:transparent;opacity:0;pointer-events:none}#tonic-flower-backdrop.visible{opacity:1;pointer-events:auto}.tonic-flower[data-state=open]:after{content:"";position:absolute;width:calc(var(--flower-size, 88px) * 2 + var(--flower-petal-size, 36px) + 30px);height:calc(var(--flower-size, 88px) * 2 + var(--flower-petal-size, 36px) + 30px);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%,#000000d9 30%,#000000b3 60%,#0000);backdrop-filter:blur(8px) saturate(.8);-webkit-backdrop-filter:blur(8px) saturate(.8);box-shadow:0 0 40px #0009,inset 0 0 0 1px #d4b06233;z-index:-1;pointer-events:none;animation:tonicHaloIn .2s ease-out}@keyframes tonicHaloIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tonic-flower-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--flower-trigger-size);height:var(--flower-trigger-size);border-radius:50%;background:var(--secondary-color, #1E3A56);border:2px solid var(--highlight-color, #22D3EE);color:var(--text-color, #fff);font-family:inherit;font-size:1.05rem;font-weight:700;padding:4px;box-sizing:border-box;cursor:pointer;z-index:3;transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 0 #22d3ee00;touch-action:manipulation}.tonic-flower[data-state=closed] .tonic-flower-center[data-has-tonic=true],.tonic-flower-center[data-has-tonic=true]{background:var(--current-tonic-color, var(--secondary-color));border-color:#ffffffd9;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}.tonic-flower-center:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 0 4px #22d3ee2e}.tonic-flower[data-state=open] .tonic-flower-center{box-shadow:0 0 0 6px #22d3ee47}.tonic-flower-current{pointer-events:none;font-variant-numeric:tabular-nums;font-size:inherit;line-height:1}.tonic-flower-center:not([data-has-tonic=true]) .tonic-flower-current{font-size:.78rem;letter-spacing:0}.tonic-flower-petals{position:absolute;inset:0;pointer-events:none;overflow:visible}.tonic-flower[data-state=open] .tonic-flower-petals{pointer-events:auto}.tonic-flower-petal{position:absolute;top:50%;left:50%;width:var(--flower-petal-size);height:var(--flower-petal-size);margin:calc(var(--flower-petal-size) / -2) 0 0 calc(var(--flower-petal-size) / -2);border-radius:50%;background:var(--petal-color, #888);border:2px solid rgba(255,255,255,.85);color:#fff;font-family:inherit;font-weight:700;font-size:.78rem;cursor:pointer;box-shadow:0 2px 6px #0006;transform:translate(0) scale(0);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease,box-shadow .15s ease;will-change:transform,opacity;text-shadow:0 1px 2px rgba(0,0,0,.6);user-select:none;touch-action:manipulation}.tonic-flower[data-state=open] .tonic-flower-petal{transform:rotate(var(--angle)) translateY(calc(var(--flower-size) * -1)) rotate(calc(var(--angle) * -1));opacity:1}.tonic-flower-petal:hover{transform:rotate(var(--angle)) translateY(calc(var(--flower-size) * -1)) rotate(calc(var(--angle) * -1)) scale(1.18);box-shadow:0 4px 14px #00000080;z-index:4}.tonic-flower-petal.active{box-shadow:0 0 0 3px #fff,0 0 14px var(--petal-color, #fff);z-index:4}.tonic-flower-petal.active:after{content:"✓";position:absolute;top:-4px;right:-4px;background:#fff;color:var(--petal-color, #000);border-radius:50%;width:14px;height:14px;font-size:9px;line-height:14px;text-align:center;box-shadow:0 0 4px #00000080}.tonic-flower[data-state=open] .tonic-flower-petal{transition-delay:calc(var(--petal-index, 0) * 18ms)}[data-theme=light] .tonic-flower-center{background:#fff;color:#1b263b;border-color:#2563eb}[data-theme=light] .tonic-flower-center[data-has-tonic=true]{background:var(--current-tonic-color, #2563EB);color:#fff;border-color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.4)}[data-theme=light] .tonic-flower-petal{border-color:#0009;color:#fff}@media(max-width:640px){.tonic-flower{--flower-size: 78px;--flower-petal-size: 32px;--flower-trigger-size: 56px}.tonic-flower-petal{font-size:.72rem}}#tonic-note-select{text-align:center;text-align-last:center}.option-root-C{background-color:var(--chakra-bg-c);color:#fff}.option-root-Cs{background-color:var(--chakra-bg-cs);color:#fff}.option-root-D{background-color:var(--chakra-bg-d);color:#fff}.option-root-Ds{background-color:var(--chakra-bg-ds);color:#fff}.option-root-E{background-color:var(--chakra-bg-e);color:#fff}.option-root-F{background-color:var(--chakra-bg-f);color:#fff}.option-root-Fs{background-color:var(--chakra-bg-fs);color:#fff}.option-root-G{background-color:var(--chakra-bg-g);color:#fff}.option-root-Gs{background-color:var(--chakra-bg-gs);color:#fff}.option-root-A{background-color:var(--chakra-bg-a);color:#fff}.option-root-As{background-color:var(--chakra-bg-as);color:#fff}.option-root-B{background-color:var(--chakra-bg-b);color:#fff}#btn-display-off.active{background-color:#ef4444;color:#fff}.vertical-separator{width:1px;height:24px;background-color:var(--secondary-color);margin:0 .5rem}.display-mode-switcher .segment-btn{padding:0 .8rem;font-size:.75rem}#btn-language{font-size:1.2rem;display:flex;align-items:center;justify-content:center}#btn-fullscreen{display:flex;align-items:center;justify-content:center;color:var(--text-color, #fff);transition:transform .15s ease,background .15s ease}#btn-fullscreen:hover{transform:scale(1.05);background:#22d3ee26}#btn-fullscreen:active{transform:scale(.95)}#btn-fullscreen svg{pointer-events:none}:fullscreen body,body.app-fullscreen{background:#000!important}:fullscreen #app,body.app-fullscreen #app{width:100vw;height:100vh;overflow:auto}.language-modal-content{background-color:var(--primary-color);border:1px solid var(--highlight-color);border-radius:16px;padding:1.5rem;width:90%;max-width:400px;box-shadow:0 20px 50px #00000080;position:relative;display:flex;flex-direction:column;gap:1rem;animation:modalPop .15s ease-out}@keyframes modalPop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=light] .language-modal-content{background-color:#fff;color:#000;border-color:#ccc}.language-options{display:flex;flex-direction:column;gap:.8rem}.lang-option-btn{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:var(--secondary-color);border:1px solid transparent;border-radius:12px;color:var(--text-color);cursor:pointer;transition:all .2s ease;font-size:1.1rem;font-weight:500;text-align:left}[data-theme=light] .lang-option-btn{background-color:#f0f0f0;color:#333}.lang-option-btn:hover{background-color:var(--highlight-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.lang-flag{font-size:1.8rem;line-height:1}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem}[data-theme=light] .modal-header{border-bottom-color:#0000001a}.modal-header h2{margin:0;font-size:1.2rem;color:var(--highlight-color)}.close-modal-btn{background:none;border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;opacity:.7;transition:opacity .2s}.close-modal-btn:hover{opacity:1;color:#ef4444}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}.anchor-required-overlay{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(3px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .25s ease-out;cursor:pointer}.anchor-required-modal{background:linear-gradient(180deg,#2a1a1a,#1a0f0f);color:#fff;padding:1.5rem 2rem;border-radius:16px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #ef444440,0 0 0 2px #ef444480,inset 0 1px #ffffff1a;cursor:default;animation:anchorModalPop .35s cubic-bezier(.34,1.56,.64,1)}@keyframes anchorModalPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.anchor-required-modal .anchor-icon{font-size:2.5rem;margin-bottom:.5rem;display:block;animation:anchorIconBounce 1.2s ease-in-out infinite}@keyframes anchorIconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.anchor-required-modal h3{font-size:1.4rem;margin:0 0 .5rem;color:#ffd9d9;font-weight:700}.anchor-required-modal p{font-size:1rem;margin:0 0 .75rem;color:#e5e5e5;line-height:1.45}.anchor-required-modal .anchor-hint{font-size:.85rem;color:#b8b8b8;font-style:italic;margin-top:.75rem;opacity:.85}.anchor-arrow{position:fixed;z-index:10000;pointer-events:none;width:80px;height:80px;animation:anchorArrowPulse 1s ease-in-out infinite}@keyframes anchorArrowPulse{0%,to{transform:scale(1) translate(0)}50%{transform:scale(1.15) translateY(-4px)}}.anchor-arrow svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(239,68,68,.85)) drop-shadow(0 0 14px rgba(239,68,68,.55))}.tonic-flower.anchor-target-pulse{animation:anchorTargetPulse 1.4s ease-in-out infinite;border-radius:50%}@keyframes anchorTargetPulse{0%,to{box-shadow:0 0 #ef4444e6,0 0 0 4px #ef444400}50%{box-shadow:0 0 0 8px #ef444400,0 0 0 4px #ef4444e6}}.scale-preview-comet{position:fixed;top:0;left:0;width:18px;height:18px;pointer-events:none;z-index:5000;opacity:0;transition:opacity .3s ease,transform .3s linear;will-change:transform,opacity}.scale-preview-comet.active{opacity:1}.scale-preview-comet-head{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0%,#FFF5C0 25%,#FFD700 50%,rgba(255,200,0,.5) 75%,transparent 100%);box-shadow:0 0 8px #fff,0 0 16px #ffeb80,0 0 24px #ffc800b3,0 0 36px #ffb40066;animation:cometHeadPulse .5s ease-in-out infinite alternate}@keyframes cometHeadPulse{0%{transform:scale(.85)}to{transform:scale(1.15)}}.scale-preview-comet-trail{position:fixed;top:0;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;z-index:4999;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,235,128,.7) 40%,rgba(255,200,0,.4) 70%,transparent 100%);box-shadow:0 0 8px #fff9,0 0 16px #ffc80066;animation:cometTrailFade .7s ease-out forwards;will-change:transform,opacity}@keyframes cometTrailFade{0%{opacity:.95;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}to{opacity:0;transform:scale(.3)}}.note-group.scale-preview-next-note{filter:drop-shadow(0 0 6px #FFEB80) drop-shadow(0 0 12px rgba(255,215,0,.85)) drop-shadow(0 0 20px rgba(255,200,0,.45));transition:filter .18s ease-in}#handpan-container.scale-preview-focus-active .note-group{opacity:.95;filter:saturate(0);transition:opacity .25s ease,filter .25s ease}#handpan-container.scale-preview-focus-active .note-group.scale-preview-current-note{opacity:1;filter:saturate(1) brightness(1.1)}#handpan-container.scale-preview-focus-active .note-group.scale-preview-next-note{opacity:1;filter:saturate(1) drop-shadow(0 0 6px #FFEB80) drop-shadow(0 0 12px rgba(255,215,0,.85)) drop-shadow(0 0 20px rgba(255,200,0,.45))}.btn-audio-preview.scale-preview-playing{background:linear-gradient(180deg,#ef444440,#dc262633)!important;color:#ff6b6b!important;border-color:#ef444480!important;box-shadow:inset 0 0 0 1px #ef44444d,0 0 12px #ef444466!important;animation:scalePreviewPlayingPulse 1.6s ease-in-out infinite}.btn-audio-preview.scale-preview-playing .btn-text{color:#ff6b6b;font-weight:700}@keyframes scalePreviewPlayingPulse{0%,to{box-shadow:inset 0 0 0 1px #ef44444d,0 0 12px #ef444466}50%{box-shadow:inset 0 0 0 1px #ef444480,0 0 20px #ef4444a6}}.save-scale-modal-content,.library-modal-content,.set-detail-modal-content,.scale-picker-modal-content,.import-tonic-modal-content{background:linear-gradient(180deg,#1a1f2a,#131722);border:1px solid var(--highlight-color);border-radius:16px;padding:1.2rem 1.4rem;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0009;color:var(--text-color);position:relative;display:flex;flex-direction:column}.save-scale-modal-content,.import-tonic-modal-content{width:90%;max-width:460px}.library-modal-content{width:92%;max-width:800px}.set-detail-modal-content{width:90%;max-width:600px}.scale-picker-modal-content{width:90%;max-width:520px}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.6rem;margin-bottom:.8rem}.modal-header h2{font-size:1.2rem;margin:0;color:var(--text-color);font-weight:700}.save-modal-label{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem;font-size:.85rem;font-weight:500;opacity:.9}.save-modal-label input,.save-modal-label textarea,.save-modal-label select{padding:.5rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#00000059;color:var(--text-color);font-family:inherit;font-size:.9rem;resize:vertical}.save-modal-label input:focus,.save-modal-label textarea:focus,.save-modal-label select:focus{outline:none;border-color:var(--highlight-color);box-shadow:0 0 0 2px #22d3ee33}.save-modal-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}.library-modal-tabs.library-modal-tabs-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.2rem;border-bottom:none;padding:.4rem 0}.library-modal-tabs-modern .library-tab-btn{background:#ffffff06;border:1px solid rgba(255,255,255,.08);color:var(--text-color);padding:1.1rem .8rem;cursor:pointer;border-radius:14px;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:.75;position:relative;overflow:hidden}.library-modal-tabs-modern .library-tab-btn:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top,rgba(212,176,98,0),transparent 70%);transition:background .3s ease;pointer-events:none}.library-modal-tabs-modern .library-tab-btn:hover{opacity:1;background:#ffffff0d;border-color:#d4b0624d;transform:translateY(-1px)}.library-modal-tabs-modern .library-tab-btn:hover:before{background:radial-gradient(circle at top,rgba(212,176,98,.12),transparent 70%)}.library-modal-tabs-modern .library-tab-btn.active{opacity:1;background:linear-gradient(180deg,#d4b0622e,#d4b0620f);border-color:var(--highlight-color);color:var(--highlight-color);box-shadow:0 4px 16px #d4b0622e,inset 0 1px #ffffff1a}.library-modal-tabs-modern .library-tab-btn.active:before{background:radial-gradient(circle at top,rgba(212,176,98,.25),transparent 70%)}.library-modal-tabs-modern .lib-tab-icon{width:28px;height:28px;stroke-width:1.8;transition:transform .25s ease}.library-modal-tabs-modern .library-tab-btn:hover .lib-tab-icon{transform:scale(1.1)}.library-modal-tabs-modern .library-tab-btn.active .lib-tab-icon{transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(212,176,98,.4))}.library-modal-tabs-modern .lib-tab-label{font-size:1.05rem;font-weight:700;letter-spacing:.2px;line-height:1.1}.library-modal-tabs-modern .library-tab-count{background:#ffffff14;padding:.15rem .6rem;border-radius:12px;font-size:.78rem;font-weight:700;min-width:28px;text-align:center;border:1px solid rgba(255,255,255,.1)}.library-modal-tabs-modern .library-tab-btn.active .library-tab-count{background:var(--highlight-color);color:#0a1f2a;border-color:var(--highlight-color);box-shadow:0 0 8px #d4b06266}@media(max-width:600px){.library-modal-tabs-modern .library-tab-btn{padding:.8rem .4rem;gap:.35rem}.library-modal-tabs-modern .lib-tab-label{font-size:.85rem}.library-modal-tabs-modern .lib-tab-icon{width:22px;height:22px}}.library-modal-tabs:not(.library-modal-tabs-modern){display:flex;gap:.4rem;margin-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08)}.library-modal-tabs:not(.library-modal-tabs-modern) .library-tab-btn{background:transparent;border:none;color:var(--text-color);padding:.5rem .9rem;cursor:pointer;font-size:.95rem;font-weight:600;opacity:.6;border-bottom:2px solid transparent;transition:all .15s ease;display:flex;align-items:center;gap:.4rem}.library-modal-tabs:not(.library-modal-tabs-modern) .library-tab-btn:hover{opacity:.85}.library-modal-tabs:not(.library-modal-tabs-modern) .library-tab-btn.active{opacity:1;border-bottom-color:var(--highlight-color);color:var(--highlight-color)}.library-modal-actions{display:flex;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}.library-modal-body{flex:1;overflow-y:auto;min-height:200px;max-height:60vh}.library-pane{display:block}.library-list{display:flex;flex-direction:column;gap:.5rem}.library-empty{text-align:center;opacity:.6;font-style:italic;padding:1.5rem;margin:0}.library-card{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;transition:all .15s ease}.library-card:hover{background:#ffffff12;border-color:#ffffff2e}.library-card .card-main{flex:1;min-width:0}.library-card .card-title{font-size:1rem;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-card .card-meta{font-size:.78rem;opacity:.7;margin-top:.15rem}.library-card .card-actions{display:flex;gap:.3rem;flex-shrink:0;align-items:center;flex-wrap:wrap}.library-card .card-actions button{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text-color);border-radius:6px;padding:.35rem .55rem;font-size:.85rem;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}.library-card .card-actions button:hover{background:#ffffff14;border-color:#ffffff4d}.library-card .card-actions button.btn-danger:hover{background:#ef444426;border-color:#ef4444;color:#fca5a5}.library-card .card-actions button.btn-with-label{padding:.4rem .7rem;font-weight:600}.library-card .card-actions button.btn-with-label .btn-label-text{font-size:.78rem;letter-spacing:.2px;white-space:nowrap}.library-card .card-actions button[data-action=export]:hover{background:#60a5fa1f;border-color:#60a5fa80;color:#93c5fd}.library-card .card-actions button[data-action=pdf]:hover{background:#d4b06226;border-color:var(--highlight-color);color:var(--highlight-color)}.library-card .card-actions-separator{width:1px;height:22px;background:#ffffff2e;margin:0 .35rem;flex-shrink:0}@media(max-width:700px){.library-card .card-actions-separator{width:100%;height:1px;margin:.3rem 0}}.library-card.draggable-item{cursor:grab}.library-card.draggable-item:active{cursor:grabbing}.library-card.dragging{opacity:.4}.library-card.drag-over{border-top:2px solid var(--highlight-color)}.library-card .drag-handle{color:#fff6;font-size:1.1rem;cursor:grab;user-select:none;padding:0 .3rem}#btn-record-demo.recording{background:linear-gradient(180deg,#ef444466,#dc26264d)!important;color:#ffb4b4!important;border-color:#ef4444!important;animation:btnRecordPulse 1.4s ease-in-out infinite}@keyframes btnRecordPulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 8px #ef444400}}body.scene-mode header,body.scene-mode #right-sidebar,body.scene-mode #chord-rows-wrapper,body.scene-mode #progression-arrow-container,body.scene-mode .compact-transport,body.scene-mode #learning-bar-container,body.scene-mode .controls-header,body.scene-mode .right-sidebar-toggle-handle,body.scene-mode #toggle-right-sidebar,body.scene-mode .scroll-to-top-btn,body.scene-mode #model-toggle-floating,body.scene-mode #handpan-mirror-toggle,body.scene-mode .toolbox-floating,body.scene-mode #toolbox-floating,body.scene-mode .left-sidebar,body.scene-mode #left-sidebar,body.scene-mode .modele-toggle-wrapper,body.scene-mode .model-toggle-block,body.scene-mode .toolbox-side,body.scene-mode #floating-palette-wrapper,body.scene-mode #overlay-wrapper,body.scene-mode #note-palette{display:none!important}body.scene-mode:not(.scene-progression-fullscreen):not(.scene-timeline-mode) .scene-hud{inset:50% 24px auto auto;transform:translateY(-50%);min-width:280px;max-width:340px}body.scene-mode #app{padding:0!important;height:100vh}body.scene-mode main{width:100vw;max-width:none;flex:1}body.scene-mode .workspace-grid{grid-template-columns:1fr!important;height:100vh}body.scene-mode #handpan-container{width:min(100vh,100vw)!important;height:min(100vh,100vw)!important;max-width:none;margin:0 auto!important;aspect-ratio:1 / 1}.scene-hud{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#141821f2,#0a0e16f2);border:1px solid rgba(212,176,98,.4);border-radius:14px;padding:.7rem 1.1rem;color:var(--text-color);z-index:8000;display:none;flex-direction:column;gap:.45rem;align-items:center;backdrop-filter:blur(8px);box-shadow:0 12px 30px #0009;min-width:320px;max-width:90vw}body.scene-mode .scene-hud{display:flex}.scene-hud .hud-line{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center;font-size:.9rem}.scene-hud .hud-title{font-weight:700;font-size:1.05rem;color:var(--highlight-color)}.scene-hud .hud-meta{opacity:.8;font-size:.85rem}.scene-hud .hud-meta-sep{opacity:.4;padding:0 .2rem}.scene-hud .hud-next{opacity:.8;font-size:.85rem;font-style:italic}.scene-hud .hud-actions{display:flex;gap:.45rem;margin-top:.2rem}.scene-hud .hud-actions button{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--text-color);padding:.4rem .7rem;border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .15s}.scene-hud .hud-actions button:hover{background:#ffffff29}.scene-hud .hud-actions button.hud-quit{background:#ef444426;border-color:#ef4444;color:#fca5a5}#btn-scene-mode{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text-color);border-radius:8px;padding:.35rem .6rem;cursor:pointer;transition:all .15s ease}#btn-scene-mode:hover{background:#ffffff14;border-color:var(--highlight-color)}.sidebar.mode-creation #creation-save-panel{display:flex!important}.btn-modern-icon{display:flex;align-items:center;justify-content:center;gap:.55rem;text-align:left;line-height:1.2;transition:all .18s ease}.btn-modern-icon .btn-svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor}.btn-modern-icon:hover .btn-svg{transform:scale(1.08)}.btn-modern-icon .btn-svg-record circle:nth-of-type(2){animation:pulseRecord 1.6s ease-in-out infinite}@keyframes pulseRecord{0%,to{opacity:1}50%{opacity:.5}}.sidebar.collapsed #creation-save-panel,#right-sidebar.collapsed #creation-save-panel{display:none!important}body:has(.sidebar.mode-library) .custom-select-trigger,body:has(.content-wrapper.mode-library) .custom-select-trigger{cursor:help;position:relative}body:has(.sidebar.mode-library) .custom-select-trigger:after,body:has(.content-wrapper.mode-library) .custom-select-trigger:after,body:has(.sidebar.mode-library) .custom-select-trigger.no-value:after,body:has(.content-wrapper.mode-library) .custom-select-trigger.no-value:after{display:none!important;content:none!important}.chord-help-indicator{position:absolute;right:6px;bottom:6px;width:18px;height:18px;border-radius:50%;background:#ffffff14;border:1px solid rgba(255,255,255,.25);color:#ffffffb3;font-size:.72rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s ease,background .15s ease;z-index:5;padding:0;font-family:inherit}.custom-chord-wrapper:hover .chord-help-indicator,.control-group:hover .chord-help-indicator{opacity:1;pointer-events:auto}.chord-help-indicator:hover{background:var(--highlight-color);border-color:var(--highlight-color);color:#0a1f2a;transform:scale(1.1)}.song-editor-modal-content{background:linear-gradient(180deg,#1a1f2a,#131722);border:1px solid var(--highlight-color);border-radius:16px;padding:1.2rem 1.4rem;width:95%;max-width:900px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px #0009;color:var(--text-color);display:flex;flex-direction:column}.part-editor-modal-content{background:linear-gradient(180deg,#1a1f2a,#131722);border:1px solid var(--highlight-color);border-radius:16px;padding:1.2rem 1.4rem;width:92%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0009;color:var(--text-color);display:flex;flex-direction:column}.song-editor-body{gap:.8rem;display:flex;flex-direction:column}.song-editor-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}.song-editor-section{margin-top:.4rem;padding:.7rem .8rem .9rem;background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:10px}.song-editor-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.song-editor-section-header h3{font-size:1.05rem;margin:0;color:var(--highlight-color);font-weight:600}.song-parts-list{display:flex;flex-direction:column;gap:.4rem}.song-part-card{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--part-color, #60A5FA);border-radius:8px;transition:background .15s}.song-part-card:hover{background:#ffffff14}.song-part-card .part-name{font-weight:600;flex:0 0 auto;min-width:100px}.song-part-card .part-chords{flex:1;display:flex;gap:.25rem;flex-wrap:wrap;font-size:.85rem;opacity:.85}.song-part-card .chord-chip{background:#ffffff1a;padding:.15rem .5rem;border-radius:12px;font-weight:500;font-size:.8rem}.song-part-card .part-actions{display:flex;gap:.3rem;flex-shrink:0}.song-part-card .part-actions button{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text-color);border-radius:6px;padding:.3rem .5rem;font-size:.85rem;cursor:pointer;transition:all .15s}.song-part-card .part-actions button:hover{background:#ffffff14;border-color:#ffffff4d}.song-part-card .part-actions button.btn-danger:hover{background:#ef444426;border-color:#ef4444;color:#fca5a5}.song-structure-list{display:flex;flex-direction:column;gap:.35rem;min-height:60px}.song-structure-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--part-color, #60A5FA);border-radius:8px;cursor:grab;transition:background .15s}.song-structure-item:active{cursor:grabbing}.song-structure-item:hover{background:#ffffff12}.song-structure-item.dragging{opacity:.4}.song-structure-item.drag-over{border-top-color:var(--highlight-color)}.song-structure-item .struct-index{background:#ffffff1a;padding:.15rem .5rem;border-radius:12px;font-size:.78rem;font-weight:700;flex-shrink:0}.song-structure-item .struct-name{font-weight:600;flex:1}.song-structure-item .struct-info{font-size:.8rem;opacity:.7}.song-structure-item button.struct-remove{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text-color);border-radius:6px;padding:.25rem .5rem;cursor:pointer;font-size:.85rem;flex-shrink:0}.song-structure-item button.struct-remove:hover{background:#ef444426;border-color:#ef4444;color:#fca5a5}.song-structure-item .drag-handle{color:#fff6;user-select:none}.part-chord-list{display:flex;flex-direction:column;gap:.35rem}.part-chord-row{display:flex;gap:.5rem;align-items:center;padding:.4rem .5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:8px}.part-chord-row .chord-index{background:#ffffff1a;padding:.15rem .5rem;border-radius:12px;font-weight:700;font-size:.78rem;min-width:28px;text-align:center}.part-chord-row select,.part-chord-row input{background:#00000059;color:var(--text-color);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.35rem .5rem;font-family:inherit;font-size:.9rem}.part-chord-row select.chord-degree-select{flex:1;min-width:120px}.part-chord-row input.chord-beats-input{width:60px;text-align:center}.part-chord-row .chord-beats-label{font-size:.8rem;opacity:.7}.part-chord-row button.chord-row-remove{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text-color);border-radius:6px;padding:.25rem .45rem;cursor:pointer;margin-left:auto}.part-chord-row button.chord-row-remove:hover{background:#ef444426;border-color:#ef4444;color:#fca5a5}.scene-songbook-panel{position:fixed;top:0;left:0;bottom:0;width:340px;z-index:7900;background:linear-gradient(180deg,#0f131cf5,#080b12fa);border-right:1px solid rgba(212,176,98,.4);box-shadow:8px 0 32px #0009;backdrop-filter:blur(8px);color:var(--text-color);flex-direction:column;transition:width .25s ease,transform .25s ease;display:none}body.scene-mode .scene-songbook-panel{display:flex}.scene-songbook-panel.collapsed{width:36px}.scene-songbook-panel.collapsed .songbook-body,.scene-songbook-panel.collapsed .songbook-footer,.scene-songbook-panel.collapsed .songbook-song-select{display:none}.scene-songbook-panel.collapsed .songbook-header{justify-content:center}.songbook-header{display:flex;gap:.5rem;align-items:center;padding:.6rem .7rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.songbook-song-select{flex:1;background:#0006;color:var(--text-color);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.35rem .55rem;font-size:.9rem;font-weight:600;font-family:inherit}.songbook-icon-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-color);width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:1rem;flex-shrink:0;transition:all .15s}.songbook-icon-btn:hover{background:#ffffff1f;border-color:var(--highlight-color)}.songbook-body{flex:1;overflow-y:auto;padding:.5rem .5rem .8rem}.songbook-section{margin-bottom:.7rem}.songbook-section h4{font-size:.85rem;margin:0 0 .4rem;color:var(--highlight-color);font-weight:700;letter-spacing:.02em;padding:0 .3rem}.songbook-empty{font-size:.82rem;opacity:.55;font-style:italic;text-align:center;padding:.8rem;margin:0}.songbook-structure-list{display:flex;flex-direction:column;gap:.25rem}.songbook-structure-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-left:4px solid var(--part-color, #60A5FA);border-radius:6px;cursor:pointer;transition:all .15s}.songbook-structure-item:hover{background:#ffffff12}.songbook-structure-item.active{background:#d4b0622e;border-color:var(--highlight-color);box-shadow:inset 0 0 0 1px #d4b0624d}.songbook-structure-item .part-index{background:#ffffff1a;padding:.1rem .4rem;border-radius:8px;font-size:.7rem;font-weight:700;flex-shrink:0}.songbook-structure-item .part-name{flex:1;font-size:.88rem;font-weight:600}.songbook-structure-item .part-info{font-size:.72rem;opacity:.65;flex-shrink:0}.songbook-chords-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.45rem}.songbook-chord-card{position:relative;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--chord-color, #FFD700);border-radius:10px;padding:.4rem .4rem .5rem;display:flex;flex-direction:column;align-items:center}.songbook-chord-card .chord-card-index{position:absolute;top:4px;right:6px;background:var(--chord-color, #FFD700);color:#000;font-weight:800;font-size:.7rem;padding:.05rem .4rem;border-radius:10px;line-height:1.4}.chord-card-header{text-align:center;margin-bottom:.25rem}.chord-card-header .chord-degree{font-weight:700;color:var(--highlight-color);font-size:.85rem}.chord-card-header .chord-name{font-size:1.1rem;font-weight:800;color:#fff}.chord-card-svg{width:130px;height:130px;display:flex;align-items:center;justify-content:center}.chord-card-svg .mini-handpan-svg{display:block}.chord-card-footer{margin-top:.25rem;font-size:.72rem;opacity:.7;text-align:center}.songbook-footer{display:flex;gap:.4rem;padding:.6rem .7rem;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}.songbook-nav-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--text-color);padding:.5rem .7rem;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:600;transition:all .15s}.songbook-nav-btn:hover{background:#ffffff29;border-color:var(--highlight-color)}.songbook-next-btn{flex:1;background:linear-gradient(180deg,#22d3ee40,#14b8a633);border-color:#22d3ee66;color:#5eead4}.songbook-quit-btn{background:#ef444426;border-color:#ef4444;color:#fca5a5}@media(max-width:768px){.scene-songbook-panel{inset:auto 0 0;width:100%!important;max-height:60vh;border-right:none;border-top:1px solid rgba(212,176,98,.4);box-shadow:0 -8px 32px #0009}.scene-songbook-panel.collapsed{max-height:50px}}.songbook-toolbar{display:flex;gap:.4rem;padding:.4rem .7rem;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap;align-items:center;flex-shrink:0}.songbook-toolbar-item{display:flex;align-items:center;gap:.3rem;font-size:.78rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.2rem .4rem}.songbook-toolbar-item select{background:transparent;color:var(--text-color);border:none;font-family:inherit;font-size:.78rem;cursor:pointer;outline:none}.songbook-toolbar-toggle{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:var(--text-color);padding:.3rem .55rem;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .15s;opacity:.6}.songbook-toolbar-toggle:hover{opacity:.85;background:#ffffff14}.songbook-toolbar-toggle.active{opacity:1;background:#d4b06233;border-color:var(--highlight-color);color:var(--highlight-color)}.sidebar.mode-library #logic-listen-section,.content-wrapper.mode-library #logic-listen-section{display:none!important}.songbook-view-mode-group{display:inline-flex;align-items:stretch;background:#00000040;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:2px;gap:0;overflow:hidden}.songbook-view-mode-group .songbook-view-btn{border:none;border-radius:6px;margin:0;opacity:.5;background:transparent}.songbook-view-mode-group .songbook-view-btn:hover{opacity:.8;background:#ffffff0d}.songbook-view-mode-group .songbook-view-btn.active{opacity:1;background:var(--highlight-color);color:#0d1b2a;box-shadow:0 1px 6px #d4b06266}body.scene-progression-fullscreen.scene-mode #handpan-container{display:none!important}body.scene-progression-fullscreen.scene-mode .scene-songbook-panel{width:100vw!important;max-width:none;border-right:none}body.scene-progression-fullscreen.scene-mode .songbook-chords-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}body.scene-progression-fullscreen.scene-mode .songbook-chord-card{padding:.7rem .7rem .9rem}body.scene-progression-fullscreen.scene-mode .chord-card-svg{width:220px;height:220px}body.scene-progression-fullscreen.scene-mode .chord-card-header .chord-degree{font-size:1.2rem}body.scene-progression-fullscreen.scene-mode .chord-card-header .chord-name{font-size:1.6rem}body.scene-progression-fullscreen.scene-mode .scene-hud{inset:12px 16px auto auto;transform:none;flex-direction:row;align-items:center;gap:.6rem;padding:.4rem .7rem;min-width:0;max-width:70vw;border-radius:24px}body.scene-progression-fullscreen.scene-mode .scene-hud .hud-line{margin:0;gap:.4rem}body.scene-progression-fullscreen.scene-mode .scene-hud .hud-title{font-size:.95rem;white-space:nowrap}body.scene-progression-fullscreen.scene-mode .scene-hud .hud-meta,body.scene-progression-fullscreen.scene-mode .scene-hud .hud-meta-sep,body.scene-progression-fullscreen.scene-mode .scene-hud .hud-next{display:none}body.scene-progression-fullscreen.scene-mode .scene-hud .hud-actions{margin-top:0;gap:.3rem}body.scene-progression-fullscreen.scene-mode .scene-hud .hud-actions button{padding:.3rem .55rem;font-size:.82rem}.songbook-chord-card .chord-card-topbar{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:.25rem}.songbook-chord-card .chord-card-topbar .chord-card-index{position:static;background:var(--chord-color, #FFD700);color:#000;font-weight:800;font-size:.75rem;padding:.1rem .5rem;border-radius:10px;line-height:1.4}.songbook-chord-card .chord-card-play-btn{background:#ffffff1f;border:2px solid var(--chord-color, rgba(255, 255, 255, .35));color:var(--chord-color, var(--text-color));width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;box-shadow:0 0 8px var(--chord-color, transparent)}.songbook-chord-card .chord-card-play-btn:hover{background:var(--chord-color, rgba(255, 255, 255, .18));color:#000;transform:scale(1.08);box-shadow:0 0 14px var(--chord-color, rgba(255, 255, 255, .4))}.songbook-chord-card .chord-card-label{margin-top:.35rem;text-align:center;line-height:1.2}.songbook-chord-card .chord-card-label .chord-degree{font-weight:800;font-size:.95rem}.songbook-chord-card .chord-card-label .chord-name{font-size:1.05rem;font-weight:700;color:#fff;margin-top:.1rem}body.scene-progression-fullscreen.scene-mode .chord-card-label .chord-degree{font-size:1.4rem}body.scene-progression-fullscreen.scene-mode .chord-card-label .chord-name{font-size:1.7rem}.songbook-chord-card .chord-card-header{display:none}.songbook-chord-card.playing{border-color:var(--chord-color, #FFD700);box-shadow:inset 0 0 0 2px var(--chord-color, #FFD700),0 0 24px var(--chord-color, rgba(255, 215, 0, .6));animation:songbook-card-pulse .6s ease-in-out infinite alternate;z-index:2}@keyframes songbook-card-pulse{0%{transform:scale(1);box-shadow:inset 0 0 0 2px var(--chord-color, #FFD700),0 0 18px var(--chord-color, rgba(255, 215, 0, .45))}to{transform:scale(1.04);box-shadow:inset 0 0 0 3px var(--chord-color, #FFD700),0 0 36px var(--chord-color, rgba(255, 215, 0, .85))}}.songbook-chord-card.playing.warning-last-beat{animation:songbook-card-warning .3s ease-in-out infinite alternate;border-color:#fbbf24}@keyframes songbook-card-warning{0%{transform:scale(1);box-shadow:inset 0 0 0 3px #fbbf24,0 0 28px #fbbf24e6}to{transform:scale(1.07);box-shadow:inset 0 0 0 4px #fcd34d,0 0 48px #fcd34d}}.songbook-playback-toolbar{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06);padding-top:.5rem}.songbook-play-mode-group{display:flex;gap:0;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}.songbook-play-mode-btn{background:transparent;border:none;color:var(--text-color);padding:.32rem .6rem;cursor:pointer;font-size:.78rem;font-weight:600;opacity:.55;transition:all .15s}.songbook-play-mode-btn:hover{opacity:.85;background:#ffffff0f}.songbook-play-mode-btn.active{opacity:1;background:#d4b06233;color:var(--highlight-color)}.songbook-arpege-speed{flex:1;min-width:130px}.songbook-arpege-speed input[type=range]{flex:1;cursor:pointer;accent-color:var(--highlight-color)}#songbook-arpege-speed-label{font-size:.72rem;opacity:.7;min-width:42px;text-align:right}#songbook-play-sequence{background:linear-gradient(180deg,#22c55e4d,#16a34a40);border-color:#22c55e80;color:#86efac;font-weight:700}#songbook-play-sequence:hover{background:linear-gradient(180deg,#22c55e73,#16a34a66)}#songbook-play-sequence.active{background:linear-gradient(180deg,#ef444459,#dc26264d);border-color:#ef44448c;color:#fca5a5;animation:songbook-play-pulse 1.6s ease-in-out infinite}@keyframes songbook-play-pulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 10px #ef444400}}#handpan-container.metronome-pulse{animation:metronomePulse .18s ease-out}#handpan-container.metronome-pulse-accent{animation:metronomePulseAccent .25s ease-out}@keyframes metronomePulse{0%{box-shadow:0 0 #ffd700b3}50%{box-shadow:0 0 0 14px #ffd70066}to{box-shadow:0 0 #ffd70000}}@keyframes metronomePulseAccent{0%{box-shadow:0 0 #ef4444d9}50%{box-shadow:0 0 0 22px #ef444480}to{box-shadow:0 0 #ef444400}}.count-in-overlay{position:fixed;font-size:12rem;font-weight:900;line-height:1;color:var(--highlight-color);text-shadow:0 0 24px rgba(212,176,98,.85),0 0 48px rgba(212,176,98,.5);z-index:9000;pointer-events:none;opacity:0}.songbook-metronome-toolbar{border-top:1px solid rgba(255,255,255,.05)}.songbook-tempo-group{display:flex;align-items:center;gap:.25rem;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.15rem .25rem}.songbook-tempo-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-color);width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:1rem;line-height:1;padding:0;transition:all .15s}.songbook-tempo-btn:hover{background:#ffffff24;border-color:var(--highlight-color)}#songbook-tempo-display{min-width:30px;text-align:center;font-weight:700;font-size:.85rem;color:var(--highlight-color)}#songbook-metronome-toggle.active{background:#ef444433;border-color:#ef444480;color:#fca5a5}body.scene-timeline-mode .scene-songbook-panel{inset:auto 0 0;width:100vw!important;max-width:none;height:auto;max-height:28vh;border-right:none;border-top:1px solid rgba(212,176,98,.4);flex-direction:column}body.scene-timeline-mode .songbook-section:has(#songbook-chords-grid){display:none}body.scene-timeline-mode .songbook-section:has(#songbook-structure-list){flex-shrink:0;padding:.4rem .6rem}body.scene-timeline-mode .songbook-section:has(#songbook-structure-list) h4{display:none}body.scene-timeline-mode #songbook-structure-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:.4rem}body.scene-timeline-mode .songbook-structure-item{min-width:140px;flex-shrink:0}body.scene-timeline-mode #handpan-container{transform:scale(.55) translateY(-20px);transform-origin:50% 30%;transition:transform .3s ease}.timeline-satellite{position:fixed;top:50%;transform:translateY(-50%);width:220px;background:linear-gradient(180deg,#141821eb,#0a0e16f2);border:2px solid var(--chord-color, rgba(255, 255, 255, .15));border-radius:14px;padding:.6rem .6rem .7rem;z-index:7800;box-shadow:0 16px 40px #0009;backdrop-filter:blur(6px);display:none;flex-direction:column;align-items:center;color:var(--text-color);transition:transform .3s ease,opacity .3s ease}body.scene-timeline-mode .timeline-satellite{display:flex}.timeline-satellite-past{left:24px;opacity:.78}.timeline-satellite-future{right:24px}.timeline-satellite .satellite-role{font-size:.72rem;font-weight:700;text-transform:uppercase;opacity:.75;letter-spacing:.05em;margin-bottom:.3rem;color:var(--chord-color, var(--text-color))}.timeline-satellite .satellite-svg-wrap{width:160px;height:160px;display:flex;align-items:center;justify-content:center}.timeline-satellite .satellite-label{margin-top:.4rem;text-align:center}.timeline-satellite .satellite-degree{font-weight:800;font-size:.95rem}.timeline-satellite .satellite-name{font-size:1.4rem;font-weight:800;color:#fff;margin-top:.1rem}.timeline-satellite .satellite-empty{opacity:.45;font-style:italic;padding:3rem 1rem;text-align:center}.timeline-current-label{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:7900;background:linear-gradient(180deg,#141821f2,#0a0e16f7);border:2px solid var(--chord-color, var(--highlight-color));border-radius:12px;padding:.5rem 1rem;color:var(--text-color);box-shadow:0 0 24px #00000080,0 0 18px var(--chord-color, transparent);display:none;align-items:center;gap:.7rem;backdrop-filter:blur(6px)}body.scene-timeline-mode .timeline-current-label{display:flex}.timeline-current-label .cur-degree{font-weight:900;font-size:1.5rem}.timeline-current-label .cur-name{font-weight:800;font-size:1.5rem;color:#fff}.timeline-current-label .cur-info{font-size:.78rem;opacity:.7;border-left:1px solid rgba(255,255,255,.15);padding-left:.7rem}.note-group.timeline-chord-highlight .note-circle-base{fill:var(--chord-color, #FFD700)!important;stroke:#fff!important;stroke-width:4!important;filter:drop-shadow(0 0 12px var(--chord-color, #FFD700))}.note-group.timeline-chord-highlight{animation:timelineChordPulse .8s ease-in-out infinite alternate}@keyframes timelineChordPulse{0%{filter:drop-shadow(0 0 8px var(--chord-color, #FFD700))}to{filter:drop-shadow(0 0 18px var(--chord-color, #FFD700))}}body.scene-timeline-mode .scene-hud{inset:12px 16px auto auto;transform:none;flex-direction:row;padding:.4rem .7rem;border-radius:24px;min-width:0;max-width:50vw}body.scene-timeline-mode .scene-hud .hud-title{font-size:.95rem}body.scene-timeline-mode .scene-hud .hud-line.hud-next,body.scene-timeline-mode .scene-hud .hud-meta{display:none}@media(max-width:900px){.timeline-satellite{width:140px;top:auto;bottom:calc(28vh + 12px);transform:none}.timeline-satellite .satellite-svg-wrap{width:100px;height:100px}.timeline-satellite .satellite-name{font-size:1.1rem}}.controls,#image-exporter{position:relative;overflow:visible;display:flex;flex-direction:column;gap:.5rem;width:100%;background-color:var(--primary-color);padding:.8rem;border-radius:20px;box-shadow:inset 2px 2px 5px var(--shadow-dark),inset -2px -2px 5px var(--shadow-light);align-items:center;transition:box-shadow .3s ease;z-index:1;border:2px solid var(--current-outline-color)}.sidebar{position:relative;flex:1;display:flex;flex-direction:column;gap:1rem;width:100%;justify-content:flex-start}#chord-rows-wrapper{width:100%;display:flex;flex-direction:column;gap:0;overflow:visible!important}#chord-rows-wrapper.timeline-horizontal{width:100%;max-width:90%;margin:10px auto 20px;background-color:transparent!important;box-shadow:none!important;padding:0 0 5px;border:none;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:visible;gap:4px;align-items:stretch;justify-content:center;scroll-snap-type:x mandatory;position:relative;z-index:10}#chord-rows-wrapper.timeline-horizontal .control-group{flex:1 1 auto;width:13.5%;min-width:0;max-width:160px;margin:0;border-radius:12px;backdrop-filter:blur(5px);padding:4px;position:relative;border:2px solid var(--current-outline-color);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"mods mods" "top top" "mid mid" "bot-label bot-swap" "inversions inversions";gap:4px;scroll-snap-align:center;z-index:1}#chord-rows-wrapper.timeline-horizontal .control-group:first-child{border-radius:12px 0 0 12px}#chord-rows-wrapper.timeline-horizontal .control-group:last-child{border-radius:0 12px 12px 0;border-right:none}#chord-rows-wrapper.timeline-horizontal .chord-row-main{display:contents}#chord-rows-wrapper.timeline-horizontal .chord-modifiers-wrapper{width:auto;opacity:0;visibility:hidden;transition:opacity .2s ease 1s,visibility 0s 1.2s;position:absolute;bottom:100%;left:-2px;right:-2px;transform:none;margin-bottom:4px;z-index:9999;background:transparent;padding:0;box-shadow:none;box-sizing:border-box}#chord-rows-wrapper.timeline-horizontal .control-group:hover .chord-modifiers-wrapper,#chord-rows-wrapper.timeline-horizontal .control-group.show-secondary-menus .chord-modifiers-wrapper{opacity:1;visibility:visible;transition:opacity .2s ease 0s,visibility 0s 0s}#chord-rows-wrapper.timeline-horizontal .chord-actions-row{grid-area:top;width:100%;display:flex;justify-content:center}#chord-rows-wrapper.timeline-horizontal .chord-actions-group{width:100%;display:flex;justify-content:center;gap:.2rem;padding:0 .4rem}#chord-rows-wrapper.timeline-horizontal .chord-selection-area{grid-area:mid;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}#chord-rows-wrapper.timeline-horizontal .custom-chord-wrapper{width:100%;position:relative}#chord-rows-wrapper.timeline-horizontal .chord-label{grid-area:bot-label;text-align:center;font-size:.7rem;opacity:.8;align-self:center;margin:0;font-weight:600}.mode-logic #chord-rows-wrapper.timeline-horizontal .chord-label{text-align:center;grid-column:1 / -1;justify-self:center}#chord-rows-wrapper.timeline-horizontal .btn-swap-physical{grid-area:bot-swap;align-self:center;justify-self:end;margin:0;width:24px;height:24px;font-size:.9rem}.mode-logic #chord-rows-wrapper.timeline-horizontal .btn-swap-physical{display:none!important}#chord-rows-wrapper.timeline-horizontal .custom-select-trigger{padding:0 .2rem;height:48px;font-size:.8rem;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.1;position:relative;width:100%}#chord-rows-wrapper.timeline-horizontal .custom-select-trigger>div{flex-direction:column;align-items:center;gap:0;width:100%}#chord-rows-wrapper.timeline-horizontal .custom-select-trigger span:first-child{font-size:.72rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}#chord-rows-wrapper.timeline-horizontal .custom-select-trigger span:last-child{font-size:.6rem;opacity:.8;line-height:1}#chord-rows-wrapper.timeline-horizontal .chord-modifiers{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:.2rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility 0s;transition-delay:0s,0s,0s;z-index:50!important;pointer-events:auto}#chord-rows-wrapper.timeline-horizontal .chord-modifiers:before{content:"";position:absolute;top:100%;left:0;width:100%;height:15px;background:transparent}#chord-rows-wrapper.timeline-horizontal .control-group:hover .chord-modifiers,#chord-rows-wrapper.timeline-horizontal .control-group.show-secondary-menus .chord-modifiers,#chord-rows-wrapper.timeline-horizontal .chord-modifiers:hover{opacity:1;visibility:visible;transform:translateY(-5px);transition:opacity .2s ease,transform .2s ease,visibility 0s}#chord-rows-wrapper.timeline-mode-2{gap:6px;padding:5px 0 10px}#chord-rows-wrapper.timeline-mode-2 .control-group{border-radius:12px!important;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);box-shadow:0 4px 6px #0003;transition:transform .2s,background-color .2s;border-right:2px solid rgba(255,255,255,.1);padding:8px}#chord-rows-wrapper.timeline-mode-2 .control-group:hover{transform:translateY(-5px);background:#ffffff1a;z-index:20}#chord-rows-wrapper.timeline-mode-2 .control-group.playing-active{border-color:var(--highlight-color);background:#22d3ee1a;transform:translateY(-5px);z-index:20}#progression-arrow-container{display:none;width:100%;max-width:90%;margin:5px auto 20px;align-items:center;justify-content:center;gap:15px;opacity:1;transition:opacity .3s}#progression-arrow-container:hover{opacity:1}#chords-container.controls{gap:.75rem!important;padding:1rem!important}#harmony-controls,.compact-transport,#logic-text-switch-container,#chord-rows-wrapper:not(.timeline-horizontal),#progression-arrow-container,#learning-bar-container,.library-selectors-card,.library-preview-card{background:#ffffff06;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:.6rem .75rem;margin:0!important;transition:background .2s ease,border-color .2s ease}.section-card-with-step{position:relative;padding-top:1.4rem!important}.section-card-with-step:before{content:attr(data-step);position:absolute;top:-10px;left:12px;background:linear-gradient(135deg,#22d3ee,#67e8f9);color:#0d1b2a;font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 2px 8px #22d3ee4d;z-index:2}[data-theme=light] #harmony-controls,[data-theme=light] .compact-transport,[data-theme=light] #logic-text-switch-container,[data-theme=light] #progression-arrow-container,[data-theme=light] #learning-bar-container{background:#00000006;border-color:#0000000f}#harmony-controls:hover,.compact-transport:hover{background:#ffffff0a;border-color:#ffffff1a}.scale-mode-toggle{flex-direction:column!important;width:auto!important;min-width:110px;height:auto!important;align-self:center;padding:0!important;gap:0;border-radius:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);overflow:hidden}.scale-mode-toggle .segment-btn{width:100%;padding:.55rem 1.1rem!important;font-size:.85rem!important;line-height:1.2;white-space:nowrap;border:none!important;border-radius:0!important;margin:0!important;box-shadow:none!important}.scale-mode-toggle .segment-btn+.segment-btn{border-top:1px solid rgba(255,255,255,.08)!important}.scale-mode-toggle .segment-btn#emotion-mode-major{transition:all .3s ease}.scale-mode-toggle .segment-btn#emotion-mode-major.active{background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;color:#0d1b2a!important;text-shadow:0 1px 2px rgba(255,255,255,.3);box-shadow:0 0 12px #fbbf2480,inset 0 1px 2px #fff6!important;border-color:#f59e0b!important}.scale-mode-toggle .segment-btn#emotion-mode-natural-minor{transition:all .3s ease}.scale-mode-toggle .segment-btn#emotion-mode-natural-minor.active{background:linear-gradient(135deg,#6366f1,#4338ca)!important;color:#f1f5f9!important;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 12px #6366f180,inset 0 1px 2px #ffffff26!important;border-color:#4338ca!important}body:has(#emotion-mode-major.active) #harmony-controls{background:linear-gradient(135deg,#fbbf240a,#ffffff06);border-color:#fbbf2426}body:has(#emotion-mode-natural-minor.active) #harmony-controls{background:linear-gradient(135deg,#6366f10a,#ffffff06);border-color:#6366f126}.progression-line{height:2px;flex:1;border-radius:2px;position:relative;background:#fff!important}.progression-line.left:after,.progression-line.right:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #FFFFFF!important}.progression-title-text{font-size:.85rem;text-transform:uppercase;letter-spacing:2px;font-weight:700;white-space:nowrap;color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.5);opacity:1}[data-theme=light] .progression-line{background:#000!important}[data-theme=light] .progression-line.left:after,[data-theme=light] .progression-line.right:after{border-left-color:#000!important}[data-theme=light] .progression-title-text{color:#000!important}#overlay-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:150}.mode-library #chords-panel-title{display:none!important}.mode-library #chords-container .controls-header{border-bottom:none;justify-content:flex-end;padding-bottom:0;min-height:0}.mode-library #btn-chords-help{display:none!important}.sidebar.mode-library #chords-container{background:transparent!important;border:none!important;box-shadow:none!important;padding-top:0!important;margin-top:-.5rem!important;border-radius:0!important}.sidebar.mode-library #chords-container .controls-header,.mode-library .chord-modifiers-wrapper,.mode-library .btn-swap-physical,.mode-library .inversion-menu-container,body.midi-connect-mode .chord-modifiers-wrapper,body.midi-connect-mode .btn-swap-physical,body.midi-connect-mode .show-path-button,body.midi-connect-mode .play-chord-button,body.midi-connect-mode .inversion-menu-container,.mode-library .show-path-button.edit-custom-button{display:none!important}.sidebar:not(.mode-library) #scale-library-panel{display:none}.sidebar:not(.mode-logic) #harmony-controls,.sidebar:not(.mode-logic) .logic-separator{display:none!important}.sidebar.mode-logic #chords-panel-title{display:flex!important}.sidebar.mode-logic #chords-container .controls-header{border-bottom:none!important}.logic-text-switch-container{display:none}.sidebar.mode-logic .logic-text-switch-container{display:block;width:100%;margin-bottom:.3rem}.logic-text-switch{display:flex;background-color:var(--primary-color);border-radius:20px;padding:3px;gap:4px;border:1px solid var(--secondary-color);width:100%}.logic-switch-btn{flex:1;background:transparent;border:1px solid transparent;color:var(--text-color);padding:.5rem;font-size:.8rem;cursor:pointer;border-radius:16px;transition:all .2s;font-weight:500;opacity:.7}.logic-switch-btn:hover{opacity:1;background:#ffffff0d}.logic-text-switch:has(.logic-switch-btn[data-val=emotion].active) .logic-switch-btn[data-val=theory]{border:1px solid var(--highlight-color)}.logic-switch-btn.active{opacity:1;background-color:var(--highlight-color);color:#fff;font-weight:700;border-color:var(--highlight-color);box-shadow:0 0 10px #0003}#learning-bar-container{width:100%;display:flex;justify-content:center;margin:.5rem 0;position:relative;z-index:1}#handpan-container{position:relative;z-index:1}.creation-carousel{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.4rem;padding:4px 6px;border-radius:999px;background:#0f172adb;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px #0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:40;max-width:92%;animation:cc-pop .18s ease-out}.creation-carousel[hidden]{display:none}@keyframes cc-pop{0%{opacity:0;transform:translate(-50%,6px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}.creation-carousel .cc-arrow{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .1s ease;padding:0}.creation-carousel .cc-arrow:hover{background:#38bdf859}.creation-carousel .cc-arrow:active{transform:scale(.92)}.creation-carousel .cc-arrow:disabled{opacity:.3;cursor:default;background:#ffffff0d}.creation-carousel .cc-info{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:150px;padding:0 4px;color:#fff}.creation-carousel .cc-name{font-size:.82rem;font-weight:700;line-height:1.15;white-space:normal;max-width:240px}.creation-carousel .cc-notes{font-size:.7rem;font-weight:600;letter-spacing:.4px;color:#7dd3fc;margin-top:2px;max-width:240px;line-height:1.15;white-space:normal}.creation-carousel .cc-notes:empty{display:none}.creation-carousel .cc-pos{font-size:.68rem;opacity:.6;letter-spacing:.3px;margin-top:1px}.creation-carousel .cc-impossible{font-size:.64rem;color:#fbbf24;margin-top:2px;max-width:240px;line-height:1.1}.creation-carousel .cc-impossible[hidden]{display:none}.creation-carousel[data-cc-place=haut]{top:-6px;bottom:auto}.creation-carousel[data-cc-place=cote]{top:50%;bottom:auto;left:100%;transform:translate(12px,-50%);animation:none}.creation-carousel[data-cc-place=bas]{bottom:70px;z-index:60}.cc-place-switch{position:absolute;top:6px;right:6px;z-index:70;font-size:.66rem;font-weight:600;color:#cbd5e1;background:#0f172ad1;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 9px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s ease,color .15s ease}.cc-place-switch:hover{background:#38bdf852;color:#fff}.cc-place-switch[hidden]{display:none}.chromakeys-title-group-compact{display:flex;align-items:center;gap:.4rem;margin-bottom:.1rem;justify-content:center;width:100%;flex-wrap:nowrap;min-width:0}.chromakeys-title-group-compact .title-rainbow{white-space:nowrap;overflow:visible}#toolbox{min-width:0}#toolbox .toolbox-section{min-width:0;flex-wrap:wrap}.chromakeys-title-group-compact .title-icon{font-size:1.1rem}.chromakeys-title-group-compact .title-text-wrapper{display:flex;flex-direction:column;line-height:1}.chromakeys-title-group-compact .title-rainbow{font-size:1rem;font-weight:800;font-family:Poppins,sans-serif;letter-spacing:.2px;background:linear-gradient(to right,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}.compact-switcher{width:100%!important;margin-bottom:2px}.compact-switcher .segment-btn{padding:.1rem .3rem;font-size:.65rem;flex:1;min-height:22px}.learning-control-bar{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#ffffff08;backdrop-filter:blur(5px);padding:.5rem;border-radius:12px;border:1px solid var(--secondary-color);width:100%}.learning-label{font-size:.75rem;font-weight:600;color:var(--text-color);opacity:.9;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;margin-bottom:2px}.learning-mode-switcher-global{width:100%;justify-content:space-between}.learning-mode-switcher-global .segment-btn{flex:1;font-size:.7rem;padding:.3rem .2rem}.pill-stop-btn{width:100%;background-color:#ef4444;color:#fff;border:2px solid white;padding:.3rem;border-radius:20px;font-size:.8rem;font-weight:800;cursor:pointer;transition:background-color .2s;white-space:nowrap;box-shadow:0 2px 8px #ef444466;margin-top:.2rem}.pill-stop-btn:hover{background-color:#dc2626}.pill-stop-btn.hidden{display:none}.logic-guide-overlay{display:none;position:absolute;top:70px;right:100%;width:800px;max-width:90vw;background-color:#0d1b2afa;border:1px solid var(--highlight-color);border-radius:16px;padding:1.5rem;z-index:10000;margin-right:1.5rem;box-shadow:0 10px 30px #00000080;backdrop-filter:blur(10px);animation:slideInRight .3s ease-out}[data-theme=light] .logic-guide-overlay{background-color:#fffffffa;border-color:var(--secondary-color)}.logic-guide-overlay.active{display:block}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.guide-content h4{margin-top:0;margin-bottom:.5rem;color:var(--highlight-color);font-size:1.1rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.3rem}.text-btn{background:var(--highlight-color);border:none;color:var(--primary-color);padding:.4rem 1rem;border-radius:20px;cursor:pointer;font-size:.9rem;font-weight:600;margin:.8rem auto 0;display:block;transition:all .2s;box-shadow:0 4px 10px #0000004d}.text-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0006}.guide-close-x{position:absolute;top:15px;right:15px;background:none;border:2px solid #EF4444;color:#ef4444;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .2s ease;line-height:1;z-index:10}.guide-close-x:hover{background-color:#ef4444;color:#fff;transform:rotate(90deg)}#toolbox{position:relative;width:100%;background-color:var(--primary-color);padding:.5rem .8rem;border-radius:20px;box-shadow:inset 2px 2px 5px var(--shadow-dark),inset -2px -2px 5px var(--shadow-light);display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .3s ease;z-index:200;border:1px solid var(--current-outline-color)}[data-theme=light] .controls,[data-theme=light] #image-exporter,[data-theme=light] #toolbox{box-shadow:0 8px 20px #00000014,0 2px 6px #0000000d;border:1px solid var(--current-outline-color)}.main-navigation-bar{display:flex;align-items:center;gap:1.5rem;justify-content:center;flex:1;margin:0 1rem}.nav-tab{background:none;border:none;font-family:Poppins,sans-serif;font-size:1rem;font-weight:500;color:#fff;opacity:.7;cursor:pointer;transition:all .3s ease;position:relative;padding:.2rem 0;display:inline-flex;align-items:center;gap:.4rem}.nav-tab:hover{opacity:1;transform:translateY(-1px);text-shadow:0 0 10px rgba(255,255,255,.3)}.nav-tab.active{opacity:1;font-weight:800;background:linear-gradient(to right,#22d3ee,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1)}.nav-tab.active:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:linear-gradient(to right,#22d3ee,#fff);border-radius:2px;box-shadow:0 0 10px #22d3ee80;animation:expandWidth .3s ease-out}@keyframes expandWidth{0%{width:0;left:50%}to{width:100%;left:0}}[data-theme=light] .nav-tab{color:#555}[data-theme=light] .nav-tab.active{background:linear-gradient(to right,#2563eb,#1b263b);-webkit-background-clip:text;background-clip:text}[data-theme=light] .nav-tab.active:after{background:linear-gradient(to right,#2563eb,#1b263b)}@media(max-width:1023px){#toolbox{padding-left:1rem;padding-right:1rem}}.controls-header{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between;padding-bottom:.4rem;padding-top:.3rem;gap:1rem;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap;row-gap:.4rem}.right-header-controls{flex-wrap:wrap;justify-content:flex-end}.controls-title{font-weight:400;letter-spacing:.5px;line-height:1.2;margin:0;text-align:left;display:flex;align-items:center;gap:.25rem;flex-shrink:0;white-space:nowrap;flex-grow:0;font-family:Poppins,sans-serif}#scale-library-panel .controls-title,#chords-panel-title,#midi-settings-panel .controls-title,#creation-save-title,[data-theme=light] #scale-library-panel .controls-title,[data-theme=light] #chords-panel-title,[data-theme=light] #creation-save-title{color:var(--current-outline-color)!important}.toolbox-toggle-btn{background:#ffffff0d;border:1px solid var(--secondary-color);color:var(--text-color);border-radius:20px;padding:.3rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s ease;height:30px;white-space:nowrap}.toolbox-toggle-btn:hover{background:#ffffff26;border-color:var(--highlight-color)}.toolbox-toggle-btn .toggle-icon{width:14px;height:14px;transition:transform .3s ease}.logic-context-box{background-color:#0003;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.8rem;margin-top:.5rem;font-size:.85rem;line-height:1.4;color:var(--text-color);text-align:left}.logic-context-box p{margin:0 0 .5rem}.logic-context-box .context-learn-more-btn{display:block;width:100%;margin:.8rem auto 0;background:transparent;border:1px solid var(--highlight-color);color:var(--highlight-color);padding:.5rem;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;text-transform:uppercase;letter-spacing:.5px}.logic-context-box .context-learn-more-btn:hover{background:var(--highlight-color);color:var(--primary-color);transform:translateY(-1px);box-shadow:0 4px 10px #0003}.destination-banner-container{width:100%;position:relative;margin-bottom:.3rem}.destination-banner{position:relative;width:100%;min-height:140px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,#1a1a2e,#000);box-shadow:0 4px 15px #00000080;border:1px solid rgba(255,255,255,.1);padding:.8rem 30px;perspective:1000px}.destination-banner:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(white 1px,transparent 1px);background-size:50px 50px;opacity:.3;pointer-events:none}.planet-container{position:absolute;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;border-radius:50%;overflow:hidden;box-shadow:inset -20px -20px 50px #000000e6,0 0 20px #ffffff1a}.planet-visual{width:100%;height:100%;border-radius:50%;background-size:200% 100%;transition:transform .8s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.illustration-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;display:flex;justify-content:center;align-items:center}.destination-illustration{width:100px;height:100px;opacity:.15;fill:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,.5));transform:translateY(-5px);transition:all .5s ease-out}.banner-content{display:flex;flex-direction:column;align-items:center;gap:0;z-index:5;margin-bottom:0;width:100%}.banner-emoji{font-size:3.5rem;line-height:1;margin-bottom:.2rem;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));z-index:5;animation:floatEmoji 3s ease-in-out infinite}@keyframes floatEmoji{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.banner-text{font-size:1.8rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:3px;text-shadow:0 4px 8px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.8);text-align:center;line-height:1.1;margin-bottom:.3rem}#banner-subtext-container{margin-top:.5rem;position:relative;bottom:auto;font-size:.75rem;color:#fff;opacity:.95;text-transform:uppercase;letter-spacing:1px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,1);background:#00000080;padding:.2rem .8rem;border-radius:20px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2)}#btn-toggle-soundscape{position:absolute;top:8px;right:8px;z-index:10;background-color:#0006;border:1px solid rgba(255,255,255,.3);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(2px);font-size:.8rem}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background-color:#00000080;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .2s ease;backdrop-filter:blur(4px)}.nav-arrow.prev{left:8px}.nav-arrow.next{right:8px}.bg-dest-japan{background:radial-gradient(circle at 30% 30%,#ff9a9e,#fad0c4,#fad0c4,#2c3e50)}.bg-dest-orient{background:radial-gradient(circle at 70% 30%,#f6d365,#fda085)}.bg-dest-africa{background:radial-gradient(circle at 50% 50%,#d35400,#f39c12,#8e44ad)}.bg-dest-celtic{background:radial-gradient(circle at 20% 80%,#56ab2f,#a8e063)}.bg-dest-islands{background:radial-gradient(circle at 50% 50%,#4facfe,#00f2fe)}.bg-dest-eastern_europe{background:radial-gradient(circle at 50% 50%,#870000,#190a05)}.bg-dest-space{background:radial-gradient(circle at 50% 50%,#240b36,#c31432)}.bg-dest-americas{background:radial-gradient(circle at 30% 70%,#00c6ff,#0072ff)}.dest-japan{fill:#ff9a9e}.dest-orient{fill:#f6d365}.dest-africa{fill:#d35400}.dest-celtic{fill:#56ab2f}.dest-islands{fill:#4facfe}.dest-eastern_europe{fill:#ff5252}.dest-space{fill:#c31432}.dest-americas{fill:#00c6ff}.planet-rotate-out{animation:rotateOut .4s ease-in forwards}.planet-rotate-in{animation:rotateIn .4s ease-out forwards}@keyframes rotateOut{0%{transform:rotateY(0) scale(1);opacity:1}to{transform:rotateY(90deg) scale(.8);opacity:.5}}@keyframes rotateIn{0%{transform:rotateY(-90deg) scale(.8);opacity:.5}to{transform:rotateY(0) scale(1);opacity:1}}.compact-transport{display:flex;flex-direction:row;align-items:center;gap:4px;background-color:transparent;padding:0;border:none;min-width:auto}.transport-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:#ffffff0d;border:1px solid var(--secondary-color);border-radius:16px;padding:6px 12px}.transport-separator{width:1px;height:24px;background-color:var(--secondary-color);margin:0 10px}.audio-hands-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;margin-bottom:4px}.playback-hand-switcher{transform:none!important;height:30px;overflow:hidden;display:flex;align-items:stretch}.playback-hand-switcher .segment-btn{padding:0 8px;min-width:24px;font-weight:700;height:100%;border-radius:0}.playback-hand-switcher .segment-btn:first-child{border-radius:18px 0 0 18px}.playback-hand-switcher .segment-btn:last-child{border-radius:0 18px 18px 0}.bpm-toggle-btn{background:transparent;border:1px solid var(--secondary-color);color:var(--text-color);border-radius:8px;padding:0 8px;height:30px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s}.bpm-control-group{display:flex;align-items:center;background:#ffffff0d;border:1px solid var(--secondary-color);border-radius:8px;height:30px;overflow:hidden}.bpm-adjust-btn{background:transparent;border:none;color:var(--text-color);width:24px;height:100%;cursor:pointer;font-weight:700;display:flex;align-items:center;justify-content:center}.bpm-value-input{width:32px;background:transparent;border:none;color:var(--text-color);font-weight:600;font-size:.85rem;text-align:center;padding:0;margin:0;height:100%;-moz-appearance:textfield}.play-circle-btn{width:30px;height:30px;border-radius:50%;border:none;background-color:var(--highlight-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;padding:0;margin-left:.1rem}.test-mode-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#ffffff80;padding:.3rem .8rem;border-radius:12px;font-size:.75rem;cursor:pointer;transition:all .3s ease;font-weight:500;width:100%;display:block}.test-mode-btn:hover{border-color:#22d3ee;color:#22d3ee;background-color:#22d3ee0d}.test-mode-btn.active{background-color:#22d3ee;color:#1b263b;border-color:#22d3ee;font-weight:700;box-shadow:0 0 15px #22d3ee66;transform:scale(1.02)}.segmented-control{display:flex;background-color:var(--secondary-color);border-radius:20px;padding:2px;gap:2px;border:1px solid var(--highlight-color)}.segment-btn{background:transparent;border:none;color:var(--text-color);padding:.2rem .6rem;font-size:.75rem;cursor:pointer;border-radius:18px;transition:background-color .2s,color .2s;font-family:var(--font-family);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.2rem;height:30px;line-height:1}.segment-btn:hover:not(.active){background-color:#ffffff1a}[data-theme=light] .segment-btn:hover:not(.active){background-color:#0000000d}.segment-btn.active{background-color:var(--highlight-color);color:var(--primary-color);font-weight:600}.header-niveau-group{display:flex;align-items:center;gap:6px}.header-niveau-group .header-niveau-label{font-size:.7rem;font-weight:600;color:var(--text-color);opacity:.85;white-space:nowrap}.header-niveau-group .niveau-switcher{padding:2px}.header-niveau-group .niveau-switcher .segment-btn{padding:.15rem .45rem;font-size:.95rem;height:26px}.header-left{display:flex;align-items:center;gap:8px;flex:0 0 auto}.settings-menu-wrap{position:relative;display:inline-flex}.settings-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:300;min-width:220px;padding:6px;background:var(--primary-color);border:1px solid var(--current-outline-color);border-radius:14px;box-shadow:0 12px 32px #00000059;display:flex;flex-direction:column;gap:2px}.settings-dropdown[hidden]{display:none}#settings-dropdown .settings-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:auto;padding:8px 10px;border:none;background:transparent;cursor:pointer;color:var(--text-color);font-family:var(--font-family);font-size:.85rem;font-weight:600;border-radius:9px;text-align:left;white-space:nowrap}#settings-dropdown .settings-item:hover{background:#7f7f7f26}#settings-dropdown .settings-item .si-ico{font-size:1.1rem;line-height:1;display:inline-flex;width:20px;justify-content:center;flex:0 0 auto}#settings-dropdown .settings-item svg{width:18px;height:18px}#settings-dropdown .settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px}#settings-dropdown .settings-row-label{font-size:.85rem;font-weight:600;color:var(--text-color)}#settings-dropdown .settings-row .theme-slider-wrapper{display:flex!important}.settings-dropdown #btn-launch-tutorial{width:100%;height:auto;border-radius:9px;background:transparent;border:none;color:var(--text-color);justify-content:flex-start;font-size:.85rem;margin:0}.settings-dropdown #btn-launch-tutorial:hover{background:#7f7f7f26;color:var(--text-color);box-shadow:none}#toolbox{border-color:#d4af3752}[data-theme=light] #toolbox{border-color:#d4af376b}#toolbox .appmode-switch,#toolbox .header-niveau-group .segmented-control,#toolbox .controls-header .toolbox-toggle-btn,#toolbox .controls-header .icon-btn{border:1px solid rgba(255,255,255,.1);background-color:#ffffff0b}#toolbox .controls-header .icon-btn{width:36px;height:36px;border-radius:11px}#toolbox .controls-header .toolbox-toggle-btn{border-radius:11px;height:36px}#toolbox .header-niveau-group .niveau-switcher{border-radius:11px;padding:3px}#toolbox .header-niveau-group .niveau-switcher .segment-btn{height:30px;border-radius:8px}#toolbox .controls-header .toolbox-toggle-btn:hover,#toolbox .controls-header .icon-btn:hover:not(:disabled){background-color:#ffffff1a;border-color:#fff3;color:var(--text-color);box-shadow:none}#toolbox .nav-tab.active:after{box-shadow:none;height:2px}.hs-ico{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:0 0 auto;color:inherit}#toolbox .nav-tab .nav-tab-icon{display:inline-flex;align-items:center;color:var(--text-color)}#toolbox .nav-tab.active .nav-tab-icon{color:var(--highlight-color)}#toolbox .nav-tab .nav-tab-icon .hs-ico{width:17px;height:17px}#toolbox .header-niveau-group{flex-direction:column;align-items:center;gap:3px;padding:4px 7px 5px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0a}#toolbox .header-niveau-group .header-niveau-label{width:100%;text-align:center;font-weight:600;font-size:.62rem;letter-spacing:.05em;opacity:.82}#toolbox .header-niveau-group .niveau-switcher{border:none;background:transparent;padding:0;border-radius:0}#toolbox .header-niveau-group .niveau-switcher .segment-btn{display:inline-flex;align-items:center;gap:6px;height:auto;padding:5px 10px;border-radius:8px}#toolbox .header-niveau-group .seg-label{font-size:.72rem;font-weight:600;line-height:1}#toolbox .header-niveau-group .hs-ico{width:16px;height:16px}#toolbox .header-niveau-group .segment-btn.active{color:var(--primary-color)}#settings-dropdown .settings-item .si-ico-svg{width:18px;height:18px;flex:0 0 auto}.account-menu-btn .hs-ico{width:19px;height:19px}.toolbox-footer-tools{display:flex;justify-content:safe center;align-items:stretch;flex-wrap:nowrap;gap:.5rem;margin-top:.1rem;width:100%;transition:opacity .3s ease,max-height .3s ease,margin .3s ease;max-height:500px;opacity:1;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}.toolbox-footer-tools.collapsed{max-height:0;opacity:0;margin-top:0;padding:0;pointer-events:none}.tool-group{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:#ffffff08;border:1px solid var(--current-outline-color);border-radius:16px;padding:.25rem .4rem;gap:.2rem;backdrop-filter:blur(5px);height:auto;min-height:70px;position:relative;flex:0 0 auto;min-width:max-content}body.outline-gold .group-visual,body.outline-gold .group-export{border-color:#000!important}.group-palette{background:linear-gradient(var(--primary-color),var(--primary-color)) padding-box,linear-gradient(to right,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7,#ec4899) border-box;border:2px solid transparent!important;padding-left:.6rem;padding-right:.6rem;min-width:max-content}.group-title{font-size:.7rem;text-transform:uppercase;font-weight:700;color:#fff;opacity:1;letter-spacing:.05em;pointer-events:none;margin-bottom:.1rem}.group-content{display:flex;align-items:center;gap:.3rem;width:100%;justify-content:center;flex-grow:1;flex-wrap:wrap}.sub-group{display:flex;align-items:center;gap:.2rem}.sub-group.column-layout{flex-direction:column;align-items:center;justify-content:flex-end;gap:0}@media(max-width:1366px){.toolbox-footer-tools{flex-wrap:wrap}#toolbox .tool-group{flex:1 1 240px;min-width:0}#toolbox .group-visual{flex:0 1 auto;min-width:max-content}#toolbox .group-visual .group-content{flex-wrap:nowrap}#toolbox .group-export{flex:0 0 auto;min-width:0}#toolbox .group-palette{flex:0 1 auto;min-width:0}}body.niveau-decouverte .group-visual .group-content>.sub-group:not(.niveau-selector-group):not(.always-shown){display:none}body.niveau-decouverte .nav-tab[data-mode=creation],body.niveau-decouverte .mobile-menu-item[data-mode=creation]{display:none!important}body.niveau-apprenti .group-visual .group-content>.sub-group:not(.niveau-selector-group):not(.essential):not(.always-shown){display:none}.material-select{padding:0 1rem 0 .5rem;height:30px;font-size:.75rem;background-color:var(--secondary-color);border:1px solid var(--highlight-color);border-radius:14px;color:var(--text-color);cursor:pointer;background-position:right .2rem center;width:60px;max-width:60px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.material-select:focus,.material-select:active{width:60px;max-width:60px}.separator-vertical{width:1px;height:18px;background-color:var(--secondary-color);margin:0 .05rem;opacity:.4}.group-visual{margin-right:0;flex-grow:0;min-width:max-content;padding-left:.8rem;padding-right:.8rem}.group-export{flex-grow:0;min-width:max-content}.toolbox-footer-tools .icon-btn{border:1px solid transparent;width:30px;height:30px}.setting-label-small{font-size:.65rem;text-transform:uppercase;font-weight:600;color:var(--text-color);opacity:.8;margin-bottom:1px;pointer-events:none;white-space:nowrap}[data-theme=light] .setting-label-small{color:#000}.mode-switcher{display:flex;justify-content:center;gap:.5rem;margin-bottom:0rem;background-color:transparent;padding:0;width:100%}.scale-mode-toggle{display:flex;width:100%;height:36px}.btn-audio-preview{background-color:#22d3ee1a;border:1px solid var(--highlight-color);color:var(--text-color);padding:.6rem 1rem;border-radius:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:.8rem;transition:all .2s ease;font-size:.9rem;font-weight:500}.sidebar.mode-logic #harmony-controls{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;margin-bottom:0rem;align-items:start}#logic-preset-container{grid-column:1 / -1;order:10}.unified-control-group{display:flex;flex-direction:column;justify-content:flex-start;gap:.4rem;width:100%;align-items:center}.unified-control-group.mode-control label,.unified-control-group.tonic-control label{margin:0;padding-left:0;white-space:nowrap;text-align:center;width:100%;font-size:.75rem;font-weight:600;color:var(--text-color);opacity:.8}.progression-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;width:100%;margin-bottom:.3rem;padding-bottom:.3rem;border-bottom:1px solid var(--secondary-color);padding-left:.5rem;padding-right:.5rem}.mode-creation #chords-container .progression-header{display:none!important}#btn-optimize-layout{font-size:.8rem;padding:.3rem .6rem;white-space:nowrap;margin:.5rem auto;display:none}.mode-creation #btn-optimize-layout{display:block}.control-group{display:flex;align-items:center;gap:.3rem;padding:.3rem .5rem;border-radius:12px;background-color:#ffffff08;margin-bottom:.3rem;width:100%;flex-wrap:wrap;position:relative;border:.5px solid var(--current-outline-color)!important;overflow:visible;z-index:1;container-type:inline-size}.inversion-menu-container{grid-area:inversions;width:auto;opacity:0;visibility:hidden;transition:opacity .2s ease 1s,visibility 0s 1.2s;display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:4px;padding:4px;border:1px solid #EAB308;border-radius:8px;background-color:var(--primary-color);box-shadow:0 4px 15px #00000080;position:absolute;top:100%;left:.5rem;right:.5rem;transform:none;z-index:9999;box-sizing:border-box}#chord-rows-wrapper.timeline-horizontal .inversion-menu-container{left:-2px;right:-2px}.control-group:hover .inversion-menu-container,.control-group.show-secondary-menus .inversion-menu-container{opacity:1;visibility:visible;transition:opacity .2s ease 0s,visibility 0s 0s}.inversion-modifiers{display:flex;gap:.2rem;width:100%;justify-content:center}.inversion-btn{width:100%;padding:2px 4px;font-size:clamp(.55rem,8cqw,.8rem);border-radius:4px;background:#ffffff0d;border:1px solid transparent;box-sizing:border-box;color:#eab308!important;transition:all .2s;white-space:nowrap;text-align:center}.inversion-btn:hover{background:#eab3081a!important}.inversion-btn.active{font-weight:700!important;background:#eab30833!important}.inversion-hover-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text-color);cursor:pointer;transition:background .2s}.inversion-hover-btn:hover{background:#fff3}.chord-row-main{display:flex;flex-direction:column;flex:1;gap:.2rem;min-width:0}.chord-modifiers-wrapper{width:auto;opacity:0;visibility:hidden;transition:opacity .2s ease 1s,visibility 0s 1.2s;position:absolute;bottom:100%;left:.5rem;right:.5rem;transform:none;margin-bottom:4px;z-index:9999;box-sizing:border-box;background:transparent;padding:0;box-shadow:none}.control-group:hover .chord-modifiers-wrapper,.control-group.show-secondary-menus .chord-modifiers-wrapper{opacity:1;visibility:visible;transition:opacity .2s ease 0s,visibility 0s 0s}.chord-modifiers{display:grid;grid-template-columns:1fr 1fr;gap:.2rem;width:100%;background-color:var(--primary-color);padding:.4rem;border-radius:8px;box-shadow:0 -4px 15px #00000080;border:1px solid #FACC15;box-sizing:border-box}.modifier-btn{width:100%}.chord-actions-row{width:100%;display:flex;justify-content:center}.visual-mode-toggle{margin-bottom:.5rem;width:100%}.mode-logic .visual-mode-toggle{display:none!important}.play-chord-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--text-color)}.play-chord-button:disabled{color:#fff3}.play-chord-button:not(:disabled):hover{color:var(--highlight-color)}.play-chord-icon{width:24px;height:24px;display:block}.play-chord-icon circle{fill:none;stroke:currentColor;stroke-width:2px;opacity:.8}.play-chord-icon path{fill:currentColor}.stop-icon,.playing .play-icon{display:none}.playing .stop-icon{display:initial}.show-path-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;transition:background-color .2s,transform .2s;flex-shrink:0}.show-path-button svg{width:18px;height:18px;fill:var(--text-color);transition:fill .2s}.show-path-button:hover{background-color:var(--secondary-color)}.show-path-button.selected{background-color:#22d3ee1a}.show-path-button.selected svg{fill:var(--highlight-color)}.show-path-button .icon-eye-closed{display:none}.show-path-button.selected .icon-eye-closed{display:block}.show-path-button.selected .icon-eye-open{display:none}.bonus-notes-button{display:none;background:none;border:none;cursor:pointer;padding:0;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;transition:background-color .2s,opacity .2s,filter .2s;flex-shrink:0;font-size:13px;line-height:1;opacity:.45;filter:grayscale(1)}.mode-logic .bonus-notes-button,.mode-creation .bonus-notes-button{display:flex}.bonus-notes-button:not(.disabled):hover{background-color:var(--secondary-color);opacity:.85}.bonus-notes-button.active{background-color:#22d3ee1f;opacity:1;filter:none}.bonus-notes-button.disabled{opacity:.22;filter:grayscale(1);cursor:not-allowed}.sidebar.mode-logic .chord-select{width:100%;pointer-events:none;background-image:none!important;padding-right:.5rem;appearance:none;-webkit-appearance:none;cursor:default}.sidebar.mode-logic .chord-select:disabled{opacity:1;background-color:var(--secondary-color);color:#fff!important;-webkit-text-fill-color:#FFFFFF;text-align:left;padding-left:1rem}#logic-footer{width:100%;margin-top:1rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:.5rem}.tool-button{font-family:var(--font-family);background-color:var(--secondary-color);color:var(--text-color);border:1px solid var(--highlight-color);padding:.5rem 1rem;border-radius:20px;font-size:1rem;cursor:pointer;transition:background-color .2s,box-shadow .2s,border-color .2s,color .2s,opacity .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}.tool-button:hover:not(:disabled){background-color:var(--highlight-color);color:var(--primary-color)}.tool-button:disabled{background-color:var(--secondary-color);opacity:.6;cursor:not-allowed}.tool-button.selected,.tool-button.active{background-color:var(--highlight-color);box-shadow:0 0 15px var(--highlight-color);color:var(--primary-color)}.btn-swap-physical{display:none;padding:0;width:24px;height:24px;border-radius:50%;background-color:transparent;border:1px solid rgba(255,255,255,.2);color:#ffffff80;cursor:pointer;transition:all .2s;font-size:1rem;line-height:1;align-items:center;justify-content:center;margin-right:.5rem}.btn-swap-physical svg,.btn-swap-physical span{transform:none}.mode-creation .btn-swap-physical{display:flex}.mode-logic .btn-swap-physical{display:none!important}.btn-swap-physical:hover{color:#fff;background-color:#ffffff1a}.btn-swap-physical.swap-active{background-color:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);box-shadow:0 0 10px var(--highlight-color);animation:pulse 1s infinite}#eraser-tool.selected{background-color:#ef4444;border-color:#ef4444;color:#fff;box-shadow:0 0 15px #ef444499}.icon-btn{flex-shrink:0;padding:0;width:36px;height:36px;border-radius:12px}.icon-btn svg{width:18px;height:18px}.chord-selection-area{display:flex;flex-direction:column;flex:1;gap:.2rem;min-width:0;position:relative;width:100%}.chord-selection-area .custom-chord-wrapper,.chord-selection-area .custom-select-trigger{width:100%!important;display:flex!important;position:relative}.chord-type-select{width:100%;text-align:center;text-align-last:center}.mode-logic .edit-custom-button{display:none!important}.modifier-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#ffffff80;border-radius:12px;padding:.1rem .2rem;font-size:clamp(.55rem,8cqw,.7rem);cursor:pointer;transition:all .2s;height:24px;display:flex;align-items:center;justify-content:center;white-space:nowrap}[data-theme=light] .modifier-btn{border-color:#0003;color:#00000080}.modifier-btn:hover{border-color:var(--highlight-color);color:var(--highlight-color)}.modifier-btn.active,.modifier-btn.active-seventh{background-color:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);font-weight:600}#chords-panel-title span{font-weight:400!important}div#app:nth-of-type(1)>main:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(6)>div:nth-of-type(1){border:.5px solid var(--current-outline-color)!important}.help-mini-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#ffffff14;color:#ffffffd9;font-size:.75rem;font-weight:800;cursor:pointer;transition:all .15s;padding:0;line-height:1}.help-mini-btn:hover{background:var(--gold-color);color:#1a1410;border-color:var(--gold-color);transform:scale(1.1)}[data-theme=light] .help-mini-btn{border-color:#0000004d;background:#0000000d;color:#000000b3}.sidebar.mode-logic #harmony-controls .vocal-layout-control{grid-column:1 / -1;margin-top:.5rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.08)}.vocal-layout-label{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;white-space:nowrap;text-align:center;width:100%;font-size:.75rem;font-weight:600;color:var(--text-color);opacity:.9}.logic-layout-mode-toggle{width:100%;display:flex;gap:2px}.logic-layout-mode-toggle .segment-btn{flex:1;padding:.5rem .4rem;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logic-mode-help-modal-content{background:linear-gradient(180deg,#1a1f2a,#131722);border:1px solid var(--highlight-color);border-radius:16px;padding:1.2rem 1.4rem;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #0009;color:var(--text-color);position:relative;display:flex;flex-direction:column;width:92%;max-width:680px}.logic-mode-help-modal-content .modal-body{line-height:1.55;font-size:.92rem}.logic-mode-help-modal-content h3{margin:18px 0 8px;font-size:1.05rem;color:var(--gold-color, #D4B062)}.logic-mode-help-modal-content p{margin:.5rem 0}.help-intro-card{background:#d4b0621a;border-left:3px solid var(--gold-color, #D4B062);padding:12px 14px;border-radius:8px;margin-bottom:14px}.help-mode-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;margin:10px 0;overflow:hidden;transition:border-color .2s}.help-mode-card[open]{border-color:#d4b06266;background:#d4b0620a}.help-mode-card summary{padding:10px 14px;cursor:pointer;font-size:1rem;list-style:none;user-select:none;display:flex;align-items:center;gap:6px;transition:background .15s}.help-mode-card summary::-webkit-details-marker{display:none}.help-mode-card summary:after{content:"▾";margin-left:auto;opacity:.6;transition:transform .2s}.help-mode-card[open] summary:after{transform:rotate(180deg)}.help-mode-card summary:hover{background:#ffffff0d}.help-mode-card .help-range{opacity:.6;font-weight:400;font-size:.88rem}.help-mode-content{padding:4px 14px 14px;font-size:.88rem;line-height:1.55}.help-mode-content p{margin:6px 0}.help-practical-steps{line-height:1.75;padding-left:22px}.help-practical-steps li{margin:4px 0}.help-tip-card{background:#22d3ee14;border-left:3px solid #22D3EE;padding:12px 14px;border-radius:8px;margin-top:16px;font-size:.9rem;line-height:1.55}.logic-mode-help-modal-content::-webkit-scrollbar{width:8px}.logic-mode-help-modal-content::-webkit-scrollbar-track{background:#0003;border-radius:4px}.logic-mode-help-modal-content::-webkit-scrollbar-thumb{background:#d4b06266;border-radius:4px}.logic-mode-help-modal-content::-webkit-scrollbar-thumb:hover{background:#d4b06299}.custom-chord-wrapper{position:relative;width:100%;min-width:0}.mode-creation .chord-select,.mode-logic .chord-select{display:none}#chords-container .chord-select,#chord-rows-wrapper.timeline-horizontal .chord-select{display:none!important}.custom-select-trigger{display:none;background-color:var(--secondary-color);color:var(--text-color);border:2px solid var(--secondary-color);padding:.3rem 1rem;border-radius:20px;font-size:.95rem;cursor:pointer;width:100%;flex-direction:row;justify-content:space-between;align-items:center;position:relative;font-weight:500;min-height:auto;text-align:left;transition:background-color .2s,border-color .2s;height:36px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#chords-container .custom-select-trigger{display:flex!important}.custom-select-trigger.logic-mode-trigger{flex-direction:column;justify-content:center;text-align:center;padding:0;gap:0;line-height:normal}.logic-trigger-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:4px;line-height:1.2}.logic-trigger-title{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}.logic-trigger-chord{font-size:1.05rem;opacity:.95;font-weight:700;line-height:1}.mode-creation .custom-select-trigger,.mode-logic .custom-select-trigger{display:flex}.custom-select-trigger>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.custom-select-trigger.logic-mode-trigger:after{display:none}.custom-select-trigger:not(.logic-mode-trigger):after{display:none;content:"";width:.8em;height:.8em;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E1DD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.5;position:absolute;right:10px;top:50%;transform:translateY(-50%) rotate(180deg)}.custom-select-trigger:not(.logic-mode-trigger).no-value:after{display:block}[data-theme=light] .custom-select-trigger:not(.logic-mode-trigger):after{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B263B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E)}.custom-dropdown-menu{display:none;position:fixed;top:0;left:0;width:320px;max-height:400px;overflow-y:auto;background-color:#1b263b;border:1px solid var(--secondary-color);border-radius:16px;z-index:100009!important;box-shadow:0 10px 40px #000000e6;padding:.8rem}.custom-dropdown-menu.open{display:flex;flex-direction:column;gap:.6rem}.tuto-highlighted+.custom-dropdown-menu,.tuto-lift-parent+.custom-dropdown-menu,.custom-dropdown-menu.tuto-lift-parent{z-index:100010!important}.custom-menu-header-row{display:flex;align-items:center;justify-content:space-between;padding:0 .5rem .5rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.2rem;color:var(--highlight-color);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.custom-menu-header-row span{flex:1;text-align:center}.header-separator{width:1px;height:1.2rem;background-color:#fff;opacity:.3;margin:0 .5rem}.custom-menu-swap-header{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:.5rem 0;color:#fff;opacity:.8;gap:.6rem}.custom-menu-swap-header .arrows-icon{font-size:1.2rem;line-height:1;font-weight:700}.custom-menu-swap-header .swap-text{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;font-weight:600}.row-separator{width:2px;background-color:#fffc;margin:0;flex-shrink:0}.custom-menu-none{width:100%;padding:.4rem;text-align:center;background:#ffffff1a;border-radius:8px;color:var(--text-color);cursor:pointer;font-weight:700;font-size:1rem;margin-bottom:.5rem;border:1px dashed var(--secondary-color)}.custom-menu-none:hover{background-color:var(--secondary-color);border-style:solid}.custom-menu-none.logic-none{padding:.3rem;background-color:#0000004d;border:1px solid rgba(255,255,255,.1);margin-bottom:0;margin-top:.5rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.custom-menu-none.logic-none:hover{background-color:#ef444433;border-color:#ef444480;color:#fff}.custom-menu-row{display:flex;gap:0;border-radius:8px;overflow:hidden}.custom-menu-row[data-root=C]{background-color:#dc2626e6}.custom-menu-row[data-root="C#"]{background-color:#ef4444e6}.custom-menu-row[data-root=D]{background-color:#ea580ce6}.custom-menu-row[data-root="D#"]{background-color:#f97316e6}.custom-menu-row[data-root=E]{background-color:#eab308e6}.custom-menu-row[data-root=F]{background-color:#16a34ae6}.custom-menu-row[data-root="F#"]{background-color:#22c55ee6}.custom-menu-row[data-root=G]{background-color:#2563ebe6}.custom-menu-row[data-root="G#"]{background-color:#3b82f6e6}.custom-menu-row[data-root=A]{background-color:#7c3aede6}.custom-menu-row[data-root="A#"]{background-color:#8b5cf6e6}.custom-menu-row[data-root=B]{background-color:#d946efe6}.custom-menu-item{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 4px;line-height:normal;cursor:pointer;font-size:1rem;font-weight:700;color:#fff;transition:background-color .2s,transform .1s;text-shadow:0 1px 3px rgba(0,0,0,.9)}.custom-menu-item.logic-swap-item{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;padding:0;height:44px;overflow:hidden;gap:0;margin-top:4px}.custom-menu-item.logic-swap-item.restricted-conflict{opacity:.6;filter:grayscale(.5);cursor:not-allowed;background-color:#333!important}.custom-menu-item.logic-swap-item.restricted-conflict .item-chord{display:none}.restriction-warning{color:#ff5252;font-size:.65rem;font-weight:700;text-transform:uppercase;display:block;line-height:1;margin-left:auto;padding-left:.5rem;white-space:nowrap}.warning-icon{font-size:1.2rem!important;color:#ff5252;text-shadow:0 0 5px rgba(0,0,0,.5)}.logic-col-action{display:flex;align-items:center;justify-content:center;background-color:transparent;padding:0;flex:0 0 40px;border-left:1px solid rgba(255,255,255,.2);flex-shrink:0;order:2}.logic-col-action .swap-arrows{font-size:1.8rem;line-height:1;display:block}.logic-col-action .action-text{font-size:.7rem;text-transform:uppercase;font-weight:700;letter-spacing:.5px;line-height:1}.logic-col-info{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 .1rem 0 .8rem;gap:.5rem;white-space:nowrap;overflow:hidden;order:1}.logic-col-info .item-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:normal;line-height:1.05;text-align:left;flex-shrink:1}.custom-menu-item.logic-swap-item:not(.restricted-conflict) .item-title{flex:1}.logic-col-info .item-chord{font-size:.95rem;font-weight:600;opacity:.95;background:#0003;padding:2px 6px;border-radius:6px;flex-shrink:0;margin-right:2px}.custom-menu-item.logic-swap-item.active-slot{border:2px solid white}.custom-menu-item.logic-swap-item.active-slot .logic-col-action{background-color:transparent;color:#fff}.custom-menu-item:hover{background-color:#ffffff4d;transform:scale(1.02);z-index:1}.custom-menu-item.disabled{pointer-events:none;opacity:.3;filter:grayscale(1);cursor:not-allowed;background-color:#333!important}.help-trigger-small{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background-color:#ef4444;color:#fff;border:none;font-size:.7rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0000004d;transition:transform .2s,background-color .2s;z-index:10}.help-trigger-small:hover{transform:scale(1.2);background-color:red}#appearance-help-overlay,#chords-help-overlay,#global-help-modal{position:absolute;top:20px;left:50%;transform:translate(-50%);width:90%;max-width:600px;max-height:85vh;background-color:#0d1b2afa;backdrop-filter:blur(10px);border:1px solid #EF4444;border-radius:16px;padding:0;z-index:10000;box-shadow:0 20px 50px #000c;display:flex;flex-direction:column;animation:fadeIn .3s ease-out;overflow:hidden}#appearance-help-overlay.hidden,#chords-help-overlay.hidden,#global-help-modal.hidden{display:none}[data-theme=light] #appearance-help-overlay,[data-theme=light] #chords-help-overlay,[data-theme=light] #global-help-modal{background-color:#fffffffa;border-color:#ef4444;color:#000}.help-header,.help-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:#0d1b2afa;border-bottom:1px solid rgba(255,255,255,.1)}[data-theme=light] .help-header,[data-theme=light] .help-modal-header{background-color:#fffffffa;border-bottom:1px solid rgba(0,0,0,.1)}.help-header h3,.help-modal-header h3{margin:0;color:#ef4444;font-size:1.3rem;font-weight:700}.close-help-btn,.guide-close-x{background:none;border:none;color:#ef4444;font-size:1.5rem;cursor:pointer;padding:0 .5rem;width:32px;height:32px;border-radius:50%;border:2px solid #EF4444;display:flex;align-items:center;justify-content:center;transition:all .2s;font-weight:700}.close-help-btn:hover,.guide-close-x:hover{background-color:#ef4444;color:#fff;transform:rotate(90deg)}.help-content-scrollable{flex:1;overflow-y:auto;padding:1.5rem}.help-section-title{font-size:.85rem;text-transform:uppercase;color:var(--highlight-color);margin-bottom:.4rem;font-weight:700;letter-spacing:1px;margin-top:1rem}.help-section-title:first-child{margin-top:0}.help-table{display:flex;flex-direction:column;gap:.4rem;width:100%}.help-row{display:flex;align-items:center;gap:.8rem;padding:.3rem .5rem;background-color:#ffffff08;border-radius:12px}[data-theme=light] .help-row{background-color:#00000008}.help-icon-cell{flex:0 0 60px;display:flex;justify-content:center;align-items:center;padding-top:0}.icon-mockup{width:36px;height:36px;background-color:var(--secondary-color);border:1px solid var(--highlight-color);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-color);font-weight:700}.segment-mockup{padding:.2rem .5rem;background-color:var(--highlight-color);color:var(--primary-color);border-radius:18px;font-size:.7rem;font-weight:600;white-space:nowrap}.text-mockup{font-size:.75rem;color:var(--highlight-color);border:1px solid rgba(255,255,255,.2);padding:.2rem .4rem;border-radius:12px}.dropdown-mockup{background-color:var(--secondary-color);border:1px solid var(--highlight-color);border-radius:14px;padding:.1rem .5rem;font-size:.7rem;color:var(--text-color)}.help-switch-container{display:flex;background:var(--secondary-color);border:1px solid var(--highlight-color);border-radius:14px;padding:2px;gap:2px;transform:scale(.9)}.help-switch-item{padding:.2rem .4rem;font-size:.65rem;color:var(--text-color);opacity:.7;border-radius:12px;white-space:nowrap}.help-switch-item.active{background:var(--highlight-color);color:var(--primary-color);opacity:1;font-weight:700}.help-pill-icon{width:32px;height:32px;border-radius:50%;background-color:var(--secondary-color);color:var(--text-color);display:flex;align-items:center;justify-content:center;font-size:1rem;border:1px solid transparent}.help-pill-icon.small{width:24px;height:24px;font-size:.8rem}.modifier-mockup-container{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;width:70px}.modifier-mockup{font-size:.6rem;border:1px solid rgba(255,255,255,.2);color:#ffffffb3;padding:2px 4px;border-radius:8px;white-space:nowrap}.help-control-group-mockup{display:flex;flex-direction:column;align-items:center;gap:4px;background:#ffffff0d;padding:4px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.help-play-circle{width:20px;height:20px;background:#22d3ee;color:#1b263b;border-radius:50%;display:flex;align-items:center;justify-content:center}.help-text-cell{flex:1;line-height:1.3}.help-text-cell strong{display:inline-block;color:#ef4444;font-size:.9rem;margin-right:.3rem;margin-bottom:0}.help-text-cell p,.help-text-cell{font-size:.85rem;margin:0;line-height:1.3;opacity:.9;display:inline}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}body.tutorial-active #global-chord-menu,body.tutorial-active #global-help-modal{z-index:1000010!important}body.tutorial-active .modal-overlay{background-color:transparent!important;backdrop-filter:none!important}#btn-launch-tutorial{background:#ffffff1a;border:1px solid var(--highlight-color);color:var(--highlight-color);width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .2s ease;margin-right:10px;position:relative;z-index:100}#btn-launch-tutorial:hover{background:var(--highlight-color);color:var(--primary-color);box-shadow:0 0 10px var(--highlight-color)}.tuto-highlight-text{color:#ef4444;font-weight:800;text-shadow:0 0 10px rgba(239,68,68,.3)}.tuto-inline-icon{display:inline-block;vertical-align:middle;width:1.2em;height:1.2em;margin:0 2px;fill:currentColor;color:var(--highlight-color)}#tutorial-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;z-index:1000000;pointer-events:auto;display:none;opacity:0;transition:opacity .3s ease,background .3s ease}body.tutorial-active #tutorial-overlay{background:transparent!important}#tutorial-overlay.active{display:block;opacity:1}#tuto-welcome-screen{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;background:#0d1b2afa;padding:1.5rem;border-radius:24px;border:2px solid var(--current-outline-color);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:2000000!important;gap:.8rem;animation:zoomIn .5s ease-out forwards;text-align:center;color:#fff;box-shadow:0 20px 80px #000000e6;width:900px;height:550px;max-width:95vw;max-height:90vh;overflow:hidden;box-sizing:border-box}#tuto-welcome-screen.visible{display:flex}.onb-cockpit-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:24px;pointer-events:none}.tuto-welcome-svg{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.04);transform-origin:center 42%;transition:transform 1s cubic-bezier(.6,-.28,.735,.045),opacity 1s ease}.onb-cockpit-scrim{position:absolute;inset:0;z-index:0;border-radius:24px;pointer-events:none;background:linear-gradient(180deg,#0509128c,#0509126b 38%,#0509129e)}.onb-level-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;gap:.8rem}#onb-step-level{position:relative;flex:1 1 auto;align-self:stretch;justify-content:center;box-sizing:border-box}.tuto-welcome-svg.ship-takeoff{transform:translateY(-150vh) scale(.2) rotate(8deg);opacity:0}.onb-step{display:flex;flex-direction:column;align-items:center;width:100%}.onb-handpan-cards{display:flex;gap:1.4rem;margin-top:1.4rem;flex-wrap:wrap;justify-content:center}.onb-handpan-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;background:#ffffff0a;border:2px solid rgba(255,255,255,.12);border-radius:18px;padding:1.1rem 1.3rem 1.2rem;cursor:pointer;width:210px;color:#fff;font-family:inherit;transition:border-color .2s,transform .2s,background-color .2s}.onb-handpan-card:hover{border-color:#22d3ee;transform:translateY(-4px);background:#22d3ee12}.onb-handpan-photo{width:136px;height:136px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:radial-gradient(circle at 35% 28%,#22d3ee14,#080c168c);transition:transform .2s}.onb-handpan-card:hover .onb-handpan-photo{transform:scale(1.04)}.onb-handpan-img{width:132px;height:132px;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(34,211,238,.25))}.onb-handpan-fallback{width:132px;height:132px;align-items:center;justify-content:center;overflow:hidden}.onb-handpan-fallback svg{width:132px;height:132px;display:block}.onb-handpan-name{font-size:1.1rem;font-weight:700;margin-top:.3rem}.onb-handpan-desc{font-size:.8rem;opacity:.7;text-align:center}.tuto-welcome-title{font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:3px;margin:0;background:linear-gradient(to right,#fff,var(--highlight-color));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap}.tuto-welcome-subtitle{font-size:.9rem;opacity:.8;margin-bottom:1rem;white-space:nowrap;max-width:100%;text-align:center}.tuto-level-choice{width:100%;margin:.2rem 0 1.2rem}.tuto-level-q{margin:0 0 .7rem;font-size:1rem;font-weight:600;text-align:center}.tuto-level-cards{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}.tuto-level-card{flex:1 1 0;min-width:140px;max-width:210px;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.9rem .7rem;border-radius:12px;cursor:pointer;background:#ffffff0d;border:2px solid rgba(255,255,255,.12);color:#fff;text-align:center;transition:background .15s ease,border-color .15s ease,transform .1s ease}.tuto-level-card:hover{background:#ffffff1a;border-color:#ffffff59}.tuto-level-card.active{border-color:var(--highlight-color);background:#22d3ee1f}.tuto-level-card .tll-emoji{font-size:1.8rem;line-height:1}.tuto-level-card .tll-ico{width:2rem;height:2rem;display:block;color:var(--highlight-color)}.tuto-level-card .tll-name{font-weight:700;font-size:1rem}.tuto-level-card .tll-desc{font-size:.76rem;opacity:.82;line-height:1.25}.tuto-input{background:#ffffff0d;border:1px solid var(--secondary-color);color:#fff;padding:.8rem 1.2rem;font-size:1.1rem;border-radius:30px;width:350px;max-width:100%;text-align:center;outline:none;transition:all .3s;font-weight:600;backdrop-filter:blur(5px)}.tuto-input:focus{border-color:var(--highlight-color);box-shadow:0 0 30px var(--highlight-color);background:#ffffff1a}.tuto-start-btn{background:var(--highlight-color);color:var(--primary-color);border:none;padding:.8rem 2rem;font-size:1.1rem;font-weight:900;border-radius:40px;cursor:pointer;transition:transform .2s,box-shadow .2s,background-color .2s;text-transform:uppercase;letter-spacing:2px;margin-top:.5rem;box-shadow:0 5px 20px #22d3ee66}.tuto-start-btn:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 10px 40px #22d3ee99;background:#fff}#tutorial-spotlight{position:absolute;border:3px solid var(--highlight-color);border-radius:12px;pointer-events:none!important;transition:all .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease,background-color .3s ease;z-index:1000001;display:none;will-change:transform,width,height,top,left,box-shadow,background-color}#tutorial-spotlight.pulsing:after{content:"";position:absolute;inset:-3px;border-radius:12px;border:2px solid var(--highlight-color);animation:pulse-cyan-target 1.5s infinite;pointer-events:none!important}@keyframes pulse-cyan-target{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0}to{transform:scale(1);opacity:0}}#tutorial-card{position:absolute;width:550px;max-width:90vw;background:#0d1b2afa;border:2px solid var(--current-outline-color);border-radius:20px;padding:1.5rem 2rem;box-shadow:0 10px 30px #000c;z-index:1000010!important;color:var(--text-color);transition:all .3s cubic-bezier(.2,.8,.2,1);opacity:0;display:none;will-change:transform,opacity;pointer-events:auto!important}.tuto-btn{pointer-events:auto!important;cursor:pointer!important}#tutorial-card.tuto-card-horizontal{width:800px;max-width:95vw}#tutorial-card.tuto-card-narrow{width:320px;max-width:90vw}#tutorial-card.visible{opacity:1;display:block}.tuto-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.8rem;gap:1rem;position:relative}.tuto-step-badge{background:var(--secondary-color);color:#fff;font-size:.8rem;font-weight:800;padding:4px 10px;border-radius:8px;text-transform:uppercase;border:1px solid rgba(255,255,255,.2);white-space:nowrap;flex-shrink:0}.tuto-title{font-size:1.1rem;font-weight:700;margin:0;color:var(--highlight-color);text-shadow:0 2px 4px rgba(0,0,0,.5);line-height:1.2;text-align:center;flex:1}.tuto-btn-close-header{background:transparent;border:1px solid #EF4444;color:#ef4444;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:.8rem;line-height:1;transition:all .2s;pointer-events:auto!important}.tuto-btn-close-header:hover{background:#ef4444;color:#fff}.tuto-content{font-size:.85rem;line-height:1.4;margin-bottom:1.5rem;color:#eee;font-weight:400;text-align:left}.tuto-controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:40px}.tuto-btn{padding:.6rem 1.5rem;border-radius:25px;font-size:.9rem;font-weight:700;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;pointer-events:auto}.tuto-btn-prev{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);margin-right:0}.tuto-btn-prev:hover{background:#fff3}.tuto-btn-next{background:var(--highlight-color);color:var(--primary-color);box-shadow:0 4px 10px #0003}.tuto-btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0000004d}.tuto-btn-next.hidden{display:none}.tuto-decision-container{display:flex;flex-direction:column;gap:10px;width:100%}.tuto-btn-decision-primary{background:var(--highlight-color);color:var(--primary-color);padding:1rem;border-radius:12px;font-weight:800;text-transform:uppercase;cursor:pointer;border:none;box-shadow:0 4px 15px #0000004d;transition:transform .2s}.tuto-btn-decision-primary:hover{transform:translateY(-2px);background:#fff}.tuto-btn-decision-secondary{background:transparent;border:2px solid var(--secondary-color);color:#fff;padding:.8rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s}.tuto-btn-decision-secondary:hover{background:#ffffff1a;border-color:#fff}.tuto-pointer-arrow{position:absolute;pointer-events:none;z-index:1000015;overflow:visible}.tuto-pointer-arrow path{fill:none;stroke:#ef4444;stroke-width:3px;stroke-linecap:round;marker-end:url(#arrowhead-red)}.tuto-lift-parent{z-index:auto!important;position:relative;opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important}.modal-overlay.tuto-lift-parent{position:fixed!important;z-index:1000020!important}body.tutorial-active .content-wrapper,body.tutorial-active .main-column,body.tutorial-active .sidebar{z-index:auto!important}.tuto-highlighted{position:relative;z-index:1000005!important;pointer-events:auto!important;cursor:pointer!important;opacity:1!important;filter:none!important;visibility:visible!important}.nav-arrow.tuto-highlighted{position:absolute!important}.tuto-highlighted *{pointer-events:auto!important;cursor:pointer!important}.tuto-highlighted .play-chord-button{color:var(--highlight-color)!important}.tuto-highlighted svg,.tuto-highlighted #handpan-container svg,#handpan-container.tuto-highlighted svg{position:relative!important;pointer-events:auto!important}@keyframes zoomIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tuto-popup-wide{max-width:400px;width:400px}.tuto-popup-side{max-width:300px;width:300px}.tuto-lift-top{z-index:1000020!important}.tuto-highlighted-secondary{position:relative;z-index:1000005!important;pointer-events:auto!important;box-shadow:0 0 0 2px #22d3ee80,0 0 12px #22d3ee4d!important;border-radius:6px;transition:box-shadow .2s ease}.tuto-card-step9{max-width:380px!important;width:380px!important}.tuto-card-step9 #tuto-content{font-size:.85rem!important;line-height:1.4!important}.tuto-card-step9-higher-no-arrow{top:120px!important;transform:none!important;max-width:400px!important;max-height:70vh!important;overflow-y:auto!important}.tuto-card-positioned-top{top:100px!important;transform:none!important;max-width:400px!important;max-height:75vh!important;overflow-y:auto!important}.tuto-card-step24-spaced{max-width:360px!important;max-height:280px!important;overflow-y:auto!important;margin-top:-80px!important}#tutorial-card.tuto-card-over-modal{z-index:1000060!important}.tuto-card-step9-higher{transform:translateY(-180px)!important}.tuto-card-step7-higher{transform:translateY(38px)!important}.tuto-card-sidebar-aligned{top:140px!important;transform:none!important;max-width:380px!important;max-height:60vh!important;overflow-y:auto!important}.tuto-card-step8-higher{top:80px!important;transform:none!important;max-width:380px!important;max-height:75vh!important;overflow-y:auto!important}.tuto-progress-wrap{padding:14px 20px 10px;border-bottom:1px solid rgba(255,255,255,.06)}.tuto-progress-track{position:relative;width:100%;height:6px;background:#ffffff14;border-radius:3px}.tuto-progress-track-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#67e8f9);border-radius:3px;transition:width .5s cubic-bezier(.25,.8,.25,1);box-shadow:0 0 8px #22d3ee66}.tuto-progress-milestones{position:absolute;top:0;left:0;width:100%;height:100%}.tuto-milestone{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#0d1b2a;border:2px solid rgba(255,255,255,.2);transition:all .3s ease;z-index:2}.tuto-milestone.completed{border-color:#22d3ee;background:#22d3ee}.tuto-milestone.active{border-color:#67e8f9;background:#22d3ee;box-shadow:0 0 0 4px #22d3ee40;animation:tutoMilestonePulse 1.6s ease-in-out infinite}@keyframes tutoMilestonePulse{0%,to{box-shadow:0 0 0 4px #22d3ee40}50%{box-shadow:0 0 0 8px #22d3ee1a}}.tuto-progress-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}.tuto-progress-section-name{font-size:.7rem;color:#67e8f9;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.tuto-progress-percent{font-size:.75rem;color:#fff9;font-weight:600;font-variant-numeric:tabular-nums}@keyframes tutoRingPulse{0%,to{box-shadow:0 0 12px #22d3ee99,inset 0 0 12px #22d3ee33;border-color:#22d3ee}50%{box-shadow:0 0 28px #22d3eee6,inset 0 0 24px #22d3ee59;border-color:#67e8f9}}.tuto-card-compact .tuto-content{padding:.6rem 1rem!important;line-height:1.3!important}.tuto-card-compact .tuto-controls{margin-top:.4rem!important;padding-top:.4rem!important}.tuto-card-compact #tuto-content{font-size:.85rem!important}#floating-palette-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}#note-palette{width:100%;height:100%;pointer-events:none}.sp-l-shape-tools{position:absolute;top:10px;left:10px;display:flex;flex-direction:row;align-items:flex-start;gap:6px;pointer-events:none;z-index:60}.sp-tools-vertical{display:flex;flex-direction:column;gap:6px;background-color:#0d1b2ad9;backdrop-filter:blur(8px);border-radius:10px;border:2px solid var(--current-outline-color);box-shadow:0 4px 20px #0006;padding:6px;pointer-events:auto}.sp-tools-horizontal{display:flex;flex-direction:row;gap:6px;background-color:#0d1b2ad9;backdrop-filter:blur(8px);border-radius:10px;border:2px solid var(--current-outline-color);box-shadow:0 4px 20px #0006;padding:6px;pointer-events:auto}[data-theme=light] .sp-tools-vertical,[data-theme=light] .sp-tools-horizontal{background-color:#ffffffd9;border-color:var(--current-outline-color)}.sp-l-shape-tools .sp-tool-btn,.sp-l-shape-tools .sp-octave-btn{width:50px;height:50px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-weight:700;font-size:24px}.sp-l-shape-tools .sp-tool-btn:hover,.sp-l-shape-tools .sp-octave-btn:hover{background:#ffffff26}.sp-l-shape-tools .sp-tool-btn.selected,.sp-l-shape-tools .sp-octave-btn.selected{background:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);box-shadow:0 0 8px #22d3ee33}.sp-arcs-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.sp-notes-arc,.sp-octaves-arc{position:absolute;top:50%;left:50%;width:0;height:0}.arc-layout .sp-note-key{position:absolute;top:50%;left:50%;width:44px;height:44px;margin-top:-22px;margin-left:-22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;transform:rotate(var(--arc-angle)) translateY(calc(-1 * var(--arc-radius, 220px))) rotate(calc(var(--arc-angle) * -1)) scale(var(--arc-scale, 1));transition:filter .3s,box-shadow .3s,scale .3s;box-shadow:0 4px 10px #00000080;pointer-events:auto;cursor:pointer;border:2px solid transparent}body.is-resizing .arc-layout .sp-note-key{transition:none!important}.arc-layout .sp-note-key:hover{filter:brightness(1.2);transform:rotate(var(--arc-angle)) translateY(calc(-1 * var(--arc-radius, 220px) - 5px)) rotate(calc(var(--arc-angle) * -1)) scale(calc(var(--arc-scale, 1) * 1.1))}.arc-layout .sp-left-col,.arc-layout .sp-right-col{display:none}#note-palette::-webkit-scrollbar{display:none}[data-theme=light] #note-palette{background-color:#fffffff2;border-color:#0000001a}.sp-left-col{display:flex;flex-direction:column;width:28px;flex-shrink:0;gap:2px;position:sticky;left:0;z-index:10}.sp-mode-btn-vertical{flex:1;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;font-size:.9rem;padding:0;transition:all .2s;min-height:0}.sp-mode-btn-vertical:hover{background:#ffffff26}.sp-mode-btn-vertical.active{background:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);box-shadow:0 0 8px #22d3ee33}.sp-right-col{display:flex;flex-direction:column;flex:1;gap:2px;min-width:0}.sp-header-row{display:flex;align-items:stretch;gap:2px;height:28px}.sp-note-key{flex:1.5;min-width:36px;height:100%;border-radius:6px;border:2px solid transparent;box-sizing:border-box;font-weight:800;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease;color:#fff}.sp-note-key.sharp{flex:1;min-width:28px}.sp-header-tools-wrapper{display:flex;gap:2px;width:90px;flex-shrink:0;margin-left:2px}.sp-expand-btn{width:24px;background:#ffffff1a;border:none;color:var(--text-color);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:background-color .2s;margin-left:2px;background:#22d3ee1a;border:1px solid rgba(34,211,238,.2)}.sp-expand-btn:hover{background:#22d3ee4d}.sp-expand-btn.active{background:var(--highlight-color);color:var(--primary-color)}.sp-top-tools{display:flex;gap:2px;flex:1}.sp-compact-row{display:flex;align-items:stretch;gap:2px;height:24px}.sp-octave-btn{flex:1;min-width:36px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-color);border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:700;padding:0;transition:all .2s;display:flex;align-items:center;justify-content:center}.sp-octave-btn:hover{background:#ffffff26}.sp-octave-btn.selected{background:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color)}.sp-bottom-tools-wrapper{width:90px;flex-shrink:0;display:flex;gap:2px;margin-left:2px}.sp-tool-btn{flex:1;height:100%;border-radius:6px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:var(--text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .2s;padding:0}.sp-tool-btn svg{width:24px;height:24px}.sp-compact-row .sp-tool-btn{font-size:.8rem;border-radius:4px}.sp-compact-row .sp-tool-btn svg{width:14px;height:14px}.sp-tool-btn:hover{background:#ffffff26;border-color:#fff}.sp-tool-btn.selected{background:#ef4444;border-color:#ef4444;color:#fff}.sp-grid-container{display:flex;flex-direction:row;gap:2px;padding-top:0;width:100%}.sp-grid-column{display:flex;flex-direction:column;gap:2px;flex:1.5;min-width:36px}.sp-grid-column.sharp{flex:1;min-width:28px}.sp-grid-note{width:100%;height:24px;border-radius:4px;border:2px solid transparent;box-sizing:border-box;font-size:.75rem;font-weight:700;cursor:pointer;color:#fff;background-color:#ffffff1a;transition:transform .1s;display:flex;align-items:center;justify-content:center;padding:0}.sp-grid-note:hover{transform:scale(1.05);z-index:2}.sp-grid-note.selected{border:2px solid white;box-shadow:0 0 10px #fff;z-index:10}.sp-grid-note[data-fullnote$="2"]{filter:brightness(.75)}.sp-grid-note[data-fullnote$="3"]{filter:brightness(.85)}.sp-grid-note[data-fullnote$="4"]{filter:brightness(.95)}.sp-grid-tools{display:flex;flex-direction:column;gap:2px;width:90px;margin-left:2px;flex-shrink:0}.sp-grid-tool-btn{width:100%;height:24px;background:#ffffff0d;border:none;border-radius:4px;color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center}.sp-grid-tool-btn:hover{background:#fff3}.sp-grid-tool-btn.selected{background:#ef4444;color:#fff}.sp-grid-tool-btn svg{width:14px;height:14px}.palette-mode-chakra .sp-note-key[data-note=C]{background:var(--chakra-c)}.palette-mode-chakra .sp-note-key[data-note="C#"]{background:var(--chakra-cs)}.palette-mode-chakra .sp-note-key[data-note=D]{background:var(--chakra-d)}.palette-mode-chakra .sp-note-key[data-note="D#"]{background:var(--chakra-ds)}.palette-mode-chakra .sp-note-key[data-note=E]{background:var(--chakra-e)}.palette-mode-chakra .sp-note-key[data-note=F]{background:var(--chakra-f)}.palette-mode-chakra .sp-note-key[data-note="F#"]{background:var(--chakra-fs)}.palette-mode-chakra .sp-note-key[data-note=G]{background:var(--chakra-g)}.palette-mode-chakra .sp-note-key[data-note="G#"]{background:var(--chakra-gs)}.palette-mode-chakra .sp-note-key[data-note=A]{background:var(--chakra-a)}.palette-mode-chakra .sp-note-key[data-note="A#"]{background:var(--chakra-as)}.palette-mode-chakra .sp-note-key[data-note=B]{background:var(--chakra-b)}.sp-note-key.selected{box-shadow:0 0 0 2px #fff,0 0 15px #ffffff80;z-index:10}.palette-mode-chakra .sp-grid-note[data-base=C]{background:var(--chakra-c);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base="C#"]{background:var(--chakra-cs);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=D]{background:var(--chakra-d);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base="D#"]{background:var(--chakra-ds);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=E]{background:var(--chakra-e);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=F]{background:var(--chakra-f);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base="F#"]{background:var(--chakra-fs);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=G]{background:var(--chakra-g);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base="G#"]{background:var(--chakra-gs);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=A]{background:var(--chakra-a);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base="A#"]{background:var(--chakra-as);border:1px solid rgba(255,255,255,.2)}.palette-mode-chakra .sp-grid-note[data-base=B]{background:var(--chakra-b);border:1px solid rgba(255,255,255,.2)}.palette-mode-piano .sp-note-key.natural{background:#fff;color:#000;border-bottom:3px solid #CCC}.palette-mode-piano .sp-note-key.sharp{background:#111;color:#fff;border:2px solid #FFFFFF}.palette-mode-chakra .sp-note-key.note-placed,.palette-mode-chakra .sp-grid-note.note-placed{border-color:#fff!important;box-shadow:0 0 8px #fffc;z-index:5}.palette-mode-piano .sp-note-key.note-placed[data-note=C],.palette-mode-piano .sp-grid-note.note-placed[data-base=C]{border-color:var(--chakra-c)!important;box-shadow:0 0 8px var(--chakra-c)}.palette-mode-piano .sp-note-key.note-placed[data-note="C#"],.palette-mode-piano .sp-grid-note.note-placed[data-base="C#"]{border-color:var(--chakra-cs)!important;box-shadow:0 0 8px var(--chakra-cs)}.palette-mode-piano .sp-note-key.note-placed[data-note=D],.palette-mode-piano .sp-grid-note.note-placed[data-base=D]{border-color:var(--chakra-d)!important;box-shadow:0 0 8px var(--chakra-d)}.palette-mode-piano .sp-note-key.note-placed[data-note="D#"],.palette-mode-piano .sp-grid-note.note-placed[data-base="D#"]{border-color:var(--chakra-ds)!important;box-shadow:0 0 8px var(--chakra-ds)}.palette-mode-piano .sp-note-key.note-placed[data-note=E],.palette-mode-piano .sp-grid-note.note-placed[data-base=E]{border-color:var(--chakra-e)!important;box-shadow:0 0 8px var(--chakra-e)}.palette-mode-piano .sp-note-key.note-placed[data-note=F],.palette-mode-piano .sp-grid-note.note-placed[data-base=F]{border-color:var(--chakra-f)!important;box-shadow:0 0 8px var(--chakra-f)}.palette-mode-piano .sp-note-key.note-placed[data-note="F#"],.palette-mode-piano .sp-grid-note.note-placed[data-base="F#"]{border-color:var(--chakra-fs)!important;box-shadow:0 0 8px var(--chakra-fs)}.palette-mode-piano .sp-note-key.note-placed[data-note=G],.palette-mode-piano .sp-grid-note.note-placed[data-base=G]{border-color:var(--chakra-g)!important;box-shadow:0 0 8px var(--chakra-g)}.palette-mode-piano .sp-note-key.note-placed[data-note="G#"],.palette-mode-piano .sp-grid-note.note-placed[data-base="G#"]{border-color:var(--chakra-gs)!important;box-shadow:0 0 8px var(--chakra-gs)}.palette-mode-piano .sp-note-key.note-placed[data-note=A],.palette-mode-piano .sp-grid-note.note-placed[data-base=A]{border-color:var(--chakra-a)!important;box-shadow:0 0 8px var(--chakra-a)}.palette-mode-piano .sp-note-key.note-placed[data-note="A#"],.palette-mode-piano .sp-grid-note.note-placed[data-base="A#"]{border-color:var(--chakra-as)!important;box-shadow:0 0 8px var(--chakra-as)}.palette-mode-piano .sp-note-key.note-placed[data-note=B],.palette-mode-piano .sp-grid-note.note-placed[data-base=B]{border-color:var(--chakra-b)!important;box-shadow:0 0 8px var(--chakra-b)}.palette-mode-piano .sp-note-key.selected[data-note=C],.palette-mode-piano .sp-grid-note.selected[data-base=C]{background:var(--chakra-c)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note="C#"],.palette-mode-piano .sp-grid-note.selected[data-base="C#"]{background:var(--chakra-cs)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=D],.palette-mode-piano .sp-grid-note.selected[data-base=D]{background:var(--chakra-d)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note="D#"],.palette-mode-piano .sp-grid-note.selected[data-base="D#"]{background:var(--chakra-ds)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=E],.palette-mode-piano .sp-grid-note.selected[data-base=E]{background:var(--chakra-e)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=F],.palette-mode-piano .sp-grid-note.selected[data-base=F]{background:var(--chakra-f)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note="F#"],.palette-mode-piano .sp-grid-note.selected[data-base="F#"]{background:var(--chakra-fs)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=G],.palette-mode-piano .sp-grid-note.selected[data-base=G]{background:var(--chakra-g)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note="G#"],.palette-mode-piano .sp-grid-note.selected[data-base="G#"]{background:var(--chakra-gs)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=A],.palette-mode-piano .sp-grid-note.selected[data-base=A]{background:var(--chakra-a)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note="A#"],.palette-mode-piano .sp-grid-note.selected[data-base="A#"]{background:var(--chakra-as)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-note-key.selected[data-note=B],.palette-mode-piano .sp-grid-note.selected[data-base=B]{background:var(--chakra-b)!important;color:#fff;border-color:#fff;filter:brightness(1.2)}.palette-mode-piano .sp-grid-note.natural{background:#fff;color:#000;border:2px solid #CCC}.palette-mode-piano .sp-grid-note.sharp{background:#111;color:#fff;border:2px solid #FFFFFF}.sp-note-key.playing,.sp-grid-note.playing{filter:brightness(1.5);transform:scale(1.1);z-index:20}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;z-index:1000;display:flex;justify-content:center;align-items:center;padding:1rem;backdrop-filter:blur(5px);animation:modalOverlayFadeIn .18s ease-out}.modal-overlay.hidden{display:none}.partition-modal-content{background-color:var(--primary-color);border-radius:16px;border:1px solid var(--secondary-color);box-shadow:0 10px 40px #000000b3;width:95%;max-width:1200px;height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:modalContentSlideIn .22s cubic-bezier(.2,.7,.2,1);transform-origin:center center}@keyframes modalOverlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalContentSlideIn{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.partition-editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--bg-color);border-bottom:1px solid var(--secondary-color)}.partition-editor-header h3{margin:0;font-weight:600;color:var(--text-color)}.header-actions{display:flex;align-items:center;gap:1rem}.export-hint{display:flex;align-items:center;gap:8px;font-size:1.25rem;font-weight:700;color:#fff;white-space:nowrap;margin-right:2px;user-select:none}.export-hint-arrow{font-size:1.6rem;line-height:1;display:inline-block;color:#fff}.partition-editor-body{display:flex;flex:1;overflow:hidden;flex-direction:column;position:relative}@media(min-width:800px){.partition-editor-body{flex-direction:row}}@media(max-width:799px){.partition-editor-body{flex-direction:column-reverse}}.partition-settings{background-color:var(--primary-color);padding:1.5rem;overflow-y:auto;border-right:1px solid var(--secondary-color);display:flex;flex-direction:column;gap:1rem;flex-basis:350px;flex-shrink:0;transition:transform .3s cubic-bezier(.25,.8,.25,1),min-width .3s,padding .3s,opacity .3s,flex-basis .3s;position:relative;z-index:20}.toggle-panel-btn{position:absolute;top:1.2rem;left:350px;background:var(--primary-color);border:1px solid var(--secondary-color);border-left:none;color:var(--text-color);width:24px;height:60px;border-radius:0 12px 12px 0;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.25,.8,.25,1),background-color .2s,color .2s,transform .3s;z-index:50;box-shadow:4px 0 10px #0000001a}.toggle-panel-btn:hover{background:var(--secondary-color);color:var(--highlight-color)}.partition-editor-body.settings-collapsed .partition-settings{transform:translate(-100%);min-width:0;width:0;flex-basis:0;padding-left:0;padding-right:0;opacity:0;overflow:visible}.partition-editor-body.settings-collapsed .toggle-panel-btn{left:0;transform:rotate(180deg);border-left:1px solid var(--secondary-color)}@media(max-width:799px){.partition-settings{flex-basis:auto;max-height:40%;border-right:none;border-bottom:1px solid var(--secondary-color)}.toggle-panel-btn{display:none}}.partition-settings h4{margin-top:0;color:var(--highlight-color);border-bottom:1px solid var(--secondary-color);padding-bottom:.5rem}.partition-settings-group{background-color:var(--bg-color);border-radius:12px;padding:1rem;border:1px solid var(--secondary-color);display:flex;flex-direction:column;gap:.8rem}.settings-section-title{margin:0;font-size:.9rem;color:var(--highlight-color);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.2rem}.setting-row{display:flex;justify-content:space-between;align-items:center}.setting-row .label-group{display:flex;align-items:center;gap:.8rem}.setting-sub-row{margin-left:.5rem;margin-top:-.2rem;margin-bottom:.5rem}.setting-sub-row.help-text{font-style:italic;font-size:.8em;opacity:.7;margin-top:-.5rem;margin-bottom:.5rem}.setting-label{font-size:.95rem}.label-bold{font-weight:600}.partition-settings .material-select{width:auto!important;min-width:140px}#partition-editor-modal[data-song-mode] #btn-export-batch,#partition-editor-modal[data-song-mode] .export-separator,#partition-editor-modal[data-song-mode] #part-section-layout,#partition-editor-modal[data-song-mode] #row-handpan-notes-toggle,#partition-editor-modal[data-song-mode] #row-diagrams-toggle,#partition-editor-modal[data-song-mode] #part-opt-frames,#partition-editor-modal[data-song-mode] #section-diagram-appearance,#partition-editor-modal[data-song-mode] #part-opt-diagram-numbers,#partition-editor-modal[data-song-mode] #part-opt-secondary-notes{display:none!important}#partition-editor-modal[data-song-mode] .pill-group label:has(#part-opt-frames),#partition-editor-modal[data-song-mode] .pill-group label:has(#part-opt-single-line-diagrams),#partition-editor-modal[data-song-mode] .pill-group label:has(#part-opt-secondary-notes),#partition-editor-modal[data-song-mode] .pill-group label:has(#part-opt-diagram-numbers){display:none!important}.pill-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}.pill-checkbox{cursor:pointer;user-select:none;flex:1 0 45%;min-width:100px}.pill-checkbox input{display:none}.pill-label{display:flex;justify-content:center;align-items:center;padding:.5rem .2rem;background-color:var(--primary-color);border:1px solid var(--secondary-color);border-radius:8px;font-size:.8rem;transition:all .2s ease;color:var(--text-color);text-align:center;width:100%}.pill-checkbox input:checked+.pill-label{background-color:var(--highlight-color);color:var(--primary-color);border-color:var(--highlight-color);font-weight:600}.legend-control-bar{display:flex;align-items:stretch;background-color:var(--secondary-color);border-radius:16px;padding:2px;border:1px solid var(--highlight-color);flex-wrap:wrap}.legend-control-bar.centered{width:fit-content;margin:0 auto}.legend-btn{background:transparent;border:none;color:var(--text-color);padding:.5rem .6rem;font-size:.8rem;cursor:pointer;border-radius:14px;font-family:var(--font-family);transition:background-color .2s,color .2s;white-space:nowrap;flex:1;display:flex;align-items:center;justify-content:center;gap:.2rem}.legend-btn:hover{background-color:#ffffff1a}.legend-btn.active{background-color:var(--highlight-color);color:var(--primary-color);font-weight:600}.theme-toggle-btn{cursor:pointer;display:block;width:100%}.theme-toggle-btn input{display:none}.theme-toggle-content{background-color:var(--primary-color);border:2px solid var(--secondary-color);border-radius:12px;padding:.75rem;display:flex;align-items:center;gap:1rem;transition:all .2s ease}.theme-toggle-content .icon{font-size:1.5rem}.theme-toggle-content .label{font-weight:600}.theme-toggle-btn input:checked+.theme-toggle-content{border-color:#22c55e;background-color:#22c55e1a}.partition-actions{margin-top:0}.export-buttons-grid{display:flex;flex-direction:column;gap:0}.export-separator{width:100%;height:1px;background-color:var(--secondary-color);margin:.5rem 0;opacity:.5}.view-mode-switch{display:flex;gap:.25rem;padding:.25rem;background-color:var(--secondary-color);border-radius:12px;width:100%}.view-mode-btn{flex:1;padding:.75rem .5rem;background-color:transparent;border:none;color:var(--text-color);font-family:var(--font-family);font-size:.85rem;border-radius:10px;cursor:pointer;transition:background-color .2s,color .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;position:relative;min-height:70px}.export-buttons-grid .view-mode-btn{flex-direction:row;justify-content:flex-start;padding-left:1rem;min-height:50px;background-color:var(--primary-color);border:1px solid transparent}.export-buttons-grid .view-mode-btn:hover{background-color:var(--secondary-color);border-color:var(--highlight-color)}.view-mode-btn svg{width:24px;height:24px;fill:currentColor;flex-shrink:0;opacity:.8}.view-mode-btn span{text-align:center;font-size:.8rem}.view-mode-btn.active{background-color:var(--highlight-color);color:var(--primary-color);font-weight:600}#part-section-layout .view-mode-btn{flex-direction:row;padding:.5rem;min-height:40px}#part-section-layout .view-mode-btn svg{width:18px;height:18px}.partition-preview-container{flex:1;background-color:#333;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:flex-grow .3s ease-in-out;min-width:0}.partition-scroll-area{flex:1;width:100%;height:100%;overflow:auto;display:block;padding:2rem;box-sizing:border-box}#partition-scroll-frame{margin:0 auto;flex-shrink:0;position:relative;background-color:transparent;transition:width .2s,height .2s;display:flex;width:fit-content;flex-direction:column;gap:2rem}.zoom-controls{position:absolute;bottom:1rem;right:1rem;z-index:50;display:flex;flex-direction:column;align-items:center;gap:.3rem;background-color:#0009;padding:.5rem;border-radius:12px;backdrop-filter:blur(5px)}#zoom-level-text{color:#fff;font-size:.8rem;font-weight:600}.zoom-buttons-row{display:flex;gap:.5rem}.zoom-controls .icon-btn{background-color:var(--secondary-color);border:none}.partition-paper{background-color:var(--bg-color);width:210mm;height:297mm;box-shadow:0 0 20px #00000080;padding:10mm;box-sizing:border-box;transition:background-color .3s ease,color .3s ease;display:flex;flex-direction:column;color:var(--text-color);flex-shrink:0;transform-origin:top left;margin:0;overflow:hidden;position:relative}.partition-paper.sequence-mode{width:297mm!important;height:210mm!important}.partition-paper.song-page{height:auto;min-height:auto}.partition-paper.song-page .song-sheet-columns{height:auto;flex:0 0 auto}.partition-header{width:100%;text-align:center;margin-bottom:1rem}.partition-title{font-size:2.2rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;line-height:1.2;cursor:text}.partition-title:hover,.partition-author:hover{background-color:#ffffff1a;border-radius:4px}.partition-author{font-size:1.2rem;opacity:.8;margin-top:.2rem;font-style:italic;cursor:text}.partition-paper.mode-complete{display:flex;flex-direction:column}.partition-paper.mode-complete .partition-main-handpan{flex:0 1 45%!important;min-height:200px;margin-bottom:1rem}.partition-paper.mode-complete .partition-sequence-grid{flex:1 1 auto;height:auto!important;display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:center!important;gap:4px;margin-top:0}.partition-paper.mode-complete .partition-sequence-grid.layout-7-items{flex-wrap:wrap!important;align-content:flex-start}.partition-paper.mode-complete .partition-sequence-grid.layout-7-items .partition-sequence-item{width:calc(25% - 3px)!important;height:auto!important;aspect-ratio:1/1;flex:0 0 auto;max-height:150px}.partition-paper.mode-complete .partition-sequence-grid:not(.layout-7-items) .partition-sequence-item{padding:0!important;flex:1 1 0px;max-width:none!important;aspect-ratio:auto!important;height:auto!important}.partition-main-handpan{flex:1;width:100%;display:flex;justify-content:center;align-items:center;min-height:0}.partition-main-handpan svg{max-width:100%;max-height:100%;height:auto;width:auto}.partition-main-handpan.notes-hidden .note-text{display:none!important}.partition-sequence-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:4px;width:100%;height:100%;min-height:0;margin:0;padding:0}.partition-sequence-grid.hide-notes .note-text,.partition-sequence-grid.hide-notes .note-text-bg{display:none!important}.partition-sequence-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;box-sizing:border-box;border-radius:16px;padding:2px;transition:all .2s;width:auto;height:auto;flex-grow:0;flex-shrink:0;overflow:hidden}.partition-paper:not(.sequence-mode) .partition-sequence-grid:not(.diagrams-single-line) .partition-sequence-item{width:calc(50% - 2px);height:calc(33.333% - 3px)}.partition-paper.sequence-mode .partition-sequence-grid.layout-7-items:not(.diagrams-single-line) .partition-sequence-item{width:calc(25% - 3px)!important;height:38%!important;max-height:none;flex-grow:0}.partition-paper:not(.sequence-mode) .partition-sequence-grid.layout-7-items:not(.diagrams-single-line) .partition-sequence-item{width:calc(50% - 2px)!important;height:calc(25% - 3px)!important;max-height:none;flex-grow:0}.partition-paper .partition-sequence-grid.layout-7-items{align-content:center;justify-content:center}.partition-paper.sequence-mode .partition-sequence-grid:not(.diagrams-single-line):not(.layout-7-items) .partition-sequence-item{width:calc(33.333% - 3px);height:calc(50% - 2px)}.partition-sequence-grid.diagrams-single-line{display:flex;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;height:auto!important;flex:0 0 auto;margin:auto 0;gap:4px}.diagrams-single-line .partition-sequence-item,.partition-paper.sequence-mode .diagrams-single-line .partition-sequence-item{width:auto;height:auto;flex:1 1 120px;min-width:100px;max-width:450px;aspect-ratio:1/1;padding:2px}.partition-paper.sequence-mode .diagrams-single-line{min-height:70%;align-items:center!important}.partition-paper.sequence-mode .diagrams-single-line .partition-sequence-item{max-height:90%;aspect-ratio:1 / 1;height:auto!important}.mini-handpan-svg-container{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;overflow:hidden}.mini-handpan-svg{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;display:block;background-color:transparent;overflow:visible}.partition-chord-name{display:block;width:100%;text-align:center;font-weight:700}.partition-chord-name[contenteditable]:hover{background-color:#ffffff1a;border-radius:4px;cursor:text}.partition-chord-item.emotion-layout .partition-chord-name{text-align:center!important;display:flex;justify-content:center;align-items:center}.partition-chord-notes{font-size:.8em;margin-top:.2rem;display:block;color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}.partition-footer{margin-top:auto;padding-top:1rem;flex-shrink:0;width:100%;text-align:center;font-size:.8rem;opacity:.7}.song-sheet-wrapper{width:100%;padding:0;flex:1;min-height:0}.song-sheet-columns{column-count:2;column-gap:2rem;column-rule:1px solid rgba(255,255,255,.1);width:100%;height:100%;flex:1;column-fill:balance;margin-right:-10px}.theme-eco .song-sheet-columns{column-rule:1px solid rgba(0,0,0,.1)}.song-section-header{font-weight:800;text-transform:uppercase;color:var(--highlight-color);margin-bottom:.2rem;margin-top:-.2rem;font-size:.9rem;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:2px;break-after:avoid;column-span:all}.theme-eco .song-section-header{color:#000;border-bottom:2px solid #000}.song-line{position:relative;padding-top:66px;padding-left:28px;padding-right:5px;margin-bottom:.45rem;break-inside:avoid;white-space:nowrap;line-height:1.3}.song-lyrics-line{display:inline-block;font-size:.95rem;font-weight:500;white-space:pre;color:var(--text-color)}.theme-eco .song-lyrics-line{color:#000}.song-segment{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;margin-right:4px;vertical-align:bottom;white-space:nowrap;min-width:20px}.song-chord-diagram{position:absolute;top:0;left:0;transform:translate(-50%);width:45px;height:45px;display:flex;flex-direction:column;align-items:center;transition:left .05s ease-out;cursor:grab}.song-chord-diagram:active,.song-chord-diagram.is-dragging{cursor:grabbing}.chord-shifter-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100%;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .2s ease;z-index:20;pointer-events:none}.song-chord-diagram:hover .chord-shifter-overlay{opacity:1;pointer-events:auto}.song-chord-diagram.is-dragging .chord-shifter-overlay{opacity:.2;pointer-events:none}.drag-zone{font-size:1.2rem;cursor:grab;pointer-events:auto}.shift-btn{background-color:var(--highlight-color);color:var(--primary-color);border:none;border-radius:50%;width:20px;height:20px;font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #00000080;transition:transform .1s;z-index:30;pointer-events:auto}.shift-btn:hover{transform:scale(1.2)}.shift-btn:active{transform:scale(.9)}.theme-eco .shift-btn{background-color:#000;color:#fff}.song-chord-label{font-size:.85rem;font-weight:800;text-align:center;color:var(--highlight-color);z-index:2;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;margin-top:2px;padding-bottom:0}.song-chord-label[contenteditable]:hover{background-color:#ffffff1a;border-radius:4px;cursor:text}.song-lyrics{font-size:.95rem;font-weight:500;white-space:pre;color:var(--text-color);line-height:1.2}.theme-eco .song-lyrics{color:#000}.theme-eco .song-chord-label{text-shadow:none;font-weight:800}.partition-paper{background-color:var(--bg-color);color:var(--text-color)}.theme-eco.partition-paper{background-color:#fff!important;color:#000!important}.theme-eco .partition-chord-item .partition-chord-notes{color:#000;text-shadow:none}.theme-eco .mini-handpan-svg.show-texture.material-black .handpan-body{fill:url(#grad-black)}.theme-eco .mini-handpan-svg.show-texture.material-metal .handpan-body{fill:url(#grad-metal)}.theme-eco .mini-handpan-svg.show-texture.material-walnut .handpan-body{fill:url(#grad-walnut)}.theme-eco .mini-handpan-svg.show-texture.material-beech .handpan-body{fill:url(#grad-beech)}.theme-eco .mini-handpan-svg.show-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.theme-eco .mini-handpan-svg.show-texture.material-neotone .handpan-body,.theme-eco .mini-handpan-svg.show-texture.material-white .handpan-body{fill:#fff;stroke:#000}@media print{body>*{display:none!important}#partition-editor-modal{display:block!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:auto!important;background:none!important;padding:0!important;overflow:visible!important;visibility:visible!important}.song-page{margin:0!important;box-shadow:none!important;page-break-after:always;width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important}.partition-paper{box-shadow:none!important;margin:0!important;padding:0!important;width:210mm!important;height:297mm!important;max-width:none!important;max-height:none!important;background-color:#0d1b2a!important;color:#e0e1dd!important;page-break-after:always;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.partition-paper:last-child{page-break-after:auto}.chord-shifter-overlay{display:none!important}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;background-color:inherit!important;color:inherit!important}html,body{background-color:#0d1b2a!important;color:#e0e1dd!important}}#handpan-container{position:relative;flex:0 0 auto;min-width:0;width:65%;max-width:480px;aspect-ratio:1 / 1;border-radius:50%;transition:margin-top .3s cubic-bezier(.4,0,.2,1);margin-left:auto;margin-right:auto}#handpan-container svg{width:100%;height:100%;display:block;overflow:visible}#handpan-container svg{width:100%;height:100%}#handpan-resize-handle{position:absolute;top:50%;right:-35px;left:auto;width:44px;height:44px;margin-top:-22px;margin-left:0;border-radius:50%;background-color:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:ew-resize;z-index:100;font-size:1.2rem;opacity:.6;transition:opacity .2s,background-color .2s;user-select:none;box-shadow:0 4px 10px #0000004d}#handpan-resize-handle:hover,#handpan-resize-handle:active{opacity:1;background-color:#ffffff4d}[data-theme=light] #handpan-resize-handle{color:#000;border-color:#0000004d}.handpan-body{filter:drop-shadow(5px 10px 10px rgba(0,0,0,.5))}#handpan-container .handpan-body,.partition-main-handpan .handpan-body{stroke:var(--current-outline-color);stroke-width:2px}[data-theme=light] #handpan-container .handpan-body{stroke:#000}#handpan-container .note-circle-base,.partition-main-handpan .note-circle-base{fill:var(--note-default-fill);stroke:var(--secondary-color);stroke-width:2px;transition:fill .3s ease,filter .2s ease,stroke .2s,stroke-width .2s}body.app-acoustic #handpan-container .note-circle-base{stroke-width:1.1px}#handpan-container.material-black .note-circle-base,#handpan-container.material-metal .note-circle-base,#handpan-container.material-walnut .note-circle-base,#handpan-container.material-beech .note-circle-base,#handpan-container.material-oak .note-circle-base,#handpan-container.material-real-metal .note-circle-base,#handpan-container.material-metal-realistic .note-circle-base,#handpan-container.material-neotone-walnut .note-circle-base,#handpan-container.material-metal-new .note-circle-base,#handpan-container.material-hetre-new .note-circle-base,#handpan-container.material-noyer-new .note-circle-base,.partition-main-handpan.material-black .note-circle-base,.partition-main-handpan.material-metal .note-circle-base,.partition-main-handpan.material-walnut .note-circle-base,.partition-main-handpan.material-beech .note-circle-base,.partition-main-handpan.material-oak .note-circle-base,.partition-main-handpan.material-real-metal .note-circle-base,.partition-main-handpan.material-metal-realistic .note-circle-base,.partition-main-handpan.material-neotone-walnut .note-circle-base,.partition-main-handpan.material-metal-new .note-circle-base,.partition-main-handpan.material-hetre-new .note-circle-base,.partition-main-handpan.material-noyer-new .note-circle-base{stroke:#fff;stroke-width:2px}#handpan-container.material-black .note-circle-base,.partition-main-handpan.material-black .note-circle-base{stroke-width:2.5px}#handpan-container.material-white .note-circle-base,.partition-main-handpan.material-white .note-circle-base{stroke:#1a1a1a;stroke-width:2px}#handpan-container.outline-black .note-circle-base,.partition-main-handpan.outline-black .note-circle-base,.mini-handpan-svg.outline-black .note-circle-base{stroke:#000!important}#handpan-container.outline-white .note-circle-base,.partition-main-handpan.outline-white .note-circle-base,.mini-handpan-svg.outline-white .note-circle-base{stroke:#fff!important}#handpan-container.outline-gold .note-circle-base,.partition-main-handpan.outline-gold .note-circle-base,.mini-handpan-svg.outline-gold .note-circle-base{stroke:var(--gold-color)!important}#handpan-container.colors-disabled.material-metal .note-circle-base,#handpan-container.colors-disabled.material-walnut .note-circle-base,#handpan-container.colors-disabled.material-beech .note-circle-base,#handpan-container.colors-disabled.material-oak .note-circle-base,#handpan-container.colors-disabled.material-real-metal .note-circle-base,#handpan-container.colors-disabled.material-metal-realistic .note-circle-base,#handpan-container.colors-disabled.material-neotone-walnut .note-circle-base,#handpan-container.colors-disabled.material-metal-new .note-circle-base,#handpan-container.colors-disabled.material-hetre-new .note-circle-base,#handpan-container.colors-disabled.material-noyer-new .note-circle-base{fill:#00000026}#handpan-container.colors-disabled.material-black .note-circle-base{fill:#ffffff1a}#handpan-container.colors-disabled.material-white .note-circle-base{fill:#0000000d}.note-group.draggable{cursor:grab}.note-group.dragging{opacity:.5;cursor:grabbing}.note-group.drop-target .note-circle-base{stroke:var(--highlight-color)!important;stroke-width:4px!important}.note-group.instrument-dragging{opacity:.4;filter:grayscale(.5) blur(1px);cursor:grabbing!important}.note-group.instrument-drop-target .note-circle-base{stroke:var(--highlight-color)!important;stroke-width:6px!important;filter:drop-shadow(0 0 15px var(--highlight-color));transition:all .15s ease}.note-group.is-seventh .note-circle-base{stroke-dasharray:4,4;stroke-width:3px!important;filter:drop-shadow(0 0 2px var(--highlight-color))}.note-hand-outline{fill:none;stroke:none;stroke-width:15px;opacity:0;transition:opacity .2s ease,stroke .2s ease;pointer-events:none}.ding-note .note-hand-outline{stroke-width:20px}.note-group.bonus-note .note-hand-outline{display:none}.note-hand-separator{fill:none;stroke:none;stroke-width:4px;opacity:0;transition:opacity .2s ease;pointer-events:none}.ding-note .note-hand-separator{stroke-width:6px}.note-group.bonus-note .note-hand-separator{display:none}.hands-mode-color .note-group:not(.bonus-note) .note-hand-separator,.hands-mode-text .note-group:not(.bonus-note) .note-hand-separator,.hands-mode-precise .note-group:not(.bonus-note) .note-hand-separator,.partition-main-handpan.hands-mode-visible .note-group:not(.bonus-note) .note-hand-separator{stroke:#fff;opacity:1}.note-order-badge-bg{fill:#fff;opacity:0;pointer-events:none;transition:opacity .2s}.note-order-badge-text{text-anchor:middle;dominant-baseline:central;font-weight:900;fill:#1a1410;opacity:0;pointer-events:none;transition:opacity .2s}.hands-mode-precise .note-group.has-play-order .note-order-badge-bg,.hands-mode-precise .note-group.has-play-order .note-order-badge-text{opacity:1}.hands-mode-precise .note-group.has-play-order.hand-left .note-order-badge-text{fill:var(--hand-color-left)}.hands-mode-precise .note-group.has-play-order.hand-right .note-order-badge-text{fill:var(--hand-color-right)}.note-group.show-order-badge .note-order-badge-bg,.note-group.show-order-badge .note-order-badge-text{opacity:1}.note-group.show-order-badge.hand-left .note-order-badge-text{fill:var(--hand-color-left)}.note-group.show-order-badge.hand-right .note-order-badge-text{fill:var(--hand-color-right)}.hands-mode-color .note-group.hand-left .note-hand-outline,.hands-mode-text .note-group.hand-left .note-hand-outline,.hands-mode-precise .note-group.hand-left .note-hand-outline,.partition-main-handpan.hands-mode-visible .note-group.hand-left .note-hand-outline{stroke:var(--hand-color-left);opacity:1}.hands-mode-color .note-group.hand-right .note-hand-outline,.hands-mode-text .note-group.hand-right .note-hand-outline,.hands-mode-precise .note-group.hand-right .note-hand-outline,.partition-main-handpan.hands-mode-visible .note-group.hand-right .note-hand-outline{stroke:var(--hand-color-right);opacity:1}.hands-mode-color .note-group.hand-split .note-hand-outline,.hands-mode-text .note-group.hand-split .note-hand-outline,.hands-mode-precise .note-group.hand-split .note-hand-outline,.partition-main-handpan.hands-mode-visible .note-group.hand-split .note-hand-outline{stroke:url(#splitHandGradient);opacity:1}.hand-icon{font-size:1.2rem;font-weight:700;fill:#fff;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));transition:opacity .2s,transform .2s,fill .2s;display:block;text-anchor:middle;dominant-baseline:central;pointer-events:none;transform-origin:center;transform-box:fill-box}.hands-mode-text .hand-icon{opacity:1}.note-group.dimmed .note-circle-base{fill:var(--note-default-fill);stroke-opacity:1}.note-group.ghost{opacity:0;pointer-events:none;transition:opacity .3s ease}.note-group.learning-ghost{opacity:1;transition:opacity .3s ease}.note-group.bonus-note .note-segment{opacity:1}#handpan-container .note-group.is-polygon-start .note-circle-base,.partition-main-handpan .note-group.is-polygon-start .note-circle-base{stroke:#fff!important;stroke-width:6px!important;stroke-dasharray:8,4;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}.note-group.playing .note-circle-base{filter:brightness(1.5) drop-shadow(0 0 15px rgba(255,255,255,.8));transition:filter .05s}.note-group.playing.playing-left .note-circle-base{filter:brightness(1.5) drop-shadow(0 0 15px var(--hand-color-left))}.note-group.playing.playing-right .note-circle-base{filter:brightness(1.5) drop-shadow(0 0 15px var(--hand-color-right))}.hands-mode-color .note-group.playing.hand-left:not(.bonus-note) .note-hand-outline,.hands-mode-text .note-group.playing.hand-left:not(.bonus-note) .note-hand-outline{filter:brightness(1.5) drop-shadow(0 0 15px var(--hand-color-left));opacity:1}.hands-mode-color .note-group.playing.hand-right:not(.bonus-note) .note-hand-outline,.hands-mode-text .note-group.playing.hand-right:not(.bonus-note) .note-hand-outline{filter:brightness(1.5) drop-shadow(0 0 15px var(--hand-color-right));opacity:1}.hands-mode-color .note-group.playing.hand-split:not(.bonus-note) .note-hand-outline,.hands-mode-text .note-group.playing.hand-split:not(.bonus-note) .note-hand-outline{filter:brightness(1.5) drop-shadow(0 0 15px rgba(255,255,255,.5));opacity:1}.hands-mode-none .note-group.playing .note-hand-outline{opacity:0!important;display:none}.hands-mode-text .note-group.playing .hand-icon,.hands-mode-text .note-group.is-focused .hand-icon{opacity:1;transform:scale(1.5)}.hands-mode-none .note-group.playing .hand-icon,.hands-mode-color .note-group.playing .hand-icon{opacity:0!important}.ripple-circle{fill:none;stroke:#fff;stroke-width:0;opacity:0;pointer-events:none;filter:drop-shadow(0 0 0 white);transform-origin:center;transform-box:fill-box}.note-group.playing .ripple-circle{animation:rippleEffect .6s ease-out}.active-ripple{animation:rippleEffect .6s ease-out!important}.note-group.mapped-note .note-circle-base{opacity:1!important;filter:none!important}.note-group.unmapped .note-circle-base,.note-group.unmapped .note-path-base{fill:#333!important;stroke:#555!important;opacity:1}.note-group.mapping-target .note-circle-base,.note-group.mapping-target .note-path-base{stroke:#fff!important;stroke-width:4px!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.8));animation:pulseMapping 1.5s infinite alternate}@keyframes pulseMapping{0%{filter:drop-shadow(0 0 5px rgba(255,255,255,.5));stroke-width:2px}to{filter:drop-shadow(0 0 20px rgba(255,255,255,1));stroke-width:6px}}.note-group.interactive-target .ripple-circle{animation:rippleLoop 2.5s infinite ease-out;stroke:#fff!important}@keyframes rippleEffect{0%{transform:scale(.9);stroke-width:8px;opacity:1}80%{opacity:.4}to{transform:scale(2);stroke-width:0px;opacity:0}}@keyframes rippleLoop{0%{transform:scale(.9);stroke-width:6px;opacity:0}30%{opacity:1}80%{opacity:0}to{transform:scale(1.8);stroke-width:0px;opacity:0}}.note-group.playing.playing-left .ripple-circle{stroke:var(--hand-color-left);filter:drop-shadow(0 0 15px var(--hand-color-left))}.note-group.playing.playing-right .ripple-circle{stroke:var(--hand-color-right);filter:drop-shadow(0 0 15px var(--hand-color-right))}.pulsing-icon svg{animation:metronome-fade .3s ease-out}@keyframes metronome-fade{0%{opacity:1;transform:scale(1.1);filter:drop-shadow(0 0 5px white)}50%{opacity:.5;transform:scale(1);filter:none}to{opacity:1}}.note-group.interactive-target .note-circle-base{stroke:#fff;stroke-width:4px;animation:targetGlow 2.5s infinite alternate}@keyframes targetGlow{0%{filter:drop-shadow(0 0 5px #FFFFFF)}to{filter:drop-shadow(0 0 15px #FFFFFF) brightness(1.1)}}.note-group.interactive-error .note-circle-base{animation:shakeError .4s cubic-bezier(.36,.07,.19,.97) both;stroke:#ef4444!important;stroke-width:4px}@keyframes shakeError{10%,90%{transform:translate3d(-2px,0,0)}20%,80%{transform:translate3d(4px,0,0)}30%,50%,70%{transform:translate3d(-6px,0,0)}40%,60%{transform:translate3d(6px,0,0)}}.note-group.interactive-active{opacity:1;transition:opacity .5s ease;filter:none}.guide-beam{stroke:#fff;stroke-width:6px;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 8px #FFFFFF);opacity:.8;pointer-events:none;stroke-dasharray:60 calc(var(--beam-len) + 200px);animation:guideBeamFlow 1.8s infinite linear}@keyframes guideBeamFlow{0%{stroke-dashoffset:60;opacity:0}5%{opacity:1}95%{opacity:1}to{stroke-dashoffset:calc(-1 * var(--beam-len));opacity:0}}.note-segment{fill:transparent;transition:fill .3s ease;pointer-events:none}.colors-disabled .note-segment{fill:var(--note-default-fill)!important}.note-text-bg{fill:url(#noteTextBgGradient);pointer-events:none}.note-text{font-family:var(--font-family);font-size:1.9rem;font-weight:600;fill:var(--note-text-color);text-anchor:middle;alignment-baseline:central;pointer-events:none;transition:fill .3s ease,font-size .3s ease,opacity .3s ease,transform .3s ease;stroke:#000;stroke-width:1.5px;stroke-linejoin:round;paint-order:stroke fill;text-shadow:0 2px 6px rgba(0,0,0,.8)}.mutant-note .note-text{font-size:1.5rem}.ding-note .note-text{font-size:2.7rem}.note-group.active:not(.colors-disabled){filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}.note-group.label-order .note-text-bg{fill:#fff}.note-group.label-order .note-text{font-size:2.4rem;font-weight:800;fill:#222b3a;stroke:none;text-shadow:none}.note-group.label-order.hand-left .note-text{fill:var(--hand-color-left)}.note-group.label-order.hand-right .note-text{fill:var(--hand-color-right)}.ding-note.label-order .note-text{font-size:3rem}.note-group.label-order .hand-icon{font-size:.72rem}.note-group.label-order .note-number-text{display:none}.note-number-text{font-family:var(--font-family);font-size:1rem;font-weight:600;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.8));opacity:0;transition:opacity .3s ease;z-index:10}.numbers-visible .note-number-text{opacity:1}[data-theme=light] .note-group.active .note-number-text,[data-theme=light] .note-group.is-focused .note-number-text{fill:#000}#lcd-group{cursor:pointer}#game-stop-btn{transition:transform .2s ease-out}#game-stop-btn:hover{transform:scale(1.05)}#game-stop-btn:hover rect{fill:red;filter:drop-shadow(0 0 5px rgba(239,68,68,.5))}.model-toggle-button{cursor:pointer}.model-toggle-button rect{fill:var(--secondary-color);stroke:var(--highlight-color);stroke-width:1.5;transition:fill .2s ease}.model-toggle-button text{fill:var(--text-color);font-family:var(--font-family);font-size:18px;font-weight:600;text-anchor:middle;pointer-events:none}.model-toggle-button:hover rect{fill:var(--highlight-color)}.model-toggle-button:hover text{fill:var(--primary-color)}.chord-path{fill:none;stroke-width:14px;stroke-linejoin:round;stroke-linecap:round;transition:opacity .3s;pointer-events:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}.chord-path.extension-path{stroke-dasharray:10,10;stroke-width:8px;opacity:.8}.light-beam{stroke:#fff;stroke-width:4px;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 5px white) drop-shadow(0 0 10px var(--highlight-color));opacity:.8;pointer-events:none;animation-name:lightFlow;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes lightFlow{0%{opacity:1}70%{opacity:1}to{stroke-dashoffset:0;opacity:0}}.path-highlight{stroke:#fff;stroke-width:8px;fill:none;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,255,255,.9));stroke-linecap:round}.learning-ring{fill:none;stroke:#fff;stroke-width:3px;stroke-dasharray:10,10;opacity:.8;pointer-events:none;transform-origin:center;transform-box:fill-box}.learning-ring.spin-right{animation:rotateCW 4s linear infinite;stroke:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,1));stroke-width:5px}.learning-ring.spin-left{animation:rotateCCW 4s linear infinite;stroke:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,1));stroke-width:5px}@keyframes rotateCW{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotateCCW{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.arrow-text{font-size:24px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}.highlight-major{stroke:#fbbf24!important;stroke-width:4px!important;filter:drop-shadow(0 0 10px #FBBF24)!important;opacity:1!important}.highlight-minor{stroke:#22d3ee!important;stroke-width:4px!important;filter:drop-shadow(0 0 10px #22D3EE)!important;opacity:1!important}.highlight-both{stroke:url(#grad-learn-both)!important;stroke-width:4px!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))!important;opacity:1!important}.highlight-7th{stroke-dasharray:6,6}.modifier-btn.active-blue{background-color:#3b82f6!important;color:#fff!important}.learning-source .note-circle-base{fill:#fff!important;stroke:#fff!important;opacity:1!important}.mini-handpan-svg{background-color:transparent;overflow:visible}.mini-handpan-svg .handpan-body{stroke:#fff;stroke-width:5px;fill:#0003;filter:none}.mini-handpan-svg.show-texture .handpan-body{fill:url(#grad-neotone)}.mini-handpan-svg.show-texture.material-neotone .handpan-body{fill:url(#grad-neotone)}.mini-handpan-svg.show-texture.material-black .handpan-body{fill:url(#grad-black)}.mini-handpan-svg.show-texture.material-white .handpan-body{fill:url(#grad-white)}.mini-handpan-svg.show-texture.material-metal .handpan-body{fill:url(#grad-metal)}.mini-handpan-svg.show-texture.material-walnut .handpan-body{fill:url(#pattern-walnut)}.mini-handpan-svg.show-texture.material-beech .handpan-body{fill:url(#pattern-beech)}.mini-handpan-svg.show-texture.material-oak .handpan-body{fill:url(#pattern-oak)}.mini-handpan-svg.show-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.mini-handpan-svg.show-texture.material-metal-realistic .handpan-body{fill:url(#pattern-metal-realistic)}.mini-handpan-svg.show-texture.material-neotone-walnut .handpan-body{fill:url(#pattern-neotone-walnut)}.mini-handpan-svg.show-texture.material-metal-new .handpan-body{fill:url(#pattern-metal-new)}.mini-handpan-svg.show-texture.material-hetre-new .handpan-body{fill:url(#pattern-hetre-new)}.mini-handpan-svg.show-texture.material-noyer-new .handpan-body{fill:url(#pattern-noyer-new)}.mini-handpan-svg .note-circle-base{fill:#ffffff1a;stroke:#fff;stroke-width:2px;filter:none}.mini-handpan-svg .note-group.active-note .note-circle-base{fill:var(--note-fill-color, white);stroke:#fff;stroke-width:5px}.mini-handpan-svg .note-group.bonus-note-mini .note-circle-base{fill:var(--note-fill-color, rgba(255,255,255,.3));stroke:#fff;stroke-width:2px}.mini-handpan-svg .note-group.ghost-note .note-circle-base{fill:#0000001a;stroke:#ffffff4d;stroke-width:2px}.mini-handpan-svg.material-black .note-group.ghost-note .note-circle-base,.mini-handpan-svg.outline-white .note-group.ghost-note .note-circle-base{fill:#ffffff0d;stroke:#ffffff4d}.mini-handpan-svg.material-white .note-group.ghost-note .note-circle-base,.mini-handpan-svg.outline-black .note-group.ghost-note .note-circle-base{fill:#0000000d;stroke:#0003}.mini-handpan-svg .note-group.is-polygon-start .note-circle-base{stroke:#fff!important;stroke-width:8px!important;stroke-dasharray:12,6;stroke-linecap:round}.mini-handpan-svg .chord-path{stroke-width:25px;filter:none}.mini-handpan-svg .note-text{font-size:35px;fill:#fff;stroke:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}.mini-handpan-svg .note-number-text-mini{font-size:30px;fill:#fff;stroke:none;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7)}.mini-handpan-svg .hand-icon{font-size:40px;fill:#fff;stroke:#000;stroke-width:2px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.5)}.direction-arrow{fill:#fff;stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));pointer-events:none}.mini-handpan-svg .note-hand-outline{stroke-width:25px}.mini-handpan-svg.show-hands .note-group.hand-left .note-hand-outline{stroke:var(--hand-color-left);opacity:1}.mini-handpan-svg.show-hands .note-group.hand-right .note-hand-outline{stroke:var(--hand-color-right);opacity:1}.theme-eco .partition-title,.theme-eco .partition-author,.theme-eco .partition-footer{color:#000}.theme-eco .partition-main-handpan .handpan-body{stroke:#aaa;stroke-width:2px;filter:none}.theme-eco .partition-main-handpan:not(.force-texture) .handpan-body{fill:#fff}.theme-eco .partition-main-handpan.force-texture.material-neotone .handpan-body{fill:url(#grad-neotone)}.theme-eco .partition-main-handpan.force-texture.material-black .handpan-body{fill:url(#grad-black)}.theme-eco .partition-main-handpan.force-texture.material-white .handpan-body{fill:#fff;stroke:#000}.theme-eco .partition-main-handpan.force-texture.material-metal .handpan-body{fill:url(#grad-metal)}.theme-eco .partition-main-handpan.force-texture.material-walnut .handpan-body{fill:url(#pattern-walnut)}.theme-eco .partition-main-handpan.force-texture.material-beech .handpan-body{fill:url(#pattern-beech)}.theme-eco .partition-main-handpan.force-texture.material-oak .handpan-body{fill:url(#pattern-oak)}.theme-eco .partition-main-handpan.force-texture.material-real-metal .handpan-body{fill:url(#pattern-real-metal)}.theme-eco .partition-main-handpan.force-texture.material-metal-realistic .handpan-body{fill:url(#pattern-metal-realistic)}.theme-eco .partition-main-handpan.force-texture.material-neotone-walnut .handpan-body{fill:url(#pattern-neotone-walnut)}.theme-eco .partition-main-handpan.force-texture.material-metal-new .handpan-body{fill:url(#pattern-metal-new)}.theme-eco .partition-main-handpan.force-texture.material-hetre-new .handpan-body{fill:url(#pattern-hetre-new)}.theme-eco .partition-main-handpan.force-texture.material-noyer-new .handpan-body{fill:url(#pattern-noyer-new)}.theme-eco .partition-main-handpan .note-circle-base{stroke:#aaa;stroke-width:2px}.theme-eco .partition-main-handpan .note-text{fill:#fff!important;stroke:#000;stroke-width:2.5px;paint-order:stroke fill;text-shadow:none}.theme-eco .partition-main-handpan .note-number-text{fill:#000}.theme-eco .partition-main-handpan g.is-focused .note-number-text,.theme-eco .partition-main-handpan g.active .note-number-text{fill:#fff}.theme-eco .mini-handpan-svg .handpan-body{stroke:#aaa;stroke-width:10px}.theme-eco .mini-handpan-svg:not(.show-texture) .handpan-body{fill:#fff}.theme-eco .mini-handpan-svg.show-texture .handpan-body{fill:url(#grad-neotone)}.theme-eco .mini-handpan-svg .note-group.ghost-note .note-circle-base{fill:#fff;stroke:#000;stroke-width:5px}.theme-eco .mini-handpan-svg .note-group.active-note .note-circle-base{stroke:#000!important;stroke-width:5px!important}.theme-eco .mini-handpan-svg .note-group.active-note .note-text{fill:#fff}.theme-eco .mini-handpan-svg .note-group.is-polygon-start .note-circle-base{stroke:#fff!important;stroke-width:12px!important;stroke-dasharray:10,5}.theme-eco .mini-handpan-svg .chord-path{stroke-opacity:.8!important;fill-opacity:.3!important;stroke-width:25px!important}.theme-eco .direction-arrow{fill:#000;filter:none}.theme-eco .partition-chord-item.emotion-layout{background-color:transparent!important}.theme-eco .partition-chord-item .partition-chord-notes{color:#000}@media print{body>*{display:none!important}#partition-editor-modal{display:block!important;position:static!important;width:100%!important;height:auto!important;background:none!important;padding:0!important;overflow:visible!important}.partition-modal-content{box-shadow:none!important;border:none!important;width:100%!important;max-width:none!important;height:auto!important;overflow:visible!important;border-radius:0!important;background:none!important}.partition-editor-header,.partition-settings{display:none!important}.partition-editor-body{display:block!important}.partition-preview-container{display:block!important;padding:0!important;margin:0!important;background:none!important;overflow:visible!important}.partition-paper{box-shadow:none!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;background-color:#fff!important;color:#000!important}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}#texture-editor-overlay{position:absolute;top:50px;right:20px;width:250px;background-color:#0d1b2af2;border:1px solid var(--highlight-color);border-radius:12px;padding:1rem;z-index:500;box-shadow:0 10px 30px #000c;backdrop-filter:blur(10px)}.texture-editor-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.5rem;margin-bottom:.8rem;font-weight:700;color:var(--highlight-color)}#close-texture-editor{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer}.texture-control-row{display:flex;flex-direction:column;margin-bottom:.8rem}.texture-control-row label{font-size:.8rem;margin-bottom:.2rem;color:#fff}.texture-control-row input[type=range]{width:100%}.texture-coords-display{background:#00000080;padding:.5rem;border-radius:4px;font-family:monospace;font-size:.7rem;color:#eee;word-break:break-all;margin-top:.5rem}.model-toggle-row{position:relative;width:100%;height:0}.model-toggle-aligned-right{position:absolute;right:0;bottom:4px;display:flex;align-items:center;gap:6px;background:#0d1b2aeb;border:1px solid var(--current-outline-color, #FFD700);border-radius:20px;padding:3px 8px;backdrop-filter:blur(6px);box-shadow:0 2px 10px #0006;user-select:none;width:fit-content;font-size:.75em;z-index:5}[data-theme=light] .model-toggle-aligned-right{background:#fffffff2;box-shadow:0 2px 10px #00000026}[data-theme=light] .model-toggle-aligned-right .model-toggle-label{color:#00000080}[data-theme=light] body.model-mutant .model-toggle-mutant,[data-theme=light] body.model-standard .model-toggle-standard{color:#0ea5e9;text-shadow:none}[data-theme=light] .model-toggle-track{background:#0000001a}[data-theme=light] body.model-standard .model-toggle-track{background:#0ea5e94d}.model-toggle-label{font-size:.65rem;font-weight:700;color:#ffffff80;transition:color .25s ease;text-transform:uppercase;letter-spacing:.3px}body.model-mutant .model-toggle-mutant,body.model-standard .model-toggle-standard{color:#67e8f9;text-shadow:0 0 6px rgba(34,211,238,.5)}.model-toggle-switch{position:relative;width:38px;height:20px;background:transparent;border:none;padding:0;cursor:pointer}.model-toggle-track{position:absolute;inset:0;background:#ffffff26;border-radius:20px;transition:background .3s ease}.model-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:gold;border-radius:50%;transition:transform .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 1px 4px #0006}body.model-standard .model-toggle-thumb{transform:translate(18px);background:#22d3ee}body.model-standard .model-toggle-track{background:#22d3ee4d}.model-toggle-block{position:absolute;right:0;bottom:4px;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:5;user-select:none}.model-toggle-title{font-size:.6rem;font-weight:700;color:#fff9;text-transform:uppercase;letter-spacing:.8px;line-height:1}[data-theme=light] .model-toggle-title{color:#0000008c}.model-toggle-pill{display:inline-flex;align-items:stretch;gap:0;background:#0d1b2aeb;border:1px solid var(--current-outline-color, #FFD700);border-radius:18px;padding:3px;backdrop-filter:blur(6px);box-shadow:0 2px 8px #0006;overflow:hidden}.model-toggle-pill-option{background:transparent;border:none;color:#ffffff8c;font-family:inherit;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:14px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .1s ease;touch-action:manipulation;line-height:1.1;letter-spacing:.2px}.model-toggle-pill-option sup{font-size:.55rem;margin-left:1px}.model-toggle-pill-option:hover{color:#fff;background:#ffffff0f}.model-toggle-pill-option:active{transform:scale(.95)}body.model-mutant #model-label-mutant,body.model-standard #model-label-standard{background:var(--highlight-color, #22D3EE);color:#0d1b2a;box-shadow:0 1px 4px #22d3ee80}[data-theme=light] .model-toggle-pill{background:#fffffff2;box-shadow:0 2px 8px #00000026}[data-theme=light] .model-toggle-pill-option{color:#0000008c}[data-theme=light] body.model-mutant #model-label-mutant,[data-theme=light] body.model-standard #model-label-standard{background:#2563eb;color:#fff}@media(max-width:640px){.model-toggle-pill-option{font-size:.66rem;padding:4px 8px}}.model-toggle-compact{position:absolute;right:0;bottom:4px;display:inline-flex;align-items:center;gap:5px;background:#0d1b2aeb;border:1px solid var(--current-outline-color, #FFD700);border-radius:16px;padding:4px 10px 4px 7px;backdrop-filter:blur(6px);box-shadow:0 2px 8px #0006;color:#ffffffd9;cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:.4px;user-select:none;z-index:5;transition:background .2s ease,transform .1s ease,border-color .2s ease;touch-action:manipulation;min-width:60px;min-height:32px;justify-content:center}.model-toggle-compact:hover{background:#22d3ee2e;border-color:var(--highlight-color, #22D3EE)}.model-toggle-compact:active{transform:scale(.95)}.model-toggle-compact-icon{display:inline-flex;line-height:0;color:var(--highlight-color, #22D3EE)}.model-toggle-compact-label{font-variant-numeric:tabular-nums;color:var(--highlight-color, #22D3EE)}body.model-standard .model-toggle-compact .model-toggle-inner-ring{opacity:0}body.model-mutant .model-toggle-compact .model-toggle-inner-ring{opacity:1}[data-theme=light] .model-toggle-compact{background:#fffffff2;color:#1b263b;box-shadow:0 2px 8px #00000026}[data-theme=light] .model-toggle-compact:hover{background:#2563eb1f;border-color:#2563eb}[data-theme=light] .model-toggle-compact-icon,[data-theme=light] .model-toggle-compact-label{color:#0ea5e9}@media print{.model-toggle-floating,.model-toggle-compact{display:none!important}}.lcd-swap-model-btn{transition:transform .2s ease}.lcd-swap-model-btn:hover{transform:scale(1.1)}.lcd-swap-model-btn:active{transform:scale(.95)}#midi-modal .modal-content{width:90%;max-width:600px;background:#1a1a1a;color:#fff;padding:2rem;border-radius:16px;border:1px solid #444;box-shadow:0 20px 25px -5px #00000080}#midi-instructions{font-size:1.1rem;font-weight:600;margin:1rem auto 2rem;padding:1rem 1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:30px;color:#fff;text-align:center;max-width:600px;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 4px 15px #0003;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:15px;z-index:100;position:relative}.midi-connect-mode .sp-tools-vertical{margin-top:0}.midi-connect-mode #midi-instructions{position:relative;top:0;width:100%;margin:0 auto 30px;text-align:center;justify-content:center;padding:1rem;z-index:100}.midi-connect-mode #midi-settings-panel{display:block!important;order:-1}.pulse-guide{animation:pulse-guide-anim 1.5s infinite ease-in-out;box-shadow:0 0 #ffffffb3}.pulse-guide-note{animation:pulse-guide-note-anim 1.5s infinite ease-in-out;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}.dimmed-note{opacity:.6;filter:grayscale(.5);transition:opacity .3s ease}@keyframes pulse-guide-anim{0%{transform:scale(1);box-shadow:0 0 #ffffffb3}50%{transform:scale(1.05);box-shadow:0 0 0 10px #fff0}to{transform:scale(1);box-shadow:0 0 #fff0}}@keyframes pulse-guide-note-anim{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}#midi-instructions:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}#midi-instructions.active-listening{background:#4a90e226;border-color:#4a90e280;color:#8ab4f8;animation:pulse-midi-border 2s infinite}@keyframes pulse-midi-border{0%{box-shadow:0 0 #4a90e266}70%{box-shadow:0 0 0 10px #4a90e200}to{box-shadow:0 0 #4a90e200}}#midi-handpan-calibration{position:relative;width:300px;height:300px;margin:2rem auto;background:#222;border-radius:50%;border:2px solid #444}#midi-status{text-align:center;padding:.5rem;background:#333;border-radius:8px;margin-top:1rem}#btn-midi-save-mapping{width:100%;padding:12px;margin-top:1rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;background:#4a90e2;color:#fff}.note-group.playing-midi circle,.note-group.playing-midi ellipse{fill:#fff!important;stroke:#fff!important;stroke-width:3px!important;filter:drop-shadow(0 0 10px rgba(255,255,255,1));transition:all .1s ease}#app.gate-locked{display:none!important}#neotone-gate{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto;background:radial-gradient(circle at 20% 20%,rgba(34,211,238,.12),transparent 45%),radial-gradient(circle at 80% 80%,rgba(65,90,119,.25),transparent 50%),var(--bg-color);color:var(--text-color);font-family:var(--font-family)}.auth-brand{text-align:center;margin-bottom:1.4rem}.auth-logo{font-size:1.9rem;font-weight:800;letter-spacing:.5px;margin:0}.auth-byline{font-family:Great Vibes,cursive;font-size:1.3rem;opacity:.85;margin-top:-.2rem}.auth-card{width:100%;max-width:400px;background:var(--primary-color);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:2rem 1.8rem;box-shadow:0 20px 60px #00000073}.auth-tabs{display:flex;gap:.3rem;background:#0003;border-radius:12px;padding:.3rem;margin-bottom:1.4rem}.auth-tab{flex:1;border:0;background:transparent;color:var(--text-color);opacity:.6;font-family:inherit;font-size:.92rem;font-weight:600;padding:.6rem;border-radius:9px;cursor:pointer;transition:all .2s ease}.auth-tab.active{opacity:1;background:var(--secondary-color);color:#fff}.auth-heading{text-align:center;font-size:1.25rem;margin:0 0 1.2rem}.auth-prices{margin:0 0 1.3rem;padding:.9rem 1rem 1rem;background:#0000002e;border:1px solid rgba(255,255,255,.08);border-radius:12px}.auth-prices[hidden]{display:none}.auth-prices-title{margin:0 0 .6rem;font-size:.82rem;font-weight:600;opacity:.8;text-align:center}.auth-prices-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.auth-prices-list li{display:flex;align-items:baseline;gap:.5rem;padding:.45rem .6rem;border-radius:9px;background:#ffffff0a}.auth-prices-list li.is-featured{background:var(--secondary-color)}.ap-name{flex:1;font-size:.92rem;font-weight:600}.ap-name em{margin-left:.4rem;font-style:normal;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.08rem .4rem;border-radius:999px;background:#ffffff2e}.ap-amount{font-size:1.05rem;font-weight:800}.ap-period{font-size:.78rem;opacity:.65}.auth-prices-note{margin:.7rem 0 0;font-size:.74rem;line-height:1.4;opacity:.65;text-align:center}.auth-privacy{margin:1rem 0 0;font-size:.72rem;line-height:1.45;opacity:.6;text-align:center}.auth-success{text-align:center;padding:.5rem 0 0}.auth-success-icon{font-size:2.6rem;line-height:1;margin-bottom:.6rem}.auth-success-title{margin:0 0 .6rem;font-size:1.35rem;font-weight:800}.auth-success-text{margin:0 0 .7rem;font-size:.92rem;line-height:1.5;opacity:.85}.auth-success-text strong{opacity:1}.auth-success .auth-submit{margin-top:.6rem}.auth-btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;background:#fff;color:#1f1f1f;border:0;border-radius:11px;padding:.75rem;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.auth-btn-google:hover:not(:disabled){box-shadow:0 6px 18px #0000004d}.auth-btn-google:disabled{opacity:.5;cursor:not-allowed}.auth-divider{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0;opacity:.5;font-size:.8rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#ffffff26}.auth-form{display:flex;flex-direction:column;gap:.9rem}.auth-field{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600}.auth-field[hidden]{display:none}.auth-field input{width:100%;background:#00000040;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.7rem .85rem;color:var(--text-color);font-family:inherit;font-size:.95rem;transition:border-color .2s ease}.auth-field input:focus{outline:none;border-color:var(--highlight-color)}.auth-forgot{align-self:flex-end;background:none;border:0;color:var(--highlight-color);font-family:inherit;font-size:.8rem;cursor:pointer;padding:0}.auth-submit{margin-top:.4rem;width:100%;border:0;border-radius:11px;padding:.8rem;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;color:#04121d;background:var(--highlight-color);transition:transform .15s ease,filter .15s ease}.auth-submit:hover:not(:disabled){filter:brightness(1.08)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-message{margin:0;font-size:.85rem;border-radius:9px;padding:.6rem .75rem;line-height:1.4}.auth-message.is-error{background:#ef444426;color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.auth-message.is-info{background:#22c55e21;color:#86efac;border:1px solid rgba(34,197,94,.3)}.pw-wrap{width:100%;max-width:980px}.pw-intro{max-width:680px;margin:0 auto 1.8rem;text-align:center;font-size:.95rem;line-height:1.55;opacity:.82}.pw-intro strong{opacity:1;color:#fff}.pw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.6rem 0 1rem}.pw-card{position:relative;background:var(--primary-color);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.6rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}.pw-card.is-featured{border-color:var(--highlight-color);box-shadow:0 0 0 1px var(--highlight-color),0 18px 40px #0006}.pw-badge{position:absolute;top:-.7rem;left:1.3rem;background:var(--gold-gradient);color:#1a1300;font-size:.72rem;font-weight:800;padding:.25rem .7rem;border-radius:999px}.pw-name{margin:0;font-size:1.2rem}.pw-price{display:flex;align-items:baseline;gap:.35rem}.pw-amount{font-size:1.9rem;font-weight:800}.pw-period{opacity:.65;font-size:.85rem}.pw-blurb{margin:0;opacity:.85;font-size:.9rem;line-height:1.45;flex:1}.pw-choose{margin-top:.4rem;border:0;border-radius:11px;padding:.75rem;font-family:inherit;font-weight:700;cursor:pointer;color:#04121d;background:var(--highlight-color);transition:filter .15s ease}.pw-choose:hover:not(:disabled){filter:brightness(1.08)}.pw-choose:disabled{opacity:.6;cursor:not-allowed}.pw-footer{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.85rem;opacity:.85}.gate-loading{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.gate-spinner{width:42px;height:42px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--highlight-color);border-radius:50%;animation:gate-spin .8s linear infinite}@keyframes gate-spin{to{transform:rotate(360deg)}}.account-menu-btn{margin-left:5px}.account-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:9000;min-width:220px;background:var(--primary-color);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 14px 40px #00000080;padding:.5rem;display:flex;flex-direction:column;gap:.2rem}.account-dropdown[hidden]{display:none}.account-email{font-size:.78rem;opacity:.7;padding:.4rem .6rem .5rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.3rem;word-break:break-all}.account-dropdown button{text-align:left;background:transparent;border:0;color:var(--text-color);font-family:inherit;font-size:.9rem;padding:.55rem .6rem;border-radius:8px;cursor:pointer;transition:background .15s ease}.account-dropdown button:hover:not(:disabled){background:#ffffff14}.account-dropdown button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:760px){.pw-grid{grid-template-columns:1fr}.auth-card{padding:1.6rem 1.3rem}}.nf-fab{position:fixed;right:18px;bottom:18px;z-index:9000;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:none;border-radius:999px;background:var(--highlight-color, #22d3ee);color:#06222b;font-family:var(--font-family, sans-serif);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 6px 22px #00000073;transition:transform .15s ease,box-shadow .15s ease}.nf-fab:hover{transform:translateY(-2px);box-shadow:0 9px 26px #0000008c}.nf-fab-ic{font-size:1.15rem}.nf-fab-admin{bottom:76px;padding:11px 13px;background:var(--secondary-color, #415a77);color:var(--text-color, #fff)}.nf-fab-admin .nf-fab-txt{display:none}@media(max-width:640px){.nf-fab-txt{display:none}.nf-fab{padding:13px}}.nf-fab.nf-fab-header{position:static;z-index:auto;padding:8px 14px;font-size:.82rem;box-shadow:none;align-self:center}.nf-fab.nf-fab-header:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.nf-fab.nf-fab-header .nf-fab-ic{font-size:1rem}@media(max-width:900px){.nf-fab.nf-fab-header .nf-fab-txt{display:none}.nf-fab.nf-fab-header{padding:8px 10px}}.nf-overlay{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:16px;background:#030911b8;backdrop-filter:blur(4px);font-family:var(--font-family, sans-serif);color:var(--text-color, #e0e1dd)}.nf-overlay.nf-hidden-for-shot{opacity:0}.nf-modal{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;background:var(--primary-color, #1b263b);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px 26px 22px;box-shadow:0 24px 60px #0000008c}.nf-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:#ffffff14;color:var(--text-color, #fff);font-size:.9rem;cursor:pointer}.nf-close:hover{background:#ffffff29}.nf-progress{height:4px;border-radius:4px;background:#ffffff14;margin:4px 0 18px;overflow:hidden}.nf-progress-bar{height:100%;width:20%;background:var(--highlight-color, #22d3ee);transition:width .25s ease}.nf-title{margin:0 0 4px;font-size:1.32rem;font-weight:700}.nf-sub{margin:0 0 18px;opacity:.72;font-size:.92rem}.nf-note{opacity:.7;font-size:.85rem;margin-top:10px}.nf-sign{margin:14px 0 4px;font-style:italic;font-weight:700;opacity:.92}.nf-grid{display:grid;gap:12px}.nf-grid-2{grid-template-columns:1fr 1fr}@media(max-width:480px){.nf-grid-2{grid-template-columns:1fr}}.nf-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#ffffff08;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .1s,background .15s}.nf-card:hover{border-color:var(--highlight-color, #22d3ee);background:#ffffff0f;transform:translateY(-1px)}.nf-card-icon{font-size:1.7rem}.nf-card-label{font-weight:700;font-size:.98rem}.nf-card-hint{opacity:.62;font-size:.8rem}.nf-cat-grid{gap:9px}.nf-cat{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#ffffff08;color:inherit;text-align:left;font-size:.88rem;cursor:pointer}.nf-cat:hover,.nf-cat.is-active{border-color:var(--highlight-color, #22d3ee);background:#22d3ee1a}.nf-cat-icon{font-size:1.2rem}.nf-stack{display:flex;flex-direction:column;gap:10px}.nf-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff08;color:inherit;text-align:left;font-size:.95rem;cursor:pointer}.nf-opt:hover,.nf-opt.is-active{border-color:var(--highlight-color, #22d3ee);background:#22d3ee1a}.nf-opt-icon{font-size:1.3rem}.nf-textarea{width:100%;min-height:120px;resize:vertical;padding:13px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#00000038;color:var(--text-color, #fff);font-family:inherit;font-size:.95rem;box-sizing:border-box}.nf-textarea:focus{outline:none;border-color:var(--highlight-color, #22d3ee)}.nf-attach-bar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.nf-attach-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:9px 6px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#ffffff08;color:inherit;font-size:1.15rem;cursor:pointer}.nf-attach-btn span{font-size:.68rem;opacity:.78}.nf-attach-btn:hover:not(:disabled){border-color:var(--highlight-color, #22d3ee)}.nf-attach-btn:disabled{opacity:.35;cursor:not-allowed}.nf-rec-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:11px;background:#dc262624;border:1px solid rgba(220,38,38,.4)}.nf-rec-dot{width:11px;height:11px;border-radius:50%;background:#ef4444;animation:nf-pulse 1s infinite}.nf-rec-time{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}@keyframes nf-pulse{0%,to{opacity:1}50%{opacity:.3}}.nf-attach-tip{font-size:.78rem;opacity:.6;margin:4px 0 10px;line-height:1.4}.nf-rec-float{display:none}.nf-overlay.nf-recording{background:transparent;backdrop-filter:none;pointer-events:none}.nf-overlay.nf-recording .nf-modal{display:none}.nf-overlay.nf-recording .nf-rec-float{display:flex;align-items:center;gap:10px;position:fixed;top:16px;left:50%;transform:translate(-50%);pointer-events:auto;padding:10px 16px;border-radius:999px;background:#dc2626f5;color:#fff;font-weight:700;font-size:.9rem;box-shadow:0 8px 24px #00000073;z-index:9600}.nf-rec-float .nf-rec-dot{background:#fff}.nf-rec-float .nf-rec-time{margin-left:0}.nf-rec-float .nf-btn-stop{background:#fff;color:#b91c1c;padding:6px 13px}.nf-attachments{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.nf-att{position:relative;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-size:.78rem}.nf-att-thumb{width:42px;height:42px;object-fit:cover;border-radius:7px}.nf-att-ic{font-size:1.5rem}.nf-att-info{display:flex;flex-direction:column;gap:2px}.nf-att-trans{font-size:.68rem;opacity:.85}.nf-att-trans.is-ok{color:#22c55e;cursor:help}.nf-att-del{border:none;background:#00000059;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:.7rem}.nf-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.nf-actions:has(>:only-child){justify-content:flex-start}.nf-btn{padding:11px 20px;border-radius:11px;border:none;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer}.nf-btn-primary{background:var(--highlight-color, #22d3ee);color:#06222b;margin-left:auto}.nf-btn-primary:hover{filter:brightness(1.08)}.nf-btn-ghost{background:#ffffff12;color:var(--text-color, #fff)}.nf-btn-ghost:hover{background:#ffffff24}.nf-btn-stop{background:#ef4444;color:#fff;padding:7px 14px}.nf-review{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.nf-rev-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;background:#ffffff0a;border-radius:9px;font-size:.9rem}.nf-rev-row b{opacity:.66;font-weight:600}.nf-rev-message{white-space:pre-wrap;word-break:break-word;padding:12px 14px;background:#00000038;border-radius:10px;font-size:.9rem;max-height:160px;overflow-y:auto}.nf-center{text-align:center;padding:24px 6px}.nf-spinner{width:38px;height:38px;margin:0 auto 18px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--highlight-color, #22d3ee);border-radius:50%;animation:nf-spin .8s linear infinite}@keyframes nf-spin{to{transform:rotate(360deg)}}.nf-check{width:62px;height:62px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:#22c55e2e;color:#22c55e;font-size:2rem;font-weight:800}.nf-toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%);padding:10px 16px;border-radius:10px;font-size:.85rem;max-width:90%;text-align:center;box-shadow:0 8px 24px #0006}.nf-toast-error{background:#ef4444;color:#fff}.nf-toast-info{background:var(--secondary-color, #415a77);color:#fff}.nf-dash-overlay{align-items:stretch;padding:0}.nf-dash{width:100%;max-width:960px;margin:auto;max-height:100vh;display:flex;flex-direction:column;background:var(--bg-color, #0d1b2a)}.nf-dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.nf-dash-head h2{margin:0;font-size:1.15rem}.nf-dash-filters{display:flex;align-items:center;gap:8px}.nf-dash-filters select{padding:7px 10px;border-radius:9px;background:var(--primary-color, #1b263b);color:var(--text-color, #fff);border:1px solid rgba(255,255,255,.12);font-family:inherit;font-size:.84rem}.nf-dash-close{position:static}.nf-dash-refresh{padding:7px 12px}.nf-dash-stats{display:flex;gap:8px;padding:12px 20px;flex-wrap:wrap}.nf-chip{padding:5px 12px;border-radius:999px;background:#ffffff12;font-size:.8rem}.nf-chip-alert{background:#dc262633;color:#fca5a5;font-weight:700}.nf-dash-list{flex:1;overflow-y:auto;padding:8px 20px 28px;display:flex;flex-direction:column;gap:14px}.nf-fb-card{padding:16px;border-radius:14px;background:var(--primary-color, #1b263b);border:1px solid rgba(255,255,255,.08);border-left:4px solid var(--secondary-color, #415a77)}.nf-urg-0{border-left-color:#dc2626}.nf-urg-1{border-left-color:#f59e0b}.nf-urg-2{border-left-color:#eab308}.nf-urg-3{border-left-color:#22c55e}.nf-fb-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem;margin-bottom:8px}.nf-fb-urg{font-weight:700}.nf-fb-kind,.nf-fb-cat{padding:2px 9px;border-radius:999px;background:#ffffff12}.nf-fb-date{margin-left:auto;opacity:.6}.nf-fb-who{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.86rem;margin-bottom:8px}.nf-fb-who a{color:var(--highlight-color, #22d3ee);text-decoration:none}.nf-fb-body{white-space:pre-wrap;word-break:break-word;margin:0 0 10px;font-size:.92rem;line-height:1.5}.nf-fb-media{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.nf-fb-media-slot{max-width:220px;font-size:.78rem;opacity:.85}.nf-fb-media-slot img,.nf-fb-media-slot video{max-width:220px;max-height:150px;border-radius:8px;display:block}.nf-fb-media-slot audio{width:220px}.nf-fb-trans{margin-bottom:10px;display:flex;flex-direction:column;gap:6px}.nf-fb-trans-item{padding:9px 12px;background:#22c55e14;border-left:3px solid #22c55e;border-radius:0 9px 9px 0;font-size:.85rem;line-height:1.5}.nf-fb-trans-item b{display:block;opacity:.7;font-weight:600;font-size:.72rem;margin-bottom:3px}.nf-fb-ctx{margin-bottom:10px;font-size:.82rem}.nf-fb-ctx summary{cursor:pointer;opacity:.7}.nf-fb-ctx ul{margin:8px 0 0;padding-left:18px;opacity:.85}.nf-fb-ctx pre{white-space:pre-wrap;word-break:break-word;background:#0000004d;padding:8px;border-radius:7px;font-size:.72rem}.nf-fb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.nf-fb-actions label{display:flex;align-items:center;gap:6px;font-size:.8rem;opacity:.85}.nf-fb-actions select{padding:5px 8px;border-radius:8px;background:var(--bg-color, #0d1b2a);color:var(--text-color, #fff);border:1px solid rgba(255,255,255,.14);font-family:inherit;font-size:.8rem}.nf-fb-reply{margin-left:auto;padding:7px 14px}.au-table th{border-bottom:1px solid rgba(255,255,255,.12)}.au-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}.au-table tbody tr:hover{background:#ffffff08}.au-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.5}.au-badge-paying{background:#22c55e2e;color:#4ade80}.au-badge-free{background:#22d3ee2e;color:#22d3ee}.au-badge-admin{background:#a855f733;color:#c084fc}.au-badge-none{background:#ffffff14;color:#fff9}.au-table .nf-btn{padding:5px 11px;font-size:.8rem}.ug-overlay{position:fixed;inset:0;z-index:9400;display:flex;align-items:stretch;justify-content:center;background:#030911b8;backdrop-filter:blur(4px);font-family:var(--font-family, sans-serif);color:var(--text-color, #e0e1dd)}.ug-modal{width:100%;max-width:1100px;margin:auto;max-height:100vh;display:flex;flex-direction:column;background:var(--bg-color, #0d1b2a);border:1px solid rgba(255,255,255,.08)}.ug-head{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.09);flex-wrap:wrap}.ug-h{margin:0;font-size:1.15rem;white-space:nowrap}.ug-search-wrap{position:relative;flex:1;min-width:200px;display:flex;align-items:center;gap:10px}.ug-search{flex:1;padding:9px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:var(--text-color, #fff);font-family:inherit;font-size:.92rem}.ug-search:focus{outline:none;border-color:var(--highlight-color, #22d3ee)}.ug-search-count{font-size:.78rem;opacity:.7;white-space:nowrap}.ug-close{width:34px;height:34px;border:none;border-radius:50%;background:#ffffff14;color:var(--text-color, #fff);font-size:.95rem;cursor:pointer}.ug-close:hover{background:#ffffff29}.ug-body{display:flex;flex:1;min-height:0}.ug-toc{width:240px;flex-shrink:0;overflow-y:auto;padding:16px 10px 24px;border-right:1px solid rgba(255,255,255,.08)}.ug-toc-title{margin:0 8px 8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;opacity:.5}.ug-toc-list{list-style:none;margin:0;padding:0}.ug-toc-list a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;color:inherit;text-decoration:none;font-size:.9rem}.ug-toc-list a:hover{background:#ffffff12}.ug-toc-ic{font-size:1.05rem;width:1.3em;text-align:center}.ug-toc-badge{margin-left:auto;background:var(--highlight-color, #22d3ee);color:#06222b;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px}.ug-content{flex:1;overflow-y:auto;padding:22px 30px 60px;scroll-behavior:smooth}.ug-section{margin-bottom:34px;scroll-margin-top:12px;padding:6px 8px;border-radius:12px}.ug-section.ug-flash{animation:ug-flash 1.2s ease}@keyframes ug-flash{0%,to{background:transparent}25%{background:#22d3ee1f}}.ug-section-title{font-size:1.25rem;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}.ug-content h3{font-size:1.02rem;margin:18px 0 8px;color:var(--highlight-color, #22d3ee)}.ug-content p{line-height:1.6;margin:8px 0;font-size:.94rem}.ug-content ul,.ug-content ol{line-height:1.6;padding-left:22px;font-size:.94rem}.ug-content li{margin:5px 0}.ug-content strong{color:#fff;font-weight:700}mark.ug-hl{background:var(--highlight-color, #22d3ee);color:#06222b;border-radius:3px;padding:0 2px}.ug-foot{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);opacity:.7;font-size:.85rem}.ug-video{margin:14px 0}.ug-video video{width:100%;max-width:520px;border-radius:12px;background:#000;display:block;box-shadow:0 6px 20px #0006}.ug-video figcaption{margin-top:6px;font-size:.82rem;opacity:.72}.ug-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.ug-video-grid .ug-video{margin:0}.ug-video-grid video{max-width:100%}@media(max-width:720px){.ug-body{flex-direction:column}.ug-toc{width:auto;max-height:150px;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.ug-content{padding:18px 16px 50px}.ug-head{gap:10px}.ug-h{font-size:1rem}}