.skills-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 16px;
}
.skills-tabs button {
  font: 9px/1.5 monospace;
  color: #9c91ac;
  border: 1px solid #ac8fd42b;
  border-radius: 6px;
  padding: 8px 11px;
  background: transparent;
  cursor: pointer;
}
.skills-tabs button[aria-pressed="true"] {
  background: #ac8bd918;
  border-color: #b497dc77;
  color: #d1bce9;
}
.skill-count {
  font: 8px monospace;
  color: #82788e;
  display: block;
  margin: 0 0 14px;
  letter-spacing: 1px;
}
.toolkit [data-skill-group][hidden] {
  display: none !important;
}
.toolkit [data-skill-group] {
  animation: skill-enter 0.25s ease both;
}
.mobile-nav-toggle {
  display: none;
}
.intro-replay {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font: 9px monospace;
  letter-spacing: 1px;
  border: 1px solid #b394da30;
  border-radius: 6px;
  color: #b9a3d1;
  background: transparent;
  padding: 9px 12px;
  cursor: pointer;
}
.intro-replay:hover {
  border-color: #bea1e277;
  background: #b497dc0a;
}
body.interaction-polish .case-file[open] {
  border-left: 2px solid #b394df88;
  background: linear-gradient(100deg, #a58aff0d, transparent);
}
body.interaction-polish .case-file[open] .case-id {
  color: #c5a8e7;
}
body.interaction-polish .button {
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    translate 0.25s;
}
body.interaction-polish .button:hover {
  box-shadow: 0 5px 25px #a475ce14;
}
body.interaction-polish .button > span:last-child {
  display: inline-block;
  transition: transform 0.25s;
}
body.interaction-polish .button:hover > span:last-child {
  transform: translate(2px, -2px);
}
@keyframes skill-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 680px) {
  body.interaction-polish > header {
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 6%;
    gap: 12px;
  }
  body.interaction-polish .brand-cluster {
    flex: 1;
    min-width: 0;
  }
  body.interaction-polish .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #b096d940;
    border-radius: 8px;
    background: #a58aff09;
    color: #d1bced;
    cursor: pointer;
  }
  .mobile-nav-toggle svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
  }
  body.interaction-polish > header nav {
    display: none;
    order: 5;
    width: 100%;
    padding: 8px 0 4px;
    gap: 4px;
  }
  body.interaction-polish > header.nav-expanded nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  body.interaction-polish > header nav a {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 12px;
  }
  body.interaction-polish > header nav a[aria-current="location"] {
    background: #aa8bd917;
  }
  body.interaction-polish > header .nav-indicator {
    display: none;
  }
  body.interaction-polish > header .header-link {
    display: none;
  }
  .skills-tabs button {
    font-size: 8px;
    padding: 8px 9px;
  }
  body.interaction-polish footer {
    flex-wrap: wrap;
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toolkit [data-skill-group] {
    animation: none;
  }
  body.interaction-polish .button,
  body.interaction-polish .button > span:last-child {
    transition: none;
  }
}