: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;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-key: #fd4463;--color-key-25: rgba(253, 68, 99, .25);--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;--link-text-color:#222;--link-text-hover-color:#222;--color-overlay: rgba(10, 26, 47, .65);--color-text-light: #F6F7F9;--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-card: rgba(41, 41, 41, .14);--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}.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}.LanguageSelect .Label{color:var(--color-text-light);padding-right:10px}.footer{position:sticky;right:0;background:var(--footer-bg);color:var(--footer-text);padding:2.8rem 1rem 2.2rem}.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;margin-top:1.6rem;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;min-height:100vh;background-color:var(--bg-dark)}.layout-main{flex:1;padding-top:var(--header-height, 60px);display:block}.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: 20px;--font-notename: .7rem;--ls-transition-speed: .25s}.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}.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}.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}.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 1fr;background:var(--bg-dark);min-height:calc(100vh - var(--header-height));padding-bottom:40px}.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}.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,.ScaleDetailData,.tab-content{overflow:visible}.ScaleDetailHeader{position:relative;z-index:10}.ScaleDetailHeader .row1{position:relative;z-index:30}.ScaleDetailHeader .rowExplanations,.ScaleDetailHeader .rowNoteList{position:relative;z-index:5}.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}.ScaleNoteBox{font-size:.7rem}.ScaleDetailData{padding:20px;background:var(--bg-dark);color:var(--color-text-light)}.tab-header{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px;margin-bottom:18px}.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}.ScaleDataContainer{width:100%;min-height:300px;display:flex;flex-direction:column;gap:12px;padding-top:6px}.ScaleDataContainer .headerContainer{background:transparent}.ScaleDataContainer .dataContainer{display:flex;flex-direction:column;gap:10px}@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)}}.FretboardView{--bg-color: rgba(20, 24, 40, .55);--background-fretboard: linear-gradient(145deg, #2b2f3a, #1c2028);--color-main: var(--color-text-light);--color-dot-bg: rgba(255, 255, 255, .15);--color-dot-border: rgba(255, 255, 255, .35);--color-fret0-bg: rgba(255,255,255,.12);position:relative;padding:14px;border-radius:16px;background:var(--bg-color);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 6px 28px #0006;overflow:hidden;font-family:system-ui,sans-serif}.fb-viewer{position:absolute;overflow:hidden;display:flex;flex-direction:column}.fb-scroll-container{flex:1 1 auto;overflow:auto;scrollbar-width:thin}.fretboard{position:relative;min-width:max-content;border-radius:10px;background:var(--background-fretboard);box-shadow:inset 0 0 12px #00000073;margin-bottom:10px}.fret-line{position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#d6d6d6,#8d8d8d);box-shadow:0 0 4px #fff6;transform:translate(-1px)}.fret-line:first-child{background:transparent}.string-line{position:absolute;left:0;right:0;transform:translateY(-50%);border-radius:2px;z-index:2;background:linear-gradient(90deg,#9a9a9a,#dcdcdc 30%,#fff,#dcdcdc 70%,#9a9a9a);box-shadow:inset 0 -1px #0006,0 1px 1px #ffffff40;transition:height .2s ease}.guitar-dot{position:absolute;width:13px;height:13px;background:#ffffff1f;border-radius:50%;box-shadow:0 0 5px #ffffff59;transform:translate(-50%,-50%)}.note-wrapper{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer;border-radius:50%;transition:transform .25s ease,filter .25s ease}.note-wrapper:hover{transform:translate(-50%,-50%) scale(1.18);filter:drop-shadow(0 0 8px var(--color-key))}.fret-numbers{position:relative;height:22px;width:100%}.fret-number-label{position:absolute;top:4px;transform:translate(-50%);font-size:.75rem;color:#ffffffbf;text-shadow:0 0 6px rgba(253,68,99,.55)}.string-line.vibrating{animation:string-vibrate .35s cubic-bezier(.4,.15,.4,1)}.note-wrapper.plucking{animation:note-pluck .35s ease-out}.fb-scroll-container::-webkit-scrollbar{height:7px}.fb-scroll-container::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:6px}.fb-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--color-key)}.PianoboardBaseSVGView{--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%}.leadsheet-svg-container{--ls-bg-color-container:transparent}.leadsheet-svg-container{display:flex;width:100%;overflow:hidden;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)}.carousel-header h4{font-size:1.15rem;margin-bottom:10px;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{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{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 h4{font-size:10pt;padding:unset;margin:unset}.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:#444;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;font-weight:700;letter-spacing:.2px;text-anchor:middle;pointer-events:none}.gcd-xo-mark{font-size:14px;font-weight:700;text-anchor:middle}.gcd-xo-mark.gcd-mute{fill:#999}.gcd-xo-mark.gcd-open{fill:#a2a2a2}.gcd-note-name{font-size:10px;fill:#222;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}.ChordDetails{display:grid;grid-template-rows:auto 1fr;background:var(--bg-dark);min-height:calc(100vh - var(--header-height));padding-bottom:40px}.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}.row1{display:grid;grid-template-columns:1fr 240px;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:calc(100vh - 320px);padding:18px;background:linear-gradient(180deg,#0e1018,#141b29);color:var(--color-text-light);display:flex;flex-direction:column;gap:20px}.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;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}.GuitarDataContainer,.BassDataContainer,.PianoDataContainer,.ChordDataContainer{width:100%;overflow:hidden;border-radius:14px;padding:8px}.GuitarDataContainer{height:260px}.BassDataContainer{height:200px}.PianoDataContainer{height:300px}.ChordDataContainer{height:100%}.ChordDataContainer .headerContainer{background:transparent}.ChordDataContainer .dataContainer{display:flex;flex-direction:column;gap:4px}.ChordDetailData{animation:fadeInPanel .5s ease}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.PianoChordDataContainer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;width:100%;border-radius:12px}.PianoChordDataContainer .inversionName{font-weight:600;font-size:1.05rem;letter-spacing:.5px;color:var(--color-key);text-transform:uppercase;justify-content:center}.NoteChordDataContainer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;width:100%;border-radius:12px}.NoteChordDataContainer .inversion{min-width:200px;max-width:260px}.NoteChordDataContainer .inversionName{font-weight:600;font-size:1.05rem;letter-spacing:.5px;color:var(--color-key);text-transform:uppercase;justify-content:center}.NoteChordDataContainer .notes-wrapper{display:flex;justify-content:center;gap:6px}.GuitarChordDataContainer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;width:100%;border-radius:12px}.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}