/* Compact creator assessment: one radar, with every verified score on its axis. */
.cx-skills {
  --cx-skill-accent: var(--cp, var(--primary-100, #bd98fa));
}
.cx-skills .cx-skills-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  margin-top: 5px;
}
.cx-skills svg.cx-skills-radar {
  display: block;
  width: min(100%, 390px);
  max-width: 390px;
  height: auto;
  overflow: visible;
  margin: 0 auto;
  color: var(--text-100, #f7f2ff);
}
.cx-skills-radar .cx-radar-grid {
  fill: none;
  stroke: var(--bg-300, #ffffff35);
  stroke-width: 1;
}
.cx-skills-radar .cx-radar-value {
  fill: #a780e044;
  stroke: var(--cx-skill-accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
@supports (color: color-mix(in srgb, red, transparent)) {
  .cx-skills-radar .cx-radar-value {
    fill: color-mix(in srgb, var(--cx-skill-accent) 28%, transparent);
  }
}
.cx-skills-radar .cx-radar-point {
  fill: var(--cx-skill-accent);
  stroke: var(--bg-200, #1e1730);
  stroke-width: 1.3;
}
.cx-skills-radar .cx-radar-label {
  fill: var(--text-200, #d5cbe6);
  font: 600 10.5px Onest, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cx-skills-radar .cx-radar-score {
  fill: var(--text-100, #fff);
  font: 700 13px Onest, sans-serif;
}
.cx-skills .cx-skill-note {
  margin-top: -1px;
}
@media (max-width: 560px) {
  .cx-skills svg.cx-skills-radar { width: min(100%, 340px); }
}