:where(.sk-banner,.sk-toasts,.sk-ov,.sk-inline){
  --sakura:var(--accent); --sakura-d:var(--accent-deep);
  --err:var(--accent-deep); --err-bg:color-mix(in srgb,var(--plum) 92%,transparent);
   --warn-bg:color-mix(in srgb,var(--surface-2) 92%,transparent);
  --info:var(--mist); --info-bg:color-mix(in srgb,var(--plum) 92%,transparent);
   --ok-bg:color-mix(in srgb,var(--sky-day-top) 92%,transparent);
  --card:color-mix(in srgb,var(--sky-day-top) 94%,transparent);
   --muted:var(--mist);
font-family:var(--font-ui);letter-spacing:normal;line-height:1.5;box-sizing:border-box}
/* ---------- 1. Site-wide banner ---------- */
.sk-banner{position:fixed;left:0;right:0;top:calc(72px + env(safe-area-inset-top,0px));z-index:var(--z-toast-front);width:min(760px,calc(100% - 32px));margin-inline:auto;visibility:hidden;pointer-events:none;
  transform:translateY(-110%);transition:transform .55s cubic-bezier(.2,1.2,.3,1)}
.sk-banner.show{transform:none;visibility:visible;pointer-events:auto}
.sk-banner-in{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:10px 14px;
  border-radius:var(--radius-md);border:1px solid var(--c);background:var(--bg);color:var(--ink);backdrop-filter:blur(10px);
  box-shadow:0 8px 28px color-mix(in srgb,var(--black) 35%,transparent),0 0 0 0 var(--c);animation:sk-glow 2.4s ease-in-out infinite;position:relative;overflow:hidden}
.sk-banner[data-type=error]{--c:var(--err);--bg:var(--err-bg)}
.sk-banner[data-type=warn]{--c:var(--warn);--bg:var(--warn-bg)}
.sk-banner[data-type=offline]{--c:var(--info);--bg:var(--info-bg)}
.sk-banner[data-type=ok]{--c:var(--ok);--bg:var(--ok-bg);animation:none}
.sk-banner-in::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--white) 12%,transparent) 50%,transparent 70%);
  transform:translateX(-100%);animation:sk-sheen 3.6s ease-in-out infinite}
.sk-ico{flex:none;width:34px;height:34px;color:var(--c)}
.sk-banner.show[data-type=error] .sk-ico{animation:sk-wobble .7s .3s}
.sk-msg{flex:1;min-width:0;line-height:1.35}
.sk-msg b{display:block;font-size:var(--text-14)}.sk-msg span{font-size:var(--text-12);color:var(--muted)}
.sk-x{flex:none;background:none;border:0;color:var(--muted);font-size:var(--text-20);cursor:pointer;line-height:1;padding:4px 6px;border-radius:var(--radius-sm);transition:transform .2s,color .2s}
.sk-x:hover{color:var(--ink);transform:rotate(90deg)}
.sk-dots{display:none;gap:4px;align-items:center}
.sk-banner[data-type=offline] .sk-dots{display:flex}
.sk-dots i{width:7px;height:9px;background:var(--sakura);border-radius:80% 0 80% 0;animation:sk-hop 1.2s infinite}
.sk-dots i:nth-child(2){animation-delay:.15s}.sk-dots i:nth-child(3){animation-delay:.3s}
@keyframes sk-glow{50%{box-shadow:0 8px 28px color-mix(in srgb,var(--black) 35%,transparent),0 0 18px 2px var(--c)}}
@keyframes sk-sheen{60%,100%{transform:translateX(100%)}}
@keyframes sk-wobble{20%{transform:rotate(-16deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@keyframes sk-hop{0%,60%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(25deg)}}

/* ---------- 2. Toast ---------- */
.sk-toasts{position:fixed;left:0;right:0;top:calc(84px + env(safe-area-inset-top,0px) + var(--notice-banner-height,0px));margin-inline:auto;z-index:var(--z-toast-front);pointer-events:none;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px))}
#toasts .sk-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;gap:10px;align-items:flex-start;padding:12px 12px 14px;border-radius:var(--radius-md);
  background:var(--bg);border:1px solid var(--c);box-shadow:0 8px 24px color-mix(in srgb,var(--black) 35%,transparent);animation:sk-tin .5s cubic-bezier(.2,1.3,.3,1) both}
#toasts .sk-toast[data-type=error]{--c:var(--err);--bg:var(--err-bg);animation:sk-tin .5s cubic-bezier(.2,1.3,.3,1) both,sk-shake .45s .35s}
#toasts .sk-toast[data-type=warn]{--c:var(--warn);--bg:var(--warn-bg)}
#toasts .sk-toast[data-type=ok]{--c:var(--ok);--bg:var(--ok-bg)}
#toasts .sk-toast .sk-ico{width:26px;height:26px}
#toasts .sk-toast.out{animation:sk-tout .35s ease-in forwards}
#toasts .sk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform-origin:left;animation:sk-bar var(--t,5s) linear forwards}
#toasts .sk-toast:hover .sk-bar{animation-play-state:paused}
@keyframes sk-tin{from{opacity:0;transform:translateY(-10px) scale(.9)}}
@keyframes sk-tout{to{opacity:0;transform:translateY(-10px) scale(.9)}}
@keyframes sk-bar{to{transform:scaleX(0)}}
@keyframes sk-shake{25%{translate:-5px 0}50%{translate:5px 0}75%{translate:-3px 0}}

/* ---------- 3. Full-page overlay ---------- */
.sk-ov{border:0;margin:0;max-width:none;max-height:none;width:100%;height:100dvh;box-sizing:border-box;color:var(--ink);position:fixed;inset:0;z-index:var(--z-toast-urgent);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--sky-dark-mid) 90%,transparent),color-mix(in srgb,var(--surface-1) 96%,transparent));transition:opacity .5s,visibility .5s}
.sk-ov.show{opacity:1;visibility:visible}
.sk-moon{position:absolute;top:9%;right:14%;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--moon),var(--gold));box-shadow:0 0 50px 12px color-mix(in srgb,var(--gold-1) 35%,transparent);animation:sk-moon 6s ease-in-out infinite}
@keyframes sk-moon{50%{transform:translateY(10px);box-shadow:0 0 70px 18px color-mix(in srgb,var(--gold-1) 45%,transparent)}}
.sk-card{position:relative;z-index:var(--z-content-raised);max-width:400px;text-align:center;padding:30px 26px;border-radius:var(--radius-lg);background:var(--card);
  border:1px solid var(--line);box-shadow:0 20px 60px color-mix(in srgb,var(--black) 50%,transparent);transform:translateY(30px) scale(.96);transition:transform .6s cubic-bezier(.2,1.2,.3,1) .1s}
.sk-ov.show .sk-card{transform:none}
.sk-card .sk-ico{width:64px;height:64px;color:var(--err);margin-bottom:6px;animation:sk-float 3.2s ease-in-out infinite}
.sk-card h2{margin:6px 0 4px;font-size:var(--text-20)}.sk-card p{margin:0 0 18px;color:var(--muted);font-size:var(--text-14);line-height:1.5}
.sk-card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sk-card .sk-btn.main{background:linear-gradient(135deg,var(--sakura),var(--sakura-d));color:var(--surface-2);border:0;font-weight:700}
.sk-code{display:inline-block;font:var(--text-12) ui-monospace,monospace;color:var(--muted);margin-top:14px}
@keyframes sk-float{50%{transform:translateY(-6px) rotate(-4deg)}}
.sk-ov .petal{position:absolute;top:-30px;width:12px;height:15px;background:linear-gradient(135deg,var(--petal),var(--accent));border-radius:80% 0 80% 0;opacity:.85;
  animation:sk-fall linear infinite}
@keyframes sk-fall{to{transform:translate(var(--dx),110vh) rotate(540deg)}}

/* ---------- 4. Third-party service bits ---------- */
.sk-tag{display:inline-block;font-style:normal;font-size:var(--text-12);letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;margin-bottom:4px;border-radius:var(--radius-pill);color:var(--c,var(--sakura));border:1px solid var(--c,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sk-inline{--c:var(--warn);--bg:var(--warn-bg);display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius-md);border:1px dashed var(--c);background:var(--bg);animation:sk-tin .5s both}
.sk-inline .sk-ico{animation:sk-float 3.2s ease-in-out infinite}
.sk-inline.loading .sk-dots{display:flex}.sk-inline.loading .sk-btn{display:none}
@media (max-width:480px){.sk-banner-in{margin:8px;gap:9px}.sk-banner .sk-btn{padding:6px 12px}.sk-moon{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){:is(.sk-banner,.sk-toasts,.sk-ov,.sk-inline),:is(.sk-banner,.sk-toasts,.sk-ov,.sk-inline) *,:is(.sk-banner,.sk-toasts,.sk-ov,.sk-inline) *::before,:is(.sk-banner,.sk-toasts,.sk-ov,.sk-inline) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sk-ov .petal{display:none}}

.sk-btn{font:inherit;font-size:var(--text-14);cursor:pointer;color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;transition:transform .15s,background .2s;min-height:44px}
.sk-btn:hover{background:color-mix(in srgb,var(--accent) 24%,transparent);transform:translateY(-1px)}.sk-btn:active{transform:scale(.96)}
.sk-banner-in::after{pointer-events:none}.sk-banner-in{box-sizing:border-box}.sk-banner .sk-msg,#toasts .sk-toast .sk-msg{overflow-wrap:anywhere}.sk-x{min-width:32px;min-height:32px;display:grid;place-items:center;padding:0;line-height:1}#toasts .sk-toast:focus-within .sk-bar{animation-play-state:paused}
.sk-notice-preview{margin-block:16px}.site-notice-admin form{display:grid;gap:14px}.site-notice-admin label{display:grid;gap:6px}.site-notice-admin .actions{display:flex;gap:10px;flex-wrap:wrap}.site-notice-admin article{padding-block:14px;border-top:1px solid var(--line)}
@media(max-width:480px){.sk-banner-in{flex-wrap:wrap;margin:0;gap:8px}.sk-banner .sk-msg{flex-basis:calc(100% - 90px)}.sk-banner .sk-btn{margin-left:46px}.sk-banner .sk-x{position:absolute;right:4px;top:4px}.sk-inline{flex-wrap:wrap}.sk-x{min-width:44px;min-height:44px}}

.sk-banner[data-type=info],#toasts .sk-toast[data-type=info]{--c:var(--info);--bg:var(--info-bg)}

.sk-banner [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){#toasts .sk-bar{animation:none!important}}

.sk-banner:not(.show) *,.sk-ov:not(.show) *{animation-play-state:paused!important}