.hero-title button.title-smile{background:transparent;border:0;padding:0;min-width:44px;min-height:44px;aspect-ratio:1;border-radius:50%;cursor:pointer;pointer-events:auto;z-index:8;-webkit-tap-highlight-color:transparent}
.title-smile .smile-follow{position:relative;display:block;filter:drop-shadow(0 5px 5px #0003);transform-origin:50% 58%}
.title-smile .smile-features{transform-origin:50px 50px;transform:perspective(220px) rotateX(var(--smile-pitch,0deg)) rotateY(var(--smile-yaw,0deg)) translateZ(24px) scale(.9);transition:transform .22s ease-out;fill:currentColor;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.title-smile .smile-features path,.title-smile .smile-features ellipse{fill:none}
.hero-title button.title-smile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.hero-title button.title-smile:active .smile-follow{scale:.94}
.smile-bubble{position:fixed;z-index:101;max-width:calc(100vw - 20px);width:max-content;padding:10px 15px;border:1px solid var(--line);border-radius:14px;background:var(--background);color:var(--ink);font:14px/1.5 var(--font-body);box-shadow:0 6px 24px #0002;pointer-events:none}
.smile-bubble[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.title-smile .smile-features{transition:none}}

.title-smile .smile-expression{transform-origin:50px 45px}
.title-smile.is-angry .smile-follow{animation:angry-head .48s var(--ease-standard,ease-in-out) infinite alternate}
.title-smile.is-angry .smile-follow:before,.title-smile.is-angry .smile-follow:after{content:"";position:absolute;z-index:2;top:18%;width:11px;height:8px;border:3px solid currentColor;border-bottom-color:transparent;border-radius:50%;opacity:0;animation:angry-steam 1s ease-out infinite}
.title-smile.is-angry .smile-follow:before{left:-3px;--steam-x:-13px}.title-smile.is-angry .smile-follow:after{right:-3px;--steam-x:13px;animation-delay:.5s}
.title-smile.is-furious .smile-follow{animation-duration:.24s}.title-smile.is-furious .smile-follow:before,.title-smile.is-furious .smile-follow:after{animation-duration:.55s}
@keyframes angry-head{0%{transform:rotate(-7deg) translateX(-1px)}45%{transform:rotate(4deg) translateY(-1px)}100%{transform:rotate(7deg) translateX(1px)}}
@keyframes angry-steam{0%{opacity:0;transform:translate(0,4px) scale(.65)}35%{opacity:.9}100%{opacity:0;transform:translate(var(--steam-x),-12px) scale(1.2)}}
.smile-punch{position:fixed;inset:0;z-index:999;overflow:hidden;pointer-events:none}.smile-punch[hidden]{display:none}
.punch-fist{position:fixed;left:var(--punch-x);top:var(--punch-y);display:block;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:clamp(52px,10vw,112px);line-height:1;translate:-50% -50%;transform-origin:center;filter:drop-shadow(0 10px 12px #0006)}
.smile-punch.is-punching .punch-fist{animation:punch-lunge .68s cubic-bezier(.16,.9,.2,1) forwards}
@keyframes punch-lunge{0%{left:var(--punch-x);top:var(--punch-y);scale:.2;rotate:-30deg;opacity:.35}30%{scale:.8;opacity:1}72%{left:50%;top:50%;scale:2.2;rotate:8deg;opacity:1}100%{left:50%;top:50%;scale:9;rotate:0deg;opacity:0}}
.punch-trail{position:fixed;left:var(--punch-x);top:var(--punch-y);width:58vmin;height:14px;translate:0 -50%;rotate:var(--punch-angle);transform-origin:left center;border-radius:999px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 80%,white),#fff);filter:blur(3px);opacity:0}
.smile-punch.is-punching .punch-trail{animation:punch-trail .56s ease-out forwards}
@keyframes punch-trail{0%,18%{scale:0 1;opacity:0}40%{opacity:.78}100%{scale:1 1;opacity:0}}
.punch-impact,.punch-flash{position:fixed;left:50%;top:50%;translate:-50% -50%;border-radius:50%;opacity:0}
.punch-impact{width:24vmin;height:24vmin;border:clamp(8px,1.2vw,18px) solid #fff;box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 80%,white)}
.smile-punch.is-impact .punch-impact{animation:punch-impact .32s ease-out forwards}
.punch-flash{width:18vmax;height:18vmax;background:radial-gradient(circle,#fff 0 8%,#fff7a5 15%,color-mix(in srgb,var(--accent) 75%,#ff8a00) 40%,transparent 72%)}
.smile-punch.is-impact .punch-flash{animation:punch-flash .32s ease-out forwards}
@keyframes punch-impact{0%{scale:.25;opacity:1}100%{scale:5;opacity:0}}
@keyframes punch-flash{0%{scale:.2;opacity:1}100%{scale:5;opacity:0}}
.screen-punch body{animation:punch-screen-shake .07s linear 6}
@keyframes punch-screen-shake{0%,100%{translate:0 0}20%{translate:-7px 3px}40%{translate:6px -5px}60%{translate:-4px -3px}80%{translate:5px 4px}}
.motion-paused .title-smile.is-angry .smile-follow,.motion-paused .title-smile.is-angry .smile-follow:before,.motion-paused .title-smile.is-angry .smile-follow:after,.motion-paused .smile-punch *{animation:none!important}.motion-paused .smile-punch.is-punching .punch-fist{left:50%;top:50%;scale:4;opacity:.85}.motion-paused .smile-punch.is-impact .punch-flash{opacity:.3;scale:4}
@media(prefers-reduced-motion:reduce){.title-smile.is-angry .smile-follow,.title-smile.is-angry .smile-follow:before,.title-smile.is-angry .smile-follow:after,.smile-punch *,.screen-punch body{animation:none!important}.smile-punch.is-punching .punch-fist{left:50%;top:50%;scale:4;opacity:.85}.smile-punch.is-impact .punch-flash{opacity:.3;scale:4}}