.couple-logo {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--blush), 0 14px 35px #aa6e6e2c;
  transform: rotate(-2deg);
}

.art .polaroid {
  margin: 0;
  height: auto;
  min-height: 280px;
  padding: 10px 10px 18px;
  background: #fff;
}

.art .hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #efb298, #f6c6b8);
}

.art .hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.art .hero-photo span {
  color: #fff;
  font-size: 48px;
}

.art .polaroid figcaption {
  padding: 14px 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.couple-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 50%;
}

.couple-logo span {
  position: absolute;
  right: -5px;
  bottom: 7px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 4px solid var(--cream);
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 18px;
  transform: rotate(8deg);
}

/* Memory media keeps its original aspect ratio instead of being cropped. */
.card .media {
  height: auto;
  min-height: 0;
  display: block;
  background: #f7eee7;
}

.card .media img,
.card .media video {
  width: 100%;
  height: auto;
  max-height: 72vh;
  display: block;
  object-fit: contain;
  background: #f7eee7;
}

.card .media > span {
  min-height: 260px;
  display: grid;
  place-items: center;
}

@media (max-width: 520px) {
  .card .media img,
  .card .media video {
    max-height: none;
  }
}

.character-garden {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 90px;
  padding: 0 25px;
  overflow: visible;
}

.character-garden img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(226, 171, 163, 0.28);
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(124, 79, 72, 0.1);
  animation: character-breathe 4.6s ease-in-out infinite;
  transform-origin: center bottom;
}

.character-sparkle {
  position: absolute;
  z-index: 2;
  color: var(--rose);
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(211, 107, 115, 0.22));
  animation: sparkle-float 2.8s ease-in-out infinite;
}

.sparkle-one { top: 9%; left: 7%; font-size: 28px; }
.sparkle-two { top: 13%; right: 8%; font-size: 34px; animation-delay: -.9s; color: #f2bd54; }
.sparkle-three { bottom: 15%; right: 18%; font-size: 31px; animation-delay: -1.7s; }

@keyframes character-breathe {
  0%, 100% { transform: translateY(0) rotate(-0.25deg); }
  50% { transform: translateY(-9px) rotate(0.25deg); }
}

@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(.9); opacity: .65; }
  50% { transform: translateY(-14px) rotate(10deg) scale(1.14); opacity: 1; }
}

@media (max-width: 640px) {
  .character-garden { margin-bottom: 55px; padding: 0 16px; }
  .character-garden img { border-radius: 20px; animation-duration: 4s; }
  .sparkle-one { left: 5%; font-size: 20px; }
  .sparkle-two { right: 6%; font-size: 24px; }
  .sparkle-three { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .character-garden img,
  .character-sparkle { animation: none; }
}

.card .card-note {
  min-height: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.card-actions {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 44px;
}

.card { cursor: zoom-in; }
.card:active { transform: scale(.995); }

.memory-modal[hidden] { display: none; }
.memory-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 28px; }
.modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(69, 48, 43, .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; }
.modal-card { position: relative; z-index: 1; width: min(960px, 94vw); max-height: 88vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 28px; background: rgba(255, 252, 247, .92); box-shadow: 0 30px 100px rgba(48, 28, 24, .35); animation: modal-rise .28s ease-out; }
.modal-media { min-height: 520px; display: grid; place-items: center; overflow: hidden; background: #eaded5; }
.modal-media img,.modal-media video { width: 100%; height: 100%; max-height: 88vh; display: block; object-fit: contain; }
.modal-media span { font-size: 80px; color: white; }
.modal-copy { align-self: center; max-height: 88vh; overflow: auto; padding: 52px 42px; }
.modal-copy time { color: #b87570; font: 700 12px Georgia,serif; letter-spacing: .08em; }
.modal-copy p { margin: 22px 0 35px; color: var(--ink); font: 20px/1.9 Georgia,"Songti SC",serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal-copy small { color: var(--muted); }
.modal-edit { display: block; margin-top: 28px; border: 0; border-radius: 999px; padding: 11px 17px; background: #f5d4cf; color: #a95f5f; font-weight: 700; cursor: pointer; }
.modal-edit[hidden],.modal-edit-form[hidden],#modalView[hidden] { display: none; }
.modal-edit-form { display: grid; gap: 20px; }
.modal-edit-form label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
.modal-edit-form input,.modal-edit-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.8); color: var(--ink); padding: 13px; }
.modal-edit-form textarea { min-height: 210px; resize: vertical; font: 17px/1.7 Georgia,"Songti SC",serif; }
.modal-edit-form>div { display: flex; justify-content: flex-end; gap: 10px; }
.modal-edit-form button { border: 0; border-radius: 999px; padding: 11px 16px; background: #eee2dc; color: var(--ink); cursor: pointer; }
.modal-edit-form button[type="submit"] { background: var(--rose); color: white; font-weight: 700; }
#modalEditMsg { min-height: 18px; margin: -10px 0 0; color: #b75f66; font-size: 12px; }
.modal-close { position: absolute; z-index: 2; top: 15px; right: 15px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--ink); font-size: 25px; line-height: 1; cursor: pointer; box-shadow: 0 5px 20px rgba(60,35,30,.15); }
.modal-open { overflow: hidden; }
@keyframes modal-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .memory-modal { padding: 15px; }
  .modal-card { width: 100%; max-height: 92vh; grid-template-columns: 1fr; grid-template-rows: minmax(260px, 58vh) auto; border-radius: 22px; }
  .modal-media { min-height: 0; }
  .modal-media img,.modal-media video { max-height: 58vh; }
  .modal-copy { padding: 25px 24px 30px; }
  .modal-copy p { margin: 12px 0 20px; font-size: 17px; line-height: 1.75; }
}

.mood-intro { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.mood-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mood-choice { --mood:#ed8c92; --wash:#ffe3e3; position:relative; min-height:230px; overflow:hidden; border:1px solid var(--line); border-radius:28px; padding:28px; background:rgba(255,255,255,.78); color:var(--ink); text-align:left; box-shadow:0 15px 40px rgba(96,65,56,.07); cursor:pointer; transition:.25s ease; }
.mood-choice:hover { transform:translateY(-6px); box-shadow:0 22px 55px rgba(96,65,56,.14); }
.mood-choice::after { content:""; position:absolute; right:-38px; bottom:-55px; width:145px; height:145px; border-radius:50%; background:var(--wash); }
.mood-choice.bad { --mood:#77a89b; --wash:#deeee8; }
.mood-choice.private { --mood:#9b82b2; --wash:#eee4f4; }
.mood-choice>i { position:absolute; top:20px; right:20px; padding:5px 9px; border-radius:99px; background:#58465f; color:white; font:normal 9px/1 sans-serif; letter-spacing:.1em; }
.mood-icon { position:relative; z-index:1; width:72px; height:72px; display:grid; place-items:center; border-radius:24px; background:var(--wash); font-size:34px; }
.mood-choice>strong,.mood-choice>small { position:relative; z-index:1; display:block; }
.mood-choice>strong { margin:22px 0 8px; font:500 25px Georgia,"Songti SC",serif; }
.mood-choice>small { color:var(--muted); line-height:1.7; }
.composer-modal[hidden] { display:none; }
.composer-modal { --mood:#ed8c92; --mood-soft:#fff0ee; position:fixed; inset:0; z-index:45; display:grid; place-items:center; padding:28px; }
.composer-modal[data-category="bad"] { --mood:#77a89b; --mood-soft:#edf7f3; }
.composer-modal[data-category="private"] { --mood:#9b82b2; --mood-soft:#f5eff8; }
.composer-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(69,48,43,.34); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); }
.floating-composer { position:relative; z-index:1; width:min(1040px,94vw); border-color:color-mix(in srgb,var(--mood) 38%,var(--line)); background:rgba(255,253,249,.96); box-shadow:0 30px 100px rgba(48,28,24,.34); animation:modal-rise .28s ease-out; }
.floating-composer .upload { background:var(--mood-soft); border-color:color-mix(in srgb,var(--mood) 48%,white); }
.floating-composer .upload b,.selected-category { color:var(--mood); }
.floating-composer .row button { background:var(--mood); box-shadow:0 5px 0 color-mix(in srgb,var(--mood) 78%,black); }
.composer-close { position:absolute; z-index:3; top:15px; right:15px; width:39px; height:39px; border:0; border-radius:50%; background:white; color:var(--ink); font-size:25px; cursor:pointer; box-shadow:0 5px 20px rgba(60,35,30,.15); }
.selected-category { display:flex; align-items:center; gap:9px; margin-bottom:13px; font-size:11px; letter-spacing:.1em; }
.selected-category span { width:9px; height:9px; border-radius:50%; background:currentColor; }
.private-hint { color:var(--muted); font-size:11px; }
.private-hint[hidden] { display:none; }
.mood-badge { display:inline-block; margin-top:15px; padding:5px 9px; border-radius:99px; background:#ffe3e3; color:#b86669; font-size:9px; }
.mood-badge.bad { background:#deeee8; color:#568779; }
.mood-badge.private { background:#eee4f4; color:#7d6891; }
.mood-badge+time { margin-top:10px; }

.hero-carousel { perspective:1100px; overflow:hidden; outline:none; user-select:none; touch-action:pan-y; }
.hero-carousel>span { z-index:8; }
.hero-slides { position:absolute; inset:0; transform-style:preserve-3d; }
.hero-slide { position:absolute; left:50%; top:38px; width:250px; height:350px; margin:0; padding:10px 10px 50px; overflow:hidden; background:white; box-shadow:0 20px 50px rgba(76,48,36,.25); transform-origin:center; transition:transform .65s cubic-bezier(.22,.8,.24,1),opacity .5s ease,filter .5s ease; cursor:pointer; }
.hero-slide img { width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; }
.hero-slide figcaption { position:absolute; left:10px; right:10px; bottom:0; height:50px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:13px Georgia,"Songti SC",serif; }
.hero-slide.current { z-index:5; opacity:1; filter:none; transform:translateX(-50%) translateZ(70px); }
.hero-slide.left { z-index:3; opacity:.68; filter:saturate(.75); transform:translateX(-132%) rotateY(38deg) scale(.82); }
.hero-slide.right { z-index:3; opacity:.68; filter:saturate(.75); transform:translateX(32%) rotateY(-38deg) scale(.82); }
.hero-slide.far-left { z-index:2; opacity:.38; filter:saturate(.55); transform:translateX(-178%) rotateY(48deg) scale(.62); }
.hero-slide.far-right { z-index:2; opacity:.38; filter:saturate(.55); transform:translateX(78%) rotateY(-48deg) scale(.62); }
.hero-slide.hidden { z-index:1; opacity:0; pointer-events:none; transform:translateX(-50%) translateZ(-220px) scale(.65); }
.hero-arrow { position:absolute; z-index:9; top:50%; width:41px; height:41px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); font-size:24px; line-height:1; box-shadow:0 6px 20px rgba(76,48,36,.18); cursor:pointer; }
.hero-prev { left:14px; }.hero-next { right:14px; }
.hero-dots { position:absolute; z-index:9; left:50%; bottom:15px; display:flex; gap:6px; transform:translateX(-50%); }
.hero-dots button { width:7px; height:7px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.62); transition:.3s ease; cursor:pointer; }
.hero-dots button.active { width:23px; background:white; }
@media(min-width:900px){header{grid-template-columns:.9fr 1.1fr}.hero-slide{width:225px}}
@media(max-width:899px){.hero-slide.far-left,.hero-slide.far-right{opacity:0;pointer-events:none}}
@media(max-width:520px){.hero-slide{top:35px;width:205px;height:280px}.hero-slide.left{transform:translateX(-120%) rotateY(36deg) scale(.78)}.hero-slide.right{transform:translateX(20%) rotateY(-36deg) scale(.78)}.hero-arrow{width:36px;height:36px}.hero-prev{left:7px}.hero-next{right:7px}.hero-dots button{width:6px;height:6px}.hero-dots button.active{width:18px}}
@media(max-width:760px){.mood-choices{grid-template-columns:1fr}.mood-choice{min-height:170px}.composer-modal{padding:14px}.floating-composer{max-height:92vh;overflow:auto}.composer-close{top:10px;right:10px}}