html:has(.ds-page){height:auto!important;overflow:auto!important}html:has(.ds-page) body{background:var(--sds-color-background-default-tertiary)!important;height:auto!important;display:block!important;overflow:auto!important}.ds-page{min-height:100vh;color:var(--sds-color-text-default-default);font-family:var(--font-sans);grid-template-columns:240px 1fr;display:grid}.ds-sidebar{height:100vh;padding:var(--space-8)var(--space-6);background:var(--sds-color-background-default-default);border-right:1px solid var(--sds-color-border-default-secondary);position:sticky;top:0;overflow-y:auto}.ds-brand{letter-spacing:-.02em;margin-bottom:var(--space-1);color:var(--sds-color-text-default-default);font-size:22px;font-weight:700;text-decoration:none}.ds-brand__accent{color:var(--rb-color-accent)}.ds-brand__suffix{color:var(--sds-color-text-default-tertiary);margin-left:4px;font-size:13px;font-weight:400}.ds-version{color:var(--sds-color-text-default-tertiary);margin-bottom:var(--space-8);letter-spacing:.04em;text-transform:uppercase;font-size:11px}.ds-nav{gap:var(--space-1);flex-direction:column;display:flex}.ds-nav__heading{text-transform:uppercase;letter-spacing:.06em;color:var(--sds-color-text-default-tertiary);margin:var(--space-5)0 var(--space-2);padding:0 var(--space-2);font-size:11px;font-weight:600}.ds-nav__link{padding:6px var(--space-2);color:var(--sds-color-text-default-secondary);border-radius:var(--radius-sm);font-size:13px;text-decoration:none;transition:background .15s,color .15s;display:block}.ds-nav__link:hover{background:var(--sds-color-background-default-secondary);color:var(--sds-color-text-default-default)}.ds-main{padding:var(--space-12)var(--space-12)var(--space-24);width:100%;max-width:960px}.ds-hero{margin-bottom:var(--space-16);padding-bottom:var(--space-8);border-bottom:1px solid var(--sds-color-border-default-secondary)}.ds-hero h1{letter-spacing:-.03em;margin:0 0 var(--space-3);font-size:48px;font-weight:700;line-height:1.05}.ds-hero h1 .ds-hero__accent{color:var(--rb-color-accent)}.ds-hero p{color:var(--sds-color-text-default-secondary);max-width:620px;margin:0;font-size:17px;line-height:1.55}.ds-section{margin-bottom:var(--space-20);scroll-margin-top:var(--space-8)}.ds-section__header{margin-bottom:var(--space-6)}.ds-section__eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--rb-color-accent-dark);margin-bottom:var(--space-2);font-size:11px;font-weight:600}.ds-section h2{letter-spacing:-.02em;margin:0 0 var(--space-2);font-size:32px;font-weight:700}.ds-section__desc{color:var(--sds-color-text-default-secondary);max-width:560px;margin:0;font-size:15px;line-height:1.55}.ds-subsection{margin-top:var(--space-8)}.ds-subsection__title{text-transform:uppercase;letter-spacing:.06em;color:var(--sds-color-text-default-tertiary);margin:0 0 var(--space-3);font-size:13px;font-weight:600}.ds-color-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.ds-swatch{background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-secondary);border-radius:var(--radius-lg);transition:transform .15s,box-shadow .15s;overflow:hidden}.ds-swatch:hover{box-shadow:var(--sds-shadow-300);transform:translateY(-2px)}.ds-swatch__preview{border-bottom:1px solid var(--sds-color-border-default-secondary);height:96px}.ds-swatch__body{padding:var(--space-3)var(--space-4)var(--space-4)}.ds-swatch__name{margin:0 0 2px;font-size:13px;font-weight:600}.ds-swatch__var{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary);word-break:break-all;margin:0;font-size:11px}.ds-swatch__hex{font-family:var(--font-mono);color:var(--sds-color-text-default-secondary);margin:2px 0 0;font-size:11px}.ds-type-row{gap:var(--space-6);padding:var(--space-4)0;border-bottom:1px solid var(--sds-color-border-default-secondary);grid-template-columns:110px 1fr;align-items:baseline;display:grid}.ds-type-row:last-child{border-bottom:0}.ds-type-row__label{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.ds-type-row__sample{color:var(--sds-color-text-default-default);letter-spacing:-.02em;line-height:1.15}.ds-spacing{gap:var(--space-3);flex-direction:column;display:flex}.ds-spacing__row{gap:var(--space-4);grid-template-columns:110px 60px 1fr;align-items:center;font-size:13px;display:grid}.ds-spacing__name{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary)}.ds-spacing__value{font-family:var(--font-mono);color:var(--sds-color-text-default-default)}.ds-spacing__bar{background:var(--rb-color-accent);border-radius:var(--radius-sm);height:16px}.ds-radius-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));display:grid}.ds-radius{background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-secondary);padding:var(--space-4);text-align:center}.ds-radius__box{width:64px;height:64px;margin:0 auto var(--space-3);background:var(--rb-color-accent)}.ds-radius__name{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary);margin:0;font-size:11px}.ds-radius__value{font-family:var(--font-mono);color:var(--sds-color-text-default-default);margin:2px 0 0;font-size:13px}.ds-shadow-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.ds-shadow{background:var(--sds-color-background-default-default);border-radius:var(--radius-lg);padding:var(--space-8)var(--space-4);text-align:center}.ds-shadow__name{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary);margin:0 0 2px;font-size:11px}.ds-shadow__class{font-family:var(--font-mono);color:var(--sds-color-text-default-default);font-size:13px}.ds-component{background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden}.ds-component__preview{padding:var(--space-8);gap:var(--space-3);background:var(--sds-color-background-default-tertiary);border-bottom:1px solid var(--sds-color-border-default-secondary);flex-wrap:wrap;justify-content:center;align-items:center;min-height:120px;display:flex}.ds-component__meta{padding:var(--space-3)var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);font-size:12px;display:flex}.ds-component__name{font-weight:600}.ds-component__import{font-family:var(--font-mono);color:var(--sds-color-text-default-tertiary);font-size:11px}.ds-badge{border-radius:var(--radius-full);border:1px solid #0000;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.ds-badge--success{background:var(--rb-color-success-bg);color:var(--rb-color-success-fg);border-color:var(--rb-color-success-border)}.ds-badge--danger{background:var(--rb-color-danger-bg);color:var(--rb-color-danger);border-color:var(--rb-color-danger-border)}.ds-badge--warning{background:var(--rb-color-warning-bg);color:var(--rb-color-warning)}.ds-badge--info{background:var(--rb-color-info-bg);color:var(--rb-color-info)}.ds-badge--accent{background:var(--rb-color-accent-soft);color:var(--rb-color-accent-dark)}.ds-btn{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);cursor:pointer;border:1px solid #0000;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:500;transition:background .15s,transform 50ms;display:inline-flex}.ds-btn:active{transform:translateY(1px)}.ds-btn--primary{background:var(--sds-color-background-brand-default);color:var(--sds-color-text-brand-on-brand)}.ds-btn--primary:hover{background:#000}.ds-btn--secondary{background:var(--sds-color-background-default-default);color:var(--sds-color-text-default-default);border-color:var(--sds-color-border-default-default)}.ds-btn--secondary:hover{background:var(--sds-color-background-default-secondary)}.ds-btn--accent{background:var(--rb-color-accent);color:var(--sds-color-text-default-default)}.ds-btn--accent:hover{background:var(--rb-color-accent-dark);color:var(--sds-color-text-brand-on-brand)}.ds-btn--ghost{color:var(--sds-color-text-default-secondary);background:0 0}.ds-btn--ghost:hover{color:var(--sds-color-text-default-default)}.ds-code{background:var(--sds-color-background-brand-default);color:var(--rb-slate-200);padding:var(--space-4);border-radius:var(--radius-md);font-family:var(--font-mono);margin:var(--space-3)0 0;font-size:12px;line-height:1.6;overflow-x:auto}.ds-code .tok-prop{color:#93c5fd}.ds-code .tok-val{color:var(--rb-color-warning-bg-strong)}.ds-code .tok-comment{color:var(--rb-slate-400);font-style:italic}.ds-avatar{border-radius:var(--radius-full);letter-spacing:-.01em;color:var(--sds-color-text-default-default);flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.ds-avatar--sm{width:28px;height:28px;font-size:11px}.ds-avatar--md{width:40px;height:40px;font-size:13px}.ds-avatar--lg{width:56px;height:56px;font-size:18px}.ds-avatar--xl{border-radius:var(--radius-lg);width:80px;height:80px;font-size:24px}.ds-avatar--accent{background:var(--rb-color-accent-soft-strong);color:var(--rb-color-accent-dark)}.ds-avatar--info{background:var(--rb-color-info-bg);color:var(--rb-color-info)}.ds-avatar--success{background:var(--rb-color-success-bg);color:var(--rb-color-success-fg)}.ds-avatar--default{background:var(--sds-color-background-default-secondary);color:var(--sds-color-text-default-secondary)}.ds-tag{color:var(--rb-color-accent-dark);background:var(--rb-color-accent-soft);border-radius:var(--radius-full);cursor:pointer;border:1px solid #0000;align-items:center;padding:4px 12px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.ds-tag:hover{background:var(--rb-color-accent-soft-strong);border-color:var(--rb-color-accent)}.ds-verify{color:var(--rb-color-success-fg);background:var(--rb-color-success-bg);border:1px solid var(--rb-color-success-border);border-radius:var(--radius-full);align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex}.ds-verify svg{flex-shrink:0}.ds-rating{align-items:center;gap:6px;display:inline-flex}.ds-rating__stars{gap:2px;display:inline-flex}.ds-rating__stars svg{width:16px;height:16px}.ds-rating__value{color:var(--sds-color-text-default-default);letter-spacing:-.01em;font-size:14px;font-weight:700}.ds-rating__count{color:var(--sds-color-text-default-tertiary);font-size:12px}.ds-stat{padding:var(--space-4)var(--space-5);background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-secondary);border-radius:var(--radius-lg);flex-direction:column;gap:4px;min-width:140px;display:flex}.ds-stat__value{letter-spacing:-.03em;color:var(--sds-color-text-default-default);font-size:28px;font-weight:700;line-height:1}.ds-stat__label{color:var(--sds-color-text-default-secondary);text-transform:uppercase;letter-spacing:.04em;font-size:12px}.ds-input{flex-direction:column;gap:6px;min-width:280px;display:flex}.ds-input__label{color:var(--sds-color-text-default-default);font-size:13px;font-weight:500}.ds-input__field{color:var(--sds-color-text-default-default);background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-default);border-radius:var(--radius-md);padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.ds-input__field::placeholder{color:var(--sds-color-text-default-tertiary)}.ds-input__field:focus{border-color:var(--rb-color-accent);box-shadow:0 0 0 3px var(--rb-color-accent-soft-strong);outline:none}.ds-divider{align-items:center;gap:var(--space-4);width:100%;max-width:480px;display:flex}.ds-divider__line{background:linear-gradient(to right,transparent,var(--sds-color-border-default-default),transparent);flex:1;height:1px}.ds-divider__chip{color:var(--sds-color-text-brand-on-brand);background:var(--sds-color-background-brand-default);padding:var(--space-1)14px;border-radius:var(--radius-full);white-space:nowrap;font-size:13px;font-weight:600}.ds-democard{gap:var(--space-4);padding:var(--space-5);background:var(--sds-color-background-default-default);border:1px solid var(--sds-color-border-default-secondary);border-radius:var(--radius-lg);max-width:560px;display:flex}.ds-democard__logo{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--rb-color-accent),var(--rb-color-accent-dark));width:80px;height:80px;color:var(--sds-color-text-brand-on-brand);flex-shrink:0;justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex}.ds-democard__body{flex:1;min-width:0}.ds-democard__header{align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:4px;display:flex}.ds-democard__name{color:var(--sds-color-text-default-default);font-size:17px;font-weight:700}.ds-democard__desc{color:var(--sds-color-text-default-secondary);margin:0 0 var(--space-3);font-size:14px;line-height:1.5}.ds-democard__tags{margin-bottom:var(--space-3);flex-wrap:wrap;gap:6px;display:flex}.ds-democard__meta{gap:var(--space-3);color:var(--sds-color-text-default-tertiary);align-items:center;font-size:12px;display:flex}.ds-democard__meta-sep{color:var(--sds-color-border-default-default)}.ds-usage{border-top:1px solid var(--sds-color-border-default-secondary);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;display:grid}.ds-usage__col{padding:var(--space-4)var(--space-5);border-right:1px solid var(--sds-color-border-default-secondary)}.ds-usage__col:last-child{border-right:0}.ds-usage__label{text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;margin-bottom:6px;font-size:11px;font-weight:600;display:flex}.ds-usage__label--do{color:var(--rb-color-success-fg)}.ds-usage__label--dont{color:var(--rb-color-danger)}.ds-usage__label--a11y{color:var(--rb-color-info)}.ds-usage__label-icon{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:14px;height:14px;font-size:9px;font-weight:700;line-height:1;display:inline-flex}.ds-usage__label--do .ds-usage__label-icon{background:var(--rb-color-success-bg);color:var(--rb-color-success-fg)}.ds-usage__label--dont .ds-usage__label-icon{background:var(--rb-color-danger-bg);color:var(--rb-color-danger)}.ds-usage__label--a11y .ds-usage__label-icon{background:var(--rb-color-info-bg);color:var(--rb-color-info)}.ds-usage__text{color:var(--sds-color-text-default-secondary);margin:0;font-size:13px;line-height:1.5}