.header{width:100%;padding:var(--gutter);position:relative;z-index:999;opacity:0;font-size:var(--font-size-md);text-transform:uppercase}.header__menu-bar{width:100%;display:flex;align-items:center;justify-content:space-between;z-index:99999}.header__menu-bar button{border:0;width:50px;height:50px;background:none;color:var(--green);font-size:var(--font-size-lg);text-align:center}.header.show{opacity:1}@media (max-width: 800px){.header{flex-direction:column;align-items:start}}.header a{color:currentColor;font-size:inherit;text-decoration:none}.header a:hover{text-decoration:underline}.header__logo{font-weight:500}.header__menu{text-align:right}.header__menu .active{text-decoration:underline}.header.open{position:fixed;background:var(--background);height:100vh;overflow-y:scroll}.header.open .header__container{padding-top:50px;max-width:100%;width:100%;left:0;top:100px;opacity:0;animation:menu-fade .5s ease forwards}@keyframes menu-fade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.home-content{padding:var(--gutter);height:calc(100vh - 100px);max-width:850px;display:grid;place-content:end}.home-content h1{font-size:var(--font-size-xxl);text-transform:uppercase}.home-content h2{font-size:var(--font-size-lg);text-transform:uppercase}.home-content .illustration svg{position:fixed;color:var(--green);right:-400px;bottom:-200px;z-index:-1;width:900px;height:700px}@media (min-width: 800px){.home-content .illustration svg{right:-200px;bottom:-200px;width:1200px;height:1000px}}@media (max-width: 1300px){.illustrations{display:none}}.flower1{position:fixed;bottom:2%;left:-8%;width:450px;will-change:transform,opacity;opacity:0}.finished .flower1{animation:flower1 .9s ease 0s forwards}@keyframes flower1{0%{opacity:0;transform:scale(.8) translateY(100px) translate(-100px) rotate(38deg)}to{opacity:.2;transform:scale(1) translateY(0) translate(0) rotate(38deg)}}.flower2{position:fixed;bottom:-15%;left:4%;width:350px;opacity:.2;will-change:transform,opacity;opacity:0}.finished .flower2{animation:flower2 .9s ease .4s forwards}@keyframes flower2{0%{opacity:0;transform:scale(.9) translateY(100px) translate(-100px) rotate(22deg)}to{opacity:.2;transform:scale(1) translateY(0) translate(0) rotate(22deg)}}.flower6{position:fixed;bottom:-9%;right:11%;width:247px;will-change:transform,opacity;opacity:0}.finished .flower6{animation:flower6 .9s ease .8s forwards}@keyframes flower6{0%{opacity:0;transform:scale(.9) translateY(100px) translate(100px) rotate(351deg)}to{opacity:.25;transform:scale(1) translateY(0) translate(0) rotate(351deg)}}.flower7{position:fixed;bottom:-4%;right:-3%;width:274px;will-change:transform,opacity;opacity:0}.finished .flower7{animation:flower7 .9s ease .3s forwards}@keyframes flower7{0%{opacity:0;transform:scale(.9) translateY(100px) translate(100px) rotate(0)}to{opacity:.25;transform:scale(1) translateY(0) translate(0) rotate(0)}}.butterfly{position:fixed;bottom:10%;left:26%;width:274px;will-change:transform,opacity;opacity:0}.finished .butterfly{animation:butterfly .9s ease .8s forwards}@keyframes butterfly{0%{opacity:0;transform:scale(.9) translateY(100px) translate(-100px) rotate(0)}to{opacity:.2;transform:scale(1) translateY(0) translate(0) rotate(0)}}.home-content h1{display:flex;flex-wrap:wrap;column-gap:10px}@media (min-width: 800px){.home-content h1{display:flex;flex-wrap:wrap;column-gap:24px}}.home-content h1 span:nth-child(1){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease .5s forwards}.home-content h1 span:nth-child(2){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease .6s forwards}.home-content h1 span:nth-child(3){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease .7s forwards}.home-content h1 span:nth-child(4){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease .8s forwards}.home-content h1 span:nth-child(5){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease .9s forwards}.home-content h1 span:nth-child(6){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease 1s forwards}.home-content h1 span:nth-child(7){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease 1.1s forwards}.home-content h1 span:nth-child(8){opacity:0;display:inline-block;will-change:transform,opacity;animation:text .5s ease 1.2s forwards}@keyframes text{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}:root{--gutter: 28px;--green: #007938;--green-light: #009746;--background: #fff;--font-size-sm: clamp(.8rem, .17vw + .76rem, .89rem);--font-size-base: clamp(1rem, .34vw + .91rem, 1.19rem);--font-size-md: clamp(1.25rem, .61vw + 1.1rem, 1.58rem);--font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);--font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);--font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);--font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem)}@media (min-width: 800px){:root{--gutter: 58px}}body{background:var(--background);color:var(--green);font-size:var(--font-size-base);margin:0;padding:0;font-family:Satoshi-Variable,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}a{color:currentColor;text-decoration:none}a:hover{text-decoration:underline}.button{border:0;background:var(--green);color:var(--background);padding:15px 20px;font-size:inherit;font-family:inherit;font-weight:600;margin-top:50px;cursor:pointer;display:inline-block;text-align:center}.button:hover{background:var(--green-light)}.button[disabled]{opacity:.5;cursor:default;background:var(--green)}.container{padding:var(--gutter);margin:0 auto}.page-menu{margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:50px;font-size:var(--font-size-xl);list-style:inside decimal-leading-zero}@media (min-width: 800px){.page-menu{font-size:var(--font-size-xxl)}}.page-menu-item{display:block;vertical-align:text-top;position:absolute;text-decoration:none;left:70px;top:0}.page-menu li{margin-bottom:30px;position:relative}.page-menu h2{margin:0;font-weight:400;color:currentColor;text-decoration:none;font-size:var(--font-size-xl)}.page-menu a:hover{text-decoration:underline}.page-menu p{margin-top:0;color:currentColor;text-decoration:none;font-size:var(--font-size-base)}@media (min-width: 800px){.page-menu-item{left:150px}.page-menu-item h2{font-size:var(--font-size-xxl)}.page-menu-item p{font-size:var(--font-size-lg)}}.main-heading{font-size:var(--font-size-xxl);text-transform:uppercase;font-weight:400;text-align:center}.h2{font-size:var(--font-size-xl);text-transform:uppercase;font-weight:400;text-align:center}.subtitle{font-size:var(--font-size-md);font-weight:400;text-align:center;margin-bottom:60px}.main-image{width:100%;aspect-ratio:16 / 9;margin:0 auto;display:block;object-fit:cover}.article{width:100%;max-width:800px;display:block;margin:0 auto}/** * @license * * Font Family: Satoshi * Designed by: Deni Anggara * URL: https://www.fontshare.com/fonts/satoshi * © 2022 Indian Type Foundry * * Font Styles: * Satoshi Variable(Variable font) * Satoshi Variable Italic(Variable font) * Satoshi Light * Satoshi Light Italic * Satoshi Regular * Satoshi Italic * Satoshi Medium * Satoshi Medium Italic * Satoshi Bold * Satoshi Bold Italic * Satoshi Black * Satoshi Black Italic * */@font-face{font-family:Satoshi-Variable;src:url(Satoshi-Variable.e739aff9.woff2) format("woff2"),url(Satoshi-Variable.9cdbec9e.woff) format("woff"),url(Satoshi-Variable.02ad1319.ttf) format("truetype");font-weight:300 900;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-VariableItalic;src:url(Satoshi-VariableItalic.e7b4e0ec.woff2) format("woff2"),url(Satoshi-VariableItalic.787e19b1.woff) format("woff"),url(Satoshi-VariableItalic.cfe8f600.ttf) format("truetype");font-weight:300 900;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Light;src:url(Satoshi-Light.8a24f395.woff2) format("woff2"),url(Satoshi-Light.dd42e743.woff) format("woff"),url(Satoshi-Light.b54cf060.ttf) format("truetype");font-weight:300;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-LightItalic;src:url(Satoshi-LightItalic.9690a557.woff2) format("woff2"),url(Satoshi-LightItalic.2f9c5264.woff) format("woff"),url(Satoshi-LightItalic.c9a8d027.ttf) format("truetype");font-weight:300;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Regular;src:url(Satoshi-Regular.50dca57f.woff2) format("woff2"),url(Satoshi-Regular.9fbc41c9.woff) format("woff"),url(Satoshi-Regular.243b23f6.ttf) format("truetype");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(Satoshi-Italic.dbcb8c32.woff2) format("woff2"),url(Satoshi-Italic.a6df1710.woff) format("woff"),url(Satoshi-Italic.14c3d259.ttf) format("truetype");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Medium;src:url(Satoshi-Medium.af02a722.woff2) format("woff2"),url(Satoshi-Medium.7aeaf037.woff) format("woff"),url(Satoshi-Medium.7130cef6.ttf) format("truetype");font-weight:500;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-MediumItalic;src:url(Satoshi-MediumItalic.beb15382.woff2) format("woff2"),url(Satoshi-MediumItalic.cf98a3ed.woff) format("woff"),url(Satoshi-MediumItalic.71f8dce5.ttf) format("truetype");font-weight:500;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(Satoshi-Bold.353a7fbf.woff2) format("woff2"),url(Satoshi-Bold.1789917c.woff) format("woff"),url(Satoshi-Bold.2c122eab.ttf) format("truetype");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-BoldItalic;src:url(Satoshi-BoldItalic.52bfd9e8.woff2) format("woff2"),url(Satoshi-BoldItalic.5d73878e.woff) format("woff"),url(Satoshi-BoldItalic.8ff85a17.ttf) format("truetype");font-weight:700;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Black;src:url(Satoshi-Black.bd11b582.woff2) format("woff2"),url(Satoshi-Black.a849a7b7.woff) format("woff"),url(Satoshi-Black.78edaca6.ttf) format("truetype");font-weight:900;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-BlackItalic;src:url(Satoshi-BlackItalic.83d61d67.woff2) format("woff2"),url(Satoshi-BlackItalic.cf5edac8.woff) format("woff"),url(Satoshi-BlackItalic.d3d6c8d6.ttf) format("truetype");font-weight:900;font-display:swap;font-style:italic}svg *{transition:all 1s ease}.person-grid{display:grid;text-align:center;grid-template-columns:1fr 1fr 1fr 1fr;gap:50px}.step-container{text-align:center;margin-top:80px;margin-bottom:80px}.step-buttons{display:flex;align-items:center;justify-content:center;gap:10px}#Land,#Text{opacity:1}#PlatformOne,#PlatformTwo,#PlatformThree{opacity:0;transform:translateY(-100px)}.step1 #Platform1,.step1 #Platform2,.step1 #Platform3,.step1 #PlatformOne,.step1 #PlatformTwo,.step1 #PlatformThree,.step1 #Human,.step2 #Circulation,.step3 #Core,.step3 #Human_Above_Core{opacity:1;transform:translateY(0)}.step3 #Circulation,.step3 #Text{opacity:0!important}.step4 #Core_boundary,.step5 #Frame{opacity:1;transform:translateY(0)}.step5 #Core_boundary{opacity:0}.step6 #Mesh,.step6 #Toprail,.step6 #Mesh_boundary,.step6 #Human_Above_Mesh{opacity:1;transform:translateY(0)}.step6 #Frame,.step6 #Mesh_boundary{stroke-width:.5}.step7 #Vines{opacity:1;transform:translateY(0)}#Circulation,#Platform3,#Platform2,#Platform1,#Core,#Human,#Core_boundary,#Human_Above_Core,#Human_Belowmesh,#Human_Above_Mesh,#Toprail,#Mesh_boundary,#Mesh{opacity:0;transform:translateY(-100px)}#Trunk{opacity:1}#Quercus_llex,#Genus_Ulmus,#Quercus_Pubescens{opacity:.3}#Vines{opacity:0;transform:translateY(100px)}#Frame,#Mesh{opacity:0;transform:translateY(-100px)}.camera-container{aspect-ratio:4 / 3;width:100%;max-width:1200px;margin:0 auto;border-radius:50px;padding:5px;position:relative;box-shadow:inset 0 0 0 10px var(--green)}.camera-container video{width:100%;border-radius:50px;overflow:hidden}.camera-container button{position:absolute;font-size:var(--font-size-xl);top:50%;left:50%;z-index:999;background:var(--green);border:0;outline:0;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;color:#fff;transform:translate(-50%) translateY(-50%)}.spectogram{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:-1}.observations .grid{display:grid;gap:42px;grid-template-columns:1fr 1fr}@media (min-width: 800px){.observations .grid{grid-template-columns:1fr 1fr 1fr 1fr}}.observations .observation__photo{aspect-ratio:1 / 1;width:100%;object-fit:cover}.observation{width:100%;position:relative}.observations .observation__taxon{font-size:var(--font-size-sm);text-transform:uppercase;margin:0 0 4px}.observation__info{padding:8px}.observation__title{font-size:var(--font-size-md);text-transform:capitalize;font-weight:600;margin:0 0 8px}.observation__count{background:rgb(2 120 56 / 41%);display:block;width:100%;position:absolute;bottom:0;padding:8px;font-size:var(--font-size-base);font-weight:600;margin:0 0 8px;color:#fff}.observation__photo-container{position:relative}.observation__user{font-size:var(--font-size-sm);margin:0 0 16px}.observations .info{display:flex;flex-direction:column;align-items:start;justify-content:center}.observations .info__number{margin:0;padding:0;font-size:var(--font-size-xxl)}.observations .info-grid{display:flex;justify-content:center;gap:40px;margin-bottom:70px}.observations .info__desc{margin:0;padding:0;font-size:var(--font-size-md)}.observations .load-more{border:0;background:var(--green);color:var(--background);padding:15px 20px;font-size:inherit;font-family:inherit;font-weight:600;margin:80px auto 0;display:block;cursor:pointer}.observations .select{padding:20px 10px;min-width:250px;color:var(--green);font-weight:600;font-size:inherit;font-family:inherit;margin:0 auto 30px;display:block;border:2px solid var(--green);appearance:none;position:relative;background-position:calc(100% - 12px) center!important;background:url("data:image/svg+xml,") no-repeat}.observations .select:focus{outline:1px solid var(--green)}.click-to-start{position:fixed;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}