/* Sato – Guide-Figur für bitcoin-grundlagen.ch */
.sato{position:fixed;bottom:16px;right:16px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none;--lx:0;--ly:0}
.sato[data-side=left]{right:auto;left:16px;align-items:flex-start}
.sato[data-side=left] .sato-svg{transform:scaleX(-1)}
.sato-bubble{pointer-events:auto;width:min(300px,calc(100vw - 32px));background:var(--bg-card,#fff);color:var(--text-primary,#0F172A);border:1px solid var(--border-light,rgba(15,23,42,.08));border-radius:20px;padding:12px 14px 12px 16px;box-shadow:0 16px 40px -12px rgba(15,23,42,.35);display:flex;flex-direction:column;gap:6px;transform-origin:bottom right;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.25)}
.sato[data-side=left] .sato-bubble{transform-origin:bottom left}
.sato:not(.is-open) .sato-bubble{opacity:0;transform:translateY(10px) scale(.94);pointer-events:none}
.sato-head{display:flex;justify-content:space-between;align-items:center}
.sato-label{font:11px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--text-muted,#64748B);text-transform:uppercase}
.sato-close{width:44px;height:44px;margin:-12px -12px -12px 0;border:0;background:none;font-size:20px;color:var(--text-muted,#64748B);cursor:pointer}
.sato-text{display:grid;font-size:15px;line-height:1.5}
.sato-text>*{grid-area:1/1}.sato-ghost{visibility:hidden}
.sato-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sato-actions{display:flex;gap:8px;margin-top:4px}
.sato-actions button{min-height:36px;padding:0 14px;border-radius:99px;font:600 13px/1 inherit;cursor:pointer;border:1px solid var(--border-light,rgba(15,23,42,.15));background:none;color:inherit}
.sato-actions .sato-next{background:var(--text-primary,#0F172A);color:var(--bg-card,#fff);border:0}
.sato-fig{pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.sato-fig:focus-visible,.sato-actions button:focus-visible,.sato-close:focus-visible{outline:2px solid #F7931A;outline-offset:3px;border-radius:12px}
.sato-svg{width:84px;height:auto;overflow:visible}
@media(min-width:1024px){.sato-svg{width:104px}}
.sato-highlight{box-shadow:0 0 0 3px #F7931A,0 0 0 10px rgba(247,147,26,.16)!important;transition:box-shadow .4s;border-radius:inherit}

/* Teile je Zustand */
.sato .s-pt,.sato .s-wv,.sato .s-eh,.sato .s-mt,.sato .s-mh,.sato .s-mc,.sato .s-sp,.sato .s-q{display:none}
.sato[data-state=point] .s-pt{display:inline}.sato[data-state=point] .s-rl{display:none}
.sato[data-state=wave] .s-wv{display:inline}.sato[data-state=wave] .s-rr{display:none}
.sato[data-state=happy] .s-eh,.sato[data-state=happy] .s-mh,.sato[data-state=happy] .s-sp{display:inline}
.sato[data-state=happy] .s-eye,.sato[data-state=happy] .s-ms{display:none}
.sato[data-state=confused] .s-mc,.sato[data-state=confused] .s-q{display:inline}.sato[data-state=confused] .s-ms{display:none}
.sato[data-talking]:not([data-state=happy]) .s-mt{display:inline}
.sato[data-talking]:not([data-state=happy]) .s-ms,.sato[data-talking] .s-mc{display:none}
.sato .s-pup{transform:translate(calc(var(--lx)*3px),calc(var(--ly)*2.5px));transition:transform .18s ease-out}
.sato[data-state=point] .s-pup{transform:translate(-3px,-1px)}
.sato[data-state=confused] .s-eye-l{transform:scale(.72);transform-box:fill-box;transform-origin:center}

/* Animationen */
.sato .s-body{transform-box:fill-box;transform-origin:50% 100%;animation:sato-bob 3.2s ease-in-out infinite}
.sato[data-talking] .s-body{animation-duration:1.2s}
.sato[data-state=point] .s-body{animation:sato-lean 1.8s ease-in-out infinite}
.sato[data-state=happy] .s-body{animation:sato-jump .8s ease-in-out infinite}
.sato[data-state=confused] .s-body{animation:sato-tilt 2.6s ease-in-out infinite}
.sato[data-walk] .s-body{animation:sato-hop .36s ease-in-out infinite}
.sato .s-shadow{transform-box:fill-box;transform-origin:center;animation:sato-sh 3.2s ease-in-out infinite}
.sato .s-eyes{transform-box:fill-box;transform-origin:center;animation:sato-blink 4.6s linear infinite}
.sato .s-mt{transform-box:fill-box;transform-origin:center;animation:sato-mouth .22s ease-in-out infinite alternate}
.sato .s-rl,.sato .s-rr{transform-box:view-box;animation:sato-sway 3.2s ease-in-out infinite}
.sato .s-rl{transform-origin:30px 58px}.sato .s-rr{transform-origin:70px 58px;animation-name:sato-sway-r}
.sato .s-pt{animation:sato-point 1.2s ease-in-out infinite}
.sato .s-wv{transform-box:view-box;transform-origin:70px 58px;animation:sato-wave .5s ease-in-out infinite alternate}
.sato[data-state=wave] .s-hat{transform-box:view-box;transform-origin:30px 16px;animation:sato-hattip 1.4s ease-in-out infinite}
.sato[data-state=happy] .s-hat{transform-box:fill-box;transform-origin:center bottom;animation:sato-hathop .8s ease-in-out infinite}
.sato .s-sp circle{transform-box:fill-box;transform-origin:center;animation:sato-spark .8s ease-in-out infinite}
.sato .s-sp circle:nth-child(2){animation-delay:.25s}.sato .s-sp circle:nth-child(3){animation-delay:.5s}
.sato .s-q{transform-box:fill-box;transform-origin:center;animation:sato-q 1.6s ease-in-out infinite}
@keyframes sato-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sato-lean{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-6deg) translateY(-2px)}}
@keyframes sato-jump{0%,100%{transform:translateY(0) scale(1.06,.94)}15%{transform:none}45%{transform:translateY(-14px) scale(.96,1.05)}75%{transform:none}}
@keyframes sato-tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-4deg)}}
@keyframes sato-hop{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes sato-sh{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
@keyframes sato-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes sato-mouth{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
@keyframes sato-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes sato-sway-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes sato-point{0%,100%{transform:none}50%{transform:translate(-3px,-2px)}}
@keyframes sato-wave{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}
@keyframes sato-hattip{0%,20%,85%,100%{transform:none}45%,65%{transform:translate(-2px,-12px) rotate(-16deg)}}
@keyframes sato-hathop{0%,15%,75%,100%{transform:none}45%{transform:translateY(-10px) rotate(8deg)}}
@keyframes sato-spark{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes sato-q{0%,100%{transform:rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.sato *{animation:none!important;transition:none!important}}
@media print{.sato{display:none}}