@charset "UTF-8";
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Breakpoints
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* html:focus-within {scroll-behavior: smooth;} */
body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

input, button, textarea, select {
  font: inherit;
}

ul[role=list], ol[role=list] {
  list-style: none;
  padding: 0;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture, figure, video, canvas, svg {
  display: block;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.hide {
  display: none !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Typography
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gradient-text {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Layout
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hide {
  display: none !important;
}

#signup {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  min-height: 100dvh;
  height: fit-content;
  width: 100%;
  padding: 2rem 0.2rem 2rem;
  display: flex;
  justify-content: center;
  opacity: 1;
  filter: blur(0rem);
  transform: scale(1);
  transition: all 500ms;
}
@media (max-width: 60rem) {
  #signup {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    align-items: center;
  }
}
#signup div.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#signup div.overlay span {
  width: 5vw;
  height: 5vh;
  background: hsla(0deg, 0%, 10%, 0.4);
  backdrop-filter: blur(0.9rem);
  -webkit-backdrop-filter: blur(0);
  border-radius: 3rem;
  margin-bottom: 5rem;
}
#signup div.modal {
  position: relative;
  width: 100%;
  max-width: 40rem;
  height: fit-content;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 1.8rem 1.8rem 1.8rem 1.8rem;
  color: hsl(201deg, 5%, 24%);
  background: hsl(212deg, 18%, 93%);
  box-shadow: hsl(204deg, 28%, 81%) 0px 0px 1px 1px inset, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  transition: all 180ms;
  opacity: 0;
  filter: blur(2.5rem);
}
#signup div.modal > * {
  z-index: 3;
}
#signup div.modal *::selection {
  background: hsl(242deg, 100%, 63%);
  color: hsl(224deg, 100%, 93%);
  text-fill-color: hsl(224deg, 100%, 93%);
  -webkit-text-fill-color: hsl(224deg, 100%, 93%);
}
#signup div.modal .bg {
  border-radius: inherit;
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
}
#signup div.modal .gradient {
  z-index: 1;
  height: 8rem;
  background: linear-gradient(to bottom, hsl(220deg, 72%, 85%) 0%, hsl(261deg, 75%, 94%) 50%, hsl(216deg, 100%, 98%) 65%, hsl(212deg, 18%, 93%) 100%);
}
#signup div.modal .blur {
  z-index: 2;
  height: 12rem;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
#signup div.modal h1 {
  width: 100%;
  padding: 0.9rem 0.7rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.8rem;
  color: hsl(221deg, 100%, 58%);
  background: linear-gradient(to bottom, hsl(220deg, 100%, 53%) 20%, hsl(277deg, 100%, 84%) 80%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#signup div.modal h1 span {
  font-family: "Source Serif Text";
  font-weight: 300;
  letter-spacing: -0.015em;
}
#signup div.modal input {
  --box-shadow:
  	inset 0 0 0 2px hsla(165, 6%, 13%, 0.09),
  	inset 0 -2px 0 0 hsla(0, 0%, 0%, 0.08),
  	0 2px 5px 0 rgba(154,174,181,0.17);
  --box-shadow-hover: inset 0 0 0 2px hsla(165, 6%, 13%, 0.09),
  	inset 0 -2px 0 0 hsla(0, 0%, 0%, 0.12),
  	0 2px 5px 1px rgba(154,174,181,0.17);
  --box-shadow-focus: inset 0 0 0 2px hsla(207, 100%, 50%, 0.8),
  inset 0 -2px 0 0 hsla(0, 0%, 0%, 0.5),
  0 2px 5px 1px rgba(154,174,181,0.17),
  0 0 0 4px hsla(211, 100%, 60%, 0.3);
  margin: 1rem auto;
  padding: 0.3rem 1.3rem;
  border-radius: 1.5rem;
  height: 4rem;
  flex-shrink: 0;
  width: 23rem;
  border: none;
  font-size: 1.5rem;
  background: linear-gradient(to bottom, hsl(0deg, 0%, 100%), hsl(216deg, 26%, 95%));
  border: none;
  box-shadow: var(--box-shadow);
  -webkit-appearance: none;
  -webkit-box-shadow: var(--box-shadow);
  transition: all ease-in-out 300ms;
}
#signup div.modal input::placeholder {
  color: hsl(0deg, 0%, 49%);
}
#signup div.modal input:hover, #signup div.modal input:focus {
  background: linear-gradient(to bottom, hsl(0deg, 0%, 100%), hsl(216deg, 100%, 99%));
  box-shadow: var(--box-shadow-hover);
  -webkit-box-shadow: var(--box-shadow-hover);
}
#signup div.modal input:hover::placeholder, #signup div.modal input:focus::placeholder {
  color: hsl(0deg, 0%, 40%);
}
#signup div.modal input:focus {
  outline: none;
  box-shadow: var(--box-shadow-focus);
  -webkit-box-shadow: var(--box-shadow-focus);
}
@media (max-width: 60rem) {
  #signup div.modal input {
    width: calc(100% - 2.5rem);
    max-width: 23rem;
  }
}
#signup div.modal > p {
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  color: hsla(0deg, 0%, 0%, 0.7);
}
#signup div.modal > p.subtext {
  background: linear-gradient(to bottom, hsl(216deg, 57%, 57%) 6%, hsl(222deg, 66%, 50%) 32%, hsl(260deg, 70%, 62%) 92%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#signup div.modal > p.email-disclaimer {
  font-size: 0.9rem;
  color: hsla(0deg, 0%, 0%, 0.6);
  padding-top: 0.3rem;
  padding-bottom: 2.5rem;
}
#signup div.modal > p.email-disclaimer span {
  font-weight: 600;
}
#signup div.modal div.options {
  overflow-y: scroll;
}
@media (max-width: 60rem) {
  #signup div.modal div.options div.facilitated p.scheduled, #signup div.modal div.options div.facilitated p.future-sessions {
    display: none;
  }
  #signup div.modal div.options div.community-practice {
    display: none;
  }
}
#signup div.modal div.options > div {
  padding: 2.3rem 1.5rem;
  box-shadow: inset 0 1px 0 0px hsl(212deg, 9%, 81%), inset 0 2px 0 0px hsl(212deg, 2%, 99%);
  text-align: center;
}
@media (max-width: 60rem) {
  #signup div.modal div.options > div {
    padding: 1.5rem 0.8rem;
  }
}
#signup div.modal div.options > div h2 {
  padding-bottom: 0.7rem;
  font-size: 1.6rem;
  letter-spacing: -0.014em;
  color: hsl(212deg, 3%, 18%);
}
#signup div.modal div.options > div p {
  line-height: 1.55;
  padding: 0 1.5rem 0.7rem;
}
@media (max-width: 60rem) {
  #signup div.modal div.options > div p {
    padding: 0 0.4rem 0.9rem;
  }
}
#signup div.modal div.options > div div.donation {
  position: relative;
  width: fit-content;
  margin: auto;
  margin-bottom: 0.8rem;
  border-radius: 10rem;
  overflow: hidden;
}
#signup div.modal div.options > div div.donation p {
  position: relative;
  padding: 0.3rem 0.7rem;
  color: hsla(0deg, 0%, 5%, 0.8);
  font-size: 1rem;
  font-weight: 500;
  z-index: 2;
}
#signup div.modal div.options > div div.donation em {
  opacity: 0.9;
}
#signup div.modal div.options > div div.donation::before, #signup div.modal div.options > div div.donation::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#signup div.modal div.options > div div.donation::after {
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 1.5px hsla(0deg, 0%, 0%, 0.13);
}
#signup div.modal div.options > div div.donation::before {
  z-index: 1;
  background: linear-gradient(114deg, hsl(136deg, 100%, 94%) 5%, hsl(36deg, 100%, 93%) 16%, hsl(271deg, 100%, 92%) 25%, hsl(53deg, 40%, 98%) 50%);
  transition: all 300ms;
  transition-timing-function: ease-out;
}
#signup div.modal div.options > div div.donation:hover::before {
  width: 130%;
}
#signup div.modal div.options > div div.donation:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>❤️</text></svg>") 16 0, auto; /*!emojicursor.app*/
}
#signup div.modal div.options > div p.scheduled {
  font-family: "Inter Var", "Inter V", "Inter";
  font-size: 1.23rem;
  font-weight: 500;
  width: fit-content;
  padding: 0.3rem 0.9rem 0.3rem 0.6rem;
  margin: 0.4rem auto;
  border-radius: 3rem;
  background: hsl(212deg, 12%, 92%);
  color: hsl(231deg, 2%, 20%);
  box-shadow: inset 0 0 0 1px hsla(0deg, 0%, 0%, 0.07), inset 0 -1px hsla(0deg, 0%, 0%, 0.09), inset 0 1px hsla(0deg, 0%, 0%, 0.14);
}
@media (max-width: 60rem) {
  #signup div.modal div.options > div p.scheduled {
    width: 100%;
    border-radius: 1.5rem;
    background: hsl(212deg, 30%, 96%);
    padding: 0.6rem 0.3rem 0.6rem;
    box-shadow: inset 0 0 0 1px hsla(0deg, 0%, 0%, 0.08), inset 0 -1px hsla(0deg, 0%, 0%, 0.07), inset 0 1px hsla(0deg, 0%, 0%, 0.1);
  }
}
#signup div.modal div.options > div p.scheduled .region {
  font-weight: 600;
  color: hsl(221deg, 85%, 43%);
}
@media (max-width: 60rem) {
  #signup div.modal div.options > div p.scheduled .region {
    display: block;
  }
}
#signup div.modal div.options > div p.scheduled .time-detail {
  font-size: 0.85em;
}
#signup div.modal div.options > div p.scheduled a {
  margin-left: 0.7rem;
  padding: 0.2rem 0.7rem;
  border-radius: 3rem;
  color: hsl(221deg, 100%, 60%);
  background: hsl(202deg, 100%, 94%);
}
#signup div.modal div.options > div p.scheduled a:hover {
  color: hsl(221deg, 98%, 47%);
}
#signup div.modal div.options > div p.future-sessions {
  font-size: 1rem;
  color: hsla(0deg, 0%, 0%, 0.6);
}
#signup.show div.overlay span {
  animation: modal-overlay-in forwards 310ms ease-in;
}
@keyframes modal-overlay-in {
  0% {
    width: 5vw;
    height: 5vh;
    background: hsla(0deg, 0%, 10%, 0.4);
    backdrop-filter: blur(0rem);
    -webkit-backdrop-filter: blur(0rem);
    border-radius: 3rem;
    margin-bottom: 5rem;
    filter: blur(1.5rem);
  }
  50% {
    border-radius: 5rem;
    filter: blur(1.4rem);
    margin-bottom: 5rem;
  }
  100% {
    width: 100%;
    height: 100%;
    background: hsla(0deg, 0%, 10%, 0.5);
    backdrop-filter: blur(0.9rem);
    -webkit-backdrop-filter: blur(0.9rem);
    border-radius: 0rem;
    margin-bottom: 0rem;
    filter: blur(0rem);
  }
}
#signup.show div.modal {
  animation: modal-in forwards 260ms 180ms ease-out;
}
@keyframes modal-in {
  0% {
    opacity: 0;
    filter: blur(1.5rem);
    transform: translateY(20%) scale(0.9);
  }
  100% {
    opacity: 1;
    filter: blur(0rem);
    transform: translateY(0) scale(1);
  }
}
#signup.close {
  opacity: 0;
  filter: blur(3rem);
  transform: scale(1.5);
}

#community {
  position: fixed;
  bottom: 0;
  z-index: 30;
  width: 100%;
  height: 100lvh;
  padding: 0 2rem;
}
#community > * {
  position: relative;
  z-index: 3;
}
#community div.bg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#community div.blur {
  background: hsla(0deg, 0%, 0%, 0.09);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
#community div.wrapper {
  margin: auto;
  width: 100%;
  max-width: 40rem;
  height: 90vh;
  background: hsl(0deg, 0%, 100%);
  border-radius: 2rem 2rem 0 0;
  margin-top: 2rem;
}

:root {
  --background: hsl(48, 26%, 96%);
  --text-color: hsla(0, 0%, 16%, 1);
  --link-color: hsla(208, 92%, 28%, 1);
  --overscroll-top: hsl(51, 5%, 90%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(48, 26%, 96%);
  }
}
html, body, body > div.wrapper {
  background-color: var(--background);
  color: var(--text-color);
}

body.modal-open {
  overflow: hidden;
}

#splash {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100%;
  z-index: 90;
}
#splash h1 {
  position: absolute;
  color: hsl(198deg, 34%, 93%);
  width: 100%;
  padding-top: 19rem;
  text-align: center;
  font-family: "Source Serif Display";
  font-weight: 700;
  font-size: clamp(3.4rem, 6vw, 4.4rem);
  line-height: 1.18;
  letter-spacing: -0.013em;
  z-index: 4;
}
#splash .bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
#splash .primary {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#splash .primary div {
  position: relative;
  width: 10%;
  height: 10%;
  transform: translateY(0);
  background: linear-gradient(to bottom, hsl(219deg, 100%, 50%) 0%, hsl(208deg, 88%, 52%) 34%, hsl(209deg, 100%, 78%) 100%);
  filter: blur(2rem);
}
#splash .secondary {
  background: linear-gradient(to bottom, hsl(64deg, 9%, 81%) 0%, hsl(291deg, 22%, 88%) 34%, hsl(263deg, 32%, 94%) 100%);
  z-index: 1;
}
#splash .blur {
  z-index: 3;
  backdrop-filter: blur(3rem);
  -webkit-backdrop-filter: blur(3rem);
}
#splash.animate {
  display: block;
}
#splash.animate .blur {
  animation: splash-in-blur forwards 1.1s 3.2s ease-in-out;
}
#splash.animate .secondary {
  animation: splash-in-secondary forwards 1s 2.6s ease-in-out;
}
#splash.animate .primary div {
  animation: splash-in forwards 3.7s 150ms ease-in-out;
}
#splash.animate h1 {
  animation: splash-text-in forwards 800ms 2.9s ease-in-out;
}
@keyframes splash-in {
  0% {
    width: 10%;
    height: 10%;
    border-radius: 100rem;
    transform: translateY(0);
  }
  75% {
    width: 80%;
    height: calc(100% - 8rem);
    border-radius: 20rem;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
  }
  100% {
    height: 20vh;
    opacity: 0;
    transform: translateY(-60vh);
  }
}
@keyframes splash-in-secondary {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes splash-text-in {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3rem);
  }
}
@keyframes splash-in-blur {
  0% {
    opacity: 1;
    backdrop-filter: blur(3rem);
    -webkit-backdrop-filter: blur(3rem);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0rem);
    -webkit-backdrop-filter: blur(0rem);
  }
}

#logo.animate {
  transform: translateY(2.5rem);
  filter: blur(0.9rem);
  animation: logo-splash-animation forwards 700ms 3.3s ease-out;
}
@keyframes logo-splash-animation {
  0% {
    transform: translateY(2.5rem);
    filter: blur(0.9rem);
  }
  100% {
    transform: translateY(0rem);
    filter: blur(0);
  }
}

#heading-emphasis.animate {
  opacity: 0;
  transform: translateY(-1.5rem);
  animation: drop forwards 550ms 3.93s ease-in-out;
}

@keyframes drop {
  from {
    transform: translateY(-1.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
nav {
  --height: 4rem;
  position: relative;
  width: 100%;
  height: var(--height);
  background: hsl(51deg, 5%, 90%);
  z-index: 10;
  overflow-y: hidden;
  transition: all 250ms;
}
nav div {
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  overflow-x: scroll;
  padding: 0 1.5rem;
}
nav a {
  display: block;
  background: hsl(221deg, 8%, 30%);
  border-radius: 100rem;
  padding: 0.3rem 0.9rem;
  font-weight: 500;
  color: hsl(202deg, 100%, 98%);
  font-size: 1.12rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 200ms;
}
nav a:hover {
  background: hsl(212deg, 88%, 56%);
}
nav.collapse {
  height: 3px;
}
@media (max-width: 40rem) {
  nav {
    background: hsl(0deg, 0%, 0%);
    height: 16.41rem;
  }
  nav div {
    padding: 0.8rem 0.5rem;
    flex-direction: column;
    height: fit-content;
  }
  nav.collapse {
    height: 0.8rem;
  }
}

@media (max-width: 40rem) {
  :root {
    --overscroll-top: hsl(0, 0%, 0%);
  }
  html, body {
    background-color: hsl(0deg, 0%, 0%);
  }
  #hero {
    margin-top: -1.2rem;
  }
  .mobile-dark-shim {
    --radius: 1.4rem;
    width: 100%;
    height: var(--radius);
    position: relative;
    z-index: 10;
    background: hsl(0deg, 0%, 0%);
  }
  .mobile-dark-shim span {
    display: block;
    background: var(--background);
    border-radius: var(--radius) var(--radius) 0 0;
    height: 100%;
    width: 100%;
  }
}
#hero {
  position: relative;
  min-height: fit-content;
  height: calc(100svh + 5rem);
  max-height: 70rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: visible;
  z-index: 9;
}
#hero * {
  z-index: 1;
}
#hero .title {
  width: 100%;
  max-width: 69rem;
  padding: 1.2rem 0.9rem 0;
  display: flex;
}
#hero .title #nav-btn {
  width: 100%;
  transition: filter 200ms;
}
#hero .title #nav-btn:hover {
  filter: brightness(0.6);
  cursor: pointer;
}
#hero .title #logo {
  width: clamp(13.5rem, 50vw, 19.5rem);
  flex-shrink: 0;
}
#hero .title div.spacer {
  width: 100%;
  flex-grow: 1;
}
#hero .headline {
  padding: 4.3rem 1rem 3rem;
  text-align: center;
}
@media (max-width: 60rem) {
  #hero .headline {
    padding: 3.5rem 1rem 2.2rem;
  }
}
#hero .headline > h1 {
  z-index: 51;
  font-family: "Source Serif Display";
  font-weight: 700;
  font-size: clamp(3.4rem, 6vw, 4.4rem);
  line-height: 1.18;
  letter-spacing: -0.013em;
}
#hero .headline > h1::selection {
  background: hsl(226deg, 94%, 56%);
  color: hsl(204deg, 80%, 84%);
  text-fill-color: hsl(204deg, 80%, 84%);
  -webkit-text-fill-color: hsl(204deg, 80%, 84%);
}
@media (max-width: 60rem) {
  #hero .headline > h1 {
    padding-bottom: 1.2rem;
    font-weight: 500;
    font-size: 3.8rem;
    line-height: 0.96;
  }
}
#hero .headline > h2 {
  padding: 0.69rem 0 0.2rem;
  font-family: "Source Serif Text";
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.38rem);
  letter-spacing: -0.015em;
  color: hsl(220deg, 100%, 56%);
  background: linear-gradient(to bottom, hsl(244deg, 100%, 32%) 6%, hsl(213deg, 84%, 51%) 32%, hsl(278deg, 100%, 78%) 92%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#hero .headline > h2::selection {
  background: hsl(257deg, 73%, 75%);
  color: hsl(270deg, 94%, 93%);
  text-fill-color: hsl(270deg, 94%, 93%);
  -webkit-text-fill-color: hsl(270deg, 94%, 93%);
}
#hero .small-spacer {
  width: 100%;
  max-height: 4rem;
  flex-shrink: 1;
  flex-grow: 1;
}
#hero .body {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 69rem;
}
#hero .body .cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
#hero .body .cards div.spacer {
  width: 100%;
  flex-basis: 27rem;
  flex-grow: 1;
  max-width: 30rem;
}
#hero .body .cards ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: fit-content;
  padding: 0;
  --margin: clamp(1.3rem, calc(3.5vw + 0.5rem), 3.8rem);
}
#hero .body .cards ul.left li:nth-of-type(1) {
  transform: rotate(-5deg);
}
#hero .body .cards ul.left li:nth-of-type(2) {
  transform: rotate(2deg);
  margin-left: var(--margin);
}
#hero .body .cards ul.right {
  align-items: flex-end;
}
#hero .body .cards ul.right li:nth-of-type(1) {
  transform: rotate(3deg);
}
#hero .body .cards ul.right li:nth-of-type(2) {
  transform: rotate(-2deg);
  margin-right: var(--margin);
}
#hero .body .cards ul a {
  text-decoration: none;
  cursor: alias;
  color: unset;
}
#hero .body .cards ul li {
  list-style: none;
  width: 14rem;
  text-align: center;
  height: 4.7rem;
  border-radius: 1.8rem;
  padding: 0.5rem 1.1rem;
  background: #FFFFFF;
  border: 1px solid hsla(0deg, 0%, 100%, 0.46);
  box-shadow: 0 2px 5px 1px hsla(0deg, 0%, 0%, 0.03);
  display: flex;
  align-items: center;
  font-family: "Manropey";
  font-size: 1.04rem;
  color: hsl(234deg, 6%, 32%);
  transition: all 250ms;
}
#hero .body .cards ul li strong {
  font-weight: 600;
  color: hsl(234deg, 6%, 24%);
}
#hero .body .cards ul li.quote {
  width: 16rem;
  text-align: left;
  position: relative;
  padding-left: 0.5rem;
  gap: 0.5rem;
}
#hero .body .cards ul li.quote::before {
  content: "“";
  display: block;
  font-family: "Petrona Var";
  font-weight: 800;
  font-size: 3.5rem;
  color: hsl(60deg, 8%, 87%);
  padding-top: 0.5rem;
}
#hero .body .cards ul li.quote img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.8rem;
  box-shadow: 0 0 0 2px var(--background);
  border-radius: 100rem;
  transform: translate(-30%, 30%);
}
@media (min-width: 60rem) {
  #hero .body .cards ul li:hover {
    border: 2px solid hsla(0deg, 0%, 100%, 0.6);
    box-shadow: 0 2px 6px 2px hsla(0deg, 0%, 0%, 0.06);
    transform: rotate(0) scale(1.1) !important;
  }
}
@media (max-width: 60rem) {
  #hero .body .cards {
    position: relative;
    width: 100%;
    justify-content: flex-start;
    overflow-x: scroll;
    gap: 1rem;
    height: fit-content;
    padding: 1rem 2rem 2rem;
    margin-bottom: 1rem;
  }
  #hero .body .cards ul {
    flex-direction: row;
    gap: 1rem;
  }
  #hero .body .cards ul.left li:nth-of-type(1) {
    transform: rotate(-5deg);
  }
  #hero .body .cards ul.left li:nth-of-type(2) {
    transform: rotate(2deg);
    margin-left: 0;
  }
  #hero .body .cards ul.right {
    align-items: flex-end;
  }
  #hero .body .cards ul.right li:nth-of-type(1) {
    transform: rotate(-1deg);
  }
  #hero .body .cards ul.right li:nth-of-type(2) {
    transform: rotate(2.5deg);
    margin-right: 0;
  }
  #hero .body .cards div.spacer {
    display: none;
  }
}
#hero .body .cta {
  z-index: 12;
  text-align: center;
  max-width: 27rem;
  margin: auto;
}
#hero .body .cta h1 {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.8;
}
#hero .body .cta h1::selection {
  background: hsl(0deg, 0%, 0%);
  color: var(--background);
  text-fill-color: var(--background);
  -webkit-text-fill-color: var(--background);
}
#hero .body .cta p {
  font-size: 1.14rem;
  letter-spacing: -0.012em;
  font-weight: 400;
  line-height: 1.4;
}
#hero .body .cta p::selection {
  background: hsl(0deg, 0%, 0%);
  color: var(--background);
  text-fill-color: var(--background);
  -webkit-text-fill-color: var(--background);
}
#hero .body .cta a {
  display: inline-block;
  margin-top: 1.3rem;
  padding: 0.37rem 1.5rem;
  font-weight: 600;
  font-size: 1.4rem;
  background: hsl(39deg, 3%, 44%);
  background: linear-gradient(to bottom, hsl(220deg, 4%, 31%), hsl(51deg, 2%, 47%));
  color: hsl(0deg, 0%, 100%);
  text-decoration: none;
  border-radius: 10rem;
  transition: all 250ms;
}
#hero .body .cta a:hover {
  box-shadow: 1px 0 1px 2px hsla(0deg, 0%, 0%, 0.03);
  padding-left: 2.1rem;
  padding-right: 2.1rem;
  cursor: pointer;
}
#hero .body .cta a.opened {
  transform: scale(1.15);
}
#hero > div.spacer {
  width: 100%;
  flex-basis: 2rem;
  min-height: 4rem;
  flex-grow: 3;
  flex-shrink: 1;
}
#hero #art-marquee {
  position: relative;
  width: 100%;
  height: 23.6rem;
}
#hero #art-marquee div.scroll {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1.1rem;
  padding: 0.3rem 0.5rem;
}
#hero #art-marquee div.scroll div.scroll-copy {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1.1rem;
  animation: autoScroll 45s infinite linear;
}
#hero #art-marquee div.scroll div.item {
  height: 13.6rem;
  aspect-ratio: 18.8/13.6;
  flex-shrink: 0;
  border-radius: 0.3rem;
  background: linear-gradient(to bottom, hsl(202deg, 45%, 22%) 0%, hsl(233deg, 51%, 37%) 100%);
}
#hero #art-marquee div.scroll div.item picture, #hero #art-marquee div.scroll div.item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
#hero #art-marquee div.scroll div.item p {
  width: 100%;
  text-align: center;
  bottom: 0;
  font-weight: 500;
  color: hsla(0deg, 0%, 0%, 0.6);
  opacity: 0;
  transition: all 350ms;
}
#hero #art-marquee div.scroll div.item:hover p {
  opacity: 1;
}
@keyframes autoScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1.1rem));
  }
}
#hero #art-marquee div.main {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: inherit;
  z-index: 2;
  pointer-events: none;
}
#hero #art-marquee div.main .wrapper {
  width: calc(100% - 2rem);
  max-width: 31rem;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.8), hsla(221deg, 100%, 79%, 0.8));
  backdrop-filter: blur(1.1rem);
  -webkit-backdrop-filter: blur(1.1rem);
  box-shadow: inset 0 0 0 0.2rem hsl(45deg, 20%, 22%), inset 0 0 0 0.4rem hsl(45deg, 34%, 41%), inset 0 0 0 0.55rem hsl(43deg, 46%, 50%), inset 0 0 0 0.75rem hsl(45deg, 33%, 34%), inset 0 0 0 0.9rem hsl(45deg, 19%, 26%);
  border: 0.2rem solid hsl(45deg, 21%, 34%);
  border-radius: 0.2rem;
}
#hero #art-marquee div.main .wrapper p {
  font-family: "Petrona";
  font-weight: 600;
  font-size: 2.3rem;
  font-style: italic;
  background: linear-gradient(to bottom, hsl(214deg, 100%, 16%), hsl(214deg, 84%, 52%));
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#hero #art-marquee .arrow {
  display: none;
}
#hero #art-marquee .edge-blur {
  position: absolute;
  z-index: 5;
  top: calc((100% - 13.6rem) * 0.5);
  height: 13.6rem;
  width: 3rem;
  backdrop-filter: blur(0.8rem);
  -webkit-backdrop-filter: blur(0.8rem);
  mask: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 10%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 10%, rgba(0, 0, 0, 0) 100%);
}
#hero #art-marquee .edge-blur.left {
  left: 0;
}
#hero #art-marquee .edge-blur.right {
  right: 0;
  transform: scaleX(-1);
}
@media (max-width: 40rem) {
  #hero #art-marquee {
    --bottom-space: 2.6rem;
  }
  #hero #art-marquee div.main {
    z-index: 1;
  }
  #hero #art-marquee div.main .wrapper {
    justify-content: flex-start;
    padding-top: 2.5rem;
  }
  #hero #art-marquee div.main picture, #hero #art-marquee div.main img {
    display: none;
  }
  #hero #art-marquee div.scroll {
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: var(--bottom-space);
  }
  #hero #art-marquee div.scroll div.scroll-copy {
    align-items: flex-end;
  }
  #hero #art-marquee .edge-blur {
    top: unset;
    bottom: var(--bottom-space);
  }
  #hero #art-marquee .arrow {
    position: absolute;
    z-index: 6;
    width: 100%;
    display: flex;
    justify-content: center;
    top: 5.3rem;
  }
  #hero #art-marquee .arrow object, #hero #art-marquee .arrow svg {
    height: 5rem;
  }
}
#hero .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  z-index: 0;
}
#hero .gradient {
  background: linear-gradient(to bottom, var(--background) 0%, hsl(48deg, 44%, 89%) 65%, hsl(48deg, 44%, 89%) 100%);
}

article.problem-statement {
  position: relative;
  z-index: 2;
  padding: 6rem 0.4rem 1.5rem;
}
article.problem-statement span.paragraph {
  display: block;
  padding: 1.9rem 0;
}
article.problem-statement span.break {
  display: block;
  height: 0.7rem;
}
article.problem-statement p {
  max-width: 42rem;
  margin: auto;
  font-family: "Inter Var", "Inter V", "Inter";
  font-size: 2.42rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 1.9rem 0;
  color: hsl(193deg, 5%, 37%);
}
article.problem-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background: linear-gradient(to bottom, hsl(48deg, 44%, 89%), var(--background));
}
@media (max-width: 60rem) {
  article.problem-statement {
    padding: 5rem 0.8rem 1.5rem;
  }
  article.problem-statement p {
    line-height: 1.22;
  }
  article.problem-statement p span.break {
    height: 0.8rem;
  }
}

#about * {
  position: relative;
  z-index: 3;
}
#about .transition {
  position: relative;
  z-index: 1;
}
#about .transition * {
  position: relative;
  z-index: 2;
}
#about .transition div.bg.gradient {
  position: absolute;
  z-index: 1;
  top: -8rem;
  left: 0;
  width: 100%;
  height: 37rem;
  background: linear-gradient(to bottom, hsl(48deg, 26%, 96%) 0%, hsl(256deg, 50%, 90%) 10%, hsl(256deg, 93%, 84%) 21%, hsl(221deg, 94%, 75%) 32%, hsl(209deg, 99%, 67%) 43%, hsl(213deg, 99%, 68%) 57%, hsl(212deg, 100%, 70%) 68%, hsl(48deg, 26%, 96%) 100%);
}
#about .transition h1 {
  padding-top: 3rem;
  padding-bottom: 1.1rem;
  text-align: center;
  font-size: clamp(2.5rem, 14.5vw, 6.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  background: linear-gradient(to bottom, #E5F6F9 12%, #E3E9FE 46%, #E1E1FF 89%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#about .transition h1::selection {
  background: hsl(203deg, 100%, 98%);
  color: hsl(217deg, 100%, 58%);
  text-fill-color: hsl(217deg, 100%, 58%);
  -webkit-text-fill-color: hsl(217deg, 100%, 58%);
}
#about object, #about svg {
  z-index: 5;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(-1 * clamp(2.05rem, 4vw, 1.85rem));
  height: clamp(5.5rem, 13vw, 7.8rem);
}
#about section {
  width: calc(98vw - 2rem);
  max-width: 86rem;
  margin: auto;
  margin-bottom: 1.8rem;
  min-height: 50vh;
  padding: 5.2rem 7rem;
  background: linear-gradient(to bottom, hsl(208deg, 49%, 93%) 0%, hsl(270deg, 11%, 91%) 100%);
  border-radius: 3.3rem;
}
#about section > h2 {
  font-family: "Petrona Var";
  font-weight: 300;
  font-size: 2.75rem;
  color: hsl(0deg, 0%, 42%);
}
#about section > h2 a, #about section > h2 a:visited, #about section > h2 a:active {
  color: hsl(0deg, 0%, 17%);
  text-decoration: none;
  font-weight: 400;
}
#about section > h2 a:hover, #about section > h2 a:visited:hover, #about section > h2 a:active:hover {
  color: hsl(216deg, 82%, 56%);
  text-decoration: underline;
}
@media (max-width: 60rem) {
  #about section {
    margin-bottom: 1rem;
    width: calc(100vw - 1rem);
    min-height: 0px;
    border-radius: 2.3rem;
    padding: 2.7rem 1.4rem 4rem;
  }
  #about section > h2 {
    font-size: 1.8rem;
  }
}
#about div.virtual {
  width: calc(98vw - 2rem);
  max-width: 86rem;
  margin: auto;
  margin-bottom: 1.8rem;
  padding: 3rem 7rem;
  background: linear-gradient(to bottom, hsl(208deg, 8%, 85%) 0%, hsl(270deg, 14%, 93%) 100%);
  border-radius: 10rem;
  color: hsl(0deg, 0%, 23%);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 450;
}
#about div.virtual img {
  display: inline-block;
  width: 1.7rem;
  margin-bottom: -0.3rem;
}
#about div.virtual a, #about div.virtual a:visited, #about div.virtual a:active {
  color: hsl(0deg, 0%, 0%);
}
#about div.virtual a:hover {
  color: hsl(216deg, 82%, 56%);
}
#about div.virtual p.mobile {
  display: none;
}
@media (max-width: 60rem) {
  #about div.virtual {
    margin-bottom: 1rem;
    width: calc(100vw - 1rem);
    border-radius: 10rem;
    padding: 1.9rem 1.4rem;
  }
  #about div.virtual p {
    line-height: 1.5;
  }
  #about div.virtual p.desktop {
    display: none;
  }
  #about div.virtual p.mobile {
    display: block;
  }
}
#about section.overall-structure div.scroll-indicator {
  display: none;
  width: 100%;
  height: 0.45rem;
  justify-content: center;
  gap: 0.45rem;
}
#about section.overall-structure div.scroll-indicator span {
  width: 2.4rem;
  height: 100%;
  background: hsla(0deg, 0%, 0%, 0.3);
  border-radius: 10rem;
  cursor: pointer;
}
#about section.overall-structure div.scroll-indicator span.active {
  background: hsla(0deg, 0%, 0%, 0.8);
}
#about section.overall-structure div.canvas {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.3rem;
  padding-top: 7rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#about section.overall-structure div.canvas::-webkit-scrollbar {
  background: transparent;
}
#about section.overall-structure div.canvas div.block {
  height: 1.8rem;
  width: 100%;
  margin: 0 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#about section.overall-structure div.canvas div.block span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
}
#about section.overall-structure div.canvas > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
}
#about section.overall-structure div.canvas > div h1 {
  font-family: "Petrona Var";
  font-weight: 500;
  font-size: 2.8rem;
  letter-spacing: -0.015em;
}
#about section.overall-structure div.canvas > div h2 {
  font-family: "Petrona Var";
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.8;
}
#about section.overall-structure div.canvas > div p {
  margin-top: 1rem;
  padding: 0 0.3rem;
  max-width: 34rem;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: hsl(0deg, 0%, 33%);
}
#about section.overall-structure div.canvas div.round-one, #about section.overall-structure div.canvas div.round-two {
  flex-grow: 0;
  flex-basis: 1;
  flex-shrink: 1;
}
#about section.overall-structure div.canvas div.round-one .block span, #about section.overall-structure div.canvas div.round-two .block span {
  width: 5.8rem;
}
#about section.overall-structure div.canvas div.round-one .block span {
  background: linear-gradient(to bottom, hsl(275deg, 95%, 45%) 0%, hsl(258deg, 100%, 65%) 100%);
}
#about section.overall-structure div.canvas div.round-one h1 {
  color: hsl(265deg, 100%, 59%);
}
#about section.overall-structure div.canvas div.round-two .block span {
  background: linear-gradient(to bottom, hsl(237deg, 100%, 67%) 0%, hsl(201deg, 100%, 47%) 100%);
}
#about section.overall-structure div.canvas div.round-two h1 {
  color: hsl(201deg, 100%, 47%);
}
#about section.overall-structure div.canvas div.week {
  flex-grow: 1.5;
  flex-basis: 1.5;
  flex-shrink: 0.7;
}
#about section.overall-structure div.canvas div.week .block > span {
  position: relative;
  max-width: 40rem;
  height: 1rem;
  background: hsl(0deg, 0%, 81%);
  overflow: clip;
  --line-width: 12rem;
}
#about section.overall-structure div.canvas div.week .block > span span {
  position: absolute;
  top: 0;
  left: 10%;
  height: inherit;
  width: var(--line-width);
  background: linear-gradient(to right, hsla(0deg, 0%, 100%, 0) 0%, hsla(210deg, 86%, 66%, 0.842) 15%, hsla(210deg, 100%, 51%, 0.842) 30%, hsla(241deg, 81%, 66%, 0.834) 70%, hsla(293deg, 67%, 70%, 0.632) 90%, hsla(293deg, 99%, 84%, 0.632) 95%, hsla(0deg, 0%, 100%, 0));
  filter: blur(0.3rem);
  border-radius: 0;
  animation: week-line-pulse forwards infinite 2.3s ease-in;
}
@keyframes week-line-pulse {
  0% {
    left: calc(var(--line-width) * -1);
  }
  60% {
    left: calc(100% + var(--line-width));
  }
  100% {
    left: calc(100% + var(--line-width));
  }
}
#about section.overall-structure div.canvas div.week h1 {
  color: hsl(0deg, 0%, 33%);
}
@media (max-width: 72rem) {
  #about section.overall-structure {
    padding-bottom: 2rem;
  }
  #about section.overall-structure div.canvas {
    padding-top: 2.8rem;
    padding-bottom: 1.9rem;
  }
  #about section.overall-structure div.canvas > div {
    width: 100%;
    flex-shrink: 0 !important;
    flex-grow: 0;
  }
  #about section.overall-structure div.scroll-indicator {
    display: flex;
  }
}
#about section.intent {
  background: linear-gradient(to bottom, hsl(275deg, 55%, 94%) 0%, hsl(252deg, 44%, 91%) 99%);
}
#about section.intent h1 {
  padding-bottom: 0.6em;
  font-family: "Source Serif Text";
  font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  letter-spacing: -0.015em;
  color: hsl(220deg, 100%, 56%);
  background: linear-gradient(to bottom, hsl(244deg, 100%, 32%) 0%, hsl(213deg, 84%, 51%) 35%, hsl(278deg, 54%, 65%) 92%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#about section.intent h1::selection {
  background: hsl(257deg, 73%, 75%);
  color: hsl(270deg, 94%, 93%);
  text-fill-color: hsl(270deg, 94%, 93%);
  -webkit-text-fill-color: hsl(270deg, 94%, 93%);
}
@media (max-width: 60rem) {
  #about section.intent h1 {
    padding-bottom: 1.2rem;
    line-height: 0.96;
  }
}
#about section.intent h2 strong {
  color: hsl(0deg, 0%, 20%);
  font-weight: 400;
}
#about section.round-structure {
  margin-bottom: 0;
  padding: 5.2rem 0 2rem;
}
#about section.round-structure > * {
  padding: 0 7rem;
}
#about section.round-structure div.canvas {
  padding: 1rem 0;
  padding-bottom: 0;
  --tray-height: 4rem;
  --tray-border-width: 0.6rem;
  --label-padding: 0.3rem;
  --p-height: 5rem;
}
@media (max-width: 60rem) {
  #about section.round-structure div.canvas {
    --tray-height: 3.6rem;
    --tray-border-width: 0.5rem;
    --p-height: 3.7rem;
  }
}
#about section.round-structure div.canvas .btn {
  position: absolute;
  height: 100%;
  width: clamp(7rem, 5%, 15rem);
  top: 0;
  z-index: 5;
}
#about section.round-structure div.canvas .back {
  left: 0;
}
#about section.round-structure div.canvas .forward {
  right: 0;
}
#about section.round-structure div.canvas div.timeline {
  overflow-x: scroll;
  padding: 0 0 2rem;
  width: 100%;
}
#about section.round-structure div.canvas div.timeline div.wrapper {
  padding: 0 7rem;
  width: fit-content;
}
#about section.round-structure div.canvas div.timeline div.labels {
  min-width: 100%;
  width: min-content;
  display: flex;
  gap: var(--tray-border-width);
  padding-left: var(--tray-border-width);
}
#about section.round-structure div.canvas div.timeline p {
  flex-shrink: 0;
  width: min-content;
  height: var(--p-height);
  padding: 0 1rem;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  font-family: "Inter V", "Inter Var";
  font-size: 1.2rem;
  font-weight: 450;
  letter-spacing: -0.009em;
  color: hsla(0deg, 0%, 17%, 0.9);
  white-space: nowrap;
  transition: all 300ms;
}
#about section.round-structure div.canvas div.timeline p::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--tray-height) + var(--tray-border-width) - var(--label-padding));
  height: calc(var(--tray-height) - var(--tray-border-width) * 2);
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, hsl(0deg, 0%, 97%) 0%, hsl(200deg, 48%, 92%) 62%, hsl(201deg, 44%, 85%) 100%);
  border-radius: 10rem;
  box-shadow: 0 2px 6px 1px hsla(0deg, 0%, 0%, 0.02);
  transition: all 300ms;
}
#about section.round-structure div.canvas div.timeline p.active::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--tray-height) + var(--tray-border-width) - var(--label-padding));
  height: calc(var(--tray-height) - var(--tray-border-width) * 2);
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, hsl(0deg, 0%, 100%) 0%, hsl(200deg, 100%, 97%) 62%, hsl(189deg, 100%, 96%) 100%);
  border-radius: 10rem;
  box-shadow: 0 2px 6px 1px hsla(0deg, 0%, 0%, 0.02);
}
#about section.round-structure div.canvas div.timeline p span.num {
  margin-left: 0.3rem;
  margin-bottom: 0.1rem;
  font-size: 0.75em;
  font-weight: 600;
  background: hsla(0deg, 0%, 0%, 0.13);
  padding: 0.1rem 0.5rem;
  border-radius: 10rem;
}
#about section.round-structure div.canvas div.timeline p.stage-dialogos {
  max-width: unset;
  flex-shrink: 0;
  font-weight: 500;
}
#about section.round-structure div.canvas div.timeline div.tray {
  z-index: 2;
  height: var(--tray-height);
  margin-top: var(--label-padding);
  width: calc(100% + var(--tray-border-width));
  min-width: 30rem;
  flex-grow: 1;
  background: linear-gradient(to bottom, hsl(224deg, 48%, 91%) 0%, hsl(207deg, 70%, 97%) 100%);
  box-shadow: inset 0 0.1rem 0 0rem hsl(207deg, 45%, 95%);
  border-radius: 10rem;
}
#about section.round-structure div.canvas div.explain-text {
  padding-top: 2rem;
  padding-left: 7rem;
  padding-right: 7rem;
  padding: 2rem 7rem 1.9rem;
  font-family: "Petrona Var", "Petrona V", "Petrona", serif;
  font-size: 2.1rem;
  font-weight: 300;
  display: flex;
  flex-direction: column;
}
#about section.round-structure div.canvas div.explain-text p {
  opacity: 0;
  height: 0;
  overflow-y: hidden;
  transition: all 400ms;
}
#about section.round-structure div.canvas div.explain-text p.active {
  opacity: 1;
  height: auto;
}
#about section.round-structure div.canvas div.scroll-indicator {
  width: 6rem;
  height: 0.4rem;
  margin: auto;
  background: hsla(0deg, 0%, 0%, 0.3);
  border-radius: 10rem;
}
#about section.round-structure div.canvas div.scroll-indicator span {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: hsla(0deg, 0%, 0%, 0.8);
}
@media (max-width: 60rem) {
  #about section.round-structure {
    padding: 2.7rem 0rem 2rem;
  }
  #about section.round-structure > * {
    padding: 0 1.4rem;
  }
  #about section.round-structure div.canvas div.btn {
    display: none;
    pointer-events: none;
  }
  #about section.round-structure div.canvas div.timeline div.wrapper {
    padding: 0 1.4rem;
  }
  #about section.round-structure div.canvas div.timeline p {
    font-size: 1rem;
  }
  #about section.round-structure div.canvas div.explain-text {
    padding-top: 0rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    font-size: 1.6rem;
  }
}

div.engage {
  position: relative;
  height: fit-content;
  width: 100%;
  padding: 2.1rem 1.5rem 5rem;
  box-shadow: 0 2px 1px 0px hsla(0deg, 0%, 0%, 0.08);
  font-family: "Petrona Var", "Petrona V", "Petrona", serif;
  text-align: center;
}
div.engage > * {
  position: relative;
  z-index: 3;
}
div.engage h2 {
  font-size: clamp(2.4rem, 6vw, 2.8rem);
  font-weight: 300;
  color: hsl(207deg, 98%, 56%);
  letter-spacing: -0.009em;
  padding-bottom: 0.6rem;
}
div.engage h2::selection {
  background: hsl(201deg, 95%, 88%);
  color: hsl(201deg, 96%, 37%);
  text-fill-color: hsl(201deg, 96%, 37%);
  -webkit-text-fill-color: hsl(201deg, 96%, 37%);
}
div.engage h2 em {
  font-style: normal;
  font-weight: 500;
}
div.engage h2 em::selection {
  background: hsl(201deg, 95%, 88%);
  color: hsl(201deg, 96%, 37%);
  text-fill-color: hsl(201deg, 96%, 37%);
  -webkit-text-fill-color: hsl(201deg, 96%, 37%);
}
@media (max-width: 60rem) {
  div.engage h2 {
    padding-bottom: 1.3rem;
  }
}
div.engage h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  font-weight: 600;
  color: hsl(248deg, 8%, 18%);
  letter-spacing: -0.01em;
  margin-bottom: 2.9rem;
}
div.engage h1::selection {
  background: hsl(201deg, 100%, 44%);
  color: hsl(201deg, 88%, 88%);
  text-fill-color: hsl(201deg, 88%, 88%);
  -webkit-text-fill-color: hsl(201deg, 88%, 88%);
}
@media (max-width: 60rem) {
  div.engage h1 {
    padding-bottom: 1.2rem;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 0.96;
  }
}
div.engage > a, div.engage > a:visited, div.engage > a:active {
  font-family: "Inter Var", "Inter V", "Inter", sans-serif;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 1.1rem;
  color: black;
  background: linear-gradient(to bottom, hsl(0deg, 0%, 100%), hsl(206deg, 93%, 91%));
  box-shadow: 1px 0 1px 2px hsla(0deg, 0%, 0%, 0.03);
  transition: all 300ms;
}
div.engage > a:hover, div.engage > a:visited:hover, div.engage > a:active:hover {
  padding: 0.8rem 2.3rem;
}
div.engage h2.desktop, div.engage h1.desktop {
  display: block;
}
div.engage h2.mobile, div.engage h1.mobile {
  display: none;
}
@media (max-width: 60rem) {
  div.engage h2.desktop, div.engage h1.desktop {
    display: none;
  }
  div.engage h2.mobile, div.engage h1.mobile {
    display: block;
  }
}
div.engage h3 {
  font-family: "Petrona Var", "Petrona V", "Petrona";
  font-size: 1.3rem;
  font-weight: 500;
  padding-bottom: 1.2rem;
}
div.engage ul.community {
  height: 4.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
  padding: 0;
}
div.engage ul.community a, div.engage ul.community a:hover, div.engage ul.community a:visited, div.engage ul.community a:active {
  color: unset;
}
div.engage ul.community li {
  list-style: none;
  position: relative;
  transition: all 250ms;
  height: 3.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.engage ul.community li.active {
  border-radius: 100rem;
  box-shadow: 0 0 1px 5px hsla(207deg, 90%, 54%, 0.803);
}
div.engage ul.community li.active img {
  animation: bounce 200ms forwards ease-in-out;
}
div.engage ul.community li img {
  width: 3.3rem;
  box-shadow: 0 0 0 3px white;
  border-radius: 100rem;
}
@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-0.4rem) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
div.engage div.community-bios {
  width: 100%;
  height: 14rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
div.engage div.community-bios p {
  display: none;
  width: 24rem;
  max-width: calc(100vw - 2rem);
  max-height: 10rem;
  overflow-y: scroll;
  padding: 1rem 1rem;
  background: hsla(0deg, 0%, 100%, 0.8);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-radius: 1.8rem;
  border: 1px solid hsla(0deg, 0%, 100%, 0.46);
  box-shadow: 0 2px 5px 1px hsla(0deg, 0%, 0%, 0.03);
  text-align: left;
  font-family: "Manropey";
  font-size: 1.1rem;
  color: hsl(234deg, 6%, 32%);
  transition: all 250ms;
}
div.engage div.community-bios p strong {
  font-weight: 600;
  color: hsl(234deg, 6%, 24%);
}
div.engage div.community-bios p em {
  font-family: "Inter Var", "Inter V", "Inter";
  font-weight: 350;
  font-size: 0.9em;
}
div.engage div.community-bios p.active {
  display: block;
}
div.engage div.community-bios p:nth-child(odd) {
  transform: rotate(-1.2deg);
}
div.engage div.community-bios p:nth-child(even) {
  transform: rotate(1.4deg);
}
div.engage div.bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
div.engage div.gradient {
  height: 80%;
  background: linear-gradient(to bottom, hsl(48deg, 26%, 96%) 0%, hsl(293deg, 100%, 98%) 25%, hsl(237deg, 100%, 92%) 63%, hsl(202deg, 100%, 70%) 81%, hsl(207deg, 89%, 51%) 100%);
}
div.engage div.blur {
  z-index: 2;
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
}

div.library {
  width: 100%;
  padding: 1.6rem 1.9rem;
  display: flex;
  gap: 1.2rem;
  overflow-x: scroll;
}
div.library > a, div.library div.resources {
  display: block;
  flex-shrink: 0;
  width: 40vw;
  height: fit-content;
  padding: 2rem 1.1rem;
  aspect-ratio: 1.5;
  background: hsl(35deg, 25%, 91%);
  background: linear-gradient(to bottom, hsl(35deg, 25%, 91%), hsl(30deg, 8%, 93%));
  box-shadow: 0 2px 0 hsla(39deg, 3%, 49%, 0.15);
  color: hsl(0deg, 0%, 17%);
  border-radius: 1.1rem;
  text-decoration: none;
  overflow: hidden;
}
div.library > a h2, div.library div.resources h2 {
  text-align: center;
}
div.library > a:hover h2 {
  color: hsl(216deg, 82%, 56%);
  text-decoration: underline;
}
div.library > a p {
  padding: 1.5rem 1rem 0;
  font-family: "Petrona Var", "Petrona V", "Petrona";
  font-weight: 500;
  font-size: 1.9rem;
  color: hsla(0deg, 0%, 0%, 0.6);
  opacity: 0.6;
  background: linear-gradient(to bottom, hsl(0deg, 0%, 0%) 0%, hsla(0deg, 0%, 0%, 0.5) 70%, hsla(0deg, 0%, 0%, 0) 100%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  transition: all 250ms;
}
div.library > a:hover p {
  padding-top: 0.9rem;
}
div.library div.resources {
  --inset: 0.6rem;
  display: flex;
  flex-direction: column;
  padding: var(--inset);
  padding: 0;
}
div.library div.resources div {
  width: calc(100% - 2rem);
  margin: auto;
  height: 3px;
  border-radius: 10rem;
  background: hsla(0deg, 0%, 0%, 0.1);
}
div.library div.resources a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(1.1rem - var(--inset));
  border-radius: inherit;
  flex-grow: 1;
  color: hsl(0deg, 0%, 17%);
  text-decoration: none;
  transition: all 250ms;
}
div.library div.resources a:hover h2 {
  color: hsl(216deg, 82%, 56%);
  text-decoration: underline;
}
@media (max-width: 60rem) {
  div.library {
    flex-direction: column;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  div.library > a {
    width: 100%;
    height: 13rem;
    padding: 1.5rem 1.1rem;
  }
  div.library > a h2 {
    font-size: 1.6rem;
  }
  div.library > a p {
    height: 10rem;
    padding: 1rem 0.8rem 0;
  }
  div.library > a:hover p {
    padding-top: 1rem;
  }
  div.library div.resources {
    height: unset;
    width: 100%;
    aspect-ratio: unset;
  }
  div.library div.resources a {
    padding: 1.5rem 0;
  }
}