@charset "UTF-8";
:root{color-scheme:light;--paper:#fff7f3;--ink:#594244;--muted:#ad8e8c;--rose:#cb737f}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 100% 0,#fbe9ec,transparent 55%),var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #94536d;outline-offset:5px}
header{max-width:1240px;margin:auto;padding:30px 48px;display:flex;align-items:center;justify-content:space-between}.wordmark{color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.15em;display:flex;align-items:center;gap:9px}.wordmark>span{font:28px Georgia,serif;color:var(--rose)}.header-note{color:var(--muted);font-size:9px;letter-spacing:.23em}
main{max-width:1000px;margin:12px auto 0;display:grid;grid-template-columns:1fr 420px;align-items:center;gap:66px;padding:16px 40px 26px}.intro{padding-bottom:75px}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.18em}h1{margin:28px 0 26px;font:400 clamp(42px,4.7vw,64px)/1.5 "Songti SC","STSong",Georgia,serif;letter-spacing:.035em}h1 em{font-style:normal;color:var(--rose)}.title-heart{display:inline-block;transform:rotate(-15deg);font-size:.82em;color:#d8979d;margin-left:8px}.description{color:#a08380;font-size:14px;line-height:2.1;letter-spacing:.06em}.desktop-note{margin-top:46px;padding-left:46px;position:relative;font-size:13px;color:#b48c8c;line-height:1.9;transform:rotate(-4deg)}.desktop-note small{font-size:10px;letter-spacing:.06em}.desktop-note>span{font:46px Georgia,serif;position:absolute;top:-15px;left:0}
.play-area{width:100%;text-align:center}.photo-wrap{position:relative}.photo-frame{padding:9px 9px 0;background:#fffdfb;border:1px solid #fff;border-radius:18px;box-shadow:0 14px 44px #8c5c5820,0 2px 5px #8c5c5808}.photo-stage{position:relative;aspect-ratio:960/1282;overflow:hidden;border-radius:11px;background:#ecdfd3;isolation:isolate}.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.reaction{opacity:0;pointer-events:none}.reaction.is-active{opacity:1}.face-hotspot{position:absolute;z-index:3;top:6%;left:15%;width:69%;height:42%;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer}.face-hotspot:disabled{cursor:wait}.face-hotspot:focus-visible{outline-offset:-5px}
.poke-guide{position:absolute;z-index:2;left:29%;top:31%;color:white;pointer-events:none;opacity:0;transition:opacity .25s}.ready .poke-guide{opacity:1}.has-poked .poke-guide{opacity:0}.guide-ring{display:block;width:27px;height:27px;border:1px solid #fffc;border-radius:50%;box-shadow:0 0 0 5px #ffffff35;animation:beckon 2.4s ease-in-out infinite}.guide-label{position:absolute;white-space:nowrap;top:38px;left:-14px;border:1px solid #ffffffa0;border-radius:20px;padding:5px 9px;background:#fff7f3e8;color:#a26670;font-size:10px}.photo-caption{display:flex;align-items:center;justify-content:space-between;padding:10px 9px 11px;color:#b39893;font-size:8px;letter-spacing:.09em}.photo-caption>span:last-child{font:23px/1 Georgia,serif;color:var(--rose)}.corner-star{position:absolute;top:-22px;right:-21px;font:65px Georgia,serif;color:#d2b077;transform:rotate(8deg);pointer-events:none}.corner-heart{position:absolute;bottom:14px;left:-27px;font:51px Georgia,serif;color:#d899a0;transform:rotate(-18deg);pointer-events:none}
.reaction-copy{min-height:48px;display:flex;align-items:center;justify-content:center}.reaction-copy p{margin:13px 0 7px;font-size:13px;color:#9a7276;line-height:1.7}.moods{display:flex;justify-content:center;gap:8px;margin:3px 0 17px}.mood{color:#b49b98;border:1px solid #eadbda;border-radius:99px;padding:5px 11px;font-size:10px;transition:background .2s,border-color .2s,color .2s}.mood.is-current{border-color:#e0a6af;background:#f8e0e3;color:#a65666}.poke-button{width:100%;max-width:310px;border:0;border-radius:99px;padding:14px 24px;color:white;background:#c57883;box-shadow:0 5px 15px #c5788328;display:inline-flex;align-items:center;justify-content:center;gap:20px;font-size:13px;letter-spacing:.08em;cursor:pointer;transition:background .15s,transform .15s}.poke-button:active{transform:scale(.97)}.poke-button:hover{background:#b56a76}.poke-button:disabled{cursor:wait;opacity:.65}.poke-button>span:last-child{font:21px/1 Georgia,serif}.interaction-note{font-size:10px;color:#b69d98;margin:12px 0 0;letter-spacing:.1em}.retry-button{border:0;background:transparent;text-decoration:underline;color:var(--rose);padding:12px;cursor:pointer}.retry-button[hidden]{display:none}
.particles{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.particle{position:absolute;left:36%;top:29%;font:25px Georgia,serif;color:#fff0f1;text-shadow:0 1px 4px #9a526730;animation:heart-pop 750ms ease-out forwards}.is-bouncing{animation:squish 350ms ease-out}footer{text-align:center;padding:14px 20px 28px;color:#bca6a0;font-size:10px;letter-spacing:.07em}footer span{display:block;margin-top:10px;color:#d6a6ab;font:19px Georgia,serif}
@keyframes beckon{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.06);opacity:1}}@keyframes squish{0%,100%{transform:scale(1)}28%{transform:scale(.986,.994)}64%{transform:scale(1.004,1.002)}}@keyframes heart-pop{from{transform:translate(0,0) scale(.6);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.05) rotate(var(--rot));opacity:0}}
@media(max-width:720px){header{padding:18px 23px 5px}.wordmark{font-size:11px}.wordmark>span{font-size:25px}.header-note{font-size:8px}main{max-width:430px;display:block;padding:14px 28px 14px;margin:0 auto}.intro{padding-bottom:19px;text-align:center}.eyebrow{font-size:9px}h1{font-size:32px;margin:10px 0 0;line-height:1.5;letter-spacing:.02em}h1 br{display:none}.title-heart{font-size:29px;margin-left:4px}.description,.desktop-note{display:none}.photo-frame{padding:7px 7px 0;border-radius:14px}.photo-stage{border-radius:9px}.photo-caption{padding:8px 7px;font-size:7px}.corner-star{font-size:47px;right:-15px;top:-18px}.corner-heart{font-size:38px;left:-20px;bottom:10px}.reaction-copy{min-height:43px}.reaction-copy p{font-size:12px}.moods{margin-bottom:13px}.poke-button{padding:13px 23px;max-width:270px}footer{padding:12px 20px max(20px,env(safe-area-inset-bottom));font-size:9px}}
@media(max-width:360px){main{padding-left:24px;padding-right:24px}h1{font-size:28px}.title-heart{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.particle{display:none}}
@media(max-width:720px){h1{font-size:clamp(23px,7vw,30px);white-space:nowrap}.title-heart{font-size:.85em}}