/* Canonical CSNPK top navigation. Keep visual size aligned with the 2026-08-22 baseline. */
.csn-topnav {
  --csn-nav-paper: #fffefa; --csn-nav-panel: #fffefa; --csn-nav-panel-2: #f7f3eb;
  --csn-nav-ink: #202936; --csn-nav-ink-2: #4a5565; --csn-nav-muted: #747e8c;
  --csn-nav-line: #ded6c8; --csn-nav-accent: #a94132;
  --csn-nav-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --csn-nav-serif: "Noto Serif SC", "Songti SC", STSong, serif;
  position: sticky; top: 0; z-index: 1000; box-sizing: border-box; width: 100%;
  color: var(--csn-nav-ink); background: rgba(255, 254, 250, .92);
  border-bottom: 1px solid var(--csn-nav-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  font-family: var(--csn-nav-sans);
}
.csn-topnav *, .csn-topnav *::before, .csn-topnav *::after { box-sizing: border-box; }
.csn-topnav-inner { display: flex; align-items: stretch; gap: 18px; width: min(1480px, 100%); min-height: 58px; margin: 0 auto; padding: 0 20px; }
.csn-brand { display: flex; flex: none; align-items: center; gap: 10px; color: var(--csn-nav-ink); text-decoration: none; }
.csn-brand-seal { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 7px; color: #fff; background: var(--csn-nav-accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font: 700 14px/1 var(--csn-nav-serif); }
.csn-brand-name { display: block; white-space: nowrap; font: 700 17px/1.2 var(--csn-nav-serif); letter-spacing: .02em; }
.csn-brand-sub { display: block; margin-top: 1px; color: var(--csn-nav-muted); font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; text-transform: uppercase; }
.csn-menu { display: flex; align-items: stretch; margin-left: auto; }
.csn-item { position: relative; display: flex; align-items: stretch; }
.csn-item > a, .csn-item > button { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; color: var(--csn-nav-ink-2); background: none; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 14px/1 var(--csn-nav-sans); }
.csn-item > a:hover, .csn-item > button:hover { color: var(--csn-nav-ink); }
.csn-item.active > a, .csn-item.active > button, .csn-item > a[aria-current="page"] { color: var(--csn-nav-accent); border-bottom-color: var(--csn-nav-accent); }
.csn-caret { color: var(--csn-nav-muted); font-size: 9px; transition: transform .18s ease; }
.csn-item:hover .csn-caret, .csn-item:focus-within .csn-caret, .csn-item[data-open="true"] .csn-caret { transform: rotate(180deg); }
.csn-drop { position: absolute; top: calc(100% + 1px); left: 50%; z-index: 1010; min-width: 250px; padding: 8px; border: 1px solid var(--csn-nav-line); border-radius: 12px; background: var(--csn-nav-panel); box-shadow: 0 18px 45px rgba(32, 41, 54, .16); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.csn-item:hover .csn-drop, .csn-item:focus-within .csn-drop, .csn-item[data-open="true"] .csn-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.csn-drop a { display: block; padding: 9px 11px; border-radius: 8px; color: var(--csn-nav-ink); text-decoration: none; }
.csn-drop a:hover, .csn-drop a.current { background: var(--csn-nav-panel-2); }
.csn-drop a b { display: flex; align-items: baseline; gap: 7px; font: 600 13.5px/1.35 var(--csn-nav-sans); }
.csn-nav-refresh {
  flex: none; color: #397153; font: 600 10px/1 var(--csn-nav-sans);
  letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.csn-drop a small { display: block; margin-top: 2px; color: var(--csn-nav-muted); font: 400 11.5px/1.45 var(--csn-nav-sans); }
.csn-drop-separator { height: 1px; margin: 6px 8px; background: var(--csn-nav-line); }
@media (max-width: 760px) {
  .csn-topnav[data-menu-open="true"] { overflow-x: clip; overflow-y: visible; }
  .csn-topnav-inner { gap: 8px; min-height: 58px; padding: 0 12px; }
  .csn-brand-sub { display: none; }
  .csn-brand-name { font-size: 15px; }
  .csn-menu { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .csn-topnav[data-menu-open="true"] .csn-menu { overflow: visible; }
  .csn-topnav[data-menu-open="true"] .csn-item:not([data-open="true"]) .csn-drop { opacity: 0; visibility: hidden; pointer-events: none; }
  .csn-menu::-webkit-scrollbar { display: none; }
  .csn-item > a, .csn-item > button { padding: 0 10px; font-size: 13px; }
  .csn-drop { position: fixed; top: 59px; right: 12px; left: 12px; width: auto; min-width: 0; max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; transform: translateY(6px); }
  .csn-item:hover .csn-drop, .csn-item:focus-within .csn-drop, .csn-item[data-open="true"] .csn-drop { transform: none; }
  .csn-item:not([data-open="true"]) .csn-drop { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .csn-topnav *, .csn-topnav *::before, .csn-topnav *::after { transition: none !important; } }