html {
  min-height: 100%;
}

body {
  margin: 0;
}

#dist-app {
  display: contents;
}

.dist-back-home {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  top: max(18px, env(safe-area-inset-top));
  z-index: 999;
  padding: 10px 14px;
  border: 1px solid rgba(255, 232, 232, 0.2);
  border-radius: 999px;
  background: rgba(9, 0, 20, 0.56);
  color: #fff8f8;
  font: 800 0.92rem "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.dist-back-home:hover,
.dist-back-home:focus-visible {
  outline: 2px solid rgba(255, 216, 156, 0.42);
  outline-offset: 2px;
}


/* dashboard */
body.dist-dashboard {
  --page: #fff7fb;
  --blush: #ffdce8;
  --blush-strong: #f8a9c0;
  --berry: #9b2447;
  --berry-deep: #64132c;
  --sage: #6aa37c;
  --sage-soft: #dff0e5;
  --gold: #d59a3f;
  --ink: #3c1e2a;
  --muted: #7d5d68;
  --white: #fffefe;
  --line: rgba(155, 36, 71, 0.14);
}

body.dist-dashboard *,
body.dist-dashboard *::before,
body.dist-dashboard *::after {
  box-sizing: border-box;
}

body.dist-dashboard {
  min-height: 100%;
  background: var(--page);
}

body.dist-dashboard {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 220, 232, 0.9) 0 92px, transparent 93px),
    radial-gradient(circle at 84% 18%, rgba(223, 240, 229, 0.95) 0 108px, transparent 109px),
    radial-gradient(circle at 74% 82%, rgba(248, 169, 192, 0.32) 0 140px, transparent 141px),
    linear-gradient(180deg, #fff9fc 0%, #fff0f6 52%, #f7fff9 100%);
  overflow-x: hidden;
}

body.dist-dashboard::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(155, 36, 71, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 36, 71, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

body.dist-dashboard a {
  color: inherit;
}

body.dist-dashboard .floating-hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.dist-dashboard .heart {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-radius: 4px 4px 0 4px;
  background: rgba(248, 169, 192, 0.58);
  animation: float-heart 7s ease-in-out infinite;
}

body.dist-dashboard .heart::before,
body.dist-dashboard .heart::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
}

body.dist-dashboard .heart::before {
  left: -9px;
}

body.dist-dashboard .heart::after {
  top: -9px;
}

body.dist-dashboard .heart--1 {
  left: 10%;
  top: 22%;
}

body.dist-dashboard .heart--2 {
  left: 20%;
  top: 72%;
  width: 13px;
  height: 13px;
  animation-delay: 1.2s;
}

body.dist-dashboard .heart--2::before,
body.dist-dashboard .heart--2::after {
  width: 13px;
  height: 13px;
}

body.dist-dashboard .heart--2::before {
  left: -6.5px;
}

body.dist-dashboard .heart--2::after {
  top: -6.5px;
}

body.dist-dashboard .heart--3 {
  right: 13%;
  top: 28%;
  background: rgba(106, 163, 124, 0.36);
  animation-delay: 2s;
}

body.dist-dashboard .heart--4 {
  right: 21%;
  bottom: 18%;
  width: 15px;
  height: 15px;
  animation-delay: 800ms;
}

body.dist-dashboard .heart--4::before,
body.dist-dashboard .heart--4::after {
  width: 15px;
  height: 15px;
}

body.dist-dashboard .heart--4::before {
  left: -7.5px;
}

body.dist-dashboard .heart--4::after {
  top: -7.5px;
}

body.dist-dashboard .heart--5 {
  left: 50%;
  top: 12%;
  width: 12px;
  height: 12px;
  background: rgba(213, 154, 63, 0.34);
  animation-delay: 2.8s;
}

body.dist-dashboard .heart--5::before,
body.dist-dashboard .heart--5::after {
  width: 12px;
  height: 12px;
}

body.dist-dashboard .heart--5::before {
  left: -6px;
}

body.dist-dashboard .heart--5::after {
  top: -6px;
}

body.dist-dashboard .dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 28px;
  width: min(560px, calc(100% - clamp(24px, 7vw, 64px)));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(28px, env(safe-area-inset-top))
    0
    max(28px, env(safe-area-inset-bottom));
}

body.dist-dashboard .intro {
  text-align: center;
}

body.dist-dashboard .eyebrow {
  margin: 0 0 12px;
  color: var(--berry);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.dist-dashboard .intro h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.dist-dashboard .intro__copy {
  max-width: 410px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

body.dist-dashboard .choices {
  display: grid;
  gap: 12px;
}

body.dist-dashboard .choice {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 254, 254, 0.82);
  box-shadow: 0 18px 40px rgba(155, 36, 71, 0.09);
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.dist-dashboard .choice:hover,
body.dist-dashboard .choice:focus-visible,
body.dist-dashboard .choice.is-selected {
  border-color: rgba(155, 36, 71, 0.3);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(155, 36, 71, 0.15);
  transform: translateY(-2px);
  outline: none;
}

body.dist-dashboard .choice__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--blush);
}

body.dist-dashboard .choice--letters .choice__icon {
  background: var(--sage-soft);
}

body.dist-dashboard .choice--reasons .choice__icon {
  background: #ffe6ef;
}

body.dist-dashboard .choice__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.dist-dashboard .choice__status {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.dist-dashboard .choice__title {
  font-size: 1.28rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.dist-dashboard .choice__description {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.dist-dashboard .choice__arrow {
  color: var(--berry);
  font-size: 1.1rem;
  font-weight: 900;
}

body.dist-dashboard .choice__arrow--muted {
  color: rgba(100, 19, 44, 0.38);
}

body.dist-dashboard .rose-icon__stem {
  position: absolute;
  bottom: 10px;
  width: 5px;
  height: 30px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--sage), #2d6f4a);
}

body.dist-dashboard .rose-icon__leaf {
  position: absolute;
  left: 18px;
  bottom: 21px;
  width: 20px;
  height: 12px;
  border-radius: 100% 4px 100% 4px;
  background: var(--sage);
  transform: rotate(-28deg);
}

body.dist-dashboard .rose-icon__bloom {
  position: absolute;
  top: 12px;
  width: 25px;
  height: 25px;
  border-radius: 58% 42% 55% 45%;
  background:
    radial-gradient(circle at 42% 34%, #ffd4df 0 5px, transparent 6px),
    conic-gradient(from 18deg, #c82f5a, #ff84a1, #9b2447, #f05b82, #c82f5a);
  box-shadow: 0 0 0 4px rgba(248, 169, 192, 0.22);
}

body.dist-dashboard .letter-icon span {
  position: relative;
  width: 33px;
  height: 24px;
  border: 2px solid var(--sage);
  border-radius: 5px;
  background: #fffefe;
}

body.dist-dashboard .letter-icon span::before,
body.dist-dashboard .letter-icon span::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid rgba(106, 163, 124, 0.68);
}

body.dist-dashboard .letter-icon span::before {
  left: -1px;
  transform: skewY(34deg);
}

body.dist-dashboard .letter-icon span::after {
  right: -1px;
  transform: skewY(-34deg);
}

body.dist-dashboard .reason-icon span {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 8px 8px 0 8px;
  background:
    radial-gradient(circle at 38% 35%, #ffd8e5 0 5px, transparent 6px),
    linear-gradient(145deg, #f36f92, var(--berry));
  box-shadow: 0 0 0 7px rgba(248, 169, 192, 0.22);
  transform: rotate(45deg);
}

body.dist-dashboard .reason-icon span::before,
body.dist-dashboard .reason-icon span::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: inherit;
}

body.dist-dashboard .reason-icon span::before {
  left: -14px;
}

body.dist-dashboard .reason-icon span::after {
  top: -14px;
}

body.dist-dashboard [data-locked="true"] {
  cursor: default;
}

@keyframes float-heart {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(0) rotate(45deg);
  }

  50% {
    opacity: 0.78;
    transform: translateY(-14px) rotate(45deg);
  }
}

@media (max-width: 540px) {
  body.dist-dashboard .dashboard {
    width: min(100% - 24px, 440px);
  }

  body.dist-dashboard .choice {
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 15px;
  }

  body.dist-dashboard .choice__icon {
    width: 52px;
    height: 52px;
  }

  body.dist-dashboard .choice__arrow {
    display: none;
  }
}

@media (max-width: 360px) {
  body.dist-dashboard .dashboard {
    width: min(100% - 18px, 340px);
    gap: 20px;
  }

  body.dist-dashboard .intro h1 {
    font-size: 2rem;
  }

  body.dist-dashboard .intro__copy {
    font-size: 0.94rem;
  }

  body.dist-dashboard .choice {
    grid-template-columns: 46px 1fr;
    min-height: 92px;
    padding: 12px;
  }

  body.dist-dashboard .choice__icon {
    width: 44px;
    height: 44px;
  }

  body.dist-dashboard .choice__title {
    font-size: 1.12rem;
  }

  body.dist-dashboard .choice__description {
    font-size: 0.88rem;
  }
}

@media (max-height: 620px) {
  body.dist-dashboard .dashboard {
    place-content: start center;
    gap: 18px;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  body.dist-dashboard .intro h1 {
    font-size: clamp(2rem, 9vh, 3rem);
  }

  body.dist-dashboard .intro__copy {
    margin-top: 10px;
  }

  body.dist-dashboard .choice {
    min-height: 88px;
    padding: 12px 14px;
  }

  body.dist-dashboard .choice__icon {
    width: 48px;
    height: 48px;
  }

  body.dist-dashboard .choice__title {
    font-size: 1.12rem;
  }
}

@supports (min-height: 100dvh) {
  body.dist-dashboard,
body.dist-dashboard .dashboard {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dist-dashboard *,
body.dist-dashboard *::before,
body.dist-dashboard *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}



/* rose-garden */
body.dist-rose-garden *,
body.dist-rose-garden *::after,
body.dist-rose-garden *::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body.dist-rose-garden {
  --dark-color: #000;
}

body.dist-rose-garden {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--dark-color);
  overflow: hidden;
  perspective: 1000px;
}

body.dist-rose-garden .night {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  filter: blur(0.1vmin);
  background-image: radial-gradient(ellipse at top, transparent 0%, var(--dark-color)), radial-gradient(ellipse at bottom, var(--dark-color), rgba(145, 233, 255, 0.2)), repeating-linear-gradient(220deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), linear-gradient(90deg, rgb(0, 255, 250), rgb(240, 240, 240));
}

body.dist-rose-garden .flowers {
  position: relative;
  transform: scale(0.9);
}

body.dist-rose-garden .flower {
  position: absolute;
  bottom: 10vmin;
  transform-origin: bottom center;
  z-index: 10;
  --fl-speed: 0.8s;
}
body.dist-rose-garden .flower--1 {
  animation: moving-flower-1 4s linear infinite;
}
body.dist-rose-garden .flower--1 .flower__line {
  height: 70vmin;
  animation-delay: 0.3s;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1s backwards;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--5 {
  animation: blooming-leaf-right var(--fl-speed) 1.8s backwards;
}
body.dist-rose-garden .flower--1 .flower__line__leaf--6 {
  animation: blooming-leaf-left var(--fl-speed) 2s backwards;
}
body.dist-rose-garden .flower--2 {
  left: 50%;
  transform: rotate(20deg);
  animation: moving-flower-2 4s linear infinite;
}
body.dist-rose-garden .flower--2 .flower__line {
  height: 60vmin;
  animation-delay: 0.6s;
}
body.dist-rose-garden .flower--2 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
}
body.dist-rose-garden .flower--2 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
}
body.dist-rose-garden .flower--2 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
}
body.dist-rose-garden .flower--2 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
}
body.dist-rose-garden .flower--3 {
  left: 50%;
  transform: rotate(-15deg);
  animation: moving-flower-3 4s linear infinite;
}
body.dist-rose-garden .flower--3 .flower__line {
  animation-delay: 0.9s;
}
body.dist-rose-garden .flower--3 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
}
body.dist-rose-garden .flower--3 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
}
body.dist-rose-garden .flower--3 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
}
body.dist-rose-garden .flower--3 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
}
body.dist-rose-garden .flower__leafs {
  position: relative;
  animation: blooming-flower 2s backwards;
}
body.dist-rose-garden .flower__leafs--1 {
  animation-delay: 1.1s;
}
body.dist-rose-garden .flower__leafs--2 {
  animation-delay: 1.4s;
}
body.dist-rose-garden .flower__leafs--3 {
  animation-delay: 1.7s;
}
body.dist-rose-garden .flower__leafs::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  width: 8vmin;
  height: 8vmin;
  background-color: #6bf0ff;
  filter: blur(10vmin);
}
body.dist-rose-garden .flower__leaf {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8vmin;
  height: 11vmin;
  border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
  background-color: #a7ffee;
  background-image: linear-gradient(to top, #54b8aa, #a7ffee);
  transform-origin: bottom center;
  opacity: 0.9;
  box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}
body.dist-rose-garden .flower__leaf--1 {
  transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg);
}
body.dist-rose-garden .flower__leaf--2 {
  transform: translate(-50%, -4%) rotateX(40deg);
}
body.dist-rose-garden .flower__leaf--3 {
  transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg);
}
body.dist-rose-garden .flower__leaf--4 {
  width: 8vmin;
  height: 8vmin;
  transform-origin: bottom left;
  border-radius: 4vmin 10vmin 4vmin 4vmin;
  transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
  background-image: linear-gradient(to top, #39c6d6, #a7ffee);
  z-index: 1;
  opacity: 0.8;
}
body.dist-rose-garden .flower__white-circle {
  position: absolute;
  left: -3.5vmin;
  top: -3vmin;
  width: 9vmin;
  height: 4vmin;
  border-radius: 50%;
  background-color: #fff;
}
body.dist-rose-garden .flower__white-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  border-radius: inherit;
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(157.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 235, 18), rgb(255, 206, 0));
}
body.dist-rose-garden .flower__line {
  height: 55vmin;
  width: 1.5vmin;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)), linear-gradient(to top, transparent 10%, #14757a, #39c6d6);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  animation: grow-flower-tree 4s backwards;
}
body.dist-rose-garden .flower__line__leaf {
  --w: 7vmin;
  --h: calc(var(--w) + 2vmin);
  position: absolute;
  top: 20%;
  left: 90%;
  width: var(--w);
  height: var(--h);
  border-top-right-radius: var(--h);
  border-bottom-left-radius: var(--h);
  background-image: linear-gradient(to top, rgba(20, 117, 122, 0.4), #39c6d6);
}
body.dist-rose-garden .flower__line__leaf--1 {
  transform: rotate(70deg) rotateY(30deg);
}
body.dist-rose-garden .flower__line__leaf--2 {
  top: 45%;
  transform: rotate(70deg) rotateY(30deg);
}
body.dist-rose-garden .flower__line__leaf--3,
body.dist-rose-garden .flower__line__leaf--4,
body.dist-rose-garden .flower__line__leaf--6 {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: var(--h);
  border-bottom-right-radius: var(--h);
  left: -460%;
  top: 12%;
  transform: rotate(-70deg) rotateY(30deg);
}
body.dist-rose-garden .flower__line__leaf--4 {
  top: 40%;
}
body.dist-rose-garden .flower__line__leaf--5 {
  top: 0;
  transform-origin: left;
  transform: rotate(70deg) rotateY(30deg) scale(0.6);
}
body.dist-rose-garden .flower__line__leaf--6 {
  top: -2%;
  left: -450%;
  transform-origin: right;
  transform: rotate(-70deg) rotateY(30deg) scale(0.6);
}
body.dist-rose-garden .flower__light {
  position: absolute;
  bottom: 0vmin;
  width: 1vmin;
  height: 1vmin;
  background-color: rgb(255, 251, 0);
  border-radius: 50%;
  filter: blur(0.2vmin);
  animation: light-ans 4s linear infinite backwards;
}
body.dist-rose-garden .flower__light:nth-child(odd) {
  background-color: #23f0ff;
}
body.dist-rose-garden .flower__light--1 {
  left: -2vmin;
  animation-delay: 1s;
}
body.dist-rose-garden .flower__light--2 {
  left: 3vmin;
  animation-delay: 0.5s;
}
body.dist-rose-garden .flower__light--3 {
  left: -6vmin;
  animation-delay: 0.3s;
}
body.dist-rose-garden .flower__light--4 {
  left: 6vmin;
  animation-delay: 0.9s;
}
body.dist-rose-garden .flower__light--5 {
  left: -1vmin;
  animation-delay: 1.5s;
}
body.dist-rose-garden .flower__light--6 {
  left: -4vmin;
  animation-delay: 3s;
}
body.dist-rose-garden .flower__light--7 {
  left: 3vmin;
  animation-delay: 2s;
}
body.dist-rose-garden .flower__light--8 {
  left: -6vmin;
  animation-delay: 3.5s;
}
body.dist-rose-garden .flower__grass {
  --c: #159faa;
  --line-w: 1.5vmin;
  position: absolute;
  bottom: 12vmin;
  left: -7vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 20;
  transform-origin: bottom center;
  transform: rotate(-48deg) rotateY(40deg);
}
body.dist-rose-garden .flower__grass--1 {
  animation: moving-grass 2s linear infinite;
}
body.dist-rose-garden .flower__grass--2 {
  left: 2vmin;
  bottom: 10vmin;
  transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
  opacity: 0.8;
  z-index: 0;
  animation: moving-grass--2 1.5s linear infinite;
}
body.dist-rose-garden .flower__grass--top {
  width: 7vmin;
  height: 10vmin;
  border-top-right-radius: 100%;
  border-right: var(--line-w) solid var(--c);
  transform-origin: bottom center;
  transform: rotate(-2deg);
}
body.dist-rose-garden .flower__grass--bottom {
  margin-top: -2px;
  width: var(--line-w);
  height: 25vmin;
  background-image: linear-gradient(to top, transparent, var(--c));
}
body.dist-rose-garden .flower__grass__leaf {
  --size: 10vmin;
  position: absolute;
  width: calc(var(--size) * 2.1);
  height: var(--size);
  border-top-left-radius: var(--size);
  border-top-right-radius: var(--size);
  background-image: linear-gradient(to top, transparent, transparent 30%, var(--c));
  z-index: 100;
}
body.dist-rose-garden .flower__grass__leaf--1 {
  top: -6%;
  left: 30%;
  --size: 6vmin;
  transform: rotate(-20deg);
  animation: growing-grass-ans--1 2s 2.6s backwards;
}
@keyframes growing-grass-ans--1 {
  0% {
    transform-origin: bottom left;
    transform: rotate(-20deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--2 {
  top: -5%;
  left: -110%;
  --size: 6vmin;
  transform: rotate(10deg);
  animation: growing-grass-ans--2 2s 2.4s linear backwards;
}
@keyframes growing-grass-ans--2 {
  0% {
    transform-origin: bottom right;
    transform: rotate(10deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--3 {
  top: 5%;
  left: 60%;
  --size: 8vmin;
  transform: rotate(-18deg) rotateX(-20deg);
  animation: growing-grass-ans--3 2s 2.2s linear backwards;
}
@keyframes growing-grass-ans--3 {
  0% {
    transform-origin: bottom left;
    transform: rotate(-18deg) rotateX(-20deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--4 {
  top: 6%;
  left: -135%;
  --size: 8vmin;
  transform: rotate(2deg);
  animation: growing-grass-ans--4 2s 2s linear backwards;
}
@keyframes growing-grass-ans--4 {
  0% {
    transform-origin: bottom right;
    transform: rotate(2deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--5 {
  top: 20%;
  left: 60%;
  --size: 10vmin;
  transform: rotate(-24deg) rotateX(-20deg);
  animation: growing-grass-ans--5 2s 1.8s linear backwards;
}
@keyframes growing-grass-ans--5 {
  0% {
    transform-origin: bottom left;
    transform: rotate(-24deg) rotateX(-20deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--6 {
  top: 22%;
  left: -180%;
  --size: 10vmin;
  transform: rotate(10deg);
  animation: growing-grass-ans--6 2s 1.6s linear backwards;
}
@keyframes growing-grass-ans--6 {
  0% {
    transform-origin: bottom right;
    transform: rotate(10deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--7 {
  top: 39%;
  left: 70%;
  --size: 10vmin;
  transform: rotate(-10deg);
  animation: growing-grass-ans--7 2s 1.4s linear backwards;
}
@keyframes growing-grass-ans--7 {
  0% {
    transform-origin: bottom left;
    transform: rotate(-10deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__leaf--8 {
  top: 40%;
  left: -215%;
  --size: 11vmin;
  transform: rotate(10deg);
  animation: growing-grass-ans--8 2s 1.2s linear backwards;
}
@keyframes growing-grass-ans--8 {
  0% {
    transform-origin: bottom right;
    transform: rotate(10deg) scale(0);
  }
}
body.dist-rose-garden .flower__grass__overlay {
  position: absolute;
  top: -10%;
  right: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  filter: blur(1.5vmin);
  z-index: 100;
}
body.dist-rose-garden .flower__g-long {
  --w: 2vmin;
  --h: 6vmin;
  --c: #159faa;
  position: absolute;
  bottom: 10vmin;
  left: -3vmin;
  transform-origin: bottom center;
  transform: rotate(-30deg) rotateY(-20deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: flower-g-long-ans 3s linear infinite;
}
@keyframes flower-g-long-ans {
  0%, 100% {
    transform: rotate(-30deg) rotateY(-20deg);
  }
  50% {
    transform: rotate(-32deg) rotateY(-20deg);
  }
}
body.dist-rose-garden .flower__g-long__top {
  top: calc(var(--h) * -1);
  width: calc(var(--w) + 1vmin);
  height: var(--h);
  border-top-right-radius: 100%;
  border-right: 0.7vmin solid var(--c);
  transform: translate(-0.7vmin, 1vmin);
}
body.dist-rose-garden .flower__g-long__bottom {
  width: var(--w);
  height: 50vmin;
  transform-origin: bottom center;
  background-image: linear-gradient(to top, transparent 30%, var(--c));
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
}
body.dist-rose-garden .flower__g-right {
  position: absolute;
  bottom: 6vmin;
  left: -2vmin;
  transform-origin: bottom left;
  transform: rotate(20deg);
}
body.dist-rose-garden .flower__g-right .leaf {
  width: 30vmin;
  height: 50vmin;
  border-top-left-radius: 100%;
  border-left: 2vmin solid #079097;
  background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%);
  -webkit-mask-image: linear-gradient(to top, transparent 30%, #079097 60%);
}
body.dist-rose-garden .flower__g-right--1 {
  animation: flower-g-right-ans 2.5s linear infinite;
}
body.dist-rose-garden .flower__g-right--2 {
  left: 5vmin;
  transform: rotateY(-180deg);
  animation: flower-g-right-ans--2 3s linear infinite;
}
body.dist-rose-garden .flower__g-right--2 .leaf {
  height: 75vmin;
  filter: blur(0.3vmin);
  opacity: 0.8;
}
@keyframes flower-g-right-ans {
  0%, 100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(24deg) rotateX(-20deg);
  }
}
@keyframes flower-g-right-ans--2 {
  0%, 100% {
    transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg);
  }
  50% {
    transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg);
  }
}
body.dist-rose-garden .flower__g-front {
  position: absolute;
  bottom: 6vmin;
  left: 2.5vmin;
  z-index: 100;
  transform-origin: bottom center;
  transform: rotate(-28deg) rotateY(30deg) scale(1.04);
  animation: flower__g-front-ans 2s linear infinite;
}
@keyframes flower__g-front-ans {
  0%, 100% {
    transform: rotate(-28deg) rotateY(30deg) scale(1.04);
  }
  50% {
    transform: rotate(-35deg) rotateY(40deg) scale(1.04);
  }
}
body.dist-rose-garden .flower__g-front__line {
  width: 0.3vmin;
  height: 20vmin;
  background-image: linear-gradient(to top, transparent, #079097, transparent 100%);
  position: relative;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: bottom left;
  transform: rotate(10deg);
}
body.dist-rose-garden .flower__g-front__leaf-wrapper:nth-child(even) {
  left: 0vmin;
  transform: rotateY(-180deg) rotate(5deg);
  animation: flower__g-front__leaf-left-ans 1s ease-in backwards;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper:nth-child(odd) {
  animation: flower__g-front__leaf-ans 1s ease-in backwards;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--1 {
  top: -8vmin;
  transform: scale(0.7);
  animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--2 {
  top: -8vmin;
  transform: rotateY(-180deg) scale(0.7) !important;
  animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--3 {
  top: -3vmin;
  animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--4 {
  top: -3vmin;
  transform: rotateY(-180deg) scale(0.9) !important;
  animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
}
@keyframes flower__g-front__leaf-left-ans-2 {
  0% {
    transform: rotateY(-180deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--5,
body.dist-rose-garden .flower__g-front__leaf-wrapper--6 {
  top: 2vmin;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--7,
body.dist-rose-garden .flower__g-front__leaf-wrapper--8 {
  top: 6.5vmin;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--2 {
  animation-delay: 5.2s !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--3 {
  animation-delay: 4.9s !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--5 {
  animation-delay: 4.3s !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--6 {
  animation-delay: 4.1s !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--7 {
  animation-delay: 3.8s !important;
}
body.dist-rose-garden .flower__g-front__leaf-wrapper--8 {
  animation-delay: 3.5s !important;
}
@keyframes flower__g-front__leaf-ans {
  0% {
    transform: rotate(10deg) scale(0);
  }
}
@keyframes flower__g-front__leaf-left-ans {
  0% {
    transform: rotateY(-180deg) rotate(5deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-front__leaf {
  width: 10vmin;
  height: 10vmin;
  border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
  box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2);
  background-image: linear-gradient(to bottom left, transparent, var(--dark-color)), linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent);
  -webkit-mask-image: linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent);
  mask-image: linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent);
}
body.dist-rose-garden .flower__g-fr {
  position: absolute;
  bottom: -4vmin;
  left: vmin;
  transform-origin: bottom left;
  z-index: 10;
  animation: flower__g-fr-ans 2s linear infinite;
}
@keyframes flower__g-fr-ans {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
body.dist-rose-garden .flower__g-fr .leaf {
  width: 30vmin;
  height: 50vmin;
  border-top-left-radius: 100%;
  border-left: 2vmin solid #079097;
  -webkit-mask-image: linear-gradient(to top, transparent 25%, #079097 50%);
  position: relative;
  z-index: 1;
}
body.dist-rose-garden .flower__g-fr__leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 10vmin;
  height: 10vmin;
  border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
  box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2);
  background-image: linear-gradient(to bottom left, transparent, var(--dark-color) 98%), linear-gradient(to bottom right, #23f0ff 45%, transparent 50%, transparent);
  -webkit-mask-image: linear-gradient(135deg, #159faa 40%, transparent 50%, transparent);
}
body.dist-rose-garden .flower__g-fr__leaf--1 {
  left: 20vmin;
  transform: rotate(45deg);
  animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards;
}
@keyframes flower__g-fr-leaft-ans-1 {
  0% {
    transform-origin: left;
    transform: rotate(45deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-fr__leaf--2 {
  left: 12vmin;
  top: -7vmin;
  transform: rotate(25deg) rotateY(-180deg);
  animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards;
}
body.dist-rose-garden .flower__g-fr__leaf--3 {
  left: 15vmin;
  top: 6vmin;
  transform: rotate(55deg);
  animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards;
}
body.dist-rose-garden .flower__g-fr__leaf--4 {
  left: 6vmin;
  top: -2vmin;
  transform: rotate(25deg) rotateY(-180deg);
  animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards;
}
body.dist-rose-garden .flower__g-fr__leaf--5 {
  left: 10vmin;
  top: 14vmin;
  transform: rotate(55deg);
  animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards;
}
@keyframes flower__g-fr-leaft-ans-5 {
  0% {
    transform-origin: left;
    transform: rotate(55deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-fr__leaf--6 {
  left: 0vmin;
  top: 6vmin;
  transform: rotate(25deg) rotateY(-180deg);
  animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards;
}
@keyframes flower__g-fr-leaft-ans-6 {
  0% {
    transform-origin: right;
    transform: rotate(25deg) rotateY(-180deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-fr__leaf--7 {
  left: 5vmin;
  top: 22vmin;
  transform: rotate(45deg);
  animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards;
}
@keyframes flower__g-fr-leaft-ans-7 {
  0% {
    transform-origin: left;
    transform: rotate(45deg) scale(0);
  }
}
body.dist-rose-garden .flower__g-fr__leaf--8 {
  left: -4vmin;
  top: 15vmin;
  transform: rotate(15deg) rotateY(-180deg);
  animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards;
}
@keyframes flower__g-fr-leaft-ans-8 {
  0% {
    transform-origin: right;
    transform: rotate(15deg) rotateY(-180deg) scale(0);
  }
}

body.dist-rose-garden .long-g {
  position: absolute;
  bottom: 25vmin;
  left: -42vmin;
  transform-origin: bottom left;
}
body.dist-rose-garden .long-g--1 {
  bottom: 0vmin;
  transform: scale(0.8) rotate(-5deg);
}
body.dist-rose-garden .long-g--1 .leaf {
  -webkit-mask-image: linear-gradient(to top, transparent 40%, #079097 80%) !important;
}
body.dist-rose-garden .long-g--1 .leaf--1 {
  --w: 5vmin;
  --h: 60vmin;
  left: -2vmin;
  transform: rotate(3deg) rotateY(-180deg);
}
body.dist-rose-garden .long-g--2,
body.dist-rose-garden .long-g--3 {
  bottom: -3vmin;
  left: -35vmin;
  transform-origin: center;
  transform: scale(0.6) rotateX(60deg);
}
body.dist-rose-garden .long-g--2 .leaf,
body.dist-rose-garden .long-g--3 .leaf {
  -webkit-mask-image: linear-gradient(to top, transparent 50%, #079097 80%) !important;
}
body.dist-rose-garden .long-g--2 .leaf--1,
body.dist-rose-garden .long-g--3 .leaf--1 {
  left: -1vmin;
  transform: rotateY(-180deg);
}
body.dist-rose-garden .long-g--3 {
  left: -17vmin;
  bottom: 0vmin;
}
body.dist-rose-garden .long-g--3 .leaf {
  -webkit-mask-image: linear-gradient(to top, transparent 40%, #079097 80%) !important;
}
body.dist-rose-garden .long-g--4 {
  left: 25vmin;
  bottom: -3vmin;
  transform-origin: center;
  transform: scale(0.6) rotateX(60deg);
}
body.dist-rose-garden .long-g--4 .leaf {
  -webkit-mask-image: linear-gradient(to top, transparent 50%, #079097 80%) !important;
}
body.dist-rose-garden .long-g--5 {
  left: 42vmin;
  bottom: 0vmin;
  transform: scale(0.8) rotate(2deg);
}
body.dist-rose-garden .long-g--6 {
  left: 0vmin;
  bottom: -20vmin;
  z-index: 100;
  filter: blur(0.3vmin);
  transform: scale(0.8) rotate(2deg);
}
body.dist-rose-garden .long-g--7 {
  left: 35vmin;
  bottom: 20vmin;
  z-index: -1;
  filter: blur(0.3vmin);
  transform: scale(0.6) rotate(2deg);
  opacity: 0.7;
}
body.dist-rose-garden .long-g .leaf {
  --w: 15vmin;
  --h: 40vmin;
  --c: #1aaa15;
  position: absolute;
  bottom: 0;
  width: var(--w);
  height: var(--h);
  border-top-left-radius: 100%;
  border-left: 2vmin solid var(--c);
  -webkit-mask-image: linear-gradient(to top, transparent 20%, var(--dark-color));
  transform-origin: bottom center;
}
body.dist-rose-garden .long-g .leaf--0 {
  left: 2vmin;
  animation: leaf-ans-1 4s linear infinite;
}
body.dist-rose-garden .long-g .leaf--1 {
  --w: 5vmin;
  --h: 60vmin;
  animation: leaf-ans-1 4s linear infinite;
}
body.dist-rose-garden .long-g .leaf--2 {
  --w: 10vmin;
  --h: 40vmin;
  left: -0.5vmin;
  bottom: 5vmin;
  transform-origin: bottom left;
  transform: rotateY(-180deg);
  animation: leaf-ans-2 3s linear infinite;
}
body.dist-rose-garden .long-g .leaf--3 {
  --w: 5vmin;
  --h: 30vmin;
  left: -1vmin;
  bottom: 3.2vmin;
  transform-origin: bottom left;
  transform: rotate(-10deg) rotateY(-180deg);
  animation: leaf-ans-3 3s linear infinite;
}

@keyframes leaf-ans-1 {
  0%, 100% {
    transform: rotate(-5deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.1);
  }
}
@keyframes leaf-ans-2 {
  0%, 100% {
    transform: rotateY(-180deg) rotate(5deg);
  }
  50% {
    transform: rotateY(-180deg) rotate(0deg) scale(1.1);
  }
}
@keyframes leaf-ans-3 {
  0%, 100% {
    transform: rotate(-10deg) rotateY(-180deg);
  }
  50% {
    transform: rotate(-20deg) rotateY(-180deg);
  }
}
body.dist-rose-garden .grow-ans {
  animation: grow-ans 2s var(--d) backwards;
}

@keyframes grow-ans {
  0% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes light-ans {
  0% {
    opacity: 0;
    transform: translateY(0vmin);
  }
  25% {
    opacity: 1;
    transform: translateY(-5vmin) translateX(-2vmin);
  }
  50% {
    opacity: 1;
    transform: translateY(-15vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }
  75% {
    transform: translateY(-20vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }
  100% {
    transform: translateY(-30vmin);
    opacity: 0;
    filter: blur(1vmin);
  }
}
@keyframes moving-flower-1 {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}
@keyframes moving-flower-2 {
  0%, 100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(14deg);
  }
}
@keyframes moving-flower-3 {
  0%, 100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(-20deg) rotateY(-10deg);
  }
}
@keyframes blooming-leaf-right {
  0% {
    transform-origin: left;
    transform: rotate(70deg) rotateY(30deg) scale(0);
  }
}
@keyframes blooming-leaf-left {
  0% {
    transform-origin: right;
    transform: rotate(-70deg) rotateY(30deg) scale(0);
  }
}
@keyframes grow-flower-tree {
  0% {
    height: 0;
    border-radius: 1vmin;
  }
}
@keyframes blooming-flower {
  0% {
    transform: scale(0);
  }
}
@keyframes moving-grass {
  0%, 100% {
    transform: rotate(-48deg) rotateY(40deg);
  }
  50% {
    transform: rotate(-50deg) rotateY(40deg);
  }
}
@keyframes moving-grass--2 {
  0%, 100% {
    transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
  }
  50% {
    transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg);
  }
}
body.dist-rose-garden .growing-grass {
  animation: growing-grass-ans 1s 2s backwards;
}

@keyframes growing-grass-ans {
  0% {
    transform: scale(0);
  }
}
body.dist-rose-garden /* Rose garden upgrade */
:root {
  --dark-color: #05030d;
  --leaf-dark: #062517;
  --leaf-mid: #17663d;
  --leaf-light: #78c66f;
  --moon: #ffe8b7;
}

body.dist-rose-garden {
  background: radial-gradient(ellipse at 50% 112%, rgba(136, 20, 44, 0.42), transparent 48%), radial-gradient(ellipse at 50% 86%, rgba(25, 118, 76, 0.16), transparent 42%), linear-gradient(180deg, #080013 0%, #020611 58%, #030806 100%);
}

body.dist-rose-garden .night {
  z-index: 0;
  overflow: hidden;
  filter: none;
  background-image: radial-gradient(circle at 74% 14%, rgba(255, 226, 177, 0.34) 0 2vmin, transparent 18vmin), radial-gradient(ellipse at 52% 72%, rgba(178, 35, 70, 0.22), transparent 36%), radial-gradient(ellipse at top, rgba(27, 19, 58, 0.72), transparent 60%), linear-gradient(180deg, #090014 0%, #04111e 52%, #020704 100%);
}

body.dist-rose-garden .night::before,
body.dist-rose-garden .night::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.dist-rose-garden .night::before {
  left: auto;
  right: 12vw;
  top: 8vh;
  width: 13vmin;
  height: 13vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff8df 0 18%, var(--moon) 42%, rgba(246, 189, 99, 0.78) 64%, transparent 68%);
  box-shadow: 0 0 3vmin rgba(255, 232, 183, 0.55), 0 0 12vmin rgba(255, 170, 108, 0.28);
  opacity: 0.92;
}

body.dist-rose-garden .night::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 0.16vmin, transparent 0.22vmin), radial-gradient(circle, rgba(255, 211, 173, 0.72) 0 0.14vmin, transparent 0.22vmin), radial-gradient(circle, rgba(179, 214, 255, 0.7) 0 0.12vmin, transparent 0.2vmin);
  background-position: 0 0, 7vmin 11vmin, 17vmin 3vmin;
  background-size: 19vmin 23vmin, 31vmin 29vmin, 43vmin 37vmin;
  opacity: 0.48;
  animation: stars-twinkle 7s ease-in-out infinite alternate;
}

body.dist-rose-garden .flowers {
  z-index: 3;
  transform: scale(0.94);
  filter: drop-shadow(0 3vmin 2vmin rgba(0, 0, 0, 0.42));
}

body.dist-rose-garden .flowers::before,
body.dist-rose-garden .flowers::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.dist-rose-garden .flowers::before {
  left: 50%;
  bottom: -9vmin;
  width: 110vmin;
  height: 20vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 67, 107, 0.2), transparent 63%), radial-gradient(ellipse at center, rgba(67, 180, 107, 0.22), transparent 72%);
  filter: blur(2.4vmin);
  z-index: -2;
}

body.dist-rose-garden .flowers::after {
  left: -38vmin;
  bottom: 3vmin;
  width: 1.7vmin;
  height: 0.75vmin;
  border-radius: 70% 25% 70% 25%;
  background: #c3264a;
  box-shadow: 9vmin 1.2vmin 0 #9d1535, 16vmin -0.4vmin 0 #e54a67, 29vmin 1vmin 0 #7d102b, 53vmin -0.2vmin 0 #d9385b, 72vmin 1.4vmin 0 #a81739, 91vmin 0.1vmin 0 #ed5977;
  opacity: 0.8;
  transform: rotate(-14deg);
  filter: drop-shadow(0 0 1vmin rgba(255, 73, 112, 0.28));
}

body.dist-rose-garden .flower {
  --rose-hi: #ff9bb1;
  --rose-mid: #f12c59;
  --rose-deep: #810825;
  --rose-dark: #3d0013;
  --rose-edge: #ffd1dc;
}

body.dist-rose-garden .flower--2 {
  --rose-hi: #ffc0cf;
  --rose-mid: #ff4b72;
  --rose-deep: #9b0b31;
  --rose-dark: #470016;
}

body.dist-rose-garden .flower--3 {
  --rose-hi: #ff7898;
  --rose-mid: #cf1743;
  --rose-deep: #65061d;
  --rose-dark: #2c000d;
}

body.dist-rose-garden .flower__leafs {
  transform-style: preserve-3d;
  filter: drop-shadow(0 1.2vmin 0.8vmin rgba(50, 0, 19, 0.55)) drop-shadow(0 0 3vmin rgba(255, 54, 103, 0.32));
}

body.dist-rose-garden .flower--2 .flower__leafs {
  transform: scale(0.92) rotate(-4deg);
}

body.dist-rose-garden .flower--3 .flower__leafs {
  transform: scale(0.86) rotate(5deg);
}

body.dist-rose-garden .flower__leafs::before {
  content: "";
  position: absolute;
  left: -7.4vmin;
  top: -11.3vmin;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 72, 111, 0.42), transparent 66%);
  filter: blur(1.3vmin);
  z-index: -3;
}

body.dist-rose-garden .flower__leafs::after {
  left: -8.5vmin;
  top: -12vmin;
  width: 17vmin;
  height: 17vmin;
  transform: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 52%, rgba(255, 184, 200, 0.26), transparent 38%), radial-gradient(circle, rgba(210, 27, 68, 0.36), transparent 70%);
  filter: blur(3.2vmin);
  z-index: -4;
}

body.dist-rose-garden .flower__leaf {
  width: 10.5vmin;
  height: 12.5vmin;
  border-radius: 64% 36% 62% 38%/58% 44% 56% 42%;
  background-color: var(--rose-mid);
  background-image: radial-gradient(ellipse at 54% 20%, rgba(255, 232, 238, 0.72), transparent 18%), radial-gradient(ellipse at 18% 86%, rgba(58, 0, 20, 0.48), transparent 58%), linear-gradient(145deg, var(--rose-hi) 0%, var(--rose-mid) 47%, var(--rose-deep) 100%);
  box-shadow: inset -0.9vmin -1.4vmin 1.8vmin rgba(55, 0, 19, 0.5), inset 0.7vmin 1vmin 1.1vmin rgba(255, 239, 244, 0.28), 0 0 2.2vmin rgba(245, 46, 91, 0.34);
  opacity: 1;
  transform-origin: 50% 100%;
}

body.dist-rose-garden .flower__leaf::before,
body.dist-rose-garden .flower__leaf::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

body.dist-rose-garden .flower__leaf::before {
  left: 13%;
  top: 10%;
  width: 78%;
  height: 76%;
  background: radial-gradient(ellipse at 60% 15%, rgba(255, 247, 250, 0.66), transparent 16%), linear-gradient(150deg, rgba(255, 143, 166, 0.9), rgba(147, 5, 43, 0.78));
  box-shadow: inset -0.45vmin -0.8vmin 1vmin rgba(48, 0, 17, 0.38);
  opacity: 0.82;
  transform: rotate(-9deg) scale(0.72);
}

body.dist-rose-garden .flower__leaf::after {
  left: 28%;
  top: 19%;
  width: 55%;
  height: 68%;
  background: radial-gradient(ellipse at 50% 14%, rgba(255, 226, 234, 0.48), transparent 18%), linear-gradient(170deg, rgba(255, 85, 122, 0.84), rgba(90, 0, 28, 0.86));
  opacity: 0.72;
  transform: rotate(18deg) scale(0.6);
}

body.dist-rose-garden .flower__leaf--1 {
  transform: translate(-8%, 5%) rotate(-34deg) rotateY(58deg) rotateX(-16deg);
  z-index: 5;
}

body.dist-rose-garden .flower__leaf--2 {
  width: 11.2vmin;
  height: 13.6vmin;
  transform: translate(-50%, -7%) rotateX(28deg) scale(1.05);
  z-index: 6;
}

body.dist-rose-garden .flower__leaf--3 {
  transform: translate(-92%, 3%) rotate(34deg) rotateY(58deg) rotateX(16deg);
  z-index: 5;
}

body.dist-rose-garden .flower__leaf--4 {
  width: 11vmin;
  height: 9.2vmin;
  border-radius: 60% 60% 42% 42%/72% 72% 35% 35%;
  transform-origin: bottom center;
  transform: translate(-50%, 22%) rotateX(72deg) scaleX(1.18);
  background-image: radial-gradient(ellipse at 50% 18%, rgba(255, 219, 228, 0.72), transparent 21%), linear-gradient(to top, var(--rose-deep), var(--rose-mid) 58%, var(--rose-hi));
  z-index: 8;
}

body.dist-rose-garden .flower__leaf--1::before {
  transform: translate(-20%, 7%) rotate(-28deg) scale(0.78);
}

body.dist-rose-garden .flower__leaf--1::after {
  transform: translate(-5%, 10%) rotate(22deg) scale(0.62);
}

body.dist-rose-garden .flower__leaf--2::before {
  transform: translate(-6%, 0) rotate(18deg) scale(0.76);
}

body.dist-rose-garden .flower__leaf--2::after {
  transform: translate(2%, 4%) rotate(-24deg) scale(0.58);
}

body.dist-rose-garden .flower__leaf--3::before {
  transform: translate(18%, 7%) rotate(28deg) scale(0.78);
}

body.dist-rose-garden .flower__leaf--3::after {
  transform: translate(8%, 10%) rotate(-22deg) scale(0.62);
}

body.dist-rose-garden .flower__leaf--4::before {
  transform: translate(-9%, 4%) rotate(-7deg) scale(0.72);
}

body.dist-rose-garden .flower__leaf--4::after {
  transform: translate(13%, 7%) rotate(15deg) scale(0.54);
}

body.dist-rose-garden .flower__white-circle {
  left: -4.9vmin;
  top: -5.6vmin;
  width: 9.6vmin;
  height: 9vmin;
  border-radius: 48% 52% 46% 54%/48% 46% 54% 52%;
  background-color: var(--rose-mid);
  background-image: radial-gradient(circle at 50% 52%, var(--rose-edge) 0 8%, transparent 9%), conic-gradient(from -22deg, var(--rose-deep), var(--rose-mid) 13%, var(--rose-hi) 24%, var(--rose-mid) 38%, var(--rose-dark) 54%, var(--rose-mid) 68%, var(--rose-hi) 78%, var(--rose-deep) 100%);
  box-shadow: inset 0 0 1.1vmin rgba(47, 0, 17, 0.68), inset 0.8vmin 0.8vmin 1vmin rgba(255, 235, 241, 0.24), 0 0 2.7vmin rgba(255, 63, 106, 0.48);
  opacity: 1;
  transform: rotate(-10deg);
  z-index: 12;
}

body.dist-rose-garden .flower__white-circle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.8vmin;
  height: 5.2vmin;
  border-radius: 52% 48% 50% 50%;
  background: radial-gradient(ellipse at 50% 34%, rgba(255, 244, 248, 0.78), transparent 18%), conic-gradient(from 128deg, var(--rose-dark), var(--rose-deep) 20%, var(--rose-mid) 41%, var(--rose-hi) 58%, var(--rose-deep) 79%, var(--rose-dark));
  box-shadow: inset 0 0 0.9vmin rgba(55, 0, 18, 0.62);
  transform: translate(-50%, -50%) rotate(24deg);
}

body.dist-rose-garden .flower__white-circle::after {
  left: 50%;
  top: 50%;
  width: 7.2vmin;
  height: 6.6vmin;
  border-radius: 50%;
  background: radial-gradient(ellipse at 48% 48%, transparent 0 31%, rgba(62, 0, 20, 0.78) 32% 35%, transparent 37%), radial-gradient(ellipse at 58% 46%, transparent 0 45%, rgba(255, 226, 234, 0.48) 46% 49%, transparent 51%);
  filter: none;
  transform: translate(-50%, -50%) rotate(-26deg);
  animation: rose-core-shimmer 4.5s ease-in-out infinite;
}

body.dist-rose-garden .flower__line {
  width: 1.15vmin;
  border-radius: 1vmin;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent, rgba(255, 255, 255, 0.18)), linear-gradient(to top, transparent 8%, var(--leaf-dark) 24%, var(--leaf-mid) 62%, var(--leaf-light));
  box-shadow: inset 0 0 0.45vmin rgba(0, 0, 0, 0.58), 0 0 1.3vmin rgba(63, 190, 110, 0.18);
}

body.dist-rose-garden .flower__line__leaf {
  --w: 6vmin;
  --h: calc(var(--w) + 3vmin);
  background-image: radial-gradient(ellipse at 35% 25%, rgba(229, 255, 190, 0.48), transparent 22%), linear-gradient(135deg, #8ed56c 0%, var(--leaf-mid) 52%, var(--leaf-dark) 100%);
  box-shadow: inset -0.7vmin -0.6vmin 0.9vmin rgba(0, 0, 0, 0.24), 0 0 1.2vmin rgba(88, 198, 107, 0.22);
}

body.dist-rose-garden .flower__light {
  background-color: #ffd89c;
  box-shadow: 0 0 1.4vmin rgba(255, 195, 116, 0.85);
}

body.dist-rose-garden .flower__light:nth-child(odd) {
  background-color: #ff6f9f;
  box-shadow: 0 0 1.5vmin rgba(255, 96, 145, 0.8);
}

body.dist-rose-garden .flower__grass,
body.dist-rose-garden .flower__g-long {
  --c: #4fb56b;
}

body.dist-rose-garden .flower__grass__leaf {
  background-image: linear-gradient(to top, transparent, transparent 28%, rgba(176, 229, 118, 0.9)), linear-gradient(to right, transparent, rgba(26, 116, 65, 0.8), transparent);
}

body.dist-rose-garden .flower__grass__overlay {
  display: none;
  background-color: transparent;
}

body.dist-rose-garden .flower__g-right .leaf,
body.dist-rose-garden .flower__g-fr .leaf {
  border-left-color: var(--leaf-mid);
  background-image: linear-gradient(to bottom, transparent, rgba(78, 184, 98, 0.18) 70%);
}

body.dist-rose-garden .flower__g-front__line {
  background-image: linear-gradient(to top, transparent, var(--leaf-light), transparent 100%);
}

body.dist-rose-garden .flower__g-front__leaf,
body.dist-rose-garden .flower__g-fr__leaf {
  box-shadow: inset 0 2px 1vmin rgba(185, 244, 147, 0.2);
  background-image: linear-gradient(to bottom left, transparent, var(--dark-color) 96%), linear-gradient(to bottom right, #5fc46f 45%, transparent 50%, transparent);
}

body.dist-rose-garden .long-g .leaf {
  --c: #58bc67;
  filter: drop-shadow(0 0 0.9vmin rgba(77, 180, 93, 0.2));
}

@keyframes stars-twinkle {
  0% {
    opacity: 0.34;
    transform: translateY(0);
  }
  100% {
    opacity: 0.62;
    transform: translateY(1vmin);
  }
}
@keyframes rose-core-shimmer {
  0%, 100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) rotate(-26deg) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-16deg) scale(1.04);
  }
}
@media (max-width: 680px) {
  body.dist-rose-garden .flowers {
    transform: scale(0.78) translateY(2vmin);
  }
  body.dist-rose-garden .night::before {
    right: 8vw;
    top: 7vh;
    width: 11vmin;
    height: 11vmin;
  }
}
body.dist-rose-garden /* Rose garden refinements */
body {
  font-family: "Segoe UI", Arial, sans-serif;
}

body.dist-rose-garden .flowers {
  filter: none;
  transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease;
}

body.dist-rose-garden .flowers::before {
  display: none;
}

body.dist-rose-garden .flowers::after {
  filter: none;
  opacity: 0.65;
}

body.dist-rose-garden .flower__leafs {
  filter: drop-shadow(0 0 2.2vmin rgba(255, 54, 103, 0.34));
}

body.dist-rose-garden .flower__petal {
  position: absolute;
  left: 50%;
  bottom: -1.1vmin;
  width: 8.8vmin;
  height: 11.2vmin;
  border-radius: 70% 30% 64% 36%/62% 38% 62% 38%;
  transform-origin: 50% 96%;
  background: radial-gradient(ellipse at 52% 17%, rgba(255, 238, 242, 0.74), transparent 18%), radial-gradient(ellipse at 20% 86%, rgba(52, 0, 16, 0.5), transparent 55%), linear-gradient(145deg, var(--rose-hi), var(--rose-mid) 50%, var(--rose-deep));
  box-shadow: inset -0.7vmin -1vmin 1.3vmin rgba(49, 0, 17, 0.5), inset 0.45vmin 0.55vmin 0.85vmin rgba(255, 241, 246, 0.24);
  animation: rose-open 1.35s cubic-bezier(0.16, 0.9, 0.22, 1.08) backwards;
}

body.dist-rose-garden .flower__petal::after {
  content: "";
  position: absolute;
  inset: 9% 16% 15% 18%;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 16%, rgba(255, 247, 249, 0.52), transparent 17%), linear-gradient(165deg, rgba(255, 144, 166, 0.48), rgba(76, 0, 24, 0.34));
}

body.dist-rose-garden .flower__petal::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 12%;
  width: 72%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(165deg, rgba(255, 245, 248, 0.5), rgba(255, 116, 145, 0.18), transparent 74%);
  transform: rotate(-12deg);
}

body.dist-rose-garden .flower__petal--1 {
  transform: translate(-130%, -2.2vmin) rotate(-76deg) rotateY(48deg) rotateX(36deg) scale(1.03);
  z-index: 1;
  animation-delay: 1.35s;
}

body.dist-rose-garden .flower__petal--2 {
  transform: translate(-98%, -7.6vmin) rotate(-42deg) rotateY(24deg) rotateX(28deg) scale(1.08);
  z-index: 2;
  animation-delay: 1.46s;
}

body.dist-rose-garden .flower__petal--3 {
  transform: translate(-50%, -9.8vmin) rotate(0deg) rotateX(30deg) scale(1.12);
  z-index: 2;
  animation-delay: 1.57s;
}

body.dist-rose-garden .flower__petal--4 {
  transform: translate(-2%, -7.6vmin) rotate(42deg) rotateY(-24deg) rotateX(28deg) scale(1.08);
  z-index: 2;
  animation-delay: 1.68s;
}

body.dist-rose-garden .flower__petal--5 {
  transform: translate(30%, -2.2vmin) rotate(76deg) rotateY(-48deg) rotateX(36deg) scale(1.03);
  z-index: 1;
  animation-delay: 1.79s;
}

body.dist-rose-garden .flower__petal--6 {
  transform: translate(-124%, 1.3vmin) rotate(-114deg) rotateX(72deg) scaleX(1.1);
  z-index: 4;
  animation-delay: 1.9s;
}

body.dist-rose-garden .flower__petal--7 {
  transform: translate(-88%, 0.8vmin) rotate(-58deg) rotateX(68deg) scaleX(1.05);
  z-index: 5;
  animation-delay: 2.01s;
}

body.dist-rose-garden .flower__petal--8 {
  transform: translate(-12%, 0.8vmin) rotate(58deg) rotateX(68deg) scaleX(1.05);
  z-index: 5;
  animation-delay: 2.12s;
}

body.dist-rose-garden .flower__petal--9 {
  transform: translate(24%, 1.3vmin) rotate(114deg) rotateX(72deg) scaleX(1.1);
  z-index: 4;
  animation-delay: 2.23s;
}

body.dist-rose-garden .flower__petal--10 {
  width: 11.6vmin;
  height: 8vmin;
  transform: translate(-50%, 3.4vmin) rotateX(80deg) scaleX(1.32);
  border-radius: 64% 64% 34% 34%/82% 82% 28% 28%;
  z-index: 9;
  animation-delay: 2.34s;
}

body.dist-rose-garden .flower__leaf {
  width: 8.4vmin;
  height: 9vmin;
  border-radius: 70% 30% 62% 38%/64% 42% 58% 36%;
}

body.dist-rose-garden .flower__leaf--1 {
  transform: translate(-108%, -2.2vmin) rotate(-54deg) rotateY(52deg) rotateX(18deg);
  z-index: 8;
}

body.dist-rose-garden .flower__leaf--2 {
  width: 8.8vmin;
  height: 9.4vmin;
  transform: translate(-50%, -5.5vmin) rotateX(42deg) scale(0.92);
  z-index: 10;
}

body.dist-rose-garden .flower__leaf--3 {
  transform: translate(8%, -2.2vmin) rotate(54deg) rotateY(-52deg) rotateX(18deg);
  z-index: 8;
}

body.dist-rose-garden .flower__leaf--4 {
  width: 9.4vmin;
  height: 6.8vmin;
  transform: translate(-50%, 1.5vmin) rotateX(76deg) scaleX(1.25);
  z-index: 11;
}

body.dist-rose-garden .flower__white-circle {
  left: -3.35vmin;
  top: -5.25vmin;
  width: 6.7vmin;
  height: 6.25vmin;
  z-index: 13;
}

body.dist-rose-garden .flower__white-circle::before {
  width: 4.1vmin;
  height: 3.85vmin;
}

body.dist-rose-garden .flower__white-circle::after {
  width: 5.05vmin;
  height: 4.7vmin;
}

@keyframes rose-open {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) rotate(0deg) rotateX(80deg) scale(0.18);
  }
}

body.dist-rose-garden /* Responsive viewport support */
html {
  width: 100%;
  min-height: 100%;
  background: var(--dark-color);
}

body.dist-rose-garden {
  --garden-scale: 0.94;
  --garden-y: 0vmin;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
}

body.dist-rose-garden .night {
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
}

body.dist-rose-garden .flowers {
  max-width: 100vw;
  transform: translate3d(0, var(--garden-y), 0) scale(var(--garden-scale));
  transform-origin: bottom center;
}

@media (min-width: 1180px) and (min-height: 760px) {
  body.dist-rose-garden {
    --garden-scale: 1;
  }
}

@media (max-width: 900px) {
  body.dist-rose-garden {
    --garden-scale: 0.88;
    --garden-y: 2vmin;
  }
}

@media (max-width: 680px) {
  body.dist-rose-garden {
    --garden-scale: 0.82;
    --garden-y: 3vmin;
  }
}

@media (max-width: 430px) {
  body.dist-rose-garden {
    --garden-scale: 0.78;
    --garden-y: 5vmin;
  }

  body.dist-rose-garden .night::before {
    right: 7vw;
    top: 5vh;
    top: 5svh;
    width: 12vmin;
    height: 12vmin;
  }
}

@media (max-width: 360px) {
  body.dist-rose-garden {
    --garden-scale: 0.74;
    --garden-y: 7vmin;
  }
}

@media (max-height: 680px) {
  body.dist-rose-garden {
    --garden-scale: 0.78;
    --garden-y: 4vmin;
  }
}

@media (max-height: 560px) {
  body.dist-rose-garden {
    --garden-scale: 0.64;
    --garden-y: 6vmin;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  body.dist-rose-garden {
    --garden-scale: 0.58;
    --garden-y: 8vmin;
  }

  body.dist-rose-garden .night::before {
    right: 6vw;
    top: 5vh;
    top: 5svh;
    width: 9vmin;
    height: 9vmin;
  }
}

@supports (height: 100dvh) {
  body.dist-rose-garden,
body.dist-rose-garden .night {
    min-height: 100dvh;
    height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dist-rose-garden *,
body.dist-rose-garden *::before,
body.dist-rose-garden *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}



/* love-letters */
body.dist-love-letters {
  --page: #fff7fb;
  --paper: #fffefd;
  --paper-warm: #fff4ed;
  --blush: #ffd7e3;
  --pink: #ef7fa0;
  --rose: #b7355e;
  --rose-deep: #68162f;
  --sage: #79a984;
  --sage-soft: #e6f3e9;
  --gold: #d19a48;
  --ink: #3f1d2a;
  --muted: #80606b;
  --line: rgba(183, 53, 94, 0.16);
  --shadow: rgba(104, 22, 47, 0.16);
}

body.dist-love-letters *,
body.dist-love-letters *::before,
body.dist-love-letters *::after {
  box-sizing: border-box;
}

body.dist-love-letters {
  min-height: 100%;
  background: var(--page);
}

body.dist-love-letters {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 215, 227, 0.95) 0 118px, transparent 119px),
    radial-gradient(circle at 84% 17%, rgba(230, 243, 233, 0.96) 0 132px, transparent 133px),
    radial-gradient(circle at 72% 86%, rgba(239, 127, 160, 0.24) 0 170px, transparent 171px),
    linear-gradient(180deg, #fffafd 0%, #fff0f6 54%, #f8fff9 100%);
  overflow-x: hidden;
}

body.dist-love-letters::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(183, 53, 94, 0.1) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(209, 154, 72, 0.12) 0 1px, transparent 1.7px);
  background-position: 0 0, 34px 42px;
  background-size: 78px 92px, 124px 132px;
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

body.dist-love-letters a,
body.dist-love-letters button {
  font: inherit;
}

body.dist-love-letters button {
  border: 0;
}

body.dist-love-letters .soft-hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.dist-love-letters .soft-hearts span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 5px 5px 0 5px;
  background: rgba(239, 127, 160, 0.42);
  transform: rotate(45deg);
  animation: float-heart 7s ease-in-out infinite;
}

body.dist-love-letters .soft-hearts span::before,
body.dist-love-letters .soft-hearts span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
}

body.dist-love-letters .soft-hearts span::before {
  left: -9px;
}

body.dist-love-letters .soft-hearts span::after {
  top: -9px;
}

body.dist-love-letters .soft-hearts span:nth-child(1) {
  left: 11%;
  top: 24%;
}

body.dist-love-letters .soft-hearts span:nth-child(2) {
  left: 23%;
  bottom: 20%;
  width: 13px;
  height: 13px;
  animation-delay: 1.3s;
}

body.dist-love-letters .soft-hearts span:nth-child(2)::before,
body.dist-love-letters .soft-hearts span:nth-child(2)::after {
  width: 13px;
  height: 13px;
}

body.dist-love-letters .soft-hearts span:nth-child(2)::before {
  left: -6.5px;
}

body.dist-love-letters .soft-hearts span:nth-child(2)::after {
  top: -6.5px;
}

body.dist-love-letters .soft-hearts span:nth-child(3) {
  right: 15%;
  top: 25%;
  background: rgba(121, 169, 132, 0.38);
  animation-delay: 2s;
}

body.dist-love-letters .soft-hearts span:nth-child(4) {
  right: 25%;
  bottom: 18%;
  width: 14px;
  height: 14px;
  animation-delay: 700ms;
}

body.dist-love-letters .soft-hearts span:nth-child(4)::before,
body.dist-love-letters .soft-hearts span:nth-child(4)::after {
  width: 14px;
  height: 14px;
}

body.dist-love-letters .soft-hearts span:nth-child(4)::before {
  left: -7px;
}

body.dist-love-letters .soft-hearts span:nth-child(4)::after {
  top: -7px;
}

body.dist-love-letters .soft-hearts span:nth-child(5) {
  left: 50%;
  top: 12%;
  width: 12px;
  height: 12px;
  background: rgba(209, 154, 72, 0.32);
  animation-delay: 2.8s;
}

body.dist-love-letters .soft-hearts span:nth-child(5)::before,
body.dist-love-letters .soft-hearts span:nth-child(5)::after {
  width: 12px;
  height: 12px;
}

body.dist-love-letters .soft-hearts span:nth-child(5)::before {
  left: -6px;
}

body.dist-love-letters .soft-hearts span:nth-child(5)::after {
  top: -6px;
}

body.dist-love-letters .letters-page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(760px, calc(100% - clamp(24px, 7vw, 72px)));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(24px, env(safe-area-inset-top))
    0
    max(32px, env(safe-area-inset-bottom));
}

body.dist-love-letters .back-link {
  width: fit-content;
  color: var(--rose);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

body.dist-love-letters .back-link:hover,
body.dist-love-letters .back-link:focus-visible {
  color: var(--rose-deep);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.dist-love-letters .letter-stage {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  text-align: center;
}

body.dist-love-letters .eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.dist-love-letters h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.dist-love-letters .stage-copy,
body.dist-love-letters .hint {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

body.dist-love-letters .hint {
  font-size: 0.92rem;
}

body.dist-love-letters .big-envelope {
  --envelope-width: clamp(220px, 56vw, 360px);
  position: relative;
  display: block;
  width: var(--envelope-width);
  aspect-ratio: 1.32;
  margin: 14px 0 2px;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  perspective: 900px;
  transform: translateY(0);
  transition: transform 180ms ease, filter 180ms ease;
}

body.dist-love-letters .big-envelope:hover,
body.dist-love-letters .big-envelope:focus-visible {
  outline: none;
  filter: drop-shadow(0 18px 32px rgba(104, 22, 47, 0.2));
  transform: translateY(-4px);
}

body.dist-love-letters .big-envelope__shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8%;
  height: 14%;
  border-radius: 50%;
  background: rgba(104, 22, 47, 0.13);
  filter: blur(10px);
}

body.dist-love-letters .big-envelope__back,
body.dist-love-letters .big-envelope__front,
body.dist-love-letters .big-envelope__flap,
body.dist-love-letters .big-envelope__paper {
  position: absolute;
  left: 0;
  right: 0;
}

body.dist-love-letters .big-envelope__back {
  top: 25%;
  bottom: 6%;
  border: 1px solid rgba(183, 53, 94, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffc6d6, #f29ab6);
  box-shadow: 0 24px 56px rgba(104, 22, 47, 0.2);
}

body.dist-love-letters .big-envelope__paper {
  left: 13%;
  right: 13%;
  top: 13%;
  height: 64%;
  border: 1px solid rgba(183, 53, 94, 0.16);
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(183, 53, 94, 0.08) 23px 24px),
    linear-gradient(180deg, var(--paper), var(--paper-warm));
  box-shadow: 0 10px 26px rgba(104, 22, 47, 0.14);
  transform: translateY(26%);
  transition: transform 520ms cubic-bezier(0.18, 0.88, 0.22, 1.12);
  z-index: 2;
}

body.dist-love-letters .paper-line {
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 999px;
  background: rgba(183, 53, 94, 0.18);
}

body.dist-love-letters .paper-line--1 {
  top: 55%;
}

body.dist-love-letters .paper-line--2 {
  top: 68%;
  right: 30%;
}

body.dist-love-letters .paper-heart {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 24px;
  height: 24px;
  border-radius: 6px 6px 0 6px;
  background: var(--blush);
  transform: translateX(-50%) rotate(45deg);
}

body.dist-love-letters .paper-heart::before,
body.dist-love-letters .paper-heart::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: inherit;
}

body.dist-love-letters .paper-heart::before {
  left: -12px;
}

body.dist-love-letters .paper-heart::after {
  top: -12px;
}

body.dist-love-letters .big-envelope__front {
  top: 25%;
  bottom: 6%;
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(145deg, transparent 49.5%, rgba(104, 22, 47, 0.16) 50%, transparent 50.5%),
    linear-gradient(215deg, transparent 49.5%, rgba(104, 22, 47, 0.16) 50%, transparent 50.5%),
    linear-gradient(180deg, #ffdce7, #f39cb8);
  border: 1px solid rgba(183, 53, 94, 0.18);
  box-shadow: inset 0 -18px 30px rgba(183, 53, 94, 0.12);
  z-index: 4;
}

body.dist-love-letters .big-envelope__flap {
  top: 25%;
  height: 46%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #ffc1d3, #ef8cad);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition:
    transform 540ms cubic-bezier(0.18, 0.88, 0.22, 1),
    z-index 1ms linear 260ms;
  z-index: 5;
}

body.dist-love-letters .big-envelope__seal {
  position: absolute;
  left: 50%;
  top: 55%;
  width: clamp(34px, 8vw, 46px);
  height: clamp(34px, 8vw, 46px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffd6df 0 18%, transparent 19%),
    linear-gradient(145deg, var(--rose), var(--rose-deep));
  box-shadow: 0 8px 18px rgba(104, 22, 47, 0.25);
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease, transform 360ms ease;
  z-index: 6;
}

body.dist-love-letters .big-envelope__label {
  position: absolute;
  left: 50%;
  bottom: -20%;
  min-width: 148px;
  padding: 11px 16px;
  border: 1px solid rgba(183, 53, 94, 0.18);
  border-radius: 999px;
  background: rgba(255, 254, 253, 0.88);
  box-shadow: 0 12px 24px rgba(104, 22, 47, 0.11);
  color: var(--rose-deep);
  font-size: 0.94rem;
  font-weight: 900;
  transform: translateX(-50%);
  z-index: 7;
}

body.dist-love-letters .big-envelope.is-open .big-envelope__flap {
  transform: rotateX(178deg);
  z-index: 1;
}

body.dist-love-letters .big-envelope.is-open .big-envelope__paper {
  transform: translateY(-34%);
}

body.dist-love-letters .big-envelope.is-open .big-envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
}

body.dist-love-letters .note-modal {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

body.dist-love-letters .note-modal::backdrop {
  background: rgba(63, 29, 42, 0.36);
  backdrop-filter: blur(5px);
}

body.dist-love-letters .modal-card {
  position: relative;
  padding: 34px;
  border: 1px solid rgba(183, 53, 94, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), transparent 34%),
    var(--paper);
  box-shadow: 0 30px 90px rgba(63, 29, 42, 0.28);
  text-align: center;
}

body.dist-love-letters .modal-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(183, 53, 94, 0.12);
  border-radius: 6px;
  pointer-events: none;
}

body.dist-love-letters .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--rose-deep);
  cursor: pointer;
  font-weight: 900;
}

body.dist-love-letters .modal-close:hover,
body.dist-love-letters .modal-close:focus-visible {
  background: #ffc5d7;
  outline: 2px solid rgba(183, 53, 94, 0.24);
  outline-offset: 2px;
}

body.dist-love-letters .note-count {
  margin: 0 0 13px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.dist-love-letters .modal-card h2 {
  margin: 0;
  color: var(--rose-deep);
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 1.06;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.dist-love-letters .modal-card p:not(.note-count) {
  margin: 18px auto 0;
  max-width: 36ch;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

body.dist-love-letters .modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

body.dist-love-letters .primary-button,
body.dist-love-letters .secondary-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
}

body.dist-love-letters .primary-button {
  background: var(--rose);
  color: #fffefd;
  box-shadow: 0 12px 24px rgba(183, 53, 94, 0.2);
}

body.dist-love-letters .secondary-button {
  background: var(--sage-soft);
  color: #31593e;
}

body.dist-love-letters .primary-button:hover,
body.dist-love-letters .primary-button:focus-visible,
body.dist-love-letters .secondary-button:hover,
body.dist-love-letters .secondary-button:focus-visible {
  outline: 2px solid rgba(183, 53, 94, 0.24);
  outline-offset: 2px;
  transform: translateY(-1px);
}

@keyframes float-heart {
  0%,
  100% {
    opacity: 0.38;
    transform: translateY(0) rotate(45deg);
  }

  50% {
    opacity: 0.78;
    transform: translateY(-14px) rotate(45deg);
  }
}

@media (max-width: 540px) {
  body.dist-love-letters .letters-page {
    width: min(100% - 24px, 440px);
    padding-top: max(20px, env(safe-area-inset-top));
  }

  body.dist-love-letters .letter-stage {
    gap: 13px;
  }

  body.dist-love-letters .stage-copy {
    font-size: 0.94rem;
  }

  body.dist-love-letters .big-envelope {
    --envelope-width: min(78vw, 300px);
    margin-top: 8px;
  }

  body.dist-love-letters .modal-card {
    padding: 32px 22px 24px;
  }
}

@media (max-width: 360px) {
  body.dist-love-letters .letters-page {
    width: min(100% - 18px, 340px);
  }

  body.dist-love-letters h1 {
    font-size: 2rem;
  }

  body.dist-love-letters .stage-copy,
body.dist-love-letters .hint {
    font-size: 0.9rem;
  }

  body.dist-love-letters .big-envelope {
    --envelope-width: min(82vw, 250px);
  }
}

@media (max-height: 660px) {
  body.dist-love-letters .letters-page {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  body.dist-love-letters .letter-stage {
    align-content: start;
    gap: 10px;
    padding-top: 16px;
  }

  body.dist-love-letters h1 {
    font-size: clamp(2rem, 8vh, 3rem);
  }

  body.dist-love-letters .stage-copy {
    font-size: 0.92rem;
  }

  body.dist-love-letters .big-envelope {
    --envelope-width: min(48vh, 290px);
    margin-top: 4px;
  }
}

@supports (min-height: 100dvh) {
  body.dist-love-letters,
body.dist-love-letters .letters-page {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dist-love-letters *,
body.dist-love-letters *::before,
body.dist-love-letters *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}



/* reasons-i-love-you */
body.dist-reasons {
  --page: #fff7fb;
  --paper: #fffefd;
  --paper-soft: #fff4ef;
  --blush: #ffd9e6;
  --pink: #f17f9f;
  --rose: #b93560;
  --rose-deep: #65172f;
  --sage: #7ca985;
  --sage-soft: #e7f3ea;
  --gold: #cf9744;
  --ink: #3f1d2a;
  --muted: #80606b;
  --line: rgba(185, 53, 96, 0.16);
  --shadow: rgba(101, 23, 47, 0.15);
}

body.dist-reasons *,
body.dist-reasons *::before,
body.dist-reasons *::after {
  box-sizing: border-box;
}

body.dist-reasons {
  min-height: 100%;
  background: var(--page);
}

body.dist-reasons {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 217, 230, 0.9) 0 120px, transparent 121px),
    radial-gradient(circle at 86% 17%, rgba(231, 243, 234, 0.96) 0 130px, transparent 131px),
    radial-gradient(circle at 76% 82%, rgba(241, 127, 159, 0.22) 0 170px, transparent 171px),
    linear-gradient(180deg, #fffafd 0%, #fff0f6 52%, #f8fff9 100%);
  overflow-x: hidden;
}

body.dist-reasons::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(185, 53, 96, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 53, 96, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

body.dist-reasons a,
body.dist-reasons button {
  font: inherit;
}

body.dist-reasons button {
  border: 0;
}

body.dist-reasons .heart-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.dist-reasons .heart-field span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 5px 5px 0 5px;
  background: rgba(241, 127, 159, 0.42);
  transform: rotate(45deg);
  animation: float-heart 7s ease-in-out infinite;
}

body.dist-reasons .heart-field span::before,
body.dist-reasons .heart-field span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
}

body.dist-reasons .heart-field span::before {
  left: -9px;
}

body.dist-reasons .heart-field span::after {
  top: -9px;
}

body.dist-reasons .heart-field span:nth-child(1) {
  left: 9%;
  top: 26%;
}

body.dist-reasons .heart-field span:nth-child(2) {
  left: 18%;
  bottom: 18%;
  width: 13px;
  height: 13px;
  animation-delay: 1.2s;
}

body.dist-reasons .heart-field span:nth-child(2)::before,
body.dist-reasons .heart-field span:nth-child(2)::after {
  width: 13px;
  height: 13px;
}

body.dist-reasons .heart-field span:nth-child(2)::before {
  left: -6.5px;
}

body.dist-reasons .heart-field span:nth-child(2)::after {
  top: -6.5px;
}

body.dist-reasons .heart-field span:nth-child(3) {
  right: 13%;
  top: 22%;
  background: rgba(124, 169, 133, 0.38);
  animation-delay: 2s;
}

body.dist-reasons .heart-field span:nth-child(4) {
  right: 22%;
  bottom: 16%;
  width: 15px;
  height: 15px;
  animation-delay: 800ms;
}

body.dist-reasons .heart-field span:nth-child(4)::before,
body.dist-reasons .heart-field span:nth-child(4)::after {
  width: 15px;
  height: 15px;
}

body.dist-reasons .heart-field span:nth-child(4)::before {
  left: -7.5px;
}

body.dist-reasons .heart-field span:nth-child(4)::after {
  top: -7.5px;
}

body.dist-reasons .heart-field span:nth-child(5) {
  left: 48%;
  top: 13%;
  width: 12px;
  height: 12px;
  background: rgba(207, 151, 68, 0.34);
  animation-delay: 2.7s;
}

body.dist-reasons .heart-field span:nth-child(5)::before,
body.dist-reasons .heart-field span:nth-child(5)::after {
  width: 12px;
  height: 12px;
}

body.dist-reasons .heart-field span:nth-child(5)::before {
  left: -6px;
}

body.dist-reasons .heart-field span:nth-child(5)::after {
  top: -6px;
}

body.dist-reasons .heart-field span:nth-child(6) {
  right: 38%;
  top: 68%;
  width: 11px;
  height: 11px;
  animation-delay: 3.4s;
}

body.dist-reasons .heart-field span:nth-child(6)::before,
body.dist-reasons .heart-field span:nth-child(6)::after {
  width: 11px;
  height: 11px;
}

body.dist-reasons .heart-field span:nth-child(6)::before {
  left: -5.5px;
}

body.dist-reasons .heart-field span:nth-child(6)::after {
  top: -5.5px;
}

body.dist-reasons .reasons-page {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - clamp(24px, 7vw, 72px)));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(24px, env(safe-area-inset-top))
    0
    max(38px, env(safe-area-inset-bottom));
}

body.dist-reasons .back-link {
  display: inline-flex;
  width: fit-content;
  color: var(--rose);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

body.dist-reasons .back-link:hover,
body.dist-reasons .back-link:focus-visible {
  color: var(--rose-deep);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.dist-reasons .hero {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: calc(100svh - 96px);
  text-align: center;
}

body.dist-reasons .eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.dist-reasons h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.dist-reasons .hero-copy {
  max-width: 510px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

body.dist-reasons .reason-card {
  position: relative;
  width: min(560px, 100%);
  min-height: 250px;
  margin-top: 8px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 36%),
    var(--paper);
  box-shadow: 0 24px 70px var(--shadow);
  overflow: hidden;
}

body.dist-reasons .reason-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(185, 53, 96, 0.12);
  border-radius: 6px;
  pointer-events: none;
}

body.dist-reasons .reason-number {
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.dist-reasons .paper-stack {
  position: absolute;
  inset: auto 16px 16px auto;
  width: 96px;
  height: 76px;
  opacity: 0.2;
}

body.dist-reasons .paper-stack span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(185, 53, 96, 0.26);
  border-radius: 7px;
  background: var(--paper-soft);
  transform: rotate(-9deg);
}

body.dist-reasons .paper-stack span:nth-child(2) {
  transform: rotate(7deg) translate(10px, 8px);
}

body.dist-reasons .reason-card h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--rose-deep);
  font-size: clamp(1.8rem, 6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.dist-reasons .reason-card p {
  position: relative;
  z-index: 2;
  max-width: 38ch;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

body.dist-reasons .controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.dist-reasons .primary-button,
body.dist-reasons .secondary-button,
body.dist-reasons .wall-toggle {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.dist-reasons .primary-button {
  background: var(--rose);
  color: #fffefd;
  box-shadow: 0 12px 24px rgba(185, 53, 96, 0.2);
}

body.dist-reasons .secondary-button {
  background: var(--sage-soft);
  color: #31593e;
}

body.dist-reasons .wall-toggle {
  background: rgba(255, 254, 253, 0.74);
  color: var(--rose-deep);
  border: 1px solid var(--line);
}

body.dist-reasons .primary-button:hover,
body.dist-reasons .primary-button:focus-visible,
body.dist-reasons .secondary-button:hover,
body.dist-reasons .secondary-button:focus-visible,
body.dist-reasons .wall-toggle:hover,
body.dist-reasons .wall-toggle:focus-visible {
  outline: 2px solid rgba(185, 53, 96, 0.24);
  outline-offset: 2px;
  transform: translateY(-1px);
}

body.dist-reasons .reason-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  padding-top: 18px;
}

body.dist-reasons .reason-wall[hidden] {
  display: none;
}

body.dist-reasons .wall-card {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 254, 253, 0.82);
  box-shadow: 0 14px 32px rgba(101, 23, 47, 0.09);
}

body.dist-reasons .wall-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.dist-reasons .wall-card h3 {
  margin: 0;
  color: var(--rose-deep);
  font-size: 1.08rem;
  line-height: 1.18;
}

body.dist-reasons .wall-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

@keyframes float-heart {
  0%,
  100% {
    opacity: 0.38;
    transform: translateY(0) rotate(45deg);
  }

  50% {
    opacity: 0.78;
    transform: translateY(-14px) rotate(45deg);
  }
}

@media (max-width: 560px) {
  body.dist-reasons .reasons-page {
    width: min(100% - 24px, 440px);
    padding-top: max(20px, env(safe-area-inset-top));
  }

  body.dist-reasons .hero {
    gap: 13px;
  }

  body.dist-reasons .reason-card {
    min-height: 230px;
    padding: 28px 22px;
  }

  body.dist-reasons .reason-card p {
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  body.dist-reasons .reasons-page {
    width: min(100% - 18px, 340px);
  }

  body.dist-reasons h1 {
    font-size: 2rem;
  }

  body.dist-reasons .hero-copy {
    font-size: 0.92rem;
  }

  body.dist-reasons .reason-card {
    padding: 24px 18px;
  }
}

@media (max-height: 660px) {
  body.dist-reasons .hero {
    align-content: start;
    min-height: auto;
    padding-top: 18px;
  }

  body.dist-reasons h1 {
    font-size: clamp(2rem, 8vh, 3rem);
  }

  body.dist-reasons .reason-card {
    min-height: 210px;
  }
}

@supports (min-height: 100dvh) {
  body.dist-reasons,
body.dist-reasons .reasons-page {
    min-height: 100dvh;
  }

  body.dist-reasons .hero {
    min-height: calc(100dvh - 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dist-reasons *,
body.dist-reasons *::before,
body.dist-reasons *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}