.skills-layout {
  padding-top:0
}
.skills-console {
  display:grid;
  grid-template-columns:300px 1fr;
  border:1px solid var(--line);
  background:var(--surface)
}
.skill-tabs {
  padding:25px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:7px
}
.skill-tab {
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  padding:17px 15px;
  background:transparent;
  border:1px solid transparent;
  color:var(--muted);
  font-size:15px;
  border-radius:3px;
  min-height:54px
}
.skill-tab span {
  font:11px Code,monospace;
  width:22px
}
.skill-tab:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.skill-tab[aria-selected=true] {
  background:var(--accent);
  color:#090909
}
.skill-panel {
  padding:45px;
  min-height:380px
}
.skill-panel h2 {
  font-size:36px;
  margin:15px 0 18px
}
.skill-panel p {
  max-width:650px;
  margin-bottom:28px
}
.skill-pills {
  display:flex;
  flex-wrap:wrap;
  gap:11px
}
.skill-pills .pill {
  font-size:14px;
  padding:9px 15px;
  background:var(--bg);
  font-family:Portfolio,Arial,sans-serif
}
.skill-proficiency {
  font:11px Code,monospace;
  display:block;
  color:var(--muted);
  margin-top:35px
}
.approach-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.approach-step {
  border-top:1px solid var(--line);
  padding-top:25px
}
.approach-step .step-number {
  font:12px Code,monospace;
  color:var(--muted)
}
.approach-step h3 {
  font-size:25px;
  margin:40px 0 15px
}
.approach-step p {
  font-size:15px
}
.learning-box {
  margin-top:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:25px 30px;
  border:1px solid var(--line)
}
.learning-box h3 {
  font-size:23px
}
.learning-box p {
  font-size:14px;
  margin-top:8px
}
@media(max-width:900px) {
  .skills-console {
    grid-template-columns:235px 1fr
  }
  .skill-tabs {
    padding:15px
  }
  .skill-panel {
    padding:30px
  }
  .skill-tab {
    font-size:14px;
    padding:14px 10px
  }
}
@media(max-width:650px) {
  .skills-console {
    grid-template-columns:1fr
  }
  .skill-tabs {
    border-right:0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:13px
  }
  .skill-tab {
    min-height:47px;
    font-size:13px;
    padding:11px 9px;
    gap:7px
  }
  .skill-tab span {
    font-size:10px;
    width:18px
  }
  .skill-panel {
    padding:26px 22px;
    min-height:370px
  }
  .skill-panel h2 {
    font-size:30px
  }
  .skill-pills .pill {
    font-size:13px;
    padding:8px 12px
  }
  .approach-grid {
    grid-template-columns:1fr
  }
  .approach-step h3 {
    margin-top:24px
  }
  .learning-box {
    align-items:flex-start;
    flex-direction:column;
    padding:25px
  }
  .skill-proficiency {
    font-size:10px
  }
}