.animation-picker{display:grid;grid-template-columns:1.1fr 1fr auto;gap:22px;align-items:center;margin-bottom:22px}.animation-picker .field{margin:0}.anim-quick{display:grid;gap:9px}.anim-quick .checkbox{margin:0}.animation-stage{padding:23px 23px 18px;background:#15231f}.animation-stage .cardtitle{margin-bottom:20px}.animation-stage .cardtitle h2{font-size:23px}.animation-canvases{display:grid;background:#101b18;border:1px solid #354b3c;border-radius:12px;overflow:hidden}.animation-canvases.split{grid-template-columns:1fr 1fr}.animation-panel{min-width:0}.animation-panel+ .animation-panel{border-left:1px solid #405341}.animation-panel h3{font-size:12px;text-align:center;padding:14px 10px 0;margin-bottom:0;color:var(--lime)}.animation-panel svg{width:100%;height:auto;max-height:520px}.animation-controls{display:flex;align-items:center;gap:12px;margin-top:19px}.timeline-wrap{flex:1;min-width:130px;padding:0 8px}.timeline-ticks{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:7px}.speed-label{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}.speed-label select{border:1px solid var(--line);background:#111b16;padding:8px;border-radius:5px;color:var(--text)}.animation-controls output{font-size:11px;color:var(--muted);min-width:35px}.stage-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px}.stage-chapters button{background:#18291f;border:1px solid #354b39;border-radius:7px;padding:12px 7px;color:var(--muted);font-size:11px}.stage-chapters button.active{background:#2d402b;color:var(--lime);border-color:#879e5d}.animation-explain{margin-top:20px}.animation-caption{font-size:17px;line-height:1.6;color:var(--text);margin-top:16px;min-height:82px}.signal-strip{border-top:1px solid var(--line);padding-top:15px;display:grid;gap:8px}.signal-strip>span{font-size:9px;letter-spacing:1.5px;color:var(--amber)}.signal-strip strong{font-size:12px;font-weight:500;line-height:1.5}.animation-model-note{font-size:10px;line-height:1.7;margin:15px 0 26px;color:#8fa18e}.animation-collection{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.animation-collection button{background:#142019;border:1px solid var(--line);padding:13px;text-align:left;border-radius:8px;display:grid;gap:6px;color:var(--text)}.animation-collection button span{font-size:12px}.animation-collection button small{font-size:9px;color:var(--muted)}.animation-collection button.active,.animation-collection button:hover{border-color:#839a59;background:#293827}.web-references{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.web-references a{font-size:12px}.web-references p{font-size:11px;margin:8px 0 0}.glossary-modal{max-width:800px}.glossary-row{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}.glossary-row strong{color:var(--lime);font-size:13px}.glossary-row p{font-size:12px;margin:0}.glossary-top{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:6px 10px;font-size:11px}.learning-totals{margin-bottom:22px}.learning-totals .calc-result{font-size:37px}.next-lesson{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px;border-color:#587148}.next-lesson h2{margin:12px 0 7px}.next-lesson p{font-size:12px;margin-bottom:0}.learning-table td b{font-size:12px;font-weight:500;display:block;margin-bottom:6px}.learning-table td small{display:block;font-size:10px}.learning-table td,.learning-table th{padding:14px 10px}.learning-check{background:#223326;border:1px solid #4b6148;color:var(--muted);font-size:11px;padding:8px 11px;border-radius:7px;white-space:nowrap}.learning-check.done{background:#30452b;color:var(--lime);border-color:#687d4a}.review-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0;border-top:1px solid var(--line)}.review-row h3{margin:8px 0 0;font-size:13px}.learning-promo{margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(105deg,#24392a,#19281f);border:1px solid #4c6845;padding:20px 24px;border-radius:12px}.learning-promo h3{font-size:16px;margin:6px 0}.learning-promo p{font-size:12px;margin-bottom:0}.sidebar{padding-top:23px;padding-bottom:22px}.brand{margin-bottom:25px}.nav{gap:4px}.nav button{padding-top:11px;padding-bottom:11px}.sidefoot{padding-top:13px}.sidefoot p{margin:8px 0}.animation-compare-caption{margin-top:16px}
@media(max-width:1120px){.animation-picker{grid-template-columns:1fr 1fr}.anim-quick{grid-column:1/-1;display:flex;gap:20px;align-items:center}.animation-canvases.split{grid-template-columns:1fr}.animation-panel+ .animation-panel{border-left:0;border-top:1px solid #405341}.animation-collection{grid-template-columns:repeat(2,1fr)}.top-right{gap:10px}.top-right .edition{display:none}}
@media(max-width:700px){.animation-picker{grid-template-columns:1fr;gap:16px}.anim-quick{grid-column:auto}.animation-stage{padding:16px 10px}.animation-stage .cardtitle{padding:0 6px}.animation-stage .cardtitle h2{font-size:18px}.animation-stage .cardtitle .pill{font-size:8px}.animation-controls{flex-wrap:wrap;gap:9px;padding:0 5px}.timeline-wrap{order:5;flex-basis:100%;padding:7px 0}.animation-controls output{margin-left:auto}.stage-chapters{grid-template-columns:1fr 1fr}.animation-caption{font-size:15px;min-height:0}.animation-explain{grid-template-columns:1fr}.animation-collection{grid-template-columns:1fr}.animation-collection button{padding:15px}.web-references{grid-template-columns:1fr}.glossary-row{grid-template-columns:65px 1fr;gap:12px}.next-lesson,.learning-promo{align-items:flex-start;flex-direction:column;gap:16px}.learning-totals{grid-template-columns:1fr}.learning-totals .calc-result{margin:8px 0}.glossary-top{font-size:10px;padding:6px}.top-right{gap:8px}.review-row{align-items:start}.animation-panel svg{min-width:500px}.animation-panel{overflow-x:auto}.animation-canvases{position:relative}.animation-stage:after{content:'Tip: swipe the diagram horizontally for full detail.';display:block;margin-top:12px;color:var(--muted);font-size:10px;padding:0 5px}}
@media(prefers-reduced-motion:reduce){.animation-panel{scroll-behavior:auto}}