.cf-article{
--cf-bg0:#0b0612;
--cf-bg1:#140a22;
--cf-card:#130a1f;
--cf-card2:#0f081a;
--cf-text:#f2e9ff;
--cf-muted:#cbb7ea;
--cf-soft:#9e85c9;
--cf-line:rgba(255,0,255,.28);
--cf-line2:rgba(167,81,253,.32);
--cf-pink:#ff00ff;
--cf-pink2:#ff99ff;
--cf-purple:#A751FD;
--cf-purple2:#9900ff;
--cf-green:#3dff9a;
--cf-red:#ff4d6d;
--cf-gold:#ffd6ff;
color:var(--cf-text);
font-family: Helvetica, Arial, sans-serif;

background:
radial-gradient(1200px 900px at 20% 0%, rgba(167,81,253,.22), transparent 55%),
radial-gradient(900px 700px at 85% 15%, rgba(255,0,255,.16), transparent 55%),
linear-gradient(180deg, var(--cf-bg0), var(--cf-bg1));
padding: clamp(14px, 2.4vw, 26px);
line-height: 1.55;
}
.cf-article *{ box-sizing:border-box; }
.cf-article img{ max-width:100%; height:auto; border-radius:12px; display:block; }
.cf-article a{
color: var(--cf-pink2);
text-decoration: none;
border-bottom: 1px dotted rgba(255,153,255,.55);
transition: all .25s ease-in-out;
}
.cf-article a:hover{
color: #ffffff;
border-bottom-color: rgba(255,255,255,.65);
text-shadow: 0 0 10px rgba(255,0,255,.28);
}
.cf-article a:focus{
outline: none;
box-shadow: 0 0 0 3px rgba(167,81,253,.25), 0 0 0 6px rgba(255,0,255,.18);
border-radius: 8px;
padding: 0 2px;
}
.cf-article .cf-shell{
max-width: 920px;
margin: 0 auto;
}
.cf-article .cf-hero{
border: 1px solid var(--cf-line);
border-top: 1px solid var(--cf-line2);
border-left: 1px solid var(--cf-line2);
border-right: 1px solid var(--cf-line);
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
radial-gradient(900px 240px at 20% 0%, rgba(255,0,255,.18), transparent 60%),
radial-gradient(900px 240px at 80% 0%, rgba(167,81,253,.22), transparent 60%),
rgba(19,10,31,.75);

box-shadow: 0 10px 28px rgba(0,0,0,.45);
border-radius: 18px;
padding: clamp(16px, 3vw, 28px);
position: relative;
overflow: hidden;
}
.cf-article .cf-hero:before{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(600px 200px at 20% 10%, rgba(255,0,255,.18), transparent 60%),
radial-gradient(600px 200px at 80% 0%, rgba(167,81,253,.20), transparent 60%);
filter: blur(10px);
opacity: .8;
pointer-events:none;
}
.cf-article .cf-hero > *{ position:relative; }
.cf-article .cf-eyebrow{
display:inline-flex;
gap:10px;
align-items:center;
padding: 8px 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,0,255,.26);
border-radius: 999px;
color: var(--cf-muted);
font-size: 13px;
letter-spacing: .2px;
}
.cf-article .cf-dot{
width:10px; height:10px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, #fff, var(--cf-pink));
box-shadow: 0 0 14px rgba(255,0,255,.35);
flex: 0 0 auto;
}
.cf-article h1{
margin: 14px 0 10px;
font-size: clamp(28px, 3.6vw, 46px);

line-height: 1.08;
color: #ffffff;
text-shadow: 0px 2px 10px rgba(255,0,153,.25);
letter-spacing: -0.3px;
}
.cf-article .cf-lede{
margin: 0;
color: var(--cf-muted);
font-size: clamp(15px, 1.3vw, 18px);
max-width: 68ch;
}
.cf-article .cf-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top: 14px;
color: var(--cf-soft);
font-size: 13px;
}
.cf-article .cf-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(167,81,253,.28);
}
.cf-article .cf-grid{
display:grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 16px;
}
.cf-article .cf-card{
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
rgba(19,10,31,.55);
border: 1px solid rgba(255,0,255,.22);

border-top: 1px solid rgba(167,81,253,.30);
border-radius: 16px;
box-shadow: 0 10px 22px rgba(0,0,0,.35);
padding: clamp(14px, 2.3vw, 20px);
}
.cf-article h2{
margin: 24px 0 10px;
font-size: clamp(20px, 2.2vw, 28px);
color: #fff;
text-shadow: 0 0 12px rgba(167,81,253,.18);
}
.cf-article h3{
margin: 18px 0 8px;
font-size: clamp(17px, 1.6vw, 22px);
color: #fff;
}
.cf-article p{ margin: 10px 0; color: var(--cf-text); }
.cf-article .cf-muted{ color: var(--cf-muted); }
.cf-article .cf-small{ font-size: 13px; color: var(--cf-soft); }
.cf-article .cf-toc{
margin-top: 16px;
padding: 0;
list-style: none;
display:grid;
gap: 8px;
}
.cf-article .cf-toc a{
display:flex;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,0,255,.18);
}
.cf-article .cf-toc a:hover{
background: rgba(255,255,255,.06);
border-color: rgba(255,0,255,.35);
}
.cf-article .cf-toc span{ color: var(--cf-muted); font-size: 12px; }
.cf-article .cf-callout{

border-radius: 16px;
padding: 16px;
background:
radial-gradient(800px 220px at 0% 0%, rgba(255,0,255,.18), transparent 55%),
radial-gradient(800px 220px at 100% 0%, rgba(167,81,253,.20), transparent 55%),
rgba(15,8,26,.75);
border: 1px solid rgba(255,0,255,.26);
box-shadow: 0 12px 26px rgba(0,0,0,.35);
margin: 14px 0;
}
.cf-article .cf-callout strong{
color:#fff;
text-shadow: 0 0 10px rgba(255,0,255,.22);
}
.cf-article .cf-steps{
display:grid;
gap: 10px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.cf-article .cf-step{
display:flex;
gap: 12px;
padding: 12px 12px;
border-radius: 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(167,81,253,.22);
}
.cf-article .cf-step .cf-num{
width: 34px;
height: 34px;
border-radius: 12px;
display:grid;
place-items:center;
color:#000;
background: linear-gradient(180deg, #ffffff, var(--cf-pink2));
border: 1px solid rgba(255,0,255,.35);
box-shadow: 0 8px 18px rgba(0,0,0,.35);
flex: 0 0 auto;
font-weight: 700;
}
.cf-article .cf-step p{ margin: 0; color: var(--cf-muted); }

.cf-article .cf-codebox{
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,0,255,.22);
border-radius: 14px;
padding: 14px;
margin: 12px 0;
overflow-x:auto;
}
.cf-article .cf-codebox code{
color: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
monospace;
font-size: 13px;
white-space: pre;
}
.cf-article .cf-cols{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0;
}
.cf-article .cf-mini{
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,0,255,.18);
border-radius: 14px;
padding: 14px;
}
.cf-article .cf-mini h4{
margin: 0 0 8px;
font-size: 14px;
color: #fff;
letter-spacing: .2px;
}
.cf-article .cf-list{
margin: 0;
padding-left: 18px;
color: var(--cf-muted);
}
.cf-article .cf-list li{ margin: 6px 0; }
.cf-article .cf-badge{

display:inline-flex;
align-items:center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,0,255,.22);
background: rgba(255,255,255,.03);
color: var(--cf-muted);
font-size: 13px;
}
.cf-article .cf-badge i{
width: 10px; height: 10px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, var(--cf-purple));
box-shadow: 0 0 14px rgba(167,81,253,.35);
display:inline-block;
}
.cf-article details{
border: 1px solid rgba(167,81,253,.22);
background: rgba(255,255,255,.03);
border-radius: 14px;
padding: 12px 12px;
margin: 10px 0;
}
.cf-article summary{
cursor: pointer;
color: #fff;
font-weight: 700;
list-style: none;
}
.cf-article summary::-webkit-details-marker{ display:none; }
.cf-article details[open]{
border-color: rgba(255,0,255,.30);
background: rgba(255,255,255,.05);
}
.cf-article .cf-cta{
display:grid;
gap: 10px;
border-radius: 18px;
padding: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
radial-gradient(900px 280px at 15% 0%, rgba(255,0,255,.20), transparent 55%),

radial-gradient(900px 280px at 85% 0%, rgba(167,81,253,.20), transparent 55%),
rgba(19,10,31,.70);
border: 1px solid rgba(255,0,255,.28);
box-shadow: 0 14px 34px rgba(0,0,0,.45);
margin: 18px 0 0;
}
.cf-article .cf-btnrow{
display:flex;
flex-wrap:wrap;
gap: 10px;
align-items:center;
margin-top: 6px;
}
.cf-article .cf-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255,0,255,.30);
background: linear-gradient(180deg, #ffffff, var(--cf-pink2));
color: #000;
font-weight: 700;
box-shadow: 0 10px 18px rgba(0,0,0,.35);
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, background .2s
ease-in-out;
text-decoration: none;
}
.cf-article .cf-btn:hover{
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(0,0,0,.45);
background: linear-gradient(180deg, #ffffff, rgba(167,81,253,.55));
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
}
.cf-article .cf-btn:active{
transform: translateY(0px);
box-shadow: 0 10px 18px rgba(0,0,0,.35) inset;
}
.cf-article .cf-btnsecondary{
background: rgba(255,255,255,.04);
border: 1px solid rgba(167,81,253,.35);

color: #fff;
box-shadow: none;
}
.cf-article .cf-btnsecondary:hover{
background: rgba(190,126,253,.45);
border-color: rgba(255,0,255,.35);
}
.cf-article .cf-divider{
height:1px;
background: linear-gradient(90deg, transparent, rgba(255,0,255,.35), rgba(167,81,253,.35),
transparent);
margin: 20px 0;
}
.cf-article .cf-footnotes{
color: var(--cf-soft);
font-size: 13px;
}
@media (max-width: 802px){
.cf-article{ padding: 14px; }
.cf-article .cf-cols{ grid-template-columns: 1fr; }
.cf-article .cf-hero{ border-radius: 16px; }
}