/* Classfern Music keyword pages: percussion (group M). The fk-* and staff-art rules are the same as groups F and J. */
.fk-answer{font-size:1.08rem;line-height:1.6;max-width:72ch;margin:6px 0 10px}
.fk-updated{font-size:.88rem;color:var(--muted);margin:4px 0 14px}
.fk-facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;margin:14px 0;max-width:72ch}
.fk-facts h2{margin:4px 0 6px;font-size:1.15rem}
.fk-facts ul{margin:0;padding-left:1.2em}
.fk-facts li{margin:3px 0}
.fk-label{display:inline-block;font-size:.82rem;font-weight:650;padding:2px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand-2);border:1px solid var(--line);margin:2px 0}
.fk-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.fk-btns .btn{min-width:44px}
.fk-btns .btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.fk-live{min-height:1.5em;font-weight:650;margin:6px 0}
.fk-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.fk-scroll table{min-width:300px}
.fk-steps>li{margin:6px 0}
.fk-direct{font-weight:500}
.mp-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:8px 0}
.mp-row .mu-field{display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.mp-row select{min-height:44px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:6px 8px;max-width:100%}
.mp-row input[type=range]{min-width:160px}
/* Bars (xylophone, glockenspiel): longest bar on the left, letters on every bar, colour as well as letters */
.mp-bars{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:10px 6px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2,var(--surface));margin:8px 0;max-width:100%}
.mp-bar{flex:0 0 40px;width:40px;min-height:72px;border:1px solid rgba(0,0,0,.4);border-radius:8px;padding:6px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font:800 1.1rem/1 var(--head,inherit);color:#fff;background:var(--c,#b9c4ce);text-shadow:0 1px 1px rgba(0,0,0,.45);box-shadow:0 2px 0 rgba(0,0,0,.25);position:relative}
.mp-bar small{font-size:.7rem;font-weight:600}
.mp-bar.mp-dk{color:#1b1f23;text-shadow:none}
.mp-bar.mp-sh{background:#37474f;color:#fff}
.mp-bar:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mp-bar.on{transform:translateY(3px);box-shadow:0 0 0 4px var(--ink);text-decoration:underline}
.mp-bar.next::after{content:"★";position:absolute;top:-1.15em;color:var(--ink);font-size:1rem;text-shadow:none}
.mp-bars-wrap{display:flex;flex-direction:column;gap:2px}
.mp-key{font-size:.85rem;color:var(--muted);margin:2px 0 8px}
.mp-letters{font:700 1.15rem/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:6px 0;word-spacing:.15em;max-width:100%;overflow-wrap:anywhere}
[data-mp-text] i{font-style:normal;border-radius:4px;padding:0 1px}
[data-mp-text] i.on{background:var(--accent);color:#111;text-decoration:underline;text-decoration-thickness:2px;outline:2px solid var(--ink)}
[data-mp-text] i.next{outline:2px dashed var(--ink)}
[data-mp-text] i.next::before{content:"★"}
.mp-songs{list-style:none;padding:0;margin:10px 0}
.mp-songs>li{border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:10px 0;background:var(--surface)}
.mp-songs h3{margin:4px 0;font-size:1.08rem}
.mp-songs p{margin:4px 0}
.mp-songs .mp-letters{font-size:1rem;background:var(--surface-2,var(--surface))}
.mp-meta{font-size:.85rem;color:var(--muted)}
.mp-swatch{display:inline-block;width:.9em;height:.9em;border-radius:3px;border:1px solid rgba(0,0,0,.35);vertical-align:-.1em;margin-right:4px}
/* Drum grid */
.mp-grid{border-collapse:collapse;font-variant-numeric:tabular-nums}
.mp-grid th,.mp-grid td{border:1px solid var(--line);padding:2px;text-align:center}
.mp-grid thead th{font-size:.8rem;color:var(--muted);min-width:30px}
.mp-grid tbody th{text-align:left;padding:2px 8px;font-size:.88rem;white-space:nowrap}
.mp-grid .mp-beat{border-left:2px solid var(--line-2)}
.mp-grid th.on,.mp-grid td.on{background:var(--accent-soft)}
.mp-grid thead th.on{color:var(--ink);font-weight:800;text-decoration:underline}
.mp-step{width:30px;height:34px;font:inherit;font-weight:800;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;cursor:pointer;padding:0}
.mp-step[aria-pressed=true]{background:var(--brand-soft);border-color:var(--ink)}
.mp-step.acc[aria-pressed=true]{background:var(--brand);color:#fff}
.mp-step:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
.mp-txtgrid{font:600 .9rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mp-txtgrid td,.mp-txtgrid th{padding:2px 5px}
/* Drum notation */
.mp-defs{position:absolute;width:0;height:0;overflow:hidden}
.mp-ex{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:12px 0;background:var(--surface)}
.mp-ex h3{margin:4px 0;font-size:1.05rem}
.mp-score{display:block;width:100%;max-width:620px;height:auto;color:var(--ink);margin:4px 0}
.mp-score .l{stroke:var(--ink);stroke-width:1;fill:none}
.mp-score .k{fill:var(--ink);color:var(--ink)}
.mp-score .n{fill:currentColor}
.mp-score .m{stroke:currentColor;stroke-width:1.3}
.mp-score .b{stroke:var(--ink);stroke-width:3.6}
.mp-score .f{fill:var(--ink);stroke:var(--ink);stroke-width:.8}
.mp-score .t{font:800 15px/1 Georgia,"Times New Roman",serif;text-anchor:middle;fill:var(--ink)}
.mp-score .o{font:700 10px/1 sans-serif;text-anchor:middle;fill:var(--ink)}
.mp-score .c{font:600 10px/1 sans-serif;text-anchor:middle;fill:var(--muted)}
.mp-score .c.on{fill:var(--ink);font-weight:900;text-decoration:underline}
.mp-score g{color:var(--ink)}
.mp-score g.on{color:var(--brand)}
.mp-score g.on .m{stroke-width:2.4}
/* Rudiment sticking */
.mp-sticks{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0;min-height:52px}
.mp-stk{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:2.3em;min-height:48px;padding:3px 4px;border:2px solid var(--line-2);border-radius:8px;font:800 1.25rem/1 var(--head,inherit)}
.mp-stk small{font-size:.7rem;font-weight:600;color:var(--muted)}
.mp-stk i{font-style:normal;font-size:.8rem}
.mp-stk.mp-R{background:var(--brand-soft)}
.mp-stk.mp-L{background:var(--surface);border-style:dashed}
.mp-stk.acc{border-width:3px;border-color:var(--ink)}
.mp-stk.mp-rest{color:var(--muted);font-weight:400}
.mp-stk.on{background:var(--accent);color:#111;outline:3px solid var(--ink);text-decoration:underline}
.mp-stick-txt{font:700 1rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
/* Steel pan */
.mp-pan{display:block;width:100%;max-width:400px;height:auto;margin:8px auto}
.mp-pan-rim{fill:#8d969e}
.mp-pan-bowl{fill:var(--surface-2,var(--surface));stroke:var(--line-2);stroke-width:2}
.mp-pn{cursor:pointer}
.mp-pn ellipse{fill:var(--surface);stroke:var(--ink);stroke-width:1.4}
.mp-pn text{font:800 11px/1 sans-serif;text-anchor:middle;fill:var(--ink);pointer-events:none}
.mp-inner text{font-size:9px}
.mp-pn-o{font-size:7px;font-weight:600}
.mp-pn:focus{outline:none}
.mp-pn:focus-visible ellipse,.mp-pn:hover ellipse{stroke-width:3;stroke:var(--brand)}
.mp-pn.on ellipse{fill:var(--accent);stroke-width:3}
html.bz-kids .fk-btns .btn{font-size:1.15rem;min-height:56px;padding:12px 20px}
html.bz-kids .fk-live{font-size:1.25rem}
html.bz-kids .mp-bar{flex-basis:50px;width:50px;font-size:1.35rem}
html.bz-kids .mp-step{width:40px;height:44px;font-size:1.2rem}
html.bz-kids .mp-stk{min-width:2.8em;min-height:58px;font-size:1.6rem}
html.bz-kids .mp-letters{font-size:1.4rem}
@media (max-width:600px){.mp-bar{flex-basis:34px;width:34px;font-size:1rem}.mp-step{width:26px;height:32px}.mp-grid tbody th{font-size:.78rem;padding:2px 4px}}
@media print{.tool .fk-btns,.mp-row,.fk-kids,.privacy,.cards,.staff-art,.staff-tip,.mp-ex .btn{display:none}.mp-ex{break-inside:avoid;border:1px solid #999}.mp-score{max-width:100%}}
/* Music staff illustrations (shared pattern; the lead merges these into one file) */
:root{--staff-tip-bg:#e6f4f0;--staff-tip-line:#bfe1d8}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--staff-tip-bg:#16302b;--staff-tip-line:#28524a}}
:root[data-theme=dark]{--staff-tip-bg:#16302b;--staff-tip-line:#28524a}
.staff-art{margin:4px 0 12px;width:260px;max-width:100%;background:none;border:0;padding:0}
.staff-art img,.staff-tip img{display:block;width:100%;height:auto;background:none;border:0}
.staff-art--right{float:right;margin-left:20px}
.staff-art--left{float:left;margin-right:20px}
.prose h2{clear:both}
.staff-tip{display:flex;align-items:center;gap:14px;background:var(--staff-tip-bg);border:1px solid var(--staff-tip-line);border-radius:18px;padding:14px 18px 14px 0;margin:28px 0 20px 0;max-width:72ch;clear:both}
.staff-tip picture{flex:0 0 140px;max-width:140px;margin:-34px 0 -14px -10px}
.staff-tip div{flex:1 1 auto;min-width:0}
.staff-tip p{margin:4px 0}
.staff-tip__who{font-weight:700;color:var(--brand-2)}
@media (max-width:600px){.staff-art--right,.staff-art--left{float:none;margin:8px auto 14px;width:180px}.staff-tip{padding:12px 14px 12px 0}.staff-tip picture{flex-basis:96px;max-width:96px;margin:-24px 0 -12px -6px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}