#component-grid{#grid-wrapper{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,300px);grid-gap:12px;grid-template-areas:"button      type        accordion accordion" "input       table       table     progress    " "select      table       table     colour      " "breadcrumbs breadcrumbs radio     colour      " "callout     callout     callout   badge       " "checkbox    code        code      badge       ";.grid-item{div,p,td{font-weight:400!important}}@media (max-width:1000px){display:flex;flex-direction:column;.grid-item{aspect-ratio:6/3}&>div{width:100%;img{width:90%}}}}#accordion-card{grid-area:accordion}#input-card{grid-area:input;.component-card{width:80%;margin:0 auto}}#select-card{grid-area:select}#checkbox-card{grid-area:checkbox}#badge-card{grid-area:badge;container-type:size}#badge-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}@container (max-width: 400px){#badge-wrapper{flex-direction:column}}#table-card{grid-area:table;a{width:100%}}#code-card{grid-area:code}#breadcrumbs-card{grid-area:breadcrumbs}#progress-card{grid-area:progress}#progress-card progress{width:160px}#colour-card{grid-area:colour}#gradient-card{display:grid;width:100px;height:320px;place-content:center;border:none;background:linear-gradient(180deg,#ffc900,#e64141 25%,#f169ec 50%,#5774ff 75%,#5ff6f7)}#callout-card{grid-area:callout}.component-wrapper{background-color:var(--component-card-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:hidden}.component-card{position:relative;display:grid;place-content:center;overflow:hidden;width:100%;height:100%;.footer-bottom{width:100%;position:absolute;bottom:0;left:0;border-top:1px solid rgba(0,0,0,.15);padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(100%);transition:transform .4s cubic-bezier(1,0,0,1)}&:hover{.footer-bottom{transform:translateY(0)}}}}#home-page{scroll-behavior:smooth;#intro-headline{background:-webkit-linear-gradient(270deg,#adb2ff,#264be1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:3.2rem}#code-block-wrapper{position:relative}#code-block-wrapper:after{filter:blur(8px);background:#833ab4;background:linear-gradient(90deg,#833ab4,#fd1d1d 50%,#fcb045);position:absolute;top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);content:"";z-index:-1}#fictoan-bg{position:fixed;top:-10vh;left:8%;width:100%;height:auto;z-index:-1;transform:rotate(-40deg);opacity:.16;filter:saturate(150%)}.manifesto-card{position:relative;min-width:100%;padding:2px;overflow:hidden;background:linear-gradient(90deg,var(--indigo),var(--indigo-dark-40));border-radius:16px;transform:translateZ(0);svg{position:absolute;bottom:-32px;right:40px;height:120%;stroke:var(--blue);fill:none;opacity:.32;z-index:-1}}.manifesto-card-content{position:relative;z-index:1;padding:32px;background:linear-gradient(0deg,rgba(4,7,22,.96),rgba(4,10,22,.96));border:1px solid hsla(0,0%,100%,.1);border-radius:12px}#manifesto-card-bg{position:absolute;inset:0;top:24%;left:0;height:100%;background:conic-gradient(transparent 1%,var(--blue) 80deg,transparent 100deg);filter:blur(8px);transform-origin:center;animation:border-glow -.64s linear 4s infinite;will-change:transform}}