/* Music Studio. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-music{--ms-wood:#c98d55;--ms-wood-d:#8a5a32;--ms-ink:#14102e;--ms-kick:#ff8f7f;--ms-snare:#7cbcff;--ms-clap:#f6c96c;--ms-hat:#62e3ab;--ms-bell:#ff9fd3}
.ms-n1{--c:#ef4444;--cd:#a92222}
.ms-n2{--c:#ff8a33;--cd:#b4560c}
.ms-n3{--c:#fbc531;--cd:#b88400}
.ms-n4{--c:#22c272;--cd:#11804a}
.ms-n5{--c:#1fc8d8;--cd:#0c8793}
.ms-n6{--c:#3b82f6;--cd:#1d4fc4}
.ms-n7{--c:#a259f5;--cd:#6d28c9}
.ms-n8{--c:#ff6fb5;--cd:#c23a7d}
.ms-songbook{display:none}

/* ---------- Top bar: tabs + sound ---------- */
.ms-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ms-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:22px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.ms-tab{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:8px 18px;border:0;border-radius:16px;background:transparent;color:var(--k-ink-2);font:800 1rem/1.15 "Manrope",Inter,sans-serif;cursor:pointer;transition:background .15s,color .15s}
.ms-tab svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-tab:hover{background:var(--k-surface-2);color:var(--k-ink)}
.ms-tab[aria-selected="true"]{background:linear-gradient(100deg,var(--k-violet),#c3a6ff);color:#120b33;box-shadow:0 6px 18px rgba(165,148,255,.35)}
.ms-tab:focus-visible,.ms-mute:focus-visible,.ms-song:focus-visible,.ms-echo-play:focus-visible,.ms-c:focus-visible,.ms-track:focus-visible,.ms-bar:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}
.ms-sound{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.ms-mute{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 10px;border-radius:999px;border:0;background:var(--k-surface-2);color:var(--k-ink);font:800 .92rem/1 "Manrope",Inter,sans-serif;cursor:pointer}
.ms-mute svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-mute .ms-spk{fill:currentColor}
.ms-mute .ms-cross{display:none}
.ms-muted .ms-mute{background:#3a2440;color:#ffd0e6}
.ms-muted .ms-mute .ms-waves{display:none}
.ms-muted .ms-mute .ms-cross{display:inline}
.ms-volume{display:flex;align-items:center}
.ms-volume input,.ms-tempo input{width:130px;min-height:44px;accent-color:var(--k-violet);cursor:pointer}

/* ---------- Mode headers ---------- */
.ms-toolbar{margin-bottom:10px}
.ms-title{margin:0!important;font-size:1.45rem!important;letter-spacing:-.01em}
.ms-how{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 18px!important;color:var(--k-ink-2)!important;font-weight:600}
.ms-how-step{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:999px;background:rgba(165,148,255,.16);color:#d9d0ff;font:800 .85rem/1 "Manrope",Inter,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.ms-how-step svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-scale svg,.kp-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ms-scale,.ms-actions .kp-button,.ms-win-actions .kp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#ms-listen svg path:first-child{fill:currentColor}

/* ---------- The star xylophone ---------- */
.ms-xylo-wrap{position:relative;max-width:780px;margin:30px auto 0;padding:0 6px}
.ms-stage[data-mode="free"] .ms-xylo-wrap{margin-top:8px}
.ms-xylo{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:320px}
.ms-frame{position:absolute;inset:0 6px;width:calc(100% - 12px);height:320px;z-index:0;overflow:visible}
.ms-frame path{fill:none;stroke:var(--ms-wood);stroke-width:13;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ms-bar{--h:300px;position:relative;flex:1 1 0;min-width:0;height:var(--h);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 4px;border:0;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%),var(--c);box-shadow:inset 0 -7px 0 var(--cd),inset 6px 0 0 rgba(255,255,255,.18),0 10px 22px rgba(2,4,20,.45);cursor:pointer;color:var(--ms-ink);font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease,filter .12s ease;user-select:none;-webkit-user-select:none}
.ms-bar:nth-child(2){--h:284px}.ms-bar:nth-child(3){--h:268px}.ms-bar:nth-child(4){--h:252px}.ms-bar:nth-child(5){--h:236px}.ms-bar:nth-child(6){--h:220px}.ms-bar:nth-child(7){--h:204px}.ms-bar:nth-child(8){--h:188px}
.ms-bar:hover{filter:brightness(1.08)}
.ms-peg{width:12px;height:12px;border-radius:50%;background:#f4f6ff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.ms-bar-name{display:grid;place-items:center;min-width:46px;padding:6px 6px;border-radius:12px;background:rgba(255,255,255,.88);font:900 1.15rem/1 "Manrope",Inter,sans-serif;color:var(--ms-ink);position:relative}
.ms-high .ms-bar-name:before,.ms-chip.ms-high:before{content:"";position:absolute;top:-9px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#f4f6ff;box-shadow:0 0 0 2px var(--ms-ink)}
.ms-bar-key{font:800 .78rem/1 "Manrope",Inter,sans-serif;color:rgba(20,16,46,.72);background:rgba(255,255,255,.4);border-radius:8px;padding:4px 7px;margin-top:auto;margin-bottom:10px}
.ms-bar .ms-peg:first-child{margin-bottom:auto}
.ms-bar-name{margin-bottom:10px}

@keyframes ms-bounce{0%{transform:translateY(0) scale(1)}30%{transform:translateY(7px) scale(.97,1.0)}65%{transform:translateY(-6px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes ms-glow{0%,100%{box-shadow:inset 0 -7px 0 var(--cd),0 0 0 4px #fff,0 0 18px 6px rgba(246,201,108,.55)}50%{box-shadow:inset 0 -7px 0 var(--cd),0 0 0 6px #fff,0 0 34px 14px rgba(246,201,108,.85)}}
@keyframes ms-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes ms-pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.ms-hit{animation:ms-bounce .38s cubic-bezier(.3,.8,.3,1.4);filter:brightness(1.22) saturate(1.1)}
.ms-lit{filter:brightness(1.3) saturate(1.15)}
.ms-next{animation:ms-glow 1.3s ease-in-out infinite;z-index:2}
.ms-next:after{content:"";position:absolute;top:-30px;left:50%;width:22px;height:22px;margin-left:-11px;background:var(--k-gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ms-next.ms-hit{animation:ms-bounce .38s cubic-bezier(.3,.8,.3,1.4)}
.ms-pulse.ms-next{animation:ms-pulse .5s ease 2,ms-glow 1.3s ease-in-out infinite}
.ms-nudge{animation:ms-shake .4s ease}
.ms-listening .ms-bar{cursor:default}

/* ---------- Songs ---------- */
.ms-songs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.ms-song{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 18px 8px 12px;border-radius:18px;border:2px solid var(--k-line);background:var(--k-surface-2);color:var(--k-ink);font:800 1rem/1.2 "Manrope",Inter,sans-serif;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.ms-song:hover{border-color:#5a68c0;background:var(--k-surface-3)}
.ms-song[aria-pressed="true"]{border-color:var(--k-gold);background:linear-gradient(135deg,rgba(246,201,108,.22),rgba(165,148,255,.18));box-shadow:0 6px 18px rgba(246,201,108,.18)}
.ms-song-dots{display:inline-flex;gap:3px;flex:none}
.ms-song-dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--c)}
.ms-sheet{padding:16px 18px 18px;border-radius:22px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.ms-sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:10px}
.ms-sheet-title{margin:0!important;color:var(--k-muted)!important;font-size:.92rem}
.ms-sheet-title b{display:block;color:var(--k-ink);font:800 1.3rem/1.25 "Manrope",Inter,sans-serif}
.ms-progress-text{margin:0!important;font-weight:800;color:var(--k-gold)!important}
.ms-progress{height:12px;border-radius:999px;background:var(--k-surface-2);overflow:hidden;margin-bottom:14px}
.ms-progress-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--k-cyan),var(--k-violet),var(--k-pink));transition:width .25s ease}
.ms-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px 26px}
.ms-phrase{display:flex;flex-wrap:wrap;gap:6px;margin:0!important}
.ms-chip{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:19px;background:var(--c);box-shadow:inset 0 -3px 0 var(--cd);color:var(--ms-ink);font:900 .8rem/1 "Manrope",Inter,sans-serif;flex:none;transition:transform .15s,opacity .2s}
.ms-chip.ms-long{width:58px}
.ms-chip.ms-short{width:30px;height:30px;margin-top:4px}
.ms-chip.ms-high:before{top:-6px;width:6px;height:6px;margin-left:-3px;box-shadow:0 0 0 1.5px var(--ms-ink)}
.ms-chip.ms-done{opacity:.35}
.ms-chip.ms-now{transform:scale(1.18);box-shadow:inset 0 -3px 0 var(--cd),0 0 0 3px #fff,0 0 14px 3px rgba(246,201,108,.8);z-index:1}
.ms-chip.ms-playing{transform:scale(1.18);box-shadow:inset 0 -3px 0 var(--cd),0 0 0 3px var(--k-gold);opacity:1}
#ms-listen.ms-active{background:linear-gradient(100deg,var(--k-gold),var(--k-coral))}

/* ---------- Echo game ---------- */
.ms-echo{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding:16px 18px;border-radius:22px;background:var(--k-bg-2);border:1px solid var(--k-line-soft);margin-bottom:6px}
.ms-echo-play{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:10px 26px 10px 14px;border:0;border-radius:999px;background:linear-gradient(100deg,var(--k-violet),var(--k-pink));color:#160c30;font:900 1.12rem/1.1 "Manrope",Inter,sans-serif;cursor:pointer;box-shadow:0 10px 26px rgba(165,148,255,.35);transition:transform .15s}
.ms-echo-play svg{width:40px;height:40px;padding:8px;border-radius:50%;background:rgba(255,255,255,.55);fill:currentColor;box-sizing:border-box}
.ms-echo-play:not(:disabled):hover{transform:translateY(-2px)}
.ms-echo-play:disabled{opacity:.55;cursor:default}
.ms-echo-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.ms-round-text{margin:0!important;font-weight:800;color:var(--k-gold)!important}
.ms-rounds{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ms-rounds li{width:14px;height:14px;border-radius:50%;background:var(--k-surface-3);margin:0!important}
.ms-rounds li.ms-on{background:var(--k-gold);box-shadow:0 0 0 3px rgba(246,201,108,.3)}
.ms-rounds li.ms-done{background:var(--k-mint)}
.ms-slots{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ms-slots li{display:grid;place-items:center;width:48px;height:48px;margin:0!important;border-radius:50%;border:3px dashed #46549e;box-sizing:border-box}
.ms-slots li.ms-filled{border:0;background:var(--c);box-shadow:inset 0 -3px 0 var(--cd)}
.ms-slots li b{font:900 .85rem/1 "Manrope",Inter,sans-serif;color:var(--ms-ink)}
.ms-slots.ms-good li{box-shadow:0 0 0 3px var(--k-mint),inset 0 -3px 0 var(--cd)}

/* ---------- Beat maker ---------- */
.ms-tempo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;color:var(--k-ink)}
.ms-tempo-name{margin-right:4px}
.ms-tempo-end{font-size:.8rem;color:var(--k-muted);font-weight:700}
.ms-grid{display:grid;grid-template-columns:minmax(120px,auto) repeat(8,minmax(44px,64px));gap:8px;justify-content:center;padding:14px;border-radius:22px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.ms-r1{grid-row:1}.ms-r2{grid-row:2}.ms-r3{grid-row:3}.ms-r4{grid-row:4}.ms-r5{grid-row:5}.ms-r6{grid-row:6}
.ms-k1{grid-column:1}.ms-k2{grid-column:2}.ms-k3{grid-column:3}.ms-k4{grid-column:4}.ms-k5{grid-column:5}.ms-k6{grid-column:6}.ms-k7{grid-column:7}.ms-k8{grid-column:8}.ms-k9{grid-column:9}
.ms-head{display:grid;place-items:center;height:30px;border-radius:10px;font:800 .85rem/1 "Manrope",Inter,sans-serif;color:var(--k-muted)}
.ms-head.ms-beat{color:var(--k-ink)}
.ms-head.ms-at{background:var(--k-gold);color:#241a05}
.ms-corner2,.ms-track2{display:none}
.ms-track{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 12px 4px 6px;border:0;border-radius:14px;background:transparent;color:var(--k-ink);font:800 .95rem/1.1 "Manrope",Inter,sans-serif;text-align:left;cursor:pointer}
button.ms-track:hover{background:var(--k-surface-2)}
.ms-track-icon{width:36px;height:36px;flex:none;padding:6px;border-radius:12px;box-sizing:border-box;fill:none;stroke:#120b2a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;background:var(--tc)}
.ms-t-kick{--tc:var(--ms-kick)}.ms-t-snare{--tc:var(--ms-snare)}.ms-t-clap{--tc:var(--ms-clap)}.ms-t-hat{--tc:var(--ms-hat)}.ms-t-bell{--tc:var(--ms-bell)}
.ms-c{aspect-ratio:1;min-width:44px;min-height:44px;border-radius:14px;border:2px solid var(--k-line);background:var(--k-surface);cursor:pointer;padding:0;transition:background .1s,transform .1s,border-color .1s;touch-action:manipulation}
.ms-c.ms-k2,.ms-c.ms-k4,.ms-c.ms-k6,.ms-c.ms-k8{background:var(--k-surface-2)}
.ms-c:hover{border-color:var(--tc)}
.ms-c[aria-pressed="true"]{background:var(--tc);border-color:transparent;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.ms-c.ms-at{border-color:#fff}
.ms-c.ms-at[aria-pressed="true"]{filter:brightness(1.2)}
@keyframes ms-bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.ms-c.ms-bump{animation:ms-bump .22s ease-out}
.ms-play{min-width:150px}
.ms-play svg{fill:currentColor;stroke:none}
.ms-play .ms-ic-stop{display:none}
.ms-beat-on .ms-play .ms-ic-play{display:none}
.ms-beat-on .ms-play .ms-ic-stop{display:block}
.ms-beat-on .ms-play{background:linear-gradient(100deg,var(--k-gold),var(--k-coral))}

/* ---------- Status + win ---------- */
.ms-status{text-align:center}
.ms-win .kg-stars{gap:8px}
.ms-star{width:48px;height:48px;fill:#3a447e}
.ms-star.ms-star-on{fill:var(--k-gold);filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes ms-star-in{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ms-win:not([hidden]) .ms-star-on{animation:ms-star-in .5s cubic-bezier(.2,.9,.3,1.3) both}
.ms-win:not([hidden]) .ms-star-on:nth-child(2){animation-delay:.12s}
.ms-win:not([hidden]) .ms-star-on:nth-child(3){animation-delay:.24s}
.ms-win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ms-win:focus{outline:none}
.ms-win:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .ms-xylo{height:280px;gap:7px}
 .ms-frame{height:280px}
 .ms-bar{--h:262px;border-radius:15px;padding:12px 2px}
 .ms-bar:nth-child(2){--h:248px}.ms-bar:nth-child(3){--h:234px}.ms-bar:nth-child(4){--h:220px}.ms-bar:nth-child(5){--h:206px}.ms-bar:nth-child(6){--h:192px}.ms-bar:nth-child(7){--h:178px}.ms-bar:nth-child(8){--h:164px}
 .ms-bar-name{min-width:0;width:calc(100% - 6px);max-width:46px;font-size:1rem;padding:6px 0}
}
@media(max-width:700px){
 .ms-top{flex-direction:column;align-items:stretch}
 .ms-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.2em),1fr));grid-auto-rows:auto;align-content:start;align-self:start;width:100%}
 .ms-tab{justify-content:center;padding:8px 10px}
 .ms-sound{justify-content:space-between;flex-wrap:wrap;border-radius:26px}
 .ms-volume{flex:1 1 110px}
 .ms-volume input{width:100%}
 /* Xylophone turns sideways: long low bars on top, short high bars at the bottom. */
 .ms-xylo{flex-direction:column;align-items:center;height:auto;gap:7px}
 .ms-frame{display:none}
 .ms-bar,.ms-bar:nth-child(n){flex:none;height:56px;flex-direction:row;padding:0 12px;border-radius:16px;box-shadow:inset 0 -6px 0 var(--cd),0 6px 14px rgba(2,4,20,.4)}
 .ms-bar:nth-child(1){width:100%}.ms-bar:nth-child(2){width:95%}.ms-bar:nth-child(3){width:90%}.ms-bar:nth-child(4){width:85%}.ms-bar:nth-child(5){width:80%}.ms-bar:nth-child(6){width:75%}.ms-bar:nth-child(7){width:70%}.ms-bar:nth-child(8){width:65%}
 .ms-bar .ms-peg:first-child{margin:0 auto 0 0}
 .ms-bar-name{margin:0;width:auto;max-width:none;min-width:52px;padding:7px 8px;font-size:1.05rem}
 .ms-bar-key{margin:0 0 0 8px}
 .ms-bar .ms-peg:last-child{margin:0 0 0 auto}
 .ms-next:after{top:50%;left:-26px;margin:-11px 0 0}
 .ms-xylo-wrap{padding:0 0 0 26px;margin-right:0}
 @keyframes ms-bounce{0%{transform:translateX(0)}30%{transform:translateX(5px) scale(.99)}65%{transform:translateX(-4px)}100%{transform:none}}
 /* Beat grid in two halves of four steps. */
 .ms-grid{grid-template-columns:auto repeat(4,minmax(44px,1fr));gap:6px;padding:10px;justify-content:stretch}
 .ms-corner2,.ms-track2{display:flex}
 .ms-b2.ms-k6{grid-column:2}.ms-b2.ms-k7{grid-column:3}.ms-b2.ms-k8{grid-column:4}.ms-b2.ms-k9{grid-column:5}
 .ms-b2.ms-k1{grid-column:1}
 .ms-b2.ms-r1{grid-row:7;margin-top:10px}.ms-b2.ms-r2{grid-row:8}.ms-b2.ms-r3{grid-row:9}.ms-b2.ms-r4{grid-row:10}.ms-b2.ms-r5{grid-row:11}.ms-b2.ms-r6{grid-row:12}
 .ms-track{padding:4px;min-width:44px;justify-content:center}
 .ms-track-name{display:none}
 .ms-c{border-radius:12px}
 .ms-tempo{width:100%}
 .ms-tempo input{flex:1;min-width:0;width:auto}
 .ms-echo{padding:14px}
 .ms-echo-play{width:100%;justify-content:center}
 .ms-songs{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;margin-inline:-2px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .ms-song{flex:none;max-width:230px;scroll-snap-align:start}
 .ms-actions #ms-restart,.ms-actions #ms-print{flex:1 1 40%;padding-inline:12px}
 .ms-xylo-wrap{margin-top:12px}
}
@media(max-width:420px){
 .ms-sheet{padding:12px}
 .ms-phrase{gap:4px}
 .ms-chip{width:28px;height:28px;font-size:10.5px}
 .ms-chip.ms-long{width:42px}
 .ms-chip.ms-short{width:24px;height:24px;margin-top:2px}
 .ms-grid{padding:6px;gap:5px}
 .ms-tab{font-size:.9rem;gap:6px;padding:8px 6px}
 .ms-tab svg{width:20px;height:20px}
 .ms-slots li{width:44px;height:44px}
 .ms-how-step{display:none}
}
@media(prefers-reduced-motion:reduce){
 .ms-hit,.ms-next,.ms-nudge,.ms-pulse.ms-next,.ms-next.ms-hit,.ms-c.ms-bump,.ms-win:not([hidden]) .ms-star-on{animation:none!important}
 .ms-next{box-shadow:inset 0 -7px 0 var(--cd),0 0 0 5px #fff,0 0 24px 8px rgba(246,201,108,.7)}
 .ms-bar,.ms-chip,.ms-song,.ms-tab,.ms-echo-play,.ms-c,.ms-progress-fill{transition:none!important}
 .ms-echo-play:not(:disabled):hover{transform:none}
 .ms-chip.ms-now,.ms-chip.ms-playing{transform:none}
}

/* ---------- Print: the colour-coded songbook on A4 ---------- */
@media print{
 @page{size:A4;margin:12mm}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-stage.ms-stage,.kg-grownups{display:none!important}
 .ms-songbook{display:block;color:#000}
 .ms-songbook h2{font:800 22pt/1.2 "Manrope",Inter,sans-serif;margin:0 0 2mm!important;color:#000!important}
 .ms-songbook>p{margin:0 0 4mm!important;font-size:11pt;color:#000!important}
 .ms-legend{display:flex;flex-wrap:wrap;gap:2mm 6mm;list-style:none;margin:0 0 6mm;padding:0;font-size:10pt}
 .ms-legend li{display:flex;align-items:center;gap:2mm;color:#000!important}
 .ms-book-song{break-inside:avoid;page-break-inside:avoid;margin:0 0 5mm;padding:0 0 3mm;border-bottom:.3mm solid #999}
 .ms-book-song h3{font:800 13pt/1.3 "Manrope",Inter,sans-serif;margin:0 0 2mm!important;color:#000!important}
 .ms-book-song small{font-weight:500;font-size:9pt;margin-left:2mm}
 .ms-songbook .ms-strip{gap:2mm}
 .ms-songbook .ms-phrase{gap:1.4mm}
 .ms-songbook .ms-chip{width:8.5mm;height:8.5mm;border-radius:4.25mm;font-size:7.5pt;border:.35mm solid #000;box-shadow:none;transform:none;opacity:1;-webkit-print-color-adjust:exact;print-color-adjust:exact;color:#000}
 .ms-songbook .ms-chip.ms-long{width:13mm}
 .ms-songbook .ms-chip.ms-short{width:7mm;height:7mm;margin-top:.75mm}
 .ms-songbook .ms-chip.ms-high:before{top:-1.6mm;width:1.4mm;height:1.4mm;margin-left:-.7mm;background:#000;box-shadow:none}
}