@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{font-family:'Be Vietnam Pro',sans-serif;color:#284b60;background:#f1f9fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 0 45%,#dbf4ee 0,transparent 48%),radial-gradient(ellipse at 100% 0,#d9ecfb 0,transparent 50%),#f5fbfd}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #2581af;outline-offset:5px}[hidden]{display:none!important}.shell{position:relative;max-width:1320px;margin:auto;padding:0 48px}header{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b5cfd34d}.brand{font-family:Georgia,serif;font-style:italic;font-size:24px;text-decoration:none;color:#33586a}.brand-heart{font-style:normal;font-size:30px;vertical-align:-2px;margin-right:10px;color:#5c9fb3}.brand-dot{color:#7ab5a7}.occasion{font-size:9px;letter-spacing:2px;color:#698592;display:flex;gap:22px;align-items:center}.occasion span{font-size:12px;letter-spacing:2px;border:1px solid #b9d5dc;border-radius:30px;padding:10px 15px}.intro{text-align:center;margin:36px 0 34px}.eyebrow{font-size:9px;letter-spacing:2.5px;font-weight:600;color:#6e959d}h1{font:500 clamp(28px,3.3vw,45px)/1.3 'Playfair Display',Georgia,serif;margin:13px 0}h1 em{color:#4b949c;font-weight:500}.subtitle{font-size:12px;color:#748d98;margin:12px 0}.story-meta{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;font-size:9px;letter-spacing:1.8px;color:#71929c}.meta-line{display:inline-block;width:24px;height:1px;background:#a7c5cd;vertical-align:middle;margin:0 12px}#counter{font-size:16px;letter-spacing:2px;color:#335d72}#counter span{font-size:11px;color:#97aeb7}.stage{border:7px solid #fff;border-radius:18px;background:#fff;box-shadow:0 16px 55px #3b6d8318,0 2px 8px #3b6d8308;overflow:hidden;min-width:0}.memory{position:relative}.image-button{width:100%;display:block;padding:0;border:0;background:#eff8fa;cursor:zoom-in}.image-button img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#eff8fa}.under-image{display:flex;justify-content:space-between;align-items:center;margin:13px 6px 22px;font-size:9px;color:#849ea6}.handwritten{font:italic 14px Georgia,serif;color:#80a6aa}.navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 34px}button{transition:transform .2s,background .2s,box-shadow .2s}button:active{transform:scale(.97)}.primary{border:1px solid #367e9b;background:#367e9b;color:white;padding:15px 23px;border-radius:30px;font-size:12px;box-shadow:0 6px 18px #367e9b22;display:inline-flex;gap:24px;align-items:center;justify-content:center}.primary:hover{background:#286b88;box-shadow:0 8px 24px #367e9b33}.back{border:1px solid #c6dde2;background:#ffffff66;border-radius:30px;color:#517889;padding:14px 23px;font-size:12px;display:flex;gap:15px}.back:disabled{opacity:.4;cursor:default}.progress{display:flex;gap:8px;align-items:center}.progress span{width:22px;height:4px;border-radius:8px;background:#d4e6e9;transition:background .3s,width .3s}.progress span.active{background:#619da8;width:36px}.progress span.done{background:#a1c9ca}footer{border-top:1px solid #b5cfd34d;padding:24px 0 30px;display:flex;justify-content:center;align-items:center;gap:17px;font-size:9px;color:#8ba4ad}.footer-heart{font-size:19px;color:#7eabb1}.surprise{min-height:480px;text-align:center;padding:50px 22px;background:radial-gradient(ellipse at center,#e8f7f4,transparent 70%),#f8fcff;display:flex;flex-direction:column;align-items:center;justify-content:center}.gift-art{font:80px Georgia,serif;color:#64a4b4;position:relative}.gift-art span{position:absolute;right:-18px;top:8px;font-size:24px;color:#a2bdaa}h2{max-width:660px;font:500 clamp(27px,3vw,39px)/1.45 'Playfair Display',Georgia,serif;margin:15px auto 27px}.surprise .primary{max-width:100%;line-height:1.6}#video-wrap{width:min(100%,900px);margin:25px auto 0}video{width:100%;max-height:65vh;border-radius:12px;background:#17394a}.notice{font-size:14px;line-height:1.9;padding:25px;color:#3d6c7e;background:#eef8f9;border-radius:12px;margin:15px}.enter{animation:enter .55s ease both}.reverse{animation-name:reverse}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}.ambient i{position:absolute;bottom:-50px;left:3%;font-style:normal;color:#8fbdc2;opacity:0;animation:float 22s linear infinite;font-size:25px}.ambient i:nth-child(2){left:95%;animation-delay:-5s}.ambient i:nth-child(3){left:9%;animation-delay:-14s;font-size:14px}.ambient i:nth-child(4){left:90%;animation-delay:-18s}.ambient i:nth-child(5){left:70%;animation-delay:-8s;font-size:15px}.ambient i:nth-child(6){left:30%;animation-delay:-11s;font-size:12px}.ambient .petal{width:10px;height:18px;background:#a8d7cc;border-radius:90% 10% 90% 10%;left:20%;animation-delay:-3s}.ambient .petal:nth-child(8){left:80%;animation-delay:-17s}.ambient .petal:nth-child(9){left:50%;animation-delay:-9s}dialog{border:0;border-radius:18px;padding:50px 12px 12px;width:96vw;max-width:1800px;background:#eff8fc;color:#315c70}dialog::backdrop{background:#0c2635d9;backdrop-filter:blur(7px)}.close{position:absolute;right:15px;top:12px;border:0;background:#d8ebf0;color:#315c70;padding:9px 16px;border-radius:20px}.zoom-scroll{overflow:auto;max-height:78svh}.zoom-scroll img{display:block;width:100%;min-width:1000px;height:auto}dialog p{text-align:center;font-size:10px}@keyframes enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes reverse{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes float{0%{transform:translate(0,0) rotate(0);opacity:0}15%,75%{opacity:.32}100%{transform:translate(50px,-115vh) rotate(100deg);opacity:0}}@media(min-width:1500px){.shell{max-width:1400px}.intro{margin:42px 0}}@media(max-width:650px){.shell{padding:0 16px}header{height:76px}.brand{font-size:19px}.brand-heart{font-size:24px;margin-right:6px}.occasion{font-size:0;gap:0}.occasion span{font-size:10px;padding:8px 11px}.intro{margin:40px 0 32px}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:30px;max-width:330px;margin:15px auto}h1 em{display:block}.subtitle{font-size:11px}.stage{border-width:4px;border-radius:12px}.story-meta{font-size:8px;letter-spacing:1px}.under-image{align-items:flex-start;gap:12px;margin:14px 1px 30px;font-size:8px}.handwritten{font-size:12px;max-width:135px;text-align:right}.primary{font-size:11px;padding:13px 16px;gap:9px}.back{font-size:11px;padding:13px 15px;gap:7px}.navigation{gap:8px}.progress{gap:4px}.progress span{width:8px}.progress span.active{width:16px}.surprise{min-height:420px;padding:30px 15px}h2{font-size:29px}footer{font-size:8px;gap:10px;flex-wrap:wrap;padding-top:22px}.notice{margin:10px 0;font-size:12px}.gift-art{font-size:65px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ambient{display:none}}