.portfolio-filters{top:var(--desktop-toolbar-height,64px);left:var(--site-frame-offset);right:var(--site-frame-offset);max-width:var(--site-max-width);z-index:100;gap:var(--sl-spacing-small) var(--sl-spacing-2x-small);padding:var(--sl-spacing-small) var(--sl-spacing-medium);background:var(--sl-color-neutral-0);border-bottom:1px solid var(--sl-color-neutral-200);box-shadow:var(--sl-shadow-small);flex-wrap:wrap;margin-inline:auto;display:flex;position:fixed}html.sl-theme-dark .portfolio-filters{background:var(--sl-color-neutral-950);border-bottom-color:var(--sl-color-neutral-800)}.filter-pill{-webkit-tap-highlight-color:transparent;transition:all .2s}.filter-pill::part(base),.filter-pill::part(base):focus,.filter-pill::part(base):focus-visible{outline:none}.filter-pill::part(base):hover{background-color:var(--color-secondary-subtle);border-color:var(--color-secondary);color:var(--color-secondary)}.filter-pill--active::part(base),.filter-pill--active::part(base):hover{background-color:var(--color-interactive-active);border-color:var(--color-interactive-active);color:var(--sl-color-neutral-0)}.filter-pill--active::part(label){color:var(--sl-color-neutral-0)}.portfolio-container{padding:var(--sl-spacing-small) var(--sl-spacing-medium);padding-top:calc(var(--sl-spacing-small) + 48px);padding-bottom:calc(var(--sl-spacing-small) + 44px);max-width:100%}.portfolio-grid{padding-top:var(--sl-spacing-small);grid-template-columns:repeat(var(--portfolio-cols-desktop,5), minmax(0, 1fr));gap:var(--sl-spacing-small);display:grid}.portfolio-item__image-wrapper{aspect-ratio:1;border-radius:var(--sl-border-radius-large);width:100%;position:relative;overflow:hidden}.portfolio-item__image{object-fit:cover;object-position:center;z-index:2;width:100%;height:100%;position:relative}.portfolio-item__image[style*="user-select: none"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}.portfolio-loading,.portfolio-error{padding:var(--sl-spacing-large);text-align:center;color:var(--sl-color-neutral-600);grid-column:1/-1}.portfolio-error{color:var(--sl-color-danger-600)}@media (width<=599px){.portfolio-container{padding-top:calc(var(--portfolio-filter-height,56px) + var(--sl-spacing-small));padding-left:0;padding-right:0;padding-bottom:calc(76px + var(--sl-spacing-small) + 44px)}.portfolio-grid{grid-template-columns:repeat(var(--portfolio-cols-mobile,3), minmax(0, 1fr));gap:var(--sl-spacing-2x-small);padding-top:0}}@media (width>=600px){.portfolio-filters{left:calc(var(--site-frame-offset) + 80px)}}.portfolio-sticky-footer{left:var(--site-frame-offset);right:var(--site-frame-offset);max-width:var(--site-max-width);z-index:40;text-align:center;padding:var(--sl-spacing-x-small) var(--sl-spacing-medium);background:var(--sl-color-neutral-0);border-top:1px solid var(--sl-color-neutral-200);margin-inline:auto;position:fixed;bottom:73px}.portfolio-sticky-footer__copyright{color:var(--sl-color-neutral-500);margin:0;font-size:.875rem}html.sl-theme-dark .portfolio-sticky-footer{background:var(--sl-color-neutral-950);border-top-color:var(--sl-color-neutral-800)}html.sl-theme-dark .portfolio-sticky-footer__copyright{color:var(--sl-color-neutral-500)}@media (width>=600px){.portfolio-sticky-footer{left:calc(var(--site-frame-offset) + 80px);bottom:0}}.filter-pill[data-category=favorites]{margin-left:auto}.filter-pill[data-category=favorites] svg{color:#e53e3e}.filter-pill--active[data-category=favorites] svg{color:var(--sl-color-neutral-0)}.portfolio-empty-state{min-height:60vh;padding:var(--sl-spacing-2x-large) var(--sl-spacing-medium);justify-content:center;align-items:center;display:flex}.portfolio-empty-state__content{text-align:center;max-width:500px}.portfolio-empty-state__title{margin-bottom:var(--sl-spacing-medium);color:var(--sl-color-neutral-700);font-size:1.75rem;font-weight:600}.portfolio-empty-state__message{color:var(--sl-color-neutral-600);margin:0;font-size:1.1rem;line-height:1.6}html.sl-theme-dark .portfolio-empty-state__title{color:var(--sl-color-neutral-300)}html.sl-theme-dark .portfolio-empty-state__message{color:var(--sl-color-neutral-400)}
