:root{--color-bg:#faf3ed;--color-primary:#f0c6ce;--color-accent:#a64d5f;--color-text:#3a2a28;--color-gold:#c9a66b;--color-secondary:#d9c7da;--font-display:"Fraunces", serif;--font-body:"Plus Jakarta Sans", sans-serif;--font-hand:"Caveat", cursive}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-body);justify-content:center;align-items:flex-start;min-height:100vh;display:flex;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display)}.handwriting{font-family:var(--font-hand)}#app-container{background-color:var(--color-bg);z-index:2;width:100%;max-width:430px;min-height:100vh;position:relative;overflow-x:hidden;box-shadow:0 0 20px #0000000d}#ambient-container{pointer-events:none;z-index:1;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.petal{background-color:var(--color-primary);opacity:.4;border-radius:100% 0;width:12px;height:12px;animation:linear infinite fall;position:absolute;top:-20px}@keyframes fall{0%{opacity:0;transform:translateY(-5vh)translate(0)rotate(0)}10%{opacity:.5}90%{opacity:.5}to{opacity:0;transform:translateY(110vh)translate(50px)rotate(360deg)}}.section{opacity:0;min-height:100vh;padding:24px;transition:opacity .4s,transform .4s;display:none;transform:translateY(20px)}.section.active{flex-direction:column;display:flex}.section.visible{opacity:1;transform:none}.btn-primary{background-color:var(--color-accent);color:#fff;font-family:var(--font-body);cursor:pointer;border:none;border-radius:20px;padding:14px 28px;font-size:1rem;font-weight:600;transition:transform .2s,background-color .2s,box-shadow .2s;box-shadow:0 4px 10px #a64d5f4d}.btn-primary:hover{background-color:#8c3f4d;transform:translateY(-2px);box-shadow:0 6px 14px #a64d5f66}.btn-primary:active{transform:translateY(0)}.btn-primary:focus-visible{outline:3px solid var(--color-gold);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.petal{display:none}}#pin-section{text-align:center;justify-content:center;align-items:center}.pin-container{flex-direction:column;align-items:center;width:100%;display:flex}.icon-couple{margin-bottom:10px;animation:3s ease-in-out infinite float}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.pin-dots{gap:16px;margin-bottom:40px;display:flex}.dot{background-color:var(--color-primary);border:2px solid #0000;border-radius:50%;width:16px;height:16px;transition:all .2s}.dot.filled{background-color:var(--color-accent);transform:scale(1.1)}.dot.error{background-color:#e63946;border-color:#e63946}.shake{animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.keypad{grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:250px;display:grid}.key{width:60px;height:60px;color:var(--color-text);font-family:var(--font-body);cursor:pointer;background-color:#fff;border:none;border-radius:50%;justify-self:center;font-size:1.5rem;font-weight:600;transition:transform .1s,background-color .2s;box-shadow:0 4px 6px #0000000d}.key:active{background-color:var(--color-primary);transform:scale(.9)}.key.clear{color:#e63946;font-size:1.2rem}.key.submit{color:var(--color-accent);font-weight:700}
