:root{
  --bg:#FFF9FB; --card:#fff; --accent:#FFB6C1; --muted:#9b8b9e; --shadow: 0 8px 30px rgba(120,90,120,0.08);
  --radius:18px;
}
*{box-sizing:border-box}
body{font-family:Karla, system-ui, Arial; background:linear-gradient(180deg,#FFF9FB 0%, #FFF0F6 100%); margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;}
.wrap{width:360px; max-width:92vw;}
.card{background:var(--card); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); text-align:center}


h1{font-family:'Dancing Script', cursive; font-size:32px; margin:0 0 6px; color:#6b3750}
p.lead{margin:0 0 18px; color:var(--muted); font-size:14px}


.password-visual{display:flex; gap:8px; justify-content:center; margin:18px 0 10px}
.slot{width:40px; height:46px; border-radius:10px; background:linear-gradient(180deg,#fff,#FFF6FA); display:flex; align-items:center; justify-content:center; font-size:20px; color:#6b3750; box-shadow: 0 4px 12px rgba(100,60,80,0.06); border:1px dashed rgba(107,55,80,0.06)}
.slot .char{font-weight:700}
.slot.empty{color:#d7bfd0}


#pwd{position:absolute; left:-9999px}


.controls{display:flex; gap:10px; justify-content:center; margin-top:14px}
.btn{padding:10px 14px; border-radius:14px; border:none; font-weight:700; cursor:pointer; box-shadow: 0 6px 18px rgba(107,55,80,0.08); background:linear-gradient(180deg,var(--accent),#ff8fb6); color:#6b3750; transform:translateY(0); transition:transform .14s ease}
.btn:active{transform:translateY(2px)}
.btn.secondary{background:transparent; border:1px solid rgba(107,55,80,0.06); color:var(--muted)}


.hint{font-size:12px; color:var(--muted); margin-top:12px}


.scene{display:none; padding:28px; text-align:center}
.scene.show{display:block}
.message{font-family:'Dancing Script', cursive; font-size:22px; color:#6b3750; line-height:1.4; background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6)); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.confetti{font-size:40px; margin-top:12px}


@media (max-width:400px){ .slot{width:34px; height:42px} }

.carousel { position: relative; overflow: hidden; margin-top:12px; }
.slides { display: flex; transition: transform 0.5s ease; }
.slide { min-width: 100%; display: none; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6)); border-radius:12px; box-shadow:var(--shadow); font-family:'Dancing Script', cursive; font-size:22px; color:#6b3750; line-height:1.4; }
.slide.active { display: block; }

.dots { text-align:center; margin-top:10px; }
.dot { display:inline-block; width:10px; height:10px; margin:0 4px; border-radius:50%; background:#bbb; cursor:pointer; }
.dot.active { background:#717171; }

.carousel .slide .date {
  font-size: 12px;
  color: rgba(107,55,80,0.4);
  text-align: right;
  margin-bottom: 6px;
  font-style: italic;
}