@charset "UTF-8";
@import "../fonts/stylesheet.css";
html {
  padding: 0;
  margin: 0;
}

body {
  --unit-size: 1px;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  body {
    --unit-size: 100vw/1280;
  }
}
@media screen and (min-width: 769px) {
  .screen {
    min-height: calc(100vh - var(--static-bar-height));
    position: relative;
    scroll-snap-align: start;
    scroll-margin-top: var(--static-bar-height);
    display: grid;
    overflow-x: hidden;
  }
  .screen-one-side {
    grid-template-areas: "main";
    grid-template-columns: 1fr;
    justify-content: center;
  }
  .screen-two-side {
    grid-template-areas: "left right";
    grid-template-columns: 1fr 1fr;
    justify-content: center;
  }
  .screen-one-side .screen-side {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }
  .screen-one-side .screen-content {
    max-width: calc(1920 * var(--unit-size, 1px));
    min-height: 100%;
    padding: calc(40 * var(--unit-size, 1px));
    width: 100%;
    box-sizing: border-box;
  }
  .screen-two-sides {
    display: grid;
    grid-template-areas: "left right";
    grid-template-columns: repeat(2, 1fr);
  }
  .screen-side {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .screen-side-left {
    grid-area: left;
  }
  .screen-side-left .screen-content {
    align-self: end;
  }
  .screen-side-right {
    grid-area: right;
  }
  .screen-side-right .screen-content {
    align-self: start;
  }
  .screen-two-sides .screen-side {
    display: flex;
    flex-direction: column;
  }
  .screen-two-sides .screen-side:first-child {
    align-items: end;
  }
  .screen-two-sides .screen-side:last-child {
    align-items: start;
  }
}
@media screen and (max-width: 768px) {
  .screen {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .screen-side {
    min-height: calc(100vh - var(--static-bar-height));
    position: relative;
    scroll-snap-align: start;
    scroll-margin-top: var(--static-bar-height);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
  }
  .screen.screen-two-sides-combined {
    scroll-snap-align: start;
    min-height: calc(100vh - var(--static-bar-height));
    scroll-margin-top: var(--static-bar-height);
    display: grid;
    grid-template-rows: 1fr min-content;
  }
  .screen.screen-two-sides-combined .screen-side {
    scroll-snap-align: unset;
    min-height: unset;
  }
  .screen-content {
    flex-grow: 1;
    padding: calc(40 * var(--unit-size, 1px)) calc(20 * var(--unit-size, 1px));
  }
}
@media screen and (min-width: 768px) {
  .screen-two-sides .screen-side .screen-content {
    padding: calc(40 * var(--unit-size, 1px));
    width: 100%;
    max-width: calc(960 * var(--unit-size, 1px));
    min-height: 100%;
    box-sizing: border-box;
  }
  .centered-text {
    text-align: left;
    max-width: calc(470 * var(--unit-size, 1px));
  }
}
.screen-content.centered-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.screen-content.title-layout {
  display: grid;
  grid-template-rows: min-content 1fr;
}
.screen-content.title-layout .centered-text {
  align-self: center;
  justify-self: center;
}
.screen-content.title-layout .left-text {
  align-self: start;
  justify-self: start;
  max-width: calc(470 * var(--unit-size, 1px));
  text-align: left;
  margin-top: calc(60 * var(--unit-size, 1px));
}

.screen-title {
  font-size: calc(44 * var(--unit-size, 1px));
  font-weight: 600;
  align-self: stretch;
  justify-self: start;
  text-align: left;
}
.screen-title.__overlay {
  color: #fff;
  mix-blend-mode: overlay;
}
.screen-title.__gradient {
  background: var(--text-gradient, red);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient {
  background: var(--text-gradient, red);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.large-text {
  color: #fff;
  font-size: calc(34 * var(--unit-size, 1px));
  font-weight: 600;
  margin-top: 0;
  margin-bottom: calc(43 * var(--unit-size, 1px));
}

body {
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: calc(16 * var(--unit-size, 1px));
  font-weight: 500;
  line-height: 1.2;
}

b {
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .screen-title {
    font-size: calc(36 * var(--unit-size, 1px));
    margin-bottom: calc(40 * var(--unit-size, 1px));
  }
  .large-text {
    font-size: calc(28 * var(--unit-size, 1px));
  }
}
.morphosis-carrousel {
  display: grid;
  grid-template-areas: "arrow-left content arrow-right" "arrow-left dots    arrow-right";
  grid-template-columns: calc(50 * var(--unit-size, 1px)) 1fr calc(50 * var(--unit-size, 1px));
}
.morphosis-carrousel .__content {
  grid-area: content;
  max-width: calc(315.732 * var(--unit-size, 1px));
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  scroll-snap-type: x mandatory;
  padding-bottom: calc(20 * var(--unit-size, 1px));
  scrollbar-width: none;
}
.morphosis-carrousel .__arrow-left,
.morphosis-carrousel .__arrow-right {
  width: calc(7 * var(--unit-size, 1px));
  height: calc(13 * var(--unit-size, 1px));
  background: url(../images/arrow-left.svg) no-repeat center;
  align-self: center;
  justify-self: center;
  cursor: pointer;
  padding: calc(10 * var(--unit-size, 1px));
}
.morphosis-carrousel .__arrow-left:not(.__disabled):hover,
.morphosis-carrousel .__arrow-right:not(.__disabled):hover {
  transform: scale(1.1);
}
.morphosis-carrousel .__arrow-left:not(.__disabled):active,
.morphosis-carrousel .__arrow-right:not(.__disabled):active {
  transform: scale(0.95);
}
.morphosis-carrousel .__arrow-left.__disabled,
.morphosis-carrousel .__arrow-right.__disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.morphosis-carrousel .__arrow-right {
  background: url(../images/arrow-right.svg) no-repeat center;
}
.morphosis-carrousel .__dots {
  grid-area: dots;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: row;
  gap: calc(4 * var(--unit-size, 1px));
  margin-top: calc(10 * var(--unit-size, 1px));
}
.morphosis-carrousel .__dots .__dot {
  background: white;
  width: calc(3 * var(--unit-size, 1px));
  height: calc(3 * var(--unit-size, 1px));
  border-radius: calc(8 * var(--unit-size, 1px));
  transition: width 0.2s ease-in-out;
}
.morphosis-carrousel .__dots .__dot.__current {
  width: calc(8 * var(--unit-size, 1px));
}

.enter-side,
.enter-left,
.enter-right,
.enter-bottom,
.enter-top,
.enter-zoom {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  transform-origin: center;
}
.enter-side.__delayed,
.enter-left.__delayed,
.enter-right.__delayed,
.enter-bottom.__delayed,
.enter-top.__delayed,
.enter-zoom.__delayed {
  transition-delay: 0.1s;
}
.enter-side.__visible,
.enter-left.__visible,
.enter-right.__visible,
.enter-bottom.__visible,
.enter-top.__visible,
.enter-zoom.__visible {
  opacity: 1;
}

.enter-zoom {
  opacity: 0;
  transform: scale(0.7);
}
.enter-zoom.__visible {
  transform: scale(1);
}

.enter-left {
  transform: translateX(calc(-100 * var(--unit-size, 1px)));
}
.enter-left.__visible {
  transform: translate(0, 0);
}

.enter-right {
  transform: translateX(calc(100 * var(--unit-size, 1px)));
}
.enter-right.__visible {
  transform: translate(0, 0);
}

.enter-bottom {
  transform: translateY(calc(30 * var(--unit-size, 1px)));
}
.enter-bottom.__visible {
  transform: translate(0, 0);
}

.enter-top {
  transform: translateY(calc(-30 * var(--unit-size, 1px)));
}
.enter-top.__visible {
  transform: translate(0, 0);
}

.screen-side-left .enter-side {
  transform: translateX(calc(-100 * var(--unit-size, 1px)));
}
.screen-side-left .enter-side.__visible {
  transform: translate(0, 0);
}

.screen-side-right .enter-side {
  transform: translateX(calc(100 * var(--unit-size, 1px)));
}
.screen-side-right .enter-side.__visible {
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  .screen-side-right .enter-side,
  .screen-side-left .enter-side {
    transform: translateY(calc(30 * var(--unit-size, 1px)));
  }
  .screen-side-right .enter-side.__visible,
  .screen-side-left .enter-side.__visible {
    transform: translate(0, 0);
  }
}
body {
  --static-bar-height: calc(62 * var(--unit-size, 1px));
}

.morphosis-sticky-bar {
  height: var(--static-bar-height);
  background: #2b2b2b;
  width: 100%;
  position: sticky;
  top: 70px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0 calc(40 * var(--unit-size, 1px));
  box-sizing: border-box;
  gap: calc(10 * var(--unit-size, 1px));
}

.morphosis-sticky-bar .__logo {
  height: calc(45 * var(--unit-size, 1px));
}

.morphosis-sticky-bar .__price {
  color: #fff;
  font-size: calc(28 * var(--unit-size, 1px));
  font-weight: 600;
  margin-left: calc(10 * var(--unit-size, 1px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.morphosis-sticky-bar .__price .__old {
  text-decoration: line-through;
  font-size: 0.5em;
}

.morphosis-sticky-bar .__spacer {
  flex-grow: 1;
}

@property --bg-a {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --bg-b {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --txt-a {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}
@property --txt-b {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}
@property --border {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}
.morphosis-large-button, a.morphosis-large-button {
  cursor: pointer;
  text-transform: uppercase;
  font-size: calc(18 * var(--unit-size, 1px));
  font-weight: 600;
  position: relative;
  transition-property: --bg-a, --bg-b, --txt-a, --txt-b, --border, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  text-decoration: none;
  padding: calc(12 * var(--unit-size, 1px)) calc(20 * var(--unit-size, 1px));
  border-radius: calc(7 * var(--unit-size, 1px));
  --bg-a: transparent;
  --bg-b: transparent;
  --txt-a: #db6c7a;
  --txt-b: #db6c7a;
  --border: #db6c7a;
  transform: scale(1);
}
.morphosis-large-button::before, a.morphosis-large-button::before {
  z-index: 0;
  content: "";
  background: linear-gradient(90deg, var(--bg-a) 0%, var(--bg-b) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: calc(7 * var(--unit-size, 1px));
  pointer-events: none;
}
.morphosis-large-button > span, a.morphosis-large-button > span {
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg, var(--txt-a) 22.12%, var(--txt-b) 59.75%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.morphosis-large-button::after, a.morphosis-large-button::after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: calc(7 * var(--unit-size, 1px));
  border: 1px solid var(--border);
  pointer-events: none;
}
.morphosis-large-button:hover, a.morphosis-large-button:hover {
  --bg-a: transparent;
  --bg-b: transparent;
  --txt-a: #fff;
  --txt-b: #fff;
  --border: #fff;
  transform: scale(1.05);
}
.morphosis-large-button:active, a.morphosis-large-button:active {
  transform: scale(0.95);
}
.morphosis-large-button.__gradient, a.morphosis-large-button.__gradient {
  --txt-a: #fff;
  --txt-b: #fff;
  --bg-a: #e16b77;
  --bg-b: #797db3;
  --border: transparent;
}
.morphosis-large-button.__gradient:hover, a.morphosis-large-button.__gradient:hover {
  --bg-a: transparent;
  --bg-b: transparent;
  --border: #ffffff;
}
.morphosis-large-button.__white, a.morphosis-large-button.__white {
  --bg-a: #fff;
  --bg-b: #fff;
  --txt-a: #070707;
  --txt-b: #070707;
  --border: transparent;
}
.morphosis-large-button.__white:hover, a.morphosis-large-button.__white:hover {
  --txt-a: #fff;
  --txt-b: #fff;
  --bg-a: transparent;
  --bg-b: transparent;
  --border: #fff;
}

@media screen and (max-width: 768px) {
  body {
    --static-bar-height: calc(40 * var(--unit-size, 1px));
  }
  .morphosis-sticky-bar {
    padding: 0 calc(20 * var(--unit-size, 1px));
  }
  .morphosis-large-button, a.morphosis-large-button {
    font-size: calc(12 * var(--unit-size, 1px));
    padding: calc(8 * var(--unit-size, 1px)) calc(10 * var(--unit-size, 1px));
  }
  .morphosis-sticky-bar .__logo {
    height: calc(30 * var(--unit-size, 1px));
  }
  .morphosis-sticky-bar .__price {
    font-size: calc(22 * var(--unit-size, 1px));
  }
}
.morphosis-footer {
  padding: calc(40 * var(--unit-size, 1px)) calc(40 * var(--unit-size, 1px));
  max-width: 1540px;
  margin: 0 auto;
}
.morphosis-footer .__copyright {
  margin-top: calc(20 * var(--unit-size, 1px));
  text-align: left;
  color: rgba(255, 255, 255, 0.2);
}

.morphosis-footer-dropdowns {
  padding: calc(40 * var(--unit-size, 1px)) calc(40 * var(--unit-size, 1px));
  max-width: 1280px;
  margin: 0 auto;
}

.morphosis-footer-dropdown {
  max-width: 1540px;
  text-align: left;
  margin: 0 auto;
  display: grid;
  grid-template-rows: min-content 0fr;
  transition: grid-template-rows 0.4s ease-in-out;
  border-top: 1px solid #fff;
}
.morphosis-footer-dropdown:last-child {
  border-bottom: 1px solid #fff;
}
.morphosis-footer-dropdown {
  padding-top: calc(20 * var(--unit-size, 1px));
  padding-bottom: calc(20 * var(--unit-size, 1px));
}
.morphosis-footer-dropdown .__title {
  font-size: calc(22 * var(--unit-size, 1px));
  position: relative;
  cursor: pointer;
}
.morphosis-footer-dropdown .__title::after {
  position: absolute;
  content: "";
  background-image: url("../images/dropdown-icon.svg");
  background-size: contain;
  width: calc(9 * var(--unit-size, 1px));
  height: calc(8 * var(--unit-size, 1px));
  right: calc(20 * var(--unit-size, 1px));
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.4s ease-in-out;
}
.morphosis-footer-dropdown .__content {
  font-size: calc(18 * var(--unit-size, 1px));
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
.morphosis-footer-dropdown .__content ul {
  padding-left: 2em;
  margin: 0;
}
.morphosis-footer-dropdown .__content li::marker {
  content: "·  ";
}
.morphosis-footer-dropdown.__open {
  grid-template-rows: min-content 1fr;
}
.morphosis-footer-dropdown.__open .__content {
  opacity: 0.6;
  padding-bottom: calc(20 * var(--unit-size, 1px));
  padding-top: calc(40 * var(--unit-size, 1px));
}
.morphosis-footer-dropdown.__open .__title::after {
  transform: translateY(-50%) rotate(180deg);
}

.morphosis-quotes {
  padding: calc(40 * var(--unit-size, 1px)) calc(40 * var(--unit-size, 1px));
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas: "arrow-left content arrow-right" "arrow-left dots    arrow-right";
  grid-template-columns: calc(50 * var(--unit-size, 1px)) 1fr calc(50 * var(--unit-size, 1px));
}
.morphosis-quotes .__content {
  grid-area: content;
  display: flex;
  justify-content: space-evenly;
  gap: calc(40 * var(--unit-size, 1px));
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.morphosis-quotes .__content::-webkit-scrollbar {
  display: none;
}
.morphosis-quotes .__content {
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}
.morphosis-quotes .__content > div {
  scroll-snap-align: start;
}
.morphosis-quotes .__arrow-left,
.morphosis-quotes .__arrow-right {
  width: calc(7 * var(--unit-size, 1px));
  height: calc(13 * var(--unit-size, 1px));
  background: url(../images/arrow-left.svg) no-repeat center;
  align-self: center;
  justify-self: center;
  cursor: pointer;
  padding: calc(10 * var(--unit-size, 1px));
}
.morphosis-quotes .__arrow-left:not(.__disabled):hover,
.morphosis-quotes .__arrow-right:not(.__disabled):hover {
  transform: scale(1.1);
}
.morphosis-quotes .__arrow-left:not(.__disabled):active,
.morphosis-quotes .__arrow-right:not(.__disabled):active {
  transform: scale(0.95);
}
.morphosis-quotes .__arrow-left.__disabled,
.morphosis-quotes .__arrow-right.__disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.morphosis-quotes .__arrow-right {
  background-image: url(../images/arrow-right.svg);
}
.morphosis-quotes .__dots {
  grid-area: dots;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: row;
  gap: calc(10 * var(--unit-size, 1px));
  margin-top: calc(40 * var(--unit-size, 1px));
}
.morphosis-quotes .__dots .__dot {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  width: calc(9 * var(--unit-size, 1px));
  height: calc(9 * var(--unit-size, 1px));
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}
.morphosis-quotes .__dots .__dot.__current {
  background: white;
}

.morphosis-quote {
  --quote-count: 3;
  --quote-size: calc(
          (100% - calc(40 * var(--unit-size, 1px)) * (var(--quote-count) - 1)) / var(--quote-count)
  );
  display: grid;
  grid-template-areas: "portrait name icon" "portrait title  icon" "portrait works  icon" "quote quote quote";
  grid-template-columns: min-content 1fr min-content;
  text-align: left;
  border-radius: calc(6 * var(--unit-size, 1px));
  background: rgba(60, 60, 60, 0.2);
  padding: calc(40 * var(--unit-size, 1px));
  width: var(--quote-size);
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}
.morphosis-quote img.__portrait {
  grid-area: portrait;
  border-radius: 50%;
  width: calc(102 * var(--unit-size, 1px));
  margin-right: calc(30 * var(--unit-size, 1px));
}
.morphosis-quote div.__portrait {
  grid-area: portrait;
  background-size: cover;
  border-radius: 50%;
  width: calc(102 * var(--unit-size, 1px));
  height: calc(102 * var(--unit-size, 1px));
  margin-right: calc(30 * var(--unit-size, 1px));
}
.morphosis-quote .__name {
  grid-area: name;
  font-size: calc(17 * var(--unit-size, 1px));
  font-weight: 600;
}
.morphosis-quote .__title {
  grid-area: title;
  color: #eea7ad;
  font-size: calc(16 * var(--unit-size, 1px));
  font-weight: 600;
}
.morphosis-quote .__works {
  grid-area: works;
  font-size: calc(12 * var(--unit-size, 1px));
  font-weight: 600;
  opacity: 0.7;
}
.morphosis-quote .__quote {
  grid-area: quote;
  font-size: calc(14 * var(--unit-size, 1px));
  margin-top: calc(45 * var(--unit-size, 1px));
}
.morphosis-quote::after {
  grid-area: icon;
  content: "";
  background: url("../images/quote-icon.svg") no-repeat center;
  background-size: contain;
  width: calc(30 * var(--unit-size, 1px));
  height: calc(25 * var(--unit-size, 1px));
}

.morphosis-logo-footer {
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
  padding: calc(40 * var(--unit-size, 1px)) calc(40 * var(--unit-size, 1px));
}
.morphosis-logo-footer .__part {
  position: relative;
  width: 100%;
  aspect-ratio: 1723/199;
  overflow: hidden;
}
.morphosis-logo-footer .__part:nth-child(2) {
  margin-top: calc(5 * var(--unit-size, 1px));
}
.morphosis-logo-footer .__part:nth-child(2) .__logo {
  transition: all 1s ease-out;
  transform: translateY(-100%);
  opacity: 0;
}
.morphosis-logo-footer .__part:nth-child(2) {
  aspect-ratio: 1723/80;
}
.morphosis-logo-footer .__part:nth-child(3) {
  margin-top: calc(5 * var(--unit-size, 1px));
}
.morphosis-logo-footer .__part:nth-child(3) .__logo {
  transition: all 0.8s 0.2s ease-out;
  transform: translateY(-100%);
  opacity: 0;
}
.morphosis-logo-footer .__part:nth-child(3) {
  aspect-ratio: 1723/60;
}
.morphosis-logo-footer.__visible .__part:nth-child(2) .__logo {
  transform: translateY(0);
  opacity: 0.6;
}
.morphosis-logo-footer.__visible .__part:nth-child(3) .__logo {
  transform: translateY(0);
  opacity: 0.3;
}
.morphosis-logo-footer .__logo {
  background: url("../images/logo-footer.png") bottom center no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 1300px) {
  .morphosis-quote {
    --quote-count: 2;
  }
}
@media screen and (max-width: 768px) {
  .morphosis-quotes {
    margin-left: calc(-40 * var(--unit-size, 1px));
    margin-right: calc(-40 * var(--unit-size, 1px));
  }
  .morphosis-quote {
    --quote-count: 1;
  }
}
.animated-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.animated-gradient canvas {
  width: 100%;
  height: 100%;
}

.animated-gradient svg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: optimizeSpeed;
  filter: blur(5vh);
}

.morphosis-logo {
  width: calc(400 * var(--unit-size, 1px));
  aspect-ratio: 140/29;
  margin-top: calc(25 * var(--unit-size, 1px));
  text-align: center;
}

.morphosis-page-1 {
  overflow: hidden;
}
.morphosis-page-1 .morphosis-carrousel {
  transition-duration: 2s;
}
.morphosis-page-1 .__main-title {
  text-align: center;
  font-size: calc(90 * var(--unit-size, 1px));
  font-weight: 500;
  line-height: 0.97;
  margin-top: calc(100 * var(--unit-size, 1px));
  margin-bottom: calc(114 * var(--unit-size, 1px));
  background: linear-gradient(100deg, #e26c78 22.12%, #797db3 59.75%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateZ(0);
  max-width: calc(1190 * var(--unit-size, 1px));
  margin-left: auto;
  margin-right: auto;
}
.morphosis-page-1 .__screen-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.morphosis-page-1 .__features {
  display: flex;
  align-items: center;
  justify-content: center;
}
.morphosis-page-1 .__features > .__feature {
  padding: 0 calc(36 * var(--unit-size, 1px));
}
.morphosis-page-1 .__features > .__feature::after {
  content: "";
  position: absolute;
  width: calc(1 * var(--unit-size, 1px));
  height: calc(58 * var(--unit-size, 1px));
  opacity: 0.4;
  background: #d2beea;
  top: 50%;
  transform: translateY(calc(-29 * var(--unit-size, 1px)));
  right: 0;
}
.morphosis-page-1 .__features > .__feature:last-child::after {
  content: none;
}
.morphosis-page-1 .__interface-holder {
  position: relative;
  width: calc(970 * var(--unit-size, 1px));
  flex-grow: 1;
  z-index: 0;
}
.morphosis-page-1 .__interface {
  box-sizing: border-box;
  width: 100%;
  padding: calc(10 * var(--unit-size, 1px));
  border-radius: calc(20 * var(--unit-size, 1px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  margin: calc(84 * var(--unit-size, 1px)) auto;
}
.morphosis-page-1 {
  /*
  .__interface-holder {
    .__interface {
      transform: scale(0.9) translateY(px(100));
      transform-origin: center;
      opacity: 0;
      transition-property: opacity, transform;
      transition-duration: 2s;
      transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    }
    &.__visible .__interface {
      transform: scale(0.9);
      opacity: 0.5;
    }
    &.__fully-visible .__interface {
      transform: scale(1);
      opacity: 1;
    }
  }*/
}
.morphosis-page-1 .__interface .__halo {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0.5;
  background: url(../images/halo.png) no-repeat center;
  background-size: contain;
  width: 300%;
  height: 160%;
  translate: -50% -50%;
  z-index: 0;
}
.morphosis-page-1 .__interface img {
  z-index: 1;
  width: calc(950 * var(--unit-size, 1px));
  max-width: 100%;
  border-radius: calc(10 * var(--unit-size, 1px));
  position: relative;
}
.morphosis-page-1 .__feature {
  width: calc(243.732 * var(--unit-size, 1px));
  position: relative;
}
.morphosis-page-1 .__feature-title {
  color: #fff;
  text-align: center;
  font-size: calc(14 * var(--unit-size, 1px));
  font-weight: 600;
  text-transform: uppercase;
}
.morphosis-page-1 .__feature-content {
  margin-top: calc(16 * var(--unit-size, 1px));
  color: #e4d2f9;
  text-align: center;
  font-size: calc(14 * var(--unit-size, 1px));
  font-weight: 500;
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .morphosis-page-1 .__interface-holder {
    width: 100%;
    flex-grow: 0;
    aspect-ratio: 418/300;
    margin-bottom: calc(32 * var(--unit-size, 1px));
  }
  .morphosis-page-1 .__interface {
    padding: calc(5 * var(--unit-size, 1px));
    border-radius: calc(10 * var(--unit-size, 1px));
    margin-bottom: calc(32 * var(--unit-size, 1px));
    margin-top: calc(0 * var(--unit-size, 1px));
  }
  .morphosis-page-1 .__main-title {
    font-size: calc(42 * var(--unit-size, 1px));
    margin-top: calc(64 * var(--unit-size, 1px));
    margin-bottom: calc(40 * var(--unit-size, 1px));
  }
}
.morphosis-page-1 .__content .__feature::after {
  content: none;
}
.morphosis-page-1 .__content .__feature {
  padding: 0 calc(36 * var(--unit-size, 1px));
  flex-grow: 0;
  flex-shrink: 0;
  scroll-snap-align: center;
  box-sizing: border-box;
  width: 100%;
}

.morphosis-page-1 .enter-from-top {
  transform: translateY(calc(-100 * var(--unit-size, 1px)));
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.morphosis-page-1.__visible .enter-from-top {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .morphosis-logo {
    width: calc(200 * var(--unit-size, 1px));
    margin-top: 0;
  }
}
.morphosis-page-2 {
  --text-gradient: linear-gradient(96deg, #136b45 0%, #a4d2f6 67.32%);
}
.morphosis-page-2 .__youtube-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.morphosis-page-2 .__youtube-container {
  width: 100%;
  aspect-ratio: 16/9;
}
.morphosis-page-2 .__youtube-poster {
  background: url(../images/poster.png) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.morphosis-page-2 .__youtube-poster .__play-button {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: calc(80 * var(--unit-size, 1px));
  height: calc(80 * var(--unit-size, 1px));
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background-image: url(../images/ico-play.svg);
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: 53% center;
  transition: all 0.2s ease-in-out;
}
.morphosis-page-2 .__youtube-poster:hover .__play-button {
  scale: 1.1;
}
.morphosis-page-2 .__fullscreen-layer {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  z-index: 1000;
}
.morphosis-page-2 .__fullscreen-player-holder {
  position: absolute;
  top: 0;
  left: 0;
  background: black;
}
.morphosis-page-2 .__fullscreen-player-holder iframe {
  max-width: 100%;
  width: unset;
  height: 100%;
  aspect-ratio: 16/9;
}
.morphosis-page-2 .__fullscreen-player-reference {
  position: absolute;
  top: calc(40 * var(--unit-size, 1px));
  left: calc(40 * var(--unit-size, 1px));
  right: calc(40 * var(--unit-size, 1px));
  bottom: calc(40 * var(--unit-size, 1px));
}

.morphosis-page-3 {
  --text-gradient: linear-gradient(96deg, #edc284 0%, #eb7834 67.32%);
}

.morphosis-vertical-schema {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(5 * var(--unit-size, 1px));
  align-self: center;
}
.morphosis-vertical-schema .__arrow {
  background: url(../images/arrow.svg) no-repeat center;
  background-size: contain;
  width: calc(12 * var(--unit-size, 1px));
  height: calc(7 * var(--unit-size, 1px));
}
.morphosis-vertical-schema .__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  padding: calc(20 * var(--unit-size, 1px));
  box-sizing: border-box;
  max-width: calc(380 * var(--unit-size, 1px));
  mix-blend-mode: hard-light;
}
.morphosis-vertical-schema .__block::before {
  content: "";
  position: absolute;
  background: #68544e;
  border-radius: calc(4 * var(--unit-size, 1px));
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.morphosis-vertical-schema .__block .__type {
  padding: calc(4 * var(--unit-size, 1px)) calc(10 * var(--unit-size, 1px));
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.5607843137);
  position: relative;
  border-radius: calc(3 * var(--unit-size, 1px));
  font-size: calc(16 * var(--unit-size, 1px));
}
.morphosis-vertical-schema .__block .__title {
  text-align: center;
  font-size: calc(18 * var(--unit-size, 1px));
  font-weight: 600;
  text-transform: uppercase;
  margin-top: calc(23 * var(--unit-size, 1px));
  margin-bottom: calc(20 * var(--unit-size, 1px));
  z-index: 1;
}
.morphosis-vertical-schema .__block .__details {
  text-align: center;
  font-size: calc(14 * var(--unit-size, 1px));
  font-weight: 600;
  text-transform: capitalize;
  z-index: 1;
}
.morphosis-vertical-schema .__block.__white::before {
  background: rgba(232, 187, 160, 0.4);
}

.morphosis-page-4 .screen-content {
  display: grid;
  grid-template-areas: "title title title" "input-left knob input-right" "visualizer visualizer visualizer";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr max-content 1fr;
  align-items: center;
  justify-items: center;
  justify-content: stretch;
  overflow-x: hidden;
}
.morphosis-page-4 .screen-title {
  grid-area: title;
}
.morphosis-page-4 .__left-selector {
  grid-area: input-left;
}
.morphosis-page-4 .__right-selector {
  grid-area: input-right;
}
.morphosis-page-4 .__selector-category {
  font-size: calc(12 * var(--unit-size, 1px));
  padding: calc(4 * var(--unit-size, 1px)) calc(9 * var(--unit-size, 1px));
  text-transform: uppercase;
  color: #fff;
  position: relative;
  mix-blend-mode: hard-light;
  background: #9d9d9d;
  border-radius: calc(3 * var(--unit-size, 1px));
}

.morphosis-buttons-selector {
  justify-self: center;
  display: flex;
  flex-direction: row;
  gap: calc(40 * var(--unit-size, 1px));
  align-items: center;
}
.morphosis-buttons-selector .__buttons {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--unit-size, 1px));
}
.morphosis-buttons-selector .__button {
  position: relative;
}
.morphosis-buttons-selector .__button .__content {
  border-radius: calc(4 * var(--unit-size, 1px));
  --bg-a: #222127;
  --bg-b: #222127;
  transition-property: --bg-a, --bg-b, transform;
  transition-duration: 0.2s;
  background: linear-gradient(268deg, var(--bg-a) 12.77%, var(--bg-b) 91.59%);
  width: calc(168 * var(--unit-size, 1px));
  height: calc(49 * var(--unit-size, 1px));
  color: #fff;
  text-align: center;
  font-size: calc(16 * var(--unit-size, 1px));
  font-weight: 500;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.morphosis-buttons-selector .__button:hover .__content {
  transform: scale(1.05);
  --bg-a: #7e4bb1;
  --bg-b: #8645dd;
}
.morphosis-buttons-selector .__button:hover::before {
  opacity: 1;
  transform: scale(1);
}
.morphosis-buttons-selector .__button:hover {
  z-index: 2;
}
.morphosis-buttons-selector .__button:active .__content {
  transform: scale(0.95);
  --bg-a: #663d91;
  --bg-b: #6a37af;
}
.morphosis-buttons-selector .__button.__selected .__content {
  --bg-a: #9358cd;
  --bg-b: #9a4fff;
}
.morphosis-buttons-selector .__button.__selected::before {
  opacity: 1;
  transform: scale(1);
}
.morphosis-buttons-selector .__button.__selected {
  z-index: 2;
}
.morphosis-buttons-selector .__button::before {
  opacity: 0;
  content: url(../images/shadow.svg);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  transform: scale(0.5);
}
.morphosis-buttons-selector .__button {
  cursor: pointer;
}

.morphosis-knob-module {
  position: relative;
  grid-area: knob;
  align-self: center;
  justify-self: center;
  height: calc(350 * var(--unit-size, 1px));
  width: calc(272 * var(--unit-size, 1px));
  margin-top: calc(10 * var(--unit-size, 1px));
  margin-bottom: calc(10 * var(--unit-size, 1px));
}
.morphosis-knob-module .__hitarea {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% calc(-50% + calc(15 * var(--unit-size, 1px)));
  width: calc(220 * var(--unit-size, 1px));
  height: calc(220 * var(--unit-size, 1px));
  cursor: pointer;
  touch-action: none;
  border-radius: 1000px;
}
.morphosis-knob-module .__mix-value,
.morphosis-knob-module .__mix-label {
  color: #fff;
  font-size: calc(20 * var(--unit-size, 1px));
  position: absolute;
  text-align: center;
  width: 100%;
}
.morphosis-knob-module .__mix-value {
  top: 0;
}
.morphosis-knob-module .__mix-label {
  bottom: 0;
}
.morphosis-knob-module .__knob-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% calc(-50% + calc(15 * var(--unit-size, 1px)));
  width: calc(500 * var(--unit-size, 1px));
  user-select: none;
}

.morphosis-knob-visualizer {
  grid-area: visualizer;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: calc(45 * var(--unit-size, 1px));
  margin-top: calc(-20 * var(--unit-size, 1px));
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .morphosis-knob-visualizer {
    margin-top: 0;
    gap: calc(20 * var(--unit-size, 1px));
  }
}
.morphosis-knob-visualizer .__play-button {
  background-color: rgba(226, 147, 255, 0.5);
  background-image: url(../images/ico-play-black.svg);
  background-position: 53% center;
  background-repeat: no-repeat;
  background-size: 25%;
  width: calc(85 * var(--unit-size, 1px));
  height: calc(85 * var(--unit-size, 1px));
  border-radius: 1000px;
}
@media screen and (max-width: 768px) {
  .morphosis-knob-visualizer .__play-button {
    width: calc(60 * var(--unit-size, 1px));
    height: calc(60 * var(--unit-size, 1px));
  }
}
.morphosis-knob-visualizer .__play-button.__pause {
  background-image: url(../images/ico-pause-black.svg);
  background-position: center;
  background-size: 20%;
}
.morphosis-knob-visualizer .__play-button {
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  cursor: pointer;
}
.morphosis-knob-visualizer .__play-button:hover {
  transform: scale(1.1);
}
.morphosis-knob-visualizer .__play-button:active {
  transform: scale(0.95);
}
.morphosis-knob-visualizer .__visualizer-svg {
  width: calc(284 * var(--unit-size, 1px));
}

@media screen and (max-width: 768px) {
  .morphosis-page-4 .__selector-category {
    font-size: calc(12 * var(--unit-size, 1px));
  }
  .morphosis-page-4 .screen-content {
    grid-template-areas: "title" "input-left" "knob" "input-right" "visualizer";
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content repeat(4, auto);
    align-items: center;
    justify-items: center;
  }
  .morphosis-page-4 .screen-content .screen-title {
    margin-bottom: calc(20 * var(--unit-size, 1px));
  }
  .morphosis-page-4 .__left-selector-mobile {
    grid-area: input-left;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(20 * var(--unit-size, 1px)) 0;
  }
  .morphosis-page-4 .__right-selector-mobile {
    grid-area: input-right;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(20 * var(--unit-size, 1px)) 0;
  }
}
.morphosis-scroll-selector {
  display: grid;
  grid-template-columns: calc(50 * var(--unit-size, 1px)) 1fr calc(50 * var(--unit-size, 1px));
  margin: calc(8 * var(--unit-size, 1px)) 0;
}
.morphosis-scroll-selector .__text {
  font-size: calc(20 * var(--unit-size, 1px));
  font-weight: 500;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: calc(200 * var(--unit-size, 1px));
  position: relative;
  align-items: center;
}
.morphosis-scroll-selector .__text > div {
  scroll-snap-align: center;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}
.morphosis-scroll-selector .__arrow-left,
.morphosis-scroll-selector .__arrow-right {
  width: calc(7 * var(--unit-size, 1px));
  height: calc(13 * var(--unit-size, 1px));
  background: url(../images/arrow-left.svg) no-repeat center;
  align-self: center;
  justify-self: center;
  cursor: pointer;
  padding: calc(10 * var(--unit-size, 1px));
}
.morphosis-scroll-selector .__arrow-left:not(.__disabled):hover,
.morphosis-scroll-selector .__arrow-right:not(.__disabled):hover {
  transform: scale(1.1);
}
.morphosis-scroll-selector .__arrow-left:not(.__disabled):active,
.morphosis-scroll-selector .__arrow-right:not(.__disabled):active {
  transform: scale(0.95);
}
.morphosis-scroll-selector .__arrow-left.__disabled,
.morphosis-scroll-selector .__arrow-right.__disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.morphosis-scroll-selector .__arrow-right {
  background: url(../images/arrow-right.svg) no-repeat center;
}

.morphosis-page-5 .screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-optical-sizing: auto;
}
.morphosis-page-5 .__title {
  max-width: calc(710 * var(--unit-size, 1px));
  color: #fff;
  text-align: center;
  font-size: calc(44 * var(--unit-size, 1px));
  font-weight: 600;
  margin-top: calc(30 * var(--unit-size, 1px));
  margin-bottom: calc(40 * var(--unit-size, 1px));
}

.morphosis-animated-tiles-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  perspective: 500vh;
}
.morphosis-animated-tiles-background .__square {
  position: absolute;
  width: 32vh;
  height: 32vh;
  left: calc(50% - 16vh);
  top: calc(50% - 16vh);
  transform-origin: center center;
  background-size: cover;
  opacity: 0.5;
}

.morphosis-page-6 {
  --text-gradient: linear-gradient(93deg, #703289 -11.59%, #e59fc8 105.94%);
}
.morphosis-page-6 .__players-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(80 * var(--unit-size, 1px));
}
.morphosis-page-6 .__player-section {
  max-width: calc(676 * var(--unit-size, 1px));
  width: 100%;
}
.morphosis-page-6 .__player-section .__title {
  font-size: calc(24 * var(--unit-size, 1px));
  font-weight: 600;
  background: linear-gradient(93deg, #703289 -11.59%, #e59fc8 105.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: calc(20 * var(--unit-size, 1px));
  text-align: left;
}

.morphosis-player {
  max-width: 100%;
  box-sizing: border-box;
  height: calc(79 * var(--unit-size, 1px));
  border-radius: calc(3 * var(--unit-size, 1px));
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-areas: "play title toggle sound";
  grid-template-columns: min-content 1fr min-content min-content;
  align-items: center;
  padding-left: calc(30 * var(--unit-size, 1px));
  padding-right: calc(30 * var(--unit-size, 1px));
  position: relative;
  user-select: none;
}
.morphosis-player .__main-button {
  grid-area: play;
  width: calc(38 * var(--unit-size, 1px));
  height: calc(38 * var(--unit-size, 1px));
  border-radius: calc(38 * var(--unit-size, 1px));
  background: rgba(14, 14, 14, 0.6);
  position: relative;
  flex-shrink: 0;
  transform: translateZ(1px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}
.morphosis-player .__main-button:hover {
  transform: scale(1.1);
}
.morphosis-player .__main-button:active {
  transform: scale(0.95);
}
.morphosis-player .__main-button .__play-icon {
  background: url(../images/ico-play.svg) no-repeat center;
  background-size: contain;
  width: calc(10 * var(--unit-size, 1px));
  height: calc(11 * var(--unit-size, 1px));
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-4 * var(--unit-size, 1px)) calc(-5 * var(--unit-size, 1px));
}
.morphosis-player .__main-button .__pause-icon {
  background: url(../images/ico-pause.svg) no-repeat center;
  background-size: contain;
  width: calc(10 * var(--unit-size, 1px));
  height: calc(11 * var(--unit-size, 1px));
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-5 * var(--unit-size, 1px)) calc(-5 * var(--unit-size, 1px));
  visibility: hidden;
}
.morphosis-player.__active .__main-button .__play-icon {
  visibility: hidden;
}
.morphosis-player.__active .__main-button .__pause-icon {
  visibility: visible;
}
.morphosis-player.__active .__shadow {
  opacity: 0.9;
}
.morphosis-player .__track-selector {
  grid-area: title;
  position: relative;
  height: calc(43 * var(--unit-size, 1px));
  flex-grow: 1;
  border-radius: calc(3 * var(--unit-size, 1px));
  background: rgba(14, 14, 14, 0.4);
  margin-left: calc(30 * var(--unit-size, 1px));
  margin-right: calc(20 * var(--unit-size, 1px));
  display: flex;
  justify-content: center;
  align-items: center;
}
.morphosis-player .__track-selector .__button {
  position: absolute;
  padding: calc(10 * var(--unit-size, 1px));
  width: calc(7 * var(--unit-size, 1px));
  height: calc(13 * var(--unit-size, 1px));
  top: 50%;
  translate: 0 -50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.morphosis-player .__track-selector .__button:not(.__disabled):hover {
  transform: scale(1.2);
}
.morphosis-player .__track-selector .__button:not(.__disabled):active {
  transform: scale(0.9);
}
.morphosis-player .__track-selector .__button.__disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.morphosis-player .__track-selector .__button.__left {
  left: calc(0 * var(--unit-size, 1px));
  background: url(../images/arrow-left.svg) no-repeat center;
}
.morphosis-player .__track-selector .__button.__right {
  right: calc(0 * var(--unit-size, 1px));
  background: url(../images/arrow-right.svg) no-repeat center;
}
.morphosis-player .__toggle-group {
  grid-area: toggle;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  margin-right: calc(57 * var(--unit-size, 1px));
}
.morphosis-player .__toggle-group:not(.__active) .__toggle-button:first-child, .morphosis-player .__toggle-group:hover .__toggle-button:first-child {
  border-right: none;
  padding-right: calc(10 * var(--unit-size, 1px));
}
.morphosis-player .__toggle-button {
  cursor: pointer;
  color: #fff;
  padding: calc(4 * var(--unit-size, 1px)) calc(9 * var(--unit-size, 1px));
  text-align: center;
  font-size: calc(12 * var(--unit-size, 1px));
  font-weight: 600;
  text-transform: uppercase;
  transform: translateZ(1px);
  --grad-color-1: rgba(255, 255, 255, 0.2);
  --grad-color-2: rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, var(--grad-color-1), var(--grad-color-2));
  transition: --grad-color-1 0.2s, --grad-color-2 0.2s;
}
.morphosis-player .__toggle-button:first-child {
  border-top-left-radius: calc(3 * var(--unit-size, 1px));
  border-bottom-left-radius: calc(3 * var(--unit-size, 1px));
  border-right: calc(1 * var(--unit-size, 1px)) solid black;
}
.morphosis-player .__toggle-button:last-child {
  border-top-right-radius: calc(3 * var(--unit-size, 1px));
  border-bottom-right-radius: calc(3 * var(--unit-size, 1px));
}
.morphosis-player .__toggle-button:first-child.__active {
  --grad-color-1: #ffffff;
  --grad-color-2: #ffffff;
  color: #0e0e0e;
}
.morphosis-player .__toggle-button:first-child:hover:not(.__active) {
  --grad-color-1: rgba(255, 255, 255, 0.7);
  --grad-color-2: rgba(255, 255, 255, 0.7);
  color: #0e0e0e;
}
.morphosis-player .__toggle-button:first-child:active:not(.__active) {
  --grad-color-1: rgba(255, 255, 255, 0.5);
  --grad-color-2: rgba(255, 255, 255, 0.5);
  color: #0e0e0e;
}
.morphosis-player .__toggle-button.__active {
  --grad-color-1: #50235f;
  --grad-color-2: #bf7c84;
}
.morphosis-player .__toggle-button:hover:not(.__active) {
  --grad-color-1: rgba(80, 35, 95, 0.7);
  --grad-color-2: rgba(191, 124, 132, 0.7);
}
.morphosis-player .__toggle-button:active:not(.__active) {
  --grad-color-1: rgba(80, 35, 95, 0.5);
  --grad-color-2: rgba(191, 124, 132, 0.5);
}
.morphosis-player .__waveform {
  grid-area: sound;
  width: calc(26 * var(--unit-size, 1px));
  height: calc(17 * var(--unit-size, 1px));
}
.morphosis-player .__track-selector .__track-list {
  color: #fff;
  text-align: center;
  font-size: calc(14 * var(--unit-size, 1px));
  font-weight: 600;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-align: center;
  scrollbar-width: none;
  position: absolute;
  left: 0;
  right: 0;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.morphosis-player .__track-selector .__track-list div {
  min-width: 100%;
  padding: 0 calc(26 * var(--unit-size, 1px));
  box-sizing: border-box;
  scroll-snap-align: center;
}
.morphosis-player .__shadow {
  position: absolute;
  bottom: 0;
  left: calc(40 * var(--unit-size, 1px));
  right: calc(40 * var(--unit-size, 1px));
  height: calc(30 * var(--unit-size, 1px));
  border-radius: calc(3 * var(--unit-size, 1px));
  opacity: 0;
  background: #6c13f2;
  mix-blend-mode: exclusion;
  filter: blur(calc(37 * var(--unit-size, 1px)));
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

@property --grad-color-1 {
  syntax: "<color>";
  initial-value: rgba(255, 255, 255, 0.2);
  inherits: false;
}
@property --grad-color-2 {
  syntax: "<color>";
  initial-value: rgba(255, 255, 255, 0.2);
  inherits: false;
}
@media screen and (max-width: 768px) {
  .morphosis-player {
    height: auto;
    padding: calc(24 * var(--unit-size, 1px)) calc(20 * var(--unit-size, 1px));
    grid-template-areas: "title" "sound" "toggle" "play";
    grid-template-columns: unset;
    gap: calc(20 * var(--unit-size, 1px));
    justify-items: center;
  }
  .morphosis-player .__main-button {
    width: calc(78 * var(--unit-size, 1px));
    height: calc(78 * var(--unit-size, 1px));
  }
  .morphosis-player .__track-selector {
    justify-self: stretch;
    margin: 0;
  }
  .morphosis-player .__toggle-group {
    margin: 0;
  }
  .morphosis-player .__shadow {
    height: auto;
    top: calc(90 * var(--unit-size, 1px));
  }
  .morphosis-player .__main-button .__play-icon {
    width: calc(29 * var(--unit-size, 1px));
    height: calc(29 * var(--unit-size, 1px));
    translate: calc(-11 * var(--unit-size, 1px)) calc(-14 * var(--unit-size, 1px));
  }
  .morphosis-player .__main-button .__pause-icon {
    width: calc(29 * var(--unit-size, 1px));
    height: calc(29 * var(--unit-size, 1px));
    translate: calc(-14 * var(--unit-size, 1px)) calc(-14 * var(--unit-size, 1px));
  }
}
.morphosis-page-7 {
  --text-gradient: linear-gradient(96deg, #7b3ebd 0%, #c886ea 67.32%);
}
.morphosis-page-7 .__ui-side .screen-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.morphosis-page-7 .__content {
  position: relative;
}
.morphosis-page-7 .__content .morphosis-manual-section {
  padding: 0 calc(36 * var(--unit-size, 1px));
  flex-shrink: 0;
  scroll-snap-align: center;
  box-sizing: border-box;
  width: 100%;
  max-width: unset;
}
.morphosis-page-7 .__content .morphosis-manual-section .__title::before {
  display: none;
}

.morphosis-manual-ui {
  width: 100%;
  background: url(../images/module.png);
  aspect-ratio: 1548/1080;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.morphosis-manual-ui .__focus {
  background: rgba(255, 255, 255, 0.25);
  width: 5vb;
  height: 5vb;
  border-radius: 100%;
  mix-blend-mode: overlay;
  translate: -50% -50%;
  position: absolute;
}
.morphosis-manual-ui .__hitbox {
  position: absolute;
  translate: -50% -50%;
  border-radius: 100%;
}

.morphosis-manual-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  row-gap: calc(30 * var(--unit-size, 1px));
  column-gap: calc(40 * var(--unit-size, 1px));
  justify-content: start;
  align-content: center;
  flex-grow: 1;
  margin-top: calc(60 * var(--unit-size, 1px));
}

.morphosis-manual-section {
  max-width: calc(274 * var(--unit-size, 1px));
  text-align: left;
}
.morphosis-manual-section .__title {
  font-size: calc(22 * var(--unit-size, 1px));
  text-align: left;
  font-weight: 600;
  background: linear-gradient(96deg, #7b3ebd 0%, #c886ea 67.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: calc(19 * var(--unit-size, 1px));
}
.morphosis-manual-section .__title::before {
  content: "";
  width: calc(5 * var(--unit-size, 1px));
  height: calc(16 * var(--unit-size, 1px));
  background: #8648c3;
  display: inline-block;
  margin-right: calc(10 * var(--unit-size, 1px));
  transition: background 0.3s ease-in-out, width 0.3s ease-in-out;
}
.morphosis-manual-section .__description {
  color: #fff;
  font-size: calc(16 * var(--unit-size, 1px));
  font-weight: 500;
  opacity: 0.1;
  transition: opacity 0.3s ease-in-out;
}
.morphosis-manual-section.__focus .__title::before {
  width: calc(27 * var(--unit-size, 1px));
}
.morphosis-manual-section.__focus .__description {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .morphosis-page-7 .__ui-side {
    min-height: unset;
    flex-grow: 1;
    display: flex;
  }
  .morphosis-page-7 .__text-side {
    min-height: unset;
  }
  .morphosis-manual-section .__title {
    text-align: center;
    font-size: calc(22 * var(--unit-size, 1px));
  }
  .morphosis-manual-section .__description {
    opacity: 1;
    text-align: center;
    font-size: calc(14 * var(--unit-size, 1px));
  }
}
html, .product.product-morphosis {
  font-family: "TTFirsNeue", "TT Firs Neue Trl", sans-serif;
  font-weight: 500;
  background: #0e0e0e;
  color: #ffffff;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .mobile-only-content {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .desktop-only-content {
    display: none !important;
  }
  body {
    font-size: calc(14 * var(--unit-size, 1px));
  }
}

/*# sourceMappingURL=style.css.map */