.sysnotes{--notice-top:var(--topbar-h,3.1rem);position:fixed;inset-block-start:var(--notice-top);inset-inline:0;z-index:var(--z-alert,400);display:flex;justify-content:center;padding-inline:var(--space-4,1rem);pointer-events:none}.sysnote{display:flex;align-items:center;gap:var(--space-3,.75rem);inline-size:min(40rem,100%);margin-block-start:var(--space-3,.75rem);padding:var(--space-3,.75rem) var(--space-3,.75rem) var(--space-3,.75rem) var(--space-4,1rem);border-radius:var(--radius-md,.625rem);box-shadow:0 12px 32px rgb(0 0 0/.35),0 2px 6px rgb(0 0 0/.25);color:#fff;font-size:var(--text-sm,.875rem);font-weight:500;line-height:1.4;opacity:0;transform:translateY(-.75rem);transition:opacity var(--dur,180ms) var(--ease,ease),transform var(--dur-slow,260ms) var(--ease,ease);pointer-events:auto}.sysnote[hidden]{display:none}.sysnote.is-on{opacity:1;transform:none}.sysnote.is-ok{background:color-mix(in oklab,var(--ok,#4cc38a) 62%,#000)}.sysnote.is-error{background:color-mix(in oklab,var(--danger,#e5484d) 78%,#000)}.sysnote-icon{flex:none;font-size:1.1rem}.sysnote-text{flex:1;min-inline-size:0;margin:0;overflow-wrap:anywhere}.sysnote-close{display:grid;flex:none;place-items:center;inline-size:1.75rem;block-size:1.75rem;border:0;border-radius:50%;background:transparent;color:rgb(255 255 255/.75);cursor:pointer}.sysnote-close:hover,.sysnote-close:focus-visible{background:rgb(255 255 255/.16);color:#fff}.sysnote-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@media(prefers-reduced-motion:reduce){.sysnote{transform:none;transition:opacity var(--dur,180ms) linear}}