[data-kuut-content] {
  --kuut-content-border: #526980;
  --kuut-content-surface: #121a24;
  --kuut-content-muted: #b8c7d6;
}

.kuut-public-image,
.kuut-public-media,
.kuut-public-model,
.kuut-public-section-image {
  margin: 1rem 0;
}

.kuut-public-image img,
.kuut-public-section-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.kuut-public-image figcaption,
.kuut-public-media figcaption,
.kuut-public-model__caption {
  margin-top: 0.45rem;
  color: var(--kuut-content-muted);
}

.kuut-public-media video,
.kuut-public-media audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

.kuut-public-media video {
  background: #070b10;
}

.kuut-public-image--failed,
.kuut-public-media--failed,
.kuut-public-section-image--failed,
.kuut-public-model--fallback,
.kuut-public-hydration-error {
  padding: 0.8rem;
  border: 1px dashed var(--kuut-content-border);
  border-radius: 0.45rem;
}

.kuut-public-section {
  margin-block: 1.5rem;
}

.kuut-public-section-image {
  overflow: hidden;
}

.kuut-public-page-index {
  margin-block: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--kuut-content-border);
  border-radius: 0.55rem;
}

.kuut-public-page-index__title {
  margin: 0;
  font-weight: 700;
}

.kuut-public-page-index ol {
  margin: 0.7rem 0 0;
  padding-inline-start: 1.4rem;
}

.kuut-public-page-index a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.kuut-model-viewer__viewport {
  position: relative;
  width: 100%;
  height: clamp(16rem, 48vw, 28rem);
  overflow: hidden;
  border-radius: 0.45rem;
  background: var(--kuut-content-surface);
}

.kuut-model-viewer__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.kuut-model-viewer__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 160ms ease;
}

.kuut-model-viewer__poster--loaded {
  opacity: 0;
  pointer-events: none;
}

.kuut-model-viewer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.kuut-model-viewer__actions button,
.kuut-model-viewer__canvas {
  outline-offset: 2px;
}

.kuut-model-viewer__actions button:focus-visible,
.kuut-model-viewer__canvas:focus-visible {
  outline: 3px solid currentColor;
}

.kuut-model-viewer__status,
.kuut-model-viewer__help {
  margin: 0.55rem 0 0;
  color: var(--kuut-content-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 36rem) {
  .kuut-model-viewer__viewport {
    height: 16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kuut-model-viewer__poster {
    transition: none;
  }
}
