{{template_css_start}}
    :root {
      --bg: #0a0a0c;
      --bg-elevated: #111115;
      --bg-card: #16161b;
      --text: #e8e8ed;
      --text-dimmed: #6e6e7a;
      --accent: {{accent}};
      --accent-light: {{accent_light}};
      --font-primary: '{{font_primary}}', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-secondary: '{{font_secondary}}', serif;
    }

    .hero {
      text-align: center;
      padding: var(--spacing-xl) 0;
    }

    .initials {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--bg-elevated);
      border: 2px solid var(--accent);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: var(--spacing-lg);
    }

    .hero h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: var(--spacing-sm);
      letter-spacing: -0.02em;
    }

    .hero .role {
      color: var(--accent);
      font-weight: 500;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--spacing-md);
    }

    .hero .tagline {
      color: var(--text-dimmed);
      font-family: var(--font-secondary);
      font-style: italic;
      font-size: 1.1rem;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      justify-content: center;
      margin: var(--spacing-lg) 0;
    }

    .tag {
      background: var(--bg-elevated);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.8rem;
      color: var(--text-dimmed);
    }

    .section {
      margin: var(--spacing-xl) 0;
    }

    .section h2 {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--accent);
      margin-bottom: var(--spacing-lg);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--spacing-md);
    }

    .card {
      background: var(--bg-card);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--radius);
      padding: var(--spacing-lg);
    }

    .card h3 {
      font-size: 1rem;
      margin-bottom: var(--spacing-sm);
    }

    .card p {
      color: var(--text-dimmed);
      font-size: 0.85rem;
    }

    .bio {
      color: var(--text-dimmed);
      font-family: var(--font-secondary);
      line-height: 1.8;
    }

    .cta {
      display: inline-block;
      margin-top: var(--spacing-xl);
      padding: 12px 32px;
      background: var(--accent);
      color: var(--bg);
      text-decoration: none;
      border-radius: var(--radius);
      font-weight: 600;
      font-size: 0.9rem;
      transition: opacity 0.2s;
    }

    .cta:hover { opacity: 0.85; }

    .footer {
      text-align: center;
      padding: var(--spacing-xl) 0 var(--spacing-lg);
      color: var(--text-dimmed);
      font-size: 0.75rem;
    }
{{template_css_end}}
{{template_body_start}}
    <div class="container">
      <div class="hero fade-in">
        <div class="initials">{{initials}}</div>
        <h1>{{name}}</h1>
        <div class="role">{{role}}</div>
        <div class="tagline">{{tagline}}</div>
      </div>

      <div class="tags fade-in stagger-1">
{{tags_html}}
      </div>

{{sections_html}}

      <div class="footer fade-in stagger-5">
        &copy; {{year}} {{name}}
      </div>
    </div>
{{template_body_end}}