.jui-bell{position:relative;display:grid;place-items:center;border:0;padding:0;border-radius:50%;background:light-dark(#f4f4f9,#262626);color:light-dark(#868593,#9b9aa7);font-family:inherit;cursor:pointer;transition:transform .15s}.jui-bell:active:not(:disabled){transform:scale(.9)}.jui-bell:focus-visible{outline:2px solid light-dark(#868593,#9b9aa7);outline-offset:4px}.jui-bell:disabled{opacity:.4;cursor:not-allowed}.jui-bell-custom{position:relative}.jui-bell-badge{position:absolute;z-index:10;display:grid;place-items:center;border-radius:999px;pointer-events:none;box-sizing:border-box}.jui-bell-red{background:light-dark(#ff3b30,#ff453a)}.jui-bell-orange{background:light-dark(#ff9500,#ff9f0a)}.jui-bell-green{background:light-dark(#34c759,#30d158)}.jui-bell-blue{background:light-dark(#007aff,#0a84ff)}.jui-bell-violet{background:light-dark(#af52de,#bf5af2)}.jui-bell-number{display:flex;font-weight:600;line-height:1;letter-spacing:-.025em;color:#fff}.jui-bell-digit{position:relative;display:inline-block;height:1em;overflow:hidden}.jui-bell-digit-track{position:absolute;inset:0}.jui-bell-digit-tile{position:absolute;left:0;right:0;display:flex;justify-content:center}.jui-bell-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion:reduce){.jui-bell{transition:none}.jui-bell:active:not(:disabled){transform:none}}.demo-notification-bell{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:400px;padding-bottom:60px}.demo-bell-center{display:flex;flex-direction:column;align-items:center;gap:40px}.demo-bell-steps{display:flex;gap:8px}.demo-bell-steps button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:light-dark(#f4f4f9,#262626);color:light-dark(#868593,#9b9aa7);transition:transform .15s}.demo-bell-steps button:active:not(:disabled){transform:scale(.9)}.demo-bell-steps button:disabled{opacity:.4}.demo-bell-palette{position:absolute;bottom:8px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--soft);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px #00000012}.demo-bell-grip{display:flex;margin-left:-4px;color:var(--muted);cursor:grab;touch-action:none}.demo-bell-grip:active{cursor:grabbing}.demo-bell-palette button{width:28px;height:28px;padding:0;border:0;border-radius:10px;box-shadow:0 2px 5px #00000018}.demo-bell-palette button[aria-pressed=true]{outline:2px solid var(--muted);outline-offset:3px}.gallery-notification-bell .gallery-preview{height:320px}.is-compact .demo-notification-bell{height:260px}@media (prefers-reduced-motion:reduce){.demo-bell-steps button{transition:none}.demo-bell-steps button:active:not(:disabled){transform:none}}