/* Source of truth for Pinny/Strum/Petal moods + form keyframes. Extracted from the approved merged design. Do not alter timings. */
@font-face{font-family:'Corporative Sans Rounded';src:url('../fonts/CorporativeSansRounded-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'Corporative Sans Rounded';src:url('../fonts/CorporativeSansRounded-Bold.otf') format('opentype');font-weight:700;font-display:swap}

body{margin:0;font-family:'Corporative Sans Rounded',system-ui,sans-serif;color:#2e3a41}
.mascot .pinny svg{width:100%;height:auto;display:block;overflow:visible}
.mascot .pinny .fb{transform-box:fill-box}
.mascot .pin-o{stroke:#008cab;stroke-width:12;stroke-linejoin:round}
.mascot .arm-o{stroke:#008cab;stroke-width:9;stroke-linejoin:round}
.mascot .band{fill:none;stroke:#008cab;stroke-width:9;stroke-linecap:round}
.mascot .ball1,.mascot .ball2{transform-origin:50% 50%}
.mascot .ball1{animation:b1 2.4s ease-in-out infinite}
.mascot .ball2{animation:b2 2.4s ease-in-out infinite}
@keyframes b1{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,-12px)}}
@keyframes b2{0%,100%{transform:translate(0,-10px)}50%{transform:translate(6px,4px)}}
@keyframes rise{0%{transform:translate(8px,18px) scale(.3);opacity:0}30%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(-14px,-44px) scale(.7);opacity:0}}
@keyframes juggle{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes jit{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}}
@keyframes pop{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(-5px,-10px) scale(1.2)}60%{transform:translate(0,0) scale(.92)}}
.mascot.mood-think .ball1,.mascot.mood-think .ball2{animation:rise 2.4s ease-out infinite}
.mascot.mood-think .ball2{animation-delay:1.2s}
.mascot.mood-cheer .ball1,.mascot.mood-cheer .ball2{animation:juggle .75s cubic-bezier(.3,0,.7,1) infinite}
.mascot.mood-cheer .ball2{animation-delay:.375s}
.mascot.mood-wobble .ball1,.mascot.mood-wobble .ball2{animation:jit .28s linear infinite}
.mascot.mood-wobble .ball2{animation-delay:.14s}
.mascot.mood-strike .ball1,.mascot.mood-strike .ball2{animation:pop .8s ease-out infinite}
.mascot.mood-strike .ball2{animation-delay:.4s}
.mascot .ln{fill:none;stroke:#2e3a41;stroke-width:3.5;stroke-linecap:round}
.mascot .body{transform-origin:50% 100%;animation:bob 1.6s ease-in-out infinite}
.mascot .shadow{transform-origin:50% 50%;animation:shade 1.6s ease-in-out infinite}
.mascot .eyes{transform-origin:50% 50%;animation:blink 4.2s infinite}
.mascot .pupils{transition:transform .3s}
.mascot .armR{transform-origin:0% 50%;transform:rotate(40deg)}
.mascot .armL{transform-origin:100% 50%;transform:rotate(-40deg)}
.mascot .brows,.mascot .m-o,.mascot .m-flat,.mascot .confetti{opacity:0}
.mascot .brows{transition:opacity .2s}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-10px) scale(.98,1.03)}88%{transform:translateY(0) scale(1.05,.95)}}
@keyframes shade{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.85);opacity:.6}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes wave{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(-85deg)}}
@keyframes think{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-4px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1.06,.94)}15%{transform:translateY(0) scale(1.08,.9)}50%{transform:translateY(-46px) scale(.95,1.06)}85%{transform:translateY(0) scale(1.08,.92)}}
@keyframes hopShade{0%,100%{transform:scale(1)}50%{transform:scale(.6);opacity:.4}}
@keyframes flapR{0%,100%{transform:rotate(-60deg)}50%{transform:rotate(-95deg)}}
@keyframes flapL{0%,100%{transform:rotate(60deg)}50%{transform:rotate(95deg)}}
@keyframes wobble{0%,100%{transform:rotate(0)}12%{transform:rotate(-15deg)}26%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}54%{transform:rotate(5deg)}66%{transform:rotate(-2deg)}76%{transform:rotate(0)}}
@keyframes flip{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}14%{transform:translateY(0) scale(1.1,.88)}50%{transform:translateY(-70px) rotate(360deg) scale(.96,1.04)}78%{transform:translateY(0) rotate(360deg) scale(1.1,.9)}90%{transform:translateY(0) rotate(360deg) scale(1,1)}}
@keyframes fall{0%{transform:translateY(-10px) scale(.4);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(90px) rotate(200deg);opacity:0}}
@keyframes dots{0%,100%{opacity:.25}50%{opacity:1}}
.mascot.mood-hello .armR{animation:wave .9s ease-in-out infinite}
.mascot.mood-think .body{animation:think 2.4s ease-in-out infinite}
.mascot.mood-think .pupils{transform:translate(-3px,-4px)}
.mascot.mood-think .brows{opacity:1}
.mascot.mood-think .m-smile{opacity:0}
.mascot.mood-think .m-flat{opacity:1}
.mascot.mood-think .armR{transform:rotate(-120deg)}
.mascot.mood-cheer .body{animation:hop .75s ease-in-out infinite}
.mascot.mood-cheer .shadow{animation:hopShade .75s ease-in-out infinite}
.mascot.mood-cheer .armR{animation:flapR .375s ease-in-out infinite}
.mascot.mood-cheer .armL{animation:flapL .375s ease-in-out infinite}
.mascot.mood-cheer .confetti{opacity:1}
.mascot.mood-wobble .body{animation:wobble 1.8s ease-in-out infinite}
.mascot.mood-wobble .shadow{animation:none}
.mascot.mood-wobble .brows{opacity:1}
.mascot.mood-wobble .eyes{animation:none;transform:scale(1.12)}
.mascot.mood-wobble .m-smile{opacity:0}
.mascot.mood-wobble .m-o{opacity:1}
.mascot.mood-wobble .armR{transform:rotate(-20deg)}
.mascot.mood-wobble .armL{transform:rotate(20deg)}
.mascot.mood-strike .body{animation:flip 1.6s cubic-bezier(.5,0,.3,1) infinite}
.mascot.mood-strike .shadow{animation:hopShade 1.6s ease-in-out infinite}
.mascot.mood-strike .armR{transform:rotate(-80deg)}
.mascot.mood-strike .armL{transform:rotate(80deg)}
.mascot.mood-strike .confetti{opacity:1}
.mascot .confetti circle,.mascot .confetti rect{transform-box:fill-box;transform-origin:50% 50%;animation:fall 1.6s ease-in infinite}
.tdot{animation:dots 1.2s infinite}
.mascot.mood-think .bub-dots{display:inline}
@media (prefers-reduced-motion:reduce){.pinny *{animation:none !important}}

@keyframes revealDown{from{max-height:0;opacity:0;transform:translateY(-10px)}to{max-height:520px;opacity:1;transform:none}}
img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
@keyframes discRA{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes discRB{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes discLA{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes discLB{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes discPopA{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes discPopB{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes txtInA{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes txtInB{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes wobSeq{0%{transform:rotate(0) scale(1)}2%{transform:rotate(-14deg) scale(1.1)}4%{transform:rotate(12deg) scale(1.1)}6%{transform:rotate(-9deg) scale(1.06)}8%{transform:rotate(7deg)}10%{transform:rotate(-3deg)}12%,100%{transform:rotate(0) scale(1)}}
@keyframes wobEnd{0%{transform:rotate(0)}18%{transform:rotate(-16deg)}36%{transform:rotate(13deg)}54%{transform:rotate(-9deg)}72%{transform:rotate(5deg)}100%{transform:rotate(0)}}
@keyframes tagSeq{0%{opacity:0;transform:translateY(6px)}3%{opacity:1;transform:none}30%{opacity:1}34%,100%{opacity:0}}
@keyframes pulse1{0%{transform:scale(1)}35%{transform:scale(1.3)}70%{transform:scale(0.95)}100%{transform:scale(1)}}
.mascot.mood-calm .body{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.012)}}
.mascot.mood-calm .armL,.mascot.mood-calm .armR{animation:none}
.mascot.mood-calm .confetti,.mascot.mood-calm .balls{opacity:0 !important}
.mascot .ondark .shadow{fill:#000000 !important;opacity:.55 !important}
.mascot .ondark::after{content:'';position:absolute;left:6%;right:6%;bottom:-1%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(245,243,239,0.16),rgba(245,243,239,0) 70%);pointer-events:none;z-index:-1}
@keyframes drift{to{transform:translate(0,0)}}
[style*="background:#ffffff"],[style*="background: #ffffff"]{background:rgba(255,255,255,0.94) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(44,52,56,0.06),0 8px 22px rgba(44,52,56,0.07)}
[style*="background:#eef2f3"],[style*="background: #eef2f3"]{background:rgba(0,140,171,0.10) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[style*="background:#eaf5e2"],[style*="background: #eaf5e2"]{background:rgba(114,177,74,0.12) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[style*="background: #fde3ee"],[style*="background:#fde3ee"]{background:rgba(225,57,126,0.09) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[style*="background: #008cab"],[style*="background:#008cab"]{background:rgba(0,140,171,0.92) !important;-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1.5px solid rgba(245,243,239,0.45) !important;box-shadow:0 10px 24px rgba(0,140,171,0.30),inset 0 1px 0 rgba(245,243,239,0.45)}
[style*="solid #e4e0d8"]{border-color:rgba(44,52,56,0.10) !important}
[style*="background:#fefefe"]{background:rgba(255,255,255,0.97) !important;box-shadow:0 8px 24px rgba(20,26,30,0.22)}
[style*="border-top:1px solid #e3e8ea"]{background:rgba(245,243,239,0.86) !important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(44,52,56,0.08) !important;box-shadow:0 -8px 28px rgba(44,52,56,0.06)}
[style*="background: #f5f3ef"]{background:rgba(245,243,239,0.92) !important;-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
[style*="rgba(245,243,239,0.14)"],[style*="rgba(245,243,239,0.12)"]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[style*="border:2px solid #008cab"]{border-width:3px !important;box-shadow:0 0 0 4px rgba(0,140,171,0.16),0 12px 26px rgba(0,140,171,0.20) !important}
[style*="solid #376425"]{box-shadow:0 0 0 4px rgba(64,92,44,0.16),0 12px 26px rgba(64,92,44,0.18) !important}
[style*="border:2px solid #72b14a"]{box-shadow:0 0 0 3px rgba(114,177,74,0.18),0 10px 22px rgba(114,177,74,0.16) !important}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
.mascot.mood-think .pupils{transform:translate(4px,3px) !important}
button{transition:transform .12s ease,box-shadow .2s ease}
button:active{transform:scale(0.975)}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.mascot.mood-run .body{animation:runbob .28s ease-in-out 2 both}
@keyframes runbob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(-4deg)}75%{transform:translateY(-12px) rotate(4deg)}50%{transform:translateY(0) rotate(0)}}
.mascot.mood-run .footL{animation:footA .28s linear 2 both}
.mascot.mood-run .footR{animation:footB .28s linear 2 both}
@keyframes footA{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-10px)}}
@keyframes footB{0%,100%{transform:translate(0,0)}50%{transform:translate(-9px,-10px)}}
.mascot.mood-run .armL{animation:armA .28s ease-in-out 2 both}
.mascot.mood-run .armR{animation:armB .28s ease-in-out 2 both}
@keyframes armA{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(30deg)}}
@keyframes armB{0%,100%{transform:rotate(40deg)}50%{transform:rotate(-55deg)}}
.mascot.mood-run .shadow{animation:none}
.mascot.mood-dance .body{animation:dsway .8s ease-in-out infinite}
@keyframes dsway{0%,100%{transform:translateX(-7px) rotate(-7deg) scale(1.03,.97)}50%{transform:translateX(7px) rotate(7deg) scale(.98,1.03)}}
.mascot.mood-dance .armR{animation:dR .8s ease-in-out infinite}
.mascot.mood-dance .armL{animation:dL .8s ease-in-out infinite}
@keyframes dR{0%,100%{transform:rotate(-90deg)}50%{transform:rotate(-25deg)}}
@keyframes dL{0%,100%{transform:rotate(25deg)}50%{transform:rotate(90deg)}}
.mascot.mood-dance .footL{animation:tapA .8s ease-in-out infinite}
.mascot.mood-dance .footR{animation:tapA .8s ease-in-out infinite reverse}
@keyframes tapA{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mascot.mood-dance .confetti{opacity:1}
.mascot.mood-greet .body{animation:greetb .9s cubic-bezier(.3,1.2,.5,1) 1 both}
@keyframes greetb{0%{transform:translateY(0) scale(1.06,.94)}35%{transform:translateY(-14px) scale(.97,1.04)}65%{transform:translateY(0) scale(1.05,.95)}100%{transform:translateY(0) scale(1,1)}}
.mascot.mood-greet .armR{animation:greetArm 1.3s ease-in-out 1 both}
@keyframes greetArm{0%,100%{transform:rotate(40deg)}20%{transform:rotate(-70deg)}40%{transform:rotate(-95deg)}60%{transform:rotate(-60deg)}80%{transform:rotate(-95deg)}90%{transform:rotate(-30deg)}}
.mascot.mood-greet .confetti{opacity:1}
.mascot .confetti{transition:opacity .7s ease}
.mascot.mood-hello .armR{animation:waveHi 4.5s ease-in-out infinite}
@keyframes waveHi{0%,40%,100%{transform:rotate(40deg)}6%{transform:rotate(-60deg)}13%{transform:rotate(-88deg)}20%{transform:rotate(-52deg)}27%{transform:rotate(-88deg)}33%{transform:rotate(-55deg)}}
@keyframes up{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.rvu{animation:up .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes coin{0%,55%,100%{transform:rotateY(0)}80%{transform:rotateY(360deg)}}
@keyframes grow{from{height:0}to{height:20px}}
@keyframes grow2{from{height:0}to{height:30px}}
@keyframes cardL{from{opacity:0;transform:translateX(-52px) scale(.88)}to{opacity:1;transform:none}}
@keyframes cardR{from{opacity:0;transform:translateX(52px) scale(.88)}to{opacity:1;transform:none}}
@keyframes flashBurst{0%{opacity:0;transform:scale(.55)}16%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(225,57,126,.45)}100%{box-shadow:0 0 0 24px rgba(225,57,126,0)}}
.tw{animation:tw 1.6s ease-in-out infinite}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fin{to{opacity:1}}
*{font-family:'Corporative Sans Rounded',system-ui,sans-serif !important}
.mascot.mood-think .m-smile{opacity:1 !important}
.mascot.mood-think .m-flat{opacity:0 !important}
.mascot.mood-think .brows{opacity:0 !important}
.mascot.mood-think .pupils{transform:translate(3px,-4px) !important}
.rvr{animation:rvr .45s cubic-bezier(.05,.7,.1,1) both}
@keyframes rvr{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
.mascot .clip,.mascot .pencil,.mascot .spark{opacity:0;transition:opacity .6s;transform-box:fill-box}
.mascot .spark{transform-origin:50% 50%}
.mascot.mood-write .clip,.mascot.mood-write .pencil,.mascot.mood-write .spark{opacity:1}
.mascot.mood-write .armR{transform:rotate(-55deg)}
.mascot.mood-write .armL{transform:rotate(45deg)}
.mascot.mood-write .eyes{animation:none;transform:scaleY(.4)}
.mascot.mood-write .pencil{transform-origin:50% 100%;animation:scr .9s ease-in-out infinite}
.mascot.mood-write .spark{animation:tw 1.6s ease-in-out infinite}
@keyframes scr{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.mascot .armR,.mascot .armL{transition:transform .7s ease}
@keyframes tw{0%,100%{transform:scale(.5);opacity:.4}50%{transform:scale(1.15);opacity:1}}
.rv{animation:rv .4s ease-out both}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes snow{0%{transform:translateY(-10px);opacity:0}15%{opacity:.9}100%{transform:translateY(190px);opacity:0}}
.snow circle{animation:snow 5s linear infinite}
button{font-family:inherit}
:root{--tb-navy:#2e3a41;--tb-teal:#008cab;--tb-green:#72b14a;--tb-pink:#e1397e;--tb-focus:#008cab;--tb-ease:cubic-bezier(.2,0,0,1);--tb-spring:cubic-bezier(.3,1.4,.5,1)}
button,input{-webkit-tap-highlight-color:transparent}
button[style*="cursor:pointer"],button[style*="cursor: pointer"]{transition:transform .18s var(--tb-ease),box-shadow .18s var(--tb-ease),opacity .25s var(--tb-ease),background-color .18s var(--tb-ease),border-color .18s var(--tb-ease)}
@media (hover:hover){
button[style*="cursor:pointer"]:not(.pk-t):not([style*="translate("]):not([style*="background:none"]):not([style*="background: none"]):hover,button[style*="cursor: pointer"]:not(.pk-t):not([style*="translate("]):not([style*="background:none"]):not([style*="background: none"]):hover{transform:translateY(-2px) !important;box-shadow:0 8px 18px rgba(46,58,65,.16) !important}
button[style*="background:none"]:hover,button[style*="background: none"]:hover{opacity:.78}
}
button[style*="cursor:pointer"]:not(.pk-t):not([style*="translate("]):active,button[style*="cursor: pointer"]:not(.pk-t):not([style*="translate("]):active{transform:scale(.985) !important;box-shadow:none !important}
button:focus-visible,input:focus-visible{outline:3px solid var(--tb-focus);outline-offset:3px;box-shadow:0 0 0 8px rgba(0,140,171,.2) !important}
div[style*="cursor:pointer"],div[style*="cursor: pointer"]{transition:transform .18s var(--tb-ease),box-shadow .18s var(--tb-ease),opacity .25s var(--tb-ease),border-color .18s var(--tb-ease)}
@media (hover:hover){div[style*="cursor:pointer"]:hover,div[style*="cursor: pointer"]:hover{transform:translateY(-2px) !important;box-shadow:0 8px 18px rgba(46,58,65,.16) !important}}
@keyframes tickA{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tickB{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes haloPulse{0%{transform:scale(1,1);opacity:0.55}65%{transform:scale(1.1,1.34);opacity:0}100%{transform:scale(1.1,1.34);opacity:0}}
@keyframes selPop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.pk-t{transition:transform .15s cubic-bezier(.2,0,0,1)}.pk-t:hover{transform:scale(1.05);box-shadow:0 6px 14px rgba(44,52,56,0.2);z-index:1;position:relative}.pk-t:active{transform:scale(.98)}.pk-t:focus-visible{outline:3px solid #008cab;outline-offset:2px}
input{font-family:inherit;outline:none}