.cf-article{
--cf-bg0:#07060b;
--cf-bg1:#0c0714;
--cf-card:#100b1f;
--cf-card2:#0f0a1a;
--cf-text:#f4f2ff;
--cf-muted:rgba(244,242,255,.72);
--cf-faint:rgba(244,242,255,.55);
--cf-line:rgba(255,0,255,.22);
--cf-line2:rgba(167,81,253,.22);
--cf-magenta:#ff00ff;
--cf-purple:#A751FD;
--cf-hot:#EF60CF;
--cf-shadow:0 14px 40px rgba(0,0,0,.55);
--cf-radius:16px;
--cf-radius2:22px;
--cf-max:860px;
font-family: Helvetica, Arial, sans-serif;
color:var(--cf-text);
background: radial-gradient(1200px 700px at 10% -10%, rgba(255,0,255,.18), transparent
55%),

radial-gradient(900px 600px at 90% 0%, rgba(167,81,253,.18), transparent 50%),
linear-gradient(180deg, var(--cf-bg0), var(--cf-bg1));
padding: clamp(18px, 3vw, 34px);
line-height: 1.55;
}
.cf-article *{ box-sizing:border-box; }
.cf-article a{ color: var(--cf-magenta); text-decoration: none; }
.cf-article a:hover{ color:#f7b0ec; text-decoration: underline; }
.cf-article a:focus-visible,
.cf-article button:focus-visible{
outline:none;
box-shadow: 0 0 0 3px rgba(204,153,255,.55);
border-radius: 10px;
}
.cf-article .cf-container{
max-width: var(--cf-max);
margin: 0 auto;
}
.cf-article .cf-hero{
border: 1px solid rgba(255,0,255,.28);
border-top: 1px solid rgba(167,81,253,.35);
border-left: 1px solid rgba(167,81,253,.35);
border-right: 1px solid rgba(255,0,255,.35);
border-bottom: 1px solid rgba(255,0,255,.28);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadow: var(--cf-shadow);
border-radius: var(--cf-radius2);
padding: clamp(18px, 3vw, 28px);
overflow: hidden;
position: relative;
}
.cf-article .cf-hero:before{
content:"";
position:absolute;
inset:-2px;
background: radial-gradient(900px 350px at 30% 0%, rgba(255,0,255,.16), transparent 70%),
radial-gradient(900px 350px at 70% 0%, rgba(167,81,253,.14), transparent 65%);
pointer-events:none;
}

.cf-article .cf-hero > *{ position: relative; }
.cf-article .cf-kicker{
display:inline-flex;
gap:10px;
align-items:center;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cf-muted);
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(255,0,255,.25);
background: rgba(16,11,31,.65);
}
.cf-article .cf-kicker .cf-dot{
width:8px; height:8px;
border-radius:999px;
background: var(--cf-magenta);
box-shadow: 0 0 18px rgba(255,0,255,.55);
}
.cf-article h1{
margin: 14px 0 10px;
font-size: clamp(28px, 4.4vw, 44px);
line-height: 1.12;
letter-spacing: -0.02em;
text-shadow: 0px 2px 10px rgba(255,0,153,.35);
}
.cf-article .cf-subhead{
margin: 0;
font-size: clamp(15px, 2vw, 18px);
color: var(--cf-muted);
max-width: 70ch;
}
.cf-article .cf-meta{
margin-top: 16px;
display:flex;
flex-wrap:wrap;
gap:10px;
color: var(--cf-faint);

font-size: 13px;
}
.cf-article .cf-chip{
display:inline-flex;
align-items:center;
gap:8px;
border-radius:999px;
border: 1px solid rgba(167,81,253,.22);
background: rgba(16,11,31,.55);
padding: 8px 12px;
}
.cf-article .cf-chip b{
color: var(--cf-text);
font-weight: 700;
}
.cf-article .cf-grid{
display:grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
.cf-article .cf-card{
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border: 1px solid rgba(255,0,255,.20);
border-right: 8px solid rgba(255,0,255,.45);
border-left: 3px solid rgba(255,0,255,.35);
border-radius: var(--cf-radius);
box-shadow: 0 10px 22px rgba(0,0,0,.4);
padding: 16px;
}
.cf-article .cf-card h2,
.cf-article .cf-card h3{
margin: 0 0 10px;
line-height: 1.2;
}
.cf-article h2{
margin: 26px 0 10px;
font-size: clamp(20px, 3vw, 28px);

letter-spacing: -0.01em;
}
.cf-article h3{
margin: 20px 0 10px;
font-size: clamp(17px, 2.3vw, 20px);
}
.cf-article p{ margin: 12px 0; color: var(--cf-text); }
.cf-article .cf-muted{ color: var(--cf-muted); }
.cf-article .cf-faint{ color: var(--cf-faint); }
.cf-article .cf-toc{
margin-top: 16px;
padding: 14px;
background: rgba(16,11,31,.55);
border: 1px solid rgba(167,81,253,.24);
border-radius: var(--cf-radius);
}
.cf-article .cf-toc ol{
margin: 10px 0 0;
padding-left: 18px;
color: var(--cf-muted);
}
.cf-article .cf-toc li{ margin: 6px 0; }
.cf-article .cf-toc a{ color: var(--cf-hot); }
.cf-article .cf-toc a:hover{ color: var(--cf-magenta); }
.cf-article .cf-callout{
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border: 1px solid rgba(255,0,255,.22);
border-radius: var(--cf-radius);
padding: 14px 14px 12px;
box-shadow: 0 10px 18px rgba(0,0,0,.35);
margin: 14px 0;
}
.cf-article .cf-callout .cf-callout-title{
display:flex;
align-items:center;
gap:10px;
font-weight: 800;
letter-spacing: .01em;
margin-bottom: 6px;

}
.cf-article .cf-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 24px;
width: auto; height: 24px;
padding: 0px 5px;
border-radius: 8px;
background: rgba(255,0,255,.20);
border: 1px solid rgba(255,0,255,.35);
color: var(--cf-text);
}
.cf-article .cf-steps{
counter-reset: cf-step;
display:grid;
gap: 12px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.cf-article .cf-step{
background: rgba(16,11,31,.55);
border: 1px solid rgba(255,0,255,.18);
border-radius: var(--cf-radius);
padding: 14px 14px 12px;
position: relative;
}
.cf-article .cf-step:before{
counter-increment: cf-step;
content: counter(cf-step);
position:absolute;
top: 12px;
right: 12px;
width: 30px; height: 30px;
border-radius: 10px;
display:flex;
align-items:center;
justify-content:center;
font-weight: 900;

color: rgba(255,255,255,.92);
background: linear-gradient(180deg, rgba(255,0,255,.35), rgba(167,81,253,.25));
border: 1px solid rgba(255,0,255,.28);
}
.cf-article .cf-step h3{ margin: 0 0 8px; }
.cf-article ul, .cf-article ol{ color: var(--cf-muted); }
.cf-article li{ margin: 6px 0; }
.cf-article .cf-divider{
height:1px;
margin: 26px 0;
background: linear-gradient(90deg, transparent, rgba(255,0,255,.35), rgba(167,81,253,.30),
transparent);
}
.cf-article .cf-script{
background: rgba(8,6,12,.65);
border: 1px solid rgba(167,81,253,.25);
border-radius: var(--cf-radius);
padding: 14px;
overflow:auto;
}
.cf-article .cf-script pre{
margin: 0;
white-space: pre-wrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
font-size: 13px;
line-height: 1.45;
color: rgba(244,242,255,.9);
}
.cf-article details{
border: 1px solid rgba(255,0,255,.18);
background: rgba(16,11,31,.50);
border-radius: var(--cf-radius);
padding: 12px 14px;
margin: 10px 0;
}
.cf-article summary{
cursor: pointer;
font-weight: 800;
color: var(--cf-text);

}
.cf-article details p{ color: var(--cf-muted); }
.cf-article .cf-related{
display:grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 12px;
}
.cf-article .cf-related a{
display:flex;
justify-content:space-between;
align-items:center;
gap: 12px;
padding: 12px 14px;
background: rgba(16,11,31,.55);
border: 1px solid rgba(167,81,253,.22);
border-radius: 14px;
text-decoration:none;
}
.cf-article .cf-related a span{
color: var(--cf-muted);
font-size: 13px;
}
.cf-article .cf-related a strong{
color: var(--cf-text);
font-size: 14px;
}
.cf-article .cf-related a:hover{
border-color: rgba(255,0,255,.35);
box-shadow: 0 0 0 3px rgba(255,0,255,.10);
text-decoration:none;
}
.cf-article .cf-cta{
margin-top: 18px;
padding: 16px;
border-radius: var(--cf-radius2);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,0,255,.22);

box-shadow: var(--cf-shadow);
}
.cf-article .cf-cta h3{ margin: 0 0 8px; }
.cf-article .cf-cta p{ margin: 8px 0 0; color: var(--cf-muted); }
@media (min-width: 802px){
.cf-article .cf-grid{ gap: 18px; }
.cf-article .cf-card{ padding: 18px; }
}