:root { --cream:#fff8f3; --paper:#fffdfb; --ink:#332d2b; --muted:#8b7770; --rose:#df877d; --rose-dark:#b95d5b; --peach:#f7ddd0; --sage:#dce5d7; --lav:#e7e0ef; --line:rgba(72,52,47,.14); --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); overflow-x:hidden; }
html { scroll-snap-type:y proximity; } html.modal-open, body.modal-open { overflow:hidden; height:100%; overscroll-behavior:none; } .panel, .opening-sequence { min-height:100svh; scroll-snap-align:start; scroll-snap-stop:normal; }
.photo-frame img { filter:none !important; image-rendering:auto; backface-visibility:hidden; transform:translateZ(0); }
body:after { content:''; position:fixed; inset:0; pointer-events:none; z-index:20; background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.55),transparent 30%), radial-gradient(circle at 90% 80%,rgba(231,224,239,.35),transparent 28%); }
.grain { position:fixed; inset:0; opacity:.06; pointer-events:none; z-index:19; 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='.35'/%3E%3C/svg%3E"); }
.floating-hearts span { position:fixed; color:var(--rose); font-size:1.35rem; z-index:0; animation:float 8s ease-in-out infinite; opacity:.5; }.floating-hearts span:nth-child(1){left:7%;top:21%}.floating-hearts span:nth-child(2){right:9%;top:48%;animation-delay:2s}.floating-hearts span:nth-child(3){left:11%;bottom:20%;animation-delay:4s}.floating-hearts span:nth-child(4){right:18%;bottom:8%;animation-delay:1s}
.panel { padding:clamp(5rem,16vw,11rem) clamp(1.25rem,6vw,7rem); position:relative; }.hero { min-height:100svh; display:grid; align-content:center; gap:2.5rem; background:linear-gradient(145deg,#fff8f3 0%,#fff8f3 50%,#f6e4dc 100%); }.hero-copy { position:relative; z-index:1; }.eyebrow { margin:0 0 1.25rem; color:var(--rose-dark); font:500 .68rem/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; }.hero h1,.section-heading h2,.welcome h2 { margin:0; font:500 clamp(3.7rem,16vw,8.8rem)/.88 var(--serif); letter-spacing:-.065em; }.hero h1 em,.section-heading h2 em,.welcome h2 em,.chapter-card h3 em,.letter-paper h2 em { color:var(--rose); font-weight:500; }.intro { max-width:19rem; margin:2rem 0; font-size:1rem; line-height:1.65; color:var(--muted); }.primary-button,.secondary-button { border:0; border-radius:100px; padding:1rem 1.2rem; font:600 .78rem var(--sans); cursor:pointer; transition:transform .2s,box-shadow .2s; }.primary-button { color:#fff; background:var(--ink); box-shadow:0 8px 20px #503e3922; }.primary-button span { margin-left:1.2rem; color:var(--peach); }.primary-button:hover,.secondary-button:hover { transform:translateY(-3px); box-shadow:0 12px 25px #503e3930; }.photo-frame { position:relative; max-width:23rem; margin:auto; transform:rotate(2.5deg); box-shadow:0 22px 45px #764c3a25; border:10px solid white; background:white; }.photo-frame:before { content:''; position:absolute; inset:-20px auto auto -24px; width:4rem; height:2rem; background:#efd4b9; transform:rotate(-36deg); opacity:.85; z-index:2; }.photo-frame img { display:block; width:100%; aspect-ratio:1/1.15; object-fit:cover; filter:saturate(.8); }.photo-label { display:block; padding:.65rem .2rem .25rem; color:#9c8278; font:italic .75rem var(--serif); text-align:center; }.scroll-cue { position:absolute; bottom:2rem; left:1.25rem; color:var(--muted); font: .64rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }.scroll-cue span { padding-left:.7rem; color:var(--rose); font-size:1rem; }
.opening-sequence { min-height:100svh; padding:1.2rem 1rem 5rem; background:#332d2b; color:#fff8f3; }.opening-intro { display:flex; justify-content:space-between; padding:0 .4rem 1.5rem; color:#d8c7be; font:500 .58rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }.opening-flow { display:block; }.opening-card { position:relative; display:flex; min-height:calc(100svh - 3rem); flex-direction:column; align-items:center; justify-content:center; margin:0 auto; padding:2rem 0 5rem; text-align:center; }.welcome-photo-frame { position:relative; display:grid; place-items:center; width:min(78vw,20rem); height:min(58svh,30rem); padding:.65rem; overflow:hidden; background:#fff9f4; box-shadow:0 20px 50px #00000040; transform:rotate(-2deg) scale(.96); transition:transform 1s cubic-bezier(.2,.7,.2,1),box-shadow 1s; }.opening-card:nth-child(2) .welcome-photo-frame { transform:rotate(2deg) scale(.96); }.opening-card.visible .welcome-photo-frame { transform:rotate(0) scale(1); box-shadow:0 25px 65px #00000055; }.welcome-photo-frame img { display:block; width:100%; height:100%; object-fit:contain; background:#eee2d8; }.opening-message { margin:1.5rem 0 0; opacity:0; transform:translateY(18px); font:500 clamp(2rem,9vw,4.5rem)/.94 var(--serif); letter-spacing:-.055em; transition:opacity .9s .25s,transform .9s .25s; }.opening-card.visible .opening-message { opacity:1; transform:none; }.opening-message em { color:#edaaa0; font-weight:500; }.opening-message small { font-size:.48em; letter-spacing:.02em; }.opening-index { position:absolute; bottom:2rem; color:#bda8a0; font:500 .6rem var(--mono); letter-spacing:.1em; }.enter-experience { margin-top:1.6rem; border:1px solid #efaaa080; border-radius:100px; padding:.9rem 1.2rem; color:#332d2b; background:#f5c4b8; font:600 .72rem var(--sans); cursor:pointer; opacity:0; transform:translateY(12px); transition:opacity .8s .7s,transform .8s .7s,background .2s; }.opening-card.visible .enter-experience { opacity:1; transform:none; }.enter-experience:hover { background:#fff8f3; }.enter-experience span { margin-left:1rem; }.loading-screen { position:fixed; z-index:60; inset:0; display:grid; place-items:center; align-content:center; padding:2rem; color:#fff8f3; background:#332d2b; text-align:center; opacity:0; pointer-events:none; transition:opacity .5s; }.loading-screen.show { opacity:1; pointer-events:auto; }.loading-sparkle { color:#f5c4b8; font-size:2.5rem; animation:float 1.5s ease-in-out infinite; }.loading-kicker { margin:.8rem 0 1rem; color:#d8c7be; font:500 .62rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }.loading-screen h2 { margin:0; font:500 clamp(2.8rem,12vw,5.5rem)/.9 var(--serif); letter-spacing:-.06em; }.loading-screen h2 em { color:#edaaa0; }.loading-bar { width:min(15rem,70vw); height:3px; margin:2rem auto 1rem; overflow:hidden; background:#ffffff25; }.loading-bar span { display:block; width:0; height:100%; background:#f5c4b8; }.loading-screen.show .loading-bar span { animation:loadBar 2.2s cubic-bezier(.2,.7,.2,1) forwards; }.loading-caption { max-width:17rem; margin:0 auto; color:#bda8a0; font:italic .78rem/1.5 var(--serif); }
.welcome { display:grid; grid-template-columns:4rem 1fr; gap:1rem; background:var(--sage); }.section-number { color:var(--rose-dark); font:500 .8rem var(--mono); padding-top:.35rem; }.welcome h2 { font-size:clamp(3.2rem,13vw,7rem); }.body-copy { max-width:31rem; margin:1.8rem 0 0; color:#796b66; line-height:1.8; font-size:.95rem; }.signature { margin-top:2rem; font:italic 1.1rem/1.35 var(--serif); color:#806c63; }.signature strong { font-weight:500; color:var(--ink); }.signature span { color:var(--rose-dark); font-style:normal; }
.timeline-section { background:#fdf7ef; }.section-heading { max-width:33rem; margin-bottom:4rem; }.section-heading h2 { font-size:clamp(3.4rem,14vw,7.5rem); }.timeline { position:relative; max-width:39rem; margin:auto; }.timeline:before { content:''; position:absolute; top:0; bottom:2rem; left:1.05rem; border-left:1px dashed #d9afa6; }.chapter { position:relative; display:grid; grid-template-columns:4.3rem 1fr; gap:1rem; margin-bottom:2.3rem; }.chapter-time { padding-top:1.1rem; color:var(--rose-dark); font:500 .68rem var(--mono); letter-spacing:.04em; }.chapter-time span { display:block; margin-top:.55rem; font-size:1rem; }.chapter-card { position:relative; padding:1.75rem 1.4rem; border-radius:1rem; overflow:hidden; box-shadow:0 10px 25px #7a554610; }.chapter-card:after { content:''; position:absolute; width:9rem; height:9rem; right:-3rem; bottom:-4rem; border-radius:50%; background:#ffffff28; }.camera-card { background:#eddfd2; }.breakfast-card { background:#f2d8d0; }.wine-card { background:#ded9eb; }.gift-card { background:#dce6d9; }.friends-card { background:#ead5c9; }.final-card { background:#3d3432; color:#fff8f3; }.final-card .eyebrow,.final-card .text-button { color:#eaa39d; }.final-card p:not(.eyebrow) { color:#d5c5bf; }.chapter-icon { position:absolute; right:1.25rem; top:1.1rem; color:#fff9f4; font-size:1.8rem; }.chapter-card h3 { margin:0; font:500 clamp(2rem,8vw,3.2rem)/.95 var(--serif); letter-spacing:-.04em; }.chapter-card p:not(.eyebrow) { max-width:18rem; margin:1.3rem 0 0; color:#735f58; line-height:1.65; font-size:.9rem; }.final-card p:not(.eyebrow) { color:#d5c5bf; }.text-button { margin-top:1.5rem; padding:0; border:0; color:var(--rose-dark); background:transparent; font:600 .73rem var(--mono); cursor:pointer; text-transform:uppercase; letter-spacing:.04em; }.text-button span { display:inline-block; margin-left:.5rem; transition:transform .2s; }.text-button:hover span { transform:translateX(4px); }.hidden-note { display:none; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid #956f6230; font:italic 1rem/1.5 var(--serif); color:#654f48; animation:fadeUp .4s ease both; }.hidden-note.open { display:block; }.hidden-note span { color:var(--rose-dark); font-style:normal; }.prompt-pill,.wine-scorecard { display:flex; justify-content:space-between; gap:.5rem; margin-top:1.3rem; padding:.7rem .8rem; border-radius:.5rem; background:#ffffff45; color:#735f58; font:500 .62rem var(--mono); text-transform:uppercase; }.wine-scorecard { color:#675b72; }.messages div { padding:.65rem 0; border-bottom:1px solid #956f6230; }.messages small { display:block; margin-top:.25rem; font: .63rem var(--mono); color:var(--rose-dark); }
.gallery-section { background:var(--lav); }.memory-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; max-width:39rem; margin:auto; }.memory-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:.7rem; filter:saturate(.8); transition:transform .3s,filter .3s; }.memory-grid img:hover { transform:rotate(-2deg) scale(1.03); filter:saturate(1); }.memory-grid img:nth-child(2){transform:translateY(1.6rem) rotate(2deg)}.memory-grid img:nth-child(3){transform:translateY(-.4rem) rotate(-2deg)}.camera-roll-note { margin:3rem auto 0; color:#7c6d82; text-align:center; font: .67rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }.camera-roll-note span { color:var(--rose-dark); margin-left:.5rem; }
.letter-section { background:var(--rose); padding-bottom:8rem; text-align:center; }.letter-paper { max-width:32rem; margin:auto; padding:2.5rem 1.5rem; background:#fffaf6; box-shadow:0 18px 35px #91524d30; text-align:left; }.letter-paper h2 { margin:0; font:500 clamp(2.8rem,12vw,5rem)/.9 var(--serif); letter-spacing:-.06em; }.letter-paper p:not(.eyebrow) { color:#796b66; line-height:1.75; font-size:.95rem; }.letter-paper .signature { margin-top:2.2rem; }.secondary-button { margin-top:3rem; background:#fffaf6; color:var(--rose-dark); }.bottom-nav { position:fixed; z-index:10; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; width:max-content; max-width:calc(100% - 2rem); padding:.35rem; border:1px solid #ffffff80; border-radius:100px; background:#fffaf4db; box-shadow:0 8px 24px #583e2c20; backdrop-filter:blur(14px); }.bottom-nav a { padding:.55rem .7rem; color:var(--muted); font:500 .6rem var(--mono); text-decoration:none; text-transform:uppercase; }.bottom-nav a:hover { color:var(--rose-dark); }.toast { position:fixed; z-index:30; bottom:5.5rem; left:50%; transform:translate(-50%,10px); padding:.8rem 1rem; border-radius:100px; color:#fff; background:var(--ink); opacity:0; pointer-events:none; font-size:.75rem; transition:.3s; white-space:nowrap; }.toast.show { opacity:1; transform:translate(-50%,0); }
.chapter.is-locked .chapter-card > *:not(.lock-screen) { visibility:hidden; }.lock-screen { display:none; }.chapter.is-locked .lock-screen { display:flex; position:absolute; inset:0; z-index:3; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; text-align:center; background:inherit; }.lock-screen .lock-symbol { margin-bottom:.8rem; color:var(--rose-dark); font-size:2rem; }.lock-screen p { margin:0; color:#735f58; font:italic 1.15rem/1.3 var(--serif); }.lock-screen small { margin-top:.8rem; color:#8b7770; font:500 .6rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.quest-box { margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid #956f6230; }.quest-label { margin:0 0 .65rem; color:var(--rose-dark); font:500 .62rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.quest { display:flex; gap:.6rem; align-items:flex-start; margin:.55rem 0; color:#6e5e57; font-size:.8rem; line-height:1.35; cursor:pointer; }.quest input { appearance:none; flex:0 0 1rem; width:1rem; height:1rem; margin:.05rem 0 0; border:1px solid #c2857c; border-radius:50%; background:#fff8f3aa; cursor:pointer; }.quest input:checked { border-color:var(--rose-dark); background:var(--rose-dark); box-shadow:inset 0 0 0 3px #fff8f3; }.quest.done { color:#9c8178; text-decoration:line-through; }.quest-note { display:none; margin-top:1rem; padding:.8rem .9rem; border-radius:.6rem; background:#ffffff50; color:#735f58; font:italic .95rem/1.4 var(--serif); animation:fadeUp .4s ease both; }.quest-note.open { display:block; }.quest-progress { margin-top:.7rem; color:#8b7770; font:500 .58rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.answer-wrap { display:block; margin:.35rem 0 0 1.6rem; }.answer-input { width:100%; padding:.55rem .65rem; border:1px solid #c2857c66; border-radius:.5rem; outline:none; color:var(--ink); background:#fffaf688; font: .78rem var(--sans); }.answer-input:focus { border-color:var(--rose-dark); box-shadow:0 0 0 3px #df877d22; }.memory-lane { display:none; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed #956f6238; animation:fadeUp .6s ease both; }.memory-lane.open { display:block; }.memory-kicker { margin:0 0 .5rem; color:var(--rose-dark); font:500 .6rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.memory-lane h4 { margin:0; font:500 1.55rem/1 var(--serif); }.memory-lane p { margin:.65rem 0 0; color:#735f58; font-size:.8rem; line-height:1.55; }.memory-photo { width:100%; aspect-ratio:1.7/1; display:grid; place-items:center; margin-top:.85rem; overflow:hidden; border-radius:.55rem; background:linear-gradient(135deg,#f0cfc4,#e3dfed); color:#fffaf6; text-align:center; }.memory-photo img { width:100%; height:100%; object-fit:cover; }.memory-photo span { padding:1rem; font:italic 1rem var(--serif); }
.memory-reel-wrap { margin:.8rem 0 1.2rem; }.reel-kicker { margin:0 0 .6rem; color:var(--rose-dark); font:500 .6rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.memory-reel { display:flex; gap:.7rem; overflow-x:auto; padding:.15rem .1rem .7rem; scroll-snap-type:x mandatory; scrollbar-width:thin; }.reel-card { flex:0 0 78%; margin:0; scroll-snap-align:center; overflow:hidden; border-radius:.65rem; background:#fff8f3aa; box-shadow:0 7px 15px #684c3b10; }.reel-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }.reel-card figcaption { padding:.55rem .65rem .65rem; color:#806c63; font:italic .72rem var(--serif); }.chapter-card .memory-reel-wrap + .quest-row { margin-top:.5rem; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease; }.reveal.visible { opacity:1; transform:none; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-18px) rotate(10deg)} } @keyframes fadeUp { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} } @keyframes loadBar { from{width:0} to{width:100%} } @media (min-width:700px){.hero{grid-template-columns:1fr 1fr;align-items:center;padding-left:12vw;padding-right:12vw}.hero .scroll-cue{left:12vw}.welcome{grid-template-columns:8rem 1fr;padding-left:18vw;padding-right:18vw}.timeline-section,.gallery-section{padding-left:18vw;padding-right:18vw}.memory-grid{grid-template-columns:repeat(4,1fr);max-width:50rem}.memory-grid img:nth-child(2),.memory-grid img:nth-child(3){transform:none}.letter-section{padding-left:18vw;padding-right:18vw}.bottom-nav a{padding:.6rem 1rem}} @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
 .memory-quest-row { margin:.8rem 0 1rem; }.memory-quest-row .quest { margin-bottom:.5rem; }.memory-open-button { margin-left:1.6rem; padding:.65rem .8rem; border:1px solid #c2857c66; border-radius:100px; color:var(--rose-dark); background:#fffaf355; font:500 .63rem var(--mono); text-transform:uppercase; cursor:pointer; }.memory-open-button span { margin-left:.5rem; }.memory-modal { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.3rem; color:var(--ink); background:#fff8f3; opacity:0; pointer-events:none; transform:scale(1.03); transition:opacity .35s,transform .35s; }.memory-modal.show { opacity:1; pointer-events:auto; transform:none; }.memory-close { position:absolute; top:1rem; right:1rem; z-index:2; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:#fffaf3cc; font-size:1.5rem; cursor:pointer; }.memory-modal-kicker { position:absolute; top:1.5rem; left:1.3rem; color:var(--rose-dark); font:500 .64rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.memory-modal-stage { display:flex; width:min(100%,25rem); min-height:70svh; flex-direction:column; align-items:stretch; justify-content:center; }.memory-modal-image { width:100%; height:min(58svh,32rem); object-fit:contain; border-radius:.8rem; background:#eadbd2; box-shadow:0 18px 40px #533c321a; touch-action:pan-y; }.memory-modal-prompt { margin:1rem 0 .5rem; color:var(--muted); font:italic 1rem var(--serif); }.memory-caption-input { width:100%; padding:.85rem .9rem; border:1px solid #c2857c66; border-radius:.6rem; outline:none; color:var(--ink); background:#fff; font:.85rem var(--sans); }.memory-caption-input:focus { border-color:var(--rose-dark); box-shadow:0 0 0 3px #df877d22; }.memory-next { margin-top:.7rem; padding:.85rem 1rem; border:0; border-radius:100px; color:#fff; background:var(--ink); font:600 .7rem var(--mono); cursor:pointer; }.memory-next span { margin-left:.8rem; color:var(--peach); }.memory-swipe-hint { margin:1rem 0 0; color:var(--muted); font:500 .58rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.scrapbook-button { display:block; margin:2rem auto 0; }.scrapbook { display:none; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1.5rem; }.scrapbook.open { display:grid; }.scrapbook-title { grid-column:1/-1; margin:0 0 .3rem; color:var(--rose-dark); font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.scrapbook-item { margin:0; overflow:hidden; border-radius:.55rem; background:#fff0e9; }.scrapbook-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }.scrapbook-item figcaption { padding:.55rem; color:#735f58; font:italic .75rem/1.25 var(--serif); } @media (min-width:700px){.scrapbook{grid-template-columns:repeat(4,1fr)}}
 .memory-modal-stage.swipe-left { animation:cardSwipeLeft .32s cubic-bezier(.2,.7,.2,1) both; }.memory-modal-stage.swipe-right { animation:cardSwipeRight .32s cubic-bezier(.2,.7,.2,1) both; }.google-memory-link { display:block; width:max-content; max-width:100%; margin:1.5rem auto 0; padding:.8rem 1rem; border:1px solid #7c6d8244; border-radius:100px; color:#7c6d82; font:500 .65rem var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }.google-memory-link span { margin-left:.7rem; color:var(--rose-dark); }.google-memory-link:hover { background:#fff8f377; }
@keyframes cardSwipeLeft { 0%{opacity:1;transform:translateX(0) rotate(0)} 45%{opacity:1;transform:translateX(-18%) rotate(-7deg)} 100%{opacity:0;transform:translateX(-115%) rotate(-18deg)} } @keyframes cardSwipeRight { 0%{opacity:1;transform:translateX(0) rotate(0)} 45%{opacity:1;transform:translateX(18%) rotate(7deg)} 100%{opacity:0;transform:translateX(115%) rotate(18deg)} }
 .day-progress { position:fixed; z-index:11; top:1rem; left:50%; display:flex; align-items:center; gap:.25rem; padding:.4rem .55rem; border:1px solid #ffffffaa; border-radius:100px; background:#fffaf4d9; box-shadow:0 6px 20px #583e2c14; backdrop-filter:blur(12px); transform:translateX(-50%); }.progress-label { margin:0 .3rem; color:var(--muted); font:500 .55rem var(--mono); text-transform:uppercase; }.day-progress button { display:grid; place-items:center; width:1.2rem; height:1.25rem; padding:0; border:0; background:transparent; cursor:pointer; }.day-progress i { display:block; width:.35rem; height:.35rem; border:1px solid var(--rose); border-radius:50%; background:transparent; transition:.25s; }.day-progress b { position:absolute; top:2rem; display:none; color:var(--muted); font:500 .5rem var(--mono); }.day-progress button.active i { transform:scale(1.45); }.day-progress button.complete i { background:var(--rose); box-shadow:0 0 0 3px #df877d22; }.day-progress button.active b { display:block; }.ambient-toggle { position:fixed; z-index:11; right:1rem; top:1rem; padding:.55rem .7rem; border:1px solid #ffffffaa; border-radius:100px; color:var(--muted); background:#fffaf4d9; box-shadow:0 6px 20px #583e2c14; backdrop-filter:blur(12px); font:500 .58rem var(--mono); cursor:pointer; }.memory-modal-stage.shutter:after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:#fff; animation:cameraShutter .36s ease-out both; }.memory-modal-stage { position:relative; }.future-memory { grid-column:span 1; min-height:8rem; display:flex; flex-direction:column; justify-content:center; padding:1rem; border:1px dashed #c2857c88; border-radius:.55rem; background:#fffaf655; }.future-memory span { color:var(--rose-dark); font:500 .55rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.future-memory strong { margin-top:.5rem; color:#735f58; font:italic 1.05rem/1.1 var(--serif); } @keyframes cameraShutter { 0%{opacity:0} 18%{opacity:.95} 100%{opacity:0} } @media (max-width:500px){.day-progress{top:.75rem;}.ambient-toggle{top:.75rem;}.progress-label{display:none}.day-progress button{width:1rem}.ambient-toggle{right:.7rem}}
 .ambient-toggle { width:2.4rem; height:2.4rem; padding:0; display:grid; place-items:center; font-size:.72rem; }