.project-showcase:where(.astro-zwix3as3){border:1px solid color-mix(in srgb, var(--sl-color-gray-5) 75%, transparent);background:var(--sl-color-bg-nav);border-radius:1rem;margin:0 0 2.75rem;overflow:hidden;box-shadow:0 1px 2px #0f172a0a,0 18px 55px #0f172a17}.browser-bar:where(.astro-zwix3as3){border-bottom:1px solid color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent);background:color-mix(in srgb, var(--sl-color-bg-nav) 88%, var(--sl-color-gray-6));grid-template-columns:4.25rem minmax(0,1fr) 4.25rem;align-items:center;gap:.75rem;min-height:3.1rem;padding:.65rem .85rem;display:grid}.window-controls:where(.astro-zwix3as3){gap:.38rem;display:flex}.window-controls:where(.astro-zwix3as3) span:where(.astro-zwix3as3){background:var(--sl-color-gray-4);border-radius:999px;width:.62rem;height:.62rem}.window-controls:where(.astro-zwix3as3) span:where(.astro-zwix3as3):first-child{background:#ff6b64}.window-controls:where(.astro-zwix3as3) span:where(.astro-zwix3as3):nth-child(2){background:#f4bd4f}.window-controls:where(.astro-zwix3as3) span:where(.astro-zwix3as3):last-child{background:#62c554}.address:where(.astro-zwix3as3){border:1px solid color-mix(in srgb, var(--sl-color-gray-5) 62%, transparent);background:color-mix(in srgb, var(--sl-color-bg) 76%, transparent);min-width:0;min-height:1.85rem;color:var(--sl-color-gray-3);font-family:var(--__sl-font-mono);border-radius:.5rem;align-items:center;gap:.45rem;padding:.28rem .7rem;font-size:.72rem;display:flex}.address:where(.astro-zwix3as3) span:where(.astro-zwix3as3){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.address:where(.astro-zwix3as3) svg:where(.astro-zwix3as3){fill:currentColor;flex:none;width:.82rem;height:.82rem}.browser-bar:where(.astro-zwix3as3) a:where(.astro-zwix3as3),.toolbar-spacer:where(.astro-zwix3as3){justify-self:end;width:2rem;height:2rem}.browser-bar:where(.astro-zwix3as3) a:where(.astro-zwix3as3){color:var(--sl-color-gray-3);border-radius:.45rem;place-items:center;display:grid}.browser-bar:where(.astro-zwix3as3) a:where(.astro-zwix3as3):hover{background:var(--sl-color-gray-6);color:var(--sl-color-white)}.browser-bar:where(.astro-zwix3as3) a:where(.astro-zwix3as3) svg:where(.astro-zwix3as3){fill:currentColor;width:1rem;height:1rem}.browser-viewport:where(.astro-zwix3as3){aspect-ratio:16/9;background:radial-gradient(circle at 28% 18%, #6366f11a, transparent 32%), linear-gradient(145deg, var(--sl-color-bg), var(--sl-color-bg-nav));min-height:22rem;display:grid;position:relative}.browser-viewport:where(.astro-zwix3as3) iframe:where(.astro-zwix3as3){background:#fff;border:0;width:100%;height:100%}.shot-frame:where(.astro-zwix3as3){background:var(--sl-color-bg);width:100%;height:100%;display:block;position:relative;overflow:hidden}.shot-frame:where(.astro-zwix3as3) img:where(.astro-zwix3as3){object-fit:cover;object-position:center top;width:100%;height:100%;transition:transform .24s;display:block}a:where(.astro-zwix3as3).shot-frame:hover img:where(.astro-zwix3as3),a:where(.astro-zwix3as3).shot-frame:focus-visible img:where(.astro-zwix3as3){transform:scale(1.02)}.shot-open:where(.astro-zwix3as3){border:1px solid color-mix(in srgb, var(--sl-color-gray-5) 65%, transparent);background:color-mix(in srgb, var(--sl-color-bg-nav) 86%, transparent);box-shadow:var(--sl-shadow-md);backdrop-filter:blur(6px);color:var(--sl-color-white);opacity:0;pointer-events:none;border-radius:999px;align-items:center;gap:.45rem;padding:.5rem .95rem;font-size:.78rem;font-weight:650;transition:opacity .18s,transform .18s;display:inline-flex;position:absolute;bottom:1.15rem;left:50%;transform:translate(-50%)translateY(.35rem)}a:where(.astro-zwix3as3).shot-frame:hover .shot-open:where(.astro-zwix3as3),a:where(.astro-zwix3as3).shot-frame:focus-visible .shot-open:where(.astro-zwix3as3){opacity:1;transform:translate(-50%)translateY(0)}.shot-open:where(.astro-zwix3as3) svg:where(.astro-zwix3as3){fill:currentColor;width:.9rem;height:.9rem}@media (hover:none){.shot-open:where(.astro-zwix3as3){opacity:1;transform:translate(-50%)translateY(0)}}.preview-placeholder:where(.astro-zwix3as3){text-align:center;color:var(--sl-color-gray-3);place-content:center;justify-items:center;padding:2.5rem 1.25rem;display:grid}.placeholder-icon:where(.astro-zwix3as3){border:1px solid color-mix(in srgb, var(--sl-color-accent) 24%, var(--sl-color-gray-5));background:color-mix(in srgb, var(--sl-color-accent-low) 62%, transparent);width:3.5rem;height:3.5rem;color:var(--sl-color-accent-high);border-radius:1rem;place-items:center;margin-bottom:1rem;display:grid}.placeholder-icon:where(.astro-zwix3as3) svg:where(.astro-zwix3as3){fill:currentColor;width:1.6rem;height:1.6rem}.placeholder-title:where(.astro-zwix3as3){color:var(--sl-color-white);margin:0 0 .35rem;font-size:1rem;font-weight:650}.preview-placeholder:where(.astro-zwix3as3) p:where(.astro-zwix3as3):not(.placeholder-title){margin:0 0 .65rem;font-size:.78rem}.preview-placeholder:where(.astro-zwix3as3) code:where(.astro-zwix3as3){border:1px solid color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent);background:var(--sl-color-bg-inline-code);color:var(--sl-color-gray-2);border-radius:.4rem;padding:.28rem .55rem;font-size:.72rem}@media (width<=40rem){.browser-bar:where(.astro-zwix3as3){grid-template-columns:3.25rem minmax(0,1fr) 2rem;gap:.45rem}.browser-viewport:where(.astro-zwix3as3){aspect-ratio:4/3;min-height:18rem}}