@layer components{.ds-button{justify-content:center;align-items:center;gap:var(--ds-space-2);border:var(--ds-border-width) solid transparent;border-radius:var(--ds-radius-md);cursor:pointer;min-width:0;font-weight:var(--ds-weight-bold);white-space:nowrap;line-height:1;text-decoration:none;display:inline-flex}.ds-button--sm{min-height:var(--ds-control-height-sm);padding:0 var(--ds-space-3);font-size:var(--ds-text-sm)}.ds-button--md{min-height:var(--ds-control-height-md);padding:0 var(--ds-space-4);font-size:var(--ds-text-md)}.ds-button--lg{min-height:var(--ds-control-height-lg);padding:0 var(--ds-space-5);font-size:var(--ds-text-lg)}.ds-button--primary{background:var(--ds-color-action);color:var(--ds-neutral-0)}.ds-button--primary:hover:not(:disabled){background:var(--ds-color-action-hover)}.ds-button--secondary{border-color:var(--ds-color-border-strong);background:var(--ds-color-surface);color:var(--ds-color-action)}.ds-button--secondary:hover:not(:disabled){border-color:var(--ds-color-action);background:var(--ds-color-action-soft)}.ds-button--quiet{color:var(--ds-color-action);background:0 0}.ds-button--quiet:hover:not(:disabled){background:var(--ds-color-action-soft)}.ds-button--danger{border-color:var(--ds-color-danger-border);background:var(--ds-color-danger-soft);color:var(--ds-color-danger-strong)}.ds-button--danger:hover:not(:disabled){border-color:var(--ds-color-danger)}.ds-button:disabled,.ds-icon-button:disabled{cursor:not-allowed;opacity:.48}.ds-button__icon{place-items:center;width:1rem;height:1rem;display:inline-grid}.ds-icon-button{width:var(--ds-control-height-md);height:var(--ds-control-height-md);border:var(--ds-border-width) solid var(--ds-color-border);border-radius:var(--ds-radius-md);background:var(--ds-color-surface);color:var(--ds-color-action);cursor:pointer;place-items:center;padding:0;display:inline-grid}.ds-icon-button:hover:not(:disabled){border-color:var(--ds-color-action);background:var(--ds-color-action-soft)}.ds-badge{width:fit-content;min-height:24px;padding:3px var(--ds-space-2);border-radius:var(--ds-radius-pill);background:var(--ds-color-surface-subtle);color:var(--ds-color-text-muted);font-size:var(--ds-text-xs);font-weight:var(--ds-weight-bold);align-items:center;line-height:1.2;display:inline-flex}.ds-badge--success{background:var(--ds-color-success-soft);color:var(--ds-color-success)}.ds-badge--info{background:var(--ds-color-info-soft);color:var(--ds-color-info)}.ds-badge--warning{background:var(--ds-color-warning-soft);color:var(--ds-color-warning)}.ds-badge--danger{background:var(--ds-color-danger-soft);color:var(--ds-color-danger-strong)}.ds-callout{gap:var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border:var(--ds-border-width) solid;border-radius:var(--ds-radius-lg);font-size:var(--ds-text-md);line-height:var(--ds-leading-normal);grid-template-columns:minmax(90px,auto) 1fr;display:grid}.ds-callout>strong{font-weight:var(--ds-weight-bold)}.ds-callout--success{border-color:var(--ds-brand-200);background:var(--ds-brand-50);color:var(--ds-color-success)}.ds-callout--info{border-color:var(--ds-color-info-border);background:var(--ds-color-info-soft);color:var(--ds-color-info)}.ds-callout--warning{border-color:var(--ds-color-warning-border);background:var(--ds-color-warning-soft);color:var(--ds-color-warning)}.ds-callout--danger{border-color:var(--ds-color-danger-border);background:var(--ds-color-danger-soft);color:var(--ds-color-danger-strong)}.ds-surface{border:var(--ds-border-width) solid var(--ds-color-border);border-radius:var(--ds-radius-lg);background:var(--ds-color-surface);box-shadow:var(--ds-shadow-xs)}.ds-field{gap:var(--ds-space-2);display:grid}.ds-field>label{color:var(--ds-color-text-subtle);font-size:var(--ds-text-sm);font-weight:var(--ds-weight-bold)}.ds-field>small{color:var(--ds-color-text-muted);font-size:var(--ds-text-xs);line-height:var(--ds-leading-normal)}.ds-field--error>input,.ds-field--error>select,.ds-field--error>textarea{border-color:var(--ds-color-danger)}.ds-field--error>small{color:var(--ds-color-danger-strong)}.ds-empty-state{justify-items:start;gap:var(--ds-space-2);padding:var(--ds-space-8);border:var(--ds-border-width) dashed var(--ds-color-border-strong);border-radius:var(--ds-radius-lg);background:var(--ds-color-surface-subtle);display:grid}.ds-empty-state>strong{font:var(--ds-weight-medium) var(--ds-text-xl)/var(--ds-leading-tight) var(--ds-font-display)}.ds-empty-state>p{max-width:60ch;color:var(--ds-color-text-muted);font-size:var(--ds-text-md);line-height:var(--ds-leading-normal);margin:0}@media (max-width:560px){.ds-callout{gap:var(--ds-space-1);grid-template-columns:1fr}.ds-button--lg{width:100%}}@media (forced-colors:active){.ds-button,.ds-icon-button,.ds-badge,.ds-callout,.ds-surface{border:1px solid canvastext}}}.design-system-page{padding-bottom:var(--ds-space-12)}.ds-reference-heading h1{max-width:900px;font-size:var(--ds-text-4xl)}.ds-reference-section{padding:var(--ds-space-12) 0;border-bottom:var(--ds-border-width) solid var(--ds-color-border);scroll-margin-top:var(--ds-space-6)}.ds-reference-title{max-width:var(--ds-reading-max);margin-bottom:var(--ds-space-8)}.ds-reference-title .eyebrow{margin-bottom:var(--ds-space-2)}.ds-reference-title h2{font:var(--ds-weight-medium) var(--ds-text-3xl)/var(--ds-leading-tight) var(--ds-font-display);margin:0}.ds-reference-title p{margin:var(--ds-space-3) 0 0;color:var(--ds-color-text-muted);font-size:var(--ds-text-md);line-height:var(--ds-leading-relaxed)}.ds-swatch-grid{gap:var(--ds-space-4);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.ds-swatch-grid>div{align-items:center;gap:2px var(--ds-space-3);grid-template-columns:42px 1fr;min-width:0;display:grid}.ds-swatch{border:var(--ds-border-width) solid var(--ds-color-border);border-radius:var(--ds-radius-md);grid-row:span 2;width:42px;height:42px}.ds-swatch-grid strong{font-size:var(--ds-text-md)}.ds-swatch-grid code{color:var(--ds-color-text-muted);font:var(--ds-text-xs)/1.3 var(--ds-font-mono);text-overflow:ellipsis;overflow:hidden}.ds-swatch--action{background:var(--ds-color-action)}.ds-swatch--surface{background:var(--ds-color-surface)}.ds-swatch--canvas{background:var(--ds-color-canvas)}.ds-swatch--text{background:var(--ds-color-text)}.ds-swatch--success{background:var(--ds-color-success)}.ds-swatch--info{background:var(--ds-color-info)}.ds-swatch--warning{background:var(--ds-color-warning)}.ds-swatch--danger{background:var(--ds-color-danger)}.ds-type-grid{gap:var(--ds-space-6);margin-top:var(--ds-space-10);grid-template-columns:1.2fr 1.2fr .7fr;display:grid}.ds-type-grid>div{padding-top:var(--ds-space-3);border-top:2px solid var(--ds-color-text)}.ds-type-grid small{color:var(--ds-color-text-muted);font-size:var(--ds-text-xs);font-weight:var(--ds-weight-bold)}.ds-type-grid p{margin:var(--ds-space-3) 0 0}.ds-type-display{font:var(--ds-weight-medium) var(--ds-text-2xl)/var(--ds-leading-tight) var(--ds-font-display)}.ds-type-interface{font:var(--ds-text-md)/var(--ds-leading-relaxed) var(--ds-font-sans)}.ds-type-code{font:var(--ds-text-md)/var(--ds-leading-normal) var(--ds-font-mono)}.ds-rhythm{align-items:end;gap:var(--ds-space-4);margin-top:var(--ds-space-8);display:flex}.ds-rhythm span{background:var(--ds-color-action-soft);width:48px;color:var(--ds-color-action);font-size:var(--ds-text-xs);font-weight:var(--ds-weight-bold);place-items:center;display:grid}.ds-rhythm span:first-child{height:4px}.ds-rhythm span:nth-child(2){height:8px}.ds-rhythm span:nth-child(3){height:12px}.ds-rhythm span:nth-child(4){height:16px}.ds-rhythm span:nth-child(5){height:24px}.ds-rhythm span:nth-child(6){height:32px}.ds-rhythm span:nth-child(7){height:48px}.ds-rhythm span:nth-child(8){height:64px}.ds-component-row{align-items:center;gap:var(--ds-space-3);flex-wrap:wrap;display:flex}.ds-reference-tabs{max-width:420px;margin-top:var(--ds-space-6)}.ds-form-example{align-items:start;gap:var(--ds-space-6);grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;display:grid}.ds-callout-stack{gap:var(--ds-space-3);max-width:900px;margin-top:var(--ds-space-6);display:grid}.ds-table-surface{margin-bottom:var(--ds-space-6);overflow-x:auto}.ds-table-surface table{min-width:660px}.ds-table-surface .ds-badge{margin:0}@media (max-width:800px){.ds-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-type-grid,.ds-form-example{grid-template-columns:1fr}}@media (max-width:480px){.ds-reference-heading h1{font-size:var(--ds-text-3xl)}.ds-reference-section{padding:var(--ds-space-8) 0}.ds-swatch-grid{grid-template-columns:1fr}.ds-rhythm{gap:var(--ds-space-2);padding-bottom:var(--ds-space-2);overflow-x:auto}.ds-rhythm span{flex:0 0 34px;width:34px}}