.component-demo{gap:var(--hds-space-24);width:100%;min-width:0;display:grid}.component-demo__controls{gap:var(--hds-space-16);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.component-demo__control{gap:var(--hds-space-8);color:var(--hds-color-text-primary);font-size:var(--hds-font-size-body-sm);font-weight:var(--hds-font-weight-medium);line-height:var(--hds-font-line-height-body-sm);display:grid}.component-demo__control select,.component-demo__control input[type=text]{box-sizing:border-box;width:100%;min-height:var(--hds-size-control-small);padding-inline:var(--hds-space-12);color:var(--hds-color-text-primary);background:var(--hds-color-bg-surface);border:1px solid var(--hds-color-border-default);border-radius:var(--hds-radius-md);font:inherit}.component-demo__control select:focus-visible,.component-demo__control input[type=text]:focus-visible{border-color:var(--hds-color-border-focus);box-shadow:0 0 0 var(--hds-space-4) var(--hds-color-focus-ring);outline:none}.component-demo__toggle{min-height:var(--hds-size-control-small);align-items:center;gap:var(--hds-space-8);color:var(--hds-color-text-primary);font-size:var(--hds-font-size-body-sm);line-height:var(--hds-font-line-height-body-sm);display:inline-flex}.component-demo__toggle input{width:var(--hds-size-icon-medium);height:var(--hds-size-icon-medium);accent-color:var(--hds-color-action-primary);margin:0}.component-demo__toggle input:focus-visible{outline:2px solid var(--hds-color-border-focus);outline-offset:2px}.component-demo__stage{place-items:center;gap:var(--hds-space-16);min-width:0;min-height:160px;padding:var(--hds-space-24);color:var(--hds-color-text-primary);background:var(--hds-color-bg-surface);border:1px solid var(--hds-color-border-default);border-radius:var(--hds-radius-lg);display:grid}.component-demo__grid{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));width:100%;min-width:0;display:grid}.component-demo__item{justify-content:center;align-items:center;gap:var(--hds-space-8);min-width:0;padding:var(--hds-space-16);color:var(--hds-color-text-primary);text-align:center;background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:flex}.component-demo__item--stacked{flex-direction:column}.component-demo__label{color:var(--hds-color-text-primary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption);overflow-wrap:anywhere}.component-demo__stack{gap:var(--hds-space-16);width:100%;min-width:0;display:grid}.component-demo__stage--scroll-area{align-items:center}.component-demo__stage--checkbox,.component-demo__stage--radio-group,.component-demo__stage--switch,.component-demo__stage--textarea{place-items:stretch stretch}.textarea-demo,.textarea-demo__form{gap:var(--hds-space-16);width:100%;min-width:0;display:grid}.component-demo__stage--select{place-items:stretch stretch}.select-demo,.select-demo__form{gap:var(--hds-space-16);width:100%;min-width:0;display:grid}.component-demo__stage--text-button{place-items:stretch stretch}.text-button-demo{gap:var(--hds-space-24);width:100%;min-width:0;display:grid}.text-button-demo__interactive{align-items:center;gap:var(--hds-space-12);min-width:0;padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);flex-wrap:wrap;display:flex}.text-button-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));min-width:0;display:grid}.text-button-demo__specimen{justify-content:center;align-items:center;gap:var(--hds-space-8);min-width:0;padding:var(--hds-space-16);text-align:center;background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);flex-direction:column;display:flex}.text-button-demo__specimen [data-text-button-sample=long-label]{width:100%}.text-button-demo__target{scroll-margin-block:var(--hds-space-24)}.component-demo__stage--icon-button{place-items:stretch stretch}.icon-button-demo{gap:var(--hds-space-24);width:100%;min-width:0;display:grid}.icon-button-demo__interactive{align-items:center;gap:var(--hds-space-12);min-width:0;padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);flex-wrap:wrap;display:flex}.icon-button-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));min-width:0;display:grid}.icon-button-demo__specimen{justify-content:center;align-items:center;gap:var(--hds-space-8);min-width:0;padding:var(--hds-space-16);text-align:center;background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);flex-direction:column;display:flex}.component-demo__stage--board-row{place-items:stretch stretch}.board-row-demo{gap:var(--hds-space-16);width:100%;min-width:0;display:grid}.board-row-demo__status{gap:var(--hds-space-12);flex-wrap:wrap;min-width:0;display:flex}.board-row-demo__specimens{gap:var(--hds-space-16);grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;display:grid}.board-row-demo__specimen{align-content:start;gap:var(--hds-space-8);min-width:0;padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:grid}.board-row-demo__specimen--wide{grid-column:1/-1}.board-row-demo__content{min-width:0;margin:var(--hds-space-0);overflow-wrap:anywhere}.component-demo__stage--tab{place-items:stretch stretch}.tab-demo{gap:var(--hds-space-16);width:100%;min-width:0;display:grid}.tab-demo__status{gap:var(--hds-space-12);flex-wrap:wrap;min-width:0;display:flex}.tab-demo__specimens{gap:var(--hds-space-16);grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;display:grid}.tab-demo__specimen{align-content:start;gap:var(--hds-space-8);min-width:0;padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:grid}.tab-demo__specimen--wide{grid-column:1/-1}.tab-demo__panel-content{min-width:0;margin:var(--hds-space-0);overflow-wrap:anywhere}.checkbox-demo{gap:var(--hds-space-24);width:100%;display:grid}.checkbox-demo__interactive,.checkbox-demo__specimen{align-content:start;gap:var(--hds-space-8);min-width:0;display:grid}.radio-group-demo{gap:var(--hds-space-24);width:100%;display:grid}.radio-group-demo__interactive,.radio-group-demo__specimen{align-content:start;gap:var(--hds-space-8);min-width:0;display:grid}.switch-demo{gap:var(--hds-space-24);width:100%;display:grid}.switch-demo__interactive,.switch-demo__specimen{align-content:start;gap:var(--hds-space-8);min-width:0;display:grid}.switch-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.switch-demo__specimen{padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md)}.radio-group-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.radio-group-demo__specimen{padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md)}.checkbox-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.checkbox-demo__specimen{padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md)}.scroll-area-demo{background:var(--hds-color-bg-surface);border-radius:var(--hds-radius-lg);width:min(100%,420px);height:320px;box-shadow:inset 0 0 0 1px var(--hds-color-border-default)}.scroll-area-demo__list{gap:var(--hds-space-12);min-width:0;padding:var(--hds-space-16);display:grid}.scroll-area-demo__card{gap:var(--hds-space-4);min-width:0;padding:var(--hds-space-16);color:var(--hds-color-text-primary);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:grid}.scroll-area-demo__card strong{font-size:var(--hds-font-size-body-sm);line-height:var(--hds-font-line-height-body-sm)}.scroll-area-demo__card span{color:var(--hds-color-text-primary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption)}.component-demo__stage--bottom-sheet{place-items:stretch stretch}.bottom-sheet-demo__launcher{min-inline-size:var(--hds-space-0);justify-items:start;gap:var(--hds-space-12);display:grid}.bottom-sheet-demo__guidance,.bottom-sheet-demo__body p{min-inline-size:var(--hds-space-0);margin:var(--hds-space-0);color:var(--hds-color-text-secondary);font-size:var(--hds-font-size-body-sm);line-height:var(--hds-font-line-height-body-sm);overflow-wrap:anywhere}.bottom-sheet-demo__body{min-inline-size:var(--hds-space-0);gap:var(--hds-space-12);display:grid}.component-demo__stage--dialog{place-items:stretch stretch}.dialog-demo__interactive{min-inline-size:var(--hds-space-0);gap:var(--hds-space-16);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.dialog-demo__launcher{min-inline-size:var(--hds-space-0);align-content:start;justify-items:start;gap:var(--hds-space-12);padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:grid}.dialog-demo__specimens{min-inline-size:var(--hds-space-0);gap:var(--hds-space-16);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.dialog-demo__specimen{min-inline-size:var(--hds-space-0);align-content:start;gap:var(--hds-space-8);padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);display:grid}.dialog-demo__surface{max-block-size:none;inline-size:100%}.component-demo__stage--search-field{place-items:stretch stretch}.search-field-demo__form,.search-field-demo__specimen{gap:var(--hds-space-8);grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid}.search-field-demo__status{color:var(--hds-color-text-secondary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption);overflow-wrap:anywhere;margin:0}.search-field-demo__specimens{gap:var(--hds-space-12);grid-template-columns:repeat(3,minmax(0,1fr));min-inline-size:0;display:grid}.search-field-demo__specimen{padding:var(--hds-space-16);background:var(--hds-color-bg-subtle);border-radius:var(--hds-radius-md);align-content:start}.search-field-demo__fixed-viewport{background:var(--hds-color-bg-surface);border:1px solid var(--hds-color-border-default);border-radius:var(--hds-radius-lg);block-size:240px;min-inline-size:0;position:relative;overflow:hidden}.search-field-demo__fixed-viewport .hds-search-field.search-field-demo__fixed-field[data-fixed=true] .hds-search-field__bar{position:absolute}.search-field-demo__fixed-scroll{block-size:calc(240px - var(--hds-size-control-large) - var(--hds-space-16));overscroll-behavior:contain;overflow:auto}.search-field-demo__fixed-scroll:focus-visible{outline:var(--hds-space-2) solid var(--hds-color-border-focus);outline-offset:calc(var(--hds-space-2) * -1)}.search-field-demo__result{padding:var(--hds-space-16);color:var(--hds-color-text-primary);border-block-end:1px solid var(--hds-color-border-default)}.component-demo__stage--list-row{place-items:stretch stretch}.list-row-demo{min-inline-size:var(--hds-space-0);gap:var(--hds-space-16);display:grid}.list-row-demo__status,.list-row-demo__target{min-inline-size:var(--hds-space-0);margin:var(--hds-space-0);color:var(--hds-color-text-secondary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption);overflow-wrap:anywhere}.list-row-demo__group{min-inline-size:var(--hds-space-0);background:var(--hds-color-bg-surface);border:var(--hds-space-2) solid var(--hds-color-border-default);border-radius:var(--hds-radius-md);overflow:hidden}.list-row-demo__target:focus-visible{outline:var(--hds-space-2) solid var(--hds-color-border-focus);outline-offset:var(--hds-space-2)}.component-demo__stage--toast{place-items:stretch stretch}.toast-demo{min-inline-size:var(--hds-space-0);gap:var(--hds-space-16);display:grid}.toast-demo__status{min-inline-size:var(--hds-space-0);margin:var(--hds-space-0);color:var(--hds-color-text-secondary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption);overflow-wrap:anywhere}.toast-demo__controls{min-inline-size:var(--hds-space-0);gap:var(--hds-space-8);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));display:grid}.toast-demo__controls .hds-button{inline-size:100%}.toast-demo__specimens{min-inline-size:var(--hds-space-0);gap:var(--hds-space-12);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.toast-demo__specimen.hds-toast{inline-size:100%;max-inline-size:none}.toast-demo__specimen-action{min-inline-size:var(--hds-space-0);color:inherit;font-weight:var(--hds-font-weight-semibold);overflow-wrap:anywhere;flex:none}.component-demo__stage--bottom-cta{place-items:stretch stretch}.bottom-cta-demo{min-inline-size:var(--hds-space-0);gap:var(--hds-space-16);display:grid}.bottom-cta-demo__status{min-inline-size:var(--hds-space-0);margin:var(--hds-space-0);color:var(--hds-color-text-secondary);font-size:var(--hds-font-size-caption);line-height:var(--hds-font-line-height-caption);overflow-wrap:anywhere}.bottom-cta-demo__specimen{min-inline-size:var(--hds-space-0);gap:var(--hds-space-8);background:var(--hds-color-bg-subtle);border:var(--hds-space-2) solid var(--hds-color-border-default);border-radius:var(--hds-radius-md);display:grid;overflow:hidden}.bottom-cta-demo__specimen>.component-demo__label{padding-block-start:var(--hds-space-12);padding-inline:var(--hds-space-16)}.bottom-cta-demo__specimen--long{inline-size:min(100%,320px)}.bottom-cta-demo__fixed-viewport{min-inline-size:var(--hds-space-0);background:var(--hds-color-bg-surface);border:var(--hds-space-2) solid var(--hds-color-border-default);border-radius:var(--hds-radius-lg);block-size:320px;position:relative;overflow:hidden;transform:translateZ(0)}.bottom-cta-demo__fixed-scroll{box-sizing:border-box;overscroll-behavior:contain;block-size:100%;overflow:auto}.bottom-cta-demo__fixed-scroll:focus-visible{outline:var(--hds-space-2) solid var(--hds-color-border-focus);outline-offset:calc(var(--hds-space-2) * -1)}.bottom-cta-demo__fixed-item{padding:var(--hds-space-16);color:var(--hds-color-text-primary);border-block-end:1px solid var(--hds-color-border-default)}.bottom-cta-demo__fixed-clearance{block-size:calc(var(--hds-size-control-large) + var(--hds-space-16) + var(--hds-space-16) + var(--hds-space-4))}.bottom-cta-demo__fixed-viewport .hds-bottom-cta.bottom-cta-demo__fixed-cta[data-fixed=true] .hds-bottom-cta__panel{position:absolute}.bottom-cta-demo__fixed-cta{inset-block-end:var(--hds-space-0);inset-inline:var(--hds-space-0);position:absolute}@media (forced-colors:active){.component-demo__control select:focus-visible,.component-demo__control input[type=text]:focus-visible,.component-demo__toggle input:focus-visible{outline-offset:2px;box-shadow:none;border-color:highlight;outline:2px solid highlight}}@media (width<=480px){.component-demo__controls,.component-demo__grid{grid-template-columns:1fr}.component-demo__stage{padding:var(--hds-space-16)}.scroll-area-demo{width:100%}.text-button-demo__specimens,.icon-button-demo__specimens,.board-row-demo__specimens{grid-template-columns:1fr}.board-row-demo__specimen--wide{grid-column:auto}.tab-demo__specimens{grid-template-columns:1fr}.tab-demo__specimen--wide{grid-column:auto}.dialog-demo__interactive,.dialog-demo__specimens,.search-field-demo__specimens,.toast-demo__specimens{grid-template-columns:1fr}.bottom-cta-demo__specimen--long{inline-size:100%}}