.wheel-holder.is-cube {
  container-type: inline-size;
  --cube-dir: 1;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
[dir="rtl"] .wheel-holder.is-cube { --cube-dir: -1; }
@media (hover: hover) and (pointer: fine) {
  .wheel-holder.is-cube { cursor: grab; }
  .wheel-holder.is-cube.is-moving { cursor: grabbing; }
}

html[data-glass="on"] .wheel-holder.is-cube::before { content: none; }

.cube-stage {
  position: absolute;
  inset: 0;
  perspective: 330cqw;
}

.cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
@property --cube-rot {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
.is-cube.is-moving .cube {
  transform:
    translateZ(calc(-50cqw * (cos(var(--cube-rot)) + max(sin(var(--cube-rot)), sin(var(--cube-rot) * -1)))))
    rotateY(var(--cube-rot));
}
.cube.is-turning { transition: --cube-rot 420ms cubic-bezier(0.22, 0.8, 0.26, 1); }
.cube.no-anim, .cube.no-anim .cube-face { transition: none !important; }


.cube-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--surface-tint), var(--bg-deep);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent),
    0 12px 28px -14px color-mix(in srgb, var(--black) 70%, transparent);
}
html[data-glass="on"] .cube-face {
  background: var(--surface-tint), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.cube-face[data-role="next"],
.cube-face[data-role="prev"] { visibility: hidden; }
.is-cube.is-moving .cube-face { visibility: visible; }
.is-cube.is-moving .cube-face[data-role="front"] { transform: translateZ(50cqw); }
.is-cube.is-moving .cube-face[data-role="next"] { transform: rotateY(calc(90deg * var(--cube-dir))) translateZ(50cqw); }
.is-cube.is-moving .cube-face[data-role="prev"] { transform: rotateY(calc(-90deg * var(--cube-dir))) translateZ(50cqw); }

.cube-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-void);
  opacity: var(--shade, 0);
  pointer-events: none;
}

.cube-face.is-loading::before {
  content: '';
  width: 86%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.fit-screen:has(.cube-block) { --cube-nav-h: 40px; }

.cube-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
}

.cube-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 30px;
  margin-top: 10px;
  flex: 0 0 auto;
}

.cube-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--text-mid);
  background: var(--glass);
  border: 1px solid var(--line);
  padding: 0;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .cube-step:hover { color: var(--text-hi); border-color: var(--line-strong); } }
.cube-step:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }
.cube-step.is-next svg { transform: scaleX(-1); }
[dir="rtl"] .cube-step svg { transform: scaleX(-1); }
[dir="rtl"] .cube-step.is-next svg { transform: none; }

.cube-id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.cube-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.cube-count {
  font-size: 11px;
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@media (max-height: 700px) {
  .fit-screen:has(.cube-block) { --cube-nav-h: 32px; }
  .cube-nav { height: 26px; gap: 8px; margin-top: 6px; }
  .cube-step { width: 26px; height: 26px; }
  .cube-name { font-size: 13px; }
}

html[data-glass="on"] .cube-step {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight);
}


.fit-screen:has(.cube-block) {
  --cube-nav-h: 0px;
  --cube-gap-min: 12px;
  --below-wheel: calc(var(--big-cell-h) + var(--cards-after) + 3 * var(--cube-gap-min));
}
.fit-screen:has(.cube-block) .big-three { margin-top: 0; }

.cube-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cube-nav .cube-step { display: none; }

#mychart-wheel-wrap .cube-block { margin-bottom: var(--pad); }

.cube-corners {
  --cube-step: 30px;
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}
.cube-corners .cube-step {
  position: absolute;
  bottom: calc(8cqw - var(--cube-step) / 2);
  width: var(--cube-step);
  height: var(--cube-step);
  pointer-events: auto;
}
.cube-corners .cube-step[data-step="-1"] { inset-inline-start: calc(8cqw - var(--cube-step) / 2); }
.cube-corners .cube-step.is-next { inset-inline-end: calc(8cqw - var(--cube-step) / 2); }
.cube-corners .cube-id {
  position: absolute;
  top: 2.4cqw;
  inset-inline: 4cqw;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 16px;
}
.cube-corners .cube-name { font-size: 12px; max-width: 18cqw; }
@media (max-height: 700px) {
  .cube-corners { --cube-step: 26px; }
  .cube-corners .cube-name { font-size: 12px; }
}
.cube-corners .cube-id .cube-name,
.cube-corners .cube-id .cube-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-low);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .cube.is-turning, .cube-step { transition: none; }

}

.cube-corners .cube-zoom {
  position: absolute;
  top: calc(2.4cqw + 17px + clamp(1px, (100cqw - 200px) / 5, 4px));
  inset-inline-start: calc(4cqw + clamp(0px, (100cqw - 208px) / 10, 2px));
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-mid);
  background: var(--glass);
  border: 1px solid var(--line);
  pointer-events: auto;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cube-corners .cube-zoom::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .cube-corners .cube-zoom:hover { color: var(--text-hi); border-color: var(--line-strong); } }
.cube-corners .cube-zoom:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }
.cube-corners .cube-zoom[aria-pressed="true"] {
  color: var(--text-hi);
  background: color-mix(in srgb, var(--purple-bright) 28%, transparent);
  border-color: var(--purple-bright);
}
html[data-glass="on"] .cube-corners .cube-zoom:not([aria-pressed="true"]) {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight);
}

.cube-corners .cube-zstep { display: none; }
.cube-corners .cube-zstep[data-zoom="-1"] { inset-inline-start: calc(8cqw - var(--cube-step) / 2); }
.cube-corners .cube-zstep[data-zoom="1"] { inset-inline-end: calc(8cqw - var(--cube-step) / 2); }
.is-cube.is-zoomed .cube-face[data-role="front"] .cube-zstep { display: grid; }
.is-cube.is-zoomed .cube-face[data-role="front"] .cube-step:not(.cube-zstep) { display: none; }
.cube-corners .cube-zstep:disabled { opacity: 0.4; cursor: default; }
.cube-corners .cube-zstep svg, [dir="rtl"] .cube-corners .cube-zstep svg { transform: none; }

.wheel-holder.is-cube.is-zoomed { touch-action: none; }
@media (hover: hover) and (pointer: fine) {
  .wheel-holder.is-cube.is-zoomed { cursor: move; }
}
.is-cube.is-zoomed .cube-face[data-role="front"] { overflow: hidden; }
.is-cube.is-zoomed .cube-face[data-role="front"] > :not(.cube-corners) {
  transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom, 1));
  transform-origin: 50% 50%;
}
.is-cube.is-zoom-animating .cube-face[data-role="front"] > :not(.cube-corners) { transition: transform 180ms var(--ease); }
.is-cube.is-zoom-gesture .cube-face[data-role="front"] > :not(.cube-corners) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .is-cube.is-zoom-animating .cube-face[data-role="front"] > :not(.cube-corners) { transition: none; }
}