.gsap-bundle-comparison{--chart-ink: var(--lab-ink, oklch(.145 .01 148));--chart-paper: var(--lab-paper, oklch(.94 .008 96));--chart-muted: var(--lab-muted, oklch(.69 .012 148));--chart-line: var(--lab-line, oklch(.31 .012 148));--chart-accent: var(--lab-yellow);container-type:inline-size;margin:32px 0;padding:clamp(20px,4vw,32px);background:var(--chart-ink);color:var(--chart-paper);font-family:var(--font-sans)}.gsap-bundle-comparison figcaption{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;font-size:16px;font-variation-settings:"wght" 580;text-wrap:balance}.gsap-bundle-comparison figcaption span{color:var(--chart-muted);font-size:12px;font-variation-settings:"wght" 450}.gsap-bundle-group{padding:28px 0;border-bottom:1px solid var(--chart-line)}.gsap-bundle-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}.gsap-bundle-comparison .gsap-bundle-heading h4{margin:0;padding:0;color:var(--chart-paper);font-family:var(--font-sans);font-size:24px;font-variation-settings:"wght" 580;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}.gsap-bundle-comparison .gsap-bundle-heading p{flex-shrink:0;margin:0;font-family:var(--font-sans);color:var(--chart-muted);font-size:12px;line-height:1.5;text-wrap:nowrap}.gsap-bundle-comparison .gsap-bundle-heading strong{color:var(--chart-accent);font-family:var(--font-mono);font-variation-settings:"wght" 500}.gsap-bundle-chart{display:grid;gap:20px}.gsap-bundle-series{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center}.gsap-bundle-label{display:flex;flex-direction:column;gap:4px}.gsap-bundle-name{font-size:15px;font-variation-settings:"wght" 580;line-height:1.2}.gsap-bundle-parts{color:var(--chart-muted);font-size:12px;line-height:1.4}.gsap-bundle-plot{position:relative;display:flex;align-items:center;height:28px;margin-right:86px}.gsap-bundle-bar{width:var(--bar-size);height:10px;background:color-mix(in oklch,var(--chart-muted) 65%,var(--chart-ink))}.gsap-bundle-value{position:absolute;left:var(--bar-size);margin-left:14px;font-family:var(--font-mono);font-size:17px;font-variation-settings:"wght" 500;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.gsap-bundle-value span{font-size:12px}.gsap-bundle-value sup{font-size:11px;margin-left:2px}.gsap-bundle-series[data-library=Motion] :is(.gsap-bundle-name,.gsap-bundle-value){color:var(--chart-accent)}.gsap-bundle-series[data-library=Motion] .gsap-bundle-bar{background:var(--chart-accent)}.gsap-bundle-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding-top:20px}.gsap-bundle-comparison .gsap-bundle-footer p{margin:0;font-family:var(--font-sans);color:var(--chart-muted);font-size:12px;line-height:1.6;text-wrap:balance}.gsap-bundle-comparison .gsap-bundle-footer p:last-child{font-family:var(--font-mono)}@container (max-width: 560px){.gsap-bundle-series{grid-template-columns:minmax(0,1fr);gap:9px}.gsap-bundle-label{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}.gsap-bundle-comparison .gsap-bundle-heading h4{font-size:22px}.gsap-bundle-heading{align-items:flex-start}.gsap-bundle-name{font-size:14px}.gsap-bundle-plot{height:22px;margin-right:78px}.gsap-bundle-value{font-size:16px;margin-left:12px}.gsap-bundle-bar{height:8px}}.npm-adoption-chart{--npm-paper: var(--lab-paper, oklch(.94 .008 96));--npm-muted: var(--lab-muted, oklch(.69 .012 148));--npm-line: var(--lab-line, oklch(.31 .012 148));--npm-ink: var(--lab-ink, oklch(.145 .01 148));container-type:inline-size;padding:clamp(20px,4vw,32px);background:var(--npm-ink);color:var(--npm-paper);font-family:var(--font-sans)}.npm-adoption-chart figcaption{font-family:var(--font-sans);font-size:24px;font-variation-settings:"wght" 580;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}.npm-adoption-chart .npm-adoption-period{margin:8px 0 26px;color:var(--npm-muted);font-family:var(--font-sans);font-size:13px;line-height:1.5;text-wrap:balance}.npm-adoption-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px;margin-bottom:24px}.npm-adoption-series-name{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;white-space:nowrap}.npm-adoption-series-name i{width:12px;height:3px;background:var(--series-colour)}.npm-adoption-chart .npm-adoption-legend strong{display:block;margin-top:6px;font-family:var(--font-mono);color:var(--series-colour);font-size:24px;font-variation-settings:"wght" 500;font-variant-numeric:tabular-nums;line-height:1.2}.npm-adoption-plot{min-width:0}.npm-adoption-plot svg{display:block;width:100%;height:auto;overflow:visible}.npm-adoption-grid line{stroke:var(--npm-line);stroke-width:1;opacity:.55}.npm-adoption-grid text,.npm-adoption-year{fill:var(--npm-muted);font-family:var(--font-mono);font-size:14px}.npm-adoption-desktop :is(.npm-adoption-grid text,.npm-adoption-year){font-size:16px}.npm-adoption-line{fill:none;stroke-linejoin:round;stroke-linecap:round}.npm-adoption-plot .npm-adoption-mobile{display:none}.npm-adoption-chart .npm-adoption-note,.npm-adoption-chart .npm-adoption-source{margin:20px 0 0;color:var(--npm-muted);font-family:var(--font-sans);font-size:12px;line-height:1.65;text-wrap:pretty}.npm-adoption-chart .npm-adoption-source{margin-top:6px}.npm-adoption-source a{color:inherit;text-underline-offset:3px}.npm-adoption-source a:hover{color:var(--npm-paper)}.npm-adoption-source a:focus-visible{outline:2px solid var(--lab-yellow);outline-offset:4px}@container (max-width: 480px){.npm-adoption-plot .npm-adoption-desktop{display:none}.npm-adoption-plot .npm-adoption-mobile{display:block}.npm-adoption-legend{grid-template-columns:repeat(2,minmax(0,1fr))}.npm-adoption-chart figcaption{font-size:22px}}.animation-start-controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end;margin:24px 0 16px}.animation-start-controls fieldset{margin:0;padding:0;border:0;min-width:0}.animation-start-controls legend,.animation-start-controls label{color:var(--chart-muted);font:inherit;font-size:13px;line-height:1.5}.animation-start-controls label{display:grid;gap:6px;flex:1 1 200px}.animation-start-controls legend{margin-bottom:6px}.animation-start-count{display:flex}.animation-start-controls :is(button,select){min-height:44px;border:1px solid var(--chart-line);border-radius:0;padding:8px 12px;background:var(--chart-ink);color:var(--chart-paper);font-family:var(--font-sans);font-size:14px;cursor:pointer}.animation-start-count button+button{border-left:0}.animation-start-count button[aria-pressed=true]{background:var(--chart-paper);color:var(--chart-ink)}.animation-start-controls button:hover{background:var(--chart-muted);color:var(--chart-ink)}.animation-start-controls :is(button,select):focus-visible,.animation-start-method summary:focus-visible{outline:2px solid var(--chart-accent);outline-offset:4px}.animation-start-controls select{width:100%}.animation-start-comparison .animation-start-definition,.animation-start-comparison .animation-start-caveat{margin:0;color:var(--chart-muted);font-size:13px;line-height:1.6;text-wrap:balance}.animation-start-definition{min-height:42px}.animation-start-group{padding:16px 0;border-bottom:1px solid var(--chart-line)}.animation-start-comparison .animation-start-group h4{margin:0 0 8px;padding:0;color:var(--chart-paper);font-family:var(--font-sans);font-size:16px;font-variation-settings:"wght" 580;line-height:1.4;text-wrap:balance}.animation-start-series{display:grid;grid-template-columns:56px minmax(0,1fr) 72px;align-items:center;gap:12px;min-height:24px;color:var(--chart-paper)}.animation-start-name{font-size:13px}.animation-start-track{min-width:0}.animation-start-bar{width:var(--bar-size);height:8px;background:var(--chart-muted)}.animation-start-value{font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.animation-start-value span{font-size:12px}.animation-start-series[data-library=Motion]{color:var(--chart-accent)}.animation-start-series[data-library=Motion] .animation-start-bar{background:var(--chart-accent)}.animation-start-comparison .animation-start-caveat{margin-top:16px}.animation-start-method{margin-top:20px}.animation-start-method summary{min-height:44px;padding:12px 0;color:var(--chart-paper);font-size:14px;cursor:pointer}.animation-start-comparison .animation-start-method p{color:var(--chart-muted);font-size:14px;line-height:1.65;margin:12px 0;text-wrap:pretty}.animation-start-method code{overflow-wrap:anywhere}@container (max-width: 400px){.animation-start-controls{gap:12px}.animation-start-controls label{flex-basis:100%}.animation-start-series{grid-template-columns:48px minmax(0,1fr) 68px;gap:8px}}
