.section-demo-breakpoint-module__733bdW__container{background-color:rgb(var(--cdt-color-background-secondary));padding:calc(var(--cdt-spacing)*4)}@media screen and (min-width:40rem){.section-demo-breakpoint-module__733bdW__container{background-color:rgba(var(--cdt-color-background-accent),.1);padding:calc(var(--cdt-spacing)*6)}}@media screen and (min-width:48rem){.section-demo-breakpoint-module__733bdW__container{background-color:rgba(var(--cdt-color-background-accent),.2);padding:calc(var(--cdt-spacing)*8)}}@media screen and (min-width:64rem){.section-demo-breakpoint-module__733bdW__container{gap:calc(var(--cdt-spacing)*6);background-color:rgba(var(--cdt-color-background-accent),.3);padding:calc(var(--cdt-spacing)*10);grid-template-columns:1fr 1fr;display:grid}}.section-demo-breakpoint-module__733bdW__content h3{margin:0 0 calc(var(--cdt-spacing)*3)}.section-demo-breakpoint-module__733bdW__content p{margin:0 0 calc(var(--cdt-spacing)*2)}.section-demo-breakpoint-module__733bdW__code{background:rgb(var(--cdt-color-background-default))}.section-demo-breakpoint-module__733bdW__highlight{color:rgb(var(--cdt-color-text-assistive))}
.section-query-breakpoint-module__89nIcq__container{gap:calc(var(--cdt-spacing)*4);background-color:rgb(var(--cdt-color-background-default));padding:calc(var(--cdt-spacing)*4);display:grid}.section-query-breakpoint-module__89nIcq__container:before{display:block}@media screen and (min-width:29.6875rem){.section-query-breakpoint-module__89nIcq__container{background-color:rgba(var(--cdt-color-background-accent),.1)}.section-query-breakpoint-module__89nIcq__container:before{content:"📱 Mobile (xs+)";color:rgb(var(--cdt-color-text-accent))}}@media screen and (min-width:48rem) and (max-width:63.98rem){.section-query-breakpoint-module__89nIcq__container{background-color:rgba(var(--cdt-color-background-success),.1)}.section-query-breakpoint-module__89nIcq__container:before{content:"📱 Tablet (md-lg)";color:rgb(var(--cdt-color-text-success))}}@media screen and (min-width:64rem){.section-query-breakpoint-module__89nIcq__container{background-color:rgba(var(--cdt-color-background-warning),.1);grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;grid-auto-flow:column}.section-query-breakpoint-module__89nIcq__container:before{content:"🖥️ Desktop (lg+)";color:rgb(var(--cdt-color-text-warning))}}.section-query-breakpoint-module__89nIcq__content{gap:calc(var(--cdt-spacing)*2);flex-direction:column;display:flex}@media screen and (min-width:64rem){.section-query-breakpoint-module__89nIcq__content{grid-row:2/3}}.section-query-breakpoint-module__89nIcq__code{background:rgb(var(--cdt-color-background-default))}@media screen and (min-width:64rem){.section-query-breakpoint-module__89nIcq__code{grid-row:1/3}}.section-query-breakpoint-module__89nIcq__highlight{color:rgb(var(--cdt-color-text-assistive))}
.section-usage-breakpoint-module__QxRhYG__container{flex-direction:column;grid-column:1/3;display:flex}.section-usage-breakpoint-module__QxRhYG__wrapper:not(:last-child){border-bottom:1px solid rgb(var(--cdt-color-border-default))}.section-usage-breakpoint-module__QxRhYG__highlight{color:rgb(var(--cdt-color-text-assistive))}.section-usage-breakpoint-module__QxRhYG__highlightSecondary{color:rgb(var(--cdt-color-text-secondary))}
.color-field-module__pTJxoW__field{align-items:center;gap:calc(var(--cdt-spacing)*2);border:1px solid rgb(var(--cdt-color-border-default));padding:0 calc(var(--cdt-spacing)*2);height:calc(var(--cdt-spacing)*8);display:flex}.color-field-module__pTJxoW__swatch{background-color:var(--swatch-color);width:calc(var(--cdt-spacing)*5);height:calc(var(--cdt-spacing)*5)}.color-field-module__pTJxoW__swatchAtomic{width:calc(var(--cdt-spacing)*5);height:calc(var(--cdt-spacing)*5)}.color-field-module__pTJxoW__icon{color:rgb(var(--cdt-color-icon-secondary))}.color-field-module__pTJxoW__flex{flex:1}
.panel-module__JviUsW__themePanel{gap:calc(var(--cdt-spacing)*4);background-color:rgb(var(--cdt-color-background-default));padding:calc(var(--cdt-spacing)*4);min-width:0;color:rgb(var(--cdt-color-text-default));flex-direction:column;display:flex}.panel-module__JviUsW__themePanelEmpty{background-color:rgb(var(--cdt-color-background-secondary));color:rgb(var(--cdt-color-text-secondary));border:none;justify-content:center;align-items:center}.panel-module__JviUsW__themeTitle{color:rgb(var(--cdt-color-text-secondary));text-transform:uppercase}
.panel-header-module__2NHrkq__header{gap:calc(var(--cdt-spacing)*2);border-bottom:1px solid rgb(var(--cdt-color-border-default));padding:calc(var(--cdt-spacing)*4);display:flex}@media screen and (min-width:64rem){.panel-header-module__2NHrkq__header{grid-column:1/3}}
.section-overview-detail-colors-module__3_wVna__colorRadioButton{justify-content:center;align-items:center;gap:calc(var(--cdt-spacing)*2);cursor:default;border-radius:var(--cdt-radius-md);padding:0 calc(var(--cdt-spacing)*2);height:calc(var(--cdt-spacing)*6);color:rgb(var(--color,0,0,0),1);-webkit-user-select:none;user-select:none;text-transform:capitalize;border:1px solid;flex-direction:column;display:flex}.section-overview-detail-colors-module__3_wVna__colorRadioButton[data-selected=true]{border-color:rgb(var(--color,0,0,0),1);background-color:rgb(var(--color,0,0,0),1);color:rgb(var(--cdt-color-text-on-accent))}.section-overview-detail-colors-module__3_wVna__colorRadioButton[data-selected=false]:hover{background-color:rgba(var(--color),.2)}
.section-background-hierarchy-colors-module__NvbCmq__grid{grid-template-rows:repeat(2,calc(var(--cdt-spacing)*8));margin-top:calc(var(--cdt-spacing)*4);color:var(--color-text);grid-template-columns:auto 1fr;display:grid}.section-background-hierarchy-colors-module__NvbCmq__swatch{border:1px solid rgb(var(--cdt-color-border-default));background-color:var(--color);width:calc(var(--cdt-spacing)*16);height:calc(var(--cdt-spacing)*16);color:rgb(var(--cdt-color-text-default));grid-row:1/3;justify-content:center;align-items:center;display:flex}
.section-background-interaction-colors-module__GDVOaG__grid{grid-template-rows:repeat(2,calc(var(--cdt-spacing)*8));margin-top:calc(var(--cdt-spacing)*4);color:var(--color-text);grid-template-columns:auto 1fr;display:grid}.section-background-interaction-colors-module__GDVOaG__swatch{background-color:var(--color);width:calc(var(--cdt-spacing)*16);height:calc(var(--cdt-spacing)*16);grid-row:1/3;justify-content:center;align-items:center;display:flex}
.section-background-hues-colors-module__pb53ca__grid{grid-template-rows:repeat(2,calc(var(--cdt-spacing)*8));margin-top:calc(var(--cdt-spacing)*4);color:var(--color-text);grid-template-columns:auto 1fr;display:grid}.section-background-hues-colors-module__pb53ca__swatch{background-color:var(--color);width:calc(var(--cdt-spacing)*16);height:calc(var(--cdt-spacing)*16);grid-row:1/3;justify-content:center;align-items:center;display:flex}.section-background-hues-colors-module__pb53ca__hoverRow{background-color:var(--color-hover);padding:0 calc(var(--cdt-spacing)*2);height:calc(var(--cdt-spacing)*8);grid-column:2/3;align-items:center;display:flex}.section-background-hues-colors-module__pb53ca__secondaryRow{background-color:var(--color-secondary);padding:0 calc(var(--cdt-spacing)*2);height:calc(var(--cdt-spacing)*8);grid-area:2/2/3/3;align-items:center;display:flex}
.section-text-basic-colors-module___v23eq__heading{margin-top:calc(var(--cdt-spacing)*4);color:var(--color)}
.section-text-tinted-colors-module__zYz2uW__heading{margin-top:calc(var(--cdt-spacing)*4);color:var(--color)}
.section-text-against-colors-module__rpEarq__heading{margin-top:calc(var(--cdt-spacing)*4);background-color:rgb(var(--cdt-color-background-accent));padding:calc(var(--cdt-spacing)*4)calc(var(--cdt-spacing)*2);color:var(--color)}
.section-icon-colors-module__Lc6IWq__iconContainer{margin-top:calc(var(--cdt-spacing)*4);border:1px solid rgb(var(--cdt-color-border-default));width:calc(var(--cdt-spacing)*8);height:calc(var(--cdt-spacing)*8);justify-content:center;align-items:center;display:flex}
.section-border-colors-module__pkOsNa__borderContainer{margin-top:calc(var(--cdt-spacing)*4);padding:calc(var(--cdt-spacing)*4);justify-content:center;align-items:center;display:flex}.section-border-colors-module__pkOsNa__borderLine{border-top:1px solid var(--color);width:100%}.section-border-colors-module__pkOsNa__contentFlex{gap:calc(var(--cdt-spacing)*2);flex-direction:column;display:flex}.section-border-colors-module__pkOsNa__borderContainerPadding{margin-top:calc(var(--cdt-spacing)*4);padding:0 calc(var(--cdt-spacing)*4);justify-content:center;align-items:center;display:flex}.section-border-colors-module__pkOsNa__borderBox{border:1px solid var(--color);border-radius:var(--cdt-radius-md);width:calc(var(--cdt-spacing)*6);height:calc(var(--cdt-spacing)*6);justify-content:center;align-items:center;display:flex}.section-border-colors-module__pkOsNa__borderBox[data-strong=true]{background-color:rgb(var(--cdt-color-background-accent));color:rgb(var(--cdt-color-text-on-accent))}.section-border-colors-module__pkOsNa__specialBorderContainer{margin-top:calc(var(--cdt-spacing)*4);padding:calc(var(--cdt-spacing)*4);justify-content:center;align-items:center;display:flex}.section-border-colors-module__pkOsNa__specialBorderContainer[data-type=border\.menu]{background-color:rgb(var(--cdt-color-background-menu))}.section-border-colors-module__pkOsNa__specialBorderContainer[data-type=border\.toolbar]{background-color:rgb(var(--cdt-color-gray-800))}.section-border-colors-module__pkOsNa__specialBorderLine{border-top:1px solid var(--color);width:100%}
.hero-module__U00jra__hero{padding:calc(var(--cdt-spacing)*16)0;text-align:left}.hero-module__U00jra__heroTitle{margin-bottom:calc(var(--cdt-spacing)*4);color:rgb(var(--cdt-color-text-default))}.hero-module__U00jra__heroDescription{margin-bottom:calc(var(--cdt-spacing)*6);color:rgb(var(--cdt-color-text-secondary))}
.page-container-module__nELHzq__pageContainer{max-width:64rem;margin:0 auto}
.color-swatch-module__5Ypcka__colorSwatch{background-color:var(--dynamic-color);width:calc(var(--cdt-spacing)*5);height:calc(var(--cdt-spacing)*5)}
.color-swatch-field-module__qqj6na__colorRow{border:1px solid rgb(var(--cdt-color-border-default));padding:0 var(--cdt-spacing)0 calc(var(--cdt-spacing)*2);height:calc(var(--cdt-spacing)*8);grid-template-columns:1fr auto;align-items:center;display:grid}.color-swatch-field-module__qqj6na__colorRowBlack{border-color:rgb(var(--cdt-color-gray-800));background-color:rgb(var(--cdt-color-gray-800))}.color-swatch-field-module__qqj6na__colorSwatches{grid-template-columns:repeat(10,1fr);display:grid;overflow:hidden}.color-swatch-field-module__qqj6na__label{color:rgb(var(--cdt-color-text-assistive));text-transform:capitalize}
.color-types-select-module__-2T8PG__select{border:1px solid rgb(var(--cdt-color-border-default));border-radius:var(--cdt-radius-md);background-color:rgb(var(--cdt-color-background-default));padding:0 var(--cdt-spacing);height:calc(var(--cdt-spacing)*6);color:rgb(var(--cdt-color-text-default));text-transform:capitalize;margin-left:auto}
.color-value-module__gNBglW__assistiveText{color:rgb(var(--cdt-color-text-assistive))}
.shadow-field-module__UEXj4a__field{align-items:center;gap:calc(var(--cdt-spacing)*2);border:1px solid rgb(var(--cdt-color-border-default));padding:0 calc(var(--cdt-spacing)*2);width:100%;height:calc(var(--cdt-spacing)*8);display:flex}.shadow-field-module__UEXj4a__icon{color:rgb(var(--cdt-color-icon-secondary))}.shadow-field-module__UEXj4a__text{color:rgb(var(--cdt-color-text-success));text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}