/* Task 1.6 — six-sided spinning chrome social cubes. */
#s4 .soc-patched{zoom:.8}
#s4 .soc-num-hidden{display:none!important}
#s4 .soc3d,#s4 .p9-badge{display:none!important}
#s4 .slogo{--cube-size:32px;--cube-depth:16px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:52px;height:54px;margin-right:1.25rem;vertical-align:middle;perspective:280px;pointer-events:none}
#s4 .slogo-stage{position:relative;display:block;width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d}
#s4 .slogo-cube{position:absolute;inset:0;display:block;transform-style:preserve-3d;animation:socialCubeSpin 15s linear infinite;will-change:transform}
#s4 .slogo-face{position:absolute;inset:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid rgba(215,232,255,.7);border-radius:2px;background:linear-gradient(135deg,#364453 0%,#111922 45%,#283847 100%);color:#eef6ff;box-shadow:inset 0 0 7px rgba(178,212,248,.18);backface-visibility:hidden}
#s4 .slogo-face svg{display:block;width:65%;height:65%;overflow:visible;filter:drop-shadow(0 0 3px rgba(180,219,255,.4))}
#s4 .slogo-face--front{transform:translateZ(var(--cube-depth))}
#s4 .slogo-face--back{transform:rotateY(180deg) translateZ(var(--cube-depth))}
#s4 .slogo-face--right{transform:rotateY(90deg) translateZ(var(--cube-depth))}
#s4 .slogo-face--left{transform:rotateY(-90deg) translateZ(var(--cube-depth))}
#s4 .slogo-face--top{transform:rotateX(90deg) translateZ(var(--cube-depth))}
#s4 .slogo-face--bottom{transform:rotateX(-90deg) translateZ(var(--cube-depth))}
#s4 .slogo::after{content:'';position:absolute;left:13%;right:13%;bottom:-5px;height:7px;border-radius:50%;background:radial-gradient(closest-side,rgba(140,190,255,.35),transparent);filter:blur(3px)}
#s4 a:hover .slogo-face,#s4 a:focus-visible .slogo-face{border-color:#e5f4ff;box-shadow:inset 0 0 9px rgba(178,212,248,.3),0 0 6px rgba(160,205,255,.2)}
@keyframes socialCubeSpin{from{transform:rotateX(-18deg) rotateY(0deg)}to{transform:rotateX(342deg) rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){#s4 .slogo-cube{animation:none;will-change:auto;transform:rotateX(-18deg) rotateY(28deg)}}
@media(max-width:640px){#s4 .slogo{--cube-size:28px;--cube-depth:14px;width:44px;height:46px;margin-right:.9rem}}