@font-face{font-family:Bravura;src:url(/sight-singing/reference/assets/fonts/Bravura.woff)format("woff");font-display:block}.ear-settings{grid-template-columns:1fr 1fr}.paper{grid-template-columns:1fr}@media (width<=900px){.ear-settings{grid-template-columns:1fr}}:root{--ink:#172522;--paper:#fffdfa;--jade:#236b62;--coral:#e45c3a;--cream:#f2eee5}*{box-sizing:border-box}body{background:radial-gradient(circle at 90% 0,#236b6224,transparent 28%),var(--cream);color:var(--ink);margin:0;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}button{font:inherit;cursor:pointer}.topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffdf9cc;border-bottom:1px solid #17252221;justify-content:space-between;align-items:center;height:78px;padding:0 max(24px,4.5vw);display:flex}.brand{align-items:center;gap:12px;display:flex}.brand>span{background:var(--ink);color:#fff;width:42px;height:42px;box-shadow:4px 4px 0 var(--coral);border-radius:12px;place-items:center;font:25px Georgia,serif;display:grid}.brand div{gap:3px;display:grid}.brand b{font:700 16px Georgia,Songti SC,serif}.brand small{color:#74817d;letter-spacing:.12em;font-size:9px}.stats{display:flex}.stats span{border-left:1px solid #d8d4cb;min-width:82px;padding:7px 13px;display:grid}.stats small{color:#7b8783;font-size:9px}.stats b{margin-top:3px;font-size:16px}main{width:min(1080px,100% - 36px);margin:36px auto 54px}.modes{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.modes button{text-align:left;color:#79847f;background:#ffffff94;border:1px solid #17252221;border-radius:15px;grid-template-columns:38px 1fr;min-height:78px;padding:14px 18px;display:grid}.modes i{color:#a5ada9;grid-row:1/3;font:italic 700 22px Georgia,serif}.modes b{color:#5e6c68;font-size:14px}.modes small{font-size:10px}.modes button.active{border-color:var(--jade);background:var(--jade);color:#cfe4df;box-shadow:0 10px 24px #236b622e}.modes button.active b,.modes button.active i{color:#fff}.card{background:var(--paper);border:1px solid #17252224;border-radius:22px;overflow:hidden;box-shadow:0 22px 55px #2a302c1a}.question{border-bottom:1px solid #e7e2d8;justify-content:space-between;align-items:center;gap:22px;min-height:150px;padding:26px 30px;display:flex}.question>div>small{color:var(--coral);letter-spacing:.12em;font-size:10px;font-weight:900}.question h1{margin:8px 0 7px;font:700 clamp(27px,4vw,42px)/1.1 Georgia,Songti SC,serif}.question p{color:#697772;max-width:610px;margin:0;font-size:13px;line-height:1.65}.play{background:var(--ink);color:#fff;text-align:left;border:0;border-radius:14px;grid-template-columns:36px 1fr;align-items:center;width:150px;min-height:70px;padding:11px 14px;display:grid}.play>span{background:var(--coral);border-radius:50%;grid-row:1/3;place-items:center;width:32px;height:32px;font-size:11px;display:grid}.play b{font-size:12px}.play small{color:#aeb8b4;font-size:9px}.play:disabled{opacity:.45}.paper{background-image:linear-gradient(#236b6206 1px,#0000 1px);background-size:100% 32px;grid-template-columns:minmax(0,1fr) 230px;align-items:center;gap:24px;padding:24px 28px 18px;display:grid}#staff{background:#fffefb;border:1px solid #e6e1d7;border-radius:18px;width:100%;display:block;box-shadow:0 7px 22px #1725220d}.hit{cursor:crosshair}.tools{flex-direction:column;justify-content:center;align-self:stretch;display:flex}.tools>small{color:#7d8985;font-size:10px}.tools>b{margin-top:4px;font:700 23px Georgia,serif}.accidentals{gap:7px;margin:18px 0 12px;display:flex}.accidentals button{color:#44524e;background:#fff;border:1px solid #d8d4ca;border-radius:10px;width:48px;height:45px;font:24px Georgia,serif}.accidentals button.active{border-color:var(--coral);color:#b13d22;background:#fff2ed}.accidentals button:disabled{opacity:.4;cursor:not-allowed}.tools p{color:#7a8682;margin:0;font-size:10px;line-height:1.65}.feedback{color:#285d53;background:#edf7f3;border-radius:13px;margin:0 28px 18px;padding:14px 17px}.feedback.wrong{color:#9b462f;background:#fff2ec}.feedback b{font-size:14px}.feedback p{margin:5px 0 0;font-size:11px;line-height:1.5}.card footer{background:#faf8f3;border-top:1px solid #e9e5dc;justify-content:space-between;align-items:center;gap:20px;min-height:74px;padding:13px 28px;display:flex}.card footer>span{color:#75817d;font-size:11px}.card footer button{background:var(--coral);color:#fff;border:0;border-radius:11px;min-width:150px;padding:13px 18px;font-weight:900}.card footer button:disabled{opacity:.35;cursor:not-allowed}.tip{background:#eff8f5b8;border:1px solid #236b6229;border-radius:13px;gap:16px;margin-top:14px;padding:14px 18px;display:flex}.tip b{color:var(--jade);letter-spacing:.1em;flex:none;font-size:10px}.tip p{color:#63716c;margin:0;font-size:11px;line-height:1.6}@media (width<=720px){.stats{display:none}main{margin-top:20px}.modes{grid-template-columns:1fr}.question{flex-direction:column;align-items:flex-start;padding:22px}.play{width:100%}.paper{grid-template-columns:1fr;padding:14px}.tools{padding:0 4px 8px}.accidentals{margin:10px 0}.card footer{padding:13px 18px}}.ear-settings{background:#f8f6f0;border-bottom:1px solid #e7e2d8;grid-template-columns:1fr 1fr auto;align-items:end;gap:22px;padding:14px 28px;display:grid}.setting-group>span{color:#6f7b77;letter-spacing:.08em;margin-bottom:7px;font-size:10px;font-weight:800;display:block}.choice-row{gap:6px;display:flex}.choice-row button{color:#63706c;text-align:left;background:#fff;border:1px solid #d8d4ca;border-radius:9px;min-width:92px;padding:8px 10px;font-size:11px;font-weight:800}.choice-row button small{color:#919a96;margin-top:3px;font-size:8px;font-weight:500;display:block}.choice-row button.active{color:#236b62;background:#edf7f3;border-color:#236b62}.ear-settings>p{color:#71807b;align-items:center;gap:9px;margin:0;font-size:9px;line-height:1.4;display:flex}.ear-settings>p b{color:#fff;background:#172522;border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font:italic 700 14px Georgia,serif;display:grid}@media (width<=900px){.ear-settings{grid-template-columns:1fr}.ear-settings>p{grid-row:1}.choice-row button{flex:1}}@media (width<=520px){.choice-row{grid-template-columns:repeat(2,1fr);display:grid}#levels{grid-template-columns:repeat(3,1fr)}.choice-row button{min-width:0}}main{margin-top:22px}.hit:hover{fill:#0000!important}@media (width>=801px){.card{box-shadow:none;background:0 0;border:0;grid-template-columns:270px minmax(0,1fr);grid-template-areas:"settings question""settings paper""settings feedback""settings actions";gap:0 18px;display:grid;overflow:visible}.question{background:#fffdfa;border:1px solid #17252224;border-radius:22px 22px 0 0;grid-area:question;min-height:108px;padding:20px 22px}.question h1{font-size:clamp(25px,3vw,36px)}.train-sidebar{background:#fffdfa;border:1px solid #17252224;border-radius:22px;flex-direction:column;grid-area:settings;min-height:100%;display:flex;overflow:hidden;box-shadow:0 18px 45px #2a302c14}.ear-settings,.construction-guide{box-shadow:none;background:0 0;border:0;border-radius:0;padding:20px;display:block}.setting-group+.setting-group{border-top:1px solid #e8e3d8;margin-top:18px;padding-top:18px}.choice-row{grid-template-columns:1fr;display:grid}.choice-row button{border-radius:11px;width:100%;min-height:50px;padding:9px 10px}#dict-levels,#construction-levels,#sound-modes,#construction-sound-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-options{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-options button{text-align:center;min-height:48px;padding:8px 6px}.choice-row button.active{box-shadow:inset 3px 0 #236b62}.paper{background:#fffdfa;border:1px solid #17252224;border-top:0;grid-area:paper;padding:0 18px 18px;display:block}.feedback{grid-area:feedback}.card footer{border:1px solid #17252224;border-top:0;border-radius:0 0 22px 22px;grid-area:actions;height:74px;min-height:74px}.card footer>span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.train-sidebar .listen-panel{min-height:190px;box-shadow:none;border:0;border-top:1px solid #e8e3d8;border-radius:0;margin-top:auto}}.construction-guide>small{color:#6f7b77;letter-spacing:.08em;margin-bottom:7px;font-size:10px;font-weight:800;display:block}.construction-guide h2{color:#6f7b77;letter-spacing:.08em;border-top:1px solid #e8e3d8;margin:18px 0 12px;padding-top:18px;font-size:10px;font-weight:800}.construction-sound-modes{gap:6px;margin-top:0;display:grid}.construction-sound-modes button{color:#63706c;text-align:left;background:#fff;border:1px solid #ded9ce;border-radius:12px;min-height:54px;padding:11px 13px;font-size:11px;font-weight:800;line-height:1.2}.construction-sound-modes button small{color:#919a96;margin-top:3px;font-size:8px;font-weight:500;line-height:1.35;display:block}.construction-sound-modes button.active{color:#236b62;background:#edf7f3;border-color:#236b62;box-shadow:inset 3px 0 #236b62}.construction-guide ol{gap:8px;margin:0;padding:0;list-style:none;display:grid}.construction-guide li{background:#fff;border:1px solid #ded9ce;border-radius:12px;grid-template-columns:32px 1fr;align-items:center;gap:8px;min-height:54px;padding:8px 10px;display:grid}.construction-guide li b{color:#236b62;font:italic 700 16px Georgia,serif}.construction-guide li span{color:#63706c;font-size:11px;font-weight:800;line-height:1.2}.construction-guide li small{color:#919a96;margin-top:3px;font-size:8px;font-weight:500;line-height:1.35;display:block}.listen-panel{background:linear-gradient(#fffefa,#faf7ef);border-bottom:1px solid #eee9de;place-items:center;min-height:220px;display:grid;position:relative;overflow:hidden}.listen-panel .sound-rings{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.listen-panel .sound-rings i{border:1px solid #236b621f;border-radius:50%;width:132px;height:132px;position:absolute}.listen-panel .sound-rings i:nth-child(2){width:158px;height:158px}.listen-panel .sound-rings i:nth-child(3){width:184px;height:184px}.listen-panel.is-playing .sound-rings i{animation:1.8s ease-out infinite sound-pulse}.listen-panel.is-playing .sound-rings i:nth-child(2){animation-delay:.35s}.listen-panel.is-playing .sound-rings i:nth-child(3){animation-delay:.7s}@keyframes sound-pulse{0%{opacity:.15;transform:scale(.72)}35%{opacity:.72}to{opacity:0;transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.listen-panel.is-playing .sound-rings i{opacity:.55;animation:none}}.listen-panel .play{z-index:2;text-align:center;border-radius:50%;width:116px;height:116px;min-height:116px;padding:18px 8px;display:block;position:relative;box-shadow:0 15px 35px #12262040}.listen-panel .play>span{background:0 0;width:auto;height:auto;margin:0 auto 7px;font-size:24px;display:block}.listen-panel .play b,.listen-panel .play small{display:block}.listen-panel .play small{margin-top:5px}.listen-panel[hidden],.listen-panel .play[hidden],.ear-settings[hidden],.construction-guide[hidden]{display:none!important}.paper{position:relative}.staff-labels{z-index:2;color:#84908c;pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;gap:18%;font-size:10px;display:flex;position:absolute;bottom:3px;left:18px;right:18px}.staff-labels.harmonic span:first-child{display:none}.staff-labels.harmonic{gap:0}.enharmonic-switch{z-index:3;color:#6f7b77;background:#fffdfaf0;border:1px solid #d8d4cad1;border-radius:11px;justify-content:center;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 20px);min-height:38px;margin:0;padding:3px 7px;font-size:10px;font-weight:800;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 5px 14px #17252214}.enharmonic-switch[hidden]{display:none!important}.enharmonic-switch button{color:#63706c;background:#fff;border:1px solid #d8d4ca;border-radius:9px;min-width:58px;min-height:32px;padding:6px 10px;font-size:11px;font-weight:800}.enharmonic-switch button.active,.accidentals button.active{color:#236b62;background:#edf7f3;border-color:#236b62}.modes button,.choice-row button,.construction-sound-modes button,.enharmonic-switch button,.card footer button,.listen-panel .play{-webkit-tap-highlight-color:transparent;transition:transform .16s,background-color .2s,border-color .2s,color .2s,box-shadow .2s,opacity .2s;transform:translateZ(0)}@media (hover:hover){.modes button:hover,.choice-row button:hover,.construction-sound-modes button:hover,.enharmonic-switch button:hover,.card footer button:not(:disabled):hover{transform:translateY(-1px)}.listen-panel .play:not(:disabled):hover{transform:scale(1.025)}}.modes button:active,.choice-row button:active,.construction-sound-modes button:active,.enharmonic-switch button:active,.card footer button:not(:disabled):active{transition-duration:70ms;transform:scale(.975)}.listen-panel .play:not(:disabled):active{transition-duration:70ms;transform:scale(.955)}.modes button.active,.choice-row button.active,.construction-sound-modes button.active,.enharmonic-switch button.active{animation:.24s ease-out option-select}.card footer button:not(:disabled){box-shadow:0 8px 18px #e45c3a29}.card footer button:not(:disabled):active{box-shadow:0 3px 9px #e45c3a1f}@keyframes option-select{0%{transform:scale(.975)}65%{transform:scale(1.012)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.modes button,.choice-row button,.construction-sound-modes button,.enharmonic-switch button,.card footer button,.listen-panel .play{transition:none!important;animation:none!important;transform:none!important}}@media (width<=800px){.train-sidebar{background:#fffdfa;border:1px solid #17252224;border-radius:18px;gap:0;margin-bottom:14px;display:grid;overflow:hidden}.train-sidebar .ear-settings,.train-sidebar .construction-guide{box-shadow:none;border:0;border-radius:0;padding:16px;display:block}.setting-group+.setting-group{border-top:1px solid #e8e3d8;margin-top:14px;padding-top:14px}#dict-levels,#construction-levels,#sound-modes,#construction-sound-modes{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.compact-options{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.choice-row button,.construction-sound-modes button{min-width:0;min-height:48px;padding:8px 9px}.compact-options button{text-align:center;padding:8px 5px}.train-sidebar .listen-panel{border:0;border-top:1px solid #e8e3d8;border-radius:0;min-height:176px}.listen-panel .sound-rings i:nth-child(3){width:min(164px,82vw);height:min(164px,82vw)}}@media (width<=560px){html,body{max-width:100%;overflow-x:hidden}main{width:calc(100% - 20px);margin-top:14px}.card,.train-sidebar,.ear-settings,.construction-guide,.setting-group,.choice-row,.question,.paper,.card footer{width:100%;min-width:0;max-width:100%}.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}.modes button{border-radius:12px;grid-template-columns:28px minmax(0,1fr);min-width:0;min-height:58px;padding:9px 10px}.modes i{font-size:17px}.modes b{font-size:12px}.modes small{font-size:8px}.question{gap:12px;min-height:0;padding:16px}.question h1{overflow-wrap:anywhere;font-size:clamp(24px,9vw,34px)}.question p{overflow-wrap:anywhere;font-size:12px;line-height:1.55}.train-sidebar{border-radius:14px;margin-bottom:10px}.train-sidebar .ear-settings,.train-sidebar .construction-guide{padding:10px}.setting-group+.setting-group{margin-top:9px;padding-top:9px}.setting-group>span{margin-bottom:5px;font-size:9px}#dict-levels,#construction-levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#sound-modes,#construction-sound-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.compact-options{gap:5px}.choice-row{overflow:hidden}.choice-row button,.construction-sound-modes button{border-radius:8px;min-width:0;max-width:100%;min-height:42px;padding:6px 5px;font-size:10px;width:auto!important}#dict-levels button small,#construction-levels button small{display:none}.choice-row button small,.construction-sound-modes button small{margin-top:2px;font-size:7px;line-height:1.2}.train-sidebar .listen-panel{min-height:132px}.listen-panel .play{width:92px;height:92px;min-height:92px;padding:12px 5px}.listen-panel .play>span{margin-bottom:3px;font-size:19px}.listen-panel .sound-rings i{width:100px;height:100px}.listen-panel .sound-rings i:nth-child(2){width:112px;height:112px}.listen-panel .sound-rings i:nth-child(3){width:124px;height:124px}.paper{width:100%;min-width:0;padding:8px;overflow:visible}.staff-labels{font-size:9px;bottom:1px;left:8px;right:8px}#staff{touch-action:none;border-radius:12px;width:100%;min-width:0;max-width:100%;height:auto}.enharmonic-switch{width:max-content;max-width:calc(100% - 16px);bottom:12px}.card footer{gap:10px;height:auto;min-height:64px;padding:10px 12px}.card footer>span{min-width:0;font-size:10px}.card footer button{min-width:118px;padding:11px 12px}.tip{padding:11px 12px}}#staff,#staff *{-webkit-user-select:none;user-select:none}#staff [data-clef]{pointer-events:none}:root{--training-font:Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--training-serif:Georgia, "Songti SC", STSong, serif;--training-page-width:1120px;--training-sidebar-width:270px;--training-gap:18px;--training-radius:22px;--training-control-height:52px;--training-touch-height:44px;--training-title-size:clamp(26px, 3vw, 36px);--training-body-size:14px;--training-label-size:14px;--training-meta-size:12px}html{font-size:16px}body,button,input{font-family:var(--training-font)}button{font-size:var(--training-label-size)}.training-layout{width:min(var(--training-page-width), calc(100% - 36px));grid-template-columns:var(--training-sidebar-width) minmax(0, 1fr);gap:var(--training-gap);align-items:start;max-width:none;margin:0 auto;padding:22px 0 40px;display:grid}.settings-card,.practice-card{border-radius:var(--training-radius);min-width:0;height:clamp(600px,100vh - 160px,705px);min-height:600px}.settings-card{padding:20px}.practice-card{overflow:hidden}.section-label>span{width:28px;height:28px;font-size:11px}.section-label p,.settings-card legend,.setting-group>span{font-size:12px;line-height:1.4}.settings-card fieldset{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0 8px;display:grid}.settings-card fieldset legend{grid-column:1/-1}.level-option{margin:0}.level-option>span,.choice-row button{min-height:var(--training-control-height);border-radius:11px;padding:10px 12px}.level-option b,.choice-row button{font-size:var(--training-label-size)}.level-option small,.choice-row button small,.sound-mode small,.direction-mode small,.attempts small,.listening-stage>p{font-size:var(--training-meta-size);line-height:1.45}.sound-mode b,.direction-mode b{font-size:var(--training-label-size)}.shortcut-note,.shortcut-note kbd{font-size:12px}.question-head{min-height:64px;padding:0 22px}.listening-stage{min-height:250px}.play-button{width:112px;height:112px}.play-button>span{font-size:14px}.play-button small{font-size:12px}.answer-grid{gap:10px;padding:16px}.answer-button{min-height:62px;padding:13px 12px}.answer-button strong{font-size:16px;line-height:1.3}.answer-button small{font-size:12px;line-height:1.4}.answer-button .key{width:20px;height:20px;font-size:10px}.answer-grid.many-options{gap:8px;padding:14px 16px 16px}.answer-grid.many-options .answer-button{min-height:56px;padding:10px}.answer-grid.many-options .answer-button strong{font-size:14px}.feedback{gap:12px;margin:0 16px 16px;padding:14px 16px}.feedback h2{font-size:20px}.feedback-copy>p,.feedback p{font-size:12px;line-height:1.5}.note-pills span{font-size:12px}.next-button{min-height:44px;padding:11px 16px;font-size:14px}.practice-card.answered .answer-button strong{font-size:14px}.practice-card.answered .answer-button small{font-size:11px}.practice-card.answered .feedback h2{font-size:18px}body>main:not(.app-shell){width:min(1120px,100% - 36px);margin:22px auto 54px}.modes{gap:10px;margin-bottom:14px}.modes button{min-height:72px;padding:13px 18px}.modes b{font-size:14px}.modes small{font-size:11px;line-height:1.4}.question{min-height:108px;padding:20px 22px}.question h1{font-size:var(--training-title-size)}.question p{font-size:var(--training-body-size);line-height:1.65}.question>div>small,.ear-settings .setting-group>span,.construction-guide .setting-group>span{font-size:12px}.ear-settings .choice-row button,.construction-guide .choice-row button,.construction-sound-modes button{min-height:50px;padding:9px 10px;font-size:13px}.ear-settings .choice-row button small,.construction-guide .choice-row button small,.construction-sound-modes button small{font-size:10px;line-height:1.35}.listen-panel .play{width:116px;height:116px;min-height:116px}.listen-panel .play b{font-size:13px}.listen-panel .play small{font-size:10px}.card footer{gap:18px;min-height:74px;padding:13px 24px}.card footer>span{font-size:12px}.card footer button{min-width:150px;min-height:44px;padding:11px 18px;font-size:14px}.card footer .secondary{min-width:76px}.tip{padding:14px 18px}.tip b,.tip p{font-size:12px}@media (width>=981px){.settings-card,.practice-card{height:clamp(600px,100vh - 160px,705px);min-height:600px}.settings-card{flex-direction:column;display:flex}.settings-card .shortcut-note{margin-top:auto}.practice-card{flex-direction:column;display:flex}.practice-card .listening-stage{flex:1;min-height:250px}}@media (width<=980px){.training-layout{grid-template-columns:1fr;width:min(760px,100% - 32px);padding-top:18px}.settings-card,.practice-card{height:auto;min-height:0}.settings-card{display:block}.settings-card fieldset{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.level-option{margin:0}.settings-card .choice-row{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.settings-card .compact-options{grid-template-columns:repeat(3,minmax(0,1fr))}.shortcut-note{display:none}}@media (width<=800px){body>main:not(.app-shell){width:calc(100% - 24px);margin-top:16px}.question{min-height:0;padding:18px}.train-sidebar .ear-settings,.train-sidebar .construction-guide{padding:14px}.train-sidebar .listen-panel{min-height:176px}}@media (width<=700px){.training-layout{gap:12px;width:calc(100% - 24px);padding-top:12px}.settings-card{border-radius:18px;padding:14px}.practice-card{border-radius:18px}.level-option>span,.choice-row button{min-height:48px;padding:9px 10px}.question-head{min-height:58px;padding:0 14px}.listening-stage{min-height:220px}.play-button{width:96px;height:96px}.play-button>span{font-size:13px}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}.answer-grid.many-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px}.answer-button{min-height:54px;padding:10px}.answer-button strong{font-size:14px}.answer-button small{font-size:11px}.feedback{grid-template-columns:32px 1fr;margin:0 10px 10px;padding:12px}.next-button{grid-column:1/3;width:100%}}@media (width<=560px){body>main:not(.app-shell){width:calc(100% - 20px);margin:12px auto 32px}.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}.modes button{grid-template-columns:28px minmax(0,1fr);min-height:60px;padding:9px 10px}.modes i{font-size:17px}.modes b{font-size:13px}.modes small{font-size:10px}.question{padding:16px}.question h1{font-size:clamp(24px,8vw,32px)}.question p{font-size:13px}.train-sidebar .ear-settings,.train-sidebar .construction-guide{padding:10px}.ear-settings .choice-row button,.construction-guide .choice-row button,.construction-sound-modes button{min-height:44px;padding:7px 6px;font-size:12px}.ear-settings .choice-row button small,.construction-guide .choice-row button small,.construction-sound-modes button small{font-size:9px}.train-sidebar .listen-panel{min-height:138px}.listen-panel .play{width:94px;height:94px;min-height:94px}.paper{padding:8px}#staff{width:100%;height:auto}.card footer{gap:10px;min-height:66px;padding:10px 12px}.card footer>span{font-size:11px}.card footer button{min-width:118px;min-height:44px;padding:10px 12px;font-size:13px}.card footer .secondary{min-width:62px}}.training-select{color:#63706c;background:#fff;border:1px solid #d8d4ca;border-radius:11px;width:100%;min-width:0;min-height:50px;padding:9px 10px;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;font-size:13px;font-weight:800;display:block}.training-select:focus-visible{outline-offset:2px;outline:2px solid #236b62}.training-range{accent-color:#236b62;width:100%;min-width:0;min-height:24px;margin:6px 0;display:block}.choice-row button:disabled{opacity:.4;cursor:not-allowed}.score-paper{overflow:hidden}.musicxml-trial-score{width:100%;min-width:0}.musicxml-frame{background:0 0;border:0;width:100%;height:570px;display:block}.score-progress{color:#75817d;margin-top:12px;padding:0 4px;font-size:12px}.score-progress>div{justify-content:space-between;gap:10px;display:flex}.voice-volume+.voice-volume{margin-top:10px}.voice-volume label{color:#75817d;margin-top:6px;font-size:12px;display:block}.mobile-scroll-tip{display:none}@media (width>=801px){.paper{align-self:stretch}.musicxml-frame{height:650px}.question h1{font-size:clamp(25px,3vw,36px)}}@media (width<=800px){.paper{display:block}.musicxml-frame{height:440px}.mobile-scroll-tip{margin-top:5px;display:block}}@media (width<=560px){.training-select{min-height:44px;font-size:12px}.musicxml-frame{height:420px}.card footer{flex-wrap:wrap}.card footer>span{flex:100%}.card footer button{flex:1}.score-progress{font-size:11px}}.question h1{font-size:clamp(22px,2.1vw,28px);line-height:1.3}@media (width<=560px){.question h1{font-size:23px}}.listen-panel .water-play{isolation:isolate;opacity:1;color:#fff;background:#dcebe6;overflow:hidden}.listen-panel .water-play:disabled{opacity:1;cursor:wait}.listen-panel .water-play .water-fill{height:var(--water-level);z-index:-1;pointer-events:none;background:linear-gradient(#236b62,#172522);transition:height .45s;position:absolute;inset:auto 0 0}.listen-panel .water-play.is-loading .water-fill:before{content:"";background:#236b62;border-radius:45%;width:200%;height:12px;animation:2.4s ease-in-out infinite alternate water-sway;position:absolute;top:-5px;left:-50%}.listen-panel .water-play.is-loading>span{font-variant-numeric:tabular-nums;font-size:23px;font-weight:800}.listen-panel .water-play.is-loading>span,.listen-panel .water-play.is-loading b,.listen-panel .water-play.is-loading small{color:#fff;text-shadow:0 1px 3px #172522,0 0 5px #172522}.listen-panel .water-play small{color:#d3e4dd}@keyframes water-sway{0%{transform:translate(-5%)rotate(-3deg)}to{transform:translate(5%)rotate(3deg)}}@media (prefers-reduced-motion:reduce){.listen-panel .water-play .water-fill{transition:none}.listen-panel .water-play.is-loading .water-fill:before{animation:none}}@media (width<=560px){.listen-panel .water-play.is-loading>span{font-size:20px}}