.color-roles-section[data-astro-cid-bu3uer6c]{flex-direction:column;gap:16px;margin-block:16px;display:flex;& .color-roles{flex-wrap:wrap;gap:16px;display:flex}& .color-roles-swatch{flex:1;align-items:flex-start;min-height:64px;padding:8px;font-size:.75rem;font-weight:600;line-height:1.15;display:flex}& .color-roles-pair{flex-direction:column;display:flex}& .color-roles-swatch--wide{flex:2}& .color-roles-swatch--small{min-height:40px}& .color-roles-accent{flex:3 480px;grid-template-columns:repeat(3,1fr);gap:16px;display:grid}& .color-roles-accent-column{flex-direction:column;gap:2px;display:flex}& .color-roles-fixed{flex:3 480px;grid-template-columns:repeat(3,1fr);gap:16px;display:grid}& .color-roles-fixed-group{flex-direction:column;display:flex}& .color-roles-fixed-top{display:flex}& .color-roles-error-inverse{flex:320px;gap:16px;display:flex}& .color-roles-error,& .color-roles-inverse{flex-direction:column;flex:160px;gap:2px;display:flex}& .color-roles-scrim-shadow{gap:2px;display:flex}& .color-roles-surface{flex-direction:column;gap:2px;display:flex}& .color-roles-surface-row{display:flex}@media (width<40rem){& .color-roles-accent,& .color-roles-fixed{grid-template-columns:1fr}& .color-roles-error-inverse,& .color-roles-fixed-top,& .color-roles-scrim-shadow,& .color-roles-surface-row{flex-direction:column}}& [data-role=primary]{background:var(--md-primary);color:var(--md-on-primary)}& [data-role=on-primary]{background:var(--md-surface);color:var(--md-primary)}& [data-role=primary-container]{background:var(--md-primary-container);color:var(--md-on-primary-container)}& [data-role=on-primary-container]{background:var(--md-on-primary-container);color:var(--md-primary-container)}& [data-role=secondary]{background:var(--md-secondary);color:var(--md-on-secondary)}& [data-role=on-secondary]{background:var(--md-surface);color:var(--md-secondary)}& [data-role=secondary-container]{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}& [data-role=on-secondary-container]{background:var(--md-on-secondary-container);color:var(--md-secondary-container)}& [data-role=tertiary]{background:var(--md-tertiary);color:var(--md-on-tertiary)}& [data-role=on-tertiary]{background:var(--md-surface);color:var(--md-tertiary)}& [data-role=tertiary-container]{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}& [data-role=on-tertiary-container]{background:var(--md-on-tertiary-container);color:var(--md-tertiary-container)}& [data-role=error]{background:var(--md-error);color:var(--md-on-error)}& [data-role=on-error]{background:var(--md-surface);color:var(--md-error)}& [data-role=error-container]{background:var(--md-error-container);color:var(--md-on-error-container)}& [data-role=on-error-container]{background:var(--md-on-error-container);color:var(--md-error-container)}& [data-role=primary-fixed]{background:var(--md-primary-fixed);color:var(--md-on-primary-fixed)}& [data-role=primary-fixed-dim]{background:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed)}& [data-role=on-primary-fixed]{background:var(--md-on-primary-fixed);color:var(--md-primary-fixed)}& [data-role=on-primary-fixed-variant]{background:var(--md-on-primary-fixed-variant);color:var(--md-primary-fixed)}& [data-role=secondary-fixed]{background:var(--md-secondary-fixed);color:var(--md-on-secondary-fixed)}& [data-role=secondary-fixed-dim]{background:var(--md-secondary-fixed-dim);color:var(--md-on-secondary-fixed)}& [data-role=on-secondary-fixed]{background:var(--md-on-secondary-fixed);color:var(--md-secondary-fixed)}& [data-role=on-secondary-fixed-variant]{background:var(--md-on-secondary-fixed-variant);color:var(--md-secondary-fixed)}& [data-role=tertiary-fixed]{background:var(--md-tertiary-fixed);color:var(--md-on-tertiary-fixed)}& [data-role=tertiary-fixed-dim]{background:var(--md-tertiary-fixed-dim);color:var(--md-on-tertiary-fixed)}& [data-role=on-tertiary-fixed]{background:var(--md-on-tertiary-fixed);color:var(--md-tertiary-fixed)}& [data-role=on-tertiary-fixed-variant]{background:var(--md-on-tertiary-fixed-variant);color:var(--md-tertiary-fixed)}& [data-role=surface-dim]{background:var(--md-surface-dim);color:var(--md-on-surface)}& [data-role=surface]{background:var(--md-surface);color:var(--md-on-surface)}& [data-role=surface-bright]{background:var(--md-surface-bright);color:var(--md-on-surface)}& [data-role=surface-container-lowest]{background:var(--md-surface-container-lowest);color:var(--md-on-surface)}& [data-role=surface-container-low]{background:var(--md-surface-container-low);color:var(--md-on-surface)}& [data-role=surface-container]{background:var(--md-surface-container);color:var(--md-on-surface)}& [data-role=surface-container-high]{background:var(--md-surface-container-high);color:var(--md-on-surface)}& [data-role=surface-container-highest]{background:var(--md-surface-container-highest);color:var(--md-on-surface)}& [data-role=on-surface]{background:var(--md-on-surface);color:var(--md-surface)}& [data-role=on-surface-variant]{background:var(--md-on-surface-variant);color:var(--md-surface)}& [data-role=outline]{background:var(--md-outline);color:var(--md-surface)}& [data-role=outline-variant]{background:var(--md-outline-variant);color:var(--md-on-surface)}& [data-role=inverse-surface]{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}& [data-role=inverse-on-surface]{background:var(--md-inverse-on-surface);color:var(--md-inverse-surface)}& [data-role=inverse-primary]{background:var(--md-inverse-primary);color:var(--md-on-primary-container)}& [data-role=scrim]{background:var(--md-scrim);color:#fff}& [data-role=shadow]{background:var(--md-shadow);color:#fff}}