.v3d{position:fixed;inset:0;z-index:2000;display:none;place-items:center;text-align:center;padding:1.5rem;color:#eef2f9;
 background:linear-gradient(165deg,rgba(7,12,26,.95),rgba(11,20,42,.92));
 backdrop-filter:blur(7px) saturate(125%);-webkit-backdrop-filter:blur(7px) saturate(125%)}
.v3d.on{display:grid}
.v3d-stage{perspective:820px;perspective-origin:50% 40%;display:grid;place-items:center}
.v3d-cube{position:relative;width:74px;height:74px;transform-style:preserve-3d;
 animation:v3dTumble 4s cubic-bezier(.66,.02,.34,1) infinite}
.v3d-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:13px;
 border:1px solid rgba(127,176,255,.42);
 background:linear-gradient(145deg,rgba(59,130,246,.22),rgba(30,64,175,.09));
 box-shadow:inset 0 0 20px rgba(59,130,246,.24)}
.v3d-face b{width:10px;height:10px;border-radius:50%;background:#7fb0ff;
 box-shadow:0 0 14px rgba(127,176,255,.95);animation:v3dDot 4s ease-in-out infinite}
.v3d-f1{transform:translateZ(37px)}
.v3d-f2{transform:rotateY(90deg) translateZ(37px)}
.v3d-f3{transform:rotateY(180deg) translateZ(37px)}
.v3d-f4{transform:rotateY(-90deg) translateZ(37px)}
.v3d-f5{transform:rotateX(90deg) translateZ(37px)}
.v3d-f6{transform:rotateX(-90deg) translateZ(37px)}
.v3d-f2 b{animation-delay:.66s}.v3d-f3 b{animation-delay:1.32s}
.v3d-f4 b{animation-delay:1.98s}.v3d-f5 b{animation-delay:2.64s}.v3d-f6 b{animation-delay:3.3s}
.v3d-bayang{width:82px;height:13px;margin-top:26px;border-radius:50%;
 background:radial-gradient(ellipse at center,rgba(59,130,246,.34),transparent 72%);
 filter:blur(3px);animation:v3dBayang 4s cubic-bezier(.66,.02,.34,1) infinite}
.v3d-teks{margin-top:1.55rem;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;
 letter-spacing:.14em;text-transform:uppercase;color:#a9c4ee}
.v3d-sub{margin:.45rem auto 0;max-width:300px;font-size:.76rem;line-height:1.5;color:#9aa7bd}
.v3d-waktu{margin-top:.9rem;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.4rem;font-weight:700;
 color:#e6eefc;font-variant-numeric:tabular-nums}
.v3d-waktu small{margin-left:.3rem;font-size:.68rem;font-weight:600;letter-spacing:.1em;color:#9aa7bd}
.v3d-lama{margin:.55rem auto 0;max-width:300px;font-size:.72rem;line-height:1.5;color:#fcd34d}
@keyframes v3dTumble{
 0%{transform:rotateX(-18deg) rotateY(0)}
 22%{transform:rotateX(-18deg) rotateY(90deg)}
 44%{transform:rotateX(-108deg) rotateY(90deg)}
 66%{transform:rotateX(-108deg) rotateY(180deg)}
 88%,100%{transform:rotateX(-198deg) rotateY(180deg)}}
@keyframes v3dDot{0%,55%,100%{opacity:.26;transform:scale(.82)}18%{opacity:1;transform:scale(1.18)}}
@keyframes v3dBayang{0%,100%{transform:scaleX(1);opacity:.5}44%{transform:scaleX(.72);opacity:.28}}
@media(prefers-reduced-motion:reduce){
 .v3d-cube{animation:none;transform:rotateX(-18deg) rotateY(-28deg)}
 .v3d-face b{animation:v3dRedam 1.6s ease-in-out infinite}
 .v3d-bayang{animation:none}
 @keyframes v3dRedam{0%,100%{opacity:.35}50%{opacity:1}}}