.pattern-select{display:block;font-size:14px;font-weight:600;max-width:510px}.strip-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin-top:16px;padding-bottom:4px}.pattern-strip{display:flex;gap:8px;width:max-content;min-width:100%;flex-wrap:nowrap}.pattern-strip>div{flex:0 0 132px;display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:#f3f5f1;border:1px solid var(--rule);border-radius:5px}.pattern-strip>div.active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.pattern-strip strong{font:22px Georgia,serif}.pattern-strip .spelling{font-size:13px;white-space:nowrap}.middle-path{font-size:15px;white-space:nowrap;overflow-x:auto;max-width:100%;padding:8px 0;margin:8px 0 0}.fixed-notes{font-size:14px;color:#4b5c60;margin:3px 0 13px}.pattern-staff{width:840px;min-height:170px}.pattern-staff svg{display:block}#play{min-width:130px}@media(max-width:480px){.pattern-strip>div{flex-basis:130px}.pattern-select select{font-size:14px}.middle-path{font-size:14px}}