*,:after,:before{box-sizing:border-box}:root{font-size:16px}body{--color-text:#a5a5a5;--color-bg:#191613;--color-link:#d6af7c;--color-link-hover:#fff;--color-text-circle-1:#48423c;--color-text-circle-2:#48423c;--color-text-circle-3:#48423c;--color-text-circle-4:#48423c;--font-circle-1:ivymode, sans-serif;--font-weight-circle-1:300;--font-circle-2:modesto-condensed, serif;--font-weight-circle-2:400;--font-circle-3:minerva-modern, sans-serif;--font-weight-circle-3:400;--font-circle-4:niagara, serif;--font-weight-circle-4:300;--color-button:#d6ae7c;--color-text-button:#1d1812;--dim-button:90px;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:tenon,sans-serif}.demo-2{--color-text:#a5a5a5;--color-bg:#000;--color-link:#ea34a6;--color-link-hover:#fff;--color-font-circle:#7b7772;--color-button:#ea34a6;--color-text-button:#000;--color-text-circle-1:#ea34a6;--color-text-circle-2:#422163;--color-text-circle-3:#212044;--color-text-circle-4:#292725;--font-circle-1:niagara, serif;--font-weight-circle-1:300;--font-circle-2:ambroise-firmin-std, serif;--font-weight-circle-2:300;--font-circle-3:modesto-condensed, serif;--font-weight-circle-3:400;--font-circle-4:niagara, serif;--font-weight-circle-4:300}.demo-3{--color-text:#292725;--color-bg:#dad4d1;--color-link:#a99c90;--color-link-hover:#292725;--color-font-circle:#7b7772;--color-button:#a99c90;--color-text-button:#272524;--color-text-circle-1:#272524;--color-text-circle-2:#272524;--color-text-circle-3:#272524;--color-text-circle-4:#272524;--font-circle-1:modesto-condensed, serif;--font-weight-circle-1:400;--font-circle-2:ambroise-firmin-std, serif;--font-weight-circle-2:300;--font-circle-3:modesto-condensed, serif;--font-weight-circle-3:400;--font-circle-4:niagara, sans-serif;--font-weight-circle-4:300}.js body:before,.js body:after{content:"";z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s;position:fixed}.js body:before{background:var(--color-bg);width:100%;height:100%;top:0;left:0}.js body:after{content:"Loading";width:100%;height:100%;color:var(--color-link);justify-content:center;align-items:center;font-weight:500;line-height:1;display:flex;top:0;left:0}.js .loading:before,.js .loading:after{opacity:1;pointer-events:auto}a{color:var(--color-link);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:0 0}a:focus-visible{background:0 0;outline:2px solid red}.frame{text-align:center;will-change:transform;padding:3rem 5vw;font-weight:500;position:relative}.js .frame{opacity:0}.frame__title{margin:0 0 1rem;font-size:1rem;font-weight:500}.frame__links{display:inline}.frame__links a:not(:last-child),.frame__demos a:not(:last-child){margin:0 1rem 0 0}.frame__demos{margin:1rem 0}.frame__demo--current,.frame__demo--current:hover{color:var(--color-text)}.enter{width:var(--dim-button);height:var(--dim-button);left:calc(50% - var(--dim-button) / 2);top:calc(50% - var(--dim-button) / 2);font:inherit;cursor:pointer;color:var(--color-text-button);background:0 0;border:0;padding:0;font-weight:500;display:block;position:absolute}.enter:focus,.enter:hover,.enter:active{outline:none}.enter__bg{background:var(--color-button);border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.enter__text{position:relative}.js .enter{opacity:0}.content{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;width:100vw;height:calc(100vh - 13rem);padding:2rem;display:flex;position:relative}.js .content{opacity:0}.content p{pointer-events:none;will-change:transform;max-width:900px;margin:0;font-size:clamp(1.25rem,6vw,2.15rem);line-height:1.25}.circles{pointer-events:none;--dim:186vmin;width:var(--dim);height:var(--dim);top:calc(50% - var(--dim) / 2);left:calc(50% - var(--dim) / 2);position:fixed}.demo-3 .circles{--dim:206vmin}.circles__text{text-transform:uppercase;transform-origin:700px 700px;will-change:transform, opacity}.circles__text--1{font-size:clamp(170px,25vmin,180px);font-family:var(--font-circle-1);font-weight:var(--font-weight-circle-1);fill:var(--color-text-circle-1)}.circles__text--2{font-size:clamp(136px,17vmin,153px);font-family:var(--font-circle-2);font-weight:var(--font-weight-circle-2);fill:var(--color-text-circle-2)}.circles__text--3{font-size:clamp(110px,13.5vmin,120px);font-family:var(--font-circle-3);font-weight:var(--font-weight-circle-3);fill:var(--color-text-circle-3)}.circles__text--4{font-size:clamp(85px,9.5vmin,94px);font-family:var(--font-circle-4);font-weight:var(--font-weight-circle-4);fill:var(--color-text-circle-4)}@media screen and (width>=53em){.frame{text-align:left;z-index:100;pointer-events:none;grid-template:"title links"". ."".demos"/50% 50%;align-content:space-between;width:100%;max-width:none;height:100vh;padding:2rem;display:grid;position:fixed;top:0;left:0}.frame__title{grid-area:title;margin:0}.frame__menu{grid-area:menu;justify-self:end}.frame__links{grid-area:links;justify-self:end;padding:0}.frame__demos{grid-area:demos;justify-self:end;margin:0}.frame a{pointer-events:auto}.content{text-align:left;justify-content:center;height:100vh}}