.wizard-progress {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:20px 0}
.wizard-progress li {
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  color:var(--muted)}
.wizard-progress li[aria-current=step] {
  background:var(--mint-wash);
  border-color:var(--mint);
  color:var(--mint)}
.experience-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px}
.experience-metrics div {
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  gap:6px}
.experience-metrics strong {
  font-size:25px;
  color:var(--mint)}
.experience-metrics span {
  font-size:13px;
  color:var(--muted)}
.experience-list {
  display:grid;
  gap:12px;
  padding-left:20px;
  overflow-wrap:anywhere}
.experience-list li {
  line-height:1.6}
.experience-list .button-row {
  margin-top:8px}
.experience-options {
  border-top:1px solid var(--line);
  padding:18px 0}
.experience-options summary {
  font-weight:650;
  cursor:pointer;
  margin-bottom:14px}
.experience-options[open] {
  display:grid;
  gap:12px}
.experience-preview {
  border:1px solid var(--line-strong);
  border-left:4px solid var(--preview-accent,var(--mint));
  border-radius:10px;
  background:var(--surface-raised);
  padding:18px;
  margin:16px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.experience-preview strong,.preview-label {
  display:block}
.preview-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:12px}
.experience-preview small {
  color:var(--muted)}
.theme-mint {
  --preview-accent:#93efc4}
.theme-lilac {
  --preview-accent:#c9b8fa}
.theme-blue {
  --preview-accent:#93c5fd}
.theme-amber {
  --preview-accent:#efd399}
.preview-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px}
.preview-buttons span {
  padding:6px 12px;
  border-radius:6px;
  background:var(--surface-hover);
  font-size:13px}
.achievement-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}
.achievement {
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px}
.achievement.earned {
  border-color:var(--mint);
  background:var(--mint-wash)}
.achievement h3 {
  font-size:16px}
.achievement p {
  font-size:13px;
  margin-bottom:0;
  color:var(--muted)}
#diagnostic-result {
  margin-top:16px}
.demo-scenarios {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.demo-scenarios article {
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg)}
.demo-scenarios ul {
  padding-left:20px;
  color:var(--text-soft);
  font-size:14px}
.demo-scenarios .experience-preview {
  font-size:14px}
.message-preview {
  grid-column:1/-1}
@media(max-width:760px) {
  .experience-metrics {
  grid-template-columns:1fr}
.achievement-grid,.demo-scenarios {
  grid-template-columns:1fr}
.wizard-progress li {
  font-size:12px}
}