:root{color:#292824;font-synthesis:none;--lesson-width:900px;--page-gutter:clamp(18px, 4vw, 40px);background:#f3f0e9;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,select{font:inherit}main{width:100%}header{width:min(1120px, calc(100% - 2 * var(--page-gutter)));border-bottom:1px solid #d5d0c6;align-items:center;gap:18px;height:78px;margin:auto;display:flex}.wordmark{letter-spacing:.18em;font-family:Libre Caslon Display,Georgia,serif;font-size:24px}.edition{color:#777168;border-left:1px solid #c9c2b7;padding-left:18px;font-size:12px}.language-switcher{color:#aaa49b;letter-spacing:.1em;align-items:center;gap:8px;margin-left:auto;font-size:11px;display:flex}.language-switcher a{color:#8b857c;text-underline-offset:4px;text-decoration:none}.language-switcher a:hover{color:#4b4842}.language-switcher a[aria-current=page]{color:#292824;font-weight:600;text-decoration:underline}.lesson-column{width:min(var(--lesson-width), calc(100% - 2 * var(--page-gutter)));margin-inline:auto;padding-top:clamp(40px,7vw,68px)}.dialogue-heading{margin-bottom:clamp(34px,6vw,52px)}h1,h2,h3{margin:0;font-family:Libre Caslon Display,Georgia,serif;font-weight:400}h1{letter-spacing:-.015em;font-size:clamp(38px,5vw,58px);line-height:1.08}.dialogue-heading p{color:#777168;margin:10px 0 0;font-family:Georgia,serif;font-size:clamp(18px,2.5vw,22px)}.dialogue-heading .translation-credit{letter-spacing:.035em;margin-top:18px;font-family:DM Sans,system-ui,sans-serif;font-size:12px}.dialogue-text{color:#4b4842;font-family:Georgia,serif;font-size:clamp(16px,1.7vw,17px);line-height:1.78}.dialogue-text p{margin:0 0 1.35em}.dialogue-text .speech strong{color:#292824;font-variant:small-caps;letter-spacing:.04em;font-weight:600}.dialogue-text .joseph strong{color:#645e55}.dialogue-text video{aspect-ratio:16/9;background:#211f1b;border:0;width:100%;height:auto;margin:clamp(34px,6vw,54px) 0;display:block}.cantus-example{width:100%;margin:14px 0 30px;overflow-x:auto}.cantus-example svg{width:100%;min-width:680px;height:auto;display:block}.exercise{border-block:1px solid #d5d0c6;margin:clamp(50px,8vw,76px) 0;padding:clamp(30px,5vw,46px) 0;font-family:DM Sans,system-ui,sans-serif}.exercise>h2{margin-bottom:26px;font-size:clamp(30px,4vw,40px)}.workspace{width:100%;padding:24px 0 20px}.score-heading{border-bottom:1px solid #d8d3ca;justify-content:space-between;padding-bottom:14px;display:flex}.score-heading div{align-items:baseline;gap:10px;display:flex}.score-heading strong{font-family:Georgia,serif;font-weight:400}.score-heading small{color:#827c73}.score{width:100%;overflow:hidden}.score svg{width:100%;height:auto;display:block}.score-instruction{color:#777168;margin:12px 0 3px;font-size:12px;line-height:1.5}.score-hit-area{cursor:crosshair;touch-action:auto}.active-score-slot{fill:#b7791f;fill-opacity:.055;stroke:#b7791f;stroke-opacity:.24}.hover-score-slot{fill:#b7791f;fill-opacity:.08}.ghost-note{fill:#fff8e7;fill-opacity:.72;stroke:#9b6818;stroke-width:1.5px;stroke-dasharray:2 2}.position-strip{grid-template-columns:repeat(11,1fr);gap:7px;display:grid}.position-strip button{color:#726c64;cursor:pointer;background:#ece8df;border:1px solid #0000;border-radius:3px;justify-content:center;gap:6px;padding:8px 4px;display:flex}.position-strip button strong{color:#312f2a}.position-strip button.selected{color:#8a5a14;background:#fbf3df;border-color:#b7791f}.controls{border-top:1px solid #d8d3ca;grid-template-columns:1fr;gap:0;width:100%;margin-top:30px;display:grid}.editor,.feedback{padding:28px 0}.editor{border-bottom:1px solid #d8d3ca}.eyebrow{color:#8a5a14;text-transform:uppercase;letter-spacing:.13em;margin:0 0 9px;font-size:11px;font-weight:600}.current-result{border-left:3px solid #aaa49b;flex-direction:column;gap:4px;margin:18px 0 26px;padding:4px 0 4px 16px;display:flex}.current-result strong{text-transform:capitalize;font-family:Georgia,serif;font-size:22px;font-weight:400}.current-result span{color:#777168;font-size:13px}.current-result.good{border-color:#4e7c64}.current-result.good span{color:#37644d}.current-result.bad{border-color:#b54135}.current-result.bad span{color:#9b342b}label{margin-bottom:7px;font-size:12px;font-weight:600;display:block}.entry-row{gap:10px;display:flex}select{background:#fffdf8;border:1px solid #bbb5ab;border-radius:3px;flex:1;padding:11px}.remove{cursor:pointer;background:0 0;border:1px solid #c9c3ba;border-radius:3px;padding:0 15px}.remove:disabled{opacity:.4;cursor:default}.hint{color:#777168;font-size:12px}.feedback-title{border-bottom:1px solid #d8d3ca;justify-content:space-between;align-items:start;margin-bottom:17px;padding-bottom:18px;display:flex}.feedback-title h3{font-size:28px}.feedback-title>span{color:#777168;font-size:12px}.message{background:#ebe8e1;border-left:3px solid;margin:8px 0;padding:11px 13px;font-size:13px}.message.success{color:#37644d;background:#e7f0e9;border-color:#4e7c64}.message.error{color:#9b342b;background:#f5e9e7;border-color:#b54135}.message.warning{color:#865b12;background:#f5edd8;border-color:#c58a24}.message.neutral,.empty{color:#777168;border-color:#aaa49b}.empty{font-size:14px}.demo-closing{text-align:center;border-top:1px solid #cfc9bf;margin-top:clamp(58px,9vw,92px);padding:clamp(46px,7vw,70px) 0 clamp(36px,6vw,56px)}.demo-closing h2{margin-bottom:26px;font-size:clamp(30px,4vw,42px)}.demo-closing p{color:#57534c;max-width:680px;margin:0 auto 20px;font-family:Georgia,serif;font-size:16px;line-height:1.75}.demo-closing .copyright{color:#292824;margin-block:34px;font-size:15px}.demo-closing .maker{color:#716b62;letter-spacing:.05em;font-family:DM Sans,system-ui,sans-serif;font-size:12px}.demo-closing .maker strong{color:#292824;text-transform:uppercase;letter-spacing:.13em}.contact-action{color:#292824;border:1px solid #6e685f;border-radius:2px;margin-top:14px;padding:11px 22px;font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:600;text-decoration:none;display:inline-block}.contact-action[href]:hover{color:#f3f0e9;background:#292824}.contact-action.is-unconfigured{color:#8b857c;cursor:not-allowed;border-color:#bdb7ad}footer{text-align:center;color:#8b857c;letter-spacing:.08em;text-transform:uppercase;padding:28px 0 40px;font-family:DM Sans,system-ui,sans-serif;font-size:11px}@media (width<=740px){.edition{display:none}.position-strip{grid-template-columns:repeat(4,1fr)}.score{overflow-x:auto}.score svg{min-width:760px}.entry-row{align-items:stretch}.remove{padding-inline:12px}}