*{box-sizing:border-box}body{margin:0;background:#f8fafc;color:#203044;font-family:'DM Sans',sans-serif;padding-bottom:85px}button,input,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:#1663d9}button{border:0;border-radius:12px;padding:12px 16px;background:#eaf0f9;color:#203044;font-weight:700}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #edba50;outline-offset:3px}.topbar{height:84px;display:flex;align-items:center;gap:20px;padding:18px max(24px,calc((100vw - 1280px)/2));background:white;border-bottom:1px solid #e5eaf1;position:sticky;top:0;z-index:10}.brand{font-family:Fredoka,sans-serif;font-weight:700;text-decoration:none;font-size:22px;line-height:1;color:#164cab;white-space:nowrap}.brand span{display:block;color:#ed4454;font-size:18px}.search{margin-left:auto;display:flex;gap:10px;align-items:center;border-radius:25px;background:#f3f5f8;padding:10px 18px}.search input{width:250px;border:0;background:transparent;outline:0}.account{background:#1761cf;color:white}.menu-toggle{font-size:22px;padding:8px 13px}main{max-width:1280px;margin:auto;padding:28px 30px}.hero{background:#eaf4ff;border:1px solid #dce9f9;border-radius:28px;display:flex;align-items:center;justify-content:space-between;padding:42px 48px;margin-bottom:40px}.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:800;color:#3672b8}h1,h2,h3{font-family:Fredoka,sans-serif}h1{font-size:50px;line-height:1.12;margin:14px 0}h1 em{font-style:normal;color:#f25a57}.hero p{max-width:520px;line-height:1.6;color:#52657e}.hero-stat{text-align:center;background:#fff;border-radius:24px;padding:26px 35px;transform:rotate(3deg);box-shadow:0 10px 25px #bfd3eb55}.hero-stat b{display:block;font-family:Fredoka;font-size:60px;color:#1f69db}.hero-stat span{font-size:14px}.collection-heading{display:flex;justify-content:space-between;align-items:center}.collection-heading h2{font-size:30px;margin:8px 0}.collection-count{color:#7a8b9b}.category-filters{display:flex;gap:8px;margin:20px 0 30px}.category-filters .active{background:#1b61cb;color:#fff}.music-row{margin-bottom:35px}.carousel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.row-label{color:#263d55}.carousel-arrows{display:flex;gap:8px}.carousel-arrows button{padding:8px 14px}.music-carousel{display:flex;gap:18px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 1px 16px}.card{min-width:240px;flex:0 0 calc((100% - 54px)/4);background:white;border:1px solid #e5eaf2;border-radius:20px;overflow:hidden;scroll-snap-align:start;box-shadow:0 4px 10px #14335105}.card-heading{padding:15px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.5px;font-weight:700}.pending-tag{font-size:10px;background:#edf4ff;color:#3564a3;border-radius:20px;padding:5px 8px}.thumb{height:130px;background:linear-gradient(140deg,#e1efff,#cfe2f9);position:relative;display:grid;place-items:center;color:#1859bb}.card:nth-child(2n) .thumb{background:linear-gradient(140deg,#ffeddc,#ffe3c6);color:#db8250}.card:nth-child(3n) .thumb{background:linear-gradient(140deg,#ddf5ee,#c9ebdd);color:#369581}.thumb b{font-family:Fredoka;font-size:60px}.heart{position:absolute;right:12px;top:10px;padding:5px 9px;border-radius:50%;background:#ffffffdf;color:#bac5d1}.heart.on{color:#f45b70}.card-body{padding:18px}.card-body h3{margin:0 0 7px;font-size:20px;min-height:25px}.english{font-size:14px;color:#8492a2}.card-body p{font-size:11px;color:#8799ab;margin:16px 0}.open,.primary{background:#2366cc;color:white}.open{width:100%}.carousel-progress{display:flex;justify-content:center;gap:6px}.carousel-progress i{width:6px;height:6px;border-radius:8px;background:#d3deed}.carousel-progress .active{width:18px;background:#3975c9}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:65px;background:white;border-top:1px solid #e2eaf3;padding:8px 15px;z-index:20}.bottom-nav button{background:transparent;padding:4px 20px;font-size:11px;color:#8b98a8}.bottom-nav b{display:block;font-size:23px;margin-bottom:3px}.bottom-nav .active{color:#2366cc}.song-drawer{position:fixed;left:0;top:0;bottom:0;width:min(430px,90vw);background:#fff;z-index:40;transform:translateX(-100%);transition:transform .2s;overflow:auto;padding:24px}.song-drawer.open{transform:translateX(0)}.song-drawer header{display:flex;justify-content:space-between;align-items:center}.drawer-group h3{font-size:15px;color:#75869c;margin-top:26px}.drawer-song{display:flex;width:100%;gap:12px;align-items:center;text-align:left;background:white;font-size:13px;padding:13px 7px;border-bottom:1px solid #edf0f5}.drawer-song b{color:#2269cb}.drawer-song small{margin-left:auto}.drawer-scrim{position:fixed;inset:0;background:#10284466;z-index:30;border-radius:0}dialog{border:0;border-radius:24px;padding:30px;width:min(1080px,94vw);max-height:90vh;overflow:auto;color:#203044}dialog::backdrop{background:#0b203b99}dialog .close{position:absolute;right:10px;top:8px;font-size:23px;padding:5px 13px;z-index:2}#login{max-width:470px;padding:40px}.lesson-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;margin-top:12px}.lesson-media{min-width:0}.lesson-placeholder{min-height:370px;border-radius:20px;background:#edf3fa;display:grid;place-items:center;text-align:center;padding:30px}.lesson-placeholder b{font:26px Fredoka}.lesson-info{padding:25px 0}.lesson-info h2{font-size:35px;margin:14px 0}.lesson-info p{line-height:1.7}.lesson-nav{display:flex;justify-content:space-between;margin-top:15px}.file-checklist{list-style:none;padding:0}.file-checklist li{padding:18px 0;display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #e5ebf3;font-size:14px}.file-checklist a{font-weight:700;text-decoration:none}.review-banner{padding:15px;background:#fff0da;border-radius:15px;margin-bottom:20px;font-size:14px}.review-banner[hidden]{display:none}.empty-state{padding:40px;text-align:center;color:#778899}.profile-stats{display:flex;gap:12px}.profile-stat{padding:15px;background:#f2f6fb;border-radius:12px;text-align:center}.profile-stat b,.profile-stat span{display:block}#collection-message,.media-error{color:#b82d45}.profile-email{overflow-wrap:anywhere}@media(max-width:750px){.topbar{height:72px;padding:12px;gap:10px;flex-wrap:wrap}.brand{font-size:17px}.brand span{font-size:14px}.search{display:none}.account{margin-left:auto;font-size:12px;padding:10px}.menu-toggle{font-size:18px}.hero{padding:28px 24px;gap:12px}h1{font-size:35px}.hero-stat{padding:12px 15px}.hero-stat b{font-size:42px}.hero-stat span{font-size:11px}.hero p{font-size:13px}.eyebrow{font-size:10px}main{padding:20px 15px}.card{flex-basis:74%;min-width:220px}.bottom-nav{gap:8px;justify-content:space-around}.bottom-nav button{padding:4px 12px}.lesson-grid{grid-template-columns:1fr;gap:10px}dialog{padding:25px 16px}.lesson-info{padding-top:5px}.lesson-info h2{font-size:28px}.collection-heading h2{font-size:25px}.collection-count{font-size:12px}.category-filters button{font-size:12px;padding:10px}.lesson-placeholder{min-height:280px}}