.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.orbit-demo {
  min-height: 450px;
  background: radial-gradient(
    ellipse at center,
    #171420 0%,
    #0b0c13 53%,
    #08090d 100%
  );
  isolation: isolate;
  container-type: inline-size;
}
.orbit-demo:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(1px 1px at 7% 24%, #c2bbdc 80%, transparent),
    radial-gradient(1px 1px at 26% 15%, #a0b5d0 80%, transparent),
    radial-gradient(1px 1px at 80% 31%, #d3c7ef 80%, transparent),
    radial-gradient(1px 1px at 65% 81%, #a3afce 80%, transparent),
    radial-gradient(1px 1px at 18% 75%, #d3c7ef 80%, transparent),
    radial-gradient(1px 1px at 91% 70%, #a0b5d0 80%, transparent),
    radial-gradient(1px 1px at 50% 8%, #a0b5d0 80%, transparent);
}
.demo-top {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 20;
}
.demo-eyebrow {
  font:
    7px "DM Sans",
    sans-serif;
  letter-spacing: 1.3px;
  color: #746f85;
}
.demo-tabs,
.demo-scene-label {
  position: absolute;
  top: 49px;
  left: 20px;
  display: flex;
  gap: 6px;
  z-index: 20;
}
.demo-tabs button {
  border: 1px solid #ffffff0d;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 8px;
  background: transparent;
  color: #726d82;
  transition:
    color 0.3s,
    background 0.3s,
    border-color 0.3s;
}
.demo-tabs button[aria-pressed="true"] {
  background: #9e8ed91a;
  border-color: #ad98df33;
  color: #c6b8e5;
}
.demo-scene-label {
  font-size: 8px;
  letter-spacing: 1px;
  color: #a495bc;
  top: 55px;
}
.demo-stage {
  position: absolute;
  inset: 85px 12px 73px;
}
.demo-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 53%;
  max-width: 270px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
.demo-hole-glow {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 35%,
    #a994eb14 55%,
    transparent 72%
  );
  opacity: 0.3;
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.orbit-demo[data-phase="pulling"] .demo-hole-glow {
  opacity: 1;
  transform: scale(1.5);
}
.demo-center-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 13px));
  z-index: 4;
  font:
    7px "Space Grotesk",
    sans-serif;
  letter-spacing: 2.5px;
  color: #b6a7d1;
  pointer-events: none;
}
.demo-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid #b49adb16;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  height: 58%;
  pointer-events: none;
  z-index: 0;
}
.orbit-inner {
  width: 49%;
  height: 41%;
  border-style: dashed;
  opacity: 0.7;
}
.orbit-outer:after {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px solid #b49adb07;
  border-radius: 50%;
}
.orbit-member {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  will-change: transform, opacity;
}
.discord-avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar-color);
  border: 2px solid #d6d4ff26;
  box-shadow: 0 4px 24px #0006;
  transition:
    box-shadow 0.4s,
    border-color 0.4s;
}
.discord-avatar > img {
  width: 83%;
  height: 83%;
  object-fit: contain;
  mix-blend-mode: screen;
  border-radius: 50%;
  filter: none !important;
  animation: none !important;
}
.avatar-state {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  background: #8cc3a3;
  border: 2px solid #101019;
  border-radius: 50%;
  transition: background 0.3s;
}
.discord-avatar.is-offender {
  border-color: #e1a19a;
  box-shadow:
    0 0 0 4px #c8817e1a,
    0 0 22px #d681771f;
}
.is-offender .avatar-state {
  background: #e1a19a;
}
.discord-avatar.is-verified {
  border-color: #a4dbbb;
  box-shadow:
    0 0 0 4px #8acba321,
    0 0 25px #86d2a329;
}
.orbit-member-name {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #9a92af;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.orbit-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(calc(-50% + var(--bubble-shift, 0px)));
  border: 1px solid #d68d8a44;
  background: #201820f5;
  box-shadow: 0 8px 30px #0005;
  border-radius: 9px 9px 9px 2px;
  padding: 10px 12px;
  pointer-events: none;
  animation: demo-bubble-in 0.3s ease-out;
}
.orbit-bubble[hidden] {
  display: none;
}
.bubble-name {
  display: block;
  font-size: 8px;
  font-weight: 600;
  color: #df9f9e;
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}
.bubble-message {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #dfd9e8;
  overflow-wrap: anywhere;
}
.orbit-demo[data-demo="advanced"] .orbit-bubble {
  border-color: #c6b0ee44;
  background: #201b2cf5;
}
.orbit-demo[data-demo="advanced"] .bubble-name {
  color: #c8b3e9;
}
.demo-bottom {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9b92ad;
  font-size: 9px;
  min-height: 16px;
}
.demo-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9d8fbe;
  flex-shrink: 0;
  transition: background 0.3s;
}
.demo-status.status-alert {
  color: #dbad9e;
}
.demo-status.status-alert i {
  background: #db9f91;
}
.demo-status.status-success {
  color: #a1cbb1;
}
.demo-status.status-success i {
  background: #9cd0b1;
}
.demo-cycle {
  font-size: 6px;
  letter-spacing: 1.2px;
  color: #625c72;
}
@keyframes demo-bubble-in {
  from {
    opacity: 0;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 1050px) {
  .demo-top,
  .demo-bottom {
    left: 15px;
    right: 15px;
  }
  .demo-tabs,
  .demo-scene-label {
    left: 15px;
  }
  .demo-stage {
    inset: 85px 8px 73px;
  }
  .demo-hole {
    width: 58%;
  }
  .demo-center-label {
    font-size: 6px;
    letter-spacing: 1.6px;
  }
  .demo-status {
    font-size: 8px;
  }
  .bubble-message {
    font-size: 9px;
  }
  .bubble-name {
    font-size: 7px;
  }
  .orbit-bubble {
    padding: 8px 10px;
  }
}
@media (max-width: 700px) {
  .orbit-demo {
    min-height: 420px;
  }
  .demo-hole {
    width: 59%;
  }
  .demo-stage {
    inset: 85px 4px 76px;
  }
  .demo-status {
    font-size: 9px;
  }
  .demo-eyebrow {
    font-size: 7px;
  }
  .demo-center-label {
    transform: translate(-50%, calc(-50% + 9px));
  }
  .demo-cycle {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-hole > img,
  .orbit-bubble {
    animation: none !important;
  }
  .orbit-member {
    will-change: auto;
  }
  .demo-hole-glow,
  .discord-avatar {
    transition: none;
  }
}

/* A natural accretion disk, with members travelling around a tilted orbital plane. */
.demo-hole {
  width: 56%;
  max-width: 280px;
}
.demo-hole > video {
  position: absolute;
  left: -25%;
  top: 0;
  width: 150%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-20deg);
  filter: saturate(0.5) brightness(1.05);
  mask-image: radial-gradient(ellipse, #000 40%, transparent 74%);
}
.demo-orbit {
  transform: translate(-50%, -50%) rotate(-14deg);
  border-color: #a29a8b21;
}
.demo-hole-glow {
  background: radial-gradient(
    circle,
    transparent 35%,
    #c9aa7517 55%,
    transparent 72%
  );
}
@media (max-width: 700px) {
  .demo-hole {
    width: 56%;
  }
}

/* Quiet, avatar-attached messages using the site's charcoal and warm-white palette. */
.feature {
  border-radius: 18px;
}
.orbit-demo {
  border-radius: 14px;
  border: 1px solid #ffffff09;
  background: radial-gradient(
    ellipse at center,
    #211e18 0%,
    #121210 49%,
    #0b0b0a 100%
  );
}
.orbit-demo:before {
  opacity: 0.22;
  filter: grayscale(1);
}
.demo-eyebrow,
.demo-cycle {
  color: #767269;
}
.demo-scene-label {
  color: #a59d8d;
}
.demo-tabs button {
  border-color: #ffffff12;
  color: #8d897f;
}
.demo-tabs button[aria-pressed="true"] {
  background: #e2d9c212;
  border-color: #e2d9c22b;
  color: #d7d0c0;
}
.demo-orbit {
  border-color: #c6b9981c;
}
.demo-orbit.orbit-inner {
  border-color: #c6b99812;
}
.demo-orbit.orbit-outer:after {
  border-color: #c6b99809;
}
.demo-status {
  color: #a49d90;
}
.demo-status i {
  background: #aaa08a;
}
.demo-status.status-alert {
  color: #c6b49c;
}
.demo-status.status-success {
  color: #afbfac;
}
.demo-status.status-failed {
  color: #c3a39b;
}
.demo-status.status-failed i {
  background: #bb9488;
}
.orbit-member-name {
  color: #a29b8f;
}
.orbit-bubble,
.orbit-demo[data-demo="advanced"] .orbit-bubble {
  padding: 10px 12px;
  border: 1px solid #ddd5c522;
  border-radius: 12px;
  background: #1a1a18f5;
  box-shadow: 0 8px 24px #0004;
  backdrop-filter: blur(7px);
  overflow: visible;
}
.orbit-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: calc(50% - var(--bubble-shift, 0px));
  width: 8px;
  height: 8px;
  background: #1a1a18;
  border-right: 1px solid #ddd5c522;
  border-bottom: 1px solid #ddd5c522;
  transform: translateX(-50%) rotate(45deg);
}
.orbit-bubble.is-below {
  bottom: auto;
  top: calc(100% + 14px);
}
.orbit-bubble.is-below::after {
  bottom: auto;
  top: -5px;
  transform: translateX(-50%) rotate(225deg);
}
.bubble-name,
.orbit-demo[data-demo="advanced"] .bubble-name {
  font-size: 7px;
  letter-spacing: 0.2px;
  font-weight: 500;
  color: #aba396;
  margin-bottom: 5px;
}
.head-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid #ffffff0a;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  animation: activity-pop 0.3s ease-out both;
}
.activity-row:first-child {
  border-top: 0;
  padding-top: 2px;
}
.activity-row:last-child {
  padding-bottom: 1px;
}
.activity-icon {
  width: 15px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #bdb5a7;
  flex-shrink: 0;
}
.activity-icon svg {
  width: 13px;
  height: 13px;
}
.activity-row > div {
  min-width: 0;
}
.activity-title {
  display: none;
}
.activity-text {
  display: block;
  font-size: 9px;
  line-height: 1.45;
  color: #e3dfd5;
  overflow-wrap: anywhere;
}
.activity-quarantine .activity-icon {
  color: #d0bc93;
}
.activity-failed .activity-icon {
  color: #c5a192;
}
.activity-failed .activity-text {
  color: #d5c4b9;
}
.avatar-guard {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.avatar-guard svg {
  position: absolute;
  width: 51%;
  height: 51%;
  color: #ede7d8;
}
.avatar-guard .guard-lock {
  opacity: 0;
}
.is-quarantined .avatar-guard {
  opacity: 1;
  transform: none;
}
.discord-avatar > img {
  transition: opacity 0.4s !important;
}
.discord-avatar.is-quarantined {
  background: #39362e;
  border-color: #b4a388;
  box-shadow: 0 0 0 4px #b4a38810;
}
.is-quarantined > img {
  opacity: 0;
}
.is-quarantined .avatar-state {
  background: #bfac85;
}
.is-locked .guard-shield {
  opacity: 0;
}
.is-locked .guard-lock {
  opacity: 1;
}
.is-locked .avatar-state {
  background: #b69484;
}
.discord-avatar.is-offender {
  border-color: #bba99c;
  box-shadow: 0 0 0 4px #bba99c12;
}
.is-offender .avatar-state {
  background: #bba99c;
}
@keyframes activity-pop {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 700px) {
  .feature {
    border-radius: 16px;
  }
  .orbit-demo {
    border-radius: 12px;
  }
  .orbit-bubble,
  .orbit-demo[data-demo="advanced"] .orbit-bubble {
    padding: 8px 10px;
  }
  .activity-row {
    padding: 5px 0;
    gap: 6px;
  }
  .activity-text {
    font-size: 8px;
  }
  .bubble-name,
  .orbit-demo[data-demo="advanced"] .bubble-name {
    font-size: 6px;
  }
  .activity-icon {
    width: 13px;
  }
  .activity-icon svg {
    width: 12px;
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .activity-row {
    animation: none;
  }
  .avatar-guard {
    transition: none;
  }
}

/* Preserve message dimensions through quarantine and locked states. */
.orbit-demo[data-demo="advanced"] .orbit-bubble {
  min-height: var(--admin-bubble-height, 94px);
}
.orbit-demo[data-demo="advanced"] .orbit-bubble:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.orbit-demo[data-demo="advanced"] .head-activity {
  flex: 1;
  justify-content: center;
}
.orbit-bubble {
  transform: translateX(calc(-50% + var(--bubble-shift, 0px)))
    scale(var(--bubble-counter-scale, 1));
  transform-origin: 50% 100%;
}
.orbit-bubble.is-below {
  transform-origin: 50% 0;
}
.demo-orbit {
  translate: -2.7% 0.6%;
}

/* Readable animation typography at both desktop and phone sizes. */
.orbit-demo {
  min-height: 480px;
}
.demo-eyebrow {
  font-size: 10px;
  letter-spacing: 1.1px;
}
.demo-tabs button {
  font-size: 12px;
  padding: 6px 11px;
}
.demo-scene-label {
  font-size: 11px;
}
.demo-status {
  font-size: 12px;
  line-height: 1.5;
}
.demo-cycle {
  font-size: 9px;
  letter-spacing: 1px;
}
.orbit-member-name {
  font-size: 12px;
}
.bubble-name,
.orbit-demo[data-demo="advanced"] .bubble-name {
  font-size: 11px;
  margin-bottom: 8px;
}
.activity-text {
  font-size: 14px;
  line-height: 1.5;
}
.activity-row {
  padding: 8px 0;
  gap: 9px;
}
.activity-icon {
  width: 19px;
  height: 21px;
}
.activity-icon svg {
  width: 17px;
  height: 17px;
}
.orbit-bubble,
.orbit-demo[data-demo="advanced"] .orbit-bubble {
  padding: 13px 15px;
}
.orbit-demo[data-demo="advanced"] .orbit-bubble {
  min-height: var(--admin-bubble-height, 130px);
}
@media (max-width: 700px) {
  .orbit-demo {
    min-height: 460px;
  }
  .demo-eyebrow {
    font-size: 9px;
  }
  .demo-tabs button {
    font-size: 11px;
  }
  .demo-scene-label {
    font-size: 10px;
  }
  .demo-status {
    font-size: 12px;
  }
  .demo-cycle {
    font-size: 9px;
  }
  .orbit-member-name {
    font-size: 11px;
  }
  .bubble-name,
  .orbit-demo[data-demo="advanced"] .bubble-name {
    font-size: 11px;
  }
  .activity-text {
    font-size: 13px;
  }
  .activity-icon {
    width: 18px;
  }
  .activity-icon svg {
    width: 16px;
    height: 16px;
  }
  .orbit-bubble,
  .orbit-demo[data-demo="advanced"] .orbit-bubble {
    padding: 11px 13px;
  }
}