@layer blocks {
  .notice {
    display: inline-flex;
    align-items: center;
    gap: var(--notice-gap);
    font-family: var(--notice-font-family);
    font-size: var(--notice-font-size);
    letter-spacing: var(--notice-letter-spacing);
    padding: var(--notice-padding);
    border-radius: var(--notice-border-radius);
    border: var(--border-width-thin) var(--border-style) var(--notice-border-color);
    background: var(--notice-background-color);
    color: var(--notice-color);
  }

  /* ── Variants ───────────────────────────────────────────────── */

  .notice[data-variant="beta"]::before {
    content: "\25CF";
    font-size: 0.5rem;
    color: var(--brand-light);
    animation: notice-pulse 2s ease-in-out infinite;
  }

  .notice[data-variant="warning"] {
    --notice-background-color: var(--warn-tint);
    --notice-border-color: var(--warn);
    --notice-color: var(--warn);
  }

  .notice[data-variant="success"] {
    --notice-background-color: var(--brand-tint);
    --notice-border-color: var(--brand-light);
    --notice-color: var(--brand-light);
  }

  @keyframes notice-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }

  .notifications {
    position: fixed;
    top: 0;
    right: 10px;
  }
}