[data-team-maker] {
  --team-maker-ink: #29283a;
  --team-maker-soft: #f7f5ff;
}

[data-team-maker] [hidden] {
  display: none !important;
}

[data-team-maker] .team-maker-starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e7e1ff;
  border-radius: 14px;
  background: var(--team-maker-soft);
}

[data-team-maker] .team-maker-starter p {
  margin: 0;
  color: #5f5b72;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

[data-team-maker] .team-maker-options {
  display: grid;
  gap: 14px;
  align-self: stretch;
}

[data-team-maker] .play-field strong span {
  color: #777287;
  font-size: 12px;
  font-weight: 750;
}

[data-team-maker] button,
[data-team-maker] select,
[data-team-maker] input {
  min-height: 44px;
}

[data-team-maker] button:focus-visible,
[data-team-maker] select:focus-visible,
[data-team-maker] input:focus-visible,
[data-team-maker] textarea:focus-visible {
  outline: 3px solid #6d4aff;
  outline-offset: 3px;
}

[data-team-maker] .team-maker-summary {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #dcd3ff;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7f5ff, #fffaf0);
  color: var(--team-maker-ink);
}

[data-team-maker] .team-maker-summary strong {
  font-size: 19px;
}

[data-team-maker] .team-maker-summary p,
[data-team-maker] .team-maker-summary span {
  margin: 0;
  color: #615d70;
  line-height: 1.55;
}

[data-team-maker] .team-maker-summary span {
  font-size: 13px;
  font-weight: 800;
}

[data-team-maker] .team-result-card {
  --team-accent: #6d4aff;
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--team-accent) 34%, #e0e2e7);
  background: color-mix(in srgb, var(--team-accent) 7%, #fff);
}

[data-team-maker] .team-result-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--team-accent);
  content: "";
}

[data-team-maker] .team-result-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--team-maker-ink);
}

[data-team-maker] .team-result-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--team-accent);
}

[data-team-maker] .team-result-card li {
  border: 1px solid color-mix(in srgb, var(--team-accent) 16%, #e8e7ed);
}

[data-team-maker] .team-result-card[data-team-tone="violet"] { --team-accent: #6d4aff; }
[data-team-maker] .team-result-card[data-team-tone="amber"] { --team-accent: #b86a00; }
[data-team-maker] .team-result-card[data-team-tone="mint"] { --team-accent: #16835d; }
[data-team-maker] .team-result-card[data-team-tone="coral"] { --team-accent: #d54d5d; }
[data-team-maker] .team-result-card[data-team-tone="blue"] { --team-accent: #2671c9; }
[data-team-maker] .team-result-card[data-team-tone="orange"] { --team-accent: #d65f20; }
[data-team-maker] .team-result-card[data-team-tone="pink"] { --team-accent: #bb3d84; }
[data-team-maker] .team-result-card[data-team-tone="slate"] { --team-accent: #536276; }

@media (max-width: 640px) {
  [data-team-maker] .team-maker-starter {
    align-items: stretch;
    flex-direction: column;
  }

  [data-team-maker] .team-maker-starter .play-button {
    width: 100%;
  }

  [data-team-maker] .play-result-actions .play-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-team-maker] *,
  [data-team-maker] *::before,
  [data-team-maker] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  [data-team-maker] .team-result-card,
  [data-team-maker] .team-maker-summary,
  [data-team-maker] .team-maker-starter {
    border: 1px solid CanvasText;
  }

  [data-team-maker] .team-result-card::before,
  [data-team-maker] .team-result-dot {
    background: CanvasText;
  }
}