*,:after,:before{box-sizing:border-box}@font-face{font-family:AlphaLyrae;src:url(AlphaLyrae-Medium.96a8c403.woff2)format("woff2"),url(AlphaLyrae-Medium.57919e35.woff)format("woff");font-style:normal}@font-feature-values "AlphaLyrae"{@styleset { ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5 }}:root{--color-text:#fff;--color-bg:#000;--color-link:#fff;--color-link-hover:#fff;--img-width:190px;--img-ratio:1.1;--img-offset-x:20px;--img-offset-y:20px;--img-border-radius:7px;--color-bg-content:#ffffff0d;--color-bg-demos:#ffffff0d;font-size:13px}body{color:var(--color-text);background-color:var(--color-bg);text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;min-height:-webkit-fill-available;margin:0;font-family:AlphaLyrae,sans-serif;overflow:hidden}html{height:-webkit-fill-available}.demo-3{--img-width:160px;--img-ratio:.7}.demo-4{--img-ratio:1}.demo-5{--img-width:230px;--img-ratio:1.2}.demo-6{--color-bg:#000;--img-ratio:.85;--img-border-radius:0px}.demo-7{--img-ratio:1;--img-border-radius:4px}.demo-8{--img-width:175px;--img-ratio:1;--img-border-radius:4px}.demo-9{--img-width:260px;--img-ratio:1}.js .loading:before,.js .loading:after{content:"";z-index:2000;position:fixed}.js .loading:before{background:var(--color-bg);width:100%;height:100%;top:0;left:0}.js .loading:after{opacity:.4;background:var(--color-link);border-radius:50%;width:60px;height:60px;margin:-30px 0 0 -30px;animation:.7s linear infinite alternate forwards loaderAnim;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);cursor:pointer;outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:inherit}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}main{grid-row-gap:1.25rem;grid-template:"frame""content"1fr"meta""demos"/1fr;width:100%;height:100vh;padding:1.25rem;display:grid}.meta{grid-area:meta}.meta__title{margin:0;font-size:clamp(2rem,5vw,5rem);font-weight:300}.meta__subtitle{margin:0}.demos{text-align:right;background:var(--color-bg-demos);grid-column-gap:.5rem;grid-row-gap:.5rem;z-index:200;border-radius:8px;flex-wrap:wrap;grid-area:demos;place-content:flex-end;align-items:flex-end;padding:.5rem;display:flex;position:relative}.demos span{width:100%}.demo{background:var(--color-bg);aspect-ratio:1;text-align:center;border-radius:5px;flex:none;place-items:center;width:3rem;display:grid}.demo--current{color:#ffffff80}.frame{z-index:1000;grid-gap:.5rem;grid-area:frame;grid-template-columns:auto auto;grid-template-areas:"title title""prev back""sponsor sponsor";display:grid;position:relative}body #cdawrap{justify-self:start}.frame a{pointer-events:auto}.frame__title{font-size:inherit;font-weight:inherit;grid-area:title;margin:0}.frame__back{grid-area:back}.frame__prev{grid-area:prev}.content{background:var(--color-bg-content);z-index:100;border-radius:8px;grid-area:content;position:relative}.content__img{width:var(--img-width);aspect-ratio:var(--img-ratio);border-radius:var(--img-border-radius);opacity:0;will-change:transform,filter;position:absolute;top:0;left:0;overflow:hidden}.demo-7 .content__img{mix-blend-mode:screen}.demo-8 .content__img{overflow:visible}.content__img-inner{width:calc(100% + var(--img-offset-x));height:calc(100% + var(--img-offset-y));top:calc(-1*var(--img-offset-y)/2);left:calc(-1*var(--img-offset-x)/2);background-position:50%;background-size:cover;position:absolute}@supports (font-variant-alternates:styleset(ss02)){.show-if-variant-alternates-supported{color:red}.hide-if-variant-alternates-supported,.show-if-no-variant-alternates-supported{display:none}}@supports not (font-variant-alternates:styleset(ss02)){.hide-if-no-variant-alternates-support{display:none}.show-if-no-variant-alternates-supported{color:red}}.ss01{font-variant-alternates:styleset(ss01)}.ss02{font-variant-alternates:styleset(ss02)}.ss03{font-variant-alternates:styleset(ss03)}.ss04{font-variant-alternates:styleset(ss04)}.ss05{font-variant-alternates:styleset(ss05)}@media screen and (min-width:53em){main{grid-template:"frame frame""content content"1fr"meta demos"/1fr 1fr}.frame{grid-gap:2rem;grid-template-columns:auto auto auto 1fr;grid-template-areas:"title back prev sponsor";align-content:space-between;align-items:end}.frame__title:after,.frame__title:before{content:"_"}.demos{grid-column-gap:.5rem;grid-row-gap:1rem;justify-self:end;padding:1rem}body #cdawrap{justify-self:end}}