.pptlab{--ink:#123642;--teal:#158576;max-width:1240px;margin:auto;padding:clamp(18px,3vw,42px);font-family:Helvetica,Arial,sans-serif;color:var(--ink)}.pptlab *{box-sizing:border-box}.pptlab button{font-family:inherit}.pptlab-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;margin-bottom:1.4rem}.pptlab-head span,.ppt-result>span,.ppt-micro-copy>span{color:var(--teal);font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.pptlab h1{margin:.25rem 0;font-size:clamp(2.25rem,4.4vw,4rem);letter-spacing:-.058em}.pptlab-head p{max-width:720px;margin:.5rem 0 0;color:#58717a;font-size:1.03rem;line-height:1.55}.pptlab-head a{flex:none;padding:.7rem .9rem;border:1px solid #bedbd6;border-radius:999px;background:#fff;color:#23736d;font-size:.76rem;font-weight:800;text-decoration:none}.pptlab-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:1rem}.ppt-stage,.ppt-controls,.ppt-micro{border:1px solid #cadcdd;border-radius:26px;box-shadow:0 18px 50px rgba(18,54,66,.1)}
.ppt-stage{position:relative;min-height:610px;overflow:hidden;background:linear-gradient(160deg,#173c49 0,#245968 48%,#102f3b 100%)}.ppt-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0 45%,rgba(150,239,226,.09) 46%,transparent 61%),radial-gradient(circle at 48% 22%,rgba(136,229,218,.15),transparent 38%);pointer-events:none}.ppt-lab-light{position:absolute;left:50%;top:-120px;width:340px;height:470px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(206,255,247,.25),transparent 67%);filter:blur(18px)}.ppt-stage-top{position:absolute;z-index:10;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;gap:.8rem}.ppt-state,.ppt-drop-counter{padding:.48rem .72rem;border:1px solid rgba(177,231,224,.24);border-radius:999px;background:rgba(10,41,50,.64);backdrop-filter:blur(10px);color:#e2fbf7;font-size:.72rem;font-weight:850}.ppt-state i{display:inline-block;width:7px;height:7px;margin-right:.35rem;border-radius:50%;background:#79e0bd;box-shadow:0 0 0 5px rgba(121,224,189,.12)}.pptlab.is-running .ppt-state i{animation:pptPulse 1s ease-in-out infinite}
.ppt-pipette{position:absolute;z-index:8;top:70px;left:calc(50% + 45px);width:34px;height:215px;transform:rotate(8deg);transform-origin:50% 10%;filter:drop-shadow(0 12px 13px rgba(0,0,0,.32));will-change:transform}.ppt-bulb{position:absolute;top:0;left:-7px;width:48px;height:67px;border:2px solid #9eb6ba;border-radius:24px 24px 13px 13px;background:linear-gradient(90deg,#253a42,#58717a 46%,#263c45)}.ppt-barrel{position:absolute;top:57px;left:9px;width:16px;height:146px;border:2px solid rgba(211,244,242,.72);border-radius:5px 5px 10px 10px;background:linear-gradient(90deg,rgba(178,219,219,.38),rgba(255,255,255,.9) 48%,rgba(144,198,201,.35));overflow:hidden}.ppt-barrel span{position:absolute;left:2px;right:2px;bottom:4px;height:78%;border-radius:3px 3px 8px 8px;background:linear-gradient(#c3edf1,#80c4d1)}.ppt-pipette:after{content:"";position:absolute;left:14px;top:199px;width:7px;height:28px;clip-path:polygon(12% 0,88% 0,60% 100%,40% 100%);background:#d7f7f3}.ppt-pipette b{position:absolute;left:50px;top:24px;padding:.34rem .5rem;border-radius:8px;background:#e9fbf7;color:#1b5e62;font-size:.67rem;white-space:nowrap}.ppt-rack{position:absolute;z-index:3;left:50%;bottom:94px;width:330px;height:82px;border:14px solid #102832;border-radius:12px;transform:translateX(-50%);box-shadow:0 15px 30px rgba(0,0,0,.38)}.ppt-rack:before{content:"";position:absolute;left:-25px;right:-25px;top:-80px;height:19px;border-radius:8px;background:linear-gradient(#294b56,#102d37);box-shadow:0 6px 10px rgba(0,0,0,.32)}.ppt-rack i{position:absolute;top:-66px;width:76px;height:38px;border:8px solid #0f2b35;border-radius:50%}.ppt-rack i:first-child{left:22px}.ppt-rack i:last-child{right:22px}
.ppt-testtube{position:absolute;z-index:5;left:50%;bottom:132px;width:208px;height:345px;border:7px solid rgba(218,247,244,.68);border-top:4px solid rgba(241,255,253,.92);border-radius:16px 16px 80px 80px;background:linear-gradient(90deg,rgba(255,255,255,.21),rgba(255,255,255,.03));box-shadow:inset 18px 0 18px rgba(255,255,255,.18),inset -16px 0 20px rgba(11,55,66,.16),0 25px 38px rgba(0,0,0,.35);transform:translateX(-50%);overflow:hidden}.ppt-testtube:before{content:"";position:absolute;z-index:4;left:-10px;right:-10px;top:-5px;height:13px;border:4px solid rgba(227,251,248,.8);border-radius:50%}.ppt-liquid{position:absolute;inset:105px 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--solution) 76%,#fff),var(--solution),color-mix(in srgb,var(--solution) 72%,#fff));transition:background 1s ease;will-change:transform,filter}.ppt-liquid:before{content:"";position:absolute;z-index:3;top:-8px;left:-4px;right:-4px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--solution) 70%,#fff);box-shadow:0 4px 12px rgba(28,98,114,.25)}.ppt-liquid.deep-blue{box-shadow:inset 0 0 42px rgba(9,25,105,.44)}.ppt-glass-shine{position:absolute;z-index:7;top:20px;bottom:34px;left:20px;width:11px;border-radius:99px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08))}.ppt-ions{position:absolute;inset:12px;z-index:2}.ppt-ions i{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;min-width:27px;height:23px;padding:0 4px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.3);color:#1c6171;font-size:.53rem;font-style:normal;font-weight:850;animation:pptFloat 4.2s ease-in-out infinite}.ppt-ions i:nth-child(3n){animation-delay:-1.4s}.ppt-ions i:nth-child(3n+1){animation-delay:-2.8s}.ppt-cloud{position:absolute;z-index:2;left:8%;right:8%;bottom:5%;height:39%;border-radius:42% 58% 35% 48%;background:radial-gradient(circle at 24% 56%,var(--ppt) 0 9%,transparent 10%),radial-gradient(circle at 45% 28%,var(--ppt) 0 12%,transparent 13%),radial-gradient(circle at 68% 54%,var(--ppt) 0 14%,transparent 15%),radial-gradient(circle at 35% 80%,var(--ppt) 0 15%,transparent 16%),radial-gradient(circle at 77% 82%,var(--ppt) 0 17%,transparent 18%),linear-gradient(transparent,var(--ppt));opacity:0;filter:blur(3px);will-change:transform,opacity,filter}.ppt-cloud.formed{opacity:.95}.ppt-cloud.dissolved{opacity:0}.ppt-ripples{position:absolute;z-index:5;left:50%;top:-10px;width:88px;height:24px;border:3px solid rgba(255,255,255,.85);border-radius:50%;transform:translateX(-50%);opacity:0}.ppt-bench{position:absolute;z-index:2;left:0;right:0;bottom:0;height:126px;background:linear-gradient(#3c4a48,#1f2b2d);border-top:4px solid #7e8e88;box-shadow:inset 0 16px 25px rgba(0,0,0,.34)}.ppt-observation{position:absolute;z-index:12;left:1rem;right:1rem;bottom:1rem;padding:.8rem .9rem;border:1px solid rgba(190,236,229,.24);border-radius:15px;background:rgba(8,35,43,.78);backdrop-filter:blur(12px);color:#e9fbf8;text-align:center}.ppt-observation small{display:block;margin-bottom:.2rem;color:#78d9cc;font-size:.54rem;font-weight:900;letter-spacing:.12em}.ppt-observation strong{font-size:.79rem}.ppt-falling-drop{position:absolute;z-index:20;width:14px;height:20px;border-radius:60% 45% 62% 52%;background:#8ed6df;box-shadow:0 0 0 5px rgba(142,214,223,.16),0 0 18px rgba(142,214,223,.7);pointer-events:none;will-change:transform}
.ppt-controls{padding:1.08rem;background:#fff}.ppt-step{padding:.72rem 0;border-bottom:1px solid #e2ecec}.ppt-step>label{display:block;margin-bottom:.65rem;color:#4d7774;font-size:.71rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.ppt-ion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.42rem}.ppt-ion-grid button,.ppt-reagent-tabs button{border:1px solid #d0e0df;border-radius:13px;background:#fff;color:var(--ink);cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.ppt-ion-grid button{display:flex;align-items:center;gap:.5rem;padding:.57rem;text-align:left}.ppt-ion-grid button b{display:grid;place-items:center;min-width:46px;height:34px;border-radius:9px;background:#edf8f6;color:#137d72;font-size:.79rem}.ppt-ion-grid button span{font-size:.72rem;font-weight:800}.ppt-ion-grid button:hover,.ppt-ion-grid button.active{border-color:#49a79c;box-shadow:0 0 0 3px rgba(73,167,156,.13);transform:translateY(-1px)}.ppt-ion-grid button.active{background:#f0faf8}.ppt-reagent-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.ppt-reagent-tabs button{padding:.7rem;text-align:left}.ppt-reagent-tabs b{display:block;font-size:.9rem}.ppt-reagent-tabs small{display:block;margin-top:.15rem;color:#66808a;font-size:.64rem}.ppt-reagent-tabs button.active{border-color:#157f74;background:#157f74;color:#fff;box-shadow:0 8px 18px rgba(21,127,116,.22)}.ppt-reagent-tabs button.active small{color:#d7f5ef}.ppt-play{width:100%;margin-bottom:.5rem;border:0;border-radius:14px;padding:.82rem;background:linear-gradient(135deg,#13887a,#2b9e8d);box-shadow:0 9px 22px rgba(21,133,118,.22);color:#fff;font-size:.8rem;font-weight:850;cursor:pointer}.ppt-playback{display:grid;grid-template-columns:.8fr 1.2fr;gap:.4rem;margin-bottom:.45rem}.ppt-pause{border:1px solid #b9d4d1;border-radius:11px;background:#edf7f5;color:#1d6962;font-size:.68rem;font-weight:850}.ppt-pause.paused{background:#f5ead8;color:#8a5a16}.ppt-playback label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.4rem;padding:.36rem .45rem;border:1px solid #d4e2e1;border-radius:11px;color:#63807e;font-size:.58rem;font-weight:750}.ppt-speed{min-width:0;border:0;background:transparent;color:#265e5b;font:inherit;font-weight:850;outline:none}.ppt-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}.ppt-actions button{border:1px solid #cbdedd;border-radius:11px;padding:.64rem .35rem;background:#f5faf9;color:#28585b;font-size:.68rem;font-weight:800;cursor:pointer}.ppt-actions button:hover,.ppt-play:hover{filter:brightness(.97);transform:translateY(-1px)}.pptlab button:disabled{cursor:wait;opacity:.62;transform:none!important}.ppt-hint{margin:.55rem 0 0;color:#74868a;font-size:.64rem;line-height:1.4}.ppt-process{margin:.72rem 0;padding:.7rem;border-radius:14px;background:#f7faf9}.ppt-progress{height:4px;border-radius:99px;background:#dfe9e7;overflow:hidden}.ppt-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#209889;transition:width .45s ease}.ppt-process ol{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem;margin:.45rem 0 .3rem;padding:0;list-style:none}.ppt-process li{color:#9aabab;font-size:.52rem;font-weight:800;text-align:center}.ppt-process li:before{content:"";display:block;width:8px;height:8px;margin:0 auto .18rem;border:2px solid #cbd9d7;border-radius:50%;background:#fff}.ppt-process li.active{color:#28736d}.ppt-process li.active:before{border-color:#279889;background:#279889}.ppt-process p{margin:0;color:#58736f;font-size:.63rem;line-height:1.4}.ppt-result{margin-top:.75rem;padding:.9rem;border-radius:16px;background:linear-gradient(145deg,#edf8f6,#f7fbfb)}.ppt-result h2{margin:.18rem 0 .35rem;font-size:1.03rem}.ppt-result p{margin:.3rem 0;color:#42656a;font-size:.75rem;line-height:1.45}.ppt-result .cn{color:#16766c}.ppt-result code{display:block;margin-top:.55rem;padding:.55rem;border-radius:9px;background:#fff;color:#24565d;font-family:Helvetica,Arial,sans-serif;font-size:.66rem;font-weight:850;line-height:1.4}
.ppt-micro{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:1rem;margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#f7fbfb,#e9f5f3)}.ppt-micro-copy{padding:1rem}.ppt-micro-copy h2{margin:.3rem 0;font-size:1.35rem}.ppt-micro-copy p{margin:.5rem 0 0;color:#5b737b;font-size:.78rem;line-height:1.55}.ppt-particle-stage{position:relative;min-height:220px;overflow:hidden;border-radius:20px;background:radial-gradient(circle at 50% 42%,#1f5965,#123b47 72%);box-shadow:inset 0 0 50px rgba(0,0,0,.2)}.ppt-solute-label{position:absolute;z-index:4;top:.65rem;left:.7rem;padding:.3rem .5rem;border-radius:99px;background:rgba(255,255,255,.12);color:#d8f5f0;font-size:.54rem;font-weight:800}.ppt-micro-particles{position:absolute;inset:0}.ppt-micro-particles i{position:absolute;z-index:2;left:var(--x);top:var(--y);display:grid;place-items:center;min-width:37px;height:37px;padding:0 5px;border:2px solid rgba(255,255,255,.76);border-radius:50%;color:#fff;font-size:.6rem;font-style:normal;font-weight:850;box-shadow:0 8px 16px rgba(0,0,0,.25);will-change:transform}.ppt-micro-particles .metal{background:#278eaa}.ppt-micro-particles .reagent{background:#a376c3}.ppt-lattice{position:absolute;z-index:3;left:50%;top:64%;display:grid;grid-template-columns:repeat(3,30px);gap:3px;transform:translate(-50%,-50%)}.ppt-lattice i{width:30px;height:30px;border:2px solid rgba(255,255,255,.82);border-radius:8px;background:#cbdfe0;box-shadow:0 5px 10px rgba(0,0,0,.2);opacity:0}.ppt-lattice i:nth-child(even){background:#8ec7d0}.pptlab footer{margin-top:.9rem;padding:1rem 1.1rem;border-left:4px solid #36aa9b;border-radius:0 14px 14px 0;background:#f2fbf9;color:#4e6c70;font-size:.8rem;line-height:1.5}.pptlab footer em{color:#197f78;font-style:normal;font-weight:850}
@keyframes pptFloat{50%{transform:translate(6px,-10px);opacity:.45}}@keyframes pptPulse{50%{box-shadow:0 0 0 8px rgba(121,224,189,0)}}@media(max-width:850px){.pptlab-layout,.ppt-micro{grid-template-columns:1fr}.pptlab-head{align-items:flex-start;flex-direction:column}.ppt-stage{min-height:560px}.ppt-micro-copy{padding:.5rem}.ppt-particle-stage{min-height:260px}}@media(max-width:500px){.pptlab{padding:12px}.pptlab h1{font-size:2.15rem}.ppt-stage{min-height:520px}.ppt-testtube{width:174px;height:315px}.ppt-rack{width:270px}.ppt-pipette{left:calc(50% + 35px)}.ppt-ion-grid{grid-template-columns:1fr}.ppt-actions{grid-template-columns:1fr}.pptlab-head a{font-size:.67rem}}@media(prefers-reduced-motion:reduce){.ppt-ions i{animation:none}.pptlab.is-running .ppt-state i{animation:none}.pptlab button{transition:none}}
