.site-tabs {
  --site-tab-accent: var(--accent, var(--acid, #87ff65));
  position: fixed;
  z-index: 90;
  top: 10px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  width: min(760px, calc(100% - 28px));
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--site-tab-accent) 28%, transparent);
  background: rgba(4, 7, 5, 0.9);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.48),
    0 0 24px color-mix(in srgb, var(--site-tab-accent) 5%, transparent);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  font-family: "DM Mono", monospace;
  isolation: isolate;
}

.site-tabs::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-tab-accent) 4%, transparent), transparent 30% 70%, color-mix(in srgb, var(--site-tab-accent) 4%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.012) 5px);
  content: "";
  pointer-events: none;
}

.site-tabs[aria-hidden="true"] {
  pointer-events: none;
}

.site-tab {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 42px;
  padding: 0 clamp(12px, 2.2vw, 25px);
  overflow: hidden;
  color: rgba(242, 245, 239, 0.42);
  font-size: clamp(0.52rem, 0.9vw, 0.64rem);
  letter-spacing: 0.08em;
  place-items: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.site-tab + .site-tab {
  border-left: 1px solid color-mix(in srgb, var(--site-tab-accent) 13%, transparent);
}

.site-tab::after {
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 1px;
  background: var(--site-tab-accent);
  box-shadow: 0 0 10px var(--site-tab-accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transition: opacity 160ms ease, transform 200ms ease;
}

.site-tab:hover,
.site-tab:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--site-tab-accent) 6%, transparent);
  color: var(--site-tab-accent);
}

.site-tab.is-active {
  background: color-mix(in srgb, var(--site-tab-accent) 8%, transparent);
  color: var(--site-tab-accent);
}

.site-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-tab__label {
  position: relative;
  white-space: nowrap;
}

.site-tab--console {
  color: color-mix(in srgb, var(--site-tab-accent) 78%, #f2f5ef);
}

.site-tab--console::before {
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--site-tab-accent) 18%, transparent);
  content: "";
  opacity: 0.55;
  animation: nav-console-frame 3.4s steps(1, end) infinite;
}

.site-tab--console .site-tab__label::before,
.site-tab--console .site-tab__label::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  pointer-events: none;
}

.site-tab--console .site-tab__label::before {
  color: var(--site-tab-accent);
  opacity: 0;
  transform: translateX(3px);
  animation: nav-console-glitch 2.8s steps(1, end) infinite;
}

.site-tab--console .site-tab__label::after {
  color: #d8ffd0;
  opacity: 0;
  transform: translateX(-3px);
  animation: nav-console-glitch-alt 2.8s 70ms steps(1, end) infinite;
}

.site-tab--console:hover .site-tab__label,
.site-tab--console:focus-visible .site-tab__label {
  animation: nav-console-shake 180ms steps(2, end) infinite;
}

@keyframes nav-console-glitch {
  0%, 78%, 82%, 87%, 100% { opacity: 0; clip-path: inset(0); }
  79% { opacity: 0.9; clip-path: inset(12% 0 62% 0); transform: translate(5px, -1px); }
  80% { opacity: 0.55; clip-path: inset(65% 0 8% 0); transform: translate(-3px, 1px); }
  84% { opacity: 0.8; clip-path: inset(42% 0 38% 0); transform: translate(4px, 0); }
  86% { opacity: 0.5; clip-path: inset(8% 0 76% 0); transform: translate(-2px, -1px); }
}

@keyframes nav-console-glitch-alt {
  0%, 80%, 84%, 89%, 100% { opacity: 0; clip-path: inset(0); }
  81% { opacity: 0.7; clip-path: inset(55% 0 18% 0); transform: translate(-5px, 1px); }
  83% { opacity: 0.45; clip-path: inset(18% 0 64% 0); transform: translate(3px, -1px); }
  86% { opacity: 0.7; clip-path: inset(72% 0 7% 0); transform: translate(-4px, 0); }
  88% { opacity: 0.4; clip-path: inset(35% 0 48% 0); transform: translate(2px, 1px); }
}

@keyframes nav-console-frame {
  0%, 76%, 100% { opacity: 0.4; transform: none; }
  77% { opacity: 0.9; transform: translateX(2px); }
  78% { opacity: 0.2; transform: translateX(-3px); }
  80% { opacity: 0.7; transform: none; }
}

@keyframes nav-console-shake {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(2px); }
  66% { transform: translateX(-2px); }
}

@media (max-width: 600px) {
  .site-tabs {
    top: 7px;
    width: calc(100% - 14px);
    min-height: 40px;
  }

  .site-tab {
    min-height: 38px;
    padding: 0 5px;
    font-size: clamp(0.42rem, 2.05vw, 0.52rem);
    letter-spacing: 0.035em;
  }

  .site-tab:nth-child(4) .site-tab__label {
    font-size: 0;
  }

  .site-tab:nth-child(4) .site-tab__label::after {
    position: static;
    content: "About";
    font-size: clamp(0.42rem, 2.05vw, 0.52rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-tab--console::before,
  .site-tab--console .site-tab__label::before,
  .site-tab--console .site-tab__label::after,
  .site-tab--console:hover .site-tab__label,
  .site-tab--console:focus-visible .site-tab__label {
    animation: none !important;
  }
}