.pic{width:100%;height:100%;display:block}.pic-ph{text-align:center;background:radial-gradient(60% 55% at 22% 25%, #8fd0da73, transparent 70%), radial-gradient(55% 50% at 80% 78%, #f4c7a880, transparent 70%), radial-gradient(40% 40% at 70% 20%, #fbe7a673, transparent 70%), var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;height:100%;padding:28px;display:flex;position:relative;overflow:hidden}.pic-ph:after{content:"";pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.pic-ph-art{width:46%;max-width:220px;height:auto}.pic-ph-note{max-width:18em;font-family:var(--font);color:var(--ink-2);margin:0;font-size:30px;line-height:1.45}.pic-ph.compact{gap:6px;padding:10px}.pic-ph.compact .pic-ph-art{width:56%}.pic-ph.compact .pic-ph-note{font-size:19px;line-height:1.35}.pic-ph-stamp{color:var(--terracotta);font-family:var(--font);opacity:.8;border:2px solid #c8714e8c;border-radius:8px;padding:4px 12px;font-size:17px;position:absolute;bottom:16px;right:18px;transform:rotate(-6deg)}.topbar{z-index:20;pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:center;height:112px;padding:0 36px;display:grid;position:absolute;top:0;left:0;right:0}.topbar>*{pointer-events:auto}.topbar-right{justify-content:flex-end;align-items:center;gap:16px;display:flex}.topbar-title{border:1.5px solid var(--hair);font-family:var(--font);letter-spacing:.06em;color:var(--ink);white-space:nowrap;background:#fffbf2f0;border-radius:999px;padding:10px 34px;font-size:32px;font-weight:700;box-shadow:0 12px 26px -16px #1d5e7a8c}.back-btn{border:1.5px solid var(--hair);height:64px;font-family:var(--font);color:var(--sea-deep);transition:transform .14s var(--ease-out);background:#fffbf2f0;border-radius:999px;align-items:center;gap:10px;padding:0 26px 0 12px;font-size:26px;font-weight:700;display:inline-flex;box-shadow:0 5px #e3d6bc,0 12px 22px -14px #1d5e7a80}.back-btn:active{transform:translateY(4px);box-shadow:0 1px #e3d6bc}.back-ico{background:var(--sky-1);width:44px;height:44px;color:var(--sea-deep);border-radius:50%;place-items:center;display:grid}.back-ico svg{width:24px;height:24px}.yy-fig{transform-origin:50% 100%;display:block;position:relative}.yy-svg{width:100%;height:auto;display:block;overflow:visible}.yy-svg g,.yy-shadow{transform-box:view-box}.yy-all{transform-origin:330px 1080px}.yy-head{transform-origin:355px 292px}.yy-arm{transform-origin:492px 525px}.yy-shadow{fill:#1d5e7a33;transform-origin:330px 1082px}.yy-lids,.yy-happy,.yy-hmm,.yy-mouth{opacity:0}.yy-lids{animation:5.2s infinite yy-blink}@keyframes yy-blink{0%,61%,64.5%,90%,92.5%,95.5%,98%,to{opacity:0}62%,64%,91%,92%,96%,97.5%{opacity:1}}.pose-idle .yy-all,.pose-talk .yy-all,.pose-think .yy-all{animation:3.6s ease-in-out infinite yy-breathe}.pose-idle .yy-head{animation:6s ease-in-out infinite yy-look}.pose-idle .yy-arm,.pose-talk .yy-arm,.pose-think .yy-arm{animation:3.6s ease-in-out infinite yy-arm-rest}@keyframes yy-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.006,1.014)}}@keyframes yy-look{0%,to{rotate:0deg}30%{rotate:-2.5deg}55%{rotate:1.5deg}80%{rotate:-1deg}}@keyframes yy-arm-rest{0%,to{rotate:0deg}50%{rotate:-2.5deg}}.pose-walk .yy-all{animation:.46s ease-in-out infinite yy-bob}.pose-walk .yy-head{animation:.46s ease-in-out infinite yy-nod}.pose-walk .yy-arm{animation:.92s ease-in-out infinite yy-swing}.pose-walk .yy-shadow{animation:.46s ease-in-out infinite yy-shadow-bob}@keyframes yy-bob{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-16px)rotate(-1deg)}50%{transform:translateY(0)rotate(0)scale(1.01,.99)}75%{transform:translateY(-16px)rotate(1deg)}}@keyframes yy-nod{0%,50%,to{rotate:0deg}25%,75%{rotate:2deg}}@keyframes yy-swing{0%,to{rotate:-7deg}50%{rotate:7deg}}.yy-leg.back{transform-origin:300px 776px}.yy-leg.front{transform-origin:364px 776px}.pose-walk .yy-leg.back{animation:.92s ease-in-out infinite yy-step}.pose-walk .yy-leg.front{animation:.92s ease-in-out infinite reverse yy-step}.pose-dance .yy-leg.back,.pose-cheer .yy-leg.back{animation:.62s ease-in-out 2 yy-kick}@keyframes yy-step{0%,to{rotate:-10deg}50%{rotate:8deg}}@keyframes yy-kick{0%,to{rotate:0deg}40%{rotate:-8deg}}@keyframes yy-shadow-bob{0%,50%,to{transform:scale(1)}25%,75%{transform:scale(.9)}}.pose-talk .yy-mouth{animation:.9s step-end infinite yy-talk}.pose-talk .yy-head{animation:1.8s ease-in-out infinite yy-chat}@keyframes yy-talk{0%{opacity:0}18%{opacity:1}32%{opacity:0}52%{opacity:1}62%{opacity:0}84%{opacity:1}}@keyframes yy-chat{0%,to{rotate:0deg}25%{rotate:3deg}50%{rotate:-1deg}75%{rotate:2.5deg}}.pose-cheer .yy-happy{opacity:1}.pose-cheer .yy-lids{animation:none}.pose-cheer .yy-all{animation:.62s cubic-bezier(.3,.6,.4,1) 2 yy-hop}.pose-cheer .yy-shadow{animation:.62s cubic-bezier(.3,.6,.4,1) 2 yy-shadow-hop}.pose-cheer .yy-head{animation:.62s ease-in-out 2 yy-joy}.pose-cheer .yy-arm,.pose-wave .yy-arm{animation:.32s ease-in-out infinite alternate yy-flick}@keyframes yy-hop{0%{transform:translateY(0)scale(1.04,.95)}35%{transform:translateY(-70px)scale(.97,1.04)}70%{transform:translateY(0)scale(1.05,.94)}to{transform:translateY(0)scale(1)}}@keyframes yy-shadow-hop{0%,to{opacity:1;transform:scale(1)}35%{opacity:.6;transform:scale(.7)}}@keyframes yy-joy{0%,to{rotate:0deg}35%{rotate:-5deg}70%{rotate:3deg}}@keyframes yy-flick{0%{rotate:-9deg}to{rotate:6deg}}.pose-wave .yy-head{animation:1.4s ease-in-out infinite yy-hello}.pose-wave .yy-all{animation:1.4s ease-in-out infinite yy-breathe}@keyframes yy-hello{0%,to{rotate:-4deg}50%{rotate:-1deg}}.pose-think .yy-head{animation:3s ease-in-out infinite yy-ponder}@keyframes yy-ponder{0%,to{rotate:-6deg}50%{rotate:-3deg}}.pose-think .yy-hmm,.pose-sad .yy-hmm{opacity:1}.pose-sad .yy-head{animation:1.6s ease-in-out infinite yy-shake}@keyframes yy-shake{0%,to{rotate:5deg}20%{rotate:2deg}40%{rotate:6deg}60%{rotate:3deg}}.pose-sad .yy-all{animation:2.4s ease-in-out infinite yy-sigh}@keyframes yy-sigh{0%,to{transform:scaleY(.99)}50%{transform:scale(1.004,1.002)}}.pose-dance .yy-happy{opacity:1}.pose-dance .yy-lids{animation:none}.pose-dance .yy-all{animation:1.1s ease-in-out infinite yy-dance}.pose-dance .yy-head{animation:.55s ease-in-out infinite alternate yy-dance-head}.pose-dance .yy-arm{animation:.55s ease-in-out infinite alternate yy-flick}.pose-dance .yy-shadow{animation:.55s ease-in-out infinite yy-shadow-bob}@keyframes yy-dance{0%,to{transform:translateY(0)rotate(-3deg)}25%{transform:translateY(-18px)rotate(0)}50%{transform:translateY(0)rotate(3deg)}75%{transform:translateY(-18px)rotate(0)}}@keyframes yy-dance-head{0%{rotate:-5deg}to{rotate:4deg}}@media (prefers-reduced-motion:reduce){.yy-fig *,.yy-fig{animation:none!important}}
