453 lines
231 KiB
HTML
453 lines
231 KiB
HTML
<!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="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap">
|
||
<link rel="stylesheet" href="_ds/organic-cd54d318-425e-4a60-adfb-d590f70d40bd/styles.css">
|
||
<style>.dv-opt:target .dv-oid{color:var(--color-bg)!important}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 "Bagel Fat One",system-ui,sans-serif;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="t2" style="--color-bg:oklch(0.975 0.008 85);--color-surface:oklch(0.935 0.016 85);--color-accent:oklch(0.42 0.14 300);--color-accent-100:oklch(0.97 0.032 300);--color-accent-200:oklch(0.93 0.063 300);--color-accent-300:oklch(0.86 0.095 300);--color-accent-400:oklch(0.77 0.126 300);--color-accent-500:oklch(0.67 0.147 300);--color-accent-600:oklch(0.57 0.147 300);--color-accent-700:oklch(0.47 0.137 300);--color-accent-800:oklch(0.37 0.116 300);--color-accent-900:oklch(0.27 0.084 300);--color-accent-2:oklch(0.58 0.09 215);--color-accent-2-100:oklch(0.97 0.030 215);--color-accent-2-200:oklch(0.93 0.060 215);--color-accent-2-300:oklch(0.86 0.090 215);--color-accent-2-400:oklch(0.77 0.120 215);--color-accent-2-500:oklch(0.67 0.140 215);--color-accent-2-600:oklch(0.57 0.140 215);--color-accent-2-700:oklch(0.47 0.130 215);--color-accent-2-800:oklch(0.37 0.110 215);--color-accent-2-900:oklch(0.27 0.080 215);--on-accent:var(--color-bg)">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t2">2</a><span class="dv-tname">Tablet & desktop</span></div>
|
||
<div style="max-width:760px;font-size:14px;line-height:1.55;color:var(--color-neutral-800)">Larger screens focus on reading ingredients, managing the calendar and settings. Tablet is 1180 × 820 (landscape, kitchen-counter use) with an icon rail; desktop is 1440 × 900 with a full sidebar. Headings now use Bagel Fat One across every screen.</div>
|
||
<div class="dv-group">Tablet · 1180 × 820</div>
|
||
<div class="dv-opts"><div class="dv-opt" id="2a"><div class="dv-olabel"><a class="dv-oid" href="#2a">2a</a>Recipe · kitchen reading mode</div><div style="width:1180px;height:820px;border-radius:32px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:96px;flex:none;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--color-surface)"><div style="width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;margin-bottom:12px">M</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Home</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-text)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:var(--on-accent)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Plan</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Discover</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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></div>Quick</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Settings</div></div><div style="flex:1;min-width:0;padding:28px 36px;display:flex;flex-direction:column;gap:22px">
|
||
<div style="display:flex;align-items:center;gap:18px"><div style="flex:none;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="18" height="18" style="flex:none;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="flex:1;display:flex;flex-direction:column;gap:6px"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700)">Saturday, Oct 10 · Side quest</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:36px;line-height:1.05">Korean beef bowls</div></div>
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700">Keep screen on <span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></div>
|
||
<div style="display:flex;border:1px solid var(--color-divider);border-radius:999px;overflow:hidden;font-weight:700"><span style="padding:8px 14px;font-size:13px">A</span><span style="padding:8px 14px;font-size:17px;background:var(--color-accent);color:var(--on-accent)">A</span><span style="padding:8px 14px;font-size:21px">A</span></div></div>
|
||
<div style="flex:1;min-height:0;display:grid;grid-template-columns:400px 1fr;gap:28px">
|
||
<div style="padding:22px;border-radius:30px;background:var(--color-surface);display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">Ingredients</span><span style="font-size:13px;font-weight:700;color:var(--color-neutral-700)">Serves 4 · 3 of 9 set out</span></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1;text-decoration:line-through">Ground beef</span><span style="font-size:15px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1;text-decoration:line-through">Jasmine rice</span><span style="font-size:15px;color:var(--color-neutral-700)">2 cups</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1;text-decoration:line-through">Soy sauce</span><span style="font-size:15px;color:var(--color-neutral-700)">¼ cup</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Brown sugar</span><span style="font-size:15px;color:var(--color-neutral-700)">3 tbsp</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Garlic</span><span style="font-size:15px;color:var(--color-neutral-700)">3 cloves</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Fresh ginger</span><span style="font-size:15px;color:var(--color-neutral-700)">1 tbsp</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Sesame oil</span><span style="font-size:15px;color:var(--color-neutral-700)">1 tbsp</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Green onions</span><span style="font-size:15px;color:var(--color-neutral-700)">1 bunch</span></div><div style="display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:18px;"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;">Sesame seeds</span><span style="font-size:15px;color:var(--color-neutral-700)">to garnish</span></div></div>
|
||
<div style="display:flex;flex-direction:column;gap:14px;min-width:0">
|
||
<div style="display:flex;gap:16px;align-items:center"><div style="height:96px;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);flex:1">dish photo</div><div style="flex:1.6;padding:14px 18px;border-radius:22px;background:var(--color-accent-2-100);color:var(--color-accent-2-900);font-size:14px;line-height:1.45"><b>Why it was picked:</b> close cousin of your Beef tacos and Chicken stir-fry. Easy · 30 min.</div></div>
|
||
<div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;margin-top:4px">Steps</div>
|
||
<div style="display:flex;gap:16px;align-items:flex-start;padding:6px 18px;border-radius:26px;;color:var(--color-neutral-600)"><div style="flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px"><svg viewBox="0 0 24 24" width="18" height="18" 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></div><div style="font-size:18px;line-height:1.45;padding-top:6px">Rinse the rice and start it cooking.</div></div><div style="display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:26px;background:var(--color-accent-100);box-shadow:inset 0 0 0 2px var(--color-accent-300);"><div style="flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px">2</div><div style="font-size:22px;line-height:1.45;padding-top:6px">Brown the beef in a large skillet over medium-high heat with the garlic and ginger, about 6 minutes.</div></div><div style="display:flex;gap:16px;align-items:flex-start;padding:6px 18px;border-radius:26px;;"><div style="flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px">3</div><div style="font-size:18px;line-height:1.45;padding-top:6px">Stir in soy sauce, brown sugar and sesame oil. Simmer 2 minutes until glossy.</div></div><div style="display:flex;gap:16px;align-items:flex-start;padding:6px 18px;border-radius:26px;;"><div style="flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px">4</div><div style="font-size:18px;line-height:1.45;padding-top:6px">Spoon over rice and top with green onions and sesame seeds.</div></div>
|
||
<div style="margin-top:auto;display:flex;justify-content:flex-end;gap:10px"><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m15 18-6-6 6-6"></path></svg>Previous</div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="m9 18 6-6-6-6"></path></svg>Next step</div></div>
|
||
</div></div></div></div></div>
|
||
<div class="dv-opt" id="2b"><div class="dv-olabel"><a class="dv-oid" href="#2b">2b</a>Shopping list · by dinner</div><div style="width:1180px;height:820px;border-radius:32px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:96px;flex:none;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--color-surface)"><div style="width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;margin-bottom:12px">M</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Home</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-text)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:var(--on-accent)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Plan</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Discover</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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></div>Quick</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Settings</div></div><div style="flex:1;min-width:0;padding:28px 36px;display:flex;flex-direction:column;gap:18px">
|
||
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1"><div style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Supply run · Oct 5 – 11</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:36px;line-height:1.1;margin-top:4px">Shopping list</div><div style="font-size:14px;color:var(--color-neutral-800);margin-top:6px">28 to buy · 5 already on hand. Uncheck anything you have.</div></div><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><rect width="20" height="5" x="2" y="3" rx="1"></rect><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path><path d="M10 12h4"></path></svg>Archive</div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Send to Google Chat</div></div>
|
||
<div style="column-count:3;column-gap:16px"><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">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:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Corn tortillas</span><span style="font-size:13px;color:var(--color-neutral-700)">12</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;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 style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Shredded cheese</span><span style="font-size:13px;color:var(--color-neutral-700)">8 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Limes</span><span style="font-size:13px;color:var(--color-neutral-700)">3</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Spaghetti bolognese</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">TUE</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Crushed tomatoes</span><span style="font-size:13px;color:var(--color-neutral-700)">28 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Spaghetti</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Parmesan</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">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:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Chicken thighs</span><span style="font-size:13px;color:var(--color-neutral-700)">2 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Tikka masala paste</span><span style="font-size:13px;color:var(--color-neutral-700)">1 jar</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;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 style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Plain yogurt</span><span style="font-size:13px;color:var(--color-neutral-700)">1 cup</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Cilantro</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Chicken stir-fry</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">THU</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Chicken breast</span><span style="font-size:13px;color:var(--color-neutral-700)">1.5 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Broccoli</span><span style="font-size:13px;color:var(--color-neutral-700)">2 heads</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Snap peas</span><span style="font-size:13px;color:var(--color-neutral-700)">8 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Soy sauce</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Pizza night</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">FRI</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Pizza dough</span><span style="font-size:13px;color:var(--color-neutral-700)">2</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Mozzarella</span><span style="font-size:13px;color:var(--color-neutral-700)">16 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Pepperoni</span><span style="font-size:13px;color:var(--color-neutral-700)">6 oz</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Korean beef bowls</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">SAT</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Jasmine rice</span><span style="font-size:13px;color:var(--color-neutral-700)">2 cups</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Green onions</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Brown sugar</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Sheet-pan salmon</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">SUN</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Salmon fillets</span><span style="font-size:13px;color:var(--color-neutral-700)">4</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Asparagus</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Lemons</span><span style="font-size:13px;color:var(--color-neutral-700)">2</span></div></div></div></div></div></div>
|
||
<div class="dv-opt" id="2c"><div class="dv-olabel"><a class="dv-oid" href="#2c">2c</a>Weekly plan</div><div style="width:1180px;height:820px;border-radius:32px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:96px;flex:none;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--color-surface)"><div style="width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;margin-bottom:12px">M</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Home</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-text)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:var(--on-accent)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Plan</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Discover</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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></div>Quick</div><div style="display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-neutral-700)"><div style="width:56px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Settings</div></div><div style="flex:1;min-width:0;padding:28px 36px;display:flex;flex-direction:column;gap:20px">
|
||
<div style="display:flex;align-items:center;gap:14px"><div style="flex:1"><div style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Week 41</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:36px;line-height:1.1;margin-top:4px">Oct 5 – 11</div></div><div style="flex:none;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="18" height="18" style="flex:none;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="flex:none;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="18" height="18" style="flex:none;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="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Rebuild week</div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Push to Calendar</div></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-accent-2-800)"><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>Synced to Google Calendar · 5 regulars + 2 side quests</div>
|
||
<div style="flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px"><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">MON<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">5</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Beef tacos</div><div style="font-size:12px;color:var(--color-neutral-800)">45 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">TUE<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">6</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Spaghetti bolognese</div><div style="font-size:12px;color:var(--color-neutral-800)">50 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">WED<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">7</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-accent-2-200);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Crock pot tikka masala</div><div style="font-size:12px;color:var(--color-neutral-800)">Crock pot · 6 hr</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700;white-space:nowrap">New</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">THU<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">8</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Chicken stir-fry</div><div style="font-size:12px;color:var(--color-neutral-800)">25 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">FRI<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">9</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Pizza night</div><div style="font-size:12px;color:var(--color-neutral-800)">40 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">SAT<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">10</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-accent-2-200);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Korean beef bowls</div><div style="font-size:12px;color:var(--color-neutral-800)">30 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700;white-space:nowrap">New</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="text-align:center;font-size:12px;font-weight:700;color:var(--color-neutral-700);line-height:1.2">SUN<br><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px;color:var(--color-text)">11</span></div><div style="flex:1;padding:10px;border-radius:24px;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;"><div style="height:96px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Sheet-pan salmon</div><div style="font-size:12px;color:var(--color-neutral-800)">35 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div></div>
|
||
<div style="padding:16px 18px;border-radius:28px;background:var(--color-surface);display:flex;flex-direction:column;gap:12px"><div style="display:flex;justify-content:space-between;align-items:baseline"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px">Quest log · 6</span><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">Drag a dinner onto a day to swap it in</span></div><div style="display:flex;gap:10px;flex-wrap:wrap"><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Lemon garlic shrimp orzo</div><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Chicken quesadillas</div><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Beef & broccoli</div><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Pesto gnocchi</div><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Turkey chili</div><div style="display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--color-bg);font-size:13px;font-weight:700"><div style="flex:none;width:28px;height:28px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--color-neutral-300) 0 5px,var(--color-neutral-200) 5px 10px)"></div>Thai basil chicken</div></div></div>
|
||
</div></div></div>
|
||
</div>
|
||
<div class="dv-group">Desktop · 1440 × 900</div>
|
||
<div class="dv-opts"><div class="dv-opt" id="2d"><div class="dv-olabel"><a class="dv-oid" href="#2d">2d</a>Plan manager · drag from Quest log (mid-drag state)</div><div style="width:1440px;height:900px;border-radius:18px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:208px;flex:none;padding:28px 16px;display:flex;flex-direction:column;gap:6px;background:var(--color-surface)"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:28px;padding:0 12px 22px;color:var(--color-accent)">MealQuest</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);font-size:15px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Quick</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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 style="margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:22px;background:var(--color-bg)"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-300);color:var(--color-accent-2-900);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px">K</div><div style="font-size:13px;line-height:1.3"><b>Our kitchen</b><br><span style="color:var(--color-neutral-700)">Shared household</span></div></div></div><div style="flex:1;min-width:0;padding:32px 36px;display:flex;flex-direction:column;gap:18px">
|
||
<div style="display:flex;align-items:center;gap:14px"><div style="flex:1"><div style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Week 41 · Plan</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:40px;line-height:1.1;margin-top:4px">Oct 5 – 11</div></div><div style="flex:none;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="18" height="18" style="flex:none;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="padding:10px 16px;border-radius:999px;background:var(--color-surface);font-size:14px;font-weight:700">This week</div><div style="flex:none;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="18" height="18" style="flex:none;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="display:flex;align-items:center;gap:12px"><div style="flex:1;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color-accent-2-800)"><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>Synced to Google Calendar 2 min ago</div><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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 · 28</div><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Rebuild week</div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Push to Calendar</div></div>
|
||
<div style="flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px"><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">MON</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">5</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Beef tacos</div><div style="font-size:12px;color:var(--color-neutral-800)">45 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">TUE</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">6</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Spaghetti bolognese</div><div style="font-size:12px;color:var(--color-neutral-800)">50 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">WED</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">7</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-accent-2-200);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Crock pot tikka masala</div><div style="font-size:12px;color:var(--color-neutral-800)">Crock pot · 6 hr</div><div style="font-size:12px;font-weight:700;color:var(--color-accent-2-900)">Start by 12:30 pm</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700;white-space:nowrap">Side quest</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">THU</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">8</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Chicken stir-fry</div><div style="font-size:12px;color:var(--color-neutral-800)">25 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">FRI</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">9</span></div><div style="flex:1;padding:12px;border-radius:26px;border:2.5px dashed var(--color-accent);background:var(--color-accent-100);display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;color:var(--color-accent-800)">Drop to swap</div><div style="font-size:12px;color:var(--color-accent-800)">Replaces Pizza night</div><div style="margin-top:8px;width:100%;padding:10px;border-radius:20px;background:var(--color-bg);box-shadow:var(--shadow-lg);transform:rotate(-3deg);display:flex;flex-direction:column;gap:6px;text-align:left"><div style="height:60px;border-radius:14px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:14px;line-height:1.15">Lemon garlic shrimp orzo</div></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">SAT</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">10</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-accent-2-200);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Korean beef bowls</div><div style="font-size:12px;color:var(--color-neutral-800)">30 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700;white-space:nowrap">Side quest</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0"><div style="display:flex;align-items:baseline;gap:6px;padding:0 4px"><span style="font-size:12px;font-weight:700;color:var(--color-neutral-700)">SUN</span><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">11</span></div><div style="flex:1;padding:12px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:9px"><div style="height:110px;border-radius:18px;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);">photo</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;line-height:1.15">Sheet-pan salmon</div><div style="font-size:12px;color:var(--color-neutral-800)">35 min</div><div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center"><span style="padding:3px 10px;border-radius:999px;background:var(--color-neutral-100);color:var(--color-neutral-800);font-size:11px;font-weight:700;white-space:nowrap">Regular</span><span style="color:var(--color-neutral-700)"><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="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></span></div></div></div></div></div>
|
||
<div style="width:290px;flex:none;padding:32px 22px;border-left:1px solid var(--color-divider);display:flex;flex-direction:column;gap:16px">
|
||
<div style="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:9px 0;border-radius:999px;background:var(--color-bg);box-shadow:var(--shadow-sm)">Quest log · 6</span><span style="padding:9px 0;color:var(--color-neutral-700)">Regulars · 9</span></div>
|
||
<div style="font-size:13px;color:var(--color-neutral-800)">Drag a dinner onto a day to swap it in.</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;border:2px dashed var(--color-neutral-400);opacity:.55"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Lemon garlic shrimp orzo</div><div style="font-size:12px;color:var(--color-neutral-700)">Medium</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div><div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:var(--color-surface)"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Chicken quesadillas</div><div style="font-size:12px;color:var(--color-neutral-700)">Easy</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div><div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:var(--color-surface)"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Beef & broccoli</div><div style="font-size:12px;color:var(--color-neutral-700)">Easy</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div><div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:var(--color-surface)"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Pesto gnocchi</div><div style="font-size:12px;color:var(--color-neutral-700)">Easy</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div><div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:var(--color-surface)"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Turkey chili</div><div style="font-size:12px;color:var(--color-neutral-700)">Easy</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div><div style="display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:var(--color-surface)"><div style="flex:none;width:48px;height:48px;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;min-width:0"><div style="font-weight:700;font-size:14px">Thai basil chicken</div><div style="font-size:12px;color:var(--color-neutral-700)">Medium</div></div><span style="display:grid;grid-template-columns:4px 4px;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span><span style="width:4px;height:4px;border-radius:50%;background:var(--color-neutral-500)"></span></span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color-accent-700)"><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"><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>Swipe more side quests</div>
|
||
</div></div></div>
|
||
<div class="dv-opt" id="2e"><div class="dv-olabel"><a class="dv-oid" href="#2e">2e</a>Settings · notifications, Google Chat, AI admin</div><div style="width:1440px;height:900px;border-radius:18px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:208px;flex:none;padding:28px 16px;display:flex;flex-direction:column;gap:6px;background:var(--color-surface)"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:28px;padding:0 12px 22px;color:var(--color-accent)">MealQuest</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Quick</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);font-size:15px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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 style="margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:22px;background:var(--color-bg)"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-300);color:var(--color-accent-2-900);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px">K</div><div style="font-size:13px;line-height:1.3"><b>Our kitchen</b><br><span style="color:var(--color-neutral-700)">Shared household</span></div></div></div><div style="flex:1;min-width:0;padding:32px 36px;display:flex;flex-direction:column;gap:20px">
|
||
<div style="display:flex;align-items:flex-end;gap:14px"><div style="flex:1"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:40px;line-height:1.1">Settings</div><div style="font-size:14px;color:var(--color-neutral-800);margin-top:6px">Changes apply to everyone in the household.</div></div><div style="display:flex;gap:6px;font-size:14px;font-weight:700"><span style="padding:9px 16px;border-radius:999px">Household</span><span style="padding:9px 16px;border-radius:999px">Regular dinners</span><span style="padding:9px 16px;border-radius:999px;background:var(--color-text);color:var(--color-bg)">Notifications & AI</span></div></div>
|
||
<div style="flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px">
|
||
<div style="display:flex;flex-direction:column;gap:20px">
|
||
<div style="padding:24px;border-radius:30px;background:var(--color-surface);display:flex;flex-direction:column;gap:14px"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">Notifications</div>
|
||
<div style="display:grid;grid-template-columns:1fr 60px 60px;align-items:center;row-gap:14px;font-size:15px"><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:11px;font-weight:700;color:var(--color-neutral-700);text-align:center">PUSH</span><span style="font-size:11px;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"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="font-weight:700">Shopping list ready</span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="font-weight:700">Day-of dinner reminder<br><span style="font-weight:400;font-size:13px;color:var(--color-neutral-700)">Sent at 4:30 pm</span></span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-neutral-300);position:relative"><span style="position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="font-weight:700">New suggestions to swipe</span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-accent-2-600);position:relative"><span style="position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span><span style="justify-self:center"><span style="display:inline-block;vertical-align:middle;flex:none;width:40px;height:24px;border-radius:999px;background:var(--color-neutral-300);position:relative"><span style="position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--color-bg)"></span></span></span></div></div>
|
||
<div style="padding:24px;border-radius:30px;background:var(--color-surface);display:flex;flex-direction:column;gap:14px"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">Google Chat webhook</div><div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:6px">Webhook URL</div><div style="height:46px;padding:0 16px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;font-weight:700;font-family:ui-monospace,Menlo,monospace;font-weight:400;font-size:13px">https://chat.googleapis.com/v1/spaces/AAAA…/messages?key=…</div></div><div style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color-accent-2-800)"><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>Connected · Dinner Crew space</span><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Send test message</div></div></div>
|
||
</div>
|
||
<div style="padding:24px;border-radius:30px;background:var(--color-surface);display:flex;flex-direction:column;gap:16px">
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:22px">AI assistant</div><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700;white-space:nowrap">Admin</span></div>
|
||
<div style="display:flex;gap:14px"><div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:6px">Provider</div><div style="height:46px;padding:0 16px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;font-weight:700;">Anthropic<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="m6 9 6 6 6-6"></path></svg></div></div><div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:6px">Model</div><div style="height:46px;padding:0 16px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;font-weight:700;">Claude Sonnet<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="m6 9 6 6 6-6"></path></svg></div></div></div>
|
||
<div style="display:flex;gap:14px;align-items:flex-end"><div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:6px">API key</div><div style="height:46px;padding:0 16px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-divider);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;font-weight:700;font-family:ui-monospace,Menlo,monospace;font-weight:400;font-size:13px">sk-••••••••••••••••3f9a<span style="padding:6px 12px;border-radius:999px;background:var(--color-surface);font:700 12px var(--font-body)">Replace</span></div></div></div>
|
||
<div style="font-size:13px;font-weight:700;color:var(--color-accent-2-800);margin-top:-6px">Verified · Oct 1</div>
|
||
<div><div style="display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:12px"><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:12px;color:var(--color-neutral-700);margin-top:8px"><span>Familiar</span><span>Adventurous</span></div></div>
|
||
<div style="flex:1;display:flex;flex-direction:column"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700);margin-bottom:6px">System prompt</div><div style="flex:1;padding:14px 16px;border-radius:22px;background:var(--color-bg);border:1px solid var(--color-divider);font:13px/1.6 ui-monospace,Menlo,monospace;color:var(--color-neutral-900)">You are MealQuest, a dinner planning assistant for one household.<br><br>Suggest dinners similar to the household's regular rotation. Prefer weeknight-friendly recipes. Mark crock pot meals and anything 30 minutes or less prep-to-table as "quick".<br><br>Always explain in one sentence why a suggestion fits.</div></div>
|
||
<div style="display:flex;justify-content:flex-end;gap:10px"><div style="height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--color-divider);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap">Reset</div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap">Save changes</div></div>
|
||
</div></div></div></div></div>
|
||
<div class="dv-opt" id="2f"><div class="dv-olabel"><a class="dv-oid" href="#2f">2f</a>Shopping list + archive</div><div style="width:1440px;height:900px;border-radius:18px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;color:var(--color-text);font-family:var(--font-body)"><div style="width:208px;flex:none;padding:28px 16px;display:flex;flex-direction:column;gap:6px;background:var(--color-surface)"><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:28px;padding:0 12px 22px;color:var(--color-accent)">MealQuest</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);font-size:15px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Quick</div><div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--color-neutral-800)"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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 style="margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:22px;background:var(--color-bg)"><div style="width:36px;height:36px;border-radius:50%;background:var(--color-accent-2-300);color:var(--color-accent-2-900);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px">K</div><div style="font-size:13px;line-height:1.3"><b>Our kitchen</b><br><span style="color:var(--color-neutral-700)">Shared household</span></div></div></div><div style="flex:1;min-width:0;padding:32px 36px;display:flex;flex-direction:column;gap:18px">
|
||
<div style="display:flex;align-items:flex-end;gap:14px"><div style="flex:1"><div style="font-size:13px;font-weight:700;color:var(--color-neutral-700)">Plan / <span style="color:var(--color-text)">Shopping list</span></div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:40px;line-height:1.1;margin-top:4px">Supply run · Oct 5 – 11</div><div style="font-size:14px;color:var(--color-neutral-800);margin-top:6px">28 to buy · 5 already on hand. Uncheck anything you have.</div></div><div style="height:44px;padding:0 20px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:15px;white-space:nowrap"><svg viewBox="0 0 24 24" width="17" height="17" style="flex:none;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>Send to Google Chat</div></div>
|
||
<div style="column-count:3;column-gap:16px"><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">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:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Corn tortillas</span><span style="font-size:13px;color:var(--color-neutral-700)">12</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;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 style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Shredded cheese</span><span style="font-size:13px;color:var(--color-neutral-700)">8 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Limes</span><span style="font-size:13px;color:var(--color-neutral-700)">3</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Spaghetti bolognese</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">TUE</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Crushed tomatoes</span><span style="font-size:13px;color:var(--color-neutral-700)">28 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Spaghetti</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Parmesan</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">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:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Chicken thighs</span><span style="font-size:13px;color:var(--color-neutral-700)">2 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Tikka masala paste</span><span style="font-size:13px;color:var(--color-neutral-700)">1 jar</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;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 style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Plain yogurt</span><span style="font-size:13px;color:var(--color-neutral-700)">1 cup</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Cilantro</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Chicken stir-fry</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">THU</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Chicken breast</span><span style="font-size:13px;color:var(--color-neutral-700)">1.5 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Broccoli</span><span style="font-size:13px;color:var(--color-neutral-700)">2 heads</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Snap peas</span><span style="font-size:13px;color:var(--color-neutral-700)">8 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Soy sauce</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Pizza night</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">FRI</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Pizza dough</span><span style="font-size:13px;color:var(--color-neutral-700)">2</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Mozzarella</span><span style="font-size:13px;color:var(--color-neutral-700)">16 oz</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Pepperoni</span><span style="font-size:13px;color:var(--color-neutral-700)">6 oz</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Korean beef bowls</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">SAT</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Ground beef</span><span style="font-size:13px;color:var(--color-neutral-700)">1 lb</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Jasmine rice</span><span style="font-size:13px;color:var(--color-neutral-700)">2 cups</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Green onions</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px;color:var(--color-neutral-600)"><span style="flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--color-neutral-400)"></span><span style="flex:1;text-decoration:line-through">Brown sugar</span><span style="font-size:11px;font-weight:700">have it</span></div></div><div style="break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:26px;background:var(--color-surface);display:flex;flex-direction:column;gap:11px"><div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px"><span style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px;line-height:1.15">Sheet-pan salmon</span><span style="font-size:11px;font-weight:700;color:var(--color-neutral-700)">SUN</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Salmon fillets</span><span style="font-size:13px;color:var(--color-neutral-700)">4</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Asparagus</span><span style="font-size:13px;color:var(--color-neutral-700)">1 bunch</span></div><div style="display:flex;align-items:center;gap:12px;font-size:15px"><span style="flex:none;width:22px;height:22px;border-radius:8px;background:var(--color-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="14" height="14" style="stroke-width:3.5;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><span style="flex:1">Lemons</span><span style="font-size:13px;color:var(--color-neutral-700)">2</span></div></div></div></div>
|
||
<div style="width:340px;flex:none;padding:32px 24px;border-left:1px solid var(--color-divider);display:flex;flex-direction:column;gap:14px">
|
||
<div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:24px">Supply archive</div>
|
||
<div style="display:flex;border:1px solid var(--color-divider);border-radius:999px;overflow:hidden;font-size:13px;font-weight:700;align-self:flex-start"><span style="padding:8px 16px;background:var(--color-accent);color:var(--on-accent)">Week</span><span style="padding:8px 16px">Month</span><span style="padding:8px 16px">Year</span></div>
|
||
<div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;margin-top:6px">October 2026</div><div style="padding:14px 16px;border-radius:22px;background:var(--color-accent-100);box-shadow:inset 0 0 0 2px var(--color-accent-300);display:flex;flex-direction:column;gap:4px"><div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700)">Week 41 · Oct 5 – 11 · Current</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.2">Tacos, tikka & a salmon finale</div><div style="font-size:12px;color:var(--color-neutral-700)">7 dinners · 33 items</div></div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:17px;margin-top:6px">September 2026</div><div style="padding:14px 16px;border-radius:22px;background:var(--color-surface);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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.2">Pizza, pot roast & 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-surface);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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.2">Chili season opens</div><div style="font-size:12px;color:var(--color-neutral-700)">6 dinners · 21 items</div></div><div style="padding:14px 16px;border-radius:22px;background:var(--color-surface);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 38 · Sep 14 – 20</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.2">Back-to-school sheet pans</div><div style="font-size:12px;color:var(--color-neutral-700)">7 dinners · 24 items</div></div>
|
||
</div></div></div>
|
||
</div>
|
||
<p class="dv-next">Try next: "add a tablet version of settings" · "show <a class="dv-oid" href="#2d">2d</a> with next week's draft" · "make <a class="dv-oid" href="#2a">2a</a> portrait"</p>
|
||
</section>
|
||
<section class="dv-turn" id="t1" style="--color-bg:oklch(0.975 0.008 85);--color-surface:oklch(0.935 0.016 85);--color-accent:oklch(0.42 0.14 300);--color-accent-100:oklch(0.97 0.032 300);--color-accent-200:oklch(0.93 0.063 300);--color-accent-300:oklch(0.86 0.095 300);--color-accent-400:oklch(0.77 0.126 300);--color-accent-500:oklch(0.67 0.147 300);--color-accent-600:oklch(0.57 0.147 300);--color-accent-700:oklch(0.47 0.137 300);--color-accent-800:oklch(0.37 0.116 300);--color-accent-900:oklch(0.27 0.084 300);--color-accent-2:oklch(0.58 0.09 215);--color-accent-2-100:oklch(0.97 0.030 215);--color-accent-2-200:oklch(0.93 0.060 215);--color-accent-2-300:oklch(0.86 0.090 215);--color-accent-2-400:oklch(0.77 0.120 215);--color-accent-2-500:oklch(0.67 0.140 215);--color-accent-2-600:oklch(0.57 0.140 215);--color-accent-2-700:oklch(0.47 0.130 215);--color-accent-2-800:oklch(0.37 0.110 215);--color-accent-2-900:oklch(0.27 0.080 215);--on-accent:var(--color-bg)">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">MealQuest — v2 · Grape + teal blue</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 with the B4 palette (grape + teal blue, off-white) · playful, quest-flavored copy · bottom nav = Home, Plan, Discover, Quick, Settings. Chosen mobile directions: <a class="dv-oid" href="#1a">1a</a> (swipe) and <a class="dv-oid" href="#1f">1f</a> (plan).</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) · 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<span style="padding:2px 9px;border-radius:999px;background:var(--color-accent-2-600);color:var(--color-bg);font-size:11px;font-weight:700">Chosen</span></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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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);color:var(--on-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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:24px;line-height:1.15">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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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);color:var(--on-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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:15px;color:var(--on-accent)">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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:15px;color:var(--on-accent)"><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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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<span style="padding:2px 9px;border-radius:999px;background:var(--color-accent-2-600);color:var(--color-bg);font-size:11px;font-weight:700">Chosen</span></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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:15px;color:var(--on-accent)">Looks good — push to Calendar</div>
|
||
<div style="position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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 & 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:'Bagel Fat One',system-ui,sans-serif;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);color:var(--on-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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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);color:var(--on-accent)"></span><span style="flex:1;height:6px;border-radius:999px;background:var(--color-accent);color:var(--on-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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;color:var(--on-accent)">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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent)">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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;font-size:17px">One-pan chicken & 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-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="flex:none;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></div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Beef & 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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;line-height:1.15">Pesto gnocchi & 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 style="position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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>Quick</div><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:16px;color:var(--on-accent)">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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent);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(--on-accent);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:'Bagel Fat One',system-ui,sans-serif;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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="flex:none;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="flex:none;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><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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:'Bagel Fat One',system-ui,sans-serif;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(--on-accent)">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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:19px;line-height:1.15">Tacos, tikka & 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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:16px">Pizza, pot roast & 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:'Bagel Fat One',system-ui,sans-serif;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 & admin</div>
|
||
<div class="dv-opts">
|
||
<div class="dv-opt" id="1p"><div class="dv-olabel"><a class="dv-oid" href="#1p">1p</a>Settings home · Admin lives here</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:'Bagel Fat One',system-ui,sans-serif;font-size:28px">Settings</div>
|
||
<div style="margin:14px 20px 0;padding:14px 16px;border-radius:26px;background:var(--color-accent-2-100);display:flex;align-items:center;gap:12px"><div style="flex:none;width:44px;height:44px;border-radius:50%;background:var(--color-accent-2-300);color:var(--color-accent-2-900);display:flex;align-items:center;justify-content:center;font-family:'Bagel Fat One',system-ui,sans-serif;font-size:18px">K</div><div style="flex:1;font-size:13px;line-height:1.35;color:var(--color-accent-2-900)"><b style="font-size:15px">Our kitchen</b><br>Shared household · changes apply to everyone</div></div>
|
||
<div style="padding:18px 24px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700)">Household</div>
|
||
<div style="margin:0 20px;border-radius:26px;background:var(--color-surface)"><div style="display:flex;align-items:center;gap:14px;padding:14px 16px"><div style="flex:none;width:38px;height:38px;border-radius:50%;background:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="flex:none;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 style="flex:1;min-width:0"><div style="font-weight:700;font-size:15px">Regular dinners</div><div style="font-size:12px;color:var(--color-neutral-700)">7 on rotation</div></div><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="m9 18 6-6-6-6"></path></svg></div><div style="height:1px;margin:0 16px;background:var(--color-divider)"></div><div style="display:flex;align-items:center;gap:14px;padding:14px 16px"><div style="flex:none;width:38px;height:38px;border-radius:50%;background:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="flex:none;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><div style="flex:1;min-width:0"><div style="font-weight:700;font-size:15px">Google Calendar</div><div style="font-size:12px;color:var(--color-neutral-700)">Connected · Dinners calendar</div></div><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="m9 18 6-6-6-6"></path></svg></div></div>
|
||
<div style="padding:18px 24px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700)">Alerts</div>
|
||
<div style="margin:0 20px;border-radius:26px;background:var(--color-surface)"><div style="display:flex;align-items:center;gap:14px;padding:14px 16px"><div style="flex:none;width:38px;height:38px;border-radius:50%;background:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="flex:none;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></div><div style="flex:1;min-width:0"><div style="font-weight:700;font-size:15px">Notifications & Google Chat</div><div style="font-size:12px;color:var(--color-neutral-700)">Push on · Dinner Crew space</div></div><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="m9 18 6-6-6-6"></path></svg></div></div>
|
||
<div style="padding:18px 24px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700)">Admin</div>
|
||
<div style="margin:0 20px;border-radius:26px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-accent-300)"><div style="display:flex;align-items:center;gap:14px;padding:14px 16px"><div style="flex:none;width:38px;height:38px;border-radius:50%;background:var(--color-bg);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="18" height="18" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M12 3v4"></path><path d="M12 17v4"></path><path d="M3 12h4"></path><path d="M17 12h4"></path><circle cx="12" cy="12" r="3"></circle></svg></div><div style="flex:1;min-width:0"><div style="font-weight:700;font-size:15px">AI assistant</div><div style="font-size:12px;color:var(--color-neutral-700)">Anthropic · Claude Sonnet</div></div><span style="padding:3px 10px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;font-weight:700">Admin</span><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="m9 18 6-6-6-6"></path></svg></div></div>
|
||
<div style="position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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="flex:none;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="flex:none;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><div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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="1n"><div class="dv-olabel"><a class="dv-oid" href="#1n">1n</a>Notifications & 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;display:flex;align-items:center;gap:12px"><div style="flex:none;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="flex:none;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:'Bagel Fat One',system-ui,sans-serif;font-size:26px">Notifications</div></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:'Bagel Fat One',system-ui,sans-serif;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;text-overflow:ellipsis;display:block;line-height:40px">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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:12px;color:var(--on-accent)">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:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px;color:var(--color-neutral-400)"><svg viewBox="0 0 24 24" width="22" height="22" style="flex:none;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="flex:none;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="flex:none;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="flex:none;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><div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--color-accent);color:var(--on-accent);font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="20" height="20" style="flex:none;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 (inside Settings)</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:12px"><div style="flex:none;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="flex:none;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="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Settings · Admin</div><div style="font-family:'Bagel Fat One',system-ui,sans-serif;font-size:26px;line-height:1.1">AI assistant</div></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);color:var(--on-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:'Bagel Fat One',system-ui,sans-serif;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:'Bagel Fat One',system-ui,sans-serif;font-size:15px;color:var(--on-accent)">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>
|