:root{--bg:#f3f0e9;--paper:#fbfaf6;--ink:#22261f;--soft:#5d6259;--faint:#c4c1b6;--red:#b0362c;--serif:"Songti SC","Noto Serif SC","STSong",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
.corner{display:flex;justify-content:space-between;align-items:center;padding:22px 30px}.we{font:16px Georgia,var(--serif);letter-spacing:.12em}.we i{font-style:normal;margin:0 .35em;color:var(--red)}.us{font:15px Georgia,var(--serif);letter-spacing:.18em;color:var(--soft)}.us b{margin:0 .4em;font-weight:400;color:var(--red);display:inline-block;animation:beat 1.6s ease-in-out infinite}
main{flex:1;width:100%;max-width:420px;margin:0 auto;padding:6vh 24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.eyebrow{margin:0;font-size:13px;letter-spacing:.6em;padding-left:.6em;color:var(--soft);animation:rise .8s .1s both}
h1{margin:10px 0 0;font:400 clamp(26px,6vw,32px)/1.5 var(--serif);letter-spacing:.2em;padding-left:.2em;animation:rise .8s .25s both}
form{width:100%;margin-top:4vh}
.knot{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:3/1;--close:0}
.knot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.thread{fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;opacity:.55;animation:draw 1.4s .4s cubic-bezier(.45,.1,.2,1) forwards}
.heart{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s .35s cubic-bezier(.45,.1,.2,1)}
.dot{position:absolute;top:70%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;transition:left .7s cubic-bezier(.3,1.4,.5,1);animation:fade .6s .9s both}
.dot-a{left:calc(8.33% + var(--close) * 41.67%);background:var(--ink)}
.dot-b{left:calc(91.67% - var(--close) * 41.67%);background:var(--red)}
.dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.2px solid currentColor;opacity:0}
.dot-a{color:var(--ink)}.dot-b{color:var(--red)}
.knot[data-who=wzy] .dot-a::after,.knot[data-who=fzy] .dot-b::after{animation:halo 2s ease-out infinite}
.knot.joined .dot-a{left:calc(50% - 6px)}.knot.joined .dot-b{left:calc(50% + 6px)}
.knot.joined .heart{stroke-dashoffset:0}.knot.joined .thread{opacity:.25;transition:opacity .6s}
.knot.shake{animation:shake .5s}
.who{display:flex;justify-content:space-between;width:100%;max-width:360px;margin:6px auto 0;padding:0;border:0;position:relative}
.who legend{position:absolute;left:0;right:0;top:4px;font-size:13px;letter-spacing:.3em;color:var(--soft);padding:0}
.who label{position:relative;cursor:pointer;padding:4px 6px;font:17px Georgia,var(--serif);letter-spacing:.12em;color:var(--soft);transition:color .2s}
.who-a{margin-left:calc(8.33% - 22px)}.who-b{margin-right:calc(8.33% - 22px)}
.who input{position:absolute;opacity:0;pointer-events:none}
.who label:hover,.who input:checked+span{color:var(--ink)}
.who input:checked+span{border-bottom:1px solid var(--red)}
.who input:focus-visible+span{outline:2px solid var(--red);outline-offset:4px}
.pass{display:block;margin:7vh auto 0;max-width:300px}
.pass input{display:block;width:100%;padding:10px 4px;border:0;border-bottom:1px solid #22261f33;border-radius:0;background:transparent;color:var(--ink);text-align:center;font:20px Georgia,var(--sans);letter-spacing:.35em;outline:none;transition:border-color .3s}
.pass input::placeholder{font:15px var(--sans);letter-spacing:.4em;color:#8a8d84}
.pass input:focus{border-bottom-color:var(--red)}
button{display:inline-flex;align-items:center;gap:12px;margin:26px auto 0;padding:6px 4px;border:0;border-bottom:1px solid var(--red);background:none;color:var(--ink);font:16px var(--serif);letter-spacing:.4em;cursor:pointer;opacity:.35;transition:opacity .4s}
button i{font-style:normal;transition:transform .3s}button:hover i{transform:translateX(5px)}
form.has-pass button{opacity:1}button:disabled{opacity:.4;cursor:wait}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}.pass input:focus-visible{outline:none}
#status{min-height:24px;margin:14px 0 0;color:var(--red);font-size:13px;letter-spacing:.1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{padding:24px 16px 18px;text-align:center;font-size:12px;letter-spacing:.3em;color:var(--soft)}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{from{opacity:0}}@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes halo{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media(max-width:500px){.corner{padding:16px 18px}.we{font-size:15px}.us{font-size:13px;letter-spacing:.1em}main{padding-top:4vh}.pass{margin-top:6vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}