.phrases-app{min-width:0}.phrases-app [hidden]{display:none!important}.ph-controls{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0}.ph-controls label{display:grid;gap:.3rem;max-width:100%;font-weight:600}.ph-controls select{font:inherit;max-width:100%;padding:.6rem;border:1px solid #adc5b6;border-radius:.4rem;background:white}.ph-board{display:grid;gap:1rem}.ph-bar{min-width:0;border:1px solid #cedbd1;border-radius:.7rem;padding:.7rem;background:white}.ph-bar h3{font-size:1rem;margin:0 0 .6rem}.ph-pulses,.ph-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;list-style:none;margin:.5rem 0;padding:0}.ph-pulse{min-width:0;padding:.5rem .25rem;background:#edf5ef;border:1px solid #b6cebf;border-radius:.5rem;text-align:center;overflow-wrap:anywhere}.ph-pulse small,.ph-pulse span{display:block;font-size:.78rem}.ph-pulse strong{font-size:1rem}.ph-pulse.pending{background:#fff2dc;border:2px dashed #a77722}.ph-halves{display:grid;grid-template-columns:1fr 1fr;gap:.15rem;margin-top:.4rem}.ph-halves span{padding:.3rem .1rem;background:#d3e6d9;border-radius:.2rem}.ph-slots button{font:inherit;min-height:54px;padding:.5rem .25rem;border:1px solid #adc5b6;border-radius:.5rem;background:white;overflow-wrap:anywhere}.ph-slots [aria-pressed=true]{border:2px solid #276745;background:#edf5ed}.ph-playing{outline:3px solid #a66a15;outline-offset:-3px}.ph-summary,.phrases-app h2{overflow-wrap:anywhere}.ph-response{border-top:2px solid #d1dfd5;padding-top:1rem}.ph-form-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.phrases-app [data-listen]:disabled{opacity:.6}.phrases-app [data-rhythm][aria-pressed=true]{background:#d3e6d9;border:2px solid #276745}.phrases-app .cs-staff{width:100%;height:auto}.ph-hint{font-size:.9rem;color:#52645b}.page-heading h1{overflow-wrap:anywhere}
.phrases-app details summary{cursor:pointer;padding:.7rem;text-align:left;font-weight:600}.phrases-app details .ph-bar{margin:.7rem 0}
@media(max-width:420px){.ph-controls{display:grid;grid-template-columns:minmax(0,1fr)}.ph-pulses,.ph-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-form-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.ph-halves{grid-template-columns:minmax(0,1fr)}}