.bells{background:var(--ui);touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.bells-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.bells-back,.bells-bar button{cursor:pointer;color:#f7f1ff;background:0 0;border:0;border-radius:999px;place-items:center;width:44px;height:44px;display:grid}.bells-back{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(10px);background:#0a081457;transition:opacity .6s;position:absolute}.bells-bar{left:50%;bottom:max(18px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);background:#0a081461;border-radius:999px;align-items:center;gap:6px;padding:6px;transition:opacity .6s;display:flex;position:absolute;transform:translate(-50%)}.bells-bar button[aria-pressed=true]{background:#f7f1ff2e}.bells-bar button:hover{background:#f7f1ff1f}.bells-bar .swatches{gap:2px;padding:0 4px;display:flex}.bells-bar .swatch{border:2px solid #ffffff40;width:34px;height:34px;margin:5px 0}.bells-bar .swatch[aria-pressed=true]{border-color:#f7f1ff;box-shadow:0 0 0 2px #00000040}.bells.is-quiet .bells-bar,.bells.is-quiet .bells-back{opacity:.34}.bells.is-quiet .bells-bar:hover,.bells.is-quiet .bells-back:hover,.bells.is-quiet .bells-bar:focus-within,.bells.is-quiet .bells-back:focus-visible{opacity:1}.bells-hint{left:0;right:0;bottom:calc(max(18px, env(safe-area-inset-bottom)) + 66px);text-align:center;pointer-events:none;color:#faf4ffdb;text-shadow:0 1px 10px #0009;margin:0;font-size:19px;animation:3.6s ease-in-out infinite breathe;position:absolute}@media (prefers-reduced-motion:reduce){.bells-hint{animation:none}}.bells-fail{max-width:520px;margin:0 auto;padding:48px 24px}.bells-fail a{color:#e8c3ff}@media (max-width:380px){.bells-bar{gap:2px}.bells-bar .swatch{width:28px;height:28px}}