.bell{position:relative}.bell-button{width:40px;height:40px;color:inherit;background:#ffffff1f;border:0;border-radius:50%;place-items:center;font-size:1rem;transition:background-color .2s;display:grid;position:relative}.bell-button:hover{background:#ffffff38}.site-header.scrolled .bell-button{background:var(--green-soft);color:var(--green)}.bell-count{top:-2px;border:2px solid var(--green);border-radius:var(--radius-pill);background:var(--gold);min-width:18px;height:18px;color:var(--green-ink);font-family:var(--font-display);animation:bell-pop .5s var(--ease-spring) both;place-items:center;padding:0 4px;font-size:.65rem;font-weight:800;line-height:1;display:grid;position:absolute;inset-inline-end:-2px}@keyframes bell-pop{0%{transform:scale(0)}}.bell-button:has(.bell-count) i{transform-origin:50% 0;animation:2.6s ease-in-out .6s 2 bell-ring}@keyframes bell-ring{0%,70%,to{transform:rotate(0)}76%{transform:rotate(16deg)}82%{transform:rotate(-14deg)}88%{transform:rotate(8deg)}}.bell-panel{top:calc(100% + 10px);z-index:60;border-radius:var(--radius-md);background:var(--surface);width:min(340px,100vw - 24px);max-height:min(70vh,460px);color:var(--ink);box-shadow:var(--shadow-lg);animation:bell-drop .25s var(--ease-out);position:absolute;inset-inline-end:0;overflow-y:auto}@media (width<=480px){.bell-panel{width:auto;position:fixed;top:64px;left:12px;right:12px}}@keyframes bell-drop{0%{opacity:0;transform:translateY(-6px)}}.bell-panel-head{border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--font-display);padding:14px 16px 10px;position:sticky;top:0}.bell-list{margin:0;padding:6px;list-style:none}.bell-list a{border-radius:var(--radius-sm);gap:12px;padding:10px;display:flex}.bell-list a:hover{background:var(--paper)}.bell-list li.is-new a{background:var(--gold-soft)}.bell-icon{background:var(--green-soft);width:36px;height:36px;color:var(--green);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.bell-text{gap:2px;min-width:0;font-size:.875rem;line-height:1.5;display:grid}.bell-text strong{font-family:var(--font-display);font-weight:600}.bell-text span{color:var(--ink-muted)}.bell-text small{color:var(--ink-muted);font-size:.75rem}.bell-empty{color:var(--ink-muted);padding:18px 16px;font-size:.9rem}