.main:empty {
  display: none;
}
.main:not(:first-child) {
  margin-top: var(--spacer);
}
.main:not(:last-child) {
  margin-bottom: var(--spacer);
}
.main > div:not(.spacer, :first-child),
.main .article-content > div:not(.spacer, :first-child) {
  margin-top: var(--margin-block);
}
.main > div:not(.spacer, :last-child),
.main .article-content > div:not(.spacer, :last-child) {
  margin-bottom: var(--margin-block);
}
.main a:not([class]) {
  color: var(--yellow-400);
  text-decoration: none;
}
.main a:not([class]):hover, .main a:not([class]):focus-visible {
  color: var(--yellow-300);
}
.main ul:not([class]),
.main ol:not([class]) {
  --column-gap: var(--margin-text);
  display: grid;
  row-gap: var(--margin-text);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 740px) {
  .main ul:not([class]),
  .main ol:not([class]) {
    --marker-size: 24px;
  }
}
@media (max-width: 739.98px) {
  .main ul:not([class]),
  .main ol:not([class]) {
    --marker-size: 20px;
  }
}
.main ul:not([class]) li,
.main ol:not([class]) li {
  position: relative;
  align-content: center;
  min-height: var(--marker-size);
  padding-inline-start: calc(var(--marker-size) + var(--column-gap));
}
.main ul:not([class]) li::before,
.main ol:not([class]) li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-content: center;
  width: var(--marker-size);
  height: var(--marker-size);
  color: var(--white);
  background-color: var(--red-400);
  border-radius: 50%;
}
.main ul:not([class]) li ul:not([class]),
.main ul:not([class]) li ol:not([class]),
.main ol:not([class]) li ul:not([class]),
.main ol:not([class]) li ol:not([class]) {
  padding-inline-start: 40px;
  margin-top: var(--margin-text);
}
.main ul:not([class]) ul:not([class]),
.main ul:not([class]) ol:not([class]),
.main ol:not([class]) ul:not([class]),
.main ol:not([class]) ol:not([class]) {
  row-gap: calc(var(--margin-text) / 2);
}
.main ul:not([class]) ul:not([class]) li,
.main ul:not([class]) ol:not([class]) li,
.main ol:not([class]) ul:not([class]) li,
.main ol:not([class]) ol:not([class]) li {
  min-height: unset;
  padding-inline-start: 0;
}
.main ul:not([class]) ul:not([class]) li::before,
.main ul:not([class]) ol:not([class]) li::before,
.main ol:not([class]) ul:not([class]) li::before,
.main ol:not([class]) ol:not([class]) li::before {
  display: none;
}
.main ul:not([class]) ul:not([class]) li,
.main ol:not([class]) ul:not([class]) li {
  list-style-type: circle;
}
.main ul:not([class]) ol:not([class]) li,
.main ol:not([class]) ol:not([class]) li {
  list-style-type: numeric;
}
.main ul:not([class]) > ul:not([class]),
.main ul:not([class]) > ol:not([class]),
.main ol:not([class]) > ul:not([class]),
.main ol:not([class]) > ol:not([class]) {
  padding-inline-start: calc(var(--marker-size) + var(--column-gap) + 40px);
  margin-block: 0;
}
.main ul:not([class]) li::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='m17.5 5.83-10 10-4.58-4.58 1.17-1.18 3.41 3.4 8.82-8.81 1.18 1.17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 4px) calc(100% - 4px);
}
.main ol:not([class]) {
  counter-reset: list;
}
.main ol:not([class]) > li {
  counter-increment: list;
}
.main ol:not([class]) > li::before {
  font-weight: 500;
  line-height: 1;
  content: counter(list) ".";
}
@media (min-width: 740px) {
  .main ol:not([class]) > li::before {
    font-size: 14px;
  }
}
@media (max-width: 739.98px) {
  .main ol:not([class]) > li::before {
    font-size: 12px;
  }
}
.main p:not([class], :first-child),
.main ul:not([class], :first-child),
.main ol:not([class], :first-child) {
  margin-top: var(--margin-text);
}
.main p:not([class], :last-child),
.main ul:not([class], :last-child),
.main ol:not([class], :last-child) {
  margin-bottom: var(--margin-text);
}
.main > .has-scroll {
  padding-inline: var(--container-padding);
  margin-inline: calc(var(--container-padding) * -1);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-padding);
}
.main > .has-scroll::-webkit-scrollbar-track {
  margin-inline: var(--container-padding);
}

.spacer {
  height: var(--spacer);
}

.spacer + * {
  margin-top: 0 !important;
}

:has(+ .spacer) {
  margin-bottom: 0 !important;
}

.text-center {
  text-align: center;
}

.content-btn {
  width: fit-content;
  margin-inline: auto;
}
.content-btn:not(:first-child) {
  margin-top: var(--margin-block);
}
.content-btn:not(:last-child) {
  margin-bottom: var(--margin-block);
}

.content-pic {
  margin-inline: auto;
  border-radius: 10px;
}
.content-pic:not(:first-child) {
  margin-top: var(--margin-block);
}
.content-pic:not(:last-child) {
  margin-bottom: var(--margin-block);
}
.content-pic + h2 {
  margin-top: 0;
}

.content-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  object-fit: cover;
}
.content-bg + * {
  margin-top: 0 !important;
}

:has(> .content-bg) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-scrollable] {
  --height: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-scrollable]::-webkit-scrollbar {
  height: var(--height);
}
[data-scrollable]::-webkit-scrollbar-track {
  background-color: var(--slate-100);
  border-radius: var(--height);
}
[data-scrollable]::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--height);
}
[data-scrollable]::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}
[data-scrollable] img {
  pointer-events: none;
}

@-moz-document url-prefix() {
  [data-scrollable] {
    scrollbar-width: thin;
    scrollbar-color: var(--slate-300) var(--slate-100);
  }
}
.has-scroll {
  padding-bottom: var(--margin-block);
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
}
.has-scroll > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.has-scroll:active {
  cursor: grabbing;
}
.has-scroll ::selection {
  background-color: transparent;
}

.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-heading);
  align-items: center;
  justify-content: center;
}