.visual-stage{position:relative;width:250px;height:250px;display:grid;place-items:center}.visual-object{display:none;position:relative;width:210px;height:210px}.visual-stage[data-visual="thermometer"] .thermometer-visual,.visual-stage[data-visual="ruler"] .ruler-visual,.visual-stage[data-visual="balance"] .balance-visual,.visual-stage[data-visual="beaker"] .beaker-visual,.visual-stage[data-visual="piston"] .piston-visual,.visual-stage[data-visual="orb"] .energy-visual,.visual-stage[data-visual="speedometer"] .speed-visual,.visual-stage[data-visual="wave"] .wave-visual,.visual-stage[data-visual="density"] .density-visual,.visual-stage[data-visual="spring"] .spring-visual,.visual-stage[data-visual="bolt"] .bolt-visual,.visual-stage[data-visual="clock"] .clock-visual,.visual-stage[data-visual="angle"] .angle-visual,.visual-stage[data-visual="charge"] .electric-visual,.visual-stage[data-visual="voltage"] .electric-visual,.visual-stage[data-visual="current"] .electric-visual,.visual-stage[data-visual="resistor"] .electric-visual{display:block}
.thermometer-visual{width:120px;height:235px}.thermo-scale{position:absolute;left:0;top:8px;height:190px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:.72rem}.thermo-tube{position:absolute;left:58px;top:7px;width:28px;height:190px;border:2px solid var(--line);border-radius:18px 18px 7px 7px;overflow:hidden;background:linear-gradient(90deg,#fff,#f0f4f1)}.thermo-fill{position:absolute;left:6px;right:6px;bottom:0;height:50%;background:linear-gradient(180deg,var(--amber),var(--green));border-radius:8px 8px 2px 2px;transition:.3s}.thermo-bulb{position:absolute;left:45px;bottom:0;width:54px;height:54px;border:2px solid var(--line);border-radius:50%;background:var(--amber);box-shadow:inset 0 0 0 8px rgba(255,255,255,.17)}
.ruler-body{position:absolute;left:8px;right:8px;top:83px;height:48px;background:var(--amber-soft);border:2px solid #c59a55;border-radius:8px;transform:rotate(-8deg);background-image:repeating-linear-gradient(90deg,transparent 0 11px,#9d7840 12px,transparent 13px)}.ruler-body span{position:absolute;right:16px;bottom:7px;font-weight:900;color:#765c35;background:var(--amber-soft);padding-left:6px}
.balance-post{position:absolute;left:102px;top:45px;width:6px;height:110px;background:var(--green)}.balance-beam{position:absolute;left:35px;top:63px;width:140px;height:6px;background:var(--green);border-radius:5px}.pan{position:absolute;top:96px;width:55px;height:25px;border:3px solid var(--green);border-top:0;border-radius:0 0 30px 30px}.pan:before{content:"";position:absolute;left:26px;top:-34px;width:2px;height:34px;background:var(--green)}.pan.left{left:22px}.pan.right{right:22px}.balance-base{position:absolute;left:65px;bottom:37px;width:80px;height:12px;background:var(--amber);border-radius:8px}
.beaker-glass{position:absolute;left:56px;top:35px;width:98px;height:140px;border:3px solid var(--green);border-top:0;border-radius:0 0 25px 25px;overflow:hidden}.beaker-glass:before{content:"";position:absolute;left:-1px;top:0;width:36px;height:7px;background:var(--green);border-radius:0 0 5px 0}.beaker-liquid{position:absolute;left:0;right:0;bottom:0;height:54%;background:linear-gradient(180deg,rgba(137,169,184,.45),rgba(23,109,91,.36));border-top:2px solid rgba(23,109,91,.45)}.beaker-glass span{position:absolute;right:14px;top:30px;font-weight:900;color:var(--green)}
.piston-chamber{position:absolute;left:50px;top:55px;width:110px;height:120px;border:3px solid var(--green);border-radius:10px;overflow:hidden}.piston-head{position:absolute;left:7px;right:7px;top:30px;height:14px;background:var(--amber);border-radius:4px}.piston-fluid{position:absolute;left:0;right:0;bottom:0;height:48%;background:rgba(137,169,184,.35)}.piston-rod{position:absolute;left:101px;top:18px;width:8px;height:75px;background:var(--green);border-radius:4px}
.energy-core{position:absolute;left:79px;top:79px;width:52px;height:52px;border-radius:50%;background:var(--amber);display:grid;place-items:center;font-weight:900;color:white}.energy-orbit{position:absolute;left:30px;top:82px;width:150px;height:48px;border:2px solid var(--green);border-radius:50%}.energy-orbit.o2{transform:rotate(60deg)}.energy-orbit:after{content:"";position:absolute;right:13px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--green)}
.speed-dial{position:absolute;left:35px;top:35px;width:140px;height:140px;border:8px solid var(--green);border-bottom-color:var(--amber);border-radius:50%;background:radial-gradient(circle,#fff 0 58%,transparent 59%)}.speed-needle{position:absolute;left:66px;top:28px;width:7px;height:52px;background:var(--amber);transform-origin:50% 100%;transform:rotate(45deg);border-radius:7px}.speed-dial span{position:absolute;left:18px;bottom:24px}.speed-dial b{position:absolute;right:17px;bottom:24px}
.wave-line{position:absolute;left:15px;right:15px;top:98px;height:4px;background:transparent}.wave-line:before{content:"∿∿∿";position:absolute;left:0;right:0;top:-43px;text-align:center;font-size:72px;letter-spacing:-12px;color:var(--green);font-family:Georgia,serif}.wave-visual span{position:absolute;right:28px;bottom:35px;font-weight:900;color:var(--amber)}
.density-tank{position:absolute;left:50px;top:40px;width:110px;height:140px;border:3px solid var(--green);border-radius:8px 8px 20px 20px;overflow:hidden}.density-liquid{position:absolute;left:0;right:0;bottom:0;height:65%;background:rgba(137,169,184,.35)}.density-block{position:absolute;left:35px;bottom:52px;width:40px;height:40px;background:var(--amber);border:2px solid #b97d21;transform:rotate(8deg)}
.spring-hook{position:absolute;left:100px;top:25px;width:10px;height:28px;border:3px solid var(--green);border-bottom:0;border-radius:8px 8px 0 0}.spring-coil{position:absolute;left:85px;top:53px;width:40px;height:85px;background:repeating-linear-gradient(180deg,transparent 0 6px,var(--green) 7px 9px,transparent 10px 12px);transform:skewX(-12deg)}.spring-weight{position:absolute;left:71px;bottom:30px;width:68px;height:52px;background:var(--amber);border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff}
.bolt-shape{position:absolute;left:75px;top:25px;width:65px;height:150px;background:var(--amber);clip-path:polygon(56% 0,15% 52%,48% 52%,34% 100%,88% 40%,55% 40%)}.bolt-visual span{position:absolute;right:28px;bottom:28px;font-weight:900;color:var(--green)}
.clock-face{position:absolute;left:35px;top:35px;width:140px;height:140px;border:7px solid var(--green);border-radius:50%;background:radial-gradient(circle at center,var(--amber) 0 5px,#fff 6px)}.hand{position:absolute;left:66px;top:26px;width:6px;height:46px;background:var(--green);transform-origin:50% 100%;border-radius:6px}.hand.h1{transform:rotate(25deg)}.hand.h2{height:36px;top:36px;transform:rotate(120deg);background:var(--amber)}
.angle-ray{position:absolute;left:50px;bottom:55px;width:120px;height:4px;background:var(--green);transform-origin:left center}.angle-ray.a2{transform:rotate(-42deg)}.angle-arc{position:absolute;left:50px;bottom:55px;width:65px;height:65px;border:3px solid var(--amber);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-42deg)}.angle-visual span{position:absolute;left:100px;bottom:83px;font-size:1.4rem;font-weight:900;color:var(--amber)}
.electric-node{position:absolute;top:87px;width:30px;height:30px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 8px rgba(216,155,58,.15)}.electric-node.n1{left:35px}.electric-node.n2{right:35px;background:var(--green);box-shadow:0 0 0 8px rgba(23,109,91,.14)}.electric-line{position:absolute;left:62px;right:62px;top:100px;height:4px;background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 16px)}.electric-visual span{position:absolute;left:88px;top:63px;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:var(--green)}

.visual-stage[data-visual="molarity"] .molarity-visual,
.visual-stage[data-visual="molar_mass"] .molar-mass-visual,
.visual-stage[data-visual="dilution"] .dilution-visual{display:block}

.thermo-fill,.beaker-liquid,.piston-fluid,.density-liquid,.chem-liquid,.chem-fill{transition:height .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.speed-needle{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.spring-coil{transition:transform .4s ease}
.energy-orbit{animation:orbitPulse 3.2s ease-in-out infinite}
.wave-line:before{animation:waveFloat 2.8s ease-in-out infinite}
@keyframes orbitPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@keyframes waveFloat{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

.chem-beaker{position:absolute;left:52px;top:35px;width:106px;height:145px;border:3px solid var(--green);border-top:0;border-radius:0 0 24px 24px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(230,239,235,.6))}
.chem-beaker:before{content:"";position:absolute;left:0;top:0;width:42px;height:7px;background:var(--green);border-radius:0 0 5px 0}
.chem-liquid{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(216,155,58,.38),rgba(23,109,91,.32))}
.chem-beaker span{position:absolute;right:13px;top:23px;color:var(--green);font-weight:900}
.solute-dots{position:absolute;inset:48px 15px 18px 15px;background:
radial-gradient(circle at 18% 72%,var(--green) 0 3px,transparent 4px),
radial-gradient(circle at 40% 44%,var(--amber) 0 3px,transparent 4px),
radial-gradient(circle at 68% 66%,var(--green) 0 3px,transparent 4px),
radial-gradient(circle at 78% 32%,var(--amber) 0 3px,transparent 4px),
radial-gradient(circle at 28% 24%,var(--green) 0 3px,transparent 4px)
}

.atom-cluster{position:absolute;left:40px;top:35px;width:130px;height:130px}
.atom-cluster:before,.atom-cluster:after,.atom-cluster i,.atom-cluster b{content:"";position:absolute;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.26)}
.atom-cluster:before{width:52px;height:52px;left:39px;top:39px;background:var(--amber)}
.atom-cluster:after{width:38px;height:38px;left:8px;top:52px;background:var(--green)}
.atom-cluster i:nth-child(1){width:34px;height:34px;right:5px;top:28px;background:var(--blue)}
.atom-cluster i:nth-child(2){width:30px;height:30px;right:22px;bottom:8px;background:var(--rose)}
.atom-cluster i:nth-child(3){width:28px;height:28px;left:30px;bottom:6px;background:var(--mint);border:2px solid var(--green)}
.atom-cluster b{width:22px;height:22px;left:20px;top:12px;background:var(--amber)}
.atom-cluster span{position:absolute;left:42px;bottom:-28px;color:var(--green);font-weight:900}

.dilution-visual{width:230px!important}
.chem-flask{position:absolute;bottom:30px;width:72px;height:95px;border:3px solid var(--green);border-radius:8px 8px 28px 28px;overflow:hidden}
.chem-flask:before{content:"";position:absolute;left:23px;top:-36px;width:20px;height:39px;border:3px solid var(--green);border-bottom:0;border-radius:4px 4px 0 0}
.left-flask{left:18px}.right-flask{right:18px}
.chem-fill{position:absolute;left:0;right:0;bottom:0}.chem-fill.dark{height:62%;background:rgba(23,109,91,.5)}.chem-fill.light{height:38%;background:rgba(137,169,184,.3)}
.chem-flask span{position:absolute;left:0;right:0;top:30px;text-align:center;font-weight:900;color:var(--green)}
.transfer-arrow{position:absolute;left:98px;top:90px;font-size:2.2rem;color:var(--amber);font-weight:900}

.ambient-grid{position:absolute;inset:22px;border-radius:24px;opacity:.28;background-image:linear-gradient(rgba(15,107,87,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,107,87,.08) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at center,#000 20%,transparent 78%)}
.visual-stage[data-visual="area"] .area-visual,.visual-stage[data-visual="acceleration"] .acceleration-visual,.visual-stage[data-visual="torque"] .torque-visual,.visual-stage[data-visual="concentration"] .concentration-visual{display:block}
.area-grid{position:absolute;left:35px;top:35px;width:140px;height:140px;border:3px solid var(--green);background:linear-gradient(rgba(15,107,87,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(15,107,87,.12) 1px,transparent 1px);background-size:20px 20px;border-radius:10px}.area-grid span{position:absolute;right:10px;bottom:8px;background:var(--surface);padding:4px 6px;border-radius:7px;color:var(--green);font-weight:900}
.accel-track{position:absolute;left:20px;right:20px;top:100px;height:6px;background:var(--green);border-radius:10px}.accel-track:before{content:"";position:absolute;left:0;right:0;top:-35px;border-top:2px dashed rgba(15,107,87,.25)}.accel-track i,.accel-track b,.accel-track em{position:absolute;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--amber)}.accel-track i{left:12px}.accel-track b{left:78px;background:var(--blue)}.accel-track em{right:10px;background:var(--green);box-shadow:18px 0 0 -8px rgba(15,107,87,.35),34px 0 0 -12px rgba(15,107,87,.25)}
.torque-wheel{position:absolute;left:38px;top:38px;width:134px;height:134px;border:8px solid var(--green);border-radius:50%}.torque-wheel:before{content:"";position:absolute;left:58px;top:58px;width:8px;height:8px;border-radius:50%;background:var(--amber)}.torque-wheel i{position:absolute;left:61px;top:8px;width:6px;height:54px;background:var(--amber);transform-origin:50% 100%;transform:rotate(40deg);border-radius:8px}.torque-wheel span{position:absolute;left:47px;top:44px;font-size:1.6rem;font-weight:900;color:var(--green)}
.conc-column{position:absolute;left:74px;top:20px;width:64px;height:170px;border:3px solid var(--green);border-radius:8px 8px 18px 18px;overflow:hidden}.conc-fill{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,rgba(217,150,50,.48),rgba(15,107,87,.32))}.conc-column i,.conc-column b{position:absolute;border-radius:50%;background:var(--green)}.conc-column i{width:7px;height:7px;left:16px;bottom:38px}.conc-column b{width:6px;height:6px;right:13px;bottom:65px;background:var(--amber)}.conc-column span{position:absolute;left:0;right:0;top:15px;text-align:center;font-weight:900;color:var(--green)}