.skills-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.skills-wrapper h3 {
  color: #1f2937;
  margin-bottom: 25px;
}
.skill-box {
  margin-bottom: 20px;
}
.skill-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b5563;
}
.skill-bar {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.fill {
  height: 100%;
  border-radius: 10px;
  width: 0;
  animation: progress 1.5s ease-in-out forwards;
}
.tc1 {
  background: #f97316;
  --w: 80%;
}
.tc2 {
  background: #facc15;
  --w: 85%;
}
.tc3 {
  background: #3b82f6;
  --w: 90%;
}
.ct1 {
  background: #f97316;
  --w: 90%;
}
.ct2 {
  background: #facc15;
  --w: 95%;
}
.ct3 {
  background: #3b82f6;
  --w: 70%;
}
.pm1 {
  background: #f97316;
  --w: 90%;
}
.pm2 {
  background: #facc15;
  --w: 95%;
}
.pm3 {
  background: #3b82f6;
  --w: 90%;
}
@keyframes progress {
  from { width: 0; }
  to { width: var(--w); }
}