@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{color-scheme:dark;--bg: #121212;--bg-elev: oklch(.11 0 0);--bg-card: oklch(.12 0 0);--bg-card-hover: oklch(.16 0 0);--border: oklch(.29 0 0);--border-strong: oklch(.38 0 0);--text: oklch(.97 0 0);--text-muted: oklch(.8 0 0);--text-faint: oklch(.66 0 0);--accent: oklch(.8 0 0);--accent-soft: oklch(1 0 0 / .08);--glass-border: oklch(1 0 0 / .1);--menu-shadow: none;--radius: 6px;--radius-lg: 12px;--shadow: 0 1px 2px oklch(0 0 0 / .35), 0 8px 24px oklch(0 0 0 / .25);--shadow-glow: 0 0 0 1px var(--border-strong), 0 14px 40px oklch(0 0 0 / .45);--maxw: 1640px}html[data-theme=light]{color-scheme:light;--bg: #f5f5f6;--bg-elev: oklch(.95 0 0);--bg-card: oklch(.98 0 0);--bg-card-hover: oklch(.92 0 0);--border: oklch(.88 0 0);--border-strong: oklch(.78 0 0);--text: oklch(.24 0 0);--text-muted: oklch(.42 0 0);--text-faint: oklch(.52 0 0);--accent: oklch(.3 0 0);--accent-soft: oklch(0 0 0 / .06);--glass-border: oklch(0 0 0 / .1);--menu-shadow: 0 4px 14px oklch(0 0 0 / .1), 0 1px 3px oklch(0 0 0 / .06);--shadow: 0 1px 2px oklch(0 0 0 / .08), 0 8px 24px oklch(0 0 0 / .1);--shadow-glow: 0 0 0 1px var(--border-strong), 0 14px 40px oklch(0 0 0 / .16)}*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;overflow-x:clip;background:var(--bg)}html{scrollbar-width:thin;scrollbar-color:oklch(1 0 0 / .14) transparent}::-webkit-scrollbar{width:10px;height:10px;background:transparent}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:999px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#ffffff3d;background-clip:padding-box}body{color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-variation-settings:"opsz" 14;letter-spacing:-.006em;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;filter:contrast(1.001)}a{color:inherit;text-decoration:none}.container{width:100%;max-width:none;margin:0 auto;padding:0 56px}.site-header,main{position:relative;z-index:1}.site-header{position:sticky;top:40px;margin-top:40px;z-index:20;background:transparent;transition:background .25s ease;pointer-events:none}.header-inner{position:relative;display:flex;align-items:center;gap:12px;height:48px}.header-inner>*{pointer-events:auto}.brand-beam{display:inline-flex;flex-shrink:0}.brand{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.logo-icon{display:block;height:22px;width:auto}.logo-word{display:none}.nav-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px}.nav-links{position:relative;display:flex;align-items:center;gap:0;padding:4px;background:#1f1f1f99;border:1px solid var(--glass-border);border-radius:48px;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}.nav-indicator{position:absolute;top:4px;left:0;height:38px;border-radius:48px;background:#ffffff24;box-shadow:inset 0 .5px #ffffff29;pointer-events:none;will-change:transform,width}.nav-indicator.ready{transition:transform .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}.nav-links a{font-family:Inter,system-ui,sans-serif;font-variation-settings:"opsz" 14;display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:72px;padding:4px 14px;border-radius:48px;font-size:13px;font-weight:500;line-height:14px;color:#efefef80;white-space:nowrap;transition:color .15s ease,background .15s ease}.nav-links a:hover,.nav-links a.active{color:#efefef}.nav-links a{position:relative}.brand-beam{transition:opacity .35s ease,transform .35s ease;will-change:transform,opacity}.site-header.scrolled .brand-beam{opacity:0;transform:translate(-40px);pointer-events:none}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;padding:0;border:none;background:transparent;color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease,opacity .35s ease,transform .35s ease}.theme-toggle:hover{color:var(--text)}.theme-ic{display:block}.theme-ic-sun,html[data-theme=light] .theme-ic-moon{display:none}html[data-theme=light] .theme-ic-sun{display:block}.site-header.scrolled .theme-toggle{opacity:0;transform:translate(40px);pointer-events:none}.submit-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:1px 18px 0;background:#f8f8f8;color:#0b0b0b;border-radius:999px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:opacity .35s ease,transform .35s ease,background .15s ease;will-change:transform,opacity}.submit-btn:hover{background:#dedede}.site-header.scrolled .submit-btn{opacity:0;transform:translate(40px);pointer-events:none}.nav-burger,.mobile-menu{display:none}.hero{position:relative;isolation:isolate;padding:160px 0 26px;text-align:left}#hero-canvas{display:none}.hero>*{position:relative}.hero-eyebrow{display:inline-block;margin-bottom:16px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}.hero h1{margin:0 0 22px;font-size:96px;line-height:1;font-weight:400;letter-spacing:-3.4px;color:var(--text);white-space:nowrap}.hero p{margin:0;max-width:680px;font-size:22px;color:var(--text-muted)}.layout{display:flex;align-items:flex-start;gap:48px;padding-top:40px}.sidebar{width:200px;flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}@media (min-width: 641px){.sidebar{min-height:calc(100dvh - 128px)}}.sidebar-filters{position:sticky;top:120px;transition:top .35s ease}.site-header.scrolled~main .sidebar-filters{top:44px}.sidebar-about{position:sticky;bottom:40px;margin-top:32px;max-width:190px;font-size:12.5px;line-height:1.55;color:var(--text-faint)}.sidebar-about p{margin:0}.about-legal{display:inline-block;margin-top:12px;font-size:12px;color:var(--text-faint);text-decoration:none;transition:color .15s ease}.about-legal:hover{color:var(--text-muted)}@media (max-height: 620px){.sidebar-about{display:none}}.layout .grid{flex:1;min-width:0}.filter-row{display:flex;flex-direction:column;align-items:stretch;gap:20px}.categories{display:flex;flex-direction:column;min-width:0}.cat-btn{display:flex;align-items:center;width:100%;height:30px;padding:0;border:none;background:transparent;color:#ffffff8c;font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:color .15s ease}.cat-btn:hover{color:#ffffffe6}.cat-btn.active{color:#fff}.f-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta-row{display:flex;align-items:center;justify-content:space-between;margin:28px 0 16px}.result-count{font-size:13px;color:var(--text-faint)}.view-toggle{position:relative;display:inline-flex;align-items:center;flex-shrink:0;padding:4px;max-width:140px;overflow:hidden;background:#1f1f1f99;border:1px solid var(--glass-border);border-radius:999px;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);transition:opacity .25s ease .08s,transform .32s cubic-bezier(.22,1,.36,1) .08s,max-width .32s cubic-bezier(.22,1,.36,1),margin .28s ease,padding .28s ease}.view-toggle.is-hidden{opacity:0;transform:translateY(-100%);max-width:0;margin-left:-8px;padding-left:0;padding-right:0;pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.4,0,1,1),max-width .3s cubic-bezier(.22,1,.36,1) .16s,margin .28s ease .16s,padding .28s ease .16s}.view-indicator{position:absolute;top:4px;left:0;width:38px;height:38px;border-radius:999px;background:#ffffff24;box-shadow:inset 0 .5px #ffffff29;pointer-events:none;will-change:transform}.view-indicator.ready{transition:transform .35s cubic-bezier(.22,1,.36,1)}.view-btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:none;background:transparent;border-radius:999px;color:#efefef80;cursor:pointer;transition:color .15s ease,background .15s ease}.view-btn svg{display:block;width:18px;height:18px}.view-btn:hover,.view-btn.active{color:#efefef}.sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-faint)}.sort select{height:32px;padding:0 8px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:13px;outline:none;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 18px;padding-bottom:80px}@media (min-width: 2560px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.card{display:flex;flex-direction:column;background:none;border:none;cursor:pointer;content-visibility:auto;contain-intrinsic-width:none;contain-intrinsic-height:auto 380px}.card[hidden]{display:none!important}.card-thumb{position:relative;aspect-ratio:var(--thumb-ar, 1 / .714);background:var(--bg-elev);display:grid;place-items:center;overflow:hidden;border-radius:12px}.card-thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff0 40%,#ffffff1a,#fff0 60%) 0 0 / 200% 100%,#ffffff0a;opacity:0;transition:opacity .3s ease;pointer-events:none}.grid:not(.view-mobile) .card-thumb.has-desktop:not(.thumb-loaded-desktop):not(.thumb-failed-desktop):before,.grid.view-mobile .card-thumb.has-mobile:not(.thumb-loaded-mobile):not(.thumb-failed-mobile):before{opacity:1;animation:thumb-shimmer 1.6s linear infinite}.grid:not(.view-mobile) .card-thumb.has-desktop:not(.thumb-loaded-desktop):not(.thumb-failed-desktop) .thumb-fallback,.grid.view-mobile .card-thumb.has-mobile:not(.thumb-loaded-mobile):not(.thumb-failed-mobile) .thumb-fallback{opacity:0}@keyframes thumb-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.card-thumb:before{animation:none!important}}.card-thumb .thumb-fallback{transition:opacity .3s ease;font-size:30px;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,#cecece,#717171);-webkit-background-clip:text;background-clip:text;color:transparent}.card-thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;opacity:0;transition:opacity .3s ease,object-position .6s ease}.card-thumb .thumb-img.loaded{opacity:1}@media (hover: hover){.card:hover .thumb-img{object-position:50% 100%;transition:opacity .3s ease,object-position var(--scroll-duration, 2.5s) ease-in-out}}.card.press-scroll .thumb-img{object-position:50% 100%;transition:opacity .3s ease,object-position var(--scroll-duration, 2.5s) ease-in-out}@media (pointer: coarse){.card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}.thumb-img-mobile,.grid.view-mobile .thumb-img-desktop{display:none}.grid.view-mobile .thumb-img-mobile{display:block}.filter-row .cat-btn{display:none}.filter-row.section-websites .cat-btn[data-section=websites],.filter-row.section-ecommerce .cat-btn[data-section=ecommerce],.filter-row.section-pdp .cat-btn[data-section=pdp],.filter-row.section-collections .cat-btn[data-section=collections],.filter-row.section-sections .cat-btn[data-section=sections]{display:inline-flex}.filter-row.section-tools,.filter-row.section-extensions{display:none}.card-body{display:flex;align-items:center;gap:10px;padding:14px 2px 0}.card-logo{width:18px;height:18px;border-radius:4px;flex-shrink:0;object-fit:contain}.card:hover .card-title{text-decoration:underline}.card-text{display:flex;flex-direction:column;gap:3px;min-width:0}.card-title{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text)}.card-desc{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.empty{padding:80px 0;text-align:center;color:var(--text-faint)}.muted{color:var(--text-faint)}.grid.view-mobile{grid-template-columns:repeat(6,minmax(0,1fr));gap:44px 22px}.grid.view-mobile .card-thumb{aspect-ratio:9 / 16}.section-thumb,.grid.view-mobile .section-thumb{aspect-ratio:1 / 1.3;background:#1d1d1d;border-radius:20px}.section-thumb .thumb-phone{position:relative;width:52%;aspect-ratio:9 / 19;border-radius:18px;overflow:hidden;background:#1b1b1b;box-shadow:0 12px 40px #00000073}.card:hover .section-thumb .thumb-img,.card.press-scroll .section-thumb .thumb-img{object-position:50% 0%}@media (max-width: 1340px){.hero h1{font-size:76px;letter-spacing:-2.7px}}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.view-mobile{grid-template-columns:repeat(3,minmax(0,1fr))}.hero h1{font-size:58px;letter-spacing:-2px}}@media (max-width: 760px){.hero h1{white-space:normal;font-size:52px}}@media (max-width: 640px){.grid{grid-template-columns:minmax(0,1fr);gap:20px}.grid.view-mobile{grid-template-columns:repeat(2,minmax(0,1fr))}.grid[data-section=sections].view-mobile{grid-template-columns:minmax(0,1fr)}.meta-row{flex-direction:column;align-items:flex-start;gap:12px}.container{padding:0 24px}.layout{display:block;padding-top:28px}.sidebar{width:auto;display:block;margin-bottom:28px}.sidebar-filters{position:static}.sidebar-about{display:none}.filter-row{gap:16px}.categories{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:0;margin:0 -24px;padding:0 24px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}.categories::-webkit-scrollbar{display:none}.cat-btn{width:auto;flex-shrink:0;height:34px;padding:0 14px;border-radius:999px}.cat-btn.active{background:#f8f8f8;color:#0b0b0b}.hero{padding:44px 0 28px}.hero h1{font-size:38px}.hero p{font-size:15px}.nav-links,.submit-btn,.theme-toggle{display:none}.site-header{top:12px;margin-top:12px}.brand{width:48px;height:48px;background:#24242499;border:1px solid var(--glass-border);border-radius:999px;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}.nav-burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;flex-shrink:0;margin-left:auto;padding:0;background:#24242499;border:1px solid var(--glass-border);border-radius:999px;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);cursor:pointer;transition:opacity .35s ease,transform .35s ease}.burger-line{width:18px;height:2px;border-radius:1px;background:#ffffffe6;transition:transform .2s ease}.site-header.menu-open .burger-line:first-child{transform:translateY(3.5px) rotate(45deg)}.site-header.menu-open .burger-line:last-child{transform:translateY(-3.5px) rotate(-45deg)}.site-header.scrolled .nav-burger{opacity:0;transform:translate(40px);pointer-events:none}.mobile-menu{display:block;position:absolute;top:calc(100% + 8px);left:12px;right:12px;padding:8px;background:#1f1f1fd9;border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--menu-shadow);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.site-header.menu-open .mobile-menu{opacity:1;transform:translateY(0);pointer-events:auto}.mobile-menu-sections{display:flex;flex-direction:column;gap:2px}.mobile-menu-sections a{display:flex;align-items:center;height:52px;padding:0 16px;border-radius:16px;font-size:17px;font-weight:500;color:#ffffff9e;transition:color .15s ease,background .15s ease}.mobile-menu-sections a.active{background:#ffffff14;color:#fff}.mobile-menu-theme{display:flex;align-items:center;justify-content:space-between;width:calc(100% + 16px);margin:6px -8px 0;padding:12px 24px;border-top:1px solid oklch(1 0 0 / .08);background:none;border-left:none;border-right:none;border-bottom:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.mmt-label{font-size:17px;font-weight:500;color:#ffffff9e}.mmt-switch{position:relative;flex-shrink:0;width:48px;height:28px;border-radius:999px;background:#ffffff1f;border:1px solid oklch(1 0 0 / .14)}.mmt-knob{position:absolute;top:2px;left:2px;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#f8f8f8;color:#161616;transition:transform .2s ease}html[data-theme=light] .mmt-knob{transform:translate(20px)}.mmt-knob .theme-ic{width:14px;height:14px}.mobile-menu-submit{display:flex;align-items:center;margin:0 -8px;padding:16px 24px;border-top:1px solid oklch(1 0 0 / .08);font-size:17px;font-weight:500;color:#ffffff9e;transition:color .15s ease}.mobile-menu-submit:hover{color:#fff}.mobile-menu-legal{display:block;margin:0 -8px -8px;padding:4px 24px 14px;font-size:13px;color:#fff6;transition:color .15s ease}.mobile-menu-legal:hover{color:#ffffffbf}}html[data-theme=light]{scrollbar-color:oklch(0 0 0 / .22) transparent}html[data-theme=light] ::-webkit-scrollbar-thumb{background:#0000002e;background-clip:padding-box}html[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#00000057;background-clip:padding-box}html[data-theme=light] .logo-icon{filter:invert(1)}html[data-theme=light] .nav-links,html[data-theme=light] .view-toggle{background:#dededecc;border-color:transparent}html[data-theme=light] .nav-indicator,html[data-theme=light] .view-indicator{background:#fff;box-shadow:0 1px 3px #00000024}html[data-theme=light] .nav-links a,html[data-theme=light] .view-btn{color:#1f1f1f8c}html[data-theme=light] .nav-links a:hover,html[data-theme=light] .nav-links a.active,html[data-theme=light] .view-btn:hover,html[data-theme=light] .view-btn.active{color:#161616}html[data-theme=light] .submit-btn{background:#1b1b1b;color:#f8f8f8}html[data-theme=light] .submit-btn:hover{background:#383838}html[data-theme=light] .cat-btn{color:#0000008c}html[data-theme=light] .cat-btn:hover{color:#000000e6}html[data-theme=light] .cat-btn.active{color:#000}html[data-theme=light] .card-thumb:before{background:linear-gradient(100deg,#0000 40%,#0000000f,#0000 60%) 0 0 / 200% 100%,#00000008}html[data-theme=light] .card-thumb .thumb-fallback{background:linear-gradient(135deg,#555,#868686);-webkit-background-clip:text;background-clip:text}html[data-theme=light] .card-thumb{border:1px solid oklch(.9 0 0)}html[data-theme=light] .section-thumb{background:#dfdedf;border:none}html[data-theme=light] .section-thumb .thumb-phone{background:#d4d4d4;box-shadow:0 10px 30px #00000024}@media (max-width: 640px){html[data-theme=light] .brand,html[data-theme=light] .nav-burger{background:#dededecc}html[data-theme=light] .burger-line{background:#161616e6}html[data-theme=light] .mobile-menu{background:#ffffffe6}html[data-theme=light] .mobile-menu-sections a{color:#0000009e}html[data-theme=light] .mobile-menu-sections a.active{background:#0000000f;color:#000}html[data-theme=light] .mobile-menu-submit{color:#0000009e;border-top-color:#0000001a}html[data-theme=light] .mobile-menu-submit:hover{color:#000}html[data-theme=light] .mobile-menu-legal{color:#0006}html[data-theme=light] .mobile-menu-legal:hover{color:#000000bf}html[data-theme=light] .mobile-menu-theme{border-top-color:#0000001a}html[data-theme=light] .mmt-label{color:#0000009e}html[data-theme=light] .mmt-switch{background:#0000001a;border-color:#0000001f}html[data-theme=light] .mmt-knob,html[data-theme=light] .cat-btn.active{background:#161616;color:#f8f8f8}}
