/* Babyface Kids: vivid learning-room palette, preserving labels and interactions. */
@media screen {
:root{--blue:#235bdd;--ink:#20345d;--muted:#526582;--bg:#f5f8ff;--yellow:#ffda57;--pink:#ffe2e9;--mint:#d8f2e6;--line:#dce5f6}
body{background:radial-gradient(ellipse at 95% 5%,#e1f5f0 0,transparent 38%),radial-gradient(ellipse at 35% 85%,#fff3d8 0,transparent 40%),var(--bg)}
.sidebar{border-right:1px solid #e1e8f6;background:#fff;box-shadow:5px 0 25px #1d468506}.brand{gap:11px;font-size:24px}.brandmark{min-width:44px;flex-shrink:0;background:#235bdd;box-shadow:0 5px 0 #cbdcff}.brand em{color:#df5374}.brand small{letter-spacing:1px;font-size:10px;line-height:1.55;max-width:150px}.nav{gap:10px;margin-top:40px}.nav button{border:1px solid transparent}.nav button:nth-child(1) .icon{color:#235bdd}.nav button:nth-child(2) .icon{color:#138168}.nav button:nth-child(3) .icon{color:#c3406b}.nav button:nth-child(4) .icon{color:#7953be}.nav button:nth-child(5) .icon{color:#a6630b}.nav button.active{background:#235bdd;color:white;box-shadow:0 5px 12px #235bdd24}.nav button.active .icon{color:white}.nav button[data-nav="art"].active{background:#c73f6b;box-shadow:0 5px 12px #c73f6b24}.nav button:hover:not(.active){background:#f1f5ff;border-color:#dbe6fd}.side-note{background:#fff0b9;border:1px solid #f1d985}.side-note>.icon{color:#cc466a}.signature{line-height:1.9}.topbar{background:#ffffffd9;backdrop-filter:blur(15px)}.age-control{background:#eaf0ff}.age-control button{min-height:42px}.age-control button.selected{background:#ffdf72;color:#3a3c44;box-shadow:0 2px 0 #ebc756}.round{background:#fff6dc;border-color:#f1dfad;min-height:44px;width:44px;height:44px}.main{max-width:1360px}.main>h1{color:#253d73}.main>.eyebrow{color:#aa355b}.page-intro{max-width:780px;font-size:16px;line-height:1.7}.primary{border-radius:16px;box-shadow:0 4px 0 #1744aa;font-size:15px}.secondary{border-radius:15px;font-size:14px;background:#fff;box-shadow:0 3px 0 #e8eef8}.primary:hover{background:#164bc8}.panel,.board,.journey{box-shadow:0 7px 24px #243d6f05}.panel{border-radius:27px}.welcome{background:#e4eeff;border:1px solid #cddcfa}.welcome-copy .pill{background:#fff1b8;border-color:#f0d681;color:#71521a}.day-card{border:1px solid #edc750;box-shadow:0 5px 0 #f2e5a8}.activity-card{border:1px solid color-mix(in srgb,var(--accent) 20%,white);background:linear-gradient(145deg,white 10%,var(--tint));box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 12%,white)}.activity-card .art-symbol{box-shadow:inset 0 2px 0 #ffffffa8,0 5px 0 color-mix(in srgb,var(--accent) 17%,white);border:1px solid color-mix(in srgb,var(--accent) 14%,white)}.activity-card p{font-size:14px}.family-card{background:#dff3e9;border-color:#c0e2d1}.family-card h3{color:#23694f}.journey{background:#fffdf5;border-color:#eee3be}.lesson-card:nth-child(4n+2){background:#f1faf5;border-color:#cce8d8}.lesson-card:nth-child(4n+2) .lesson-symbol{background:#d9f1e3;color:#216e4e}.lesson-card:nth-child(4n+3){background:#fff9e9;border-color:#ebdfbb}.lesson-card:nth-child(4n+3) .lesson-symbol{background:#ffedb4;color:#875b13}.lesson-card:nth-child(4n+4){background:#fff2f5;border-color:#f0d4dc}.lesson-card:nth-child(4n+4) .lesson-symbol{background:#ffdfE8;color:#aa3c5d}.lesson-card p{font-size:14px}.host{background:#e0edff;border:1px solid #c4d8f8}.host p{font-size:14px}.host img{border:4px solid white}.board{border:1px solid #d9e4f7;box-shadow:0 7px 0 #e7edf9}.palette{background:#f7f9fd;border:1px solid #e1e7f0;padding:15px;border-radius:23px;width:fit-content;max-width:100%;margin:20px auto}.swatch{box-shadow:0 3px 0 #bfc8d8,0 0 0 1px #bfc8d8}.swatch.selected{box-shadow:0 0 0 3px #253d73,0 5px 0 #c8d4e7}.color-stage{border:2px solid #e1d6f0;box-shadow:0 5px 0 #f0eafa}.canvas-toolbar .primary{background:#c73f6b;box-shadow:0 4px 0 #9c2b50}.art-overview{grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);align-items:start;gap:24px}.art-feature{padding:26px;background:#ffe7ee;border:1px solid #efc9d5;box-shadow:0 6px 0 #f0d8e1;display:flex;align-items:center;gap:25px;margin:0;min-height:335px}.art-paper{background:white;border:1px solid #f0dce2;padding:12px;flex:1 1 50%;border-radius:22px;box-shadow:0 7px 18px #8642570d;transform:rotate(-3deg)}.art-paper img{display:block;width:100%!important;height:auto!important;aspect-ratio:1;object-fit:contain}.art-feature-copy{flex:1 1 50%;min-width:0}.art-feature h2{font-size:30px;color:#8d3050;line-height:1.2}.art-feature p{color:#774d61;font-size:15px;line-height:1.7}.art-feature .primary{background:#c73f6b;box-shadow:0 4px 0 #982448;padding:14px 19px;white-space:normal}.art-feature .primary:hover{background:#b5315c}.art-family{padding:0;overflow:hidden;background:#e2f3e9;border:1px solid #c3e3d0;margin:0}.family-photo{display:block;width:100%;height:150px;object-fit:cover;object-position:center 32%;border-bottom:4px solid #fff}.art-family-copy{padding:23px}.art-family h2{font-size:25px;color:#25624b}.art-family .eyebrow{color:#297452}.art-family p{font-size:14px;line-height:1.75}.art-family .secondary{color:#245f48;border-color:#b9d8c7;box-shadow:0 3px 0 #c8e3d3}.art-family .flow-note{font-size:12px;color:#4a695a;margin-top:17px}.empty-state{background:#fff9e7;border:2px dashed #e6ca76;padding:32px 22px}.empty-state h3{color:#7f5a15}.empty-state p{margin-bottom:0;color:#78613b;font-size:14px}.gallery figure{border:1px solid #edcbd5;background:#fff4f7;box-shadow:0 4px 0 #f4e1e8}.product:nth-child(2){background:#fff7e6;border-color:#ecdbb7}.product:nth-child(3){background:#edf8f1;border-color:#cde5d6}.parent-tabs .chip{min-height:44px}.parent-grid .stat:nth-child(2){background:#fff4d5;border-color:#ead9a7}.parent-grid .stat:nth-child(3){background:#ffeaf0;border-color:#edcbd6}
@media(min-width:1500px){.art-feature{min-height:380px}.art-family .family-photo{height:165px}.art-feature h2{font-size:34px}}
@media(max-width:1100px){.art-overview{grid-template-columns:1fr}.art-feature{min-height:0}.art-paper{max-width:290px}.art-family{display:grid;grid-template-columns:34% 1fr}.family-photo{height:100%;min-height:235px;border-bottom:0;border-right:4px solid white}.art-family-copy{padding:24px}.art-feature h2{font-size:30px}}
@media(max-width:650px){.brand{font-size:20px}.brand small{font-size:8px;max-width:none;letter-spacing:.7px}.mobile-logo{display:flex}.brandmark{min-width:34px;width:34px;height:37px}.topbar{padding:12px 15px;gap:12px}.top-actions{width:100%;justify-content:space-between}.age-control{flex:1;max-width:290px}.age-control button{flex:1;font-size:13px;min-height:40px}.sidebar{background:#fff;box-shadow:0 -4px 20px #203b6b08;height:calc(72px + env(safe-area-inset-bottom,0px))}.nav{margin:0;gap:0}.nav button,.nav button.active,.nav button[data-nav="art"].active{border:0;border-radius:0;box-shadow:none;background:white;font-size:11px;padding:8px 3px;position:relative}.nav button.active{color:#235bdd;background:#edf3ff}.nav button[data-nav="art"].active{color:#b72f5b;background:#fff0f5}.nav button.active .icon{color:inherit}.app-shell{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}.art-feature{padding:20px;gap:19px;display:block}.art-paper{width:80%;max-width:260px;margin:0 auto 23px;padding:10px}.art-feature h2{font-size:29px}.art-feature-copy p{font-size:14px}.art-feature .primary{width:100%;font-size:15px}.art-family{display:block}.family-photo{height:160px;min-height:0;border-right:0;border-bottom:4px solid white}.art-family-copy{padding:22px}.art-overview{gap:21px}.activity-card p{font-size:12px}.lesson-card p{font-size:12px}.page-intro{font-size:15px}.main>.eyebrow{font-size:11px}.empty-state{padding:27px 20px}.footer{font-size:11px}.palette{gap:12px;padding:13px}.swatch{width:44px;height:44px}.art-family p{font-size:14px}}
}

@media screen {
  .brand-banner { margin: 0 0 28px; overflow: hidden; border-radius: 28px; background: #b9b8ff; box-shadow: 0 8px 24px rgba(87,85,179,.12); }
  .brand-banner img { display: block; width: 100%; height: clamp(140px,18vw,230px); object-fit: contain; background: linear-gradient(110deg,#aaa2f5,#99b5ff,#b7a8f2); }
  @media (max-width: 640px) { .brand-banner { margin-bottom: 22px; border-radius: 20px; } .brand-banner img { height: auto; aspect-ratio: 2048 / 683; } }
}
@media print { .brand-banner { display: none; } }

/* Playful garden direction: cyan, sunshine and candy-colored learning cards. */
@media screen {
:root{--blue:#087fbe;--ink:#174f78;--muted:#4c667b;--bg:#f4fbff;--yellow:#ffda48}
body{background:#f4fbff}.topbar{background:#fff;border-bottom-color:#d9edf7}.main{max-width:1420px}
body[data-page="home"] .main{background:linear-gradient(#e4f6ff 0,#fff 480px);border-radius:0 0 45px 45px}
.brand-banner{max-width:430px;margin:0 auto 22px;border-radius:24px;box-shadow:0 5px 0 #dce6fa}.brand-banner img{height:116px;width:100%;object-fit:cover}
.heading-row{margin-bottom:22px}.heading-row h1{color:#185f91;font-size:clamp(30px,3vw,43px)}.sunny-word{color:#a76a00}.pink-word{color:#d53478}.heading-row p{font-size:16px}.eyebrow{font-size:12px;color:#0873ac}.heading-row>.pill{border:0;background:#fff2af;color:#66520d}
.welcome-grid{grid-template-columns:minmax(0,1fr) 230px;gap:22px}.welcome{background:white;border:2px solid #d5edf9;border-radius:36px 65px 36px 36px;box-shadow:0 7px 0 #dff0f8;grid-template-columns:44% 56%;min-height:310px}.welcome-copy{padding:28px 0 28px 28px}.welcome h2{color:#185f91;font-size:34px}.welcome p{font-size:16px}.welcome-photo{mask-image:none;border-radius:45% 0 0 12%;min-height:310px;object-position:center}.welcome-copy .pill{font-size:12px;background:#e7f7ff;border:0;color:#166089}.welcome .primary{background:#ffdb45;color:#24495b;box-shadow:0 4px 0 #e7b92e;border-radius:30px;font-size:15px}.welcome .primary:hover{background:#ffe570}
.day-card{background:#fff3b9;border:2px solid #ffe788;border-radius:28px 28px 50px 28px;padding:24px;box-shadow:0 6px 0 #f7e6ab}.day-number{color:#a77803}.day-card h3{color:#72531c}.day-card .secondary{border-radius:25px;border:0;color:#685015}
.activities{gap:20px}.activity-card{padding:24px;text-align:center;border:2px solid white;border-radius:30px;box-shadow:0 6px 0 #dceaf1;min-height:240px}.activity-card:nth-child(1){background:#fff1b8;--accent:#986700}.activity-card:nth-child(2){background:#dff3ff;--accent:#176d9e}.activity-card:nth-child(3){background:#ffe2ef;--accent:#b6346b}.activity-card:nth-child(4){background:#e8f4ce;--accent:#47752e}.activity-card .art-symbol{margin:0 auto 20px;width:88px;height:88px;border-radius:26px;font-size:44px;background:#ffffffb8;color:var(--accent);box-shadow:0 5px 0 #0000000b;border:2px solid white;transform:rotate(-5deg)}.activity-card:nth-child(even) .art-symbol{transform:rotate(5deg)}.activity-card h3{color:#195677;font-size:22px}.activity-card p{font-size:14px;color:#4a6071;padding:0}.activity-card .arrow{color:var(--accent)}.activity-card:hover{transform:translateY(-5px);box-shadow:0 10px 0 #dceaf1}
.section-head h2{color:#195f90}.bottom-grid{background:#078dc9;padding:26px;border-radius:42px 30px 45px 25px;gap:22px;margin-top:32px}.journey{border:0;background:white}.family-card{padding:0;overflow:hidden;background:#eaf8ff;border:0;display:grid;grid-template-columns:40% 1fr;gap:20px}.family-card>div{padding:24px 22px 24px 0}.garden-friends{width:100%;height:100%;min-height:240px;object-fit:cover;object-position:67% center}.family-card h3{color:#185f91}.family-card .subtle{font-size:14px}.side-note{background:#fff1b1;border:0;border-radius:25px}.nav button.active{background:#0787c7;box-shadow:0 4px 0 #076da3}.nav button[data-nav="art"].active{background:#d13c7e}.brandmark{background:#0587c8}.brand em{color:#d83f82}.primary{background:#087fbe;box-shadow:0 4px 0 #056497}.primary:hover{background:#076ba1}.lesson-card{border-radius:26px}.board{border-color:#cceaf7;box-shadow:0 7px 0 #dfedf5}.art-feature{border-radius:34px;background:#ffe5f0}.art-family{border-radius:34px;background:#eaf6d8}.empty-state{background:#fff5c7}.footer{font-size:12px}
@media(max-width:1100px){.welcome-grid{grid-template-columns:1fr}.day-card{display:none}.welcome h2{font-size:30px}.activities{gap:14px}.activity-card{padding:20px 14px}.bottom-grid{padding:20px}.family-card{grid-template-columns:35% 1fr}}
@media(max-width:650px){.main{padding:20px 16px}.brand-banner{max-width:285px;margin-bottom:22px}.brand-banner img{height:auto;aspect-ratio:3/1}.heading-row h1{font-size:31px}.heading-row p{font-size:14px}.welcome{grid-template-columns:1fr;min-height:0;border-radius:28px}.welcome-copy{padding:24px;order:1}.welcome h2{font-size:29px}.welcome h2 br{display:none}.welcome p{font-size:14px;max-width:none}.welcome p br{display:none}.welcome-photo{height:155px;min-height:155px;border-radius:0;object-position:center 35%}.welcome .primary{width:100%;min-height:50px;font-size:15px}.welcome-copy .pill{font-size:11px}.activities{gap:14px}.activity-card{min-height:220px;padding:20px 12px}.activity-card .art-symbol{width:70px;height:70px;font-size:37px;margin-bottom:16px}.activity-card h3{font-size:21px}.activity-card p{font-size:14px}.section-head{gap:10px}.section-head h2{font-size:25px}.text-btn{font-size:14px}.bottom-grid{margin:28px -4px 0;padding:18px;border-radius:30px}.family-card{grid-template-columns:1fr;gap:0}.garden-friends{height:150px;min-height:0;object-position:center 60%}.family-card>div{padding:22px}.nav button.active{box-shadow:none;background:#e6f6ff;color:#0878b3}.nav button[data-nav="art"].active{background:#ffe9f2;color:#b8316c}.nav button.active .icon{color:inherit}.top-actions .round{width:44px;height:44px;min-height:44px}.age-control button{min-height:44px}.lesson-card p{font-size:14px}.art-family .flow-note{font-size:14px}}
}
@media screen {
:root{--blue:#234ee9;--ink:#182c68;--muted:#4b587d;--bg:#f5f7ff}
body{background:#f5f7ff}body[data-page="home"] .main{background:transparent}.main{padding-top:22px}.brand-banner{max-width:320px;margin:0 0 20px;box-shadow:none}.brand-banner img{height:90px}.heading-row h1{color:#192d6b}.sunny-word{color:#b26c00}.pink-word{color:#d82370}.heading-row>.pill{background:#ffde45;color:#504100}.heading-row p{color:#4b587d}
.cast-banner{display:grid;grid-template-columns:38% 62%;background:#244be7;border-radius:32px;overflow:hidden;box-shadow:0 9px 0 #cfdbff;margin-bottom:35px;isolation:isolate}.cast-copy{padding:32px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.cast-copy .pill{background:#ffffff20;border:1px solid #ffffff50;color:white;font-size:12px}.cast-copy h2{color:white;font-size:clamp(30px,3vw,46px);margin:20px 0 14px}.cast-copy p{color:#fff;font-size:16px;line-height:1.7}.cast-copy .primary{background:#ffdf3c;color:#1b2850;border:2px solid #fff19c;box-shadow:0 5px 0 #b58b00;border-radius:18px;min-height:54px;font-size:16px;width:100%}.cast-copy .primary:hover{background:#ffed7d}.cast-visual{position:relative;min-width:0;background:#bde9ff}.cast-visual img{display:block;width:100%;height:100%;min-height:350px;object-fit:cover;object-position:60% center}.cast-caption{position:absolute;bottom:20px;right:20px;background:white;color:#1d3874;font-weight:800;border-radius:18px;padding:10px 20px;box-shadow:0 4px 0 #1a295b25}.cast-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.cast-tabs button{font-size:12px;font-weight:700;min-height:44px;padding:8px 12px;border:1px solid #ffffff70;color:white;border-radius:13px}.cast-tabs button[aria-pressed="true"]{background:white;color:#183ab3;border-color:white}.cast-banner[data-scene="1"]{background:#007c81}.cast-banner[data-scene="2"]{background:#b52870}
.activities{gap:18px}.activity-card{border:2px solid #fff;border-radius:25px;text-align:left;padding:23px;box-shadow:0 7px 0 #cbd5f1;position:relative}.activity-card:nth-child(1){background:#244ce8;--accent:#fff}.activity-card:nth-child(2){background:#00858a;--accent:#fff}.activity-card:nth-child(3){background:#ffce35;--accent:#4b3700}.activity-card:nth-child(4){background:#cb3074;--accent:#fff}.activity-card h3,.activity-card p,.activity-card .arrow{color:#fff}.activity-card:nth-child(3) h3,.activity-card:nth-child(3) p,.activity-card:nth-child(3) .arrow{color:#4b3700}.activity-card .art-symbol{margin:0 0 18px;background:white;color:#2142b0;width:76px;height:76px;box-shadow:0 5px 0 #00000020;transform:none}.activity-card:nth-child(even) .art-symbol{transform:none}.activity-card:nth-child(2) .art-symbol{color:#007276}.activity-card:nth-child(3) .art-symbol{color:#785200}.activity-card:nth-child(4) .art-symbol{color:#bd2868}.activity-card .arrow{background:#ffffff24;border-radius:50%;padding:7px;width:38px;height:38px}.activity-card:hover{box-shadow:0 10px 0 #bbc9ec}.activity-card h3{font-size:23px}.activity-card p{font-size:14px}.primary{background:#244ce8;box-shadow:0 5px 0 #1732a8;border:1px solid #ffffff40;min-height:50px}.secondary{border:2px solid #b6c7ef;color:#2445b5;background:white;min-height:48px}.text-btn{font-weight:800;color:#2347c7}.nav button.active{background:#244ce8;box-shadow:0 4px 0 #1834ab}.nav button[data-nav="art"].active{background:#c62b70}.section-head h2{color:#192d6b}.bottom-grid{background:#243ed0}.art-feature{background:#ffdaea;border:2px solid #f3a8c6}.art-feature .primary{background:#be2166;box-shadow:0 5px 0 #831646}.art-family{background:#d8f4e8}.lesson-card{border-width:2px}.lesson-card .lesson-symbol{box-shadow:0 4px 0 #c8d8f0}.brandmark{background:#244ce8}.age-control button.selected{background:#ffda37;color:#3f350a;box-shadow:0 3px 0 #d3ac16}
@media(max-width:1100px){.cast-banner{grid-template-columns:43% 57%}.cast-copy{padding:25px}.cast-copy h2{font-size:34px}.cast-tabs{gap:6px}.cast-tabs button{font-size:11px;padding:7px}.cast-visual img{min-height:370px}}
@media(max-width:650px){.brand-banner{max-width:230px;margin:0 auto 20px}.brand-banner img{height:auto}.cast-banner{grid-template-columns:1fr;border-radius:25px;margin-bottom:28px}.cast-visual{order:0}.cast-visual img{height:auto;aspect-ratio:16/9;min-height:0;object-fit:cover}.cast-copy{order:1;padding:23px}.cast-copy h2{font-size:32px;margin:14px 0 10px}.cast-copy h2 br{display:none}.cast-copy p{font-size:14px}.cast-caption{bottom:12px;right:12px;font-size:13px;padding:7px 13px}.cast-tabs{width:100%;margin-top:19px;gap:6px}.cast-tabs button{flex:1;font-size:12px;padding:8px 5px}.activities{gap:14px}.activity-card{padding:19px 14px;min-height:235px}.activity-card h3{font-size:21px}.activity-card .art-symbol{width:64px;height:64px;font-size:34px}.activity-card p{font-size:14px}.nav button.active{background:#e8eeff;color:#244ce8;box-shadow:none}.nav button[data-nav="art"].active{background:#ffe1ef;color:#b31c5a}.cast-copy .primary{font-size:16px}}
}
@media screen and (min-width:651px){.cast-visual{display:flex;align-items:center;background:#dbe8ff}.cast-visual img{height:auto;min-height:0;object-fit:contain}.cast-banner[data-scene="1"] .cast-visual{background:#ccf5ef}.cast-banner[data-scene="2"] .cast-visual{background:#ffe0ed}}

/* Master Visual direction: a bright, structured discovery board. */
@media screen {
body[data-page="library"]{background-color:#eef3ff;background-image:linear-gradient(#cedafa75 1px,transparent 1px),linear-gradient(90deg,#cedafa75 1px,transparent 1px);background-size:32px 32px}
body[data-page="library"] .main{padding-top:30px}
body[data-page="library"] .main>.eyebrow{display:inline-block;padding:7px 13px;border-radius:10px;background:#ffdf47;color:#514004;letter-spacing:1.5px;font-size:12px;box-shadow:0 3px 0 #dfb723;margin-bottom:18px}
body[data-page="library"] .main>h1{color:#203bb0;font-size:clamp(34px,4vw,48px);text-shadow:0 3px 0 white}
body[data-page="library"] .page-intro{color:#33446d;font-size:16px;max-width:750px}
body[data-page="library"] .filters{display:flex;gap:12px;flex-wrap:wrap;background:#fff;padding:13px;border:2px solid #dbe4ff;box-shadow:0 5px 0 #dce4f5;border-radius:23px;margin:25px 0 30px;width:fit-content;max-width:100%}
body[data-page="library"] .chip{background:#f0f3ff;border:2px solid #dce4fa;color:#314581;font-size:15px;font-weight:800;padding:11px 19px;border-radius:15px;min-height:48px;box-shadow:0 3px 0 #dce3f4}
body[data-page="library"] .chip[data-filter="number"]{background:#e9edff;color:#2945bf;border-color:#ccd6ff}
body[data-page="library"] .chip[data-filter="letter"]{background:#dcf5f0;color:#006a62;border-color:#b6e5dc}
body[data-page="library"] .chip[data-filter="word"]{background:#ffe3ee;color:#a61f58;border-color:#f5bcd2}
body[data-page="library"] .chip[data-filter="trace"]{background:#fff0b1;color:#745200;border-color:#ebd47c}
body[data-page="library"] .chip.selected{background:#264bea;color:#fff;border-color:#264bea;box-shadow:0 4px 0 #1631a2;transform:translateY(-1px)}
body[data-page="library"] .lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
body[data-page="library"] .lesson-card{--tile:#3155ed;--tile-dark:#2037a7;--tile-tint:#e8edff;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:3px solid white;border-radius:27px;background:var(--tile);box-shadow:0 7px 0 color-mix(in srgb,var(--tile-dark) 30%,#dce4f4);position:relative;overflow:hidden;min-height:244px;text-align:left;isolation:isolate}
body[data-page="library"] .lesson-card:nth-child(4n+2){--tile:#00867e;--tile-dark:#006159;--tile-tint:#dff5ee}
body[data-page="library"] .lesson-card:nth-child(4n+3){--tile:#ffcc34;--tile-dark:#815300;--tile-tint:#fff3c9}
body[data-page="library"] .lesson-card:nth-child(4n+4){--tile:#d7347d;--tile-dark:#982051;--tile-tint:#ffe5ef}
body[data-page="library"] .lesson-symbol{height:134px;width:100%;margin:0;border:0;border-radius:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#ffffff25,transparent 65%);font:900 76px/1 'Nunito','Be Vietnam Pro',sans-serif;color:#fff;text-shadow:0 5px 0 var(--tile-dark);box-shadow:none;letter-spacing:1px;padding:12px 15px}
body[data-page="library"] .lesson-card:nth-child(4n+3) .lesson-symbol{color:#533b00;text-shadow:0 4px 0 #fff0ab}
body[data-page="library"] .lesson-copy{display:block;flex:1;background:white;padding:20px 52px 21px 20px;border-radius:23px 23px 0 0;min-width:0}
body[data-page="library"] .lesson-copy h3{color:#213575;font-size:22px;line-height:1.25;margin:0 0 8px}
body[data-page="library"] .lesson-copy p{font-size:14px;color:#4b5c7b;line-height:1.6}
body[data-page="library"] .lesson-play{position:absolute;right:13px;bottom:22px;width:35px;height:35px;display:grid;place-items:center;background:var(--tile);border-radius:12px;color:white;box-shadow:0 3px 0 var(--tile-dark)}
body[data-page="library"] .lesson-play .icon{width:18px;height:18px}
body[data-page="library"] .lesson-card:nth-child(4n+3) .lesson-play{color:#513b00}
body[data-page="library"] .lesson-card:hover{transform:translateY(-5px);box-shadow:0 12px 0 color-mix(in srgb,var(--tile-dark) 25%,#dce4f4)}
body[data-page="library"] .lesson-card:focus-visible{outline:4px solid #182c68;outline-offset:5px}
body[data-page="library"] .done-label{background:#dbf6e6;border-radius:8px;padding:5px 8px;font-size:12px;color:#1c6040;display:inline-block;margin-top:10px}
body[data-page="library"] .flow-note{background:#ffffffdf;border:1px solid #d6e1f7;border-radius:14px;padding:15px 18px;font-size:14px;line-height:1.65;margin-top:27px}
@media(max-width:1100px){body[data-page="library"] .lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:650px){body[data-page="library"] .main{padding:24px 16px}body[data-page="library"] .main>h1{font-size:34px}body[data-page="library"] .page-intro{font-size:14px}body[data-page="library"] .filters{gap:8px;padding:10px;margin:22px 0 25px;border-radius:19px;width:100%}body[data-page="library"] .chip{padding:9px 13px;font-size:14px;min-height:46px;flex:1 0 auto}body[data-page="library"] .lesson-grid{gap:17px 12px}body[data-page="library"] .lesson-card{border-radius:23px;min-height:228px}body[data-page="library"] .lesson-symbol{height:115px;font-size:62px}body[data-page="library"] .lesson-copy{padding:17px 12px 49px;border-radius:19px 19px 0 0}body[data-page="library"] .lesson-copy h3{font-size:20px}body[data-page="library"] .lesson-copy p{font-size:14px}body[data-page="library"] .lesson-play{bottom:12px;right:12px;width:30px;height:30px;border-radius:10px}body[data-page="library"] .flow-note{font-size:13px}}
@media(max-width:350px){body[data-page="library"] .lesson-grid{grid-template-columns:1fr}}
}

/* Branded navigation, shared across every route. */
@media screen {
.sidebar{width:252px;padding:24px 16px 20px;background:linear-gradient(180deg,#e9eeff 0%,#f7f9ff 38%,#eef3ff 100%);border-right:2px solid #dce4fb;box-shadow:5px 0 24px #2446a507;overflow-y:auto;gap:0}
.app-shell{margin-left:252px}
.sidebar .sidebar-brand{display:flex;flex-direction:column;gap:12px;padding:0 0 23px;border-bottom:1px solid #d6dff7;text-align:center}
.sidebar-brand img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:20px;box-shadow:0 5px 0 #cbd5f7}
.sidebar-brand>span{font:900 12px/1.5 'Nunito',sans-serif;letter-spacing:1.2px;color:#2b458c}
.sidebar .nav{margin:24px 0 30px;gap:13px}
.sidebar .nav button{--nav-color:#244ce8;--nav-pale:#e6ecff;display:flex;align-items:center;gap:13px;background:#ffffffd9;border:2px solid #e1e7f7;padding:12px 11px;border-radius:19px;min-height:76px;color:#314575;font-size:15px;font-weight:800;box-shadow:0 4px 0 #dde4f5;line-height:1.45;position:relative}
.sidebar .nav button:nth-child(2){--nav-color:#007a73;--nav-pale:#d6f4ec}
.sidebar .nav button:nth-child(3){--nav-color:#c3296c;--nav-pale:#ffe0ed}
.sidebar .nav button:nth-child(4){--nav-color:#7342bf;--nav-pale:#eee2ff}
.sidebar .nav button:nth-child(5){--nav-color:#875900;--nav-pale:#ffedb2}
.sidebar .nav-icon{display:grid;place-items:center;width:43px;height:45px;flex:0 0 43px;background:var(--nav-pale);border:1px solid #fff;border-radius:13px;box-shadow:0 3px 0 color-mix(in srgb,var(--nav-color) 18%,white)}
.sidebar .nav button .nav-icon .icon{color:var(--nav-color);width:25px;height:25px;stroke-width:2.2}
.sidebar .nav-label{min-width:0;flex:1}
.sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active{background:var(--nav-color);border-color:var(--nav-color);color:white;box-shadow:0 5px 0 color-mix(in srgb,var(--nav-color) 75%,#102052)}
.sidebar .nav button.active .nav-icon{background:#fff;border-color:white;box-shadow:0 3px 0 #00000020}
.sidebar .nav button.active .nav-icon .icon{color:var(--nav-color)}
.sidebar .nav button:hover:not(.active){background:white;border-color:var(--nav-color);transform:translateY(-2px)}
.sidebar .nav button:focus-visible{outline:3px solid #18346d;outline-offset:5px}
.sidebar .side-note{margin-top:auto;background:#ffdf55;border:2px solid #fff0a5;border-radius:22px;padding:18px;color:#534113;box-shadow:0 5px 0 #e8cd75;font-size:13px}
.sidebar .side-note strong{font-size:19px;color:#423408;line-height:1.4}.sidebar .side-note>.icon{color:#ae255b}
.sidebar .signature{font-size:11px;color:#485a83;padding:0 5px;margin-top:22px;line-height:1.8}.sidebar .signature .tag{display:inline-block;margin-top:5px;background:#fff;color:#425993}
@media(min-width:651px) and (max-height:780px){.sidebar{padding-top:18px}.sidebar .sidebar-brand{padding-bottom:16px}.sidebar .nav{margin:18px 0 23px;gap:11px}.sidebar .nav button{min-height:66px;padding:9px 11px}.sidebar .side-note{padding:14px;font-size:12px}.sidebar .side-note strong{font-size:17px}.sidebar .signature{margin-top:16px}}
@media(min-width:651px) and (max-width:1000px){.sidebar{width:218px;padding-left:12px;padding-right:12px}.app-shell{margin-left:218px}.sidebar .nav button{font-size:14px;gap:10px;padding:11px 9px}.sidebar .nav-icon{width:38px;height:42px;flex-basis:38px}}
@media(max-width:650px){.sidebar{width:auto;inset:auto 0 0;height:calc(84px + env(safe-area-inset-bottom,0px));padding:0 5px env(safe-area-inset-bottom,0px);background:#fff;border:0;border-top:2px solid #dce4fa;box-shadow:0 -6px 24px #233b7412;overflow:visible}.app-shell{margin-left:0;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}.sidebar .sidebar-brand,.sidebar .side-note,.sidebar .signature{display:none}.sidebar .nav{margin:0;gap:3px;height:82px;align-items:stretch;display:flex;flex-direction:row}.sidebar .nav button,.sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:1;min-width:0;min-height:78px;padding:7px 2px 5px;font-size:10px;line-height:1.25;border:0;border-radius:14px;background:transparent;box-shadow:none;color:#4a5672}.sidebar .nav-icon{height:33px;width:37px;flex:0 0 33px;border-radius:10px;box-shadow:0 2px 0 color-mix(in srgb,var(--nav-color) 16%,white)}.sidebar .nav button .nav-icon .icon{width:21px;height:21px}.sidebar .nav-label{flex:0 0 auto;max-width:78px;text-align:center}.sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active{color:var(--nav-color);background:var(--nav-pale)}.sidebar .nav button.active .nav-icon{background:var(--nav-color);border-color:var(--nav-color);box-shadow:0 3px 0 color-mix(in srgb,var(--nav-color) 75%,#102052)}.sidebar .nav button.active .nav-icon .icon{color:white}.sidebar .nav button:hover:not(.active){transform:none;border:0;background:var(--nav-pale)}}
}
@media screen{
.games-invite{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(120deg,#3929b4,#713dd4);color:white;border:3px solid white;border-radius:26px;padding:24px;margin:27px 0;box-shadow:0 6px 0 #d7d1f3}.games-invite h2,.games-invite .eyebrow{color:white}.games-invite p{font-size:14px;margin:0;color:#f2edff}.games-invite .primary{background:#ffe14c;color:#382456;box-shadow:0 4px 0 #b39121;flex-shrink:0}.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.game-entry{text-align:left;padding:0;overflow:hidden;border:3px solid white;border-radius:27px;box-shadow:0 7px 0 #d8d9f0;color:#fff;background:#6232c8;display:flex;flex-direction:column}.game-entry-1{background:#2458db}.game-entry-2{background:#007b78}.game-entry img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.game-entry-copy{display:flex;flex-direction:column;flex:1;padding:24px}.game-entry h2{font-size:27px;margin-top:15px;color:white}.game-entry p{font-size:15px}.game-entry .tag{align-self:flex-start;background:#ffffffed;color:#2d3770}.game-launch{background:#ffdf46;color:#322750;border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-weight:800;margin-top:auto}.kid-game-board{max-width:850px;margin:auto;padding:32px;text-align:center;border:3px solid #e1d7ff;box-shadow:0 7px 0 #d9d2f3}.game-instruction h2{color:#38258d}.game-progress{margin:20px 0;color:#596684;font-weight:700}.kid-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:560px;margin:auto}.kid-game-grid.game-pairs{grid-template-columns:repeat(4,minmax(0,1fr))}.kid-game-grid.game-young{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}.game-cell{position:relative;min-height:95px;background:#eee8ff;color:#4e2bb0;border:3px solid #c8b6f1;border-radius:22px;font:900 48px/1.3 Nunito,sans-serif;box-shadow:0 5px 0 #bba8e3}.game-cell.game-open{background:#ffe485;color:#5b4200;border-color:#e9c450;opacity:1}.game-cell.game-matched{background:#dcf6e8;color:#1b654b;border-color:#8fceae;opacity:1;box-shadow:0 3px 0 #aad4be}.game-cell small{position:absolute;right:9px;top:5px;font-size:18px}.game-feedback{min-height:55px;margin:26px 0 12px;background:#f0ecff;padding:14px;border-radius:15px;color:#49327e}.game-finish{padding:35px 0}.game-big{display:inline-grid;place-items:center;background:#ffdf46;width:90px;height:90px;border-radius:28px;margin-bottom:24px}.game-big .icon{height:50px;width:50px;color:#72500c}.game-finish button{margin:8px}.game-cell:focus-visible{outline:4px solid #242a60;outline-offset:5px}
@media(max-width:1000px){.games-grid{grid-template-columns:1fr}.game-entry{display:grid;grid-template-columns:42% 58%}.game-entry img{height:100%;object-fit:cover}.game-entry-copy{padding:23px}}
@media(max-width:650px){.games-invite{display:block;padding:22px}.games-invite .primary{width:100%;margin-top:18px}.game-entry{display:flex}.game-entry img{height:auto}.kid-game-board{padding:24px 13px}.kid-game-grid,.kid-game-grid.game-pairs{gap:11px;grid-template-columns:repeat(2,minmax(0,1fr))}.game-cell{min-height:85px;font-size:43px}.game-instruction h2{font-size:25px}.backbar{flex-wrap:wrap}.game-entry h2{font-size:27px}}
}
/* Supplied character collection: colorful game banners and small in-game guides. */
@media screen{
.games-invite{position:relative;padding:22px;gap:22px}.invite-friend{width:85px;height:110px;object-fit:contain;background:white;border:3px solid #ffffff80;border-radius:22px;flex-shrink:0;box-shadow:0 5px 0 #26187955}.games-invite>div{flex:1;min-width:0}.game-welcome{display:flex;align-items:center;gap:22px;border-radius:25px;background:linear-gradient(110deg,#e9e2ff,#dcf6ff);border:2px solid white;padding:16px 26px;margin:22px 0 28px;box-shadow:0 5px 0 #d8def2}.game-welcome>img{display:block;width:83px;height:112px;object-fit:contain;background:white;border-radius:18px}.game-welcome h2{font-size:27px;color:#422793;margin-bottom:8px}.game-welcome p{color:#445a7f;font-size:15px;margin:0}.game-welcome .eyebrow{color:#6535a9;font-size:12px}.games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.game-entry{display:grid;grid-template-columns:minmax(0,1fr) 43%;min-height:290px;position:relative;padding:0;border:3px solid white;border-radius:29px;background:linear-gradient(120deg,#344fe8,#4093ee);box-shadow:0 7px 0 #c8d7ef;overflow:hidden}.game-entry-1{background:linear-gradient(120deg,#982a96,#d93f8b);box-shadow:0 7px 0 #edc9df}.game-entry-2{grid-column:1/-1;max-width:none;background:linear-gradient(120deg,#bd4e10,#ed872c);box-shadow:0 7px 0 #f1d4ba;grid-template-columns:minmax(0,1fr) 38%;min-height:265px}.game-entry .game-character{grid-column:2;grid-row:1;display:block;width:100%;height:100%;max-height:310px;aspect-ratio:auto;object-fit:contain;background:white;border-radius:24px 0 0 24px}.game-entry-2 .game-character{background:#ff7723;max-height:280px}.game-entry-copy{grid-column:1;grid-row:1;position:relative;padding:25px 20px;justify-content:center;min-width:0;z-index:1}.game-entry h2{font-size:29px;line-height:1.16;margin:17px 0 12px}.game-entry p{font-size:15px;line-height:1.65;margin-bottom:22px}.game-launch{font-size:15px;gap:8px;margin-top:auto;min-height:47px;padding:10px 13px}.game-guide{width:74px;height:92px;object-fit:contain;background:white;border:2px solid #ded4fa;border-radius:18px;float:left;margin:0 18px 8px 0}.game-instruction{max-width:560px;margin:auto;display:flow-root;text-align:left}.game-instruction h2{font-size:27px}.game-finish-friend{display:block;width:140px;height:180px;object-fit:contain;border-radius:24px;margin:0 auto 22px;border:3px solid #e7defa;background:white}
@media(max-width:1100px){.games-grid{grid-template-columns:1fr}.game-entry,.game-entry-2{grid-column:auto;grid-template-columns:minmax(0,1fr) 40%;min-height:270px}.game-entry .game-character{height:280px;max-height:none}.game-entry h2{font-size:30px}.game-entry-copy{padding:25px}}
@media(max-width:650px){.games-invite{display:grid;grid-template-columns:68px minmax(0,1fr);gap:16px;padding:19px}.invite-friend{width:68px;height:92px;border-radius:17px}.games-invite h2{font-size:25px}.games-invite .eyebrow{font-size:10px;letter-spacing:1px}.games-invite p{font-size:13px}.games-invite .primary{grid-column:1/-1;margin:0}.game-welcome{gap:15px;padding:15px;margin:20px 0 25px}.game-welcome>img{width:65px;height:90px}.game-welcome h2{font-size:23px}.game-welcome .eyebrow{font-size:10px;letter-spacing:1px}.game-welcome p{font-size:14px}.game-entry,.game-entry-2{display:grid;grid-template-columns:minmax(0,1fr) 42%;min-height:255px;border-radius:24px}.game-entry .game-character{height:100%;min-height:255px;max-height:300px;object-fit:contain;border-radius:20px 0 0 20px}.game-entry-copy{padding:20px 13px 20px 16px}.game-entry h2{font-size:25px;margin:13px 0 10px}.game-entry p{font-size:14px;margin-bottom:16px}.game-launch{font-size:14px;padding:10px;gap:4px}.game-launch .icon{width:19px;height:19px}.game-entry .tag{font-size:11px}.game-guide{width:60px;height:80px;margin-right:12px}.game-instruction h2{font-size:23px}.game-instruction .secondary{font-size:13px;padding:10px}.game-finish-friend{width:120px;height:160px}}
}
/* Compact, art-directed game cards: continuous backgrounds and clear hierarchy. */
@media screen{
body[data-page="games"]{background:#f5f4fc}body[data-page="games"] .main>h1{font-size:clamp(30px,3vw,40px);margin-bottom:10px}body[data-page="games"] .page-intro{margin-bottom:25px;max-width:580px;font-size:15px}.games-grid{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}.game-entry,.game-entry-2{--game-bg:#3562ed;background:var(--game-bg);border:0;box-shadow:0 5px 12px #1b326214;border-radius:25px;min-height:230px;height:auto;grid-template-columns:56% 44%;grid-column:auto;isolation:isolate;overflow:hidden}.game-entry-1{--game-bg:#b03a8a}.game-entry-2{--game-bg:#d06119}.game-entry .game-character{width:100%;height:100%;min-height:230px;max-height:none;object-fit:cover;object-position:right center;border-radius:0;background:var(--game-bg);mask-image:linear-gradient(90deg,transparent 0%,black 15%)}.game-entry-copy{padding:26px 0 25px 25px;justify-content:center;z-index:2}.game-entry h2{font-size:29px;line-height:1.18;letter-spacing:-.4px;margin:0 0 11px;color:white}.game-entry p{font-size:14px;line-height:1.55;color:#fff;margin:0 0 18px;max-width:235px}.game-launch{display:inline-flex;align-self:flex-start;flex-grow:0;justify-content:center;background:#fff;color:#2d3255;font-size:14px;font-weight:800;min-height:44px;border-radius:24px;padding:10px 17px;gap:11px;margin:0;box-shadow:0 3px 0 #00000015}.game-launch .icon{height:18px;width:18px}.game-entry:hover{transform:translateY(-3px);box-shadow:0 9px 17px #1b326222}.game-entry:focus-visible{outline:4px solid #252458;outline-offset:5px}
@media(max-width:1100px){.games-grid{grid-template-columns:1fr}.game-entry,.game-entry-2{grid-template-columns:58% 42%;min-height:220px}.game-entry .game-character{min-height:220px;max-height:260px}}
@media(max-width:650px){body[data-page="games"] .main{padding:22px 16px 30px}body[data-page="games"] .main>h1{font-size:31px}body[data-page="games"] .page-intro{font-size:14px;margin-bottom:21px}.games-grid{gap:16px}.game-entry,.game-entry-2{min-height:196px;grid-template-columns:57% 43%;border-radius:22px;box-shadow:0 4px 10px #25326412}.game-entry .game-character{min-height:196px;height:100%;max-height:235px;object-fit:cover;object-position:right center;border-radius:0}.game-entry-copy{padding:20px 0 20px 19px}.game-entry h2{font-size:24px;line-height:1.2;letter-spacing:-.3px;margin-bottom:9px}.game-entry p{font-size:13px;line-height:1.5;margin-bottom:15px;padding-right:2px}.game-launch{font-size:13px;min-height:44px;padding:10px 15px;gap:9px}.game-entry .game-launch .icon{width:17px;height:17px}body[data-page="games"] .flow-note{font-size:12px;line-height:1.6;margin-top:23px}}
@media(max-width:360px){.game-entry h2{font-size:22px}.game-entry-copy{padding-left:16px}.game-entry p{font-size:13px}.game-entry,.game-entry-2{grid-template-columns:58% 42%}}
}
/* New play companions and tactile play controls. */
.game-entry-3{--game-bg:#079393}.game-entry-4{--game-bg:#6843b5}
.game-options{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.game-options .chip{min-height:44px;font-size:15px}
.game-art-link{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff0cf;border-radius:24px;padding:24px;margin-top:24px}
.game-art-link h2{margin:0 0 8px}.game-art-link p{margin:0}
.game-cell.game-hint{outline:5px solid #eea817;outline-offset:3px;box-shadow:0 0 0 9px #fff2bf}
.count-fruit{display:flex;justify-content:center;flex-wrap:wrap;max-width:500px;margin:12px auto 25px;padding:18px;border:2px dashed #b9c9eb;border-radius:20px;font-size:36px;letter-spacing:6px;overflow-wrap:anywhere;display:block;text-align:center}
.count-fruit span{font-size:17px;letter-spacing:0}
.hide-cell{overflow:hidden;min-height:120px;background:#e1f7ee!important;color:#14756c!important}
.hide-cell img{width:100%;height:145px;object-fit:cover;object-position:right center;display:block;border-radius:16px}
.music-stage{max-width:580px;margin:auto;text-align:center}
.music-sequence{display:flex;justify-content:center;gap:12px;margin:18px 0}.music-sequence span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#ece7ff;color:#6040aa;font-size:22px;font-weight:800}.music-sequence .played{background:#d4f3e9;color:#156c58}
.music-keys{display:flex;gap:14px;margin:28px 0}.music-key{flex:1;min-width:0;min-height:145px;border:4px solid transparent;border-radius:22px;background:var(--note);color:white;box-shadow:0 7px 0 #24325b;font-size:28px;font-weight:900;transition:transform .15s}.music-key small{display:block;font-size:16px;margin-top:12px}.music-key:disabled{opacity:.75}.music-key.lit{opacity:1;border-color:#ffe137;outline:5px solid #ffe137;transform:translateY(-6px);box-shadow:0 10px 0 #24325b}.music-key:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 #24325b}
.friend-cheer{animation:friend-cheer .35s ease-out 1}@keyframes friend-cheer{50%{transform:translateY(-7px) rotate(-4deg)}}
.low-motion .friend-cheer{animation:none}.low-motion .music-key{transition:none}
.game-instruction .game-guide[src*="game-card"]{object-fit:cover;object-position:right center}
.art-overview .art-family{grid-column:1/-1}
@media(max-width:650px){.game-art-link{flex-direction:column;align-items:flex-start}.music-key{min-height:120px;font-size:24px}.music-keys{gap:12px}.hide-cell{min-height:100px}.hide-cell img{height:115px}.game-options{gap:7px}.game-entry p{font-size:14px}.game-launch{font-size:14px}}
@media(prefers-reduced-motion:reduce){.friend-cheer{animation:none}.music-key{transition:none}}