: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-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-play-25:var(--color-key-25);--color-play:var(--color-key);--color-play-hell:var(--color-key);--color-play-dunkel:#6e2733;--color-play-text:var(--color-text-light);--color-play-text-hell:var(--color-text-light);--color-play-text-dunkel:#f6f7f9ab;--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);--bright-30:rgba(255, 255, 255, .3);--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: 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}.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}.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,.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}.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}.ToggleSwitch{display:inline-flex;align-items:center;gap:.75rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.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;width:56px;height:30px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.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}.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}.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),}.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)}.toggle-switch:hover .toggle-slider:before{transform:translate(0) scale(1.03)}.toggle-switch input:checked:hover+.toggle-slider:before{transform:translate(26px) scale(1.03)}.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)}.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;display:grid;grid-template-columns:1fr 60px;align-items:center}.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)}}.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;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}.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{display:none}.play-button-svg{cursor:pointer;transition:transform .15s ease,filter .2s ease}.play-button-svg:hover{transform:scale(1.05)}.play-button-svg:active{transform:scale(.92)}.play-button-svg .pb-bg{stroke:#575757;stroke-width:1.5;fill:var(--color-play-25);transition:fill .25s ease,stroke .25s ease}.play-button-svg .pb-icon{fill:var(--color-play-text-dunkel);transition:fill .25s ease}.play-button-svg.start .pb-bg{fill:var(--color-play-dunkel)}.play-button-svg.start:hover .pb-bg{fill:var(--color-play)}.play-button-svg.stop .pb-bg{fill:var(--color-stop-dunkel)}.play-button-svg.stop .pb-icon{fill:var(--color-stop-text-dunkel)}.play-button-svg.playing .pb-bg{fill:var(--color-play-hell);filter:drop-shadow(0 0 8px var(--color-play-hell))}.play-button-svg.playing .pb-icon{fill:var(--color-play-text-hell)}.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}.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{width:50px;height:50px;border-radius:50%;border:1px solid #575757;background-color:var(--color-play-25);color:var(--color-play-text-dunkel);font-size:18px;cursor:pointer;transition:transform .12s ease;display:flex;align-items:center;justify-content:center;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .1s ease}.play-button.start:hover,.play-button.is-playing{background-color:var(--color-play);color:var(--color-play-text-dunkel)}.play-button.start{background-color:var(--color-play-dunkel);color:var(--color-play-text-dunkel)}.play-button.stop{background-color:var(--color-stop-dunkel);color:var(--color-stop-text-dunkel)}.play-button.playing{background-color:var(--color-play-hell);box-shadow:0 0 10px var(--color-play-hell);color:var(--color-play-text-hell)}.play-button:hover{transform:scale(1.05)}.play-button:active{transform:scale(.92)}.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}.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: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}.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}