:root{--cream:#eeeee3;--ink:#354b3d;--olive:#7d8a67;--sage:#a8b297;--pink:#b98991}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eeeee3;color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#eeeee3;z-index:-1}.sunbeam{position:absolute;right:-15%;top:-40%;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,#fff7d323,transparent 68%);animation:morning-light 16s ease-in-out infinite alternate}
.topbar{height:65px;width:min(1320px,91%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.garden-mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:10px;letter-spacing:2px;color:#748066;font-weight:500}.mark-icon{font-size:26px;font-weight:400;transition:transform .7s}.garden-mark:hover .mark-icon{transform:rotate(100deg)}.brand-sub{display:block;margin-top:3px;letter-spacing:.4px;font:italic 13px 'Cormorant Garamond',serif;color:#919b7e}.sound{display:flex;align-items:center;gap:6px}.sound button{color:#5b6e51;border:0;background:none;display:flex;align-items:center;gap:9px;font-size:10px;min-height:30px;padding:2px 5px;transition:transform .3s,color .3s}.sound button:hover{transform:translateY(-2px);color:#a77c87}.sound #player-toggle{padding:2px 8px;color:#8b9877}.equalizer{display:flex;align-items:center;height:16px;gap:2px}.equalizer i{width:2px;height:6px;background:#819365;border-radius:2px}.equalizer i:nth-child(2){height:13px}.equalizer i:nth-child(3){height:9px}.equalizer i:nth-child(4){height:5px}[data-playing=true] .equalizer i{animation:sound-wave .8s ease-in-out infinite alternate}[data-playing=true] .equalizer i:nth-child(2){animation-delay:-.3s}[data-playing=true] .equalizer i:nth-child(3){animation-delay:-.6s}
.bouquet-page{height:calc(100svh - 65px);min-height:610px;max-height:1050px;display:flex;flex-direction:column;width:100%;margin:auto}.page-heading{padding:12px 20px 4px;text-align:center;flex:none;animation:heading-in 1.2s ease both}h1{font:400 clamp(31px,3.7vw,50px)/1.12 'Fraunces',Georgia,serif;letter-spacing:-1.6px;margin:0 auto;max-width:1020px;color:#465a43}.garden{position:relative;flex:1;min-height:460px;max-height:780px;width:min(850px,96%);margin:auto;isolation:isolate}.bouquet-art{position:absolute;inset:0;filter:drop-shadow(0 7px 8px #69734c09);animation:bouquet-in 1.5s ease both}.bouquet-art>svg{display:block;width:100%;height:100%;overflow:visible}.bouquet-sway{transform-origin:353px 607px;animation:bouquet-breeze 6.5s ease-in-out infinite}.flower-bloom{cursor:pointer}.bloom-petals{transform-origin:0px 0px;animation:petal-breeze 5s ease-in-out infinite;transition:filter .35s}.bloom-lily .bloom-petals{animation-duration:4.2s;animation-delay:-1.8s}.bloom-glory .bloom-petals{animation-duration:6s;animation-delay:-3s}.bloom-carnation .bloom-petals{animation-delay:-2.4s}.bloom-holly .bloom-petals{animation-duration:5.6s;animation-delay:-1.5s}.flower-bloom:hover .bloom-petals,.flower-bloom.is-pointed .bloom-petals{animation:flower-greeting .9s ease-in-out infinite;filter:brightness(1.06) saturate(1.08) drop-shadow(2px 4px 3px #9f927323)}
.specimen{cursor:pointer;outline:none}.label-paper{transform-origin:center;transform-box:fill-box;animation:label-breeze 5s ease-in-out infinite;filter:drop-shadow(1px 3px 2px #8b8e6d16);transition:filter .3s}.name-label[data-key=lily] .label-paper{animation-delay:-1s}.name-label[data-key=glory] .label-paper{animation-delay:-2.5s}.name-label[data-key=carnation] .label-paper{animation-delay:-3.5s}.label-paper rect{transition:fill .35s,stroke .35s}.name-label:hover .label-paper,.name-label.is-pointed .label-paper{animation:label-lift 1.1s ease-in-out infinite;filter:drop-shadow(2px 5px 3px #7e866b30)}.name-label:hover rect,.name-label.is-pointed rect{fill:#fffdf0;stroke:#99a37e}.name-label:focus-visible rect{stroke:#6e8558;stroke-width:2}.name-label.opened rect{stroke:#b08c96;fill:#f7f0e8}.name-label.opened text{fill:#9c6b7d}.name-line{transition:stroke .3s}.name-connector.is-pointed .name-line{stroke:#87945d;stroke-width:2.2;stroke-dasharray:5 3;animation:ink-flow .8s linear infinite}.visitor{cursor:pointer}.bird-eye{transform-origin:21px -37px}.bird-body{animation:bird-breathe 2.4s ease-in-out infinite;transform-origin:0px 0px}.page-footer{height:33px;display:flex;align-items:center;justify-content:center;flex:none;font-size:9px;color:#899679;letter-spacing:.5px}#opened-count{color:#956e80}
#pollen i{position:absolute;left:var(--x);top:var(--y);height:3px;width:3px;border-radius:50%;background:#c9bb7b;animation:pollen-float var(--duration) ease-in-out infinite;animation-delay:var(--delay);opacity:0}#leaves i{position:absolute;left:var(--x);top:-40px;height:8px;width:18px;border-radius:100% 0 100% 0;background:linear-gradient(30deg,#91a37d,#bdc491);opacity:0;animation:leaf-fall var(--duration) linear infinite;animation-delay:var(--delay)}.background-flutters i{position:absolute;width:25px;height:25px;left:-60px;top:65%;animation:background-flight 26s ease-in-out infinite;opacity:.5}.background-flutters i:nth-child(2){top:15%;animation-delay:-12s;animation-duration:34s;scale:.7;opacity:.35}.background-flutters i:nth-child(3){top:82%;animation-delay:-7s;animation-duration:29s;scale:.55;opacity:.3}.background-flutters i:before,.background-flutters i:after{content:'';position:absolute;top:0;width:13px;height:21px;background:#d0b3a1;border-radius:85% 70% 70% 25%;transform-origin:100% 75%;animation:background-wing .27s ease-in-out infinite alternate}.background-flutters i:before{left:0}.background-flutters i:after{left:13px;transform-origin:0 75%;border-radius:70% 85% 25% 70%;background:#d8c6a7;animation-delay:-.12s}
dialog{background:#f8f7ec;color:var(--ink);border:1px solid #bcc4a4;padding:42px;width:min(480px,90vw);max-height:88svh;box-shadow:0 40px 120px #37482b33;text-align:center}dialog[open]{animation:note-appear .65s cubic-bezier(.2,.7,.2,1) both}dialog::backdrop{background:#46563b44;backdrop-filter:blur(8px)}.note-meta{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.6px;color:#909a7c}.note-spark{font-size:32px;color:#a6a16d;margin:30px auto 18px;animation:note-spark 8s ease-in-out infinite}dialog h2{font:400 39px/1.1 'Fraunces',serif;color:#667e50;margin:0}.note-rule{width:36px;height:1px;margin:25px auto;background:#bac19b}#note-body{white-space:pre-line;font:22px/1.7 'Cormorant Garamond',serif;margin:0}.signature{font:italic 17px 'Cormorant Garamond',serif;color:#9a9e7c;margin:32px auto}#keep-note{border:1px solid #bec5a6;background:transparent;color:#7e8c6c;padding:12px 22px;font-size:10px;letter-spacing:.5px;transition:background .3s,transform .3s}#keep-note:hover{background:#eef0df;transform:translateY(-2px)}#keep-note span{padding-left:15px;font-size:14px}
@keyframes bouquet-breeze{0%,100%{transform:rotate(-1.25deg)}40%{transform:rotate(1.5deg)}70%{transform:rotate(.3deg)}}@keyframes petal-breeze{0%,100%{transform:rotate(-1.1deg) scale(1)}50%{transform:rotate(1.4deg) scale(1.014)}}@keyframes flower-greeting{0%,100%{transform:rotate(-2deg) scale(1.045)}50%{transform:rotate(2.5deg) scale(1.065)}}@keyframes label-breeze{0%,100%{rotate:-.65deg}50%{rotate:1deg}}@keyframes label-lift{0%,100%{transform:translateY(-3px) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes ink-flow{to{stroke-dashoffset:-16}}@keyframes bird-breathe{50%{scale:1.015 1.035}}@keyframes pollen-float{0%,100%{opacity:0;transform:translate(0,0)}35%,70%{opacity:.48}50%{transform:translate(45px,-55px)}}@keyframes leaf-fall{0%{transform:translate(-15vw,-4vh) rotate(0);opacity:0}15%,80%{opacity:.2}50%{transform:translate(4vw,52vh) rotate(160deg) rotateY(150deg)}100%{transform:translate(27vw,110vh) rotate(330deg) rotateY(280deg);opacity:0}}@keyframes background-flight{0%{transform:translate(-8vw,6vh) rotate(10deg)}25%{transform:translate(28vw,-20vh) rotate(-17deg)}50%{transform:translate(52vw,-7vh) rotate(9deg)}75%{transform:translate(82vw,-36vh) rotate(-15deg)}100%{transform:translate(118vw,-25vh) rotate(8deg)}}@keyframes background-wing{to{transform:scaleX(.2)}}@keyframes morning-light{to{opacity:.5;transform:translate(-45px,25px)}}@keyframes heading-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes bouquet-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}@keyframes note-appear{from{opacity:0;transform:translateY(25px) rotate(-2deg) scale(.95)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes note-spark{50%{transform:rotate(25deg)}}@keyframes sound-wave{to{height:3px}}
@media(max-width:600px){.topbar{height:58px;width:90%;gap:8px}.garden-mark{font-size:8px;letter-spacing:1.5px;gap:7px}.mark-icon{font-size:24px}.brand-sub{font-size:12px}.sound button{font-size:9px}.sound #player-toggle{padding:2px 4px}.bouquet-page{height:calc(100svh - 58px);min-height:590px;max-height:1000px}.page-heading{padding:18px 24px 0}h1{font-size:clamp(28px,7.2vw,38px);line-height:1.15;letter-spacing:-1px}.garden{width:97%;min-height:440px;max-height:690px}.page-footer{height:31px;font-size:8px}.music-panel{top:58px}dialog{padding:40px 25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}#leaves,#pollen,.background-flutters{display:none}}
/* A full morning garden, with a larger bouquet and a planted lower edge. */
:root{color-scheme:light;accent-color:#8d9c76}*{-webkit-tap-highlight-color:transparent}button:focus,a:focus,svg:focus,g:focus{outline:none}button:focus-visible,a:focus-visible{outline:1px solid #8d9c76;outline-offset:5px;border-radius:18px}::selection{background:#d7ddc2;color:#354b3d}
.garden-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,#fffbed88,transparent 53%),radial-gradient(ellipse at 12% 91%,#bfcba745,transparent 38%),radial-gradient(ellipse at 92% 85%,#e0c8c63b,transparent 36%)}.sunbeam{width:1100px;height:1100px;top:-75%;right:-25%;background:radial-gradient(circle,#fff4c870,transparent 67%)}.morning-meadow{position:absolute;bottom:-1px;left:0;width:100%;height:clamp(135px,23vh,235px);overflow:visible}.meadow-stem{animation:meadow-breeze var(--duration) ease-in-out infinite;animation-delay:var(--delay)}.botanical-framing{position:absolute;inset:0;opacity:.32}.botanical-framing i{position:absolute;width:210px;height:410px;bottom:8%;left:-95px;border:1px solid transparent;border-radius:50%;rotate:-28deg;mask-image:linear-gradient(transparent,#000)}.botanical-framing i:before,.botanical-framing i:after{content:'';position:absolute;width:75px;height:145px;border-radius:100% 0 100% 0;background:linear-gradient(45deg,#a6b38c33,#bcc69d66);border:1px solid #a4b18b55;right:4px;top:30px;rotate:25deg}.botanical-framing i:after{top:190px;right:-38px;rotate:100deg;width:100px;height:170px}.botanical-framing i:nth-child(2){left:auto;right:-100px;bottom:17%;rotate:205deg;scale:1.2}
.bouquet-page{position:relative;z-index:1;min-height:650px;height:calc(100svh - 65px);max-height:none}.page-heading{padding:4px 24px 0}.garden{flex:1;min-height:490px;max-height:880px;width:min(1050px,98%);margin:0 auto}.bouquet-art{inset:-4px 0 -9px}.page-footer{position:relative;gap:13px;height:53px;min-height:53px;color:#6c7e60;padding:0 15px 10px}.progress{background:#f4f3e4bc;padding:8px 16px;border-radius:40px;backdrop-filter:blur(4px);letter-spacing:1px}.footer-flourish{font:35px Georgia;color:#8c9c72;rotate:-15deg}.footer-flourish.reverse{scale:-1 1;rotate:15deg}.music-panel{background:#f6f4e8}.music-panel iframe:focus{outline:none}dialog{border-radius:110px 110px 12px 12px;border-color:#bbc4a0}.note-meta{margin-top:8px}
@keyframes meadow-breeze{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@media(min-width:1000px){.page-heading{padding-top:0}h1{font-size:clamp(36px,3.5vw,51px)}.bouquet-art{inset:-4px -65px -12px}.botanical-framing i{left:-40px;width:260px;height:490px}.botanical-framing i:nth-child(2){right:-40px}.morning-meadow{height:29vh;max-height:260px}}
@media(max-width:600px){.bouquet-page{min-height:calc(100svh - 58px);height:auto;display:flex}.page-heading{padding:9px 25px 8px}h1{font-size:clamp(28px,7.7vw,38px)}.garden{flex:none;width:100%;height:auto;aspect-ratio:670/705;min-height:0;max-height:none;margin:12px auto 0}.bouquet-art{inset:0}.page-footer{margin-top:auto;padding-top:20px;padding-bottom:22px;height:82px;min-height:82px}.morning-meadow{height:175px;opacity:.9}.botanical-framing i{width:140px;height:300px;left:-92px;bottom:18%;opacity:.7}.botanical-framing i:nth-child(2){right:-98px;bottom:31%}.sunbeam{top:-50%;right:-110%;width:850px;height:850px}.progress{font-size:8px}.footer-flourish{font-size:29px}dialog{border-radius:85px 85px 10px 10px}.note-meta{font-size:7px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.meadow-stem{animation:none}}

/* A little rose red, kept to small details. */
.title-red{color:#9b6066}.mark-icon,.footer-flourish{color:#ae777b}.equalizer i{background:#ab7378}.note-spark,.signature{color:#a96970}.name-label.opened text{fill:#a05d66}.name-label.opened rect{stroke:#bd8d91;fill:#f9eeea}.name-connector.is-pointed .name-line{stroke:#ac777c}#opened-count{color:#a05d66}#keep-note:hover{border-color:#bd8d91;background:#f5e9e5}#background-music{display:none}

.love-invitation{font:italic 19px/1.3 'Cormorant Garamond',Georgia,serif;color:#a16d72;margin:9px 0 3px;letter-spacing:.15px}.mark-icon{font-size:31px}.note-spark{font-size:37px;margin:25px auto 15px}.signature{color:#a36c74;font-size:18px}.note-meta{letter-spacing:1px}#note-body{font-size:21px;line-height:1.55}#keep-note{border-radius:30px}.progress{letter-spacing:.6px}@media(max-width:600px){.love-invitation{font-size:16px;margin:8px 0 2px}.garden{margin-top:6px}.note-meta{letter-spacing:.6px;font-size:7px}#note-body{font-size:20px;line-height:1.5}.signature{margin:23px auto}.note-spark{margin-top:23px}}

.note-flower{width:82px;height:88px;margin:13px auto 10px}.note-flower svg{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #7a785118);animation:letter-flower-sway 5s ease-in-out infinite;transform-origin:50% 90%}@keyframes letter-flower-sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}@media(max-width:600px){.note-flower{width:70px;height:73px;margin:10px auto 8px}dialog{padding-top:34px}.note-rule{margin:20px auto}}

/* Folded stationery, with an open paper shape instead of the arched card. */
dialog{border-radius:7px;border:1px solid #cfbfb2;background:linear-gradient(90deg,#ba808825,#ba808825) 25px 0/1px 100% no-repeat,#faf7ee;padding:28px 48px 34px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);outline:none;box-shadow:0 25px 90px #37482b33}dialog:before{content:'';position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(45deg,#e3d8c6 49%,transparent 51%);filter:drop-shadow(-2px 2px 2px #81745922);pointer-events:none}.note-meta{justify-content:center;margin:0 0 2px;color:#ad8584;font-size:8px;letter-spacing:2px}.note-flower{margin:8px auto 6px}dialog h2{font-size:36px}.note-rule{width:54px;background:#c9a9a4;margin:18px auto 24px}#note-body{text-align:left;font-size:21px;line-height:1.6}.signature{margin:26px 0 23px;font-size:18px}#keep-note{font-size:9px;background:#f6eee6;border-color:#d4b9b2;color:#99706f;padding:12px 20px}@media(max-width:600px){dialog{width:min(450px,91vw);padding:24px 28px 28px;background-position:13px 0;border-radius:5px}.note-flower{width:68px;height:72px;margin:5px auto 7px}dialog h2{font-size:33px}#note-body{font-size:20px;line-height:1.5}.note-rule{margin:17px auto 22px}.signature{font-size:17px;margin:24px 0 21px}}

/* All five note illustrations are already in the document: no request on click. */
#note-flower-icon{width:100%;height:100%}#note-flower-icon svg[hidden]{display:none}dialog[open]{animation:none}

.page-heading h1{line-height:1.04}.love-invitation{max-width:600px;margin:11px auto 4px}@media(max-width:600px){.page-heading h1{font-size:clamp(28px,7.4vw,37px);line-height:1.1}.love-invitation{max-width:310px;font-size:16px;line-height:1.3;margin:9px auto 2px}}
