@layer components{.showcase{border-top:var(--layout-border);border-bottom:var(--layout-border);flex-direction:column;gap:16px;margin:0 auto 40px;display:flex}.showcase__inner{--padding:20px;width:min(calc(100% - var(--padding)), var(--layout-width));flex-direction:column;align-items:center;gap:16px;margin-inline:auto;padding:56px 16px;display:flex;position:relative}@media (width>=520px) and (width<=920px){.showcase__inner{--padding:50px}}@media (width>=800px){.showcase__inner{padding:76px 26px}}.showcase__inner:before{content:"";background:linear-gradient(to bottom right, transparent 0%, var(--blue) 25%, var(--magenta) 50%, var(--blue) 75%, transparent 100%);opacity:.1;z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.showcase__title{width:fit-content;font-size:var(--h2);text-align:center;justify-content:center;align-items:baseline;gap:16px;padding-inline:16px;font-weight:500;display:flex}.showcase__tagline{text-align:center;text-wrap:balance;max-width:450px;margin-bottom:34px;font-weight:400}.showcase__content{flex-direction:column;gap:26px;max-width:100%;display:flex}@media (width>=870px){.showcase__content{flex-direction:row}.showcase__content:nth-child(odd){flex-direction:row-reverse}}@media (width>=900px){.showcase__content{padding:46px}}.showcase__description{flex-direction:column;justify-content:center;gap:16px;padding:12px;display:flex}@media (width>=870px){.showcase__description{flex:100%;padding:26px}}.showcase__description:only-child{flex:0 0 50%;margin-inline:auto}@media (width>=1050px){.showcase__description{padding:86px}}.showcase__subtitle{font-family:var(--serif-font);font-weight:500;font-size:var(--h4);align-self:flex-start}.showcase__subtitle:not(:first-child){margin-top:16px}.showcase__subtitle>code{background-color:var(--grey-000);border-radius:var(--radius-100);padding:2px 4px}.showcase__window{border:1px solid var(--grey-300);border-radius:var(--radius-300) var(--radius-300) 0 var(--radius-100);max-width:100%;height:fit-content;box-shadow:var(--shadow-100);transition:transform .32s var(--transition-easing);flex-direction:column;margin:auto;display:flex;position:relative;transform:perspective(13em)rotateX(2deg)rotateY(-3deg)translateZ(0)}@media not (hover:hover){.showcase__window{transform:none}}@media (width>=870px){.showcase__window{flex:100%;max-width:50%}}.showcase__content:nth-child(odd) .showcase__window{transform:perspective(13em)rotateX(2deg)rotateY(3deg)translateZ(0)}.showcase__content:nth-child(n) .showcase__window:hover{transform:none}.showcase__text code{background-color:var(--grey-000);border-radius:var(--radius-100);padding:2px 4px}.showcase__title-bar{--radius:calc(var(--radius-300) - 1px);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);background-color:#f5f5f5;align-items:center;padding:8px 12px;display:flex}.showcase__control{border-radius:50%;width:11px;height:11px;margin-right:8px}.showcase__control:first-of-type{background-color:#ff605c}.showcase__control:nth-of-type(2){background-color:#ffbd44}.showcase__control:nth-of-type(3){background-color:#00ca4e}.showcase__code{max-height:70vh;line-height:1.6;font-size:calc(var(--label) - 1px);scrollbar-width:thin;scrollbar-color:var(--grey-200) transparent;border-radius:0 0 0 var(--radius-100);background-color:#1b222d;padding:12px;overflow:auto}@media (orientation:portrait){.showcase__code{aspect-ratio:16/14}}.showcase__code:hover{scrollbar-color:var(--grey-400) transparent}.showcase__code>pre{background-color:#0000!important}.showcase__code code .line:before{content:counter(line);text-align:right;width:2rem;color:var(--grey-300);margin-right:1.5rem;display:inline-block}.showcase__code code .line{counter-increment:line}}