/* ...


 */
@font-face {
  font-family: 'Factor A';
  src: url(/assets/FactorA-Regular-54e921c20865cf78d487abd05e2d856a1cb2fa463fb102b5e1e2d814db3183fa.woff2) format("woff2"), url(/assets/FactorA-Regular-4832595c190f0ab74178d1b4d12e08f80bcb2e097bf3661607f5066a4c60e478.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Factor A';
  src: url(/assets/FactorA-Medium-Kvistly-9c5208f833b615c5e34601b84ef9cb35add042e94ce567fdcfb066196dd9c25e.woff2) format("woff2"), url(/assets/FactorA-Medium-Kvistly-20dc3c8cf5639ab399e9abc4fef0ec954a666d7511934da857128f84788beade.woff) format("woff"), url(/assets/FactorA-Medium-Kvistly-043be8d0519c6285c364edc63f4dcb2d6dd64381bf17afa6a04ac84f3aba19d3.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "ss01" on, "ss02" on;
}

@font-face {
  font-family: 'Factor A';
  src: url(/assets/FactorA-Bold-62315cd8ba0711ddee4f79c5647ab1b8a3af1a0ca5d5b38e6ced734a2ac30440.woff2) format("woff2"), url(/assets/FactorA-Bold-3a99c4a47aa3df0bc6535db1f52ac6f842a3808eae1fb863aefbf9433e5dc12a.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/InterVariable-subset-497ab8017f6bdce7abc208c2be428f97c69c05f7273fc21da6dcb4bdc25ae395.woff2) format("woff2"), url(/assets/InterVariable-subset-f1e579388a05f5fb5eda61ee67771e89f1db4f70d43b64783e095c6c19370ead.woff) format("woff"), url(/assets/InterVariable-subset-2b3e6c5a53deae0572c516090c3d5e2fe2a24c89fa82a38630390f27d2efdda3.ttf) format("truetype");
}

/* line 40, app/assets/stylesheets/application.scss */
.emoji svg {
  width: 32px;
  height: 32px;
}

/* line 46, app/assets/stylesheets/application.scss */
[v-cloak] {
  display: none !important;
}

/* line 50, app/assets/stylesheets/application.scss */
.invisible {
  opacity: 0;
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-start: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/cover.scss */
.cover-template-symbol rect {
  transition: fill 0.5s ease;
}

/* line 7, app/assets/stylesheets/cover.scss */
.cover-template-symbol path {
  transition: fill 0.5s ease, stroke 0.5s ease;
}

/* line 12, app/assets/stylesheets/cover.scss */
.cover {
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: var(--cover-text-color);
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: var(--radius-2);
}

/* line 22, app/assets/stylesheets/cover.scss */
.cover svg {
  fill: var(--cover-image-color);
  transition: fill 0.5s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-2);
}

/* line 31, app/assets/stylesheets/cover.scss */
.cover svg rect {
  transition: fill 0.5s ease;
}

/* line 35, app/assets/stylesheets/cover.scss */
.cover svg linearGradient stop {
  transition: stop-color 0.5s ease;
}

/* line 41, app/assets/stylesheets/cover.scss */
.cover .title {
  z-index: 1;
  color: var(--cover-text-color);
  font-feature-settings: 'ss01' on, 'ss02' on;
  font-family: "Factor A";
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  /* 30.9px */
  letter-spacing: -0.3px;
  transition: color 0.5s ease;
}

/* line 54, app/assets/stylesheets/cover.scss */
.cover-l {
  width: 215px;
  height: 320px;
}

/* line 57, app/assets/stylesheets/cover.scss */
.cover-l .title {
  font-size: 28px;
  padding: 0 15px 15px 17px;
}

/* line 63, app/assets/stylesheets/cover.scss */
.cover-m {
  width: 141px;
  height: 210px;
}

/* line 66, app/assets/stylesheets/cover.scss */
.cover-m svg {
  border-radius: var(--radius-1);
}

/* line 71, app/assets/stylesheets/cover.scss */
.cover-s {
  width: 66px;
  height: 100px;
}

/* line 74, app/assets/stylesheets/cover.scss */
.cover-s svg {
  border-radius: 10px;
}

/* line 79, app/assets/stylesheets/cover.scss */
.cover-palette-0 {
  --cover-background-color: #FFF200;
  --cover-image-color: #FFABE2;
  --cover-text-color: #000000;
  --cover-additional-color: #FFF200;
}

/* line 86, app/assets/stylesheets/cover.scss */
.cover-palette-1 {
  --cover-background-color: #C4FD4B;
  --cover-image-color: #4F9E00;
  --cover-text-color: #006C32;
  --cover-additional-color: #C4FD4B;
}

/* line 93, app/assets/stylesheets/cover.scss */
.cover-palette-2 {
  --cover-background-color: #1BF59A;
  --cover-image-color: #00C37C;
  --cover-text-color: #004737;
  --cover-additional-color: #1BF59A;
}

/* line 100, app/assets/stylesheets/cover.scss */
.cover-palette-3 {
  --cover-background-color: #11322A;
  --cover-image-color: #00D663;
  --cover-text-color: #7DEE9B;
  --cover-additional-color: #11322A;
}

/* line 107, app/assets/stylesheets/cover.scss */
.cover-palette-4 {
  --cover-background-color: #00CAF2;
  --cover-image-color: #0F76FC;
  --cover-text-color: #0749B0;
  --cover-additional-color: #00CAF2;
}

/* line 114, app/assets/stylesheets/cover.scss */
.cover-palette-5 {
  --cover-background-color: #7700FF;
  --cover-image-color: #00D663;
  --cover-text-color: #FFFFFF;
  --cover-additional-color: #7700FF;
}

/* line 121, app/assets/stylesheets/cover.scss */
.cover-palette-6 {
  --cover-background-color: #FFA5F1;
  --cover-image-color: #68227B;
  --cover-text-color: #470068;
  --cover-additional-color: #FFA5F1;
}

/* line 128, app/assets/stylesheets/cover.scss */
.cover-palette-7 {
  --cover-background-color: #FF2200;
  --cover-image-color: #FF9FD4;
  --cover-text-color: #FFFFFF;
  --cover-additional-color: #FF2200;
}

/* line 135, app/assets/stylesheets/cover.scss */
.cover-palette-8 {
  --cover-background-color: #FF7700;
  --cover-image-color: #FF1E52;
  --cover-text-color: #FFFFFF;
  --cover-additional-color: #FF7700;
}

/* line 142, app/assets/stylesheets/cover.scss */
.cover-palette-9 {
  --cover-background-color: #000000;
  --cover-image-color: #8B48E2;
  --cover-text-color: #FFFFFF;
  --cover-additional-color: #000000;
}

@media (max-width: 768px) {
  /* line 150, app/assets/stylesheets/cover.scss */
  .cover-l {
    width: 164px;
    height: 245px;
  }
  /* line 153, app/assets/stylesheets/cover.scss */
  .cover-l .title {
    font-size: 21px;
    padding: 0 14px 11px 15px;
  }
  /* line 158, app/assets/stylesheets/cover.scss */
  .cover-m {
    width: 86px;
    height: 128px;
  }
}