@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {
  .overlay {
    @apply fixed inset-0 bg-stone-800 opacity-75 z-50;
  }
  .pill {
    @apply bg-gray-200/50 rounded-full border border-gray-200 text-xs p-1 px-2 inline-block;
  }
  .nav {
    @apply p-[17px] bg-gray-100 flex justify-between border-b border-gray-200;
  }
  .card {
    @apply bg-white shadow rounded-md p-4;
  }
  .nav-indicator {
    @apply text-teal-800 inline-block font-bold bg-teal-100 py-1 px-3 rounded-full;
  }
  .tools-select {
    @apply rounded-md border-gray-400;
  }
  .tools-input {
    @apply rounded-md border-gray-400;
  }
  .tools-textarea {
    @apply rounded-md border-gray-400;
  }
}
#error_explanation {
  width: 100%;
  border: 2px solid #d94949;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 16px;
  margin: -7px;
  margin-bottom: 0px;
  background-color: #d94949;
  color: #fff
}

#error_explanation ul li {
  font-size: 16px;
  list-style: square;
  border-radius: 5px
}

#audiocontent {
  display: none
}

*:focus:active {
  outline: 0
}

*:focus:not(.focus-visible) {
  outline: none
}

.modal-open {
  margin: 0;
  overflow: hidden;
  overflow-y: hidden;
  height: 90vh
}

div.field,
div.actions {
  margin-bottom: 5px
}

#instantclick {
  display: none
}

.partner-image-dark-mode {
  display: none !important
}

body.dark-theme .on-page-nav-butt img,
body.dark-theme .icon-img,
body.dark-theme .reaction-button:not(.reacted) img,
body.dark-theme .image-upload-button button,
body.dark-theme .icon-image,
body.dark-theme .dev-badge,
body.dark-theme .message__actions img {
  filter: invert(95%)
}

body.dark-theme .ltag__tag {
  border-color: white !important;
  box-shadow: 3px 3px 0px #fff !important
}

body.dark-theme .partner-image-dark-mode {
  display: block !important
}

body.dark-theme .partner-image-light-mode {
  display: none !important
}

.broadcast-wrapper {
  box-sizing: border-box;
  display: none;
  padding: var(--su-2) var(--su-4);
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: var(--z-sticky)
}

.static-header .broadcast-wrapper {
  position: relative
}

.broadcast-visible {
  display: flex
}

.broadcast-data {
  flex-grow: 1;
  align-self: center
}

.mod-icon-visible-block {
  display: none !important
}

body.mod-status-true .mod-icon-visible-block {
  display: flex !important
}

.trusted-visible-block {
  display: none !important
}

body.trusted-status-true .trusted-visible-block {
  display: block !important
}

.subforem-moderator-visible-block {
  display: none !important
}

body.subforem-moderator-status-true .subforem-moderator-visible-block {
  display: block !important
}

.admin-help-button {
  margin-bottom: env(safe-area-inset-bottom)
}

@media (max-width: 768px) {
  .admin-help-button {
    bottom: calc(var(--header-height) + var(--su-3))
  }
}

.subscription-icon {
  height: 0.95em;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0.05em;
  max-height: 22px;
  aspect-ratio: 166 / 102
}

.home {
  position: relative;
  margin: 0 auto;
  max-width: var(--site-width);
  text-align: left
}

@media screen and (max-width: 949px) {
  .home .sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    width: 200%;
    height: 100%;
    display: none;
    -webkit-overflow-scrolling: touch
  }

  .home .sidebar-wrapper .sidebar-bg {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    animation: fade-in 0.48s
  }

  .home .sidebar-wrapper.swiped-in {
    display: block;
    z-index: var(--z-drawer)
  }

  .home .sidebar-wrapper.swiped-in .side-bar {
    display: block;
    background: var(--card-bg);
    height: 100%;
    overflow-y: auto
  }

  .home .sidebar-wrapper-left {
    transform: translate(-280px, 0)
  }

  .home .sidebar-wrapper-left.swiped-in {
    transform: translate(0em, 0);
    animation: swipe-in-from-left 0.18s
  }

  .home .sidebar-wrapper-right {
    transform: translate(calc(-100vw + 280px), 0)
  }

  .home .sidebar-wrapper-right .side-bar {
    float: right
  }

  .home .sidebar-wrapper-right.swiped-in {
    transform: translate(-100vw, 0);
    animation: swipe-in-from-right 0.18s
  }
}

.home .side-bar {
  float: left;
  width: 280px;
  font-size: 0.85em;
  line-height: 1.35em;
  display: none;
  position: relative;
  padding: 16px 0;
  box-sizing: border-box;
  color: var(--card-secondary-color)
}

.home .side-bar.sidebar-additional {
  display: none
}

@media screen and (min-width: 1120px) {
  .home .side-bar.sidebar-additional.showing {
    display: block
  }
}

@media screen and (min-width: 950px) {
  .home .side-bar {
    display: block
  }
}

@media (min-width: 768px) {
  body[data-side-nav-visible='true'] .home {
    max-width: calc(var(--site-width) - 60px);
    width: calc(100% - 70px);
    margin-left: 60px
  }
}

@media (min-width: 1460px) {
  body[data-side-nav-visible='true'] .home {
    max-width: var(--site-width);
    width: 100%;
    margin-left: auto;
    transform: translateX(20px)
  }
}

.sidebar-navigation-link .c-link__icon {
  display: inline-flex;
  flex-shrink: 0
}

.sidebar-navigation-link .c-link__icon svg {
  height: 24px;
  width: 24px;
  vertical-align: middle;
  display: inline-block
}

@keyframes fade-in {
  0% {
    opacity: var(--opacity-0)
  }

  100% {
    opacity: 1
  }
}

@keyframes swipe-in-from-left {
  0% {
    transform: translate(-280px, 0)
  }

  100% {
    transform: translate(0em, 0)
  }
}

@keyframes swipe-in-from-right {
  0% {
    transform: translate(calc(-100vw + 280px), 0)
  }

  100% {
    transform: translate(-100vw, 0)
  }
}

.on-page-nav-controls {
  height: 45px;
  position: relative;
  opacity: 0.85;
  text-align: center;
  margin-bottom: 8px
}

@media screen and (min-width: 950px) {
  .on-page-nav-controls.user-nav-controls {
    display: none
  }
}

.on-page-nav-controls .on-page-nav-butt {
  position: absolute;
  top: 14px;
  border: 0px;
  background: transparent;
  border-radius: 8px
}

.on-page-nav-controls .on-page-nav-butt img {
  height: 24px
}

.on-page-nav-controls .on-page-nav-butt.on-page-nav-butt-left {
  left: 3%
}

.on-page-nav-controls .on-page-nav-butt.on-page-nav-butt-right {
  right: 3%
}

@media screen and (min-width: 950px) {
  .on-page-nav-controls .on-page-nav-butt {
    display: none
  }
}

.on-page-nav-controls .on-page-nav-label {
  position: absolute;
  right: 0;
  left: 0;
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-stretch: condensed;
  top: 18px;
  font-weight: 600
}

.on-page-nav-controls .on-page-nav-label.sub-home-nav {
  top: 12px
}

.on-page-nav-controls .on-page-nav-label .wide-nav-links {
  display: none
}

@media screen and (min-width: 650px) {
  .on-page-nav-controls .on-page-nav-label .narrow-nav-select {
    display: none
  }

  .on-page-nav-controls .on-page-nav-label .wide-nav-links {
    display: block;
    cursor: default
  }
}

@media screen and (min-width: 950px) {
  .on-page-nav-controls .on-page-nav-label {
    top: 9px
  }

  .on-page-nav-controls .on-page-nav-label.sub-home-nav {
    top: 8px
  }
}

.on-page-nav-controls .separator {
  border-left: 2px solid #dbdbdb;
  display: inline-block;
  margin: 0px 7px;
  height: 15px
}

.on-page-nav-controls .nav-chronofiter-link {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.95em;
  border-radius: 2px;
  border: 1px solid transparent
}

.on-page-nav-controls .nav-chronofiter-link.selected {
  background: #cfd7ff;
  color: #0a0a0a;
  border: 1px solid #4e57ef;
  box-shadow: 3px 4px 0px #4e57ef
}

.on-page-nav-controls .nav-chronofiter-link:hover {
  opacity: 1;
  background: #4e57ef;
  color: white;
  border: 1px solid #cfd7ff;
  box-shadow: 3px 4px 0px #cfd7ff
}

.on-page-nav-controls .narrow-nav-select button {
  all: unset;
  background: transparent;
  border: 0;
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-stretch: condensed;
  font-weight: 600;
  cursor: pointer
}

.nav-icon {
  width: 24px;
  height: 24px
}

.loading {
  padding: calc(3vw + 15px) 0px 60px;
  text-align: center;
  opacity: 0.7;
  display: none
}

.loading-articles {
  padding: calc(3vw + 15px) 0px 60px;
  text-align: center;
  opacity: 0.7;
  display: none
}

.articles-list:not(.crayons-layout__content) {
  margin: auto;
  max-width: 100%;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box
}

@media screen and (min-width: 950px) {
  .articles-list:not(.crayons-layout__content) {
    float: left;
    width: 100%;
    max-width: calc(100% - 280px);
    padding: 16px
  }
}

@media screen and (min-width: 1120px) {
  .articles-list:not(.crayons-layout__content) {
    max-width: calc(100% - 560px)
  }
}

.articles-list:not(.crayons-layout__content) .placeholder-div {
  display: block;
  width: 100%
}

.articles-list:not(.crayons-layout__content) .single-article {
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  background: var(--card-bg);
  border: none;
  border: var(--theme-container-border, none);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8))
}

@media screen and (min-width: 950px) {
  .articles-list:not(.crayons-layout__content) .single-article {
    border-radius: var(--radius);
    margin-bottom: var(--su-2)
  }
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-small-pic {
  vertical-align: top;
  overflow: hidden
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-single-podcast h4 {
  bottom: 10px
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-single-podcast .content {
  padding-bottom: 40px
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-podcast-div {
  background: var(--card-bg);
  border: none;
  border: var(--theme-container-border, none);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8));
  padding-bottom: 8px
}

@media screen and (min-width: 950px) {
  .articles-list:not(.crayons-layout__content) .single-article.single-article-podcast-div {
    border-radius: var(--radius);
    margin-bottom: var(--su-2)
  }
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-podcast-div h3 {
  margin: 0;
  padding: 16px
}

.articles-list:not(.crayons-layout__content) .single-article.single-article-podcast-div p {
  margin-left: 14px
}

.articles-list:not(.crayons-layout__content) .single-article h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.articles-list:not(.crayons-layout__content) .single-article .small-pic {
  float: left;
  height: 40px;
  width: 40px;
  margin: 16px 0 0 16px;
  overflow: hidden;
  font-size: 11px;
  border-radius: 50%
}

.articles-list:not(.crayons-layout__content) .single-article .small-pic img,
.articles-list:not(.crayons-layout__content) .single-article .small-pic .color {
  height: 100%;
  width: 100%;
  border-radius: 50%
}

.articles-list:not(.crayons-layout__content) .single-article .content {
  float: left;
  width: calc(100% - 72px);
  box-sizing: border-box;
  padding: 16px 16px 100px 16px
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 {
  margin: 0px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 28px;
  padding: 0px;
  word-break: break-word;
  color: var(--card-color)
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 .tag-identifier {
  font-size: 14px;
  background: #1395b8;
  color: white;
  padding: 2px 4px 3px;
  margin-right: 5px;
  border-radius: 4px;
  vertical-align: 3px
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 .tag-identifier.red-identifier {
  background: #ff0000
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 .tag-identifier.black-identifier {
  background: #0a0a0a
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 a {
  color: inherit
}

.articles-list:not(.crayons-layout__content) .single-article .content h3 a:hover {
  color: var(--link-color-hover)
}

@media (min-width: 640px) {
  .articles-list:not(.crayons-layout__content) .single-article .content h3 {
    line-height: 32px;
    font-size: var(--fs-2xl)
  }

  .articles-list:not(.crayons-layout__content) .single-article .content h3 .tag-identifier {
    font-size: 15px;
    padding: 2px 6px 3px;
    vertical-align: 4px
  }

  .articles-list:not(.crayons-layout__content) .single-article .content h4 {
    font-size: 15px
  }
}

.articles-list:not(.crayons-layout__content) .single-article .time-ago-indicator {
  color: var(--card-color-tertiary);
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
  font-size: 0.8em;
  vertical-align: 0.07em
}

.articles-list:not(.crayons-layout__content) .single-article .emoji {
  display: inline-block;
  margin-right: 4px
}

.articles-list:not(.crayons-layout__content) .single-article h4 {
  padding: 0px;
  margin: 0;
  font-weight: 500;
  position: absolute;
  bottom: 50px;
  left: 72px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8em
}

.articles-list:not(.crayons-layout__content) .single-article h4 a {
  color: var(--card-color-tertiary)
}

.articles-list:not(.crayons-layout__content) .single-article h4:hover {
  opacity: 0.9;
  text-decoration: underline
}

.articles-list:not(.crayons-layout__content) .single-article .tags {
  margin-top: 0px;
  font-size: 0.8em;
  position: absolute;
  display: inline-block;
  z-index: 5;
  left: 72px;
  bottom: 75px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0a0a0a;
  width: calc(100% - 72px)
}

.articles-list:not(.crayons-layout__content) .single-article .tags a {
  display: inline-block
}

.articles-list:not(.crayons-layout__content) .single-article .tags .tag {
  margin-right: 8px
}

.articles-list:not(.crayons-layout__content) .single-article .tags .tag:hover {
  text-decoration: underline
}

.articles-list:not(.crayons-layout__content) .single-article p {
  margin: 6px auto;
  line-height: 20px;
  font-size: 16px;
  color: #a3bcc9;
  padding-bottom: 16px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count {
  font-size: 13px;
  font-weight: bold;
  position: absolute;
  bottom: 12px;
  font-weight: 400;
  padding: 3px 6px;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  color: var(--card-color-tertiary)
}

.articles-list:not(.crayons-layout__content) .article-engagement-count a {
  color: var(--card-color-tertiary)
}

.articles-list:not(.crayons-layout__content) .article-engagement-count a:hover {
  opacity: 1
}

.articles-list:not(.crayons-layout__content) .article-engagement-count img {
  height: 18px;
  border: 0px;
  vertical-align: -4px;
  margin-right: 7px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.comments-count {
  left: 85px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.comments-count img {
  width: 28px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.reactions-count {
  left: 16px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button {
  right: 12px;
  border: 2px solid transparent;
  border-radius: 3px;
  text-align: center;
  bottom: 12px;
  background: #0d36ff;
  color: white;
  letter-spacing: 1px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button:hover,
.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button:focus {
  background: #0023cf
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button .bm-success {
  display: none;
  position: relative;
  top: 1px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button.selected {
  color: #274bff;
  background: transparent;
  padding-right: 0px
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button.selected .bm-initial {
  display: none
}

.articles-list:not(.crayons-layout__content) .article-engagement-count.engage-button.selected .bm-success {
  display: inline-block
}

.individual-podcast-link {
  display: flex;
  padding: 8px 16px;
  font-size: 0.8em;
  color: var(--card-color-tertiary)
}

.individual-podcast-link img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  vertical-align: top
}

.individual-podcast-link .individual-podcast-link-details {
  padding-left: 16px;
  flex: 1 1 auto
}

.individual-podcast-link strong {
  display: block;
  margin-bottom: 4px;
  padding-top: 0.2em;
  font-weight: 500;
  color: var(--card-color)
}

@media screen and (min-width: 500px) {
  .individual-podcast-link strong {
    font-size: 1.2em
  }
}

.individual-podcast-link:hover {
  background: #f5f6f7;
  background: var(--theme-container-background-hover, #f5f6f7)
}

.blank-space {
  height: 10px
}

:root {
  scroll-padding-top: var(--header-height)
}

body.default-header .crayons-article .crayons-article__body [id] {
  scroll-margin-top: var(--header-height)
}

article {
  padding: 0 0;
  position: relative
}

article .image {
  position: relative;
  width: 100%;
  margin: auto;
  max-width: 1024px;
  z-index: 2;
  height: 42vw
}

@media screen and (min-width: 880px) {
  article .image {
    height: 370px
  }
}

@media screen and (min-width: 950px) {
  article .image {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
  }
}

.container {
  width: 880px;
  max-width: 100%;
  margin: 0 auto 20px;
  text-align: left;
  background: var(--card-bg);
  border: none;
  border: var(--theme-container-border, none);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8))
}

@media screen and (min-width: 950px) {
  .container {
    border-radius: var(--radius);
    margin-bottom: var(--su-2)
  }
}

@media screen and (min-width: 950px) {
  .container {
    border-radius: 3px;
    margin-top: 24px
  }
}

.container.article {
  position: relative
}

.container .title {
  z-index: 6;
  position: relative;
  width: 81%;
  font-family: var(--ff-sans-serif);
  max-width: 710px;
  margin: auto
}

@media screen and (max-width: 750px) {
  .container .title {
    width: 90%
  }
}

@media screen and (max-width: 430px) {
  .container .title {
    width: 93%
  }
}

.container .title h1 {
  margin: 0 auto;
  padding: 14px 0 7px;
  font-weight: 700;
  min-height: 40px;
  font-size: calc(2vw + 26px);
  word-break: break-word;
  line-height: 1.28em
}

@media screen and (min-width: 1600px) {
  .container .title h1 {
    font-size: 57px
  }
}

.container .title h1 .title-block {
  display: inline-block
}

.container .title h1.medium {
  font-size: calc(1.82vw + 25px)
}

@media screen and (min-width: 1600px) {
  .container .title h1.medium {
    font-size: 47px
  }
}

.container .title h1.long {
  font-size: calc(1.48vw + 23px)
}

@media screen and (min-width: 1600px) {
  .container .title h1.long {
    font-size: 46px
  }
}

.container .title h1.longer {
  font-size: calc(1.44vw + 22px)
}

@media screen and (min-width: 1600px) {
  .container .title h1.longer {
    font-size: 45px
  }
}

.container .title h1.longest {
  font-size: calc(1.42vw + 22px)
}

@media screen and (min-width: 1600px) {
  .container .title h1.longest {
    font-size: 42px
  }
}

.container .title h3 {
  margin: 2px auto;
  padding: 0;
  padding: 0 3px 16px;
  font-weight: 500;
  color: var(--card-color-tertiary);
  font-size: 13.5px;
  line-height: 1.8em
}

@media screen and (min-width: 430px) {
  .container .title h3 {
    font-size: 15px
  }
}

.container .title h3 .profile-pic {
  width: 28px;
  height: 28px;
  border-radius: 50px;
  display: inline-block;
  vertical-align: -9px;
  margin-right: 2px;
  background: #f5f6f7
}

.container .title h3 a {
  color: var(--card-color-tertiary);
  text-decoration: none
}

.container .title h3 .icon-img,
.container .title h3 .reader-image-tiny {
  opacity: 0.5;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin: 0 1px
}

.container .title h3 .icon-img:hover,
.container .title h3 .reader-image-tiny:hover {
  opacity: 0.6
}

.container .title h3 .published-at {
  margin-right: 0;
  display: inline-block
}

.container .title h3 .posted-date-inline {
  display: inline-block
}

.container .title h3 .action-space {
  padding: 0 0 0 0;
  display: inline-flex;
  min-width: 44px
}

.container .title h3 .action-space a {
  display: inline-block;
  background: #66e2d5;
  color: #0a0a0a;
  padding: 2px 12px 3px;
  border-radius: 3px;
  line-height: 1.1em;
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-stretch: condensed;
  margin-right: 4px
}

@media screen and (max-width: 376px) {
  .container .title h3 .action-space a {
    padding: 2px 6px 3px;
    margin-left: 3px;
    margin-left: 5px
  }

  .container .title h3 .action-space a .post-word {
    display: none
  }
}

.container .title .tags .tag {
  display: inline-block;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 5px 3px;
  border-radius: 2px;
  background: #d6d9e0;
  color: #606570
}

.container .title .tags .tag:hover {
  opacity: 0.9
}

.container .body {
  margin: auto;
  width: 82%;
  font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
  font-size: 21px;
  line-height: 32px;
  background: var(--card-bg);
  position: relative;
  padding: 5px 0px;
  overflow-wrap: break-word
}

.container .body a code {
  color: #557de8
}

.container .body a.anchor {
  padding-top: 0;
  margin-top: 0;
  top: -50px;
  display: block;
  visibility: hidden;
  position: relative
}

.container .body h1,
.container .body h2,
.container .body h3,
.container .body h4,
.container .body h5,
.container .body h6 {
  font-family: var(--ff-sans-serif);
  margin: 0.3em auto;
  padding-left: 4px;
  padding-right: 4px
}

.container .body h1 {
  font-size: 1.85em;
  line-height: 1.14em;
  font-weight: 400
}

.container .body h2 {
  font-size: 1.7em;
  font-weight: 400;
  line-height: 1.14em;
  padding-bottom: 0;
  margin-bottom: 0.5em
}

.container .body h3 {
  font-size: 1.32em;
  font-weight: 400
}

.container .body hr {
  width: calc(25% + 12px);
  opacity: 0.1;
  border-width: 1px;
  border-style: solid;
  border-color: var(--body-color);
  margin: 1.3em auto 1.5em
}

.container .body p {
  margin: 0.95em 0 1.2em;
  padding: 0.2em
}

.container .body ul,
.container .body ol {
  padding-left: 6px;
  margin: 0.8em 0.7em 0.8em 1.9em
}

.container .body ol br {
  line-height: 0;
  margin: 0;
  padding: 0
}

.container .body ul {
  list-style-type: square
}

.container .body ul br {
  line-height: 0;
  margin: 0;
  padding: 0
}

.container .body ul p {
  margin: 0;
  padding: 0
}

.container .body ul ul {
  margin: 0 0.7em 0 1.9em;
  list-style-type: circle
}

.container .body ul ul ul {
  list-style-type: disc
}

.container .body ul ul ul ul {
  list-style-type: square
}

.container .body li {
  margin: 0.3em auto
}

.container .body figure {
  margin: 0
}

.container .body figcaption {
  font-style: italic;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.4em;
  color: var(--body-color);
  display: block
}

.container .body p+figcaption {
  margin-top: -0.8em
}

@media screen and (max-width: 750px) {
  .container .body {
    width: 92%
  }
}

@media screen and (max-width: 430px) {
  .container .body {
    font-size: 17.5px;
    line-height: 26px;
    width: 94%;
    margin-left: 3%
  }

  .container .body ul,
  .container .body ol {
    margin: 0.8em 0.7em 0.8em 1.4em
  }

  .container .body h1 {
    font-size: 1.6em
  }

  .container .body h2 {
    font-size: 1.4em
  }

  .container .body h3 {
    font-size: 1.16em
  }
}

.container .body blockquote {
  border-left: calc(0.2vw + 2px) solid #333;
  padding: 0.1% 6% 0.1% 4%;
  margin: 1.6em 1vw;
  font-size: 0.92em;
  line-height: 1.4em
}

.container .body blockquote p {
  padding: 0;
  margin: 0.95em 0 0.95em
}

.container .body code {
  margin: auto;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.1em 0.3em 0;
  border-radius: 2px;
  font-size: 0.84em;
  vertical-align: 0;
  max-width: 100%;
  line-height: 1.6em
}

.container .body kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5
}

.container .body pre {
  background: #29292e;
  border-radius: 2px;
  overflow-x: auto;
  color: #eff0f9;
  line-height: 1.42em;
  padding-left: 4%;
  padding-right: 7%;
  font-size: 0.7em;
  width: 97%;
  margin-left: -3%;
  padding-top: 6%;
  padding-bottom: 6%;
  border-radius: 0;
  overflow-wrap: normal
}

@media screen and (min-width: 430px) {
  .container .body pre {
    width: 111%;
    margin-left: -11%;
    padding-left: 9%;
    padding-right: 2%
  }
}

.container .body pre code {
  background: #29292e;
  color: #eff0f9;
  white-space: pre
}

.container .body img {
  height: auto;
  position: relative;
  display: block;
  margin: auto;
  left: -4%;
  max-width: 108%;
  max-height: calc(50vh + 180px)
}

@media screen and (min-width: 430px) {
  .container .body img {
    left: -6px;
    max-width: calc(100% + 12px)
  }
}

.container .body a.article-body-image-wrapper {
  cursor: zoom-in
}

.container .body iframe {
  width: 100%;
  border: 0;
  margin: 1.2em 0;
  border-radius: var(--radius)
}

.container .body .fluidvids {
  margin: 1em 0
}

.container .body .fluidvids iframe {
  margin: 0
}

.container .body .table-wrapper-paragraph {
  width: 100%;
  margin-left: 0%;
  overflow-x: auto
}

@media screen and (min-width: 430px) {
  .container .body .table-wrapper-paragraph {
    width: 108%;
    margin-left: -4%
  }
}

@media screen and (min-width: 800px) {
  .container .body .table-wrapper-paragraph {
    width: 110%;
    margin-left: -5%
  }
}

.container .body table {
  font-family: var(--ff-sans-serif);
  border-collapse: collapse;
  font-size: 0.78em;
  margin: 0.8em auto 1.2em;
  table-layout: fixed
}

@media screen and (min-width: 500px) {
  .container .body table {
    font-size: 0.9em
  }
}

.container .body table th {
  border: 1px solid #dbdbdb;
  padding: 5px 1vw;
  background: var(--body-bg);
  text-align: left
}

.container .body table td {
  border: 1px solid #dbdbdb;
  padding: 5px 1vw;
  box-sizing: border-box
}

.container .body .twitter-tweet {
  margin: auto
}

.container .html-variant-wrapper {
  width: 88%;
  margin: 0 auto 25px;
  display: none
}

@media screen and (min-width: 500px) {
  .container .html-variant-wrapper {
    width: 82%
  }
}

.ff-container {
  --gif-bg: rgb(var(--black));
  --gif-color: rgb(var(--white));
  --gif-btn-z-index: 2;
  width: fit-content;
  width: -moz-fit-content
}

.ff-container canvas {
  border-radius: var(--radius);
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
  min-width: 100%;
  max-height: calc(50vh + 180px)
}

.ff-container img[data-animated='true'] {
  margin: 0;
  cursor: pointer
}

.ff-container .gif-button {
  --bg: var(--gif-bg);
  --bg-hover: var(--gif-bg);
  --color: var(--gif-color);
  --color-hover: var(--gif-color);
  position: absolute;
  bottom: 0;
  right: 0;
  margin: var(--su-1);
  z-index: var(--gif-btn-z-index);
  display: flex;
  align-items: center;
  padding: var(--su-1) var(--su-2);
  font-weight: var(--fw-bold)
}

.ff-container .gif-button:hover:enabled,
.js-focus-visible .ff-container .gif-button.focus-visible:focus,
.ff-container .gif-button[aria-pressed='true'] {
  --bg: var(--gif-bg);
  --bg-hover: var(--gif-bg);
  --color: var(--gif-color);
  --color-hover: var(--gif-color);
  z-index: var(--gif-btn-z-index)
}

.ff-container .gif-button[aria-pressed='false'] .gif-pause {
  display: inline-block
}

.ff-container .gif-button[aria-pressed='false'] .gif-play {
  display: none
}

.ff-container .gif-button[aria-pressed='true'] .gif-pause {
  display: none
}

.ff-container .gif-button[aria-pressed='true'] .gif-play {
  display: inline-block
}

center .ff-container {
  left: auto;
  left: initial;
  transform: none
}

body.user-role--admin .crayons-article__actions,
.user-role--super_admin .crayons-article__actions,
.current-user-is-article-author .crayons-article__actions {
  display: block !important;
  min-height: 42px !important
}

html.image-lightbox-open {
  overflow: hidden
}

#image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease
}

#image-lightbox-overlay.image-lightbox--visible {
  opacity: 1;
  pointer-events: auto
}

#image-lightbox-overlay.image-lightbox--visible .image-lightbox__img {
  transform: scale(1);
  opacity: 1
}

.image-lightbox__close {
  position: fixed;
  top: 0.4vw;
  right: 0.4vw;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease
}

.image-lightbox__close:hover,
.image-lightbox__close:focus-visible {
  transform: scale(1.1);
  outline: none
}

.image-lightbox__img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 8px
}

.image-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  width: auto;
  height: auto;
  border-radius: 6px;
  -o-object-fit: contain;
  object-fit: contain;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease
}

@media screen and (min-width: 1200px) {
  .image-lightbox__img {
    max-width: 90vw
  }
}

.crayons-layout__comments-billboard .crayons-bb,
.crayons-layout__comments-billboard .crayons-unit {
  padding-left: var(--content-padding-x);
  padding-bottom: var(--su-6)
}

.crayons-layout__comments-billboard .crayons-bb .c-indicator.crayons-bb__indicator,
.crayons-layout__comments-billboard .crayons-bb .c-indicator.crayons-unit__indicator,
.crayons-layout__comments-billboard .crayons-unit .c-indicator.crayons-bb__indicator,
.crayons-layout__comments-billboard .crayons-unit .c-indicator.crayons-unit__indicator {
  line-height: 15px
}

@media (min-width: 640px) {

  .crayons-layout__comments-billboard .crayons-bb .text-styles,
  .crayons-layout__comments-billboard .crayons-unit .text-styles {
    padding-right: var(--su-8)
  }
}

@media (min-width: 768px) {

  .billboard .crayons-dropdown.sponsorship-dropdown,
  .bb-placement .crayons-dropdown.sponsorship-dropdown,
  .bb-placement .crayons-dropdown.bb-dropdown {
    max-width: 200px;
    min-width: auto
  }
}

@media (min-width: 1024px) {

  .billboard .crayons-dropdown.sponsorship-dropdown,
  .bb-placement .crayons-dropdown.sponsorship-dropdown,
  .bb-placement .crayons-dropdown.bb-dropdown {
    max-width: 250px
  }
}

.billboard .crayons-dropdown.sponsorship-dropdown hr,
.bb-placement .crayons-dropdown.sponsorship-dropdown hr,
.bb-placement .crayons-dropdown.bb-dropdown hr {
  border: 0.5px solid var(--divider);
  margin: 8px
}

.billboard .ltag_cta,
.bb-placement .ltag_cta {
  padding-top: var(--su-2);
  padding-bottom: var(--su-2)
}

@media (max-width: 640px) {

  .billboard .ltag_cta,
  .bb-placement .ltag_cta {
    display: block
  }
}

.crayons-card.billboard .ltag_cta,
.crayons-card.bb-placement .ltag_cta {
  display: block
}

.crayons-card.hero-billboard .ltag_cta {
  display: block
}

.long-bb-body {
  max-height: calc(100vh - 200px);
  overflow: hidden
}

.long-bb-bottom {
  height: 180px;
  background: linear-gradient(to top, var(--card-bg), transparent);
  margin-top: -180px;
  position: relative;
  z-index: 5
}

.popover-billboard {
  z-index: var(--z-popover);
  animation: popoverEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -6px 34px rgba(0, 0, 0, 0.14), 0 -16px 84px rgba(0, 0, 0, 0.18), 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  max-height: calc(100vh - var(--header-height));
  max-width: calc(var(--site-width) + 100px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important
}

.popover-billboard__header {
  padding: var(--su-2) var(--su-4) 0;
  align-items: center
}

.popover-billboard__close {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease
}

.popover-billboard__close:hover {
  opacity: 1
}

.popover-billboard__content {
  padding: var(--su-3) var(--su-5) var(--su-5);
  font-size: calc(0.8em + 0.58vw);
  max-width: calc(var(--site-width) - var(--su-8));
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height) - var(--su-8))
}

@media (min-width: 1280px) {
  .popover-billboard {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important
  }

  .popover-billboard .crayons-bb__header,
  .popover-billboard .crayons-unit__header,
  .popover-billboard .popover-billboard__content {
    margin-left: calc(54% - (var(--site-width) / 2))
  }

  .popover-billboard .popover-billboard__content {
    font-size: 1.22em
  }

  .popover-billboard .crayons-bb__header {
    padding-left: var(--su-4)
  }
}

@media (min-width: 768px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .popover-billboard {
    left: 50px;
    width: calc(100% - 50px)
  }
}

@media (min-width: 1460px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .popover-billboard {
    left: 0;
    width: 100%
  }
}

.popover-billboard--menuopenupwards .sponsorship-dropdown,
.popover-billboard--menuopenupwards .bb-dropdown {
  top: auto;
  bottom: var(--su-8)
}

.hide-popover-billboard .popover-billboard {
  display: none
}

@media (max-width: 640px) {
  .body-billboard {
    margin: 0 -4px 0;
    padding: 7px 6px !important
  }
}

@media (min-width: 768px) {
  .body-billboard {
    margin: 0 -14px 0
  }
}

.hero-billboard {
  margin: var(--su-2) 0 0
}

.hero-billboard h1,
.hero-billboard h2,
.hero-billboard h3,
.hero-billboard p {
  text-align: center
}

@media (max-width: 640px) {
  .hero-billboard {
    display: block
  }
}

@media (min-width: 768px) {
  .hero-billboard {
    margin: var(--su-2) var(--su-2) 0
  }
}

@media (min-width: 1024px) {
  .hero-billboard {
    margin: var(--su-4) var(--su-4) 0
  }
}

@media (min-width: 1280px) {
  .hero-billboard {
    max-width: var(--site-width);
    margin: var(--su-4) var(--su-4) 0
  }
}

@media (min-width: 1284px) {
  .hero-billboard {
    max-width: var(--site-width);
    margin: var(--su-4) auto 0
  }
}

@media (min-width: 640px) {
  .hero-billboard h1 {
    font-size: var(--fs-3xl)
  }
}

.crayons-layout__comments-billboard .crayons-card.billboard .ltag_cta,
.crayons-story.billboard .ltag_cta,
.crayons-layout__comments-billboard .crayons-card.bb-placement .ltag_cta,
.crayons-story.bb-placement .ltag_cta {
  padding-right: var(--su-7);
  padding-left: var(--su-7)
}

@keyframes popoverEnter {
  from {
    opacity: 0;
    transform: translateY(100%)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

#audiocontent {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: var(--z-sticky);
  font-family: var(--ff-sans-serif);
  display: block
}

#audiocontent #progressBar {
  color: #fff;
  width: 100%;
  height: calc(48px + 1vh);
  margin-top: 100px;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: left;
  background: #ececec;
  display: none
}

#audiocontent #progressBar.playing {
  display: block
}

#audiocontent #progressBar #episode-profile-image {
  height: calc(48px + 1vh);
  width: calc(48px + 1vh)
}

#audiocontent #progressBar #animated-bars {
  position: absolute;
  bottom: -12px;
  left: -15px;
  width: 80px;
  opacity: 0.3;
  display: none
}

#audiocontent #progressBar #animated-bars.playing {
  display: block
}

#audiocontent #progressBar #barPlayPause {
  height: calc(48px + 1vh);
  width: calc(48px + 1vh);
  background: #202020;
  position: absolute;
  left: calc(48px + 1vh);
  bottom: 0px;
  cursor: pointer
}

#audiocontent #progressBar #barPlayPause .butt {
  width: calc(35px + 0.5vh);
  margin: calc(8px + 0.17vh) 7px
}

#audiocontent #progressBar #barPlayPause .pause-butt {
  display: none
}

#audiocontent #progressBar #barPlayPause.playing .play-butt {
  display: none
}

#audiocontent #progressBar #barPlayPause.playing .pause-butt {
  display: block
}

#audiocontent #progressBar .showing {
  display: block
}

#audiocontent #progressBar .hidden {
  display: none
}

#audiocontent #progressBar #volume {
  height: calc(48px + 1vh);
  width: 36px;
  background: #202020;
  position: absolute;
  left: calc(100px + 1vh);
  bottom: 0px;
  cursor: pointer
}

#audiocontent #progressBar #volume img {
  padding: 3px;
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: -11px
}

#audiocontent #progressBar #volume #speed {
  font-weight: 300;
  font-size: calc(12px + 0.2vh);
  padding: 3px 0px;
  width: 28px;
  margin-left: -0.5px;
  text-align: center;
  margin-top: calc(2px + 0.5vh);
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: transparent;
  color: #c9c9c9
}

#audiocontent #progressBar #volume .volume-icon-wrapper {
  padding: 1px 0px
}

#audiocontent #progressBar #volume #volumeindicator .range-wrapper {
  position: absolute;
  top: 0px;
  left: 26px;
  background: #202020;
  z-index: var(--z-elevate);
  width: 0;
  overflow: hidden;
  transition: width 200ms ease-out 95ms;
  padding: 8px 0px 5px;
  text-align: center
}

#audiocontent #progressBar #volume #volumeindicator .range-wrapper input {
  width: 80%;
  cursor: pointer
}

@media screen and (min-width: 430px) {
  #audiocontent #progressBar #volume #volumeindicator:hover .range-wrapper {
    width: 170px
  }
}

#audiocontent #progressBar .buffer-wrapper {
  height: calc(48px + 1vh);
  position: absolute;
  left: calc(136px + 1vh);
  right: 0;
  bottom: 0;
  cursor: pointer
}

#audiocontent #progressBar .buffer-wrapper #progress {
  background-color: #00ffa3;
  height: calc(48px + 1vh);
  display: inline-block;
  position: relative;
  transition: width 0.25s ease-in-out
}

#audiocontent #progressBar .buffer-wrapper #buffer {
  background-color: #96ffd9;
  height: calc(48px + 1vh);
  display: inline-block;
  position: absolute;
  bottom: 0;
  transition: width 0.15s ease-in-out
}

#audiocontent #progressBar .buffer-wrapper #time {
  position: absolute;
  right: calc(50px + 0.1vh + 1.5vw);
  top: calc(16px + 0.1vh);
  color: #a1a1a1;
  font-size: calc(14px + 0.2vh);
  background: rgba(236, 236, 236, 0.74);
  padding: 2px;
  pointer-events: none
}

#audiocontent #progressBar .buffer-wrapper #closebutt {
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  right: 0;
  top: 0;
  bottom: 0;
  background: white;
  border-left: #ececec;
  margin: 0px;
  padding: 0px;
  padding-top: calc(8px + 0.2vh);
  color: #535353;
  font-size: 13.5px;
  width: calc(42px + 0.1vh + 1.5vw);
  text-align: center;
  transition: all 0.3s ease 0s;
  white-space: nowrap;
  font-size: calc(25px + 0.2vh)
}

#audiocontent #progressBar .buffer-wrapper #closebutt:hover {
  color: #ff4343
}

.forem-background {
  fill: var(--accent-brand)
}

.dashboard-container .manage-header {
  background: #0045ff
}

.dashboard-container .single-article {
  padding: 5px 15px;
  background: var(--card-bg);
  border: none;
  border: var(--theme-container-border, none);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
  box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8));
  position: relative;
  overflow: auto
}

@media screen and (min-width: 950px) {
  .dashboard-container .single-article {
    border-radius: var(--radius);
    margin-bottom: var(--su-2)
  }
}

.dashboard-container .single-article.thanks-for-suggesting-a-tweet {
  background: #bcf2ed;
  padding: 30px 0px;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold
}

.dashboard-container .single-article .dashboard-collection-org-details .dashboard-top-pill {
  background: #e4e7e9;
  background: var(--theme-container-accent-background, #e4e7e9);
  color: var(--body-color);
  margin-right: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 10px;
  display: inline-block;
  font-size: 0.9em
}

.dashboard-container .single-article .dashboard-meta-details {
  font-size: 0.85em;
  padding: 3px 0px 6px;
  color: var(--card-color-tertiary)
}

.dashboard-container .single-article h2 {
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 8px;
  font-size: 22px;
  overflow: auto;
  display: inline-block;
  width: 100%
}

@media screen and (min-width: 800px) {
  .dashboard-container .single-article h2 {
    font-size: 34px
  }
}

.dashboard-container .single-article h2 .block-link {
  display: inline
}

.dashboard-container .single-article h2 img {
  height: 40px;
  width: 40px;
  border-radius: 80px;
  vertical-align: -8px
}

.dashboard-container .single-article h2 .dashboard-username {
  color: #666666;
  font-size: 0.6em;
  vertical-align: 0.16em
}

.dashboard-container .single-article h2 .dashboard-follow {
  background: #66e2d5;
  background: var(--theme-dashboard-followers-follow-background, #66e2d5);
  border: 0;
  border-radius: 5px;
  color: #0a0a0a;
  color: var(--theme-dashboard-followers-follow-color, #0a0a0a);
  font-size: 15.9px;
  padding: 2px 10px
}

@media screen and (min-width: 520px) {
  .dashboard-container .single-article h2 .dashboard-follow {
    font-size: 20px
  }
}

@media screen and (min-width: 750px) {
  .dashboard-container .single-article h2 .dashboard-follow.follow-tag {
    margin: 8px 0px 8px 10px
  }
}

.dashboard-container .single-article h2 .dashboard-follow.follow-user {
  float: right;
  margin-top: 8px
}

@media screen and (min-width: 750px) {
  .dashboard-container .single-article h2 .follow-tag-actions {
    float: right
  }
}

.dashboard-container .single-article h2 form {
  background: #f5f6f7;
  background: var(--theme-container-accent-background, #f5f6f7);
  padding: 8px 15px;
  margin-bottom: 10px;
  border-radius: 3px
}

@media screen and (min-width: 750px) {
  .dashboard-container .single-article h2 form {
    display: inline-block
  }
}

.dashboard-container .single-article h2 form input {
  font-size: 16px;
  border-radius: 3px;
  padding: 3px 8px;
  width: 50px;
  border: 1px solid #0a0a0a;
  font-weight: bold
}

.dashboard-container .single-article h2 form input[type='submit'] {
  width: auto;
  background: #66e2d5;
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  margin-left: 5px
}

.dashboard-container .single-article h4 {
  margin-top: 0px;
  margin-bottom: 9px;
  margin-left: 2px;
  font-weight: 300;
  font-size: 16px;
  color: #434e57
}

.dashboard-container .single-article .dashboard-actions {
  padding: 7px 0px 10px
}

.dashboard-container .single-article .dashboard-actions form {
  margin: 0;
  padding: 0;
  display: inline
}

.dashboard-container .single-article .dashboard-pageviews-indicator {
  display: inline-block;
  font-family: var(--ff-monospace);
  color: #333333;
  background: white;
  text-align: center;
  padding: 2px 8px
}

.dashboard-container .single-article form {
  padding: 10px 0px;
  font-size: 15px;
  font-stretch: condensed
}

.dashboard-container .single-article form select {
  margin: 0px 4px;
  vertical-align: 2px
}

.dashboard-container .single-article form input[type='submit'] {
  border: 0px;
  font-size: 15px
}

.dashboard-container .single-article .single-article__details {
  margin: 10px 0px
}

.dashboard-container .single-article .single-article__details .user {
  color: #666666
}

.dashboard-container .single-article .single-article__details .tag {
  margin-left: 10px
}

.analytics-container {
  max-width: 1400px;
  margin: 0 auto
}

.crayons-tabs--analytics {
  width: -moz-min-content;
  width: min-content;
  margin: var(--su-1) auto var(--su-4)
}

@media screen and (min-width: 800px) {
  .crayons-tabs--analytics {
    margin: var(--su-1) var(--su-4) var(--su-4)
  }
}

.summary-stats {
  text-align: center;
  display: flex;
  justify-content: space-between
}

.summary-stats__col {
  flex: 1 1;
  min-height: 100px
}

.crayons-tabs--analytics {
  justify-content: center
}

.graphs {
  display: flex;
  justify-content: space-between
}

.graphs__col {
  flex: 1 1
}

.graphs .charts-container {
  padding: var(--su-4);
  height: 320px
}

.graphs .charts-container canvas {
  min-height: 280px;
  max-height: 280px
}

@media screen and (max-width: 640px) {

  .summary-stats,
  .graphs {
    display: block
  }

  .summary-stats__col,
  .graphs__col {
    display: block;
    width: 90%;
    margin: 10px auto
  }

  .crayons-tabs--analytics {
    width: 100%
  }
}

.card {
  border: 1px solid #d6d6d6;
  border: var(--theme-container-border, 1px solid #d6d6d6);
  box-shadow: 3px 3px 0px #bababa;
  box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #bababa);
  border-radius: 3px;
  padding: 20px;
  margin: 5px;
  background-color: #fff;
  background-color: var(--theme-container-background, #fff)
}

.card h4 {
  font-size: 0.8em;
  margin: 0px;
  padding: 0px
}

.card .stat-percentage {
  font-size: 0.8em
}

.card table {
  margin: 1rem auto;
  text-align: left;
  width: 50%
}

.card table thead {
  line-height: 3rem
}

.card table thead th:last-child {
  text-align: right
}

.card table tbody {
  line-height: 2rem
}

.card table tbody td:last-child {
  text-align: right
}

.featured-stat {
  font-size: 2em;
  font-weight: bold
}

.header-card {
  max-width: 100%
}

.dashboard-manage-header {
  background: #002380;
  color: white;
  padding: 32px 0;
  line-height: 1.3em;
  box-shadow: 0 100px 0 #002380
}

.dashboard-manage-header .manage-page-error {
  background: #ff0000;
  color: white;
  padding: 20px 10px;
  line-height: 1.4em;
  border-radius: 3px
}

.dashboard-manage-header .manage-page-success {
  background: #66e2d5;
  padding: 20px 10px;
  line-height: 1.4em;
  border-radius: 3px
}

.dashboard-manage-header li {
  margin: 20px auto
}

.dashboard-manage-header a {
  color: white;
  text-decoration: underline
}

.dashboard-manage-header .dashboard-manage-header-inner-container {
  width: 800px;
  max-width: 96%;
  margin: 10px auto
}

.dashboard-manage-header .dashboard-manage-nav {
  padding: 10px 0px;
  font-size: 0.9em;
  font-weight: bold
}

.dashboard__tag__container {
  height: 195px;
  justify-content: space-between
}

.dashboard__tag__container .crayons-tag {
  padding-top: 0;
  padding-bottom: 0
}

.manage-page-with-sidebar {
  display: flex;
  gap: var(--su-4);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--su-4)
}

@media screen and (max-width: 1023px) {
  .manage-page-with-sidebar {
    flex-direction: column;
    padding: var(--su-2)
  }
}

.manage-sidebar {
  position: sticky;
  top: var(--su-4);
  flex: 0 0 240px;
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--su-4)
}

@media screen and (max-width: 1023px) {
  .manage-sidebar {
    position: static;
    flex: 1 1
  }
}

@media screen and (max-width: 639px) {
  .manage-sidebar {
    padding: var(--su-3)
  }
}

.manage-sidebar-title {
  font-size: var(--fs-l);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--su-4) 0;
  color: var(--card-color)
}

.manage-sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.manage-sidebar-list li {
  margin: 0
}

.manage-sidebar-link {
  display: block;
  padding: var(--su-2) var(--su-3);
  margin-bottom: var(--su-1);
  color: var(--card-color);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all var(--transition-props);
  font-weight: var(--fw-medium)
}

.manage-sidebar-link:hover {
  background: var(--card-secondary-bg);
  color: var(--card-color);
  text-decoration: none
}

.manage-sidebar-link.active {
  background: var(--accent-brand);
  color: var(--base-inverted);
  font-weight: var(--fw-bold)
}

.manage-sidebar-link.active:hover {
  background: var(--accent-brand-darker);
  color: var(--base-inverted)
}

.manage-main-content {
  flex: 1 1;
  min-width: 0
}

@media screen and (max-width: 1023px) {
  .manage-main-content {
    width: 100%
  }
}

@media (min-width: 768px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .manage-page-with-sidebar {
    max-width: calc(1280px - 50px);
    width: calc(100% - 50px);
    margin-left: 50px
  }
}

@media (min-width: 1460px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .manage-page-with-sidebar {
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    transform: translateX(20px)
  }
}

.github-repos {
  max-height: 400px;
  overflow-y: auto;
  background: var(--card-bg)
}

.github-repos.loading-repos {
  height: 400px;
  background: white;
  background-size: 50px
}

.github-repos.github-repos-errored {
  height: 400px;
  color: #ff0000;
  padding: 2rem
}

.github-repos .github-repo-row {
  background: var(--card-bg);
  padding: var(--su-3)
}

.github-repos .github-repo-row .github-repo-row-name {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-weight: var(--fw-medium)
}

.github-repos .github-repo-row .github-repo-row-name .c-indicator {
  margin-left: 5px
}

.github-repos .github-repo-row .github-repo-row-name button:disabled {
  padding: var(--su-2);
  background: var(--accent-brand);
  background-size: contain;
  height: 40px;
  width: 80px
}

.github-repos .github-repo-row .github-repo-row-name button button,
.github-repos .github-repo-row .github-repo-row-name button a[role='button'],
.github-repos .github-repo-row .github-repo-row-name.response-template-row-name button,
.github-repos .github-repo-row .github-repo-row-name.response-template-row-name a[role='button'] {
  width: 80px;
  margin-left: 2.5px;
  margin-right: 2.5px;
  text-align: center
}

.signout_confirm-wrapper {
  padding: calc(15% + 50px) 2% 30%;
  text-align: center
}

.membership-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row wrap;
  background: var(--card-bg);
  border-radius: 5px;
  border: 1px solid #dbdbdb;
  padding: 0.5rem 0 0.8rem 0.5rem
}

.membership-status dt,
.membership-status label {
  flex-basis: 40%;
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 0.3rem;
  padding: 0.2rem
}

.membership-status dd {
  flex-basis: 40%;
  flex-grow: 1;
  margin-top: 0.3rem;
  padding: 0.2rem
}

.membership-status dd .no {
  color: #cc0000
}

.crayons-notice--danger h3 {
  color: var(--accent-danger-darker)
}

:root {
  --podcast-spinning-animation: spin 20s linear infinite
}

.podcast-episode-container .hero {
  padding-bottom: 30px;
  text-align: center
}

.podcast-episode-container .hero .title {
  padding-top: 10px;
  background: #0a0a0a;
  min-height: 300px;
  margin-bottom: -60px;
  color: white
}

@media screen and (min-width: 600px) {
  .podcast-episode-container .hero .title {
    padding-top: 20px;
    min-height: 400px;
    margin-bottom: -120px
  }
}

.podcast-episode-container .hero .title h2 {
  font-weight: 500;
  margin: 0;
  margin-top: 40px;
  font-size: 20px;
  color: #ebf3f5
}

.podcast-episode-container .hero .title h2 a {
  color: white;
  display: inline-block;
  margin-right: 4px
}

.podcast-episode-container .hero .title h2 img {
  height: 28px;
  width: 28px;
  vertical-align: -5px;
  height: 23px;
  width: 23px;
  vertical-align: -4px;
  margin-right: 8px;
  border-radius: 30px
}

.podcast-episode-container .hero .title h2 .follow-action-button {
  width: 260px;
  border-radius: 3px;
  border: 0px;
  display: block;
  margin: 20px auto;
  padding: 10px 0px;
  font-size: 25px
}

@media screen and (min-width: 600px) {
  .podcast-episode-container .hero .title h2 {
    font-size: 24px
  }

  .podcast-episode-container .hero .title h2 img {
    height: 28px;
    width: 28px;
    vertical-align: -5px
  }
}

.podcast-episode-container .hero .title h1 {
  font-weight: 700;
  margin: 15px auto 18px;
  font-size: 30px;
  line-height: 31px;
  max-width: 94%
}

@media screen and (min-width: 680px) {
  .podcast-episode-container .hero .title h1 {
    font-size: 45px;
    line-height: 55px;
    margin-bottom: 28px
  }
}

@media screen and (min-width: 800px) {
  .podcast-episode-container .hero .title h1 {
    font-size: 49px;
    line-height: 58px
  }
}

.podcast-episode-container .hero .title h1.smaller {
  font-size: 23px;
  line-height: 25.5px
}

@media screen and (min-width: 490px) {
  .podcast-episode-container .hero .title h1.smaller {
    font-size: 30px;
    line-height: 35px
  }
}

@media screen and (min-width: 680px) {
  .podcast-episode-container .hero .title h1.smaller {
    font-size: 35px;
    line-height: 39px;
    margin-bottom: 20px
  }
}

@media screen and (min-width: 800px) {
  .podcast-episode-container .hero .title h1.smaller {
    font-size: 45px;
    line-height: 50px
  }
}

.podcast-episode-container .hero .title time {
  padding-bottom: 70px;
  display: block
}

@media screen and (min-width: 600px) {
  .podcast-episode-container .hero .title time {
    padding-bottom: 150px
  }
}

.podcast-episode-container .hero .status-message {
  margin: auto;
  margin-top: -52px;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  color: #0a0a0a;
  padding: 2px 0px 3px;
  border-radius: 2px;
  transition: opacity 400ms ease;
  background: white;
  width: 130px;
  font-size: 16px;
  font-weight: bold;
  display: none
}

@media screen and (min-width: 680px) {
  .podcast-episode-container .hero .status-message {
    margin-top: -63px
  }
}

.podcast-episode-container .hero .status-message.showing {
  display: block
}

.podcast-episode-container .hero .record-wrapper {
  background-color: transparent;
  border: 0
}

.podcast-episode-container .hero .playing .record .main-image {
  animation-play-state: running
}

.podcast-episode-container .hero .playing .record .play-butt {
  display: none
}

.podcast-episode-container .hero .playing .record .pause-butt {
  display: block
}

.podcast-episode-container .hero .record {
  position: relative;
  cursor: pointer;
  width: 72vw;
  height: 72vw;
  margin: auto
}

@media screen and (min-width: 380px) {
  .podcast-episode-container .hero .record {
    width: 270px;
    height: 270px
  }
}

@media screen and (min-width: 680px) {
  .podcast-episode-container .hero .record {
    width: 290px;
    height: 290px
  }
}

.podcast-episode-container .hero .record .main-image {
  border-radius: 450px;
  box-shadow: 5px 5px 60px rgba(0, 0, 0, 0.3);
  background: #0a0a0a;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  animation: spin 20s linear infinite;
  animation: var(--podcast-spinning-animation);
  animation-play-state: paused;
  -webkit-backface-visibility: hidden
}

@media screen and (min-width: 680px) {
  .podcast-episode-container .hero .record .main-image {
    width: 290px;
    min-height: 290px
  }
}

.podcast-episode-container .hero .record .butt {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px
}

.podcast-episode-container .hero .record .pause-butt {
  display: none
}

.podcast-episode-container .hero .record.playing .main-image {
  animation-play-state: running
}

.podcast-episode-container .hero .record.playing .play-butt {
  display: none
}

.podcast-episode-container .hero .record.playing .pause-butt {
  display: block
}

.podcast-episode-container .hero audio {
  display: none
}

.podcast-episode-container .container {
  margin-bottom: 60px;
  margin-top: 20px
}

.podcast-episode-container .container .comments-container {
  margin-bottom: 20px
}

@keyframes spin {
  100% {
    transform: rotate(360deg)
  }
}

.sidebar-additional .widget .widget-suggested-follows-container h4 {
  margin: 0
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions {
  display: flex;
  align-items: center;
  margin-bottom: 8px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions+.widget-list-item__suggestions {
  border-top: 1px solid #dbdbdb;
  border-top: var(--theme-border, 1px solid #dbdbdb);
  padding-top: 8px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__avatar {
  width: 48px;
  height: 48px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content {
  flex: 1 1 auto;
  padding-left: 8px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content h5 {
  all: unset;
  display: block;
  margin-bottom: 4px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content h5 a {
  color: rgba(10, 10, 10, 0.8);
  color: var(--theme-color, rgba(10, 10, 10, 0.8))
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content h5 a:hover {
  color: var(--body-color)
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: absolute;
  top: auto;
  top: initial;
  left: 15px
}

.sidebar-additional .widget .widget-suggested-follows-container .widget-body .widget-list-item__suggestions .widget-list-item__content .widget-list-item__follow-button {
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 2px 8px;
  text-align: center;
  background-color: #66e2d5;
  color: #0a0a0a;
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-weight: 900;
  font-size: 0.8em
}

.sidebar-additional .widget .widget-image {
  margin: auto -16px
}

.sidebar-additional .widget .widget-button {
  display: block;
  text-align: center;
  padding: 8px 16px;
  margin: auto -16px;
  border-radius: 3px
}

.sidebar-additional .widget .write {
  margin: 8px -16px;
  background: var(--button-primary-bg);
  color: var(--button-primary-color)
}

.sidebar-additional .widget .all-stories {
  border: 2px solid #d6d6d6;
  border: var(--theme-border, 2px solid #d6d6d6);
  color: var(--body-color);
  background: var(--base-inverted)
}

.article-form-video-preview {
  text-align: center;
  padding-top: 60px;
  margin: auto;
  max-width: 880px
}

.article-form-video-preview .article-form-video-image-url {
  padding-top: 15px;
  font-family: var(--ff-monospace)
}

.article-form-video-preview .article-form-video-image-url input {
  padding: 3px;
  font-size: 1em;
  border-radius: 3px;
  border: 1px solid #cecece;
  border: var(--theme-container-border, 1px solid #cecece);
  width: 340px;
  margin: 10px
}

.article-form-video-preview .article-form-video-image-url input[type='submit'] {
  padding: 3px 8px;
  border: 1px solid #66e2d5;
  border-radius: 100px;
  width: 200px
}

.articleform__uploaderror {
  color: #d60000;
  font-size: 0.8em
}

.sidebar-data {
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 32px;
  font-family: var(--ff-monospace);
  padding: 16px;
  color: #444444;
  color: #444;
  color: var(--theme-secondary-color, #444);
  color: var(--card-color-tertiary)
}

.sidebar-data hr {
  opacity: 0.3;
  margin: 25px 0px 15px;
  width: 200px
}

.sidebar-data .olderposts-header {
  margin-bottom: 5px
}

.sidebar-data .olderposts-pagenumber {
  padding: 4px;
  margin-right: -4px
}

.crayons-article__video {
  overflow-wrap: normal;
  word-break: normal
}

.crayons-article__video .crayons-article__video__player {
  background-position: center;
  background-size: cover;
  padding-bottom: 56.25%
}

.crayons-article__video .crayons-article__video__player.native {
  height: calc(100vw * (9 / 16))
}

.crayons-article__video .crayons-article__video__player img {
  display: none;
  width: calc(100vw * (9 / 16) * (1 / 2));
  height: calc((100vw * (9 / 16) * (1 / 2)) + (100vw * (9 / 16) * (1 / 6)));
  padding-top: calc(100vw * (9 / 16) * (1 / 6));
  margin: 0 auto
}

.crayons-article__video .crayons-article__video__player img.active {
  display: block
}

@media screen and (min-width: 640px) {
  .crayons-article__video .crayons-article__video__player.native {
    height: calc(100vw * (9 / 16) * (2 / 3))
  }

  .crayons-article__video .crayons-article__video__player img {
    width: calc(100vw * (9 / 16) * (1 / 2) * (2 / 3));
    height: calc((100vw * (9 / 16) * (1 / 2) * (2 / 3)) + (100vw * (9 / 16) * (1 / 6) * (2 / 3)));
    padding-top: calc(100vw * (9 / 16) * (1 / 6) * (2 / 3))
  }
}

.dashboard-listings-container {
  width: 800px;
  max-width: 96%;
  margin: 24px auto
}

.dashboard-listings-container .rounded-btn {
  font-size: calc(15px + 0.2vw);
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-stretch: condensed;
  padding: 4px 20px;
  border-radius: 100px;
  margin-right: 5px;
  display: inline-block;
  width: fit-content;
  width: -moz-fit-content;
  cursor: pointer;
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--body-color);
  background: #e8e8e8;
  background: var(--theme-container-background, #e8e8e8)
}

.dashboard-listings-container .rounded-btn:hover {
  background: #dbdbdb;
  background: var(--theme-container-background-hover, #dbdbdb)
}

.dashboard-listings-container .rounded-btn.active {
  background: var(--card-color-tertiary);
  color: var(--body-color-inverted)
}

.dashboard-listings-container .dashboard-listings-header-wrapper {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  background: #333333;
  padding: 15px 0px
}

@media screen and (max-width: 768px) {
  .dashboard-listings-container .dashboard-listings-header-wrapper {
    flex-direction: column
  }
}

.dashboard-listings-container .dashboard-listings-header-wrapper .dashboard-listings-header {
  width: 43%;
  text-align: center;
  color: white;
  margin: 5px auto;
  font-size: calc(1.1em + 0.1vw);
  padding: 18px 0px 7px;
  padding-left: 10px;
  font-family: var(--ff-monospace);
  border: 1px solid #f5f6f7;
  display: block;
  text-align: center;
  margin: 1.2%;
  padding: 1.2%;
  padding-bottom: 30px
}

@media screen and (max-width: 768px) {
  .dashboard-listings-container .dashboard-listings-header-wrapper .dashboard-listings-header {
    width: 90%
  }
}

.dashboard-listings-container .dashboard-listings-header-wrapper .dashboard-listings-header a {
  font-size: 0.9em;
  border: 2px solid #2ad7c5;
  color: #25c2b2;
  padding: 6px 16px;
  margin-top: 6px;
  border-radius: 100px
}

.dashboard-listings-container .dashboard-listings-actions {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.dashboard-listings-container .dashboard-listings-actions .listings-dashboard-filter-buttons {
  margin-bottom: -10px
}

@media screen and (max-width: 426px) {
  .dashboard-listings-container .dashboard-listings-actions {
    flex-direction: column;
    align-items: stretch
  }
}

.dashboard-listings-container .dashboard-listings-actions select {
  display: block;
  font-size: 19px;
  padding: 12px;
  border: 1px solid #dee6e9;
  border-radius: 3px;
  background-color: white;
  outline: none;
  font-weight: bold;
  color: #333333;
  font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed', 'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold', 'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica', 'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif
}

@media screen and (max-width: 426px) {
  .dashboard-listings-container .dashboard-listings-actions select {
    text-align-last: center;
    text-align: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    text-align-last: center
  }
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row {
  border: 1px solid var(--card-color-tertiary);
  padding: 5px 15px;
  margin-bottom: 13px;
  border-radius: 3px;
  position: relative;
  background: var(--card-bg)
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row.draft {
  background: #fffeec;
  background: var(--theme-container-accent-background, #fffeec)
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row.expired {
  opacity: 0.7
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-org {
  background: var(--card-color-secondary);
  color: var(--body-color-inverted);
  margin-right: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 10px;
  display: inline-block;
  font-size: 0.9em
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row h2 {
  color: var(--card-color);
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 8px;
  font-size: 22px;
  width: 100%
}

@media screen and (min-width: 800px) {
  .dashboard-listings-container .dashboard-listings-view .dashboard-listing-row h2 {
    font-size: 34px
  }
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .dashboard-listing-date {
  font-size: 0.85em;
  padding: 3px 0px 6px;
  color: var(--card-color-tertiary)
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .dashboard-listing-category {
  padding: 10px 15px
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .dashboard-listing-category a {
  color: var(--card-color-tertiary);
  background: var(--card-bg);
  display: inline-block;
  margin: 2px;
  padding: 2px 7px;
  font-size: 0.77em;
  border-radius: 3px;
  font-weight: bold
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .dashboard-listing-tags {
  font-size: 0.85em;
  padding: 3px 0px 6px
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .dashboard-listing-tags a {
  color: var(--card-color)
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions {
  padding: var(--su-2) 0
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions .pill {
  background: #0045ff;
  padding: 4px 20px;
  border-radius: 100px;
  color: white;
  margin-right: 5px;
  font-size: 14px;
  border: 2px solid transparent;
  margin-top: 6px;
  display: inline-block
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions .pill.green {
  background: #66e2d5;
  color: #0a0a0a
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions .pill.yellow {
  background: #fefa87;
  color: #0a0a0a
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions .pill.red {
  background: #ff0000
}

.dashboard-listings-container .dashboard-listings-view .dashboard-listing-row .listing-row-actions .pill.black {
  background: #333333
}

.credits-container .notice {
  background: #66e2d5;
  padding: 30px 0px;
  margin-top: 68px;
  text-align: center
}

.credits-container .credits-banner {
  background-color: #4e57ef;
  background-image: linear-gradient(141deg, #4e57ef 0%, #1f89db 51%, #2981e5 75%);
  padding: 70px 5px
}

.credits-container .credits-banner h1 {
  font-size: calc(1.4em + 0.5vw)
}

.credits-container .credits-banner a {
  color: white;
  border: 3px solid white;
  padding: 15px 4px;
  border-radius: 100px;
  font-weight: bold;
  display: block;
  margin: 10px auto;
  text-align: center;
  font-size: 14px;
  width: 320px
}

@media screen and (min-width: 950px) {
  .credits-container .credits-banner {
    font-size: 1.8em
  }
}

.credits-container form#new_credit {
  width: 500px;
  max-width: 96%;
  margin: 40px auto;
  overflow: hidden
}

.credits-container .InputElement {
  background-color: white;
  background-color: var(--theme-container-background, white);
  color: var(--body-color)
}

.credits-container .StripeElement,
.credits-container input[type='number'],
.credits-container button,
.credits-container .existing-card {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  background-color: var(--theme-container-background, white);
  color: var(--body-color);
  box-shadow: 0 1px 3px 0 #e6ebf1;
  transition: box-shadow 150ms ease;
  margin-bottom: 20px
}

.credits-container .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df
}

.credits-container .StripeElement--invalid {
  border-color: #fa755a
}

.credits-container .StripeElement--webkit-autofill {
  background-color: #fefde5 !important
}

.credits-container h1 {
  text-align: center;
  margin: 20px auto;
  font-size: 2.5em;
  border-radius: 3px;
  padding: 30px 0px;
  color: white
}

.credits-container .hook-description {
  color: #32325d;
  color: var(--theme-secondary-color, #32325d);
  text-align: center;
  font-size: 1.2em;
  padding: 10px 5px
}

.credits-container .hook-description a {
  text-decoration: underline;
  color: var(--link-branded-color)
}

@media screen and (min-width: 950px) {
  .credits-container .hook-description {
    font-size: 1.4em;
    padding: 20px 5px
  }
}

.credits-container .bulk-description {
  text-align: center;
  color: var(--card-color-tertiary);
  padding: 25px 12px;
  font-size: 0.8em;
  border-top: 1px solid #ededed;
  border-top: var(--theme-container-border, 1px solid #ededed);
  border-bottom: 1px solid #ededed;
  border-bottom: var(--theme-container-border, 1px solid #ededed)
}

.credits-container .credit-price {
  box-shadow: 0 2px 4px 0 #dce2ea;
  border-radius: 8px;
  width: 80%;
  margin: 3px auto;
  padding: 10px 0px;
  border: 1px solid #f5f6f7;
  background: var(--card-bg);
  font-weight: bold;
  display: inline-block;
  font-size: 15px;
  cursor: pointer
}

.credits-container .credit-price .credit-amount {
  font-size: 45px;
  color: #4e57ef;
  margin-bottom: 15px
}

@media screen and (min-width: 950px) {
  .credits-container .credit-price {
    width: 230px;
    padding: 80px 0px;
    margin: 12px 3px;
    transition: 0.2s
  }

  .credits-container .credit-price:hover {
    box-shadow: 0 4px 6px 0 #d5dce5
  }
}

.credits-container details {
  width: 500px;
  max-width: 96%;
  margin: 20px auto 0px;
  cursor: pointer;
  font-size: 0.8em;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--link-branded-color)
}

.credits-container details div {
  margin-top: 5px;
  background: var(--card-bg);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 #cfd7df;
  border: 1px solid #f5f6f7
}

.credits-container input[type='number'] {
  width: calc(100% - 160px);
  font-size: 18px;
  display: inline-block
}

.credits-container #calculated-price {
  width: 140px;
  padding-left: 10px;
  color: #66e2d5;
  font-size: 13px;
  display: inline-block
}

.credits-container input[type='radio'] {
  vertical-align: 2px;
  padding: 10px;
  cursor: pointer
}

.credits-container button {
  width: 100%;
  background-color: #4e57ef;
  color: white;
  font-size: 18px;
  font-weight: bold
}

.credits-container button#add-new-card {
  background-color: #f5f6f7;
  background-color: var(--theme-container-background, #f5f6f7);
  color: var(--body-color);
  font-size: 15px
}

.credits-container .existing-card {
  margin-bottom: 5px;
  font-size: 0.7em;
  padding: 0px;
  padding-left: 10px
}

.credits-container .existing-card label {
  cursor: pointer;
  display: inline-block;
  width: calc(100% - 50px);
  padding: 10px 0px
}

.credits-container .existing-card .credit-card-component {
  background: #f9fafa;
  background: var(--theme-container-accent-background, #f9fafa);
  border-radius: 3px;
  margin: 0px 5px;
  display: inline-block;
  font-weight: bold
}

.credits-container label.main-form-label {
  margin-bottom: 4px;
  background: #f5f6f7;
  background: var(--theme-container-accent-background, #f5f6f7);
  border-radius: 3px;
  padding: 2px 8px;
  display: inline-block;
  font-size: 0.7em;
  font-weight: bold
}

.credits-container .existing-credits {
  background: #4e57ef;
  color: white;
  margin: 100px auto;
  padding: 30px;
  border-radius: 3px;
  text-align: center
}

.credits-container .existing-credits .existing-credits-status {
  font-size: 1.8em;
  font-weight: bold;
  padding: 30px 0px 50px
}

.credits-container .existing-credits .existing-credits-status .org-credits-select {
  vertical-align: middle;
  font-size: medium;
  font-size: initial
}

.credits-container .existing-credits>a {
  color: white;
  border: 3px solid white;
  padding: 10px 30px;
  border-radius: 100px;
  font-weight: bold
}

@media screen and (min-width: 950px) {
  .credits-container .existing-credits {
    width: 800px
  }
}

.credits-container .ledger {
  margin: 2rem auto;
  text-align: right
}

.credits-container .ledger caption {
  font-size: 1.2rem;
  margin-bottom: 1.5rem
}

.credits-container .ledger td {
  padding-top: 1.1rem
}

.credits-container .ledger .misc td {
  padding-top: 1.5rem
}

.credits-container .ledger .misc td:nth-child(2) {
  font-style: italic
}

.credits-container .ledger a {
  color: #fff
}

@media screen and (min-width: 950px) {
  .credits-container .ledger {
    width: 700px
  }
}

.rich-selector {
  background: var(--card-secondary-bg);
  border-radius: var(--radius);
  border: 1px solid var(--base-10);
  padding: var(--su-4);
  cursor: pointer
}

.font-selector--serif {
  font-family: var(--ff-serif)
}

.font-selector--sans-serif {
  font-family: var(--ff-sans-serif)
}

.font-selector--monospace {
  font-family: var(--ff-monospace)
}

.font-selector--comic-sans {
  font-family: var(--ff-comic)
}

.font-selector--open-dyslexic {
  font-family: var(--ff-dyslexic);
  font-display: swap
}

.theme-preview {
  width: 100%;
  border-radius: var(--radius);
  background: var(--preview-body-bg);
  color: var(--preview-body-color);
  overflow: hidden;
  font-size: var(--fs-s);
  line-height: 1;
  box-shadow: 0 0 0 1px var(--header-shadow)
}

.theme-preview,
.theme-preview *,
.theme-preview * * {
  box-sizing: border-box
}

.theme-preview__nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--su-4);
  background: var(--preview-header);
  box-shadow: 0 1px 1px var(--preview-border)
}

.theme-preview__search {
  width: 33%;
  height: var(--su-2);
  background: var(--preview-form);
  border-radius: 1px
}

.theme-preview__main {
  display: grid;
  grid-gap: var(--su-1);
  grid-template-columns: 20% 1fr 20%;
  height: var(--su-9);
  padding: var(--su-1);
  text-align: center
}

.theme-preview__middle {
  display: flex;
  flex-direction: column
}

.theme-preview__card {
  background: var(--preview-card);
  border-radius: 1px;
  display: flex;
  flex: 1 1 auto;
  box-shadow: 0 0 0 1px var(--preview-border)
}

.theme-selector--light-theme {
  --preview-body-bg: #f9f9fa;
  --preview-body-color: #0a0a0a;
  --preview-header: #fdf9f3;
  --preview-form: #e8e7e7;
  --preview-card: #fff;
  --preview-border: rgba(0, 0, 0, 0.1)
}

.theme-selector--dark-theme {
  --preview-body-bg: #0d1219;
  --preview-body-color: #fff;
  --preview-header: #1c2938;
  --preview-form: #424a54;
  --preview-card: #202c3d;
  --preview-border: rgba(0, 0, 0, 0.1)
}

.rich-selector-radio {
  overflow: hidden;
  position: absolute;
  opacity: 0;
  left: -9999em
}

.rich-selector-radio:checked+.rich-selector--experience {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 1px var(--accent-brand)
}

.widget {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0 16px 16px 16px;
  margin: 8px 0 16px 0
}

.widget:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--card-color-tertiary);
  opacity: 0.25
}

.widget.fixed-widget {
  position: sticky;
  width: 254px;
  top: 80px
}

.widget.fixed-widget header {
  padding-left: 6px
}

.widget:hover {
  opacity: 1
}

.widget.showing {
  display: block
}

.widget.podcast-pic-widget a {
  color: var(--body-color)
}

.widget.podcast-pic-widget .widget-body {
  padding-bottom: 10px
}

.widget.podcast-pic-widget .podcast-pic {
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px 0px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

.widget.podcast-pic-widget .podcast-pic img {
  visibility: visible;
  width: 23px;
  height: 23px;
  border-radius: 100px;
  vertical-align: -7px;
  margin-left: 3px
}

.widget.podcast-pic-widget .podcast-pic .podcast-name {
  width: calc(100% - 55px);
  display: inline-block;
  padding-left: 4px;
  font-weight: bold
}

.widget.podcast-pic-widget .podcast-pic .podcast-name .podcast-name-inner {
  font-size: 14px;
  line-height: 15px;
  display: block;
  padding-left: 2px
}

.widget.podcast-pic-widget .podcast-pic:hover {
  background: #f5f6f7;
  background: var(--theme-container-background-hover, #f5f6f7)
}

.widget hr {
  opacity: 0.2
}

.widget header,
.widget .widget--header {
  position: relative;
  font-size: 0.9em;
  font-weight: bold;
  padding: 8px 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  color: var(--card-color)
}

.widget header a,
.widget .widget--header a {
  display: inline-block;
  color: var(--card-color)
}

.widget header a h4,
.widget .widget--header a h4 {
  display: inline-block;
  margin: 0
}

.widget header a:hover,
.widget .widget--header a:hover {
  text-decoration: underline
}

.widget header .emoji,
.widget .widget--header .emoji {
  margin-right: 6px;
  display: inline-block;
  vertical-align: -4px
}

.widget header .emoji img,
.widget .widget--header .emoji img {
  width: 18px;
  border: 0px;
  cursor: default
}

.widget header .widget-listing-live-count,
.widget .widget--header .widget-listing-live-count {
  background: #66e2d5;
  background: var(--theme-secondary-color, #66e2d5);
  color: var(--base-inverted);
  border-radius: 3px;
  display: inline-block;
  font-size: 0.8em;
  padding: 1px 5px 0px;
  line-height: 1.4em
}

.widget header .widget-minimize-button,
.widget .widget--header .widget-minimize-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 0px 5px 1px;
  border-radius: 3px;
  font-size: 1.2em;
  line-height: 0.6em;
  border: 1px solid #dbdbdb;
  border: var(--theme-secondary-color-border, 1px solid #dbdbdb);
  color: #c2c2c2;
  color: var(--theme-secondary-color, #c2c2c2)
}

.widget .widget-body {
  overflow-wrap: break-word
}

.widget .widget-body.body-scrollable {
  height: calc(100vh - 300px);
  max-height: 390px;
  overflow-y: scroll
}

.widget .widget-body.widget-body--sponsorship-arbitrary img {
  width: 100%
}

.widget .widget-body .widget-podcast-ep {
  padding-bottom: 8px
}

.widget .widget-body .widget-podcast-ep a {
  color: var(--body-color);
  font-weight: 500
}

.widget .widget-body .widget-podcast-title {
  margin-top: -2px
}

.widget .widget-body .widget-podcast-title a {
  color: #666666;
  font-size: 0.83em;
  opacity: 0.86
}

.widget .widget-body .widget-listing-link {
  display: block;
  padding: 8px 16px;
  margin: 0 -16px;
  border-radius: var(--radius);
  color: var(--link-color)
}

.widget .widget-body .widget-listing-link:hover {
  color: var(--link-color-hover);
  background: var(--link-bg-hover)
}

.widget .widget-body .widget-listing-link .widget-listing-link-title {
  display: block
}

.widget .widget-body .widget-listing-link .widget-listing-link-category {
  display: inline-block;
  color: var(--card-color-tertiary);
  font-size: 0.8em;
  line-height: 1
}

.widget .widget-body .widget-accent {
  background: #cfd7ff;
  color: #0045ff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 1px
}

.widget .widget-body .widget-footer {
  color: #666666;
  font-size: 0.9em;
  padding: 5px 0px 0px
}

.widget .widget-body .widget-footer img {
  height: 15px;
  width: 15px;
  vertical-align: -2px;
  display: inline;
  border: 0
}

.widget .widget-body .widget-subtext {
  padding: 0;
  margin: 0;
  color: var(--card-color-tertiary);
  font-size: 0.85em
}

.widget .widget-body .widget-user-pic {
  display: inline-block
}

.widget .widget-body .widget-user-pic img {
  height: 48px;
  width: 48px;
  margin: 0 8px 8px 0;
  border-radius: 100%
}

.widget .widget-body .widget-listing-category {
  color: #666666
}

.widget .widget-body .widget-listing-title {
  font-family: var(--ff-sans-serif);
  font-weight: 500;
  margin-bottom: 8px
}

.widget p {
  margin: 8px 0
}

.widget ul {
  padding-left: 10px;
  display: flex;
  flex-direction: column
}

.widget li {
  font-size: 1em;
  line-height: 1.32em;
  display: inline-block
}

.widget li::before {
  font-size: 1.2em
}

.widget ul img {
  width: 5%;
  border: none;
  padding-right: 4px;
  visibility: hidden
}

.widget a:hover {
  opacity: 0.9
}

.widget .row {
  position: relative;
  overflow: hidden;
  padding: 1px 0px 3px;
  font-size: 0.97em
}

.widget .row .key {
  float: left;
  width: 20px;
  font-size: 0.8em;
  padding: 2px
}

.widget .row .value {
  float: left;
  width: calc(100% - 42px);
  padding: 5px 7px
}

.org-sidebar-widget {
  position: relative;
  overflow: hidden;
  display: block
}

.org-sidebar-widget .org-sidebar-widget-body {
  padding: 16px;
  overflow-wrap: break-word
}

.org-sidebar-widget .org-sidebar-widget-body.body-scrollable {
  height: calc(100vh - 300px);
  max-height: 390px;
  overflow-y: scroll
}

.org-sidebar-widget .org-sidebar-widget-body .org-sidebar-widget-user-pic {
  display: inline-block
}

.org-sidebar-widget .org-sidebar-widget-body .org-sidebar-widget-user-pic img {
  height: 48px;
  width: 48px;
  margin: 3px;
  border-radius: 100%
}

.org-sidebar-widget a {
  width: calc(100% - 40px);
  justify-content: center
}

.org-sidebar-widget a:hover {
  opacity: 0.9
}

.org-member-page .member-item {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px
}

.org-member-page .member-item .member-item-top {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.org-member-page .member-item .member-item-top .member-user-pic img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1/1;
  margin: 3px;
  border-radius: 100%
}

.org-member-page .member-item .member-item-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex-grow: 0
}

.org-member-page .member-item .member-item-bottom .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.org-member-page .member-item .member-item-bottom .member-username {
  font-weight: var(--fw-normal);
  font-size: var(--fs-s);
  line-height: var(--lh-base);
  letter-spacing: -0.02em;
  color: var(--color-secondary)
}

.crayons-bb,
.crayons-unit {
  padding: var(--su-3);
  padding-bottom: var(--su-4)
}

.crayons-bb__header,
.crayons-unit__header {
  width: 100%;
  display: flex;
  align-items: center
}

.crayons-bb__title,
.crayons-unit__title {
  color: var(--label-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin-left: var(--su-1);
  align-self: center;
  font-weight: var(--fw-bold)
}

.crayons-bb__dropdown,
.crayons-unit__dropdown {
  margin-left: auto
}

.crayons-bb img,
.crayons-unit img {
  height: auto;
  border-radius: var(--radius);
  display: inline-block;
  vertical-align: middle;
  align-self: center;
  background: var(--body-bg)
}

.crayons-bb__indicator,
.crayons-unit__indicator {
  letter-spacing: -0.02em;
  text-transform: uppercase;
  align-self: center;
  word-wrap: normal;
  word-break: keep-all
}

@media (min-width: 640px) and (min-width: 640px) {

  .crayons-bb[data-browser-context="mobile_web"],
  .crayons-unit[data-browser-context="mobile_web"] {
    display: none !important
  }
}

.crayons-article-sticky .crayons-card .text-styles,
.sidebar-wrapper .crayons-card .text-styles {
  font-size: var(--fs-base)
}

.crayons-article-sticky .crayons-card.billboard,
.crayons-article-sticky .crayons-card.bb-placement,
.sidebar-wrapper-left .crayons-card.billboard,
.sidebar-wrapper-left .crayons-card.bb-placement {
  max-height: calc(100vh - var(--header-height) - 2 * var(--layout-padding));
  overflow-y: auto
}

.onboarding-task-card {
  background: var(--accent-brand);
  position: relative;
  border-radius: var(--radius);
  padding: var(--su-7) var(--su-8) var(--su-8) var(--su-8);
  display: none
}

.onboarding-task-card .task-card-title {
  font-weight: var(--fw-heavy);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--base-inverted)
}

.onboarding-task-card .task-card-subtitle {
  color: var(--base-inverted);
  opacity: 0.7;
  font-weight: var(--fw-medium);
  font-size: var(--fs-s);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em
}

.onboarding-task-card .task-card-action {
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.2)
}

.onboarding-task-card .task-card-action:hover {
  background-color: rgba(255, 255, 255, 0.3)
}

.onboarding-task-card a.task-card-link {
  display: block;
  border-radius: var(--radius);
  padding: var(--su-5) var(--su-5);
  margin-top: var(--su-4);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: -0.02em;
  color: var(--base-inverted);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.onboarding-task-card a.task-card-link:hover {
  cursor: pointer
}

.onboarding-task-card a.task-card-link .emoji {
  margin-right: var(--su-2)
}

.onboarding-task-card .task-card-image {
  width: 100px;
  height: 100px
}

.onboarding-task-card .close {
  background: none;
  border: none;
  position: absolute;
  top: var(--su-6);
  right: var(--su-6)
}

.onboarding-main .email-preferences-wrapper h1 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: var(--lh-tight)
}

.onboarding-main .email-preferences-wrapper p {
  line-height: var(--lh-base)
}

.onboarding-main .email-preferences-wrapper img {
  width: 100%;
  aspect-ratio: 800 / 279;
  -o-object-fit: cover;
  object-fit: cover
}

.onboarding-main .onboarding-inner-popover {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--su-4);
  padding-top: calc(13vh - 20px);
  position: absolute;
  left: calc(10px + 1vw);
  right: calc(10px + 1vw);
  bottom: calc(10px + 6vw);
  top: calc(10px + 6vw);
  z-index: 100;
  text-align: center;
  overflow: auto
}

.onboarding-main .onboarding_newsletter_opt_in_head {
  font-weight: 600
}

.onboarding-main .onboarding_newsletter_opt_in_subhead {
  color: var(--base-60)
}

.onboarding-main .email_newsletter {
  border: 1px solid var(--card-border);
  border-radius: 0 6px 6px 0;
  border-left-width: thick;
  border-left-color: var(--accent-brand);
  background-color: var(--card-secondary-bg)
}

.onboarding-progress-card {
  background: var(--accent-brand);
  border-radius: var(--radius);
  padding: var(--su-6) var(--su-6) var(--su-4)
}

.onboarding-progress-card__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--base-inverted);
  margin: 0 0 var(--su-1)
}

.onboarding-progress-card__subtitle {
  color: var(--base-inverted);
  opacity: 0.7;
  font-weight: var(--fw-medium);
  font-size: var(--fs-s);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--su-4)
}

.onboarding-progress-card__bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--su-4)
}

.onboarding-progress-card__bar-fill {
  height: 100%;
  background: var(--base-inverted);
  border-radius: var(--radius);
  transition: width 0.3s ease
}

.onboarding-progress-card__list {
  list-style: none;
  margin: 0;
  padding: 0
}

.onboarding-progress-card__item {
  display: flex;
  align-items: center;
  padding: var(--su-2) 0
}

.onboarding-progress-card__item--done {
  opacity: 0.7
}

.onboarding-progress-card__link {
  color: var(--base-inverted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: -0.02em
}

.onboarding-progress-card__link:hover {
  color: var(--base-inverted);
  text-decoration: underline
}

.onboarding-progress-card__check {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-l);
  margin-right: var(--su-3);
  flex-shrink: 0
}

.onboarding-progress-card__check--done {
  color: var(--base-inverted)
}

.onboarding-progress-card__label {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--base-inverted)
}

.ltag-agent-session {
  max-width: 100%;
  margin: 1.6em auto;
  border-radius: 10px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  background: #fff;
  background: var(--card-bg, #fff);
  font-family: var(--ff-sans-serif);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06)
}

.ltag-agent-session .agent-session-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #dbdbdb;
  border-bottom: 1px solid var(--card-border, #dbdbdb);
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb)
}

.ltag-agent-session .agent-session-icon {
  flex-shrink: 0;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.ltag-agent-session .agent-session-tool-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e5e7eb;
  color: #374151;
  flex-shrink: 0
}

.ltag-agent-session .agent-session-tool-claude_code {
  background: #d4a574;
  color: #3d2200
}

.ltag-agent-session .agent-session-tool-codex {
  background: #10a37f;
  color: #fff
}

.ltag-agent-session .agent-session-tool-gemini_cli {
  background: #4285f4;
  color: #fff
}

.ltag-agent-session .agent-session-tool-pi {
  background: #8b5cf6;
  color: #fff
}

.ltag-agent-session .agent-session-tool-aider {
  background: #14b8a6;
  color: #fff
}

.ltag-agent-session .agent-session-tool-opencode {
  background: #f59e0b;
  color: #1f2937
}

.ltag-agent-session .agent-session-tool-cursor {
  background: #6366f1;
  color: #fff
}

.ltag-agent-session .agent-session-title {
  font-weight: 600;
  font-size: 0.9em;
  color: #1f2937;
  color: var(--card-color, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ltag-agent-session .agent-session-slice-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: 600;
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
  flex-shrink: 0;
  margin-left: auto
}

.ltag-agent-session .agent-session-scroll {
  max-height: 520px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  scrollbar-color: var(--card-border, #d1d5db) transparent
}

.ltag-agent-session .agent-session-scroll::-webkit-scrollbar {
  width: 6px
}

.ltag-agent-session .agent-session-scroll::-webkit-scrollbar-track {
  background: transparent
}

.ltag-agent-session .agent-session-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  background: var(--card-border, #d1d5db);
  border-radius: 3px
}

.ltag-agent-session .agent-session-message {
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid #dbdbdb;
  border-bottom: 1px solid var(--card-border, #dbdbdb);
  border-left: 3px solid transparent
}

.ltag-agent-session .agent-session-message:last-child {
  border-bottom: none
}

.ltag-agent-session .agent-session-user {
  background: #f8fafc;
  background: var(--card-secondary-bg, #f8fafc);
  border-left-color: #3b82f6;
  border-left-color: var(--accent-brand, #3b82f6)
}

.ltag-agent-session .agent-session-assistant {
  background: #fff;
  background: var(--card-bg, #fff);
  border-left-color: #059669
}

.ltag-agent-session .agent-session-role-badge {
  display: inline-block;
  font-size: 0.65em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px
}

.ltag-agent-session .agent-session-role-user {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  color: var(--accent-brand, #2563eb)
}

.ltag-agent-session .agent-session-role-assistant {
  background: rgba(5, 150, 105, 0.1);
  color: #059669
}

.ltag-agent-session .agent-session-content {
  font-size: 0.9em;
  line-height: 1.6;
  color: #1f2937;
  color: var(--card-color, #1f2937)
}

.ltag-agent-session .agent-session-text {
  margin-bottom: 8px;
  word-break: break-word
}

.ltag-agent-session .agent-session-text:last-child {
  margin-bottom: 0
}

.ltag-agent-session .agent-session-text p {
  margin: 0 0 0.5em
}

.ltag-agent-session .agent-session-text p:last-child {
  margin-bottom: 0
}

.ltag-agent-session .agent-session-text code {
  font-family: var(--ff-monospace);
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.07);
  background: var(--code-inline-bg, rgba(0, 0, 0, 0.07));
  padding: 0.15em 0.4em;
  border-radius: 4px
}

.ltag-agent-session .agent-session-text pre.highlight,
.ltag-agent-session .agent-session-text pre {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #08090a;
  background: var(--syntax-background-color, #08090a);
  color: #f8f8f2;
  color: var(--syntax-text-color, #f8f8f2);
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.5;
  max-height: 400px;
  overflow-y: auto
}

.ltag-agent-session .agent-session-text pre.highlight code,
.ltag-agent-session .agent-session-text pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 100%;
  color: inherit
}

.ltag-agent-session .agent-session-text ul,
.ltag-agent-session .agent-session-text ol {
  margin: 0.5em 0;
  padding-left: 1.5em
}

.ltag-agent-session .agent-session-text li {
  margin-bottom: 0.25em
}

.ltag-agent-session .agent-session-text blockquote {
  margin: 0.5em 0;
  padding: 0.5em 1em;
  border-left: 3px solid #d1d5db;
  border-left: 3px solid var(--card-border, #d1d5db);
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.ltag-agent-session .agent-session-text strong,
.ltag-agent-session .agent-session-text b {
  font-weight: 600
}

.ltag-agent-session .agent-session-text-collapse {
  max-height: 200px;
  overflow: hidden;
  position: relative
}

.ltag-agent-session .agent-session-text-collapse::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(transparent, #fff);
  background: linear-gradient(transparent, var(--card-bg, #fff));
  pointer-events: none
}

.agent-session-user .ltag-agent-session .agent-session-text-collapse::after {
  background: linear-gradient(transparent, #f8fafc);
  background: linear-gradient(transparent, var(--card-secondary-bg, #f8fafc))
}

.ltag-agent-session .agent-session-text-collapse.expanded {
  max-height: none
}

.ltag-agent-session .agent-session-text-collapse.expanded::after {
  display: none
}

.ltag-agent-session .agent-session-expand-btn {
  background: none;
  border: none;
  padding: 4px 0;
  margin-top: 2px;
  font-size: 0.8em;
  font-weight: 600;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6);
  cursor: pointer
}

.ltag-agent-session .agent-session-expand-btn:hover {
  text-decoration: underline
}

.ltag-agent-session .agent-session-redacted {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.85em;
  font-weight: 600;
  font-family: var(--ff-monospace);
  letter-spacing: 0.02em
}

.ltag-agent-session .agent-session-tool-call {
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  overflow: hidden
}

.ltag-agent-session .agent-session-tool-call:last-child {
  margin-bottom: 0
}

.ltag-agent-session .agent-session-tool-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-monospace);
  font-size: 0.8em;
  color: #374151;
  color: var(--card-color, #374151);
  transition: background 0.15s
}

.ltag-agent-session .agent-session-tool-toggle:hover {
  background: #e5e7eb;
  background: var(--card-tertiary-bg, #e5e7eb)
}

.ltag-agent-session .agent-session-tool-toggle .agent-session-chevron {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-size: 0.9em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  transition: transform 0.15s;
  flex-shrink: 0
}

.ltag-agent-session .agent-session-tool-toggle .tool-name {
  font-weight: 600;
  flex-shrink: 0
}

.ltag-agent-session .agent-session-tool-toggle .tool-name-read,
.ltag-agent-session .agent-session-tool-toggle .tool-name-write,
.ltag-agent-session .agent-session-tool-toggle .tool-name-edit,
.ltag-agent-session .agent-session-tool-toggle .tool-name-glob {
  color: #3b82f6
}

.ltag-agent-session .agent-session-tool-toggle .tool-name-bash {
  color: #059669
}

.ltag-agent-session .agent-session-tool-toggle .tool-name-grep,
.ltag-agent-session .agent-session-tool-toggle .tool-name-search {
  color: #d97706
}

.ltag-agent-session .agent-session-tool-toggle .tool-name-task {
  color: #7c3aed
}

.ltag-agent-session .agent-session-tool-toggle .tool-name-webfetch,
.ltag-agent-session .agent-session-tool-toggle .tool-name-websearch {
  color: #0891b2
}

.ltag-agent-session .agent-session-tool-toggle .tool-input-preview {
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0
}

.ltag-agent-session .agent-session-tool-detail {
  border-top: 1px solid #dbdbdb;
  border-top: 1px solid var(--card-border, #dbdbdb);
  background: #fff;
  background: var(--card-bg, #fff)
}

.ltag-agent-session .agent-session-tool-detail .tool-section {
  padding: 10px 12px
}

.ltag-agent-session .agent-session-tool-detail .tool-section+.tool-section {
  border-top: 1px solid #dbdbdb;
  border-top: 1px solid var(--card-border, #dbdbdb)
}

.ltag-agent-session .agent-session-tool-detail .tool-section-label {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  margin-bottom: 6px
}

.ltag-agent-session .agent-session-pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #08090a;
  background: var(--syntax-background-color, #08090a);
  color: #f8f8f2;
  color: var(--syntax-text-color, #f8f8f2);
  overflow-x: auto;
  font-family: var(--ff-monospace);
  font-size: 0.82em;
  line-height: 1.5;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all
}

.ltag-agent-session .agent-session-pre code {
  font-family: inherit;
  font-size: 100%;
  background: none;
  padding: 0;
  color: inherit
}

.ltag-agent-session pre.agent-session-pre.highlight {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.82em;
  line-height: 1.5;
  max-height: 300px
}

.ltag-agent-session .agent-session-terminal {
  background: #0d1117;
  color: #c9d1d9
}

.ltag-agent-session .agent-session-gap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px
}

.ltag-agent-session .agent-session-gap-line {
  flex: 1 1;
  height: 1px;
  background: #dbdbdb;
  background: var(--card-border, #dbdbdb)
}

.ltag-agent-session .agent-session-gap-label {
  font-size: 0.72em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  white-space: nowrap;
  font-style: italic
}

.ltag-agent-session .agent-session-model-change {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px
}

.ltag-agent-session .agent-session-model-change-label {
  font-size: 0.72em;
  color: #7c3aed;
  white-space: nowrap;
  font-style: italic;
  font-weight: 500
}

.ltag-agent-session .agent-session-model-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.65em;
  font-weight: 500;
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  flex-shrink: 0;
  margin-left: auto
}

.ltag-agent-session .agent-session-footer {
  padding: 8px 16px;
  border-top: 1px solid #dbdbdb;
  border-top: 1px solid var(--card-border, #dbdbdb);
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb);
  text-align: right
}

.ltag-agent-session .agent-session-meta {
  font-size: 0.75em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-index-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px
}

.agent-session-index-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.agent-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.agent-session-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  background: #fff;
  background: var(--card-bg, #fff);
  transition: border-color 0.15s
}

.agent-session-list-item:hover {
  border-color: #3b82f6;
  border-color: var(--accent-brand, #3b82f6)
}

.agent-session-list-item-main {
  flex: 1 1;
  min-width: 0
}

.agent-session-list-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px
}

.agent-session-list-item-title {
  font-weight: 600;
  font-size: 1em;
  color: #1f2937;
  color: var(--card-color, #1f2937);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.agent-session-list-item-title:hover {
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.agent-session-list-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.8em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  overflow: hidden
}

.agent-session-list-item-meta span {
  white-space: nowrap
}

.agent-session-list-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.agent-session-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-empty-state p {
  margin-bottom: 8px
}

.agent-session-empty-state .crayons-btn,
.agent-session-empty-state .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .agent-session-empty-state .ltag__wikipedia--btn,
.agent-session-empty-state .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .agent-session-empty-state .ltag__stackexchange--btn,
.agent-session-empty-state .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .agent-session-empty-state .ltag__reddit--btn,
.agent-session-empty-state .gh-btn-container .gh-btn,
.gh-btn-container .agent-session-empty-state .gh-btn {
  margin-top: 12px
}

.agent-session-redaction-notice {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  font-size: 0.9em
}

.agent-session-redaction-notice strong {
  color: #92400e
}

.agent-session-redaction-notice .redaction-detail {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: #a16207
}

.agent-session-redaction-notice .redaction-explanation {
  margin: 6px 0 0;
  font-size: 0.85em;
  color: #78716c
}

.agent-session-instructions {
  margin-bottom: 20px
}

.agent-session-instructions .instructions-text {
  font-size: 0.9em;
  line-height: 1.6;
  color: #374151;
  color: var(--card-color, #374151);
  margin-bottom: 8px
}

.agent-session-instructions .instructions-warning {
  font-size: 0.85em;
  line-height: 1.5;
  color: #92400e;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px
}

.agent-session-instructions .instructions-warning p {
  margin: 0
}

.agent-session-instructions .instructions-warning .instructions-redaction-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #fde68a;
  color: #dc2626;
  font-size: 0.95em
}

.agent-session-not-available {
  text-align: center;
  padding: 80px 20px;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-not-available svg {
  margin-bottom: 16px;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af)
}

.agent-session-not-available h1 {
  font-size: 1.4em;
  color: #1f2937;
  color: var(--card-color, #1f2937);
  margin-bottom: 8px
}

.agent-session-not-available p {
  font-size: 0.95em;
  margin-bottom: 6px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto
}

.agent-session-not-available .agent-session-not-available-hint {
  font-size: 0.85em;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6);
  margin-top: 16px
}

.agent-session-upload-page,
.agent-session-show-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px
}

.agent-session-curator-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px
}

.agent-session-page-header {
  margin-bottom: 24px
}

.agent-session-page-header h1 {
  font-size: 1.5em;
  margin-bottom: 8px
}

.agent-session-page-header p {
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  font-size: 0.95em
}

.agent-session-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px
}

.agent-session-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0
}

.agent-session-show-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap
}

.agent-session-embed-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.agent-session-tool-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0
}

.agent-session-tool-icon-badge svg {
  flex-shrink: 0
}

.agent-session-tool-icon-badge .agent-session-tool-icon-label {
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap
}

.agent-session-slice-viewing {
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  border-left: 3px solid #7c3aed;
  background: #f5f3ff;
  font-size: 0.9em;
  color: #4c1d95
}

.agent-session-slice-viewing a {
  color: #7c3aed;
  text-decoration: underline
}

.agent-session-upload-form .agent-session-form-group {
  margin-bottom: 20px
}

.agent-session-upload-form .agent-session-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9em
}

.agent-session-upload-form .agent-session-input,
.agent-session-upload-form .agent-session-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 6px;
  font-size: 1em;
  font-family: var(--ff-sans-serif)
}

.agent-session-upload-form .agent-session-file-drop {
  position: relative;
  border: 2px dashed #dbdbdb;
  border: 2px dashed var(--card-border, #dbdbdb);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s
}

.agent-session-upload-form .agent-session-file-drop:hover,
.agent-session-upload-form .agent-session-file-drop.drag-over {
  border-color: #3b82f6;
  border-color: var(--accent-brand, #3b82f6);
  background: rgba(59, 130, 246, 0.04)
}

.agent-session-upload-form .agent-session-file-drop .agent-session-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer
}

.agent-session-upload-form .agent-session-drop-hint {
  font-size: 0.85em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  margin-top: 4px
}

.agent-session-upload-form .agent-session-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb)
}

.agent-session-upload-form .agent-session-file-preview .file-preview-icon {
  font-size: 1.8em;
  line-height: 1
}

.agent-session-upload-form .agent-session-file-preview .file-preview-details {
  flex: 1 1;
  min-width: 0
}

.agent-session-upload-form .agent-session-file-preview .file-preview-name {
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.agent-session-upload-form .agent-session-file-preview .file-preview-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  margin-top: 2px
}

.agent-session-upload-form .agent-session-file-preview .file-preview-meta span {
  white-space: nowrap
}

.agent-session-upload-form .agent-session-file-preview .file-preview-remove {
  background: none;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1
}

.agent-session-upload-form .agent-session-file-preview .file-preview-remove:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
  color: var(--card-color, #374151)
}

.agent-session-upload-form .agent-session-file-info {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.9em;
  color: #374151;
  color: var(--card-color, #374151)
}

.agent-session-upload-form .agent-session-help {
  margin-top: 12px
}

.agent-session-upload-form .agent-session-help summary {
  cursor: pointer;
  font-size: 0.9em;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.agent-session-upload-form .agent-session-help .agent-session-paths {
  margin-top: 8px;
  font-size: 0.85em
}

.agent-session-upload-form .agent-session-help .agent-session-paths dt {
  font-weight: 600;
  margin-top: 8px
}

.agent-session-upload-form .agent-session-help .agent-session-paths dd {
  margin-left: 0;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-upload-form .agent-session-help .agent-session-paths dd code {
  font-family: var(--ff-monospace);
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  padding: 1px 4px;
  border-radius: 3px
}

.agent-session-upload-form .agent-session-form-actions {
  margin-top: 24px
}

.agent-session-progress {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb)
}

.agent-session-progress .progress-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px
}

.agent-session-progress .progress-step {
  display: flex;
  align-items: center;
  gap: 10px
}

.agent-session-progress .progress-step .progress-step-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #dbdbdb;
  border: 2px solid var(--card-border, #dbdbdb);
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s ease
}

.agent-session-progress .progress-step .progress-step-label {
  font-weight: 600;
  font-size: 0.9em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  transition: color 0.3s ease
}

.agent-session-progress .progress-step .progress-step-detail {
  font-size: 0.8em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  margin-left: auto
}

.agent-session-progress .progress-step.step-active .progress-step-indicator {
  border-color: #3b82f6;
  border-color: var(--accent-brand, #3b82f6);
  background: #3b82f6;
  background: var(--accent-brand, #3b82f6);
  animation: pulse-dot 1.5s ease-in-out infinite
}

.agent-session-progress .progress-step.step-active .progress-step-label {
  color: #1f2937;
  color: var(--card-color, #1f2937)
}

.agent-session-progress .progress-step.step-active .progress-step-detail {
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.agent-session-progress .progress-step.step-done .progress-step-indicator {
  border-color: #059669;
  background: #059669
}

.agent-session-progress .progress-step.step-done .progress-step-indicator::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.agent-session-progress .progress-step.step-done .progress-step-label {
  color: #059669
}

.agent-session-progress .progress-step.step-done .progress-step-detail {
  color: #059669
}

.agent-session-progress .progress-step.step-error .progress-step-indicator {
  border-color: #dc2626;
  background: #dc2626
}

.agent-session-progress .progress-step.step-error .progress-step-indicator::after {
  content: '!';
  position: absolute;
  top: -1px;
  left: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: bold
}

.agent-session-progress .progress-step.step-error .progress-step-label {
  color: #dc2626
}

.agent-session-progress .progress-bar-container {
  height: 4px;
  background: #e5e7eb;
  background: var(--card-border, #e5e7eb);
  border-radius: 2px;
  overflow: hidden
}

.agent-session-progress .progress-bar {
  height: 100%;
  background: #3b82f6;
  background: var(--accent-brand, #3b82f6);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.5
  }
}

.agent-session-error {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca
}

.agent-session-error p {
  margin: 0;
  color: #dc2626;
  font-size: 0.9em
}

.agent-session-curator-toolbar {
  margin-bottom: 16px
}

.curator-toolbar-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}

.curator-toolbar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.curator-filter-group {
  display: inline-flex;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  background: var(--card-bg, #fff);
  flex-shrink: 0
}

.curator-filter {
  padding: 6px 14px;
  border: none;
  border-right: 1px solid #dbdbdb;
  border-right: 1px solid var(--card-border, #dbdbdb);
  background: transparent;
  font-size: 0.82em;
  font-weight: 500;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap
}

.curator-filter:last-child {
  border-right: none
}

.curator-filter:hover {
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  color: #374151;
  color: var(--card-color, #374151)
}

.curator-filter.active {
  background: #3b82f6;
  background: var(--accent-brand, #3b82f6);
  color: #fff;
  font-weight: 600
}

.curator-search {
  flex: 1 1;
  min-width: 120px;
  max-width: 300px;
  padding: 6px 12px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  font-size: 0.85em;
  font-family: var(--ff-sans-serif);
  background: #fff;
  background: var(--card-bg, #fff);
  color: #374151;
  color: var(--card-color, #374151)
}

.curator-search::-moz-placeholder {
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af)
}

.curator-search::placeholder {
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af)
}

.curator-search:focus {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--accent-brand, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15)
}

.curator-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.curator-bulk-btn {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.85em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  cursor: pointer;
  white-space: nowrap
}

.curator-bulk-btn:hover {
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6);
  text-decoration: underline
}

.agent-session-curator-count {
  font-size: 0.82em;
  font-weight: 500;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-curator-count.over-limit {
  color: #dc2626;
  color: var(--accent-danger, #dc2626);
  font-weight: 600
}

.agent-session-curator-messages {
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.curator-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px
}

.curator-gap .curator-gap-line {
  flex: 1 1;
  height: 1px;
  background: #d1d5db;
  background: var(--card-border, #d1d5db)
}

.curator-gap .curator-gap-label {
  font-size: 0.75rem;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  white-space: nowrap;
  font-style: italic
}

.curator-card {
  display: flex;
  border-radius: 6px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-left: none;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s, background 0.15s, box-shadow 0.15s
}

.curator-card.selected {
  box-shadow: inset 0 0 0 1px #3b82f6;
  box-shadow: inset 0 0 0 1px var(--accent-brand, #3b82f6);
  background: #fff;
  background: var(--card-bg, #fff)
}

.curator-card.deselected {
  opacity: 0.4;
  background: #fff;
  background: var(--card-bg, #fff)
}

.curator-card.filtered-out {
  display: none
}

.curator-card:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 1px #3b82f6;
  box-shadow: inset 0 0 0 1px var(--accent-brand, #3b82f6)
}

.curator-card.drag-highlight {
  box-shadow: 0 0 0 2px #3b82f6;
  box-shadow: 0 0 0 2px var(--accent-brand, #3b82f6);
  opacity: 1
}

.curator-card.slice-mode.drag-highlight {
  box-shadow: 0 0 0 2px #7c3aed
}

.curator-card.curator-card--user.selected {
  background: #f8fafc;
  background: var(--card-secondary-bg, #f8fafc)
}

.curator-card-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: 6px 0 0 6px
}

.curator-card-bar.curator-card-bar-user {
  background: #3b82f6;
  background: var(--accent-brand, #3b82f6)
}

.curator-card-bar.curator-card-bar-assistant {
  background: #059669
}

.curator-card-body {
  flex: 1 1;
  min-width: 0;
  padding: 10px 14px
}

.curator-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.curator-role {
  display: inline-block;
  font-size: 0.65em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px
}

.curator-role-user {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  color: var(--accent-brand, #2563eb)
}

.curator-role-assistant {
  background: rgba(5, 150, 105, 0.1);
  color: #059669
}

.curator-timestamp {
  font-size: 0.75em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.curator-selected-indicator {
  margin-left: auto;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af)
}

.selected .curator-selected-indicator {
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.curator-card-content {
  min-width: 0
}

.curator-text {
  font-size: 0.9em;
  line-height: 1.5;
  color: #374151;
  color: var(--card-color, #374151);
  white-space: pre-wrap;
  word-break: break-word
}

.curator-expand-btn {
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: 600;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6);
  cursor: pointer
}

.curator-expand-btn:hover {
  text-decoration: underline
}

.curator-tool-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 4px;
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  font-family: var(--ff-monospace);
  font-size: 0.8em
}

.curator-tool-pill .curator-tool-name {
  font-weight: 600;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6);
  flex-shrink: 0
}

.curator-tool-pill .curator-tool-input {
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0
}

.curator-slice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 8px
}

.slice-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: #5b21b6
}

.slice-banner-icon {
  font-size: 1.1em
}

.slice-banner-count {
  font-size: 0.85em;
  color: #7c3aed;
  font-weight: 500
}

.slice-banner-actions {
  display: flex;
  gap: 6px
}

.slice-mode-active .curator-card.selected {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.05)
}

.slice-mode-active .curator-card:hover {
  border-color: #7c3aed
}

.slice-mode-active .curator-card .curator-selected-indicator {
  color: #7c3aed
}

.slice-mode-active .curator-card-bar.curator-card-bar-user {
  background: #7c3aed
}

.slice-mode-active .curator-card-bar.curator-card-bar-assistant {
  background: #a78bfa
}

.curator-index-label {
  font-size: 0.7em;
  font-family: var(--ff-monospace);
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af)
}

.curator-slice-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px
}

.curator-slice-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7em;
  font-weight: 600;
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe
}

.curator-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  flex-wrap: wrap
}

.curator-meta-bar-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.curator-meta-bar-label {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.curator-meta-bar-share {
  display: flex;
  align-items: center;
  gap: 4px
}

.curator-meta-share-input {
  padding: 4px 8px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 4px;
  font-family: var(--ff-monospace);
  font-size: 0.75em;
  background: #fff;
  background: var(--card-bg, #fff);
  color: #374151;
  color: var(--card-color, #374151);
  min-width: 0;
  max-width: 260px
}

.curator-meta-embed-code {
  font-family: var(--ff-monospace);
  font-size: 0.75em;
  padding: 4px 8px;
  background: #1e1e1e;
  background: var(--code-bg, #1e1e1e);
  color: #d4d4d4;
  color: var(--code-color, #d4d4d4);
  border-radius: 4px;
  white-space: nowrap;
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all
}

.curator-slices-bar {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px
}

.curator-slices-bar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0
}

.curator-slices-bar-title {
  font-weight: 600;
  font-size: 0.9em
}

.curator-slices-bar-hint {
  font-size: 0.78em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  flex: 1 1
}

.slices-name-input {
  margin-top: 10px;
  margin-bottom: 0
}

.slices-name-input input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 6px;
  font-size: 0.85em;
  margin-bottom: 6px
}

.slices-name-input .slices-name-actions {
  display: flex;
  gap: 6px
}

.slices-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.slices-list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px
}

.slices-empty {
  font-size: 0.8em;
  color: #9ca3af;
  color: var(--card-color-secondary, #9ca3af);
  padding: 4px 0
}

.slice-card {
  padding: 8px 10px;
  background: #fff;
  background: var(--card-bg, #fff);
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 6px;
  border-left: 3px solid #7c3aed
}

.slices-list--horizontal .slice-card {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 320px
}

.slice-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px
}

.slice-card-name {
  font-weight: 600;
  font-size: 0.85em;
  color: #5b21b6
}

.slice-card-count {
  font-size: 0.7em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  padding: 1px 6px;
  border-radius: 8px
}

.slice-card-embed {
  display: block;
  font-family: var(--ff-monospace);
  font-size: 0.7em;
  padding: 3px 6px;
  margin-bottom: 4px;
  background: #1e1e1e;
  background: var(--code-bg, #1e1e1e);
  color: #d4d4d4;
  color: var(--code-color, #d4d4d4);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all
}

.slice-card-actions {
  display: flex;
  gap: 2px
}

.slice-action-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 0.72em;
  font-weight: 500;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280);
  cursor: pointer;
  border-radius: 3px
}

.slice-action-btn:hover {
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.slice-action-btn.slice-action-btn--danger:hover {
  background: #fef2f2;
  color: #dc2626
}

.visibility-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em
}

.visibility-badge--public {
  background: #dcfce7;
  color: #166534
}

.visibility-badge--private {
  background: #f3f4f6;
  color: #6b7280
}

.agent-session-embed-code {
  margin-top: 24px;
  padding: 16px;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb);
  border-radius: 8px
}

.agent-session-embed-code .agent-session-code-copy {
  display: flex;
  align-items: center;
  gap: 8px
}

.agent-session-embed-code .agent-session-code-copy code {
  flex: 1 1;
  font-family: var(--ff-monospace);
  font-size: 0.9em;
  padding: 8px 12px;
  background: #1e1e1e;
  background: var(--code-bg, #1e1e1e);
  color: #d4d4d4;
  color: var(--code-color, #d4d4d4);
  border-radius: 4px;
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all
}

.agent-session-show-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.agent-session-show-actions {
  display: flex;
  align-items: center;
  gap: 12px
}

.agent-session-author {
  margin-top: 8px;
  font-size: 0.9em;
  color: #6b7280;
  color: var(--card-color-secondary, #6b7280)
}

.sidebar-share-input {
  flex: 1 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 4px;
  font-family: var(--ff-monospace);
  font-size: 0.75em;
  background: #f9fafb;
  background: var(--card-secondary-bg, #f9fafb);
  color: #374151;
  color: var(--card-color, #374151)
}

.agent-session-embed-snippet {
  font-family: var(--ff-monospace);
  font-size: 0.85em;
  padding: 4px 8px;
  background: #f3f4f6;
  background: var(--card-secondary-bg, #f3f4f6);
  border-radius: 4px;
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all
}

.agent-session-full-view {
  border: 1px solid #dbdbdb;
  border: 1px solid var(--card-border, #dbdbdb);
  border-radius: 8px;
  overflow: hidden
}

.agent-session-full-view .agent-session-message {
  padding: 16px;
  border-bottom: 1px solid #dbdbdb;
  border-bottom: 1px solid var(--card-border, #dbdbdb)
}

.agent-session-full-view .agent-session-message:last-child {
  border-bottom: none
}

.agent-session-full-view .agent-session-tool-detail-expandable {
  margin: 4px 0;
  font-size: 0.85em
}

.agent-session-full-view .agent-session-tool-detail-expandable summary {
  cursor: pointer;
  color: #3b82f6;
  color: var(--accent-brand, #3b82f6)
}

.agent-session-full-view .agent-session-tool-detail-expandable pre {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #1e1e1e;
  background: var(--code-bg, #1e1e1e);
  color: #d4d4d4;
  color: var(--code-color, #d4d4d4);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto
}

.liquid-comment {
  padding: 0px;
  background: inherit;
  font-family: var(--ff-sans-serif);
  margin: 0.95em 0 1.2em;
  position: relative;
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  width: auto
}

@media screen and (min-width: 760px) {
  .liquid-comment {
    margin: 0.95em auto
  }
}

.liquid-comment .details {
  padding: 0px;
  margin: 13px;
  height: 33px;
  border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  display: flex;
  font-size: var(--fs-base);
  font-weight: 500
}

.liquid-comment .details img {
  left: inherit
}

.liquid-comment .details img.profile-pic {
  min-height: inherit;
  height: 33px;
  width: 33px;
  border-radius: 100px;
  margin: 0
}

.liquid-comment .details .icon-img {
  min-height: inherit;
  height: 16px;
  width: 16px;
  margin-right: 0px;
  opacity: 0.7
}

.liquid-comment .details .color-base-30 {
  display: none
}

.liquid-comment .details .comment-date {
  border: none;
  position: absolute;
  top: calc(28px - 0.25vw);
  right: calc(5px + 0.1vw) !important;
  font-size: 12px;
  text-align: right;
  display: block;
  width: 100px
}

.liquid-comment .details .comment-date :not(:first-child) {
  display: none
}

.liquid-comment .details .comment-date a {
  color: var(--card-color-tertiary)
}

.liquid-comment .details a {
  color: var(--card-color-tertiary);
  line-height: normal;
  line-height: initial;
  align-self: center;
  margin-right: 6px;
  text-decoration: none
}

.liquid-comment .details a:last-child {
  align-self: baseline;
  position: absolute;
  right: 5px
}

.liquid-comment .body {
  font-family: var(--ff-sans-serif);
  color: #0a0a0a;
  color: var(--body-color);
  font-size: 0.95em;
  line-height: 1.35em;
  overflow: hidden;
  margin: 13px;
  word-wrap: break-word;
  width: auto;
  padding: 0;
  margin-bottom: 10px !important
}

.liquid-comment .body pre {
  width: auto;
  margin-left: 0;
  padding: 10px
}

.liquid-comment .body h1,
.liquid-comment .body h2,
.liquid-comment .body h3,
.liquid-comment .body h4,
.liquid-comment .body h5,
.liquid-comment .body h6 {
  padding: 0px;
  margin: 4px 0px calc(1.1vw + 10px);
  font-size: 1em;
  font-weight: 600
}

.liquid-comment .body h1 {
  font-size: 1.3em
}

.liquid-comment .body p {
  padding: 0px;
  font-size: 0.95em;
  margin: 0 0 15px 0
}

.liquid-comment .body br {
  line-height: 220%
}

.liquid-comment .body ul,
.liquid-comment .body ol {
  padding-left: 6px;
  margin: 0.8em 0.7em 0.8em 1em
}

.liquid-comment .body ul {
  list-style-type: square
}

.liquid-comment .body li {
  margin: 3px 0px calc(0.5vw + 5px)
}

.liquid-comment .body blockquote {
  border-left: calc(0.2vw + 2px) solid #333;
  padding: 0.1% 3% 0.1% 2%;
  margin: 1.6em 1vw;
  font-size: 0.92em;
  line-height: 1.4em
}

.liquid-comment .body blockquote p {
  padding: 0;
  margin: 0.95em 0 0.95em
}

.liquid-comment .body blockquote.twitter-tweet {
  font-family: var(--ff-sans-serif);
  background: white;
  max-width: 480px;
  min-height: 135px;
  border: 1px solid #e9eef2;
  font-size: 17px;
  line-height: 20px;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px
}

.liquid-comment .body .edited-notification {
  color: #999999;
  font-size: 0.7em;
  padding: 3px 0px 0px;
  position: relative;
  z-index: 1
}

.liquid-comment .body code {
  margin: auto;
  white-space: nowrap;
  background: #f9fafa;
  background: var(--body-bg);
  padding: 1px 5px 0px;
  border-radius: 2px;
  color: #333842;
  font-size: 0.8em;
  display: inline-block;
  vertical-align: 0.1em;
  max-width: 100%;
  line-height: 1.4em
}

.liquid-comment .body img {
  max-width: 100%
}

.liquid-comment .body button {
  border: 0px;
  background: transparent;
  vertical-align: 2px;
  cursor: pointer;
  border-radius: 3px;
  display: block;
  padding: 0px;
  position: relative;
  z-index: 6
}

.liquid-comment .body button img {
  left: inherit;
  min-height: 0px;
  height: 16px;
  opacity: 0.62
}

.liquid-comment .body button:hover img {
  opacity: 1
}

.liquid-comment .body button .voted-heart {
  display: none;
  font-size: 22px;
  line-height: 21px;
  vertical-align: -2px
}

@media screen and (min-width: 390px) {
  .liquid-comment .body button {
    vertical-align: -7px
  }
}

.liquid-comment .body button.reacted {
  color: #66e2d5
}

.liquid-comment .body button.reacted img {
  display: none
}

.liquid-comment .body button.reacted .voted-heart {
  display: inline-block
}

.ltag_cta {
  --border-width: 1px;
  padding: var(--su-2) var(--su-4);
  border: var(--border-width) solid;
  border-color: var(--border);
  text-decoration: none;
  border-radius: var(--radius);
  font: inherit;
  background-color: var(--bg);
  color: var(--color);
  outline: 0;
  text-align: center;
  display: inline-flex;
  position: relative;
  overflow-wrap: normal
}

.ltag_cta:hover,
.js-focus-visible .ltag_cta.focus-visible:focus {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate);
  text-decoration: underline
}

.js-focus-visible .ltag_cta.focus-visible:focus {
  box-shadow: var(--focus-ring)
}

.ltag_cta {
  --bg: var(--cta-bg);
  --bg-hover: var(--cta-bg-hover);
  --color: var(--cta-color);
  --color-hover: var(--cta-color-hover);
  --border: var(--cta-border);
  --border-hover: var(--cta-border-hover)
}

.ltag_cta--branded {
  --bg: var(--cta-branded-bg);
  --bg-hover: var(--cta-branded-bg-hover);
  --color: var(--cta-branded-color);
  --color-hover: var(--cta-branded-color-hover);
  --border: var(--cta-branded-border);
  --border-hover: var(--cta-branded-border-hover);
  font-weight: var(--fw-medium)
}

.ltag_gist-liquid-tag table {
  margin: 0 !important
}

.ltag_gist-liquid-tag td {
  border: 0 !important;
  width: 500 !important
}

.ltag_gist-liquid-tag .gist .markdown-body pre {
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
  color: #29292e
}

.ltag_gist-liquid-tag .gist .markdown-body pre code {
  color: #29292e
}

.ltag_gist-liquid-tag .gist .blob-wrapper table {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2
}

.ltag-github-readme-tag {
  position: relative;
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  margin: 1.1em auto 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
  overflow: hidden
}

.ltag-github-readme-tag a {
  color: var(--link-branded-color) !important
}

.ltag-github-readme-tag .readme-overview {
  padding: 0.8em calc(0.5em + 0.25vw);
  border-bottom: 1px solid #dbdbdb
}

.ltag-github-readme-tag .readme-overview h2 {
  font-weight: 400 !important;
  font-size: 1.2em !important;
  line-height: 1.3em !important;
  margin: 0em 0px 0.5em !important
}

.ltag-github-readme-tag .readme-overview h2 img {
  width: 1.15em !important;
  max-width: 1.1em !important;
  display: inline-block;
  left: 0px;
  margin: 0;
  vertical-align: -0.18em;
  filter: invert(0);
  filter: var(--theme-social-icon-invert, invert(0))
}

.ltag-github-readme-tag .readme-overview h3 {
  font-weight: 400 !important;
  margin: 0;
  margin-left: 0.15em;
  font-size: 0.75em !important;
  line-height: 1.05em !important
}

.ltag-github-readme-tag .ltag-github-body {
  font-size: 0.72em;
  line-height: 1.12em;
  text-align: left;
  min-height: 100px
}

.ltag-github-readme-tag .gh-btn-container {
  padding: 0.1em 0 1.15em
}

.ltag-github-readme-tag .gh-btn {
  padding: 0.28em 1.2em;
  font-size: 0.75em
}

.ltag-github-readme-tag .markdown-body {
  padding: 0em calc(0.5em + 0.2vw)
}

.ltag-github-readme-tag .markdown-body table {
  max-width: 80%;
  margin-left: 10%
}

.ltag-github-readme-tag .markdown-body img {
  display: inline-block;
  left: 0px
}

.ltag-github-readme-tag .markdown-body .highlight {
  background: white
}

.ltag-github-readme-tag .markdown-body pre {
  max-width: 100%;
  margin-left: 10%
}

.ltag-github-readme-tag .markdown-body .anchor {
  display: none
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--su-6);
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:hover,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:hover,
.ltag__reddit--container .ltag__reddit--btn[href]:hover,
.gh-btn-container .gh-btn[href]:hover,
.crayons-btn[href]:focus,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:focus,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:focus,
.ltag__reddit--container .ltag__reddit--btn[href]:focus,
.gh-btn-container .gh-btn[href]:focus,
.crayons-btn:hover:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:hover:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:hover:enabled,
.ltag__reddit--container .ltag__reddit--btn:hover:enabled,
.gh-btn-container .gh-btn:hover:enabled,
.crayons-btn:active:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:active:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:active:enabled,
.ltag__reddit--container .ltag__reddit--btn:active:enabled,
.gh-btn-container .gh-btn:active:enabled {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
.ltag__wikipedia--container .crayons-btn--inverted.ltag__wikipedia--btn,
.ltag__stackexchange--container .crayons-btn--inverted.ltag__stackexchange--btn,
.ltag__reddit--container .crayons-btn--inverted.ltag__reddit--btn,
.gh-btn-container .crayons-btn--inverted.gh-btn {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
.ltag__wikipedia--container .ltag__wikipedia--btn[disabled],
.ltag__stackexchange--container .ltag__stackexchange--btn[disabled],
.ltag__reddit--container .ltag__reddit--btn[disabled],
.gh-btn-container .gh-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
.ltag__wikipedia--container .ltag__wikipedia--btn>*,
.ltag__stackexchange--container .ltag__stackexchange--btn>*,
.ltag__reddit--container .ltag__reddit--btn>*,
.gh-btn-container .gh-btn>* {
  pointer-events: none
}

.crayons-btn>*+input,
.ltag__wikipedia--container .ltag__wikipedia--btn>*+input,
.ltag__stackexchange--container .ltag__stackexchange--btn>*+input,
.ltag__reddit--container .ltag__reddit--btn>*+input,
.gh-btn-container .gh-btn>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-actions .ltag__wikipedia--btn,
.crayons-btn-actions .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-actions .ltag__stackexchange--btn,
.crayons-btn-actions .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-actions .ltag__reddit--btn,
.crayons-btn-actions .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-actions .gh-btn {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn,
.crayons-btn-group .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-group .gh-btn {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .gh-btn-container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined) {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .gh-btn-container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn--outlined,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn--outlined,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn--outlined,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn--outlined,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn--outlined,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:first-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:first-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:first-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:first-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:first-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:first-child,
.crayons-btn-group .gh-btn-container .gh-btn:first-child,
.gh-btn-container .crayons-btn-group .gh-btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:last-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:last-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:last-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:last-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:last-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:last-child,
.crayons-btn-group .gh-btn-container .gh-btn:last-child,
.gh-btn-container .crayons-btn-group .gh-btn:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius)
}

.c-btn {
  position: relative;
  display: inline-block;
  padding: var(--su-2) var(--su-4);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-btn[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: var(--fw-bold)
}

.c-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>* {
  pointer-events: none
}

.c-btn>*+input {
  pointer-events: revert
}

.c-btn {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: var(--su-2);
  margin-left: calc(var(--su-1) * -1)
}

.ltag_github-liquid-tag {
  margin: 1.1em auto 1.3em;
  position: relative
}

.ltag_github-liquid-tag h1 {
  font-size: var(--fs-xl) !important;
  line-height: var(--lh-base) !important;
  margin: 0 0 0.7em !important
}

@media screen and (min-width: 500px) {
  .ltag_github-liquid-tag h1 {
    margin-bottom: 10px;
    word-wrap: break-word
  }
}

.ltag_github-liquid-tag h1 a {
  color: var(--body-color)
}

.ltag_github-liquid-tag h1 .issue-title {
  font-weight: var(--fw-normal)
}

.ltag_github-liquid-tag h1 .issue-number {
  color: var(--base-60);
  font-weight: var(--fw-normal);
  letter-spacing: -1px
}

.ltag_github-liquid-tag h1 .github-logo {
  display: inline-block;
  max-width: 1.1em;
  width: 1.15em;
  vertical-align: middle;
  margin: 0;
  margin-right: 0.3em;
  left: 0;
  filter: invert(0);
  filter: var(--theme-social-icon-invert, invert(0))
}

.github-thread {
  font-family: var(--ff-sans-serif);
  background-color: var(--card-bg);
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  font-size: 0.77em;
  line-height: 1.15em;
  margin: 0;
  overflow: hidden
}

.github-thread .timeline-comment-header {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-bottom: 1px solid var(--form-border);
  padding: 0.5em 1.5em
}

@media screen and (min-width: 500px) {
  .github-thread .timeline-comment-header {
    align-items: center
  }
}

.github-thread .timeline-comment-header .github-liquid-tag-img {
  margin: 10px 10px 10px 0;
  width: 38px;
  height: 38px;
  padding: 0
}

.github-thread .timeline-comment-header-text {
  padding: 10px 0
}

.github-thread .timeline-comment-header-text a {
  color: var(--base-60)
}

.github-thread .timeline-comment-header-text a:hover {
  color: var(--base-60);
  text-decoration: underline
}

.ltag-github-body {
  padding: 1em 1.5em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  max-height: calc(21vw + 165px);
  overflow: hidden
}

@media screen and (min-width: 430px) {
  .ltag-github-body {
    max-height: calc(20vw + 153px)
  }
}

@media screen and (min-width: 800px) {
  .ltag-github-body {
    max-height: 310px
  }
}

.ltag-github-body h1,
.ltag-github-body h2,
.ltag-github-body h3,
.ltag-github-body h4,
.ltag-github-body h5,
.ltag-github-body h6 {
  font-weight: 500 !important
}

.ltag-github-body h1 {
  margin-left: 0;
  font-size: 1.9em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  margin-top: 1em !important;
  margin-bottom: 0.9em !important
}

.ltag-github-body h3 {
  margin-top: 1em !important;
  margin-bottom: 0.9em !important;
  padding: 0;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.25
}

.ltag-github-body h4 {
  padding: 0
}

.ltag-github-body *:first-child {
  margin-top: 0 !important
}

.ltag-github-body *:last-child {
  margin-bottom: 0 !important
}

.ltag-github-body img {
  left: inherit
}

.ltag-github-body blockquote {
  color: #6a737d;
  padding: 0px 1em;
  border-left: 0.25em solid #dfe2e5;
  margin: 16px 0px
}

.ltag-github-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  background-color: var(--card-bg);
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5
}

.ltag-github-body p {
  margin-top: 0px;
  padding: 0px;
  margin-bottom: 15px
}

.ltag-github-body p a.github-user-link {
  color: var(--card-color-secondary);
  font-weight: 600;
  white-space: nowrap
}

.ltag-github-body p a.github-user-link:hover {
  color: #24292e;
  text-decoration: underline
}

.ltag-github-body code {
  border-radius: 3px;
  padding: 0.2em 5px 0px;
  margin: 0px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
}

.ltag-github-body pre {
  width: 100% !important;
  margin: 0px;
  color: black;
  background-color: #f6f8fa;
  padding: 0
}

.ltag-github-body pre code {
  background-color: #f6f8fa;
  color: black;
  padding: 0em 0px 0px !important;
  line-height: 2em !important
}

.ltag-github-body .highlight pre,
.ltag-github-body pre,
.ltag-github-body pre code {
  padding: 16px !important;
  overflow: auto !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
  background-color: #f7f7f7 !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  color: black !important;
  border-radius: 3px !important;
  margin: 0.95em 0 1.2em !important
}

.ltag-github-body .highlight {
  font-size: 14px !important;
  margin-bottom: 16px !important;
  border-radius: 3px !important
}

.ltag-github-body b,
.ltag-github-body strong {
  font-weight: 600
}

.ltag-github-body .pl-c {
  color: #969896
}

.ltag-github-body .pl-c1,
.ltag-github-body .pl-s .pl-v {
  color: #0086b3
}

.ltag-github-body .pl-e,
.ltag-github-body .pl-en {
  color: #795da3
}

.ltag-github-body .pl-s .pl-s1,
.ltag-github-body .pl-smi {
  color: #333
}

.ltag-github-body .pl-ent {
  color: #63a35c
}

.ltag-github-body .pl-k {
  color: #a71d5d
}

.ltag-github-body .pl-pds,
.ltag-github-body .pl-s,
.ltag-github-body .pl-s .pl-pse .pl-s1,
.ltag-github-body .pl-sr,
.ltag-github-body .pl-sr .pl-cce,
.ltag-github-body .pl-sr .pl-sra,
.ltag-github-body .pl-sr .pl-sre {
  color: #183691
}

.ltag-github-body .pl-v {
  color: #ed6a43
}

.ltag-github-body .pl-id {
  color: #b52a1d
}

.ltag-github-body .pl-ii {
  background-color: #b52a1d;
  color: #f8f8f8
}

.ltag-github-body .pl-sr .pl-cce {
  color: #63a35c;
  font-weight: bold
}

.ltag-github-body .pl-ml {
  color: #693a17
}

.ltag-github-body .pl-mh,
.ltag-github-body .pl-mh .pl-en,
.ltag-github-body .pl-ms {
  color: #1d3e81;
  font-weight: bold
}

.ltag-github-body .pl-mq {
  color: #008080
}

.ltag-github-body .pl-mi {
  color: #333;
  font-style: italic
}

.ltag-github-body .pl-mb {
  color: #333;
  font-weight: bold
}

.ltag-github-body .pl-md {
  background-color: #ffecec;
  color: #bd2c00
}

.ltag-github-body .pl-mi1 {
  background-color: #eaffea;
  color: #55a532
}

.ltag-github-body .pl-mdr {
  color: #795da3;
  font-weight: bold
}

.ltag-github-body .pl-mo {
  color: #1d3e81
}

.gh-btn-container {
  text-align: center;
  padding: 0.35em 0 1.35em;
  box-shadow: 0 0 60px 42px var(--card-bg);
  position: relative;
  z-index: var(--z-elevate)
}

#instagram-liquid-tag {
  background: white;
  border: 1px solid #dbdbdb;
  margin: 1px 1px 12px;
  min-width: 326px;
  max-width: 540px;
  width: calc(100% - 2px);
  height: 559px;
  border-radius: 3px;
  box-shadow: none;
  display: block;
  padding: 0px
}

.instagram-position {
  position: relative;
  max-width: 540px;
  margin: 0 auto
}

.katex-element {
  overflow-x: auto
}

.ltag__link__link {
  color: var(--body-color) !important
}

.ltag__link__link:active {
  opacity: 0.7
}

.ltag__link {
  font-family: var(--ff-sans-serif);
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  display: block;
  margin: 0.95em 0 1.2em;
  max-width: 100%
}

.ltag__link .video-image {
  position: relative;
  padding-top: 56%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #0a0a0a no-repeat center center;
  background-size: cover;
  display: block
}

.ltag__link .video-timestamp {
  position: absolute;
  font-size: 12px;
  bottom: 6px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 0px 5px 0px;
  font-weight: 500;
  border-radius: 3px;
  display: block;
  line-height: 20px
}

.ltag__link .video-timestamp img {
  height: 14px;
  width: 14px;
  display: inline-block;
  vertical-align: -2px;
  padding-left: 5px
}

.ltag__link .ltag__link__pic {
  display: inline-block;
  padding: calc(0.6vw + 8px) calc(0.8vw + 8px);
  padding-right: 8px;
  box-sizing: border-box;
  border-radius: var(--radius)
}

.ltag__link .ltag__link__pic img {
  width: calc(1.2vw + 40px);
  height: calc(1.2vw + 40px);
  margin: auto auto !important;
  border-radius: 150px;
  box-sizing: border-box;
  max-width: 60px;
  max-height: 60px
}

.ltag__link .ltag__link__org__pic {
  border-radius: var(--radius);
  position: relative;
  display: inline-block;
  padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
  padding-right: 10px;
  box-sizing: border-box
}

.ltag__link .ltag__link__org__pic::after {
  content: '';
  opacity: 0.15;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-sizing: border-box
}

.ltag__link .ltag__link__org__pic>img {
  display: inline-block;
  width: calc(2.2vw + 45px);
  height: calc(2.5vw + 40px);
  margin: auto auto !important;
  border-radius: var(--radius);
  box-sizing: border-box;
  max-width: 55px;
  max-height: 55px
}

.ltag__link .ltag__link__user__pic {
  display: inline-block;
  position: absolute;
  right: calc(10px - 0.7vw);
  bottom: calc(10px - 0.3vw);
  border: 2px solid var(--base-inverted);
  border-radius: 100%;
  background-color: var(--card-color-tertiary);
  box-sizing: border-box;
  width: calc(2vw + 28px);
  height: calc(2vw + 28px);
  max-width: 38px;
  max-height: 38px
}

.ltag__link .ltag__link__user__pic img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  margin: 0
}

.ltag__link .ltag__link__content {
  display: inline-block;
  vertical-align: top;
  padding: calc(0.7vw + 6px);
  padding-left: 0;
  width: calc(100% - 2.5vw - 70px)
}

.ltag__link .ltag__link__content h2 {
  margin: 0;
  padding: 0;
  font-weight: var(--fw-bold);
  font-size: calc(1.45em + 0.2vw);
  line-height: var(--lh-tight)
}

.ltag__link .ltag__link__content h3 {
  margin: calc(0.3vw + 1px) 0;
  padding: 0;
  font-size: var(--fs-s);
  font-weight: var(--fw-medium);
  color: var(--color);
  color: var(--card-color-tertiary)
}

.ltag__link .ltag__link__content h3 a {
  color: var(--card-color-tertiary)
}

.ltag__link .ltag__link__content .missing {
  padding: 0 10px !important
}

.ltag__link .ltag__link__content .ltag__link__taglist {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 0.88em;
  margin-bottom: 5px;
  color: var(--tag-color)
}

.ltag__link .ltag__link__content .ltag__link__tag {
  margin-right: calc(0.02vw + 4px);
  font-size: 0.9em;
  margin-left: 1px
}

.ltag__link .ltag__link__content .ltag__link__servicename {
  color: var(--card-color-tertiary);
  font-size: 0.7em
}

.ltag__link .ltag__link__content .ltag__link__servicename img {
  vertical-align: -5px;
  height: 1.5em;
  width: 1.5em;
  display: inline-block;
  margin-left: 2px
}

.crayons-article-sticky .ltag__link .ltag__link__org__pic,
.crayons-story__indention-billboard .ltag__link .ltag__link__org__pic {
  width: 60px;
  height: 60px
}

.crayons-article-sticky .ltag__link .ltag__link__org__pic img,
.crayons-story__indention-billboard .ltag__link .ltag__link__org__pic img {
  width: 33px;
  height: 33px
}

.crayons-article-sticky .ltag__link .ltag__link__user__pic,
.crayons-story__indention-billboard .ltag__link .ltag__link__user__pic {
  width: 19px;
  height: 19px;
  padding: 0 !important
}

.crayons-article-sticky .ltag__link .ltag__link__user__pic img,
.crayons-story__indention-billboard .ltag__link .ltag__link__user__pic img {
  width: 15px;
  height: 15px;
  top: 0;
  position: absolute
}

.crayons-article-sticky .ltag__link .ltag__link__pic,
.crayons-story__indention-billboard .ltag__link .ltag__link__pic {
  width: 60px;
  height: 60px
}

.crayons-article-sticky .ltag__link .ltag__link__pic img,
.crayons-story__indention-billboard .ltag__link .ltag__link__pic img {
  width: 33px;
  height: 33px
}

.crayons-article-sticky .ltag__link .ltag__link__content,
.crayons-story__indention-billboard .ltag__link .ltag__link__content {
  width: calc(100% - 65px)
}

.crayons-article-sticky .ltag__link .ltag__link__content h2,
.crayons-story__indention-billboard .ltag__link .ltag__link__content h2 {
  font-size: 1.25em;
  line-height: 1.28em
}

.crayons-article-sticky .ltag__link .ltag__link__content h3,
.crayons-story__indention-billboard .ltag__link .ltag__link__content h3 {
  margin-top: 4px !important
}

.bluesky-embed {
  min-height: 170px;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--form-border) !important;
  border-radius: 8px !important;
  margin-top: 10px !important;
  display: block;
  font-size: 1.125rem
}

.bluesky-embed p {
  padding-top: 60px !important
}

.bluesky-embed iframe {
  margin-bottom: 0px !important;
  border-radius: 8px !important
}

.ltag__listing {
  font-family: var(--ff-sans-serif);
  border: 1px solid #dbdbdb;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  display: block;
  margin: 0.95em 0 1.2em;
  max-width: 100%
}

@media screen and (min-width: 760px) {
  .ltag__listing {
    margin: 0.95em auto;
    width: 620px
  }
}

.ltag__listing .ltag__listing-content {
  padding: calc(0.5vw + 6px)
}

.ltag__listing .ltag__listing-content h3 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 1.5em
}

.ltag__listing .ltag__listing-content h3 a {
  color: var(--body-color)
}

.ltag__listing .ltag__listing-content .ltag__listing-body {
  max-width: 100%;
  margin: 5px 0 15px 0;
  font-size: 0.9em
}

.ltag__listing .ltag__listing-content .ltag__listing-body a {
  color: var(--body-color)
}

.ltag__listing .ltag__listing-content .ltag__listing-tags {
  font-size: 0.7em;
  line-height: 1.3em
}

.ltag__listing .ltag__listing-content .ltag__listing-tags .ltag__listing-tag {
  margin-right: calc(0.4vw + 4px);
  margin-left: 1px
}

.ltag__listing .ltag__listing-content .ltag__listing-tags .ltag__listing-tag a {
  color: var(--card-color-secondary);
  display: inline-block;
  margin: 2px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: bold
}

.ltag__listing .ltag__listing-content .ltag__listing-author-info {
  color: var(--card-color-tertiary);
  line-height: 1.3em
}

.ltag__listing .ltag__listing-content .ltag__listing-author-info a {
  margin: 0.1vw 0;
  padding: 0;
  font-size: 0.7em;
  margin-bottom: 0;
  font-weight: bold;
  color: var(--card-color-tertiary)
}

.podcastliquidtag {
  padding: 0px;
  margin-bottom: 20px;
  margin-top: 90px;
  border-radius: 3px;
  font-family: var(--ff-sans-serif);
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5)
}

@media screen and (min-width: 830px) {
  .podcastliquidtag {
    flex-direction: row-reverse;
    margin: 20px 0
  }
}

.podcastliquidtag .podcastliquidtag__info {
  color: white;
  font-weight: 500;
  margin: -5px 15px 10px
}

@media screen and (min-width: 830px) {
  .podcastliquidtag .podcastliquidtag__info {
    margin: 20px 15px;
    width: 77%
  }
}

.podcastliquidtag .podcastliquidtag__info a {
  color: white;
  text-decoration: none
}

.podcastliquidtag .podcastliquidtag__info a .tinyimage {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  margin-right: 10px;
  left: 0;
  float: left
}

.podcastliquidtag .podcastliquidtag__info a:hover {
  color: white
}

.podcastliquidtag .podcastliquidtag__info h1 {
  margin: 0px 0px 0.5em 0px;
  font-weight: 700;
  padding: 0
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__episodetitle {
  font-size: calc(1.8vw + 19px)
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle {
  font-size: calc(1.2vw + 14px);
  padding: 0px 0px;
  font-weight: 500;
  margin-top: -5px
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
  font-size: 25px;
  border-radius: 3px;
  border: 0px;
  width: 100%;
  margin-top: 15px;
  padding: 20px 0px
}

@media screen and (min-width: 950px) {
  .podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
    font-size: calc(1.2vw + 16px);
    margin-left: 5px;
    display: inline-block;
    width: 220px;
    padding: 5px 0px
  }
}

@media screen and (min-width: 950px) {
  .podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__episodetitle {
    font-size: 38px
  }

  .podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle {
    font-size: 24px
  }

  .podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
    font-size: 22px;
    width: 165px
  }
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links {
  display: flex;
  flex-direction: row;
  font-size: 14px
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a {
  margin-right: 10px;
  background-color: #292e34;
  color: white;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 400;
  width: 100px;
  border: 1px solid #3c5163;
  box-shadow: inset 1px 1px 0 #485f74;
  transition: background-color 250ms ease;
  text-align: center
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a:hover {
  background-color: #202429
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a img {
  display: inline;
  width: 16px;
  height: 16px;
  left: 0;
  margin-right: 5px;
  vertical-align: middle
}

.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a .service-name {
  display: none
}

@media screen and (min-width: 630px) {
  .podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a .service-name {
    display: inline-block
  }
}

.podcastliquidtag .podcastliquidtag__record {
  position: relative;
  margin: 20px 20px;
  height: 70px;
  transform: translateY(-33px)
}

@media screen and (min-width: 830px) {
  .podcastliquidtag .podcastliquidtag__record {
    width: 15%;
    height: inherit;
    transform: none
  }
}

.podcastliquidtag .podcastliquidtag__record:hover {
  cursor: pointer
}

.podcastliquidtag .podcastliquidtag__record img {
  max-width: 100%
}

.podcastliquidtag .podcastliquidtag__record .pause-butt {
  display: none
}

.podcastliquidtag .podcastliquidtag__record .podcastliquidtag__podcastimage {
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  height: 130px;
  background: #0a0a0a;
  margin: auto;
  animation: spin 20s linear infinite;
  animation: var(--podcast-spinning-animation);
  -webkit-backface-visibility: hidden;
  animation-play-state: paused
}

@media screen and (min-width: 830px) {
  .podcastliquidtag .podcastliquidtag__record .podcastliquidtag__podcastimage {
    height: inherit
  }
}

.podcastliquidtag .podcastliquidtag__record .button {
  position: absolute;
  height: 115px;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto
}

@media screen and (min-width: 830px) {
  .podcastliquidtag .podcastliquidtag__record .button {
    height: 75px
  }
}

.podcastliquidtag .playing .podcastliquidtag__podcastimage {
  animation-play-state: running
}

.podcastliquidtag .playing .play-butt {
  display: none
}

.podcastliquidtag .playing .pause-butt {
  display: block
}

@keyframes spin {
  100% {
    transform: rotate(360deg)
  }
}

.ltag-poll {
  width: 600px;
  max-width: 96%;
  margin: auto;
  border-radius: 3px;
  border: 1px solid #dbdbdb !important;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  padding: 2px 15px 18px;
  font-family: var(--ff-sans-serif);
  margin: 1.6em auto !important
}

.ltag-poll h3 {
  margin: 15px 0px
}

.ltag-poll .ltag-pollanswers {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 8px !important;
  font-size: 0.9em !important
}

.ltag-poll .ltag-pollanswers li {
  padding-left: 8px;
  border-radius: 3px;
  width: 95%;
  position: relative
}

.ltag-poll .ltag-pollanswers li:hover {
  background: #f5f6f7;
  background: var(--theme-container-background-hover, #f5f6f7)
}

.ltag-poll .ltag-pollanswers li.ltag-polloption-justshowmetheresults:hover {
  background: transparent
}

.ltag-poll .ltag-pollanswers li.already-voted {
  background: transparent
}

.ltag-poll .ltag-pollanswers input {
  vertical-align: top;
  margin-top: 1.05em
}

.ltag-poll .ltag-pollanswers label {
  width: calc(100% - 40px);
  padding: 2px 6px;
  cursor: pointer;
  vertical-align: -3px;
  display: inline-block;
  line-height: 1.25em
}

.ltag-poll .ltag-pollanswers .ltag-voting-results-count {
  font-size: 0.7em;
  color: #666666;
  text-align: left
}

.ltag-poll .ltag-pollanswers button {
  width: 100%;
  background: transparent;
  border: 0px;
  font-size: 0.7em;
  color: #666666;
  text-align: left;
  padding-left: 20px
}

.ltag-poll .ltag-pollanswers .ltag-votepercent {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  border-radius: 3px
}

.ltag-poll .ltag-pollanswers .ltag-votepercent.ltag-optionvotedfor {
  background: #66e2d5;
  font-weight: bold
}

.ltag-poll .ltag-pollanswers .ltag-votepercent.ltag-optionnotvotedfor {
  background: #dbdbdb;
  background: var(--theme-container-accent-background, #dbdbdb)
}

.ltag-poll .ltag-pollanswers .ltag-votepercenttext {
  position: relative;
  z-index: 5
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 4px;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers li:hover {
  border-color: #66e2d5
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers li.already-voted {
  border-color: #66e2d5;
  background: rgba(102, 226, 213, 0.1);
  box-shadow: 1px 1px 1px #66e2d5
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers .scale-value {
  font-size: 1.2em;
  font-weight: bold;
  color: #66e2d5;
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(102, 226, 213, 0.1);
  border-radius: 4px;
  margin-left: 10px
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers input[type="radio"] {
  margin-right: 10px
}

.ltag-poll[data-poll-type="scale"] .ltag-pollanswers label {
  flex: 1 1;
  margin: 0;
  padding: 0;
  cursor: pointer
}

.ltag-poll.scale-5-options .ltag-pollanswers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

.ltag-poll.scale-5-options .ltag-pollanswers li {
  flex: 0 0 auto;
  min-width: 30px;
  max-width: 80px;
  padding: 4px 4px;
  justify-content: center;
  text-align: center;
  margin-bottom: 0
}

.ltag-poll.scale-5-options .ltag-pollanswers li .scale-value {
  font-size: 1.1em;
  font-weight: bold;
  color: #66e2d5;
  min-width: 30px;
  text-align: center;
  padding: 2px 3px;
  background: rgba(102, 226, 213, 0.1);
  border-radius: 4px;
  margin: 0
}

.ltag-poll.scale-5-options .ltag-pollanswers li input[type="radio"] {
  display: none
}

.ltag-poll.scale-5-options .ltag-pollanswers li label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0
}

.ltag-poll.scale-5-options .ltag-pollanswers .ltag-polloption-justshowmetheresults {
  flex-basis: 100%;
  text-align: center;
  margin-top: 10px
}

@media (min-width: 1200px) {
  .ltag-poll.scale-many-options .ltag-pollanswers {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
  }

  .ltag-poll.scale-many-options .ltag-pollanswers li {
    flex: 0 0 auto;
    min-width: 30px;
    max-width: 80px;
    padding: 4px 4px;
    justify-content: center;
    text-align: center;
    margin-bottom: 0
  }

  .ltag-poll.scale-many-options .ltag-pollanswers li .scale-value {
    font-size: 1.1em;
    font-weight: bold;
    color: #66e2d5;
    min-width: 30px;
    text-align: center;
    padding: 2px 3px;
    background: rgba(102, 226, 213, 0.1);
    border-radius: 4px;
    margin: 0
  }

  .ltag-poll.scale-many-options .ltag-pollanswers li input[type="radio"] {
    display: none
  }

  .ltag-poll.scale-many-options .ltag-pollanswers li label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0
  }

  .ltag-poll.scale-many-options .ltag-pollanswers .ltag-polloption-justshowmetheresults {
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px
  }
}

.ltag-survey {
  width: 650px;
  max-width: 98%;
  margin: 2em auto !important;
  border: 1px solid #dbdbdb !important;
  border: 1px solid var(--form-border, #dbdbdb) !important;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow-smooth, 1px 2px 4px 0 rgba(0, 0, 0, 0.18));
  background-color: white;
  background-color: var(--theme-container-background, white);
  border-radius: 5px;
  border-radius: var(--radius-lg, 5px);
  box-sizing: border-box;
  padding: calc(4px + 0.6vw) calc(7px + 0.6vw) calc(7px + 0.6vw);
  font-family: var(--ff-sans-serif)
}

.ltag-survey .survey-title {
  margin: 10px 0 25px;
  text-align: left;
  font-size: 1.4em;
  color: var(--body-color);
  padding-top: 10px
}

.survey-poll {
  padding-bottom: 1.8em;
  border-bottom: 1px solid #eee;
  border-bottom: 1px solid var(--form-border, #eee);
  margin-bottom: 1em
}

.survey-poll h3 {
  margin: 15px 0px 16px !important;
  font-size: 1.05em !important;
  font-weight: 500 !important;
  color: var(--body-color);
  padding: var(--su-2) var(--su-2) !important;
  border: 1px solid #eee;
  border: 1px solid var(--form-border, #eee);
  border-radius: 5px;
  border-radius: var(--radius-md, 5px);
  background-color: rgba(0, 0, 0, 0.05)
}

.survey-poll.survey-poll-long-question h3 {
  font-size: 1em !important
}

.survey-poll-answers {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.survey-poll-answers.survey-poll-answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  grid-gap: 10px;
  gap: 10px
}

.survey-poll-answers.survey-poll-answers-grid .survey-poll-option {
  padding: 3px 8px;
  font-size: calc(0.8em + 0.1vw)
}

.survey-poll-answers.survey-poll-answers-grid .survey-poll-option .option-text {
  white-space: normal
}

.survey-poll-answers .survey-poll-option {
  border: 1px solid var(--form-border);
  border-radius: 5px;
  border-radius: var(--radius-md, 5px);
  padding: 12px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px
}

.survey-poll-answers .survey-poll-option input[type="radio"],
.survey-poll-answers .survey-poll-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer
}

.survey-poll-answers .survey-poll-option .option-text {
  color: var(--body-color);
  flex: 1 1;
  cursor: pointer
}

.survey-poll-answers .survey-poll-option .option-text .option-supplementary-text {
  font-size: 0.85em;
  color: #666;
  color: var(--card-color-tertiary, #666);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.3
}

.survey-poll-answers .survey-poll-option:hover {
  background-color: #f5f6f7;
  background-color: var(--theme-container-background-hover, #f5f6f7);
  border-color: var(--cta-border-hover)
}

.survey-poll-answers .survey-poll-option.user-selected {
  background-color: var(--cta-branded-bg);
  border-color: var(--cta-branded-border);
  box-shadow: 1px 1px 1px var(--cta-branded-border);
  cursor: default
}

.survey-poll-answers .survey-poll-option.user-selected .option-text {
  color: var(--cta-branded-color);
  font-weight: 700;
  font-weight: var(--fw-bold, 700)
}

.survey-poll-answers .survey-poll-option.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: transparent
}

.survey-poll-answers .survey-poll-option.disabled:hover {
  border-color: var(--form-border)
}

.scale-supplementary-text-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px auto 24px;
  max-width: 560px
}

.scale-supplementary-text-container .scale-supplementary-text-left,
.scale-supplementary-text-container .scale-supplementary-text-right {
  font-size: 0.8em;
  color: #666;
  color: var(--card-color-tertiary, #666);
  font-weight: 500;
  font-weight: var(--fw-medium, 500);
  max-width: 40%;
  text-align: center;
  line-height: 1.2;
  min-width: 220px
}

.scale-supplementary-text-horizontal {
  display: flex
}

@media (max-width: 1279px) {
  .survey-poll.scale-many-options .scale-supplementary-text-horizontal {
    display: none
  }
}

.scale-supplementary-text-vertical {
  display: none;
  font-size: 0.7em;
  color: #666;
  color: var(--card-color-tertiary, #666);
  font-weight: 400;
  font-weight: var(--fw-normal, 400);
  margin-top: 2px;
  line-height: 1.1
}

@media (max-width: 1279px) {
  .survey-poll.scale-many-options .scale-supplementary-text-vertical {
    display: block
  }
}

.survey-poll[data-poll-type="scale"] .survey-poll-answers .survey-poll-option {
  justify-content: space-between
}

.survey-poll[data-poll-type="scale"] .survey-poll-answers .survey-poll-option .scale-value {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--cta-branded-color);
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(var(--cta-branded-bg-rgb), 0.1);
  border-radius: 4px;
  border-radius: var(--radius-sm, 4px);
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.survey-poll.scale-5-options[data-poll-type="scale"] .survey-poll-answers {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

.survey-poll.scale-5-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option {
  flex: 0 0 auto;
  min-width: 30px;
  max-width: 80px;
  padding: 4px 4px;
  justify-content: center;
  text-align: center
}

.survey-poll.scale-5-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option .scale-value {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--cta-branded-color);
  min-width: 30px;
  text-align: center;
  padding: 2px 3px;
  background: rgba(var(--cta-branded-bg-rgb), 0.1);
  border-radius: 4px;
  border-radius: var(--radius-sm, 4px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.survey-poll.scale-5-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option input[type="radio"] {
  display: none
}

.survey-poll.scale-5-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option .option-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

@media (min-width: 1280px) {
  .survey-poll.scale-many-options[data-poll-type="scale"] .survey-poll-answers {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
  }

  .survey-poll.scale-many-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option {
    flex: 0 0 auto;
    min-width: 30px;
    max-width: 80px;
    padding: 4px 4px;
    justify-content: center;
    text-align: center
  }

  .survey-poll.scale-many-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option .scale-value {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--cta-branded-color);
    min-width: 30px;
    text-align: center;
    padding: 2px 3px;
    background: rgba(var(--cta-branded-bg-rgb), 0.1);
    border-radius: 4px;
    border-radius: var(--radius-sm, 4px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .survey-poll.scale-many-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option input[type="radio"] {
    display: none
  }

  .survey-poll.scale-many-options[data-poll-type="scale"] .survey-poll-answers .survey-poll-option .option-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }
}

.survey-poll-feedback,
.survey-poll-final-vote-feedback {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--cta-branded-bg);
  border-left: 4px solid var(--cta-branded-border);
  color: var(--cta-branded-color);
  font-weight: var(--fw-medium);
  border-radius: 3px;
  border-radius: var(--radius-sm, 3px)
}

.survey-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
  padding: 0 5px
}

.survey-navigation .survey-progress {
  font-size: 0.9em;
  color: #666;
  color: var(--card-color-tertiary, #666);
  display: none
}

@media (min-width: 768px) {
  .survey-navigation .survey-progress {
    display: block
  }
}

.survey-navigation button {
  padding: 8px 16px;
  border: 1px solid var(--form-border);
  border-radius: 4px;
  border-radius: var(--radius-md, 4px);
  background-color: transparent;
  color: var(--body-color);
  cursor: pointer;
  font-weight: 500;
  font-weight: var(--fw-medium, 500);
  min-width: 44%
}

@media (min-width: 768px) {
  .survey-navigation button {
    min-width: 25%
  }
}

.survey-navigation button:hover:not(:disabled) {
  background-color: #f5f6f7;
  background-color: var(--theme-container-background-hover, #f5f6f7);
  border-color: var(--cta-border-hover)
}

.survey-navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed
}

.survey-complete-message {
  text-align: center;
  padding: 3em 1em
}

.survey-complete-message h3 {
  color: var(--cta-branded-color)
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--su-6);
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:hover,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:hover,
.ltag__reddit--container .ltag__reddit--btn[href]:hover,
.gh-btn-container .gh-btn[href]:hover,
.crayons-btn[href]:focus,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:focus,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:focus,
.ltag__reddit--container .ltag__reddit--btn[href]:focus,
.gh-btn-container .gh-btn[href]:focus,
.crayons-btn:hover:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:hover:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:hover:enabled,
.ltag__reddit--container .ltag__reddit--btn:hover:enabled,
.gh-btn-container .gh-btn:hover:enabled,
.crayons-btn:active:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:active:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:active:enabled,
.ltag__reddit--container .ltag__reddit--btn:active:enabled,
.gh-btn-container .gh-btn:active:enabled {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
.ltag__wikipedia--container .crayons-btn--inverted.ltag__wikipedia--btn,
.ltag__stackexchange--container .crayons-btn--inverted.ltag__stackexchange--btn,
.ltag__reddit--container .crayons-btn--inverted.ltag__reddit--btn,
.gh-btn-container .crayons-btn--inverted.gh-btn {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
.ltag__wikipedia--container .ltag__wikipedia--btn[disabled],
.ltag__stackexchange--container .ltag__stackexchange--btn[disabled],
.ltag__reddit--container .ltag__reddit--btn[disabled],
.gh-btn-container .gh-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
.ltag__wikipedia--container .ltag__wikipedia--btn>*,
.ltag__stackexchange--container .ltag__stackexchange--btn>*,
.ltag__reddit--container .ltag__reddit--btn>*,
.gh-btn-container .gh-btn>* {
  pointer-events: none
}

.crayons-btn>*+input,
.ltag__wikipedia--container .ltag__wikipedia--btn>*+input,
.ltag__stackexchange--container .ltag__stackexchange--btn>*+input,
.ltag__reddit--container .ltag__reddit--btn>*+input,
.gh-btn-container .gh-btn>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__reddit--container .ltag__reddit--btn,
.gh-btn-container .gh-btn {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-actions .ltag__wikipedia--btn,
.crayons-btn-actions .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-actions .ltag__stackexchange--btn,
.crayons-btn-actions .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-actions .ltag__reddit--btn,
.crayons-btn-actions .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-actions .gh-btn {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn,
.crayons-btn-group .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-group .gh-btn {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .gh-btn-container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined) {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .gh-btn-container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn--outlined,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn--outlined,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn--outlined,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn--outlined,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn--outlined,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:first-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:first-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:first-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:first-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:first-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:first-child,
.crayons-btn-group .gh-btn-container .gh-btn:first-child,
.gh-btn-container .crayons-btn-group .gh-btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:last-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:last-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:last-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:last-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:last-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:last-child,
.crayons-btn-group .gh-btn-container .gh-btn:last-child,
.gh-btn-container .crayons-btn-group .gh-btn:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius)
}

.c-btn {
  position: relative;
  display: inline-block;
  padding: var(--su-2) var(--su-4);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-btn[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: var(--fw-bold)
}

.c-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>* {
  pointer-events: none
}

.c-btn>*+input {
  pointer-events: revert
}

.c-btn {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: var(--su-2);
  margin-left: calc(var(--su-1) * -1)
}

.ltag__reddit--container {
  max-width: 620px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  margin: 1.1em auto 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  overflow: hidden
}

.ltag__reddit--container .ltag__reddit--title-container {
  border-bottom: 1px solid var(--base-60);
  display: flex;
  flex-direction: column;
  padding: 0 var(--su-3)
}

.ltag__reddit--container .ltag__reddit--title-container header {
  display: flex;
  justify-content: space-between
}

.ltag__reddit--container .ltag__reddit--title-container header .ltag__reddit--title h1 {
  margin: var(--su-2) 0 0 var(--su-1);
  font-size: var(--fs-xl);
  padding-bottom: 0;
  display: flex;
  align-items: center
}

.ltag__reddit--container .ltag__reddit--title-container header .ltag__reddit--title h1>a {
  color: var(--link-branded-color);
  display: inline-block
}

.ltag__reddit--container .ltag__reddit--title-container header .ltag__reddit--title h1 img {
  height: 40px;
  width: 40px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--su-3) 0 0
}

.ltag__reddit--container .ltag__reddit--title-container header .ltag__reddit--post-metadata {
  font-size: var(--fs-s);
  margin-left: 40px
}

.ltag__reddit--container .ltag__reddit--title-container header .ltag__reddit--post-metadata span {
  display: inline-block;
  padding: var(--su-2);
  margin-left: 6px;
  color: var(--base-60)
}

.ltag__reddit--container .ltag__reddit--body {
  padding: 0 var(--su-3);
  max-height: calc(21vw + 165px);
  overflow: hidden
}

@media screen and (min-width: 430px) {
  .ltag__reddit--container .ltag__reddit--body {
    max-height: calc(20vw + 153px)
  }
}

@media screen and (min-width: 800px) {
  .ltag__reddit--container .ltag__reddit--body {
    max-height: 310px
  }
}

.ltag__reddit--container .ltag__reddit--body h1,
.ltag__reddit--container .ltag__reddit--body h2,
.ltag__reddit--container .ltag__reddit--body h3,
.ltag__reddit--container .ltag__reddit--body h4,
.ltag__reddit--container .ltag__reddit--body h5,
.ltag__reddit--container .ltag__reddit--body h6 {
  font-weight: var(--fw-medium)
}

.ltag__reddit--container .ltag__reddit--body p {
  margin-top: 0;
  padding: 0;
  margin-bottom: 15px;
  font-size: var(--fs-l);
  line-height: var(--lh-base)
}

.ltag__reddit--container .ltag__reddit--btn--container {
  padding: 1rem;
  z-index: var(--z-elevate);
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px 42px #fff;
  box-shadow: 0 0 60px 42px var(--theme-container-background, #fff)
}

.ltag__reddit--container .ltag__reddit--btn>a,
.ltag__reddit--container .ltag__reddit--btn>a:hover {
  color: var(--button-secondary-color)
}

.ltag-row {
  display: flex;
  gap: var(--su-4);
  margin-bottom: var(--su-4)
}

.ltag-row>br {
  display: none
}

.ltag-row>* {
  flex: 1 1;
  min-width: 0
}

@media (max-width: 640px) {
  .ltag-row {
    flex-direction: column
  }
}

.ltag-col {
  flex: 1 1;
  min-width: 0
}

.ltag-col>br {
  display: none
}

.ltag-col>:first-child {
  margin-top: 0
}

.ltag-col>:last-child {
  margin-bottom: 0
}

.ltag-col-span-2 {
  flex: 2 1
}

.ltag-col-span-3 {
  flex: 3 1
}

.ltag-col-span-4 {
  flex: 4 1
}

.ltag-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: var(--su-4);
  gap: var(--su-4);
  margin-bottom: var(--su-4)
}

.ltag-features>br {
  display: none
}

.ltag-feature {
  display: flex;
  gap: var(--su-3);
  padding: var(--su-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg)
}

.ltag-feature__icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
  line-height: 1;
  color: var(--accent-brand)
}

.ltag-feature__icon .crayons-icon {
  width: 32px;
  height: 32px
}

.ltag-feature__content {
  display: flex;
  flex-direction: column;
  gap: var(--su-2)
}

.ltag-feature__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold)
}

.ltag-feature__body {
  font-size: var(--fs-base);
  color: var(--card-color-secondary)
}

.ltag-feature__body>:first-child {
  margin-top: 0
}

.ltag-feature__body>:last-child {
  margin-bottom: 0
}

.ltag-quote {
  padding: var(--su-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  margin-bottom: var(--su-4);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box
}

.ltag-quote__body {
  padding: 0 var(--su-4);
  flex-grow: 1
}

.ltag-quote__mark {
  color: var(--card-color-tertiary);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.ltag-quote__mark svg {
  width: 24px;
  height: 24px
}

.ltag-quote__mark--start {
  display: flex;
  justify-content: flex-end;
  transform: scaleX(-1) scaleY(-1)
}

.ltag-quote__mark--end {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--su-3)
}

.ltag-quote__text {
  font-size: var(--fs-l);
  color: var(--card-color)
}

.ltag-quote__text>br {
  display: none
}

.ltag-quote__text>:first-child {
  margin-top: 0
}

.ltag-quote__text>:last-child {
  margin-bottom: 0
}

.ltag-quote__rating {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: var(--su-2)
}

.ltag-quote__star {
  color: var(--card-color-tertiary);
  font-size: var(--fs-l)
}

.ltag-quote__star--filled {
  color: #f5a623
}

.ltag-quote__divider {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: var(--su-2) 0 var(--su-4)
}

.ltag-quote__footer {
  display: flex;
  flex-direction: column;
  gap: var(--su-3)
}

.ltag-quote__author-info {
  display: flex;
  align-items: center;
  gap: var(--su-3)
}

.ltag-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  flex-shrink: 0
}

.ltag-quote__meta {
  display: flex;
  flex-direction: column
}

.ltag-quote__author {
  font-weight: var(--fw-bold)
}

.ltag-quote__role,
.ltag-quote__source {
  font-size: var(--fs-s);
  color: var(--card-color-tertiary)
}

.ltag-quote__link {
  font-weight: var(--fw-medium);
  color: var(--accent-brand);
  text-decoration: none;
  white-space: nowrap
}

.ltag-quote__link:hover {
  text-decoration: underline
}

.ltag-slides {
  margin-bottom: var(--su-4);
  overflow: hidden
}

.ltag-slides__track {
  display: flex;
  gap: var(--su-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--su-2)
}

.ltag-slides__track>br {
  display: none
}

.ltag-slides__track::-webkit-scrollbar {
  height: 6px
}

.ltag-slides__track::-webkit-scrollbar-thumb {
  background: var(--card-color-tertiary);
  border-radius: 3px
}

.ltag-slide {
  flex: 1 1;
  min-width: 200px;
  scroll-snap-align: start;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative
}

.ltag-slide__image {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9
}

.ltag-slide__link {
  display: block;
  position: relative
}

.ltag-slide__title {
  display: block;
  padding: var(--su-3) var(--su-4);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  color: var(--card-color);
  text-decoration: none
}

.ltag-slide__title:hover {
  text-decoration: underline
}

.ltag-slide__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none
}

.ltag-slides--carousel {
  position: relative;
  overflow: hidden
}

.ltag-slides--carousel .ltag-slides__track {
  overflow: visible;
  gap: 0;
  padding-bottom: 0;
  transition: transform 0.4s ease;
  flex-wrap: nowrap
}

.ltag-slides--carousel .ltag-slides__track::-webkit-scrollbar {
  display: none
}

.ltag-slides--carousel .ltag-slide {
  flex: 0 0 100%;
  min-width: 100%;
  border: none;
  border-radius: 0
}

.ltag-slides__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 2
}

.ltag-slides__nav:hover {
  background: var(--card-color);
  color: var(--card-bg)
}

.ltag-slides__nav--prev {
  left: var(--su-3)
}

.ltag-slides__nav--next {
  right: var(--su-3)
}

.ltag-slides__dots {
  display: flex;
  justify-content: center;
  gap: var(--su-2);
  padding: var(--su-3) 0
}

.ltag-slides__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--card-color-tertiary);
  background: transparent;
  cursor: pointer;
  padding: 0
}

.ltag-slides__dot:hover {
  background: var(--card-color-tertiary)
}

.ltag-slides__dot--active {
  background: var(--accent-brand);
  border-color: var(--accent-brand)
}

.ltag-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--su-4);
  padding: var(--su-5);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: var(--su-4)
}

.ltag-offer__body {
  flex: 1 1 80%;
  min-width: 200px;
  font-size: var(--fs-l);
  font-weight: var(--fw-medium)
}

.ltag-offer__body>br {
  display: none
}

.ltag-offer__body>:first-child {
  margin-top: 0
}

.ltag-offer__body>:last-child {
  margin-bottom: 0
}

.ltag-offer__button {
  display: inline-flex;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--su-3) var(--su-4);
  border-radius: var(--radius);
  font-weight: var(--fw-medium);
  color: white !important
}

.ltag-offer__button:hover {
  color: white !important
}

.ltag__replit br {
  line-height: 0 !important;
  display: none !important
}

.ltag__replit iframe {
  margin: 0 !important
}

.ltag__stackexchange--container {
  max-width: 620px;
  border: 1px solid var(--base-60);
  border-radius: 3px;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  margin: 1.1em auto 1.3em;
  font-family: var(--ff-sans-serif);
  overflow: hidden;
  padding-top: 1rem
}

.ltag__stackexchange--container .ltag__stackexchange--title-container {
  border-bottom: 1px solid #eaecef;
  display: flex;
  flex-direction: column
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header {
  display: flex;
  justify-content: space-between
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1,
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title .ltag__stackexchange--header {
  font-size: var(--fs-l);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  margin: 0em 0 0.5em;
  padding: 0 var(--su-3)
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1 .title-flare,
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title .ltag__stackexchange--header .title-flare {
  background: #557de8;
  color: white;
  padding: 0px 7px;
  border-radius: 3px
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1 img,
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title .ltag__stackexchange--header img {
  width: var(--su-7);
  display: inline-block;
  margin: 0 var(--su-2) 0 0;
  vertical-align: middle
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--post-metadata {
  font-size: 0.6em
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--post-metadata span {
  display: inline-block;
  padding: 7px 6px;
  margin-left: 6px
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container {
  margin-right: 15px;
  display: flex;
  width: 50px;
  flex-direction: column;
  flex-wrap: nowrap;
  color: gray;
  font-size: 0.85em;
  align-self: center
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container img {
  position: static;
  position: initial;
  width: 16px;
  height: 16px;
  margin: var(--su-2) auto
}

.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container .ltag__stackexchange--score-number {
  width: 100%;
  height: 20px;
  text-align: center;
  padding-bottom: 10px;
  font-size: 0.8em
}

.ltag__stackexchange--container .ltag__stackexchange--body {
  padding: 1em 0.5em;
  max-height: calc(21vw + 165px);
  overflow: hidden
}

@media screen and (min-width: 430px) {
  .ltag__stackexchange--container .ltag__stackexchange--body {
    max-height: calc(20vw + 153px)
  }
}

@media screen and (min-width: 800px) {
  .ltag__stackexchange--container .ltag__stackexchange--body {
    max-height: 310px
  }
}

.ltag__stackexchange--container .ltag__stackexchange--body h1,
.ltag__stackexchange--container .ltag__stackexchange--body h2,
.ltag__stackexchange--container .ltag__stackexchange--body h3,
.ltag__stackexchange--container .ltag__stackexchange--body h4,
.ltag__stackexchange--container .ltag__stackexchange--body h5,
.ltag__stackexchange--container .ltag__stackexchange--body h6 {
  font-weight: 500 !important
}

.ltag__stackexchange--container .ltag__stackexchange--body p {
  margin-top: 0px;
  padding: 0px;
  margin-bottom: 15px;
  font-size: 1.1rem
}

.ltag__stackexchange--container .ltag__stackexchange--body code {
  border-radius: 3px;
  padding: 0.2em 5px 0px;
  margin: 0px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
}

.ltag__stackexchange--container .ltag__stackexchange--body pre {
  width: 100%;
  margin: 0px;
  padding: 0.2em 0.6em
}

.ltag__stackexchange--container .ltag__stackexchange--body pre code {
  background-color: #f6f8fa;
  color: black;
  padding: 0em 0px 0px !important;
  line-height: 2em !important
}

.ltag__stackexchange--container .ltag__stackexchange--body .highlight pre,
.ltag__stackexchange--container .ltag__stackexchange--body pre,
.ltag__stackexchange--container .ltag__stackexchange--body pre code {
  overflow: auto;
  background-color: #f7f7f7;
  border-radius: 3px;
  box-sizing: border-box;
  color: black
}

.ltag__stackexchange--container .ltag__stackexchange--body .highlight {
  font-size: 14px;
  margin-bottom: 16px;
  border-radius: 3px
}

.ltag__stackexchange--container .ltag__stackexchange--btn--container {
  padding: 0.1em 0 1.15em;
  z-index: var(--z-elevate);
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px 42px var(--card-bg)
}

.ltag__stackexchange--container .ltag__stackexchange--btn a {
  pointer-events: revert
}

.ltag_speakerdeck {
  border: 0px;
  background: padding-box padding-box rgba(0, 0, 0, 0.1);
  margin: 0px;
  padding: 0px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px;
  width: 560px;
  height: 420px
}

.ltag__tag {
  font-family: var(--ff-sans-serif);
  border-left: 1px solid var(--form-border) !important;
  border-right: 1px solid var(--form-border) !important;
  border-bottom: 1px solid var(--form-border) !important;
  border-top: 30px solid var(--form-border);
  box-shadow: var(--shadow-smooth) !important;
  border-radius: var(--radius-auto) !important;
  display: block;
  margin: 0.95em 0 1.2em;
  position: relative;
  overflow: hidden;
  width: auto
}

@media screen and (min-width: 760px) {
  .ltag__tag {
    margin: 0.95em auto
  }
}

.ltag__tag .ltag__tag__content {
  width: 90%;
  width: calc(100% - 36px);
  padding: calc(0.5vw + 6px) 0px;
  padding-left: 24px
}

.ltag__tag .ltag__tag__content a {
  color: var(--card-color)
}

.ltag__tag .ltag__tag__content h2 {
  margin: 0;
  padding: 0;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center
}

.ltag__tag .ltag__tag__content h2 .follow-action-button {
  visibility: hidden;
  margin: 0.2em 0.5em
}

.ltag__tag .ltag__tag__content h2 .follow-action-button.showing {
  visibility: visible
}

.ltag__tag .ltag__tag__content .ltag__tag__summary {
  padding-top: calc(0.5vw + 6px);
  padding-bottom: calc(0.5vw + 6px);
  font-size: 0.77em;
  line-height: 1.1em
}

blockquote.ltag__twitter-tweet {
  font-family: var(--ff-sans-serif);
  background: white;
  max-width: 500px;
  font-size: 0.75em;
  line-height: 1.35em;
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  margin: 1.6em auto !important;
  min-height: 60px;
  cursor: pointer;
  padding: 0px !important
}

blockquote.ltag__twitter-tweet a {
  color: #55acee
}

@media screen and (min-width: 360px) {
  blockquote.ltag__twitter-tweet {
    min-height: 105px
  }
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media {
  position: relative;
  overflow: hidden
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media img {
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media img.ltag__twitter-tweet__play-butt {
  width: 70px;
  height: 70px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__video {
  display: none
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__video video {
  width: 100%
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header {
  position: relative;
  height: 45px
}

@media screen and (min-width: 360px) {
  blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header {
    height: 52px
  }
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__profile-image {
  height: 36px;
  min-height: 36px;
  width: 36px;
  border-radius: 50px;
  position: absolute;
  left: calc(0.3vw + 13px);
  top: calc(0.3vw + 13px);
  background-color: #ececec;
  margin: 0
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__twitter-logo {
  position: absolute;
  right: calc(0.3vw + 8px);
  top: 20px;
  left: auto
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__twitter-logo img {
  height: 24px;
  min-height: 24px;
  max-width: 24px;
  display: inline-block;
  width: 36px;
  margin: auto
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__full-name {
  color: #1c2022;
  position: absolute;
  left: calc(0.3vw + 57px);
  top: calc(0.3vw + 13px);
  font-weight: bold;
  font-size: 16px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__username {
  position: absolute;
  left: calc(0.3vw + 57px);
  top: calc(0.3vw + 33px);
  color: #697882;
  font-size: 14px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__body {
  color: #1c2022;
  font-size: 16px;
  line-height: 22px;
  padding: calc(0.3vw + 13px) calc(0.3vw + 13px) 0px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__body br {
  line-height: 0 !important
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__date {
  font-size: 14px;
  color: #697882;
  margin-top: 3px;
  padding: 0px calc(0.3vw + 13px)
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote {
  color: #1c2022;
  margin: calc(0.3vw + 13px) calc(0.3vw + 13px) 0px;
  padding: calc(0.2vw + 8px) calc(0.2vw + 8px);
  border: 1px solid #dce3e8;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.1em
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote:hover {
  border: 1px solid #a09dad
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote .ltag__twitter-tweet__quote__header {
  padding: 0 0 calc(0.05vw + 3px);
  font-size: 0.9em
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote .ltag__twitter-tweet__quote__header .ltag__twitter-tweet__quote__header__name {
  font-weight: bold;
  font-size: 1.1em
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions {
  margin: 6px auto 0px;
  padding: 0px calc(0.3vw + 13px) 5px;
  color: #aab8c2;
  font-size: 14px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions .ltag__twitter-tweet__actions__button {
  width: 18px;
  height: 22px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 2px;
  vertical-align: -7px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions .ltag__twitter-tweet__actions__button:first-child {
  margin-left: 8px
}

blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions img {
  height: 20px;
  min-height: 20px;
  margin: 0
}

.ltag_twitter-timeline-liquid-tag {
  margin: 1.1em auto 1.3em;
  max-width: 580px;
  position: relative
}

.twitter-timeline-thread {
  background-color: #fff;
  background-color: var(--card-bg);
  border: 1px solid #d1d5da;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  font-size: 0.77em;
  line-height: 1.15em;
  margin: 0;
  width: 98%;
  overflow: hidden
}

.ltag-twitter-timeline-body {
  padding: 1em 0.5em;
  max-height: calc(21vw + 165px);
  overflow: hidden
}

.tt-btn-container {
  text-align: center;
  padding: 0.35em 0 1.35em;
  box-shadow: -0px -0px 60px 42px #fff;
  box-shadow: 0px 0px 60px 42px var(--card-bg);
  position: relative;
  z-index: var(--z-elevate)
}

.tt-btn {
  color: #0366d6;
  background-color: #f1f8ff;
  border-radius: 3px;
  line-height: 20px;
  padding: 0.25em 1.2em;
  opacity: 0.9;
  font-size: 0.94em;
  font-weight: bold;
  border: 1px solid #0366d6
}

.tt-btn:hover {
  opacity: 1
}

.ltag__user-subscription-tag__container {
  background: var(--card-bg);
  color: var(--card-color);
  border-radius: var(--radius);
  border: 1px solid var(--card-color);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: var(--su-4)
}

@media screen and (min-width: 768px) {
  .ltag__user-subscription-tag__container {
    padding: var(--su-6)
  }
}

.ltag__user-subscription-tag__signed-in {
  color: var(--base-70)
}

.ltag__user-subscription-tag__profile-images.signed-in {
  margin: 0 auto var(--su-4);
  position: relative;
  height: 80px;
  width: 80px
}

.ltag__user-subscription-tag__profile-images.signed-in .ltag__user-subscription-tag__author-profile-image,
.ltag__user-subscription-tag__profile-images.signed-in .ltag__user-subscription-tag__subscriber-profile-image {
  display: block
}

.ltag__user-subscription-tag__profile-images.signed-out {
  height: auto;
  width: auto;
  text-align: center;
  margin: 0 auto
}

.ltag__user-subscription-tag__profile-images.signed-out .ltag__user-subscription-tag__author-profile-image {
  margin: 0 auto var(--su-4)
}

.ltag__user-subscription-tag__profile-images.signed-out .ltag__user-subscription-tag__subscriber-profile-image {
  display: none
}

.ltag__user-subscription-tag__profile-images img {
  border-radius: 100%
}

.ltag__user-subscription-tag__subscriber-profile-image {
  position: absolute;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 0 4px var(--body-color-inverted)
}

.ltag__user__link {
  color: var(--body-color) !important
}

.ltag__user__link:active {
  opacity: 0.7
}

.ltag__user__link.profile-image-link:hover {
  opacity: 1
}

.ltag__user__link.profile-image-link:active {
  opacity: 1
}

.ltag__user {
  font-family: var(--ff-sans-serif);
  border-left: 1px solid var(--form-border) !important;
  border-right: 1px solid var(--form-border) !important;
  border-bottom: 1px solid var(--form-border) !important;
  border-top: 30px solid var(--form-border);
  box-shadow: var(--shadow-smooth) !important;
  border-radius: var(--radius-auto) !important;
  display: block;
  margin: 0.95em 0 1.2em;
  position: relative;
  overflow: hidden;
  width: auto
}

.ltag__user .ltag__user__pic {
  display: inline-block;
  padding: calc(0.6vw + 8px);
  padding-right: 8px
}

.ltag__user .ltag__user__pic img {
  width: 80px !important;
  height: 80px !important;
  margin: auto auto !important;
  border-radius: 50%;
  -o-object-fit: cover !important;
  object-fit: cover !important
}

.ltag__user .ltag__user__content {
  display: inline-block;
  vertical-align: top;
  padding: calc(0.9vw + 6px);
  padding-left: 2px;
  width: calc(100% - 8vw - 60px)
}

.ltag__user .ltag__user__content h2 {
  margin: 0;
  padding: 0;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center
}

.ltag__user .ltag__user__content h2 .follow-action-button {
  visibility: hidden;
  margin: 0.2em 0.5em
}

.ltag__user .ltag__user__content h2 .follow-action-button.showing {
  visibility: visible
}

.ltag__user .ltag__user__content .ltag__user__summary {
  margin: 0.3em 0;
  padding: 0;
  font-size: 0.87em;
  margin-bottom: 0;
  line-height: 1.2em;
  opacity: 0.85
}

.ltag__user .ltag__user__content .ltag__user__taglist {
  margin: 1em 0px;
  padding: 0px;
  line-height: 1;
  font-size: 0.8em;
  opacity: 0.7
}

.ltag__user .ltag__user__content .ltag__user__taglist a {
  color: #0a0a0a;
  margin-right: 1em;
  display: inline-block;
  height: 30px
}

.ltag__user .ltag__user__content .ltag__user__taglist img {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin-right: 2px;
  vertical-align: -0.1em;
  left: 0px
}

.crayons-article-sticky .ltag__user .ltag__user__pic {
  width: 60px;
  height: 60px
}

.crayons-article-sticky .ltag__user .ltag__user__pic img {
  width: 40px !important;
  height: 40px !important
}

.crayons-article-sticky .ltag__user .ltag__user__content {
  width: calc(100% - 65px)
}

.crayons-article-sticky .ltag__user .ltag__user__content h2 {
  font-size: 1.4em;
  line-height: 1.42em;
  display: block
}

.crayons-article-sticky .ltag__user .ltag__user__content h2 .ltag__user__link {
  width: 100%;
  display: block
}

.crayons-article-sticky .ltag__user .ltag__user__content h2 .follow-action-button {
  display: block;
  margin: 10px 0
}

.crayons-article-sticky .ltag__user .ltag__user__content h3 {
  margin-top: 4px !important
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.gh-btn-container .gh-btn,
.ltag__reddit--container .ltag__reddit--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.gh-btn-container .gh-btn,
.ltag__reddit--container .ltag__reddit--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--su-6);
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible .ltag__wikipedia--container .focus-visible.ltag__wikipedia--btn:focus,
.ltag__wikipedia--container .js-focus-visible .focus-visible.ltag__wikipedia--btn:focus,
.js-focus-visible .gh-btn-container .focus-visible.gh-btn:focus,
.gh-btn-container .js-focus-visible .focus-visible.gh-btn:focus,
.js-focus-visible .ltag__reddit--container .focus-visible.ltag__reddit--btn:focus,
.ltag__reddit--container .js-focus-visible .focus-visible.ltag__reddit--btn:focus,
.js-focus-visible .ltag__stackexchange--container .focus-visible.ltag__stackexchange--btn:focus,
.ltag__stackexchange--container .js-focus-visible .focus-visible.ltag__stackexchange--btn:focus,
.crayons-btn:is(label):focus-within,
.ltag__wikipedia--container .ltag__wikipedia--btn:is(label):focus-within,
.gh-btn-container .gh-btn:is(label):focus-within,
.ltag__reddit--container .ltag__reddit--btn:is(label):focus-within,
.ltag__stackexchange--container .ltag__stackexchange--btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:hover,
.gh-btn-container .gh-btn[href]:hover,
.ltag__reddit--container .ltag__reddit--btn[href]:hover,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:hover,
.crayons-btn[href]:focus,
.ltag__wikipedia--container .ltag__wikipedia--btn[href]:focus,
.gh-btn-container .gh-btn[href]:focus,
.ltag__reddit--container .ltag__reddit--btn[href]:focus,
.ltag__stackexchange--container .ltag__stackexchange--btn[href]:focus,
.crayons-btn:hover:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:hover:enabled,
.gh-btn-container .gh-btn:hover:enabled,
.ltag__reddit--container .ltag__reddit--btn:hover:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:hover:enabled,
.crayons-btn:active:enabled,
.ltag__wikipedia--container .ltag__wikipedia--btn:active:enabled,
.gh-btn-container .gh-btn:active:enabled,
.ltag__reddit--container .ltag__reddit--btn:active:enabled,
.ltag__stackexchange--container .ltag__stackexchange--btn:active:enabled {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
.ltag__wikipedia--container .crayons-btn--inverted.ltag__wikipedia--btn,
.gh-btn-container .crayons-btn--inverted.gh-btn,
.ltag__reddit--container .crayons-btn--inverted.ltag__reddit--btn,
.ltag__stackexchange--container .crayons-btn--inverted.ltag__stackexchange--btn {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
.ltag__wikipedia--container .ltag__wikipedia--btn[disabled],
.gh-btn-container .gh-btn[disabled],
.ltag__reddit--container .ltag__reddit--btn[disabled],
.ltag__stackexchange--container .ltag__stackexchange--btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
.ltag__wikipedia--container .ltag__wikipedia--btn>*,
.gh-btn-container .gh-btn>*,
.ltag__reddit--container .ltag__reddit--btn>*,
.ltag__stackexchange--container .ltag__stackexchange--btn>* {
  pointer-events: none
}

.crayons-btn>*+input,
.ltag__wikipedia--container .ltag__wikipedia--btn>*+input,
.gh-btn-container .gh-btn>*+input,
.ltag__reddit--container .ltag__reddit--btn>*+input,
.ltag__stackexchange--container .ltag__stackexchange--btn>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
.ltag__wikipedia--container .ltag__wikipedia--btn,
.gh-btn-container .gh-btn,
.ltag__reddit--container .ltag__reddit--btn,
.ltag__stackexchange--container .ltag__stackexchange--btn {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-actions .ltag__wikipedia--btn,
.crayons-btn-actions .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-actions .gh-btn,
.crayons-btn-actions .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-actions .ltag__reddit--btn,
.crayons-btn-actions .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-actions .ltag__stackexchange--btn {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn,
.crayons-btn-group .gh-btn-container .gh-btn,
.gh-btn-container .crayons-btn-group .gh-btn,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.gh-btn-container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined),
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined) {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .crayons-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__wikipedia--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .gh-btn-container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .crayons-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .gh-btn-container .crayons-btn-group .ltag__wikipedia--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .gh-btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.gh-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__reddit--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .crayons-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__reddit--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__reddit--container .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__reddit--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .crayons-btn-group .ltag__stackexchange--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .crayons-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__wikipedia--container .ltag__stackexchange--container .crayons-btn-group .ltag__wikipedia--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .gh-btn-container .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .gh-btn-container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.gh-btn-container .crayons-btn-group .ltag__stackexchange--container .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .gh-btn-container .crayons-btn-group .gh-btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__reddit--container .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__reddit--container .crayons-btn-group .ltag__stackexchange--container .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.ltag__stackexchange--btn:not(.crayons-btn--outlined):hover {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn+.crayons-btn--outlined,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn+.crayons-btn--outlined,
.crayons-btn-group .gh-btn-container .gh-btn+.crayons-btn--outlined,
.gh-btn-container .crayons-btn-group .gh-btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn+.crayons-btn--outlined,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn+.crayons-btn--outlined,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn+.crayons-btn--outlined,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:first-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:first-child,
.crayons-btn-group .gh-btn-container .gh-btn:first-child,
.gh-btn-container .crayons-btn-group .gh-btn:first-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:first-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:first-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:first-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group .ltag__wikipedia--container .ltag__wikipedia--btn:last-child,
.ltag__wikipedia--container .crayons-btn-group .ltag__wikipedia--btn:last-child,
.crayons-btn-group .gh-btn-container .gh-btn:last-child,
.gh-btn-container .crayons-btn-group .gh-btn:last-child,
.crayons-btn-group .ltag__reddit--container .ltag__reddit--btn:last-child,
.ltag__reddit--container .crayons-btn-group .ltag__reddit--btn:last-child,
.crayons-btn-group .ltag__stackexchange--container .ltag__stackexchange--btn:last-child,
.ltag__stackexchange--container .crayons-btn-group .ltag__stackexchange--btn:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius)
}

.c-btn {
  position: relative;
  display: inline-block;
  padding: var(--su-2) var(--su-4);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.c-btn:is(label):focus-within {
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-btn[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: var(--fw-bold)
}

.c-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>* {
  pointer-events: none
}

.c-btn>*+input {
  pointer-events: revert
}

.c-btn {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: var(--su-2);
  margin-left: calc(var(--su-1) * -1)
}

.ltag__wikipedia--container {
  border: 1px solid var(--form-border);
  box-shadow: var(--shadow-smooth);
  border-radius: var(--radius-auto);
  margin: 1.1em auto 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  overflow: hidden;
  padding-top: 1rem
}

.ltag__wikipedia--container .ltag__wikipedia--header {
  font-weight: var(--fw-normal);
  font-size: var(--fs-xl);
  line-height: var(--lh-base);
  margin: 0em 0 0.5em;
  padding: 0 var(--su-5)
}

.ltag__wikipedia--container .ltag__wikipedia--header>a {
  color: var(--link-branded-color)
}

.ltag__wikipedia--container .ltag__wikipedia--header .ltag__wikipedia--logo {
  width: 1.15em;
  max-width: 1.1em;
  display: inline-block;
  left: 0;
  margin: 0 var(--su-2) 0 0;
  vertical-align: middle;
  filter: invert(0);
  filter: var(--theme-social-icon-invert, invert(0))
}

.ltag__wikipedia--container .ltag__wikipedia--extract {
  font-weight: var(--fw-normal);
  margin: 0;
  margin-left: 0.15em;
  font-size: var(--fs-s);
  line-height: var(--lh-base);
  padding: 0 var(--su-5)
}

.ltag__wikipedia--container .ltag__wikipedia--btn--container {
  padding: 1rem;
  z-index: var(--z-elevate);
  text-align: center;
  position: relative;
  box-shadow: 0px 0px 60px 42px #fff;
  box-shadow: 0px 0px 60px 42px var(--theme-container-background, #fff)
}

.ltag__wikipedia--container .ltag__wikipedia--btn>a,
.ltag__wikipedia--container .ltag__wikipedia--btn>a:hover {
  color: var(--button-secondary-color)
}

.unsubscribed {
  background: #66e2d5;
  color: #0c3d38;
  margin: 100px auto;
  padding: 40px 10px
}

@media screen and (min-width: 645px) {
  .unsubscribed {
    margin: 100px auto;
    width: 565px;
    padding: 40px
  }
}

.unsubscribed--red {
  background: #ea919a
}

.unsubscribed__title {
  font-weight: 600;
  font-size: 26px
}

.unsubscribed__message {
  font-weight: 400
}

.ForemWebView-only,
.ForemWebView-iOS-only,
.ForemWebView-Android-only,
.Desktop-only,
.Browser-only,
.Browser-iOS-only,
.Browser-Android-only,
.Browser-macOS-only,
.Browser-Windows-only,
.Browser-Linux-only {
  display: none
}

body[data-runtime='ForemWebView-iOS'] .ForemWebView-only,
body[data-runtime='ForemWebView-Android'] .ForemWebView-only {
  display: block;
  display: var(--runtime-display, block)
}

body[data-runtime='ForemWebView-iOS'] .ForemWebView-iOS-only,
body[data-runtime='ForemWebView-Android'] .ForemWebView-Android-only {
  display: block;
  display: var(--runtime-display, block)
}

body[data-runtime$='Windows'] .Desktop-only,
body[data-runtime$='Linux'] .Desktop-only,
body[data-runtime$='macOS'] .Desktop-only {
  display: block;
  display: var(--runtime-display, block)
}

body[data-runtime='Browser-Android'] .Browser-only,
body[data-runtime='Browser-iOS'] .Browser-only,
body[data-runtime='Browser-Linux'] .Browser-only,
body[data-runtime='Browser-Windows'] .Browser-only,
body[data-runtime='Browser-macOS'] .Browser-only {
  display: block;
  display: var(--runtime-display, block)
}

body[data-runtime='Browser-Android'] .Browser-Android-only,
body[data-runtime='Browser-iOS'] .Browser-iOS-only,
body[data-runtime='Browser-Linux'] .Browser-Linux-only,
body[data-runtime='Browser-Windows'] .Browser-Windows-only,
body[data-runtime='Browser-macOS'] .Browser-macOS-only {
  display: block;
  display: var(--runtime-display, block)
}

.runtime-banner {
  display: flex;
  margin: 0 auto;
  left: var(--su-4);
  right: var(--su-4);
  position: fixed;
  bottom: calc(var(--su-2) + env(safe-area-inset-bottom));
  flex-flow: row nowrap;
  align-items: center;
  padding: var(--su-3);
  max-width: calc(min(100% - var(--su-4) * 2, 750px));
  z-index: var(--z-popover);
  border-radius: var(--radius);
  background: #012026;
  color: var(--snackbar-color);
  font-size: var(--fs-s)
}

.runtime-banner :-moz-any-link {
  color: inherit
}

.runtime-banner :any-link {
  color: inherit
}

.runtime-banner a svg {
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 3px
}

.runtime-banner a div>span:first-child {
  font-size: 16px;
  line-height: 16px;
  color: #ffffff;
  margin-bottom: var(--su-1)
}

.runtime-banner a div>span:last-child {
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  opacity: 0.65
}

.runtime-banner button>svg {
  color: #ffffff
}

@media (max-width: 768px) {
  div[data-current-page='stories-show'] .runtime-banner {
    bottom: calc(var(--su-9) + env(safe-area-inset-bottom))
  }
}

.mobile-deep-link-banner {
  margin: 30px;
  text-align: center
}

.mobile-deep-link-banner .crayons-card {
  max-width: 500px;
  margin: 30px auto
}

#mobile-deep-link-spinner svg {
  margin: 30px auto
}



@import url(https://assets.dev.to/assets/react-dates/lib/css/_datepicker-efc367057e7f65b7734d69877fab4ee5db2e2054b468b8768da4bc8e82c1b059.css);
@import url(https://assets.dev.to/assets/react-dates/lib/css/_datepicker-efc367057e7f65b7734d69877fab4ee5db2e2054b468b8768da4bc8e82c1b059.css);
@import url(https://assets.dev.to/assets/react-dates/lib/css/_datepicker-efc367057e7f65b7734d69877fab4ee5db2e2054b468b8768da4bc8e82c1b059.css);

:root {
  --header-height: 56px;
  --site-width: 1380px;
  --su-05: 0.125rem;
  --su-1: 0.25rem;
  --su-2: 0.5rem;
  --su-3: 0.75rem;
  --su-4: 1rem;
  --su-5: 1.25rem;
  --su-6: 1.5rem;
  --su-7: 2rem;
  --su-8: 3rem;
  --su-9: 4rem;
  --su-10: 8rem;
  --radius: 0.375rem;
  --radius-large: 0.75rem;
  --radius-xl: 2rem;
  --radius-2xl: 3rem;
  --radius-3xl: 4rem;
  --radius-auto: Max(0px, Min(var(--radius), calc((100vw - 4px - 100%) * 9999))) / var(--radius);
  --radius-large-auto: Max(0px,
      Min(var(--radius-large), calc((100vw - 4px - 100%) * 9999))) / var(--radius-large);
  --transition-func: cubic-bezier(0.17, 0.67, 0.5, 0.71);
  --transition-time: 100ms;
  --transition-props: var(--transition-func) var(--transition-time);
  --focus-ring: 0 0 0 2px var(--base-inverted), 0 0 0 4px var(--focus);
  --ff-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --ff-monospace: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  --ff-serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua',
    Georgia, serif;
  --ff-comic: 'Comic Sans MS', cursive, sans-serif;
  --ff-dyslexic: OpenDyslexic, sans-serif;
  --fs-2xs: 0.675rem;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-base: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --opacity-0: 0.00001;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;
  --z-negative: -1;
  --z-elevate: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-dropdown: 400;
  --z-modal: 500;
  --z-popover: 500;
  --white: 255, 255, 255;
  --black: 0, 0, 0;
  --grey-50: 250, 250, 250;
  --grey-100: 246, 246, 246;
  --grey-200: 229, 229, 229;
  --grey-300: 212, 212, 212;
  --grey-400: 163, 163, 163;
  --grey-500: 115, 115, 115;
  --grey-600: 82, 82, 82;
  --grey-700: 64, 64, 64;
  --grey-800: 38, 38, 38;
  --grey-900: 23, 23, 23;
  --red-50: 254, 242, 242;
  --red-100: 254, 226, 226;
  --red-200: 254, 202, 202;
  --red-300: 252, 165, 165;
  --red-400: 248, 113, 113;
  --red-500: 239, 68, 68;
  --red-600: 220, 38, 38;
  --red-700: 185, 28, 28;
  --red-800: 153, 27, 27;
  --red-900: 127, 29, 29;
  --yellow-50: 255, 251, 235;
  --yellow-100: 254, 243, 199;
  --yellow-200: 253, 230, 138;
  --yellow-300: 252, 211, 77;
  --yellow-400: 251, 191, 36;
  --yellow-500: 245, 158, 11;
  --yellow-600: 217, 119, 6;
  --yellow-700: 180, 83, 9;
  --yellow-800: 146, 64, 14;
  --yellow-900: 120, 53, 15;
  --green-50: 236, 253, 245;
  --green-100: 209, 250, 229;
  --green-200: 167, 243, 208;
  --green-300: 110, 231, 183;
  --green-400: 52, 211, 153;
  --green-500: 16, 185, 129;
  --green-600: 5, 150, 105;
  --green-700: 4, 120, 87;
  --green-800: 6, 95, 70;
  --green-900: 6, 78, 59;
  --indigo-50: 238, 242, 255;
  --indigo-100: 224, 231, 255;
  --indigo-200: 199, 210, 254;
  --indigo-300: 165, 180, 252;
  --indigo-400: 129, 140, 248;
  --indigo-500: 99, 102, 241;
  --indigo-600: 79, 70, 229;
  --indigo-700: 67, 56, 202;
  --indigo-800: 55, 48, 163;
  --indigo-900: 49, 46, 129;
  --accent-brand-lighter-rgb: var(--indigo-500);
  --accent-brand-rgb: var(--indigo-600);
  --accent-brand-darker-rgb: var(--indigo-700)
}

:root {
  --base: #090909;
  --base-inverted: rgb(var(--white));
  --base-100: var(--base);
  --base-90: #242424;
  --base-80: #3d3d3d;
  --base-70: #575757;
  --base-60: #717171;
  --base-50: #8a8a8a;
  --base-40: #a3a3a3;
  --base-30: #bdbdbd;
  --base-20: #d6d6d7;
  --base-10: #efefef;
  --base-0: #f9f9f9;
  --accent-brand-lighter: rgb(var(--accent-brand-lighter-rgb));
  --accent-brand: rgb(var(--accent-brand-rgb));
  --accent-brand-darker: rgb(var(--accent-brand-darker-rgb));
  --accent-success: rgb(var(--green-600));
  --accent-success-darker: rgb(var(--green-700));
  --accent-success-lighter: rgb(var(--green-500));
  --accent-success-a10: rgba(var(--green-600), 0.1);
  --accent-warning: rgb(var(--yellow-500));
  --accent-warning-darker: rgb(var(--yellow-600));
  --accent-warning-lighter: rgb(var(--yellow-400));
  --accent-warning-a10: rgba(var(--yellow-500), 0.1);
  --accent-danger: rgb(var(--red-600));
  --accent-danger-darker: rgb(var(--red-700));
  --accent-danger-lighter: rgb(var(--red-500));
  --accent-danger-a10: rgba(var(--red-600), 0.1);
  --body-bg: rgb(var(--grey-100));
  --body-color: rgb(var(--grey-900));
  --body-color-inverted: rgb(var(--white));
  --card-bg: rgb(var(--white));
  --card-color: rgb(var(--grey-900));
  --card-color-secondary: rgb(var(--grey-700));
  --card-color-tertiary: rgb(var(--grey-600));
  --card-secondary-bg: rgb(var(--grey-50));
  --card-tertiary-bg: rgb(var(--grey-100));
  --card-tertiary-bg-hover: rgba(var(--grey-200), 0.55);
  --card-secondary-color: rgb(var(--grey-700));
  --card-border: rgba(var(--grey-900), 0.1);
  --card-secondary-border: rgba(var(--grey-900), 0.033);
  --header-bg: rgb(var(--white));
  --header-shadow: rgba(var(--black), 0.066);
  --footer-bg: rgb(var(--grey-200));
  --footer-color: rgb(var(--grey-700));
  --link-bg-hover-alt: var(--base-inverted);
  --link-color-current: var(--base-100);
  --link-color-secondary: var(--base-60);
  --link-color-secondary-hover: var(--base-70);
  --link-bg-current: var(--base-inverted);
  --button-primary-bg: var(--accent-brand);
  --button-primary-bg-hover: var(--accent-brand-darker);
  --button-primary-color: var(--base-0);
  --button-primary-color-hover: var(--base-0);
  --button-primary-inverted-bg: var(--accent-brand);
  --button-primary-inverted-bg-hover: var(--accent-brand-darker);
  --button-primary-inverted-color: var(--base-0);
  --button-primary-inverted-color-hover: var(--base-0);
  --button-secondary-bg: var(--base-10);
  --button-secondary-bg-hover: var(--base-30);
  --button-secondary-color: var(--base-80);
  --button-secondary-color-hover: var(--base-100);
  --button-outlined-bg: transparent;
  --button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
  --button-outlined-border: var(--base-20);
  --button-outlined-border-hover: var(--base-40);
  --button-outlined-color: var(--base-80);
  --button-outlined-color-hover: var(--base-100);
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
  --button-ghost-color: var(--base-80);
  --button-ghost-color-hover: var(--base-100);
  --button-ghost-dimmed-color: var(--base-60);
  --button-ghost-dimmed-color-hover: var(--base-100);
  --button-ghost-inverted-bg: transparent;
  --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
  --button-ghost-inverted-color: var(--base-30);
  --button-ghost-inverted-color-hover: var(--base-10);
  --button-ghost-dimmed-inverted-color: var(--base-50);
  --button-ghost-dimmed-inverted-color-hover: var(--base-100);
  --form-bg: rgb(var(--white));
  --form-bg-focus: rgb(var(--white));
  --form-border: rgb(var(--grey-200));
  --form-border-hover: rgb(var(--grey-300));
  --form-border-focus: var(--focus);
  --form-placeholder-color: rgb(var(--grey-600));
  --label-primary: rgb(var(--grey-900));
  --label-secondary: rgb(var(--grey-600));
  --snackbar-bg: rgb(var(--grey-900));
  --snackbar-color: rgb(var(--white));
  --tab-color: rgb(var(--grey-700));
  --tab-color-hover: var(--accent-brand);
  --tab-color-current: rgb(var(--grey-900));
  --tab-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
  --tab-bg-current: rgb(var(--accent-brand));
  --tag-color: rgb(var(--grey-700));
  --tag-color-hover: rgb(var(--grey-900));
  --tag-bg: rgba(var(--grey-900), 0.05);
  --tag-bg-hover: rgba(var(--grey-900), 0.05);
  --tag-prefix: rgba(var(--grey-900), 0.6);
  --tag-prefix-hover: rgb(var(--grey-900));
  --tag-onboarding-bg: var(--white);
  --tag-onboarding-border: var(--grey-200);
  --story-comments-bg: rgb(var(--grey-50));
  --story-comments-bg-top: rgba(var(--grey-50), 0);
  --story-comments-bg-bottom: rgba(var(--grey-50), 1);
  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
  --close-icon: rgb(var(--grey-400));
  --reaction-like-color: rgb(var(--red-600));
  --reaction-like-bg: rgba(var(--red-600), 0.1);
  --reaction-custom-color: rgb(var(--green-600));
  --reaction-custom-bg: rgb(var(--green-600), 0.1);
  --reaction-save-color: rgb(var(--indigo-600));
  --reaction-save-bg: rgba(var(--indigo-600), 0.1);
  --reaction-comment-color: rgb(var(--yellow-500));
  --reaction-comment-bg: rgba(var(--yellow-500), 0.1);
  --code-inline-bg: rgb(var(--black), 0.1);
  --content-row-hover-bg: rgb(var(--grey-100))
}

:root {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
  --btn-color: rgb(var(--grey-800));
  --btn-color-hover: var(--accent-brand-darker);
  --btn-current-bg: rgb(var(--grey-200));
  --btn-current-color: rgb(var(--grey-900));
  --btn-primary-bg: var(--accent-brand);
  --btn-primary-bg-hover: var(--accent-brand-darker);
  --btn-primary-color: rgb(var(--white));
  --btn-primary-color-hover: rgb(var(--white));
  --btn-secondary-bg: rgba(var(--accent-brand-rgb), 0.1);
  --btn-secondary-bg-hover: var(--accent-brand);
  --btn-secondary-color: var(--accent-brand);
  --btn-secondary-color-hover: rgb(var(--white));
  --btn-destructive-bg: transparent;
  --btn-destructive-bg-hover: rgba(var(--red-600), 0.1);
  --btn-destructive-color: rgb(var(--red-700));
  --btn-destructive-color-hover: rgb(var(--red-800));
  --btn-primary-destructive-bg: rgb(var(--red-600));
  --btn-primary-destructive-bg-hover: rgb(var(--red-700));
  --btn-primary-destructive-color: rgb(var(--white));
  --btn-primary-destructive-color-hover: rgb(var(--white));
  --link-bg: transparent;
  --link-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
  --link-color: rgb(var(--grey-700));
  --link-color-hover: var(--accent-brand-darker);
  --link-current-bg: rgb(var(--grey-200));
  --link-current-color: rgb(var(--grey-900));
  --link-branded-bg: transparent;
  --link-branded-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
  --link-branded-color: var(--accent-brand);
  --link-branded-color-hover: var(--accent-brand-darker);
  --cta-bg: transparent;
  --cta-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
  --cta-color: rgb(var(--grey-800));
  --cta-color-hover: var(--accent-brand-darker);
  --cta-border: rgb(var(--grey-600));
  --cta-border-hover: var(--accent-brand-darker);
  --cta-branded-bg: transparent;
  --cta-branded-bg-hover: var(--accent-brand);
  --cta-branded-color: var(--accent-brand);
  --cta-branded-color-hover: rgb(var(--white));
  --cta-branded-border: var(--accent-brand);
  --cta-branded-border-hover: var(--accent-brand-darker);
  --tooltip-bg: rgba(var(--grey-900), 0.9);
  --tooltip-color: rgb(var(--white));
  --indicator-bg: rgb(var(--grey-300));
  --indicator-color: rgb(var(--grey-700));
  --indicator-subtle-bg: rgb(var(--grey-200));
  --indicator-subtle-color: rgb(var(--grey-600));
  --indicator-success-bg: rgb(var(--green-400));
  --indicator-success-color: rgb(var(--green-900));
  --indicator-warning-bg: rgb(var(--yellow-300));
  --indicator-warning-color: rgb(var(--yellow-900));
  --indicator-danger-bg: rgb(var(--red-600));
  --indicator-danger-color: rgb(var(--white));
  --indicator-info-bg: var(--accent-brand);
  --indicator-info-color: rgb(var(--white));
  --list-item-bg-hover: rgb(var(--grey-50));
  --checkbox-default-bg: rgb(var(--grey-50));
  --modal-bg: rgb(var(--white));
  --modal-backdrop: rgba(var(--black), 0.6);
  --modal-danger-border-color: rgb(var(--red-500));
  --color-primary: rgb(var(--grey-900));
  --color-secondary: rgb(var(--grey-500));
  --pill-bg: transparent;
  --pill-bg-hover: rgb(var(--grey-50));
  --pill-color: rgb(var(--grey-800));
  --pill-color-hover: rgb(var(--grey-900));
  --pill-border: rgb(var(--grey-200));
  --pill-border-hover: rgb(var(--grey-600));
  --swatch-border-color: rgb(var(--black), 0.2);
  --toggle-rail-bg: rgb(var(--grey-200));
  --toggle-rail-checked-bg: rgb(var(--green-500));
  --toggle-knob-bg: rgb(var(--white));
  --date-border-color: var(--base-10);
  --hover-date-border-color: var(--accent-brand);
  --selected-date-bg: var(--accent-brand);
  --selected-range-bg: rgb(var(--indigo-50));
  --selected-date-border: rgb(var(--indigo-100));
  --selected-date-color: var(--base-0);
  --selected-range-color: var(--body-color);
  --current-date-color: var(--accent-brand);
  --banner-bg: rgb(var(--grey-800));
  --banner-color: var(--white);
  --banner-accent: var(--accent-brand);
  --tag-item-bg-hover: rgb(var(--indigo-50));
  --subtract-color: rgb(var(--red-600));
  --subtract-color-hover: rgb(var(--white));
  --subtract-bg: rgba(var(--red-600), 0.2);
  --subtract-bg-hover: rgba(var(--red-600));
  --plus-color: rgb(var(--green-800));
  --plus-color-hover: rgb(var(--white));
  --plus-bg: rgb(var(--green-100));
  --plus-bg-hover: rgb(var(--green-600));
  --tag-hash: rgb(var(--grey-500));
  --tag-name: rgb(var(--grey-800));
  --add-tag-hash: rgb(var(--grey-700));
  --focus: var(--accent-brand);
  --divider: rgb(var(--grey-200));
  --shadow-1: 0 10px 15px -3px rgba(var(--black), 0.1),
    0 4px 6px -2px rgba(var(--black), 0.05), 0 0 0 1px rgba(var(--black), 0.1);
  --shadow-2: 0 20px 25px -5px rgba(var(--black), 0.1),
    0 10px 10px -5px rgba(var(--black), 0.05), 0 0 0 1px rgba(var(--black), 0.1);
  --shadow-smooth: 0px 8px 16px rgba(0, 0, 0, 0.05)
}

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

ul[class],
ol[class] {
  padding: 0
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd,
pre {
  margin: 0
}

body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5
}

main {
  display: block
}

ul[class],
ol[class] {
  list-style: none
}

pre,
code,
kbd,
samp {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace);
  font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.5;
  margin: 0
}

textarea,
input:not([type='hidden']),
button {
  outline: 0
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  cursor: pointer
}

fieldset {
  margin: 0;
  padding: 0;
  border: none
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText
}

b,
strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.001s !important
  }
}

body {
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif);
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  min-height: 100vh
}

body.hidden-shell {
  padding-top: 0 !important
}

body.hidden-shell .crayons-header,
body.hidden-shell .crayons-footer {
  display: none
}

body.hidden-shell .hidden-shell-innerhidden {
  display: none
}

body.user-tags-followed-0 #sidebar-nav-followed-tags,
body.user-tags-followed-1 #sidebar-nav-followed-tags,
body.user-tags-followed-2 #sidebar-nav-followed-tags {
  height: 90px
}

body.user-tags-followed-3 #sidebar-nav-followed-tags,
body.user-tags-followed-4 #sidebar-nav-followed-tags,
body.user-tags-followed-5 #sidebar-nav-followed-tags {
  height: 205px
}

body.user-tags-followed-max #sidebar-nav-followed-tags {
  height: 42vh
}

body.default-header {
  padding-top: 56px;
  padding-top: var(--header-height);
  min-height: calc(100vh - 56px);
  min-height: calc(100vh - var(--header-height))
}

body #main-content {
  scroll-margin-top: 56px;
  scroll-margin-top: var(--header-height)
}

.wrapper {
  flex: 1 1 auto;
  visibility: visible;
  font-size: 18px
}

a {
  color: rgb(79, 70, 229);
  color: var(--link-branded-color);
  text-decoration: none
}

.site-logo {
  max-width: 125px;
  max-width: var(--max-width, 125px);
  font-size: 1rem;
  font-size: var(--font-size, var(--fs-base));
  font-weight: 500;
  font-weight: var(--font-weight, var(--fw-medium));
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
  align-items: center;
  vertical-align: middle;
  color: #090909;
  color: var(--base-100);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
  outline: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere
}

.site-logo__img,
.site-logo svg {
  max-width: 100%;
  width: auto;
  height: calc(56px - 0.5rem * 2);
  height: calc(var(--header-height) - var(--su-2) * 2);
  -o-object-fit: contain;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  outline: 0
}

@media (min-width: 640px) {
  .site-logo {
    --max-width: 150px
  }
}

@media (min-width: 768px) {
  .site-logo {
    --max-width: 175px;
    --font-size: var(--fs-l);
    --font-weight: var(--fw-bold)
  }
}

@media (min-width: 1024px) {
  .site-logo {
    --max-width: 200px;
    --font-size: var(--fs-xl)
  }
}

.site-logo:hover,
.js-focus-visible .site-logo.focus-visible:focus {
  color: #3d3d3d;
  color: var(--base-80);
  text-decoration: underline
}

.js-focus-visible .site-logo.focus-visible:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring)
}

.truncate-at-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.truncate-at-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

.branded-2 {
  border-top: 0.5rem solid rgb(79, 70, 229);
  border-top: var(--su-2) solid var(--accent-brand)
}

.branded-3 {
  border-top: 0.75rem solid rgb(79, 70, 229);
  border-top: var(--su-3) solid var(--accent-brand)
}

.branded-4 {
  border-top: 1rem solid rgb(79, 70, 229);
  border-top: var(--su-4) solid var(--accent-brand)
}

.branded-5 {
  border-top: 1.25rem solid rgb(79, 70, 229);
  border-top: var(--su-5) solid var(--accent-brand)
}

.branded-6 {
  border-top: 1.5rem solid rgb(79, 70, 229);
  border-top: var(--su-6) solid var(--accent-brand)
}

.branded-7 {
  border-top: 2rem solid rgb(79, 70, 229);
  border-top: var(--su-7) solid var(--accent-brand)
}

.top-margin-4 {
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.screen-reader-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden
}

@media print {
  .print-hidden {
    display: none
  }
}

.crayons-icon {
  vertical-align: bottom;
  -moz-transform: rotate(360deg)
}

.crayons-icon:not(.crayons-icon--default),
.crayons-icon:not(.crayons-icon--default) * {
  fill: currentColor
}

:root {
  --layout-sidebar-left-display: block;
  --layout-sidebar-right-display: block;
  --layout-sidebar-left-width: 100%;
  --layout-sidebar-right-width: 100%;
  --layout-sidebar-left-row-end: initial;
  --layout-content-width: 100%;
  --layout-drawer-width: 300px;
  --layout-gap: var(--su-2);
  --layout-padding: 0;
  --layout: 100%
}

@media (min-width: 768px) {
  :root {
    --layout-sidebar-left-width: 2fr;
    --layout-padding: var(--su-2);
    --layout: var(--layout-content-width)
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-sidebar-left-width: 240px;
    --layout-content-width: 1fr;
    --layout-gap: var(--su-4);
    --layout-padding: var(--su-4)
  }
}

.crayons-layout {
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  max-width: 1380px;
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  gap: 0.5rem;
  grid-gap: 0.5rem;
  grid-gap: var(--layout-gap);
  gap: var(--layout-gap);
  grid-template-columns: 100%;
  grid-template-columns: var(--layout);
  padding: 0;
  padding: var(--layout-padding)
}

.crayons-layout__sidebar-left {
  display: block;
  display: var(--layout-sidebar-left-display);
  grid-row-end: initial;
  grid-row-end: var(--layout-sidebar-left-row-end);
  width: 100%;
  width: var(--layout-sidebar-left-width)
}

.crayons-layout__sidebar-right {
  display: block;
  display: var(--layout-sidebar-right-display);
  width: 100%;
  width: var(--layout-sidebar-right-width)
}

.crayons-layout__content {
  min-width: 0
}

.crayons-layout__content__inner {
  margin: 0 auto;
  width: 100%
}

.crayons-layout--limited-xl {
  --site-width: 1280px
}

.crayons-layout--limited-l {
  --site-width: 1024px
}

.crayons-layout--limited-m {
  --site-width: 768px
}

.crayons-layout--limited-s {
  --site-width: 640px
}

.crayons-layout--limited-xs {
  --site-width: 480px
}

.crayons-layout--limited-inner-l .crayons-layout__content__inner {
  max-width: 1024px
}

.crayons-layout--limited-inner-m .crayons-layout__content__inner {
  max-width: 768px
}

.crayons-layout--limited-inner-s .crayons-layout__content__inner {
  max-width: 640px
}

@media (min-width: 768px) {
  .crayons-layout--2-cols {
    --layout: var(--layout-sidebar-left-width) var(--layout-content-width);
    --layout-content-width: 5fr
  }
}

@media (min-width: 1024px) {
  .crayons-layout--2-cols {
    --layout-sidebar-left-width: 240px;
    --layout-content-width: 1fr;
    --layout-gap: var(--su-4)
  }
}

.crayons-layout--2-cols.crayons-layout--limited-inner .crayons-layout__content__inner {
  max-width: 768px;
  margin: 0 auto;
  width: 100%
}

.crayons-layout--2-cols--inverted .crayons-layout__sidebar-right {
  order: -1
}

@media (min-width: 768px) {
  .crayons-layout--2-cols--inverted {
    --layout: var(--layout-content-width) var(--layout-sidebar-left-width)
  }

  .crayons-layout--2-cols--inverted .crayons-layout__sidebar-right {
    order: 1
  }
}

@media (min-width: 1024px) {
  .crayons-layout--2-cols--1-2 {
    --layout-sidebar-left-width: 1fr;
    --layout-content-width: 2fr
  }
}

@media (min-width: 768px) {
  .crayons-layout--3-cols {
    --layout: var(--layout-sidebar-left-width) var(--layout-content-width);
    --layout-sidebar-left-row-end: span 2;
    --layout-sidebar-left-width: 2fr;
    --layout-sidebar-right-width: 5fr;
    --layout-content-width: 5fr
  }
}

@media (min-width: 1024px) {
  .crayons-layout--3-cols {
    --layout-sidebar-left-width: 240px;
    --layout-sidebar-right-width: 1fr;
    --layout-sidebar-left-row-end: initial;
    --layout-content-width: 2fr;
    --layout: var(--layout-sidebar-left-width) var(--layout-content-width) var(--layout-sidebar-right-width)
  }
}

.crayons-layout--3-cols--drop-right-left {
  --layout-sidebar-left-display: none;
  --layout-sidebar-right-display: none;
  --layout-sidebar-left-width: var(--layout-drawer-width);
  --layout-sidebar-right-width: var(--layout-drawer-width)
}

@media (min-width: 768px) {
  .crayons-layout--3-cols--drop-right-left {
    --layout-sidebar-left-width: 2fr;
    --layout-sidebar-left-row-end: initial;
    --layout-sidebar-left-display: block
  }
}

@media (min-width: 1024px) {
  .crayons-layout--3-cols--drop-right-left {
    --layout-sidebar-right-display: block;
    --layout-sidebar-right-width: 1fr;
    --layout-sidebar-left-width: 240px
  }
}

.crayons-layout--article {
  --layout-gap: 0
}

@media (min-width: 768px) {
  .crayons-layout--article {
    --layout-gap: var(--su-2);
    --layout-sidebar-left-width: var(--su-9);
    --layout: var(--layout-sidebar-left-width) 1fr;
    --layout-sidebar-left-row-end: span 2
  }
}

@media (min-width: 1024px) {
  .crayons-layout--article {
    --layout-gap: var(--su-4);
    --layout-sidebar-right-width: 3fr;
    --layout-sidebar-left-row-end: initial;
    --layout-content-width: 7fr;
    --layout: var(--layout-sidebar-left-width) var(--layout-content-width) var(--layout-sidebar-right-width)
  }
}

@media (min-width: 1024px) {
  .crayons-layout--admin-2-cols {
    --layout: var(--layout-sidebar-left-width) var(--layout-content-width);
    --layout-sidebar-left-width: 240px;
    --layout-content-width: 1fr;
    --layout-gap: var(--su-4)
  }
}

.crayons-layout__sidebar-left .sidebar-bg,
.crayons-layout__sidebar-right .sidebar-bg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  animation: fade-in var(--transition-props);
  display: none
}

.crayons-layout__sidebar-left.swiped-in,
.crayons-layout__sidebar-right.swiped-in {
  z-index: 200;
  z-index: var(--z-drawer);
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  -webkit-overflow-scrolling: touch
}

.crayons-layout__sidebar-left.swiped-in .sidebar-bg,
.crayons-layout__sidebar-right.swiped-in .sidebar-bg {
  display: block
}

.crayons-layout__sidebar-left.swiped-in .side-bar,
.crayons-layout__sidebar-right.swiped-in .side-bar {
  position: relative;
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  padding: 16px;
  align-content: start;
  height: 100%;
  overflow-y: auto
}

.crayons-layout__sidebar-left.swiped-in {
  left: 0
}

.crayons-layout__sidebar-right.swiped-in {
  right: 0
}

.zen-mode {
  --site-width: 1024px;
  --header-height: 0
}

.zen-mode .crayons-layout--3-cols {
  --layout: var(--layout-sidebar-left-width) 1fr
}

@media (min-width: 768px) {
  .zen-mode .crayons-layout--3-cols {
    --layout: var(--layout-sidebar-left-width) 1fr
  }
}

.zen-mode .crayons-header,
.zen-mode .crayons-footer,
.zen-mode .crayons-article-sticky,
.zen-mode .crayons-layout__sidebar-right {
  display: none
}

:root {
  --content-padding-x: var(--su-3);
  --content-padding-y: var(--su-3)
}

@media (min-width: 640px) {
  :root {
    --content-padding-x: var(--su-5);
    --content-padding-y: var(--su-5)
  }
}

@media (min-width: 768px) {
  :root {
    --content-padding-x: var(--su-8);
    --content-padding-y: var(--su-7)
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding-x: var(--su-9)
  }
}

.text-padding {
  padding: 0.75rem 0.75rem;
  padding: var(--content-padding-y) var(--content-padding-x)
}

.crayons-page-header {
  --layout-padding: var(--su-3);
  padding: 0;
  padding: var(--layout-padding);
  max-width: 1380px;
  max-width: var(--site-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media (min-width: 1024px) {
  .crayons-page-header {
    --layout-padding: var(--su-4)
  }
}

@media (min-width: 768px) {
  .crayons-page-header {
    min-height: 0;
    min-height: initial
  }
}

.crayons-layout--header-inside {
  --header-span: 1 / span 1;
  grid-template-rows: min-content 1fr;
  row-gap: 0
}

.crayons-layout--header-inside.crayons-layout--2-cols {
  --header-span: 1 / span 2
}

@media (min-width: 768px) {
  .crayons-layout--header-inside {
    row-gap: 0.5rem;
    row-gap: var(--layout-gap)
  }

  .crayons-layout--header-inside .crayons-page-header {
    --layout-padding: 0;
    grid-column: var(--header-span)
  }
}

@media (min-width: 768px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-side-nav {
    display: block
  }
}

@media (min-width: 768px) {

  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-layout,
  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-header__container {
    max-width: calc(1380px - 50px);
    max-width: calc(var(--site-width) - 50px);
    width: calc(100% - 50px);
    margin-left: 50px
  }
}

@media (min-width: 1024px) {

  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-layout.crayons-layout--limited-l,
  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-header__container.crayons-layout--limited-l {
    margin-left: auto
  }
}

@media (min-width: 1460px) {

  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-layout,
  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-header__container {
    max-width: 1380px;
    max-width: var(--site-width);
    width: 100%;
    margin-left: auto;
    transform: translateX(20px)
  }
}

@media (min-width: 768px) {
  body[data-side-nav-visible='true']:not(.hidden-shell) .crayons-layout--full {
    max-width: calc(2000px - 100px);
    width: calc(100% - 100px);
    margin-left: 50px
  }
}

.crayons-side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 100vh;
  background-color: #f9f9f9;
  background-color: var(--base-0);
  border-right: 1px solid #efefef;
  border-right: 1px solid var(--base-10);
  z-index: 1000;
  display: none;
  overflow: visible
}

.crayons-side-nav .crayons-side-nav__scrollable {
  height: calc(100vh - 82px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent
}

.crayons-side-nav .crayons-side-nav__scrollable::-webkit-scrollbar {
  width: 4px
}

.crayons-side-nav .crayons-side-nav__scrollable::-webkit-scrollbar-track {
  background: transparent
}

.crayons-side-nav .crayons-side-nav__scrollable::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease
}

.crayons-side-nav .crayons-side-nav__scrollable::-webkit-scrollbar-thumb:hover {
  background: #8a8a8a;
  background: var(--base-50)
}

.crayons-side-nav .crayons-side-nav__scrollable:hover::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  background: var(--base-30)
}

.crayons-side-nav .crayons-side-nav__scrollable:hover {
  scrollbar-color: #bdbdbd transparent;
  scrollbar-color: var(--base-30) transparent
}

.crayons-side-nav img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  border: 1px solid #bdbdbd;
  border: 1px solid var(--base-30)
}

.crayons-side-nav a.crayons-side-nav-link {
  display: block;
  padding: 5px 4px;
  text-align: center;
  line-height: 0;
  overflow: visible
}

.crayons-side-nav a.crayons-side-nav-link:first-child {
  padding-top: 7px;
  padding-bottom: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.066);
  box-shadow: 0 1px 1px var(--header-shadow)
}

.crayons-side-nav a.crayons-side-nav-link:hover {
  background-color: #efefef;
  background-color: var(--base-10)
}

.crayons-side-nav a.crayons-side-nav-link.active {
  background-color: #d6d6d7;
  background-color: var(--base-20)
}

.crayons-side-nav .crayons-side-nav__item {
  position: relative;
  overflow: visible;
  z-index: 1001
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content {
  overflow: hidden
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list {
  top: 0px !important;
  height: calc(100vh - 10px);
  padding: 0;
  overflow-y: auto
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-card__header {
  padding: 0.25rem 1rem;
  padding: var(--su-1) var(--su-4)
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-link {
  line-height: 1.3em
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-link:hover {
  background-color: #efefef;
  background-color: var(--base-10)
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-link .crayons-side-nav__item-icon {
  height: 30px;
  width: 30px;
  margin-right: 8px
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-link .crayons-side-nav__item-cover {
  border-radius: 2px;
  border: 0
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content--list .crayons-side-nav__item-text {
  font-weight: 600
}

.crayons-side-nav .crayons-side-nav__item .profile-preview-card__content .crayons-side-nav__item-cover--main {
  border-radius: 0px;
  width: calc(100% + 32px);
  max-width: calc(100% + 32px);
  margin-left: -16px
}

.crayons-side-nav .crayons-side-nav__item.hovered {
  z-index: 2000
}

.crayons-side-nav .crayons-side-nav__item.hovered .profile-preview-card__content {
  display: block;
  border-top: 0px
}

.crayons-side-nav .crayons-side-nav__item.hovered .profile-preview-card__content h3 a {
  color: #090909;
  color: var(--base-100)
}

.profile-preview-card {
  display: none !important;
}

.crayons-side-nav .crayons-side-nav__item.not-hovered .profile-preview-card__content {
  display: none
}

.crayons-side-nav .crayons-side-nav__item--add {
  position: absolute;
  bottom: 41px;
  left: 0;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid #d6d6d7;
  border-top: 1px solid var(--base-20);
  z-index: 2000;
  background-color: #f9f9f9;
  background-color: var(--base-0);
  cursor: pointer
}

.crayons-side-nav .crayons-side-nav__item--add svg {
  margin: 0 auto;
  display: block
}

.crayons-side-nav .crayons-side-nav__item--menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid #d6d6d7;
  border-top: 1px solid var(--base-20);
  z-index: 2000;
  background-color: #f9f9f9;
  background-color: var(--base-0);
  cursor: pointer
}

.crayons-side-nav .crayons-side-nav__item--menu svg {
  width: 100%
}

:root {
  --content-font-size: var(--fs-l);
  --content-secondary-font-size: var(--fs-base);
  --content-tertiary-font-size: var(--fs-base);
  --content-rhythm: var(--content-font-size)
}

@media (min-width: 640px) {
  :root {
    --content-secondary-font-size: var(--fs-l)
  }
}

@media (min-width: 1024px) {
  :root {
    --content-font-size: var(--fs-xl)
  }
}

@font-face {
  font-family: OpenDyslexic;
  src: url(https://assets.dev.to/assets/OpenDyslexic-Regular-cf8f24aa1c9b34b36bb160bb1e3eb6f6e6ab6ec3b43ba558afee2c1c202753ca.otf);
  font-style: normal;
  font-weight: normal
}

@font-face {
  font-family: OpenDyslexic;
  src: url(https://assets.dev.to/assets/OpenDyslexic-Italic-a0d01c7b68a6810c67b508652755bd9501fd3c3485cf27d2c146c9a81735492e.otf);
  font-style: italic;
  font-weight: normal
}

@font-face {
  font-family: OpenDyslexic;
  src: url(https://assets.dev.to/assets/OpenDyslexic-Bold-95e5bcb6dbd797f211910ef6d1349fb1cda975b3f104485636bd0a2937a84441.otf);
  font-weight: bold;
  font-style: normal
}

@font-face {
  font-family: OpenDyslexic;
  src: url(https://assets.dev.to/assets/OpenDyslexic-BoldItalic-84473e23f113c4fbc1c60fbef3e145d48a6167876347bb0692e2cc60babea570.otf);
  font-weight: bold;
  font-style: italic
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body.serif-article-body {
  --content-font-family: var(--ff-serif)
}

body.sans-serif-article-body {
  --content-font-family: var(--ff-sans-serif)
}

body.comic-sans-article-body {
  --content-font-family: var(--ff-comic)
}

body.monospace-article-body {
  --content-font-family: var(--ff-monospace)
}

body.open-dyslexic-article-body {
  --content-font-family: var(--ff-dyslexic)
}

.text-styles {
  font-size: 1.125rem;
  font-size: var(--content-font-size);
  font-family: var(--content-font-family);
  overflow-wrap: break-word
}

.text-styles--billboard h1,
.text-styles--billboard h2,
.text-styles--billboard h3,
.text-styles--billboard h4,
.text-styles--billboard h5,
.text-styles--billboard h6,
.text-styles--billboard img,
.text-styles--billboard p {
  margin-top: 0 !important
}

.text-styles--secondary {
  font-size: 1rem;
  font-size: var(--content-secondary-font-size)
}

.text-styles--tertiary {
  font-size: 1rem;
  font-size: var(--content-tertiary-font-size)
}

.text-styles>:last-child {
  margin-bottom: 0
}

.text-styles a:not(.crayons-btn):not(input[type='file']::file-selector-button) {
  text-decoration: underline;
  color: rgb(79, 70, 229);
  color: var(--link-branded-color)
}

.text-styles a:not(.crayons-btn):not(input[type='file']::file-selector-button):hover {
  color: rgb(67, 56, 202);
  color: var(--link-branded-color-hover)
}

.text-styles [class*='ltag'] {
  font-size: medium;
  font-size: initial;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif)
}

.text-styles [class*='ltag'] a {
  text-decoration: none;
  color: inherit
}

.text-styles [class*='ltag'] a:hover {
  color: var(--color-hover)
}

.text-styles [class*='ltag'] img {
  max-width: 100%;
  margin: 0
}

.text-styles [class*='ltag'] .text-styles a:not(.crayons-btn):not(input[type='file']::file-selector-button) {
  text-decoration: underline;
  color: rgb(79, 70, 229);
  color: var(--link-branded-color)
}

.text-styles [class*='ltag'] .text-styles a:not(.crayons-btn):not(input[type='file']::file-selector-button):hover {
  color: rgb(67, 56, 202);
  color: var(--link-branded-color-hover)
}

.text-styles a[class*='ltag'] {
  text-decoration: none
}

.text-styles a[class*='ltag']:hover {
  color: var(--color-hover)
}

.text-styles .ltag__link--embedded,
.text-styles .ltag-org-posts {
  font-size: 1rem;
  font-size: var(--fs-base);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif)
}

.text-styles .ltag__link--embedded a,
.text-styles .ltag-org-posts a {
  text-decoration: none;
  color: inherit
}

.text-styles .ltag__link--embedded a:hover,
.text-styles .ltag-org-posts a:hover {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.text-styles .ltag__link--embedded img,
.text-styles .ltag-org-posts img {
  max-width: 100%;
  margin: 0
}

.text-styles .ltag__link--embedded p,
.text-styles .ltag-org-posts p {
  margin: 0
}

.text-styles .ltag__link--embedded .crayons-avatar__image,
.text-styles .ltag__link--embedded .crayons-logo__image,
.text-styles .ltag-org-posts .crayons-avatar__image,
.text-styles .ltag-org-posts .crayons-logo__image {
  height: 100%;
  display: inline-block
}

.text-styles .ltag__link--embedded .crayons-avatar__image,
.text-styles .ltag-org-posts .crayons-avatar__image {
  border-radius: 100%
}

.text-styles .ltag__link--embedded .crayons-logo__image,
.text-styles .ltag-org-posts .crayons-logo__image {
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.text-styles .ltag__link--embedded img.subscription-icon,
.text-styles .ltag-org-posts img.subscription-icon {
  max-height: 13px;
  max-width: 21px;
  display: inline-block;
  border-radius: 0
}

.text-styles .ltag__link--embedded h1,
.text-styles .ltag__link--embedded h2,
.text-styles .ltag__link--embedded h3,
.text-styles .ltag__link--embedded h4,
.text-styles .ltag__link--embedded h5,
.text-styles .ltag__link--embedded h6,
.text-styles .ltag-org-posts h1,
.text-styles .ltag-org-posts h2,
.text-styles .ltag-org-posts h3,
.text-styles .ltag-org-posts h4,
.text-styles .ltag-org-posts h5,
.text-styles .ltag-org-posts h6 {
  margin: 0
}

.text-styles .ltag__link--embedded .crayons-story__author-pic,
.text-styles .ltag-org-posts .crayons-story__author-pic {
  margin-right: 0.75rem;
  margin-right: var(--su-3)
}

.text-styles .ltag__link--embedded .crayons-story__indention,
.text-styles .ltag-org-posts .crayons-story__indention {
  padding-left: 0 !important
}

.text-styles .ltag__link--embedded {
  margin: 1rem 0;
  margin: var(--su-4) 0
}

.text-styles .ltag__link--embedded .crayons-story {
  margin: 0
}

.text-styles h1,
.text-styles h2,
.text-styles h3,
.text-styles h4,
.text-styles h5,
.text-styles h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif);
  margin: calc(1.125rem / 2) 0;
  margin: calc(var(--content-rhythm) / 2) 0;
  padding: 0;
  font-weight: 700;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  line-height: var(--lh-tight)
}

.text-styles h1 {
  font-size: 1.75em
}

.text-styles h2 {
  font-size: 1.5em
}

.text-styles h3 {
  font-size: 1.25em
}

.text-styles h4 {
  font-size: 1em
}

.text-styles h5 {
  font-size: 0.875em
}

.text-styles h6 {
  font-size: 0.85em;
  color: #717171;
  color: var(--base-60)
}

.text-styles hr {
  width: 25%;
  opacity: 0.1;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border: 1px solid rgb(23, 23, 23);
  border: 1px solid var(--body-color);
  margin: calc(1.125rem * 2) auto;
  margin: calc(var(--content-rhythm) * 2) auto
}

.text-styles p {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles dl {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles dl dt,
.text-styles dl dd {
  display: block
}

.text-styles dl dt {
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.text-styles dl dd {
  margin-inline-start: 2rem;
  margin-inline-start: var(--su-7)
}

.text-styles ul,
.text-styles ol {
  padding-left: 1.5rem;
  padding-left: var(--su-6);
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles ul br,
.text-styles ol br {
  line-height: 0;
  margin: 0;
  padding: 0
}

.text-styles ul {
  list-style-type: disc
}

.text-styles ul p {
  margin: 0;
  padding: 0
}

.text-styles ul ul {
  margin: 0 0 0 1.125rem;
  margin: 0 0 0 var(--content-rhythm);
  list-style-type: square
}

.text-styles ul ul ul {
  list-style-type: circle
}

.text-styles ul ul ul ul {
  list-style-type: disc
}

.text-styles ul ul ul ul ul {
  list-style-type: square
}

.text-styles figure {
  margin: 0
}

.text-styles figcaption {
  font-style: italic;
  text-align: center;
  font-size: 0.8em;
  color: rgb(23, 23, 23);
  color: var(--body-color);
  opacity: 0.75;
  display: block
}

.text-styles p+figcaption {
  margin-top: -0.8em
}

.text-styles blockquote {
  border-left: 4px solid #d6d6d7;
  border-left: 4px solid var(--base-20);
  padding: 0 0 0 1.125rem;
  padding: 0 0 0 var(--content-rhythm);
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles blockquote.twitter-tweet {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif);
  background: rgb(255, 255, 255);
  background: var(--body-color-inverted);
  max-width: 550px;
  border: 1px solid #cfd9de;
  font-size: 0.75em;
  line-height: 1.35em;
  border-radius: 12px;
  margin: 1.6em auto;
  padding: 60px 250px 18px 10px;
  padding: 33px 15px 8px
}

@media screen and (min-width: 640px) {
  .text-styles blockquote.twitter-tweet {
    padding: 60px 22px 18px;
    min-height: 105px
  }
}

.text-styles .tweet-embed {
  display: block;
  margin: 1.125rem auto !important;
  margin: var(--content-rhythm) auto !important;
  width: 550px;
  max-width: 100%;
  min-height: 350px;
  border-radius: 13px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(23, 23, 23, 0.1);
  box-shadow: var(--shadow-smooth), inset 0px 0px 0px 1px var(--card-border);
  overflow: hidden
}

.text-styles kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5
}

.text-styles pre:not(.highlight),
.text-styles div:not(.highlight)>pre.highlight,
.text-styles div.highlight {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles img,
.text-styles video,
.text-styles .ff-container {
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
  margin: 1.125rem auto;
  margin: var(--content-rhythm) auto;
  max-width: 100%;
  max-height: calc(50vh + 180px);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.text-styles .article-body-image-wrapper {
  cursor: zoom-in
}

.text-styles iframe {
  width: 100%;
  border: 0;
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.text-styles .fluidvids {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles .fluidvids iframe {
  margin: 0
}

.text-styles .table-wrapper-paragraph {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.text-styles .table-wrapper-paragraph table {
  margin: 0
}

.text-styles table {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0;
  border-collapse: collapse;
  border-spacing: 0
}

.text-styles table th,
.text-styles table td {
  padding: 0.5rem;
  padding: var(--su-2);
  border: 1px solid #d6d6d7;
  border: 1px solid var(--base-20)
}

.text-styles table th {
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  text-align: left
}

.text-styles .twitter-tweet {
  margin: 0 auto
}

.text-styles .c-embed {
  margin: 0 0 1.125rem 0;
  margin: 0 0 var(--content-rhythm) 0
}

.c-embed {
  padding: 0.75rem;
  padding: var(--su-3);
  border: 1px solid rgb(229, 229, 229);
  border: 1px solid var(--form-border);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-smooth) !important
}

@media screen and (min-width: 640px) {
  .c-embed {
    padding: 1.25rem;
    padding: var(--su-5)
  }
}

.c-embed__content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  gap: var(--su-4)
}

.c-embed__cover {
  margin-bottom: 1rem;
  margin-bottom: var(--su-4);
  flex-shrink: 0
}

.c-embed__content .c-embed__cover {
  margin-bottom: 0;
  width: 80px;
  height: 80px;
  text-align: center
}

.c-embed__content .c-embed__cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-embed__body {
  flex: 1 1;
  min-width: 0
}

.c-embed h2,
.c-embed p {
  margin: 0;
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2)
}

.c-embed__favicon {
  display: none !important
}

.crayons-btn,
input[type='file']::file-selector-button {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
input[type='file']::file-selector-button {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.5rem;
  line-height: var(--su-6);
  font-weight: 500;
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
input[href][type='file']:hover::file-selector-button,
.crayons-btn[href]:focus,
input[href][type='file']:focus::file-selector-button,
.crayons-btn:hover:enabled,
input[type='file']:hover:enabled::file-selector-button,
.crayons-btn:active:enabled,
input[type='file']:active:enabled::file-selector-button {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
input.crayons-btn--inverted[type='file']::file-selector-button {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
input[disabled][type='file']::file-selector-button {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
input[type='file']::file-selector-button>* {
  pointer-events: none
}

.crayons-btn>*+input,
input[type='file']::file-selector-button>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
input[type='file']::file-selector-button {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions input[type='file']::file-selector-button {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group input[type='file']::file-selector-button {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined)::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined)::file-selector-button {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group input[type='file']:first-child::file-selector-button {
  border-top-left-radius: 0.375rem;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group input[type='file']:last-child::file-selector-button {
  border-top-right-radius: 0.375rem;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius)
}

.c-btn,
.c-date-picker .DayPickerNavigation_button,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DateRangePickerInput_calendarIcon {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  padding: var(--su-2) var(--su-4);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.c-date-picker .DayPickerNavigation_button:hover:enabled,
.c-date-picker .DateRangePickerInput_clearDates:hover:enabled,
.c-date-picker .DateRangePickerInput_calendarIcon:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-date-picker .DayPickerNavigation_button[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-expanded='true'],
.c-btn[aria-pressed='true'],
.c-date-picker .DayPickerNavigation_button[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.c-btn[disabled],
.c-date-picker .DayPickerNavigation_button[disabled],
.c-date-picker .DateRangePickerInput_clearDates[disabled],
.c-date-picker .DateRangePickerInput_calendarIcon[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>*,
.c-date-picker .DayPickerNavigation_button>*,
.c-date-picker .DateRangePickerInput_clearDates>*,
.c-date-picker .DateRangePickerInput_calendarIcon>* {
  pointer-events: none
}

.c-btn>*+input,
.c-date-picker .DayPickerNavigation_button>*+input,
.c-date-picker .DateRangePickerInput_clearDates>*+input,
.c-date-picker .DateRangePickerInput_calendarIcon>*+input {
  pointer-events: revert
}

.c-btn,
.c-date-picker .DayPickerNavigation_button,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DateRangePickerInput_calendarIcon {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive,
.c-date-picker .c-btn--destructive.DayPickerNavigation_button,
.c-date-picker .c-btn--destructive.DateRangePickerInput_clearDates,
.c-date-picker .c-btn--destructive.DateRangePickerInput_calendarIcon {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.crayons-select,
.crayons-checkbox,
.crayons-radio,
.crayons-textfield,
.c-date-picker .DateRangePickerInput {
  --border-width: 1.5px;
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-select:hover,
.crayons-checkbox:hover,
.crayons-radio:hover,
.crayons-textfield:hover,
.c-date-picker .DateRangePickerInput:hover {
  border-color: rgb(212, 212, 212);
  border-color: var(--form-border-hover)
}

.c-input--multi__wrapper-border:focus-within,
.c-autocomplete--multi__wrapper-border:focus-within,
.crayons-select:focus,
.crayons-textfield:focus,
.c-date-picker .DateRangePickerInput:focus {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--focus);
  box-shadow: 0 0 0 1px rgb(79, 70, 229);
  box-shadow: 0 0 0 1px var(--focus)
}

.crayons-select--disabled,
.crayons-select[disabled],
.crayons-checkbox--checked--disabled,
.crayons-checkbox--checked[disabled],
.crayons-checkbox:checked--disabled,
.crayons-radio--checked--disabled,
.crayons-radio--checked[disabled],
.crayons-radio:checked--disabled,
.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled],
.crayons-textfield--disabled,
.crayons-textfield[disabled],
.c-date-picker .DateRangePickerInput[disabled] {
  opacity: 0.6
}

.crayons-radio--checked,
.crayons-radio:checked,
.crayons-checkbox--checked,
.crayons-checkbox:checked {
  background-color: rgb(79, 70, 229);
  background-color: var(--form-border-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--form-border-focus);
  color: rgb(255, 255, 255);
  color: var(--form-bg-focus);
  background-position: center center;
  background-repeat: no-repeat
}

.crayons-textfield,
.c-date-picker .DateRangePickerInput {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  resize: vertical
}

.crayons-textfield::-moz-placeholder,
.c-date-picker .DateRangePickerInput::-moz-placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::placeholder,
.c-date-picker .DateRangePickerInput::placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::-ms-clear,
.c-date-picker .DateRangePickerInput::-ms-clear {
  display: none
}

.crayons-textfield::-webkit-date-and-time-value,
.c-date-picker .DateRangePickerInput::-webkit-date-and-time-value {
  min-height: 1.5em
}

.crayons-textfield--icon {
  padding-left: 2rem;
  padding-left: var(--su-7)
}

.crayons-checkbox,
.crayons-radio {
  width: 1.125em;
  height: 1.125em;
  cursor: pointer;
  background-position: center center;
  vertical-align: middle;
  flex-shrink: 0
}

.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled] {
  cursor: not-allowed
}

.crayons-checkbox--checked,
.crayons-checkbox:checked,
.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.157.933a.75.75 0 01.077 1.058L4.817 9.407a.75.75 0 01-1.134 0L.766 6.037a.75.75 0 011.135-.982L4.25 7.77l5.85-6.76a.75.75 0 011.057-.077z' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-radio {
  border-radius: 50%
}

.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-select {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  padding-right: 2rem;
  padding-right: var(--su-7);
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  position: relative;
  outline: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
  background-image: var(--select-icon);
  background-position: calc(100% - 0.5rem) calc(50% - 1px);
  background-position: calc(100% - var(--su-2)) calc(50% - 1px);
  background-repeat: no-repeat
}

.crayons-select::-ms-clear {
  display: none
}

.crayons-select.disabled {
  background-color: #f2f2f2;
  color: #888888;
  pointer-events: none;
  cursor: not-allowed
}

.crayons-field {
  display: flex;
  flex-flow: column;
  font-size: 1rem;
  font-size: var(--fs-base)
}

.crayons-field__label {
  color: rgb(23, 23, 23);
  color: var(--label-primary);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.crayons-field__label+.crayons-field__description {
  margin-top: 0
}

.crayons-field__label.required:after {
  content: '*'
}

.crayons-field__required {
  color: rgb(220, 38, 38);
  color: var(--accent-danger);
  padding: 0 0.25rem;
  padding: 0 var(--su-1);
  display: inline-block
}

.crayons-field__description {
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-weight: 400;
  font-weight: var(--fw-normal);
  margin: 0
}

.crayons-field__addon {
  display: flex;
  align-items: center;
  padding: calc(0.5em - var(--border-width)) 0.5em;
  background-color: rgb(246, 246, 246);
  background-color: var(--body-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  white-space: nowrap
}

.crayons-field>*+* {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.crayons-field--checkbox,
.crayons-field--radio {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  grid-gap: 0.5rem;
  grid-gap: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-field--checkbox:hover,
.crayons-field--radio:hover {
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  box-shadow: 0 0 0 0.25rem rgb(246, 246, 246);
  box-shadow: 0 0 0 var(--su-1) var(--body-bg)
}

.crayons-field--checkbox .crayons-field__label,
.crayons-field--radio .crayons-field__label {
  margin-top: 0;
  padding-right: 0.5rem;
  padding-right: var(--su-2)
}

.crayons-field .crayons-checkbox,
.crayons-field .crayons-radio {
  margin: 0.1875em;
  justify-self: center
}

.crayons-fields {
  display: flex;
  flex-flow: column
}

.crayons-fields:not(.crayons-fields--horizontal)>.crayons-field+.crayons-field {
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.crayons-fields--horizontal {
  flex-flow: row;
  flex-wrap: wrap
}

.crayons-fields--horizontal>.crayons-field:not(:last-child) {
  margin-right: 1rem;
  margin-right: var(--su-4)
}

.crayons-textfield--ghost,
.crayons-textfield--ghost:hover,
.crayons-textfield--ghost:focus,
.crayons-textfield--ghost[disabled] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  width: 100%;
  box-shadow: none;
  resize: none;
  transition: none
}

.c-color-picker {
  --swatch-width: var(--su-7);
  --swatch-height: var(--su-7);
  --input-padding-left: calc(var(--swatch-width) + var(--su-3))
}

.c-color-picker__input {
  padding-left: var(--input-padding-left)
}

.c-color-picker__swatch {
  width: var(--swatch-width);
  height: var(--swatch-height);
  border: 1px solid rgb(0, 0, 0, 0.2);
  border: 1px solid var(--swatch-border-color);
  top: 0.25rem;
  top: var(--su-1);
  left: 0.25rem;
  left: var(--su-1);
  z-index: 1;
  z-index: var(--z-elevate)
}

.c-color-picker__clear {
  right: 0.25rem;
  right: var(--su-1);
  bottom: 0.5rem;
  bottom: var(--su-2);
  z-index: 1;
  z-index: var(--z-elevate);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: #575757;
  color: var(--base-70);
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2);
  line-height: 1
}

.c-color-picker__clear:hover {
  color: #242424;
  color: var(--base-90)
}

.c-color-picker__popover {
  min-width: -moz-min-content;
  min-width: min-content
}

.c-color-picker__popover .react-colorful {
  padding: 0.5rem;
  padding: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  width: 220px;
  height: 160px
}

.c-color-picker__popover .react-colorful__pointer {
  cursor: pointer
}

.c-color-picker__popover .react-colorful__saturation {
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--su-2) 0;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__saturation-pointer {
  width: 0.875rem;
  width: var(--fs-s);
  height: 0.875rem;
  height: var(--fs-s);
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 50%
}

.c-color-picker__popover .react-colorful__hue {
  height: 0.75rem;
  height: var(--fs-xs);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__hue-pointer {
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 1px;
  width: 0.875rem;
  width: var(--fs-s);
  height: calc(100% + 8px)
}

.c-date-picker .DateRangePickerInput {
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2)
}

.c-date-picker .DateRangePickerInput_calendarIcon {
  padding: 0
}

.c-date-picker .DateRangePickerInput .DateInput_input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  font-size: 1rem;
  font-size: var(--fs-base)
}

.c-date-picker .DateRangePickerInput .DateInput_input__focused {
  border-bottom-color: rgb(79, 70, 229);
  border-bottom-color: var(--focus)
}

.c-date-picker .DateRangePickerInput_arrow_svg {
  fill: rgb(23, 23, 23);
  fill: var(--body-color)
}

.c-date-picker .DateRangePickerInput_clearDates {
  position: absolute;
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-date-picker .DateRangePickerInput_clearDates:hover,
.c-date-picker .DateRangePickerInput_clearDates:focus-visible {
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-date-picker--error .DateRangePickerInput {
  border-color: rgb(220, 38, 38);
  border-color: var(--accent-danger)
}

.c-date-picker .DateRangePicker:focus-within .DateRangePickerInput {
  border-color: rgb(79, 70, 229);
  border-color: var(--focus)
}

.c-date-picker .CalendarDay {
  border-color: #efefef;
  border-color: var(--date-border-color)
}

.c-date-picker .CalendarDay__default:hover {
  background-color: transparent;
  position: relative
}

.c-date-picker .CalendarDay__default:hover::after {
  border: 1px solid rgb(79, 70, 229);
  border: 1px solid var(--hover-date-border-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ''
}

.c-date-picker .CalendarDay__today {
  color: rgb(79, 70, 229);
  color: var(--current-date-color)
}

.c-date-picker .CalendarDay__selected_span {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected_span:active,
.c-date-picker .CalendarDay__selected_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: 1rem;
  color: var(--fs-base);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color)
}

.c-date-picker .CalendarDay__selected:hover {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__hovered_span,
.c-date-picker .CalendarDay__hovered_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarMonthGrid__vertical {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .c-date-picker__month {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .CalendarMonth_caption {
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2);
  padding-top: 0.75rem;
  padding-top: var(--su-3)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset::before {
  border-right-color: rgb(79, 70, 229);
  border-right-color: var(--accent-brand)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset:hover::before {
  border-right-color: rgb(99, 102, 241);
  border-right-color: var(--accent-brand-lighter)
}

.c-date-picker .DayPickerNavigation {
  display: flex;
  justify-content: space-between
}

.c-date-picker .DayPickerNavigation_button {
  margin: 1.5rem 0.75rem 0 0.75rem;
  margin: var(--su-6) var(--su-3) 0 var(--su-3);
  height: -moz-min-content;
  height: min-content;
  padding: 0.25rem;
  padding: var(--su-1)
}

.c-date-picker .DayPickerNavigation_button:hover,
.c-date-picker .DayPickerNavigation_button:focus {
  background-color: var(--bg-hover)
}

.c-date-picker .DayPickerNavigation_button__disabled {
  opacity: 0.2;
  cursor: not-allowed
}

.c-date-picker__errors {
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.c-autocomplete__popover {
  font-size: 0.85rem;
  padding: 0.25rem;
  padding: var(--su-1);
  z-index: 500;
  z-index: var(--z-popover);
  width: 250px;
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1)
}

.c-autocomplete__option {
  cursor: pointer;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #efefef;
  border-bottom: 1px solid var(--base-10);
  padding-top: 0.5rem;
  padding-top: var(--su-2);
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2)
}

.c-autocomplete__option:hover,
.c-autocomplete__option[aria-selected='true'] {
  background: rgba(79, 70, 229, 0.1);
  background: var(--link-bg-hover)
}

.c-autocomplete__option:hover .crayons-autocomplete__name,
.c-autocomplete__option[aria-selected='true'] .crayons-autocomplete__name {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.c-autocomplete__option:last-child {
  border-bottom: none
}

.c-autocomplete__empty {
  display: block;
  margin: 0.5rem;
  margin: var(--su-2);
  color: #717171;
  color: var(--base-60);
  font-size: 0.875rem;
  font-size: var(--fs-s)
}

.c-autocomplete--multi__wrapper-border:focus-within .c-autocomplete--multi__input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg-focus)
}

.c-autocomplete--multi__input {
  background-color: var(--bg-color);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  border: none
}

.c-autocomplete--multi__wrapper-border .c-autocomplete--multi__input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg)
}

.c-autocomplete--multi .c-btn.c-autocomplete--multi__selected:first-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:first-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:first-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:first-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:first-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DayPickerNavigation_button:first-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DayPickerNavigation_button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}

.c-autocomplete--multi .c-btn.c-autocomplete--multi__selected:last-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}

.c-autocomplete--multi .c-btn.c-autocomplete--multi__selected:last-child:hover,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child:hover,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child:hover,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child:hover,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child:hover,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child:hover,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child:hover,
.c-autocomplete--multi .c-btn.c-autocomplete--multi__selected:last-child:focus-visible,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child:focus-visible,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_calendarIcon:last-child:focus-visible,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child:focus-visible,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DateRangePickerInput_clearDates:last-child:focus-visible,
.c-autocomplete--multi .c-date-picker .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child:focus-visible,
.c-date-picker .c-autocomplete--multi .c-autocomplete--multi__selected.DayPickerNavigation_button:last-child:focus-visible {
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.c-autocomplete--multi .c-autocomplete--multi__popover {
  position: relative;
  max-height: 200px;
  overflow: auto;
  width: 100%;
  padding: 0.25rem;
  padding: var(--su-1);
  z-index: 1;
  z-index: var(--z-elevate);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  border: none
}

.c-autocomplete--multi .c-autocomplete--multi__popover [role='option'] {
  cursor: pointer
}

.c-autocomplete--multi .c-autocomplete--multi__popover [role='option']:hover,
.c-autocomplete--multi .c-autocomplete--multi__popover [role='option'][aria-selected='true'] {
  background: rgba(79, 70, 229, 0.1);
  background: var(--link-bg-hover);
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.c-autocomplete--multi__top-tags-heading {
  padding: 0.75rem;
  padding: var(--su-3);
  font-size: 1.125rem;
  font-size: var(--fs-l);
  border-bottom: 1px solid #d6d6d7;
  border-bottom: 1px solid var(--base-20)
}

.c-autocomplete--multi__tag-selection .c-btn,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_calendarIcon,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_clearDates,
.c-autocomplete--multi__tag-selection .c-date-picker .DayPickerNavigation_button,
.c-date-picker .c-autocomplete--multi__tag-selection .DayPickerNavigation_button {
  color: #3d3d3d;
  color: var(--base-80);
  background-color: rgba(23, 23, 23, 0.05);
  background-color: var(--tag-bg)
}

.c-autocomplete--multi__tag-selection .c-btn:hover:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_calendarIcon:hover:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_calendarIcon:hover:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_clearDates:hover:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_clearDates:hover:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DayPickerNavigation_button:hover:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DayPickerNavigation_button:hover:enabled,
.c-autocomplete--multi__tag-selection .c-btn:focus-visible:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_calendarIcon:focus-visible:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_calendarIcon:focus-visible:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DateRangePickerInput_clearDates:focus-visible:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DateRangePickerInput_clearDates:focus-visible:enabled,
.c-autocomplete--multi__tag-selection .c-date-picker .DayPickerNavigation_button:focus-visible:enabled,
.c-date-picker .c-autocomplete--multi__tag-selection .DayPickerNavigation_button:focus-visible:enabled {
  color: #3d3d3d;
  color: var(--base-80);
  background-color: rgba(23, 23, 23, 0.05);
  background-color: var(--tag-bg-hover)
}

.c-autocomplete--multi__tag-prefix {
  color: rgba(23, 23, 23, 0.6);
  color: var(--tag-prefix)
}

.c-autocomplete--multi__tag-option {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  padding: 0.75rem;
  padding: var(--su-3);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-autocomplete--multi__tag-option-title {
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-autocomplete--multi__tag-option-name {
  text-overflow: ellipsis
}

.c-autocomplete--multi__tag-option:hover {
  --tag-prefix: var(--accent-brand-darker) !important;
  background: rgb(246, 246, 246);
  background: var(--body-bg)
}

.c-autocomplete--multi__tag-option:hover .c-autocomplete--multi__tag-option-title {
  color: rgb(67, 56, 202);
  color: var(--accent-brand-darker)
}

.c-autocomplete--multi [aria-selected='true'] .c-autocomplete--multi__tag-option {
  --tag-prefix: var(--accent-brand-darker) !important;
  background: rgb(246, 246, 246);
  background: var(--body-bg)
}

.c-autocomplete--multi [aria-selected='true'] .c-autocomplete--multi__tag-option .c-autocomplete--multi__tag-option-title {
  color: rgb(67, 56, 202);
  color: var(--accent-brand-darker)
}

.c-autocomplete--multi__tag-option-image {
  height: 1rem;
  margin-left: 0.25rem;
  margin-left: var(--su-1)
}

.crayons-avatar {
  display: inline-block;
  border-radius: 100%;
  position: relative;
  background-color: rgb(82, 82, 82);
  background-color: var(--card-color-tertiary);
  width: 1.5rem;
  width: var(--su-6);
  height: 1.5rem;
  height: var(--su-6);
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0
}

.crayons-avatar__image {
  border-radius: 100%;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: bottom
}

.crayons-avatar::after {
  content: '';
  border: 1px solid rgb(23, 23, 23);
  border: 1px solid var(--body-color);
  opacity: 0.15;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100%;
  pointer-events: none
}

.crayons-avatar--l {
  width: 2rem;
  width: var(--su-7);
  height: 2rem;
  height: var(--su-7)
}

.crayons-avatar--xl {
  width: 3rem;
  width: var(--su-8);
  height: 3rem;
  height: var(--su-8)
}

.crayons-avatar--2xl {
  width: 4rem;
  width: var(--su-9);
  height: 4rem;
  height: var(--su-9)
}

.crayons-avatar--3xl {
  width: 8rem;
  width: var(--su-10);
  height: 8rem;
  height: var(--su-10)
}

@media (min-width: 640px) {
  .s\:crayons-avatar--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .s\:crayons-avatar--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .s\:crayons-avatar--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .s\:crayons-avatar--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

@media (min-width: 768px) {
  .m\:crayons-avatar--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .m\:crayons-avatar--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .m\:crayons-avatar--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .m\:crayons-avatar--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

@media (min-width: 1024px) {
  .l\:crayons-avatar--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .l\:crayons-avatar--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .l\:crayons-avatar--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .l\:crayons-avatar--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

.crayons-logo {
  display: inline-block;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  position: relative;
  background-color: rgb(255, 255, 255);
  background-color: var(--body-color-inverted);
  width: 1.5rem;
  width: var(--su-6);
  height: 1.5rem;
  height: var(--su-6);
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0
}

.crayons-logo__image {
  border-radius: 0.375rem;
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: bottom
}

.crayons-logo::after {
  content: '';
  border: 1px solid rgb(23, 23, 23);
  border: 1px solid var(--body-color);
  opacity: 0.15;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  pointer-events: none
}

.crayons-logo--l {
  width: 2rem;
  width: var(--su-7);
  height: 2rem;
  height: var(--su-7)
}

.crayons-logo--xl {
  width: 3rem;
  width: var(--su-8);
  height: 3rem;
  height: var(--su-8)
}

.crayons-logo--2xl {
  width: 4rem;
  width: var(--su-9);
  height: 4rem;
  height: var(--su-9)
}

.crayons-logo--3xl {
  width: 8rem;
  width: var(--su-10);
  height: 8rem;
  height: var(--su-10)
}

@media (min-width: 640px) {
  .s\:crayons-logo--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .s\:crayons-logo--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .s\:crayons-logo--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .s\:crayons-logo--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

@media (min-width: 768px) {
  .m\:crayons-logo--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .m\:crayons-logo--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .m\:crayons-logo--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .m\:crayons-logo--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

@media (min-width: 1024px) {
  .l\:crayons-logo--l {
    width: 2rem;
    width: var(--su-7);
    height: 2rem;
    height: var(--su-7)
  }

  .l\:crayons-logo--xl {
    width: 3rem;
    width: var(--su-8);
    height: 3rem;
    height: var(--su-8)
  }

  .l\:crayons-logo--2xl {
    width: 4rem;
    width: var(--su-9);
    height: 4rem;
    height: var(--su-9)
  }

  .l\:crayons-logo--3xl {
    width: 8rem;
    width: var(--su-10);
    height: 8rem;
    height: var(--su-10)
  }
}

.crayons-banner {
  padding: 1rem;
  padding: var(--su-4);
  border-bottom: 1px solid;
  text-align: center;
  font-size: 1rem;
  font-size: var(--fs-base);
  background: #242424;
  background: var(--base-90);
  color: #f9f9f9;
  color: var(--base-0)
}

.crayons-banner a {
  color: rgb(255, 255, 255);
  color: var(--body-color-inverted)
}

.crayons-banner--brand {
  background: rgb(79, 70, 229);
  background: var(--accent-brand);
  border-bottom-color: rgb(67, 56, 202);
  border-bottom-color: var(--accent-brand-darker)
}

.crayons-banner--brand a {
  color: rgb(255, 255, 255);
  color: var(--body-color-inverted)
}

.crayons-banner--success {
  background: rgb(5, 150, 105);
  background: var(--accent-success);
  border-bottom-color: rgb(4, 120, 87);
  border-bottom-color: var(--accent-success-darker);
  color: rgb(23, 23, 23);
  color: var(--body-color)
}

.crayons-banner--success a {
  color: rgb(23, 23, 23);
  color: var(--body-color)
}

.crayons-banner--warning {
  background: rgb(245, 158, 11);
  background: var(--accent-warning);
  border-bottom-color: rgb(217, 119, 6);
  border-bottom-color: var(--accent-warning-darker);
  color: rgb(23, 23, 23);
  color: var(--body-color)
}

.crayons-banner--warning a {
  color: rgb(23, 23, 23);
  color: var(--body-color)
}

.crayons-banner--error {
  background: rgb(220, 38, 38);
  background: var(--accent-danger);
  border-bottom-color: rgb(185, 28, 28);
  border-bottom-color: var(--accent-danger-darker);
  color: rgb(255, 255, 255);
  color: var(--body-color-inverted)
}

.crayons-banner--error a {
  color: rgb(255, 255, 255);
  color: var(--body-color-inverted)
}

.crayons-banner a {
  text-decoration: underline
}

.c-banner {
  background: rgb(38, 38, 38);
  background: var(--banner-bg);
  color: RGB(255, 255, 255);
  color: RGB(var(--banner-color));
  padding: 1.5rem 0.75rem;
  padding: var(--su-6) var(--su-3);
  text-align: center;
  position: relative;
  overflow: hidden
}

@media (min-width: 768px) {
  .c-banner {
    padding: 2rem 0;
    padding: var(--su-7) 0
  }
}

.c-banner p {
  color: rgba(255, 255, 255, 0.75);
  color: rgba(var(--banner-color), 0.75)
}

.c-banner__header {
  max-width: 768px;
  margin: 0 auto;
  width: 100%
}

.c-banner__cells {
  padding-top: 1rem;
  padding-top: var(--su-4);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--su-6)
}

@media (min-width: 768px) {
  .c-banner__cells {
    padding-top: 1.5rem;
    padding-top: var(--su-6);
    flex-direction: row;
    gap: 3rem;
    gap: var(--su-8)
  }
}

.c-banner__cell {
  flex: 1 1 auto
}

.crayons-btn,
input[type='file']::file-selector-button {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
input[type='file']::file-selector-button {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.5rem;
  line-height: var(--su-6);
  font-weight: 500;
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
input[href][type='file']:hover::file-selector-button,
.crayons-btn[href]:focus,
input[href][type='file']:focus::file-selector-button,
.crayons-btn:hover:enabled,
input[type='file']:hover:enabled::file-selector-button,
.crayons-btn:active:enabled,
input[type='file']:active:enabled::file-selector-button {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
input.crayons-btn--inverted[type='file']::file-selector-button {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
input[disabled][type='file']::file-selector-button {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
input[type='file']::file-selector-button>* {
  pointer-events: none
}

.crayons-btn>*+input,
input[type='file']::file-selector-button>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
input[type='file']::file-selector-button {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions input[type='file']::file-selector-button {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group input[type='file']::file-selector-button {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined)::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined)::file-selector-button {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group input[type='file']:first-child::file-selector-button {
  border-top-left-radius: 0.375rem;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group input[type='file']:last-child::file-selector-button {
  border-top-right-radius: 0.375rem;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius)
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  padding: var(--su-2) var(--su-4);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.c-date-picker .DateRangePickerInput_calendarIcon:hover:enabled,
.c-date-picker .DateRangePickerInput_clearDates:hover:enabled,
.c-date-picker .DayPickerNavigation_button:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-expanded='true'],
.c-date-picker .DayPickerNavigation_button[aria-expanded='true'],
.c-btn[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-pressed='true'],
.c-date-picker .DayPickerNavigation_button[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.c-btn[disabled],
.c-date-picker .DateRangePickerInput_calendarIcon[disabled],
.c-date-picker .DateRangePickerInput_clearDates[disabled],
.c-date-picker .DayPickerNavigation_button[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>*,
.c-date-picker .DateRangePickerInput_calendarIcon>*,
.c-date-picker .DateRangePickerInput_clearDates>*,
.c-date-picker .DayPickerNavigation_button>* {
  pointer-events: none
}

.c-btn>*+input,
.c-date-picker .DateRangePickerInput_calendarIcon>*+input,
.c-date-picker .DateRangePickerInput_clearDates>*+input,
.c-date-picker .DayPickerNavigation_button>*+input {
  pointer-events: revert
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive,
.c-date-picker .c-btn--destructive.DateRangePickerInput_calendarIcon,
.c-date-picker .c-btn--destructive.DateRangePickerInput_clearDates,
.c-date-picker .c-btn--destructive.DayPickerNavigation_button {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.crayons-card {
  border-radius: Max(0px, Min(0.375rem, calc((100vw - 4px - 100%) * 9999))) / 0.375rem;
  border-radius: var(--radius-auto);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.033);
  box-shadow: 0 0 0 1px var(--card-secondary-border);
  overflow-wrap: break-word;
  overflow-wrap: anywhere
}

.crayons-card--secondary {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(64, 64, 64);
  color: var(--card-secondary-color);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.033);
  box-shadow: 0 0 0 1px var(--card-secondary-border)
}

.crayons-card--elevated {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1)
}

.crayons-card--content-rows {
  padding: 1rem;
  padding: var(--su-4);
  margin-bottom: 1rem;
  margin-bottom: var(--su-4);
  grid-gap: 1rem;
  grid-gap: var(--su-4);
  display: grid
}

@media (min-width: 768px) {
  .crayons-card--content-rows {
    padding: 1.5rem;
    padding: var(--su-6);
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6);
    grid-gap: 1.5rem;
    grid-gap: var(--su-6)
  }
}

.crayons-card__header {
  padding: 0.75rem 1rem;
  padding: var(--su-3) var(--su-4);
  border-bottom: 1px solid rgb(246, 246, 246);
  border-bottom: 1px solid var(--body-bg)
}

.crayons-card__body {
  padding: 1rem;
  padding: var(--su-4)
}

.c-card {
  --revealable-opacity: var(--opacity-100);
  border-radius: Max(0px, Min(0.375rem, calc((100vw - 4px - 100%) * 9999))) / 0.375rem;
  border-radius: var(--radius-auto);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.1);
  box-shadow: 0 0 0 1px var(--card-border);
  overflow-wrap: break-word;
  overflow-wrap: anywhere
}

@media (hover: hover) {
  .c-card {
    --revealable-opacity: var(--opacity-0)
  }
}

.c-card__revealable {
  opacity: var(--revealable-opacity)
}

.c-card--interactive:hover,
.c-card--interactive:focus-within {
  --card-border: var(--base-90);
  --card-bg: var(--card-secondary-bg);
  --revealable-opacity: var(--opacity-100)
}

.crayons-comment {
  font-size: 0.875rem;
  font-size: var(--fs-s);
  padding-bottom: 0.75rem;
  padding-bottom: var(--su-3);
  display: flex;
  align-items: flex-start;
  padding-left: 0.75rem;
  padding-left: var(--su-3);
  margin-right: 0.75rem;
  margin-right: var(--su-3)
}

.crayons-comment__meta {
  display: flex;
  align-items: flex-start
}

.crayons-comment__meta a {
  display: flex;
  align-items: flex-start
}

.crayons-comment__metainner {
  color: #3d3d3d;
  color: var(--base-80);
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

.crayons-comment__body {
  padding-left: 2rem;
  padding-left: var(--su-7);
  width: calc(100% - 2rem);
  width: calc(100% - var(--su-7));
  background: rgb(246, 246, 246);
  background: var(--card-tertiary-bg);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  padding: 1rem;
  padding: var(--su-4);
  padding-bottom: 0.25rem;
  padding-bottom: var(--su-1)
}

.crayons-comment__body:hover {
  background: rgba(229, 229, 229, 0.55);
  background: var(--card-tertiary-bg-hover)
}

@media (min-width: 768px) {
  .crayons-comment__body {
    width: calc(100% - 2rem);
    width: calc(100% - var(--su-7))
  }
}

.crayons-comment__body .crayons-comment__inner .c-embed {
  padding-top: 0.75rem;
  padding-top: var(--su-3);
  padding-bottom: 0.25rem;
  padding-bottom: var(--su-1)
}

.crayons-comment__body .crayons-comment__inner .c-embed__cover {
  display: none
}

.crayons-comment__body .crayons-comment__inner .c-embed__content {
  display: block
}

.crayons-comment__body .crayons-comment__inner .c-embed__body {
  font-size: 0.875rem;
  font-size: var(--fs-s)
}

.crayons-comment__body .crayons-comment__inner>div:not(.crayons-comment__readmore):not(.highlight__panel-action):not(.highlight__panel):not(.highlight) {
  background: rgb(250, 250, 250);
  background: var(--card-secondary-bg)
}

.crayons-comment__body .crayons-comment__inner>div:not(.crayons-comment__readmore) {
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3)
}

.crayons-comment__body .crayons-comment__inner .liquid-comment .body :not(:first-child) {
  display: none
}

.crayons-comment__body .crayons-comment__inner li>img {
  display: block;
  max-height: 90px
}

.crayons-comment__body .crayons-comment__inner blockquote {
  border-left: 4px solid #d6d6d7;
  border-left: 4px solid var(--base-20);
  padding-left: 0.5rem;
  padding-left: var(--su-2)
}

.crayons-comment__body .crayons-comment__inner pre:not(.highlight),
.crayons-comment__body .crayons-comment__inner div.highlight,
.crayons-comment__body .crayons-comment__inner div:not(.highlight)>pre.highlight,
.crayons-comment__body .crayons-comment__inner li pre.highlight,
.crayons-comment__body .crayons-comment__inner blockquote pre.highlight {
  padding: 0.5rem;
  padding: var(--su-2)
}

.crayons-comment__body .crayons-comment__readmore {
  color: #3d3d3d;
  color: var(--base-80);
  font-weight: 500;
  font-weight: var(--fw-medium);
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1);
  margin-top: -3px;
  padding-bottom: 0.25rem;
  padding-bottom: var(--su-1)
}

.crayons-comment__body img:not([class]) {
  max-height: 130px;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  max-width: 220px
}

.crayons-comment__body iframe:not([class]) {
  max-height: 240px;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border: 0
}

.crayons-comment__body a:not([class]):hover {
  text-decoration: underline
}

.crayons-comment__body p:not([class]) {
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3)
}

.crayons-comment__body pre:not(.highlight),
.crayons-comment__body div:not(.highlight)>pre.highlight,
.crayons-comment__body div.highlight {
  margin: 0.25rem auto;
  margin: var(--su-1) auto;
  font-size: 90%
}

.crayons-comment+.crayons-comment {
  margin-top: 0.25rem;
  margin-top: var(--su-1)
}

.c-cta {
  --border-width: 1px;
  padding: calc(0.5rem - var(--border-width)) calc(1rem - var(--border-width));
  padding: calc(var(--su-2) - var(--border-width)) calc(var(--su-4) - var(--border-width));
  border: var(--border-width) solid;
  border-color: var(--border);
  text-decoration: none;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  background-color: var(--bg);
  color: var(--color);
  outline: 0;
  text-align: center;
  display: inline-flex;
  position: relative;
  overflow-wrap: normal
}

.c-cta:hover,
.js-focus-visible .c-cta.focus-visible:focus {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate);
  text-decoration: underline
}

.js-focus-visible .c-cta.focus-visible:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring)
}

.c-cta {
  --bg: var(--cta-bg);
  --bg-hover: var(--cta-bg-hover);
  --color: var(--cta-color);
  --color-hover: var(--cta-color-hover);
  --border: var(--cta-border);
  --border-hover: var(--cta-border-hover)
}

.c-cta--branded {
  --bg: var(--cta-branded-bg);
  --bg-hover: var(--cta-branded-bg-hover);
  --color: var(--cta-branded-color);
  --color-hover: var(--cta-branded-color-hover);
  --border: var(--cta-branded-border);
  --border-hover: var(--cta-branded-border-hover);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-cta--icon-left .c-cta__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.crayons-dropdown {
  position: absolute;
  top: 100%;
  display: none;
  padding: 0.5rem;
  padding: var(--su-2);
  min-width: 250px;
  margin-top: 0.25rem;
  margin-top: var(--su-1);
  z-index: 400;
  z-index: var(--z-dropdown);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

@media (min-width: 640px) {
  .crayons-dropdown {
    max-width: 360px;
    width: -moz-max-content;
    width: max-content
  }
}

.crayons-dropdown.reverse {
  bottom: 100%;
  top: auto;
  top: initial;
  margin-top: 0;
  margin-top: initial;
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

.editor-toolbar {
  display: flex
}

.editor-toolbar .toolbar-btn .spinner-or-cancel .cancel {
  display: none
}

.editor-toolbar .toolbar-btn:hover .spinner-or-cancel .cancel,
.editor-toolbar .toolbar-btn:focus .spinner-or-cancel .cancel {
  display: block;
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.editor-toolbar .toolbar-btn:hover .spinner-or-cancel svg:not(.cancel),
.editor-toolbar .toolbar-btn:focus .spinner-or-cancel svg:not(.cancel) {
  display: none
}

.c-emoji-popup {
  z-index: 500;
  z-index: var(--z-popover)
}

.c-emoji-popup.picmo__picker,
.c-emoji-popup.picmo__popupContainer {
  --background-color: var(--card-bg);
  --border-color: var(--base-20);
  --text-color: var(--card-color);
  --secondary-text-color: var(--base-70);
  --category-name-background-color: var(--card-bg);
  --category-name-text-color: var(--base-70);
  --category-name-button-color: var(--base-50);
  --category-tab-color: var(--base-50);
  --category-tab-active-color: var(--link-color);
  --category-tab-active-background-color: transparent;
  --category-tab-highlight-background-color: var(--base-10);
  --hover-background-color: var(--base-10);
  --search-background-color: var(--form-bg);
  --search-focus-background-color: var(--form-bg-focus);
  --search-placeholder-color: var(--base-50);
  --search-icon-color: var(--base-50);
  --preview-background-color: var(--card-bg);
  --secondary-background-color: var(--card-bg);
  --focus-indicator-background-color: var(--form-bg-focus);
  --focus-indicator-color: var(--link-color);
  --emoji-size: 1.5rem;
  --emoji-preview-size: 1.75rem;
  --emoji-preview-height: calc(var(--emoji-preview-size) + 1.2em + 6px);
  --category-tab-size: 1.1rem;
  --ui-font-size: 14px;
  --picker-width: 320px;
  --emoji-area-height: 250px;
  --category-tabs-height: 2.25rem;
  --search-height: 2.25rem;
  --search-margin-bottom: 0.5rem;
  --border-radius: var(--radius);
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1)
}

.c-emoji-popup .picmo__searchContainer {
  padding-top: 0.5rem
}

.picmo__popupContainer {
  box-shadow: none !important
}

.picmo__picker .picmo__searchContainer .picmo__searchField {
  font-size: 0.95em;
  padding: 0.1em 2.25em .5em .5em
}

.picmo__picker .picmo__categoryButtons .picmo__categoryTab.picmo__categoryTabActive .picmo__categoryButton {
  background: #efefef;
  background: var(--base-10)
}

.picmo__closeButton {
  display: none !important
}

.crayons-btn,
input[type='file']::file-selector-button {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
input[type='file']::file-selector-button {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.5rem;
  line-height: var(--su-6);
  font-weight: 500;
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
input[href][type='file']:hover::file-selector-button,
.crayons-btn[href]:focus,
input[href][type='file']:focus::file-selector-button,
.crayons-btn:hover:enabled,
input[type='file']:hover:enabled::file-selector-button,
.crayons-btn:active:enabled,
input[type='file']:active:enabled::file-selector-button {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
input.crayons-btn--inverted[type='file']::file-selector-button {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
input[disabled][type='file']::file-selector-button {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
input[type='file']::file-selector-button>* {
  pointer-events: none
}

.crayons-btn>*+input,
input[type='file']::file-selector-button>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
input[type='file']::file-selector-button {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions input[type='file']::file-selector-button {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group input[type='file']::file-selector-button {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined)::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined)::file-selector-button {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group input[type='file']:first-child::file-selector-button {
  border-top-left-radius: 0.375rem;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group input[type='file']:last-child::file-selector-button {
  border-top-right-radius: 0.375rem;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius)
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  padding: var(--su-2) var(--su-4);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.c-date-picker .DateRangePickerInput_calendarIcon:hover:enabled,
.c-date-picker .DateRangePickerInput_clearDates:hover:enabled,
.c-date-picker .DayPickerNavigation_button:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-expanded='true'],
.c-date-picker .DayPickerNavigation_button[aria-expanded='true'],
.c-btn[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-pressed='true'],
.c-date-picker .DayPickerNavigation_button[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.c-btn[disabled],
.c-date-picker .DateRangePickerInput_calendarIcon[disabled],
.c-date-picker .DateRangePickerInput_clearDates[disabled],
.c-date-picker .DayPickerNavigation_button[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>*,
.c-date-picker .DateRangePickerInput_calendarIcon>*,
.c-date-picker .DateRangePickerInput_clearDates>*,
.c-date-picker .DayPickerNavigation_button>* {
  pointer-events: none
}

.c-btn>*+input,
.c-date-picker .DateRangePickerInput_calendarIcon>*+input,
.c-date-picker .DateRangePickerInput_clearDates>*+input,
.c-date-picker .DayPickerNavigation_button>*+input {
  pointer-events: revert
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive,
.c-date-picker .c-btn--destructive.DateRangePickerInput_calendarIcon,
.c-date-picker .c-btn--destructive.DateRangePickerInput_clearDates,
.c-date-picker .c-btn--destructive.DayPickerNavigation_button {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.crayons-textfield,
.crayons-checkbox,
.crayons-radio,
.crayons-select,
.c-date-picker .DateRangePickerInput {
  --border-width: 1.5px;
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-textfield:hover,
.crayons-checkbox:hover,
.crayons-radio:hover,
.crayons-select:hover,
.c-date-picker .DateRangePickerInput:hover {
  border-color: rgb(212, 212, 212);
  border-color: var(--form-border-hover)
}

.c-input--multi__wrapper-border:focus-within,
.crayons-textfield:focus,
.crayons-select:focus,
.c-date-picker .DateRangePickerInput:focus,
.c-autocomplete--multi__wrapper-border:focus-within {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--focus);
  box-shadow: 0 0 0 1px rgb(79, 70, 229);
  box-shadow: 0 0 0 1px var(--focus)
}

.crayons-textfield--disabled,
.crayons-textfield[disabled],
.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled],
.crayons-checkbox--checked--disabled,
.crayons-checkbox--checked[disabled],
.crayons-checkbox:checked--disabled,
.crayons-radio--checked--disabled,
.crayons-radio--checked[disabled],
.crayons-radio:checked--disabled,
.crayons-select--disabled,
.crayons-select[disabled],
.c-date-picker .DateRangePickerInput[disabled] {
  opacity: 0.6
}

.crayons-checkbox--checked,
.crayons-checkbox:checked,
.crayons-radio--checked,
.crayons-radio:checked {
  background-color: rgb(79, 70, 229);
  background-color: var(--form-border-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--form-border-focus);
  color: rgb(255, 255, 255);
  color: var(--form-bg-focus);
  background-position: center center;
  background-repeat: no-repeat
}

.crayons-textfield,
.c-date-picker .DateRangePickerInput {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  resize: vertical
}

.crayons-textfield::-moz-placeholder,
.c-date-picker .DateRangePickerInput::-moz-placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::placeholder,
.c-date-picker .DateRangePickerInput::placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::-ms-clear,
.c-date-picker .DateRangePickerInput::-ms-clear {
  display: none
}

.crayons-textfield::-webkit-date-and-time-value,
.c-date-picker .DateRangePickerInput::-webkit-date-and-time-value {
  min-height: 1.5em
}

.crayons-textfield--icon {
  padding-left: 2rem;
  padding-left: var(--su-7)
}

.crayons-checkbox,
.crayons-radio {
  width: 1.125em;
  height: 1.125em;
  cursor: pointer;
  background-position: center center;
  vertical-align: middle;
  flex-shrink: 0
}

.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled] {
  cursor: not-allowed
}

.crayons-checkbox--checked,
.crayons-checkbox:checked,
.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.157.933a.75.75 0 01.077 1.058L4.817 9.407a.75.75 0 01-1.134 0L.766 6.037a.75.75 0 011.135-.982L4.25 7.77l5.85-6.76a.75.75 0 011.057-.077z' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-radio {
  border-radius: 50%
}

.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-select {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  padding-right: 2rem;
  padding-right: var(--su-7);
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  position: relative;
  outline: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
  background-image: var(--select-icon);
  background-position: calc(100% - 0.5rem) calc(50% - 1px);
  background-position: calc(100% - var(--su-2)) calc(50% - 1px);
  background-repeat: no-repeat
}

.crayons-select::-ms-clear {
  display: none
}

.crayons-select.disabled {
  background-color: #f2f2f2;
  color: #888888;
  pointer-events: none;
  cursor: not-allowed
}

.crayons-field {
  display: flex;
  flex-flow: column;
  font-size: 1rem;
  font-size: var(--fs-base)
}

.crayons-field__label {
  color: rgb(23, 23, 23);
  color: var(--label-primary);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.crayons-field__label+.crayons-field__description {
  margin-top: 0
}

.crayons-field__label.required:after {
  content: '*'
}

.crayons-field__required {
  color: rgb(220, 38, 38);
  color: var(--accent-danger);
  padding: 0 0.25rem;
  padding: 0 var(--su-1);
  display: inline-block
}

.crayons-field__description {
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-weight: 400;
  font-weight: var(--fw-normal);
  margin: 0
}

.crayons-field__addon {
  display: flex;
  align-items: center;
  padding: calc(0.5em - var(--border-width)) 0.5em;
  background-color: rgb(246, 246, 246);
  background-color: var(--body-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  white-space: nowrap
}

.crayons-field>*+* {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.crayons-field--checkbox,
.crayons-field--radio {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  grid-gap: 0.5rem;
  grid-gap: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-field--checkbox:hover,
.crayons-field--radio:hover {
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  box-shadow: 0 0 0 0.25rem rgb(246, 246, 246);
  box-shadow: 0 0 0 var(--su-1) var(--body-bg)
}

.crayons-field--checkbox .crayons-field__label,
.crayons-field--radio .crayons-field__label {
  margin-top: 0;
  padding-right: 0.5rem;
  padding-right: var(--su-2)
}

.crayons-field .crayons-checkbox,
.crayons-field .crayons-radio {
  margin: 0.1875em;
  justify-self: center
}

.crayons-fields {
  display: flex;
  flex-flow: column
}

.crayons-fields:not(.crayons-fields--horizontal)>.crayons-field+.crayons-field {
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.crayons-fields--horizontal {
  flex-flow: row;
  flex-wrap: wrap
}

.crayons-fields--horizontal>.crayons-field:not(:last-child) {
  margin-right: 1rem;
  margin-right: var(--su-4)
}

.crayons-textfield--ghost,
.crayons-textfield--ghost:hover,
.crayons-textfield--ghost:focus,
.crayons-textfield--ghost[disabled] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  width: 100%;
  box-shadow: none;
  resize: none;
  transition: none
}


.c-color-picker {
  --swatch-width: var(--su-7);
  --swatch-height: var(--su-7);
  --input-padding-left: calc(var(--swatch-width) + var(--su-3))
}

.c-color-picker__input {
  padding-left: var(--input-padding-left)
}

.c-color-picker__swatch {
  width: var(--swatch-width);
  height: var(--swatch-height);
  border: 1px solid rgb(0, 0, 0, 0.2);
  border: 1px solid var(--swatch-border-color);
  top: 0.25rem;
  top: var(--su-1);
  left: 0.25rem;
  left: var(--su-1);
  z-index: 1;
  z-index: var(--z-elevate)
}

.c-color-picker__clear {
  right: 0.25rem;
  right: var(--su-1);
  bottom: 0.5rem;
  bottom: var(--su-2);
  z-index: 1;
  z-index: var(--z-elevate);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: #575757;
  color: var(--base-70);
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2);
  line-height: 1
}

.c-color-picker__clear:hover {
  color: #242424;
  color: var(--base-90)
}

.c-color-picker__popover {
  min-width: -moz-min-content;
  min-width: min-content
}

.c-color-picker__popover .react-colorful {
  padding: 0.5rem;
  padding: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  width: 220px;
  height: 160px
}

.c-color-picker__popover .react-colorful__pointer {
  cursor: pointer
}

.c-color-picker__popover .react-colorful__saturation {
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--su-2) 0;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__saturation-pointer {
  width: 0.875rem;
  width: var(--fs-s);
  height: 0.875rem;
  height: var(--fs-s);
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 50%
}

.c-color-picker__popover .react-colorful__hue {
  height: 0.75rem;
  height: var(--fs-xs);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__hue-pointer {
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 1px;
  width: 0.875rem;
  width: var(--fs-s);
  height: calc(100% + 8px)
}

.c-date-picker .DateRangePickerInput {
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2)
}

.c-date-picker .DateRangePickerInput_calendarIcon {
  padding: 0
}

.c-date-picker .DateRangePickerInput .DateInput_input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  font-size: 1rem;
  font-size: var(--fs-base)
}

.c-date-picker .DateRangePickerInput .DateInput_input__focused {
  border-bottom-color: rgb(79, 70, 229);
  border-bottom-color: var(--focus)
}

.c-date-picker .DateRangePickerInput_arrow_svg {
  fill: rgb(23, 23, 23);
  fill: var(--body-color)
}

.c-date-picker .DateRangePickerInput_clearDates {
  position: absolute;
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-date-picker .DateRangePickerInput_clearDates:hover,
.c-date-picker .DateRangePickerInput_clearDates:focus-visible {
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-date-picker--error .DateRangePickerInput {
  border-color: rgb(220, 38, 38);
  border-color: var(--accent-danger)
}

.c-date-picker .DateRangePicker:focus-within .DateRangePickerInput {
  border-color: rgb(79, 70, 229);
  border-color: var(--focus)
}

.c-date-picker .CalendarDay {
  border-color: #efefef;
  border-color: var(--date-border-color)
}

.c-date-picker .CalendarDay__default:hover {
  background-color: transparent;
  position: relative
}

.c-date-picker .CalendarDay__default:hover::after {
  border: 1px solid rgb(79, 70, 229);
  border: 1px solid var(--hover-date-border-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ''
}

.c-date-picker .CalendarDay__today {
  color: rgb(79, 70, 229);
  color: var(--current-date-color)
}

.c-date-picker .CalendarDay__selected_span {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected_span:active,
.c-date-picker .CalendarDay__selected_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: 1rem;
  color: var(--fs-base);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color)
}

.c-date-picker .CalendarDay__selected:hover {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__hovered_span,
.c-date-picker .CalendarDay__hovered_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarMonthGrid__vertical {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .c-date-picker__month {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .CalendarMonth_caption {
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2);
  padding-top: 0.75rem;
  padding-top: var(--su-3)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset::before {
  border-right-color: rgb(79, 70, 229);
  border-right-color: var(--accent-brand)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset:hover::before {
  border-right-color: rgb(99, 102, 241);
  border-right-color: var(--accent-brand-lighter)
}

.c-date-picker .DayPickerNavigation {
  display: flex;
  justify-content: space-between
}

.c-date-picker .DayPickerNavigation_button {
  margin: 1.5rem 0.75rem 0 0.75rem;
  margin: var(--su-6) var(--su-3) 0 var(--su-3);
  height: -moz-min-content;
  height: min-content;
  padding: 0.25rem;
  padding: var(--su-1)
}

.c-date-picker .DayPickerNavigation_button:hover,
.c-date-picker .DayPickerNavigation_button:focus {
  background-color: var(--bg-hover)
}

.c-date-picker .DayPickerNavigation_button__disabled {
  opacity: 0.2;
  cursor: not-allowed
}

.c-date-picker__errors {
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.c-toggle {
  --size: 1.5em;
  --padding: 2px;
  height: calc(var(--size) - var(--padding) * 2);
  padding: var(--padding);
  box-sizing: content-box;
  aspect-ratio: 2 / 1;
  border-radius: var(--size);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  background: rgb(229, 229, 229);
  background: var(--toggle-rail-bg);
  transition: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: var(--transition-props)
}

.c-toggle::after {
  content: '';
  height: 100%;
  aspect-ratio: 1;
  background: rgb(255, 255, 255);
  background: var(--toggle-knob-bg);
  z-index: 1;
  z-index: var(--z-elevate);
  display: block;
  border-radius: var(--size);
  transition: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: var(--transition-props);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(var(--black), 0.05), 0 2px 3px rgba(var(--black), 0.2)
}

.c-toggle:checked {
  background: rgb(16, 185, 129);
  background: var(--toggle-rail-checked-bg)
}

.c-toggle:checked::after {
  transform: translateX(100%)
}

.c-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-toggle[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.hamburger {
  position: fixed;
  inset: 0;
  z-index: 200;
  z-index: var(--z-drawer);
  display: none
}

.hamburger__content {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  max-width: 300px;
  max-width: var(--layout-drawer-width);
  width: 90%;
  z-index: 1;
  z-index: var(--z-elevate);
  position: fixed;
  height: 100%;
  overflow-y: auto
}

.hamburger__content__header {
  min-height: 56px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 0.5rem 0 1rem;
  padding: 0 var(--su-2) 0 var(--su-4);
  justify-content: space-between
}

.hamburger__overlay {
  background: #090909;
  background: var(--base-100);
  opacity: 0.5;
  position: absolute;
  inset: 0
}

body[data-left-nav-state='open'] .hamburger {
  z-index: calc(500 + 1);
  z-index: calc(var(--z-modal) + 1);
  display: block
}

@media (min-width: 768px) {
  body[data-left-nav-state='open'] .hamburger {
    display: none
  }
}

@media (max-width: 768px) {
  body[data-left-nav-state='open'] {
    overflow: hidden
  }
}

.skip-content-link {
  position: absolute;
  left: 50%;
  background: rgb(23, 23, 23);
  background: var(--body-color);
  color: rgb(255, 255, 255);
  color: var(--body-color-inverted);
  z-index: 500;
  z-index: var(--z-popover);
  padding: 0.75rem 1rem;
  padding: var(--su-3) var(--su-4);
  pointer-events: none;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transform: translate(-50%, -200%);
  transition: transform cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: transform var(--transition-props);
  opacity: 0.00001;
  opacity: var(--opacity-0)
}

.js-focus-visible .skip-content-link:focus:not(.focus-visible) {
  visibility: hidden
}

.js-focus-visible .skip-content-link:focus {
  pointer-events: auto;
  transform: translate(-50%, 0.25rem);
  transform: translate(-50%, var(--su-1));
  outline: none;
  opacity: var(--opacity-1);
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring)
}

.crayons-header {
  height: 56px;
  height: var(--header-height);
  background: rgb(255, 255, 255);
  background: var(--header-bg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.066);
  box-shadow: 0 1px 1px var(--header-shadow);
  z-index: 100;
  z-index: var(--z-sticky)
}

.default-header .crayons-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px
}

.crayons-header__container {
  max-width: 1380px;
  max-width: var(--site-width);
  padding: 0 0;
  padding: 0 var(--layout-padding);
  margin: auto;
  display: flex;
  align-items: center;
  position: relative;
  height: 56px;
  height: var(--header-height)
}

.crayons-header .c-indicator {
  position: absolute;
  top: calc(0.25rem * -1);
  top: calc(var(--su-1) * -1);
  right: 0;
  box-shadow: 0 0 0 2px rgb(255, 255, 255);
  box-shadow: 0 0 0 2px var(--header-bg)
}

.crayons-header--search {
  max-width: 680px;
  flex: 1 1 auto;
  margin: 0 0.5rem;
  margin: 0 var(--su-2);
  display: none
}

@media (min-width: 768px) {
  .crayons-header--search {
    margin: 0 1rem;
    margin: 0 var(--su-4);
    display: block
  }
}

.crayons-header--search .crayons-header--search-input {
  padding-left: 40px;
  padding-right: 142px
}

.main-search-page .crayons-textfield,
.main-search-page .c-date-picker .DateRangePickerInput,
.c-date-picker .main-search-page .DateRangePickerInput {
  padding-left: 40px
}

.crayons-header--search-typeahead {
  border: 1px solid #d6d6d7;
  border: 1px solid var(--base-20);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  position: absolute;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-smooth);
  top: 41px;
  left: 0;
  right: 0
}

.crayons-header--search-typeahead li {
  padding: 8px;
  border-bottom: 1px solid var(--base-3)
}

.crayons-header--search-typeahead li:first-child {
  border-top-left-radius: 0.375rem;
  border-top-left-radius: var(--radius);
  border-top-right-radius: 0.375rem;
  border-top-right-radius: var(--radius)
}

.crayons-header--search-typeahead li:hover {
  background: #efefef;
  background: var(--base-10)
}

.crayons-header--search-typeahead li.crayons-header--search-typeahead-item-selected {
  background: #d6d6d7;
  background: var(--base-20)
}

.crayons-header--search-typeahead li strong {
  color: rgb(23, 23, 23);
  color: var(--body-color);
  display: block
}

.crayons-header--search-typeahead li .crayons-header--search-typeahead-item-preheader {
  font-size: 12px;
  color: #717171;
  color: var(--base-60)
}

.crayons-header--search-typeahead li .crayons-header--search-typeahead-item-subheader {
  font-size: 12px;
  color: #717171;
  color: var(--base-60)
}

.crayons-header--search-typeahead .crayons-header--search-typeahead-footer {
  background: #efefef;
  background: var(--base-10);
  font-size: 13px;
  border-top: 1px solid rgba(23, 23, 23, 0.1);
  border-top: 1px solid var(--card-border);
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius);
  padding: 12px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between
}

.crayons-header--search-typeahead .crayons-header--search-typeahead-footer span {
  font-size: 14px
}

.crayons-header--search-typeahead .crayons-header--search-typeahead-footer a {
  color: rgb(23, 23, 23);
  color: var(--body-color);
  font-weight: bold;
  padding-left: 4px
}

.crayons-header--search-brand-indicator {
  position: absolute;
  right: 8px;
  top: 3px;
  display: block;
  font-size: 13px;
  color: #717171;
  color: var(--base-60);
  background: rgb(255, 255, 255);
  background: var(--form-bg);
  padding-left: 3px
}

.crayons-header--search-brand-indicator svg {
  fill: #717171;
  fill: var(--base-60);
  height: 14px;
  width: 14px;
  vertical-align: -2px
}

@media (min-width: 640px) {
  .crayons-header__menu {
    perspective: 1000px
  }
}

.crayons-header__menu__dropdown {
  transform-style: preserve-3d;
  transform-origin: top right;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  transform: translateY(calc(1 * 0.25rem)) rotateX(-10deg);
  transform: var(--dropdown-transform, translateY(calc(1 * var(--su-1))) rotateX(-10deg));
  opacity: 0;
  opacity: var(--dropdown-opacity, 0);
  visibility: hidden;
  visibility: var(--dropdown-visibility, hidden)
}

.crayons-header__menu.showing {
  --dropdown-transform: translateY(0) rotateX(0);
  --dropdown-opacity: 1;
  --dropdown-visibility: visible
}

.navigation-progress {
  --duration: 3600ms;
  --delay: 250ms;
  position: fixed;
  top: 0;
  background: rgb(79, 70, 229);
  background: var(--accent-brand);
  z-index: 500;
  z-index: var(--z-popover);
  height: 0.25rem;
  height: var(--su-1);
  width: 0
}

.navigation-progress.showing {
  display: block;
  animation: showProgressBar var(--duration) ease-in-out;
  animation-delay: var(--delay);
  animation-fill-mode: forwards
}

@keyframes showProgressBar {
  0% {
    width: 0
  }

  100% {
    width: 100%
  }
}

.crayons-title,
.crayons-subtitle-1,
.crayons-subtitle-2,
.crayons-subtitle-3 {
  font-weight: 700;
  font-weight: var(--fw-bold);
  color: #242424;
  color: var(--base-90);
  line-height: 1.25;
  line-height: var(--lh-tight)
}

@media (min-width: 640px) {

  .crayons-title,
  .crayons-subtitle-1,
  .crayons-subtitle-2,
  .crayons-subtitle-3 {
    line-height: 1.5;
    line-height: var(--lh-base)
  }
}

.crayons-title {
  color: #090909;
  color: var(--base-100);
  font-size: 1.5rem;
  font-size: var(--fs-2xl);
  display: inline-flex;
  min-height: 40px;
  align-items: center
}

@media (min-width: 640px) {
  .crayons-title {
    font-size: 1.875rem;
    font-size: var(--fs-3xl)
  }
}

.crayons-subtitle-1 {
  font-size: 1.25rem;
  font-size: var(--fs-xl)
}

@media (min-width: 640px) {
  .crayons-subtitle-1 {
    font-size: 1.5rem;
    font-size: var(--fs-2xl)
  }
}

.crayons-subtitle-2 {
  font-size: 1.125rem;
  font-size: var(--fs-l)
}

@media (min-width: 640px) {
  .crayons-subtitle-2 {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }
}

.crayons-subtitle-3 {
  font-size: 1rem;
  font-size: var(--fs-base)
}

.c-indicator {
  --bg: var(--indicator-bg);
  --color: var(--indicator-color);
  padding: 0.25rem;
  padding: var(--su-1);
  text-align: center;
  line-height: 1;
  font-size: 0.875rem;
  font-size: var(--fs-s);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  display: inline-block;
  background: var(--bg);
  color: var(--color);
  min-width: 0.5rem;
  min-width: var(--su-2)
}

.c-indicator--success {
  --bg: var(--indicator-success-bg);
  --color: var(--indicator-success-color)
}

.c-indicator--warning {
  --bg: var(--indicator-warning-bg);
  --color: var(--indicator-warning-color)
}

.c-indicator--danger {
  --bg: var(--indicator-danger-bg);
  --color: var(--indicator-danger-color)
}

.c-indicator--info {
  --bg: var(--indicator-info-bg);
  --color: var(--indicator-info-color)
}

.c-indicator--relaxed {
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-indicator--subtle {
  --bg: var(--indicator-subtle-bg);
  --color: var(--indicator-subtle-color)
}

.c-indicator--round {
  border-radius: 0.75rem;
  border-radius: var(--radius-large)
}

.c-indicator:empty {
  display: none
}

.c-link {
  position: relative;
  display: inline-block;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
  outline: 0;
  text-decoration: none;
  color: var(--color);
  max-width: 100%
}

.c-link--block {
  display: flex;
  padding: 0.5rem 1rem;
  padding: var(--su-2) var(--su-4);
  overflow-wrap: normal;
  background-color: var(--bg)
}

.c-link--block:hover {
  background-color: var(--bg-hover)
}

.c-link:hover,
.js-focus-visible .c-link.focus-visible:focus {
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate);
  text-decoration: underline
}

.js-focus-visible .c-link.focus-visible:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring)
}

.js-focus-visible .c-link--block.focus-visible:focus {
  background-color: var(--bg-hover)
}

.c-link[aria-current='page'],
.c-link.c-link--current {
  --bg: var(--link-current-bg);
  --color: var(--link-current-color);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.c-link {
  --bg: var(--link-bg);
  --bg-hover: var(--link-bg-hover);
  --color: var(--link-color);
  --color-hover: var(--link-branded-color-hover)
}

.c-link--branded {
  --bg: var(--link-branded-bg);
  --bg-hover: var(--link-branded-bg-hover);
  --color: var(--link-branded-color);
  --color-hover: var(--link-branded-color-hover)
}

.c-link--icon-alone {
  padding: 0.5rem;
  padding: var(--su-2);
  display: inline-block
}

.c-link--icon-left .c-link__icon {
  margin-right: 0.25rem;
  margin-right: var(--su-1)
}

.c-link--icon-left.c-link--block .c-link__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.5rem * -1);
  margin-left: calc(var(--su-2) * -1)
}

.c-list-item {
  padding: 0.75rem;
  padding: var(--su-3);
  margin: 0 calc(0.75rem * -1);
  margin: 0 calc(var(--su-3) * -1);
  border-bottom: 1px solid rgb(229, 229, 229);
  border-bottom: 1px solid var(--divider)
}

.c-list-item:last-child {
  border-bottom: none
}

.c-list-item:not(.c-list-item--inactive):hover,
.c-list-item:not(.c-list-item--inactive):focus-visible,
.c-list-item:not(.c-list-item--inactive):focus-within {
  background: rgb(250, 250, 250);
  background: var(--list-item-bg-hover)
}

.crayons-scaffold {
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(23, 23, 23);
  background: var(--body-color);
  opacity: 0.025
}

.crayons-scaffold-loading {
  border-radius: 0.375rem;
  border-radius: var(--radius);
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0.05) 25%, rgba(255, 255, 255, 0.1) 40%);
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.025);
  background-size: 800px 104px;
  position: relative
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }

  100% {
    background-position: 468px 0
  }
}

.media-card {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  color: rgb(23, 23, 23);
  color: var(--card-color);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.media-card__artwork {
  position: relative
}

.media-card__artwork img {
  border-radius: Max(0px, Min(0.375rem, calc((100vw - 4px - 100%) * 9999))) / 0.375rem;
  border-radius: var(--radius-auto);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.media-card__artwork__badge {
  position: absolute;
  right: 0.5rem;
  right: var(--su-2);
  bottom: 0.5rem;
  bottom: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0.25rem;
  padding: var(--su-1);
  line-height: 1.25;
  line-height: var(--lh-tight);
  font-size: 0.875rem;
  font-size: var(--fs-s)
}

.media-card__content {
  padding: 1rem;
  padding: var(--su-4);
  line-height: 1.25;
  line-height: var(--lh-tight)
}

.media-card__content small {
  opacity: 0.6;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.media-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.media-card:hover small {
  opacity: 0.8
}

@media (min-width: 768px) {
  .media-card--all:nth-child(6) {
    display: none
  }
}

.crayons-modal {
  --modal-max-width: 640px;
  --modal-padding: var(--su-3);
  --modal-backdrop-pointer-events: none;
  --modal-border: none;
  --modal-header-border: 1px solid var(--divider);
  --modal-header-padding: var(--su-2) var(--su-2) var(--su-2) var(--modal-padding);
  --modal-alignment: unset;
  --modal-header-alignment: space-between;
  --modal-overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  z-index: var(--z-modal);
  pointer-events: none
}

@media (min-width: 640px) {
  .crayons-modal {
    --modal-padding: var(--su-4)
  }
}

@media (min-width: 768px) {
  .crayons-modal {
    --modal-padding: var(--su-7)
  }
}

.crayons-modal--bg-dismissible {
  --modal-backdrop-pointer-events: auto
}

.crayons-modal--prompt {
  --modal-header-border: none;
  --modal-header-padding: var(--modal-padding) var(--su-8) 0 var(--modal-padding);
  --modal-body-margin: 0
}

@media (min-width: 768px) {
  .crayons-modal--prompt {
    --modal-body-margin: calc((var(--modal-padding) * -1) + var(--su-4))
  }
}

.crayons-modal--prompt .crayons-modal__dismiss {
  position: absolute;
  right: 0.5rem;
  right: var(--su-2);
  top: 0.5rem;
  top: var(--su-2)
}

.crayons-modal--centered {
  --modal-header-padding: var(--su-7) var(--su-8) 0 var(--su-8);
  --modal-alignment: center;
  --modal-header-alignment: center
}

.crayons-modal--danger {
  --modal-border: 4px solid var(--modal-danger-border-color)
}

.crayons-modal__backdrop {
  background: rgba(0, 0, 0, 0.6);
  background: var(--modal-backdrop);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: auto
}

.crayons-modal__box {
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: var(--modal-max-width);
  background: rgb(255, 255, 255);
  background: var(--modal-bg);
  z-index: 1;
  z-index: var(--z-elevate);
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: var(--modal-overflow);
  position: relative;
  pointer-events: auto;
  border-radius: Max(0px,
      Min(0.75rem, calc((100vw - 4px - 100%) * 9999))) / 0.75rem;
  border-radius: var(--radius-large-auto);
  border: var(--modal-border);
  text-align: var(--modal-alignment);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-2)
}

@media (min-width: 640px) {
  .crayons-modal__box {
    max-height: calc(100% - 1.5rem);
    max-height: calc(100% - var(--su-6));
    height: auto;
    width: 90%
  }
}

.crayons-modal__box__header {
  border-bottom: var(--modal-header-border);
  padding: var(--modal-header-padding);
  flex-shrink: 0;
  display: flex;
  justify-content: var(--modal-header-alignment);
  align-items: center
}

.crayons-modal__box__body {
  padding: var(--modal-padding);
  margin-top: var(--modal-body-margin);
  max-height: 100%;
  overflow-y: auto;
  grid-auto-rows: min-content
}

.crayons-modal__box__body--no-padding {
  padding: 0
}

@media (min-width: 640px) {
  .crayons-modal--small {
    --modal-max-width: 480px
  }
}

@media (min-width: 768px) {
  .crayons-modal--large {
    --modal-max-width: 768px
  }
}

.crayons-modal--sheet {
  height: 100%
}

.crayons-modal--sheet .crayons-modal__box {
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  grid-template-rows: 1fr
}

.crayons-modal--sheet.crayons-modal--left .crayons-modal__box {
  position: absolute;
  left: 0
}

.crayons-modal--sheet.crayons-modal--right .crayons-modal__box {
  position: absolute;
  right: 0
}

.crayons-modal--overflow-visible {
  --modal-overflow: visible
}

@media (min-width: 640px) {
  .crayons-modal--prompt {
    --modal-max-width: 480px
  }
}

.cookie-consent-modal {
  background: white;
  position: fixed;
  padding: 1.25rem;
  padding: var(--su-5);
  bottom: 0.5rem;
  bottom: var(--su-2);
  left: 0.75rem;
  left: var(--su-3);
  right: 0.75rem;
  right: var(--su-3);
  margin: 0 auto;
  max-width: 700px;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-2);
  text-align: center;
  z-index: 500;
  z-index: var(--z-modal)
}

.cookie-consent-modal p {
  font-size: 1rem;
  font-size: var(--fs-base);
  color: var(--text-color);
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2)
}

.cookie-consent-modal .cookie-consent-modal__actions button {
  font-size: 1rem;
  font-size: var(--fs-base);
  margin: 0.5rem;
  margin: var(--su-2)
}

.subforem-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center
}

.subforem-modal.hidden {
  display: none
}

.subforem-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px)
}

.subforem-modal__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 0.5rem
}

.subforem-modal__box {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(23, 23, 23, 0.1);
  border: 1px solid var(--card-border);
  overflow: hidden;
  animation: subforem-modal-slide-in 0.15s ease-out
}

.subforem-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(23, 23, 23, 0.1);
  border-bottom: 1px solid var(--card-border)
}

.subforem-modal__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(23, 23, 23);
  color: var(--card-color);
  margin: 0
}

.subforem-modal__close {
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  color: #717171;
  color: var(--base-60);
  transition: all 0.2s ease
}

.subforem-modal__close:hover {
  background-color: #efefef;
  background-color: var(--base-10);
  color: #3d3d3d;
  color: var(--base-80)
}

.subforem-modal__body {
  padding: 1rem 1.5rem 1.5rem
}

.subforem-modal__description {
  color: #575757;
  color: var(--base-70);
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5
}

.subforem-modal__options {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem
}

.subforem-modal__option {
  background: none;
  border: 1px solid #d6d6d7;
  border: 1px solid var(--base-20);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
  width: 100%;
  text-decoration: none;
  display: block
}

.subforem-modal__option:hover {
  border-color: #bdbdbd;
  border-color: var(--base-30);
  background-color: var(--base-5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-decoration: none
}

.subforem-modal__option:active {
  transform: translateY(0)
}

.subforem-modal__option-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem
}

.subforem-modal__option-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1
}

.subforem-modal__option-logo {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  -o-object-fit: cover;
  object-fit: cover;
  flex-shrink: 0
}

.subforem-modal__option-text {
  flex: 1 1;
  min-width: 0
}

.subforem-modal__option-name {
  font-weight: 500;
  color: rgb(23, 23, 23);
  color: var(--card-color);
  margin-bottom: 0.25rem;
  font-size: 0.95rem
}

.subforem-modal__option-description {
  color: #717171;
  color: var(--base-60);
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.subforem-modal__option-arrow {
  color: #717171;
  color: var(--base-60);
  flex-shrink: 0;
  margin-left: 0.5rem
}

@media (max-width: 640px) {
  .subforem-modal__container {
    margin: 0 0.5rem
  }

  .subforem-modal__header {
    padding: 1rem 1rem 0.75rem
  }

  .subforem-modal__body {
    padding: 0.75rem 1rem 1rem
  }

  .subforem-modal__option-content {
    padding: 0.75rem
  }

  .subforem-modal__option-left {
    gap: 0.5rem
  }

  .subforem-modal__option-logo {
    width: 1.75rem;
    height: 1.75rem
  }
}

@keyframes subforem-modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.post-options-modal .crayons-modal__box__header {
  padding-left: 0.75rem;
  padding-left: var(--su-3)
}

@media (min-width: 640px) {
  .post-options-modal .crayons-modal__box__header {
    padding-left: 1rem;
    padding-left: var(--su-4)
  }
}

.post-options-modal .crayons-modal__box__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.post-options-modal__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 85vh;
  overflow: hidden
}

.post-options-modal__content {
  flex: 1 1;
  overflow-y: auto;
  padding: 0.75rem;
  padding: var(--su-3);
  padding-bottom: 1.5rem;
  padding-bottom: var(--su-6)
}

@media (min-width: 640px) {
  .post-options-modal__content {
    padding: 1rem;
    padding: var(--su-4);
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }
}

.post-options-modal__footer {
  flex-shrink: 0;
  padding: 0.75rem;
  padding: var(--su-3);
  padding-top: 0.75rem;
  padding-top: var(--su-3);
  border-top: 1px solid rgb(229, 229, 229);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: flex-end;
  background: rgb(255, 255, 255);
  background: var(--modal-bg)
}

@media (min-width: 640px) {
  .post-options-modal__footer {
    padding: 1rem;
    padding: var(--su-4);
    padding-top: 1rem;
    padding-top: var(--su-4)
  }
}

.post-options-modal .crayons-field__label--small {
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-weight: 500;
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

.post-options-modal .post-options-scheduling--active {
  padding: 1rem;
  padding: var(--su-4);
  border: 2px solid rgb(79, 70, 229);
  border: 2px solid var(--accent-brand);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: var(--accent-brand-bg)
}

.post-options-modal .post-options-series--active {
  padding: 1rem;
  padding: var(--su-4);
  border: 2px solid rgb(79, 70, 229);
  border: 2px solid var(--accent-brand);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: var(--accent-brand-bg)
}

.series-selector__existing {
  margin-bottom: 1.5rem;
  margin-bottom: var(--su-6)
}

.series-selector__series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  grid-gap: 0.75rem;
  grid-gap: var(--su-3);
  gap: var(--su-3);
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

@media (max-width: 640px) {
  .series-selector__series-grid {
    grid-template-columns: 1fr
  }
}

.series-selector__series-card {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  border: 2px solid #d6d6d7;
  border: 2px solid var(--base-20);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  padding: 1rem;
  padding: var(--su-4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  position: relative
}

.series-selector__series-card:hover {
  border-color: rgb(79, 70, 229);
  border-color: var(--accent-brand);
  background: var(--base-5);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px)
}

.series-selector__series-card:active {
  transform: translateY(0)
}

.series-selector__series-card--selected {
  border-color: rgb(79, 70, 229);
  border-color: var(--accent-brand);
  background: var(--accent-brand-bg);
  box-shadow: 0 0 0 3px var(--accent-brand-a10)
}

.series-selector__series-card--selected:hover {
  border-color: rgb(67, 56, 202);
  border-color: var(--accent-brand-darker)
}

.series-selector__series-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--su-2);
  flex: 1 1
}

.series-selector__series-name {
  font-weight: 600;
  color: rgb(23, 23, 23);
  color: var(--card-color);
  font-size: 1rem;
  font-size: var(--fs-base);
  word-break: break-word
}

.series-selector__series-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-weight: 500;
  background: #efefef;
  background: var(--base-10);
  color: #575757;
  color: var(--base-70);
  align-self: flex-start
}

.series-selector__series-badge--personal {
  background: var(--accent-brand-bg);
  color: rgb(79, 70, 229);
  color: var(--accent-brand)
}

.series-selector__create-section {
  padding: 1rem;
  padding: var(--su-4);
  background: var(--base-5);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border: 2px dashed #bdbdbd;
  border: 2px dashed var(--base-30);
  text-align: center;
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

.series-selector__create-btn {
  width: 100%;
  max-width: 300px;
  margin: 0 auto
}

.series-selector__create-form {
  padding: 0.5rem 0;
  padding: var(--su-2) 0
}

.series-selector__current {
  border-top: 1px solid rgb(229, 229, 229);
  border-top: 1px solid var(--divider);
  padding-top: 1rem;
  padding-top: var(--su-4);
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.series-selector-modal__content {
  max-height: 70vh;
  overflow-y: auto
}

.crayons-btn,
input[type='file']::file-selector-button {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;
  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;
  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;
  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;
  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;
  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;
  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
  --brand-mlh-bg: #F04037;
  --brand-mlh-color: #fff;
  --brand-mlh-bg-hover: #D01007
}

.crayons-btn,
input[type='file']::file-selector-button {
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);
  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.5rem;
  line-height: var(--su-6);
  font-weight: 500;
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);
  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .crayons-btn.focus-visible:focus,
.js-focus-visible input.focus-visible[type='file']:focus::file-selector-button,
.crayons-btn:is(label):focus-within,
input[type='file']:is(label):focus-within::file-selector-button {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.crayons-btn[href]:hover,
input[href][type='file']:hover::file-selector-button,
.crayons-btn[href]:focus,
input[href][type='file']:focus::file-selector-button,
.crayons-btn:hover:enabled,
input[type='file']:hover:enabled::file-selector-button,
.crayons-btn:active:enabled,
input[type='file']:active:enabled::file-selector-button {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.crayons-btn.crayons-btn--inverted,
input.crayons-btn--inverted[type='file']::file-selector-button {
  --bg: var(--bg-inverted);
  --bg-hover: var(--bg-inverted-hover);
  --border: var(--border-inverted);
  --border-hover: var(--border-inverted-hover);
  --color: var(--color-inverted);
  --color-hover: var(--color-inverted-hover)
}

.crayons-btn[disabled],
input[disabled][type='file']::file-selector-button {
  opacity: 0.6;
  cursor: not-allowed
}

.crayons-btn--s {
  --vertical-padding: var(--su-1);
  --horizontal-padding: var(--su-3);
  --font-size: var(--fs-s);
  --with-icon-padding: var(--su-2);
  --icon-margin: var(--su-1);
  font-weight: normal
}

.crayons-btn--l {
  --vertical-padding: var(--su-3);
  --horizontal-padding: var(--su-5);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2)
}

.crayons-btn--xl {
  --vertical-padding: var(--su-4);
  --horizontal-padding: var(--su-6);
  --font-size: var(--fs-l);
  --with-icon-padding: var(--su-5);
  --icon-margin: var(--su-3)
}

.crayons-btn>*,
input[type='file']::file-selector-button>* {
  pointer-events: none
}

.crayons-btn>*+input,
input[type='file']::file-selector-button>*+input {
  pointer-events: revert
}

.crayons-btn--secondary,
input[type='file']::file-selector-button {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover)
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);
  --border-width: 1px
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted)
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover)
}

.crayons-btn--ghost-brand {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-brand);
  --color-hover: var(--accent-brand-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-dimmed {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-dimmed-color);
  --color-hover: var(--button-ghost-dimmed-color-hover);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--ghost-success {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-success);
  --color-hover: var(--accent-success-darker);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--accent-success);
  --color-inverted-hover: var(--accent-success-darker)
}

.crayons-btn--ghost-danger {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--accent-danger);
  --color-hover: var(--accent-danger-darker);
  --shadow: none;
  --shadow-hover: none
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color)
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color)
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color)
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color)
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color)
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color)
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color)
}

.crayons-btn--brand-mlh {
  --bg: var(--brand-mlh-bg);
  --bg-hover: var(--brand-mlh-bg-hover);
  --color: var(--brand-mlh-color);
  --color-hover: var(--brand-mlh-color);
  --bg-inverted: var(--brand-mlh-bg);
  --bg-inverted-hover: var(--brand-mlh-bg-hover);
  --color-inverted: var(--brand-mlh-color);
  --color-inverted-hover: var(--brand-mlh-color)
}

.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width))
}

.crayons-btn--icon.crayons-btn--s,
.crayons-btn--icon-rounded.crayons-btn--s {
  --horizontal-padding: var(--su-1)
}

.crayons-btn--icon.crayons-btn--l,
.crayons-btn--icon-rounded.crayons-btn--l {
  --horizontal-padding: var(--su-3)
}

.crayons-btn--icon.crayons-btn--xl,
.crayons-btn--icon-rounded.crayons-btn--xl {
  --horizontal-padding: var(--su-4)
}

.crayons-btn--icon-rounded {
  border-radius: 1000px
}

.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-left .crayons-icon {
  margin-right: var(--icon-margin)
}

.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width))
}

.crayons-btn--icon-right .crayons-icon {
  margin-left: var(--icon-margin)
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap))
}

.crayons-btn-actions .crayons-btn,
.crayons-btn-actions input[type='file']::file-selector-button {
  margin-left: var(--btn-wrap-gap);
  margin-bottom: var(--btn-wrap-gap)
}

.crayons-btn-group {
  display: flex
}

.crayons-btn-group .crayons-btn,
.crayons-btn-group input[type='file']::file-selector-button {
  border-radius: 0
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined),
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined)::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined)::file-selector-button {
  box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
  margin-left: -1px
}

.crayons-btn-group .crayons-btn+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn:not(.crayons-btn--outlined):hover,
.crayons-btn-group .crayons-btn+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button,
.crayons-btn-group input[type='file']::file-selector-button+input[type='file']:not(.crayons-btn--outlined):hover::file-selector-button {
  box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1)
}

.crayons-btn-group .crayons-btn+.crayons-btn--outlined,
.crayons-btn-group input[type='file']::file-selector-button+.crayons-btn--outlined {
  margin-left: calc(-1 * var(--border-width))
}

.crayons-btn-group .crayons-btn:first-child,
.crayons-btn-group input[type='file']:first-child::file-selector-button {
  border-top-left-radius: 0.375rem;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius)
}

.crayons-btn-group .crayons-btn:last-child,
.crayons-btn-group input[type='file']:last-child::file-selector-button {
  border-top-right-radius: 0.375rem;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius)
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  padding: var(--su-2) var(--su-4);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color)
}

.c-btn:hover:enabled,
.c-date-picker .DateRangePickerInput_calendarIcon:hover:enabled,
.c-date-picker .DateRangePickerInput_clearDates:hover:enabled,
.c-date-picker .DayPickerNavigation_button:hover:enabled,
.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  background-color: var(--bg-hover);
  color: var(--color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.js-focus-visible .c-btn.focus-visible:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_calendarIcon:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_calendarIcon:focus,
.js-focus-visible .c-date-picker .focus-visible.DateRangePickerInput_clearDates:focus,
.c-date-picker .js-focus-visible .focus-visible.DateRangePickerInput_clearDates:focus,
.js-focus-visible .c-date-picker .focus-visible.DayPickerNavigation_button:focus,
.c-date-picker .js-focus-visible .focus-visible.DayPickerNavigation_button:focus,
.c-btn:is(label):focus-within,
.c-date-picker .DateRangePickerInput_calendarIcon:is(label):focus-within,
.c-date-picker .DateRangePickerInput_clearDates:is(label):focus-within,
.c-date-picker .DayPickerNavigation_button:is(label):focus-within {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-btn[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-expanded='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-expanded='true'],
.c-date-picker .DayPickerNavigation_button[aria-expanded='true'],
.c-btn[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_calendarIcon[aria-pressed='true'],
.c-date-picker .DateRangePickerInput_clearDates[aria-pressed='true'],
.c-date-picker .DayPickerNavigation_button[aria-pressed='true'] {
  --bg: var(--btn-current-bg);
  --color: var(--btn-current-color);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.c-btn[disabled],
.c-date-picker .DateRangePickerInput_calendarIcon[disabled],
.c-date-picker .DateRangePickerInput_clearDates[disabled],
.c-date-picker .DayPickerNavigation_button[disabled] {
  opacity: 0.6;
  cursor: not-allowed
}

.c-btn>*,
.c-date-picker .DateRangePickerInput_calendarIcon>*,
.c-date-picker .DateRangePickerInput_clearDates>*,
.c-date-picker .DayPickerNavigation_button>* {
  pointer-events: none
}

.c-btn>*+input,
.c-date-picker .DateRangePickerInput_calendarIcon>*+input,
.c-date-picker .DateRangePickerInput_clearDates>*+input,
.c-date-picker .DayPickerNavigation_button>*+input {
  pointer-events: revert
}

.c-btn,
.c-date-picker .DateRangePickerInput_calendarIcon,
.c-date-picker .DateRangePickerInput_clearDates,
.c-date-picker .DayPickerNavigation_button {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover)
}

.c-btn.c-btn--destructive,
.c-date-picker .c-btn--destructive.DateRangePickerInput_calendarIcon,
.c-date-picker .c-btn--destructive.DateRangePickerInput_clearDates,
.c-date-picker .c-btn--destructive.DayPickerNavigation_button {
  --bg: var(--btn-destructive-bg);
  --bg-hover: var(--btn-destructive-bg-hover);
  --color: var(--btn-destructive-color);
  --color-hover: var(--btn-destructive-color-hover)
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.c-btn--primary.c-btn--destructive {
  --bg: var(--btn-primary-destructive-bg);
  --bg-hover: var(--btn-primary-destructive-bg-hover);
  --color: var(--btn-primary-destructive-color);
  --color-hover: var(--btn-primary-destructive-color-hover)
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover)
}

.c-btn--icon-alone {
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-btn--icon-left .c-btn__icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.crayons-textfield,
.crayons-checkbox,
.crayons-radio,
.crayons-select,
.c-date-picker .DateRangePickerInput {
  --border-width: 1.5px;
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-textfield:hover,
.crayons-checkbox:hover,
.crayons-radio:hover,
.crayons-select:hover,
.c-date-picker .DateRangePickerInput:hover {
  border-color: rgb(212, 212, 212);
  border-color: var(--form-border-hover)
}

.c-input--multi__wrapper-border:focus-within,
.crayons-textfield:focus,
.crayons-select:focus,
.c-date-picker .DateRangePickerInput:focus,
.c-autocomplete--multi__wrapper-border:focus-within {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--focus);
  box-shadow: 0 0 0 1px rgb(79, 70, 229);
  box-shadow: 0 0 0 1px var(--focus)
}

.crayons-textfield--disabled,
.crayons-textfield[disabled],
.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled],
.crayons-checkbox--checked--disabled,
.crayons-checkbox--checked[disabled],
.crayons-checkbox:checked--disabled,
.crayons-radio--checked--disabled,
.crayons-radio--checked[disabled],
.crayons-radio:checked--disabled,
.crayons-select--disabled,
.crayons-select[disabled],
.c-date-picker .DateRangePickerInput[disabled] {
  opacity: 0.6
}

.crayons-checkbox--checked,
.crayons-checkbox:checked,
.crayons-radio--checked,
.crayons-radio:checked {
  background-color: rgb(79, 70, 229);
  background-color: var(--form-border-focus);
  border-color: rgb(79, 70, 229);
  border-color: var(--form-border-focus);
  color: rgb(255, 255, 255);
  color: var(--form-bg-focus);
  background-position: center center;
  background-repeat: no-repeat
}

.crayons-textfield,
.c-date-picker .DateRangePickerInput {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  resize: vertical
}

.crayons-textfield::-moz-placeholder,
.c-date-picker .DateRangePickerInput::-moz-placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::placeholder,
.c-date-picker .DateRangePickerInput::placeholder {
  color: rgb(82, 82, 82);
  color: var(--form-placeholder-color)
}

.crayons-textfield::-ms-clear,
.c-date-picker .DateRangePickerInput::-ms-clear {
  display: none
}

.crayons-textfield::-webkit-date-and-time-value,
.c-date-picker .DateRangePickerInput::-webkit-date-and-time-value {
  min-height: 1.5em
}

.crayons-textfield--icon {
  padding-left: 2rem;
  padding-left: var(--su-7)
}

.crayons-checkbox,
.crayons-radio {
  width: 1.125em;
  height: 1.125em;
  cursor: pointer;
  background-position: center center;
  vertical-align: middle;
  flex-shrink: 0
}

.crayons-checkbox--disabled,
.crayons-checkbox[disabled],
.crayons-radio--disabled,
.crayons-radio[disabled] {
  cursor: not-allowed
}

.crayons-checkbox--checked,
.crayons-checkbox:checked,
.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.157.933a.75.75 0 01.077 1.058L4.817 9.407a.75.75 0 01-1.134 0L.766 6.037a.75.75 0 011.135-.982L4.25 7.77l5.85-6.76a.75.75 0 011.057-.077z' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-radio {
  border-radius: 50%
}

.crayons-radio--checked,
.crayons-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E")
}

.crayons-select {
  line-height: 1.5;
  line-height: var(--lh-base);
  padding: calc(0.5em - var(--border-width)) 0.5em;
  padding-right: 2rem;
  padding-right: var(--su-7);
  font-family: inherit;
  font-size: 1rem;
  font-size: var(--fs-base);
  width: 100%;
  position: relative;
  outline: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
  background-image: var(--select-icon);
  background-position: calc(100% - 0.5rem) calc(50% - 1px);
  background-position: calc(100% - var(--su-2)) calc(50% - 1px);
  background-repeat: no-repeat
}

.crayons-select::-ms-clear {
  display: none
}

.crayons-select.disabled {
  background-color: #f2f2f2;
  color: #888888;
  pointer-events: none;
  cursor: not-allowed
}

.crayons-field {
  display: flex;
  flex-flow: column;
  font-size: 1rem;
  font-size: var(--fs-base)
}

.crayons-field__label {
  color: rgb(23, 23, 23);
  color: var(--label-primary);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.crayons-field__label+.crayons-field__description {
  margin-top: 0
}

.crayons-field__label.required:after {
  content: '*'
}

.crayons-field__required {
  color: rgb(220, 38, 38);
  color: var(--accent-danger);
  padding: 0 0.25rem;
  padding: 0 var(--su-1);
  display: inline-block
}

.crayons-field__description {
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-weight: 400;
  font-weight: var(--fw-normal);
  margin: 0
}

.crayons-field__addon {
  display: flex;
  align-items: center;
  padding: calc(0.5em - var(--border-width)) 0.5em;
  background-color: rgb(246, 246, 246);
  background-color: var(--body-bg);
  border: var(--border-width) solid rgb(229, 229, 229);
  border: var(--border-width) solid var(--form-border);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: rgb(82, 82, 82);
  color: var(--label-secondary);
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  white-space: nowrap
}

.crayons-field>*+* {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.crayons-field--checkbox,
.crayons-field--radio {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  grid-gap: 0.5rem;
  grid-gap: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

.crayons-field--checkbox:hover,
.crayons-field--radio:hover {
  background: rgb(246, 246, 246);
  background: var(--body-bg);
  box-shadow: 0 0 0 0.25rem rgb(246, 246, 246);
  box-shadow: 0 0 0 var(--su-1) var(--body-bg)
}

.crayons-field--checkbox .crayons-field__label,
.crayons-field--radio .crayons-field__label {
  margin-top: 0;
  padding-right: 0.5rem;
  padding-right: var(--su-2)
}

.crayons-field .crayons-checkbox,
.crayons-field .crayons-radio {
  margin: 0.1875em;
  justify-self: center
}

.crayons-fields {
  display: flex;
  flex-flow: column
}

.crayons-fields:not(.crayons-fields--horizontal)>.crayons-field+.crayons-field {
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.crayons-fields--horizontal {
  flex-flow: row;
  flex-wrap: wrap
}

.crayons-fields--horizontal>.crayons-field:not(:last-child) {
  margin-right: 1rem;
  margin-right: var(--su-4)
}

.crayons-textfield--ghost,
.crayons-textfield--ghost:hover,
.crayons-textfield--ghost:focus,
.crayons-textfield--ghost[disabled] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  width: 100%;
  box-shadow: none;
  resize: none;
  transition: none
}


.c-color-picker {
  --swatch-width: var(--su-7);
  --swatch-height: var(--su-7);
  --input-padding-left: calc(var(--swatch-width) + var(--su-3))
}

.c-color-picker__input {
  padding-left: var(--input-padding-left)
}

.c-color-picker__swatch {
  width: var(--swatch-width);
  height: var(--swatch-height);
  border: 1px solid rgb(0, 0, 0, 0.2);
  border: 1px solid var(--swatch-border-color);
  top: 0.25rem;
  top: var(--su-1);
  left: 0.25rem;
  left: var(--su-1);
  z-index: 1;
  z-index: var(--z-elevate)
}

.c-color-picker__clear {
  right: 0.25rem;
  right: var(--su-1);
  bottom: 0.5rem;
  bottom: var(--su-2);
  z-index: 1;
  z-index: var(--z-elevate);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: #575757;
  color: var(--base-70);
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2);
  line-height: 1
}

.c-color-picker__clear:hover {
  color: #242424;
  color: var(--base-90)
}

.c-color-picker__popover {
  min-width: -moz-min-content;
  min-width: min-content
}

.c-color-picker__popover .react-colorful {
  padding: 0.5rem;
  padding: var(--su-2);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-1);
  width: 220px;
  height: 160px
}

.c-color-picker__popover .react-colorful__pointer {
  cursor: pointer
}

.c-color-picker__popover .react-colorful__saturation {
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--su-2) 0;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__saturation-pointer {
  width: 0.875rem;
  width: var(--fs-s);
  height: 0.875rem;
  height: var(--fs-s);
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 50%
}

.c-color-picker__popover .react-colorful__hue {
  height: 0.75rem;
  height: var(--fs-xs);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-color-picker__popover .react-colorful__hue-pointer {
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid var(--card-bg);
  border-radius: 1px;
  width: 0.875rem;
  width: var(--fs-s);
  height: calc(100% + 8px)
}

.c-date-picker .DateRangePickerInput {
  padding: 0.25rem 0.5rem;
  padding: var(--su-1) var(--su-2)
}

.c-date-picker .DateRangePickerInput_calendarIcon {
  padding: 0
}

.c-date-picker .DateRangePickerInput .DateInput_input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  font-size: 1rem;
  font-size: var(--fs-base)
}

.c-date-picker .DateRangePickerInput .DateInput_input__focused {
  border-bottom-color: rgb(79, 70, 229);
  border-bottom-color: var(--focus)
}

.c-date-picker .DateRangePickerInput_arrow_svg {
  fill: rgb(23, 23, 23);
  fill: var(--body-color)
}

.c-date-picker .DateRangePickerInput_clearDates {
  position: absolute;
  padding: 0.5rem;
  padding: var(--su-2)
}

.c-date-picker .DateRangePickerInput_clearDates:hover,
.c-date-picker .DateRangePickerInput_clearDates:focus-visible {
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.c-date-picker--error .DateRangePickerInput {
  border-color: rgb(220, 38, 38);
  border-color: var(--accent-danger)
}

.c-date-picker .DateRangePicker:focus-within .DateRangePickerInput {
  border-color: rgb(79, 70, 229);
  border-color: var(--focus)
}

.c-date-picker .CalendarDay {
  border-color: #efefef;
  border-color: var(--date-border-color)
}

.c-date-picker .CalendarDay__default:hover {
  background-color: transparent;
  position: relative
}

.c-date-picker .CalendarDay__default:hover::after {
  border: 1px solid rgb(79, 70, 229);
  border: 1px solid var(--hover-date-border-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ''
}

.c-date-picker .CalendarDay__today {
  color: rgb(79, 70, 229);
  color: var(--current-date-color)
}

.c-date-picker .CalendarDay__selected_span {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected_span:active,
.c-date-picker .CalendarDay__selected_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: 1rem;
  color: var(--fs-base);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__selected {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color)
}

.c-date-picker .CalendarDay__selected:hover {
  background: rgb(79, 70, 229);
  background: var(--selected-date-bg);
  color: #f9f9f9;
  color: var(--selected-date-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarDay__hovered_span,
.c-date-picker .CalendarDay__hovered_span:hover {
  background: rgb(238, 242, 255);
  background: var(--selected-range-bg);
  color: rgb(23, 23, 23);
  color: var(--selected-range-color);
  border-color: rgb(224, 231, 255);
  border-color: var(--selected-date-border)
}

.c-date-picker .CalendarMonthGrid__vertical {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .c-date-picker__month {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.c-date-picker .CalendarMonthGrid__vertical .CalendarMonth_caption {
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2);
  padding-top: 0.75rem;
  padding-top: var(--su-3)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset::before {
  border-right-color: rgb(79, 70, 229);
  border-right-color: var(--accent-brand)
}

.c-date-picker .DayPickerKeyboardShortcuts_buttonReset:hover::before {
  border-right-color: rgb(99, 102, 241);
  border-right-color: var(--accent-brand-lighter)
}

.c-date-picker .DayPickerNavigation {
  display: flex;
  justify-content: space-between
}

.c-date-picker .DayPickerNavigation_button {
  margin: 1.5rem 0.75rem 0 0.75rem;
  margin: var(--su-6) var(--su-3) 0 var(--su-3);
  height: -moz-min-content;
  height: min-content;
  padding: 0.25rem;
  padding: var(--su-1)
}

.c-date-picker .DayPickerNavigation_button:hover,
.c-date-picker .DayPickerNavigation_button:focus {
  background-color: var(--bg-hover)
}

.c-date-picker .DayPickerNavigation_button__disabled {
  opacity: 0.2;
  cursor: not-allowed
}

.c-date-picker__errors {
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.c-input--multi__wrapper-border:focus-within .c-input--multi__input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg-focus)
}

.c-input--multi__input {
  background-color: var(--bg-color);
  color: rgb(23, 23, 23);
  color: var(--body-color);
  border: none
}

.c-input--multi__wrapper-border .c-input--multi__input {
  background-color: rgb(255, 255, 255);
  background-color: var(--form-bg)
}

.c-btn.c-input--multi__selected:first-child,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:first-child,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:first-child,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #efefef;
  border: 1px solid var(--base-10);
  border-right: none;
  color: #242424;
  color: var(--base-90)
}

.c-btn.c-input--multi__selected:last-child,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:last-child,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:last-child,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid #efefef;
  border: 1px solid var(--base-10);
  border-left: none
}

.c-btn.c-input--multi__selected:first-child:hover,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:first-child:hover,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:first-child:hover,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:first-child:hover,
.c-btn.c-input--multi__selected:first-child:focus-visible,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:first-child:focus-visible,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:first-child:focus-visible,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:first-child:focus-visible {
  background: none;
  color: none
}

.c-btn.c-input--multi__selected:last-child:hover,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:last-child:hover,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:last-child:hover,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:last-child:hover,
.c-btn.c-input--multi__selected:last-child:focus-visible,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_calendarIcon:last-child:focus-visible,
.c-date-picker .c-input--multi__selected.DateRangePickerInput_clearDates:last-child:focus-visible,
.c-date-picker .c-input--multi__selected.DayPickerNavigation_button:last-child:focus-visible {
  background: none;
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.c-btn.c-input--multi__selected-invalid:first-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:first-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:first-child,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:first-child,
.c-btn.c-input--multi__selected-invalid:last-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:last-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:last-child,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:last-child {
  background-color: rgba(220, 38, 38, 0.1);
  background-color: var(--accent-danger-a10);
  color: rgb(220, 38, 38);
  color: var(--accent-danger);
  border: 1px solid rgb(220, 38, 38);
  border: 1px solid var(--accent-danger)
}

.c-btn.c-input--multi__selected-invalid:first-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:first-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:first-child,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:first-child {
  border-right: none
}

.c-btn.c-input--multi__selected-invalid:last-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:last-child,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:last-child,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:last-child {
  border-left: none
}

.c-btn.c-input--multi__selected-invalid:first-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:first-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:first-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:first-child:hover,
.c-btn.c-input--multi__selected-invalid:first-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:first-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:first-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:first-child:focus-visible,
.c-btn.c-input--multi__selected-invalid:last-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:last-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:last-child:hover,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:last-child:hover,
.c-btn.c-input--multi__selected-invalid:last-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_calendarIcon:last-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DateRangePickerInput_clearDates:last-child:focus-visible,
.c-date-picker .c-input--multi__selected-invalid.DayPickerNavigation_button:last-child:focus-visible {
  background-color: rgba(220, 38, 38, 0.1);
  background-color: var(--accent-danger-a10);
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.crayons-link {
  color: rgb(64, 64, 64);
  color: var(--link-color)
}

.crayons-link:hover {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.crayons-link--brand {
  color: rgb(79, 70, 229);
  color: var(--link-branded-color)
}

.crayons-link--brand:hover {
  color: rgb(67, 56, 202);
  color: var(--link-branded-color-hover)
}

.crayons-link--secondary {
  color: #717171;
  color: var(--link-color-secondary)
}

.crayons-link--secondary:hover {
  color: #575757;
  color: var(--link-color-secondary-hover)
}

.crayons-link--current {
  font-weight: 500;
  font-weight: var(--fw-medium);
  color: #090909;
  color: var(--link-color-current);
  background: rgb(255, 255, 255);
  background: var(--link-bg-current)
}

.crayons-link--block {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  padding: var(--su-3);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: background cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms, color cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: background var(--transition-props), color var(--transition-props)
}

.crayons-link--block:hover:not(.crayons-link--current) {
  background: rgba(79, 70, 229, 0.1);
  background: var(--link-bg-hover)
}

@media (min-width: 640px) {
  .crayons-link--block {
    padding: 0.5rem;
    padding: var(--su-2)
  }
}

.crayons-link--block .crayons-icon {
  margin-right: 0.5rem;
  margin-right: var(--su-2);
  vertical-align: middle;
  width: 1.5rem;
  width: var(--su-6);
  height: 1.5rem;
  height: var(--su-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-size: var(--fs-xl)
}

.crayons-link--block .c-indicator {
  margin-left: auto
}

.crayons-link--block .c-indicator:empty {
  display: none
}

.crayons-link--block--indented {
  padding-left: calc(0.5rem + 2rem);
  padding-left: calc(var(--su-2) + var(--su-7))
}

.crayons-link--contentful {
  display: block;
  padding: 1rem;
  padding: var(--su-4);
  border-bottom: 1px solid rgb(246, 246, 246);
  border-bottom: 1px solid var(--body-bg)
}

.crayons-link--contentful:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 0.375rem;
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius)
}

.crayons-link--contentful .crayons-link__secondary {
  color: #717171;
  color: var(--link-color-secondary);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  padding-top: 0.25rem;
  padding-top: var(--su-1)
}

.crayons-link--contentful:hover {
  background: rgb(255, 255, 255);
  background: var(--link-bg-hover-alt)
}

.crayons-link--contentful:hover .crayons-link__secondary {
  color: #575757;
  color: var(--link-color-secondary-hover)
}

.crayons-notice {
  padding: 1rem;
  padding: var(--su-4);
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  color: rgb(23, 23, 23);
  color: var(--card-color);
  border-radius: Max(0px, Min(0.375rem, calc((100vw - 4px - 100%) * 9999))) / 0.375rem;
  border-radius: var(--radius-auto)
}

.crayons-notice--danger {
  background: rgba(220, 38, 38, 0.1);
  background: var(--accent-danger-a10)
}

.crayons-notice--warning {
  background: rgba(245, 158, 11, 0.1);
  background: var(--accent-warning-a10)
}

.crayons-notice--success {
  background: rgba(5, 150, 105, 0.1);
  background: var(--accent-success-a10)
}

.crayons-notice--info {
  background: rgba(var(--brand), 0.1)
}

.crayons-notice--close {
  float: right;
  font-size: 1.5rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #090909;
  color: var(--base);
  text-shadow: 0 1px 0 rgb(255, 255, 255);
  text-shadow: 0 1px 0 var(--base-inverted);
  opacity: 0.5;
  opacity: var(--opacity-50);
  padding: 0;
  border: 0;
  background-color: transparent
}

.c-pill {
  --border: var(--pill-border);
  --bg: var(--pill-bg);
  --color: var(--pill-color);
  --action-icon-color: var(--color-secondary);
  position: relative;
  display: inline-flex;
  text-align: left;
  align-items: center;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  outline: 0;
  text-decoration: none;
  padding: calc(0.5rem - 1px) 0.75rem;
  padding: calc(var(--su-2) - 1px) var(--su-3);
  color: var(--color);
  border: 1px solid var(--border);
  background: var(--bg)
}

.c-pill:hover:not([aria-disabled='true']),
.js-focus-visible .c-pill.focus-visible:focus:not([aria-disabled='true']) {
  --color: var(--pill-color-hover);
  --border: var(--pill-border-hover);
  --bg: var(--pill-bg-hover);
  --action-icon-color: var(--pill-color-hover);
  z-index: 1;
  z-index: var(--z-elevate)
}

.c-pill:hover:not([aria-disabled='true']):is(.c-pill--action-icon--destructive),
.js-focus-visible .c-pill.focus-visible:focus:not([aria-disabled='true']):is(.c-pill--action-icon--destructive) {
  --action-icon-color: var(--accent-danger)
}

.js-focus-visible .c-pill.focus-visible:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px rgb(79, 70, 229);
  box-shadow: var(--focus-ring);
  outline: 0
}

.c-pill--description-icon .c-pill__description-icon {
  color: var(--description-icon-color);
  flex-shrink: 0;
  margin-right: 0.5rem;
  margin-right: var(--su-2)
}

.c-pill--action-icon .c-pill__action-icon {
  color: var(--action-icon-color);
  flex-shrink: 0;
  margin-left: 0.5rem;
  margin-left: var(--su-2)
}

.profile-preview-card {
  --dropdown-hover-delay: 590ms;
  --dropdown-transition: 300ms
}

.profile-preview-card__content.crayons-dropdown {
  transition: border, border-top;
  transition-duration: var(--dropdown-transition);
  color: #090909;
  color: var(--base-100);
  padding-top: 0;
  left: 0;
  font-size: 1rem;
  font-size: var(--fs-base);
  font-weight: 400;
  font-weight: var(--fw-normal);
  overflow-wrap: break-word;
  overflow-wrap: anywhere
}

.profile-preview-card__content.crayons-dropdown:hover {
  display: block;
  animation: hoverAppear var(--dropdown-hover-delay)
}

.profile-preview-card__content.crayons-dropdown.showing:hover {
  animation: none
}

.profile-preview-card__trigger:hover+.profile-preview-card__content.crayons-dropdown {
  display: block;
  animation: hoverAppear var(--dropdown-hover-delay)
}

.profile-preview-card__trigger:hover+.profile-preview-card__content.crayons-dropdown.showing {
  animation: none
}

@keyframes hoverAppear {
  0% {
    opacity: 0.00001;
    opacity: var(--opacity-0);
    pointer-events: none
  }

  99% {
    opacity: 0.00001;
    opacity: var(--opacity-0);
    pointer-events: none
  }

  100% {
    opacity: 1;
    opacity: var(--opacity-100);
    pointer-events: inherit
  }
}

.series-switcher {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif);
  max-width: 550px;
  margin: 1rem auto;
  margin: var(--su-4) auto
}

@media (min-width: 768px) {
  .series-switcher {
    margin: 1.5rem auto;
    margin: var(--su-6) auto
  }
}

.series-switcher__num {
  background: #efefef;
  background: var(--base-10);
  width: 2rem;
  width: var(--su-7);
  height: 2rem;
  height: var(--su-7);
  font-size: 1rem;
  font-size: var(--fs-base);
  color: #575757;
  color: var(--base-70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 0.75rem;
  margin-right: var(--su-3);
  flex-shrink: 0
}

.series-switcher__title {
  max-width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.series-switcher__link {
  padding: 0.75rem 1rem;
  padding: var(--su-3) var(--su-4);
  font-size: 1rem;
  font-size: var(--fs-base);
  display: flex;
  flex-wrap: nowrap;
  align-items: center
}

@media (min-width: 768px) {
  .series-switcher__link {
    font-size: 1.125rem;
    font-size: var(--fs-l)
  }
}

.series-switcher__link--hidden {
  display: none
}

.series-switcher__link--active {
  color: #090909;
  color: var(--base-100);
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.series-switcher__link--active .series-switcher__num {
  background: rgb(79, 70, 229);
  background: var(--accent-brand);
  color: rgb(255, 255, 255);
  color: var(--base-inverted);
  font-weight: 400;
  font-weight: var(--fw-normal)
}

.crayons-snackbar {
  position: fixed;
  z-index: 500;
  z-index: var(--z-popover);
  left: 0.5rem;
  left: var(--su-2);
  right: 0.5rem;
  right: var(--su-2);
  bottom: 0.5rem;
  bottom: var(--su-2);
  display: grid;
  grid-gap: 0.5rem;
  grid-gap: var(--su-2)
}

@media (min-width: 640px) {
  .crayons-snackbar {
    max-width: 480px;
    width: auto;
    left: 1.5rem;
    left: var(--su-6);
    right: auto;
    bottom: 1.5rem;
    bottom: var(--su-6);
    justify-items: flex-start
  }
}

.crayons-snackbar__item {
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: rgb(23, 23, 23);
  background: var(--snackbar-bg);
  color: rgb(255, 255, 255);
  color: var(--snackbar-color);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  padding: var(--su-2)
}

.crayons-snackbar__body {
  padding: 0 0.5rem;
  padding: 0 var(--su-2)
}

.crayons-snackbar__actions {
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-left: var(--su-2)
}

@keyframes crayons-spinner {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.crayons-spinner {
  color: rgb(79, 70, 229);
  color: var(--accent-brand);
  animation: 1s linear infinite crayons-spinner
}

.articles-list {
  min-width: 0
}

#main-status-form {
  line-height: 0;
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

#main-status-form #main-status-form-controls {
  line-height: 24px
}

#main-status-form .ltag__link__content {
  line-height: 1.2em
}

#main-status-form .ltag__link__content h2 {
  line-height: 1.08em
}

.feed-dropdown {
  font-size: 1rem;
  font-size: var(--fs-base);
  padding: 1rem;
  padding: var(--su-4)
}

.feed-dropdown hr {
  border: 0.5px solid rgb(229, 229, 229);
  border: 0.5px solid var(--divider);
  margin: 8px
}

.feed-dropdown a {
  display: block !important
}

.feed-dropdown a:hover {
  color: rgb(79, 70, 229);
  color: var(--accent-brand)
}

#article_title {
  height: auto;
  resize: none;
  transition: height 0.15s ease-out;
  min-height: 40px
}

.crayons-story {
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.033);
  box-shadow: 0 0 0 1px var(--card-secondary-border);
  margin: 0 0 0.5rem;
  margin: 0 0 var(--su-2);
  position: relative;
  border-radius: Max(0px, Min(0.375rem, calc((100vw - 4px - 100%) * 9999))) / 0.375rem;
  border-radius: var(--radius-auto);
  --story-padding: var(--su-4) var(--su-4) var(--su-3);
  --title-font-size: var(--fs-xl)
}

.crayons-story:focus-within {
  outline: none;
  --card-border: var(--accent-brand);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.1);
  box-shadow: 0 0 0 2px var(--card-border)
}

@media (min-width: 640px) {
  .crayons-story {
    --story-padding: var(--su-4);
    --title-font-size: var(--fs-2xl)
  }

  .crayons-story--featured {
    --title-font-size: var(--fs-3xl)
  }
}

@media (min-width: 768px) {
  .crayons-story {
    --story-padding: var(--su-5)
  }
}

.crayons-story__hidden-navigation-link {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere
}

.crayons-story__secondary {
  color: rgb(64, 64, 64);
  color: var(--card-color-secondary)
}

.crayons-story__secondary[href]:hover,
.crayons-story__secondary [enabled]:hover {
  color: rgb(23, 23, 23);
  color: var(--card-color)
}

.crayons-story__tertiary {
  color: rgb(82, 82, 82);
  color: var(--card-color-tertiary)
}

.crayons-story__tertiary[href]:hover {
  color: rgb(23, 23, 23);
  color: var(--card-color)
}

.crayons-story__cover {
  display: block;
  width: 100%;
  height: auto
}

@media (min-width: 640px) {
  .crayons-story__cover {
    border-radius: 0.375rem 0.375rem 0 0;
    border-radius: var(--radius) var(--radius) 0 0
  }
}

.crayons-story__billboard:focus-within {
  --card-border: rgba(var(--grey-900), 0.1);
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.1);
  box-shadow: 0 0 0 1px var(--card-border)
}

.crayons-story__body {
  padding: var(--story-padding)
}

.crayons-story__body-status {
  padding-top: 0.75rem;
  padding-top: var(--su-3);
  padding-bottom: 0.75rem;
  padding-bottom: var(--su-3)
}

@media (min-width: 768px) {
  .crayons-story__indention {
    padding-left: calc(2rem + 0.5rem);
    padding-left: calc(var(--su-7) + var(--su-2))
  }
}

@media (min-width: 768px) {
  .crayons-story__indention-billboard {
    padding-left: calc(2rem + 0.5rem);
    padding-left: calc(var(--su-7) + var(--su-2));
    padding-right: calc(2rem + 0.5rem);
    padding-right: calc(var(--su-7) + var(--su-2))
  }
}

.crayons-story__indention-billboard .text-styles {
  font-size: 1rem;
  font-size: var(--fs-base)
}

.crayons-story__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3)
}

@media (min-width: 768px) {
  .crayons-story__top {
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }
}

.crayons-story__top .pinned svg {
  fill: rgb(79, 70, 229);
  fill: var(--accent-brand)
}

.crayons-story__overflow {
  color: rgb(82, 82, 82);
  color: var(--card-color-tertiary)
}

@media (min-width: 640px) {
  .crayons-story__overflow {
    display: none
  }
}

.crayons-story__overflow:hover {
  color: rgb(23, 23, 23);
  color: var(--card-color)
}

.crayons-story:hover .crayons-story__overflow {
  display: inline-flex
}

.crayons-story__meta {
  display: flex;
  align-items: center;
  line-height: 1.25;
  line-height: var(--lh-tight);
  font-size: 0.875rem;
  font-size: var(--fs-s)
}

.crayons-story__author-pic {
  position: relative;
  margin-right: 0.5rem;
  margin-right: var(--su-2)
}

.crayons-story__tags {
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2);
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  display: none !important;
  flex-wrap: wrap;
  gap: 1px;
  color: #3d3d3d;
  color: var(--base-80) display: none !important;
}

.crayons-story__title {
  color: rgb(23, 23, 23);
  color: var(--card-color);
  line-height: 1.25;
  line-height: var(--lh-tight);
  font-size: var(--title-font-size);
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

@media (min-width: 768px) {
  .crayons-story__title {
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }
}

.crayons-story__title a {
  color: inherit;
  display: block
}

.crayons-story__title a:hover {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.crayons-story__title-status {
  font-weight: 400;
  font-weight: var(--fw-normal);
  font-size: 1.125rem;
  font-size: var(--fs-l)
}

.crayons-story__title-status a:hover {
  color: rgb(23, 23, 23);
  color: var(--card-color)
}

.crayons-story__title-status .crayons-story__innertitle-boost {
  font-size: calc(0.75rem + 1px);
  font-size: calc(var(--fs-xs) + 1px);
  color: rgb(115, 115, 115);
  color: var(--color-secondary);
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.crayons-story__title-status .crayons-story__innertitle-boost a {
  display: inline-block
}

.crayons-story__title-status .quickie-paragraph {
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2)
}

.crayons-story__title-status .quickie-paragraph:last-child {
  margin-bottom: 0
}

.crayons-story__title-status .quickie-read-more {
  color: rgb(115, 115, 115);
  color: var(--color-secondary);
  font-style: italic;
  font-size: 0.9em;
  margin-left: 0.25rem;
  margin-left: var(--su-1)
}

.crayons-story__flare-tag {
  font-weight: normal;
  padding: 0.3em;
  vertical-align: middle;
  position: relative;
  top: -2px;
  line-height: 1em;
  display: inline-block;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  background: #717171;
  background: var(--base-60);
  margin-right: 0.25rem;
  margin-right: var(--su-1);
  color: rgb(255, 255, 255);
  color: var(--base-inverted)
}

.crayons-story__contentpreview {
  padding: 1rem 0;
  padding: var(--su-4) 0
}

.crayons-story__contentpreview .ltag__link {
  margin: 0
}

.crayons-story__contentpreview .ltag__link .ltag__link__content h2 {
  font-size: calc(1.15em + 0.09vw)
}

.crayons-story__contentpreview .ltag__link .ltag__link__content .ltag__link__tag {
  font-size: 0.75em
}

.crayons-story__contentpreview br {
  display: none
}

.crayons-story__contentpreview .c-embed {
  padding: 9px 16px !important;
  margin: 0 !important;
  font-size: 14px !important
}

.crayons-story__contentpreview .c-embed:nth-child(n+3) {
  display: none
}

.crayons-story__bottom {
  display: none !important;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-size: var(--fs-s);
  line-height: 1.25;
  line-height: var(--lh-tight);
  margin-left: -2px
}

.crayons-story__details {
  display: flex;
  margin-left: calc(0.5rem * -1);
  margin-left: calc(var(--su-2) * -1)
}

.crayons-story__comments {
  cursor: default;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  position: relative;
  bottom: 0.5rem;
  bottom: var(--su-2);
  margin: 0.5rem;
  margin: var(--su-2);
  margin-bottom: 0;
  margin-top: -3px;
  padding: 0.5rem 0;
  padding: var(--su-2) 0
}

@media (min-width: 640px) {
  .crayons-story__comments {
    bottom: 0.75rem;
    bottom: var(--su-3);
    margin: 0.75rem;
    margin: var(--su-3);
    margin-bottom: 0;
    margin-top: -5px
  }
}

.crayons-story__comments__headline {
  font-weight: 700;
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: rgb(64, 64, 64);
  color: var(--card-color-secondary);
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3);
  padding-left: calc(1.5rem + 1rem);
  padding-left: calc(var(--su-6) + var(--su-4))
}

.crayons-story__comments__actions {
  padding-left: calc(1.5rem + 1rem);
  padding-left: calc(var(--su-6) + var(--su-4));
  margin-top: 0.25rem;
  margin-top: var(--su-1)
}

.crayons-story__comments__actions a {
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.crayons-story__snippet {
  color: rgb(64, 64, 64);
  color: var(--card-secondary-color);
  font-size: inherit;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word
}

.crayons-story__snippet em {
  font-style: normal;
  color: black;
  background: yellow
}

.crayons-story__headline {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: rgb(82, 82, 82);
  color: var(--card-color-tertiary);
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

.crayons-story__headline a {
  color: inherit;
  display: block
}

.crayons-story__headline a:hover {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.crayons-story__save {
  display: flex;
  align-items: center
}

.crayons-story__slug-segment {
  opacity: 0.5
}

.crayons-story__video {
  position: relative;
  padding-top: 56%;
  display: block;
  background-color: #090909;
  background-color: var(--base-100);
  background-size: cover
}

.crayons-story__video img {
  width: 100%
}

.crayons-story__video__time {
  position: absolute;
  bottom: 1rem;
  bottom: var(--su-4);
  right: 1rem;
  right: var(--su-4);
  background: rgba(0, 0, 0, 0.8);
  color: rgb(255, 255, 255);
  color: var(--base-inverted);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  padding: 0.25rem;
  padding: var(--su-1);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace)
}

.crayons-podcast-episode {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

.crayons-podcast-episode:last-child {
  margin-bottom: 4px
}

.crayons-podcast-episode__cover {
  width: 3rem;
  width: var(--su-8);
  height: 3rem;
  height: var(--su-8);
  margin-right: 0.5rem;
  margin-right: var(--su-2)
}

.crayons-podcast-episode__cover img {
  width: 3rem;
  width: var(--su-8);
  min-width: 3rem;
  min-width: var(--su-8);
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.crayons-podcast-episode__author {
  font-size: 0.875rem;
  font-size: var(--fs-s);
  color: rgb(64, 64, 64);
  color: var(--card-color-secondary);
  margin-top: -5px
}

.crayons-podcast-episode__title {
  color: rgb(23, 23, 23);
  color: var(--card-color);
  line-height: 1.25;
  line-height: var(--lh-tight);
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1);
  font-size: 1.125rem;
  font-size: var(--fs-l)
}

@media (min-width: 640px) {
  .crayons-podcast-episode__title {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }
}

.crayons-podcast-episode__title a {
  color: inherit;
  display: block
}

.crayons-podcast-episode__title a:hover {
  color: rgb(67, 56, 202);
  color: var(--link-color-hover)
}

.crayons-story .c-btn .bm-initial,
.crayons-story .c-date-picker .DateRangePickerInput_calendarIcon .bm-initial,
.c-date-picker .crayons-story .DateRangePickerInput_calendarIcon .bm-initial,
.crayons-story .c-date-picker .DateRangePickerInput_clearDates .bm-initial,
.c-date-picker .crayons-story .DateRangePickerInput_clearDates .bm-initial,
.crayons-story .c-date-picker .DayPickerNavigation_button .bm-initial,
.c-date-picker .crayons-story .DayPickerNavigation_button .bm-initial {
  display: inline-flex
}

.crayons-story .c-btn .bm-success,
.crayons-story .c-date-picker .DateRangePickerInput_calendarIcon .bm-success,
.c-date-picker .crayons-story .DateRangePickerInput_calendarIcon .bm-success,
.crayons-story .c-date-picker .DateRangePickerInput_clearDates .bm-success,
.c-date-picker .crayons-story .DateRangePickerInput_clearDates .bm-success,
.crayons-story .c-date-picker .DayPickerNavigation_button .bm-success,
.c-date-picker .crayons-story .DayPickerNavigation_button .bm-success {
  display: none
}

.crayons-story .c-btn.selected .bm-initial,
.crayons-story .c-date-picker .selected.DateRangePickerInput_calendarIcon .bm-initial,
.c-date-picker .crayons-story .selected.DateRangePickerInput_calendarIcon .bm-initial,
.crayons-story .c-date-picker .selected.DateRangePickerInput_clearDates .bm-initial,
.c-date-picker .crayons-story .selected.DateRangePickerInput_clearDates .bm-initial,
.crayons-story .c-date-picker .selected.DayPickerNavigation_button .bm-initial,
.c-date-picker .crayons-story .selected.DayPickerNavigation_button .bm-initial {
  display: none
}

.crayons-story .c-btn.selected .bm-success,
.crayons-story .c-date-picker .selected.DateRangePickerInput_calendarIcon .bm-success,
.c-date-picker .crayons-story .selected.DateRangePickerInput_calendarIcon .bm-success,
.crayons-story .c-date-picker .selected.DateRangePickerInput_clearDates .bm-success,
.c-date-picker .crayons-story .selected.DateRangePickerInput_clearDates .bm-success,
.crayons-story .c-date-picker .selected.DayPickerNavigation_button .bm-success,
.c-date-picker .crayons-story .selected.DayPickerNavigation_button .bm-success {
  display: inline-flex
}

:root {
  --syntax-background-color: #08090a;
  --syntax-text-color: #f8f8f2;
  --syntax-comment-color: #808080;
  --syntax-declaration-color: #f39c12;
  --syntax-literal-color: #dda0dd;
  --syntax-error-color: #f9690e;
  --syntax-name-color: #7ed07e;
  --syntax-string-color: #f2ca27
}

pre:not(.highlight),
div.highlight,
div:not(.highlight)>pre.highlight,
li pre.highlight,
blockquote pre.highlight {
  background: #08090a;
  background: var(--syntax-background-color);
  color: #f8f8f2;
  color: var(--syntax-text-color);
  font-size: 80%;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: initial;
  padding: 0.5rem;
  padding: var(--su-2)
}

@media (min-width: 768px) {

  pre:not(.highlight),
  div.highlight,
  div:not(.highlight)>pre.highlight,
  li pre.highlight,
  blockquote pre.highlight {
    padding: 1.5rem;
    padding: var(--su-6)
  }
}

pre:not(.highlight) code,
div.highlight code,
div:not(.highlight)>pre.highlight code,
li pre.highlight code,
blockquote pre.highlight code {
  font-size: 100%;
  padding: 0
}

div.highlight {
  position: relative
}

div.highlight .highlight {
  overflow: auto
}

.highlight__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  visibility: hidden
}

.highlight:hover .highlight__panel {
  visibility: visible
}

.highlight__panel-action {
  display: flex;
  padding: 0.5rem;
  padding: var(--su-2);
  overflow: hidden;
  background: #717171;
  background: var(--base-60);
  border-bottom-left-radius: 0.375rem;
  border-bottom-left-radius: var(--radius);
  opacity: 0.9
}

.highlight__panel-action:hover {
  opacity: 1
}

.highlight__panel-action+.highlight__panel-action {
  margin-left: 1px;
  border-bottom-left-radius: 0
}

.highlight-action {
  display: none;
  cursor: pointer;
  color: rgb(255, 255, 255);
  color: var(--base-inverted);
  width: 1.25rem;
  width: var(--su-5);
  height: 1.25rem;
  height: var(--su-5)
}

.highlight-action--fullscreen-on {
  display: block
}

.fullscreen-code {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  z-index: var(--z-modal);
  width: 100%;
  height: 100vh;
  background: #08090a;
  background: var(--syntax-background-color);
  color: #f8f8f2;
  color: var(--syntax-text-color);
  overflow: auto;
  visibility: hidden;
  transform: scale(0.01);
  transition: transform cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms, visibility cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: transform var(--transition-props), visibility var(--transition-props)
}

.fullscreen-code div.highlight {
  height: 100%;
  box-sizing: border-box
}

.fullscreen-code .highlight__panel {
  position: fixed
}

.fullscreen-code .highlight-action--fullscreen-on {
  display: none
}

.fullscreen-code .highlight-action--fullscreen-off {
  display: block
}

.fullscreen-code.is-open {
  visibility: visible;
  transform: scale(1)
}

code {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-body-color);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  max-width: 100%;
  font-size: 80%;
  padding: 0.1em 0.25em
}

p>code {
  background: rgb(0, 0, 0, 0.1);
  background: var(--code-inline-bg)
}

.highlight .hll {
  background-color: #49483e
}

.highlight {
  background: #08090a;
  background: var(--syntax-background-color);
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .c {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .err {
  text-shadow: 0 0 7px #f9690e;
  text-shadow: 0 0 7px var(--syntax-error-color)
}

.highlight .k {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .l {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .n {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .o {
  color: #f9690e;
  color: var(--syntax-error-color)
}

.highlight .p {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .ch {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .cm {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .cp {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .cpf {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .c1 {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .cs {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .gd {
  color: #f9690e;
  color: var(--syntax-error-color)
}

.highlight .ge {
  font-style: italic
}

.highlight .gi {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .gs {
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.highlight .gu {
  color: #808080;
  color: var(--syntax-comment-color)
}

.highlight .kc {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .kd {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .kn {
  color: #f9690e;
  color: var(--syntax-error-color)
}

.highlight .kp {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .kr {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .kt {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .ld {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .m {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .s {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .na {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .nb {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .nc {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .no {
  color: #f39c12;
  color: var(--syntax-declaration-color)
}

.highlight .nd {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .ni {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .ne {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .nf {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .nl {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .nn {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .nx {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .py {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .nt {
  color: #f9690e;
  color: var(--syntax-error-color)
}

.highlight .nv {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .ow {
  color: #f9690e;
  color: var(--syntax-error-color)
}

.highlight .w {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .mb {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .mf {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .mh {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .mi {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .mo {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .sa {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .sb {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .sc {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .dl {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .sd {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .s2 {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .se {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.highlight .sh {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .si {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .sx {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .sr {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .s1 {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .ss {
  color: #f2ca27;
  color: var(--syntax-string-color)
}

.highlight .bp {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .fm {
  color: #7ed07e;
  color: var(--syntax-name-color)
}

.highlight .vc {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .vg {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .vi {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .vm {
  color: #f8f8f2;
  color: var(--syntax-text-color)
}

.highlight .il {
  color: #dda0dd;
  color: var(--syntax-literal-color)
}

.crayons-table {
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: inherit;
  border-spacing: 0;
  border-color: inherit;
  vertical-align: inherit;
  text-align: left;
  font-weight: inherit;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0
}

.crayons-table td,
.crayons-table th {
  padding: 0.5rem;
  padding: var(--su-2)
}

@media (min-width: 768px) {

  .crayons-table td,
  .crayons-table th {
    padding: 0.75rem;
    padding: var(--su-3)
  }
}

@media (min-width: 1024px) {

  .crayons-table td,
  .crayons-table th {
    padding: 1rem;
    padding: var(--su-4)
  }
}

.crayons-table--compact td,
.crayons-table--compact th {
  padding: 0.5rem;
  padding: var(--su-2)
}

@media (min-width: 768px) {

  .crayons-table--compact td,
  .crayons-table--compact th {
    padding: 0.5rem;
    padding: var(--su-2)
  }
}

@media (min-width: 1024px) {

  .crayons-table--compact td,
  .crayons-table--compact th {
    padding: 0.5rem;
    padding: var(--su-2)
  }
}

.crayons-table td {
  transition: background cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: background var(--transition-props);
  border-bottom: 1px solid rgb(246, 246, 246);
  border-bottom: 1px solid var(--body-bg)
}

.crayons-table thead {
  border-radius: 0.375rem 0.375rem 0 0;
  border-radius: var(--radius) var(--radius) 0 0
}

.crayons-table th {
  font-size: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: #717171;
  color: var(--base-60)
}

.crayons-table th:first-child {
  border-radius: 0.375rem 0 0 0;
  border-radius: var(--radius) 0 0 0
}

.crayons-table th:last-child {
  border-radius: 0 0.375rem 0 0;
  border-radius: 0 var(--radius) 0 0
}

.crayons-table tbody tr:first-child td:first-child {
  border-radius: 0.375rem 0 0 0;
  border-radius: var(--radius) 0 0 0
}

.crayons-table tbody tr:first-child td:last-child {
  border-radius: 0 0.375rem 0 0;
  border-radius: 0 var(--radius) 0 0
}

.crayons-table tbody tr:last-child td {
  border-bottom: none
}

.crayons-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 0.375rem;
  border-radius: 0 0 0 var(--radius)
}

.crayons-table tbody tr:last-child td:last-child {
  border-radius: 0 0 0.375rem 0;
  border-radius: 0 0 var(--radius) 0
}

.crayons-table tbody tr:only-child td:first-child {
  border-radius: 0.375rem 0 0 0.375rem;
  border-radius: var(--radius) 0 0 var(--radius)
}

.crayons-table tbody tr:only-child td:last-child {
  border-radius: 0 0.375rem 0.375rem 0;
  border-radius: 0 var(--radius) var(--radius) 0
}

.crayons-table tbody tr:hover td {
  background: rgb(250, 250, 250);
  background: var(--card-secondary-bg)
}

.crayons-table--minimal th {
  text-transform: none
}

.crayons-table--minimal td {
  border-bottom: none
}

.crayons-tabs {
  --border-width: 3px;
  --tab-vertical-padding: var(--su-2);
  --tab-horizontal-padding: var(--su-2);
  --font-size: var(--fs-base);
  display: flex
}

@media (min-width: 640px) {
  .crayons-tabs {
    --tab-vertical-padding: var(--su-2)
  }
}

.crayons-tabs--scrollable {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap
}

.crayons-tabs__list {
  list-style: none;
  display: flex;
  width: 100%
}

.crayons-tabs__list li {
  width: 100%
}

.crayons-tabs__item {
  padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--font-size);
  line-height: 1.5rem;
  line-height: var(--su-6);
  text-decoration: none;
  cursor: pointer;
  color: rgb(64, 64, 64);
  color: var(--tab-color);
  position: relative;
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  width: 100%;
  border: none;
  background: transparent
}

@media (min-width: 640px) {
  .crayons-tabs__item {
    width: auto;
    margin: 0 0.25rem;
    margin: 0 var(--su-1)
  }
}

.crayons-tabs__item::before {
  content: attr(data-text);
  height: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  font-weight: 500;
  font-weight: var(--fw-medium)
}

@media speech {
  .crayons-tabs__item::before {
    display: none
  }
}

.crayons-tabs__item::after {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-width);
  content: '';
  background: rgb(rgb(79, 70, 229));
  background: var(--tab-bg-current);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props)
}

@media (min-width: 640px) {
  .crayons-tabs__item::after {
    left: var(--tab-horizontal-padding);
    right: var(--tab-horizontal-padding)
  }
}

.crayons-tabs__item:hover {
  background: rgba(79, 70, 229, 0.1);
  background: var(--tab-bg-hover);
  color: rgb(79, 70, 229);
  color: var(--tab-color-hover)
}

.crayons-tabs__item:hover:after {
  left: 0;
  right: 0;
  border-radius: 0 0 0.375rem 0.375rem;
  border-radius: 0 0 var(--radius) var(--radius)
}

.crayons-tabs__item--current {
  font-weight: 500;
  font-weight: var(--fw-medium);
  color: rgb(23, 23, 23);
  color: var(--tab-color-current)
}

.crayons-tabs__item--current::after {
  display: block
}

.crayons-tabs--wrapped {
  flex-wrap: wrap
}

.crayons-tabs--wrapped .crayons-tabs__list li {
  width: auto
}

.crayons-tabs--wrapped .crayons-tabs__item {
  margin: 0.25rem;
  margin: var(--su-1);
  width: auto
}

.crayons-navigation {
  --tab-horizontal-padding: var(--su-3);
  --tab-vertical-padding: var(--su-1);
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding: 0.25rem 0 !important;
  padding: var(--su-1) 0 !important;
  margin: calc(-1 * 0.25rem) 0 !important;
  margin: calc(-1 * var(--su-1)) 0 !important
}

@media (min-width: 640px) {
  .crayons-navigation {
    display: block;
    overflow-x: visible;
    overflow-x: initial
  }
}

.crayons-navigation__item {
  display: inline-flex;
  white-space: nowrap;
  padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
  color: #575757;
  color: var(--base-70);
  position: relative;
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

@media (min-width: 640px) {
  .crayons-navigation__item {
    display: flex;
    color: #242424;
    color: var(--base-90);
    white-space: inherit;
    padding: var(--tab-vertical-padding) var(--tab-vertical-padding)
  }

  .crayons-navigation__item:hover {
    color: rgb(79, 70, 229);
    color: var(--accent-brand);
    background: rgb(255, 255, 255);
    background: var(--base-inverted)
  }
}

.crayons-navigation__item--current {
  font-weight: 700;
  font-weight: var(--fw-bold);
  color: #090909;
  color: var(--base-100)
}

@media (min-width: 640px) {
  .crayons-navigation__item--current {
    background: rgb(255, 255, 255);
    background: var(--link-bg-current)
  }

  .crayons-navigation__item--current:hover {
    background: rgb(255, 255, 255);
    background: var(--link-bg-current)
  }
}

@media (min-width: 640px) {
  .crayons-navigation--horizontal {
    display: flex
  }
}

@media (min-width: 640px) {
  .crayons-navigation--horizontal .crayons-navigation__item {
    display: inline-flex;
    color: #575757;
    color: var(--base-70);
    padding: var(--tab-vertical-padding) var(--tab-horizontal-padding)
  }
}

.crayons-navigation--horizontal .crayons-navigation__item:hover {
  color: rgb(79, 70, 229);
  color: var(--accent-brand)
}

.crayons-navigation--horizontal .crayons-navigation__item--current {
  color: #090909;
  color: var(--base-100);
  background: none
}

.crayons-navigation--horizontal .crayons-navigation__item--current:hover {
  background: rgb(255, 255, 255);
  background: var(--base-inverted)
}

.crayons-tag {
  background: transparent;
  color: rgb(64, 64, 64);
  color: var(--tag-color);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  padding: clamp(0.25rem, 0.25em, 0.5em) 0.5em;
  padding: clamp(var(--su-1), 0.25em, 0.5em) 0.5em
}

.crayons-tag__prefix {
  color: rgba(23, 23, 23, 0.6);
  color: var(--tag-prefix);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  flex-shrink: 0
}

.crayons-tag--filled {
  background: rgba(23, 23, 23, 0.05);
  background: var(--tag-bg);
  color: rgb(23, 23, 23);
  color: var(--tag-color-hover)
}

.crayons-tag--monochrome .crayons-tag__prefix {
  color: rgba(23, 23, 23, 0.6);
  color: var(--tag-prefix)
}

.crayons-tag:hover,
.crayons-tag:focus {
  background: rgba(23, 23, 23, 0.05);
  background: var(--tag-bg-hover);
  color: rgb(23, 23, 23);
  color: var(--tag-color-hover);
  box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.05), inset 0 0 0 1px rgba(23, 23, 23, 0.05), inset 0 0 0 1px rgba(23, 23, 23, 0.05);
  box-shadow: inset 0 0 0 1px var(--tag-bg-hover), inset 0 0 0 1px var(--tag-bg-hover), inset 0 0 0 1px var(--tag-bg-hover)
}

.crayons-tag:hover .crayons-tag__prefix,
.crayons-tag:focus .crayons-tag__prefix {
  color: rgb(23, 23, 23);
  color: var(--tag-prefix-hover)
}

.tag-card {
  height: 195px
}

.tag-card .crayons-tag {
  padding-top: 0;
  padding-bottom: 0
}

.tag-card__badge {
  width: 48px;
  height: 48px
}

@media (max-width: 640px) {
  .tags-index .crayons-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start
  }

  .tags-index .tags-interaction-container {
    justify-content: space-between;
    width: 100%;
    grid-gap: 4px
  }

  .tags-index .tags-interaction-container__buttons>:first-child {
    padding-left: 0
  }
}

.crayons-tooltip__content,
.subforems-menu-tooltip[data-tooltip]:after,
.crayons-hover-tooltip[data-tooltip]:after {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, calc(-1 * 0.25rem));
  transform: translate(-50%, calc(-1 * var(--su-1)));
  background: rgba(23, 23, 23, 0.9);
  background: var(--tooltip-bg);
  color: rgb(255, 255, 255);
  color: var(--tooltip-color);
  font-size: 0.875rem;
  font-size: var(--fs-s);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-family: var(--ff-sans-serif);
  font-weight: 400;
  font-weight: var(--fw-normal);
  line-height: 1.25;
  line-height: var(--lh-tight);
  padding: 0.5rem 0.75rem;
  padding: var(--su-2) var(--su-3);
  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
  transition: all var(--transition-props);
  transition-delay: 250ms;
  z-index: 500;
  z-index: var(--z-popover);
  border-radius: 0.375rem;
  border-radius: var(--radius);
  width: auto;
  opacity: 0.00001;
  opacity: var(--opacity-0);
  pointer-events: none
}

@media (min-width: 768px) and (max-width: 1024px) {

  .crayons-tooltip__content,
  .subforems-menu-tooltip[data-tooltip]:after,
  .crayons-hover-tooltip[data-tooltip]:after {
    font-size: 0.75rem;
    font-size: var(--fs-xs);
    padding: 0.25rem 0.5rem;
    padding: var(--su-1) var(--su-2)
  }
}

.js-focus-visible .crayons-tooltip__activator.focus-visible:focus .crayons-tooltip__content:not(.crayons-tooltip__suppressed),
.js-focus-visible .crayons-tooltip__activator.focus-visible:focus .subforems-menu-tooltip[data-tooltip]:not(.crayons-tooltip__suppressed):after,
.js-focus-visible .crayons-tooltip__activator.focus-visible:focus .crayons-hover-tooltip[data-tooltip]:not(.crayons-tooltip__suppressed):after,
.crayons-tooltip__activator:hover .crayons-tooltip__content:not(.crayons-tooltip__suppressed),
.crayons-tooltip__activator:hover .subforems-menu-tooltip[data-tooltip]:not(.crayons-tooltip__suppressed):after,
.crayons-tooltip__activator:hover .crayons-hover-tooltip[data-tooltip]:not(.crayons-tooltip__suppressed):after {
  opacity: 1;
  transition-delay: 0;
  transform: translate(-50%, 0.25rem);
  transform: translate(-50%, var(--su-1))
}

.crayons-hover-tooltip[data-tooltip] {
  position: relative
}

.crayons-hover-tooltip[data-tooltip]:after {
  content: attr(data-tooltip);
  left: 0;
  bottom: 100%;
  top: auto;
  top: initial;
  transform: translateY(0.25rem);
  transform: translateY(var(--su-1));
  pointer-events: none;
  width: -moz-max-content;
  width: max-content
}

.crayons-hover-tooltip[data-tooltip]:hover:after {
  opacity: 1;
  transform: translateY(calc(-1 * 0.25rem));
  transform: translateY(calc(-1 * var(--su-1)));
  transition-delay: 0s
}

.crayons-hover-tooltip.crayons-hover-tooltip--right[data-tooltip]:after {
  left: revert;
  right: 0
}

.subforems-menu-tooltip[data-tooltip]:after {
  content: attr(data-tooltip);
  left: 100%;
  top: 50%;
  bottom: auto;
  bottom: initial;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  margin-left: var(--su-2);
  pointer-events: none;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap
}

.subforems-menu-tooltip[data-tooltip]:hover:after {
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: 0s
}

.crayons-mobile-drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 500;
  z-index: var(--z-modal)
}

.crayons-mobile-drawer__overlay {
  background: #090909;
  background: var(--base-100);
  opacity: 0.5;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0
}

.crayons-mobile-drawer__content {
  width: 100%;
  max-width: 500px;
  background: rgb(255, 255, 255);
  background: var(--card-bg);
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 0;
  padding: 1rem;
  padding: var(--su-4);
  border-radius: 0.375rem 0.375rem 0 0;
  border-radius: var(--radius) var(--radius) 0 0;
  transform: translateY(100%) translateX(-50%);
  animation: slideIn 0.3s ease-in-out forwards
}

@keyframes slideIn {
  100% {
    transform: translateY(0) translateX(-50%)
  }
}

.drawer-navigation__item {
  display: flex;
  justify-content: space-between
}

.drawer-navigation__item a {
  color: rgb(23, 23, 23);
  color: var(--body-color)
}

.drawer-navigation__item a[aria-current='page'] {
  color: rgb(79, 70, 229);
  color: var(--link-branded-color)
}

.drawer-navigation__item .check-icon {
  vertical-align: middle;
  display: none;
  color: rgb(79, 70, 229);
  color: var(--link-branded-color)
}

.drawer-navigation__item a[aria-current='page']+.check-icon {
  display: block
}

.color-transparent {
  color: transparent
}

.color-current {
  color: currentColor
}

.color-base-100 {
  color: #090909;
  color: var(--base-100)
}

.color-base-90 {
  color: #242424;
  color: var(--base-90)
}

.color-base-80 {
  color: #3d3d3d;
  color: var(--base-80)
}

.color-base-70 {
  color: #575757;
  color: var(--base-70)
}

.color-base-60 {
  color: #717171;
  color: var(--base-60)
}

.color-base-50 {
  color: #8a8a8a;
  color: var(--base-50)
}

.color-base-40 {
  color: #a3a3a3;
  color: var(--base-40)
}

.color-base-30 {
  color: #bdbdbd;
  color: var(--base-30)
}

.color-base-20 {
  color: #d6d6d7;
  color: var(--base-20)
}

.color-base-10 {
  color: #efefef;
  color: var(--base-10)
}

.color-base-0 {
  color: #f9f9f9;
  color: var(--base-0)
}

.color-base-inverted {
  color: rgb(255, 255, 255);
  color: var(--base-inverted)
}

.color-accent-brand {
  color: rgb(79, 70, 229);
  color: var(--accent-brand)
}

.color-accent-success {
  color: rgb(5, 150, 105);
  color: var(--accent-success)
}

.color-accent-warning {
  color: rgb(245, 158, 11);
  color: var(--accent-warning)
}

.color-accent-danger {
  color: rgb(220, 38, 38);
  color: var(--accent-danger)
}

.color-primary {
  color: rgb(23, 23, 23);
  color: var(--color-primary)
}

.color-secondary {
  color: rgb(115, 115, 115);
  color: var(--color-secondary)
}

.bg-transparent {
  background-color: transparent
}

.bg-current {
  background-color: currentColor
}

.bg-base-100 {
  background-color: #090909;
  background-color: var(--base-100)
}

.bg-base-90 {
  background-color: #242424;
  background-color: var(--base-90)
}

.bg-base-80 {
  background-color: #3d3d3d;
  background-color: var(--base-80)
}

.bg-base-70 {
  background-color: #575757;
  background-color: var(--base-70)
}

.bg-base-60 {
  background-color: #717171;
  background-color: var(--base-60)
}

.bg-base-50 {
  background-color: #8a8a8a;
  background-color: var(--base-50)
}

.bg-base-40 {
  background-color: #a3a3a3;
  background-color: var(--base-40)
}

.bg-base-30 {
  background-color: #bdbdbd;
  background-color: var(--base-30)
}

.bg-base-20 {
  background-color: #d6d6d7;
  background-color: var(--base-20)
}

.bg-base-10 {
  background-color: #efefef;
  background-color: var(--base-10)
}

.bg-base-0 {
  background-color: #f9f9f9;
  background-color: var(--base-0)
}

.bg-base-inverted {
  background-color: rgb(255, 255, 255);
  background-color: var(--base-inverted)
}

.bg-accent-brand {
  background-color: rgb(79, 70, 229);
  background-color: var(--accent-brand)
}

.bg-accent-success {
  background-color: rgb(5, 150, 105);
  background-color: var(--accent-success)
}

.bg-accent-warning {
  background-color: rgb(245, 158, 11);
  background-color: var(--accent-warning)
}

.bg-accent-danger {
  background-color: rgb(220, 38, 38);
  background-color: var(--accent-danger)
}

.bg-primary {
  background-color: rgb(23, 23, 23);
  background-color: var(--color-primary)
}

.bg-secondary {
  background-color: rgb(115, 115, 115);
  background-color: var(--color-secondary)
}

.border-transparent {
  border-color: transparent
}

.border-current {
  border-color: currentColor
}

.border-base-100 {
  border-color: #090909;
  border-color: var(--base-100)
}

.border-base-90 {
  border-color: #242424;
  border-color: var(--base-90)
}

.border-base-80 {
  border-color: #3d3d3d;
  border-color: var(--base-80)
}

.border-base-70 {
  border-color: #575757;
  border-color: var(--base-70)
}

.border-base-60 {
  border-color: #717171;
  border-color: var(--base-60)
}

.border-base-50 {
  border-color: #8a8a8a;
  border-color: var(--base-50)
}

.border-base-40 {
  border-color: #a3a3a3;
  border-color: var(--base-40)
}

.border-base-30 {
  border-color: #bdbdbd;
  border-color: var(--base-30)
}

.border-base-20 {
  border-color: #d6d6d7;
  border-color: var(--base-20)
}

.border-base-10 {
  border-color: #efefef;
  border-color: var(--base-10)
}

.border-base-0 {
  border-color: #f9f9f9;
  border-color: var(--base-0)
}

.border-base-inverted {
  border-color: rgb(255, 255, 255);
  border-color: var(--base-inverted)
}

.border-accent-brand {
  border-color: rgb(79, 70, 229);
  border-color: var(--accent-brand)
}

.border-accent-success {
  border-color: rgb(5, 150, 105);
  border-color: var(--accent-success)
}

.border-accent-warning {
  border-color: rgb(245, 158, 11);
  border-color: var(--accent-warning)
}

.border-accent-danger {
  border-color: rgb(220, 38, 38);
  border-color: var(--accent-danger)
}

.border-primary {
  border-color: rgb(23, 23, 23);
  border-color: var(--color-primary)
}

.border-secondary {
  border-color: rgb(115, 115, 115);
  border-color: var(--color-secondary)
}

.opacity-100 {
  opacity: 1
}

.opacity-75 {
  opacity: 0.75
}

.opacity-50 {
  opacity: 0.5
}

.opacity-25 {
  opacity: 0.25
}

.opacity-5 {
  opacity: 0.05
}

.opacity-0 {
  opacity: 0.00001
}

.box-content {
  box-sizing: content-box
}

.box-border {
  box-sizing: border-box
}

.cursor-auto {
  cursor: auto
}

.cursor-default {
  cursor: default
}

.cursor-pointer {
  cursor: pointer
}

.cursor-wait {
  cursor: wait
}

.cursor-text {
  cursor: text
}

.cursor-move {
  cursor: move
}

.cursor-not-allowed {
  cursor: not-allowed
}

.cursor-help {
  cursor: help
}

.pointer-events-auto {
  pointer-events: auto
}

.pointer-events-none {
  pointer-events: none
}

.radius-default {
  border-radius: 0.375rem;
  border-radius: var(--radius)
}

.radius-0 {
  border-radius: 0
}

.radius-full {
  border-radius: 9999px
}

.flex-row {
  flex-direction: row
}

.flex-col {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.flex-nowrap {
  flex-wrap: nowrap
}

.items-stretch {
  align-items: stretch
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.items-end {
  align-items: flex-end
}

.basis-1-5 {
  flex-basis: 20%
}

.basis-2-5 {
  flex-basis: 40%
}

.basis-3-5 {
  flex-basis: 60%
}

.basis-4-5 {
  flex-basis: 80%
}

.basis-1-4 {
  flex-basis: 25%
}

.basis-1-3 {
  flex-basis: 33.333333%
}

.basis-1-2 {
  flex-basis: 50%
}

.basis-2-3 {
  flex-basis: 66.666667%
}

.basis-3-4 {
  flex-basis: 75%
}

.content-start {
  align-content: flex-start
}

.content-center {
  align-content: center
}

.content-end {
  align-content: flex-end
}

.content-between {
  align-content: space-between
}

.content-around {
  align-content: space-around
}

.self-auto {
  align-self: auto
}

.self-start {
  align-self: flex-start
}

.self-center {
  align-self: center
}

.self-end {
  align-self: flex-end
}

.self-stretch {
  align-self: stretch
}

.justify-start {
  justify-content: flex-start
}

.justify-center {
  justify-content: center
}

.justify-end {
  justify-content: flex-end
}

.justify-between {
  justify-content: space-between
}

.justify-around {
  justify-content: space-around
}

.justify-stretch {
  justify-content: stretch
}

.flex-initial {
  flex: 0 1 auto
}

.flex-1 {
  flex: 1 1
}

.flex-auto {
  flex: 1 1 auto
}

.flex-none {
  flex: none
}

.grow-0 {
  flex-grow: 0
}

.grow-1 {
  flex-grow: 1
}

.shrink-0 {
  flex-shrink: 0
}

.shrink-1 {
  flex-shrink: 1
}

.order-first {
  order: -9999
}

.order-last {
  order: 9999
}

.order-0 {
  order: 0
}

.gap-0 {
  gap: 0
}

.gap-px {
  gap: 1px
}

.gap-05 {
  gap: 0.125rem;
  gap: var(--su-05)
}

.gap-1 {
  gap: 0.25rem;
  gap: var(--su-1)
}

.gap-2 {
  gap: 0.5rem;
  gap: var(--su-2)
}

.gap-3 {
  gap: 0.75rem;
  gap: var(--su-3)
}

.gap-4 {
  gap: 1rem;
  gap: var(--su-4)
}

.gap-5 {
  gap: 1.25rem;
  gap: var(--su-5)
}

.gap-6 {
  gap: 1.5rem;
  gap: var(--su-6)
}

.gap-7 {
  gap: 2rem;
  gap: var(--su-7)
}

.gap-8 {
  gap: 3rem;
  gap: var(--su-8)
}

.gap-9 {
  gap: 4rem;
  gap: var(--su-9)
}

.gap-10 {
  gap: 8rem;
  gap: var(--su-10)
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr))
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr))
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr))
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr))
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr))
}

.grid-rows-none {
  grid-template-rows: none
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr))
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr))
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr))
}

.grid-flow-row {
  grid-auto-flow: row
}

.grid-flow-col {
  grid-auto-flow: column
}

.float-left {
  float: left
}

.float-right {
  float: right
}

.float-none {
  float: none
}

.float-unset {
  float: none;
  float: initial
}

.border-solid {
  border-style: solid
}

.border-none {
  border-style: none
}

.border-0 {
  border-width: 0
}

.border-1 {
  border-width: 1px
}

.border-2 {
  border-width: 2px
}

.border-t-0 {
  border-top-width: 0
}

.border-t-1 {
  border-top-width: 1px
}

.border-t-2 {
  border-top-width: 2px
}

.border-b-0 {
  border-bottom-width: 0
}

.border-b-1 {
  border-bottom-width: 1px
}

.border-b-2 {
  border-bottom-width: 2px
}

.border-l-0 {
  border-left-width: 0
}

.border-l-1 {
  border-left-width: 1px
}

.border-l-2 {
  border-left-width: 2px
}

.border-r-0 {
  border-right-width: 0
}

.border-r-1 {
  border-right-width: 1px
}

.border-r-2 {
  border-right-width: 2px
}

.inset-px {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px
}

.inset-unset {
  top: auto;
  top: initial;
  left: auto;
  left: initial;
  right: auto;
  right: initial;
  bottom: auto;
  bottom: initial
}

.inset-0 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.top-auto {
  top: auto
}

.top-unset {
  top: auto;
  top: initial
}

.top-0 {
  top: 0
}

.top-100 {
  top: 100%
}

.top-05 {
  top: 0.125rem;
  top: var(--su-05)
}

.top-1 {
  top: 0.25rem;
  top: var(--su-1)
}

.top-2 {
  top: 0.5rem;
  top: var(--su-2)
}

.top-3 {
  top: 0.75rem;
  top: var(--su-3)
}

.top-4 {
  top: 1rem;
  top: var(--su-4)
}

.top-5 {
  top: 1.25rem;
  top: var(--su-5)
}

.top-6 {
  top: 1.5rem;
  top: var(--su-6)
}

.top-7 {
  top: 2rem;
  top: var(--su-7)
}

.top-8 {
  top: 3rem;
  top: var(--su-8)
}

.top-9 {
  top: 4rem;
  top: var(--su-9)
}

.top-10 {
  top: 8rem;
  top: var(--su-10)
}

.-top-100 {
  top: -100%
}

.-top-05 {
  top: calc(0.125rem * -1);
  top: calc(var(--su-05) * -1)
}

.-top-1 {
  top: calc(0.25rem * -1);
  top: calc(var(--su-1) * -1)
}

.-top-2 {
  top: calc(0.5rem * -1);
  top: calc(var(--su-2) * -1)
}

.-top-3 {
  top: calc(0.75rem * -1);
  top: calc(var(--su-3) * -1)
}

.-top-4 {
  top: calc(1rem * -1);
  top: calc(var(--su-4) * -1)
}

.-top-5 {
  top: calc(1.25rem * -1);
  top: calc(var(--su-5) * -1)
}

.-top-6 {
  top: calc(1.5rem * -1);
  top: calc(var(--su-6) * -1)
}

.-top-7 {
  top: calc(2rem * -1);
  top: calc(var(--su-7) * -1)
}

.-top-8 {
  top: calc(3rem * -1);
  top: calc(var(--su-8) * -1)
}

.-top-9 {
  top: calc(4rem * -1);
  top: calc(var(--su-9) * -1)
}

.-top-10 {
  top: calc(8rem * -1);
  top: calc(var(--su-10) * -1)
}

.bottom-auto {
  bottom: auto
}

.bottom-unset {
  bottom: auto;
  bottom: initial
}

.bottom-0 {
  bottom: 0
}

.bottom-100 {
  bottom: 100%
}

.bottom-05 {
  bottom: 0.125rem;
  bottom: var(--su-05)
}

.bottom-1 {
  bottom: 0.25rem;
  bottom: var(--su-1)
}

.bottom-2 {
  bottom: 0.5rem;
  bottom: var(--su-2)
}

.bottom-3 {
  bottom: 0.75rem;
  bottom: var(--su-3)
}

.bottom-4 {
  bottom: 1rem;
  bottom: var(--su-4)
}

.bottom-5 {
  bottom: 1.25rem;
  bottom: var(--su-5)
}

.bottom-6 {
  bottom: 1.5rem;
  bottom: var(--su-6)
}

.bottom-7 {
  bottom: 2rem;
  bottom: var(--su-7)
}

.bottom-8 {
  bottom: 3rem;
  bottom: var(--su-8)
}

.bottom-9 {
  bottom: 4rem;
  bottom: var(--su-9)
}

.bottom-10 {
  bottom: 8rem;
  bottom: var(--su-10)
}

.-bottom-100 {
  bottom: -100%
}

.-bottom-05 {
  bottom: calc(0.125rem * -1);
  bottom: calc(var(--su-05) * -1)
}

.-bottom-1 {
  bottom: calc(0.25rem * -1);
  bottom: calc(var(--su-1) * -1)
}

.-bottom-2 {
  bottom: calc(0.5rem * -1);
  bottom: calc(var(--su-2) * -1)
}

.-bottom-3 {
  bottom: calc(0.75rem * -1);
  bottom: calc(var(--su-3) * -1)
}

.-bottom-4 {
  bottom: calc(1rem * -1);
  bottom: calc(var(--su-4) * -1)
}

.-bottom-5 {
  bottom: calc(1.25rem * -1);
  bottom: calc(var(--su-5) * -1)
}

.-bottom-6 {
  bottom: calc(1.5rem * -1);
  bottom: calc(var(--su-6) * -1)
}

.-bottom-7 {
  bottom: calc(2rem * -1);
  bottom: calc(var(--su-7) * -1)
}

.-bottom-8 {
  bottom: calc(3rem * -1);
  bottom: calc(var(--su-8) * -1)
}

.-bottom-9 {
  bottom: calc(4rem * -1);
  bottom: calc(var(--su-9) * -1)
}

.-bottom-10 {
  bottom: calc(8rem * -1);
  bottom: calc(var(--su-10) * -1)
}

.left-auto {
  left: auto
}

.left-unset {
  left: auto;
  left: initial
}

.left-0 {
  left: 0
}

.left-100 {
  left: 100%
}

.left-05 {
  left: 0.125rem;
  left: var(--su-05)
}

.left-1 {
  left: 0.25rem;
  left: var(--su-1)
}

.left-2 {
  left: 0.5rem;
  left: var(--su-2)
}

.left-3 {
  left: 0.75rem;
  left: var(--su-3)
}

.left-4 {
  left: 1rem;
  left: var(--su-4)
}

.left-5 {
  left: 1.25rem;
  left: var(--su-5)
}

.left-6 {
  left: 1.5rem;
  left: var(--su-6)
}

.left-7 {
  left: 2rem;
  left: var(--su-7)
}

.left-8 {
  left: 3rem;
  left: var(--su-8)
}

.left-9 {
  left: 4rem;
  left: var(--su-9)
}

.left-10 {
  left: 8rem;
  left: var(--su-10)
}

.-left-100 {
  left: -100%
}

.-left-05 {
  left: calc(0.125rem * -1);
  left: calc(var(--su-05) * -1)
}

.-left-1 {
  left: calc(0.25rem * -1);
  left: calc(var(--su-1) * -1)
}

.-left-2 {
  left: calc(0.5rem * -1);
  left: calc(var(--su-2) * -1)
}

.-left-3 {
  left: calc(0.75rem * -1);
  left: calc(var(--su-3) * -1)
}

.-left-4 {
  left: calc(1rem * -1);
  left: calc(var(--su-4) * -1)
}

.-left-5 {
  left: calc(1.25rem * -1);
  left: calc(var(--su-5) * -1)
}

.-left-6 {
  left: calc(1.5rem * -1);
  left: calc(var(--su-6) * -1)
}

.-left-7 {
  left: calc(2rem * -1);
  left: calc(var(--su-7) * -1)
}

.-left-8 {
  left: calc(3rem * -1);
  left: calc(var(--su-8) * -1)
}

.-left-9 {
  left: calc(4rem * -1);
  left: calc(var(--su-9) * -1)
}

.-left-10 {
  left: calc(8rem * -1);
  left: calc(var(--su-10) * -1)
}

.right-auto {
  right: auto
}

.right-unset {
  right: auto;
  right: initial
}

.right-0 {
  right: 0
}

.right-100 {
  right: 100%
}

.right-05 {
  right: 0.125rem;
  right: var(--su-05)
}

.right-1 {
  right: 0.25rem;
  right: var(--su-1)
}

.right-2 {
  right: 0.5rem;
  right: var(--su-2)
}

.right-3 {
  right: 0.75rem;
  right: var(--su-3)
}

.right-4 {
  right: 1rem;
  right: var(--su-4)
}

.right-5 {
  right: 1.25rem;
  right: var(--su-5)
}

.right-6 {
  right: 1.5rem;
  right: var(--su-6)
}

.right-7 {
  right: 2rem;
  right: var(--su-7)
}

.right-8 {
  right: 3rem;
  right: var(--su-8)
}

.right-9 {
  right: 4rem;
  right: var(--su-9)
}

.right-10 {
  right: 8rem;
  right: var(--su-10)
}

.-right-100 {
  right: -100%
}

.-right-05 {
  right: calc(0.125rem * -1);
  right: calc(var(--su-05) * -1)
}

.-right-1 {
  right: calc(0.25rem * -1);
  right: calc(var(--su-1) * -1)
}

.-right-2 {
  right: calc(0.5rem * -1);
  right: calc(var(--su-2) * -1)
}

.-right-3 {
  right: calc(0.75rem * -1);
  right: calc(var(--su-3) * -1)
}

.-right-4 {
  right: calc(1rem * -1);
  right: calc(var(--su-4) * -1)
}

.-right-5 {
  right: calc(1.25rem * -1);
  right: calc(var(--su-5) * -1)
}

.-right-6 {
  right: calc(1.5rem * -1);
  right: calc(var(--su-6) * -1)
}

.-right-7 {
  right: calc(2rem * -1);
  right: calc(var(--su-7) * -1)
}

.-right-8 {
  right: calc(3rem * -1);
  right: calc(var(--su-8) * -1)
}

.-right-9 {
  right: calc(4rem * -1);
  right: calc(var(--su-9) * -1)
}

.-right-10 {
  right: calc(8rem * -1);
  right: calc(var(--su-10) * -1)
}

.z-negative {
  z-index: -1;
  z-index: var(--z-negative)
}

.z-elevate {
  z-index: 1;
  z-index: var(--z-elevate)
}

.z-sticky {
  z-index: 100;
  z-index: var(--z-sticky)
}

.z-drawer {
  z-index: 200;
  z-index: var(--z-drawer)
}

.z-modal {
  z-index: 500;
  z-index: var(--z-modal)
}

.z-dropdown {
  z-index: 400;
  z-index: var(--z-dropdown)
}

.z-popover {
  z-index: 500;
  z-index: var(--z-popover)
}

.overflow-auto {
  overflow: auto
}

.overflow-visible {
  overflow: visible
}

.overflow-hidden {
  overflow: hidden
}

.overflow-x-auto {
  overflow-x: auto
}

.overflow-x-hidden {
  overflow-x: hidden
}

.overflow-y-auto {
  overflow-y: auto
}

.overflow-y-hidden {
  overflow-y: hidden
}

.w-0 {
  width: 0
}

.w-10 {
  width: 10%
}

.w-15 {
  width: 15%
}

.w-25 {
  width: 25%
}

.w-50 {
  width: 50%
}

.w-60 {
  width: 60%
}

.w-70 {
  width: 70%
}

.w-75 {
  width: 75%
}

.w-80 {
  width: 80%
}

.w-100 {
  width: 100%
}

.w-auto {
  width: auto
}

.w-max {
  width: -moz-max-content;
  width: max-content
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content
}

.min-w-0 {
  min-width: 0
}

.min-w-100 {
  min-width: 100%
}

.min-w-unset {
  min-width: 0;
  min-width: initial
}

.h-0 {
  height: 0
}

.h-25 {
  height: 25%
}

.h-50 {
  height: 50%
}

.h-75 {
  height: 75%
}

.h-100 {
  height: 100%
}

.h-auto {
  height: auto
}

.h-full {
  height: 100vh
}

.h-unset {
  height: auto;
  height: initial
}

.min-h-0 {
  min-height: 0
}

.min-h-100 {
  min-height: 100%
}

.min-h-full {
  min-height: 100vh
}

.min-h-unset {
  min-height: 0;
  min-height: initial
}

.max-w-0 {
  max-width: 0
}

.max-w-25 {
  max-width: 25%
}

.max-w-50 {
  max-width: 50%
}

.max-w-75 {
  max-width: 75%
}

.max-w-100 {
  max-width: 100%
}

.max-w-unset {
  max-width: none;
  max-width: initial
}

.m-auto {
  margin: auto
}

.m-unset {
  margin: 0;
  margin: initial
}

.m-0 {
  margin: 0
}

.m-05 {
  margin: 0.125rem;
  margin: var(--su-05)
}

.m-1 {
  margin: 0.25rem;
  margin: var(--su-1)
}

.m-2 {
  margin: 0.5rem;
  margin: var(--su-2)
}

.m-3 {
  margin: 0.75rem;
  margin: var(--su-3)
}

.m-4 {
  margin: 1rem;
  margin: var(--su-4)
}

.m-5 {
  margin: 1.25rem;
  margin: var(--su-5)
}

.m-6 {
  margin: 1.5rem;
  margin: var(--su-6)
}

.m-7 {
  margin: 2rem;
  margin: var(--su-7)
}

.m-8 {
  margin: 3rem;
  margin: var(--su-8)
}

.m-9 {
  margin: 4rem;
  margin: var(--su-9)
}

.m-10 {
  margin: 8rem;
  margin: var(--su-10)
}

.-m-05 {
  margin: calc(0.125rem * -1);
  margin: calc(var(--su-05) * -1)
}

.-m-1 {
  margin: calc(0.25rem * -1);
  margin: calc(var(--su-1) * -1)
}

.-m-2 {
  margin: calc(0.5rem * -1);
  margin: calc(var(--su-2) * -1)
}

.-m-3 {
  margin: calc(0.75rem * -1);
  margin: calc(var(--su-3) * -1)
}

.-m-4 {
  margin: calc(1rem * -1);
  margin: calc(var(--su-4) * -1)
}

.-m-5 {
  margin: calc(1.25rem * -1);
  margin: calc(var(--su-5) * -1)
}

.-m-6 {
  margin: calc(1.5rem * -1);
  margin: calc(var(--su-6) * -1)
}

.-m-7 {
  margin: calc(2rem * -1);
  margin: calc(var(--su-7) * -1)
}

.-m-8 {
  margin: calc(3rem * -1);
  margin: calc(var(--su-8) * -1)
}

.-m-9 {
  margin: calc(4rem * -1);
  margin: calc(var(--su-9) * -1)
}

.-m-10 {
  margin: calc(8rem * -1);
  margin: calc(var(--su-10) * -1)
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto
}

.my-unset {
  margin-top: 0;
  margin-top: initial;
  margin-bottom: 0;
  margin-bottom: initial
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0
}

.my-05 {
  margin-top: 0.125rem;
  margin-top: var(--su-05);
  margin-bottom: 0.125rem;
  margin-bottom: var(--su-05)
}

.my-1 {
  margin-top: 0.25rem;
  margin-top: var(--su-1);
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

.my-2 {
  margin-top: 0.5rem;
  margin-top: var(--su-2);
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2)
}

.my-3 {
  margin-top: 0.75rem;
  margin-top: var(--su-3);
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3)
}

.my-4 {
  margin-top: 1rem;
  margin-top: var(--su-4);
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

.my-5 {
  margin-top: 1.25rem;
  margin-top: var(--su-5);
  margin-bottom: 1.25rem;
  margin-bottom: var(--su-5)
}

.my-6 {
  margin-top: 1.5rem;
  margin-top: var(--su-6);
  margin-bottom: 1.5rem;
  margin-bottom: var(--su-6)
}

.my-7 {
  margin-top: 2rem;
  margin-top: var(--su-7);
  margin-bottom: 2rem;
  margin-bottom: var(--su-7)
}

.my-8 {
  margin-top: 3rem;
  margin-top: var(--su-8);
  margin-bottom: 3rem;
  margin-bottom: var(--su-8)
}

.my-9 {
  margin-top: 4rem;
  margin-top: var(--su-9);
  margin-bottom: 4rem;
  margin-bottom: var(--su-9)
}

.my-10 {
  margin-top: 8rem;
  margin-top: var(--su-10);
  margin-bottom: 8rem;
  margin-bottom: var(--su-10)
}

.-my-05 {
  margin-top: calc(0.125rem * -1);
  margin-top: calc(var(--su-05) * -1);
  margin-bottom: calc(0.125rem * -1);
  margin-bottom: calc(var(--su-05) * -1)
}

.-my-1 {
  margin-top: calc(0.25rem * -1);
  margin-top: calc(var(--su-1) * -1);
  margin-bottom: calc(0.25rem * -1);
  margin-bottom: calc(var(--su-1) * -1)
}

.-my-2 {
  margin-top: calc(0.5rem * -1);
  margin-top: calc(var(--su-2) * -1);
  margin-bottom: calc(0.5rem * -1);
  margin-bottom: calc(var(--su-2) * -1)
}

.-my-3 {
  margin-top: calc(0.75rem * -1);
  margin-top: calc(var(--su-3) * -1);
  margin-bottom: calc(0.75rem * -1);
  margin-bottom: calc(var(--su-3) * -1)
}

.-my-4 {
  margin-top: calc(1rem * -1);
  margin-top: calc(var(--su-4) * -1);
  margin-bottom: calc(1rem * -1);
  margin-bottom: calc(var(--su-4) * -1)
}

.-my-5 {
  margin-top: calc(1.25rem * -1);
  margin-top: calc(var(--su-5) * -1);
  margin-bottom: calc(1.25rem * -1);
  margin-bottom: calc(var(--su-5) * -1)
}

.-my-6 {
  margin-top: calc(1.5rem * -1);
  margin-top: calc(var(--su-6) * -1);
  margin-bottom: calc(1.5rem * -1);
  margin-bottom: calc(var(--su-6) * -1)
}

.-my-7 {
  margin-top: calc(2rem * -1);
  margin-top: calc(var(--su-7) * -1);
  margin-bottom: calc(2rem * -1);
  margin-bottom: calc(var(--su-7) * -1)
}

.-my-8 {
  margin-top: calc(3rem * -1);
  margin-top: calc(var(--su-8) * -1);
  margin-bottom: calc(3rem * -1);
  margin-bottom: calc(var(--su-8) * -1)
}

.-my-9 {
  margin-top: calc(4rem * -1);
  margin-top: calc(var(--su-9) * -1);
  margin-bottom: calc(4rem * -1);
  margin-bottom: calc(var(--su-9) * -1)
}

.-my-10 {
  margin-top: calc(8rem * -1);
  margin-top: calc(var(--su-10) * -1);
  margin-bottom: calc(8rem * -1);
  margin-bottom: calc(var(--su-10) * -1)
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.mx-unset {
  margin-left: 0;
  margin-left: initial;
  margin-right: 0;
  margin-right: initial
}

.mx-0 {
  margin-left: 0;
  margin-right: 0
}

.mx-05 {
  margin-left: 0.125rem;
  margin-left: var(--su-05);
  margin-right: 0.125rem;
  margin-right: var(--su-05)
}

.mx-1 {
  margin-left: 0.25rem;
  margin-left: var(--su-1);
  margin-right: 0.25rem;
  margin-right: var(--su-1)
}

.mx-2 {
  margin-left: 0.5rem;
  margin-left: var(--su-2);
  margin-right: 0.5rem;
  margin-right: var(--su-2)
}

.mx-3 {
  margin-left: 0.75rem;
  margin-left: var(--su-3);
  margin-right: 0.75rem;
  margin-right: var(--su-3)
}

.mx-4 {
  margin-left: 1rem;
  margin-left: var(--su-4);
  margin-right: 1rem;
  margin-right: var(--su-4)
}

.mx-5 {
  margin-left: 1.25rem;
  margin-left: var(--su-5);
  margin-right: 1.25rem;
  margin-right: var(--su-5)
}

.mx-6 {
  margin-left: 1.5rem;
  margin-left: var(--su-6);
  margin-right: 1.5rem;
  margin-right: var(--su-6)
}

.mx-7 {
  margin-left: 2rem;
  margin-left: var(--su-7);
  margin-right: 2rem;
  margin-right: var(--su-7)
}

.mx-8 {
  margin-left: 3rem;
  margin-left: var(--su-8);
  margin-right: 3rem;
  margin-right: var(--su-8)
}

.mx-9 {
  margin-left: 4rem;
  margin-left: var(--su-9);
  margin-right: 4rem;
  margin-right: var(--su-9)
}

.mx-10 {
  margin-left: 8rem;
  margin-left: var(--su-10);
  margin-right: 8rem;
  margin-right: var(--su-10)
}

.-mx-05 {
  margin-left: calc(0.125rem * -1);
  margin-left: calc(var(--su-05) * -1);
  margin-right: calc(0.125rem * -1);
  margin-right: calc(var(--su-05) * -1)
}

.-mx-1 {
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1);
  margin-right: calc(0.25rem * -1);
  margin-right: calc(var(--su-1) * -1)
}

.-mx-2 {
  margin-left: calc(0.5rem * -1);
  margin-left: calc(var(--su-2) * -1);
  margin-right: calc(0.5rem * -1);
  margin-right: calc(var(--su-2) * -1)
}

.-mx-3 {
  margin-left: calc(0.75rem * -1);
  margin-left: calc(var(--su-3) * -1);
  margin-right: calc(0.75rem * -1);
  margin-right: calc(var(--su-3) * -1)
}

.-mx-4 {
  margin-left: calc(1rem * -1);
  margin-left: calc(var(--su-4) * -1);
  margin-right: calc(1rem * -1);
  margin-right: calc(var(--su-4) * -1)
}

.-mx-5 {
  margin-left: calc(1.25rem * -1);
  margin-left: calc(var(--su-5) * -1);
  margin-right: calc(1.25rem * -1);
  margin-right: calc(var(--su-5) * -1)
}

.-mx-6 {
  margin-left: calc(1.5rem * -1);
  margin-left: calc(var(--su-6) * -1);
  margin-right: calc(1.5rem * -1);
  margin-right: calc(var(--su-6) * -1)
}

.-mx-7 {
  margin-left: calc(2rem * -1);
  margin-left: calc(var(--su-7) * -1);
  margin-right: calc(2rem * -1);
  margin-right: calc(var(--su-7) * -1)
}

.-mx-8 {
  margin-left: calc(3rem * -1);
  margin-left: calc(var(--su-8) * -1);
  margin-right: calc(3rem * -1);
  margin-right: calc(var(--su-8) * -1)
}

.-mx-9 {
  margin-left: calc(4rem * -1);
  margin-left: calc(var(--su-9) * -1);
  margin-right: calc(4rem * -1);
  margin-right: calc(var(--su-9) * -1)
}

.-mx-10 {
  margin-left: calc(8rem * -1);
  margin-left: calc(var(--su-10) * -1);
  margin-right: calc(8rem * -1);
  margin-right: calc(var(--su-10) * -1)
}

.mt-auto {
  margin-top: auto
}

.mt-unset {
  margin-top: 0;
  margin-top: initial
}

.mt-0 {
  margin-top: 0
}

.mt-05 {
  margin-top: 0.125rem;
  margin-top: var(--su-05)
}

.mt-1 {
  margin-top: 0.25rem;
  margin-top: var(--su-1)
}

.mt-2 {
  margin-top: 0.5rem;
  margin-top: var(--su-2)
}

.mt-3 {
  margin-top: 0.75rem;
  margin-top: var(--su-3)
}

.mt-4 {
  margin-top: 1rem;
  margin-top: var(--su-4)
}

.mt-5 {
  margin-top: 1.25rem;
  margin-top: var(--su-5)
}

.mt-6 {
  margin-top: 1.5rem;
  margin-top: var(--su-6)
}

.mt-7 {
  margin-top: 2rem;
  margin-top: var(--su-7)
}

.mt-8 {
  margin-top: 3rem;
  margin-top: var(--su-8)
}

.mt-9 {
  margin-top: 4rem;
  margin-top: var(--su-9)
}

.mt-10 {
  margin-top: 8rem;
  margin-top: var(--su-10)
}

.-mt-05 {
  margin-top: calc(0.125rem * -1);
  margin-top: calc(var(--su-05) * -1)
}

.-mt-1 {
  margin-top: calc(0.25rem * -1);
  margin-top: calc(var(--su-1) * -1)
}

.-mt-2 {
  margin-top: calc(0.5rem * -1);
  margin-top: calc(var(--su-2) * -1)
}

.-mt-3 {
  margin-top: calc(0.75rem * -1);
  margin-top: calc(var(--su-3) * -1)
}

.-mt-4 {
  margin-top: calc(1rem * -1);
  margin-top: calc(var(--su-4) * -1)
}

.-mt-5 {
  margin-top: calc(1.25rem * -1);
  margin-top: calc(var(--su-5) * -1)
}

.-mt-6 {
  margin-top: calc(1.5rem * -1);
  margin-top: calc(var(--su-6) * -1)
}

.-mt-7 {
  margin-top: calc(2rem * -1);
  margin-top: calc(var(--su-7) * -1)
}

.-mt-8 {
  margin-top: calc(3rem * -1);
  margin-top: calc(var(--su-8) * -1)
}

.-mt-9 {
  margin-top: calc(4rem * -1);
  margin-top: calc(var(--su-9) * -1)
}

.-mt-10 {
  margin-top: calc(8rem * -1);
  margin-top: calc(var(--su-10) * -1)
}

.mb-auto {
  margin-bottom: auto
}

.mb-unset {
  margin-bottom: 0;
  margin-bottom: initial
}

.mb-0 {
  margin-bottom: 0
}

.mb-05 {
  margin-bottom: 0.125rem;
  margin-bottom: var(--su-05)
}

.mb-1 {
  margin-bottom: 0.25rem;
  margin-bottom: var(--su-1)
}

.mb-2 {
  margin-bottom: 0.5rem;
  margin-bottom: var(--su-2)
}

.mb-3 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--su-3)
}

.mb-4 {
  margin-bottom: 1rem;
  margin-bottom: var(--su-4)
}

.mb-5 {
  margin-bottom: 1.25rem;
  margin-bottom: var(--su-5)
}

.mb-6 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--su-6)
}

.mb-7 {
  margin-bottom: 2rem;
  margin-bottom: var(--su-7)
}

.mb-8 {
  margin-bottom: 3rem;
  margin-bottom: var(--su-8)
}

.mb-9 {
  margin-bottom: 4rem;
  margin-bottom: var(--su-9)
}

.mb-10 {
  margin-bottom: 8rem;
  margin-bottom: var(--su-10)
}

.-mb-05 {
  margin-bottom: calc(0.125rem * -1);
  margin-bottom: calc(var(--su-05) * -1)
}

.-mb-1 {
  margin-bottom: calc(0.25rem * -1);
  margin-bottom: calc(var(--su-1) * -1)
}

.-mb-2 {
  margin-bottom: calc(0.5rem * -1);
  margin-bottom: calc(var(--su-2) * -1)
}

.-mb-3 {
  margin-bottom: calc(0.75rem * -1);
  margin-bottom: calc(var(--su-3) * -1)
}

.-mb-4 {
  margin-bottom: calc(1rem * -1);
  margin-bottom: calc(var(--su-4) * -1)
}

.-mb-5 {
  margin-bottom: calc(1.25rem * -1);
  margin-bottom: calc(var(--su-5) * -1)
}

.-mb-6 {
  margin-bottom: calc(1.5rem * -1);
  margin-bottom: calc(var(--su-6) * -1)
}

.-mb-7 {
  margin-bottom: calc(2rem * -1);
  margin-bottom: calc(var(--su-7) * -1)
}

.-mb-8 {
  margin-bottom: calc(3rem * -1);
  margin-bottom: calc(var(--su-8) * -1)
}

.-mb-9 {
  margin-bottom: calc(4rem * -1);
  margin-bottom: calc(var(--su-9) * -1)
}

.-mb-10 {
  margin-bottom: calc(8rem * -1);
  margin-bottom: calc(var(--su-10) * -1)
}

.ml-auto {
  margin-left: auto
}

.ml-unset {
  margin-left: 0;
  margin-left: initial
}

.ml-0 {
  margin-left: 0
}

.ml-05 {
  margin-left: 0.125rem;
  margin-left: var(--su-05)
}

.ml-1 {
  margin-left: 0.25rem;
  margin-left: var(--su-1)
}

.ml-2 {
  margin-left: 0.5rem;
  margin-left: var(--su-2)
}

.ml-3 {
  margin-left: 0.75rem;
  margin-left: var(--su-3)
}

.ml-4 {
  margin-left: 1rem;
  margin-left: var(--su-4)
}

.ml-5 {
  margin-left: 1.25rem;
  margin-left: var(--su-5)
}

.ml-6 {
  margin-left: 1.5rem;
  margin-left: var(--su-6)
}

.ml-7 {
  margin-left: 2rem;
  margin-left: var(--su-7)
}

.ml-8 {
  margin-left: 3rem;
  margin-left: var(--su-8)
}

.ml-9 {
  margin-left: 4rem;
  margin-left: var(--su-9)
}

.ml-10 {
  margin-left: 8rem;
  margin-left: var(--su-10)
}

.-ml-05 {
  margin-left: calc(0.125rem * -1);
  margin-left: calc(var(--su-05) * -1)
}

.-ml-1 {
  margin-left: calc(0.25rem * -1);
  margin-left: calc(var(--su-1) * -1)
}

.-ml-2 {
  margin-left: calc(0.5rem * -1);
  margin-left: calc(var(--su-2) * -1)
}

.-ml-3 {
  margin-left: calc(0.75rem * -1);
  margin-left: calc(var(--su-3) * -1)
}

.-ml-4 {
  margin-left: calc(1rem * -1);
  margin-left: calc(var(--su-4) * -1)
}

.-ml-5 {
  margin-left: calc(1.25rem * -1);
  margin-left: calc(var(--su-5) * -1)
}

.-ml-6 {
  margin-left: calc(1.5rem * -1);
  margin-left: calc(var(--su-6) * -1)
}

.-ml-7 {
  margin-left: calc(2rem * -1);
  margin-left: calc(var(--su-7) * -1)
}

.-ml-8 {
  margin-left: calc(3rem * -1);
  margin-left: calc(var(--su-8) * -1)
}

.-ml-9 {
  margin-left: calc(4rem * -1);
  margin-left: calc(var(--su-9) * -1)
}

.-ml-10 {
  margin-left: calc(8rem * -1);
  margin-left: calc(var(--su-10) * -1)
}

.mr-auto {
  margin-right: auto
}

.mr-unset {
  margin-right: 0;
  margin-right: initial
}

.mr-0 {
  margin-right: 0
}

.mr-05 {
  margin-right: 0.125rem;
  margin-right: var(--su-05)
}

.mr-1 {
  margin-right: 0.25rem;
  margin-right: var(--su-1)
}

.mr-2 {
  margin-right: 0.5rem;
  margin-right: var(--su-2)
}

.mr-3 {
  margin-right: 0.75rem;
  margin-right: var(--su-3)
}

.mr-4 {
  margin-right: 1rem;
  margin-right: var(--su-4)
}

.mr-5 {
  margin-right: 1.25rem;
  margin-right: var(--su-5)
}

.mr-6 {
  margin-right: 1.5rem;
  margin-right: var(--su-6)
}

.mr-7 {
  margin-right: 2rem;
  margin-right: var(--su-7)
}

.mr-8 {
  margin-right: 3rem;
  margin-right: var(--su-8)
}

.mr-9 {
  margin-right: 4rem;
  margin-right: var(--su-9)
}

.mr-10 {
  margin-right: 8rem;
  margin-right: var(--su-10)
}

.-mr-05 {
  margin-right: calc(0.125rem * -1);
  margin-right: calc(var(--su-05) * -1)
}

.-mr-1 {
  margin-right: calc(0.25rem * -1);
  margin-right: calc(var(--su-1) * -1)
}

.-mr-2 {
  margin-right: calc(0.5rem * -1);
  margin-right: calc(var(--su-2) * -1)
}

.-mr-3 {
  margin-right: calc(0.75rem * -1);
  margin-right: calc(var(--su-3) * -1)
}

.-mr-4 {
  margin-right: calc(1rem * -1);
  margin-right: calc(var(--su-4) * -1)
}

.-mr-5 {
  margin-right: calc(1.25rem * -1);
  margin-right: calc(var(--su-5) * -1)
}

.-mr-6 {
  margin-right: calc(1.5rem * -1);
  margin-right: calc(var(--su-6) * -1)
}

.-mr-7 {
  margin-right: calc(2rem * -1);
  margin-right: calc(var(--su-7) * -1)
}

.-mr-8 {
  margin-right: calc(3rem * -1);
  margin-right: calc(var(--su-8) * -1)
}

.-mr-9 {
  margin-right: calc(4rem * -1);
  margin-right: calc(var(--su-9) * -1)
}

.-mr-10 {
  margin-right: calc(8rem * -1);
  margin-right: calc(var(--su-10) * -1)
}

.p-0 {
  padding: 0
}

.p-unset {
  padding: 0;
  padding: initial
}

.p-05 {
  padding: 0.125rem;
  padding: var(--su-05)
}

.p-1 {
  padding: 0.25rem;
  padding: var(--su-1)
}

.p-2 {
  padding: 0.5rem;
  padding: var(--su-2)
}

.p-3 {
  padding: 0.75rem;
  padding: var(--su-3)
}

.p-4 {
  padding: 1rem;
  padding: var(--su-4)
}

.p-5 {
  padding: 1.25rem;
  padding: var(--su-5)
}

.p-6 {
  padding: 1.5rem;
  padding: var(--su-6)
}

.p-7 {
  padding: 2rem;
  padding: var(--su-7)
}

.p-8 {
  padding: 3rem;
  padding: var(--su-8)
}

.p-9 {
  padding: 4rem;
  padding: var(--su-9)
}

.p-10 {
  padding: 8rem;
  padding: var(--su-10)
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0
}

.py-unset {
  padding-top: 0;
  padding-top: initial;
  padding-bottom: 0;
  padding-bottom: initial
}

.py-05 {
  padding-top: 0.125rem;
  padding-top: var(--su-05);
  padding-bottom: 0.125rem;
  padding-bottom: var(--su-05)
}

.py-1 {
  padding-top: 0.25rem;
  padding-top: var(--su-1);
  padding-bottom: 0.25rem;
  padding-bottom: var(--su-1)
}

.py-2 {
  padding-top: 0.5rem;
  padding-top: var(--su-2);
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2)
}

.py-3 {
  padding-top: 0.75rem;
  padding-top: var(--su-3);
  padding-bottom: 0.75rem;
  padding-bottom: var(--su-3)
}

.py-4 {
  padding-top: 1rem;
  padding-top: var(--su-4);
  padding-bottom: 1rem;
  padding-bottom: var(--su-4)
}

.py-5 {
  padding-top: 1.25rem;
  padding-top: var(--su-5);
  padding-bottom: 1.25rem;
  padding-bottom: var(--su-5)
}

.py-6 {
  padding-top: 1.5rem;
  padding-top: var(--su-6);
  padding-bottom: 1.5rem;
  padding-bottom: var(--su-6)
}

.py-7 {
  padding-top: 2rem;
  padding-top: var(--su-7);
  padding-bottom: 2rem;
  padding-bottom: var(--su-7)
}

.py-8 {
  padding-top: 3rem;
  padding-top: var(--su-8);
  padding-bottom: 3rem;
  padding-bottom: var(--su-8)
}

.py-9 {
  padding-top: 4rem;
  padding-top: var(--su-9);
  padding-bottom: 4rem;
  padding-bottom: var(--su-9)
}

.py-10 {
  padding-top: 8rem;
  padding-top: var(--su-10);
  padding-bottom: 8rem;
  padding-bottom: var(--su-10)
}

.px-0 {
  padding-left: 0;
  padding-right: 0
}

.px-unset {
  padding-left: 0;
  padding-left: initial;
  padding-right: 0;
  padding-right: initial
}

.px-05 {
  padding-left: 0.125rem;
  padding-left: var(--su-05);
  padding-right: 0.125rem;
  padding-right: var(--su-05)
}

.px-1 {
  padding-left: 0.25rem;
  padding-left: var(--su-1);
  padding-right: 0.25rem;
  padding-right: var(--su-1)
}

.px-2 {
  padding-left: 0.5rem;
  padding-left: var(--su-2);
  padding-right: 0.5rem;
  padding-right: var(--su-2)
}

.px-3 {
  padding-left: 0.75rem;
  padding-left: var(--su-3);
  padding-right: 0.75rem;
  padding-right: var(--su-3)
}

.px-4 {
  padding-left: 1rem;
  padding-left: var(--su-4);
  padding-right: 1rem;
  padding-right: var(--su-4)
}

.px-5 {
  padding-left: 1.25rem;
  padding-left: var(--su-5);
  padding-right: 1.25rem;
  padding-right: var(--su-5)
}

.px-6 {
  padding-left: 1.5rem;
  padding-left: var(--su-6);
  padding-right: 1.5rem;
  padding-right: var(--su-6)
}

.px-7 {
  padding-left: 2rem;
  padding-left: var(--su-7);
  padding-right: 2rem;
  padding-right: var(--su-7)
}

.px-8 {
  padding-left: 3rem;
  padding-left: var(--su-8);
  padding-right: 3rem;
  padding-right: var(--su-8)
}

.px-9 {
  padding-left: 4rem;
  padding-left: var(--su-9);
  padding-right: 4rem;
  padding-right: var(--su-9)
}

.px-10 {
  padding-left: 8rem;
  padding-left: var(--su-10);
  padding-right: 8rem;
  padding-right: var(--su-10)
}

.pt-0 {
  padding-top: 0
}

.pt-unset {
  padding-top: 0;
  padding-top: initial
}

.pt-05 {
  padding-top: 0.125rem;
  padding-top: var(--su-05)
}

.pt-1 {
  padding-top: 0.25rem;
  padding-top: var(--su-1)
}

.pt-2 {
  padding-top: 0.5rem;
  padding-top: var(--su-2)
}

.pt-3 {
  padding-top: 0.75rem;
  padding-top: var(--su-3)
}

.pt-4 {
  padding-top: 1rem;
  padding-top: var(--su-4)
}

.pt-5 {
  padding-top: 1.25rem;
  padding-top: var(--su-5)
}

.pt-6 {
  padding-top: 1.5rem;
  padding-top: var(--su-6)
}

.pt-7 {
  padding-top: 2rem;
  padding-top: var(--su-7)
}

.pt-8 {
  padding-top: 3rem;
  padding-top: var(--su-8)
}

.pt-9 {
  padding-top: 4rem;
  padding-top: var(--su-9)
}

.pt-10 {
  padding-top: 8rem;
  padding-top: var(--su-10)
}

.pb-0 {
  padding-bottom: 0
}

.pb-unset {
  padding-bottom: 0;
  padding-bottom: initial
}

.pb-05 {
  padding-bottom: 0.125rem;
  padding-bottom: var(--su-05)
}

.pb-1 {
  padding-bottom: 0.25rem;
  padding-bottom: var(--su-1)
}

.pb-2 {
  padding-bottom: 0.5rem;
  padding-bottom: var(--su-2)
}

.pb-3 {
  padding-bottom: 0.75rem;
  padding-bottom: var(--su-3)
}

.pb-4 {
  padding-bottom: 1rem;
  padding-bottom: var(--su-4)
}

.pb-5 {
  padding-bottom: 1.25rem;
  padding-bottom: var(--su-5)
}

.pb-6 {
  padding-bottom: 1.5rem;
  padding-bottom: var(--su-6)
}

.pb-7 {
  padding-bottom: 2rem;
  padding-bottom: var(--su-7)
}

.pb-8 {
  padding-bottom: 3rem;
  padding-bottom: var(--su-8)
}

.pb-9 {
  padding-bottom: 4rem;
  padding-bottom: var(--su-9)
}

.pb-10 {
  padding-bottom: 8rem;
  padding-bottom: var(--su-10)
}

.pl-0 {
  padding-left: 0
}

.pl-unset {
  padding-left: 0;
  padding-left: initial
}

.pl-05 {
  padding-left: 0.125rem;
  padding-left: var(--su-05)
}

.pl-1 {
  padding-left: 0.25rem;
  padding-left: var(--su-1)
}

.pl-2 {
  padding-left: 0.5rem;
  padding-left: var(--su-2)
}

.pl-3 {
  padding-left: 0.75rem;
  padding-left: var(--su-3)
}

.pl-4 {
  padding-left: 1rem;
  padding-left: var(--su-4)
}

.pl-5 {
  padding-left: 1.25rem;
  padding-left: var(--su-5)
}

.pl-6 {
  padding-left: 1.5rem;
  padding-left: var(--su-6)
}

.pl-7 {
  padding-left: 2rem;
  padding-left: var(--su-7)
}

.pl-8 {
  padding-left: 3rem;
  padding-left: var(--su-8)
}

.pl-9 {
  padding-left: 4rem;
  padding-left: var(--su-9)
}

.pl-10 {
  padding-left: 8rem;
  padding-left: var(--su-10)
}

.pr-0 {
  padding-right: 0
}

.pr-unset {
  padding-right: 0;
  padding-right: initial
}

.pr-05 {
  padding-right: 0.125rem;
  padding-right: var(--su-05)
}

.pr-1 {
  padding-right: 0.25rem;
  padding-right: var(--su-1)
}

.pr-2 {
  padding-right: 0.5rem;
  padding-right: var(--su-2)
}

.pr-3 {
  padding-right: 0.75rem;
  padding-right: var(--su-3)
}

.pr-4 {
  padding-right: 1rem;
  padding-right: var(--su-4)
}

.pr-5 {
  padding-right: 1.25rem;
  padding-right: var(--su-5)
}

.pr-6 {
  padding-right: 1.5rem;
  padding-right: var(--su-6)
}

.pr-7 {
  padding-right: 2rem;
  padding-right: var(--su-7)
}

.pr-8 {
  padding-right: 3rem;
  padding-right: var(--su-8)
}

.pr-9 {
  padding-right: 4rem;
  padding-right: var(--su-9)
}

.pr-10 {
  padding-right: 8rem;
  padding-right: var(--su-10)
}

.ff-monospace {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  font-family: var(--ff-monospace)
}

.fs-2xs {
  font-size: 0.675rem;
  font-size: var(--fs-2xs)
}

.fs-xs {
  font-size: 0.75rem;
  font-size: var(--fs-xs)
}

.fs-s {
  font-size: 0.875rem;
  font-size: var(--fs-s)
}

.fs-base {
  font-size: 1rem;
  font-size: var(--fs-base)
}

.fs-l {
  font-size: 1.125rem;
  font-size: var(--fs-l)
}

.fs-xl {
  font-size: 1.25rem;
  font-size: var(--fs-xl)
}

.fs-2xl {
  font-size: 1.5rem;
  font-size: var(--fs-2xl)
}

.fs-3xl {
  font-size: 1.875rem;
  font-size: var(--fs-3xl)
}

.fs-4xl {
  font-size: 2.25rem;
  font-size: var(--fs-4xl)
}

.fs-5xl {
  font-size: 3rem;
  font-size: var(--fs-5xl)
}

.lh-tight {
  line-height: 1.25;
  line-height: var(--lh-tight)
}

.lh-base {
  line-height: 1.5;
  line-height: var(--lh-base)
}

.fw-normal {
  font-weight: 400;
  font-weight: var(--fw-normal)
}

.fw-medium {
  font-weight: 500;
  font-weight: var(--fw-medium)
}

.fw-bold {
  font-weight: 700;
  font-weight: var(--fw-bold)
}

.fw-heavy {
  font-weight: 800;
  font-weight: var(--fw-heavy)
}

.list-none {
  list-style-type: none
}

.list-disc {
  list-style-type: disc
}

.list-decimal {
  list-style-type: decimal
}

.text-underline {
  text-decoration: underline
}

.text-none {
  text-decoration: none
}

.fs-italic {
  font-style: italic
}

.text-uppercase {
  text-transform: uppercase
}

.align-left {
  text-align: left
}

.align-center {
  text-align: center
}

.align-right {
  text-align: right
}

.align-top {
  vertical-align: top
}

.align-middle {
  vertical-align: middle
}

.align-text-top {
  vertical-align: text-top
}

.align-text-bottom {
  vertical-align: text-bottom
}

.whitespace-nowrap {
  white-space: nowrap
}

.hidden {
  display: none
}

.block {
  display: block
}

.inline {
  display: inline
}

.inline-block {
  display: inline-block
}

.flex {
  display: flex
}

.inline-flex {
  display: inline-flex
}

.grid {
  display: grid
}

.table {
  display: table
}

.static {
  position: static
}

.absolute {
  position: absolute
}

.fixed {
  position: fixed
}

.sticky {
  position: sticky
}

.relative {
  position: relative
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover
}

.aspect-16-9 {
  aspect-ratio: calc(16 / 9)
}

.break-word {
  word-break: break-word
}

.resize-y {
  resize: vertical
}

@media (min-width: 640px) {
  .s\:flex-row {
    flex-direction: row
  }

  .s\:flex-col {
    flex-direction: column
  }

  .s\:flex-wrap {
    flex-wrap: wrap
  }

  .s\:flex-nowrap {
    flex-wrap: nowrap
  }

  .s\:items-stretch {
    align-items: stretch
  }

  .s\:items-start {
    align-items: flex-start
  }

  .s\:items-center {
    align-items: center
  }

  .s\:items-end {
    align-items: flex-end
  }

  .s\:basis-1-5 {
    flex-basis: 20%
  }

  .s\:basis-2-5 {
    flex-basis: 40%
  }

  .s\:basis-3-5 {
    flex-basis: 60%
  }

  .s\:basis-4-5 {
    flex-basis: 80%
  }

  .s\:basis-1-4 {
    flex-basis: 25%
  }

  .s\:basis-1-3 {
    flex-basis: 33.333333%
  }

  .s\:basis-1-2 {
    flex-basis: 50%
  }

  .s\:basis-2-3 {
    flex-basis: 66.666667%
  }

  .s\:basis-3-4 {
    flex-basis: 75%
  }

  .s\:content-start {
    align-content: flex-start
  }

  .s\:content-center {
    align-content: center
  }

  .s\:content-end {
    align-content: flex-end
  }

  .s\:content-between {
    align-content: space-between
  }

  .s\:content-around {
    align-content: space-around
  }

  .s\:self-auto {
    align-self: auto
  }

  .s\:self-start {
    align-self: flex-start
  }

  .s\:self-center {
    align-self: center
  }

  .s\:self-end {
    align-self: flex-end
  }

  .s\:self-stretch {
    align-self: stretch
  }

  .s\:justify-start {
    justify-content: flex-start
  }

  .s\:justify-center {
    justify-content: center
  }

  .s\:justify-end {
    justify-content: flex-end
  }

  .s\:justify-between {
    justify-content: space-between
  }

  .s\:justify-around {
    justify-content: space-around
  }

  .s\:justify-stretch {
    justify-content: stretch
  }

  .s\:flex-initial {
    flex: 0 1 auto
  }

  .s\:flex-1 {
    flex: 1 1
  }

  .s\:flex-auto {
    flex: 1 1 auto
  }

  .s\:flex-none {
    flex: none
  }

  .s\:order-first {
    order: -9999
  }

  .s\:order-last {
    order: 9999
  }

  .s\:order-0 {
    order: 0
  }

  .s\:gap-0 {
    gap: 0
  }

  .s\:gap-px {
    gap: 1px
  }

  .s\:gap-05 {
    gap: 0.125rem;
    gap: var(--su-05)
  }

  .s\:gap-1 {
    gap: 0.25rem;
    gap: var(--su-1)
  }

  .s\:gap-2 {
    gap: 0.5rem;
    gap: var(--su-2)
  }

  .s\:gap-3 {
    gap: 0.75rem;
    gap: var(--su-3)
  }

  .s\:gap-4 {
    gap: 1rem;
    gap: var(--su-4)
  }

  .s\:gap-5 {
    gap: 1.25rem;
    gap: var(--su-5)
  }

  .s\:gap-6 {
    gap: 1.5rem;
    gap: var(--su-6)
  }

  .s\:gap-7 {
    gap: 2rem;
    gap: var(--su-7)
  }

  .s\:gap-8 {
    gap: 3rem;
    gap: var(--su-8)
  }

  .s\:gap-9 {
    gap: 4rem;
    gap: var(--su-9)
  }

  .s\:gap-10 {
    gap: 8rem;
    gap: var(--su-10)
  }

  .s\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .s\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .s\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .s\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .s\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .s\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .s\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .s\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .s\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .s\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .s\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .s\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .s\:grid-rows-none {
    grid-template-rows: none
  }

  .s\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .s\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .s\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .s\:grid-flow-row {
    grid-auto-flow: row
  }

  .s\:grid-flow-col {
    grid-auto-flow: column
  }

  .s\:top-auto {
    top: auto
  }

  .s\:top-unset {
    top: auto;
    top: initial
  }

  .s\:top-0 {
    top: 0
  }

  .s\:top-100 {
    top: 100%
  }

  .s\:top-05 {
    top: 0.125rem;
    top: var(--su-05)
  }

  .s\:top-1 {
    top: 0.25rem;
    top: var(--su-1)
  }

  .s\:top-2 {
    top: 0.5rem;
    top: var(--su-2)
  }

  .s\:top-3 {
    top: 0.75rem;
    top: var(--su-3)
  }

  .s\:top-4 {
    top: 1rem;
    top: var(--su-4)
  }

  .s\:top-5 {
    top: 1.25rem;
    top: var(--su-5)
  }

  .s\:top-6 {
    top: 1.5rem;
    top: var(--su-6)
  }

  .s\:top-7 {
    top: 2rem;
    top: var(--su-7)
  }

  .s\:top-8 {
    top: 3rem;
    top: var(--su-8)
  }

  .s\:top-9 {
    top: 4rem;
    top: var(--su-9)
  }

  .s\:top-10 {
    top: 8rem;
    top: var(--su-10)
  }

  .s\:-top-100 {
    top: -100%
  }

  .s\:-top-05 {
    top: calc(0.125rem * -1);
    top: calc(var(--su-05) * -1)
  }

  .s\:-top-1 {
    top: calc(0.25rem * -1);
    top: calc(var(--su-1) * -1)
  }

  .s\:-top-2 {
    top: calc(0.5rem * -1);
    top: calc(var(--su-2) * -1)
  }

  .s\:-top-3 {
    top: calc(0.75rem * -1);
    top: calc(var(--su-3) * -1)
  }

  .s\:-top-4 {
    top: calc(1rem * -1);
    top: calc(var(--su-4) * -1)
  }

  .s\:-top-5 {
    top: calc(1.25rem * -1);
    top: calc(var(--su-5) * -1)
  }

  .s\:-top-6 {
    top: calc(1.5rem * -1);
    top: calc(var(--su-6) * -1)
  }

  .s\:-top-7 {
    top: calc(2rem * -1);
    top: calc(var(--su-7) * -1)
  }

  .s\:-top-8 {
    top: calc(3rem * -1);
    top: calc(var(--su-8) * -1)
  }

  .s\:-top-9 {
    top: calc(4rem * -1);
    top: calc(var(--su-9) * -1)
  }

  .s\:-top-10 {
    top: calc(8rem * -1);
    top: calc(var(--su-10) * -1)
  }

  .s\:bottom-auto {
    bottom: auto
  }

  .s\:bottom-unset {
    bottom: auto;
    bottom: initial
  }

  .s\:bottom-0 {
    bottom: 0
  }

  .s\:bottom-100 {
    bottom: 100%
  }

  .s\:bottom-05 {
    bottom: 0.125rem;
    bottom: var(--su-05)
  }

  .s\:bottom-1 {
    bottom: 0.25rem;
    bottom: var(--su-1)
  }

  .s\:bottom-2 {
    bottom: 0.5rem;
    bottom: var(--su-2)
  }

  .s\:bottom-3 {
    bottom: 0.75rem;
    bottom: var(--su-3)
  }

  .s\:bottom-4 {
    bottom: 1rem;
    bottom: var(--su-4)
  }

  .s\:bottom-5 {
    bottom: 1.25rem;
    bottom: var(--su-5)
  }

  .s\:bottom-6 {
    bottom: 1.5rem;
    bottom: var(--su-6)
  }

  .s\:bottom-7 {
    bottom: 2rem;
    bottom: var(--su-7)
  }

  .s\:bottom-8 {
    bottom: 3rem;
    bottom: var(--su-8)
  }

  .s\:bottom-9 {
    bottom: 4rem;
    bottom: var(--su-9)
  }

  .s\:bottom-10 {
    bottom: 8rem;
    bottom: var(--su-10)
  }

  .s\:-bottom-100 {
    bottom: -100%
  }

  .s\:-bottom-05 {
    bottom: calc(0.125rem * -1);
    bottom: calc(var(--su-05) * -1)
  }

  .s\:-bottom-1 {
    bottom: calc(0.25rem * -1);
    bottom: calc(var(--su-1) * -1)
  }

  .s\:-bottom-2 {
    bottom: calc(0.5rem * -1);
    bottom: calc(var(--su-2) * -1)
  }

  .s\:-bottom-3 {
    bottom: calc(0.75rem * -1);
    bottom: calc(var(--su-3) * -1)
  }

  .s\:-bottom-4 {
    bottom: calc(1rem * -1);
    bottom: calc(var(--su-4) * -1)
  }

  .s\:-bottom-5 {
    bottom: calc(1.25rem * -1);
    bottom: calc(var(--su-5) * -1)
  }

  .s\:-bottom-6 {
    bottom: calc(1.5rem * -1);
    bottom: calc(var(--su-6) * -1)
  }

  .s\:-bottom-7 {
    bottom: calc(2rem * -1);
    bottom: calc(var(--su-7) * -1)
  }

  .s\:-bottom-8 {
    bottom: calc(3rem * -1);
    bottom: calc(var(--su-8) * -1)
  }

  .s\:-bottom-9 {
    bottom: calc(4rem * -1);
    bottom: calc(var(--su-9) * -1)
  }

  .s\:-bottom-10 {
    bottom: calc(8rem * -1);
    bottom: calc(var(--su-10) * -1)
  }

  .s\:left-auto {
    left: auto
  }

  .s\:left-unset {
    left: auto;
    left: initial
  }

  .s\:left-0 {
    left: 0
  }

  .s\:left-100 {
    left: 100%
  }

  .s\:left-05 {
    left: 0.125rem;
    left: var(--su-05)
  }

  .s\:left-1 {
    left: 0.25rem;
    left: var(--su-1)
  }

  .s\:left-2 {
    left: 0.5rem;
    left: var(--su-2)
  }

  .s\:left-3 {
    left: 0.75rem;
    left: var(--su-3)
  }

  .s\:left-4 {
    left: 1rem;
    left: var(--su-4)
  }

  .s\:left-5 {
    left: 1.25rem;
    left: var(--su-5)
  }

  .s\:left-6 {
    left: 1.5rem;
    left: var(--su-6)
  }

  .s\:left-7 {
    left: 2rem;
    left: var(--su-7)
  }

  .s\:left-8 {
    left: 3rem;
    left: var(--su-8)
  }

  .s\:left-9 {
    left: 4rem;
    left: var(--su-9)
  }

  .s\:left-10 {
    left: 8rem;
    left: var(--su-10)
  }

  .s\:-left-100 {
    left: -100%
  }

  .s\:-left-05 {
    left: calc(0.125rem * -1);
    left: calc(var(--su-05) * -1)
  }

  .s\:-left-1 {
    left: calc(0.25rem * -1);
    left: calc(var(--su-1) * -1)
  }

  .s\:-left-2 {
    left: calc(0.5rem * -1);
    left: calc(var(--su-2) * -1)
  }

  .s\:-left-3 {
    left: calc(0.75rem * -1);
    left: calc(var(--su-3) * -1)
  }

  .s\:-left-4 {
    left: calc(1rem * -1);
    left: calc(var(--su-4) * -1)
  }

  .s\:-left-5 {
    left: calc(1.25rem * -1);
    left: calc(var(--su-5) * -1)
  }

  .s\:-left-6 {
    left: calc(1.5rem * -1);
    left: calc(var(--su-6) * -1)
  }

  .s\:-left-7 {
    left: calc(2rem * -1);
    left: calc(var(--su-7) * -1)
  }

  .s\:-left-8 {
    left: calc(3rem * -1);
    left: calc(var(--su-8) * -1)
  }

  .s\:-left-9 {
    left: calc(4rem * -1);
    left: calc(var(--su-9) * -1)
  }

  .s\:-left-10 {
    left: calc(8rem * -1);
    left: calc(var(--su-10) * -1)
  }

  .s\:right-auto {
    right: auto
  }

  .s\:right-unset {
    right: auto;
    right: initial
  }

  .s\:right-0 {
    right: 0
  }

  .s\:right-100 {
    right: 100%
  }

  .s\:right-05 {
    right: 0.125rem;
    right: var(--su-05)
  }

  .s\:right-1 {
    right: 0.25rem;
    right: var(--su-1)
  }

  .s\:right-2 {
    right: 0.5rem;
    right: var(--su-2)
  }

  .s\:right-3 {
    right: 0.75rem;
    right: var(--su-3)
  }

  .s\:right-4 {
    right: 1rem;
    right: var(--su-4)
  }

  .s\:right-5 {
    right: 1.25rem;
    right: var(--su-5)
  }

  .s\:right-6 {
    right: 1.5rem;
    right: var(--su-6)
  }

  .s\:right-7 {
    right: 2rem;
    right: var(--su-7)
  }

  .s\:right-8 {
    right: 3rem;
    right: var(--su-8)
  }

  .s\:right-9 {
    right: 4rem;
    right: var(--su-9)
  }

  .s\:right-10 {
    right: 8rem;
    right: var(--su-10)
  }

  .s\:-right-100 {
    right: -100%
  }

  .s\:-right-05 {
    right: calc(0.125rem * -1);
    right: calc(var(--su-05) * -1)
  }

  .s\:-right-1 {
    right: calc(0.25rem * -1);
    right: calc(var(--su-1) * -1)
  }

  .s\:-right-2 {
    right: calc(0.5rem * -1);
    right: calc(var(--su-2) * -1)
  }

  .s\:-right-3 {
    right: calc(0.75rem * -1);
    right: calc(var(--su-3) * -1)
  }

  .s\:-right-4 {
    right: calc(1rem * -1);
    right: calc(var(--su-4) * -1)
  }

  .s\:-right-5 {
    right: calc(1.25rem * -1);
    right: calc(var(--su-5) * -1)
  }

  .s\:-right-6 {
    right: calc(1.5rem * -1);
    right: calc(var(--su-6) * -1)
  }

  .s\:-right-7 {
    right: calc(2rem * -1);
    right: calc(var(--su-7) * -1)
  }

  .s\:-right-8 {
    right: calc(3rem * -1);
    right: calc(var(--su-8) * -1)
  }

  .s\:-right-9 {
    right: calc(4rem * -1);
    right: calc(var(--su-9) * -1)
  }

  .s\:-right-10 {
    right: calc(8rem * -1);
    right: calc(var(--su-10) * -1)
  }

  .s\:overflow-auto {
    overflow: auto
  }

  .s\:overflow-visible {
    overflow: visible
  }

  .s\:overflow-hidden {
    overflow: hidden
  }

  .s\:w-0 {
    width: 0
  }

  .s\:w-10 {
    width: 10%
  }

  .s\:w-15 {
    width: 15%
  }

  .s\:w-25 {
    width: 25%
  }

  .s\:w-50 {
    width: 50%
  }

  .s\:w-60 {
    width: 60%
  }

  .s\:w-70 {
    width: 70%
  }

  .s\:w-75 {
    width: 75%
  }

  .s\:w-80 {
    width: 80%
  }

  .s\:w-100 {
    width: 100%
  }

  .s\:w-auto {
    width: auto
  }

  .s\:w-full {
    width: 100vw
  }

  .s\:w-max {
    width: -moz-max-content;
    width: max-content
  }

  .s\:w-fit {
    width: -moz-fit-content;
    width: fit-content
  }

  .s\:max-w-0 {
    max-width: 0
  }

  .s\:max-w-25 {
    max-width: 25%
  }

  .s\:max-w-50 {
    max-width: 50%
  }

  .s\:max-w-75 {
    max-width: 75%
  }

  .s\:max-w-100 {
    max-width: 100%
  }

  .s\:max-w-unset {
    max-width: none;
    max-width: initial
  }

  .s\:m-auto {
    margin: auto
  }

  .s\:m-unset {
    margin: 0;
    margin: initial
  }

  .s\:m-0 {
    margin: 0
  }

  .s\:m-05 {
    margin: 0.125rem;
    margin: var(--su-05)
  }

  .s\:m-1 {
    margin: 0.25rem;
    margin: var(--su-1)
  }

  .s\:m-2 {
    margin: 0.5rem;
    margin: var(--su-2)
  }

  .s\:m-3 {
    margin: 0.75rem;
    margin: var(--su-3)
  }

  .s\:m-4 {
    margin: 1rem;
    margin: var(--su-4)
  }

  .s\:m-5 {
    margin: 1.25rem;
    margin: var(--su-5)
  }

  .s\:m-6 {
    margin: 1.5rem;
    margin: var(--su-6)
  }

  .s\:m-7 {
    margin: 2rem;
    margin: var(--su-7)
  }

  .s\:m-8 {
    margin: 3rem;
    margin: var(--su-8)
  }

  .s\:m-9 {
    margin: 4rem;
    margin: var(--su-9)
  }

  .s\:m-10 {
    margin: 8rem;
    margin: var(--su-10)
  }

  .s\:-m-05 {
    margin: calc(0.125rem * -1);
    margin: calc(var(--su-05) * -1)
  }

  .s\:-m-1 {
    margin: calc(0.25rem * -1);
    margin: calc(var(--su-1) * -1)
  }

  .s\:-m-2 {
    margin: calc(0.5rem * -1);
    margin: calc(var(--su-2) * -1)
  }

  .s\:-m-3 {
    margin: calc(0.75rem * -1);
    margin: calc(var(--su-3) * -1)
  }

  .s\:-m-4 {
    margin: calc(1rem * -1);
    margin: calc(var(--su-4) * -1)
  }

  .s\:-m-5 {
    margin: calc(1.25rem * -1);
    margin: calc(var(--su-5) * -1)
  }

  .s\:-m-6 {
    margin: calc(1.5rem * -1);
    margin: calc(var(--su-6) * -1)
  }

  .s\:-m-7 {
    margin: calc(2rem * -1);
    margin: calc(var(--su-7) * -1)
  }

  .s\:-m-8 {
    margin: calc(3rem * -1);
    margin: calc(var(--su-8) * -1)
  }

  .s\:-m-9 {
    margin: calc(4rem * -1);
    margin: calc(var(--su-9) * -1)
  }

  .s\:-m-10 {
    margin: calc(8rem * -1);
    margin: calc(var(--su-10) * -1)
  }

  .s\:my-auto {
    margin-top: auto;
    margin-bottom: auto
  }

  .s\:my-unset {
    margin-top: 0;
    margin-top: initial;
    margin-bottom: 0;
    margin-bottom: initial
  }

  .s\:my-0 {
    margin-top: 0;
    margin-bottom: 0
  }

  .s\:my-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05);
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .s\:my-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1);
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .s\:my-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2);
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .s\:my-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3);
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .s\:my-4 {
    margin-top: 1rem;
    margin-top: var(--su-4);
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .s\:my-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5);
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .s\:my-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6);
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .s\:my-7 {
    margin-top: 2rem;
    margin-top: var(--su-7);
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .s\:my-8 {
    margin-top: 3rem;
    margin-top: var(--su-8);
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .s\:my-9 {
    margin-top: 4rem;
    margin-top: var(--su-9);
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .s\:my-10 {
    margin-top: 8rem;
    margin-top: var(--su-10);
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .s\:-my-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1);
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .s\:-my-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1);
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .s\:-my-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1);
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .s\:-my-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1);
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .s\:-my-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1);
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .s\:-my-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1);
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .s\:-my-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1);
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .s\:-my-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1);
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .s\:-my-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1);
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .s\:-my-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1);
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .s\:-my-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1);
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .s\:mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .s\:mx-unset {
    margin-left: 0;
    margin-left: initial;
    margin-right: 0;
    margin-right: initial
  }

  .s\:mx-0 {
    margin-left: 0;
    margin-right: 0
  }

  .s\:mx-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05);
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .s\:mx-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1);
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .s\:mx-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2);
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .s\:mx-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3);
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .s\:mx-4 {
    margin-left: 1rem;
    margin-left: var(--su-4);
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .s\:mx-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5);
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .s\:mx-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6);
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .s\:mx-7 {
    margin-left: 2rem;
    margin-left: var(--su-7);
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .s\:mx-8 {
    margin-left: 3rem;
    margin-left: var(--su-8);
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .s\:mx-9 {
    margin-left: 4rem;
    margin-left: var(--su-9);
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .s\:mx-10 {
    margin-left: 8rem;
    margin-left: var(--su-10);
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .s\:-mx-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1);
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .s\:-mx-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1);
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .s\:-mx-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1);
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .s\:-mx-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1);
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .s\:-mx-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1);
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .s\:-mx-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1);
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .s\:-mx-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1);
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .s\:-mx-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1);
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .s\:-mx-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1);
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .s\:-mx-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1);
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .s\:-mx-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1);
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .s\:mt-auto {
    margin-top: auto
  }

  .s\:mt-unset {
    margin-top: 0;
    margin-top: initial
  }

  .s\:mt-0 {
    margin-top: 0
  }

  .s\:mt-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05)
  }

  .s\:mt-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1)
  }

  .s\:mt-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2)
  }

  .s\:mt-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3)
  }

  .s\:mt-4 {
    margin-top: 1rem;
    margin-top: var(--su-4)
  }

  .s\:mt-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5)
  }

  .s\:mt-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6)
  }

  .s\:mt-7 {
    margin-top: 2rem;
    margin-top: var(--su-7)
  }

  .s\:mt-8 {
    margin-top: 3rem;
    margin-top: var(--su-8)
  }

  .s\:mt-9 {
    margin-top: 4rem;
    margin-top: var(--su-9)
  }

  .s\:mt-10 {
    margin-top: 8rem;
    margin-top: var(--su-10)
  }

  .s\:-mt-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1)
  }

  .s\:-mt-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1)
  }

  .s\:-mt-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1)
  }

  .s\:-mt-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1)
  }

  .s\:-mt-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1)
  }

  .s\:-mt-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1)
  }

  .s\:-mt-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1)
  }

  .s\:-mt-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1)
  }

  .s\:-mt-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1)
  }

  .s\:-mt-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1)
  }

  .s\:-mt-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1)
  }

  .s\:mb-auto {
    margin-bottom: auto
  }

  .s\:mb-unset {
    margin-bottom: 0;
    margin-bottom: initial
  }

  .s\:mb-0 {
    margin-bottom: 0
  }

  .s\:mb-05 {
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .s\:mb-1 {
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .s\:mb-2 {
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .s\:mb-3 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .s\:mb-4 {
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .s\:mb-5 {
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .s\:mb-6 {
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .s\:mb-7 {
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .s\:mb-8 {
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .s\:mb-9 {
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .s\:mb-10 {
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .s\:-mb-05 {
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .s\:-mb-1 {
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .s\:-mb-2 {
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .s\:-mb-3 {
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .s\:-mb-4 {
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .s\:-mb-5 {
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .s\:-mb-6 {
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .s\:-mb-7 {
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .s\:-mb-8 {
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .s\:-mb-9 {
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .s\:-mb-10 {
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .s\:ml-auto {
    margin-left: auto
  }

  .s\:ml-unset {
    margin-left: 0;
    margin-left: initial
  }

  .s\:ml-0 {
    margin-left: 0
  }

  .s\:ml-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05)
  }

  .s\:ml-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1)
  }

  .s\:ml-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2)
  }

  .s\:ml-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3)
  }

  .s\:ml-4 {
    margin-left: 1rem;
    margin-left: var(--su-4)
  }

  .s\:ml-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5)
  }

  .s\:ml-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6)
  }

  .s\:ml-7 {
    margin-left: 2rem;
    margin-left: var(--su-7)
  }

  .s\:ml-8 {
    margin-left: 3rem;
    margin-left: var(--su-8)
  }

  .s\:ml-9 {
    margin-left: 4rem;
    margin-left: var(--su-9)
  }

  .s\:ml-10 {
    margin-left: 8rem;
    margin-left: var(--su-10)
  }

  .s\:-ml-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1)
  }

  .s\:-ml-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1)
  }

  .s\:-ml-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1)
  }

  .s\:-ml-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1)
  }

  .s\:-ml-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1)
  }

  .s\:-ml-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1)
  }

  .s\:-ml-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1)
  }

  .s\:-ml-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1)
  }

  .s\:-ml-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1)
  }

  .s\:-ml-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1)
  }

  .s\:-ml-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1)
  }

  .s\:mr-auto {
    margin-right: auto
  }

  .s\:mr-unset {
    margin-right: 0;
    margin-right: initial
  }

  .s\:mr-0 {
    margin-right: 0
  }

  .s\:mr-05 {
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .s\:mr-1 {
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .s\:mr-2 {
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .s\:mr-3 {
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .s\:mr-4 {
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .s\:mr-5 {
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .s\:mr-6 {
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .s\:mr-7 {
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .s\:mr-8 {
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .s\:mr-9 {
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .s\:mr-10 {
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .s\:-mr-05 {
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .s\:-mr-1 {
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .s\:-mr-2 {
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .s\:-mr-3 {
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .s\:-mr-4 {
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .s\:-mr-5 {
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .s\:-mr-6 {
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .s\:-mr-7 {
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .s\:-mr-8 {
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .s\:-mr-9 {
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .s\:-mr-10 {
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .s\:p-0 {
    padding: 0
  }

  .s\:p-unset {
    padding: 0;
    padding: initial
  }

  .s\:p-05 {
    padding: 0.125rem;
    padding: var(--su-05)
  }

  .s\:p-1 {
    padding: 0.25rem;
    padding: var(--su-1)
  }

  .s\:p-2 {
    padding: 0.5rem;
    padding: var(--su-2)
  }

  .s\:p-3 {
    padding: 0.75rem;
    padding: var(--su-3)
  }

  .s\:p-4 {
    padding: 1rem;
    padding: var(--su-4)
  }

  .s\:p-5 {
    padding: 1.25rem;
    padding: var(--su-5)
  }

  .s\:p-6 {
    padding: 1.5rem;
    padding: var(--su-6)
  }

  .s\:p-7 {
    padding: 2rem;
    padding: var(--su-7)
  }

  .s\:p-8 {
    padding: 3rem;
    padding: var(--su-8)
  }

  .s\:p-9 {
    padding: 4rem;
    padding: var(--su-9)
  }

  .s\:p-10 {
    padding: 8rem;
    padding: var(--su-10)
  }

  .s\:py-0 {
    padding-top: 0;
    padding-bottom: 0
  }

  .s\:py-unset {
    padding-top: 0;
    padding-top: initial;
    padding-bottom: 0;
    padding-bottom: initial
  }

  .s\:py-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05);
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .s\:py-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1);
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .s\:py-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2);
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .s\:py-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3);
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .s\:py-4 {
    padding-top: 1rem;
    padding-top: var(--su-4);
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .s\:py-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5);
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .s\:py-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6);
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .s\:py-7 {
    padding-top: 2rem;
    padding-top: var(--su-7);
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .s\:py-8 {
    padding-top: 3rem;
    padding-top: var(--su-8);
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .s\:py-9 {
    padding-top: 4rem;
    padding-top: var(--su-9);
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .s\:py-10 {
    padding-top: 8rem;
    padding-top: var(--su-10);
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .s\:px-0 {
    padding-left: 0;
    padding-right: 0
  }

  .s\:px-unset {
    padding-left: 0;
    padding-left: initial;
    padding-right: 0;
    padding-right: initial
  }

  .s\:px-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05);
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .s\:px-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1);
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .s\:px-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2);
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .s\:px-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3);
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .s\:px-4 {
    padding-left: 1rem;
    padding-left: var(--su-4);
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .s\:px-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5);
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .s\:px-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6);
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .s\:px-7 {
    padding-left: 2rem;
    padding-left: var(--su-7);
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .s\:px-8 {
    padding-left: 3rem;
    padding-left: var(--su-8);
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .s\:px-9 {
    padding-left: 4rem;
    padding-left: var(--su-9);
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .s\:px-10 {
    padding-left: 8rem;
    padding-left: var(--su-10);
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .s\:pt-0 {
    padding-top: 0
  }

  .s\:pt-unset {
    padding-top: 0;
    padding-top: initial
  }

  .s\:pt-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05)
  }

  .s\:pt-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1)
  }

  .s\:pt-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2)
  }

  .s\:pt-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3)
  }

  .s\:pt-4 {
    padding-top: 1rem;
    padding-top: var(--su-4)
  }

  .s\:pt-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5)
  }

  .s\:pt-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6)
  }

  .s\:pt-7 {
    padding-top: 2rem;
    padding-top: var(--su-7)
  }

  .s\:pt-8 {
    padding-top: 3rem;
    padding-top: var(--su-8)
  }

  .s\:pt-9 {
    padding-top: 4rem;
    padding-top: var(--su-9)
  }

  .s\:pt-10 {
    padding-top: 8rem;
    padding-top: var(--su-10)
  }

  .s\:pb-0 {
    padding-bottom: 0
  }

  .s\:pb-unset {
    padding-bottom: 0;
    padding-bottom: initial
  }

  .s\:pb-05 {
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .s\:pb-1 {
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .s\:pb-2 {
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .s\:pb-3 {
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .s\:pb-4 {
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .s\:pb-5 {
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .s\:pb-6 {
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .s\:pb-7 {
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .s\:pb-8 {
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .s\:pb-9 {
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .s\:pb-10 {
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .s\:pl-0 {
    padding-left: 0
  }

  .s\:pl-unset {
    padding-left: 0;
    padding-left: initial
  }

  .s\:pl-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05)
  }

  .s\:pl-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1)
  }

  .s\:pl-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2)
  }

  .s\:pl-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3)
  }

  .s\:pl-4 {
    padding-left: 1rem;
    padding-left: var(--su-4)
  }

  .s\:pl-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5)
  }

  .s\:pl-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6)
  }

  .s\:pl-7 {
    padding-left: 2rem;
    padding-left: var(--su-7)
  }

  .s\:pl-8 {
    padding-left: 3rem;
    padding-left: var(--su-8)
  }

  .s\:pl-9 {
    padding-left: 4rem;
    padding-left: var(--su-9)
  }

  .s\:pl-10 {
    padding-left: 8rem;
    padding-left: var(--su-10)
  }

  .s\:pr-0 {
    padding-right: 0
  }

  .s\:pr-unset {
    padding-right: 0;
    padding-right: initial
  }

  .s\:pr-05 {
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .s\:pr-1 {
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .s\:pr-2 {
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .s\:pr-3 {
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .s\:pr-4 {
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .s\:pr-5 {
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .s\:pr-6 {
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .s\:pr-7 {
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .s\:pr-8 {
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .s\:pr-9 {
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .s\:pr-10 {
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .s\:fs-2xs {
    font-size: 0.675rem;
    font-size: var(--fs-2xs)
  }

  .s\:fs-xs {
    font-size: 0.75rem;
    font-size: var(--fs-xs)
  }

  .s\:fs-s {
    font-size: 0.875rem;
    font-size: var(--fs-s)
  }

  .s\:fs-base {
    font-size: 1rem;
    font-size: var(--fs-base)
  }

  .s\:fs-l {
    font-size: 1.125rem;
    font-size: var(--fs-l)
  }

  .s\:fs-xl {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }

  .s\:fs-2xl {
    font-size: 1.5rem;
    font-size: var(--fs-2xl)
  }

  .s\:fs-3xl {
    font-size: 1.875rem;
    font-size: var(--fs-3xl)
  }

  .s\:fs-4xl {
    font-size: 2.25rem;
    font-size: var(--fs-4xl)
  }

  .s\:fs-5xl {
    font-size: 3rem;
    font-size: var(--fs-5xl)
  }

  .s\:fw-normal {
    font-weight: 400;
    font-weight: var(--fw-normal)
  }

  .s\:fw-medium {
    font-weight: 500;
    font-weight: var(--fw-medium)
  }

  .s\:fw-bold {
    font-weight: 700;
    font-weight: var(--fw-bold)
  }

  .s\:fw-heavy {
    font-weight: 800;
    font-weight: var(--fw-heavy)
  }

  .s\:align-left {
    text-align: left
  }

  .s\:align-center {
    text-align: center
  }

  .s\:align-right {
    text-align: right
  }

  .s\:hidden {
    display: none
  }

  .s\:block {
    display: block
  }

  .s\:inline {
    display: inline
  }

  .s\:inline-block {
    display: inline-block
  }

  .s\:flex {
    display: flex
  }

  .s\:inline-flex {
    display: inline-flex
  }

  .s\:grid {
    display: grid
  }

  .s\:table {
    display: table
  }

  .s\:static {
    position: static
  }

  .s\:absolute {
    position: absolute
  }

  .s\:fixed {
    position: fixed
  }

  .s\:sticky {
    position: sticky
  }

  .s\:relative {
    position: relative
  }
}

@media (min-width: 768px) {
  .m\:flex-row {
    flex-direction: row
  }

  .m\:flex-col {
    flex-direction: column
  }

  .m\:flex-wrap {
    flex-wrap: wrap
  }

  .m\:flex-nowrap {
    flex-wrap: nowrap
  }

  .m\:items-stretch {
    align-items: stretch
  }

  .m\:items-start {
    align-items: flex-start
  }

  .m\:items-center {
    align-items: center
  }

  .m\:items-end {
    align-items: flex-end
  }

  .m\:basis-1-5 {
    flex-basis: 20%
  }

  .m\:basis-2-5 {
    flex-basis: 40%
  }

  .m\:basis-3-5 {
    flex-basis: 60%
  }

  .m\:basis-4-5 {
    flex-basis: 80%
  }

  .m\:basis-1-4 {
    flex-basis: 25%
  }

  .m\:basis-1-3 {
    flex-basis: 33.333333%
  }

  .m\:basis-1-2 {
    flex-basis: 50%
  }

  .m\:basis-2-3 {
    flex-basis: 66.666667%
  }

  .m\:basis-3-4 {
    flex-basis: 75%
  }

  .m\:content-start {
    align-content: flex-start
  }

  .m\:content-center {
    align-content: center
  }

  .m\:content-end {
    align-content: flex-end
  }

  .m\:content-between {
    align-content: space-between
  }

  .m\:content-around {
    align-content: space-around
  }

  .m\:self-auto {
    align-self: auto
  }

  .m\:self-start {
    align-self: flex-start
  }

  .m\:self-center {
    align-self: center
  }

  .m\:self-end {
    align-self: flex-end
  }

  .m\:self-stretch {
    align-self: stretch
  }

  .m\:justify-start {
    justify-content: flex-start
  }

  .m\:justify-center {
    justify-content: center
  }

  .m\:justify-end {
    justify-content: flex-end
  }

  .m\:justify-between {
    justify-content: space-between
  }

  .m\:justify-around {
    justify-content: space-around
  }

  .m\:justify-stretch {
    justify-content: stretch
  }

  .m\:flex-initial {
    flex: 0 1 auto
  }

  .m\:flex-1 {
    flex: 1 1
  }

  .m\:flex-auto {
    flex: 1 1 auto
  }

  .m\:flex-none {
    flex: none
  }

  .m\:order-first {
    order: -9999
  }

  .m\:order-last {
    order: 9999
  }

  .m\:order-0 {
    order: 0
  }

  .m\:gap-0 {
    gap: 0
  }

  .m\:gap-px {
    gap: 1px
  }

  .m\:gap-05 {
    gap: 0.125rem;
    gap: var(--su-05)
  }

  .m\:gap-1 {
    gap: 0.25rem;
    gap: var(--su-1)
  }

  .m\:gap-2 {
    gap: 0.5rem;
    gap: var(--su-2)
  }

  .m\:gap-3 {
    gap: 0.75rem;
    gap: var(--su-3)
  }

  .m\:gap-4 {
    gap: 1rem;
    gap: var(--su-4)
  }

  .m\:gap-5 {
    gap: 1.25rem;
    gap: var(--su-5)
  }

  .m\:gap-6 {
    gap: 1.5rem;
    gap: var(--su-6)
  }

  .m\:gap-7 {
    gap: 2rem;
    gap: var(--su-7)
  }

  .m\:gap-8 {
    gap: 3rem;
    gap: var(--su-8)
  }

  .m\:gap-9 {
    gap: 4rem;
    gap: var(--su-9)
  }

  .m\:gap-10 {
    gap: 8rem;
    gap: var(--su-10)
  }

  .m\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .m\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .m\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .m\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .m\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .m\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .m\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .m\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .m\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .m\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .m\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .m\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .m\:grid-rows-none {
    grid-template-rows: none
  }

  .m\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .m\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .m\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .m\:grid-flow-row {
    grid-auto-flow: row
  }

  .m\:grid-flow-col {
    grid-auto-flow: column
  }

  .m\:top-auto {
    top: auto
  }

  .m\:top-unset {
    top: auto;
    top: initial
  }

  .m\:top-0 {
    top: 0
  }

  .m\:top-100 {
    top: 100%
  }

  .m\:top-05 {
    top: 0.125rem;
    top: var(--su-05)
  }

  .m\:top-1 {
    top: 0.25rem;
    top: var(--su-1)
  }

  .m\:top-2 {
    top: 0.5rem;
    top: var(--su-2)
  }

  .m\:top-3 {
    top: 0.75rem;
    top: var(--su-3)
  }

  .m\:top-4 {
    top: 1rem;
    top: var(--su-4)
  }

  .m\:top-5 {
    top: 1.25rem;
    top: var(--su-5)
  }

  .m\:top-6 {
    top: 1.5rem;
    top: var(--su-6)
  }

  .m\:top-7 {
    top: 2rem;
    top: var(--su-7)
  }

  .m\:top-8 {
    top: 3rem;
    top: var(--su-8)
  }

  .m\:top-9 {
    top: 4rem;
    top: var(--su-9)
  }

  .m\:top-10 {
    top: 8rem;
    top: var(--su-10)
  }

  .m\:-top-100 {
    top: -100%
  }

  .m\:-top-05 {
    top: calc(0.125rem * -1);
    top: calc(var(--su-05) * -1)
  }

  .m\:-top-1 {
    top: calc(0.25rem * -1);
    top: calc(var(--su-1) * -1)
  }

  .m\:-top-2 {
    top: calc(0.5rem * -1);
    top: calc(var(--su-2) * -1)
  }

  .m\:-top-3 {
    top: calc(0.75rem * -1);
    top: calc(var(--su-3) * -1)
  }

  .m\:-top-4 {
    top: calc(1rem * -1);
    top: calc(var(--su-4) * -1)
  }

  .m\:-top-5 {
    top: calc(1.25rem * -1);
    top: calc(var(--su-5) * -1)
  }

  .m\:-top-6 {
    top: calc(1.5rem * -1);
    top: calc(var(--su-6) * -1)
  }

  .m\:-top-7 {
    top: calc(2rem * -1);
    top: calc(var(--su-7) * -1)
  }

  .m\:-top-8 {
    top: calc(3rem * -1);
    top: calc(var(--su-8) * -1)
  }

  .m\:-top-9 {
    top: calc(4rem * -1);
    top: calc(var(--su-9) * -1)
  }

  .m\:-top-10 {
    top: calc(8rem * -1);
    top: calc(var(--su-10) * -1)
  }

  .m\:bottom-auto {
    bottom: auto
  }

  .m\:bottom-unset {
    bottom: auto;
    bottom: initial
  }

  .m\:bottom-0 {
    bottom: 0
  }

  .m\:bottom-100 {
    bottom: 100%
  }

  .m\:bottom-05 {
    bottom: 0.125rem;
    bottom: var(--su-05)
  }

  .m\:bottom-1 {
    bottom: 0.25rem;
    bottom: var(--su-1)
  }

  .m\:bottom-2 {
    bottom: 0.5rem;
    bottom: var(--su-2)
  }

  .m\:bottom-3 {
    bottom: 0.75rem;
    bottom: var(--su-3)
  }

  .m\:bottom-4 {
    bottom: 1rem;
    bottom: var(--su-4)
  }

  .m\:bottom-5 {
    bottom: 1.25rem;
    bottom: var(--su-5)
  }

  .m\:bottom-6 {
    bottom: 1.5rem;
    bottom: var(--su-6)
  }

  .m\:bottom-7 {
    bottom: 2rem;
    bottom: var(--su-7)
  }

  .m\:bottom-8 {
    bottom: 3rem;
    bottom: var(--su-8)
  }

  .m\:bottom-9 {
    bottom: 4rem;
    bottom: var(--su-9)
  }

  .m\:bottom-10 {
    bottom: 8rem;
    bottom: var(--su-10)
  }

  .m\:-bottom-100 {
    bottom: -100%
  }

  .m\:-bottom-05 {
    bottom: calc(0.125rem * -1);
    bottom: calc(var(--su-05) * -1)
  }

  .m\:-bottom-1 {
    bottom: calc(0.25rem * -1);
    bottom: calc(var(--su-1) * -1)
  }

  .m\:-bottom-2 {
    bottom: calc(0.5rem * -1);
    bottom: calc(var(--su-2) * -1)
  }

  .m\:-bottom-3 {
    bottom: calc(0.75rem * -1);
    bottom: calc(var(--su-3) * -1)
  }

  .m\:-bottom-4 {
    bottom: calc(1rem * -1);
    bottom: calc(var(--su-4) * -1)
  }

  .m\:-bottom-5 {
    bottom: calc(1.25rem * -1);
    bottom: calc(var(--su-5) * -1)
  }

  .m\:-bottom-6 {
    bottom: calc(1.5rem * -1);
    bottom: calc(var(--su-6) * -1)
  }

  .m\:-bottom-7 {
    bottom: calc(2rem * -1);
    bottom: calc(var(--su-7) * -1)
  }

  .m\:-bottom-8 {
    bottom: calc(3rem * -1);
    bottom: calc(var(--su-8) * -1)
  }

  .m\:-bottom-9 {
    bottom: calc(4rem * -1);
    bottom: calc(var(--su-9) * -1)
  }

  .m\:-bottom-10 {
    bottom: calc(8rem * -1);
    bottom: calc(var(--su-10) * -1)
  }

  .m\:left-auto {
    left: auto
  }

  .m\:left-unset {
    left: auto;
    left: initial
  }

  .m\:left-0 {
    left: 0
  }

  .m\:left-100 {
    left: 100%
  }

  .m\:left-05 {
    left: 0.125rem;
    left: var(--su-05)
  }

  .m\:left-1 {
    left: 0.25rem;
    left: var(--su-1)
  }

  .m\:left-2 {
    left: 0.5rem;
    left: var(--su-2)
  }

  .m\:left-3 {
    left: 0.75rem;
    left: var(--su-3)
  }

  .m\:left-4 {
    left: 1rem;
    left: var(--su-4)
  }

  .m\:left-5 {
    left: 1.25rem;
    left: var(--su-5)
  }

  .m\:left-6 {
    left: 1.5rem;
    left: var(--su-6)
  }

  .m\:left-7 {
    left: 2rem;
    left: var(--su-7)
  }

  .m\:left-8 {
    left: 3rem;
    left: var(--su-8)
  }

  .m\:left-9 {
    left: 4rem;
    left: var(--su-9)
  }

  .m\:left-10 {
    left: 8rem;
    left: var(--su-10)
  }

  .m\:-left-100 {
    left: -100%
  }

  .m\:-left-05 {
    left: calc(0.125rem * -1);
    left: calc(var(--su-05) * -1)
  }

  .m\:-left-1 {
    left: calc(0.25rem * -1);
    left: calc(var(--su-1) * -1)
  }

  .m\:-left-2 {
    left: calc(0.5rem * -1);
    left: calc(var(--su-2) * -1)
  }

  .m\:-left-3 {
    left: calc(0.75rem * -1);
    left: calc(var(--su-3) * -1)
  }

  .m\:-left-4 {
    left: calc(1rem * -1);
    left: calc(var(--su-4) * -1)
  }

  .m\:-left-5 {
    left: calc(1.25rem * -1);
    left: calc(var(--su-5) * -1)
  }

  .m\:-left-6 {
    left: calc(1.5rem * -1);
    left: calc(var(--su-6) * -1)
  }

  .m\:-left-7 {
    left: calc(2rem * -1);
    left: calc(var(--su-7) * -1)
  }

  .m\:-left-8 {
    left: calc(3rem * -1);
    left: calc(var(--su-8) * -1)
  }

  .m\:-left-9 {
    left: calc(4rem * -1);
    left: calc(var(--su-9) * -1)
  }

  .m\:-left-10 {
    left: calc(8rem * -1);
    left: calc(var(--su-10) * -1)
  }

  .m\:right-auto {
    right: auto
  }

  .m\:right-unset {
    right: auto;
    right: initial
  }

  .m\:right-0 {
    right: 0
  }

  .m\:right-100 {
    right: 100%
  }

  .m\:right-05 {
    right: 0.125rem;
    right: var(--su-05)
  }

  .m\:right-1 {
    right: 0.25rem;
    right: var(--su-1)
  }

  .m\:right-2 {
    right: 0.5rem;
    right: var(--su-2)
  }

  .m\:right-3 {
    right: 0.75rem;
    right: var(--su-3)
  }

  .m\:right-4 {
    right: 1rem;
    right: var(--su-4)
  }

  .m\:right-5 {
    right: 1.25rem;
    right: var(--su-5)
  }

  .m\:right-6 {
    right: 1.5rem;
    right: var(--su-6)
  }

  .m\:right-7 {
    right: 2rem;
    right: var(--su-7)
  }

  .m\:right-8 {
    right: 3rem;
    right: var(--su-8)
  }

  .m\:right-9 {
    right: 4rem;
    right: var(--su-9)
  }

  .m\:right-10 {
    right: 8rem;
    right: var(--su-10)
  }

  .m\:-right-100 {
    right: -100%
  }

  .m\:-right-05 {
    right: calc(0.125rem * -1);
    right: calc(var(--su-05) * -1)
  }

  .m\:-right-1 {
    right: calc(0.25rem * -1);
    right: calc(var(--su-1) * -1)
  }

  .m\:-right-2 {
    right: calc(0.5rem * -1);
    right: calc(var(--su-2) * -1)
  }

  .m\:-right-3 {
    right: calc(0.75rem * -1);
    right: calc(var(--su-3) * -1)
  }

  .m\:-right-4 {
    right: calc(1rem * -1);
    right: calc(var(--su-4) * -1)
  }

  .m\:-right-5 {
    right: calc(1.25rem * -1);
    right: calc(var(--su-5) * -1)
  }

  .m\:-right-6 {
    right: calc(1.5rem * -1);
    right: calc(var(--su-6) * -1)
  }

  .m\:-right-7 {
    right: calc(2rem * -1);
    right: calc(var(--su-7) * -1)
  }

  .m\:-right-8 {
    right: calc(3rem * -1);
    right: calc(var(--su-8) * -1)
  }

  .m\:-right-9 {
    right: calc(4rem * -1);
    right: calc(var(--su-9) * -1)
  }

  .m\:-right-10 {
    right: calc(8rem * -1);
    right: calc(var(--su-10) * -1)
  }

  .m\:overflow-auto {
    overflow: auto
  }

  .m\:overflow-visible {
    overflow: visible
  }

  .m\:overflow-hidden {
    overflow: hidden
  }

  .m\:w-0 {
    width: 0
  }

  .m\:w-10 {
    width: 10%
  }

  .m\:w-15 {
    width: 15%
  }

  .m\:w-25 {
    width: 25%
  }

  .m\:w-50 {
    width: 50%
  }

  .m\:w-60 {
    width: 60%
  }

  .m\:w-70 {
    width: 70%
  }

  .m\:w-75 {
    width: 75%
  }

  .m\:w-80 {
    width: 80%
  }

  .m\:w-100 {
    width: 100%
  }

  .m\:w-auto {
    width: auto
  }

  .m\:w-full {
    width: 100vw
  }

  .m\:w-max {
    width: -moz-max-content;
    width: max-content
  }

  .m\:w-fit {
    width: -moz-fit-content;
    width: fit-content
  }

  .m\:max-w-0 {
    max-width: 0
  }

  .m\:max-w-25 {
    max-width: 25%
  }

  .m\:max-w-50 {
    max-width: 50%
  }

  .m\:max-w-75 {
    max-width: 75%
  }

  .m\:max-w-100 {
    max-width: 100%
  }

  .m\:max-w-unset {
    max-width: none;
    max-width: initial
  }

  .m\:m-auto {
    margin: auto
  }

  .m\:m-unset {
    margin: 0;
    margin: initial
  }

  .m\:m-0 {
    margin: 0
  }

  .m\:m-05 {
    margin: 0.125rem;
    margin: var(--su-05)
  }

  .m\:m-1 {
    margin: 0.25rem;
    margin: var(--su-1)
  }

  .m\:m-2 {
    margin: 0.5rem;
    margin: var(--su-2)
  }

  .m\:m-3 {
    margin: 0.75rem;
    margin: var(--su-3)
  }

  .m\:m-4 {
    margin: 1rem;
    margin: var(--su-4)
  }

  .m\:m-5 {
    margin: 1.25rem;
    margin: var(--su-5)
  }

  .m\:m-6 {
    margin: 1.5rem;
    margin: var(--su-6)
  }

  .m\:m-7 {
    margin: 2rem;
    margin: var(--su-7)
  }

  .m\:m-8 {
    margin: 3rem;
    margin: var(--su-8)
  }

  .m\:m-9 {
    margin: 4rem;
    margin: var(--su-9)
  }

  .m\:m-10 {
    margin: 8rem;
    margin: var(--su-10)
  }

  .m\:-m-05 {
    margin: calc(0.125rem * -1);
    margin: calc(var(--su-05) * -1)
  }

  .m\:-m-1 {
    margin: calc(0.25rem * -1);
    margin: calc(var(--su-1) * -1)
  }

  .m\:-m-2 {
    margin: calc(0.5rem * -1);
    margin: calc(var(--su-2) * -1)
  }

  .m\:-m-3 {
    margin: calc(0.75rem * -1);
    margin: calc(var(--su-3) * -1)
  }

  .m\:-m-4 {
    margin: calc(1rem * -1);
    margin: calc(var(--su-4) * -1)
  }

  .m\:-m-5 {
    margin: calc(1.25rem * -1);
    margin: calc(var(--su-5) * -1)
  }

  .m\:-m-6 {
    margin: calc(1.5rem * -1);
    margin: calc(var(--su-6) * -1)
  }

  .m\:-m-7 {
    margin: calc(2rem * -1);
    margin: calc(var(--su-7) * -1)
  }

  .m\:-m-8 {
    margin: calc(3rem * -1);
    margin: calc(var(--su-8) * -1)
  }

  .m\:-m-9 {
    margin: calc(4rem * -1);
    margin: calc(var(--su-9) * -1)
  }

  .m\:-m-10 {
    margin: calc(8rem * -1);
    margin: calc(var(--su-10) * -1)
  }

  .m\:my-auto {
    margin-top: auto;
    margin-bottom: auto
  }

  .m\:my-unset {
    margin-top: 0;
    margin-top: initial;
    margin-bottom: 0;
    margin-bottom: initial
  }

  .m\:my-0 {
    margin-top: 0;
    margin-bottom: 0
  }

  .m\:my-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05);
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .m\:my-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1);
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .m\:my-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2);
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .m\:my-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3);
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .m\:my-4 {
    margin-top: 1rem;
    margin-top: var(--su-4);
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .m\:my-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5);
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .m\:my-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6);
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .m\:my-7 {
    margin-top: 2rem;
    margin-top: var(--su-7);
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .m\:my-8 {
    margin-top: 3rem;
    margin-top: var(--su-8);
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .m\:my-9 {
    margin-top: 4rem;
    margin-top: var(--su-9);
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .m\:my-10 {
    margin-top: 8rem;
    margin-top: var(--su-10);
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .m\:-my-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1);
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .m\:-my-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1);
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .m\:-my-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1);
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .m\:-my-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1);
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .m\:-my-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1);
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .m\:-my-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1);
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .m\:-my-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1);
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .m\:-my-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1);
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .m\:-my-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1);
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .m\:-my-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1);
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .m\:-my-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1);
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .m\:mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .m\:mx-unset {
    margin-left: 0;
    margin-left: initial;
    margin-right: 0;
    margin-right: initial
  }

  .m\:mx-0 {
    margin-left: 0;
    margin-right: 0
  }

  .m\:mx-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05);
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .m\:mx-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1);
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .m\:mx-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2);
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .m\:mx-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3);
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .m\:mx-4 {
    margin-left: 1rem;
    margin-left: var(--su-4);
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .m\:mx-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5);
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .m\:mx-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6);
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .m\:mx-7 {
    margin-left: 2rem;
    margin-left: var(--su-7);
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .m\:mx-8 {
    margin-left: 3rem;
    margin-left: var(--su-8);
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .m\:mx-9 {
    margin-left: 4rem;
    margin-left: var(--su-9);
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .m\:mx-10 {
    margin-left: 8rem;
    margin-left: var(--su-10);
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .m\:-mx-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1);
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .m\:-mx-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1);
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .m\:-mx-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1);
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .m\:-mx-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1);
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .m\:-mx-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1);
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .m\:-mx-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1);
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .m\:-mx-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1);
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .m\:-mx-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1);
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .m\:-mx-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1);
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .m\:-mx-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1);
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .m\:-mx-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1);
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .m\:mt-auto {
    margin-top: auto
  }

  .m\:mt-unset {
    margin-top: 0;
    margin-top: initial
  }

  .m\:mt-0 {
    margin-top: 0
  }

  .m\:mt-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05)
  }

  .m\:mt-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1)
  }

  .m\:mt-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2)
  }

  .m\:mt-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3)
  }

  .m\:mt-4 {
    margin-top: 1rem;
    margin-top: var(--su-4)
  }

  .m\:mt-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5)
  }

  .m\:mt-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6)
  }

  .m\:mt-7 {
    margin-top: 2rem;
    margin-top: var(--su-7)
  }

  .m\:mt-8 {
    margin-top: 3rem;
    margin-top: var(--su-8)
  }

  .m\:mt-9 {
    margin-top: 4rem;
    margin-top: var(--su-9)
  }

  .m\:mt-10 {
    margin-top: 8rem;
    margin-top: var(--su-10)
  }

  .m\:-mt-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1)
  }

  .m\:-mt-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1)
  }

  .m\:-mt-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1)
  }

  .m\:-mt-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1)
  }

  .m\:-mt-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1)
  }

  .m\:-mt-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1)
  }

  .m\:-mt-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1)
  }

  .m\:-mt-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1)
  }

  .m\:-mt-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1)
  }

  .m\:-mt-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1)
  }

  .m\:-mt-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1)
  }

  .m\:mb-auto {
    margin-bottom: auto
  }

  .m\:mb-unset {
    margin-bottom: 0;
    margin-bottom: initial
  }

  .m\:mb-0 {
    margin-bottom: 0
  }

  .m\:mb-05 {
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .m\:mb-1 {
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .m\:mb-2 {
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .m\:mb-3 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .m\:mb-4 {
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .m\:mb-5 {
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .m\:mb-6 {
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .m\:mb-7 {
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .m\:mb-8 {
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .m\:mb-9 {
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .m\:mb-10 {
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .m\:-mb-05 {
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .m\:-mb-1 {
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .m\:-mb-2 {
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .m\:-mb-3 {
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .m\:-mb-4 {
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .m\:-mb-5 {
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .m\:-mb-6 {
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .m\:-mb-7 {
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .m\:-mb-8 {
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .m\:-mb-9 {
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .m\:-mb-10 {
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .m\:ml-auto {
    margin-left: auto
  }

  .m\:ml-unset {
    margin-left: 0;
    margin-left: initial
  }

  .m\:ml-0 {
    margin-left: 0
  }

  .m\:ml-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05)
  }

  .m\:ml-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1)
  }

  .m\:ml-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2)
  }

  .m\:ml-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3)
  }

  .m\:ml-4 {
    margin-left: 1rem;
    margin-left: var(--su-4)
  }

  .m\:ml-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5)
  }

  .m\:ml-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6)
  }

  .m\:ml-7 {
    margin-left: 2rem;
    margin-left: var(--su-7)
  }

  .m\:ml-8 {
    margin-left: 3rem;
    margin-left: var(--su-8)
  }

  .m\:ml-9 {
    margin-left: 4rem;
    margin-left: var(--su-9)
  }

  .m\:ml-10 {
    margin-left: 8rem;
    margin-left: var(--su-10)
  }

  .m\:-ml-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1)
  }

  .m\:-ml-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1)
  }

  .m\:-ml-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1)
  }

  .m\:-ml-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1)
  }

  .m\:-ml-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1)
  }

  .m\:-ml-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1)
  }

  .m\:-ml-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1)
  }

  .m\:-ml-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1)
  }

  .m\:-ml-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1)
  }

  .m\:-ml-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1)
  }

  .m\:-ml-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1)
  }

  .m\:mr-auto {
    margin-right: auto
  }

  .m\:mr-unset {
    margin-right: 0;
    margin-right: initial
  }

  .m\:mr-0 {
    margin-right: 0
  }

  .m\:mr-05 {
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .m\:mr-1 {
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .m\:mr-2 {
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .m\:mr-3 {
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .m\:mr-4 {
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .m\:mr-5 {
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .m\:mr-6 {
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .m\:mr-7 {
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .m\:mr-8 {
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .m\:mr-9 {
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .m\:mr-10 {
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .m\:-mr-05 {
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .m\:-mr-1 {
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .m\:-mr-2 {
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .m\:-mr-3 {
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .m\:-mr-4 {
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .m\:-mr-5 {
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .m\:-mr-6 {
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .m\:-mr-7 {
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .m\:-mr-8 {
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .m\:-mr-9 {
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .m\:-mr-10 {
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .m\:p-0 {
    padding: 0
  }

  .m\:p-unset {
    padding: 0;
    padding: initial
  }

  .m\:p-05 {
    padding: 0.125rem;
    padding: var(--su-05)
  }

  .m\:p-1 {
    padding: 0.25rem;
    padding: var(--su-1)
  }

  .m\:p-2 {
    padding: 0.5rem;
    padding: var(--su-2)
  }

  .m\:p-3 {
    padding: 0.75rem;
    padding: var(--su-3)
  }

  .m\:p-4 {
    padding: 1rem;
    padding: var(--su-4)
  }

  .m\:p-5 {
    padding: 1.25rem;
    padding: var(--su-5)
  }

  .m\:p-6 {
    padding: 1.5rem;
    padding: var(--su-6)
  }

  .m\:p-7 {
    padding: 2rem;
    padding: var(--su-7)
  }

  .m\:p-8 {
    padding: 3rem;
    padding: var(--su-8)
  }

  .m\:p-9 {
    padding: 4rem;
    padding: var(--su-9)
  }

  .m\:p-10 {
    padding: 8rem;
    padding: var(--su-10)
  }

  .m\:py-0 {
    padding-top: 0;
    padding-bottom: 0
  }

  .m\:py-unset {
    padding-top: 0;
    padding-top: initial;
    padding-bottom: 0;
    padding-bottom: initial
  }

  .m\:py-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05);
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .m\:py-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1);
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .m\:py-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2);
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .m\:py-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3);
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .m\:py-4 {
    padding-top: 1rem;
    padding-top: var(--su-4);
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .m\:py-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5);
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .m\:py-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6);
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .m\:py-7 {
    padding-top: 2rem;
    padding-top: var(--su-7);
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .m\:py-8 {
    padding-top: 3rem;
    padding-top: var(--su-8);
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .m\:py-9 {
    padding-top: 4rem;
    padding-top: var(--su-9);
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .m\:py-10 {
    padding-top: 8rem;
    padding-top: var(--su-10);
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .m\:px-0 {
    padding-left: 0;
    padding-right: 0
  }

  .m\:px-unset {
    padding-left: 0;
    padding-left: initial;
    padding-right: 0;
    padding-right: initial
  }

  .m\:px-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05);
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .m\:px-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1);
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .m\:px-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2);
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .m\:px-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3);
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .m\:px-4 {
    padding-left: 1rem;
    padding-left: var(--su-4);
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .m\:px-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5);
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .m\:px-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6);
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .m\:px-7 {
    padding-left: 2rem;
    padding-left: var(--su-7);
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .m\:px-8 {
    padding-left: 3rem;
    padding-left: var(--su-8);
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .m\:px-9 {
    padding-left: 4rem;
    padding-left: var(--su-9);
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .m\:px-10 {
    padding-left: 8rem;
    padding-left: var(--su-10);
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .m\:pt-0 {
    padding-top: 0
  }

  .m\:pt-unset {
    padding-top: 0;
    padding-top: initial
  }

  .m\:pt-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05)
  }

  .m\:pt-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1)
  }

  .m\:pt-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2)
  }

  .m\:pt-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3)
  }

  .m\:pt-4 {
    padding-top: 1rem;
    padding-top: var(--su-4)
  }

  .m\:pt-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5)
  }

  .m\:pt-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6)
  }

  .m\:pt-7 {
    padding-top: 2rem;
    padding-top: var(--su-7)
  }

  .m\:pt-8 {
    padding-top: 3rem;
    padding-top: var(--su-8)
  }

  .m\:pt-9 {
    padding-top: 4rem;
    padding-top: var(--su-9)
  }

  .m\:pt-10 {
    padding-top: 8rem;
    padding-top: var(--su-10)
  }

  .m\:pb-0 {
    padding-bottom: 0
  }

  .m\:pb-unset {
    padding-bottom: 0;
    padding-bottom: initial
  }

  .m\:pb-05 {
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .m\:pb-1 {
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .m\:pb-2 {
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .m\:pb-3 {
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .m\:pb-4 {
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .m\:pb-5 {
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .m\:pb-6 {
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .m\:pb-7 {
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .m\:pb-8 {
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .m\:pb-9 {
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .m\:pb-10 {
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .m\:pl-0 {
    padding-left: 0
  }

  .m\:pl-unset {
    padding-left: 0;
    padding-left: initial
  }

  .m\:pl-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05)
  }

  .m\:pl-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1)
  }

  .m\:pl-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2)
  }

  .m\:pl-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3)
  }

  .m\:pl-4 {
    padding-left: 1rem;
    padding-left: var(--su-4)
  }

  .m\:pl-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5)
  }

  .m\:pl-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6)
  }

  .m\:pl-7 {
    padding-left: 2rem;
    padding-left: var(--su-7)
  }

  .m\:pl-8 {
    padding-left: 3rem;
    padding-left: var(--su-8)
  }

  .m\:pl-9 {
    padding-left: 4rem;
    padding-left: var(--su-9)
  }

  .m\:pl-10 {
    padding-left: 8rem;
    padding-left: var(--su-10)
  }

  .m\:pr-0 {
    padding-right: 0
  }

  .m\:pr-unset {
    padding-right: 0;
    padding-right: initial
  }

  .m\:pr-05 {
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .m\:pr-1 {
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .m\:pr-2 {
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .m\:pr-3 {
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .m\:pr-4 {
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .m\:pr-5 {
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .m\:pr-6 {
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .m\:pr-7 {
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .m\:pr-8 {
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .m\:pr-9 {
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .m\:pr-10 {
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .m\:fs-2xs {
    font-size: 0.675rem;
    font-size: var(--fs-2xs)
  }

  .m\:fs-xs {
    font-size: 0.75rem;
    font-size: var(--fs-xs)
  }

  .m\:fs-s {
    font-size: 0.875rem;
    font-size: var(--fs-s)
  }

  .m\:fs-base {
    font-size: 1rem;
    font-size: var(--fs-base)
  }

  .m\:fs-l {
    font-size: 1.125rem;
    font-size: var(--fs-l)
  }

  .m\:fs-xl {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }

  .m\:fs-2xl {
    font-size: 1.5rem;
    font-size: var(--fs-2xl)
  }

  .m\:fs-3xl {
    font-size: 1.875rem;
    font-size: var(--fs-3xl)
  }

  .m\:fs-4xl {
    font-size: 2.25rem;
    font-size: var(--fs-4xl)
  }

  .m\:fs-5xl {
    font-size: 3rem;
    font-size: var(--fs-5xl)
  }

  .m\:fw-normal {
    font-weight: 400;
    font-weight: var(--fw-normal)
  }

  .m\:fw-medium {
    font-weight: 500;
    font-weight: var(--fw-medium)
  }

  .m\:fw-bold {
    font-weight: 700;
    font-weight: var(--fw-bold)
  }

  .m\:fw-heavy {
    font-weight: 800;
    font-weight: var(--fw-heavy)
  }

  .m\:align-left {
    text-align: left
  }

  .m\:align-center {
    text-align: center
  }

  .m\:align-right {
    text-align: right
  }

  .m\:hidden {
    display: none
  }

  .m\:block {
    display: block
  }

  .m\:inline {
    display: inline
  }

  .m\:inline-block {
    display: inline-block
  }

  .m\:flex {
    display: flex
  }

  .m\:inline-flex {
    display: inline-flex
  }

  .m\:grid {
    display: grid
  }

  .m\:table {
    display: table
  }

  .m\:static {
    position: static
  }

  .m\:absolute {
    position: absolute
  }

  .m\:fixed {
    position: fixed
  }

  .m\:sticky {
    position: sticky
  }

  .m\:relative {
    position: relative
  }
}

@media (min-width: 1024px) {
  .l\:flex-row {
    flex-direction: row
  }

  .l\:flex-col {
    flex-direction: column
  }

  .l\:flex-wrap {
    flex-wrap: wrap
  }

  .l\:flex-nowrap {
    flex-wrap: nowrap
  }

  .l\:items-stretch {
    align-items: stretch
  }

  .l\:items-start {
    align-items: flex-start
  }

  .l\:items-center {
    align-items: center
  }

  .l\:items-end {
    align-items: flex-end
  }

  .l\:basis-1-5 {
    flex-basis: 20%
  }

  .l\:basis-2-5 {
    flex-basis: 40%
  }

  .l\:basis-3-5 {
    flex-basis: 60%
  }

  .l\:basis-4-5 {
    flex-basis: 80%
  }

  .l\:basis-1-4 {
    flex-basis: 25%
  }

  .l\:basis-1-3 {
    flex-basis: 33.333333%
  }

  .l\:basis-1-2 {
    flex-basis: 50%
  }

  .l\:basis-2-3 {
    flex-basis: 66.666667%
  }

  .l\:basis-3-4 {
    flex-basis: 75%
  }

  .l\:content-start {
    align-content: flex-start
  }

  .l\:content-center {
    align-content: center
  }

  .l\:content-end {
    align-content: flex-end
  }

  .l\:content-between {
    align-content: space-between
  }

  .l\:content-around {
    align-content: space-around
  }

  .l\:self-auto {
    align-self: auto
  }

  .l\:self-start {
    align-self: flex-start
  }

  .l\:self-center {
    align-self: center
  }

  .l\:self-end {
    align-self: flex-end
  }

  .l\:self-stretch {
    align-self: stretch
  }

  .l\:justify-start {
    justify-content: flex-start
  }

  .l\:justify-center {
    justify-content: center
  }

  .l\:justify-end {
    justify-content: flex-end
  }

  .l\:justify-between {
    justify-content: space-between
  }

  .l\:justify-around {
    justify-content: space-around
  }

  .l\:justify-stretch {
    justify-content: stretch
  }

  .l\:flex-initial {
    flex: 0 1 auto
  }

  .l\:flex-1 {
    flex: 1 1
  }

  .l\:flex-auto {
    flex: 1 1 auto
  }

  .l\:flex-none {
    flex: none
  }

  .l\:order-first {
    order: -9999
  }

  .l\:order-last {
    order: 9999
  }

  .l\:order-0 {
    order: 0
  }

  .l\:gap-0 {
    gap: 0
  }

  .l\:gap-px {
    gap: 1px
  }

  .l\:gap-05 {
    gap: 0.125rem;
    gap: var(--su-05)
  }

  .l\:gap-1 {
    gap: 0.25rem;
    gap: var(--su-1)
  }

  .l\:gap-2 {
    gap: 0.5rem;
    gap: var(--su-2)
  }

  .l\:gap-3 {
    gap: 0.75rem;
    gap: var(--su-3)
  }

  .l\:gap-4 {
    gap: 1rem;
    gap: var(--su-4)
  }

  .l\:gap-5 {
    gap: 1.25rem;
    gap: var(--su-5)
  }

  .l\:gap-6 {
    gap: 1.5rem;
    gap: var(--su-6)
  }

  .l\:gap-7 {
    gap: 2rem;
    gap: var(--su-7)
  }

  .l\:gap-8 {
    gap: 3rem;
    gap: var(--su-8)
  }

  .l\:gap-9 {
    gap: 4rem;
    gap: var(--su-9)
  }

  .l\:gap-10 {
    gap: 8rem;
    gap: var(--su-10)
  }

  .l\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .l\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .l\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .l\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .l\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .l\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .l\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .l\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .l\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .l\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .l\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .l\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .l\:grid-rows-none {
    grid-template-rows: none
  }

  .l\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .l\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .l\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .l\:grid-flow-row {
    grid-auto-flow: row
  }

  .l\:grid-flow-col {
    grid-auto-flow: column
  }

  .l\:top-auto {
    top: auto
  }

  .l\:top-unset {
    top: auto;
    top: initial
  }

  .l\:top-0 {
    top: 0
  }

  .l\:top-100 {
    top: 100%
  }

  .l\:top-05 {
    top: 0.125rem;
    top: var(--su-05)
  }

  .l\:top-1 {
    top: 0.25rem;
    top: var(--su-1)
  }

  .l\:top-2 {
    top: 0.5rem;
    top: var(--su-2)
  }

  .l\:top-3 {
    top: 0.75rem;
    top: var(--su-3)
  }

  .l\:top-4 {
    top: 1rem;
    top: var(--su-4)
  }

  .l\:top-5 {
    top: 1.25rem;
    top: var(--su-5)
  }

  .l\:top-6 {
    top: 1.5rem;
    top: var(--su-6)
  }

  .l\:top-7 {
    top: 2rem;
    top: var(--su-7)
  }

  .l\:top-8 {
    top: 3rem;
    top: var(--su-8)
  }

  .l\:top-9 {
    top: 4rem;
    top: var(--su-9)
  }

  .l\:top-10 {
    top: 8rem;
    top: var(--su-10)
  }

  .l\:-top-100 {
    top: -100%
  }

  .l\:-top-05 {
    top: calc(0.125rem * -1);
    top: calc(var(--su-05) * -1)
  }

  .l\:-top-1 {
    top: calc(0.25rem * -1);
    top: calc(var(--su-1) * -1)
  }

  .l\:-top-2 {
    top: calc(0.5rem * -1);
    top: calc(var(--su-2) * -1)
  }

  .l\:-top-3 {
    top: calc(0.75rem * -1);
    top: calc(var(--su-3) * -1)
  }

  .l\:-top-4 {
    top: calc(1rem * -1);
    top: calc(var(--su-4) * -1)
  }

  .l\:-top-5 {
    top: calc(1.25rem * -1);
    top: calc(var(--su-5) * -1)
  }

  .l\:-top-6 {
    top: calc(1.5rem * -1);
    top: calc(var(--su-6) * -1)
  }

  .l\:-top-7 {
    top: calc(2rem * -1);
    top: calc(var(--su-7) * -1)
  }

  .l\:-top-8 {
    top: calc(3rem * -1);
    top: calc(var(--su-8) * -1)
  }

  .l\:-top-9 {
    top: calc(4rem * -1);
    top: calc(var(--su-9) * -1)
  }

  .l\:-top-10 {
    top: calc(8rem * -1);
    top: calc(var(--su-10) * -1)
  }

  .l\:bottom-auto {
    bottom: auto
  }

  .l\:bottom-unset {
    bottom: auto;
    bottom: initial
  }

  .l\:bottom-0 {
    bottom: 0
  }

  .l\:bottom-100 {
    bottom: 100%
  }

  .l\:bottom-05 {
    bottom: 0.125rem;
    bottom: var(--su-05)
  }

  .l\:bottom-1 {
    bottom: 0.25rem;
    bottom: var(--su-1)
  }

  .l\:bottom-2 {
    bottom: 0.5rem;
    bottom: var(--su-2)
  }

  .l\:bottom-3 {
    bottom: 0.75rem;
    bottom: var(--su-3)
  }

  .l\:bottom-4 {
    bottom: 1rem;
    bottom: var(--su-4)
  }

  .l\:bottom-5 {
    bottom: 1.25rem;
    bottom: var(--su-5)
  }

  .l\:bottom-6 {
    bottom: 1.5rem;
    bottom: var(--su-6)
  }

  .l\:bottom-7 {
    bottom: 2rem;
    bottom: var(--su-7)
  }

  .l\:bottom-8 {
    bottom: 3rem;
    bottom: var(--su-8)
  }

  .l\:bottom-9 {
    bottom: 4rem;
    bottom: var(--su-9)
  }

  .l\:bottom-10 {
    bottom: 8rem;
    bottom: var(--su-10)
  }

  .l\:-bottom-100 {
    bottom: -100%
  }

  .l\:-bottom-05 {
    bottom: calc(0.125rem * -1);
    bottom: calc(var(--su-05) * -1)
  }

  .l\:-bottom-1 {
    bottom: calc(0.25rem * -1);
    bottom: calc(var(--su-1) * -1)
  }

  .l\:-bottom-2 {
    bottom: calc(0.5rem * -1);
    bottom: calc(var(--su-2) * -1)
  }

  .l\:-bottom-3 {
    bottom: calc(0.75rem * -1);
    bottom: calc(var(--su-3) * -1)
  }

  .l\:-bottom-4 {
    bottom: calc(1rem * -1);
    bottom: calc(var(--su-4) * -1)
  }

  .l\:-bottom-5 {
    bottom: calc(1.25rem * -1);
    bottom: calc(var(--su-5) * -1)
  }

  .l\:-bottom-6 {
    bottom: calc(1.5rem * -1);
    bottom: calc(var(--su-6) * -1)
  }

  .l\:-bottom-7 {
    bottom: calc(2rem * -1);
    bottom: calc(var(--su-7) * -1)
  }

  .l\:-bottom-8 {
    bottom: calc(3rem * -1);
    bottom: calc(var(--su-8) * -1)
  }

  .l\:-bottom-9 {
    bottom: calc(4rem * -1);
    bottom: calc(var(--su-9) * -1)
  }

  .l\:-bottom-10 {
    bottom: calc(8rem * -1);
    bottom: calc(var(--su-10) * -1)
  }

  .l\:left-auto {
    left: auto
  }

  .l\:left-unset {
    left: auto;
    left: initial
  }

  .l\:left-0 {
    left: 0
  }

  .l\:left-100 {
    left: 100%
  }

  .l\:left-05 {
    left: 0.125rem;
    left: var(--su-05)
  }

  .l\:left-1 {
    left: 0.25rem;
    left: var(--su-1)
  }

  .l\:left-2 {
    left: 0.5rem;
    left: var(--su-2)
  }

  .l\:left-3 {
    left: 0.75rem;
    left: var(--su-3)
  }

  .l\:left-4 {
    left: 1rem;
    left: var(--su-4)
  }

  .l\:left-5 {
    left: 1.25rem;
    left: var(--su-5)
  }

  .l\:left-6 {
    left: 1.5rem;
    left: var(--su-6)
  }

  .l\:left-7 {
    left: 2rem;
    left: var(--su-7)
  }

  .l\:left-8 {
    left: 3rem;
    left: var(--su-8)
  }

  .l\:left-9 {
    left: 4rem;
    left: var(--su-9)
  }

  .l\:left-10 {
    left: 8rem;
    left: var(--su-10)
  }

  .l\:-left-100 {
    left: -100%
  }

  .l\:-left-05 {
    left: calc(0.125rem * -1);
    left: calc(var(--su-05) * -1)
  }

  .l\:-left-1 {
    left: calc(0.25rem * -1);
    left: calc(var(--su-1) * -1)
  }

  .l\:-left-2 {
    left: calc(0.5rem * -1);
    left: calc(var(--su-2) * -1)
  }

  .l\:-left-3 {
    left: calc(0.75rem * -1);
    left: calc(var(--su-3) * -1)
  }

  .l\:-left-4 {
    left: calc(1rem * -1);
    left: calc(var(--su-4) * -1)
  }

  .l\:-left-5 {
    left: calc(1.25rem * -1);
    left: calc(var(--su-5) * -1)
  }

  .l\:-left-6 {
    left: calc(1.5rem * -1);
    left: calc(var(--su-6) * -1)
  }

  .l\:-left-7 {
    left: calc(2rem * -1);
    left: calc(var(--su-7) * -1)
  }

  .l\:-left-8 {
    left: calc(3rem * -1);
    left: calc(var(--su-8) * -1)
  }

  .l\:-left-9 {
    left: calc(4rem * -1);
    left: calc(var(--su-9) * -1)
  }

  .l\:-left-10 {
    left: calc(8rem * -1);
    left: calc(var(--su-10) * -1)
  }

  .l\:right-auto {
    right: auto
  }

  .l\:right-unset {
    right: auto;
    right: initial
  }

  .l\:right-0 {
    right: 0
  }

  .l\:right-100 {
    right: 100%
  }

  .l\:right-05 {
    right: 0.125rem;
    right: var(--su-05)
  }

  .l\:right-1 {
    right: 0.25rem;
    right: var(--su-1)
  }

  .l\:right-2 {
    right: 0.5rem;
    right: var(--su-2)
  }

  .l\:right-3 {
    right: 0.75rem;
    right: var(--su-3)
  }

  .l\:right-4 {
    right: 1rem;
    right: var(--su-4)
  }

  .l\:right-5 {
    right: 1.25rem;
    right: var(--su-5)
  }

  .l\:right-6 {
    right: 1.5rem;
    right: var(--su-6)
  }

  .l\:right-7 {
    right: 2rem;
    right: var(--su-7)
  }

  .l\:right-8 {
    right: 3rem;
    right: var(--su-8)
  }

  .l\:right-9 {
    right: 4rem;
    right: var(--su-9)
  }

  .l\:right-10 {
    right: 8rem;
    right: var(--su-10)
  }

  .l\:-right-100 {
    right: -100%
  }

  .l\:-right-05 {
    right: calc(0.125rem * -1);
    right: calc(var(--su-05) * -1)
  }

  .l\:-right-1 {
    right: calc(0.25rem * -1);
    right: calc(var(--su-1) * -1)
  }

  .l\:-right-2 {
    right: calc(0.5rem * -1);
    right: calc(var(--su-2) * -1)
  }

  .l\:-right-3 {
    right: calc(0.75rem * -1);
    right: calc(var(--su-3) * -1)
  }

  .l\:-right-4 {
    right: calc(1rem * -1);
    right: calc(var(--su-4) * -1)
  }

  .l\:-right-5 {
    right: calc(1.25rem * -1);
    right: calc(var(--su-5) * -1)
  }

  .l\:-right-6 {
    right: calc(1.5rem * -1);
    right: calc(var(--su-6) * -1)
  }

  .l\:-right-7 {
    right: calc(2rem * -1);
    right: calc(var(--su-7) * -1)
  }

  .l\:-right-8 {
    right: calc(3rem * -1);
    right: calc(var(--su-8) * -1)
  }

  .l\:-right-9 {
    right: calc(4rem * -1);
    right: calc(var(--su-9) * -1)
  }

  .l\:-right-10 {
    right: calc(8rem * -1);
    right: calc(var(--su-10) * -1)
  }

  .l\:overflow-auto {
    overflow: auto
  }

  .l\:overflow-visible {
    overflow: visible
  }

  .l\:overflow-hidden {
    overflow: hidden
  }

  .l\:w-0 {
    width: 0
  }

  .l\:w-10 {
    width: 10%
  }

  .l\:w-15 {
    width: 15%
  }

  .l\:w-25 {
    width: 25%
  }

  .l\:w-50 {
    width: 50%
  }

  .l\:w-60 {
    width: 60%
  }

  .l\:w-70 {
    width: 70%
  }

  .l\:w-75 {
    width: 75%
  }

  .l\:w-80 {
    width: 80%
  }

  .l\:w-100 {
    width: 100%
  }

  .l\:w-auto {
    width: auto
  }

  .l\:w-full {
    width: 100vw
  }

  .l\:w-max {
    width: -moz-max-content;
    width: max-content
  }

  .l\:w-fit {
    width: -moz-fit-content;
    width: fit-content
  }

  .l\:max-w-0 {
    max-width: 0
  }

  .l\:max-w-25 {
    max-width: 25%
  }

  .l\:max-w-50 {
    max-width: 50%
  }

  .l\:max-w-75 {
    max-width: 75%
  }

  .l\:max-w-100 {
    max-width: 100%
  }

  .l\:max-w-unset {
    max-width: none;
    max-width: initial
  }

  .l\:m-auto {
    margin: auto
  }

  .l\:m-unset {
    margin: 0;
    margin: initial
  }

  .l\:m-0 {
    margin: 0
  }

  .l\:m-05 {
    margin: 0.125rem;
    margin: var(--su-05)
  }

  .l\:m-1 {
    margin: 0.25rem;
    margin: var(--su-1)
  }

  .l\:m-2 {
    margin: 0.5rem;
    margin: var(--su-2)
  }

  .l\:m-3 {
    margin: 0.75rem;
    margin: var(--su-3)
  }

  .l\:m-4 {
    margin: 1rem;
    margin: var(--su-4)
  }

  .l\:m-5 {
    margin: 1.25rem;
    margin: var(--su-5)
  }

  .l\:m-6 {
    margin: 1.5rem;
    margin: var(--su-6)
  }

  .l\:m-7 {
    margin: 2rem;
    margin: var(--su-7)
  }

  .l\:m-8 {
    margin: 3rem;
    margin: var(--su-8)
  }

  .l\:m-9 {
    margin: 4rem;
    margin: var(--su-9)
  }

  .l\:m-10 {
    margin: 8rem;
    margin: var(--su-10)
  }

  .l\:-m-05 {
    margin: calc(0.125rem * -1);
    margin: calc(var(--su-05) * -1)
  }

  .l\:-m-1 {
    margin: calc(0.25rem * -1);
    margin: calc(var(--su-1) * -1)
  }

  .l\:-m-2 {
    margin: calc(0.5rem * -1);
    margin: calc(var(--su-2) * -1)
  }

  .l\:-m-3 {
    margin: calc(0.75rem * -1);
    margin: calc(var(--su-3) * -1)
  }

  .l\:-m-4 {
    margin: calc(1rem * -1);
    margin: calc(var(--su-4) * -1)
  }

  .l\:-m-5 {
    margin: calc(1.25rem * -1);
    margin: calc(var(--su-5) * -1)
  }

  .l\:-m-6 {
    margin: calc(1.5rem * -1);
    margin: calc(var(--su-6) * -1)
  }

  .l\:-m-7 {
    margin: calc(2rem * -1);
    margin: calc(var(--su-7) * -1)
  }

  .l\:-m-8 {
    margin: calc(3rem * -1);
    margin: calc(var(--su-8) * -1)
  }

  .l\:-m-9 {
    margin: calc(4rem * -1);
    margin: calc(var(--su-9) * -1)
  }

  .l\:-m-10 {
    margin: calc(8rem * -1);
    margin: calc(var(--su-10) * -1)
  }

  .l\:my-auto {
    margin-top: auto;
    margin-bottom: auto
  }

  .l\:my-unset {
    margin-top: 0;
    margin-top: initial;
    margin-bottom: 0;
    margin-bottom: initial
  }

  .l\:my-0 {
    margin-top: 0;
    margin-bottom: 0
  }

  .l\:my-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05);
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .l\:my-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1);
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .l\:my-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2);
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .l\:my-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3);
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .l\:my-4 {
    margin-top: 1rem;
    margin-top: var(--su-4);
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .l\:my-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5);
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .l\:my-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6);
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .l\:my-7 {
    margin-top: 2rem;
    margin-top: var(--su-7);
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .l\:my-8 {
    margin-top: 3rem;
    margin-top: var(--su-8);
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .l\:my-9 {
    margin-top: 4rem;
    margin-top: var(--su-9);
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .l\:my-10 {
    margin-top: 8rem;
    margin-top: var(--su-10);
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .l\:-my-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1);
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .l\:-my-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1);
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .l\:-my-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1);
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .l\:-my-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1);
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .l\:-my-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1);
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .l\:-my-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1);
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .l\:-my-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1);
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .l\:-my-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1);
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .l\:-my-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1);
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .l\:-my-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1);
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .l\:-my-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1);
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .l\:mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .l\:mx-unset {
    margin-left: 0;
    margin-left: initial;
    margin-right: 0;
    margin-right: initial
  }

  .l\:mx-0 {
    margin-left: 0;
    margin-right: 0
  }

  .l\:mx-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05);
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .l\:mx-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1);
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .l\:mx-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2);
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .l\:mx-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3);
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .l\:mx-4 {
    margin-left: 1rem;
    margin-left: var(--su-4);
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .l\:mx-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5);
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .l\:mx-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6);
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .l\:mx-7 {
    margin-left: 2rem;
    margin-left: var(--su-7);
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .l\:mx-8 {
    margin-left: 3rem;
    margin-left: var(--su-8);
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .l\:mx-9 {
    margin-left: 4rem;
    margin-left: var(--su-9);
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .l\:mx-10 {
    margin-left: 8rem;
    margin-left: var(--su-10);
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .l\:-mx-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1);
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .l\:-mx-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1);
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .l\:-mx-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1);
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .l\:-mx-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1);
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .l\:-mx-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1);
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .l\:-mx-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1);
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .l\:-mx-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1);
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .l\:-mx-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1);
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .l\:-mx-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1);
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .l\:-mx-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1);
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .l\:-mx-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1);
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .l\:mt-auto {
    margin-top: auto
  }

  .l\:mt-unset {
    margin-top: 0;
    margin-top: initial
  }

  .l\:mt-0 {
    margin-top: 0
  }

  .l\:mt-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05)
  }

  .l\:mt-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1)
  }

  .l\:mt-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2)
  }

  .l\:mt-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3)
  }

  .l\:mt-4 {
    margin-top: 1rem;
    margin-top: var(--su-4)
  }

  .l\:mt-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5)
  }

  .l\:mt-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6)
  }

  .l\:mt-7 {
    margin-top: 2rem;
    margin-top: var(--su-7)
  }

  .l\:mt-8 {
    margin-top: 3rem;
    margin-top: var(--su-8)
  }

  .l\:mt-9 {
    margin-top: 4rem;
    margin-top: var(--su-9)
  }

  .l\:mt-10 {
    margin-top: 8rem;
    margin-top: var(--su-10)
  }

  .l\:-mt-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1)
  }

  .l\:-mt-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1)
  }

  .l\:-mt-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1)
  }

  .l\:-mt-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1)
  }

  .l\:-mt-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1)
  }

  .l\:-mt-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1)
  }

  .l\:-mt-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1)
  }

  .l\:-mt-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1)
  }

  .l\:-mt-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1)
  }

  .l\:-mt-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1)
  }

  .l\:-mt-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1)
  }

  .l\:mb-auto {
    margin-bottom: auto
  }

  .l\:mb-unset {
    margin-bottom: 0;
    margin-bottom: initial
  }

  .l\:mb-0 {
    margin-bottom: 0
  }

  .l\:mb-05 {
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .l\:mb-1 {
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .l\:mb-2 {
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .l\:mb-3 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .l\:mb-4 {
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .l\:mb-5 {
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .l\:mb-6 {
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .l\:mb-7 {
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .l\:mb-8 {
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .l\:mb-9 {
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .l\:mb-10 {
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .l\:-mb-05 {
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .l\:-mb-1 {
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .l\:-mb-2 {
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .l\:-mb-3 {
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .l\:-mb-4 {
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .l\:-mb-5 {
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .l\:-mb-6 {
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .l\:-mb-7 {
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .l\:-mb-8 {
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .l\:-mb-9 {
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .l\:-mb-10 {
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .l\:ml-auto {
    margin-left: auto
  }

  .l\:ml-unset {
    margin-left: 0;
    margin-left: initial
  }

  .l\:ml-0 {
    margin-left: 0
  }

  .l\:ml-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05)
  }

  .l\:ml-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1)
  }

  .l\:ml-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2)
  }

  .l\:ml-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3)
  }

  .l\:ml-4 {
    margin-left: 1rem;
    margin-left: var(--su-4)
  }

  .l\:ml-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5)
  }

  .l\:ml-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6)
  }

  .l\:ml-7 {
    margin-left: 2rem;
    margin-left: var(--su-7)
  }

  .l\:ml-8 {
    margin-left: 3rem;
    margin-left: var(--su-8)
  }

  .l\:ml-9 {
    margin-left: 4rem;
    margin-left: var(--su-9)
  }

  .l\:ml-10 {
    margin-left: 8rem;
    margin-left: var(--su-10)
  }

  .l\:-ml-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1)
  }

  .l\:-ml-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1)
  }

  .l\:-ml-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1)
  }

  .l\:-ml-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1)
  }

  .l\:-ml-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1)
  }

  .l\:-ml-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1)
  }

  .l\:-ml-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1)
  }

  .l\:-ml-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1)
  }

  .l\:-ml-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1)
  }

  .l\:-ml-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1)
  }

  .l\:-ml-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1)
  }

  .l\:mr-auto {
    margin-right: auto
  }

  .l\:mr-unset {
    margin-right: 0;
    margin-right: initial
  }

  .l\:mr-0 {
    margin-right: 0
  }

  .l\:mr-05 {
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .l\:mr-1 {
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .l\:mr-2 {
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .l\:mr-3 {
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .l\:mr-4 {
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .l\:mr-5 {
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .l\:mr-6 {
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .l\:mr-7 {
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .l\:mr-8 {
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .l\:mr-9 {
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .l\:mr-10 {
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .l\:-mr-05 {
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .l\:-mr-1 {
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .l\:-mr-2 {
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .l\:-mr-3 {
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .l\:-mr-4 {
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .l\:-mr-5 {
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .l\:-mr-6 {
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .l\:-mr-7 {
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .l\:-mr-8 {
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .l\:-mr-9 {
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .l\:-mr-10 {
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .l\:p-0 {
    padding: 0
  }

  .l\:p-unset {
    padding: 0;
    padding: initial
  }

  .l\:p-05 {
    padding: 0.125rem;
    padding: var(--su-05)
  }

  .l\:p-1 {
    padding: 0.25rem;
    padding: var(--su-1)
  }

  .l\:p-2 {
    padding: 0.5rem;
    padding: var(--su-2)
  }

  .l\:p-3 {
    padding: 0.75rem;
    padding: var(--su-3)
  }

  .l\:p-4 {
    padding: 1rem;
    padding: var(--su-4)
  }

  .l\:p-5 {
    padding: 1.25rem;
    padding: var(--su-5)
  }

  .l\:p-6 {
    padding: 1.5rem;
    padding: var(--su-6)
  }

  .l\:p-7 {
    padding: 2rem;
    padding: var(--su-7)
  }

  .l\:p-8 {
    padding: 3rem;
    padding: var(--su-8)
  }

  .l\:p-9 {
    padding: 4rem;
    padding: var(--su-9)
  }

  .l\:p-10 {
    padding: 8rem;
    padding: var(--su-10)
  }

  .l\:py-0 {
    padding-top: 0;
    padding-bottom: 0
  }

  .l\:py-unset {
    padding-top: 0;
    padding-top: initial;
    padding-bottom: 0;
    padding-bottom: initial
  }

  .l\:py-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05);
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .l\:py-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1);
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .l\:py-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2);
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .l\:py-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3);
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .l\:py-4 {
    padding-top: 1rem;
    padding-top: var(--su-4);
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .l\:py-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5);
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .l\:py-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6);
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .l\:py-7 {
    padding-top: 2rem;
    padding-top: var(--su-7);
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .l\:py-8 {
    padding-top: 3rem;
    padding-top: var(--su-8);
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .l\:py-9 {
    padding-top: 4rem;
    padding-top: var(--su-9);
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .l\:py-10 {
    padding-top: 8rem;
    padding-top: var(--su-10);
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .l\:px-0 {
    padding-left: 0;
    padding-right: 0
  }

  .l\:px-unset {
    padding-left: 0;
    padding-left: initial;
    padding-right: 0;
    padding-right: initial
  }

  .l\:px-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05);
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .l\:px-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1);
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .l\:px-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2);
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .l\:px-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3);
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .l\:px-4 {
    padding-left: 1rem;
    padding-left: var(--su-4);
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .l\:px-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5);
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .l\:px-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6);
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .l\:px-7 {
    padding-left: 2rem;
    padding-left: var(--su-7);
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .l\:px-8 {
    padding-left: 3rem;
    padding-left: var(--su-8);
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .l\:px-9 {
    padding-left: 4rem;
    padding-left: var(--su-9);
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .l\:px-10 {
    padding-left: 8rem;
    padding-left: var(--su-10);
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .l\:pt-0 {
    padding-top: 0
  }

  .l\:pt-unset {
    padding-top: 0;
    padding-top: initial
  }

  .l\:pt-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05)
  }

  .l\:pt-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1)
  }

  .l\:pt-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2)
  }

  .l\:pt-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3)
  }

  .l\:pt-4 {
    padding-top: 1rem;
    padding-top: var(--su-4)
  }

  .l\:pt-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5)
  }

  .l\:pt-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6)
  }

  .l\:pt-7 {
    padding-top: 2rem;
    padding-top: var(--su-7)
  }

  .l\:pt-8 {
    padding-top: 3rem;
    padding-top: var(--su-8)
  }

  .l\:pt-9 {
    padding-top: 4rem;
    padding-top: var(--su-9)
  }

  .l\:pt-10 {
    padding-top: 8rem;
    padding-top: var(--su-10)
  }

  .l\:pb-0 {
    padding-bottom: 0
  }

  .l\:pb-unset {
    padding-bottom: 0;
    padding-bottom: initial
  }

  .l\:pb-05 {
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .l\:pb-1 {
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .l\:pb-2 {
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .l\:pb-3 {
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .l\:pb-4 {
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .l\:pb-5 {
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .l\:pb-6 {
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .l\:pb-7 {
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .l\:pb-8 {
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .l\:pb-9 {
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .l\:pb-10 {
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .l\:pl-0 {
    padding-left: 0
  }

  .l\:pl-unset {
    padding-left: 0;
    padding-left: initial
  }

  .l\:pl-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05)
  }

  .l\:pl-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1)
  }

  .l\:pl-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2)
  }

  .l\:pl-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3)
  }

  .l\:pl-4 {
    padding-left: 1rem;
    padding-left: var(--su-4)
  }

  .l\:pl-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5)
  }

  .l\:pl-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6)
  }

  .l\:pl-7 {
    padding-left: 2rem;
    padding-left: var(--su-7)
  }

  .l\:pl-8 {
    padding-left: 3rem;
    padding-left: var(--su-8)
  }

  .l\:pl-9 {
    padding-left: 4rem;
    padding-left: var(--su-9)
  }

  .l\:pl-10 {
    padding-left: 8rem;
    padding-left: var(--su-10)
  }

  .l\:pr-0 {
    padding-right: 0
  }

  .l\:pr-unset {
    padding-right: 0;
    padding-right: initial
  }

  .l\:pr-05 {
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .l\:pr-1 {
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .l\:pr-2 {
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .l\:pr-3 {
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .l\:pr-4 {
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .l\:pr-5 {
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .l\:pr-6 {
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .l\:pr-7 {
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .l\:pr-8 {
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .l\:pr-9 {
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .l\:pr-10 {
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .l\:fs-2xs {
    font-size: 0.675rem;
    font-size: var(--fs-2xs)
  }

  .l\:fs-xs {
    font-size: 0.75rem;
    font-size: var(--fs-xs)
  }

  .l\:fs-s {
    font-size: 0.875rem;
    font-size: var(--fs-s)
  }

  .l\:fs-base {
    font-size: 1rem;
    font-size: var(--fs-base)
  }

  .l\:fs-l {
    font-size: 1.125rem;
    font-size: var(--fs-l)
  }

  .l\:fs-xl {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }

  .l\:fs-2xl {
    font-size: 1.5rem;
    font-size: var(--fs-2xl)
  }

  .l\:fs-3xl {
    font-size: 1.875rem;
    font-size: var(--fs-3xl)
  }

  .l\:fs-4xl {
    font-size: 2.25rem;
    font-size: var(--fs-4xl)
  }

  .l\:fs-5xl {
    font-size: 3rem;
    font-size: var(--fs-5xl)
  }

  .l\:fw-normal {
    font-weight: 400;
    font-weight: var(--fw-normal)
  }

  .l\:fw-medium {
    font-weight: 500;
    font-weight: var(--fw-medium)
  }

  .l\:fw-bold {
    font-weight: 700;
    font-weight: var(--fw-bold)
  }

  .l\:fw-heavy {
    font-weight: 800;
    font-weight: var(--fw-heavy)
  }

  .l\:align-left {
    text-align: left
  }

  .l\:align-center {
    text-align: center
  }

  .l\:align-right {
    text-align: right
  }

  .l\:hidden {
    display: none
  }

  .l\:block {
    display: block
  }

  .l\:inline {
    display: inline
  }

  .l\:inline-block {
    display: inline-block
  }

  .l\:flex {
    display: flex
  }

  .l\:inline-flex {
    display: inline-flex
  }

  .l\:grid {
    display: grid
  }

  .l\:table {
    display: table
  }

  .l\:static {
    position: static
  }

  .l\:absolute {
    position: absolute
  }

  .l\:fixed {
    position: fixed
  }

  .l\:sticky {
    position: sticky
  }

  .l\:relative {
    position: relative
  }
}

@media (min-width: 1280px) {
  .xl\:flex-row {
    flex-direction: row
  }

  .xl\:flex-col {
    flex-direction: column
  }

  .xl\:flex-wrap {
    flex-wrap: wrap
  }

  .xl\:flex-nowrap {
    flex-wrap: nowrap
  }

  .xl\:items-stretch {
    align-items: stretch
  }

  .xl\:items-start {
    align-items: flex-start
  }

  .xl\:items-center {
    align-items: center
  }

  .xl\:items-end {
    align-items: flex-end
  }

  .xl\:basis-1-5 {
    flex-basis: 20%
  }

  .xl\:basis-2-5 {
    flex-basis: 40%
  }

  .xl\:basis-3-5 {
    flex-basis: 60%
  }

  .xl\:basis-4-5 {
    flex-basis: 80%
  }

  .xl\:basis-1-4 {
    flex-basis: 25%
  }

  .xl\:basis-1-3 {
    flex-basis: 33.333333%
  }

  .xl\:basis-1-2 {
    flex-basis: 50%
  }

  .xl\:basis-2-3 {
    flex-basis: 66.666667%
  }

  .xl\:basis-3-4 {
    flex-basis: 75%
  }

  .xl\:content-start {
    align-content: flex-start
  }

  .xl\:content-center {
    align-content: center
  }

  .xl\:content-end {
    align-content: flex-end
  }

  .xl\:content-between {
    align-content: space-between
  }

  .xl\:content-around {
    align-content: space-around
  }

  .xl\:self-auto {
    align-self: auto
  }

  .xl\:self-start {
    align-self: flex-start
  }

  .xl\:self-center {
    align-self: center
  }

  .xl\:self-end {
    align-self: flex-end
  }

  .xl\:self-stretch {
    align-self: stretch
  }

  .xl\:justify-start {
    justify-content: flex-start
  }

  .xl\:justify-center {
    justify-content: center
  }

  .xl\:justify-end {
    justify-content: flex-end
  }

  .xl\:justify-between {
    justify-content: space-between
  }

  .xl\:justify-around {
    justify-content: space-around
  }

  .xl\:justify-stretch {
    justify-content: stretch
  }

  .xl\:flex-initial {
    flex: 0 1 auto
  }

  .xl\:flex-1 {
    flex: 1 1
  }

  .xl\:flex-auto {
    flex: 1 1 auto
  }

  .xl\:flex-none {
    flex: none
  }

  .xl\:order-first {
    order: -9999
  }

  .xl\:order-last {
    order: 9999
  }

  .xl\:order-0 {
    order: 0
  }

  .xl\:gap-0 {
    gap: 0
  }

  .xl\:gap-px {
    gap: 1px
  }

  .xl\:gap-05 {
    gap: 0.125rem;
    gap: var(--su-05)
  }

  .xl\:gap-1 {
    gap: 0.25rem;
    gap: var(--su-1)
  }

  .xl\:gap-2 {
    gap: 0.5rem;
    gap: var(--su-2)
  }

  .xl\:gap-3 {
    gap: 0.75rem;
    gap: var(--su-3)
  }

  .xl\:gap-4 {
    gap: 1rem;
    gap: var(--su-4)
  }

  .xl\:gap-5 {
    gap: 1.25rem;
    gap: var(--su-5)
  }

  .xl\:gap-6 {
    gap: 1.5rem;
    gap: var(--su-6)
  }

  .xl\:gap-7 {
    gap: 2rem;
    gap: var(--su-7)
  }

  .xl\:gap-8 {
    gap: 3rem;
    gap: var(--su-8)
  }

  .xl\:gap-9 {
    gap: 4rem;
    gap: var(--su-9)
  }

  .xl\:gap-10 {
    gap: 8rem;
    gap: var(--su-10)
  }

  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .xl\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .xl\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .xl\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .xl\:grid-rows-none {
    grid-template-rows: none
  }

  .xl\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .xl\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .xl\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .xl\:grid-flow-row {
    grid-auto-flow: row
  }

  .xl\:grid-flow-col {
    grid-auto-flow: column
  }

  .xl\:top-auto {
    top: auto
  }

  .xl\:top-unset {
    top: auto;
    top: initial
  }

  .xl\:top-0 {
    top: 0
  }

  .xl\:top-100 {
    top: 100%
  }

  .xl\:top-05 {
    top: 0.125rem;
    top: var(--su-05)
  }

  .xl\:top-1 {
    top: 0.25rem;
    top: var(--su-1)
  }

  .xl\:top-2 {
    top: 0.5rem;
    top: var(--su-2)
  }

  .xl\:top-3 {
    top: 0.75rem;
    top: var(--su-3)
  }

  .xl\:top-4 {
    top: 1rem;
    top: var(--su-4)
  }

  .xl\:top-5 {
    top: 1.25rem;
    top: var(--su-5)
  }

  .xl\:top-6 {
    top: 1.5rem;
    top: var(--su-6)
  }

  .xl\:top-7 {
    top: 2rem;
    top: var(--su-7)
  }

  .xl\:top-8 {
    top: 3rem;
    top: var(--su-8)
  }

  .xl\:top-9 {
    top: 4rem;
    top: var(--su-9)
  }

  .xl\:top-10 {
    top: 8rem;
    top: var(--su-10)
  }

  .xl\:-top-100 {
    top: -100%
  }

  .xl\:-top-05 {
    top: calc(0.125rem * -1);
    top: calc(var(--su-05) * -1)
  }

  .xl\:-top-1 {
    top: calc(0.25rem * -1);
    top: calc(var(--su-1) * -1)
  }

  .xl\:-top-2 {
    top: calc(0.5rem * -1);
    top: calc(var(--su-2) * -1)
  }

  .xl\:-top-3 {
    top: calc(0.75rem * -1);
    top: calc(var(--su-3) * -1)
  }

  .xl\:-top-4 {
    top: calc(1rem * -1);
    top: calc(var(--su-4) * -1)
  }

  .xl\:-top-5 {
    top: calc(1.25rem * -1);
    top: calc(var(--su-5) * -1)
  }

  .xl\:-top-6 {
    top: calc(1.5rem * -1);
    top: calc(var(--su-6) * -1)
  }

  .xl\:-top-7 {
    top: calc(2rem * -1);
    top: calc(var(--su-7) * -1)
  }

  .xl\:-top-8 {
    top: calc(3rem * -1);
    top: calc(var(--su-8) * -1)
  }

  .xl\:-top-9 {
    top: calc(4rem * -1);
    top: calc(var(--su-9) * -1)
  }

  .xl\:-top-10 {
    top: calc(8rem * -1);
    top: calc(var(--su-10) * -1)
  }

  .xl\:bottom-auto {
    bottom: auto
  }

  .xl\:bottom-unset {
    bottom: auto;
    bottom: initial
  }

  .xl\:bottom-0 {
    bottom: 0
  }

  .xl\:bottom-100 {
    bottom: 100%
  }

  .xl\:bottom-05 {
    bottom: 0.125rem;
    bottom: var(--su-05)
  }

  .xl\:bottom-1 {
    bottom: 0.25rem;
    bottom: var(--su-1)
  }

  .xl\:bottom-2 {
    bottom: 0.5rem;
    bottom: var(--su-2)
  }

  .xl\:bottom-3 {
    bottom: 0.75rem;
    bottom: var(--su-3)
  }

  .xl\:bottom-4 {
    bottom: 1rem;
    bottom: var(--su-4)
  }

  .xl\:bottom-5 {
    bottom: 1.25rem;
    bottom: var(--su-5)
  }

  .xl\:bottom-6 {
    bottom: 1.5rem;
    bottom: var(--su-6)
  }

  .xl\:bottom-7 {
    bottom: 2rem;
    bottom: var(--su-7)
  }

  .xl\:bottom-8 {
    bottom: 3rem;
    bottom: var(--su-8)
  }

  .xl\:bottom-9 {
    bottom: 4rem;
    bottom: var(--su-9)
  }

  .xl\:bottom-10 {
    bottom: 8rem;
    bottom: var(--su-10)
  }

  .xl\:-bottom-100 {
    bottom: -100%
  }

  .xl\:-bottom-05 {
    bottom: calc(0.125rem * -1);
    bottom: calc(var(--su-05) * -1)
  }

  .xl\:-bottom-1 {
    bottom: calc(0.25rem * -1);
    bottom: calc(var(--su-1) * -1)
  }

  .xl\:-bottom-2 {
    bottom: calc(0.5rem * -1);
    bottom: calc(var(--su-2) * -1)
  }

  .xl\:-bottom-3 {
    bottom: calc(0.75rem * -1);
    bottom: calc(var(--su-3) * -1)
  }

  .xl\:-bottom-4 {
    bottom: calc(1rem * -1);
    bottom: calc(var(--su-4) * -1)
  }

  .xl\:-bottom-5 {
    bottom: calc(1.25rem * -1);
    bottom: calc(var(--su-5) * -1)
  }

  .xl\:-bottom-6 {
    bottom: calc(1.5rem * -1);
    bottom: calc(var(--su-6) * -1)
  }

  .xl\:-bottom-7 {
    bottom: calc(2rem * -1);
    bottom: calc(var(--su-7) * -1)
  }

  .xl\:-bottom-8 {
    bottom: calc(3rem * -1);
    bottom: calc(var(--su-8) * -1)
  }

  .xl\:-bottom-9 {
    bottom: calc(4rem * -1);
    bottom: calc(var(--su-9) * -1)
  }

  .xl\:-bottom-10 {
    bottom: calc(8rem * -1);
    bottom: calc(var(--su-10) * -1)
  }

  .xl\:left-auto {
    left: auto
  }

  .xl\:left-unset {
    left: auto;
    left: initial
  }

  .xl\:left-0 {
    left: 0
  }

  .xl\:left-100 {
    left: 100%
  }

  .xl\:left-05 {
    left: 0.125rem;
    left: var(--su-05)
  }

  .xl\:left-1 {
    left: 0.25rem;
    left: var(--su-1)
  }

  .xl\:left-2 {
    left: 0.5rem;
    left: var(--su-2)
  }

  .xl\:left-3 {
    left: 0.75rem;
    left: var(--su-3)
  }

  .xl\:left-4 {
    left: 1rem;
    left: var(--su-4)
  }

  .xl\:left-5 {
    left: 1.25rem;
    left: var(--su-5)
  }

  .xl\:left-6 {
    left: 1.5rem;
    left: var(--su-6)
  }

  .xl\:left-7 {
    left: 2rem;
    left: var(--su-7)
  }

  .xl\:left-8 {
    left: 3rem;
    left: var(--su-8)
  }

  .xl\:left-9 {
    left: 4rem;
    left: var(--su-9)
  }

  .xl\:left-10 {
    left: 8rem;
    left: var(--su-10)
  }

  .xl\:-left-100 {
    left: -100%
  }

  .xl\:-left-05 {
    left: calc(0.125rem * -1);
    left: calc(var(--su-05) * -1)
  }

  .xl\:-left-1 {
    left: calc(0.25rem * -1);
    left: calc(var(--su-1) * -1)
  }

  .xl\:-left-2 {
    left: calc(0.5rem * -1);
    left: calc(var(--su-2) * -1)
  }

  .xl\:-left-3 {
    left: calc(0.75rem * -1);
    left: calc(var(--su-3) * -1)
  }

  .xl\:-left-4 {
    left: calc(1rem * -1);
    left: calc(var(--su-4) * -1)
  }

  .xl\:-left-5 {
    left: calc(1.25rem * -1);
    left: calc(var(--su-5) * -1)
  }

  .xl\:-left-6 {
    left: calc(1.5rem * -1);
    left: calc(var(--su-6) * -1)
  }

  .xl\:-left-7 {
    left: calc(2rem * -1);
    left: calc(var(--su-7) * -1)
  }

  .xl\:-left-8 {
    left: calc(3rem * -1);
    left: calc(var(--su-8) * -1)
  }

  .xl\:-left-9 {
    left: calc(4rem * -1);
    left: calc(var(--su-9) * -1)
  }

  .xl\:-left-10 {
    left: calc(8rem * -1);
    left: calc(var(--su-10) * -1)
  }

  .xl\:right-auto {
    right: auto
  }

  .xl\:right-unset {
    right: auto;
    right: initial
  }

  .xl\:right-0 {
    right: 0
  }

  .xl\:right-100 {
    right: 100%
  }

  .xl\:right-05 {
    right: 0.125rem;
    right: var(--su-05)
  }

  .xl\:right-1 {
    right: 0.25rem;
    right: var(--su-1)
  }

  .xl\:right-2 {
    right: 0.5rem;
    right: var(--su-2)
  }

  .xl\:right-3 {
    right: 0.75rem;
    right: var(--su-3)
  }

  .xl\:right-4 {
    right: 1rem;
    right: var(--su-4)
  }

  .xl\:right-5 {
    right: 1.25rem;
    right: var(--su-5)
  }

  .xl\:right-6 {
    right: 1.5rem;
    right: var(--su-6)
  }

  .xl\:right-7 {
    right: 2rem;
    right: var(--su-7)
  }

  .xl\:right-8 {
    right: 3rem;
    right: var(--su-8)
  }

  .xl\:right-9 {
    right: 4rem;
    right: var(--su-9)
  }

  .xl\:right-10 {
    right: 8rem;
    right: var(--su-10)
  }

  .xl\:-right-100 {
    right: -100%
  }

  .xl\:-right-05 {
    right: calc(0.125rem * -1);
    right: calc(var(--su-05) * -1)
  }

  .xl\:-right-1 {
    right: calc(0.25rem * -1);
    right: calc(var(--su-1) * -1)
  }

  .xl\:-right-2 {
    right: calc(0.5rem * -1);
    right: calc(var(--su-2) * -1)
  }

  .xl\:-right-3 {
    right: calc(0.75rem * -1);
    right: calc(var(--su-3) * -1)
  }

  .xl\:-right-4 {
    right: calc(1rem * -1);
    right: calc(var(--su-4) * -1)
  }

  .xl\:-right-5 {
    right: calc(1.25rem * -1);
    right: calc(var(--su-5) * -1)
  }

  .xl\:-right-6 {
    right: calc(1.5rem * -1);
    right: calc(var(--su-6) * -1)
  }

  .xl\:-right-7 {
    right: calc(2rem * -1);
    right: calc(var(--su-7) * -1)
  }

  .xl\:-right-8 {
    right: calc(3rem * -1);
    right: calc(var(--su-8) * -1)
  }

  .xl\:-right-9 {
    right: calc(4rem * -1);
    right: calc(var(--su-9) * -1)
  }

  .xl\:-right-10 {
    right: calc(8rem * -1);
    right: calc(var(--su-10) * -1)
  }

  .xl\:overflow-auto {
    overflow: auto
  }

  .xl\:overflow-visible {
    overflow: visible
  }

  .xl\:overflow-hidden {
    overflow: hidden
  }

  .xl\:w-0 {
    width: 0
  }

  .xl\:w-10 {
    width: 10%
  }

  .xl\:w-15 {
    width: 15%
  }

  .xl\:w-25 {
    width: 25%
  }

  .xl\:w-50 {
    width: 50%
  }

  .xl\:w-60 {
    width: 60%
  }

  .xl\:w-70 {
    width: 70%
  }

  .xl\:w-75 {
    width: 75%
  }

  .xl\:w-80 {
    width: 80%
  }

  .xl\:w-100 {
    width: 100%
  }

  .xl\:w-auto {
    width: auto
  }

  .xl\:w-full {
    width: 100vw
  }

  .xl\:w-max {
    width: -moz-max-content;
    width: max-content
  }

  .xl\:w-fit {
    width: -moz-fit-content;
    width: fit-content
  }

  .xl\:max-w-0 {
    max-width: 0
  }

  .xl\:max-w-25 {
    max-width: 25%
  }

  .xl\:max-w-50 {
    max-width: 50%
  }

  .xl\:max-w-75 {
    max-width: 75%
  }

  .xl\:max-w-100 {
    max-width: 100%
  }

  .xl\:max-w-unset {
    max-width: none;
    max-width: initial
  }

  .xl\:m-auto {
    margin: auto
  }

  .xl\:m-unset {
    margin: 0;
    margin: initial
  }

  .xl\:m-0 {
    margin: 0
  }

  .xl\:m-05 {
    margin: 0.125rem;
    margin: var(--su-05)
  }

  .xl\:m-1 {
    margin: 0.25rem;
    margin: var(--su-1)
  }

  .xl\:m-2 {
    margin: 0.5rem;
    margin: var(--su-2)
  }

  .xl\:m-3 {
    margin: 0.75rem;
    margin: var(--su-3)
  }

  .xl\:m-4 {
    margin: 1rem;
    margin: var(--su-4)
  }

  .xl\:m-5 {
    margin: 1.25rem;
    margin: var(--su-5)
  }

  .xl\:m-6 {
    margin: 1.5rem;
    margin: var(--su-6)
  }

  .xl\:m-7 {
    margin: 2rem;
    margin: var(--su-7)
  }

  .xl\:m-8 {
    margin: 3rem;
    margin: var(--su-8)
  }

  .xl\:m-9 {
    margin: 4rem;
    margin: var(--su-9)
  }

  .xl\:m-10 {
    margin: 8rem;
    margin: var(--su-10)
  }

  .xl\:-m-05 {
    margin: calc(0.125rem * -1);
    margin: calc(var(--su-05) * -1)
  }

  .xl\:-m-1 {
    margin: calc(0.25rem * -1);
    margin: calc(var(--su-1) * -1)
  }

  .xl\:-m-2 {
    margin: calc(0.5rem * -1);
    margin: calc(var(--su-2) * -1)
  }

  .xl\:-m-3 {
    margin: calc(0.75rem * -1);
    margin: calc(var(--su-3) * -1)
  }

  .xl\:-m-4 {
    margin: calc(1rem * -1);
    margin: calc(var(--su-4) * -1)
  }

  .xl\:-m-5 {
    margin: calc(1.25rem * -1);
    margin: calc(var(--su-5) * -1)
  }

  .xl\:-m-6 {
    margin: calc(1.5rem * -1);
    margin: calc(var(--su-6) * -1)
  }

  .xl\:-m-7 {
    margin: calc(2rem * -1);
    margin: calc(var(--su-7) * -1)
  }

  .xl\:-m-8 {
    margin: calc(3rem * -1);
    margin: calc(var(--su-8) * -1)
  }

  .xl\:-m-9 {
    margin: calc(4rem * -1);
    margin: calc(var(--su-9) * -1)
  }

  .xl\:-m-10 {
    margin: calc(8rem * -1);
    margin: calc(var(--su-10) * -1)
  }

  .xl\:my-auto {
    margin-top: auto;
    margin-bottom: auto
  }

  .xl\:my-unset {
    margin-top: 0;
    margin-top: initial;
    margin-bottom: 0;
    margin-bottom: initial
  }

  .xl\:my-0 {
    margin-top: 0;
    margin-bottom: 0
  }

  .xl\:my-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05);
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .xl\:my-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1);
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .xl\:my-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2);
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .xl\:my-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3);
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .xl\:my-4 {
    margin-top: 1rem;
    margin-top: var(--su-4);
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .xl\:my-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5);
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .xl\:my-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6);
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .xl\:my-7 {
    margin-top: 2rem;
    margin-top: var(--su-7);
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .xl\:my-8 {
    margin-top: 3rem;
    margin-top: var(--su-8);
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .xl\:my-9 {
    margin-top: 4rem;
    margin-top: var(--su-9);
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .xl\:my-10 {
    margin-top: 8rem;
    margin-top: var(--su-10);
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .xl\:-my-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1);
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .xl\:-my-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1);
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .xl\:-my-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1);
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .xl\:-my-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1);
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .xl\:-my-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1);
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .xl\:-my-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1);
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .xl\:-my-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1);
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .xl\:-my-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1);
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .xl\:-my-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1);
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .xl\:-my-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1);
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .xl\:-my-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1);
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .xl\:mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .xl\:mx-unset {
    margin-left: 0;
    margin-left: initial;
    margin-right: 0;
    margin-right: initial
  }

  .xl\:mx-0 {
    margin-left: 0;
    margin-right: 0
  }

  .xl\:mx-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05);
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .xl\:mx-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1);
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .xl\:mx-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2);
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .xl\:mx-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3);
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .xl\:mx-4 {
    margin-left: 1rem;
    margin-left: var(--su-4);
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .xl\:mx-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5);
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .xl\:mx-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6);
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .xl\:mx-7 {
    margin-left: 2rem;
    margin-left: var(--su-7);
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .xl\:mx-8 {
    margin-left: 3rem;
    margin-left: var(--su-8);
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .xl\:mx-9 {
    margin-left: 4rem;
    margin-left: var(--su-9);
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .xl\:mx-10 {
    margin-left: 8rem;
    margin-left: var(--su-10);
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .xl\:-mx-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1);
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .xl\:-mx-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1);
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .xl\:-mx-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1);
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .xl\:-mx-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1);
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .xl\:-mx-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1);
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .xl\:-mx-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1);
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .xl\:-mx-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1);
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .xl\:-mx-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1);
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .xl\:-mx-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1);
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .xl\:-mx-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1);
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .xl\:-mx-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1);
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .xl\:mt-auto {
    margin-top: auto
  }

  .xl\:mt-unset {
    margin-top: 0;
    margin-top: initial
  }

  .xl\:mt-0 {
    margin-top: 0
  }

  .xl\:mt-05 {
    margin-top: 0.125rem;
    margin-top: var(--su-05)
  }

  .xl\:mt-1 {
    margin-top: 0.25rem;
    margin-top: var(--su-1)
  }

  .xl\:mt-2 {
    margin-top: 0.5rem;
    margin-top: var(--su-2)
  }

  .xl\:mt-3 {
    margin-top: 0.75rem;
    margin-top: var(--su-3)
  }

  .xl\:mt-4 {
    margin-top: 1rem;
    margin-top: var(--su-4)
  }

  .xl\:mt-5 {
    margin-top: 1.25rem;
    margin-top: var(--su-5)
  }

  .xl\:mt-6 {
    margin-top: 1.5rem;
    margin-top: var(--su-6)
  }

  .xl\:mt-7 {
    margin-top: 2rem;
    margin-top: var(--su-7)
  }

  .xl\:mt-8 {
    margin-top: 3rem;
    margin-top: var(--su-8)
  }

  .xl\:mt-9 {
    margin-top: 4rem;
    margin-top: var(--su-9)
  }

  .xl\:mt-10 {
    margin-top: 8rem;
    margin-top: var(--su-10)
  }

  .xl\:-mt-05 {
    margin-top: calc(0.125rem * -1);
    margin-top: calc(var(--su-05) * -1)
  }

  .xl\:-mt-1 {
    margin-top: calc(0.25rem * -1);
    margin-top: calc(var(--su-1) * -1)
  }

  .xl\:-mt-2 {
    margin-top: calc(0.5rem * -1);
    margin-top: calc(var(--su-2) * -1)
  }

  .xl\:-mt-3 {
    margin-top: calc(0.75rem * -1);
    margin-top: calc(var(--su-3) * -1)
  }

  .xl\:-mt-4 {
    margin-top: calc(1rem * -1);
    margin-top: calc(var(--su-4) * -1)
  }

  .xl\:-mt-5 {
    margin-top: calc(1.25rem * -1);
    margin-top: calc(var(--su-5) * -1)
  }

  .xl\:-mt-6 {
    margin-top: calc(1.5rem * -1);
    margin-top: calc(var(--su-6) * -1)
  }

  .xl\:-mt-7 {
    margin-top: calc(2rem * -1);
    margin-top: calc(var(--su-7) * -1)
  }

  .xl\:-mt-8 {
    margin-top: calc(3rem * -1);
    margin-top: calc(var(--su-8) * -1)
  }

  .xl\:-mt-9 {
    margin-top: calc(4rem * -1);
    margin-top: calc(var(--su-9) * -1)
  }

  .xl\:-mt-10 {
    margin-top: calc(8rem * -1);
    margin-top: calc(var(--su-10) * -1)
  }

  .xl\:mb-auto {
    margin-bottom: auto
  }

  .xl\:mb-unset {
    margin-bottom: 0;
    margin-bottom: initial
  }

  .xl\:mb-0 {
    margin-bottom: 0
  }

  .xl\:mb-05 {
    margin-bottom: 0.125rem;
    margin-bottom: var(--su-05)
  }

  .xl\:mb-1 {
    margin-bottom: 0.25rem;
    margin-bottom: var(--su-1)
  }

  .xl\:mb-2 {
    margin-bottom: 0.5rem;
    margin-bottom: var(--su-2)
  }

  .xl\:mb-3 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--su-3)
  }

  .xl\:mb-4 {
    margin-bottom: 1rem;
    margin-bottom: var(--su-4)
  }

  .xl\:mb-5 {
    margin-bottom: 1.25rem;
    margin-bottom: var(--su-5)
  }

  .xl\:mb-6 {
    margin-bottom: 1.5rem;
    margin-bottom: var(--su-6)
  }

  .xl\:mb-7 {
    margin-bottom: 2rem;
    margin-bottom: var(--su-7)
  }

  .xl\:mb-8 {
    margin-bottom: 3rem;
    margin-bottom: var(--su-8)
  }

  .xl\:mb-9 {
    margin-bottom: 4rem;
    margin-bottom: var(--su-9)
  }

  .xl\:mb-10 {
    margin-bottom: 8rem;
    margin-bottom: var(--su-10)
  }

  .xl\:-mb-05 {
    margin-bottom: calc(0.125rem * -1);
    margin-bottom: calc(var(--su-05) * -1)
  }

  .xl\:-mb-1 {
    margin-bottom: calc(0.25rem * -1);
    margin-bottom: calc(var(--su-1) * -1)
  }

  .xl\:-mb-2 {
    margin-bottom: calc(0.5rem * -1);
    margin-bottom: calc(var(--su-2) * -1)
  }

  .xl\:-mb-3 {
    margin-bottom: calc(0.75rem * -1);
    margin-bottom: calc(var(--su-3) * -1)
  }

  .xl\:-mb-4 {
    margin-bottom: calc(1rem * -1);
    margin-bottom: calc(var(--su-4) * -1)
  }

  .xl\:-mb-5 {
    margin-bottom: calc(1.25rem * -1);
    margin-bottom: calc(var(--su-5) * -1)
  }

  .xl\:-mb-6 {
    margin-bottom: calc(1.5rem * -1);
    margin-bottom: calc(var(--su-6) * -1)
  }

  .xl\:-mb-7 {
    margin-bottom: calc(2rem * -1);
    margin-bottom: calc(var(--su-7) * -1)
  }

  .xl\:-mb-8 {
    margin-bottom: calc(3rem * -1);
    margin-bottom: calc(var(--su-8) * -1)
  }

  .xl\:-mb-9 {
    margin-bottom: calc(4rem * -1);
    margin-bottom: calc(var(--su-9) * -1)
  }

  .xl\:-mb-10 {
    margin-bottom: calc(8rem * -1);
    margin-bottom: calc(var(--su-10) * -1)
  }

  .xl\:ml-auto {
    margin-left: auto
  }

  .xl\:ml-unset {
    margin-left: 0;
    margin-left: initial
  }

  .xl\:ml-0 {
    margin-left: 0
  }

  .xl\:ml-05 {
    margin-left: 0.125rem;
    margin-left: var(--su-05)
  }

  .xl\:ml-1 {
    margin-left: 0.25rem;
    margin-left: var(--su-1)
  }

  .xl\:ml-2 {
    margin-left: 0.5rem;
    margin-left: var(--su-2)
  }

  .xl\:ml-3 {
    margin-left: 0.75rem;
    margin-left: var(--su-3)
  }

  .xl\:ml-4 {
    margin-left: 1rem;
    margin-left: var(--su-4)
  }

  .xl\:ml-5 {
    margin-left: 1.25rem;
    margin-left: var(--su-5)
  }

  .xl\:ml-6 {
    margin-left: 1.5rem;
    margin-left: var(--su-6)
  }

  .xl\:ml-7 {
    margin-left: 2rem;
    margin-left: var(--su-7)
  }

  .xl\:ml-8 {
    margin-left: 3rem;
    margin-left: var(--su-8)
  }

  .xl\:ml-9 {
    margin-left: 4rem;
    margin-left: var(--su-9)
  }

  .xl\:ml-10 {
    margin-left: 8rem;
    margin-left: var(--su-10)
  }

  .xl\:-ml-05 {
    margin-left: calc(0.125rem * -1);
    margin-left: calc(var(--su-05) * -1)
  }

  .xl\:-ml-1 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--su-1) * -1)
  }

  .xl\:-ml-2 {
    margin-left: calc(0.5rem * -1);
    margin-left: calc(var(--su-2) * -1)
  }

  .xl\:-ml-3 {
    margin-left: calc(0.75rem * -1);
    margin-left: calc(var(--su-3) * -1)
  }

  .xl\:-ml-4 {
    margin-left: calc(1rem * -1);
    margin-left: calc(var(--su-4) * -1)
  }

  .xl\:-ml-5 {
    margin-left: calc(1.25rem * -1);
    margin-left: calc(var(--su-5) * -1)
  }

  .xl\:-ml-6 {
    margin-left: calc(1.5rem * -1);
    margin-left: calc(var(--su-6) * -1)
  }

  .xl\:-ml-7 {
    margin-left: calc(2rem * -1);
    margin-left: calc(var(--su-7) * -1)
  }

  .xl\:-ml-8 {
    margin-left: calc(3rem * -1);
    margin-left: calc(var(--su-8) * -1)
  }

  .xl\:-ml-9 {
    margin-left: calc(4rem * -1);
    margin-left: calc(var(--su-9) * -1)
  }

  .xl\:-ml-10 {
    margin-left: calc(8rem * -1);
    margin-left: calc(var(--su-10) * -1)
  }

  .xl\:mr-auto {
    margin-right: auto
  }

  .xl\:mr-unset {
    margin-right: 0;
    margin-right: initial
  }

  .xl\:mr-0 {
    margin-right: 0
  }

  .xl\:mr-05 {
    margin-right: 0.125rem;
    margin-right: var(--su-05)
  }

  .xl\:mr-1 {
    margin-right: 0.25rem;
    margin-right: var(--su-1)
  }

  .xl\:mr-2 {
    margin-right: 0.5rem;
    margin-right: var(--su-2)
  }

  .xl\:mr-3 {
    margin-right: 0.75rem;
    margin-right: var(--su-3)
  }

  .xl\:mr-4 {
    margin-right: 1rem;
    margin-right: var(--su-4)
  }

  .xl\:mr-5 {
    margin-right: 1.25rem;
    margin-right: var(--su-5)
  }

  .xl\:mr-6 {
    margin-right: 1.5rem;
    margin-right: var(--su-6)
  }

  .xl\:mr-7 {
    margin-right: 2rem;
    margin-right: var(--su-7)
  }

  .xl\:mr-8 {
    margin-right: 3rem;
    margin-right: var(--su-8)
  }

  .xl\:mr-9 {
    margin-right: 4rem;
    margin-right: var(--su-9)
  }

  .xl\:mr-10 {
    margin-right: 8rem;
    margin-right: var(--su-10)
  }

  .xl\:-mr-05 {
    margin-right: calc(0.125rem * -1);
    margin-right: calc(var(--su-05) * -1)
  }

  .xl\:-mr-1 {
    margin-right: calc(0.25rem * -1);
    margin-right: calc(var(--su-1) * -1)
  }

  .xl\:-mr-2 {
    margin-right: calc(0.5rem * -1);
    margin-right: calc(var(--su-2) * -1)
  }

  .xl\:-mr-3 {
    margin-right: calc(0.75rem * -1);
    margin-right: calc(var(--su-3) * -1)
  }

  .xl\:-mr-4 {
    margin-right: calc(1rem * -1);
    margin-right: calc(var(--su-4) * -1)
  }

  .xl\:-mr-5 {
    margin-right: calc(1.25rem * -1);
    margin-right: calc(var(--su-5) * -1)
  }

  .xl\:-mr-6 {
    margin-right: calc(1.5rem * -1);
    margin-right: calc(var(--su-6) * -1)
  }

  .xl\:-mr-7 {
    margin-right: calc(2rem * -1);
    margin-right: calc(var(--su-7) * -1)
  }

  .xl\:-mr-8 {
    margin-right: calc(3rem * -1);
    margin-right: calc(var(--su-8) * -1)
  }

  .xl\:-mr-9 {
    margin-right: calc(4rem * -1);
    margin-right: calc(var(--su-9) * -1)
  }

  .xl\:-mr-10 {
    margin-right: calc(8rem * -1);
    margin-right: calc(var(--su-10) * -1)
  }

  .xl\:p-0 {
    padding: 0
  }

  .xl\:p-unset {
    padding: 0;
    padding: initial
  }

  .xl\:p-05 {
    padding: 0.125rem;
    padding: var(--su-05)
  }

  .xl\:p-1 {
    padding: 0.25rem;
    padding: var(--su-1)
  }

  .xl\:p-2 {
    padding: 0.5rem;
    padding: var(--su-2)
  }

  .xl\:p-3 {
    padding: 0.75rem;
    padding: var(--su-3)
  }

  .xl\:p-4 {
    padding: 1rem;
    padding: var(--su-4)
  }

  .xl\:p-5 {
    padding: 1.25rem;
    padding: var(--su-5)
  }

  .xl\:p-6 {
    padding: 1.5rem;
    padding: var(--su-6)
  }

  .xl\:p-7 {
    padding: 2rem;
    padding: var(--su-7)
  }

  .xl\:p-8 {
    padding: 3rem;
    padding: var(--su-8)
  }

  .xl\:p-9 {
    padding: 4rem;
    padding: var(--su-9)
  }

  .xl\:p-10 {
    padding: 8rem;
    padding: var(--su-10)
  }

  .xl\:py-0 {
    padding-top: 0;
    padding-bottom: 0
  }

  .xl\:py-unset {
    padding-top: 0;
    padding-top: initial;
    padding-bottom: 0;
    padding-bottom: initial
  }

  .xl\:py-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05);
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .xl\:py-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1);
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .xl\:py-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2);
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .xl\:py-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3);
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .xl\:py-4 {
    padding-top: 1rem;
    padding-top: var(--su-4);
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .xl\:py-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5);
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .xl\:py-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6);
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .xl\:py-7 {
    padding-top: 2rem;
    padding-top: var(--su-7);
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .xl\:py-8 {
    padding-top: 3rem;
    padding-top: var(--su-8);
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .xl\:py-9 {
    padding-top: 4rem;
    padding-top: var(--su-9);
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .xl\:py-10 {
    padding-top: 8rem;
    padding-top: var(--su-10);
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .xl\:px-0 {
    padding-left: 0;
    padding-right: 0
  }

  .xl\:px-unset {
    padding-left: 0;
    padding-left: initial;
    padding-right: 0;
    padding-right: initial
  }

  .xl\:px-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05);
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .xl\:px-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1);
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .xl\:px-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2);
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .xl\:px-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3);
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-left: var(--su-4);
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .xl\:px-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5);
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .xl\:px-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6);
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .xl\:px-7 {
    padding-left: 2rem;
    padding-left: var(--su-7);
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .xl\:px-8 {
    padding-left: 3rem;
    padding-left: var(--su-8);
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .xl\:px-9 {
    padding-left: 4rem;
    padding-left: var(--su-9);
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .xl\:px-10 {
    padding-left: 8rem;
    padding-left: var(--su-10);
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .xl\:pt-0 {
    padding-top: 0
  }

  .xl\:pt-unset {
    padding-top: 0;
    padding-top: initial
  }

  .xl\:pt-05 {
    padding-top: 0.125rem;
    padding-top: var(--su-05)
  }

  .xl\:pt-1 {
    padding-top: 0.25rem;
    padding-top: var(--su-1)
  }

  .xl\:pt-2 {
    padding-top: 0.5rem;
    padding-top: var(--su-2)
  }

  .xl\:pt-3 {
    padding-top: 0.75rem;
    padding-top: var(--su-3)
  }

  .xl\:pt-4 {
    padding-top: 1rem;
    padding-top: var(--su-4)
  }

  .xl\:pt-5 {
    padding-top: 1.25rem;
    padding-top: var(--su-5)
  }

  .xl\:pt-6 {
    padding-top: 1.5rem;
    padding-top: var(--su-6)
  }

  .xl\:pt-7 {
    padding-top: 2rem;
    padding-top: var(--su-7)
  }

  .xl\:pt-8 {
    padding-top: 3rem;
    padding-top: var(--su-8)
  }

  .xl\:pt-9 {
    padding-top: 4rem;
    padding-top: var(--su-9)
  }

  .xl\:pt-10 {
    padding-top: 8rem;
    padding-top: var(--su-10)
  }

  .xl\:pb-0 {
    padding-bottom: 0
  }

  .xl\:pb-unset {
    padding-bottom: 0;
    padding-bottom: initial
  }

  .xl\:pb-05 {
    padding-bottom: 0.125rem;
    padding-bottom: var(--su-05)
  }

  .xl\:pb-1 {
    padding-bottom: 0.25rem;
    padding-bottom: var(--su-1)
  }

  .xl\:pb-2 {
    padding-bottom: 0.5rem;
    padding-bottom: var(--su-2)
  }

  .xl\:pb-3 {
    padding-bottom: 0.75rem;
    padding-bottom: var(--su-3)
  }

  .xl\:pb-4 {
    padding-bottom: 1rem;
    padding-bottom: var(--su-4)
  }

  .xl\:pb-5 {
    padding-bottom: 1.25rem;
    padding-bottom: var(--su-5)
  }

  .xl\:pb-6 {
    padding-bottom: 1.5rem;
    padding-bottom: var(--su-6)
  }

  .xl\:pb-7 {
    padding-bottom: 2rem;
    padding-bottom: var(--su-7)
  }

  .xl\:pb-8 {
    padding-bottom: 3rem;
    padding-bottom: var(--su-8)
  }

  .xl\:pb-9 {
    padding-bottom: 4rem;
    padding-bottom: var(--su-9)
  }

  .xl\:pb-10 {
    padding-bottom: 8rem;
    padding-bottom: var(--su-10)
  }

  .xl\:pl-0 {
    padding-left: 0
  }

  .xl\:pl-unset {
    padding-left: 0;
    padding-left: initial
  }

  .xl\:pl-05 {
    padding-left: 0.125rem;
    padding-left: var(--su-05)
  }

  .xl\:pl-1 {
    padding-left: 0.25rem;
    padding-left: var(--su-1)
  }

  .xl\:pl-2 {
    padding-left: 0.5rem;
    padding-left: var(--su-2)
  }

  .xl\:pl-3 {
    padding-left: 0.75rem;
    padding-left: var(--su-3)
  }

  .xl\:pl-4 {
    padding-left: 1rem;
    padding-left: var(--su-4)
  }

  .xl\:pl-5 {
    padding-left: 1.25rem;
    padding-left: var(--su-5)
  }

  .xl\:pl-6 {
    padding-left: 1.5rem;
    padding-left: var(--su-6)
  }

  .xl\:pl-7 {
    padding-left: 2rem;
    padding-left: var(--su-7)
  }

  .xl\:pl-8 {
    padding-left: 3rem;
    padding-left: var(--su-8)
  }

  .xl\:pl-9 {
    padding-left: 4rem;
    padding-left: var(--su-9)
  }

  .xl\:pl-10 {
    padding-left: 8rem;
    padding-left: var(--su-10)
  }

  .xl\:pr-0 {
    padding-right: 0
  }

  .xl\:pr-unset {
    padding-right: 0;
    padding-right: initial
  }

  .xl\:pr-05 {
    padding-right: 0.125rem;
    padding-right: var(--su-05)
  }

  .xl\:pr-1 {
    padding-right: 0.25rem;
    padding-right: var(--su-1)
  }

  .xl\:pr-2 {
    padding-right: 0.5rem;
    padding-right: var(--su-2)
  }

  .xl\:pr-3 {
    padding-right: 0.75rem;
    padding-right: var(--su-3)
  }

  .xl\:pr-4 {
    padding-right: 1rem;
    padding-right: var(--su-4)
  }

  .xl\:pr-5 {
    padding-right: 1.25rem;
    padding-right: var(--su-5)
  }

  .xl\:pr-6 {
    padding-right: 1.5rem;
    padding-right: var(--su-6)
  }

  .xl\:pr-7 {
    padding-right: 2rem;
    padding-right: var(--su-7)
  }

  .xl\:pr-8 {
    padding-right: 3rem;
    padding-right: var(--su-8)
  }

  .xl\:pr-9 {
    padding-right: 4rem;
    padding-right: var(--su-9)
  }

  .xl\:pr-10 {
    padding-right: 8rem;
    padding-right: var(--su-10)
  }

  .xl\:fs-2xs {
    font-size: 0.675rem;
    font-size: var(--fs-2xs)
  }

  .xl\:fs-xs {
    font-size: 0.75rem;
    font-size: var(--fs-xs)
  }

  .xl\:fs-s {
    font-size: 0.875rem;
    font-size: var(--fs-s)
  }

  .xl\:fs-base {
    font-size: 1rem;
    font-size: var(--fs-base)
  }

  .xl\:fs-l {
    font-size: 1.125rem;
    font-size: var(--fs-l)
  }

  .xl\:fs-xl {
    font-size: 1.25rem;
    font-size: var(--fs-xl)
  }

  .xl\:fs-2xl {
    font-size: 1.5rem;
    font-size: var(--fs-2xl)
  }

  .xl\:fs-3xl {
    font-size: 1.875rem;
    font-size: var(--fs-3xl)
  }

  .xl\:fs-4xl {
    font-size: 2.25rem;
    font-size: var(--fs-4xl)
  }

  .xl\:fs-5xl {
    font-size: 3rem;
    font-size: var(--fs-5xl)
  }

  .xl\:fw-normal {
    font-weight: 400;
    font-weight: var(--fw-normal)
  }

  .xl\:fw-medium {
    font-weight: 500;
    font-weight: var(--fw-medium)
  }

  .xl\:fw-bold {
    font-weight: 700;
    font-weight: var(--fw-bold)
  }

  .xl\:fw-heavy {
    font-weight: 800;
    font-weight: var(--fw-heavy)
  }

  .xl\:align-left {
    text-align: left
  }

  .xl\:align-center {
    text-align: center
  }

  .xl\:align-right {
    text-align: right
  }

  .xl\:hidden {
    display: none
  }

  .xl\:block {
    display: block
  }

  .xl\:inline {
    display: inline
  }

  .xl\:inline-block {
    display: inline-block
  }

  .xl\:flex {
    display: flex
  }

  .xl\:inline-flex {
    display: inline-flex
  }

  .xl\:grid {
    display: grid
  }

  .xl\:table {
    display: table
  }

  .xl\:static {
    position: static
  }

  .xl\:absolute {
    position: absolute
  }

  .xl\:fixed {
    position: fixed
  }

  .xl\:sticky {
    position: sticky
  }

  .xl\:relative {
    position: relative
  }
}

.badge_details .badge-image-container {
  display: flex;
  justify-content: center;
  float: left;
  overflow: hidden;
  width: 192px;
  height: 192px;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  background-color: rgb(250, 250, 250);
  background-color: var(--card-secondary-bg);
  border-radius: 8px;
  border: 1px solid rgb(246, 246, 246);
  border: 1px solid var(--body-bg)
}

.badge_details .badge-image-container .badge-image {
  margin: 0 auto;
  -o-object-fit: contain;
  object-fit: contain;
  width: 70%;
  aspect-ratio: 1 / 1
}

@media (max-width: 640px) {
  .badge_details .badge-image-container {
    float: none;
    margin: 40px auto 0 auto
  }
}

.badge_details .badge_text_content {
  display: flex;
  flex-direction: column;
  min-height: 192px;
  overflow: hidden;
  padding-left: 40px
}

@media (max-width: 640px) {
  .badge_details .badge_text_content {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding-left: 0px
  }
}

.badge_details .badge_text_content .title {
  color: rgb(38, 38, 38);
  color: var(--cta-color);
  font-size: 1.125rem;
  font-size: var(--fs-l)
}

@media (max-width: 640px) {
  .badge_details .badge_text_content .title {
    text-align: center;
    margin: 0 auto
  }
}

.badge_details .badge_text_content .description {
  color: rgb(82, 82, 82);
  color: var(--card-color-tertiary);
  margin-bottom: 16px;
  font-size: 1rem;
  font-size: var(--fs-base)
}

@media (max-width: 640px) {
  .badge_details .badge_text_content .description {
    text-align: center
  }
}

.badge_details .badge_text_content .got-it-btn {
  align-self: flex-start;
  margin-top: auto
}

@media (max-width: 640px) {
  .badge_details .badge_text_content .got-it-btn {
    align-self: auto;
    margin-bottom: 16px
  }
}

.badge_details .close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 16px;
  cursor: pointer
}

.badge_details .close .close_icon {
  fill: rgb(163, 163, 163);
  fill: var(--close-icon)
}

.badges-page .description {
  font-weight: 400;
  font-weight: var(--fw-normal);
  color: rgb(115, 115, 115);
  color: var(--color-secondary);
  margin-top: 0;
  padding-top: 0
}

.badges-page .sticker-book .badge-container {
  width: auto;
  background-color: 255, 255, 255;
  background-color: var(--white);
  cursor: pointer
}

.badges-page .sticker-book .badge-container .badge-image-container {
  -o-object-fit: contain;
  object-fit: contain;
  width: auto;
  display: flex;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: rgb(246, 246, 246);
  background-color: var(--body-bg)
}

.badges-page .sticker-book .badge-container .badge-image-container .badge-image {
  -o-object-fit: contain;
  object-fit: contain;
  width: 70%;
  aspect-ratio: 1 / 1
}

.badges-page .sticker-book .badge-container .title {
  color: rgb(38, 38, 38);
  color: var(--cta-color)
}

.crayons-btn--primary {
  color: white !important;
}

.crayons-btn--primary:hover {
  color: white !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* line 30, app/assets/stylesheets/application.scss */
body.modal-open {
  height: 100vh;
  overflow: hidden;
}

/* line 35, app/assets/stylesheets/application.scss */
.pagination a {
  color: #0272E2;
}

/* line 39, app/assets/stylesheets/application.scss */
.content-body {
  line-height: 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* line 42, app/assets/stylesheets/application.scss */
.content-body.content-bodybig {
  font-size: 40px;
  font-size: calc(22px + 1vw);
}

/* line 47, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard h1 {
  font-size: 2.2em;
}

/* line 50, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard h2 {
  font-size: 1.5em;
}

/* line 53, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard h3 {
  font-size: 1.25em;
}

/* line 56, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard h4 {
  font-size: 1em;
}

/* line 59, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard p, .content-body.content-bodybillboard h1, .content-body.content-bodybillboard h2, .content-body.content-bodybillboard h3, .content-body.content-bodybillboard h4 {
  margin-top: 0;
}

/* line 62, app/assets/stylesheets/application.scss */
.content-body.content-bodybillboard p {
  line-height: 1.4em;
}

/* line 67, app/assets/stylesheets/application.scss */
.content-body :first-child {
  margin-top: 5px;
}

/* line 71, app/assets/stylesheets/application.scss */
.content-body h1, .content-body h2, .content-body h3, .content-body h4 {
  font-weight: bold;
  margin: 25px 0;
  line-height: 1.35em;
}

/* line 76, app/assets/stylesheets/application.scss */
.content-body h1 {
  font-size: 2.6em;
}

/* line 79, app/assets/stylesheets/application.scss */
.content-body h2 {
  font-size: 1.8em;
}

/* line 82, app/assets/stylesheets/application.scss */
.content-body h3 {
  font-size: 1.4em;
}

/* line 85, app/assets/stylesheets/application.scss */
.content-body h4 {
  font-size: 1.1em;
}

/* line 88, app/assets/stylesheets/application.scss */
.content-body p, .content-body table, .content-body pre, .content-body ul, .content-body ol, .content-body .custom-block {
  margin: 1.8em 0;
}

/* line 91, app/assets/stylesheets/application.scss */
.content-body table {
  border-collapse: collapse;
}

/* line 94, app/assets/stylesheets/application.scss */
.content-body ul {
  all: revert;
}

/* line 97, app/assets/stylesheets/application.scss */
.content-body th {
  background: #f5f5f4;
}

/* line 101, app/assets/stylesheets/application.scss */
.content-body hr {
  border-top: 4px solid #e9e9e7;
}

/* line 105, app/assets/stylesheets/application.scss */
.content-body a {
  text-decoration: underline;
  color: #3b49df;
}

/* line 110, app/assets/stylesheets/application.scss */
.content-body mark {
  background: #f1dbff;
  padding: 2px 4px;
}

/* line 115, app/assets/stylesheets/application.scss */
.content-body th, .content-body td {
  text-align: left;
  padding: 6px;
  border: 1px solid #425461;
  font-size: 0.9em;
}

/* line 121, app/assets/stylesheets/application.scss */
.content-body pre {
  background: #f5f5f4;
  padding: 10px 18px;
  border-radius: 5px;
  margin-left: -5px;
}

/* line 126, app/assets/stylesheets/application.scss */
.content-body pre code {
  font-size: calc(0.75em - 0.1vw);
  padding: 3px;
}

/* line 131, app/assets/stylesheets/application.scss */
.content-body code {
  font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background: #f5f5f4;
  border-radius: 3px;
  padding: 3px;
  font-size: 0.9em;
}

/* line 138, app/assets/stylesheets/application.scss */
.content-body img, .content-body video {
  border-radius: 5px;
  height: auto;
  width: 100%;
  max-width: 650px;
}

/* line 145, app/assets/stylesheets/application.scss */
.content-body blockquote {
  border-left: 5px solid #425461;
  padding: 5px 10px;
  background: #f5f5f4;
  max-width: 800px;
  border-radius: 5px;
}

/* line 151, app/assets/stylesheets/application.scss */
.content-body blockquote p {
  margin: 10px 0px;
}

/* line 156, app/assets/stylesheets/application.scss */
.content-body .highlight__panel {
  display: none;
}

/* line 161, app/assets/stylesheets/application.scss */
.content-body .ltag__link__link:active {
  opacity: 0.7;
}

/* line 165, app/assets/stylesheets/application.scss */
.content-body .ltag__link {
  border: 1px solid #425461;
  border-radius: 3px;
  display: block;
  margin: 0.95em 0 1.2em;
  max-width: 100%;
}

@media screen and (min-width: 760px) {
  /* line 165, app/assets/stylesheets/application.scss */
  .content-body .ltag__link {
    width: 620px;
  }
}

/* line 174, app/assets/stylesheets/application.scss */
.content-body .ltag__link .video-image {
  position: relative;
  padding-top: 56%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: black no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
}

/* line 186, app/assets/stylesheets/application.scss */
.content-body .ltag__link .video-timestamp {
  position: absolute;
  font-size: 12px;
  bottom: 6px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0px 5px 0px;
  font-weight: 500;
  border-radius: 3px;
  display: block;
  line-height: 20px;
}

/* line 197, app/assets/stylesheets/application.scss */
.content-body .ltag__link .video-timestamp img {
  height: 14px;
  width: 14px;
  display: inline-block;
  vertical-align: -2px;
  padding-left: 5px;
}

/* line 205, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__pic {
  display: inline-block;
  padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
  padding-right: 8px;
  box-sizing: border-box;
}

/* line 210, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__pic img {
  width: calc(2.2vw + 45px);
  height: calc(2.2vw + 45px);
  margin: auto auto !important;
  border-radius: 150px;
  box-sizing: border-box;
}

/* line 218, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__org__pic {
  position: relative;
  display: inline-block;
  padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
  padding-top: calc(0.5vw + 12px);
  padding-right: 8px;
  margin-right: 2px;
  box-sizing: border-box;
}

/* line 226, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__org__pic::after {
  content: '';
  opacity: 0.15;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* line 238, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__org__pic > img {
  display: inline-block;
  width: calc(2.5vw + 40px);
  height: calc(2.5vw + 40px);
  margin: auto auto !important;
  box-sizing: border-box;
}

/* line 245, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__user__pic {
  display: inline-block;
  position: absolute;
  right: calc(0.5vw * -1);
  bottom: calc(1vw);
  border: 2px solid #425461;
  border-radius: 100%;
  background-color: #425461;
  box-sizing: border-box;
  width: calc(2vw + 25px);
  height: calc(2vw + 25px);
}

/* line 256, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__user__pic img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  margin: 0;
}

/* line 264, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content {
  display: inline-block;
  vertical-align: top;
  padding: calc(0.5vw + 6px);
  padding-left: 0;
  width: calc(100% - 5vw - 70px);
}

/* line 270, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content h2 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 1.5em;
}

/* line 276, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content h3 {
  margin: 0.1vw 0;
  padding: 0;
  font-size: 0.7em;
  margin-bottom: 0;
  font-weight: bold;
}

/* line 283, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content .missing {
  padding: 0 10px !important;
}

/* line 286, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content .ltag__link__taglist {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 0.88em;
  margin-bottom: 5px;
}

/* line 293, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content .ltag__link__tag {
  margin-right: calc(0.4vw + 4px);
  font-size: 0.8em;
  margin-left: 1px;
}

/* line 298, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content .ltag__link__servicename {
  font-size: 0.7em;
}

/* line 300, app/assets/stylesheets/application.scss */
.content-body .ltag__link .ltag__link__content .ltag__link__servicename img {
  vertical-align: -5px;
  height: 1.5em;
  width: 1.5em;
  display: inline-block;
  margin-left: 2px;
}

/* line 318, app/assets/stylesheets/application.scss */
.overlay-fade-in {
  animation: fadeIn 0.25s;
}

/* line 322, app/assets/stylesheets/application.scss */
.overlay-fade-out {
  animation: fadeOut 0.2s;
}

/* line 326, app/assets/stylesheets/application.scss */
.modal-slide-in {
  animation: slideIn 0.15s;
}

/* line 330, app/assets/stylesheets/application.scss */
.modal-slide-out {
  animation: slideOut 0.15s;
}

@keyframes fadeIn {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.75;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0.05;
  }
}

@keyframes slideIn {
  0% {
    right: -1050px;
  }
  100% {
    right: 0;
  }
}

@keyframes slideOut {
  0% {
    right: 0;
  }
  100% {
    right: -1050px;
  }
}