body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; color: #2d3748; max-width: 800px; margin: 0 auto; padding: 20px; background: #fff; }
        h1 { font-size: 2.4rem; line-height: 1.2; margin-bottom: 10px; color: #1a202c; }
        h2 { font-size: 1.8rem; margin-top: 45px; color: #1a202c; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
        h3 { font-size: 1.3rem; margin-top: 30px; color: #2d3748; }
        p { margin-bottom: 20px; font-size: 1.125rem; color: #4a5568; }
        .meta { color: #718096; font-size: 0.9rem; margin-bottom: 30px; display: flex; gap: 15px; }
        .takeaways { background: #faf5ff; border-left: 5px solid #805ad5; padding: 25px; border-radius: 8px; margin: 30px 0; }
        .takeaways h3 { margin-top: 0; color: #553c9a; font-size: 1.2rem; }
        .takeaways ul { margin-bottom: 0; padding-left: 20px; }
        .takeaways li { margin-bottom: 10px; color: #6b46c1; font-size: 1.05rem; }
        .cta-box { background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%); color: white; padding: 40px; border-radius: 12px; text-align: center; margin: 50px 0; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .cta-box h3 { color: white; margin-top: 0; font-size: 1.5rem; }
        .cta-box p { color: #e2e8f0; font-size: 1.1rem; }
        .cta-btn { display: inline-block; background: white; color: #805ad5; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 15px; transition: transform 0.2s; }
        .cta-btn:hover { transform: translateY(-2px); }
        ul { margin-bottom: 20px; padding-left: 20px; }
        li { margin-bottom: 12px; font-size: 1.1rem; color: #4a5568; }
        strong { color: #1a202c; }
        a { color: #805ad5; text-decoration: none; font-weight: 500; }
        a:hover { text-decoration: underline; }
        .related-posts { margin-top: 60px; padding-top: 40px; border-top: 2px solid #e2e8f0; }
        .related-posts h2 { font-size: 1.6rem; margin-top: 0; margin-bottom: 25px; border-bottom: none; padding-bottom: 0; color: #1a202c; }
        .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
        .related-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; }
        .related-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.05); border-color: #cbd5e0; }
        .related-thumb { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.9); }
        .thumb-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .thumb-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .thumb-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .related-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
        .related-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #805ad5; background: #faf5ff; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; width: fit-content; }
        .related-title { font-size: 1.1rem; line-height: 1.4; color: #1a202c; margin: 0 0 15px 0; font-weight: 700; flex-grow: 1; }
        .related-card:hover .related-title { color: #805ad5; }
        .related-meta { font-size: 0.85rem; color: #718096; margin-top: auto; display: flex; align-items: center; gap: 5px; }