/* Header/category-only overrides; other page blocks retain their styles. */
body > header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
/* Keep the content row 24px below category navigation at every breakpoint. */
body > main { padding-top: 24px; }
/* Header uses the same DM Sans, translucent surfaces and pill controls as the page. */
header .header-inner { height: auto; min-height: 0; padding: 24px 36px 0; gap: 24px; }
header .brand { font: 700 32px/1 'DM Sans', sans-serif; letter-spacing: -1.2px; }
header .search { min-height: 44px; max-width: none; padding: 11px 16px; gap: 10px; border: 1px solid #ffffff4d; border-radius: 100px; background: #ffffff1a; color: #ffffff99; }
header .search input { font: 400 14px/20px 'DM Sans', sans-serif; }
header .search input::placeholder { color: #ffffff80; }
header .search svg { width: 20px; height: 20px; }
header .search kbd { font: 400 12px/18px 'DM Sans', sans-serif; color: #ffffff80; border-color: #ffffff33; }
header .search:focus-within { background: #ffffff26; border-color: #ffffff99; }
header .header-actions { gap: 12px; }
header .header-actions > button { font: 400 14px/20px 'DM Sans', sans-serif; color: #ffffffb3; }
header .header-actions .login, header .header-actions .primary { min-height: 44px; padding: 11px 20px; border: 1px solid #ffffff4d; color: #fff; font-size: 14px; }
header .header-actions .login { background: transparent; }
header .header-actions .primary { font-weight: 600; background: #5865f2; border-color: #ffffff26; }
header .header-actions .primary:hover { background: #6975ff; }
header .header-actions .login:hover { background: #ffffff1a; }
header #how:hover { color: #fff; }
header #menu { width: 44px; height: 44px; font-size: 20px; border: 1px solid #ffffff4d; background: transparent; }
header #menu:hover { background: #ffffff1a; }
header .extra-nav button { font: 400 14px/20px 'DM Sans', sans-serif; color: #ffffffb3; }
nav#category-navigation { gap: 4px; height: 30px; margin-top: 14px; }
#category-navigation .category-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: 0 0 auto; white-space: nowrap; border: 1px solid #ffffff4d;
  border-radius: 100px; padding: 4px 10px; color: #fff;
  font: 400 14px/20px 'DM Sans', sans-serif; background: transparent;
}
#category-navigation .category-pill img { flex: none; display: block; }
#category-navigation .category-icon { width:16px; height:16px; flex:none; overflow:visible; }
#category-navigation .category-icon img { transform:scale(.6666667); transform-origin:top left; filter:brightness(0) invert(1); opacity:.6; }
#category-navigation .category-pill:hover .category-icon img, #category-navigation .category-pill.active .category-icon img { opacity:1; }
#category-navigation .category-pill:hover { color: white; background: #ffffff0d; }
#category-navigation .category-pill.active { background: #ffffff1a; color: white; }
#category-navigation .category-pill::after { display: none; }
#category-navigation .category-pill:focus-visible { outline-offset: -2px; }
#category-pinned { display: flex; flex: none; max-width: 40%; }
#category-pinned .category-pill { max-width: 100%; overflow: hidden; }
#category-pinned .category-pill span { overflow: hidden; text-overflow: ellipsis; }
#category-navigation .category-viewport { position: relative; min-width: 0; overflow: visible; height: 100%; display: block; flex: 1; }
#category-navigation #nav {
  display: flex; align-items: center; gap: 4px; height: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; padding: 0 38px 0 0; scroll-behavior: smooth;
}
#category-navigation #nav::-webkit-scrollbar { display: none; }
#category-navigation .has-right #nav { -webkit-mask-image: linear-gradient(to right, black calc(100% - 56px), transparent calc(100% - 24px));mask-image: linear-gradient(to right, black calc(100% - 56px), transparent calc(100% - 24px)); }
#category-navigation .has-left #nav { -webkit-mask-image: linear-gradient(to right, transparent 24px, black 56px);mask-image: linear-gradient(to right, transparent 24px, black 56px); }
#category-navigation .has-left.has-right #nav { -webkit-mask-image: linear-gradient(to right, transparent 24px, black 56px, black calc(100% - 56px), transparent calc(100% - 24px));mask-image: linear-gradient(to right, transparent 24px, black 56px, black calc(100% - 56px), transparent calc(100% - 24px)); }
#category-navigation .category-arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid #ffffff4d; border-radius: 100px; background: #ffffff1a;
  backdrop-filter: blur(12px); color: white;
}
#category-navigation .category-arrow:hover { background: #ffffff30; }
#category-navigation .category-arrow img { display: block; }
#category-back { left: 0; }
#category-back img { transform: rotate(180deg); }
#category-forward { right: 0; }
@media (prefers-reduced-motion: reduce) { #category-navigation #nav { scroll-behavior: auto; } }
@media(max-width:800px) { header .header-inner { padding: 20px 20px 0; gap: 16px; } header .brand { font-size: 28px; } header .header-actions { gap: 8px; } header .header-actions .login, header .header-actions .primary { padding: 11px 16px; } }
@media(max-width:560px) { header .header-inner { padding: 18px 17px 0; gap: 14px; } header .brand { font-size: 28px; } header .header-actions { gap: 6px; } header .header-actions .login, header .header-actions .primary { padding: 9px 12px; min-height: 40px; } header #menu { width: 36px; height: 36px; font-size: 18px; } header .search { flex-basis: 100%; min-height: 44px; padding: 11px 14px; } }