.hero, footer {
  --hbr: 72px;
  --fw: 500;
}

.bg2 {
  background: var(--pc3);
}

.dk {
  --db: var(--dk8);
  --nbb: var(--dk8);
  --nbbx: var(--dk);
}
.dk #header.scrd:not(.p-a) {
  --tx: var(--body-c);
  --db: var(--pc1);
  --nbb: var(--pc2);
  background: var(--pc1);
}

.ldk {
  --tx: var(--dwhite);
  background: var(--dk9);
}

.section.fir, .hero {
  --pt: var(--thh);
}

.hero {
  --sb: 20px;
  --herow: calc( 100% - var(--heropic) - var(--sb));
  --heropic: 440px;
  --py: 0px;
  --bbr: var(--hbr);
  transition: all 0.2s ease;
}
.hero:not(.dk) {
  background: var(--pc3);
}
.hero #header {
  background: inherit;
}
.hero section {
  --my: auto;
  --pb: var(--gut);
}
.hero .sec-head {
  width: 80%;
}
.hero .sec-head h2 {
  --f: var(--f80);
}
.hero .sec-head p {
  --f: var(--f22);
  font-style: oblique;
}
.hero .sec-head + .stats-st {
  --my: -20px;
}
.hero img.bg {
  --sz: auto;
  --brbr: var(--hbr);
  inset: 0;
  left: auto;
  height: 100%;
  z-index: -1;
}
.hero .herod {
  width: var(--herow) !important;
}
.hero .herod .head {
  --mb: 36px;
  text-transform: uppercase;
}
.hero .herod .head span {
  --f: var(--f18);
  --fw: 600;
  --px: 5px;
  border-left: 2px solid var(--pc7);
}
.hero .herod .head span.n1, .hero .herod .head span.shake {
  --pl: 0px;
  border: none;
}
.hero .herod .head span.shake {
  --pl: 2px;
  color: var(--ora);
}
.hero .herod p {
  --mt: 16px;
  --mb: 20px;
}
.hero .herod .btns a {
  --m: 8px;
  --ml: 8px !important;
}
.hero .herodpic {
  width: var(--heropic) !important;
}
.hero .herodpic svg {
  --sz: 40px;
  --pos: 20px;
  position: absolute;
}
.hero .herodpic svg[chem] {
  top: var(--pos);
  left: var(--pos);
}
.hero .herodpic svg[grahat] {
  top: var(--pos);
  right: var(--pos);
}
.hero .herodpic svg[micro] {
  right: var(--pos);
  bottom: var(--pos);
}
.hero .herodpic img {
  --sz: calc(var(--heropic) * 0.9);
  --br: 50%;
  --bw: 5px;
  --bc: var(--pc5);
  background: var(--whi);
}
.hero .herodpic span {
  left: 2px;
  z-index: 1;
  bottom: 2px;
  background: transparent;
}
.hero .herodpic span img {
  --sz: calc(var(--heropic) * 0.9 / 4);
}
.hero .pitch {
  --mt: 24px;
  --mx: auto;
  --sz: 60px;
  --pad: 60px;
  --item-s: calc(var(--sz) + var(--pad));
  --w: 152px;
}
.hero .pitch div {
  --mx: 15px;
  transition: all 1.5s;
  position: relative;
  top: 0;
  width: var(--w);
}
.hero .pitch:not(.repo) div:nth-child(1) {
  --mr: calc(var(--w) * -0.6);
}
.hero .pitch:not(.repo) div:nth-child(3) {
  --ml: calc(var(--w) * -0.6);
}
.hero .pitch span {
  --bw: 6px;
  --bc: var(--pc3);
  --br: 50%;
  --mx: auto;
  width: var(--item-s);
  height: var(--item-s);
}
.hero .pitch p {
  --mt: 16px;
  --f: var(--f18);
  --lh: 1.2;
  text-align: center;
}

.th {
  --th-h: 40px;
  --w: 400px;
  width: var(--w);
  right: calc(var(--w) * -1);
  top: 0;
  bottom: 0;
  background: var(--pc2);
  z-index: 9;
  transition: right 0.3s ease-in-out;
}
.th.op {
  right: 0;
}
.th .tog,
.th .tog:hover {
  --gun: calc(((var(--gut) - 3px) / 3.8) + 3px);
  --gun: calc(var(--gut) / 4);
  --sz: var(--gun);
  --px: 0px;
  --py: 12px;
  --py: 0px;
  --tx: var(--whi);
  --blr: 6px;
  background: var(--pc);
  top: 50%;
  left: calc(var(--gun) * -1.9);
  width: calc(var(--gun) * 1.9) !important;
  height: calc(var(--gun) * 2.5) !important;
  display: block;
  justify-content: center;
  align-content: center;
}
.th .cus span {
  --pl: 8px;
}
.th p, .th h4 {
  --mb: 0px;
}
.th .body {
  height: calc(100% - var(--th-h));
  overflow-y: auto;
}
.th label {
  --px: 14px;
  --px: 10px;
  --mb: 12px;
}

@media screen and (max-width: 1599px) {
  :root {
    --maxw: 100%;
  }
}
@media (min-width: 999px) and (max-width: 1079px) {
  .hero .head span.pri {
    max-width: 104px;
  }
}
@media screen and (max-width: 999px) {
  .hero {
    --herow: 100%;
    --heropic: 360px;
  }
  .hero .herodpic {
    --mx: auto;
    --mt: calc(var(--gut) * 0.67);
  }
}
@media screen and (max-width: 899px) {
  .hero {
    --heropic: 440px;
  }
  .hero .pitch {
    --sz: 40px;
    --pad: 50px;
    display: block;
  }
  .hero .pitch div {
    --mx: 0px;
  }
  .hero .pitch:not(.repo) div:nth-child(1) {
    --mr: 0px;
    top: calc(var(--w) * 0.6);
  }
  .hero .pitch:not(.repo) div:nth-child(3) {
    --ml: 0px;
    top: calc(var(--w) * -0.6);
  }
  .hero .pitch span {
    --bw: 4px;
  }
  .hero .pitch p {
    --mt: 12px;
    --f: var(--f17);
  }
}
@media screen and (max-width: 700px) {
  .hero .pitch {
    width: 100%;
    display: flex;
    justify-content: center;
    --mt: calc(var(--gut) * 0.67);
    --sz: 60px;
    --pad: 60px;
    --mx: 0px;
  }
  .hero .pitch div {
    --mx: 15px;
  }
  .hero .pitch:not(.repo) div:nth-child(1) {
    --mr: calc(var(--w) * -0.6);
    top: 0;
  }
  .hero .pitch:not(.repo) div:nth-child(3) {
    --ml: calc(var(--w) * -0.6);
    top: 0;
  }
}
@media screen and (max-width: 629px) {
  .hero .head span.pri {
    max-width: 104px;
  }
  .hero .herod h2 {
    --f: var(--f42);
  }
  .hero .pitch {
    --w: 110px;
  }
}
@media screen and (max-width: 519px) {
  .hero {
    --heropic: 400px;
  }
  .hero .herod .head span {
    --f: var(--fs);
  }
  .hero .herod .head span.pri {
    max-width: 93px;
  }
  .hero .herod h2 {
    --f: var(--f32);
  }
  .hero .pitch {
    --w: 100px;
    --sz: 50px;
    --pad: 50px;
  }
}
@media screen and (max-width: 469px) {
  :root {
    --input-h: 32px;
  }
  .hero {
    --heropic: 360px;
  }
  .hero .herod .head span.pri {
    --lh: 57px;
    max-width: 180px;
    border-left-width: 3px;
  }
  .hero .herod .head div:nth-child(1) {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
  }
  .hero .herod .head div:nth-child(1) span {
    --pl: 0px;
    border: none;
  }
  .hero .pitch {
    --w: 80px;
    --sz: 40px;
    --pad: 40px;
  }
}
@media screen and (max-width: 430px) {
  .hero .herod .head span.pri {
    --f: var(--f22);
    --py: 6px;
    --lh: 24px;
    --pl: 7px;
    max-width: 130px;
  }
}
@media screen and (max-width: 409px) {
  .hero {
    --heropic: 320px;
  }
  .hero .herod h2 {
    --f: var(--f30);
  }
  .hero .herodpic svg {
    --pos: 8px;
  }
}
@media screen and (max-width: 389px) {
  .hero {
    --heropic: 290px;
  }
  .hero .herod .head span {
    --lh: 20px;
    --pr: 7px;
  }
  .hero .herod .head span.pri {
    --f: var(--f20);
  }
  .hero .herodpic svg {
    --pos: 0px;
  }
}
@media screen and (max-width: 359px) {
  .hero .herod .head span {
    --f: var(--f15);
    --lh: 18px;
    --pr: 5px;
  }
  .hero .herod .head span.pri {
    --f: var(--f18);
    --lh: 20px;
    --pl: 5px;
    max-width: 110px;
  }
  .hero .herod .head span.shake {
    --f: var(--fs);
  }
}
@media screen and (max-width: 349px) {
  .hero {
    --heropic: 280px;
  }
  .hero .pitch {
    --pad: 24px;
  }
  .hero .pitch.repo div + div {
    --ml: 12px;
  }
  .hero .pitch p {
    --f: var(--fs);
  }
}
@media screen and (max-width: 339px) {
  .hero .herod .head span.pri {
    --f: var(--f16);
    max-width: 96px;
  }
}
#header {
  --nh: auto;
  --hwr: 46px;
  --bw: var(--hbw);
  --bc: var(--dwhite);
  --bc: var(--hbc);
  --sz: 20px;
  --pt: calc(((var(--hh) - var(--hwr)) / 2) - var(--bw));
  --br: var(--nbr);
  z-index: 8;
  height: calc(var(--hh) + var(--ahh)) !important;
  width: 100%;
  transition: height var(--ss) ease, max-width var(--ss) ease;
  top: var(--tm);
  position: fixed;
  background: var(--bg);
  text-align: end;
  display: flex;
  justify-content: flex-end;
}
#header.p-a {
  position: absolute;
}
#header.scrd:not(.p-a) {
  --bc: transparent;
  --nbbx: var(--pc1);
  box-shadow: var(--sha);
}
#header.scrd:not(.p-a) + .glassy {
  --nbbx: var(--pc1);
}
#header.scrd:not(.p-a) .navitems a {
  --bc: var(--pc2);
}
#header.nc2 {
  background: var(--gre);
}
#header.nc3 {
  background: var(--red);
}
#header.nc4 {
  background: var(--pin);
}
#header .wr {
  --mx: auto;
  height: var(--hwr) !important;
  width: calc(100% - var(--adjX) * 2);
  background: inherit;
  max-width: calc(var(--maxw) - var(--hpx) * 2);
}
#header a {
  --f: var(--f15);
  --py: 0px;
  --lh: 38px;
  z-index: 1;
}
#header a#user {
  --mr: 0px;
  --ml: 8px;
  --px: 0px;
  --py: 0px;
  --av: 2px;
}
#header a#user .u_p::after {
  background: var(--suc);
  content: "";
  bottom: var(--av);
  right: var(--av);
  width: calc(var(--av) + 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--av) var(--whi8);
}
#header a#user + .ul {
  right: 0px;
}
#header a * {
  --lh: inherit;
}
#header a span {
  --f: var(--f15);
}
#header a span + svg {
  --ml: 6px;
}
#header a.logo {
  --f: var(--f20);
  --fw: 700;
  --pl: 0px;
  --pr: 0px;
}
#header a svg + span {
  --ml: 6px;
}
#header a.liv {
  --tx: var(--pc);
}
#header .user a svg + span + svg {
  display: none;
}

.hm {
  --br: 8px;
  --ps: 12px;
  --ps: 0px;
  --sh: 3px;
  --w2: calc(var(--sh) * 6.5);
  --w: calc(var(--w2) + (var(--ps) * 2));
  --h: calc((var(--sh) * 3) + ((var(--ps) + var(--mys)) * 2));
  --mys: calc(var(--sh) * 1.25);
  background: var(--whi);
  background: var(--pct1);
  min-width: var(--w) !important;
  width: var(--w) !important;
  max-width: var(--w) !important;
  min-height: var(--h) !important;
  height: var(--h) !important;
  max-height: var(--h) !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hm.op small:nth-child(1) {
  transform: rotate(-45deg);
}
.hm.op small:nth-child(2) {
  display: none;
}
.hm.op small:nth-child(3) {
  transform: rotate(45deg);
}
.hm:not(.op) small:nth-child(2) {
  --my: var(--mys);
}
.hm small {
  min-height: var(--sh) !important;
  height: var(--sh) !important;
  max-height: var(--sh) !important;
  width: var(--w2) !important;
  background: var(--pc);
  border-radius: var(--sh);
  transition: transform 0.2s;
}

.hmss {
  --br: 4px;
  --ps: 10px;
  --sh: 4px;
  --t: calc(var(--sh) * 3);
  --t2: calc(var(--sh) * -3);
  --w2: calc(var(--t) * 4);
  --w: calc(var(--w2) + (var(--ps) * 2));
  background: var(--whi);
  background: var(--pct1);
  min-width: var(--w) !important;
  width: var(--w) !important;
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmss.op small:nth-child(1) {
  transform: rotate(-45deg);
}
.hmss.op small:nth-child(2) {
  display: none;
}
.hmss.op small:nth-child(3) {
  transform: rotate(45deg);
}
.hmss:not(.op) small:nth-child(1) {
  top: var(--ps);
  background: blue;
  left: 0;
}
.hmss:not(.op) small:nth-child(3) {
  bottom: var(--ps);
  background: green;
  right: 0;
}
.hmss small {
  border: 0;
  padding: 0;
  position: absolute;
  height: var(--sh) !important;
  min-height: var(--sh) !important;
  width: var(--w2) !important;
  max-height: var(--sh) !important;
  background: var(--pc);
  border-radius: var(--sh);
  transition: transform 0.2s;
}

.hmk {
  --sh: 2.8px;
  --t: calc(var(--sh) * 3);
  background: inherit;
  width: calc(var(--t) * 3) !important;
}
.hmk span,
.hmk span::after,
.hmk span::before {
  height: var(--sh) !important;
  width: 100%;
  background: var(--pc);
  border-radius: var(--sh);
}
.hmk span::after,
.hmk span::before {
  content: "";
  transition: transform 0.2s;
  top: var(--t);
}
.hmk span::before {
  top: calc(var(--t) * -1);
}

.mob-menu {
  --ml: 16px;
  --top: 10px;
  width: calc(var(--top) * 3);
}
.mob-menu span,
.mob-menu span::after,
.mob-menu span::before {
  height: 3px;
  width: 100%;
  background: var(--pc);
}
.mob-menu span::after,
.mob-menu span::before {
  content: "";
  transition: transform 0.2s;
  top: var(--top);
  left: 0;
}
.mob-menu span::before {
  top: calc(var(--top) * -1);
}

.m-o .mob-menu span {
  background: none;
}
.m-o .mob-menu span::after, .m-o .mob-menu span::before {
  --rot: 45deg;
  top: 0;
  transform: rotate(var(--rot));
}
.m-o .mob-menu span::before {
  --rot: -45deg;
}

.glassy {
  z-index: 7;
  backdrop-filter: saturate(100%) blur(6px);
  height: calc(var(--thh) - var(--gut));
  width: 100%;
  transition: all var(--ss) ease;
  top: 0;
}

html:not(.fl) #header.scrd:not(.p-a) .n15 {
  --bc: transparent;
  background: var(--pc3);
}
html:not(.fl) #header .n15 {
  --br: 8px;
  --bw: 2px;
  --bc: var(--whi6);
  --ml: 16px;
}
html.fl #header {
  right: calc(var(--adjX) + var(--gutX));
  max-width: calc(var(--maxw) - var(--gut));
}
html.fl #header .n15 {
  --pr: 0px;
}
html.fl #header:not(.p-a) + .glassy {
  display: block;
}
html.fl #header .wr {
  --mr: 0px;
  width: 100%;
}

@media screen and (max-width: 1610px) {
  #header .n8d {
    display: flex;
  }
  #header .n8 {
    display: none;
  }
}
@media screen and (max-width: 1490px) {
  #header .n7d {
    display: flex;
  }
  #header .n7 {
    display: none;
  }
}
@media screen and (max-width: 1420px) {
  #header .n6d {
    display: flex;
  }
  #header .n6 {
    display: none;
  }
}
@media screen and (max-width: 1320px) {
  #header .n5d {
    display: flex;
  }
  #header .n5 {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  #header .n4d {
    display: flex;
  }
  #header .n4 {
    display: none;
  }
}
@media screen and (max-width: 1100px) {
  #header {
    --nh: calc(var(--hwr) - 4px);
  }
  #header .navitems {
    --px: 12px;
    --br: 8px;
    position: absolute;
    left: calc(var(--hpx) + 2px);
    right: calc(var(--hpx) + 2px);
    bottom: calc((var(--hh) - var(--hwr)) / 2 - var(--hbw) + 2px);
    justify-content: space-between;
    height: var(--nh) !important;
    background: var(--nbb);
    z-index: -1;
  }
  #header .navitems a:not(.ul a) {
    --px: 10px;
  }
  #header .n9, #header .n8, #header .n7, #header .n6, #header .n5, #header .n4 {
    display: flex;
  }
  #header .n9d, #header .n8d, #header .n7d, #header .n6d, #header .n5d, #header .n4d {
    display: none;
  }
  .mob-menu {
    display: flex;
  }
}
@media (min-width: 691px) and (max-width: 1100px) {
  .m-o:root {
    --ahh: 56px;
  }
}
@media screen and (max-width: 1080px) {
  #header .n9d {
    display: flex;
  }
  #header .n9 {
    display: none;
  }
}
@media screen and (max-width: 990px) {
  #header .n8d {
    display: flex;
  }
  #header .n8 {
    display: none;
  }
}
@media screen and (max-width: 880px) {
  #header .n7d {
    display: flex;
  }
  #header .n7 {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  #header .n6d {
    display: flex;
  }
  #header .n6 {
    display: none;
  }
}
@media screen and (max-width: 690px) {
  html.m-o {
    overflow-y: hidden;
  }
  html.m-o:not(.fl) #header {
    --bc: var(--db);
    border-bottom-width: 1px;
  }
  html.m-o #chatBoxx, html.m-o svg.scr-t, html.m-o #bnot, html.m-o #rnot, html.m-o .th-t {
    display: none;
  }
  html.m-o #header {
    --nh: calc(100vh - var(--thh) + var(--gut));
  }
  html.m-o #header.scrd:not(.p-a) {
    --bc: var(--pc3);
    box-shadow: none;
  }
  html.m-o #header .navitems {
    --scbw: 12px;
    overflow-y: auto;
  }
  html.m-o .glassy {
    display: block;
    background: var(--nbbx);
    height: 100vh;
  }
  #header {
    --nh: 0px;
  }
  #header .n15 {
    display: none;
  }
  #header .n16 {
    --mt: 24px;
    --mb: 64px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }
  #header .n16 a {
    --px: 16px;
    --lh: 38px;
    justify-content: center;
  }
  #header .n16 a + a {
    --mt: 16px;
  }
  #header .n8, #header .n7, #header .n6 {
    display: flex;
  }
  #header .n8d, #header .n7d, #header .n6d {
    display: none;
  }
  #header .navitems {
    --br: 0;
    --pr: 4px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    top: calc(100% + var(--hbw) + 1px);
    left: var(--hpx);
    right: 0;
    bottom: auto;
    overflow-y: hidden;
    transition: height var(--ss) ease;
    background: var(--nbbx);
  }
  #header .navitems a {
    --bc: var(--whi2);
    width: 100%;
  }
  #header .navitems a.n1 {
    --mt: 8px;
  }
  #header .navitems a:not(.n16 a) {
    --px: 2px;
    border-bottom: 1px dashed var(--bc);
  }
  #header .navitems .dro {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
  #header .navitems .dro .ul {
    --py: 0px;
    --br: 0;
    position: relative;
    background: inherit;
    top: auto;
    right: auto;
    width: 100%;
    box-shadow: none;
  }
  #header .navitems .dro .ul::after {
    display: none;
  }
  #header .navitems .dro .ul a:hover, #header .navitems .dro .ul:focus, #header .navitems .dro .ul.liv {
    background: none;
  }
}
@media screen and (max-width: 590px) {
  #header .user .dro .ul {
    right: calc(var(--sz) * -0.5);
  }
  #header .user a:not(.ul a) {
    --sz: 30px;
    --bw: 3px;
    --bc: var(--pc8);
    --tx: var(--pc8);
    --px: 0px;
    --br: 50%;
    aspect-ratio: 1;
  }
  #header .user a:not(.ul a):hover {
    --bc: var(--pc);
  }
  #header .user a:not(.ul a) svg {
    display: none;
  }
  #header .user a:not(.ul a) span {
    display: none;
  }
  #header .user a:not(.ul a) span + svg {
    --ml: 0px;
    --p: 3px;
    display: flex;
  }
}
@media screen and (max-width: 440px) {
  #header a.logo img {
    display: none;
  }
}
@media screen and (max-width: 410px) {
  html.fl:root {
    --hpx: 16px;
  }
  #header a.logo {
    --f: var(--f18-5);
  }
  #header .user a:not(.ul a) {
    --sz: 26px;
  }
  .mob-menu {
    --ml: 12px;
    --top: 9px;
  }
}
@media screen and (max-width: 370px) {
  #header .n14 {
    display: none;
  }
  #header .n16 a {
    display: flex;
  }
}
@media screen and (max-width: 330px) {
  #header a.logo {
    --f: var(--f18);
  }
}