@layer components{:root{--labs-card-chamfer:0.45rem;--labs-filter-all:var(--colour-lime);--labs-filter-games:var(--colour-orange);--labs-filter-tools:var(--palette-light-pink);--labs-filter-audio:var(--palette-light-blue);--labs-filter-visual:rgb(186 132 255)}.labs-gallery{display:grid;gap:var(--space-6);grid-column:1 / -1;grid-template-columns:minmax(0,1fr)}.labs-gallery__filters{display:flex;flex-wrap:wrap;gap:var(--space-3)}.labs-gallery__filter.tag{appearance:none;background:transparent;cursor:pointer;margin:0;transition:opacity 180ms ease}.labs-gallery__filter.tag:not(.is-active){opacity:0.42}.labs-gallery__filter.tag:is(:hover,:focus-visible){opacity:1}.labs-gallery__filter--all{color:var(--labs-filter-all)}.labs-gallery__filter--games{color:var(--labs-filter-games)}.labs-gallery__filter--tools{color:var(--labs-filter-tools)}.labs-gallery__filter--audio{color:var(--labs-filter-audio)}.labs-gallery__filter--visual{color:var(--labs-filter-visual)}.labs-gallery__grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}.labs-gallery__item{min-inline-size:0}.labs-card{--labs-card-accent:var(--palette-light-blue);--tile-border-dark:color-mix(in oklab,var(--labs-card-accent) 72%,black);--tile-border-light:var(--labs-card-accent);--tile-colour:var(--labs-card-accent);--tile-icon:var(--icon-8-circle);block-size:100%}.labs-card__link{align-items:center;background:transparent;block-size:100%;border-color:transparent;border-image:linear-gradient( 180deg,color-mix(in oklab,var(--tile-border-light) 82%,transparent),color-mix(in oklab,var(--tile-border-dark) 82%,transparent) ) 1;border-style:solid;border-width:1px;clip-path:polygon( 0 0,calc(100% - var(--labs-card-chamfer)) 0,100% var(--labs-card-chamfer),100% 100%,var(--labs-card-chamfer) 100%,0 calc(100% - var(--labs-card-chamfer)) );color:inherit;column-gap:var(--space-4);display:grid;grid-template-columns:auto minmax(0,1fr);min-block-size:100%;padding:var(--space-4);position:relative;text-decoration:none;transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}.labs-card__link::before,.labs-card__link::after{block-size:var(--labs-card-chamfer);content:"";inline-size:var(--labs-card-chamfer);pointer-events:none;position:absolute;z-index:1}.labs-card__link::before{border-right:1px solid color-mix(in oklab,var(--tile-border-light) 82%,transparent);border-top:1px solid color-mix(in oklab,var(--tile-border-light) 82%,transparent);inset-block-start:-1px;inset-inline-end:-1px}.labs-card__link::after{border-bottom:1px solid color-mix(in oklab,var(--tile-border-dark) 82%,transparent);border-left:1px solid color-mix(in oklab,var(--tile-border-dark) 82%,transparent);inset-block-end:-1px;inset-inline-start:-1px}.labs-card__link:is(:hover,:focus-visible){border-image:linear-gradient(180deg,var(--tile-border-light),var(--tile-border-dark)) 1;box-shadow:0 0 1.25rem color-mix(in oklab,var(--tile-colour) 16%,transparent);transform:translateY(-0.08rem)}.labs-card__icon{align-items:center;aspect-ratio:1;background:transparent;border-color:transparent;border-image:linear-gradient( 180deg,color-mix(in oklab,var(--tile-border-light) 82%,transparent),color-mix(in oklab,var(--tile-border-dark) 82%,transparent) ) 1;border-radius:var(--tile-radius) 0 var(--tile-radius) 0;border-style:solid;border-width:1px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 3%);clip-path:polygon( 0 0,calc(100% - var(--tile-chamfer)) 0,100% var(--tile-chamfer),100% 100%,var(--tile-chamfer) 100%,0 calc(100% - var(--tile-chamfer)) );color:var(--tile-border-light);display:flex;flex:0 0 auto;inline-size:var(--tile-size);justify-content:center;overflow:clip;position:relative}.labs-card__icon::before,.labs-card__icon::after{block-size:var(--tile-chamfer);content:"";inline-size:var(--tile-chamfer);pointer-events:none;position:absolute;z-index:2}.labs-card__icon::before{border-right:1px solid color-mix(in oklab,var(--tile-border-light) 82%,transparent);border-top:1px solid color-mix(in oklab,var(--tile-border-light) 82%,transparent);inset-block-start:-1px;inset-inline-end:-1px}.labs-card__icon::after{border-bottom:1px solid color-mix(in oklab,var(--tile-border-dark) 82%,transparent);border-left:1px solid color-mix(in oklab,var(--tile-border-dark) 82%,transparent);inset-block-end:-1px;inset-inline-start:-1px}.labs-card__thumb{block-size:100%;display:grid;inline-size:100%;place-items:center}.labs-card__thumb--homados{background:radial-gradient(circle at 50% 120%,rgb(72 160 64 / 55%),transparent 58%),linear-gradient(180deg,rgb(24 48 28),rgb(12 24 16))}.labs-card__thumb--hestia{background:radial-gradient(circle at 50% 58%,rgb(226 94 152 / 72%),rgb(41 202 255 / 18%) 44%,transparent 68%),radial-gradient(circle at 50% 50%,rgb(255 255 255 / 12%),transparent 28%),linear-gradient(180deg,rgb(8 12 28),rgb(18 8 24))}.labs-card__thumb--joystick{background:radial-gradient(circle at 50% 100%,color-mix(in oklab,var(--colour-orange) 24%,transparent),transparent 58%),linear-gradient(180deg,rgb(28 18 10),rgb(12 10 8))}.labs-card__thumb--terminal,.labs-card__thumb--clock{background:radial-gradient(circle at 50% 100%,color-mix(in oklab,var(--palette-light-pink) 24%,transparent),transparent 58%),linear-gradient(180deg,rgb(28 12 22),rgb(10 8 12))}.labs-card__thumb--braces{background:radial-gradient(circle at 50% 100%,color-mix(in oklab,var(--palette-light-blue) 24%,transparent),transparent 58%),linear-gradient(180deg,rgb(10 22 28),rgb(8 10 12))}.labs-card__thumb--visual{background:radial-gradient(circle at 35% 40%,color-mix(in oklab,var(--labs-filter-visual) 42%,transparent),transparent 52%),radial-gradient(circle at 68% 62%,color-mix(in oklab,var(--palette-light-blue) 28%,transparent),transparent 48%),linear-gradient(180deg,rgb(16 10 28),rgb(8 8 14))}.labs-card__glyph{background:currentColor;block-size:52%;color:var(--tile-colour);display:block;inline-size:52%;mask:var(--tile-icon) center / contain no-repeat;-webkit-mask:var(--tile-icon) center / contain no-repeat;position:relative;z-index:1}.labs-card__details{align-content:center;display:grid;gap:var(--space-3);grid-template-rows:auto auto auto;min-inline-size:0}.labs-card__tags{display:block}.labs-card__title{color:var(--colour-copy);display:block;font-family:var(--font-headline);font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.2}.labs-card__link:is(:hover,:focus-visible) .labs-card__title{color:var(--labs-card-accent)}.labs-card__summary{color:var(--colour-summary);display:block;font-family:var(--font-main);font-size:clamp(0.9375rem,1.45vw,1.125rem);line-height:1.65}.labs-card__tags{align-items:start;display:flex;flex-direction:column;gap:var(--space-2)}.labs-card__tag{color:var(--labs-card-accent)}.labs-card--games{--labs-card-accent:var(--labs-filter-games);--tile-border-dark:var(--colour-orange-darker);--tile-border-light:var(--colour-orange);--tile-icon:var(--icon-joystick)}.labs-card--tools{--labs-card-accent:var(--labs-filter-tools);--tile-border-dark:var(--palette-darker-pink);--tile-border-light:var(--palette-light-pink)}.labs-card--tools.labs-card--terminal{--tile-icon:var(--icon-terminal)}.labs-card--tools.labs-card--braces{--tile-icon:var(--icon-braces)}.labs-card--tools.labs-card--clock{--tile-icon:var(--icon-clock)}.labs-card--audio{--labs-card-accent:var(--labs-filter-audio);--tile-border-dark:var(--palette-dark-blue);--tile-border-light:var(--palette-light-blue)}.labs-card--audio.labs-card--music{--tile-icon:var(--icon-music)}.labs-card--visual{--labs-card-accent:var(--labs-filter-visual);--tile-border-dark:rgb(72 42 112);--tile-border-light:var(--labs-filter-visual);--tile-icon:var(--icon-8-circle)}.labs-card--visual.labs-card--image{--tile-icon:var(--icon-image)}.labs-card--dpad{--tile-icon:var(--icon-dpad)}.labs-card--cpu{--tile-icon:var(--icon-cpu)}.labs-card--github{--tile-icon:var(--icon-github)}.labs-card__link:is(:hover,:focus-visible) .labs-card__icon{border-image:linear-gradient(180deg,var(--tile-border-light),var(--tile-border-dark)) 1;box-shadow:0 0 0.85rem color-mix(in oklab,var(--tile-colour) 42%,transparent),inset 0 0 0 1px rgb(255 255 255 / 3%);transform:translateY(-0.12rem)}@media (width < 40rem){.labs-gallery__grid{grid-template-columns:minmax(0,1fr)}.labs-card__link{align-items:start;grid-template-columns:minmax(0,1fr);row-gap:var(--space-4)}.labs-card__icon{justify-self:center}.labs-card__tags{flex-direction:row;flex-wrap:wrap}}}