.ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.ds-row--top{align-items:flex-start}.ds-stack{display:grid;gap:1rem}.ds-group{margin:.25rem 0 1rem .5rem}.ds-stack>.chip-list{margin:0}@media(min-width:64rem){.ds-nav-demo{min-block-size:31rem}}.functional-example.ds-example--wide{max-width:none;margin-inline:0}.ds-caption{margin:1rem 0 0;font-size:1rem;font-style:italic}.ds-site{margin:.5rem;color:var(--ink-soft);font-size:.9375rem}.ds-demo{min-block-size:6rem}.ds-demo__status{margin:0;color:var(--ink-soft)}.ds-page th[scope=row] code{text-transform:none;white-space:nowrap}.ds-swatch{white-space:nowrap}.ds-swatch:before{content:"";display:inline-block;inline-size:1.1em;block-size:1.1em;margin-inline-end:.5em;border:2px solid var(--ink);border-radius:3px;background:var(--swatch);vertical-align:-.2em}.ds-specimen{overflow-wrap:normal;word-break:normal}.ds-bar{min-inline-size:8rem;background:linear-gradient(to right,color-mix(in srgb,var(--lilac) 40%,transparent) var(--len),transparent var(--len))}.ds-radius:before,.ds-width:before{content:"";display:block;inline-size:3.5rem;block-size:2rem;background:var(--white)}.ds-radius:before{border:2px solid var(--ink);border-radius:var(--r)}.ds-width:before{border:var(--w) solid var(--ink);border-radius:2px}.ds-headings>*{margin-block:.5rem}.ds-list{list-style:none;padding-inline-start:1.5em;line-height:1.75;margin:1.5rem 0}.ds-list>li{position:relative}.ds-list__dot{position:absolute;inset-inline-start:-1em;inset-block-start:.62em;inline-size:.4em;block-size:.4em;background:var(--list-marker)}.ds-icons{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));padding:0;margin:0;list-style:none}.ds-icons li{display:grid;justify-items:center;gap:.5rem}.ds-field{display:grid;gap:.375rem}.ds-fields{max-inline-size:26rem}.ds-field__label{font-size:.875rem;font-weight:600}.ds-field__label>.text-destructive{color:#000;font-size:.95rem}.ds-field__hint,.ds-field__error{margin:0;font-size:.875rem}.ds-field__hint{color:var(--ink-soft)}.ds-field__error{color:var(--danger);font-weight:600}.ds-field__input{box-sizing:border-box;inline-size:100%;min-block-size:2.75rem;padding:.75rem 1rem;border:var(--bw) solid var(--line-control);border-radius:var(--radius);background:var(--white);color:var(--ink);font:inherit}.ds-select{display:grid}.ds-select>*{grid-area:1 / 1}.ds-select>select{appearance:none;padding-inline-end:3rem;cursor:pointer}.ds-select__icon{justify-self:end;align-self:center;inline-size:1.25rem;block-size:1.25rem;margin-inline-end:1rem;color:var(--ink);pointer-events:none}@media(forced-colors:active){.ds-select__icon{color:CanvasText}}.ds-field__input[aria-invalid=true]{border:4px solid var(--danger)}.ds-controls{display:flex;flex-wrap:wrap;gap:1rem}.ds-controls .ds-field{min-inline-size:min(100%,12rem)}.ds-icon{display:grid;justify-items:center;gap:.5rem;inline-size:100%;padding:.75rem .5rem;border:var(--bw) solid transparent;border-radius:var(--radius);background:none;color:var(--ink);cursor:pointer}.ds-icon:hover{background:var(--wash)}.ds-icon[aria-pressed=true]{border-color:var(--ink);background:var(--wash)}.ds-skip{display:inline-block;padding:.625rem 1.25rem;border-radius:var(--radius);background:var(--lilac);color:var(--paper);font-size:.9375rem;font-weight:700;text-decoration:none;box-shadow:0 0 0 3px var(--focus-ring-soft),0 0 0 7px var(--focus-ring-primary)}.ds-skip--hidden:not(:focus){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;box-shadow:none}.ds-shade{display:grid;gap:.5rem;inline-size:15rem;max-inline-size:100%}.ds-shade__stage{display:grid;place-items:center;block-size:8rem;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}.ds-shade__box{inline-size:55%;block-size:3.5rem;border-radius:var(--radius);background:var(--white)}.ds-shade__pill{display:flex;align-items:center;gap:.625rem;min-block-size:2.75rem;padding:.25rem .75rem;background:var(--white);color:var(--ink);font:inherit;font-size:.875rem;font-weight:700;text-align:start;cursor:pointer}.ds-shade__pill:hover{background:var(--wash)}.ds-shade__chev{flex:none;inline-size:1.125rem;block-size:1.125rem;transition:rotate .15s ease}.ds-shade__pill[aria-expanded=true] .ds-shade__chev{rotate:180deg}@media(prefers-reduced-motion:reduce){.ds-shade__chev{transition:none}}.ds-shade__chip{flex:none;inline-size:1.25rem;block-size:1.25rem;border:2px solid var(--ink);border-radius:3px}.ds-shade__alpha{margin-inline-start:auto;color:var(--ink-soft);font-weight:600}.ds-shade__css{display:block;margin-block:.25rem .5rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--fill);color:var(--ink);font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere}.ds-shade__editor{position:fixed;inset:auto;z-index:50;margin:0;box-sizing:border-box;max-inline-size:calc(100vw - 1rem);max-block-size:calc(100vh - 1rem);overflow:auto;padding:.5rem .75rem .75rem;border:var(--bw) solid var(--ink);border-radius:var(--radius);background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}.ds-shade__editor[open]{display:grid;gap:.375rem}.ds-shade__head{display:flex;align-items:center;gap:.125rem}.ds-shade__head h4{margin:0 auto 0 0;font-size:.9375rem;font-weight:700}.ds-shade__head h4 code{margin-inline-start:.25rem;font-size:.8125rem}.ds-shade__icon{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;margin-block:-.25rem;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--ink);cursor:pointer}.ds-shade__icon:hover{background:var(--wash)}.ds-shade__icon svg{inline-size:1.125rem;block-size:1.125rem}.ds-shade__layer{display:grid;gap:.375rem;margin:0;padding:0;border:0}.ds-shade__layer+.ds-shade__layer{padding-block-start:.5rem;border-block-start:var(--bw) solid var(--ink)}.ds-shade__legend{display:flex;align-items:center;justify-content:space-between;inline-size:100%;padding:0;font-size:.8125rem;font-weight:700}.ds-shade__row{display:grid;grid-template-columns:4rem 1fr;align-items:center;gap:.5rem}.ds-shade__name{color:var(--ink-soft);font-size:.8125rem;font-weight:600}.ds-shade__pair{display:grid;grid-template-columns:1fr 1fr;gap:.375rem}.ds-shade__field{display:flex;align-items:center;gap:.375rem;box-sizing:border-box;min-inline-size:0;min-block-size:2.75rem;padding-inline:.5rem;border:var(--bw) solid var(--line-control);border-radius:var(--radius);background:var(--white);font-size:.875rem}.ds-shade__field:hover{background:var(--fill)}.ds-shade__field:focus-within{box-shadow:0 0 0 3px var(--focus-ring-soft),0 0 0 7px var(--focus-ring-primary)}.ds-shade__field input:focus-visible{outline:none;box-shadow:none}.ds-shade__field>span{flex:none;color:var(--ink-soft);font-weight:600}.ds-shade__field input{flex:1;min-inline-size:0;inline-size:100%;padding:.25rem 0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;-moz-appearance:textfield;appearance:textfield}.ds-shade__field input::-webkit-inner-spin-button,.ds-shade__field input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.ds-shade__field input[aria-invalid=true]{color:var(--danger)}.ds-shade__field:has(input[aria-invalid=true]){border-color:var(--danger)}.ds-shade__field input.ds-shade__swatch{flex:none;inline-size:1.5rem;block-size:1.5rem;padding:0;border:2px solid var(--ink);border-radius:3px;cursor:pointer}.ds-shade__icon[aria-disabled=true]{color:var(--ink-soft);opacity:.45;cursor:not-allowed}.ds-shade__icon[aria-disabled=true]:hover{background:none}@media print{.ds-shade__editor{display:none!important}}