Bug: bullets render broken when `<li>` uses display:grid with inline `<code>`

First — thanks for the skill, it was easy to install and the curated style presets do a great job avoiding the typical AI-design slop.

While building a Sprint-Report deck following html-template.md and STYLE_PRESETS.md (Swiss Modern preset), I ran into a layout bug where bullets containing inline <code> elements rendered each text fragment on its own line.

Reproduction

1. Use the standard pattern from the html-template: a .bullets <ul> with <li> items where each <li> mixes plain text and inline <code> chips, e.g.:

<ul class="bullets">
  <li><code>claude-otel</code> — collector on <code>127.0.0.1:4317</code> writing to <code>~/.claude/otel-data/</code></li>
</ul>

1. Style the <li> with display: grid; grid-template-columns: <marker-width> 1fr; to get a hanging-indent effect with a ::before marker.

2. Result: each <code> chip and each adjacent text fragment is rendered as a separate line, content overflows beyond the 100vh viewport.

Cause

CSS Grid wraps each child of a grid container in an anonymous block-level box. With <li> as the grid container, every text node and every inline element (<code>) becomes its own anonymous box and gets placed in the next available grid cell. With a 2-column template, items wrap into rows alternately — so <li>foo <code>bar</code> baz</li> produces three anonymous boxes flowing through the grid, not one inline-flowing line.

This bites specifically when the content has multiple inline <code> chips (which is common in technical decks).

Fix that worked for me

Switch <li> from grid to a hanging-indent layout using position: relative + padding-left + ::before { position: absolute }:

.bullets li {
  position: relative;
  padding-left: clamp(1.4rem, 2.5vw, 2rem);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  line-height: 1.5;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: clamp(0.75rem, 1.5vw, 1.2rem);
  height: 2px;
  background: var(--ink);
}

This keeps the marker visually aligned and lets text + inline <code> flow naturally as a single inline-formatted line.

Suggestion

Either:

• Add an explicit warning in html-template.md against using display: grid for bullet items that mix text + inline elements, or
• Recommend the hanging-indent pattern above as the default for .bullets in the template.

Happy to send a PR if you'd find that useful.