*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;background-color:var(--bg-color);color:var(--text-color);transition:background-color 300ms ease,color 300ms ease;min-height:100vh}:root{--bg-color: #fff;--bg-secondary: #f9fafb;--text-color: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--card-bg: #f9fafb;--primary: #6366f1;--secondary: #8b5cf6;--accent: #06b6d4}[data-theme="dark"]{--bg-color: #0f172a;--bg-secondary: #1e293b;--text-color: #f1f5f9;--text-secondary: #94a3b8;--border-color: #334155;--card-bg: #1e293b}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;color:var(--text-color);margin-bottom:16px}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}p{margin-bottom:16px;color:var(--text-secondary)}a{color:var(--primary);text-decoration:none;transition:color 150ms ease}a:hover{color:var(--secondary)}ul,ol{margin-bottom:16px;padding-left:24px}li{margin-bottom:4px}img{max-width:100%;height:auto;display:block}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none}input,textarea{font-family:inherit;font-size:inherit}::selection{background-color:var(--primary);color:white}::-moz-selection{background-color:var(--primary);color:white}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:var(--text-color)}blockquote{border-left:4px solid var(--primary);padding:16px 24px;margin:24px 0;color:var(--text-secondary);font-style:italic;background-color:var(--bg-secondary);border-radius:0 8px 8px 0}blockquote p:last-child{margin-bottom:0}hr{border:none;border-top:1px solid var(--border-color);margin:32px 0}table{width:100%;border-collapse:collapse;margin-bottom:24px}th,td{padding:8px 16px;border:1px solid var(--border-color);text-align:left}th{background-color:var(--bg-secondary);font-weight:600}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}@media (min-width: 1024px){.container{padding:0 32px}}.container-narrow{max-width:800px}.main-content{min-height:calc(100vh - 64px - 200px);padding-top:calc(64px + 32px);padding-bottom:64px}.grid{display:grid;gap:24px}.grid-2{grid-template-columns:1fr}@media (min-width: 768px){.grid-2{grid-template-columns:repeat(2, 1fr)}}.grid-3{grid-template-columns:1fr}@media (min-width: 768px){.grid-3{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 1024px){.grid-3{grid-template-columns:repeat(3, 1fr)}}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.section{padding:64px 0}.section-header{text-align:center;margin-bottom:48px}.section-header h2{font-size:30px;margin-bottom:8px}.section-header p{color:var(--text-secondary);max-width:600px;margin:0 auto}.hero{padding:64px 0;text-align:center}@media (min-width: 1024px){.hero{padding:96px 0;text-align:left}}.hero-content{display:flex;flex-direction:column;align-items:center;gap:32px}@media (min-width: 1024px){.hero-content{flex-direction:row;justify-content:space-between}}.hero-text{max-width:600px}.hero-text h1{font-size:30px;margin-bottom:16px}@media (min-width: 1024px){.hero-text h1{font-size:36px}}.hero-text .subtitle{font-size:18px;color:var(--text-secondary);margin-bottom:24px}.hero-avatar{width:200px;height:200px;border-radius:50%;overflow:hidden;border:4px solid var(--primary);flex-shrink:0;box-shadow:0 0 30px rgba(99,102,241,0.2);transition:transform 300ms ease,box-shadow 300ms ease}.hero-avatar:hover{transform:scale(1.05);box-shadow:0 0 40px rgba(99,102,241,0.3)}.hero-avatar img{width:100%;height:100%;object-fit:cover}.post-content{max-width:800px;margin:0 auto}.post-content h2,.post-content h3,.post-content h4{margin-top:48px;margin-bottom:16px}.post-content p{line-height:1.8;margin-bottom:24px}.post-content ul,.post-content ol{margin-bottom:24px}.post-content ul li,.post-content ol li{margin-bottom:8px}.post-content img{margin:32px auto;border-radius:8px}.post-header{text-align:center;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--border-color)}.post-header h1{font-size:30px;margin-bottom:16px}@media (min-width: 1024px){.post-header h1{font-size:36px}}.post-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;color:var(--text-secondary);font-size:14px}.page-header{text-align:center;margin-bottom:48px}.page-header h1{font-size:30px;margin-bottom:8px}.page-header p{color:var(--text-secondary)}.layout-sidebar{display:grid;gap:32px}@media (min-width: 1024px){.layout-sidebar{grid-template-columns:1fr 280px}}@media (min-width: 1024px){.sidebar{position:sticky;top:calc(64px + 24px);height:fit-content}}.navbar{position:fixed;top:0;left:0;right:0;height:64px;background-color:rgba(255,255,255,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);z-index:1000;transition:background-color 300ms ease,border-color 300ms ease}[data-theme="dark"] .navbar{background-color:rgba(15,23,42,0.8)}.navbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}.navbar-brand{font-size:20px;font-weight:700;color:var(--text-color)}.navbar-brand:hover{color:var(--primary)}.navbar-nav{display:none;list-style:none;margin:0;padding:0;gap:24px}@media (min-width: 768px){.navbar-nav{display:flex}}.navbar-nav a{color:var(--text-secondary);font-weight:500;padding:8px 0;position:relative}.navbar-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--primary);transition:width 150ms ease}.navbar-nav a:hover,.navbar-nav a.active{color:var(--primary)}.navbar-nav a:hover::after,.navbar-nav a.active::after{width:100%}.navbar-actions{display:flex;align-items:center;gap:16px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px;cursor:pointer}@media (min-width: 768px){.menu-toggle{display:none}}.menu-toggle span{display:block;width:100%;height:2px;background-color:var(--text-color);transition:transform 150ms ease,opacity 150ms ease}.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);padding:16px;z-index:999}.mobile-menu.active{display:block}@media (min-width: 768px){.mobile-menu{display:none !important}}.mobile-menu ul{list-style:none;padding:0;margin:0}.mobile-menu a{display:block;padding:16px;color:var(--text-color);border-radius:8px}.mobile-menu a:hover{background-color:var(--bg-secondary)}.theme-toggle{width:40px;height:40px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);color:var(--text-color);transition:background-color 150ms ease,transform 150ms ease}.theme-toggle:hover{transform:scale(1.1)}.theme-toggle svg{width:20px;height:20px}.theme-toggle .sun-icon{display:none}.theme-toggle .moon-icon{display:block}[data-theme="dark"] .theme-toggle .sun-icon{display:block}[data-theme="dark"] .theme-toggle .moon-icon{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px;font-weight:500;border-radius:8px;transition:all 150ms ease;cursor:pointer;text-decoration:none}.btn-primary{background-color:var(--primary);color:white}.btn-primary:hover{background-color:var(--secondary);color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,0.3)}.btn-outline{border:2px solid var(--primary);color:var(--primary);background:transparent}.btn-outline:hover{background-color:var(--primary);color:white;transform:translateY(-2px)}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:24px;transition:transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease}.card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);border-color:var(--primary)}.post-card{display:block;color:inherit}.post-card:hover{color:inherit}.post-card:hover .post-card-title{color:var(--primary)}.post-card a{display:block;color:inherit;text-decoration:none}.post-card-title{font-size:20px;font-weight:600;margin-bottom:8px;transition:color 150ms ease;color:var(--text-color)}.post-card-excerpt{color:var(--text-secondary);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.8}.post-card-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--text-secondary)}.tag{display:inline-block;padding:4px 8px;font-size:14px;background-color:var(--bg-secondary);color:var(--text-secondary);border-radius:4px;transition:all 150ms ease;cursor:pointer}.tag:hover{background-color:var(--primary);color:white}.tag.active{background-color:var(--primary);color:white}.tags{display:flex;flex-wrap:wrap;gap:8px}.tech-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}@media (min-width: 1024px){.tech-tags{justify-content:flex-start}}.tech-tag{padding:8px 16px;background:linear-gradient(135deg, var(--primary), var(--secondary));color:white;border-radius:9999px;font-size:14px;font-weight:500;transition:transform 150ms ease,box-shadow 150ms ease}.tech-tag:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(99,102,241,0.3)}.project-card .project-title{font-size:20px;font-weight:600;margin-bottom:8px;transition:color 150ms ease}.project-card .project-description{color:var(--text-secondary);margin-bottom:16px;line-height:1.8}.project-card .project-links{display:flex;gap:16px}.project-card:hover .project-title{color:var(--primary)}.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:48px 0;margin-top:auto}.footer-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}.footer-social{display:flex;gap:16px}.footer-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-color);border-radius:9999px;color:var(--text-secondary);transition:all 150ms ease}.footer-social a:hover{background-color:var(--primary);color:white;transform:translateY(-3px)}.footer-social a svg{width:20px;height:20px}.footer-copyright{color:var(--text-secondary);font-size:14px}.footer-copyright a{color:var(--primary)}.footer-copyright a:hover{text-decoration:underline}.toc{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:24px}.toc h3{font-size:16px;margin-bottom:16px;color:var(--text-color)}.toc ul{list-style:none;padding:0;margin:0}.toc li{margin-bottom:4px}.toc a{display:block;padding:4px 0;color:var(--text-secondary);font-size:14px;border-left:2px solid transparent;padding-left:16px;transition:all 150ms ease}.toc a:hover,.toc a.active{color:var(--primary);border-left-color:var(--primary);background-color:rgba(99,102,241,0.05)}.toc ul ul{padding-left:16px}.timeline{position:relative;padding-left:32px;margin:24px 0}.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg, var(--primary), var(--secondary))}.timeline-item{position:relative;padding-bottom:32px;padding-left:8px}.timeline-item::before{content:'';position:absolute;left:calc(-32px - 5px);top:6px;width:12px;height:12px;border-radius:50%;background-color:var(--primary);border:2px solid var(--bg-color);box-shadow:0 0 0 3px var(--bg-secondary)}.timeline-item:last-child{padding-bottom:0}.timeline-date{font-size:14px;color:var(--text-secondary);margin-bottom:4px}.timeline-title{font-weight:600;margin-bottom:4px}.timeline-description{color:var(--text-secondary)}.error-page{text-align:center;padding:64px 0}.error-page h1{font-size:120px;font-weight:700;background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.error-page p{font-size:20px;margin-bottom:24px}.image-figure{margin:32px 0;text-align:center}.image-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);transition:transform 300ms ease,box-shadow 300ms ease}.image-figure img:hover{transform:scale(1.02);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.image-figure figcaption{margin-top:8px;font-size:14px;color:var(--text-secondary);font-style:italic}pre{background-color:var(--bg-secondary);border-radius:8px;padding:16px;overflow-x:auto;margin:24px 0;border:1px solid var(--border-color)}pre code{font-family:"JetBrains Mono","Fira Code",Consolas,monospace;font-size:14px;line-height:1.6}code{font-family:"JetBrains Mono","Fira Code",Consolas,monospace;font-size:0.9em;background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px}code{font-family:"JetBrains Mono","Fira Code",Consolas,monospace;font-size:0.9em;padding:2px 6px;background-color:var(--bg-secondary);border-radius:4px;color:var(--primary)}pre{font-family:"JetBrains Mono","Fira Code",Consolas,monospace;font-size:14px;line-height:1.5;background-color:var(--bg-secondary);border-radius:8px;padding:24px;overflow-x:auto;margin-bottom:24px}pre code{padding:0;background:none;color:inherit;font-size:inherit}.highlight{background-color:var(--bg-secondary);border-radius:8px;margin-bottom:24px}.highlight pre{margin:0;background:transparent}.highlight .c,.highlight .c1,.highlight .cm{color:#6a737d}.highlight .k,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:#d73a49}.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr{color:#032f62}.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .il{color:#005cc5}.highlight .n{color:#24292e}.highlight .na{color:#6f42c1}.highlight .nb{color:#005cc5}.highlight .nc{color:#6f42c1}.highlight .nf{color:#6f42c1}.highlight .nn{color:#6f42c1}.highlight .no{color:#005cc5}.highlight .nv,.highlight .vi,.highlight .vc,.highlight .vg{color:#e36209}.highlight .o,.highlight .ow{color:#d73a49}.highlight .p{color:#24292e}.highlight .err{color:#cb2431}[data-theme="dark"] .highlight .c,[data-theme="dark"] .highlight .c1,[data-theme="dark"] .highlight .cm{color:#6a737d}[data-theme="dark"] .highlight .k,[data-theme="dark"] .highlight .kd,[data-theme="dark"] .highlight .kn,[data-theme="dark"] .highlight .kp,[data-theme="dark"] .highlight .kr,[data-theme="dark"] .highlight .kt{color:#ff7b72}[data-theme="dark"] .highlight .s,[data-theme="dark"] .highlight .s1,[data-theme="dark"] .highlight .s2,[data-theme="dark"] .highlight .sb,[data-theme="dark"] .highlight .sc,[data-theme="dark"] .highlight .sd,[data-theme="dark"] .highlight .se,[data-theme="dark"] .highlight .sh,[data-theme="dark"] .highlight .si,[data-theme="dark"] .highlight .sx,[data-theme="dark"] .highlight .sr{color:#a5d6ff}[data-theme="dark"] .highlight .m,[data-theme="dark"] .highlight .mf,[data-theme="dark"] .highlight .mh,[data-theme="dark"] .highlight .mi,[data-theme="dark"] .highlight .mo,[data-theme="dark"] .highlight .il{color:#79c0ff}[data-theme="dark"] .highlight .n{color:#c9d1d9}[data-theme="dark"] .highlight .na{color:#d2a8ff}[data-theme="dark"] .highlight .nb{color:#79c0ff}[data-theme="dark"] .highlight .nc{color:#f0883e}[data-theme="dark"] .highlight .nf{color:#d2a8ff}[data-theme="dark"] .highlight .nn{color:#ff7b72}[data-theme="dark"] .highlight .no{color:#79c0ff}[data-theme="dark"] .highlight .nv,[data-theme="dark"] .highlight .vi,[data-theme="dark"] .highlight .vc,[data-theme="dark"] .highlight .vg{color:#ffa657}[data-theme="dark"] .highlight .o,[data-theme="dark"] .highlight .ow{color:#ff7b72}[data-theme="dark"] .highlight .p{color:#c9d1d9}[data-theme="dark"] .highlight .err{color:#f85149}.highlight{position:relative}.highlight[data-lang]::before{content:attr(data-lang);position:absolute;top:0;right:0;padding:4px 8px;font-size:12px;color:var(--text-secondary);background-color:var(--border-color);border-radius:0 8px 0 4px;text-transform:uppercase}.highlight .lineno{color:var(--text-secondary);padding-right:16px;border-right:1px solid var(--border-color);margin-right:16px;user-select:none}