:root {
  --chip-background: #08080e;
  --chip-surface: #10101f;
  --chip-text: #f5f3fa;
  --chip-muted: #a9a6bb;
  --chip-blue: #69baff;
  --chip-purple: #b897ff;
  --chip-border: #ffffff19;
  --chip-font: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header {
  min-height: 90px;
  padding: 20px max(32px, calc((100% - 1320px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--chip-border);
  background: #08080eef;
  font-family: var(--chip-font);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--chip-text);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -1.2px;
  text-decoration: none;
}
.site-brand span { color: var(--chip-purple); }
.site-brand svg {
  width: 34px;
  height: 34px;
  margin-right: 12px;
  fill: none;
  stroke: var(--chip-purple);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px #885dff);
}
.site-brand sup { align-self: flex-start; margin-left: 2px; font-size: 9px; letter-spacing: 0; }
.site-nav { display: flex; gap: 28px; color: #c6c2d3; font-size: 13px; }
.site-nav a, .site-status { color: inherit; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--chip-blue); }
.site-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 16px;
  border: 1px solid #ad82ff40;
  border-radius: 30px;
  color: #cec5e1;
  font-size: 11px;
}
.site-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bc93ff;
  box-shadow: 0 0 12px #a05aff;
}
.site-header a:focus-visible { outline: 2px solid var(--chip-blue); outline-offset: 5px; }

html { scrollbar-color: #aa35ff #0c0b16; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 20px; height: 20px; }
  ::-webkit-scrollbar-track { background: #0c0b16; border-left: 1px solid #ffffff12; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3455ff, #8033ff 48%, #bc20ff); border: 3px solid #0c0b16; border-radius: 20px; }
}

@media (max-width: 1000px) {
  .site-header { padding: 20px 32px; gap: 20px; }
  .site-nav { gap: 18px; }
  .site-status { padding: 10px; font-size: 10px; }
}
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; gap: 18px; padding: 20px; }
  .site-brand { font-size: 23px; }
  .site-status { margin-left: auto; font-size: 9px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--chip-border); font-size: 12px; }
}
@media (max-width: 380px) {
  .site-nav { gap: 8px; font-size: 10px; }
}