:root{--brand:#6b21a8;--brand-2:#a855f7;--brand-3:#c084fc;--accent:#facc15;--ink:#1f1235;--muted:#6b6478;--bg:#faf7ff;--bg-grad-1:#f5edff;--bg-grad-2:#fff7fb;--card:#ffffff;--card-glass:rgba(255,255,255,.72);--line:#e7dff5;--line-soft:rgba(107,33,168,.08);--ok:#16a34a;--shadow-sm:0 2px 8px rgba(107,33,168,.06);--shadow-md:0 8px 28px rgba(107,33,168,.12);--shadow-lg:0 18px 48px rgba(107,33,168,.18);--radius-sm:12px;--radius:16px;--radius-lg:22px;--radius-pill:999px;--ease:cubic-bezier(.22,.61,.36,1);--speed:.32s}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--ink);
background:var(--bg);
background-image:radial-gradient(1200px 600px at 8% -6%,rgba(168,85,247,.13),transparent 60%),radial-gradient(900px 520px at 96% 4%,rgba(250,204,21,.10),transparent 55%),linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2) 42%,var(--bg));
background-attachment:fixed;
line-height:1.8;
font-size:16px;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
transition:background-color var(--speed) var(--ease),color var(--speed) var(--ease)
}

body.dark{
--ink:#ece7f7;
--muted:#a99fc0;
--bg:#120c1f;
--bg-grad-1:#160f27;
--bg-grad-2:#1a1030;
--card:#1c1430;
--card-glass:rgba(28,20,48,.72);
--line:#33254d;
--line-soft:rgba(216,180,254,.10);
--brand:#c084fc;
--brand-2:#a855f7;
--brand-3:#d8b4fe;
--shadow-sm:0 2px 8px rgba(0,0,0,.28);
--shadow-md:0 10px 30px rgba(0,0,0,.38);
--shadow-lg:0 20px 52px rgba(0,0,0,.5);
background-image:radial-gradient(1200px 600px at 8% -6%,rgba(168,85,247,.18),transparent 60%),radial-gradient(900px 520px at 96% 4%,rgba(124,58,237,.14),transparent 55%),linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2) 42%,var(--bg))
}

::selection{background:rgba(168,85,247,.28);color:var(--ink)}

a{color:var(--brand);text-decoration:none;transition:color var(--speed) var(--ease),opacity var(--speed) var(--ease)}
a:hover{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

img,svg{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

header.site{
position:sticky;top:0;z-index:50;
background:var(--card-glass);
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%);
border-bottom:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 24px rgba(107,33,168,.05);
transition:background-color var(--speed) var(--ease),border-color var(--speed) var(--ease)
}

body.dark header.site{
background:rgba(18,12,31,.78);
box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 24px rgba(0,0,0,.35)
}

.nav{display:flex;align-items:center;gap:18px;padding:12px 0;flex-wrap:wrap}

.logo{
display:flex;align-items:center;gap:10px;
font-weight:800;font-size:20px;color:var(--ink);
letter-spacing:.02em;
transition:transform var(--speed) var(--ease),color var(--speed) var(--ease)
}
.logo:hover{text-decoration:none;transform:translateY(-1px);color:var(--brand)}
.logo svg{
width:36px;height:36px;border-radius:12px;
box-shadow:0 6px 16px rgba(107,33,168,.28);
transition:transform .5s var(--ease),box-shadow var(--speed) var(--ease)
}
.logo:hover svg{transform:rotate(-8deg) scale(1.06);box-shadow:0 10px 24px rgba(107,33,168,.4)}

.nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap;align-items:center}
.nav ul a{
position:relative;
color:var(--ink);font-size:15px;font-weight:500;
padding:6px 12px;border-radius:var(--radius-pill);
transition:color var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.nav ul a::after{
content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
background:linear-gradient(90deg,var(--brand),var(--brand-2));
border-radius:2px;transform:scaleX(0);transform-origin:left;
transition:transform var(--speed) var(--ease)
}
.nav ul a:hover{text-decoration:none;color:var(--brand);background:rgba(168,85,247,.08)}
.nav ul a:hover::after{transform:scaleX(1)}

.search{margin-left:auto;display:flex;gap:6px;align-items:center}
.search input{
border:1px solid var(--line);
background:var(--card);
color:var(--ink);
padding:8px 14px;
border-radius:var(--radius-pill);
font-size:14px;width:170px;
transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease),width var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.search input::placeholder{color:var(--muted)}
.search input:focus{
outline:none;border-color:var(--brand-2);width:210px;
box-shadow:0 0 0 4px rgba(168,85,247,.16)
}
.search button{
border:none;cursor:pointer;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
color:#fff;padding:8px 18px;border-radius:var(--radius-pill);
font-size:14px;font-weight:600;
box-shadow:0 6px 16px rgba(107,33,168,.28);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),filter var(--speed) var(--ease)
}
.search button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(107,33,168,.4);filter:brightness(1.06)}
.search button:active{transform:translateY(0) scale(.98)}

.tools{display:flex;gap:8px}
.tools button{
border:1px solid var(--line);
background:var(--card);
color:var(--ink);
padding:7px 14px;border-radius:var(--radius-pill);
cursor:pointer;font-size:13px;font-weight:600;
transition:transform var(--speed) var(--ease),background-color var(--speed) var(--ease),border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)
}
.tools button:hover{
transform:translateY(-1px);
border-color:var(--brand-2);
background:rgba(168,85,247,.10);
box-shadow:var(--shadow-sm)
}
.tools button:active{transform:translateY(0) scale(.97)}

.menu-btn{
display:none;
border:1px solid var(--line);
background:var(--card);
color:var(--ink);
width:40px;height:40px;border-radius:12px;
font-size:18px;line-height:1;cursor:pointer;
align-items:center;justify-content:center;
transition:background-color var(--speed) var(--ease),transform var(--speed) var(--ease)
}
.menu-btn:hover{background:rgba(168,85,247,.12);transform:scale(1.04)}

.banner{
position:relative;overflow:hidden;
border-radius:var(--radius-lg);
margin:26px auto;
background:linear-gradient(135deg,#6b21a8 0%,#9333ea 45%,#a855f7 70%,#c084fc 100%);
color:#fff;min-height:300px;
box-shadow:var(--shadow-lg);
isolation:isolate;
transition:box-shadow var(--speed) var(--ease)
}
.banner::before{
content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(250,204,21,.28),transparent 62%);
filter:blur(6px);z-index:0;pointer-events:none
}
.banner::after{
content:"";position:absolute;inset:auto auto -50% -14%;width:460px;height:460px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18),transparent 64%);
z-index:0;pointer-events:none
}
.banner:hover{box-shadow:0 26px 64px rgba(107,33,168,.32)}

.slides{display:flex;transition:transform .6s var(--ease);position:relative;z-index:1}

.slide{
min-width:100%;
padding:48px 40px;
display:flex;flex-direction:column;justify-content:center;gap:14px;
position:relative
}
.slide h2{
font-size:clamp(23px,3vw,32px);
line-height:1.3;
letter-spacing:.01em;
text-shadow:0 2px 18px rgba(0,0,0,.18)
}
.slide p{max-width:640px;opacity:.95;font-size:15.5px}
.slide a.cta{
align-self:flex-start;
background:#fff;color:var(--brand);
padding:11px 24px;border-radius:var(--radius-pill);
font-weight:700;font-size:15px;
box-shadow:0 10px 26px rgba(0,0,0,.18);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.slide a.cta:hover{
text-decoration:none;
transform:translateY(-2px) scale(1.02);
box-shadow:0 16px 34px rgba(0,0,0,.26);
background:#fff7ff
}
.slide a.cta:active{transform:translateY(0) scale(.99)}

.dots{position:absolute;bottom:16px;left:40px;display:flex;gap:8px;z-index:2}
.dots i{
width:10px;height:10px;border-radius:50%;
background:rgba(255,255,255,.5);cursor:pointer;
transition:background-color var(--speed) var(--ease),transform var(--speed) var(--ease),width var(--speed) var(--ease)
}
.dots i:hover{background:rgba(255,255,255,.8);transform:scale(1.2)}
.dots i.on{background:#fff;width:24px;border-radius:var(--radius-pill)}

section{padding:44px 0}

h1{
font-size:clamp(26px,3.4vw,34px);
line-height:1.35;margin:10px 0 16px;
letter-spacing:-.01em;
background:linear-gradient(120deg,var(--ink) 20%,var(--brand) 90%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
body.dark h1{background:linear-gradient(120deg,#f3ecff 10%,var(--brand-3) 90%);-webkit-background-clip:text;background-clip:text}

h2{
font-size:clamp(21px,2.6vw,26px);
margin:0 0 16px;line-height:1.4;
position:relative;padding-left:16px;
letter-spacing:.01em
}
h2::before{
content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:4px;
background:linear-gradient(180deg,var(--brand-2),var(--brand));
box-shadow:0 0 14px rgba(168,85,247,.4)
}

h3{font-size:20px;margin:22px 0 10px;line-height:1.5}
h4{font-size:17px;margin:16px 0 8px;line-height:1.5}

p{margin:0 0 14px;color:var(--ink)}
.muted{color:var(--muted)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow-sm);
position:relative;
overflow:hidden;
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),border-color var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.card::before{
content:"";position:absolute;inset:0 0 auto 0;height:3px;
background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));
opacity:0;transform:scaleX(.4);transform-origin:left;
transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)
}
.card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
border-color:rgba(168,85,247,.35)
}
.card:hover::before{opacity:1;transform:scaleX(1)}
.card h3{margin-top:0}

.card.review{display:flex;gap:14px;align-items:flex-start}
.card.review p{margin-bottom:0}

.badge{
display:inline-block;
background:#f3e8ff;color:var(--brand);
padding:3px 12px;border-radius:var(--radius-pill);
font-size:13px;font-weight:600;letter-spacing:.02em;
border:1px solid rgba(168,85,247,.18);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)
}
.badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(168,85,247,.22)}
body.dark .badge{background:#2c1d47;color:#d8b4fe;border-color:rgba(216,180,254,.2)}

.stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;
background:var(--card-glass);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:26px 18px;
box-shadow:var(--shadow-sm);
margin:8px 0 6px
}
.stats>div{padding:6px 4px;transition:transform var(--speed) var(--ease)}
.stats>div:hover{transform:translateY(-3px)}
.stats .num{
font-size:clamp(24px,3vw,32px);font-weight:800;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1.2;
font-variant-numeric:tabular-nums
}
.stats .muted{font-size:14px;margin-top:2px}

.crumbs{
font-size:13px;color:var(--muted);padding:14px 0;
display:flex;flex-wrap:wrap;gap:6px;align-items:center
}
.crumbs a{color:var(--muted);transition:color var(--speed) var(--ease)}
.crumbs a:hover{color:var(--brand)}

.anchor-nav{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.anchor-nav a{
background:var(--card);
border:1px solid var(--line);
padding:7px 15px;border-radius:var(--radius-pill);
font-size:14px;color:var(--ink);
box-shadow:var(--shadow-sm);
transition:transform var(--speed) var(--ease),background-color var(--speed) var(--ease),border-color var(--speed) var(--ease),color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)
}
.anchor-nav a:hover{
text-decoration:none;
transform:translateY(-2px);
color:#fff;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
border-color:transparent;
box-shadow:0 10px 22px rgba(107,33,168,.3)
}

article.post{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--shadow-sm);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),border-color var(--speed) var(--ease)
}
article.post:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
border-color:rgba(168,85,247,.32)
}
article.post time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
article.post h3{font-size:18px;margin:8px 0}
article.post p{font-size:14.5px}
article.post p:last-child{margin-bottom:0}

#articles .grid{gap:18px}
#articles article.post{margin-bottom:16px}

.faq details{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:14px 18px;margin-bottom:10px;
box-shadow:var(--shadow-sm);
transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.faq details:hover{border-color:rgba(168,85,247,.32);box-shadow:var(--shadow-md)}
.faq details[open]{border-color:rgba(168,85,247,.4);box-shadow:var(--shadow-md)}
.faq summary{
cursor:pointer;font-weight:700;font-size:16px;list-style:none;
display:flex;align-items:baseline;
transition:color var(--speed) var(--ease)
}
.faq summary:hover{color:var(--brand)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
content:"＋";color:var(--brand);margin-right:8px;font-weight:800;
transition:transform var(--speed) var(--ease)
}
.faq details[open] summary::before{content:"－"}
.faq p{margin:10px 0 0;font-size:15px;color:var(--muted);animation:fadeIn .35s var(--ease)}

.steps{counter-reset:step;list-style:none}
.steps li{
counter-increment:step;
position:relative;padding-left:46px;margin-bottom:16px;
transition:transform var(--speed) var(--ease)
}
.steps li:hover{transform:translateX(3px)}
.steps li::before{
content:counter(step);
position:absolute;left:0;top:2px;
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:14px;
box-shadow:0 6px 16px rgba(107,33,168,.3);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)
}
.steps li:hover::before{transform:scale(1.08);box-shadow:0 8px 20px rgba(107,33,168,.42)}

table{
width:100%;border-collapse:separate;border-spacing:0;
font-size:14.5px;
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow-sm);
background:var(--card)
}
th,td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left}
tr:last-child td{border-bottom:none}
th{
background:linear-gradient(180deg,#f3e8ff,#ede0ff);
color:var(--brand);font-weight:700;white-space:nowrap
}
body.dark th{background:linear-gradient(180deg,#2c1d47,#251a3d);color:#d8b4fe}
tbody tr{transition:background-color var(--speed) var(--ease)}
tbody tr:hover{background:rgba(168,85,247,.06)}

.reveal{
opacity:0;transform:translateY(26px);
transition:opacity .7s var(--ease),transform .7s var(--ease);
will-change:opacity,transform
}
.reveal.in{opacity:1;transform:none}

.avatar{
width:46px;height:46px;border-radius:50%;flex:none;
box-shadow:0 4px 14px rgba(107,33,168,.28);
transition:transform var(--speed) var(--ease)
}
.card.review:hover .avatar{transform:scale(1.06) rotate(-3deg)}

footer.site{
background:linear-gradient(180deg,#241640,#1a0f2e 60%,#150b26);
color:#c9bde0;
padding:44px 0 20px;margin-top:40px;
position:relative;
overflow:hidden
}
footer.site::before{
content:"";position:absolute;inset:-60% auto auto -10%;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(168,85,247,.22),transparent 62%);
pointer-events:none
}
footer.site a{color:#d8b4fe;transition:color var(--speed) var(--ease)}
footer.site a:hover{color:#fff}
footer .cols{
display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:24px;
position:relative;z-index:1
}
footer h4{color:#fff;margin-bottom:10px;font-size:16px}
footer ul{list-style:none;font-size:14px;line-height:2}
footer ul li{transition:transform var(--speed) var(--ease)}
footer ul li:hover{transform:translateX(3px)}
footer p{color:#c9bde0}

.copy{
border-top:1px solid #3a2a5c;
margin-top:26px;padding-top:16px;
font-size:13px;text-align:center;color:#9d8fbc;
position:relative;z-index:1
}
.copy p{margin:0 0 6px;color:#9d8fbc}
.copy a{color:#d8b4fe}

#top{
position:fixed;right:22px;bottom:26px;
width:46px;height:46px;border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
color:#fff;border:none;cursor:pointer;
display:none;font-size:20px;z-index:60;
box-shadow:0 10px 28px rgba(107,33,168,.4);
transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),filter var(--speed) var(--ease)
}
#top:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 36px rgba(107,33,168,.52);filter:brightness(1.08)}
#top:active{transform:translateY(0) scale(.97)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.reveal{opacity:1;transform:none}
}

@media(max-width:1024px){
.g4{grid-template-columns:repeat(2,1fr)}
footer .cols{grid-template-columns:1.6fr 1fr 1fr}
footer .cols>div:last-child{grid-column:1/-1}
}

@media(max-width:900px){
.g3,.g4,.stats,footer .cols{grid-template-columns:1fr 1fr}
.g2{grid-template-columns:1fr}
.nav ul{display:none}
.nav ul.open{
display:flex;flex-direction:column;width:100%;
gap:2px;
padding:10px;
margin-top:4px;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
animation:fadeIn .28s var(--ease)
}
.nav ul.open a{width:100%;padding:10px 12px;border-radius:10px}
.nav ul.open a::after{display:none}
.menu-btn{display:inline-flex}
.search{margin-left:0;width:100%}
.search input{flex:1;width:auto}
.search input:focus{width:auto}
.tools{margin-left:auto}
.slide h2{font-size:23px}
.slide{padding:36px 24px}
.dots{left:24px}
.banner{min-height:260px;border-radius:var(--radius)}
section{padding:34px 0}
h2{padding-left:14px}
}

@media(max-width:640px){
body{font-size:15.5px}
.wrap{padding:0 16px}
.g3,.g4,.stats,footer .cols{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 14px}
.card{padding:18px;border-radius:14px}
article.post{padding:16px}
.nav{gap:10px}
.logo{font-size:18px}
.logo svg{width:32px;height:32px}
.search input{padding:8px 12px;font-size:14px}
.search button{padding:8px 14px}
.tools button{padding:7px 10px;font-size:12.5px}
.slide{padding:30px 20px;gap:12px}
.slide h2{font-size:21px}
.slide p{font-size:14.5px}
.dots{left:20px;bottom:12px}
.banner{min-height:240px;margin:20px auto}
th,td{padding:9px 10px;font-size:13.5px}
.faq details{padding:12px 14px}
.faq summary{font-size:15px}
.faq p{font-size:14px}
footer.site{padding:34px 0 16px}
#top{right:14px;bottom:18px;width:42px;height:42px}
}

@media(hover:none){
.card:hover,article.post:hover,.anchor-nav a:hover,.tools button:hover{transform:none}
}