.ink-container{pointer-events:none;z-index:1000;width:100px;height:100px;position:fixed;top:calc(60vh + 30px);left:calc(50% + 100px);transform:translate(-50%,-50%)}.sphere{cursor:grab;pointer-events:auto;filter:blur(2px);background:#000;border-radius:50%;width:50px;height:50px;transition:box-shadow .3s;animation:4s ease-in-out infinite liquidWobble;position:absolute;top:25px;left:25px;transform:translate(0);box-shadow:0 5px 15px rgba(0,0,0,.3),inset 0 -3px 5px rgba(0,0,0,.2),inset 0 3px 5px rgba(255,255,255,.1)}.sphere:hover{box-shadow:0 15px 40px rgba(0,0,0,.4),inset 0 -5px 10px rgba(0,0,0,.2),inset 0 5px 10px rgba(255,255,255,.3)}.sphere:active,.sphere.moving{cursor:grabbing;box-shadow:0 5px 15px rgba(0,0,0,.5),inset 0 -3px 8px rgba(0,0,0,.3),inset 0 3px 8px rgba(255,255,255,.4)}@keyframes liquidWobble{0%,to{border-radius:50%;transform:translate(-50%,-50%)scale(1)}25%{border-radius:45% 55% 50% 50%;transform:translate(-50%,-50%)scale(1.02)}50%{border-radius:50% 50% 45% 55%;transform:translate(-50%,-50%)scale(.98)}75%{border-radius:55% 45% 50% 50%;transform:translate(-50%,-50%)scale(1.01)}}.eye{pointer-events:none;z-index:1001;background:radial-gradient(circle at 30% 30%,#fff,#e0e0e0);border-radius:50%;width:5.4px;height:5.4px;transition:all .1s ease-out;animation:5s ease-in-out infinite doubleBlink;position:absolute;box-shadow:0 .5px 2px rgba(0,0,0,.3),inset 0 .25px 1px rgba(255,255,255,.8)}.left-eye{top:calc(50% - 33px);left:calc(50% - 39px)}.right-eye{top:calc(50% - 33px);left:calc(50% - 17px)}.eye.outside-sphere{background:radial-gradient(circle at 30% 30%,#ff6b6b,#e74c3c);box-shadow:0 2px 8px rgba(231,76,60,.4),inset 0 1px 3px rgba(255,255,255,.6)}.eye.blinking{animation:1.5s ease-in-out infinite blink}.eye.x-shaped{background:linear-gradient(45deg,transparent 40%,red 40%,red 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,red 40%,red 60%,transparent 60%);border-radius:0}.eye.sparkling{animation:.8s ease-in-out infinite sparkle}.eye.peeking{background:radial-gradient(circle at 70% 30%,#fff,#e0e0e0);transform:translate(8px)}.eye.happy{border-radius:50%/60% 60% 40% 40%;height:8px;animation:2s ease-in-out infinite happy}.eye.sad{background:radial-gradient(circle at 30% 70%,#87ceeb,#4682b4);border-radius:50%/40% 40% 60% 60%;height:8px}.eye.surprised{width:8px;height:8px;animation:1s ease-in-out surprised}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes sparkle{0%,to{box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 3px rgba(255,255,255,.8)}50%{box-shadow:0 2px 8px rgba(255,215,0,.6),inset 0 1px 3px #fff,0 0 15px rgba(255,215,0,.8)}}@keyframes happy{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes surprised{0%{width:6px;height:6px}50%{width:9px;height:9px}to{width:8px;height:8px}}@keyframes doubleBlink{0%,8%,12%,16%,20%,to{transform:scaleY(1)}10%,18%{transform:scaleY(.1)}}.orbital-container{pointer-events:none;z-index:999;width:120px;height:120px;position:absolute;transform:translate(-50%,-50%)}.electron{background:radial-gradient(circle,#0ff,#0080ff);border-radius:50%;width:6px;height:6px;position:absolute;box-shadow:0 0 10px rgba(0,255,255,.8)}.electron-1{animation:2s linear infinite orbit1}.electron-2{animation:2s linear infinite orbit2}.electron-3{animation:2s linear infinite orbit3}@keyframes orbit1{0%{transform:rotate(0)translate(60px)rotate(0)}to{transform:rotate(360deg)translate(60px)rotate(-360deg)}}@keyframes orbit2{0%{transform:rotate(120deg)translate(60px)rotate(-120deg)}to{transform:rotate(480deg)translate(60px)rotate(-480deg)}}@keyframes orbit3{0%{transform:rotate(240deg)translate(60px)rotate(-240deg)}to{transform:rotate(600deg)translate(60px)rotate(-600deg)}}
