#about .about-pet-layer { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 2; contain: paint; }
#about .about-pet { position: absolute; left: 0; top: 0; width: 100px; opacity: .92; will-change: transform; filter: drop-shadow(0 5px 4px #0003); }
#about .about-pet svg { display: block; width: 100%; height: auto; }
#about .about-pet__beam { opacity: 0; }
#about .about-pet__eyes { transform: translateX(3px); transition: transform .3s; }
#about .about-pet-layer[data-action="clean"] .about-pet__eyes { transform: translateY(-3px); }
#about .about-pet__arm { transform-origin: 148px 110px; }
#about .about-pet-layer[data-action="cast"] .about-pet__arm { transform: rotate(-28deg); transition: transform .25s ease-out; }
#about .about-pet-rope { position: absolute; left: 0; top: 0; height: 2px; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, #96efdc 0 5px, #438d8a 5px 8px); box-shadow: 0 0 5px #83ece040; pointer-events: none; }
#about .about-pet-rope::after { content: ''; position: absolute; right: -13px; top: -12px; width: 26px; height: 26px; border: 2px solid #96efdc; border-radius: 50%; box-sizing: border-box; }
html[data-theme="white"] #about .about-pet-rope { background: repeating-linear-gradient(90deg, #167a77 0 5px, #6eb6a9 5px 8px); }
html[data-theme="white"] #about .about-pet-rope::after { border-color: #167a77; }
#about .about-pet-layer[data-action="clean"] .about-pet__arm { animation: pet-polish .55s ease-in-out infinite alternate; }
#about .about-pet-copy { position: absolute; top: 0; left: 0; display: grid; place-items: center; border-radius: 50%; background: #13333ce8; color: #83ece0; border: 1px solid #87e8cc70; box-shadow: 0 5px 16px #0002; pointer-events: none; }
#about .about-pet-copy svg { width: 45%; height: 45%; }
#about .about-pet-copy::after { content: ''; position: absolute; inset: -8px; border: 1px dashed #83ece080; border-radius: 50%; opacity: 0; }
#about .about-pet-layer[data-action="clean"] .about-pet-copy::after { opacity: 1; animation: pet-clean-ring 2s linear infinite; }
html[data-theme="white"] #about .about-pet-copy { background: #f3fcf8; color: #087780; border-color: #08778055; }
@keyframes pet-polish { to { transform: rotate(-24deg); } }
@keyframes pet-clean-ring { to { transform: rotate(360deg); } }
@media (max-width: 600px) { #about .about-pet { width: 82px; } }
@media (prefers-reduced-motion: reduce) { #about .about-pet-layer { display: none; } }