@layer m3-components{.m3-kpi{--_bg:var(--md-sys-color-surface-container-low);--_fg:var(--md-sys-color-on-surface);--_muted:var(--md-sys-color-on-surface-variant);--_r:var(--md-sys-shape-card);--_p:var(--md-sys-pad-card);min-width:0;padding:var(--_p);border-radius:var(--_r);background:var(--_bg);color:var(--_fg);font-family:var(--md-ref-typeface-plain);position:relative;container:m3-kpi/inline-size}.m3-kpi__body{align-content:start;row-gap:var(--md-sys-space-1);grid-template-columns:minmax(0,1fr);grid-template-areas:"head""value""delta";height:100%;display:grid}.m3-kpi[data-tone=primary]{--_bg:var(--md-sys-color-primary-container);--_fg:var(--md-sys-color-on-primary-container);--_muted:var(--md-sys-color-on-primary-container)}.m3-kpi[data-tone=secondary]{--_bg:var(--md-sys-color-secondary-container);--_fg:var(--md-sys-color-on-secondary-container);--_muted:var(--md-sys-color-on-secondary-container)}.m3-kpi[data-tone=tertiary]{--_bg:var(--md-sys-color-tertiary-container);--_fg:var(--md-sys-color-on-tertiary-container);--_muted:var(--md-sys-color-on-tertiary-container)}.m3-kpi[data-chart] .m3-kpi__body{-moz-column-gap:var(--md-sys-space-4);column-gap:var(--md-sys-space-4);grid-template-columns:minmax(0,auto) minmax(56px,1fr);grid-template-areas:"head head""value chart""delta chart"}.m3-kpi__head{justify-content:space-between;align-items:center;gap:var(--md-sys-space-2);min-height:var(--md-sys-size-icon);grid-area:head;display:flex}.m3-kpi__label{color:var(--_muted);min-width:0}.m3-kpi[data-tone=surface] .m3-kpi__label{color:var(--md-sys-color-on-surface-variant)}.m3-kpi:not([data-tone=surface]) .m3-kpi__label{opacity:.85}.m3-kpi__icon{color:var(--_muted);flex:none}.m3-kpi__value{color:var(--_fg);overflow-wrap:anywhere;grid-area:value;margin:0}.m3-kpi__delta{align-items:center;gap:var(--md-sys-space-1) var(--md-sys-space-2);margin:var(--md-sys-space-1) 0 0;flex-wrap:wrap;grid-area:delta;display:flex}.m3-kpi__pill{--_pill-bg:var(--md-sys-color-surface-container-highest);--_pill-fg:var(--md-sys-color-on-surface-variant);background:var(--_pill-bg);height:24px;color:var(--_pill-fg);font-variant-numeric:tabular-nums;white-space:nowrap;--m3-icon-size:16px;border-radius:12px;align-items:center;gap:2px;padding-inline:6px 10px;display:inline-flex}.m3-kpi__delta[data-mood=good] .m3-kpi__pill{--_pill-bg:var(--md-sys-color-success-container);--_pill-fg:var(--md-sys-color-on-success-container)}.m3-kpi__delta[data-mood=bad] .m3-kpi__pill{--_pill-bg:var(--md-sys-color-error-container);--_pill-fg:var(--md-sys-color-on-error-container)}.m3-kpi__caption{color:var(--_muted);opacity:.85}.m3-kpi__chart{min-width:0;color:var(--_fg);grid-area:chart;align-self:end}.m3-kpi__sk{--_loop:1.6s;background:color-mix(in srgb,var(--_fg) 12%,transparent);border-radius:6px;display:block;position:relative;overflow:hidden}.m3-kpi__sk:after{content:"";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--_bg) 55%,transparent),transparent);animation:m3-kpi-shimmer var(--_loop) linear infinite;position:absolute;inset:0;translate:-100%}.m3-kpi__sk--label{width:96px;height:12px}.m3-kpi__sk--value{border-radius:8px;grid-area:value;width:55%;height:32px;margin-block:4px}.m3-kpi__sk--delta{width:40%;height:24px;margin-top:var(--md-sys-space-1);border-radius:12px;grid-area:delta}@keyframes m3-kpi-shimmer{to{translate:100%}}@keyframes m3-kpi-pulse{0%{opacity:.5}to{opacity:1}}:root[data-motion=reduce] .m3-kpi__sk:after{background:0 0;animation:none;translate:0}:root[data-motion=reduce] .m3-kpi__sk{animation:m3-kpi-pulse var(--_loop) ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){:root:not([data-motion=expressive]) .m3-kpi__sk:after{background:0 0;animation:none;translate:0}:root:not([data-motion=expressive]) .m3-kpi__sk{animation:m3-kpi-pulse var(--_loop) ease-in-out infinite alternate}}@container m3-kpi (width<200px){.m3-kpi__value{overflow-wrap:normal;white-space:nowrap}.m3-kpi__head{align-items:flex-start}.m3-kpi__label{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.m3-kpi__icon{--m3-icon-size:20px}.m3-kpi__caption{text-overflow:ellipsis;white-space:nowrap;inline-size:100%;overflow:hidden}.m3-kpi[data-chart] .m3-kpi__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"head""value""delta""chart"}.m3-kpi[data-chart] .m3-kpi__chart{margin-top:var(--md-sys-space-1)}}@media (forced-colors:active){.m3-kpi,.m3-kpi__pill{border:1px solid canvastext}}}@layer m3-density{@container m3-kpi (width<200px){.m3-kpi .m3-kpi__value{letter-spacing:0;font-size:28px;line-height:36px}}}