/* 波波乐园 · 科学实验 */
.sc-bodywrap{position:relative;display:grid;place-items:center}
.sc-body{width:min(100%,300px);height:auto;overflow:visible}
.sc-bodywrap.sm .sc-body{width:190px}
.sc-body .org{cursor:pointer;transition:filter .2s}
.sc-body .org:hover{filter:drop-shadow(0 0 6px #ffd34a) brightness(1.06)}
.sc-body .org.lit{filter:drop-shadow(0 0 10px #ffb020) brightness(1.1)}
.sc-body .org.nope{animation:nope .45s}
.sc-body.blink .lid rect{animation:scBlink .5s ease-in-out}
@keyframes scBlink{40%{height:44px}}
.sc-body .scfx{animation:scFx .9s ease-out both}
@keyframes scFx{from{opacity:0;transform:scale(.6);transform-origin:150px 150px}to{opacity:1}}
.sc-thing{position:absolute;right:4%;top:4%;font-size:54px;animation:pinBob 1.4s ease-in-out infinite}
.sc-thing svg{width:64px;height:64px}
.sc-orgcard{background:#fff7dc;border:3px solid var(--ink);border-radius:16px;padding:10px 14px;min-height:86px}
.sc-orgcard b{font:400 22px var(--f-display)}.sc-orgcard p{margin:4px 0 0;font:700 18px/1.5 var(--f-body)}
.sc-seen{display:flex;flex-wrap:wrap;gap:6px}.sc-seen span{border:3px solid #d9cdb8;border-radius:999px;padding:2px 12px;font:800 15px var(--f-body);color:#9a8a78}
.sc-seen span.on{border-color:#1f8f55;background:#dcf8e8;color:#1d6a42}
.sc-pickname{margin:0;font:800 20px var(--f-body);color:#7650d0;min-height:28px}
/* plant lab */
.sc-lab{position:relative;background:linear-gradient(180deg,#dff4ff,#f4fbff 70%,#e3f7da);border:4px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:10px;display:grid;justify-items:center;min-height:300px}
.sc-env{display:flex;gap:14px;font-size:38px;min-height:50px}
.sc-need{opacity:.15;filter:grayscale(1);transition:all .3s}.sc-need.on{opacity:1;filter:none}
.sc-lab.running .sc-need.on[data-k=sun]{animation:spin 6s linear infinite}
.sc-lab.running .sc-need.on[data-k=water]{animation:scDrip .8s ease-in infinite}
.sc-lab.running .sc-need.on[data-k=air]{animation:scWind 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scDrip{50%{transform:translateY(14px)}}
@keyframes scWind{50%{transform:translateX(12px)}}
.sc-pot{width:min(100%,220px)}.sc-pot.sm{width:160px;margin:auto}
.sc-plant{width:100%;height:auto;overflow:visible}
.sc-day{font:800 18px var(--f-body);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 14px}
.sc-day b{font:800 22px var(--f-num);color:#7650d0}
.sc-toggles{display:flex;flex-wrap:wrap;gap:8px}
.sc-tg{border:3px solid var(--ink);border-radius:16px;background:#f0ece4;box-shadow:0 4px 0 var(--ink);padding:6px 12px;font:800 18px var(--f-body);cursor:pointer;display:grid;justify-items:center;min-width:88px;opacity:.75}
.sc-tg i{font:700 13px var(--f-body);font-style:normal;color:#7a6a58}
.sc-tg.on{background:#dcf8e8;border-color:#1f8f55;opacity:1}
.sc-tg:disabled{cursor:default}
/* magnets */
.sc-magstage{background:linear-gradient(180deg,#fff,#f4ecdc);border:3px dashed #c9b48a;border-radius:18px;padding:6px}
.sc-mags{width:100%;height:auto;overflow:visible}
.sc-mags .R{cursor:pointer}
.sc-mag-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.sc-umag{width:90px;height:auto;flex:none;transition:transform .3s}
.sc-umag.zap{animation:scZap .5s ease-in-out 2}
@keyframes scZap{50%{transform:translateY(-8px) rotate(-6deg)}}
.mp-item.stick{animation:scStick .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes scStick{40%{transform:translateY(-22px) scale(1.1)}}
.mp-item.okk{border-color:#1f8f55;background:#dcf8e8}
.mp-item.badd{border-color:var(--bad);background:#ffe1e1;animation:nope .45s}
/* absorb */
.sc-mats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sc-matc{position:relative;border:4px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:26px 10px 8px;min-width:96px;display:grid;justify-items:center;gap:2px;cursor:pointer;font:800 15px var(--f-body);overflow:hidden}
.sc-matc .mp-ic{font-size:44px}.sc-matc .mp-ic svg{width:52px;height:52px}
.sc-matc .res{font:700 12px var(--f-body);font-style:normal;color:#7a6a58;min-height:16px}
.sc-drop{position:absolute;left:50%;top:-20px;width:16px;height:22px;margin-left:-8px;background:#4da3ff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:0}
.sc-matc.drip .sc-drop{animation:scFall .6s ease-in forwards}
@keyframes scFall{0%{opacity:1;top:-20px}100%{opacity:1;top:34px}}
.sc-matc.wet{background:radial-gradient(circle at 50% 45%,rgba(77,163,255,.35) 0 34%,#fff 36%)}
.sc-matc.wet .sc-drop{opacity:0}
.sc-matc.dry .sc-drop{opacity:1;top:34px;animation:scRoll 1s ease-in .1s forwards}
@keyframes scRoll{to{transform:translateX(70px);opacity:0}}
.sc-matc.sel{outline:5px solid #2fbf71;outline-offset:2px}
.sc-mode.on{background:#ffe08a}
.sc-cups{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.sc-cupw{display:grid;justify-items:center;gap:4px;font:800 16px var(--f-body)}
.sc-cupw small{font:700 12px var(--f-body);color:#7a6a58}
.sc-cup{position:relative;width:86px;height:110px;border:4px solid var(--ink);border-top:0;border-radius:0 0 18px 18px;background:rgba(255,255,255,.7);overflow:hidden}
.sc-cup .w{position:absolute;left:0;right:0;bottom:0;height:var(--lv);background:linear-gradient(180deg,#8fd0ff,#4da3ff);transition:height 1s ease-in-out}
.sc-mat{position:absolute;left:50%;top:-46px;transform:translateX(-50%);font-size:38px;transition:top .5s ease-in-out}
.sc-mat svg{width:44px;height:44px}
.sc-cupw.dip .sc-mat{animation:scDip 1.4s ease-in-out both}
@keyframes scDip{40%,60%{top:34px}100%{top:-46px}}
.sc-afterq{display:grid;gap:4px}
/* soil jar */
.sc-jarwrap{display:grid;justify-items:center;gap:6px}
.sc-jarwrap.sm .sc-jar{width:120px;height:170px}
.sc-jar{position:relative;width:150px;height:220px}
.sc-lid{position:absolute;left:18%;right:18%;top:0;height:18px;background:#7650d0;border:4px solid var(--ink);border-radius:6px}
.sc-jarin{position:absolute;left:0;right:0;top:16px;bottom:0;border:5px solid var(--ink);border-radius:18px 18px 26px 26px;background:rgba(220,240,255,.6);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.sc-ly{position:relative;height:var(--h);background:var(--c);border-top:2px dashed rgba(43,29,20,.25);transition:height 1.2s ease var(--d),opacity 1s ease var(--d);cursor:pointer}
.sc-ly[data-l="水"]{background:linear-gradient(180deg,rgba(169,216,245,.85),rgba(169,216,245,.6))}
.sc-ly i{position:absolute;top:-4px;width:10px;height:6px;border-radius:3px;background:#4a3426}.sc-ly i:nth-child(1){left:20%}.sc-ly i:nth-child(2){left:50%}.sc-ly i:nth-child(3){left:76%}
.sc-ly s{position:absolute;bottom:20%;width:14px;height:10px;border-radius:50%;background:rgba(60,50,40,.5)}.sc-ly s:nth-child(1){left:14%}.sc-ly s:nth-child(2){left:46%}.sc-ly s:nth-child(3){left:74%}
.sc-ly.tap{filter:brightness(1.3)}.sc-ly.yes{outline:4px solid #ff7b54;outline-offset:-4px}
.sc-mud{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,#8a6a4a 0 6%,transparent 7%),radial-gradient(circle at 70% 60%,#6a4a2a 0 5%,transparent 6%),radial-gradient(circle at 50% 80%,#a08060 0 7%,transparent 8%),linear-gradient(180deg,#9a7a5a,#7a5a3a);opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.sc-jar.mixed .sc-mud{opacity:1}
.sc-jar.mixed .sc-ly{opacity:.2}
.sc-jar.shake{animation:scShake .2s ease-in-out 4}
@keyframes scShake{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.sc-soilname{margin:0;font:800 16px var(--f-body)}
.sc-steps{display:flex;gap:8px;flex-wrap:wrap}
.sc-body .hit{fill:transparent;cursor:pointer}.sc-body .hit:hover{fill:rgba(255,211,74,.25)}
/* explanation art (vector cards) */
.sc-needs{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.sc-needs .sc-pot{flex-basis:100%;display:flex;justify-content:center}
.sc-card{margin:0;display:grid;justify-items:center;gap:2px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 8px 4px;box-shadow:0 3px 0 var(--ink)}
.sc-card svg{width:46px;height:46px}.sc-card figcaption{font:800 13px var(--f-body)}
.sc-card.off{opacity:.45;filter:grayscale(1);position:relative}
.sc-card.off::after{content:'';position:absolute;left:8%;right:8%;top:45%;border-top:5px solid var(--bad,#e8474c);transform:rotate(-30deg)}
.sc-op{font:800 24px var(--f-num)}
.sc-needs .sc-pot.sm{width:110px}
.sc-pot.wilt svg{transform-origin:50% 100%;animation:scWilt 1.6s ease-in 1.1s both}
@keyframes scWilt{to{transform:rotate(-14deg) scaleY(.82);filter:saturate(.3) brightness(.9)}}
.sc-cap{margin:6px 0 0;font:700 14px/1.5 var(--f-body);text-align:center}
.sc-absorb{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-ab{margin:0;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px;text-align:center}
.sc-ab svg{width:100%;height:auto}.sc-ab figcaption{font:600 12px/1.4 var(--f-body)}.sc-ab figcaption b{display:block;font-size:14px}
/* the drop falls from above; on the sponge it is soaked up and the sponge darkens, on plastic it beads and stays */
.sc-fall{animation:scFall .8s cubic-bezier(.55,0,.9,.45) .5s both}
@keyframes scFall{from{transform:translateY(-6px);opacity:0}20%{opacity:1}to{transform:translateY(34px)}}
.sc-fall.sink{animation:scFall .8s cubic-bezier(.55,0,.9,.45) .5s both,scSoak .7s ease-in 1.3s forwards}
@keyframes scSoak{to{transform:translateY(46px) scale(1,.2);opacity:0}}
.sc-ab .sc-wet{animation:scWet .9s ease-out 1.5s forwards}
@keyframes scWet{to{opacity:.28}}
.sc-fall.bead{animation:scFall .8s cubic-bezier(.55,0,.9,.45) .5s both,scBead .5s ease-out 1.3s forwards}
@keyframes scBead{from{transform:translateY(34px)}50%{transform:translateY(32px) scale(1.15,.85)}to{transform:translateY(34px) scale(1,.92)}}
.sc-magobj svg{width:min(100%,320px);height:auto;display:block;margin:0 auto}
.sc-pull{animation:scPull .7s cubic-bezier(.6,0,.8,.3) .8s forwards}
@keyframes scPull{to{transform:translateY(-20px)}}
.sc-stay{animation:scJiggle .5s ease-in-out 1s 2}
@keyframes scJiggle{50%{transform:translateY(-2px)}}
.sc-poles{display:grid;gap:10px}
.sc-pair{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 8px}
.sc-pair svg{width:100%;height:auto}.sc-pair p{margin:2px 0 0;font:600 13px var(--f-body);text-align:center}
.sc-pair.attract .mv{animation:scSnap .6s cubic-bezier(.7,0,.9,.5) .7s forwards}
@keyframes scSnap{to{transform:translateX(-28px)}}
.sc-pair.repel .mv{animation:scPush .9s cubic-bezier(.1,.7,.3,1) .9s forwards}
@keyframes scPush{to{transform:translateX(20px)}}
@media (prefers-reduced-motion:reduce){.sc-fall,.sc-pull,.sc-pair .mv,.sc-pot.wilt svg{animation:none!important}}

/* Natural-proportion observation portrait, with an accessible alternative to small features. */
.sc-body.sc-person{width:min(100%,360px);overflow:visible}
.sc-bodywrap:has(.sc-person){background:radial-gradient(ellipse at 50% 45%,#edf4e9 0 48%,transparent 49%);padding:8px 0}
.sc-bodywrap.sm .sc-person{width:210px}
.sc-person .org.lit{filter:drop-shadow(0 0 3px #69aa8c80)}
.sc-person .sc-eye-closed,.sc-person .sc-mouth-open{display:none}
.sc-person .tongue.lit .sc-mouth-open{display:block}.sc-person .tongue.lit .sc-mouth-rest{display:none}
.sc-person.blink .sc-eyes{transform-box:fill-box;transform-origin:center;animation:scNaturalBlink .45s ease}
@keyframes scNaturalBlink{45%,55%{transform:scaleY(.06)}}
.sc-person .hit:hover{fill:#63997e16}
.sc-person .scfx{animation:scNaturalFocus .3s ease both}
@keyframes scNaturalFocus{from{opacity:0}to{opacity:1}}
.sc-organ-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sc-organ-controls button{min-width:64px;min-height:44px;border:2px solid #9aaa9f;border-radius:12px;padding:7px 12px;background:#fffdf6;color:#354d40;font:700 16px var(--f-body);cursor:pointer}
.sc-organ-controls button.on{border-color:#4c8569;background:#e2f2e6}
.sc-organ-controls button:focus-visible{outline:3px solid #edac41;outline-offset:3px}
.sc-thing{animation:none;top:auto;bottom:7%;right:1%;padding:6px;border-radius:12px;background:#fff9;border-bottom:3px solid #a69879}
.sc-sim-note{font:600 12px/1.5 var(--f-body);color:#665741;text-align:center}
.sc-pot.wilt svg{animation:none;transform:none}
.sc-lab{background:linear-gradient(180deg,#e5f1f0,#f7f6e9 77%,#d6c4a1 77% 80%,#eee2ce 80%);border-color:#756752;box-shadow:0 4px 0 #c6b79a}
/* The specimen sits outside the clipped water chamber, so it never disappears at the rim. */
.sc-cups{padding-top:50px;gap:26px;align-items:start}
.sc-cup{width:112px;height:150px;overflow:visible;border:0;background:none}
.sc-water-chamber{position:absolute;inset:0;overflow:hidden;border:3px solid #728c91;border-top:2px solid #a3babe;border-radius:3px 3px 17px 17px;background:linear-gradient(100deg,#effaffaa,#fff6 25%,#e3eef433)}
.sc-water-chamber:after{content:'';position:absolute;inset:8px 10px 12px auto;width:5px;border-radius:8px;background:#fff9;pointer-events:none}
.sc-cup .w{height:calc(var(--lv)*.8);background:linear-gradient(#acd8dfb8,#78b7ccbf);border-top:2px solid #5598ae}
.sc-cup:after{content:'';position:absolute;bottom:-5px;left:-10px;right:-10px;border-top:4px solid #c6b393;border-radius:50%}
.sc-cup-ticks{position:absolute;top:19px;left:8px;font:700 10px/28px var(--f-num);color:#526a70;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 26px,#587a7d80 26px 27px,transparent 27px 28px);padding-right:16px}
.sc-cup .sc-mat{top:-46px;z-index:1}.sc-cup .sc-mat svg{width:62px;height:44px}
.sc-cupw.dip .sc-mat{animation:scMeasuredDip 1.4s ease-in-out both}
@keyframes scMeasuredDip{35%,65%{top:58px}100%{top:-46px}}
.sc-cupw.dip .sc-sample{filter:saturate(.75) brightness(.88)}
/* A droplet beads on level non-absorbent material instead of rolling off by itself. */
.sc-matc{background:linear-gradient(#fffdf8 78%,#e7dfd0 78% 81%,#fffdf8 81%);border-color:#736751;box-shadow:0 3px 0 #c9bda5}
.sc-matc .mp-ic{position:relative;display:block}
.sc-matc.wet{background:linear-gradient(#fffdf8 78%,#e7dfd0 78% 81%,#fffdf8 81%)}
.sc-matc.wet .mp-ic:after{content:'';position:absolute;inset:15% 10%;border-radius:50%;background:radial-gradient(ellipse,#4b838970,transparent 72%);animation:scWicking .7s ease-out both;pointer-events:none}
@keyframes scWicking{from{transform:scale(.2);opacity:.2}to{transform:scale(1);opacity:1}}
.sc-matc.drip .sc-drop{animation:scDropToSample .6s ease-in forwards;z-index:2;box-shadow:inset 3px 1px 3px #e8fbff}
@keyframes scDropToSample{from{top:-20px;opacity:1}to{top:43px;opacity:1}}
.sc-matc.dry .sc-drop{top:43px;opacity:1;animation:none;transform:scale(1.15,.65);box-shadow:inset 3px 2px 3px #e8fbff}
.sc-jarin:after{content:'';position:absolute;inset:7px auto 10px 9px;width:8px;border-radius:8px;background:linear-gradient(#fff6,#fff1);pointer-events:none}
.sc-ly[data-l="沙"]{background:radial-gradient(#ad8e5770 .7px,transparent 1px) 0 0/5px 4px,var(--c)}
.sc-ly[data-l="黏土"],.sc-ly[data-l="淤泥"]{background:linear-gradient(90deg,#fff1,transparent 40%,#452e2020),var(--c)}
.sc-jarwrap{padding-bottom:8px;background:linear-gradient(transparent calc(100% - 7px),#cbbb9d calc(100% - 7px));border-radius:0 0 12px 12px}
.sc-stay{animation:none}
.sc-wick-reference{width:100%;height:auto;object-fit:contain;border:2px solid #a49880;border-radius:12px}
.sc-absorb-results{display:grid;gap:12px}.sc-absorb-results figure{margin:0;display:grid;gap:4px;padding:10px;border:2px solid #a1b6b5;border-radius:12px;background:#f6fbf8}.sc-absorb-results meter{width:100%;height:20px}.sc-absorb-results small{font:600 13px var(--f-body)}
.sc-wick-model{position:relative;width:min(100%,620px);height:245px;margin:12px auto 0}
.sc-wick-rod{position:absolute;top:34px;left:0;right:0;height:9px;border:2px solid #674d36;border-radius:5px;background:#b58c5d}
.sc-wick-strips{position:absolute;inset:0 8% 0;display:flex;justify-content:space-between;gap:16px}
.sc-wick-strips figure{position:relative;margin:0;flex:1;min-width:0;text-align:center}
.sc-wick-strips b{display:block;font:700 14px/22px var(--f-body);white-space:nowrap}
.sc-wick-strip{position:absolute;top:41px;left:50%;width:min(80%,64px);height:153px;transform:translateX(-50%);border:2px solid #918575;border-radius:2px;background:#fffbed;overflow:hidden}
.sc-wick-strip.paper{background:radial-gradient(#99896930 .7px,transparent 1px) 0 0/5px 6px,#fffbed}
.sc-wick-strip.towel{background:repeating-linear-gradient(90deg,#b59fbe 0 2px,#d6c3dc 2px 5px)}
.sc-wick-strip.plastic{background:linear-gradient(120deg,#eaf7f388 0 20%,#fffd 22% 28%,#d3eef366 30% 65%,#fff8 67% 72%,#d3eef366 74%)}
.sc-wick-wet{position:absolute;bottom:0;left:0;right:0;height:calc(31px + var(--rise)*1.5px);max-height:100%;background:#4297b67a;border-top:2px dotted #43829b;transition:height 2.2s cubic-bezier(.1,.55,.3,1)}
.sc-wick-strip.plastic .sc-wick-wet{background:transparent;border:0}
.sc-wick-clip{position:absolute;top:26px;left:calc(50% - 4px);height:27px;width:8px;border:1.5px solid #816124;border-radius:3px;background:#e3bc58;box-shadow:1px 1px 0 #0002}
.sc-wick-bath{position:absolute;left:1%;right:1%;bottom:14px;height:90px;border:3px solid #6e919d;border-radius:5px 5px 16px 16px;background:linear-gradient(transparent 0 19%,#86c5dc66 20% 96%,#76b8d066 96%);pointer-events:none;box-shadow:0 5px 0 #c8b998}
.sc-wick-bath:before{content:'';position:absolute;top:18%;left:0;right:0;border-top:2px solid #5598b0}
@media(max-width:500px){.sc-wick-strips{gap:7px;left:3%;right:3%}.sc-wick-strips b{font-size:12px}.sc-wick-model{height:235px}.sc-wick-strip{height:143px}}
@media(prefers-reduced-motion:reduce){.sc-wick-wet{transition:none}}
.sc-object-trial{margin:12px auto;padding:8px 14px;max-width:430px;border:2px solid #a6afa1;border-radius:15px;background:#f9fbf4}
.sc-object-trial svg{width:100%;height:auto;display:block}.sc-object-trial p{font:700 14px/1.5 var(--f-body);text-align:center;margin:5px 0}
.sc-trial-icon{width:64px;height:64px;display:grid;place-items:center;font-size:42px}.sc-trial-icon svg{width:58px;height:58px}
.sc-trial-item{transition:transform .55s cubic-bezier(.65,0,.8,.7)}.sc-trial-item.attracted{transform:translateX(-80px)}
@media(prefers-reduced-motion:reduce){.sc-trial-item{transition:none}}
@media(prefers-reduced-motion:reduce){.sc-person *,.sc-cupw.dip .sc-mat,.sc-matc.drip .sc-drop,.sc-matc.wet .mp-ic:after{animation-duration:.001ms!important}.sc-cup .w{transition:none}}

/* SMART 888 pilot: make the two static science explanation panels show the process. */
.sc-soil-demo .sc-jar{animation:scSoilJarIn .42s ease both}
.sc-soil-demo .sc-ly{animation:scSoilLayerIn .62s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--d)}
@keyframes scSoilJarIn{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
@keyframes scSoilLayerIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.sc-absorb-results figure.pop{animation:scResultIn .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--t)}
@keyframes scResultIn{from{transform:translateY(8px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){
 .sc-soil-demo .sc-jar,.sc-soil-demo .sc-ly,.sc-absorb-results figure.pop{animation:none}
}