/* Minimal styles for GenerateID.dev - Black and White only */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
    
    :root {
      --radius: 0;
      --background: #ffffff;
      --foreground: #000000;
      --card: #ffffff;
      --card-foreground: #000000;
      --muted: #f8f9fa;
      --muted-foreground: #6c757d;
      --border: #e9ecef;
      --accent: #f8f9fa;
      --accent-foreground: #495057;
      --primary: #000000;
      --primary-foreground: #ffffff;
      --secondary: #f8f9fa;
      --secondary-foreground: #000000;
    }

    .dark {
      --background: #000000;
      --foreground: #ffffff;
      --card: #111111;
      --card-foreground: #ffffff;
      --muted: #1a1a1a;
      --muted-foreground: #a0a0a0;
      --border: #333333;
      --accent: #1a1a1a;
      --accent-foreground: #cccccc;
      --primary: #ffffff;
      --primary-foreground: #000000;
      --secondary: #1a1a1a;
      --secondary-foreground: #ffffff;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      color: var(--foreground);
      background: var(--background);
      min-height: 100vh;
    }
    
    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    
    /* Minimal Header */
    .hero-header {
      border-radius: var(--radius);
      padding: 2.5rem 2rem;
      margin-bottom: 2.5rem;
      text-align: center;
    }
    
    .hero-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 0.75rem;
      letter-spacing: -0.02em;
    }
    
    .hero-subtitle {
      font-size: 1.125rem;
      color: var(--muted-foreground);
      max-width: 500px;
      margin: 0 auto;
      font-weight: 400;
    }
    
    /* Minimal Cards */
    .card {
      border-radius: var(--radius);
      padding: 1.5rem;
      border: 1px solid var(--border);
      transition: all 0.2s ease;
      position: relative;
    }
    
    .card:hover {
      border-color: var(--foreground);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }
    
    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
      font-size: 1.5rem;
      background: var(--muted);
      color: var(--foreground);
    }
    
    .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--card-foreground);
      margin-bottom: 0.25rem;
    }
    
    .card-subtitle {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      font-weight: 400;
    }
    
    .card-description {
      color: var(--muted-foreground);
      margin-bottom: 1rem;
      line-height: 1.5;
      font-size: 0.875rem;
    }
    
    .card-details {
      background: var(--muted);
      border-radius: var(--radius);
      padding: 0.75rem;
      margin-bottom: 1rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
    }
    
    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.25rem 0;
      font-size: 0.75rem;
    }
    
    .detail-label {
      color: var(--muted-foreground);
      font-weight: 400;
    }
    
    .detail-value {
      color: var(--foreground);
      font-weight: 500;
      padding: 0.125rem 0.375rem;
      border-radius: calc(var(--radius) - 0.25rem);
    }
    
    /* Minimal Buttons */
    .btn {
      display: block;
      width: 100%;
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      font-weight: 500;
      font-size: 0.875rem;
      text-decoration: none;
      text-align: center;
      transition: all 0.2s ease;
      border: 1px solid var(--border);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
    }
    
    .btn-primary {
      background: var(--primary);
      color: var(--primary-foreground);
      border-color: var(--primary);
    }
    
    .btn-primary:hover {
      background: var(--foreground);
      border-color: var(--foreground);
    }
    
    .btn-secondary {
      background: var(--secondary);
      color: var(--secondary-foreground);
      border-color: var(--border);
    }
    
    .btn-secondary:hover {
      background: var(--accent);
      border-color: var(--foreground);
    }
    
    /* Grid Layout */
    .grid {
      display: grid;
      gap: 1.5rem;
    }
    
    .md\:grid-cols-3 {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .md\:grid-cols-2 {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    /* Minimal Features Section */
    .features-section {
      border-radius: var(--radius);
      padding: 2rem;
      margin: 2rem 0;
    }
    
    .section-title {
      font-size: 1.75rem;
      font-weight: 600;
      text-align: center;
      margin-bottom: 2rem;
      color: var(--foreground);
    }
    
    .feature-item {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }
    
    .feature-icon {
      width: 24px;
      height: 24px;
      background: var(--foreground);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.75rem;
      flex-shrink: 0;
      color: var(--background);
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    .feature-content h3 {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 0.5rem;
    }
    
    .feature-content p {
      color: var(--muted-foreground);
      font-size: 1rem;
      margin: 0;
      line-height: 1.5;
    }
    
    /* Minimal API Usage Section */
    .api-section {
      border-radius: var(--radius);
      padding: 2rem;
      margin: 2rem 0;
    }
    
    .code-block {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.5rem;
      overflow-x: auto;
      margin: 1rem 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .code-block pre {
      margin: 0;
      color: #71717a;
      font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
      font-size: 0.875rem;
      line-height: 1.6;
      font-weight: 500;
    }
    
    .code-block pre code {
      color: #71717a !important;
      font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
      font-weight: 500;
      background: transparent;
      display: block;
      white-space: pre;
    }
    
    /* Ensure inline code elements are also styled */
    code {
      color: var(--foreground);
      font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
      font-weight: 500;
      background: var(--muted);
      padding: 0.125rem 0.25rem;
      border-radius: calc(var(--radius) - 0.125rem);
      font-size: 0.875rem;
    }
    
    /* Minimal Footer */
    .footer {
      text-align: center;
      margin-top: 3rem;
      padding: 1.5rem 0;
      color: var(--muted-foreground);
      font-size: 0.875rem;
    }
    
    .footer a {
      color: var(--foreground);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    
    .footer a:hover {
      color: var(--muted-foreground);
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        padding: 0 1rem;
      }
      
      .hero-header {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
      }
      
      .card {
        padding: 1.25rem;
      }
      
      .features-section,
      .api-section {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0;
      }
      
      .section-title {
        font-size: 1.5rem;
      }
    }
    
    /* Copy Success Animation */
    .copy-success {
      background: var(--muted-foreground) !important;
      color: var(--background) !important;
      border-color: var(--muted-foreground) !important;
    }
    
    /* Monospace elements for technical content */
    .mono {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
    }
    
    .section-subtitle {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 0.875rem;
      color: var(--muted-foreground);
      text-align: center;
      margin-bottom: 1rem;
      letter-spacing: 0.05em;
    }