    body { 
      font-family: "Inter", sans-serif; 
    }
    
    html, body { 
      overflow-x: hidden; 
    }

    .char-counter {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.25rem 0.5rem;
      border-radius: 0.375rem;
      display: inline-block;
    }

    .char-safe { 
      background: #d1fae5; 
      color: #065f46; 
    }

    .char-warning { 
      background: #fef3c7; 
      color: #92400e; 
    }

    .char-danger { 
      background: #fee2e2; 
      color: #991b1b; 
    }

    .preview-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1.5rem 0;
    }

    @media (max-width: 640px) {
      .preview-comparison {
        grid-template-columns: 1fr;
      }
    }

    .preview-box {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      padding: 1rem;
      font-size: 0.875rem;
      line-height: 1.5;
      min-height: 150px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .preview-label {
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 0.5rem;
    }

    .content-section {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid #e5e7eb;
    }

    .content-section h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #111827;
    }

    .content-section h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      color: #374151;
    }

    .content-section p {
      margin-bottom: 1rem;
      color: #4b5563;
      line-height: 1.7;
    }

    .content-section ul, .content-section ol {
      margin-bottom: 1.25rem;
      padding-left: 1.5rem;
      color: #4b5563;
    }

    .content-section li {
      margin-bottom: 0.5rem;
      line-height: 1.6;
    }

    .tip-box {
      background: #eff6ff;
      border-left: 4px solid #3b82f6;
      padding: 1rem;
      margin: 1.25rem 0;
      border-radius: 0.5rem;
    }

    .success-box {
      background: #f0fdf4;
      border-left: 4px solid #10b981;
      padding: 1rem;
      margin: 1.25rem 0;
      border-radius: 0.5rem;
    }

    .warning-box {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 1rem;
      margin: 1.25rem 0;
      border-radius: 0.5rem;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1.5rem 0;
    }

    @media (max-width: 640px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .before-after {
      padding: 1rem;
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }

    .before-example {
      background: #fee2e2;
      border: 1px solid #fca5a5;
    }

    .after-example {
      background: #d1fae5;
      border: 1px solid #6ee7b7;
    }
