.sample-detail:where(.astro-vv25rc3p){display:flex;flex-direction:column;gap:2rem}.sample-hero:where(.astro-vv25rc3p){position:relative;overflow:hidden;display:flex;gap:clamp(1rem,3vw,2rem);padding:clamp(1.5rem,3vw,2.5rem);border-radius:.5rem;border:1px solid color-mix(in srgb,var(--aspire-color-primary) 25%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--aspire-color-primary) 10%,transparent),color-mix(in srgb,var(--aspire-color-secondary) 5%,transparent),transparent 70%);box-shadow:var(--sl-shadow-md);isolation:isolate}.sample-hero-glow:where(.astro-vv25rc3p){position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 50%,color-mix(in srgb,var(--aspire-color-primary) 18%,transparent),transparent 70%),radial-gradient(ellipse 50% 70% at 0% 100%,color-mix(in srgb,var(--aspire-color-secondary) 12%,transparent),transparent 65%);pointer-events:none}.sample-hero-mesh:where(.astro-vv25rc3p){position:absolute;inset:0 0 0 auto;width:min(72%,38rem);height:100%;pointer-events:none;mask-image:linear-gradient(to left,black 35%,transparent 95%);-webkit-mask-image:linear-gradient(to left,black 35%,transparent 95%)}.mesh-edge:where(.astro-vv25rc3p){fill:none;stroke:color-mix(in srgb,var(--aspire-color-primary) 42%,transparent);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:3 7;animation:mesh-flow 14s linear infinite}.mesh-edge-strong:where(.astro-vv25rc3p){stroke:color-mix(in srgb,var(--aspire-color-secondary) 60%,transparent);stroke-width:1.5;animation-duration:9s}.mesh-edge-soft:where(.astro-vv25rc3p){stroke:color-mix(in srgb,var(--aspire-color-primary) 22%,transparent);stroke-dasharray:2 9;animation-duration:18s}@keyframes mesh-flow{to{stroke-dashoffset:-120}}.mesh-node:where(.astro-vv25rc3p){fill:color-mix(in srgb,var(--aspire-color-primary) 22%,var(--sl-color-bg));stroke:color-mix(in srgb,var(--aspire-color-primary) 65%,transparent);stroke-width:1.5;transform-box:fill-box;transform-origin:center}.mesh-node-small:where(.astro-vv25rc3p){fill:color-mix(in srgb,var(--aspire-color-secondary) 18%,var(--sl-color-bg));stroke:color-mix(in srgb,var(--aspire-color-secondary) 50%,transparent);opacity:.75}.mesh-node:where(.astro-vv25rc3p).is-primary{fill:color-mix(in srgb,var(--aspire-color-primary) 38%,var(--sl-color-bg));stroke:var(--aspire-color-secondary);stroke-width:2;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--aspire-color-primary) 60%,transparent));animation:mesh-pulse 3.6s ease-in-out infinite}@keyframes mesh-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.82}}.sample-hero-copy:where(.astro-vv25rc3p){position:relative;z-index:1;display:flex;flex-direction:column;gap:1rem;max-width:52rem}.sample-hero-tags:where(.astro-vv25rc3p){display:flex;flex-wrap:wrap;gap:.5rem;align-self:flex-start}.sample-hero-tag:where(.astro-vv25rc3p){display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem .3rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--aspire-color-primary) 18%,var(--sl-color-bg));border:1px solid color-mix(in srgb,var(--aspire-color-primary) 40%,transparent);color:color-mix(in srgb,var(--aspire-color-secondary) 80%,var(--sl-color-white));font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1}.sample-hero-tag:where(.astro-vv25rc3p) svg,.sample-hero-tag:where(.astro-vv25rc3p) .apphost-glyph:where(.astro-vv25rc3p){color:var(--aspire-color-secondary)}.apphost-glyph:where(.astro-vv25rc3p){display:inline-block;flex-shrink:0}[data-theme=light] .sample-hero-tag:where(.astro-vv25rc3p){color:color-mix(in srgb,var(--aspire-color-primary) 75%,var(--sl-color-black));background:color-mix(in srgb,var(--aspire-color-primary) 14%,white);border-color:color-mix(in srgb,var(--aspire-color-primary) 45%,transparent)}[data-theme=light] .sample-hero-tag:where(.astro-vv25rc3p) svg,[data-theme=light] .sample-hero-tag:where(.astro-vv25rc3p) .apphost-glyph:where(.astro-vv25rc3p){color:var(--aspire-color-primary)}.sample-hero-apphost:where(.astro-vv25rc3p){--apphost-color: var(--aspire-color-primary)}.sample-hero-apphost:where(.astro-vv25rc3p)[data-apphost=typescript]{--apphost-color: #3178c6}.sample-hero-apphost:where(.astro-vv25rc3p)[data-apphost=csproj],.sample-hero-apphost:where(.astro-vv25rc3p)[data-apphost=file-based]{--apphost-color: #512bd4}.sample-hero-apphost:where(.astro-vv25rc3p){background:color-mix(in srgb,var(--apphost-color) 18%,var(--sl-color-bg));border-color:color-mix(in srgb,var(--apphost-color) 55%,transparent);color:color-mix(in srgb,var(--apphost-color) 35%,var(--sl-color-white))}.sample-hero-apphost:where(.astro-vv25rc3p) svg,.sample-hero-apphost:where(.astro-vv25rc3p) .apphost-glyph:where(.astro-vv25rc3p){color:color-mix(in srgb,var(--apphost-color) 80%,var(--sl-color-white))}[data-theme=light] .sample-hero-apphost:where(.astro-vv25rc3p){color:color-mix(in srgb,var(--apphost-color) 80%,var(--sl-color-black));background:color-mix(in srgb,var(--apphost-color) 14%,white);border-color:color-mix(in srgb,var(--apphost-color) 55%,transparent)}[data-theme=light] .sample-hero-apphost:where(.astro-vv25rc3p) svg,[data-theme=light] .sample-hero-apphost:where(.astro-vv25rc3p) .apphost-glyph:where(.astro-vv25rc3p){color:var(--apphost-color)}.sample-hero-title:where(.astro-vv25rc3p){max-width:42rem;margin:0;color:var(--sl-color-white);font-size:clamp(1.35rem,4vw,2.15rem);line-height:1.1;letter-spacing:-.01em}.sample-summary:where(.astro-vv25rc3p){max-width:48rem;margin:0;color:var(--sl-color-gray-2);font-size:clamp(.98rem,2vw,1.1rem);line-height:1.65}.sample-tags:where(.astro-vv25rc3p){display:flex;flex-wrap:wrap;gap:.35rem}.sample-kicker:where(.astro-vv25rc3p){color:var(--sl-color-accent-high);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sample-actions:where(.astro-vv25rc3p){display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.sample-action:where(.astro-vv25rc3p){display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:999px;padding:.55rem .9rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:filter .2s ease,transform .2s ease,border-color .2s ease}.sample-action:where(.astro-vv25rc3p).primary{background:var(--sl-color-accent-high);color:var(--sl-color-black)}.sample-action:where(.astro-vv25rc3p).secondary{border:1px solid var(--sl-color-gray-4);color:var(--sl-color-white)}.sample-action:where(.astro-vv25rc3p):hover{text-decoration:none;filter:brightness(1.08);transform:translateY(-1px)}.sample-readme:where(.astro-vv25rc3p){min-width:0}.sample-readme:where(.astro-vv25rc3p) .expressive-code{margin:1.25rem 0}.sample-apphost:where(.astro-vv25rc3p){display:flex;flex-direction:column;gap:.85rem;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--sl-color-gray-5);border-radius:.5rem;background:color-mix(in srgb,var(--sl-color-gray-6) 85%,var(--sl-color-black))}.sample-apphost-header:where(.astro-vv25rc3p){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.5rem 1rem}.sample-apphost-heading:where(.astro-vv25rc3p){display:flex;flex-direction:column;gap:.25rem;max-width:48rem}.sample-apphost-blurb:where(.astro-vv25rc3p){margin:0;color:var(--sl-color-gray-2);font-size:.95rem;line-height:1.5}.sample-apphost-source:where(.astro-vv25rc3p){display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--sl-color-gray-4);color:var(--sl-color-white);font-size:.8rem;font-weight:600;text-decoration:none;transition:border-color .2s ease,transform .2s ease,background-color .2s ease}.sample-apphost-source:where(.astro-vv25rc3p):hover{text-decoration:none;border-color:var(--sl-color-accent);background:color-mix(in srgb,var(--sl-color-accent) 14%,transparent);transform:translateY(-1px)}.sample-apphost:where(.astro-vv25rc3p) .expressive-code{margin:0}.sample-media:where(.astro-vv25rc3p){display:flex;flex-direction:column;gap:1rem;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--sl-color-gray-5);border-radius:1rem;background:color-mix(in srgb,var(--sl-color-gray-6) 90%,var(--sl-color-black))}.sample-media-header:where(.astro-vv25rc3p){display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1rem;align-items:end}.sample-media-header:where(.astro-vv25rc3p) h2:where(.astro-vv25rc3p){margin:.25rem 0 0;color:var(--sl-color-white);font-size:clamp(1.2rem,3vw,1.55rem)}.sample-media-header:where(.astro-vv25rc3p) p:where(.astro-vv25rc3p){max-width:18rem;margin:0;color:var(--sl-color-gray-2);font-size:.9rem}.sample-media-grid:where(.astro-vv25rc3p){display:grid;gap:1rem}.sample-readme-image:where(.astro-vv25rc3p){display:block;margin:0}.sample-readme-image:where(.astro-vv25rc3p) img:where(.astro-vv25rc3p){display:block;max-width:100%;height:auto;border:1px solid var(--sl-color-gray-5);border-radius:.75rem;box-shadow:var(--sl-shadow-sm)}.sample-readme-image:where(.astro-vv25rc3p) starlight-image-zoom-zoomable{display:block}.sample-readme-image:where(.astro-vv25rc3p) figcaption:where(.astro-vv25rc3p){margin-top:.45rem;color:var(--sl-color-gray-3);font-size:.85rem;text-align:center}.sample-readme:where(.astro-vv25rc3p) h2:first-child{margin-top:0}@media(prefers-reduced-motion:reduce){.mesh-edge:where(.astro-vv25rc3p){animation:none}.mesh-node:where(.astro-vv25rc3p).is-primary{animation:none}.sample-action:where(.astro-vv25rc3p){transition:none}.sample-action:where(.astro-vv25rc3p):hover{transform:none}}@media(max-width:48rem){.sample-hero-mesh:where(.astro-vv25rc3p){width:60%;opacity:.85}}@media(max-width:36rem){.sample-actions:where(.astro-vv25rc3p),.sample-action:where(.astro-vv25rc3p){width:100%}.sample-hero:where(.astro-vv25rc3p){padding:clamp(1.25rem,5vw,1.75rem)}.sample-hero-mesh:where(.astro-vv25rc3p){width:72%;opacity:.5}}
