2026-09-25 07:50:17 -04:00
<!DOCTYPE html>
< html >
< head >
2026-09-25 10:23:21 -04:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script src = "./support.js" ></ script >
2026-09-25 07:50:17 -04:00
</ head >
< body >
2026-09-25 10:23:21 -04:00
< template id = "__bundler_thumbnail" >< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 100 100" >< rect width = "100" height = "100" fill = "#3B3AB8" />< text x = "50" y = "64" text-anchor = "middle" font-family = "Georgia,serif" font-size = "44" font-weight = "700" fill = "#fff" > N</ text ></ svg ></ template >
< x-dc >
< helmet data-dc-atomics >< meta name = "design_doc_mode" content = "canvas" >
< link rel = "stylesheet" href = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/fonts.css" >
< link rel = "stylesheet" href = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/colors.css" >
< link rel = "stylesheet" href = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/typography.css" >
< link rel = "stylesheet" href = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/spacing.css" >
< link rel = "stylesheet" href = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/styles.css" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cinzel+Decorative:wght@400;700;900&display=swap" >
< script src = "https://unpkg.com/lucide@latest/dist/umd/lucide.js" ></ script >
< script src = "_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_bundle.js" ></ script >
< style >
body { margin : 0 ; background : #f0eee9 ; font-family : Nunito , system-ui , sans-serif }
a { color : #3B3AB8 } a : hover { color : #A035CC }
. dv-turn { padding : 40 px 44 px 32 px ; border-bottom : 1 px solid rgba ( 0 , 0 , 0 , .08 ); scroll-margin-top : 16 px }
. dv-thd { display : flex ; align-items : baseline ; gap : 10 px ; margin : 0 0 20 px }
. dv-tid { font : 600 10 px ui-monospace , Menlo , monospace ; padding : 3 px 7 px ; background : #1a1a1a ; color : #fff ; border-radius : 4 px ; text-decoration : none }
. dv-tname { font : 600 13 px / 1.2 Nunito , system-ui , sans-serif ; color : #1a1a1a }
. dv-opts { display : flex ; flex-wrap : wrap ; gap : 28 px ; align-items : flex-start }
. dv-opt { flex : none ; display : flex ; flex-direction : column ; gap : 9 px ; scroll-margin-top : 16 px }
. dv-oid { font : 600 10.5 px ui-monospace , Menlo , monospace ; padding : 3 px 7 px ; background : rgba ( 0 , 0 , 0 , .08 ); color : #1a1a1a ; border-radius : 5 px ; text-decoration : none }
. dv-olabel { display : flex ; align-items : baseline ; gap : 8 px ; font : 400 11 px / 1.3 Nunito , system-ui , sans-serif ; color : rgba ( 0 , 0 , 0 , .55 )}
. dv-card { max-width : 100 % ; background : #fff ; border : 1 px solid rgba ( 0 , 0 , 0 , .08 ); border-radius : 8 px ; box-shadow : 0 1 px 3 px rgba ( 0 , 0 , 0 , .06 ); overflow : hidden }
. dv-opt : target . dv-oid { background : #2a78d6 ; color : #fff }
. dv-next { margin : 22 px 0 0 ; font : 12 px / 1.5 Nunito , system-ui , sans-serif ; color : rgba ( 0 , 0 , 0 , .5 )}
</ style ></ helmet >
2026-09-25 07:50:17 -04:00
2026-09-25 10:23:21 -04:00
< section class = "dv-turn" id = "t1" >
< div class = "dv-thd" >< a class = "dv-tid" href = "#t1" > 1</ a >< span class = "dv-tname" > Kids' DAKOS wall panel — 1920× </ span ></ div >
< div class = "dv-opts" >
2026-09-25 07:50:17 -04:00
2026-09-25 10:23:21 -04:00
< div class = "dv-opt" id = "1a" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1a" > 1a</ a > Attract state — The Party</ div >
< div class = "dv-card" data-screen-label = "Panel: The Party" >
< div style = "width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),repeating-linear-gradient(2deg,rgba(150,115,70,.04) 0 3px,transparent 3px 7px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)" >
< div style = "position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none" ></ div >
< div style = "position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none" ></ div >
< div style = "position:absolute;top:64px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px" >
< div style = "display:flex;align-items:center;gap:22px" >
< div style = "width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(92,62,26,.6))" ></ div >
< img src = "design/assets/nestquest-mark.png" alt = "" style = "height:124px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))" >
< img src = "design/assets/nestquest-wordmark.png" alt = "NestQuest" style = "height:78px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))" >
< div style = "width:64px;height:1px;background:linear-gradient(90deg,rgba(92,62,26,.6),transparent)" ></ div >
</ div >
< div style = "font:600 21px/1 Cinzel,serif;letter-spacing:.3em;text-transform:uppercase;color:#6b5433" > The Party · Monday, September 14</ div >
</ div >
< div style = "position:absolute;top:262px;left:110px;right:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px" >
< div style = "display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)" >
< div style = "width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)" >
< div style = "font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff" > D</ div ></ div >
< div style = "font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14" > Declan</ div >
< div style = "display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)" >
< i data-lucide = "check-circle" style = "width:22px;height:22px;color:#157a3c" ></ i >
< span style = "font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36" > Home today</ span ></ div >
< div style = "font:700 26px/1 Nunito;color:#6b5433" > 3 of 7 quests claimed</ div >
< div style = "width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)" >
< div style = "width:43%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)" ></ div ></ div >
</ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)" >
< div style = "width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)" >
< div style = "font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff" > J</ div ></ div >
< div style = "font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14" > Jordyn</ div >
< div style = "display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)" >
< i data-lucide = "check-circle" style = "width:22px;height:22px;color:#157a3c" ></ i >
< span style = "font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36" > Home today</ span ></ div >
< div style = "font:700 26px/1 Nunito;color:#6b5433" > 5 of 5 quests claimed</ div >
< div style = "width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)" >
< div style = "width:100%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)" ></ div ></ div >
</ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#f2ecdd,#e6dcc6);border:2px dashed rgba(92,62,26,.34);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)" >
< div style = "width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#6b6b7a,#7a7286);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)" >
< div style = "font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff" > C</ div ></ div >
< div style = "font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#4d4433" > Chloe</ div >
< div style = "display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:rgba(92,62,26,.1);border:1px solid rgba(92,62,26,.3)" >
< i data-lucide = "tent" style = "width:22px;height:22px;color:#6b5433" ></ i >
< span style = "font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#6b5433" > On travels</ span ></ div >
< div style = "font:700 26px/1 Nunito;color:#5c452a" > Returns Sunday, Sep 21</ div >
< div style = "width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.12);border:1px solid rgba(92,62,26,.2)" ></ div >
</ div >
</ div >
< div style = "position:absolute;bottom:150px;left:0;right:0;text-align:center;font:600 27px/1 Nunito;color:#5c452a" > Tap your crest to open your Quest Log</ div >
< div style = "position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)" >
< i data-lucide = "cloud-sun" style = "width:40px;height:40px;color:#e9dcbd" ></ i >
< span style = "font:800 38px/1 Nunito;color:#f7efdb" > 64°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Partly cloudy · high 71° · low 52°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Rain moving in after 6 PM</ span >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1b" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1b" > 1b</ a > Declan's Quest Log — mid-day</ div >
< div class = "dv-card" data-screen-label = "Panel: Quest Log" >
< div style = "width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)" >
< div style = "position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none" ></ div >
< div style = "position:absolute;top:56px;left:62px;right:62px;display:flex;align-items:center;gap:30px" >
< div style = "width:96px;height:110px;flex:none;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;justify-content:center;padding-top:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22)" >
< div style = "font:700 44px/1 'Cinzel Decorative',Cinzel,serif;color:#fff" > D</ div ></ div >
< div style = "flex:1;min-width:0" >
< div style = "font:700 56px/1.08 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Declan's Quest Log</ div >
< div style = "margin-top:10px;font:600 20px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#6b5433" > Monday, September 14 · 3 of 7 claimed</ div >
</ div >
< div style = "flex:none;display:flex;align-items:center;gap:18px;padding:18px 30px;border-radius:14px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 4px 0 rgba(92,62,26,.16)" >
< div style = "width:44px;height:44px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:grid;place-items:center;color:#fff;font:700 19px Cinzel,serif" > 4</ div >
< div >< div style = "font:700 28px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14" > 4 quests left</ div >
< div style = "font:600 22px/1.2 Nunito;color:#5c452a" > Party progress · 8 of 12 today</ div ></ div >
</ div >
</ div >
< div style = "position:absolute;top:236px;left:62px;right:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px" >
< div style = "display:flex;flex-direction:column;gap:24px" >
< div style = "display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)" >
< i data-lucide = "sunrise" style = "width:34px;height:34px;color:#6b5433" ></ i >
< div style = "flex:1" >< div style = "font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14" > Morning</ div >
< div style = "font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > Until 11:59 AM</ div ></ div >
< div style = "font:700 26px/1 Cinzel,serif;color:#5c452a" > 3/4</ div >
</ div >
< div style = "position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)" >< i data-lucide = "scissors" style = "width:34px;height:34px;color:#7a6242" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through" > Brush hair</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Claimed 7:12 AM</ div ></ div >
< div style = "position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-9deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center" >
< i data-lucide = "check" style = "width:38px;height:38px;color:rgba(255,235,235,.95)" ></ i ></ div >
</ div >
< div style = "position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)" >< i data-lucide = "smile" style = "width:34px;height:34px;color:#7a6242" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through" > Brush teeth</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Claimed 7:15 AM</ div ></ div >
< div style = "position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(6deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center" >
< i data-lucide = "check" style = "width:38px;height:38px;color:rgba(255,235,235,.95)" ></ i ></ div >
</ div >
< div style = "position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)" >< i data-lucide = "spray-can" style = "width:34px;height:34px;color:#7a6242" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through" > Put on deodorant</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Claimed 7:16 AM</ div ></ div >
< div style = "position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-4deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center" >
< i data-lucide = "check" style = "width:38px;height:38px;color:rgba(255,235,235,.95)" ></ i ></ div >
</ div >
< div style = "display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)" >< i data-lucide = "bird" style = "width:34px;height:34px;color:#fff" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Fill bird feeder</ div >
< div style = "font:700 22px/1.3 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#8f1526" > Overdue · due 9:00 AM</ div ></ div >
< div style = "flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)" >< i data-lucide = "check" style = "width:30px;height:30px;color:#fff" ></ i >< span style = "font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
</ div >
< div style = "display:flex;flex-direction:column;gap:24px" >
< div style = "display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)" >
< i data-lucide = "sun" style = "width:34px;height:34px;color:#6b5433" ></ i >
< div style = "flex:1" >< div style = "font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14" > Afternoon</ div >
< div style = "font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > 12:00 – </ div ></ div >
< div style = "font:700 26px/1 Cinzel,serif;color:#5c452a" > 0/1</ div >
</ div >
< div style = "display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)" >< i data-lucide = "dog" style = "width:34px;height:34px;color:#fff" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Clean dog poop</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Due by 5:00 PM</ div ></ div >
< div style = "flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)" >< i data-lucide = "check" style = "width:30px;height:30px;color:#fff" ></ i >< span style = "font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
< div style = "margin-top:6px;padding:26px 24px;border-radius:12px;border:1px dashed rgba(92,62,26,.32);background:rgba(255,255,255,.24)" >
< div style = "font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > Party roll-up</ div >
< div style = "margin-top:10px;font:600 23px/1.45 Nunito;color:#6b5433" > Jordyn has finished her log. Chloe is on travels until Sunday.</ div >
</ div >
</ div >
< div style = "display:flex;flex-direction:column;gap:24px" >
< div style = "display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)" >
< i data-lucide = "moon" style = "width:34px;height:34px;color:#6b5433" ></ i >
< div style = "flex:1" >< div style = "font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14" > Evening</ div >
< div style = "font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > 5:00 – </ div ></ div >
< div style = "font:700 26px/1 Cinzel,serif;color:#5c452a" > 0/3</ div >
</ div >
< div style = "display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)" >< i data-lucide = "smile" style = "width:34px;height:34px;color:#fff" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Brush teeth</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Due by 9:00 PM</ div ></ div >
< div style = "flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)" >< i data-lucide = "check" style = "width:30px;height:30px;color:#fff" ></ i >< span style = "font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
< div style = "display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)" >< i data-lucide = "cat" style = "width:34px;height:34px;color:#fff" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Stack cat food</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Due by 8:00 PM</ div ></ div >
< div style = "flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)" >< i data-lucide = "check" style = "width:30px;height:30px;color:#fff" ></ i >< span style = "font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
< div style = "display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)" >
< div style = "width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)" >< i data-lucide = "droplets" style = "width:34px;height:34px;color:#fff" ></ i ></ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14" > Fill cat fountains</ div >
< div style = "font:600 22px/1.3 Nunito;color:#5c452a" > Due by 8:00 PM</ div ></ div >
< div style = "flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)" >< i data-lucide = "check" style = "width:30px;height:30px;color:#fff" ></ i >< span style = "font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
</ div >
</ div >
< div style = "position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)" >
< i data-lucide = "cloud-sun" style = "width:40px;height:40px;color:#e9dcbd" ></ i >
< span style = "font:800 38px/1 Nunito;color:#f7efdb" > 64°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Partly cloudy · high 71° · low 52°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Rain moving in after 6 PM</ span >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1c" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1c" > 1c</ a > Quest complete — all sealed</ div >
< div class = "dv-card" data-screen-label = "Panel: Quest complete" >
< div style = "width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 26%,rgba(255,255,255,.7),transparent 52%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.3),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f2e7cc,#dccca2);box-shadow:inset 0 0 220px rgba(80,52,20,.4)" >
< div style = "position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none" ></ div >
< div style = "position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none" ></ div >
< div style = "position:absolute;top:96px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:34px" >
< div style = "width:168px;height:168px;border-radius:50%;transform:rotate(-6deg);background:radial-gradient(circle at 35% 28%,#a8283a,#661020);box-shadow:0 10px 24px rgba(60,10,20,.42),inset 0 0 0 7px rgba(255,255,255,.15);display:grid;place-items:center" >
< i data-lucide = "check" style = "width:86px;height:86px;color:rgba(255,238,238,.95)" ></ i ></ div >
< div style = "font:900 86px/1 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));-webkit-background-clip:text;background-clip:text;color:transparent" > Quest complete</ div >
< div style = "font:600 34px/1.4 Nunito;color:#6b5433;max-width:1000px;text-align:center;text-wrap:pretty" > Declan cleared all 7 quests for Monday, September 14. Every seal set before the evening bell.</ div >
</ div >
< div style = "position:absolute;top:540px;left:200px;right:200px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px" >
< div style = "padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center" >
< div style = "font:900 58px/1 Cinzel,serif;color:#2b1f14" > 7</ div >
< div style = "margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > Quests claimed</ div ></ div >
< div style = "padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center" >
< div style = "font:900 58px/1 Cinzel,serif;color:#2b1f14" > 6</ div >
< div style = "margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > On time</ div ></ div >
< div style = "padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center" >
< div style = "font:900 58px/1 Cinzel,serif;color:#2b1f14" > 1</ div >
< div style = "margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > Late</ div ></ div >
< div style = "padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center" >
< div style = "font:900 58px/1 Cinzel,serif;color:#2b1f14" > 12/12</ div >
< div style = "margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a" > The Party</ div ></ div >
</ div >
< div style = "position:absolute;bottom:174px;left:0;right:0;text-align:center;font:600 25px/1 Nunito;color:#5c452a" > Returning to The Party in 12 seconds</ div >
< div style = "position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)" >
< i data-lucide = "cloud-moon" style = "width:40px;height:40px;color:#e9dcbd" ></ i >
< span style = "font:800 38px/1 Nunito;color:#f7efdb" > 58°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Light rain · low 52°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Clearing by morning</ span >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1j" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1j" > 1j</ a > Confirm step — no undo for kids</ div >
< div class = "dv-card" data-screen-label = "Panel: Confirm" >
< div style = "width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),linear-gradient(#f0e4c7,#ddcca3)" >
< div style = "position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px" ></ div >
< div style = "position:absolute;inset:0;background:rgba(30,20,10,.62)" ></ div >
< div style = "position:absolute;top:196px;left:460px;width:1000px;padding:64px 68px 56px;border-radius:20px;background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.6),transparent 60%),linear-gradient(#f7ecd2,#e6d7b2);border:3px solid rgba(92,62,26,.5);box-shadow:0 26px 60px rgba(20,10,0,.5),inset 0 2px 0 rgba(255,255,255,.7)" >
< div style = "display:flex;align-items:center;gap:26px" >
< div style = "width:104px;height:104px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))" >< i data-lucide = "dog" style = "width:56px;height:56px;color:#fff" ></ i ></ div >
< div style = "min-width:0" >< div style = "font:600 21px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#5c452a" > Afternoon quest</ div >
< div style = "margin-top:12px;font:700 58px/1.05 'Cinzel Decorative',Cinzel,serif;color:#2b1f14" > Clean dog poop</ div ></ div >
</ div >
< div style = "margin-top:40px;font:600 32px/1.45 Nunito;color:#3f2f1c;text-wrap:pretty" > Mark this quest complete? Once the seal is set, only a parent can undo it.</ div >
< div style = "margin-top:44px;display:flex;gap:24px" >
< div style = "flex:1;height:108px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:12px;background:rgba(92,62,26,.1);border:2px solid rgba(92,62,26,.45)" >< i data-lucide = "x" style = "width:34px;height:34px;color:#3f2f1c" ></ i >< span style = "font:700 30px/1 Cinzel,serif;letter-spacing:.06em;color:#3f2f1c" > Not yet</ span ></ div >
< div style = "flex:2;height:108px;display:flex;align-items:center;justify-content:center;gap:16px;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 5px 0 rgba(40,20,60,.4)" >< i data-lucide = "check" style = "width:38px;height:38px;color:#fff" ></ i >< span style = "font:700 32px/1 Cinzel,serif;letter-spacing:.06em;color:#fff" > Complete</ span ></ div >
</ div >
</ div >
< div style = "position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.94);display:flex;align-items:center;justify-content:center;gap:26px" >
< i data-lucide = "cloud-sun" style = "width:40px;height:40px;color:#e9dcbd" ></ i >
< span style = "font:800 38px/1 Nunito;color:#f7efdb" > 64°</ span >
< span style = "width:1px;height:38px;background:rgba(233,220,189,.3)" ></ span >
< span style = "font:600 26px/1 Nunito;color:#d8c9a6" > Partly cloudy · high 71° · low 52°</ span >
</ div >
</ div >
</ div ></ div >
</ div >
< div class = "dv-thd" style = "margin:46px 0 20px" >< a class = "dv-tid" href = "#t1" > 1</ a >< span class = "dv-tname" > Parent admin — 390× </ span ></ div >
< div class = "dv-opts" >
< div class = "dv-opt" id = "1d" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1d" > 1d</ a > Today overview</ div >
< div class = "dv-card" data-screen-label = "Admin: Today (compact)" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:10px 20px 14px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between" >
< div style = "display:flex;align-items:center;gap:12px;min-width:0" >< img src = "design/assets/nestquest-mark.png" alt = "NestQuest" style = "width:40px;height:auto;flex:none;display:block" >
< div >< div style = "font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D" > Today</ div >
< div style = "font:600 12px/1.4 Nunito;color:#52525E" > Monday, September 14 · cycle day 3 of 14</ div ></ div ></ div >
< div style = "width:36px;height:36px;border-radius:8px;background:#F4F4F6;display:grid;place-items:center" >< i data-lucide = "settings" style = "width:19px;height:19px;color:#52525E" ></ i ></ div ></ div >
< div style = "padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px" >
< div style = "display:flex;gap:8px" >
< div style = "flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 22px/1 Nunito;color:var(--brand-blue)" > 8</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > Done</ div ></ div >
< div style = "flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 22px/1 Nunito;color:#18181D" > 4</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > Remaining</ div ></ div >
< div style = "flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 22px/1 Nunito;color:#DC2626" > 1</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > Overdue</ div ></ div >
</ div >
< div style = "border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden" >
< div style = "display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1" >
< div style = "width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff" > D</ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 14px/1.2 Nunito;color:#18181D" > Declan</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > 3 of 7 · 1 overdue</ div ></ div >
< div style = "width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden" >< div style = "width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))" ></ div ></ div >
</ div >
< div style = "display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1" >
< div style = "width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff" > J</ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 14px/1.2 Nunito;color:#18181D" > Jordyn</ div >< div style = "font:600 11px/1.3 Nunito;color:#15803D" > 5 of 5 · all done</ div ></ div >
< div style = "width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden" >< div style = "width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))" ></ div ></ div >
</ div >
< div style = "display:flex;align-items:center;gap:10px;padding:11px 13px" >
< div style = "width:30px;height:30px;flex:none;border-radius:7px;background:#9898A8;display:grid;place-items:center;font:800 13px Nunito;color:#fff" > C</ div >
< div style = "flex:1;min-width:0" >< div style = "font:700 14px/1.2 Nunito;color:#52525E" > Chloe</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Away · returns Sep 21</ div ></ div >
< span style = "font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA" > override</ span >
</ div >
</ div >
< div style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-top:4px" > Needs attention</ div >
< div style = "border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden" >
< div style = "display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1" >
< i data-lucide = "bird" style = "width:18px;height:18px;color:#52525E" ></ i >
< div style = "flex:1;min-width:0" >< div style = "font:700 13px/1.2 Nunito;color:#18181D" > Fill bird feeder · Declan</ div >< div style = "font:600 11px/1.3 Nunito;color:#DC2626" > Overdue since 9:00 AM</ div ></ div >
< span style = "font:700 11px/1 Nunito;color:var(--brand-blue)" > Mark done</ span ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:11px 13px" >
< i data-lucide = "smile" style = "width:18px;height:18px;color:#52525E" ></ i >
< div style = "flex:1;min-width:0" >< div style = "font:700 13px/1.2 Nunito;color:#18181D" > Brush teeth · Jordyn</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Completed 7:04 AM from panel</ div ></ div >
< span style = "font:700 11px/1 Nunito;color:var(--brand-purple)" > Undo</ span ></ div >
</ div >
< div style = "display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#DBEAFE;border:1px solid rgba(37,99,235,.3)" >
< i data-lucide = "info" style = "width:16px;height:16px;flex:none;color:#1D4ED8;margin-top:1px" ></ i >
< div style = "font:600 11.5px/1.45 Nunito;color:#1E3A8A" > Undo is admin-only. A panel tap can never reverse a completion.</ div ></ div >
</ div >
< div style = "position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px" >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "house" style = "width:21px;height:21px;color:var(--brand-blue)" ></ i >< span style = "font:700 10px Nunito;color:var(--brand-blue)" > Today</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "list-checks" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Tasks</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "calendar-days" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Schedule</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "history" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > History</ span ></ div >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1e" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1e" > 1e</ a > Task definitions + edit sheet</ div >
< div class = "dv-card" data-screen-label = "Admin: Tasks" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between" >
< div >< div style = "font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D" > Tasks</ div >< div style = "font:600 12px/1.4 Nunito;color:#52525E" > 7 definitions · 3 children</ div ></ div >
< div style = "display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))" >< i data-lucide = "plus" style = "width:15px;height:15px;color:#fff" ></ i >< span style = "font:700 13px Nunito;color:#fff" > New</ span ></ div ></ div >
< div style = "padding:12px 16px 0;display:flex;gap:7px" >
< span style = "font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff" > All</ span >
< span style = "font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46" > Declan</ span >
< span style = "font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46" > Jordyn</ span >
< span style = "font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46" > Chloe</ span >
</ div >
< div style = "margin:12px 16px;border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden" >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< i data-lucide = "scissors" style = "width:17px;height:17px;color:#52525E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Brush hair</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Declan · daily · morning</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< i data-lucide = "smile" style = "width:17px;height:17px;color:#52525E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Brush teeth</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > All three · daily · morning + evening</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< i data-lucide = "spray-can" style = "width:17px;height:17px;color:#52525E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Put on deodorant</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Declan · daily · morning</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1;background:#EBEBF8" >< i data-lucide = "dog" style = "width:17px;height:17px;color:var(--brand-blue)" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Clean dog poop</ div >< div style = "font:700 11px/1.3 Nunito;color:var(--brand-blue)" > Editing</ div ></ div >< i data-lucide = "chevron-down" style = "width:16px;height:16px;color:var(--brand-blue)" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< i data-lucide = "bird" style = "width:17px;height:17px;color:#52525E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Fill bird feeder</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Declan · every 2 days · afternoon</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< i data-lucide = "droplets" style = "width:17px;height:17px;color:#52525E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Fill cat fountains</ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Declan · daily · evening</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px" >< i data-lucide = "cat" style = "width:17px;height:17px;color:#70707E" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#52525E" > Stack cat food</ div >< div style = "font:600 11px/1.3 Nunito;color:#70707E" > Chloe · weekly Sun · inactive</ div ></ div >< i data-lucide = "chevron-right" style = "width:16px;height:16px;color:#70707E" ></ i ></ div >
</ div >
< div style = "position:absolute;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -8px 28px rgba(9,9,11,.18);padding:14px 18px 24px" >
< div style = "width:38px;height:4px;border-radius:9999px;background:#E4E4EA;margin:0 auto 14px" ></ div >
< div style = "font:800 19px/1.2 Nunito;color:#18181D" > Clean dog poop</ div >
< div style = "margin-top:14px;display:flex;flex-direction:column;gap:11px" >
< div >< div style = "font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px" > Assigned child</ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA" >< span style = "font:700 13.5px Nunito;color:#18181D" > Declan</ span >< i data-lucide = "chevron-down" style = "width:15px;height:15px;color:#52525E" ></ i ></ div ></ div >
< div style = "display:flex;gap:9px" >
< div style = "flex:1" >< div style = "font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px" > Repeats</ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA" >< span style = "font:700 13.5px Nunito;color:#18181D" > Daily</ span >< i data-lucide = "chevron-down" style = "width:15px;height:15px;color:#52525E" ></ i ></ div ></ div >
< div style = "flex:1" >< div style = "font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px" > Due time</ div >
< div style = "padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D" > 5:00 PM</ div ></ div >
</ div >
2026-09-25 11:34:02 -04:00
< div >< div style = "font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px" > Start date</ div >
< div style = "padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D" > Sep 14, 2026</ div ></ div >
2026-09-25 10:23:21 -04:00
< div >< div style = "font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px" > Window</ div >
< div style = "display:grid;grid-template-columns:repeat(3,1fr);gap:6px" >
< span style = "text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46" > Morning</ span >
< span style = "text-align:center;font:700 12px/1 Nunito;padding:10px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff" > Afternoon</ span >
< span style = "text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46" > Evening</ span ></ div ></ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;background:#F4F4F6" >
< div >< div style = "font:700 13px/1.2 Nunito;color:#18181D" > Skip on away days</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#52525E" > No instance when the child is absent</ div ></ div >
< div style = "width:42px;height:24px;flex:none;border-radius:9999px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));position:relative" >< div style = "position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff" ></ div ></ div ></ div >
< div style = "display:flex;gap:9px;margin-top:2px" >
< div style = "flex:1;text-align:center;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;font:700 14px Nunito;color:#3C3C46" > Cancel</ div >
< div style = "flex:2;text-align:center;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14px Nunito;color:#fff" > Save changes</ div ></ div >
</ div >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1f" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1f" > 1f</ a > Schedule + custody cycle</ div >
< div class = "dv-card" data-screen-label = "Admin: Schedule" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA" >
< div style = "font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D" > Schedule</ div >
2026-09-25 11:34:02 -04:00
< div style = "font:600 12px/1.4 Nunito;color:#52525E" > 2-week cycle · anchor Sunday, Sep 6</ div ></ div >
2026-09-25 10:23:21 -04:00
< div style = "padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px" >
< div style = "padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >
< div style = "display:flex;align-items:center;justify-content:space-between;margin-bottom:11px" >
< span style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46" > September 2026</ span >
< div style = "display:flex;gap:12px" >< i data-lucide = "chevron-left" style = "width:17px;height:17px;color:#52525E" ></ i >< i data-lucide = "chevron-right" style = "width:17px;height:17px;color:#52525E" ></ i ></ div ></ div >
2026-09-25 11:34:02 -04:00
< div style = "display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font:700 10px/1 Nunito;color:#70707E;text-align:center;margin-bottom:6px" >< span > S</ span >< span > M</ span >< span > T</ span >< span > W</ span >< span > T</ span >< span > F</ span >< span > S</ span ></ div >
2026-09-25 10:23:21 -04:00
< div style = "display:grid;grid-template-columns:repeat(7,1fr);gap:4px" >
2026-09-25 11:34:02 -04:00
< div style = "aspect-ratio:1" ></ div >< div style = "aspect-ratio:1" ></ div >
2026-09-25 10:23:21 -04:00
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 1</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 2</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 3</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 4</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 5</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 6</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 7</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 8</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 9</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 10</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 11</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 12</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 13</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 12px Nunito;color:#fff" > 14</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 15</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 16</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 17</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 18</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)" > 19</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)" > 20</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 21</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 22</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 23</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 24</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 25</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 26</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 27</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E" > 28</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 29</ div >
< div style = "aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A" > 30</ div >
</ div >
< div style = "display:flex;flex-wrap:wrap;gap:12px;margin-top:12px" >
< span style = "display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46" >< span style = "width:11px;height:11px;border-radius:3px;background:#EBEBF8;border:1px solid #CDCDF0" ></ span > Chloe + Jordyn home</ span >
< span style = "display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46" >< span style = "width:11px;height:11px;border-radius:3px;background:#F4F4F6;border:1px solid #E4E4EA" ></ span > Away week</ span >
< span style = "display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46" >< span style = "width:11px;height:11px;border-radius:3px;background:#FEF3C7;border:1px solid rgba(217,119,6,.5)" ></ span > Override</ span >
</ div >
</ div >
< div style = "padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >
2026-09-25 11:34:02 -04:00
< div style = "display:flex;align-items:center;justify-content:space-between;margin-bottom:10px" >< span style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46" > Presence patterns</ span >< span style = "font:700 11.5px Nunito;color:var(--brand-blue)" > Add</ span ></ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1" >< span style = "font:700 13px Nunito;color:#18181D" > Chloe · Custody</ span >< span style = "font:600 12px Nunito;color:#52525E" > Away · every 2 weeks</ span ></ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1" >< span style = "font:700 13px Nunito;color:#18181D" > Chloe · School term</ span >< span style = "font:600 12px Nunito;color:#52525E" > Home · every week</ span ></ div >
< div style = "display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1" >< span style = "font:700 13px Nunito;color:#18181D" > Jordyn · Custody</ span >< span style = "font:600 12px Nunito;color:#52525E" > Away · every 2 weeks</ span ></ div >
2026-09-25 10:23:21 -04:00
< div style = "display:flex;align-items:center;justify-content:space-between;padding:9px 0" >< span style = "font:700 13px Nunito;color:#18181D" > Declan</ span >< span style = "font:600 12px Nunito;color:#52525E" > Every day</ span ></ div >
</ div >
< div style = "padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >
< div style = "display:flex;align-items:center;justify-content:space-between;margin-bottom:10px" >< span style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46" > Overrides</ span >< span style = "font:700 11.5px Nunito;color:var(--brand-blue)" > Add</ span ></ div >
< div style = "display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #EDEDF1" >< i data-lucide = "calendar-x" style = "width:16px;height:16px;color:#D97706" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13px/1.2 Nunito;color:#18181D" > Chloe away · Sep 14 – </ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Traded week · beats the pattern</ div ></ div >< i data-lucide = "trash-2" style = "width:15px;height:15px;color:#70707E" ></ i ></ div >
< div style = "display:flex;align-items:center;gap:9px;padding:9px 0" >< i data-lucide = "calendar-check" style = "width:16px;height:16px;color:#15803D" ></ i >< div style = "flex:1;min-width:0" >< div style = "font:700 13px/1.2 Nunito;color:#18181D" > Jordyn home · Sep 19 – </ div >< div style = "font:600 11px/1.3 Nunito;color:#52525E" > Birthday weekend</ div ></ div >< i data-lucide = "trash-2" style = "width:15px;height:15px;color:#70707E" ></ i ></ div >
</ div >
</ div >
< div style = "position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px" >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "house" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Today</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "list-checks" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Tasks</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "calendar-days" style = "width:21px;height:21px;color:var(--brand-blue)" ></ i >< span style = "font:700 10px Nunito;color:var(--brand-blue)" > Schedule</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "history" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > History</ span ></ div >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1g" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1g" > 1g</ a > History + CSV export</ div >
< div class = "dv-card" data-screen-label = "Admin: History" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between" >
< div >< div style = "font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D" > History</ div >< div style = "font:600 12px/1.4 Nunito;color:#52525E" > Append-only event log · last 14 days</ div ></ div >
< div style = "display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#fff" >< i data-lucide = "download" style = "width:15px;height:15px;color:#3C3C46" ></ i >< span style = "font:700 12px Nunito;color:#3C3C46" > CSV</ span ></ div ></ div >
< div style = "padding:14px 16px 92px;display:flex;flex-direction:column;gap:12px" >
< div style = "display:flex;gap:8px" >
< div style = "flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 20px/1 Nunito;color:#18181D" > 91%</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > On time</ div ></ div >
< div style = "flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 20px/1 Nunito;color:#18181D" > 128</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > Completed</ div ></ div >
< div style = "flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA" >< div style = "font:800 20px/1 Nunito;color:#18181D" > 7</ div >< div style = "font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E" > Missed</ div ></ div >
</ div >
< div style = "display:flex;gap:7px" >
< span style = "font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff" > All events</ span >
< span style = "font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46" > Reversals</ span >
< span style = "font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46" > Missed</ span >
</ div >
< div style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E" > Today</ div >
< div style = "border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden" >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Brush teeth · Jordyn</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#52525E" > completed · panel (Jordyn) · on time</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 7:04 AM</ span ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Brush hair · Declan</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#52525E" > completed · panel (Declan) · on time</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 7:12 AM</ span ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#A035CC" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Stack cat food · Declan</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#7D28A0" > uncompleted · joshua (admin)</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 8:31 AM</ span ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#DC2626" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Fill bird feeder · Declan</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#B91C1C" > missed · nightly sweep</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 12:00 AM</ span ></ div >
</ div >
< div style = "font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E" > Sunday, Sep 13</ div >
< div style = "border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden" >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Fill cat fountains · Declan</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#52525E" > completed · panel (Declan) · late 22 min</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 8:22 PM</ span ></ div >
< div style = "display:flex;align-items:center;gap:10px;padding:10px 12px" >< span style = "width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A" ></ span >< div style = "flex:1;min-width:0" >< div style = "font:700 12.5px/1.25 Nunito;color:#18181D" > Clean dog poop · Jordyn</ div >< div style = "font:600 10.5px/1.3 Nunito;color:#52525E" > completed · joshua (admin) · on time</ div ></ div >< span style = "font:600 11px Nunito;color:#52525E" > 4:48 PM</ span ></ div >
</ div >
< div style = "display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#F4F4F6;border:1px solid #E4E4EA" >
< i data-lucide = "lock" style = "width:15px;height:15px;flex:none;color:#3C3C46;margin-top:1px" ></ i >
< div style = "font:600 11px/1.45 Nunito;color:#3C3C46" > Events are never edited or deleted. A reversal is its own row.</ div ></ div >
</ div >
< div style = "position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px" >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "house" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Today</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "list-checks" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Tasks</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "calendar-days" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Schedule</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "history" style = "width:21px;height:21px;color:var(--brand-blue)" ></ i >< span style = "font:700 10px Nunito;color:var(--brand-blue)" > History</ span ></ div >
</ div >
</ div >
</ div ></ div >
</ div >
< div class = "dv-thd" style = "margin:46px 0 20px" >< a class = "dv-tid" href = "#t1" > 1</ a >< span class = "dv-tname" > Parent admin — roomy density, same screens for comparison</ span ></ div >
< div class = "dv-opts" >
< div class = "dv-opt" id = "1h" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1h" > 1h</ a > Today overview · roomy (compare to < a class = "dv-oid" href = "#1d" > 1d</ a > )</ div >
< div class = "dv-card" data-screen-label = "Admin: Today (roomy)" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:16px 22px 20px;background:#fff;border-bottom:1px solid #E4E4EA" >
< div style = "font:700 11px/1 Nunito;letter-spacing:.14em;text-transform:uppercase;color:#52525E" > Monday, September 14</ div >
< div style = "margin-top:6px;font:800 32px/1.05 Nunito;letter-spacing:-.02em;color:#18181D" > 8 of 12 done</ div >
< div style = "margin-top:12px;height:10px;border-radius:9999px;background:#EDEDF1;overflow:hidden" >< div style = "width:67%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))" ></ div ></ div >
< div style = "margin-top:10px;font:600 13px/1.4 Nunito;color:#52525E" > 1 overdue · cycle day 3 of 14</ div >
</ div >
< div style = "padding:18px 20px 92px;display:flex;flex-direction:column;gap:16px" >
< div style = "padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)" >
< div style = "display:flex;align-items:center;gap:14px" >
< div style = "width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff" > D</ div >
< div style = "flex:1;min-width:0" >< div style = "font:800 19px/1.2 Nunito;color:#18181D" > Declan</ div >< div style = "font:600 13px/1.4 Nunito;color:#52525E" > Home every day</ div ></ div >
< div style = "text-align:right" >< div style = "font:800 19px/1 Nunito;color:#18181D" > 3/7</ div >< div style = "font:600 11px/1.3 Nunito;color:#B91C1C" > 1 overdue</ div ></ div >
</ div >
< div style = "margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden" >< div style = "width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))" ></ div ></ div >
< div style = "margin-top:14px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;background:#FEE2E2" >
< div style = "min-width:0" >< div style = "font:700 13.5px/1.2 Nunito;color:#18181D" > Fill bird feeder</ div >< div style = "font:600 11.5px/1.3 Nunito;color:#B91C1C" > Overdue since 9:00 AM</ div ></ div >
< span style = "font:700 12.5px Nunito;color:var(--brand-blue)" > Mark done</ span ></ div >
</ div >
< div style = "padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)" >
< div style = "display:flex;align-items:center;gap:14px" >
< div style = "width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff" > J</ div >
< div style = "flex:1;min-width:0" >< div style = "font:800 19px/1.2 Nunito;color:#18181D" > Jordyn</ div >< div style = "font:600 13px/1.4 Nunito;color:#52525E" > Home this week</ div ></ div >
< div style = "text-align:right" >< div style = "font:800 19px/1 Nunito;color:#18181D" > 5/5</ div >< div style = "font:600 11px/1.3 Nunito;color:#15803D" > All done</ div ></ div >
</ div >
< div style = "margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden" >< div style = "width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))" ></ div ></ div >
</ div >
< div style = "padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA" >
< div style = "display:flex;align-items:center;gap:14px" >
< div style = "width:48px;height:48px;flex:none;border-radius:10px;background:#9898A8;display:grid;place-items:center;font:800 20px Nunito;color:#fff" > C</ div >
< div style = "flex:1;min-width:0" >< div style = "font:800 19px/1.2 Nunito;color:#3C3C46" > Chloe</ div >< div style = "font:600 13px/1.4 Nunito;color:#52525E" > Away until Sunday, Sep 21</ div ></ div >
< span style = "font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA" > override</ span >
</ div >
</ div >
</ div >
< div style = "position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px" >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "house" style = "width:21px;height:21px;color:var(--brand-blue)" ></ i >< span style = "font:700 10px Nunito;color:var(--brand-blue)" > Today</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "list-checks" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Tasks</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "calendar-days" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > Schedule</ span ></ div >
< div style = "display:flex;flex-direction:column;align-items:center;gap:3px" >< i data-lucide = "history" style = "width:21px;height:21px;color:#70707E" ></ i >< span style = "font:600 10px Nunito;color:#52525E" > History</ span ></ div >
</ div >
</ div >
</ div ></ div >
< div class = "dv-opt" id = "1i" >< div class = "dv-olabel" >< a class = "dv-oid" href = "#1i" > 1i</ a > Presence overrides · roomy</ div >
< div class = "dv-card" data-screen-label = "Admin: Presence overrides" >
< div style = "width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif" >
< div style = "height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D" >< span > 9:41</ span >< span style = "display:flex;gap:6px;align-items:center" >< i data-lucide = "wifi" style = "width:15px;height:15px" ></ i >< i data-lucide = "battery-full" style = "width:19px;height:19px" ></ i ></ span ></ div >
< div style = "padding:14px 22px 18px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;gap:12px" >
< i data-lucide = "chevron-left" style = "width:22px;height:22px;color:#3C3C46" ></ i >
< div >< div style = "font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D" > Presence override</ div >< div style = "font:600 12px/1.4 Nunito;color:#52525E" > Beats the custody pattern for these dates</ div ></ div ></ div >
< div style = "padding:18px 20px;display:flex;flex-direction:column;gap:16px" >
< div style = "padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:16px" >
< div >< div style = "font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px" > Child</ div >
< div style = "display:grid;grid-template-columns:repeat(3,1fr);gap:8px" >
< span style = "text-align:center;font:700 13px/1 Nunito;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff" > Chloe</ span >
< span style = "text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46" > Jordyn</ span >
< span style = "text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46" > Declan</ span >
</ div ></ div >
< div >< div style = "font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px" > Status for these dates</ div >
< div style = "display:grid;grid-template-columns:repeat(2,1fr);gap:8px" >
< span style = "text-align:center;font:700 13px/1 Nunito;padding:14px 0;border-radius:8px;background:#18181D;color:#fff" > Away</ span >
< span style = "text-align:center;font:600 13px/1 Nunito;padding:14px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46" > Home</ span >
</ div ></ div >
< div style = "display:flex;gap:10px" >
< div style = "flex:1" >< div style = "font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px" > From</ div >
< div style = "padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D" > Sep 14, 2026</ div ></ div >
< div style = "flex:1" >< div style = "font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px" > Through</ div >
< div style = "padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D" > Sep 20, 2026</ div ></ div >
</ div >
< div >< div style = "font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px" > Reason (optional)</ div >
< div style = "padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:600 14px Nunito;color:#18181D" > Traded week</ div ></ div >
</ div >
< div style = "padding:16px 18px;border-radius:12px;background:#FEF3C7;border:1px solid rgba(217,119,6,.35)" >
< div style = "display:flex;align-items:flex-start;gap:10px" >
< i data-lucide = "alert-circle" style = "width:17px;height:17px;flex:none;color:#92400E;margin-top:2px" ></ i >
< div >< div style = "font:700 13.5px/1.3 Nunito;color:#92400E" > This removes 5 upcoming tasks</ div >
< div style = "margin-top:5px;font:600 12px/1.5 Nunito;color:#78350F" > Chloe's instances for Sep 14– </ div ></ div >
</ div ></ div >
< div style = "display:flex;gap:10px" >
< div style = "flex:1;text-align:center;padding:15px 0;border-radius:8px;border:1px solid #E4E4EA;background:#fff;font:700 14.5px Nunito;color:#3C3C46" > Cancel</ div >
< div style = "flex:2;text-align:center;padding:15px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14.5px Nunito;color:#fff" > Save override</ div >
</ div >
</ div >
</ div >
</ div ></ div >
</ div >
< p class = "dv-next" > Try: "go compact everywhere" · "make the seals smaller on < a class = "dv-oid" href = "#1b" > 1b</ a > " · "darker parchment on the panel" · "add the schedule + history screens in roomy too"</ p >
</ section >
</ x-dc >
< script type = "text/x-dc" data-dc-script >
class Component extends DCLogic {
componentDidMount () { this . icons (); }
componentDidUpdate () { this . icons (); }
icons () {
const run = () => { if ( window . lucide ) window . lucide . createIcons (); else setTimeout ( run , 120 ); };
run ();
2026-09-25 07:50:17 -04:00
}
2026-09-25 10:23:21 -04:00
renderVals () { return {}; }
}
2026-09-25 07:50:17 -04:00
2026-09-25 10:23:21 -04:00
</ script >
2026-09-25 07:50:17 -04:00
</ body >
2026-09-25 10:23:21 -04:00
</ html >
