@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');

:root{
--bg:#0d0d0d;
--p:#8000ff;
--m:#ff00ff;
--ink:#ece6f6;
--dim:#a294bb;
--line:rgba(128,0,255,.32);
--glass:rgba(26,19,38,.58);
--r:10px;
--hd:'Orbitron','Exo 2',ui-sans-serif,system-ui,sans-serif;
--tx:'Exo 2',ui-sans-serif,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--tx);
font-size:16.5px;
line-height:1.75;
color:var(--ink);
background:
radial-gradient(900px 520px at 88% -8%,rgba(255,0,255,.13),transparent 62%),
radial-gradient(760px 460px at 2% 6%,rgba(128,0,255,.17),transparent 60%),
var(--bg);
background-attachment:fixed;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:900;
pointer-events:none;
opacity:.4;
background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--m);outline-offset:3px}
::selection{background:var(--m);color:#0d0d0d}

/* 顶部细条 */
.hd{position:relative;z-index:60;border-bottom:1px solid var(--line);background:rgba(11,9,16,.94)}
.strip{
overflow:hidden;
border-bottom:1px solid rgba(255,0,255,.2);
background:linear-gradient(90deg,rgba(128,0,255,.18),rgba(255,0,255,.16));
}
.ticker{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker .run{
display:flex;
align-items:center;
gap:16px;
padding:7px 16px;
font-family:var(--hd);
font-size:12.5px;
letter-spacing:.2em;
color:#f4e2ff;
white-space:nowrap;
}
.ticker .dot{display:block;width:5px;height:5px;border-radius:50%;background:var(--m);box-shadow:0 0 10px var(--m)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 主导航条 */
.bar{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
max-width:1280px;
margin:0 auto;
padding:8px 18px;
}
.nav p{display:flex;flex-wrap:wrap;gap:2px;margin:0}
.nav-a p{justify-content:flex-end}
.nav-b p{justify-content:flex-start}
.nav a{
display:inline-flex;
align-items:center;
min-height:44px;
padding:4px 10px;
font-size:16px;
letter-spacing:.03em;
text-decoration:none;
color:#cfc3e2;
border:1px solid transparent;
border-radius:6px;
}
.nav a:hover,.nav a:focus-visible{color:#fff;border-color:var(--m);text-shadow:0 0 10px var(--m);box-shadow:0 0 16px rgba(255,0,255,.35)}
.brand{
justify-self:center;
display:inline-flex;
align-items:center;
gap:9px;
min-height:44px;
padding:4px 8px;
color:#fff;
text-decoration:none;
font-family:var(--hd);
font-weight:700;
font-size:17px;
letter-spacing:.13em;
text-shadow:0 0 12px var(--p),0 0 24px rgba(255,0,255,.55);
}
.brand:hover{color:#fff}
.mark{
width:12px;height:12px;
border:2px solid var(--m);
transform:rotate(45deg);
box-shadow:0 0 10px var(--m),inset 0 0 8px var(--m);
}
.brand img{border-radius:6px;box-shadow:0 0 14px rgba(255,0,255,.5)}

/* 粘性锚点条 */
.rail{
position:sticky;
top:0;
z-index:55;
background:rgba(9,7,14,.95);
border-bottom:1px solid var(--line);
backdrop-filter:blur(8px);
}
.rail p{
display:flex;
gap:2px;
max-width:1280px;
margin:0 auto;
padding:4px 14px;
overflow-x:auto;
scrollbar-width:none;
}
.rail p::-webkit-scrollbar{display:none}
.rail a{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:44px;
padding:0 12px;
font-size:15.5px;
letter-spacing:.04em;
white-space:nowrap;
color:#8e82a6;
text-decoration:none;
border-bottom:2px solid transparent;
}
.rail a:hover,.rail a.on{color:#fff;border-bottom-color:var(--m);text-shadow:0 0 12px var(--m)}

/* 版心 */
.shell{
display:grid;
grid-template-columns:232px minmax(0,1fr);
gap:34px;
align-items:start;
max-width:1280px;
margin:0 auto;
padding:34px 18px 70px;
}

/* 左侧 HUD */
.hud{
position:sticky;
top:70px;
padding:18px 15px 20px;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--glass);
backdrop-filter:blur(12px);
box-shadow:inset 0 0 0 1px rgba(255,0,255,.07),0 20px 44px rgba(0,0,0,.55);
}
.hud::before{
content:"";
position:absolute;
top:8px;right:8px;
width:10px;height:10px;
border-top:1px solid var(--m);
border-right:1px solid var(--m);
}
.hud-h{
margin:20px 0 12px;
font-family:var(--hd);
font-size:13px;
font-weight:600;
letter-spacing:.18em;
color:#fff;
text-shadow:0 0 10px var(--p);
}
.hud-h:first-child{margin-top:0}
.hud-h span{display:inline-block;padding-left:9px;border-left:3px solid var(--m)}
.hud-h span span{display:inline-block}
.hud-list{margin:0;display:flex;flex-direction:column;gap:2px}
.hud-list a{
display:flex;
align-items:center;
min-height:42px;
padding:6px 10px;
font-size:15.5px;
color:var(--dim);
text-decoration:none;
border-left:1px solid rgba(128,0,255,.25);
border-radius:0 6px 6px 0;
}
.hud-list a:hover,.hud-list a:focus-visible{
color:#fff;
border-left-color:var(--m);
background:linear-gradient(90deg,rgba(255,0,255,.18),transparent);
}

/* 正文 */
.doc{min-width:0}
.hero{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
min-height:45vh;
padding:10px 0 30px;
text-align:right;
}
.hero-t{
position:relative;
margin:0;
font-family:var(--hd);
font-weight:700;
font-size:clamp(1.9rem,5.6vw,4.1rem);
line-height:1.16;
letter-spacing:.01em;
color:#fff;
text-shadow:0 0 18px rgba(128,0,255,.9),0 0 42px rgba(255,0,255,.5);
word-break:break-word;
}
.hero-t::before,.hero-t::after{
content:attr(data-text);
position:absolute;
inset:0;
pointer-events:none;
opacity:.85;
}
.hero-t::before{color:var(--m);clip-path:inset(0 0 56% 0);animation:glA 2.6s steps(2,end) infinite alternate}
.hero-t::after{color:var(--p);clip-path:inset(52% 0 0 0);animation:glB 3.1s steps(2,end) infinite alternate}
@keyframes glA{
0%,100%{transform:translate(2px,-2px)}
50%{transform:translate(5px,-3px) skewX(-2deg)}
}
@keyframes glB{
0%,100%{transform:translate(-2px,2px)}
50%{transform:translate(-5px,3px) skewX(2deg)}
}
.hero-band{
height:16px;
margin-top:20px;
background:
repeating-linear-gradient(90deg,var(--bg) 0 9px,transparent 9px 25px),
linear-gradient(90deg,var(--p),var(--m));
transform:skewY(-1.1deg);
box-shadow:0 0 26px rgba(255,0,255,.5);
}

.doc > section[id]{
position:relative;
margin:0 0 26px;
padding:26px 24px 12px;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--glass);
backdrop-filter:blur(9px);
scroll-margin-top:80px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 16px 34px rgba(0,0,0,.42);
}
.doc > section[id]::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:3px;
border-radius:var(--r) 0 0 var(--r);
background:linear-gradient(180deg,var(--p),var(--m));
}
.doc h2{
margin:0 0 15px;
font-family:var(--hd);
font-weight:600;
font-size:clamp(1.15rem,2.5vw,1.55rem);
line-height:1.4;
letter-spacing:.02em;
color:#fff;
}
.doc h2 > span{display:inline-block;padding-left:14px;position:relative}
.doc h2 > span::before{
content:"";
position:absolute;
left:0;top:.28em;bottom:.28em;
width:4px;
background:var(--m);
box-shadow:0 0 12px var(--m);
}
.doc h2 > span > span{position:relative;z-index:1}
.doc h3{
margin:22px 0 10px;
font-family:var(--hd);
font-size:1.05rem;
letter-spacing:.03em;
color:#f0e6ff;
}
.doc h3 span{padding-left:10px;border-left:2px solid var(--p)}
.doc p{margin:0 0 1.05em;color:#dcd3ee}
.doc strong{color:#fff}
.doc a{color:#ffb3ff;text-decoration:none;border-bottom:1px solid rgba(255,0,255,.45)}
.doc a:hover{color:#fff;text-shadow:0 0 10px var(--m)}
.doc ul,.doc ol{margin:0 0 1.05em;padding-left:1.25em;color:#dcd3ee}
.doc li{margin:.4em 0}
.doc li::marker{color:var(--m)}
.doc blockquote{
margin:0 0 1.05em;
padding:12px 16px;
border-left:2px solid var(--p);
border-radius:0 8px 8px 0;
background:rgba(128,0,255,.11);
color:#c5b8db;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc img{margin:0 0 1em;border:1px solid var(--line);border-radius:8px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 1.1em;font-size:15.5px}
.doc th,.doc td{padding:9px 11px;border:1px solid rgba(128,0,255,.26);text-align:left}
.doc th{background:rgba(128,0,255,.16);color:#fff;font-weight:600}
.doc code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.92em;background:rgba(255,0,255,.12);padding:1px 5px;border-radius:4px}

/* 页脚 */
.ft{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:10px 22px;
margin-top:14px;
padding:38px max(18px,calc((100% - 1280px)/2)) 24px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(128,0,255,.1),transparent 72%);
}
.f-brand{
margin:0;
font-family:var(--hd);
font-size:17px;
font-weight:700;
letter-spacing:.12em;
color:#fff;
text-shadow:0 0 14px var(--p);
}
.f-col{display:flex;flex-direction:column;margin:0}
.f-col a{
display:flex;
align-items:center;
min-height:42px;
font-size:15.5px;
color:var(--dim);
text-decoration:none;
}
.f-col a:hover{color:#fff;text-shadow:0 0 10px var(--m)}
.f-kw{margin:0;font-size:14.5px;line-height:1.7;color:#8d81a4}
.f-cr{
grid-column:1 / 3;
padding-top:14px;
border-top:1px solid rgba(128,0,255,.2);
font-size:13.5px;
color:#7d7191;
}
.f-top{grid-column:3 / 5;margin:0;padding-top:8px;border-top:1px solid rgba(128,0,255,.2);text-align:right}
.f-top a{
display:inline-flex;
align-items:center;
min-height:42px;
padding:0 15px;
font-size:14.5px;
color:var(--ink);
text-decoration:none;
border:1px solid var(--line);
border-radius:999px;
}
.f-top a:hover{color:#fff;border-color:var(--m);box-shadow:0 0 18px rgba(255,0,255,.45)}

@media (max-width:960px){
.shell{display:flex;flex-direction:column;gap:26px;padding:24px 16px 56px}
.doc{order:1;width:100%}
.hud{order:2;position:static;width:100%}
.hero{text-align:left;min-height:auto;padding:6px 0 24px}
}

@media (max-width:720px){
.bar{grid-template-columns:1fr;gap:4px;padding:8px 12px}
.brand{order:-1;justify-self:center}
.nav-a p,.nav-b p{justify-content:center}
.nav a{font-size:15.5px;padding:4px 7px}
.rail p{justify-content:flex-start}
.hero-band{height:13px}
.doc > section[id]{padding:22px 16px 10px;scroll-margin-top:70px}
.ft{grid-template-columns:1fr 1fr;gap:6px 16px;padding:30px 16px 22px}
.f-brand{grid-column:1 / 3}
.f-cr{grid-column:1 / 2;padding-top:12px}
.f-top{grid-column:2 / 3;text-align:right}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.strip{overflow-x:auto}
.ticker{animation:none}
.hero-t::before,.hero-t::after{animation:none}
.hero-t{transform:none !important}
}

button[aria-expanded]{min-width:44px;min-height:44px}