.ds-page{max-width:1120px;margin:0 auto;padding:var(--spacing-12) var(--spacing-6) var(--spacing-20)}.ds-page__header{text-align:center;margin-bottom:var(--spacing-16)}.ds-page__label{font-size:var(--typography-fontSize-xs);font-weight:var(--typography-fontWeight-semibold);color:var(--color-primary-base);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-3)}.ds-page__title{font-size:var(--typography-fontSize-5xl);font-weight:var(--typography-fontWeight-bold);color:var(--color-text-primary);line-height:var(--typography-lineHeight-tight);margin-bottom:var(--spacing-4)}.ds-page__desc{font-size:var(--typography-fontSize-lg);color:var(--color-text-secondary);max-width:640px;margin:0 auto;line-height:var(--typography-lineHeight-relaxed)}.ds-section{margin-bottom:var(--spacing-16)}.ds-section__title{font-size:var(--typography-fontSize-3xl);font-weight:var(--typography-fontWeight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-3)}.ds-section__desc{font-size:var(--typography-fontSize-base);color:var(--color-text-secondary);max-width:640px;line-height:var(--typography-lineHeight-relaxed)}.ds-color-category,.ds-section__desc{margin-bottom:var(--spacing-8)}.ds-color-category__label{font-size:var(--typography-fontSize-lg);font-weight:var(--typography-fontWeight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-4)}.ds-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:var(--spacing-4);gap:var(--spacing-4)}.ds-color-swatch{text-align:center}.ds-color-swatch__box{width:100%;aspect-ratio:1;border-radius:var(--borderRadius-md);border:1px solid var(--color-border-default);margin-bottom:var(--spacing-2)}.ds-color-swatch__name{font-size:var(--typography-fontSize-sm);font-weight:var(--typography-fontWeight-medium);color:var(--color-text-primary)}.ds-color-swatch__hex{font-size:var(--typography-fontSize-xs);color:var(--color-text-secondary);font-family:var(--typography-fontFamily-mono)}.ds-type-families,.ds-type-sizes,.ds-type-weights{display:flex;flex-direction:column;gap:var(--spacing-4)}.ds-type-family-row,.ds-type-size-row,.ds-type-weight-row{display:flex;align-items:baseline;gap:var(--spacing-6);padding-bottom:var(--spacing-3);border-bottom:1px solid var(--color-border-subtle)}.ds-type-family-row__label,.ds-type-size-row__label,.ds-type-weight-row__label{flex-shrink:0;width:120px;font-size:var(--typography-fontSize-xs);font-family:var(--typography-fontFamily-mono);color:var(--color-text-muted)}.ds-type-size-row__sample{color:var(--color-text-primary);line-height:var(--typography-lineHeight-tight);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ds-type-weight-row__sample{color:var(--color-text-primary);font-size:var(--typography-fontSize-lg)}.ds-type-family-row__sample{color:var(--color-text-secondary);font-size:var(--typography-fontSize-sm)}.ds-section>.ac-card{margin-bottom:var(--spacing-6)}.ds-spacing-scale{display:flex;flex-direction:column;gap:var(--spacing-3)}.ds-spacing-row{display:flex;align-items:center;gap:var(--spacing-4)}.ds-spacing-row__label{flex-shrink:0;width:120px;font-size:var(--typography-fontSize-xs);font-family:var(--typography-fontFamily-mono);color:var(--color-text-muted)}.ds-spacing-row__bar{height:var(--spacing-4);min-width:2px;background:var(--gradient-primaryToSecondary);border-radius:var(--borderRadius-sm)}.ds-section>.ac-card+.ac-card{margin-top:var(--spacing-6)}.ds-component-group{margin-bottom:var(--spacing-8)}.ds-component-group:last-child{margin-bottom:0}.ds-component-group__label{font-size:var(--typography-fontSize-sm);font-weight:var(--typography-fontWeight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--spacing-4)}.ds-component-group__row{display:flex;align-items:center;gap:var(--spacing-3);flex-wrap:wrap}.ds-nested-text{margin-bottom:var(--spacing-4)}.ds-shadow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:var(--spacing-6);gap:var(--spacing-6)}.ds-shadow-sample{background:var(--color-background-card);border-radius:var(--borderRadius-lg);padding:var(--spacing-8) var(--spacing-4);text-align:center;border:1px solid var(--color-border-default)}.ds-shadow-sample__name{font-size:var(--typography-fontSize-lg);font-weight:var(--typography-fontWeight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.ds-shadow-sample__token{font-size:var(--typography-fontSize-xs);font-family:var(--typography-fontFamily-mono);color:var(--color-text-muted)}.ds-radius-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:var(--spacing-6);gap:var(--spacing-6)}.ds-radius-sample{text-align:center}.ds-radius-sample__box{width:80px;height:80px;background:var(--gradient-primaryToSecondary);margin:0 auto var(--spacing-3)}.ds-radius-sample__name{font-size:var(--typography-fontSize-sm);font-weight:var(--typography-fontWeight-semibold);color:var(--color-text-primary)}.ds-radius-sample__value{font-size:var(--typography-fontSize-xs);font-family:var(--typography-fontFamily-mono);color:var(--color-text-muted)}.ds-meta-panel{margin-top:var(--spacing-4);border-top:1px solid var(--color-border-subtle);padding-top:var(--spacing-3)}.ds-meta-panel__toggle{cursor:pointer;font-size:var(--typography-fontSize-sm);color:var(--color-text-muted);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:var(--spacing-2) 0}.ds-meta-panel__toggle:hover{color:var(--color-primary-base)}.ds-meta-panel__grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-4);gap:var(--spacing-4);margin-top:var(--spacing-3)}.ds-meta-panel__field{display:flex;flex-direction:column;gap:var(--spacing-1)}.ds-meta-panel__field--wide{grid-column:1/-1}.ds-meta-panel__label{font-size:var(--typography-fontSize-xs);font-weight:var(--typography-fontWeight-semibold);color:var(--color-primary-base);text-transform:uppercase;letter-spacing:.05em}.ds-meta-panel__value{font-size:var(--typography-fontSize-sm);color:var(--color-text-secondary);line-height:var(--typography-lineHeight-normal)}.ds-meta-panel__code{font-size:var(--typography-fontSize-xs);font-family:var(--typography-fontFamily-mono);color:var(--color-text-secondary);background:var(--color-background-input);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--borderRadius-sm);word-break:break-word}.ds-meta-panel__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-1)}.ds-meta-panel__list li{font-size:var(--typography-fontSize-xs);color:var(--color-text-secondary)}.ds-meta-panel__list li:before{content:"\2022 ";color:var(--color-primary-muted)}.ds-meta-panel__list--tokens li{font-family:var(--typography-fontFamily-mono)}.ds-meta-panel__list--tokens li:before{content:""}.ds-meta-panel__list--tokens code{font-size:var(--typography-fontSize-xs);color:var(--color-text-muted)}@media (max-width:640px){.ds-meta-panel__grid{grid-template-columns:1fr}}.ds-playground{display:flex;flex-direction:column;gap:var(--spacing-6)}.ds-playground__preview{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--spacing-8);background:var(--color-background-dark);border:1px dashed var(--color-border-subtle);border-radius:var(--borderRadius-lg)}.ds-playground__controls{display:flex;flex-wrap:wrap;gap:var(--spacing-4);padding:var(--spacing-4);background:var(--color-background-elevated);border-radius:var(--borderRadius-md)}.ds-playground__control{display:flex;align-items:center;gap:var(--spacing-2)}.ds-playground__control--wide{flex:1 1;min-width:200px}.ds-playground__control-label{font-size:var(--typography-fontSize-xs);font-weight:var(--typography-fontWeight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.ds-playground__input,.ds-playground__select{font-family:var(--typography-fontFamily-mono);font-size:var(--typography-fontSize-sm);color:var(--color-text-primary);background:var(--color-background-input);border:1px solid var(--color-border-default);border-radius:var(--borderRadius-sm);padding:var(--spacing-1) var(--spacing-2);outline:none;transition:border-color .15s ease}.ds-playground__input:focus,.ds-playground__select:focus{border-color:var(--color-border-focus)}.ds-playground__input{flex:1 1;min-width:120px}.ds-playground__control input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary-base)}