/* Palette and choreography: DESIGN.md. The same scene is used by Studio and PHP. */
.hf-northa{position:relative;width:100%;height:100%;aspect-ratio:1;color:#fff;isolation:isolate;overflow:hidden;pointer-events:none}
.hf-northa *{box-sizing:border-box}
.hf-northa .scene-content{width:100%;height:100%;padding:8%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2%;position:relative}
.hf-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:0}
.hf-glow{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,#168bff38 0%,#168bff14 36%,transparent 67%)}
.hf-glow-b{inset:12% -15%;background:radial-gradient(ellipse,transparent 34%,#168bff38 46%,transparent 63%);transform:rotate(-35deg) scaleY(.7);opacity:.65}
.hf-ring{position:absolute;inset:12%;border:1px solid #8491a345;border-radius:50%;z-index:1}
.hf-ring-outer{border-top:2px solid #168bff;border-right:1px solid #168bff77;box-shadow:0 -5px 28px -15px #168bff}
.hf-ring-tip{position:absolute;top:14%;right:14%;width:1.4%;height:1.4%;border-radius:50%;background:#fff;box-shadow:0 0 18px 3px #168bff}
.hf-ring-track{inset:18%;border:1px dashed #8491a345;opacity:.65}
.hf-orbit-plane{position:absolute;inset:5%;transform:rotateX(62deg) rotateZ(-28deg);transform-style:preserve-3d;z-index:2}
.hf-orbit-second{inset:9%;transform:rotateX(58deg) rotateZ(48deg);opacity:.5}
.hf-orbit-spin,.hf-orbit-spin-second{width:100%;height:100%;border-radius:50%;border:2px solid #168bff30;border-top-color:#168bff;border-left-color:#ffffff77;box-shadow:0 -8px 24px -16px #168bff;position:relative}
.hf-orbit-spin i,.hf-orbit-spin-second i,.hf-orbit-spin b{position:absolute;top:15%;left:14%;width:2%;height:2%;border-radius:50%;background:#fff;box-shadow:0 0 20px 8px #168bff88}
.hf-orbit-spin b{top:auto;bottom:14%;left:auto;right:14%;width:1%;height:1%;background:#168bff}
.hf-north-beam{position:absolute;top:9%;bottom:45%;left:49.8%;width:.4%;background:linear-gradient(transparent,#168bff 50%,transparent);box-shadow:0 0 24px 2px #168bff44;z-index:1}
.hf-wave{position:absolute;inset:20%;border-radius:50%;border:2px solid #168bff66;opacity:0;z-index:0}
.hf-stars{position:absolute;inset:0;z-index:1}
.hf-stars i{position:absolute;width:.5%;height:.5%;background:#fff;border-radius:50%;opacity:.65;box-shadow:0 0 12px 2px #168bff88}
.hf-stars i:nth-child(3n){width:.3%;height:.3%;opacity:.3}
.hf-core{position:relative;width:62%;z-index:3;aspect-ratio:1}
.hf-logo-float,.hf-logo{width:100%;height:100%;display:block}
.hf-core::before{content:'';position:absolute;inset:15%;border-radius:50%;background:radial-gradient(ellipse,#0b121e 35%,#0b121eaa 58%,transparent 72%);z-index:-1}
.hf-north-label{position:absolute;top:7%;left:40%;width:20%;z-index:4;text-align:center;color:#fff;font:400 18px 'Courier New',monospace;letter-spacing:5px;line-height:1.3}
@media(prefers-reduced-motion:reduce){.hf-northa{scroll-behavior:auto}}