@keyframes themeCycle {
  /* theme 1 (light) — holds 0% to 22% */
  0%,
  22% {
    --theme-code-bg: #f4f2ed;
    --theme-header-bg: #ece9e1;
    --theme-accent: #d6402f;
    --theme-text: #2c2c2a;
    --theme-divider: #c7c3bc;
    --theme-line: #8f8b83;
    --theme-purple: #a8296b;
    --theme-green: #0f6b68;
    --theme-dgreen: #2f6b3a;
  }
  /* theme 2 (dark) — holds 25% to 47% */
  25%,
  47% {
    --theme-code-bg: #181818;
    --theme-header-bg: #1a1d22;
    --theme-accent: #f0563f;
    --theme-text: #e8e6e1;
    --theme-divider: #1a1d22;
    --theme-line: #6c7086;
    --theme-purple: #f07eb0;
    --theme-green: #4fc4bd;
    --theme-dgreen: #7fb069;
  }
  /* theme 3 (purple light) — holds 50% to 72% */
  50%,
  72% {
    --theme-code-bg: #fdfaff;
    --theme-header-bg: #f5ebff;
    --theme-accent: #7209b7;
    --theme-text: #2c2c2a;
    --theme-divider: #f5ebff;
    --theme-line: #b59cc4;
    --theme-purple: #c21fff;
    --theme-green: #2c2c2a;
    --theme-dgreen: #00bfad;
  }
  /* theme 4 (gold dark) — holds 75% to 97% */
  75%,
  97% {
    --theme-code-bg: #121212;
    --theme-header-bg: #0c0c0c;
    --theme-accent: #fac118;
    --theme-text: #bcb9b2;
    --theme-divider: #0c0c0c;
    --theme-line: #4a4845;
    --theme-purple: #c39301;
    --theme-green: #bcb9b2;
    --theme-dgreen: #8a9e6a;
  }
  /* return to theme 1 so the loop is seamless */
  100% {
    --theme-code-bg: #f4f2ed;
    --theme-header-bg: #ece9e1;
    --theme-accent: #d6402f;
    --theme-text: #2c2c2a;
    --theme-divider: #c7c3bc;
    --theme-line: #8f8b83;
    --theme-purple: #a8296b;
    --theme-green: #0f6b68;
    --theme-dgreen: #2f6b3a;
  }
}

@keyframes editorsHeight {
  0%,
  14% {
    height: 50%;
  }
  22%,
  36% {
    height: 62%;
  }
  44%,
  58% {
    height: 40%;
  }
  66%,
  78% {
    height: 66%;
  }
  86%,
  100% {
    height: 50%;
  }
}

@keyframes editorW1 {
  0%,
  14% {
    width: 100%;
  }
  22%,
  36% {
    width: 260%;
  }
  44%,
  58% {
    width: 80%;
  }
  66%,
  78% {
    width: 70%;
  }
  86%,
  100% {
    width: 100%;
  }
}

@keyframes editorW2 {
  0%,
  14% {
    width: 100%;
  }
  22%,
  36% {
    width: 90%;
  }
  44%,
  58% {
    width: 230%;
  }
  66%,
  78% {
    width: 70%;
  }
  86%,
  100% {
    width: 100%;
  }
}

@keyframes editorW3 {
  0%,
  14% {
    width: 100%;
  }
  22%,
  36% {
    width: 75%;
  }
  44%,
  58% {
    width: 260%;
  }
  66%,
  78% {
    width: 330%;
  }
  86%,
  100% {
    width: 100%;
  }
}

@property --theme-code-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f2ed;
}
@property --theme-header-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ece9e1;
}
@property --theme-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #d6402f;
}
@property --theme-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #2c2c2a;
}
@property --theme-divider {
  syntax: "<color>";
  inherits: true;
  initial-value: #c7c3bc;
}
@property --theme-line {
  syntax: "<color>";
  inherits: true;
  initial-value: #8f8b83;
}
@property --theme-purple {
  syntax: "<color>";
  inherits: true;
  initial-value: #a8296b;
}
@property --theme-green {
  syntax: "<color>";
  inherits: true;
  initial-value: #0f6b68;
}
@property --theme-dgreen {
  syntax: "<color>";
  inherits: true;
  initial-value: #2f6b3a;
}