#notifications-open{position:relative;flex:none;width:42px;min-height:42px;padding:0;justify-content:center}
#notifications-open[hidden],#notifications-badge[hidden]{display:none!important}
#notifications-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border:2px solid #e8edf3;border-radius:12px;background:#365d84;color:#fff;font:600 10px/13px system-ui;white-space:nowrap;font-variant-numeric:tabular-nums}
#notifications{position:fixed;inset:84px 20px 20px auto;margin:0;width:min(440px,calc(100vw - 32px));max-width:none;height:auto;max-height:none;padding:0;border:1px solid #ccd7e3;border-radius:16px;background:#f7f9fc;color:#243248;box-shadow:0 16px 60px #15283c2b;font:14px/1.6 system-ui,-apple-system,'PingFang SC',sans-serif;overflow:hidden}
#notifications[open]{display:flex;flex-direction:column}
#notifications::backdrop{background:#14253936}
.notification-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 16px}
#notifications h2{font:600 23px/1.35 system-ui,-apple-system,'PingFang SC',sans-serif;margin:0 0 5px}
#notifications-summary{font-size:12px;color:#61738b}
#notifications-close{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:7px;border:0;border-radius:8px;background:transparent;color:#536780}
#notifications-close:hover{background:#e6edf5}
#notifications-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.notification-toolbar{display:flex;align-items:center;gap:8px;padding:0 22px 14px;border-bottom:1px solid #dce4ed}
#notifications .notification-toolbar button{border:0;background:transparent;color:#536780;border-radius:7px;padding:6px 11px;font-size:12px;min-height:32px}
#notifications .notification-toolbar button[aria-pressed=true]{background:#e0eaf5;color:#24476a;font-weight:600}
#notifications #notifications-read-all{margin-left:auto;padding-right:0}
#notifications button:disabled{cursor:default;opacity:.5}
#notification-list{overflow-y:auto;min-height:0;flex:1;padding:0 12px;scrollbar-width:thin;scrollbar-color:#b6c7d9 transparent}
#notifications .notification-item{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;padding:18px 10px;margin:0;border:0;border-bottom:1px solid #e0e7ef;border-radius:0;background:transparent;color:#243248;line-height:1.6}
#notifications .notification-item:hover{background:#eaf0f7;border-radius:8px}
.notification-icon{display:flex;justify-content:center;align-items:center;position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:#e7eef5;color:#58738f}
.notification-icon svg{width:18px;height:18px}
.notification-item.is-unread .notification-icon::after{content:'';position:absolute;right:-2px;top:-2px;width:7px;height:7px;border:2px solid #f7f9fc;border-radius:50%;background:#365d84;box-sizing:content-box}
.notification-copy{display:block;min-width:0;flex:1}
.notification-title{display:block;font-size:13px;overflow-wrap:anywhere}
.notification-title strong{font-weight:600}
.notification-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:#586c84;overflow-wrap:anywhere;white-space:pre-wrap;margin:6px 0}
.notification-meta{display:block;margin-top:6px;font-size:11px;color:#687b93}
.notification-empty{padding:46px 20px;text-align:center;font-size:13px;color:#61738b}
.notification-footer{flex:none;padding:10px 22px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#notification-status{font-size:12px;color:#61738b;flex:1 1 100%;margin:0}
#notification-status:empty{display:none}
#notifications-more,#notifications-retry{border:0;border-radius:6px;padding:6px 10px;background:transparent;color:#3d6186;font-size:12px}
#notifications-more[hidden]{display:none}
#notifications-retry{margin-left:auto}
#guestbook-list article.notification-target,#guestbook-list .gb-author-reply.notification-target,#music-box .notification-target{border-radius:10px;background:#e0ecf7;transition:background .3s}
#notifications button:focus-visible{outline:1px solid var(--focus-ring,#717977);outline-offset:-1px}
.phone-landscape #notifications-open{width:30px;height:30px;min-height:30px;padding:0}
.phone-landscape #notifications-badge{top:-3px;right:-4px}
@media(max-width:600px){#notifications{inset:12px 12px 12px;width:calc(100vw - 24px)}.notification-heading{padding:18px 18px 12px}.notification-toolbar{padding:0 18px 12px}.notification-footer{padding:10px 18px 12px}}
@media(prefers-reduced-motion:reduce){.notification-target{transition:none!important}}
/* Match the site's landscape canvas when a phone is held upright. */
.phone-landscape body.disc-layout #notifications{inset:12px 12px auto auto;width:min(440px,calc(var(--site-width) - 24px));height:calc(var(--site-height) - 24px);max-width:none;max-height:none;overflow:hidden}
.phone-rotated body.disc-layout #notifications{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.phone-landscape #notifications .notification-heading{padding:12px 18px 8px}
.phone-landscape #notifications .notification-toolbar{padding:0 18px 8px}
.phone-landscape #notifications .notification-footer{padding:6px 18px 8px}