.cf-article{
--cf-bg0: #07040d;
--cf-bg1: #0b0612;
--cf-bg2: #12081d;
--cf-card: rgba(255,255,255,.04);
--cf-text: rgba(255,255,255,.92);
--cf-muted: rgba(255,255,255,.72);
--cf-muted2: rgba(255,255,255,.60);
--cf-accent: #ff00ff;
--cf-accent2: #A751FD;
--cf-accent3: #EF60CF;
--cf-good: rgba(99, 245, 173, .95);
--cf-warn: rgba(255, 192, 92, .95);
--cf-bad: rgba(255, 109, 109, .95);
--cf-shadow: 0 18px 46px rgba(0,0,0,.50);
--cf-shadow2: 0 10px 26px rgba(0,0,0,.40);
--cf-radius: 16px;
--cf-radius2: 12px;
--cf-radius3: 10px;
--cf-maxw: 920px;
--cf-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--cf-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple
Color Emoji","Segoe UI Emoji";
font-family: var(--cf-sans);
color: var(--cf-text);
background:
radial-gradient(900px 520px at 18% -5%, rgba(255,0,255,.20), transparent 55%),

radial-gradient(700px 460px at 92% 6%, rgba(167,81,253,.22), transparent 60%),
linear-gradient(180deg, var(--cf-bg1), var(--cf-bg0) 60%, var(--cf-bg2));
min-height: 100vh;
position: relative;
overflow-x: clip;
}
.cf-article *{ box-sizing: border-box; }
.cf-article a{ color: var(--cf-accent); text-decoration: none; }
.cf-article a:hover{ color: #f7b0ec; text-decoration: underline; }
.cf-article a:focus{ outline: 2px solid rgba(204,153,255,.85); outline-offset: 3px; border-radius:
8px; }
.cf-article .cf-skipLink{
position:absolute;
top:-60px;
left:12px;
padding:10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: var(--cf-text);
z-index:9999;
transition: top .2s ease;
}
.cf-article .cf-skipLink:focus{ top:12px; }
.cf-article .cf-topbar{
position: sticky;
top:0;
z-index: 50;
backdrop-filter: blur(12px);
background: rgba(0,0,0,.35);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.cf-article .cf-topbarInner{
max-width: var(--cf-maxw);
margin: 0 auto;
padding: 12px 14px;
display:flex;
align-items:center;
gap: 10px;
justify-content: space-between;

}
.cf-article .cf-brand{
display:flex;
align-items:center;
gap:10px;
min-width: 0;
}
.cf-article .cf-logo{
width:34px;
height:34px;
border-radius: 12px;
background:
radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.55), transparent 70%),
linear-gradient(135deg, rgba(255,0,255,.95), rgba(167,81,253,.95));
box-shadow: var(--cf-shadow2);
border: 1px solid rgba(255,255,255,.18);
flex: 0 0 auto;
}
.cf-article .cf-brandTitle{
display:flex;
flex-direction:column;
line-height:1.1;
min-width: 0;
}
.cf-article .cf-brandTitle strong{
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.86);
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.cf-article .cf-brandTitle span{
font-size: 12px;
color: var(--cf-muted);
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.cf-article .cf-tools{
display:flex;
align-items:center;

gap: 10px;
flex: 0 0 auto;
}
.cf-article .cf-chip{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.85);
font-size: 12px;
white-space: nowrap;
}
.cf-article .cf-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent2));
box-shadow: 0 0 0 4px rgba(255,0,255,.12);
flex: 0 0 auto;
}
.cf-article .cf-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: var(--cf-text);
font-size: 13px;
cursor:pointer;
transition: transform .15s ease, background .2s ease, border-color .2s ease;
user-select: none;
}
.cf-article .cf-btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
border-color: rgba(255,0,255,.30);

}
.cf-article .cf-btn:active{ transform: translateY(0px); }
.cf-article .cf-btnPrimary{
background: linear-gradient(135deg, rgba(255,0,255,.95), rgba(167,81,253,.95));
border: 1px solid rgba(255,255,255,.20);
color: #0b0612;
font-weight: 700;
box-shadow: var(--cf-shadow2);
}
.cf-article .cf-btnPrimary:hover{ filter: brightness(1.05); }
.cf-article .cf-progress{
height: 2px;
width: 100%;
background: rgba(255,255,255,.10);
position: relative;
overflow: hidden;
}
.cf-article .cf-progress > span{
position:absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent2));
box-shadow: 0 0 12px rgba(255,0,255,.25);
transition: width .08s linear;
}
.cf-article .cf-page{
max-width: var(--cf-maxw);
margin: 0 auto;
padding: 18px 14px 64px;
}
.cf-article .cf-hero{
border-radius: var(--cf-radius);
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.30));
border: 1px solid rgba(255,255,255,.10);
box-shadow: var(--cf-shadow);
overflow:hidden;
}
.cf-article .cf-heroInner{
padding: 18px 16px 16px;
}

.cf-article .cf-kicker{
display:flex;
flex-wrap: wrap;
gap: 8px;
align-items:center;
margin-bottom: 10px;
}
.cf-article .cf-pill{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,0,255,.35);
background: rgba(255,0,255,.08);
font-size: 12px;
color: rgba(255,255,255,.90);
white-space: nowrap;
}
.cf-article .cf-pillSecondary{
border-color: rgba(167,81,253,.40);
background: rgba(167,81,253,.10);
}
.cf-article .cf-pillNeutral{
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.80);
}
.cf-article .cf-h1{
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1.1;
margin: 6px 0 10px;
text-shadow: 0 6px 24px rgba(255,0,255,.15);
letter-spacing: -0.02em;
}
.cf-article .cf-subhead{
color: var(--cf-muted);
font-size: 1.02rem;
line-height: 1.55;
margin: 0 0 14px;
max-width: 70ch;
}

.cf-article .cf-metaRow{
display:flex;
flex-wrap: wrap;
gap: 10px;
align-items:center;
justify-content: space-between;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.10);
}
.cf-article .cf-metaLeft{
display:flex;
flex-wrap: wrap;
gap: 8px;
align-items:center;
}
.cf-article .cf-metaRight{
display:flex;
gap: 8px;
align-items:center;
flex-wrap: wrap;
}
.cf-article .cf-toc{
margin-top: 14px;
padding: 14px;
border-radius: var(--cf-radius2);
background: rgba(0,0,0,.26);
border: 1px solid rgba(255,255,255,.10);
}
.cf-article .cf-toc summary{
cursor:pointer;
font-weight: 700;
color: rgba(255,255,255,.90);
list-style: none;
}
.cf-article .cf-toc summary::-webkit-details-marker{ display:none; }
.cf-article .cf-tocHint{
color: var(--cf-muted2);
font-size: 13px;
margin-top: 6px;
}
.cf-article .cf-toc ol{

margin: 10px 0 0;
padding-left: 18px;
color: rgba(255,255,255,.86);
line-height: 1.7;
}
.cf-article .cf-toc a{
color: rgba(255,255,255,.88);
text-decoration: none;
}
.cf-article .cf-toc a:hover{
color: #f7b0ec;
text-decoration: underline;
}
.cf-article .cf-articleBody{
margin-top: 18px;
border-radius: var(--cf-radius);
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.10);
box-shadow: var(--cf-shadow);
padding: 18px 16px 20px;
}
.cf-article .cf-articleBody h2{
font-size: clamp(1.2rem, 2.6vw, 1.7rem);
margin: 28px 0 10px;
color: rgba(255,153,255,.95);
text-shadow: 0 3px 14px rgba(255,0,255,.10);
letter-spacing: -0.01em;
}
.cf-article .cf-articleBody h3{
font-size: clamp(1.05rem, 2.0vw, 1.25rem);
margin: 18px 0 8px;
color: rgba(255,255,255,.92);
}
.cf-article .cf-articleBody p{
margin: 10px 0;
color: rgba(255,255,255,.88);
line-height: 1.68;
font-size: 1rem;
}
.cf-article .cf-articleBody ul,
.cf-article .cf-articleBody ol{
margin: 10px 0 12px;

padding-left: 20px;
line-height: 1.75;
color: rgba(255,255,255,.86);
}
.cf-article .cf-articleBody li{ margin: 6px 0; }
.cf-article .cf-callout{
margin: 14px 0;
padding: 14px;
border-radius: var(--cf-radius2);
background: linear-gradient(180deg, rgba(167,81,253,.14), rgba(255,0,255,.08));
border: 1px solid rgba(255,0,255,.35);
box-shadow: var(--cf-shadow2);
}
.cf-article .cf-callout strong{ color: rgba(249,202,240,.98); }
.cf-article .cf-callout p{ margin: 6px 0; color: rgba(255,255,255,.90); }
.cf-article .cf-calloutSmall{ color: var(--cf-muted); font-size: 13px; margin-top: 8px; }
.cf-article .cf-grid{
display:grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 12px 0 8px;
}
@media (min-width: 760px){
.cf-article .cf-grid.cf-cols2{ grid-template-columns: 1fr 1fr; }
.cf-article .cf-grid.cf-cols3{ grid-template-columns: 1fr 1fr 1fr; }
}
.cf-article .cf-mini{
padding: 14px;
border-radius: var(--cf-radius2);
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
}
.cf-article .cf-mini h4{
margin: 0 0 8px;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.86);
}
.cf-article .cf-mini p{
margin: 0;

color: var(--cf-muted);
font-size: 14px;
line-height: 1.6;
}
.cf-article .cf-score{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.cf-article .cf-tag{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
font-size: 12px;
color: rgba(255,255,255,.86);
white-space: nowrap;
}
.cf-article .cf-tag.cf-good{ border-color: rgba(99,245,173,.45); background:
rgba(99,245,173,.10); }
.cf-article .cf-tag.cf-warn{ border-color: rgba(255,192,92,.45); background:
rgba(255,192,92,.10); }
.cf-article .cf-tag.cf-bad{ border-color: rgba(255,109,109,.45); background:
rgba(255,109,109,.10); }
.cf-article .cf-compareWrap{
margin: 14px 0;
border-radius: var(--cf-radius2);
overflow:hidden;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.22);
}
.cf-article .cf-compareScroll{
overflow:auto;
-webkit-overflow-scrolling: touch;
}
.cf-article table.cf-compareTable{
width: 100%;
border-collapse: collapse;

min-width: 860px;
font-size: 14px;
}
.cf-article .cf-compareTable th,
.cf-article .cf-compareTable td{
padding: 12px 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
vertical-align: top;
}
.cf-article .cf-compareTable th{
text-align:left;
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.92);
position: sticky;
top: 0;
z-index: 2;
}
.cf-article .cf-compareTable td{ color: rgba(255,255,255,.84); }
.cf-article .cf-compareTable tr:hover td{ background: rgba(255,255,255,.03); }
.cf-article .cf-compareApp{
font-weight: 700;
color: rgba(255,255,255,.92);
}
.cf-article .cf-compareMuted{
color: var(--cf-muted);
font-size: 13px;
margin-top: 6px;
}
.cf-article .cf-picker{
margin: 14px 0;
border-radius: var(--cf-radius);
padding: 14px;
border: 1px solid rgba(255,0,255,.25);
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
box-shadow: var(--cf-shadow2);
}
.cf-article .cf-picker form{
display:grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 10px;
}
@media (min-width: 760px){

.cf-article .cf-picker form{ grid-template-columns: 1fr 1fr; }
}
.cf-article .cf-q{
padding: 12px;
border-radius: var(--cf-radius2);
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.10);
}
.cf-article .cf-qTitle{
display:block;
font-weight: 700;
margin-bottom: 8px;
color: rgba(255,255,255,.92);
font-size: 14px;
}
.cf-article .cf-opts{
display:grid;
gap: 8px;
}
.cf-article .cf-opt{
display:flex;
align-items:flex-start;
gap: 10px;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
cursor:pointer;
transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.cf-article .cf-opt:hover{
border-color: rgba(255,0,255,.28);
background: rgba(255,255,255,.05);
transform: translateY(-1px);
}
.cf-article .cf-opt input{
margin-top: 2px;
accent-color: var(--cf-accent);
}
.cf-article .cf-optTxt{
display:flex;
flex-direction:column;
gap: 2px;
}

.cf-article .cf-optTxt strong{
font-size: 13px;
color: rgba(255,255,255,.92);
}
.cf-article .cf-optTxt span{
font-size: 12px;
color: var(--cf-muted);
line-height: 1.4;
}
.cf-article .cf-jump{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.cf-article .cf-result{
margin-top: 12px;
padding: 12px;
border-radius: var(--cf-radius2);
border: 1px solid rgba(167,81,253,.35);
background: rgba(167,81,253,.10);
}
.cf-article .cf-resultLine{
display:flex;
flex-wrap: wrap;
gap: 8px;
align-items:center;
justify-content: space-between;
}
.cf-article .cf-result strong{
font-size: 14px;
color: rgba(255,255,255,.95);
}
.cf-article .cf-result p{
margin: 8px 0 0;
color: rgba(255,255,255,.88);
font-size: 14px;
line-height: 1.6;
}
.cf-article .cf-hr{
height: 1px;

background: rgba(255,255,255,.10);
margin: 18px 0;
}
.cf-article .cf-kbd{
font-family: var(--cf-mono);
font-size: 12px;
padding: 2px 8px;
border-radius: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.88);
}
.cf-article .cf-foot{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.10);
color: var(--cf-muted);
font-size: 13px;
line-height: 1.6;
}
.cf-article .cf-backToTop{
position: fixed;
right: 14px;
bottom: 14px;
z-index: 60;
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: opacity .2s ease, transform .2s ease;
}
.cf-article .cf-backToTop.cf-show{
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
@media (max-width: 802px){
.cf-article .cf-page{ padding: 16px 12px 56px; }
.cf-article .cf-heroInner{ padding: 16px 14px; }
.cf-article .cf-articleBody{ padding: 16px 14px; }
}

@media print{
.cf-article{ background: #fff; color:#111; }
.cf-article .cf-topbar,
.cf-article .cf-progress,
.cf-article .cf-backToTop{ display:none !important; }
.cf-article .cf-hero,
.cf-article .cf-articleBody{
box-shadow:none;
background:#fff;
border: 1px solid #ddd;
}
.cf-article a{ color:#111; text-decoration: underline; }
}