.meter{container:meter / inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.meter>*{flex:0 0 100%;min-inline-size:0}.meter-label{color:var(--ink);font-size:.8125rem;font-weight:700;line-height:1.45}.meter-list{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none}.meter-bar{box-sizing:border-box;inline-size:100%;block-size:1.25rem;appearance:none;-webkit-appearance:none;border:0;border-radius:6px;background:transparent}.meter-bar::-webkit-meter-inner-element{appearance:none;-webkit-appearance:none;block-size:100%}.meter-bar::-webkit-meter-bar{box-sizing:border-box;block-size:100%;border:var(--bw) solid var(--ink);border-radius:6px;background:#e6e6ea}.meter-bar::-webkit-meter-optimum-value,.meter-bar::-webkit-meter-suboptimum-value,.meter-bar::-webkit-meter-even-less-good-value{box-sizing:border-box;border-inline-end:var(--bw) solid var(--ink)}.meter-bar::-webkit-meter-optimum-value{background:var(--lilac)}.meter-bar::-webkit-meter-suboptimum-value{background:var(--marker)}.meter-bar::-webkit-meter-even-less-good-value{background:var(--danger)}@-moz-document url-prefix(){.meter-bar{border:var(--bw) solid var(--ink);background:#e6e6ea}}.meter-bar::-moz-meter-bar{box-sizing:border-box;border-inline-end:var(--bw) solid var(--ink);border-radius:0}.meter-bar:-moz-meter-optimum::-moz-meter-bar{background:var(--lilac)}.meter-bar:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--marker)}.meter-bar:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger)}.meter-scale{position:relative}.meter-scale>.meter-bar{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:none}.meter-marks{display:flex;align-items:center;gap:.1875rem}.meter-mark{box-sizing:border-box;flex:0 1 auto;inline-size:.625rem;min-inline-size:.25rem;block-size:1.25rem;border:1px solid #6b6b75;border-radius:2px;background:var(--white)}.meter-mark[data-on=true]{border-color:#5d5fef;background:#5d5fef}.meter-mark--star,.meter-mark--star[data-on=true]{flex:none;inline-size:1.25rem;min-inline-size:0;border:0;background:none;fill:none;stroke:#6b6b75;stroke-width:1.5}.meter-mark--star[data-on=true]{fill:#5d5fef;stroke:#5d5fef}[data-look=stars] .meter-marks{gap:.25rem}.meter-value{display:flex;flex-wrap:wrap;align-items:center;gap:0 .375rem;margin:0;color:var(--ink-soft);font-size:.8125rem;font-weight:600;line-height:1.4}.meter-value[data-zone=best]{color:var(--lilac)}.meter-value[data-zone=middle]{color:var(--ink)}.meter-value[data-zone=worst]{color:var(--danger)}.meter-copy{color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.75rem;font-weight:400;line-height:1.45;font-variant-numeric:tabular-nums;white-space:nowrap}.meter-icon{flex:none;inline-size:1rem;block-size:1rem}.meter-icon__mark{fill:none;stroke:var(--white);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.meter-icon__dot{fill:var(--white)}.meter-icon[data-zone=best] .meter-icon__shape{fill:var(--lilac)}.meter-icon[data-zone=middle] .meter-icon__shape{fill:var(--marker);stroke:var(--ink);stroke-width:1.4}.meter-icon[data-zone=middle] .meter-icon__mark{stroke:var(--ink)}.meter-icon[data-zone=worst] .meter-icon__shape{fill:var(--danger);stroke:var(--danger);stroke-width:1.4;stroke-linejoin:round}@container meter (min-width: 30rem){.meter-label{flex:1 1 0}.meter-value{flex:0 1 auto;order:2;justify-content:flex-end;text-align:end}.meter-bar,.meter-scale{order:3;flex:0 0 100%}}@container meter (min-width: 48rem){.meter-label{flex:0 0 9rem}.meter-bar,.meter-scale{order:0}.meter-bar{flex:1 1 0}.meter-scale{flex:0 1 auto}.meter-value{flex:0 1 auto;order:0;min-inline-size:11rem;margin-inline-start:auto}}@media(forced-colors:active){.meter-bar::-webkit-meter-bar{border-color:CanvasText}.meter-mark{forced-color-adjust:none;border-color:CanvasText;background:Canvas}.meter-mark[data-on=true]{border-color:Highlight;background:Highlight}.meter-mark--star{background:none;stroke:CanvasText}.meter-mark--star[data-on=true]{fill:Highlight;stroke:Highlight}}.meter-demo{display:grid;gap:.5rem}.meter-try{color:var(--ink-soft);font-size:.75rem;line-height:1.4}.meter-range{inline-size:100%;accent-color:var(--lilac)}.meter-says{margin:0;color:var(--ink-soft);font-size:.875rem;line-height:1.5}