@font-face{font-family:Bravura;src:url('assets/Bravura.woff')}*{box-sizing:border-box}body{margin:0;background:#f3f0e7;color:#24463b;font:14px Arial,'PingFang SC','Microsoft YaHei',sans-serif}button,select{font:inherit;color:inherit;background:#fffdf7;border:1px solid #d6dfcf;border-radius:10px;padding:10px 14px;cursor:pointer}button:hover:not(:disabled){background:#e5eedf}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c79b55;outline-offset:3px}[hidden]{display:none!important}header{height:65px;padding:0 5vw;background:#fbfaf5;border-bottom:1px solid #dfe3d6;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}.brand>span{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#284f3f;color:white;font:24px 'Songti SC',serif}.brand b{font-size:17px}.brand small{display:block;font-size:10px;color:#85917e;margin-top:4px}#saved{font-size:11px;color:#7b8776}main{max-width:1320px;padding:0 35px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:24px 0}.eyebrow{font-size:11px;letter-spacing:.08em;color:#9e7549;margin:0 0 10px;font-weight:700}h1{font:600 clamp(28px,3vw,40px) 'Songti SC',serif;margin:0}h1 em{font-style:normal;color:#75936d}.intro>p{line-height:1.8;color:#7d8876;font-size:12px}.layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:start}aside{padding:16px;background:#e9ede1;border:1px solid #dce2d2;border-radius:20px}.mode{display:block;width:100%;text-align:left;background:transparent;border-color:transparent;margin:6px 0;padding:15px 10px}.mode b{font-size:13px}.mode small{display:block;margin-top:7px;font-size:10px;color:#82907a}.mode.active{border-color:#c2d0b8;background:#fffdf7}.meter-label{display:block;font-size:12px;margin:23px 0 9px}select{width:100%}.note{border-top:1px solid #d2dcc8;margin-top:22px;padding-top:17px;font-size:11px;line-height:1.9;color:#7a8971}.note b{color:#426044}.card{border:1px solid #dfe3d5;border-radius:21px;background:#fffdf8;overflow:hidden}.card-head{display:flex;justify-content:space-between;padding:19px 25px;font-size:12px}.card-head span:last-child{color:#8c9683}.progress{height:3px;background:#ecf0e3}.progress i{display:block;height:100%;background:#82a175;transition:width .2s}.question{text-align:center;padding:22px 20px 12px}.question h2{font-size:21px;font-weight:500;margin:0}.question>p:last-child{font-size:12px;color:#7b8b72;line-height:1.7;margin:10px 0 0}.beat-map{margin:0 25px;display:flex;border-radius:8px;overflow:hidden}.beat{flex:1;padding:8px 2px;text-align:center;background:#e8efdf;border-right:2px solid #fffdf8;font-size:11px;color:#738867}.beat:nth-child(even){background:#f0eddf}.beat small{display:block;font-size:9px;margin-top:3px}.score{padding:5px 20px}.rhythm-svg{width:100%;height:150px;display:block}.music{font-family:Bravura;font-size:48px}.original{margin:12px 25px 0;padding:10px 14px;border:1px solid #e8e4d6;border-radius:10px;background:#faf6ec;font-size:12px;color:#8c785c;display:flex;align-items:center;gap:18px}.original .rhythm-svg{width:105px;height:65px;flex:none}.original b{color:#405f41}#editing{padding:0 25px}.beam-controls{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.beam-controls button{font-size:10px;padding:8px 9px}.beam-controls button.cut{background:#f6ead8;border-color:#d2b991}.beam-controls button.join{background:#e6efde;border-color:#b6cba7}.palette{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.palette button{padding:8px 11px;font-size:11px}.palette .glyph{font-family:Bravura;font-size:26px;display:block;line-height:1.2;margin:4px 0 8px}.helper{display:flex;gap:8px;justify-content:center;padding:14px 20px}.helper button{font-size:11px;padding:8px 12px}.feedback{margin:0 25px 8px;padding:12px 15px;border-radius:11px;background:#eaf2e1;line-height:1.8;font-size:12px}.feedback.wrong{background:#faeee0}.feedback b{display:block}.bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 25px 18px}#status{font-size:11px;color:#7c8b74;line-height:1.7}.primary{background:#28543e;border-color:#28543e;color:white}.primary:hover:not(:disabled){background:#396b4f}details{padding:15px 25px;border-top:1px solid #e7e9dc;font-size:11px;color:#7a8b71}summary{cursor:pointer}details p{line-height:1.9}#result{text-align:center;padding:65px 25px;min-height:420px}#result h2{font-size:32px;font-weight:500}#result p{color:#778870;line-height:1.9}#result button{margin:15px 5px}footer{text-align:center;font-size:11px;color:#97a18c;padding:18px}@media(min-width:900px) and (max-height:800px){header{height:53px}.intro{padding:17px 0}.intro h1{font-size:30px}.question{padding-top:15px}.question h2{font-size:19px}.rhythm-svg{height:120px}.helper{padding:10px}.card-head{padding:14px 25px}.mode{padding:12px 10px}.original{margin-top:8px;padding:5px 12px}}@media(max-width:850px){main{padding:0 18px}.layout{grid-template-columns:165px minmax(0,1fr);gap:14px}aside{padding:16px}.intro>p{display:none}.beam-controls button{padding:7px}.question h2{font-size:18px}}@media(max-width:600px){.layout{display:block}.intro{padding:22px 0}.intro h1{font-size:27px}aside{margin-bottom:15px;display:flex;gap:6px;flex-wrap:wrap;padding:12px}aside>.eyebrow,.note{display:none}.mode{width:calc(33.33% - 4px);padding:10px 5px;margin:0}.mode b{font-size:11px}.mode small{font-size:9px;line-height:1.5}.meter-label{margin:10px 0;width:40px;padding-top:8px}select{width:100px;margin:8px 0}.card-head{padding:14px 18px}.beat-map{margin:0 15px}.score{padding:5px}#editing{padding:0 12px}.original{margin:10px 12px 0;font-size:11px}.feedback{margin:0 12px 8px}.bottom{padding:12px}.rhythm-svg{height:125px}.question{padding:17px 12px 10px}.beat{font-size:10px}.helper{flex-wrap:wrap}header{padding:0 20px}#saved{max-width:140px;font-size:10px;text-align:right}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.mini-note{width:44px;height:45px;display:block;margin:0 auto 3px}.original .mini-note{width:45px;height:55px;flex:none;margin:0}.palette button{min-width:88px}.solution-label{font-size:10px;color:#9b825e;margin-top:9px}.feedback .rhythm-svg{height:110px}.palette button span{font-size:10px}
@media(min-width:900px) and (max-height:800px){.intro{padding:12px 0}.intro .eyebrow{margin-bottom:6px}.intro h1{font-size:28px}.intro>p{margin:0}.card-head{padding:11px 25px}.question{padding:12px 20px 8px}.question .eyebrow{margin-bottom:6px}.question>p:last-child{margin-top:6px;font-size:11px}.beat{padding:5px 2px}.original{padding:3px 12px}.original .mini-note{height:42px}.rhythm-svg{height:95px}.mini-note{height:32px;width:35px;margin-bottom:2px}.palette button{padding:5px 10px}.helper{padding:9px}.helper button{padding:6px 10px}.bottom{padding:9px 25px 12px}.bottom button{padding:8px 12px}details{padding:10px 25px}.feedback{padding:8px 13px}.feedback .rhythm-svg{height:80px}footer{padding:10px}}
.card:has(.beam-controls) #score .rhythm-svg{height:150px}@media(max-width:600px){.card:has(.beam-controls) #score .rhythm-svg{height:115px}}
#score.direct-beam .rhythm-svg{height:180px;touch-action:none;user-select:none}.note-hit{cursor:grab}.note-hit:hover,.note-hit.picked{fill:#84a87122;stroke:#83a374;stroke-width:1.5}.note-hit:active{cursor:grabbing}.note-hit:focus-visible{outline:none;stroke:#b48d4d;stroke-width:2}.beam-hit{cursor:crosshair}.beam-hit:hover,.beam-hit:focus-visible{stroke:#bd8b4733;outline:none}@media(max-width:600px){#score.direct-beam{overflow-x:auto}#score.direct-beam .rhythm-svg{min-width:650px;height:150px}}@media(min-width:900px) and (max-height:800px){#score.direct-beam .rhythm-svg{height:160px}}
#score.mixed-rest .rhythm-svg{height:155px}.original-rest{opacity:.55}@media(max-width:600px){#score.mixed-rest{overflow-x:auto}#score.mixed-rest .rhythm-svg{min-width:650px;height:140px}}
#score{display:block;padding:15px 20px;overflow-x:auto}.score-system{display:grid;grid-template-columns:repeat(var(--score-columns),minmax(0,1fr));gap:12px 0}.measure{min-width:0;position:relative;border:0;border-radius:0;background:transparent}.measure.active{background:transparent}.measure-number{position:absolute;left:5px;top:6px;font-size:11px;color:#879880}#score.direct-beam .rhythm-svg,#score.mixed-rest .rhythm-svg,#score .rhythm-svg{display:block;width:100%;min-width:0;height:150px}.correction{padding:8px 0}.feedback .correction .rhythm-svg{height:100px}
/* Size the workspace to the actual browser viewport. */
@media(min-width:701px){
 body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 header{height:clamp(46px,6vh,60px);flex:none;padding:0 clamp(16px,2vw,30px)}
 main{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;padding:0 clamp(16px,2vw,30px)}
 .intro{flex:none;padding:clamp(10px,2vh,20px) 0}.intro h1{font-size:clamp(26px,2.7vw,36px)}
 .layout{flex:1;min-height:0;grid-template-columns:clamp(155px,15vw,185px) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);align-items:stretch}
 aside{min-height:0;overflow:auto;padding:14px}.mode{padding:12px 8px}.meter-label{margin-top:17px}.note{margin-top:16px;padding-top:12px}
 .card{min-height:0;overflow:auto;display:flex;flex-direction:column}.card-head,.progress{flex:none}.card-head{padding:14px 24px}
 #practice{flex:1;display:flex;flex-direction:column}.question{padding:14px 20px 8px}.question h2{font-size:19px}
 #score{flex:1;display:flex;align-items:center;min-height:324px;padding:6px 20px}.score-system{width:100%}
 .helper{padding:8px 20px}.bottom{padding:10px 24px 14px}details{padding:11px 24px}
 footer{flex:none;padding:8px;font-size:10px}
}

.playback{display:flex;align-items:center;gap:10px}.playback label{display:flex;align-items:center;gap:5px;font-size:11px;color:#7c8b74}.playback select{width:65px;margin:0;padding:5px}.sounding ellipse,.sounding text,.sounding circle{fill:#c28d36!important}.sounding line,.sounding ellipse{stroke:#c28d36!important}.helper{flex-wrap:wrap}

.learning{font-size:12px;line-height:1.7}.learning ul{padding-left:16px}.playback{flex-wrap:wrap}.playback input{width:auto}.error-mark{pointer-events:none}.feedback p{margin:8px 0}.playback label{white-space:nowrap}
.learning{padding:12px 0}.playback #play-range{width:100px}

.boundary-hit{cursor:pointer;touch-action:none}.boundary-hit:hover rect,.boundary-hit:focus rect{fill:#e4eedb;stroke:#8b6738}.boundary-hit:focus{outline:none}

.split-note{cursor:grab;touch-action:none}.split-note:active{cursor:grabbing}.split-note:focus{outline:none;stroke:#b48d4d}.boundary-hit:hover path,.boundary-hit:focus path{stroke:#9b6e31;stroke-width:3}#score .rhythm-svg{touch-action:none}