.color-personality-page {
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 69, 90, .13), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(41, 189, 255, .13), transparent 25%),
    radial-gradient(circle at 50% 74%, rgba(173, 78, 255, .12), transparent 30%),
    var(--gradient-page);
}

.color-personality-page .sct-glow {
  background: conic-gradient(
    from 20deg,
    rgba(255, 68, 68, .32),
    rgba(255, 154, 45, .29),
    rgba(255, 220, 58, .28),
    rgba(66, 211, 115, .27),
    rgba(57, 166, 255, .3),
    rgba(149, 76, 233, .32),
    rgba(247, 91, 174, .3),
    rgba(255, 68, 68, .32)
  );
  filter: blur(58px);
  opacity: .7;
}

/* Clip the decorative glow without allowing focus to scroll the panel sideways. */
.color-personality-page .sct-container {
  overflow: clip;
}

.color-personality-page .sct-heading span {
  color: #ffffff;
  background: linear-gradient(90deg, #ff5c5c, #ff9d37 17%, #ffe45e 34%, #53df83 50%, #49b7ff 66%, #b06df3 82%, #ff73bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-personality-page .sct-quiz__panel {
  background:
    linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box,
    linear-gradient(125deg, #ff5c5c, #ffb238, #5bdf7f, #48b9ff, #af68ee, #ff72b9) border-box;
  border: 3px solid transparent;
  box-shadow: var(--shadow-panel), 0 0 38px rgba(175, 104, 238, .12);
}

.color-personality-page .sct-quiz__progress-fill {
  background: linear-gradient(90deg, #ff5757, #ffaf3f, #ffe05b, #54d987, #49b8ff, #a86ae8, #ff71b8);
}

.color-personality-page .sct-quiz__answer {
  border-width: 2px;
}

.color-personality-page .sct-quiz__answer:nth-child(4n + 1) {
  border-color: #ff6d70;
}

.color-personality-page .sct-quiz__answer:nth-child(4n + 2) {
  border-color: #f6b93b;
}

.color-personality-page .sct-quiz__answer:nth-child(4n + 3) {
  border-color: #4fcf87;
}

.color-personality-page .sct-quiz__answer:nth-child(4n + 4) {
  border-color: #9d72e7;
}

.color-personality-page .sct-quiz__possible-result {
  border-width: 2px;
}

.color-personality-page #color-blue { border-color: #338fd0; }
.color-personality-page #color-green { border-color: #3fbf75; }
.color-personality-page #color-purple { border-color: #9d68dc; }
.color-personality-page #color-pink { border-color: #ed68aa; }
.color-personality-page #color-black { border-color: #85808c; }
.color-personality-page #color-red { border-color: #ec5b5f; }
.color-personality-page #color-yellow { border-color: #d5b32d; }
.color-personality-page #color-orange { border-color: #ee9139; }

.color-personality-page .sct-quiz__possible-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.color-personality-page .color-profile summary {
  cursor: pointer;
}

.color-personality-page .color-profile summary::marker {
  color: var(--color-link);
}

.color-personality-page .color-profile summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 5px;
  border-radius: var(--radius-control);
}

.color-personality-page .color-profile__name {
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
}

.color-personality-page .color-profile__tagline,
.color-personality-page .color-profile__hint {
  display: block;
  margin-top: var(--space-2);
  line-height: 1.5;
}

.color-personality-page .color-profile__hint {
  color: var(--color-link);
  font-size: .9rem;
}

.color-personality-page .color-profile__body {
  margin-top: var(--space-4);
  overflow-wrap: anywhere;
}

.color-personality-page .color-profile__body p,
.color-personality-page .color-profile__body li {
  font-size: 1rem;
  line-height: 1.6;
}

.color-personality-page .color-profile__body p + p,
.color-personality-page .color-profile__body h4,
.color-personality-page .color-profile__body .color-profile__compare {
  margin-top: var(--space-4);
}

.color-personality-page .color-profile__body h4 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.color-personality-page .color-profile__traits {
  font-weight: var(--font-weight-semibold);
}

.color-personality-page .color-profile__body ul {
  padding-left: 1.25rem;
}

.color-personality-page .color-profile__body li + li {
  margin-top: var(--space-3);
}

.color-personality-page .color-explanation {
  margin-top: var(--space-6);
  text-align: left;
}

.color-personality-page .color-explanation h3 {
  margin-bottom: var(--space-3);
  font-size: 1.2rem;
}

.color-personality-page .color-explanation ul {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.color-personality-page .color-explanation li {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-control);
}

.color-personality-page .color-explanation h4 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.color-personality-page .color-explanation p {
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

.color-personality-page .color-explanation__prompt {
  color: var(--color-text-muted);
}

.color-personality-page .color-explanation blockquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-link);
  font-size: 1rem;
  line-height: 1.6;
}

html[data-theme="light"] .color-personality-page .sct-heading span {
  background-image: linear-gradient(90deg, #c82736, #bb5d00 17%, #927500 34%, #087a39 50%, #006eae 66%, #713fb0 82%, #bd286f);
}

html[data-theme="light"] .color-personality-page .sct-glow {
  opacity: .34;
}

@media (max-width: 700px) {
  .color-personality-page .sct-quiz__possible-results {
    grid-template-columns: 1fr;
  }

  .color-personality-page .sct-quiz__panel {
    border-width: 2px;
  }
}