
:root{--academy-mascot:url("media/c27d171bc0ac1cda3b3f3551d55294fd4c2199b483170c1670132a3f854806e1.png")}
/* Contextual guide: independent of exercise data and original controls. */
body{font-size:18px}body.large{font-size:20px}
.academy-guide{max-width:1504px;margin:24px auto 0;padding:22px 26px;border:1px solid #bad6df;border-radius:20px;background:linear-gradient(115deg,#ecf7fa,#fffdf3);color:#07334f;display:grid;grid-template-columns:152px minmax(0,1fr) auto;gap:24px;align-items:center;box-shadow:0 8px 25px #07334f0b}
.academy-guide-portrait{width:152px;height:152px;background-image:var(--academy-mascot);background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 7px 7px #07334f16)}
.academy-guide-kicker{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#087d8d;margin:0 0 5px!important}
.academy-guide h2{font-size:1.35rem;line-height:1.25;margin:0 0 9px;letter-spacing:-.02em}
.academy-guide-steps{margin:0;display:grid;gap:8px;max-width:1020px}.academy-guide-steps>div{display:grid;grid-template-columns:155px minmax(0,1fr);gap:12px;align-items:start}.academy-guide-steps dt{font-size:.82rem;font-weight:700;line-height:1.5;color:#087d8d}.academy-guide-steps dd{font-size:1rem;line-height:1.5;margin:0}.academy-guide-steps .academy-guide-action dd{font-weight:600;color:#07334f}
.academy-guide-why{max-width:960px;font-size:.94rem;margin-top:10px;color:#325872}
.academy-guide-why summary{cursor:pointer;font-weight:600}.academy-guide-why p{margin:8px 0 0}
.academy-guide-tools{display:flex;flex-direction:column;gap:9px;align-items:stretch;min-width:208px}
.academy-guide-tools button{font-size:.89rem;padding:10px 14px;white-space:normal;border-color:#a9cbd5;background:#fff;color:#07334f;line-height:1.4}
.academy-guide-tools .academy-guide-enable{background:#07334f;color:#fff;border-color:#07334f}.academy-guide-playback{display:flex;gap:6px}.academy-guide-playback button{flex:1;font-size:.78rem;padding:8px 10px}
.academy-guide-tools button:disabled{opacity:.45;cursor:default}
.academy-guide-auto{display:flex;align-items:flex-start;gap:7px;font-size:.76rem;color:#416579;line-height:1.4;max-width:220px}
.academy-guide-auto input{margin:3px 0 0;accent-color:#087d8d}
.academy-guide-status{font-size:.76rem;line-height:1.4;color:#416579;margin:0;max-width:220px;min-height:1.4em}
.academy-guide.is-collapsed{grid-template-columns:64px minmax(0,1fr) auto;padding:10px 20px;gap:18px}
.academy-guide.is-collapsed .academy-guide-portrait{width:64px;height:64px}
.academy-guide.is-collapsed .academy-guide-steps,.academy-guide.is-collapsed .academy-guide-why,.academy-guide.is-collapsed .academy-guide-playback,.academy-guide.is-collapsed .academy-guide-hint,.academy-guide.is-collapsed .academy-guide-status{display:none}
.academy-guide.is-collapsed h2{margin-bottom:0;font-size:1.1rem}
.academy-guide.is-collapsed .academy-guide-tools{min-width:0}
.coach h2{font-size:1.3rem}.coach p{font-size:1rem}.coach details{font-size:.94rem}
.small,.content .intro,.cfg-task p,.cfg-sidebar p,.pro-disclaimer{font-size:1rem}
.field small,.cfg-field small{font-size:.9rem;line-height:1.55}
input,select,textarea{font-size:1rem}.tabs button{font-size:.9rem}
@media(max-width:1600px){.academy-guide{margin-left:3vw;margin-right:3vw}}
@media(max-width:1050px){.academy-guide{grid-template-columns:128px minmax(0,1fr);gap:18px}.academy-guide-portrait{width:128px;height:128px}.academy-guide-tools{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}.academy-guide-auto{max-width:230px}.academy-guide.is-collapsed .academy-guide-tools{grid-column:auto}}
@media(max-width:650px){.academy-guide{margin:16px 17px 0;padding:16px;grid-template-columns:90px minmax(0,1fr);gap:12px}.academy-guide-portrait{width:90px;height:90px}.academy-guide h2{font-size:1.1rem}.academy-guide-copy{display:contents}.academy-guide-kicker,.academy-guide h2{grid-column:2;grid-row:auto}.academy-guide-portrait{grid-row:1/span 2;align-self:center}.academy-guide-steps,.academy-guide-why{grid-column:1/-1}.academy-guide-steps>div{grid-template-columns:1fr;gap:3px}.academy-guide-steps dt{font-size:.8rem}.academy-guide-steps dd{font-size:1rem}.academy-guide-tools{gap:8px}.academy-guide-tools button{padding:10px 12px}.academy-guide.is-collapsed{grid-template-columns:52px minmax(0,1fr) auto;padding:10px;gap:8px}.academy-guide.is-collapsed .academy-guide-portrait{width:52px;height:52px}.academy-guide.is-collapsed .academy-guide-kicker{display:none}.academy-guide.is-collapsed h2{font-size:.98rem;grid-column:2;grid-row:1}.academy-guide.is-collapsed .academy-guide-tools{grid-row:1;grid-column:3}.academy-guide.is-collapsed .academy-guide-tools button{font-size:.76rem;padding:8px}}
@media print{.academy-guide{display:none!important}}

/* The tutor carries the instruction; original navigation and progress controls remain. */
body.academy-tutor-active .coach>div:first-child>p:not(.eyebrow),body.academy-tutor-active .coach>div:first-child>details{display:none}

/* One unchanged sprite sheet, composed into quiet facial gestures.
   Feet and the lower body stay fixed; no layer translates or bounces. */
.mascot-sprite,.academy-guide-portrait{position:relative;background-size:0 0!important;background-position:0 0!important;transform:none!important;animation:none!important;isolation:isolate}
.guide-art.is-speaking{animation:none!important;transform:none!important}
.mascot-sprite::after,.academy-guide-portrait::after{content:none!important}
.mascot-body,.mascot-head,.mascot-face,.mascot-ear,.mascot-mouth,.mascot-blink,.mascot-blink-image,.mascot-paw{position:absolute;inset:0;display:block;pointer-events:none;background-image:inherit;background-size:200% 200%;background-repeat:no-repeat;background-position:0 0}
.mascot-body{mask-image:linear-gradient(transparent 68%,#000 76%);transform:none!important;animation:none!important}
.mascot-head{background-size:0 0;transform-origin:50% 80%;transform:none;mask-image:linear-gradient(#000 77%,transparent 84%)}
.mascot-face{mask-image:url("media/bcecd47128faabd52e705a00c2444869f9b18c899262185910f0868f2de7b804.svg");mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.mascot-ear-left{clip-path:polygon(20% 22%,31% 18%,39% 30%,33% 44%,21% 43%);transform-origin:33% 43%}
.mascot-ear-right{clip-path:polygon(69% 27%,79% 24%,88% 27%,90% 35%,86% 46%,78% 44%);transform-origin:79% 44%}
.mascot-paw{clip-path:ellipse(7.2% 7% at 85.3% 66.7%);transform-origin:85.3% 66.7%;mask-image:radial-gradient(ellipse 7.2% 7% at 85.3% 66.7%,#000 88%,transparent 100%)}
.mascot-mouth{background-position:100% 0;clip-path:ellipse(8.6% 4.6% at 51% 66.3%);opacity:0}
.mascot-blink{background-size:0 0;opacity:0;mask-image:radial-gradient(ellipse 11% 9.8% at 36.4% 53.4%,#000 88%,transparent 100%),radial-gradient(ellipse 10.8% 9.5% at 66.8% 55.9%,#000 88%,transparent 100%)}
.mascot-blink-image{background-position:100% 100%;transform:translate(1.116%,6.220%)}
.guide-art.is-speaking .mascot-head,.academy-guide.is-speaking .mascot-head{animation:mascot-head-turn 6.2s ease-in-out infinite}
.guide-art.is-speaking .mascot-ear-left,.academy-guide.is-speaking .mascot-ear-left{animation:mascot-ear-left-twitch 7.4s ease-in-out infinite}
.guide-art.is-speaking .mascot-ear-right,.academy-guide.is-speaking .mascot-ear-right{animation:mascot-ear-right-twitch 9.1s ease-in-out infinite}
.guide-art.is-speaking .mascot-paw,.academy-guide.is-speaking .mascot-paw{animation:mascot-paw-wave 10.6s ease-in-out infinite}
.guide-art.is-speaking .mascot-blink,.academy-guide.is-speaking .mascot-blink{animation:mascot-blink 5.8s steps(1,end) infinite}
.mascot-sprite[data-frame="1"] .mascot-mouth{opacity:1}
.academy-guide.is-speaking .mascot-mouth{animation:mascot-mouth .34s steps(1,end) infinite}
@keyframes mascot-head-turn{0%,100%{transform:rotate(0deg)}18%{transform:rotate(-3deg)}48%{transform:rotate(3.5deg)}76%{transform:rotate(-1.2deg)}}
@keyframes mascot-ear-left-twitch{0%,43%,58%,100%{transform:rotate(0deg)}48%{transform:rotate(-2deg)}53%{transform:rotate(1.2deg)}}
@keyframes mascot-ear-right-twitch{0%,62%,77%,100%{transform:rotate(0deg)}67%{transform:rotate(2deg)}72%{transform:rotate(-1.2deg)}}
@keyframes mascot-paw-wave{0%,10%,38%,100%{transform:rotate(0deg)}17%{transform:rotate(-16deg)}24%{transform:rotate(12deg)}30%{transform:rotate(-12deg)}34%{transform:rotate(0deg)}}
@keyframes mascot-blink{0%,91%,95%,100%{opacity:0}92%,94%{opacity:1}}
@keyframes mascot-mouth{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .guide-art.is-speaking .mascot-head,.academy-guide.is-speaking .mascot-head,.guide-art.is-speaking .mascot-ear,.academy-guide.is-speaking .mascot-ear,.guide-art.is-speaking .mascot-paw,.academy-guide.is-speaking .mascot-paw{animation:none!important;transform:none!important}
 .guide-art.is-speaking .mascot-blink,.academy-guide.is-speaking .mascot-blink,.mascot-sprite[data-frame="1"] .mascot-mouth,.academy-guide.is-speaking .mascot-mouth{animation:none!important;opacity:0!important}
}

