.mode-controls,.animation-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:14px;flex-shrink:0}
.mode-controls [aria-pressed=true]{background:#2769bd;color:white;border-color:#2769bd}.animation-controls label{display:flex;align-items:center;gap:6px}.animation-controls input{width:65px;padding:8px}.animation-controls select{font:inherit;max-width:310px;padding:8px;border:1px solid #b9c7d7;border-radius:6px;color:#25364b;background:white}.animation-controls select:focus-visible{outline:3px solid #93bafa;outline-offset:2px}.animation-controls button{padding:8px 10px}
.canvas-area.show-animation{display:block;overflow:auto;background:#0B132B;padding:18px}.animation-view{color:#EAF2FF;font-family:"Microsoft YaHei","Segoe UI",sans-serif;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px;line-height:1.75;width:100%;align-items:start}.animation-board{min-width:0}.animation-subtitle{color:#AABAD4;font-size:14px;margin:0 0 10px}.animation-view .diagram-scroll{overflow:auto;max-width:100%}.animation-view .diagram-scroll svg{display:block;width:100%;min-width:650px;height:auto;font-family:Consolas,"Microsoft YaHei",sans-serif}.animation-view .diagram-scroll text{font-size:17px}.animation-view .diagram-scroll .small{font-size:14px}.animation-view .diagram-scroll .tiny{font-size:12px}.animation-view .diagram-scroll svg line,.animation-view .diagram-scroll svg path,.animation-view .diagram-scroll svg rect{vector-effect:non-scaling-stroke}
.animation-view .state-summary{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.animation-view .metric{border-left:3px solid #2DD4E8;background:#111F3D;padding:7px 12px;min-width:90px}.animation-view .metric small{display:block;color:#AABAD4;font-size:12px}.animation-view .metric strong{font:21px Consolas,"Microsoft YaHei",sans-serif}.animation-view .table-scroll{overflow:auto}.animation-view .state-table{border-collapse:collapse;width:100%;font:14px/1.65 Consolas,"Microsoft YaHei",sans-serif;white-space:nowrap}.animation-view th{font-weight:400;color:#AABAD4;text-align:left}.animation-view td,.animation-view th{padding:8px 10px;border-bottom:1px solid #2A3D61}.animation-view .state-caption{font-size:14px;color:#AABAD4;margin:10px 0}.animation-explanation{min-width:0;border-left:2px solid #2DD4E8;padding-left:18px}.animation-explanation h2{font-size:21px;line-height:1.55;margin:0 0 20px}.animation-explanation p{font-size:16px;margin:0 0 18px;overflow-wrap:anywhere}.animation-explanation .section-label{font-size:12px;color:#AABAD4;margin:0 0 6px}.animation-explanation pre{background:#111F3D;border-left:3px solid #2DD4E8;padding:12px;font:14px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:1200px){.animation-view{grid-template-columns:minmax(0,1fr)}.animation-explanation{border-top:1px solid #2A3D61;border-left:0;padding:18px 0 0}}@media(max-width:700px){.canvas-area.show-animation{padding:12px}.animation-controls select{max-width:calc(100vw - 95px)}.animation-view{gap:16px}.animation-explanation h2{font-size:19px}.student .show-animation{min-height:220px}}