embeds/linux-flasher.html

<div class="lf">
  <div class="lf-card">
    <div class="lf-head">
      <span class="lf-eyebrow">Why no Linux flasher, for now</span>
    </div>
    <div class="lf-hero">
      <div class="lf-val">96</div>
      <div class="lf-lbl">
        Linux users run a daemon <b>older than 1.8.3</b> - the only people a
        Linux build would help
      </div>
    </div>
    <div class="lf-share">
      <div class="lf-track"><span class="lf-fill" style="width: 1.1%"></span></div>
      <div class="lf-share-lbl"><b>~1%</b> of all robots seen by the app</div>
    </div>
    <div class="lf-src">Unique users, desktop app telemetry, July 2026.</div>
  </div>
</div>

<style>
  .lf {
    --ink: var(--article-text, #14161a);
    --muted: var(--article-muted, #6b7280);
    --border: var(--article-border, rgba(0, 0, 0, 0.14));
    --brand: var(--article-primary, #ff9500);
    width: 100%;
    box-sizing: border-box;
    color: var(--ink);
  }
  .lf * { box-sizing: border-box; }

  /* The HtmlEmbed frame already draws the card (border, radius, surface);
     this only adds breathing room inside it. */
  .lf-card {
    padding: 12px 10px 8px;
    text-align: center;
  }

  .lf-head { margin-bottom: 14px; }
  .lf-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
  }

  .lf-val {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.05;
  }
  .lf-lbl {
    max-width: 400px;
    margin: 8px auto 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted);
  }
  .lf-lbl b { color: var(--ink); font-weight: 700; }

  .lf-share {
    max-width: 380px;
    margin: 16px auto 0;
  }
  .lf-track {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
    overflow: hidden;
  }
  .lf-fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: var(--brand);
  }
  .lf-share-lbl {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--muted);
  }
  .lf-share-lbl b { color: var(--ink); font-weight: 700; }

  .lf-src {
    margin-top: 14px;
    font-size: 0.78rem;
    color: var(--muted);
  }

  @media (max-width: 640px) {
    .lf-card { padding: 8px 2px 4px; }
    .lf-val { font-size: 2.2rem; }
  }
</style>