@layer reset,tokens,theme,layout,components;@layer layout{.stage__panel.ds{display:flex;flex-direction:column;gap:var(--ds-gap);inline-size:min(var(--ds-measure),100%);block-size:100%;min-block-size:0;padding:var(--ds-padding);background:none;border:0;box-shadow:none;color:var(--ds-color);font-family:var(--ds-font);font-size:var(--ds-body-size);line-height:var(--ds-leading)}.ds *,.ds-preview *,.ds *:before,.ds-preview *:before{box-sizing:border-box}.ds :is(h1,h2,h3,h4,p,figure,dl,dd,ol,ul),.ds-preview :is(h1,p){margin:0}.ds a{color:inherit;text-underline-offset:.2em}.ds :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible,.ds-preview :is(a,button,input,select,textarea):focus-visible{outline:var(--ds-focus-width) var(--ds-focus-style) var(--ds-focus-color);outline-offset:var(--ds-focus-offset)}.ds__nav{display:flex;flex-wrap:wrap;gap:var(--ds-small-gap) var(--ds-gap);flex:none;padding-block:var(--ds-small-gap)}.ds__nav a{font-size:var(--ds-small-size);text-decoration:none;padding-block:var(--ds-small-gap);color:var(--ds-muted)}.ds__nav a[aria-current=location]{color:var(--ds-color);text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px}.ds__scroll{flex:1;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ds-line) transparent;padding:var(--ds-small-gap) var(--ds-focus-offset) var(--ds-section-gap);container:ds-reference / inline-size}.ds__scroll{padding-block-end:var(--ds-gap);scroll-padding-block-end:var(--ds-gap)}.ds__scroll:focus-visible{outline-offset:calc(-1 * var(--ds-focus-width))}.ds__header{display:grid;gap:var(--ds-gap);padding-block:var(--ds-gap) var(--ds-section-gap)}.ds__small,.ds__status{color:var(--ds-muted);font-size:var(--ds-small-size);line-height:var(--ds-small-leading)}.ds h1{font-size:var(--ds-title-size);font-weight:var(--ds-title-weight);letter-spacing:var(--ds-title-tracking);line-height:var(--ds-title-leading)}.ds h2,.ds h3,.ds h4{font-size:var(--ds-heading-size);font-weight:var(--ds-title-weight);letter-spacing:var(--ds-title-tracking);line-height:var(--ds-title-leading)}.ds__chapter{margin-block-start:var(--ds-chapter-gap);scroll-margin-block-start:var(--ds-gap)}#overview .ds__header{padding-block-end:0}#overview+.ds__chapter{margin-block-start:var(--ds-large-gap)}.ds .ds__chapter-title{font-size:var(--ds-title-size)}.ds__intro{max-inline-size:var(--ds-reading-measure);color:var(--ds-muted);font-size:var(--ds-reading-size)}.ds__section{display:grid;gap:var(--ds-gap);margin-block-start:var(--ds-section-gap);scroll-margin-block-start:var(--ds-gap);min-inline-size:0}.ds__section-heading,.ds__row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-small-gap)}.ds__section-heading,.ds__row--spread{justify-content:space-between}.ds__stack,.ds-playground{display:grid;gap:var(--ds-gap);min-inline-size:0}.ds__index{list-style:none;padding:0}.ds__index-link{display:flex;align-items:center;gap:var(--ds-gap);padding:var(--ds-gap) var(--ds-small-gap);border-radius:var(--ds-radius);text-decoration:none}.ds__index-link>span:last-child{margin-inline-start:auto}.ds__index-link>span:has(strong){flex:1;display:grid;gap:var(--ds-tiny-gap)}.ds__index-link strong{font-size:var(--ds-heading-size);font-weight:var(--ds-title-weight)}.ds__index-link :is(.ds__index-number,strong+span){color:var(--ds-muted);font-size:var(--ds-small-size)}.ds__index-link:hover{background:var(--ds-hover)}.ds__principles{display:grid;gap:var(--ds-gap)}.ds__principles>div{display:grid;gap:var(--ds-tiny-gap)}.ds__principles dt{font-weight:var(--ds-title-weight)}.ds__principles dd{color:var(--ds-muted)}.ds__specimen{padding:var(--ds-specimen-padding);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-radius);corner-shape:var(--ds-corner);background-color:var(--ds-surface);background-image:var(--ds-texture);color:var(--ds-surface-color);box-shadow:var(--ds-shadow);min-inline-size:0}.ds__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-small-gap);min-block-size:var(--ds-control-height);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-control-radius);background:var(--ds-control-background);color:var(--ds-control-color);padding:var(--ds-small-gap) var(--ds-gap);font:inherit;font-size:var(--ds-small-size);cursor:pointer}.ds__button:hover{background:var(--ds-hover)}.ds__button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--ds-control-color)}.ds__button:disabled,.ds__field :disabled{opacity:var(--ds-disabled-opacity);cursor:default}.ds__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-gap)}.ds__field{display:grid;gap:var(--ds-small-gap);min-inline-size:0}.ds__field>span{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ds-small-gap);font-size:var(--ds-small-size)}.ds__field output{font-variant-numeric:tabular-nums;color:var(--ds-muted)}.ds__field :is(input:not([type=range]),textarea,select){inline-size:100%;min-inline-size:0;min-block-size:var(--ds-control-height);padding:var(--ds-small-gap) var(--ds-gap);font:inherit;color:var(--ds-control-color);background:var(--ds-control-background);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-control-radius)}.ds__field :is(input,textarea)::placeholder{color:var(--ds-muted);opacity:1}.ds__field textarea{resize:vertical}.ds__field small{color:var(--ds-muted);font-size:var(--ds-small-size)}.ds__field input[aria-invalid=true]{outline:var(--ds-focus-width) var(--ds-focus-style) var(--ds-error);outline-offset:var(--ds-focus-offset)}.ds__check{display:flex;align-items:center;gap:var(--ds-small-gap);font-size:var(--ds-small-size);min-block-size:var(--ds-control-height)}.ds__check input{accent-color:var(--ds-control-color)}.ds__switch{max-inline-size:100%}.ds__details{border-block-start:var(--ds-border-width) var(--ds-border-style) var(--ds-line);padding-block-start:var(--ds-small-gap);font-size:var(--ds-small-size)}.ds__details summary{cursor:pointer;color:var(--ds-color);padding-block:var(--ds-small-gap)}.ds__details>:not(summary){margin-block-start:var(--ds-gap)}.ds pre{margin:0;padding:var(--ds-gap);border-radius:var(--ds-control-radius);background:var(--ds-surface);color:var(--ds-surface-color);white-space:pre-wrap;overflow-wrap:anywhere}.ds code{font-family:var(--ds-mono);font-size:var(--ds-small-size);overflow-wrap:anywhere}.ds__text-link{justify-self:start;font-size:var(--ds-small-size)}.ds__list{padding-inline-start:var(--ds-gap);display:grid;gap:var(--ds-small-gap)}.ds-playground .segmented-control:not(:has(:checked)) .segmented-control__thumb{display:none}.ds-playground__frame{display:block;inline-size:100%;block-size:var(--ds-preview-height);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-radius);corner-shape:var(--ds-corner);background:var(--ds-surface)}.ds-type{display:grid;gap:var(--ds-large-gap)}.ds-type__row{display:grid;gap:var(--ds-small-gap)}.ds-type__display{font-size:var(--ds-type-display);line-height:var(--ds-title-leading);letter-spacing:var(--ds-title-tracking)}.ds-type__title{font-size:var(--ds-type-title);line-height:var(--ds-title-leading)}.ds-type__reading{font-size:var(--ds-type-reading)}.ds-type__body{font-size:var(--ds-type-body)}.ds-type__small{font-size:var(--ds-type-small)}.ds-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-small-gap)}.ds-surfaces__sample{padding:var(--ds-gap);border:var(--ds-swatch-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-radius);corner-shape:var(--ds-corner);box-shadow:var(--ds-swatch-shadow)}.ds-surfaces__sample figcaption{font-size:var(--ds-small-size);margin-block-end:var(--ds-large-gap)}.ds-surfaces__sample--sunken{background:var(--ds-sunken);color:var(--ds-sunken-color);--ds-swatch-muted: var(--ds-sunken-muted)}.ds-surfaces__sample--base{background:var(--ds-base);color:var(--ds-base-color);--ds-swatch-muted: var(--ds-base-muted)}.ds-surfaces__primary{font-weight:var(--ds-title-weight)}.ds-surfaces__supporting{color:var(--ds-swatch-muted);font-size:var(--ds-small-size)}.ds-geometry__outer{block-size:var(--ds-geometry-height);padding:var(--ds-geometry-padding);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-geometry-radius);corner-shape:var(--ds-corner);background:var(--ds-sunken);box-shadow:var(--ds-shadow)}.ds-geometry__inner{display:grid;place-items:center;block-size:100%;color:var(--ds-base-color);--ds-muted: var(--ds-base-muted);border-radius:max(0px,calc(var(--ds-geometry-radius) - var(--ds-geometry-padding) - var(--ds-border-width)));corner-shape:var(--ds-corner);background:var(--ds-base);box-shadow:var(--ds-shadow)}.ds-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-large-gap) var(--ds-gap)}.ds-actions__example{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-small-gap);min-inline-size:0}.ds-actions__example>.ds__small{flex:1}.ds-actions__example :disabled{opacity:var(--ds-disabled-opacity)}.ds-actions__link{appearance:none;border:0;padding:0;min-block-size:var(--ds-control-height);background:transparent;color:inherit;font:inherit;font-size:var(--ds-small-size);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}.ds-motion{display:grid;gap:var(--ds-large-gap);--hover-list-background: var(--ds-sunken);--hover-list-radius: var(--ds-control-radius);--hover-list-corner-shape: var(--ds-corner);--hover-list-duration: var(--ds-motion-duration);--hover-list-ease: var(--ds-motion-ease)}.ds-motion__example{display:grid;gap:var(--ds-gap)}.ds-motion__targets{min-inline-size:0;margin:0;padding:0;border:0}.ds-motion__target{display:flex;align-items:center;justify-content:space-between;padding:var(--ds-small-gap) var(--ds-gap);min-block-size:var(--ds-control-height);border-radius:var(--ds-control-radius);cursor:pointer}.ds-motion__target:has(:checked)>span:first-of-type{text-decoration:underline;text-underline-offset:.25em}.ds-motion__target:is(:hover,:focus-within){color:var(--ds-sunken-color)}.ds-motion__targets:not([data-hover-enhanced]) .ds-motion__target:hover{background:var(--ds-sunken);color:var(--ds-sunken-color)}.ds-motion__target:has(:focus-visible){outline:var(--ds-focus-width) var(--ds-focus-style) var(--ds-focus-color);outline-offset:var(--ds-focus-offset)}.ds-motion__disclosure{border-radius:var(--ds-control-radius);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);background:var(--ds-sunken);color:var(--ds-sunken-color);--ds-muted: var(--ds-sunken-muted)}.ds-motion__disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap);padding:var(--ds-gap);cursor:pointer;list-style:none}.ds-motion__disclosure summary::-webkit-details-marker{display:none}.ds-motion__disclosure summary::marker{content:""}.ds-motion__disclosure summary:after{content:"";flex:none;inline-size:var(--ds-disclosure-chevron-size);block-size:var(--ds-disclosure-chevron-size);border-inline-end:var(--ds-disclosure-chevron-stroke) solid currentColor;border-block-end:var(--ds-disclosure-chevron-stroke) solid currentColor;transform:rotate(-45deg);transition:transform var(--ds-motion-duration) var(--ds-motion-ease)}.ds-motion__disclosure[open]>summary:after{transform:rotate(45deg)}.ds-motion__disclosure::details-content{block-size:0;overflow:clip;interpolate-size:allow-keywords;transition:block-size var(--ds-motion-duration) var(--ds-motion-ease),content-visibility var(--ds-motion-duration) allow-discrete}.ds-motion__disclosure[open]::details-content{block-size:auto}.ds-motion__content{padding:0 var(--ds-gap) var(--ds-gap);display:grid;gap:var(--ds-tiny-gap)}.ds-motion:has(input[name=ds-reduce-motion]:checked){--segment-duration: var(--ds-motion-instant);--ds-motion-duration: var(--ds-motion-instant)}.ds-collection strong{font-weight:var(--ds-title-weight)}.ds-split{--ds-split-inner-radius: min(var(--ds-split-radius-max), calc(var(--ds-split-radius) * var(--ds-split-radius-factor)));display:grid;gap:var(--ds-split-gap)}.ds-split__header,.ds-split__body{padding:var(--ds-gap);background:var(--ds-split-background);color:var(--ds-split-color);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);corner-shape:var(--ds-corner);box-shadow:var(--ds-shadow)}.ds-split__header{display:flex;justify-content:space-between;border-radius:var(--ds-split-radius) var(--ds-split-radius) var(--ds-split-inner-radius) var(--ds-split-inner-radius)}.ds-split__body{display:grid;gap:var(--ds-gap);border-radius:var(--ds-split-inner-radius) var(--ds-split-inner-radius) var(--ds-split-radius) var(--ds-split-radius)}.ds-overflow{block-size:var(--ds-overflow-height);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.ds-overflow ol{display:grid;gap:var(--ds-small-gap);padding:var(--ds-small-gap);list-style:none}.ds-overflow li{display:grid;gap:var(--ds-tiny-gap);padding:var(--ds-gap);border-radius:var(--ds-control-radius);background:var(--ds-sunken);color:var(--ds-sunken-color);--ds-muted: var(--ds-sunken-muted)}.ds-collection{display:grid;gap:var(--ds-gap)}.ds-collection__items{display:grid;gap:var(--ds-small-gap);list-style:none;padding:0}.ds-collection__items>li{display:flex;align-items:center;gap:var(--ds-gap);padding:var(--ds-gap);background:var(--ds-surface);color:var(--ds-surface-color);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-radius);corner-shape:var(--ds-corner);box-shadow:var(--ds-shadow)}.ds-collection__symbol{display:grid;flex:none;place-items:center;inline-size:var(--ds-shape-size);block-size:var(--ds-shape-size);border-radius:var(--ds-control-radius);background:var(--ds-sunken);color:var(--ds-sunken-color)}.ds-collection__symbol svg{inline-size:var(--ds-icon-size);block-size:var(--ds-icon-size);fill:none}.ds-collection__copy{display:grid;gap:var(--ds-tiny-gap)}.ds-collection:is([data-layout=grid],:not([data-layout]):has(input[value=grid]:checked)) .ds-collection__items{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-collection:is([data-layout=grid],:not([data-layout]):has(input[value=grid]:checked)) .ds-collection__items>li{flex-direction:column;align-items:stretch}.ds-collection:is([data-layout=grid],:not([data-layout]):has(input[value=grid]:checked)) .ds-collection__symbol{inline-size:100%;block-size:calc(var(--ds-shape-size) * 1.5)}.ds-icons{display:flex;justify-content:space-around;gap:var(--ds-gap)}.ds-icons figure{display:grid;justify-items:center;gap:var(--ds-gap)}.ds-icons svg{display:block;inline-size:var(--ds-icon-size);block-size:var(--ds-icon-size);fill:none}.ds-icons figcaption{font-size:var(--ds-small-size);color:var(--ds-muted)}.ds-meter{block-size:var(--ds-gap);border-radius:var(--ds-control-radius);background:var(--ds-sunken);overflow:hidden}.ds-meter span{display:block;block-size:100%;inline-size:var(--ds-example-amount);background:var(--ds-accent)}.ds-token-chain{display:grid;justify-items:center;gap:var(--ds-small-gap)}html[data-ds-preview-document],.ds-preview{margin:0;min-block-size:100%;background:var(--ds-preview-background);color:var(--ds-preview-color);font-family:var(--ds-font);font-size:var(--ds-body-size);line-height:var(--ds-leading)}html[data-ds-fit]{overflow:hidden}html[data-ds-preview-document]{scrollbar-width:thin;scrollbar-color:var(--ds-line) transparent}.ds-preview__canvas{background:var(--ds-preview-background);color:var(--ds-preview-color);display:grid;gap:var(--ds-gap);padding:var(--ds-specimen-padding)}.ds-preview .ds__small{color:var(--ds-preview-muted)}.ds-preview__canvas:has(input[name=contrast-readouts]:not(:checked)) :is(.ds-preview__surfaces,[data-ds-contrast-note]){display:none}.ds-preview__canvas>header{justify-content:flex-end}.ds-preview__accent{inline-size:var(--ds-gap);block-size:var(--ds-gap);border-radius:var(--ds-radius);background:var(--ds-accent)}.ds-preview__panel{margin:0;padding:var(--ds-gap);border:var(--ds-border-width) var(--ds-border-style) var(--ds-line);border-radius:var(--ds-radius);corner-shape:var(--ds-corner);background:var(--ds-preview-panel-background);color:var(--ds-preview-panel-color);box-shadow:var(--ds-shadow)}.ds-preview__surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-small-gap)}.ds-preview__surface{display:grid;gap:var(--ds-small-gap);padding:var(--ds-small-gap);border-radius:var(--ds-control-radius);border:var(--ds-border-width) var(--ds-border-style) currentColor;font-size:var(--ds-small-size)}.ds-preview__surface--sunken{background:var(--ds-sunken);color:var(--ds-sunken-color)}.ds-preview__surface--base{background:var(--ds-base);color:var(--ds-base-color)}.ds-preview__surface output{font-variant-numeric:tabular-nums}@media(max-width:64rem){.stage__panel.ds{padding:var(--ds-gap)}}@container ds-reference (max-width: 32rem){.ds__controls{grid-template-columns:1fr}.ds-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-surfaces__sample{padding:var(--ds-small-gap)}.ds-playground__frame{block-size:var(--ds-preview-narrow-height)}.ds__specimen{padding:var(--ds-gap)}}@media(max-width:600px){.ds__controls{grid-template-columns:1fr}.ds__nav{column-gap:var(--ds-gap);row-gap:0}.ds__specimen,.ds-preview__canvas{padding:var(--ds-gap)}.ds-playground__frame{block-size:var(--ds-preview-narrow-height)}}@media(prefers-reduced-motion:reduce){.ds *,.ds *:before,.ds *:after,.ds-preview *{scroll-behavior:auto}}}@layer components{.desktop[data-panel-open=design-system]{position:fixed;inset:0;overflow:clip}@media(max-width:64rem){.desktop[data-panel-open=design-system]{display:block;padding:var(--ds-shell-padding)}.desktop[data-panel-open=design-system] :is(.launcher,.launcher-toggle){display:none}.desktop[data-panel-open=design-system] .stage{display:grid;block-size:calc(var(--ds-shell-height) - 2 * var(--ds-shell-padding));padding:0}}}