/* Reusable PenEcho public header — a slim, translucent bar shared by every public page. */
.site-header { --header-paper:rgba(255,255,255,.8); --header-ink:#1d1d1f; --header-muted:rgba(0,0,0,.72); --header-line:rgba(0,0,0,.08); --header-accent:#0071e3; --header-accent-hover:#0077ed; position:sticky; top:0; z-index:50; background:var(--header-paper); color:var(--header-ink); border-bottom:1px solid var(--header-line); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:-.01em; transition:background-color .35s ease,border-color .35s ease,color .35s ease; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing:border-box; }
.site-header-inner { width:min(1120px,calc(100% - 48px)); min-height:52px; margin:auto; display:flex; align-items:center; gap:20px; }
.site-header a { color:inherit; text-decoration:none; }
.site-header .wordmark { flex:none; font-size:20px; font-weight:400; letter-spacing:-.04em; line-height:1; color:var(--header-ink); }
.site-header .wordmark strong { font-weight:700; }
.site-header nav { display:flex; align-items:center; gap:4px; margin:auto; }
.site-header nav a,.site-header .nav-signin { display:inline-flex; align-items:center; min-height:44px; padding:6px 12px; font-size:13px; color:var(--header-muted); white-space:nowrap; border-radius:8px; transition:color .2s ease; }
.site-header nav a:hover,.site-header .nav-signin:hover { color:var(--header-ink); }
.site-header nav a[aria-current="page"] { color:var(--header-ink); font-weight:600; }
.site-header .nav-auth { display:flex; align-items:center; gap:4px; }
.site-header button { font:inherit; color:inherit; cursor:pointer; letter-spacing:inherit; }
.site-header .language-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 8px; background:none; border:0; color:var(--header-muted); font-size:13px; }
.site-header .language-button:hover { color:var(--header-ink); }
.site-header svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.site-header .nav-download { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; margin-left:6px; padding:6px 14px; color:#fff; background:var(--header-accent); border:0; border-radius:980px; font-size:13px; font-weight:500; white-space:nowrap; transition:background-color .2s ease; }
.site-header .nav-download:hover { background:var(--header-accent-hover); }
.site-header .nav-download span[aria-hidden="true"] { display:none; }
.site-header .nav-account { display:inline-flex; align-items:center; gap:8px; max-width:184px; min-height:36px; padding:3px 12px 3px 3px; border:1px solid var(--header-line); border-radius:980px; transition:background-color .2s ease; }
.site-header .nav-account:hover { background:rgba(0,0,0,.04); }
.site-header .nav-account > span[aria-hidden="true"]:last-child { display:none; }
.site-header .nav-account-avatar { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f5f5f7; color:var(--header-ink); font-size:11px; font-weight:600; }
.site-header .nav-account-copy { display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.15; }
.site-header .nav-account-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.site-header .nav-account-label { color:#86868b; font-size:10px; }
.site-header .menu-toggle { display:none; align-items:center; justify-content:center; width:36px; height:44px; padding:0; border:0; background:transparent; }
.site-header [hidden] { display:none!important; }
.site-header :focus-visible { outline:2px solid var(--header-accent); outline-offset:3px; border-radius:6px; }
/* Dark material while the bar floats over a dark chapter (set by page scripts). */
.site-header.is-over-dark { --header-paper:rgba(22,22,23,.8); --header-ink:#f5f5f7; --header-muted:rgba(255,255,255,.8); --header-line:rgba(255,255,255,.08); }
.site-header.is-over-dark .nav-account-avatar { background:rgba(255,255,255,.12); }
@media(max-width:1000px) { .site-header-inner { width:calc(100% - 40px); gap:12px; } .site-header nav { gap:0; } .site-header nav a { padding-inline:9px; } }
@media(max-width:760px) {
  .site-header-inner { min-height:48px; width:calc(100% - 32px); gap:8px; }
  .site-header .wordmark { font-size:19px; }
  .site-header .nav-auth { margin-left:auto; gap:2px; }
  .site-header .nav-signin { padding-inline:8px; }
  .site-header .nav-download { margin-left:2px; padding:5px 12px; font-size:12px; }
  .site-header .menu-toggle { display:inline-flex; }
  .site-header nav { display:none; position:absolute; top:48px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 16px; margin:0; background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--header-line); }
  .site-header.menu-open nav { display:flex; }
  .site-header nav a { justify-content:flex-start; padding:10px 4px; border-bottom:1px solid rgba(0,0,0,.06); border-radius:0; font-size:17px; color:#1d1d1f; }
  .site-header nav a:last-child { border-bottom:0; }
  .site-header.is-over-dark nav { background:rgba(22,22,23,.96); }
  .site-header.is-over-dark nav a { color:#f5f5f7; border-bottom-color:rgba(255,255,255,.1); }
  .site-header .nav-account { max-width:150px; }
}
@media(max-width:380px) { .site-header-inner { width:calc(100% - 24px); gap:4px; } .site-header .nav-signin { display:none; } .site-header .language-button svg { display:none; } .site-header .nav-account { max-width:120px; } .site-header .nav-account-avatar { display:none; } }
@media(prefers-reduced-motion:reduce) { .site-header,.site-header * { transition:none!important; } }