:root{--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-hover:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--border:#e2e8f0;--accent:#6366f1;--accent-secondary:#8b5cf6;--accent-bg:#eef2ff;--accent-border:#c7d2fe;--code-bg:#f1f5f9;--code-block-bg:#f8fafc;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh}::selection{background:var(--accent);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.hljs{color:#24292e;background:0 0}.hljs-keyword{color:#d73a49}.hljs-string{color:#032f62}.hljs-number{color:#005cc5}.hljs-comment{color:#6a737d;font-style:italic}.hljs-function,.hljs-title{color:#6f42c1}.hljs-built_in{color:#005cc5}.hljs-type{color:#e36209}.hljs-literal{color:#005cc5}.hljs-attr{color:#6f42c1}.hljs-tag,.hljs-name{color:#22863a}.hljs-selector-class{color:#6f42c1}.hljs-selector-tag{color:#22863a}.hljs-meta{color:#e36209}.hljs-params{color:#24292e}.header{z-index:100;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#ffffffd9;transition:background .3s;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1200px;height:64px;margin:0 auto;padding:0 1.5rem;display:flex}.logo{color:var(--text-primary);align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;text-decoration:none;display:flex}.logo-icon{font-size:1.5rem}.logo-text{background:linear-gradient(135deg, var(--accent), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.nav{align-items:center;gap:.25rem;display:flex}.nav-link{color:var(--text-secondary);border-radius:8px;padding:.5rem 1rem;font-size:.925rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-link.active{color:var(--accent);background:var(--accent-bg)}.theme-toggle{border:1px solid var(--border);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:10px;justify-content:center;align-items:center;margin-left:.5rem;transition:all .2s;display:flex}.theme-toggle:hover{color:var(--text-primary);background:var(--bg-hover)}.menu-toggle{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:none}.hamburger,.hamburger:before,.hamburger:after{background:var(--text-primary);border-radius:2px;width:20px;height:2px;transition:all .3s;display:block}.hamburger{position:relative}.hamburger:before,.hamburger:after{content:"";position:absolute;left:0}.hamburger:before{top:-6px}.hamburger:after{top:6px}.hamburger.open{background:0 0}.hamburger.open:before{top:0;transform:rotate(45deg)}.hamburger.open:after{top:0;transform:rotate(-45deg)}@media (width<=640px){.menu-toggle{display:flex}.nav{background:var(--bg-primary);border-bottom:1px solid var(--border);opacity:0;pointer-events:none;flex-direction:column;gap:.5rem;padding:1rem;transition:all .3s;position:fixed;top:64px;left:0;right:0;transform:translateY(-100%)}.nav-open{opacity:1;pointer-events:auto;transform:translateY(0)}.nav-link{width:100%;padding:.75rem 1rem}.theme-toggle{margin-top:.5rem;margin-left:0}}.footer{border-top:1px solid var(--border);background:var(--bg-secondary);margin-top:auto}.footer-inner{flex-wrap:wrap;justify-content:space-between;gap:3rem;max-width:1200px;margin:0 auto;padding:3rem 1.5rem 2rem;display:flex}.footer-brand{max-width:300px}.footer-logo{color:var(--text-primary);font-size:1.25rem;font-weight:700}.footer-tagline{color:var(--text-tertiary);margin-top:.5rem;font-size:.9rem;line-height:1.6}.footer-links{gap:4rem;display:flex}.footer-col h4{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:1rem;font-size:.8rem;font-weight:600}.footer-col a{color:var(--text-secondary);padding:.3rem 0;font-size:.925rem;text-decoration:none;transition:color .2s;display:block}.footer-col a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid var(--border);text-align:center;max-width:1200px;margin:0 auto;padding:1.25rem 1.5rem}.footer-bottom p{color:var(--text-tertiary);font-size:.825rem}@media (width<=640px){.footer-inner{flex-direction:column;gap:2rem}.footer-brand{text-align:center;max-width:100%}.footer-links{justify-content:center;gap:3rem}}.layout{flex-direction:column;min-height:100vh;display:flex}.main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.tag-badge{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:20px;align-items:center;padding:.25rem .75rem;font-size:.8rem;font-weight:500;transition:all .2s;display:inline-flex}.tag-link{cursor:pointer;text-decoration:none}.tag-link:hover{background:var(--accent);color:#fff}.post-card{border:1px solid var(--border);background:var(--bg-primary);cursor:pointer;border-radius:16px;flex-direction:column;transition:all .3s;display:flex;overflow:hidden}.post-card:hover{border-color:var(--accent-border);transform:translateY(-4px);box-shadow:0 12px 40px #00000014}.post-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.post-card-cover{background:var(--bg-secondary);border-bottom:1px solid var(--border);justify-content:center;align-items:center;height:140px;font-size:3.5rem;display:flex}.post-card-body{flex-direction:column;flex:1;padding:1.5rem;display:flex}.post-card-meta{color:var(--text-tertiary);align-items:center;gap:.4rem;margin-bottom:.75rem;font-size:.825rem;display:flex}.dot{color:var(--border)}.post-card-title{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.5rem;font-size:1.2rem;font-weight:700;line-height:1.4;display:-webkit-box;overflow:hidden}.post-card-summary{color:var(--text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;font-size:.925rem;line-height:1.6;display:-webkit-box;overflow:hidden}.post-card-tags{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.home{padding-top:1rem}.hero{text-align:center;padding:3rem 1rem 2rem}.hero-title{color:#0f172a;margin-bottom:.5rem;font-size:2.5rem;font-weight:800;line-height:1.2}.hero-subtitle{color:var(--accent);margin-top:.5rem;font-size:1.15rem;font-weight:500;display:block}.hero-description{max-width:560px;color:var(--text-secondary);margin:1rem auto 0;font-size:1.05rem;line-height:1.7}.tag-filter{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.5rem 0 2.5rem;display:flex}.tag-filter-btn{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;border-radius:20px;padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .2s}.tag-filter-btn:hover{border-color:var(--accent);color:var(--accent)}.tag-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.empty-state{text-align:center;color:var(--text-tertiary);grid-column:1/-1;padding:4rem 2rem}.empty-icon{margin-bottom:1rem;font-size:3rem;display:block}.pagination{text-align:center;margin-top:3rem}.btn-outline{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;background:0 0;border-radius:12px;align-items:center;padding:.75rem 2rem;font-size:.925rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}@media (width<=640px){.hero{padding:2rem .5rem 1.5rem}.hero-title{font-size:1.75rem}.hero-description{font-size:.95rem}.posts-grid{grid-template-columns:1fr;gap:1rem}}.post-detail{max-width:780px;margin:0 auto;padding:1rem 0 3rem}.post-not-found{text-align:center;padding:6rem 2rem}.not-found-icon{margin-bottom:1rem;font-size:4rem;display:block}.post-not-found h2{color:var(--text-primary);margin-bottom:.5rem;font-size:1.5rem}.post-not-found p{color:var(--text-secondary);margin-bottom:1.5rem}.back-link{background:var(--accent);color:#fff;border-radius:10px;align-items:center;padding:.6rem 1.5rem;font-weight:500;text-decoration:none;transition:opacity .2s;display:inline-flex}.back-link:hover{opacity:.9}.post-header{margin-bottom:2.5rem}.post-back{color:var(--text-tertiary);margin-bottom:1.5rem;font-size:.9rem;text-decoration:none;transition:color .2s;display:inline-flex}.post-back:hover{color:var(--accent)}.post-cover-large{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:1.25rem;font-size:2.5rem;display:flex}.post-header-meta{color:var(--text-tertiary);align-items:center;gap:1.5rem;margin-bottom:1rem;font-size:.875rem;display:flex}.post-date,.post-reading-time{align-items:center;gap:.35rem;display:flex}.post-title{color:var(--text-primary);margin-bottom:1rem;font-size:2.25rem;font-weight:800;line-height:1.3}.post-tags{flex-wrap:wrap;gap:.5rem;display:flex}.post-content{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0}.markdown-body{color:var(--text-primary);font-size:1.05rem;line-height:1.85}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{color:var(--text-primary);margin-top:2.5rem;margin-bottom:1rem;font-weight:700;line-height:1.3}.markdown-body h2{border-bottom:2px solid var(--border);padding-bottom:.5rem;font-size:1.75rem}.markdown-body h3{font-size:1.35rem}.markdown-body p{margin-bottom:1.25rem}.markdown-body a{color:var(--accent);border-bottom:1px solid var(--accent-border);text-decoration:none;transition:border-color .2s}.markdown-body a:hover{border-color:var(--accent)}.markdown-body strong{color:var(--text-primary);font-weight:700}.markdown-body blockquote{border-left:4px solid var(--accent);background:var(--accent-bg);color:var(--text-secondary);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.markdown-body blockquote p{margin:0}.markdown-body ul,.markdown-body ol{margin-bottom:1.25rem;padding-left:1.5rem}.markdown-body li{margin-bottom:.4rem}.markdown-body code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875em}.markdown-body :not(pre)>code{background:var(--code-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:5px;padding:.15em .4em}.markdown-body pre{background:var(--code-block-bg);border:1px solid var(--border);border-radius:12px;margin:1.5rem 0;padding:1.25rem;overflow-x:auto}.markdown-body pre code{color:var(--text-primary);background:0 0;border:none;padding:0;font-size:.875rem;line-height:1.7}.markdown-body table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.925rem}.markdown-body th,.markdown-body td{border:1px solid var(--border);text-align:left;padding:.75rem 1rem}.markdown-body th{background:var(--bg-secondary);font-weight:600}.markdown-body hr{border:none;border-top:1px solid var(--border);margin:2rem 0}.markdown-body img{border-radius:12px;max-width:100%}.post-footer{margin-top:3rem}.related-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:700}.related-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;display:grid}.related-card{border:1px solid var(--border);border-radius:12px;align-items:center;gap:.75rem;padding:1rem;text-decoration:none;transition:all .2s;display:flex}.related-card:hover{border-color:var(--accent);background:var(--accent-bg)}.related-emoji{flex-shrink:0;font-size:1.75rem}.related-card h4{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 .25rem;font-size:.9rem;font-weight:600;display:-webkit-box;overflow:hidden}.related-meta{color:var(--text-tertiary);font-size:.775rem}@media (width<=640px){.post-title{font-size:1.5rem}.post-header-meta{flex-direction:column;align-items:flex-start;gap:.5rem}.markdown-body{font-size:.975rem}.related-grid{grid-template-columns:1fr}}.tags-page{max-width:900px;margin:0 auto;padding:1rem 0}.tags-header{text-align:center;margin-bottom:2rem}.tags-header h1{color:var(--text-primary);margin-bottom:.5rem;font-size:2rem;font-weight:800}.tags-header p{color:var(--text-tertiary);font-size:1rem}.tags-cloud{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:3rem;display:flex}.tag-cloud-item{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);border-radius:24px;padding:.6rem 1.5rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .2s}.tag-cloud-item:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.tag-cloud-item.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tag-detail{margin-top:.5rem}.tag-detail-title{color:var(--text-primary);align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600;display:flex}.tag-highlight{color:var(--accent)}.clear-filter{color:var(--text-tertiary);margin-left:auto;font-size:.825rem;font-weight:400;text-decoration:none;transition:color .2s}.clear-filter:hover{color:var(--accent)}.posts-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem;display:grid}.tags-placeholder{text-align:center;color:var(--text-tertiary);padding:4rem 2rem}.placeholder-icon{margin-bottom:1rem;font-size:3.5rem;display:block}@media (width<=640px){.posts-grid{grid-template-columns:1fr}}.about-page{max-width:700px;margin:0 auto;padding:1rem 0 3rem}.about-hero{text-align:center;padding:2rem 1rem 2.5rem}.about-avatar{background:linear-gradient(135deg, var(--accent), var(--accent-secondary));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;margin:0 auto 1.25rem;font-size:2rem;font-weight:700;display:flex;box-shadow:0 8px 24px #6366f14d}.about-hero h1{color:var(--text-primary);margin-bottom:.35rem;font-size:2rem;font-weight:800}.about-role{color:var(--accent);margin-bottom:1rem;font-size:1.1rem;font-weight:500}.about-bio{max-width:480px;color:var(--text-secondary);margin:0 auto 1.5rem;font-size:.975rem;line-height:1.7}.about-links{justify-content:center;gap:1rem;display:flex}.about-link{border:1px solid var(--border);color:var(--text-secondary);border-radius:10px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.about-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.about-section{margin-top:3rem;padding:0 1rem}.about-section h2{color:var(--text-primary);border-bottom:2px solid var(--border);margin-bottom:1.25rem;padding-bottom:.75rem;font-size:1.35rem;font-weight:700}.skills-list{flex-direction:column;gap:1rem;display:flex}.skill-item{flex-direction:column;gap:.4rem;display:flex}.skill-header{justify-content:space-between;align-items:center;display:flex}.skill-name{color:var(--text-primary);font-size:.925rem;font-weight:600}.skill-level{color:var(--text-tertiary);font-size:.825rem;font-weight:500}.skill-bar{background:var(--bg-secondary);border-radius:4px;height:8px;overflow:hidden}.skill-fill{background:linear-gradient(90deg, var(--accent), var(--accent-secondary));border-radius:4px;height:100%;transition:width 1s}.about-posts{flex-direction:column;gap:.75rem;display:flex}.about-post-item{border:1px solid var(--border);border-radius:12px;align-items:center;gap:1rem;padding:1rem;text-decoration:none;transition:all .2s;display:flex}.about-post-item:hover{border-color:var(--accent);background:var(--accent-bg)}.about-post-emoji{flex-shrink:0;font-size:2rem}.about-post-item h3{color:var(--text-primary);margin:0 0 .25rem;font-size:.95rem;font-weight:600}.about-post-date{color:var(--text-tertiary);font-size:.8rem}.about-view-all{text-align:center;margin-top:1.5rem}.btn-outline{border:1px solid var(--border);color:var(--text-primary);background:0 0;border-radius:10px;align-items:center;padding:.6rem 1.5rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}@media (width<=640px){.about-hero{padding:1rem .5rem 2rem}}