.project-workspace:where(.astro-r3bc3sjw){background:var(--color-chip-bg);border:1px solid var(--gray6);border-radius:16px;margin-top:2rem;padding:2rem;position:relative;box-shadow:0 5px 30px -5px #0000001a;html.dark &{background:var(--color-gray-a2)}}.showcase-grid:where(.astro-r3bc3sjw){grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:16px;margin-top:2rem;display:grid}.showcase-item:where(.astro-r3bc3sjw){cursor:pointer;border-radius:12px;transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1),filter .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px 20px #0000000f}.showcase-item:where(.astro-r3bc3sjw):hover{transform:scale(1.06);box-shadow:0 10px 40px #0000001a}.showcase-grid:where(.astro-r3bc3sjw):has(.showcase-item:hover) .showcase-item:where(.astro-r3bc3sjw):not(:hover){opacity:.7;filter:saturate(0)}.showcase-item:where(.astro-r3bc3sjw).has-surface-bg{background:#0d0e14;justify-content:center;align-items:center;padding:1.5rem;display:flex}.showcase-item:where(.astro-r3bc3sjw).has-surface-bg img:where(.astro-r3bc3sjw){object-fit:contain;max-width:80%;max-height:80%}.swatch-grid:where(.astro-r3bc3sjw){border-radius:8px;width:100%;height:100%;display:flex;overflow:hidden}.swatch-item:where(.astro-r3bc3sjw){color:#f5f5f7;flex-direction:column;flex:1;justify-content:flex-end;padding:.75rem;display:flex}.swatch-item-light:where(.astro-r3bc3sjw){color:#0d0e14}.swatch-name:where(.astro-r3bc3sjw){font-size:.75rem;font-weight:500}.swatch-neutral:where(.astro-r3bc3sjw){opacity:.7;font-size:.625rem}.hero-gallery:where(.astro-r3bc3sjw){perspective:1000px;justify-content:center;align-items:center;height:400px;display:flex;position:relative}.hero-card:where(.astro-r3bc3sjw){--card-index:0;--card-y:0px;--unit-x:160px;--unit-rotate:6deg;cursor:pointer;width:180px;transform:translateX(calc(var(--card-index) * var(--unit-x))) rotate(calc(var(--card-index) * var(--unit-rotate))) translateY(var(--card-y));background:#fff;border-radius:12px;transition-property:transform,box-shadow,filter,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute;overflow:hidden;box-shadow:0 10px 40px #0000001a}.hero-card:where(.astro-r3bc3sjw):first-child{--card-index:-2;--card-y:48px;z-index:1}.hero-card:where(.astro-r3bc3sjw):nth-child(2){--card-index:-1;--card-y:16px;z-index:2}.hero-card:where(.astro-r3bc3sjw):nth-child(3){z-index:5}.hero-card:where(.astro-r3bc3sjw):nth-child(4){--card-index:1;--card-y:16px;z-index:2}.hero-card:where(.astro-r3bc3sjw):nth-child(5){--card-index:2;--card-y:48px;z-index:1}.hero-card:where(.astro-r3bc3sjw):hover{z-index:10;transform:translateX(calc(var(--card-index) * var(--unit-x))) rotate(calc(var(--card-index) * var(--unit-rotate))) translateY(calc(var(--card-y) - 8px)) scale(1.06);box-shadow:0 20px 60px #00000026}.hero-gallery:where(.astro-r3bc3sjw):has(.hero-card:hover) .hero-card:where(.astro-r3bc3sjw):not(:hover){opacity:.7;filter:saturate(0)}@media (width<=768px){.project-workspace:where(.astro-r3bc3sjw){padding:1.5rem}.showcase-grid:where(.astro-r3bc3sjw){grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}.hero-gallery:where(.astro-r3bc3sjw){height:350px}.hero-card:where(.astro-r3bc3sjw){--unit-x:90px;--card-y:0px;width:140px}}@media (width<=480px){.project-workspace:where(.astro-r3bc3sjw){padding:1rem}.showcase-grid:where(.astro-r3bc3sjw){grid-template-columns:1fr;grid-auto-rows:200px}.showcase-item:where(.astro-r3bc3sjw):hover{transform:scale(1.02)}.showcase-item:where(.astro-r3bc3sjw).col-span-2,.showcase-item:where(.astro-r3bc3sjw).col-span-3{grid-column:span 1}.showcase-item:where(.astro-r3bc3sjw).row-span-2,.showcase-item:where(.astro-r3bc3sjw).row-span-3{grid-row:span 1}.hero-gallery:where(.astro-r3bc3sjw){height:300px}.hero-card:where(.astro-r3bc3sjw){--unit-x:80px;--unit-rotate:8deg;--card-y:0px;width:120px}.hero-card:where(.astro-r3bc3sjw):first-child,.hero-card:where(.astro-r3bc3sjw):nth-child(5){display:none}.hero-card:where(.astro-r3bc3sjw):nth-child(2),.hero-card:where(.astro-r3bc3sjw):nth-child(4){z-index:1}.hero-card:where(.astro-r3bc3sjw):nth-child(3){z-index:5}}