*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:sans-serif}ul,ol{list-style:none}a{text-decoration:none;color:inherit}button{background:none;border:none;cursor:pointer;font:inherit}img,svg{max-width:100%;display:block}:root{--color-bg: #000000;--color-text: #ffffff;--color-text-highlight: #38bacc;--color-fretboard-number: #004152;--color-fretboard-bg: #1f1f1f;--color-grey-1: #1f1f1f;--color-fret-1: #b3d9ff;--color-fret-2: #ceb3ff;--color-fret-3: #ffb3b3;--color-fret-4: #b3ffb3;--color-fret-5: #ffe8b3;--color-fret-6: #c06639;--font-family-base: "Poppins", sans-serif;--font-weight-medium: 500;--font-size-text: .875rem;--font-size-header: 1rem;--font-size-fret-letter: 1.125rem;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-soft: 0 2px 6px rgba(0, 0, 0, .25)}html,body{height:100%;margin:0;overflow:hidden;font-family:var(--font-base);color:var(--color-text);background:var(--color-bg)}a{color:var(--color-highlight);text-decoration:none}a:hover{opacity:.8}body{margin:0}.header{display:flex;justify-content:flex-start;width:100%;max-width:1280px;height:5rem;margin:0 auto;padding:0 0rem;background-color:var(--color-bg);box-sizing:border-box;gap:2rem}.header__logo{display:flex;align-items:center;gap:var(--space-sm, .5rem);font-size:1rem;font-weight:600;color:var(--color-text);white-space:nowrap;max-width:20%;padding-top:1.25rem}.header__search{flex:1;max-width:40rem;margin:0 2rem 0 0rem;display:flex;align-items:center}.header__search-input{width:100%;padding:.5rem .75rem;font-size:.9rem;background-color:var(--color-grey-1);color:var(--color-text);border:1px solid var(--color-grey-2);border-radius:.5rem;outline:none;align-items:center}.header__search-input:focus{border-color:var(--color-highlight)}.header__user{display:flex;align-items:center;gap:var(--space-md, 1rem)}.header__user-avatar{width:4rem;height:4rem;border-radius:50%;background-color:var(--color-grey-2)}.header__user-name{font-size:.9rem;font-weight:500;color:var(--color-text)}.sidebar{width:200px;height:100%;background-color:#1f1f1f;color:#fff;padding:1rem 0 1rem 1rem;box-sizing:border-box;overflow-y:auto}@media(max-width:1250px){.sidebar{display:none}}.sidebar__hamburger{display:none;position:fixed;top:1rem;right:1rem;z-index:200;padding:.6rem .9rem;font-size:1.5rem;border:none;border-radius:8px;background:#2a2a2a;color:#fff;cursor:pointer}@media(max-width:1250px){.sidebar__hamburger{display:block}}.sidebar-drawer{position:fixed;top:0;right:0;width:240px;height:100%;padding:4rem;background-color:#1f1f1f;z-index:300;overflow-y:auto;animation:drawerSlideIn .25s ease-out;border-right:2px solid #333}@keyframes drawerSlideIn{0%{transform:translate(240px)}to{transform:translate(0)}}.sidebar-drawer__close{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;margin-bottom:1rem}.sidebar__section,.sidebar__category,.sidebar__subitem{display:flex;flex-direction:column;align-items:flex-start}.sidebar__section{margin:1.5rem 0}.sidebar__section-title{font-size:var(--font-size-header);cursor:pointer;padding:1rem 0}.sidebar__category-title{font-size:var(--font-size-text);cursor:pointer;padding:.4rem 0}.sidebar__subitems-container{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .4s ease}.sidebar__subitems-container.open{max-height:500px;opacity:1}.sidebar__subitem{padding-left:.4rem;margin-bottom:.25rem;cursor:pointer;transition:transform .15s ease,opacity .3s ease}.sidebar__subitem:hover{color:#38bacc;transform:translate(2px)}.sidebar__subitem--active{font-weight:600;color:#38bacc}.sidebar__save-playlist-btn{display:inline-block;margin-top:.5rem;padding:.4rem .8rem;background-color:#38bacc;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s}.sidebar__save-playlist-btn:hover{background-color:#2aa5b2;transform:translateY(-1px)}.sidebar__save-playlist-btn:active{transform:translateY(0)}.sidebar--highlight{background-color:#262f36;box-shadow:inset 0 0 0 2px #38bacc;transition:background-color .4s ease}.sidebar__section-title--highlight{color:#38bacc;font-weight:700;animation:pulse 1.2s ease-in-out 1}.sidebar__subitem--highlight{background-color:#38bacc33;border-left:3px solid #38bacc;padding-left:.6rem;animation:pulse 1.2s ease-in-out 1}@keyframes pulse{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.fretboard{position:relative;width:76vw;background-color:var(--color-bg, #1f1f1f);border-radius:8px;display:flex;flex-direction:column;justify-content:flex-start;padding:1rem;margin-top:2.5rem;margin-right:1rem;margin-bottom:2rem;box-sizing:border-box}.fretboard__controls{display:flex;align-items:center;gap:.5rem;margin-top:2.5rem;padding:0 1rem}.fretboard__button{background-color:var(--color-accent, #38bacc);color:var(--color-text, #fff);border:none;border-radius:4px;padding:.25rem .75rem;cursor:pointer;font-size:var(--font-size-text, .875rem)}.fretboard__button:hover{background-color:#2dd1d8}.fretboard__start-label{font-size:var(--font-size-text, .875rem);color:var(--color-text, #fff)}.fretboard__inner{display:flex;height:100%}.fretboard__labels{display:flex;flex-direction:column;justify-content:space-between;margin-right:.5rem;padding-top:.68rem}.fretboard__string-label{color:#fff;font-size:var(--font-size-text, .875rem);text-align:right;pointer-events:none;-webkit-user-select:none;user-select:none}.fretboard__grid{display:flex;flex-direction:column;justify-content:space-between;flex:1;position:relative}.fretboard__fret-line{position:absolute;top:0;bottom:0;width:1px;background-color:#fff;pointer-events:none}.fretboard__marker{position:absolute;top:50%;width:6px;height:6px;background-color:#fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.fretboard__fret-number{position:absolute;bottom:-2.8rem;left:50%;transform:translate(-50%);width:22px;height:22px;background-color:var(--color-fretboard-number);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:500;pointer-events:none}.fretboard__string{display:flex;position:relative;flex:1;align-items:center}.fretboard__tile-wrapper{position:relative;flex:1;display:flex;align-items:center;justify-content:center;z-index:1}.fretboard__string:after{content:"";position:absolute;top:50%;left:-.5rem;width:calc(100% + .5rem);height:1px;background-color:#fff;transform:translateY(-50%);pointer-events:none;z-index:0}.fretboard__note{width:45px;height:45px;background-color:#fff;border-radius:50%;color:#000;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,background-color .2s,color .2s}.fretboard__note:hover{transform:translateY(-2px) scale(1.2)}.fretboard__note--highlighted{background-color:#fc0;color:#000}.fretboard__note--selected{background-color:#f66;color:#fff}.control-panel{display:flex;width:76vw;height:25vh;padding:1rem;margin:0 1 2rem auto;border-radius:8px;gap:2rem;box-sizing:border-box}.control-panel__left{display:flex;flex-direction:column;gap:.75rem;flex:0 0 150px}.control-panel__button{padding:.5rem 1rem;border:none;border-radius:20px;color:#000;font-size:.9rem;cursor:pointer;transition:transform .1s,background-color .2s;width:15rem;align-items:start}.control-panel__button:hover{transform:translateY(-1px)}.control-panel__button--fret{background-color:var(--color-fret-1);padding-left:3rem}.control-panel__button--chord{background-color:var(--color-fret-2);color:#000}.control-panel__button--mode{background-color:var(--color-fret-4)}.control-panel__button--relative{background-color:var(--color-fret-5)}.control-panel__center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.control-panel__playlist{margin-top:-8rem}.control-panel__playlist-title{font-size:1.2rem;font-weight:600;margin-bottom:1.5rem;color:#fff}.control-panel__playlist-items{display:flex;gap:.5rem;flex-wrap:wrap}.control-panel__playlist-item{background-color:#38bacc;color:#fff;padding:.8rem 1rem;border-radius:12px;font-size:1rem;display:flex;align-items:center;gap:.3rem}.control-panel__add-btn{display:inline-block;margin-left:2.5rem;padding:0 .4rem;background-color:var(--color-fret-4);color:#000;font-weight:700;border-radius:50%;cursor:pointer;transition:transform .15s,background-color .2s}.control-panel__add-btn:hover{background-color:#2dd1d8;transform:scale(1.2)}.control-panel__remove-btn{cursor:pointer;font-weight:700;padding-left:1rem}.control-panel__recent-title{font-size:var(--font-size-text, .875rem);color:var(--color-text, #fff);margin-bottom:.5rem}.control-panel__recent-chords{display:flex;gap:.5rem}.control-panel__recent-chord{padding:.5rem .75rem;border-radius:4px;background-color:#555;color:#fff;font-size:var(--font-size-text, .875rem)}.control-panel__right{flex:0 0 220px;display:flex;justify-content:center;justify-content:flex-start;align-items:center}.control-panel__circle-placeholder{width:80px;height:80px;border-radius:50%;border:2px dashed #fff;display:flex;justify-content:center;align-items:center;font-size:.75rem;text-align:center;color:#fff}.control-panel__label{font-weight:500;margin-right:.5rem}.control-panel__fret-btn{border:none;border-radius:6px;padding:.1rem .7rem;font-size:1rem;cursor:pointer;transition:background-color .2s,transform .1s}.control-panel__fret-btn:hover{transform:scale(1.5)}.control-panel__fret-value{min-width:1.5rem;text-align:center;font-weight:600}.control-panel__circle-image{width:160%;max-width:400px;height:auto;object-fit:contain;border-radius:50%;border:2px solid #fff;transition:transform .2s}.app-container{max-width:1400px;margin:0 auto;padding-left:1rem;padding-right:1rem;box-sizing:border-box;width:100%}.app__content{display:flex;height:calc(100vh - 80px);width:100%;overflow-y:auto;background-color:transparent}.main-area{flex:1;display:flex;flex-direction:column;background-color:#2a2a2a;padding:0rem 0rem 1rem;gap:2rem;box-sizing:border-box;min-width:0;border-radius:12px;overflow-y:auto;margin:3rem 1.5rem 4rem 3rem}.sidebar{flex:0 0 150px;height:100%;overflow-y:auto;background-color:transparent}.fretboard{width:990px;margin-left:auto;margin-right:auto}.control-panel{width:92vw;max-width:990px;margin:0 auto}.small-screen-overlay{display:none}@media(max-width:1100px){.app-container,.app__content,.main-area,.sidebar,header{display:none!important}.small-screen-overlay{display:flex;justify-content:center;align-items:center;text-align:center;position:fixed;inset:0;background:#111;color:#fff;padding:2rem;z-index:9999}.small-screen-message{max-width:500px}.small-screen-message h2{margin-bottom:1rem;font-size:2rem}.small-screen-message p{font-size:1.1rem;line-height:1.6rem;opacity:.9}}