@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&family=DM+Serif+Display:ital@0;1&display=swap');

:root{--paper:#f8f1ec;--ink:#342928;--rose:#a94f5d;--blush:#e8c7c5;--cream:#fffaf6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Serif SC",serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.hero{height:100svh;min-height:620px;position:relative;color:white;overflow:hidden}.hero-photo,.hero-shade{position:absolute;inset:0}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;animation:slowZoom 14s ease-out both}.hero-shade{background:linear-gradient(90deg,rgba(33,19,20,.72),rgba(33,19,20,.12)),linear-gradient(0deg,rgba(33,19,20,.35),transparent 60%)}.hero-copy{position:absolute;left:clamp(7vw,11vw,150px);top:50%;transform:translateY(-50%);max-width:600px}.eyebrow{font-family:Arial,sans-serif;letter-spacing:.28em;font-size:11px;text-transform:uppercase}.hero h1{font-weight:400;font-size:clamp(58px,9vw,128px);line-height:.9;margin:24px 0}.hero h1 i{font-family:"DM Serif Display",serif;color:#f4c7c8;font-weight:400}.lead{line-height:2;font-size:clamp(15px,1.4vw,19px)}.start{margin-top:28px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);color:white;padding:14px 20px;border-radius:100px;cursor:pointer;font:inherit}.start span{margin-left:15px}.sound{position:fixed;right:22px;top:22px;z-index:30;border:0;background:rgba(255,250,246,.86);backdrop-filter:blur(12px);border-radius:50px;padding:10px 14px;color:var(--ink);box-shadow:0 6px 25px #54332f1c;cursor:pointer}.sound span{display:inline-block;margin-right:6px}.sound em{font-style:normal;font-size:12px}.sound.playing span{animation:spin 3s linear infinite}.intro{text-align:center;padding:18vh 20px}.tiny-heart{color:var(--rose)}.intro p{font-size:14px;line-height:2;color:#7f6b67}.intro h2,.ending h2{font-size:clamp(32px,5vw,60px);font-weight:400;line-height:1.45}.stories{max-width:1200px;margin:auto;padding:0 clamp(20px,5vw,70px)}.story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;gap:clamp(35px,8vw,120px);min-height:92vh;padding:8vh 0}.story:nth-child(even){grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}.story:nth-child(even) .photo{order:2}.photo{position:relative;cursor:zoom-in}.photo:before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--blush);z-index:-1}.photo img{display:block;width:100%;max-height:72vh;object-fit:cover;box-shadow:0 20px 55px #4f302823;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.photo:hover img{transform:scale(1.015)}.copy .number{font-family:"DM Serif Display",serif;font-style:italic;color:var(--rose);font-size:18px}.copy .line{width:38px;height:1px;background:var(--blush);margin:22px 0}.copy p{font-size:clamp(18px,2.1vw,28px);line-height:1.8;margin:0}.reveal,.story{opacity:0;transform:translateY(45px);transition:opacity 1s ease,transform 1s ease}.visible{opacity:1;transform:none}.ending{text-align:center;padding:22vh 20px}.ending p:not(.eyebrow){color:#796663;line-height:2}.heart{font-size:30px;color:var(--rose);margin-top:40px;animation:pulse 1.6s infinite}.lightbox{position:fixed;inset:0;background:rgba(27,19,19,.94);z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transition:.3s;padding:30px}.lightbox.open{opacity:1;visibility:visible}.lightbox img{max-width:92vw;max-height:78vh;object-fit:contain}.lightbox p{color:white;text-align:center;max-width:700px}.lightbox button{position:absolute;right:25px;top:16px;background:none;border:0;color:white;font-size:38px;cursor:pointer}
@keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.18)}}
@media(max-width:700px){.hero-shade{background:linear-gradient(0deg,rgba(33,19,20,.8),rgba(33,19,20,.05) 75%)}.hero-copy{left:26px;right:26px;top:auto;bottom:8%;transform:none}.hero h1{font-size:58px}.story,.story:nth-child(even){display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:35px;min-height:auto;padding:12vh 0}.story:nth-child(even) .photo{order:0}.photo img{max-height:65vh}.copy{padding:0 8px}.copy p{font-size:19px}.intro{padding:14vh 20px}.sound em{display:none}.sound span{margin:0}.sound{width:42px;height:42px;padding:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal,.story{opacity:1;transform:none}}
.story-mode{position:fixed;left:22px;top:22px;z-index:30;border:0;background:var(--rose);color:white;border-radius:50px;padding:11px 16px;box-shadow:0 8px 28px #6e30384a;cursor:pointer;font:13px "Noto Serif SC",serif}.story-mode span{margin-right:6px}.photo:after{content:"点击查看";position:absolute;right:12px;bottom:12px;background:rgba(42,28,29,.72);color:white;padding:7px 11px;border-radius:30px;font-size:11px;letter-spacing:.08em;backdrop-filter:blur(8px);opacity:.8}.lightbox .nav{top:50%;transform:translateY(-50%);font-size:64px;width:60px;height:90px;line-height:60px}.lightbox .prev{left:18px;right:auto}.lightbox .next{right:18px}.lightbox-count{color:#d9c7c5;font:12px Arial,sans-serif;letter-spacing:.2em;margin-top:3px}.lightbox img{transition:opacity .2s,transform .3s}.lightbox.changing img{opacity:.25;transform:scale(.985)}
@media(max-width:700px){.story-mode{left:14px;top:14px;padding:10px 13px}.lightbox{padding:55px 18px 30px}.lightbox .nav{top:auto;bottom:18px;font-size:48px;height:55px}.lightbox .prev{left:18px}.lightbox .next{right:18px}.lightbox p{margin-bottom:48px}.photo:after{opacity:.9}}
.music-card{position:fixed;right:22px;top:74px;width:min(360px,calc(100vw - 32px));z-index:29;background:rgba(255,250,246,.96);border:1px solid rgba(169,79,93,.16);border-radius:18px;padding:15px;box-shadow:0 18px 55px #3e222236;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s;backdrop-filter:blur(14px)}.music-card.open{opacity:1;visibility:visible;transform:none}.music-card p{font-size:13px;margin:0 35px 12px 2px;color:#735c59}.music-card iframe{display:block;width:100%;border-radius:12px}.music-close{position:absolute;right:10px;top:7px;border:0;background:none;font-size:23px;color:#806a67;cursor:pointer}
.experience{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 35%,#fffaf6,#ead7d1);display:grid;place-items:center;transition:opacity .8s,visibility .8s}.experience.done{opacity:0;visibility:hidden}.sealed{text-align:center;padding:25px}.sealed .envelope{width:190px;height:125px;margin:28px auto;position:relative;background:#fff8f2;border-radius:3px;box-shadow:0 24px 60px #6941392b}.sealed .envelope:before,.sealed .envelope:after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 62%,100% 0);background:#efdcd4}.sealed .envelope:after{clip-path:polygon(0 100%,50% 45%,100% 100%);background:#f7e8e1}.sealed .envelope span{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:white;box-shadow:0 5px 14px #84414b4d;animation:pulse 1.8s infinite}.sealed h2{font-weight:400;font-size:clamp(32px,5vw,58px);margin:10px 0}.sealed>p:not(.eyebrow){color:#806b67}.sealed button,.stage-actions button{border:0;border-radius:50px;padding:13px 24px;background:var(--rose);color:white;font:14px "Noto Serif SC",serif;cursor:pointer;box-shadow:0 9px 24px #8b465047}.memory-stage{display:none;width:100%;height:100%;padding:24px clamp(18px,4vw,55px);grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:14px}.memory-stage.active{display:grid}.stage-top{display:flex;justify-content:space-between;align-items:center;font:11px Arial,sans-serif;letter-spacing:.14em;color:#806b67}.stage-top button{border:0;background:none;color:#806b67;cursor:pointer}.stage-photo{display:grid;place-items:center;min-height:0}.stage-photo img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 18px 60px #53342d31;animation:memoryIn .55s ease}.stage-words{min-height:0;max-height:0;opacity:0;overflow:hidden;text-align:center;transition:max-height .6s,opacity .5s}.stage-words.revealed{max-height:140px;opacity:1}.stage-words p{margin:4px auto;max-width:760px;font-size:clamp(16px,2vw,24px);line-height:1.7}.stage-actions{text-align:center}.stage-actions button.hidden{display:none}.stage-progress{height:2px;background:#d9c2ba}.stage-progress i{display:block;width:2%;height:100%;background:var(--rose);transition:width .5s}@keyframes memoryIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){.memory-stage{padding:18px 14px}.stage-photo img{max-height:58vh}.stage-words.revealed{max-height:180px}.sealed .envelope{width:160px;height:105px}}
.photo{perspective:1400px}.photo:after{display:none}.photo-inner{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.2,1)}.photo.flipped .photo-inner{transform:rotateY(180deg)}.photo-front,.photo-back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-height:320px}.photo-front{position:relative}.photo-front img{height:100%;min-height:320px}.photo-front span{position:absolute;right:12px;bottom:12px;background:rgba(42,28,29,.76);color:white;padding:8px 12px;border-radius:30px;font-size:11px;letter-spacing:.08em;backdrop-filter:blur(8px)}.photo-back{transform:rotateY(180deg);background:linear-gradient(145deg,#fffaf6,#ead6d1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(28px,5vw,65px);border:1px solid #dfbeba;box-shadow:0 20px 55px #4f302823}.photo-back b{font:italic 15px "DM Serif Display",serif;color:var(--rose);letter-spacing:.16em}.photo-back p{font-size:clamp(18px,2.2vw,28px);line-height:1.8}.photo-back small{color:#9a817d;margin-top:10px}.photo:before{display:none}
.memory-stage .stage-actions{position:fixed;right:clamp(20px,4vw,55px);bottom:max(34px,env(safe-area-inset-bottom));z-index:104}.memory-stage .stage-actions button{min-width:138px;min-height:48px;border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 35px #5d303a70}.memory-stage .stage-words{padding-left:12px;padding-right:12px}.memory-stage .stage-progress{margin-right:165px}
@media(max-width:700px){.memory-stage{padding-bottom:88px}.memory-stage .stage-actions{right:16px;bottom:max(78px,calc(env(safe-area-inset-bottom) + 64px))}.memory-stage .stage-actions button{min-width:150px;min-height:52px;font-size:15px}.memory-stage .stage-progress{margin-right:0}.lightbox .nav{top:50%;bottom:auto;transform:translateY(-50%);width:48px;height:80px;background:rgba(0,0,0,.28);border-radius:30px}.lightbox .prev{left:8px}.lightbox .next{right:8px}}
@media(max-width:700px) and (orientation:portrait){.memory-stage{height:100dvh;padding:14px 14px 92px;grid-template-rows:28px minmax(0,52vh) minmax(68px,auto) 4px;gap:8px}.stage-photo{height:52vh}.stage-photo img{max-height:50vh;max-width:94vw}.stage-words{display:flex;align-items:center;justify-content:center}.stage-words.revealed{max-height:18vh;min-height:68px;overflow-y:auto}.stage-words p{font-size:16px;line-height:1.6;margin:8px auto;padding:0 5px}.memory-stage .stage-actions{bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px));left:14px;right:14px}.memory-stage .stage-actions button{width:100%;min-height:52px}.memory-stage .stage-progress{grid-row:4;margin:0}.stage-top{grid-row:1}.stage-photo{grid-row:2}.stage-words{grid-row:3}}
.password-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 25%,#fffaf6,#e7cec8);transition:opacity .7s,visibility .7s}.password-gate.unlocked{opacity:0;visibility:hidden}.password-box{width:min(420px,100%);text-align:center;background:rgba(255,250,246,.78);border:1px solid rgba(169,79,93,.18);border-radius:24px;padding:42px clamp(24px,6vw,46px);box-shadow:0 28px 80px #5a343034;backdrop-filter:blur(16px)}.lock-heart{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 22px;border-radius:50%;background:var(--rose);color:white;font-size:20px;box-shadow:0 8px 25px #7e3c4654}.password-box h2{font-size:clamp(28px,6vw,42px);font-weight:400;margin:16px 0 8px}.password-box>p:not(.eyebrow){font-size:13px;color:#856f6b}.password-box label{display:block;text-align:left;margin:26px 0 14px}.password-box label span{display:block;font-size:11px;letter-spacing:.12em;color:#8d7671;margin:0 0 8px 5px}.password-box input{width:100%;border:1px solid #ddc2bc;border-radius:50px;background:#fffaf6;padding:14px 20px;font:18px Arial,sans-serif;letter-spacing:.2em;outline:none;text-align:center;color:var(--ink)}.password-box input:focus{border-color:var(--rose);box-shadow:0 0 0 3px #a94f5d16}.password-box button{width:100%;border:0;border-radius:50px;padding:14px 20px;background:var(--rose);color:white;font:14px "Noto Serif SC",serif;cursor:pointer}.password-box small{display:block;min-height:20px;margin-top:10px;color:#a83e4e}.password-box.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}