Files
MealQuest/design/MealQuest UI Designs/MealQuest Mockups.dc.html
T
2026-10-02 15:09:42 -04:00

417 lines
90 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<meta name="design_doc_mode" content="canvas">
<link rel="stylesheet" href="_ds/organic-cd54d318-425e-4a60-adfb-d590f70d40bd/styles.css">
<style>body{margin:0;background:var(--color-neutral-200);font-family:var(--font-body);color:var(--color-text)}a{color:var(--color-accent-700)}a:hover{color:var(--color-accent-800)}.dv-turn{padding:44px 48px 36px;scroll-margin-top:16px}.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:var(--color-text);color:var(--color-bg);border-radius:4px;text-decoration:none}.dv-tname{font:400 28px/1.2 var(--font-heading);color:var(--color-text)}.dv-opts{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}.dv-opt{flex:none;display:flex;flex-direction:column;gap:10px;scroll-margin-top:16px}.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:var(--color-neutral-300);color:var(--color-text);border-radius:5px;text-decoration:none}.dv-olabel{display:flex;align-items:baseline;gap:8px;font:600 12px/1.3 var(--font-body);color:var(--color-neutral-800)}.dv-opt:target .dv-oid{background:var(--color-accent);color:var(--color-bg)}.dv-next{margin:28px 0 0;font:13px/1.5 var(--font-body);color:var(--color-neutral-700)}.dv-group{font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);margin:40px 0 16px}</style>
</helmet>
<section class="dv-turn" id="t1">
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">MealQuest — first pass</span></div>
<div style="max-width:760px;font-size:14px;line-height:1.55;color:var(--color-neutral-800);display:flex;flex-direction:column;gap:6px">
<div><b>Working from your answers:</b> one shared household account · Organic design system · playful, quest-flavored copy · bottom nav = Home, Plan, Discover, Settings.</div>
<div>Accepted suggestions go to a <b>Quest log</b> (to-try pool). The AI builds each week from routine dinners + Quest log picks; you swap days, then it pushes to Google Calendar (app is source of truth). Shopping lists are grouped by dinner; uncheck what you already have. Each week's list becomes a post in the archive.</div>
<div><b>Assumptions to confirm:</b> Shopping list and Quick dinners are reached from Home/Plan (not tabs) · Admin lives inside Settings · Photos are placeholders.</div>
</div>
<div class="dv-group">Discover · swipe — 3 directions</div>
<div class="dv-opts">
<div class="dv-opt" id="1a"><div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Card stack · photo-led</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:8px 20px 0;display:flex;align-items:flex-end;justify-content:space-between">
<div><div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Discover</div><div style="font-family:var(--font-heading);font-size:30px;line-height:1.1">Side quests</div></div>
<div style="display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-800);font-size:12px;font-weight:700">Quest log · 6</div>
</div>
<div style="position:relative;margin:18px 20px 0;height:440px">
<div style="position:absolute;inset:0;transform:translateY(16px) scale(.9);border-radius:32px;background:var(--color-neutral-300)"></div>
<div style="position:absolute;inset:0;transform:translateY(8px) scale(.95);border-radius:32px;background:var(--color-surface)"></div>
<div style="position:absolute;inset:0;border-radius:32px;background:var(--color-neutral-100);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column">
<div style="height:220px;margin:10px;border-radius:24px;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-neutral-700)">dish photo</div>
<div style="padding:4px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;align-items:center;justify-content:space-between"><div style="font-family:var(--font-heading);font-size:24px;line-height:1.1">Korean beef bowls</div></div>
<div style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--color-neutral-700)"><span style="display:flex;gap:3px"><span style="width:8px;height:8px;border-radius:50%;background:var(--color-accent)"></span><span style="width:8px;height:8px;border-radius:50%;background:var(--color-neutral-300)"></span><span style="width:8px;height:8px;border-radius:50%;background:var(--color-neutral-300)"></span></span>Easy</div>
<div style="padding:12px 14px;border-radius:18px;background:var(--color-accent-2-100);color:var(--color-accent-2-900);font-size:13px;line-height:1.45"><b>Why this?</b> You make Chicken stir-fry and Beef tacos most weeks. Same flavors, sweet-savory twist.</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:center;gap:28px;margin-top:22px">
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:62px;height:62px;border-radius:50%;background:var(--color-neutral-100);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--color-text)"><svg viewBox="0 0 24 24" width="26" height="26" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></div>Pass</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:62px;height:62px;border-radius:50%;background:var(--color-accent-2-600);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--color-bg)"><svg viewBox="0 0 24 24" width="26" height="26" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg></div>Try it</div>
</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>Discover</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1b"><div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Full-bleed · mid-swipe state</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:4px 20px 0;display:flex;align-items:center;justify-content:space-between"><div style="font-family:var(--font-heading);font-size:22px">Discover</div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">3 of 10 today</div></div>
<div style="position:relative;margin:14px 16px 0;height:540px">
<div style="position:absolute;inset:0;border-radius:34px;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px)"></div>
<div style="position:absolute;inset:0;transform:translateX(46px) rotate(7deg);transform-origin:50% 100%;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-lg);background:repeating-linear-gradient(135deg,var(--color-accent-2-300) 0 8px,var(--color-accent-2-200) 8px 16px)">
<div style="position:absolute;top:120px;left:0;right:0;text-align:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-accent-2-800)">full-bleed dish photo</div>
<div style="position:absolute;top:28px;left:24px;transform:rotate(-12deg);padding:6px 14px;border:3px solid var(--color-accent-2-700);border-radius:14px;font-family:var(--font-heading);font-size:24px;color:var(--color-accent-2-800);background:var(--color-accent-2-100)">Try it!</div>
<div style="position:absolute;left:12px;right:12px;bottom:12px;padding:18px;border-radius:26px;background:var(--color-bg);display:flex;flex-direction:column;gap:8px">
<div style="display:flex;gap:6px"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700">Medium</span></div>
<div style="font-family:var(--font-heading);font-size:26px;line-height:1.05">Crock pot chicken tikka masala</div>
<div style="font-size:13px;line-height:1.45;color:var(--color-neutral-800)">Because Butter chicken night is a household favorite — this one cooks itself while you work.</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:space-between;padding:16px 34px 0;font-size:12px;font-weight:700;color:var(--color-neutral-700)"><span>← Pass</span><span style="color:var(--color-accent-2-700)">Add to Quest log →</span></div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>Discover</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1c"><div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Quest board · assistant voice</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;flex-direction:column;gap:8px">
<div style="display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--color-neutral-700)"><span>Today's batch</span><span>4 / 10</span></div>
<div style="height:8px;border-radius:999px;background:var(--color-neutral-300)"><div style="width:40%;height:100%;border-radius:999px;background:var(--color-accent)"></div></div>
</div>
<div style="margin:22px 20px 0;padding:22px;border-radius:34px;background:var(--color-surface);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:16px">
<div style="width:150px;height:150px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-neutral-700)">dish photo</div>
<div style="font-family:var(--font-heading);font-size:30px;line-height:1.05">Lemon garlic shrimp orzo</div>
<div style="display:flex;align-items:center;gap:10px"><span style="display:flex;gap:4px"><span style="width:22px;height:8px;border-radius:999px;background:var(--color-accent-2-600)"></span><span style="width:22px;height:8px;border-radius:999px;background:var(--color-accent-2-600)"></span><span style="width:22px;height:8px;border-radius:999px;background:var(--color-neutral-400)"></span></span><span style="font-size:12px;font-weight:700;color:var(--color-accent-2-800)">Level 2 · Medium</span></div>
<div style="display:flex;gap:10px;align-items:flex-start">
<div style="flex:none;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px">Q</div>
<div style="padding:12px 14px;border-radius:4px 18px 18px 18px;background:var(--color-neutral-100);font-size:13px;line-height:1.45">Your Shrimp scampi gets 5 stars every time. Orzo makes it a one-pot night.</div>
</div>
</div>
<div style="display:flex;gap:10px;margin:20px 20px 0">
<div style="flex:1;height:52px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px">Not for us</div>
<div style="flex:1.3;height:52px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px;color:var(--color-text)">Accept quest</div>
</div>
<div style="text-align:center;margin-top:10px;font-size:11px;color:var(--color-neutral-700)">or swipe the card</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>Discover</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
</div>
<div class="dv-group">Weekly plan — 3 directions</div>
<div class="dv-opts">
<div class="dv-opt" id="1d"><div class="dv-olabel"><a class="dv-oid" href="#1d">1d</a>Day list · swap per row</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;align-items:center;justify-content:space-between">
<div><div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Week 41</div><div style="font-family:var(--font-heading);font-size:26px;line-height:1.1">Oct 5 – 11</div></div>
<div style="display:flex;gap:6px"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg></div><div style="width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg></div></div>
</div>
<div style="margin:14px 20px 0;padding:10px 14px;border-radius:18px;background:var(--color-accent-2-100);color:var(--color-accent-2-900);font-size:12px;line-height:1.4;display:flex;gap:8px;align-items:center"><svg viewBox="0 0 24 24" width="16" height="16" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M20 6 9 17l-5-5"></path></svg><span>5 regulars + 2 side quests · synced to Google Calendar</span></div>
<div style="margin:12px 20px 0;display:flex;flex-direction:column;gap:6px">
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-surface)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.1">MON<br><span style="font-size:16px;color:var(--color-text)">5</span></div><div style="flex:1;font-weight:700;font-size:14px">Beef tacos</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:10px;font-weight:700">Regular</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-surface)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.1">TUE<br><span style="font-size:16px;color:var(--color-text)">6</span></div><div style="flex:1;font-weight:700;font-size:14px">Spaghetti bolognese</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:10px;font-weight:700">Regular</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-accent-100);box-shadow:inset 0 0 0 1.5px var(--color-accent-300)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-accent-700);line-height:1.1">WED<br><span style="font-size:16px;color:var(--color-text)">7</span></div><div style="flex:1;font-weight:700;font-size:14px">Crock pot tikka masala</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:10px;font-weight:700">Side quest</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-surface)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.1">THU<br><span style="font-size:16px;color:var(--color-text)">8</span></div><div style="flex:1;font-weight:700;font-size:14px">Chicken stir-fry</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:10px;font-weight:700">Regular</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-surface)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.1">FRI<br><span style="font-size:16px;color:var(--color-text)">9</span></div><div style="flex:1;font-weight:700;font-size:14px">Pizza night</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:10px;font-weight:700">Regular</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-accent-100);box-shadow:inset 0 0 0 1.5px var(--color-accent-300)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-accent-700);line-height:1.1">SAT<br><span style="font-size:16px;color:var(--color-text)">10</span></div><div style="flex:1;font-weight:700;font-size:14px">Korean beef bowls</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:10px;font-weight:700">Side quest</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--color-surface)"><div style="width:36px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.1">SUN<br><span style="font-size:16px;color:var(--color-text)">11</span></div><div style="flex:1;font-weight:700;font-size:14px">Sheet-pan salmon</div><span style="padding:3px 9px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:10px;font-weight:700">Regular</span><svg viewBox="0 0 24 24" width="16" height="16" style="color:var(--color-neutral-600);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></div>
</div>
<div style="margin:14px 20px 0;height:50px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-heading);font-size:15px;color:var(--color-text)"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></svg>Shopping list · 23 items</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Plan</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1e"><div class="dv-olabel"><a class="dv-oid" href="#1e">1e</a>Day strip · focus on one night</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;font-family:var(--font-heading);font-size:26px">This week's quest</div>
<div style="display:flex;justify-content:space-between;padding:14px 16px 0">
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">M<br><span style="font-size:15px;color:var(--color-text)">5</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">T<br><span style="font-size:15px;color:var(--color-text)">6</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;background:var(--color-text);color:var(--color-neutral-300);line-height:1.3">W<br><span style="font-size:15px;color:var(--color-bg)">7</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">T<br><span style="font-size:15px;color:var(--color-text)">8</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">F<br><span style="font-size:15px;color:var(--color-text)">9</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">S<br><span style="font-size:15px;color:var(--color-text)">10</span></div>
<div style="width:40px;padding:8px 0;border-radius:999px;text-align:center;font-size:11px;font-weight:700;color:var(--color-neutral-700);line-height:1.3">S<br><span style="font-size:15px;color:var(--color-text)">11</span></div>
</div>
<div style="margin:14px 20px 0;border-radius:32px;background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:150px;margin:10px;border-radius:24px;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-neutral-700)">dish photo</div>
<div style="padding:4px 18px 18px;display:flex;flex-direction:column;gap:8px">
<div style="display:flex;gap:6px"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:11px;font-weight:700">Side quest</span><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-800);font-size:11px;font-weight:700">Crock pot · 6 hr</span></div>
<div style="font-family:var(--font-heading);font-size:22px;line-height:1.1">Crock pot chicken tikka masala</div>
<div style="font-size:13px;color:var(--color-neutral-800)">Start by 12:30 pm for a 6:30 dinner.</div>
<div style="display:flex;gap:8px;margin-top:4px"><div style="flex:1;height:42px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-heading);font-size:14px"><svg viewBox="0 0 24 24" width="15" height="15" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>Swap</div><div style="flex:1;height:42px;border-radius:999px;background:var(--color-text);color:var(--color-bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:14px">Recipe</div></div>
</div>
</div>
<div style="padding:18px 20px 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700)">Coming up</div>
<div style="padding:8px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1"><div style="font-weight:700;font-size:14px">Chicken stir-fry</div><div style="font-size:12px;color:var(--color-neutral-700)">Thu · Regular</div></div></div>
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1"><div style="font-weight:700;font-size:14px">Pizza night</div><div style="font-size:12px;color:var(--color-neutral-700)">Fri · Regular</div></div></div>
</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Plan</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1f"><div class="dv-olabel"><a class="dv-oid" href="#1f">1f</a>Draft board · approve then push</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;align-items:center;gap:10px"><div style="font-family:var(--font-heading);font-size:26px">Oct 5 – 11</div><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:11px;font-weight:700">Draft</span></div>
<div style="margin:12px 20px 0;display:flex;gap:10px;align-items:flex-start">
<div style="flex:none;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px">Q</div>
<div style="padding:10px 14px;border-radius:4px 18px 18px 18px;background:var(--color-surface);font-size:13px;line-height:1.45">I mixed 5 of your regulars with 2 from your Quest log. Tap any day to swap it.</div>
</div>
<div style="margin:14px 20px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px">
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-surface);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-neutral-700)">MON</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Beef tacos</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-surface);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-neutral-700)">TUE</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Spaghetti bolognese</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-accent-2-300);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-accent-2-900)">WED · NEW</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Crock pot tikka masala</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-surface);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-neutral-700)">THU</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Chicken stir-fry</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-bg);box-shadow:inset 0 0 0 2px var(--color-accent);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-accent-700)">FRI · SWAPPING…</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1;color:var(--color-neutral-600)">Pizza night</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-accent-2-300);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-accent-2-900)">SAT · NEW</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Korean beef bowls</span></div>
<div style="height:86px;padding:12px;border-radius:22px;background:var(--color-surface);display:flex;flex-direction:column;justify-content:space-between"><span style="font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--color-neutral-700)">SUN</span><span style="font-family:var(--font-heading);font-size:15px;line-height:1.1">Sheet-pan salmon</span></div>
<div style="height:86px;padding:12px;border-radius:22px;border:2px dashed var(--color-neutral-400);display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;color:var(--color-neutral-700)"><svg viewBox="0 0 24 24" width="16" height="16" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>Rebuild week</div>
</div>
<div style="margin:14px 20px 0;height:50px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-heading);font-size:15px;color:var(--color-text)">Looks good — push to Calendar</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Plan</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
</div>
<div class="dv-group">Home, onboarding &amp; cooking</div>
<div class="dv-opts">
<div class="dv-opt" id="1g"><div class="dv-olabel"><a class="dv-oid" href="#1g">1g</a>Home / dashboard</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;justify-content:space-between;align-items:flex-start">
<div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">Friday, Oct 2</div><div style="font-family:var(--font-heading);font-size:28px;line-height:1.1">Tonight's quest</div></div>
<div style="position:relative;width:40px;height:40px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="19" height="19" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span style="position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--color-accent)"></span></div>
</div>
<div style="margin:14px 20px 0;border-radius:32px;background:var(--color-surface);overflow:hidden;display:flex;flex-direction:column">
<div style="height:150px;margin:10px;border-radius:24px;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-neutral-700)">dish photo</div>
<div style="padding:2px 18px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px"><div><div style="font-family:var(--font-heading);font-size:22px;line-height:1.1">Pizza night</div><div style="font-size:12px;color:var(--color-neutral-700);margin-top:4px">Regular · 40 min</div></div><div style="height:38px;padding:0 16px;border-radius:999px;background:var(--color-text);color:var(--color-bg);display:flex;align-items:center;font-family:var(--font-heading);font-size:13px">Recipe</div></div>
</div>
<div style="margin:12px 20px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div style="height:104px;padding:14px;border-radius:26px;background:var(--color-accent);color:var(--color-text);display:flex;flex-direction:column;justify-content:space-between"><svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span style="font-family:var(--font-heading);font-size:16px;line-height:1.1">Quick dinner</span></div>
<div style="height:104px;padding:14px;border-radius:26px;background:var(--color-accent-2-300);color:var(--color-accent-2-900);display:flex;flex-direction:column;justify-content:space-between"><svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><span style="font-family:var(--font-heading);font-size:16px;line-height:1.1">Cook from what I have</span></div>
</div>
<div style="margin:12px 20px 0;display:flex;flex-direction:column;gap:8px">
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--color-neutral-100)"><svg viewBox="0 0 24 24" width="18" height="18" style="color:var(--color-accent-700);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg><span style="flex:1;font-size:13px;font-weight:700">10 new side quests to swipe</span><svg viewBox="0 0 24 24" width="16" height="16" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg></div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--color-neutral-100)"><svg viewBox="0 0 24 24" width="18" height="18" style="color:var(--color-accent-700);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></svg><span style="flex:1;font-size:13px;font-weight:700">Shopping list ready · Oct 5–11</span><svg viewBox="0 0 24 24" width="16" height="16" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg></div>
</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Home</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1h"><div class="dv-olabel"><a class="dv-oid" href="#1h">1h</a>Onboarding · add routine dinners</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:10px 20px 0;display:flex;gap:6px"><span style="flex:1;height:6px;border-radius:999px;background:var(--color-accent)"></span><span style="flex:1;height:6px;border-radius:999px;background:var(--color-accent)"></span><span style="flex:1;height:6px;border-radius:999px;background:var(--color-neutral-300)"></span></div>
<div style="padding:26px 20px 0"><div style="font-size:12px;font-weight:700;color:var(--color-accent-700)">Step 2 of 3</div><div style="font-family:var(--font-heading);font-size:30px;line-height:1.08;margin-top:6px">What's on your usual rotation?</div><div style="font-size:14px;line-height:1.5;color:var(--color-neutral-800);margin-top:10px">Add the dinners your household makes on repeat. MealQuest builds suggestions from these.</div></div>
<div style="margin:18px 20px 0;height:48px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-divider);display:flex;align-items:center;padding:0 6px 0 18px;gap:8px"><span style="flex:1;font-size:14px;color:var(--color-neutral-600)">e.g. Chicken enchiladas</span><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div></div>
<div style="padding:16px 20px 0;font-size:12px;font-weight:700;color:var(--color-neutral-700)">Your regulars · 7</div>
<div style="padding:8px 20px 0;display:flex;flex-wrap:wrap;gap:8px">
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Beef tacos ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Spaghetti bolognese ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Chicken stir-fry ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Pizza night ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Sheet-pan salmon ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Butter chicken ×</span>
<span style="display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-900);font-size:13px;font-weight:700">Shrimp scampi ×</span>
</div>
<div style="padding:18px 20px 0;font-size:12px;font-weight:700;color:var(--color-neutral-700)">Common picks</div>
<div style="padding:8px 20px 0;display:flex;flex-wrap:wrap;gap:8px">
<span style="padding:7px 14px;border-radius:999px;border:1.5px dashed var(--color-neutral-400);font-size:13px">+ Chili</span>
<span style="padding:7px 14px;border-radius:999px;border:1.5px dashed var(--color-neutral-400);font-size:13px">+ Pot roast</span>
<span style="padding:7px 14px;border-radius:999px;border:1.5px dashed var(--color-neutral-400);font-size:13px">+ Burgers</span>
<span style="padding:7px 14px;border-radius:999px;border:1.5px dashed var(--color-neutral-400);font-size:13px">+ Fried rice</span>
</div>
<div style="position:absolute;left:20px;right:20px;bottom:24px;height:52px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:16px;color:var(--color-text)">Next: notifications</div>
</div></div>
<div class="dv-opt" id="1i"><div class="dv-olabel"><a class="dv-oid" href="#1i">1i</a>Cook from what I have</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg></div><div style="font-family:var(--font-heading);font-size:22px">Cook from what I have</div></div>
<div style="margin:16px 20px 0;padding:12px;border-radius:26px;background:var(--color-surface);display:flex;flex-wrap:wrap;gap:6px">
<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700">Chicken thighs ×</span>
<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700">Rice ×</span>
<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700">Spinach ×</span>
<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700">Coconut milk ×</span>
<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700">Garlic ×</span>
<span style="padding:6px 8px;font-size:13px;color:var(--color-neutral-600)">Add ingredient…</span>
</div>
<div style="margin:12px 20px 0;display:flex;align-items:center;justify-content:space-between"><div style="display:flex;border:1px solid var(--color-divider);border-radius:999px;overflow:hidden;font-size:13px;font-weight:700"><span style="padding:8px 14px">Any time</span><span style="padding:8px 14px;background:var(--color-accent);color:var(--color-text)">Quick only</span></div><div style="height:38px;padding:0 16px;border-radius:999px;background:var(--color-text);color:var(--color-bg);display:flex;align-items:center;font-family:var(--font-heading);font-size:14px">Find ideas</div></div>
<div style="padding:20px 20px 0;font-size:12px;font-weight:700;color:var(--color-neutral-700)">3 ideas</div>
<div style="padding:8px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="padding:14px;border-radius:24px;background:var(--color-neutral-100);display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:17px">Coconut chicken curry</span><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">30 min</span></div><div style="font-size:12px;color:var(--color-accent-2-800);font-weight:700">Uses all 5 · missing: 1 lime</div><div style="display:flex;gap:8px;margin-top:4px"><span style="padding:6px 12px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:12px;font-weight:700">Cook tonight</span><span style="padding:6px 12px;border-radius:999px;border:1px solid var(--color-divider);font-size:12px;font-weight:700">Add to Quest log</span></div></div>
<div style="padding:14px;border-radius:24px;background:var(--color-neutral-100);display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:17px">Garlic spinach rice bowls</span><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">25 min</span></div><div style="font-size:12px;color:var(--color-accent-2-800);font-weight:700">Uses 4 of 5 · nothing missing</div><div style="display:flex;gap:8px;margin-top:4px"><span style="padding:6px 12px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:12px;font-weight:700">Cook tonight</span><span style="padding:6px 12px;border-radius:999px;border:1px solid var(--color-divider);font-size:12px;font-weight:700">Add to Quest log</span></div></div>
<div style="padding:14px;border-radius:24px;background:var(--color-neutral-100);display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:17px">One-pan chicken &amp; rice</span><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">30 min</span></div><div style="font-size:12px;color:var(--color-accent-2-800);font-weight:700">Uses 3 of 5 · missing: onion</div></div>
</div>
</div></div>
<div class="dv-opt" id="1j"><div class="dv-olabel"><a class="dv-oid" href="#1j">1j</a>Quick dinners · two tabs</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg></div><div style="font-family:var(--font-heading);font-size:24px">Quick dinners</div></div>
<div style="margin:16px 20px 0;padding:4px;border-radius:999px;background:var(--color-surface);display:grid;grid-template-columns:1fr 1fr;font-size:14px;font-weight:700;text-align:center"><span style="padding:10px 0;color:var(--color-neutral-700)">Crock pot</span><span style="padding:10px 0;border-radius:999px;background:var(--color-bg);box-shadow:var(--shadow-sm)">30 min or less</span></div>
<div style="padding:12px 20px 0;font-size:13px;color:var(--color-neutral-800)">Prep to table in 30 minutes or less, picked from your tastes.</div>
<div style="padding:14px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;gap:12px;align-items:center;padding:10px;border-radius:24px;background:var(--color-neutral-100)"><div style="flex:none;width:64px;height:64px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1;display:flex;flex-direction:column;gap:3px"><span style="font-family:var(--font-heading);font-size:16px;line-height:1.15">Lemon garlic shrimp orzo</span><span style="font-size:12px;color:var(--color-neutral-700)">25 min · Medium</span></div><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-600);color:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="17" height="17" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div></div>
<div style="display:flex;gap:12px;align-items:center;padding:10px;border-radius:24px;background:var(--color-neutral-100)"><div style="flex:none;width:64px;height:64px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1;display:flex;flex-direction:column;gap:3px"><span style="font-family:var(--font-heading);font-size:16px;line-height:1.15">Chicken quesadillas</span><span style="font-size:12px;color:var(--color-neutral-700)">20 min · Easy</span></div><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-600);color:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="17" height="17" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div></div>
<div style="display:flex;gap:12px;align-items:center;padding:10px;border-radius:24px;background:var(--color-neutral-100)"><div style="flex:none;width:64px;height:64px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1;display:flex;flex-direction:column;gap:3px"><span style="font-family:var(--font-heading);font-size:16px;line-height:1.15">Beef &amp; broccoli</span><span style="font-size:12px;color:var(--color-neutral-700)">30 min · Easy</span></div><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-600);color:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="17" height="17" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div></div>
<div style="display:flex;gap:12px;align-items:center;padding:10px;border-radius:24px;background:var(--color-neutral-100)"><div style="flex:none;width:64px;height:64px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div><div style="flex:1;display:flex;flex-direction:column;gap:3px"><span style="font-family:var(--font-heading);font-size:16px;line-height:1.15">Pesto gnocchi &amp; peas</span><span style="font-size:12px;color:var(--color-neutral-700)">15 min · Easy</span></div><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-600);color:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="17" height="17" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div></div>
</div>
<div style="margin:16px 20px 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:var(--color-accent-700)"><svg viewBox="0 0 24 24" width="15" height="15" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>Show me more</div>
</div></div>
<div class="dv-opt" id="1k"><div class="dv-olabel"><a class="dv-oid" href="#1k">1k</a>Recipe / dinner detail</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="position:relative;height:250px;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 8px,var(--color-neutral-200) 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:var(--color-neutral-700)">hero dish photo
<div style="position:absolute;top:48px;left:20px;width:40px;height:40px;border-radius:50%;background:var(--color-bg);display:flex;align-items:center;justify-content:center;color:var(--color-text)"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg></div></div>
<div style="margin-top:-28px;position:relative;border-radius:32px 32px 0 0;background:var(--color-bg);padding:22px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;gap:6px;flex-wrap:wrap"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:11px;font-weight:700">Side quest</span><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700">Easy</span><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700">30 min</span></div>
<div style="font-family:var(--font-heading);font-size:28px;line-height:1.05">Korean beef bowls</div>
<div style="padding:12px 14px;border-radius:18px;background:var(--color-accent-2-100);color:var(--color-accent-2-900);font-size:13px;line-height:1.45"><b>Why it was picked:</b> close cousin of your Beef tacos and Chicken stir-fry.</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-top:6px"><span style="font-family:var(--font-heading);font-size:18px">Ingredients</span><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">Serves 4</span></div>
<div style="display:flex;flex-direction:column;font-size:14px">
<div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--color-divider)"><span>Ground beef</span><span style="color:var(--color-neutral-700)">1 lb</span></div>
<div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--color-divider)"><span>Jasmine rice</span><span style="color:var(--color-neutral-700)">2 cups</span></div>
<div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--color-divider)"><span>Soy sauce</span><span style="color:var(--color-neutral-700)">¼ cup</span></div>
<div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--color-divider)"><span>Brown sugar</span><span style="color:var(--color-neutral-700)">3 tbsp</span></div>
<div style="display:flex;justify-content:space-between;padding:7px 0"><span>Green onions</span><span style="color:var(--color-neutral-700)">1 bunch</span></div>
</div>
</div>
<div style="position:absolute;left:20px;right:20px;bottom:24px;display:flex;gap:10px"><div style="flex:1;height:52px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:16px;color:var(--color-text)">Add to this week</div><div style="width:52px;height:52px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg></div></div>
</div></div>
</div>
<div class="dv-group">Shopping</div>
<div class="dv-opts">
<div class="dv-opt" id="1l"><div class="dv-olabel"><a class="dv-oid" href="#1l">1l</a>Shopping list · grouped by dinner</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;justify-content:space-between;align-items:flex-end"><div><div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Supply run · Oct 5–11</div><div style="font-family:var(--font-heading);font-size:28px;line-height:1.1">Shopping list</div></div><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700)">19 / 23</div></div>
<div style="margin:10px 20px 0;font-size:12px;line-height:1.45;color:var(--color-neutral-800)">Uncheck anything you already have — it won't be counted.</div>
<div style="padding:12px 20px 0;display:flex;flex-direction:column;gap:12px">
<div style="padding:14px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px">
<div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:16px">Beef tacos</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">MON</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px"><span style="width:20px;height:20px;border-radius:7px;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="13" height="13" style="fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round"><path d="M20 6 9 17l-5-5"></path></svg></span><span style="flex:1">Ground beef</span><span style="color:var(--color-neutral-700);font-size:12px">1 lb</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px"><span style="width:20px;height:20px;border-radius:7px;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="13" height="13" style="fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round"><path d="M20 6 9 17l-5-5"></path></svg></span><span style="flex:1">Corn tortillas</span><span style="color:var(--color-neutral-700);font-size:12px">12</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-neutral-600)"><span style="width:20px;height:20px;border-radius:7px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Taco seasoning</span><span style="font-size:11px;font-weight:700">have it</span></div>
</div>
<div style="padding:14px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px">
<div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:16px">Crock pot tikka masala</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">WED</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px"><span style="width:20px;height:20px;border-radius:7px;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="13" height="13" style="fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round"><path d="M20 6 9 17l-5-5"></path></svg></span><span style="flex:1">Chicken thighs</span><span style="color:var(--color-neutral-700);font-size:12px">2 lb</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px"><span style="width:20px;height:20px;border-radius:7px;background:var(--color-accent);color:var(--color-text);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="13" height="13" style="fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round"><path d="M20 6 9 17l-5-5"></path></svg></span><span style="flex:1">Tikka masala paste</span><span style="color:var(--color-neutral-700);font-size:12px">1 jar</span></div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-neutral-600)"><span style="width:20px;height:20px;border-radius:7px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Basmati rice</span><span style="font-size:11px;font-weight:700">have it</span></div>
</div>
<div style="padding:14px;border-radius:24px;background:var(--color-surface);display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:var(--font-heading);font-size:16px">Chicken stir-fry</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">THU · 5 items</span></div>
</div>
<div style="position:absolute;left:20px;right:20px;bottom:96px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--color-accent-2-800)"><svg viewBox="0 0 24 24" width="15" height="15" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Sent to Google Chat · Sat 8:00 am</div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Plan</div>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
</div>
</div></div>
<div class="dv-opt" id="1m"><div class="dv-olabel"><a class="dv-oid" href="#1m">1m</a>Shopping history · weekly posts</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg></div><div style="font-family:var(--font-heading);font-size:24px">Supply archive</div></div>
<div style="margin:14px 20px 0;display:inline-flex;border:1px solid var(--color-divider);border-radius:999px;overflow:hidden;font-size:13px;font-weight:700"><span style="padding:8px 16px;background:var(--color-accent);color:var(--color-text)">Week</span><span style="padding:8px 16px">Month</span><span style="padding:8px 16px">Year</span></div>
<div style="padding:18px 20px 0;font-family:var(--font-heading);font-size:18px">October 2026</div>
<div style="padding:10px 20px 0;display:flex;flex-direction:column;gap:12px">
<div style="padding:16px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px">
<div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700)">Week 41 · Oct 5 – 11</div>
<div style="font-family:var(--font-heading);font-size:19px;line-height:1.15">Tacos, tikka &amp; a salmon finale</div>
<div style="font-size:13px;color:var(--color-neutral-800)">7 dinners · 23 items · 4 already on hand</div>
<div style="display:flex;flex-wrap:wrap;gap:6px"><span style="padding:3px 10px;border-radius:999px;background:var(--color-bg);font-size:11px;font-weight:700">Beef tacos</span><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:11px;font-weight:700">Tikka masala</span><span style="padding:3px 10px;border-radius:999px;background:var(--color-bg);font-size:11px;font-weight:700">+5</span></div>
</div>
</div>
<div style="padding:20px 20px 0;font-family:var(--font-heading);font-size:18px">September 2026</div>
<div style="padding:10px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="padding:14px 16px;border-radius:22px;background:var(--color-neutral-100);display:flex;flex-direction:column;gap:4px"><div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)">Week 40 · Sep 28 – Oct 4</div><div style="font-family:var(--font-heading);font-size:16px">Pizza, pot roast &amp; the great orzo trial</div><div style="font-size:12px;color:var(--color-neutral-700)">7 dinners · 26 items</div></div>
<div style="padding:14px 16px;border-radius:22px;background:var(--color-neutral-100);display:flex;flex-direction:column;gap:4px"><div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)">Week 39 · Sep 21 – 27</div><div style="font-family:var(--font-heading);font-size:16px">Chili season opens</div><div style="font-size:12px;color:var(--color-neutral-700)">6 dinners · 21 items</div></div>
</div>
</div></div>
</div>
<div class="dv-group">Settings &amp; admin</div>
<div class="dv-opts">
<div class="dv-opt" id="1n"><div class="dv-olabel"><a class="dv-oid" href="#1n">1n</a>Notifications &amp; Google Chat</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0;font-family:var(--font-heading);font-size:26px">Notifications</div>
<div style="padding:14px 20px 0;display:grid;grid-template-columns:1fr 46px 46px;align-items:center;row-gap:12px;font-size:14px">
<span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)">Event</span><span style="font-size:10px;font-weight:700;color:var(--color-neutral-700);text-align:center">PUSH</span><span style="font-size:10px;font-weight:700;color:var(--color-neutral-700);text-align:center">CHAT</span>
<span style="font-weight:700">New weekly plan ready</span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span>
<span style="font-weight:700">Shopping list ready</span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span>
<span style="font-weight:700">Day-of dinner reminder<br><span style="font-weight:400;font-size:12px;color:var(--color-neutral-700)">at 4:30 pm</span></span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-neutral-300);position:relative"><span style="position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span>
<span style="font-weight:700">New suggestions to swipe</span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span><span style="justify-self:center;width:38px;height:22px;border-radius:999px;background:var(--color-neutral-300);position:relative"><span style="position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-bg)"></span></span>
</div>
<div style="margin:22px 20px 0;padding:16px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:10px">
<div style="font-family:var(--font-heading);font-size:17px">Google Chat webhook</div>
<div style="height:42px;padding:0 14px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-divider);display:flex;align-items:center;font:12px ui-monospace,Menlo,monospace;color:var(--color-neutral-800);overflow:hidden;white-space:nowrap">https://chat.googleapis.com/v1/spaces/…</div>
<div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:12px;font-weight:700;color:var(--color-accent-2-800)">Connected · Dinner Crew space</span><span style="padding:7px 14px;border-radius:999px;border:1.5px solid var(--color-divider);font-family:var(--font-heading);font-size:13px">Send test</span></div>
</div>
<div style="margin:12px 20px 0;padding:12px 14px;border-radius:18px;background:var(--color-neutral-100);font-size:12px;line-height:1.45;display:flex;gap:10px"><div style="flex:none;width:26px;height:26px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:12px">Q</div><div><b>MealQuest</b> · preview<br>This week's plan is ready: Tacos, Bolognese, Tikka masala + 4 more. Open the plan →</div></div>
<div style="position:absolute;left:14px;right:14px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;color:var(--color-neutral-400)">
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
<svg viewBox="0 0 24 24" width="22" height="22" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg>
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-text);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>Settings</div>
</div>
</div></div>
<div class="dv-opt" id="1o"><div class="dv-olabel"><a class="dv-oid" href="#1o">1o</a>Admin · LLM configuration</div>
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md)">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<div style="padding:6px 20px 0"><div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Admin</div><div style="font-family:var(--font-heading);font-size:26px;line-height:1.1">AI assistant</div></div>
<div style="padding:16px 20px 0;display:flex;flex-direction:column;gap:14px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:5px">Provider</div><div style="height:42px;padding:0 14px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700">Anthropic<svg viewBox="0 0 24 24" width="15" height="15" style="transform:rotate(90deg);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg></div></div>
<div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:5px">Model</div><div style="height:42px;padding:0 14px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700">Claude Sonnet<svg viewBox="0 0 24 24" width="15" height="15" style="transform:rotate(90deg);fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg></div></div>
</div>
<div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:5px">API key</div><div style="height:42px;padding:0 6px 0 14px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;font:13px ui-monospace,Menlo,monospace">sk-••••••••••••3f9a<span style="padding:6px 12px;border-radius:999px;background:var(--color-bg);font:700 12px var(--font-body)">Replace</span></div><div style="font-size:12px;font-weight:700;color:var(--color-accent-2-800);margin-top:6px">Verified · Oct 1</div></div>
<div><div style="display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:10px"><span>Creativity (temperature)</span><span style="color:var(--color-text)">0.7</span></div>
<div style="position:relative;height:8px;border-radius:999px;background:var(--color-neutral-300)"><div style="width:70%;height:100%;border-radius:999px;background:var(--color-accent)"></div><div style="position:absolute;left:70%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--color-bg);box-shadow:var(--shadow-md);border:3px solid var(--color-accent)"></div></div>
<div style="display:flex;justify-content:space-between;font-size:11px;color:var(--color-neutral-700);margin-top:8px"><span>Familiar</span><span>Adventurous</span></div></div>
<div><div style="font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:5px">System prompt</div><div style="height:150px;padding:12px 14px;border-radius:22px;background:var(--color-surface);border:1px solid var(--color-divider);font:12px/1.55 ui-monospace,Menlo,monospace;color:var(--color-neutral-900);overflow:hidden">You are MealQuest, a dinner planning assistant for one household. Suggest dinners similar to their regular rotation. Prefer weeknight-friendly recipes. Flag crock pot meals and anything ≤30 min as "quick"…</div></div>
</div>
<div style="position:absolute;left:20px;right:20px;bottom:24px;display:flex;gap:10px"><div style="flex:1;height:50px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px">Reset</div><div style="flex:2;height:50px;border-radius:999px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px;color:var(--color-text)">Save changes</div></div>
</div></div>
</div>
<p class="dv-next">Try next: "go with <a class="dv-oid" href="#1a">1a</a> for swipe and <a class="dv-oid" href="#1f">1f</a> for the plan" · "show the Quest log (to-try pool) screen" · "add a Settings home that links to admin"</p>
</section>
</x-dc>
</body>
</html>