@font-face {
  font-family: Comfortaa;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/comfortaa-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Comfortaa;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/comfortaa-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #f6c9d4;
  color: #fff;
  font-family: Comfortaa, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  overflow: hidden;
}
main {
  position: relative;
  z-index: 2;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
}
img.scene {
  display: block;
  width: auto;
  height: auto;
  max-width: min(440px, 94vw);
  max-height: calc(100dvh - 188px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  aspect-ratio: 864 / 1152;
  border-radius: 16px;
  min-height: 0;
  transform-origin: center center;
  animation: scene-float 4.8s ease-in-out infinite;
}
@keyframes scene-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.018); }
}
@media (prefers-reduced-motion: reduce) {
  img.scene { animation: none; }
}
main.two img.scene {
  max-height: calc(100dvh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
main.home {
  justify-content: flex-start;
  padding-top: max(18px, env(safe-area-inset-top));
}
main.home .hint {
  margin: 2px 0 6px;
  flex: 0 0 auto;
  font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 3.8vw, 24px);
  color: #7a5c66;
  text-align: center;
  line-height: 1.25;
}
main.home .frame {
  position: relative;
  width: min(860px, 100%);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 156px;
}
main.home .frame img.scene {
  max-width: min(440px, 58%);
  max-height: calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
main.home .frame .heart {
  position: absolute;
  width: 168px;
}
main.home .frame .heart:nth-child(2),
main.home .frame .heart:nth-child(3) {
  top: 40%;
  transform: translateY(-50%);
}
main.home .frame .heart:nth-child(2) { left: max(0px, calc(50% - 330px)); }
main.home .frame .heart:nth-child(3) { right: max(0px, calc(50% - 330px)); }
main.home .frame .heart:nth-child(4),
main.home .frame .heart:nth-child(5),
main.home .frame .heart:nth-child(6) {
  bottom: 0;
}
main.home .frame .heart:nth-child(4) { left: calc(50% - 260px); }
main.home .frame .heart:nth-child(5) { left: calc(50% - 84px); }
main.home .frame .heart:nth-child(6) { left: calc(50% + 92px); }
main.noted img.scene {
  max-height: calc(100dvh - 248px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
main.finale img.scene {
  max-height: calc(100dvh - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.finale-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(560px, 100%);
  flex: 0 0 auto;
}
.finale-actions .again {
  margin-top: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
}
.finale-actions .heart { width: min(120px, 32vw); flex: 0 0 auto; }
main.finale .caption {
  font-size: clamp(16px, 4.2vw, 24px);
}
.again {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e25b84;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  max-width: 94vw;
  touch-action: manipulation;
}
.row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
  width: min(520px, 100%);
  flex: 0 0 auto;
}
.heart {
  position: relative;
  display: grid;
  place-items: center;
  width: min(196px, 56vw);
  flex: 0 0 auto;
  container-type: inline-size;
  text-decoration: none;
  color: #fff;
  touch-action: manipulation;
}
.row .heart { width: min(168px, 46vw); }
.heart svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(180, 40, 80, .25)); }
.heart span {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 54.6%;
  transform: translateY(-50%);
  text-align: center;
  font-family: Comfortaa, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 7.5cqi;
  line-height: 1.12;
  text-shadow: 0 1px 2px rgba(90, 10, 30, .45);
}
main.noted .heart { width: min(220px, 64vw); }
.credit {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 4;
  margin: 0;
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #8d2044;
}
@media (max-width: 800px) {
  main.home .frame { padding-bottom: 154px; }
  main.home .frame img.scene {
    max-width: 70%;
    max-height: calc(100dvh - 280px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  main.home .frame .heart { width: 132px; }
  main.home .frame .heart:nth-child(4),
  main.home .frame .heart:nth-child(5),
  main.home .frame .heart:nth-child(6) { bottom: 22px; }
  main.home .frame .heart:nth-child(4) { left: calc(50% - 206px); }
  main.home .frame .heart:nth-child(5) { left: calc(50% - 66px); }
  main.home .frame .heart:nth-child(6) { left: calc(50% + 74px); }
}
@media (max-width: 520px) {
  main.home .frame .heart { width: 104px; }
  main.home .frame .heart:nth-child(4) { left: calc(50% - 162px); }
  main.home .frame .heart:nth-child(5) { left: calc(50% - 52px); }
  main.home .frame .heart:nth-child(6) { left: calc(50% + 58px); }
}
.caption {
  margin: 0;
  padding: 0 8px;
  color: #7a1034;
  font-size: clamp(20px, 5.6vw, 32px);
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  flex: 0 0 auto;
}
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hearts[hidden] { display: none; }
.hearts i {
  position: absolute;
  bottom: -40px;
  color: #e25b84;
  font-style: normal;
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translateY(-105dvh); opacity: 0; }
}
.rose-vines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.rose-vines[hidden] { display: none; }
.vine { position: absolute; top: 0; }
.vine.left { left: 0; }
.vine.right { right: 0; transform: scaleX(-1); transform-origin: center; }
.sway { transform-origin: 50% 100%; }
.stem { fill: none; stroke: #4e6b42; stroke-linecap: round; stroke-linejoin: round; }
.stem.thin { stroke: #7d9a68; }
.rose-vines.play .stem { animation: rose-draw 2.6s cubic-bezier(.45, .05, .25, 1) forwards; }
.vine.right .stem { animation-delay: .28s; }
@keyframes rose-draw { to { stroke-dashoffset: 0; } }
.bit { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rose-vines.play .bit { animation: rose-open .5s ease-out forwards; animation-delay: var(--delay); }
@keyframes rose-open { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.rose-vines.play .sway { animation: rose-sway 8s ease-in-out 2.7s infinite; }
@keyframes rose-sway { 0%, 100% { transform: rotate(.4deg); } 50% { transform: rotate(-.5deg); } }
.rose-vines.still .stem,
.rose-vines.still .bit,
.rose-vines.still .sway { animation: none; }
.rose-vines.still .stem { stroke-dashoffset: 0 !important; }
.rose-vines.still .bit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rose-vines.play .stem,
  .rose-vines.play .bit,
  .rose-vines.play .sway { animation: none; }
  .rose-vines .stem { stroke-dashoffset: 0 !important; }
  .rose-vines .bit { opacity: 1; }
}