.header-spacer{height:var(--header-h,63px);width:100%}.blog-page-main{min-height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center}.blog-hero{width:100%;max-width:740px;margin:3.2rem auto 1.5rem auto;text-align:center;display:flex;flex-direction:column;align-items:center}.dev-blog-section,.blog-main-content{margin:0 auto 4rem auto;max-width:690px;width:100%;padding:1.5rem 1.5rem 3rem 1.5rem;background:linear-gradient(135deg,rgba(20,28,44,0.98) 0%,rgba(13,20,36,0.95) 100%);border-radius:18px;box-shadow:0 7px 34px rgba(2,32,54,0.25);border:1.5px solid rgba(40,95,182,0.10);display:flex;flex-direction:column;align-items:center}.blog-post{background:linear-gradient(145deg,rgba(20,28,44,0.95) 0%,rgba(13,20,36,0.91) 100%);border-radius:1.1rem;box-shadow:0 2px 14px #0ea5e910;border:1.5px solid rgba(40,95,182,0.08);margin-bottom:2.4rem;padding:1.5rem 1.4rem 1rem 1.4rem;animation:fadeIn 0.7s;width:100%;max-width:650px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center}.blog-meta{color:#7dd3fc;font-size:0.99em;margin-bottom:0.7em;text-align:center}.blog-content{font-size:1.16em;color:#e2e8f0;margin-bottom:1.1em;line-height:1.7;word-break:break-word;width:100%;text-align:left}.blog-form,.comment-form-row{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:0.6em;align-items:center}.blog-form textarea,.comment-name-input,.comment-textarea,#blogEditor{width:100%;min-width:0;border-radius:8px;font-size:1.08rem;padding:1rem;background:rgba(10,15,28,0.94);color:#e4e8ef}.blog-btn,.comment-submit-btn{display:block;margin:0 auto 2rem auto;padding:10px 32px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,#0284c7 0%,#0ea5e9 100%);color:#fff;border:none;border-radius:8px;box-shadow:0 5px 18px #0284c750;cursor:pointer;transition:background .19s}.blog-btn:hover,.comment-submit-btn:hover{background:#0ea5e9}.blog-reactions{margin-bottom:1.2em;text-align:center;width:100%}.emoji-btn{font-size:1.29em;background:rgba(2,132,199,0.08);border:1.5px solid #0284c7;border-radius:8px;margin-right:0.5em;margin-bottom:0.2em;padding:0.1em 0.5em 0.1em 0.5em;color:#0ea5e9;cursor:pointer;transition:background .14s;display:inline-flex;align-items:center;justify-content:center}.blog-post>header{width:100%;max-width:650px;margin-left:auto;margin-right:auto;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.emoji-btn:hover{background:rgba(2,132,199,0.19)}.emoji-count{font-size:0.95em;color:#e0e7ef;margin-left:3px}.blog-comments{background:rgba(10,18,38,0.80);border-radius:0.7rem;padding:0.8em 1em 1em 1em;margin-bottom:0.4rem;width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center}.blog-comments h4{font-size:1.13em;color:#60a5fa;margin-bottom:0.7em;text-align:center}.comment-row{margin-bottom:0.65em;padding-bottom:0.45em;border-bottom:1px solid rgba(2,132,199,0.07);width:100%;text-align:left}.comment-name{color:#fbbf24;font-weight:600;font-size:1.07em}.comment-date{color:#a5b4fc;font-size:0.98em;margin-left:10px}.comment-body{margin-top:0.18em;font-size:1em;color:#e2e8f0;white-space:pre-line}.show-more-btn{background:none;color:#38bdf8;font-weight:600;border:none;cursor:pointer;margin-bottom:0.7em}.blog-content h1,.blog-content h2,.blog-content h3{color:#38bdf8}.blog-content a{color:#0ea5e9;text-decoration:underline}.blog-content blockquote{border-left:3px solid #0284c7;padding-left:1em;color:#a5b4fc}.blog-content pre{background:#202942;color:#fff;border-radius:7px;padding:0.7em}.blog-content ul,.blog-content ol{padding-left:2em}.blog-content img{max-width:100%;border-radius:0.5em}@media (max-width:700px){.blog-hero{max-width:99vw;margin:2.2rem auto 1.1rem auto;padding:0 2vw}.dev-blog-section,.blog-main-content{max-width:99vw;padding:1.1rem 0.5rem 2.1rem 0.5rem}.blog-post{padding:1.1rem 0.6rem 1rem 0.6rem}.blog-form,.comment-form-row{max-width:99vw;padding:0 2vw}.blog-comments{max-width:99vw;padding:0.6em 2vw 1em 2vw}}.blog-page-main,main.blog-page-main{width:100vw!important;min-height:100vh;display:flex!important;flex-direction:column;align-items:center!important;justify-content:flex-start;box-sizing:border-box;padding:0!important}.blog-main-content,.dev-blog-section{max-width:690px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;align-self:center!important;float:none!important;box-sizing:border-box}