@import url("./common.css");

.kotaverse-block {
  position: relative;
}

.kotaverse-sticky-inner {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  padding-bottom: 0.25rem;
}

.kotaverse-filler {
  height: 200vh;
  pointer-events: none;
}

.kotaverse-root {
  position: relative;
  width: 100%;
  height: min(65vh, 480px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: radial-gradient(ellipse 120% 80% at 50% 100%, #1a0a2e 0%, #050508 55%);
}

.kotaverse-root canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.kotaverse__caption {
  padding: 1rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 58ch;
}

.kotaverse__scroll-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.demo-hint {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}