.hks-vue-mount {
  --hks-vue-ink: #25324a;
  --hks-vue-aqua: #92d9e9;
  --hks-vue-lavender: #cab8f5;
  --hks-vue-coral: #ff8fa3;
  --hks-vue-shadow: rgba(70, 91, 126, .2);
  width: min(440px, 100%);
  min-width: 0;
  color: var(--hks-vue-ink);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}

.hks-vue-orbit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 900px;
}

.hks-vue-orbit-glow {
  position: absolute;
  z-index: -1;
  inset: 11%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 217, 233, .3), rgba(202, 184, 245, .13) 52%, transparent 73%);
  filter: blur(20px);
  animation: hks-vue-breathe 5.8s ease-in-out infinite;
}

.hks-vue-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--hks-vue-tilt-y, 0deg)) rotateY(var(--hks-vue-tilt-x, 0deg));
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.hks-vue-ring {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.hks-vue-ring--outer {
  inset: 2%;
  border: 1px solid rgba(146, 217, 233, .78);
  box-shadow: 0 0 28px rgba(146, 217, 233, .12);
  animation: hks-vue-spin 26s linear infinite;
}

.hks-vue-ring--outer::before,
.hks-vue-ring--outer::after,
.hks-vue-ring--inner::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 15px var(--hks-vue-shadow);
}

.hks-vue-ring--outer::before { top: 10%; right: 13%; width: 8px; height: 8px; background: var(--hks-vue-coral); }
.hks-vue-ring--outer::after { bottom: 17%; left: 4%; width: 6px; height: 6px; background: var(--hks-vue-aqua); }

.hks-vue-ring--inner {
  inset: 15%;
  border: 1px dashed rgba(202, 184, 245, .75);
  animation: hks-vue-spin-reverse 38s linear infinite;
}

.hks-vue-ring--inner::before { top: -4px; left: 38%; width: 7px; height: 7px; background: var(--hks-vue-lavender); }

.hks-vue-stone {
  position: absolute;
  z-index: 1;
  inset: 22%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 47% 53% 49% 51% / 45% 47% 53% 55%;
  background:
    radial-gradient(circle at 35% 25%, #fff 0 7%, rgba(255,255,255,.38) 7.5% 12%, transparent 23%),
    radial-gradient(circle at 68% 70%, rgba(202,184,245,.68), transparent 47%),
    linear-gradient(145deg, rgba(146,217,233,.92), rgba(202,184,245,.84));
  box-shadow:
    inset -22px -28px 50px rgba(88, 102, 154, .13),
    inset 18px 12px 36px rgba(255, 255, 255, .23),
    0 28px 56px rgba(82, 104, 151, .2);
  animation: hks-vue-float 6.4s ease-in-out infinite;
  transform: translateZ(20px) rotate(-7deg);
}

.hks-vue-stone-shine {
  position: absolute;
  top: 16%;
  left: 21%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 20px rgba(255,255,255,.62);
}

.hks-vue-stone-sheen {
  position: absolute;
  inset: -30% 56% -30% -20%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: rotate(17deg) translateX(-35%);
  animation: hks-vue-sheen 8s ease-in-out infinite;
}

.hks-vue-spark,
.hks-vue-moon {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--hks-vue-coral);
  background: rgba(255,255,255,.91);
  box-shadow: 0 12px 30px rgba(64,86,110,.13);
  backdrop-filter: blur(9px);
  transform: translateZ(34px);
}

.hks-vue-spark { width: 48px; height: 48px; border-radius: 17px; animation: hks-vue-twinkle 4.7s ease-in-out infinite; }
.hks-vue-spark--a { top: 8%; right: 14%; transform: translateZ(34px) rotate(8deg); }
.hks-vue-spark--b { top: 33%; left: 3%; width: 29px; height: 29px; border-radius: 11px; color: #72b9c8; font-size: .72rem; animation-delay: -2.1s; }
.hks-vue-spark--c { right: 2%; bottom: 36%; width: 23px; height: 23px; border-radius: 9px; color: #9f8bd8; font-size: 1rem; animation-delay: -3.4s; }

.hks-vue-moon {
  bottom: 10%;
  left: 7%;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #70b6c8;
  animation: hks-vue-moon-drift 7.2s ease-in-out infinite;
}

.hks-vue-color-card {
  position: absolute;
  z-index: 3;
  right: -2%;
  bottom: 7%;
  width: 180px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: rgba(255,255,255,.89);
  box-shadow: 0 18px 42px rgba(64,86,110,.15);
  backdrop-filter: blur(14px);
  transform: translateZ(46px) rotate(3deg);
  animation: hks-vue-card-float 7.4s ease-in-out infinite;
}

.hks-vue-color-card small { display: block; color: #667085; font-size: .78rem; font-weight: 700; }
.hks-vue-color-card strong { display: block; margin-top: 4px; color: var(--hks-vue-ink); font-size: 1rem; line-height: 1.45; }
.hks-vue-color-dot { width: 28px; height: 28px; float: right; border: 4px solid #fff; border-radius: 50%; background: var(--hks-vue-coral); box-shadow: 0 4px 12px rgba(233,101,128,.3); }

@keyframes hks-vue-spin { to { transform: rotate(360deg); } }
@keyframes hks-vue-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes hks-vue-breathe { 0%, 100% { opacity: .68; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hks-vue-float { 0%, 100% { transform: translate3d(0, 0, 20px) rotate(-7deg); } 50% { transform: translate3d(0, -11px, 27px) rotate(-4deg); } }
@keyframes hks-vue-sheen { 0%, 28% { transform: rotate(17deg) translateX(-80%); opacity: 0; } 45% { opacity: 1; } 66%, 100% { transform: rotate(17deg) translateX(230%); opacity: 0; } }
@keyframes hks-vue-twinkle { 0%, 100% { opacity: .74; scale: .94; } 50% { opacity: 1; scale: 1.05; } }
@keyframes hks-vue-moon-drift { 0%, 100% { transform: translate3d(0, 0, 34px) rotate(-8deg); } 50% { transform: translate3d(4px, -8px, 38px) rotate(-3deg); } }
@keyframes hks-vue-card-float { 0%, 100% { transform: translate3d(0, 0, 46px) rotate(3deg); } 50% { transform: translate3d(0, -7px, 49px) rotate(1.5deg); } }

@media (max-width: 520px) {
  .hks-vue-mount { width: min(370px, 100%); }
  .hks-vue-color-card { right: 0; width: 160px; padding: 14px; }
  .hks-vue-spark { width: 42px; height: 42px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hks-vue-orbit,
  .hks-vue-orbit-glow,
  .hks-vue-ring,
  .hks-vue-stone,
  .hks-vue-stone-sheen,
  .hks-vue-spark,
  .hks-vue-moon,
  .hks-vue-color-card {
    animation: none !important;
    transition: none !important;
  }
}