.explanation-dialog { position:fixed; inset:0; max-width:none; max-height:none; margin:auto; padding:0; border:0; border-radius:12px; box-shadow:0 20px 64px #152d403d; overflow:hidden; background:#eff4f8; color:#1d3548; font-family:system-ui,sans-serif; }
.explanation-dialog[open] { display:block; }
.explanation-shell { position:absolute; inset:0 auto auto 0; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; padding:12px; transform-origin:top left; }
.explanation-dialog::backdrop { background:#152d4066; }
.explanation-header { flex:none; height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.explanation-header h2 { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:24px; }
.explanation-voice-label { margin-left:auto; flex:none; font-size:13px; color:#526d80; white-space:nowrap; }
.explanation-dialog button,.explanation-dialog select { box-sizing:border-box; flex:none; font:18px system-ui,sans-serif; height:40px; min-height:40px; padding:6px 10px; border:1px solid #b5c7d4; border-radius:8px; background:#fff; color:#1d3548; cursor:pointer; }
.explanation-dialog button:disabled { opacity:.45; cursor:default; }
.explanation-dialog button:focus-visible,.explanation-dialog select:focus-visible { outline:3px solid #1877b9; outline-offset:2px; }
.explanation-stage { position:relative; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.explanation-fitted { position:relative; flex:none; }
.explanation-board { position:absolute; width:1000px; height:750px; transform-origin:top left; background:white; border-radius:20px; overflow:hidden; box-shadow:0 8px 30px #21394c14; }
.explanation-board::after { content:''; position:absolute; left:60px; top:540px; width:750px; height:2px; background:#dce8f0; }
.explanation-text { position:absolute; line-height:1.45; white-space:pre-wrap; overflow:visible; }
.explanation-word { display:inline-block; white-space:nowrap; }
.explanation-caption { position:absolute; left:60px; top:560px; width:750px; height:150px; font-size:32px; line-height:1.45; white-space:pre-wrap; }
.explanation-teacher { position:absolute; left:850px; top:560px; width:120px; height:160px; object-fit:contain; }
.explanation-controls { flex:none; height:40px; }
.explanation-actions { display:flex; height:40px; justify-content:center; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
.explanation-error { position:absolute; bottom:12px; left:12px; right:12px; padding:12px; border:1px solid #b35d42; border-radius:8px; background:#fff6ef; color:#8d321a; font-size:18px; }
.assessment-part[data-part-type="explanation_video"] .assessment-content { justify-content:center; }
.textbox-object.program-field-object[data-part-type="explanation_video"]::before { display:none; }
.assessment-part .explanation-launch { background:#e7f1fa; color:#154b73; border-color:#86afcc; font-weight:600; }
.assessment-config .explanation-json { min-height:230px; font-family:monospace; font-size:13px; }
@media print { .explanation-dialog { display:none !important; } }