/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--bodyFontSize: 14px;--bodyLineHeight: calc(var(--bodyFontSize) * 1.6);--headingLineHeight: 1.15;--borderRadius-sm: 0.125rem;--borderRadius-md: 0.25rem;--borderRadius-mx: 999rem;--fontSize-lg: 1.05rem;--fontSize-md: 0.875rem;--fontSize-sm: 0.75rem;--fontSize-xs: 0.625rem;--fontSize-h1: 2.61275rem;--fontSize-h2: 2.177rem;--space-xl: 2.25rem;--space-lg: 1.5rem;--space-md: 1rem;--space-sm: 0.5rem;--space-xs: 0.25rem;--elevation-high: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 0.25rem 1.25rem -0.25rem rgba(0, 0, 0, 0.05), 0px 0.625rem 2.25rem 0px rgba(0, 0, 0, 0.0125)}:root{--bodyFontSize: 14px;--bodyLineHeight: calc(var(--bodyFontSize) * 1.6);--headingLineHeight: 1.15;--borderRadius-sm: 0.125rem;--borderRadius-md: 0.25rem;--borderRadius-mx: 999rem;--fontSize-lg: 1.05rem;--fontSize-md: 0.875rem;--fontSize-sm: 0.75rem;--fontSize-xs: 0.625rem;--fontSize-h1: 2.61275rem;--fontSize-h2: 2.177rem;--space-xl: 2.25rem;--space-lg: 1.5rem;--space-md: 1rem;--space-sm: 0.5rem;--space-xs: 0.25rem;--elevation-high: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 0.25rem 1.25rem -0.25rem rgba(0, 0, 0, 0.05), 0px 0.625rem 2.25rem 0px rgba(0, 0, 0, 0.0125)}:root{--ui-foreground: #3a3a3a;--container-max-width: 2100px}body{line-height:var(--bodyLineHeight);padding:var(--space-xl);font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}body *{font-size:var(--fontSize-md);box-sizing:border-box}.container{display:flex;flex-direction:column;gap:var(--space-xl);width:100%;max-width:var(--container-max-width, 2100px);margin:0 auto}header{display:flex;align-items:center;justify-content:space-between}#themeToggle{background:none;border:2px solid rgba(0,0,0,0);cursor:pointer;color:var(--ui-foreground) !important;padding:var(--space-xs)}#themeToggleIcon svg{display:block;width:1.25rem;height:1.25rem;color:inherit}.color-popover{position:absolute;background:var(--color-card);box-shadow:0 8px 24px rgba(0,0,0,.12);border-radius:6px;padding:var(--space-sm);margin-top:var(--space-xs);z-index:60;display:flex;gap:var(--space-sm);align-items:center}.color-popover label{display:flex;flex-direction:column;font-size:.9rem;color:var(--color-neutralContentStrong)}.color-popover input{font-size:.95rem;color:var(--color-neutralContentStrong);background:var(--color-card);border:1px solid var(--color-neutralNonContentSubdued)}.color-popover input[type=text]{padding:6px}.color-popover input[type=color]{width:36px;height:36px;border:none;padding:0}.color-popover .color-popover-actions{display:flex;gap:6px;margin-left:6px}@container (--theme: dark){.color-popover{background:var(--color-card)}.color-popover label{color:var(--color-neutralContentStrong)}.color-popover input{color:var(--color-neutralContentStrong);border-color:var(--color-neutralNonContentSubdued);background:var(--color-card)}}h1{line-height:var(--headingLineHeight);font-size:var(--fontSize-h1);color:var(--color-neutralContentStrong);letter-spacing:-0.022em;margin:0}h2{line-height:var(--headingLineHeight);font-size:var(--fontSize-h2);color:var(--color-neutralContentSubdued);letter-spacing:-0.022em;margin:0}#intro{display:flex;flex-direction:row;gap:var(--space-xl);width:100%}#intro p{margin:0;color:var(--color-neutralContentStrong);flex:1 1 0;min-width:0}#intro p a{color:var(--color-accentContentStrong)}#intro p a:hover{text-decoration:none}#intro p:last-child{margin:0}@media(max-width: 720px){#intro{display:none}}.share-panel{margin-top:var(--space-lg);padding:var(--space-lg);border-radius:var(--borderRadius-md);border:1px solid var(--color-neutralNonContentSoft);background:radial-gradient(circle at 90% 20%, color-mix(in oklab, var(--color-accentNonContentSoft), rgba(255, 255, 255, 0) 60%), transparent 45%),linear-gradient(140deg, color-mix(in oklab, var(--color-accentContentStrong), var(--color-card)), var(--color-card));box-shadow:0 20px 60px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:var(--space-md)}.share-panel__heading h2{margin:0;font-size:var(--fontSize-h2);color:var(--color-neutralContentStrong)}.share-panel__heading p{margin:0;color:var(--color-neutralContentSubdued)}.share-panel__buttons{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:var(--space-xs)}.share-panel__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--borderRadius-md);border:1px solid var(--color-neutralNonContentSubdued);background:var(--color-card);color:var(--color-neutralContentStrong);font-weight:600;text-decoration:none;text-align:center;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.share-panel__link:hover,.share-panel__link:focus-visible{transform:translateY(-1px);border-color:var(--color-accentNonContentStrong);box-shadow:0 10px 20px rgba(0,0,0,.12);outline:none}.share-panel__icon svg{width:1.25rem;height:1.25rem;display:block}#aside-and-main{display:flex;flex-direction:row;gap:var(--space-xl);width:100%}#aside-and-main #settings{flex:1 1 0}#aside-and-main main{flex:5 1 0}#aside-and-main a:hover{text-decoration:none}.app-split{display:flex;width:100%;height:auto;gap:0;overflow:hidden}.app-pane{flex:1 1 0;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-md);width:100%}.app-gutter{flex:0 0 12px;width:12px;cursor:col-resize;position:relative;z-index:10;pointer-events:auto;background:linear-gradient(to right, transparent, var(--color-neutralNonContentSoft) 45%, var(--color-neutralNonContentSoft) 55%, transparent);transition:background-color .2s ease-out;user-select:none;-webkit-user-select:none}.app-gutter:hover,.app-gutter:focus{background:linear-gradient(to right, transparent, var(--color-neutralNonContentSubdued) 40%, var(--color-neutralNonContentSubdued) 60%, transparent);outline:none}.app-gutter:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:-1px}#settings form,#palette,#demo{display:flex;flex-direction:column;gap:var(--space-md);width:100%}form .form-group label{display:block;margin-bottom:var(--space-xs);color:var(--color-neutralContentStrong)}form .form-group .input-hint{font-size:var(--fontSize-sm);color:var(--color-neutralContentSubdued);margin-top:var(--space-xs);line-height:1.6;display:block}form .form-group .input-hint a{font-size:var(--fontSize-sm);color:var(--color-accentContentSubdued);line-height:1.6}form .form-row{display:flex;flex-direction:row;gap:var(--space-xs);width:100%;container-type:inline-size;-webkit-container-type:inline-size}form .or{display:flex;flex-direction:row;gap:var(--space-md);width:100%;margin:0}form .or span{font-size:var(--fontSize-sm);line-height:1;text-transform:uppercase;color:var(--color-neutralContentSubdued);flex-grow:0}form .or:before,form .or:after{display:block;content:"";flex-grow:1;height:1px;position:relative;top:calc(var(--fontSize-sm)/2)}form .or:before{background-image:linear-gradient(to right, transparent, var(--color-neutralNonContentSubdued))}form .or:after{background-image:linear-gradient(to right, var(--color-neutralNonContentSubdued), transparent)}.decorated-input{position:relative}.decorated-input .mini-swatch{border-radius:var(--borderRadius-sm);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSoft);width:var(--space-lg);height:var(--space-lg);top:var(--space-sm);left:var(--space-sm);position:absolute}.decorated-input input[type=text]{padding-left:2.5rem;padding-right:2.5rem}.decorated-input .btn.btn-trailing{border-radius:var(--borderRadius-mx);padding:var(--space-sm);color:var(--color-neutralContentSubdued);position:absolute;top:0;right:0;background:none}.decorated-input .btn.btn-trailing:hover{background:var(--color-neutralNonContentSoft);color:var(--color-neutralContentStrong)}.decorated-input .btn.btn-trailing .material-symbols-rounded{display:block}input[type=text],input[type=email],input[type=password]{border-radius:var(--borderRadius-md);background:var(--color-card);border:1px solid var(--color-neutralNonContentSubdued);padding:var(--space-sm) calc(var(--space-md)*.75);color:var(--color-neutralContentStrong);line-height:var(--bodyLineHeight);flex-grow:1;width:100%}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:2px solid var(--color-accentNonContentSubdued)}.btn{border-radius:var(--borderRadius-md);padding:var(--space-sm) var(--space-md);background-color:var(--color-accentNonContentStrong);color:var(--color-card);border:2px solid rgba(0,0,0,0);line-height:1.6;text-decoration:none;cursor:pointer;font-weight:500;background:var(--color-button-background, #333);color:#fff}.btn:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.btn.btn-secondary{background-color:var(--color-button-secondary, #555);color:var(--color-card)}.btn.btn-secondary:hover{background:color-mix(in oklab, var(--color-neutralNonContentStrong), black 8%)}.btn.btn-outlined{background:none;box-shadow:inset 0 0 0 1px var(--color-accentNonContentSubdued);color:var(--color-accentContentStrong)}.btn.btn-outlined:hover{background-color:var(--color-accentNonContentSoft)}.btn.btn-soft{background:var(--color-accentNonContentSoft);color:var(--color-accentContentStrong)}.btn.btn-soft:hover{background:color-mix(in oklab, var(--color-accentNonContentSoft), rgba(0, 0, 0, 0) 50%)}.btn.btn-select{background:none;box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);color:var(--color-neutralContentStrong);text-align:left;position:relative;width:100%}.btn.btn-select:hover{background:var(--color-neutralNonContentSoft)}.btn.btn-select:after{display:block;font-family:"Material Symbols Rounded";content:"keyboard_arrow_down";position:absolute;top:8px;right:10px}.btn.btn-block{width:100%}.btn:hover{background:color-mix(in oklab, var(--color-accentNonContentStrong), white 15%)}#generateBtn{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.35)}#randomColorBtn,#randomHarmonyBtn,#generateBtn,#exportPaletteCsv,#exportPaletteJson,#copyCssBtn{--btn-bg: var(--color-accentNonContentStrong);--btn-bg-strong: var(--color-accentNonContentStrong);background:var(--btn-bg);border:1px solid var(--color-accentNonContentStrong);color:var(--btn-contrast-fallback, #ffffff)}#randomColorBtn .material-symbols-rounded,#randomHarmonyBtn .material-symbols-rounded,#generateBtn .material-symbols-rounded,#exportPaletteCsv .material-symbols-rounded,#exportPaletteJson .material-symbols-rounded,#copyCssBtn .material-symbols-rounded{color:var(--btn-contrast-fallback, #ffffff);font-size:1rem;line-height:1}#randomColorBtn:hover,#randomColorBtn:focus-visible,#randomHarmonyBtn:hover,#randomHarmonyBtn:focus-visible,#generateBtn:hover,#generateBtn:focus-visible,#exportPaletteCsv:hover,#exportPaletteCsv:focus-visible,#exportPaletteJson:hover,#exportPaletteJson:focus-visible,#copyCssBtn:hover,#copyCssBtn:focus-visible{background:color-mix(in oklab, var(--color-accentNonContentStrong), white 10%);outline:2px solid rgba(0,0,0,0);box-shadow:0 0 0 2px color-mix(in oklab, var(--color-accentNonContentStrong), transparent 50%)}@supports(color: color-contrast(#000 vs white, black)){.btn,.btn-secondary,.btn-outlined,.btn-soft,.blue-button,.usa-button{color:color-contrast(var(--btn-bg, var(--btn-bg-strong)) vs white, black)}#generateBtn,#refineBtn,#exportPaletteCsv,#exportPaletteJson,#copyCssBtn{color:color-contrast(var(--btn-bg, var(--btn-bg-strong)) vs white, black)}.material-symbols-rounded,.contrast-summary__rating-detail,.transfer-card p,#randomColorBtn .material-symbols-rounded{color:color-contrast(var(--color-card, var(--color-canvas)) vs white, black)}#randomColorBtn>.material-symbols-rounded,#generateBtn,#refineBtn,#exportPaletteCsv,#exportPaletteJson,#copyCssBtn,.reload-button,.demo-card .button{color:color-contrast(var(--btn-bg, var(--btn-bg-strong)) vs white, black)}}.btn,.blue-button,.usa-button{color:var(--btn-contrast-fallback, #ffffff)}.material-symbols-rounded,.contrast-summary__rating-detail,.transfer-card p,#randomColorBtn .material-symbols-rounded{color:var(--icon-contrast-fallback, var(--color-neutralContentStrong))}.action-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.refine-group{position:relative}.refine-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--color-card);box-shadow:0 8px 24px rgba(0,0,0,.14);border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-md);padding:4px;z-index:10}.refine-menu__item{width:100%;text-align:left;background:none;border:1px solid rgba(0,0,0,0);padding:.5rem .75rem;color:var(--color-neutralContentStrong);cursor:pointer;font:inherit;border-radius:var(--borderRadius-sm)}.refine-menu__item:hover,.refine-menu__item:focus-visible{background:var(--color-neutralNonContentSoft);outline:2px solid rgba(0,0,0,0)}.clear-overrides-label{display:inline-flex;align-items:center;gap:.5rem;margin-left:.5rem;white-space:nowrap}.palette-status{font-size:.9rem;color:var(--color-accentContentStrong);margin-top:.5rem;min-height:1.2em}@keyframes swatch-flash{0%{outline:0 solid rgba(0,0,0,0);box-shadow:0 0 0 0 rgba(0,0,0,.1)}30%{outline:2px solid var(--color-accentContentStrong);box-shadow:0 0 0 6px color-mix(in oklab, var(--color-accentContentStrong), transparent 75%)}100%{outline:0 solid rgba(0,0,0,0);box-shadow:0 0 0 0 rgba(0,0,0,0)}}.swatch-flash{animation:swatch-flash 1.2s ease-out 1}main{display:flex;flex-direction:column;gap:var(--space-xl);width:100%}.section-hint{font-size:var(--fontSize-sm);color:var(--color-neutralContentSubdued);line-height:1.5;margin:0 0 var(--space-md)}.panel-heading{margin:0 0 var(--space-md)}.panel-heading h3{margin:0;font-size:var(--fontSize-h3);color:var(--ui-foreground)}.panel-note{font-size:var(--fontSize-sm);color:var(--ui-foreground);line-height:1.5;margin:var(--space-xs) 0 0}.panel-note{color:var(--ui-foreground)}#palette{display:flex;flex-direction:column;gap:var(--space-md);width:100%;border-radius:var(--borderRadius-md)}#palette .heading{display:flex;flex-direction:row;gap:var(--space-md);width:100%}#palette .heading h2{flex:1 1 auto}#palette #toggleMode{border-radius:var(--borderRadius-md);display:flex;flex-direction:row;gap:0;width:100%;display:inline-flex;width:auto;flex:0 1 auto;background:var(--color-neutralNonContentSoft);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued)}#palette #toggleMode .btn .material-symbols-rounded{font-size:var(--space-md);line-height:var(--bodyLineHeight);width:var(--bodyLineHeight);margin-right:var(--space-xs);margin-left:calc(var(--space-sm)*-1);float:left;display:block}#palette #toggleMode .btn[data-state=off]{background:none;color:var(--color-neutralContentSubdued)}#palette #toggleMode .btn[data-state=off]:hover{color:var(--color-neutralContentStrong);background:var(--color-neutralNonContentSoft)}#palette #toggleMode .btn[data-state=on]{background:var(--color-card);color:var(--color-neutralContentStrong);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued)}#palette #toggleMode .btn[data-state=on]:hover{filter:brightness(115%)}#palette #toggleMode .btn[data-state=on] .material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 24}#palette .palette-group{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;border-radius:var(--borderRadius-md);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);padding:var(--space-md)}#palette .palette-panels{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--space-md)}#palette .palette-panel{display:flex;flex-direction:column;gap:var(--space-md);width:100%;border-radius:var(--borderRadius-md);padding:var(--space-md);background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);container-type:inline-size;--theme: light}#palette .palette-panel[data-theme-mode=dark]{--theme: dark}#palette .palette-panel[data-theme-mode=light] .panel-heading h3{color:var(--ui-foreground)}#palette .palette-panel[data-theme-mode=light] .panel-note{color:var(--ui-foreground)}#palette .palette-panel[data-theme-mode=dark] .panel-heading h3{color:var(--ui-foreground)}#palette .palette-panel[data-theme-mode=dark] .panel-note{color:var(--ui-foreground)}#palette .palette-panel[data-theme-mode=dark] .material-symbols-rounded{color:color-mix(in oklab, var(--ui-foreground), white 8%)}#palette .palette-panel[data-theme-mode=dark] .btn-secondary{background-color:color-mix(in oklab, var(--color-neutralNonContentStrong), black 10%);color:var(--color-card)}#palette .palette-panel[data-theme-mode=light] .panel-heading h3,#palette .palette-panel[data-theme-mode=light] .panel-note,#palette .palette-panel[data-theme-mode=light] .material-symbols-rounded,#palette .palette-panel[data-theme-mode=light] .contrast-summary__rating-detail,#palette .palette-panel[data-theme-mode=light] .transfer-card p{color:var(--ui-foreground)}#palette .palette-panel[data-theme-mode=light] .material-symbols-rounded,#palette .palette-panel[data-theme-mode=light] .contrast-summary__rating-detail,#palette .palette-panel[data-theme-mode=light] .transfer-card p{color:color-mix(in oklab, var(--ui-foreground), black 12%)}#palette .palette-panel[data-theme-mode=dark] .panel-heading h3,#palette .palette-panel[data-theme-mode=dark] .panel-note,#palette .palette-panel[data-theme-mode=dark] .material-symbols-rounded,#palette .palette-panel[data-theme-mode=dark] .contrast-summary__rating-detail,#palette .palette-panel[data-theme-mode=dark] .transfer-card p{color:color-mix(in oklab, var(--ui-foreground), white 12%)}#palette .demo-card .button{background:var(--btn-bg-strong, var(--btn-bg))}@container (--theme: dark){#palette .material-symbols-rounded{color:color-mix(in oklab, var(--color-neutralContentStrong), white 18%)}#palette .contrast-summary__rating-detail,#palette .transfer-card p{color:color-mix(in oklab, var(--color-neutralContentStrong), white 16%)}#palette .btn,#palette .blue-button,#palette .usa-button{background:var(--btn-bg-strong, var(--btn-bg));color:var(--btn-contrast-fallback, #eaeaea)}}@container (max-width: 480px){#palette .palette-panel .row{flex-direction:column}#palette .palette-panel .row>.col{width:100%}#palette .palette-panel .ui-swatches{display:flex;flex-wrap:wrap;gap:var(--space-sm)}#palette .palette-panel .color-swatch{flex:1 1 calc(50% - var(--space-sm));min-width:100px}}@container (max-width: 280px){#palette .palette-panel .swatch .value{display:none}}#palette .palette-heading{font-size:var(--fontSize-md);color:var(--color-neutralContentSubdued);font-weight:bold;line-height:1;text-align:center;display:block}#palette .color-swatch{margin:0;display:flex;flex-direction:column;height:100%}#palette .color-swatch figcaption{font-size:var(--fontSize-sm);margin-bottom:var(--space-sm);color:var(--ui-foreground);line-height:1;text-align:center}#palette .color-swatch .token-meta{display:block;font-size:var(--fontSize-xs);color:var(--color-neutralContentSubdued);margin-top:calc(var(--space-xs)/2);text-align:center;line-height:1}#palette .color-swatch .swatch{margin-top:auto}#palette .palette-highlight{outline:3px solid color-mix(in oklab, var(--color-accentNonContentStrong), transparent 40%);outline-offset:4px;transition:outline 180ms ease-in-out,box-shadow 180ms ease-in-out}#palette .swatch:focus{box-shadow:0 0 0 3px var(--color-accentNonContentSubdued)}#palette .row{display:flex;flex-direction:row;gap:var(--space-xs);width:100%}#palette .row>*{flex-grow:1;width:100%}#palette .col{display:flex;flex-direction:column;gap:var(--space-md);width:100%}#palette .swatch{background:var(--color-card);border-radius:var(--borderRadius-sm);height:3rem;width:100%;border:1px solid var(--color-neutralNonContentSubdued);padding:0;overflow:hidden;position:relative}#palette .swatch .color{position:absolute;inset:0;display:block;border-radius:inherit;z-index:0}#palette .swatch .value{position:absolute;left:var(--space-xs);bottom:var(--space-xs);z-index:1;color:var(--color-neutralContentStrong);border-radius:var(--borderRadius-sm);padding:0 var(--space-xs);box-shadow:0 0 0 1px var(--color-neutralNonContentSubdued);font-size:var(--fontSize-xs);font-family:monospace,monospace;background:var(--color-card)}#palette .ui-swatches .swatch{height:6rem}#palette .swatch[data-swatch-id=accentNonContentSoft]:after,#palette .swatch[data-swatch-id=neutralNonContentSoft]:after{display:none !important}#palette .palette-non-content{flex:3 1 0}#palette .palette-content{flex:2 1 0}.swatch[data-swatch-id=canvas]>.color{background-color:var(--color-canvas)}.swatch[data-swatch-id=card]>.color{background-color:var(--color-card)}.swatch[data-swatch-id=accentNonContentBaseline]>.color{background-color:var(--color-accentNonContentBaseline)}.swatch[data-swatch-id=accentContentBaseline]>.color{background-color:var(--color-accentContentBaseline)}.swatch[data-swatch-id=accentNonContentSoft]>.color{background-color:var(--color-accentNonContentSoft)}.swatch[data-swatch-id=accentNonContentSubdued]>.color{background-color:var(--color-accentNonContentSubdued)}.swatch[data-swatch-id=accentNonContentStrong]>.color{background-color:var(--color-accentNonContentStrong)}.swatch[data-swatch-id=accentContentSubdued]>.color{background-color:var(--color-accentContentSubdued)}.swatch[data-swatch-id=accentContentStrong]>.color{background-color:var(--color-accentContentStrong)}.swatch[data-swatch-id=neutralNonContentSoft]>.color{background-color:var(--color-neutralNonContentSoft)}.swatch[data-swatch-id=neutralNonContentSubdued]>.color{background-color:var(--color-neutralNonContentSubdued)}.swatch[data-swatch-id=neutralNonContentStrong]>.color{background-color:var(--color-neutralNonContentStrong)}.swatch[data-swatch-id=neutralContentSubdued]>.color{background-color:var(--color-neutralContentSubdued)}.swatch[data-swatch-id=neutralContentStrong]>.color{background-color:var(--color-neutralContentStrong)}#demo .demo-panels{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--space-md)}#demo .demo-panel{display:flex;flex-direction:column;gap:var(--space-md);width:100%;border-radius:var(--borderRadius-md);padding:var(--space-md);background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued)}#demo .demo-panel{container-type:inline-size;-webkit-container-type:inline-size;--theme: light}#demo .demo-panel[data-theme-mode=dark]{--theme: dark}#demo .demo-panel .demo-canvas{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-lg);align-items:start}@container (max-width: 480px){#demo .demo-panel .demo-canvas{display:block}#demo .demo-panel .demo-canvas>.col{width:100%;display:block}}#demo .demo-panel[data-theme-mode=light] .panel-heading h3,#demo #demo-light-title{color:var(--ui-foreground)}#demo .demo-panel[data-theme-mode=dark] .panel-heading h3,#demo #demo-dark-title{color:var(--ui-foreground)}#demo .demo-panel[data-theme-mode=light] .panel-heading h3,#demo .demo-panel[data-theme-mode=light] .panel-note,#demo .demo-panel[data-theme-mode=light] .material-symbols-rounded,#demo .demo-panel[data-theme-mode=light] .contrast-summary__rating-detail,#demo .demo-panel[data-theme-mode=light] .transfer-card p{color:var(--ui-foreground)}#demo .demo-panel[data-theme-mode=light] .material-symbols-rounded,#demo .demo-panel[data-theme-mode=light] .contrast-summary__rating-detail,#demo .demo-panel[data-theme-mode=light] .transfer-card p{color:color-mix(in oklab, var(--ui-foreground), black 12%)}#demo .demo-panel[data-theme-mode=dark] .panel-heading h3,#demo .demo-panel[data-theme-mode=dark] .panel-note,#demo .demo-panel[data-theme-mode=dark] .material-symbols-rounded,#demo .demo-panel[data-theme-mode=dark] .contrast-summary__rating-detail,#demo .demo-panel[data-theme-mode=dark] .transfer-card p{color:color-mix(in oklab, var(--ui-foreground), white 12%)}#palette-transfer{display:flex;flex-direction:column;gap:var(--space-md);width:100%;margin-top:var(--space-xl)}#palette-transfer .transfer-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:var(--space-md)}#palette-transfer .transfer-card{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;border-radius:var(--borderRadius-md);border:1px solid var(--color-neutralNonContentSubdued);padding:var(--space-md);background:var(--color-card)}#palette-transfer .transfer-card h3{color:var(--color-neutralContentStrong)}#palette-transfer .transfer-card p{color:var(--color-neutralContentSubdued)}#palette-transfer .eyebrow{color:var(--color-neutralContentSubdued);text-transform:uppercase;font-size:var(--fontSize-sm);font-weight:600}#palette-transfer .file-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-md);border:1px dashed var(--color-accentContentStrong);border-radius:999px;cursor:pointer;font-weight:600;color:var(--color-accentContentStrong)}#palette-transfer .file-chip input{position:absolute;inset:0;opacity:0;cursor:pointer}#palette-transfer .csv-guidance ul{margin:0;padding-left:var(--space-lg);color:var(--color-neutralContentSubdued)}#palette-transfer .csv-guidance ul li+li{margin-top:var(--space-xs)}#palette-transfer .json-guidance{margin-top:var(--space-sm)}#palette-transfer .json-guidance p{color:var(--color-neutralContentSubdued)}#palette-transfer #paletteTransferStatus[data-state=error]{color:var(--color-accentContentStrong)}#palette-transfer .transfer-card p{color:var(--color-neutralContentStrong)}@container (--theme: dark){#palette-transfer .transfer-card p{color:var(--color-neutralContentStrong)}}.demo-canvas{border-radius:var(--borderRadius-md);display:flex;flex-direction:row;gap:var(--space-lg);width:100%;padding:var(--space-lg);background-color:var(--color-canvas)}.demo-canvas>.col{display:flex;flex-direction:column;gap:var(--space-lg);width:100%;flex:1 1 0;min-width:0}.demo-canvas .material-symbols-rounded{font-size:var(--fontSize-lg);font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24;color:var(--ui-foreground)}.demo-canvas .card{border-radius:var(--borderRadius-md);box-shadow:var(--elevation-high);background-color:var(--color-card);padding:var(--space-md)}.demo-canvas .card>*{margin-bottom:var(--space-md)}.demo-canvas .card>*:last-child{margin:0}.demo-canvas a{color:var(--color-accentContentStrong)}.demo-canvas a:hover{text-decoration:none}.demo-canvas .menu{border-radius:var(--borderRadius-md);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);padding:0;margin:0 0 inherit}.demo-canvas .menu li{list-style:none;margin:0;padding:0}.demo-canvas .menu li a{display:block;padding:var(--space-sm) calc(var(--space-md)*.75);text-decoration:none;color:var(--color-neutralContentSubdued)}.demo-canvas .menu li a:hover{color:var(--color-neutralContentStrong);background:var(--color-neutralNonContentSoft)}.demo-canvas .menu li.selected a{background:var(--color-accentNonContentSoft);color:var(--color-neutralContentStrong)}.demo-canvas .alert{display:flex;flex-direction:row;gap:var(--space-md);width:100%;border-radius:var(--borderRadius-md);color:var(--color-accentContentStrong);background:var(--color-accentNonContentSoft);padding:calc(var(--space-md)*.75) var(--space-md)}.demo-canvas .alert .material-symbols-rounded{color:var(--color-accentContentStrong);font-size:var(--space-md);line-height:var(--bodyLineHeight)}.demo-canvas .alert .icon-svg{width:1.25rem;height:1.25rem;display:inline-block;flex:0 0 1.25rem;margin-right:calc(var(--space-sm));color:var(--color-accentContentStrong)}.demo-canvas .alert .alert .material-symbols-rounded{font-family:"Material Symbols Rounded",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}.demo-canvas .editor-container.app-card{background:var(--color-card);color:var(--color-neutralContentStrong);border-radius:var(--borderRadius-md);box-shadow:var(--elevation-high);overflow:hidden;margin-bottom:var(--space-md);border:1px solid var(--color-neutralNonContentSubdued)}.demo-canvas .editor-toolbar{display:flex;gap:var(--space-sm);padding:calc(var(--space-sm));align-items:center;border-bottom:1px solid var(--color-neutralNonContentSubdued);background:color-mix(in oklab, var(--color-card), var(--color-accentNonContentBaseline) 8%);color:var(--color-neutralContentStrong)}.demo-canvas .editor-btn{background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:.35rem;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutralContentStrong);transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}.demo-canvas .editor-btn:hover{background:var(--color-accentNonContentSoft);color:var(--color-accentContentStrong);border-color:var(--color-accentContentSubdued)}.demo-canvas .editor-btn:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.demo-canvas .editor-btn.active{background:var(--color-accentNonContentStrong);color:var(--color-card);border-color:var(--color-accentContentStrong)}.demo-canvas .editor-toolbar .divider{width:1px;height:1.4rem;background:var(--color-neutralNonContentSubdued);border-radius:2px}.demo-canvas .editor-content{padding:var(--space-md);min-height:6rem;background:var(--color-card);color:var(--color-neutralContentStrong);line-height:var(--bodyLineHeight);resize:vertical;overflow:auto;box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued)}.demo-canvas .tag{border-radius:var(--borderRadius-mx);color:var(--color-accentContentStrong);background:var(--color-accentNonContentSoft);padding:0 var(--space-sm);font-size:var(--fontSize-sm);line-height:var(--bodyLineHeight);display:inline-block}.demo-canvas .tag.tag-outlined{box-shadow:inset 0 0 0 1px var(--color-accentNonContentSubdued);background:none}.demo-canvas input[type=checkbox],.demo-canvas input[type=radio]{appearance:none;background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);height:var(--space-md);width:var(--space-md);vertical-align:text-bottom;position:relative;margin:calc((var(--bodyLineHeight) - var(--space-md))/2) 0}.demo-canvas input[type=checkbox]:before,.demo-canvas input[type=radio]:before{content:"";position:absolute;margin:auto;left:0;right:0;bottom:0;overflow:hidden;top:0}.demo-canvas input[type=checkbox]{border-radius:var(--borderRadius-sm)}.demo-canvas input[type=checkbox]:checked{background:var(--color-accentNonContentStrong);box-shadow:none}.demo-canvas input[type=checkbox]:checked:before{border-right:.125rem solid var(--color-card);border-bottom:.125rem solid var(--color-card);height:50%;width:25%;transform:rotate(45deg);margin-top:12.5%;margin-left:30%}.demo-canvas input[type=checkbox][role=switch]{border-radius:var(--borderRadius-mx);color:var(--color-card);background:var(--color-neutralNonContentSubdued);-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;font-size:inherit;width:var(--space-lg);vertical-align:text-bottom;box-shadow:none}.demo-canvas input[type=checkbox][role=switch]:before{border-radius:var(--borderRadius-mx);background:var(--color-card);content:"";border:none;transform:none;margin:1px;width:calc(var(--space-md) - 2px);height:calc(var(--space-md) - 2px);position:absolute}.demo-canvas input[type=checkbox][role=switch]:checked{background:var(--color-accentNonContentStrong)}.demo-canvas input[type=checkbox][role=switch]:checked:before{right:0;left:auto}.demo-canvas input[type=radio]{border-radius:var(--borderRadius-mx)}.demo-canvas input[type=radio]:checked{box-shadow:inset 0 0 0 1px var(--color-accentNonContentStrong)}.demo-canvas input[type=radio]:checked:before{border-radius:var(--borderRadius-mx);background:var(--color-accentNonContentStrong);margin:4px}.demo-canvas .media{display:flex;flex-direction:row;gap:var(--space-md);width:100%;align-items:center}.demo-canvas .media img{border-radius:var(--borderRadius-md);display:block;width:2.8418rem;height:2.8418rem}.demo-canvas .text-pair{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}.demo-canvas .text-pair.text-pair-md-sm{padding-bottom:.2434rem}.demo-canvas .text-pair .text-md{color:var(--color-neutralContentStrong);word-break:break-word}.demo-canvas .text-pair .text-sm{font-size:var(--fontSize-sm);color:var(--color-neutralContentSubdued);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-canvas .toolbar{display:flex;flex-direction:row;gap:0;width:100%;border-radius:var(--borderRadius-md);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);overflow:hidden}.demo-canvas .toolbar .btn-group{display:flex;flex-direction:row;gap:0;width:100%;border-right:1px solid var(--color-neutralNonContentSubdued)}.demo-canvas .toolbar .btn-group .btn{background:none;padding:var(--space-sm)}.demo-canvas .toolbar .btn-group .btn span{color:var(--color-neutralContentStrong);width:var(--bodyLineHeight);line-height:var(--bodyLineHeight);display:block;text-align:center}.demo-canvas .toolbar .btn-group .btn:hover{background-color:var(--color-neutralNonContentSoft)}.demo-canvas .toolbar .btn-group .btn{transition:background 150ms ease,color 150ms ease,transform 120ms ease}.demo-canvas .toolbar .btn-group .btn:hover{transform:translateY(-1px)}.demo-canvas .toolbar .btn-group .btn:active{transform:translateY(0)}.demo-canvas .toolbar .btn-group .btn .material-symbols-rounded{color:var(--color-accentContentStrong)}.demo-canvas .toolbar .btn-group:last-child{border:none}.demo-canvas .toolbar .btn-select{position:relative;padding-right:calc(var(--space-md) + var(--space-sm))}.demo-canvas .toolbar .btn-select:after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--color-neutralContentSubdued);font-size:.75rem}.demo-canvas .toast{border-radius:var(--borderRadius-md);box-shadow:var(--elevation-high);padding:calc(var(--space-md)*.75) var(--space-md);color:var(--color-card);background:var(--color-neutralContentStrong)}.demo-canvas .nav.nav-tabs{display:flex;flex-direction:row;gap:0;width:100%;box-sizing:border-box;border-bottom:1px solid var(--color-neutralNonContentSubdued);margin:0;padding:0;background:var(--color-card)}.demo-canvas .nav.nav-tabs li{list-style:none;display:block;padding:0;margin:0}.demo-canvas .nav.nav-tabs li a{display:block;padding:8px 10px;text-decoration:none;position:relative;color:var(--color-neutralContentSubdued);background:var(--color-card);border:1px solid rgba(0,0,0,0);border-bottom:none;border-radius:var(--borderRadius-md) var(--borderRadius-md) 0 0}.demo-canvas .nav.nav-tabs li a:hover{color:var(--color-neutralContentStrong);background:var(--color-accentNonContentSoft);border-color:var(--color-neutralNonContentSubdued)}.demo-canvas .nav.nav-tabs li a:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.demo-canvas .nav.nav-tabs li.selected a{color:var(--color-accentContentStrong);background:var(--color-card);border-color:var(--color-neutralNonContentSubdued)}.demo-canvas .nav.nav-tabs li.selected a::after{display:block;content:"";height:2px;width:100%;bottom:0;left:0;position:absolute;background:var(--color-accentContentStrong)}.demo-canvas .nav.nav-tabs li a[aria-selected=true]{color:var(--color-accentContentStrong);background:var(--color-card);border-color:var(--color-neutralNonContentSubdued)}@container (max-width: 100px){.demo-canvas .form-row{display:block !important}.demo-canvas .form-row input[type=text],.demo-canvas .form-row input[type=email],.demo-canvas .form-row input[type=password]{display:block;width:100%;margin-bottom:var(--space-xs)}.demo-canvas .form-row .btn{display:block;width:100%}}.demo-canvas .avatars{overflow:hidden}.demo-canvas .avatars .avatar{border-radius:var(--borderRadius-mx);width:var(--space-xl);height:var(--space-xl);line-height:var(--space-xl);margin-right:var(--space-sm);display:block;float:left;overflow:hidden;text-align:center}.demo-canvas .avatars .avatar img{display:block;height:100%;width:100%}.demo-canvas .avatars .avatar.avatar-solid.avatar-subdued{background:var(--color-accentNonContentSubdued)}.demo-canvas .avatars .avatar.avatar-solid.avatar-strong{background:var(--color-accentNonContentStrong)}.demo-canvas .avatars .avatar.avatar-solid{color:var(--color-neutralContentStrong)}@container (--theme: dark){.demo-canvas .avatars .avatar.avatar-solid{color:var(--color-neutralContentStrongOnDark, var(--color-neutralContentStrong))}}.demo-canvas .avatars .avatar.avatar-soft.avatar-subdued{color:var(--color-accentContentSubdued)}.demo-canvas .avatars .avatar.avatar-soft.avatar-strong{color:var(--color-accentContentStrong)}.demo-canvas .avatars .avatar.avatar-soft{background:var(--color-accentNonContentSoft)}.demo-canvas .avatars .avatar.avatar-icon span{font-size:calc(var(--fontSize-md)*1.5);font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 24;line-height:var(--space-xl)}.demo-canvas .avatars .avatar.avatar-icon.avatar-solid span{color:var(--color-neutralContentStrong)}@container (--theme: dark){.demo-canvas .avatars .avatar.avatar-icon.avatar-solid span{color:var(--color-neutralContentStrongOnDark, var(--color-neutralContentStrong))}}.demo-canvas .avatars .avatar.avatar-icon.avatar-soft.avatar-subdued span{color:var(--color-accentContentSubdued)}.demo-canvas .avatars .avatar.avatar-icon.avatar-soft.avatar-strong span{color:var(--color-accentContentStrong)}.demo-canvas hr{display:block;height:0;width:100%;border-bottom:1 solid var(--color-neutralNonContentSubdued)}.demo-canvas blockquote{padding:0 0 0 var(--space-md);border-left:4px solid var(--color-neutralNonContentSubdued);color:var(--color-neutralContentStrong);margin:0}.demo-canvas blockquote a:hover{text-decoration:none}.demo-canvas .checkboxes{border-radius:var(--borderRadius-md);background:var(--color-neutralNonContentSoft);padding:var(--space-md)}.demo-canvas .checkboxes .form-check{display:flex;flex-direction:row;gap:var(--space-sm);width:100%}.demo-canvas .checkboxes .form-check input[type=checkbox]{flex:none}.demo-canvas .checkboxes .form-check label{color:var(--color-neutralContentStrong)}.demo-canvas .checkboxes .form-check.form-check-struckout label{color:var(--color-neutralContentSubdued);text-decoration:line-through}.demo-canvas .checkboxes a:hover{text-decoration:none}[data-theme=light] body{background-color:#fff;color:var(--color-neutralContentStrong)}@container (--theme: light){#palette .swatch .value{background:#fff}.demo-canvas .card{box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSoft)}}[data-theme=dark] body{background-color:#000;color:var(--color-neutralContentStrong)}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3,[data-theme=dark] h4,[data-theme=dark] h5,[data-theme=dark] h6,[data-theme=dark] p,[data-theme=dark] label,[data-theme=dark] .input-hint,[data-theme=dark] span{color:inherit}[data-theme=dark] .btn-secondary{color:#fff}[data-theme=dark] .eyebrow,[data-theme=dark] .transfer-card h3{color:var(--color-neutralContentStrong)}[data-theme=dark] .contrast-summary__rating-detail,[data-theme-mode=dark] .contrast-summary__rating-detail{color:var(--color-neutralContentStrong)}[data-theme=dark] .transfer-card p,[data-theme-mode=dark] .transfer-card p{color:color-contrast(#27282a vs #fff, #cfd1d5)}@container (--theme: dark){#palette .swatch .value{background:#000}#palette .swatch .value{color:#fff;background:hsla(0,0%,100%,.06)}.demo-canvas .card{box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSoft)}.transfer-card h3{color:#fff}}[data-theme=dark] .swatch .value,[data-theme-mode=dark] .swatch .value,html[data-theme=dark] .swatch .value{color:#fff;background:var(--color-card);box-shadow:0 0 0 1px color-mix(in oklab, #ffffff 20%, var(--color-neutralNonContentSoft))}.hidden-social-media-thumbnail{display:none}.contrast-report{margin-top:var(--space-lg);border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-md);background:var(--color-card);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.contrast-report__heading{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm)}.contrast-report__heading h3{margin:0}.contrast-report__meta{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap}.contrast-report .pill{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:var(--color-neutralNonContentSoft);color:var(--color-neutralContentStrong);font-size:var(--fontSize-sm)}.contrast-report__theme{border-top:1px solid var(--color-neutralNonContentSubdued);padding-top:var(--space-sm);margin-top:var(--space-sm)}.contrast-report__theme-label{font-weight:600;color:var(--color-neutralContentStrong);margin-bottom:var(--space-xs)}.contrast-group{margin-bottom:var(--space-sm)}.contrast-group__header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs);color:var(--color-neutralContentStrong);font-weight:600}.contrast-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--borderRadius-sm);border:1px solid var(--color-neutralNonContentSubdued);background:var(--color-card);font-size:var(--fontSize-sm)}.contrast-chip::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--chip-color, var(--color-card));border:1px solid var(--color-neutralNonContentSubdued)}.contrast-row{display:grid;grid-template-columns:minmax(120px, 1fr) .7fr .9fr .9fr;gap:var(--space-xs);padding:6px 8px;border:1px solid var(--color-neutralNonContentSoft);border-radius:var(--borderRadius-sm);background:color-mix(in oklab, var(--color-card), transparent 10%);margin-bottom:var(--space-xs)}.contrast-row__bg{color:var(--color-neutralContentStrong)}.contrast-row__usage{color:var(--color-neutralContentSubdued);font-weight:600;text-transform:capitalize}.contrast-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:var(--borderRadius-sm);font-weight:600;font-size:var(--fontSize-sm)}.contrast-badge.pass{background:color-mix(in oklab, var(--color-success), transparent 60%);color:var(--color-neutralContentStrong)}.contrast-badge.fail{background:color-mix(in oklab, var(--color-error), transparent 70%);color:var(--color-neutralContentStrong)}.contrast-badge.neutral{background:var(--color-neutralNonContentSoft);color:var(--color-neutralContentStrong)}.contrast-report__empty{color:var(--color-neutralContentSubdued);font-size:var(--fontSize-sm);margin-top:var(--space-xs)}.contrast-summary{display:flex;flex-direction:column;gap:var(--space-sm)}.contrast-summary__rating{border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-md);padding:var(--space-sm);background:color-mix(in oklab, var(--color-card), transparent 6%)}.contrast-summary__rating-label{font-weight:700;color:var(--color-neutralContentStrong);margin-bottom:2px}.contrast-summary__rating-detail{color:var(--color-neutralContentSubdued);font-size:var(--fontSize-sm)}.contrast-summary__rating--good{border-color:color-mix(in oklab, var(--color-success), transparent 60%)}.contrast-summary__rating--great{border-color:color-mix(in oklab, var(--color-success), transparent 40%)}.contrast-summary__rating--ok{border-color:color-mix(in oklab, var(--color-warning), transparent 55%)}.contrast-summary__rating--bad{border-color:color-mix(in oklab, var(--color-error), transparent 60%)}.contrast-summary__stats{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.contrast-report__open{appearance:none;border:1px solid var(--color-neutralNonContentSubdued);background:color-mix(in oklab, var(--color-card), transparent 10%);color:var(--color-neutralContentStrong);border-radius:var(--borderRadius-sm);padding:6px 10px;font-size:var(--fontSize-sm);font-weight:600;cursor:pointer;transition:border-color 120ms ease,box-shadow 120ms ease,transform 120ms ease}.contrast-report__open:hover:not(:disabled){border-color:var(--color-neutralContentStrong);box-shadow:0 1px 2px rgba(0,0,0,.08)}.contrast-report__open:active:not(:disabled){transform:translateY(1px)}.contrast-report__open:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.contrast-report__open:disabled{opacity:.55;cursor:not-allowed}.contrast-grid-modal{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;padding:var(--space-lg);z-index:60}.contrast-grid-modal.is-open{display:flex}.contrast-grid-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.contrast-grid-modal__dialog{position:relative;max-width:1100px;width:min(1100px,100%);max-height:90vh;overflow:auto;background:var(--color-card);border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-md);box-shadow:0 12px 40px rgba(0,0,0,.18);padding:var(--space-lg)}.contrast-grid-modal__header{display:flex;justify-content:space-between;gap:var(--space-sm);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--space-sm)}.contrast-grid-modal__actions{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.contrast-grid__summary{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-sm)}.contrast-grid__summary-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--borderRadius-sm);background:var(--color-neutralNonContentSoft);color:var(--color-neutralContentStrong);font-weight:600;font-size:var(--fontSize-sm)}.contrast-grid__summary-pill strong{color:var(--color-neutralContentStrong)}.contrast-grid__body{display:flex;flex-direction:column;gap:var(--space-lg)}.contrast-grid__theme{border-top:1px solid var(--color-neutralNonContentSubdued);padding-top:var(--space-sm)}.contrast-grid__theme-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-xs)}.contrast-grid__theme-title{margin:0;font-size:var(--fontSize-md);color:var(--color-neutralContentStrong)}.contrast-grid__matrix-wrap{overflow-x:auto;padding-bottom:var(--space-xs)}.contrast-grid__matrix{--contrast-grid-cols: 1;display:grid;grid-template-columns:minmax(160px, 1fr) repeat(var(--contrast-grid-cols), minmax(120px, 1fr));gap:var(--space-xs);align-items:stretch}.contrast-grid__matrix .contrast-grid__header,.contrast-grid__matrix .contrast-grid__row-label{font-weight:700;color:var(--color-neutralContentStrong);font-size:var(--fontSize-sm)}.contrast-grid__matrix .contrast-grid__header{display:flex;align-items:center;gap:var(--space-xxs)}.contrast-grid__bg-chip,.contrast-grid__fg-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-sm);background:var(--color-card)}.contrast-grid__chip-swatch{width:16px;height:16px;border-radius:6px;border:1px solid var(--color-neutralNonContentSubdued)}.contrast-grid__row-label{display:flex;align-items:center;gap:var(--space-xxs);padding:var(--space-xs);border:1px solid var(--color-neutralNonContentSoft);border-radius:var(--borderRadius-sm);background:color-mix(in oklab, var(--color-card), transparent 6%)}.contrast-grid__cell{position:relative;width:100%;padding:var(--space-xs);border:1px solid var(--color-neutralNonContentSoft);border-radius:var(--borderRadius-sm);background:color-mix(in oklab, var(--color-card), transparent 8%);color:var(--color-neutralContentStrong);text-align:left;cursor:pointer;transition:border-color 120ms ease,box-shadow 120ms ease,transform 120ms ease;min-height:92px}.contrast-grid__cell:hover,.contrast-grid__cell:focus-visible{border-color:var(--color-neutralContentStrong);box-shadow:0 0 0 1px var(--color-neutralContentStrong)}.contrast-grid__cell:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.contrast-grid__cell.is-pass{box-shadow:0 0 0 1px color-mix(in oklab, var(--color-success), transparent 60%)}.contrast-grid__cell.is-fail{box-shadow:0 0 0 1px color-mix(in oklab, var(--color-error), transparent 60%)}.contrast-grid__cell.is-mixed{box-shadow:0 0 0 1px color-mix(in oklab, var(--color-warning), transparent 55%)}.contrast-grid__cell.is-unknown{opacity:.85}.contrast-grid__swatch{border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-sm);padding:var(--space-xs);background:var(--bg-color, var(--color-card));color:var(--fg-color, var(--color-neutralContentStrong));display:flex;align-items:center;justify-content:center;font-weight:700;height:48px}.contrast-grid__status{display:flex;align-items:center;gap:var(--space-xxs);font-weight:700;margin-top:6px;font-size:var(--fontSize-sm)}.contrast-grid__status.is-pass{color:var(--color-success)}.contrast-grid__status.is-fail{color:var(--color-error)}.contrast-grid__status.is-mixed{color:var(--color-warning)}.contrast-grid__status.is-unknown{color:var(--color-neutralContentSubdued)}.contrast-grid__icon{width:16px;height:16px}.contrast-grid__tooltip{display:none;position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;background:color-mix(in oklab, var(--color-card), var(--color-neutralNonContentSoft) 25%);border:1px solid var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-sm);box-shadow:0 8px 20px rgba(0,0,0,.16);font-size:var(--fontSize-sm);line-height:1.4;color:var(--color-neutralContentStrong);z-index:2}.contrast-grid__tooltip strong{color:var(--color-neutralContentStrong)}.contrast-grid__tooltip p{margin:0 0 4px}.contrast-grid__tooltip p:last-child{margin:0}.contrast-grid__cell:hover .contrast-grid__tooltip,.contrast-grid__cell:focus-visible .contrast-grid__tooltip,.contrast-grid__cell:focus .contrast-grid__tooltip{display:block}.contrast-grid__empty{color:var(--color-neutralContentSubdued);font-size:var(--fontSize-sm);margin-top:var(--space-xs)}body.has-contrast-grid-open{overflow:hidden}@media(max-width: 767px){.contrast-report{margin-top:var(--space-md)}.contrast-report__heading{flex-direction:column}.contrast-row{grid-template-columns:1fr}.contrast-grid-modal{padding:var(--space-md);align-items:stretch}.contrast-grid-modal__dialog{max-height:92vh}}.split{display:flex;width:100%;gap:0;align-items:stretch;--split: 50%;--left-width: var(--left-width, var(--split))}.split>.split-left,.split>.split-right{min-width:0;overflow:auto;container-type:inline-size;-webkit-container-type:inline-size}.split>.split-left{flex:0 0 var(--left-width, var(--split))}.split>.split-right{flex:1 1 calc(100% - var(--left-width, var(--split)))}.splitter{position:relative;width:12px;flex:0 0 12px;display:flex;align-items:center;justify-content:center;cursor:col-resize;background:linear-gradient(90deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.04));-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;transition:background 160ms ease}.splitter::before{content:"";position:absolute;top:0;bottom:0;left:-8px;right:-8px;cursor:inherit}.splitter:hover::before,.splitter:focus-visible::before{background:rgba(0,0,0,.04)}.splitter:focus{outline:2px solid rgba(0,0,0,0);outline-offset:2px;border-radius:6px}.splitter .grip{width:2px;height:40px;background:rgba(0,0,0,.18);border-radius:2px}.splitter:focus-visible{box-shadow:0 0 0 6px rgba(59,130,246,.14)}@media(max-width: 767px){.split{flex-direction:column}.split>.split-left,.split>.split-right{flex:0 0 auto}.splitter{display:none}}.split>.split-left .ui-swatches,.split>.split-right .ui-swatches,.split>.split-left .demo-canvas,.split>.split-right .demo-canvas{container-type:inline-size;-webkit-container-type:inline-size}@container (max-width: 480px){.split>.split-left .ui-swatches,.split>.split-right .ui-swatches{display:block}.split>.split-left .ui-swatches>.color-swatch,.split>.split-right .ui-swatches>.color-swatch{width:100%;display:block}.split>.split-left .demo-canvas,.split>.split-right .demo-canvas{display:block}.split>.split-left .demo-canvas>.col,.split>.split-right .demo-canvas>.col{width:100%;display:block}}.tabs-container{margin-bottom:var(--space-md)}.nav-tabs{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--color-neutralNonContentSubdued);background:var(--color-card)}.nav-tabs li{margin-bottom:-1px}.nav-tabs a{display:block;padding:var(--space-sm) var(--space-md);text-decoration:none;color:var(--color-neutralContentSubdued);background:var(--color-card);border:1px solid rgba(0,0,0,0);border-bottom:none;margin-right:var(--space-xs);border-radius:var(--borderRadius-md) var(--borderRadius-md) 0 0}.nav-tabs li.selected a,.nav-tabs a[aria-selected=true]{background:var(--color-card);border-color:var(--color-neutralNonContentSubdued);border-bottom-color:var(--color-card);color:var(--color-accentContentStrong);font-weight:bold;box-shadow:inset 0 -3px 0 var(--color-accentContentStrong)}.nav-tabs a:hover:not([aria-selected=true]){background-color:var(--color-accentNonContentSoft);color:var(--color-neutralContentStrong);border-color:var(--color-neutralNonContentSubdued)}.nav-tabs a:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.tab-content{border:1px solid var(--color-neutralNonContentSubdued);border-top:none;padding:var(--space-md);background:var(--color-card);border-radius:0 0 var(--borderRadius-md) var(--borderRadius-md);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-neutralNonContentSubdued), transparent 60%);margin-top:0}.card.tab-content{box-shadow:none}.tab-pane{outline:none}.tab-pane[hidden]{display:none}.usa-button{border-radius:var(--borderRadius-md);padding:var(--space-sm) var(--space-md);background-color:var(--color-accentNonContentStrong);color:var(--color-card);border:2px solid rgba(0,0,0,0);line-height:1.6;text-decoration:none;display:inline-block;cursor:pointer;font-weight:bold;text-align:center}.usa-button:hover{background-color:color-mix(in oklab, var(--color-accentNonContentStrong), white 15%);text-decoration:none}.usa-button:active{background-color:color-mix(in oklab, var(--color-accentNonContentStrong), black 10%)}.usa-button:focus{outline:3px solid var(--color-accentContentSubdued);outline-offset:2px}.usa-button--secondary{background-color:var(--color-neutralNonContentStrong);color:var(--color-card)}.usa-button--secondary:hover{background-color:color-mix(in oklab, var(--color-neutralNonContentStrong), white 15%)}.usa-button--outline{background:rgba(0,0,0,0);box-shadow:inset 0 0 0 2px var(--color-accentNonContentStrong);color:var(--color-accentContentStrong)}.usa-button--outline:hover{background-color:var(--color-accentNonContentSoft);color:var(--color-accentContentStrong)}.usa-button--big{padding:var(--space-md) var(--space-lg);font-size:var(--fontSize-lg)}.usa-button--unstyled{background:none;padding:0;border:2px solid rgba(0,0,0,0);box-shadow:none;color:var(--color-accentContentStrong);text-decoration:underline;font-weight:normal}.usa-button--unstyled:hover{background:none;color:var(--color-accentContentStrong)}.usa-checkbox{background:rgba(0,0,0,0);display:block;margin-bottom:var(--space-sm);position:relative}.usa-checkbox__input{position:absolute;left:0;top:0;width:1.25rem;height:1.25rem;opacity:0;z-index:1;cursor:pointer}.usa-checkbox__label{cursor:pointer;display:block;font-weight:normal;margin:0;padding-left:2rem;position:relative;min-height:1.5rem;line-height:1.5;color:var(--color-neutralContentStrong)}.usa-checkbox__label::before{content:"";position:absolute;top:.125rem;left:0;display:block;width:1.25rem;height:1.25rem;background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-neutralNonContentSubdued);border-radius:var(--borderRadius-sm)}.usa-checkbox__input:checked+.usa-checkbox__label::before{background-color:var(--color-accentNonContentStrong);box-shadow:none}.usa-checkbox__input:checked+.usa-checkbox__label::after{content:"";position:absolute;top:.35rem;left:.35rem;width:.6rem;height:.35rem;border-left:2px solid var(--color-card);border-bottom:2px solid var(--color-card);transform:rotate(-45deg)}.usa-checkbox__input:focus+.usa-checkbox__label::before{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.usa-checkbox--struckout .usa-checkbox__label{text-decoration:line-through;color:var(--color-neutralContentSubdued)}.usa-alert{position:relative;padding:var(--space-md);background-color:var(--color-card);border-left:.5rem solid var(--color-neutralContentStrong);margin-bottom:var(--space-md)}.usa-alert--error{background-color:color-mix(in oklab, #d54309, white 90%);border-left-color:#d54309}@container (--theme: dark){.usa-alert--error{background-color:color-mix(in oklab, #d54309, black 80%)}}.usa-alert__body{padding-left:var(--space-sm)}.usa-alert__heading{margin-top:0;margin-bottom:var(--space-xs);font-weight:bold;font-size:var(--fontSize-lg);color:var(--color-neutralContentStrong)}.usa-alert__text{margin:0;color:var(--color-neutralContentStrong)}.usa-form-group--error{border-left:.25rem solid #d54309;padding-left:var(--space-sm);margin-left:calc(var(--space-sm)*-1)}.usa-label--error{font-weight:bold;color:var(--color-neutralContentStrong)}.usa-error-message{display:block;color:#d54309;font-weight:bold;margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.usa-input--error{border:2px solid #d54309 !important}.usa-accordion{list-style-type:none;margin:0;padding:0;width:100%;border-top:1px solid var(--color-neutralNonContentSubdued);background:var(--color-card)}.usa-accordion__item{border-bottom:1px solid var(--color-neutralNonContentSubdued);background:var(--color-card)}.usa-accordion__button{background-color:var(--color-card);border:1px solid rgba(0,0,0,0);color:var(--color-neutralContentStrong);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:bold;margin:0;padding:var(--space-md);text-align:left;text-decoration:none;width:100%;box-shadow:inset 0 -1px 0 var(--color-neutralNonContentSubdued)}.usa-accordion__button:hover{background-color:var(--color-accentNonContentSoft);color:var(--color-accentContentStrong);border-color:var(--color-neutralNonContentSubdued)}.usa-accordion__button[aria-expanded=true]{background-color:var(--color-accentNonContentSoft);color:var(--color-accentContentStrong);box-shadow:inset 0 -2px 0 var(--color-accentContentStrong);border-color:var(--color-neutralNonContentSubdued)}.usa-accordion__button:focus-visible{outline:2px solid var(--color-accentContentStrong);outline-offset:2px}.accordion-icon{flex-shrink:0;color:var(--color-accentContentStrong);transition:transform 200ms ease;transform:rotate(0deg)}.usa-accordion__button[aria-expanded=true] .accordion-icon{transform:rotate(180deg)}.usa-accordion__content{background-color:var(--color-card);overflow:hidden;padding:var(--space-md);color:var(--color-neutralContentStrong);border:1px solid var(--color-neutralNonContentSubdued);border-top:none}.usa-accordion__content[hidden]{display:none}.usa-table{border-collapse:collapse;border-spacing:0;width:100%;margin-top:var(--space-sm);background-color:var(--color-card)}.usa-table th,.usa-table td{border:1px solid var(--color-neutralNonContentSubdued);padding:var(--space-sm);text-align:left;color:var(--color-neutralContentStrong)}.usa-table th{background-color:color-mix(in oklab, var(--color-accentNonContentSoft), var(--color-neutralNonContentSoft) 35%);font-weight:bold}.usa-table--striped tbody tr:nth-child(odd) td{background-color:color-mix(in oklab, var(--color-accentNonContentSoft), var(--color-neutralNonContentSoft) 55%)}@container (--theme: dark){.usa-table--striped tbody tr:nth-child(odd) td{background-color:color-mix(in oklab, var(--color-accentNonContentSoft), var(--color-card) 70%)}}.token-highlight{position:relative;outline:3px solid var(--color-accentNonContentStrong) !important;outline-offset:2px;box-shadow:0 0 0 4px color-mix(in oklab, var(--color-card), transparent 65%),0 0 12px color-mix(in oklab, var(--color-accentContentStrong), transparent 45%) !important;z-index:100 !important}.token-highlight.pop{transform-origin:center center;transform:scale(1.05);transition:transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),box-shadow 220ms ease}@media(prefers-reduced-motion: reduce){.token-highlight.pop{transform:none;transition:none}}@media(prefers-reduced-motion: no-preference){.token-highlight{transition:box-shadow 240ms ease,transform 240ms ease}.token-highlight.pulse{animation:tokenPulse 1200ms ease-in-out infinite}@keyframes tokenPulse{0%{transform:translateZ(0) scale(1)}50%{transform:translateZ(0) scale(1.02)}100%{transform:translateZ(0) scale(1)}}}@media(prefers-reduced-motion: reduce){.token-highlight{transition:none}}.data-viz-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md)}.data-viz-chart{width:100%;height:auto;max-width:200px;display:block}@media(forced-colors: active){svg,.icon-svg,.material-symbols-rounded{fill:CanvasText;color:CanvasText}a svg,a .icon-svg{fill:LinkText}button svg,.btn svg,button .icon-svg,.btn .icon-svg{fill:ButtonText}.color-popover,.refine-menu,#palette .palette-panel,#demo .demo-panel,.transfer-card,.demo-canvas{border:2px solid CanvasText}button:focus,.btn:focus,input:focus,textarea:focus,select:focus,a:focus{outline-color:CanvasText}button:hover,.btn:hover,a:hover{font-weight:bold;text-decoration:underline}input,textarea,select{border-color:FieldText}.swatch .value{box-shadow:none;border:1px solid FieldText;background:Canvas;color:FieldText}button:disabled,.btn:disabled,input:disabled{opacity:.5}}