/* Base clean e responsiva */
    main {
      max-width: 900px;
      margin: 2rem auto;
      padding: 0 1.5rem;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    article {
      padding: 2rem;
    }

    article h2 {
      font-size: 1.6rem;
      color: #111;
      margin-top: 1.5rem;
    }

    article p {
      margin-top: 1rem;
      font-size: 1.05rem;
    }

    .author {
      font-style: italic;
      color: #666;
      margin-bottom: 1.5rem;
    }

    .cta {
      margin-top: 2.5rem;
      padding: 1.5rem;
      background: #eef3ff;
      border-left: 4px solid #00beff;
      border-radius: 8px;
    }

    .cta a {
      color: #00beff;
      font-weight: 600;
      text-decoration: none;
    }

    @media (max-width: 600px) {
      article {
        padding: 1.2rem;
      }

      article h2 {
        font-size: 1.3rem;
      }
    }

/* Opcional: Adicionar estilo simples para as tags */
    .tag-item {
        display: inline-block;
        padding: 4px 10px;
        background-color: #1f2937; /* gray-800 */
        color: #00beff; /* blue-300 */
        border-radius: 9999px; /* full rounded */
        font-size: 0.875rem; /* text-sm */
        font-weight: 500;
        transition: background-color 0.3s;
        cursor: pointer;
    }
    .tag-item:hover {
        background-color: #1e3a8a; /* blue-900 */
    }
    
    /* Para melhorar a tipografia dentro do article no modo escuro */
    .prose-invert :where(a):not(:where(.not-prose,.not-prose *)) {
        color: #00beff; /* blue-400 */
    }
    .prose-invert :where(hr):not(:where(.not-prose,.not-prose *)) {
        border-color: #4b5563; /* gray-600 */
    }
    .text-principle-base {
        color: #00beff;
    }
    .span-1 {
        font-weight: bold;
        color: #00beff;
    }
    .highlight {
      background: #eef3ff;
      padding: 1rem;
      border-left: 4px solid #0044ff;
      border-radius: 6px;
      margin: 1.5rem 0;
    }