.infoCard.professionalMode{
  width:min(1040px,95vw);
  padding:clamp(22px,3vw,30px);
}
.capabilitiesView[hidden],
.experienceView[hidden]{display:none!important}

.professionalView{
  overflow:visible;
  padding-right:0;
}
.professionalHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.professionalTitle{
  margin:0;
  font-size:clamp(38px,6vw,66px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:820;
}
.professionalIntro{
  max-width:540px;
  margin:0 0 3px;
  color:rgba(255,255,255,.58);
  font-size:11.5px;
  line-height:1.55;
  text-align:right;
}
.skillsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.skillCard{
  position:relative;
  min-height:116px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:15px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease,box-shadow .18s ease;
}
.skillCard:hover{
  transform:translateY(-2px);
  border-color:rgba(114,207,255,.27);
  background:rgba(255,255,255,.045);
}
.skillCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.skillIndex{
  color:rgba(255,255,255,.34);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
}
.skillProof{
  width:7px;height:7px;border-radius:50%;
  background:rgba(114,207,255,.76);
  box-shadow:0 0 11px rgba(114,207,255,.4);
}
.skillName{
  font-size:13px;
  line-height:1.35;
  font-weight:720;
  letter-spacing:-.012em;
}
.skillMeta{
  color:rgba(255,255,255,.43);
  font-size:9.5px;
  line-height:1.35;
}
.skillInsight{
  display:none;
  margin:0 0 15px;
  padding:17px 18px;
  border:1px solid rgba(114,207,255,.20);
  border-radius:19px;
  background:transparent;
}
.skillInsight.show{
  display:block;
  animation:semanticPanelIn .22s ease both;
}
@keyframes semanticPanelIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.skillInsightHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}
.skillInsightTitle{
  margin:0;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.025em;
  font-weight:760;
}
.skillInsightClose{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.45);
  font-size:17px;
  cursor:pointer;
  padding:0 2px;
}
.skillInsightText{
  margin:0;
  max-width:780px;
  color:rgba(255,255,255,.67);
  font-size:12px;
  line-height:1.65;
}
.semanticLinkButton{
  margin-top:13px;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(114,207,255,.22);
  border-radius:11px;
  background:rgba(114,207,255,.06);
  color:rgba(255,255,255,.86);
  font:inherit;
  font-size:10.5px;
  font-weight:720;
  cursor:pointer;
}
.semanticLinkButton:hover{background:rgba(114,207,255,.11)}

.experienceList{
  display:grid;
  gap:11px;
}
.experienceCard{
  position:relative;
  padding:18px 18px 17px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  transition:border-color .2s ease,background .2s ease,opacity .2s ease,box-shadow .2s ease,transform .2s ease;
}
.experienceTop{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:15px;
}
.experienceYear{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  color:#8bd7ff;
  padding-top:2px;
}
.experienceTitle{
  margin:0 0 4px;
  font-size:16px;
  line-height:1.28;
  letter-spacing:-.022em;
  font-weight:760;
}
.experienceText{
  margin:0;
  max-width:820px;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  line-height:1.62;
}
.experienceSkills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:13px;
}
.expSkillTag{
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.55);
  padding:6px 8px;
  font:inherit;
  font-size:9px;
  cursor:pointer;
}
.expSkillTag:hover{
  border-color:rgba(114,207,255,.22);
  color:rgba(255,255,255,.84);
}
.semanticTarget{
  border-color:rgba(114,207,255,.58)!important;
  background:rgba(114,207,255,.085)!important;
  box-shadow:0 0 0 2px rgba(114,207,255,.055),0 14px 38px rgba(0,0,0,.08)!important;
  transform:translateY(-1px);
}
.semanticDim{
  opacity:.45;
}
.semanticTarget::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(114,207,255,.18);
  animation:semanticPulse 1.45s ease 1;
  pointer-events:none;
}
@keyframes semanticPulse{
  0%{opacity:0;transform:scale(.985)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.018)}
}
.professionalHint{
  margin-top:13px;
  color:rgba(255,255,255,.35);
  font-size:9.5px;
  line-height:1.5;
}

html.theme-light body .professionalIntro{color:rgba(24,32,27,.56)}
html.theme-light body .skillCard,
html.theme-light body .experienceCard{
  border-color:rgba(24,38,29,.09);
  background:rgba(20,32,25,.022);
}
html.theme-light body .skillCard:hover,
html.theme-light body .experienceCard:hover{
  border-color:rgba(52,151,210,.23);
  background:rgba(52,151,210,.03);
}
html.theme-light body .skillIndex{color:rgba(24,32,27,.34)}
html.theme-light body .skillMeta,
html.theme-light body .experienceOrg{color:rgba(24,32,27,.44)}
html.theme-light body .experienceText{color:rgba(24,32,27,.67)}
html.theme-light body .skillInsight{
  border-color:rgba(52,151,210,.18);
  background:transparent;
}
html.theme-light body .skillInsightClose{color:rgba(24,32,27,.42)}
html.theme-light body .skillInsightText{color:rgba(24,32,27,.67)}
html.theme-light body .semanticLinkButton{
  border-color:rgba(52,151,210,.20);
  background:rgba(52,151,210,.055);
  color:#17201b;
}
html.theme-light body .expSkillTag{
  border-color:rgba(24,38,29,.09);
  background:rgba(20,32,25,.025);
  color:rgba(24,32,27,.55);
}
html.theme-light body .expSkillTag:hover{
  border-color:rgba(52,151,210,.20);
  color:#17201b;
}
html.theme-light body .semanticTarget{
  border-color:rgba(52,151,210,.46)!important;
  background:rgba(52,151,210,.075)!important;
  box-shadow:0 0 0 2px rgba(52,151,210,.045),0 14px 34px rgba(34,48,39,.055)!important;
}
html.theme-light body .professionalHint{color:rgba(24,32,27,.36)}

@media(max-width:840px){
  .skillsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .professionalHeader{align-items:flex-start;flex-direction:column}
  .professionalIntro{text-align:left}
}
@media(max-width:570px){
  .skillsGrid{grid-template-columns:1fr}
  .experienceTop{grid-template-columns:1fr;gap:7px}
  .experienceYear{font-size:10px}
}