@media (width>=1400px) and (width<=1540px) and (height>=760px) and (height<=940px){html,body,#root{overscroll-behavior:none;width:100%;height:100%;min-height:100%;margin:0;overflow:hidden}.main-page{background-image:url(/public/main_tablet_bg.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%}.student-quiz-page{box-sizing:border-box;overscroll-behavior:none;touch-action:none;width:100vw;height:100dvh;min-height:0;padding:0;overflow:hidden}.student-quiz-header{box-sizing:border-box;border-radius:14px;height:52px;min-height:52px;margin:0 10px 5px;padding:0 11px}.student-header-left,.student-header-center{min-width:0}.student-header-right{flex:none;gap:5px}.student-header-left h2{font-size:16px;line-height:1}.student-course-inline{margin-left:6px;font-size:9px}.student-question-type{min-height:28px;padding:0 10px;font-size:9px}.student-logout-btn{border-radius:12px;min-height:32px;padding:0 10px;font-size:9px}.student-timer,.student-timer-box{border-radius:12px!important;min-height:32px!important;padding:3px 9px!important}.student-timer strong,.student-timer-time{font-size:20px!important;line-height:1!important}.student-timer span,.student-timer-label{font-size:12px!important}.student-feedback,.notice-message{z-index:3000;max-width:min(560px,80vw);position:fixed;top:58px;left:50%;transform:translate(-50%)}.student-question-progress-guide,.student-type3-guide.student-question-progress-guide{box-sizing:border-box;border-radius:13px;gap:3px 8px;width:auto;height:60px;min-height:60px;padding:4px 10px 3px}.student-question-progress-copy{gap:6px}.student-question-progress-type{min-height:18px;padding:0 7px;font-size:7px}.student-question-progress-copy>strong,.student-type3-guide.student-question-progress-guide .student-question-progress-copy>strong{font-size:10px;line-height:1.05}.student-question-progress-summary{gap:3px;min-height:22px;padding:0 3px}.student-question-progress-summary>span{gap:3px;min-height:22px;padding:0 6px;font-size:4px}.student-question-progress-summary strong{font-size:12px;line-height:1}.student-question-progress-summary em{font-size:8px;line-height:1}.student-question-progress-track{height:3px}.student-quiz-page>.student-type1-page{--type1-treble-staff-offset-y:44px;--type1-bass-staff-offset-y:-11px;--type1-tab-treble-clef-width:30px;--type1-tab-treble-clef-x:-27px;--type1-tab-treble-clef-y:-14px;--type1-tab-bass-clef-width:36px;--type1-tab-bass-clef-x:-27px;--type1-tab-bass-clef-y:-20px;--type1-white-answer-width:calc(100% - 6px);--type1-white-answer-max-height:58%;--type1-white-answer-top:76%;--type1-black-answer-width:calc(100% - 4px);--type1-black-answer-max-height:calc(100% - 4px);--type1-black-answer-top:50%}.student-type1-page .music-staff{--staff-y-scale:.8;--staff-note-scale:.8;--staff-left-info-width:108px;--staff-key-signature-scale:.8;--staff-key-signature-x:2px;--staff-key-signature-y:-11px;--staff-line-thickness:2px;--staff-line-opacity:.9;--staff-slot-padding-x:9px;--staff-slot-gap:5px;--staff-slot-border-width:1px;--staff-slot-border-opacity:.5;--staff-slot-radius:7px;--staff-pitch-hit-height:16px;--staff-pitch-hit-scale:.8;--staff-ledger-width:42px;--staff-ledger-thickness:1.5px;--staff-ledger-opacity:.85;--staff-answer-name-width:33px;--staff-answer-name-height:66px;--staff-answer-name-treble-edge:-63px;--staff-answer-name-bass-edge:-30px}.student-quiz-page .student-type1-page .music-staff.student.treble{--staff-clef-width:var(--type1-tab-treble-clef-width,52px);--staff-clef-height:var(--type1-tab-treble-clef-height,88px);--staff-clef-x:var(--type1-tab-treble-clef-x,-27px);--staff-clef-y:var(--type1-tab-treble-clef-y,-16px)}.student-quiz-page .student-type1-page .music-staff.student.bass{--staff-clef-width:var(--type1-tab-bass-clef-width,64px);--staff-clef-height:var(--type1-tab-bass-clef-height,58px);--staff-clef-x:var(--type1-tab-bass-clef-x,-27px);--staff-clef-y:var(--type1-tab-bass-clef-y,-16px)}.student-quiz-page:has(.student-type1-page){box-sizing:border-box;flex-direction:column;width:100vw;height:100dvh;min-height:0;padding:10px 0 0;display:flex;overflow:hidden}.student-quiz-page:has(.student-type1-page) .student-quiz-header{flex:none}.student-quiz-page>.student-type1-page{box-sizing:border-box;flex:1 1 0;grid-template-rows:60px minmax(0,1fr);gap:6px;width:100%;height:auto;min-height:0;padding:0 10px 10px;display:grid;overflow:hidden}.student-type1-page.student-question-progress-guide{height:60px;min-height:60px}.student-type1-board,.student-type1-page .student-quiz-board{grid-template-rows:420px 88px minmax(160px,1fr);gap:8px;height:100%;min-height:0;display:grid;overflow:hidden}.student-type1-page .student-type1-staff-card{--student-staff-frame-width:76%;--student-staff-frame-border:7px;height:100%;min-height:0;padding:7px 9px;overflow:hidden}.student-type1-page .student-type1-staff-stack{gap:0;height:100%;min-height:0}.student-type1-page .student-type1-staff-frame{box-sizing:border-box;height:100%;min-height:0;overflow:hidden}.student-type1-page .student-type1-staff-frame .music-staff,.student-type1-page .student-type1-staff-frame .music-staff-board{height:150px;min-height:150px}.student-quiz-page>.student-type1-page .student-type1-staff-frame.treble-frame .music-staff-board{transform:translateY(var(--type1-treble-staff-offset-y,18px))}.student-quiz-page>.student-type1-page .student-type1-staff-frame.bass-frame .music-staff-board{transform:translateY(var(--type1-bass-staff-offset-y,-18px))}.student-type1-page .student-palette-area,.student-type1-page .student-palette-box{height:88px;min-height:88px;overflow:hidden}.student-type1-page .student-palette-box{border:none;align-items:center;display:flex}.student-type1-page .student-palette-box img{max-height:68px}.student-type1-page .student-keyboard-panel{box-sizing:border-box;height:100%;min-height:160px;padding-bottom:8px;overflow:hidden}.student-type1-page .student-keyboard-panel .music-keyboard-scroll{box-sizing:border-box;height:100%;padding:5px;overflow:hidden}.student-type1-page .student-keyboard-panel .music-keyboard-inner{min-width:100%}.student-type1-page .student-keyboard-panel .music-white-key{min-height:100%}.student-type1-page .student-keyboard-panel .music-black-key{width:42px;height:82px}.student-type1-page .student-name-list{box-sizing:border-box;justify-content:flex-end;align-items:center;gap:10px;padding:4px 14px;display:flex}.student-type1-page .student-name-card{flex:0 0 58px;width:58px;height:100%;min-height:52px}.student-type1-page .student-keyboard-panel .music-white-key .music-key-answer-img{left:50%;top:var(--type1-white-answer-top,76%);width:var(--type1-white-answer-width,calc(100% - 6px));height:auto;max-width:var(--type1-white-answer-width,calc(100% - 6px));max-height:var(--type1-white-answer-max-height,58%);object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type1-page .student-keyboard-panel .music-black-key .music-key-answer-img{left:50%;top:var(--type1-black-answer-top,50%);width:var(--type1-black-answer-width,calc(100% - 4px));height:auto;max-width:var(--type1-black-answer-width,calc(100% - 4px));max-height:var(--type1-black-answer-max-height,calc(100% - 4px));object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type2-page .music-staff{--staff-note-scale:.8;--staff-left-info-width:116px;--staff-key-signature-scale:.8;--staff-key-signature-x:1px;--staff-key-signature-y:-11px;--staff-line-thickness:2px;--staff-line-opacity:.9;--staff-slot-padding-x:11px;--staff-slot-gap:6px;--staff-slot-border-width:1px;--staff-slot-border-opacity:.5;--staff-slot-radius:8px;--staff-pitch-hit-height:18px;--staff-pitch-hit-scale:.8;--staff-ledger-width:46px;--staff-ledger-thickness:1.75px;--staff-ledger-opacity:.85}.student-quiz-page:has(.student-type2-page){box-sizing:border-box;flex-direction:column;width:100vw;height:100dvh;min-height:0;padding:10px 0 0;display:flex;overflow:hidden}.student-quiz-page:has(.student-type2-page) .student-quiz-header{flex:none}.student-quiz-page>.student-type2-page{--type2-progress-area-height:60px;--type2-staff-area-height:410px;--type2-palette-area-height:100px;--type2-page-gap:5px;--type2-tab-page-padding-top:0px;--type2-tab-page-padding-right:10px;--type2-tab-page-padding-bottom:10px;--type2-tab-page-padding-left:10px;--type2-staff-row-height:180px;--type2-staff-stack-width:74%;--type2-tab-staff-card-padding-y:7px;--type2-tab-staff-card-padding-x:9px;--type2-tab-staff-row-padding-y:0px;--type2-tab-staff-row-padding-x:0px;--type2-tab-staff-border-width:7px;--staff-note-scale:.8;--staff-left-info-width:116px;--staff-key-signature-scale:.8;--staff-key-signature-x:1px;--staff-key-signature-y:2px;--staff-line-thickness:2px;--staff-line-opacity:.9;--staff-slot-padding-x:11px;--staff-slot-gap:6px;--staff-slot-border-width:1px;--staff-slot-border-opacity:.5;--staff-slot-radius:8px;--staff-pitch-hit-height:18px;--staff-pitch-hit-scale:.8;--staff-ledger-width:46px;--staff-ledger-thickness:1.75px;--staff-ledger-opacity:.85;--type2-treble-staff-y-scale:.8;--type2-treble-staff-content-y:36px;--type2-bass-staff-y-scale:.8;--type2-bass-staff-content-y:13px;--type2-treble-clef-width:30px;--type2-treble-clef-x:-27px;--type2-treble-clef-y:14px;--type2-bass-clef-width:36px;--type2-bass-clef-x:-27px;--type2-bass-clef-y:-14px;--type2-active-slot-width:calc(100% - 10px);--type2-active-slot-height:80%;--type2-active-slot-treble-x:0px;--type2-active-slot-treble-y:-32px;--type2-active-slot-bass-x:0px;--type2-active-slot-bass-y:-20px;--type2-active-slot-radius:9px;--type2-active-slot-border-width:2px;--type2-active-slot-color-rgb:59, 130, 246;--type2-active-slot-opacity:.24;--type2-active-slot-edge-opacity:.12;--type2-active-slot-border-opacity:.15;--type2-palette-title-width:84px;--type2-note-card-width:92px;--type2-note-card-height:92%;--type2-note-card-gap:5px;--type2-note-card-radius:10px;--type2-note-card-image-width:30px;--type2-note-card-image-height:42px;--type2-note-card-label-size:7px;--type2-note-palette-padding-right:3px;--type2-tab-palette-padding-y:4px;--type2-tab-palette-padding-x:7px;--type2-tab-keyboard-card-padding-top:5px;--type2-tab-keyboard-card-padding-x:9px;--type2-tab-keyboard-card-padding-bottom:7px;--type2-tab-keyboard-meta-height:25px;--type2-tab-keyboard-meta-gap:3px;--type2-keyboard-scroll-padding:4px;--type2-black-key-width:42px;--type2-black-key-height:52%;--type2-white-name-width:calc(100% - 6px);--type2-white-name-max-height:58%;--type2-white-name-top:76%;--type2-black-name-width:calc(100% - 4px);--type2-black-name-max-height:calc(100% - 4px);--type2-black-name-top:50%;--type2-tab-drag-preview-width:38px;--type2-tab-drag-preview-height:48px;width:100%;height:auto;min-height:0;padding:var(--type2-tab-page-padding-top) var(--type2-tab-page-padding-right) var(--type2-tab-page-padding-bottom) var(--type2-tab-page-padding-left);box-sizing:border-box;grid-template-rows:var(--type2-progress-area-height) var(--type2-staff-area-height) var(--type2-palette-area-height) minmax(0, 1fr);gap:var(--type2-page-gap);flex:1 1 0;align-content:stretch;display:grid;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-staff-frame .music-staff.student.treble{--staff-y-scale:var(--type2-treble-staff-y-scale);--staff-clef-width:var(--type2-treble-clef-width);--staff-clef-height:var(--type2-treble-clef-height);--staff-clef-x:var(--type2-treble-clef-x);--staff-clef-y:var(--type2-treble-clef-y)}.student-quiz-page>.student-type2-page .student-type2-staff-frame .music-staff.student.bass{--staff-y-scale:var(--type2-bass-staff-y-scale);--staff-clef-width:var(--type2-bass-clef-width);--staff-clef-height:var(--type2-bass-clef-height);--staff-clef-x:var(--type2-bass-clef-x);--staff-clef-y:var(--type2-bass-clef-y)}.student-quiz-page>.student-type2-page .student-type2-question-card{height:100%;min-height:0;padding:var(--type2-tab-keyboard-card-padding-top) var(--type2-tab-keyboard-card-padding-x) var(--type2-tab-keyboard-card-padding-bottom);box-sizing:border-box;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-question-top{height:var(--type2-tab-keyboard-meta-height);min-height:var(--type2-tab-keyboard-meta-height);margin-bottom:var(--type2-tab-keyboard-meta-gap)}.student-quiz-page>.student-type2-page .student-type2-current-meta{gap:7px}.student-quiz-page>.student-type2-page .student-type2-meta-badge{min-height:24px;padding:0 9px;font-size:10px}.student-quiz-page>.student-type2-page .student-type2-meta-symbol{font-size:14px}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame{height:calc(100% - var(--type2-tab-keyboard-meta-height) - var(--type2-tab-keyboard-meta-gap));box-sizing:border-box;background:0 0;border:none;border-radius:0;min-height:0;padding:0;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-keyboard,.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-keyboard-scroll,.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-keyboard-inner,.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-white-keys,.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-white-key{height:100%;min-height:0}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-keyboard-scroll{padding:var(--type2-keyboard-scroll-padding);box-sizing:border-box;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-keyboard-inner{width:100%;min-width:100%}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-black-key{width:var(--type2-black-key-width);height:var(--type2-black-key-height)}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-white-key .music-key-answer-img{left:50%;top:var(--type2-white-name-top);width:var(--type2-white-name-width);height:auto;max-width:var(--type2-white-name-width);max-height:var(--type2-white-name-max-height);object-fit:contain;object-position:center;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-quiz-page>.student-type2-page .student-type2-keyboard-frame .music-black-key .music-key-answer-img{left:50%;top:var(--type2-black-name-top);width:var(--type2-black-name-width);height:auto;max-width:var(--type2-black-name-width);max-height:var(--type2-black-name-max-height);object-fit:contain;object-position:center;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-quiz-page>.student-type2-page .student-type2-staff-card{height:100%;min-height:0;padding:var(--type2-tab-staff-card-padding-y) var(--type2-tab-staff-card-padding-x);box-sizing:border-box;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-staff-stack{width:var(--type2-staff-stack-width);grid-template-rows:repeat(2, var(--type2-staff-row-height));align-content:center;gap:0;height:100%;min-height:0;display:grid}.student-quiz-page>.student-type2-page .student-type2-staff-row{height:var(--type2-staff-row-height);min-height:var(--type2-staff-row-height);padding:var(--type2-tab-staff-row-padding-y) var(--type2-tab-staff-row-padding-x)}.student-quiz-page>.student-type2-page .student-type2-staff-frame{border-width:var(--type2-tab-staff-border-width);height:100%;min-height:0}.student-quiz-page>.student-type2-page .student-type2-staff-frame .music-staff.student,.student-quiz-page>.student-type2-page .student-type2-staff-frame .music-staff.student .music-staff-board{width:100%;height:100%;min-height:0}.student-quiz-page>.student-type2-page .student-type2-palette-card{height:100%;min-height:0;padding:var(--type2-tab-palette-padding-y) var(--type2-tab-palette-padding-x);box-sizing:border-box;grid-template-columns:var(--type2-palette-title-width) minmax(0, 1fr);gap:5px;overflow:hidden}.student-quiz-page>.student-type2-page .student-type2-palette-title strong{font-size:10px}.student-quiz-page>.student-type2-page .student-type2-palette-title p{display:none}.student-quiz-page>.student-type2-page .student-type2-note-palette{grid-template-columns:repeat(5, var(--type2-note-card-width));justify-content:end;align-items:center;gap:var(--type2-note-card-gap);width:100%;height:100%;padding-right:var(--type2-note-palette-padding-right);box-sizing:border-box}.student-quiz-page>.student-type2-page .student-type2-note-button{width:var(--type2-note-card-width);height:var(--type2-note-card-height);border-radius:var(--type2-note-card-radius);touch-action:none;min-width:0;min-height:0;padding:3px}.student-quiz-page>.student-type2-page .student-type2-note-button img{width:var(--type2-note-card-image-width);height:var(--type2-note-card-image-height)}.student-quiz-page>.student-type2-page .student-type2-note-button .student-type2-note-label{font-size:var(--type2-note-card-label-size)}.student-quiz-page>.student-type2-page .student-type2-drag-preview-note{width:var(--type2-tab-drag-preview-width);height:var(--type2-tab-drag-preview-height)}.student-quiz-page .student-type3-page{--type3-tab-treble-clef-width:30px;--type3-tab-treble-clef-x:-27px;--type3-tab-treble-clef-y:-10px;--type3-tab-bass-clef-width:36px;--type3-tab-bass-clef-x:-27px;--type3-tab-bass-clef-y:-18px}.student-type3-page .music-staff{--staff-y-scale:.85;--staff-note-scale:.85;--staff-left-info-width:112px;--staff-key-signature-scale:.85;--staff-key-signature-x:1px;--staff-key-signature-y:-8px;--staff-line-thickness:2px;--staff-line-opacity:.9;--staff-slot-padding-x:10px;--staff-slot-gap:5px;--staff-slot-border-width:1px;--staff-slot-border-opacity:.5;--staff-slot-radius:8px;--staff-pitch-hit-height:16px;--staff-pitch-hit-scale:.9;--staff-ledger-width:46px;--staff-ledger-thickness:1.75px;--staff-ledger-opacity:.85;--staff-drop-zone-width:30px;--staff-drop-zone-height:40px;--staff-drop-zone-offset:44px;--staff-drop-zone-border-width:2px;--staff-drop-zone-radius:12px;--staff-answer-image-width:36px;--staff-answer-image-height:60px;--staff-answer-image-offset:52px}.student-quiz-page>.student-type3-page .music-staff.student.treble{--staff-clef-width:var(--type3-tab-treble-clef-width,52px);--staff-clef-height:var(--type3-tab-treble-clef-height,88px);--staff-clef-x:var(--type3-tab-treble-clef-x,-28px);--staff-clef-y:var(--type3-tab-treble-clef-y,-12px)}.student-quiz-page>.student-type3-page .music-staff.student.bass{--staff-clef-width:var(--type3-tab-bass-clef-width,64px);--staff-clef-height:var(--type3-tab-bass-clef-height,58px);--staff-clef-x:var(--type3-tab-bass-clef-x,-28px);--staff-clef-y:var(--type3-tab-bass-clef-y,-12px)}.student-quiz-page:has(.student-type3-page){box-sizing:border-box;flex-direction:column;width:100vw;height:100dvh;min-height:0;padding:10px 0 0;display:flex;overflow:hidden}.student-quiz-page:has(.student-type3-page) .student-quiz-header{flex:none}.student-quiz-page>.student-type3-page{--type3-staff-area-height:500px;--type3-treble-staff-offset-y:18px;--type3-bass-staff-offset-y:-18px;box-sizing:border-box;grid-template-rows:60px var(--type3-staff-area-height) minmax(0, 1fr);flex:1 1 0;align-content:stretch;gap:6px;width:100%;height:auto;min-height:0;padding:0 10px 10px;display:grid;overflow:hidden}.student-type3-guide.student-question-progress-guide{height:60px;min-height:60px}.student-quiz-page .student-type3-staff-card{box-sizing:border-box;align-self:stretch;height:auto;min-height:0;padding:7px 10px 8px;overflow:hidden}.student-quiz-page .student-type3-staff-stack{grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-content:stretch;align-items:stretch;gap:0;width:100%;height:100%;min-height:0;display:grid}.student-quiz-page .student-type3-staff-frame{box-sizing:border-box;border-width:7px;align-self:stretch;width:82%;height:auto;min-height:0;overflow:hidden}.student-quiz-page .student-type3-staff-frame .music-staff,.student-quiz-page .student-type3-staff-frame .music-staff-board{box-sizing:border-box;width:100%;height:100%;min-height:0}.student-quiz-page>.student-type3-page .student-type3-staff-frame.treble-frame .music-staff-board{transform:translateY(var(--type3-treble-staff-offset-y,18px))}.student-quiz-page>.student-type3-page .student-type3-staff-frame.bass-frame .music-staff-board{transform:translateY(var(--type3-bass-staff-offset-y,-18px))}.student-type3-page .music-type3-slot-drop-zone{width:var(--staff-drop-zone-width,38px);height:var(--staff-drop-zone-height,64px);border-width:var(--staff-drop-zone-border-width,2px);border-radius:var(--staff-drop-zone-radius,14px)}.student-type3-page .music-type3-slot-drop-zone.above{top:calc(-1 * var(--staff-drop-zone-offset,43px))}.student-type3-page .music-type3-slot-drop-zone.below{bottom:calc(-1 * var(--staff-drop-zone-offset,43px))}.student-type3-page .student-type3-slot-answer-img{width:var(--staff-answer-image-width,31px);height:var(--staff-answer-image-height,59px)}.student-type3-page .student-type3-slot-answer-img.above{top:calc(-1 * var(--staff-answer-image-offset,41px))}.student-type3-page .student-type3-slot-answer-img.below{bottom:calc(-1 * var(--staff-answer-image-offset,41px))}.student-quiz-page .student-type3-keyboard-card{box-sizing:border-box;flex-direction:column;align-self:stretch;width:100%;height:100%;min-height:0;padding:6px 8px 9px;display:flex;overflow:hidden}.student-quiz-page .student-type3-keyboard-card .music-keyboard{flex:1 1 0;width:100%;height:auto;min-height:0;overflow:hidden}.student-quiz-page .student-type3-keyboard-card .music-keyboard,.student-quiz-page .student-type3-keyboard-card .music-keyboard-scroll,.student-quiz-page .student-type3-keyboard-card .music-keyboard-inner,.student-quiz-page .student-type3-keyboard-card .music-white-keys{height:100%;min-height:0}.student-quiz-page .student-type3-keyboard-card .music-keyboard-scroll{box-sizing:border-box;width:100%;height:100%;min-height:0;padding:5px;overflow:hidden}.student-quiz-page .student-type3-keyboard-card .music-keyboard-inner{box-sizing:border-box;width:100%;min-width:100%;height:100%;min-height:0}.student-quiz-page .student-type3-keyboard-card .music-white-keys{width:100%;height:100%;min-height:0}.student-quiz-page .student-type3-keyboard-card .music-white-key{box-sizing:border-box;height:100%;min-height:0}.student-quiz-page .student-type3-keyboard-card .music-black-key{width:42px;height:45%}.student-quiz-page .student-type3-keyboard-card .music-type3-name-img,.student-quiz-page .student-type3-keyboard-card .music-black-key .music-type3-name-img{width:88%;height:auto}.student-type1-page .student-type1-staff-stack,.student-type2-page .student-type2-staff-stack,.student-type3-page .student-type3-staff-stack{gap:0}.student-quiz-page>.student-type1-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:36px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:36px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:36px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:36px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:36px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:0px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:0px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:18%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:0px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:0px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px}.student-quiz-page>.student-type2-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:22px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:22px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:22px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:22px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:22px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:4px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:4px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:5%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:34px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:34px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px}.student-quiz-page>.student-type3-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:42px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:42px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:42px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:42px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:42px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:0px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:0px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:15%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:0px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:0px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px}}.music-keyboard{flex:1;width:100%;min-width:0;min-height:0}.music-keyboard-scroll{border-radius:16px;width:100%;height:200px;padding:10px;position:relative;overflow:auto hidden}.music-keyboard-inner{min-width:1450px;height:100%;position:relative}.music-white-keys{z-index:1;grid-template-columns:repeat(29,1fr);height:100%;display:grid;position:relative}.music-white-key{background:#fff;border:1px solid #cbd5e1;border-left:none;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;height:100%;padding:8px 3px;transition:all .15s;display:flex;position:relative}.music-white-key:first-child{border-left:1px solid #cbd5e1}.music-white-key.clickable:hover{background:#f0f9ff;box-shadow:inset 0 0 0 2px #0ea5e933}.music-white-key.highlighted{background:#dcfce7;border-color:#22c55e}.music-white-key.current{background:#bbf7d0;box-shadow:inset 0 0 0 3px #22c55e73}.music-white-key.selected{background:#dbeafe;box-shadow:inset 0 0 0 3px #2563eb66}.music-key-label{pointer-events:none;flex-direction:column;align-items:center;gap:2px;display:flex}.music-key-name{color:#0369a1;writing-mode:vertical-rl;text-orientation:mixed;font-size:12px;font-weight:900}.music-key-code{color:#94a3b8;font-size:10px;font-weight:900}.music-black-keys{z-index:2;pointer-events:none;position:absolute;inset:0}.music-black-key{color:#fff;pointer-events:auto;background:#0f172a;border:none;border-radius:0 0 7px 7px;justify-content:center;align-items:flex-end;width:44px;height:96px;padding:0 2px 6px;transition:all .15s;display:flex;position:absolute;top:0;box-shadow:0 4px 8px #0f172a4d}.music-black-key.clickable:hover{background:#1e293b;transform:translateY(1px)}.music-black-key.highlighted{background:#16a34a}.music-black-key.current{background:#15803d;box-shadow:0 0 0 3px #22c55e59}.music-black-key.selected{background:#2563eb}.music-black-label{pointer-events:none;flex-direction:column;align-items:center;display:flex}.music-black-name{color:#fff;writing-mode:vertical-rl;text-orientation:mixed;font-size:9px;font-weight:900}.music-black-code{color:#cbd5e1;writing-mode:vertical-rl;text-orientation:mixed;font-size:8px;font-weight:800}.music-keyboard.disabled{opacity:.6;pointer-events:none}.music-white-key.drop-enabled,.music-black-key.drop-enabled{outline-offset:-4px;outline:2px dashed #0ea5e940}.music-white-key.drop-enabled:hover{background:#f0f9ff;box-shadow:inset 0 0 0 3px #0ea5e938}.music-black-key.drop-enabled:hover{background:#1e293b;box-shadow:0 0 0 3px #0ea5e959}.music-key-answer-img{object-fit:contain;z-index:5;pointer-events:none;width:32px;height:64px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.music-black-key .music-key-answer-img{width:28px;height:56px;bottom:8px}.music-white-key,.music-black-key{overflow:visible}.music-type3-name-img.draggable,.student-name-card img[draggable=true]{-webkit-user-select:none;user-select:none}@media (hover:none) and (pointer:coarse){.music-type3-name-img.draggable,.student-name-card img[draggable=true]{touch-action:none;-webkit-user-drag:none}}@media (hover:hover) and (pointer:fine){.music-type3-name-img.draggable,.student-name-card img[draggable=true]{touch-action:auto;-webkit-user-drag:element;cursor:grab}.music-type3-name-img.draggable:active,.student-name-card img[draggable=true]:active{cursor:grabbing}}.student-pointer-drag-ghost{border-radius:8px}.student-type1-page .music-white-key.drop-enabled,.student-type1-page .music-black-key.drop-enabled{outline-offset:0;outline:none}.music-key-octave-guide{object-fit:contain;z-index:4;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:absolute;left:50%}.music-key-octave-guide.octave-c2{width:var(--octave-key-c2-width,40px);height:var(--octave-key-c2-height,40px);bottom:var(--octave-key-c2-bottom,10px);transform:translateX(calc(-50% + var(--octave-key-c2-x,0px)))}.music-key-octave-guide.octave-c3{width:var(--octave-key-c3-width,40px);height:var(--octave-key-c3-height,40px);bottom:var(--octave-key-c3-bottom,10px);transform:translateX(calc(-50% + var(--octave-key-c3-x,0px)))}.music-key-octave-guide.octave-c4{width:var(--octave-key-c4-width,40px);height:var(--octave-key-c4-height,40px);bottom:var(--octave-key-c4-bottom,10px);transform:translateX(calc(-50% + var(--octave-key-c4-x,0px)))}.music-key-octave-guide.octave-c5{width:var(--octave-key-c5-width,40px);height:var(--octave-key-c5-height,40px);bottom:var(--octave-key-c5-bottom,10px);transform:translateX(calc(-50% + var(--octave-key-c5-x,0px)))}.music-key-octave-guide.octave-c6{width:var(--octave-key-c6-width,40px);height:var(--octave-key-c6-height,40px);bottom:var(--octave-key-c6-bottom,10px);transform:translateX(calc(-50% + var(--octave-key-c6-x,0px)))}.music-staff{background:#fff;border:1px solid #bae6fd;border-radius:18px;min-height:0;padding:10px 14px;overflow:visible}.music-staff-board{background:linear-gradient(#fff,#f8fafc);border-radius:14px;width:100%;height:144px;position:relative;overflow:visible}.music-staff-lines{z-index:1;position:absolute;inset:0}.music-staff-line{opacity:.9;background:#0f172a;height:2px;position:absolute;left:0;right:0}.music-staff-left-info{z-index:5;color:#0369a1;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0}.music-staff-clef{width:var(--staff-clef-width,62px);height:var(--staff-clef-height,92px);object-fit:contain;object-position:center;max-width:none;max-height:none;transform:translate(var(--staff-clef-x,-32px), var(--staff-clef-y,2px));transform-origin:50%;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;display:block}.music-staff.treble{--staff-clef-width:58px;--staff-clef-height:96px;--staff-clef-x:-32px;--staff-clef-y:2px}.music-staff.bass{--staff-clef-width:72px;--staff-clef-height:66px;--staff-clef-x:-32px;--staff-clef-y:0px}.music-key-signature-img{z-index:7;object-fit:contain;pointer-events:none;height:auto;position:absolute}.music-staff-click-layer{z-index:4;grid-template-columns:repeat(8,1fr);gap:8px;padding:0 14px;display:grid;position:absolute;top:0;bottom:0;right:0}.music-staff-slot-column{border-left:1px dashed #7dd3fc8c;border-right:1px dashed #7dd3fc8c;border-radius:10px;position:relative}.music-staff-pitch-hit{background:0 0;border:none;height:8px;padding:0;position:absolute;left:0;right:0;transform:translateY(-50%)}.music-staff-pitch-hit:hover{background:#0ea5e929}.music-slot-number{display:none}.music-note-layer{z-index:6;pointer-events:none;position:absolute;top:0;bottom:0;right:0}.music-note-position{pointer-events:none;position:absolute}.music-ledger-line{opacity:.85;background:#0f172a;width:52px;height:2px;position:absolute;left:-26px}.music-placed-note-anchor{pointer-events:none;z-index:8;width:0;height:0;display:block;position:absolute;top:0;left:0}.music-placed-note-img{object-fit:contain;pointer-events:none;z-index:8;position:absolute}.music-pitch-name-label{z-index:9;color:#0369a1;white-space:nowrap;pointer-events:none;background:#ffffffeb;border-radius:999px;padding:2px 6px;font-size:10px;font-style:normal;font-weight:900;position:absolute;top:18px;left:50%;transform:translate(-50%)}.music-staff.readonly .music-staff-pitch-hit{cursor:default}.music-staff.student{background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;padding:0;display:flex}.music-staff.student .music-staff-board{background:0 0;border:none;width:100%;max-width:100%;height:150px}.music-staff.student .music-staff-click-layer{pointer-events:none}.music-staff.student .music-staff-slot-column{pointer-events:none;background:0 0;border-left:1px solid #0000;border-right:1px solid #0000}.music-staff.student .music-staff-slot-column:hover,.music-staff.student .music-staff-pitch-hit:hover{box-shadow:none!important;background:0 0!important}.music-staff.student .music-staff-pitch-hit,.music-staff.student .music-slot-number,.music-staff.student .music-pitch-name-label{display:none}.music-staff.student *{cursor:default!important}.student-staff-answer-label{z-index:20;color:#c2410c;white-space:nowrap;pointer-events:none;background:#fff7ed;border:2px solid #fb923c;border-radius:999px;padding:4px 10px;font-size:16px;font-weight:900;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #0f172a1f}.student-staff-answer-label.above{top:-54px}.student-staff-answer-label.below{top:34px}.student-staff-answer-layer{z-index:24;pointer-events:none;position:absolute;top:0;bottom:0;right:0;overflow:visible}.student-staff-answer-image-fixed{z-index:25;width:var(--staff-answer-name-width,24px);height:var(--staff-answer-name-height,48px);object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:absolute;transform:translate(-50%)}.student-staff-answer-image-fixed.above{top:var(--staff-answer-name-treble-edge,6px)}.student-staff-answer-image-fixed.below{bottom:var(--staff-answer-name-bass-edge,6px)}.student-temp-correct-btn{color:#15803d;background:#dcfce7;border:none;border-radius:999px;height:42px;padding:0 14px;font-weight:900}.music-staff.student.compact{width:100%;height:148px;min-height:148px;padding:0;overflow:hidden}.music-staff.student.compact .music-staff-board{width:100%;height:148px;min-height:148px;overflow:visible}.music-staff.student.compact .music-key-signature-img{transform-origin:50%;transform:scale(.9)}.music-staff.student.compact .music-note-layer,.music-staff.student.compact .music-staff-click-layer{top:0;bottom:0}@media (width>=900px) and (height<=820px){.music-staff.student.compact,.music-staff.student.compact .music-staff-board{height:116px;min-height:116px}}.music-staff.student.student-placeable .music-staff-pitch-hit:active{background:#6366f157!important}.music-staff.student.student-placeable .music-staff-pitch-hit,.music-staff.student.student-placeable .music-staff-slot-column{cursor:pointer!important}.music-staff.student.student-placeable .music-note-layer{pointer-events:none;z-index:8}.music-staff-octave-guide-layer{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:visible}.music-staff-octave-guide-icon{object-fit:contain;z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:absolute}.music-staff-octave-guide-icon.octave-c6{left:var(--octave-staff-c6-x,96%);top:calc(var(--octave-guide-base-y) * var(--staff-y-scale,1) + var(--octave-staff-c6-y,0px));width:var(--octave-staff-c6-width,42px);height:var(--octave-staff-c6-height,42px);transform:translate(-50%,-50%)}.music-staff-octave-guide-icon.octave-c5{left:var(--octave-staff-c5-x,96%);top:calc(var(--octave-guide-base-y) * var(--staff-y-scale,1) + var(--octave-staff-c5-y,0px));width:var(--octave-staff-c5-width,42px);height:var(--octave-staff-c5-height,42px);transform:translate(-50%,-50%)}.music-staff-octave-guide-icon.octave-c4{left:var(--octave-staff-c4-x,8%);top:calc(var(--octave-guide-base-y) * var(--staff-y-scale,1) + var(--octave-staff-c4-y,0px));width:var(--octave-staff-c4-width,42px);height:var(--octave-staff-c4-height,42px);transform:translate(-50%,-50%)}.music-staff-octave-guide-icon.octave-c3{left:var(--octave-staff-c3-x,96%);top:calc(var(--octave-guide-base-y) * var(--staff-y-scale,1) + var(--octave-staff-c3-y,0px));width:var(--octave-staff-c3-width,42px);height:var(--octave-staff-c3-height,42px);transform:translate(-50%,-50%)}.music-staff-octave-guide-icon.octave-c2{left:var(--octave-staff-c2-x,8%);top:calc(var(--octave-guide-base-y) * var(--staff-y-scale,1) + var(--octave-staff-c2-y,0px));width:var(--octave-staff-c2-width,42px);height:var(--octave-staff-c2-height,42px);transform:translate(-50%,-50%)}.student-type1-staff-stack,.student-type2-staff-stack,.student-type3-staff-stack{position:relative}.student-type1-staff-stack:after,.student-type2-staff-stack:after,.student-type3-staff-stack:after{content:"";left:var(--octave-middle-c-x,5%);top:calc(50% + var(--octave-middle-c-y,0px));width:var(--octave-middle-c-width,40px);height:var(--octave-middle-c-height,40px);z-index:60;pointer-events:none;-webkit-user-select:none;user-select:none;background-image:url(/assets/do-middle-icon-D9gY0COM.png);background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;transform:translate(-50%,-50%)}.music-staff-octave-guide-icon.octave-c4{display:none!important}.note-palette{background:#fff;border:1px solid #bae6fd;border-radius:22px;grid-template-columns:180px 1fr;align-items:center;gap:12px;min-width:0;padding:12px 14px;display:grid;box-shadow:0 8px 18px #0f172a0d}.note-palette-title-row{justify-content:space-between;align-items:center;gap:12px;margin:0;display:flex}.note-palette-title-row h3{color:#0369a1;margin:0 0 4px;font-size:18px}.note-palette-title-row p{color:#64748b;margin:0;font-size:12px}.note-palette-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.note-palette-count-badge{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;padding:8px 10px;font-size:13px;font-weight:900}.note-palette-mini-btn{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900}.note-palette-mini-btn:hover{background:#f0f9ff}.note-palette-mini-btn.danger{color:#dc2626;background:#fff1f2;border-color:#fecaca}.note-palette-item-grid,.note-palette-item-grid.horizontal{grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.note-palette-item{background:#f8fafc;border:1px solid #bae6fd;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:96px;min-height:0;padding:8px;display:flex}.note-palette-item:hover{background:#f0f9ff;border-color:#38bdf8;transform:translateY(-1px)}.note-palette-item.selected{background:#e0f2fe;border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e92e}.note-palette-item img{object-fit:contain;width:34px;height:58px}.note-palette-item span{color:#0369a1;text-align:center;font-size:12px;font-weight:900}.note-name-grid{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.note-name-item{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd;border-radius:999px;height:42px;font-size:14px;font-weight:900}.note-name-item:hover{background:#e0f2fe;border-color:#38bdf8}@media (width<=1200px){.note-palette{grid-template-columns:1fr}.note-palette-item-grid,.note-palette-item-grid.horizontal,.note-name-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=700px){.note-palette-item-grid,.note-palette-item-grid.horizontal,.note-name-grid{grid-template-columns:repeat(2,1fr)}}.student-success-rain{z-index:9998;pointer-events:none;background:#e0f2fe0f;position:fixed;inset:0;overflow:hidden}.student-success-rain-message{z-index:2;text-align:center;background:#f0fdf4f5;border:2px solid #86efac;border-radius:999px;min-width:250px;padding:15px 24px;animation:1.65s both student-success-message-pop;position:absolute;top:18%;left:50%;transform:translate(-50%);box-shadow:0 14px 34px #16a34a33}.student-success-rain-message strong,.student-success-rain-message span{display:block}.student-success-rain-message strong{color:#15803d;font-size:22px;font-weight:950}.student-success-rain-message span{color:#4b5563;margin-top:3px;font-size:12px;font-weight:850}.student-success-rain-particle{z-index:1;object-fit:contain;filter:drop-shadow(0 5px 7px #0f172a2e);will-change:transform, opacity;animation-name:student-success-fall;animation-timing-function:cubic-bezier(.19,.64,.45,1);animation-fill-mode:both;position:absolute;top:-100px}@keyframes student-success-fall{0%{opacity:0;transform:translate3d(-12px, -12vh, 0) rotate(calc(var(--success-rotation) * -.35)) scale(.62)}12%{opacity:1}to{opacity:.94;transform:translate3d(18px, 116vh, 0) rotate(var(--success-rotation)) scale(1)}}@keyframes student-success-message-pop{0%{opacity:0;transform:translate(-50%)scale(.78)}18%{opacity:1;transform:translate(-50%)scale(1.05)}30%,78%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)scale(.96)}}@media (width<=900px){.student-success-rain-message{min-width:215px;padding:11px 19px;top:13%}.student-success-rain-message strong{font-size:18px}.student-success-rain-particle{max-width:58px;max-height:58px}}@media (prefers-reduced-motion:reduce){.student-success-rain-particle{animation-duration:.35s!important}.student-success-rain-message{animation-duration:.55s}}.student-staff-card{background:#ffffffeb;border:1px solid #bae6fd;border-radius:24px;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:0 8px 22px #0f172a0d}.student-staff-stack{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:minmax(0,1fr);place-content:stretch;place-items:stretch stretch;width:100%;min-width:0;height:100%;min-height:0;display:grid}.student-staff-frame{width:var(--student-staff-frame-width,72%);border:var(--student-staff-frame-border,10px) solid #fff;box-sizing:border-box;background:#fff;justify-content:center;justify-self:center;align-items:center;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:0 6px 18px #0f172a0f}.student-staff-frame.treble-frame{border-radius:var(--student-staff-treble-radius,14px 14px 0 0)}.student-staff-frame.bass-frame{border-radius:var(--student-staff-bass-radius,0 0 14px 14px)}.student-staff-frame .music-staff{background:#fff;border:none;border-radius:0;width:100%;min-width:0;height:100%;min-height:0;padding:0;overflow:visible}.student-staff-frame .music-staff-board{width:100%;min-width:0;min-height:0;overflow:visible}.student-staff-stack{gap:0}.student-staff-frame{border-color:#f4c84a}.student-staff-frame.treble-frame{border-bottom-color:#fff}.student-staff-frame.bass-frame{border-top-color:#fff}.student-type1-page{--type1-treble-staff-offset-y:24px;--type1-bass-staff-offset-y:-24px;--type1-treble-clef-height:108px;--type1-treble-clef-x:-27px;--type1-treble-clef-y:1px;--type1-bass-clef-height:54px;--type1-bass-clef-x:-27px;--type1-bass-clef-y:-6px;--staff-answer-name-width:35px;--staff-answer-name-height:70px;--staff-answer-name-treble-edge:-44px;--staff-answer-name-bass-edge:-44px;--type1-white-answer-width:calc(100% - 10px);--type1-white-answer-max-height:58%;--type1-white-answer-top:76%;--type1-black-answer-width:calc(100% - 4px);--type1-black-answer-max-height:calc(100% - 4px);--type1-black-answer-top:50%;overscroll-behavior:none;overscroll-behavior-y:none;touch-action:none;grid-template-rows:72px minmax(0,1fr);gap:10px;height:calc(100vh - 98px);min-height:0;padding-bottom:20px;display:grid;overflow:hidden}.student-type1-board{grid-template-rows:minmax(0,1fr) 96px 236px;gap:10px;height:auto;min-height:0;display:grid;overflow:hidden}.student-type1-staff-card{--student-staff-frame-width:72%;--student-staff-frame-border:10px;background-image:url(/images/student/student-staff-bg.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;padding:8px}.student-type1-staff-stack{place-content:center stretch;gap:18px}.student-type1-staff-frame{height:100%}.student-type1-staff-frame .music-staff-board{height:150px;min-height:150px}.student-type1-staff-frame.treble-frame .music-staff-board{transform:translateY(var(--type1-treble-staff-offset-y,24px))}.student-type1-staff-frame.bass-frame .music-staff-board{transform:translateY(var(--type1-bass-staff-offset-y,-24px))}.student-type1-page .music-staff.student.treble{--staff-clef-width:var(--type1-treble-clef-width,58px);--staff-clef-height:var(--type1-treble-clef-height,96px);--staff-clef-x:var(--type1-treble-clef-x,-27px);--staff-clef-y:var(--type1-treble-clef-y,0px)}.student-type1-page .music-staff.student.bass{--staff-clef-width:var(--type1-bass-clef-width,72px);--staff-clef-height:var(--type1-bass-clef-height,66px);--staff-clef-x:var(--type1-bass-clef-x,-27px);--staff-clef-y:var(--type1-bass-clef-y,0px)}.student-palette-area{width:100%;height:100%;min-height:0;box-shadow:none;background:0 0;border:none;border-radius:24px;justify-content:center;align-items:center;display:flex;overflow:hidden}.student-palette-box{box-sizing:border-box;background:#ffffffeb;border:8px solid #fff;border-radius:24px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden;box-shadow:0 6px 18px #0f172a0f}.student-name-palette{width:100%;height:100%;box-shadow:none;background:0 0;border:none;padding:6px}.student-name-list{grid-template-columns:repeat(11,1fr);align-items:center;gap:8px;width:100%;height:100%;display:grid}.student-name-card{-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;padding:0;transition:none;display:flex}.student-name-card:hover{background:0 0;border-color:#0000;transform:none}.student-name-card img{object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none;pointer-events:auto;width:40px;height:80px;transition:transform .15s}.student-name-card img:hover{transform:scale(1.08)}.student-name-card img:active{cursor:grabbing;transform:scale(.96)}.student-name-card span,.student-panel-title{display:none!important}.student-keyboard-panel{background-image:url(/images/student/student-keyboard-bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:24px;min-height:0;padding:10px;overflow:hidden}.student-keyboard-panel .music-keyboard,.student-keyboard-panel .music-keyboard-scroll,.student-keyboard-panel .music-keyboard-inner,.student-keyboard-panel .music-white-keys{height:100%}.student-keyboard-panel .music-keyboard-scroll{border-radius:18px;overflow:hidden}.student-keyboard-panel .music-keyboard-inner{min-width:100%}.student-keyboard-panel .music-white-key{border-color:#cbd5e1}.student-keyboard-panel .music-black-key{width:48px;height:96px}.student-keyboard-panel .music-key-label,.student-keyboard-panel .music-black-label{display:none!important}.student-type1-staff-frame,.student-type1-staff-frame *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.student-type1-page .student-name-card img{-webkit-user-select:none;user-select:none}@media (hover:none) and (pointer:coarse){.student-type1-page .student-name-card,.student-type1-page .student-name-card img{touch-action:none;-webkit-user-drag:none}}@media (hover:hover) and (pointer:fine){.student-type1-page .student-name-card img[draggable=true]{touch-action:auto;-webkit-user-drag:element;cursor:grab}.student-type1-page .student-name-card img[draggable=true]:active{cursor:grabbing}}.student-type1-staff-stack{gap:0}.student-type1-page .student-name-list{box-sizing:border-box;justify-content:flex-end;align-items:center;gap:1px;padding:4px 14px;display:flex}.student-type1-page .student-name-card{flex:0 0 58px;width:58px;height:100%;min-height:52px}.student-type1-page .student-keyboard-panel .music-white-key .music-key-answer-img{left:50%;top:var(--type1-white-answer-top,76%);width:var(--type1-white-answer-width,calc(100% - 10px));height:auto;max-width:var(--type1-white-answer-width,calc(100% - 10px));max-height:var(--type1-white-answer-max-height,58%);object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type1-page .student-keyboard-panel .music-black-key .music-key-answer-img{left:50%;top:var(--type1-black-answer-top,50%);width:var(--type1-black-answer-width,calc(100% - 4px));height:auto;max-width:var(--type1-black-answer-width,calc(100% - 4px));max-height:var(--type1-black-answer-max-height,calc(100% - 4px));object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type1-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:42px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:42px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:42px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:42px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:42px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:0px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:0px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:18%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:0px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:0px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px}.student-type2-page{--type2-progress-area-height:60px;--type2-staff-area-min-height:440px;--type2-palette-area-height:100px;--type2-keyboard-area-height:240px;--type2-page-gap:8px;--type2-card-border:#bae6fd;--type2-card-radius:16px;--type2-card-background:#fff;--type2-card-shadow:0 5px 14px #0f172a0d;--type2-staff-row-height:180px;--type2-treble-inner-height:150px;--type2-bass-inner-height:150px;--type2-staff-gap:36px;--type2-palette-button-height:82px;--type2-palette-image-width:32px;--type2-palette-image-height:49px;box-sizing:border-box;grid-template-rows:var(--type2-progress-area-height) minmax(var(--type2-staff-area-min-height), 1fr) var(--type2-palette-area-height) var(--type2-keyboard-area-height);align-content:stretch;gap:var(--type2-page-gap);width:100%;height:calc(100dvh - 92px);min-height:0;padding:10px 14px 24px;display:grid;overflow:hidden}.student-type2-progress-card,.student-type2-question-card,.student-type2-staff-card,.student-type2-palette-card{box-sizing:border-box;border:1px solid var(--type2-card-border);border-radius:var(--type2-card-radius);background:var(--type2-card-background);width:100%;min-width:0;min-height:0;box-shadow:var(--type2-card-shadow)}.student-type2-section-step{box-sizing:border-box;color:#0369a1;letter-spacing:.04em;white-space:nowrap;background:#e0f2fe;border-radius:999px;flex:none;justify-content:center;align-items:center;height:22px;padding:0 9px;font-size:10px;font-weight:900;display:inline-flex}.student-type2-progress-card{background:linear-gradient(135deg,#f8fcff 0%,#eef8ff 55%,#f6f3ff 100%);padding:20px 12px 16px}.student-type2-progress-main{justify-content:space-between;align-items:center;gap:16px;display:flex}.student-type2-progress-copy{align-items:center;gap:10px;min-width:0;display:flex}.student-type2-progress-icon{background:#fff;border-radius:11px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;display:inline-flex;box-shadow:0 4px 12px #0e74b41a}.student-type2-progress-copy strong{color:#17405f;font-size:15px;line-height:1.25;display:block}.student-type2-progress-copy p{color:#6b7f91;margin:2px 0 0;font-size:10px;line-height:1.3}.student-type2-progress-status{flex:none;align-items:center;gap:8px;display:flex}.student-type2-progress-count,.student-type2-remain-count{box-sizing:border-box;white-space:nowrap;background:#ffffffeb;border-radius:999px;justify-content:center;align-items:center;min-height:32px;font-weight:900;display:flex}.student-type2-progress-count{color:#5b7084;border:1px solid #c9e5f7;gap:5px;padding:0 13px;font-size:11px}.student-type2-progress-count strong{color:#0284c7;font-size:20px}.student-type2-progress-count em{color:#5b7084;font-size:13px;font-style:normal}.student-type2-remain-count{color:#6d5a9a;border:1px solid #ddd6fe;gap:4px;padding:0 12px;font-size:11px}.student-type2-remain-count strong{color:#7c3aed;font-size:18px}.student-type2-progress-track{background:#dbeaf4;border-radius:999px;width:100%;height:6px;margin-top:5px;overflow:hidden}.student-type2-progress-value{border-radius:inherit;background:linear-gradient(90deg,#38bdf8 0%,#6366f1 55%,#a855f7 100%);height:100%;transition:width .3s}.student-type2-empty{box-sizing:border-box;justify-content:center;align-items:center;min-height:calc(100dvh - 92px);padding:20px;display:flex}.student-type2-empty-card{box-sizing:border-box;text-align:center;background:#fff;border:1px solid #bae6fd;border-radius:20px;width:min(440px,100%);padding:32px 24px;box-shadow:0 12px 30px #0f172a14}.student-type2-empty-icon{margin-bottom:9px;font-size:38px;display:block}.student-type2-empty-card h3{color:#17405f;margin:0;font-size:19px}.student-type2-empty-card p{color:#718395;margin:7px 0 0;font-size:13px}.student-type2-page{--type2-keyboard-inner-height:180px;--type2-keyboard-scroll-padding:5px;--type2-black-key-width:50px;--type2-black-key-height:45%;--type2-white-name-width:calc(100% - 10px);--type2-white-name-max-height:48%;--type2-white-name-top:73%;--type2-black-name-width:calc(100% - 8px);--type2-black-name-max-height:calc(100% - 8px);--type2-black-name-top:50%}.student-type2-question-card{box-sizing:border-box;background-image:url(/images/student/student-keyboard-bg-type2.png);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;min-height:0;padding:10px 12px 12px;overflow:hidden}.student-type2-question-top{grid-template-columns:1fr;place-items:center;gap:10px;min-height:31px;margin-bottom:5px;display:grid}.student-type2-current-meta{grid-column:1;justify-content:center;justify-self:center;align-items:center;gap:8px;display:flex}.student-type2-meta-badge{box-sizing:border-box;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:30px;padding:0 12px;font-size:12px;font-weight:900;display:inline-flex}.student-type2-meta-symbol{font-size:17px;line-height:1}.student-type2-meta-badge.white-key{color:#1d4ed8;background:#eff6ff;border:1px solid #93c5fd}.student-type2-meta-badge.black-key{color:#fff;background:#1e293b;border:1px solid #334155}.student-type2-meta-badge.sharp{color:#6d28d9;background:#ede9fe;border:1px solid #c4b5fd}.student-type2-meta-badge.flat{color:#0f766e;background:#ccfbf1;border:1px solid #99f6e4}.student-type2-meta-badge.natural{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa}.student-type2-meta-badge.none{color:#0369a1;background:#f0f9ff;border:1px solid #bae6fd}.student-type2-keyboard-frame{width:100%;height:var(--type2-keyboard-inner-height,170px);box-sizing:border-box;background:0 0;border:none;border-radius:0;justify-content:center;align-items:stretch;min-height:0;padding:0;display:flex;overflow:hidden}.student-type2-keyboard-frame .music-keyboard{width:100%;height:100%;min-height:0}.student-type2-keyboard-frame .music-keyboard-scroll{width:100%;height:100%;min-height:0;padding:var(--type2-keyboard-scroll-padding,5px);box-sizing:border-box;overflow:hidden}.student-type2-keyboard-frame .music-keyboard-inner{width:100%;min-width:100%;height:100%}.student-type2-keyboard-frame .music-white-keys,.student-type2-keyboard-frame .music-white-key{height:100%;min-height:0}.student-type2-keyboard-frame .music-black-key{width:var(--type2-black-key-width,44px);height:var(--type2-black-key-height,52%)}.student-type2-page .music-white-key.highlighted,.student-type2-page .music-white-key.current{box-shadow:none;background:#fff;border-color:#cbd5e1}.student-type2-page .music-black-key.highlighted,.student-type2-page .music-black-key.current{background:#0f172a;box-shadow:0 4px 8px #0f172a4d}.student-type2-page .student-type2-keyboard-frame .music-white-key .music-key-answer-img{left:50%;top:var(--type2-white-name-top,76%);width:var(--type2-white-name-width,calc(100% - 10px));height:auto;max-width:var(--type2-white-name-width,calc(100% - 10px));max-height:var(--type2-white-name-max-height,58%);object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type2-page .student-type2-keyboard-frame .music-black-key .music-key-answer-img{left:50%;top:var(--type2-black-name-top,50%);width:var(--type2-black-name-width,calc(100% - 4px));height:auto;max-width:var(--type2-black-name-width,calc(100% - 4px));max-height:var(--type2-black-name-max-height,calc(100% - 4px));object-fit:contain;object-position:center;z-index:5;pointer-events:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%,-50%)}.student-type2-no-current-note{color:#748696;border:2px dashed #d6e3ec;border-radius:13px;justify-content:center;align-items:center;gap:8px;height:105px;font-size:13px;font-weight:900;display:flex}.student-type2-no-current-note span{font-size:22px}.student-type2-no-current-note p{margin:0}.student-type2-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:36px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:36px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:36px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:36px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:36px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:4px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:4px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:5%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:34px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:34px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px;--type2-staff-row-height:200px;--type2-staff-stack-width:72%;--type2-treble-staff-y-scale:1;--type2-treble-staff-content-y:36px;--type2-bass-staff-y-scale:1;--type2-bass-staff-content-y:4px;--type2-treble-clef-height:108px;--type2-treble-clef-x:-27px;--type2-treble-clef-y:19px;--type2-bass-clef-height:54px;--type2-bass-clef-x:-27px;--type2-bass-clef-y:-20px}.student-type2-staff-card{background-image:url(/images/student/student-staff-bg-type2.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;justify-content:center;align-items:center;height:100%;min-height:0;padding:8px 10px;display:flex;overflow:hidden}.student-type2-staff-stack{width:var(--type2-staff-stack-width,72%);grid-template-rows:repeat(2, var(--type2-staff-row-height,180px));place-content:center stretch;gap:0;height:100%;min-height:0;display:grid}.student-type2-staff-row{width:100%;height:var(--type2-staff-row-height,180px);min-height:var(--type2-staff-row-height,180px);box-sizing:border-box;background:#fff;border-radius:0;justify-content:center;align-items:center;padding:0;display:flex;overflow:hidden}.student-type2-staff-stack>.student-type2-staff-row:first-child{border-radius:16px 16px 0 0}.student-type2-staff-stack>.student-type2-staff-row:last-child{border-radius:0 0 16px 16px}.student-type2-staff-frame{box-sizing:border-box;background:0 0;border:7px solid #f4c84a;border-radius:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.student-type2-staff-stack>.student-type2-staff-row:first-child .student-type2-staff-frame{border-bottom-color:#fff;border-radius:14px 14px 0 0}.student-type2-staff-stack>.student-type2-staff-row:last-child .student-type2-staff-frame{border-top-color:#fff;border-radius:0 0 14px 14px}.student-type2-staff-frame .music-staff.student{background:0 0;border:none;border-radius:0;width:100%;height:100%;min-height:0;padding:0;overflow:hidden}.student-type2-staff-frame .music-staff.student .music-staff-board{background:0 0;border:none;border-radius:0;width:100%;height:100%;min-height:0;overflow:hidden}.student-type2-page .student-type2-staff-frame .music-staff.student.treble{--staff-y-scale:var(--type2-treble-staff-y-scale,1);--staff-clef-width:var(--type2-treble-clef-width,58px);--staff-clef-height:var(--type2-treble-clef-height,96px);--staff-clef-x:var(--type2-treble-clef-x,-27px);--staff-clef-y:var(--type2-treble-clef-y,2px)}.student-type2-page .student-type2-staff-frame .music-staff.student.bass{--staff-y-scale:var(--type2-bass-staff-y-scale,1);--staff-clef-width:var(--type2-bass-clef-width,72px);--staff-clef-height:var(--type2-bass-clef-height,66px);--staff-clef-x:var(--type2-bass-clef-x,-27px);--staff-clef-y:var(--type2-bass-clef-y,-2px)}.student-type2-page .music-staff.student.treble .music-staff-lines,.student-type2-page .music-staff.student.treble .music-staff-click-layer,.student-type2-page .music-staff.student.treble .music-note-layer{transform:translateY(var(--type2-treble-staff-content-y,0px))}.student-type2-page .music-staff.student.bass .music-staff-lines,.student-type2-page .music-staff.student.bass .music-staff-click-layer,.student-type2-page .music-staff.student.bass .music-note-layer{transform:translateY(var(--type2-bass-staff-content-y,0px))}.student-type2-page .music-staff.student.treble .music-key-signature-img{margin-top:var(--type2-treble-staff-content-y,0px)}.student-type2-page .music-staff.student.bass .music-key-signature-img{margin-top:var(--type2-bass-staff-content-y,0px)}.student-type2-staff-frame.ready,.student-type2-staff-frame.ready:hover,.student-type2-staff-frame.has-answer{box-shadow:none}.student-type2-page{--type2-palette-title-width:120px;--type2-note-card-width:112px;--type2-note-card-height:82px;--type2-note-card-gap:8px;--type2-note-card-radius:13px;--type2-note-card-image-width:32px;--type2-note-card-image-height:49px;--type2-note-card-label-size:10px;--type2-note-palette-padding-right:6px}.student-type2-palette-card{grid-template-columns:var(--type2-palette-title-width,120px) minmax(0, 1fr);border:none;align-items:center;gap:10px;width:72%;height:100%;margin:0 auto;padding:8px 10px;display:grid}.student-type2-palette-title{min-width:0}.student-type2-palette-title>div{flex-direction:column;align-items:flex-start;gap:3px;display:flex}.student-type2-palette-title .student-type2-section-step{grid-row:1/span 2}.student-type2-palette-title strong{color:#0369a1;font-size:15px;line-height:1.2}.student-type2-palette-title p{color:#64748b;margin:0;font-size:10px;line-height:1.25}.student-type2-note-palette{grid-template-columns:repeat(5, var(--type2-note-card-width,112px));justify-content:end;align-items:center;gap:var(--type2-note-card-gap,8px);width:100%;min-width:0;height:100%;padding-right:var(--type2-note-palette-padding-right,6px);box-sizing:border-box;display:grid}.student-type2-note-button{width:var(--type2-note-card-width,112px);height:var(--type2-note-card-height,82px);box-sizing:border-box;border-radius:var(--type2-note-card-radius,13px);color:#0369a1;cursor:pointer;background:#f8fafc;border:1px solid #bae6fd;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:0;padding:5px;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;display:flex;position:relative}.student-type2-note-button:hover:not(:disabled){background:#f0f9ff;border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 4px 10px #0ea5e91f}.student-type2-note-button:active:not(:disabled){transform:translateY(0)}.student-type2-note-button:disabled{opacity:.52;cursor:not-allowed}.student-type2-note-button img{width:var(--type2-note-card-image-width,32px);height:var(--type2-note-card-image-height,49px);object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none}.student-type2-note-button .student-type2-note-label{text-overflow:ellipsis;white-space:nowrap;color:#0369a1;max-width:100%;font-size:var(--type2-note-card-label-size,10px);font-weight:900;overflow:hidden}.student-type2-note-button.selected{background:linear-gradient(#e0f2fe 0%,#f0f9ff 100%);border-color:#0ea5e9;transform:translateY(-1px);box-shadow:0 0 0 3px #0ea5e933}.student-type2-note-button.selected .student-type2-note-label{color:#0369a1}.student-type2-selected-check{color:#fff;background:#0ea5e9;border-radius:50%;justify-content:center;align-items:center;width:17px;height:17px;font-size:10px;font-weight:900;display:inline-flex;position:absolute;top:4px;right:5px;box-shadow:0 2px 5px #0284c73d}.student-type2-note-button .student-type2-selected-check{color:#fff}.student-type2-note-button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}.student-type2-note-button:active{cursor:grabbing}.student-type2-note-button img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.student-type2-drag-preview-note{z-index:9999;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 5px 5px #0f172a47);will-change:transform;width:44px;height:54px;position:fixed;top:0;left:0;translate:-50% -70%}.student-type2-page{--type2-active-slot-width:calc(100% - 10px);--type2-active-slot-height:84%;--type2-active-slot-treble-x:0px;--type2-active-slot-treble-y:-28px;--type2-active-slot-bass-x:0px;--type2-active-slot-bass-y:-14px;--type2-active-slot-radius:10px;--type2-active-slot-border-width:2px;--type2-active-slot-color-rgb:59, 130, 246;--type2-active-slot-opacity:.26;--type2-active-slot-edge-opacity:.13;--type2-active-slot-border-opacity:.16;--type2-active-slot-animation-duration:1.8s}.student-type2-page .music-staff.student .music-staff-slot-column.student-active-slot{box-shadow:none;background:0 0;border-left:3px solid #0000;border-right:3px solid #0000;animation:none;position:relative}.student-type2-page .music-staff.student.treble .music-staff-slot-column.student-active-slot{--type2-active-slot-current-x:var(--type2-active-slot-treble-x,0px);--type2-active-slot-current-y:var(--type2-active-slot-treble-y,-24px)}.student-type2-page .music-staff.student.bass .music-staff-slot-column.student-active-slot{--type2-active-slot-current-x:var(--type2-active-slot-bass-x,0px);--type2-active-slot-current-y:var(--type2-active-slot-bass-y,24px)}.student-type2-page .music-staff.student .music-staff-slot-column.student-active-slot:before{content:"";width:var(--type2-active-slot-width,calc(100% - 10px));height:var(--type2-active-slot-height,92%);transform:translate(calc(-50% + var(--type2-active-slot-current-x,0px)), calc(-50% + var(--type2-active-slot-current-y,0px)));box-sizing:border-box;border:var(--type2-active-slot-border-width,2px) solid rgba(var(--type2-active-slot-color-rgb,59, 130, 246), var(--type2-active-slot-border-opacity,.16));border-radius:var(--type2-active-slot-radius,10px);background:linear-gradient(180deg, rgba(var(--type2-active-slot-color-rgb,59, 130, 246), var(--type2-active-slot-edge-opacity,.13)), rgba(var(--type2-active-slot-color-rgb,59, 130, 246), var(--type2-active-slot-opacity,.26)), rgba(var(--type2-active-slot-color-rgb,59, 130, 246), var(--type2-active-slot-edge-opacity,.13)));box-shadow:inset 0 0 0 1px rgba(var(--type2-active-slot-color-rgb,59, 130, 246), .08);pointer-events:none;animation:student-active-slot-pulse var(--type2-active-slot-animation-duration,1.8s) ease-in-out infinite;position:absolute;top:50%;left:50%}@keyframes student-active-slot-pulse{0%,to{opacity:.78}50%{opacity:1}}.music-staff.student.student-placeable .music-staff-click-layer{z-index:12;pointer-events:auto}.music-staff.student.student-placeable .music-staff-slot-column{pointer-events:auto}.music-staff.student.student-placeable .music-staff-pitch-hit{pointer-events:auto;background:0 0;border:0;border-radius:999px;height:14px;padding:0;transition:background 90ms,box-shadow 90ms,transform 90ms;display:block;left:2px;right:2px;cursor:pointer!important}.music-staff.student.student-placeable .music-staff-pitch-hit:hover{background:#0ea5e938!important;box-shadow:inset 0 0 0 2px #0284c740!important}.music-staff.student.student-placeable .music-staff-pitch-hit.student-drag-hover{transform:translateY(-50%)scaleY(1.14);background:#2563eb6b!important;box-shadow:0 0 0 4px #60a5fa3d,inset 0 0 0 2px #1e40af6b!important}.music-staff.student.placement-disabled .music-staff-click-layer{pointer-events:none}.music-staff.student.placement-disabled .music-staff-pitch-hit{cursor:not-allowed!important}.music-staff.student:not(.student-placeable) .music-staff-pitch-hit{display:none}.student-type2-staff-frame.drag-over{box-shadow:none!important;outline:none!important;transform:none!important}.student-type2-staff-frame.drag-over:after{display:none!important}@media (pointer:coarse){.student-type2-note-button,.student-type2-note-button img,.student-type2-drag-preview-note{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.music-staff.student.student-placeable .music-staff-pitch-hit{touch-action:none}}.student-type2-page .music-staff.student.student-placeable .music-staff-pitch-hit:hover{box-shadow:none!important;background:0 0!important;transform:translateY(-50%)!important}.student-type2-page .music-staff.student.student-placeable .music-staff-pitch-hit.student-drag-hover{background:#2563eb57!important;transform:translateY(-50%)scaleY(1.1)!important;box-shadow:0 0 0 4px #60a5fa33,inset 0 0 0 2px #1e40af59!important}.student-type2-note-button,.student-type2-note-button img{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.student-type2-staff-card,.student-type2-staff-stack,.student-type2-staff-frame,.music-staff-pitch-hit{touch-action:none}.student-type3-page{--type3-treble-clef-height:108px;--type3-treble-clef-x:-27px;--type3-treble-clef-y:1px;--type3-bass-clef-height:54px;--type3-bass-clef-x:-27px;--type3-bass-clef-y:-6px;box-sizing:border-box;overscroll-behavior:none;overscroll-behavior-y:none;touch-action:none;grid-template-rows:72px minmax(0,1fr) 286px;gap:10px;height:calc(100vh - 98px);min-height:0;padding-bottom:28px;display:grid;overflow:hidden}.student-type3-guide,.student-type3-page .music-staff.student.treble{--staff-clef-width:var(--type3-treble-clef-width,58px);--staff-clef-height:var(--type3-treble-clef-height,96px);--staff-clef-x:var(--type3-treble-clef-x,-27px);--staff-clef-y:var(--type3-treble-clef-y,0px)}.student-type3-page .music-staff.student.bass{--staff-clef-width:var(--type3-bass-clef-width,72px);--staff-clef-height:var(--type3-bass-clef-height,66px);--staff-clef-x:var(--type3-bass-clef-x,-27px);--staff-clef-y:var(--type3-bass-clef-y,0px)}.student-type3-keyboard-card{background:#ffffffeb;border:1px solid #bae6fd;border-radius:24px;min-width:0;min-height:0;box-shadow:0 8px 22px #0f172a0d}.student-type3-guide{justify-content:space-between;align-items:center;gap:18px;padding:10px 18px;display:flex}.student-type3-guide>div:first-child{align-items:center;gap:12px;display:flex}.student-type3-guide>div:first-child span{color:#0369a1;background:#e0f2fe;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900}.student-type3-guide strong{color:#0f172a;font-size:18px;font-weight:900}.student-type3-progress{color:#64748b;align-items:baseline;gap:7px;font-weight:900;display:flex}.student-type3-progress strong{color:#0ea5e9;font-size:26px}.student-type3-progress em{font-style:normal}.student-type3-staff-card{--student-staff-frame-width:72%;--student-staff-frame-border:10px;background-image:url(/images/student/student-staff-bg-type3.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;padding:10px 14px 12px}.student-type3-staff-title,.student-type3-keyboard-title{justify-content:space-between;align-items:center;gap:14px;min-height:38px;display:flex}.student-type3-staff-title span,.student-type3-keyboard-title strong{color:#0369a1;font-size:17px;font-weight:900}.student-type3-staff-title p,.student-type3-keyboard-title p{color:#64748b;margin:0;font-size:13px;font-weight:800}.student-type3-staff-stack{flex:1;gap:12px}.student-type3-staff-frame{height:100%}.student-type3-staff-frame .music-staff-board{width:100%;height:150px;overflow:visible}.student-type3-keyboard-card{background-image:url(/images/student/student-keyboard-bg-type3.png);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;padding:8px 12px 10px;display:flex;overflow:hidden}.student-type3-keyboard-card .music-keyboard{flex:1;min-height:0}.student-type3-keyboard-card .music-keyboard-scroll{height:100%;overflow:hidden}.student-type3-keyboard-card .music-keyboard-inner{min-width:100%}.music-type3-name-img{z-index:9;object-fit:contain;-webkit-user-select:none;user-select:none;width:84%;height:auto;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.music-type3-name-img.draggable{cursor:grab;pointer-events:auto}.music-type3-name-img.draggable:active{cursor:grabbing}.music-black-key .music-type3-name-img{width:84%;height:auto;bottom:6px}.music-staff.student.type3-drop-mode .music-staff-click-layer{pointer-events:none;overflow:visible}.music-staff.student.type3-drop-mode .music-staff-slot-column.type3-current-slot{pointer-events:auto;z-index:18;background:#dbeafe29;border:2px solid #60a5fa85;border-radius:12px;box-shadow:inset 0 0 0 1px #ffffff85}.music-type3-slot-drop-zone{z-index:40;pointer-events:auto;background:#e0f2fe80;border:3px dashed #38bdf8;border-radius:13px;width:36px;height:48px;animation:1.1s ease-in-out infinite type3DropPulse;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 5px 14px #0ea5e924}.music-type3-slot-drop-zone.above{top:-52px}.music-type3-slot-drop-zone.below{bottom:-52px}.music-staff.student.type3-drop-disabled .music-type3-slot-drop-zone{pointer-events:none;opacity:.55;animation:none}.student-type3-slot-answer-img{z-index:42;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 8px #0f172a29);width:36px;height:66px;position:absolute;left:50%;transform:translate(-50%)}.student-type3-slot-answer-img.above{top:-56px}.student-type3-slot-answer-img.below{bottom:-56px}.student-type3-staff-answer-img{display:none!important}.student-type3-staff-frame.treble-frame .music-staff-board{transform:translateY(24px)}.student-type3-staff-frame.bass-frame .music-staff-board{transform:translateY(-24px)}@keyframes type3DropPulse{0%,to{opacity:.62}50%{opacity:1}}.student-type3-keyboard-card .music-black-key{width:50px;height:45%}.student-type3-guide.student-question-progress-guide{gap:7px 18px;padding:9px 16px 8px;display:grid}.student-type3-guide.student-question-progress-guide .student-question-progress-copy{align-items:center;gap:12px;display:flex}.student-type3-guide.student-question-progress-guide .student-question-progress-copy>strong{color:#0f172a;font-size:17px;font-weight:900}.student-type3-staff-stack{gap:0}.student-type3-page{--octave-key-c2-width:42px;--octave-key-c2-height:42px;--octave-key-c2-bottom:58px;--octave-key-c2-x:0px;--octave-key-c3-width:42px;--octave-key-c3-height:42px;--octave-key-c3-bottom:58px;--octave-key-c3-x:0px;--octave-key-c4-width:42px;--octave-key-c4-height:42px;--octave-key-c4-bottom:58px;--octave-key-c4-x:0px;--octave-key-c5-width:42px;--octave-key-c5-height:42px;--octave-key-c5-bottom:58px;--octave-key-c5-x:0px;--octave-key-c6-width:42px;--octave-key-c6-height:42px;--octave-key-c6-bottom:58px;--octave-key-c6-x:0px;--octave-staff-c2-x:98.5%;--octave-staff-c2-y:0px;--octave-staff-c2-width:32px;--octave-staff-c2-height:32px;--octave-staff-c3-x:98.5%;--octave-staff-c3-y:0px;--octave-staff-c3-width:32px;--octave-staff-c3-height:32px;--octave-middle-c-x:18%;--octave-middle-c-y:0px;--octave-middle-c-width:42px;--octave-middle-c-height:42px;--octave-staff-c5-x:98.5%;--octave-staff-c5-y:0px;--octave-staff-c5-width:32px;--octave-staff-c5-height:32px;--octave-staff-c6-x:98.5%;--octave-staff-c6-y:0px;--octave-staff-c6-width:32px;--octave-staff-c6-height:32px}*{box-sizing:border-box}html,body,#root{color:#1f2937;background:#f0f9ff;width:100%;min-height:100%;margin:0;font-family:Pretendard,Noto Sans KR,Arial,sans-serif}html,body{overscroll-behavior-x:none;overscroll-behavior-y:auto;height:auto;overflow:hidden auto}#root{height:auto;overflow:visible}html.student-quiz-active,body.student-quiz-active{overscroll-behavior:none;overscroll-behavior-y:none;width:100%;height:100%;overflow:hidden}body.student-quiz-active #root{width:100%;height:100%;overflow:hidden}button{cursor:pointer;font-family:inherit}button:disabled{opacity:.6;cursor:not-allowed}.primary-btn,.sub-btn,.logout-btn{border:none;border-radius:12px;padding:12px 18px;font-weight:800}.primary-btn{color:#fff;background:#0ea5e9}.sub-btn{color:#0369a1;background:#e0f2fe}.logout-btn{color:#dc2626;background:#fee2e2}.loading-page{justify-content:center;align-items:center;min-height:100vh;font-size:20px;display:flex}.main-page{isolation:isolate;background-color:#dff6ff;background-image:url(/main_bg.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;width:100vw;height:100dvh;min-height:0;position:fixed;inset:0;overflow:hidden}.main-page:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(#ffffff14 0%,#ffffff08 48%,#0369a114 100%);position:absolute;inset:0}.setting-btn{z-index:5;color:#0369a1;-webkit-backdrop-filter:blur(10px);background:#ffffffe0;border:1px solid #ffffffc2;border-radius:50%;width:clamp(46px,3vw,54px);height:clamp(46px,3vw,54px);font-size:clamp(22px,1.5vw,27px);line-height:1;transition:transform .16s,background-color .16s,box-shadow .16s;position:absolute;top:clamp(16px,2.2vh,28px);right:clamp(18px,2vw,32px);box-shadow:0 10px 28px #0f172a24}.setting-btn:hover{background:#fff;transform:translateY(-2px)rotate(8deg);box-shadow:0 14px 32px #0f172a2e}.setting-btn:focus-visible{outline:none;box-shadow:0 0 0 4px #38bdf847,0 14px 32px #0f172a2e}.main-center{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:clamp(24px,4vh,48px) clamp(20px,4vw,72px);display:flex;position:relative}.main-center h1{color:#0369a1;letter-spacing:-.04em;text-shadow:0 3px 12px #ffffffeb,0 6px 22px #0f172a1f;margin:0 0 clamp(10px,1.2vh,16px);font-size:clamp(38px,4.1vw,72px);font-weight:900;line-height:1.12}.main-center p{color:#334155;text-shadow:0 2px 8px #fffffff2;margin:0 0 clamp(24px,3.4vh,42px);font-size:clamp(16px,1.35vw,23px);font-weight:800;line-height:1.5}.start-btn{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#ffcd4af5,#eeae0dfa);border:2px solid #ffffffb8;border-radius:999px;min-width:clamp(280px,28vw,470px);min-height:clamp(60px,9vh,120px);padding:0 clamp(28px,3vw,50px);font-size:clamp(18px,1.65vw,54px);font-weight:900;transition:transform .18s,box-shadow .18s,filter .18s;box-shadow:0 18px 38px #0ea5e957,inset 0 1px #ffffff6b}.start-btn:hover{filter:saturate(1.08);transform:translateY(-3px)scale(1.015);box-shadow:0 24px 44px #0ea5e966,inset 0 1px #ffffff80}.start-btn:active{transform:translateY(0)scale(.99)}.start-btn:focus-visible{outline:none;box-shadow:0 0 0 5px #bae6fd80,0 24px 44px #0ea5e966}@media (width<=640px){.main-center{padding:76px 18px 24px}.main-center h1{font-size:clamp(34px,11vw,48px)}.main-center p{word-break:keep-all;max-width:320px;font-size:15px}.start-btn{white-space:normal;width:min(100%,360px);min-width:0;min-height:60px;padding:0 20px;font-size:17px}}@media (height<=620px){.main-center h1{font-size:clamp(32px,7vh,48px)}.main-center p{margin-bottom:18px;font-size:14px}.start-btn{min-height:52px;font-size:17px}}.modal-backdrop{z-index:50;background:#0f172a73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-modal,.student-modal,.question-type-modal{background:#fff;border-radius:24px;max-width:calc(100vw - 32px);padding:28px;box-shadow:0 24px 60px #0f172a40}.login-modal{width:380px}.student-modal{width:560px}.login-modal h2,.student-modal h2{color:#0369a1;margin:0 0 22px}.login-modal label,.form-field label{color:#334155;margin-bottom:8px;font-weight:800;display:block}.login-modal input,.form-field input,.form-field select{background:#fff;border:1px solid #bae6fd;border-radius:12px;outline:none;width:100%;height:46px;padding:0 14px;font-size:15px}.login-modal input:focus,.form-field input:focus,.form-field select:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf82e}.error-message{color:#ef4444;margin:12px 0 0;font-size:14px}.modal-actions{gap:10px;margin-top:24px;display:flex}.admin-layout{background:#f8fafc;min-height:100vh;display:flex}.admin-sidebar{color:#fff;background:linear-gradient(#0369a1,#0ea5e9);width:250px;padding:24px 18px}.admin-logo{margin-bottom:32px}.admin-logo strong{font-size:20px;display:block}.admin-logo span{color:#bae6fd;margin-top:6px;display:block}.admin-menu{flex-direction:column;gap:8px;display:flex}.admin-menu a{color:#e0f2fe;border-radius:14px;padding:14px 16px;font-weight:700;text-decoration:none}.admin-menu a.active,.admin-menu a:hover{color:#fff;background:#fff3}.admin-main{flex:1;min-width:0}.admin-header{background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;height:88px;padding:0 32px;display:flex}.admin-header h2{color:#0f172a;margin:0}.admin-header p{color:#64748b;margin:6px 0 0}.admin-content{padding:32px}.admin-card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 12px 30px #0f172a0f}.admin-card h3{color:#0369a1;margin:0 0 10px;font-size:24px}.admin-card p{color:#64748b}.page-title-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.notice-message{color:#0369a1;background:#ecfeff;border:1px solid #67e8f9;border-radius:14px;margin-top:20px;padding:14px 16px;font-weight:700}.table-wrap{margin-top:24px;overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;min-width:900px}.admin-table th{color:#0369a1;text-align:center;background:#f0f9ff;border-bottom:1px solid #bae6fd;padding:14px 12px;font-size:14px}.admin-table td{text-align:center;color:#334155;border-bottom:1px solid #e2e8f0;padding:14px 12px}.admin-table tr:hover td{background:#f8fafc}.student-name{font-weight:800;color:#0f172a!important}.table-actions{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.small-btn{border:none;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:800}.small-btn.gray{color:#475569;background:#f1f5f9}.small-btn.blue{color:#1d4ed8;background:#dbeafe}.small-btn.green{color:#15803d;background:#dcfce7}.small-btn.red{color:#dc2626;background:#fee2e2}.empty-cell{color:#94a3b8!important;padding:40px!important}.form-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-field.full{grid-column:1/-1}.radio-row{background:#f8fafc;border:1px solid #bae6fd;border-radius:12px;gap:18px;padding:12px 14px;display:flex}.radio-row label{align-items:center;gap:6px;margin:0;display:flex}.radio-row input{width:auto;height:auto}.minute-input-row{align-items:center;gap:10px;display:flex}.minute-input-row span{color:#0369a1;font-weight:800}.settings-form{flex-direction:column;gap:18px;margin-top:28px;display:flex}.settings-box{background:#f8fafc;border:1px solid #bae6fd;border-radius:20px;justify-content:space-between;align-items:center;gap:24px;padding:24px;display:flex}.settings-box h4{color:#0369a1;margin:0 0 8px;font-size:20px}.settings-box p{color:#64748b;margin:0;line-height:1.5}.settings-input-row{flex-shrink:0;align-items:center;gap:10px;display:flex}.settings-input-row input{text-align:center;border:1px solid #bae6fd;border-radius:12px;outline:none;width:120px;height:48px;padding:0 14px;font-size:18px;font-weight:800}.settings-info{background:#ecfeff;border:1px dashed #67e8f9;border-radius:18px;padding:20px}.settings-actions{justify-content:flex-end;display:flex}.question-type-modal{width:720px}.question-type-modal-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.question-type-modal-header h2{color:#0369a1;margin:0 0 8px;font-size:26px}.question-type-modal-header p{color:#64748b;margin:0}.modal-close-btn{color:#475569;background:#f1f5f9;border:none;border-radius:50%;width:38px;height:38px;font-size:24px;font-weight:800}.question-type-list{flex-direction:column;gap:12px;display:flex}.question-type-row-card{text-align:left;background:#f8fafc;border:2px solid #bae6fd;border-radius:20px;grid-template-columns:60px 1fr 120px;align-items:center;gap:16px;width:100%;padding:16px 18px;transition:all .18s;display:grid}.question-type-row-card:hover{background:#f0f9ff;border-color:#0ea5e9;transform:translateY(-1px)}.type-row-icon{background:#fff;border:1px solid #bae6fd;border-radius:18px;justify-content:center;align-items:center;width:54px;height:54px;font-size:28px;display:flex}.type-row-icon img{object-fit:contain;width:38px;height:38px;display:block}.type-row-text strong{color:#0369a1;margin-bottom:4px;font-size:19px;display:block}.type-row-text span{color:#0f172a;margin-bottom:4px;font-weight:800;display:block}.type-row-text p{color:#64748b;margin:0;font-size:14px;line-height:1.45}.type-row-arrow{color:#0ea5e9;white-space:nowrap;justify-self:end;font-weight:900}.question-editor-page{background:linear-gradient(#e0f7ff 0%,#f0f9ff 55%,#e0f2fe 100%);grid-template-rows:68px 76px 360px 150px 1fr;gap:10px;width:100vw;height:100vh;padding:14px 18px;display:grid;overflow:hidden}.question-editor-header{background:#fff;border-radius:18px;justify-content:space-between;align-items:center;gap:16px;min-height:0;padding:10px 18px;display:flex;box-shadow:0 8px 18px #0f172a0d}.question-editor-header h2{color:#0369a1;margin:0 0 4px;font-size:23px}.question-editor-header p{color:#64748b;margin:0;font-size:13px}.editor-header-actions{align-items:center;gap:8px;display:flex}.type-badge,.edit-badge,.type-change-btn{white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900}.type-badge{color:#0369a1;background:#e0f2fe}.edit-badge{color:#b45309;background:#fef3c7}.type-change-btn{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd}.type-change-btn:hover{background:#f0f9ff}.question-editor-toolbar{background:#fff;border-radius:18px;grid-template-columns:repeat(4,minmax(120px,1fr)) 1.6fr;gap:10px;min-height:0;padding:12px;display:grid;box-shadow:0 8px 18px #0f172a0d}.editor-control label{color:#0369a1;margin-bottom:5px;font-size:13px;font-weight:900;display:block}.editor-control select{background:#fff;border:1px solid #bae6fd;border-radius:10px;outline:none;width:100%;height:38px;padding:0 10px;font-size:14px}.editor-control select:disabled{color:#94a3b8;cursor:not-allowed;background:#f1f5f9}.editor-control select:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf826}.editor-current-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:0;display:flex}.editor-current-info strong,.editor-current-info span{color:#0369a1;background:#fff;border-radius:999px;padding:7px 10px;font-size:13px;font-weight:900}.question-editor-board{display:contents}.staff-area{background:#ffffffb8;border-radius:22px;grid-template-rows:1fr 1fr;gap:10px;min-height:0;padding:12px;display:grid;box-shadow:inset 0 0 0 1px #bae6fdcc}.staff-slots{grid-template-columns:repeat(8,1fr);align-items:center;gap:8px;padding:0 14px;display:grid;position:absolute;inset:0}.note-slot{background:#f0f9ff94;border:2px dashed #7dd3fc;border-radius:14px;justify-content:center;align-items:flex-end;height:96px;padding-bottom:6px;display:flex}.note-slot span{color:#0369a1;background:#fff;border:1px solid #bae6fd;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:900;display:flex}.editor-bottom-panel{display:contents}.keyboard-box{background:#fff;border:1px solid #bae6fd;border-radius:22px;flex-direction:column;gap:6px;min-width:0;min-height:0;padding:12px 14px;display:flex;box-shadow:0 8px 18px #0f172a0d}.panel-title-row{justify-content:space-between;align-items:center;gap:12px;margin:0;display:flex}.panel-title-row h3{color:#0369a1;margin:0 0 4px;font-size:18px}.panel-title-row p{color:#64748b;margin:0;font-size:12px}@media (width<=1200px){body{overflow-y:auto}.question-editor-page{grid-template-rows:auto auto auto auto auto;height:auto;min-height:100vh;overflow:visible}.question-editor-header,.page-title-row{flex-direction:column;align-items:flex-start}.editor-header-actions{flex-wrap:wrap;width:100%}.question-editor-toolbar{grid-template-columns:repeat(2,1fr)}.editor-current-info{grid-column:1/-1}.admin-layout{flex-direction:column}.admin-sidebar{width:100%}.admin-menu{flex-flow:wrap}}@media (width<=700px){.form-grid,.question-editor-toolbar,.staff-set{grid-template-columns:1fr}.staff-title{flex-direction:row;justify-content:flex-start}.clef-symbol{font-size:40px}.question-type-row-card{grid-template-columns:52px 1fr}.type-row-arrow{grid-column:1/-1;justify-self:start}.settings-box{flex-direction:column;align-items:flex-start}}.question-type-table-badge{white-space:nowrap;box-sizing:border-box;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:5px;min-width:172px;padding:8px 13px;font-size:13px;font-weight:850;line-height:1;display:inline-flex}.question-type-table-badge strong{letter-spacing:.02em;font-size:11px;font-weight:950}.question-type-table-badge.type-1{color:#0369a1;background:#e0f2fe;border-color:#bae6fd}.question-type-table-badge.type-2{color:#15803d;background:#dcfce7;border-color:#bbf7d0}.question-type-table-badge.type-3{color:#7e22ce;background:#f3e8ff;border-color:#e9d5ff}.question-type-table-badge.type-unknown{color:#475569;background:#f1f5f9;border-color:#e2e8f0}.editor-save-message{z-index:60;color:#0369a1;background:#ecfeff;border:1px solid #67e8f9;border-radius:16px;padding:14px 18px;font-weight:900;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 30px #0f172a1f}.note-slot{cursor:pointer}.note-slot.filled{background:#e0f2fee6;border-color:#0ea5e9}.placed-note-img{object-fit:contain;pointer-events:none;width:38px;height:68px;margin-bottom:8px}.note-tool-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.note-count-badge{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;padding:8px 10px;font-size:13px;font-weight:900}.mini-action-btn{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900}.mini-action-btn:hover{background:#f0f9ff}.mini-action-btn.danger{color:#dc2626;background:#fff1f2;border-color:#fecaca}.pitch-board{height:128px}.keyboard-link-info{color:#64748b;background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;align-items:center;gap:8px;height:28px;padding:0 10px;font-size:12px;font-weight:800;display:flex}.keyboard-link-info strong{color:#0369a1}.keyboard-link-info span{color:#0f172a}.keyboard-link-info em{color:#0ea5e9;font-style:normal}.keyboard-actions{align-items:center;gap:8px;display:flex}.question-detail-modal{background:#fff;border-radius:24px;width:960px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);padding:26px;overflow:auto;box-shadow:0 24px 60px #0f172a40}.question-detail-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.question-detail-header h2{color:#0369a1;margin:0 0 6px;font-size:26px}.question-detail-header p{color:#64748b;margin:0}.question-detail-loading{text-align:center;color:#64748b;padding:40px;font-weight:800}.question-detail-summary{grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;display:grid}.question-detail-summary div{background:#f0f9ff;border:1px solid #bae6fd;border-radius:16px;padding:14px}.question-detail-summary strong{color:#0369a1;margin-bottom:6px;font-size:13px;display:block}.question-detail-summary span{color:#0f172a;font-weight:900}.question-note-detail-wrap{overflow-x:auto}.question-note-detail-table{border-collapse:collapse;width:100%;min-width:820px}.question-note-detail-table th{color:#0369a1;text-align:center;background:#f0f9ff;border-bottom:1px solid #bae6fd;padding:12px 10px;font-size:13px}.question-note-detail-table td{text-align:center;color:#334155;border-bottom:1px solid #e2e8f0;padding:12px 10px}.disabled-note-row td{color:#94a3b8;background:#f8fafc}.keyboard-type-chip{color:#0369a1;background:#e0f2fe;border-radius:999px;margin-left:6px;padding:4px 7px;font-size:11px;font-weight:900;display:inline-block}.answer-include,.answer-exclude{border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900;display:inline-block}.answer-include{color:#15803d;background:#dcfce7}.answer-exclude{color:#dc2626;background:#fee2e2}@media (width<=900px){.question-detail-summary{grid-template-columns:repeat(2,1fr)}}.student-quiz-page{overscroll-behavior:none;overscroll-behavior-y:none;touch-action:none;color:#1f2937;background:linear-gradient(#dff6ff 0%,#f0f9ff 52%,#e0f2fe 100%);width:100vw;height:100vh;padding:14px;overflow:hidden}.student-quiz-header{background:#ffffffe0;border:1px solid #bae6fde6;border-radius:24px;grid-template-columns:1fr auto auto;align-items:center;gap:12px;height:74px;margin-bottom:10px;padding:12px 18px;display:grid;box-shadow:0 10px 24px #0f172a0f}.student-header-left h2{color:#0369a1;align-items:baseline;gap:14px;margin:0;font-size:24px;font-weight:900;display:flex}.student-course-inline{color:#64748b;font-size:17px;font-weight:900}.student-header-left p{color:#64748b;margin:0;font-size:14px;font-weight:900}.student-header-center{justify-content:center;align-items:center;display:flex}.student-question-type{color:#0369a1;white-space:nowrap;background:#e0f2fe;border:1px solid #bae6fd;border-radius:999px;align-items:center;height:42px;padding:0 18px;font-size:14px;font-weight:900;display:inline-flex}.student-header-right{align-items:center;gap:10px;display:flex}.student-timer{background:#e0f2fe;border:1px solid #bae6fd;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:132px;height:52px;padding:6px 10px;display:flex}.student-timer span{color:#0369a1;font-size:11px;font-weight:900;line-height:1}.student-timer strong{color:#0f172a;letter-spacing:1px;margin-top:4px;font-size:24px;font-weight:900;line-height:1}.student-logout-btn{color:#dc2626;background:#fee2e2;border:none;border-radius:16px;height:52px;padding:0 18px;font-size:14px;font-weight:900}.student-logout-btn:hover{background:#fecaca}.student-answer-area{text-align:center;color:#64748b;background:#ffffffe6;border:1px dashed #7dd3fc;border-radius:24px;justify-content:center;align-items:center;width:100%;height:100%;font-weight:900;display:flex}.student-answer-area h3{color:#0369a1;margin:0 0 6px;font-size:22px}.student-answer-area p{margin:0;font-size:14px}.student-empty-board,.student-loading-box{text-align:center;color:#64748b;background:#ffffffdb;border:1px solid #bae6fd;border-radius:28px;justify-content:center;align-items:center;height:calc(100vh - 98px);display:flex}.student-empty-board h3{color:#0369a1;margin:0 0 8px;font-size:26px}.student-empty-board p{margin:0;font-weight:800}.student-code-modal{text-align:center;background:#fff;border-radius:28px;width:430px;max-width:calc(100vw - 32px);padding:26px;box-shadow:0 24px 60px #0f172a40}.student-code-modal h2{color:#0369a1;margin:0 0 8px;font-size:28px;font-weight:900}.student-code-modal p{color:#64748b;margin:0 0 16px;font-weight:800}.student-code-display{color:#0369a1;letter-spacing:2px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:18px;justify-content:center;align-items:center;height:56px;margin-bottom:16px;font-size:24px;font-weight:900;display:flex}.student-keypad{grid-template-columns:repeat(3,1fr);gap:11px;display:grid}.student-keypad button{color:#0369a1;background:#e0f2fe;border:none;border-radius:18px;height:64px;font-size:24px;font-weight:900}.student-keypad button:hover{background:#bae6fd}.student-keypad-sub{color:#475569!important;background:#f1f5f9!important;font-size:16px!important}.student-code-modal .modal-actions{margin-top:18px}.student-feedback{z-index:30;border-radius:999px;padding:12px 22px;font-size:18px;font-weight:900;animation:.25s studentFeedbackPop;position:fixed;top:96px;left:50%;transform:translate(-50%);box-shadow:0 10px 24px #0f172a26}.student-feedback span{opacity:.85;margin-left:10px;font-size:13px}.student-feedback.correct{color:#15803d;background:#dcfce7;border:2px solid #86efac}.student-feedback.wrong{color:#dc2626;background:#fee2e2;border:2px solid #fecaca}@keyframes studentFeedbackPop{0%{opacity:0;transform:translate(-50%)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1)}}.admin-analysis-page{flex-direction:column;gap:24px;width:100%;min-width:0;display:flex}.admin-analysis-page>.admin-card{width:100%;min-width:0;overflow:hidden}.admin-analysis-page .page-title-row{align-items:flex-start}.admin-analysis-page .page-title-row h3{margin-bottom:8px}.admin-analysis-page .page-title-row p{margin:0;line-height:1.55}.admin-analysis-page .page-title-row p strong{color:#0f172a;font-size:17px}.analysis-filter-row{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;display:flex}.analysis-filter-row input[type=date]{color:#334155;background:#fff;border:1px solid #bae6fd;border-radius:12px;outline:none;width:156px;height:42px;padding:0 12px;font-family:inherit;font-size:14px;font-weight:700}.analysis-filter-row input[type=date]:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf829}.analysis-filter-row>span{color:#94a3b8;font-weight:900}.analysis-filter-row .primary-btn{height:42px;padding:0 18px}.admin-analysis-page .loading-page{color:#64748b;background:#f8fafc;border-radius:18px;min-height:280px;font-size:17px;font-weight:800}.analysis-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:24px;display:grid}.analysis-summary-card{background:linear-gradient(145deg,#f0f9fff5,#fffffffa);border:1px solid #bae6fd;border-radius:20px;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:126px;padding:20px 18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex;box-shadow:0 8px 20px #0ea5e912}.analysis-summary-card:hover{border-color:#7dd3fc;transform:translateY(-2px);box-shadow:0 12px 26px #0ea5e91f}.analysis-summary-card span{color:#64748b;font-size:14px;font-weight:800}.analysis-summary-card strong{color:#0369a1;letter-spacing:-.5px;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(21px,1.6vw,29px);font-weight:900;line-height:1.2;overflow:hidden}.analysis-section-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px;display:grid}.analysis-panel{background:#f8fafc;border:1px solid #e0f2fe;border-radius:20px;min-width:0;padding:22px}.analysis-panel h4{color:#0369a1;margin:0 0 18px;font-size:19px;font-weight:900}.analysis-type-item{border-bottom:1px solid #e2e8f0;padding:15px 0}.analysis-type-item:first-of-type{padding-top:0}.analysis-type-item:last-child{border-bottom:none;padding-bottom:0}.analysis-type-item>div:first-child{justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;display:flex}.analysis-type-item strong{color:#0f172a;font-size:15px;font-weight:900}.analysis-type-item span{color:#64748b;font-size:13px;font-weight:800}.analysis-rate-row{grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:10px;width:100%;display:grid}.analysis-rate-row:has(.analysis-rate-label){grid-template-columns:92px minmax(0,1fr) 58px}.analysis-rate-label{color:#475569;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;overflow:hidden}.analysis-rate-track{background:#e2e8f0;border-radius:999px;width:100%;height:11px;position:relative;overflow:hidden}.analysis-rate-fill{border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#0ea5e9);min-width:0;height:100%;transition:width .35s}.analysis-rate-row>strong{color:#0369a1;text-align:right;white-space:nowrap;font-size:13px;font-weight:900}.analysis-weak-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-top:22px;display:grid}.analysis-weak-card{background:#f8fafc;border:1px solid #bae6fd;border-radius:18px;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:148px;padding:18px 15px;display:flex}.analysis-weak-card>strong{color:#0369a1;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:900;overflow:hidden}.analysis-weak-card>span{color:#64748b;text-align:center;font-size:13px;font-weight:800;line-height:1.5}.analysis-weak-card .analysis-rate-row{grid-template-columns:minmax(0,1fr) 52px}.analysis-keyboard-stats{grid-template-columns:repeat(10,minmax(72px,1fr));gap:12px;margin-top:22px;display:grid}.analysis-keyboard-stat{background:linear-gradient(#fff,#f8fafc);border:1px solid #cbd5e1;border-radius:14px 14px 18px 18px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:0;min-height:126px;padding:17px 10px;display:flex;position:relative;box-shadow:0 6px 14px #0f172a12}.analysis-keyboard-stat:after{content:"";background:#bae6fd;border-radius:999px;height:4px;position:absolute;bottom:8px;left:12px;right:12px}.analysis-keyboard-stat strong{color:#0f172a;font-size:19px;font-weight:900}.analysis-keyboard-stat span{color:#64748b;font-size:12px;font-weight:800}.analysis-keyboard-stat em{color:#dc2626;font-size:13px;font-style:normal;font-weight:900}.analysis-streak-box{color:#64748b;white-space:nowrap;background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;flex-shrink:0;padding:11px 16px;font-size:14px;font-weight:800}.analysis-streak-box strong{color:#0369a1;margin-left:4px;font-size:17px}.analysis-history-chart{background:repeating-linear-gradient(0deg,#f8fafc 0 49px,#e2e8f0 50px);border:1px solid #e0f2fe;border-radius:20px;align-items:flex-end;gap:10px;width:100%;min-height:290px;margin-top:24px;padding:22px 18px 14px;display:flex;overflow:auto hidden}.analysis-history-column{grid-template-rows:24px minmax(0,1fr) 30px;align-items:end;gap:5px;width:42px;min-width:42px;height:242px;display:grid}.analysis-history-value{color:#0369a1;text-align:center;font-size:11px;font-weight:900}.analysis-history-track{background:#bae6fd73;border-radius:8px 8px 3px 3px;align-items:flex-end;width:22px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.analysis-history-bar{background:linear-gradient(#38bdf8,#0284c7);border-radius:8px 8px 3px 3px;width:100%;min-height:4px;transition:height .3s}.analysis-history-column>span{color:#64748b;text-align:center;white-space:nowrap;transform-origin:50%;font-size:10px;font-weight:800;transform:rotate(-38deg)}.analysis-history-chart::-webkit-scrollbar{height:9px}.analysis-history-chart::-webkit-scrollbar-track{background:#e2e8f0;border-radius:999px}.analysis-history-chart::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:999px}.admin-analysis-page .table-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:18px}.admin-analysis-page .admin-table{margin:0}.admin-analysis-page .admin-table th{z-index:2;white-space:nowrap;position:sticky;top:0}.admin-analysis-page .admin-table td{white-space:nowrap;font-size:13px}.admin-analysis-page .admin-table tbody tr:nth-child(2n) td{background:#fbfdff}.admin-analysis-page .admin-table tbody tr:hover td{background:#f0f9ff}.admin-analysis-page .admin-table td strong{color:#dc2626}.analysis-pagination{justify-content:center;align-items:center;gap:14px;margin-top:22px;display:flex}.analysis-pagination>span{color:#475569;text-align:center;min-width:76px;font-size:14px;font-weight:900}.analysis-pagination .sub-btn{min-width:84px;padding:10px 16px}.analysis-empty{color:#94a3b8;text-align:center;background:#f8fafc;border:1px dashed #bae6fd;border-radius:16px;justify-content:center;align-items:center;width:100%;min-height:120px;padding:30px 18px;font-size:14px;font-weight:800;display:flex}.analysis-weak-grid>.analysis-empty,.analysis-keyboard-stats>.analysis-empty{grid-column:1/-1}@media (width<=1600px){.analysis-summary-grid,.analysis-weak-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analysis-keyboard-stats{grid-template-columns:repeat(5,minmax(82px,1fr))}}@media (width<=1200px){.admin-analysis-page{gap:18px}.admin-analysis-page>.admin-card{padding:22px}.analysis-filter-row{justify-content:flex-start;width:100%}.analysis-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analysis-section-grid{grid-template-columns:1fr}.analysis-weak-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analysis-keyboard-stats{grid-template-columns:repeat(5,minmax(74px,1fr))}}@media (width<=850px){.analysis-summary-grid,.analysis-weak-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-keyboard-stats{grid-template-columns:repeat(3,minmax(76px,1fr))}.analysis-history-chart{min-height:250px}.analysis-history-column{height:202px}}@media (width<=560px){.admin-analysis-page>.admin-card{border-radius:18px;padding:18px 14px}.analysis-filter-row{grid-template-columns:1fr;display:grid}.analysis-filter-row input[type=date]{width:100%}.analysis-filter-row>span{display:none}.analysis-summary-grid{grid-template-columns:1fr}.analysis-summary-card{min-height:106px}.analysis-weak-grid{grid-template-columns:1fr}.analysis-keyboard-stats{grid-template-columns:repeat(2,minmax(76px,1fr))}.analysis-rate-row:has(.analysis-rate-label){grid-template-columns:1fr}.analysis-rate-label,.analysis-streak-box{white-space:normal}}.analysis-page{flex-direction:column;gap:24px;width:100%;min-width:0;display:flex}.analysis-student-selector{width:100%;min-width:0}.analysis-selected-student{background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;align-items:center;gap:9px;padding:10px 12px 10px 16px;display:flex}.analysis-selected-student>span{color:#64748b;font-size:12px;font-weight:800}.analysis-selected-student>strong{color:#0369a1;font-size:15px;font-weight:900}.analysis-selected-student>em{color:#475569;font-size:13px;font-style:normal;font-weight:800}.analysis-selected-student>button{color:#64748b;background:#fff;border:none;border-radius:999px;height:30px;padding:0 11px;font-size:12px;font-weight:900}.analysis-selected-student>button:hover{color:#0369a1;background:#e0f2fe}.analysis-student-filters{background:#f8fafc;border:1px solid #e0f2fe;border-radius:18px;grid-template-columns:minmax(220px,1.8fr) minmax(130px,.8fr) minmax(120px,.7fr) minmax(130px,.8fr) auto;align-items:end;gap:12px;margin-top:24px;padding:18px;display:grid}.analysis-student-search,.analysis-student-filter{min-width:0}.analysis-student-search label,.analysis-student-filter label{color:#475569;margin-bottom:7px;font-size:13px;font-weight:900;display:block}.analysis-student-search input,.analysis-student-filter select{color:#334155;background:#fff;border:1px solid #bae6fd;border-radius:12px;outline:none;width:100%;height:44px;padding:0 13px;font-family:inherit;font-size:14px;font-weight:700}.analysis-student-search input:focus,.analysis-student-filter select:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf826}.analysis-student-search input::placeholder{color:#94a3b8}.analysis-filter-reset-btn{white-space:nowrap;height:44px;padding:0 16px}.analysis-student-list-header{justify-content:space-between;align-items:center;gap:12px;margin-top:24px;display:flex}.analysis-student-list-header strong{color:#0f172a;font-size:17px;font-weight:900}.analysis-student-list-header span{color:#64748b;font-size:13px;font-weight:800}.analysis-student-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;display:grid}.analysis-student-card{width:100%;min-width:0;min-height:148px;color:inherit;text-align:left;background:#fff;border:2px solid #e0f2fe;border-radius:20px;flex-direction:column;justify-content:space-between;gap:14px;padding:17px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex}.analysis-student-card:hover{background:#f8fdff;border-color:#7dd3fc;transform:translateY(-2px);box-shadow:0 10px 22px #0ea5e91a}.analysis-student-card.selected{background:#f0f9ff;border-color:#0ea5e9;box-shadow:inset 0 0 0 1px #0ea5e92e,0 10px 24px #0ea5e91f}.analysis-student-card-main{align-items:center;gap:12px;min-width:0;display:flex}.analysis-student-avatar{color:#fff;background:linear-gradient(135deg,#38bdf8,#0284c7);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:20px;font-weight:900;display:flex;box-shadow:0 7px 15px #0ea5e938}.analysis-student-card-main>div{min-width:0}.analysis-student-card-main strong{color:#0f172a;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:900;display:block;overflow:hidden}.analysis-student-card-main div span{color:#64748b;margin-top:4px;font-size:12px;font-weight:800;display:block}.analysis-student-card-meta{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.analysis-student-card-meta>span,.analysis-student-card-meta>em{border-radius:999px;padding:5px 8px;font-size:11px;font-style:normal;font-weight:900}.analysis-student-card-meta>span{color:#0369a1;background:#e0f2fe}.analysis-student-card-meta>em.active{color:#15803d;background:#dcfce7}.analysis-student-card-meta>em.inactive{color:#64748b;background:#f1f5f9}.analysis-student-card-action{color:#0284c7;text-align:right;border-top:1px solid #e2e8f0;padding-top:10px;font-size:12px;font-weight:900}.analysis-student-card.selected .analysis-student-card-action{color:#0369a1}.analysis-student-loading{color:#64748b;background:#f8fafc;border:1px dashed #bae6fd;border-radius:18px;justify-content:center;align-items:center;min-height:180px;margin-top:22px;font-size:15px;font-weight:800;display:flex}.analysis-no-student{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:340px;display:flex}.analysis-no-student-icon{background:#e0f2fe;border-radius:26px;justify-content:center;align-items:center;width:78px;height:78px;margin-bottom:18px;font-size:36px;display:flex}.analysis-no-student h3{margin:0 0 10px}.analysis-no-student p{max-width:480px;margin:0;line-height:1.7}@media (width<=1400px){.analysis-student-list{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-student-filters{grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(120px,1fr))}.analysis-filter-reset-btn{grid-column:1/-1;justify-self:end}}@media (width<=900px){.analysis-student-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-student-search{grid-column:1/-1}.analysis-filter-reset-btn{grid-column:auto;width:100%}.analysis-student-list{grid-template-columns:1fr}.analysis-selected-student{border-radius:16px;flex-wrap:wrap;width:100%}}@media (width<=560px){.analysis-student-filters{grid-template-columns:1fr;padding:14px}.analysis-student-search{grid-column:auto}.analysis-student-list-header{flex-direction:column;align-items:flex-start}.analysis-student-card{min-height:140px}}.student-question-type-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0f172a80;padding:24px}.student-question-type-modal{background:#fff;border:1px solid #bae6fd;border-radius:30px;flex-direction:column;gap:22px;width:min(1180px,100vw - 48px);max-height:calc(100vh - 48px);padding:28px 30px;display:flex;overflow-y:auto;box-shadow:0 28px 80px #0f172a47,0 8px 24px #0ea5e914}.student-question-type-header{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.student-question-type-header h2{color:#0369a1;margin:8px 0;font-size:32px;font-weight:900;line-height:1.2}.student-question-type-header p{color:#64748b;margin:0;font-size:16px;font-weight:700;line-height:1.5}.student-question-type-kicker{color:#0369a1;letter-spacing:.4px;background:#e0f2fe;border:1px solid #bae6fd;border-radius:999px;justify-content:center;align-items:center;min-height:30px;padding:0 12px;font-size:13px;font-weight:900;display:inline-flex}.student-question-type-close{color:#475569;background:#f1f5f9;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:28px;font-weight:700;line-height:1;transition:background .16s,color .16s,transform .16s;display:flex}.student-question-type-close:hover:not(:disabled){color:#0369a1;background:#e0f2fe;transform:rotate(4deg)}.student-question-type-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;display:grid}.student-question-type-card{text-align:left;background:linear-gradient(#fff 0%,#f8fcff 100%);border:2px solid #bae6fd;border-radius:24px;flex-direction:column;align-items:stretch;min-width:0;min-height:360px;padding:20px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:flex;position:relative;box-shadow:0 10px 24px #0f172a0d}.student-question-type-card:hover:not(:disabled){background:linear-gradient(#fff 0%,#f0f9ff 100%);border-color:#0ea5e9;transform:translateY(-5px);box-shadow:0 18px 34px #0ea5e929,0 6px 16px #0f172a0f}.student-question-type-card.selected{background:linear-gradient(#f0f9ff 0%,#e0f2fe 100%);border-color:#0284c7;box-shadow:0 0 0 4px #0ea5e924,0 18px 34px #0ea5e924}.student-question-type-card.preparing{box-shadow:none;background:linear-gradient(#f8fafc 0%,#f1f5f9 100%);border-style:dashed;border-color:#cbd5e1}.student-question-type-card.preparing,.student-question-type-card.preparing *{cursor:not-allowed}.student-question-type-card.processing{pointer-events:none;opacity:.72}.student-question-type-card-top{justify-content:space-between;align-items:center;gap:10px;min-height:34px;display:flex}.student-question-type-number{color:#0369a1;letter-spacing:.5px;background:#e0f2fe;border:1px solid #bae6fd;border-radius:999px;justify-content:center;align-items:center;min-height:30px;padding:0 11px;font-size:12px;font-weight:900;display:inline-flex}.student-question-type-card.selected .student-question-type-number{color:#fff;background:#0ea5e9;border-color:#0ea5e9}.student-question-type-card.preparing .student-question-type-number{color:#64748b;background:#e2e8f0;border-color:#cbd5e1}.student-question-type-status{color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;justify-content:center;align-items:center;min-height:28px;padding:0 10px;font-size:12px;font-weight:900;display:inline-flex}.student-question-type-icon{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border:1px solid #7dd3fc;border-radius:26px;justify-content:center;align-items:center;width:86px;height:86px;margin:24px auto 20px;font-size:44px;display:flex;box-shadow:inset 0 0 0 6px #ffffff73}.student-question-type-icon img{object-fit:contain;width:62px;height:62px;display:block}.student-question-type-card.selected .student-question-type-icon{background:linear-gradient(135deg,#bae6fd,#7dd3fc);border-color:#38bdf8}.student-question-type-card.preparing .student-question-type-icon{filter:grayscale(.65);opacity:.72;background:#e2e8f0;border-color:#cbd5e1}.student-question-type-text{text-align:center;flex-direction:column;flex:1;align-items:center;display:flex}.student-question-type-text strong{color:#0369a1;font-size:23px;font-weight:900;line-height:1.35;display:block}.student-question-type-text span{color:#0284c7;background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;margin-top:8px;padding:7px 12px;font-size:13px;font-weight:900;display:inline-flex}.student-question-type-text p{color:#64748b;word-break:keep-all;margin:16px 0 0;font-size:15px;font-weight:700;line-height:1.65}.student-question-type-card.preparing .student-question-type-text strong,.student-question-type-card.preparing .student-question-type-text span,.student-question-type-card.preparing .student-question-type-text p{color:#94a3b8}.student-question-type-action{color:#fff;background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-radius:15px;justify-content:center;align-items:center;width:100%;min-height:48px;margin-top:22px;padding:0 16px;font-size:15px;font-weight:900;display:flex;box-shadow:0 10px 20px #0ea5e933}.student-question-type-card:hover:not(:disabled) .student-question-type-action{background:linear-gradient(135deg,#0ea5e9,#0284c7)}.student-question-type-card.selected .student-question-type-action{background:linear-gradient(135deg,#0284c7,#0369a1)}.student-question-type-card.preparing .student-question-type-action{color:#64748b;box-shadow:none;background:#e2e8f0}.student-question-type-footer{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;justify-content:space-between;align-items:center;gap:18px;min-height:54px;padding:14px 16px;display:flex}.student-question-type-footer p{color:#64748b;margin:0;font-size:14px;font-weight:800}.student-question-type-footer .sub-btn{flex-shrink:0;min-width:110px}@media (width<=1100px){.student-question-type-modal{gap:18px;width:calc(100vw - 30px);padding:22px}.student-question-type-header h2{font-size:28px}.student-question-type-header p{font-size:14px}.student-question-type-list{gap:12px}.student-question-type-card{min-height:330px;padding:16px}.student-question-type-icon{width:74px;height:74px;margin:20px auto 16px;font-size:38px}.student-question-type-text strong{font-size:19px}.student-question-type-text p{font-size:13px}}@media (width<=760px){.student-question-type-backdrop{align-items:flex-start;padding:12px;overflow-y:auto}.student-question-type-modal{border-radius:24px;width:100%;max-height:none;margin:12px 0;padding:18px}.student-question-type-header h2{font-size:24px}.student-question-type-list{grid-template-columns:1fr}.student-question-type-card{min-height:auto}.student-question-type-footer{flex-direction:column;align-items:stretch}.student-question-type-footer .sub-btn{width:100%}}.type2-question-editor-page{background:linear-gradient(#e0f7ff 0%,#f0f9ff 52%,#e0f2fe 100%);grid-template-rows:58px 62px minmax(0,1fr);gap:8px;width:100vw;min-width:0;height:100vh;padding:12px 16px;display:grid;overflow:hidden}.type2-question-editor-page .question-editor-header{background:#fffffff5;border:1px solid #d6f0fb;border-radius:17px;justify-content:space-between;align-items:center;gap:14px;min-width:0;height:58px;min-height:0;padding:8px 14px;display:flex;box-shadow:0 6px 16px #0f172a0d}.type2-question-editor-page .question-editor-header>div:first-child{min-width:0}.type2-question-editor-page .question-editor-header h2{color:#0369a1;margin:0 0 3px;font-size:21px;font-weight:900;line-height:1.1}.type2-question-editor-page .question-editor-header p{color:#64748b;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:11px;font-weight:700;line-height:1.25;overflow:hidden}.type2-question-editor-page .editor-header-actions{flex:none;justify-content:flex-end;align-items:center;gap:7px;display:flex}.type2-question-editor-page .type-badge,.type2-question-editor-page .edit-badge,.type2-question-editor-page .type-change-btn{white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;min-height:34px;padding:0 12px;font-size:11px;font-weight:900;display:inline-flex}.type2-question-editor-page .question-editor-header .sub-btn{border-radius:12px;min-height:34px;padding:0 13px;font-size:11px}.type2-question-editor-page .question-editor-toolbar{background:#fffffff5;border:1px solid #d6f0fb;border-radius:17px;grid-template-columns:repeat(4,minmax(120px,1fr)) minmax(250px,1.55fr);align-items:stretch;gap:8px;min-width:0;height:62px;min-height:0;padding:7px 10px;display:grid;box-shadow:0 6px 16px #0f172a0d}.type2-question-editor-page .editor-control{min-width:0}.type2-question-editor-page .editor-control label{color:#0369a1;margin:0 0 3px;font-size:10px;font-weight:900;line-height:1;display:block}.type2-question-editor-page .editor-control select{color:#334155;background:#fff;border:1px solid #bae6fd;border-radius:9px;outline:none;width:100%;min-width:0;height:35px;padding:0 10px;font-size:12px;font-weight:700}.type2-question-editor-page .editor-control select:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf824}.type2-question-editor-page .editor-control select:disabled{color:#a0aec0;cursor:not-allowed;background:#f1f5f9}.type2-question-editor-page .editor-current-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-width:0;min-height:0;padding:6px 10px;display:flex;overflow:hidden}.type2-question-editor-page .editor-current-info strong,.type2-question-editor-page .editor-current-info span{color:#0369a1;white-space:nowrap;background:#fff;border-radius:999px;min-width:0;padding:6px 9px;font-size:10px;font-weight:900}.type2-question-editor-board{grid-template-rows:224px 116px minmax(0,1fr) 50px;gap:8px;min-width:0;min-height:0;display:grid;overflow:hidden}.type2-keyboard-question-board,.type2-question-sequence,.type2-answer-preview,.type2-editor-actions{background:#fffffff5;border:1px solid #c8eafa;border-radius:18px;min-width:0;min-height:0;box-shadow:0 6px 16px #0f172a0b}.type2-keyboard-question-board .panel-title-row,.type2-question-sequence .panel-title-row,.type2-answer-preview .panel-title-row{flex:none;justify-content:space-between;align-items:center;gap:12px;min-width:0;margin:0 0 6px;display:flex}.type2-keyboard-question-board .panel-title-row>div:first-child,.type2-question-sequence .panel-title-row>div:first-child,.type2-answer-preview .panel-title-row>div:first-child{min-width:0}.type2-keyboard-question-board .panel-title-row h3,.type2-question-sequence .panel-title-row h3,.type2-answer-preview .panel-title-row h3{color:#0369a1;margin:0 0 2px;font-size:15px;font-weight:900;line-height:1.1}.type2-keyboard-question-board .panel-title-row p,.type2-question-sequence .panel-title-row p,.type2-answer-preview .panel-title-row p{color:#64748b;margin:0;font-size:10px;font-weight:700;line-height:1.2}.type2-keyboard-question-board{flex-direction:column;padding:8px 11px;display:flex;overflow:hidden}.type2-keyboard-question-board .keyboard-actions{flex:none;align-items:center;gap:6px;display:flex}.type2-keyboard-question-board .note-count-badge{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;justify-content:center;align-items:center;height:29px;padding:0 10px;font-size:10px;font-weight:900;display:inline-flex}.type2-keyboard-question-board .mini-action-btn{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd;border-radius:999px;min-height:29px;padding:0 10px;font-size:10px;font-weight:900}.type2-current-key-info{display:none!important}.type2-keyboard-question-board .music-keyboard{flex:1;width:100%;min-height:0}.type2-keyboard-question-board .music-keyboard-scroll{background:#e9f8ff;border:1px solid #bae6fd;border-radius:13px;width:100%;height:100%;min-height:0;padding:5px;overflow:hidden}.type2-keyboard-question-board .music-keyboard-inner{width:100%;min-width:100%;height:100%}.type2-keyboard-question-board .music-white-keys{height:100%}.type2-keyboard-question-board .music-white-key{border-color:#cbd5e1;border-radius:0 0 5px 5px;min-width:0;height:100%;padding:4px 1px}.type2-keyboard-question-board .music-black-key{border-radius:0 0 5px 5px;width:36px;height:67%;padding:0 1px 4px}.type2-keyboard-question-board .type2-accidental-selector{background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;align-items:center;gap:3px;min-width:0;height:29px;padding:3px;transition:opacity .15s,background-color .15s;display:inline-flex}.type2-keyboard-question-board .type2-accidental-selector>span{color:#0369a1;white-space:nowrap;margin:0 4px 0 6px;font-size:10px;font-weight:900}.type2-keyboard-question-board .type2-accidental-selector button{color:#64748b;white-space:nowrap;background:0 0;border:none;border-radius:999px;height:23px;padding:0 8px;font-size:10px;font-weight:900;transition:color .15s,background-color .15s,box-shadow .15s}.type2-keyboard-question-board .type2-accidental-selector button:hover:not(:disabled){color:#0369a1;background:#e0f2fe}.type2-keyboard-question-board .type2-accidental-selector button.active{color:#fff;background:#0ea5e9;box-shadow:0 2px 6px #0ea5e940}.type2-keyboard-question-board .type2-accidental-selector button:first-of-type.active{color:#fff;background:#64748b;box-shadow:0 2px 6px #4755693d}.type2-keyboard-question-board .type2-accidental-selector.disabled{opacity:.62;background:#f1f5f9}.type2-keyboard-question-board .type2-accidental-selector button:disabled{cursor:not-allowed}.type2-keyboard-question-board .music-white-key.highlighted{background:#dcfce7;border-color:#22c55e}.type2-keyboard-question-board .music-black-key.highlighted{background:#16a34a}.type2-keyboard-question-board .music-white-key.selected,.type2-keyboard-question-board .music-white-key.current{background:#c7f0ff;border-color:#0ea5e9;box-shadow:inset 0 0 0 2px #0ea5e957}.type2-keyboard-question-board .music-black-key.selected,.type2-keyboard-question-board .music-black-key.current{background:#0e7490;box-shadow:0 0 0 2px #0ea5e966}.type2-keyboard-question-board .music-key-label{gap:1px}.type2-keyboard-question-board .music-key-name{font-size:8px;line-height:1}.type2-keyboard-question-board .music-key-code{font-size:7px;line-height:1}.type2-keyboard-question-board .music-black-name{font-size:7px}.type2-keyboard-question-board .music-black-code{font-size:6px}.type2-question-sequence{flex-direction:column;padding:8px 11px;display:flex;overflow:hidden}.type2-question-sequence .panel-title-row{min-height:28px;margin-bottom:5px}.type2-question-sequence .panel-title-row>button,.type2-question-sequence .panel-title-row>div:last-child{flex:none}.type2-question-sequence .mini-action-btn{color:#0369a1;background:#f8fafc;border:1px solid #bae6fd;border-radius:999px;min-height:28px;padding:0 10px;font-size:10px;font-weight:900}.type2-question-sequence .mini-action-btn.danger{color:#dc2626;background:#fff1f2;border-color:#fecaca}.type2-sequence-list{scrollbar-width:thin;scrollbar-color:#7dd3fc #e0f2fe;flex:1;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:48px;align-content:start;gap:5px;width:100%;min-width:0;min-height:0;padding:1px 3px 2px 1px;display:grid;overflow:hidden auto}.type2-sequence-list::-webkit-scrollbar{width:6px}.type2-sequence-list::-webkit-scrollbar-track{background:#e0f2fe;border-radius:999px}.type2-sequence-list::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:999px}.type2-sequence-list::-webkit-scrollbar-thumb:hover{background:#38bdf8}.type2-sequence-card{cursor:pointer;background:#fafdff;border:1px solid #cceaf8;border-radius:10px;grid-template-columns:28px minmax(0,1fr) minmax(70px,.95fr);align-items:center;gap:4px;width:100%;min-width:0;height:48px;padding:4px 5px;transition:border-color .15s,background-color .15s,box-shadow .15s;display:grid;overflow:hidden}.type2-sequence-card:hover{background:#f0f9ff;border-color:#38bdf8}.type2-sequence-card.selected{background:#e0f7ff;border-color:#0ea5e9;box-shadow:inset 0 0 0 1px #0ea5e938}.type2-sequence-order{color:#fff;background:#0ea5e9;border-radius:8px;justify-content:center;align-items:center;width:27px;min-width:27px;height:27px;font-size:13px;font-weight:900;line-height:1;display:flex}.type2-sequence-main{flex-direction:column;justify-content:center;min-width:0;line-height:1.05;display:flex;overflow:hidden}.type2-sequence-main strong{color:#0369a1;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:11px;font-weight:900;display:block;overflow:hidden}.type2-sequence-main span{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-top:2px;font-size:9px;font-weight:900;display:block;overflow:hidden}.type2-sequence-main small{display:none}.type2-sequence-staff{width:100%;min-width:0}.type2-sequence-staff label{display:none}.type2-sequence-staff select{color:#0369a1;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:#fff;border:1px solid #bae6fd;border-radius:8px;outline:none;width:100%;min-width:0;height:29px;padding:0 18px 0 6px;font-size:9px;font-weight:900;overflow:hidden}.type2-sequence-staff select:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf824}.type2-sequence-staff select:disabled{color:#94a3b8;background:#f1f5f9}.type2-sequence-position,.type2-sequence-actions{display:none!important}.type2-sequence-empty{color:#64748b;background:#f0f9ff;border:1px dashed #7dd3fc;border-radius:11px;flex:1;justify-content:center;align-items:center;min-height:0;font-size:11px;font-weight:900;display:flex}.type2-answer-preview{flex-direction:column;padding:8px 11px;display:flex;overflow:hidden}.type2-answer-preview .panel-title-row{min-height:29px;margin-bottom:5px}.type2-preview-counts{flex:none;align-items:center;gap:6px;display:flex}.type2-preview-counts span{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;justify-content:center;align-items:center;min-height:27px;padding:0 9px;font-size:9px;font-weight:900;display:inline-flex}.type2-preview-counts span:last-child{color:#7e22ce;background:#f3e8ff}.type2-preview-staff-list{flex:1;grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;min-width:0;min-height:0;display:grid;overflow:hidden}.type2-preview-staff-box{background:#fafdff;border:1px solid #c8eafa;border-radius:13px;justify-content:center;align-items:center;min-width:0;min-height:0;padding:4px 8px;display:flex;position:relative;overflow:hidden}.type2-preview-staff-label{display:none!important}.type2-preview-staff-box .music-staff{justify-content:center;align-items:center;width:100%;height:100%;min-height:0;display:flex}.type2-preview-staff-box .music-staff-board{width:100%;height:144px;min-height:144px;margin:auto 0}.type2-preview-staff-box,.type2-preview-staff-box .music-staff,.type2-preview-staff-box .music-staff-board{overflow:visible}.type2-preview-staff-list{overflow:hidden}.type2-preview-staff-box .music-pitch-name-label{white-space:nowrap;max-width:70px;font-size:8px;line-height:1}.type2-editor-actions{justify-content:space-between;align-items:center;gap:14px;padding:7px 11px;display:flex;overflow:hidden}.type2-editor-actions>div{align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.type2-editor-actions strong{color:#0369a1;flex:none;font-size:11px;font-weight:900}.type2-editor-actions span{color:#0369a1;background:#e0f2fe;border-radius:999px;flex:none;padding:5px 8px;font-size:10px;font-weight:900}.type2-editor-actions em{color:#475569;white-space:nowrap;text-overflow:ellipsis;min-width:0;margin:0;font-size:10px;font-style:normal;font-weight:800;overflow:hidden}.type2-editor-actions .primary-btn{white-space:nowrap;border-radius:11px;flex:none;min-height:35px;padding:0 18px;font-size:11px}.type2-question-editor-page .editor-save-message{z-index:70;color:#0369a1;background:#ecfeff;border:1px solid #67e8f9;border-radius:14px;max-width:420px;padding:11px 15px;font-size:12px;font-weight:900;position:fixed;bottom:18px;right:20px;box-shadow:0 12px 28px #0f172a1f}@media (width<=1600px){.type2-question-editor-page{grid-template-rows:56px 60px minmax(0,1fr);padding:10px 14px}.type2-question-editor-board{grid-template-rows:158px 112px minmax(0,1fr) 48px}.type2-sequence-card{grid-template-columns:27px minmax(0,1fr) minmax(67px,.9fr);gap:3px;padding:4px}.type2-sequence-main strong{font-size:10px}.type2-sequence-main span{font-size:8px}.type2-sequence-staff select{padding-left:4px;padding-right:15px;font-size:8px}.type2-keyboard-question-board .music-black-key{width:32px}}@media (width<=1200px){.type2-question-editor-page{grid-template-rows:auto auto auto;width:100%;height:auto;min-height:100vh;overflow:hidden auto}.type2-question-editor-page .question-editor-header{flex-direction:column;align-items:flex-start;height:auto;min-height:64px}.type2-question-editor-page .editor-header-actions{flex-wrap:wrap;justify-content:flex-start;width:100%}.type2-question-editor-page .question-editor-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}.type2-question-editor-page .editor-current-info{grid-column:1/-1;min-height:46px}.type2-question-editor-board{grid-template-rows:180px 170px 480px 54px;min-height:850px}.type2-sequence-list{grid-template-columns:repeat(4,minmax(0,1fr))}.type2-sequence-card{grid-template-columns:28px minmax(0,1fr) minmax(82px,1fr)}}@media (width<=760px){.type2-question-editor-page .question-editor-toolbar{grid-template-columns:1fr}.type2-question-editor-page .editor-current-info{flex-wrap:wrap;grid-column:auto}.type2-question-editor-board{grid-template-rows:190px 270px 520px 60px;min-height:1050px}.type2-sequence-list{grid-template-columns:repeat(2,minmax(0,1fr))}.type2-editor-actions{flex-direction:column;align-items:stretch}.type2-editor-actions .primary-btn{width:100%}.type2-preview-counts{display:none}}.analysis-type-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:22px;display:grid}.analysis-type-tab{text-align:left;background:#fff;border:2px solid #dbeafe;border-radius:18px;align-items:center;gap:12px;min-width:0;min-height:86px;padding:14px 16px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex}.analysis-type-tab:hover:not(:disabled){background:#f8fdff;border-color:#7dd3fc;transform:translateY(-2px);box-shadow:0 10px 22px #0ea5e91a}.analysis-type-tab.active{background:linear-gradient(145deg,#f0f9ff,#e0f2fe);border-color:#0ea5e9;box-shadow:inset 0 0 0 1px #0ea5e929,0 10px 24px #0ea5e91f}.analysis-type-tab.disabled{opacity:.58;background:#f8fafc;border-style:dashed}.analysis-type-tab-number{color:#0369a1;background:#e0f2fe;border-radius:999px;flex:none;justify-content:center;align-items:center;min-width:62px;height:34px;padding:0 10px;font-size:13px;font-weight:900;display:inline-flex}.analysis-type-tab.active .analysis-type-tab-number{color:#fff;background:#0ea5e9}.analysis-type-tab-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.analysis-type-tab-copy strong{color:#0f172a;font-size:15px;font-weight:900}.analysis-type-tab-copy small{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;overflow:hidden}.analysis-active-type-info{display:none!important}.analysis-type-content{flex-direction:column;gap:24px;display:flex}.analysis-section-grid.no-top-margin{margin-top:0}.analysis-mini-stat-list{flex-direction:column;gap:10px;display:flex}.analysis-mini-stat-list>div{background:#fff;border:1px solid #e0f2fe;border-radius:13px;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 13px;display:flex}.analysis-mini-stat-list span{color:#64748b;font-size:13px;font-weight:800}.analysis-mini-stat-list strong{color:#0369a1;font-size:18px;font-weight:900}.analysis-error-total{color:#9f1239;background:#fff1f2;border:1px solid #fecaca;border-radius:999px;flex-shrink:0;padding:10px 14px;font-size:13px;font-weight:800}.analysis-error-total strong{color:#dc2626;margin-left:5px;font-size:17px}.analysis-error-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.analysis-error-card{background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid #dbeafe;border-radius:19px;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px 11px;min-width:0;min-height:176px;padding:17px;display:grid}.analysis-error-card.pitch{border-color:#93c5fd}.analysis-error-card.note{border-color:#86efac}.analysis-error-card.accidental{border-color:#fdba74}.analysis-error-icon{color:#0369a1;background:#e0f2fe;border-radius:15px;justify-content:center;align-items:center;width:46px;height:46px;font-size:25px;font-weight:900;display:flex}.analysis-error-card>div:nth-child(2){flex-direction:column;gap:4px;min-width:0;display:flex}.analysis-error-card>div:nth-child(2) strong{color:#0f172a;font-size:15px;font-weight:900}.analysis-error-card>div:nth-child(2) small{color:#64748b;font-size:11px;font-weight:700}.analysis-error-card>em{color:#dc2626;font-size:18px;font-style:normal;font-weight:900}.analysis-error-card .analysis-rate-row{grid-column:1/-1}.analysis-accidental-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.analysis-position-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:20px;display:grid}.analysis-position-card{background:#f8fcff;border:1px solid #bae6fd;border-radius:17px;flex-direction:column;gap:8px;min-width:0;min-height:146px;padding:14px;display:flex}.analysis-position-card>span{color:#64748b;font-size:10px;font-weight:800}.analysis-position-card>strong{color:#0369a1;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:900;overflow:hidden}.analysis-position-card>em{color:#dc2626;font-size:12px;font-style:normal;font-weight:900}.analysis-position-card .analysis-rate-row{grid-template-columns:minmax(0,1fr) 52px;margin-top:auto}.analysis-pattern-badges{flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;display:flex}.analysis-pattern-badges span{color:#dc2626;white-space:nowrap;background:#fee2e2;border-radius:999px;padding:5px 7px;font-size:10px;font-weight:900}.analysis-pattern-table{min-width:1120px}@media (width<=1500px){.analysis-error-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-position-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=1000px){.analysis-type-tabs{grid-template-columns:1fr}.analysis-position-grid,.analysis-accidental-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=620px){.analysis-error-grid,.analysis-position-grid,.analysis-accidental-grid{grid-template-columns:1fr}.analysis-error-card{grid-template-columns:42px minmax(0,1fr) auto}}.staff-area{position:relative}.type3-staff-policy-notice{z-index:20;background:#fffffff0;border:1px solid #bae6fd;border-radius:999px;align-items:center;gap:8px;padding:7px 11px;display:inline-flex;position:absolute;top:8px;right:18px;box-shadow:0 5px 14px #0f172a14}.type3-staff-policy-notice strong{color:#0369a1;font-size:11px;font-weight:900}.type3-staff-policy-notice span{color:#64748b;font-size:10px;font-weight:800}.editor-header-actions .type-badge{white-space:nowrap;align-items:center;min-height:34px;display:inline-flex}.admin-dashboard-page{flex-direction:column;gap:16px;min-width:0;display:flex}.dashboard-hero-card{background:radial-gradient(circle at 88% 12%,#7dd3fc57,#0000 28%),linear-gradient(135deg,#fff,#effaff);border:1px solid #bae6fd;border-radius:24px;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;display:flex;box-shadow:0 10px 28px #0e749014}.dashboard-hero-kicker{color:#0369a1;letter-spacing:.12em;background:#e0f2fe;border-radius:999px;margin-bottom:8px;padding:5px 9px;font-size:10px;font-weight:900;display:inline-flex}.dashboard-hero-card h2{color:#0f172a;margin:0;font-size:26px;font-weight:900}.dashboard-hero-card p{color:#64748b;margin:7px 0 0;font-size:13px;font-weight:700}.dashboard-hero-actions{align-items:center;gap:12px;display:flex}.dashboard-hero-actions>span{color:#94a3b8;flex-direction:column;align-items:flex-end;gap:3px;font-size:10px;font-weight:800;display:flex}.dashboard-hero-actions strong{color:#334155;font-size:12px}.dashboard-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;display:grid}.dashboard-summary-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:12px;min-width:0;min-height:122px;padding:16px;display:grid;box-shadow:0 7px 20px #0f172a0b}.dashboard-summary-card.students{border-color:#bae6fd}.dashboard-summary-card.today{border-color:#a7f3d0}.dashboard-summary-card.complete{border-color:#c4b5fd}.dashboard-summary-card.accuracy{border-color:#fde68a}.dashboard-summary-card.time{border-color:#fdba74}.dashboard-summary-card.questions{border-color:#fbcfe8}.dashboard-summary-icon{background:#f0f9ff;border-radius:14px;justify-content:center;align-items:center;width:43px;height:43px;font-size:20px;display:flex}.dashboard-summary-icon img{object-fit:contain;width:27px;height:27px;display:block}.dashboard-summary-card small{color:#64748b;font-size:11px;font-weight:800;display:block}.dashboard-summary-card strong{color:#0f172a;margin-top:4px;font-size:25px;font-weight:900;line-height:1.1;display:block}.dashboard-summary-card strong.text-value{font-size:20px}.dashboard-summary-card strong em{color:#64748b;margin-left:3px;font-size:11px;font-style:normal}.dashboard-summary-card p{color:#94a3b8;margin:5px 0 0;font-size:10px;font-weight:700}.dashboard-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.dashboard-quick-actions button{color:#1e3a8a;cursor:pointer;background:#fff;border:1px solid #dbeafe;border-radius:15px;min-height:50px;padding:11px 15px;font-size:12px;font-weight:900;transition:transform .16s,border-color .16s,box-shadow .16s}.dashboard-quick-actions button:hover{border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 7px 18px #0ea5e91a}.dashboard-quick-actions button span{color:#0284c7;margin-right:6px;font-size:17px}.dashboard-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(360px,.8fr);gap:16px;min-width:0;display:grid}.dashboard-main-grid.lower,.dashboard-main-grid.bottom{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-panel{min-width:0;margin:0}.dashboard-panel-header{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;display:flex}.dashboard-panel-header h3{color:#0f172a;margin:0;font-size:17px;font-weight:900}.dashboard-panel-header p{color:#64748b;margin:4px 0 0;font-size:11px;font-weight:700}.dashboard-panel-badge,.dashboard-attention-count{color:#0369a1;background:#e0f2fe;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900}.dashboard-trend-chart{grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:10px;height:220px;padding:12px 8px 0;display:grid}.dashboard-trend-column{grid-template-rows:22px minmax(0,1fr) 18px 18px;justify-items:center;gap:3px;min-width:0;height:100%;display:grid}.dashboard-trend-rate{color:#0284c7;font-size:10px;font-weight:900}.dashboard-trend-track{background:#f1f5f9;border-radius:10px 10px 3px 3px;align-items:flex-end;width:min(42px,70%);height:100%;display:flex;overflow:hidden}.dashboard-trend-bar{background:linear-gradient(#38bdf8,#2563eb);border-radius:10px 10px 3px 3px;width:100%}.dashboard-trend-column>strong{color:#334155;font-size:11px}.dashboard-trend-column>small{color:#94a3b8;font-size:10px;font-weight:800}.dashboard-trend-legend{color:#94a3b8;border-top:1px solid #eef2f7;justify-content:space-between;align-items:center;margin-top:12px;padding-top:11px;font-size:10px;font-weight:700;display:flex}.dashboard-trend-legend i.bar{background:#38bdf8;border-radius:3px;width:10px;height:10px;margin-right:5px;display:inline-block}.dashboard-type-list{flex-direction:column;gap:11px;display:flex}.dashboard-type-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:13px}.dashboard-type-card.type-1{border-left:4px solid #38bdf8}.dashboard-type-card.type-2{border-left:4px solid #8b5cf6}.dashboard-type-card.type-3{border-left:4px solid #22c55e}.dashboard-type-card-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.dashboard-type-card-head>div{min-width:0}.dashboard-type-card-head span{color:#0f172a;font-size:12px;font-weight:900;display:block}.dashboard-type-card-head small{color:#94a3b8;margin-top:3px;font-size:9px;font-weight:700;display:block}.dashboard-type-card-head strong{color:#0369a1;font-size:17px;font-weight:900}.dashboard-rate-track{background:#e2e8f0;border-radius:999px;height:7px;margin-top:10px;overflow:hidden}.dashboard-rate-track>div{border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#2563eb);height:100%}.dashboard-type-meta{color:#64748b;justify-content:space-between;margin-top:7px;font-size:9px;font-weight:800;display:flex}.dashboard-student-list,.dashboard-attention-list,.dashboard-problem-alert-list{flex-direction:column;gap:8px;max-height:330px;display:flex;overflow:auto}.dashboard-student-row{text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:14px;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:10px;display:grid}.dashboard-student-row:hover{background:#f8fdff;border-color:#7dd3fc}.dashboard-student-avatar{color:#fff;background:linear-gradient(145deg,#38bdf8,#2563eb);border-radius:13px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:900;display:flex}.dashboard-student-main,.dashboard-student-stat{flex-direction:column;gap:3px;display:flex}.dashboard-student-main strong,.dashboard-student-stat strong{color:#0f172a;font-size:12px;font-weight:900}.dashboard-student-main small,.dashboard-student-stat small{color:#94a3b8;font-size:9px;font-weight:700}.dashboard-student-row em{border-radius:999px;padding:5px 8px;font-size:9px;font-style:normal;font-weight:900}.dashboard-student-row em.playing{color:#15803d;background:#dcfce7}.dashboard-student-row em.finished{color:#64748b;background:#f1f5f9}.dashboard-attention-row{text-align:left;cursor:pointer;background:#fffaf5;border:1px solid #fed7aa;border-radius:14px;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px;display:grid}.dashboard-attention-icon{color:#ea580c;background:#ffedd5;border-radius:11px;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;font-weight:900;display:flex}.dashboard-attention-row>span:nth-child(2){flex-direction:column;gap:2px;min-width:0;display:flex}.dashboard-attention-row strong{color:#0f172a;font-size:12px;font-weight:900}.dashboard-attention-row small{color:#94a3b8;font-size:9px;font-weight:700}.dashboard-attention-row em{color:#c2410c;font-size:10px;font-style:normal;font-weight:900}.dashboard-text-btn{color:#0284c7;cursor:pointer;background:0 0;border:0;font-size:10px;font-weight:900}.dashboard-distribution-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.dashboard-distribution-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:11px}.dashboard-distribution-item>div:first-child{justify-content:space-between;align-items:center;gap:8px;display:flex}.dashboard-distribution-item strong{color:#334155;font-size:10px;font-weight:900}.dashboard-distribution-item span{color:#0369a1;font-size:11px;font-weight:900}.dashboard-distribution-track{background:#e2e8f0;border-radius:999px;height:6px;margin-top:9px;overflow:hidden}.dashboard-distribution-track div{border-radius:inherit;background:linear-gradient(90deg,#7dd3fc,#2563eb);height:100%}.dashboard-problem-alert{text-align:left;cursor:pointer;border-radius:13px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:10px;display:grid}.dashboard-problem-alert.warning{background:#fffbeb;border:1px solid #fde68a}.dashboard-problem-alert.danger{background:#fff7f7;border:1px solid #fecaca}.dashboard-problem-alert>span{color:#dc2626;background:#fff;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;font-weight:900;display:flex}.dashboard-problem-alert>div{flex-direction:column;gap:2px;min-width:0;display:flex}.dashboard-problem-alert strong{color:#0f172a;font-size:11px;font-weight:900}.dashboard-problem-alert small{color:#64748b;font-size:9px;font-weight:700}.dashboard-problem-alert em{color:#dc2626;font-size:12px;font-style:normal;font-weight:900}.dashboard-empty-state{color:#94a3b8;text-align:center;border:1px dashed #cbd5e1;border-radius:14px;justify-content:center;align-items:center;min-height:88px;padding:18px;font-size:11px;font-weight:800;display:flex}.dashboard-empty-state.success{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}.dashboard-loading-card{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:420px;display:flex}.dashboard-loading-spinner{border:4px solid #e0f2fe;border-top-color:#0284c7;border-radius:50%;width:42px;height:42px;margin-bottom:14px;animation:.9s linear infinite dashboardSpin}@keyframes dashboardSpin{to{transform:rotate(360deg)}}@media (width<=1500px){.dashboard-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-main-grid,.dashboard-main-grid.lower,.dashboard-main-grid.bottom{grid-template-columns:1fr}}@media (width<=900px){.dashboard-hero-card,.dashboard-hero-actions{flex-direction:column;align-items:flex-start}.dashboard-summary-grid,.dashboard-quick-actions,.dashboard-distribution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.student-duplicate-backdrop{z-index:1300;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a7a;padding:24px}.student-duplicate-modal{background:#fff;border:1px solid #bae6fd;border-radius:28px;width:min(620px,100vw - 48px);max-height:calc(100vh - 48px);padding:26px;overflow:hidden auto;box-shadow:0 30px 80px #0f172a3d,0 8px 24px #0ea5e91a}.student-duplicate-modal header{text-align:center}.student-duplicate-modal header>span{color:#0369a1;background:#e0f2fe;border:1px solid #bae6fd;border-radius:999px;justify-content:center;align-items:center;min-height:30px;padding:0 12px;font-size:12px;font-weight:900;display:inline-flex}.student-duplicate-modal h2{color:#0f172a;margin:13px 0 8px;font-size:27px;font-weight:900;line-height:1.25}.student-duplicate-modal header p{color:#64748b;margin:0;font-size:14px;font-weight:700;line-height:1.55}.student-duplicate-modal header p strong{color:#0284c7;letter-spacing:.08em;font-size:18px;font-weight:900}.student-duplicate-list{flex-direction:column;gap:11px;width:100%;margin-top:22px;display:flex}.student-duplicate-item{width:100%;min-width:0;min-height:84px;color:inherit;text-align:left;background:linear-gradient(145deg,#fff,#f8fcff);border:2px solid #e0f2fe;border-radius:20px;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 15px;transition:transform .16s,border-color .16s,background-color .16s,box-shadow .16s;display:grid}.student-duplicate-item:hover:not(:disabled){background:#f0f9ff;border-color:#38bdf8;transform:translateY(-2px);box-shadow:0 10px 22px #0ea5e91f}.student-duplicate-item:focus-visible{border-color:#0284c7;outline:none;box-shadow:0 0 0 4px #0ea5e929,0 10px 22px #0ea5e91a}.student-duplicate-item:disabled{opacity:.65;cursor:wait}.student-duplicate-avatar{color:#fff;background:linear-gradient(145deg,#38bdf8,#2563eb);border-radius:17px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:21px;font-weight:900;display:flex;box-shadow:0 8px 18px #2563eb38}.student-duplicate-info{flex-direction:column;align-items:flex-start;gap:4px;min-width:0;display:flex}.student-duplicate-info strong{color:#0f172a;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:18px;font-weight:900;overflow:hidden}.student-duplicate-info small{color:#475569;font-size:12px;font-weight:800}.student-duplicate-info em{color:#94a3b8;font-size:11px;font-style:normal;font-weight:700}.student-duplicate-action{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;justify-content:center;align-items:center;min-width:58px;min-height:34px;padding:0 12px;font-size:12px;font-weight:900;display:inline-flex}.student-duplicate-item:hover:not(:disabled) .student-duplicate-action{color:#fff;background:#0ea5e9}.student-duplicate-modal footer{justify-content:center;align-items:center;margin-top:20px;display:flex}.student-duplicate-modal footer .sub-btn{min-width:140px}@media (width<=640px){.student-duplicate-backdrop{padding:12px}.student-duplicate-modal{border-radius:23px;width:100%;max-height:calc(100vh - 24px);padding:20px 16px}.student-duplicate-modal h2{font-size:23px}.student-duplicate-item{grid-template-columns:46px minmax(0,1fr);gap:11px;min-height:78px;padding:12px}.student-duplicate-avatar{border-radius:15px;width:46px;height:46px;font-size:19px}.student-duplicate-action{grid-column:1/-1;width:100%;min-height:38px}}.student-question-progress-guide{background:#fffffff0;border:1px solid #bae6fd;border-radius:22px;grid-template-rows:minmax(0,1fr) 6px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 18px;min-width:0;min-height:0;padding:9px 16px 8px;display:grid;box-shadow:0 8px 22px #0f172a0d}.student-question-progress-copy{align-items:center;gap:12px;min-width:0;display:flex}.student-question-progress-type{color:#0369a1;white-space:nowrap;background:#e0f2fe;border-radius:999px;flex:none;justify-content:center;align-items:center;min-height:28px;padding:0 11px;font-size:12px;font-weight:900;display:inline-flex}.student-question-progress-copy>strong{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:17px;font-weight:900;overflow:hidden}.student-question-progress-summary{background:#fff;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 14px;line-height:1;display:inline-flex}.student-question-progress-summary>span{color:#64748b;white-space:nowrap;background:#f8fcff;border:1px solid #dbeafe;border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:34px;padding:0 14px;font-size:12px;font-weight:900;line-height:1;display:inline-flex}.student-question-progress-summary strong{color:#0ea5e9;justify-content:center;align-items:center;font-size:22px;font-weight:900;line-height:1;display:inline-flex;transform:translateY(1px)}.student-question-progress-summary em{color:#64748b;justify-content:center;align-items:center;font-size:13px;font-style:normal;font-weight:900;line-height:1;display:inline-flex;transform:translateY(1px)}.student-question-progress-track{background:#e2e8f0;border-radius:999px;grid-column:1/-1;width:100%;height:6px;overflow:hidden}.student-question-progress-fill{border-radius:inherit;background:linear-gradient(90deg,#38bdf8 0%,#0ea5e9 55%,#8b5cf6 100%);width:0;height:100%;transition:width .3s}.student-type1-page,.student-type2-page,.student-type3-page{overscroll-behavior:none;overscroll-behavior-y:none;touch-action:none;overflow:hidden}.music-type3-slot-drop-zone,.student-type3-staff-frame{touch-action:none;-webkit-user-select:none;user-select:none}.music-type3-name-img{-webkit-user-select:none;user-select:none}@media (hover:none) and (pointer:coarse){.music-type3-name-img{touch-action:none;-webkit-user-drag:none}}@media (hover:hover) and (pointer:fine){.music-type3-name-img[draggable=true]{touch-action:auto;-webkit-user-drag:element;cursor:grab}.music-type3-name-img[draggable=true]:active{cursor:grabbing}}.staff-area,.type2-preview-staff-list{gap:0}.question-editor-page .music-staff.treble{--staff-clef-height:106px;--staff-clef-x:-32px;--staff-clef-y:4px}.question-editor-page .music-staff.bass{--staff-clef-height:54px;--staff-clef-x:-32px;--staff-clef-y:-4px}.type2-question-editor-page .music-staff.treble{--staff-clef-height:106px;--staff-clef-x:-32px;--staff-clef-y:1px}.type2-question-editor-page .music-staff.bass{--staff-clef-height:54px;--staff-clef-x:-32px;--staff-clef-y:-6px}