.ds-page code{font-family:var(--font-berkeley-mono), ui-monospace, monospace}.ds-contrast>li,.ds-motion-list>li{border-bottom:1px solid var(--border)}.ds-contrast-row{grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding-block:16px;display:grid}.ds-contrast-swatch{border-radius:var(--radius-md);width:48px;height:48px;box-shadow:inset 0 0 0 1px var(--foreground);place-items:center;display:grid}@supports (color:color-mix(in lab, red, red)){.ds-contrast-swatch{box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent)}}.ds-contrast-swatch{font-weight:var(--weight-emphasis)}.ds-contrast-mark{background:currentColor;border-radius:50%;width:16px;height:16px}.ds-contrast-copy,.ds-motion-copy{gap:4px;min-width:0;display:grid}.ds-contrast-ratio{text-align:end;justify-items:end;gap:4px;display:grid}.ds-ramps{gap:16px;display:grid}.ds-ramp{gap:8px;display:grid}.ds-ramp-steps{grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;display:grid}.ds-ramp-steps>li{gap:4px;min-width:0;display:grid}.ds-ramp-swatch{border-radius:var(--radius-sm);height:32px;box-shadow:inset 0 0 0 1px var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ds-ramp-swatch{box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--foreground) 8%, transparent)}}.ds-ramp-label{color:var(--muted-foreground);font-size:var(--type-small);font-variant-numeric:tabular-nums;text-align:center;overflow:hidden}.ds-specimens{gap:8px;display:grid}.ds-token-card{border-radius:var(--radius-lg);background:var(--muted);display:grid;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.ds-token-card{background:color-mix(in oklch, var(--muted) 64%, var(--background))}}.ds-token-card{box-shadow:inset 0 0 0 1px var(--border)}.ds-token-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:48px;padding:8px 16px;display:grid}.ds-token-row+.ds-token-row{border-top:1px solid var(--border)}.ds-token-row>span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds-token{color:var(--muted-foreground);font-size:var(--type-caption);font-variant-numeric:tabular-nums;white-space:nowrap}.ds-swatch-row{align-items:center;gap:16px;display:flex}.ds-scale-bar{border-radius:var(--radius-sm);background:var(--primary);height:16px}@supports (color:color-mix(in lab, red, red)){.ds-scale-bar{background:color-mix(in oklch, var(--primary) 32%, transparent)}}.ds-radius-tile,.ds-elevation-tile{flex:none;width:32px;height:32px}.ds-radius-tile{border:1px solid var(--foreground);width:48px;height:48px}@supports (color:color-mix(in lab, red, red)){.ds-radius-tile{border:1px solid color-mix(in oklch, var(--foreground) 24%, transparent)}}.ds-radius-tile{background:var(--muted)}.ds-elevation-tile{border-radius:var(--radius-md);background:var(--popover)}.ds-elevation-sm{--smooth-shadow-color:var(--tw-shadow-color,black);box-shadow:0 18px 47px 0 var(--smooth-shadow-color), 0 7.5px 19px 0 var(--smooth-shadow-color), 0 4px 10.5px 0 var(--smooth-shadow-color), 0 2.3px 5.8px 0 var(--smooth-shadow-color), 0 1.2px 3.1px 0 var(--smooth-shadow-color), 0 .5px 1.3px 0 var(--smooth-shadow-color), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}@supports (color:color-mix(in lab, red, red)){.ds-elevation-sm{box-shadow:0 18px 47px 0 color-mix(in srgb, var(--smooth-shadow-color) 3%, transparent), 0 7.5px 19px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 4px 10.5px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 2.3px 5.8px 0 color-mix(in srgb, var(--smooth-shadow-color) 1%, transparent), 0 1.2px 3.1px 0 color-mix(in srgb, var(--smooth-shadow-color) 1%, transparent), 0 .5px 1.3px 0 color-mix(in srgb, var(--smooth-shadow-color) 1%, transparent), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}}.ds-elevation-md{--smooth-shadow-color:var(--tw-shadow-color,black);box-shadow:0 17.54px 23.39px 0 var(--smooth-shadow-color), 0 9.4px 12.5px 0 var(--smooth-shadow-color), 0 5.25px 7px 0 var(--smooth-shadow-color), 0 2.79px 3.72px -2px var(--smooth-shadow-color), 0 1.16px 1.5px 0 var(--smooth-shadow-color), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}@supports (color:color-mix(in lab, red, red)){.ds-elevation-md{box-shadow:0 17.54px 23.39px 0 color-mix(in srgb, var(--smooth-shadow-color) 4%, transparent), 0 9.4px 12.5px 0 color-mix(in srgb, var(--smooth-shadow-color) 3%, transparent), 0 5.25px 7px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 2.79px 3.72px -2px color-mix(in srgb, var(--smooth-shadow-color) 1%, transparent), 0 1.16px 1.5px 0 color-mix(in srgb, var(--smooth-shadow-color) 1%, transparent), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}}.ds-elevation-lg{--smooth-shadow-color:var(--tw-shadow-color,black);box-shadow:0 25px 50px 0 var(--smooth-shadow-color), 0 12px 24px 0 var(--smooth-shadow-color), 0 6px 12px 0 var(--smooth-shadow-color), 0 3px 6px 0 var(--smooth-shadow-color), 0 1.5px 3px 0 var(--smooth-shadow-color), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}@supports (color:color-mix(in lab, red, red)){.ds-elevation-lg{box-shadow:0 25px 50px 0 color-mix(in srgb, var(--smooth-shadow-color) 5%, transparent), 0 12px 24px 0 color-mix(in srgb, var(--smooth-shadow-color) 4%, transparent), 0 6px 12px 0 color-mix(in srgb, var(--smooth-shadow-color) 3%, transparent), 0 3px 6px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 1.5px 3px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}}.ds-motion{gap:16px;display:grid}.ds-motion-row{grid-template-columns:minmax(0,1fr) minmax(96px,40%);align-items:center;gap:16px;padding-block:16px;display:grid}.ds-motion-track{background:var(--border);border-radius:999px;height:16px;position:relative}.ds-motion-runner{transition-property:translate;transition-timing-function:var(--expo-out);position:absolute;inset:0 16px 0 0}.ds-motion-runner[data-moved]{translate:100%}.ds-motion-dot{background:var(--foreground);border-radius:50%;width:16px;height:16px;display:block}.ds-specimen{gap:16px;display:grid}.ds-specimen-row{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}@media (max-width:30rem){.ds-ramp-label{font-size:0}.ds-ramp-steps>li:is(:first-child,:nth-child(6),:last-child) .ds-ramp-label{font-size:var(--type-small)}.ds-motion-row{grid-template-columns:1fr}}