.dream-alert {
  > .heading {
    display: flex;
  }
  > .heading {
    align-items: center;
  }
  > .heading {
    gap: 0.25rem;
  }
  > .heading {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  > .heading {
    font-weight: 500;
  }
  ion-icon {
    font-size: 1rem;
  }
  &.note {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(37 99 235 / var(--tw-border-opacity));
  }
  &.note:where(.dark, .dark *) {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(59 130 246 / var(--tw-border-opacity));
  }
  &.note {
    .heading {
      --tw-text-opacity: 1;
      color: rgb(37 99 235 / var(--tw-text-opacity));
    }
    .heading:where(.dark, .dark *) {
      --tw-text-opacity: 1;
      color: rgb(59 130 246 / var(--tw-text-opacity));
    }
  }
  &.tip {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(22 163 74 / var(--tw-border-opacity));
  }
  &.tip:where(.dark, .dark *) {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity));
  }
  &.tip {
    .heading {
      --tw-text-opacity: 1;
      color: rgb(22 163 74 / var(--tw-text-opacity));
    }
    .heading:where(.dark, .dark *) {
      --tw-text-opacity: 1;
      color: rgb(34 197 94 / var(--tw-text-opacity));
    }
  }
  &.important {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(147 51 234 / var(--tw-border-opacity));
  }
  &.important:where(.dark, .dark *) {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(168 85 247 / var(--tw-border-opacity));
  }
  &.important {
    .heading {
      --tw-text-opacity: 1;
      color: rgb(147 51 234 / var(--tw-text-opacity));
    }
    .heading:where(.dark, .dark *) {
      --tw-text-opacity: 1;
      color: rgb(168 85 247 / var(--tw-text-opacity));
    }
  }
  &.warning {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(202 138 4 / var(--tw-border-opacity));
  }
  &.warning:where(.dark, .dark *) {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(234 179 8 / var(--tw-border-opacity));
  }
  &.warning {
    .heading {
      --tw-text-opacity: 1;
      color: rgb(202 138 4 / var(--tw-text-opacity));
    }
    .heading:where(.dark, .dark *) {
      --tw-text-opacity: 1;
      color: rgb(234 179 8 / var(--tw-text-opacity));
    }
  }
  &.caution {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(220 38 38 / var(--tw-border-opacity));
  }
  &.caution:where(.dark, .dark *) {
    --tw-border-opacity: 1;
    border-inline-start-color: rgb(239 68 68 / var(--tw-border-opacity));
  }
  &.caution {
    .heading {
      --tw-text-opacity: 1;
      color: rgb(220 38 38 / var(--tw-text-opacity));
    }
    .heading:where(.dark, .dark *) {
      --tw-text-opacity: 1;
      color: rgb(239 68 68 / var(--tw-text-opacity));
    }
  }
}

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
.ma-shan-zheng-regular {
  font-family: "Ma Shan Zheng", cursive;
  font-weight: 400;
  font-style: normal;
}