.learn-fig{margin:32px 0;padding:22px 24px 18px;border:1px solid var(--md-outline-variant, #CAC4D0);border-radius:20px;background:var(--md-surface-container-lowest, #fff)}.learn-fig-head{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}.learn-fig-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fig-accent)}.learn-fig-cap{font-size:16px;font-weight:700;line-height:1.45;color:var(--md-on-surface, #1D1B20)}.learn-fig-stage{overflow-x:auto}.learn-fig-stage svg{display:block;width:100%;height:auto}.learn-fig-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--md-on-surface-variant, #49454F)}.learn-fig svg .fg-axis{stroke:var(--md-outline-variant, #CAC4D0);stroke-width:1.5}.learn-fig svg .fg-grid{stroke:var(--md-outline-variant, #CAC4D0);stroke-width:1;opacity:.45}.learn-fig svg .fg-rule{stroke:var(--md-on-surface-variant, #49454F);stroke-width:1.5;stroke-dasharray:4 3}.learn-fig svg .fg-tick{font:600 11px/1 var(--font, system-ui, sans-serif);font-variant-numeric:tabular-nums;fill:var(--md-on-surface-variant, #49454F);text-anchor:middle}.learn-fig svg .fg-label{font:700 12px/1 system-ui,sans-serif;fill:var(--md-on-surface-variant, #49454F)}.learn-fig svg .fg-name{font:800 13px/1 system-ui,sans-serif;fill:var(--md-on-surface, #1D1B20)}.learn-fig svg .fg-note{font:800 11.5px/1 system-ui,sans-serif;fill:var(--md-on-surface-variant, #49454F)}.learn-fig svg .fg-bar{fill:var(--md-surface-container, #F3EDF7)}.learn-fig svg .fg-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.learn-fig svg .fg-area{opacity:.16}.learn-fig svg .fg-dot{r:4}.learn-fig svg .fg-accent{fill:var(--fig-accent)}.learn-fig svg .fg-accent.fg-line,.learn-fig svg .fg-line.fg-accent{stroke:var(--fig-accent);fill:none}.learn-fig svg .fg-good{fill:#059669}.learn-fig svg .fg-good.fg-line{stroke:#059669;fill:none}.learn-fig svg .fg-warn{fill:#d97706}.learn-fig svg .fg-warn.fg-line{stroke:#d97706;fill:none}.learn-fig svg .fg-bad{fill:#dc2626}.learn-fig svg .fg-bad.fg-line{stroke:#dc2626;fill:none}.learn-fig svg .fg-mute{fill:#94a3b8}.learn-fig svg .fg-mute.fg-line{stroke:#94a3b8;fill:none}.learn-fig svg .fg-draw{stroke-dasharray:var(--len, 2000);stroke-dashoffset:var(--len, 2000);animation:fgDraw var(--d, 1.4s) ease-out var(--w, 0s) forwards}@keyframes fgDraw{to{stroke-dashoffset:0}}.learn-fig svg .fg-grow{transform-box:fill-box;transform-origin:left center;animation:fgGrow var(--d, .9s) ease-out var(--w, 0s) both}@keyframes fgGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.learn-fig svg .fg-rise{transform-box:fill-box;transform-origin:center bottom;animation:fgRise var(--d, .8s) cubic-bezier(.22,1,.36,1) var(--w, 0s) both}@keyframes fgRise{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.learn-fig svg .fg-in{animation:fgIn var(--d, .5s) ease-out var(--w, 0s) both}@keyframes fgIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.learn-fig svg *{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;animation-fill-mode:forwards!important;transition-duration:1ms!important}}html[data-calm] .learn-fig svg .fg-draw{stroke-dashoffset:0!important}html:root:not([data-look=bold]):not([data-look=classic]) .learn-fig{--fig-accent: var(--ink, #14212E);border:3px solid var(--ink, #14212E);border-radius:0;background:#fff}html:root:not([data-look=bold]):not([data-look=classic]) .learn-fig-kicker{align-self:flex-start;padding:4px 10px 4px 14px;background:var(--accent, #FFC400);color:var(--ink, #14212E);font:700 15px/1.1 var(--font-cond, sans-serif);letter-spacing:0;text-transform:none;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);rotate:-1.5deg}html:root:not([data-look=bold]):not([data-look=classic]) .learn-fig-cap{color:var(--ink, #14212E);font-family:var(--font, sans-serif)}html:root:not([data-look=bold]):not([data-look=classic]) .learn-fig svg .fg-bar{fill:var(--accent-soft, #FFF3C2)}html:root:not([data-look=bold]):not([data-look=classic]) .learn-fig svg .fg-area{fill:var(--accent, #FFC400);opacity:.35}@media(max-width:640px){.learn-fig{padding:16px 16px 14px;border-radius:16px}.learn-fig-cap{font-size:15px}}
