<ol>
  <li><strong>Terminal-first personality</strong>
    <ul>
      <li>Keep interfaces precise, text-forward, and direct.</li>
      <li>Prefer strong borders, clear sectioning, and purposeful labels.</li>
    </ul>
  </li>
  <li><strong>One neutral palette, one loud accent</strong>
    <ul>
      <li>Neutral grayscale for structure.</li>
      <li>Accent yellow for urgency and paid actions.</li>
    </ul>
  </li>
  <li><strong>Mobile first principle</strong>
    <ul>
      <li>Every section should keep readable hierarchy on narrow viewports.</li>
      <li>Avoid interactions that only work on hover.</li>
    </ul>
  </li>
</ol>

<div class="mm-token-grid">
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--ink"></div>
    <div class="mm-swatch-label">Ink / <code>var(--mm-ink)</code></div>
  </div>
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--paper"></div>
    <div class="mm-swatch-label">Paper / <code>var(--mm-paper)</code></div>
  </div>
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--border"></div>
    <div class="mm-swatch-label">Border / <code>var(--mm-border)</code></div>
  </div>
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--accent"></div>
    <div class="mm-swatch-label">Accent / <code>var(--mm-accent)</code></div>
  </div>
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--positive"></div>
    <div class="mm-swatch-label">Positive / <code>var(--mm-positive)</code></div>
  </div>
  <div class="mm-swatch">
    <div class="mm-swatch-chip mm-swatch-chip--negative"></div>
    <div class="mm-swatch-label">Negative / <code>var(--mm-negative)</code></div>
  </div>
</div>

<div class="mm-type-scale">
  <h1 class="text-heading-1 font-extrabold">Page title / H1</h1>
  <h2 class="text-heading-2 font-bold">Section title / H2</h2>
  <h3 class="text-heading-3 font-bold">Feature title / H3</h3>
  <h4 class="text-heading-4 font-bold">Card title / H4</h4>
  <h5 class="text-heading-5 font-bold">Meta title / H5</h5>
  <p class="text-base">Body copy, default paragraph rhythm for pages.</p>
  <p class="text-sm mm-text-muted">Metadata / helper text</p>
</div>

<div class="mm-stack">
  <section>
    <h3 class="text-xl font-bold">Ordered list</h3>
    <ol class="list-decimal pl-6">
      <li>Run <code>posh sync</code> to sync content.</li>
      <li>Open the documentation browser with <code>posh</code>.</li>
      <li>Search docs by keyword and jump to sections.</li>
    </ol>
  </section>

  <section>
    <h3 class="text-xl font-bold">Unordered list</h3>
    <ul class="list-disc pl-6">
      <li>Offline-friendly docset browsing</li>
      <li>Fast keyword search</li>
      <li>Gemfile-aware filtering</li>
    </ul>
  </section>
</div>

<div class="mm-inline-list">
  <button class="btn mm-btn--secondary">Secondary</button>
  <button class="btn mm-btn--primary">Primary</button>
  <button class="btn mm-btn--danger">Destructive</button>
  <button disabled class="btn">Disabled</button>
</div>

<div class="mm-inline-list">
  <a class="btn mm-btn--secondary" href="#">Anchor button</a>
  <button class="btn mm-btn--primary inline-flex gap-2">
    Buy now <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-5 size-6">  <path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg>
  </button>
</div>

<div class="mm-stack">
  <p>
    Read the latest updates in
    <a href="#" class="underline">release notes</a>.
  </p>
  <p>
    Explore docs with a
    <a href="#" class="uppercase text-sm">menu-style link</a>
    treatment.
  </p>
  <div class="mm-inline-list">
    <a href="#" class="underline">Default link</a>
    <a href="#" class="mm-text-muted">Subtle footer link</a>
    <a href="#" aria-current="page" class="underline mm-text-muted">Current page</a>
  </div>
</div>

<div class="mm-inline-list">
  <span class="mm-badge">Default</span>
  <span class="mm-badge mm-badge--accent">Latest release</span>
  <span class="mm-badge mm-badge--positive">Stable</span>
  <span class="mm-badge mm-badge--danger">Deprecated</span>
</div>

<article class="mm-card mm-stack">
  <div class="mm-inline-list">
    <span class="mm-pill">Latest release</span>
  </div>
  <h3 class="text-2xl font-bold">Supporter</h3>
  <p>
    There are no premium features, but there is a lifetime license available for
    early supporters.
  </p>
  <button class="btn mm-btn--primary">Buy a license</button>
</article>

<article class="mm-card">
  <h3 class="text-2xl font-bold">v0.13.1 released</h3>
  <p class="mm-text-muted">30 January 2025</p>
  <p>Better error communication, improved version output, and maintenance updates.</p>
</article>

<!-- Use the same name within an accordion, and a unique name for each additional accordion. -->
<!-- The first answer is open for this preview. Remove open to start with every answer collapsed. -->
<section aria-labelledby="sample-faq-heading" class="border border-gray-400">
  <!-- Optional section-header bar with its own centering and padding, not a default heading style. -->
  <h3 id="sample-faq-heading" class="site-section-heading">FAQ</h3>

  <details name="sample-faq" class="faq__item border-t border-gray-400" open>
    <summary class="faq__question flex items-center justify-between gap-4 px-5 py-6 sm:px-10 text-lg sm:text-xl font-bold cursor-pointer hover:bg-gray-50">
      <span>Is POSH free?</span>
      <span class="faq__icon w-5 shrink-0 text-center" aria-hidden="true"></span>
    </summary>
    <p class="max-w-4xl px-5 py-6 sm:px-10">
      Yes. Use POSH for free, with no limits.<br /><br />
      You only pay for AI access.
    </p>
  </details>

  <details name="sample-faq" class="faq__item border-t border-gray-400">
    <summary class="faq__question flex items-center justify-between gap-4 px-5 py-6 sm:px-10 text-lg sm:text-xl font-bold cursor-pointer hover:bg-gray-50">
      <span>Does POSH work offline?</span>
      <span class="faq__icon w-5 shrink-0 text-center" aria-hidden="true"></span>
    </summary>
    <p class="max-w-4xl px-5 py-6 sm:px-10">
      Yes. POSH is a local-first app. You only need an internet
      connection to download or update documentation.
    </p>
  </details>

  <details name="sample-faq" class="faq__item border-t border-gray-400">
    <summary class="faq__question flex items-center justify-between gap-4 px-5 py-6 sm:px-10 text-lg sm:text-xl font-bold cursor-pointer hover:bg-gray-50">
      <span>Which operating systems are supported?</span>
      <span class="faq__icon w-5 shrink-0 text-center" aria-hidden="true"></span>
    </summary>
    <p class="max-w-4xl px-5 py-6 sm:px-10">
      POSH runs on macOS and Linux. Install it with Homebrew, use
      the AUR package on Arch Linux, or download an executable from
      <a href="https://github.com/skatkov/homebrew-tap/releases">GitHub Releases</a>.
    </p>
  </details>
</section>

<div class="mm-stack">
  <section class="mm-alert mm-alert--info">
    <h4>Info</h4>
    <p>Install command copied. Paste it in your terminal to continue.</p>
  </section>

  <section class="mm-alert mm-alert--success">
    <h4>Success</h4>
    <p>Docsets synchronized successfully.</p>
  </section>

  <section class="mm-alert mm-alert--warning">
    <h4>Warning</h4>
    <p>Only 9 supporter licenses remain.</p>
  </section>

  <section class="mm-alert mm-alert--error">
    <h4>Error</h4>
    <p>Could not fetch release metadata. Please retry in a few minutes.</p>
  </section>
</div>

<div class="mm-stack">
  <form class="mm-stack" action="#" method="post" novalidate>
    <div class="mm-field">
      <label for="sample-email">Email</label>
      <div class="mm-inline-form">
        <input
          class="mm-input"
          id="sample-email"
          type="email"
          placeholder="Enter your email"
        >
        <button class="btn mm-btn--primary" type="submit">Subscribe</button>
      </div>
    </div>
  </form>

  <form class="mm-stack mm-card" action="#" method="post" novalidate>
    <h3 class="text-xl font-bold">Feedback Request</h3>

    <div class="mm-grid-2">
      <div class="mm-field">
        <label for="full-name">Full name</label>
        <input class="mm-input" id="full-name" type="text" placeholder="Stas Katkov">
      </div>

      <div class="mm-field">
        <label for="work-email">Work email</label>
        <input class="mm-input" id="work-email" type="email" placeholder="you@company.com">
      </div>
    </div>

    <div class="mm-grid-2">
      <div class="mm-field">
        <label for="plan">Plan</label>
        <select class="mm-select" id="plan">
          <option>Freemium</option>
          <option>Supporter</option>
          <option>Early adopter</option>
        </select>
      </div>

      <div class="mm-field">
        <label for="priority">Priority</label>
        <select class="mm-select" id="priority">
          <option>Low</option>
          <option selected>Normal</option>
          <option>High</option>
        </select>
      </div>
    </div>

    <div class="mm-field">
      <label for="request">What should improve?</label>
      <textarea class="mm-textarea" id="request" placeholder="Describe your workflow and friction points..."></textarea>
      <p class="mm-help">Tip: include command examples and expected behavior.</p>
    </div>

    <label class="mm-checkbox-row" for="updates-optin">
      <input id="updates-optin" type="checkbox" checked>
      <span>I want release updates and beta announcements by email.</span>
    </label>

    <div class="mm-form-actions">
      <button class="btn mm-btn--primary" type="submit">Send feedback</button>
      <button class="btn mm-btn--secondary" type="button">Save draft</button>
    </div>
  </form>
</div>

<table class="mm-table">
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Primary Use</th>
      <th>Shortcut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Freemium</td>
      <td>Free</td>
      <td>Explore local docs and test workflows.</td>
      <td><span class="mm-kbd">posh</span></td>
    </tr>
    <tr>
      <td>Supporter</td>
      <td>$15 / lifetime</td>
      <td>Support project development and get updates early.</td>
      <td><span class="mm-kbd">posh sync</span></td>
    </tr>
    <tr>
      <td>Early adopter</td>
      <td>$15 / year</td>
      <td>Future subscription model placeholder.</td>
      <td><span class="mm-kbd">posh --version</span></td>
    </tr>
  </tbody>
</table>

<div class="mm-mini-layout">
  <div>
    <h3 class="text-2xl font-bold">Header zone</h3>
    <p class="mm-text-muted">Branding + optional release badge.</p>
  </div>
  <div>
    <h3 class="text-2xl font-bold">Main content zone</h3>
    <p class="mm-text-muted">Hero, features, pricing grids, and prose content.</p>
  </div>
  <div>
    <h3 class="text-2xl font-bold">Footer zone</h3>
    <p class="mm-text-muted">Legal links, navigation, and update signup.</p>
  </div>
</div>

<section class="mm-empty">
  <h4 class="text-xl font-bold">No results yet</h4>
  <p class="mm-text-muted">Try a broader search term or sync docsets first.</p>
  <div class="mm-inline-list mm-inline-list--center">
    <button class="btn mm-btn--primary">Sync docsets</button>
    <a class="btn mm-btn--secondary" href="#">Read docs</a>
  </div>
</section>