@font-face {
  font-family: 'Vanilla Grotesque Display';
  src: url('assets/VanillaGrotesqueDisplay-VariableVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root {

  /* --margin: 1.25rem; */
  --margin: 20px;
  --toolbar-width: 35.8125rem;

  --transition-fast: 150ms;
  /* --transition-slow: 300ms; */
  --transition-slow: 350ms;

  --button-transition: 0ms;

  --debug-outline: 1px solid rgba(255, 0, 0, 0);



  --black: #000;
  --white: #fff;

  --brand-black: #2B2B2B;
  --brand-white: #EDEDED;
  --brand-accent: #FF4200;

  --controls-bg: #F9F9F9;
  --grey-dark: #EAEAEA;
  --grey-medium: #EFEFEF;

  --toggle-bg-closed: #EAEAEA;
  --toggle-bg-closed-hover: #EAEAEA;
  --toggle-bg-open: #696969;
  --toggle-bg-open-hover: #EAEAEA;

  --toggle-fg-closed: #959595;
  --toggle-fg-open: #FFFFFF;

}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  /* background: #F5F5F5; */
  background: var(--brand-white);
  color: var(--brand-black);
  

  /* overflow: scroll; */
}

#p5_loading {
  position: fixed;
  display: none;
}
/* CANVAS */
/* canvas {
  height: calc(100vh - var(--margin) * 2) !important;
  width: calc((100vh - var(--margin) * 2)*(660.47/934)) !important;
  min-height: 900px;
  min-width: calc(900px * (660.47/934));
  aspect-ratio: 660.47/934 !important;
  position:fixed;
  top: 50%; */
  /* left: 20px; */
  /* left: calc(128px + var(--margin)); */
  /* left: calc((100vw - var(--toolbar-width))/2);
  transform:translate(-50%, -50%); */
  /* box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25); */
  /* box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);
  max-width: 100vw;
  max-height: calc(100vh - var(--margin) * 2);
  object-fit: contain;

  transition:
    left 600ms,
    transform 600ms;
  will-change: left, transform;
} */




canvas {
  /* height: 100%;
  width: 100%; */
  height: calc(100vh - var(--margin) * 2) !important;
  width: calc((100vh - var(--margin) * 2)*(660.47/934)) !important;
  min-height: 900px;
  min-width: calc(900px * (660.47/934));
  aspect-ratio: 660.47/934 !important;

  display: block;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);
  margin: auto;
}

#canvas-container {
  /* background: red; */
  /* height: calc(100vh - var(--margin) * 2) !important; */
  /* width: calc((100vh - var(--margin) * 2)*(660.47/934)) !important; */
  width: calc(100px + (100vh - var(--margin) * 2)*(660.47/934)) !important;
  height: 100vh;
  padding: var(--margin);
  min-height: 900px;
  min-width: calc(100px + (900px * (660.47/934)));
  aspect-ratio: 660.47/934 !important;
  position:fixed;
  top: 50%;
  /* left: 20px; */
  /* left: calc(128px + var(--margin)); */
  left: calc((100vw - var(--toolbar-width))/2);
  transform:translate(-50%, -50%);
  /* box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25); */
  /* box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); */
  max-width: 100vw;
  /* max-height: calc(100vh - var(--margin) * 2); */
  object-fit: contain;

  transition:
    left 600ms,
    transform 600ms;
  will-change: left, transform;
}
#canvas-container.no-transition {
  transition: none !important;
}

/* body.controls-hidden canvas {
  left: 50%;
  transform: translate(-50%, -50%);
} */

body.controls-hidden #canvas-container {
  left: 50%;
  transform: translate(-50%, -50%);
}





/* LOGO */
#logo-container {
  position: fixed;
  top: var(--margin);
  left: var(--margin);
  z-index: -2;
}
#logo-container a {
  text-decoration: none;
  color: var(--brand-black);
}
#logo-container a:hover svg path {
  fill: var(--brand-accent);
}
.copyright-row {
  display: flex;
  gap: 1.125rem;

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-size: 0.625rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-style: normal;
  line-height: .8;
  letter-spacing: .01em;

  color: #919191;

  padding: 0.906rem 1.063rem;
  margin: auto;
}
.copyright-cotton {
  text-decoration: none;
  color: #919191;
}
.copyright-cotton:hover {
  text-decoration: underline;
}





/* CONTROLS */
button {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-size: 1.0125rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;

  cursor: pointer;
  border: none;

  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
}

#controls-container {
  position: absolute;
  top: var(--margin);
  right: var(--margin);
  padding-bottom: var(--margin);

  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-end;
}

#controls {
  width: var(--toolbar-width);
  scrollbar-width: thin;

  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 2.625rem;

  background: #ffffff;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
  box-shadow: 3.721px 0px 18.605px 0px rgba(0, 0, 0, 0.10);

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-weight: normal;
  font-size: .875rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;


  will-change: transform, opacity, max-height, padding;
  max-height: 9000px;
  opacity: 1;
  transform: translateY(0) scale(1);
  /* transform: scale(1); */
  transform-origin: top right;
  transition: 
    /* max-height var(--transition-slow) ease,
    opacity var(--transition-slow) ease,
    transform var(--transition-slow) ease; */

    max-height 600ms,
    opacity var(--transition-slow),
    transform 600ms,
    padding 600ms;

    /* max-height var(--transition-slow),
    opacity var(--transition-slow),
    transform var(--transition-slow),
    padding var(--transition-slow); */
}
#controls.hide {
  max-height: 0;
  padding: 0;
  opacity: 0;
  /* transform: translateY(-10px) scale(0); */
  /* transform: translateY(-10px) scale(0.9); */
  /* transform: translateY(-10px) scale(.5); */
  transform: translateY(-10px) scale(.75);
  overflow: hidden;
}

.graphics-controls-section.hide {
  display: none !important;
}







#toggle-container {
  display: flex;
  gap: 0.313rem;
  justify-content: flex-end;
}
.toggle {
  cursor: pointer;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  background: #ffffff;
  box-shadow: 3.721px 0px 18.605px 0px rgba(0, 0, 0, 0.10);
  transform: scale(1);
  transition:
    box-shadow var(--transition-fast),
    width var(--transition-fast),
    height var(--transition-fast),
    /* transform var(--transition-fast); */
}
.toggle:hover {
  box-shadow: 3.721px 0px 18.605px 0px rgba(0, 0, 0, 0.13);
}
.toggle:active {
  /* transform: scale(.98); */
  transform: scale(.96);
}

.toggle .icon-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: transform 500ms ease;
  will-change: transform;
}
.icon-open {
  width: 1.375rem;
  height: 1.375rem;
}
.icon-closed {
  width: 1.813rem;
  height: 1.813rem;
}
.toggle .icon-closed {
  position: relative;
  top: -0.075rem;
  right: -0.075rem;
  /* transform: translateY(2.8rem); */
  transform: translateY(2.8rem) scale(.75);
}
body.controls-hidden .toggle .icon-open {
  /* transform: translateY(-2.8rem); */
  transform: translateY(-2.8rem) scale(.75);
}
body.controls-hidden .toggle .icon-closed {
  transform: translateY(0);
  transform: translateY(0) scale(1);
}
body.controls-hidden .copyright-row {
  display: none;
}
body.controls-hidden {
  background: var(--brand-black);
}
body.controls-hidden #logo-container svg path{
  fill: var(--brand-white);
}
body.controls-hidden #logo-container a:hover svg path {
  fill: var(--brand-accent);
}
body.controls-hidden canvas {
  box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.55);
}

.download-btn {
  width: 100%;
  height: 8.375rem;
  border-radius: 2.625rem;
  cursor: pointer;
  box-shadow: 3.721px 0px 18.605px 0px rgba(0, 0, 0, 0.10);
  transform: scale(1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--white);
  transition:
    width var(--transition-slow),
    height var(--transition-slow);
}
.download-btn:hover {
    box-shadow: 3.721px 0px 18.605px 0px rgba(0, 0, 0, 0.13);
}
.download-btn:active {
  transform: scale(.996);
}
.download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: scale(.8); */
  transform: scale(.88);
}
.download-label {
  display: inline-block;
  transition: opacity 5s ease, transform 300ms ease;
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 600, "ital" 0;
  font-size: 1.5rem;
  line-height: .8;
  /* letter-spacing: -.025em; */
  letter-spacing: -.03em;
  width: auto;
  opacity: 1;
}
/* Hide the text label when controls panel is closed */
body.controls-hidden .download-btn {
  width: 3.5rem;
  height: 3.5rem;
  transform: translateY(-.75rem);
}
body.controls-hidden .download-icon {
  transform: scale(.98) translateY(-1px);
}
body.controls-hidden .download-icon svg {
  width: 1.875rem;
  height: 2.125rem;
}
body.controls-hidden .download-label {
  width: 0;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}




@media screen and (max-width: 660.47px) {
  #canvas-container {
    max-height: calc(100vw * 934/660.47);
  }
}
/* RESPONSIVE */
@media screen and (max-height: 940px) {
  body.controls-hidden #canvas-container {
    left: 50%;
  }
  #canvas-container {
    min-height: calc(100vh - 20px);
    padding: var(--margin) 0;

    overflow: scroll;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }

  #canvas-container::-webkit-scrollbar {
    display: none;             /* Chrome, Safari */
  }

  canvas {
    width: 100vw;
  }
}

@media screen and (max-height: 940px) and (max-width: 636.4272px) {
  body.controls-hidden #canvas-container {
    top: 0px;
    transform: translate(-50%, 0);
  }
  canvas {
    width: 100vw !important;
    height: calc(100vw * (934/660.47)) !important;
  }

  body.controls-hidden canvas,
  canvas {
    min-height: 0;
    min-width: 0;
    max-width: 100vw;
    max-height: calc(100vw * (934/660.47));

    width: 100vw;
    aspect-ratio: 660.47 / 934;
    height: auto;
    margin: auto;
  }
  canvas {
    margin: 0
  };
}
@media screen and (max-width: 636.4272px) {
  body {
    background: var(--brand-black);
  }
  #canvas-container {
    min-height: 0;
    max-width: 100vw;
    max-height: calc(100vw * (934/660.47));

    padding: var(--margin) 0;

    width: 100vw;
    aspect-ratio: 660.47 / 934;
    height: auto;

    top: 0;
    left: 0;
    transform: translate(0, 0);

    transition: none;
    z-index: -1;
  }
  body.controls-hidden canvas,
  canvas {
    min-height: 0;
    min-width: 0;
    margin: auto;
  }
  canvas {
    margin: 0
  }

  #controls-container {
    right: 0;
    top: calc(var(--margin)* 2);
  }
  #controls-container #toggle-container {
    margin-right: var(--margin);
  }
  #controls {
    max-width: 100vw;
    transition: none;
  }
  body.controls-hidden .download-btn {
    margin-right: var(--margin);
    transition: none;
  }
  .download-btn, .toggle .icon-wrapper {
    transition: none;
  }
  .toggle .icon-wrapper {
    transition: none;
  }
  html {
    font-size: 14px;
  }
  .copyright-row {
    position: fixed;
    bottom: var(--margin);
    left: 50%;
    transform: translate(-50%, 0);
    text-wrap: nowrap;
    z-index: -1;
    padding: 0;
  }
  body.controls-hidden .copyright-row {
    display: flex;
  }

  #logo-container {
    top: calc(100dvh - 2*var(--margin) - 7px - 36px);
    z-index: -1;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #logo-container svg{
    width: 4rem;
  }
  #logo-container svg path {
    fill: #919191;
  }
  body.controls-hidden #logo-container svg path {
    fill: #919191;
  }
}

@media (max-aspect-ratio: 700.47/974) {
  #canvas-container {
    /* background: green; */
    padding: var(--margin) 0;
  }
  body.controls-hidden #canvas-container {
    top: 0px;
    transform: translate(-50%, 0);
  }

}
@media (max-aspect-ratio: 660.47/974) {
  #canvas-container {
    /* background: blue; */
    max-height: 100vh;
  }
  body {
    background: var(--brand-black);
  }
  canvas {
    width: 100vw !important;
    height: calc(100vw / (660.47 / 934)) !important;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.55);
  }
  body.controls-hidden canvas {
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.55);
  }
}

@media screen and (max-width: 1600px) {
 html {
  font-size: 14px;
 }
}
html.no-transition * {
  transition: none !important;
}


/* ***** HEADING SECTION ***** */
/* Heading Header Section */
.controls-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding: 1.9375rem 2.1875rem;
  
  background: var(--controls-bg);

  transition: border-radius var(--transition-slow);

  cursor: pointer;
}
.controls-header-container:hover {
  background: #F4F4F4;
}
.controls-header-container.expanded {
  border-radius: 1.5rem 1.5rem 0.75rem 0.75rem;
}
.controls-header-label {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 600, "ital" 0;
  font-size: 1.5rem;
  line-height: .8;
  /* letter-spacing: -.025em; */
  letter-spacing: -.03em;
}

.controls-header-controls {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

/* Shuffle Button */
.shuffle-btn {
  /* background: var(--brand-black); */
  background: var(--white);
  

  border-radius: 2rem;
  /* width: 45px; */
  width: 2.938rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.shuffle-btn svg {
  width: 1.188rem;
  height: 1.063rem;
}
.shuffle-btn svg path {
  /* fill: var(--white); */
  fill: var(--brand-black);
}
.shuffle-btn:not(.header-shuffle-btn) {
  margin-top: 0.625rem;
}
.shuffle-btn:hover {
  background: var(--grey-medium);
}
.shuffle-btn:active {
  background: var(--grey-dark);
}

/* Toggle Switch */
.switch {
  width: 3.25rem;
  height: 2rem;
  border-radius: 2rem;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.switch .toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch .toggle-track {
  background: var(--grey-dark);
  border-radius: 999px;
  width: 100%;
  height: 100%;
  display: block;

  background: var(--toggle-bg-closed);
  transition: background var(--button-transition);
}
.switch .toggle-track:hover {
  background: #E3E3E3;
}

.switch .toggle-check {
  width: 1.5rem;
  height: 1.5rem;
  background: #BDBDBD;
  border-radius: 50%;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  transition:
    left var(--transition-slow),
    background var(--transition-slow);
}

/* Toggle Open */
.switch .toggle-input:checked + .toggle-track {
  /* background: red; */
  background: var(--toggle-bg-open);
}
/* Toggle Open Hover State */
.switch .toggle-input:checked + .toggle-track:hover {
  background: #4D4D4D;
  /* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35) inset; */
}
.switch .toggle-input:checked + .toggle-track:hover .toggle-check{
  /* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.30); */
}

.switch .toggle-input:checked + .toggle-track .toggle-check {
  left: 1.5rem;
  background: var(--white);
}
.checkmark,
.x-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
/* By default, show X and hide checkmark */
.checkmark {
  opacity: 0;
  width: 0.813rem;
  height: 0.625rem;
}
.x-icon {
  opacity: 1;
  width: 0.625rem;
  height: 0.625rem;
}
/* When checked: hide X and show checkmark */
.toggle-input:checked + .toggle-track .checkmark {
  opacity: 1;
}
.toggle-input:checked + .toggle-track .x-icon {
  opacity: 0;
}


.visually-hidden {
  position: absolute !important;
  left: -9999px;
  width: 0.063rem; height: 0.063rem;
  overflow: hidden;
  white-space: nowrap;
}




/* Heading Body Section */
.controls-body-container {
  max-height: 9999px;
  display: flex;
  flex-direction: column;
  gap: 2.5625rem;
  /* border-radius: 1.5rem; */
  border-radius: 0.75rem 0.75rem 1.5rem 1.5rem ;
  padding: 2.1875rem 1.125rem;
  margin-top: 0.125rem;
  
  background: var(--controls-bg);
  opacity: 1;
  transition:
    /* max-height var(--transition-slow),
    opacity var(--transition-slow),
    padding var(--transition-slow); */
    max-height 500ms,
    opacity 500ms,
    padding 500ms;
  overflow: hidden;
}
.controls-body-container.is-hidden {
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
  pointer-events: none;
}





/* Heading Body Layout Section */
.input-group {
  outline: var(--debug-outline);
}

.input-label,
.font-label {
  display: none;
}

.slider-label {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;

  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -0.02em;

  text-wrap: nowrap;
  display: block;

  color: var(--brand-black);
}

.radio-group-lg {
  display: flex;
  gap: 0.375rem;
}
.radio-group-lg input[type="radio"] {
  display: none;
}
.radio-group-lg label {
  padding: 0.625rem;
  background: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background var(--button-transition);
}
.radio-group-lg label:hover {
  background: var(--grey-medium);
}
.radio-group-lg label:has(input[type="radio"]:checked) {
  background: var(--grey-dark);
}
.radio-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.heading-layout-radio-group label:has(input[type="radio"]:checked) .heading-layout-shape{
  fill: #696969;
}
.heading-layout-input-group svg {
  width: 1.438rem;
  height: 1.688rem;
}

/* Heading Text Input */
.shuffle-btn:not(.header-shuffle-btn).body-text-shuffle-btn,
.shuffle-btn:not(.header-shuffle-btn).heading-text-shuffle-btn {
  margin-top: 0.313rem;
}
.text-input {
  width: 100%;
  height: 8.75rem;

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: 1.3;
  line-height: 1.4;
  letter-spacing: -0.02em;
  /* letter-spacing: 0; */

  padding: 1.25rem;
  padding: 1.2rem 1.575rem;
  outline: 0.75px solid #E7E7E7;
  border: none;
  border-radius: 0.25rem;
  color: var(--brand-black);
  transition: border-color var(--transition-fast);

  box-sizing: border-box;

  /* FOR TEXT AREA */
  resize: none;
}
.text-input:focus {
  outline-color: #cccccc;
}




.body-layout-row {
  display: flex;
  gap: 2.25rem;
}


.body-text-controls.is-hidden {
  display: none;
}
.body-mono-controls.is-hidden {
  display: none;
}

.font-toggle-container {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 9999px;
  background: var(--white);
  overflow: hidden;
  position: relative;
}
.font-toggle-highlight {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  width: calc(50% - 0.375rem);
  height: calc(100% - 0.75rem);
  background: var(--grey-dark);
  border-radius: 9999px;
  transition: transform var(--transition-slow);
  z-index: 1;
}

.font-toggle-btn {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.013rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--button-transition);
  border-radius: 9999px;
  z-index: 2;
}

.font-toggle-btn.active {
  color: var(--brand-black);
}
.font-toggle-btn:not(.active) {
  color: #9D9D9D;
}
.font-toggle-btn:not(.active):hover {
  color: var(--brand-black);
}
.font-toggle-btn {
  user-select: none;
}



/* Alignment and Transform */
.heading-options-row,
.body-options-row {
  display: flex;
  gap: 2.25rem;
}
.body-vertical-alignment-input-group svg{
  width: 2.563rem;
  height: 2.625rem;
}
.radio-group-sm {
  display: flex;
  gap: 0.25rem;
}
.radio-group-sm input[type="radio"] {
  display: none;
}
.radio-group-sm label {
  width: 2.563rem;
  height: 2.563rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  
  background: transparent;
  transition: var(--button-transition);
}
.radio-group-sm label:hover {
  background: var(--grey-medium);
}
.radio-group-sm label:has(input[type="radio"]:checked) {
  background: var(--grey-dark);
}
.radio-group-sm .radio-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stylistic Sets */
.ss-input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}
.ss-toggle-btn {
  /* background: #ffffff; */
  background: transparent;
  border-radius: 3.125rem;
  padding: .5031rem 0.8844rem;
  cursor: pointer;
  transition: background var(--button-transition);
  border: none;
  outline: none;
  box-shadow: none;

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-feature-settings: "ss12" 1;
  font-size: 1.013rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.ss-toggle-btn:hover {
  background: var(--grey-medium);
}
.ss-toggle-btn.active {
  background: var(--grey-dark);
}









/* GRAPHICS */
.graphics-controls-wrapper {
  display: flex;
  flex-direction: column
}









.flex-control {
  display: flex;
  align-items: baseline;
  gap: 1rem;

  width: 100%;

  margin-bottom: 0.875rem;
}

.number-input {
  width: 100%;

  background: transparent;
  text-align: left;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -.02em;

  padding: 0;
  margin: 0;

  color: #9D9D9D;
}
/* Firefox */
.number-input[type="number"] {
  -moz-appearance: textfield;
}
.number-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}





.slider-wrapper {
  position: relative;
  width: 100%;
}

.slider-dot {
  position: absolute;
  top: calc(2.316rem / 2);
  right: 0.289rem;
  transform: translate(0, -50%);
  width: 0.198rem;
  height: 0.198rem;
  background-color: var(--brand-black);
  border-radius: 50%;
  pointer-events: none;
}
.slider-wrapper.is-dragging .slider-dot {
  background: var(--brand-accent);
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2.316rem;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  position: relative;
  margin-bottom: 1.25rem;
}

.slider::-webkit-slider-runnable-track {
  height: 0.793rem;
  /* background: linear-gradient(to right, #5B5B5B var(--percent, 50%), var(--grey-dark) var(--percent, 50%)); */
  background: linear-gradient(to right, var(--brand-black) var(--percent, 50%), var(--grey-dark) var(--percent, 50%));
  border-radius: 999px;
}
/* .slider::-webkit-slider-runnable-track:active {
  background: linear-gradient(to right, var(--brand-accent) var(--percent, 50%), var(--grey-dark) var(--percent, 50%));
} */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 2.179rem;
  width: 0.198rem;
  background: black;
  margin-top: calc((2.179rem - 0.793rem) / -2);
  border: none;
  border-radius: 0.063rem;
  position: relative;
  z-index: 10;
  outline: 5px solid var(--controls-bg);
}

.slider::-moz-range-track {
  height: 0.793rem;
  background: #eee;
  border-radius: 999px;
}
.slider::-moz-range-progress {
  background: #f00000;
  height: 0.793rem;
  border-radius: 999px;
}
.slider::-moz-range-thumb {
  width: 0.198rem;
  height: 2.179rem;
  /* background: black; */
  border: none;
  border-radius: 0.063rem;
}







/* GRAPHICS */
.graphics-controls-section {
  display: flex;
  flex-direction: column;
  gap: 2.563rem;
}

/* BEAUTY */
.upload-container {
  width: 100%;
  /* height: 172px; */
  border-radius: 0.59006rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  background: white;
  padding: 0.563rem;
}
.upload-input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* cursor: pointer; */
  background: red;
  

}
.upload-link {
  text-decoration: underline;
  cursor: pointer;
}
.drop-zone {
  /* position: absolute; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  height: 12.5rem;
  border-radius: 0.375rem;
  border: 0.063rem dashed #A0A0A0;

  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-size: 1.08969rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  line-height: .8;
  letter-spacing: -.02em;
  color: #2b2b2b;


  overflow: hidden;
  position: relative;
}
.upload-icon {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.thumbnail-info-row {
  margin-top: 0.563rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumbnail-container {
  display: flex;
  gap: 0.563rem;
  align-items: center;
}
.thumbnail-img {
  border-radius: 0.313rem;
}
.file-name {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-size: 0.903rem;
  font-variation-settings: "wdth" 500, "wght" 600, "ital" 0;
  line-height: .8;
  letter-spacing: 0;
  color: #959595;
}

.meta-layout-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.meta-layout-label {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -0.02em;
  text-wrap: nowrap;
  display: block;
  color: var(--brand-black);
}

.meta-layout-radio-group .radio-icon-container {
  width: 6.25rem;
  height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meta-layout-radio-group label {
  padding: 0;
}
.meta-layout-radio-group label:has(input[type="radio"]:checked) .meta-layout-shape{
  fill: #696969;
}
.trash-btn {
  background: transparent;
}
.trash-btn:hover svg path {
  fill: var(--black);
}

.color-controls-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.color-controls-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.color-column,
.stroke-toggle-wrapper {
  flex: 1;
  min-width: 0;
}

.color-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 1.25rem;
}

.color-label {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -0.02em;
  text-wrap: nowrap;
  display: block;
  color: var(--brand-black);
}

.color-label.disabled {
  opacity: 0.2;
}

.circle-row {
  display: flex;
  gap: 0.375rem;
}

.color-btn {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 0.031rem solid #7B7B7B;
  background: transparent;
  cursor: pointer;
}

.color-btn.color-none {
  background: transparent;
  position: relative;
}

.color-btn.color-none::before {
  content: "";
  position: absolute;
  width: 1.875rem;
  height: 0.063rem;
  background: var(--brand-black);
  transform: rotate(-45deg);
  top: 50%;
  left: 50%;
  transform-origin: center;
  translate: -50% -50%;
}

.color-btn.disabled {
  opacity: 0.2;
  pointer-events: none;
}

.color-controls-shuffle-row {
  display: flex;
  justify-content: flex-start;
}
.stroke-toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hide-stroke-toggle {
  visibility: hidden !important;
}


/* REBEL */
.graphics-btn {
  width: fit-content;
  background: var(--brand-black);
  color: white;

  border: none;
  border-radius: 0.375rem;
  padding: 0.875rem 1.25rem;
  display: inline-block;
  cursor: pointer;
  
  /* transition: background-color 0.2s ease; */


  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-size: 1.09rem;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  line-height: .8;
  letter-spacing: -.02em;
}

.rebel-layout-label {
    font-family: 'Vanilla Grotesque Display', sans-serif;
    font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
    font-size: 1.09rem;
    line-height: .8;
    letter-spacing: -0.02em;
    text-wrap: nowrap;
    display: block;
    color: var(--brand-black);
    margin-bottom: 1.25rem;
}

.rebel-layout-row {
  display: flex;
  gap: 2.25rem;
}
.rebel-alignment-radio-group svg {
  width: 1.438rem;
  height: 1.688rem;
}


/* BEAUTY */
.beauty-style-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.beauty-style-radio-group .radio-icon-container {
  width: 7.063rem;
  height: 3.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beauty-style-radio-group label {
  padding: 0;
}
.beauty-style-radio-group label:has(input[type="radio"]:checked) svg path{
  fill: #696969;
}

.beauty-color--container .color-label.disabled {
  opacity: 1;
}
.beauty-color--container .color-btn.disabled {
  opacity: 1;
}

.beauty-instruction-text {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -0.02em;
  text-wrap: nowrap;
  display: block;
  color: var(--brand-black);
}
.beauty-style-label {
  font-family: 'Vanilla Grotesque Display', sans-serif;
  font-variation-settings: "wdth" 500, "wght" 500, "ital" 0;
  font-size: 1.09rem;
  line-height: .8;
  letter-spacing: -0.02em;
  text-wrap: nowrap;
  display: block;
  color: var(--brand-black);
}


/* .color-btn.active {
  outline: 0.125rem solid var(--brand-black);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--controls-bg);
} */

/* .color-btn:hover {
  outline: 0.125rem solid var(--brand-black);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--controls-bg);
} */

.color-btn.active {
  outline: 0.12rem solid var(--brand-black);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--controls-bg);
}

.color-btn:hover {
  outline: 0.12rem solid var(--brand-black);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--controls-bg);
}