/* Noma, the guide (noma.jsx, noma-sprite.jsx): a small sun-yellow orb built from spans. */
.noma{--lx:0;--ly:0;--pa:0deg;position:fixed;left:0;top:0;z-index:13000;width:72px;height:84px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.noma:active{cursor:grabbing}
.noma-art{width:72px;height:84px;outline:none;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.noma.is-hero .noma-art{transform:scale(1.7)}
.noma-art:focus-visible{filter:drop-shadow(0 0 3px #fff)}

.nma{position:relative;display:block;width:72px;height:84px}
.nma span,.nma i,.nma b{position:absolute;display:block;font-style:normal}
.nma-glow{left:36px;top:50px;width:118px;height:118px;margin:-59px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,226,92,.7),rgba(255,170,40,.22) 45%,transparent 70%);animation:nma-glow 2.4s ease-in-out infinite}
.nma.is-talking .nma-glow{animation-duration:.9s}
@keyframes nma-glow{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.nma-float{inset:0;animation:nma-bob 1.7s ease-in-out infinite}
@keyframes nma-bob{0%,100%{transform:translateY(1px)}50%{transform:translateY(-5px)}}
.nma-gest,.nma-squash{inset:0;transform-origin:36px 52px}

/* Gestures: one at a time, re-keyed so each plays from the start. */
.g-hop{animation:g-hop .62s cubic-bezier(.3,.7,.4,1)}
@keyframes g-hop{0%{transform:scale(1.12,.86)}35%{transform:translateY(-13px) scale(.92,1.1)}70%{transform:translateY(0) scale(1.1,.9)}100%{transform:none}}
.g-tilt{animation:g-tilt .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes g-tilt{0%{transform:none}30%{transform:rotate(-15deg) translateX(-3px)}65%{transform:rotate(9deg) translateX(2px)}100%{transform:none}}
.g-nod{animation:g-nod .7s ease-in-out}
@keyframes g-nod{0%,100%{transform:none}25%,75%{transform:translateY(4px) rotate(3deg) scale(1.05,.95)}50%{transform:translateY(-2px)}}
.g-wiggle{animation:g-wiggle .6s ease-in-out}
@keyframes g-wiggle{0%,100%{transform:none}20%{transform:rotate(9deg)}40%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}}
.g-bounce{animation:g-bounce .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes g-bounce{0%{transform:scale(1.18,.82)}45%{transform:scale(.9,1.12)}100%{transform:none}}
.g-sway{animation:g-sway 1s ease-in-out}
@keyframes g-sway{0%,100%{transform:none}30%{transform:translateX(-6px) rotate(-7deg)}70%{transform:translateX(6px) rotate(7deg)}}
.g-spin{animation:g-spin .8s cubic-bezier(.4,0,.2,1)}
@keyframes g-spin{0%{transform:none}20%{transform:translateY(-6px) scale(.95)}100%{transform:rotate(360deg)}}
.g-look .nma-face{animation:g-look 1.1s ease-in-out}
@keyframes g-look{0%,100%{translate:0}30%{translate:-5px -1px}65%{translate:5px -2px}}

/* Wings: petals that flutter fast (faster when she talks). */
.nma-wing{top:28px;width:24px;height:30px;border-radius:85% 15% 85% 15%;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,240,160,.55) 55%,rgba(255,200,80,.1));box-shadow:0 0 10px rgba(255,236,150,.7);animation:nma-flap .2s ease-in-out infinite alternate}
.nma-wing.is-l{left:0;transform-origin:100% 100%}
.nma-wing.is-r{right:0;transform-origin:0 100%;border-radius:15% 85% 15% 85%;animation-delay:-.1s;animation-name:nma-flap-r}
.nma.is-talking .nma-wing{animation-duration:.13s}
@keyframes nma-flap{from{transform:rotate(-26deg) scaleY(.8)}to{transform:rotate(8deg) scaleY(1.05)}}
@keyframes nma-flap-r{from{transform:rotate(26deg) scaleY(.8)}to{transform:rotate(-8deg) scaleY(1.05)}}

/* Sprout: a stem, two leaves and a glowing bud. */
.nma-sprout{left:26px;top:3px;width:20px;height:26px;transform-origin:50% 100%;animation:nma-sprout 2.2s ease-in-out infinite}
.nma.is-talking .nma-sprout{animation-duration:.9s}
@keyframes nma-sprout{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(10deg)}}
.nma-stem{left:9px;top:7px;width:3px;height:19px;border-radius:2px;background:linear-gradient(#a5e06a,#5a9e2c)}
.nma-leaf{top:10px;width:12px;height:7px;background:linear-gradient(135deg,#c4f57e,#5fae32);box-shadow:inset 0 -1px 0 #3f7d1d}
.nma-leaf.is-l{left:-2px;border-radius:0 100% 0 100%;transform-origin:100% 100%;animation:nma-leaf 1.8s ease-in-out infinite}
.nma-leaf.is-r{right:-2px;top:6px;border-radius:100% 0 100% 0;transform-origin:0 100%;animation:nma-leaf 1.8s ease-in-out infinite reverse}
@keyframes nma-leaf{0%,100%{rotate:-8deg}50%{rotate:12deg}}
.nma-bud{left:6px;top:0;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#fff3a6 45%,#ffbf2e);box-shadow:0 0 8px #ffe066,0 0 16px #ffb30088;animation:nma-bud 1.4s ease-in-out infinite}
@keyframes nma-bud{0%,100%{transform:scale(1)}50%{transform:scale(1.3);box-shadow:0 0 12px #fff2a0,0 0 24px #ffb300}}

/* Body */
.nma-body{left:11px;top:26px;width:50px;height:50px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#fffef2 0,#fff4a8 13%,#ffdc4f 40%,#ffb224 74%,#ec7d10 100%);
  box-shadow:0 0 18px rgba(255,205,60,.75),0 0 40px rgba(255,160,30,.35),inset -6px -8px 14px rgba(190,80,0,.45),inset 4px 5px 10px rgba(255,255,255,.5)}
.nma-core{inset:-25%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.4),transparent 22%,rgba(255,150,40,.35) 45%,transparent 62%,rgba(255,250,200,.45) 82%,transparent);mix-blend-mode:screen;opacity:.7;animation:nma-spin 6s linear infinite}
.nma.is-talking .nma-core{animation-duration:2.5s}
.nma-shine{left:9px;top:7px;width:14px;height:8px;border-radius:50%;background:rgba(255,255,255,.9);filter:blur(1px);transform:rotate(-30deg)}
.nma-face{left:50%;top:50%;width:34px;height:24px;margin:-7px 0 0 -17px;transform:translate(calc(var(--lx) * 5px),calc(var(--ly) * 4px));transition:transform .3s ease-out}
.nma-eye{top:0;width:8px;height:11px;border-radius:50%;background:#3a1a00;animation:nma-blink 3.8s infinite;transition:all .18s}
.nma-eye.is-l{left:5px}.nma-eye.is-r{right:5px;animation-delay:.06s}
.nma-eye b{left:1.5px;top:1.5px;width:3.4px;height:3.4px;border-radius:50%;background:#fff;transform:translate(calc(var(--lx) * 1.2px),calc(var(--ly) * 1.2px))}
.nma-eye b::after{content:"";position:absolute;left:3.5px;top:4.5px;width:1.6px;height:1.6px;border-radius:50%;background:#fff}
@keyframes nma-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.nma-brow{top:-4px;width:8px;height:2.4px;border-radius:2px;background:#3a1a00;opacity:0;transition:all .2s}
.nma-brow.is-l{left:5px}.nma-brow.is-r{right:5px}
.nma-blush{top:11px;width:7px;height:4px;border-radius:50%;background:#ff6f9c;opacity:.55;filter:blur(.8px);transition:opacity .3s}
.nma-blush.is-l{left:0}.nma-blush.is-r{right:0}
.nma-mouth{left:50%;top:13px;width:8px;height:4px;margin-left:-4px;border-radius:0 0 8px 8px;background:#6b2600;transition:all .18s}
.nma.is-talking .nma-mouth{animation:nma-talk .16s ease-in-out infinite alternate}
@keyframes nma-talk{from{height:2px;width:7px;border-radius:0 0 6px 6px}to{height:6px;width:8px;border-radius:3px 3px 8px 8px}}

/* Moods */
.nma.is-happy .nma-eye,.nma.is-pet .nma-eye{height:6px;margin-top:3px;background:none;border:2.4px solid #3a1a00;border-bottom:0;border-radius:8px 8px 0 0;animation:none}
.nma.is-happy .nma-eye b,.nma.is-pet .nma-eye b{display:none}
.nma.is-happy .nma-mouth,.nma.is-pet .nma-mouth{width:11px;height:6px;margin-left:-5.5px;border-radius:0 0 10px 10px}
.nma.is-happy .nma-blush,.nma.is-pet .nma-blush{opacity:.9}
.nma.is-happy .nma-float{animation:nma-cheer .5s ease-in-out infinite}
@keyframes nma-cheer{0%,100%{transform:translateY(0) scale(1.04,.96)}50%{transform:translateY(-9px) scale(.97,1.03)}}
.nma.is-happy .nma-arm.is-l{animation:nma-cheer-l .25s ease-in-out infinite alternate}
.nma.is-happy .nma-arm.is-r{animation:nma-cheer-r .25s ease-in-out infinite alternate}
@keyframes nma-cheer-l{from{transform:rotate(200deg)}to{transform:rotate(235deg)}}
@keyframes nma-cheer-r{from{transform:rotate(-20deg)}to{transform:rotate(-55deg)}}
.nma.is-wow .nma-eye{width:10px;height:13px;margin-top:-1px}
.nma.is-wow .nma-brow{opacity:1;top:-6px}
.nma.is-wow .nma-mouth{width:7px;height:8px;margin-left:-3.5px;border-radius:50%}
.nma.is-poke .nma-eye{height:3px;margin-top:4px;border-radius:2px;animation:none}
.nma.is-poke .nma-eye.is-l{transform:rotate(18deg)}.nma.is-poke .nma-eye.is-r{transform:rotate(-18deg)}
.nma.is-poke .nma-squash{animation:nma-squish .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes nma-squish{0%{transform:scale(1.25,.75)}100%{transform:none}}
.nma.is-sad .nma-mouth{border-radius:8px 8px 0 0;top:15px;height:3px}
.nma.is-sad .nma-brow{opacity:1}.nma.is-sad .nma-brow.is-l{transform:rotate(-20deg)}.nma.is-sad .nma-brow.is-r{transform:rotate(20deg)}
.nma.is-sad .nma-float{animation-duration:3s}.nma.is-sad .nma-wing{animation-duration:.5s}
.nma.is-pet .nma-squash{animation:nma-purr .5s ease-in-out infinite}
@keyframes nma-purr{0%,100%{transform:scale(1.06,.94)}50%{transform:scale(.97,1.03) rotate(3deg)}}

/* Hands: float around the body on arms that rotate about its center; they wave
   while she talks and one points at the highlighted control. */
.nma-arm{left:36px;top:52px;width:0;height:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.nma-arm i{left:25px;top:-5px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe0,#ffd84a 50%,#f29a18);box-shadow:0 0 6px rgba(255,200,60,.8)}
.nma-arm.is-l{transform:rotate(150deg);animation:nma-arm-l 2.6s ease-in-out infinite}
.nma-arm.is-r{transform:rotate(30deg);animation:nma-arm-r 2.6s ease-in-out infinite}
@keyframes nma-arm-l{0%,100%{transform:rotate(145deg)}50%{transform:rotate(160deg)}}
@keyframes nma-arm-r{0%,100%{transform:rotate(35deg)}50%{transform:rotate(20deg)}}
.nma.is-talking .nma-arm.is-l{animation:nma-talk-l 1.3s ease-in-out infinite}
.nma.is-talking .nma-arm.is-r{animation:nma-talk-r 1.1s ease-in-out infinite}
@keyframes nma-talk-l{0%,100%{transform:rotate(150deg)}30%{transform:rotate(205deg)}60%{transform:rotate(170deg)}}
@keyframes nma-talk-r{0%,100%{transform:rotate(30deg)}40%{transform:rotate(-30deg)}70%{transform:rotate(5deg)}}
.noma[data-point=l] .nma-arm.is-l,.noma[data-point=r] .nma-arm.is-r{animation:none;transform:rotate(var(--pa))}
.noma[data-point] .nma-arm i{transition:left .3s}
.noma[data-point=l] .nma-arm.is-l i,.noma[data-point=r] .nma-arm.is-r i{animation:nma-poke .7s ease-in-out infinite}
@keyframes nma-poke{0%,100%{left:26px}50%{left:33px}}

/* Fireflies orbiting her, sparkles on each new line, hearts when petted. */
.nma-orbit{left:36px;top:50px;width:0;height:0;animation:nma-spin 3.4s linear infinite;pointer-events:none}
.nma-orbit i{width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff6c4;box-shadow:0 0 6px #ffd84d;animation:nma-mote 1.2s ease-in-out infinite alternate}
.nma-orbit i:nth-child(1){transform:translate(38px,0)}
.nma-orbit i:nth-child(2){transform:translate(-22px,30px);width:3px;height:3px;animation-delay:-.4s}
.nma-orbit i:nth-child(3){transform:translate(-20px,-33px);animation-delay:-.8s}
@keyframes nma-mote{from{opacity:.25;scale:.6}to{opacity:1;scale:1.2}}
@keyframes nma-spin{to{transform:rotate(360deg)}}
.nma-burst{left:36px;top:50px;width:0;height:0;pointer-events:none}
.nma-burst b{width:9px;height:9px;margin:-4.5px;background:#fff6c0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 3px #ffc400);opacity:0;animation:nma-burst .75s ease-out forwards}
.nma-burst b:nth-child(1){--a:-90deg}.nma-burst b:nth-child(2){--a:-30deg}.nma-burst b:nth-child(3){--a:30deg}.nma-burst b:nth-child(4){--a:90deg}.nma-burst b:nth-child(5){--a:150deg}.nma-burst b:nth-child(6){--a:210deg}
@keyframes nma-burst{0%{opacity:1;transform:rotate(var(--a)) translateX(18px) scale(.4)}100%{opacity:0;transform:rotate(var(--a)) translateX(46px) scale(1.1) rotate(90deg)}}
.nma-hearts{left:36px;top:20px;width:0;height:0;pointer-events:none}
.nma-hearts b{width:11px;height:11px;background:#ff5d8f;clip-path:path("M5.5 10 C-3.5 4 1.5 -2 5.5 2.6 C9.5 -2 14.5 4 5.5 10Z");opacity:0;animation:nma-heart 1.2s ease-out infinite}
.nma-hearts b:nth-child(1){left:-26px}.nma-hearts b:nth-child(2){left:-5px;animation-delay:-.4s}.nma-hearts b:nth-child(3){left:16px;animation-delay:-.8s}
@keyframes nma-heart{from{opacity:1;transform:translateY(6px) scale(.6)}to{opacity:0;transform:translateY(-20px) scale(1.15)}}

.noma-veil{position:fixed;inset:0;z-index:12999;background:#04060cc4;backdrop-filter:blur(2px);animation:noma-fade .3s ease-out}
@keyframes noma-fade{from{opacity:0}}
.noma-block{position:fixed;z-index:12999;background:transparent}
.noma-bubble.is-hero{text-align:center;padding-top:16px}
.noma-bubble.is-hero p{font-size:16px}
.noma-bubble.is-hero footer{justify-content:center}
.noma-react{position:fixed;left:0;top:0;z-index:13003;max-width:min(260px,calc(100vw - 16px));width:max-content;padding:7px 13px;border-radius:14px;background:#fff4b8;color:#2a1600;border:2px solid #ffc93a;font:700 14px/1.35 var(--font-ui,system-ui);text-transform:none;letter-spacing:0;text-align:center;white-space:normal;box-shadow:0 6px 22px #000a,0 0 0 4px #0004;pointer-events:none}
.noma-react::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;margin-left:-5px;background:#fff4b8;border:2px solid #ffc93a;border-top:0;border-left:0;transform:rotate(45deg)}
.noma-react{animation:noma-pill .25s cubic-bezier(.3,1.6,.5,1)}
.noma-react.is-below::after{bottom:auto;top:-7px;transform:rotate(225deg)}
@keyframes noma-pill{from{opacity:0;scale:.75}}
.noma-bubble{border-color:#ffd84d88;text-transform:none}.noma-bubble p,.noma-bubble button{text-transform:none}
.noma-bubble::before{border-color:#ffd84d88}
.noma-bubble.is-free::before{display:none}
.noma-name{display:block;margin-bottom:3px;font:800 11px var(--font-ui,system-ui);letter-spacing:.08em;text-transform:uppercase;color:#f5b400}
.noma-bubble .coach-next{background:#ffd84d;color:#3d2100}
.noma-progress{flex:1;height:4px;border-radius:2px;background:var(--outline);overflow:hidden;margin-right:4px}
.noma-progress i{display:block;height:100%;background:#ffd84d;border-radius:2px;transition:width .4s}
.noma-bubble footer{justify-content:flex-end}
.coach-hole.is-soft{box-shadow:0 0 0 2px #ffd84d,0 0 18px #ffd84d88}
.coach-hole{box-shadow:0 0 0 2px #ffd84d,0 0 0 200vmax #04060cb0}
.coach-hole.is-action::after{box-shadow:0 0 0 2px #ffd84d}
@media (max-width:640px){.noma-bubble p{font-size:15px}.noma-bubble .coach-next{padding:9px 18px;font-size:14px}.noma-bubble .coach-skip{padding:9px 8px}}
@media (prefers-reduced-motion:reduce){.noma-react,.nma,.nma *{animation:none!important}}