.ribbon-match-page{max-width:960px;margin:auto;color:#183f39;overflow-wrap:anywhere}.ribbon-match-sheet{padding:clamp(12px,3vw,24px);border:2px solid #adbdac;border-radius:18px;background:#fffdf5}.ribbon-match-page button,.ribbon-match-page select,.ribbon-match-page summary,.ribbon-match-page .back{min-height:44px}.ribbon-match-page button{white-space:normal;max-width:100%;padding:10px 12px}.ribbon-match-page button:focus-visible,.ribbon-match-page select:focus-visible,.ribbon-match-page summary:focus-visible{outline:3px solid #946625;outline-offset:3px}.ribbon-match-tabs{display:flex;gap:8px;margin:12px 0}.ribbon-match-tabs button{flex:1;min-width:0}.ribbon-match-case-title{font-size:14px;padding:8px 12px;background:#edf3e8;border-left:4px solid #397958}.ribbon-match-page #ribbon-match-status:empty{margin:0}.ribbon-match-page #ribbon-match-status:not(:empty){padding:8px 10px;background:#edf3e8;border-left:4px solid #397958;font-size:14px}.ribbon-match-turn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.ribbon-match-turn>div,.ribbon-match-actions{min-width:0}.ribbon-match-figure{margin:0}.ribbon-match-row-label{display:flex;flex-direction:column;font-size:15px;line-height:1.4;margin:6px 0 0;padding-left:6.6667%}.ribbon-match-row-label span{font-size:13px}.ribbon-match-paired-art{position:relative}.ribbon-match-diagram{display:block;width:100%;height:auto}.ribbon-match-whole{fill:#fffdf5}.ribbon-match-prefix{fill:#e1bc65}.ribbon-match-prefix-edge{stroke:#725214;stroke-width:4}.ribbon-match-outline,.ribbon-match-cuts line{fill:none;stroke:#183f39;stroke-width:2}.ribbon-match-flag path{fill:#183f39;stroke:#183f39;stroke-width:2;stroke-linejoin:round}.ribbon-match-bracket{fill:none;stroke:#506d60;stroke-width:1.5}.ribbon-match-diagram text{fill:#183f39;font-size:16px;font-weight:700;font-family:inherit}.ribbon-match-figure figcaption{font-size:12px;line-height:1.45}.ribbon-match-figure figcaption span,.ribbon-match-figure figcaption strong{display:block;margin:4px 0}.ribbon-match-figure details{font-size:13px}.ribbon-match-task,.ribbon-match-no-flag{font-size:14px;line-height:1.5;padding:8px 10px;border-left:4px solid #adbdac;background:#edf3e8;margin:6px 0 10px}.ribbon-match-no-flag{background:#f6edcf;border-color:#b4873e}.ribbon-match-actions>button{margin:4px 0}.ribbon-match-step-controls,.ribbon-match-proposal-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.ribbon-match-proposal-controls button{font-size:14px;line-height:1.35}.ribbon-match-numerators{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}.ribbon-match-numerators button{font-size:20px}.ribbon-match-record{padding:16px;border:2px solid #adbdac;border-radius:12px;background:#f3f6ed;margin:18px 0}.ribbon-match-record:focus{outline:3px solid #946625;outline-offset:3px}.ribbon-match-record h3{margin-top:0}.ribbon-match-feedback{border-left:4px solid #397958;padding-left:12px}.ribbon-match-page details{margin:16px 0}.ribbon-match-page summary{padding:10px 0;cursor:pointer}.ribbon-match-page pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.ribbon-match-page select{display:block;width:100%;max-width:100%;padding:8px;margin:8px 0;background:white}.ribbon-match-page .back{display:inline-flex;align-items:center;margin-right:12px}.ribbon-match-page .hear-button{max-width:100%;margin:6px 0}.ribbon-match-picture-fallback{padding:12px;border:1px dashed #adbdac;font-size:14px}.ribbon-match-catalog{margin:18px 0}
@media(max-width:700px){.ribbon-match-sheet{padding:12px}.ribbon-match-turn{grid-template-columns:1fr;gap:8px}.ribbon-match-record{padding:12px}.ribbon-match-tabs button{font-size:14px;padding:10px 6px}.ribbon-match-row-label{font-size:14px}.ribbon-match-row-label span{font-size:12px}.ribbon-match-figure figcaption{font-size:12px}.ribbon-match-figure details{margin:8px 0}.ribbon-match-step-controls button{font-size:14px}}
main:has(.ribbon-match-sheet) .speech-controls button,main:has(.ribbon-match-sheet) .speech-controls select,main:has(.ribbon-match-sheet) .speech-controls summary{min-height:44px}main:has(.ribbon-match-sheet) .speech-controls select{max-width:100%}
