/* Engraved notation. The font is bundled; no external font request is needed. */
.music-inline{font-family:Bravura!important;font-size:1.75em;font-style:normal;font-weight:400;line-height:0;display:inline-block;vertical-align:-.07em;padding:0 .035em 0 .14em;white-space:nowrap;color:inherit;letter-spacing:0;text-transform:none}
.notation-surface{position:relative;padding:12px 14px 39px;margin-top:16px}
.notation-surface>.symbol-strip{padding:0}
.symbol-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:6px 0}
.symbol-strip figure{margin:0;flex:0 1 108px;min-width:66px;text-align:center}
.symbol-strip svg{width:108px;max-width:100%;height:84px;margin:auto}
.symbol-strip figcaption,.notation-grid figcaption{font-size:12px;line-height:1.4;color:#617360;letter-spacing:0;overflow-wrap:anywhere}
.notation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
.notation-grid>figure{margin:0;min-width:0;text-align:center}
.notation-grid>figure:only-child{grid-column:1/-1}
.notation-grid svg{width:100%;height:auto;max-height:190px}
.notation-grid figcaption{padding:5px 0 0}
.notation-zoom{position:absolute;bottom:4px;right:8px;border:0;background:transparent;min-height:32px;padding:5px 8px;display:flex;gap:6px;align-items:center;color:var(--muted);font-size:11px}
.notation-zoom svg{width:15px;height:15px;max-height:15px}
.duration-equation{display:flex;align-items:center;justify-content:center;gap:5px;max-width:440px;margin:auto}
.duration-equation>svg{min-width:0;width:72px;height:90px}
.duration-equation>span{font-size:24px}
.answer-notation{margin:14px 0;background:#fafcf7}
.symbol-group{border-bottom:1px solid var(--line)}
.symbol-group>summary{cursor:pointer;min-height:47px;padding:12px 0;font-size:14px;line-height:1.5;list-style:none;display:flex;align-items:center;gap:10px}
.symbol-group>summary:after{content:'+';margin-left:auto;font-size:20px}
.symbol-group[open]>summary:after{content:'−'}
.symbol-group>summary::-webkit-details-marker{display:none}
.symbol-group>.symbol-strip{padding-bottom:18px}
.symbol-group>.notation-grid{margin:0 0 14px}
.duration-reference{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:15px}
.duration-reference figure{margin:0;min-width:0;text-align:center}
.duration-reference figcaption{font-size:11px;line-height:1.5;hyphens:auto}
.duration-reference svg{width:100%;height:75px}
.duration-caption{font-size:11px!important;color:var(--muted);margin:0 0 12px!important}
#dialog[data-context=notation]{width:880px;max-width:min(880px,calc(100vw - 24px))}
.notation-enlarged{background:#fafbf8;padding:20px;border-radius:12px}
.notation-enlarged>svg{width:100%;height:auto;max-height:420px}
.notation-enlarged .symbol-strip svg{width:180px;height:145px}
.notation-enlarged .symbol-strip figure{flex-basis:180px}
.notation-enlarged .notation-grid{grid-template-columns:1fr}
.notation-enlarged .notation-grid svg{max-height:240px}
.notation-enlarged .notation-grid figcaption{font-size:15px}
.students-button{white-space:nowrap;min-height:44px!important}
.student-intro{max-width:430px}
.student-toolbar{display:flex;gap:9px;margin:12px 0}
.student-toolbar input{flex:1;min-width:0;font-size:16px}
.student-toolbar .btn{min-height:44px;white-space:nowrap}
.student-list{display:flex;flex-direction:column;gap:7px;max-height:350px;max-height:min(350px,43dvh);overflow:auto;overscroll-behavior:contain;padding:2px}
.student-row{display:flex;align-items:center;gap:12px;min-height:78px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.student-row.selected{background:#edf4e8;border-color:#a0bb96}
.student-avatar{flex:0 0 35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#e4ebdf;font-size:14px}
.student-info{min-width:0;flex:1}
.student-name{display:block;font-size:15px;font-weight:550;overflow-wrap:anywhere}
.student-stats{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:4px}
.student-level{font-size:11px;white-space:nowrap;color:#596f52}
.student-level small{display:block;font-size:10px;text-align:right;margin-top:4px}
.student-row>svg{width:16px;height:16px;color:#7b9274}
.student-current{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;font-size:12px;color:var(--muted)}
.student-current>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-empty{padding:20px 0}
.backup-detail .actions{justify-content:flex-start;margin:10px 0 15px}
.backup-detail p{font-size:12px;line-height:1.6}
.practice-progress{margin-top:14px;padding:8px 22px}
.practice-progress>summary>span{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums;color:var(--muted)}
.practice-progress>summary:after{margin-left:4px}
.practice-progress-rows{padding:0 0 10px}
.practice-progress-rows>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;font-size:13px;border-top:1px solid var(--line)}
.focus-position{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.focus-position small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
@media(max-width:700px){
 .topbar .mobile-brand{display:none}
 .topbar .profile-tools{flex:1;min-width:0;gap:7px}
 .topbar .profile-tools .avatar{display:none}
 .topbar .profile-select{flex:1;max-width:none;min-width:0;width:0;font-size:14px;padding:8px 20px 8px 5px}
 .topbar .students-button{order:-1;padding:8px 10px;gap:6px;font-size:12px}
 .topbar>.language-select{flex-shrink:0;margin-left:0}
 .notation-surface{padding:7px 7px 35px;margin-top:12px}
 .notation-grid{grid-template-columns:1fr;gap:5px}
 .notation-grid svg{max-height:145px}
 .notation-grid figcaption{font-size:11px;padding-top:3px}
 .symbol-strip{gap:5px 8px}
 .symbol-strip figure{flex-basis:80px;min-width:62px}
 .symbol-strip svg{height:75px}
 .symbol-strip figcaption{font-size:11px}
 .notation-gallery .symbol-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 5px}
 .notation-gallery .symbol-strip figure{min-width:0}
 .notation-gallery .symbol-strip svg{height:62px}
 .notation-gallery .symbol-strip figcaption{font-size:10px;hyphens:auto}
 .notation-gallery .notation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .symbol-group>summary{min-height:44px;padding:10px 0}
 #dialog[data-context=symbols]{padding:20px 17px}
 .duration-reference figcaption{font-size:10px}
 .duration-reference svg{height:66px}
 .answer-notation{margin:10px 0}
 .answer-notation .notation-grid>figure:only-child svg{max-height:125px}
 .focus-content .answer-block>p{margin-bottom:10px}
 .focus-content .answer-block{padding-top:12px;padding-bottom:12px}
 .focus-position small{max-width:100px;font-size:10px}
 #dialog[data-context=students],#dialog[data-context=student-form]{padding:22px 17px 15px}
 #dialog[data-context=students]>h2,#dialog[data-context=student-form]>h2{font-size:23px;padding-right:30px}
 .student-intro{font-size:12px;margin-bottom:11px}
 .student-row{gap:8px;padding:10px;min-height:72px}
 .student-avatar{flex-basis:29px;height:29px;font-size:12px}
 .student-name{font-size:14px}
 .student-stats{font-size:10px}
 .student-list{max-height:39dvh}
 .student-current{margin-top:9px}
 .practice-progress{padding:4px 13px}
 .page-head:has([data-action=symbols]){align-items:center;gap:10px}
 .page-head:has([data-action=symbols]) h1{font-size:23px}
 .page-head:has([data-action=symbols]) p{display:none}
 .page-head:has([data-action=symbols]) .btn{padding:8px;font-size:12px;gap:5px;min-height:44px}
 .notation-enlarged{padding:8px}
 .notation-enlarged .notation-grid svg{max-height:180px}
}