:root{--space:1rem;--bg:#09090b;--fg:#d3d3d3;--surface-1:#101012;--surface-2:#27272a;--surface-3:#52525b;--ease-out:cubic-bezier(0.5,1,0.89,1);--ease-in-out:cubic-bezier(0.45,0,0.55,1)}.card,body{background-color:#d3d3d3}.card{aspect-ratio:4/1;border:none;display:grid;grid-template-areas:"card";isolation:isolate;overflow:hidden;place-items:center;position:relative;transition:border-color .2s var(--ease-out);user-select:none}.card:before{pointer-events:none;transition:opacity .9s var(--ease-out)}.card:after,.card:before{background:none;content:"";inset:0;position:absolute}.card:after{aspect-ratio:1;margin:auto;opacity:1;transition:opacity .8s var(--ease-out)}.card>*{grid-area:card}.card svg{color:var(--surface-3);height:auto;position:relative;transition:.3s var(--ease-out);transition-property:color,scale;width:30%;z-index:1}.card button{opacity:0}.card:focus-within{outline:5px auto Highlight;outline:5px auto -webkit-focus-ring-color}.card:where(:hover,:focus-within){border-color:var(--active-color,var(--fg));transition:border-color .8s var(--ease-in-out)}.card:where(:hover,:focus-within) svg{color:var(--active-color,var(--fg));scale:1.1;transition:.3s var(--ease-in-out)}