/* The existing avatar box and story outline retain their original dimensions. */
.profile-avatar.is-cd-avatar { position: relative; background: transparent !important; border-color: transparent; }
/* A thin silver edge, printed picture label and clear polycarbonate hub. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 75%, #20293790 76%, #ffffffaa 77%, transparent 79%, #ffffff45 82%, transparent 83%, #15192355 95%, #ffffffc0 96%, #777f8b 98%, #e8edf4 99%),
    conic-gradient(from 25deg, #b5bdc9, #f8fafc 12%, #939da9 23%, #d6eeef 27%, #c4bddb 30%, #f8fafc 35%, #a3acb8 47%, #edf2f7 60%, #8d97a5 72%, #c0dbd4 77%, #d7c5dc 80%, #f6f8fb 86%, #b5bdc9);
  /* closest-side makes the spindle hole proportional to the actual disc radius. */
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 12.5%, #000 13.5%);
  mask-image: radial-gradient(circle closest-side, transparent 12.5%, #000 13.5%);
  animation: yapper-cd-spin var(--cd-spin-duration, 9s) linear infinite !important;
  pointer-events: none;
}
.profile-avatar.is-cd-avatar > .cd-avatar-disc > img {
  position: absolute !important; inset: 12% !important; width: 76% !important; height: 76% !important;
  max-width: none !important; max-height: none !important; border-radius: 50% !important;
  object-fit: cover !important; animation: none !important;
}
/* Low-opacity light on the printed surface: the photo remains readable. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 74%, #ffffff18 75%, transparent 76%, #ffffff30 78%, transparent 79%),
    conic-gradient(from -35deg, transparent 0deg 40deg, #dcf8ff20 52deg, #ffffff40 62deg, #e7d6ff20 72deg, transparent 88deg 210deg, #d8ffef18 226deg, #ffffff30 239deg, #edd8ff18 250deg, transparent 267deg);
}
.profile-avatar.is-cd-avatar > .cd-avatar-disc::after {
  content: ''; position: absolute; inset: 34.5%; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 40%, #616975 42%, #e4eaf1 45%, #a8b2bf 48%, transparent 51%, #e1e9f03b 75%, #ecf4ff90 79%, #606b7970 82%, #dce4ee55 85%, transparent 88%),
    conic-gradient(from 25deg, #c5cddba0, #ffffffc0 16%, #a6b3c180 29%, #f2f7ffc0 48%, #9fa9b980 63%, #ffffffb0 83%, #c5cddba0);
}
.profile-cd-option {
  position: relative !important;
  box-sizing: border-box !important;
  display: grid;
  gap: 14px;
  width: 100% !important;
  margin: 16px 0 20px !important;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  border-radius: var(--ui-radius-panel, 34px) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 54%),
    var(--bubble) !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent) !important;
}

@media (max-width: 700px) {
  .profile-cd-option {
    padding: 14px !important;
    border-radius: 29px !important;
  }
}
.profile-cd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.profile-cd-toggle-row > span { min-width: 0; }
.profile-cd-option strong, .profile-cd-option small { display: block; }
.profile-cd-option small { color: var(--muted); margin-top: 4px; font-size: 12px; }

/* Fully custom Yapper ticker: identical on Safari/iOS/Chrome/desktop. */
.profile-cd-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 27px !important;
  width: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid color-mix(in srgb, var(--text) 28%, var(--border)) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--button) 96%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent) !important;
  outline: none !important;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease !important;
}
.profile-cd-toggle::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(.72);
  transform-origin: center;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease !important;
}
.profile-cd-toggle:checked {
  background: #5C77FF !important;
  border-color: #5C77FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.profile-cd-toggle:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.profile-cd-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, #5C77FF 78%, white) !important;
  outline-offset: 3px !important;
}
.profile-cd-toggle:disabled { opacity: .48 !important; cursor: default; }

.profile-cd-speed-control {
  display: grid;
  gap: 7px;
  padding-top: 2px;
  transition: opacity .16s ease;
}
.profile-cd-speed-control.is-disabled { opacity: .48; }
.profile-cd-speed-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#profileCdSpeedValue {
  color: var(--secondary-text);
  font-variant-numeric: tabular-nums;
}
.profile-cd-speed {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background:
    linear-gradient(
      to right,
      #5C77FF 0 var(--cd-speed-fill, 33.333%),
      color-mix(in srgb, var(--button) 88%, var(--border)) var(--cd-speed-fill, 33.333%) 100%
    ) center / 100% 8px no-repeat !important;
  border-radius: 999px !important;
  cursor: pointer;
  box-shadow: none !important;
}
.profile-cd-speed::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.profile-cd-speed::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: #5C77FF;
  box-shadow: 0 1px 5px var(--shadow);
}
.profile-cd-speed::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.profile-cd-speed::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: #5C77FF;
  box-shadow: 0 1px 5px var(--shadow);
}
.profile-cd-speed:disabled { cursor: default; }
@keyframes yapper-cd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .profile-avatar.is-cd-avatar > .cd-avatar-disc { animation: none !important; } }


/* v3.24 — low-key curved display name around the spinning CD on profile views. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text {
  fill: color-mix(in srgb, var(--text) 82%, transparent);
  opacity: .40;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Compact avatars physically shrink the SVG, so their ring lettering needs a
   larger viewBox font. Profile-sized CDs keep the finer, subtler lettering. */
.profile-avatar.is-cd-avatar.profile-avatar-large > .cd-avatar-disc > .cd-avatar-ring text,
.profile-avatar.is-cd-avatar.profile-avatar-edit > .cd-avatar-disc > .cd-avatar-ring text,
#profileAvatarDisplay .profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text,
.plus-preview-profile-view .profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text {
  opacity: .34;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .13em;
}

.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring textPath {
  dominant-baseline: middle;
}



/* v3.33 — feed/reply CD spin escape hatch.
   Mobile feed performance CSS intentionally disables animation on every node
   inside a yap. Re-enable ONLY the CD disc so yap + reply avatars keep spinning. */
#yapFeed .profile-avatar.is-cd-avatar > .cd-avatar-disc {
  animation: yapper-cd-spin var(--cd-spin-duration, 9s) linear infinite !important;
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  #yapFeed .profile-avatar.is-cd-avatar > .cd-avatar-disc {
    animation: none !important;
  }
}