.cloudie-wheel-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  overflow: visible;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

body.cloudie-cursor-wheel-portal #cloudieRoot {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 90ms ease-out,
    transform 120ms cubic-bezier(.2, .86, .28, 1),
    visibility 0s linear 120ms;
}

body.cloudie-cursor-wheel-portal.cloudie-wheel-expanded #cloudieRoot {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

body.cloudie-cursor-wheel-portal .cloudie-wheel-stage {
  pointer-events: none;
}

body.cloudie-cursor-wheel-portal.cloudie-wheel-expanded .cloudie-wheel-layer {
  pointer-events: auto;
}

body.cloudie-wheel-mode.cloudie-wheel-preview.cloudie-wheel-expanded .cloudie-wheel-layer {
  transform: scale(var(--cloudie-wheel-preview-scale, 1));
}

.cloudie-wheel-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  transform: scale(.91);
  pointer-events: none;
  transition: opacity 90ms ease-out, transform 115ms cubic-bezier(.2, .86, .28, 1);
}

body.cloudie-wheel-mode.cloudie-wheel-expanded .cloudie-wheel-layer {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.cloudie-wheel-sector-svg {
  position: absolute;
  inset: 20px;
  width: 600px;
  height: 600px;
  overflow: visible;
  filter: drop-shadow(0 9px 13px rgba(74, 55, 126, .12));
}

.cloudie-wheel-sector {
  fill: rgba(252, 251, 255, .91);
  stroke: rgba(218, 211, 239, .9);
  stroke-width: .8px;
  vector-effect: non-scaling-stroke;
  transition: fill 90ms ease, stroke 90ms ease;
}

.cloudie-wheel-sector.active {
  fill: rgba(139, 92, 246, .95);
  stroke: rgba(111, 76, 211, .92);
}

.cloudie-wheel-tools { position: absolute; inset: 0; }

.cloudie-wheel-tool {
  --angle: 0deg;
  --radius: 225px;
  appearance: none;
  position: absolute;
  left: 278px;
  top: 284px;
  width: 84px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 3px;
  border: 0;
  color: #51485f;
  background: transparent;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));
  transform-origin: 42px 36px;
  cursor: pointer;
}

.cloudie-wheel-tool:hover,
.cloudie-wheel-tool:focus-visible,
.cloudie-wheel-tool.active { color: #fff; outline: none; }

.cloudie-wheel-icon {
  width: 25px;
  height: 25px;
  display: block;
  overflow: visible;
  color: currentColor;
}

.cloudie-wheel-tool:hover .cloudie-wheel-icon,
.cloudie-wheel-tool:focus-visible .cloudie-wheel-icon,
.cloudie-wheel-tool.active .cloudie-wheel-icon { color: currentColor; }

.cloudie-wheel-tool span {
  max-width: 82px;
  overflow: hidden;
  font: 720 13px/17px Inter, "Microsoft YaHei UI", system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.cloudie-wheel-mode #cloudieRoot {
  z-index: 4;
  pointer-events: none;
}
body.cloudie-wheel-mode #cloudieRoot.cloudie-root--command-feedback { z-index: 7; }
body.cloudie-wheel-mode #cloudieRoot .cloudie-pet__character {
  pointer-events: auto;
}
body.cloudie-wheel-mode #cloudieRoot .cloudie-pet__character.native-hover {
  filter: saturate(1.05) brightness(1.015);
}
body.cloudie-wheel-mode.cloudie-wheel-expanded #cloudieRoot .cloudie-pet__speech,
body.cloudie-wheel-mode.cloudie-wheel-expanded #cloudieRoot .cloudie-pet__candidates,
body.cloudie-wheel-mode.cloudie-wheel-expanded #cloudieRoot .cloudie-pet__idle-game,
body.cloudie-wheel-mode.cloudie-wheel-expanded #cloudieRoot .cloudie-pet__ambient { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cloudie-wheel-layer,
  .cloudie-wheel-sector { transition: none; }
}