@import"https://unpkg.com/open-props";*{box-sizing:border-box}html{overscroll-behavior:none;--brand: #8300db}body{background-color:var(--gray-1);color:var(--gray-9);display:flex;font-family:var(--font-sans);font-size:var(--font-size-3);line-height:var(--font-lineheight-2);margin:0;min-height:100vh;padding:0}h1{margin-block:0 var(--size-7)}h2{margin-block:0;font-size:var(--font-size-3);text-transform:uppercase}a{color:var(--brand);text-decoration:none}input,textarea{background-color:var(--gray-3);border-radius:var(--radius-2);border:0;display:flex;font-size:var(--font-size-3);line-height:3.5rem;padding-inline:var(--size-3)}input::placeholder{color:var(--gray-6)}label{font-size:var(--font-size-0);font-weight:var(--font-weight-7);gap:var(--size-2);inline-size:100%;line-height:1;text-transform:uppercase}label.hidden{opacity:0}.btn,button{align-items:center;background-color:var(--gray-7);border-radius:var(--radius-4);border:1px solid transparent;color:var(--gray-1);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-0);font-weight:var(--font-weight-7);inline-size:100%;justify-content:center;line-height:1;padding:var(--size-3);text-align:center;text-transform:uppercase;transition:background-color .25s ease}.btn:hover,button:hover{background-color:var(--brand)}input:focus,button:focus,button:focus-visible{outline:4px auto var(--brand)}[hidden]{display:none}.hstack{align-items:center;align-self:stretch;display:flex;flex-direction:row}.gap-00{gap:var(--size-00)}.gap-1{gap:var(--size-1)}.gap-2{gap:var(--size-2)}.gap-3{gap:var(--size-3)}.gap-4{gap:var(--size-4)}.gap-5{gap:var(--size-5)}.gap-6{gap:var(--size-6)}.gap-7{gap:var(--size-7)}.gap-8{gap:var(--size-8)}.gap-9{gap:var(--size-9)}.gap-10{gap:var(--size-10)}#app{inline-size:100%}.wrapper{inline-size:min(90vw,1200px);margin-inline:auto}.layout{align-items:start;display:grid;gap:var(--size-4);grid-template-areas:"input" "controls" "image" "footer"}.header{align-items:center;border-bottom:1px solid var(--gray-3);display:flex;gap:var(--size-6);justify-content:space-between;margin-block-end:var(--size-8);padding-block:var(--size-4)}.header__title{font-size:var(--font-size-4);letter-spacing:var(--font-letterspacing-0);margin:0}.header__intro{color:var(--gray-6);display:none;font-size:var(--font-size-1)}@media only screen and (min-width: 60rem){.header__intro{display:block}}.controls{display:grid;gap:var(--size-4);grid-area:controls;grid-template-areas:"download" "grads" "buttons";inline-size:100%;padding-block:var(--size-5) var(--size-3)}@media only screen and (min-width: 45rem){.controls{grid-template-areas:"buttons download" "grads grads";grid-template-columns:1fr 1fr}}@media only screen and (min-width: 60rem){.controls{gap:var(--size-7);grid-template-areas:"buttons grads download";grid-template-columns:1fr 2fr 1fr}}.grad-buttons{align-items:center;display:grid;gap:var(--size-2);grid-area:grads;grid-auto-flow:column}.grad-button{aspect-ratio:1/1;border:2px solid var(--gray-9);block-size:100%;inline-size:100%;overflow:hidden;padding:0}.grad-button__image{height:100%;inline-size:100%;object-fit:cover}.grad-button:hover{border-color:var(--brand)}@media only screen and (min-width: 60rem){.grad-buttons{margin-inline:auto}}.buttons{display:grid;gap:var(--size-3);grid-area:buttons;grid-auto-flow:column}.download{background-color:var(--brand);grid-area:download}.download:hover{background-color:var(--gray-9)}.col{display:flex;flex-direction:column;flex:1;gap:var(--size-2);inline-size:100%}.row{display:flex;flex-wrap:wrap;gap:var(--size-5);inline-size:100%}@media only screen and (min-width: 60rem){.row{min-height:100%}}.canvas-wrapper{background-color:var(--gray-4);border-radius:var(--radius-2);display:flex;grid-area:image;inline-size:100%;justify-content:center;padding:var(--size-2)}.canvas-wrapper .canvas-container,.canvas-wrapper canvas{aspect-ratio:3/1;block-size:auto!important;max-width:calc(100vw - var(--size-7));inline-size:100%!important}.footer{display:flex;flex-direction:column;justify-content:space-between;grid-area:footer;gap:var(--size-3);padding-block:var(--size-7)}.footer__link{color:var(--gray-6);display:inline-block;inline-size:auto}.footer__link:hover{color:var(--brand)}@media only screen and (min-width: 60rem){.footer{flex-direction:row}.footer__link:last-of-type{flex:2;text-align:end}}