@import url("https://unpkg.com/normalize.css") layer(normalize);@layer normalize, base, demo;@layer demo{.project-showcase{--bg:light-dark(#fff,#000);background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding-block:2rem}.project-showcase h1,.project-showcase p{margin:0}.project-showcase h1.fluid{--font-size-min:22;--font-level:4.25}.project-showcase h3{white-space:nowrap;margin:0}.project-showcase>p{width:74ch;max-width:calc(100% - 4rem);text-wrap:balance;font-family:monospace;margin-bottom:4rem;line-height:1.5;opacity:.8;font-weight:400}@media (max-width:768px){.project-showcase>p{text-align:center}}.project-showcase li :is(svg,h3){opacity:.6;transition:opacity calc(var(--speed) * 1.2) var(--easing)}.project-showcase li :is(a,p){opacity:0;transition:opacity calc(var(--speed) * 1.2) var(--easing);width:fit-content}.project-showcase li img{filter:grayscale(1) brightness(1.5);scale:1.1;transition-property:filter,scale;transition-duration:calc(var(--speed) * 1.2);transition-timing-function:var(--easing)}.project-showcase [data-active=true] :is(a,p,h3,svg){opacity:var(--opacity,1)}.project-showcase [data-active=true] :is(a,p){transition-delay:calc(var(--speed) * .25)}.project-showcase [data-active=true] img{filter:grayscale(0) brightness(1);scale:1;transition-delay:calc(var(--speed) * .25)}.project-showcase article{width:calc(var(--article-width) * 1px);height:100%;position:absolute;font-family:monospace;top:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;padding-inline:calc(var(--base) * .5 - 9px);padding-bottom:1rem;overflow:hidden}.project-showcase article h3{position:absolute;top:1rem;left:calc(var(--base) * .5);transform-origin:0 50%;rotate:90deg;font-size:1rem;font-weight:300;text-transform:uppercase;font-family:monospace}.project-showcase article svg{width:18px;fill:none}.project-showcase article p{font-size:13px;text-wrap:balance;line-height:1.25;--opacity:0.8}.project-showcase article a{position:absolute;bottom:1rem;height:18px;line-height:1;color:inherit}.project-showcase article a:is(:focus-visible,:hover){outline:none}.project-showcase article a:is(:focus-visible,:hover) span{text-decoration:underline;text-underline-offset:4px}.project-showcase article a span{display:inline-block;line-height:18px;translate:calc(var(--base) * .5);font-weight:500}.project-showcase article img{position:absolute;pointer-events:none;inset:0;width:100%;height:100%;object-fit:cover;mask:radial-gradient(100% 100% at 100% 0,#fff,#0000)}.project-showcase{--gap:8px;--base:clamp(2rem,8cqi,80px);--easing:linear(0 0%,0.1538 4.09%,0.2926 8.29%,0.4173 12.63%,0.5282 17.12%,0.6255 21.77%,0.7099 26.61%,0.782 31.67%,0.8425 37%,0.8887 42.23%,0.9257 47.79%,0.9543 53.78%,0.9752 60.32%,0.9883 67.11%,0.9961 75%,1 100%);--speed:0.6s}.project-showcase ul{display:grid;container-type:inline-size;grid-template-columns:10fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:var(--gap);list-style-type:none;justify-content:center;padding:0;height:clamp(300px,40dvh,474px);margin:0;width:820px;max-width:calc(100% - 4rem);transition:grid-template-columns var(--speed) var(--easing)}.project-showcase li{background:var(--bg);position:relative;overflow:hidden;min-width:var(--base);border-radius:8px;border:1px solid color-mix(in hsl,canvas,canvasText 50%)}}@layer base{.project-showcase{--font-size-min:16;--font-size-max:20;--font-ratio-min:1.2;--font-ratio-max:1.33;--font-width-min:375;--font-width-max:1500}.project-showcase[data-theme=light]{color-scheme:light only}.project-showcase[data-theme=dark]{color-scheme:dark only}.project-showcase :where(.fluid){--fluid-min:calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)));--fluid-max:calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0)));--fluid-preferred:calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));--fluid-type:clamp((var(--fluid-min)/16) * 1rem,((var(--fluid-min)/16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min))/16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit,100vi)),(var(--fluid-max)/16) * 1rem);font-size:var(--fluid-type)}.project-showcase *,.project-showcase :after,.project-showcase :before{box-sizing:border-box}.project-showcase body{display:grid;place-items:center;min-height:100vh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}.project-showcase body:before{--size:45px;--line:color-mix(in hsl,canvasText,transparent 70%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% /var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% /var(--size) var(--size);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}.project-showcase .bear-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}.project-showcase :where(.x-link,.bear-link):is(:hover,:focus-visible){opacity:1}.project-showcase .bear-link svg{width:75%}.project-showcase .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}