:root{--ink:#172b42;--muted:#627287;--cream:#fcf8ee;--white:#fff;--line:#e6e9e9;--blue:#176bd4;--pink:#ef5aa0;--yellow:#ffd766;--mint:#b9e8d6;--font:'DM Sans',system-ui,sans-serif;--display:'Fredoka',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.shell{width:min(1200px,calc(100% - 64px));margin:auto}.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:white;padding:12px;z-index:99}.skip:focus{top:8px}.site-header{height:88px;border-bottom:1px solid rgba(23,43,66,.08);background:rgba(252,248,238,.94);position:relative;z-index:3}.nav-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font:700 33px/1 var(--display);letter-spacing:-.05em;color:#ee559f}.brand-mark span:first-child{color:#2c6cd2}.brand-mark span:last-child{color:#e6a31f}.brand-caption{font:600 12px/1.2 var(--display);max-width:80px;text-transform:uppercase;letter-spacing:.05em;color:#4f6076}.site-header nav{display:flex;gap:34px;font-size:14px;font-weight:700}.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--blue)}.nav-cta{background:var(--ink);color:white;border-radius:50px;padding:14px 21px;font-size:14px;font-weight:800;white-space:nowrap}.nav-cta span{margin-left:14px}.nav-cta:hover,.button-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,43,66,.16)}.hero{min-height:550px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:52px;padding-top:58px;padding-bottom:78px}.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.17em;color:#b55928}.eyebrow{display:inline-flex;align-items:center;gap:11px}.sparkle{display:grid;place-items:center;width:29px;height:29px;background:var(--yellow);border-radius:50%;font-size:20px;color:#ad6d06}.hero h1{font:600 clamp(58px,5.7vw,89px)/.99 var(--display);letter-spacing:-.047em;margin:24px 0}.hero h1 em{font-style:normal;color:var(--blue);position:relative}.hero h1 em:after{content:'';position:absolute;left:5%;right:6%;height:10px;bottom:-5px;border-radius:50%;background:var(--yellow);transform:rotate(-2deg);z-index:-1}.hero-copy>p{font-size:18px;line-height:1.62;color:#53657a;max-width:485px;margin:28px 0 30px}.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:0;cursor:pointer;background:var(--blue);color:white;border-radius:50px;font-size:15px;font-weight:800;padding:17px 24px;transition:.2s}.button-primary span{font-size:20px;line-height:0}.age-note{font-size:13px;font-weight:700;color:#637286}.age-note span{color:#efaa1b;font-size:20px;margin-right:4px}.hero-doodles{display:flex;gap:32px;margin-top:40px;font:600 29px var(--display)}.hero-doodles span:nth-child(1){color:#ec6ba6;transform:rotate(-13deg)}.hero-doodles span:nth-child(2){color:#eab02f;transform:rotate(8deg)}.hero-doodles span:nth-child(3){color:#52bcb1;transform:rotate(-9deg)}.hero-art-wrap{position:relative;display:grid;place-items:center;min-width:0}.hero-art-back{position:absolute;width:97%;height:95%;background:#fbd96c;border-radius:36px;transform:rotate(7deg)}.hero-art{width:min(100%,475px);aspect-ratio:1;object-fit:cover;border-radius:30px;box-shadow:0 20px 50px #33486020;position:relative;transform:rotate(-3deg)}.floating-sticker{position:absolute;right:-15px;bottom:-28px;background:white;border:3px solid #f5c74d;box-shadow:0 8px 20px #172b4219;border-radius:50%;width:132px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);font:600 18px var(--display);text-align:center}.floating-sticker span{color:var(--pink);font-size:14px}.discover{padding:75px 0 95px;background:#fff;position:relative;overflow:hidden}.discover:before{content:'';position:absolute;top:-24px;left:-5%;width:110%;height:44px;background:var(--cream);border-radius:0 0 50% 50%}.section-heading{display:flex;justify-content:space-between;align-items:end}.section-heading h2,.family-section h2{font:600 clamp(36px,4vw,55px)/1.05 var(--display);letter-spacing:-.035em;margin:14px 0 11px}.section-heading h2 span{color:var(--pink)}.section-heading p{font-size:16px;color:var(--muted);margin:0}.section-scribble{font:500 72px var(--display);color:#f4bd47;transform:rotate(-15deg);padding-right:40px}.filter-panel{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:13px;background:#f8f7f2;padding:18px;border:1px solid #eeede8;border-radius:20px;margin-top:34px}.filter-panel label{display:block;min-width:0}.field-label{font-size:11px;letter-spacing:.09em;font-weight:800;text-transform:uppercase;display:block;color:#69798c;margin:0 0 9px 4px}.filter-panel input,.filter-panel select{border:1px solid #e2e5e8;background:white;border-radius:12px;height:49px;width:100%;color:var(--ink);outline:none;font-size:14px;padding:0 15px}.filter-panel select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%235d7086' stroke-width='2'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:34px}.search-input-wrap{position:relative;display:block}.search-input-wrap span{position:absolute;left:15px;top:8px;font-size:27px;color:#7f8a98;line-height:1}.filter-panel input{padding-left:41px}.filter-panel input:focus,.filter-panel select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #176bd427}.result-row{display:flex;justify-content:space-between;align-items:center;margin:25px 0 19px;min-height:22px}.result-row p{margin:0;color:var(--muted);font-weight:700;font-size:13px}.reset-button{border:0;background:transparent;color:var(--blue);cursor:pointer;font-weight:800;font-size:13px}.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.song-card{border:1px solid #e7e9e8;background:white;border-radius:22px;overflow:hidden;box-shadow:0 8px 28px rgba(23,43,66,.055);transition:transform .2s,box-shadow .2s}.song-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(23,43,66,.12)}.card-art{aspect-ratio:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-art img{width:100%;height:100%;object-fit:cover}.card-art.alpha{background:#e7eafc}.card-art.count{background:#fff0c9}.card-art .art-big{font:700 clamp(76px,10vw,145px)/1 var(--display);letter-spacing:-.08em;position:relative;z-index:1}.alpha .art-big{color:#315fbd;text-shadow:8px 8px 0 #e999c3}.count .art-big{color:#ef6576;text-shadow:8px 8px 0 #f4c454}.art-shape{position:absolute;border-radius:50%;border:14px solid #ffffff70}.shape-one{height:240px;width:240px;left:-90px;bottom:-110px}.shape-two{height:160px;width:160px;right:-35px;top:-55px}.art-small{position:absolute;left:22px;top:22px;background:#fff;border-radius:50px;padding:8px 12px;font:700 13px var(--display);letter-spacing:.05em}.card-body{padding:22px 22px 23px}.card-meta{display:flex;gap:8px;flex-wrap:wrap}.tag{font-size:11px;font-weight:800;border-radius:50px;padding:7px 10px;background:#f0f6ff;color:#2862ae}.tag.age{background:#fff2dc;color:#a36919}.card-body h3{font:600 28px/1.08 var(--display);margin:17px 0 9px}.card-body p{font-size:14px;line-height:1.52;color:var(--muted);min-height:43px;margin:0 0 19px}.open-card{background:none;border:0;padding:4px 0;color:var(--blue);font-weight:800;cursor:pointer;font-size:14px}.open-card span{display:inline-block;margin-left:7px;transition:transform .2s}.open-card:hover span{transform:translateX(4px)}.empty-state{text-align:center;border:2px dashed #dce3e8;border-radius:22px;padding:35px}.empty-state>span{font-size:50px;color:var(--pink)}.empty-state h3{font:600 28px var(--display);margin:5px}.empty-state p{color:var(--muted)}.empty-state button{margin-top:10px}.family-section{background:#eaf6f1;padding:68px 0}.family-inner{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.family-inner p{color:#586e74;line-height:1.65;max-width:530px}.family-steps{display:grid;gap:10px}.family-steps div{display:flex;align-items:center;gap:17px;padding:16px 20px;border:1px solid #d0e6dd;background:#fff;border-radius:14px;font:600 18px var(--display)}.family-steps b{font:800 14px var(--font);color:#279b85;background:#e4f8f0;border-radius:10px;width:35px;height:35px;display:grid;place-items:center}.site-footer{background:#1b2d43;color:#fff;padding:29px 0}.footer-inner{display:flex;align-items:center;gap:22px}.footer-inner p{font:500 16px var(--display);margin:0}.footer-inner>span{margin-left:auto;font-size:12px;color:#b9c8d7}.overlay[hidden],.empty-state[hidden],[hidden]{display:none!important}.overlay{position:fixed;inset:0;z-index:20;display:flex;justify-content:flex-end}.scrim{position:absolute;inset:0;background:#101e32b8;backdrop-filter:blur(3px)}.detail{position:relative;width:min(555px,100%);height:100dvh;background:white;overflow-y:auto;box-shadow:-14px 0 45px #07142638;outline:none}.close-detail{position:absolute;z-index:1;top:17px;right:18px;border:0;background:#fff;border-radius:50%;width:44px;height:44px;box-shadow:0 2px 12px #172b4230;font-size:28px;cursor:pointer}.detail-art{height:300px;overflow:hidden;position:relative}.detail-art img{width:100%;height:100%;object-fit:contain;background:#f8f7f2}.detail-art.alpha{background:#e7eafc}.detail-art.count{background:#fff0c9}.detail-art .art-big{font:700 125px var(--display);margin:auto}.detail-body{padding:28px 37px 48px}.detail-body h2{font:600 42px/1.05 var(--display);margin:14px 0 12px}.detail-lead{font-size:16px;line-height:1.6;color:#53667a}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:23px 0}.fact{background:#f6f8fa;border-radius:13px;padding:13px}.fact small{display:block;text-transform:uppercase;letter-spacing:.1em;color:#748195;font-weight:800;font-size:10px;margin-bottom:4px}.fact strong{font-size:13px}.activity{background:#fef9ec;border:1px solid #f4e7bb;border-radius:19px;padding:23px;margin-top:25px}.activity-label{color:#a36b0b;text-transform:uppercase;font-size:11px;letter-spacing:.12em;font-weight:800}.activity h3{font:600 26px var(--display);margin:9px 0 7px}.activity p{color:#57677a;font-size:14px;line-height:1.5}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.answer{padding:13px 5px;border-radius:12px;background:white;border:2px solid #d9dfe3;font:600 22px var(--display);cursor:pointer;color:var(--ink)}.answer:hover,.answer:focus-visible{border-color:var(--blue);background:#eff6ff}.answer.correct{background:#d7f4e6;border-color:#37a87a}.answer.wrong{background:#ffe4e9;border-color:#dc778b}.feedback{min-height:23px;font-size:14px;font-weight:700;color:#217f5c}.feedback.try{color:#bd5067}.next-question{border:0;background:transparent;color:var(--blue);font-weight:800;cursor:pointer;padding:7px 0}.detail-note{font-size:12px;line-height:1.5;color:#748293;margin-top:24px}.detail-action{background:#e8f4ff;border-radius:12px;padding:13px 15px;color:#385f85;font-size:13px;line-height:1.5;margin-top:16px}:focus-visible{outline:3px solid #f3a61f;outline-offset:3px}@media(max-width:980px){.filter-panel{grid-template-columns:repeat(2,1fr)}.hero{gap:30px}.hero h1{font-size:clamp(50px,6vw,70px)}.song-grid{gap:15px}.card-body h3{font-size:24px}}@media(max-width:700px){.shell{width:min(100% - 32px,500px)}.site-header{height:72px}.nav-row{gap:10px}.brand-mark{font-size:29px}.brand-caption{font-size:10px;max-width:65px}.site-header nav{display:none}.nav-cta{font-size:12px;padding:12px 14px}.nav-cta span{margin-left:3px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:48px;padding-bottom:70px;gap:32px}.hero h1{font-size:clamp(54px,13vw,72px);margin:19px 0}.hero-copy>p{font-size:16px;margin:23px 0}.hero-doodles{display:none}.hero-art-wrap{width:min(88%,410px);align-self:center}.floating-sticker{width:96px;height:96px;right:-25px;bottom:-22px;font-size:13px}.floating-sticker span{font-size:11px}.discover{padding:59px 0 72px}.section-heading h2{font-size:39px}.section-scribble{display:none}.filter-panel{grid-template-columns:1fr 1fr;margin-top:25px;padding:13px;gap:10px}.search-field{grid-column:1/-1}.filter-panel label:last-child{grid-column:1/-1}.filter-panel input,.filter-panel select{font-size:13px}.song-grid{grid-template-columns:1fr;gap:20px}.card-art{aspect-ratio:1}.card-art .art-big{font-size:125px}.card-body{padding:20px}.card-body p{min-height:0}.family-inner{grid-template-columns:1fr;gap:20px}.family-section{padding:55px 0}.footer-inner{flex-wrap:wrap;gap:8px 14px}.footer-inner>span{width:100%;margin-left:0}.detail-body{padding:24px 23px 35px}.detail-body h2{font-size:37px}.detail-art{height:230px}.detail-facts{grid-template-columns:1fr 1fr}.close-detail{top:12px;right:12px}}@media(max-width:380px){.filter-panel{grid-template-columns:1fr}.search-field,.filter-panel label:last-child{grid-column:auto}.nav-cta{padding:10px}.brand-caption{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.song-player{margin:22px 0;padding:16px 17px;border-radius:15px;background:#eef6ff;border:1px solid #d9eafb}
.song-player span{display:block;margin-bottom:10px;color:#365f89;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.song-player audio{display:block;width:100%;height:42px}