:root {
  color: #e7e7e7;
  color-scheme: normal;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: transparent;
}

html,
body,
[data-viewer-root] {
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

[data-viewer-root] {
  position: relative;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: default;
}

[data-viewer-chrome] {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

[data-viewer-chrome] button {
  pointer-events: auto;
}

/* The embedding site owns attribution, while playback remains an explicit,
   trusted gesture inside the viewer frame. */
[data-viewer-embedded="true"] [data-viewer-attribution] {
  display: none !important;
}

[data-viewer-embedded="true"] [data-viewer-loading] {
  display: none !important;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: #0c0f14;
  background: #52ece1;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

button[hidden] {
  display: none;
}

[data-viewer-loading],
[data-viewer-error] {
  position: absolute;
  inset: auto 16px 64px;
  z-index: 2;
}

[data-viewer-attribution],
[data-viewer-help] {
  position: absolute;
  right: 16px;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  color: rgba(231, 231, 231, 0.7);
}

[data-viewer-help] {
  bottom: 16px;
}

[data-viewer-attribution] {
  bottom: 36px;
}