/* FamilyOS AI - "Sunday Morning" design system. One stylesheet owns the whole look.
   Idea: the calm of a family's slow Sunday. Warm paper, soft clay tiles in pastel tints, chunky ink
   buttons that physically press, and sunshine yellow for "you are here" and progress.
   Contrast: ink #1F1A2E on paper #FBF7F1 15.9:1 · muted #5B5470 on white 7.0:1 · white on ink button 15:1
   · sun-deep #7A4E00 on sun-soft #FFF1C2 6.6:1. Motion tokens at the top; reduced motion at the bottom. */

/* ---------- 1. Tokens ---------- */
:root{
  --z:1;
  /* colour */
  --paper:#FBF7F1;--card:#FFFFFF;--ink:#1F1A2E;--ink-2:#5B5470;--ink-3:#8B8499;--line:#ECE4D8;--line-2:#E2D8C8;
  --btn:#2B2346;--btn-hi:#3B3160;--sun:#FFC94D;--sun-soft:#FFF1C2;--sun-deep:#7A4E00;
  --butter:#FFF3C4;--mint:#DCF3E4;--sky:#DDEBFF;--lilac:#EEE5FF;--peach:#FFE6D8;--rose:#FFE1EA;
  --ok:#1F7A45;--ok-soft:#DDF3E5;--bad:#B4302A;--bad-soft:#FDE4E1;
  /* member colours (stored by name in saved profiles, so the names stay) */
  --cyan:#8FD3E8;--gold:#FFC94D;--purple:#B9A2FF;--coral:#FF9A7A;
  /* legacy aliases used inline by older markup */
  --navy:var(--ink);--muted:var(--ink-2);--soft:#F4EEE4;--cream:var(--paper);--azure:var(--btn);--sky-deep:var(--btn);--lav:var(--lilac);
  /* type */
  --display:"Unbounded","Figtree",system-ui,sans-serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:var(--display);
  /* shape */
  --r-xs:10px;--r-sm:14px;--r-md:20px;--r-lg:28px;
  --clay:0 1px 0 rgba(255,255,255,.9) inset,0 -3px 0 rgba(31,26,46,.04) inset,0 1px 2px rgba(31,26,46,.06),0 12px 28px -18px rgba(31,26,46,.35);
  --clay-up:0 1px 0 rgba(255,255,255,.9) inset,0 -3px 0 rgba(31,26,46,.04) inset,0 2px 4px rgba(31,26,46,.06),0 22px 40px -20px rgba(31,26,46,.4);
  --float:0 24px 60px -20px rgba(31,26,46,.45);
  /* motion: exits are faster than entrances; springs only for small, satisfying moments */
  --t-press:110ms;--t-hover:180ms;--t-enter:360ms;--t-exit:180ms;--t-page:420ms;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);min-height:100vh;
  background:radial-gradient(1200px 500px at 50% -200px,#FFEFD2 0,rgba(255,239,210,0) 70%),var(--paper)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px}
::selection{background:var(--sun)}
.skip{position:absolute;inset-inline-start:12px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:12px;transform:translateY(-300%)}.skip:focus{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink-2)}
h1,h2,h3,.ctitle,.brand-name{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(1.7rem,2.6vw,2.4rem)}h2{font-size:1.02rem}h3{font-size:1rem}
.eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.link{color:var(--ink);font-weight:700;font-size:.88rem;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px;transition:text-decoration-color var(--t-hover)}
.link:hover{text-decoration-color:var(--ink)}
.fineprint{font-size:.8rem;color:var(--ink-2);margin-top:12px}
code{font-size:.85em;background:var(--soft);padding:1px 6px;border-radius:6px}
/* glossy candy type for the signature words only */
.lp-hero h1 em{font-style:normal}
.gloss,.lp-hero h1 em .w{font-style:normal;background:linear-gradient(100deg,#6B4FD8 0%,#E2554A 20%,#D97706 36%,#2B2346 58%,#2B2346 100%) 0 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 2.4s var(--ease) .2s both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- 3. App shell: floating top dock ---------- */
/* Big screens: everything scales up together (--z) and the content gets wider, so a 1440p or 4K
   monitor gets a bigger app instead of a small one floating in the middle. Heights divide by --z. */
.app{zoom:var(--z);min-height:calc(100vh / var(--z))}
@media (min-width:1800px){:root{--z:1.12}}@media (min-width:2200px){:root{--z:1.28}}@media (min-width:2800px){:root{--z:1.55}}@media (min-width:3400px){:root{--z:1.9}}
.sidebar{position:sticky;top:12px;z-index:30;margin:12px auto 0;width:min(1880px,calc(100% - 24px));display:flex;align-items:center;gap:16px;padding:8px 10px 8px 12px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(226,216,200,.8);border-radius:22px;box-shadow:0 10px 30px -18px rgba(31,26,46,.35)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:14px;transition:background var(--t-hover)}.brand:hover{background:var(--soft)}
.logo{width:34px;height:34px;flex:none;transition:transform var(--t-enter) var(--spring)}.brand:hover .logo{transform:rotate(-8deg) scale(1.06)}
.brand-name{font-size:1rem;white-space:nowrap}.brand-name b{font-weight:700;background:var(--sun);padding:1px 6px;border-radius:7px;margin-left:2px}
#nav{position:relative;display:flex;gap:2px;margin:0 auto}
.ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:14px;background:var(--sun);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(122,78,0,.12);
  transition:transform var(--t-page) var(--spring),width var(--t-enter) var(--ease),height var(--t-enter) var(--ease),opacity var(--t-hover);pointer-events:none;z-index:0}
.nav-btn{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 14px;min-height:42px;border-radius:14px;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:color var(--t-hover),background var(--t-hover)}
.nav-btn svg{width:19px;height:19px;flex:none;transition:transform var(--t-enter) var(--spring)}
.nav-btn:not([aria-current]):hover{color:var(--ink);background:rgba(31,26,46,.05)}.nav-btn:hover svg{transform:translateY(-1px) scale(1.08)}
.nav-btn[aria-current="page"]{color:var(--ink)}
.demo-note{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--ink-2);white-space:nowrap;padding:6px 10px;border-radius:10px;background:var(--soft);cursor:help}
.demo-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
main{display:block;width:min(1880px,100%);margin:0 auto;padding:22px clamp(14px,2.4vw,40px) 48px;outline:none}

/* ---------- 4. Controls ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:14px;font-weight:700;font-size:.95rem;
  color:#fff;background:var(--btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 #120E22,0 10px 18px -10px rgba(31,26,46,.6);
  transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease),background var(--t-hover);overflow:hidden;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{background:var(--btn-hi);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 0 #120E22,0 14px 22px -10px rgba(31,26,46,.6)}.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 #120E22,0 4px 8px -6px rgba(31,26,46,.6)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.sm{min-height:36px;padding:7px 14px;font-size:.86rem;border-radius:12px}
.btn.soft,.btn.line,.btn.white{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2),0 4px 0 var(--line-2)}
.btn.soft:hover,.btn.line:hover,.btn.white:hover{background:var(--butter);box-shadow:inset 0 0 0 1.5px #E8D49A,0 5px 0 #E8D49A}
.btn.soft:active,.btn.line:active,.btn.white:active{box-shadow:inset 0 0 0 1.5px #E8D49A,0 0 0 #E8D49A}
.btn.send{width:42px;height:42px;min-height:0;padding:0;border-radius:12px;flex:none}.btn.send svg{width:18px;height:18px}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:12px;font-weight:600;font-size:.88rem;background:#fff;border:1.5px solid var(--line-2);
  transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-press) var(--ease)}
.ghost:hover{background:var(--soft);border-color:#D6C9B4}.ghost:active{transform:scale(.96)}.ghost[aria-pressed="true"]{background:var(--sun-soft);border-color:#E8C960}
.ghost:disabled{opacity:.5;cursor:not-allowed}
.danger{min-height:36px;padding:6px 14px;border-radius:12px;font-weight:700;color:var(--bad);border:1.5px solid #F2C6C1;transition:background var(--t-hover)}.danger:hover{background:var(--bad-soft)}
/* segmented controls get a sliding thumb (added by app.js) */
.seg{position:relative;display:inline-flex;gap:2px;padding:4px;background:#F1EADF;border-radius:14px;box-shadow:inset 0 1px 2px rgba(31,26,46,.08)}
.seg button{position:relative;z-index:1;min-height:34px;padding:6px 16px;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--ink-2);transition:color var(--t-hover)}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .thumb{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(31,26,46,.12),0 4px 10px -6px rgba(31,26,46,.3);transition:transform var(--t-enter) var(--spring),width var(--t-enter) var(--ease)}
.seg:not(.has-thumb) button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(31,26,46,.12)}
.tabs{margin-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 5px;border-radius:999px;background:#fff;border:1.5px solid var(--line-2);font-weight:600;font-size:.88rem;transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-press)}
.fchip:first-child,.fchip:not(:has(.avatar)){padding-left:14px}.fchip small{color:var(--ink-3);font-weight:500}
.fchip:hover{border-color:#D6C9B4}.fchip:active{transform:scale(.96)}.fchip .avatar{width:26px;height:26px;font-size:.66rem}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.fchip[aria-pressed="true"] small{color:#CFC8E0}
.pillbadge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--ink-2)}
.pillbadge.live{background:var(--ok-soft);color:var(--ok)}.pillbadge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.status{margin-left:auto;flex:none;align-self:center;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px}
.status.up{background:var(--sun-soft);color:var(--sun-deep)}.status.today{background:var(--ok-soft);color:var(--ok)}.status.past{background:var(--soft);color:var(--ink-2)}.status.late{background:var(--bad-soft);color:var(--bad)}
.pts{display:inline-block;font-size:.76rem;font-weight:800;color:var(--sun-deep);background:var(--sun-soft);padding:2px 9px;border-radius:999px;white-space:nowrap}
.tag{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:1px}
/* avatars: glossy candy tiles */
.avatar{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;font-weight:800;font-size:.78rem;color:var(--ink);overflow:hidden;
  box-shadow:inset 0 -3px 0 rgba(31,26,46,.12),inset 0 2px 0 rgba(255,255,255,.55),0 2px 6px -2px rgba(31,26,46,.35)}
.avatar::after{content:"";position:absolute;left:12%;right:12%;top:6%;height:38%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));pointer-events:none}
.avatar.sm{width:30px;height:30px;border-radius:10px;font-size:.68rem}.avatar.xs{width:22px;height:22px;border-radius:7px;font-size:.56rem}.avatar.xl{width:60px;height:60px;border-radius:19px;font-size:1.15rem}
.avatar.all{background:var(--sky);color:var(--ink)}
.pearls{display:flex}.pearls .avatar{margin-left:-8px;border:2.5px solid var(--paper);width:36px;height:36px;transition:transform var(--t-enter) var(--spring)}.pearls .avatar:first-child{margin-left:0}.pearls .avatar:hover{transform:translateY(-4px) rotate(-6deg);z-index:1}
.pearls.lg .avatar{width:44px;height:44px;border-color:#fff}
.who-tag{display:inline-flex;align-items:center;gap:6px}
/* checkbox rows */
.task{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:7px 8px;border-radius:12px;text-align:left;transition:background var(--t-hover)}
.task:hover{background:var(--soft)}.task .t{flex:1;min-width:0;background:linear-gradient(var(--ink-2),var(--ink-2)) 0 55%/0 1.5px no-repeat;transition:background-size var(--t-enter) var(--ease),color var(--t-hover)}
.task .who{font-size:.8rem;color:var(--ink-3);margin-left:auto}
.box{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:8px;border:2px solid #CFC4B2;background:#fff;color:#fff;font-size:.8rem;font-weight:900;transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-enter) var(--spring)}
.task:hover .box{border-color:var(--ink)}
.task[aria-pressed="true"] .box{background:var(--ok);border-color:var(--ok);transform:scale(1.1) rotate(-6deg)}
.task[aria-pressed="true"] .t{color:var(--ink-3);background-size:100% 1.5px}
/* progress */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.ring{--p:0;position:relative;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -90deg,#FFB547,#FF7A59 calc(var(--p)*1%),#EFE7DA 0);animation:ring .8s var(--ease) both}
.ring span{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.78rem;box-shadow:inset 0 1px 3px rgba(31,26,46,.1)}
@keyframes ring{from{--p:var(--from,0)}}
.bar{height:10px;border-radius:99px;background:#EFE7DA;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#FFB547,#FF7A59);animation:grow .9s var(--ease) both}
@keyframes grow{from{width:0}}
.note{background:var(--sky);border-radius:var(--r-sm);padding:10px 14px;font-size:.86rem;margin-bottom:12px}.note.warn{background:var(--bad-soft);color:var(--bad)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 16px;border-radius:var(--r-md);background:repeating-linear-gradient(-45deg,#fff 0 10px,#FDFAF5 10px 20px);border:2px dashed var(--line-2)}
.empty b{font-family:var(--display);font-weight:600;font-size:.95rem}.empty p{margin:0 0 10px;font-size:.9rem;max-width:36ch}
.skel{min-height:260px;background:linear-gradient(100deg,#F4EEE4 30%,#fff 50%,#F4EEE4 70%) 0 0/220% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-220% 0}}
.err{display:block;color:var(--bad);font-size:.8rem;font-weight:600;min-height:0}
/* form fields */
dialog label,.mform label{display:block;font-weight:700;font-size:.84rem;margin-bottom:12px;flex:1}
dialog input:not([type=checkbox]):not([type=radio]),dialog textarea,dialog select,.mform input:not([type=checkbox]),.mform textarea,.mform select{display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line-2);background:#FDFBF7;transition:border-color var(--t-hover),box-shadow var(--t-hover),background var(--t-hover)}
dialog input:focus,dialog textarea:focus,dialog select:focus,.mform input:focus,.mform textarea:focus,.mform select:focus{outline:none;background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,201,77,.45)}
dialog small,.mform small,.chk small{display:block;font-weight:500;color:var(--ink-2);margin-top:4px;font-size:.78rem}
.chk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:.88rem;margin-bottom:10px}.chk input{width:20px;height:20px;margin:0;accent-color:var(--btn)}
.row,.mrow{display:flex;gap:12px}
.actions{display:flex;align-items:center;gap:8px;margin-top:8px}.sp{flex:1}
.swatches{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.swatches legend{width:100%;font-weight:700;font-size:.84rem;margin-bottom:8px}
dialog .sw{position:relative;margin:0;flex:none}.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.sw .dot{display:block;width:40px;height:40px;border-radius:13px;box-shadow:inset 0 -3px 0 rgba(31,26,46,.12);transition:transform var(--t-enter) var(--spring),box-shadow var(--t-hover)}
.sw:hover .dot{transform:scale(1.08) rotate(-4deg)}.sw input:checked+.dot{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}.sw input:focus-visible+.dot{outline:3px solid var(--ink);outline-offset:6px}
/* dialogs: sheets that spring in and leave quickly */
dialog{zoom:var(--z);margin:auto;width:min(520px,calc(94vw / var(--z)));max-height:calc(90vh / var(--z));overflow:auto;border:0;border-radius:24px;padding:22px 22px 18px;background:#fff;color:var(--ink);box-shadow:var(--float)}
dialog h2{font-size:1.2rem;margin-bottom:12px}
dialog::backdrop{background:rgba(31,26,46,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog[open]{animation:sheetIn var(--t-enter) var(--spring)}dialog[open]::backdrop{animation:fadeIn var(--t-enter) var(--ease)}
dialog.closing{animation:sheetOut var(--t-exit) var(--ease-in) forwards}dialog.closing::backdrop{animation:fadeOut var(--t-exit) var(--ease-in) forwards}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes sheetOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}
#toast{position:fixed;left:50%;bottom:28px;z-index:60;max-width:min(92vw,calc(520px * var(--z)));padding:calc(12px * var(--z)) calc(18px * var(--z));font-size:calc(1rem * var(--z));border-radius:16px;background:var(--ink);color:#fff;font-weight:600;box-shadow:var(--float);
  opacity:0;transform:translate(-50%,24px) scale(.96);pointer-events:none;transition:opacity var(--t-exit) var(--ease-in),transform var(--t-exit) var(--ease-in)}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1);transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--spring)}
/* celebration confetti */
.pbit{position:fixed;width:9px;height:9px;margin:-4px;border-radius:2px;background:var(--c);pointer-events:none;z-index:99;animation:pbit .8s var(--ease) forwards}
.pbit:nth-child(odd){border-radius:50%}
@keyframes pbit{to{transform:translate(var(--dx),var(--dy)) rotate(260deg) scale(.4);opacity:0}}

/* ---------- 5. Surfaces ---------- */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--clay)}
button.card,.rcard,.pcard,.feat-card{transition:transform var(--t-enter) var(--spring),box-shadow var(--t-enter) var(--ease)}
button.card:hover,.rcard:hover,.pcard:hover,.feat-card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:var(--clay-up)}
button.card:active,.feat-card:active{transform:translateY(-1px) scale(.99)}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.cal-head h2{margin:0}
.hd-act{display:flex;gap:14px;align-items:center}
.grp{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 4px}
.nothing{font-size:.88rem;padding:4px 0 4px 34px}
.page-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}.page-top p{margin-top:4px;font-size:.95rem}
.pt-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- 6. Dashboard ---------- */
.dh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:16px}
.dh h1{font-size:clamp(1.8rem,3.2vw,2.9rem);margin:6px 0 6px;max-width:22ch}.dh p{color:var(--ink-2);max-width:68ch}
.dh-act{display:flex;align-items:center;gap:10px}
.daystrip{padding:12px 18px 8px;background:linear-gradient(180deg,#FFFDF8,#FFF7E3);border-color:#F3E3B8}
.ds-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.84rem}.ds-head b{font-family:var(--display);font-weight:600;font-size:1rem}
.ds-scroll{overflow-x:auto;scrollbar-width:thin}.ds-track{position:relative;min-width:640px;height:92px;margin:0 22px}
.ds-line{position:absolute;left:0;right:0;top:40px;height:6px;border-radius:6px;background:linear-gradient(90deg,#FFE6A6,#FFC94D 50%,#FF9A7A);opacity:.55}
.ds-tick{position:absolute;bottom:0;transform:translateX(-50%);font-size:.7rem;font-weight:600;color:var(--ink-3)}
.ds-now{position:absolute;top:20px;bottom:20px;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--ink)}
.ds-now::before{content:"Now";position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:800;letter-spacing:.06em;background:var(--ink);color:#fff;padding:1px 6px;border-radius:6px}
.bead{position:absolute;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:250px;padding:4px 12px 4px 4px;border-radius:12px;background:#fff;border:1.5px solid var(--line-2);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 3px 0 var(--line-2);z-index:1;transition:transform var(--t-enter) var(--spring),box-shadow var(--t-hover)}
.bead.l0{top:4px}.bead.l1{top:50px}.bead:hover{transform:translateX(-50%) translateY(-3px);box-shadow:0 6px 0 var(--line-2);z-index:2}.bead.past{opacity:.5}
.dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:14px;
  grid-template-areas:"ev ev ev ev ev ai ai ai ai cal cal cal" "ev ev ev ev ev ch ch ch ch fam fam fam" "ev ev ev ev ev me me me me fam fam fam"}
.dgrid>*{min-width:0}.p-ev{grid-area:ev}.p-ch{grid-area:ch}.p-cal{grid-area:cal}.p-me{grid-area:me}.p-ai{grid-area:ai}.p-fam{grid-area:fam}
.p-ch,.p-me,.p-cal,.p-fam{display:flex;flex-direction:column}.p-me .empty,.p-ch .empty{flex:1;justify-content:center}
.p-ch{background:linear-gradient(180deg,#fff,#F7FCF9);border-color:#D8EEDF}.p-me{background:linear-gradient(180deg,#fff,#FFF6F0);border-color:#F6DCCB}.p-cal{background:linear-gradient(180deg,#fff,#F7F4FF);border-color:#E3DAF7}
.event{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 8px;border-radius:14px;transition:background var(--t-hover)}button.event:hover{background:var(--soft)}
.date{width:46px;flex:none;text-align:center;border-radius:12px;padding:4px 0;background:var(--soft)}.date b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.1}.date span{font-size:.7rem;color:var(--ink-2)}
.ev-main{flex:1;min-width:0}.ev-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ev-main .muted{font-size:.84rem}
.tl .event{position:relative;padding-left:34px}.tl .event::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--line)}
.tl .event::after{content:"";position:absolute;left:6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:5px;background:#fff;border:3px solid var(--ink);transition:transform var(--t-enter) var(--spring),background var(--t-hover)}
.tl button.event:hover::after{transform:rotate(45deg) scale(1.15);background:var(--sun)}
.nextup{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;text-align:left;padding:14px 16px;border-radius:var(--r-md);background:var(--butter);border:1px solid #F1DF9E;margin-bottom:4px;transition:transform var(--t-enter) var(--spring)}
.nextup:hover{transform:translateY(-2px)}.nextup .eyebrow{width:100%;color:var(--sun-deep)}.nextup b{flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:1.1rem}
.tasks-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.cal .dow{font-size:.7rem;font-weight:700;color:var(--ink-3);padding-bottom:4px}
.cal .d{position:relative;display:grid;place-items:center;height:30px;border-radius:9px;font-size:.82rem;font-weight:600}
.cal .d.has{background:var(--lilac)}.cal .d.has::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--dot)}
.cal .d.today{background:var(--ink);color:#fff}.cal .d.today::after{background:var(--sun)}
.meals{display:flex;flex-direction:column;gap:8px}
.meal{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #F3DED0;transition:transform var(--t-enter) var(--spring)}
button.meal{width:100%;text-align:left}button.meal:hover{transform:translateX(4px)}.meal small{display:block;color:var(--ink-2);font-size:.76rem}.meal .cost{font-weight:700;white-space:nowrap;font-size:.86rem}
.frow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}.frow:first-of-type{border-top:0}.frow>div{flex:1;min-width:0}
.frow b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frow small{display:block;color:var(--ink-2);font-size:.78rem}.frow .muted{font-size:.8rem;white-space:nowrap}
/* ask panel */
.ask{display:flex;flex-direction:column;gap:12px;background:radial-gradient(260px 140px at 100% 0,#FFE9B0,rgba(255,233,176,0) 70%),linear-gradient(180deg,#fff,#FFFBF0);border-color:#F3E3B8}
.ask-h{display:flex;align-items:center;gap:10px}.ask-h h2{font-size:1.05rem}.ask-h small{color:var(--ink-2);font-size:.8rem}
.ask-f,.composer{display:flex;align-items:flex-end;gap:8px;background:#fff;border:1.5px solid var(--line-2);border-radius:16px;padding:5px 5px 5px 14px;transition:border-color var(--t-hover),box-shadow var(--t-hover)}
.ask-f:focus-within,.composer:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,201,77,.45)}
.ask-f input,.composer textarea{flex:1;min-width:0;border:0;background:none;padding:9px 0;line-height:1.45;resize:none}.ask-f input:focus,.composer textarea:focus{outline:none}
.sugs{display:flex;flex-wrap:wrap;gap:6px}.sugs.col{flex-direction:column;align-items:stretch}
.sug{font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line-2);text-align:left;transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-enter) var(--spring)}
.sug:hover{background:var(--sun-soft);border-color:#E8C960;transform:translateY(-2px)}.sug:active{transform:scale(.97)}
/* the assistant's mark: a small sun */
.mark{width:32px;height:32px;flex:none;border-radius:11px;background:radial-gradient(circle at 50% 55%,#FFE08A 0 30%,#FFB547 31% 46%,transparent 47%),var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 3px 8px -3px rgba(31,26,46,.5)}
.mark.lg{width:50px;height:50px;border-radius:16px}

/* ---------- 7. Welcome page ---------- */
body.landing .sidebar{display:none}
.lp-top{display:flex;justify-content:space-between;align-items:center;padding:6px 0 0}
.lp-top .brand-name{font-size:1.1rem}
.lp-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(28px,7vh,80px) 0 clamp(28px,6vh,64px)}
.lp-copy{display:flex;flex-direction:column;gap:20px}
.lp-hero h1{font-size:clamp(2.5rem,6vw,5.4rem);line-height:.98;letter-spacing:-.04em;max-width:14ch}
.lp-hero h1 .w{display:inline-block;animation:wordUp .7s var(--ease) both;animation-delay:calc(var(--i)*55ms + 80ms)}
@keyframes wordUp{from{opacity:0;transform:translateY(.45em) rotate(2deg)}}
.lp-hero p{font-size:1.12rem;max-width:46ch}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap}
.lp-today{padding:20px;background:linear-gradient(160deg,#fff,#FFF5DA);border-color:#F3E3B8;transform:rotate(1.2deg);animation:cardIn .8s var(--spring) .35s both}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) rotate(4deg)}}
.lp-today ul{list-style:none;padding:0;margin:14px 0 0}.lp-today li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px dashed var(--line-2)}
.lp-today li b{font-family:var(--display);font-size:1.7rem;min-width:30px}.lp-today li span{color:var(--ink-2);font-size:.92rem}
.lp-sec{padding:20px 0 32px}.lp-sec h2{font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.035em;max-width:20ch;margin:8px 0 22px}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feat-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:20px}
.feat-card svg{width:44px;height:44px;padding:10px;border-radius:14px;background:var(--c,var(--butter));color:var(--ink)}
.feat-card:nth-child(1){--c:var(--sky)}.feat-card:nth-child(2){--c:var(--peach)}.feat-card:nth-child(3){--c:var(--mint)}.feat-card:nth-child(4){--c:var(--sun-soft)}
.feat-card h3{font-size:1.05rem;margin-top:6px}.feat-card .muted{font-size:.92rem}
.lp-foot{color:var(--ink-2);font-size:.86rem;padding:8px 0 24px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}

/* ---------- 8. Schedule ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px}
.navs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.navs .ghost{min-width:40px;font-size:1.1rem}
.ctitle{font-size:1.25rem;margin-left:8px}
.calwrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
.calbody{padding:12px}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mdow{text-align:center;font-size:.74rem;font-weight:700;color:var(--ink-3);padding:4px 0}
.mcell{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:clamp(72px,10vh,112px);padding:5px;border-radius:14px;background:#FDFBF7;border:1px solid var(--line);cursor:pointer;transition:background var(--t-hover),border-color var(--t-hover)}
.mcell:hover{background:var(--butter);border-color:#F1DF9E}.mcell.out{opacity:.45}
.mcell.today{background:#fff;border:2px solid var(--ink)}.mcell.today .mnum{background:var(--ink);color:#fff}
.mnum{align-self:flex-start;width:26px;height:26px;border-radius:9px;font-size:.8rem;font-weight:700;display:grid;place-items:center;transition:background var(--t-hover)}.mnum:hover{background:var(--sun)}
.pill{display:block;width:100%;text-align:left;font-size:.74rem;font-weight:600;padding:3px 7px;border-radius:8px;background:color-mix(in srgb,var(--c) 30%,#fff);border-left:3px solid var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform var(--t-enter) var(--spring)}
.pill:hover{transform:translateX(3px)}.mgrid .pill b{display:none}
.more{font-size:.74rem;font-weight:700;text-align:left;padding-left:4px}
.calbody .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wcol{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:200px;padding:8px;border-radius:16px;background:#FDFBF7;border:1px solid var(--line)}.wcol.today{background:var(--butter);border-color:#F1DF9E}
.wcol header button{font-weight:800;font-size:.88rem}.wcol .pill{white-space:normal}.wcol .pill b{display:inline}
.evc{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;margin-bottom:10px;border-radius:18px;background:color-mix(in srgb,var(--c) 18%,#fff);border-left:6px solid var(--c)}
.evc-time{min-width:78px;font-weight:800}.evc-time small{display:block;font-weight:500;color:var(--ink-2)}.evc-body{flex:1;min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:.8rem;color:var(--ink-2)}
.side h2{margin-bottom:8px}
.srow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 6px;border-radius:12px;border-top:1px solid var(--line);transition:background var(--t-hover)}.srow:first-of-type{border-top:0}.srow:hover{background:var(--soft)}
.sd{width:42px;flex:none;text-align:center;padding:3px 0;border-radius:10px;font-size:.66rem;color:var(--ink-2);background:color-mix(in srgb,var(--c) 30%,#fff)}.sd b{display:block;font-family:var(--display);font-size:1rem;color:var(--ink);line-height:1.15}
.st{flex:1;min-width:0}.st b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.88rem}.st small{font-size:.75rem}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:.84rem;color:var(--ink-2)}
body[data-dir="next"] .calbody>*{animation:slideL var(--t-enter) var(--ease)}body[data-dir="prev"] .calbody>*{animation:slideR var(--t-enter) var(--ease)}
@keyframes slideL{from{opacity:0;transform:translateX(24px)}}@keyframes slideR{from{opacity:0;transform:translateX(-24px)}}

/* ---------- 9. Family ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pcard{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px}.pcard>div:nth-child(2){flex:1;min-width:0}.pcard h3{font-size:1.02rem;margin-bottom:6px;overflow-wrap:anywhere}.pcard .muted{font-size:.84rem;margin-top:6px}
.pc-act{display:flex;gap:8px}.pcard .pc-act{width:100%;padding-top:12px;border-top:1px dashed var(--line-2)}.pcard .pc-act>*{flex:1}
.sample{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;background:repeating-linear-gradient(-45deg,#fff 0 12px,#FFFCF4 12px 24px)}
.sample>div:first-child{flex:1;min-width:240px}.sample h2{margin-bottom:4px}.sample p{font-size:.88rem}.sample .pc-act{flex-direction:row;flex-wrap:wrap}

/* ---------- 10. Meals ---------- */
.mlayout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;align-items:start}
.mform h2{margin-bottom:12px}.mform .btn{width:100%}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rcard{display:flex;flex-direction:column;padding:0;overflow:hidden}
.rimg{height:64px;display:flex;justify-content:space-between;align-items:flex-end;padding:10px 14px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rimg b{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em;text-transform:none;color:var(--ink);line-height:1}.rimg small{font-size:.78rem;font-weight:700;color:var(--ink-2)}
.m-breakfast{background:var(--butter)}.m-lunch{background:var(--mint)}.m-dinner{background:var(--peach)}
.rbody{display:flex;flex-direction:column;gap:7px;flex:1;padding:14px 16px 16px}.rbody h3{font-size:1rem}.rbody .muted{font-size:.88rem}
.rmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--ink-2)}
.ract{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.wkp{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.dday{display:grid;gap:10px;max-width:540px}
.dcol{display:flex;flex-direction:column;gap:7px;min-width:0;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--clay)}
.dcol.today{border:2px solid var(--ink)}.dcol header b{font-family:var(--display);font-weight:600;font-size:.88rem}
.slot{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:12px;text-align:left;font-size:.84rem}
.slot small{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.slot.add{border:2px dashed var(--line-2);color:var(--ink-2);font-weight:600;transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-enter) var(--spring)}
.slot.add:hover{background:var(--butter);border-color:#E8C960;color:var(--ink);transform:translateY(-2px)}
.slot.filled{background:var(--peach);animation:popIn var(--t-enter) var(--spring) both}
.slotname{font-weight:800;text-align:left;overflow-wrap:anywhere}.slotname:hover{text-decoration:underline}
.slot-act{display:flex;gap:12px;margin-top:4px}.slot-act .link{font-size:.78rem}
@keyframes popIn{from{opacity:0;transform:scale(.92)}}
.glist,.ings{list-style:none;padding:0}
.grow{display:flex;align-items:center;gap:8px;animation:rise var(--t-enter) var(--ease) both}.grow .task{flex:1}
.ings li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.have{font-size:.72rem;font-weight:800;padding:2px 10px;border-radius:999px;white-space:nowrap}.have.y{background:var(--ok-soft);color:var(--ok)}.have.n{background:var(--soft);color:var(--ink-2)}
.rdet h3{margin:18px 0 6px}.rdet ol{padding-left:20px}.rdet li{margin-bottom:6px}.rdet .ings li{margin:0}
dialog .ings select{width:auto;margin:0}dialog button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 11. Chores ---------- */
.cstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.cs{display:flex;align-items:center;gap:10px;padding:12px 16px}.cs b{font-family:var(--display);font-weight:700;font-size:1.8rem;line-height:1}.cs span{font-size:.84rem;color:var(--ink-2)}
.cstats .cs:nth-child(1){background:var(--sky)}.cstats .cs:nth-child(2){background:var(--butter)}.cstats .cs:nth-child(3){background:var(--mint)}.cstats .cs:nth-child(4){background:#fff}
.cs.bad{background:var(--bad-soft)!important;border-color:#F2C6C1}.cs.bad b{color:var(--bad)}
.cs.wk .ring{width:46px;height:46px}.cs.wk .ring span{width:35px;height:35px;font-size:.66rem}.cs.wk span:last-child{font-size:.8rem}
.clist{display:flex;flex-direction:column;gap:10px}
.chore{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;transition:transform var(--t-enter) var(--spring),background var(--t-hover)}
.chore:hover{transform:translateX(3px)}.ch-main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:220px}.ch-t{min-width:0}.ch-t p{font-size:.86rem}
.ch-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chore.done{background:#FAFDFB}.chore.done .ch-t b{color:var(--ink-3);text-decoration:line-through}
.chore.pop{animation:cpop .7s var(--spring)}
@keyframes cpop{0%{transform:scale(1)}35%{transform:scale(1.025);background:var(--ok-soft)}100%{transform:scale(1)}}
.wgrid,.bals{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.member{display:flex;align-items:center;gap:12px}.member small{display:block;color:var(--ink-2)}
.wstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0;text-align:center}.wstats b{display:block;font-family:var(--display);font-size:1.3rem}.wstats span{font-size:.7rem;color:var(--ink-2)}
.bal{display:flex;align-items:center;gap:12px;padding:14px 16px}.bal b{display:block;font-family:var(--display);font-size:1.3rem}
.rw{display:flex;flex-direction:column;gap:10px}.rw h3{font-size:1rem}.rw .pts{align-self:flex-start}
ul.glist.card{padding:6px 18px}
.hrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.hrow:first-child{border-top:0}.hrow span:nth-of-type(1){flex:1}
.hrow .posv{color:var(--ok)}.hrow .neg{color:var(--bad)}

/* ---------- 12. Assistant ---------- */
.alayout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
.chat{display:flex;flex-direction:column;padding:0;overflow:hidden;height:calc(100vh / var(--z) - 190px);min-height:460px}
.msgs{list-style:none;flex:1;overflow-y:auto;padding:20px 22px 10px;margin:0;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.msg{display:flex;gap:10px;max-width:780px;animation:rise var(--t-enter) var(--ease) both}
.msg.u{align-self:flex-end;max-width:min(560px,85%)}.msg.u .bub{background:var(--ink);color:#fff;padding:10px 15px;border-radius:18px 18px 6px 18px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 3px 0 #120E22}
.msg .mbody{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rtext{font-size:.96rem;line-height:1.6}.rtext p{margin:0 0 8px}.rtext ul{margin:0 0 8px;padding-left:18px}.rtext li{margin:3px 0}.rtext li::marker{color:#FF9A3D}.rtext>:last-child{margin-bottom:0}
.mtag{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:7px;background:var(--soft);color:var(--ink-2)}.mtag.ai{background:var(--sun-soft);color:var(--sun-deep)}
.msg.err .mbody p{margin:0;color:var(--bad)}
.props{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px}
.prop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:11px 13px;border-radius:16px;background:#fff;border:1.5px solid var(--line-2);box-shadow:0 3px 0 var(--line-2);animation:popIn var(--t-enter) var(--spring) both;transition:opacity var(--t-hover),background var(--t-hover)}
.prop.added{background:var(--ok-soft);border-color:#B9E2C8;box-shadow:0 3px 0 #B9E2C8}.prop.dismissed,.prop.edited{opacity:.55}
.prop-k{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:7px;background:var(--sky)}
.prop-b{flex:1;min-width:160px}.prop-b b{display:block}.prop-b small{color:var(--ink-2)}
.prop-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.prop-a .btn,.prop-a .ghost{white-space:nowrap}.prop-done{font-weight:800;font-size:.84rem;color:var(--ok)}
.typing .mbody{flex-direction:row;align-items:center;gap:10px}
.dots{display:inline-flex;gap:5px}.dots i{width:9px;height:9px;border-radius:3px;background:var(--sun);animation:hop 1s var(--ease) infinite}.dots i:nth-child(2){animation-delay:.15s;background:#FFB547}.dots i:nth-child(3){animation-delay:.3s;background:#FF9A7A}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-6px) rotate(45deg)}}
.intro{display:flex;gap:14px;align-items:flex-start;padding:4px 0}.intro h2{font-size:1.3rem;margin-bottom:6px}.intro .muted{max-width:60ch;margin-bottom:14px}
.composer{margin:8px 14px 14px}
.arail{display:flex;flex-direction:column;gap:14px}.arail h2{font-size:.98rem;margin-bottom:6px}
.seen{list-style:none;padding:0}.seen li{padding:6px 0;border-top:1px solid var(--line);font-size:.9rem}.seen li:first-child{border-top:0}.seen b{font-family:var(--display);margin-right:4px}
.disclose summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{content:"+";font-family:var(--display);font-size:1.2rem;transition:transform var(--t-enter) var(--spring)}.disclose[open] summary::after{transform:rotate(45deg)}
.disclose p{font-size:.86rem;margin-top:6px}

/* ---------- 13. Page motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
main.anim .page-top,main.anim .dh,main.anim .card,main.anim .panel,main.anim .seg,main.anim .filters{animation:rise var(--t-enter) var(--ease) both;animation-delay:calc(var(--i,0)*35ms)}

/* ---------- 14. Responsive ---------- */
@media (max-width:1280px){.demo-note{display:none}}
@media (max-width:1180px){
  .dgrid{grid-template-areas:"ai ai ai ai ai ai ai ai ai ai ai ai" "ev ev ev ev ev ev ch ch ch ch ch ch" "ev ev ev ev ev ev me me me me me me" "cal cal cal cal cal cal fam fam fam fam fam fam"}
  .calwrap,.mlayout,.alayout{grid-template-columns:1fr}.arail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.chat{height:calc(100vh / var(--z) - 240px)}
  .cstats{grid-template-columns:repeat(3,minmax(0,1fr))}.feat{grid-template-columns:repeat(2,minmax(0,1fr))}.wkp{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav-btn{padding:9px 11px}}
@media (max-width:980px){.nav-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.nav-btn{padding:10px 12px}}
@media (max-width:900px){
  body{padding-bottom:92px}
  .sidebar{position:fixed;top:auto;bottom:10px;left:10px;right:10px;width:auto;margin:0;padding:6px;border-radius:24px;background:rgba(255,255,255,.92);box-shadow:var(--float)}
  .brand,.demo-note{display:none}#nav{width:100%;justify-content:space-between}
  .nav-btn{flex:1;flex-direction:column;gap:2px;min-height:54px;padding:6px 2px;font-size:.66rem;justify-content:center}
  .nav-btn span{position:static;width:auto;height:auto;clip:auto;overflow:visible}.ind{border-radius:18px}
  main{padding-top:16px}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ai ai" "ev ch" "ev me" "cal fam"}
  .lp-hero{grid-template-columns:1fr}.lp-today{transform:none}
  .calbody .wk{grid-template-columns:1fr}.wcol{min-height:0}.chat{height:calc(100dvh - 250px);min-height:380px}.msgs{padding:14px 12px 8px}.composer{margin:6px 8px 8px}.arail{grid-template-columns:1fr}
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:26px 26px 0 0;max-height:92vh;padding:24px 16px 18px}
  dialog::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:-12px auto 12px}
  dialog[open]{animation:sheetUp var(--t-enter) var(--ease)}dialog.closing{animation:sheetDown var(--t-exit) var(--ease-in) forwards}
  .row,.mrow{flex-direction:column;gap:0}}
@keyframes sheetUp{from{transform:translateY(100%)}}@keyframes sheetDown{to{transform:translateY(100%)}}
@media (max-width:600px){
  .dgrid{grid-template-columns:1fr;grid-template-areas:"ev" "ai" "ch" "me" "cal" "fam"}
  .dh-act{width:100%}.dh-act .btn{flex:1}.dh-act .pearls{display:none}
  .cstats{grid-template-columns:repeat(2,minmax(0,1fr))}.cs.wk{grid-column:span 2}.feat{grid-template-columns:1fr}.wkp{grid-template-columns:1fr}
  .mcell{min-height:58px;padding:3px}.mgrid .pill{font-size:0;height:6px;padding:0;border-left:0;background:var(--c)}.more{font-size:.66rem}
  .evc{flex-direction:column;gap:6px}.msg.u{max-width:92%}.prop-a{width:100%}.prop-a .btn,.prop-a .ghost{flex:1}
  .dgrid .status.up,.dgrid .status.today{display:none}.nextup b{flex-basis:100%}.ev-main b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.sample .pc-act{width:100%}.sample .pc-act>*{flex:1}}
@media (pointer:coarse){.ghost,.fchip,.seg button,.task,.srow,.sug,.link{min-height:44px}}
@media (prefers-reduced-transparency:reduce){.sidebar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}}
.rgrid>.empty,.rgrid>p,.wgrid>.empty{grid-column:1/-1}
/* welcome page fills the screen: hero is one full viewport, "What's inside" is the next */
.lp{display:flex;flex-direction:column}
.lp-hero{min-height:calc(100vh / var(--z) - 120px)}
.lp-sec{min-height:calc(100vh / var(--z));display:flex;flex-direction:column;justify-content:center;scroll-margin-top:20px;padding:40px 0}
.lp-sec h2{font-size:clamp(1.8rem,3.6vw,3.2rem)}
.feat{gap:18px}.feat-card{padding:26px 24px 22px;min-height:340px;gap:10px}
.feat-card svg{width:56px;height:56px;padding:13px;border-radius:18px}.feat-card h3{font-size:1.25rem;margin-top:10px}.feat-card .muted{font-size:.98rem}
.feat-stat{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);width:100%;font-size:.9rem;color:var(--ink-2)}
.feat-stat b{font-family:var(--display);font-size:2rem;color:var(--ink);line-height:1}
.feat-go{font-weight:700;font-size:.9rem;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px;transition:transform var(--t-enter) var(--spring)}
.feat-card:hover .feat-go{transform:translateX(4px)}
.lp-end{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding:26px 28px;border-radius:var(--r-lg);background:var(--ink);color:#fff;box-shadow:0 6px 0 #120E22,var(--float)}
.lp-end h3{font-size:clamp(1.2rem,2vw,1.7rem)}.lp-end .muted{color:#CFC8E0;margin-top:4px}
.lp-end .btn{background:var(--sun);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 0 #C99418}.lp-end .btn:hover{background:#FFD36E}.lp-end .btn:active{box-shadow:0 0 0 #C99418}
.lp-end .btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 4px 0 rgba(0,0,0,.35)}.lp-end .btn.line:hover{background:rgba(255,255,255,.1)}
@media (max-width:900px){.lp-hero,.lp-sec{min-height:0}.feat-card{min-height:0}}

/* ---------- 15. UAE touches ----------
   Al Sadu: the Bedouin weaving of the UAE, inscribed by UNESCO. A narrow woven band of red, black and
   natural wool marks the signature places (welcome page, today's strip, kids' corner, the closing banner).
   Dates also show the Hijri calendar, and the welcome page greets in Arabic. */
:root{--sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Crect width='24' height='12' fill='%23A3262A'/%3E%3Cpath d='M0 0h24v1.6H0zM0 10.4h24V12H0z' fill='%23F4E6D0'/%3E%3Cpath d='M0 1.6 6 10.4 12 1.6zM12 1.6 18 10.4 24 1.6z' fill='%231F1A2E'/%3E%3Cpath d='M6 4.4 7.6 6 6 7.6 4.4 6zM18 4.4 19.6 6 18 7.6 16.4 6z' fill='%23F4E6D0'/%3E%3C/svg%3E")}
.sadu{display:block;height:12px;border-radius:3px;background:var(--sadu) 0 0/24px 12px repeat-x;box-shadow:0 2px 0 rgba(31,26,46,.12)}
.lp-copy .sadu{width:min(320px,70%);margin-top:6px;animation:weave 1.2s var(--ease) .6s both}
@keyframes weave{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[dir="rtl"] .lp-copy .sadu{animation-name:weaveR}@keyframes weaveR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.lp-end{position:relative;overflow:hidden;padding-bottom:36px}.lp-end .sadu{position:absolute;left:0;right:0;bottom:0;border-radius:0}
.daystrip{position:relative;overflow:hidden;padding-top:20px}.daystrip::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--sadu) 0 0/16px 8px repeat-x}
.hijri{color:var(--ink-3);font-weight:600;letter-spacing:.06em}
.lp-today .hijri{display:block;margin-top:2px;font-size:.78rem;letter-spacing:0;text-transform:none}
.ar-hello{font-family:"Readex Pro",var(--display);letter-spacing:0;text-transform:none;font-size:1.05em;color:#A3262A}
.lp-top-act{display:flex;gap:10px;align-items:center}
.lang-btn{min-height:40px;padding:6px 14px;border-radius:12px;font-weight:700;font-size:.92rem;background:#fff;border:1.5px solid var(--line-2);font-family:"Readex Pro",var(--sans);transition:background var(--t-hover),transform var(--t-press)}
.lang-btn:hover{background:var(--butter)}.lang-btn:active{transform:scale(.96)}
[lang="ar"] .ds-now::before{content:"الآن";font-family:var(--sans);letter-spacing:0}
@media (max-width:900px){.sidebar .lang-btn{display:none}}
.demo-note.shared::before{background:var(--sun);box-shadow:0 0 0 3px rgba(255,201,77,.35)}.demo-note.warn::before{background:var(--bad)}

/* ---------- 16. Arabic and right-to-left ---------- */
[lang="ar"] body{--display:"Readex Pro","Figtree",system-ui,sans-serif;--sans:"IBM Plex Sans Arabic","Figtree",system-ui,sans-serif;font-family:var(--sans);line-height:1.7}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .ctitle,[lang="ar"] .lp-hero h1,[lang="ar"] .lp-sec h2{letter-spacing:0;font-family:var(--display)}
[lang="ar"] .lp-hero h1{line-height:1.25}[lang="ar"] .eyebrow,[lang="ar"] .grp,[lang="ar"] .slot small,[lang="ar"] .mtag,[lang="ar"] .prop-k,[lang="ar"] .rimg{letter-spacing:0;text-transform:none}
[lang="ar"] .brand-name,[lang="ar"] .lang-btn{font-family:"Readex Pro",var(--display)}
[dir="rtl"] .ds-track{direction:ltr}
[dir="rtl"] .tl .event{padding-left:8px;padding-right:34px}[dir="rtl"] .tl .event::before{left:auto;right:12px}[dir="rtl"] .tl .event::after{left:auto;right:6px}
[dir="rtl"] .nothing{padding:4px 34px 4px 0}
[dir="rtl"] .pill{border-left:0;border-right:3px solid var(--c)}[dir="rtl"] .evc{border-left:0;border-right:6px solid var(--c)}
[dir="rtl"] .pearls .avatar{margin-left:0;margin-right:-8px}[dir="rtl"] .pearls .avatar:first-child{margin-right:0}
[dir="rtl"] .rtext ul,[dir="rtl"] .rdet ol{padding-left:0;padding-right:20px}
[dir="rtl"] .btn.send svg{transform:scaleX(-1)}
[dir="rtl"] .task .who{margin-left:0;margin-right:auto}[dir="rtl"] .status{margin-left:0;margin-right:auto}
[dir="rtl"] .msg.u .bub{border-radius:18px 18px 18px 6px}
[dir="rtl"] .lp-today{transform:rotate(-1.2deg)}[dir="rtl"] .pill:hover{transform:translateX(-3px)}[dir="rtl"] button.meal:hover{transform:translateX(-4px)}[dir="rtl"] .chore:hover{transform:translateX(-3px)}
[dir="rtl"] .seg .thumb,[dir="rtl"] .ind{left:0;right:auto}

/* ---------- 17. Kids' corner ---------- */
.kid-hero{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 26px 26px;margin-bottom:14px;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(400px 200px at 90% 0,#FFE08A,rgba(255,224,138,0) 70%),linear-gradient(135deg,#FFF6D8,#FFE6D8);border:1px solid #F3E3B8;box-shadow:var(--clay)}
.kid-hero .sadu{position:absolute;left:0;right:0;top:0;border-radius:0}
.kid-hero .avatar.xl{width:84px;height:84px;border-radius:26px;font-size:1.6rem;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-3deg)}}
.kid-hero>div:nth-child(3){flex:1;min-width:220px}.kid-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin:4px 0}.kid-hero p{font-size:1.1rem;font-weight:600;color:var(--ink-2)}
.kid-pts{display:flex;flex-direction:column;align-items:center;padding:14px 22px;border-radius:22px;background:var(--ink);color:#fff;box-shadow:0 5px 0 #120E22}
.kid-pts b{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--sun)}.kid-pts span{font-size:.85rem;font-weight:700;opacity:.85}
.kid-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kchip{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:5px 16px 5px 6px;border-radius:16px;background:#fff;border:2px solid var(--line-2);font-weight:700;transition:transform var(--t-enter) var(--spring),border-color var(--t-hover)}
.kchip:hover{transform:translateY(-2px)}.kchip[aria-pressed="true"]{border-color:var(--ink);background:var(--sun-soft)}
.kid-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}.kid-grid h2{font-size:1.25rem;margin-bottom:10px}
.kjobs{display:flex;flex-direction:column;gap:12px}
.kjob{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;background:#fff;border:2px solid var(--line);box-shadow:0 5px 0 var(--line-2);animation:popIn var(--t-enter) var(--spring) both}
.kjob>div{flex:1;min-width:0}.kjob b{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem}.kjob small{color:var(--ink-2);font-weight:600}
.kjob.late{border-color:#F2C6C1;background:#FFF8F7}.kjob.late small{color:var(--bad)}
.kpts{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--sun-deep);background:var(--sun-soft);padding:4px 12px;border-radius:999px;white-space:nowrap}
.btn.kdone{min-height:56px;padding:12px 26px;font-size:1.15rem;border-radius:18px;background:var(--ok);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 0 #0F4D2B}
.btn.kdone:hover{background:#238C50}.btn.kdone:active{box-shadow:0 0 0 #0F4D2B}
.kdone-h{margin-top:22px}.kdone-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.kdone-list li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--ok-soft)}.kdone-list li span:nth-child(2){flex:1;text-decoration:line-through;color:var(--ink-2)}
.kcheck{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:var(--ok);color:#fff;font-weight:900}
.kid-side{display:flex;flex-direction:column;gap:14px}.kgoal-name{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:10px}
.kbar{height:18px;border-radius:99px;background:#EFE7DA;overflow:hidden;box-shadow:inset 0 2px 3px rgba(31,26,46,.1)}.kbar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#FFB547,#FF7A59);animation:grow 1s var(--spring) both}
.kgoal .muted{margin-top:8px;font-weight:600}
.krewards{list-style:none;padding:0}.krewards li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}.krewards li:first-child{border-top:0}.krewards li>span:first-child{flex:1}
@media (max-width:900px){.kid-grid{grid-template-columns:1fr}.kjob{flex-wrap:wrap}.btn.kdone{width:100%}}

/* ---------- 18. Settings on the Family page ---------- */
.set-h{font-size:1.15rem;margin:22px 0 10px}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.set{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.set h3{font-size:1rem}.set p{font-size:.9rem}
.sync-f{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;width:100%}.sync-f label{flex:1;min-width:160px;font-weight:700;font-size:.84rem}
.sync-f input{display:block;width:100%;margin-top:5px;padding:9px 12px;border-radius:12px;border:1.5px solid var(--line-2);background:#FDFBF7}.sync-f input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,201,77,.45)}
.sync-f .err{width:100%}

/* ---------- 19. Dark mode (follows the device setting) ---------- */
@media (prefers-color-scheme:dark){
  :root{--paper:#14121C;--card:#1D1A28;--ink:#F2EEFA;--ink-2:#B9B2CB;--ink-3:#8E879F;--line:#2D2940;--line-2:#3A3550;--soft:#262236;
    --btn:#FFC94D;--btn-hi:#FFD36E;--sun-soft:#3A3014;--sun-deep:#FFD36E;--butter:#332B14;--mint:#15302A;--sky:#172738;--lilac:#272040;--peach:#36221A;--rose:#371C26;
    --ok:#5BD08D;--ok-soft:#173527;--bad:#FF8A80;--bad-soft:#3B1D1C;
    --clay:0 1px 0 rgba(255,255,255,.04) inset,0 12px 28px -18px rgba(0,0,0,.8);--clay-up:0 1px 0 rgba(255,255,255,.05) inset,0 22px 40px -20px rgba(0,0,0,.9);--float:0 24px 60px -20px rgba(0,0,0,.85)}
  body{background:radial-gradient(1200px 500px at 50% -200px,#2A2238 0,rgba(42,34,56,0) 70%),var(--paper)}
  .sidebar{background:rgba(29,26,40,.8);border-color:rgba(58,53,80,.8)}
  .btn{color:#1F1A2E;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #B98A1A,0 10px 18px -10px rgba(0,0,0,.6)}
  .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 0 #B98A1A,0 14px 22px -10px rgba(0,0,0,.6)}.btn:active{box-shadow:0 0 0 #B98A1A}
  .btn.soft,.btn.line,.btn.white,.ghost,.fchip,.sug,.lang-btn,.kchip,.bead,.prop,.ask-f,.composer,.mcell,.wcol,.dcol,.kjob,.meal,.task .box,.ring span,.seg .thumb,dialog,
  dialog input:not([type=checkbox]):not([type=radio]),dialog textarea,dialog select,.mform input:not([type=checkbox]),.mform textarea,.mform select,.sync-f input{background:var(--card);color:var(--ink)}
  .btn.soft:hover,.btn.line:hover,.btn.white:hover,.lang-btn:hover{background:var(--butter)}
  .card,.panel,.p-ch,.p-me,.p-cal,.daystrip,.ask,.nextup,.lp-today,.sample,.kid-hero,.chore.done{background:var(--card)}
  .p-ch{border-color:#22402F}.p-me{border-color:#4A2E22}.p-cal{border-color:#352C52}.daystrip,.ask,.lp-today,.nextup{border-color:#4A3E1C}.kid-hero{background:radial-gradient(400px 200px at 90% 0,#4A3A12,rgba(74,58,18,0) 70%),var(--card);border-color:#4A3E1C}
  .empty{background:repeating-linear-gradient(-45deg,var(--card) 0 10px,#211E2D 10px 20px)}
  .fchip[aria-pressed="true"],.cal .d.today,.mcell.today .mnum,.ds-now::before,#toast,.msg.u .bub,.kid-pts{background:var(--ink);color:#14121C}
  .kid-pts b{color:#A3262A}.ds-now{background:var(--ink)}.lp-end{background:#2B2346}.mcell.today,.dcol.today{border-color:var(--sun)}
  .seg{background:#262236}.mcell:hover,.wcol.today{background:var(--butter)}.mcell.today{background:var(--card)}
  .kbar,.bar,.ring{--track:#2D2940}.kbar{background:#2D2940}.bar{background:#2D2940}.ring{background:conic-gradient(from -90deg,#FFB547,#FF7A59 calc(var(--p)*1%),#2D2940 0)}
  .ar-hello{color:#FF8A80}.status.past{background:var(--soft)}.logo rect:first-child{fill:#2B2346}
  dialog::backdrop{background:rgba(0,0,0,.55)}
}
@media (prefers-color-scheme:dark) and (prefers-reduced-transparency:reduce){.sidebar{background:var(--card)}}

/* ---------- 20. Opening scene: scroll up to an Emirati family house and walk in ----------
   intro.js draws the scene on a 1600x900 stage and sets --zoom/--ty/--open/--glow from scroll. */
body.landing main{width:100%;max-width:none;padding:0}
.i-scene{position:relative;height:calc(100vh / var(--z));background:#2B2346;touch-action:none}
html:has(body.landing){overscroll-behavior:none}
.i-scene.calm{height:calc(100vh / var(--z))}
.i-view{position:sticky;top:0;height:calc(100vh / var(--z));overflow:hidden;color:#fff;background:linear-gradient(#2B2346 50%,#E7AE6E 50%)}
.i-stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;margin:-450px 0 0 -800px;transform:scale(var(--s,1));transform-origin:50% 50%}
.i-cam{position:absolute;inset:0;transform-origin:800px 622px;transform:translateY(var(--ty,0px)) scale(var(--zoom,1))}
.i-svg{position:absolute;inset:0;width:1600px;height:900px;display:block;backface-visibility:hidden}
.i-l{transform-origin:800px 622px}
.i-sky{transform:scale(calc((1 + var(--walk,0) * .25) / var(--zoom,1)))}
.i-sun{transform:translateY(calc(var(--walk,0) * 60px)) scale(calc((1 + var(--walk,0) * .6) / var(--zoom,1)))}
.i-far{transform:scale(calc((1 + var(--walk,0) * 1.1) / var(--zoom,1)))}
.i-mid{transform:scale(calc((1 + var(--walk,0) * 1.4) / var(--zoom,1)))}
.star{animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d)}@keyframes twinkle{50%{opacity:.25}}
.lantern{animation:flicker 2.6s ease-in-out infinite;transform-origin:center}.lantern+.lantern{animation-delay:-1.3s}@keyframes flicker{0%,100%{opacity:1}45%{opacity:.82}60%{opacity:.95}}
/* the carved double door, in 3D */
.i-door{position:absolute;left:735px;top:520px;width:130px;height:202px;perspective:420px}
.i-inside{position:absolute;inset:0;border-radius:65px 65px 0 0/65px 65px 0 0;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,#FFF4CF 0,#FFD36E 45%,#F0A23B 100%)}
.i-inside span{position:absolute;inset:0;background:radial-gradient(circle at 50% 80%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);opacity:var(--glow,0)}
.i-door::after{content:"";position:absolute;left:-180px;right:-180px;top:-60px;bottom:-140px;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(255,214,120,.75),rgba(255,180,70,0) 65%);opacity:var(--glow,0);pointer-events:none;mix-blend-mode:screen}
.i-leaf{position:absolute;top:0;width:50%;height:100%;backface-visibility:hidden;
  background:radial-gradient(circle,#E8B86A 0 2.2px,transparent 2.6px) 9px 12px/16px 18px,
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.18)),
    repeating-linear-gradient(180deg,#7A4A2A 0 34px,#6A3E22 34px 36px),#7A4A2A;
  box-shadow:inset 0 0 0 4px #5A3420,inset 0 0 0 7px #9A6438}
.i-leaf.l{left:0;border-top-left-radius:65px 65px;transform-origin:0 50%;transform:rotateY(calc(var(--open,0) * -112deg))}
.i-leaf.r{right:0;border-top-right-radius:65px 65px;transform-origin:100% 50%;transform:rotateY(calc(var(--open,0) * 112deg))}
.ring{position:absolute;top:56%;width:12px;height:12px;border-radius:50%;border:2.5px solid #F2C46A;box-shadow:0 1px 1px rgba(0,0,0,.4)}
.i-leaf.l .ring{right:7px}.i-leaf.r .ring{left:7px}
.i-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#FFF8E6,var(--paper));opacity:var(--flash,0);pointer-events:none}
/* words on top of the scene */
.i-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,3vw,40px);z-index:3}
.i-top .brand-name{color:#fff;font-size:1.1rem}.i-top .lang-btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.i-top .btn.line{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 3px 0 rgba(0,0,0,.25)}.i-top .btn.line:hover{background:rgba(255,255,255,.24)}
.i-copy{position:absolute;left:0;right:0;z-index:2;text-align:center;padding:0 20px;pointer-events:none;text-shadow:0 2px 24px rgba(31,26,46,.55)}
.i-a{top:15%;opacity:var(--a,1);transform:translateY(calc((1 - var(--a,1)) * -40px))}
.i-a h1{font-size:clamp(2.2rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.04em;max-width:16ch;margin:10px auto 0;color:#fff}
.i-a h1 em .w{background:linear-gradient(100deg,#FFE08A,#FFB547 45%,#FF8A6B);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;text-shadow:none}
.i-a .eyebrow{color:rgba(255,255,255,.85)}.i-a .ar-hello{color:#FFD36E}
.i-b{top:22%;opacity:var(--b,0);transform:translateY(calc((1 - var(--b,0)) * 30px))}
.i-b p{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.02em;max-width:22ch;margin:0 auto}
.i-c{top:14%;opacity:var(--c,0);transform:scale(calc(.9 + var(--c,0) * .1))}
.i-c{text-shadow:0 0 30px rgba(255,248,230,.95),0 0 8px rgba(255,248,230,.9)}
.i-c .i-ar{display:block;font-family:"Readex Pro",var(--display);font-size:clamp(2rem,5vw,4rem);color:#A3262A;line-height:1.2}
.i-c h2{font-size:clamp(1.6rem,3.6vw,3rem);color:#2B2346}
.i-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:.9rem;opacity:var(--a,1);
  padding:12px 18px 10px;border-radius:18px;background:rgba(31,26,46,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.mouse{width:26px;height:40px;border:2.5px solid #fff;border-radius:14px;display:flex;justify-content:center;padding-top:7px}.mouse i{width:4px;height:9px;border-radius:2px;background:#fff;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.i-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.15);z-index:3}.i-bar i{display:block;height:100%;width:calc(var(--prog,0) * 100%);background:var(--sadu) 0 0/10px 5px repeat-x}
.i-calm{bottom:12%;pointer-events:auto}
.i-scene.calm .i-stage{--open:.35;--glow:.6}.i-scene.calm .i-a{top:12%}
[dir="rtl"] .i-a h1{letter-spacing:0;line-height:1.25}
@media (max-width:700px){.i-a{top:12%}.i-top .lang-btn{display:none}.i-hint{bottom:24px}}
/* intro hint: says "swipe" on touch screens and "scroll" on computers; tapping it plays the walk-in */
.i-hint{font:inherit;color:#fff;cursor:pointer;gap:6px;padding:14px 22px 12px;border:1.5px solid rgba(255,255,255,.3);animation:nudge 2.4s var(--ease) infinite;transition:background var(--t-hover),opacity var(--t-hover)}
.i-hint:hover{background:rgba(31,26,46,.72)}.i-hint:focus-visible{outline:3px solid #FFD36E;outline-offset:4px}
.i-hint b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.i-hint small{font-size:.8rem;font-weight:600;color:#FFD36E;text-decoration:underline;text-underline-offset:3px}
@keyframes nudge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.i-scene.moving .i-hint{pointer-events:none;animation:none}
.swipe{position:relative;width:24px;height:40px;border:2.5px solid #fff;border-radius:7px}
.swipe i{position:absolute;left:50%;bottom:4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#FFD36E;animation:swipe 1.6s var(--ease) infinite}
@keyframes swipe{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{transform:translateY(-20px);opacity:1}100%{transform:translateY(-22px);opacity:0}}
[lang="ar"] .i-hint b{font-family:var(--display);letter-spacing:0}
/* intro performance: nothing inside the drawings animates (so they never repaint on their own); while
   scrolling, layers are composited on the GPU; text fades on its own layer; no blend modes or blurs */
.i-stage.busy .i-cam,.i-stage.busy .i-l{will-change:transform}
.i-copy,.i-flash{will-change:opacity,transform}
.i-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,233,168,.9),rgba(255,181,71,0) 70%);pointer-events:none;animation:flicker 2.6s ease-in-out infinite;will-change:opacity}
.i-glow+.i-glow{animation-delay:-1.3s}
.i-door::after{mix-blend-mode:normal;background:radial-gradient(ellipse at 50% 70%,rgba(255,214,120,.55),rgba(255,180,70,0) 65%)}
.i-hint{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(31,26,46,.72)}.i-scene.moving .i-hint{visibility:hidden}
.i-a,.i-b{text-shadow:0 2px 12px rgba(31,26,46,.5)}
/* intro steps: three dots (walk up, open the doors, come in) and a nudge for the next one */
.i-steps{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.i-steps{transition:opacity .4s}.i-scene:not(.moving) .i-steps{opacity:0}
.i-next{font-weight:700;font-size:.95rem;color:#fff;padding:8px 16px;border-radius:14px;background:rgba(31,26,46,.72);white-space:nowrap;animation:nextIn .5s var(--ease) both}
.i-next:empty{display:none}@keyframes nextIn{from{opacity:0;transform:translateY(8px)}}
.i-dots{display:flex;gap:8px}.i-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(31,26,46,.25);transition:background .4s,transform .4s var(--spring)}
.i-dots i.on{background:#FFD36E;transform:scale(1.25)}
.i-bar{display:none}
@media (orientation:portrait){.i-c{top:26%}}
.think{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--sun-soft);font-weight:600;animation:popIn var(--t-enter) var(--spring) both}.think #thinkTxt::after{content:"...";}