/* A full-width glass bar becomes a floating capsule while scrolling. */
html { scroll-padding-top: 116px; }
.header-slot { height: 100px; }
.header-slot .header {
  --glass-tint: rgba(247, 248, 250, .76);
  --glass-edge: rgba(255, 255, 255, .85);
  position: fixed;
  z-index: 80;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: none;
  height: 100px;
  margin: 0;
  padding: 20px clamp(24px, 3vw, 56px);
  gap: 24px;
  border: 1px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 0;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: width 460ms cubic-bezier(.22,1,.36,1),
    top 460ms cubic-bezier(.22,1,.36,1),
    height 460ms cubic-bezier(.22,1,.36,1),
    padding 460ms cubic-bezier(.22,1,.36,1),
    border-radius 460ms cubic-bezier(.22,1,.36,1),
    border-color 460ms ease, box-shadow 460ms ease;
}
[data-theme="dark"] .header-slot .header {
  --glass-tint: rgba(16, 19, 27, .72);
  --glass-edge: rgba(255, 255, 255, .16);
}
.header-slot .header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10), transparent 36%, transparent 65%, rgba(255,255,255,.035));
}
.header-slot .header.is-floating {
  top: 14px;
  width: min(1180px, calc(100% - 48px));
  height: 76px;
  padding: 12px 24px;
  border-radius: 999px;
  border-color: var(--glass-edge);
  box-shadow: 0 12px 40px -16px rgba(0,0,0,.32),
    inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255,255,255,.045);
}
.header-slot .header .brand { flex: 0 0 280px; }
.header-slot .brand-full { width: 280px; }
.header-slot .header nav { gap: 24px; font-size: 13px; }
.header-slot .header-actions { gap: 14px; flex-shrink: 0; }
.header-slot .header .button-small { min-height: 48px; padding: 12px 19px; font-size: 13px; gap: 15px; }
.header-slot .header .button-small svg { width: 22px; height: 22px; }
.header-slot .theme-picker { width: 44px; height: 44px; }
@media (min-width: 960px) {
  .header-slot .header nav { display: flex; }
}
@media (max-width: 959px) {
  .header-slot .header nav { display: none; }
  .header-slot .header .brand { flex-basis: 260px; }
  .header-slot .brand-full { width: 260px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 96px; }
  .header-slot { height: 80px; }
  .header-slot .header { height: 80px; padding: 14px 20px; gap: 12px; }
  .header-slot .header.is-floating { top: 10px; width: calc(100% - 24px); height: 66px; padding: 10px 14px; }
  .header-slot .header .brand { flex-basis: 40px; }
  .header-slot .header .brand-full { display: none; }
  .header-slot .header .brand-symbol { display: block; width: 40px; height: 40px; }
  .header-slot .brand-symbol img { width: 40px; height: 40px; }
  .header-slot .header-actions { gap: 10px; }
  .header-slot .header .button-small { min-height: 44px; padding: 10px 14px; font-size: 12px; gap: 10px; }
  .header-slot .header .button-small svg { width: 19px; height: 19px; }
}
/* The broad surface uses blur rather than an expensive full-width displacement map. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-slot .header { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .header-slot .header { transition: none; }
}
.motion-off .header-slot .header { transition: none; }