/* Lugna bilder hör till lästexten, inte till rättningen. */
.lesson-animation{margin:24px 0;padding:20px;border:1px solid #3b4241;border-radius:18px;background:#171c1d;color:#edf1e9;overflow:hidden}
.lesson-animation .animation-kicker{font-size:.7rem;font-weight:700;letter-spacing:.13em;color:#c6f36a}
.lesson-animation h2{font-size:1.25rem;line-height:1.3;margin:10px 0}
.lesson-animation p{font-size:1rem;line-height:1.65;margin:8px 0}
.lesson-animation .animation-intro{color:#c6cec9}
.animation-picture{background:#111718;border-radius:12px;margin:16px 0;overflow:hidden}
.animation-picture svg{display:block;width:100%;max-height:250px;overflow:visible}
.animation-explanation{min-height:125px}
.animation-step{font-size:.78rem;font-weight:700;color:#c6f36a}
.lesson-animation .animation-caption{color:#f0f3ed}
.animation-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.animation-controls button{min-height:46px;padding:10px 16px;border:1px solid #566343;border-radius:12px;background:#273323;color:#eaf8da;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer}
.animation-controls button:last-child{background:transparent;border-color:#4b5554;color:#e4eae7}
.animation-controls button:focus-visible{outline:3px solid #c6f36a;outline-offset:3px}
.animation-controls button:hover{border-color:#c6f36a}
.lesson-animation .animation-note{font-size:.8rem;color:#a9b5af;margin-top:12px}
.lesson-animation [hidden]{display:none!important}
.lesson-animation svg *{transform-box:fill-box;transform-origin:center;transition:transform 1.3s ease,opacity .9s ease,fill .9s ease}
.anim-snow{fill:#d4e5e9;opacity:.45}.anim-ground{stroke:#d4e5e9;stroke-width:2}
.anim-leg{stroke:#afbbee;stroke-width:25;stroke-linecap:round}.anim-boot{fill:#c6f36a}
.anim-arrow-down{stroke:#efb582;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.anim-snowshoe{fill:#edc68a;opacity:0}.anim-pressure-marks{stroke:#efb582;stroke-width:4}
.anim-wide-marks{stroke:#334c33;stroke-width:2;opacity:0}
[data-scene="pressure"][data-frame="1"] .anim-shoe{transform:translateY(28px)}
[data-scene="pressure"][data-frame="2"] .anim-snowshoe,[data-frame="2"] .anim-wide-marks{opacity:1}
[data-scene="pressure"][data-frame="2"] .anim-pressure-marks{opacity:0}
.anim-water{fill:#73c3e8;opacity:.18}.anim-waterline{stroke:#73c3e8;stroke-width:2}
.anim-clay{fill:#dba381}.anim-clay .anim-arrow-down{stroke:#edc095}
[data-scene="float"][data-frame="1"] .anim-clay{transform:translateY(68px)}
.anim-boat{opacity:0}.anim-hull{fill:#dba381}.anim-displaced{fill:#8cd4ee;opacity:.35}
.anim-arrow-up{stroke:#c6f36a;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-scene="float"][data-frame="2"] .anim-clay{opacity:0}
[data-scene="float"][data-frame="2"] .anim-boat{opacity:1}
.anim-container{fill:#18262c;stroke:#647e86;stroke-width:2}.anim-particle{fill:#91d1ed}
.anim-thermometer rect{fill:none;stroke:#a5b4b7;stroke-width:2}.anim-thermometer circle{fill:#f0a28b}
.anim-mercury{stroke:#f0a28b;stroke-width:6;stroke-linecap:round;transform-origin:bottom}
[data-scene="particles"][data-frame="1"] .anim-mercury{transform:scaleY(1.7)}
[data-scene="particles"][data-frame="2"] .anim-mercury{transform:scaleY(2.8)}
[data-scene="particles"][data-frame="1"] .anim-particle{fill:#e9bb8b}
[data-scene="particles"][data-frame="2"] .anim-particle{fill:#f0a28b}
.animation-playing .anim-particle{animation:lesson-particle 2s ease-in-out infinite alternate;animation-delay:var(--delay)}
.animation-playing[data-frame="1"] .anim-particle{animation-duration:.8s}
.animation-playing[data-frame="2"] .anim-particle{animation-duration:.35s}
@keyframes lesson-particle{from{transform:translate(calc(var(--dx)*-1),calc(var(--dy)*-1))}to{transform:translate(var(--dx),var(--dy))}}
.anim-balloon-skin{fill:#c2a0ed;fill-opacity:.25;stroke:#c2a0ed;stroke-width:2}.anim-balloon-dot{fill:#e8d4ff}
.anim-balloon-knot{fill:#c2a0ed}.anim-string{stroke:#b8c3c0;fill:none}
.anim-outside{stroke:#8dcce9;stroke-width:3;fill:none;opacity:0}
[data-scene="balloon"][data-frame="1"] .anim-balloon-skin{fill:#73c3e8;stroke:#73c3e8}
[data-scene="balloon"][data-frame="2"] .anim-balloon{transform:scale(.65)}
[data-scene="balloon"][data-frame="2"] .anim-balloon-dot{transform:scale(1.53846)}
[data-scene="balloon"][data-frame="2"] .anim-outside{opacity:1}
[data-scene="balloon"][data-frame="2"] .anim-string{transform:translateY(-23px)}
.anim-vessel{stroke:#a8c5cd;stroke-width:3;fill:none}.anim-ice rect{fill:#8dcce9;opacity:.4}
.anim-ice circle,.anim-liquid circle,.anim-vapor circle{fill:#b5ecfa}
.anim-liquid,.anim-vapor{opacity:0}.anim-liquid path{fill:#73c3e8;opacity:.3}
[data-scene="phases"][data-frame="1"] .anim-ice,[data-scene="phases"][data-frame="2"] .anim-ice{opacity:0}
[data-scene="phases"][data-frame="1"] .anim-liquid,[data-scene="phases"][data-frame="2"] .anim-vapor{opacity:1}
.anim-window{fill:#8dcce9;fill-opacity:.2;stroke:#8dcce9;stroke-width:2}.anim-window-bar{stroke:#8dcce9;stroke-width:2}
.anim-radiator{fill:#efb582;fill-opacity:.7}.anim-radiator-lines{stroke:#483d33;stroke-width:2}
.anim-cold-flow{stroke:#8dcce9;stroke-width:4;fill:none}.anim-warm-flow,.anim-room-flow{fill:none;stroke-width:4;opacity:0}
.anim-warm-flow{stroke:#efb582}.anim-room-flow{stroke:#c6d8b8}
[data-scene="convection"][data-frame="1"] .anim-warm-flow,[data-scene="convection"][data-frame="2"] .anim-warm-flow,[data-scene="convection"][data-frame="2"] .anim-room-flow{opacity:1}
.animation-playing .anim-cold-flow,.animation-playing .anim-warm-flow,.animation-playing .anim-room-flow{stroke-dasharray:9 6;animation:lesson-flow 2s linear infinite}
@keyframes lesson-flow{to{stroke-dashoffset:-30}}
.anim-grass,.anim-earth{fill:#719559;opacity:.6}.anim-rise-arrow{fill:none;stroke:#efb582;stroke-width:3}
.anim-rising-air{fill:#efb582}.anim-cloud{opacity:0}.anim-cloud path{fill:#d4e5e9;opacity:.8}.anim-cloud circle{fill:#67a2bc}
[data-scene="cloud"][data-frame="1"] .anim-rising-air{transform:translateY(-70px);fill:#a2d8ed}
[data-scene="cloud"][data-frame="2"] .anim-rising-air{transform:translateY(-70px);opacity:0}
[data-scene="cloud"][data-frame="2"] .anim-cloud{opacity:1}
.anim-sun{fill:#edcf75}.anim-gases{fill:#bb9de8}
.anim-sun-ray{fill:none;stroke:#edcf75;stroke-width:4}.anim-heat-ray,.anim-return-rays{fill:none;stroke:#ef9caa;stroke-width:4;opacity:0}
[data-scene="greenhouse"][data-frame="1"] .anim-heat-ray,[data-scene="greenhouse"][data-frame="2"] .anim-heat-ray,[data-scene="greenhouse"][data-frame="2"] .anim-return-rays{opacity:1}
@media(max-width:480px){.lesson-animation{padding:16px;margin:20px 0}.animation-explanation{min-height:145px}.animation-controls button{flex:1;padding:10px;font-size:.85rem}.animation-picture svg{min-height:150px}}
@media(prefers-reduced-motion:reduce){.lesson-animation svg *{transition:none!important;animation:none!important}}