.site-notifications{
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  display:grid;
  gap:8px;
  width:max-content;
  max-width:min(420px, calc(100% - 28px));
  pointer-events:none;
}
.site-notification{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:10px 12px;
  border:1px solid #797879;
  border-radius:8px;
  background:#232124;
  color:#f4eee7;
  box-shadow:0 5px 22px #0006;
  font:500 14px/1.4 "Avenir Next","Segoe UI",sans-serif;
  text-align:left;
  pointer-events:auto;
}
.site-notification[data-tone="success"]{border-color:#73c891;color:#d7ffea}
.site-notification[data-tone="error"]{border-color:#ed887d;color:#ffe1de}
.site-notification[data-tone="warning"]{border-color:#dfb567;color:#fff0cf}
.site-notification__message{min-width:0;overflow-wrap:anywhere}
.site-notification__close{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:inherit;
  font:400 22px/1 sans-serif;
  cursor:pointer;
}
.site-notification__close:hover{background:#ffffff18}
.site-notification__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}