@media only screen and (min-width:993px){.layout-outer{column-gap:15px;display:grid;grid-template-columns:285px calc(100% - 300px)}}.section-heading{border-bottom:1px solid var(--semantic-border);margin-bottom:var(--baseline-2)}.grid-sample .ody-col{background-color:var(--semantic-surface)}.grid-sample .ody-col:has(.ody-row){padding:20px}.grid-sample .ody-col:has(.ody-row) .ody-row .ody-col{background-color:var(--semantic-surface-medium);font-size:var(--font-small);min-height:40px;padding:10px 0;text-align:center;white-space:nowrap}.system-baseline{padding-bottom:1px}.system-baseline.show-baseline{background:linear-gradient(rgba(46,65,86,.15) 0,rgba(46,65,86,.15) 1px,transparent 1px,transparent var(--baseline));background-size:100% var(--baseline)}.system-baseline-example .baseline-unit{--size-unit:var(--baseline);background-color:var(--secondary-500);display:inline-block;height:var(--size-unit);width:var(--size-unit)}.system-baseline-example .baseline-unit:not(:first-child){margin-left:var(--baseline)}.system-baseline-example .baseline-unit:nth-child(2){--size-unit:calc(var(--baseline)*2)}.system-baseline-example .baseline-unit:nth-child(3){--size-unit:calc(var(--baseline)*3)}.system-baseline-example .baseline-unit:nth-child(4){--size-unit:calc(var(--baseline)*4)}.system-baseline-example .baseline-unit:nth-child(5){--size-unit:calc(var(--baseline)*5)}.system-baseline-example .baseline-unit:nth-child(6){--size-unit:calc(var(--baseline)*6)}.system-typography>:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.display){margin:0;padding:var(--baseline) 0;position:relative}.system-typography:not(.show-baseline)>:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.display):after{background-color:var(--semantic-border);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;width:100%}.system-input-button{display:flex}.system-palette-color{margin-top:var(--baseline-2);width:100%}@media only screen and (min-width:1201px){.system-palette-color{display:inline-flex}}.system-palette-color li{margin:0;padding:0;position:relative;transition:.2s ease-in-out}@media only screen and (min-width:1201px){.system-palette-color li{width:10%}}.system-palette-color li .system-palette-color-item{border-radius:4px 4px 0 0;display:block;height:5rem}.system-palette-color li[data-level="500"] .system-palette-color-item{position:relative}.system-palette-color li[data-level="500"] .system-palette-color-item:before{background-color:var(--white);border-radius:100%;content:"";height:7px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:7px}.system-palette-color li .level{bottom:calc(var(--baseline)/2);color:var(--grey-blue-300);font-size:13px;position:absolute;right:10px}@media only screen and (min-width:1201px){.system-palette-color li .level{bottom:100%;right:inherit}}.system-palette-color.tool-copy li:hover{transform:translateY(-4px)}.system-palette-color .system-tooltip-hex{background-color:var(--semantic-background);border:1px solid var(--semantic-border);flex:1;font-size:var(--font-smalsl);font-weight:700;margin-bottom:0;margin-top:auto;padding:calc(var(--baseline)/2) 10px}.module-system-theme{border:1px solid var(--semantic-border);border-radius:var(--rounded-small);padding:var(--baseline-2)}.ui-col-cell-wrap{align-items:flex-start;display:flex;gap:40px}.ui-col-cell:not(.ui-col-cell-wrap .ui-col-cell){&+.ui-col-cell{margin-top:var(--baseline-2)}}@media only screen and (min-width:993px){.layout-outer{column-gap:15px;display:grid;grid-template-columns:285px calc(100% - 300px)}}.layout-outer>aside,.layout-outer>main{background-color:var(--global-boxed-fill-light);padding:var(--baseline-2)}.block-row+.block-row{margin-top:var(--baseline-2)}.system-block-head:has(.toolbar-block){display:flex;justify-content:space-between;margin-bottom:var(--baseline)}.module-system{border:1px solid var(--semantic-border);border-radius:var(--rounded-small)}.module-system .module-system-head{column-gap:30px;display:flex;justify-content:space-between;padding:var(--baseline)}.module-system .module-system-body{padding:var(--baseline)}.module-system:not(.no-fill){background-color:var(--grey-blue-50)}.system-palette-color.system-semantic-token{display:grid;grid-template-columns:1fr 1fr;>li{width:100%;&+li{border-top:var(--baseline-2)}}}