.showcase { --sc-w: 960; --sc-h: 600; }
.sc-stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--sc-w) / var(--sc-h);
  overflow: hidden;
}
.sc-world { position: absolute; inset: 0; transform-origin: 0 0; }
.sc-layer {
  position: absolute; left: 0; top: 0;
  width: calc(var(--sc-w) * 1px); height: calc(var(--sc-h) * 1px);
  transform-origin: 0 0;
}
.sc-at {
  position: absolute;
  left: calc(var(--x) / var(--sc-w) * 100%);
  top: calc(var(--y) / var(--sc-h) * 100%);
  width: calc(var(--w) / var(--sc-w) * 100%);
}
.showcase [hidden] { display: none !important; }
.cp-play { position: relative; margin: 0; --sc-h: 400; }
.cp-play .sc-stage { overflow: visible; }
.cp-scene { position: absolute; inset: 0; }
.cp-play .stage-at:not(.sel) > .sel-hn { display: none; }
.cp-play .k-star { transform-origin: 0 100%; }
.cp-ui { pointer-events: none; z-index: 6; }
.cp-ui .cp-keyhud {
  position: absolute; left: 480px; bottom: 78px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px;
  background: rgba(20, 20, 22, 0.88); border: 1px solid var(--app-line);
  border-radius: 10px; box-shadow: var(--app-shadow);
  font: 400 12.5px/1.2 var(--sans); color: var(--app-ink-dim);
  white-space: nowrap;
}
.cp-keyhud kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  font: 500 11px/1 var(--sans); color: var(--app-ink-dim);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--app-line); border-radius: 6px;
}
.cp-pause { min-width: 48px; justify-content: center; }
.hero-cap .cp-pause::after { content: none; }
.cp-pause[hidden] { display: none; }
.cp-lead .hero-cap { justify-content: flex-start; }
.cp-lead .hero-cap > span:first-child { margin-right: auto; }
.cp-lead .hero-cap { margin-top: calc(4.1666% + 22px); }
.cp-play .dtray, .fs-art .dtray { padding: min(8px, 0.74cqw) min(14px, 1.3cqw); }
.cp-play .dtray-label, .fs-art .dtray-label {
  font-size: max(6px, min(9.5px, 0.88cqw));
  white-space: nowrap; flex-shrink: 0;
}
.cp-play .dtray-stars, .fs-art .dtray-stars {
  left: min(5px, 0.46cqw); bottom: min(4px, 0.37cqw);
  font-size: min(9px, 0.84cqw); letter-spacing: min(1.5px, 0.14cqw);
}
@container (max-width: 820px) {
  .cp-play .dtray-stars, .fs-art .dtray-stars { font-size: 0; letter-spacing: 0; left: 2px; bottom: 2px; }
  .cp-play .dtray-stars::after, .fs-art .dtray-stars::after {
    content: attr(data-n) "\2605";
    font-size: 7px; letter-spacing: 0.5px;
  }
}