.clef-reading-guide{color:#75654e;font:15px/1.8 Georgia}.clef-reading-guide>p{margin:0 0 14px}.clef-reading-guide>p:last-child{margin-bottom:0}.clef-filters{flex-wrap:wrap;gap:10px;max-width:1100px;margin:32px auto 0;display:flex}.clef-filters button{color:#e2c593;cursor:pointer;background:#292722;border:1px solid #292722;min-height:46px;padding:12px 18px;font:13px/1.6 Arial}.clef-filters button[aria-pressed=true]{color:#211d16;background:#b48742;border-color:#91682d}.clef-filters button:focus-visible{outline-offset:4px;outline:2px solid #9b6d26}.clef-count{color:#806b4f;max-width:1100px;margin:16px auto 26px;font:12px/1.8 Arial}.clef-card-title{color:#292722;white-space:nowrap;min-width:0;margin:20px 0 12px;font:400 27px/1.4 Georgia}.clef-description{color:#72624b;min-height:76px;margin:0;font:14px/1.8 Georgia}.clef-symbol-space{direction:ltr;padding:6px 5px 0}.clef-symbol-space svg{color:#292722;background:0 0;width:100%;height:100%;position:absolute;overflow:visible}.clef-facts{border-top:1px solid #a98a5a35;border-bottom:1px solid #a98a5a35;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:4px 0 15px;padding:14px 0;display:grid}.clef-facts>div{flex-direction:column;gap:8px;display:flex}.clef-facts small{color:#77654d;font:11px/1.7 Arial}.clef-facts bdi{color:#8f682e;font:24px Georgia}.clef-facts b{color:#8f682e;font:18px/1.5 Georgia}.clef-names>div{grid-template-columns:minmax(0,1fr);gap:4px}.clef-names dd{white-space:nowrap;overflow-wrap:normal;min-width:0}.clef-names [lang=ar]{font-size:inherit}.clef-card .piano-notation{margin:20px 0 0;padding-top:18px}.clef-card .piano-notation h2{font-size:18px}.clef-card .piano-notation>p{margin-bottom:4px;font-size:12px}.clef-card .piano-space{padding:10px 0}.clef-card .piano-note-key{margin:7px 0 0;font-size:11px}html[lang=ar] .clefs-page :is(.clef-card-title,.clef-description,.clef-reading-guide,.clef-facts b){font-family:Tahoma,Arial,sans-serif}html[lang=ar] .clef-card-title{font-size:23px}html[lang=ar] .clef-filters button{font-family:Tahoma,Arial,sans-serif}@media (width<=640px){.clef-card-title{font-size:clamp(16px,5.4vw,25px)}.clef-description{min-height:0}.clef-filters{gap:8px}.clef-filters button{flex:auto;padding:11px 13px;font-size:12px}.clef-reading-guide{font-size:14px}.clef-names dd{font-size:16px}}