.widget-preset-host {
  overflow: visible;
  position: relative;
}

.widget-preset-bg {
  --accent: #2c7a57;
  --ink: #2d251c;
  --panel: #ffffff;
  --paper: #fff2a6;
  --surface: #f4f0e8;
  bottom: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.widget-preset-content {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.widget-preset-content.has-background-preset {
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --widget-preset-content-rotate: 0deg;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(var(--widget-preset-content-rotate, 0deg));
  transform-origin: center center;
}

.widget-preset-content > * {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.widget-preset-inner {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  width: 100%;
}

.widget-preset-bg .note {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  min-height: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
}
.background-preset-shell {
  --paper: #fff2a6;
  --ink: #2d251c;
  --surface: #f4f0e8;
  --panel: #ffffff;
  --accent: #2c7a57;
}

.background-preset-shell * {
  box-sizing: border-box;
}

.background-preset-card {
  background: var(--panel);
  border: 1px solid #ded8cc;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(52, 40, 25, 0.12);
}

.background-preset-toolbar {
  margin-bottom: 12px;
}

.background-preset-select {
  position: relative;
}

.style-select-trigger {
  align-items: center;
  background: #fbfaf7;
  border: 1px solid #ded8cc;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.style-select-trigger:focus-visible,
.style-button:focus-visible {
  outline: 3px solid rgba(44, 122, 87, 0.35);
  outline-offset: 2px;
}

.selected-style-summary {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.style-select-chevron {
  color: rgba(45, 37, 28, 0.62);
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.background-preset-select.open .style-select-chevron {
  transform: rotate(180deg);
}

.style-buttons {
  background: var(--panel);
  border: 1px solid #ded8cc;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(52, 40, 25, 0.18);
  display: grid;
  gap: 8px;
  left: 0;
  max-height: 410px;
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
}

.style-button {
  align-items: center;
  background: #fbfaf7;
  border: 1px solid #ded8cc;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px;
  text-align: left;
}

.style-button.active {
  background: #edf8f2;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.style-icon {
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.22);
  display: block;
  flex: 0 0 auto;
  height: 34px;
  overflow: visible;
  position: relative;
  width: 44px;
}

.style-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.style-detail {
  color: rgba(45, 37, 28, 0.62);
  display: block;
  font-size: 12px;
  line-height: 16px;
}

.background-preset-colors {
  border-top: 1px solid #ece5da;
  margin-top: 18px;
  padding-top: 18px;
}

.background-preset-color-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 18px;
  padding: 0;
  position: relative;
  width: 18px;
}

.swatch.active {
  box-shadow: 0 0 0 2px var(--accent);
}

.custom-swatch {
  align-items: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(#ff6961, #ffcf40, #7bd88f, #65a8ff, #c27cff, #ff6961)
      border-box;
  border: 2px solid transparent;
  color: var(--ink);
  display: flex;
  font-size: 0;
  font-weight: 700;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
}

.custom-swatch input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.custom-swatch span {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  height: 6px;
  padding: 0;
  pointer-events: none;
  position: relative;
  width: 6px;
  z-index: 1;
}

.background-preset-preview-wrap {
  margin-top: 18px;
}

.background-preset-preview-label {
  color: rgba(45, 37, 28, 0.62);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.background-preset-preview-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: 8px 0 24px;
}

.note {
  --note-color: var(--paper);
  background-color: var(--note-color);
  box-shadow: 7px 12px 18px rgba(31, 29, 26, 0.28);
  color: var(--ink);
  min-height: 280px;
  padding: 34px;
  position: relative;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
  width: min(100%, 460px);
}

.note h3 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 16px;
  position: relative;
  z-index: 3;
}

.note p {
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  position: relative;
  z-index: 3;
}

.note-content {
  bottom: var(--safe-bottom, 10px);
  display: flex;
  flex-direction: column;
  gap: 0;
  left: var(--safe-left, 10px);
  position: absolute;
  right: var(--safe-right, 10px);
  top: var(--safe-top, 10px);
  z-index: 3;
}

.note::before,
.note::after {
  pointer-events: none;
}

.sticky {
  border-radius: 4px;
  transform: rotate(-1.4deg);
}

.pinned {
  border-radius: 3px;
  transform: rotate(1.1deg);
}

.widget-preset-bg .note.pinned {
  height: calc(100% - 14px);
  margin-top: 14px;
  min-height: calc(100% - 14px);
}

.pinned::before {
  background: radial-gradient(circle at 32% 28%, #ff8a8a, #b50000 72%);
  border: 1px solid #8f0000;
  border-radius: 50%;
  box-shadow:
    0 4px 7px rgba(0, 0, 0, 0.55),
    0 10px 12px rgba(0, 0, 0, 0.28);
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  top: -14px;
  transform: translateX(-50%);
  width: 24px;
  z-index: 3;
}

.taped {
  border-radius: 3px;
  transform: rotate(-0.8deg);
}

.widget-preset-bg .note.taped {
  height: calc(100% - 12px);
  margin-top: 12px;
  min-height: calc(100% - 12px);
}

.taped::before,
.taped::after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.66),
      rgba(255, 255, 255, 0.2)
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.25) 0 2px,
      rgba(255, 255, 255, 0.05) 2px 5px
    );
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  content: "";
  height: 24px;
  opacity: 0.88;
  position: absolute;
  top: -12px;
  width: 70px;
  z-index: 4;
}

.taped::before {
  left: 24px;
  transform: rotate(-8deg);
}

.taped::after {
  right: 24px;
  transform: rotate(8deg);
}

.kraft {
  background-image:
    linear-gradient(25deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.09) 0 1px,
      transparent 1px 8px
    ),
    radial-gradient(circle at 18% 22%, rgba(80, 45, 20, 0.13) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 66%, rgba(80, 45, 20, 0.1) 0 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 31px 31px;
  border-radius: 1px;
  transform: rotate(0.7deg);
}

.widget-preset-bg .note.kraft {
  height: calc(100% - 24px);
  margin-top: 24px;
  min-height: calc(100% - 24px);
}

.kraft::before {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  content: "";
  height: 42px;
  left: 50%;
  position: absolute;
  top: -24px;
  transform: translateX(-50%) rotate(13deg);
  width: 34px;
  z-index: 3;
}

.torn {
  border-radius: 4px 4px 16px 6px;
  clip-path: polygon(
    0 4%,
    8% 2%,
    17% 5%,
    27% 2%,
    39% 5%,
    48% 2%,
    58% 4%,
    69% 2%,
    82% 5%,
    100% 3%,
    98% 87%,
    88% 92%,
    76% 88%,
    64% 96%,
    53% 89%,
    42% 96%,
    31% 90%,
    18% 94%,
    8% 90%,
    0 95%
  );
  transform: rotate(-1.2deg);
}

.binder {
  border-radius: 2px;
  padding-left: 54px;
  transform: rotate(1.2deg);
}

.binder::before {
  background: radial-gradient(circle, var(--surface) 0 47%, transparent 52%) 0
    0 / 22px 44px repeat-y;
  content: "";
  height: calc(100% - 48px);
  left: 16px;
  position: absolute;
  top: 24px;
  width: 22px;
  z-index: 3;
}

.orange-strip::before {
  background: rgba(198, 128, 0, 0.78);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  content: "";
  height: 54px;
  left: 50%;
  position: absolute;
  top: -20px;
  transform: translateX(-50%) rotate(-3deg);
  width: 46px;
  z-index: 4;
}

.widget-preset-bg .note.orange-strip {
  height: calc(100% - 20px);
  margin-top: 20px;
  min-height: calc(100% - 20px);
}

.glass {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)),
    color-mix(in srgb, var(--note-color), transparent 50%);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(45, 37, 28, 0.16);
  transform: rotate(0.3deg);
}

.glass::before {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  border-radius: 18px 18px 80px 18px;
  content: "";
  height: 42%;
  left: 0;
  position: absolute;
  top: 0;
  width: 70%;
}

.polaroid {
  background: #fff;
  border: 18px solid #fff;
  border-bottom-width: 76px;
  box-shadow: 8px 18px 28px rgba(31, 29, 26, 0.26);
  color: var(--ink);
  transform: rotate(-1.6deg);
}

.polaroid::before {
  background: var(--note-color);
  content: "";
  inset: 0;
  opacity: 0.9;
  position: absolute;
  z-index: 0;
}

.polaroid h3,
.polaroid p,
.glass h3,
.glass p {
  position: relative;
  z-index: 1;
}

.chalkboard {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08), transparent 25%),
    repeating-linear-gradient(-3deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px),
    #23372f;
  border: 10px solid #8b6239;
  border-radius: 6px;
  box-shadow: 0 14px 24px rgba(31, 29, 26, 0.28);
  color: #fbf7e5;
  transform: rotate(0.4deg);
}

.chalkboard h3 {
  color: var(--note-color);
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
}

.comic {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 2px, transparent 2px)
      0 0 / 16px 16px,
    var(--note-color);
  border: 5px solid #171717;
  border-radius: 38px;
  box-shadow: 8px 8px 0 #171717;
  transform: rotate(-0.5deg);
}

.widget-preset-bg .note.comic {
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
}

.comic::after {
  background: var(--note-color);
  border-bottom: 5px solid #171717;
  border-right: 5px solid #171717;
  bottom: -24px;
  content: "";
  height: 42px;
  left: 76px;
  position: absolute;
  transform: rotate(33deg);
  width: 42px;
}

.sticker {
  border: 10px solid #fff;
  border-radius: 26px;
  box-shadow:
    0 4px 0 rgba(255, 255, 255, 0.7),
    8px 14px 24px rgba(31, 29, 26, 0.24);
  transform: rotate(1deg);
}

.magic-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 30%),
    radial-gradient(
      circle at 85% 20%,
      color-mix(in srgb, var(--note-color), transparent 20%),
      transparent 28%
    ),
    linear-gradient(145deg, #221934, #4a2b62 55%, #1e2444);
  border: 2px solid color-mix(in srgb, var(--note-color), white 15%);
  border-radius: 18px;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.08) inset,
    0 18px 35px rgba(31, 29, 26, 0.3);
  color: #fff7dc;
  overflow: hidden;
  transform: rotate(-0.6deg);
}

.magic-card h3 {
  color: var(--note-color);
}

.magic-card::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px)
      20px 40px / 54px 54px,
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px)
      10px 15px / 38px 38px;
  content: "";
  inset: 0;
  opacity: 0.7;
  position: absolute;
}

.magic-card::after {
  background: linear-gradient(
    132deg,
    transparent 0 35%,
    rgba(255, 255, 255, 0.28) 45%,
    transparent 58%
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
}

.magic-card h3,
.magic-card p {
  position: relative;
  z-index: 1;
}

.hologram {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.14) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(135deg, rgba(87, 244, 255, 0.34), rgba(197, 116, 255, 0.3)),
    rgba(12, 32, 54, 0.72);
  border: 1px solid color-mix(in srgb, var(--note-color), #65f7ff 45%);
  border-radius: 14px;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--note-color), #65f7ff 35%),
    0 16px 32px rgba(31, 29, 26, 0.28);
  color: #f4feff;
  overflow: hidden;
  transform: skewY(-1deg) rotate(0.4deg);
}

.hologram h3 {
  color: color-mix(in srgb, var(--note-color), white 28%);
  text-shadow: 0 0 12px currentColor;
}

.hologram::before {
  background: linear-gradient(
    112deg,
    transparent 0 35%,
    rgba(255, 255, 255, 0.38) 45%,
    transparent 55%
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
}

.hologram h3,
.hologram p {
  position: relative;
  z-index: 1;
}

.candy-label {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.42) 0 12px,
      transparent 12px 24px
    ),
    var(--note-color);
  border: 8px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(45, 37, 28, 0.18),
    0 13px 24px rgba(31, 29, 26, 0.2);
  min-height: 230px;
  text-align: center;
  transform: rotate(-0.5deg);
}

.candy-label h3,
.candy-label p {
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
}

.museum-plaque {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 28%),
    linear-gradient(145deg, #b88945, #f0d28a 45%, #94632f);
  border: 2px solid #6e441e;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.22),
    0 12px 22px rgba(31, 29, 26, 0.28);
  color: #2f2013;
  transform: rotate(0.3deg);
}

.whiteboard {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45)),
    #f8fbff;
  border: 10px solid #d9dde3;
  border-bottom-color: #b9c1cc;
  border-radius: 8px;
  box-shadow: 0 14px 24px rgba(31, 29, 26, 0.2);
  color: #1d2c36;
  transform: rotate(-0.3deg);
}

.fridge-magnet {
  background: var(--note-color);
  border-radius: 18px;
  box-shadow:
    0 16px 24px rgba(31, 29, 26, 0.24),
    inset 0 -8px 0 rgba(0, 0, 0, 0.08);
  transform: rotate(1.1deg);
}

.fridge-magnet::before {
  background: radial-gradient(
    circle at 35% 35%,
    #ffffff,
    color-mix(in srgb, var(--note-color), #2c3442 30%)
  );
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(31, 29, 26, 0.28);
  content: "";
  height: 38px;
  position: absolute;
  right: 22px;
  top: 20px;
  width: 38px;
}

.arcade-marquee {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--note-color), white 12%),
      color-mix(in srgb, var(--note-color), #ff4e8a 22%)
    );
  border: 8px solid #20162d;
  border-radius: 14px;
  box-shadow:
    0 0 0 8px #ffcf40,
    0 18px 30px rgba(31, 29, 26, 0.28);
  color: #20162d;
  text-align: center;
  transform: rotate(-0.4deg);
}

.arcade-marquee::before {
  background: radial-gradient(circle, #fff5b8 0 4px, transparent 5px) 0 0 /
    34px 34px;
  content: "";
  inset: 12px;
  position: absolute;
  z-index: 1;
}

.arcade-marquee::after {
  background-image:
    radial-gradient(circle, #fff5b8 0 3px, transparent 4px),
    radial-gradient(circle, #fff5b8 0 3px, transparent 4px),
    radial-gradient(circle, #fff5b8 0 3px, transparent 4px),
    radial-gradient(circle, #fff5b8 0 3px, transparent 4px);
  background-position:
    20px 4px,
    20px calc(100% - 4px),
    4px 20px,
    calc(100% - 4px) 20px;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y;
  background-size:
    40px 8px,
    40px 8px,
    8px 40px,
    8px 40px;
  border-radius: 12px;
  content: "";
  inset: -11px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.index-card {
  background:
    linear-gradient(
      90deg,
      transparent 0 44px,
      #ef6f75 44px 46px,
      transparent 46px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      rgba(32, 96, 180, 0.28) 32px
    ),
    #fffdf2;
  border-radius: 3px;
  box-shadow: 0 12px 22px rgba(31, 29, 26, 0.22);
  color: #1f2733;
  padding-left: 66px;
  transform: rotate(-0.7deg);
}

.arcade-marquee h3,
.arcade-marquee p {
  position: relative;
  z-index: 3;
}

.note.yellow {
  --note-color: #fff2a6;
}

.note.blue {
  --note-color: #cce5ff;
}

.note.pink {
  --note-color: #ffd9ec;
}

.note.green {
  --note-color: #d9f7d6;
}

.note.orange {
  --note-color: #f5bd73;
}

.note.purple {
  --note-color: #e6ccff;
}

.note.kraft-color {
  --note-color: #c99a63;
}

.note.cream {
  --note-color: #f3f0dc;
}

.mini-sticky {
  background: #fff2a6 !important;
  border-radius: 3px;
  transform: rotate(-1deg);
}

.mini-pinned {
  background: #ffd9ec !important;
  border-radius: 3px;
}

.mini-pinned::before {
  background: #c60000;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 50%;
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  width: 10px;
}

.mini-taped {
  background: #cce5ff !important;
}

.mini-taped::before {
  background: rgba(255, 255, 255, 0.72);
  content: "";
  height: 9px;
  left: 8px;
  position: absolute;
  top: 2px;
  transform: rotate(-8deg);
  width: 28px;
}

.mini-kraft {
  background-color: #c99a63 !important;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.12) 0 1px,
    transparent 1px 6px
  );
}

.mini-torn {
  background: #d9f7d6 !important;
  clip-path: polygon(
    0 8%,
    12% 3%,
    24% 8%,
    40% 2%,
    58% 7%,
    76% 3%,
    100% 7%,
    96% 88%,
    82% 94%,
    64% 89%,
    48% 96%,
    30% 90%,
    12% 95%,
    0 90%
  );
}

.mini-binder {
  background: #cce5ff !important;
  border-left: 4px solid #f8fbff;
}

.mini-binder::before {
  background: radial-gradient(circle, var(--surface) 0 45%, transparent 52%) 0 0 /
    8px 13px repeat-y;
  content: "";
  height: 24px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 8px;
}

.mini-top-tab {
  background: #e6ccff !important;
}

.mini-top-tab::before {
  background: rgba(198, 128, 0, 0.78);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  content: "";
  height: 18px;
  left: 50%;
  position: absolute;
  top: 2px;
  transform: translateX(-50%) rotate(-3deg);
  width: 16px;
}

.mini-glass {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.78),
      rgba(204, 229, 255, 0.45)
    ),
    #cce5ff;
  border: 1px solid rgba(83, 128, 176, 0.55);
}

.mini-polaroid {
  background: #ffd9ec;
  background-clip: padding-box;
  border: 5px solid #fff;
  border-bottom-width: 12px;
}

.mini-chalkboard {
  background: #23372f;
  border: 4px solid #8b6239;
}

.mini-comic {
  background: #f5bd73;
  border: 3px solid #171717;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #171717;
}

.mini-sticker {
  background: #d9f7d6;
  border: 5px solid #fff;
  border-radius: 12px;
}

.mini-magic-card {
  background: linear-gradient(145deg, #221934, #4a2b62 55%, #1e2444);
  border: 2px solid #fff2a6;
  border-radius: 10px;
}

.mini-hologram {
  background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.25) 0 1px,
      transparent 1px 6px
    ),
    linear-gradient(135deg, #57f4ff, #c574ff);
  border: 1px solid #65f7ff;
  transform: skewY(-4deg);
}

.mini-candy-label {
  background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.5) 0 6px,
      transparent 6px 12px
    ),
    #ffd9ec;
  border: 4px solid #fff;
  border-radius: 999px;
}

.mini-museum-plaque {
  background: linear-gradient(145deg, #b88945, #f0d28a 45%, #94632f);
  border: 2px solid #6e441e;
}

.mini-whiteboard {
  background: #f8fbff;
  border: 4px solid #d9dde3;
}

.mini-fridge-magnet {
  background: #cce5ff;
  border-radius: 12px;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.08),
    2px 3px 8px rgba(0, 0, 0, 0.22);
}

.mini-fridge-magnet::before {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  content: "";
  height: 12px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 12px;
}

.mini-arcade-marquee {
  background: #f5bd73;
  border: 4px solid #20162d;
  box-shadow: 0 0 0 3px #ffcf40;
}

.mini-index-card {
  background: linear-gradient(
      90deg,
      transparent 0 12px,
      #ef6f75 12px 14px,
      transparent 14px
    ),
    repeating-linear-gradient(
      0deg,
      #fffdf2 0 8px,
      rgba(32, 96, 180, 0.2) 9px
    );
}

.background-preset-tweaks {
  border-top: 1px solid #ece5da;
  margin-top: 18px;
  padding-top: 18px;
}

.tweak-section {
  display: grid;
  gap: 14px;
}

.tweak-row {
  display: grid;
  gap: 8px;
}

.tweak-label {
  color: rgba(45, 37, 28, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.segmented,
.angle-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.angle-control {
  align-items: center;
  gap: 8px;
}

.tweak-button {
  background: #fbfaf7;
  border: 1px solid #ded8cc;
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 9px;
}

.tweak-button.active {
  background: #edf8f2;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.angle-nudge {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  min-width: 38px;
}

.angle-nudge::before {
  background: #fff2a6;
  border: 1px solid rgba(45, 37, 28, 0.24);
  border-radius: 2px;
  box-shadow: 1px 2px 4px rgba(31, 29, 26, 0.16);
  content: "";
  display: inline-block;
  height: 14px;
  width: 18px;
}

.angle-left::before {
  transform: rotate(-12deg);
}

.angle-right::before {
  transform: rotate(12deg);
}

.angle-value {
  color: rgba(45, 37, 28, 0.68);
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  min-width: 58px;
  text-align: right;
}

.note.corner-square {
  border-radius: 0 !important;
}

.note.corner-soft {
  border-radius: 8px !important;
}

.note.corner-rounded {
  border-radius: 22px !important;
}

.note.shadow-none {
  box-shadow: none !important;
}

.note.shadow-soft {
  box-shadow: 0 8px 18px rgba(31, 29, 26, 0.16) !important;
}

.note.shadow-strong {
  box-shadow: 0 20px 38px rgba(31, 29, 26, 0.34) !important;
}

.note.angle-custom {
  transform: rotate(var(--user-rotate, 0deg)) !important;
}

.corner-wildflowers,
    .birds-flying,
    .floating-petals,
    .heart-border,
    .star-border,
    .sunbeam-corners,
    .butterfly-corners,
    .watercolor-bloom,
    .garden-trellis,
    .rainbow-mist,
    .fireflies,
    .ocean-foam,
    .snow-dust,
    .confetti-border,
    .aurora-glow {
      background-color: color-mix(in srgb, var(--note-color), white 58%);
      border-radius: 18px;
      box-shadow: 0 16px 32px rgba(31,29,26,0.18);
      overflow: hidden;
      transform: rotate(-0.2deg);
    }

    .corner-wildflowers {
      background-color: color-mix(in srgb, var(--note-color), white 72%);
    }

    .corner-wildflowers::before,
    .corner-wildflowers::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .corner-wildflowers::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2034%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(18%2027)%20rotate(-8)%20scale(0.55)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23f7c85f%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20168%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(24%2024)%20rotate(12)%20scale(0.38)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23ffd25f%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2034%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(32%2028)%20rotate(10)%20scale(0.5)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23f2b84b%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(28%2025)%20rotate(-14)%20scale(0.42)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23f7c85f%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%23d7a7ff%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23d7a7ff%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%23d7a7ff%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23d7a7ff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 10px top 0,
        left 72px top 5px,
        left 54px bottom 9px,
        left 118px bottom 11px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        112px 34px,
        168px 28px,
        148px 38px,
        190px 32px;
    }

    .corner-wildflowers::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20128%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(18%2044)%20rotate(-12)%20scale(0.43)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23f7c85f%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%23f39ac1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20166%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(20%2052)%20rotate(14)%20scale(0.41)%22%3E%3Cpath%20d%3D%22M0%2016C-2%206%201-4%208-14%22%20fill%3D%22none%22%20stroke%3D%22%235d925b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22-7%22%20cy%3D%2210%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(-38%20-7%2010)%22%2F%3E%3Cellipse%20cx%3D%228%22%20cy%3D%228%22%20rx%3D%225%22%20ry%3D%2210%22%20fill%3D%22%2389bd74%22%20transform%3D%22rotate(42%208%208)%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-14%22%20r%3D%225%22%20fill%3D%22%23ffd25f%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-26%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22-2%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-14%22%20r%3D%228%22%20fill%3D%22%2396c7ff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 38px,
        right 0 top 84px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        40px 128px,
        40px 166px;
    }




    .soft-vine {
      background-color: #fbfff6;
      border: 1px solid rgba(88,139,93,0.16);
    }

    .soft-vine::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NjAgMzAwJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J3N0ZW0nIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBzdG9wLWNvbG9yPScjNWY5YjY2Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjM2Y3ZDRhJy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2xlYWYnIGN4PSczOCUnIGN5PScyOCUnIHI9JzcyJSc+PHN0b3Agc3RvcC1jb2xvcj0nI2M5ZTZiOCcvPjxzdG9wIG9mZnNldD0nLjU1JyBzdG9wLWNvbG9yPScjNzRhZDZjJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjNDA3YTQ1Jy8+PC9yYWRpYWxHcmFkaWVudD48ZmlsdGVyIGlkPSdzb2Z0JyB4PSctMjAlJyB5PSctMjAlJyB3aWR0aD0nMTQwJScgaGVpZ2h0PScxNDAlJz48ZmVEcm9wU2hhZG93IGR4PScwJyBkeT0nMicgc3RkRGV2aWF0aW9uPScxLjInIGZsb29kLWNvbG9yPScjM2Y2ZjQ0JyBmbG9vZC1vcGFjaXR5PScuMTYnLz48L2ZpbHRlcj48ZyBpZD0nbGVhZlNoYXBlJz48cGF0aCBkPSdNMCAwQzEzLTEyIDI5LTEyIDQxIDAgMjkgMTMgMTIgMTMgMCAwWicvPjxwYXRoIGQ9J001IDBjOSAxIDIwIDEgMzEgMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZWRmN2RmJyBzdHJva2Utb3BhY2l0eT0nLjQ1JyBzdHJva2Utd2lkdGg9JzEuMycgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9nPjwvZGVmcz48ZyBmaWx0ZXI9J3VybCgjc29mdCknIGZpbGw9J25vbmUnIHN0cm9rZT0ndXJsKCNzdGVtKScgc3Ryb2tlLXdpZHRoPSczLjInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgb3BhY2l0eT0nLjgyJz48cGF0aCBkPSdNMjIgMjBDMTAgNzAgMTggMTEyIDM0IDE1NGMxNSAzOSAxMyA4MC04IDEyNicvPjxwYXRoIGQ9J000MzggMjRjMTMgNDQgNSA4NC0xNCAxMjItMjEgNDMtMjAgODQgMTAgMTMwJy8+PHBhdGggZD0nTTM2IDI3NmM1OC0xNyAxMTItMjAgMTY0LTggNTAgMTIgOTggOSAxNDMtMTAgMjktMTIgNTYtMTMgODMtMicvPjxwYXRoIGQ9J003MCAyMmM0Mi0xMiA3OC0xMSAxMDggNCcvPjwvZz48ZyBmaWx0ZXI9J3VybCgjc29mdCknIGZpbGw9J3VybCgjbGVhZiknIG9wYWNpdHk9Jy45Jz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyMiA2NCkgcm90YXRlKC0xNDQpIHNjYWxlKC41NiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyOSAxMDQpIHJvdGF0ZSgyOCkgc2NhbGUoLjQ4KSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDI0IDE1NCkgcm90YXRlKC0xNDgpIHNjYWxlKC41MiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgzMCAyMDYpIHJvdGF0ZSgzMikgc2NhbGUoLjQ1KSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE3IDI0Nikgcm90YXRlKC0xNDYpIHNjYWxlKC40MiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MzggNjYpIHJvdGF0ZSgtMzYpIHNjYWxlKC41MiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MzAgMTEyKSByb3RhdGUoMTUwKSBzY2FsZSguNDgpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNDM4IDE2Mikgcm90YXRlKC0zOCkgc2NhbGUoLjUpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNDMwIDIxMikgcm90YXRlKDE0OCkgc2NhbGUoLjQ2KSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ0MyAyNTIpIHJvdGF0ZSgtMzQpIHNjYWxlKC40MiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg4NiAyNzApIHJvdGF0ZSgtMTQpIHNjYWxlKC40NCknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxNDAgMjY0KSByb3RhdGUoMTY0KSBzY2FsZSguNDIpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMjAyIDI3NSkgcm90YXRlKC04KSBzY2FsZSguNDYpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMjc0IDI3MCkgcm90YXRlKDE3MCkgc2NhbGUoLjQyKSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDM0OCAyNTgpIHJvdGF0ZSgtMTgpIHNjYWxlKC40NCknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg4NCAyNCkgcm90YXRlKDgpIHNjYWxlKC4zNCknIG9wYWNpdHk9Jy41Nic+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE0NCAyMCkgcm90YXRlKDE4OCkgc2NhbGUoLjMpJyBvcGFjaXR5PScuNSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjwvZz48ZyBmaWxsPScjZjdmMWI2JyBvcGFjaXR5PScuNjInPjxjaXJjbGUgY3g9JzI1JyBjeT0nMTMyJyByPSczJy8+PGNpcmNsZSBjeD0nNDMzJyBjeT0nMTkwJyByPSczJy8+PGNpcmNsZSBjeD0nMzI0JyBjeT0nMjYzJyByPScyLjYnLz48L2c+PC9zdmc+");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: "";
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .soft-vine::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NjAgMzAwJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J3N0ZW0nIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBzdG9wLWNvbG9yPScjNWY5YjY2Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjM2Y3ZDRhJy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2xlYWYnIGN4PSczOCUnIGN5PScyOCUnIHI9JzcyJSc+PHN0b3Agc3RvcC1jb2xvcj0nI2M5ZTZiOCcvPjxzdG9wIG9mZnNldD0nLjU1JyBzdG9wLWNvbG9yPScjNzRhZDZjJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjNDA3YTQ1Jy8+PC9yYWRpYWxHcmFkaWVudD48ZmlsdGVyIGlkPSdzb2Z0JyB4PSctMjAlJyB5PSctMjAlJyB3aWR0aD0nMTQwJScgaGVpZ2h0PScxNDAlJz48ZmVEcm9wU2hhZG93IGR4PScwJyBkeT0nMicgc3RkRGV2aWF0aW9uPScxLjInIGZsb29kLWNvbG9yPScjM2Y2ZjQ0JyBmbG9vZC1vcGFjaXR5PScuMTYnLz48L2ZpbHRlcj48ZyBpZD0nbGVhZlNoYXBlJz48cGF0aCBkPSdNMCAwQzEzLTEyIDI5LTEyIDQxIDAgMjkgMTMgMTIgMTMgMCAwWicvPjxwYXRoIGQ9J001IDBjOSAxIDIwIDEgMzEgMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZWRmN2RmJyBzdHJva2Utb3BhY2l0eT0nLjQ1JyBzdHJva2Utd2lkdGg9JzEuMycgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9nPjwvZGVmcz48ZyBmaWx0ZXI9J3VybCgjc29mdCknIGZpbGw9J25vbmUnIHN0cm9rZT0ndXJsKCNzdGVtKScgc3Ryb2tlLXdpZHRoPSczLjInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgb3BhY2l0eT0nLjgyJz48cGF0aCBkPSdNMTAgMThDMiA2NiA5IDExMSAyMiAxNTRjMTMgNDIgMTIgODItNiAxMjgnLz48cGF0aCBkPSdNNDUwIDIyYzkgNDIgMyA4NC0xMiAxMjMtMTggNDUtMTYgODYgOCAxMzInLz48cGF0aCBkPSdNMjYgMjc2YzYyLTE3IDExOS0yMCAxNzEtOCA1MSAxMiAxMDAgOSAxNDUtMTAgMzEtMTMgNjAtMTQgOTEtMycvPjwvZz48ZyBmaWx0ZXI9J3VybCgjc29mdCknIGZpbGw9J3VybCgjbGVhZiknIG9wYWNpdHk9Jy45Jz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxMCA2Mikgcm90YXRlKC0xNTApIHNjYWxlKC40OCknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxNyAxMDQpIHJvdGF0ZSgyMCkgc2NhbGUoLjQyKSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDExIDE1NCkgcm90YXRlKC0xNTIpIHNjYWxlKC40NiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxNyAyMDYpIHJvdGF0ZSgyNCkgc2NhbGUoLjQpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNyAyNDYpIHJvdGF0ZSgtMTUwKSBzY2FsZSguMzgpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNDUwIDY2KSByb3RhdGUoLTMwKSBzY2FsZSguNDYpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNDQzIDExMikgcm90YXRlKDE1Nikgc2NhbGUoLjQyKSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ1MCAxNjIpIHJvdGF0ZSgtMzApIHNjYWxlKC40NCknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0NDMgMjEyKSByb3RhdGUoMTU0KSBzY2FsZSguNCknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0NTMgMjUyKSByb3RhdGUoLTI4KSBzY2FsZSguMzgpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNzYgMjcwKSByb3RhdGUoLTE0KSBzY2FsZSguNDQpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTM2IDI2NCkgcm90YXRlKDE2NCkgc2NhbGUoLjQyKSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDIwMiAyNzUpIHJvdGF0ZSgtOCkgc2NhbGUoLjQ2KSc+PHVzZSBocmVmPScjbGVhZlNoYXBlJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDI3NCAyNzApIHJvdGF0ZSgxNzApIHNjYWxlKC40MiknPjx1c2UgaHJlZj0nI2xlYWZTaGFwZScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgzNDggMjU4KSByb3RhdGUoLTE4KSBzY2FsZSguNDQpJz48dXNlIGhyZWY9JyNsZWFmU2hhcGUnLz48L2c+PC9nPjxnIGZpbGw9JyNmN2YxYjYnIG9wYWNpdHk9Jy42Mic+PGNpcmNsZSBjeD0nMTQnIGN5PScxMzInIHI9JzMnLz48Y2lyY2xlIGN4PSc0NDQnIGN5PScxOTAnIHI9JzMnLz48Y2lyY2xlIGN4PSczMjQnIGN5PScyNjMnIHI9JzIuNicvPjwvZz48L3N2Zz4=");
      inset: 0;
    }


    .floating-petals {
      background-color: color-mix(in srgb, var(--note-color), white 72%);
    }

    .birds-flying::before,
    .birds-flying::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .birds-flying::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(14%204)%20rotate(-10)%20scale(0.44%200.44)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%2365a8ff%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%239bdcff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%234f88d5%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%2365a8ff%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20168%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(20%205)%20rotate(8)%20scale(0.39%200.39)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%2376c7f2%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%23b7e8ff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%235996df%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%2376c7f2%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(44%201)%20rotate(12)%20scale(-0.44%200.44)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%2365a8ff%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%239bdcff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%234f88d5%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%2365a8ff%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%2030%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(58%203)%20rotate(-8)%20scale(-0.39%200.39)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%235da7ee%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%239bdcff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%234e82cf%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%235da7ee%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 10px top 5px,
        left 72px top 8px,
        left 54px bottom 5px,
        left 118px bottom 7px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        112px 30px,
        168px 22px,
        148px 30px,
        190px 22px;
    }

    .birds-flying::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2054%20120%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(4%2024)%20rotate(-10)%20scale(0.4%200.4)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%2365a8ff%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%239bdcff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%234f88d5%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%2365a8ff%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2054%20158%22%3E%3Cg%20opacity%3D%22.92%22%20transform%3D%22translate(50%2030)%20rotate(10)%20scale(-0.4%200.4)%22%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2228%22%20rx%3D%2218%22%20ry%3D%2213%22%20fill%3D%22%2376c7f2%22%2F%3E%3Cpath%20d%3D%22M18%2026C4%2010%200%204%202%200c14%202%2028%2011%2035%2025Z%22%20fill%3D%22%23b7e8ff%22%2F%3E%3Cpath%20d%3D%22M35%2026c11-16%2023-22%2033-23-1%2013-12%2025-30%2034Z%22%20fill%3D%22%235996df%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%2376c7f2%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2218%22%20r%3D%221.7%22%20fill%3D%22%23233139%22%2F%3E%3Cpath%20d%3D%22M53%2021l10%204-10%204Z%22%20fill%3D%22%23f2b84b%22%2F%3E%3Cpath%20d%3D%22M20%2038c7%206%2017%206%2026%200%22%20fill%3D%22none%22%20stroke%3D%22%23233139%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 36px,
        right 0 top 84px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        54px 120px,
        54px 158px;
    }

    .floating-petals::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NjAgMzAwJz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9J3BpbmsnIGN4PSczNSUnIGN5PScyNSUnIHI9Jzc1JSc+PHN0b3Agc3RvcC1jb2xvcj0nI2ZmZjJmNicvPjxzdG9wIG9mZnNldD0nLjQyJyBzdG9wLWNvbG9yPScjZjhhNWJkJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZGY2ZjkwJy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J3Jvc2UnIGN4PSczMiUnIGN5PScyMiUnIHI9Jzc2JSc+PHN0b3Agc3RvcC1jb2xvcj0nI2ZmZjRlYycvPjxzdG9wIG9mZnNldD0nLjQ4JyBzdG9wLWNvbG9yPScjZjViMDkyJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZDk4MjY4Jy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J3BlYWNoJyBjeD0nMzglJyBjeT0nMjQlJyByPSc3NCUnPjxzdG9wIHN0b3AtY29sb3I9JyNmZmY2ZGMnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjZmZjOThkJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZTA5YTY0Jy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2xhdicgY3g9JzM4JScgY3k9JzI1JScgcj0nNzIlJz48c3RvcCBzdG9wLWNvbG9yPScjZjhmMWZmJy8+PHN0b3Agb2Zmc2V0PScuNScgc3RvcC1jb2xvcj0nI2M4YThmZicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzkxNzRkOCcvPjwvcmFkaWFsR3JhZGllbnQ+PGZpbHRlciBpZD0nc2hhZG93JyB4PSctNDAlJyB5PSctNDAlJyB3aWR0aD0nMTgwJScgaGVpZ2h0PScxODAlJz48ZmVEcm9wU2hhZG93IGR4PScwJyBkeT0nMicgc3RkRGV2aWF0aW9uPScxLjYnIGZsb29kLWNvbG9yPScjOWE2Mzc1JyBmbG9vZC1vcGFjaXR5PScuMTgnLz48L2ZpbHRlcj48ZyBpZD0ncGV0YWwnPjxwYXRoIGQ9J00wLTE4QzEyLTE0IDIxLTQgMTcgOCAxNCAxOSAyIDI1LTkgMTljLTEwLTYtMTAtMjAgOS0zN1onLz48cGF0aCBkPSdNLTItMTJDNS03IDggMiA0IDEyJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmYnIHN0cm9rZS1vcGFjaXR5PScuMzgnIHN0cm9rZS13aWR0aD0nMS40JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48L2c+PC9kZWZzPjxnIGZpbHRlcj0ndXJsKCNzaGFkb3cpJyBvcGFjaXR5PScuOSc+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMzQgNzIpIHJvdGF0ZSgtMzQpIHNjYWxlKC44MiknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3BpbmspJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDIyIDEzOCkgcm90YXRlKDE4KSBzY2FsZSguNjYpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNyb3NlKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0OCAyMDIpIHJvdGF0ZSgtMTgpIHNjYWxlKC44OCknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI2xhdiknLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNzYgMjUyKSByb3RhdGUoNTgpIHNjYWxlKC41OCknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3BlYWNoKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MjIgNzYpIHJvdGF0ZSgzMCkgc2NhbGUoLjcyKSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjbGF2KScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0NDQgMTQyKSByb3RhdGUoLTI0KSBzY2FsZSguODIpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNwaW5rKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MTQgMjA2KSByb3RhdGUoMTgpIHNjYWxlKC42OCknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3Jvc2UpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDM4NCAyNTYpIHJvdGF0ZSgtNTQpIHNjYWxlKC42KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcGVhY2gpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDEyMiAyNzIpIHJvdGF0ZSg3OCkgc2NhbGUoLjcyKSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcGluayknLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTg0IDI4Mikgcm90YXRlKC03MCkgc2NhbGUoLjU4KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjbGF2KScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyNDggMjc2KSByb3RhdGUoNjIpIHNjYWxlKC42NiknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3Jvc2UpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDMxNiAyODQpIHJvdGF0ZSgtNDIpIHNjYWxlKC43MiknPjx1c2UgaHJlZj0nI3BlYWNoKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxNDIgMjQpIHJvdGF0ZSg3Mikgc2NhbGUoLjM0KScgb3BhY2l0eT0nLjQ1Jz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNwaW5rKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgzMTggMjgpIHJvdGF0ZSgtNjIpIHNjYWxlKC4zMiknIG9wYWNpdHk9Jy40Mic+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcm9zZSknLz48L2c+PC9nPjwvc3ZnPg==");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: "";
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .floating-petals::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NjAgMzAwJz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9J3BpbmsnIGN4PSczNSUnIGN5PScyNSUnIHI9Jzc1JSc+PHN0b3Agc3RvcC1jb2xvcj0nI2ZmZjJmNicvPjxzdG9wIG9mZnNldD0nLjQyJyBzdG9wLWNvbG9yPScjZjhhNWJkJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZGY2ZjkwJy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J3Jvc2UnIGN4PSczMiUnIGN5PScyMiUnIHI9Jzc2JSc+PHN0b3Agc3RvcC1jb2xvcj0nI2ZmZjRlYycvPjxzdG9wIG9mZnNldD0nLjQ4JyBzdG9wLWNvbG9yPScjZjViMDkyJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZDk4MjY4Jy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J3BlYWNoJyBjeD0nMzglJyBjeT0nMjQlJyByPSc3NCUnPjxzdG9wIHN0b3AtY29sb3I9JyNmZmY2ZGMnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjZmZjOThkJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZTA5YTY0Jy8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2xhdicgY3g9JzM4JScgY3k9JzI1JScgcj0nNzIlJz48c3RvcCBzdG9wLWNvbG9yPScjZjhmMWZmJy8+PHN0b3Agb2Zmc2V0PScuNScgc3RvcC1jb2xvcj0nI2M4YThmZicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzkxNzRkOCcvPjwvcmFkaWFsR3JhZGllbnQ+PGZpbHRlciBpZD0nc2hhZG93JyB4PSctNDAlJyB5PSctNDAlJyB3aWR0aD0nMTgwJScgaGVpZ2h0PScxODAlJz48ZmVEcm9wU2hhZG93IGR4PScwJyBkeT0nMicgc3RkRGV2aWF0aW9uPScxLjYnIGZsb29kLWNvbG9yPScjOWE2Mzc1JyBmbG9vZC1vcGFjaXR5PScuMTgnLz48L2ZpbHRlcj48ZyBpZD0ncGV0YWwnPjxwYXRoIGQ9J00wLTE4QzEyLTE0IDIxLTQgMTcgOCAxNCAxOSAyIDI1LTkgMTljLTEwLTYtMTAtMjAgOS0zN1onLz48cGF0aCBkPSdNLTItMTJDNS03IDggMiA0IDEyJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmYnIHN0cm9rZS1vcGFjaXR5PScuMzgnIHN0cm9rZS13aWR0aD0nMS40JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48L2c+PC9kZWZzPjxnIGZpbHRlcj0ndXJsKCNzaGFkb3cpJyBvcGFjaXR5PScuOSc+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTIgNzIpIHJvdGF0ZSgtMzQpIHNjYWxlKC44MiknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3BpbmspJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDYgMTM4KSByb3RhdGUoMTgpIHNjYWxlKC42NiknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3Jvc2UpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE0IDIwMikgcm90YXRlKC0xOCkgc2NhbGUoLjg4KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjbGF2KScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgzNiAyNTIpIHJvdGF0ZSg1OCkgc2NhbGUoLjU4KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcGVhY2gpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ0OCA3Nikgcm90YXRlKDMwKSBzY2FsZSguNzIpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNsYXYpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ1NiAxNDIpIHJvdGF0ZSgtMjQpIHNjYWxlKC44MiknPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3BpbmspJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ0OCAyMDYpIHJvdGF0ZSgxOCkgc2NhbGUoLjY4KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcm9zZSknLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoNDI0IDI1Nikgcm90YXRlKC01NCkgc2NhbGUoLjYpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNwZWFjaCknLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTIyIDI3Mikgcm90YXRlKDc4KSBzY2FsZSguNzIpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNwaW5rKScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxODQgMjgyKSByb3RhdGUoLTcwKSBzY2FsZSguNTgpJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNsYXYpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDI0OCAyNzYpIHJvdGF0ZSg2Mikgc2NhbGUoLjY2KSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcm9zZSknLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMzE2IDI4NCkgcm90YXRlKC00Mikgc2NhbGUoLjcyKSc+PHVzZSBocmVmPScjcGV0YWwnIGZpbGw9J3VybCgjcGVhY2gpJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE0MiAyNCkgcm90YXRlKDcyKSBzY2FsZSguMzQpJyBvcGFjaXR5PScuNDUnPjx1c2UgaHJlZj0nI3BldGFsJyBmaWxsPSd1cmwoI3BpbmspJy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDMxOCAyOCkgcm90YXRlKC02Mikgc2NhbGUoLjMyKScgb3BhY2l0eT0nLjQyJz48dXNlIGhyZWY9JyNwZXRhbCcgZmlsbD0ndXJsKCNyb3NlKScvPjwvZz48L2c+PC9zdmc+");
    }

    .sunbeam-corners {
      background:
        conic-gradient(from -35deg at 0 0, rgba(255,207,64,0.42), transparent 9deg, rgba(255,207,64,0.26) 18deg, transparent 28deg),
        color-mix(in srgb, var(--note-color), white 58%);
    }

    .sunbeam-corners::after {
      background: radial-gradient(circle at 0 0, rgba(255,205,91,0.45), transparent 36%);
      content: "";
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .butterfly-corners::before,
    .butterfly-corners::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .butterfly-corners::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2030%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(18%2016)%20rotate(-14)%20scale(0.34)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20168%2030%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(22%2014)%20rotate(12)%20scale(0.22)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2030%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(30%2015)%20rotate(18)%20scale(0.3)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%2030%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(24%2016)%20rotate(-20)%20scale(0.24)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 10px top 0,
        left 72px top 5px,
        left 54px bottom 0,
        left 118px bottom 4px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        112px 30px,
        168px 22px,
        148px 30px,
        190px 22px;
    }

    .butterfly-corners::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%20120%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(15%2028)%20rotate(96)%20scale(0.32)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%20158%22%3E%3Cg%20opacity%3D%22.9%22%20transform%3D%22translate(15%2034)%20rotate(-84)%20scale(0.3)%22%3E%3Cpath%20d%3D%22M-3%200C-18-22-38-22-34-5c3%2017%2020%2020%2031%2011Z%22%20fill%3D%22%23c77ee8%22%2F%3E%3Cpath%20d%3D%22M3%200C18-22%2038-22%2034-5c-3%2017-20%2020-31%2011Z%22%20fill%3D%22%23f29abc%22%2F%3E%3Cpath%20d%3D%22M-4%207c-16%203-23%2017-14%2025%2010%209%2021-4%2020-23Z%22%20fill%3D%22%23a5d8ff%22%2F%3E%3Cpath%20d%3D%22M4%207c16%203%2023%2017%2014%2025-10%209-21-4-20-23Z%22%20fill%3D%22%23ffd08a%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223.5%22%20ry%3D%2214%22%20fill%3D%22%234c3f5d%22%2F%3E%3Cpath%20d%3D%22M-2-8c-4-7-9-10-15-11M2-8c4-7%209-10%2015-11%22%20fill%3D%22none%22%20stroke%3D%22%234c3f5d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 36px,
        right 0 top 84px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        30px 120px,
        30px 158px;
      -webkit-mask: linear-gradient(
        to right,
        #000 0 30px,
        transparent 30px calc(100% - 30px),
        #000 calc(100% - 30px) 100%
      );
      mask: linear-gradient(
        to right,
        #000 0 30px,
        transparent 30px calc(100% - 30px),
        #000 calc(100% - 30px) 100%
      );
    }


    .watercolor-bloom {
      background:
        radial-gradient(circle at 0 0, rgba(255,136,174,0.35), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(111,180,255,0.3), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(255,209,102,0.22), transparent 28%),
        color-mix(in srgb, var(--note-color), white 72%);
    }

    .garden-trellis {
      background:
        linear-gradient(45deg, transparent 0 47%, rgba(95,146,101,0.16) 48% 52%, transparent 53%) 0 0 / 42px 42px,
        linear-gradient(-45deg, transparent 0 47%, rgba(95,146,101,0.12) 48% 52%, transparent 53%) 0 0 / 42px 42px,
        color-mix(in srgb, var(--note-color), white 64%);
    }

    .rainbow-mist {
      background:
        radial-gradient(circle at 0 0, rgba(255,111,145,0.25), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(255,209,102,0.24), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(101,168,255,0.28), transparent 35%),
        radial-gradient(circle at 0 100%, rgba(123,216,143,0.24), transparent 35%),
        color-mix(in srgb, var(--note-color), white 76%);
    }

    .fireflies {
      background:
        radial-gradient(circle at 12% 24%, rgba(255,220,112,0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 86% 18%, rgba(255,220,112,0.75) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 82%, rgba(255,220,112,0.65) 0 3px, transparent 4px),
        radial-gradient(circle at 18% 76%, rgba(255,220,112,0.55) 0 2px, transparent 3px),
        linear-gradient(145deg, #263b39, #4b645d);
      color: #fff8d8;
    }

    .ocean-foam {
      background:
        linear-gradient(180deg, rgba(244,253,255,0.84) 0%, rgba(232,251,255,0.78) 72%, rgba(214,246,251,0.72) 100%),
        color-mix(in srgb, var(--note-color), white 70%);
      color: #1b4551;
    }

    .ocean-foam::before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NjAgMzAwJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J3NlYScgeDE9JzAnIHkxPScyMTAnIHgyPScwJyB5Mj0nMzAwJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nIzhlZGRmMCcvPjxzdG9wIG9mZnNldD0nLjU1JyBzdG9wLWNvbG9yPScjNGZiN2Q3Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjMmY5M2JkJy8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSdzb2Z0JyB4PSctMjAlJyB5PSctMjAlJyB3aWR0aD0nMTQwJScgaGVpZ2h0PScxNDAlJz48ZmVEcm9wU2hhZG93IGR4PScwJyBkeT0nLTEnIHN0ZERldmlhdGlvbj0nMS4yJyBmbG9vZC1jb2xvcj0nIzRhYTVjNycgZmxvb2Qtb3BhY2l0eT0nLjE4Jy8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSc0NjAnIGhlaWdodD0nMzAwJyBmaWxsPSdub25lJy8+PGcgZmlsdGVyPSd1cmwoI3NvZnQpJz48cGF0aCBkPSdNMCAyMThjMjgtMjAgNTgtMTcgODgtMSAyOCAxNSA1NCAxNyA4Mi0xIDMzLTIyIDczLTE4IDEwNSAyIDI4IDE4IDU1IDE4IDg1LTEgMzQtMjIgNjktMjAgMTAwIDB2ODNIMFonIGZpbGw9J3VybCgjc2VhKScvPjxwYXRoIGQ9J00wIDIyMGMyNi0xOCA1OC0xNiA4OCAwIDI5IDE2IDU3IDE1IDg0LTIgMzMtMjAgNzAtMTggMTA0IDMgMjkgMTggNTcgMTcgODQtMiAzMi0yMiA2OC0yMSAxMDAgMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmZmZmJyBzdHJva2Utd2lkdGg9JzEyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIG9wYWNpdHk9Jy45MicvPjxwYXRoIGQ9J00wIDIzOWMzNiAxMSA3MCA5IDEwMi02IDM2LTE2IDcwLTE1IDEwNiAyIDMyIDE1IDY2IDE2IDEwMiAwIDM5LTE4IDgzLTE1IDE1MCA3djU4SDBaJyBmaWxsPScjYzlmNGZiJyBvcGFjaXR5PScuNzgnLz48cGF0aCBkPSdNMCAyNTJjMzQtMTAgNjItMTAgODggMCAzNCAxMyA2OSAxMSAxMDQtNCAzOC0xNiA3NC0xNCAxMDggNCAzNCAxOCA3MiAxOCAxMTAgMCAxNy04IDMzLTEyIDUwLTEydjYwSDBaJyBmaWxsPScjZTlmZGZmJyBvcGFjaXR5PScuOTInLz48ZyBmaWxsPSdub25lJyBzdHJva2UtbGluZWNhcD0ncm91bmQnPjxwYXRoIGQ9J00zNiAyMzhjMTAgMTAgMjQgMTAgMzQgMHMyNC0xMCAzNCAwJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nNScgb3BhY2l0eT0nLjgyJy8+PHBhdGggZD0nTTE3MCAyNDRjMTMgMTIgMzAgMTIgNDMgMHMzMC0xMiA0MyAwJyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nNScgb3BhY2l0eT0nLjcnLz48cGF0aCBkPSdNMzI0IDIzNmMxMiAxMSAyNyAxMSAzOSAwczI4LTExIDQwIDAnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPSc1JyBvcGFjaXR5PScuNzgnLz48cGF0aCBkPSdNNjIgMjcyYzE0IDggMzIgOCA0NiAwJyBzdHJva2U9JyM4NGQ5ZWMnIHN0cm9rZS13aWR0aD0nNCcgb3BhY2l0eT0nLjUnLz48cGF0aCBkPSdNMjQyIDI3MmMxNSA4IDM0IDggNTAgMCcgc3Ryb2tlPScjODRkOWVjJyBzdHJva2Utd2lkdGg9JzQnIG9wYWNpdHk9Jy41Jy8+PHBhdGggZD0nTTM2NSAyNjhjMTMgNyAyOCA3IDQyIDAnIHN0cm9rZT0nIzg0ZDllYycgc3Ryb2tlLXdpZHRoPSc0JyBvcGFjaXR5PScuNScvPjwvZz48ZyBmaWxsPScjZmZmZmZmJyBvcGFjaXR5PScuODgnPjxjaXJjbGUgY3g9JzIwJyBjeT0nMjI4JyByPSc1Jy8+PGNpcmNsZSBjeD0nMTEyJyBjeT0nMjMwJyByPSc0Jy8+PGNpcmNsZSBjeD0nMjg2JyBjeT0nMjMyJyByPSc0LjUnLz48Y2lyY2xlIGN4PSc0MzgnIGN5PScyMzAnIHI9JzUnLz48Y2lyY2xlIGN4PScxNDYnIGN5PScyNjAnIHI9JzMuNScvPjxjaXJjbGUgY3g9JzMxOCcgY3k9JzI2MCcgcj0nMycvPjwvZz48L2c+PC9zdmc+");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: "";
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .snow-dust {
      background:
        radial-gradient(circle at 10% 18%, rgba(255,255,255,0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 20%, rgba(255,255,255,0.86) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 86%, rgba(255,255,255,0.9) 0 3px, transparent 4px),
        radial-gradient(circle at 16% 82%, rgba(255,255,255,0.75) 0 2px, transparent 3px),
        linear-gradient(145deg, rgba(238,248,255,0.78), rgba(207,227,247,0.72)),
        color-mix(in srgb, var(--note-color), white 68%);
      color: #1d2c36;
    }

    .confetti-border {
      background: color-mix(in srgb, var(--note-color), white 74%);
    }

    .confetti-border::before,
    .confetti-border::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .confetti-border::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20114%2034%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%224%22%20fill%3D%22%23ff6961%22%2F%3E%3Crect%20x%3D%2245%22%20y%3D%228%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%23ffcf40%22%20transform%3D%22rotate(22%2048%2016)%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%2215%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%2365a8ff%22%20transform%3D%22rotate(-16%2092%2017.5)%22%2F%3E%3Cpath%20d%3D%22M26%2027c10-8%2020-8%2030%200%22%20fill%3D%22none%22%20stroke%3D%22%237bd88f%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20170%2030%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%23c9a3ff%22%20transform%3D%22rotate(28%2020%2016.5)%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2211%22%20r%3D%224%22%20fill%3D%22%23ffcf40%22%2F%3E%3Crect%20x%3D%22115%22%20y%3D%226%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%237bd88f%22%20transform%3D%22rotate(-24%20118%2014)%22%2F%3E%3Cpath%20d%3D%22M138%2022c9-8%2018-8%2028%200%22%20fill%3D%22none%22%20stroke%3D%22%23ff6961%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2038%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2224%22%20r%3D%224%22%20fill%3D%22%2365a8ff%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%2214%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%23ff6961%22%20transform%3D%22rotate(-20%2061%2022)%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%2222%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%23ffcf40%22%20transform%3D%22rotate(18%20116%2024.5)%22%2F%3E%3Cpath%20d%3D%22M82%2029c10-8%2020-8%2030%200%22%20fill%3D%22none%22%20stroke%3D%22%23c9a3ff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192%2032%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Crect%20x%3D%2218%22%20y%3D%2215%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%237bd88f%22%20transform%3D%22rotate(-26%2026%2017.5)%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2222%22%20r%3D%224%22%20fill%3D%22%23c9a3ff%22%2F%3E%3Crect%20x%3D%22134%22%20y%3D%227%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%2365a8ff%22%20transform%3D%22rotate(22%20137%2015)%22%2F%3E%3Cpath%20d%3D%22M150%2024c10-8%2020-8%2030%200%22%20fill%3D%22none%22%20stroke%3D%22%23ffcf40%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 6px top 2px,
        left 72px top 4px,
        left 42px bottom 7px,
        left 120px bottom 8px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        114px 34px,
        170px 30px,
        148px 38px,
        192px 32px;
    }

    .confetti-border::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20130%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2222%22%20r%3D%224%22%20fill%3D%22%23ff6961%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2250%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%2365a8ff%22%20transform%3D%22rotate(-28%2021%2058)%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2288%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%237bd88f%22%20transform%3D%22rotate(18%2016%2090.5)%22%2F%3E%3Cpath%20d%3D%22M8%20114c8-7%2016-7%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%23ffcf40%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20168%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.2%22%20stdDeviation%3D%22.8%22%20flood-color%3D%22%238b6a64%22%20flood-opacity%3D%22.08%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23s)%22%20opacity%3D%22.68%22%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%23c9a3ff%22%20transform%3D%22rotate(-22%2020%2026.5)%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2268%22%20r%3D%224%22%20fill%3D%22%23ffcf40%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%22104%22%20width%3D%226%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%23ff6961%22%20transform%3D%22rotate(24%2018%20112)%22%2F%3E%3Cpath%20d%3D%22M8%20144c8-7%2016-7%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%2365a8ff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 34px,
        right 0 top 76px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        40px 130px,
        40px 168px;
    }

    .heart-border,
    .star-border {
      background-color: color-mix(in srgb, var(--note-color), white 74%);
    }

    .heart-border::before,
    .star-border::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: "";
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .star-border::before,
    .star-border::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .star-border::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2034%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23fff9c9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffd86f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0a83f%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(22%2017)%20rotate(-12)%20scale(0.46)%22%3E%3Cpath%20d%3D%22M0-22%206-7%2022-7%209%203%2014%2020%200%2010-14%2020-9%203-22-7-6-7Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20168%2028%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23edf7ff%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%238ac6ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235d93dc%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(26%2015)%20rotate(18)%20scale(0.68)%22%3E%3Cpath%20d%3D%22M0-16%203-3%2016%200%203%203%200%2016-3%203-16%200-3-3Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2038%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23edfff4%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2386ddb0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2355a970%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(36%2017)%20rotate(14)%20scale(0.42)%22%3E%3Cpath%20d%3D%22M0-22%206-7%2022-7%209%203%2014%2020%200%2010-14%2020-9%203-22-7-6-7Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%2032%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23fff9c9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffd86f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0a83f%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(30%2015)%20rotate(-16)%20scale(0.72)%22%3E%3Cpath%20d%3D%22M0-16%203-3%2016%200%203%203%200%2016-3%203-16%200-3-3Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 10px top 0,
        left 72px top 5px,
        left 54px bottom 9px,
        left 118px bottom 11px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        112px 34px,
        168px 28px,
        148px 38px,
        190px 32px;
    }

    .star-border::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20128%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23edfff4%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2386ddb0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2355a970%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(20%2044)%20rotate(18)%20scale(0.72)%22%3E%3Cpath%20d%3D%22M0-16%203-3%2016%200%203%203%200%2016-3%203-16%200-3-3Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20166%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23fff9c9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffd86f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f0a83f%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%239c7a33%22%20flood-opacity%3D%22.14%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.82%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(20%2052)%20rotate(-14)%20scale(0.4)%22%3E%3Cpath%20d%3D%22M0-22%206-7%2022-7%209%203%2014%2020%200%2010-14%2020-9%203-22-7-6-7Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 38px,
        right 0 top 84px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        40px 128px,
        40px 166px;
    }

    .heart-border::before,
    .heart-border::after {
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .heart-border::before {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2034%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23fff0f0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ff6f76%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d82432%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(22%2017)%20rotate(-14)%20scale(0.48)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20168%2028%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23f7f0ff%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23c6a2ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239276da%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(26%2015)%20rotate(12)%20scale(0.34)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20148%2038%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23fff0f6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ff8aaa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e24a68%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(36%2017)%20rotate(14)%20scale(0.44)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%2032%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23fff1e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ff9b88%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e8756a%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(30%2015)%20rotate(-12)%20scale(0.38)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 10px top 0,
        left 72px top 5px,
        left 54px bottom 9px,
        left 118px bottom 11px;
      background-repeat:
        round no-repeat,
        round no-repeat,
        round no-repeat,
        round no-repeat;
      background-size:
        112px 34px,
        168px 28px,
        148px 38px,
        190px 32px;
    }

    .heart-border::after {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20128%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23f7f0ff%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23c6a2ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239276da%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(20%2044)%20rotate(-12)%20scale(0.38)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20166%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2225%25%22%20r%3D%2278%25%22%3E%3Cstop%20stop-color%3D%22%23fff0f6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ff8aaa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e24a68%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.1%22%20flood-color%3D%22%23b64f58%22%20flood-opacity%3D%22.16%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%22.88%22%20filter%3D%22url(%23s)%22%20transform%3D%22translate(20%2052)%20rotate(14)%20scale(0.4)%22%3E%3Cpath%20d%3D%22M0%2018C-28-4-18-28%200-17%2018-28%2028-4%200%2018Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position:
        left 0 top 38px,
        right 0 top 84px;
      background-repeat: no-repeat round, no-repeat round;
      background-size:
        40px 128px,
        40px 166px;
    }






    .aurora-glow {
      background:
        radial-gradient(ellipse at 30% 0, rgba(91,244,199,0.35), transparent 42%),
        radial-gradient(ellipse at 70% 0, rgba(197,116,255,0.32), transparent 42%),
        linear-gradient(145deg, #24334f, #51627d);
      color: #f8fbff;
    }

.aurora-glow h3,
.aurora-glow p {
  position: relative;
  z-index: 1;
}

.mini-corner-wildflowers {
      background: radial-gradient(circle at 10px 24px, #f39ac1 0 4px, transparent 5px), radial-gradient(circle at 34px 10px, #96c7ff 0 4px, transparent 5px), radial-gradient(circle at 36px 27px, #ffffff 0 4px, transparent 5px), linear-gradient(90deg, transparent 0 5px, rgba(93,146,91,0.38) 6px 8px, transparent 9px), #fffdf8;
    }
    .mini-birds-flying {
      background: radial-gradient(ellipse at 34% 30%, #65a8ff 0 6px, transparent 7px), radial-gradient(ellipse at 50% 22%, #8fd0ff 0 7px, transparent 8px), radial-gradient(ellipse at 76% 48%, #5da7ee 0 6px, transparent 7px), #cce5ff;
    }
    .mini-floating-petals {
      background: radial-gradient(ellipse at 16% 18%, rgba(244,148,179,0.72) 0 6px, transparent 7px), radial-gradient(ellipse at 82% 76%, rgba(244,184,148,0.62) 0 6px, transparent 7px), radial-gradient(ellipse at 76% 20%, rgba(255,193,210,0.62) 0 5px, transparent 6px), #fffdf8;
    }
    .mini-heart-border {
      background:
        radial-gradient(circle at 18% 22%, rgba(216,36,50,0.82) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 24%, rgba(255,111,118,0.78) 0 4px, transparent 5px),
        radial-gradient(circle at 18% 78%, rgba(198,162,255,0.68) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 78%, rgba(226,74,104,0.76) 0 4px, transparent 5px),
        #fffdf9;
    }
    .mini-star-border {
      background:
        radial-gradient(circle at 18% 22%, rgba(255,216,111,0.82) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 24%, rgba(138,198,255,0.72) 0 4px, transparent 5px),
        radial-gradient(circle at 18% 78%, rgba(134,221,176,0.7) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 78%, rgba(255,216,111,0.74) 0 4px, transparent 5px),
        #fffdf9;
    }
    .mini-sunbeam-corners {
      background: conic-gradient(from -35deg at 0 0, rgba(255,207,64,0.6), transparent 12deg, rgba(255,207,64,0.35) 22deg, transparent 34deg), #fff2a6;
    }
    .mini-butterfly-corners {
      background: radial-gradient(ellipse at 62% 26%, rgba(203,129,225,0.82) 0 7px, transparent 8px), radial-gradient(ellipse at 80% 26%, rgba(246,154,190,0.78) 0 7px, transparent 8px), radial-gradient(ellipse at 22% 76%, rgba(165,216,255,0.68) 0 6px, transparent 7px), #fffdf8;
    }
    .mini-watercolor-bloom {
      background: radial-gradient(circle at 0 0, rgba(255,136,174,0.48), transparent 48%), radial-gradient(circle at 100% 100%, rgba(111,180,255,0.42), transparent 48%), #fffdf8;
    }
    .mini-garden-trellis {
      background: linear-gradient(45deg, transparent 0 46%, rgba(95,146,101,0.24) 47% 53%, transparent 54%) 0 0 / 16px 16px, linear-gradient(-45deg, transparent 0 46%, rgba(95,146,101,0.18) 47% 53%, transparent 54%) 0 0 / 16px 16px, #f3f0dc;
    }
    .mini-rainbow-mist {
      background: radial-gradient(circle at 0 0, rgba(255,111,145,0.42), transparent 44%), radial-gradient(circle at 100% 0, rgba(255,209,102,0.4), transparent 44%), radial-gradient(circle at 100% 100%, rgba(101,168,255,0.42), transparent 44%), #fffdf9;
    }
    .mini-fireflies {
      background: radial-gradient(circle at 16% 22%, #ffdc70 0 2px, transparent 3px), radial-gradient(circle at 82% 76%, rgba(255,220,112,0.8) 0 2px, transparent 3px), #314c46;
    }
    .mini-ocean-foam {
      background:
        linear-gradient(180deg, #f4fdff 0 58%, transparent 59%),
        radial-gradient(ellipse at 20% 76%, rgba(255,255,255,0.95) 0 8px, transparent 9px),
        radial-gradient(ellipse at 56% 74%, rgba(255,255,255,0.9) 0 10px, transparent 11px),
        radial-gradient(ellipse at 90% 78%, rgba(255,255,255,0.92) 0 8px, transparent 9px),
        linear-gradient(180deg, #8eddf0 58%, #4fb7d7 78%, #e9fdff 79%);
    }
    .mini-snow-dust {
      background: radial-gradient(circle at 16% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 78% 76%, rgba(255,255,255,0.9) 0 2px, transparent 3px), #cfe3f7;
    }
    .mini-confetti-border {
      background:
        radial-gradient(circle at 14% 18%, rgba(255,105,97,0.72) 0 2px, transparent 3px),
        radial-gradient(circle at 38% 12%, rgba(255,207,64,0.66) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 20%, rgba(101,168,255,0.7) 0 2px, transparent 3px),
        radial-gradient(circle at 12% 56%, rgba(123,216,143,0.66) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 58%, rgba(201,163,255,0.68) 0 2px, transparent 3px),
        radial-gradient(circle at 20% 86%, rgba(255,207,64,0.64) 0 2px, transparent 3px),
        radial-gradient(circle at 54% 88%, rgba(255,105,97,0.62) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 82%, rgba(101,168,255,0.68) 0 2px, transparent 3px),
        #fffdf9;
    }
    .mini-aurora-glow {
      background: radial-gradient(ellipse at 32% 0, rgba(91,244,199,0.58), transparent 56%), radial-gradient(ellipse at 78% 0, rgba(197,116,255,0.48), transparent 56%), #34445f;
    }
@media (max-width: 767px) {
  .style-buttons {
    max-height: 260px;
  }

  .background-preset-preview-stage {
    min-height: 300px;
  }

  .note {
    min-height: 220px;
    padding: 22px 18px;
  }

  .note h3 {
    font-size: 24px;
  }
}
.widget-preset-content.has-background-preset.preset-widget-stickynotes .widget-name {
  padding: 0 0 6px;
}

.widget-preset-content.has-background-preset.preset-widget-weather .col-12,
.widget-preset-content.has-background-preset.preset-widget-weather .col-6,
.widget-preset-content.has-background-preset.preset-widget-quotes .col-12,
.widget-preset-content.has-background-preset.preset-widget-countdown .col-12 {
  padding-left: 0;
  padding-right: 0;
}

.widget-preset-content.has-background-preset.preset-widget-weather .center-element,
.widget-preset-content.has-background-preset.preset-widget-countdown .center-element {
  justify-content: flex-start !important;
}

.widget-preset-content.has-background-preset.preset-widget-weather #weather,
.widget-preset-content.has-background-preset.preset-widget-countdown [id^="countdown_"],
.widget-preset-content.has-background-preset.preset-widget-quotes [id^="quotes_"] {
  box-sizing: border-box;
  width: 100%;
}

.widget-preset-content.has-background-preset.preset-widget-countdown .equal-element {
  width: 100%;
}

.widget-preset-content.has-background-preset.preset-widget-countdown .count-down-box {
  box-sizing: border-box;
  min-width: 0;
}