:root {
  color-scheme: light;
  --ink: #111a3a;
  --ink-soft: #45506e;
  --blue: #3156e8;
  --violet: #7655e8;
  --mint: #47c6a3;
  --orange: #f08a42;
  --yellow: #f2b84b;
  --canvas: #fdf8eb;
  --paper: #fffdfb;
  --porcelain: #f7f2eb;
  --line: rgba(17, 26, 58, 0.1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-shell: 0 32px 90px rgba(47, 44, 60, 0.12), 0 2px 4px rgba(87, 65, 46, 0.05);
  --shadow-float: 0 14px 34px rgba(41, 37, 68, 0.12), 0 2px 3px rgba(87, 65, 46, 0.06);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.45; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(49,86,232,.35); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.demo-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(12px,2vw,30px); }
.product-film { position: relative; isolation: isolate; width: min(100%,1440px); min-height: min(900px,calc(100vh - 24px)); overflow: hidden; padding: clamp(18px,3vw,44px); border-radius: clamp(28px,3.2vw,48px); background: transparent; }
.product-film::after { display:none; }
.atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.orbit { position:absolute; border:1px solid rgba(49,86,232,.1); border-radius:50%; }
.orbit::before,.orbit::after { position:absolute; border-radius:50%; content:""; background:var(--blue); }
.orbit-a { width:430px; height:430px; top:-255px; right:8%; transform:rotate(-18deg); }
.orbit-a::before { width:8px; height:8px; bottom:53px; left:45px; }.orbit-a::after { width:6px; height:6px; bottom:110px; right:13px; background:var(--mint); }
.orbit-b { width:340px; height:340px; bottom:-235px; left:7%; border-color:rgba(240,138,66,.13); }.orbit-b::before { width:7px; height:7px; top:42px; right:34px; background:var(--orange); }.orbit-b::after { width:6px; height:6px; top:93px; left:5px; background:var(--violet); }
.glow { position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(70px); opacity:.2; }.glow-blue { top:23%; left:-180px; background:var(--violet); }.glow-orange { right:-170px; bottom:3%; background:var(--orange); }
.product-shell { width:100%; max-width:1330px; margin:0 auto; overflow:hidden; border:1px solid rgba(17,26,58,.1); border-radius:30px; background:rgba(255,253,251,.94); box-shadow:var(--shadow-shell); }
.product-header { min-height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:12px 20px; border-bottom:1px solid var(--line); background:rgba(255,253,251,.88); }
.product-brand { display:inline-flex; width:max-content; align-items:center; gap:8px; color:var(--ink); text-decoration:none; }.brand-orbit { width:36px; height:36px; color:var(--blue); }.product-brand>span { font-size:17px; font-weight:780; letter-spacing:-.05em; }
.product-nav { display:flex; align-items:center; gap:7px; padding:4px; border:1px solid rgba(17,26,58,.075); border-radius:999px; background:#f7f4f0; }.product-nav span { padding:6px 12px; color:#7b8298; border-radius:999px; font-size:10px; font-weight:700; }.product-nav .is-current { color:var(--blue); background:#fff; box-shadow:0 3px 9px rgba(45,39,65,.07); }
.household-menu { justify-self:end; display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:11px; font-weight:700; }.household-menu>svg { width:16px; height:16px; }.household-avatars { display:flex; }.household-avatars i { width:27px; height:27px; display:grid; place-items:center; margin-left:-6px; color:#fff; border:2px solid #fff; border-radius:50%; background:var(--blue); font-size:9px; font-style:normal; box-shadow:0 2px 5px rgba(17,26,58,.12); }.household-avatars i:first-child { margin-left:0; }.household-avatars i:nth-child(2) { background:var(--orange); }
.home-canvas { position:relative; min-height:646px; padding:34px 36px 24px; background:linear-gradient(160deg,rgba(255,255,255,.67),rgba(118,85,232,.028) 44%,rgba(240,138,66,.035)); }
.home-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:0 2px 27px; }.product-kicker { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:780; letter-spacing:.11em; text-transform:uppercase; }.home-heading h1 { margin:0; font-size:clamp(27px,2.5vw,38px); font-weight:760; letter-spacing:-.05em; line-height:1.04; }.home-heading h1 em { color:var(--blue); font-style:normal; }.today-summary { min-width:180px; display:grid; gap:7px; padding:10px 13px 11px; border:1px solid rgba(17,26,58,.08); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(44,39,64,.055); }.today-summary>span { display:block; padding-bottom:6px; color:var(--blue); border-bottom:1px solid rgba(49,86,232,.1); font-size:7px; font-weight:800; letter-spacing:.12em; text-align:center; }.today-summary>div { display:grid; grid-template-columns:auto auto; align-items:baseline; justify-content:center; gap:7px; }.today-summary strong { font-size:11px; }.today-summary small { color:#6b748b; font-size:9px; }
.week-ribbon { position:relative; height:150px; display:grid; grid-template-columns:72px 1fr; gap:13px; padding:16px 18px 15px; border:1px solid rgba(17,26,58,.08); border-radius:24px; background:rgba(255,255,255,.77); box-shadow:0 14px 38px rgba(44,39,64,.065); overflow:hidden; }.week-label { display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--line); }.week-label span { color:var(--orange); font-size:9px; font-weight:800; letter-spacing:.14em; }.week-label strong { font-size:23px; letter-spacing:-.05em; white-space:nowrap; }.days { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }.day { position:relative; padding-top:9px; text-align:center; border-radius:14px; background:#f7f5f2; }.day small { display:block; color:#9097a9; font-size:7px; font-weight:780; letter-spacing:.08em; }.day strong { font-size:12px; }.old-slot,.new-slot,.piano-slot { position:absolute; right:5px; bottom:7px; left:5px; display:block; padding:5px 2px; color:#fff; border-radius:7px; font-size:7px; font-weight:780; }.old-slot { background:#a4acc0; transition:opacity 500ms ease; }.new-slot { opacity:0; background:var(--mint); transform:scale(.75); transition:opacity 500ms ease,transform 600ms var(--ease-out); }.piano-slot { background:var(--violet); }
.swim-marker { position:absolute; z-index:3; left:calc(103px + (100% - 121px)*.3571); bottom:15px; display:flex; align-items:center; gap:7px; padding:5px 9px 5px 5px; color:var(--ink); border:1px solid rgba(49,86,232,.12); border-radius:999px; background:#fff; box-shadow:var(--shadow-float); opacity:0; transform:translateX(-50%) translateY(-12px) scale(.96); transition:left 900ms var(--ease-out),opacity 480ms ease,transform 900ms var(--ease-out); }.marker-copy { display:grid; line-height:1.2; white-space:nowrap; }.marker-copy b { font-size:9px; }.marker-copy small { color:#6e7890; font-size:7px; }.product-film[data-step="1"] .swim-marker { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }.product-film[data-step="2"] .swim-marker { left:calc(103px + (100% - 121px)*.5); opacity:1; transform:translateX(-50%) translateY(0) scale(1); }.product-film[data-step="3"] .swim-marker,.product-film[data-step="4"] .swim-marker { left:calc(103px + (100% - 121px)*.5); opacity:0; transform:translateX(-50%) translateY(18px) scale(.9); }.product-film[data-step="2"] .old-slot,.product-film[data-step="3"] .old-slot,.product-film[data-step="4"] .old-slot { opacity:.17; }.product-film[data-step="2"] .new-slot,.product-film[data-step="3"] .new-slot,.product-film[data-step="4"] .new-slot { opacity:1; transform:scale(1); }
.activity-symbol { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:15px; }.activity-symbol svg { width:22px; height:22px; }.swim-symbol { color:#1c64c8; background:#e8f2ff; }.piano-symbol { color:#6540cf; background:#f0ebff; }.swim-marker .activity-symbol { flex-basis:27px; width:27px; height:27px; border-radius:50%; }.swim-marker .activity-symbol svg { width:16px; height:16px; }
.activity-flow { display:grid; grid-template-columns:repeat(2,minmax(340px,1fr)); gap:18px; margin-top:18px; }.activity-detail { min-height:240px; padding:19px 20px; border:1px solid rgba(17,26,58,.08); border-radius:22px; background:rgba(255,255,255,.72); box-shadow:0 10px 30px rgba(44,39,64,.045); }.activity-heading { display:flex; align-items:center; gap:11px; padding-bottom:15px; border-bottom:1px solid rgba(17,26,58,.08); }.activity-heading>div { display:grid; gap:1px; }.activity-heading>div span { color:#7b849b; font-size:8px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; }.activity-heading h2 { margin:0; font-size:19px; letter-spacing:-.035em; }.connection-state,.manual-state { display:flex; align-items:center; gap:6px; margin-left:auto; padding:6px 8px; border-radius:999px; font-size:8px; font-weight:750; white-space:nowrap; }.connection-state { color:#25765e; background:#e5f8f1; }.connection-state i { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(71,198,163,.11); }.manual-state { color:#67588b; background:#f0edfa; }.manual-state i { display:grid; place-items:center; width:14px; height:14px; color:#fff; border-radius:50%; background:var(--violet); font-style:normal; }
.activity-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0 0; }.activity-facts div { min-width:0; }.activity-facts dt { margin-bottom:4px; color:#8b92a5; font-size:7px; font-weight:780; letter-spacing:.08em; text-transform:uppercase; }.activity-facts dd { margin:0; font-size:10px; font-weight:680; line-height:1.28; }
.change-note,.invite-note { min-height:66px; display:flex; align-items:center; gap:10px; margin-top:17px; padding:10px; border-radius:16px; opacity:0; transform:translateY(8px); transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out); }.change-note { border:1px solid rgba(240,138,66,.18); background:#fff5eb; }.notice-icon { flex:0 0 33px; width:33px; height:33px; display:grid; place-items:center; color:#d46925; border-radius:12px; background:#ffe3ce; }.notice-icon svg { width:19px; height:19px; }.change-note>div,.invite-note>div { display:grid; gap:2px; }.change-note strong,.invite-note strong { font-size:9.5px; }.change-note div span,.invite-note div span { color:#727b91; font-size:8px; }.change-status { margin-left:auto; color:#bd682c; font-size:8px; font-weight:780; }
.invite-note { justify-content:space-between; border:1px solid rgba(118,85,232,.14); background:#f7f4ff; }.invite-note button { padding:7px 9px; color:var(--violet); border:1px solid rgba(118,85,232,.16); border-radius:999px; background:#fff; font-size:8px; font-weight:780; white-space:nowrap; }.invite-note button span { margin-left:3px; }
.product-film[data-step="1"] .change-note,.product-film[data-step="2"] .change-note,.product-film[data-step="3"] .change-note,.product-film[data-step="4"] .change-note,.product-film[data-step="4"] .invite-note { opacity:1; transform:none; }
.household-update { min-height:75px; display:grid; grid-template-columns:auto minmax(190px,.8fr) minmax(390px,1.4fr); align-items:center; gap:13px; margin-top:18px; padding:11px 14px; border:1px solid rgba(71,198,163,.16); border-radius:19px; background:linear-gradient(90deg,#f0fbf7,#fffdfa); opacity:0; transform:translateY(10px); transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out); }.product-film[data-step="2"] .household-update,.product-film[data-step="3"] .household-update,.product-film[data-step="4"] .household-update { opacity:1; transform:none; }.update-icon { width:39px; height:39px; display:grid; place-items:center; color:#fff; border-radius:14px; background:var(--mint); box-shadow:0 7px 16px rgba(71,198,163,.2); }.update-icon svg { width:21px; height:21px; }.update-copy { display:grid; gap:2px; }.update-eyebrow { color:#2b8f72; font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.update-copy strong { font-size:10px; }.visibility-flow { display:flex; align-items:center; justify-content:flex-end; gap:8px; }.caregiver { display:grid; grid-template-columns:auto auto auto; align-items:center; column-gap:6px; padding:6px 7px; border:1px solid rgba(17,26,58,.075); border-radius:999px; background:#fff; opacity:.5; transition:opacity 500ms ease,transform 550ms var(--ease-out); }.caregiver>i { grid-row:1/3; width:26px; height:26px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--blue); font-size:8px; font-style:normal; }.caregiver-two>i { background:var(--orange); }.caregiver b { font-size:8px; }.caregiver small { color:#81899e; font-size:7px; }.caregiver em { grid-row:1/3; grid-column:3; width:17px; height:17px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--mint); opacity:0; transform:scale(.5); transition:opacity 400ms ease,transform 500ms var(--ease-out); }.caregiver em svg { width:12px; height:12px; }.reminder-chip { display:flex; align-items:center; gap:5px; padding:8px 9px; color:#7561a5; border-radius:999px; background:#f0ebff; font-size:7px; font-weight:750; opacity:0; transform:translateX(8px); transition:opacity 500ms ease,transform 550ms var(--ease-out); }.reminder-chip svg { width:14px; height:14px; }
.product-film[data-step="3"] .caregiver,.product-film[data-step="4"] .caregiver { opacity:1; transform:translateY(-1px); }.product-film[data-step="3"] .caregiver em,.product-film[data-step="4"] .caregiver em { opacity:1; transform:scale(1); }.product-film[data-step="3"] .reminder-chip,.product-film[data-step="4"] .reminder-chip { opacity:1; transform:none; }
.film-footer { max-width:1330px; min-height:58px; display:grid; grid-template-columns:1fr minmax(180px,360px) 1fr; align-items:center; gap:24px; margin:0 auto; padding:13px 8px 0; }.film-footer p { display:flex; align-items:center; gap:9px; margin:0; color:#626b83; font-size:11px; font-weight:670; }.preview-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(240,138,66,.1); }.film-progress { height:3px; overflow:hidden; border-radius:999px; background:rgba(17,26,58,.1); }.film-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--violet),var(--blue) 53%,var(--orange)); transform:scaleX(0); transform-origin:left; will-change:transform; }.film-controls { justify-self:end; display:flex; align-items:center; gap:8px; }.film-controls>span { margin-right:5px; color:#66708a; font-size:10px; font-weight:650; }.film-controls button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; color:var(--ink); border:1px solid rgba(17,26,58,.1); border-radius:999px; background:rgba(255,253,251,.85); box-shadow:0 5px 14px rgba(44,39,64,.06); cursor:pointer; }[data-film-control] { padding:7px 12px; font-size:10px; font-weight:740; }.film-controls svg { width:15px; height:15px; }.play-icon { display:none; }.is-paused .pause-icon { display:none; }.is-paused .play-icon { display:block; }.replay-button { width:34px; padding:0; }
@media (max-width:1100px) { .home-canvas { padding:30px 26px 22px; }.activity-flow { gap:12px; }.activity-facts { grid-template-columns:1fr 1fr; }.activity-facts div:last-child { display:none; }.household-update { grid-template-columns:auto 1fr; }.visibility-flow { grid-column:1/-1; justify-content:flex-start; padding-left:52px; } }
@media (max-width:820px) { .demo-page { display:block; padding:0; }.product-film { min-height:100vh; padding:12px; border-radius:0; }.product-header { grid-template-columns:1fr auto; }.product-nav { display:none; }.home-canvas { padding:26px 20px 22px; }.activity-flow { display:grid; grid-template-columns:1fr; }.activity-detail { min-height:auto; }.activity-facts { grid-template-columns:repeat(3,1fr); }.activity-facts div:last-child { display:block; }.household-update { margin-top:16px; }.film-footer { grid-template-columns:1fr auto; gap:12px; }.film-progress { grid-column:1/-1; grid-row:2; }.film-controls>span { display:none; } }
@media (max-width:600px) { .product-film { padding:8px; }.product-shell { border-radius:24px; }.product-header { min-height:60px; padding:10px 14px; }.brand-orbit { width:31px; height:31px; }.household-name { display:none; }.home-canvas { padding:24px 14px 20px; }.home-heading { display:block; }.today-summary { width:max-content; margin-top:16px; }.week-ribbon { height:178px; grid-template-columns:48px 1fr; padding:12px 9px; }.week-label strong { font-size:17px; letter-spacing:-.03em; }.days { gap:3px; }.day { border-radius:10px; }.day strong { font-size:10px; }.old-slot,.new-slot,.piano-slot { right:2px; left:2px; padding:4px 1px; font-size:6px; }.swim-marker { left:calc(70px + (100% - 79px)*.3571); bottom:12px; }.product-film[data-step="2"] .swim-marker,.product-film[data-step="3"] .swim-marker,.product-film[data-step="4"] .swim-marker { left:calc(70px + (100% - 79px)*.5); }.marker-copy b { font-size:8px; }.activity-detail { padding:17px 14px; }.activity-facts { grid-template-columns:1fr 1fr; }.activity-facts div:last-child { display:none; }.invite-note { align-items:flex-start; flex-direction:column; }.household-update { grid-template-columns:auto 1fr; padding:11px; }.visibility-flow { grid-column:1/-1; padding-left:0; flex-wrap:wrap; }.film-footer { padding-inline:5px; }.film-footer p { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }.film-progress { display:none; } }