:root {
  --article-fontsize: 1.2rem;
  --article-code-fontsize: calc(0.90 * var(--article-fontsize));
}
article {
  overflow: hidden;
}
.articlecontent {
  margin-bottom: 2rem;
  font-size: var(--article-fontsize);
}

@media screen and (max-width: 1690px) {
  :root {
    --article-fontsize: 1.20rem;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --article-fontsize: 1.18rem;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --article-fontsize: 1.16rem;
  }
}

.articlecontent p,
.articlecontent li {
  font-size: inherit;
  color: #a4a4a4;
  letter-spacing: 0.2px;
  word-spacing: 1px;
  line-height: 150%;
  font-weight: 400;
}

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

  .articlecontent p,
  .articlecontent li {
    color: #ababab;
    font-weight: 500;
  }
}

html[data-theme=light] .articlecontent p:not(.lll-box *),
html[data-theme=light] .articlecontent li:not(.lll-box *) {
  color: inherit;
  font-weight: 400;
}

html[data-theme=light] .articlecontent strong:not(.lll-box *):not(h2 *):not(h3 *):not(h4 *):not(h5 *) {
  color: #333;
  word-spacing: 1.8px;
  font-weight: 600;
}

html[data-theme=dark] .articlecontent strong:not(.lll-box *):not(h2 *):not(h3 *):not(h4 *):not(h5 *) {
  color: #e1e1e1;
  word-spacing: 1.8px;
  font-weight: 600;
}

.articlecontent p:not(.lll-box p) {
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
}

.articlecontent h1 {
  margin-top: 4rem;
  margin-bottom: 4rem;
  font-size: 2.2rem;
}

.articlecontent h2 {
  margin-top: 5.5rem;
  margin-bottom: 1.8rem;
  font-size: 2rem;
}

.articlecontent>h2::before {
  content: "";
  width: 2rem;
  height: 2rem;
  margin-right: 0.6rem;
  display: inline-block;
  background: var(--accent-color-light);
  mask: url('/img/icon/hashtag-rounded.svg') no-repeat center;
  mask-size: 2rem 2rem;
  transform: translateY(0.25rem);
}

.articlecontent h3 {
  margin-top: 3rem;
  font-size: 1.5rem;
}

.articlecontent>h3::before {
  --icon-size: .7rem;
  content: "";
  color: var(--accent-color-light);
  width: var(--icon-size);
  height: .7rem;
  margin-right: 0.6rem;
  border-top: calc(var(--icon-size) * 0.6) solid transparent;
  border-bottom: calc(var(--icon-size) * 0.6) solid transparent;
  border-left: var(--icon-size) solid currentColor;
  display: inline-block;
  transform: translateY(-0.12rem);
}

.articlecontent h4 {
  margin-top: 1.85rem;
  font-size: 1.35rem;
}

.articlecontent h5 {
  margin-top: 1.5rem;
  font-size: 1.2rem;
}

@media screen and (max-width: 991px) {
  .articlecontent h1 {
    font-size: 1.6rem;
  }

  .articlecontent h2 {
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
  }

  .articlecontent>h2::before {
    width: 1.6rem;
    height: 1.6rem;
    mask-size: 1.6rem 1.6rem;
  }

  .articlecontent h3 {
    font-size: 1.4rem;
  }

  .articlecontent h4 {
    margin-top: 1.3rem;
    font-size: 1.1rem;
  }
}

.articlecontent>h2:first-child,
.articlecontent>h3:first-child,
.articlecontent>h4:first-child {
  margin-top: 2.5rem;
}

html[data-theme=dark] .articlecontent :where(h1, h2) {
  font-weight: 700;
}

html[data-theme=dark] .articlecontent :where(h3, h4, h5) {
  font-weight: 500;
}

.articlecontent :where(h2, h3, h4, h5) :where(code, strong) {
  color: var(--accent-color-light);
  font-family: var(--font-normal);
}

.articlecontent :where(h2, h3, h4, h5) :where(em) {
  color: var(--text-color);
  font-family: var(--font-normal);
}

.articlecontent :where(h2, h3, h4, h5) em * {
  color: var(--text-color);
  font-family: var(--font-normal);
}

.articlecontent ul,
.articlecontent ol {
  margin-bottom: 1rem;
  padding-inline-start: 2rem;
}

.numbered ol {
  padding-left: 2.0rem;
}

.markless ul,
.markless ol {
  padding-left: 0.6rem;
}

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

  .articlecontent ul,
  .articlecontent ol {
    padding-inline-start: 1rem;
  }
}

.articlecontent em {
  color: #635e5e !important;
  font-style: normal;
}

.color-orange {
  color: hsl(31, 55%, 55%) !important;
}

.color-red {
  color: hsl(336, 65%, 55%) !important;
}

.color-blue {
  color: hsl(218, 45%, 55%) !important;
}

.color-green {
  color: hsl(140, 65%, 50%) !important;
}

.color-yellow {
  color: hsl(53, 50%, 55%) !important;
}

.color-purple {
  color: hsl(273, 39%, 55%) !important;
}

.color-cyan {
  color: hsl(174, 55%, 55%) !important;
}

.color-pink {
  color: var(--accent-color-light) !important;
}

.weight-500 {
  font-weight: 500 !important;
}

.italic {
  font-style: italic;
}

.articlecontent strong em,
.articlecontent em strong {
  color: var(--accent-strong-color) !important;
  font-style: normal;
}

.articlecontent li {
  padding-left: 5px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.articlecontent li>p {
  margin-top: 0.5rem !important;
  margin-bottom: 1.2rem !important;
}

.articlecontent li::marker {
  content: "▸";
  font-size: 1.4rem;
}

.articlecontent .numbered ol li,
.articlecontent ol.numbered li {
  list-style: inherit;
}

.articlecontent .markless li::marker {
  content: none;
}

.articlecontent .numbered ol li::marker,
.articlecontent ol.numbered li::marker {
  content: normal;
}

.articlecontent img {
  border-radius: 8px;
  margin: 2rem auto 1rem auto;
  max-width: 100%;
  height: auto;
}

.articlecontent a {
  font-size: 0.95em;
  vertical-align: baseline;
  color: var(--accent-color-secondary);
  font-weight: 400;
}

.articlecontent a:hover {
  text-decoration: underline;
}

.articlecontent p>code,
.articlecontent li>code {
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  font-weight: 400;
  vertical-align: text-bottom;
  margin: 0;
  background: #b0b0a325;
  color: var(--code-color);
  font-size: 0.9em;
  font-family: var(--font-code);
  position: relative;
  top: 2px;
}

html[data-theme=light] .articlecontent p>code,
html[data-theme=light] .articlecontent li>code {
  background: #0000001a;
}

.articlecontent strong code {
  background: transparent;
  border-radius: 8px;
  padding: 0 0.4rem !important;
  color: var(--code-color) !important;
  font-weight: 500 !important;
  font-size: var(--article-code-fontsize);
  font-family: var(--font-code);
}

.articlecontent pre {
  border: var(--surface-border);
  border-radius: 8px;
  overflow-x: auto;
  margin: 0;
  padding: 0.5rem 0;
  font-size: var(--article-code-fontsize);
  min-height: 2rem;
}

.articlecontent pre code {
  counter-reset: step;
  counter-increment: step 0;
  font-size: var(--article-code-fontsize);
  font-family: var(--font-code);
}


.articlecontent .tabs pre,
.articlecontent .lll-box pre {
  margin-top: .8rem;
  margin-bottom: 1.2rem;
}

.articlecontent code .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1.8rem;
  margin-right: 1rem;
  display: inline-block;
  text-align: right;
  color: rgba(115, 138, 148, .7)
}

/* .code-header {
  background: #323233;
  border: 1px solid #3e3e42;
  border-bottom: 1px solid #3e3e42;
  border-radius: 8px 8px 0 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #d4d4d4;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
}

.code-header {
  background: var(--surface-bg);
  border: var(--surface-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  text-align: left;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.code-title {
  color: #d4d4d4;
  font-size: 12px;
  opacity: 0.8;
  flex: 1;
  text-align: center;
}

.code-buttons {
  display: flex;
  gap: 8px;
}

.code-button {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  background: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; 
}

.articlecontent pre {
  position: relative;
  border-radius: 0 0 8px 8px;
  margin-top: 0;
} */

html[data-theme=dark] img[src="/img/github-full.svg"] {
  filter: brightness(10.0);
}

blockquote {
  margin: 1.5rem 1rem;
  padding: 0.2rem 1.5rem;
  background: #2a2a2a63;
  position: relative;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
  border-left: 5px solid #822595;
  color: var(--accent-color-secondary);
}

html[data-theme=light] blockquote {
  background: #6060602e;
  color: var(--text-color);
}

blockquote p {
  margin: 0.5rem !important;
  font-size: 1.20rem;

}

article hr {
  border: 0;
  margin: 1.5rem 0 0 0;
  border-top: 1px solid var(--divider-color-lighter);
}

/* Table
------------------------------------------------------------ */
.table-wrap {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 2.5rem auto 2rem auto;
  background: hsl(260, 10%, 6%);
  border: 1px solid #222;
  border-radius: 8px;
}

.full-table .table-wrap {
  width: 100%;
}

table {
  margin: 0;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.85em;
}

@media (max-width: 1280px) {
table {
  font-size: 0.9em;
}
}

@media (max-width: 991px) {
table {
  font-size: 0.95em;
}

}

th {
  background: #161618;
  color: #60a5fa;
  padding: 12px 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #212123;
}

td {
  padding: 10px 20px;
  color: #999;
  border-bottom: 1px solid #212123;
}

@media (max-width: 991px) {
  th, td {
    padding: 8px 12px;
  }
}

th,
td {
  border-left: none;
  border-right: none;
  border-top: none;
}

tr:last-child td {
  border-bottom: none;
}

thead,
tfoot {
  background: transparent;
}

tr:nth-child(even) td {
  background: transparent;
}

tr:hover td {
  background: hsl(240, 5%, 8%);
  color: #e1e1e1;
}

.full-table table {
  width: 100% !important;
}

td code {
  color: var(--code-color);
}

html[data-theme=light] .table-wrap {
  background: white;
  border-color: #ddd;
}

html[data-theme=light] .articlecontent th {
  background: #f1f5f9;
  color: #334155;
  border-bottom-color: #e2e8f0;
}

html[data-theme=light] .articlecontent td {
  color: hsl(215, 25%, 27%);
  border-bottom-color: #e2e8f0;
}

html[data-theme=light] tr:hover td {
  background: #f8fafc;
  color: #0f172a;
}

/* --- End table --- */


/* Article next prev
------------------------------------------------------------ */
.navnextprev {
  border-top: 1px solid var(--divider-color-lighter);
  font-weight: 500;
  padding: 1rem 0;
  max-width: calc(var(--article-max-width) + 40px);
  margin: 2.5rem auto 1rem auto;
}

.navnextprev .navprevnext-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  margin-bottom: 1.5rem;

}

.navnextprev .navprevnext-inner div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navnextprev .navprevnext-inner a {
  display: block;
  width: fit-content;
  position: relative;
  margin: 0.5rem 0 0 1rem;
}

.navnextprev .navprevnext-inner p {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0.5rem 0 0;
  color: var(--text-color-dark);
}

.navnextprev .navprevnext-buttons {
  margin: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.navnextprev .navprevnext-buttons a {
  flex-grow: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: var(--text-color-dark);
}

.navnextprev .navprevnext-buttons span {
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 500;
}

.navnextprev .navprevnext-buttons small {
  font-family: var(--font-normal);
  color: var(--text-selectable);
  font-weight: 500;
  font-size: 1.1rem
}

.navnextprev .navprevnext-buttons a {
  padding: 1rem 2rem;
}

.navnextprev .navprevnext-buttons a:hover small {
  color: var(--text-selectable-selected);
}

.navnextprev .navprevnext-buttons a.navnext {
  text-align: right;
  grid-column-start: 2;
}

@media screen and (max-width: 991px) {
  .navnextprev .navprevnext-buttons {
    grid-template-columns: 100%;
    gap: 16px;
  }

  .navnextprev .navprevnext-buttons a.navnext {
    text-align: right;
    grid-column-start: 1;
  }
}

.navnextprev .navprevnext-buttons a .icon {
  --icon-size: 1.8rem;
  position: absolute;
  top: 0.9rem;
  color: var(--accent-color);
  width: var(--icon-size);
  height: var(--icon-size);
}

.navnextprev .navprevnext-buttons a.navprev .icon {
  left: -0.15rem;
  transform: rotate(180deg);
}

.navnextprev .navprevnext-buttons a.navnext .icon {
  right: 0.05rem;
}

/* --- End article next prev --- */


/* Article header
------------------------------------------------------------ */
.article-topbar {
  display: flex;
  margin: auto;
  margin-top:10px;
  max-width: calc(var(--article-max-width) + 80px);
}

@media screen and (max-width: 991px) {
  .article-topbar {
    display: flex;
    flex-direction: column;
  }
}


.articleheader {
  margin: auto;
  margin-top: 20px;
  max-width: calc(var(--article-max-width) + 40px);
  
}

.articleheader h1 {
  display: block;
  margin: 1rem auto auto auto;
  font-size: 2.5rem;
  line-height: 1.5em;
  text-align: center;
  color: var(--text-color-dark);
  max-width: 46rem;
  text-wrap-style: balance;
}

.articleheader img {
  margin: 0.25rem auto 0rem auto;
  max-width: 100%;
  height: 266px;
  border-radius: 16px;
}

@media screen and (max-width: 991px) {
 .articleheader img {
  height: calc(0.6 * 266px);
  width: calc(0.6 * 400px);
}
}

.articleheader img[src$=".svg"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  max-width: calc(320px - 4rem);
  max-height: calc(266px - 4rem);
  padding: 0.5rem;
}

.articleheader hr {
  margin-top: 0.3rem;
  margin-bottom: 0.1rem;
  border-color: var(--divider-color-lighter);
}

.articleheader-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 400;
  color: #777;
  margin-top: 0.7rem;
  margin-bottom: 3rem;
}

.articleheader-meta li+li:before {
  content: '|';
  margin: 0 0.8rem;
  opacity: 0.5;
  font-size: 0.95em;
  margin-top: -1px;
}

.articleheader-meta li {
  display: flex;
  align-items: center;
}

.articleheader-meta li.articleheader-meta--date .icon,
.articleheader-meta li.articleheader-meta--time .icon {
  margin-right: 0.4rem;
}

.articleheader-meta--dificulty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.articleheader-meta--dificulty .signal-icon {
  margin-top: 0;
}

.articleheader-meta .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .articleheader h1 {
    font-size: 1.8rem;
  }

  .articleheader-meta {
    margin-bottom: 1rem;
  }
}

.top-navnextprev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.9rem;
  color: #777;
  position: relative;
  opacity: .8;
  height: 2rem;
  margin-top: 0.2rem;
  place-items: start;
  gap: 6px;
}

.top-navnextprev a {
  margin: 0;
  display: flex;
  justify-self: start;
  background: #0003;
  padding: 0.2rem .5rem;
  border-radius: 4px;
}

html[data-theme=light] .top-navnextprev a {
  background: #fff2;
}

.top-navnextprev a.top-navnext {
  text-align: right;
  grid-column-start: 2;
  justify-content: end;
  justify-self: end;
}

.top-navnextprev a:hover {
  color: var(--text-selectable-selected);
  background: #5552;
}

.top-navnextprev .icon {
  top: 1px;
  margin: 0;
}

/* --- End article header --- */


/* Article tags
------------------------------------------------------------ */
.articletags a {
  text-decoration: none;
  color: var(--text-color-dark);
}

.articletags {
  padding-top: 1rem;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 1em auto 2rem auto;
  max-width: calc(var(--article-max-width) + 40px);
}

.articletags ul {
  display: inline-block;
  padding-left: 5px;
}

.articletags ul li {
  text-align: center;
  min-width: 24px;
  padding: 0 8px;
  display: inline-block;
  font-weight: 400;
  margin: 3px;
  border: 1px solid var(--secundary-color);
  border-radius: 2rem;
  position: relative;
}

.articletags ul li a {
  display: block;
  line-height: 1.8rem;
  padding: 0 4px;
  font-size: 0.85rem;
  color: var(--text-color);
}

.articletags ul li a::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
  border-radius: 14px;
  background-color: var(--secundary-color);
  opacity: 0.05;
  transition: opacity .25s;
}

.articletags ul li:hover a::before {
  opacity: 0.15;
}

/* --- End article tags --- */


/* Related posts
------------------------------------------------------------ */
.relatedposts {
  border-top: 1px solid var(--divider-color-lighter);
  border-bottom: 1px solid var(--divider-color-lighter);
  font-weight: 500;
  margin: 2rem 0 1rem 0;
}

.relatedposts .card-grid {
  margin: 1.2rem 0 1.5rem 0;
  gap: 1rem;
}

/* --- End related posts --- */


/* LLL-Box
------------------------------------------------------------ */
.lll-box {
  --lll-fg: hsl(from var(--lll-box) h 55% 40%);
  --lll-strong: hsl(from var(--lll-box) h 52% 45%);
  --lll-icon-size: 2rem;
  display: flex;
  align-items: center;
  color: #b5b5b5;
  margin-top: 1.8rem;
  border-radius: 8px;
  margin-bottom: 15px;
  min-height: 4rem;
  padding: 8px 14px;
  position: relative;
  font-weight: 400;
  background: color-mix(in srgb, var(--lll-box), #0000 75%);
  border: 1px solid var(--lll-box);
  box-shadow: rgba(0, 0, 0, 0.66) 0px 3px 12px -5px
}

.lll-box.hard {
  background: color-mix(in srgb, var(--lll-box), #000 15%);
  border: none
}

:root[data-theme=light] .lll-box {
  background: color-mix(in srgb, var(--lll-box), #ffff 75%);
  box-shadow: rgba(0, 0, 0, 0.33) 0px 3px 7px -5px;
  border: 1px solid color-mix(in srgb, var(--lll-box), #ffff 70%);
}

:root[data-theme=light] .lll-box p,
:root[data-theme=light] .lll-box li,
:root[data-theme=light] .lll-box em {
  color: #333 !important;
}

.lll-box-content {
  width: 100%;
  padding-left: calc(var(--lll-icon-size) * 1.5);
  color: inherit;
}

.lll-box h1,
.lll-box h2,
.lll-box h3,
.lll-box h4 {
  font-size: 1.65rem;
  margin-top: 0.28rem;
  margin-bottom: 1rem;
}

.lll-box-content p {
  margin-top: 5px;
  margin-bottom: 5px;
  color: inherit;
}


.lll-box-content *+p {
  margin-top: 1.5rem;
}

.lll-box-content a {
  color: var(--lll-strong);
  font-weight: 500;
}

.lll-box-content a::before {
  content: "";
  background-size: 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.4rem;
  display: inline-block;
  vertical-align: baseline;
  background: var(--lll-strong);
  mask: url('/img/lll-box/lll-box-icon-link.svg') no-repeat center;
  transform: translateY(0.2rem);
}

.lll-box-content a:hover {
  text-decoration: underline;
}

.lll-box-content::before {
  font-size: 1.5rem;
  left: 0.9rem;
  position: absolute;
}

.lll-box .lll-box-content::before {
  content: "";
  width: var(--lll-icon-size);
  height: var(--lll-icon-size);
  display: block;
  font-size: 1.5em;
  top: 1rem;
  background: var(--lll-fg);
  mask: var(--lll-icon) no-repeat center;
  mask-size: var(--lll-icon-size);
}

:root[data-theme=light] .lll-box .lll-box-content::before {
  background: hsl(from var(--lll-strong) h 60% 35%);
}

.lll-box-content ul,
.lll-box-content ol {
  margin: 0.6rem 0;
  padding-left: 1.5rem;
}

@media (max-width: 991px) {
  .lll-box {
    --lll-icon-size: 1.4rem;
  }

  .lll-box-content ul,
  .lll-box-content ol {
    padding-left: 0.8rem;
  }
}

.lll-box-content ul:first-child,
.lll-box-content ol:first-child {
  margin-top: 0rem !important;
}

.lll-box-content li {
  color: inherit
}

.lll-box-content li::marker,
.lll-box-content strong {
  color: var(--lll-strong);
}

html[data-theme=light] .lll-box-content li::marker,
html[data-theme=light] .lll-box-content strong {
  color: hsl(from var(--lll-strong) h 55% 40%);
}

.lll-area {
  --lll-box: #3e3d43;
  --lll-fg: #757282;
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  border: 2px dashed var(--lll-box);
  border-radius: 16px;
  margin: 2rem 0;
  background: color-mix(in srgb, var(--lll-box), #0000 90%);
}

/* --- End LLL-Box --- */

/* Box Styling
------------------------------------------------------------ */
.lll-blue {
  --lll-box: #1c3043;
}

.lll-green {
  --lll-box: #123d33;
}

.lll-yellow {
  --lll-box: #3f3b25;
}

.lll-red {
  --lll-box: #3c1b2e;
}


.lll-ocean {
  --lll-box: #283138;
  --lll-fg: #516375;
  --lll-strong: #5281b0;
}

.lll-grey {
  --lll-box: #363636;
  --lll-fg: #555;
  --lll-strong: #5a7ac6;
}

.lll-dark-orange {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #555;
  --lll-strong: #d7af72;
}

.lll-dark-orange.lll-explain {
  --lll-fg: var(--lll-strong);
}

.lll-dark-pink {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #887eb0;
  --lll-strong: #afa3df;
}

.lll-dark-green {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #72d7af;
  --lll-strong: #27b774;
}

.lll-dark-red {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #d77281;
  --lll-strong: #df5f7d;
}

.lll-cyan {
  --lll-box: #203e47;
  /* --lll-fg: #219393; */
}

.lll-dark-cyan {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #1a7373;
  --lll-strong: #19888a;
}

.lll-dark-blue {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #405e8a;
  --lll-strong: #3b6eb8;
}

.lll-dark-yellow {
  --lll-box: rgb(33, 33, 38);
  --lll-fg: #b39e47;
  --lll-strong: #d6bb3e;
}

.lll-purple {
  --lll-box: #31143d;
  --lll-strong: #ad51d3;
  /* --lll-fg: #68367d; */
}

.lll-deep-purple {
  --lll-box: #3e296a;
  /* --lll-fg: #966ee7; */
}

.lll-pink {
  --lll-box: #614a67;
  /* --lll-fg: #eebff9; */
}

.lll-steel {
  --lll-box: #3e3d43;
  --lll-fg: #757282;
}

.lll-dashed {
  border-style: dashed;
  border-width: 2px;
}

.lll-box.lll-attached {
  margin-bottom: .8rem;
  margin-top: 1rem;
}

.lll-box.lll-attached:not(:last-child) {
  margin-bottom: 2.5rem;
}

.lll-fit {
  font-size: 0.95em;
}

.lll-box.lll-fit .lll-box-content {
  padding-left: 2.5rem;
}

.lll-box.lll-fit .lll-box-content::before {
  top: 0.35rem;
  width: 1rem;
}


.lll-info {
  --lll-icon: url('/img/lll-box/lll-box-icon-info.svg') !important;
}

.lll-tip {
  --lll-icon: url('/img/lll-box/lll-box-icon-bulb.svg') !important;
}

.lll-warning {
  --lll-icon: url('/img/lll-box/lll-box-icon-warning.svg') !important;
}

.lll-danger {
  --lll-icon: url('/img/lll-box/lll-box-icon-danger.svg') !important;
}

.lll-link {
  --lll-icon: url('/img/lll-box/lll-box-icon-link.svg') !important;
}

.lll-reference {
  --lll-icon: url('/img/lll-box/lll-box-icon-reference.svg') !important;
}

.lll-note {
  --lll-icon: url('/img/lll-box/lll-box-icon-note.svg') !important;
}

.lll-spark {
  --lll-icon: url('/img/lll-box/lll-box-icon-spark.svg') !important;
}

.lll-check {
  --lll-icon: url('/img/lll-box/lll-box-icon-check.svg') !important;
}

.lll-cross {
  --lll-icon: url('/img/lll-box/lll-box-icon-cross.svg') !important;
}

.lll-cube {
  --lll-icon: url('/img/lll-box/lll-box-icon-cube.svg') !important;
}

.lll-example {
  --lll-icon: url('/img/lll-box/lll-box-icon-example.svg') !important;
}

.lll-question {
  --lll-icon: url('/img/lll-box/lll-box-icon-question.svg') !important;
}

.lll-task {
  --lll-icon: url('/img/lll-box/lll-box-icon-task.svg') !important;
}

.lll-experiment {
  --lll-icon: url('/img/lll-box/lll-box-icon-flask.svg') !important;
}

.lll-explain {
  --lll-icon: url('/img/lll-box/lll-box-icon-arrow-up.svg') !important;
}

.lll-like {
  --lll-icon: url('/img/lll-box/lll-box-icon-like.svg') !important;
}

.lll-unlike {
  --lll-icon: url('/img/lll-box/lll-box-icon-unlike.svg') !important;
}

.lll-url {
  --lll-icon: url('/img/lll-box/lll-box-icon-url.svg') !important;
}

.lll-filepath {
  --lll-icon: url('/img/lll-box/lll-box-icon-filepath.svg') !important;
}

.lll-command {
  --lll-icon: url('/img/lll-box/lll-box-icon-command.svg') !important;
}

.lll-registry {
  --lll-icon: url('/img/lll-box/lll-box-icon-registry.svg') !important;
}

.lll-box.no-icon .lll-box-content {
  padding-left: 0.5rem;
}

.lll-box.no-icon .lll-box-content::before {
  content: none;
}

.lll-area .lll-box-content {
  padding-left: 0;
}

.lll-area .lll-box-content::before {
  content: none !important
}

.lll-area.with-icon .lll-box-content {
  padding-left: 3rem;
}

.lll-area.with-icon .lll-box-content::before {
  content: "" !important;
}

.lll-box.expander {
  max-height: 100%;
  overflow: hidden;
  align-items: flex-start;
  cursor: pointer;
}

.lll-box.expander *:where(h1, h2, h3, h4, h5):first-child {
  font-size: 1.55rem;
  margin-top: .45rem;
}

.lll-box.expander:hover {
  filter: brightness(1.2);
}

.lll-box.expander.active {
  max-height: 2rem;
}

.lll-box.expander>.lll-box-content {
  max-height: 1800px;
  transition: max-height 0.3s ease-in-out;
}

.lll-box.expander.active>.lll-box-content {
  max-height: 32px;
}

.lll-box.expander>.lll-box-content::after {
  content: "Expande para leer más";
  position: absolute;
  top: 1rem;
  right: 50px;
  font-size: 0.8rem;
  pointer-events: none;
  color: #6b6b6b;
  opacity: 0.6;
  transition: opacity 0.6s;
}

.lll-box.expander.active>.lll-box-content::after {
  opacity: 1;
}

html[lang=en] .lll-box.expander::after {
  content: "Expand to read more";
}

.lll-box.expander::after {
  --arrow-size: 0.8rem;
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  height: var(--arrow-size);
  width: var(--arrow-size);
  top: 1.4rem;
  right: 1.4rem;
  transition: all 0.35s;
  transform: rotate(135deg);
}

.lll-box.expander.active::after {
  transform: rotate(45deg);
}

/* --- End Box Styling --- */


/* Code copy
------------------------------------------------------------ */
pre, .copyable {
  margin-top: 0px !important;
}

.copy-container {
  position: absolute;
  top: 3px;
  right: 10px;
  max-height: 0px;
  text-align: right;
  z-index: 1;
}

@media (max-width: 991px) {
  .code-group-tabs {
    padding: 5px 10px;
  }

  .code-group-tabs::before {
    left: 8px;
  }
}

.copy-button {
  border: 0px;
  height: 27px;
  width: 27px;
  border-radius: 16px;
  background: transparent;
  transition: all 0.5s;
  cursor: pointer;
}

.copy-container .copy-button svg {
  fill: var(--codecopy-fill);
  stroke: var(--codecopy-stroke);
}


.copy-button:hover,
.copy-button:focus {
  background: #4444;
}

.copy-button:hover svg,
.copy-button:focus svg{
  fill: var(--codecopy-fill-hover);
  stroke: var(--codecopy-stroke-hover);
}

.copy-flash {
  position: absolute;
  top: -25px;
  right: 0;
  background: #10b981;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  font-weight: 600;
}

.copy-flash.show {
  opacity: 1;
}
/* --- End section --- */


/* --- Span colors --- */
.articlecontent .inline {
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.1rem 0.3rem;
  vertical-align: bottom;
  margin: 0 0.1rem;
}

.articlecontent .badge {
  font-weight: 500;
  font-size: 0.85em;
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.1rem;
  position: relative;
  vertical-align: 1px;
  line-height: 1;
}

.articlecontent h1 .badge,
.articlecontent h2 .badge,
.articlecontent h3 .badge,
.articlecontent h4 .badge {
  font-weight: 500;
  font-size: 1.05rem;
  padding: 0.1rem 0.4rem;
  vertical-align: text-bottom;
  vertical-align: 10%;
}

.articlecontent .blue {
  --e-color: hsl(220, 75%, 65%);
}

.articlecontent .yellow {
  --e-color: hsl(42, 95%, 52%);
}

.articlecontent .red {
  --e-color: hsl(335, 94%, 60%);
}

.articlecontent .green {
  --e-color: hsl(130, 65%, 55%);
}

.articlecontent .purple {
  --e-color: hsl(260, 90%, 80%);
}

.articlecontent .pink {
  --e-color: hsl(300, 55%, 70%);
}

.articlecontent .grey {
    --e-color: #cccccc;
}

.articlecontent .white {
  --e-color: hsl(0, 0%, 94%);
}

.articlecontent span a {
  color: inherit;
}


.articlecontent .leftarrow::after {
  --icon-size: 0.7rem;
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: 0.4rem;
  display: inline-block;
  vertical-align: baseline;
  background: #ddd;
  mask: url('/img/lll-box/lll-box-icon-leftarrow.svg') no-repeat center;
  mask-size: var(--icon-size);
}

.articlecontent .leftarrow a::before {
  content: none;
}

.articlecontent .badge {
  background: color-mix(in srgb, var(--e-color), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--e-color), transparent 70%);
  color: var(--e-color);
}

.badge.badge-led {
  vertical-align: 5px;
}

.badge-led::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--e-color);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 6px var(--e-color);
    opacity: 0.9;
}

.articlecontent .badge.white {
  color: #bbb;
}

html[data-theme=light] .articlecontent .badge {
  background: hsl(from var(--e-color) h 35% 55%);
  border: 1px solid hsl(from var(--e-color) h 35% 55%);
  color: #eee;
}

html[data-theme=light] .articlecontent .badge.white,
html[data-theme=light] .articlecontent .badge.grey {
  background: #999;
  border: 1px solid #aaa;
}

/* Tabs
------------------------------------------------------------ */
.tabs {
  --tabs-top-bottom: var(--lll-box, var(--accent-color-secondary));
  --tabs-left-right: var(--surface-light-border-color);
  --tabs-text: var(--text-color-dark);
  margin: 2.2rem 0 2.4rem 0;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.tabs.alternate,
.tabs.cardtab {
  --tabs-top-bottom: var(--surface-light-border-color);
  --tabs-text: var(--accent-color);
}

.tabs.headless label {
  display: none;
}

.tabs.cardtab .tab-content {
  border: var(--surface-border);
  border-radius: 0 12px 12px 12px;
}

.tabs.headless .tab-content {
  border-radius: 12px;
  border: 1px solid var(--tabs-content-top-bottom) !important;
}

.tabs [type="radio"] {
  display: none;
}

.tabs>label {
  --tabs-bg: color-mix(in srgb, var(--lll-box, var(--background)), var(--background) 75%);
  --tabs-label-border-dummy: var(--tabs-bg);
  margin-bottom: -2px;
  padding: 8px 15px;
  border: 1px solid var(--surface-light-border-color);
  border-bottom: none;
  color: var(--divider-color-darker);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
}

html[data-theme=light] .tabs>label {
  border: 1px solid #b2b1b5;
}

.tabs input:checked+label {
  background: var(--tabs-bg);
  z-index: 99;
  border-top: 2px solid var(--tabs-top-bottom);
  border-bottom: 2px solid var(--tabs-label-border-dummy);
  border-left: 1px solid var(--tabs-left-right);
  border-right: 1px solid var(--tabs-left-right);
  margin-bottom: -2px;
  padding-bottom: 2px;
  color: var(--tabs-text);
  font-weight: 500;
  letter-spacing: 0.2px;
  z-index: 999;
}

.tabs.alternate input:checked+label {
  border-top: 2px solid var(--accent-color);
}

.tabs input:not(:checked)+label {
  background: #77777716;
}

.tabs input:not(:checked)+label:hover {
  background: #9993;
}

.tab-content {
  --tabs-content-left-right: var(--tabs-left-right);
  --tabs-content-top-bottom: var(--lll-box, var(--tabs-top-bottom));
  --tabs-bg: color-mix(in srgb, var(--lll-box, transparent), #0000 75%);
  --lll-fg: hsl(from var(--lll-box) h 55% 40%);
  --lll-strong: hsl(from var(--lll-box) h 52% 45%);
  --lll-icon-size: 2rem;
  order: 99;
  background: var(--tabs-bg);
  border-top: 2px solid var(--tabs-content-top-bottom);
  border-bottom: 2px solid var(--tabs-content-top-bottom);
  border-left: 1px solid var(--tabs-content-left-right);
  border-right: 1px solid var(--tabs-content-left-right);
  display: none;
  padding: .8rem 14px;
  width: 100%;
}

.tabs.tabs.cardtab .tab-content {
  --tabs-bg: color-mix(in srgb, var(--lll-box, #2A2A2A), #0000 75%);
}

.articlecontent .tab-content>*:first-child,
.articlecontent .tab-content div>*:first-child  {
  margin-top: 0.2rem;
}

.articlecontent .tab-content>*:last-child,
.articlecontent .tab-content div>*:last-child  {
  margin-bottom: 0.2rem;
}

.tabs-segmented.titleless .tab-content div > *:nth-child(2) {
    margin-top: 0.2rem;
}

.articlecontent .tab-content>*:first-child,
.articlecontent .tab-content div>*:first-child  {
  margin-top: 0.2rem;
}

.articlecontent .tab-content .code-group {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.content-card .code-group,
.article-card .code-group {
  margin-top: .8rem;
  margin-bottom: .8rem;
}

.articlecontent .lll-box-content .code-group {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}


.tabs input:checked+label+.tab-content {
  display: block;
}

.titleless h2,
.titleless h3,
.titleless h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tabs .lll-box-content li::marker,
.tabs .lll-box-content strong {
  color: var(--lll-strong) !important;
}

.articlecontent .tabs label code {
  color: var(--code-color)
}


.tab-content:has(> div > .code-group:only-child), 
.tab-content:has(> div > .code-group:only-child) > div, 
.tab-content:has(> div > .code-group:only-child) > div > .code-group,
.tab-content:has(> div > .code-group:only-child) > div > .code-group > .code-group-block {
  margin: 0;
  padding: 0;
    border-radius: 0 0 12px 12px;
  border: none;
}

.tab-content:has(> div > .code-group:only-child) > div > .code-group > .code-group-block > pre {
  margin: 0;
  padding: 1rem 0;
  border-radius: 0 0 12px 12px;
  border: none;
}

/* Tabs Segmented (Modern Pills) */
.tabs-segmented {
  --border: var(--surface-border-color);
  --text-muted: #9ca3afA0;
  --text-main: #e0e0e0;
  --bg-element: #24232a;
  display: block;
  width: 100%;
  margin: 2.5rem 0 2.5rem 0;
  position: relative;
}

.content-card .tabs-segmented,
.article-card .tabs-segmented {
    margin: 1rem 0 1rem 0;
}

html[data-theme=light] .tabs-segmented {
  --text-muted: #666;
  --text-main: #333;
  --bg-element: #ddd;
}

.tabs-segmented > input {
  display: none;
}

.tabs-segmented .tabs-nav {
  display: inline-flex;
  background: var(--surface-header);
  padding: 5px;
  border-radius:  10px 10px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  margin-bottom: 0px;
  scrollbar-width: none;
}

html[data-theme=light] .tabs-segmented .tabs-nav {
  background: #eee;
  border: 1px solid #ccc;
}

.tabs-segmented .tabs-nav-inner {
  display: inline-flex;
  background: hsl(240, 8%, 6%);
  padding: 5px;
  border-radius:  10px; 
  border: 1px solid #21212390;
  box-shadow:  0 0 8px 0px #000000cc inset;
  gap: 5px;
  position: relative;
}

.tabs-segmented .tabs-nav label {
  padding: 4px 18px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
  color: var(--text-muted);
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  margin: 0;
  border: none;
}

.tabs-segmented .tabs-nav label code {
  color: var(--code-color);
}

.tabs-segmented.js-tabs-enabled .tabs-nav {
  position: relative;
}

.tabs-segmented.js-tabs-enabled .glider {
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    background: var(--bg-element);
    border-radius: 8px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    pointer-events: none;
}

.tabs-segmented.js-tabs-enabled .tabs-nav label {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}

.tabs-segmented.js-tabs-enabled .tabs-nav label:hover {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.04) !important;

}



@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.tabs-segmented .tabs-nav label:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme=light] .tabs-segmented .tabs-nav label:hover {
  background: rgba(0, 0, 0, 0.05);
}

.tabs-segmented .tabs-body {
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  padding: 0;
  background: transparent;
  min-height: 100px;
  margin-top: 0;
}

.tabs-segmented .tab-content {
  display: none;
  padding: 1rem;
  animation: slideIn 1s ease;
  border: none;
  width: 100%;
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Activation Logic (Up to 10 tabs) */
.tabs-segmented > input:nth-of-type(1):checked ~ .tabs-nav label:nth-of-type(1),
.tabs-segmented > input:nth-of-type(2):checked ~ .tabs-nav label:nth-of-type(2),
.tabs-segmented > input:nth-of-type(3):checked ~ .tabs-nav label:nth-of-type(3),
.tabs-segmented > input:nth-of-type(4):checked ~ .tabs-nav label:nth-of-type(4),
.tabs-segmented > input:nth-of-type(5):checked ~ .tabs-nav label:nth-of-type(5),
.tabs-segmented > input:nth-of-type(6):checked ~ .tabs-nav label:nth-of-type(6),
.tabs-segmented > input:nth-of-type(7):checked ~ .tabs-nav label:nth-of-type(7),
.tabs-segmented > input:nth-of-type(8):checked ~ .tabs-nav label:nth-of-type(8),
.tabs-segmented > input:nth-of-type(9):checked ~ .tabs-nav label:nth-of-type(9),
.tabs-segmented > input:nth-of-type(10):checked ~ .tabs-nav label:nth-of-type(10) {
  background: var(--bg-element);
  color: var(--text-color-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tabs-segmented > input:nth-of-type(1):checked ~ .tabs-body .tab-content:nth-of-type(1),
.tabs-segmented > input:nth-of-type(2):checked ~ .tabs-body .tab-content:nth-of-type(2),
.tabs-segmented > input:nth-of-type(3):checked ~ .tabs-body .tab-content:nth-of-type(3),
.tabs-segmented > input:nth-of-type(4):checked ~ .tabs-body .tab-content:nth-of-type(4),
.tabs-segmented > input:nth-of-type(5):checked ~ .tabs-body .tab-content:nth-of-type(5),
.tabs-segmented > input:nth-of-type(6):checked ~ .tabs-body .tab-content:nth-of-type(6),
.tabs-segmented > input:nth-of-type(7):checked ~ .tabs-body .tab-content:nth-of-type(7),
.tabs-segmented > input:nth-of-type(8):checked ~ .tabs-body .tab-content:nth-of-type(8),
.tabs-segmented > input:nth-of-type(9):checked ~ .tabs-body .tab-content:nth-of-type(9),
.tabs-segmented > input:nth-of-type(10):checked ~ .tabs-body .tab-content:nth-of-type(10) {
  display: block;
}
/* --- End tabs --- */

/* --- Steps instructions --- */
.articlecontent .step-instructions {
  --step-size: 2rem;
  --step-font-size: 1.1rem;
  margin: 2rem 8rem 2rem 6rem;
}

.articlecontent .step-instructions strong {
  color: #7798bd !important;
}

html[data-theme=light] .articlecontent .step-instructions strong {
  color: #55769d !important;
}

.articlecontent .step-instructions ol {
  counter-reset: item 0;
  list-style: none;

}

.articlecontent .step-instructions ol ol {
  margin: 0 2rem 0 2rem;
}

@media screen and (max-width: 991px) {
  .articlecontent .step-instructions {
    margin: 0 3rem 0 2rem;
  }
}

.articlecontent .step-instructions ol li {
  margin: 1rem 0;
  position: relative;
  border-radius: 8px;
  min-height: 2rem;
}

.articlecontent .step-instructions ol li::marker {
  content: "";
}

.articlecontent .step-instructions ol>li:before {
  counter-increment: item;
  content: counters(item, ".");
  position: absolute;
  top: 0.2rem;
  left: calc(var(--step-size) * -1.25);
  background: #2181a4;
  color: white;
  height: var(--step-size);
  width: var(--step-size);
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  font-size: var(--step-font-size);
}


.articlecontent .step-consign:after {
  content: "";
  position: absolute;
  top: calc(var(--step-size) + 0.7rem);
  left: 2px;
  width: 2px;
  height: calc(100% - var(--step-size) - 0.4rem);
  background: #5555;
  
}


@media screen and (max-width:991px) {
  .articlecontent .step-instructions {
    --step-size: 1.5rem;
    --step-font-size: 0.9rem;
  }
}

.articlecontent .step-consign {
  margin: 1rem 0;
  position: relative;
  border-radius: 0px;
  min-height: 2rem;
  padding-inline-start: calc(2rem + 5px);
}

.articlecontent .step-consign p {
  margin: 0 !important;
}

.articlecontent .step-consign *+p {
  margin-top: 1rem !important;
}

.articlecontent .step-consign::before {
  --step-size: 2.5rem;
  --step-font-size: 1.1rem;
  content: attr(data-title);
  display: flex;
  position: absolute;
  background: #2181a4;
  color: white;
  top: 0.2rem;
  left: calc(var(--step-size) * -1.25 + 2rem);
  height: var(--step-size);
  width: var(--step-size);
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  font-size: var(--step-font-size);
  padding: 0.2rem;
  place-items: center;
  place-content: center;
}


@media screen and (max-width:991px) {
  .articlecontent .step-consign {
    padding-inline-start: calc(1rem + 5px);
  }

  .articlecontent .step-consign::before {
    --step-size: 1.5rem;
    --step-font-size: 0.9rem;
    left: calc(var(--step-size) * -1.25 + 1rem);
  }
}

/* --- End steps instructions  --- */

.articlecontent .caption {
  font-size: 1.1rem;
  text-align: center;
  font-weight: 300;
  font-style: italic;
}

.articlecontent *:has(+ .caption) {
  margin-bottom: 0.5rem;
}


iframe.video {
  display: block;
  margin: 2rem auto;
  border: none;
  max-width: 100%;
}


/* --- lll-collapsible --- */
.collapsible {
  background-color: var(--surface-bg);
  border: var(--surface-border);
  box-shadow: var(--shadow);
  border-radius: 16px;
}

.collapsible.dropdown .dropdown-header {
  padding: 0.6rem 1.5rem 0.6rem 2.5rem;
  margin: 0;
  font-size: 1.4rem;
}

.collapsible.dropdown .dropdown-header::after {
  top: 1.4rem;
  left: 1rem;
}

.collapsible.dropdown:not(:has(> .active)) .dropdown-header {
  border-bottom: var(--surface-border);
}

.collapsible.dropdown>.dropdown-content {
  padding: 0 1rem;
}

.collapsible.dropdown>.dropdown-content>div>*:first-child {
  margin-top: 0.6rem;
}

.filter-container {
  display: flex;
  place-content: end;
  height: 40px;
  flex-direction: row;
  width: 100%;
  align-items: baseline;
  margin-bottom: 1rem;
  padding: 0 3rem 0 0.5rem;
  position: relative;
}

.filter-container input {
  max-width: 380px;
  border-radius: 8px;
  border: var(--surface-border);
  background: rgba(12, 12, 12, 0.9);
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 4px 6px 4px 32px;
}

html[data-theme=light] .filter-container input {
  background: #cccc;
}


.filter-container svg {
  position: absolute;
  opacity: 0.2;
  top: 8px;
  left: 16px;
}

.filter-container input::placeholder {
  font-size: 1.0rem;
  margin-bottom: auto;
  margin-top: auto;
}

.filter-container input:focus {
  outline: none !important;
  box-shadow: 0 0 4px #719ECE;
}

.lll_btn.medium {
  height: 2rem;
  line-height: 1.2rem;
}

.lll_btn.small {
  font-size: 0.85rem;
  height: 1.4rem;
  line-height: 1rem;
}

.lll_btn.big {
  font-size: 1.5rem;
  height: 40px;
  line-height: 40px;
}

.lll_btn:focus,
.lll_btn:hover {
  color: var(--white);
  text-decoration: none;
  opacity: .85;
  background-position: right center;
}

.lll-input {
  margin-right: 10px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #28272c;
  background: var(--input-bg);
  color: #aaa;
  font-size: 1.1rem;
  padding: 0 4px 4px 6px;
}

.lll-input::placeholder {
  font-size: 1rem;
  margin-bottom: auto;
  margin-top: auto;
}

.lll-input:focus {
  outline: 0 !important;
  box-shadow: 0 0 4px #719ece;
}

/* Range slider
------------------------------------------------------------ */
.range {
  display: flex;
  align-items: center;
  gap: 0rem;
  height: 4rem;
}

.range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #ccc;
}

.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: #f50;
  border-radius: 50%;
}

.range input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background: #f50;
  border-radius: 50%;
}

.range p,
.range-label {
  position: relative;
  color: #fff;
  border-radius: 3px;
  text-align: center;
}

.range p {
  min-width: 50px;
  background: #3339;
  margin-right: 14px;
  line-height: 28px;
}

.range-label {
  margin-left: 14px;
  width: 70px;
  background: #2C3E50;
  line-height: 30px;
}

.range-label:before {
  content: '';
  position: absolute;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  border-bottom: 12px solid #2C3E50;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

/* --- End range slider --- */


/* --- Dropdown --- */
.dropdown {
  --arrow-size: 0.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

.dropdown .dropdown-header {
  display: flex;
  justify-content: space-between;
  padding: 0 2.5rem 0 1.5rem;
  align-items: baseline;
  position: relative;
  transition: all 0.35s;
  cursor: pointer;
}

.dropdown:has(> .active)>.dropdown-header {
  padding: 0.3rem 1.5rem 0.3rem 2.5rem;
  margin: 0;
}

.dropdown>.dropdown-header>* {
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown>.dropdown-header::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  height: var(--arrow-size);
  width: var(--arrow-size);
  top: 35%;
  left: 0.4rem;
  transition: all 0.35s;
  transform: rotate(135deg);
}

.dropdown:has(> .active)>.dropdown-header::after {
  top: 40%;
  transform: rotate(45deg);
  left: 1rem;
}

.dropdown>.dropdown-header::before {
  content: "";
  left: 0;
  top: 2rem;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--surface-bg);
  border: var(--surface-border);
  box-shadow: var(--shadow);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
}

.dropdown:has(> .active)>.dropdown-header::before {
  transition: all 0.25s;
  top: 0;
  opacity: 1.0;
}

.dropdown>.dropdown-content {
  overflow: hidden;
  height: auto;
  opacity: 1;
  transition: all 0.25s;
  position: relative;
  top: 0;
}

.dropdown:has(> .active)>.dropdown-content {
  max-height: 0;
  opacity: 0;
  top: -2.5em;
}

.dropdown.stretch {
  margin-top: 2.2rem;
}

.dropdown.stretch:has(.active) {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.dropdown.stretch:not(.dropdown.stretch + .dropdown.stretch) {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

@media screen and (max-width:991px) {
  .dropdown {
    font-size: 1.0rem;
  }

  .dropdown {
    padding: 0 0.2rem 0 0.2rem;
  }

  .dropdown .dropdown-content {
    margin: 0.5rem 0.2rem 1rem 0.2rem;
  }
}

/* --- Content card --- */
.content-card {
  font-size: 0.95em;
}

.content-card h2 {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--accent-strong-color);
}

.content-card-group {
  margin: .5rem 0 2rem 0;
}

.content-card .content-card-item {
  background-color: var(--surface-bg);
  border: var(--surface-border);
  overflow-x: auto;
}

.content-card .content-card-item {
  padding: 0.5rem 1rem;
  color: var(--text-selectable);
  border: var(--surface-border);
  border-bottom: none;
}

mjx-container svg {
  margin: 0 0.35rem;
}

.content-card .content-card-item:first-of-type {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.content-card .content-card-item:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom: var(--surface-border);
}

.content-card :nth-child(1 of .content-card-item.filtered) {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.content-card :nth-last-child(1 of .content-card-item.filtered) {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom: var(--surface-border);
}

.rowcontent:has(input.filtered) .content-card .dropdown-header {
  opacity: 0.2;
}

.rowcontent:has(input.filtered) .content-card:has(.filtered) .dropdown-header {
  opacity: 1;
}

.rowcontent:not(:has(input.filtered)) .content-card-group,
.rowcontent:not(:has(input.filtered)) .content-card-item {
  display: block;
}

.rowcontent:has(input.filtered) .content-card-group,
.rowcontent:has(input.filtered) .content-card-item {
  display: none;
}

.rowcontent:has(input.filtered) .content-card-group:has(.filtered),
.rowcontent:has(input.filtered) .content-card-item.filtered {
  display: block;
}

.content-card h3 {
  margin: 0;
  padding: 0.5rem .6rem;
  font-size: 1.1em;
  color: #eebff9 !important;
}

html[data-theme=light] .content-card h3 {
  color: #b07bbb !important;
}


.content-card .content-card-item p {
  margin: 0 !important;
  padding: 0.5rem 0.5rem !important;
}

.content-card .content-card-item p:first-child:has(strong),
.content-card .content-card-item h3:first-child {
  padding-left: 0 !important;
}

.content-card strong {
  color: #eeeeee !important;
}

html[data-theme=light] .content-card strong {
  color: #0f0f0f !important;
}

.content-card .content-card-item ul,
.content-card .content-card-item ol {
  padding-left: 1.5rem !important;
}

.content-card .content-card-item li {
  margin: 0.55rem !important;
}

.content-card pre {
  border-radius: 10px;
  margin: 0.5rem !important;
  background: #100f15 !important;
}

@media screen and (max-width:991px) {
  .content-card .content-card-item p {
    padding: 0.35rem 0.35rem !important;
  }

  .content-card .content-card-item li {
    margin: 0.2rem .35rem !important;
  }
}

.calculator table {
  font-size: 1.2rem;
  line-height: 2rem;
}

.calculator tr,
.calculator td,
.calculator th {
  padding: 0.5rem 0.5rem;
  background: transparent !important;
  border: none;
}

.calculator input {
  background: color-mix(in srgb, var(--surface-bg), white 10%);
  border-radius: 8px;
  border: none;
  color: #eee;
  font-size: 1.2rem;
  text-align: center;
  height: 2rem;
}

.calculator input:focus-visible {
  background: color-mix(in srgb, var(--surface-bg), white 25%)
}

.calculator input:read-only {
  background: color-mix(in srgb, var(--surface-bg), black 10%)
}

.dropdown.article-card {
  position: relative;
  --lll-icon-size: 2rem;
  --lll-icon: url(/img/lll-box/lll-box-icon-info.svg);
}

.dropdown.example-card {
  --lll-icon-size: 1.8rem;
  --lll-icon: url(/img/lll-box/lll-box-icon-example.svg);
}


.article-card .dropdown-header::before{
  border-radius: 8px;
}

.dropdown.article-card.empty .content-card-item {
  background: transparent;
  border: 0px transparent;
  padding: 0;
  border-radius: 0;
}

.dropdown.expander-card {
  --tabs-left-right: var(--surface-border-color);
}

html[data-theme=light] .dropdown.expander-card {
  --tabs-left-right: #b2b1b5;
}

.expander-card .dropdown-header {
  padding: 0.8rem 1.5rem 0.8rem 3.5rem !important;
  width: 100%;
  height: 100%;
  background: var(--surface-bg);
  border:  1px solid var(--tabs-left-right);
  box-shadow: var(--shadow);
  border-radius: 4px;
  position: relative;
}

.dropdown.article-card.expander-card >.dropdown-header 
{
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

.expander-card .dropdown-header::before {
 content: none;
}

.expander-card.dropdown > .dropdown-content {
  opacity: 1 !important;
  max-height: unset !important;
  display: grid !important;
  opacity: .2;
  grid-template-rows: 1fr;
  will-change: grid-template-rows;
  transition: grid-template-rows 0.3s ease-out;
  margin: 0;
  padding: 0;
  top: 0;
}


.expander-card.dropdown > .dropdown-content > .content-card-group {
  overflow: hidden;
  min-height: 0; 
}


.expander-card.dropdown:has(> .active) > .dropdown-content {
  grid-template-rows: 0fr;
}

.dropdown.expander-card .dropdown-content .content-card-item {
  background: transparent;
  border: 0px transparent;
  padding: 1rem;
  border-radius: 0;
  border-bottom: 2px solid var(--tabs-left-right);
  border-left: 1px solid var(--tabs-left-right);
  border-right: 1px solid var(--tabs-left-right);
}

.dropdown.expander-card .content-card-group {
  margin: 0 !important;
}

.dropdown.expander-card .dropdown-content {
  margin: 0 !important;
}

.dropdown.expander-card .dropdown-header::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 100%;
  border: none;
  background: #afa3df !important;
  transform: translateY(-50%);
  transform-origin: center; 
  transition: height 0.5s ease;
  z-index: 5;
    opacity: 1;
}

.dropdown.expander-card:has(.active) .dropdown-header::before {
  height: 0%;
}

.dropdown.article-card:has(.active) {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.content-card-item .lll-box {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.article-card:has(+ .article-card) {
  margin-bottom: 1.5rem !important;
}

.article-card+.article-card {
  margin-top: 1.5rem !important;
}

.example-card {
  --lll-icon: url(/img/lll-box/lll-box-icon-example.svg);
}

.article-card .dropdown-header {
  padding: 0.8rem 1.5rem 0.1rem 3.5rem !important;
}

.dropdown.article-card:has(> .active)>.dropdown-header {
  padding: 0.8rem 1.5rem 0.8rem 3.5rem !important;
}

.article-card .dropdown-header *:where(h1, h2, h3, h4, h5) {
  color: var(--text-color) !important;
  font-size: 1.35rem;
}

html[data-theme=dark] .article-card .dropdown-header:hover *:where(h1, h2, h3, h4, h5) {
  color: var(--text-color-dark) !important;
}

.article-card::after {
  content: "Expande para leer más";
  position: absolute;
  top: 1rem;
  right: 50px;
  font-size: 0.8rem;
  pointer-events: none;
  color: #444;
  opacity: 0.8;
  transition: opacity 0.6s;
}

.article-card:has(> .active)::after {
  opacity: 1.0;
}

html[lang=en] .article-card::after {
  content: "Expand to read more";
}

.article-card::before {
  content: "";
  width: var(--lll-icon-size);
  height: var(--lll-icon-size);
  display: block;
  position: absolute;
  font-size: 1.5em;
  top: 0.75rem;
  left: 0.7rem;
  background: #afa3df;
  mask: var(--lll-icon) no-repeat center;
  mask-size: var(--lll-icon-size);
  z-index: 2;
}

.article-card.alternate::before {
  left: 1rem;
}

.article-card .dropdown-header:hover::before {
  border-color: #333;
}

.article-card .dropdown-header::after {
  top: 1.7rem !important;
  right: 30px !important;
  left: unset !important;
}

.article-card.dropdown-content {
  display: grid;
  /* Estado inicial: 0 altura */
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}


@media screen and (max-width: 991px) {
  .article-card{
    --lll-icon-size: 1.6rem !important;
  }

  .article-card::after {
    display: none;
  }

  .article-card .dropdown-header *:where(h1, h2, h3, h4, h5) {
    font-size: 1.2rem;
  }

  .article-card .dropdown-header::after {
    top: calc(50% - 4px) !important;
    right: 30px !important;
    left: unset !important;
  }

  .dropdown.article-card:has(> .active)>.dropdown-header {
    padding-left: 3rem !important;
  }

  .dropdown.article-card.alternate .dropdown-header {
    padding-left: 3rem !important;
  }

  .dropdown.article-card>.dropdown-header {
    padding-left: 3rem !important;
  }

  .article-card::before {
    top: .8rem !important;
  }

  .lll-box.expander *:where(h1, h2, h3, h4, h5):first-child {
    font-size: 1.45rem;
    margin-top: .25rem;
  }

  .lll-box.expander>.lll-box-content::after {
    display: none;
  }
}

.lll-box-viewer {
  --lll-icon-size: 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #121215;
  border: var(--surface-border);
  border-radius: 50px;
  padding: 8px 16px;
  font-family: var(--font-code);
  color: var(--code-color) !important;
  margin: 1rem 0;
  overflow-x: auto;
  position: relative;
}

.lll-box-viewer:has(code)
{
  gap: 18px;
}


.lll-box-viewer::before {
  position: inline-block;
  content: "";
  width: var(--lll-icon-size);
  height: var(--lll-icon-size);
  top: 8px;
  left: 8px;
  background: #afa3df;
  mask: var(--lll-icon) no-repeat center;
  mask-size: var(--lll-icon-size);
}

.lll-box-viewer code {
    background: transparent;
    padding: 0;
    margin: 0;
    color: #ddd !important;
    border: none;
}

.lll-box-viewer p {
  margin: 0 !important;
  width: 100%;
    color: #ddd !important;
}

.lll-box-viewer p code {
  background: none !important;
  width: 100%;
  color: #ddd !important;
}

.lll-box-viewer p code::before{
  content: "https://";
  color: #9c9abe80 !important;
}

.lll-box-viewer code::before {
    content: var(--data-before);
    color: #64748b;
    margin-right: 4px;
}

.lll-box-viewer code::after {
    content: var(--data-after);
    color: #94a3b8;
    margin-left: 4px;
}

.lll-box-viewer.http p code::before{
  content: "http://";
  color: #9c9abe80 !important;
}


/* Estilo base para líneas destacadas */
.articlecontent pre code .line.highlighted {
  background-color: rgba(255, 255, 0, 0.1);
}

.articlecontent pre.blur code .line {
   filter: blur(4px);
}

.articlecontent pre code .line {
  display: inline-block;
  width: 100%;
}

.articlecontent pre code .line.line-blur {
  filter: blur(4px);
}

.articlecontent pre.blur code .line.line-blur {
  filter: blur(0px);
}

.articlecontent pre code .line.diff-add {
  background-color: rgba(34, 197, 94, 0.15);
}

.articlecontent pre code .line.diff-add:before {
  content: '+';
  color: #22c55e;
  font-weight: bold;
  user-select: none;
}

.articlecontent pre code .line.diff-remove {
  background-color: rgba(239, 68, 68, 0.15);
  display: inline-block;
}

.articlecontent pre code .line.diff-remove:before {
  content: '-';
  color: #ef4444;
  font-weight: bold;
  user-select: none;
}


.articlecontent pre code .line.line-warning {
  background-color: rgba(255, 193, 7, 0.15);
}

.articlecontent pre code .line.line-warning:before {
  content: '⚠';
  color: #ffc107;
  user-select: none;
}

.articlecontent pre code .line.line-error:before {
  content: '✗';
  color: #dc3545;
}

.articlecontent pre code .line.line-info:before {
  content: 'ℹ';
  color: #0d6efd;
}

.articlecontent pre code .line.line-error {
  background-color: rgba(220, 53, 69, 0.15);
}

.articlecontent pre code .line.line-info {
  background-color: rgba(13, 110, 253, 0.15);
}

.articlecontent pre code .line.line-success {
  background-color: rgba(25, 135, 84, 0.15);
}

.articlecontent pre code .line.line-comment {
  background-color: rgba(108, 117, 125, 0.15);
}

.articlecontent pre code .line.line-focus {
  background-color: rgba(255, 255, 255, 0.1);
}



/* Code Groups - Tabs para bloques de código agrupados (100% CSS con :has())
------------------------------------------------------------ */
.code-group {
  position: relative;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.code-group:not(.no-header) pre.astro-code {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.code-group:has(+ .lll-attached) {
  margin-bottom: 1rem;
}

/* Ocultar radio inputs */
.code-group-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Barra de tabs - header estilo IDE */
.code-group-tabs {
  position: relative;
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: #2d2d2f;
  border-bottom: var(--surface-border);
  border-radius: 8px 8px 0 0;
  font-size: 15px;
}


/* Círculos estilo IDE */
.code-group-tabs::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 12px;
  width: 46px;
  height: 18px;
  background:
    radial-gradient(circle, #888888 50%, transparent 50%) 0 0 / 14px 14px no-repeat,
    radial-gradient(circle, #888888 50%, transparent 50%) 16px 0 / 14px 14px no-repeat,
    radial-gradient(circle, #888888 50%, transparent 50%) 32px 0 / 14px 14px no-repeat;
  z-index: 1;
}

html[data-theme=light] .code-group-tabs {
  background: #e2e8f0;
  border-bottom: 2px solid #cbd5e0;
}

.code-group-tabs-container {
  position: relative;
  background: #1118;
  border-radius: 8px;
  padding: 4px 4px;
  display: inline-flex;
  align-items: center;
}

html[data-theme=light] .code-group-tabs-container {
  background: rgba(0, 0, 0, 0.08);
}

/* Slider oculto por defecto */
.code-group-slider {
  display: none;
}

/* Labels estilo botones */
.code-group-tab {
  position: relative;
  color: #8888;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  padding: 0px 10px;
  border-radius: 6px;
  background: transparent;
}

html[data-theme=light] .code-group-tab {
  color: #64748b;
}

.code-group-tab:hover {
  color: #aaa;
}

html[data-theme=light] .code-group-tab:hover {
  color: #475569;
}

.code-group-tab:first-of-type {
  margin-left: 0;
}

.code-group-tab {
  margin-left: 5px;
}

.code-group-radio:checked + .code-group-tab {
  color: #fff;
  background: var(--surface-header);
}

html[data-theme=light] .code-group-radio:checked + .code-group-tab {
  color: #1a202c;
  background: #cbd5e0;
}

/* Ocultar todos los bloques por defecto */
.code-group-block {
  display: none;
  position: relative;
  width: 100%;
  clear: both;
}

.code-group.no-header [data-tab="0"], 
.code-group.single-header [data-tab="0"] {
  display: block;
  position: relative;
  z-index: 1;
}

/* Usar :has() para mostrar el bloque correspondiente al radio checked */
.code-group:has(input[type="radio"][data-tab="0"]:checked) [data-tab="0"],
.code-group:has(input[type="radio"][data-tab="1"]:checked) [data-tab="1"],
.code-group:has(input[type="radio"][data-tab="2"]:checked) [data-tab="2"],
.code-group:has(input[type="radio"][data-tab="3"]:checked) [data-tab="3"],
.code-group:has(input[type="radio"][data-tab="4"]:checked) [data-tab="4"],
.code-group:has(input[type="radio"][data-tab="5"]:checked) [data-tab="5"],
.code-group:has(input[type="radio"][data-tab="6"]:checked) [data-tab="6"],
.code-group:has(input[type="radio"][data-tab="7"]:checked) [data-tab="7"],
.code-group:has(input[type="radio"][data-tab="8"]:checked) [data-tab="8"],
.code-group:has(input[type="radio"][data-tab="9"]:checked) [data-tab="9"] {
  display: block;
  position: relative;
  z-index: 1;
}

.svg-image {
  max-width: 650px; 
  max-height: 350px;
  display: block;
  margin: auto;
}

.svg-image-s {
  max-height: 200px;
}

.svg-image-l {
  max-width: 750px;
  max-height: 500px;
}

html[data-theme=light] .svg-image {
    background: #100f15;
}