/* TecnoAndroid article index — native, lightweight, no JavaScript */
.ta-article-toc{
  --ta-toc-accent:var(--ta-color-secondary,#D6FF3E);
  position:relative;
  margin:8px 0 34px;
  border:1px solid color-mix(in srgb,var(--ta-ink,#0B0E11) 11%,transparent);
  border-radius:18px;
  background:
    radial-gradient(85% 120% at 0 0,color-mix(in srgb,var(--ta-toc-accent) 24%,transparent),transparent 58%),
    linear-gradient(145deg,#FAFBF8 0%,var(--ta-color-bg,#FFF) 64%);
  box-shadow:0 16px 44px rgba(11,14,17,.09);
  overflow:hidden;
}

.ta-article-toc::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--ta-toc-accent),#2EE6C5);
}

.ta-article-toc__summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:82px;
  padding:17px 22px 17px 25px;
  color:var(--ta-color-text,#12151C);
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.ta-article-toc__summary::-webkit-details-marker{display:none}
.ta-article-toc__summary::marker{display:none;content:""}

.ta-article-toc__summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--ta-toc-accent) 65%,#0B0E11);
  outline-offset:-4px;
  border-radius:16px;
}

.ta-article-toc__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:13px;
  color:var(--ta-ink,#0B0E11);
  background:var(--ta-toc-accent);
  box-shadow:0 7px 18px color-mix(in srgb,var(--ta-toc-accent) 38%,transparent);
}

.ta-article-toc__heading{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.15;
}

.ta-article-toc__eyebrow{
  margin-bottom:5px;
  color:var(--ta-color-text-secondary,#4B5162);
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.ta-article-toc__title{
  font-family:var(--ta-font-heading,'Poppins',sans-serif);
  font-size:19px;
  font-weight:750;
  letter-spacing:-.02em;
}

.ta-article-toc__count{
  margin-left:auto;
  padding:6px 10px;
  border:1px solid color-mix(in srgb,var(--ta-ink,#0B0E11) 9%,transparent);
  border-radius:999px;
  color:var(--ta-color-text-secondary,#4B5162);
  background:color-mix(in srgb,var(--ta-color-bg,#FFF) 78%,transparent);
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.ta-article-toc__chevron{
  width:10px;
  height:10px;
  margin:0 3px 5px 2px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease,margin .2s ease;
}

.ta-article-toc[open] .ta-article-toc__chevron{
  margin-top:7px;
  margin-bottom:0;
  transform:rotate(225deg);
}

.ta-article-toc__nav{
  padding:0 22px 22px 25px;
}

.ta-article-toc__list{
  display:grid;
  gap:7px;
  margin:0;
  padding:17px 0 0;
  border-top:1px solid color-mix(in srgb,var(--ta-ink,#0B0E11) 9%,transparent);
  list-style:none;
}

.ta-article-toc__item{margin:0!important;padding:0}

.ta-article-toc__item a{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:start;
  gap:9px;
  padding:9px 11px;
  border-radius:10px;
  color:var(--ta-color-text,#12151C);
  font-size:14px;
  font-weight:650;
  line-height:1.4;
  text-decoration:none!important;
  transition:background-color .16s ease,transform .16s ease,color .16s ease;
}

.ta-article-toc__item a:hover,
.ta-article-toc__item a:focus-visible{
  color:var(--ta-ink,#0B0E11);
  background:var(--ta-toc-accent);
  transform:translateX(3px);
  outline:none;
}

.ta-article-toc__number{
  padding-top:1px;
  color:var(--ta-color-text-secondary,#4B5162);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.ta-article-toc__item a:hover .ta-article-toc__number,
.ta-article-toc__item a:focus-visible .ta-article-toc__number{color:inherit}

.ta-article-toc__item--h3{margin-left:18px!important}
.ta-article-toc__item--h4{margin-left:36px!important}
.ta-article-toc__item--h5{margin-left:54px!important}

.ta-article-content :is(h2,h3,h4,h5)[id]{scroll-margin-top:96px}

[data-theme="dark"] .ta-article-toc,
.ta-dark .ta-article-toc{
  border-color:rgba(255,255,255,.12);
  background:
    radial-gradient(85% 120% at 0 0,color-mix(in srgb,var(--ta-toc-accent) 15%,transparent),transparent 58%),
    linear-gradient(145deg,#171B20 0%,var(--ta-color-bg,#111418) 64%);
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}

[data-theme="dark"] .ta-article-toc__count,
.ta-dark .ta-article-toc__count{border-color:rgba(255,255,255,.12)}

@media(max-width:600px){
  .ta-article-toc{margin:4px 0 28px;border-radius:15px}
  .ta-article-toc__summary{gap:11px;min-height:72px;padding:14px 15px 14px 19px}
  .ta-article-toc__mark{flex-basis:38px;width:38px;height:38px;border-radius:11px}
  .ta-article-toc__mark svg{width:18px;height:18px}
  .ta-article-toc__title{font-size:16px}
  .ta-article-toc__eyebrow{font-size:9px}
  .ta-article-toc__count{display:none}
  .ta-article-toc__nav{padding:0 13px 15px 18px}
  .ta-article-toc__list{gap:4px;padding-top:12px}
  .ta-article-toc__item a{grid-template-columns:27px minmax(0,1fr);gap:6px;padding:8px;font-size:13px}
  .ta-article-toc__item--h3{margin-left:10px!important}
  .ta-article-toc__item--h4{margin-left:20px!important}
  .ta-article-toc__item--h5{margin-left:30px!important}
}

@media(prefers-reduced-motion:reduce){
  .ta-article-toc__chevron,
  .ta-article-toc__item a{transition:none}
}