.components{--card-width: 250px;--min-card-height: 250px;--gap: 15px;--image-size: 100px;display:grid;overflow-x:clip;grid-template-columns:1fr;gap:0px;align-items:stretch;max-width:100vw}.components.components-card-wide{--card-width: 300px}#componentTiles>.components{--card-width: 300px}.layout-container:has(>main>.components.components-overview-layout){height:100svh;max-height:100svh;overflow:hidden}.layout-container:has(>main>.components.components-overview-layout)>main{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column}.components.components-overview-layout{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;overflow-x:clip;overflow-y:hidden}.components.components-overview-layout>div{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0}.components.components-overview-layout .filter-bar{flex:0 0 auto}.components.components-overview-layout .panel{flex:1 1 0;min-height:0;overflow:auto}.components .filter-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--main-900)}.components .filter-bar button{color:var(--main-200);border:none;background:var(--main-700);padding:4px 10px;border-radius:var(--global-border-radius);cursor:pointer}.components .filter-bar button.active{color:var(--button-color);background:var(--purple);opacity:1}.components .filter-bar button:hover{background:var(--main-hover);color:var(--main-100)}.components .panel{color:var(--main-100);background:var(--main-900);display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--card-width),1fr));gap:var(--gap);padding:var(--gap)}.components .card-link,.components .card-item{text-decoration:none;color:inherit;min-width:0}.components .card-link{cursor:pointer}.components .component-overview-lazy-sentinel{grid-column:1 / -1;min-height:1px}.components .card{background:var(--card-color);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;position:relative;border-radius:10px;padding:8px;gap:8px;min-height:var(--min-card-height);box-shadow:0 2px 6px var(--components-shadow);transition:transform .2s ease,background .3s ease}.components .card:hover{transform:translateY(-4px);background:var(--main-hover)}.components .card #component-svg,.components .card .html-img{width:var(--image-size);height:var(--image-size);flex-shrink:0}.components .card .component-name{font-size:var(--fontsize-large);color:var(--blue-600)}.components .card .component-name-link{display:block;width:100%;text-align:center;text-decoration:none;color:var(--blue-600);cursor:pointer;font-size:var(--fontsize-large)}.components .card .component-name-link:hover{text-decoration:underline}.components .card .card-preview{display:flex;align-items:center;justify-content:center;flex-shrink:0}.components .card .card-preview[onclick],.components .card.premium-locked .card-preview{cursor:pointer}.components .card.premium-locked .card-preview>*{pointer-events:none}.components .card.premium-locked .component-name{display:block;width:100%;text-align:center;color:var(--main-400);cursor:default}.components .html-img button{background:#e74c3c;color:#fff;border:none;padding:4px 10px;border-radius:var(--global-border-radius);cursor:default}.components .NotoColorEmoji-Regular{font-family:NotoColorEmoji-Regular,NotoEmoji-Regular,NotoSans-Regular,Arial,sans-serif;font-size:100px}.components .NotoEmoji-Regular{font-family:NotoEmoji-Regular,NotoSans-Regular,Arial,sans-serif;font-size:100px}.components .Other{font-family:NotoSans-Regular,Arial,sans-serif;font-size:100px}.components .premium-crown{position:absolute;top:6px;left:6px;width:28px;height:28px;padding:2px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-catalog-card-corner);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.components .premium-crown svg{display:block;width:var(--icon_size);height:var(--icon_size)}.components .fav-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:4px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;z-index:var(--z-catalog-card-corner);transition:color .2s ease,background .2s ease}.components .fav-btn:focus{outline:3px solid rgba(0,123,255,.18);outline-offset:2px}.components .fav-btn:hover{background:var(--main-hover)}.components .fav-heart{width:var(--icon_size);height:var(--icon_size);display:block}.components .fav-heart .heart-path{stroke:var(--main-100);stroke-width:1.5px;fill:none;transition:fill .18s ease,transform .18s ease;transform-origin:center center}.components .fav-btn.active{color:#e0245e}.components .fav-btn.active .heart-path{fill:currentColor;stroke:currentColor;transform:scale(1.02)}.components .fav-btn.pop .heart-path{transition:transform .18s cubic-bezier(.2,.8,.2,1);transform:scale(1.12)}