.teaching-wrap{max-width:1080px;padding:0 24px;margin:28px auto 50px}
.teaching-player{--lesson-accent:#376cc4;--lesson-wash:#edf4ff;--lesson-edge:#b7cfee;background:#fff;border:1px solid #dde7f2;border-radius:24px;overflow:hidden;box-shadow:0 16px 52px #345b8a0d;color:#304864}
.teaching-player.sand{--lesson-accent:#9c5c35;--lesson-wash:#fff4e9;--lesson-edge:#e9c5a5}
.teaching-player.sky{--lesson-accent:#14766d;--lesson-wash:#edf9f5;--lesson-edge:#b4ded3}
.teaching-player.lavender{--lesson-accent:#7b5db5;--lesson-wash:#f5f0fd;--lesson-edge:#d4c5ee}
.teaching-player>header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:23px 32px;background:#fff;border-bottom:1px solid #e2eaf4}
.teaching-player>header span{font-size:11px;color:var(--lesson-accent);letter-spacing:1px}
.teaching-player>header h1{font-size:26px;font-weight:600;color:#314b6b;margin:7px 0 0;letter-spacing:.5px}
.teaching-player>header .teaching-length{font-size:13px;border:1px solid var(--lesson-edge);background:var(--lesson-wash);border-radius:20px;padding:8px 15px;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.teaching-stage{background:linear-gradient(135deg,var(--lesson-wash),#fff 85%);height:440px;position:relative;overflow:hidden}
.teaching-scene{height:100%;position:relative;text-align:center;padding-top:21px}
.teaching-scene-number{display:inline-block;font-size:11px;color:var(--lesson-accent);background:#ffffffb3;border:1px solid var(--lesson-edge);padding:5px 12px;border-radius:20px;letter-spacing:2px;font-variant-numeric:tabular-nums}
.teaching-scene h2{position:relative;z-index:2;font-size:25px;font-weight:600;color:#314e70;letter-spacing:.5px;margin:10px 0 0;line-height:1.4}
.teaching-art{position:absolute;left:0;right:0;bottom:0;height:340px;overflow:hidden}
.teaching-illustration{display:block;margin:0 auto;width:100%;max-width:900px;height:100%;font-family:Arial,'Microsoft YaHei',sans-serif}
.teaching-caption{padding:20px 34px;min-height:85px;display:grid;place-items:center;border-top:1px solid #e0e9f3;background:#fff}
.teaching-caption p{font-size:14px;line-height:1.95;margin:0;max-width:900px;color:#536c87;text-align:center}
.teaching-controls{display:flex;gap:15px;align-items:center;padding:14px 25px;background:#eef5ff;border-top:1px solid #e1ebf9;border-bottom:1px solid #e1ebf9;color:#42648b}
.teaching-controls button{background:#fff;border:1px solid #c6d9f1;border-radius:16px;cursor:pointer;color:#3768ae;font-size:12px;padding:7px 12px;white-space:nowrap;transition:background .15s}
.teaching-controls button:hover{background:#e0ecff}
.teaching-controls button:first-child{display:grid;place-items:center;font-size:17px;border-radius:50%;width:38px;height:38px;min-width:38px;padding:0;background:#3d72c8;border-color:#3d72c8;color:#fff;box-shadow:0 3px 8px #3d72c826}
.teaching-controls button:first-child:hover{background:#2d60b3}
.teaching-controls>span{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.teaching-controls input{accent-color:#3d78cd;min-width:50px;flex:1;height:6px;cursor:pointer}
.teaching-controls select{border:1px solid #c6d9f1;border-radius:8px;background:#fff;color:#3768ae;padding:7px;font-size:12px;cursor:pointer}
.teaching-chapters{padding:20px 25px 16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;background:#fff}
.teaching-chapters button{border:1px solid #d7e4f5;border-radius:12px;background:#f5f9ff;color:#527093;font-size:12px;line-height:1.65;text-align:left;padding:11px 12px;cursor:pointer;transition:background .15s,border-color .15s}
.teaching-chapters button:hover{border-color:#8aafdf;background:#eaf3ff}
.teaching-chapters button>span{display:grid;place-items:center;width:25px;height:25px;font-size:10px;letter-spacing:1px;margin-bottom:7px;background:#e1edfe;color:#3f70b6;border-radius:8px;font-variant-numeric:tabular-nums}
.teaching-chapters button.current{background:#3e73c7;border-color:#3e73c7;color:#fff;box-shadow:0 3px 9px #3e73c71c}
.teaching-chapters button.current>span{background:#ffffff29;color:#fff}
.teaching-actions{padding:3px 25px 24px;display:flex;align-items:center;gap:10px}
.teaching-actions>span{margin-right:auto;font-size:11px;color:#5f7894}
.teaching-actions .btn{padding:9px 14px;font-size:12px;border:1px solid #c5d8ee;border-radius:8px;background:#f6faff;color:#3d6fae}
.teaching-actions .btn:hover{background:#e8f1ff}
.teaching-actions .btn:disabled{color:#8499b1;border-color:#e1e9f2;background:#f8fafc;opacity:.7}
.teaching-actions .primary{background:#117d72;border-color:#117d72;color:#fff;box-shadow:0 3px 8px #117d7220;padding:9px 17px}
.teaching-actions .primary:hover{background:#0f756a}
.teaching-status{font-size:12px;color:#b45947;text-align:center;margin:0 0 15px}
.teaching-status:empty{display:none}
.teaching-player button:focus-visible,.teaching-player select:focus-visible,.teaching-player input:focus-visible{outline:3px solid #edbc66;outline-offset:3px}
.teaching-illustration .teach-key.active{animation:teaching-key-glow 3s ease-in-out infinite}
.teach-gaze{animation:teaching-gaze 2.4s linear infinite}
.teach-caret{animation:teaching-blink 1s steps(2,end) infinite}
.teach-footstep{animation:teaching-footstep 2.8s ease-in-out infinite;animation-delay:calc(var(--step)*.3s)}
.teaching-player.is-paused *{animation-play-state:paused!important}
@keyframes teaching-key-glow{50%{filter:brightness(1.08)}}
@keyframes teaching-gaze{to{stroke-dashoffset:-30}}
@keyframes teaching-blink{50%{opacity:0}}
@keyframes teaching-footstep{50%{opacity:.35}}
@media(max-width:760px){
 .teaching-wrap{margin-top:15px;padding:0 12px}.teaching-player{border-radius:17px}.teaching-player>header{padding:19px 20px}.teaching-player>header h1{font-size:22px}.teaching-player>header span{font-size:10px}.teaching-player>header .teaching-length{font-size:12px;padding:7px 12px}
 .teaching-stage{height:310px}.teaching-scene{padding-top:19px}.teaching-scene h2{font-size:21px;margin-top:9px;padding:0 12px}.teaching-art{height:220px;bottom:0;overflow:hidden}.teaching-illustration{min-width:0;max-width:100%;width:100%}
 .teaching-caption{padding:16px 21px;min-height:105px}.teaching-caption p{font-size:13px;text-align:left;line-height:1.9}.teaching-controls{padding:12px;gap:8px;flex-wrap:wrap}.teaching-controls>span{font-size:10px}.teaching-controls button{font-size:11px;padding:6px 8px}.teaching-controls button:first-child{width:34px;height:34px;min-width:34px}.teaching-controls select{font-size:11px;padding:5px}.teaching-controls input{min-width:70px}.teaching-chapters{padding:17px 15px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.teaching-chapters button{display:flex;align-items:center;gap:9px;padding:10px;font-size:12px}.teaching-chapters button:last-child{grid-column:1 / -1}.teaching-chapters button>span{display:inline-grid;margin:0;flex-shrink:0}.teaching-actions{padding:3px 15px 20px;flex-wrap:wrap;gap:8px}.teaching-actions>span{order:5;width:100%;text-align:center;margin-top:7px}.teaching-actions .btn{font-size:12px;padding:9px 11px}.teaching-actions .primary{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.teaching-player *{animation:none!important}}

.teaching-zoom{position:absolute;top:23px;right:20px;border:1px solid #c6d9ef;background:#ffffffd9;border-radius:16px;padding:6px 10px;font-size:11px;color:#3d6dad}.teaching-zoom:hover{background:#e4efff}.teaching-image-dialog{max-width:980px;width:calc(100% - 24px);max-height:90vh;border:1px solid #d3e1f0;border-radius:18px;padding:20px;color:#304864;overflow:auto}.teaching-image-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:15px}.teaching-image-dialog h2{margin:0;color:#304e70;font-size:21px}.teaching-image-dialog>header button{border:0;background:#edf4ff;color:#376dc3;border-radius:50%;width:34px;height:34px;font-size:25px;flex-shrink:0}.teaching-image-dialog>p{font-size:12px;color:#607a97;margin:12px 0}.teaching-image-scroll{overflow:auto;max-height:65vh;border-radius:12px;background:#f7faff;scrollbar-width:thin;scrollbar-color:#a8c5e8 transparent}.teaching-image-scroll svg{min-width:760px;width:100%;max-width:none;height:auto}.teaching-image-dialog::backdrop{background:#30486473;backdrop-filter:blur(4px)}
@media(max-width:760px){.teaching-zoom{top:20px;right:11px;padding:5px 8px;font-size:10px}.teaching-image-dialog{padding:16px}.teaching-image-dialog h2{font-size:18px}.teaching-image-scroll svg{min-width:680px}}