.template-showcase{border-top:1px solid var(--gallery-line,#dfe4dc);color:var(--gallery-ink,#343c35);margin-top:65px;padding:65px 0 0;scroll-margin-top:90px}.showcase-heading{justify-content:space-between;align-items:end;gap:35px;margin-bottom:34px;display:flex}.showcase-heading h2{letter-spacing:-.06em!important;margin:0!important;font-size:40px!important;font-weight:500!important;line-height:1.3!important}.showcase-kicker{letter-spacing:.16em;color:var(--gallery-accent,#71866b);font-size:10px;font-weight:500;display:block}.showcase-controls{border-bottom:1px solid var(--gallery-line,#dfe4dc);justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;padding-bottom:22px;display:flex}.showcase-filters{flex-wrap:wrap;gap:7px;display:flex}.showcase-filters button{white-space:nowrap;border:1px solid var(--gallery-line,#dfe4dc);min-height:42px;color:var(--gallery-muted,#667062);border-radius:25px;padding:10px 17px;font-size:12px;transition:background .15s}.showcase-filters button:hover{background:var(--gallery-hover,#edf1e9)}.showcase-filters button[aria-pressed=true]{background:var(--gallery-ink,#343c35);border-color:var(--gallery-ink,#343c35);color:#fff}.showcase-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;display:grid}.design-tile{text-align:left;width:100%;min-width:0;display:block}.design-image{aspect-ratio:4/3;border:1px solid #0000000a;border-radius:10px;display:block;position:relative;overflow:hidden}.design-image>img{object-fit:contain;width:100%;height:100%;transition:transform .4s}.design-tile:hover .design-image>img{transform:scale(1.035)}.design-hover{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;background:#fffffff2;border-radius:7px;justify-content:space-between;align-items:center;padding:13px;font-size:11px;transition:all .2s;display:flex;position:absolute;inset:auto 12px 12px;transform:translateY(5px)}.design-tile:hover .design-hover,.design-tile:focus-visible .design-hover{opacity:1;transform:none}.showcase-browser{scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#e88b76 #f4eeeb;outline-offset:4px;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;height:min(740px,72vh);min-height:360px;padding:2px 18px 2px 2px;display:grid;overflow:hidden scroll}.browser-group{display:contents}.showcase-browser .design-tile{align-self:start}.showcase-browser::-webkit-scrollbar{width:12px;height:5px}.showcase-browser::-webkit-scrollbar-track{background:#f4eeeb;border:3px solid #fff;border-radius:20px}.showcase-browser::-webkit-scrollbar-thumb{background:#e88b76;border:3px solid #fff;border-radius:20px;min-height:54px}.showcase-browser::-webkit-scrollbar-thumb:hover{background:var(--gallery-accent,#e5472b)}.direct-design-tile{z-index:2;aspect-ratio:4/3;text-align:center;background:#fff;border-radius:10px;align-self:start;position:sticky;top:2px;overflow:hidden;box-shadow:0 0 0 3px #fff,0 5px 14px #16181d0a}.direct-design-art{background:var(--gallery-mist,#f6f7f8);border:1px solid var(--gallery-line,#e0e5eb);height:100%;color:var(--gallery-ink,#16181d);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;padding:22px 14px;transition:background .2s,border-color .2s;display:flex}.direct-design-tile:hover .direct-design-art{background:#fff8f5;border-color:#e6a08f}.direct-design-symbol{color:#20282d;place-items:center;width:62px;height:56px;margin-bottom:15px;display:grid;position:relative}.direct-design-symbol>svg:last-child{background:var(--gallery-accent,#e5472b);color:#fff;border:2px solid var(--gallery-mist,#f6f7f8);border-radius:50%;width:22px;height:22px;padding:3px;position:absolute;top:0;right:0}.direct-design-art>strong{letter-spacing:-.04em;font-size:16px;font-weight:600;line-height:1.4}.direct-design-sub{color:#65707d;margin-top:7px;font-size:11px;line-height:1.5}.direct-design-label{color:var(--gallery-accent,#e5472b);align-items:center;gap:8px;margin-top:18px;font-size:11px;font-weight:600;display:flex}.direct-mobile{display:none}.browser-stage{position:relative}.browser-scroll-hint{z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#16181d52;border-radius:12px;justify-content:center;align-items:center;animation:.4s ease-out hintAppear;display:flex;position:absolute;inset:0}.scroll-hint-content{text-align:center;color:#fff;background:#16181de8;border-radius:20px;flex-direction:column;align-items:center;padding:32px 36px;display:flex;box-shadow:0 12px 40px #0002}.scroll-hint-content strong{letter-spacing:-.04em;margin-top:24px;font-size:20px;font-weight:600}.scroll-hint-content>span:not(.scroll-hint-mouse){color:#ffffffc9;margin-top:10px;font-size:14px}.scroll-hint-mouse{flex-direction:column;align-items:center;gap:4px;display:flex}.scroll-hint-mouse>svg:last-child,.scroll-hint-down{animation:1.6s ease-in-out infinite hintDown}.scroll-hint-down{color:#ff8067;margin-top:22px}@keyframes hintDown{0%,to{opacity:.5;transform:translateY(-3px)}50%{opacity:1;transform:translateY(4px)}}@keyframes hintAppear{0%{opacity:0}to{opacity:1}}.browser-position{display:none}.browser-position span{color:var(--gallery-ink,#343c35);font-weight:600}.showcase-bottom{border-top:1px solid var(--gallery-line,#dfe4dc);justify-content:space-between;align-items:center;gap:20px;margin:30px 0 0;padding:23px 0;display:flex}.showcase-all{background:var(--gallery-ink,#343c35);color:#fff;border-radius:50px;justify-content:center;align-items:center;gap:16px;min-height:50px;margin-left:auto;padding:14px 23px;font-size:13px;display:flex}.showcase-loading,.showcase-empty{text-align:center;background:var(--gallery-mist,#f3f5f0);color:var(--gallery-muted,#667062);border-radius:14px;padding:65px 20px;font-size:14px}.showcase-empty button{border-bottom:1px solid;margin-top:20px;padding:8px;font-size:13px}.showcase-empty svg{color:var(--gallery-accent,#71866b);margin:0 auto 15px}.showcase-empty h3{margin-bottom:10px;font-size:23px}.design-gallery{background:var(--gallery-panel,#fcfdfa);width:100vw;max-width:none;height:100dvh;max-height:none;color:var(--gallery-ink,#343c35);overscroll-behavior:contain;border:0;border-radius:0;margin:0;padding:0;position:fixed;inset:0}.design-gallery::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000004d}.gallery-shell{flex-direction:column;max-width:1700px;height:100%;margin:auto;display:flex}.gallery-shell>header{background:var(--gallery-panel,#fcfdfa);flex-shrink:0;justify-content:space-between;align-items:center;padding:27px 45px 20px;display:flex}.gallery-shell>header h2{margin:12px 0 0;font-size:29px!important}.gallery-close{background:var(--gallery-hover,#edf1e9);width:44px;height:44px;color:var(--gallery-ink,#343c35);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.gallery-toolbar{border-bottom:1px solid var(--gallery-line,#dfe4dc);background:var(--gallery-panel,#fcfdfa);flex-shrink:0;padding:0 45px 15px}.gallery-search{border:1px solid var(--gallery-line,#dfe4dc);max-width:530px;color:var(--gallery-accent,#71866b);background:#fff;border-radius:10px;align-items:center;gap:12px;margin-bottom:18px;padding:0 15px;display:flex}.gallery-search input{min-width:0;height:46px;color:var(--gallery-ink,#343c35);background:0 0;outline:none;flex:1;font-size:13px}.gallery-search button{place-items:center;min-width:34px;min-height:34px;display:grid}.gallery-subfilters{flex-wrap:wrap;align-items:center;gap:5px;margin-top:15px;display:flex}.gallery-subfilters>span{color:var(--gallery-muted,#667062);align-items:center;gap:6px;margin-right:8px;font-size:10px;display:flex}.gallery-subfilters button{min-height:30px;color:var(--gallery-muted,#667062);border-radius:5px;padding:5px 10px;font-size:10px}.gallery-subfilters button[aria-pressed=true]{background:var(--gallery-hover,#e7eddf);color:var(--gallery-ink,#343c35);font-weight:600}.gallery-status{color:var(--gallery-muted,#667062);justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;display:flex}.gallery-status strong{color:var(--gallery-ink,#343c35);margin-left:5px;font-weight:500}.gallery-status small{font-size:10px}.gallery-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex:1;min-height:0;padding:25px 45px;overflow-y:auto}.gallery-scroll .design-hover{display:none}.gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;display:grid}.gallery-sentinel{text-align:center;color:var(--gallery-muted,#667062);padding:45px 15px;font-size:12px}.gallery-sentinel button{border:1px solid var(--gallery-line,#dfe4dc);min-height:36px;color:var(--gallery-ink,#343c35);border-radius:20px;margin-left:10px;padding:6px 16px}.gallery-shell>footer{padding:12px 45px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--gallery-line,#dfe4dc);color:var(--gallery-muted,#667062);background:var(--gallery-panel,#fcfdfa);flex-shrink:0;justify-content:space-between;align-items:center;gap:15px;font-size:11px;display:flex}.gallery-shell>footer button{color:var(--gallery-ink,#343c35);padding:9px 0;font-size:12px}@media (min-width:768px) and (max-width:1100px){.direct-design-art{padding:12px}.direct-design-symbol{width:50px;height:44px;margin-bottom:8px}.direct-design-art>strong{font-size:14px}.direct-design-label{margin-top:10px}}@media (max-width:1100px){.showcase-controls{display:block}.showcase-browser{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:767px){.template-showcase{margin-top:45px;padding-top:35px;scroll-margin-top:75px}.showcase-heading{margin-bottom:23px;display:block}.showcase-heading h2{font-size:28px!important;line-height:1.35!important}.showcase-controls{margin-bottom:17px;padding-bottom:17px}.showcase-filters{scrollbar-width:none;flex-wrap:nowrap;gap:6px;padding-bottom:5px;overflow-x:auto}.showcase-filters button{flex-shrink:0;min-height:38px;padding:9px 13px;font-size:11px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.design-image{border-radius:8px}.design-hover{display:none}.showcase-bottom{flex-direction:column-reverse;align-items:stretch;gap:8px;margin-top:25px;padding-top:20px}.showcase-all{gap:12px;width:100%;margin-left:0;font-size:12px}.gallery-shell>header{padding:18px 16px 16px}.gallery-shell>header h2{margin-top:8px;font-size:23px!important}.gallery-shell>header .showcase-kicker{font-size:8px}.gallery-toolbar{padding:0 16px 12px}.gallery-search{margin-bottom:12px}.gallery-search input{height:42px;font-size:12px}.gallery-subfilters{scrollbar-width:none;flex-wrap:nowrap;gap:4px;margin-top:8px;padding-bottom:2px;overflow-x:auto}.gallery-subfilters>span{display:none}.gallery-subfilters button{white-space:nowrap;flex-shrink:0;min-height:32px;font-size:10px}.gallery-status{margin-top:10px;font-size:10px}.gallery-status small{font-size:8px}.gallery-scroll{scrollbar-gutter:auto;padding:18px 16px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.gallery-sentinel{padding:30px 5px;font-size:10px}.gallery-shell>footer{padding:10px 16px max(10px,env(safe-area-inset-bottom));font-size:9px}.gallery-shell>footer button{white-space:nowrap;font-size:10px}.showcase-empty{padding:40px 18px;font-size:12px}.showcase-browser{scroll-snap-type:x mandatory;scrollbar-width:none;scrollbar-gutter:auto;overscroll-behavior-x:contain;gap:12px;height:auto;min-height:0;padding:2px 0 10px;display:flex;overflow:auto hidden}.showcase-browser::-webkit-scrollbar{display:none}.browser-group{scroll-snap-align:start;flex:0 0 calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;min-width:0;display:grid}.browser-group:last-child{margin-right:24px}.browser-position{text-align:center;color:var(--gallery-muted,#667062);font-variant-numeric:tabular-nums;padding-top:10px;font-size:11px;display:block}.direct-design-tile,.browser-scroll-hint{display:none}.direct-mobile{text-align:left;background:var(--gallery-mist,#f6f7f8);border:1px solid var(--gallery-line,#e0e5eb);color:#20282d;border-radius:12px;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:14px 16px;display:flex}.direct-mini-icon{border:1px solid var(--gallery-line,#e0e5eb);width:40px;height:40px;color:var(--gallery-accent,#e5472b);background:#fff;border-radius:8px;flex-shrink:0;place-items:center;display:grid}.direct-mobile strong{font-size:12px;font-weight:600;display:block}.direct-mobile small{color:#65707d;margin-top:5px;font-size:10px;display:block}.direct-mobile>svg{color:var(--gallery-accent,#e5472b);flex-shrink:0;margin-left:auto}}@media (prefers-reduced-motion:reduce){.design-image>img,.design-hover{transition:none!important}.browser-scroll-hint,.scroll-hint-mouse>svg:last-child,.scroll-hint-down{animation:none}}
