.design-collection{--dc-ink:#26382b;--dc-muted:#64715f;--dc-line:#d2d9c8;--dc-paper:#f7f6f2;--dc-soft:#e9ede1;color:var(--dc-ink);font-family:Satoshi,sans-serif}.design-collection *{box-sizing:border-box}.dc-toolbar{display:flex;gap:20px;justify-content:space-between;align-items:flex-end;margin-bottom:26px}.dc-filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.dc-filters label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--dc-muted)}.dc-filters select{appearance:auto;width:260px;max-width:100%;border:1px solid var(--dc-line);border-radius:5px;padding:11px 12px;background:var(--dc-paper);color:var(--dc-ink);font:inherit;font-size:12px;min-height:42px}.dc-filters label:nth-child(2) select{width:190px}.dc-clear{display:flex;align-items:center;gap:6px;background:none;border:0;font-size:11px;min-height:42px;cursor:pointer;color:var(--dc-muted)}.dc-result-count{font-size:11px;color:var(--dc-muted);white-space:nowrap;padding-bottom:11px}.dc-direction-note{border-left:2px solid #748659;padding:2px 0 4px 17px;margin-bottom:27px;max-width:800px}.dc-direction-note>strong{font-family:Cabinet Grotesk,sans-serif;font-size:23px;font-weight:500}.dc-direction-note>p{font-size:12px;line-height:1.75;margin:7px 0;color:var(--dc-muted)}.dc-direction-note>span{font-size:11px;color:var(--dc-muted)}.dc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 22px}.dc-card{min-width:0}.dc-image{display:block;position:relative;width:100%;aspect-ratio:1.44;padding:0!important;overflow:hidden;border-radius:8px;border:1px solid var(--dc-line)!important;background:var(--dc-soft)!important;cursor:pointer;text-decoration:none!important;color:var(--dc-ink)}.dc-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.dc-image:hover img,.dc-image:focus-visible img{transform:scale(1.045)}.dc-preview-hint{position:absolute;bottom:12px;right:12px;display:flex;gap:9px;align-items:center;background:#243b2ef0;color:#fff9e8;padding:9px 11px;border-radius:4px;font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.dc-image:hover .dc-preview-hint,.dc-image:focus-visible .dc-preview-hint{opacity:1;transform:none}.dc-source-badge{position:absolute;top:10px;left:10px;font-size:8px;background:#fffaf0ef;color:#42533a;padding:4px 7px;border-radius:3px}.dc-card-top{display:flex;justify-content:space-between;align-items:center;margin-top:13px;min-height:25px;color:var(--dc-muted);font-size:10px}.dc-card-top button{display:grid;place-items:center;border:1px solid var(--dc-line)!important;border-radius:50%;width:32px;height:32px;padding:0;background:transparent;cursor:pointer;color:var(--dc-ink)}.dc-card-top button[aria-pressed=true]{background:#dbe5c9;color:#344d2a}.dc-card h3{font-family:Cabinet Grotesk,sans-serif;font-size:24px;line-height:1.05;letter-spacing:-.5px;font-weight:500;margin:4px 0 8px!important}.dc-card h3 button,.dc-card h3 a{font:inherit!important;background:none;border:0;color:inherit;padding:0!important;text-align:left;text-decoration:none;cursor:pointer}.dc-family-name{font-size:10px;font-weight:700;display:block;margin-bottom:7px}.dc-card>p{font-size:12px;line-height:1.7;color:var(--dc-muted);margin:0!important}.dc-family-link{display:inline-flex;align-items:center;gap:7px;margin-top:11px;background:none;border:0;color:var(--dc-muted);font-size:10px!important;padding:4px 0!important;cursor:pointer}.dc-family-link:hover{color:var(--dc-ink)}.dc-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:33px;border-top:1px solid var(--dc-line);padding-top:26px}.dc-more>button{display:flex;align-items:center;gap:12px;background:var(--dc-ink)!important;color:var(--dc-paper)!important;border:0;border-radius:5px;padding:13px 20px!important;font-size:13px!important;cursor:pointer}.dc-more>span{font-size:11px;color:var(--dc-muted)}.dc-empty{display:flex;align-items:center;flex-direction:column;text-align:center;gap:15px;padding:55px 20px;background:var(--dc-soft);border-radius:7px}.dc-empty>strong{font-family:Cabinet Grotesk,sans-serif;font-size:24px;font-weight:500}.dc-empty>p{font-size:12px;color:var(--dc-muted);margin:0}.dc-empty>button{border:1px solid var(--dc-line)!important;background:var(--dc-paper)!important;padding:12px 16px!important;border-radius:4px;font-size:12px!important;cursor:pointer}.dc-marketing{--dc-ink:#f2efdf;--dc-muted:#b7baae;--dc-line:#ffffff24;--dc-paper:#131713;--dc-soft:#1b231c}.dc-marketing .dc-card h3{font-size:26px}.dc-marketing .dc-card>p{font-size:13px}.dc-marketing .dc-family-name{color:#c3caac}.dc-marketing .dc-image{aspect-ratio:1.45}.dc-marketing .dc-filters select{font-size:14px}.dc-marketing .dc-result-count{font-size:12px}.dc-marketing :focus-visible{outline:2px solid #d4b780;outline-offset:4px}.el-explore-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-bottom:1px solid var(--el-line);padding:18px 0}.el-explore-paths button{display:flex;align-items:center;gap:11px;text-align:left;padding:12px 13px!important;border-radius:5px}.el-explore-paths button[aria-pressed=true]{background:#e3e9d9}.el-explore-paths button>span{display:flex;flex-direction:column;gap:3px}.el-explore-paths b{font-size:11px;font-weight:700}.el-explore-paths small{font-size:9px;color:var(--el-muted)}.el-explore-paths svg{color:#6a7a55}.el-category-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px 0 28px}.el-category-map button{display:flex;align-items:center;gap:10px;padding:13px!important;background:#ebeee4!important;border-radius:5px;text-align:left}.el-category-map button>span{flex:1;font-size:11px}.el-category-map small{font-family:var(--el-mono);font-size:10px;color:var(--el-muted)}.el-category-map svg{color:#697c52}.el-part-context{display:flex;align-items:flex-start;gap:14px;border-left:2px solid #98aa79;padding:3px 0 3px 16px;margin:0 0 24px;max-width:770px}.el-part-context>div{display:flex;flex-direction:column;gap:4px}.el-part-context strong{font-size:12px;font-weight:500}.el-part-context p{font-size:11px;color:var(--el-muted);line-height:1.7}.el-item-behavior{font-size:10px;color:#536947;display:flex;align-items:center;gap:7px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--el-line)}.el-item-behavior>span:first-child{display:inline-block;background:#e2e9d7;padding:3px 7px;border-radius:3px;font-size:9px;white-space:nowrap}.el-open-preview>span{opacity:1;transform:none;background:#24362ee8;font-size:9px;padding:7px 9px}.el-playground-guide{padding:15px 18px;background:#e4ebd9;border:1px solid #cdd8bc;border-radius:7px;margin-bottom:17px;display:flex;align-items:flex-start;gap:11px}.el-playground-guide>svg{color:#536d3b;margin-top:1px}.el-playground-guide>div{flex:1}.el-playground-guide strong{font-size:12px;display:block;font-weight:700;margin-bottom:4px}.el-playground-guide p{font-size:11px;line-height:1.7;color:#526448}.el-playground-guide .el-playground-safety{font-size:9px;margin-top:7px;color:#526448}.el-preview-tools{gap:6px}.el-preview-tools button{display:flex;align-items:center;gap:5px}.el-preview-tools button>span{font-size:9px}.el-preview-toolbar{flex-wrap:wrap}.el-playground-watch{margin:5px 0 17px;padding-top:14px;border-top:1px solid var(--el-line);font-size:11px;line-height:1.75;color:var(--el-muted)}.el-playground-watch>strong{display:block;font-family:var(--el-body);font-size:12px;font-weight:700;color:var(--el-ink);margin-bottom:4px}.el-demo-save-feedback{font-size:10px;color:#486235;margin-top:10px;min-height:15px}.el-related-designs{margin-top:23px;border-top:1px solid var(--el-line);padding-top:16px}.el-related-designs>h3{font-size:15px;font-weight:500;margin-bottom:12px}.el-related-designs>div{display:flex;gap:10px;overflow-x:auto;padding-bottom:9px}.el-related-designs button{width:145px;min-width:145px;text-align:left;padding:0!important}.el-related-designs img{display:block;width:145px;height:93px;object-fit:cover;object-position:top;border-radius:5px}.el-related-designs button>span{font-size:10px;display:block;margin-top:6px}.el-real-example{font-size:10px;margin:5px 0 17px;line-height:1.6;color:var(--el-muted)}.el-real-example>strong{display:block;color:var(--el-ink);font-size:12px;font-weight:500}.el-real-example>span{display:block;margin-top:5px}@media(max-width:1180px){.dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dc-filters select{width:225px}.el-explore-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.el-category-map{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:680px){.dc-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.dc-filters{width:100%;gap:10px}.dc-filters label{flex:1;min-width:0}.dc-filters select,.dc-filters label:nth-child(2) select{width:100%;font-size:16px;min-height:45px;padding:10px 7px}.dc-filters label{font-size:10px}.dc-clear{font-size:11px}.dc-result-count{font-size:10px;padding:0}.dc-grid{grid-template-columns:1fr;gap:30px}.dc-image{aspect-ratio:1.35}.dc-card h3{font-size:27px}.dc-card>p{font-size:13px}.dc-card-top{font-size:11px}.dc-card-top button{width:42px;height:42px}.dc-family-name{font-size:11px}.dc-family-link{min-height:36px;font-size:11px!important}.dc-source-badge{font-size:9px}.dc-preview-hint{opacity:1;transform:none;font-size:10px}.el-explore-paths{gap:4px;padding:12px 0}.el-explore-paths button{padding:12px 8px!important;gap:8px}.el-explore-paths b{font-size:10px}.el-explore-paths small{font-size:8px}.el-explore-paths svg{width:18px}.el-category-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.el-category-map button{padding:12px 9px!important;gap:7px}.el-category-map button>span{font-size:10px}.el-category-map svg{width:17px}.el-part-context{padding-left:12px}.el-part-context strong{font-size:12px}.el-part-context p{font-size:11px}.el-item-behavior{font-size:11px;margin-top:11px}.el-item-behavior>span:first-child{font-size:10px}.el-open-preview>span{display:flex;font-size:10px}.el-playground-guide{padding:12px;gap:8px}.el-playground-guide strong{font-size:12px}.el-playground-guide p{font-size:11px}.el-preview-tools button>span{font-size:8px}.el-preview-tools button{padding:7px 5px!important;gap:4px}.el-preview-tools{gap:2px}.el-preview-label{width:100%;margin-bottom:2px}.el-playground-watch{font-size:12px}.el-playground-watch>strong{font-size:13px}.el-preview-toolbar{margin-bottom:12px}.el-real-example{font-size:11px}}@media(prefers-reduced-motion:reduce){.dc-image img,.dc-preview-hint{transition:none;transform:none!important}}.el-explore-paths{position:sticky;top:0;z-index:6;background:var(--el-paper)}.el-catalog{scroll-margin-top:108px}.el-explore-paths{grid-template-columns:repeat(3,minmax(0,1fr))}.dc-how-to{font-size:13px;line-height:1.7;color:var(--dc-muted);margin:0 0 28px!important;max-width:750px}.dc-representative,.dc-saved-examples{display:block;font-size:10px;line-height:1.6;color:var(--dc-muted);margin-top:12px}.dc-saved-examples{color:var(--dc-ink);margin-top:5px}.dc-family-link{font-weight:700;min-height:40px;font-size:12px!important}.dc-source-badge{font-size:10px;padding:6px 9px}.dc-experimental{border-top:1px solid var(--dc-line);padding-top:32px;margin-top:48px}.dc-experimental>div:first-child>span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dc-muted)}.dc-experimental>div:first-child>h3{font-size:28px;font-family:Cabinet Grotesk,sans-serif;font-weight:500;margin:9px 0}.dc-experimental>div:first-child>p{font-size:13px;color:var(--dc-muted);margin:0 0 25px}.dc-card-top{gap:10px}.dc-card-top>span{line-height:1.6}.dc-card-top>button{flex-shrink:0}.df-modal{box-sizing:border-box;position:fixed;inset:0;width:min(1160px,calc(100% - 48px));max-width:none;max-height:90dvh;margin:auto;padding:0;border:1px solid #cbd0c0;border-radius:12px;background:#f7f6f2;color:#26382b;font-family:Satoshi,sans-serif;line-height:1.6;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #14241855}.df-modal::backdrop{background:#142019b8;backdrop-filter:blur(5px)}.df-modal *{box-sizing:border-box}.df-modal button,.df-modal a{font:inherit;letter-spacing:normal;text-transform:none;color:inherit;text-decoration:none;cursor:pointer}.df-modal button{border:0;background:none;padding:0}.df-modal :focus-visible{outline:2px solid #425932;outline-offset:4px}.df-header{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:3;padding:14px 28px;border-bottom:1px solid #d2d9c8;background:#f7f6f2}.df-header>span{font-size:11px}.df-header>span>span{color:#89957b;margin:0 10px}.df-header>button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d2d9c8!important;border-radius:50%}.df-intro{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:45px;padding:42px 38px}.df-eyebrow{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#5f6f50;margin-bottom:16px}.df-modal h2{font:500 clamp(32px,3.3vw,48px)/1.05 "Cabinet Grotesk",sans-serif;letter-spacing:-.035em;color:#26382b;margin:0 0 20px}.df-summary{font-size:15px;line-height:1.8;margin:0 0 25px;color:#526148}.df-intro dl{margin:0}.df-intro dl>div{margin:18px 0}.df-intro dt{font-size:11px;font-weight:700;margin-bottom:5px}.df-intro dd{margin:0;color:#59674f;font-size:12px;line-height:1.8}.df-modal .df-save{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 17px!important;margin-top:12px;border-radius:5px;background:#293f30!important;color:#fbf7ea!important;font-size:12px}.df-intro figure{margin:0;align-self:center}.df-intro figure img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover;object-position:top;border:1px solid #d2d9c8;border-radius:8px}.df-intro figcaption{font-size:10px;color:#637156;margin-top:10px}.df-intro figure img{aspect-ratio:1.5;object-fit:contain;background:#e5e8df}.df-examples{padding:32px 38px 42px;background:#edf0e6;border-top:1px solid #d2d9c8}.df-examples-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.df-examples-heading h3{font:500 27px/1.15 Cabinet Grotesk,sans-serif;color:#26382b;letter-spacing:-.02em;margin:0 0 10px}.df-examples-heading p{font-size:12px;line-height:1.8;color:#59674f;max-width:690px;margin:0}.df-examples-heading>span{font-size:11px;white-space:nowrap;color:#59674f;padding-top:5px}.df-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}.df-example{min-width:0}.df-example-image{display:block;width:100%;overflow:hidden;border-radius:6px;border:1px solid #cbd4c0!important}.df-example-image img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;object-position:top;transition:transform .3s}.df-example-image:hover img{transform:scale(1.035)}.df-example-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;min-height:34px;color:#5b6852;font-size:9px}.df-example-meta>button{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:1px solid #b7c4a8!important;border-radius:50%}.df-example-meta>button[aria-pressed=true]{background:#cdddbc!important}.df-example h4{font:500 22px/1.2 Cabinet Grotesk,sans-serif;letter-spacing:-.02em;color:#26382b;margin:5px 0 10px}.df-example>p{font-size:12px;line-height:1.8;color:#59674f;margin:0}.df-example-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}.df-example-links>a,.df-example-links>button{display:inline-flex;align-items:center;gap:6px;font-size:11px;min-height:38px;text-decoration:underline;text-underline-offset:4px}.df-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 28px;background:#f7f6f2;border-top:1px solid #d2d9c8;position:sticky;bottom:0;z-index:2}.df-footer button{display:flex;gap:9px;align-items:center;font-size:12px;min-height:40px}.df-footer>span{font-size:10px;color:#637156}.df-related{padding:20px 28px;font-size:12px;line-height:1.8;margin:0}.df-related a{text-decoration:underline;text-underline-offset:3px}.df-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:22px}.df-actions .df-save{margin:0}.df-modal .df-jump{display:flex;align-items:center;gap:9px;font-size:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.df-examples-heading h3{scroll-margin-top:100px}.el-family-back{padding:14px 28px;border-bottom:1px solid var(--el-line);display:flex;justify-content:space-between;align-items:center;gap:15px}.el-family-back>button{display:flex;align-items:center;gap:8px;font-size:12px;min-height:38px}.el-family-back>span{font-size:10px;color:var(--el-muted)}.el-shortlist-actions{flex-wrap:wrap}.el-shortlist-actions>a{text-decoration:none}.el-call-invitation p a{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}@media(max-width:900px){.df-intro{gap:25px;padding:30px 25px}.df-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.df-examples{padding:28px 25px}}@media(max-width:680px){.df-modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:9px}.df-header{padding:9px 15px;gap:8px}.df-header>span{font-size:10px}.df-header>span>span{margin:0 5px}.df-intro{grid-template-columns:1fr;gap:24px;padding:25px 20px}.df-intro figure img{aspect-ratio:1.6}.df-modal h2{font-size:36px}.df-summary{font-size:14px}.df-examples{padding:25px 20px}.df-examples-heading{flex-direction:column;gap:10px}.df-examples-heading h3{font-size:27px}.df-example-grid{grid-template-columns:1fr;gap:32px}.df-example-meta{font-size:10px}.df-example-meta>button{width:44px;height:44px}.df-example-links>a,.df-example-links>button{font-size:12px;min-height:44px}.df-footer{padding:10px 16px}.df-footer>span{display:none}.el-family-back{padding:10px 17px}.el-family-back>span{display:none}.el-family-back>button{font-size:11px;text-align:left}.dc-how-to{font-size:12px}.el-explore-paths{grid-template-columns:repeat(3,minmax(0,1fr))}.el-explore-paths button{flex-direction:column;align-items:flex-start;gap:6px}.el-explore-paths small{font-size:8px}.dc-family-link{font-size:12px!important}.dc-representative{font-size:11px}}@media(prefers-reduced-motion:reduce){.df-example-image img{transition:none;transform:none!important}}@media(max-width:359px){.el-mobile-categories{margin-right:-17px;padding-right:17px}}.el-modal-header{position:sticky;top:0;z-index:10;background:var(--el-paper)}.el-modal-footer{position:sticky;bottom:0;z-index:8;background:var(--el-paper)}.el-modal-footer .el-footer-save{padding:8px 12px!important;background:#e2ead5!important;border-radius:4px;color:#38502d!important;font-size:11px!important}.el-modal-footer .el-footer-save[aria-pressed=true]{background:#cddfba!important}@media(max-width:680px){.el-catalog{scroll-margin-top:132px}.el-explore-paths{padding-top:9px;padding-bottom:9px}}