@layer components{.notices{position:fixed;inset-inline:0;inset-block-start:calc(env(safe-area-inset-top,0px) + var(--space-2xs));z-index:1100;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);padding-inline:var(--space-2xs);pointer-events:none;@media(min-width:56rem){inset-block-start: auto; inset-block-end: var(--space-m); flex-direction: column-reverse; padding-inline: 5rem;}& .notices__bubble{pointer-events:auto;display:flex;align-items:center;gap:var(--space-2xs)var(--space-xs);box-sizing:border-box;inline-size:min(100%,30rem);padding:var(--space-2xs)var(--space-2xs)var(--space-2xs)var(--space-xs);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:0 8px 24px rgba(15,23,42,.16);font-size:var(--size-step--1);line-height:1.4;animation:notices-bubble-in .25s ease-out;&[data-variant=pill]{inline-size:auto;padding:.35rem .85rem;border-radius:var(--radius-pill);gap:var(--space-3xs)}& svg{inline-size:1em;block-size:1em}& button:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px}}& .notices__bubble-icon{flex-shrink:0;display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:22%;background:var(--color-accent-strong);color:var(--color-on-accent);font-size:1.25rem}& .notices__bubble-text{flex:1;margin:0;& strong{display:block;font-size:var(--size-step-0)}}& .notices__bubble-action{flex-shrink:0;padding:.5rem .9rem;border:0;border-radius:var(--radius-pill);background:var(--color-accent-strong);color:var(--color-on-accent);font:inherit;font-weight:600;cursor:pointer;&:hover{opacity:.9}}& .notices__bubble-close{flex-shrink:0;display:grid;place-items:center;inline-size:2rem;block-size:2rem;padding:0;border:0;border-radius:var(--radius-pill);background:0 0;color:var(--color-text-muted);font-size:1.1rem;cursor:pointer;&:hover{background:var(--color-surface-mixed);color:var(--color-text)}}}@media(prefers-color-scheme:dark){.notices .notices__bubble{background:var(--color-surface-mixed);box-shadow:0 8px 28px rgba(0,0,0,.55)}.notices .notices__bubble-close:hover{background:var(--color-surface)}.notices .notices__bubble button:focus-visible{outline-color:var(--color-accent)}}@media(prefers-reduced-motion:reduce){.notices .notices__bubble{animation:none}}@keyframes notices-bubble-in{from{opacity:0;transform:translateY(-.5rem)}}}