/* 自包含顶部导航（参考 New API 风格，无外部依赖、无闪烁） */
body{--np-bg:#ffffff;--np-fg:#1a1a1a;--np-muted:#5b5b5b;--np-mborder:#e2e2e0;--np-hover:#efefed;--np-divider:#e2e2e0}
html.dark body{--np-bg:#2b2b2b;--np-fg:#f2f2f2;--np-muted:#cfcfcf;--np-mborder:#474747;--np-hover:#3a3a3a;--np-divider:#3f3f3f}

.np-header{position:fixed;inset:0 0 auto 0;z-index:50;pointer-events:none}
.np-shell{pointer-events:auto;margin:0 auto;transition:max-width .7s cubic-bezier(.16,1,.3,1),padding .7s cubic-bezier(.16,1,.3,1)}
.np-shell:not(.np-hide){max-width:80rem;padding:0 1.5rem}
.np-shell.np-hide{max-width:52rem;padding:.75rem .75rem 0}
.np-bar{display:flex;align-items:center;justify-content:space-between;transition:height .7s cubic-bezier(.16,1,.3,1),padding .7s cubic-bezier(.16,1,.3,1),background-color .7s,box-shadow .7s;border-radius:1rem}
.np-shell:not(.np-hide) .np-bar{height:4rem;padding:0 .5rem;background:transparent;box-shadow:none}
.np-shell.np-hide .np-bar{height:3rem;padding:0 .5rem 0 1rem;background:rgba(255,255,255,.68);box-shadow:0 2px 18px -8px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.55);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
html.dark .np-shell.np-hide .np-bar{background:rgba(43,43,43,.68);box-shadow:0 2px 18px -8px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08)}

.np-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--np-fg);flex-shrink:0}
.np-logo img{width:1.75rem;height:1.75rem;border-radius:.5rem;object-fit:contain;transition:transform .3s}
.np-logo:hover img{transform:scale(1.05)}
.np-logo span{font-size:.875rem;font-weight:600;letter-spacing:-.02em}

.np-links{display:none;align-items:center;gap:2px}
@media(min-width:640px){.np-links{display:flex}}
.np-link{padding:.375rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--np-muted);text-decoration:none;transition:color .2s,background .2s}
@media(hover:hover){.np-link:hover{color:var(--np-fg);background:var(--np-hover)}}
.np-link.on{color:var(--np-fg)}
.np-sep{width:1px;height:1rem;background:var(--np-divider);margin:0 .5rem}
.np-sep.slim{margin:0 .25rem}

.np-theme{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;color:var(--np-muted);border-radius:.5rem;cursor:pointer;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.np-theme:hover{color:var(--np-fg);background:var(--np-hover)}}
.np-theme:focus{outline:none}
.np-theme svg{width:1.05rem;height:1.05rem}
.np-theme .np-moon{display:none}
html.dark .np-theme .np-sun{display:none}
html.dark .np-theme .np-moon{display:block}

.np-burger{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;color:var(--np-muted);border-radius:.5rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.np-burger:hover{color:var(--np-fg);background:var(--np-hover)}}
.np-burger:focus{outline:none}
.np-burger .ic{position:relative;width:1rem;height:1rem}
.np-burger .ic span{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:all .3s}
.np-burger .ic span:nth-child(1){top:3px}
.np-burger .ic span:nth-child(2){top:7px}
.np-burger .ic span:nth-child(3){top:11px}
.np-burger.open .ic span:nth-child(1){top:7px;transform:rotate(45deg)}
.np-burger.open .ic span:nth-child(2){opacity:0;transform:scaleX(0)}
.np-burger.open .ic span:nth-child(3){top:7px;transform:rotate(-45deg)}
.np-mobile{display:none}

.np-menu{position:fixed;top:4rem;left:0;right:0;z-index:60;background:var(--np-bg);border-bottom:1px solid var(--np-mborder);box-shadow:0 16px 40px rgba(0,0,0,.16);padding:.6rem .75rem .9rem;transition:opacity .22s,transform .22s,visibility .22s;opacity:0;visibility:hidden;transform:translateY(-10px)}
.np-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
@media(min-width:640px){.np-menu{display:none}}
.np-menu nav{display:flex;flex-direction:column;gap:2px}
.np-menu a{padding:.7rem .9rem;border-radius:.6rem;font-size:.95rem;font-weight:500;color:var(--np-muted);text-decoration:none;transition:color .2s,background .2s}
.np-menu a.on{color:var(--np-fg);background:var(--np-hover)}
@media(hover:hover){.np-menu a:hover{color:var(--np-fg);background:var(--np-hover)}}

@media(max-width:640px){.np-mobile{display:flex;align-items:center;gap:.5rem}}