html,body{margin:0;background:#f5f6ef;color:#183f37;font-family:Arial,Helvetica,sans-serif}
#portfolio-loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f6ef;z-index:9999;font-size:16px}
.citrus-trio{display:flex;gap:24px;padding:30px;align-items:center;justify-content:center;height:130px}
.citrus-trio i{position:relative;display:block;width:44px;height:44px;border-radius:46% 52% 45% 50%;background:radial-gradient(circle at 32% 30%,#f9ed8e,#e2b637);box-shadow:inset -4px -4px 0 #caa92b55;animation:citrus-bob 1.1s ease-in-out infinite alternate}
.citrus-trio i:after{content:'';position:absolute;top:-9px;left:23px;width:22px;height:11px;border-radius:0 90% 0 90%;background:#52775d;transform:rotate(-25deg)}
.citrus-trio i:nth-child(2){animation:citrus-roll 1.6s ease-in-out infinite alternate}
.citrus-trio i:nth-child(3){animation:citrus-sway 1.3s ease-in-out infinite alternate}
[data-dance="1"] .citrus-trio{flex-direction:row-reverse}[data-dance="2"] .citrus-trio i{animation-delay:-.7s}
@keyframes citrus-bob{to{transform:translateY(-18px) rotate(12deg)}}@keyframes citrus-roll{to{transform:rotate(35deg) translateX(7px)}}@keyframes citrus-sway{to{transform:rotate(-22deg) scale(.9)}}
@media(prefers-reduced-motion:reduce){.citrus-trio i{animation:none!important}}