@import url("assets/fonts/package/lxgwwenkai-regular.css");
:root{--paper:#faf6ef;--ink:#57443e;--red:#9e4054;--muted:#a18d81}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"LXGW WenKai","KaiTi",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23928373' opacity='.18' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header,footer{display:flex;align-items:center;justify-content:space-between}header{padding:28px 5.5%}header a{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:3px;color:var(--ink);text-decoration:none}header b{font-size:29px;color:var(--red);font-weight:400}header>span{font-size:9px;letter-spacing:2.6px;color:var(--muted)}main{max-width:1270px;margin:auto;display:grid;grid-template-columns:47% 53%;align-items:center;min-height:calc(100svh - 155px);padding:15px 42px 35px}.letter{padding:14px 0 20px 23px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--red)}.salutation{font-family:"LXGW WenKai","KaiTi",serif;font-size:15px;letter-spacing:3px;margin:28px 0 15px}h1{font-family:"LXGW WenKai","KaiTi",serif;font-size:clamp(48px,5.3vw,76px);font-weight:400;line-height:1.32;letter-spacing:4px;margin:0 0 30px;width:max-content}h1 em{color:var(--red);font-style:normal;position:relative}h1 em:after{content:"";position:absolute;bottom:-9px;left:0;width:90%;height:10px;border-top:1px solid #ce8b8d;border-radius:50%;transform:rotate(-3deg)}.poem p{font-family:"LXGW WenKai","KaiTi",serif;font-size:14px;line-height:2.05;letter-spacing:1.15px;margin:0 0 16px;animation:reveal 1.6s var(--delay) both}.poem strong{font-weight:400;color:var(--red)}button{cursor:pointer}#loveButton{margin-top:12px;background:var(--red);border:1px solid var(--red);border-radius:3px;padding:15px 22px;color:#fff8f2;letter-spacing:2px;font:14px "LXGW WenKai","KaiTi",sans-serif;box-shadow:0 6px 18px #9e405414;transition:.2s}#loveButton span{margin-left:25px;font-size:19px;vertical-align:middle}#loveButton:hover{background:#863247;transform:translateY(-2px)}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}.postscript{font-size:10px;color:var(--muted);letter-spacing:1.7px;margin-top:14px}.garden{position:relative;margin-left:-25px;margin-top:-30px}.halo{position:absolute;width:100%;height:80%;top:4%;border-radius:50%;background:radial-gradient(ellipse,#f1dac957,transparent 69%);pointer-events:none}#tree{display:block;position:relative;width:100%;overflow:visible}.tree-note{text-align:center;margin-top:-18px;position:relative}.tree-note>span{font-size:10px;color:#b06470}.tree-note p{font-family:"LXGW WenKai","KaiTi",serif;letter-spacing:2px;font-size:14px;margin:10px 0}.tree-note small{font-size:8px;letter-spacing:2.4px;color:#b09c8e}#replay{display:block;margin:22px auto 0;border:0;background:none;color:#9c887c;font-size:10px;letter-spacing:1.5px;padding:9px}footer{margin:0 5.5%;border-top:1px solid #a78b6d26;padding:20px 0;font-size:9px;letter-spacing:1.3px;color:#aa9788}footer b{color:#b8757e;font-weight:400;padding:0 5px}.branch{fill:none;stroke-linecap:round;stroke-linejoin:round;animation:grow var(--duration) var(--delay) both}.leaf{transform-box:fill-box;transform-origin:center;animation:bloom 1.3s var(--delay) both}.drift{animation:drift 8s var(--delay) infinite both;opacity:0}dialog{border:1px solid #cfa79b80;background:var(--paper);color:var(--ink);padding:40px;text-align:center;max-width:calc(100% - 36px);max-height:90svh;width:460px;border-radius:6px;box-shadow:0 20px 100px #50302e22}dialog::backdrop{background:#4a302c45;backdrop-filter:blur(6px)}.close{position:absolute;right:16px;top:9px;background:none;border:0;color:var(--muted);font-size:27px}.dialog-heart{font-size:45px;color:var(--red)}dialog .eyebrow{font-size:8px;margin:14px 0 25px}dialog h2{font-family:"LXGW WenKai","KaiTi",serif;font-weight:400;color:var(--red);font-size:27px;line-height:1.6}dialog>p{font-family:"LXGW WenKai","KaiTi",serif;font-size:14px;line-height:2}.signature{border-top:1px solid #a78b6d26;margin-top:28px;padding-top:25px;font-size:11px;letter-spacing:1px}.signature p{color:var(--red)}@keyframes grow{from{stroke-dashoffset:var(--length)}to{stroke-dashoffset:0}}@keyframes bloom{from{opacity:0;transform:scale(0) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes reveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.7}85%{opacity:.5}100%{opacity:0;transform:translate(-65px,180px) rotate(70deg)}}@media(min-width:1500px){main{max-width:1360px}.poem p{font-size:16px}}@media(max-width:760px){header{padding:24px 25px}header>span{font-size:7px;letter-spacing:1px}header a{font-size:10px;letter-spacing:1px}main{display:flex;flex-direction:column;padding:25px 25px 30px;min-height:auto}.letter{padding:0;width:100%;max-width:450px}h1{font-size:56px}.salutation{margin-top:25px}.poem p{font-size:13px;letter-spacing:.6px}.garden{width:min(100%,490px);margin:12px 0 0}.tree-note{margin-top:-6px}footer{align-items:flex-start;gap:18px;font-size:8px;line-height:1.8}footer span:last-child{text-align:right;max-width:130px}#loveButton{margin-top:6px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.drift{display:none}}

.poem p{font-size:16px;letter-spacing:.6px}.salutation{font-size:18px}.tree-note p{font-size:16px}dialog>p{font-size:17px}.signature .sender{font-size:20px;margin-top:22px}h1{letter-spacing:2px} @media(max-width:760px){.poem p{font-size:15px;letter-spacing:0}.tree-note p{font-size:14px}dialog h2{font-size:24px}}


/* An intimate, clickable anniversary counter. */
.love-clock{margin:25px 0 15px;padding:18px 0 14px;border-top:1px solid #a78b6d30;border-bottom:1px solid #a78b6d30;max-width:430px}
.clock-caption{font-size:12px;letter-spacing:1.5px;color:var(--muted);margin:0 0 10px}
.clock-face{display:block;text-align:left;width:100%;border:0;padding:0;background:transparent;color:var(--red);font-family:"LXGW WenKai","KaiTi",serif;border-radius:3px}
.clock-face:disabled{cursor:default}.clock-intro{font-size:14px;color:var(--ink)}
.clock-reading{display:flex;align-items:baseline;gap:10px;min-height:46px;margin-top:5px;white-space:nowrap}
#clockValue{font-size:34px;line-height:1.4;font-variant-numeric:tabular-nums;letter-spacing:.3px}
#clockUnit{font-size:16px;flex-shrink:0}.clock-face[data-unit="nanoseconds"] #clockValue{font-size:clamp(17px,2.1vw,25px);letter-spacing:0}.clock-face:disabled #clockValue{font-size:21px;color:var(--muted)}
.clock-hint{font-size:11px;color:var(--muted);margin:5px 0;line-height:1.7}.clock-since{font-size:11px;color:var(--muted);margin:4px 0 0;letter-spacing:.5px}.clock-since:empty{display:none}
.clock-face:hover:not(:disabled) .clock-intro{color:var(--red)}
@media(max-width:760px){.love-clock{margin-top:22px}#clockValue{font-size:29px}.clock-face[data-unit="nanoseconds"] #clockValue{font-size:clamp(15px,4.5vw,22px)}.clock-reading{gap:7px}}
.clock-face[data-unit="microseconds"] #clockValue{font-size:clamp(19px,4.5vw,28px);letter-spacing:0}
.clock-face[data-unit="picoseconds"] #clockValue,.clock-face[data-unit="femtoseconds"] #clockValue{font-size:clamp(14px,3.7vw,21px);letter-spacing:0}
.clock-reading{flex-wrap:wrap;column-gap:8px;row-gap:0}#clockValue{overflow-wrap:anywhere;white-space:normal;max-width:100%}