@charset "UTF-8";
:root{--ink:#624639;--muted:#aa8c81;--pink:#df8593;--rose:#f6c9cc;--line:#f0ded7;--cream:#fff9f5;--font:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#fff8f3;color:var(--ink);font-family:var(--font);font-size:14px;-webkit-tap-highlight-color:transparent;background-image:radial-gradient(ellipse at 8% 22%,#fbe5e17a,transparent 40%),radial-gradient(ellipse at 93% 65%,#fff0df9c,transparent 36%)}button,a{touch-action:manipulation}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b86577;outline-offset:5px}.site-header{max-width:1120px;margin:auto;padding:26px 36px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:700;letter-spacing:1px}.brand-mark{width:33px;height:33px;background:#fbe4df;border:1px solid #f1cbc5;border-radius:12px;color:#cb7a80;display:grid;place-items:center;font-size:27px;font-weight:400;transform:rotate(-8deg)}.brand-dot{color:#ccaaa0}.brand-names{font-size:12px;letter-spacing:0;font-weight:400;color:#9e8276}.header-note{color:#a68a7f;font-size:11px;letter-spacing:1px}.header-note>span,.card-bottom i{display:inline-block;width:5px;height:5px;background:#92ad89;border-radius:50%;margin-right:5px;vertical-align:middle}main{max-width:880px;margin:auto;padding:0 28px}.intro{text-align:center;padding:23px 0 32px}.eyebrow{font-family:Georgia,serif;font-size:10px;letter-spacing:3px;color:#b18d7e;display:flex;justify-content:center;align-items:center;gap:14px}.eyebrow i{display:block;width:24px;height:1px;background:#ddc1b5}h1{font-size:37px;font-weight:700;letter-spacing:2px;margin:16px 0 17px;line-height:1.5}h1>span{position:relative;color:#d47d8b;white-space:nowrap}h1 svg{position:absolute;width:100%;height:12px;bottom:-8px;left:0;fill:none;stroke:#f2bec0;stroke-width:5;stroke-linecap:round}h1 b{font-weight:400;font-size:32px;display:inline-block;color:#dca492;transform:rotate(15deg);margin-left:10px}.intro p{font-size:13px;color:#a88c80;letter-spacing:2px;margin:0}.intro p span{letter-spacing:0;margin-left:7px;font-size:12px}.love-card{border:1px solid #efded5;border-radius:25px;background:#fffefd;box-shadow:0 9px 40px #b7826410;overflow:hidden}.card-top{display:flex;align-items:center;justify-content:space-between;padding:19px 26px 0}.scene-label{font-size:12px;letter-spacing:1px;color:#9b7b6d}.tiny-heart{color:#e29ca5;font-size:12px;margin-right:5px}.corner-note{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#c9a78e;letter-spacing:1px}.stage{position:relative;height:310px;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}.stage:before{content:"";position:absolute;z-index:-1;width:300px;height:245px;background:#fff3ee;border-radius:48% 52% 53% 47%;opacity:.65}#art-host{width:280px;position:relative;z-index:1;aspect-ratio:1/1}.art{position:relative;width:100%;height:100%;transform-origin:center 70%}.art-picture{position:absolute;inset:0;overflow:hidden;background:#fff;isolation:isolate}.art-picture img{display:block;width:100%;height:100%;object-fit:contain}.art .sheet{width:100%;height:100%;background-image:url('assets/couple-sheet.jpg');background-size:300% 300%;background-position:0 0}.sticker{position:absolute;z-index:2;transform:translate(-50%,-50%) rotate(-8deg);font-weight:1000;font-family:"Arial Rounded MT Bold",var(--font);font-size:27px;color:#fff5eb;-webkit-text-stroke:5px #624431;paint-order:stroke fill;filter:drop-shadow(2px 0 #fff8ec) drop-shadow(-2px 0 #fff8ec) drop-shadow(0 2px #fff8ec) drop-shadow(0 -2px #fff8ec);line-height:1.3}.sticker.yan{transform:translate(-50%,-50%) rotate(7deg)}.stage-decor{position:absolute;color:#e7b1a4;font-size:29px;z-index:2}.decor-left{left:22%;top:36%;transform:rotate(-10deg)}.decor-right{right:20%;top:54%;transform:rotate(18deg);font-size:36px}.message-box{text-align:center;padding:0 24px 23px;position:relative}.quote-mark{font-family:Georgia,serif;font-size:39px;line-height:20px;display:block;color:#eac7bc}.message-box p{font-size:16px;letter-spacing:1px;line-height:1.9;margin:4px 0 8px;min-height:30px}.message-sign{font-size:10px;letter-spacing:1px;color:#b49488}.card-bottom{border-top:1px dashed #efdfd7;padding:13px 25px;display:flex;justify-content:space-between;background:#fffbf7;color:#b59a8c;font-size:10px;letter-spacing:.5px}.card-bottom i{background:#dba0a1}.choices{padding-top:27px}.choices-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.choices-heading h2{font-size:15px;font-weight:500;letter-spacing:1px;margin:0}.choices-heading>span{font-size:10px;color:#b69a8c;letter-spacing:.5px}.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.action-button{background:#fffcf8;border:1px solid #eeddd3;border-radius:15px;text-align:left;display:flex;align-items:center;padding:15px 17px;gap:13px;cursor:pointer;color:#896c5b;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;position:relative;min-height:75px}.action-button:hover{background:#fff0eb;border-color:#e6b6ad;transform:translateY(-2px)}.action-button[aria-pressed="true"]{background:#fce9e5;border-color:#dfa497;box-shadow:0 3px 10px #d78e7c0f;color:#a85e65}.action-icon{width:30px;height:30px;flex-shrink:0;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.action-name{display:block;font-size:15px;font-weight:600;letter-spacing:2px}.action-hint{display:block;margin-top:5px;font-size:9px;letter-spacing:.5px;color:#b29988}.selected-dot{position:absolute;top:9px;right:10px;color:#d88b91;font-size:9px;opacity:0}.action-button[aria-pressed="true"] .selected-dot{opacity:1}footer{text-align:center;padding:27px 0 25px}.footer-heart{color:#ce9b8e;font-size:19px}footer p{font-size:11px;letter-spacing:2px;color:#ac8c7b;margin:7px 0 9px}.footer-small{font-family:Georgia,serif;font-size:8px;letter-spacing:2px;color:#c5a99a}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.ambient span{position:absolute;color:#eac8bb;font-size:31px}.ambient span:nth-child(1){left:6%;top:25%;transform:rotate(-16deg)}.ambient span:nth-child(2){right:8%;top:17%;font-size:23px}.ambient span:nth-child(3){right:6%;top:68%;transform:rotate(20deg)}.ambient span:nth-child(4){left:9%;top:78%;font-size:17px}.miss-pair{display:flex;gap:0;align-items:center;width:100%;height:100%;padding-top:32px}.single-cat{position:relative;width:50%;aspect-ratio:1;overflow:hidden;background:#fff}.single-cat img{position:absolute;width:100%;height:auto;left:0;top:-58.4%}.miss-pair .sticker{top:25%}.effect{position:absolute;pointer-events:none;color:#e89aa3;font-size:25px;left:50%;top:32%;z-index:3}.effect.sparkle{color:#dfbb75}.effect.zzz{font:italic 22px Georgia,serif;color:#c2aacd}@media(min-width:1400px){main{max-width:920px}.intro{padding-top:35px}.stage{height:340px}#art-host{width:305px}}
@media(max-width:600px){.site-header{padding:20px 21px}.brand{font-size:13px;gap:8px}.brand-names{font-size:11px}.header-note{font-size:9px;letter-spacing:0}.brand-mark{width:29px;height:29px;font-size:23px}main{padding:0 19px}.intro{padding:23px 0 28px}.eyebrow{font-size:8px;letter-spacing:2px;gap:9px}.eyebrow i{width:18px}h1{font-size:27px;letter-spacing:1px;margin:17px 0 19px}h1 b{font-size:21px;margin-left:4px}.intro p{font-size:11px;letter-spacing:1px}.intro p span{font-size:10px;margin-left:3px}.love-card{border-radius:21px}.card-top{padding:17px 18px 0}.scene-label{font-size:10px;letter-spacing:.5px}.corner-note{font-size:11px}.stage{height:272px}#art-host{width:245px}.decor-left{left:7%;top:31%;font-size:23px}.decor-right{right:7%;font-size:26px}.message-box{padding:0 17px 21px}.message-box p{font-size:13px;letter-spacing:.5px;min-height:49px;display:flex;align-items:center;justify-content:center;margin:1px 0 7px}.message-sign{font-size:9px}.card-bottom{padding:12px 15px;font-size:8px}.choices{padding-top:23px}.choices-heading{align-items:baseline}.choices-heading h2{font-size:13px;letter-spacing:.5px}.choices-heading>span{font-size:8px;letter-spacing:0}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action-button{padding:13px 17px;gap:15px;min-height:74px;border-radius:14px}.action-name{font-size:14px}.action-hint{font-size:9px}footer{padding:25px 0 22px}footer p{font-size:10px;letter-spacing:1px}}
@media(max-width:360px){.header-note{display:none}h1{font-size:24px}.choices-heading>span{font-size:7px}.card-bottom{font-size:7px}#art-host{width:225px}.action-button{gap:10px;padding:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Six genuinely different poses per action; only the active sprite has a clock. */
.art.animated-art{animation:none!important;transform:none}
.sprite-viewport{position:absolute;inset:0;overflow:hidden;background:#fff;border-radius:18px}
.sprite-sheet{position:absolute;left:0;top:0;width:300%;height:200%;max-width:none;display:block;will-change:transform;transition:none;pointer-events:none;user-select:none}
.playback-controls{display:flex;align-items:center;gap:13px}
#toggle-animation{border:0;border-bottom:1px dotted #cda99b;padding:0 0 2px;color:#9d7466;background:transparent;cursor:pointer;font-size:10px;letter-spacing:.5px}
#toggle-animation:hover{color:#b36374}
.animation-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:1px;color:#ba9185}
.animated-art .sticker{font-size:26px}
@media(max-width:600px){.playback-controls{gap:9px}#toggle-animation{font-size:9px}.animated-art .sticker{font-size:24px}}
@media(max-width:360px){.card-bottom{gap:8px}.playback-controls{gap:6px}#replay-hint{display:none}}