.cf-article {
--cf-bg: #0b0b10;
--cf-bg-2: #11111a;
--cf-card: rgba(255, 255, 255, 0.06);
--cf-card-2: rgba(255, 255, 255, 0.08);
--cf-text: rgba(255, 255, 255, 0.90);
--cf-text-2: rgba(255, 255, 255, 0.72);
--cf-muted: rgba(255, 255, 255, 0.60);
--cf-border: rgba(255, 0, 255, 0.35);
--cf-border-2: rgba(167, 81, 253, 0.35);
--cf-magenta: #ff00ff;
--cf-purple: #A751FD;
--cf-deep: #9900ff;
--cf-hot: #EF60CF;
--cf-neon: #EF56D2;
--cf-warn: #E9152F;
--cf-ok: #27d07d;
font-family: Helvetica, Arial, sans-serif;
color: var(--cf-text);

background: radial-gradient(1200px 800px at 20% 0%, rgba(167, 81, 253, 0.22), transparent
55%),
radial-gradient(900px 600px at 85% 20%, rgba(255, 0, 255, 0.18), transparent 58%),
linear-gradient(180deg, #07070c 0%, var(--cf-bg) 40%, #07070c 100%);
border: 1px solid rgba(255, 0, 255, 0.22);
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
padding: clamp(18px, 3vw, 34px);
margin: 0 auto;
max-width: 920px;
line-height: 1.55;
}
.cf-article * { box-sizing: border-box; }
.cf-container {
width: 100%;
display: block;
}
.cf-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 0, 255, 0.28);
border-radius: 999px;
color: var(--cf-text-2);
font-size: 13px;
letter-spacing: 0.2px;
}
.cf-kicker-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, #fff 0%, var(--cf-magenta) 40%, rgba(255, 0,
255, 0.2) 70%);
box-shadow: 0 0 0 4px rgba(255, 0, 255, 0.12);
}
.cf-title {
margin: 14px 0 10px 0;

font-size: clamp(28px, 4vw, 44px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.6px;
color: #fff;
text-shadow: 0px 2px 12px rgba(255, 0, 255, 0.22);
}
.cf-subtitle {
margin: 0 0 18px 0;
font-size: clamp(15px, 1.6vw, 18px);
color: var(--cf-text-2);
max-width: 70ch;
}
.cf-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 22px 0;
}
.cf-pill {
font-size: 13px;
color: var(--cf-text-2);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(167, 81, 253, 0.26);
padding: 8px 12px;
border-radius: 999px;
}
.cf-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.cf-card {
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
border-top: 1px solid rgba(167, 81, 253, 0.35);
border-right: 10px solid rgba(255, 0, 255, 0.55);
border-left: 4px solid rgba(255, 0, 255, 0.40);
border-bottom: 1px solid rgba(255, 0, 255, 0.25);
border-radius: 14px;

box-shadow: 0 12px 26px rgba(0,0,0,0.40);
padding: clamp(14px, 2.2vw, 18px);
}
.cf-card-title {
font-size: 18px;
font-weight: 800;
margin: 0 0 8px 0;
color: #fff;
}
.cf-card-text {
margin: 0;
color: var(--cf-text-2);
}
.cf-toc {
padding: 0;
margin: 12px 0 0 0;
list-style: none;
display: grid;
gap: 8px;
}
.cf-toc a {
color: var(--cf-magenta);
text-decoration: none;
border-bottom: 1px dashed rgba(255, 0, 255, 0.35);
padding-bottom: 2px;
transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cf-toc a:hover {
color: #f7b0ec;
border-color: rgba(247, 176, 236, 0.55);
}
.cf-section {
margin-top: 18px;
}
.cf-h2 {
margin: 22px 0 10px 0;
font-size: clamp(20px, 2.8vw, 28px);
font-weight: 900;

color: #fff;
text-shadow: 0px 2px 10px rgba(167, 81, 253, 0.18);
}
.cf-h3 {
margin: 18px 0 8px 0;
font-size: clamp(16px, 2.2vw, 20px);
font-weight: 800;
color: #fff;
}
.cf-p {
margin: 10px 0;
color: var(--cf-text);
}
.cf-small {
margin: 10px 0 0 0;
color: var(--cf-muted);
font-size: 13px;
}
.cf-list {
margin: 10px 0 10px 0;
padding-left: 18px;
color: var(--cf-text-2);
}
.cf-list li { margin: 8px 0; }
.cf-quote {
margin: 12px 0;
padding: 14px 14px;
border-left: 4px solid rgba(239, 96, 207, 0.80);
background: rgba(239, 96, 207, 0.08);
border-radius: 12px;
color: rgba(255,255,255,0.86);
}
.cf-note {
margin: 12px 0;
padding: 12px 14px;
border: 1px solid rgba(167, 81, 253, 0.35);
background: rgba(167, 81, 253, 0.10);
border-radius: 12px;

color: rgba(255,255,255,0.86);
}
.cf-warning {
margin: 12px 0;
padding: 12px 14px;
border: 1px solid rgba(233, 21, 47, 0.55);
background: rgba(233, 21, 47, 0.10);
border-radius: 12px;
color: rgba(255,255,255,0.90);
}
.cf-hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.55), rgba(167, 81, 253,
0.55), transparent);
margin: 20px 0;
}
.cf-codebox {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 0, 255, 0.28);
border-radius: 12px;
padding: 14px;
overflow-x: auto;
}
.cf-pre {
margin: 0;
white-space: pre-wrap;
color: rgba(255, 255, 255, 0.88);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
monospace;
font-size: 13px;
line-height: 1.55;
}
.cf-btnrow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}

.cf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
color: #000;
font-weight: 800;
background: linear-gradient(180deg, #ffffff 0%, #ff99ff 100%);
border: 3px double #E62BC1;
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.35);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.cf-btn:hover {
transform: translateY(-1px);
filter: brightness(1.03);
box-shadow: 0px 1px 1px rgba(255,255,255,0.25) inset, 1px 1px 10px rgba(0,0,0,0.55);
}
.cf-btn:active {
transform: translateY(0px);
box-shadow: 1px 1px 2px rgba(0,0,0,0.65) inset;
}
.cf-link {
color: var(--cf-magenta);
text-decoration: none;
border-bottom: 1px dashed rgba(255, 0, 255, 0.35);
transition: color 0.25s ease, border-color 0.25s ease;
}
.cf-link:hover {
color: #f7b0ec;
border-color: rgba(247, 176, 236, 0.55);
}
.cf-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(239, 86, 210, 0.45);

background: rgba(239, 86, 210, 0.12);
color: rgba(255,255,255,0.86);
font-size: 13px;
}
.cf-table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255, 0, 255, 0.22);
background: rgba(255,255,255,0.04);
}
.cf-table th,
.cf-table td {
padding: 12px 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
vertical-align: top;
text-align: left;
}
.cf-table th {
color: #fff;
font-weight: 900;
background: rgba(255, 0, 255, 0.10);
}
.cf-table td { color: var(--cf-text-2); }
.cf-faq details {
border: 1px solid rgba(167, 81, 253, 0.28);
background: rgba(167, 81, 253, 0.10);
border-radius: 12px;
padding: 12px 14px;
margin: 10px 0;
}
.cf-faq summary {
cursor: pointer;
font-weight: 900;
color: #fff;
}
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq p { margin: 10px 0 0 0; color: rgba(255,255,255,0.84); }
.cf-focus {
outline: none;

}
.cf-focus:focus-visible {
box-shadow: 0 0 0 4px rgba(204, 153, 255, 0.35);
border-radius: 10px;
}
@media (max-width: 802px) {
.cf-article { padding: 18px; border-radius: 14px; }
.cf-btn { width: 100%; }
.cf-meta { gap: 8px; }
}