/* Header-owned tokens and selectors: page styles must not resize navigation. */
#psx-header {
  --site-bg: #ece4d2;
  --site-card: #f9f5e9;
  --site-ink: #241e13;
  --site-muted: #766c5a;
  --site-line: #ddd0b6;
  --site-accent: #b4692e;
  position: sticky; top: 0; z-index: 60;
  width: 100%; margin: 0; padding: 0; border: 0;
  border-bottom: 1px solid var(--site-line);
  background: var(--site-bg); color: var(--site-ink);
  font: 600 14px/1.3 Figtree, system-ui, sans-serif;
  backdrop-filter: none; box-shadow: none;
}
[data-theme="dark"] #psx-header {
  --site-bg: #15130d; --site-card: #211e16; --site-ink: #f6efdc;
  --site-muted: #ada38d; --site-line: #3b3425; --site-accent: #efb33c;
}
#psx-header *, #psx-header *::before, #psx-header *::after { box-sizing: border-box; }
#psx-header .site-header-inner { width: min(1440px, 100%); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 28px; min-height: 76px; }
#psx-header a { text-decoration: none; }
#psx-header .site-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--site-ink); font: 700 22px/1 Fraunces, Georgia, serif; letter-spacing: -.04em; white-space: nowrap; }
#psx-header .site-brand svg { width: 30px; height: 30px; color: var(--site-accent); flex: none; }
#psx-header .site-links { display: flex; align-items: stretch; gap: 20px; margin: 0; padding: 0; min-width: 0; align-self: stretch; }
#psx-header .site-links a { display: flex; align-items: center; flex: none; padding: 0; border: 0; border-bottom: 2px solid transparent; color: var(--site-muted); font: 600 14px/1.3 Figtree, system-ui, sans-serif; white-space: nowrap; }
#psx-header .site-links a:hover, #psx-header .site-links a[aria-current="page"] { color: var(--site-ink); border-bottom-color: var(--site-accent); }
#psx-header .site-links .site-tour-link { justify-content: center; min-width: 24px; color: var(--site-accent); }
#psx-header .site-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
#psx-header button { font: inherit; cursor: pointer; }
#psx-header .site-icon, #psx-header .site-search-action { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 9px; border: 1px solid var(--site-line); border-radius: 12px; background: var(--site-card); color: var(--site-accent); }
#psx-header .site-icon svg, #psx-header .site-search-action svg { width: 20px; height: 20px; }
#psx-header .site-search { display: flex; align-items: center; gap: 7px; width: 148px; min-width: 0; height: 40px; padding: 0 10px; margin: 0; border: 1px solid var(--site-line); border-radius: 12px; background: var(--site-card); color: var(--site-muted); }
#psx-header .site-search svg { width: 16px; height: 16px; flex: none; }
#psx-header .site-search input { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--site-ink); font: 500 13px/1.3 Figtree, system-ui, sans-serif; }
#psx-header .site-search-action { display: none; }
#psx-header .site-progress { display: flex; align-items: center; gap: 7px; flex: none; cursor: pointer; }
#psx-header .site-level { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 40px; min-width: 35px; padding: 4px 6px; border-radius: 10px; background: var(--site-accent); color: var(--site-bg); font: 800 9px/1 Figtree, sans-serif; }
#psx-header .site-level b { font-size: 18px; line-height: 1.1; }
#psx-header .site-xp { display: grid; gap: 5px; font-size: 10px; color: var(--site-muted); white-space: nowrap; }
#psx-header .site-meter { display: block; width: 58px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--site-line); }
#psx-header .site-meter i { display: block; height: 100%; background: var(--site-accent); }
#psx-header .site-account-slot { display: flex; flex: none; }
#psx-header .psx-account { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-height: 40px; max-width: 160px; margin: 0; padding: 0 12px; border: 1px solid var(--site-line); border-radius: 12px; color: var(--site-ink); background: var(--site-card); font: 700 13px/1.2 Figtree, system-ui, sans-serif; white-space: nowrap; }
#psx-header .psx-account-name { overflow: hidden; text-overflow: ellipsis; }
#psx-header .psx-account i { flex: none; }
#psx-header [hidden] { display: none !important; }
#psx-header :is(a, button, input, [role="button"]):focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
#psx-header .tour-launch { display: none; }
@media (max-width: 1350px) {
  #psx-header .site-header-inner { flex-wrap: wrap; gap: 0 20px; padding-top: 12px; }
  #psx-header .site-links { order: 3; width: 100%; height: 45px; gap: 26px; margin-top: 7px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
  #psx-header .site-links a { min-height: 42px; scroll-snap-align: start; }
}
@media (max-width: 860px) {
  #psx-header .site-header-inner { padding: 10px 16px 0; gap: 0 12px; }
  #psx-header .site-search { display: none; }
  #psx-header .site-search-action { display: grid; }
  #psx-header .site-links { gap: 23px; margin-top: 6px; }
}
@media (max-width: 520px) {
  #psx-header .site-header-inner { padding: 9px 12px 0; gap: 0 8px; }
  #psx-header .site-brand { gap: 7px; font-size: 19px; }
  #psx-header .site-brand svg { width: 26px; height: 26px; }
  #psx-header .site-tools { gap: 6px; }
  #psx-header .site-progress { display: none; }
  #psx-header .site-icon, #psx-header .site-search-action { width: 36px; height: 38px; padding: 8px; }
  #psx-header .psx-account { height: 38px; min-height: 38px; padding: 0 9px; }
  #psx-header .psx-account-name { display: none; }
  #psx-header .site-links { gap: 22px; height: 44px; }
}
body:has(> #psx-header) { padding: 0; display: block; }
body:has(> #psx-header) > .shell { margin: 32px auto; }
body:has(> #psx-header) > .settings-window { margin: 24px auto; width: min(1200px, calc(100% - 32px)); }
@media (max-width: 680px) {
  body:has(> #psx-header) > .shell, body:has(> #psx-header) > .settings-window { margin: 0; width: 100%; }
  .settings-sidebar { position: static; }
}