.ds-page{background:var(--color-surface-primary);min-height:100svh;padding:120px var(--space-site-gutter) var(--space-section-gap)}.ds-page__header{padding-bottom:var(--space-section-gap);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-section-gap);max-width:640px}.ds-page__title{font-size:var(--font-size-h2);font-weight:var(--font-weight-display);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-heading);color:var(--color-text-primary);margin-bottom:var(--space-element-gap)}.ds-page__lead{font-size:var(--font-size-body);color:var(--color-text-secondary);line-height:var(--line-height-body)}.ds-context{background:var(--color-surface-primary);border:1px solid var(--color-border-default);border-radius:var(--border-radius-component);margin-top:var(--space-section-gap);overflow:hidden}.ds-context__label{padding:var(--space-inline-gap) var(--space-component-gap);background:var(--color-surface-secondary);border-bottom:1px solid var(--color-border-default);font-family:var(--font-family-mono);font-size:var(--font-size-label);letter-spacing:var(--letter-spacing-label);color:var(--color-text-secondary)}.ds-context .ds-grid{padding:var(--space-component-gap)}.ds-grid{gap:var(--space-section-gap);grid-template-columns:1fr 1fr 1fr;align-items:start;display:grid}@media (max-width:900px){.ds-grid{grid-template-columns:1fr 1fr}}@media (max-width:600px){.ds-grid{grid-template-columns:1fr}}.ds-section__title{font-size:var(--font-size-body);font-weight:var(--font-weight-label);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-label);text-transform:lowercase;padding-bottom:var(--space-element-gap)}.ds-section__divider{background:var(--color-border-default);height:1px;margin-bottom:var(--space-component-gap)}.ds-type-scale{gap:var(--space-component-gap);flex-direction:column;display:flex}.ds-type-row{align-items:baseline;gap:var(--space-element-gap);padding-bottom:var(--space-element-gap);border-bottom:1px solid var(--color-border-default);display:flex}.ds-type-row:last-child{border-bottom:none}.ds-type-row__label{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-label);text-transform:lowercase;flex-shrink:0;min-width:40px}.ds-type-row__sample{color:var(--color-text-primary);font-family:var(--font-family-base);flex:1}.ds-color-categories{gap:var(--space-section-gap);flex-direction:column;display:flex}.ds-color-category__name{font-family:var(--font-family-mono);font-size:var(--font-size-label);letter-spacing:var(--letter-spacing-label);text-transform:lowercase;color:var(--color-text-primary);font-weight:var(--font-weight-label);padding-bottom:var(--space-element-gap);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-component-gap)}.ds-color-groups{gap:var(--space-component-gap);flex-direction:column;display:flex}.ds-color-group__name{font-family:var(--font-family-mono);font-size:var(--font-size-label);letter-spacing:var(--letter-spacing-label);text-transform:lowercase;color:var(--color-text-secondary);margin-bottom:var(--space-inline-gap)}.ds-color-group__swatches{gap:var(--space-inline-gap);flex-wrap:wrap;display:flex}.ds-swatch{flex-direction:column;align-items:center;gap:6px;display:flex}.ds-swatch__color{border-radius:var(--border-radius-component);border:1px solid var(--color-border-default);width:40px;height:40px;transition:transform var(--duration-interaction) var(--easing-default);display:block}.ds-swatch__color--border{background:var(--color-surface-primary);border-width:3px}.ds-swatch__color:hover{transform:scale(1.08)}.ds-swatch__label{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary)}.ds-spacing-scale{gap:var(--space-element-gap);flex-direction:column;display:flex}.ds-space-row{align-items:center;gap:var(--space-element-gap);grid-template-columns:6rem 1fr auto;display:grid}.ds-space-row__token{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-label);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ds-space-row__track{background:var(--color-surface-tertiary);border-radius:var(--border-radius-pill);height:6px;overflow:hidden}.ds-space-row__bar{background:var(--color-accent-default);border-radius:var(--border-radius-pill);max-width:100%;height:100%}.ds-space-row__px{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);flex-shrink:0}.ds-motion-scale{gap:var(--space-element-gap);flex-direction:column;display:flex}.ds-motion-row{align-items:center;gap:var(--space-element-gap);grid-template-columns:6rem 1fr auto;display:grid}.ds-motion-row__label{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-label);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ds-motion-row__track{background:var(--color-surface-tertiary);border-radius:var(--border-radius-pill);height:6px;overflow:hidden}.ds-motion-row__bar{background:var(--color-accent-default);border-radius:var(--border-radius-pill);height:100%}.ds-motion-row__value{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);flex-shrink:0}.ds-radius-scale{gap:var(--space-element-gap);flex-direction:column;display:flex}.ds-radius-row{align-items:center;gap:var(--space-element-gap);padding-bottom:var(--space-element-gap);border-bottom:1px solid var(--color-border-default);display:flex}.ds-radius-row:last-child{border-bottom:none}.ds-radius-row__label{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-label);flex-shrink:0;min-width:6rem}.ds-radius-row__preview{background:var(--color-accent-default);flex-shrink:0;width:32px;height:32px;display:block}.ds-radius-row__value{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);flex-shrink:0;margin-left:auto}.ds-opacity-scale{gap:var(--space-element-gap);flex-direction:column;display:flex}.ds-opacity-row{align-items:center;gap:var(--space-element-gap);padding-bottom:var(--space-element-gap);border-bottom:1px solid var(--color-border-default);display:flex}.ds-opacity-row:last-child{border-bottom:none}.ds-opacity-row__label{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-label);flex-shrink:0;min-width:6rem}.ds-opacity-row__preview{border-radius:var(--border-radius-component);background-color:var(--color-neutral-200);background-image:linear-gradient(45deg, var(--color-neutral-400) 25%, transparent 25%), linear-gradient(-45deg, var(--color-neutral-400) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-neutral-400) 75%), linear-gradient(-45deg, transparent 75%, var(--color-neutral-400) 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;flex-shrink:0;width:32px;height:32px;display:block;overflow:hidden}.ds-opacity-row__swatch{background:var(--color-text-primary);width:100%;height:100%;display:block}.ds-opacity-row__value{font-family:var(--font-family-mono);font-size:var(--font-size-label);color:var(--color-text-secondary);flex-shrink:0;margin-left:auto}@media (prefers-reduced-motion:reduce){.ds-swatch__color{transition:none}}