/* About this tool: works-with chips, how it works, FAQ and related tools under the downloader pages. */
.ts-seo { --ts-ac: 34, 211, 238; width: min(100% - 32px, 980px); margin: 56px auto 24px; color: #e4e4e7; font-family: inherit; }
.ts-seo h2 { margin: 44px 0 18px; color: #fff; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; text-align: center; }
.ts-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ts-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(var(--ts-ac), .08); box-shadow: inset 0 0 0 1px rgba(var(--ts-ac), .22); font-size: 12.5px; font-weight: 700; }
.ts-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ts-ac)); box-shadow: 0 0 8px rgb(var(--ts-ac)); }
.ts-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ts-steps li { position: relative; padding: 22px 20px 20px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ts-steps b { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(135deg, rgb(var(--ts-ac)), #8b5cf6); color: #04040a; font-size: 15px; font-weight: 900; }
.ts-steps h3 { margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 800; }
.ts-steps p { margin: 0; color: #a1a1aa; font-size: 13.5px; line-height: 1.6; }
.ts-faq { max-width: 820px; margin: 0 auto; }
.ts-faq details { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ts-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 4px; color: #f4f4f5; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.ts-faq summary::-webkit-details-marker { display: none; }
.ts-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #a1a1aa; font-size: 17px; transition: transform .3s, background .3s, color .3s; }
.ts-faq details[open] summary::after { transform: rotate(45deg); background: rgba(var(--ts-ac), .18); color: #fff; }
.ts-faq details p { margin: 0 4px 18px; color: #a1a1aa; font-size: 14px; line-height: 1.65; }
.ts-rel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.ts-rel span { width: 100%; margin-bottom: 4px; color: #71717a; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.ts-rel a { padding: 9px 15px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #e4e4e7; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }
.ts-rel a:hover { background: rgba(var(--ts-ac), .14); transform: translateY(-1px); }
@media (max-width: 720px) { .ts-steps { grid-template-columns: 1fr; } .ts-seo { margin-top: 36px; } }