:root{--app-bg: #080e12;--app-bg-secondary: #0e1820;--app-panel: rgba(13, 21, 28, .92);--app-panel-strong: rgba(16, 27, 35, .97);--app-panel-soft: rgba(255, 255, 255, .05);--app-border: rgba(150, 200, 230, .13);--app-border-strong: rgba(180, 218, 232, .28);--app-text: #e8eff4;--app-text-muted: rgba(232, 239, 244, .74);--app-text-soft: rgba(232, 239, 244, .5);--app-accent: #f3ba62;--app-accent-strong: #de9d42;--app-accent-warm: #f7cf8d;--app-accent-text: #ffe1ac;--app-success: #88d39f;--app-danger: #f08a84;--app-warning: #f3ba62;--app-control-thumb-bg: #ffffff;--app-control-thumb-border: #e4a54b;--app-control-thumb-border-hover: #f3c67d;--app-shadow-lg: 0 28px 64px rgba(0, 0, 0, .46), 0 0 0 1px rgba(0, 0, 0, .2);--app-shadow-md: 0 16px 36px rgba(0, 0, 0, .34), 0 0 0 1px rgba(0, 0, 0, .12);--app-radius-xl: 24px;--app-radius-lg: 18px;--app-radius-md: 14px;--app-radius-sm: 10px;--background-color: var(--app-bg);--text-color: var(--app-text-muted);color-scheme:dark}html[data-theme=light]{--app-bg: #e8eef6;--app-bg-secondary: #dce5ef;--app-panel: rgba(255, 255, 255, .94);--app-panel-strong: rgba(255, 255, 255, .985);--app-panel-soft: rgba(24, 52, 80, .06);--app-border: rgba(44, 76, 109, .18);--app-border-strong: rgba(37, 74, 112, .32);--app-text: #162736;--app-text-muted: rgba(22, 39, 54, .82);--app-text-soft: rgba(22, 39, 54, .6);--app-shadow-lg: 0 24px 56px rgba(53, 84, 115, .18), 0 0 0 1px rgba(60, 88, 116, .08);--app-shadow-md: 0 14px 32px rgba(53, 84, 115, .14), 0 0 0 1px rgba(60, 88, 116, .08);--background-color: #edf3f9;--text-color: #304454;color-scheme:light}html[data-theme=light],html[data-theme=light] body{background:radial-gradient(ellipse 60% 50% at 0% 0%,rgba(243,186,98,.09) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 100% 8%,rgba(90,160,220,.09) 0%,transparent 55%),radial-gradient(ellipse 70% 60% at 88% 100%,rgba(70,150,200,.06) 0%,transparent 58%),linear-gradient(180deg,#eef2f7,#f5f8fc)}html[data-theme=light] .title-header h1{background:linear-gradient(135deg,#1a2a36,#1a2a3699);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}html[data-theme=light] .title-header .datetime{color:#162736ad}html[data-theme=light] .menu-left,html[data-theme=light] .menu-right{background:linear-gradient(180deg,#fffffffa,#f7fafdf0),var(--app-panel);border-color:#2c4c6d24;box-shadow:0 22px 42px #46648224,0 0 0 1px #ffffffb8,inset 0 1px #ffffffeb}html[data-theme=light] .menu-tint-variants{background:linear-gradient(180deg,#fffffffa,#f4f8fcf2),var(--app-panel-strong);border-color:#2c4c6d1f;box-shadow:0 16px 30px #4664822e,inset 0 1px #fffffff5}html[data-theme=light] .menu-tint-variants:after{border-top-color:#2c4c6d1f;border-right-color:#2c4c6d1f;background:#fafcfffa}html[data-theme=light] .button,html[data-theme=light] .enharmonic-button{background:linear-gradient(180deg,#fffffffa,#f4f7fbf5);color:var(--app-text-muted);border-color:#2c4c6d24;box-shadow:0 3px 10px #5b789514,inset 0 1px #fffffff2}html[data-theme=light] .menu-global-actions .button,html[data-theme=light] .menu-global-actions .enharmonic-button,html[data-theme=light] .menu-connection-actions .button{background:linear-gradient(180deg,#f8fbfefc,#e7eef6f7);color:#33485a;border-color:#34537238;border-width:1px;font-weight:600;box-shadow:0 8px 18px #5b78951a,inset 0 1px #fffffffa,inset 0 -1px #acbdcf2e}html[data-theme=light] .button:hover,html[data-theme=light] .enharmonic-button:hover{background:linear-gradient(180deg,#fffcf5fa,#faf3e5f5);border-color:#de9d4257;color:var(--app-text);box-shadow:0 8px 18px #de9d421f,inset 0 1px #fffffff5}html[data-theme=light] .menu-global-actions .button:hover,html[data-theme=light] .menu-global-actions .enharmonic-button:hover,html[data-theme=light] .menu-connection-actions .button:hover{background:linear-gradient(180deg,#fffcf5fc,#f8eed8f7);border-color:#de9d4266;color:#263847;box-shadow:0 10px 22px #de9d4229,inset 0 1px #fffffffa,inset 0 -1px #de9d421a}html[data-theme=light] .button.selected{background:linear-gradient(180deg,#fff4defa,#f9e8c4f5);border-color:#de9d4270;color:#8a5a15;box-shadow:0 8px 18px #de9d4229,inset 0 1px #ffffffeb}html[data-theme=light] .menu-global-actions .button.selected,html[data-theme=light] .menu-connection-actions .button.selected{color:#7d5111;border-color:#de9d4285;box-shadow:0 10px 22px #de9d422e,inset 0 1px #fffffff0,inset 0 -1px #d5a04a1f}html[data-theme=light] .menu-checkbox{color:var(--app-text-muted)}html[data-theme=light] .menu-checkbox input{filter:saturate(1.15) contrast(1.05)}html[data-theme=light] .theme-switch__track{background:#fffffff5;border-color:#2c4c6d29}html[data-theme=light] .piano-keys{border-color:#2c4c6d24;background:linear-gradient(180deg,#fffffffa,#f3f7fbf5);box-shadow:0 12px 24px #46648224,inset 0 1px #fffffff5}html[data-theme=light] .fret-value-tooltip{color:var(--app-text-muted)}@media (prefers-color-scheme: dark){:root{--background-color: var(--app-bg)}}*:focus-visible{outline:2px solid rgba(243,186,98,.55);outline-offset:2px}html{min-height:100%;background:radial-gradient(ellipse 60% 50% at 0% 0%,rgba(243,186,98,.13) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 100% 8%,rgba(243,186,98,.09) 0%,transparent 55%),radial-gradient(ellipse 70% 60% at 88% 100%,rgba(70,150,200,.07) 0%,transparent 58%),linear-gradient(180deg,#0b1318,#060c10)}body{margin:0;padding:0;display:flex;justify-content:center;min-height:100vh;position:relative;overflow-x:hidden;color:var(--app-text);font-family:Avenir Next,Segoe UI,Trebuchet MS,sans-serif;background:radial-gradient(ellipse 60% 50% at 0% 0%,rgba(243,186,98,.13) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 100% 8%,rgba(243,186,98,.09) 0%,transparent 55%),radial-gradient(ellipse 70% 60% at 88% 100%,rgba(70,150,200,.07) 0%,transparent 58%),linear-gradient(180deg,#0b1318,#060c10)}main{width:100%;max-width:100vw;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;box-sizing:border-box;padding:0 20px 80px;transition:margin-left .3s ease}.title-header{width:min(100%,680px);min-height:auto;padding:8px 0 10px;margin:18px 0 10px;text-align:center;display:flex;align-items:center;justify-content:center}.title-header-inner{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.title-header h1{margin:0;font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:.03em;line-height:1.2;padding-bottom:.06em;background:linear-gradient(135deg,var(--app-text) 0%,rgba(232,239,244,.7) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.theme-switch{position:fixed;top:18px;right:22px;z-index:1100;background:none;border:none;padding:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}.lang-switch{position:fixed;top:18px;right:90px;z-index:1100;display:flex;align-items:center;justify-content:center;width:36px;height:28px;border-radius:999px;background:var(--app-panel-strong);border:1px solid var(--app-border);box-shadow:var(--app-shadow-md),inset 0 1px 3px #00000038;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:0;font-size:12px;font-weight:700;color:var(--text-secondary, #aaa);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s}.lang-switch:hover{color:var(--accent, #f3ba62)}.theme-switch:focus-visible .theme-switch__track{outline:2px solid rgba(243,186,98,.55);outline-offset:2px}.theme-switch__track{display:flex;align-items:center;width:56px;height:28px;border-radius:999px;background:var(--app-panel-strong);border:1px solid var(--app-border);box-shadow:var(--app-shadow-md),inset 0 1px 3px #00000038;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}.theme-switch--light .theme-switch__track{background:#f0f8ffeb;border-color:#1e508c2e;box-shadow:0 4px 16px #0000001a,inset 0 1px 3px #0000000f}.theme-switch__thumb{position:absolute;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#f3ba62e6,#de9d42f2);box-shadow:0 2px 8px #00000052,0 0 0 1px #f3ba6238;display:flex;align-items:center;justify-content:center;transition:left .28s cubic-bezier(.34,1.56,.64,1),background .28s ease,box-shadow .28s ease}.theme-switch--light .theme-switch__thumb{left:31px;background:linear-gradient(145deg,#ffe47a,#f3ba62);box-shadow:0 2px 10px #f3ba626b,0 0 0 1px #f3ba624d}.theme-switch__icon{font-size:13px;line-height:1;-webkit-user-select:none;user-select:none}.login-status{position:fixed;top:20px;right:80px;display:flex;align-items:center;gap:10px;z-index:1000}.title-header .datetime{font-size:14px;color:var(--app-text-soft)}.title-header .selected-state-name{margin-top:4px;font-size:13px;color:var(--app-success);font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid rgba(136,211,159,.28);background:#88d39f1a;display:inline-block;cursor:help;transition:all .2s ease}.title-header .selected-state-name:hover{background:#88d39f29;border-color:#88d39f6b;transform:translateY(-1px)}g.note.transparent:hover{opacity:1}g.note{fill:var(--background-color);stroke-width:1.5px;stroke:var(--text-color);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}g.note.selected>circle{opacity:1;stroke-dasharray:4,4;stroke-width:3px;stroke:var(--text-color)}g.note.hidden{opacity:0}g.note.transparent{opacity:.3}g.note.transparent>text{opacity:1;color:inherit}g.note.force-transparent{opacity:.5!important}g.note.force-transparent>text{opacity:1!important}g.note.visible{opacity:1}g.note.blue{fill:var(--color-level1-blue-fill)}g.note.blue>text{stroke:#fff;fill:#fff}g.note.trans{fill:var(--color-level1-trans-fill)}g.note.trans>text{stroke:#fff;fill:#fff}g.note.gray{fill:var(--color-level1-gray-fill)}g.note.gray>text{stroke:#fff;fill:#fff}g.note.red{fill:var(--color-level1-red-fill)}g.note.red>text{stroke:#fff;fill:#fff}g.note.green{fill:var(--color-level1-green-fill)}g.note.green>text{stroke:#fff;fill:#fff}g.note.brown{fill:var(--color-level1-brown-fill)}g.note.brown>text{stroke:#fff;fill:#fff}g.note.navy{fill:var(--color-level1-navy-fill)}g.note.navy>text{stroke:#fff;fill:#fff}g.note.crimson{fill:var(--color-level1-crimson-fill)}g.note.crimson>text{stroke:#fff;fill:#fff}path.string{stroke:var(--text-color)!important;fill:none;pointer-events:none;stroke-width:1px!important}path.frets{stroke:var(--text-color)!important;stroke-width:1px;fill:none}g.note>text{stroke:var(--text-color);stroke-width:0px;fill:var(--text-color);text-anchor:middle;dominant-baseline:middle;font-size:20px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#editable-div{text-align:center;font-size:20px}.fretboard-stage{padding-top:10px;display:flex;justify-content:center;width:100%;max-width:100%;position:relative;z-index:1;overflow-x:auto;box-sizing:border-box}.menu{text-align:center;padding:24px 0;position:relative;z-index:1;isolation:isolate;transform:translateZ(0);will-change:transform;display:flex;flex-direction:row;gap:40px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.menu-scale-bottom{width:100%;display:flex;justify-content:center}.menu-left,.menu-right{display:flex;flex-direction:column;gap:18px;align-items:center;padding:22px 24px;border:1px solid var(--app-border);border-radius:var(--app-radius-xl);background:linear-gradient(160deg,#fff1,#ffffff06),var(--app-panel);box-shadow:var(--app-shadow-md),inset 0 1px #c8e6ff14;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}.menu-palette-shell{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;overflow:visible}.menu-tint-variants{position:absolute;left:-74px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:20px;border:1px solid rgba(230,237,242,.1);background:linear-gradient(180deg,#ffffff14,#ffffff08),#091015eb;box-shadow:0 16px 30px #00000047,inset 0 1px #ffffff0f;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:3}.menu-tint-variants:after{content:"";position:absolute;top:50%;right:-7px;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);border-top:1px solid rgba(230,237,242,.08);border-right:1px solid rgba(230,237,242,.08);background:#0c141ae6}.menu-section-panel{width:100%;box-sizing:border-box;padding:12px 0 0;border:none;border-radius:0;background:transparent;box-shadow:none}.menu-connection-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;width:100%}.menu-control-button-primary{margin-right:0;min-width:0}.menu-control-button-compact{min-width:0;padding-inline:12px}.menu-download-panel{display:flex;align-items:center;gap:14px;padding-top:12px;border-top:1px solid rgba(230,237,242,.08)}.menu-download-options{flex:1;display:flex;flex-direction:column;gap:10px}.menu-download-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.menu-checkbox{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--app-text-muted);white-space:nowrap}.menu-checkbox input{accent-color:var(--app-accent-strong);cursor:pointer}.menu-download-button{min-width:126px;background:#ffffff0d;color:var(--app-text-muted);border-color:var(--app-border);box-shadow:none}.menu-download-button:hover{background:#f3ba621f;color:var(--app-text)}text.marker{text-anchor:middle;dominant-baseline:middle;font-size:16px;font-weight:700;fill:var(--text-color);opacity:1!important;visibility:visible!important;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}g.markers{opacity:1!important;visibility:visible!important}.color-selector{margin:0;padding:10px 8px 12px;width:400px;display:flex;flex-direction:column;gap:12px;background:transparent;border:none;border-radius:0;box-shadow:none}.color-palette-row{display:flex;justify-content:center;align-items:center;gap:10px;padding:0}button.color{width:40px;height:40px;border-radius:12px;border:1px solid rgba(230,237,242,.18);cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 10px 18px #0000002e}button.color.color-tint{width:32px;height:32px;border-radius:10px;box-shadow:0 8px 16px #00000038}button.color.color-tint.selected{box-shadow:0 0 0 3px #e6edf2e0,0 0 12px #f3ba6257;transform:scale(1.1);border-width:2px}button.color:hover{border-color:#e6edf270;transform:translateY(-2px) scale(1.08);box-shadow:0 10px 22px #0000004d}button.color.selected{box-shadow:0 0 0 2px #e6edf2e0,0 0 14px #f3ba6242}button.color.level2.selected{border-width:7px;box-shadow:0 0 0 1px #e6edf2e0,0 0 12px #f3ba6238}.button{background:#ffffff0a;color:var(--app-text-muted);border:1px solid var(--app-border);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14px;min-width:70px;height:36px;display:inline-flex;align-items:center;justify-content:center;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease}.button:hover{background:#f3ba621c;border-color:#f3ba6252;color:var(--app-text);transform:translateY(-1px);box-shadow:0 0 0 1px #f3ba6229,0 6px 18px #f3ba621a}.button:active{background:#f3ba6229;transform:translateY(0) scale(.97);box-shadow:none}.button.selected{background:#f3ba6224;border:1px solid rgba(243,186,98,.38);color:var(--app-accent-text);box-shadow:0 0 0 1px #f3ba6224,0 4px 14px #f3ba621f}.color.blue{background-color:var(--color-level1-blue-button)}.color.trans{background-color:var(--color-level1-trans-button)}.color.green{background-color:var(--color-level1-green-button)}.color.red{background-color:var(--color-level1-red-button)}.color.brown{background-color:var(--color-level1-brown-button)}.color.gray{background-color:var(--color-level1-gray-button)}.color.navy{background-color:var(--color-level1-navy-button)}.color.crimson{background-color:var(--color-level1-crimson-button)}.color.level2{background-color:transparent;border:6px solid;box-sizing:border-box}.color.level2.yellow{border-color:var(--color-level2-yellow)}.color.level2.cyan{border-color:var(--color-level2-cyan)}.color.level2.pink{border-color:var(--color-level2-pink)}.color.level2.grass-green{border-color:var(--color-level2-grass-green)}.color.level2.orange{border-color:var(--color-level2-orange)}.color.level2.white{border-color:var(--color-level2-white);border-width:6px}.enharmonic-button{background:#ffffff0d;color:var(--app-text);border:1px solid var(--app-border);border-radius:999px;padding:0;cursor:pointer;font-size:16px;min-width:32px;width:32px;height:36px;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s,transform .2s}.enharmonic-button:hover{background:#f3ba6224;border-color:#f3ba6257;transform:translateY(-1px)}.enharmonic-button:active{background:#f3ba6233}.menu-global-actions{margin:0;width:100%;display:grid;grid-template-columns:40px repeat(4,minmax(0,1fr));justify-content:center;align-items:center;gap:8px;padding:12px 0 14px;background:transparent;border:none;border-radius:18px;box-shadow:none}.menu-global-actions .button,.menu-global-actions .menu-download-button{width:100%;min-width:0}.fretboard-stage{display:flex;justify-content:center;width:100%;max-width:100%;margin:0 auto 12px;position:relative;z-index:1;isolation:isolate;overflow-x:auto;box-sizing:border-box;padding:8px 0 4px;border:none;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fretboard-stage svg{display:block;position:relative;z-index:1;isolation:isolate;max-width:100%;height:auto;border-radius:0}.error{font-size:18px;text-anchor:middle}.menu-piano-keyboard{display:flex;justify-content:center;padding:12px 0 14px;position:relative;z-index:1;background:transparent;border:none;border-radius:0;box-shadow:none}.piano-keyboard{display:inline-block}.piano-keys{display:flex;position:relative;border:1px solid var(--app-border);border-radius:18px;padding:8px;background:linear-gradient(180deg,#ffffff12,#ffffff08);height:130px;box-shadow:0 12px 24px #0000002e}.piano-key{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .1s ease;box-sizing:border-box}.piano-key.white-key{width:45px;height:130px;background:linear-gradient(180deg,#fefefe,#dfe6ea);border:1px solid rgba(17,34,44,.18);border-radius:0 0 14px 14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;position:relative;margin-right:2px}.piano-key.white-key:last-of-type{margin-right:0}.piano-key.white-key:hover{background:linear-gradient(180deg,#fff,#e9f0f4)}.piano-key.white-key.selected{background:linear-gradient(180deg,#f9e1b9,#f0bd72);border-color:var(--app-accent-strong);border-width:2px;box-shadow:inset 0 0 0 1px #ffffff7a}.piano-key.black-key{width:28px;height:80px;background:linear-gradient(180deg,#2b3942,#10181d);border:1px solid rgba(255,255,255,.08);border-radius:0 0 10px 10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;position:absolute;top:8px;z-index:2;box-shadow:0 10px 16px #00000038}.piano-key.black-key:hover{background:linear-gradient(180deg,#31434d,#141e24)}.piano-key.black-key.selected{background:linear-gradient(180deg,#f1bb67,#c88426);border-color:#ffe2b1;border-width:2px}.key-label{font-size:13px;font-weight:700;color:var(--app-text-muted)}.piano-key.white-key .key-label{color:#21323d}.piano-key.white-key.selected .key-label{color:#0d222b}.piano-key.black-key .key-label,.piano-key.black-key.selected .key-label{color:#fff}.connection{pointer-events:stroke;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;opacity:1}.connection-preview{pointer-events:none}.connection-toolbar-container{pointer-events:all;z-index:101;overflow:visible!important;width:100%;height:100%;clip-path:none!important;clip:auto!important;overflow-x:visible!important;overflow-y:visible!important;isolation:isolate}.connection-toolbar{background:transparent;border:none;border-radius:6px;padding:6px 8px;box-shadow:none;display:flex;align-items:center;position:relative;overflow:visible!important;width:max-content;height:max-content;clip-path:none!important;clip:auto!important;-webkit-backdrop-filter:none;backdrop-filter:none}.toolbar-icons{display:flex;align-items:center;gap:4px}.toolbar-icon-wrapper{position:relative;overflow:visible!important;z-index:102;isolation:isolate}.toolbar-icon-btn{background:#ffffff0d;color:var(--app-text-muted);border:1px solid rgba(230,237,242,.12);border-radius:10px;padding:6px 10px;cursor:pointer;font-size:14px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s,color .2s,transform .2s;white-space:nowrap;pointer-events:auto!important;position:relative;z-index:104}.toolbar-icon-btn:hover{background:#f3ba621f;border-color:#f3ba6247;color:var(--app-text);transform:translateY(-1px)}.toolbar-icon-btn:active{background:#ffffff14}.toolbar-icon-btn.active{background:#f3ba6229;border-color:#f3ba6257;color:var(--app-accent-text)}.toolbar-icon-btn.delete-icon-btn{color:#ff6b6b;border-color:#ff6b6b;background:#ff6b6b1a}.toolbar-icon-btn.delete-icon-btn:hover{background:#ff6b6b33;border-color:#ff5252}.toolbar-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:linear-gradient(180deg,#ffffff12,#ffffff08),#0b1318f5;border:1px solid rgba(230,237,242,.12);border-radius:14px;box-shadow:var(--app-shadow-md);min-width:100px;width:max-content;max-width:none;z-index:103!important;padding:6px;white-space:nowrap;overflow:visible!important;display:block!important;visibility:visible!important;clip-path:none!important;clip:auto!important;transform:translateZ(0);will-change:transform;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.toolbar-icon-wrapper .toolbar-dropdown.toolbar-dropdown-up,.toolbar-dropdown.toolbar-dropdown-up{top:auto!important;bottom:calc(100% + 4px)!important}.toolbar-dropdown button{display:block;width:100%;min-width:100px;background-color:transparent;color:var(--app-text-muted);border:none;border-radius:10px;padding:6px 12px;cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s;white-space:nowrap;box-sizing:border-box}.toolbar-dropdown button:hover{background-color:#f3ba621f;color:var(--app-text)}.toolbar-dropdown button.active{background-color:#f3ba622e;color:var(--app-accent-text)}.toolbar-slider-wrapper{padding:8px 12px;display:flex;align-items:center;gap:10px;min-width:150px;background:transparent}.toolbar-slider-wrapper input[type=range]{flex:1;cursor:pointer;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}.toolbar-slider-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--app-control-thumb-bg);border:2px solid var(--app-control-thumb-border);border-radius:50%;cursor:pointer;box-shadow:0 4px 10px #11222c3d;margin-top:-5px}.toolbar-slider-wrapper input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;background:#e6edf22e;border-radius:999px}.toolbar-slider-wrapper input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--app-control-thumb-bg);border:2px solid var(--app-control-thumb-border);border-radius:50%;cursor:pointer;box-shadow:0 4px 10px #11222c3d}.toolbar-slider-wrapper input[type=range]::-moz-range-track{width:100%;height:6px;background:#e6edf22e;border-radius:999px}.toolbar-slider-wrapper span{min-width:35px;text-align:right;font-size:12px;color:var(--app-text-muted)}.fret-range-slider-wrapper{display:flex;align-items:center;justify-content:center;padding:10px 0 0;margin:0 auto;max-width:500px;width:100%;box-sizing:border-box;border:none;border-radius:0;background:transparent;box-shadow:none}.dual-range-slider{position:relative;width:min(100%,300px);height:50px;margin:0 auto}.dual-range-inputs-container{position:relative;margin:auto;width:80%;height:100%;padding:0 9px}.dual-range-track{position:absolute;top:40px;left:9px;right:9px;height:6px;background:#e6edf22e;border-radius:999px;z-index:0}.dual-range-selected{position:absolute;top:40px;height:6px;background:linear-gradient(90deg,var(--app-control-thumb-border),var(--app-control-thumb-border-hover));border-radius:999px;box-shadow:0 0 10px #e4a54b47;pointer-events:none;z-index:1;transition:left .1s ease,width .1s ease}.dual-range-input{position:absolute;width:calc(100% - 18px);left:9px;height:6px;top:40px;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;cursor:pointer;margin:0;padding:0;z-index:2}.dual-range-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--app-control-thumb-bg);border:2px solid var(--app-control-thumb-border);border-radius:50%;cursor:pointer;pointer-events:all;position:relative;z-index:3;margin-top:-6px;box-shadow:0 4px 12px #11222c47;transition:border-color .2s,transform .2s}.dual-range-input::-webkit-slider-thumb:hover{border-color:var(--app-control-thumb-border-hover);transform:scale(1.05)}.dual-range-input::-moz-range-thumb{width:18px;height:18px;background:var(--app-control-thumb-bg);border:2px solid var(--app-control-thumb-border);border-radius:50%;cursor:pointer;pointer-events:all;position:relative;z-index:3;box-shadow:0 4px 12px #11222c47;transition:border-color .2s,transform .2s}.dual-range-input::-moz-range-thumb:hover{border-color:var(--app-control-thumb-border-hover);transform:scale(1.05)}.dual-range-input::-webkit-slider-runnable-track{width:100%;height:6px;background:transparent;border-radius:999px}.dual-range-input::-moz-range-track{width:100%;height:6px;background:transparent;border-radius:999px}.dual-range-input-min{z-index:2}.dual-range-input-max{z-index:3}.fret-value-tooltip{position:absolute;top:4px;font-size:12px;font-weight:700;color:var(--app-text-muted);white-space:nowrap;pointer-events:none;z-index:4;transition:left .1s ease;text-align:center}g.note.preview-hover{opacity:1}g.note.preview-hover>circle{stroke-dasharray:3,3;stroke-width:2px;stroke:var(--app-accent)}@media (max-width: 1024px){.menu{gap:18px}.menu-left,.menu-right{width:min(100%,420px)}.menu-download-panel{flex-direction:column;align-items:stretch}.menu-download-button{width:100%}.menu-global-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width: 1600px){.fretboard-stage svg{max-width:calc(100vw - 40px)}}@media (max-width: 1200px){main{padding:0 15px}.fretboard-stage svg{max-width:calc(100vw - 30px)}}@media (max-width: 768px){html,body,#app{overflow-x:hidden!important;width:100%;max-width:100%;position:relative}main{overflow-x:hidden!important;width:100%;max-width:100%;position:relative;padding:0 10px}.fretboard-stage{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;width:100%;max-width:100vw;justify-content:flex-start!important}.fretboard-stage svg{width:auto!important;min-width:fit-content!important;max-width:none!important;display:block;flex-shrink:0}.menu{flex-direction:column!important;overflow-x:hidden!important;flex-wrap:nowrap!important;width:100%;max-width:100%;gap:12px!important;padding:20px 16px!important;box-sizing:border-box;margin:0}.menu-palette-shell{width:100%;justify-content:center}.menu-tint-variants{position:static;flex-direction:row;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.menu-left,.menu-right{width:100%!important;max-width:100%!important;overflow-x:hidden!important;padding:18px 14px!important;box-sizing:border-box;margin:0}.color-selector{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;padding:10px 0 12px!important;margin:0}.menu-global-actions{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;padding:8px 0 12px!important;margin:0;justify-content:center;grid-template-columns:repeat(2,minmax(0,1fr))}.menu-connection-panel{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;padding:12px 0 0!important;margin:0;border:none;border-radius:0;background:transparent}.menu-connection-panel>div{width:100%!important;max-width:100%!important;overflow-x:hidden!important;flex-wrap:wrap!important;box-sizing:border-box;justify-content:stretch;gap:8px!important}.menu-connection-panel>div button{margin-right:0!important;margin-left:0!important}.menu-download-panel{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;flex-wrap:wrap!important;padding:12px 0 0!important;margin:0!important;justify-content:center;gap:8px!important;align-items:center;border:none;border-radius:0;background:transparent}.menu-download-panel label{margin:0!important;white-space:normal}.menu-download-panel button{margin-left:0!important;flex-shrink:0;width:100%}.menu-piano-keyboard{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;padding:12px 0 10px!important;margin:0}.piano-keyboard,.piano-keys{max-width:100%!important;overflow-x:hidden!important}.fret-range-slider-wrapper{width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box;padding:8px 0 0!important;margin:0}}.scale-display{width:min(100%,560px);margin-top:6px;padding:16px 16px 14px;border:1px solid var(--app-border);border-radius:24px;background:radial-gradient(120% 120% at 8% 0%,#f3ba622e,#f3ba6200 55%),radial-gradient(110% 130% at 100% 100%,#7ec7dc29,#7ec7dc00 58%),linear-gradient(160deg,#ffffff0f,#ffffff08),var(--app-panel);box-shadow:var(--app-shadow-md);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative}.scale-display:before{content:"";position:absolute;left:16px;right:16px;top:46px;height:1px;background:linear-gradient(to right,#fff0,#e6edf247,#fff0)}.scale-display-header{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;margin-bottom:14px}.scale-display-title-wrap,.scale-display-title{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;caret-color:transparent}.scale-display-title{margin:0;font-family:Avenir Next,Segoe UI,sans-serif;font-size:24px;font-weight:700;line-height:1.1;background:linear-gradient(135deg,var(--app-accent-warm) 0%,var(--app-text) 60%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.scale-display-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.scale-degree-card{min-width:0;padding:9px 6px 10px;border-radius:16px;border:1px solid rgba(230,237,242,.12);background:linear-gradient(180deg,#ffffff14,#ffffff08);text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 8px 18px #00000029}.scale-degree-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px #00000042,0 0 0 1px #f3ba622e;border-color:#f3ba6238}.scale-degree-index{margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif;font-size:10px;font-weight:700;color:var(--app-text-soft)}.scale-degree-chord{margin:2px 0 0;line-height:1.15;white-space:nowrap}.scale-degree-note{font-family:Avenir Next,Segoe UI,sans-serif;font-size:28px;font-weight:700;color:var(--app-text)}.scale-degree-symbol{font-family:Trebuchet MS,Segoe UI,sans-serif;margin-left:1px;font-size:15px;font-weight:700;color:var(--app-text-muted)}.scale-degree-roman{margin:2px 0 0;font-family:JetBrains Mono,Fira Code,Menlo,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:.03em;color:#d6e4ecdb}html[data-theme=light] .scale-display{background:radial-gradient(120% 120% at 8% 0%,#f3ba622e,#f3ba6200 52%),radial-gradient(110% 130% at 100% 100%,#7ec7dc24,#7ec7dc00 56%),linear-gradient(180deg,#fffffffc,#f5f9fcf5),var(--app-panel);border-color:#2c4c6d24;box-shadow:0 18px 36px #46648224,0 0 0 1px #ffffffd1,inset 0 1px #fffffff0}html[data-theme=light] .scale-display:before{background:linear-gradient(to right,#fff0,#2c4c6d29,#fff0)}html[data-theme=light] .scale-display-title{background:linear-gradient(135deg,#a26a16 0%,var(--app-text) 56%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}html[data-theme=light] .scale-degree-card{border-color:#2c4c6d1a;background:linear-gradient(180deg,#fffffffa,#f4f8fbf2);box-shadow:0 10px 20px #4664821a,inset 0 1px #fffffff2}html[data-theme=light] .scale-degree-note{color:var(--app-text)}html[data-theme=light] .scale-degree-symbol{color:#162736a8}html[data-theme=light] .scale-degree-roman,html[data-theme=light] .scale-degree-index{color:#16273675}@media (max-width: 900px){.scale-display{width:100%;max-width:100%}.scale-display-grid{overflow-x:auto;grid-template-columns:repeat(7,minmax(66px,1fr));padding-bottom:4px}.scale-display-grid::-webkit-scrollbar{height:5px}.scale-display-grid::-webkit-scrollbar-thumb{background:#ffffff47;border-radius:999px}}.fretboard-dock{position:fixed;left:22px;bottom:22px;z-index:1100;display:inline-flex;flex-direction:column;pointer-events:none}.dock-stack{position:absolute;left:0;bottom:calc(100% + 14px);display:flex;flex-direction:column-reverse;gap:12px;align-items:flex-start;min-width:300px;padding:22px 18px 30px 22px;max-height:min(70vh,760px);overflow-y:auto;overflow-x:hidden;scroll-padding-bottom:28px;scrollbar-gutter:stable;border-radius:var(--app-radius-xl);background:#090f1414;border:1px solid rgba(150,200,230,.1);box-shadow:0 10px 22px #00000014,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(6px) saturate(105%);backdrop-filter:blur(6px) saturate(105%);opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transform-origin:left bottom;transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1)}.dock-stack.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.dock-stack::-webkit-scrollbar{width:6px}.dock-stack::-webkit-scrollbar-track{background:transparent}.dock-stack::-webkit-scrollbar-thumb{background:#e6edf233;border-radius:999px}.dock-item{width:210px;height:136px;position:relative;flex:0 0 auto;transform-origin:left bottom;transform:translate(var(--dock-curve-offset, 0px)) translateY(var(--dock-lift-offset, 0px)) rotate(var(--dock-tilt, 0deg));transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .22s ease}.dock-item:hover{transform:translate(8px) scale(1.04) rotate(0)}.dock-item.selected{filter:drop-shadow(0 0 16px rgba(222,157,66,.34))}.dock-item-apply{width:100%;height:100%;padding:0;border:1px solid var(--app-border);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#ffffff14,#ffffff08),#0a1116cc;cursor:pointer;display:block;box-shadow:0 10px 22px #00000038,inset 0 1px #ffffff0f}.dock-item-apply:hover{border-color:#f3ba626b;box-shadow:0 10px 22px #00000038,0 0 0 1px #f3ba6229,inset 0 1px #ffffff14}.dock-item-thumbnail,.dock-preview{width:100%;height:100%;object-fit:cover;display:block;background:var(--background-color)}.dock-item-placeholder,.dock-label,.dock-empty{display:flex;align-items:center;justify-content:center;color:var(--text-color);text-align:center}.dock-item-placeholder{width:100%;height:100%;font-size:12px}.dock-empty{min-width:286px;min-height:90px;padding:0 14px;font-size:13px;line-height:1.5}.dock-bar{display:inline-flex;align-items:flex-start;justify-content:center;padding:14px;border-radius:var(--app-radius-xl);background:linear-gradient(160deg,#ffffff13,#ffffff06),var(--app-panel-strong);border:1px solid var(--app-border);box-shadow:var(--app-shadow-lg),inset 0 1px #c8e6ff1a;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);pointer-events:auto}.dock-primary-col{display:flex;flex-direction:column;align-items:center;gap:12px}.dock-primary{position:relative;width:116px;height:116px;border:none;background:transparent;padding:0;cursor:pointer}.dock-primary-face,.dock-stack-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;overflow:hidden}.dock-stack-shadow{border:1px solid rgba(230,237,242,.08);background:#e6edf20d}.dock-stack-shadow-back{transform:translate(-10px,-8px) scale(.94);opacity:.34}.dock-stack-shadow-mid{transform:translate(-5px,-4px) scale(.97);opacity:.55}.dock-primary-face{border:1px solid var(--app-border);background:linear-gradient(180deg,#ffffff17,#ffffff08),#0a1116d6;box-shadow:0 14px 24px #00000047,inset 0 1px #ffffff0f}.dock-primary:hover .dock-primary-face{border-color:var(--app-border-strong)}.dock-count-badge{position:absolute;right:-7px;bottom:-7px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--app-accent-warm),var(--app-accent-strong));color:#071118;font-size:12px;font-weight:800;box-shadow:0 0 0 2px #080e1299,0 8px 20px #de9d4275,0 0 12px #f3ba624d}.dock-label{width:100%;height:100%;font-size:13px;font-weight:700;padding:8px;box-sizing:border-box}.dock-clear-btn{width:100%;height:34px;padding:0 16px;border:1px solid var(--app-border);border-radius:999px;background:#ffffff0a;color:var(--app-text-muted);font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}.dock-clear-btn:hover{border-color:#f08a847a;background:#f08a841f;color:var(--app-text);transform:translateY(-1px)}html[data-theme=light] .dock-stack,html[data-theme=light] .dock-bar{background:#ffffff38;border-color:#2c4c6d1a;box-shadow:0 12px 24px #46648214,0 0 0 1px #ffffff57,inset 0 1px #fff6}html[data-theme=light] .dock-item-apply,html[data-theme=light] .dock-primary-face{background:linear-gradient(180deg,#fffffffa,#f2f7fbf2),#eef4fafa;border-color:#2c4c6d24;box-shadow:0 10px 20px #4664821f,inset 0 1px #fffffff2}html[data-theme=light] .dock-stack-shadow{border-color:#2c4c6d1a;background:#e6eef6b8}html[data-theme=light] .dock-count-badge{box-shadow:0 0 0 2px #ecf3f9eb,0 8px 20px #de9d4247,0 0 12px #f3ba623d}@media (max-width: 768px){.fretboard-dock{left:12px;bottom:12px;gap:10px}.dock-stack{max-height:54vh;min-width:240px;padding:16px 12px 22px 16px}.dock-item{width:168px;height:108px}.dock-bar{padding:10px}.dock-primary{width:88px;height:88px}}.toast{position:fixed;bottom:20px;right:20px;min-width:200px;max-width:400px;padding:14px 18px;border-radius:18px;border:1px solid var(--app-border);box-shadow:var(--app-shadow-md);z-index:10000;animation:slideIn .28s cubic-bezier(.22,1,.36,1);font-size:14px;line-height:1.5;word-wrap:break-word;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.toast.exiting{animation:slideOut .22s cubic-bezier(.55,0,1,.45) forwards}.toast-content{color:var(--app-text);text-align:left;font-weight:600}.toast.info{background:linear-gradient(180deg,#f3ba6229,#ffffff0a),var(--app-panel-strong);border-color:#f3ba6242;border-left:3px solid rgba(243,186,98,.7)}.toast.success{background:linear-gradient(180deg,#88d39f29,#ffffff0a),var(--app-panel-strong);border-color:#88d39f47;border-left:3px solid rgba(136,211,159,.72)}.toast.error{background:linear-gradient(180deg,#f08a8429,#ffffff0a),var(--app-panel-strong);border-color:#f08a8447;border-left:3px solid rgba(240,138,132,.72)}.toast.warning{background:linear-gradient(180deg,#f3ba6229,#ffffff0a),var(--app-panel-strong);border-color:#f3ba624d;border-left:3px solid rgba(243,186,98,.72)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media (max-width: 768px){.toast{bottom:10px;right:10px;left:10px;max-width:none;min-width:auto}}