:root{ --h:210; --size:22px; --ring:44px; --glow:28px; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:#060810;overflow:hidden;cursor:none;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",Arial;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.back-link{position:fixed;left:12px;top:12px;text-decoration:none;z-index:30}
.aurora{position:fixed;inset:-20vmax;filter:blur(18px) saturate(1.15);z-index:0}
.aurora i {
  position: absolute; inset: 0; opacity: .48; mix-blend-mode: screen; animation: swirl 42s linear infinite;
  background:
    conic-gradient(from 0deg at 50% 50%,
      hsl(calc(var(--h) +   0)  95% 60% / .08),
      hsl(calc(var(--h) +  30)  95% 62% / .10),
      hsl(calc(var(--h) +  70)  95% 64% / .12),
      hsl(calc(var(--h) + 120)  95% 66% / .12),
      hsl(calc(var(--h) + 180)  95% 64% / .10),
      hsl(calc(var(--h) + 240)  95% 62% / .08),
      hsl(calc(var(--h) + 300)  95% 60% / .08),
      transparent 72%),
    radial-gradient(120% 120% at 70% 30%, hsl(calc(var(--h)+210) 90% 55% / .08), transparent 60%);
}
.aurora i:nth-child(1){transform:rotate(0deg) scale(1.3);animation-duration:56s}
.aurora i:nth-child(2){transform:rotate(90deg) scale(1.2);animation-duration:48s;opacity:.55}
.aurora i:nth-child(3){transform:rotate(180deg) scale(1.4);animation-duration:60s;opacity:.35}
.aurora i:nth-child(4){transform:rotate(270deg) scale(1.1);animation-duration:52s;opacity:.5}
@keyframes swirl{0%{filter:hue-rotate(0deg);transform:rotate(0turn) scale(1.2)}50%{filter:hue-rotate(60deg);transform:rotate(.5turn) scale(1.25)}100%{filter:hue-rotate(120deg);transform:rotate(1turn) scale(1.2)}}
#fx{position:fixed;inset:0;z-index:5}
.comet{position:fixed;left:50vw;top:50vh;transform:translate(-50%,-50%);pointer-events:none;z-index:10}
.core{width:var(--size);height:var(--size);border-radius:50%;position:relative;
background:
  radial-gradient(circle at 50% 50%, #fff 0 22%, hsl(var(--h) 95% 65%) 36%, transparent 60%),
  conic-gradient(from 0deg,
    hsl(var(--h)           95% 60% / .40),
    hsl(calc(var(--h)+45)  95% 60% / .40),
    hsl(calc(var(--h)+90)  95% 60% / .40),
    hsl(calc(var(--h)+135) 95% 60% / .40),
    hsl(calc(var(--h)+180) 95% 60% / .40),
    hsl(calc(var(--h)+225) 95% 60% / .40),
    hsl(calc(var(--h)+270) 95% 60% / .40),
    hsl(calc(var(--h)+315) 95% 60% / .40),
    hsl(calc(var(--h)+360) 95% 60% / .40));
}
.core::before,.core::after{content:"";position:absolute;inset:-40% -40%;border-radius:50%;background:radial-gradient(60% 60% at 35% 30%,#fff6,transparent 60%);mix-blend-mode:screen;filter:blur(10px)}
.core::after{inset:-15% -15%;background:radial-gradient(40% 40% at 70% 70%,#fff4,transparent 70%);filter:blur(6px)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.ring{position:absolute;left:50%;top:50%;width:var(--ring);height:var(--ring);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 2px hsl(calc(var(--h)+200)90% 60%/.3),inset 0 0 0 6px hsl(calc(var(--h)+40)90% 60%/.18),inset 0 0 26px 10px hsl(calc(var(--h)+0)90% 60%/.12);filter:blur(.2px);animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7}}
.hud{position:fixed;right:12px;bottom:10px;z-index:20;color:#cbd3ffcc;font-size:12px;letter-spacing:.2px;user-select:none}
.hud strong{color:#fff}
@media (prefers-reduced-motion:reduce){.aurora i{animation-duration:120s}.core,.ring{animation:none}}