@import"https://fonts.googleapis.com/css2?family=Inter:wght@200;300;700&display=swap";html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body,html,figure{margin:0;padding:0}body{min-width:350px}:root{--font-weight-light: 200;--font-weight-normal: 300;--font-weight-bold: 700}html{font-size:clamp(12px,5px + .8vw,14px);font-family:Inter,sans-serif}p,li,input,button label,textarea,blockquote,dd,dt{margin:0 0 2rem;font-size:1.2rem;line-height:1.6;font-weight:ver(--font-weight-normal)}h1,h2,h3{margin:0 0 2rem;line-height:1.2;font-weight:var(--font-weight-bold)}h1:has(+ h2),h2:has(+ h3){margin-bottom:.2rem}h1{font-size:2rem}h2{font-size:1.25rem}h3{font-size:1.5rem}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}:root{--col-bg: #142e38;--col-clothes: #d8d8d8;--col-fabric-shadow: #c8c8c8;--col-sleeve: #b7b7b7;--col-body: #f4f4f4;--col-text: #142e38;--col-outline: #333;--col-highlight: goldenrod;--figure-width: clamp(350px, 80vw, 800px);--head-radius: calc(var(--figure-width) * .3);--head-width: calc(var(--head-radius) * 2);--figure-center: calc(var(--figure-width) * .5);--badge-half-width: calc(var(--badge-width) * .5);--offset-y: calc(var(--head-radius) * 0);--offset-x: calc(var(--head-radius) * -.95);--figure-height: calc((100vh) + calc(var(--offset-y) * -1));--figure-height: 100vh;--border-thin: .25rem solid var(--col-outline);--border-thick: .5rem solid var(--col-outline);--torso-top: calc(var(--head-radius) * 1.55);--arm-top: calc(var(--head-radius) * .9);--sleeve-size: calc(var(--head-radius) * .7);--badge-top: calc(var(--head-radius) * .7);--badge-left: calc(49% - var(--badge-half-width));--badge-width: calc(var(--figure-width) * .29);--badge-text-size: calc(var(--figure-width) * .035)}@media (max-width: 850px){:root{--figure-width: 70vw;--offset-y: 60vh;--sleeve-size: 10px;--badge-text-size: calc(var(--figure-width) * .025)}}@media (min-width: 851px){:root{--offset-x: calc(var(--head-radius) * -1.19);--table-pos-y: calc(var(--figure-width) + calc(var(--offset-x) * .8))}}@media (min-width: 1200px){:root{--offset-x: calc(var(--head-radius) * -1)}}body.dark{--col-bg: #142e38;--col-clothes: #d8d8d8;--col-fabric-shadow: #c8c8c8;--col-sleeve: #b7b7b7;--col-body: #f4f4f4;--col-text: #142e38;--col-outline: #333;--col-highlight: goldenrod}body.light{--col-bg: #fefefe;--col-clothes: #b7b7b7;--col-fabric-shadow: #b7b7b7;--col-sleeve: #c8c8c8;--col-body: #f4f4f4;--col-text: #142e38;--col-outline: #777;--col-highlight: teal}body{width:100%;height:100vh;background:var(--col-bg)}main{display:flex;min-height:100vh;align-items:center;justify-content:center}figure{position:fixed;overflow:hidden;width:var(--figure-width);height:var(--figure-height);top:var(--offset-y);left:var(--offset-x);bottom:0;--screen-blend-mode: soft-light;--screen-color: var(--col-bg);opacity:.4}@media (max-width: 850px){figure{opacity:.1;z-index:-1;bottom:0}}figure:before{content:"";display:block;position:absolute;aspect-ratio:1/1;z-index:10;border-radius:100%;width:var(--head-width);left:calc(var(--figure-center) - var(--head-radius));border:var(--border-thick);background:var(--col-body)}figure section{position:absolute;width:var(--figure-width);height:100%;top:var(--torso-top);border-radius:5rem;background-color:var(--col-clothes);border:var(--border-thick)}figure section:after{border:var(--border-thin);border-top:none;border-right:none;content:"";display:block;position:absolute;width:calc(var(--head-radius) * 1.1);height:100vh;top:var(--arm-top);right:0;box-shadow:-5px 10px 10px #0000001a;background-image:linear-gradient(var(--col-clothes),var(--col-clothes) var(--sleeve-size),var(--col-body) var(--sleeve-size))}figure section:before{content:"";display:block;position:fixed;left:0;right:0;top:calc(var(--table-pos-y, 100vh) * 1);bottom:0;filter:drop-shadow(5px 5px 25px rgba(0,0,0,.4)) opacity(.98);mix-blend-mode:var(--screen-blend-mode);background-image:linear-gradient(-181deg,rgba(0,0,0,0),rgba(0,0,0,0) 20%,var(--col-fabric-shadow) calc(20% + 1px),var(--col-fabric-shadow) calc(20% + 4px),var(--col-bg) calc(20% + 4px))}figure header{position:absolute;display:inline;width:var(--badge-width);top:var(--badge-top);left:var(--badge-left);transform:rotate(-5deg);overflow:hidden;text-transform:uppercase;border:var(--border-thin);border-radius:1rem}figure header h1,figure header h2{background:var(--col-body);margin:0;font-size:var(--badge-text-size);padding:1.4rem 1rem 0}figure header h2{font-size:calc(var(--badge-text-size) * .75);padding-top:0;padding-bottom:1.4rem}figure:after{content:"";display:block;position:fixed;left:0;right:0;top:calc(var(--table-pos-y, 100vh) * 1.3);bottom:0;filter:drop-shadow(5px 5px 25px rgba(0,0,0,.4)) opacity(.98);mix-blend-mode:var(--screen-blend-mode);background-image:linear-gradient(-181deg,rgba(0,0,0,0),rgba(0,0,0,0) 20%,var(--col-fabric-shadow) calc(20% + 1px),var(--col-fabric-shadow) calc(20% + 4px),var(--col-bg) calc(20% + 4px))}article{position:relative;padding:2rem;color:var(--col-body)}article form,article section{max-width:60ch}form{margin:0;padding:0;border:none;margin-top:4rem;border-top:1px dotted var(--col-sleeve);padding-top:2rem;display:flex;flex-direction:column}form>*:not(h2){display:block;width:100%;margin:0;font:inherit}form label,form button{font-size:small;text-transform:uppercase}form input,form textarea,form button{padding:.5rem .75rem;border-radius:7px;margin:.5rem 0 1rem}form input:focus-visible,form textarea:focus-visible,form button:focus-visible{outline:var(--col-highlight) 2px solid;border-color:var(--col-highlight)}form textarea{height:8em}form button[type=submit]{align-self:flex-end;margin-bottom:0;font-weight:var(--font-weight-bold)}form button[type=submit]{width:12ch;padding:1rem}@media (min-width: 851px){main{justify-content:flex-start}article{padding-left:clamp(300px,55%,800px);padding-right:4rem}}@media (min-width: 2000px){article{display:flex;width:auto;gap:2rem}form,section{width:60ch}form{margin:0;padding:0;border:none;margin-left:2rem;border-left:1px dotted var(--col-sleeve);padding-left:3rem;justify-content:center}}