.post-lab { margin: 28px 0; padding: clamp(18px, 4vw, 30px); border: 1px solid #e7e0d2; border-radius: 18px; background: linear-gradient(145deg,#fff 0%,#fbfaf7 100%); box-shadow: 0 16px 42px #322b1a0c; }
.post-lab__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; color:#9a8054; font:700 10px/1.3 Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.post-lab__live { display:inline-flex; align-items:center; gap:7px; color:#6e685c; letter-spacing:.07em; }
.post-lab__live i { width:7px; height:7px; border-radius:50%; background:#b59b69; box-shadow:0 0 0 4px #b59b6920; }
.post-lab h2 { margin:0 0 8px; font:500 clamp(22px,4vw,30px)/1.17 Georgia,serif; letter-spacing:-.025em; color:#222; }
.post-lab__intro { max-width:660px; margin:0 0 19px; color:#6d6a63; font:14px/1.65 Arial,sans-serif; }
.post-lab__scene { position:relative; min-height:205px; overflow:hidden; display:grid; place-items:center; margin:16px 0; border:1px solid #e9e5dc; border-radius:14px; background:radial-gradient(ellipse at 50% 100%,#f0ede5,#f8f7f3 67%); }
.post-lab__controls { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:14px 0 10px; }
.post-lab__controls label { display:grid; gap:7px; flex:1 1 210px; color:#4d4a44; font:600 12px Arial,sans-serif; }
.post-lab__controls input[type=range] { width:100%; accent-color:#9f8555; }
.post-lab__button { min-height:38px; padding:9px 14px; border:1px solid #ddd4c3; border-radius:999px; background:#fff; color:#282620; font:650 12px Arial,sans-serif; cursor:pointer; }
.post-lab__button:hover,.post-lab__button[aria-pressed=true] { border-color:#a88f62; background:#f3efe6; }
.post-lab__readout { min-height:23px; margin:9px 0 0; color:#625d52; font:600 12px/1.55 Arial,sans-serif; }
.post-lab__note { margin:13px 0 0; padding-top:11px; border-top:1px solid #e9e5dc; color:#89847a; font:11px/1.55 Arial,sans-serif; }
.post-lab__sources { margin-top:14px; font:11px/1.7 Arial,sans-serif; color:#706b61; }
.post-lab__sources a { color:#806844; text-decoration:underline; text-underline-offset:2px; }
.rain-lab__ground { position:absolute; right:0; bottom:0; left:0; height:34%; background:linear-gradient(#8c765b,#5d4c3b); transition:filter .25s; }
.rain-lab[data-soil=wet] .rain-lab__ground { filter:brightness(1.24) saturate(.8); }
.rain-lab__drops { position:absolute; inset:0 0 25%; overflow:hidden; }
.rain-lab__drop { position:absolute; top:-15px; width:2px; height:20px; border-radius:2px; background:#8db4c2; opacity:.7; animation:post-lab-rain 1s linear infinite; }
.rain-lab__drop:nth-child(3n) { height:13px; animation-duration:1.35s; }
.rain-lab__drop:nth-child(4n) { animation-delay:-.7s; }
.rain-lab__drop:nth-child(1) { left:3%;animation-delay:-.1s }.rain-lab__drop:nth-child(2) { left:9%;animation-delay:-.6s }.rain-lab__drop:nth-child(3) { left:14%;animation-delay:-.3s }.rain-lab__drop:nth-child(4) { left:20%;animation-delay:-.8s }.rain-lab__drop:nth-child(5) { left:25%;animation-delay:-.4s }.rain-lab__drop:nth-child(6) { left:31%;animation-delay:-.9s }.rain-lab__drop:nth-child(7) { left:36%;animation-delay:-.2s }.rain-lab__drop:nth-child(8) { left:42%;animation-delay:-.7s }.rain-lab__drop:nth-child(9) { left:47%;animation-delay:-.5s }.rain-lab__drop:nth-child(10) { left:53%;animation-delay:-.1s }.rain-lab__drop:nth-child(11) { left:58%;animation-delay:-.6s }.rain-lab__drop:nth-child(12) { left:64%;animation-delay:-.3s }.rain-lab__drop:nth-child(13) { left:69%;animation-delay:-.8s }.rain-lab__drop:nth-child(14) { left:75%;animation-delay:-.4s }.rain-lab__drop:nth-child(15) { left:80%;animation-delay:-.9s }.rain-lab__drop:nth-child(16) { left:86%;animation-delay:-.2s }.rain-lab__drop:nth-child(17) { left:91%;animation-delay:-.7s }.rain-lab__drop:nth-child(18) { left:97%;animation-delay:-.5s }.rain-lab__drop:nth-child(19) { left:6%;animation-delay:-.2s }.rain-lab__drop:nth-child(20) { left:23%;animation-delay:-.6s }.rain-lab__drop:nth-child(21) { left:39%;animation-delay:-.3s }.rain-lab__drop:nth-child(22) { left:55%;animation-delay:-.8s }.rain-lab__drop:nth-child(23) { left:72%;animation-delay:-.4s }.rain-lab__drop:nth-child(24) { left:88%;animation-delay:-.9s }.rain-lab__drop:nth-child(25) { left:49%;animation-delay:-.2s }
@keyframes post-lab-rain { to { transform:translateY(250px); } }
.rain-lab[data-intensity="1"] .rain-lab__drop { animation-duration:1.7s; }
.rain-lab[data-intensity="2"] .rain-lab__drop { animation-duration:1.15s; }
.rain-lab[data-intensity="3"] .rain-lab__drop { animation-duration:.72s; }
.rain-lab__mist { position:absolute; bottom:29%; display:flex; gap:14px; opacity:.2; transition:opacity .25s; }
.rain-lab[data-aerosols="1"] .rain-lab__mist { opacity:.5; }.rain-lab[data-aerosols="2"] .rain-lab__mist { opacity:.82; }
.rain-lab__mist span { width:9px; height:9px; border:1px solid #8d7859; border-radius:50%; animation:post-lab-rise 2.1s ease-in-out infinite alternate; }
.rain-lab__mist span:nth-child(2n) { animation-delay:-1s; }
@keyframes post-lab-rise { to { transform:translateY(-62px) translateX(8px); } }
.onion-lab__onion { position:relative; width:116px; height:116px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 38% 35%,#fff3d1,#d2aa75 58%,#99714a); box-shadow:inset -10px -12px 20px #67472b22,0 15px 28px #352a1c20; color:#805b40; font-size:42px; transition:transform .25s; }
.onion-lab[data-step="2"] .onion-lab__onion { transform:rotate(-12deg) scale(.94); }
.onion-lab__vapour { position:absolute; top:25%; left:50%; display:flex; gap:8px; opacity:0; transition:opacity .25s; }
.onion-lab__vapour span { width:11px;height:11px;border-radius:50%;background:#bd9973;filter:blur(1px);animation:post-lab-rise 1.7s ease-in-out infinite alternate; }
.onion-lab[data-step="2"] .onion-lab__vapour,.onion-lab[data-step="3"] .onion-lab__vapour { opacity:.85; }
.onion-lab[data-airflow=on] .onion-lab__vapour { transform:translateX(45px);opacity:.42; }
.onion-lab__eye { position:absolute; top:17%; right:15%; padding:8px 10px; border:1px solid #e4ded2; border-radius:20px; background:#fff; color:#77716a; font:11px Arial,sans-serif; opacity:.45; }
.onion-lab[data-step="3"] .onion-lab__eye { color:#8e5e58; opacity:1; }
.heat-lab { display:flex; align-items:center; justify-content:center; gap:clamp(18px,7vw,70px); width:100%; }
.heat-lab__hand,.heat-lab__block { display:grid; justify-items:center; gap:10px; color:#5e5a52; font:700 12px Arial,sans-serif; }
.heat-lab__palm { display:grid; width:82px;height:82px;place-items:center;border-radius:50%;background:radial-gradient(circle,#f3c9ad,#d89675);color:#694b3f;font-size:24px; }
.heat-lab__material { width:100px;height:74px;display:grid;place-items:center;border:1px solid #d8d4ca;border-radius:9px;background:linear-gradient(145deg,#aaa9a2,#696a68);color:#fff;font:700 11px Arial,sans-serif; }
.heat-lab[data-material=wood] .heat-lab__material { border-color:#b89a70;background:linear-gradient(145deg,#c6a77c,#8b6545); }
.heat-lab__flow { color:#b0785c;font-size:25px;letter-spacing:5px;transition:opacity .2s; }
.heat-lab[data-flow="low"] .heat-lab__flow { opacity:.28; }.heat-lab[data-flow="mid"] .heat-lab__flow { opacity:.6; }
.soap-lab__water { position:relative; width:min(86%,480px); height:122px; display:flex; align-items:center; justify-content:center; gap:14px; border-bottom:5px solid #9db8ba; border-radius:50%; background:linear-gradient(180deg,#ffffff88,#c6dddf88); }
.soap-lab__oil { width:66px;height:38px;border-radius:60% 45% 55% 42%;background:linear-gradient(130deg,#e5ba4f,#aa741c);box-shadow:0 5px 12px #76541d2b;transition:transform .4s,opacity .4s; }
.soap-lab__molecule { display:none; width:40px;height:40px;border:2px dotted #9d8254;border-radius:50%;background:#fff8;box-shadow:0 0 0 10px #d8c59c4d,0 0 0 20px #d8c59c24; }
.soap-lab[data-step="2"] .soap-lab__molecule,.soap-lab[data-step="3"] .soap-lab__molecule { display:block; }
.soap-lab[data-step="2"] .soap-lab__oil { transform:scale(.48); }.soap-lab[data-step="3"] .soap-lab__oil { transform:translateX(130px) scale(.45);opacity:.2; }
.soap-lab__germ { color:#74856c;font-size:20px;transition:transform .4s,opacity .4s; }.soap-lab[data-step="3"] .soap-lab__germ { transform:translateY(45px);opacity:.2; }
.microwave-lab { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;width:min(100% - 30px,460px); }
.microwave-lab__oven { position:relative;min-height:126px;display:grid;place-items:center;border:8px solid #bdbab2;border-radius:10px;background:linear-gradient(145deg,#45464a,#22252a);box-shadow:0 10px 20px #16161622; }
.microwave-lab__turntable { width:96px;height:96px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:2px;padding:5px;border:1px solid #d0cfc9;border-radius:50%;background:#e8e4da;transition:transform 2s linear; }
.microwave-lab[data-rotating=true] .microwave-lab__turntable { animation:post-lab-spin 4s linear infinite; }
@keyframes post-lab-spin { to { transform:rotate(360deg); } }
.microwave-lab__cell { border-radius:50%;background:#d7d3c9;transition:background .35s; }
.microwave-lab__cell.is-hot { background:#cb7155;box-shadow:0 0 5px #cb715566; }.microwave-lab__cell.is-warm { background:#e7bf79; }
.microwave-lab__door { position:absolute;inset:10px auto 10px 10px;width:16px;border-right:1px solid #999;border-radius:4px;background:#31363b; }
.microwave-lab__readout { color:#5d594f;font:12px/1.5 Arial,sans-serif; }
@media(max-width:560px) { .post-lab { padding:17px; border-radius:14px; }.post-lab__scene { min-height:180px; }.heat-lab__material { width:76px;height:65px; }.heat-lab__palm { width:65px;height:65px; }.microwave-lab { grid-template-columns:1fr; justify-items:center; }.microwave-lab__readout { text-align:center; } }
@media(prefers-reduced-motion:reduce) { .post-lab *, .post-lab *::before, .post-lab *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
.sky-lab__scene { background:#f8f7f3; }
.sky-lab__sky { position:absolute;inset:0;overflow:hidden;background:linear-gradient(#84b9df,#d7e9ee 75%,#c8bfa8);transition:background .5s; }
.sky-lab[data-time=sunset] .sky-lab__sky { background:linear-gradient(#694f63,#e59a6f 66%,#d6a86c); }
.sky-lab__sun { position:absolute;left:12%;bottom:22%;width:44px;height:44px;border-radius:50%;background:#fff4bc;box-shadow:0 0 28px #fff5bd99;transition:left .5s,bottom .5s,background .5s; }
.sky-lab[data-time=sunset] .sky-lab__sun { left:74%;bottom:17%;background:#ffc37d; }
.sky-lab__rays { position:absolute;left:15%;top:25%;display:flex;gap:24px;transform:rotate(18deg);transition:opacity .4s; }
.sky-lab__rays i { width:4px;height:100px;border-radius:99px;background:#d8f0ff;opacity:.8; }
.sky-lab[data-time=sunset] .sky-lab__rays { left:42%;top:5%;opacity:.25; }
.sky-lab__horizon { position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(165deg,transparent 20%,#766d5d 21%); }
.sky-lab__caption { position:absolute;right:12px;top:12px;color:#fff;background:#2228;padding:7px 10px;border-radius:999px;font:700 9px Arial,sans-serif;letter-spacing:.08em; }
.fog-lab__scene { background:linear-gradient(120deg,#f4eee6,#e6eff0); }
.fog-lab__mirror { position:relative;width:130px;height:152px;display:grid;place-items:center;border:7px solid #b6a98f;border-radius:48% 48% 8px 8px;background:linear-gradient(145deg,#eaf3f2,#b7ced0);box-shadow:0 10px 20px #35484b22;overflow:hidden; }
.fog-lab__droplets { position:absolute;inset:0;opacity:.15;background:radial-gradient(circle at 20% 23%,#fff 0 2px,transparent 3px),radial-gradient(circle at 66% 31%,#fff 0 3px,transparent 4px),radial-gradient(circle at 40% 70%,#fff 0 2px,transparent 3px),radial-gradient(circle at 78% 77%,#fff 0 2px,transparent 3px);background-size:34px 35px;transition:opacity .4s; }
.fog-lab[data-cold=true][data-humidity="70"] .fog-lab__droplets,.fog-lab[data-cold=true][data-humidity="80"] .fog-lab__droplets,.fog-lab[data-cold=true][data-humidity="90"] .fog-lab__droplets,.fog-lab[data-cold=true][data-humidity="100"] .fog-lab__droplets { opacity:.9; }
.fog-lab[data-cold=false] .fog-lab__droplets { opacity:.12; }
.fog-lab__mirror-label { position:relative;color:#45616a;font:700 10px Arial,sans-serif;letter-spacing:.14em; }
.fog-lab__vapor { position:absolute;top:24px;color:#fff;font-size:25px;letter-spacing:5px;opacity:.8;animation:fog-drift 3s ease-in-out infinite alternate; }
@keyframes fog-drift { to { transform:translateY(18px);opacity:.35; } }
.static-lab__scene { display:flex;gap:14px;background:linear-gradient(#f8f7f3 70%,#d7cfc1 71%); }
.static-lab__person { position:relative;width:90px;height:130px;display:grid;place-items:center;color:#747166;font-size:46px; }
.static-lab__hair { position:absolute;top:4px;transition:transform .4s,color .4s; }
.static-lab__body { margin-top:28px; }
.static-lab__charge { position:absolute;top:28px;left:38px;color:#ad8b51;font:700 10px Arial,sans-serif;opacity:0;transition:opacity .3s; }
.static-lab[data-charge="1"] .static-lab__charge { opacity:1; }
.static-lab[data-charge="1"] .static-lab__hair { transform:translateY(-8px) rotate(-12deg);color:#ad8b51; }
.static-lab__path { color:#c2b69e;letter-spacing:4px;font-size:12px; }
.static-lab__knob { display:grid;place-items:center;gap:6px;color:#777;font-size:33px; }
.static-lab__knob span { font:700 8px Arial,sans-serif;letter-spacing:.08em; }
.static-lab__spark { position:absolute;left:65%;top:44%;color:#d49f4c;font-size:25px;opacity:0;transform:scale(.5);transition:all .25s; }
.static-lab[data-charge="2"] .static-lab__spark { opacity:1;transform:scale(1.2); }