.project-example__heading{margin-block-start:1em;padding-block-start:1em}@media all and (min-width:64em){.project-example__heading{scroll-margin-block-start:2.75rem}}.project-infobox{padding-inline-start:1rem}.project-columns{-moz-columns:3 21rem;columns:3 21rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.component-nav{padding:.5rem 0;border-bottom:1px solid #4d648d}@media all and (min-width:64em){.component-nav{position:sticky;top:0;z-index:9}}.component-nav__heading{margin:0;padding-inline-end:1ch}.component-nav__container{position:relative;overflow:auto;width:-moz-fit-content;width:fit-content;height:2.25rem;margin-top:0;border:1px solid;border-radius:.25rem}.component-nav__container:hover{overflow:visible;padding:0;border:0}.component-nav__container:hover .component-nav__list{position:absolute;top:0;z-index:9;overflow:visible;width:-moz-max-content;width:max-content;margin-top:0;border:1px solid;border-radius:.25rem}.component-nav__container:hover .component-nav__list::before{content:none}.component-nav__item,.component-nav__link{display:block}.component-nav__list::before{content:"";display:block;position:absolute;top:50%;right:.25rem;z-index:9;width:1rem;height:1rem;margin-top:-.5rem;background-position:center;background-repeat:no-repeat;background-size:1rem}@supports ((-webkit-mask:url()) or (mask:url())){.component-nav__list::before{background-image:none;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}}.component-nav__item,h1+.demo-control,h2+.demo-control,h3+.demo-control,h4+.demo-control,h5+.demo-control,h6+.demo-control{margin-top:0}.component-nav__link{padding:.25rem 1.5rem .25rem .25rem}.demo-control__controls>h1+*,.demo-control__controls>h2+*,.demo-control__controls>h3+*,.demo-control__controls>h4+*,.demo-control__controls>h5+*,.demo-control__controls>h6+*,.demo-control__controls>ul li+li,.main-content h1+h2,.main-content h2+h3,.main-content h3+h4,.main-content h4+h5,h5+h6 .main-content{margin-top:.5em}.example-html h1+h2,.example-html h2+h3,.example-html h3+h4,.example-html h4+h5,.example-html h5+h6{margin-top:1rem}dd{padding-left:0}.grouped-rows tbody tr:nth-child(odd) td{border-bottom-width:0}.grouped-rows tbody tr:nth-child(even) td{border-top-width:0}.grouped-rows tbody tr:last-child td{border-bottom-width:0}@media all and (max-width:54.99em){.grouped-rows tbody tr:nth-child(2n+1){border-bottom-width:0}}.usa-table--borderless tr:has(+tr td[colspan="3"]) th[colspan="3"]{padding-bottom:0;border-bottom-width:0}.usa-table--borderless tr:has(th[colspan="3"])+tr td[colspan="3"]{padding-top:.25rem;border-top-width:0}@media all and (max-width:54.99em){.usa-table--stacked tr:has(td[colspan="3"]),.usa-table--stacked tr:has(th[colspan="3"]){border-bottom-width:1px}.usa-table--stacked tr:has(th[colspan="3"]):has(+tr td[colspan="3"]){border-bottom-width:0}.usa-table--stacked tr:has(th[colspan="3"])+tr td[colspan="3"]{padding-top:.25rem}.usa-table--stacked tr:has(+tr td[colspan="3"]) th[colspan="3"]{padding-bottom:0}.usa-table--stacked td[data-label]::before{padding-bottom:0}}.usa-table+h2,.usa-table+h3,.usa-table+h4,.usa-table+h5,.usa-table+h6{margin-top:2em}.demo-select{display:none}.demo-items{margin-top:1.5rem}.demo-item{display:none}.demo-control{align-items:flex-start}*+.demo-control{margin-top:0;padding-top:.25rem}.demo-control label{padding:.25rem .5rem;border-radius:.0625rem;line-height:1.1}.demo-control label:hover{outline:.125rem solid}.demo-control--row{margin-top:.5rem}.demo-control__heading+*{margin-left:.5rem}.demo-control--inline{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}.button-examples .usa-button+.usa-button,.demo-control--inline .usa-button+.usa-button{margin-left:0}@media all and (min-width:40em){.demo-control__controls{padding-top:.25rem}}.button-examples{flex-wrap:wrap;gap:.5rem}#accordion-checked-basic:checked~.demo-control [for=accordion-checked-basic],#accordion-checked-bordered:checked~.demo-control [for=accordion-checked-bordered],#accordion-checked-buttons:checked~.demo-control [for=accordion-checked-buttons],#accordion-checked-themed:checked~.demo-control [for=accordion-checked-themed],#align-feature-checked-center:checked~.demo-control [for=align-feature-checked-center],#align-feature-checked-end:checked~.demo-control [for=align-feature-checked-end],#align-feature-checked-start:checked~.demo-control [for=align-feature-checked-start],#blocknav-checked-basic:checked~.demo-control [for=blocknav-checked-basic],#blocknav-checked-blur:checked~.demo-control [for=blocknav-checked-blur],#blocknav-checked-gap:checked~.demo-control [for=blocknav-checked-gap],#blocknav-checked-wrap:checked~.demo-control [for=blocknav-checked-wrap],#button-checked-alternate:checked~.demo-control [for=button-checked-alternate],#button-checked-basic:checked~.demo-control [for=button-checked-basic],#button-checked-custom:checked~.demo-control [for=button-checked-custom],#button-checked-uswds:checked~.demo-control [for=button-checked-uswds],#details-checked-accent-cool:checked~.demo-control [for=details-checked-accent-cool],#details-checked-accent-warm:checked~.demo-control [for=details-checked-accent-warm],#details-checked-base-dark:checked~.demo-control [for=details-checked-base-dark],#details-checked-base-light:checked~.demo-control [for=details-checked-base-light],#details-checked-base:checked~.demo-control [for=details-checked-base],#details-checked-blue-dark:checked~.demo-control [for=details-checked-blue-dark],#details-checked-blue:checked~.demo-control [for=details-checked-blue],#details-checked-bordered:checked~.demo-control [for=details-checked-bordered],#details-checked-default:checked~.demo-control [for=details-checked-default],#details-checked-grouped:checked~.demo-control [for=details-checked-grouped],#details-checked-primary:checked~.demo-control [for=details-checked-primary],#details-checked-secondary:checked~.demo-control [for=details-checked-secondary],#external-checked-default:checked~.demo-control [for=external-checked-default],#external-checked-internal:checked~.demo-control [for=external-checked-internal],#external-checked-video:checked~.demo-control [for=external-checked-video],#feature-checked-alignment:checked~.demo-control [for=feature-checked-alignment],#feature-checked-blurred:checked~.demo-control [for=feature-checked-blurred],#feature-checked-default:checked~.demo-control [for=feature-checked-default],#feature-checked-grid:checked~.demo-control [for=feature-checked-grid],#feature-checked-overlay:checked~.demo-control [for=feature-checked-overlay],#feature-group-checked-borderless:checked~.demo-control [for=feature-group-checked-borderless],#feature-group-checked-unwrapped:checked~.demo-control [for=feature-group-checked-unwrapped],#justify-feature-checked-around:checked~.demo-control [for=justify-feature-checked-around],#justify-feature-checked-between:checked~.demo-control [for=justify-feature-checked-between],#justify-feature-checked-center:checked~.demo-control [for=justify-feature-checked-center],#justify-feature-checked-end:checked~.demo-control [for=justify-feature-checked-end],#justify-feature-checked-evenly:checked~.demo-control [for=justify-feature-checked-evenly],#justify-feature-checked-start:checked~.demo-control [for=justify-feature-checked-start],#stacked-feature-checked-accent-cool:checked~.demo-control [for=stacked-feature-checked-accent-cool],#stacked-feature-checked-accent-warm:checked~.demo-control [for=stacked-feature-checked-accent-warm],#stacked-feature-checked-base:checked~.demo-control [for=stacked-feature-checked-base],#stacked-feature-checked-basic:checked~.demo-control [for=stacked-feature-checked-basic],#stacked-feature-checked-blue:checked~.demo-control [for=stacked-feature-checked-blue],#stacked-feature-checked-borderless:checked~.demo-control [for=stacked-feature-checked-borderless],#stacked-feature-checked-extended:checked~.demo-control [for=stacked-feature-checked-extended],#stacked-feature-checked-primary:checked~.demo-control [for=stacked-feature-checked-primary],#stacked-feature-checked-secondary:checked~.demo-control [for=stacked-feature-checked-secondary],#stacked-feature-checked-unwrapped:checked~.demo-control [for=stacked-feature-checked-unwrapped],#table-checked-borderless:checked~.demo-control [for=table-checked-borderless],#table-checked-scrollable:checked~.demo-control [for=table-checked-scrollable],#table-checked-stacked:checked~.demo-control [for=table-checked-stacked],#table-checked-standard:checked~.demo-control [for=table-checked-standard],#table-checked-striped:checked~.demo-control [for=table-checked-striped],#tabs-checked-block-full:checked~.demo-control [for=tabs-checked-block-full],#tabs-checked-block-vertical:checked~.demo-control [for=tabs-checked-block-vertical],#tabs-checked-block:checked~.demo-control [for=tabs-checked-block],#tabs-checked-custom:checked~.demo-control [for=tabs-checked-custom],#tabs-checked-default:checked~.demo-control [for=tabs-checked-default],#tabs-checked-vertical:checked~.demo-control [for=tabs-checked-vertical]{color:#fff;background-color:#1f215a;outline:.125rem solid #1f215a}#accordion-checked-basic:checked~.demo-items #basic-accordion,#accordion-checked-bordered:checked~.demo-items #bordered-accordion,#accordion-checked-buttons:checked~.demo-items #buttons-accordion,#accordion-checked-themed:checked~.demo-items #themed-accordion,#align-feature-checked-center:checked~.demo-items #center-align-feature,#align-feature-checked-end:checked~.demo-items #end-align-feature,#align-feature-checked-start:checked~.demo-items #start-align-feature,#blocknav-checked-basic:checked~.demo-items #basic-blocknav,#blocknav-checked-blur:checked~.demo-items #blur-blocknav,#blocknav-checked-gap:checked~.demo-items #gaps-blocknav,#blocknav-checked-wrap:checked~.demo-items #wrap-blocknav,#button-checked-alternate:checked~.demo-items #alternate-buttons,#button-checked-basic:checked~.demo-items #basic-button,#button-checked-custom:checked~.demo-items #custom-buttons,#button-checked-uswds:checked~.demo-items #uswds-buttons,#details-checked-accent-cool:checked~.demo-control #themed-accent-cool-details,#details-checked-accent-warm:checked~.demo-control #themed-accent-warm-details,#details-checked-base-dark:checked~.demo-control #themed-base-dark-details,#details-checked-base-light:checked~.demo-control #themed-base-light-details,#details-checked-base:checked~.demo-control #themed-base-details,#details-checked-blue-dark:checked~.demo-control #themed-blue-dark-details,#details-checked-blue:checked~.demo-control #themed-blue-details,#details-checked-bordered:checked~.demo-control #bordered-details,#details-checked-default:checked~.demo-control #default-details,#details-checked-grouped:checked~.demo-control #grouped-details,#details-checked-primary:checked~.demo-control #themed-primary-details,#details-checked-secondary:checked~.demo-control #themed-secondary-details,#external-checked-default:checked~.demo-items #default-external,#external-checked-internal:checked~.demo-items #internal-external,#external-checked-video:checked~.demo-items #video-external,#feature-checked-alignment:checked~.demo-items #alignment-feature,#feature-checked-blurred:checked~.demo-items #blurred-feature,#feature-checked-default:checked~.demo-items #default-feature,#feature-checked-grid:checked~.demo-items #grid-feature,#feature-checked-overlay:checked~.demo-items #overlay-feature,#feature-group-checked-borderless:checked~.demo-items #borderless-feature-group,#feature-group-checked-unwrapped:checked~.demo-items #unwrapped-feature-group,#justify-feature-checked-around:checked~.demo-items #around-justify-feature,#justify-feature-checked-between:checked~.demo-items #between-justify-feature,#justify-feature-checked-center:checked~.demo-items #center-justify-feature,#justify-feature-checked-end:checked~.demo-items #end-justify-feature,#justify-feature-checked-evenly:checked~.demo-items #evenly-justify-feature,#justify-feature-checked-start:checked~.demo-items #start-justify-feature,#stacked-feature-checked-accent-cool:checked~.demo-items #accent-cool-stacked-feature,#stacked-feature-checked-accent-warm:checked~.demo-items #accent-warm-stacked-feature,#stacked-feature-checked-base:checked~.demo-items #base-stacked-feature,#stacked-feature-checked-basic:checked~.demo-items #basic-stacked-feature,#stacked-feature-checked-blue:checked~.demo-items #blue-stacked-feature,#stacked-feature-checked-borderless:checked~.demo-items #borderless-stacked-feature,#stacked-feature-checked-extended:checked~.demo-items #extended-stacked-feature,#stacked-feature-checked-primary:checked~.demo-items #primary-stacked-feature,#stacked-feature-checked-secondary:checked~.demo-items #secondary-stacked-feature,#table-checked-borderless:checked~.demo-items #borderless-table,#table-checked-scrollable:checked~.demo-items #scrollable-table,#table-checked-stacked:checked~.demo-items #stacked-table,#table-checked-standard:checked~.demo-items #standard-table,#table-checked-striped:checked~.demo-items #striped-table,#tabs-checked-block-full:checked~.demo-items #block-full-tabs,#tabs-checked-block-vertical:checked~.demo-items #block-vertical-tabs,#tabs-checked-block:checked~.demo-items #block-tabs,#tabs-checked-custom:checked~.demo-items #custom-tabs,#tabs-checked-default:checked~.demo-items #default-tabs,#tabs-checked-vertical:checked~.demo-items #vertical-tabs{display:block}.font-size__role>li,.font-size__typeface>li{padding-top:.5rem;padding-bottom:.25rem}.font-size__role>li+li,.font-size__typeface>li+li{margin-top:.25rem}.font-size--micro{font-size:.625rem}.font-size--1{font-size:.75rem}.font-size--2{font-size:.8125rem}.font-size--3{font-size:.875rem}.font-size--4{font-size:.9375rem}.font-size--5{font-size:1rem}.font-size--6{font-size:1.0625rem}.font-size--7{font-size:1.125rem}.font-size--8{font-size:1.25rem}.font-size--9{font-size:1.375rem}.font-size--10{font-size:1.5rem}.font-size--11{font-size:1.75rem}.font-size--12{font-size:2rem}.font-size--13{font-size:2.25rem}.font-size--14{font-size:2.5rem}.font-size--15{font-size:3rem}.font-size--16{font-size:3.5rem}.font-size--17{font-size:4rem}.font-size--18{font-size:5rem}.font-size--19{font-size:7.5rem}.font-size--20{font-size:8.75rem}.color-row{display:flex;flex-wrap:wrap;row-gap:1rem;margin-top:1em;margin-left:-.5rem;margin-right:-.5rem}.color-row>li{flex:1 1 auto;position:relative;box-sizing:border-box;width:100%;padding-left:.5rem;padding-right:.5rem}@media all and (min-width:40em){.color-row>li{width:50%}}@media all and (min-width:48em){.color-row>li{width:33.334%}}.color-row>li+li{margin-top:0}@media all and (min-width:75em){.color-row--quarters>li{width:25%}}@supports (gap:1rem){.color-row{gap:1rem;margin-left:0;margin-right:0}.color-row>li{padding-left:0;padding-right:0}@media all and (min-width:40em){.color-row>li{width:calc(50% - .5rem)}}@media all and (min-width:48em){.color-row>li{width:calc(33.334% - .67rem)}}@media all and (min-width:64em){.color-row--quarters>li{width:calc(25% - .75rem)}}@media all and (min-width:48em){.color-row .color-box{flex-grow:0;width:calc(33.334% - .67rem)}.color-row .margin-right-1box{margin-right:calc(33.334% + .25rem)}.color-row .margin-right-2box{margin-right:calc(67% + .4rem)}}}.color-box__text{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem 2rem}.project-token+.color-value{margin-top:.125em}.theme-token+.project-token{margin-top:.5em}.theme-token~.color-value{margin-top:0}.bg-primary-1{color:#161617;background-color:#f5f7fb}.bg-primary-2{color:#161617;background-color:#f1f4f9}.bg-primary-5{color:#161617;background-color:#ecf0f8}.bg-primary-10{color:#161617;background-color:#dae2f0}.bg-primary-20{color:#161617;background-color:#b4c4e1}.bg-primary-30{color:#161617;background-color:#8fa7d2}.bg-primary-40{color:#161617;background-color:#6989c3}.bg-primary-50{color:#fff;background-color:#446cb4}.bg-primary-60{color:#fff;background-color:#365690}.bg-primary-70{color:#fff;background-color:#29416c}.bg-primary-75{color:#fff;background-color:#22365a}.bg-primary-80{color:#fff;background-color:#1b2b48}.bg-primary-90{color:#fff;background-color:#0e1624}.bg-primary-95{color:#fff;background-color:#070b12}.bg-secondary-1{color:#161617;background-color:#f3f4f6}.bg-secondary-2{color:#161617;background-color:#eff0f2}.bg-secondary-5{color:#161617;background-color:#eaebee}.bg-secondary-10{color:#161617;background-color:#d4d7dd}.bg-secondary-20{color:#161617;background-color:#a9afbb}.bg-secondary-30{color:#161617;background-color:#7e8699}.bg-secondary-40{color:#fff;background-color:#535e77}.bg-secondary-50{color:#fff;background-color:#283655}.bg-secondary-60{color:#fff;background-color:#202b44}.bg-secondary-70{color:#fff;background-color:#182033}.bg-secondary-75{color:#fff;background-color:#141b2b}.bg-secondary-80{color:#fff;background-color:#101622}.bg-secondary-90{color:#fff;background-color:#080b11}.bg-secondary-95{color:#fff;background-color:#040509}.bg-neutral-1,.bg-neutral-2{color:#161617;background-color:#fdfdfd}.bg-neutral-5{color:#161617;background-color:#fcfcfc}.bg-neutral-10{color:#161617;background-color:#f9f9f9}.bg-neutral-20{color:#161617;background-color:#f2f2f3}.bg-neutral-30{color:#161617;background-color:#ececee}.bg-neutral-40{color:#161617;background-color:#e5e5e8}.bg-neutral-50{color:#161617;background-color:#dfdfe2}.bg-neutral-60{color:#161617;background-color:#b2b2b5}.bg-neutral-70{color:#161617;background-color:#868688}.bg-neutral-75{color:#fff;background-color:#707071}.bg-neutral-80{color:#fff;background-color:#59595a}.bg-neutral-90{color:#fff;background-color:#2d2d2d}.bg-neutral-95{color:#fff;background-color:#161617}.bg-blue-50{color:#fff;background-color:#4d648d}.bg-bright-blue-5{color:#161617;background-color:#e6f1f8}.bg-bright-blue-10{color:#161617;background-color:#cce3f2}.bg-bright-blue-20{color:#161617;background-color:#99c6e4}.bg-bright-blue-30{color:#161617;background-color:#66aad7}.bg-bright-blue-40{color:#161617;background-color:#338dc9}.bg-bright-blue-50{color:#fff;background-color:#0071bc}.bg-bright-blue-60{color:#fff;background-color:#005a96}.bg-bright-blue-70{color:#fff;background-color:#004471}.bg-bright-blue-80{color:#fff;background-color:#002d4b}.bg-bright-blue-90{color:#fff;background-color:#001726}.bg-light-blue-50,.usa-table tbody td[colspan="3"],.usa-table tbody th[colspan="3"],.usa-table thead th{color:#161617;background-color:#d1e0f3}.bg-blue-50v{color:#fff;background-color:#1f215a}.bg-base-lightest{background-color:#f9f9f9}.bg-base-lighter{background-color:#f2f2f3}.bg-base-light{background-color:#ececee}.bg-base{background-color:#dfdfe2}.bg-base-dark{background-color:#b2b2b5}.bg-base-darker{color:#fff;background-color:#707071}.bg-base-darkest{color:#fff;background-color:#161617}.bg-primary-lightest{background-color:#dae2f0}.bg-primary-lighter{background-color:#8fa7d2}.bg-primary-light{background-color:#6989c3}.bg-primary{color:#fff;background-color:#446cb4}.bg-primary-vivid{color:#fff;background-color:#1f215a}.bg-primary-dark{color:#fff;background-color:#365690}.bg-primary-darker{color:#fff;background-color:#29416c}.bg-primary-darkest{color:#fff;background-color:#1b2b48}.bg-secondary-lightest{background-color:#d4d7dd}.bg-secondary-lighter{background-color:#7e8699}.bg-secondary-light{color:#fff;background-color:#535e77}.bg-secondary{color:#fff;background-color:#283655}.bg-secondary-vivid{color:#fff;background-color:#4d648d}.bg-secondary-dark{color:#fff;background-color:#202b44}.bg-secondary-darker{color:#fff;background-color:#182033}.bg-secondary-darkest{color:#fff;background-color:#101622}.bg-accent-warm-lighter{background-color:#f2e4d4}.bg-accent-warm-light{background-color:#ffbc78}.bg-accent-warm{background-color:#fa9441}.bg-accent-warm-dark{color:#000;background-color:#c05600}.bg-accent-warm-darker{color:#fff;background-color:#775540}.bg-accent-cool-lighter{background-color:#e1f3f8}.bg-accent-cool-light{background-color:#97d4ea}.bg-accent-cool{background-color:#00bde3}.bg-accent-cool-dark{background-color:#28a0cb}.bg-accent-cool-darker{color:#fff;background-color:#07648d}.bg-ink{color:#fff}.project-examples__icons{display:flex;flex-wrap:wrap;justify-content:space-between;margin-inline:-.5rem}.project-examples__icons>li{position:relative;box-sizing:border-box;flex:0 1 auto;width:100%;margin-top:0;padding:.5rem}@media all and (min-width:30em){.project-examples__icons>li{width:50%}}@media all and (min-width:48em){.project-examples__icons>li{width:33.3334%}}@media all and (min-width:60em){.project-examples__icons>li{width:25%}}.project-examples__icons>li:last-child{margin-right:auto}.project-details--bordered[open] *+.project-examples__icons{margin-top:.5rem}.project-examples__icon-button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:4rem;padding:.5rem;border:.125rem solid #2378c3;border-radius:.25rem;background-color:transparent}.project-examples__icon-button:active,.project-examples__icon-button:focus,.project-examples__icon-button:hover{color:#fff;background-color:#005ea2;border-color:#005ea2}.project-examples__icon-button:active+.icon-code,.project-examples__icon-button:focus+.icon-code,.project-examples__icon-button:hover+.icon-code{display:block}.project-examples__icon-button.usa-link--facebook{color:#3b5998;border-color:#3b5998}.project-examples__icon-button.usa-link--facebook:active,.project-examples__icon-button.usa-link--facebook:focus,.project-examples__icon-button.usa-link--facebook:hover{color:#fff;background-color:#3b5998;border-color:#3b5998}.project-examples__icon-button.usa-link--instagram{color:#d60c5c;border-color:#d60c5c}.project-examples__icon-button.usa-link--instagram:active,.project-examples__icon-button.usa-link--instagram:focus,.project-examples__icon-button.usa-link--instagram:hover{color:#fff;background-color:#d60c5c;border-color:#d60c5c}.project-examples__icon-button.usa-link--linkedin{color:#0077b5;border-color:#0077b5}.project-examples__icon-button.usa-link--linkedin:active,.project-examples__icon-button.usa-link--linkedin:focus,.project-examples__icon-button.usa-link--linkedin:hover{color:#fff;background-color:#0077b5;border-color:#0077b5}.project-examples__icon-button.usa-link--twitter{color:#55acee;border-color:#55acee}.project-examples__icon-button.usa-link--twitter:active,.project-examples__icon-button.usa-link--twitter:focus,.project-examples__icon-button.usa-link--twitter:hover{color:#fff;background-color:#55acee;border-color:#55acee}.project-examples__icon-button.usa-link--x{color:#000;border-color:#000}.project-examples__icon-button.usa-link--x:active,.project-examples__icon-button.usa-link--x:focus,.project-examples__icon-button.usa-link--x:hover{color:#fff;background-color:#000;border-color:#000}.project-examples__icon-button.usa-link--youtube{color:#e52d27;border-color:#e52d27}.project-examples__icon-button.usa-link--youtube:active,.project-examples__icon-button.usa-link--youtube:focus,.project-examples__icon-button.usa-link--youtube:hover{color:#fff;background-color:#e52d27;border-color:#e52d27}@media all and (min-width:37.5em){.project-examples__icon-button{flex-direction:row;justify-content:flex-start}}.project-examples__icon-button span{font-size:.87rem}@media all and (min-width:37.5em){.project-examples__icon-button span{margin-left:.5rem}}.icon-code{display:none;position:absolute;bottom:.375rem;left:50%;z-index:9;transform:translate(-50%,100%);width:calc(100% - .5rem);padding:.5rem;background-color:#fff;border:.125rem solid #2378c3;border-radius:.25rem}.icon-code:active,.icon-code:focus,.icon-code:hover{display:block}.icon-code::before{content:"";position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);width:1.75rem;border-left:.825rem solid transparent;border-right:.825rem solid transparent;border-bottom:.75rem solid #2378c3}.icon-code pre{white-space:normal}.icon-code code{font-size:.72rem}.introduction-text{font-size:1.6rem;font-weight:200;line-height:1.3}.project-example__heading{border-top:1px solid #4d648d}.project-infobox{border-left:.125rem solid #ececee}.component-nav{background-color:#fff}.component-nav__heading{font-size:1.06rem;line-height:2.25}.component-nav__container,.component-nav__container:hover .component-nav__list{border-color:#dfdfe2;color:#161617;background-color:#f2f2f3}.component-nav__list{display:block}.component-nav__list::before{background-image:url(../../assets/img/sort-both.svg),linear-gradient(transparent,transparent)}@supports ((-webkit-mask:url()) or (mask:url())){.component-nav__list::before{-webkit-mask-image:url(../../assets/img/sort-both.svg),linear-gradient(transparent,transparent);mask-image:url(../../assets/img/sort-both.svg),linear-gradient(transparent,transparent)}}.component-nav__link,.demo-control label,.demo-control label:hover{text-decoration:none}.component-nav__link,.component-nav__link:visited{color:#161617}.component-nav__link:active,.component-nav__link:focus,.component-nav__link:hover{color:#fff;background-color:#005ea2}.grouped-rows tbody td[colspan] h1,.grouped-rows tbody td[colspan] h2,.grouped-rows tbody td[colspan] h3,.grouped-rows tbody td[colspan] h4,.grouped-rows tbody td[colspan] h5,.grouped-rows tbody td[colspan] h6{font-size:1.13rem}.demo-control label:hover{color:#fff;background-color:#1f215a;outline-color:#1f215a}.color-box__text,.demo-control__heading{font-size:1.13rem;font-weight:600}.font-size__role>li,.font-size__tokens td,.font-size__tokens th,.font-size__typeface>li{line-height:1.1}.project-token,.theme-token{font-size:1.33rem}@media all and (min-width:64em){.project-token,.theme-token{font-size:1.22rem}}.theme-token+.project-token{font-size:1rem}@media all and (min-width:64em){.theme-token+.project-token{font-size:.89rem}}.example-icon{transform:translateY(25%)}.project-details--bordered [open] details summary,.project-details--bordered[open] details summary{margin-inline:0}.project-details--bordered [open] .demo-item [open] summary,.project-details--bordered [open] .demo-item[open] summary,.project-details--bordered [open] .project-details--accordion [open] summary,.project-details--bordered [open] .project-details--accordion+[open] summary,.project-details--bordered [open] .project-details--accordion[open] summary,.project-details--bordered [open] .project-details--bordered [open] summary,.project-details--bordered [open] .project-details--bordered[open] summary,.project-details--bordered [open] [open] summary,.project-details--bordered[open] .demo-item [open] summary,.project-details--bordered[open] .demo-item[open] summary,.project-details--bordered[open] .project-details--accordion [open] summary,.project-details--bordered[open] .project-details--accordion+[open] summary,.project-details--bordered[open] .project-details--accordion[open] summary,.project-details--bordered[open] .project-details--bordered [open] summary,.project-details--bordered[open] .project-details--bordered[open] summary,.project-details--bordered[open] [open] summary{margin-inline:-1.25rem}