*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f5f0;--bg-warm:#f3ede4;--text-primary:#3d2c1e;--text-secondary:#6b5b4e;--text-light:#8a7b6e;--accent:#c4503d;--accent-soft:#c4503d1f;--gold:#b8860b;--serif:"Playfair Display", Georgia, serif;--sans:"Inter", -apple-system, sans-serif}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100dvh;font-size:16px;overflow:hidden}body{font-family:var(--sans);background:var(--bg);color:var(--text-primary);touch-action:pan-y;width:100%;height:100dvh;position:fixed;overflow:hidden}#root{height:100dvh;position:relative;overflow:hidden}#root:before{content:"";pointer-events:none;z-index:1000;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");position:fixed;inset:0}.app{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;height:100dvh;position:relative;overflow:hidden}.progress-bar-container{z-index:100;background:#8a7b6e1f;border-radius:2px;width:2px;height:60%;position:fixed;top:20%;right:8px;overflow:hidden}.progress-bar-fill{background:var(--accent);opacity:.6;border-radius:2px;width:100%;transition:height .5s cubic-bezier(.22,1,.36,1)}.scroll-hint{z-index:50;animation:1s 1.5s both fadeInUp;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.scroll-hint-arrow{border-right:2px solid var(--text-light);border-bottom:2px solid var(--text-light);opacity:.35;width:20px;height:20px;animation:2s infinite bounce;transform:rotate(45deg)}@keyframes bounce{0%,to{transform:rotate(45deg)translateY(0)}50%{transform:rotate(45deg)translateY(6px)}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.slide{text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:40px 28px;display:flex;position:absolute;inset:0}.watercolor-container{flex-shrink:0;width:85%;max-width:320px;margin-bottom:24px;position:relative}.watercolor-frame{border-radius:4px;position:relative;overflow:hidden}.watercolor-image{filter:saturate(.6)brightness(1.08)contrast(.92)sepia(.15);image-rendering:auto;width:100%;height:auto;display:block}.watercolor-edge{pointer-events:none;position:absolute;inset:0}.watercolor-edge-1{background:linear-gradient(to bottom, var(--bg) 0%, transparent 12%, transparent 85%, var(--bg) 100%)}.watercolor-edge-2{background:linear-gradient(to right, var(--bg) 0%, transparent 10%, transparent 90%, var(--bg) 100%)}.watercolor-edge-3{background:radial-gradient(ellipse at 0% 0%, var(--bg) 0%, transparent 45%), radial-gradient(ellipse at 100% 0%, var(--bg) 0%, transparent 40%), radial-gradient(ellipse at 0% 100%, var(--bg) 0%, transparent 40%), radial-gradient(ellipse at 100% 100%, var(--bg) 0%, transparent 45%)}.watercolor-frame:after{content:"";mix-blend-mode:multiply;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");position:absolute;inset:0}.slide-text{font-family:var(--serif);color:var(--text-primary);white-space:pre-line;letter-spacing:-.01em;max-width:320px;padding:0 8px;font-size:clamp(1.35rem,4.5vw,1.7rem);font-weight:400;line-height:1.55}.slide-text.emphasis{color:var(--accent);font-size:clamp(1.5rem,5vw,2rem);font-weight:600}.slide-text.small{font-size:1.5rem;font-style:italic}.slide-text.playful{font-size:1.6rem}.slide-text.intro{color:var(--text-primary);font-size:clamp(2rem,7vw,2.8rem);font-weight:600}.intro-arrow{flex-direction:column;align-items:center;margin-top:48px;display:flex}.intro-arrow-icon{border-right:2px solid var(--text-light);border-bottom:2px solid var(--text-light);opacity:.5;width:24px;height:24px;animation:2s infinite introArrowBounce;transform:rotate(45deg)}.intro-hint{font-family:var(--sans);color:var(--text-light);letter-spacing:.5px;opacity:.5;margin-top:16px;font-size:.8rem}@keyframes introArrowBounce{0%,to{transform:rotate(45deg)translateY(0)}50%{transform:rotate(45deg)translateY(8px)}}.slide-text.reveal{color:var(--text-primary);font-size:clamp(1.8rem,6vw,2.4rem);font-weight:700;line-height:1.4}.decorative-line{background:var(--text-light);opacity:.3;width:40px;height:1px;margin:24px auto}.final-card{background:var(--bg);-webkit-overflow-scrolling:touch;touch-action:pan-y;flex-direction:column;justify-content:center;align-items:center;padding:20px 16px 32px;display:flex;position:absolute;inset:0;overflow-y:auto}.final-card-full-image{border-radius:8px;flex-shrink:0;width:100%;max-width:400px;height:auto;box-shadow:0 4px 24px #0000000f}.final-next-btn{font-family:var(--sans);color:var(--text-light);cursor:pointer;letter-spacing:.5px;background:0 0;border:1px solid #8a7b6e33;border-radius:50px;padding:10px 28px;font-size:.85rem;font-weight:400;transition:all .3s}.final-next-btn:hover{border-color:var(--accent);color:var(--accent)}.confirm-slide{background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 32px;display:flex;position:absolute;inset:0}.confirm-btn{font-family:var(--serif);color:#fff;background:var(--accent);cursor:pointer;letter-spacing:.5px;border:none;border-radius:50px;margin-bottom:16px;padding:16px 48px;font-size:1.15rem;font-weight:600;transition:all .3s;box-shadow:0 4px 20px #c4503d40}.confirm-btn:hover{transform:scale(1.04);box-shadow:0 6px 28px #c4503d59}.confirm-btn:active{transform:scale(.98)}.confirm-subtitle{font-family:var(--sans);color:var(--text-light);font-size:.85rem;font-style:italic}.confirm-done{font-family:var(--serif);color:var(--accent);margin-top:16px;font-size:1.5rem}@media (width>=600px){.slide-text{max-width:480px;font-size:2rem}.slide-text.reveal{font-size:2.6rem}.final-card{padding:48px 40px}}@media (height<=600px){.slide-text{font-size:1.2rem}.watercolor-container{max-width:220px;margin-bottom:16px}}