@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/alexandria-arabic.ef0ea68f2c.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/alexandria-latin.3c87a4fbe5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/alexandria-arabic.ef0ea68f2c.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/alexandria-latin.3c87a4fbe5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/alexandria-arabic.ef0ea68f2c.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/alexandria-latin.3c87a4fbe5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin.1e4cea71d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin.1e4cea71d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin.1e4cea71d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.9fee080fcc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-400.4ed189e865.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-400.4a917a99a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-500.bf2b68e78c.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-500.2c348d1039.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-600.0ccee44455.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-600.08b108227a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Wellavyn, wellavyn.com. One family day. Time is the structure: a fixed sky and a giant clock, with each
   hour's content passing in front. Without JS or with reduced motion, every hour is a
   finished block with its own sky and its own clock label. */
:root{
  --navy:#0b1c49;--pale:#effcff;--mint:#89e5cc;--aqua:#1bc2ce;--blue:#149fe9;--deep:#014b82;--surface-dark:#061624;
  /* Sky stops, top and bottom of each hour */
  --s0a:#dff8f4;--s0b:#a9eeda;--s1a:#c8f1f3;--s1b:#8fe6d6;--s2a:#149fe9;--s2b:#27bce0;
  --s3a:#2fb2ea;--s3b:#7fdcdf;--s4a:#1a96e3;--s4b:#1bc2ce;--s5a:#014b82;--s5b:#0a6ba6;
  --s6a:#0a3470;--s6b:#014b82;--s7a:#0b1c49;--s7b:#0b2a5c;--s8a:#0b1c49;--s8b:#061624;
  /* Two tones over the sky: D for bright sky, N for dark sky */
  --D-on:#0b1c49;--D-card:#ffffff;--D-ink:#112b4b;--D-muted:#536c84;--D-line:#dce8ee;--D-fill:#d5f5ec;--D-tick:#014b82;--D-ghost:rgba(11,28,73,.22);--D-win:#ffffff;--D-chip:#ffffff;
  --N-on:#effcff;--N-card:#10293f;--N-ink:#effcff;--N-muted:#a8c9d8;--N-line:#27475f;--N-fill:#0f4552;--N-tick:#89e5cc;--N-ghost:rgba(239,252,255,.26);--N-win:#89e5cc;--N-chip:#0b1c49;
  --D-wm-l:inline-block;--D-wm-d:none;--N-wm-l:none;--N-wm-d:inline-block;
  --bg:#edf5f7;--cloud:rgba(255,255,255,.3);
  --rail-bg:#061624;--rail-ink:#effcff;--rail-line:#27475f;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));--gutter-r:max(16px,env(safe-area-inset-right,0px));
  --head:56px;--safe-top:env(safe-area-inset-top,0px);
  --clock:min(calc((100vw - 32px)/3.2),22svh);
  --dock:.56;
  --band:44px;
  --cap:calc(var(--head) + var(--safe-top) + var(--band) + var(--clock)*.86*var(--dock) + 18px);
  --gap:44svh;
  --latin-display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:var(--latin-display);
  --body:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[lang="ar"]{
  --display:"Alexandria","IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s0a:#0b1c49;--s0b:#0e3a6b;--s1a:#0b2a5c;--s1b:#014b82;--s2a:#014b82;--s2b:#0a6ba6;
    --s3a:#01538d;--s3b:#0a5f96;--s4a:#014b82;--s4b:#0b3f73;--s5a:#0b2f66;--s5b:#0b2450;
    --s6a:#0b1c49;--s6b:#0a1f40;--s7a:#061624;--s7b:#0b1c49;--s8a:#061624;--s8b:#061624;
    --D-on:var(--N-on);--D-card:var(--N-card);--D-ink:var(--N-ink);--D-muted:var(--N-muted);--D-line:var(--N-line);--D-fill:var(--N-fill);--D-tick:var(--N-tick);--D-ghost:var(--N-ghost);--D-win:var(--N-win);--D-chip:var(--N-chip);
    --D-wm-l:none;--D-wm-d:inline-block;
    --bg:#061624;--cloud:rgba(168,201,216,.1);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --s0a:#0b1c49;--s0b:#0e3a6b;--s1a:#0b2a5c;--s1b:#014b82;--s2a:#014b82;--s2b:#0a6ba6;
  --s3a:#01538d;--s3b:#0a5f96;--s4a:#014b82;--s4b:#0b3f73;--s5a:#0b2f66;--s5b:#0b2450;
  --s6a:#0b1c49;--s6b:#0a1f40;--s7a:#061624;--s7b:#0b1c49;--s8a:#061624;--s8b:#061624;
  --D-on:var(--N-on);--D-card:var(--N-card);--D-ink:var(--N-ink);--D-muted:var(--N-muted);--D-line:var(--N-line);--D-fill:var(--N-fill);--D-tick:var(--N-tick);--D-ghost:var(--N-ghost);--D-win:var(--N-win);--D-chip:var(--N-chip);
  --D-wm-l:none;--D-wm-d:inline-block;
  --bg:#061624;--cloud:rgba(168,201,216,.1);
  color-scheme:dark;
}
:root,.day{--on:var(--D-on);--card:var(--D-card);--ink:var(--D-ink);--muted:var(--D-muted);--line:var(--D-line);--fill:var(--D-fill);--tick:var(--D-tick);--ghost:var(--D-ghost);--win:var(--D-win);--wm-l:var(--D-wm-l);--wm-d:var(--D-wm-d);--chip:var(--D-chip)}
.night{--on:var(--N-on);--card:var(--N-card);--ink:var(--N-ink);--muted:var(--N-muted);--line:var(--N-line);--fill:var(--N-fill);--tick:var(--N-tick);--ghost:var(--N-ghost);--win:var(--N-win);--wm-l:var(--N-wm-l);--wm-d:var(--N-wm-d);--chip:var(--N-chip)}
.lit{--card:#ffffff;--ink:#112b4b;--muted:#536c84;--line:#dce8ee;--fill:#d5f5ec;--tick:#014b82}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:var(--body);font-size:18px;line-height:1.5;-webkit-tap-highlight-color:rgba(27,194,206,.25);touch-action:manipulation}
:root[lang="ar"] body{line-height:1.7}
.page{overflow-x:clip;color:var(--on);transition:color .25s ease}
.sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
bdi[dir="ltr"]{white-space:nowrap;unicode-bidi:isolate}
/* Atkinson slashes its zero; doses and times read cleaner in the display face */
:root[lang="en"] .dose bdi,:root[lang="en"] .med bdi,:root[lang="en"] .mc-part bdi,:root[lang="en"] .said bdi{font-family:var(--latin-display)}
img{display:block}
p,h1,h2,ul{margin:0;padding:0}
h1,h2{font-family:var(--display);font-weight:800;text-wrap:balance;color:var(--on)}
:root[lang="en"] h1,:root[lang="en"] h2{letter-spacing:-.022em}
:root[lang="en"] h1{font-stretch:88%}
:root[lang="en"] h2{font-stretch:92%}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}

.skip{position:fixed;inset-block-start:calc(var(--safe-top) + 6px);inset-inline-start:16px;z-index:60;padding:11px 16px;background:var(--rail-bg);color:var(--rail-ink);border-radius:12px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- Header ---------- */
.site{position:sticky;inset-block-start:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:8px;min-block-size:var(--head);padding-left:var(--gutter-l);padding-right:var(--gutter-r);background:var(--card);color:var(--on)}
.brand{display:flex;align-items:center;gap:8px;min-block-size:44px;text-decoration:none;min-inline-size:0}
:root[dir="rtl"] .brand{flex-direction:row-reverse}
.brand .mark{inline-size:46px;block-size:auto}
.brand .wm{block-size:auto;inline-size:92px}
.wm-l,.wm-d{aspect-ratio:860/205}
.wm-l{display:var(--wm-l)}
.wm-d{display:var(--wm-d)}
.tools{display:flex;align-items:center;gap:6px}
.tool{text-decoration:none;min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1.5px solid currentColor;font-weight:600;font-size:15px;padding-inline:10px;transition:background-color .15s ease,border-color .15s ease,transform .1s ease}
.tool:hover{background:var(--ghost)}
.tool:active{transform:scale(.96)}
.tool svg{inline-size:18px;block-size:18px;fill:currentColor}
#pause{padding-inline:0}
#pause .i-play{display:none}
.paused #pause .i-play{display:block}
.paused #pause .i-pause{display:none}
:root:not(.live) #pause{display:none}

/* ---------- Hour rail ---------- */
.rail{position:fixed;z-index:40;inset-block-end:calc(env(safe-area-inset-bottom,0px) + 8px);inset-inline-start:50%;transform:translateX(-50%);max-inline-size:calc(100vw - 12px);background:var(--rail-bg);color:var(--rail-ink);border:1px solid var(--rail-line);border-radius:18px;padding:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
:root[dir="rtl"] .rail{transform:translateX(50%)}
.rail::-webkit-scrollbar{display:none}
.rail ol{display:flex;list-style:none;margin:0;padding:0;inline-size:max-content}
.rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:44px;block-size:46px;border-radius:14px;font-family:var(--latin-display);font-weight:700;font-size:18px;line-height:1;font-variant-numeric:tabular-nums;transition:background-color .15s ease,color .15s ease}
.rail bdi{display:flex;flex-direction:column;align-items:center;gap:2px}
.rail small{font-size:12px;font-weight:600;font-family:var(--latin-display)}
.rail button:hover{background:#10293f}
.rail button[aria-current="true"]{background:var(--mint);color:var(--navy)}
.rail button:focus-visible{outline-offset:-3px;outline-color:var(--aqua)}

/* ---------- Hours, resting state: a finished block per hour ---------- */
.hour{position:relative;z-index:3;padding-block:48px;padding-left:var(--gutter-l);padding-right:var(--gutter-r);background:linear-gradient(var(--a),var(--b));color:var(--on);scroll-margin-top:calc(var(--head) + var(--safe-top))}
.h8{padding-block-end:96px}
.h0{--a:var(--s0a);--b:var(--s0b)}.h1{--a:var(--s1a);--b:var(--s1b)}.h2{--a:var(--s2a);--b:var(--s2b)}
.h3{--a:var(--s3a);--b:var(--s3b)}.h4{--a:var(--s4a);--b:var(--s4b)}.h5{--a:var(--s5a);--b:var(--s5b)}
.h6{--a:var(--s6a);--b:var(--s6b)}.h7{--a:var(--s7a);--b:var(--s7b)}.h8{--a:var(--s8a);--b:var(--s8b)}
.in{max-inline-size:40rem;min-inline-size:0}
.stamp{font-family:var(--latin-display);font-weight:800;font-stretch:85%;font-size:min(23vw,104px);line-height:.95;margin-block-end:20px;font-variant-numeric:tabular-nums}
.stamp small{font-size:.32em;font-weight:700;margin-inline-start:.12em}
h1{font-size:clamp(44px,13.4vw,84px);line-height:1.02}
:root[lang="ar"] h1{font-size:clamp(40px,12vw,76px);line-height:1.32}
h2{font-size:clamp(33px,9.4vw,54px);line-height:1.08}
:root[lang="ar"] h2{font-size:clamp(29px,8.2vw,48px);line-height:1.4}
.line{margin-block-start:14px;font-size:clamp(18px,5vw,21px);font-weight:500;max-inline-size:34ch}
:root[lang="ar"] .line{max-inline-size:38ch}
.answer{margin-block-start:16px;font-family:var(--display);font-weight:700;font-size:clamp(23px,6.6vw,32px);line-height:1.22}
:root[lang="ar"] .answer{line-height:1.5;font-size:clamp(21px,5.8vw,29px)}
.quiet{margin-block-start:14px;font-size:18px;max-inline-size:36ch}
.status{display:inline-flex;align-items:center;margin-block-start:20px;min-block-size:36px;padding:5px 14px;border-radius:12px;background:var(--on);color:var(--chip);font-weight:600;font-size:16px;line-height:1.3}
.hint{display:none}

/* ---------- Solid content: nothing below is translucent ---------- */
.sheet{margin-block-start:24px;background:var(--card);color:var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(6,22,36,.55)}
.marker{padding:10px 18px 14px;font-size:14px;color:var(--muted);line-height:1.4}
.rows{list-style:none}
.rows li+li{border-block-start:1px solid var(--line)}
.dose{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:center;inline-size:100%;min-block-size:96px;padding:14px 16px;text-align:start;overflow:hidden;color:var(--ink);isolation:isolate}
.dose::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
:root[dir="rtl"] .dose::before{transform-origin:100% 50%}
.dose[aria-pressed="true"]::before{transform:none}
.dose:hover{background:color-mix(in srgb,var(--fill) 45%,transparent)}
.dose:active{background:var(--fill)}
.dose:focus-visible{outline-offset:-4px}
.ava{inline-size:44px;block-size:44px;border-radius:50%;grid-row:1 / span 3}
.who{font-weight:700;font-size:18px;line-height:1.3;min-inline-size:0}
.t{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1}
.med{grid-column:2 / span 2;font-size:16px;line-height:1.35}
.state{grid-column:2 / span 2;display:flex;align-items:center;gap:7px;margin-block-start:5px;font-size:15px;font-weight:600;color:var(--muted);line-height:1.3}
.dose[aria-pressed="true"] .state{color:var(--ink)}
.tick{flex:none;inline-size:20px;block-size:20px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;transition:background-color .2s ease,border-color .2s ease}
.tick svg{inline-size:12px;block-size:12px;stroke:var(--card);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s ease .1s}
.dose[aria-pressed="true"] .tick{background:var(--tick);border-color:var(--tick)}
.dose[aria-pressed="true"] .tick svg{stroke-dashoffset:0}

/* Voice */
.mark-soon{display:inline-flex;align-items:center;min-block-size:32px;padding:3px 12px;margin-block-end:12px;border-radius:10px;background:var(--on);color:var(--chip);font-weight:600;font-size:15px;line-height:1.3}
.voice{padding:20px 18px 6px;display:grid;gap:16px}
.orb{inline-size:68px;block-size:68px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#89e5cc,#1bc2ce 45%,#149fe9 80%,#014b82);display:flex;align-items:center;justify-content:center;gap:4px}
.orb i{display:block;inline-size:4px;block-size:26px;border-radius:2px;background:#fff;transform:scaleY(.55)}
.orb i:nth-child(2),.orb i:nth-child(4){transform:scaleY(.85)}
.orb i:nth-child(3){transform:scaleY(1)}
.said{font-family:var(--display);font-weight:700;font-size:clamp(23px,6.4vw,30px);line-height:1.38}
:root[lang="ar"] .said{font-weight:500;line-height:1.75;font-size:clamp(21px,5.8vw,27px)}
.w{padding:.04em .16em;margin-inline:-.1em;border-radius:7px;background:var(--fill);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .18s ease}

/* Medical card */
.mc{padding:20px 18px 6px}
.mc-head{display:flex;align-items:center;gap:12px;padding-block-end:14px;border-block-end:1px solid var(--line)}
.mc-head img{inline-size:44px;block-size:44px;border-radius:50%}
.mc-title{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.25}
.mc-who{font-size:16px;color:var(--muted);line-height:1.3}
.mc-pdf{margin-inline-start:auto;flex:none;border:2px solid var(--tick);color:var(--tick);border-radius:9px;padding:4px 9px;font-weight:700;font-size:14px;line-height:1.2}
.mc-part{padding-block:12px;border-block-end:1px solid var(--line)}
.mc-part:last-child{border-block-end:0}
.mc-label{font-weight:700;font-size:16px;line-height:1.4}
.mc-part ul{list-style:none;font-size:16px}
.bar{display:block;block-size:9px;border-radius:5px;background:var(--line);margin-block-start:9px;inline-size:58%}
.bar+.bar{inline-size:38%}

/* Duplicate */
.dup{position:relative;padding:8px 16px 6px}
.duprow{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:center;padding-block:12px;border-block-end:1px solid var(--line);background:var(--card)}
.duprow img{inline-size:38px;block-size:38px;border-radius:50%;grid-row:1 / span 2}
.duprow .med{grid-column:2;font-size:16px;font-weight:600}
.duprow .state{grid-column:2;margin:0;font-size:15px}
.notice{display:flex;align-items:center;gap:10px;margin-block-start:12px;padding:12px 14px;border-radius:14px;background:var(--fill);color:var(--ink);font-weight:700;font-size:17px;line-height:1.35}
.notice svg{flex:none;inline-size:24px;block-size:24px;fill:none;stroke:var(--tick);stroke-width:2;stroke-linecap:round}

/* Family */
.windows{list-style:none;margin-block-start:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.windows li{display:grid;justify-items:center;gap:8px;text-align:center;font-weight:600;font-size:16px;min-inline-size:0}
.pane{inline-size:100%;max-inline-size:96px;aspect-ratio:4/5;border-radius:999px 999px 10px 10px;background:var(--win);display:grid;place-items:center;transition:background-color .5s ease,box-shadow .5s ease;box-shadow:0 0 0 2px var(--ghost)}
.pane img{inline-size:56%;max-inline-size:52px;block-size:auto;aspect-ratio:1;border-radius:50%;transition:opacity .5s ease}

/* Reminder */
.frame{margin-block-start:24px;max-inline-size:340px;padding:8px;border-radius:38px;background:#10293f;box-shadow:0 0 0 1.5px var(--ghost)}
.screen{border-radius:30px;background:linear-gradient(#0b1c49,#061624);padding:28px 12px 22px;display:grid;gap:18px}
.screen-time small{font-size:.42em}
.screen-time{color:#effcff;text-align:center;font-family:var(--latin-display);font-weight:700;font-stretch:88%;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.screen .dose{background-color:var(--card);border-radius:20px;min-block-size:96px}
.screen .dose:hover{background-color:var(--card)}
.marker-screen{color:#a8c9d8;padding:0;text-align:center}
.limit{margin-block-start:16px;font-size:17px;max-inline-size:36ch}

/* Privacy */
.limits{list-style:none;margin-block-start:22px;border-block-start:1px solid var(--ghost)}
.limits li{padding-block:12px;border-block-end:1px solid var(--ghost);font-size:17px;line-height:1.45;max-inline-size:44ch}
:root[lang="ar"] .limits li{line-height:1.7}

/* Close */
.close-mark{inline-size:min(62vw,240px);block-size:auto;margin-block-end:14px}
.close-wm{inline-size:min(44vw,170px);block-size:auto;margin-block-end:30px}
.doctor{margin-block-start:26px;font-size:17px;max-inline-size:44ch}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:18px;margin-inline-start:-12px}
.links a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:12px;border-radius:10px;font-weight:600;text-underline-offset:4px}
.links a:hover{text-decoration-thickness:2px}
.legal{margin-block-start:18px;font-size:15px;line-height:1.4}

/* ---------- Not found page: one still night hour ---------- */
.nf{min-block-size:calc(100svh - var(--head) - var(--safe-top))}
.nf .line{margin-block-end:8px}

/* ---------- Live day: fixed sky, clock and arc ---------- */
.sky,.cap,.skyhead{display:none}
.live .page{position:relative}
.live .hour{background:none;padding-block:var(--gap) 0}
.live .h0{padding-block-start:calc(var(--head) + var(--safe-top) + var(--band) + var(--clock)*.86 + 18px)}
.live .h8{padding-block-end:calc(env(safe-area-inset-bottom,0px) + 180px)}
.live .stamp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.live .site{position:fixed;inset-block-start:0;inset-inline:0;padding-block-start:var(--safe-top);background:none;box-sizing:content-box;padding-left:var(--gutter-l);padding-right:var(--gutter-r);inline-size:auto}
.live .sky{display:block;position:fixed;inset-block-start:0;inset-inline:0;block-size:100lvh;z-index:0;overflow:hidden;background:var(--s0a)}
.sky>.layer{position:absolute;inset:0;opacity:0;will-change:opacity}
.sky>.layer.base{opacity:1}
.l0{background:linear-gradient(var(--s0a) 16%,var(--s0b))}.l1{background:linear-gradient(var(--s1a) 16%,var(--s1b))}.l2{background:linear-gradient(var(--s2a) 16%,var(--s2b))}
.l3{background:linear-gradient(var(--s3a) 16%,var(--s3b))}.l4{background:linear-gradient(var(--s4a) 16%,var(--s4b))}.l5{background:linear-gradient(var(--s5a) 16%,var(--s5b))}
.l6{background:linear-gradient(var(--s6a) 16%,var(--s6b))}.l7{background:linear-gradient(var(--s7a) 16%,var(--s7b))}.l8{background:linear-gradient(var(--s8a) 16%,var(--s8b))}
.stars{position:absolute;inset:0;opacity:0;will-change:opacity}
.stars i{position:absolute;border-radius:50%;background:#effcff;opacity:.75}
.cloud{position:absolute;block-size:72px;inline-size:62vw;max-inline-size:640px;border-radius:999px;background:var(--cloud);opacity:1;will-change:transform}
.cloud::after{content:"";position:absolute;inset-block-start:-30px;inset-inline-start:22%;inline-size:40%;block-size:86px;border-radius:999px;background:inherit}
.cloud.c1{inset-block-start:38%;inset-inline-start:-14%}
.cloud.c2{inset-block-start:71%;inset-inline-end:-18%;scale:.72}
.clouds{position:absolute;inset:0;will-change:opacity}
.live .cap{display:block;position:fixed;inset-block-start:0;inset-inline:0;block-size:var(--cap);z-index:5;pointer-events:none;background:var(--s0a);-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent)}
.live .skyhead{display:block;position:fixed;inset-block-start:0;inset-inline:0;block-size:var(--cap);z-index:6;pointer-events:none;color:var(--on)}
.arc{position:absolute;inset-block-start:calc(var(--head) + var(--safe-top) + 16px);inset-inline:24px;block-size:20px}
.arc svg{display:block;inline-size:100%;block-size:100%;overflow:visible}
:root[dir="rtl"] .arc svg{transform:scaleX(-1)}
.arc path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
#arcBase{stroke:var(--ghost);stroke-width:2}
#arcDone{stroke:url(#ribbon);stroke-width:3.5}
.body-sun,.body-moon{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:var(--orb);block-size:var(--orb);margin:calc(var(--orb)/-2);--orb:20px;will-change:transform,opacity}
:root[dir="rtl"] .body-sun,:root[dir="rtl"] .body-moon{inset-inline-start:auto;left:0}
.body-sun{border-radius:50%;background:#fff;box-shadow:0 0 0 2px #1bc2ce}
.body-sun::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #89e5cc;opacity:.7}
.body-moon{opacity:0}
.live:not(.wv-ready) .body-sun{opacity:0}
.body-moon svg{inline-size:100%;block-size:100%;fill:#effcff}
.clock{position:absolute;inset-block-start:calc(var(--head) + var(--safe-top) + var(--band));inset-inline-start:var(--gutter-l);display:block;font-family:var(--latin-display);font-size:var(--clock);font-weight:800;font-stretch:85%;font-variation-settings:"opsz" 96;line-height:.86;color:var(--on);transition:color .25s ease;will-change:transform;transform-origin:0 0;white-space:nowrap}
:root[dir="rtl"] .clock{transform-origin:100% 0}
.clock bdi{display:flex;align-items:flex-start}
.clock .d{display:block;inline-size:.62em;text-align:center}
.clock .d.off{inline-size:0;overflow:hidden}
.clock .c{display:block;inline-size:.26em;text-align:center}
.clock .ap{display:block;inline-size:.42em;margin-inline-start:.04em;font-size:1em;line-height:1}
.clock .ap span{display:block;font-size:.26em;font-weight:700;line-height:1.1;margin-block-start:.42em;font-stretch:100%}

.live .hint{display:block;margin-block-start:26px;inline-size:30px;block-size:30px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Ambient motion, all of it stops on pause */
.live .stars i.tw1{animation:tw 3.4s ease-in-out infinite}
.live .stars i.tw2{animation:tw 5.2s ease-in-out -2s infinite}
@keyframes tw{50%{opacity:.18}}
.live .cloud.c1{animation:drift 46s ease-in-out infinite alternate}
.live .cloud.c2{animation:drift 64s ease-in-out -20s infinite alternate-reverse}
@keyframes drift{to{transform:translateX(26vw)}}
.live .body-sun::after{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.28);opacity:.25}}
.live .clock .c{animation:colon 2s steps(1) infinite}
@keyframes colon{50%{opacity:.35}}
.live .orb i{animation:wave 1.25s ease-in-out infinite}
.live .orb i:nth-child(2){animation-delay:-.3s}.live .orb i:nth-child(3){animation-delay:-.55s}.live .orb i:nth-child(4){animation-delay:-.8s}.live .orb i:nth-child(5){animation-delay:-1s}
@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.live .hint{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(8px)}}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

/* Scroll-tied start states, only when motion is on */
.live .w{background:transparent}
.live .w.on{background:var(--fill)}
.live .pane{background:var(--ghost)}
.live .pane img{opacity:.4}
.live .pane.on{background:var(--win);box-shadow:0 0 0 2px var(--win),0 0 34px -2px var(--win)}
.live .pane.on img{opacity:1}
.live [data-rise]{will-change:transform}

/* ---------- Desktop: the clock takes one half of the sky, the day passes in the other ---------- */
@media (min-width:1000px){
  :root{--clock:min(13.2vw,32svh);--head:72px;--gap:64svh;--cap:84px}
  body{font-size:19px}
  .site{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
  .brand .mark{inline-size:58px}.brand .wm{inline-size:112px}
  .rail{inset-block-end:auto;inset-block-start:50%;inset-inline-start:max(18px,env(safe-area-inset-left,0px));transform:translateY(-50%);max-inline-size:none;overflow:visible}
  :root[dir="rtl"] .rail{transform:translateY(-50%)}
  .rail ol{flex-direction:column;inline-size:auto}
  .hour{padding-inline:clamp(96px,9vw,160px);padding-block:88px}
  .h8{padding-block-end:96px}
  .in{display:grid;grid-template-columns:5fr 6fr;column-gap:5vw;max-inline-size:1240px;margin-inline:auto;align-items:start}
  .stamp{font-size:min(9.4vw,150px);margin:0}
  .line,.quiet{font-size:21px}
  /* Live */
  .live .hour{padding-block:var(--gap) 0;padding-inline-start:52vw;padding-inline-end:6vw}
  .live .h0{padding-block-start:22svh}
  .live .h8{padding-block-end:18svh}
  .live .in{display:block;max-inline-size:40rem;margin:0}
  .live .skyhead{inset-inline-end:auto;inline-size:52vw;block-size:100lvh}
  .live .cap{block-size:84px}
  .arc{inset-block-start:16svh;inset-inline-start:7.5vw;inset-inline-end:2vw;block-size:64svh}
  .body-sun,.body-moon{--orb:62px}
  .body-sun::after{inset:-20px}
  .clock{inset-block-start:calc(50svh - var(--clock)*.43);inset-inline-start:7.5vw;transform-origin:0 50%}
  :root[dir="rtl"] .clock{transform-origin:100% 50%}
  h1{font-size:clamp(56px,5.9vw,92px)}
  :root[lang="ar"] h1{font-size:clamp(50px,5.2vw,80px)}
  h2{font-size:clamp(40px,3.9vw,60px)}
  :root[lang="ar"] h2{font-size:clamp(36px,3.4vw,52px)}
  .answer{font-size:clamp(26px,2.3vw,34px)}
  :root[lang="ar"] .answer{font-size:clamp(24px,2vw,30px)}
  .windows{gap:20px}
  .pane{max-inline-size:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}