/* v9.2.31 Astor Kids Music lab. Cream-and-clay, light only. */
.mlab-w{margin:var(--s2,1.5rem) 0 calc(var(--s2,1.5rem)*1.6);max-width:44rem;color:#2b2f4a}
.ml-card{background:#fffaf1;border-radius:28px;padding:1.4rem;box-shadow:0 2px 0 #f0dfc4,0 10px 24px rgba(150,100,50,.14),inset 0 -6px 0 rgba(201,107,60,.08);text-align:center}
.ml-say{font-size:1.2rem;line-height:1.4;margin:.9rem 0 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ml-card>.ml-say:not(:has(span)){display:block}
.mlab-w button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ml-big{background:none;border:0;padding:0;position:relative;width:min(240px,70%)}
.ml-big svg{width:100%;height:auto;display:block}
.ml-hit{animation:mlhit .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes mlhit{0%{transform:scale(1)}30%{transform:scale(.92,1.06)}60%{transform:scale(1.05,.96)}100%{transform:scale(1)}}
.ml-drum .ml-hit .ml-skin{animation:mlskin .5s linear;transform-origin:100px 52px}
@keyframes mlskin{0%,100%{transform:scaleY(1)}20%{transform:scaleY(.6)}40%{transform:scaleY(1.3)}60%{transform:scaleY(.8)}80%{transform:scaleY(1.1)}}
.ml-waves{position:absolute;inset:0;pointer-events:none}
.ml-waves i{position:absolute;left:50%;top:30%;width:60px;height:60px;margin:-30px;border:4px solid #ff8a3d;border-radius:50%;opacity:0}
.ml-hit .ml-waves i{animation:mlwave .9s ease-out forwards}.ml-hit .ml-waves i:nth-child(2){animation-delay:.12s}.ml-hit .ml-waves i:nth-child(3){animation-delay:.24s}
@keyframes mlwave{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(3.4)}}
.ml-hum{display:flex;gap:1.2rem;align-items:center;text-align:left}
.ml-steps{margin:0;padding-left:1.4rem;font-size:1.2rem;line-height:1.5}
.ml-ear{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}
.ml-ear .ml-say{grid-column:1/-1}
.ml-bell{font-size:3.4rem;background:#fff;border:0;border-radius:50%;width:5.5rem;height:5.5rem;box-shadow:0 6px 0 #f0dfc4}
.ml-earpic{font-size:3.4rem}
.ml-air{height:2.6rem;position:relative}
.ml-air i{position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#ffc93c;opacity:.25}
.ml-air.ml-hit{animation:none}.ml-air.ml-hit i{animation:mlfly .8s ease-in forwards}.ml-air.ml-hit i:nth-child(2){animation-delay:.1s}.ml-air.ml-hit i:nth-child(3){animation-delay:.2s}
@keyframes mlfly{0%{left:0;opacity:1}100%{left:calc(100% - 14px);opacity:.2}}
.ml-fams{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:760px){.ml-fams{grid-template-columns:repeat(3,1fr)}}
.ml-fam{background:#fffaf1;border:0;border-radius:24px;padding:.8rem .8rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;box-shadow:0 2px 0 #f0dfc4,0 8px 18px rgba(150,100,50,.13)}
.ml-fam img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff!important;border-radius:18px}
.ml-fam b{font-family:Fraunces,Georgia,serif;font-size:1.35rem}
.ml-fam span{font-size:1rem;line-height:1.35}
.ml-beat{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ml-pulse{width:44px;height:44px;border-radius:50%;background:#e5583f}
.ml-pulse.ml-hit{animation:mlpulse .35s ease-out}
@keyframes mlpulse{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.ml-go,.ml-clear{background:#ffc93c;border:0;border-radius:999px;padding:.7rem 1.5rem;font-weight:700;font-size:1.15rem;box-shadow:0 4px 0 #d9a21c}
.ml-clear{background:#fff4e0;box-shadow:0 4px 0 #e8d3b0}
.ml-tap{width:9rem;height:9rem;border-radius:50%;border:0;background:#4a8dff;color:#fff!important;font-size:1.8rem;font-weight:800;box-shadow:0 8px 0 #2f63c0}
.ml-tap:active{transform:translateY(4px);box-shadow:0 4px 0 #2f63c0}
.ml-meter{display:flex;align-items:center;gap:.8rem;font-size:2.4rem}
.ml-meter input{flex:1;accent-color:#e5583f;height:2.4rem}
.ml-loud .ml-go{margin-top:1rem}
.ml-bs{display:flex;gap:1rem;justify-content:center}
.ml-bs button{flex:1;max-width:14rem;background:#fffaf1;border:0;border-radius:24px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;box-shadow:0 2px 0 #f0dfc4,0 8px 18px rgba(150,100,50,.13)}
.ml-bs span{font-size:3.2rem;line-height:1}
.ml-bs .ml-bear span{font-size:4.6rem}.ml-bs .ml-bird span{font-size:2.2rem}
.ml-bs b{font-size:1.2rem}
.ml-keys{display:flex;gap:6px;align-items:flex-end;height:11rem}
.ml-key{flex:1;height:var(--h);border:0;border-radius:14px 14px 10px 10px;background:var(--c);box-shadow:inset 0 -8px 0 rgba(0,0,0,.14);touch-action:manipulation}
.ml-comp .ml-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;width:100%}
.ml-cell{aspect-ratio:1;border:0;border-radius:9px;background:#f6ead6;min-width:0;padding:0}
.ml-cell.on{background:#8f7bff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.ml-cell.now{outline:3px solid #ffc93c}
.ml-row{display:flex;gap:.8rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.mlab-w *{animation:none!important;transition:none!important}}
.ml-credits{font-size:.8rem;line-height:1.4;color:#6b6f86;max-width:44rem;margin:2rem auto 1rem;padding:0 1rem;text-align:center}
.ml-comp{padding:1rem}.ml-hum img{flex:0 0 auto}
.mlab-w img[src*="pip.svg"]{background:transparent!important;border-radius:0}