:root{--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#f4efe4;background:#0f0e0c;min-height:100vh;font-family:Inter,sans-serif}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2e2a20;border-radius:3px}button{transition:transform .16s var(--ease-out), opacity .16s var(--ease-out);cursor:pointer}button:active:not(:disabled){transform:scale(.97)}.app-layout{min-height:100vh;display:flex}.app-main{flex:1;min-height:100vh;margin-left:230px}.sidebar{z-index:200;width:230px;height:100vh;transition:transform .28s var(--ease-drawer);background:#161410;border-right:1px solid #f4efe412;flex-direction:column;flex-shrink:0;display:flex;position:fixed;top:0;left:0}.sidebar-overlay,.mobile-header{display:none}.nav-item{transition:background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .16s var(--ease-out)}@media (hover:hover) and (pointer:fine){.nav-item:hover{transform:translate(2px)}}.nav-item:active{transform:scale(.97)}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)translateY(-6px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.login-logo{animation:fadeSlideUp .32s var(--ease-out) both}.login-card{animation:fadeSlideUp .36s var(--ease-out) 60ms both}.page-enter{animation:fadeSlideUp .38s var(--ease-out) both}.rank-popup{animation:fadeScaleIn .18s var(--ease-out) both;transform-origin:top}.stagger-in>*{opacity:0;animation:fadeSlideUp .36s var(--ease-out) both}.stagger-in>:first-child{animation-delay:40ms}.stagger-in>:nth-child(2){animation-delay:90ms}.stagger-in>:nth-child(3){animation-delay:.14s}.stagger-in>:nth-child(4){animation-delay:.19s}.stagger-in>:nth-child(5){animation-delay:.24s}.stagger-in>:nth-child(6){animation-delay:.28s}.skeleton{background:linear-gradient(90deg,#f4efe40a 25%,#f4efe417 50%,#f4efe40a 75%) 0 0/200% 100%;border-radius:8px;animation:1.6s ease-in-out infinite shimmer}.skeleton-light{background:linear-gradient(90deg,#1e1a120d 25%,#1e1a121c 50%,#1e1a120d 75%) 0 0/200% 100%;border-radius:8px;animation:1.6s ease-in-out infinite shimmer}.dash-metric-card{transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out)}@media (hover:hover) and (pointer:fine){.dash-metric-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px #00000047}}.page-content{max-width:1140px;padding:36px 44px}.page-tecnica,.page-acordes{padding:32px 40px}.metrics-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;display:grid}.two-col{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;display:grid}.tools-grid{grid-template-columns:1fr 1fr;align-items:start;gap:18px;margin-bottom:18px;display:grid}.teoria-layout{align-items:flex-start;gap:24px;padding-top:32px;display:flex}.teoria-aside{flex-shrink:0;width:220px}.teoria-unit-list{flex-direction:column;gap:3px;display:flex}.teoria-unit-btn{text-align:left;width:100%;transition:background .12s var(--ease-out), border-color .12s var(--ease-out), color .12s var(--ease-out), transform .12s var(--ease-out);background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:9px 12px;display:flex}.teoria-unit-btn.active{background:#c9923a26;border-color:#c9923a4d}@media (hover:hover) and (pointer:fine){.teoria-unit-btn:not(.active):hover{transform:translate(2px)}}.teoria-unit-btn:active{transform:scale(.97)}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px;display:grid}.eval-config-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.eval-config-3col{grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.progress-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;display:grid}.levels-wrap{flex-wrap:wrap;gap:10px;margin-bottom:22px;display:flex}.beat-boxes{gap:10px;margin-bottom:16px;display:flex}.verify-results-grid{gap:8px;margin-bottom:10px;display:grid}@media (max-width:768px){.app-layout{flex-direction:column}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{z-index:199;background:#0009;display:block;position:fixed;inset:0}.sidebar-overlay.hidden{display:none}.mobile-header{z-index:100;background:#161410;border-bottom:1px solid #f4efe412;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;display:flex;position:sticky;top:0}.app-main{margin-left:0}.page-content,.page-tecnica,.page-acordes{padding:20px 16px}.metrics-grid{grid-template-columns:repeat(2,1fr);gap:10px}.two-col{grid-template-columns:1fr;gap:12px}.tools-grid{grid-template-columns:1fr;gap:14px}.teoria-layout{flex-direction:column;gap:16px;padding-top:16px}.teoria-aside{width:100%!important;position:static!important}.teoria-unit-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-flow:row;gap:6px;padding-bottom:4px;overflow-x:auto}.teoria-unit-list::-webkit-scrollbar{display:none}.teoria-unit-btn{white-space:nowrap;flex-shrink:0;width:auto;padding:7px 12px}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.eval-config-grid,.eval-config-3col{grid-template-columns:1fr}.progress-grid{grid-template-columns:1fr;gap:10px}.levels-wrap{gap:6px}.levels-wrap>div{min-width:60px!important;padding:8px 10px!important}.levels-wrap>div>div:last-child{font-size:13px!important}.beat-boxes{flex-wrap:wrap;gap:6px}.beat-boxes>div{flex:80px;min-width:80px}.dash-hero{border-radius:14px!important;padding:20px!important}.dash-hero-name{font-size:24px!important}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.quick-btns{flex-direction:column}.quick-btns button{width:100%}.nav-item:hover{transform:none}}@media (max-width:480px){.metrics-grid{grid-template-columns:1fr 1fr;gap:8px}.page-content,.page-tecnica,.page-acordes{padding:14px 12px}.chords-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}.levels-wrap>div{min-width:50px!important;padding:6px 8px!important}}.landing-hero{align-items:center;display:flex}.landing-hero-visual{flex:0 0 340px}@media (max-width:900px){.landing-hero-visual{display:none}}@media (max-width:768px){.landing-stats{flex-direction:column!important;gap:20px!important}.landing-stats>div{border-bottom:1px solid #f4efe412;border-right:none!important;padding-bottom:20px!important}.landing-stats>div:last-child{border-bottom:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}