.ds{--ds-accent: var(--accent-system);--ds-accent-text: var(--ds-accent);--ds-line: color-mix(in srgb, var(--color-text) 10%, transparent);--ds-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;max-width:1328px;margin:0 auto;padding:56px 24px 120px}:root[data-theme=light] .ds{--ds-accent-text: color-mix(in srgb, var(--ds-accent) 62%, #000)}.ds code{padding:.1em .4em;border-radius:6px;background:color-mix(in srgb,var(--color-text) 6%,transparent);color:var(--color-text-soft);font-family:var(--ds-mono);font-size:.85em;overflow-wrap:anywhere}.ds-link{color:var(--color-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--color-text) 30%,transparent);text-underline-offset:3px;transition:text-decoration-color var(--transition)}.ds-link:hover{text-decoration-color:currentColor}.ds-link:focus-visible,.ds-row:focus-visible,.ds-theme:focus-visible,.ds-ease:focus-visible{outline:2px solid var(--color-border-hover);outline-offset:3px;border-radius:6px}.ds-hero{max-width:900px;padding-bottom:88px}.ds-hero .breadcrumb{margin-bottom:32px}.ds-hero__title{margin:10px 0 20px;font-size:clamp(40px,6vw,72px);line-height:1.05;letter-spacing:-.02em}.ds-hero__lede{max-width:64ch;margin-bottom:24px;color:var(--color-text-soft);font-size:20px;line-height:1.55}.ds-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:56px 0 0;border-top:1px solid var(--ds-line)}.ds-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:20px 24px 0;border-left:1px solid var(--ds-line)}.ds-stat:first-child{padding-left:0;border-left:0}.ds-stat dt{color:var(--color-muted);font-size:14px}.ds-stat dd{margin:0;font-family:var(--font-heading);font-size:44px;font-weight:700;line-height:1;letter-spacing:-1px}.ds{--toc-accent: var(--ds-accent-text)}@media(min-width:1200px){.ds-layout{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:start;gap:64px}}@media(max-width:1199px){.ds-layout>.toc{margin-bottom:48px}}.ds-section{padding-bottom:120px}.ds-section+.ds-section{padding-top:96px;border-top:1px solid var(--ds-line)}.ds-section__head{max-width:740px;margin-bottom:48px}.ds-section__index{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:var(--ds-accent-text);font-family:var(--font-heading);font-size:13px;letter-spacing:1px}.ds-section__index:after{content:"";width:32px;height:1px;background:currentColor;opacity:.6}.ds-section__title{font-size:clamp(32px,4vw,48px);line-height:1.1}.ds-section__intro{margin-top:16px;color:var(--color-text-soft);font-size:18px;line-height:1.6}.ds-group+.ds-group{margin-top:80px}.ds-group__title{margin-bottom:8px;font-size:24px}.ds-group__intro{max-width:70ch;margin-bottom:24px;color:var(--color-muted);font-size:16px;line-height:1.6}.ds-subtitle{margin:48px 0 8px;font-family:var(--font-heading);font-size:17px;font-weight:500}.ds-note{margin-top:16px;color:var(--color-muted);font-size:14px}.ds-principles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0;padding:0;list-style:none}.ds-principle{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:inset 0 1px color-mix(in srgb,var(--color-text) 6%,transparent)}.ds-principle__num{margin-bottom:12px;color:transparent;font-family:var(--font-heading);font-size:40px;font-weight:700;line-height:1;letter-spacing:-1px;-webkit-text-stroke:1.5px color-mix(in srgb,var(--color-text) 24%,transparent)}.ds-principle__title{font-size:18px;font-weight:500;line-height:1.3}.ds-principle__text{color:var(--color-muted);font-size:15px;line-height:1.55}.ds-swatches,.ds-ladder,.ds-accents,.ds-themes,.ds-fonts,.ds-type,.ds-space,.ds-radii,.ds-elevations,.ds-eases,.ds-widths,.ds-icons,.ds-covers,.ds-rows,.ds-patterns,.ds-files,.ds-drift{margin:0;padding:0;list-style:none}.ds-swatch__chip,.ds-ladder__chip{--checker: color-mix(in srgb, var(--color-text) 10%, transparent);background:linear-gradient(var(--sw),var(--sw)),repeating-conic-gradient(var(--checker) 0 25%,transparent 0 50%) 0 0 / 10px 10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text) 14%,transparent)}.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.ds-swatch{display:grid;grid-template-columns:44px minmax(0,1fr);align-content:start;gap:4px 12px;padding:12px;border:1px solid var(--ds-line);border-radius:12px}.ds-swatch__chip{grid-row:span 3;width:44px;height:44px;border-radius:10px}.ds .ds-swatch__name{padding:0;background:none;color:var(--color-text);font-size:12.5px}.ds-swatch__values{display:flex;flex-wrap:wrap;gap:4px}.ds-swatch__values code{font-size:11px}.ds-swatch__note{color:var(--color-muted);font-size:13px;line-height:1.4}.ds-ladder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.ds-ladder__step{--sw: color-mix(in srgb, var(--color-text) var(--mix), transparent);display:flex;flex-direction:column;gap:6px;color:var(--color-muted);font-size:13px;line-height:1.4}.ds-ladder__chip{height:56px;margin-bottom:4px;border-radius:12px}.ds-ladder__step strong{color:var(--color-text);font-family:var(--font-heading);font-size:15px}.ds-accents{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.ds-accent{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border:1px solid var(--ds-line);border-radius:999px}.ds-accent__chip{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sw);box-shadow:0 0 18px color-mix(in srgb,var(--sw) 45%,transparent)}.ds .ds-accent code{display:block;padding:0;background:none;color:var(--color-text);font-size:12px}.ds-accent__note{display:block;color:var(--color-muted);font-size:12.5px}.ds-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}.ds-theme{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ds-line);border-radius:12px;transition:border-color var(--transition)}.ds-theme:hover{border-color:color-mix(in srgb,var(--color-text) 23%,transparent)}.ds-theme__chips{display:flex}.ds-theme__chips span{width:22px;height:22px;border:2px solid var(--color-bg);border-radius:50%;background:var(--sw)}.ds-theme__chips span+span{margin-left:-7px}.ds-theme__name{flex:1;font-size:15px;font-weight:600}.ds .ds-theme__hex{font-size:11px}.ds-fonts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:32px}.ds-font{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-card)}.ds-font__sample{margin-bottom:12px;font-size:64px;line-height:1}.ds-font__name{font-size:17px;font-weight:600}.ds-font__meta{color:var(--color-muted);font-size:13px;line-height:1.45}.ds-type{border-top:1px solid var(--ds-line)}.ds-type__row{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--ds-line)}.ds-type__meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:var(--color-muted);font-size:13px}.ds-type__role{color:var(--color-text);font-size:14px;font-weight:600}.ds-type__meta code{font-size:11px}.ds-type__sample{min-width:0;color:var(--color-text);font-size:min(var(--size),13vw);overflow-wrap:anywhere}.ds-type__sample--muted{color:var(--color-muted)}.ds-type__sample--soft{color:var(--color-text-soft)}.ds-space{display:flex;flex-direction:column;gap:10px}.ds-space__row{display:grid;grid-template-columns:44px 140px minmax(0,1fr);align-items:center;gap:16px;color:var(--color-muted);font-size:14px}.ds-space__bar{width:var(--size);height:12px;border-radius:3px;background:var(--ds-accent);opacity:.85}.ds-radii{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.ds-radius{display:flex;flex-direction:column;gap:6px;color:var(--color-muted);font-size:13px;line-height:1.4}.ds-radius__box{width:72px;height:72px;margin-bottom:8px;border:1.5px solid color-mix(in srgb,var(--color-text) 35%,transparent);background:color-mix(in srgb,var(--color-text) 4%,transparent)}.ds-elevations{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;padding:32px;border-radius:24px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--ds-line)}.ds-elevation{display:flex;flex-direction:column;gap:8px;color:var(--color-muted);font-size:13px}.ds-elevation__box{display:grid;place-items:center;height:96px;margin-bottom:8px;border:1px solid var(--ds-line);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-text);font-family:var(--font-heading);font-size:14px}.ds-elevation code{font-size:10.5px}.ds-eases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.ds-ease{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;border:1px solid var(--color-border);border-radius:var(--radius-card);color:var(--color-muted);font-size:13px;line-height:1.45}.ds-ease__curve{width:100%;height:120px;overflow:visible}.ds-ease__axis{fill:none;stroke:var(--ds-line);stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.ds-ease__path{fill:none;stroke:var(--ds-accent-text);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.ds-ease__track{position:relative;height:16px;margin:4px 0;border-radius:999px;background:color-mix(in srgb,var(--color-text) 6%,transparent)}.ds-ease__dot{position:absolute;inset:0 16px 0 0;transition:transform .9s var(--ds-ease)}.ds-ease__dot:before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--ds-accent)}.ds-ease:hover .ds-ease__dot,.ds-ease:focus-visible .ds-ease__dot{transform:translate(100%)}.ds .ds-ease>code{align-self:flex-start;color:var(--color-text)}.ds-table-wrap,.ds-props-wrap{overflow-x:auto}.ds-table-wrap{margin-top:24px;border:1px solid var(--ds-line);border-radius:12px}.ds-table,.ds-props{width:100%;border-collapse:collapse;font-size:14px}.ds-table th,.ds-props th{padding:12px 16px;border-bottom:1px solid var(--ds-line);color:var(--color-muted);font-size:11px;font-weight:600;letter-spacing:1.2px;text-align:left;text-transform:uppercase;white-space:nowrap}.ds-table td,.ds-props td{padding:12px 16px;border-bottom:1px solid var(--ds-line);color:var(--color-text-soft);line-height:1.5;vertical-align:top}.ds-table tbody tr:last-child td,.ds-props tbody tr:last-child td{border-bottom:0}.ds-table,.ds-props{min-width:600px}.ds .ds-table code,.ds .ds-props code{overflow-wrap:normal}.ds-table--blocks td:first-child,.ds-table--blocks td:nth-child(3){white-space:nowrap}.ds-widths{display:flex;flex-direction:column;gap:14px}.ds-width{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:4px 16px;color:var(--color-muted);font-size:13px}.ds-width__bar{width:var(--w);height:10px;border-radius:999px;background:color-mix(in srgb,var(--color-text) 22%,transparent)}.ds-width>span:last-child{grid-column:2}.ds-specs{display:flex;flex-direction:column;gap:40px}.ds-spec{border:1px solid var(--color-border);border-radius:var(--radius-card)}.ds-spec__head{padding:24px 24px 20px}.ds-spec__name{font-size:20px;font-weight:700;line-height:1.3}.ds-spec__summary{max-width:72ch;margin-top:6px;color:var(--color-muted);font-size:15px;line-height:1.55}.ds-spec__stage{position:relative;padding:40px 32px;border-block:1px solid var(--ds-line);background-image:radial-gradient(circle,color-mix(in srgb,var(--color-text) 13%,transparent) 1px,transparent 1.4px);background-position:center;background-size:18px 18px}.ds-spec__stage--center{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;min-height:160px}.ds-spec__meta{display:grid;gap:10px;margin:0;padding:18px 24px;font-size:13.5px}.ds-spec__meta>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}.ds-spec__meta dt{padding-top:2px;color:var(--color-muted);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}.ds-spec__meta dd{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;color:var(--color-text-soft)}.ds-props-wrap{border-top:1px solid var(--ds-line)}.ds-props th,.ds-props td{padding-inline:24px}.ds-spec__stage :is(.template-card,.profile-card,.svc-f__card,.work-card,.site-sections__card){background-color:var(--color-bg)}.ds-demo-width{width:min(100%,var(--w))}.ds-demo-heading{margin-top:6px;font-family:var(--font-heading);font-size:22px;font-weight:500}.ds-spec__stage .section-header{margin-bottom:0}.ds-spec__stage .svc-f{max-width:none;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}.ds-spec__stage .svc-f__card{min-height:400px}.ds-demo-work{padding:16px}.ds-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;width:100%}.ds-icons__item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px 16px;border:1px solid var(--ds-line);border-radius:12px;background:var(--color-bg);font-size:12px}.ds-covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.ds-cover{position:relative;aspect-ratio:1024 / 798;border-radius:var(--radius-card)}.ds-cover__name{display:block;margin-top:8px;color:var(--color-muted);font-size:13px;text-align:center}.ds-demo-toc{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:60ch;color:var(--color-text-soft);font-size:16px;line-height:1.6}.ds-demo-toc kbd{padding:1px 7px;border:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:6px;color:var(--color-text);font-family:var(--ds-mono);font-size:.85em}.ds-demo-reveal{display:flex;flex-direction:column;align-items:center;gap:20px}.ds-demo-reveal__title{font-size:40px;line-height:1.2}.ds-demo-str{max-width:720px;margin:0 auto;font-size:22px;line-height:1.6}.ds-rows{border-top:1px solid var(--ds-line)}.ds-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto 18px;align-items:baseline;gap:20px;padding:16px 12px;border-bottom:1px solid var(--ds-line);transition:background var(--transition)}.ds-row:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}.ds-row__name{font-family:var(--font-heading);font-size:15px;font-weight:500}.ds-row__text{color:var(--color-muted);font-size:14.5px;line-height:1.5}.ds .ds-row__source{font-size:11px}.ds-row__arrow{align-self:center;color:var(--color-muted);transition:color var(--transition),transform .45s var(--ease-out-expo)}.ds-row:hover .ds-row__arrow{color:var(--color-text);transform:translate(2px,-2px)}.ds-cs-samples{display:flex;flex-direction:column;gap:28px}.ds-cs-sample{margin:0}.ds-cs-sample__label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;color:var(--color-muted);font-size:13px}.ds-cs-sample__stage{padding:32px;border:1px solid var(--ds-line);border-radius:var(--radius-card)}.ds-spotlight-demo{position:relative;margin-bottom:16px;padding:32px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-card)}.ds-spotlight-demo p:last-child{margin-top:8px;color:var(--color-text-soft);font-size:17px}.ds-patterns{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}.ds-pattern{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:inset 0 1px color-mix(in srgb,var(--color-text) 6%,transparent)}.ds-pattern__name{font-size:19px;font-weight:500}.ds-pattern__text{color:var(--color-muted);font-size:15px;line-height:1.55}.ds-skeleton-demo span{display:block;aspect-ratio:16 / 9;border-radius:12px}.ds-pattern--wide{grid-column:1 / -1}.ds-anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:6px 0 0;padding:0;list-style:none}.ds-anatomy__page{display:flex;flex-direction:column}.ds-anatomy__window{display:flex;flex:1;flex-direction:column;overflow:hidden;border:1px solid var(--ds-line);border-radius:12px;background:color-mix(in srgb,var(--color-text) 3%,transparent)}.ds-anatomy__bar{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--ds-line)}.ds-anatomy__bar i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--color-text) 18%,transparent)}.ds-anatomy__stack{display:flex;flex:1;flex-direction:column;gap:6px;padding:10px}.ds-anatomy__block{display:flex;align-items:center;justify-content:center;flex-grow:calc(var(--size, 1) - 1);min-height:calc(26px * var(--size, 1));padding:0 8px;border:1px solid var(--ds-line);border-radius:8px;background:color-mix(in srgb,var(--color-text) 5%,transparent);color:var(--color-muted);font-size:11px;line-height:1.2;text-align:center}.ds-anatomy__block--chrome{min-height:20px;border-style:dashed;background:none}.ds-anatomy__block--hero{min-height:52px;color:var(--color-text-soft)}.ds-anatomy__block--end{min-height:34px;border-color:color-mix(in srgb,var(--ds-accent) 45%,transparent);background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-accent-text);font-weight:500}.ds-anatomy__block--rail{position:relative;padding-left:22px}.ds-anatomy__block--rail:before{position:absolute;top:8px;bottom:8px;left:8px;width:3px;border-radius:2px;background:color-mix(in srgb,var(--color-text) 16%,transparent);content:""}.ds-anatomy__divider{height:1px;margin:1px 6px;background:var(--ds-line)}.ds-anatomy__caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:10px;font-size:13px}.ds-anatomy__caption strong{font-weight:500}.ds-code{margin:4px 0 0;padding:14px 16px;overflow-x:auto;border:1px solid var(--ds-line);border-radius:12px;background:color-mix(in srgb,var(--color-text) 4%,transparent);font-size:12.5px;line-height:1.6}.ds .ds-code code{padding:0;background:none;font-size:inherit;white-space:pre-wrap}.ds-pattern__where{margin-top:auto;padding-top:6px;color:var(--color-muted);font-size:13px}.ds-pattern__where a{color:var(--color-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--color-text) 30%,transparent);text-underline-offset:3px}.ds-pattern__where a:hover{text-decoration-color:currentColor}.ds-pattern__where span,.ds-drift__fix span{margin-right:6px;color:var(--ds-accent-text);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}.ds-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ds-rules__col{padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-card)}.ds-rules__title{margin-bottom:18px;font-size:20px}.ds-rules ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}.ds-rules li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;color:var(--color-text-soft);font-size:15.5px;line-height:1.55}.ds-rules__icon{width:20px;height:20px;margin-top:2px}.ds-rules__col--do .ds-rules__icon{color:var(--ds-accent-text)}.ds-rules__col--dont .ds-rules__icon{color:var(--color-muted)}.ds-files{border-top:1px solid var(--ds-line)}.ds-files li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--ds-line);color:var(--color-muted);font-size:14.5px}.ds-files code{justify-self:start}.ds-drift{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.ds-drift__item{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px dashed color-mix(in srgb,var(--color-text) 22%,transparent);border-radius:var(--radius-card);color:var(--color-muted);font-size:15px;line-height:1.55}.ds-drift__title{color:var(--color-text);font-size:17px;font-weight:500}.ds-drift__fix{margin-top:auto;padding-top:8px;color:var(--color-text-soft)}@media(max-width:767px){.ds{padding:32px 16px 96px}.ds-hero{padding-bottom:56px}.ds-hero__lede{font-size:17px}.ds-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}.ds-stat:nth-child(3){padding-left:0;border-left:0}.ds-stat dd{font-size:36px}.ds-section{padding-bottom:88px}.ds-section+.ds-section{padding-top:72px}.ds-type__row{grid-template-columns:minmax(0,1fr);gap:10px}.ds-space__row{grid-template-columns:36px 1fr}.ds-space__use{grid-column:2}.ds-spec__stage{padding:28px 16px}.ds-spec__meta>div{grid-template-columns:minmax(0,1fr);gap:6px}.ds-row{grid-template-columns:minmax(0,1fr) 18px;gap:6px 12px}.ds-row__text,.ds-row__source{grid-column:1}.ds-row__arrow{grid-row:1;grid-column:2}.ds-rules,.ds-files li{grid-template-columns:minmax(0,1fr)}.ds-files li{gap:6px}.ds-patterns,.ds-drift,.ds-anatomy{grid-template-columns:minmax(0,1fr)}.ds-cs-sample__stage{padding:20px 16px}.ds-elevations{padding:20px}}