:root{--blog-bg:#ffffff;--blog-surface:#ffffff;--blog-surface-muted:#f8fafc;--blog-surface-tint:#f0fdf4;--blog-border:rgba(5, 150, 105, 0.12);--blog-text:#334155;--blog-heading:#0f172a;--blog-muted:#64748b;--blog-accent:#059669;--blog-accent-hover:#047857;--blog-accent-dim:rgba(5, 150, 105, 0.06);--blog-accent-mid:rgba(5, 150, 105, 0.15);--code-bg:#0f172a;--code-text:#e2e8f0;--code-muted:#64748b;--code-keyword:#ff7b72;--code-string:#a5d6ff;--code-variable:#ffa657;--code-function:#d2a8ff;--code-operator:#ff7b72;--code-number:#79c0ff;--code-punctuation:#8b949e;--font-display:'Montserrat',sans-serif;--font-body:'Urbanist',sans-serif;--font-mono:'DM Mono',monospace}.blog-post-page{background-color:var(--blog-bg);color:var(--blog-text);font-family:var(--font-body);font-size:1.6rem;line-height:1.8}.blog-post-page h1,.blog-post-page h2,.blog-post-page h3,.blog-post-page h4,.blog-post-page h5,.blog-post-page h6{font-family:var(--font-display)!important;color:var(--blog-heading);font-weight:700;letter-spacing:-.02em}.blog-post-page p{color:var(--blog-text);font-size:1.6rem;line-height:1.8;margin-bottom:1.8rem}.blog-post-page a{color:var(--blog-accent);text-decoration:none;transition:color .25s ease}.blog-post-page a:hover{color:var(--blog-accent-hover)}.blog-post-page header{padding:6rem 0 2rem 0;animation:fadeUp .6s ease both}.site-tag{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blog-accent);margin-bottom:3rem;display:flex;align-items:center;gap:.8rem}.site-tag::before{content:'';display:inline-block;width:2rem;height:2px;background:var(--blog-accent)}.tag-row{display:flex;align-items:center;gap:.8rem;margin-bottom:2rem;flex-wrap:wrap}.tag{font-family:var(--font-mono);font-size:1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.4rem 1rem;border:1.5px solid rgba(226,232,240,.8);border-radius:.4rem;color:var(--blog-muted);background:var(--blog-surface-muted)}.tag.green{border-color:var(--blog-accent-mid);color:var(--blog-accent);background:var(--blog-accent-dim)}.blog-post-page h1{font-size:clamp(2.8rem, 4.5vw, 4.4rem);line-height:1.25;font-weight:900;color:var(--blog-heading);margin-bottom:2.2rem}.blog-post-page h1 em{font-style:italic;color:var(--blog-accent)}.subtitle{font-size:1.75rem;color:var(--blog-muted);line-height:1.75;max-width:78rem;margin-bottom:3rem}.concepts{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:4rem}.pill{font-family:var(--font-mono);font-size:1.1rem;font-weight:500;padding:.6rem 1.4rem;background:var(--blog-surface-muted);border:1.5px solid rgba(226,232,240,.8);border-radius:10rem;color:var(--blog-muted)}.divider{height:1.5px;background:linear-gradient(90deg,var(--blog-accent) 0,rgba(226,232,240,.8) 50%,transparent 100%);margin:4rem 0;opacity:.6}.blog-post-page section{margin-bottom:4.8rem;animation:fadeUp .6s ease both}.blog-post-page section h2{font-size:2.2rem;text-transform:uppercase;letter-spacing:.05em;color:var(--blog-accent);margin-bottom:2.4rem;display:flex;align-items:center;gap:1.2rem}.blog-post-page section h2::after{content:'';flex:1;height:1.5px;background:rgba(226,232,240,.8);max-width:15rem}.blog-post-page section h3{font-size:1.8rem;color:var(--blog-heading);margin-top:2.8rem;margin-bottom:1.6rem}.steps{display:flex;flex-direction:column;gap:.4rem}.step{display:grid;grid-template-columns:3.6rem 1fr;gap:1.6rem;align-items:start;padding:1.8rem 0;border-bottom:1.5px solid rgba(226,232,240,.6)}.step:last-child{border-bottom:none}.step-num{font-family:var(--font-mono);font-size:1.2rem;font-weight:700;color:var(--blog-accent);padding-top:.2rem;opacity:.85}.step-content strong{display:block;font-size:1.6rem;font-weight:700;color:var(--blog-heading);margin-bottom:.6rem}.step-content span{font-size:1.45rem;color:var(--blog-text);line-height:1.65}.screenshot-thumb{cursor:pointer;border:1.5px solid rgba(226,232,240,.8);border-radius:.8rem;overflow:hidden;margin:2rem 0;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;background:#fff}.screenshot-thumb img{display:block;width:100%;height:auto;max-height:400px;object-fit:cover}.screenshot-thumb:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.08);border-color:var(--blog-accent-mid)}.code-block{background:var(--code-bg);border:1.5px solid rgba(15,23,42,.05);border-left:3px solid var(--blog-accent);border-radius:.8rem;padding:2.2rem 2.4rem;margin:2.2rem 0;position:relative;overflow:hidden}.code-block::before{content:attr(data-label);position:absolute;top:1rem;right:1.4rem;font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--code-muted);opacity:.8}code{font-family:var(--font-mono);font-size:1.4rem;color:var(--code-text);line-height:1.8;display:block;white-space:pre-wrap;word-wrap:break-word}code .c{color:var(--code-punctuation);font-style:italic}code .k{color:var(--code-keyword);font-weight:700}code .s{color:var(--code-string)}code .v{color:var(--code-variable)}code .fun{color:var(--code-function)}code .num{color:var(--code-number)}code .pun{color:var(--code-punctuation)}code .op{color:var(--code-operator)}code .cmd{color:#f8f9fa;font-weight:700}code .str{color:#e9ecef}.callout{background:var(--blog-surface-tint);border:1.5px solid var(--blog-accent-mid);border-radius:.8rem;padding:1.8rem 2.2rem;display:flex;gap:1.4rem;align-items:flex-start;margin:2.4rem 0}.callout-icon{font-size:1.8rem;color:var(--blog-accent);flex-shrink:0;margin-top:.1rem}.callout-text{font-size:1.45rem;color:var(--blog-text);line-height:1.7;font-weight:500}.callout-text code{display:inline;font-size:1.35rem;background:rgba(5,150,105,.08);color:var(--blog-accent);padding:.2rem .6rem;border-radius:.4rem}.callout.warn{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.25)}.callout.warn .callout-icon{color:#f59e0b}.callout.warn .callout-text{color:#4f3607}.render-table-wrapper{overflow-x:auto;margin:2.4rem 0;border:1px solid rgba(226,232,240,.8);border-radius:.8rem}.render-table{width:100%;border-collapse:collapse;font-size:1.45rem;margin:0}.render-table th{font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blog-muted);background:var(--blog-surface-muted);padding:1.4rem 1.8rem;text-align:left;border-bottom:1.5px solid rgba(226,232,240,.8)}.render-table td{padding:1.4rem 1.8rem;border-bottom:1px solid rgba(226,232,240,.8);color:var(--blog-text)}.render-table tr:last-child td{border-bottom:none}.badge{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;padding:.3rem .8rem;border-radius:.4rem}.badge.yes{background:var(--blog-accent-dim);color:var(--blog-accent);border:1px solid var(--blog-accent-mid)}.badge.no{background:rgba(239,68,68,.06);color:#ef4444;border:1px solid rgba(239,68,68,.2)}.share-container{display:flex;align-items:center;gap:1.2rem;margin:2.4rem 0 3.6rem;padding:1.6rem 2.2rem;background:var(--blog-surface-muted);border:1.5px solid rgba(226,232,240,.8);border-radius:.8rem}.share-label{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blog-muted)}.share-btns{display:flex;align-items:center;gap:1rem}.share-btn{display:flex;align-items:center;justify-content:center;width:3.8rem;height:3.8rem;border-radius:.6rem;background:#fff;border:1.5px solid rgba(226,232,240,.8);color:var(--blog-muted);text-decoration:none;transition:all .2s ease;cursor:pointer;font-size:1.4rem}.share-btn:hover{border-color:var(--blog-accent);color:var(--blog-accent);transform:translateY(-2px);background:var(--blog-accent-dim)}.blog-sidebar{position:sticky;top:9rem;z-index:10}.sidebar-card{background:#fff;border:1.5px solid rgba(226,232,240,.8);border-radius:1.2rem;padding:2.4rem;margin-bottom:2.4rem;position:relative;overflow:hidden}.sidebar-card-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blog-accent);margin-bottom:1.8rem;display:flex;align-items:center;gap:.8rem}.sidebar-card-title::after{content:'';flex:1;height:1.5px;background:rgba(226,232,240,.8)}.sidebar-tag-pill{font-family:var(--font-display);font-weight:700;font-size:1.1rem;padding:.4rem 1rem;background:#f1f5f9;border:1.5px solid #e2e8f0;border-radius:30px;color:#475569;text-decoration:none;transition:all .2s ease;display:inline-block}.sidebar-tag-pill:hover{background:var(--blog-accent-dim);border-color:var(--blog-accent);color:var(--blog-accent)}.sidebar-card input[type=text]{background:#fff;border:1.5px solid rgba(226,232,240,.8);border-radius:.6rem;padding:1rem 1.4rem;font-family:var(--font-body);font-size:1.45rem;color:var(--blog-text);outline:0;transition:border-color .25s ease,box-shadow .25s ease;width:100%}.sidebar-card input[type=text]:focus{border-color:var(--blog-accent);box-shadow:0 0 0 3px rgba(5,150,105,.08)}.sidebar-card button[type=submit]{background:var(--blog-accent);color:#fff;border:none;border-radius:.6rem;padding:1rem 1.6rem;cursor:pointer;font-family:var(--font-display);font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .2s ease}.sidebar-card button[type=submit]:hover{background:var(--blog-accent-hover)}.comments-section{margin-top:5.6rem;padding-top:4rem;border-top:1.5px solid rgba(226,232,240,.8)}.comment-form{display:flex;flex-direction:column;gap:1.6rem;margin-bottom:4rem;background:#fff;border:1.5px solid rgba(226,232,240,.8);border-radius:1.2rem;padding:2.4rem}.comment-form-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blog-accent)}.comment-form input[type=text],.comment-form textarea{background:#fff;border:1.5px solid rgba(226,232,240,.8);border-radius:.6rem;padding:1.2rem 1.6rem;font-family:var(--font-body);font-size:1.5rem;color:var(--blog-text);outline:0;transition:border-color .25s ease,box-shadow .25s ease;width:100%}.comment-form input[type=text]:focus,.comment-form textarea:focus{border-color:var(--blog-accent);box-shadow:0 0 0 3px rgba(5,150,105,.1)}.comment-form button[type=submit]{align-self:flex-start;background:var(--blog-accent);color:#fff;border:none;border-radius:.6rem;padding:1.2rem 2.4rem;cursor:pointer;font-family:var(--font-display);font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .2s ease}.comment-form button[type=submit]:hover{background:var(--blog-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,150,105,.15)}#comments-list{display:flex;flex-direction:column;gap:2.4rem}.comment-item{display:flex;gap:1.6rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(226,232,240,.8);margin-bottom:2.4rem;animation:commentFadeIn .4s ease both}.comment-item:last-child{border-bottom:none;margin-bottom:0}.comment-avatar{width:4rem;height:4rem;border-radius:50%;background:var(--blog-accent-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--blog-accent);border:1.5px solid rgba(5,150,105,.15);flex-shrink:0}.comment-body{flex:1}.comment-meta{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.6rem;flex-wrap:wrap}.comment-author{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--blog-heading)}.comment-author.author-badge::after{content:'Author';font-family:var(--font-display);font-weight:700;font-size:.9rem;background:var(--blog-accent-dim);color:var(--blog-accent);border:1px solid rgba(5,150,105,.22);padding:.1rem .6rem;border-radius:.3rem;margin-left:.8rem}.comment-date{font-family:var(--font-body);font-size:1.25rem;color:var(--blog-muted)}.comment-content{font-size:1.5rem;color:var(--blog-text);line-height:1.65}.cta-section{background:var(--blog-surface-muted);border:1.5px solid rgba(226,232,240,.8);border-radius:1.2rem;padding:4rem 3.6rem;text-align:center;position:relative;overflow:hidden;margin:4.8rem 0}.cta-section::before{content:'';position:absolute;top:-6rem;left:50%;transform:translateX(-50%);width:30rem;height:30rem;background:radial-gradient(circle,rgba(5,150,105,.05) 0,transparent 70%);pointer-events:none}.cta-label{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blog-muted);margin-bottom:1.2rem}.cta-title{font-family:var(--font-display);font-size:2.2rem;font-weight:800;color:var(--blog-heading);margin-bottom:.8rem}.cta-sub{font-size:1.45rem;color:var(--blog-muted);margin-bottom:2.8rem}.cta-btn{display:inline-flex;align-items:center;gap:1rem;padding:1.4rem 2.8rem;background:red;color:#fff;font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:.05em;text-decoration:none;border-radius:.6rem;transition:all .2s ease;position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(255,0,0,.2)}.cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,0,0,.35);color:#fff}.cta-btn:active{transform:translateY(0)}.btn-icon{font-size:1.6rem}.cta-hint{font-family:var(--font-mono);font-size:1.1rem;color:var(--blog-muted);margin-top:1.6rem}.cta-hint code{display:inline;font-size:1.1rem;color:var(--blog-accent);background:var(--blog-accent-dim);padding:.2rem .6rem;border-radius:.3rem}@keyframes fadeUp{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes commentFadeIn{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@media (max-width:991.98px){.blog-sidebar{position:static;margin-top:4rem}}@media (max-width:575.98px){.blog-post-page header{padding:4rem 0 1rem 0}.cta-section{padding:2.8rem 2rem}.share-container{flex-direction:column;align-items:flex-start;gap:1.4rem}.comment-form{padding:1.8rem}}.lb-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.95);z-index:10000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s ease}.lb-backdrop.open{opacity:1;pointer-events:all}.lb-topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2.4rem;border-bottom:1.5px solid rgba(226,232,240,.8);background:#fff}.lb-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--blog-heading)}.lb-close{background:rgba(15,23,42,.05);border:1.5px solid rgba(226,232,240,.8);color:var(--blog-muted);width:3.4rem;height:3.4rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.6rem;transition:all .2s}.lb-close:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:#ef4444}.lb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:3.2rem 2.4rem;display:flex;justify-content:center}.lb-scroll img{max-width:90rem;width:100%;border-radius:.8rem;border:1.5px solid rgba(226,232,240,.8);box-shadow:0 20px 50px rgba(15,23,42,.15);display:block}.lb-hint{flex-shrink:0;text-align:center;padding:1.2rem;font-family:var(--font-mono);font-size:1.1rem;color:#94a3b8;background:#fff;border-top:1.5px solid rgba(226,232,240,.8)}.step-card{background:#fff;border:1.5px solid rgba(226,232,240,.8);border-radius:1.2rem;margin-bottom:4rem;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}.step-card:hover{border-color:var(--blog-accent-mid);box-shadow:0 15px 35px rgba(15,23,42,.06)}.step-header{display:flex;align-items:stretch;border-bottom:1.5px solid rgba(226,232,240,.8);background:var(--blog-surface-muted)}.step-number-block{font-family:var(--font-display);font-size:3rem;font-weight:950;color:#fff;background:var(--blog-accent);width:8.5rem;min-height:7.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-header-text{padding:1.8rem 2.4rem;flex:1;display:flex;flex-direction:column;justify-content:center}.step-label{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.15em;color:var(--blog-accent);text-transform:uppercase;margin-bottom:.4rem!important}.step-title{font-family:var(--font-display);font-size:2.2rem;font-weight:850;color:var(--blog-heading);margin:0!important}.step-body{padding:3rem}.info-block{padding:1.8rem 2.2rem;border-radius:.6rem;margin-bottom:2.4rem;border-left:4px solid}.info-block.action{background:var(--blog-accent-dim);border-color:var(--blog-accent)}.info-block.why{background:rgba(14,165,233,.05);border-color:#0ea5e9}.info-block-label{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.8rem}.info-block.action .info-block-label{color:var(--blog-accent)}.info-block.why .info-block-label{color:#0ea5e9}.info-block p{font-size:1.45rem;line-height:1.7;margin:0!important}.code-wrapper{margin:2.4rem 0;border-radius:.8rem;overflow:hidden;border:1.5px solid rgba(15,23,42,.05)}.code-header{display:flex;align-items:center;justify-content:space-between;background:#0b0f19;padding:1.2rem 2rem;border-bottom:1.5px solid rgba(255,255,255,.05)}.code-lang{font-family:var(--font-mono);font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:#475569}.code-dots{display:flex;gap:.6rem}.code-dot{width:.8rem;height:.8rem;border-radius:50%}.code-dot:first-child{background:#ff5f57}.code-dot:nth-child(2){background:#ffbd2e}.code-dot:nth-child(3){background:#28c840}.copy-btn{background:0 0;border:1.5px solid rgba(255,255,255,.1);color:#64748b;font-family:var(--font-mono);font-size:1.1rem;padding:.3rem .8rem;border-radius:.4rem;cursor:pointer;transition:all .2s}.copy-btn:hover{color:var(--blog-accent);border-color:var(--blog-accent-mid)}.copy-btn.copied{color:#10b981;border-color:rgba(16,185,129,.3)}.code-wrapper pre{background:var(--code-bg);padding:2.2rem 2.4rem;margin:0;overflow-x:auto}.code-wrapper code{font-family:var(--font-mono);font-size:1.4rem;line-height:1.8;color:var(--code-text)}.code-wrapper code .cmd{color:#38bdf8;font-weight:700}.code-wrapper code .arg{color:#fb923c}.code-wrapper code .kw{color:var(--code-keyword);font-weight:700}.code-wrapper code .str{color:var(--code-string)}.code-wrapper code .cm{color:var(--code-punctuation);font-style:italic}.code-wrapper code .fn{color:var(--code-function)}.code-wrapper code .var{color:var(--code-variable)}.code-wrapper code .pun{color:var(--code-punctuation)}.code-wrapper code .num{color:var(--code-number)}.key-points{list-style:none;display:flex;flex-direction:column;gap:1rem;margin:1.6rem 0;padding-left:0}.key-points li{display:flex;align-items:flex-start;gap:1.2rem;font-size:1.5rem;color:var(--blog-text)}.key-points li::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--blog-accent);margin-top:.8rem;flex-shrink:0}