@font-face {
  font-family: "Silkscreen";
  src: url("public/fonts/silkscreen-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.header-controls { display: flex; align-items: center; gap: 8px; }
.header-controls > button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--body-text);
  font: 500 12px/1 var(--font-sans), var(--font-zh);
  cursor: pointer;
  transition: color 160ms ease-out;
}
.header-controls > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.header-controls > button::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1;
  width: max-content;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  color: var(--muted);
  font: 600 11px/1.25 var(--font-sans), var(--font-zh);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.header-controls > button:focus-visible::after { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .header-controls > button:hover { color: var(--foreground); }
  .header-controls > button:hover::after { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .header-controls > button, .header-controls > button::after { transition: none; }
}

#about-me .profile-card {
  display: block;
  font-size: 16px;
}
#about-me .profile-card img { image-rendering: pixelated; }
.pixel-flock {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --bird-size: 1.5;
}
.pixel-flock .bird {
  --s: calc(var(--bird-size) * var(--scale, 1));
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.pixel-flock .bird svg {
  position: absolute;
  display: block;
  width: calc(var(--s) * 1em);
  height: calc(var(--s) * 1em);
  left: calc(var(--s) * -.5em);
  top: calc(var(--s) * -.75em);
  overflow: visible;
}
.pixel-flock .bird--pixel svg { shape-rendering: crispEdges; }
.pixel-flock .bird--pixel .body, .pixel-flock .bird--pixel .head { fill: #4493d0; }
.pixel-flock .bird--pixel .tail { fill: #3075a8; }
.pixel-flock .bird--pixel .wing { fill: #256191; }
.pixel-flock .bird--pixel .belly { fill: #78c1ed; }
.pixel-flock .bird--pixel .crown, .pixel-flock .bird--pixel .wing-highlight { fill: #64b1e4; }
.pixel-flock .bird--pixel .beak { fill: #ffc36a; }
.pixel-flock .bird--pixel .eye { fill: #071b29; }
.pixel-flock .bird--pixel .legs path, .pixel-flock .bird--pixel .toes { fill: #d89545; stroke: none; }
.pixel-flock .tag { display: none; }
#about-me .profile-card::after {
  display: inline-flex;
  font-family: "Silkscreen", monospace;
  font-weight: 400;
  padding: 8px 12px;
  text-align: center;
}

@media (max-width: 700px) {
  #about-me .profile-card {
    width: 72px;
    height: 72px;
    margin: 0 0 0 12px;
  }
}

.icon-pixel-variant { display: none; }
.resume-action-icon > img { display: block; width: 100%; height: 100%; }