.cmp-layout{grid-template-columns:1fr;align-items:start;gap:2.5rem;display:grid}.cmp-main{min-inline-size:0}@media (min-width:1024px){.cmp-layout{grid-template-columns:15rem minmax(0,1fr);gap:3rem}}.cmp-nav{display:none}@media (min-width:1024px){.cmp-nav{scrollbar-width:thin;max-block-size:calc(100dvh - 5.5rem);padding-block:2.75rem 1.5rem;padding-inline-end:.5rem;display:block;position:sticky;inset-block-start:4.5rem;overflow-y:auto}}.cmp-nav__group+.cmp-nav__group{margin-block-start:1.35rem}.cmp-nav__label{text-transform:uppercase;letter-spacing:.08em;color:var(--ddga-text-tertiary);margin-block:0 .4rem;font-size:.6875rem;font-weight:600}[dir=rtl] .cmp-nav__label{text-transform:none;letter-spacing:normal;font-size:.75rem}.cmp-nav__link{border-radius:var(--ddga-radius-sm);color:var(--ddga-text-secondary);border-inline-start:2px solid #0000;padding:.3rem .6rem;font-size:.875rem;line-height:1.35;text-decoration:none;transition:color .12s,background .12s;display:block}.cmp-nav__link:hover{color:var(--ddga-text-primary);background:var(--ddga-color-muted)}.cmp-nav__link[aria-current=page]{color:var(--ddga-color-primary);border-inline-start-color:var(--ddga-color-primary);background:color-mix(in srgb, var(--ddga-color-primary) 8%, transparent);font-weight:600}.examples{flex-direction:column;gap:2.5rem;margin-block-start:2.5rem;display:flex}.example{flex-direction:column;display:flex}.example__bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1rem;margin-block-end:.75rem;display:flex}.example__title{letter-spacing:-.01em;margin:0;font-size:1rem;font-weight:600}.example__tools{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.seg-group{border-radius:var(--ddga-radius-md);border:1px solid var(--ddga-color-border);background:var(--ddga-color-muted);padding:2px;display:inline-flex}.seg-group__btn{border-radius:calc(var(--ddga-radius-md) - 2px);block-size:26px;inline-size:28px;color:var(--ddga-text-tertiary);font-family:var(--ddga-font-mono), var(--ddga-font-ar), monospace;cursor:pointer;background:0 0;border:0;font-size:.75rem;font-weight:600}.seg-group__btn[data-active=true]{background:var(--ddga-color-card);color:var(--ddga-color-primary);box-shadow:var(--ddga-shadow-xs)}.tool-btn{border-radius:var(--ddga-radius-md);border:1px solid var(--ddga-color-border);block-size:30px;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;align-items:center;gap:.35rem;padding-inline:.55rem;font-size:.75rem;font-weight:500;display:inline-flex}.tool-btn:hover{background:var(--ddga-color-muted);color:var(--ddga-text-primary)}.tool-btn--icon{justify-content:center;inline-size:30px;padding-inline:0}.tool-btn[data-active=true]{border-color:var(--ddga-color-primary);color:var(--ddga-color-primary)}.tool-btn--code[data-active=true]{background:color-mix(in srgb, var(--ddga-color-primary) 14%, transparent)}.preview{border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);background:var(--ddga-color-background);background-image:radial-gradient(var(--ddga-color-border) .8px, transparent .8px);background-size:18px 18px;transition:border-radius .15s;overflow:hidden}.preview[data-collapsed=false]{border-end-end-radius:0;border-end-start-radius:0}.preview__host{place-items:center;inline-size:100%;padding:clamp(1.25rem,3.5vw,2.5rem);display:grid}.preview__frame{border-radius:var(--ddga-radius-md);background:var(--ddga-color-background);inline-size:100%;margin-inline:auto;transition:max-inline-size .3s cubic-bezier(.4,0,.2,1)}.preview__scope{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;min-block-size:168px;padding:clamp(1.25rem,4vw,2.5rem);display:flex}.preview__scope>.ddga-inline-alert{inline-size:100%;max-inline-size:560px}.preview__scope>:has(.ddga-inline-alert){inline-size:100%;max-inline-size:560px}.example__code{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}.preview__missing{color:var(--ddga-text-tertiary);font-size:.9375rem}.cmp-header{padding-block:2.5rem .5rem}.cmp-header__top{flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-end:1rem;display:flex}.cmp-title{letter-spacing:-.02em;margin:0;font-size:clamp(2rem,5vw,2.75rem);font-weight:600}.cmp-api{font-family:var(--ddga-font-mono), var(--ddga-font-ar), monospace;color:var(--ddga-text-tertiary);margin-block-start:.4rem;font-size:.9375rem;display:inline-block}.cmp-desc{color:var(--ddga-text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;max-inline-size:58ch;margin-block:.85rem 0;font-size:1rem;line-height:1.6;display:-webkit-box;overflow:hidden}.cmp-links{border-block-end:1px solid var(--ddga-color-border);flex-wrap:wrap;gap:1.25rem;margin-block-start:1.5rem;padding-block-end:1.5rem;display:flex}.cmp-link{color:var(--ddga-text-secondary);font-size:.875rem;font-family:var(--ddga-font-mono), var(--ddga-font-ar), monospace;align-items:center;gap:.4rem;text-decoration:none;display:inline-flex}.cmp-link:hover{color:var(--ddga-color-primary)}.prose{max-inline-size:68ch;color:var(--ddga-text-secondary);margin-block-start:1.5rem;font-size:1rem;line-height:1.7}.prose p{margin-block:.75rem}.prose code{font-family:var(--ddga-font-mono), var(--ddga-font-ar), monospace;background:var(--ddga-color-muted);border-radius:var(--ddga-radius-xs);padding:.1em .35em;font-size:.875em}.prose a{color:var(--ddga-color-primary)}.prose ul,.prose ol{padding-inline-start:1.25rem}.cmp-pager{border-block-start:1px solid var(--ddga-color-border);justify-content:space-between;gap:1rem;margin-block-start:3.5rem;padding-block-start:1.5rem;display:flex}.cmp-pager a{color:var(--ddga-text-primary);flex-direction:column;gap:.15rem;font-weight:500;text-decoration:none;display:flex}.cmp-pager a span{color:var(--ddga-text-tertiary);font-size:.75rem;font-family:var(--ddga-font-mono), var(--ddga-font-ar), monospace}.cmp-pager__dir{align-items:center;gap:.3rem;display:inline-flex}.cmp-pager a:last-child{text-align:end;align-items:flex-end}