*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-block-start:88px}body{margin:0;background:var(--sds-color-bg);color:var(--sds-color-text);font-family:var(--sds-font-family-text);font-size:var(--sds-type-body-regular-size);line-height:var(--sds-type-body-regular-line);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit}:focus-visible{outline:2px solid var(--sds-color-primary);outline-offset:2px;border-radius:2px}.container{inline-size:100%;max-inline-size:1180px;margin-inline:auto;padding-inline:clamp(var(--sds-space-500),5vw,64px)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.muted{color:var(--sds-color-text-muted)}.accent{color:var(--sds-color-primary)}.site-topbar{position:sticky;inset-block-start:0;z-index:50;--sds-top-nav-background-color: var(--sds-color-bg)}@media(min-width:769px){.site-topbar::part(menu){display:none}}.topbar__tools{display:flex;align-items:center;gap:var(--sds-space-300)}.brand{display:inline-flex;align-items:center;gap:var(--sds-space-300);text-decoration:none;font-weight:var(--sds-font-weight-bold);font-size:1.125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sds-color-text)}.brand__mark{inline-size:28px;block-size:28px;border-radius:var(--sds-radius-m);display:grid;place-items:center;background:var(--sds-color-primary);color:#fff;font-size:1rem;letter-spacing:0}.brand__sub{font-size:.6875rem;letter-spacing:.02em;text-transform:none;color:var(--sds-color-text-muted);font-weight:var(--sds-font-weight-regular)}.icon-btn{display:inline-grid;place-items:center;inline-size:38px;block-size:38px;border-radius:var(--sds-radius-m);border:1px solid var(--sds-color-border);background:var(--sds-color-surface);color:var(--sds-color-text);cursor:pointer;transition:background .15s ease,border-color .15s ease}.icon-btn:hover{background:var(--sds-color-surface-hover);border-color:var(--sds-color-border-strong)}.icon-btn svg{inline-size:18px;block-size:18px}.icon-btn .sun{display:none}[data-theme=dark] .icon-btn .sun{display:block}[data-theme=dark] .icon-btn .moon{display:none}.page-head{padding-block:clamp(40px,6vw,72px) var(--sds-space-700);border-block-end:1px solid var(--sds-color-border)}.page-head__eyebrow{display:block;font-size:.9375rem;letter-spacing:0;color:var(--sds-color-text-muted);margin-block-end:var(--sds-space-400)}.page-head h1{margin:0 0 var(--sds-space-400);font-family:var(--sds-font-family-headline);font-weight:var(--sds-font-weight-regular);font-size:var(--sds-type-headline-2-size);line-height:var(--sds-type-headline-2-line);letter-spacing:-.01em}.page-head h1 em{font-style:normal;color:inherit}.page-head__lead{max-inline-size:60ch;color:var(--sds-color-text);font-size:1.25rem;line-height:1.4;margin-block-end:var(--sds-space-600)}.page-head__cta{display:flex;flex-wrap:wrap;gap:var(--sds-space-400);align-items:center;margin-block-end:var(--sds-space-600)}.glance{border-block:1px solid var(--sds-color-border);background:var(--sds-color-surface)}.glance__inner{display:flex;flex-wrap:wrap;gap:var(--sds-space-600) clamp(40px,6vw,80px);padding-block:var(--sds-space-700)}.glance__item{display:flex;flex-direction:column}.glance__num{font-family:var(--sds-font-family-headline);font-weight:300;font-size:clamp(2.25rem,4vw,3.25rem);line-height:1;letter-spacing:-.02em}.glance__label{font-size:.875rem;color:var(--sds-color-text-muted);margin-block-start:var(--sds-space-200)}.content{min-inline-size:0}.section{padding-block:clamp(48px,6vw,64px)}.section--alt{background:var(--sds-color-surface);border-block:1px solid var(--sds-color-border)}.section__head{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,88px);row-gap:var(--sds-space-300);align-items:end;margin-block-end:clamp(40px,6vw,64px)}.section__head .eyebrow{grid-column:1;grid-row:1;font-size:.9375rem;color:var(--sds-color-text-muted)}.section__head h2{grid-column:1;grid-row:2;margin:0;font-family:var(--sds-font-family-headline);font-weight:var(--sds-font-weight-regular);font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.01em}.section__head p{grid-column:2;grid-row:1 / 3;align-self:end;margin:0;max-inline-size:48ch;color:var(--sds-color-text);font-size:1.125rem}@media(max-width:768px){.section__head{grid-template-columns:1fr}.section__head h2,.section__head p{grid-column:1;grid-row:auto}}.foundations sds-card{display:block;block-size:100%}.foundations{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sds-space-800);align-items:start}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:var(--sds-space-300)}.swatch{border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-s);overflow:hidden;background:var(--sds-color-bg)}.swatch__chip{block-size:64px}.swatch__meta{padding:10px 12px}.swatch__name{font-size:.8125rem;font-weight:var(--sds-font-weight-bold)}.swatch__hex{font-size:.75rem;color:var(--sds-color-text-muted);font-variant-numeric:tabular-nums;text-transform:uppercase}.ramp{display:flex;border-radius:var(--sds-radius-s);overflow:hidden;border:1px solid var(--sds-color-border);margin-block-start:var(--sds-space-400)}.ramp span{flex:1;block-size:40px}.specimen{display:flex;flex-direction:column;gap:var(--sds-space-400);border-inline-start:2px solid var(--sds-color-border);padding-inline-start:var(--sds-space-500)}.specimen__row{display:flex;align-items:baseline;gap:var(--sds-space-400)}.specimen__tag{flex:none;inline-size:96px;font-size:.75rem;color:var(--sds-color-text-muted);font-variant-numeric:tabular-nums}.code{position:relative;background:var(--sds-color-neutral-9);color:var(--sds-color-neutral-1);border-radius:var(--sds-radius-m);border:1px solid var(--sds-color-border);overflow:hidden}.code pre{margin:0;padding:var(--sds-space-500);padding-inline-end:64px;overflow-x:auto;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.6}.code code{font-family:inherit;white-space:pre}.copy-btn{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:.75rem;border-radius:var(--sds-radius-s);border:1px solid color-mix(in srgb,#fff 22%,transparent);background:color-mix(in srgb,#fff 8%,transparent);color:var(--sds-color-neutral-1);cursor:pointer;transition:background .15s ease}.copy-btn:hover{background:color-mix(in srgb,#fff 16%,transparent)}.copy-btn.is-copied{color:var(--sds-color-success);border-color:var(--sds-color-success)}.install-grid{display:grid;gap:var(--sds-space-500)}.install-step__label{display:block;margin-block-end:var(--sds-space-300);font-size:.9375rem;color:var(--sds-color-text-muted)}.install-step__label b{color:var(--sds-color-text)}.footer{border-block-start:1px solid var(--sds-color-border);background:var(--sds-color-surface);padding-block:var(--sds-space-800)}.footer__grid{display:flex;flex-wrap:wrap;gap:var(--sds-space-700);justify-content:space-between}.footer__col h4{margin:0 0 var(--sds-space-300);font-size:.875rem;letter-spacing:0;color:var(--sds-color-text-muted)}.footer__col a{display:block;text-decoration:none;color:var(--sds-color-text);font-size:.9375rem;padding-block:4px}.footer__col a:hover{color:var(--sds-color-primary)}.footer__note{margin-block-start:var(--sds-space-600);padding-block-start:var(--sds-space-500);border-block-start:1px solid var(--sds-color-border);color:var(--sds-color-text-muted);font-size:.8125rem;max-inline-size:70ch}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start}.sidenav{position:sticky;inset-block-start:64px;block-size:calc(100dvh - 64px);overflow-y:auto;padding:var(--sds-space-500) var(--sds-space-400);border-inline-end:1px solid var(--sds-color-border)}.sidenav__search{inline-size:100%;padding:9px 12px;margin-block-end:var(--sds-space-400);border-radius:var(--sds-radius-m);border:1px solid var(--sds-color-border);background:var(--sds-color-bg);color:var(--sds-color-text);font:inherit;font-size:.875rem}.site-nav{--sds-sidenav-width: 100%;--sds-sidenav-item-color: var(--sds-color-text-muted);--sds-sidenav-active-color: var(--sds-color-primary)}.site-nav sds-sidenav-item::part(item){padding-block:6px;padding-inline:10px;font-size:.9375rem}.sidenav__empty{padding-inline:10px;font-size:.875rem;color:var(--sds-color-text-muted)}.gallery{min-inline-size:0;padding:var(--sds-space-700) clamp(var(--sds-space-500),4vw,var(--sds-space-800))}.gallery__intro{max-inline-size:70ch;margin-block-end:var(--sds-space-800)}.gallery__intro h1{margin:0 0 var(--sds-space-400);font-family:var(--sds-font-family-headline);font-weight:var(--sds-font-weight-regular);font-size:clamp(2.25rem,5vw,3.25rem);line-height:1.05}.gallery__intro p{margin:0;color:var(--sds-color-text-muted);font-size:1.125rem}.cat{margin-block-end:var(--sds-space-800)}.cat__title{margin:0 0 var(--sds-space-500);padding-block-end:var(--sds-space-300);border-block-end:1px solid var(--sds-color-border);font-family:var(--sds-font-family-headline);font-weight:var(--sds-font-weight-regular);font-size:1.75rem}.entry{padding-block:var(--sds-space-600);border-block-end:1px solid var(--sds-color-border);scroll-margin-block-start:88px}.entry:last-child{border-block-end:none}.entry__head{display:flex;align-items:baseline;gap:var(--sds-space-400);flex-wrap:wrap;margin-block-end:6px}.entry__head h3{margin:0;font-family:var(--sds-font-family-headline);font-weight:var(--sds-font-weight-regular);font-size:1.5rem}.entry__tag{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8125rem;color:var(--sds-color-primary);background:color-mix(in srgb,var(--sds-color-primary) 10%,transparent);padding:2px 8px;border-radius:var(--sds-radius-s)}.entry__desc{margin:0 0 var(--sds-space-500);color:var(--sds-color-text);max-inline-size:70ch}.demo{border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-s);overflow:hidden}.demo__stage{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sds-space-500);padding:var(--sds-space-600);background:var(--sds-color-bg)}.demo__stage--block{display:block}.demo__stage:has(sds-input),.demo__stage:has(sds-select),.demo__stage:has(sds-search){align-items:flex-start}.demo .code{border:none;border-block-start:1px solid var(--sds-color-border);border-radius:0}@media(max-width:860px){.hero__grid{grid-template-columns:1fr}.hero__demo{order:-1}.foundations{grid-template-columns:1fr;gap:var(--sds-space-600)}}@media(max-width:768px){.shell{grid-template-columns:1fr}.sidenav{position:fixed;inset:64px 0 0 auto;z-index:40;inline-size:min(86vw,320px);background:var(--sds-color-surface);border-inline-start:1px solid var(--sds-color-border);transform:translate(110%);transition:transform .2s ease}.sidenav.is-open{transform:translate(0)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}