.worldview-visual--figure {
  --figure-stage-bg: color-mix(in oklch, var(--surface) 82%, var(--bg));
}

.worldview-figure-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: var(--figure-stage-bg);
}

.worldview-figure-stage canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}

.worldview-figure-stage canvas:active { cursor: grabbing; }

.worldview-figure-stage canvas:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -5px;
}

.worldview-figure-hint,
.worldview-figure-chip {
  position: absolute;
  z-index: 2;
  top: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.worldview-figure-hint { right: 12px; transition: opacity 180ms ease; }
.worldview-figure-chip { left: 12px; color: var(--fg); }
.worldview-figure-chip sub { font-size: .72em; }
.worldview-figure-stage.is-touched .worldview-figure-hint { opacity: 0; }

@media (max-width: 980px) {
  .worldview-visual--figure { width: min(660px, 100%); }
  .worldview-figure-stage { height: min(36svh, 340px); aspect-ratio: auto; }
}

@media (max-width: 600px) {
  html,
  body { min-width: 0; }
  .worldview-figure-stage { height: min(33svh, 258px); }
  .worldview-figure-hint,
  .worldview-figure-chip { top: 8px; padding: 4px 6px; font-size: 10px; }
  .worldview-figure-hint { right: 8px; }
  .worldview-figure-chip { left: 8px; }
  .worldview-visual--figure figcaption span { max-width: 28ch; }
  .worldview-controls {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meta" "tabs" "progress";
    row-gap: 4px;
  }
  .playback-meta { grid-area: meta; justify-content: space-between; }
  .scene-tabs { grid-area: tabs; justify-content: center; }
  .progress-track { grid-area: progress; }
  .scene-tab { width: 44px; min-width: 44px; }
}

@media (max-width: 390px) {
  .worldview-figure-stage { height: min(31svh, 238px); }
  .worldview-visual--figure figcaption span { max-width: 24ch; }
}

@media (max-height: 760px) and (max-width: 980px) {
  .worldview-figure-stage { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .worldview-figure-hint { display: none; }
}