.hsci-wheel-block {
  --hsci-ring-idle: color-mix(in srgb, var(--hsci-navy) 16%, #ffffff);
  --hsci-ink: var(--hsci-navy);
  --hsci-muted: color-mix(in srgb, var(--hsci-navy) 55%, #ffffff);
  --hsci-surface: #ffffff;
  --wheel-size: min(300px, 42vw);
  --point-size: calc(var(--wheel-size) * 0.26);
  --label-offset: calc(var(--point-size) / 2 + 8px);
  --label-width: 80px;

  font-family: 'Neris', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 calc(var(--point-size) / 2 + var(--label-offset) + var(--label-width));
  box-sizing: border-box;
}
.hsci-wheel-block *, .hsci-wheel-block *::before, .hsci-wheel-block *::after {
  box-sizing: border-box;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .hsci-wheel-block {
    --hsci-ring-idle: #dadde8;
    --hsci-muted: #6b7280;
  }
}

.hsci-wheel {
  --point-radius: calc(var(--wheel-size) / 2);
  position: relative;
  width: var(--wheel-size);
  aspect-ratio: 1 / 1;
  margin: calc(var(--point-size) / 2 + 40px) auto;
}
.hsci-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(var(--hsci-purple), var(--hsci-blue), var(--hsci-navy), var(--hsci-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
}

.hsci-points-ring {
  position: absolute;
  inset: 0;
  transform: rotate(var(--hsci-rotation, 0deg));
  transition: transform var(--hsci-rotation-duration, .5s) cubic-bezier(.22, .9, .32, 1);
}

.hsci-hub {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--hsci-surface);
  box-shadow: 0 6px 24px rgba(11, 27, 58, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hsci-hub-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hsci-hub-empty {
  font-size: 14px;
  color: var(--hsci-muted);
  text-align: center;
  padding: 0 16px;
}

.hsci-point-wrap {
  --angle: calc(360deg / var(--n) * var(--i) - 90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(cos(var(--angle)) * var(--point-radius)), calc(sin(var(--angle)) * var(--point-radius)));
}

.hsci-point-inner {
  transform: rotate(calc(-1 * var(--hsci-rotation, 0deg)));
  transition: transform var(--hsci-rotation-duration, .5s) cubic-bezier(.22, .9, .32, 1);
}

.hsci-point-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: var(--label-width);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hsci-ink);
  pointer-events: none;
  overflow-wrap: break-word;
  --label-angle: calc(var(--angle) + var(--hsci-rotation, 0deg));
  transition: transform var(--hsci-rotation-duration, .5s) cubic-bezier(.22, .9, .32, 1);
  transform:
    translate(
      calc(-50% + 50% * cos(var(--label-angle)) + cos(var(--label-angle)) * var(--label-offset)),
      calc(-50% + 50% * sin(var(--label-angle)) + sin(var(--label-angle)) * var(--label-offset))
    );
}

.hsci-point {
  width: var(--point-size);
  height: var(--point-size);
  border-radius: 50%;
  border: none;
  overflow: hidden;
  background: var(--hsci-ring-idle);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(11, 27, 58, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hsci-point img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hsci-point:hover {
  filter: brightness(0.85);
  transform: scale(1.08);
}
.hsci-point:focus-visible { outline: 3px solid var(--hsci-purple); outline-offset: 3px; }
.hsci-point[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--hsci-purple), 0 6px 16px rgba(11, 27, 58, .18);
  transform: scale(1.08);
}

@media (max-width: 600px) {
  .hsci-wheel-block {
    --wheel-size: min(200px, 46vw);
    --label-offset: calc(var(--point-size) / 2 + 6px);
    --label-width: 64px;
    padding: 0 calc(var(--point-size) / 2 + var(--label-offset) + var(--label-width));
  }
  .hsci-point-label { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsci-point,
  .hsci-points-ring,
  .hsci-point-inner,
  .hsci-point-label { transition: none; }
}