.blog-page .component-grid{grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 32px;display:grid}.blog-page .component-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;position:relative;overflow:hidden}.blog-page .component-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.blog-page .component-card.brain:before{background:linear-gradient(90deg,var(--blue),var(--blue-light))}.blog-page .component-card.memory:before{background:linear-gradient(90deg,var(--purple),#9d8ff5)}.blog-page .component-card.tools:before{background:linear-gradient(90deg,var(--green),#34d399)}.blog-page .component-card.loop:before{background:linear-gradient(90deg,var(--pink),#f472b6)}.blog-page .component-icon{margin-bottom:10px;font-size:28px}.blog-page .component-card h4{margin-bottom:6px;font-size:16px}.blog-page .component-card.brain h4{color:var(--blue)}.blog-page .component-card.memory h4{color:var(--purple)}.blog-page .component-card.tools h4{color:var(--green-mid)}.blog-page .component-card.loop h4{color:var(--pink)}.blog-page .component-card .component-label{text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400);margin-bottom:8px;font-size:11px;font-weight:700}.blog-page .component-card p{color:var(--text-light);margin-bottom:8px;font-size:14px;line-height:1.6}.blog-page .component-card p:last-of-type{margin-bottom:0}.blog-page .component-card .tech-row{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.blog-page .tech-tag{background:var(--off-white);border:1px solid var(--border);color:var(--navy);border-radius:100px;padding:3px 9px;font-size:11px;font-weight:600}.blog-page .react-loop{flex-wrap:wrap;align-items:center;gap:0;margin:24px 0 32px;display:flex}.blog-page .react-step{background:var(--navy);color:#fff;border-radius:var(--radius);text-align:center;flex:1;min-width:100px;padding:14px 18px}.blog-page .react-step .step-icon{margin-bottom:6px;font-size:20px;display:block}.blog-page .react-step .step-label{font-family:var(--font-poppins),sans-serif;font-size:13px;font-weight:700}.blog-page .react-step .step-desc{color:#fff9;margin-top:3px;font-size:11px}.blog-page .react-arrow{color:var(--blue);flex-shrink:0;padding:0 4px;font-size:20px}.blog-page .path-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 32px;display:grid}.blog-page .path-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.blog-page .path-card-header{font-family:var(--font-poppins),sans-serif;padding:14px 18px;font-size:15px;font-weight:700}.blog-page .path-card.nocode .path-card-header{color:var(--green-mid);background:#10b98114;border-bottom:1px solid #10b98133}.blog-page .path-card.lowcode .path-card-header{color:var(--blue);background:#4b6ae814;border-bottom:1px solid #4b6ae833}.blog-page .path-card.custom .path-card-header{color:var(--purple);background:#6b5ce714;border-bottom:1px solid #6b5ce733}.blog-page .path-card-body{padding:14px 18px}.blog-page .path-row{color:var(--gray-800);flex-direction:column;gap:6px;font-size:13px;display:flex}.blog-page .path-row-item{border-bottom:1px dashed var(--gray-200);justify-content:space-between;gap:6px;padding:6px 0;display:flex}.blog-page .path-row-item:last-child{border-bottom:none}.blog-page .path-row-item .label{color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.blog-page .path-row-item .value{color:var(--navy);text-align:right;font-weight:600}.blog-page .build-steps{flex-direction:column;gap:20px;margin:24px 0 32px;display:flex}.blog-page .build-step{border:1px solid var(--border);border-radius:var(--radius-lg);align-items:flex-start;gap:18px;padding:22px 24px;display:flex}.blog-page .build-step-num{background:var(--navy);color:#fff;width:40px;height:40px;font-family:var(--font-poppins),sans-serif;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;font-weight:800;display:flex}.blog-page .build-step-content{min-width:0}.blog-page .build-step-content h4{margin-bottom:8px;font-size:16px}.blog-page .build-step-content p{color:var(--text-light);margin-bottom:10px;font-size:15px;line-height:1.6}.blog-page .build-step-content p:last-child{margin-bottom:0}.blog-page .your-role{color:var(--gray-800);border-left:3px solid var(--blue);background:#4b6ae80f;border-radius:8px;margin-top:6px;padding:10px 14px;font-size:13px;font-weight:500}.blog-page .your-role strong{color:var(--blue)}.blog-page .mistake-list{flex-direction:column;gap:14px;margin:20px 0 32px;display:flex}.blog-page .mistake-item{border-radius:var(--radius);background:#e5196b0a;border:1px solid #e5196b26;align-items:flex-start;gap:14px;padding:16px 20px;display:flex}.blog-page .mistake-num{font-family:var(--font-poppins),sans-serif;color:var(--pink);flex-shrink:0;min-width:24px;font-size:16px;font-weight:800}.blog-page .mistake-content h4{margin-bottom:5px;font-size:15px}.blog-page .mistake-content p{color:var(--text-light);margin-bottom:0;font-size:14px;line-height:1.6}@media (max-width:900px){.blog-page .component-grid{grid-template-columns:1fr 1fr}.blog-page .path-grid{grid-template-columns:1fr}}@media (max-width:640px){.blog-page .component-grid{grid-template-columns:1fr}.blog-page .react-loop{flex-direction:column;gap:4px}.blog-page .react-arrow{transform:rotate(90deg)}.blog-page .build-step{flex-direction:column;gap:12px}}