:root {
  --ink: #fff7fb;
  --muted: rgba(255, 235, 246, 0.7);
  --faint: rgba(255, 225, 239, 0.1);
  --line: rgba(255, 224, 239, 0.15);
  --bg: #120b1d;
  --bg-soft: #21132f;
  --rose: #efa6c2;
  --rose-bright: #ffc0d7;
  --lilac: #cbbcf5;
  --gold: #f5d8a5;
  --panel: rgba(255, 226, 240, 0.065);
  --panel-strong: rgba(36, 20, 49, 0.82);
  --accent-line: rgba(255, 190, 216, 0.3);
  --plum-deep: #0d0817;
  --plum-mid: #291737;
  --wine: #6d2e55;
  --max-content: 1480px;
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: rgba(239, 166, 194, 0.54) #120b1d;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -13%, rgba(186, 116, 174, 0.23), transparent 36rem),
    radial-gradient(ellipse at 8% 32%, rgba(113, 62, 119, 0.17), transparent 32rem),
    radial-gradient(ellipse at 92% 72%, rgba(69, 74, 146, 0.15), transparent 34rem),
    linear-gradient(145deg, #120b1d 0%, #160d24 48%, #100b1c 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  z-index: -5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 189, 215, 0.045), transparent 28%, rgba(185, 165, 255, 0.035) 72%, transparent),
    radial-gradient(circle at 50% 0%, transparent 0 24%, rgba(8, 4, 15, 0.14) 78%);
}

body.locked {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--rose-bright);
  outline-offset: 4px;
}

a {
  color: inherit;
  text-decoration: none;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.noise {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.aurora {
  position: fixed;
  z-index: -3;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  pointer-events: none;
}

.aurora-one {
  top: 12%;
  left: -25%;
  background: #bd6b9e;
}

.aurora-two {
  right: -30%;
  top: 54%;
  background: #7865c2;
}

.journey-progress {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
}

.journey-progress span {
  color: rgba(255, 255, 255, 0.58);
  font: 10px var(--serif);
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.journey-rail {
  position: relative;
  width: 1px;
  height: 92px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.journey-rail i {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--rose-bright), var(--gold));
  box-shadow: 0 0 9px var(--rose);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.journey-progress b {
  font: 8px Georgia, serif;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.site-header {
  position: fixed;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 82px;
  padding: 0 clamp(22px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, height 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  height: 68px;
  background: rgba(12, 8, 21, 0.76);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.18em;
}

.brand-mark {
  font-family: Georgia, serif;
  font-size: 27px;
  color: var(--rose);
  line-height: 1;
}

.brand-dot {
  color: var(--rose);
}

.desktop-nav {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 34px;
  transform: translateX(-50%);
}

.desktop-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: color 0.25s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: var(--rose);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.desktop-nav a:hover {
  color: #fff;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button,
.soft-button {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  place-items: center;
}

.icon-button svg {
  width: 17px;
  fill: currentColor;
}

.icon-button .sound-on,
.icon-button[aria-pressed="true"] .sound-off {
  display: none;
}

.icon-button[aria-pressed="true"] .sound-on {
  display: block;
}

.icon-button[aria-pressed="true"] {
  color: #2a1824;
  border-color: rgba(255, 181, 212, 0.72);
  background: linear-gradient(135deg, var(--rose-bright), var(--gold));
  box-shadow: 0 0 28px rgba(241, 167, 194, 0.25);
}

.music-now {
  position: fixed;
  z-index: 17;
  right: clamp(20px, 4vw, 58px);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 12px;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(17, 10, 28, 0.72);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.4s, transform 0.4s;
}

.music-now.visible {
  opacity: 1;
  transform: none;
}

.music-now > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 11px var(--serif);
  letter-spacing: 0.08em;
}

.music-now small {
  color: var(--rose);
  font: 7px var(--sans);
  letter-spacing: 0.22em;
}

.music-bars {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: rgba(241, 167, 194, 0.1);
}

.music-bars i {
  width: 2px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(var(--rose-bright), var(--gold));
  animation: musicBar 1.1s ease-in-out infinite alternate;
}

.music-bars i:nth-child(2) { animation-delay: -0.55s; height: 16px; }
.music-bars i:nth-child(3) { animation-delay: -0.25s; height: 8px; }
.music-bars i:nth-child(4) { animation-delay: -0.78s; height: 13px; }

@keyframes musicBar {
  from { transform: scaleY(0.35); opacity: 0.45; }
  to { transform: scaleY(1); opacity: 1; }
}

.soft-button {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: border-color 0.25s, background 0.25s;
}

.soft-button:hover {
  border-color: rgba(241, 167, 194, 0.5);
  background: rgba(241, 167, 194, 0.08);
}

.section {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(22px, 7vw, 108px);
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 4vw;
  padding-top: 100px;
  overflow: hidden;
}

.hero-copy {
  z-index: 2;
  padding-bottom: 5vh;
}

.eyebrow,
.kicker {
  color: var(--rose);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.eyebrow span {
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.salutation {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.08em;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(43px, 5.4vw, 79px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.shimmer-text {
  color: transparent;
  background: linear-gradient(100deg, #f4d7a4 12%, #ffdce9 40%, #c8b6ff 62%, #f4d7a4 88%);
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
  to { background-position: -220% center; }
}

.hero-note {
  margin: 30px 0 38px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 2;
  letter-spacing: 0.08em;
}

.mobile-break {
  display: none;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding: 17px 18px 17px 27px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 13px;
  letter-spacing: 0.14em;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}

.primary-button:hover {
  background: rgba(241, 167, 194, 0.12);
  border-color: rgba(241, 167, 194, 0.46);
}

.button-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  color: #24172b;
  background: var(--rose);
  border-radius: 50%;
  place-items: center;
  font-size: 14px;
}

.hero-orbit {
  position: relative;
  justify-self: center;
  width: min(40vw, 560px);
  aspect-ratio: 1;
  margin-bottom: 2vh;
  will-change: transform;
}

.hero-orbit.reveal.visible {
  transform: translate3d(var(--orbit-x, 0), var(--orbit-y, 0), 0);
}

.orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px white;
}

.orbit::before { top: 18%; left: 15%; }
.orbit::after { right: 10%; bottom: 28%; }

.orbit-outer {
  animation: orbitSpin 26s linear infinite;
}

.orbit-middle {
  inset: 13%;
  border-color: rgba(241, 167, 194, 0.18);
  animation: orbitSpin 18s linear infinite reverse;
}

.orbit-inner {
  inset: 28%;
  border-style: dashed;
  border-color: rgba(244, 215, 164, 0.22);
  animation: orbitSpin 13s linear infinite;
}

.orbit i {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 18px var(--rose);
}

@keyframes orbitSpin { to { transform: rotate(360deg); } }

.hero-heart {
  position: absolute;
  inset: 39%;
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 167, 194, 0.2), rgba(91, 52, 105, 0.06) 65%);
  box-shadow: 0 0 80px rgba(241, 167, 194, 0.18), inset 0 0 30px rgba(255, 255, 255, 0.03);
  place-items: center;
}

.hero-heart::before,
.hero-heart::after {
  content: "";
  position: absolute;
  inset: -35%;
  border: 1px solid rgba(241, 167, 194, 0.12);
  border-radius: 50%;
  animation: heartWave 3.4s ease-out infinite;
}

.hero-heart::after { animation-delay: 1.7s; }

@keyframes heartWave {
  0% { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.55); }
}

.hero-heart span {
  color: var(--rose-bright);
  font: 400 clamp(34px, 4vw, 58px)/1 var(--serif);
  animation: heartBeat 2.2s ease-in-out infinite;
  text-shadow: 0 0 25px rgba(255, 181, 212, 0.5);
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.17); }
  25% { transform: scale(1); }
  38% { transform: scale(1.1); }
}

.orbit-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.35);
  font: italic 12px Georgia, serif;
  letter-spacing: 0.15em;
}

.label-one { left: 4%; bottom: 20%; }
.label-two { top: 8%; left: 53%; }
.label-three { right: 1%; top: 46%; }

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
  letter-spacing: 0.32em;
  transform: translateX(-50%);
}

.scroll-cue i {
  width: 1px;
  height: 28px;
  background: linear-gradient(var(--rose), transparent);
  animation: scrollCue 1.8s ease-in-out infinite;
}

@keyframes scrollCue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

.section-heading {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto 54px;
  text-align: center;
}

.section-heading.left {
  margin-left: 0;
  text-align: left;
}

.section-heading h2,
.reason-intro h2 {
  margin: 13px 0 14px;
  font-family: var(--serif);
  font-size: clamp(31px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.section-heading > p:last-child,
.reason-intro > p:last-child {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.07em;
}

.heartbeat-section {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 130px;
}

.heartbeat-section::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 50%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(119, 68, 131, 0.11), transparent 62%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sync-card {
  position: relative;
  max-width: 980px;
  min-height: 430px;
  margin: auto;
  padding: clamp(34px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.sync-card::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -170px;
  top: -180px;
  background: radial-gradient(circle, rgba(241, 167, 194, 0.15), transparent 68%);
  pointer-events: none;
}

.tiny-label {
  color: rgba(255, 255, 255, 0.34);
  font-size: 9px;
  letter-spacing: 0.3em;
}

.sync-copy h3 {
  margin: 18px 0 12px;
  font-family: var(--serif);
  font-size: clamp(31px, 3.5vw, 45px);
  font-weight: 400;
}

.sync-copy > p {
  max-width: 360px;
  color: var(--muted);
  font-family: var(--serif);
  line-height: 2;
}

.sync-stats {
  display: flex;
  gap: 46px;
  margin-top: 45px;
}

.sync-stats div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sync-stats span {
  font: 300 35px/1 Georgia, serif;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.sync-stats small {
  color: rgba(255, 255, 255, 0.36);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.pulse-zone {
  position: relative;
  z-index: 1;
  display: grid;
  width: 260px;
  height: 260px;
  justify-self: center;
  place-items: center;
}

.pulse-ring {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(241, 167, 194, 0.12);
  border-radius: 50%;
  opacity: 0;
}

.sync-card.holding .pulse-ring {
  animation: pulseOut 1.2s ease-out infinite;
}

.sync-card.holding .ring-b { animation-delay: 0.6s; }

@keyframes pulseOut {
  0% { opacity: 0.8; transform: scale(0.75); }
  100% { opacity: 0; transform: scale(1.28); }
}

.hold-heart {
  position: relative;
  width: 180px;
  height: 180px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 2;
}

.progress-track { stroke: rgba(255, 255, 255, 0.08); }

.progress-value {
  stroke: var(--rose-bright);
  stroke-linecap: round;
  stroke-dasharray: 515.22;
  stroke-dashoffset: 515.22;
  filter: drop-shadow(0 0 8px rgba(255, 181, 212, 0.7));
  transition: stroke-dashoffset 0.08s linear;
}

.heart-shape {
  position: absolute;
  top: 36px;
  left: 45px;
  width: 90px;
  height: 86px;
  color: #ee98bb;
  font: 82px/1 Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow: 0 0 22px rgba(235, 129, 171, 0.34);
  filter: drop-shadow(0 0 22px rgba(235, 129, 171, 0.34));
  transition: transform 0.2s ease, filter 0.3s ease;
}

.hold-heart:active .heart-shape,
.sync-card.holding .heart-shape {
  transform: scale(0.9);
  filter: saturate(1.3) brightness(1.08);
  animation: holdBeat 0.72s ease-in-out infinite;
}

@keyframes holdBeat {
  45% { transform: scale(1.08); }
}

.hold-label {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  letter-spacing: 0.18em;
  transform: translateX(-50%);
}

.continue-link {
  position: absolute;
  right: 44px;
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rose-bright);
  font-family: var(--serif);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}

.camera-section {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 140px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: clamp(45px, 6vw, 95px);
}

.camera-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -20%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 91, 133, 0.12), transparent 65%);
  transform: translateY(-50%);
  pointer-events: none;
}

.camera-copy h2 {
  margin: 14px 0 20px;
  font: 400 clamp(37px, 4.6vw, 62px)/1.4 var(--serif);
  letter-spacing: 0.04em;
}

.camera-copy > p:not(.kicker):not(.camera-support) {
  max-width: 470px;
  color: var(--muted);
  font: 15px/2 var(--serif);
  letter-spacing: 0.06em;
}

.gesture-steps {
  margin: 35px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.gesture-steps div {
  display: flex;
  align-items: center;
  gap: 17px;
  color: rgba(255, 255, 255, 0.7);
  font: 13px/1.5 var(--serif);
}

.gesture-steps b {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: var(--rose);
  border: 1px solid rgba(241, 167, 194, 0.22);
  border-radius: 50%;
  font: 9px Georgia, serif;
  place-items: center;
}

.gesture-steps small {
  color: rgba(255, 255, 255, 0.3);
  font: 9px var(--sans);
  letter-spacing: 0.08em;
}

.camera-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.camera-start {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 23px;
  color: #2a1722;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd0df, #e698b8);
  box-shadow: 0 12px 35px rgba(226, 137, 177, 0.18);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.camera-start:disabled { opacity: 0.55; cursor: wait; }

.camera-button-icon {
  font-size: 15px;
  animation: cameraBlink 2.2s ease-in-out infinite;
}

@keyframes cameraBlink { 50% { opacity: 0.35; } }

.camera-skip {
  color: rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.camera-skip:hover { color: rgba(255, 255, 255, 0.72); }

.camera-support {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.23);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.camera-experience {
  min-width: 0;
}

.camera-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(241, 167, 194, 0.13), transparent 45%),
    linear-gradient(145deg, #24172e, #0d0915);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.38), inset 0 0 70px rgba(255, 255, 255, 0.025);
}

.camera-frame::before,
.camera-frame::after {
  content: "";
  position: absolute;
  z-index: 6;
  width: 42px;
  height: 42px;
  pointer-events: none;
}

.camera-frame::before {
  top: 18px;
  left: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.camera-frame::after {
  right: 18px;
  bottom: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

#gestureVideo,
#gestureCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gestureVideo {
  z-index: 1;
  object-fit: cover;
  opacity: 0;
  transform: scaleX(-1);
  filter: saturate(0.75) contrast(1.08) brightness(0.68) sepia(0.12) hue-rotate(285deg);
  transition: opacity 0.8s;
}

#gestureCanvas { z-index: 2; object-fit: cover; pointer-events: none; }
.camera-experience.active #gestureVideo { opacity: 1; }

.camera-placeholder,
.camera-loading {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.5s, visibility 0.5s;
}

.camera-placeholder.hidden,
.camera-loading:not(.visible) { opacity: 0; visibility: hidden; }

.gesture-demo {
  position: relative;
  display: grid;
  width: 150px;
  height: 110px;
  color: var(--rose);
  place-items: center;
}

.gesture-demo span {
  z-index: 2;
  font: 55px var(--serif);
  text-shadow: 0 0 28px rgba(241, 167, 194, 0.4);
  animation: heartBeat 2.2s ease-in-out infinite;
}

.demo-hand {
  position: absolute;
  top: 48px;
  color: rgba(255, 255, 255, 0.25);
  font: 46px/1 var(--serif);
}

.demo-left { left: 4px; transform: rotate(45deg); }
.demo-right { right: 4px; transform: rotate(-45deg); }

.camera-placeholder p {
  margin: 12px 0 8px;
  font: 18px var(--serif);
  letter-spacing: 0.08em;
}

.camera-placeholder small,
.camera-loading span {
  color: rgba(255, 255, 255, 0.34);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.camera-loading { background: rgba(13, 9, 21, 0.78); backdrop-filter: blur(12px); }

.camera-loading i {
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: loadingSpin 1s linear infinite;
}

@keyframes loadingSpin { to { transform: rotate(360deg); } }

.camera-status {
  position: absolute;
  z-index: 7;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(10, 6, 15, 0.52);
  font-size: 8px;
  letter-spacing: 0.1em;
  backdrop-filter: blur(10px);
}

.camera-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.camera-experience.active .camera-status i {
  background: #e899ba;
  box-shadow: 0 0 9px #e899ba;
  animation: cameraBlink 1.2s infinite;
}

.gesture-meter {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 126px;
  height: 126px;
  opacity: 0;
  place-items: center;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.35s, transform 0.35s;
}

.camera-experience.tracking .gesture-meter { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.gesture-meter svg {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 9px rgba(255, 181, 212, 0.5));
}

.gesture-meter circle {
  fill: rgba(14, 8, 20, 0.23);
  stroke-width: 2;
}

.meter-track { stroke: rgba(255, 255, 255, 0.13); }
.meter-value { stroke: var(--rose-bright); stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 276.46; }

.gesture-meter span {
  color: rgba(255, 218, 232, 0.9);
  font: 42px var(--serif);
  text-shadow: 0 0 20px rgba(255, 181, 212, 0.65);
}

.gesture-success {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  background: radial-gradient(circle, rgba(99, 50, 82, 0.63), rgba(10, 6, 16, 0.84) 70%);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  transition: opacity 0.9s, visibility 0.9s, transform 0.9s;
  backdrop-filter: blur(7px);
}

.camera-experience.success .gesture-success { opacity: 1; visibility: visible; transform: none; }

.gesture-success p {
  color: var(--rose);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.gesture-success h3 {
  margin: 15px 0 24px;
  font: 400 clamp(28px, 3vw, 41px)/1.55 var(--serif);
  letter-spacing: 0.06em;
}

.gesture-success a {
  padding-bottom: 7px;
  color: var(--gold);
  border-bottom: 1px solid rgba(244, 215, 164, 0.3);
  font: 12px var(--serif);
  letter-spacing: 0.08em;
}

.gesture-success a span { margin-left: 8px; }

.petal-burst {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.petal-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 13px;
  border-radius: 70% 30% 70% 30%;
  background: var(--petal-color, var(--rose));
  opacity: 0;
}

.camera-experience.success .petal-burst i {
  animation: petalFly 2.6s var(--petal-delay, 0s) cubic-bezier(0.1, 0.65, 0.2, 1) forwards;
}

@keyframes petalFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); }
  12% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--petal-x)), calc(-50% + var(--petal-y))) scale(1) rotate(var(--petal-r)); }
}

.camera-caption {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.28);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.camera-caption p { margin: 0; color: rgba(255, 255, 255, 0.48); }

.camera-caption button {
  padding: 0;
  color: rgba(255, 255, 255, 0.38);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
}

.sync-card.complete .continue-link {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sync-card.complete .progress-value { stroke: var(--gold); }

.memories-section {
  padding-top: 120px;
  padding-bottom: 140px;
}

.constellation {
  position: relative;
  min-height: 500px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.constellation-lines {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 430px;
  overflow: visible;
}

.constellation-lines path {
  fill: none;
  stroke: rgba(241, 167, 194, 0.2);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}

.memory-stars {
  position: absolute;
  inset: 25px 0 auto;
  height: 430px;
}

.memory-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  color: rgba(255, 255, 255, 0.5);
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  place-items: center;
}

.memory-star i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  transition: transform 0.35s, color 0.35s;
}

.memory-star::before,
.memory-star::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: inset 0.35s, opacity 0.35s;
}

.memory-star span {
  position: absolute;
  top: 39px;
  font: 9px Georgia, serif;
  letter-spacing: 0.12em;
}

.memory-star:hover i,
.memory-star.active i {
  color: var(--rose-bright);
  transform: scale(1.5);
}

.memory-star.active::before {
  inset: 4px;
  color: var(--rose);
  opacity: 0.38;
  animation: starRing 2.4s ease-out infinite;
}

@keyframes starRing {
  0% { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.memory-panel {
  position: absolute;
  z-index: 3;
  top: 40px;
  right: 8%;
  width: min(430px, 42vw);
  padding: 30px 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(18, 12, 30, 0.78);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
  transition: opacity 0.2s, transform 0.2s;
}

.memory-panel.switching {
  opacity: 0;
  transform: translateY(7px);
}

.memory-index {
  float: right;
  color: rgba(255, 255, 255, 0.3);
  font: 10px Georgia, serif;
  letter-spacing: 0.1em;
}

.memory-index span { color: var(--rose); }

.memory-date {
  color: var(--rose);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.memory-panel h3 {
  margin: 18px 0 15px;
  font: 400 clamp(25px, 2.7vw, 36px)/1.45 var(--serif);
}

.memory-panel > p:not(.memory-date) {
  min-height: 70px;
  color: var(--muted);
  font: 14px/2 var(--serif);
}

.memory-controls {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.memory-controls button {
  width: 38px;
  height: 38px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.2s;
}

.memory-controls button:hover { background: rgba(241, 167, 194, 0.12); }

.album-section {
  min-height: 100vh;
  padding-top: 125px;
  padding-bottom: 145px;
}

.heart-album {
  position: relative;
  width: min(100%, 1050px);
  aspect-ratio: 1.45;
  margin: auto;
  border: 1px solid rgba(255, 126, 175, 0.12);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 52%, rgba(153, 12, 61, .13), transparent 29%),
    radial-gradient(ellipse at 50% 52%, rgba(63, 13, 45, .2), transparent 64%),
    #030204;
  box-shadow: 0 42px 120px rgba(0,0,0,.5), inset 0 0 120px rgba(255,56,125,.035), 0 0 90px rgba(175, 18, 76, .08);
  overflow: hidden;
  isolation: isolate;
  perspective: 1500px;
  cursor: grab;
  touch-action: pan-y;
}

.heart-wall {
  --wall-pulse: 0;
  --wall-scale: 1;
}

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

.heart-wall::before {
  opacity: .55;
  background-image:
    radial-gradient(circle at 12% 26%, rgba(255,255,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 18%, rgba(255,202,219,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 82%, rgba(255,224,169,.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 73%, rgba(255,255,255,.32) 0 1px, transparent 1.4px);
  background-size: 173px 151px, 229px 197px, 191px 223px, 263px 181px;
  mask-image: radial-gradient(ellipse at center, #000 18%, transparent 88%);
}

.heart-wall::after {
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(1, 0, 3, .18) 63%, rgba(1, 0, 3, .78) 100%);
}

.heart-wall.is-dragging { cursor: grabbing; }

.heart-wall-canvas,
.heart-wall-haze {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heart-wall-haze {
  opacity: calc(.55 + var(--wall-pulse) * .32);
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 28, 104, .18), transparent 20%),
    radial-gradient(ellipse at 50% 52%, rgba(255, 90, 142, .08), transparent 40%);
  filter: blur(28px);
  transform: scale(calc(1 + var(--wall-pulse) * .22));
  transition: opacity .3s, transform .3s;
}

.heart-wall-depth {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--wall-rotate-x, -4deg)) rotateY(var(--wall-rotate-y, 0deg)) scale(calc(var(--wall-scale) + var(--wall-pulse) * .025));
  transition: none;
  will-change: transform;
}

.album-grid { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }

.heart-wall-title {
  position: absolute;
  z-index: 7;
  top: 5.5%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: rgba(255,255,255,.92);
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  text-shadow: 0 0 24px rgba(255,134,176,.28);
}

.heart-wall-title strong { font: 400 clamp(11px,1.4vw,16px) Georgia,serif; letter-spacing: .2em; }
.heart-wall-title span { color: rgba(255,194,215,.46); font: 8px var(--sans); letter-spacing: .22em; }

.album-photo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(49px, 5.8vw, 72px);
  aspect-ratio: .76;
  padding: 4px 4px 15px;
  border: 1px solid rgba(255,239,245,.72);
  border-radius: 5px;
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(229, 209, 217, .76));
  box-shadow: 0 14px 30px rgba(0,0,0,.58), 0 0 20px rgba(255,67,129,.2);
  overflow: hidden;
  cursor: pointer;
  opacity: var(--depth-opacity, 1);
  transform: translate3d(-50%, -50%, 0);
  transform-style: preserve-3d;
  transition: border-color .2s, opacity .24s, box-shadow .24s, filter .24s;
  will-change: transform;
  pointer-events: auto;
}

.album-photo:hover,
.album-photo:focus-visible {
  border-color: var(--rose-bright);
  box-shadow: 0 22px 45px rgba(0,0,0,.5), 0 0 34px rgba(255, 158, 190, .46);
  filter: brightness(1.14) saturate(1.08);
}

.heart-wall .album-photo.is-gesture-focused {
  opacity: 1;
  border-color: #ffe3ef;
  box-shadow: 0 22px 55px rgba(0,0,0,.72), 0 0 42px rgba(255, 74, 141, .8);
  filter: brightness(1.28);
}

.heart-wall.is-photo-focused .album-photo:not(.is-gesture-focused) { opacity: .3; filter: brightness(.55) saturate(.7); }

.heart-photo-focus {
  --focus-x: 0px;
  --focus-y: 0px;
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(170px, 24vw, 265px);
  max-height: 72%;
  opacity: 0;
  pointer-events: none;
  place-items: center;
  transform: translate(calc(-50% + var(--focus-x)), calc(-50% + var(--focus-y))) scale(.2) rotate(-7deg);
  transition: opacity .22s, transform .5s cubic-bezier(.15,.85,.2,1.12);
}

.heart-photo-focus.visible { opacity: 1; transform: translate(calc(-50% + var(--focus-x)), calc(-50% + var(--focus-y))) scale(1) rotate(-1.5deg); }
.heart-photo-focus-glow { position:absolute; inset:-26%; border-radius:50%; background:radial-gradient(circle,rgba(255,52,126,.38),transparent 66%); filter:blur(22px); animation:focusGlow 1.8s ease-in-out infinite alternate; }
.heart-photo-focus figure { position:relative; width:100%; margin:0; padding:9px 9px 32px; border:1px solid rgba(255,255,255,.86); border-radius:5px; background:linear-gradient(145deg,#fff7fa,#d9ccd1); box-shadow:0 32px 80px rgba(0,0,0,.72),0 0 50px rgba(255,68,137,.42); }
.heart-photo-focus img { display:block; width:100%; max-height:52vh; border-radius:2px; object-fit:contain; background:#12080d; }
.heart-photo-focus figcaption { position:absolute; right:8px; bottom:8px; left:8px; color:#693548; font:10px/1.4 var(--serif); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes focusGlow { to { opacity:.62; transform:scale(1.1); } }

.heart-wall.is-gesture-active {
  border-color: rgba(255, 183, 213, .28);
  box-shadow: 0 35px 100px rgba(0,0,0,.32), inset 0 0 90px rgba(255,255,255,.02), 0 0 100px rgba(230, 106, 165, .18);
}

.heart-wall.gesture-open .heart-wall-haze { background: radial-gradient(ellipse at center, rgba(205, 177, 255, .2), transparent 42%); }
.heart-wall.gesture-fist .heart-wall-haze { background: radial-gradient(ellipse at center, rgba(255, 158, 190, .24), transparent 34%); }
.heart-wall.gesture-pinch .heart-wall-haze { background: radial-gradient(ellipse at center, rgba(255, 224, 186, .2), transparent 30%); }

.album-photo img { width: 100%; height: calc(100% - 12px); display: block; border-radius: 4px; object-fit: cover; }
.album-photo::before {
  content: "♡";
  position: absolute;
  right: 7px;
  bottom: 1px;
  color: rgba(112, 47, 77, .55);
  font: 13px var(--serif);
}
.album-photo::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 25px;
  bottom: 7px;
  height: 1px;
  background: rgba(112, 47, 77, .18);
}

.album-photo.placeholder {
  border: 1px solid rgba(255,105,153,.16);
  background: linear-gradient(145deg,rgba(95,10,40,.42),rgba(255,87,145,.035));
  cursor: default;
  opacity: .62;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255,32,105,.11), inset 0 0 14px rgba(255,255,255,.025);
}

.album-photo.placeholder::before {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  color: rgba(255,164,195,.56);
  place-items: center;
  font: 15px Georgia, serif;
}
.album-photo.placeholder::after { display: none; }

.heart-wall-orbit-label {
  position: absolute;
  z-index: 4;
  color: rgba(244, 215, 164, .42);
  font-size: 8px;
  letter-spacing: .28em;
  pointer-events: none;
  text-transform: uppercase;
}

.orbit-label-top { top: 25px; left: 32px; }
.orbit-label-bottom { right: 32px; bottom: 25px; color: rgba(255,255,255,.28); letter-spacing: .14em; }

.album-center {
  position: absolute;
  z-index: 7;
  left: 30px;
  bottom: 23px;
  width: min(290px, 42%);
  color: var(--muted);
  text-align: left;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}

.album-center span { color: var(--rose); font-size: 8px; letter-spacing: .25em; }
.album-center strong { display: block; margin: 6px 0 4px; color: var(--gold); font: 18px Georgia,serif; }
.album-center p { margin: 0; font: 10px/1.6 var(--serif); }
.album-center.has-photos { opacity: .62; }

.heart-gesture-console {
  width: min(100%, 920px);
  margin: 24px auto 0;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.heart-gesture-media { display: none; }

#heartGestureVideo { display: none; }

.heart-gesture-mode {
  width: fit-content;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(8,5,13,.58);
  backdrop-filter: blur(10px);
  font-size: 8px;
  letter-spacing: .08em;
}

.heart-gesture-mode i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); }
.heart-gesture-console.active .heart-gesture-mode i { background: #ff87b7; box-shadow: 0 0 10px #ff87b7; animation: cameraBlink 1.25s ease-in-out infinite; }

.heart-gesture-copy { min-width: 0; padding: 7px 8px 7px 0; display: flex; flex-direction: column; justify-content: center; }
.heart-gesture-copy .kicker { margin: 0 0 8px; }
.heart-gesture-copy h3 { margin: 0; font: 400 22px/1.5 var(--serif); }
.heart-gesture-copy > p:not(.kicker) { min-height: 44px; margin: 7px 0 12px; color: var(--muted); font: 12px/1.75 var(--serif); }

.heart-gesture-guide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.heart-gesture-guide > span { padding: 9px 8px; display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); transition: border-color .25s, background .25s, transform .25s; }
.heart-gesture-guide b { grid-row: 1 / 3; font-size: 20px; }
.heart-gesture-guide small { color: rgba(255,255,255,.42); font-size: 8px; }
.heart-gesture-guide strong { color: var(--ink); font-size: 10px; font-weight: 500; }
.heart-gesture-console[data-gesture="open"] [data-gesture-guide="open"],
.heart-gesture-console[data-gesture="fist"] [data-gesture-guide="fist"],
.heart-gesture-console[data-gesture="pinch"] [data-gesture-guide="pinch"],
.heart-gesture-console[data-gesture="move"] [data-gesture-guide="move"] { border-color: rgba(255,181,211,.5); background: rgba(241,167,194,.12); transform: translateY(-2px); }

.heart-gesture-actions { margin-top: 13px; display: flex; gap: 9px; }
.heart-gesture-actions button { padding: 10px 15px; color: var(--ink); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 10px; letter-spacing: .08em; }
.heart-gesture-actions .heart-gesture-start { color: #28131e; border-color: transparent; background: linear-gradient(135deg,#ffd0df,#e8a0bd); }
.heart-gesture-actions button:disabled { opacity: .55; cursor: wait; }
.heart-gesture-privacy { margin-top: 9px; color: rgba(255,255,255,.25); font-size: 8px; letter-spacing: .06em; }

.album-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.album-actions button,
.album-upload {
  padding: 13px 21px;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
}

.album-upload { color: #291622; border: 0; background: linear-gradient(135deg,#ffd0df,#e8a0bd); }
.album-upload span { margin-right: 7px; font-size: 17px; }
.album-actions button:disabled { opacity: .3; cursor: not-allowed; }
.album-actions button[aria-pressed="true"] {
  color: #28131e;
  border-color: transparent;
  background: linear-gradient(135deg, #ffd0df, #e8a0bd);
}
.album-privacy { margin: 16px 0 0; color: rgba(255,255,255,.28); text-align: center; font-size: 9px; letter-spacing: .1em; }

.reasons-section {
  min-height: 850px;
  padding-top: 120px;
  padding-bottom: 140px;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  gap: 7vw;
}

.reason-intro {
  align-self: center;
}

.reason-stage {
  position: relative;
  min-height: 540px;
}

.reason-deck {
  position: relative;
  width: min(390px, 80vw);
  height: 470px;
  margin: 0 auto;
  perspective: 1000px;
}

.reason-card {
  position: absolute;
  inset: 0;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(145deg, #56345b, #1b1226);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  transform-origin: bottom center;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}

.reason-card:nth-child(1) { z-index: 4; }
.reason-card:nth-child(2) { z-index: 3; transform: translate(15px, 13px) rotate(3deg) scale(0.97); }
.reason-card:nth-child(3) { z-index: 2; transform: translate(27px, 24px) rotate(6deg) scale(0.94); }
.reason-card:nth-child(4) { z-index: 1; transform: translate(37px, 34px) rotate(9deg) scale(0.91); }

.reason-card.leaving {
  opacity: 0;
  transform: translate(-135%, -5%) rotate(-15deg) !important;
}

.card-number {
  position: absolute;
  top: 28px;
  right: 31px;
  color: rgba(255, 255, 255, 0.35);
  font: 12px Georgia, serif;
  letter-spacing: 0.14em;
}

.card-icon {
  position: absolute;
  top: 26%;
  left: 50%;
  display: grid;
  width: 112px;
  height: 112px;
  color: var(--gold);
  border: 1px solid rgba(244, 215, 164, 0.28);
  border-radius: 50%;
  place-items: center;
  font: 36px Georgia, serif;
  transform: translateX(-50%);
  box-shadow: 0 0 45px rgba(244, 215, 164, 0.08);
}

.reason-card h3 {
  margin: 0 0 16px;
  font: 400 27px/1.5 var(--serif);
}

.reason-card p {
  margin: 0;
  color: var(--muted);
  font: 14px/1.9 var(--serif);
}

.deck-next {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 1px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 18px 14px 22px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 8, 21, 0.74);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.deck-next b {
  display: grid;
  width: 28px;
  height: 28px;
  color: #281727;
  border-radius: 50%;
  background: var(--rose);
  place-items: center;
}

.deck-hint {
  position: absolute;
  bottom: -33px;
  left: 50%;
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
  letter-spacing: 0.16em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.promise-section {
  min-height: 100vh;
  padding-top: 125px;
  padding-bottom: 140px;
}

.promise-section::before {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(78vw, 1050px);
  height: min(78vw, 1050px);
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  box-shadow: inset 0 0 160px rgba(139, 88, 159, 0.035);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.promise-stage {
  position: relative;
  max-width: 1080px;
  margin: auto;
}

.promise-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.promise-card {
  position: relative;
  min-height: 330px;
  padding: 32px 28px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 25%, rgba(241, 167, 194, 0.09), transparent 33%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, background 0.4s;
}

.promise-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 181, 212, 0.18), rgba(199, 180, 255, 0.04));
  opacity: 0;
  transition: opacity 0.45s;
}

.promise-card:hover {
  border-color: rgba(241, 167, 194, 0.32);
  transform: translateY(-7px);
}

.promise-card[aria-pressed="true"] {
  border-color: rgba(241, 167, 194, 0.48);
  background: linear-gradient(145deg, rgba(111, 62, 105, 0.48), rgba(34, 22, 49, 0.65));
  box-shadow: 0 25px 80px rgba(77, 37, 73, 0.34), inset 0 0 60px rgba(241, 167, 194, 0.05);
  transform: translateY(-10px);
}

.promise-card[aria-pressed="true"]::after { opacity: 1; }

.promise-number,
.promise-card > i,
.promise-copy,
.promise-card > b {
  position: relative;
  z-index: 2;
}

.promise-number {
  color: rgba(255, 255, 255, 0.32);
  font: 10px Georgia, serif;
  letter-spacing: 0.18em;
}

.promise-card > i {
  position: absolute;
  top: 51px;
  left: 50%;
  display: grid;
  width: 86px;
  height: 86px;
  color: var(--gold);
  border: 1px solid rgba(244, 215, 164, 0.18);
  border-radius: 50%;
  place-items: center;
  font: 29px Georgia, serif;
  transform: translateX(-50%);
  transition: box-shadow 0.4s, transform 0.4s, background 0.4s;
}

.promise-card[aria-pressed="true"] > i {
  color: #2a1724;
  background: linear-gradient(135deg, var(--rose-bright), var(--gold));
  box-shadow: 0 0 38px rgba(241, 167, 194, 0.32);
  transform: translateX(-50%) scale(1.08) rotate(-6deg);
}

.promise-copy {
  display: block;
  margin-top: 156px;
}

.promise-copy small {
  display: block;
  margin-bottom: 9px;
  color: var(--rose);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.promise-copy strong {
  font: 400 21px/1.65 var(--serif);
  letter-spacing: 0.04em;
}

.promise-card > b {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.promise-card[aria-pressed="true"] > b { color: var(--gold); }
.promise-card[aria-pressed="true"] > b { font-size: 0; }
.promise-card[aria-pressed="true"] > b::after { content: "✓ 已放进未来"; font-size: 9px; }

.promise-core {
  position: relative;
  width: min(480px, 88%);
  min-height: 150px;
  margin: 52px auto 0;
  display: grid;
  align-content: center;
  place-items: center;
  text-align: center;
}

.promise-core > span {
  color: var(--rose);
  font-size: 9px;
  letter-spacing: 0.26em;
}

.promise-core > p {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  color: var(--muted);
  font: 17px/1.9 var(--serif);
}

.promise-stage.complete .promise-core > p { color: var(--ink); }

.promise-rings,
.promise-rings i {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(241, 167, 194, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.promise-rings { width: 150px; height: 150px; }
.promise-rings i:nth-child(1) { width: 210px; height: 210px; }
.promise-rings i:nth-child(2) { width: 290px; height: 290px; }
.promise-rings i:nth-child(3) { width: 390px; height: 390px; }
.promise-rings span {
  position: absolute;
  inset: 50% auto auto 50%;
  color: rgba(241, 167, 194, 0.14);
  font: 70px/1 var(--serif);
  transform: translate(-50%, -50%);
}

.promise-stage.complete .promise-rings {
  border-color: rgba(241, 167, 194, 0.5);
  box-shadow: 0 0 75px rgba(241, 167, 194, 0.2);
  animation: promisePulse 2.6s ease-in-out infinite;
}

@keyframes promisePulse {
  50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 110px rgba(241, 167, 194, 0.32); }
}

.whisper-section {
  min-height: 100vh;
  padding-top: 125px;
  padding-bottom: 145px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
}

.whisper-visual {
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127,73,136,.2), rgba(19,12,31,.18) 48%, transparent 70%);
}

#voiceCanvas { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; }
.voice-nebula { position: absolute; inset: 16%; border: 1px solid rgba(241,167,194,.14); border-radius: 50%; }
.voice-nebula i { position: absolute; inset: -14%; border: 1px solid rgba(199,180,255,.08); border-radius: 50%; transform: scale(var(--voice-scale,1)); transition: transform .08s; }
.voice-nebula i:nth-child(2) { inset: -33%; }
.voice-nebula i:nth-child(3) { inset: -55%; }
.voice-nebula span { position: absolute; inset: 50% auto auto 50%; color: var(--rose); font: 70px/1 var(--serif); text-shadow: 0 0 35px rgba(241,167,194,.42); transform: translate(-50%,-50%) scale(var(--voice-heart,.72)); transition: transform .1s; }

.voice-level {
  position: absolute;
  bottom: 21%;
  width: 34%;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}
.voice-level i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--rose),var(--gold)); transform:scaleX(0); transform-origin:left; }
#voiceStatus { position:absolute; bottom:14%; margin:0; color:rgba(255,255,255,.43); font:11px var(--serif); letter-spacing:.12em; }

.whisper-copy h2 { margin:14px 0 18px; font:400 clamp(36px,4vw,57px)/1.5 var(--serif); }
.whisper-copy > p:not(.kicker):not(.voice-privacy) { max-width:500px; color:var(--muted); font:15px/2 var(--serif); }
.voice-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.voice-actions button { padding:14px 21px; border-radius:999px; cursor:pointer; font-size:11px; letter-spacing:.09em; }
.voice-start { color:#2b1724; border:0; background:linear-gradient(135deg,#ffd0df,#e89cba); }
.voice-hold { color:var(--ink); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); touch-action:none; }
.voice-privacy { margin-top:16px; color:rgba(255,255,255,.28); font-size:9px; letter-spacing:.08em; }

.whisper-section.listening .voice-nebula i { animation:voiceRing 1.8s ease-in-out infinite; transform:scale(var(--voice-scale,1)); }
.whisper-section.listening .voice-nebula i:nth-child(2){animation-delay:-.6s}.whisper-section.listening .voice-nebula i:nth-child(3){animation-delay:-1.2s}
@keyframes voiceRing { 50% { transform:scale(var(--voice-scale,1.06)); border-color:rgba(241,167,194,.35); } }
.whisper-section.complete .whisper-visual { border-color:rgba(241,167,194,.5); box-shadow:0 0 100px rgba(241,167,194,.2); }
.whisper-section.complete .voice-nebula span { color:var(--gold); transform:translate(-50%,-50%) scale(1.2); }

.voice-success {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:9%;
  width:min(650px,86%);
  padding:25px 30px;
  border:1px solid rgba(241,167,194,.26);
  border-radius:23px;
  background:rgba(24,13,34,.86);
  box-shadow:0 22px 65px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,18px);
  transition:opacity .65s,transform .65s;
}
.whisper-section.complete .voice-success { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.voice-success span { color:var(--rose); font-size:8px; letter-spacing:.26em; }
.voice-success h3 { margin:12px 0 0; font:400 22px/1.7 var(--serif); }

.touch-section { min-height:100vh; padding-top:125px; padding-bottom:145px; }
.touch-stage { max-width:900px; margin:auto; text-align:center; }
.touch-surface {
  position:relative;
  width:100%;
  aspect-ratio:1.85;
  border:1px solid rgba(255,255,255,.1);
  border-radius:34px;
  background:radial-gradient(circle at 50% 50%,rgba(112,64,124,.2),transparent 43%),rgba(18,11,29,.56);
  box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 0 90px rgba(255,255,255,.015);
  overflow:hidden;
  touch-action:none;
  user-select:none;
}
.touch-constellation { position:absolute; inset:0; opacity:.38; background-image:radial-gradient(circle,white 0 1px,transparent 1.5px); background-size:67px 63px; mask-image:radial-gradient(circle,#000,transparent 76%); }
.touch-point { position:absolute; z-index:3; left:var(--point-x,25%); top:var(--point-y,50%); width:74px; height:74px; border:1px solid rgba(241,167,194,.46); border-radius:50%; background:radial-gradient(circle,rgba(255,214,232,.9) 0 5px,rgba(241,167,194,.16) 7px,transparent 65%); box-shadow:0 0 35px rgba(241,167,194,.16); opacity:.55; transform:translate(-50%,-50%) scale(var(--point-scale,.8)); transition:opacity .25s,box-shadow .25s; pointer-events:none; }
.point-two { --point-x:75%; }
.touch-stage.active .touch-point { opacity:1; box-shadow:0 0 55px rgba(241,167,194,.36); }
.touch-link { position:absolute; z-index:2; left:25%; top:50%; width:50%; height:1px; background:linear-gradient(90deg,transparent,var(--rose),var(--gold),transparent); box-shadow:0 0 14px var(--rose); transform-origin:left; opacity:.28; pointer-events:none; }
.touch-heart { position:absolute; z-index:2; left:50%; top:43%; color:rgba(241,167,194,.22); font:110px/1 var(--serif); text-shadow:0 0 45px rgba(241,167,194,.2); transform:translate(-50%,-50%) scale(calc(.65 + var(--together,0) * .5)); transition:transform .08s,color .25s; pointer-events:none; }
.touch-surface > p { position:absolute; z-index:4; bottom:16%; width:100%; margin:0; color:rgba(255,255,255,.5); font:13px var(--serif); letter-spacing:.1em; pointer-events:none; }
.touch-meter { position:absolute; left:50%; bottom:10%; width:180px; height:2px; background:rgba(255,255,255,.1); transform:translateX(-50%); overflow:hidden; }
.touch-meter i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--rose),var(--gold)); box-shadow:0 0 12px var(--rose); transform:scaleX(0); transform-origin:left; }
#touchDemo { margin-top:24px; padding:13px 21px; color:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.04); cursor:pointer; font-size:11px; letter-spacing:.1em; }
.touch-result { position:absolute; z-index:5; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:radial-gradient(circle,rgba(62,32,65,.75),rgba(13,8,22,.3) 60%,transparent); opacity:0; pointer-events:none; transform:scale(.9); transition:opacity .8s,transform .8s; }
.touch-stage.complete .touch-result { opacity:1; pointer-events:auto; transform:none; }
.touch-result small { color:var(--rose); letter-spacing:.26em; font-size:8px; }
.touch-result h3 { max-width:610px; margin:18px 24px 0; font:400 clamp(25px,3vw,42px)/1.6 var(--serif); }

.draw-section {
  min-height: 100vh;
  padding-top: 125px;
  padding-bottom: 150px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: clamp(45px, 7vw, 110px);
}

.draw-copy h2 {
  margin: 14px 0 18px;
  font: 400 clamp(36px, 4.2vw, 58px)/1.45 var(--serif);
}

.draw-copy > p:last-of-type {
  max-width: 470px;
  color: var(--muted);
  font: 15px/2 var(--serif);
}

.draw-progress {
  max-width: 360px;
  margin-top: 34px;
}

.draw-progress > span {
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.draw-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  box-shadow: 0 0 12px var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.16s;
}

.draw-progress b {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.4);
  font: 9px Georgia, serif;
  letter-spacing: 0.16em;
}

.draw-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.draw-actions button {
  padding: 11px 17px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.1em;
  transition: background 0.25s, border-color 0.25s;
}

.draw-actions button:hover {
  border-color: rgba(241, 167, 194, 0.42);
  background: rgba(241, 167, 194, 0.09);
}

.love-sketch {
  position: relative;
  width: 100%;
  max-width: 690px;
  aspect-ratio: 1.16;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 48%, rgba(118, 71, 131, 0.2), transparent 44%),
    rgba(19, 12, 31, 0.58);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.28), inset 0 0 80px rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

.love-sketch::before,
.love-sketch::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px white;
  opacity: 0.6;
}

.love-sketch::before { top: 12%; left: 9%; }
.love-sketch::after { right: 12%; bottom: 17%; width: 3px; height: 3px; }

#loveCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.sketch-start {
  position: absolute;
  top: 24px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  letter-spacing: 0.13em;
  pointer-events: none;
  transition: opacity 0.35s;
}

.sketch-start i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose-bright);
  box-shadow: 0 0 14px var(--rose);
  animation: sketchStart 1.6s ease-in-out infinite;
}

@keyframes sketchStart { 50% { transform: scale(1.6); opacity: 0.5; } }
.love-sketch.drawing .sketch-start,
.love-sketch.complete .sketch-start { opacity: 0; }

.love-sketch > p {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  font: 11px var(--serif);
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: opacity 0.4s;
}

.love-sketch.complete > p { opacity: 0; }

.sketch-result {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle, rgba(57, 29, 58, 0.7), rgba(13, 8, 23, 0.34) 58%, transparent 76%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.love-sketch.complete .sketch-result {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sketch-result > span {
  color: var(--rose);
  font-size: 9px;
  letter-spacing: 0.28em;
}

.sketch-result h3 {
  margin: 18px 0 27px;
  font: 400 clamp(27px, 3.2vw, 43px)/1.55 var(--serif);
}

.sketch-result h3 b {
  color: var(--gold);
  font-weight: 400;
}

.sketch-result a {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-bottom: 8px;
  color: var(--gold);
  border-bottom: 1px solid rgba(244, 215, 164, 0.4);
  font: 12px var(--serif);
  letter-spacing: 0.1em;
}

.sketch-result a i { font-style: normal; }

.sketch-sparks i {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--spark-color, var(--rose-bright));
  box-shadow: 0 0 12px var(--spark-color, var(--rose-bright));
  animation: sketchSpark 1.3s var(--spark-delay, 0s) cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
  pointer-events: none;
}

@keyframes sketchSpark {
  to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(0.2); }
}

.heart-trail {
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  color: var(--trail-color, var(--rose-bright));
  font: 18px/1 var(--serif);
  text-shadow: 0 0 12px currentColor;
  pointer-events: none;
  animation: heartTrail 0.9s ease-out forwards;
}

@keyframes heartTrail {
  to { opacity: 0; transform: translate(var(--trail-x, 0), -42px) rotate(var(--trail-r, 0deg)) scale(0.35); }
}

.letter-section {
  padding-top: 130px;
  padding-bottom: 170px;
}

.envelope-wrap {
  position: relative;
  max-width: 520px;
  height: 360px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s, transform 0.6s;
}

.envelope-wrap.opened {
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  pointer-events: none;
}

.envelope {
  position: relative;
  width: 390px;
  height: 245px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.28));
  perspective: 900px;
}

.envelope-back,
.envelope-front,
.envelope-flap {
  position: absolute;
  inset: 0;
  border-radius: 5px;
}

.envelope-back { background: #d8c1c3; }

.envelope-front {
  z-index: 3;
  background:
    linear-gradient(32deg, #bda5aa 49.5%, transparent 50%) left bottom / 50% 100% no-repeat,
    linear-gradient(-32deg, #cbb4b8 49.5%, transparent 50%) right bottom / 50% 100% no-repeat;
  border-radius: 5px;
}

.envelope-flap {
  z-index: 4;
  height: 64%;
  background: #dbc6c8;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.1, 1), z-index 0.1s 0.35s;
}

.letter-preview {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 5%;
  width: 84%;
  height: 91%;
  padding-top: 35px;
  color: #51384b;
  background: #f5ece5;
  font-family: var(--serif);
  transition: transform 0.7s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.letter-preview i {
  display: block;
  color: #9b7e88;
  font-size: 9px;
  letter-spacing: 0.3em;
}

.letter-preview strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.wax-seal {
  position: absolute;
  z-index: 5;
  top: 82px;
  left: calc(50% - 27px);
  display: grid;
  width: 54px;
  height: 54px;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: #81415e;
  box-shadow: 0 3px 7px rgba(55, 22, 36, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.05);
  place-items: center;
  font: italic 19px Georgia, serif;
  transition: transform 0.3s;
}

.envelope:hover .wax-seal { transform: scale(1.08) rotate(-6deg); }
.envelope.is-opening .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.envelope.is-opening .letter-preview { transform: translateY(-46%); }
.envelope.is-opening .wax-seal { opacity: 0; transform: scale(0.4); }

.envelope-hint {
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.envelope-hint span { color: var(--rose); }

.letter-paper {
  position: relative;
  display: none;
  max-width: 790px;
  min-height: 750px;
  margin: -340px auto 0;
  padding: clamp(42px, 7vw, 85px);
  color: #493a43;
  background:
    linear-gradient(rgba(137, 90, 110, 0.05) 1px, transparent 1px) 0 0 / 100% 32px,
    #f7f0e9;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.32);
  transform: translateY(60px) rotate(-1deg);
  opacity: 0;
}

.letter-paper.visible {
  display: block;
  animation: paperReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes paperReveal { to { opacity: 1; transform: none; } }

.paper-topline {
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(88, 57, 70, 0.16);
  color: #9b7d89;
  font: 10px/1 Georgia, serif;
  letter-spacing: 0.18em;
}

.paper-topline b { color: #70495b; font-weight: 400; }

.letter-body {
  margin-top: 55px;
}

.letter-body p {
  margin: 0 0 24px;
  font: 17px/2.15 var(--serif);
  letter-spacing: 0.07em;
  opacity: 0;
  transform: translateY(8px);
}

.letter-paper.visible .letter-body p {
  animation: lineReveal 0.8s ease forwards;
}

.letter-paper.visible .letter-body p:nth-child(1) { animation-delay: 0.5s; }
.letter-paper.visible .letter-body p:nth-child(2) { animation-delay: 0.8s; }
.letter-paper.visible .letter-body p:nth-child(3) { animation-delay: 1.1s; }
.letter-paper.visible .letter-body p:nth-child(4) { animation-delay: 1.4s; }

@keyframes lineReveal { to { opacity: 1; transform: none; } }

.signature {
  margin-top: 43px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  color: #9b7d89;
  font: 12px var(--serif);
}

.signature strong {
  color: #724a5e;
  font: 400 30px var(--serif);
  letter-spacing: 0.2em;
}

.letter-continue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  color: #8b6676;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.15em;
  transform: translateX(-50%);
}

.letter-continue span { display: inline-block; animation: nudgeDown 1.4s infinite; }
@keyframes nudgeDown { 50% { transform: translateY(4px); } }

.final-section {
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 120px;
}

.final-section::before {
  content: "";
  position: absolute;
  width: min(760px, 90vw);
  height: min(760px, 90vw);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.014), 0 0 0 180px rgba(255, 255, 255, 0.01);
}

.final-content { position: relative; z-index: 2; }

.final-symbol {
  margin: 20px 0;
  color: var(--rose);
  font: 45px var(--serif);
  text-shadow: 0 0 30px rgba(241, 167, 194, 0.38);
  animation: heartBeat 2.2s ease-in-out infinite;
}

.final-content h2 {
  margin: 0;
  font: 400 clamp(37px, 5vw, 65px)/1.55 var(--serif);
  letter-spacing: 0.05em;
}

.final-content h2 span { color: var(--rose-bright); }

.final-content > p:not(.kicker):not(.answer-whisper) {
  margin: 23px 0 36px;
  color: var(--muted);
  font: 14px/1.9 var(--serif);
  letter-spacing: 0.08em;
}

.answer-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.yes-button,
.maybe-button {
  min-width: 156px;
  padding: 16px 25px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}

.yes-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #2b1724;
  border: 1px solid var(--rose);
  background: linear-gradient(135deg, #ffd0df, #e698b8);
  box-shadow: 0 10px 35px rgba(226, 137, 177, 0.2);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.yes-button i { font: 18px var(--serif); }
.yes-button:hover { transform: translateY(-3px); box-shadow: 0 15px 45px rgba(226, 137, 177, 0.3); }

.maybe-button {
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.maybe-button:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); }

.answer-whisper {
  min-height: 24px;
  margin: 20px 0 0;
  color: var(--rose);
  font: 12px var(--serif);
  letter-spacing: 0.08em;
}

footer {
  max-width: 1240px;
  margin: auto;
  padding: 28px 40px 40px;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 9px;
  letter-spacing: 0.18em;
}

footer b { color: var(--rose); }
footer strong { color: rgba(255, 255, 255, 0.48); font-weight: 400; }

.finale-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 24px;
  background: rgba(8, 4, 14, 0.9);
  opacity: 0;
  visibility: hidden;
  place-items: center;
  transition: opacity 0.6s, visibility 0.6s;
  backdrop-filter: blur(14px);
}

.finale-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#confettiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.finale-card {
  position: relative;
  z-index: 2;
  width: min(610px, 92vw);
  padding: 46px 38px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(46, 28, 56, 0.96), rgba(17, 11, 27, 0.96));
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.5);
  transform: scale(0.86) translateY(25px);
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.finale-overlay.visible .finale-card { transform: none; }

.overlay-close,
.panel-close {
  display: grid;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  font-size: 20px;
}

.finale-rings {
  position: relative;
  display: grid;
  width: 130px;
  height: 130px;
  margin: 0 auto 25px;
  place-items: center;
}

.finale-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(241, 167, 194, 0.25);
  border-radius: 50%;
  animation: finalePulse 2.5s ease-out infinite;
}

.finale-rings i:nth-child(2) { animation-delay: 1.25s; }
@keyframes finalePulse { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.finale-rings span {
  color: var(--rose-bright);
  font: 43px var(--serif);
  text-shadow: 0 0 30px rgba(255, 181, 212, 0.6);
}

.finale-card h2 {
  margin: 14px 0 12px;
  font: 400 clamp(31px, 5vw, 48px)/1.45 var(--serif);
}

.finale-card > p:not(.kicker) {
  color: var(--rose);
  font: 18px var(--serif);
  letter-spacing: 0.15em;
}

.forever-date {
  margin: 27px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--gold);
  font: 18px Georgia, serif;
}

.forever-date small {
  color: var(--muted);
  font: 10px var(--sans);
  letter-spacing: 0.16em;
}

.share-button {
  padding: 14px 25px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.customizer {
  position: fixed;
  z-index: 80;
  inset: 0;
  visibility: hidden;
}

.customizer.visible { visibility: visible; }

.customizer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(8, 4, 14, 0.68);
  opacity: 0;
  cursor: default;
  transition: opacity 0.4s;
  backdrop-filter: blur(8px);
}

.customizer.visible .customizer-backdrop { opacity: 1; }

.customizer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 100%);
  height: 100%;
  padding: 42px clamp(24px, 5vw, 52px);
  color: var(--ink);
  background: #171021;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.customizer.visible .customizer-panel { transform: none; }

.customizer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.customizer-head h2 {
  margin: 8px 0 0;
  font: 400 31px var(--serif);
}

.panel-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  font-size: 21px;
}

.panel-note {
  margin: 25px 0 30px;
  color: var(--muted);
  font: 13px/1.8 var(--serif);
}

#customizerForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#customizerForm label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  letter-spacing: 0.08em;
}

#customizerForm input,
#customizerForm textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  resize: vertical;
  transition: border-color 0.25s, background 0.25s;
}

#customizerForm input:focus,
#customizerForm textarea:focus {
  border-color: rgba(241, 167, 194, 0.55);
  background: rgba(255, 255, 255, 0.06);
  outline: 0;
}

.save-button,
.copy-link-button {
  padding: 15px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.save-button {
  margin-top: 8px;
  color: #291622;
  border: 0;
  background: linear-gradient(135deg, #ffd0df, #e698b8);
}

.copy-link-button {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
}

.copy-studio-open {
  width:100%;
  margin-top:18px;
  padding:15px;
  color:var(--gold);
  border:1px solid rgba(244,215,164,.2);
  border-radius:14px;
  background:rgba(244,215,164,.05);
  cursor:pointer;
  font-size:12px;
  letter-spacing:.08em;
}
.copy-studio-open span { margin-right:6px; font-size:16px; }
.studio-note { margin:10px 8px 0; color:rgba(255,255,255,.3); font:10px/1.7 var(--serif); text-align:center; }

.copy-studio { position:fixed; z-index:95; inset:0; visibility:hidden; }
.copy-studio.visible { visibility:visible; }
.copy-studio-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(7,3,12,.8); opacity:0; backdrop-filter:blur(10px); transition:opacity .4s; }
.copy-studio.visible .copy-studio-backdrop { opacity:1; }
.copy-studio-panel {
  position:absolute;
  top:3vh;
  left:50%;
  width:min(920px,94vw);
  height:94vh;
  padding:38px clamp(24px,4vw,54px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:#171021;
  box-shadow:0 35px 120px rgba(0,0,0,.5);
  overflow-y:auto;
  opacity:0;
  transform:translate(-50%,30px) scale(.97);
  transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);
}
.copy-studio.visible .copy-studio-panel { opacity:1; transform:translate(-50%,0) scale(1); }
.copy-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.copy-group-title { grid-column:1/-1; margin:14px 0 -4px; padding-bottom:10px; color:var(--rose); border-bottom:1px solid rgba(255,255,255,.08); font-size:10px; letter-spacing:.2em; }
.copy-field { display:flex; flex-direction:column; gap:8px; color:rgba(255,255,255,.58); font-size:10px; letter-spacing:.07em; }
.copy-field textarea { min-height:80px; padding:12px 14px; color:var(--ink); border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.035); resize:vertical; font:13px/1.7 var(--serif); }
.copy-field textarea:focus { border-color:rgba(241,167,194,.5); outline:0; }
.copy-studio-actions { position:sticky; bottom:-1px; display:flex; justify-content:flex-end; gap:12px; margin:30px -8px -20px; padding:18px 8px 20px; background:linear-gradient(transparent,#171021 25%); }
.copy-studio-actions button { min-width:160px; padding:14px 20px; border-radius:999px; cursor:pointer; font-size:11px; letter-spacing:.08em; }
.copy-reset { color:var(--ink); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }

.album-lightbox { position:fixed; z-index:110; inset:0; visibility:hidden; }
.album-lightbox.visible { visibility:visible; }
.album-lightbox-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(6,3,11,.9); opacity:0; backdrop-filter:blur(16px); transition:opacity .45s; }
.album-lightbox.visible .album-lightbox-backdrop { opacity:1; }
.album-viewer { position:absolute; inset:4vh 4vw; display:grid; grid-template-columns:56px minmax(0,1fr) 56px; align-items:center; opacity:0; transform:scale(.96); transition:opacity .45s,transform .45s; }
.album-lightbox.visible .album-viewer { opacity:1; transform:none; }
.album-viewer figure { width:min(1050px,100%); height:88vh; margin:auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); border:1px solid rgba(255,255,255,.12); border-radius:28px; background:#151020; overflow:hidden; box-shadow:0 35px 110px rgba(0,0,0,.55); }
.album-viewer figure > img { width:100%; height:100%; min-height:0; object-fit:contain; background:#09060e; }
.album-viewer figcaption { padding:clamp(28px,4vw,55px); display:flex; flex-direction:column; justify-content:center; }
.album-viewer figcaption > span { color:var(--rose); font:10px Georgia,serif; letter-spacing:.18em; }
.album-viewer figcaption h2 { margin:16px 0 34px; font:400 clamp(27px,3vw,42px)/1.5 var(--serif); }
.album-viewer figcaption label { display:flex; flex-direction:column; gap:10px; color:rgba(255,255,255,.5); font-size:10px; letter-spacing:.08em; }
.album-viewer figcaption input { padding:13px 0; color:var(--ink); border:0; border-bottom:1px solid rgba(255,255,255,.14); background:transparent; outline:0; }
.album-viewer figcaption > div { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.album-viewer figcaption button { padding:12px 16px; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); cursor:pointer; font-size:10px; }
.album-close,.album-nav { width:44px; height:44px; color:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(255,255,255,.05); cursor:pointer; }
.album-close { position:absolute; z-index:3; top:0; right:0; font-size:23px; }
.album-nav { justify-self:center; font-size:18px; }

.privacy-note {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
}

.toast {
  position: fixed;
  z-index: 120;
  bottom: 28px;
  left: 50%;
  padding: 12px 20px;
  color: #2c1823;
  border-radius: 999px;
  background: #f2b4cb;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 15px);
  transition: opacity 0.3s, transform 0.3s;
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.noscript {
  position: fixed;
  z-index: 200;
  bottom: 0;
  width: 100%;
  padding: 12px;
  color: #2b1724;
  background: var(--rose);
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .journey-progress { display: none; }
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 116px; padding-bottom: 95px; }
  .hero-copy { order: -1; padding-bottom: 0; }
  .eyebrow { justify-content: center; }
  .hero h1 { margin-inline: auto; }
  .hero-orbit { width: min(68vw, 420px); order: 0; margin: 32px auto -18px; }
  .scroll-cue { display: none; }
  .sync-card { grid-template-columns: 1fr; gap: 35px; text-align: center; }
  .sync-copy > p { margin-inline: auto; }
  .sync-stats { justify-content: center; }
  .continue-link { position: static; grid-column: 1; justify-content: center; margin-top: 10px; }
  .camera-section { grid-template-columns: 1fr; gap: 50px; }
  .camera-copy { max-width: 680px; text-align: center; margin: auto; }
  .camera-copy > p:not(.kicker):not(.camera-support) { margin-inline: auto; }
  .gesture-steps { max-width: 330px; margin-inline: auto; text-align: left; }
  .camera-actions { justify-content: center; }
  .reasons-section { grid-template-columns: 1fr; text-align: center; gap: 50px; }
  .reason-intro { max-width: 650px; margin: auto; }
  .reason-stage { min-height: 560px; }
  .promise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promise-card { padding-inline: 20px; }
  .promise-copy strong { font-size: 18px; }
  .whisper-section { grid-template-columns:1fr; text-align:center; gap:40px; }
  .whisper-copy { max-width:680px; margin:auto; }
  .whisper-copy > p:not(.kicker):not(.voice-privacy) { margin-inline:auto; }
  .voice-actions { justify-content:center; }
  .voice-success { bottom:4%; }
  .draw-section { grid-template-columns: 1fr; gap: 48px; }
  .draw-copy { max-width: 680px; margin: auto; text-align: center; }
  .draw-copy > p:last-of-type, .draw-progress { margin-inline: auto; }
  .draw-actions { justify-content: center; }
  .love-sketch { justify-self: center; }
}

@media (max-width: 640px) {
  .site-header { height: 70px; padding: 0 17px; }
  .site-header.scrolled { height: 62px; }
  .brand { font-size: 16px; gap: 6px; }
  .soft-button { padding: 9px 12px; font-size: 10px; }
  .header-actions { gap: 7px; }
  .section { padding-inline: 20px; }
  .hero { min-height: 100svh; padding-top: 98px; }
  .hero-orbit { width: min(78vw, 340px); margin-bottom: -5px; }
  .hero h1 { font-size: clamp(37px, 11vw, 51px); line-height: 1.42; }
  .mobile-break { display: block; }
  .hero-note { margin: 22px 0 30px; font-size: 14px; }
  .primary-button { gap: 28px; padding: 14px 15px 14px 22px; }
  .heartbeat-section, .memories-section, .letter-section { padding-top: 95px; padding-bottom: 100px; }
  .camera-section { padding-top: 95px; padding-bottom: 110px; }
  .camera-copy h2 { font-size: 37px; }
  .camera-frame { aspect-ratio: 4 / 3; border-radius: 20px; }
  .camera-caption { flex-wrap: wrap; gap: 10px; }
  .camera-caption p { order: 3; width: 100%; }
  .camera-placeholder { padding: 25px; }
  .camera-placeholder small { max-width: 240px; line-height: 1.7; }
  .camera-status { top: 14px; right: 14px; }
  .section-heading { margin-bottom: 37px; }
  .section-heading h2, .reason-intro h2 { font-size: 32px; line-height: 1.5; }
  .sync-card { min-height: 580px; padding: 36px 18px 28px; border-radius: 22px; }
  .sync-copy h3 { font-size: 31px; }
  .sync-stats { gap: 30px; margin-top: 28px; }
  .pulse-zone { width: 230px; height: 230px; }
  .hold-heart { width: 170px; height: 170px; }
  .progress-ring { width: 170px; height: 170px; }
  .heart-shape { top: 34px; left: 41px; width: 88px; height: 84px; font-size: 80px; }
  .memories-section .section-heading { margin-bottom: 25px; }
  .constellation { min-height: 650px; }
  .constellation-lines { top: 245px; height: 300px; }
  .memory-stars { inset: 245px 0 auto; height: 300px; }
  .memory-star:nth-child(1) { --x: 9% !important; }
  .memory-star:nth-child(2) { --x: 36% !important; }
  .memory-star:nth-child(3) { --x: 64% !important; }
  .memory-star:nth-child(4) { --x: 91% !important; }
  .memory-panel { top: 13px; right: 0; width: 100%; padding: 25px 24px; }
  .memory-panel > p:not(.memory-date) { min-height: 76px; }
  .reasons-section { min-height: 880px; padding-top: 80px; padding-bottom: 110px; }
  .reason-deck { width: min(320px, 79vw); height: 450px; transform: translateX(-10px); }
  .reason-card { padding: 34px 29px; }
  .reason-card h3 { font-size: 23px; }
  .reason-card:nth-child(2) { transform: translate(10px, 12px) rotate(2.5deg) scale(0.97); }
  .reason-card:nth-child(3) { transform: translate(18px, 22px) rotate(5deg) scale(0.94); }
  .reason-card:nth-child(4) { transform: translate(25px, 30px) rotate(7deg) scale(0.91); }
  .deck-next { bottom: 13px; }
  .promise-section { padding-top: 90px; padding-bottom: 110px; }
  .promise-list { grid-template-columns: 1fr; gap: 14px; }
  .promise-card { min-height: 190px; padding: 24px 22px; }
  .promise-card:hover,
  .promise-card[aria-pressed="true"] { transform: none; }
  .promise-card > i { top: 50%; left: 54px; width: 66px; height: 66px; transform: translate(-50%, -50%); font-size: 23px; }
  .promise-card[aria-pressed="true"] > i { transform: translate(-50%, -50%) scale(1.06) rotate(-6deg); }
  .promise-copy { margin: 37px 0 0 76px; }
  .promise-copy strong { font-size: 18px; }
  .promise-card > b { margin: 13px 0 0 76px; }
  .promise-core { margin-top: 34px; min-height: 135px; }
  .promise-rings i:nth-child(3) { width: 330px; height: 330px; }
  .album-section { padding-top:95px; padding-bottom:110px; }
  .heart-album { aspect-ratio:.82; border-radius:24px; }
  .heart-wall { min-height: 520px; }
  .album-photo { width:46px; border-radius:8px; padding:3px 3px 13px; }
  .heart-wall-title { top:4%; }
  .heart-wall-title strong { font-size:9px; letter-spacing:.14em; }
  .heart-wall-title span { display:none; }
  .album-center { left:17px; bottom:16px; width:62%; }
  .album-center strong { font-size:15px; }
  .album-center p { font-size:9px; }
  .heart-photo-focus { width:clamp(145px,44vw,205px); }
  .heart-wall-orbit-label { display:none; }
  .heart-gesture-console { padding:12px; grid-template-columns:1fr; gap:14px; border-radius:22px; }
  .heart-gesture-copy { padding:4px; }
  .heart-gesture-copy h3 { font-size:20px; }
  .heart-gesture-copy > p:not(.kicker) { min-height:0; }
  .heart-gesture-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heart-gesture-guide > span { padding:8px 6px; grid-template-columns:25px 1fr; }
  .heart-gesture-guide b { font-size:18px; }
  .heart-gesture-guide small { font-size:7px; }
  .album-actions { flex-wrap:wrap; }
  .album-actions button,.album-upload { padding:12px 16px; font-size:10px; }
  .whisper-section { padding-top:95px; padding-bottom:115px; }
  .whisper-visual { width:min(92vw,390px); }
  .whisper-copy h2 { font-size:36px; }
  .voice-success { bottom:2%; width:92%; padding:20px; }
  .voice-success h3 { font-size:18px; }
  .touch-section { padding-top:95px; padding-bottom:110px; }
  .touch-surface { aspect-ratio:.82; border-radius:24px; }
  .touch-point { width:60px; height:60px; }
  .touch-heart { font-size:88px; }
  .touch-result h3 { font-size:27px; }
  .draw-section { padding-top: 95px; padding-bottom: 110px; }
  .draw-copy h2 { font-size: 36px; }
  .draw-copy > p:last-of-type { font-size: 14px; }
  .love-sketch { aspect-ratio: 0.98; border-radius: 23px; }
  .sketch-result h3 { font-size: 27px; }
  .sketch-start { top: 18px; left: 18px; }
  .love-sketch > p { bottom: 15px; padding-inline: 15px; font-size: 10px; }
  .music-now { right: 12px; bottom: 14px; padding: 8px 12px 8px 8px; }
  .music-now > span:last-child { font-size: 9px; }
  .copy-fields { grid-template-columns:1fr; }
  .copy-studio-panel { top:0; width:100%; height:100%; border:0; border-radius:0; }
  .copy-studio-actions { flex-direction:column-reverse; }
  .copy-studio-actions button { width:100%; }
  .album-viewer { inset:12px; grid-template-columns:40px minmax(0,1fr) 40px; }
  .album-viewer figure { height:calc(100vh - 24px); grid-template-columns:1fr; grid-template-rows:minmax(0,1.3fr) minmax(260px,.7fr); border-radius:22px; }
  .album-viewer figcaption { padding:23px; }
  .album-viewer figcaption h2 { margin:10px 0 16px; font-size:25px; }
  .album-close { top:8px; right:8px; background:rgba(10,6,16,.7); }
  .album-nav { width:36px; height:36px; }
  .envelope-wrap { height: 290px; }
  .envelope { width: min(330px, 88vw); height: 207px; }
  .wax-seal { top: 67px; }
  .letter-paper { min-height: 820px; margin-top: -280px; padding: 38px 27px 80px; }
  .letter-body { margin-top: 38px; }
  .letter-body p { font-size: 15px; line-height: 2.05; }
  .final-section { min-height: 90vh; }
  .final-content h2 { font-size: 37px; }
  .answer-actions { flex-direction: column; }
  .yes-button, .maybe-button { min-width: 190px; }
  footer { flex-direction: column; gap: 10px; align-items: center; text-align: center; }
  .finale-card { padding: 38px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .heart-trail,
  .sketch-sparks { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Experience layer v2
   A clearer navigation system, stronger editorial hierarchy and
   an explicit motion preference make the long-form page easier to
   enter, understand and revisit.
   ───────────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 50%;
  padding: 10px 16px;
  color: #281623;
  border-radius: 999px;
  background: var(--rose-bright);
  font-size: 11px;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -150%);
  transition: opacity .2s, transform .2s;
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  color: rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .08em;
  transition: color .25s, border-color .25s, background .25s;
}

.motion-toggle i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 10px var(--rose);
  transition: background .25s, box-shadow .25s;
}

.motion-toggle:hover,
.motion-toggle[aria-pressed="true"] {
  color: var(--ink);
  border-color: rgba(255,181,212,.4);
  background: rgba(241,167,194,.08);
}

.motion-toggle[aria-pressed="false"] i {
  background: rgba(255,255,255,.3);
  box-shadow: none;
}

.chapter-dock {
  position: fixed;
  z-index: 16;
  top: 50%;
  right: clamp(18px, 2.8vw, 42px);
  width: 112px;
  padding: 14px 12px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(13,8,23,.6);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
  transition: opacity .3s, border-color .3s, background .3s;
}

.chapter-dock:hover { border-color: rgba(255,181,212,.28); background: rgba(20,11,31,.78); }
.chapter-dock-head { display: grid; gap: 7px; padding: 0 3px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chapter-dock-head span { color: rgba(255,255,255,.3); font-size: 7px; letter-spacing: .22em; }
.chapter-dock-head strong { color: var(--rose-bright); font: 14px var(--serif); letter-spacing: .1em; }
.chapter-dock-list { display: grid; gap: 2px; padding: 9px 0; }
.chapter-dock-list a { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 5px; min-height: 22px; padding: 2px 3px; color: rgba(255,255,255,.36); border-radius: 6px; font-size: 9px; transition: color .2s, background .2s, transform .2s; }
.chapter-dock-list a b { color: rgba(255,255,255,.2); font: 8px Georgia,serif; }
.chapter-dock-list a:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.05); transform: translateX(-2px); }
.chapter-dock-list a.active { color: var(--ink); background: linear-gradient(90deg, rgba(241,167,194,.15), transparent); }
.chapter-dock-list a.active b { color: var(--rose); }
.chapter-dock-foot { display: flex; align-items: center; gap: 8px; padding: 8px 3px 0; color: rgba(255,255,255,.28); font: 8px Georgia,serif; letter-spacing: .1em; }
.chapter-dock-foot i { display: block; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rose), transparent); opacity: .7; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 23px;
  margin-top: 26px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(244,215,164,.55); }

.hero-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 650px;
  margin-top: 42px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.hero-roadmap a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  padding: 13px 12px 11px 0;
  color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .25s, padding .25s;
}

.hero-roadmap a:not(:last-child) { border-right: 1px solid rgba(255,255,255,.08); padding-right: 12px; margin-right: 12px; }
.hero-roadmap a:hover { color: var(--ink); padding-left: 5px; }
.hero-roadmap b { grid-row: span 2; color: var(--rose); font: 9px Georgia,serif; letter-spacing: .1em; }
.hero-roadmap span { font-size: 10px; letter-spacing: .04em; }
.hero-roadmap i { color: var(--gold); font-style: normal; font-size: 12px; }

main > section { isolation: isolate; }
main > section::after { content: ""; position: absolute; z-index: -1; top: 0; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); opacity: .75; }
main > section:nth-child(3n + 1)::before { content: ""; position: absolute; z-index: -2; top: 16%; right: -12%; width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(255,102,155,.065), transparent 68%); pointer-events: none; }
main > section:nth-child(3n + 2)::before { content: ""; position: absolute; z-index: -2; bottom: 7%; left: -14%; width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(148,110,255,.06), transparent 68%); pointer-events: none; }

.section-heading h2,
.reason-intro h2,
.camera-copy h2,
.whisper-copy h2,
.draw-copy h2,
.final-content h2 { text-wrap: balance; }

.heart-wall-hud {
  position: absolute;
  z-index: 6;
  top: 28px;
  right: 32px;
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.42);
  font-size: 8px;
  letter-spacing: .18em;
  pointer-events: none;
  text-align: right;
}

.heart-wall-hud span { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; color: rgba(255,194,215,.7); }
.heart-wall-hud span i { width: 5px; height: 5px; border-radius: 50%; background: #ff87b7; box-shadow: 0 0 10px #ff87b7; animation: cameraBlink 1.25s ease-in-out infinite; }
.heart-wall-hud small { color: rgba(255,255,255,.28); font-size: 7px; letter-spacing: .12em; }

body.calm-mode .aurora,
body.calm-mode .noise { opacity: .015; }
body.calm-mode .orbit,
body.calm-mode .hero-heart::before,
body.calm-mode .hero-heart::after,
body.calm-mode .music-bars i,
body.calm-mode .heart-wall-hud span i { animation-play-state: paused; }
body.calm-mode .shimmer-text { animation: none; background-position: 50% center; }
body.calm-mode .heart-wall-haze { filter: blur(18px); }

@media (max-width: 1180px) {
  .chapter-dock { display: none; }
  .hero-roadmap { max-width: 590px; }
}

@media (max-width: 900px) {
  .chapter-dock { display: none; }
  .motion-toggle span { display: none; }
  .motion-toggle { width: 38px; padding: 0; justify-content: center; }
  .hero-meta { justify-content: center; }
  .hero-roadmap { margin-inline: auto; text-align: left; }
  .heart-album { aspect-ratio: 1.18; min-height: 520px; border-radius: 28px; }
  .album-actions { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .album-actions button,
  .album-upload { min-height: 46px; padding: 12px 20px; font-size: 11px; }
  .heart-gesture-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .heart-gesture-guide > span { padding: 10px 10px; }
  .heart-gesture-actions button { min-height: 44px; padding: 11px 20px; }
}

@media (hover: none) and (pointer: coarse) {
  .chapter-dock { display: none; }
  .album-actions button,
  .album-upload,
  .primary-button,
  .soft-button { min-height: 44px; }
}

@media (max-width: 640px) {
  .hero-meta { gap: 10px 14px; margin-top: 21px; font-size: 8px; }
  .hero-roadmap { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 30px; max-width: 340px; }
  .hero-roadmap a { padding: 11px 8px 10px 0; }
  .hero-roadmap a:nth-child(2) { border-right: 0; margin-right: 0; }
  .hero-roadmap a:nth-child(3), .hero-roadmap a:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
  .hero-roadmap a:nth-child(4) { border-right: 0; margin-right: 0; }
  .heart-wall-hud { top: 30px; right: 18px; font-size: 7px; }
  .heart-wall-hud small { font-size: 6px; }
  .site-header .motion-toggle { display: grid; }
}

/*
 * Twilight Rose theme refinement
 * Keep the night-sky mood, but replace the flat black surfaces with a
 * warmer plum/lilac glass system so the story feels intimate rather than
 * heavy. The album stage stays dark enough for the heart particles to glow.
 */
body {
  color-scheme: dark;
}

.site-header {
  background: linear-gradient(180deg, rgba(18, 11, 29, 0.72), rgba(18, 11, 29, 0));
}

.site-header.scrolled {
  background: rgba(25, 14, 38, 0.82);
  border-bottom-color: rgba(255, 204, 224, 0.12);
  box-shadow: 0 12px 36px rgba(8, 3, 16, 0.18);
}

.brand-mark,
.brand-dot { color: var(--rose-bright); }

.desktop-nav a { color: rgba(255, 232, 244, 0.62); }
.desktop-nav a:hover { color: var(--ink); }

.icon-button,
.soft-button {
  border-color: rgba(255, 218, 235, 0.16);
  background: rgba(255, 220, 236, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.icon-button:hover,
.soft-button:hover {
  border-color: rgba(255, 190, 216, 0.48);
  background: rgba(239, 166, 194, 0.12);
}

.section-heading > p:last-child,
.reason-intro > p:last-child,
.hero-note,
.sync-copy > p,
.memory-panel > p:not(.memory-date),
.reason-card p,
.album-privacy {
  color: var(--muted);
}

.primary-button,
.deck-next,
.album-actions button,
.album-upload,
.heart-gesture-actions button {
  border-color: rgba(255, 221, 236, 0.18);
  background: rgba(255, 224, 239, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.primary-button:hover,
.deck-next:hover,
.album-actions button:hover,
.heart-gesture-actions button:hover {
  border-color: rgba(255, 191, 216, 0.52);
  background: rgba(239, 166, 194, 0.14);
}

.button-arrow,
.deck-next b {
  color: #3b1d32;
  background: linear-gradient(135deg, #ffd2e1, #eaa2bf);
  box-shadow: 0 0 22px rgba(239, 166, 194, 0.22);
}

.sync-card,
.memory-panel,
.heart-gesture-console {
  border-color: rgba(255, 218, 234, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 224, 239, 0.095), rgba(255, 224, 239, 0.025) 56%, rgba(148, 112, 190, 0.055)),
    rgba(30, 17, 44, 0.58);
  box-shadow: 0 30px 100px rgba(10, 4, 19, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.memory-panel {
  background:
    linear-gradient(145deg, rgba(255, 224, 239, 0.1), rgba(255, 224, 239, 0.025)),
    rgba(35, 19, 49, 0.8);
}

.constellation,
.hero-roadmap,
.memory-panel,
.heart-gesture-guide > span {
  border-color: rgba(255, 218, 234, 0.13);
}

.reason-card {
  border-color: rgba(255, 226, 239, 0.2);
  background:
    radial-gradient(circle at 52% 20%, rgba(255, 222, 237, 0.16), transparent 34%),
    linear-gradient(145deg, #603b66, #251531 74%, #1b1027);
  box-shadow: 0 25px 70px rgba(10, 4, 19, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.promise-card {
  border-color: rgba(255, 221, 236, 0.14);
  background: linear-gradient(145deg, rgba(255, 224, 239, 0.085), rgba(255, 224, 239, 0.025));
  box-shadow: 0 24px 65px rgba(10, 4, 19, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main > section::after {
  background: linear-gradient(90deg, transparent, rgba(255, 210, 229, 0.16), transparent);
}

main > section:nth-child(3n + 1)::before {
  background: radial-gradient(circle, rgba(255, 132, 177, 0.085), transparent 68%);
}

main > section:nth-child(3n + 2)::before {
  background: radial-gradient(circle, rgba(165, 139, 255, 0.075), transparent 68%);
}

/* The 3D heart stage is the visual anchor: a plum-blue glass well lets the
   pink contour read clearly while preserving enough contrast for photos. */
.heart-album {
  border-color: rgba(255, 161, 198, 0.24);
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 78, 145, 0.19), transparent 24%),
    radial-gradient(ellipse at 50% 52%, rgba(125, 75, 147, 0.26), transparent 65%),
    radial-gradient(ellipse at 12% 8%, rgba(159, 126, 214, 0.14), transparent 38%),
    linear-gradient(145deg, #1a1027 0%, #0e0918 62%, #12091a 100%);
  box-shadow:
    0 42px 120px rgba(8, 3, 16, 0.48),
    inset 0 0 120px rgba(255, 110, 165, 0.075),
    inset 0 1px 0 rgba(255, 224, 239, 0.08),
    0 0 90px rgba(185, 82, 151, 0.15);
}

.heart-wall::before {
  opacity: 0.72;
  background-image:
    radial-gradient(circle at 12% 26%, rgba(255, 239, 247, 0.66) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 18%, rgba(255, 204, 226, 0.58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 82%, rgba(255, 225, 183, 0.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 73%, rgba(215, 201, 255, 0.42) 0 1px, transparent 1.4px);
}

.heart-wall::after {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(12, 6, 21, 0.12) 63%, rgba(9, 4, 16, 0.56) 100%);
}

.heart-wall-haze {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 56, 132, 0.24), transparent 21%),
    radial-gradient(ellipse at 50% 52%, rgba(195, 141, 237, 0.13), transparent 42%),
    radial-gradient(ellipse at 20% 35%, rgba(255, 194, 220, 0.06), transparent 30%);
}

.heart-wall-title {
  color: rgba(255, 246, 250, 0.96);
  text-shadow: 0 0 26px rgba(255, 155, 197, 0.36);
}

.heart-wall-title span { color: rgba(255, 207, 226, 0.58); }
.heart-wall-hud span { color: rgba(255, 211, 229, 0.82); }
.heart-wall-hud small { color: rgba(255, 231, 242, 0.38); }

.album-center {
  color: rgba(255, 232, 244, 0.74);
  text-shadow: 0 2px 22px rgba(9, 3, 16, 0.72);
}

.album-center strong { color: #f8dcae; text-shadow: 0 0 18px rgba(245, 216, 165, 0.22); }

.album-photo.placeholder {
  border-color: rgba(255, 141, 184, 0.24);
  background: linear-gradient(145deg, rgba(116, 35, 78, 0.48), rgba(196, 119, 177, 0.06));
  box-shadow: 0 0 22px rgba(255, 61, 127, 0.14), inset 0 0 16px rgba(255, 224, 239, 0.035);
}

.heart-gesture-console {
  background:
    linear-gradient(135deg, rgba(255, 224, 239, 0.105), rgba(185, 156, 238, 0.045) 54%, rgba(255, 224, 239, 0.025)),
    rgba(30, 17, 44, 0.62);
}

.heart-gesture-mode {
  border-color: rgba(255, 221, 236, 0.16);
  background: rgba(19, 10, 30, 0.56);
}

.heart-gesture-guide > span { background: rgba(255, 224, 239, 0.04); }
.heart-gesture-console[data-gesture="open"] [data-gesture-guide="open"],
.heart-gesture-console[data-gesture="fist"] [data-gesture-guide="fist"],
.heart-gesture-console[data-gesture="pinch"] [data-gesture-guide="pinch"],
.heart-gesture-console[data-gesture="move"] [data-gesture-guide="move"] {
  border-color: rgba(255, 190, 216, 0.62);
  background: rgba(239, 166, 194, 0.16);
}

.album-upload,
.album-actions button[aria-pressed="true"],
.heart-gesture-actions .heart-gesture-start {
  color: #3a1b30;
  background: linear-gradient(135deg, #ffd7e5, #e7a4c0);
  box-shadow: 0 8px 24px rgba(226, 126, 168, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.chapter-dock {
  border-color: rgba(255, 218, 234, 0.15);
  background: rgba(27, 14, 41, 0.68);
  box-shadow: 0 18px 60px rgba(8, 3, 16, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chapter-dock:hover { background: rgba(39, 20, 54, 0.82); }

.album-lightbox-backdrop {
  background:
    radial-gradient(circle at 50% 38%, rgba(104, 58, 112, 0.52), transparent 56%),
    rgba(10, 5, 18, 0.9);
}

.album-lightbox {
  background: #0a0512;
}

.album-viewer figure {
  border-color: rgba(255, 218, 234, 0.18);
  background: linear-gradient(145deg, #2b1939, #160c23 72%);
  box-shadow: 0 35px 110px rgba(7, 2, 14, 0.64), 0 0 80px rgba(180, 92, 155, 0.12);
}

.album-viewer figure > img {
  background:
    radial-gradient(circle at 50% 45%, rgba(132, 79, 145, 0.18), transparent 56%),
    #10091a;
}

.album-viewer figcaption {
  background: linear-gradient(145deg, rgba(47, 25, 57, 0.74), rgba(21, 11, 32, 0.88));
}

.album-close,
.album-nav {
  border-color: rgba(255, 218, 234, 0.2);
  background: rgba(35, 18, 48, 0.72);
  box-shadow: 0 12px 30px rgba(7, 2, 14, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.album-close:hover,
.album-nav:hover {
  border-color: rgba(255, 190, 216, 0.55);
  background: rgba(105, 48, 84, 0.72);
}

@media (max-width: 640px) {
  .site-header { background: rgba(18, 11, 29, 0.74); }
  .site-header.scrolled { background: rgba(25, 14, 38, 0.9); }
  .heart-album {
    box-shadow:
      0 28px 72px rgba(8, 3, 16, 0.42),
      inset 0 0 80px rgba(255, 110, 165, 0.08),
      inset 0 1px 0 rgba(255, 224, 239, 0.08);
  }
}

/* Tablet & Mobile Long-press & Callout Suppression */
.hold-heart,
.pulse-zone,
.heart-shape,
.voice-hold,
.touch-surface,
.draw-canvas,
.heart-album,
.heart-wall {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}