@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap";:root{--color-primary: #2d6a4f;--color-primary-light: #40916c;--color-primary-dark: #1b4332;--color-primary-muted: rgba(45, 106, 79, .12);--color-accent: #d4a017;--color-accent-light: #f0c040;--color-accent-muted: rgba(212, 160, 23, .15);--color-beige: #f5f0e8;--color-beige-dark: #ede4d3;--color-beige-warm: #faf6ef;--color-text-dark: #1a2e1f;--color-text-mid: #3d5a45;--color-text-light: #7a9482;--note-green: #d8edd9;--note-beige: #f5e9ce;--note-sage: #c8ddd0;--note-cream: #fdf6e3;--note-mint: #cce8d4;--note-peach: #f7e4c8;--font-display: "Playfair Display", serif;--font-body: "Plus Jakarta Sans", sans-serif;--mobile-max-width: 430px;--border-radius-sm: 8px;--border-radius-md: 16px;--border-radius-lg: 24px;--border-radius-xl: 32px;--shadow-note: 3px 4px 12px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);--shadow-card: 0 4px 20px rgba(45, 106, 79, .1);--shadow-btn: 0 4px 15px rgba(45, 106, 79, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:#e8e0d5;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden}#root{width:100%;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background:radial-gradient(ellipse at top,#d6cfc4,#c5bdb3);padding:0}.app-container{width:100%;max-width:var(--mobile-max-width);min-height:100vh;background:var(--color-beige-warm);position:relative;overflow:hidden;box-shadow:0 0 60px #0003}@media (min-width: 500px){.app-container{min-height:100vh;box-shadow:0 0 80px #00000040,0 0 0 1px #ffffff1a}}.pattern-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.04;background-image:radial-gradient(circle at 25% 25%,var(--color-primary) 2px,transparent 2px),radial-gradient(circle at 75% 75%,var(--color-primary) 2px,transparent 2px),radial-gradient(circle at 75% 25%,var(--color-accent) 1.5px,transparent 1.5px),radial-gradient(circle at 25% 75%,var(--color-accent) 1.5px,transparent 1.5px);background-size:40px 40px,40px 40px,40px 40px,40px 40px}h1,h2,h3{font-family:var(--font-display);color:var(--color-text-dark);line-height:1.2}p,span,label,input,textarea,button{font-family:var(--font-body)}.app-container::-webkit-scrollbar{width:4px}.app-container::-webkit-scrollbar-track{background:transparent}.app-container::-webkit-scrollbar-thumb{background:var(--color-primary-light);border-radius:2px}.section{position:relative;padding:48px 24px;z-index:1}.ornament-divider{display:flex;align-items:center;gap:12px;padding:0 24px;margin:0}.ornament-divider:before,.ornament-divider:after{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--color-primary-light),transparent)}.ornament-divider-icon{color:var(--color-accent);font-size:18px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;border:none;border-radius:var(--border-radius-xl);font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.3px;box-shadow:var(--shadow-btn);transition:all .3s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #2d6a4f66}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.landing-section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#f0ece3,#e8f0e9,#f5f0e8);position:relative;overflow:hidden;padding:80px 24px 48px}.ornament-top{position:absolute;top:0;left:0;right:0;height:80px;pointer-events:none}.ornament-svg{width:100%;height:100%}.ornament-bottom{position:absolute;bottom:0;left:0;right:0;height:30px;pointer-events:none}.floating-el{position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.landing-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;position:relative;z-index:2;max-width:340px}.badge-label{display:inline-block;padding:6px 18px;background:var(--color-accent-muted);color:var(--color-accent);border:1px solid var(--color-accent-light);border-radius:100px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}.landing-title{font-size:clamp(28px,7vw,36px);font-weight:700;color:var(--color-text-dark);line-height:1.2;margin:4px 0}.title-highlight{display:block;color:var(--color-primary)}.landing-subtitle{font-size:14px;color:var(--color-text-mid);line-height:1.7;max-width:280px}.divider-ornament{display:flex;align-items:center;gap:10px;width:120px;margin:4px 0}.divider-ornament .line{flex:1;height:1px;background:var(--color-accent);opacity:.4}.divider-ornament .star{color:var(--color-accent);font-size:14px}.landing-cta-text{font-size:13px;color:var(--color-text-light);font-style:italic}.landing-btn{margin-top:8px;padding:16px 36px;font-size:15px;border-radius:100px;width:100%;max-width:260px}.scroll-hint{position:absolute;bottom:48px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--color-text-light);font-size:11px;letter-spacing:.5px;z-index:2}.scroll-hint .arrow{font-size:16px;color:var(--color-primary-light)}.form-section{background:linear-gradient(180deg,var(--color-beige-warm),#eef5ef);min-height:70vh;display:flex;flex-direction:column;gap:28px}.form-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}.section-tag{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-muted);padding:5px 14px;border-radius:100px}.section-title{font-size:26px;font-weight:700;color:var(--color-text-dark);line-height:1.3}.section-desc{font-size:13px;color:var(--color-text-light);max-width:280px;line-height:1.6;text-align:center}.greeting-form{background:#fff;border-radius:var(--border-radius-lg);padding:28px 24px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-card);border:1px solid rgba(45,106,79,.08);position:relative;z-index:1}.form-group{display:flex;flex-direction:column;gap:8px;position:relative}.form-label{font-size:13px;font-weight:600;color:var(--color-text-mid);letter-spacing:.2px}.form-input,.form-textarea{padding:13px 16px;border:1.5px solid var(--color-beige-dark);border-radius:var(--border-radius-sm);font-size:14px;color:var(--color-text-dark);background:var(--color-beige-warm);transition:border-color .2s,box-shadow .2s;outline:none;resize:none;font-family:var(--font-body);width:100%}.form-input::placeholder,.form-textarea::placeholder{color:#bbb}.form-input:focus,.form-textarea:focus{border-color:var(--color-primary-light);box-shadow:0 0 0 3px var(--color-primary-muted);background:#fff}.form-input:disabled,.form-textarea:disabled{opacity:.6}.char-count{font-size:11px;color:var(--color-text-light);align-self:flex-end;transition:color .2s}.char-count.warn{color:#e07b39}.form-error{font-size:13px;color:#c0392b;background:#fdf2f2;padding:10px 14px;border-radius:8px;border-left:3px solid #c0392b}.form-submit-btn{width:100%;border-radius:var(--border-radius-md);padding:15px;font-size:15px;gap:8px}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.success-toast{background:linear-gradient(135deg,#d8f5e3,#eaf7ec);color:var(--color-primary-dark);font-size:13px;font-weight:500;padding:14px 18px;border-radius:var(--border-radius-sm);border:1px solid var(--color-primary-light);text-align:center;line-height:1.5}.sticky-note{position:relative;border-radius:2px 12px 12px 2px;padding:20px 16px 16px;box-shadow:var(--shadow-note);cursor:default;display:flex;flex-direction:column;gap:8px;min-height:130px;break-inside:avoid;transition:box-shadow .2s;transform:rotate(var(--rotate, 0deg));will-change:transform}.note-tape{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:44px;height:18px;background:#d4a01759;border-radius:3px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.note-tape:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3px;border:1px solid rgba(212,160,23,.4)}.note-name{font-size:13px;font-weight:700;color:var(--color-primary-dark);padding-bottom:8px;border-bottom:1px dashed rgba(45,106,79,.25);font-family:var(--font-body)}.note-message{font-size:13px;color:var(--color-text-dark);line-height:1.65;flex:1;font-family:var(--font-body);word-break:break-word}.note-time{font-size:10px;color:var(--color-text-light);align-self:flex-end;letter-spacing:.3px}.board-section{background:linear-gradient(180deg,#eef5ef,#f5f0e8);min-height:70vh;padding-bottom:60px;position:relative}.board-bg-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(45,106,79,.04) 28px,rgba(45,106,79,.04) 29px);pointer-events:none}.board-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:32px;position:relative;z-index:1}.reveal-cta-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;position:relative;z-index:1;padding:8px 0 16px}.notes-peek{position:relative;width:100%;height:110px;pointer-events:none}.peek-note{position:absolute;border-radius:4px 12px 12px 4px;width:46%;height:90px;filter:blur(3px);opacity:calc(.55 - var(--i, 0) * .08);transform:translate(calc(var(--i, 0) * 6px)) translateY(calc(var(--i, 0) * -4px)) rotate(calc(var(--i, 0) * 1.5deg))}.peek-note:nth-child(odd){left:4%;background:var(--note-beige)}.peek-note:nth-child(2n){right:4%;background:var(--note-mint);transform:translate(calc(var(--i, 0) * -6px)) translateY(calc(var(--i, 0) * -4px)) rotate(calc(var(--i, 0) * -1.5deg))}.notes-peek:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,var(--color-beige-warm))}.reveal-btn{padding:15px 36px;border-radius:100px;font-size:15px;letter-spacing:.3px;min-width:200px}.reveal-hint{font-size:12px;color:var(--color-text-light);font-style:italic}.notes-masonry{columns:2;column-gap:14px;position:relative;z-index:1}.notes-masonry>*{display:inline-block;width:100%;margin-bottom:20px}.board-loading{display:grid;grid-template-columns:1fr 1fr;gap:14px}.skeleton-note{height:150px;border-radius:2px 12px 12px 2px;background:linear-gradient(90deg,#e8e4db 25%,#f0ece3,#e8e4db 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;animation-delay:calc(var(--i, 0) * .15s)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.live-badge{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--color-text-light);margin-top:16px;letter-spacing:.3px;position:relative;z-index:1}.live-dot{width:7px;height:7px;border-radius:50%;background:#27ae60;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #27ae6066}50%{box-shadow:0 0 0 5px #27ae6000}}.thr-section{background:linear-gradient(180deg,#f5f0e8,#eaf4ec 60%,#ddf0e4);min-height:80vh;display:flex;flex-direction:column;align-items:center;gap:32px;padding-bottom:60px;position:relative;overflow:hidden}.thr-bg-ornament{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.thr-bg-ornament svg{width:100%;height:100%}.thr-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;z-index:1}.envelope-wrapper{position:relative;z-index:1;cursor:pointer;width:100%;max-width:280px;-webkit-user-select:none;user-select:none}.envelope-wrapper.opened{cursor:default}.envelope{position:relative;width:100%;padding-top:70%;filter:drop-shadow(0 8px 24px rgba(45,106,79,.2))}.envelope-body{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#2d6a4f,#40916c);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:600px}.env-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.08) 2px,transparent 2px),radial-gradient(circle at 75% 75%,rgba(255,255,255,.08) 2px,transparent 2px);background-size:20px 20px}.envelope-flap{position:absolute;top:0;left:0;right:0;height:50%;transform-origin:top center;transform-style:preserve-3d;z-index:2}.flap-inner{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#1b4332,#2d6a4f);clip-path:polygon(0 0,100% 0,50% 100%)}.flap-seal{position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:32px;height:32px;background:var(--color-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;box-shadow:0 2px 8px #0003;z-index:3}.envelope-left-corner,.envelope-right-corner,.envelope-bottom-corner{position:absolute;bottom:0;width:0;height:0;pointer-events:none}.envelope-left-corner{left:0;border-left:140px solid transparent;border-bottom:90px solid rgba(0,0,0,.15)}.envelope-right-corner{right:0;border-right:140px solid transparent;border-bottom:90px solid rgba(0,0,0,.1)}.envelope-bottom-corner{left:50%;transform:translate(-50%);border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:70px solid rgba(0,0,0,.08)}.envelope-hint{font-size:12px;color:#fffc;text-align:center;z-index:1;position:relative}.envelope-content{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;z-index:1;position:relative;margin-top:20px}.money-emoji{font-size:32px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.env-greeting{font-size:11px;color:#ffffffe6;text-align:center;line-height:1.6;font-style:italic}.thr-cta{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;position:relative;z-index:1}.cta-label{font-size:13px;color:var(--color-text-mid);font-weight:500}.gopay-btn{display:flex;align-items:center;gap:10px;padding:15px 28px;background:linear-gradient(135deg,#00ae5b,#00c466);color:#fff;text-decoration:none;border-radius:100px;font-size:15px;font-weight:700;box-shadow:0 6px 20px #00ae5b59;transition:all .3s ease;min-width:220px;justify-content:center}.gopay-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px #00ae5b73}.gopay-logo{height:22px;filter:brightness(0) invert(1);object-fit:contain}.arrow-icon{font-size:18px;margin-left:2px}.cta-note{font-size:11px;color:var(--color-text-light);text-align:center;font-style:italic}.thr-footer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;position:relative;z-index:1}.footer-text{font-size:13px;color:var(--color-text-mid);font-family:var(--font-display);font-style:italic;text-align:center}.footer-sub{font-size:11px;color:var(--color-text-light)}.app-container{scroll-snap-type:none}.app-container>*{position:relative}.app-container:before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent),var(--color-primary))}