.douni{display:inline-block;width:90px;aspect-ratio:354.8/325;flex-shrink:0;background-image:url('/assets/douni-stickers.png');background-size:500% 272.923%;background-repeat:no-repeat;vertical-align:middle}
.douni-love{background-position:0 0}.douni-shy,.douni-paw{aspect-ratio:354.8/277;background-size:500% 320.2166%}.douni-shy{background-position:50% 53.2787%}.douni-paw{background-position:25% 53.2787%}
.douni-garden{display:block;position:relative;width:100%;aspect-ratio:600/470;isolation:isolate}.garden-circle{position:absolute;z-index:-1;left:7%;top:13%;width:86%;height:77%;background:#e9efdf;border-radius:49% 47% 43% 48%;transform:rotate(-7deg)}.scene-love{position:absolute;left:7%;top:24%;width:54%;transform:rotate(-7deg)}.scene-shy{position:absolute;right:6%;top:29%;width:48%;transform:rotate(8deg)}.card-sticker{width:51px;position:absolute;right:16px;bottom:12px}.timeline-sticker{position:absolute;right:10px;top:13px;width:62px;transform:rotate(8deg)}
@media(max-width:600px){.together-card .card-sticker{width:63px;right:19px;bottom:12px}.timeline-sticker{width:48px;right:2px;top:21px}}
/* The same transparent atlas supplies each gesture without loading new images. */
.douni[data-pose="love"],.douni[data-pose="thumbs"]{aspect-ratio:354.8/325;background-size:500% 272.923%}.douni[data-pose="love"]{background-position:0 0}.douni[data-pose="thumbs"]{background-position:50% 0}
.douni[data-pose="shy"],.douni[data-pose="coming"],.douni[data-pose="paw"],.douni[data-pose="happy"]{aspect-ratio:354.8/277;background-size:500% 320.2166%}.douni[data-pose="shy"]{background-position:50% 53.2787%}.douni[data-pose="coming"]{background-position:0 53.2787%}.douni[data-pose="paw"]{background-position:25% 53.2787%}.douni[data-pose="happy"]{background-position:75% 53.2787%}.douni[data-pose="gaze"]{aspect-ratio:354.8/285;background-size:500% 311.228%;background-position:0 100%}
.hero-art .scene-shy[data-pose]{transform:translate3d(var(--react-x,0px),var(--react-y,0px),0) rotate(calc(8deg + var(--react-lean,0deg)));transition:transform .22s ease;will-change:transform}
.douni-companion{position:fixed;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:10;width:88px;height:88px;display:grid;place-items:center;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transform:rotate(var(--react-lean,0deg));transition:opacity .2s ease,visibility .2s;contain:layout paint}.douni-companion.is-visible{opacity:1;visibility:visible}.douni-companion>.douni{width:86px;max-height:88px}.douni-companion.is-visible>.douni[data-pose="happy"]{animation:douni-hop .45s ease-in-out infinite}.douni-companion.is-visible>.douni[data-pose="coming"]{animation:douni-walk .35s ease-in-out infinite}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.douni-companion{left:0;top:0;right:auto;bottom:auto;transform:translate3d(var(--follow-x,0px),var(--follow-y,0px),0) rotate(var(--react-lean,0deg));will-change:transform}}
@keyframes douni-hop{50%{transform:translateY(-7px) rotate(-5deg)}}@keyframes douni-walk{50%{transform:translateY(-3px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.hero-art .scene-shy[data-pose]{transform:rotate(8deg);will-change:auto}.douni-companion{transform:none}}
.hero{position:relative;isolation:isolate}.name-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}.name-arrows>path{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.shuye-arrow{stroke:#9aa988}.junshan-arrow{stroke:#bc968c}.hero-copy{position:relative;z-index:3}
.draggable-name{position:relative;display:inline-block;transform:translate3d(var(--name-x,0px),var(--name-y,0px),0);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:5px}.draggable-name.is-dragging{cursor:grabbing;z-index:4;will-change:transform}.draggable-name:focus-visible{outline:2px solid #bc968c;outline-offset:7px}
@media(max-width:600px){.hero{padding-bottom:56px}.hero-art{margin-top:28px}.hero-copy{position:static}.hero-blessing{position:absolute;top:auto;bottom:16px;left:0;width:100%;margin:0;font-size:16px}.name-arrows>path{stroke-width:2.4}}
.draggable-name{z-index:4}
.hero-blessing{font-size:16px;letter-spacing:1px}
@media(max-width:600px){.hero-blessing{font-size:13px;letter-spacing:.5px}}
[data-count-target]{display:inline-block;min-width:var(--count-width,1ch);font-variant-numeric:tabular-nums}