options

# Options Present multiple design options as a vertical stack of turns — each turn of options is its own `<section>`, newest turn at the **top**, and every option gets a stable `{turn}{letter}` id (`1a`, `1b`, `2a`…) that the user references back in chat and you cross-link between turns. Always include `<meta name="design_doc_mode" content="canvas">` in `<helmet>` — the host provides pan/zoom, so the user can freely zoom out on designs wider than the viewport. **How to write it** — put one `<style>` block in `<helmet>`, then one `<section class="dv-turn">` per turn as a **direct child of the root** (right after `</helmet>`, no wrapper). When the user asks for another round, **insert the new section ABOVE the existing ones** so the latest work sits at the top; never reorder, renumber, or delete earlier turns. ```html <helmet data-dc-atomics><meta name="design_doc_mode" content="canvas"><style> body{margin:0;background:#f0eee9;font-family:system-ui,sans-serif} .dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px} .dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 20px} .dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none} .dv-tname{font:600 13px/1.2 system-ui,sans-serif;color:#1a1a1a} .dv-opts{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start} .dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px} .dv-...