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