@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";
*{box-sizing:border-box;margin:0;padding:0}body{color:#2a1f3d;background:#fdf9f4;font-family:Nunito,sans-serif}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.float{animation:3s ease-in-out infinite float}.fadeUp{animation:.6s forwards fadeUp}.pulse{animation:2s ease-in-out infinite pulse}.card-hover{transition:transform .2s,box-shadow .2s}.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 32px #2a1f3d1f}.key-white{transition:background 70ms,transform 70ms}.key-white:active{transform:translateY(2px);background:#ffe0cc!important}.key-black{transition:background 70ms,transform 70ms}.key-black:active{transform:translateY(2px);background:#4a2d7a!important}.course-wrapper{max-width:1180px;margin:0 auto;padding:0 24px 110px}.course-layout{align-items:flex-start;gap:48px;margin-top:60px;display:flex}.course-main{flex-direction:column;flex:1;gap:60px;min-width:0;display:flex}.course-sidebar-wrap{flex-shrink:0;width:220px;position:sticky;top:24px}.lesson-card{background:#fff;border:3px solid #f3e8d6;border-radius:40px;padding:48px;scroll-margin-top:20px;transition:border-color .3s;box-shadow:0 16px #0000000a}.lesson-card.done{border-color:#51cf8a}.cover-section{border-radius:44px;width:calc(100% - 48px);max-width:1180px;margin:40px auto 0;position:relative;overflow:hidden}.cover-inner{z-index:2;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;padding:64px 48px 0;display:flex;position:relative}.cover-text{flex:420px;min-width:300px}.cover-mascot{flex-direction:column;flex-shrink:0;align-items:center;gap:16px;display:flex}.cover-h1{color:#fff;text-shadow:0 5px #0000001f;margin:22px 0 12px;font-family:"Baloo 2",sans-serif;font-size:84px;font-weight:800;line-height:.95}.map-grid{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.map-grid-4{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}@media (max-width:768px){.course-wrapper{padding:0 14px 60px}.course-layout{flex-direction:column;gap:0}.course-sidebar-wrap{display:none}.course-main{gap:32px}.lesson-card{border-radius:24px;padding:22px 16px}.cover-section{border-radius:20px;width:100%;margin:0}.cover-inner{flex-direction:column;gap:16px;padding:32px 20px 0}.cover-text{min-width:unset;text-align:center;width:100%}.cover-mascot{display:none}.cover-inner{flex-direction:column;align-items:flex-start}.cover-h1{font-size:44px}.map-grid,.map-grid-4{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width:480px){.cover-h1{font-size:36px}.lesson-card{padding:18px 12px}}.nav-desktop{align-items:center;gap:1.5rem;display:flex}.nav-hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:none}@media (max-width:768px){.nav-desktop{display:none}.nav-hamburger{display:flex}}.hero-h1{color:#fff;white-space:nowrap;margin-bottom:1.25rem;font-size:62px;font-weight:900;line-height:1.05}@media (max-width:768px){.hero-h1{white-space:normal;font-size:36px}}html,body{max-width:100%;overflow-x:hidden}img,svg,video{max-width:100%}.piano-scroll{-webkit-overflow-scrolling:touch;max-width:100%;overflow-x:auto}*{max-width:100%}pre,code,svg{max-width:100%;overflow-x:auto}.course-wrapper,.course-main,.course-layout{overflow-x:hidden}body{padding-top:73px}@media (max-width:768px){body{padding-top:65px}}
