/* Header island additions (2026-10-01, Raymond): the 我的 chip and the live pill. Same glass as the island and
   its nav links; gold text like the current nav item. The chip sits where the old tagline was (removed 2026-10-01). */
.site-header .header-me{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:40px;padding:4px 14px 4px 5px;border:1px solid #ffefd42e;border-radius:999px;background:linear-gradient(135deg,#ffffff1f,#ffffff08);box-shadow:inset 0 1px 0 #ffffff1c;color:#cbd3d9;font:14px/1.6 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.site-header .header-me:hover,.site-header .header-me:focus-visible,.site-header .header-me[aria-current]{color:var(--gold);border-color:#e2c39866;background:linear-gradient(135deg,#ffffff29,#ffffff0c);box-shadow:inset 0 1px 0 #fff2,0 3px 12px #1e120e14}
.site-header .header-me:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.header-me-face{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;overflow:hidden;border-radius:50%;border:1px solid #e2c39880;background:#2a2320b3;color:var(--gold)}
.header-me-face img{width:100%;height:100%;object-fit:cover;display:block}
.site-header .header-end{display:flex;align-items:center;gap:16px;flex-shrink:0}
@media(max-width:1200px) and (min-width:761px){.site-header .header-end{grid-column:2;grid-row:1;justify-self:end}}
@media(max-width:760px){
 .site-header .header-end{display:contents}
 .site-header .header-me{position:absolute;top:13px;right:13px;min-height:0;padding:3px;gap:0}
 .site-header .header-me-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .header-me-face{width:32px;height:32px}
}

.site-header .live-pill{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;max-width:min(560px,calc(100vw - 48px));min-height:32px;padding:4px 16px 4px 12px;border:1px solid #ffffff40;border-radius:999px;background:#2a23209c;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 6px 18px #1e120e33;color:var(--ink);font:13px/1.5 var(--sans);text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background-color .2s}
.site-header .live-pill[hidden]{display:none}
.site-header .live-pill:hover,.site-header .live-pill:focus-visible{border-color:#e2c3989e;color:var(--gold);background-color:#3a2d289e}
.site-header .live-pill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.live-pill i{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#f0647a}
.live-pill i:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #f0647a;opacity:0;animation:live-ping 1.8s ease-out infinite}
@keyframes live-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.live-pill-main{color:var(--gold);letter-spacing:.06em}
.live-pill-title{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:760px){
 .site-header .live-pill{top:13px;left:13px;transform:none;min-height:0;padding:6px 10px;gap:6px;box-shadow:none;font-size:12px}
 .live-pill-title,.live-pill-who{display:none}
 .live-pill-main{letter-spacing:0}
}
@media(max-width:380px){
 .site-header .live-pill{width:32px;height:32px;padding:0;justify-content:center}
 .live-pill-main{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){.site-header .header-me,.site-header .live-pill{transition:none}.live-pill i:after{animation:none}}
.motion-paused .site-header .header-me,.motion-paused .site-header .live-pill{transition:none}
.motion-paused .live-pill i:after{animation:none}