/* This style file has been created automatically per your request.

The following pages can help you get started with CSS:
* CSS Tutorial (http://w3schools.com/css/default.asp)
* CSS3 Tutorial (http://w3schools.com/css3/default.asp)
* CSS Reference (http://w3schools.com/cssref/default.asp) */
/* This style will be applied to the body of your topics */
.ch-ArticleContent
{

}

/* FlowDesk design system v2 — paste into Project settings > Style.css (optional: makes styles visible in the editor too) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');
:root
{
  --fd-p: #4f46e5;
  --fd-p2: #7c3aed;
  --fd-p3: #db2777;
  --fd-p-d: #3730a3;
  --fd-p-50: #f0f1ff;
  --fd-p-100: #e2e4ff;
  --fd-p-200: #c9ccff;
  --fd-t: #0b1220;
  --fd-t2: #3b4556;
  --fd-mut: #6b7488;
  --fd-b: #e7e9f0;
  --fd-b2: #d9dce6;
  --fd-soft: #f7f8fc;
  --fd-ok: #059669;
  --fd-ok-50: #effcf6;
  --fd-warn: #d97706;
  --fd-warn-50: #fff8eb;
  --fd-err: #e11d48;
  --fd-err-50: #fff1f3;
  --fd-info: #0284c7;
  --fd-info-50: #f0f8ff;
  --fd-r: 16px;
  --fd-grad: linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#db2777 115%);
  --fd-sh: 0 1px 2px rgba(11,18,32,.04),0 6px 20px -6px rgba(11,18,32,.10);
  --fd-sh2: 0 2px 4px rgba(11,18,32,.04),0 18px 40px -14px rgba(79,70,229,.28);
  --fd-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ===== 1. BASE — plain editor elements are styled automatically ===== */
.ch-ArticleContent
{
  font-family: Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color: var(--fd-t2);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11","ss01";
}

.ch-ArticleContent::selection
{
  background: #ddd9ff;
  color: var(--fd-t);
}

.ch-ArticleContent h1,
.ch-ArticleContent h2,
.ch-ArticleContent h3,
.ch-ArticleContent h4
{
  color: var(--fd-t);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.022em;
}

.ch-ArticleContent h1
{
  font-size: 2.2em;
  font-weight: 800;
}

.ch-ArticleContent h2
{
  font-size: 1.6em;
  margin: 2.4em 0 .75em;
  padding-top: .2em;
  position: relative;
}

.ch-ArticleContent h2::before
{
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--fd-grad);
  margin-bottom: .65em;
}

.ch-ArticleContent h3
{
  font-size: 1.2em;
  margin: 1.9em 0 .5em;
  letter-spacing: -.012em;
}

.ch-ArticleContent h4
{
  font-size: .76em;
  margin: 1.6em 0 .5em;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fd-mut);
  font-weight: 700;
}

.ch-ArticleContent p
{
  margin: .75em 0;
}

.ch-ArticleContent a
{
  color: var(--fd-p);
  text-decoration: none;
  font-weight: 550;
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s,color .15s;
}

.ch-ArticleContent a:hover
{
  background-size: 100% 1.5px;
  color: var(--fd-p-d);
}

.ch-ArticleContent b,
.ch-ArticleContent strong
{
  color: var(--fd-t);
  font-weight: 650;
}

.ch-ArticleContent hr
{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--fd-b2),transparent);
  margin: 2.8em 0;
}

.ch-ArticleContent img
{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.ch-ArticleContent ul
{
  padding-left: 1.35em;
}

.ch-ArticleContent ul>li
{
  margin: .4em 0;
  padding-left: .2em;
}

.ch-ArticleContent ul>li::marker
{
  color: var(--fd-p2);
  font-size: 1.1em;
}

/* Numbered lists = procedure steps */
.ch-ArticleContent ol
{
  list-style: none;
  counter-reset: fd-s;
  padding-left: 0;
  margin: 1.2em 0;
}

.ch-ArticleContent ol>li
{
  counter-increment: fd-s;
  position: relative;
  padding: .05em 0 0 3em;
  margin: 0 0 1.2em;
}

.ch-ArticleContent ol>li::before
{
  content: counter(fd-s);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 9px;
  background: var(--fd-grad);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 10px -3px rgba(79,70,229,.55);
}

.ch-ArticleContent ol>li:not(:last-child)::after
{
  content: "";
  position: absolute;
  left: 13px;
  top: 36px;
  bottom: -1.05em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--fd-p-200),var(--fd-p-50));
}

.ch-ArticleContent li ol>li::before
{
  background: #fff;
  color: var(--fd-p);
  border: 1.5px solid var(--fd-p-200);
  box-shadow: none;
  line-height: 21px;
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 7px;
}

.ch-ArticleContent li ol>li::after
{
  display: none;
}

.ch-ArticleContent kbd
{
  display: inline-block;
  font: 600 .76em/1 var(--fd-mono);
  padding: .38em .55em .32em;
  border: 1px solid var(--fd-b2);
  border-radius: 7px;
  background: linear-gradient(#fff,#f5f6fa);
  color: var(--fd-t);
  box-shadow: 0 2px 0 var(--fd-b2),inset 0 1px 0 #fff;
  vertical-align: .12em;
  white-space: nowrap;
  margin: 0 .1em;
}

.ch-ArticleContent code
{
  font-family: var(--fd-mono);
  font-size: .84em;
  background: var(--fd-p-50);
  color: var(--fd-p-d);
  padding: .16em .42em;
  border-radius: 6px;
  border: 1px solid var(--fd-p-100);
}

.ch-ArticleContent pre
{
  position: relative;
  background: radial-gradient(120% 140% at 100% 0%,#1e1b4b 0%,#0b1020 55%);
  color: #e2e8f0;
  border-radius: var(--fd-r);
  padding: 1.25em 1.4em;
  overflow: auto;
  font: .85em/1.7 var(--fd-mono);
  box-shadow: 0 20px 40px -22px rgba(11,16,32,.7),inset 0 0 0 1px rgba(255,255,255,.06);
  margin: 1.2em 0;
}

.ch-ArticleContent pre[data-lang]
{
  padding-top: 3em;
}

.ch-ArticleContent pre[data-lang]::before
{
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: .6em 1.4em .55em 72px;
  font: 700 10.5px/1.6 Inter,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a5b4fc;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.ch-ArticleContent pre[data-lang]::after
{
  content: "";
  position: absolute;
  left: 1.4em;
  top: 1.05em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 15px 0 0 #febc2e,30px 0 0 #28c840;
}

.ch-ArticleContent pre code
{
  background: none;
  color: inherit;
  padding: 0;
  font-size: 1em;
  border: 0;
}

.ch-ArticleContent .fd-c
{
  color: #7c88a8;
  font-style: italic;
}

.ch-ArticleContent .fd-s
{
  color: #86efac;
}

.ch-ArticleContent .fd-k
{
  color: #c4b5fd;
}

.ch-ArticleContent .fd-n
{
  color: #fda4af;
}

.ch-ArticleContent .fd-copy
{
  position: absolute;
  top: .45em;
  right: .6em;
  background: rgba(255,255,255,.07);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: .25em .8em;
  font: 600 11.5px Inter,sans-serif;
  cursor: pointer;
  transition: background .15s;
  z-index: 1;
}

.ch-ArticleContent .fd-copy:hover
{
  background: rgba(255,255,255,.16);
}

/* Tables (CHTable) */
.ch-ArticleContent table.CHTable
{
  width: 100%;
  border-collapse: separate!important;
  border-spacing: 0;
  border: 1px solid var(--fd-b);
  border-radius: var(--fd-r);
  overflow: hidden;
  margin: 1.3em 0;
  font-size: .94em;
  box-shadow: var(--fd-sh);
  background: #fff;
}

.ch-ArticleContent table.CHTable th
{
  background: linear-gradient(#fafbff,#f3f4fb);
  color: var(--fd-mut);
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--fd-b)!important;
}

.ch-ArticleContent table.CHTable th,
.ch-ArticleContent table.CHTable td
{
  padding: .85em 1.1em;
  border: 0;
  border-bottom: 1px solid #f0f1f6;
  vertical-align: top;
}

.ch-ArticleContent table.CHTable tbody tr:nth-child(even) td
{
  background: #fcfcfe;
}

.ch-ArticleContent table.CHTable tr:last-child td
{
  border-bottom: 0;
}

.ch-ArticleContent table.CHTable tbody tr:hover td
{
  background: var(--fd-p-50);
}

.ch-ArticleContent table.CHTable td:first-child
{
  color: var(--fd-t);
}

/* Callouts (Quick Parts) */
.ch-ArticleContent table.infobox-simple
{
  width: 100%;
  border: 0!important;
  border-collapse: separate!important;
  margin: 1.4em 0;
  background: none!important;
}

.ch-ArticleContent table.infobox-simple td
{
  position: relative;
  padding: 1em 1.25em 1em 3.6em!important;
  border: 1px solid #cfe8fb!important;
  background: linear-gradient(135deg,#f3f9ff,#eef6ff)!important;
  border-radius: 14px;
  color: var(--fd-t2);
  line-height: 1.62;
  box-shadow: 0 1px 2px rgba(2,132,199,.06);
}

.ch-ArticleContent table.infobox-simple td::before
{
  content: "i";
  position: absolute;
  left: 1.05em;
  top: .95em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fd-info);
  color: #fff;
  font: italic 800 14px/26px Georgia,serif;
  text-align: center;
  box-shadow: 0 4px 10px -3px rgba(2,132,199,.6);
}

.ch-ArticleContent table.infobox--warning td
{
  border-color: #fde3b0!important;
  background: linear-gradient(135deg,#fffaf0,#fff5e3)!important;
}

.ch-ArticleContent table.infobox--warning td::before
{
  content: "!";
  background: var(--fd-warn);
  font: 800 15px/26px Inter,sans-serif;
  box-shadow: 0 4px 10px -3px rgba(217,119,6,.6);
}

.ch-ArticleContent table.infobox--tip td
{
  border-color: #bfeedd!important;
  background: linear-gradient(135deg,#f2fdf8,#eafaf3)!important;
}

.ch-ArticleContent table.infobox--tip td::before
{
  content: "✦";
  background: var(--fd-ok);
  font: 700 13px/26px Inter,sans-serif;
  box-shadow: 0 4px 10px -3px rgba(5,150,105,.6);
}

.ch-ArticleContent table.infobox--danger td
{
  border-color: #fdcdd6!important;
  background: linear-gradient(135deg,#fff5f6,#ffeef1)!important;
}

.ch-ArticleContent table.infobox--danger td::before
{
  content: "×";
  background: var(--fd-err);
  font: 800 17px/25px Inter,sans-serif;
  box-shadow: 0 4px 10px -3px rgba(225,29,72,.6);
}

/* Expandable blocks */
.ch-ArticleContent details
{
  border: 1px solid var(--fd-b);
  border-radius: 14px;
  margin: .65em 0;
  background: #fff;
  transition: box-shadow .2s,border-color .2s;
  overflow: hidden;
}

.ch-ArticleContent details:hover
{
  border-color: var(--fd-p-200);
}

.ch-ArticleContent details[open]
{
  box-shadow: var(--fd-sh2);
  border-color: var(--fd-p-200);
}

.ch-ArticleContent summary
{
  cursor: pointer;
  list-style: none;
  padding: .95em 3.4em .95em 1.2em;
  font-weight: 650;
  color: var(--fd-t);
  position: relative;
  outline: none;
  transition: background .15s;
}

.ch-ArticleContent summary:hover
{
  background: var(--fd-soft);
}

.ch-ArticleContent summary::-webkit-details-marker
{
  display: none;
}

.ch-ArticleContent summary::after
{
  content: "";
  position: absolute;
  right: 1.2em;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fd-p);
  border-bottom: 2px solid var(--fd-p);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s;
}

.ch-ArticleContent details[open]>summary::after
{
  transform: translateY(-30%) rotate(-135deg);
}

.ch-ArticleContent details[open]>summary
{
  background: linear-gradient(90deg,var(--fd-p-50),#fff);
  border-bottom: 1px solid var(--fd-b);
}

.ch-ArticleContent summary:focus-visible
{
  box-shadow: inset 0 0 0 2px var(--fd-p);
}

.ch-ArticleContent details>*:not(summary)
{
  margin-left: 1.2em;
  margin-right: 1.2em;
}

.ch-ArticleContent details>*:last-child
{
  margin-bottom: 1.1em;
}

.ch-ArticleContent .CHBoxShowMore
{
  border: 1px dashed var(--fd-p-200);
  border-radius: 12px;
  padding: .2em 1em;
  margin: 1em 0;
  background: var(--fd-soft);
}

.ch-ArticleContent .CHBoxShowMore .showMoreLabel a,
.ch-ArticleContent .CHBoxShowMore .hideLabel a
{
  font-weight: 650;
}

/* Native ClickHelp Tabs (Insert > Tabs) */
.ch-ArticleContent .CHTabs_container
{
  margin: 1.3em 0;
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fd-sh);
  overflow: hidden;
}

.ch-ArticleContent .CHTabs_tabCaptionsContainer
{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--fd-soft);
  border-bottom: 1px solid var(--fd-b);
}

.ch-ArticleContent .CHTabs_tabCaption
{
  padding: .5em 1.05em!important;
  border-radius: 10px!important;
  font-weight: 650;
  font-size: .9em;
  color: var(--fd-mut)!important;
  background: transparent!important;
  border: 0!important;
  cursor: pointer;
  transition: all .15s;
}

.ch-ArticleContent .CHTabs_tabCaption:hover
{
  color: var(--fd-p)!important;
  background: #fff!important;
}

.ch-ArticleContent .CHTabs_tabCaption.CHTabs_tabCaptionSelected,
.ch-ArticleContent .CHTabs_tabCaptionSelected:hover
{
  color: var(--fd-p-d)!important;
  background: #fff!important;
  box-shadow: 0 1px 2px rgba(11,18,32,.06),0 4px 12px -4px rgba(79,70,229,.25),inset 0 -2px 0 var(--fd-p);
}

.ch-ArticleContent .CHTabs_tabContentContainer
{
  padding: 1.1em 1.35em .4em;
  border: 0!important;
}

.ch-ArticleContent .CHTabs_tabContentContainer pre
{
  margin-top: .2em;
}

/* Heading anchor links */
.ch-ArticleContent .CHHeadingLink
{
  opacity: 0;
  margin-left: .35em;
  background-image: none!important;
  transition: opacity .15s;
}

.ch-ArticleContent h2:hover .CHHeadingLink,
.ch-ArticleContent h3:hover .CHHeadingLink
{
  opacity: .5;
}

/* ===== 2. COMPONENTS (fd-*) ===== */
.ch-ArticleContent .fd-hero
{
  background: radial-gradient(60% 90% at 100% 0%,rgba(219,39,119,.55) 0%,transparent 60%),radial-gradient(70% 100% at 0% 100%,rgba(14,165,233,.35) 0%,transparent 60%),linear-gradient(135deg,#312e81 0%,#4f46e5 45%,#7c3aed 100%);
  color: #fff;
  border-radius: 24px;
  padding: 2.6em 2.4em 2.3em;
  margin: 0 0 2em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(79,70,229,.75),inset 0 0 0 1px rgba(255,255,255,.12);
}

.ch-ArticleContent .fd-hero::before
{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(80% 80% at 30% 30%,#000 20%,transparent 75%);
  mask-image: radial-gradient(80% 80% at 30% 30%,#000 20%,transparent 75%);
  pointer-events: none;
}

.ch-ArticleContent .fd-hero::after
{
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);
  pointer-events: none;
}

.ch-ArticleContent .fd-hero p
{
  color: rgba(255,255,255,.88);
  font-size: 1.08em;
  max-width: 58ch;
  position: relative;
  z-index: 1;
}

.ch-ArticleContent .fd-hero p.fd-hero-title
{
  font-size: 2.35em;
  font-weight: 800;
  color: #fff;
  margin: .25em 0 .3em;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-shadow: 0 2px 20px rgba(30,27,75,.35);
}

.ch-ArticleContent .fd-hero .fd-eyebrow
{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  padding: .38em .95em;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ch-ArticleContent .fd-hero .fd-eyebrow::before
{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}

.ch-ArticleContent .fd-hero b
{
  color: #fff;
}

.ch-ArticleContent .fd-hero a
{
  background-image: none;
}

.ch-ArticleContent .fd-btn
{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .75em 1.35em;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95em;
  background: #fff;
  color: var(--fd-p-d)!important;
  text-decoration: none!important;
  margin: .6em .55em 0 0;
  box-shadow: 0 10px 24px -10px rgba(11,18,32,.55);
  transition: transform .15s,box-shadow .15s;
  background-image: none!important;
}

.ch-ArticleContent .fd-btn:hover
{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(11,18,32,.6);
}

.ch-ArticleContent .fd-btn--ghost
{
  background: rgba(255,255,255,.1)!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ch-ArticleContent .fd-btn--ghost:hover
{
  background: rgba(255,255,255,.18)!important;
}

.ch-ArticleContent .fd-btn--solid
{
  background: var(--fd-grad)!important;
  color: #fff!important;
}

.ch-ArticleContent .fd-meta
{
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 0 0 1.7em;
  color: var(--fd-mut);
  font-size: .82em;
  font-weight: 550;
}

.ch-ArticleContent .fd-meta span
{
  background: #fff;
  border: 1px solid var(--fd-b);
  border-radius: 999px;
  padding: .28em .85em;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
}

.ch-ArticleContent .fd-badge
{
  display: inline-flex;
  align-items: center;
  font: 700 .66em/1.6 Inter,sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .12em .65em;
  border-radius: 999px;
  vertical-align: .18em;
  background: var(--fd-p-50);
  color: var(--fd-p-d);
  margin: 0 .25em;
  white-space: nowrap;
  border: 1px solid var(--fd-p-100);
}

.ch-ArticleContent .fd-badge--new
{
  background: #e8fbf1;
  color: #047857;
  border-color: #b8f0d3;
}

.ch-ArticleContent .fd-badge--beta
{
  background: #f6efff;
  color: #6d28d9;
  border-color: #e2d3fe;
}

.ch-ArticleContent .fd-badge--pro
{
  background: linear-gradient(135deg,#fff7e0,#ffeec2);
  color: #92400e;
  border-color: #fcd98a;
}

.ch-ArticleContent .fd-badge--ent
{
  background: linear-gradient(135deg,#1e1b4b,#0b1220);
  color: #fff;
  border-color: #1e1b4b;
}

.ch-ArticleContent .fd-badge--admin
{
  background: #fff0f3;
  color: #be123c;
  border-color: #fecdd6;
}

.ch-ArticleContent .fd-badge--fixed
{
  background: #ecf7ff;
  color: #0369a1;
  border-color: #c3e5fb;
}

.ch-ArticleContent .fd-badge--deprecated
{
  background: #f3f4f7;
  color: #6b7488;
  border-color: #e2e4ea;
  text-decoration: line-through;
}

.ch-ArticleContent .fd-lead
{
  font-size: 1.17em;
  line-height: 1.65;
  color: var(--fd-t2);
  max-width: 66ch;
  margin: .2em 0 1.4em;
}

.ch-ArticleContent .fd-cards
{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 1em;
  margin: 1.3em 0;
}

.ch-ArticleContent .fd-card
{
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  padding: 1.3em 1.3em 1.2em;
  color: var(--fd-t2)!important;
  text-decoration: none!important;
  font-weight: 400;
  transition: transform .2s,box-shadow .2s,border-color .2s;
  background-image: none!important;
  overflow: hidden;
}

.ch-ArticleContent .fd-card::after
{
  content: "→";
  position: absolute;
  right: 1.1em;
  top: 1.15em;
  color: var(--fd-p);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .2s;
}

.ch-ArticleContent .fd-card:hover
{
  transform: translateY(-4px);
  box-shadow: var(--fd-sh2);
  border-color: var(--fd-p-200);
}

.ch-ArticleContent .fd-card:hover::after
{
  opacity: 1;
  transform: none;
}

.ch-ArticleContent .fd-card .fd-ico
{
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg,var(--fd-p-50),#fbe8f3);
  font-size: 1.3em;
  margin-bottom: .85em;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.08);
}

.ch-ArticleContent .fd-card b
{
  display: block;
  font-size: 1.05em;
  margin-bottom: .3em;
  letter-spacing: -.01em;
}

.ch-ArticleContent .fd-card .fd-desc
{
  display: block;
  font-size: .9em;
  color: var(--fd-mut);
  line-height: 1.55;
}

.ch-ArticleContent .fd-grid2
{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 1.2em;
  margin: 1.3em 0;
}

.ch-ArticleContent .fd-panel
{
  border: 1px solid var(--fd-b);
  border-radius: var(--fd-r);
  padding: 1.2em 1.4em;
  background: #fff;
  box-shadow: var(--fd-sh);
}

.ch-ArticleContent .fd-panel>:first-child
{
  margin-top: 0;
}

.ch-ArticleContent .fd-result
{
  display: block;
  margin-top: .55em;
  padding: .5em .85em .5em 2.3em;
  background: var(--fd-ok-50);
  border: 1px solid #c9f1de;
  border-radius: 10px;
  font-size: .9em;
  color: #065f46;
  position: relative;
}

.ch-ArticleContent .fd-result::before
{
  content: "✓";
  position: absolute;
  left: .75em;
  top: .55em;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--fd-ok);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.ch-ArticleContent .fd-flow
{
  display: flex;
  flex-wrap: wrap;
  gap: 1.8em;
  margin: 1.5em 0;
}

.ch-ArticleContent .fd-flow>div
{
  flex: 1 1 140px;
  background: #fff;
  border: 1px solid var(--fd-b);
  border-radius: 16px;
  padding: 1.1em .9em;
  text-align: center;
  position: relative;
  font-size: .88em;
  line-height: 1.5;
  box-shadow: var(--fd-sh);
  color: var(--fd-mut);
}

.ch-ArticleContent .fd-flow>div b
{
  display: block;
  margin: .35em 0 .15em;
  font-size: 1.12em;
  color: var(--fd-t);
}

.ch-ArticleContent .fd-flow>div:not(:last-child)::after
{
  content: "";
  position: absolute;
  right: -1.5em;
  top: 50%;
  width: 1.2em;
  height: 2px;
  background: var(--fd-grad);
  transform: translateY(-50%);
}

.ch-ArticleContent .fd-flow>div:not(:last-child)::before
{
  content: "";
  position: absolute;
  right: -1.55em;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--fd-p2);
  border-right: 2px solid var(--fd-p2);
  transform: translateY(-50%) rotate(45deg);
}

.ch-ArticleContent .fd-checklist
{
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  padding: 1em 1.2em;
  background: #fff;
  box-shadow: var(--fd-sh);
  counter-reset: fd-done fd-total;
  margin: 1.3em 0;
}

.ch-ArticleContent .fd-checklist input
{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ch-ArticleContent .fd-checklist input:checked
{
  counter-increment: fd-done;
}

.ch-ArticleContent .fd-checklist label
{
  display: flex;
  gap: .8em;
  align-items: flex-start;
  padding: .6em .6em;
  border-radius: 11px;
  cursor: pointer;
  counter-increment: fd-total;
  transition: background .15s;
  color: var(--fd-t);
}

.ch-ArticleContent .fd-checklist label:hover
{
  background: var(--fd-p-50);
}

.ch-ArticleContent .fd-checklist label::before
{
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .18em;
  border: 2px solid var(--fd-b2);
  border-radius: 7px;
  background: #fff;
  color: #fff;
  font: 800 12px/17px Inter,sans-serif;
  text-align: center;
  transition: all .2s;
}

.ch-ArticleContent .fd-checklist input:checked+label
{
  color: var(--fd-mut);
  text-decoration: line-through;
  text-decoration-color: var(--fd-b2);
}

.ch-ArticleContent .fd-checklist input:checked+label::before
{
  content: "✓";
  background: var(--fd-grad);
  border-color: transparent;
  box-shadow: 0 4px 10px -3px rgba(79,70,229,.6);
  transform: scale(1.05);
}

.ch-ArticleContent .fd-checklist input:focus-visible+label
{
  box-shadow: 0 0 0 2px var(--fd-p);
}

.ch-ArticleContent .fd-count
{
  margin: .7em .6em .1em;
  font-size: .8em;
  font-weight: 700;
  color: var(--fd-p);
  letter-spacing: .02em;
}

.ch-ArticleContent .fd-count::after
{
  content: "Progress: " counter(fd-done) " of " counter(fd-total) " completed";
}

.ch-ArticleContent .fd-alldone
{
  display: none;
  margin: .7em .6em .3em;
  padding: .7em 1em;
  border-radius: 12px;
  background: linear-gradient(135deg,#ecfdf5,#e0f7ff);
  color: #065f46;
  font-weight: 650;
}

.ch-ArticleContent .fd-checklist:not(:has(input:not(:checked))) .fd-alldone
{
  display: block;
  animation: fd-in .35s ease;
}

/* Generic CSS-only switcher */
.ch-ArticleContent .fd-switch
{
  margin: 1.3em 0;
}

.ch-ArticleContent .fd-switch>input
{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ch-ArticleContent .fd-switch>div
{
  display: none;
  padding: 1.25em 1.45em;
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fd-sh2);
  margin-top: .4em;
  animation: fd-in .3s ease;
}

.ch-ArticleContent .fd-switch>div>:first-child
{
  margin-top: 0;
}

@keyframes fd-in
{
  from
  {
    opacity: 0;
    transform: translateY(8px);
  }

  to
  {
    opacity: 1;
    transform: none;
  }
}

.ch-ArticleContent .fd-switch>p
{
  margin: .2em 0 .35em;
  display: flex;
  flex-wrap: wrap;
  gap: .35em;
  align-items: center;
}

.ch-ArticleContent .fd-switch label
{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1.1em;
  border: 1px solid var(--fd-b);
  border-radius: 12px;
  cursor: pointer;
  margin: 0 .1em .2em 0;
  font-weight: 650;
  font-size: .92em;
  background: #fff;
  color: var(--fd-t);
  transition: all .18s;
  user-select: none;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
}

.ch-ArticleContent .fd-switch label:hover
{
  border-color: var(--fd-p-200);
  color: var(--fd-p);
  transform: translateY(-1px);
}

.ch-ArticleContent .fd-switch>input:nth-of-type(1):checked~div:nth-of-type(1),
.ch-ArticleContent .fd-switch>input:nth-of-type(2):checked~div:nth-of-type(2),
.ch-ArticleContent .fd-switch>input:nth-of-type(3):checked~div:nth-of-type(3),
.ch-ArticleContent .fd-switch>input:nth-of-type(4):checked~div:nth-of-type(4),
.ch-ArticleContent .fd-switch>input:nth-of-type(5):checked~div:nth-of-type(5),
.ch-ArticleContent .fd-switch>input:nth-of-type(6):checked~div:nth-of-type(6),
.ch-ArticleContent .fd-switch>input:nth-of-type(7):checked~div:nth-of-type(7),
.ch-ArticleContent .fd-switch>input:nth-of-type(8):checked~div:nth-of-type(8),
.ch-ArticleContent .fd-switch>input:nth-of-type(9):checked~div:nth-of-type(9),
.ch-ArticleContent .fd-switch>input:nth-of-type(10):checked~div:nth-of-type(10),
.ch-ArticleContent .fd-switch>input:nth-of-type(11):checked~div:nth-of-type(11),
.ch-ArticleContent .fd-switch>input:nth-of-type(12):checked~div:nth-of-type(12)
{
  display: block;
}

.ch-ArticleContent .fd-switch>input:nth-of-type(1):checked~p label:nth-of-type(1),
.ch-ArticleContent .fd-switch>input:nth-of-type(2):checked~p label:nth-of-type(2),
.ch-ArticleContent .fd-switch>input:nth-of-type(3):checked~p label:nth-of-type(3),
.ch-ArticleContent .fd-switch>input:nth-of-type(4):checked~p label:nth-of-type(4),
.ch-ArticleContent .fd-switch>input:nth-of-type(5):checked~p label:nth-of-type(5),
.ch-ArticleContent .fd-switch>input:nth-of-type(6):checked~p label:nth-of-type(6)
{
  background: var(--fd-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(79,70,229,.8);
}

.ch-ArticleContent .fd-switch>div.fd-right
{
  border-color: #bfeedd;
  background: linear-gradient(135deg,#f2fdf8,#fff);
}

.ch-ArticleContent .fd-switch>div.fd-wrong
{
  border-color: #fdcdd6;
  background: linear-gradient(135deg,#fff5f6,#fff);
}

.ch-ArticleContent .fd-wizard>div
{
  position: relative;
  padding-top: 1.5em;
}

.ch-ArticleContent .fd-wizard>div::before
{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--fd-grad);
  border-radius: 18px 18px 0 0;
}

.ch-ArticleContent .fd-stepno
{
  display: inline-block;
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fd-p);
  background: var(--fd-p-50);
  padding: .2em .7em;
  border-radius: 999px;
}

.ch-ArticleContent .fd-wizard>div.fd-fix::before
{
  background: linear-gradient(90deg,#059669,#10b981);
}

.ch-ArticleContent .fd-quiz
{
  border: 1px solid var(--fd-p-100);
  border-radius: 20px;
  padding: 1.2em 1.4em;
  background: linear-gradient(135deg,#f7f7ff,#fdf4fb);
}

.ch-ArticleContent .fd-quiz>p.fd-q
{
  font-weight: 750;
  color: var(--fd-t);
  font-size: 1.05em;
}

.ch-ArticleContent .fd-quiz>p.fd-q::before
{
  content: "QUIZ";
  display: inline-block;
  margin-right: .6em;
  font-size: .65em;
  letter-spacing: .12em;
  background: var(--fd-grad);
  color: #fff;
  padding: .25em .65em;
  border-radius: 6px;
  vertical-align: .15em;
}

/* Hotspot UI tour */
.ch-ArticleContent .fd-shot
{
  position: relative;
  margin: 1.6em 0 2.2em;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(80% 120% at 0% 0%,#e9e7ff,transparent 60%),radial-gradient(80% 120% at 100% 100%,#fde7f3,transparent 60%),#f7f8fc;
}

.ch-ArticleContent .fd-mock
{
  border: 1px solid var(--fd-b);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(30,27,75,.45);
  background: #fff;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
}

.ch-ArticleContent .fd-mock-top
{
  height: 36px;
  background: #f4f5f9;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--fd-b);
}

.ch-ArticleContent .fd-mock-top i
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  display: inline-block;
}

.ch-ArticleContent .fd-mock-top i+i
{
  background: #febc2e;
}

.ch-ArticleContent .fd-mock-top i+i+i
{
  background: #28c840;
}

.ch-ArticleContent .fd-mock-top span
{
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--fd-b);
  border-radius: 8px;
  padding: 3px 14px;
  color: #8a93a6;
  flex: 0 1 320px;
  text-align: center;
}

.ch-ArticleContent .fd-mock-body
{
  display: flex;
  min-height: 250px;
}

.ch-ArticleContent .fd-mock-side
{
  width: 23%;
  background: linear-gradient(180deg,#1e1b4b,#14123a);
  color: #c7d2fe;
  padding: 14px 10px;
}

.ch-ArticleContent .fd-mock-side div
{
  padding: 7px 9px;
  border-radius: 8px;
  margin-bottom: 4px;
}

.ch-ArticleContent .fd-mock-side div.on
{
  background: rgba(129,140,248,.25);
  color: #fff;
  box-shadow: inset 3px 0 0 #a5b4fc;
}

.ch-ArticleContent .fd-mock-main
{
  flex: 1;
  padding: 14px 16px;
  background: #f8f9fc;
}

.ch-ArticleContent .fd-mock-bar
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 750;
  color: #0b1220;
  font-size: 13.5px;
}

.ch-ArticleContent .fd-mock-bar span
{
  background: var(--fd-grad);
  color: #fff;
  border-radius: 8px;
  padding: 4px 11px;
  font-weight: 650;
  font-size: 11px;
}

.ch-ArticleContent .fd-mock-cols
{
  display: flex;
  gap: 10px;
}

.ch-ArticleContent .fd-mock-col
{
  flex: 1;
  background: #eef0fb;
  border-radius: 10px;
  padding: 9px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #4338ca;
}

.ch-ArticleContent .fd-mock-card
{
  background: #fff;
  border-radius: 7px;
  padding: 8px 9px;
  margin-top: 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(11,18,32,.03);
  font-weight: 550;
  color: #334155;
  letter-spacing: 0;
}

.ch-ArticleContent .fd-hot
{
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--fd-grad);
  color: #fff;
  font: 800 13px/26px Inter,sans-serif;
  text-align: center;
  cursor: pointer;
  animation: fd-pulse 2.2s infinite;
  z-index: 2;
  outline: none;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.ch-ArticleContent .fd-hot:hover,
.ch-ArticleContent .fd-hot:focus
{
  animation: none;
  transform: scale(1.12);
  z-index: 4;
  box-shadow: 0 0 0 6px rgba(124,58,237,.25);
}

@keyframes fd-pulse
{
  0%
  {
    box-shadow: 0 0 0 0 rgba(124,58,237,.55);
  }

  70%
  {
    box-shadow: 0 0 0 16px rgba(124,58,237,0);
  }

  100%
  {
    box-shadow: 0 0 0 0 rgba(124,58,237,0);
  }
}

.ch-ArticleContent .fd-pop
{
  position: absolute;
  left: 50%;
  top: 38px;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: rgba(11,18,32,.96);
  color: #cbd5e1;
  text-align: left;
  font: 400 13px/1.55 Inter,sans-serif;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s,transform .18s;
  z-index: 5;
}

.ch-ArticleContent .fd-pop::before
{
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  background: rgba(11,18,32,.96);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.ch-ArticleContent .fd-pop b
{
  color: #fff;
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
}

.ch-ArticleContent .fd-hot:hover .fd-pop,
.ch-ArticleContent .fd-hot:focus .fd-pop
{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* Glossary tooltips */
.ch-ArticleContent .fd-term
{
  background-image: linear-gradient(90deg,var(--fd-p) 50%,transparent 50%);
  background-size: 6px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  cursor: help;
  position: relative;
  color: var(--fd-t);
  outline: none;
  font-weight: 550;
}

.ch-ArticleContent .fd-term::after
{
  content: attr(data-tip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: rgba(11,18,32,.96);
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.5;
  padding: .65em .85em;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s,transform .18s;
  z-index: 6;
  font-weight: 400;
  text-align: left;
  pointer-events: none;
  box-shadow: 0 16px 30px -10px rgba(0,0,0,.4);
}

.ch-ArticleContent .fd-term:hover::after,
.ch-ArticleContent .fd-term:focus::after
{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* Timeline */
.ch-ArticleContent .fd-timeline
{
  position: relative;
  margin: 1.6em 0 1.6em .6em;
  padding-left: 2em;
}

.ch-ArticleContent .fd-timeline::before
{
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--fd-p),var(--fd-p2) 40%,var(--fd-b) 100%);
  border-radius: 2px;
}

.ch-ArticleContent .fd-timeline>div
{
  position: relative;
  margin-bottom: 2.2em;
  padding: 1.1em 1.4em;
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fd-sh);
}

.ch-ArticleContent .fd-timeline>div:first-child
{
  border-color: var(--fd-p-200);
  box-shadow: var(--fd-sh2);
}

.ch-ArticleContent .fd-timeline>div::before
{
  content: "";
  position: absolute;
  left: calc(-2em - 7px);
  top: 1.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--fd-p);
  box-shadow: 0 0 0 4px var(--fd-p-50);
}

.ch-ArticleContent .fd-timeline>div:first-child::before
{
  background: var(--fd-p);
}

.ch-ArticleContent .fd-timeline>div>:first-child
{
  margin-top: 0;
}

.ch-ArticleContent .fd-timeline h2
{
  margin-top: .2em;
  font-size: 1.35em;
}

.ch-ArticleContent .fd-timeline h2::before
{
  display: none;
}

.ch-ArticleContent .fd-date
{
  display: inline-block;
  font-size: .72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fd-p);
  background: var(--fd-p-50);
  padding: .2em .7em;
  border-radius: 999px;
}

/* API */
.ch-ArticleContent .fd-endpoint
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75em;
  padding: .75em 1.05em;
  border: 1px solid var(--fd-b);
  border-radius: 12px;
  background: #fff;
  font-family: var(--fd-mono);
  font-size: .88em;
  color: var(--fd-t);
  margin: 1em 0;
  box-shadow: var(--fd-sh);
}

.ch-ArticleContent .fd-endpoint .fd-badge
{
  font-family: Inter,sans-serif;
}

.ch-ArticleContent .fd-method
{
  font: 800 10.5px/1 var(--fd-mono);
  letter-spacing: .06em;
  padding: .5em .65em;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg,#10b981,#059669);
}

.ch-ArticleContent .fd-method--post
{
  background: linear-gradient(135deg,#3b82f6,#2563eb);
}

.ch-ArticleContent .fd-method--patch
{
  background: linear-gradient(135deg,#f59e0b,#d97706);
}

.ch-ArticleContent .fd-method--delete
{
  background: linear-gradient(135deg,#fb7185,#e11d48);
}

/* Prev / Next + footer */
.ch-ArticleContent .fd-pager
{
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin: 3em 0 1.2em;
}

.ch-ArticleContent .fd-pager a
{
  flex: 1 1 220px;
  display: block;
  padding: .95em 1.2em;
  border: 1px solid var(--fd-b);
  border-radius: 14px;
  font-weight: 650;
  background: #fff;
  box-shadow: var(--fd-sh);
  background-image: none!important;
  transition: all .2s;
}

.ch-ArticleContent .fd-pager a+a
{
  text-align: right;
}

.ch-ArticleContent .fd-pager a:hover
{
  border-color: var(--fd-p-200);
  text-decoration: none;
  box-shadow: var(--fd-sh2);
  transform: translateY(-2px);
}

.ch-ArticleContent .fd-footer
{
  margin-top: 1.2em;
  padding: 1.2em 1.4em;
  border-radius: 18px;
  background: linear-gradient(135deg,#f7f7ff,#fbf5fb);
  border: 1px solid var(--fd-b);
  font-size: .88em;
  color: var(--fd-mut);
}

.ch-ArticleContent .fd-feedback
{
  margin: 0;
}

.ch-ArticleContent .fd-feedback>p
{
  gap: .5em;
}

.ch-ArticleContent .fd-feedback>div
{
  box-shadow: none;
  margin-top: .6em;
}

/* ===== 3. MEDIA ===== */
.ch-ArticleContent .fd-hero-grid
{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5em;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ch-ArticleContent .fd-hero-art svg
{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 34px rgba(20,18,58,.45));
}

.ch-ArticleContent .fd-float
{
  animation: fd-float 6s ease-in-out infinite;
}

.ch-ArticleContent .fd-float2
{
  animation: fd-float 7s ease-in-out -2s infinite;
}

.ch-ArticleContent .fd-float3
{
  animation: fd-float 5s ease-in-out -1s infinite;
}

@keyframes fd-float
{
  0%,
100%
  {
    transform: translateY(0);
  }

  50%
  {
    transform: translateY(-8px);
  }
}

.ch-ArticleContent .fd-blink
{
  animation: fd-blink 2.4s ease-in-out infinite;
}

@keyframes fd-blink
{
  0%,
100%
  {
    opacity: .2;
  }

  50%
  {
    opacity: 1;
  }
}

.ch-ArticleContent .fd-grow
{
  transform-box: fill-box;
  transform-origin: left center;
  animation: fd-grow 4s ease-in-out infinite alternate;
}

@keyframes fd-grow
{
  0%
  {
    transform: scaleX(.2);
  }

  100%
  {
    transform: scaleX(1);
  }
}

.ch-ArticleContent .fd-pulse-ring
{
  transform-box: fill-box;
  transform-origin: center;
  animation: fd-ring 2.2s ease-out infinite;
}

@keyframes fd-ring
{
  0%
  {
    transform: scale(.8);
    opacity: .9;
  }

  100%
  {
    transform: scale(1.9);
    opacity: 0;
  }
}

.ch-ArticleContent .fd-figure
{
  margin: 1.8em 0;
  text-align: center;
}

.ch-ArticleContent .fd-zoom
{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ch-ArticleContent .fd-figure label
{
  display: block;
  cursor: zoom-in;
  position: relative;
  padding: 16px;
  border-radius: 22px;
  background: radial-gradient(80% 120% at 0% 0%,#ecebff,transparent 60%),radial-gradient(80% 120% at 100% 100%,#fdeaf4,transparent 60%),#f7f8fc;
}

.ch-ArticleContent .fd-figure label svg,
.ch-ArticleContent .fd-figure label img
{
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--fd-b);
  box-shadow: 0 24px 50px -26px rgba(30,27,75,.45);
  background: #fff;
  transition: transform .25s;
  display: block;
  margin: 0 auto;
}

.ch-ArticleContent .fd-figure label:hover svg,
.ch-ArticleContent .fd-figure label:hover img
{
  transform: translateY(-2px);
}

.ch-ArticleContent .fd-figure label::after
{
  content: "⤢  Click to enlarge";
  position: absolute;
  right: 26px;
  top: 26px;
  background: rgba(11,18,32,.8);
  color: #fff;
  font: 600 12px Inter,sans-serif;
  padding: .4em .85em;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s;
}

.ch-ArticleContent .fd-figure label:hover::after
{
  opacity: 1;
}

.ch-ArticleContent .fd-zoom:checked+label
{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(11,18,32,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  cursor: zoom-out;
  margin: 0;
  border-radius: 0;
}

.ch-ArticleContent .fd-zoom:checked+label svg,
.ch-ArticleContent .fd-zoom:checked+label img
{
  max-width: none;
  width: min(94vw,1100px);
  max-height: 92vh;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.ch-ArticleContent .fd-zoom:checked+label::after
{
  content: "✕  Click anywhere to close";
  opacity: 1;
  top: 16px;
  right: 16px;
}

.ch-ArticleContent .fd-figcap
{
  font-size: .86em;
  color: var(--fd-mut);
  margin: .85em auto 0;
  max-width: 72ch;
  line-height: 1.6;
}

.ch-ArticleContent .fd-figcap b
{
  color: var(--fd-t);
}

.ch-ArticleContent .fd-demo
{
  margin: 1.5em 0;
}

.ch-ArticleContent .fd-demo>input
{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ch-ArticleContent .fd-demo-bar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: .6em;
  font-size: .84em;
  color: var(--fd-mut);
}

.ch-ArticleContent .fd-demo-bar b
{
  color: var(--fd-t);
}

.ch-ArticleContent .fd-demo-bar .fd-live::before
{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: .5em;
  box-shadow: 0 0 0 3px rgba(239,68,68,.2);
  animation: fd-blink 1.4s infinite;
}

.ch-ArticleContent .fd-demo label.fd-pause-btn
{
  cursor: pointer;
  border: 1px solid var(--fd-b);
  border-radius: 10px;
  padding: .35em .95em;
  font-weight: 650;
  background: #fff;
  color: var(--fd-t);
  white-space: nowrap;
  box-shadow: var(--fd-sh);
}

.ch-ArticleContent .fd-demo label.fd-pause-btn:hover
{
  border-color: var(--fd-p-200);
  color: var(--fd-p);
}

.ch-ArticleContent .fd-demo label.fd-pause-btn::before
{
  content: "❚❚  Pause";
}

.ch-ArticleContent .fd-demo>input:checked~.fd-demo-bar label.fd-pause-btn::before
{
  content: "â–¶  Play";
}

.ch-ArticleContent .fd-demo>input:checked~div *,
.ch-ArticleContent .fd-demo>input:checked~div
{
  animation-play-state: paused!important;
}

.ch-ArticleContent .fd-demo .fd-anim:hover *
{
  animation-play-state: paused;
}

.ch-ArticleContent .fd-anim
{
  position: relative;
  border: 1px solid var(--fd-b);
  border-radius: 18px;
  background: radial-gradient(70% 120% at 100% 0%,#f3e8ff,transparent 60%),#f7f8fc;
  padding: 12px;
  box-shadow: var(--fd-sh2);
  overflow: hidden;
  font-family: Inter,sans-serif;
}

.ch-ArticleContent .fd-anim-cols
{
  display: flex;
  gap: 10px;
  height: 170px;
}

.ch-ArticleContent .fd-anim-col
{
  flex: 1;
  background: rgba(255,255,255,.7);
  border: 1px solid #e9eaf3;
  border-radius: 12px;
  padding: 9px;
  font: 700 10.5px/1.4 Inter,sans-serif;
  color: #4338ca;
  letter-spacing: .06em;
}

.ch-ArticleContent .fd-anim-col span
{
  display: block;
  height: 26px;
  background: #fff;
  border-radius: 7px;
  margin-top: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(11,18,32,.03);
}

.ch-ArticleContent .fd-anim-card
{
  position: absolute;
  top: 100px;
  left: 20px;
  width: calc((100% - 44px)/3 - 16px);
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  border-left: 4px solid var(--fd-p);
  padding: 7px 9px;
  font: 650 12px/1.3 Inter,sans-serif;
  color: #0b1220;
  box-shadow: 0 3px 8px rgba(11,18,32,.12);
  animation: fd-card 9s ease-in-out infinite;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-ArticleContent .fd-anim-card i
{
  font-style: normal;
  color: var(--fd-ok);
  opacity: 0;
  animation: fd-check 9s infinite;
}

@keyframes fd-card
{
  0%
  {
    left: 20px;
    opacity: 0;
    transform: scale(.9);
  }

  6%,
14%
  {
    left: 20px;
    opacity: 1;
    transform: none;
  }

  17%
  {
    left: 20px;
    transform: rotate(-3deg) scale(1.05);
    box-shadow: 0 16px 28px rgba(11,18,32,.22);
  }

  34%
  {
    left: calc(30px + (100% - 44px)/3);
    transform: rotate(-3deg) scale(1.05);
  }

  37%,
50%
  {
    left: calc(30px + (100% - 44px)/3);
    transform: none;
    box-shadow: 0 3px 8px rgba(11,18,32,.12);
  }

  53%
  {
    left: calc(30px + (100% - 44px)/3);
    transform: rotate(-3deg) scale(1.05);
    box-shadow: 0 16px 28px rgba(11,18,32,.22);
  }

  70%
  {
    left: calc(40px + 2*(100% - 44px)/3);
    transform: rotate(-3deg) scale(1.05);
    border-left-color: var(--fd-p);
  }

  73%,
92%
  {
    left: calc(40px + 2*(100% - 44px)/3);
    transform: none;
    opacity: 1;
    border-left-color: var(--fd-ok);
    box-shadow: 0 3px 8px rgba(11,18,32,.12);
  }

  100%
  {
    left: calc(40px + 2*(100% - 44px)/3);
    opacity: 0;
    border-left-color: var(--fd-ok);
  }
}

@keyframes fd-check
{
  0%,
72%
  {
    opacity: 0;
  }

  74%,
95%
  {
    opacity: 1;
  }

  100%
  {
    opacity: 0;
  }
}

.ch-ArticleContent .fd-anim-cursor
{
  position: absolute;
  width: 22px;
  height: 22px;
  top: 112px;
  left: 80px;
  z-index: 3;
  animation: fd-cursor 9s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}

@keyframes fd-cursor
{
  0%
  {
    left: 120px;
    top: 150px;
    opacity: 0;
  }

  8%
  {
    opacity: 1;
    left: 80px;
    top: 112px;
  }

  14%
  {
    left: 80px;
    transform: none;
  }

  16%
  {
    transform: scale(.8);
  }

  18%
  {
    transform: none;
  }

  34%
  {
    left: calc(90px + (100% - 44px)/3);
    top: 112px;
  }

  37%,
50%
  {
    left: calc(90px + (100% - 44px)/3);
  }

  51%
  {
    transform: scale(.8);
  }

  53%
  {
    transform: none;
  }

  70%,
73%
  {
    left: calc(100px + 2*(100% - 44px)/3);
    top: 112px;
    opacity: 1;
  }

  85%
  {
    left: calc(130px + 2*(100% - 44px)/3);
    top: 150px;
    opacity: 1;
  }

  100%
  {
    left: calc(130px + 2*(100% - 44px)/3);
    top: 150px;
    opacity: 0;
  }
}

.ch-ArticleContent .fd-anim-steps
{
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  margin: .75em 0 0;
}

.ch-ArticleContent .fd-anim-steps span
{
  flex: 1 1 150px;
  font-size: .83em;
  padding: .55em .85em;
  border-radius: 11px;
  border: 1px solid var(--fd-b);
  background: #fff;
  color: var(--fd-mut);
  line-height: 1.4;
}

.ch-ArticleContent .fd-anim-steps span b
{
  color: inherit;
}

.ch-ArticleContent .fd-anim-steps span:nth-child(1)
{
  animation: fd-st1 9s infinite;
}

.ch-ArticleContent .fd-anim-steps span:nth-child(2)
{
  animation: fd-st2 9s infinite;
}

.ch-ArticleContent .fd-anim-steps span:nth-child(3)
{
  animation: fd-st3 9s infinite;
}

@keyframes fd-st1
{
  0%,
33%
  {
    background: #f0f1ff;
    color: #3730a3;
    border-color: #c9ccff;
  }

  34%,
100%
  {
    background: #fff;
    color: #6b7488;
    border-color: #e7e9f0;
  }
}

@keyframes fd-st2
{
  0%,
33%
  {
    background: #fff;
    color: #6b7488;
    border-color: #e7e9f0;
  }

  34%,
70%
  {
    background: #f0f1ff;
    color: #3730a3;
    border-color: #c9ccff;
  }

  71%,
100%
  {
    background: #fff;
    color: #6b7488;
    border-color: #e7e9f0;
  }
}

@keyframes fd-st3
{
  0%,
70%
  {
    background: #fff;
    color: #6b7488;
    border-color: #e7e9f0;
  }

  71%,
100%
  {
    background: #effcf6;
    color: #065f46;
    border-color: #9ae6c4;
  }
}

.ch-ArticleContent .fd-ranim .fd-anim-cols
{
  height: 150px;
}

.ch-ArticleContent .fd-ranim .fd-anim-card
{
  width: calc((100% - 34px)/2 - 16px);
  top: 58px;
  animation: fd-rcard 8s ease-in-out infinite;
  overflow: visible;
}

@keyframes fd-rcard
{
  0%
  {
    left: 20px;
    opacity: 0;
  }

  5%,
15%
  {
    left: 20px;
    opacity: 1;
    transform: none;
  }

  18%
  {
    transform: rotate(-2deg) scale(1.04);
  }

  35%
  {
    left: calc(30px + (100% - 34px)/2);
    transform: rotate(-2deg) scale(1.04);
  }

  38%,
94%
  {
    left: calc(30px + (100% - 34px)/2);
    transform: none;
    opacity: 1;
  }

  100%
  {
    left: calc(30px + (100% - 34px)/2);
    opacity: 0;
  }
}

.ch-ArticleContent .fd-rbolt
{
  position: absolute;
  right: -8px;
  top: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fbbf24;
  text-align: center;
  line-height: 24px;
  font-size: 13px;
  box-shadow: 0 0 0 4px rgba(251,191,36,.3);
  animation: fd-rbolt 8s infinite;
  transform: scale(0);
}

@keyframes fd-rbolt
{
  0%,
38%
  {
    transform: scale(0);
  }

  43%
  {
    transform: scale(1.45);
  }

  47%,
94%
  {
    transform: scale(1);
  }

  100%
  {
    transform: scale(0);
  }
}

.ch-ArticleContent .fd-ravatar
{
  display: inline-block;
  margin-left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg,#c026d3,#7c3aed);
  color: #fff;
  font: 700 9px/20px Inter,sans-serif;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  animation: fd-ravatar 8s infinite;
}

@keyframes fd-ravatar
{
  0%,
47%
  {
    opacity: 0;
    transform: scale(.5);
  }

  52%,
94%
  {
    opacity: 1;
    transform: none;
  }

  100%
  {
    opacity: 0;
  }
}

.ch-ArticleContent .fd-rrule
{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-end;
}

.ch-ArticleContent .fd-rpill
{
  font: 600 11px/1.4 Inter,sans-serif;
  background: #fff;
  border: 1px solid var(--fd-b);
  border-radius: 999px;
  padding: 5px 11px;
  color: #475569;
  animation: fd-rpill 8s infinite;
}

@keyframes fd-rpill
{
  0%,
37%
  {
    background: #fff;
    border-color: #e7e9f0;
    color: #475569;
  }

  40%,
60%
  {
    background: #fff7e0;
    border-color: #fbbf24;
    color: #92400e;
  }

  64%,
100%
  {
    background: #fff;
    border-color: #e7e9f0;
    color: #475569;
  }
}

.ch-ArticleContent .fd-rtoast
{
  background: rgba(11,18,32,.95);
  color: #e2e8f0;
  border-radius: 12px;
  padding: 9px 13px;
  font: 500 11px/1.45 Inter,sans-serif;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(120%);
  animation: fd-rtoast 8s infinite;
  max-width: 250px;
  text-align: left;
}

.ch-ArticleContent .fd-rtoast b
{
  color: #fff;
}

@keyframes fd-rtoast
{
  0%,
55%
  {
    opacity: 0;
    transform: translateY(120%);
  }

  61%,
92%
  {
    opacity: 1;
    transform: none;
  }

  100%
  {
    opacity: 0;
    transform: none;
  }
}

.ch-ArticleContent .fd-video
{
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(210px,1fr);
  gap: 1em;
  margin: 1.5em 0;
  align-items: start;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg,#1e1b4b,#0b1220);
  box-shadow: 0 30px 60px -30px rgba(30,27,75,.8);
}

.ch-ArticleContent .fd-video-frame
{
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.ch-ArticleContent .fd-video-frame iframe,
.ch-ArticleContent .fd-video-frame video
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ch-ArticleContent .fd-chapters
{
  padding: .4em .2em;
}

.ch-ArticleContent .fd-chapters p
{
  margin: .3em .5em .7em;
  font-size: .7em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #a5b4fc;
}

.ch-ArticleContent .fd-chapters a
{
  display: flex;
  gap: .75em;
  align-items: center;
  padding: .6em .7em;
  border-radius: 10px;
  color: #e2e8f0!important;
  font-weight: 550;
  font-size: .9em;
  text-decoration: none!important;
  background-image: none!important;
  transition: background .15s;
}

.ch-ArticleContent .fd-chapters a:hover,
.ch-ArticleContent .fd-chapters a:focus
{
  background: rgba(255,255,255,.08);
}

.ch-ArticleContent .fd-chapters a span
{
  flex: none;
  font: 700 10.5px/1 var(--fd-mono);
  background: rgba(165,180,252,.18);
  color: #c7d2fe;
  border-radius: 6px;
  padding: .45em .55em;
}

.ch-ArticleContent .fd-chapters a.fd-yt
{
  margin-top: .5em;
  color: #a5b4fc!important;
  font-size: .82em;
}

.ch-ArticleContent .fd-dash
{
  stroke-dasharray: 6 6;
  animation: fd-dash 1.2s linear infinite;
}

@keyframes fd-dash
{
  to
  {
    stroke-dashoffset: -24;
  }
}

@media (max-width:760px)
{
  .ch-ArticleContent .fd-hero-grid
  {
    grid-template-columns: 1fr;
  }

  .ch-ArticleContent .fd-hero-art
  {
    display: none;
  }

  .ch-ArticleContent .fd-video
  {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px)
{
  .ch-ArticleContent .fd-hero
  {
    padding: 1.7em 1.4em;
  }

  .ch-ArticleContent .fd-hero p.fd-hero-title
  {
    font-size: 1.7em;
  }

  .ch-ArticleContent .fd-flow>div::after,
.ch-ArticleContent .fd-flow>div::before
  {
    display: none;
  }

  .ch-ArticleContent .fd-mock-side
  {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce)
{
  .ch-ArticleContent .fd-anim *,
.ch-ArticleContent .fd-anim-steps span,
.ch-ArticleContent .fd-float,
.ch-ArticleContent .fd-float2,
.ch-ArticleContent .fd-float3,
.ch-ArticleContent .fd-blink,
.ch-ArticleContent .fd-grow,
.ch-ArticleContent .fd-pulse-ring,
.ch-ArticleContent .fd-dash,
.ch-ArticleContent .fd-hot
  {
    animation: none!important;
  }

  .ch-ArticleContent .fd-anim-card i,
.ch-ArticleContent .fd-rbolt,
.ch-ArticleContent .fd-ravatar,
.ch-ArticleContent .fd-rtoast
  {
    opacity: 1!important;
    transform: none!important;
  }
}

@media print
{
  .ch-ArticleContent .nonPrintable,
.ch-ArticleContent .fd-feedback,
.ch-ArticleContent .fd-copy,
.ch-ArticleContent .fd-hot,
.ch-ArticleContent .fd-demo-bar,
.ch-ArticleContent .fd-video-frame
  {
    display: none!important;
  }

  .ch-ArticleContent .fd-switch>div
  {
    display: block!important;
    box-shadow: none;
  }

  .ch-ArticleContent .fd-hero
  {
    background: none!important;
    color: #000;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .ch-ArticleContent .fd-hero p,
.ch-ArticleContent .fd-hero p.fd-hero-title
  {
    color: #000;
  }

  .ch-ArticleContent pre
  {
    white-space: pre-wrap;
  }

  .ch-ArticleContent *
  {
    animation: none!important;
  }
}