piano-chord{--_keys:attr(keys type(<number>),8);--_keys:14;--piano-chord-black-key:#000;--piano-chord-white-key:#FFF;--piano-chord-key-gap:2px;--_octave-keys:7;--_ow:calc(100% / (var(--_keys) / var(--_octave-keys)));--_r:calc(var(--_keys) / var(--_octave-keys) * 0.6);--_wkw:calc(100% / var(--_keys));--_bkw:calc(var(--_wkw) * var(--_r));--_off1:calc(0.7 / var(--_octave-keys) * 100%);--_off2:calc(1.7 / var(--_octave-keys) * 100%);--_off3:calc(3.7 / var(--_octave-keys) * 100%);--_off4:calc(4.7 / var(--_octave-keys) * 100%);--_off5:calc(5.7 / var(--_octave-keys) * 100%);background-color:var(--piano-chord-white-key);background-image:linear-gradient(90deg,#0000 0 var(--_off1),var(--piano-chord-black-key) var(--_off1) calc(var(--_off1) + var(--_bkw)),#0000 0),linear-gradient(90deg,#0000 0 var(--_off2),var(--piano-chord-black-key) var(--_off2) calc(var(--_off2) + var(--_bkw)),#0000 0),linear-gradient(90deg,#0000 0 var(--_off3),var(--piano-chord-black-key) var(--_off3) calc(var(--_off3) + var(--_bkw)),#0000 0),linear-gradient(90deg,#0000 0 var(--_off4),var(--piano-chord-black-key) var(--_off4) calc(var(--_off4) + var(--_bkw)),#0000 0),linear-gradient(90deg,#0000 0 var(--_off5),var(--piano-chord-black-key) var(--_off5) calc(var(--_off5) + var(--_bkw)),#0000 0),linear-gradient(90deg,var(--piano-chord-black-key) var(--piano-chord-key-gap),#0000 0 var(--piano-chord-key-gap));background-position:0 0;background-repeat:repeat-x;background-size:var(--_ow) 60%,var(--_ow) 60%,var(--_ow) 60%,var(--_ow) 60%,var(--_ow) 60%,calc(100% / var(--_keys) - (var(--piano-chord-key-gap) / var(--_keys))) 100%;border-block:var(--piano-chord-key-gap) solid var(--piano-chord-black-key);display:grid;grid-template-columns:repeat(var(--_keys),1fr);grid-template-rows:1fr;height:auto;aspect-ratio:var(--piano-chord-aspect,12/5);width:100%}piano-key{display:inline-grid}piano-key:after{background:var(--_bg,#000);border-radius:50%;content:"";display:block;height:var(--piano-chord-dot-size,10px);margin-block:var(--piano-chord-dot-margin,8px);place-self:end center;width:var(--piano-chord-dot-size,10px)}piano-key[note="C#"],piano-key[note=C]{grid-column:1}piano-key[note="D#"],piano-key[note=D],piano-key[note=Db]{grid-column:2}piano-key[note=E],piano-key[note=Eb]{grid-column:3}piano-key[note="F#"],piano-key[note=F]{grid-column:4}piano-key[note="G#"],piano-key[note=G],piano-key[note=Gb]{grid-column:5}piano-key[note="A#"],piano-key[note=A],piano-key[note=Ab]{grid-column:6}piano-key[note=B],piano-key[note=Bb]{grid-column:7}piano-key[note="C#2"],piano-key[note=C2]{grid-column:8}piano-key[note="D#2"],piano-key[note=D2],piano-key[note=Db2]{grid-column:9}piano-key[note=E2],piano-key[note=Eb2]{grid-column:10}piano-key[note="F#2"],piano-key[note=F2]{grid-column:11}piano-key[note="G#2"],piano-key[note=G2],piano-key[note=Gb2]{grid-column:12}piano-key[note=Ab2]{grid-column:13}piano-key[note=Bb2]{grid-column:14}piano-key[note*="#"]{translate:50% var(--piano-chord-accidental-offset-y,-40%)}piano-key[note*=b]{translate:-50% var(--piano-chord-accidental-offset-y,-40%)}.blue{--_bg:#42A3BD}.pink{--_bg:#F1919C}.red{--_bg:#fc260a;--_c:#FFF}.orange{--_bg:#ff4901;--_c:#FFF}.yellow{--_bg:#f49118}.hotpink{--_bg:#BD3F63;--_c:#FFF}.beige{--_bg:#DBC8B1}.sage{--_bg:#A3B18A}.violet{--_bg:#7c3aed;--_c:#FFF}.indigo{--_bg:#4f46e5;--_c:#FFF}.fuchsia{--_bg:#d946ef;--_c:#FFF}.magenta{--_bg:#ff1e9c;--_c:#FFF}.rose{--_bg:#f43f5e;--_c:#FFF}.crimson{--_bg:#dc2626;--_c:#FFF}.amber{--_bg:#f59e0b;--_c:#2b1900}.gold{--_bg:#f7b500;--_c:#211600}.lime{--_bg:#84cc16;--_c:#112800}.green{--_bg:#22c55e;--_c:#052e12}.emerald{--_bg:#10b981;--_c:#04261d}.teal{--_bg:#14b8a6;--_c:#042b2a}.cyan{--_bg:#06b6d4;--_c:#06252b}.sky{--_bg:#0ea5e9;--_c:#052134}.royal{--_bg:#2563eb;--_c:#FFF}.navy{--_bg:#1d4ed8;--_c:#FFF}.blackberry{--_bg:#6d28d9;--_c:#FFF}.chord{background:var(--_bg) url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");border-radius:1ch;color:var(--_c,#000);display:grid;gap:1ch;padding:1.5ch 2ch 2ch;h2{font-family:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;font-weight:500;margin:0;text-box:text}}.piano-chord-block{width:min(360px,100%)}@media (max-width:480px){.piano-chord-block{width:min(260px,100%)}.piano-chord-block .piano-chord-inner{transform:scale(.9);transform-origin:top left}.piano-chord-block{--piano-chord-dot-size:6px;--piano-chord-dot-margin:4px;--piano-chord-accidental-offset-y:-70%}}