/* Only the Kraft prototype changes. Text occupies its own reserved layout. */
.training-card[data-kraft-thought] .card-art-mascot{flex-direction:column;gap:8px;align-self:start}
.training-card[data-kraft-thought] .mascot-text-slot{display:none}
.training-card[data-kraft-thought] .sport-mascot{flex:none}
.training-card[data-kraft-thought] .kraft-thought{width:100%;max-width:390px;flex:none;margin:0;user-select:text;visibility:hidden}
.training-card[data-kraft-thought].kraft-speaking .kraft-thought{visibility:visible}
.training-card[data-kraft-thought] .kraft-bubble{position:relative;border:1px solid #bddcff38;border-radius:17px;padding:15px 18px;background:#c6def20d;box-shadow:inset 0 1px 0 #eef7ff18;color:#edf0f5;font-size:18px;font-weight:400;line-height:1.45;letter-spacing:-.2px;text-align:left;opacity:0;transition:opacity .35s ease}
.training-card[data-kraft-thought] .kraft-bubble::before{content:'';position:absolute;top:-7px;left:calc(50% - 7px);width:12px;height:12px;background:#2a3b50;border-left:1px solid #bddcff38;border-top:1px solid #bddcff38;transform:rotate(45deg)}
.training-card[data-kraft-thought].kraft-speaking .kraft-bubble{opacity:1}
.training-card[data-kraft-thought] .kraft-context{font-size:14px;line-height:1.6;color:#b8c8da;text-align:left;margin:12px 2px 0;opacity:0;transition:opacity .4s ease}
.training-card[data-kraft-thought].kraft-explained .kraft-context{opacity:1}
@media(min-width:901px){.training-list .training-card[data-kraft-thought]{top:min(35px,calc(100svh - var(--kraft-prototype-height,650px) - 24px))}}
@media(max-width:600px){.training-card[data-kraft-thought] .card-art-mascot{gap:4px}.training-card[data-kraft-thought] .kraft-bubble{font-size:17px;padding:14px 16px}.training-card[data-kraft-thought] .kraft-context{font-size:14px}}
@media(prefers-reduced-motion:reduce){.training-card[data-kraft-thought] .kraft-bubble,.training-card[data-kraft-thought] .kraft-context{transition:none}}
.paused .training-card[data-kraft-thought] .kraft-bubble,.paused .training-card[data-kraft-thought] .kraft-context{transition:none}
/* One comic beat, on the existing SVG. No layout properties are animated. */
[data-kraft-thought] .mascot-whole,[data-kraft-thought] .mascot-face{transform-box:view-box;transform-origin:228px 405px}
[data-kraft-thought] .mascot-face{transform-origin:228px 210px}
[data-kraft-thought][data-kraft-phase="lift"] .mascot-whole{animation:kraft-comic-balance 4.8s both}
[data-kraft-thought][data-kraft-phase="lift"] .mascot-face{animation:kraft-comic-reproach 4.8s both}
@keyframes kraft-comic-balance{0%{transform:none}15%,28%{transform:translateY(-4px) rotate(-2deg)}33%{transform:translate(-8px,-3px) rotate(-5deg)}39%{transform:translate(-23px,-9px) rotate(-15deg);animation-timing-function:cubic-bezier(.2,.9,.25,1)}48%{transform:translate(9px,2px) rotate(6deg)}55%{transform:translate(-3px,0) rotate(-2deg)}62%,100%{transform:none}}
@keyframes kraft-comic-reproach{0%,53%{transform:none}62%,76%{transform:translate(5px,4px) rotate(13deg)}84%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){[data-kraft-thought] .mascot-whole,[data-kraft-thought] .mascot-face{animation:none!important}}
.paused [data-kraft-thought] .mascot-whole,.paused [data-kraft-thought] .mascot-face{animation:none!important}