*{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0a0e17;--panel:#0f1521;--border:#1a2435;
    --blue:#00d4ff;--green:#39ff14;--text:#e0e6ed;
    --muted:#8b95a5;--accent:#1e3a5f
}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
    background:var(--bg);color:var(--text);line-height:1.6;
    min-height:100vh;
}
body::before{
    content:'';position:fixed;top:0;left:0;width:100%;height:100%;
    background:radial-gradient(circle at 20% 80%,rgba(0,212,255,.05),transparent 50%),
                radial-gradient(circle at 80% 20%,rgba(57,255,20,.03),transparent 50%);
    pointer-events:none;z-index:-1;animation:bgMove 20s ease-in-out infinite
}
@keyframes bgMove{
    0%,100%{background-position:0% 0%}
    50%{background-position:100% 100%}
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
nav{
    background:linear-gradient(180deg,rgba(15,21,33,.95),rgba(15,21,33,.8));
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(10px);position:sticky;top:0;z-index:100
}
nav .container{
    display:flex;justify-content:space-between;align-items:center;padding:15px 20px
}
.logo{
    font-size:20px;font-weight:700;color:var(--blue);
    text-shadow:0 0 10px rgba(0,212,255,.3)
}
.nav-links{display:flex;gap:25px;list-style:none}
.nav-links a{
    color:var(--text);text-decoration:none;font-size:14px;
    transition:all .3s;padding:8px 12px;border-radius:4px
}
.nav-links a:hover,.nav-links a.active{color:var(--blue);background:rgba(0,212,255,.1)}
.nav-links .bili{
    background:linear-gradient(135deg,#fb7299,#ff8eb3);color:#fff;
    padding:8px 16px;border-radius:20px
}
.nav-links .bili:hover{background:linear-gradient(135deg,#ff8eb3,#fb7299)}
main{padding:40px 0;min-height:calc(100vh - 150px)}
h1{font-size:28px;margin-bottom:30px;color:var(--text);position:relative;display:inline-block}
h1::after{
    content:'';position:absolute;bottom:-8px;left:0;width:60%;height:3px;
    background:linear-gradient(90deg,var(--blue),var(--green));border-radius:2px
}
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.card{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;
    overflow:hidden;transition:all .3s
}
.card:hover{
    transform:translateY(-5px);border-color:var(--blue);
    box-shadow:0 10px 30px rgba(0,212,255,.1);animation:cardHover .5s ease-out
}
.card:active{
    transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,212,255,.2);transition:all .1s ease-in
}
@keyframes cardHover{
    0%{transform:translateY(0);box-shadow:0 0 0 rgba(0,212,255,0)}
    50%{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,212,255,.2)}
    100%{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,212,255,.1)}
}
.card-thumb{
    width:100%;height:150px;background:linear-gradient(135deg,var(--accent),var(--border));
    display:flex;align-items:center;justify-content:center;font-size:40px
}
.card-body{padding:20px}
.card h3{font-size:16px;margin-bottom:10px;color:var(--text)}
.card p{font-size:13px;color:var(--muted);margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
    background:rgba(0,212,255,.1);color:var(--blue);padding:4px 10px;border-radius:4px;
    font-size:12px;border:1px solid rgba(0,212,255,.2);cursor:pointer;transition:all .3s
}
.tag:hover,.tag.active{background:var(--blue);color:#0a0e17}
.article-list{display:flex;flex-direction:column;gap:15px}
.article-item{
    background:var(--panel);border:1px solid var(--border);border-radius:8px;
    padding:20px;display:flex;justify-content:space-between;align-items:center;transition:all .3s
}
.article-item:hover{border-color:var(--green);background:rgba(57,255,20,.02);transform:translateX(10px);animation:itemHover .3s ease-out}
.article-item:active{transform:translateX(5px);border-color:var(--green);transition:all .1s ease-in}
@keyframes itemHover{
    0%{transform:translateX(0);border-color:var(--border)}
    100%{transform:translateX(10px);border-color:var(--green)}
}
.article-info h3{font-size:16px;margin-bottom:8px}
.article-info .meta{font-size:13px;color:var(--muted)}
article{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:40px}
article h2{font-size:24px;margin:30px 0 15px;color:var(--text)}
article p{margin-bottom:15px;color:var(--text)}
article img{max-width:100%;border-radius:8px;margin:20px 0}
pre{
    background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:20px;
    overflow-x:auto;margin:20px 0;position:relative;box-shadow:0 4px 15px rgba(0,0,0,.3);
    transition:all .3s;animation:codeBlockLoad .5s ease-out
}
pre:hover{
    box-shadow:0 6px 20px rgba(0,212,255,.2);border-color:var(--blue)
}
@keyframes codeBlockLoad{
    0%{opacity:0;transform:translateY(20px)}
    100%{opacity:1;transform:translateY(0)}
}
code{font-family:'Consolas','Monaco','Courier New',monospace;font-size:14px}
pre code{color:#c9d1d9;display:block}
.copy-btn{
    position:absolute;top:10px;right:10px;background:var(--border);color:var(--text);
    border:0;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .3s
}
.copy-btn:hover{background:var(--blue);color:#0a0e17;transform:scale(1.05);box-shadow:0 4px 15px rgba(0,212,255,.3)}
.hl-keyword{color:#ff7b72}
.hl-string{color:#a5d6ff}
.hl-comment{color:#8b949e;font-style:italic}
.hl-func{color:#d2a8ff}
.video-link{
    display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fb7299,#ff8eb3);
    color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;margin-top:30px;
    font-weight:600;transition:all .3s;position:relative;overflow:hidden
}
.video-link::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transition:all .5s
}
.video-link:hover::before{left:100%}
.video-link:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(251,114,153,.4);animation:btnHover .3s ease-out}
@keyframes btnHover{
    0%{transform:translateY(0);box-shadow:0 0 0 rgba(251,114,153,0)}
    50%{transform:translateY(-5px);box-shadow:0 15px 40px rgba(251,114,153,.5)}
    100%{transform:translateY(-3px);box-shadow:0 10px 30px rgba(251,114,153,.4)}
}
.about-card,
.container > .featured,
.container > .article-list,
.container > article,
.container > .error-page{
    animation:pageLoad .6s ease-out
}
@keyframes pageLoad{
    0%{opacity:0;transform:translateY(20px)}
    100%{opacity:1;transform:translateY(0)}
}
.about-card{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:50px;text-align:center;
    box-shadow:0 8px 30px rgba(0,0,0,.2)
}
.avatar{
    width:120px;height:120px;border-radius:50%;
    margin:0 auto 25px;overflow:hidden;
    border:3px solid var(--border);box-shadow:0 4px 20px rgba(0,212,255,.3);
    animation:avatarGlow 3s ease-in-out infinite alternate
}
@keyframes avatarGlow{
    from{box-shadow:0 4px 20px rgba(0,212,255,.3)}
    to{box-shadow:0 6px 30px rgba(0,212,255,.6),0 0 40px rgba(57,255,20,.3)}
}
.about-card h2{font-size:28px;margin-bottom:10px}
.location{color:var(--muted);font-size:14px;margin-bottom:20px}
.bio{color:var(--text);max-width:600px;margin:0 auto 30px;line-height:1.8}
.bili-btn{
    display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fb7299,#ff8eb3);
    color:#fff;padding:14px 32px;border-radius:30px;text-decoration:none;font-weight:600;
    font-size:16px;transition:all .3s;position:relative;overflow:hidden
}
.bili-btn::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transition:all .5s
}
.bili-btn:hover::before{left:100%}
.bili-btn:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(251,114,153,.4);animation:btnHover .3s ease-out}
.error-page{text-align:center;padding:80px 20px}
.error-code{font-size:120px;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;animation:errorGlow 2s ease-in-out infinite alternate}
@keyframes errorGlow{
    from{filter:brightness(1)}
    to{filter:brightness(1.2);text-shadow:0 0 30px rgba(57,255,20,.5)}
}
.error-page h2{font-size:28px;margin-bottom:15px}
.error-page p{color:var(--muted);margin-bottom:30px}
.back-btn{
    display:inline-block;background:var(--blue);color:#0a0e17;padding:12px 28px;border-radius:8px;
    text-decoration:none;font-weight:600;transition:all .3s;position:relative;overflow:hidden
}
.back-btn::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transition:all .5s
}
.back-btn:hover::before{left:100%}
.back-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,212,255,.4);animation:btnHover .3s ease-out}
footer{
    background:var(--panel);border-top:1px solid var(--border);padding:30px 0;
    text-align:center;color:var(--muted);font-size:14px;margin-top:40px
}
footer span{color:var(--green)}
@media(max-width:992px){.featured{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
    nav .container{flex-direction:column;gap:15px}
    .nav-links{flex-wrap:wrap;justify-content:center;gap:15px}
    .featured{grid-template-columns:1fr}
    .article-item{flex-direction:column;align-items:flex-start;gap:10px}
    article{padding:25px}
}