/* Scene styling; common frame and typography are owned by hero-layout.css. */
.scene-hero {
  position: relative;
}
.scene-copy {
  position: relative;
  z-index: 1;
  padding-right: 0px;
  padding-bottom: 35px;
  padding-left: 0px;
}
.scene-eyebrow {
  color: rgb(121, 86, 187);
  font-weight: 600;
}
.scene-copy h1 span {
  color: rgb(123, 56, 255);
}
.scene-copy p {
  color: var(--muted);
}
.scene-copy > a {
  font-weight: 600;
  gap: 30px;
}
.scene-art {
  height: 450px;
  position: relative;
  background: radial-gradient(rgba(233, 221, 255, 0.533), transparent 65%) transparent;
}
.scene-art canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.scene-controls {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
  padding: 5px;
  border-radius: 30px;
  gap: 6px;
  background: none rgba(255, 255, 255, 0.72);
  border: 1px solid rgb(222, 213, 238);
}
.scene-controls button {
  color: rgb(132, 117, 145);
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-variant-caps: inherit;
  font-variant-numeric: inherit;
  font-variant-east-asian: inherit;
  font-variant-alternates: inherit;
  font-variant-position: inherit;
  font-variant-emoji: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 20px;
  background: none transparent;
  border: 0;
}
.scene-controls button[aria-pressed="true"] {
  color: white;
  background: none rgb(120, 64, 237);
}
.scene-mark {
  position: absolute;
  right: 20px;
  top: 35px;
  font-style: normal;
  font-variant-ligatures: normal;
  font-feature-settings: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: normal;
  font-family: monospace;
  letter-spacing: 0.12em;
  color: rgb(165, 149, 187);
}
.scene-pause {
  position: absolute;
  right: 20px;
  bottom: 30px;
  color: rgb(124, 111, 144);
  font-size: 11px;
  cursor: pointer;
  background: none transparent;
  border: 0;
}

@media (max-width: 900px) {
  .scene-art {
    background: radial-gradient(rgba(233, 221, 255, 0.4), transparent 68%) transparent;
  }
  .scene-mark {
    top: 5px;
    font-size: 8px;
    right: 6px;
  }
  .scene-pause {
    bottom: 8px;
    right: 8px;
    min-height: 40px;
  }
  .scene-controls {
    bottom: 9px;
    left: 38%;
    padding: 3px;
    gap: 0px;
  }
  .scene-controls button {
    min-height: 38px;
    padding: 10px 14px;
  }
}