.dsp-notification {
  --dsp-bg:#fff;
  --dsp-text:#111827;
  --dsp-time:#6b7280;
  --dsp-accent:#4f46e5;
  --dsp-border:#e5e7eb;
  --dsp-border-width:1px;
  --dsp-radius:14px;
  --dsp-width:320px;
  --dsp-mobile-width:calc(100vw - 30px);
  --dsp-padding:14px 16px;
  --dsp-text-size:16px;
  --dsp-time-size:12px;
  --dsp-icon-size:18px;
  position:fixed;
  display:flex;
  align-items:center;
  gap:12px;
  width:var(--dsp-width);
  max-width:calc(100vw - 30px);
  padding:var(--dsp-padding);
  box-sizing:border-box;
  background:var(--dsp-bg);
  border:var(--dsp-border-width) solid var(--dsp-border);
  border-radius:var(--dsp-radius);
  z-index:var(--dsp-z);
  color:var(--dsp-text);
  font-family:inherit;
  visibility:hidden;
  opacity:0;
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none
}
.dsp-notification[hidden] {
  display:none
}
.dsp-notification.dsp-position-bottom-left {
  bottom:15px;
  left:15px
}
.dsp-notification.dsp-position-bottom-right {
  bottom:15px;
  right:15px
}
.dsp-notification.dsp-position-top-left {
  top:15px;
  left:15px
}
.dsp-notification.dsp-position-top-right {
  top:15px;
  right:15px
}
.dsp-notification.dsp-has-shadow {
  box-shadow:0 12px 40px rgba(15,23,42,.14)
}
.dsp-notification.dsp-animation-slide {
  transform:translateY(20px)
}
.dsp-notification.dsp-animation-scale {
  transform:scale(.94)
}
.dsp-notification.dsp-animation-fade {
  transform:none
}
.dsp-notification.dsp-is-visible {
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:auto
}
.dsp-media {
  display:grid;
  place-items:center;
  flex:none
}
.dsp-icon {
  display:grid;
  place-items:center;
  width:calc(var(--dsp-icon-size) + 18px);
  height:calc(var(--dsp-icon-size) + 18px);
  border-radius:50%;
  background:color-mix(in srgb,var(--dsp-accent) 12%,transparent);
  color:var(--dsp-accent)
}
.dsp-icon[hidden],.dsp-media[hidden],.dsp-image[hidden] {
  display:none
}
.dsp-icon svg {
  width:var(--dsp-icon-size);
  height:var(--dsp-icon-size);
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}
.dsp-image {
  display:block;
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  background:#eef2ff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dsp-accent) 12%,transparent)
}
.dsp-content {
  min-width:0;
  flex:1;
  padding-right:14px
}
.dsp-name {
  display:none;
  margin-bottom:2px;
  font-size:var(--dsp-text-size);
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere
}
.dsp-text {
  font-size:var(--dsp-text-size);
  font-weight:var(--dsp-text-weight);
  line-height:var(--dsp-text-line);
  overflow-wrap:anywhere
}
.dsp-time {
  margin-top:3px;
  color:var(--dsp-time);
  font-size:var(--dsp-time-size);
  font-weight:var(--dsp-time-weight);
  line-height:var(--dsp-time-line)
}
.dsp-layout-detailed .dsp-name {
  display:block
}
.dsp-layout-detailed .dsp-text {
  font-size:calc(var(--dsp-text-size) - 1px);
  font-weight:400
}
#dsp-notification .dsp-close {
  all:unset;
  box-sizing:border-box;
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  border-radius:50%;
  color:var(--dsp-time);
  cursor:pointer;
  opacity:.72;
  transition:background-color .18s ease,color .18s ease,opacity .18s ease
}
#dsp-notification .dsp-close svg {
  display:block;
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round
}
#dsp-notification .dsp-close:hover {
  background:color-mix(in srgb,var(--dsp-text) 8%,transparent);
  color:var(--dsp-text);
  opacity:1
}
#dsp-notification .dsp-close:focus-visible {
  outline:2px solid var(--dsp-accent);
  outline-offset:2px
}
@media(max-width:600px) {
  .dsp-notification {
    width:var(--dsp-mobile-width);
    max-width:calc(100vw - 30px)
  }
  .dsp-text,.dsp-name {
    font-size:var(--dsp-mobile-text)
  }
  .dsp-layout-detailed .dsp-text {
    font-size:calc(var(--dsp-mobile-text) - 1px)
  }
  .dsp-time {
    font-size:var(--dsp-mobile-time)
  }
  .dsp-image {
    width:44px;
    height:44px
  }
}
@media(prefers-reduced-motion:reduce) {
  .dsp-notification {
    transition-duration:.01ms
  }
}