:root{
 --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
 --font-mono:"SF Mono", Monaco, "Cascadia Code", Menlo, Consolas, monospace;
 --primary:#0b72d9;
 --primary-light:#3d9aff;
 --primary-lighter:#e8f4ff;
 --primary-dark:#0960b8;
 --primary-bg:rgba(11, 114, 217, 0.08);
 --accent-green:#22c55e;
 --accent-green-bg:rgba(34, 197, 94, 0.1);
 --accent-orange:#f97316;
 --accent-red:#ef4444;
 --accent-purple:#a855f7;
 --accent-cyan:#06b6d4;
 --accent-pink:#ec4899;
 --text-primary:#1e293b;
 --text-secondary:#475569;
 --text-muted:#94a3b8;
 --bg-color:#ffffff;
 --bg-secondary:#f8fafc;
 --bg-tertiary:#f1f5f9;
 --border-color:#e2e8f0;
 --border-light:#f1f5f9;
 --shadow-sm:0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
 --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
 --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
 --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.08);
 --shadow-glow:0 0 20px rgba(11, 114, 217, 0.15);
 --radius-xs:4px;
 --radius-sm:6px;
 --radius-md:8px;
 --radius-lg:12px;
 --radius-xl:16px;
 --transition-fast:0.15s ease;
 --transition-normal:0.25s ease;
}

[data-theme="dark"]{
 --primary:#60a5fa;
 --primary-light:#93c5fd;
 --primary-lighter:#1e3a5f;
 --primary-dark:#3b82f6;
 --primary-bg:rgba(96, 165, 250, 0.15);
 --accent-green:#4ade80;
 --accent-green-bg:rgba(74, 222, 128, 0.15);
 --accent-orange:#fb923c;
 --accent-red:#f87171;
 --accent-purple:#c084fc;
 --accent-cyan:#22d3ee;
 --accent-pink:#f472b6;
 --text-primary:#e2e8f0;
 --text-secondary:#94a3b8;
 --text-muted:#64748b;
 --bg-color:#0f172a;
 --bg-secondary:#1e293b;
 --bg-tertiary:#334155;
 --border-color:#334155;
 --border-light:#1e293b;
 --shadow-sm:0 1px 3px rgba(0, 0, 0, 0.3);
 --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.4);
 --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .categories-section,
[data-theme="dark"] .skills-section{
 background:rgba(15,23,42,0.8);
}

[data-theme="dark"] .hero-section{
 background:linear-gradient(135deg, rgba(30,41,59,0.75) 0%, rgba(15,23,42,0.7) 100%);
}

[data-theme="dark"] .social-btn{
 background:rgba(30,41,59,0.6);
 border-color:rgba(255,255,255,0.08);
}

[data-theme="dark"] .category-card{
 background:rgba(30,41,59,0.7);
}

[data-theme="dark"] .skills-img{
 background:rgba(30,41,59,0.6);
}

html{
 font-size:16px;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 text-rendering:optimizeLegibility;
 scroll-behavior:smooth;
}

body{
 font-family:var(--font-sans);
 color:var(--text-primary);
 background-color:var(--bg-color);
 line-height:1.75;
 letter-spacing:0.01em;
 transition:background-color var(--transition-normal), color var(--transition-normal);
}

.post-content{
 max-width:900px;
 margin:0 auto;
 padding:24px 0;
 overflow-wrap:break-word;
 word-break:break-word;
}

.post-content #markdown-toc{
 display:none;
}

@media only screen and (min-width:1200px){
 .post-content{
 max-width:920px;
}

}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6{
 position:relative;
 color:var(--text-primary);
 font-family:var(--font-sans);
 font-weight:600;
 line-height:1.4;
 margin-top:1.8em;
 margin-bottom:0.8em;
 margin-left:8px;
 cursor:text;
}

.post-content h1{
 font-size:2.1em;
 font-weight:700;
 padding-left:18px;
 padding-bottom:0.5em;
 margin-top:0.5em;
 border-bottom:3px solid transparent;
 border-image:linear-gradient(90deg, var(--primary), var(--primary-light), transparent) 1;
 border-image-slice:0 0 1 0;
 border-image-width:0 0 3px 0;
}

.post-content h2{
 font-size:1.65em;
 padding-left:14px;
 padding-bottom:0.4em;
 border-left:4px solid var(--primary);
 border-bottom:1px solid var(--border-light);
 background:linear-gradient(90deg, var(--primary-bg), transparent 80%);
}

.post-content h3{
 font-size:1.35em;
 padding-left:10px;
 border-left:3px solid var(--accent-green);
}

.post-content h4{
 font-size:1.15em;
 color:var(--text-secondary);
}

.post-content h4::before{
 content:"◆";
 color:var(--primary);
 margin-right:8px;
 font-size:0.7em;
 vertical-align:middle;
}

.post-content h5{font-size:1em;color:var(--text-secondary)}

.post-content h6{font-size:0.95em;color:var(--text-muted)}

.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child{
 margin-top:0;
 padding-top:0;
}

.post-content h1 code,
.post-content h2 code,
.post-content h3 code,
.post-content h4 code{
 font-size:0.9em;
 font-weight:500;
 background-color:var(--primary-bg);
 color:var(--primary);
 border:none;
}

.post-content p{
 margin:0 0 1.1em 0;
 line-height:1.8;
}

.post-content strong,
.post-content b{
 font-weight:700;
 color:var(--text-primary);
}

.post-content em,
.post-content i{
 font-style:italic;
 color:var(--text-secondary);
}

.post-content strong em,
.post-content em strong{
 color:var(--primary-dark);
}

.post-content mark{
 background:transparent;
 padding:0.1em 0.2em;
 border-radius:0;
 box-decoration-break:clone;
 -webkit-box-decoration-break:clone;
 box-shadow:0 -0.6em 0 0 rgba(253, 224, 71, 0.5) inset;
 transition:box-shadow var(--transition-fast);
}

.post-content mark:hover{
 box-shadow:0 -1.2em 0 0 rgba(253, 224, 71, 0.7) inset;
}

.post-content del,
.post-content s{
 text-decoration:none;
 color:var(--text-muted);
 background:linear-gradient(to bottom, transparent 45%, var(--accent-red) 45%, var(--accent-red) 55%, transparent 55%);
}

.post-content a{
 color:var(--primary);
 text-decoration:none;
 background:linear-gradient(to right, var(--primary-light), var(--primary)) no-repeat right bottom;
 background-size:0% 2px;
 transition:background-size var(--transition-normal), color var(--transition-fast);
 padding-bottom:2px;
}

.post-content a:hover{
 color:var(--primary-dark);
 background-size:100% 2px;
 background-position:left bottom;
}

.post-content ul,
.post-content ol{
 padding-left:2em;
 margin:0.6em 0 1.2em 0;
}

.post-content li{
 margin:0.5em 0;
 line-height:1.75;
 position:relative;
}

.post-content li > ul,
.post-content li > ol{
 margin:0.4em 0;
}

.post-content ul{
 list-style-type:disc;
 list-style-position:outside;
}

.post-content ul > li{
 padding-left:0.3em;
}

.post-content ul > li::marker{
 color:var(--primary);
 font-size:1em;
}

.post-content ul ul{
 list-style-type:circle;
}

.post-content ul ul > li::marker{
 color:var(--accent-green);
}

.post-content ul ul ul{
 list-style-type:square;
}

.post-content ul ul ul > li::marker{
 color:var(--accent-orange);
}

.post-content ol{
 list-style:none;
 counter-reset:ol-counter;
 padding-left:2.2em;
}

.post-content ol > li{
 counter-increment:ol-counter;
 position:relative;
 padding-left:0.5em;
}

.post-content ol > li::before{
 content:counter(ol-counter);
 position:absolute;
 left:-2em;
 width:1.6em;
 height:1.6em;
 background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color:white;
 font-size:0.8em;
 font-weight:600;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 2px 4px rgba(11, 114, 217, 0.3);
 top:0.25em;
}

.post-content ol ol{
 counter-reset:ol-counter-2;
 padding-left:2em;
}

.post-content ol ol > li{
 counter-increment:ol-counter-2;
}

.post-content ol ol > li::before{
 content:counter(ol-counter-2, lower-alpha);
 background:linear-gradient(135deg, var(--accent-green) 0%, #16a34a 100%);
 border-radius:var(--radius-xs);
 width:1.5em;
 height:1.5em;
 font-size:0.75em;
 left:-1.8em;
 box-shadow:0 2px 4px rgba(34, 197, 94, 0.3);
 top:0.3em;
}

.post-content ol ol ol{
 counter-reset:ol-counter-3;
 padding-left:2em;
}

.post-content ol ol ol > li{
 counter-increment:ol-counter-3;
}

.post-content ol ol ol > li::before{
 content:counter(ol-counter-3, lower-roman);
 background:linear-gradient(135deg, var(--accent-orange) 0%, #ea580c 100%);
 border-radius:2px;
 width:1.5em;
 height:1.5em;
 font-size:0.7em;
 left:-1.8em;
 box-shadow:0 2px 4px rgba(249, 115, 22, 0.3);
 top:0.35em;
}

.post-content ol ol ol ol{
 counter-reset:ol-counter-4;
}

.post-content ol ol ol ol > li{
 counter-increment:ol-counter-4;
}

.post-content ol ol ol ol > li::before{
 content:counter(ol-counter-4);
 background:linear-gradient(135deg, var(--accent-purple) 0%, #7c3aed 100%);
 border-radius:50%;
 width:1.4em;
 height:1.4em;
 font-size:0.7em;
 box-shadow:0 2px 4px rgba(168, 85, 247, 0.3);
 top:0.4em;
}

.post-content ol > li:has(h1)::before,
.post-content ol > li:has(h2)::before,
.post-content ol > li:has(h3)::before,
.post-content ol > li:has(h4)::before{
 font-size:1em;
 top:0.5em;
 transform:none;
}

.post-content ol > li:has(h1)::before{
 width:2em;
 height:2em;
 left:-2.4em;
}

.post-content ol > li:has(h2)::before{
 width:1.9em;
 height:1.9em;
 left:-2.3em;
}

.post-content ol > li:has(h3)::before{
 width:1.8em;
 height:1.8em;
 left:-2.2em;
}

.post-content ol > li:has(h4)::before{
 width:1.7em;
 height:1.7em;
 left:-2.1em;
}

.post-content ol > li > h1,
.post-content ol > li > h2,
.post-content ol > li > h3,
.post-content ol > li > h4{
 margin-top:0.3em;
 display:inline;
}

.post-content u{
 text-decoration:none;
 border-bottom:2px solid var(--accent-cyan);
 padding-bottom:1px;
}

.post-content sup,
.post-content sub{
 font-size:0.75em;
 font-weight:500;
}

.post-content sup{color:var(--accent-red)}

.post-content sub{color:var(--accent-purple)}

.post-content abbr[title]{
 text-decoration:none;
 border-bottom:1px dotted var(--primary);
 cursor:help;
}

.post-content .task-list-item{
 list-style:none;
 padding-left:0.5em;
}

.post-content .task-list-item input[type="checkbox"]{
 margin-right:0.5em;
 width:16px;
 height:16px;
 accent-color:var(--accent-green);
 vertical-align:middle;
 cursor:pointer;
}

.post-content blockquote{
 margin:1.2em 0;
 padding:1em 1.2em;
 border-left:4px solid var(--primary);
 background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
 border-radius:0 var(--radius-md) var(--radius-md) 0;
 color:var(--text-secondary);
 position:relative;
 box-shadow:var(--shadow-sm);
}

.post-content blockquote::before{
 content:"\201C";
 position:absolute;
 top:-5px;
 left:12px;
 font-size:3em;
 color:var(--primary);
 opacity:0.15;
 font-family:Georgia, serif;
 line-height:1;
}

.post-content blockquote p{
 margin:0.5em 0;
 color:inherit;
 font-weight:normal;
 line-height:1.8;
}

.post-content blockquote p:first-child{margin-top:0}

.post-content blockquote p:last-child{margin-bottom:0}

.post-content blockquote blockquote{
 margin:0.8em 0;
 border-left-color:var(--accent-green);
}

.post-content blockquote blockquote::before{
 display:none;
}

.post-content hr{
 height:3px;
 margin:2.5em 0;
 border:0;
 background:linear-gradient(90deg, 
 var(--accent-cyan) 0%, 
 var(--primary) 25%, 
 var(--accent-purple) 50%, 
 var(--accent-pink) 75%, 
 var(--accent-orange) 100%);
 border-radius:2px;
 overflow:visible;
 position:relative;
}

.post-content hr::before{
 content:"";
 position:absolute;
 inset:0;
 background:inherit;
 filter:blur(6px);
 opacity:0.4;
}

.post-content code:not(pre code){
 font-family:var(--font-mono);
 font-size:0.88em;
 background:linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
 border:1px solid #fecaca;
 border-radius:var(--radius-sm);
 padding:0.15em 0.5em;
 color:#dc2626;
 font-weight:500;
 white-space:nowrap;
}

[data-theme="dark"] .post-content code:not(pre code){
 background:linear-gradient(135deg, #3f1515 0%, #4a1d1d 100%);
 border-color:#7f1d1d;
 color:#fca5a5;
}

.post-content p > code:nth-of-type(3n+2),
.post-content li > code:nth-of-type(3n+2){
 background:linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
 border-color:#bbf7d0;
 color:#16a34a;
}

[data-theme="dark"] .post-content p > code:nth-of-type(3n+2),
[data-theme="dark"] .post-content li > code:nth-of-type(3n+2){
 background:linear-gradient(135deg, #14352a 0%, #1a4034 100%);
 border-color:#166534;
 color:#86efac;
}

.post-content p > code:nth-of-type(3n),
.post-content li > code:nth-of-type(3n){
 background:linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
 border-color:#e9d5ff;
 color:#9333ea;
}

[data-theme="dark"] .post-content p > code:nth-of-type(3n),
[data-theme="dark"] .post-content li > code:nth-of-type(3n){
 background:linear-gradient(135deg, #2e1a47 0%, #3b2456 100%);
 border-color:#6b21a8;
 color:#d8b4fe;
}

.post-content pre{
 font-family:var(--font-mono);
 font-size:0.9em;
 background:linear-gradient(180deg, #fafbfc 0%, #f6f8fa 100%);
 border:1px solid var(--border-color);
 border-radius:var(--radius-lg);
 padding:20px 24px;
 padding-top:28px;
 margin:1.5em 0;
 overflow-x:auto;
 line-height:1.65;
 box-shadow:var(--shadow-sm);
 position:relative;
}

.post-content pre::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg, var(--primary) 0%, var(--accent-cyan) 50%, var(--accent-green) 100%);
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.post-content pre code{
 font-family:var(--font-mono);
 font-size:inherit;
 background:transparent;
 border:none;
 padding:0;
 color:inherit;
 white-space:pre;
 border-radius:0;
}

[data-theme="dark"] .post-content pre{
 background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
 border-color:var(--border-color);
}

.code-copy-btn{
 position:absolute;
 top:12px;
 right:12px;
 padding:6px 12px;
 font-size:12px;
 background:var(--bg-color);
 border:1px solid var(--border-color);
 border-radius:var(--radius-sm);
 cursor:pointer;
 opacity:0;
 transition:opacity var(--transition-fast), background-color var(--transition-fast);
 color:var(--text-secondary);
 z-index:10;
}

.post-content pre:hover .code-copy-btn{
 opacity:1;
}

.code-copy-btn:hover{
 background:var(--primary-bg);
 color:var(--primary);
}

.code-copy-btn.copied{
 background:var(--accent-green-bg);
 color:var(--accent-green);
 border-color:var(--accent-green);
}

.post-content table{
 border-collapse:separate;
 border-spacing:0;
 width:100%;
 margin:1.2em 0;
 font-size:0.95em;
 border-radius:var(--radius-lg);
 overflow:hidden;
 box-shadow:var(--shadow-sm);
 border:1px solid var(--border-color);
}

.post-content table thead{
 background:linear-gradient(180deg, #e2e8f0 0%, #d1d9e0 100%);
}

[data-theme="dark"] .post-content table thead{
 background:linear-gradient(180deg, #334155 0%, #1e293b 100%);
}

.post-content table th{
 color:var(--text-primary);
 font-weight:700;
 font-size:0.95em;
 padding:14px 18px;
 text-align:left;
 border:none;
 border-bottom:3px solid var(--primary);
 border-right:1px solid var(--border-color);
}

.post-content table th:last-child{
 border-right:none;
}

.post-content table tbody td{
 padding:11px 16px;
 border:none;
 border-bottom:1px solid var(--border-light);
 background:var(--bg-color);
}

.post-content table tbody tr:nth-child(2n) td{
 background:var(--bg-secondary);
}

.post-content table tbody tr:hover td{
 background:var(--primary-bg);
}

.post-content table tbody tr:last-child td{
 border-bottom:none;
}

.post-content table thead tr{
 background:transparent;
}

.post-content table th{
 background:transparent !important;
}

.post-content table th:first-child{border-top-left-radius:var(--radius-lg)}

.post-content table th:last-child{border-top-right-radius:var(--radius-lg)}

.post-content table tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg)}

.post-content table tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg)}

.post-content figure{
 margin:1.5em 0;
 text-align:center;
}

.post-content figure img{
 margin-bottom:0.8em;
 max-width:100%;
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-md);
}

.post-content figcaption{
 font-size:0.9em;
 color:var(--text-muted);
 font-style:italic;
}

.post-content img{
 max-width:100%;
 height:auto;
 display:block;
 margin:1.5em auto;
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-md);
 transition:all var(--transition-normal);
 cursor:zoom-in;
}

.post-content img:hover{
 box-shadow:var(--shadow-xl);
 transform:translateY(-2px);
}

.image-lightbox{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0, 0, 0, 0.9);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:9999;
 opacity:0;
 visibility:hidden;
 transition:opacity var(--transition-normal), visibility var(--transition-normal);
 cursor:zoom-out;
}

.image-lightbox.active{
 opacity:1;
 visibility:visible;
}

.image-lightbox img{
 max-width:90%;
 max-height:90%;
 object-fit:contain;
 cursor:default;
 box-shadow:var(--shadow-xl);
}

.reading-progress{
 position:fixed;
 top:0;
 left:0;
 width:0%;
 height:3px;
 background:linear-gradient(90deg, var(--primary), var(--accent-cyan), var(--accent-green));
 z-index:9999;
 transition:width 0.1s ease-out;
}

.back-to-top{
 position:fixed;
 bottom:30px;
 right:30px;
 width:48px;
 height:48px;
 background:linear-gradient(135deg, var(--primary), var(--primary-dark));
 color:white;
 border:none;
 border-radius:50%;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:var(--shadow-lg);
 opacity:0;
 visibility:hidden;
 transform:translateY(20px);
 transition:all var(--transition-normal);
 z-index:1000;
}

.back-to-top.visible{
 opacity:1;
 visibility:visible;
 transform:translateY(0);
}

.back-to-top:hover{
 transform:translateY(-3px);
 box-shadow:var(--shadow-xl), var(--shadow-glow);
}

.back-to-top svg{
 width:24px;
 height:24px;
}

.theme-toggle{
 position:fixed;
 bottom:90px;
 right:30px;
 width:48px;
 height:48px;
 background:var(--bg-secondary);
 border:1px solid var(--border-color);
 border-radius:50%;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:var(--shadow-md);
 transition:all var(--transition-normal);
 z-index:1000;
}

.theme-toggle:hover{
 transform:scale(1.1);
 box-shadow:var(--shadow-lg);
}

.theme-toggle svg{
 width:24px;
 height:24px;
 color:var(--text-primary);
 transition:transform var(--transition-normal);
}

.theme-toggle:hover svg{
 transform:rotate(15deg);
}

.theme-toggle .icon-sun{
 display:none;
}

.theme-toggle .icon-moon{
 display:block;
}

[data-theme="dark"] .theme-toggle .icon-sun{
 display:block;
}

[data-theme="dark"] .theme-toggle .icon-moon{
 display:none;
}

.post-layout{
 display:flex;
 align-items:flex-start;
 max-width:1600px;
 margin:0 auto;
 padding:20px;
 gap:20px;
 position:relative;
 z-index:1;
 min-height:100vh;
}

.post-main{
 flex:1;
 min-width:0;
 overflow-x:hidden;
}

.post-toc-sidebar{
 width:220px;
 min-width:220px;
 max-width:220px;
 flex-shrink:0;
 position:sticky;
 top:20px;
 max-height:calc(100vh - 40px);
 overflow-y:auto;
}

.toc-panel{
 background:rgba(255, 255, 255, 0.95);
 border:1px solid rgba(255, 255, 255, 0.3);
 border-radius:var(--radius-lg);
 padding:16px;
 box-shadow:0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .toc-panel{
 background:rgba(30, 30, 30, 0.95);
 border-color:rgba(255, 255, 255, 0.08);
}

.toc-panel::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:linear-gradient(90deg, var(--primary), var(--accent-purple));
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.toc-title{
 display:flex;
 align-items:center;
 gap:6px;
 font-size:0.85em;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:0.5px;
 color:var(--primary);
 margin-bottom:10px;
 padding-bottom:8px;
 border-bottom:1px solid var(--border-light);
}

.toc-title svg{
 flex-shrink:0;
 color:var(--primary);
}

.toc-list{
 list-style:none;
 padding:0;
 margin:0;
}

.toc-list li{
 margin:2px 0;
}

.toc-list a{
 display:block;
 padding:5px 8px;
 font-size:0.82em;
 color:var(--text-secondary);
 text-decoration:none;
 border-radius:var(--radius-sm);
 transition:all var(--transition-fast);
 border-left:2px solid transparent;
 line-height:1.4;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.toc-list a:hover{
 background:var(--primary-bg);
 color:var(--primary);
}

.toc-list a.active{
 background:var(--primary-bg);
 color:var(--primary);
 border-left-color:var(--primary);
 font-weight:500;
}

.toc-list a.toc-h1{
 font-weight:600;
 color:var(--text-primary);
}

.toc-list a.toc-h3{
 padding-left:20px;
 font-size:0.8em;
}

.toc-list a.toc-h4{
 padding-left:32px;
 font-size:0.78em;
 color:var(--text-muted);
}

.post-category-sidebar{
 width:220px;
 min-width:220px;
 max-width:220px;
 flex-shrink:0;
 position:sticky;
 top:20px;
 max-height:calc(100vh - 40px);
 overflow-y:auto;
}

.category-panel{
 background:rgba(255, 255, 255, 0.95);
 border:1px solid rgba(255, 255, 255, 0.3);
 border-radius:var(--radius-lg);
 padding:16px;
 box-shadow:0 4px 16px rgba(0, 0, 0, 0.06);
 position:relative;
}

[data-theme="dark"] .category-panel{
 background:rgba(30, 30, 30, 0.95);
 border-color:rgba(255, 255, 255, 0.08);
}

.category-panel::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.category-sidebar-title{
 display:flex;
 align-items:center;
 gap:6px;
 font-size:0.85em;
 font-weight:600;
 color:var(--accent-green);
 margin-bottom:10px;
 padding-bottom:8px;
 border-bottom:1px solid var(--border-light);
}

.category-sidebar-title svg{
 flex-shrink:0;
 color:var(--accent-green);
}

.category-article-list{
 list-style:none;
 padding:0;
 margin:0;
}

.category-article-list li{
 margin:2px 0;
}

.category-article-list li a{
 display:flex;
 align-items:baseline;
 gap:6px;
 padding:5px 8px;
 font-size:0.82em;
 color:var(--text-secondary);
 text-decoration:none;
 border-radius:var(--radius-sm);
 transition:all var(--transition-fast);
 border-left:2px solid transparent;
 line-height:1.4;
}

.category-article-list li a:hover{
 background:rgba(34, 197, 94, 0.08);
 color:var(--accent-green);
}

.category-article-list li.active a{
 background:rgba(34, 197, 94, 0.1);
 color:var(--accent-green);
 border-left-color:var(--accent-green);
 font-weight:500;
}

.category-article-list .article-title{
 flex:1;
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.category-article-list .article-date{
 flex-shrink:0;
 font-size:0.85em;
 color:var(--text-muted);
}

.post-toc-sidebar::-webkit-scrollbar,
.post-category-sidebar::-webkit-scrollbar{
 width:4px;
}

.post-toc-sidebar::-webkit-scrollbar-thumb,
.post-category-sidebar::-webkit-scrollbar-thumb{
 background:var(--border-color);
 border-radius:2px;
}

@media (max-width:1200px){
 .post-category-sidebar{
 display:none;
}

 .post-layout{
 max-width:1100px;
}

}

@media (max-width:900px){
 .post-toc-sidebar{
 display:none;
}

 .post-layout{
 padding:10px;
}

}

.post-meta-info{
 display:flex;
 align-items:center;
 gap:16px;
 flex-wrap:wrap;
 font-size:0.9em;
 color:var(--text-muted);
 margin-bottom:1.5em;
 padding-bottom:1em;
 border-bottom:1px solid var(--border-light);
}

.post-meta-info .meta-item{
 display:flex;
 align-items:center;
 gap:6px;
}

.post-meta-info .meta-item svg{
 width:16px;
 height:16px;
}

.post-content dl{
 margin:1.2em 0;
}

.post-content dt{
 font-weight:600;
 color:var(--primary);
 margin-top:1em;
 padding-left:12px;
 border-left:3px solid var(--primary);
}

.post-content dd{
 margin-left:2em;
 padding:0.5em 0 0.5em 1em;
 color:var(--text-secondary);
 border-left:1px dashed var(--border-color);
}

.post-content kbd{
 display:inline-block;
 padding:4px 10px;
 font-family:var(--font-sans);
 font-size:0.8em;
 font-weight:500;
 line-height:1.4;
 color:var(--text-primary);
 background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
 border:1px solid var(--border-color);
 border-radius:var(--radius-sm);
 box-shadow:0 2px 0 var(--border-color), inset 0 1px 0 rgba(255,255,255,0.8);
}

[data-theme="dark"] .post-content kbd{
 background:linear-gradient(180deg, #334155 0%, #1e293b 100%);
 box-shadow:0 2px 0 #0f172a, inset 0 1px 0 rgba(255,255,255,0.1);
}

.post-content .footnotes{
 font-size:0.9em;
 color:var(--text-secondary);
 margin-top:3em;
 padding-top:1.5em;
 position:relative;
}

.post-content .footnotes::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:2px;
 background:linear-gradient(90deg, var(--primary) 0%, transparent 100%);
}

.post-content .footnotes::after{
 content:"Footnotes";
 display:block;
 font-weight:600;
 font-size:0.9em;
 text-transform:uppercase;
 letter-spacing:0.5px;
 color:var(--primary);
 margin-bottom:12px;
}

.post-content .footnotes ol{
 padding-left:1.5em;
}

.post-content .footnotes li{
 margin:0.5em 0;
 padding-left:0.5em;
}

/* Math / LaTeX - align with Typora clarity theme */
mjx-container[display="true"]{
 display:block;
 margin:1.5em 0;
 padding:1em 1.5em;
 background:linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
 border:1px solid #fde047;
 border-radius:10px;
 overflow-x:auto;
 text-align:center;
}

mjx-container[display="true"]:hover{
 box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
}

mjx-container:not([display]){
 background:rgba(253,224,71,0.2);
 padding:0.1em 0.3em;
 border-radius:4px;
}

mjx-container{
 font-size:1.1em !important;
}

[data-theme="dark"] mjx-container[display="true"]{
 background:linear-gradient(135deg, rgba(253,224,71,0.1) 0%, rgba(254,249,195,0.08) 100%);
 border-color:rgba(253,224,71,0.3);
}

[data-theme="dark"] mjx-container:not([display]){
 background:rgba(253,224,71,0.1);
}

::selection{
 background-color:var(--primary-bg);
 color:var(--primary);
}

::-webkit-scrollbar{
 width:8px;
 height:8px;
}

::-webkit-scrollbar-track{
 background:var(--bg-secondary);
 border-radius:4px;
}

::-webkit-scrollbar-thumb{
 background:linear-gradient(180deg, var(--border-color) 0%, #c1c9d1 100%);
 border-radius:4px;
}

::-webkit-scrollbar-thumb:hover{
 background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}

@keyframes fadeIn{
 from{opacity:0;transform:translateY(10px)}

 to{opacity:1;transform:translateY(0)}

}

.post-content{
 animation:fadeIn 0.5s ease-out;
}

@media print{
 .reading-progress,
 .back-to-top,
 .theme-toggle,
 .code-copy-btn{
 display:none !important;
}

 .post-content{
 max-width:100%;
}

 .post-content pre{
 box-shadow:none;
 border:1px solid #ccc;
}

}

.docs-container{
 transition:background-color var(--transition-normal), color var(--transition-normal);
}

.panel.docs-content{
 background:rgba(255, 255, 255, 0.95);
 border:1px solid rgba(255, 255, 255, 0.3);
 border-radius:var(--radius-lg);
 padding:1px 40px 60px 40px;
 transition:background-color var(--transition-normal), border-color var(--transition-normal);
 box-shadow:0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .panel.docs-content{
 background:rgba(30, 30, 30, 0.95);
 border-color:rgba(255, 255, 255, 0.08);
}

.sidebar{
 background:rgba(248, 250, 252, 0.95);
 border-radius:var(--radius-md);
 padding:15px;
 transition:background-color var(--transition-normal);
}

[data-theme="dark"] .sidebar{
 background:rgba(30, 30, 30, 0.8);
}

.post-background{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image:url('/styles/images/api/background.webp');
 background-size:cover;
 background-position:center;
 z-index:-2;
}

.post-background::after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(255, 255, 255, 0.15);
 z-index:-1;
}

[data-theme="dark"] .post-background::after{
 background:rgba(0, 0, 0, 0.4);
}

.sidebar h1,
.sidebar h2,
.sidebar h3{
 color:var(--text-primary);
}

.sidebar a{
 color:var(--text-secondary);
 transition:color var(--transition-fast);
}

.sidebar a:hover{
 color:var(--primary);
}

.docs-content.home h2{
 font-size:1.5em;
 padding-left:12px;
 border-left:4px solid var(--primary);
 margin-top:1.5em;
 margin-bottom:0.8em;
 color:var(--text-primary);
}

.docs-content.home ul{
 list-style:none;
 padding-left:0;
}

.docs-content.home li{
 padding:10px 15px;
 margin:8px 0;
 background:var(--bg-secondary);
 border-radius:var(--radius-md);
 border-left:3px solid transparent;
 transition:all var(--transition-fast);
}

.docs-content.home li:hover{
 background:var(--primary-bg);
 border-left-color:var(--primary);
 transform:translateX(5px);
}

.docs-content.home li a{
 color:var(--text-primary);
 font-weight:500;
}

.docs-content.home li a:hover{
 color:var(--primary);
}

.docs-content.home .text-muted{
 color:var(--text-muted);
 font-size:0.85em;
}

.navbar,
.docs-header{
 background:var(--bg-color);
 border-color:var(--border-color);
 transition:background-color var(--transition-normal), border-color var(--transition-normal);
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .docs-header{
 background:var(--bg-secondary);
}

.navbar a,
.docs-header a{
 color:var(--text-primary);
}

.jumbotron,
.banner{
 background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color:white;
}

footer,
.site-footer{
 background:var(--bg-secondary);
 border-top:1px solid var(--border-color);
 color:var(--text-secondary);
 transition:background-color var(--transition-normal), border-color var(--transition-normal);
}

[data-theme="dark"] footer,
[data-theme="dark"] .site-footer{
 background:var(--bg-tertiary);
}

.post-title{
 font-size:2em;
 font-weight:700;
 color:var(--text-primary);
 margin-bottom:0.5em;
 line-height:1.3;
}

.post-header{
 max-width:900px;
 margin:0 auto 2em;
}

@media (max-width:768px){
 .post-content{
 padding:15px;
}

 .post-content h1{
 font-size:1.6em;
}

 .post-content h2{
 font-size:1.4em;
}

 .panel.docs-content{
 padding:1px 12px 40px 12px;
}

 .post-header .post-title{
 font-size:1.5em;
}

 .post-meta-info{
 flex-direction:column;
 gap:8px;
}

 .back-to-top,
 .theme-toggle{
 width:40px;
 height:40px;
 right:15px;
}

 .back-to-top{
 bottom:15px;
}

 .theme-toggle{
 bottom:65px;
}

}

.site-footer{
 background:linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
 border-top:3px solid var(--primary);
 padding:40px 0 30px;
 margin-top:60px;
 transition:all var(--transition-normal);
}

.footer-content{
 text-align:center;
}

.footer-info h4{
 color:var(--text-primary);
 font-size:1.3em;
 font-weight:600;
 margin-bottom:8px;
}

.footer-info p{
 color:var(--text-secondary);
 font-size:0.95em;
 margin-bottom:20px;
}

.footer-links{
 display:flex;
 justify-content:center;
 gap:20px;
 margin-bottom:20px;
}

.footer-links a{
 display:flex;
 align-items:center;
 justify-content:center;
 width:44px;
 height:44px;
 background:var(--bg-color);
 border:1px solid var(--border-color);
 border-radius:50%;
 color:var(--text-secondary);
 font-size:1.2em;
 transition:all var(--transition-fast);
}

.footer-links a:hover{
 background:var(--primary);
 border-color:var(--primary);
 color:white;
 transform:translateY(-3px);
 box-shadow:var(--shadow-md);
}

.footer-copyright{
 color:var(--text-muted);
 font-size:0.85em;
}

.sidebar{
 background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
 border-radius:var(--radius-lg);
 padding:20px;
 border:1px solid var(--border-light);
 box-shadow:var(--shadow-sm);
 position:sticky;
 top:20px;
 max-height:calc(100vh - 40px);
 overflow-y:auto;
}

.sidebar h1,
.sidebar .sidebar-title{
 font-size:1.1em;
 font-weight:600;
 color:var(--primary);
 padding-bottom:12px;
 margin-bottom:15px;
 border-bottom:2px solid var(--primary-bg);
 display:flex;
 align-items:center;
 gap:8px;
}

.sidebar h1::before,
.sidebar .sidebar-title::before{
 content:"";
 width:4px;
 height:20px;
 background:linear-gradient(180deg, var(--primary) 0%, var(--accent-cyan) 100%);
 border-radius:2px;
}

.sidenav,
.sidebar ul{
 list-style:none;
 padding:0;
 margin:0;
}

.sidenav li,
.sidebar li{
 margin:4px 0;
}

.sidenav a,
.sidebar a{
 display:block;
 padding:10px 14px;
 color:var(--text-secondary);
 text-decoration:none;
 border-radius:var(--radius-md);
 border-left:3px solid transparent;
 transition:all var(--transition-fast);
 font-size:0.9em;
}

.sidenav a:hover,
.sidebar a:hover{
 background:var(--primary-bg);
 color:var(--primary);
 border-left-color:var(--primary);
 transform:translateX(4px);
}

.sidenav .text-muted{
 color:var(--text-muted);
 font-size:0.8em;
 margin-left:6px;
}

.docs-content.home{
 background:var(--bg-color);
 border-radius:var(--radius-lg);
 padding:30px;
 box-shadow:var(--shadow-sm);
 border:1px solid var(--border-light);
}

.docs-content.home h2{
 font-size:1.4em;
 font-weight:600;
 color:var(--text-primary);
 padding:12px 16px;
 margin:30px 0 20px;
 background:linear-gradient(90deg, var(--primary-bg), transparent 80%);
 border-left:4px solid var(--primary);
 border-radius:0 var(--radius-md) var(--radius-md) 0;
 display:flex;
 align-items:center;
 gap:10px;
}

.docs-content.home h2:first-of-type{
 margin-top:0;
}

.docs-content.home h2::before{
 content:"";
 width:8px;
 height:8px;
 background:var(--primary);
 border-radius:50%;
 box-shadow:0 0 0 3px var(--primary-lighter);
}

.docs-content.home ul{
 list-style:none;
 padding:0;
 display:grid;
 gap:10px;
}

.docs-content.home li{
 margin:0;
}

.docs-content.home li a{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:14px 18px;
 background:var(--bg-secondary);
 border-radius:var(--radius-md);
 border:1px solid var(--border-light);
 color:var(--text-primary);
 text-decoration:none;
 transition:all var(--transition-fast);
 font-weight:500;
}

.docs-content.home li a:hover{
 background:var(--primary-bg);
 border-color:var(--primary);
 transform:translateX(6px);
 box-shadow:var(--shadow-sm);
}

.docs-content.home li a .post-date{
 color:var(--text-muted);
 font-size:0.85em;
 font-weight:400;
}

.navbar-default{
 background:var(--bg-color);
 border-color:var(--border-color);
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-normal);
}

[data-theme="dark"] .navbar-default{
 background:var(--bg-secondary);
}

.navbar-brand{
 font-weight:600;
 color:var(--primary) !important;
 font-size:1.3em;
}

.navbar-nav > li > a{
 color:var(--text-secondary) !important;
 transition:color var(--transition-fast);
}

.navbar-nav > li > a:hover{
 color:var(--primary) !important;
}

.jumbotron,
.docs-header{
 background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color:white;
 padding:30px 0;
 margin-bottom:0;
 text-shadow:0 1px 2px rgba(0,0,0,0.1);
}

.jumbotron h1,
.docs-header h1,
.jumbotron .lead{
 color:white;
}

.category-tag{
 display:inline-block;
 padding:4px 12px;
 background:var(--primary-bg);
 color:var(--primary);
 border-radius:20px;
 font-size:0.8em;
 font-weight:500;
 margin-right:8px;
 margin-bottom:8px;
 transition:all var(--transition-fast);
}

.category-tag:hover{
 background:var(--primary);
 color:white;
}

a:focus,
button:focus{
 outline:2px solid var(--primary);
 outline-offset:2px;
}

@keyframes shimmer{
 0%{background-position:-200% 0}

 100%{background-position:200% 0}

}

.loading{
 background:linear-gradient(90deg, 
 var(--bg-secondary) 25%, 
 var(--bg-tertiary) 50%, 
 var(--bg-secondary) 75%);
 background-size:200% 100%;
 animation:shimmer 1.5s infinite;
}

#page-loading{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:var(--bg-color);
 z-index:9999;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:opacity 0.3s ease;
}

.loading-spinner{
 width:48px;
 height:48px;
 border:3px solid var(--border-light);
 border-top-color:var(--primary);
 border-radius:50%;
 animation:spin 0.8s linear infinite;
}

@keyframes spin{
 to{transform:rotate(360deg)}

}

.popup-overlay{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(0, 0, 0, 0.7);
 z-index:9998;
 display:flex;
 align-items:center;
 justify-content:center;
 opacity:0;
 visibility:hidden;
 transition:all 0.3s ease;
}

.popup-overlay.active{
 opacity:1;
 visibility:visible;
}

.popup-content{
 max-width:400px;
 max-height:90vh;
 border-radius:var(--radius-lg);
 overflow:hidden;
 transform:scale(0.9);
 transition:transform 0.3s ease;
}

.popup-overlay.active .popup-content{
 transform:scale(1);
}

.popup-img{
 width:100%;
 display:block;
}

.home-background{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image:url('/styles/images/api/background.webp');
 background-size:cover;
 background-position:center;
 z-index:-2;
}

.home-background::after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(0, 0, 0, 0.25);
 z-index:-1;
}

[data-theme="dark"] .home-background::after{
 background:rgba(0, 0, 0, 0.5);
}

.main-layout{
 display:flex;
 align-items:flex-start;
 width:100%;
 max-width:1400px;
 margin:0 auto;
 padding:20px;
 padding-bottom:50px;
 position:relative;
 z-index:1;
 min-height:100vh;
 gap:20px;
}

.main-content{
 flex:1;
 min-width:0;
 padding:20px;
 position:relative;
 text-align:left;
}

@media (min-width:1600px){
 .main-layout{
 max-width:1500px;
 padding:40px;
}

 .sidebar{
 width:280px;
 min-width:280px;
 max-width:280px;
}

 .welcome-text{
 font-size:55px;
}

 .category-icon{
 width:64px;
 height:64px;
 font-size:2.2em;
}

}

@media (min-width:1920px){
 .main-layout{
 max-width:1700px;
 padding:50px;
}

 .sidebar{
 width:300px;
 min-width:300px;
 max-width:300px;
}

 .welcome-text{
 font-size:60px;
}

 .hero-description{
 font-size:22px;
}

 .info-card{
 padding:20px;
}

 .tag{
 padding:8px 16px;
 font-size:0.9em;
}

 .category-header{
 padding:24px 28px;
}

 .category-name{
 font-size:1.3em;
}

 .article-row{
 padding:16px 20px;
}

 .article-name{
 font-size:1em;
}

}

.sidebar{
 width:230px;
 min-width:230px;
 max-width:230px;
 flex-shrink:0;
 flex-grow:0;
 position:static;
 overflow-y:visible;
 height:auto;
 padding:0 15px;
 display:flex;
 flex-direction:column;
 align-items:center;
 z-index:10;
 align-self:flex-start;
 box-sizing:border-box;
}

.sidebar::-webkit-scrollbar{
 display:none;
}

.sidebar.affix,
.sidebar.affix-bottom{
 position:static !important;
 width:auto !important;
 top:auto !important;
}

.affix{
 position:static !important;
}

.avatar-wrapper{
 position:relative;
 width:180px;
 height:180px;
 margin:0 auto 24px;
}

.avatar{
 width:100%;
 height:100%;
 border-radius:50%;
 object-fit:cover;
}

.avatar-frame{
 position:absolute;
 top:-15%;
 left:-10%;
 width:120%;
 aspect-ratio:1/1;
 pointer-events:none;
}

.info-card{
 background:var(--bg-secondary);
 border:1px solid var(--border-light);
 border-radius:var(--radius-lg);
 padding:16px;
 margin-bottom:16px;
}

.info-item{
 display:flex;
 align-items:center;
 gap:10px;
 padding:8px 0;
 color:var(--text-secondary);
 font-size:0.95em;
}

.info-item svg{
 width:20px;
 height:20px;
 fill:var(--text-muted);
 flex-shrink:0;
}

.tags-card{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

.tag{
 background:var(--primary-bg);
 color:var(--primary);
 padding:6px 12px;
 border-radius:20px;
 font-size:0.8em;
 font-weight:500;
 transition:all 0.2s ease;
}

.tag:hover{
 background:var(--primary);
 color:white;
}

.timeline-card{
 padding:20px;
}

.timeline{
 list-style:none;
 padding:0;
 margin:0;
 position:relative;
}

.timeline::before{
 content:"";
 position:absolute;
 left:6px;
 top:0;
 bottom:0;
 width:2px;
 background:var(--border-light);
}

.timeline-item{
 position:relative;
 padding-left:28px;
 padding-bottom:20px;
}

.timeline-item:last-child{
 padding-bottom:0;
}

.timeline-dot{
 position:absolute;
 left:0;
 top:4px;
 width:14px;
 height:14px;
 border-radius:50%;
 background:var(--bg-color);
 border:3px solid var(--border-light);
 transition:all 0.3s ease;
}

.timeline-item.current .timeline-dot{
 border-color:var(--primary);
 background:var(--primary);
 box-shadow:0 0 0 4px var(--primary-bg);
}

.timeline-content{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:8px;
}

.timeline-title{
 font-size:0.9em;
 color:var(--text-primary);
 font-weight:500;
}

.timeline-year{
 font-size:0.8em;
 color:var(--text-muted);
 background:var(--bg-tertiary);
 padding:2px 8px;
 border-radius:4px;
}

.main-content{
 flex:1;
 min-width:0;
}

.hero-section{
 padding:50px 40px;
 margin-bottom:40px;
 background:linear-gradient(135deg, rgba(248,250,252,0.7) 0%, rgba(255,255,255,0.65) 100%);
 border-radius:var(--radius-xl);
 border:1px solid var(--border-light);
 position:relative;
 overflow:hidden;
}

.hero-section::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
}

.mobile-avatar{
 display:none;
 width:100px;
 height:100px;
 margin:0 auto 24px;
 border-radius:50%;
 overflow:hidden;
 border:3px solid var(--primary);
}

.mobile-avatar img{
 width:100%;
 height:100%;
 object-fit:cover;
}

.welcome-text{
 font-size:2.2em;
 font-weight:800;
 color:var(--text-primary);
 margin-bottom:20px;
 line-height:1.2;
}

.gradient-text{
 background:linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
 background-size:200%;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 animation:gradientMove 8s ease infinite;
}

@keyframes gradientMove{
 0%, 100%{background-position:0% 50%}

 50%{background-position:100% 50%}

}

.hero-description{
 font-size:1.1em;
 line-height:1.8;
 color:var(--text-secondary);
 margin-bottom:28px;
}

.hero-description p{
 margin:8px 0;
}

.highlight-text{
 color:#747bff;
 font-weight:600;
}

.highlight-box{
 background:var(--primary-bg);
 padding:2px 8px;
 border-radius:4px;
 color:#747bff;
}

.social-icons{
 display:flex;
 gap:12px;
 margin-bottom:28px;
 flex-wrap:wrap;
}

.social-btn{
 display:flex;
 align-items:center;
 gap:8px;
 padding:10px 16px;
 background:rgba(255,255,255,0.5);
 border-radius:var(--radius-md);
 color:var(--text-primary);
 text-decoration:none;
 transition:all 0.3s ease;
 border:1px solid rgba(0,0,0,0.08);
}

.social-btn svg{
 width:20px;
 height:20px;
 fill:currentColor;
 flex-shrink:0;
}

.social-btn .btn-label{
 font-size:0.9em;
 font-weight:500;
}

.social-btn:hover{
 background:var(--primary);
 color:white;
 transform:translateY(-3px);
 box-shadow:0 8px 20px rgba(59, 130, 246, 0.3);
}

.snake-container{
 margin:24px 0;
 padding:16px;
 background:var(--bg-color);
 border-radius:var(--radius-lg);
 border:1px solid var(--border-light);
 overflow-x:auto;
}

.snake-container img{
 width:100%;
 min-width:600px;
 height:auto;
}

.stats-row{
 display:flex;
 gap:16px;
}

.stat-badge{
 display:flex;
 align-items:center;
 gap:8px;
 padding:12px 20px;
 background:linear-gradient(135deg, var(--primary-bg) 0%, var(--bg-secondary) 100%);
 border-radius:var(--radius-lg);
 border:1px solid var(--border-light);
}

.stat-num{
 font-size:1.5em;
 font-weight:700;
 color:var(--primary);
}

.stat-text{
 font-size:0.9em;
 color:var(--text-muted);
}

.categories-section{
 margin-bottom:60px;
 background:rgba(255,255,255,0.75);
 border:1px solid var(--border-light);
 border-radius:var(--radius-xl, 16px);
 padding:28px 24px;
}

.section-title{
 display:flex;
 align-items:center;
 gap:10px;
 font-size:1.5em;
 font-weight:700;
 color:#fff;
 margin-bottom:24px;
 padding:12px 20px;
 border-radius:var(--radius-lg, 10px);
 border-bottom:none;
}

.categories-section .section-title{
 background:linear-gradient(135deg, #0b72d9, #38b2ac);
}

.skills-section .section-title{
 background:linear-gradient(135deg, #e5533d, #f6a623);
}

.section-title svg{
 width:28px;
 height:28px;
 fill:#fff;
}

.category-list{
 display:flex;
 flex-direction:column;
 gap:16px;
}

.category-card{
 background:rgba(255,255,255,0.6);
 border:1px solid var(--border-light);
 border-radius:var(--radius-xl);
 overflow:hidden;
 transition:all 0.3s ease;
}

.category-card:hover{
 border-color:var(--primary-light);
 box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
}

.category-card[open]{
 border-color:var(--primary);
 box-shadow:0 8px 30px rgba(59, 130, 246, 0.12);
}

.category-header{
 display:flex;
 align-items:center;
 padding:20px 24px;
 cursor:pointer;
 list-style:none;
 transition:background 0.2s ease;
 gap:16px;
}

.category-header::-webkit-details-marker{
 display:none;
}

.category-header:hover{
 background:linear-gradient(90deg, var(--primary-bg) 0%, transparent 80%);
}

.category-icon{
 font-size:2em;
 width:56px;
 height:56px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
 border-radius:var(--radius-lg);
 flex-shrink:0;
}

.category-info{
 flex:1;
}

.category-name{
 display:block;
 font-size:1.2em;
 font-weight:600;
 color:var(--text-primary);
 margin-bottom:4px;
}

.category-count{
 font-size:0.85em;
 color:var(--text-muted);
}

.chevron-icon{
 width:24px;
 height:24px;
 fill:var(--text-muted);
 transition:transform 0.3s ease;
 flex-shrink:0;
}

.category-card[open] .chevron-icon{
 transform:rotate(180deg);
 fill:var(--primary);
}

.articles-container{
 padding:8px 24px 24px;
 background:linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
 border-top:1px solid var(--border-light);
}

.article-row{
 display:flex;
 align-items:center;
 padding:14px 18px;
 margin:8px 0;
 background:var(--bg-color);
 border-radius:var(--radius-md);
 text-decoration:none;
 transition:all 0.25s ease;
 gap:14px;
 border:1px solid transparent;
}

.article-row:first-child{
 margin-top:16px;
}

.article-row:hover{
 background:var(--primary-bg);
 border-color:var(--primary-light);
 transform:translateX(8px);
}

.article-dot{
 width:8px;
 height:8px;
 background:linear-gradient(135deg, var(--primary), #41d1ff);
 border-radius:50%;
 flex-shrink:0;
 transition:transform 0.2s ease;
}

.article-row:hover .article-dot{
 transform:scale(1.4);
}

.article-name{
 flex:1;
 font-size:0.95em;
 font-weight:500;
 color:var(--text-primary);
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 transition:color 0.2s ease;
}

.article-row:hover .article-name{
 color:var(--primary);
}

.article-time{
 font-size:0.8em;
 color:var(--text-muted);
 padding:4px 10px;
 background:var(--bg-secondary);
 border-radius:var(--radius-sm);
 flex-shrink:0;
}

.skills-section{
 margin-bottom:40px;
 background:rgba(255,255,255,0.75);
 border:1px solid var(--border-light);
 border-radius:var(--radius-xl, 16px);
 padding:28px 24px;
}

.skills-img{
 background:rgba(255,255,255,0.5);
 border:1px solid var(--border-light);
 border-radius:var(--radius-lg);
 padding:24px;
 overflow-x:auto;
}

.skills-img img{
 width:100%;
 height:auto;
}


@media (min-width:1025px) and (max-width:1399px){
 .main-layout{
 max-width:1150px;
}

 .sidebar{
 width:220px;
 min-width:220px;
 max-width:220px;
}

 .welcome-text{
 font-size:45px;
}

 .hero-description{
 font-size:16px;
}

}

@media (max-width:1024px){
 .main-layout{
 padding:20px;
}

 .sidebar{
 display:none;
}

 .main-content{
 width:100%;
 padding:0;
}

 .mobile-avatar{
 display:block;
}

}

@media (max-width:768px){
 .main-layout{
 padding:15px;
}

 .hero-section{
 padding:30px 20px;
}

 .welcome-text{
 font-size:1.6em;
}

 .hero-description{
 font-size:0.95em;
}

 .social-icons{
 gap:8px;
}

 .social-btn{
 padding:8px 12px;
}

 .social-btn .btn-label{
 display:none;
}

 .snake-container{
 margin:16px 0;
 padding:12px;
}

 .stats-row{
 gap:12px;
}

 .stat-badge{
 padding:10px 16px;
}

 .stat-num{
 font-size:1.2em;
}

 .section-title{
 font-size:1.2em;
}

 .category-header{
 padding:16px 18px;
 gap:12px;
}

 .category-icon{
 width:48px;
 height:48px;
 font-size:1.6em;
}

 .category-name{
 font-size:1.05em;
}

 .articles-container{
 padding:8px 16px 16px;
}

 .article-row{
 padding:12px 14px;
 gap:10px;
}

}