.cs-controls{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}.cs-controls label{display:flex;flex-direction:column;gap:.4rem;min-width:0}.cs-controls select{max-width:100%;padding:.55rem;font:inherit}.cs-board{margin:1rem 0}.cs-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:.5rem;list-style:none;padding:0}.cs-notes li{padding:.6rem .25rem;background:#edf4f1;border:1px solid #c5d9d0;border-radius:.5rem;text-align:center}.cs-notes small{display:block;color:#52615b}.cs-notes .missing{background:#fff3db;border:2px dashed #a56a13}.cs-notes .playing,.cs-slots .playing{outline:3px solid #a56a13;outline-offset:-3px}.cs-keyboard{height:112px;position:relative;margin:1.25rem 0}.cs-key{box-sizing:border-box;position:absolute;border:1px solid #68766f;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;font-size:.7rem;padding-bottom:8px;white-space:nowrap}.cs-key.white{height:108px;background:#fff;color:#253d32}.cs-key.black{height:66px;background:#26332d;color:white;z-index:2}.cs-key.member.white{background:#b6daca}.cs-key.member.black{background:#217350}.cs-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:1rem 0}.cs-slots button{font:inherit;padding:.5rem .2rem;border:1px solid #b9ccc2;background:#fff;border-radius:.5rem;min-height:52px}.cs-slots [aria-pressed=true]{border:2px solid #236646;background:#e8f3ec}.cs-staff{display:block;max-width:100%;width:420px;height:auto;background:#fff;border:1px solid #d7dfda;border-radius:.5rem;margin:.5rem auto}.cs-summary{overflow-wrap:anywhere}.creative-scales-app [data-feedback]{min-height:1.5em}.creative-scales-app [data-listen]:disabled{opacity:.6}