/* Native theme examples with a shared fill selector. */
.design-section{padding-block:74px 58px;border-bottom:1px solid var(--line)}
[data-i18n="designTitle"]{white-space:pre-line}
.theme-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.theme-card{border:1px solid #303c47;background:#080d12;padding:23px 24px 18px;min-width:0}
.theme-card figcaption{display:flex;align-items:baseline;gap:15px;min-height:45px}
.theme-card figcaption>span{font-size:12px;color:#93a2ae;letter-spacing:1px}
.theme-card h3{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.theme-card>svg{width:100%;height:108px;background:#000;image-rendering:pixelated;margin-block:17px}
.theme-card>p{font-size:12px;letter-spacing:1px;color:#aab7bf}
.design-note{font-size:13px;line-height:1.8;color:var(--muted);margin-top:18px;max-width:1080px}

.theme-fill-switch{display:flex;width:fit-content;border:1px solid #3b4b58;margin-bottom:30px}
.theme-fill-switch button{min-width:130px;min-height:48px;border:0;background:#0c151e;padding:12px 24px;font-size:14px;line-height:1.5}
.theme-fill-switch button+button{border-left:1px solid #3b4b58}
.theme-fill-switch button[aria-pressed=true]{background:#f7f2e6;color:#080c0f}
.theme-fill-switch button:hover{box-shadow:inset 0 -3px var(--orange)}
.design-availability{padding-top:20px;margin-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--muted)}
@media(max-width:1250px){.header nav{gap:13px;font-size:11px}.theme-card{padding:19px}.theme-card h3{font-size:16px}}
@media(max-width:750px){.theme-gallery{grid-template-columns:1fr 1fr;gap:14px}.theme-card{padding:19px 16px}.theme-card figcaption{min-height:49px;gap:10px}.theme-card>svg{height:84px}.design-section{padding-top:50px}}
@media(max-width:560px){.header{grid-template-columns:1fr auto}.header nav{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%;gap:12px;font-size:12px}.header nav a{min-height:36px}.header nav a[href="#overview"],.header nav a[href="#details"],.header nav a[href*="Contact"]{display:none}.header nav a[href="#graphs"],.header nav a[href="#design"],.header nav a[href="#glyphs"]{display:flex}.language{grid-column:2;grid-row:1;width:auto;margin:0}.language button{width:30px;min-height:36px;font-size:11px}.brand>span:first-of-type{font-size:17px}.brand{gap:7px}.brand>svg{width:23px;height:23px}.design-section{padding-block:44px}.theme-fill-switch{width:100%;margin-bottom:24px}.theme-fill-switch button{flex:1;min-width:0}.theme-gallery{grid-template-columns:1fr}.theme-card{padding:20px 22px}.theme-card figcaption{min-height:0}.theme-card h3{font-size:18px}.theme-card>svg{height:105px;margin-block:21px 15px}.theme-card>p{font-size:13px}.design-note,.design-availability{font-size:13px}}
@media(max-width:360px){.header{gap:8px 6px}.language button{width:27px}.brand>span:first-of-type{font-size:16px}.brand>svg{width:21px;height:21px}.header nav{display:flex;font-size:11px}}