:root{--vibe-green:#10b981;--vibe-green-dark:#059669;--warm-white:#fafaf9;--soft-black:#1c1917;--stone-100:#f5f5f4;--stone-200:#e7e5e4;--stone-300:#d6d3d1;--stone-500:#78716c;--stone-600:#57534e;--stone-700:#44403c;--font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-display:"Space Grotesk",sans-serif}.article-header{padding:3rem 2rem}.article-header-content{margin:0 auto;max-width:900px}.breadcrumb{color:var(--stone-600);font-size:.9rem;margin-bottom:1rem}.breadcrumb a{color:var(--vibe-green-dark);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.article-header h1{font-family:var(--font-display);font-size:2.25rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.article-meta{color:var(--stone-600);display:flex;flex-wrap:wrap;font-size:.9rem;gap:1.5rem}.article-page{position:relative}.article-bg-fixed{height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:0}.article-scroll-layer{position:relative;z-index:1}.article-hero-header{margin-top:-4rem;padding:6rem 2rem 3rem;position:relative}.article-hero-content{animation:articleFadeUp .6s ease-out;margin:0 auto;max-width:900px;width:100%}@keyframes articleFadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.article-hero-content .breadcrumb{margin-bottom:.75rem}.article-hero-content .breadcrumb a{color:var(--vibe-green-dark)}.article-hero-content h1{color:var(--soft-black);font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.15;margin-bottom:.75rem}.article-hero-content .article-meta{color:var(--stone-600);display:flex;flex-wrap:wrap;font-size:.85rem;gap:1.25rem;margin-bottom:1rem}.article-frost-frame{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#fafaf938;border:1px solid hsla(0,0%,100%,.25);border-radius:16px;box-shadow:0 4px 30px #0000000a;margin:0 auto 2rem;max-width:960px;min-height:60vh;position:relative}.article-frost-frame.frost-wide{max-width:1160px}.article-frost-frame:before{background:linear-gradient(180deg,transparent,hsla(60,9%,98%,.15));border-radius:16px 16px 0 0;content:"";height:40px;left:0;pointer-events:none;position:absolute;right:0;top:-40px}.article-share{align-items:center;display:flex;gap:.5rem;margin-top:.25rem}.article-share-label{color:var(--stone-500);font-size:.8rem;font-weight:500;margin-right:.25rem}.share-btn{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff9;border:1px solid rgba(0,0,0,.08);border-radius:8px;color:var(--stone-600);cursor:pointer;display:inline-flex;height:34px;justify-content:center;transition:all .2s;width:34px}.share-btn:hover{background:#ffffffe6;border-color:#00000026;box-shadow:0 2px 8px #00000014;color:var(--soft-black);transform:translateY(-1px)}.share-btn-sm{border-radius:6px;height:30px;width:30px}.article-sticky-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fafaf9eb;border-bottom:1px solid rgba(0,0,0,.06);left:0;pointer-events:none;position:fixed;right:0;top:4rem;transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:90}.article-sticky-header.visible{pointer-events:auto;transform:translateY(0)}.article-sticky-inner{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin:0 auto;max-width:1100px;padding:.625rem 1.5rem}.article-sticky-left{align-items:center;display:flex;flex:1;gap:.75rem;min-width:0}.sticky-back-btn{align-items:center;border-radius:8px;color:var(--stone-600);display:inline-flex;flex-shrink:0;height:32px;justify-content:center;transition:all .2s;width:32px}.sticky-back-btn:hover{background:#0000000d;color:var(--soft-black)}.sticky-category{background:#10b9811a;border-radius:4px;color:var(--vibe-green-dark);flex-shrink:0;font-size:.7rem;letter-spacing:.05em;padding:.2rem .5rem;text-transform:uppercase}.sticky-category,.sticky-title{font-weight:600;white-space:nowrap}.sticky-title{color:var(--soft-black);font-family:var(--font-display);font-size:.9rem;line-height:1.3;margin:0;overflow:hidden;text-overflow:ellipsis}.article-sticky-right{align-items:center;display:flex;flex-shrink:0;gap:.375rem}.tag{border-radius:9999px;color:#fff;display:inline-block;font-size:.8rem;font-weight:500;margin-right:.5rem;padding:.25rem .75rem}.tag-critical{background:#dc2626}.tag-auth{background:#2563eb}.tag-database{background:#ca8a04}.tag-frontend{background:#7c3aed}.tag-deployment{background:#0891b2}.tag-api{background:#92400e}.works-with{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.works-with span{background:#fff;border-radius:6px;color:var(--stone-700);font-size:.8rem;font-weight:500;padding:.35rem .75rem}.blog-article{margin:0 auto;max-width:900px;padding:2rem}.blog-article .tldr:first-child{margin-top:0}.tldr{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:4px solid var(--vibe-green);border-radius:0 8px 8px 0;margin-bottom:2rem;padding:1.5rem}.tldr h2{color:var(--vibe-green-dark);font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 .5rem}.tldr p{color:var(--stone-700);margin:0}h2{font-size:1.5rem;font-weight:700;margin:2.5rem 0 1rem}h2,h3{color:var(--soft-black);font-family:var(--font-display)}h3{font-size:1.2rem;font-weight:600;margin:2rem 0 .75rem}ol,p,ul{color:var(--stone-700);margin-bottom:1rem}ol,ul{padding-left:1.5rem}li{margin-bottom:.5rem}code{background:var(--stone-100);border-radius:4px;font-size:.9rem;padding:.2rem .4rem}.prompt-box{background:var(--soft-black);border-radius:12px;margin:1.5rem 0;padding:1.5rem;position:relative}.prompt-box-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.prompt-box-title{color:#a8a29e;font-size:.85rem;font-weight:500}.copy-button{background:var(--vibe-green);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.8rem;font-weight:500;padding:.4rem .8rem;transition:background .2s}.copy-button:hover{background:var(--vibe-green-dark)}.prompt-text{color:#e7e5e4;font-family:Monaco,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap}.use-case{background:var(--stone-100);border-radius:8px;margin:1rem 0;padding:1rem 1.25rem}.use-case strong{color:var(--soft-black)}.warning-box{background:#fef3c7;border-left:4px solid #f59e0b;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.warning-box p{color:#92400e;margin:0}.tip-box{background:#dbeafe;border-left:4px solid #3b82f6;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.tip-box p{color:#1e40af;margin:0}.faq-section{border-top:1px solid var(--stone-200);margin-top:3rem;padding-top:2rem}.faq-item{margin-bottom:1.5rem}.faq-item h3{font-size:1.1rem;margin:0 0 .5rem}.faq-item p{margin:0}.related-articles{background:var(--stone-100);border-radius:12px;margin-top:3rem;padding:2rem}.related-articles h2{font-size:1.25rem;margin-bottom:1rem;margin-top:0}.related-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.related-card{background:#fff;border:1px solid var(--stone-200);border-radius:8px;color:inherit;padding:1rem;text-decoration:none;transition:border-color .2s}.related-card:hover{border-color:var(--vibe-green)}.related-card h3{font-size:.95rem;margin-bottom:.25rem;margin-top:0}.related-card p{color:var(--stone-500);font-size:.85rem;margin:0}.cta-box{background:linear-gradient(135deg,var(--soft-black) 0,var(--stone-700) 100%);border-radius:12px;color:#fff;margin-top:2rem;padding:2rem;text-align:center}.cta-box h2{color:#fff;font-family:var(--font-display);font-size:1.25rem;margin-bottom:.5rem;margin-top:0}.cta-box p{color:var(--stone-300);margin-bottom:1rem}.cta-button{background:var(--vibe-green);border-radius:8px;color:#fff;display:inline-block;font-weight:600;padding:.75rem 1.5rem;text-decoration:none;transition:background .2s}.cta-button:hover{background:var(--vibe-green-dark);color:#fff}.header-amber,.header-yellow{background:linear-gradient(135deg,#fef3c7,#fde68a)}.header-blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.header-red{background:linear-gradient(135deg,#fee2e2,#fecaca)}.header-green{background:linear-gradient(135deg,#dcfce7,#bbf7d0)}.header-purple{background:linear-gradient(135deg,#f3e8ff,#e9d5ff)}.header-cyan{background:linear-gradient(135deg,#cffafe,#a5f3fc)}.header-orange{background:linear-gradient(135deg,#ffedd5,#fed7aa)}.checklist-section{background:#fff;border:1px solid var(--stone-200);border-radius:12px;margin:1.5rem 0;padding:1.5rem}.checklist-section h3{align-items:center;border-bottom:1px solid var(--stone-200);display:flex;font-family:var(--font-display);font-size:1.15rem;font-weight:600;gap:.5rem;margin-bottom:1rem;margin-top:0;padding-bottom:.75rem}.checklist-section h3 span{background:var(--vibe-green);border-radius:4px;color:#fff;font-size:.75rem;padding:.2rem .5rem}.checklist-item{align-items:flex-start;border-bottom:1px solid var(--stone-100);display:flex;gap:1rem;padding:.75rem 0}.checklist-item:last-child{border-bottom:none;padding-bottom:0}.checklist-item input[type=checkbox]{accent-color:var(--vibe-green);flex-shrink:0;height:20px;margin-top:.25rem;width:20px}.checklist-item label{flex:1}.checklist-item label strong{color:var(--soft-black);display:block;margin-bottom:.25rem}.checklist-item label span{color:var(--stone-600);font-size:.9rem}.print-button{align-items:center;background:var(--stone-100);border:1px solid var(--stone-200);border-radius:6px;color:var(--stone-700);cursor:pointer;display:inline-flex;font-size:.9rem;gap:.5rem;margin-bottom:2rem;padding:.5rem 1rem;text-decoration:none}.print-button:hover{background:var(--stone-200)}.print-button svg{height:18px;width:18px}.severity-indicator{align-items:center;border-radius:4px;display:inline-flex;font-size:.7rem;font-weight:600;gap:.25rem;letter-spacing:.03em;margin-left:.5rem;padding:.15rem .5rem;text-transform:uppercase}.severity-critical{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.severity-important{background:#fff7ed;border:1px solid #fed7aa;color:#ea580c}.severity-recommended{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}.time-estimate{color:var(--stone-500);font-size:.75rem;gap:.25rem}.time-estimate svg{height:12px;width:12px}.quick-checklist{background:linear-gradient(135deg,#fef2f2,#fee2e2);border:2px solid #fca5a5;border-radius:12px;margin-bottom:2rem;padding:1.5rem}.quick-checklist h2{align-items:center;color:#991b1b;display:flex;font-family:var(--font-display);font-size:1.1rem;font-weight:700;gap:.5rem;margin:0 0 .5rem}.quick-checklist h2 svg{height:20px;width:20px}.quick-checklist .quick-intro{color:#7f1d1d;font-size:.9rem;margin-bottom:1rem}.quick-checklist .checklist-item{border-bottom-color:#fecaca}.quick-checklist .checklist-item:last-child{border-bottom:none}.checklist-item a{color:var(--vibe-green-dark);font-weight:500;text-decoration:none}.checklist-item a:hover{text-decoration:underline}.item-meta{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}@media print{.cta-box,.print-button,.related-articles{display:none}.blog-article{max-width:100%;padding:0}.checklist-section,.quick-checklist{-moz-column-break-inside:avoid;break-inside:avoid}.severity-indicator{border:1px solid}}.header-vibe-green{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.header-vibe-green .breadcrumb{color:#fffc}.header-vibe-green .breadcrumb a{color:#fff}.header-vibe-green .article-meta{color:#ffffffe6}.header-bolt-orange{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}.header-bolt-orange .breadcrumb{color:#fffc}.header-bolt-orange .breadcrumb a{color:#fff}.header-bolt-orange .article-meta{color:#ffffffe6}.header-lovable-pink{background:linear-gradient(135deg,#ec4899,#db2777);color:#fff}.header-lovable-pink .breadcrumb{color:#fffc}.header-lovable-pink .breadcrumb a{color:#fff}.header-lovable-pink .article-meta{color:#ffffffe6}.header-supabase{background:linear-gradient(135deg,#3ecf8e,#1c8656);color:#fff}.header-supabase .breadcrumb{color:#fffc}.header-supabase .breadcrumb a{color:#fff}.header-supabase .article-meta{color:#ffffffe6}.header-firebase{background:linear-gradient(135deg,#ffa000,#ff6f00);color:#fff}.header-firebase .breadcrumb{color:#fffc}.header-firebase .breadcrumb a{color:#fff}.header-firebase .article-meta{color:#ffffffe6}.header-vercel{background:linear-gradient(135deg,#000,#333);color:#fff}.header-vercel .breadcrumb{color:#fffc}.header-vercel .breadcrumb a{color:#fff}.header-vercel .article-meta{color:#ffffffe6}.header-netlify{background:linear-gradient(135deg,#00c7b7,#00a99d);color:#fff}.header-netlify .breadcrumb{color:#fffc}.header-netlify .breadcrumb a{color:#fff}.header-netlify .article-meta{color:#ffffffe6}.header-nextjs{background:linear-gradient(135deg,#000,#171717);color:#fff}.header-nextjs .breadcrumb{color:#fffc}.header-nextjs .breadcrumb a{color:#fff}.header-nextjs .article-meta{color:#ffffffe6}.header-react{background:linear-gradient(135deg,#61dafb,#21a1c4);color:#fff}.header-react .breadcrumb{color:#fffc}.header-react .breadcrumb a{color:#fff}.header-react .article-meta{color:#ffffffe6}.header-stories{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff}.header-stories .breadcrumb{color:#fffc}.header-stories .breadcrumb a{color:#fff}.header-stories .article-meta{color:#ffffffe6}.header-stories .tag{background:#fff3;border:none;color:#fff}.header-costs{background:linear-gradient(135deg,#991b1b,#7f1d1d);color:#fff}.header-costs .breadcrumb{color:#fffc}.header-costs .breadcrumb a{color:#fff}.header-costs .article-meta{color:#ffffffe6}.header-costs .cost-badge{border-radius:999px;font-weight:600}.article-category,.header-costs .cost-badge{background:#fff3;padding:.25rem .75rem}.article-category{border-radius:50px;display:inline-block;font-size:.875rem;margin-bottom:1rem}.stats-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:2rem 0}.stat-card{background:#f5f3ff;border-radius:8px;padding:1.5rem;text-align:center}.stat-number{color:#7c3aed;font-family:var(--font-display);font-size:2rem;font-weight:800}.stat-label{color:#5b21b6;font-size:.875rem}.stat-box{background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1px solid #fca5a5;border-radius:8px;margin:1.5rem 0;padding:1.5rem;text-align:center}.stat-box .number{color:#dc2626;font-family:var(--font-display);font-size:3rem;font-weight:700}.stat-box .label{color:#991b1b;font-size:.9rem}.story-block{background:var(--stone-100);border-left:4px solid var(--stone-300);border-radius:8px;font-style:italic}.finding-box,.story-block{margin:1.5rem 0;padding:1.5rem}.finding-box{background:#fef2f2;border:1px solid #fecaca;border-radius:8px}.finding-box-title{color:#dc2626;font-weight:700;margin-bottom:.5rem}.finding-box p{color:#7f1d1d;margin:0}.lesson-box{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;margin:1.5rem 0;padding:1.5rem}.lesson-box-title{color:#059669;font-weight:700;margin-bottom:.5rem}.lesson-box p,.lesson-box ul{color:#064e3b;margin:0}.timeline{border-left:2px solid var(--stone-300);margin:1.5rem 0;padding-left:1.5rem}.timeline-item{margin-bottom:1.5rem;position:relative}.timeline-item:before{background:var(--vibe-green);border-radius:50%;content:"";height:10px;left:-1.75rem;position:absolute;top:.5rem;width:10px}.timeline-time{color:var(--soft-black);font-size:.9rem;font-weight:600}.article-container{margin:60px auto 0;max-width:800px;padding:3rem 2rem}.category-badge{background:#fef3c7;border-radius:9999px;color:#92400e;display:inline-block;font-size:.8rem;font-weight:500;margin-bottom:1rem;padding:.25rem .75rem}.article-title{font-family:var(--font-display);font-size:2.25rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.tldr-box{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid #f59e0b;border-radius:0 8px 8px 0;margin-bottom:2rem;padding:1.5rem}.tldr-box strong{color:#92400e}.step{background:#fff;border:1px solid var(--stone-200);border-radius:8px;margin:1.5rem 0;padding:1.5rem}.step-number{background:var(--vibe-green);border-radius:50%;color:#fff;display:inline-block;font-size:.9rem;font-weight:600;height:28px;line-height:28px;margin-right:.5rem;text-align:center;width:28px}.step h3{display:inline;margin:0}pre{background:var(--soft-black);border-radius:8px;color:#a5b4fc;font-family:Monaco,Menlo,Consolas,monospace;font-size:.85rem;margin:1rem 0 1.5rem;overflow-x:auto;padding:1rem}pre code{background:transparent;color:inherit;font-size:inherit;padding:0}p code{background:var(--stone-200);border-radius:4px;color:var(--soft-black);font-size:.9rem;padding:.1rem .4rem}.warning{background:#fef2f2;border-left:4px solid #ef4444;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem}.warning strong{color:#dc2626}.tip{background:#f0fdf4;border-left:4px solid #22c55e;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem}.tip strong{color:#16a34a}.faq{border-top:1px solid var(--stone-200);margin-top:3rem;padding-top:2rem}.faq h2{margin-top:0}.severity-badge{background:#fff3;border-radius:999px;font-weight:600;padding:.25rem .75rem}.code-block{background:var(--soft-black);border-radius:8px;margin:1rem 0 1.5rem;overflow-x:auto;padding:1.25rem}.code-block code{background:transparent;color:#e5e5e5;font-size:.875rem;padding:0;white-space:pre}.code-block code,.code-label{font-family:Monaco,Menlo,Consolas,monospace}.code-label{color:var(--stone-500);font-size:.75rem;margin-bottom:.5rem}.checklist{background:#fff;border:1px solid var(--stone-200);border-radius:8px;margin:1.5rem 0;padding:1.5rem}.checklist h4{font-family:var(--font-display);font-size:1rem;margin-bottom:1rem}.checklist ul{list-style:none;padding-left:0}.checklist li{padding:.5rem 0 .5rem 1.75rem;position:relative}.checklist li:before{color:var(--vibe-green);content:"☐";left:0;position:absolute}.danger-box{background:#fef2f2;border-left:4px solid #dc2626;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.danger-box p{color:#991b1b;margin:0}.success-box{background:#f0fdf4;border-left:4px solid var(--vibe-green);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.success-box p{color:#166534;margin:0}.blog-article table,.comparison-table{background:#fff;border:1px solid var(--stone-200);border-collapse:separate;border-radius:8px;border-spacing:0;box-shadow:0 1px 3px #0000000a;margin:1.5rem 0;overflow:hidden;width:100%}.blog-article table td,.blog-article table th,.comparison-table td,.comparison-table th{border-bottom:1px solid var(--stone-200);padding:.75rem 1rem;text-align:left}.blog-article table th,.comparison-table th{background:var(--stone-100);color:var(--soft-black);font-size:.875rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}.blog-article table td,.comparison-table td{color:var(--stone-700);font-size:.9rem;line-height:1.5}.blog-article table tbody tr:last-child td,.comparison-table tbody tr:last-child td{border-bottom:none}.blog-article table tbody tr:hover,.comparison-table tbody tr:hover{background:var(--stone-100)}.blog-article table code,.comparison-table code{background:var(--stone-100);border:1px solid var(--stone-200);border-radius:4px;font-size:.8rem;padding:.15rem .4rem;white-space:nowrap}.info-box{background:#dbeafe;border-left:4px solid #3b82f6;border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1rem 1.25rem}.info-box p{color:#1e40af;margin:0}.quotable-box{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:2px solid var(--vibe-green);border-radius:12px;margin:2rem 0;padding:1.5rem;text-align:center}.quotable-box blockquote{color:var(--soft-black);font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.4;margin:0 0 1rem}.quotable-box .attribution{color:var(--vibe-green-dark);font-size:.85rem;font-weight:500}.quotable-box .attribution a{color:var(--vibe-green-dark);text-decoration:none}.quotable-box .attribution a:hover{text-decoration:underline}.time-estimate{align-items:center;background:var(--stone-100);border-radius:4px;color:var(--stone-600);display:inline-flex;font-size:.8rem;gap:.35rem;margin-left:.5rem;padding:.25rem .6rem}.time-estimate:before{content:"⏱"}.page-header{padding:3rem 2rem}.page-header-content{margin:0 auto;max-width:1100px}.page-header h1{font-family:var(--font-display);font-size:2.5rem;font-weight:700;margin-bottom:.75rem}.page-header p{color:var(--stone-600);font-size:1.1rem;max-width:600px}.page-header .count{background:#fff;border-radius:9999px;color:var(--stone-600);display:inline-block;font-size:.85rem;font-weight:500;margin-top:1rem;padding:.25rem .75rem}.main-content{margin:0 auto;max-width:1100px;padding:2rem}.category-section{margin-bottom:3rem}.category-section:first-child .category-title{margin-top:0}.category-title{border-bottom:2px solid var(--stone-200);font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem}.category-description{color:var(--stone-600);margin-bottom:1.5rem}.guides-grid,.vuln-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.guide-card,.vuln-card{background:#fff;border:1px solid var(--stone-200);border-radius:10px;color:inherit;padding:1.5rem;text-decoration:none;transition:all .2s}.article-page .guide-card,.article-page .vuln-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#fafaf938;border:1px solid hsla(0,0%,100%,.25);border-radius:12px;box-shadow:0 2px 16px #0000000a}.guide-card:hover,.vuln-card:hover{border-color:var(--vibe-green);box-shadow:0 4px 12px #10b9811a;transform:translateY(-2px)}.article-page .guide-card:hover,.article-page .vuln-card:hover{background:#fafaf959;border-color:#10b98166;box-shadow:0 6px 20px #10b9811f}.guide-card h3,.vuln-card h3{color:var(--soft-black);font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin:0 0 .5rem}.guide-card p,.vuln-card p{color:var(--stone-600);font-size:.9rem;margin:0}.guide-card .tag{background:var(--stone-100);border-radius:4px;color:var(--stone-600);display:inline-block;font-size:.75rem;margin-top:.75rem;padding:.2rem .5rem}.guide-card .tag.popular{background:#fef3c7;color:#92400e}.vuln-card .severity{border-radius:4px;display:inline-block;font-size:.75rem;font-weight:600;margin-top:.75rem;padding:.2rem .5rem}.vuln-card .severity.critical{background:#fef2f2;color:#991b1b}.vuln-card .severity.high{background:#fff7ed;color:#9a3412}.vuln-card .severity.medium{background:#fefce8;color:#854d0e}.vuln-card .severity.common{background:#dcfce7;color:#166534}.blueprint-summary{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border:1px solid #c4b5fd;border-radius:12px;margin-bottom:2rem;padding:1.5rem}.blueprint-summary p{color:#4c1d95;font-size:1rem;line-height:1.7;margin:0}.blueprint-summary strong{color:#5b21b6}.blueprint-meta{background:#fff;border:1px solid var(--stone-200);border-radius:8px;display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.5rem 0;padding:1rem 1.25rem}.meta-item{align-items:center;display:flex;gap:.5rem}.meta-item .icon{color:var(--stone-500);height:20px;width:20px}.meta-item .label{color:var(--stone-500);font-size:.85rem}.meta-item .value{color:var(--soft-black);font-size:.9rem;font-weight:600}.security-score{align-items:center;display:flex;gap:.75rem}.score-ring{height:48px;position:relative;width:48px}.score-ring svg{transform:rotate(-90deg)}.score-ring .bg{fill:none;stroke:var(--stone-200);stroke-width:4}.score-ring .progress{fill:none;stroke:var(--vibe-green);stroke-linecap:round;stroke-width:4;transition:stroke-dashoffset .3s}.score-ring .score-text{color:var(--vibe-green-dark);font-size:.75rem;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.score-label{color:var(--stone-600);font-size:.85rem}.score-label strong{color:var(--soft-black);display:block;font-size:.95rem}.tool-tag{align-items:center;border-radius:4px;display:inline-flex;font-size:.75rem;font-weight:600;gap:.35rem;margin-bottom:.35rem;margin-right:.35rem;padding:.2rem .6rem}.tool-tag.cursor{background:#dbeafe;color:#1e40af}.tool-tag.bolt{background:#ffedd5;color:#9a3412}.tool-tag.lovable{background:#fce7f3;color:#9d174d}.tool-tag.supabase{background:#d1fae5;color:#065f46}.tool-tag.firebase{background:#fef3c7;color:#92400e}.tool-tag.vercel{background:#f3f4f6;color:#111827}.tool-tag.netlify{background:#ccfbf1;color:#0f766e}.tool-tag.nextjs{background:#f3f4f6;color:#111827}.tool-tag.react{background:#cffafe;color:#0e7490}.tool-tag.prisma{background:#e0e7ff;color:#3730a3}.tool-tag.mongodb{background:#dcfce7;color:#166534}.tool-tag.railway{background:#f3e8ff;color:#6b21a8}.tool-tag.stripe{background:#ede9fe;color:#5b21b6}.tool-tag.auth0{background:#fee2e2;color:#991b1b}.tool-tag.clerk{background:#e0e7ff;color:#4338ca}.tool-tag.convex{background:#fef3c7;color:#b45309}.tool-tag.planetscale{background:#f3f4f6;color:#374151}.tool-tag.neon{background:#d1fae5;color:#047857}.checklist-attributed{background:#fff;border:1px solid var(--stone-200);border-radius:12px;margin:1.5rem 0;padding:1.5rem}.checklist-attributed h4{align-items:center;display:flex;font-family:var(--font-display);font-size:1rem;gap:.75rem;margin-bottom:1rem}.checklist-attributed h4 .tool-tag{margin:0}.checklist-attributed-item{align-items:flex-start;border-bottom:1px solid var(--stone-100);display:flex;gap:.75rem;padding:.75rem 0}.checklist-attributed-item:last-child{border-bottom:none;padding-bottom:0}.checklist-attributed-item input[type=checkbox]{accent-color:var(--vibe-green);flex-shrink:0;height:18px;margin-top:.2rem;width:18px}.checklist-attributed-item .item-content{flex:1}.checklist-attributed-item .item-text{color:var(--stone-700);font-size:.95rem}.checklist-attributed-item .item-tools{margin-top:.35rem}.stack-comparison{background:var(--stone-100);border-radius:12px;margin:2rem 0;padding:1.5rem}.stack-comparison h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:1rem;margin-top:0}.stack-comparison-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.stack-alt-card{background:#fff;border:1px solid var(--stone-200);border-radius:8px;color:inherit;padding:1rem;text-decoration:none;transition:border-color .2s}.stack-alt-card:hover{border-color:var(--vibe-green)}.stack-alt-card h4{color:var(--soft-black);font-size:.95rem;margin:0 0 .5rem}.stack-alt-card p{color:var(--stone-600);font-size:.85rem;margin:0}.blueprint-links{background:#fff;border:1px solid var(--stone-200);border-radius:12px;margin:2rem 0;padding:1.5rem}.blueprint-links h3{color:var(--soft-black);font-family:var(--font-display);font-size:1rem;margin-bottom:1rem;margin-top:0}.blueprint-links-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.blueprint-link{align-items:center;background:var(--stone-100);border-radius:6px;color:var(--stone-700);display:flex;font-size:.9rem;gap:.5rem;padding:.5rem .75rem;text-decoration:none;transition:background .2s}.blueprint-link:hover{background:var(--stone-200);color:var(--soft-black)}.blueprint-link svg{color:var(--vibe-green);height:16px;width:16px}.guide-card-enhanced{background:#fff;border:1px solid var(--stone-200);border-radius:10px;color:inherit;display:flex;flex-direction:column;padding:1.25rem;text-decoration:none;transition:all .2s}.guide-card-enhanced:hover{border-color:var(--vibe-green);box-shadow:0 4px 12px #10b9811a;transform:translateY(-2px)}.guide-card-enhanced h3{color:var(--soft-black);font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 .35rem}.guide-card-enhanced p{color:var(--stone-600);flex:1;font-size:.85rem;margin:0 0 .75rem}.guide-card-meta{align-items:center;border-top:1px solid var(--stone-100);display:flex;justify-content:space-between;margin-top:auto;padding-top:.75rem}.guide-card-time{color:var(--stone-500)}.guide-card-score,.guide-card-time{align-items:center;display:flex;font-size:.75rem;gap:.35rem}.guide-card-score{color:var(--vibe-green-dark);font-weight:600}.guide-card-score svg{height:14px;width:14px}.blueprint-stats-banner{background:#fff;border:1px solid var(--stone-200);border-radius:8px;display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:2rem;padding:1rem 1.5rem}.blueprint-stat{text-align:center}.blueprint-stat .number{color:var(--vibe-green);font-family:var(--font-display);font-size:1.5rem;font-weight:700}.blueprint-stat .label{color:var(--stone-500);font-size:.8rem}@media(max-width:768px){.article-header h1{font-size:1.75rem}.article-meta{flex-direction:column;gap:.5rem}.article-container,.article-header,.article-hero-header,.blog-article{padding-left:1rem;padding-right:1rem}.article-frost-frame{border-radius:12px;margin-left:.5rem;margin-right:.5rem}.article-frost-frame:before{border-radius:12px 12px 0 0}.sticky-category{display:none}.prompt-box{padding:1rem}.prompt-text{font-size:.8rem}.article-title{font-size:1.75rem}.blog-article table,.comparison-table{display:block;font-size:.85rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.blog-article table td,.blog-article table th,.comparison-table td,.comparison-table th{padding:.5rem .75rem}.page-header h1{font-size:1.75rem}.guides-grid,.vuln-grid{grid-template-columns:1fr}}