---
title: Flair Leaderboard
description: Who's got the most pieces of documentation flair?
---

import { Aside, Card, CardGrid } from '@astrojs/starlight/components';

# Flair Leaderboard

<div style="display: flex; justify-content: center; margin: 2rem 0;">
  <img src="/chotchkies-logo.webp" alt="Chotchkie's Bar & Grill" style="max-width: 300px; border-radius: 8px;" />
</div>

> *"You know, the Nazis had pieces of flair they made the Jews wear."*

We don't require 37 pieces of flair like Brian. Just the minimum — but we encourage *expressing yourself*.

---

## Your Collection

Click the **flair counter** in the bottom-right corner of any page to see your collection. Badges are earned by spending 3+ seconds reading each page.

## Available Flair (12 Badges)

<CardGrid>
  <Card title="📄 First Extraction" icon="document">
    Visit the homepage
  </Card>
  <Card title="🔴 Basement Dweller" icon="puzzle">
    Read the backstory
  </Card>
  <Card title="🖨️ PC Load Letter" icon="setting">
    Complete installation
  </Card>
  <Card title="☕ Case of the Mondays" icon="rocket">
    Finish quick start
  </Card>
  <Card title="📋 TPS Report Expert" icon="list-format">
    Browse tools reference
  </Card>
  <Card title="👔 The Bobs Approved" icon="approve-check">
    Study architecture
  </Card>
  <Card title="📝 Memo Received" icon="information">
    Check test dashboard
  </Card>
  <Card title="🔥 Jump to Conclusions" icon="warning">
    Survive torture tests
  </Card>
  <Card title="⭐ Flair Enthusiast" icon="star">
    View leaderboard
  </Card>
  <Card title="🎖️ Credit Where Due" icon="heart">
    Read the credits
  </Card>
  <Card title="📚 Legacy Handler" icon="open-book">
    Learn legacy formats
  </Card>
  <Card title="🌐 Cloud Connect" icon="external">
    Use hosted MCP
  </Card>
</CardGrid>

---

## The Goal

Collect all 12 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.

<Aside type="tip" title="Persistence">
Your flair collection is stored in localStorage — it persists across sessions but stays on your device.
</Aside>

---

<div style="text-align: center; margin-top: 2rem;">

*"We need to talk about your flair..."*

<small style="opacity: 0.6;">
Image: Chotchkie's Bar & Grill, © 20th Century Fox
</small>

</div>
