.ds-scale{color:var(--text);margin:0;padding:0;list-style:none}.ds-scale-caption{flex-direction:column;min-inline-size:0;display:flex}.ds-scale-title{color:var(--text)}.ds-scale-note{color:var(--text-label)}.ds-scale-token{font-family:var(--font-mono);color:var(--text-label);overflow-wrap:anywhere;font-size:13px;line-height:20px}.ds-scale-value{color:var(--text-muted)}.ds-scale[data-kind=bar]{row-gap:var(--space-3);display:grid}.ds-scale[data-kind=bar] .ds-scale-step{align-items:center;row-gap:var(--space-1);grid-template-columns:minmax(0,1fr);display:grid}.ds-scale[data-kind=bar] .ds-scale-box{inline-size:var(--ds-scale-step);border-radius:var(--radius-sm);background:var(--brand-blue);order:2;block-size:8px;max-inline-size:100%;display:block}.ds-scale[data-kind=bar] .ds-scale-caption{align-items:baseline;gap:var(--space-3);flex-direction:row}.ds-scale[data-kind=bar] .ds-scale-token{min-inline-size:11ch}@media (min-width:640px){.ds-scale[data-kind=bar] .ds-scale-step{column-gap:var(--space-4);grid-template-columns:minmax(0,13rem) minmax(0,1fr)}.ds-scale[data-kind=bar] .ds-scale-box{order:0;grid-area:1/2}.ds-scale[data-kind=bar] .ds-scale-caption{grid-area:1/1}}.ds-scale[data-kind=square]{gap:var(--space-8) var(--gutter);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}.ds-scale[data-kind=square] .ds-scale-box{border-radius:var(--ds-scale-step);background:var(--surface-control);block-size:96px;inline-size:96px;display:block}.ds-scale[data-kind=square] .ds-scale-caption{margin-block-start:var(--space-3)}.ds-scale[data-kind=surface]{gap:var(--space-10) var(--gutter);padding-block:var(--space-4) var(--space-8);grid-template-columns:minmax(0,1fr);display:grid}.ds-scale[data-kind=surface] .ds-scale-box{border-radius:var(--radius-2xl);background-color:var(--ds-scale-fill,var(--surface-1));block-size:120px;inline-size:200px;max-inline-size:100%;box-shadow:var(--ds-scale-step);display:block}.ds-scale[data-kind=surface] .ds-scale-caption{gap:var(--space-1);margin-block-start:var(--space-4)}@media (min-width:768px){.ds-scale[data-kind=surface]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.ds-scale[data-kind=surface]{grid-template-columns:repeat(4,minmax(0,1fr))}}html[data-theme=dark] .ds-scale[data-kind=surface] .ds-scale-box[data-rim]{box-shadow:var(--ds-scale-step), var(--glass-ring-raised)}@media (forced-colors:active){.ds-scale-box{border:1px solid canvastext}.ds-scale[data-kind=bar] .ds-scale-box{background:canvastext}}