:root{
  --wt-nav-bg: rgba(0,0,0,.74);
  --wt-nav-border: rgba(255,255,255,.14);
  --wt-nav-link-color: rgba(255,255,255,.86);
  --wt-nav-link-active: #ffffff;
  --wt-nav-link-hover-bg: rgba(255,255,255,.08);

  --wt-nav-menu-bg: rgba(5,6,10,.72);
  --wt-nav-menu-border: rgba(255,255,255,.16);
}

@media (prefers-color-scheme: dark){
  :root{
    --wt-nav-bg: rgba(0,0,0,.74);
    --wt-nav-border: rgba(255,255,255,.14);
    --wt-nav-link-color: rgba(255,255,255,.86);
    --wt-nav-link-active: #ffffff;
    --wt-nav-link-hover-bg: rgba(255,255,255,.08);

    --wt-nav-menu-bg: rgba(5,6,10,.72);
    --wt-nav-menu-border: rgba(255,255,255,.16);
  }
}

/* ===== Nav base ===== */
.nv{
  position: fixed;
  left:0; right:0; top:0;
  z-index: 999;
  color:#fff;
  background: var(--wt-nav-bg);
  border-bottom: 1px solid var(--wt-nav-border);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}

/* 默认 */
body:not(.is-home):not(.page-has-navspace){
  padding-top: var(--wt-nav-height, 72px);
}

/* navspace 页面 */
body.page-has-navspace{
  padding-top: 0;
}

body.page-has-navspace .nv{
  position: sticky;
  top: 0;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== Behavior tweaks ===== */
body:not(.is-home) .nv{
  --wt-nav-menu-bg: rgba(5,6,10,.82);
}

.nv.is-scrolled{
  --wt-nav-bg: rgba(0,0,0,.84);
  --wt-nav-border: rgba(255,255,255,.16);
  --wt-nav-menu-bg: rgba(5,6,10,.82);
}

/* ===== Layout ===== */
.nv-bd{
  width: calc(100% - 56px);
  max-width: none;
  margin: 0 auto;
}
@media (max-width: 720px){
  .nv-bd{ width: calc(100% - 32px); }
}

/* ===== Brand ===== */
.nv-brand{ display:flex; flex-direction: column; line-height: 1.05; }
.nv-title{ font-size: 16px; }
.nv-subtitle{
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255,255,255,.76);
}

/* ===== Menus ===== */
.nv-more-menu{
  background: var(--wt-nav-menu-bg);
  border-color: var(--wt-nav-menu-border);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nv-mb{
  background: var(--wt-nav-menu-bg);
  border-bottom-color: var(--wt-nav-border);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nv.is-menu-open,
.nv:has(.nv-more.open),
.nv:has(.nv-mb.show){
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 720px){
  .nv-mb{
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* perf-low */
html.perf-low .nv{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,.92) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{ --wt-nav-menu-bg: rgba(5,6,10,.92); }
}