<div style="position:relative;width:360px;height:440px;border-radius:24px;overflow:hidden;border:1px solid var(--border);background:var(--background)">
<.drawer id="move-goal" title="Move goal" description="Set your daily activity goal." open>
<div style="display:flex;align-items:center;justify-content:center;gap:24px">
<button class="ui-btn" data-variant="outline" data-size="icon" style="border-radius:9999px" type="button" aria-label="Decrease"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg></button>
<div style="text-align:center"><div style="font-size:56px;line-height:1;font-weight:700;letter-spacing:-0.04em;font-variant-numeric:tabular-nums">350</div><div class="ui-muted" style="font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px">Calories/day</div></div>
<button class="ui-btn" data-variant="outline" data-size="icon" style="border-radius:9999px" type="button" aria-label="Increase"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></button>
</div>
<:footer><.button>Save goal</.button><form method="dialog" style="display:contents"><.button variant="outline">Cancel</.button></form></:footer>
</.drawer>
</div>