*{margin:0;padding:0;box-sizing:border-box;font-size:.9rem}html{--color-bg: #000;--color-text: #797979;--color-link: #fff}body{font-size:12px;font-optical-sizing:auto;color:var(--color-text);background:var(--color-bg);font-family:sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:not(.is-loading) .loading{display:none}@keyframes loaderAnim{0%{transform:scaleX(0);transform-origin:0% 50%}50%{transform:scaleX(1);transform-origin:0% 50%}50.1%{transform:scaleX(1);transform-origin:100% 50%}to{transform:scaleX(0);transform-origin:100% 50%}}@media (scripting: enabled){.loading:before,.loading:after{content:"";position:fixed;z-index:10000}.loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.loading:after{top:50%;left:50%;width:100px;height:1px;margin:0 0 0 -50px;background:var(--color-link);animation:loaderAnim 1.5s ease-in-out infinite forwards}}.experience{width:100vw;height:100vh;overflow:hidden}a{color:#d7d7d7;text-decoration:none}a:hover{opacity:.7;text-decoration:underline}.frame{font-size:12px;padding:2rem;display:grid;z-index:1000;position:relative;grid-row-gap:1rem;grid-column-gap:1rem;pointer-events:none;justify-items:start;text-transform:uppercase;grid-template-columns:auto auto;grid-template-areas:"title" "links" "demos" "tags" "sponsor"}.frame__title{grid-area:title;font-size:inherit;font-weight:inherit;margin:0}.frame__links{grid-area:links;justify-self:start;display:flex;flex-wrap:wrap;gap:1rem}.frame__tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:1rem}.frame__demos{grid-area:demos;display:flex;flex-wrap:wrap;gap:1rem}.frame a{pointer-events:auto}.frame #cdawrap{justify-self:start;font-size:12px;opacity:1;transition:opacity .3s 1s linear;max-width:300px}.loading .frame #cdawrap{opacity:0}@media screen and (min-width: 53rem){.frame{position:fixed;top:0;left:0;width:100%;height:100%;grid-template-columns:min-content min-content auto 1fr;grid-template-rows:auto auto auto 1fr;align-content:space-between;grid-template-areas:"title title title ..." "links links links ..." "tags tags tags ..." "demos demos demos sponsor"}.frame__demos{align-self:end}.frame #cdawrap{justify-self:end;text-align:right;align-self:end}}