:root{--font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;--font-family-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;font-family:var(--font-family-sans);line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-text: #2c3e50;--color-background: #ffffff;--color-primary: #3498db;--color-secondary: #2ecc71;--color-accent: #e74c3c;--color-border: #ecf0f1;--color-link: var(--color-primary);--color-link-hover: #2980b9;--color-code-bg: #f8f8f8;--color-code-text: #333;--color-pre-bg: #282c34;--color-pre-text: #abb2bf;color-scheme:light;color:var(--color-text);background-color:var(--color-background)}html.dark-theme{color-scheme:dark;--color-text: #ecf0f1;--color-background: #2c3e50;--color-primary: #5dade2;--color-secondary: #58d68d;--color-accent: #f1948a;--color-border: #34495e;--color-link: var(--color-primary);--color-link-hover: #85c1e9;--color-code-bg: #34495e;--color-code-text: #ecf0f1}body{margin:0;font-family:var(--font-family-sans);color:var(--color-text);background-color:var(--color-background)}a{font-weight:500;color:var(--color-link);text-decoration:none;transition:color .2s ease-in-out}a:hover{color:var(--color-link-hover);text-decoration:underline}h1,h2,h3,h4,h5,h6{font-family:var( --font-family-sans );font-weight:600;margin-top:1.5em;margin-bottom:.8em;line-height:1.3}h1{font-size:2.5em}h2{font-size:2em}h3{font-size:1.6em}h4{font-size:1.3em}h5{font-size:1.1em}h6{font-size:1em}p{margin-bottom:1.2em}#root{max-width:1280px;margin:0 auto;padding:2rem}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.post-list-container{max-width:800px;margin:3rem auto;padding:0 1.5rem;font-family:var(--font-family-sans)}.post-list-container h2{text-align:center;margin-top:0;margin-bottom:2.5rem;font-size:2.2em;font-weight:600;color:var(--color-text)}.blog-subtitle{text-align:center;margin-top:-1.5rem;margin-bottom:3rem;font-size:1.1em;color:var(--color-text);opacity:.7}.tag-filter-container{margin-bottom:2.5rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.tag-filter-button{padding:.4rem .9rem;font-size:.85em;border-radius:15px;border:1px solid var(--color-border);background-color:transparent;color:var(--color-text);opacity:.8;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}.tag-filter-button:hover{background-color:var(--color-border);opacity:1}.tag-filter-button.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);opacity:1;font-weight:500}.post-list-ul{list-style:none;padding:0;margin:0;display:grid;gap:2rem}.post-list-item{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:6px;padding:2rem;transition:box-shadow .25s ease-out,border-color .25s ease-out,opacity .5s ease-out,transform .5s ease-out;overflow:hidden;opacity:0;transform:translateY(20px)}.post-list-item.fade-in{opacity:1;transform:translateY(0)}.post-list-item:hover{border-color:var( --color-link-hover );box-shadow:0 6px 15px #00000014}.post-list-item a{text-decoration:none;color:inherit}.post-list-item h3{margin-top:0;margin-bottom:.5rem;font-size:1.5em;font-weight:600;color:var(--color-text);transition:color .2s ease;line-height:1.3}.post-list-item a:hover h3{color:var(--color-link)}.post-meta-list{font-size:.85em;color:var(--color-text);opacity:.6;margin-bottom:1rem}.post-visits{margin-left:.5rem}.post-summary{color:var(--color-text);opacity:.9;margin-bottom:1.5rem;line-height:1.7;font-size:1em}.post-tags{margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}.tag-badge{display:inline-block;padding:.25rem .6rem;font-size:.75em;border-radius:12px;background-color:var(--color-border);color:var(--color-text);opacity:.8}.read-more-link{display:inline-block;margin-top:auto;font-size:.9em;font-weight:500;color:var(--color-link);text-decoration:none}.read-more-link:hover{color:var(--color-link-hover);text-decoration:underline}.code-block-container{position:relative;margin:1.5rem 0}.code-block-container pre{padding:1.5rem 1.2rem 1rem;border-radius:6px;overflow-x:auto;font-family:var(--font-family-mono);font-size:.9em;line-height:1.6}.copy-code-button{position:absolute;top:.5rem;right:.5rem;background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:.3rem .6rem;border-radius:4px;cursor:pointer;font-size:.8em;opacity:.7;transition:opacity .2s ease,background-color .2s ease}.copy-code-button:hover{opacity:1;background-color:#fff3}.code-block-container pre span{-webkit-user-select:text;user-select:text}.post-detail-container{display:grid;grid-template-columns:250px 1fr;gap:3rem;padding:2rem 1rem;max-width:1100px;margin:2rem auto;font-family:var(--font-family-sans)}.post-toc{position:sticky;top:2rem;height:calc(100vh - 4rem);overflow-y:auto;padding-right:1.5rem;border-right:1px solid var(--color-border)}.post-toc h4{margin-top:0;margin-bottom:1.5rem;font-size:1.1em;font-weight:600;color:var(--color-text);opacity:.9}.post-toc nav{font-size:.9em}.post-toc nav ul{list-style:none;padding-left:0;margin:0}.post-toc nav ul ul{padding-left:1rem}.post-toc nav li{margin-bottom:.6rem}.toc-level-3{padding-left:1rem}.post-toc nav a{text-decoration:none;color:var(--color-text);opacity:.7;transition:color .2s ease-in-out,opacity .2s ease-in-out}.post-toc nav a:hover{color:var(--color-link-hover);opacity:1}.post-content-area{padding:0 1rem;max-width:75ch}.back-link{display:inline-block;margin-bottom:2rem;color:var(--color-link);text-decoration:none;font-size:.9em}.back-link:hover{color:var(--color-link-hover);text-decoration:underline}.edit-post-link{display:inline-block;float:right;margin-left:1rem;margin-bottom:1rem;font-size:.85em;color:var(--color-secondary);text-decoration:none;border:1px solid var(--color-secondary);padding:.2rem .5rem;border-radius:4px;transition:background-color .2s ease,color .2s ease}.edit-post-link:hover{background-color:var(--color-secondary);color:#fff;text-decoration:none}.post-content-area>h2:first-of-type{margin-top:0;margin-bottom:.5rem;font-size:2.5em;line-height:1.2;color:var(--color-text)}.post-meta{color:var(--color-text);opacity:.7;font-size:.9em;margin-bottom:3rem}.post-meta span+span{margin-left:.5rem}.updated-date{opacity:.8}.post-content-area p,.post-content-area li{font-size:1.05em;line-height:1.8;margin-bottom:1.2rem;color:var(--color-text)}.post-content-area h2,.post-content-area h3{margin-top:2.5rem;margin-bottom:1rem;padding-bottom:.3rem;color:var(--color-text)}.post-content-area code{background-color:var(--color-code-bg);color:var(--color-code-text);padding:.2em .4em;border-radius:3px;font-size:.9em;font-family:var(--font-family-mono)}.code-block-container{position:relative;margin:2rem 0}@media (max-width: 768px){.post-detail-container{grid-template-columns:1fr}.post-toc{position:static;height:auto;overflow-y:visible;border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-bottom:2rem}}.reading-progress-bar-container{position:fixed;top:0;left:0;width:100%;height:4px;background-color:transparent;z-index:1000}.reading-progress-bar{height:100%;background-color:var(--color-primary);width:0;transition:width .1s linear}.resource-list-container{max-width:900px;margin:2rem auto;padding:1rem 1.5rem;font-family:var(--font-family-sans);color:var(--color-text)}.resource-list-container h1{text-align:center;margin-bottom:.5rem;color:var(--color-text)}.resource-list-container>p{text-align:center;margin-bottom:3rem;opacity:.8}.resource-list{list-style:none;padding:0;margin:0}.resource-item{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:6px;padding:1.5rem;margin-bottom:1.5rem;transition:border-color .2s ease,box-shadow .2s ease}.resource-item:hover{border-color:var(--color-primary);box-shadow:0 3px 8px #0000000f}.resource-link{display:block;font-size:1.2em;font-weight:600;color:var(--color-link);text-decoration:none;margin-bottom:.5rem;word-break:break-all}.resource-link:hover{color:var(--color-link-hover);text-decoration:underline}.resource-meta{font-size:.85em;opacity:.7;display:flex;flex-wrap:wrap;gap:.3rem 1rem}.resource-url{color:var(--color-text);word-break:break-all;flex-basis:100%}.resource-post-count{color:var(--color-text);white-space:nowrap}.error-message{color:var(--color-accent);text-align:center;font-weight:500}.markdown-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border:1px solid var(--color-border);border-radius:6px;overflow:hidden;min-height:400px;margin-top:.5rem}.editor-pane,.preview-pane{padding:1rem 1.5rem;height:500px;overflow-y:auto}.editor-pane{border-right:1px solid var(--color-border)}.markdown-textarea{width:100%;height:100%;box-sizing:border-box;border:none;outline:none;resize:none;font-family:var(--font-family-mono);font-size:.95em;line-height:1.6;color:var(--color-text);background-color:var(--color-background)}.preview-pane{background-color:var(--color-background);color:var(--color-text);text-align:left}.preview-pane h1,.preview-pane h2,.preview-pane h3,.preview-pane h4,.preview-pane h5,.preview-pane h6{margin-top:1em;margin-bottom:.6em;padding-bottom:0;border-bottom:none;color:var(--color-text)}.preview-pane p,.preview-pane li{font-size:1em;line-height:1.7;margin-bottom:1rem;color:var(--color-text)}.preview-pane code{background-color:var(--color-code-bg);color:var(--color-code-text);padding:.2em .4em;border-radius:3px;font-size:.9em;font-family:var(--font-family-mono)}.preview-pane pre{border-radius:6px;overflow-x:auto;background-color:var(--color-pre-bg)!important;color:var(--color-pre-text);font-family:var(--font-family-mono);font-size:.9em;line-height:1.6}@media (max-width: 900px){.markdown-editor-layout{grid-template-columns:1fr;gap:0}.editor-pane{border-right:none;border-bottom:1px solid var(--color-border);height:300px}.preview-pane{height:300px}}.tag-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem;border:1px solid var(--color-border);border-radius:6px;background-color:var(--color-background);cursor:text;margin-top:.5rem}.tag-item{display:inline-flex;align-items:center;background-color:var(--color-primary);color:#fff;padding:.25rem .6rem;border-radius:12px;font-size:.85em;margin-right:.4rem;white-space:nowrap}.remove-tag-button{background:none;border:none;color:#ffffffb3;cursor:pointer;font-size:1.1em;line-height:1;margin-left:.4rem;padding:0 .1rem;transition:color .2s ease}.remove-tag-button:hover{color:#fff}.tag-input-field{flex-grow:1;border:none;outline:none;padding:.4rem 0;font-size:1em;font-family:var(--font-family-sans);color:var(--color-text);background-color:transparent;min-width:100px;width:auto;max-width:100%}.formatting-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem;background-color:var(--color-border);border-radius:6px 6px 0 0;border:1px solid var(--color-border);border-bottom:none;margin-top:1rem}.formatting-toolbar button{background-color:var(--color-background);color:var(--color-text);border:1px solid transparent;border-radius:4px;padding:.3rem .6rem;font-size:.9em;line-height:1;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.formatting-toolbar button:hover{background-color:var(--color-background);border-color:var(--color-primary)}.formatting-toolbar button b,.formatting-toolbar button i{display:inline-block;min-width:1em;text-align:center}.post-editor-container{max-width:1000px;margin:2rem auto;padding:1.5rem;font-family:var(--font-family-sans);color:var(--color-text);background-color:var(--color-background)}.post-editor-container h1{margin-bottom:2rem;color:var(--color-text)}.post-editor-container .error-message{color:var(--color-accent);background-color:#e74c3c1a;border:1px solid var(--color-accent);padding:.8rem 1rem;border-radius:6px;margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.95em}.form-group input[type=text],.form-group textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:6px;font-size:1em;font-family:var(--font-family-sans);color:var(--color-text);background-color:var(--color-background);transition:border-color .2s ease}.form-group input[type=text]:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #3498db33}.form-group textarea{line-height:1.6}.form-group .markdown-editor-layout{margin-top:0}.editor-counts{font-size:.8em;color:var(--color-text);opacity:.7;text-align:right;margin-top:.5rem}.editor-counts span+span{margin-left:1rem}.form-actions{margin-top:2rem;display:flex;justify-content:flex-end;gap:1rem;border-top:1px solid var(--color-border);padding-top:1.5rem}.form-actions button{padding:.7rem 1.5rem;font-size:1em;font-weight:500;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}.form-actions button[type=submit]{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.form-actions button[type=submit]:hover{background-color:var(--color-link-hover);border-color:var(--color-link-hover)}.form-actions button[type=button]{background-color:var(--color-background);color:var(--color-text);border-color:var(--color-border)}.form-actions button[type=button]:hover{border-color:var(--color-text)}.form-actions button.delete-button{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent);margin-right:auto}.form-actions button.delete-button:hover{background-color:#c0392b;border-color:#c0392b}.form-actions button:disabled{opacity:.6;cursor:not-allowed}.theme-toggle-button{position:fixed;bottom:1rem;right:1rem;padding:.5rem 1rem;font-size:.9em;border-radius:20px;cursor:pointer;background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);z-index:1001;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.theme-toggle-button:hover{background-color:var(--color-border);border-color:var(--color-link)}.navbar{background-color:var(--color-background);border-bottom:1px solid var(--color-border);padding:.8rem 1.5rem;position:sticky;top:0;z-index:900;box-shadow:0 2px 4px #0000000d}.navbar-container{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.navbar-left{flex-shrink:0}.navbar-right{display:flex;align-items:center;gap:1.5rem}.navbar-brand{font-size:1.4em;font-weight:700;color:var(--color-text);text-decoration:none}.navbar-brand:hover{color:var(--color-link);text-decoration:none}.navbar-links{display:flex;gap:1.5rem}.navbar-links a{color:var(--color-text);text-decoration:none;font-size:1em;opacity:.8;transition:opacity .2s ease,color .2s ease}.navbar-links a:hover{color:var(--color-link);opacity:1;text-decoration:none}.navbar-auth{display:flex;align-items:center;gap:.8rem}.navbar-username{font-size:.9em;opacity:.9}.navbar-button{background-color:var(--color-link);color:var(--color-background);border:none;padding:.4rem .9rem;border-radius:4px;cursor:pointer;font-size:.9em;font-weight:500;transition:background-color .2s ease}.navbar-button:hover{background-color:var( --color-link-hover )}.navbar-toggle .theme-toggle-button{position:static;padding:.3rem .8rem;font-size:.85em}