:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--header-height: 60px;color-scheme:light dark;color:#ffffffde;background-color:#242424;--background-color: #242424;--bg-color-header:#232935;--color-bg: #16181c;--color-border: rgba(255, 255, 255, .08);--color-bg-soft: #1a1f26;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-key: #fd4463;--color-key-05: rgba(253, 68, 99, .05);--color-key-10: rgba(253, 68, 99, .1);--color-key-25: rgba(253, 68, 99, .25);--color-key-50: rgba(253, 68, 99, .5);--color-key-70: rgba(253, 68, 99, .7);--color-key-80: rgba(253, 68, 99, .8);--color-key-90: rgba(253, 68, 99, .9);--color-note: #222;--color-note: #221541;--color-note: rgb(20, 33, 68);--color-note: #d9d9d9;--color-note-hover:var(--color-key);--color-note-text: #fff;--color-note-text: #222;--color-note-text-hover: #fff;--color-note-stroke-circle:#8f8989;--color-note-stroke-circle-hover:#fff;--color-note-playing: var(--color-key);--link-text-color:#222;--link-text-hover-color:#222;--color-overlay: rgba(10, 26, 47, .65);--color-text-light: #F6F7F9;--color-guitar-downstroke-rgb: 52, 152, 219;--color-guitar-upstroke-rgb: 230, 126, 34;--color-track-solo:#f1c40f;--color-play-dark: var(--color-key-25);--color-play: var(--color-key);--color-play-light: var(--color-key-90);--color-play-text-dark: #F6F7F9;--color-play-text-light: #003318;--color-stop-dark: #b03535;--color-stop: #d94a4a;--color-stop-light: #ff8a8a;--color-stop-text-dark: #ffffff;--color-stop-text-light: #3a0000;--color-neutral-25: rgba(255,255,255,.25);--color-neutral-50: rgba(255,255,255,.5);--color-neutral-75: rgba(255,255,255,.75);--color-shadow-strong: rgba(0, 0, 0, .3);--color-shadow-soft: rgba(0, 0, 0, .15);--bg-dark: #161a23;--bg-dark-90: rgba(22, 26, 35, .9);--bg-dark-2: #1e2430;--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .22);--glass-hover: rgba(253, 68, 99, .35);--glass-panel: rgba(255,255,255,.1);--bg-soft: rgba(255, 255, 255, .06);--bg-card: rgba(41, 41, 41, .14);--bright-30:rgba(255, 255, 255, .3);--bg-track-row-bg-color:rgba(22, 26, 35, .2);--footer-bg: var(--bg-dark);--footer-text:var(--color-text-light);--footer-accent:var(--color-key)}a{font-weight:500;color:var(--link-text-color);text-decoration:inherit}a:hover{color:var(--link-text-hover-color)}html,body,#root{height:100%;margin:0;padding:0}body{margin:0;min-width:320px;min-height:100vh;text-align:center}h1{font-size:3.2em;line-height:1.1}h4{font-size:.83em;padding:unset;margin:unset}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--key-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:var(--link-text-hover-color)}button{background-color:#f9f9f9}}.card{margin:16px auto;padding:18px 20px;border-radius:18px;text-align:center;background:var(--bg-card);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 22px #00000059;display:block;cursor:pointer;text-decoration:none;color:var(--color-text-light);transform:scale(1);transition:transform .35s cubic-bezier(.13,.85,.43,1),box-shadow .35s ease,background .35s ease,border-color .35s ease}.no-margin{margin:unset}.w87{width:87%}.w83{width:83%}.card:hover{transform:translateY(-1px) scale(1.015);background:#f9778c59;border-color:var(--color-key);box-shadow:0 12px 20px #fd446373,inset 0 0 14px #ff758c40}.dawButton{display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(to bottom,#282828e6,#0f0f0fe6);color:var(--color-text-light);font-weight:700;font-size:.75rem;box-shadow:inset 0 1px #ffffff1f,0 2px 4px #00000059;transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease}.dawButton:hover{transform:translateY(1px);border-color:var(--color-key-25)}.dawButton.set{background:linear-gradient(to bottom,var(--color-key-25),var(--color-key-05));border-color:var(--color-key-25);opacity:1;filter:none;box-shadow:inset 0 1px #fff3,0 0 0 1px #b91c1c99,0 0 12px #ef444459}.region-note{position:absolute;transform:translateY(-50%)}.region-note:hover{transform:translateY(-50%) scale(1.2);border-color:#ffffffe6;z-index:11}.region-note{background-color:rgba(255,255,255,calc(.15 + var(--vel) * .75))}.headerPage{width:100%;position:fixed;top:0;z-index:200;background:#0e1018;border-bottom:1px solid rgba(255,255,255,.12);font-size:10pt;transition:background .35s ease,backdrop-filter .35s ease}.headerPage:not(.headerSelectInstrument){height:var(--header-height, 60px);display:flex;align-items:center;justify-content:center}.headerPage.headerSelectInstrument{display:flex;flex-direction:column}.headerPage.scrolled{background:#0e101873;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.header-inner{width:100%;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-sizing:border-box}.header-instrument{width:100%;height:100%;background:#ffffff1a;border-top:1px solid rgba(255,255,255,.15);display:flex;align-items:center;padding-left:26px;-webkit-backdrop-filter:blur(16px) saturate(180%);height:80px}.headerPage .title{font-size:1.35rem;font-weight:600;color:var(--color-key);white-space:nowrap;text-decoration:none}.labelInstrument{color:#f5f5f5}@media (max-width: 768px){.header-inner{justify-content:space-between}}.menu{--header-height: 60px;--color-menu-item: var(--color-text-light);--color-hover: var(--color-key);--bg-submenu-glass: rgba(20, 22, 28, .78);--bg-submenu-glass-hover: rgba(253, 68, 99, .15);--color-burger-line: whitesmoke;--bg-color-menu-mobile: rgba(20, 22, 28, .94);--color-menu-link-mobile: whitesmoke;--bg-color-mobile-hover: rgba(253, 68, 99, .15);position:relative;z-index:2500}.menu-desktop{display:flex;gap:1.2rem;align-items:center;list-style:none;margin:0;padding:0}.menu-item{position:relative}.menu-item>a,.menu-label.no-link{display:inline-block;font-weight:500;text-decoration:none;color:var(--color-menu-item);transition:color .2s ease,background .2s ease}.menu-item>a:hover,.menu-label.no-link:hover{color:var(--color-hover)}.menu-item.parent>a,.menu-item.parent .menu-label.no-link{border-bottom:2px solid var(--color-hover)}.submenu{position:absolute;top:100%;left:0;min-width:210px;padding:6px 0;background:var(--bg-submenu-glass);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 32px #0006;list-style:none;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:3000}.submenu.open{opacity:1;transform:translateY(0);pointer-events:auto}.submenu a{display:block;padding:.55rem 1rem;font-size:.9rem;color:#f5f5f5;text-decoration:none;transition:background .1s ease,color .1s ease}.submenu a:hover{background:var(--bg-submenu-glass-hover);color:var(--color-hover)}.burger{width:40px;height:40px;cursor:pointer;border:none;background:none;display:none;align-items:center;justify-content:center;z-index:3100}.burger-line{position:absolute;width:24px;height:2px;background-color:var(--color-burger-line);border-radius:2px;transition:.2s ease}.burger-line:nth-child(1){top:12px}.burger-line:nth-child(2){top:19px}.burger-line:nth-child(3){top:26px}.burger.open .burger-line:nth-child(1){transform:rotate(45deg);top:19px}.burger.open .burger-line:nth-child(2){opacity:0}.burger.open .burger-line:nth-child(3){transform:rotate(-45deg);top:19px}.menu-mobile{display:none;position:fixed;inset:var(--header-height) 0 0 0;background:var(--bg-color-menu-mobile);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:1rem;overflow-y:auto;opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease;z-index:3200}.menu-mobile.open{display:block;opacity:1;transform:translateY(0)}.menu-link-mobile{width:100%;color:var(--color-menu-link-mobile);text-decoration:none;padding:.7rem 0;display:flex;justify-content:space-between;transition:background .12s ease,color .12s ease}.menu-link-mobile:hover{background:var(--bg-color-mobile-hover);color:var(--color-hover)}@media (max-width: 768px){.menu-desktop{display:none}.burger{display:flex}}button,button:focus,button:active,button:focus-visible,a:focus,a:active{outline:none!important;box-shadow:none!important}button,a{-webkit-tap-highlight-color:transparent}.menu-item-mobile{list-style:none;padding:0}.menu-item-mobile>a,.submenu-toggle{width:100%;padding:.9rem .3rem;background:none;border:none;outline:none;text-align:left;text-decoration:none;color:var(--color-menu-link-mobile);font-size:1.08rem;font-weight:500;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.menu-item-mobile>a:hover,.submenu-toggle:hover{background-color:var(--bg-color-mobile-hover);color:var(--color-hover)}.menu-label.no-link{padding:.9rem .3rem;width:100%;display:block;cursor:default}.submenu-mobile{padding-left:1.2rem;border-left:2px solid rgba(255,255,255,.18);margin-top:.25rem;display:none}.submenu-mobile.open{display:block}.submenu-mobile a{display:block;padding:.55rem 0;font-size:.95rem;opacity:.9;color:var(--color-menu-link-mobile);text-decoration:none}.submenu-mobile a:hover{opacity:1;color:var(--color-hover)}.burger{padding:.4rem;border-radius:8px}.submenu-mobile{max-height:0;overflow:hidden;padding-left:1.2rem;border-left:2px solid rgba(255,255,255,.18);margin-top:.25rem;list-style:none;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0}.submenu-mobile.open{max-height:500px;opacity:1}.submenu-mobile a{display:block;padding:.55rem 0;font-size:.95rem;opacity:.9;color:var(--color-menu-link-mobile);text-decoration:none;transition:opacity .22s ease,padding-left .22s ease}.submenu-mobile a:hover{opacity:1;padding-left:.2rem}.LanguageSelect{align-content:center;text-align:left;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;color:var(--color-text-light);border-radius:6px;padding:4px 8px;font-size:.75rem;text-transform:capitalize}.Language{background:#0000004d;border:1px solid rgba(255,255,255,.15);color:var(--color-text-light);border-radius:6px;padding:4px 8px;font-size:.75rem;text-transform:capitalize}.Language:focus{outline:none;border-color:var(--color-key)}.LanguageSelect .Label{color:var(--color-text-light);padding-right:10px}.footer{position:sticky;bottom:0;left:0;right:0;width:100%;background:var(--footer-bg);color:var(--footer-text);padding:1rem}.footer-content{max-width:1200px;margin:auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}.footer-left{position:relative}.footer-brand{font-size:1.25rem;font-weight:700;position:relative;display:inline-block;margin-bottom:.4rem}.footer-brand-underline{position:absolute;left:50%;bottom:-5px;height:3px;width:0;border-radius:4px;background:var(--footer-accent);animation:underline-in 1.8s ease forwards,underline-pulse 3.6s ease-in-out 2.3s infinite}@keyframes underline-in{0%{width:0;opacity:0;transform:translate(-50%)}to{width:65%;opacity:1;transform:translate(-50%)}}@keyframes underline-pulse{0%{transform:translate(-50%) scaleX(1)}50%{transform:translate(-50%) scaleX(1.14)}to{transform:translate(-50%) scaleX(1)}}.footer-left p{margin:0;opacity:.6;font-size:.9rem}.footer-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap}.footer-nav>*{display:flex;align-items:center}.footer-nav a{text-decoration:none;color:var(--footer-text);font-size:.95rem;display:flex;align-items:center;transition:color .2s ease}.footer-nav a:hover{color:var(--footer-accent)}.footer-nav .text{font-size:.9rem;opacity:.7;display:flex;align-items:center;margin:0}.footer-right a{color:var(--footer-text);text-decoration:none;font-size:.95rem;transition:color .2s}.footer-right a:hover{color:var(--footer-accent)}.footer-bottom{opacity:.6;font-size:.8rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}.footer-bottom a{color:var(--footer-text);text-decoration:none}.footer-bottom a:hover{color:var(--footer-accent)}.divider{opacity:.3}.text{font-size:.8rem;color:#f6f7f9;pointer-events:none}@media (max-width: 780px){.footer-content{flex-direction:column;align-items:center;text-align:center}}.layout{display:flex;flex-direction:column;height:100vh;min-height:100vh;background-color:var(--bg-dark);box-sizing:border-box;overflow:hidden}.layout-main{flex:1 1 auto;min-height:0;height:100%;box-sizing:border-box;padding-top:var(--header-height, 60px);display:flex;flex-direction:column;overflow:hidden}.SelectInstrument{display:grid;grid-template-columns:100px 1fr;color:#333;font-size:10pt;padding-left:10px}.SelectInstrument h1{padding:0 10px;justify-self:left;align-content:center;font-size:20px}.SelectInstrument .base-select,.SelectInstrument .base-list,.SelectInstrument .base-dropdown,.SelectInstrument .base-submenu{list-style:none;margin:0;padding:0}.SelectInstrument .base-select{position:relative;background-color:var(--color-note-hover);color:var(--color-note-text-hover);padding:14px 32px;box-shadow:0 2px 10px #0006;font-family:Arial,sans-serif;width:fit-content;overflow:visible}.SelectInstrument .base-list{display:flex}.SelectInstrument .base-item{position:relative}.SelectInstrument .base-link{display:flex;align-items:center;gap:6px;cursor:pointer;transition:color .2s ease;-webkit-user-select:none;user-select:none;font-weight:700}.SelectInstrument .base-link:hover{color:var(--color-note-text-hover)}.SelectInstrument .base-dropdown{position:absolute;top:calc(100% + 6px);left:0;background-color:#222;border-radius:6px;box-shadow:0 4px 16px #0009;width:200px;overflow:visible;z-index:9999}.SelectInstrument .base-dropdown-item{padding:10px 16px;cursor:pointer;transition:background .2s ease;position:relative;white-space:nowrap}.SelectInstrument .base-dropdown-item:hover{background-color:#333}.SelectInstrument .base-dropdown-item.active{background-color:var(--color-note-hover);color:var(--color-note-text-hover)}.SelectInstrument .base-submenu{position:absolute;top:0;left:100%;margin-left:8px;background-color:#222;border-radius:6px;box-shadow:0 4px 12px #00000080;width:220px;overflow:visible;z-index:26000}.SelectInstrument .has-submenu:after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%}.SelectInstrument .submenu-link{display:flex;justify-content:flex-start;align-items:center;pointer-events:all}.SelectInstrument .submenu-link.active{background-color:var(--color-note-hover);color:var(--color-note-text-hover)}.SelectInstrument .base-submenu .base-dropdown-item:hover{background-color:#333}.SelectInstrument .base-dropdown-item.highlighted{background-color:#2e4b7a;font-weight:700;border-bottom:1px solid #444}.SelectInstrument .menu-item{padding-left:16px}.home-split{display:flex;flex:1;min-height:calc(100vh - var(--header-height));width:100%;background-color:var(--background-color)}.split-area{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .4s cubic-bezier(.03,.98,.52,.99);opacity:0;animation-duration:.9s;animation-timing-function:ease;animation-fill-mode:forwards}.split-area:before{content:"";position:absolute;inset:0;background:var(--color-overlay);transition:background .25s ease,transform .6s ease;pointer-events:none}.bgscales{background-image:url(../images/scales.gif);animation-name:fadeInLeft}.bgchords{background-image:url(../images/chords.gif);animation-name:fadeInRight}.scales{animation-delay:.1s}.chords{animation-delay:.3s}.split-area:hover{transform:scale(1.03)}.split-area:hover:before{background:#fd446359}.panel-clickable{perspective:1000px}.panel-clickable>*{transform-style:preserve-3d}.split-area:active{transform:scale(1.01)}.content{position:relative;z-index:2;padding:2.2rem 2.8rem;border-radius:18px;background:#ffffff1f;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;align-items:center;gap:1.4rem;transition:transform .4s ease}.content h2{margin:0;font-size:3.3rem;font-weight:700;letter-spacing:1px;color:var(--color-text-light);text-transform:uppercase;animation:glow 3s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 6px rgba(255,255,255,.25)}to{text-shadow:0 0 18px rgba(255,255,255,.85)}}.content p{font-size:1.2rem;opacity:.9;margin:0}.links{display:flex;gap:1rem;justify-content:center}.links a{padding:.7rem 1.3rem;text-decoration:none;font-weight:600;color:var(--color-text-light);border:2px solid var(--color-text-light);border-radius:8px;transition:.25s ease;position:relative;z-index:3}.links a:hover{background:var(--color-key);border-color:var(--color-key)}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-45px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(45px)}to{opacity:1;transform:translate(0)}}@media (max-width: 900px){.home-split{flex-direction:column;min-height:auto}.split-area{height:50vh;background-attachment:scroll}.split-area:hover{transform:none}.content{width:80%}}.Overview{--width-col-0: 60px;--width-col-n:0px;max-height:100vH;overflow:auto}.Overview.Scales{--width-col-n:220px}.Overview.Chords{margin-top:80px;--width-col-n:450px}.Overview .sticky-table{border-collapse:collapse;width:max-content;table-layout:fixed}.Overview .table-header-cell{position:sticky;top:0;padding:8px;width:var(--width-col-n);min-width:var(--width-col-n);z-index:50}.Overview .table-cell{padding:8px;width:var(--width-col-n);min-width:var(--width-col-n);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Overview .col0{width:var(--width-col-0);min-width:var(--width-col-0);color:var(--color-text-light)}.table-header-cell.col0{background-color:var(--bg-dark-90)}.ScaleModeBox,.ChordTypeBox{display:grid;grid-template-rows:24px 1fr 34px;grid-template-columns:1fr;margin:16px auto;align-items:center;justify-items:center;width:90%;padding:10px 12px;border-radius:16px;background:#ffffff1f;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.22);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;color:var(--color-text-light);font-size:.85rem;text-align:center}.ScaleModeBox h4,.ChordTypeBox h4{margin:0;padding:0;color:var(--color-key);font-size:.95rem;font-weight:600;letter-spacing:.03em}.ScaleModeBox .formular-wrapper,.ChordTypeBox .formular-wrapper{width:100%;min-height:38px;display:flex;justify-content:center;align-items:center}.ScaleModeBox .Intervals,.ChordTypeBox .Intervals{display:flex;gap:4px;padding:4px 0;font-size:.65rem}.ScaleModeBox .Interval,.ChordTypeBox .Interval{width:28px;padding:2px 0;border-radius:6px;background:#ffffff2e;color:#fff;font-size:.65rem}.NoteSVG{--ls-acc-base-x: 25px;--ls-acc-sharp-delta-x: 3px;--ls-acc-sharp-delta-y: -1px;--ls-acc-flat-delta-y: 0px;--ls-font-acc: 16px;--font-notename: .7rem;--ls-transition-speed: .25s}@keyframes pulse-playing{0%{filter:drop-shadow(0 0 0 var(--color-note-playing))}50%{filter:drop-shadow(0 0 8px var(--color-note-playing))}to{filter:drop-shadow(0 0 0 var(--color-note-playing))}}.NoteSVG ellipse.playing,.NoteSVG circle.playing{fill:var(--color-note-playing);animation:pulse-playing .35s ease-in-out infinite;transition:fill .1s ease}.NoteSVG text.playing{fill:var(--color-note-playing);animation:pulse-playing .35s ease-in-out infinite;transition:fill .1s ease}.NoteSVG text.textInCircle.playing{fill:#f5f5f5;animation:pulse-playing .35s ease-in-out infinite;transition:fill .1s ease}.NoteSVG text.midi{font-size:.5rem;fill:#f5f5f5;animation:pulse-playing .35s ease-in-out infinite;transition:fill .1s ease}.NoteSVG .acc{letter-spacing:-.5rem;text-anchor:end}.NoteSVG .PentatonicRoot{fill:orange}circle.patternNote{stroke:var(--color-key-70);stroke-width:.1rem}circle.notPatternNoteButinBox{fill:#878787d9}.NoteSVG .OpenNote{font-size:12px;text-anchor:middle;fill:#a2a2a2}.NoteSVG .OpenNote.playing{fill:var(--color-note-playing)}.FormularSVG{display:flex;justify-content:center;align-items:flex-start;gap:2rem;padding:1rem;flex-wrap:wrap;font-size:.7rem}.FormularSVG .Row{display:flex;flex-direction:column;align-items:center;gap:.6rem}.FormularSVG .Row.Left{align-items:flex-end}.FormularSVG .Row.Right{align-items:flex-start}.item{display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s ease,filter .15s ease;opacity:.5}.item.use{opacity:1}.item.hovered{transform:scale(1.1);filter:drop-shadow(0 0 4px rgba(255,255,255,.6));z-index:10}.item.left .note-label{margin-top:.2rem;text-align:right}.item.right .note-label{margin-top:.2rem;text-align:left}.note-svg{width:2rem;height:2rem;transition:all .2s ease}.item.hovered .note-svg{filter:brightness(1.3)}.note-label{font-size:.8rem;color:var(--text-secondary, #ccc);font-weight:500;letter-spacing:.02em}.item.use .note-label{color:var(--text-primary, #fff)}@media (max-width: 768px){.Formular{gap:1.2rem}.note-svg{width:1.6rem;height:1.6rem}.note-label{font-size:.7rem}}.item:hover{transform:scale(1.05);filter:brightness(1.2)}.scalebox-header h4{font-size:1.1rem;margin-bottom:8px;color:#fff;animation:glowText 2.8s ease-in-out infinite alternate}.scalebox:hover h4{color:var(--color-key)}@keyframes glowText{0%{text-shadow:0 0 6px rgba(255,255,255,.35)}to{text-shadow:0 0 14px rgba(224,70,70,.85)}}.scalebox-view{margin-top:14px;padding:8px;border-radius:12px;background:#ffffff1f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 8px #ffffff0d}.scale-line{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scale-line::-webkit-scrollbar{display:none}.scale-note-pair{display:flex;align-items:center;gap:3px}.scale-note-svg{width:24px;height:24px;cursor:pointer;transition:transform .15s ease}.scale-note-pair .Interval{font-size:.7rem;-webkit-user-select:none;user-select:none;min-width:1em;text-align:center;color:#908f8f}.scalebox-view .chord-group{color:#b7b6b6;font-size:.85rem;font-weight:600;margin-top:2px;margin-bottom:4px;letter-spacing:.5px;opacity:.9}.scalebox-view .chords{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-start;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:4px 2px}.scalebox-view .chord{padding:3px 10px;border-radius:20px;background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:var(--color-text-light);font-size:.78rem;white-space:nowrap;transition:background .2s ease,transform .2s ease}.scalebox-view .chord:hover{background:#fd446359;transform:translateY(-2px);border-color:var(--color-key);color:var(--color-key)}.scalebox.error,.scalebox .error{color:silver;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.9rem;padding:20px;height:152px}.scalebox.error h4,.scalebox .error h4{color:#ffb6b6;text-shadow:none}.scalebox.error:hover,.scalebox .error:hover{transform:none;box-shadow:none;background:#ff3c3c38;border-color:#ff3c3c8c}.scalebox{opacity:0;animation:fadeInScaleBox .55s ease forwards}.scalebox:nth-child(1){animation-delay:.05s}.scalebox:nth-child(2){animation-delay:.1s}.scalebox:nth-child(3){animation-delay:.15s}.scalebox:nth-child(4){animation-delay:.2s}.scalebox:nth-child(5){animation-delay:.25s}@keyframes fadeInScaleBox{0%{opacity:0}to{opacity:1}}.scalebox .song{font-size:.8rem;height:20px;padding-top:15px;align-self:center}.ScaleDetails{display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--bg-dark);height:100%;min-height:0;box-sizing:border-box}.ScaleDetailHeader{width:100%;display:grid;grid-template-rows:auto auto auto;background:var(--bg-dark)}.row1,.rowExplanations,.rowNoteList{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--glass-border);padding:20px;transition:opacity .18s ease,transform .18s ease,max-height .18s ease,padding .18s ease}.ScaleDetailHeader .row1{display:grid;grid-template-columns:1fr 300px;align-items:center}.rowExplanations{color:var(--color-text-light);align-content:center;font-size:.8rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.rowExplanations .notes{padding-left:14px;justify-self:left}.rowExplanations .linkSongs{padding-left:14px;justify-self:right}.ScaleDetailHeader h1{color:#f5f5f5}.NoteBoxContainer,.ScaleSelectContainer,.NoteListContainer{background:transparent}.NoteListContainer{padding-top:12px;padding-bottom:12px}.ScaleDetailHeader,.ScaleDetailHeader .row1,.ScaleDetailHeader .rowExplanations,.ScaleDetailHeader .rowNoteList{overflow:visible}.ScaleDetailHeader{position:relative;z-index:10}.ScaleDetailHeader .row1{position:relative;z-index:30}.ScaleDetailHeader .rowExplanations,.ScaleDetailHeader .rowNoteList{position:relative;z-index:5}.ScaleDetails.header-compact .ScaleDetailHeader .rowExplanations,.ScaleDetails.header-compact .ScaleDetailHeader .rowNoteList{opacity:0;transform:translateY(-6px);max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none}.ScaleDetails.header-compact .ScaleDetailHeader .row1{grid-template-columns:1fr;padding:10px}.ScaleDetails.header-compact .ScaleDetailHeader .NoteBoxContainer{display:none}.SelectScale{display:grid;width:300px;justify-content:center;justify-items:center}.SelectScale .toggle-wrapper{margin-top:6px}.BaseSelect{display:grid;grid-template-columns:100px 1fr;font-size:10pt;color:#333;position:relative;z-index:2000}.BaseSelect h1{padding:0 10px;font-size:20px;align-self:center}.BaseSelect .base-wrapper{display:flex;align-items:center;gap:10px;flex-direction:row}.BaseSelect .base-select,.BaseSelect .base-list,.BaseSelect .base-dropdown,.BaseSelect .base-submenu{list-style:none;margin:0;padding:0}.BaseSelect .base-select{position:relative;width:fit-content;padding:14px 32px;background:var(--color-note-hover);color:var(--color-note-text-hover);border-radius:8px;box-shadow:0 2px 10px #0006;cursor:pointer}.BaseSelect .base-link{display:flex;align-items:center;gap:6px;font-weight:700;-webkit-user-select:none;user-select:none}.BaseSelect .base-link:hover{color:var(--color-note-text-hover)}.BaseSelect .base-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:200px;background-color:#222;border-radius:6px;box-shadow:0 4px 12px #00000080;overflow:visible;z-index:3000}.BaseSelect .base-dropdown-item{padding:10px 16px;cursor:pointer;white-space:nowrap;transition:background .2s ease;position:relative}.BaseSelect .base-dropdown-item:hover{background-color:#333}.BaseSelect .base-dropdown-item.active{background-color:var(--color-note-hover);color:var(--color-note-text-hover)}.BaseSelect .base-submenu{position:absolute;top:0;left:100%;margin-left:6px;width:220px;background-color:#222;border-radius:6px;box-shadow:0 4px 12px #00000080;overflow:visible;z-index:3500}.BaseSelect .submenu-link{display:flex;justify-content:space-between;align-items:center}.BaseSelect .submenu-link.active{background-color:var(--color-note-hover);color:var(--color-note-text-hover)}.BaseSelect .has-submenu:after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%}.BaseSelect .key-shift-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;-webkit-user-select:none;user-select:none}.BaseSelect .key-shift-container.left{margin-right:8px}.BaseSelect .key-shift-button{cursor:pointer;opacity:.7;transition:opacity .2s ease,transform .1s ease;color:var(--color-note-text-hover)}.BaseSelect .key-shift-button:hover{opacity:1;transform:scale(1.2);color:var(--color-note-text-hover)}.BaseSelect .key-shift-button svg{width:16px;height:16px}.ToggleOnOff{display:inline-flex;align-items:center;gap:.75rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ToggleOnOff .toggle-text{font-size:.9rem;color:#9ca3af;transition:color .2s ease,transform .2s ease}.ToggleOnOff .toggle-text.active{color:var(--color-key);transform:translateY(-1px)}.ToggleOnOff .toggle-switch{position:relative;display:inline-block;width:56px;height:30px;height:20px}.ToggleOnOff .toggle-switch input{opacity:0;width:0;height:0}.ToggleOnOff .toggle-slider{position:absolute;cursor:pointer;inset:0;background:radial-gradient(circle at 10% 20%,#111827,#020617);border-radius:999px;box-shadow:0 0 0 1px #1f2937,0 10px 25px #00000080;transition:background .3s ease,box-shadow .3s ease}.ToggleOnOff .toggle-slider:before{content:"";position:absolute;height:24px;width:24px;height:12px;left:3px;top:4px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#f9fafb,#e5e7eb);box-shadow:0 6px 12px #00000059,0 0 0 1px #94a3b899;transition:transform .25s ease,box-shadow .25s ease}.ToggleOnOff .toggle-switch input:checked+.toggle-slider{background:radial-gradient(circle at 10% 20%,var(--color-key),var(--color-key));box-shadow:0 0 0 1px var(--color-key),0 0 20px var(--color-key-70),}.ToggleOnOff .toggle-switch input:checked+.toggle-slider:before{transform:translate(26px);box-shadow:0 6px 14px var(--color-key-80),0 0 0 1px var(--color-key-90)}.ToggleOnOff .toggle-switch:hover .toggle-slider:before{transform:translate(0) scale(1.03)}.ToggleOnOff .toggle-switch input:checked:hover+.toggle-slider:before{transform:translate(26px) scale(1.03)}.ToggleOnOff .toggle-switch input:focus-visible+.toggle-slider{outline:2px solid #38bdf8;outline-offset:3px;outline:unset}.ScaleNoteBox{font-size:.7rem}.ScaleDetailData{padding:20px;background:var(--bg-dark);color:var(--color-text-light);display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);min-height:0;height:100%;width:100%;box-sizing:border-box}.tab-header{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px;margin-bottom:18px;flex:0 0 auto;width:100%;box-sizing:border-box}.tab-trigger{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;cursor:pointer;font-size:.95rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;color:var(--color-text-light);transition:all .28s ease}.tab-trigger span{-webkit-user-select:none;user-select:none}.tab-trigger:hover{background:#ffffff2e;color:var(--color-key);border-color:var(--color-key)}.tab-trigger.active{background:var(--glass-hover);border-color:var(--color-key);color:var(--color-key)}.tab-content{padding:18px;border-radius:20px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);animation:fadeIn .45s ease;flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;scrollbar-gutter:stable both-edges}.ScaleDataContainer{width:100%;min-height:0;height:100%;display:flex;flex-direction:column;gap:12px;padding-top:6px;flex:1 1 auto}.ScaleDataContainer .headerContainer{background:transparent;display:grid;grid-template-columns:1fr 60px;align-items:center}.ScaleDataContainer .dataContainer{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding-right:6px;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 500px){.tab-header{grid-template-columns:repeat(2,1fr)}}.PianoboardSVG{--color-bg: rgba(20, 24, 40, .55);--color-key-white: #f2f2f2;--color-key-white-in-scale: #333;--color-key-white-not-use: #ccc;--color-key-white-border: #888;--color-key-black: #353535;--color-key-black-in-scale: #111;--color-key-black-not-use: #757575;--color-key-hover: #fd4463;--color-key-active: #fd4463;background:var(--color-bg);border-radius:16px;overflow:hidden;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 8px 28px #00000073,inset 0 0 12px #ffffff0d;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.white-key-pressed{transform:translateY(1.6px) scale(.9975);filter:brightness(1.005);transition:transform .11s cubic-bezier(.18,.6,.3,1),filter .12s ease-out}.black-key-pressed{transform:translateY(.9px) scale(.9985);filter:brightness(1.01);transition:transform 90ms cubic-bezier(.2,.55,.35,1),filter .1s ease-out}.leadsheet-svg-container{--ls-bg-color-container:transparent}.leadsheet-svg-container{width:100%;overflow:hidden;overflow-y:auto;position:relative;background:var(--ls-bg-color-container);-webkit-user-select:none;user-select:none}.leadsheet-svg-wrapper{display:flex;flex-direction:row;width:100%;height:100%}.leadsheet-svg-sticky{position:sticky;left:0;z-index:2;flex-shrink:0;background:var(--ls-bg-color-container)}.leadsheet-svg-sticky.border{border-right:1px solid rgba(0,0,0,.05)}.leadsheet-svg-scroll{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;background:var(--ls-bg-color-container)}.leadsheet-svg{display:block;height:100%;background:var(--ls-bg-color-container);font-family:Bravura,Noto Music,Arial,sans-serif}.leadsheet-svg{--ls-bg-color: #fff;--ls-staff-line: #9e9e9e;--ls-ledger-color: #333;--ls-brace-color: #444;--ls-clef-treble-x: 6px;--ls-clef-treble-y: -7px;--ls-clef-bass-x: 8px;--ls-clef-bass-y: 8px;--ls-font-clef-treble: 120px;--ls-font-clef-bass: 54px;--ls-staff-line-width: 1;--ls-ledger-width: 1;--ls-transition-speed: .25s}.leadsheet-svg-scroll.full{width:100%;overflow-x:hidden}.leadsheet-svg.full{width:100%}.ls-staff-lines line{stroke:var(--ls-staff-line);stroke-width:var(--ls-staff-line-width)}.ls-ledger{stroke:var(--ls-ledger-color);stroke-width:var(--ls-ledger-width)}.ls-brace path,.ls-brace line{stroke:var(--ls-brace-color);stroke-width:1.2;fill:none}.ls-clef{fill:var(--ls-note-fill);dominant-baseline:middle}.treble-clef{font-size:var(--ls-font-clef-treble);transform:translate(var(--ls-clef-treble-x),var(--ls-clef-treble-y))}.bass-clef{font-size:var(--ls-font-clef-bass);transform:translate(var(--ls-clef-bass-x),var(--ls-clef-bass-y))}@media (prefers-color-scheme: dark){.leadsheet-svg{--ls-bg-color: #111;--ls-staff-line: #888;--ls-note-fill: #eee;--ls-note-highlight: #aaa;--ls-note-hover: #fd4463;--ls-note-active: #fd4463;--ls-notename-color: #ccc;--ls-ledger-color: #aaa;--ls-brace-color: #888}}.View{display:flex;flex-direction:column;gap:14px;padding:12px;width:100%;color:var(--color-text-light)}.View .GroupHeader{padding:2px 8px;text-align:center}.View .GroupHeader h3{font-size:1rem;font-weight:600;color:var(--color-key);letter-spacing:.04em;opacity:.9}.View .ViewData{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;padding:8px}.View .GridItemWrapper{padding:0}.View .Link{font-size:.95rem;font-weight:600;color:var(--color-text-light)}.ViewItem{padding:0}.ViewItem .ItemHeader{display:grid;grid-template-columns:1fr 60px;align-items:center}.ItemHeader h3{font-weight:600;font-size:1.05rem;letter-spacing:.5px;color:var(--color-key);text-transform:uppercase}.GuitarPatternView{display:grid;justify-items:center}.GuitarPatternView .toggle-wrapper{margin-bottom:6px}.chord{background-color:transparent}.chord .name{color:var(--color-text-light)}.chord .notes{background-color:transparent}.fretboard-svg-container{--bg-color: rgba(20, 24, 40, .55);--background-fretboard: linear-gradient(145deg, #2b2f3a, #1c2028);--color-main: var(--color-text-light);--color-fret0-bg: rgba(255,255,255,.12);--string-amp: 5px;background:var(--bg-color);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 6px 28px #0006;position:relative;width:100%;overflow:hidden}.fretboard-svg-wrapper{display:flex;flex-direction:row;width:100%}.fretboard-svg-sticky{position:sticky;left:0;z-index:2;flex-shrink:0}.fretboard-svg-scroll{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden}.scroll-inner{position:relative;overflow-x:auto;overflow-y:hidden;width:100%;white-space:nowrap}.fretboard-svg{display:block;-webkit-user-select:none;user-select:none}.inner-fretboard-svg{position:relative;background:var(--background-fretboard);box-shadow:inset 0 0 12px #00000073}.fretboard-svg-bg-rect{fill:var(--background-fretboard)}.fretboard-svg-fret0-bg-rect{fill:var(--color-fret0-bg)}.fretboard-svg-line{stroke:#d6d6d6;stroke-width:.03rem}.string-line-svg{stroke-linecap:round}.string-wrapper-svg{transform-box:fill-box;transform-origin:center}.string-wrapper-svg.vibrating{animation:stringline-vibrate-real .4s cubic-bezier(.15,.35,.25,1)}.string-path-svg{stroke:#cfcfcf;stroke-linecap:round;fill:none}.string-line-svg{stroke-linecap:round;fill:none;shape-rendering:geometricPrecision}.string-line-svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.3))}@keyframes stringline-vibrate-real{0%{transform:translateY(0) translate(0) scaleX(1);filter:blur(0)}8%{transform:translateY(calc(var(--string-amp) * -1)) translate(calc(var(--string-amp) * .25)) scaleX(1.05);filter:blur(.6px)}18%{transform:translateY(calc(var(--string-amp) * .8)) translate(calc(var(--string-amp) * -.18)) scaleX(.98);filter:blur(.5px)}30%{transform:translateY(calc(var(--string-amp) * -.6)) translate(calc(var(--string-amp) * .12)) scaleX(1.03);filter:blur(.4px)}45%{transform:translateY(calc(var(--string-amp) * .4)) translate(calc(var(--string-amp) * -.06)) scaleX(.99);filter:blur(.25px)}65%{transform:translateY(calc(var(--string-amp) * -.2)) translate(calc(var(--string-amp) * .03)) scaleX(1.01);filter:blur(.15px)}85%{transform:translateY(calc(var(--string-amp) * .1)) translate(calc(var(--string-amp) * -.015)) scaleX(1);filter:blur(.08px)}to{transform:translateY(0) translate(0) scaleX(1);filter:blur(0)}}.guitar-dot-svg{fill:#ffffff26;stroke:#ffffff59;stroke-width:1px}.note-wrapper-svg{cursor:pointer;transition:transform .2s ease,filter .2s ease}.note-wrappe-svgr:hover{transform:scale(1.18)}.fret-numbers-svg{position:relative;height:22px}.fret-number-label-svg{position:absolute;top:4px;transform:translate(-50%);font-size:.7rem;color:#ffffffbf}.note-bg{fill:none}.pattern-header-scroll{position:relative}.pattern-footer-scroll{position:relative;height:42px}.pattern-header-sticky{position:relative;height:84px}.pattern-header-scroll{position:relative;display:flex}.pattern-footer-sticky{position:relative;height:42px}.pattern-footer-scroll{top:-20px;position:relative;height:42px}.fretboard-svg{z-index:1}#string-lines,#fretboard-lines,#notes,#dots{z-index:5}#pattern-body-layer{z-index:10}.guitarBodyPattern{fill:#ffffff14;stroke:#ffffff40;stroke-width:1px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);filter:drop-shadow(0 4px 22px rgba(0,0,0,.35));rx:8px;ry:8px}.guitarBodyPattern.active{fill:#ffffff40;stroke:#fd4463e6;stroke-width:2px;rx:6px;ry:6px;filter:drop-shadow(0 0 6px rgba(253,68,99,.45));opacity:1}.guitarBodyPattern.inactive{opacity:0}.pattern-header-sticky .placeholder{visibility:hidden;height:84px}.pattern-header-svg-box{--bg-color-active: rgba(255, 255, 255, .16);--bg-color-inactive: rgba(255, 255, 255, .05);--border-color-active:rgba(255, 255, 255, .25);--border-color-inactive:rgba(255, 255, 255, .15);--color-tex-active: var(--color-text-light);--color-text-inactive: #a4a4a4;position:absolute}.header-bg{fill:#ffffff14;stroke-width:1px;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}.header-bg.active{fill:var(--bg-color-active);stroke:var(--border-color-active)}.header-bg.inactive{opacity:.45;filter:grayscale(40%) blur(.2px);fill:var(--bg-color-inactive);stroke:var(--border-color-inactive)}.header-bg.stickyfret0{stroke-width:1px;stroke:var(--border-color-active)}.pattern-header-svg-box.inactive .patternName{font-size:.75rem;fill:var(--color-text-inactive)}.pattern-header-svg-box.active .patternName{font-size:.75rem;fill:var(--color-tex-active)}.pattern-header-svg-box.inactive .play-button-group,.pattern-header-svg-box.inactive .pattern-direction-badge{display:none}.pattern-direction-bg{fill:#00000040;stroke:#fff3;stroke-width:1px}.pattern-direction-text{font-size:.62rem;fill:var(--color-text-light);letter-spacing:.02em}.guitarFooterPattern{position:absolute;height:42px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 8px;background:#ffffff14;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 22px #00000059;border-radius:8px;z-index:20}.nav-pattern-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:4px 12px;cursor:pointer;font-size:.6rem;line-height:1;margin:0 5px;color:var(--color-text-light);transition:transform .2s ease,background .2s ease,border-color .2s ease}.nav-pattern-btn:hover{background:#fd446359;border-color:var(--color-key);color:var(--color-key);transform:translateY(-2px)}.nav-pattern-btn:disabled{opacity:.4;cursor:not-allowed}.ChordProgressionsView{display:flex;flex-direction:column;gap:24px;height:auto;min-height:0;width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}.diatonicChords{display:grid;grid-template-columns:1fr 200px;grid-template-rows:1fr;gap:24px;align-items:flex-start;background:var(--bg-soft)}.toggle-wrapper{margin-top:4px}.RowChords{display:flex;justify-content:center}.ProgressionSelectorWrap{min-height:0;height:204px;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;display:block;align-self:stretch;text-align:center}.TimelineGridWrap{min-height:0;display:flex;height:auto;flex:0 0 auto;overflow:visible;width:100%;align-self:stretch}.TimelineGridWrap .TimelineGrid{flex:1 1 auto;min-height:0;max-width:100%}.DiatonicChordList{display:flex;flex-direction:row;gap:6px;gap:6px 16px;margin-top:16px;align-items:center;justify-content:center}.DiatonicChordRow{display:grid;grid-template-rows:40px auto 1fr;grid-template-columns:1fr;align-items:center;gap:10px;padding:4px 6px;border-radius:6px;opacity:.45;transition:opacity .15s ease,background .15s ease}.DiatonicChordRow.active{opacity:1;background:var(--color-bg-soft)}.DiatonicChordRow .step{width:100%;align-content:center;font-weight:600;font-size:.75rem;opacity:.8;text-align:center;justify-self:center;align-self:center}.DiatonicChordRow .diatonicName{font-size:.7rem;opacity:.65}.ToggleSwitch{display:inline-flex;align-items:center;gap:.75rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ToggleSwitch.vertical{flex-direction:column;align-items:center;align-self:center}.toggle-text{font-size:.9rem;color:#9ca3af;transition:color .2s ease,transform .2s ease}.toggle-text.active{color:var(--color-key);transform:translateY(-1px)}.toggle-switch{position:relative;display:inline-block}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;cursor:pointer;border-radius:999px;box-shadow:0 0 0 1px #1f2937,0 10px 25px #00000080;transition:background .3s ease,box-shadow .3s ease}.toggle-slider:before{content:"";position:absolute;border-radius:999px;background:radial-gradient(circle at 30% 30%,#f9fafb,#e5e7eb);box-shadow:0 6px 12px #00000059,0 0 0 1px #94a3b899;--tx: 0px;--ty: 0px;--s: 1;transform:translate(var(--tx),var(--ty)) scale(var(--s));transition:transform .25s ease,box-shadow .25s ease}.toggle-switch.horizontal{width:56px;height:20px}.toggle-switch.horizontal .toggle-slider{background:radial-gradient(circle at 10% 20%,#111827,#020617)}.toggle-switch.horizontal .toggle-slider:before{width:12px;height:12px;left:3px;top:4px;--tx: 0px;--ty: 0px}.toggle-switch.horizontal input:checked+.toggle-slider:before{--tx: 26px}.toggle-switch.vertical{width:20px;height:56px}.toggle-switch.vertical .toggle-slider{background:radial-gradient(circle at 20% 10%,#111827,#020617)}.toggle-switch.vertical .toggle-slider:before{width:12px;height:12px;left:4px;top:3px;--tx: 0px;--ty: 38px}.toggle-switch.vertical input:checked+.toggle-slider:before{--ty: 0px}.toggle-switch:hover .toggle-slider:before{--s: 1.05}.toggle-switch input:focus-visible+.toggle-slider{outline-offset:unset}.ProgressionSelector{overflow:visible;display:inline-flex;flex-wrap:nowrap;gap:12px;justify-content:flex-start;box-sizing:border-box}.ProgressionCard{overflow:visible;text-align:left;border-radius:10px;width:200px;flex:0 0 200px;box-sizing:border-box;background:var(--bg-soft);border:1px solid var(--background-color);cursor:pointer;transition:all .15s ease;color:var(--color-text-light);display:flex;flex-direction:column;gap:6px;padding:8px 10px}.ProgressionCard:hover{background:var(--color-bg-hover)}.ProgressionCard.active{border-color:var(--color-key);background:var(--color-key-25)}.ProgressionCard.active .tag{box-shadow:0 0 0 1px #ffffff26}.progressionRow{display:flex;justify-content:center}.progressionTable{display:grid;gap:6px 10px;align-items:center;text-align:center}.progressionCellItem{display:flex;justify-content:center;align-items:center}.progressionStep{font-weight:600;font-size:.9rem}.progressionChordCell .chordLabel{align-content:center;font-size:.75rem;line-height:1.1;padding:2px 6px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-bg-soft);color:var(--color-text-light)}.progressionChordFallback{font-size:.8rem;opacity:.6}.progressionText{font-size:.75rem;opacity:.75;text-align:center}.tags{margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.tag{position:relative;font-size:.65rem;padding:2px 7px;border-radius:999px;line-height:1.4;background:var(--color-bg-hover);color:var(--color-text-light);white-space:nowrap;cursor:help}.tag:hover{filter:brightness(1.1)}.tag.emotion{background:#ff78782e;color:#ff7878f2}.tag.function{background:#78a0ff2e;color:#78a0fff2}.tag.structure{background:#78dcaa38;color:#5abe8c}.tag.style{background:#b4b4b42e;color:#b4b4b4f2}.TooltipAnchor{display:inline-flex;align-items:center}.TooltipPortal{position:fixed;transform:translate(-50%);z-index:9999;min-width:220px;max-width:320px;background:linear-gradient(180deg,#181c2cfa,#0e1220fa);color:#e5e7eb;padding:12px 14px;border-radius:14px;font-size:.72rem;line-height:1.5;box-shadow:0 12px 32px #0000008c,inset 0 0 0 1px #ffffff0f}.TooltipPortal:before{content:"";position:absolute;left:50%;transform:translate(-50%);border-width:8px;border-style:solid}.TooltipPortal--bottom:before{bottom:100%;border-color:transparent transparent rgba(24,28,44,.98) transparent}.TooltipPortal--top:before{top:100%;border-color:rgba(24,28,44,.98) transparent transparent transparent}.TooltipTitle{font-weight:600;font-size:.75rem;color:#f9fafb;margin-bottom:4px}.TooltipText{font-size:.7rem;color:#cbd5f5}.TopBarContainer{flex:0 0 auto;background:#2d313c;position:relative;z-Index:200;padding-bottom:15px}.PlayheadLine{position:absolute;top:0;left:-1px;bottom:0;width:2px;background:var(--color-key);box-shadow:0 0 0 1px #00000040;pointer-events:none;z-Index:5}.gridHeaderContainer{display:grid;background:#121214;position:relative}.gridHeaderTrackLabel{position:sticky;left:0;z-Index:20;border-right:1px solid rgba(255,255,255,.06);background:#121214;box-sizing:border-box;display:flex;align-items:center;padding:8px;font-size:12px;opacity:.85;font-weight:700}.gridHeaderTimelineViewport{overflow:hidden;position:relative}.gridHeaderTimelineInner{position:relative}.barHeader{position:absolute;top:0;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;opacity:.9;box-sizing:border-box}.beatHeader{position:absolute;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;opacity:.75;box-sizing:border-box}.subBeatLine{position:absolute;width:1px}.playheadMarkerLine{position:absolute;left:-1px;width:2px;background:#ff5050e6;pointer-events:none;z-Index:80;transform:translateZ(0)}.playheadMarkerTriangle{position:absolute;left:-5px;width:0px;height:0px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid rgba(255,80,80,.95);pointer-events:none;z-Index:81;transform:translateZ(0)}.LoopRangeContainer{position:absolute;left:0;z-Index:55;cursor:default;pointer-events:none}.LoopRangeContainer.interactive{cursor:crosshair;pointer-events:auto}.RangeOverlay{position:absolute;top:0;border-radius:6px;box-sizing:border-box;background:#ffffff1a;border:1px solid rgba(255,255,255,.22);opacity:1}.RangeOverlay.active{cursor:grab;background:var(--color-key-25);border:1px solid rgba(255,255,255,.12);opacity:.65;cursor:default}.RangeOverlay.interactive{cursor:grab}.RangeOver{position:absolute;top:-1px;width:12px;background:#ffffff40;border-radius:6px;opacity:1;cursor:default}.RangeOver.active{opacity:.7}.RangeOver.interactive{cursor:ew-resize}.RangeOver.left{left:-6px}.RangeOver.right{right:-6px}.grid-track-row{display:grid;grid-template-columns:var(--left-col-width) 1fr;border-bottom:1px solid rgba(255,255,255,.06);background:var(--bg-track-row-bg-color);transition:opacity .2s ease}.grid-track-row.effectively-muted .track-timeline-container{opacity:.3;filter:grayscale(.8);pointer-events:none}.grid-track-row.effectively-muted .track-strip-container{opacity:.7}.grid-track-row.effectively-muted .mute-button.active{color:#f44;opacity:1!important}.grid-track-row .track-strip-container{border-left:3px solid transparent}.grid-track-row.is-soloed .track-strip-container{border-left:3px solid var(--color-track-solo)}.track-strip-container{position:sticky;left:0;z-Index:6;padding-left:8px;border-right:1px solid rgba(255,255,255,.06);box-sizing:border-box;background:#121212}.track-strip-container.selected{background:#161616}.track-timeline-container{position:relative;width:var(--timeline-width);height:var(--row-height)}.TrackStripContainer{height:100%;display:grid;grid-template-columns:1fr 12px}.TrackStripContainer.selected{border-color:var(--color-key-50)}.MainStripContainer{display:flex;flex-direction:column;gap:10px;min-width:0;margin-top:6px;margin-bottom:6px;padding:10px 12px;border-radius:10px;background:#0000002e;background:#242831;border:1px solid rgba(255,255,255,.06);transition:opacity .2s ease,background .2s ease;box-sizing:border-box;justify-content:flex-start}.MainStripContainer.selected{border-color:var(--color-key-50)}.InstrumentStrip{flex:1 auto;min-height:0;padding:10;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff05;display:flex;flex-direction:column;gap:10}.LegendStripContainer{width:12px;display:flex;align-items:stretch;justify-content:center}.TrackStripHeader{display:flex;justify-content:space-between;gap:0px;font-size:12px;font-weight:800;line-height:1.1}.MixerContainer{display:flex;align-items:center;gap:8px}.MuteContainer{padding-top:2px}.MuteButton{width:32px;height:24px}.SoloContainer{padding-top:2px}.SoloButton{width:32px;height:24px}.SoloButton.set{color:#333;background:linear-gradient(to bottom,#e0d61be6,#a8bc45e6)}.SoloButton:hover{border-color:#e0d61b40}.VolumeContainer{margin-top:-4px}.MasterVolumeContainer{display:flex;align-items:center;gap:6;flex-direction:column}.VolumeSlider{width:100%;height:6px;appearance:none;border-radius:999px;background:linear-gradient(to right,var(--color-key-25),var(--color-key)) no-repeat,#ffffff26;background-size:80% 100%;cursor:pointer}.VolumeSlider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#e5e7eb;border:1px solid rgba(0,0,0,.4);box-shadow:0 2px 4px #0006}.VolumeSlider.muted{opacity:.5}.InnerInstrumentContainer{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;justify-content:space-around}.RowStrip{display:grid;grid-template-columns:auto auto;gap:8px;align-items:center}.RowStrip.centered{align-items:center;justify-content:center}.HandButton{width:32px;height:24px}.ModeGuitar{width:50px;height:24px;font-size:.6rem;font-weight:none}.dawSelect{font-size:11px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#e8e8ea;width:100%}.dawSelect:focus{outline:none;border-color:var(--color-key)}.stripLabel{font-size:11px;opacity:.7;width:64px}.levelLabel{font-size:11px;opacity:.7}.ComplexityKnobWrap{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}.ComplexityKnob{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:radial-gradient(circle at 30% 30%,#ffffff2e,#00000040);position:relative;cursor:pointer;box-shadow:inset 0 2px 6px #00000073,0 2px 8px #00000059}.ComplexityKnob:hover{border-color:var(--color-key)}.ComplexityKnobValue{position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);min-width:14px;padding:1px 3px;border-radius:4px;background:#ff5a5a2e;color:var(--color-text-light);font-size:.6rem;font-weight:600;line-height:1;text-align:center;border:1px solid rgba(255,90,90,.28);pointer-events:none}.ComplexityKnobIndicator{position:absolute;top:8px;left:50%;width:4px;height:14px;border-radius:999px;background:var(--color-key);transform-origin:50% 15px}.knob-label-container{position:absolute;top:36px;left:50%;transform:translate(-50%);margin-top:0;width:46px;height:0;pointer-events:none}.knob-label{font-size:.55rem;opacity:.7;position:absolute;top:0;transform:translateY(-50%);white-space:nowrap}.knob-label:first-child{right:100%;margin-right:4px;text-align:right}.knob-label:last-child{left:100%;margin-left:4px;text-align:left}.TimelineGridContainer{position:relative;background:transparent}.TimelineContainer{padding-top:24px;padding-bottom:24px}.LaneWrapper{border:1px solid rgba(255,255,255,.06);gap:2px;display:grid}.LaneWrapper.isLegend{border-color:transparent}.lane{position:relative;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff05;display:flex;justify-items:center;align-items:center;-webkit-user-select:none;user-select:none}.LaneWrapper.isLegend .lane{border-color:transparent;background:#ffffff0d}.LaneWrapper.isLegend .lane.drums{border-color:transparent}.legend{display:flex;opacity:.7;font-size:10px}.legend.drums{fill:var(--color-text-light);stroke:var(--color-text-light)}.TimelineContainer.guitar .strings-lane,.TimelineContainer.bass .strings-lane{border:none;background:transparent}.string-line{width:100%;height:1px;background:#ffffff1f;pointer-events:none}.TimelineContainer.guitar .string-line{height:1px;background:#ffffff26;box-shadow:0 1px 2px #00000080}.TimelineContainer.bass .string-line{height:2px;background:#ffffff2e}.TimelineContainer.guitar .strings-lane:nth-child(1) .string-line{height:1px;opacity:.6}.TimelineContainer.guitar .strings-lane:nth-child(6) .string-line{height:3px;opacity:.9}.TimelineContainer.drums .legend{width:100%;height:100%}.TimelineContainer.bass .legend,.TimelineContainer.guitar .legend{font-family:monospace;font-weight:700;color:#888;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#ffffff0d}.legend.drums svg{width:auto;height:100%;max-width:100%;max-height:100%;display:block}.MiniPianoRoll{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}.pianoKey.white{background:#ffffff0a}.pianoKey.black{background:#00000040}.RegionLayer__region{position:absolute;border-radius:10px;box-sizing:border-box;cursor:pointer;pointer-events:auto;background:#ffffff0d;border:1px solid rgba(255,255,255,.14)}.RegionLayer__region.active{border:1px solid var(--color-key-50);background:var(--color-key-10)}.RegionContentPianoContainer{position:relative;box-sizing:border-box;top:1px}.PianoNoteOverlay{position:absolute;inset:0;pointer-events:none}.pianoNote{position:absolute;height:calc((100% / 12) - 4px);border-radius:3px;outline:1px solid rgba(0,0,0,.2);box-sizing:border-box;background:rgba(255,255,255,calc(.15 + var(--vel) * .75))}.RegionContentGuitarContainer{position:relative;height:100%;display:grid;grid-template-rows:repeat(6,1fr);gap:2px;padding-top:12px;padding-bottom:24px}.GuitarNoteOverlay{position:absolute;inset:12px 0 24px;pointer-events:none;overflow:visible}.guitarStrumDirectionArrow{position:absolute;bottom:-18px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;transform:translate(0);z-index:5;background:#ffffff0d;border-radius:2px}.guitarStrumDirectionArrow.down{color:rgb(var(--color-guitar-downstroke-rgb))}.guitarStrumDirectionArrow.up{color:rgb(var(--color-guitar-upstroke-rgb))}.region-note.guitar{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--color-note-text);z-index:10;box-shadow:0 1px calc(var(--vel) * 4px) #00000080;border:1px solid rgba(255,255,255,calc(.2 + var(--vel) * .5));transition:transform .1s ease,background-color .2s ease}.RegionContentBassContainer{position:relative;width:100%;height:100%;pointer-events:none}.BassNoteOverlay{position:absolute;inset:0}.region-note.bass{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;z-index:10;border:1px solid rgba(255,255,255,.4);color:var(--color-note-text);opacity:calc(.4 + (var(--vel) * .6));box-shadow:0 1px 3px #0000004d;transition:transform .1s ease,background-color .2s ease}.region-note.bass{background-color:rgba(255,255,255,calc(.15 + var(--vel) * .75))}.RegionContentDrums{pointer-events:none}.region-note.drum{width:14px;height:14px;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 4px #00000080;border-radius:2px}.drum.openhat{border-style:dashed}.DawTopBar{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:var(--color-bg);gap:12px;border-radius:12px}.Title{justify-self:left;font-size:14;font-weight:700;white-space:nowrap;overflow:hidden;text-Overflow:ellipsis;color:var(--color-text-light)}.Center{display:flex;align-items:center;gap:16px}.PlayLoopControls{display:flex;align-items:center;gap:2px}.Right{display:flex;align-items:center;justify-content:flex-end;gap:8px}.PlayButton{width:32;height:32;border-radius:8;border:1px solid rgba(255,255,255,.2);background:#1b1b1e;color:#fff;cursor:pointer;font-size:14}.PlayButton.playing{background:var(--color-key)}.PlayButton:hover{transform:translateY(1px);border-color:var(--color-key)}.BpmContainer{display:flex;align-items:center;gap:6;flex-direction:column}.inputNumber{width:64px;background:var(--color-bg-soft);border:1px solid rgba(255,255,255,.15);color:var(--color-text-light);border-radius:6px;padding:4px 6px;font-size:12;text-align:center}.inputNumber:focus{outline:none;border-color:var(--color-key)}.SelectTimeSignatureContainer{display:flex;align-items:center;gap:6;flex-direction:column}.label{font-size:.6rem;opacity:.7}.selectTimeSignature{width:72px;padding:4px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:var(--color-bg-soft);color:var(--color-text-light);font-size:.7rem;text-align:center}.selectTimeSignature:focus{outline:none;border-color:var(--color-key)}.TwoLineSelect{width:100%}.labelTwoLine{font-size:11px;opacity:.7;padding-bottom:6px}.menuTwoLine{margin-top:8;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#121214fa;box-shadow:0 18px 40px #0000008c;overflow:hidden}.menuScrollTwoLines{max-height:inherit;overflow-y:auto;padding:8px}.triggerTwoLine{width:100%;text-align:left;border-radius:12px;background:var(--color-bg-soft);padding:10px 12px;color:#e8e8ea;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.triggerTextWrap{display:flex;flex-direction:column;gap:3;min-width:0}.triggerValueTwoLine{font-Size:13px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.triggerDescTwoLine{font-size:11px;opacity:.75;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caretTwoLine{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(255,255,255,.65);border-bottom:0px;opacity:.85}.caretTwoLine.open{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:0px;border-bottom:6px solid rgba(255,255,255,.65);opacity:.85,}.optionTwoLine{width:100%;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;color:#e8e8ea;text-align:left}.optLabelTwoLine{font-size:13px;font-weight:700;line-height:1.1}.optDescTwoLine{font-size:11px;opacity:.75;line-height:1.2}.RhythmVizRoot{width:100%;display:grid;grid-template-rows:20px 22px 18px;gap:6px}.RhythmVizLine{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}.RhythmVizCell{position:relative;height:100%;display:flex;align-items:center;justify-content:center}.RhythmVizCount .RhythmVizLabel{font-size:11px;opacity:.85;-webkit-user-select:none;user-select:none}.RhythmVizVel{background:#ffffff0a;border-radius:8px;padding:2px 0}.RhythmVizCellVel{pointer-events:none}.RhythmVizWrapMarker{width:10px;height:10px;border-radius:2px;border:1px solid rgba(255,255,255,.25);opacity:.6}.RhythmVizDur{background:#ffffff0a;border-radius:8px}.RhythmVizDirHost,.RhythmVizDurHost{position:relative;width:100%;height:100%}.RhythmVizArrow{position:absolute;top:50%;transform:translateY(-50%);height:2px;border-radius:999px;background:#ffffff8c;pointer-events:none}.RhythmVizDir{background:#ffffff0a;border-radius:8px}.RhythmVizDirBtn{position:absolute;top:0%;transform:translate(-50%,-50%);background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1;padding:1px 8px;transition:opacity .2s,transform .1s;display:flex;align-items:center;justify-content:center}.RhythmVizDirBtn:hover{opacity:1;background:#ffffff1a;border-radius:4px}.RhythmVizDirBtn:active{transform:translate(-50%,-50%) scale(.9)}.RhythmVizDirBtn.down{color:rgb(var(--color-guitar-downstroke-rgb));font-weight:700}.RhythmVizDirBtn.up{color:rgb(var(--color-guitar-upstroke-rgb))}.VelocityDragControl{position:absolute;width:14px;height:14px;border-radius:2px;transform:translate(-50%,-50%);cursor:ns-resize;padding:0;appearance:none;pointer-events:auto;border:1px solid rgba(255,255,255,.18);background:#00000059}.VelocityDragControl.empty{opacity:.55}.VelocityDragControl.hasNote{opacity:1}.VelocityDragControl:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% * var(--vel, 0));border-radius:2px;background:var(--color-note, rgba(255,255,255,.8));opacity:.95;pointer-events:none}.VelocityDragControl.active{border-color:#ffffff52}.VelocityDragControl.dragging{border-color:var(--color-key)}.DurationDragHost{position:absolute;margin-top:-6px;left:0;right:0;height:14px;pointer-events:none}.DurationDot{margin-top:4px;position:absolute;border-radius:5px;width:5px;height:5px;background:#ffffff8c}.DurationDot.dragging{background:var(--color-key)}.DurationArrow{position:absolute;top:50%;transform:translateY(-50%);background:#fff6;border-radius:999px;pointer-events:none}.DurationArrow.dragging{background:var(--color-key)}.DurationHandle{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:3px;background:#0000008c;cursor:ew-resize;padding:0;pointer-events:auto;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(255,255,255,.4)}.DurationHandle.dragging,.DurationHandle:hover{border-left-color:var(--color-key)}.labelChordSelect{font-size:11px;opacity:.7;padding-bottom:6px}.chordWrap{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px}.TypeButton{font-size:11px}.SelectChord{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:var(--color-bg-soft);color:var(--color-text-light);width:fit-content;align-self:center;font-size:11px}.SelectChord.selected{border-color:var(--color-key-50)}.InputOctaveContainer{position:relative}.labelInputOctave{font-size:11px;opacity:.7;padding-bottom:6px;padding-top:6px}.InputOctaveControl{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:var(--color-bg-soft);color:var(--color-text-light);width:fit-content;align-self:center}.InputOctaveButton{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:var(--color-text);font-size:1rem;line-height:1;cursor:pointer}.InputOctaveButton:hover{border-color:var(--color-key-25)}.ImputOctaveValue{min-width:18px;text-align:center;font-weight:600;font-size:.75rem}.InspectorContainer{display:flex;flex-direction:column;gap:12px}.InspectorRow{position:relative}.InspectorSection{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;padding-bottom:10px}.arpWrap{padding-top:10px;display:grid;padding-bottom:10px;grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:4px}.ArpButton{width:100%;padding-top:10px;padding-bottom:10px}.carousel-header{display:grid;grid-template-columns:1fr 60px;align-items:center}.carousel-header h4{font-size:1.15rem;color:#fff;letter-spacing:.5px;animation:glowText 2.8s ease-in-out infinite alternate}.chord-carousel:hover h4{color:var(--color-key)}.carousel-view{position:relative;overflow:hidden;width:100%;border-radius:12px}.carousel-view.guitar,.carousel-view.bass{height:260px}.carousel-view.piano{height:140px}.carousel-view.notes{height:180px}.carousel-view.loading{pointer-events:none;opacity:.65}.carousel-slide{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px}.nav-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:4px 12px;cursor:pointer;font-size:1rem;line-height:1;color:var(--color-text-light);transition:transform .2s ease,background .2s ease,border-color .2s ease}.nav-btn:hover{background:#fd446359;border-color:var(--color-key);color:var(--color-key);transform:translateY(-2px)}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.dots{display:flex;gap:7px;align-items:center;justify-content:center}.dot{width:8px!important;height:8px!important;padding:0!important;border-radius:50%;background:#ffffff59;border:none;cursor:pointer;flex-shrink:0;transition:background .25s ease,transform .2s ease}.dot:hover{background:#fd4463cc;transform:scale(1.3)}.dot.active{background:var(--color-key);box-shadow:0 0 6px var(--color-key)}@media (max-width: 480px){.chord-carousel{padding:12px}.carousel-view.guitar,.carousel-view.bass{height:290px}.carousel-view.piano{height:160px}.carousel-view.notes{height:150px}.nav-btn{padding:3px 8px;font-size:.9rem}.dot{width:7px;height:7px}}.GuitarChordView{--bg-color-favorite: #fff;--bg-color-no-favorite:#e4dede;--color-guitar-info-favorite:#8a8a8a;--color-guitar-info-no-favorite:#8a8a8a;padding:.75rem;text-align:center;width:100%;max-width:180px;display:grid}.GuitarChordView .guitarchord-header{display:grid;grid-template-columns:1fr 60px;align-items:center}.GuitarChordView h3{font-weight:600;font-size:1.05rem;letter-spacing:.5px;color:var(--color-key);text-transform:uppercase}.guitar-debug-info{display:grid;grid-template-rows:1fr;grid-template-columns:30px 1fr 70px;background-color:#a9a9a9;gap:1px}.guitar-info{background-color:#f5f5f5;font-size:8pt;color:gray;align-content:center;float:right}.no-favorite .guitar-info{background-color:var(--bg-color-no-favorite);color:var(--color-guitar-info-favorite)}.no-favorite .guitar-info{color:#d3d3d3;color:var(--color-guitar-info-no-favorite)}@media (max-width: 600px){.guitar-chord-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.guitar-chord-card{padding:.6rem}}.gcd-diagram{fill:none;font-family:-apple-system,BlinkMacSystemFont,Inter,Roboto,Segoe UI,Helvetica Neue,Arial,sans-serif;-webkit-user-select:none;user-select:none}.gcd-string-line{stroke:#555;stroke-width:1}.gcd-fret-line{stroke:#666;stroke-width:1}.gcd-fret-line.gcd-nut{stroke-width:3}.gcd-barre-shape{fill:#f6c94d;stroke:#b48e0e;stroke-width:1.5}.gcd-note-marker circle{fill:#222}.gcd-note-marker text{fill:#fff;font-size:8px;letter-spacing:.2px;text-anchor:middle;pointer-events:none}.gcd-xo-mark{font-size:12px;text-anchor:middle;fill:#a2a2a2}.gcd-xo-mark.gcd-mute{fill:#999}.gcd-xo-mark.gcd-open{fill:#a2a2a2}.gcd-note-name{font-size:10px;fill:#a2a2a2;font-weight:600;letter-spacing:.3px;text-anchor:middle}.gcd-interval-name{font-size:9px;fill:#666;text-anchor:middle}.gcd-fret-number-left,.gcd-fret-number-right{font-size:9px;fill:#a5a5a5;font-weight:600;text-anchor:middle}text{shape-rendering:geometricPrecision;text-rendering:optimizeLegibility}.play-button-svg{cursor:pointer;transition:transform .15s ease,filter .25s ease}.play-button-svg:hover{transform:scale(1.06)}.play-button-svg:active{transform:scale(.92)}.play-button-svg .pb-bg{stroke:#656565;stroke-width:1;fill:var(--color-play-dark);transition:fill .25s ease,filter .25s ease}.play-button-svg .pb-icon{fill:var(--color-play-text-dark);transition:fill .25s ease}.play-button-svg.start .pb-bg{fill:var(--color-play-dark)}.play-button-svg.start:hover .pb-bg{fill:var(--color-play)}.play-button-svg.stop .pb-bg{fill:var(--color-stop-dark)}.play-button-svg.stop .pb-icon{fill:var(--color-stop-text-dark)}.play-button-svg.running.stop .pb-bg{fill:var(--color-stop)}.play-button-svg.pulse .pb-bg{fill:var(--color-play-light);filter:url(#glow)}.play-button-svg.pulse .pb-icon{fill:var(--color-play-text-dark)}.twoButtonSelectContainer{display:flex;flex-direction:column;gap:6px;width:100%}.twoButtonLabel{font-size:11px;opacity:.7}.twoButtonWrapper{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}.twoButtonWrapper .dawButton{padding:8px;font-size:12px;cursor:pointer;text-align:center}.PresetCarouselContainer{display:flex;flex-direction:column;gap:12px}.PresetCarouselViewport{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,120px);gap:8px}.PresetCarouselItem{display:flex;flex-direction:column;padding:10px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:6px;cursor:pointer;transition:.2s}.PresetCarouselItem.active{color:var(--color-key);border-color:var(--color-key-50)}.PresetPickingPresetLabel{font-size:.75rem;letter-spacing:.06em;color:var(--color-text-light);margin-top:3px}.PresetPickingPresetDesc{font-size:.65rem;color:var(--color-text-light);margin-top:2px}.PresetCarouselFooter{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0;background:transparent}.NavButtonSmall{background:#2a2a2a;border:1px solid #444;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-light);transition:transform .2s ease,background .2s ease,border-color .2s ease}.NavButtonSmall svg{width:10px;height:10px;display:block}.NavButtonSmall:hover{background:#fd446359;border-color:var(--color-key);color:var(--color-key);transform:translateY(-2px)}.PresetCarouselDots{display:flex;align-items:center;gap:6px;padding:0 4px}.Dot{width:6px;height:6px;border-radius:50%;background:#555;cursor:pointer;transition:background .2s}.Dot.active{background:var(--color-key);box-shadow:0 0 4px #ff3c5066}.PresetPickingPreview{width:100%;height:45px;background:#00000040;border-radius:4px;padding:8px;display:flex;align-items:center;margin-bottom:8px;box-sizing:border-box}.PickingSvg{width:100%;height:100%;overflow:visible}.PresetCarouselItem:not(.active) .PickingSvg{opacity:.5;filter:grayscale(1)}:root{--dsc-label-width: 46px;--dsc-column-gap: 12px;--dsc-row-height: 14px}.DrumSequencerControl{padding:16px;background:#0a0a0a66;border-radius:6px;display:flex;flex-direction:column;width:100%;box-sizing:border-box;color:#fff}.DscScrollArea{overflow-Y:auto;max-height:800px}.DscLayoutRow{display:grid;grid-template-columns:var(--dsc-label-width) 1fr;gap:var(--dsc-column-gap);align-items:center}.DscStepGrid{display:grid;grid-template-columns:repeat(var(--num-steps),1fr);width:100%}.DscRulerRow{margin-bottom:8px;align-items:flex-end}.DscRulerStep{font-size:9px;height:14px;color:#fff6;border-bottom:1px solid rgba(255,255,255,.1)}.DscInstrumentRow{margin-bottom:2px}.DscInstrumentLabel{font-size:10px;opacity:.5;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.DscInstrumentGrid{height:var(--dsc-row-height);background:#ffffff03;border-right:1px solid rgba(255,255,255,.05)}.DscStepCell{position:relative;height:100%;box-sizing:border-box;align-content:center}.DscGroup{margin-bottom:20px}.DscGroupHeader{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;margin-left:calc(var(--dsc-label-width) + var(--dsc-column-gap))}.DscGroupIcon{width:14px;height:14px;display:flex;align-items:center;justify-content:center}.ChordDetails{display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--bg-dark);height:100%;min-height:0}.ChordDetailHeader{display:grid;grid-template-rows:auto auto;background:var(--bg-dark)}.row1,.row2{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--glass-border);padding:20px}.ChordDetailHeader .row1{display:grid;grid-template-columns:1fr 300px;align-items:center}.ChordDetailHeader h1{color:#f5f5f5}.ChordSelectContainer,.ChordNoteBoxContainer,.ChordNoteListContainer{background:transparent}.ChordDetailHeader,.ChordDetailHeader .row1,.ChordDetailHeader .row2,.tab-content{overflow:visible}.ChordDetailHeader{position:relative;z-index:10}.ChordDetailHeader .row1{position:relative;z-index:30}.ChordDetailHeader .row2{position:relative;z-index:5}.ChordDetailData{min-height:0;height:100%;padding:18px;background:linear-gradient(180deg,#0e1018,#141b29);color:var(--color-text-light);display:flex;flex-direction:column;gap:20px;box-sizing:border-box}.tab-header{display:flex;justify-content:center;gap:8px;background:#ffffff0d;padding:6px;border-radius:16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-border);flex-wrap:wrap}.tab-trigger{appearance:none;border:none;outline:none;padding:10px 16px;border-radius:12px;background:var(--glass-panel);border:1px solid var(--glass-border);color:var(--color-text-light);cursor:pointer;font-size:.85rem;font-weight:500;transition:background .2s ease,transform .2s ease,border-color .2s ease}.tab-trigger:hover{background:#ffffff29;transform:translateY(-2px)}.tab-trigger.active{background:#fd446338;border-color:var(--color-key);color:var(--color-key);font-weight:600;transform:translateY(-2px)}.tab-content{flex:1 1 auto;min-height:0;padding:16px;border-radius:18px;background:var(--glass-panel);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:18px;position:relative;height:100%;overflow:hidden;box-sizing:border-box}.tab-content-inner{flex:1 1 auto;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;padding-right:6px;box-sizing:border-box}.ChordDataContainer .InstrumentContainer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;width:100%;border-radius:12px}.ChordDetailData{animation:fadeInPanel .5s ease}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.card .item-header{display:grid;grid-template-columns:1fr 60px;align-items:center}.card.notes{min-width:260px;max-width:260px}.card.piano{width:300px;height:180px}.piano-wrapper{height:100px}.legal-page{max-width:900px;margin:4rem auto;padding:2rem;line-height:1.6;color:var(--color-text-light)}.legal-page h1{margin-bottom:2rem}.legal-page ul{padding-left:1.4rem}