/* Generated by tools/build-store-site.py. Do not edit: edit the script and rebuild. */
@font-face{font-family:'Frank Ruhl Libre';src:url(/assets/fonts/frank-latin.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Frank Ruhl Libre';src:url(/assets/fonts/frank-hebrew.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0590-05FF,U+20AA,U+FB1D-FB4F}
@font-face{font-family:'Spectral';src:url(/assets/fonts/spectral-cyrillic.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:'Amiri';src:url(/assets/fonts/amiri-arabic.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Rubik';src:url(/assets/fonts/rubik-latin.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Rubik';src:url(/assets/fonts/rubik-hebrew.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0590-05FF,U+20AA,U+FB1D-FB4F}
@font-face{font-family:'Rubik';src:url(/assets/fonts/rubik-cyrillic.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
/* RedesignTokens.kt, the day palette. The site is dark always: no light theme, and the visitor's light mode changes nothing. */
:root{color-scheme:dark;--ground:#0F0E0D;--surface:#1A1816;--surface-high:#24211E;--hair:#322D28;
--ink:#F1EADF;--ink2:#BDB3A5;--cap:#A39889;--accent:#F2A65A;--quiet:#4A433C;--heart:#FF5E62;
--deep:#5867E8;--light:#93A3F7;--dream:#C9A7F5;--awake:#EDE4D6;
--indigo:#2B2A6B;--coral:#E86A5C;--gold:#F7C46C;--sun:#FFF3D6;
--serif:'Frank Ruhl Libre',Spectral,Amiri,Georgia,'Times New Roman',serif;
--sans:Rubik,system-ui,-apple-system,'Segoe UI','Noto Sans Arabic','Noto Sans Hebrew',sans-serif;
--gutter:clamp(16px,5vw,56px);--p:0;--measure:36rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground);scroll-padding-top:72px}
body{margin:0;background:var(--ground);color:var(--ink2);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--quiet);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
bdi{unicode-bidi:isolate}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--surface-high);color:var(--ink);padding:10px 14px;z-index:30;border-radius:6px}
.skip:focus{top:8px}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0;text-wrap:balance}

/* ---- the bar: the launcher icon, and the six languages ---- */
.bar{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:14px var(--gutter);position:relative;z-index:10}
.mark{display:inline-flex;line-height:0;border-radius:10px}
.logo-tile{width:40px;height:40px;border-radius:10px;display:block}
.langs ul{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;list-style:none}
.langs a{display:inline-block;padding:9px 6px;min-height:44px;min-width:44px;text-align:center;line-height:26px;font-size:14px;color:var(--cap);text-decoration:none}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---- the opening: the logo's own dawn, the promise, one way in ---- */
/* One column that may shrink below its words' width: a grid item's automatic minimum is its longest word, which pushed
   the opening past the screen below 240 CSS pixels (360 and 390 at 200% zoom, round 485 A5). */
.hero{max-width:1120px;margin:0 auto;padding:clamp(16px,4svh,48px) var(--gutter) clamp(48px,8svh,104px);display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero>*{max-width:100%;min-width:0;overflow-wrap:break-word}
.dawn{width:min(740px,100%);border-radius:clamp(18px,3vw,32px);overflow:hidden;line-height:0;box-shadow:0 40px 120px -50px rgba(232,106,92,.55)}
.logo-wide{width:100%;height:auto;display:block}
.kicker{margin:clamp(24px,4svh,40px) 0 0;font-size:clamp(14px,1.6vw,16px);line-height:1.4;font-weight:500;letter-spacing:.03em;color:var(--accent)}
.hero h1{font-size:clamp(28px,6.2vw,68px);line-height:1.06;margin:10px 0 0;max-width:18ch;letter-spacing:-.01em}
.lede{font-size:clamp(19px,2.6vw,26px);line-height:1.45;color:var(--ink);margin:22px 0 0;max-width:30ch}
.intro{max-width:44ch;margin:14px 0 0;font-size:clamp(17px,1.9vw,19px)}
.note{margin:28px 0 0;font-size:15px;line-height:1.45;color:var(--ink);max-width:40ch}
.act{margin:30px 0 0}
.note+.act{margin-top:14px}
.or{margin:8px 0 0;font-size:15px;color:var(--cap)}
.addr{-webkit-user-select:all;user-select:all}
.copy{margin-inline-start:6px;padding:10px 16px;min-height:44px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.copy[hidden]{display:none}
.copied{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.send{margin:6px auto 0;font-size:15px;color:var(--cap);max-width:40ch}
.qa a,.testers p a,.intro a{padding-block:12px}
.button{display:inline-block;padding:14px 22px;min-height:48px;max-width:100%;border-radius:999px;background:var(--accent);color:#1A1208;font-weight:500;text-decoration:none;line-height:20px}
.button:hover{background:var(--gold);color:#1A1208}

/* ---- the story: one night and the day after it ---- */
.story{position:relative}
.rail{display:none}
.scenes{position:relative}
.nightpart{position:relative}
.trace{position:absolute;inset-block:0;inset-inline-start:2px;width:min(90px,6vw);height:100%;pointer-events:none;overflow:visible;z-index:1}
.trace path{fill:none;stroke:var(--heart);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5}
.scene{position:relative;padding:clamp(48px,9svh,110px) var(--gutter);padding-inline-start:max(var(--gutter),calc(min(90px,6vw) + 18px));display:grid;gap:32px;align-content:center}
.scene>.ground{position:absolute;inset:0;z-index:-1}
.story{isolation:isolate}
/* A scene off screen is neither laid out nor painted until it nears the viewport: the page is long, and a phone's first
   seconds are spent on the opening alone. Its box keeps its last measured size, so nothing jumps. */
.scene,.faq,.topics,.testers{content-visibility:auto;contain-intrinsic-size:auto 900px}
.scene.sub{padding-top:clamp(32px,6svh,80px)}
.words{max-width:var(--measure)}
.time{font-family:var(--serif);font-weight:700;font-size:clamp(56px,15vw,120px);line-height:1;color:var(--accent);margin:0 0 14px;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
.scene h2{font-size:clamp(30px,4.6vw,48px);line-height:1.1;margin:0 0 6px}
.scene h3{font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin:0 0 6px}
.scene p{margin:14px 0 0;font-size:clamp(17px,1.9vw,20px);line-height:1.6}
.words>h2+p,.words>h3+p{color:var(--ink)}
.more{font-size:16px !important}
.more a{color:var(--accent);text-decoration-color:currentColor}
/* Every link a thumb has to hit is at least 44 pixels tall (round 485 A8): a block link by its own height, a link inside
   a sentence by padding that widens what it catches without moving a line. */
.more a,.linkout a,.back a,.or a{display:inline-block;padding-block:11px;min-height:44px}
.more{margin-top:6px !important}
.more a::after,.linkout a::after,.topics a::after,.next a::after{content:' \2192';display:inline-block}
[dir=rtl] .more a::after,[dir=rtl] .linkout a::after,[dir=rtl] .topics a::after,[dir=rtl] .next a::after{content:' \2190'}
.phones{display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
.phone{margin:0;width:min(300px,74vw)}
.frame{border-radius:min(40px,11vw);padding:min(8px,2vw);background:#000;border:1px solid var(--hair);overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.frame picture,.frame img{display:block;width:100%;height:auto}
.frame img{border-radius:min(32px,9vw)}
.phone figcaption{margin-top:14px;font-size:15px;line-height:1.45;color:var(--ink2)}
.phone .cap{display:block;color:var(--ink);font-weight:500}
.phone .beside{display:block;margin-top:2px}
.example{display:block;font-size:13px;color:var(--cap);margin-top:4px;letter-spacing:.02em}
.aside{color:var(--ink2);font-style:italic}

/* The night's own drawings: the stages as the app colours them, the window on a minute grid, the day's energy. */
.stages,.window,.energy{direction:ltr;display:block;width:100%;height:auto;margin:36px 0 0}
.stages{height:80px;opacity:.75}
.stages .step{fill:none;stroke:var(--quiet);stroke-width:1;vector-effect:non-scaling-stroke}
.window,.energy{max-width:560px}
.window .axis,.energy .axis{stroke:var(--hair);stroke-width:1}
.window .tick{stroke:var(--quiet);stroke-width:1}
.window .win{fill:var(--accent);fill-opacity:.06;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4}
.window .rise{fill:none;stroke:var(--heart);stroke-width:1.5}
.window .ringline{stroke:var(--accent);stroke-width:1}
.window .ringdot{fill:var(--accent)}
.tlabel,.ringlabel{font:400 16px var(--sans);fill:var(--cap)}
.window line,.window path,.window rect,.energy line,.energy path{vector-effect:non-scaling-stroke}
.ringlabel{fill:var(--accent);font-weight:500}
.energy .peak{fill:var(--accent);opacity:.1}
.energy .cutoff{stroke:var(--gold);stroke-width:1;stroke-dasharray:2 4}
.energy .curve{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.energy .curve.later{stroke-dasharray:6 8;opacity:.6}
.energy .nowdot{fill:var(--ground);stroke:var(--accent);stroke-width:2.5}
.energy .tlabel{fill:var(--ink2)}
.coda .words{max-width:40rem}
.coda .words>h2+p{font-size:clamp(20px,2.4vw,24px)}

/* ---- the topics, the questions, the call ---- */
.topics{max-width:1120px;margin:0 auto;padding:clamp(48px,10svh,110px) var(--gutter) 0}
.topics ul,.next ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.topics a,.next a{display:block;height:100%;padding:20px 22px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3;color:var(--ink)}
.topics a:hover,.next a:hover{border-color:var(--accent)}
.topics a::after,.next a::after{color:var(--accent)}
.faq{max-width:46rem;margin:0 auto;padding:clamp(64px,12svh,130px) var(--gutter) 0}
.faq h2{font-size:clamp(30px,4.6vw,48px);margin-bottom:12px}
.qa{border-top:1px solid var(--hair);padding:22px 0}
.qa h3{font-size:clamp(20px,2.4vw,24px);line-height:1.3;margin:0 0 8px}
.qa p{margin:0}
.testers{max-width:46rem;margin:0 auto;padding:clamp(64px,12svh,130px) var(--gutter) clamp(64px,12svh,120px);text-align:center}
.testers h2{font-size:clamp(30px,4.6vw,48px)}
.testers p{margin:16px auto 0;max-width:40ch;font-size:clamp(17px,1.9vw,20px)}
.testers .act{margin-top:28px}

/* ---- the theme pages ---- */
.theme-top{background:linear-gradient(180deg,var(--ground) 0%,#160F0B 55%,#22150D 100%);border-bottom:1px solid var(--hair);padding-bottom:clamp(40px,8svh,88px)}
.theme-head{max-width:1120px;margin:0 auto;padding:clamp(20px,5svh,56px) var(--gutter) 0}
.theme-head .art{max-width:560px;margin-top:8px}
.theme-head .stages{margin-top:28px}
.back{margin:0 0 22px;font-size:15px}
.back a{color:var(--cap)}
[dir=ltr] .back a::before{content:'\2190  '}
[dir=rtl] .back a::before{content:'\2192  '}
.theme h1{font-size:clamp(34px,5.6vw,64px);line-height:1.08;max-width:20ch;letter-spacing:-.01em}
.intro-part{display:grid;gap:36px;margin-top:28px;align-items:start}
.lede-words p{font-size:clamp(19px,2.3vw,23px);line-height:1.55;color:var(--ink);margin:0 0 14px;max-width:40rem}
.part{max-width:1120px;margin:0 auto;padding:clamp(56px,10svh,110px) var(--gutter) 0;display:grid;gap:36px;align-items:start}
.part>.words{border-top:1px solid var(--hair);padding-top:22px}
.part>.words::before{content:'';display:block;width:28px;height:2px;background:var(--accent);margin:-23px 0 21px}
.part h2{font-size:clamp(28px,4.2vw,44px);line-height:1.12;margin:0 0 8px}
.part p{margin:14px 0 0;font-size:clamp(17px,1.9vw,19px)}
.part .words{max-width:var(--measure)}
.linkout{max-width:1120px;margin:0 auto;padding:48px var(--gutter) 0;font-size:clamp(18px,2vw,21px)}
.linkout a{color:var(--accent)}
.next{max-width:1120px;margin:0 auto;padding:0 var(--gutter) 64px}
.sounds{direction:ltr;display:block;width:100%;max-width:560px;height:auto;margin:28px 0 0}
.sounds .axis{stroke:var(--hair);stroke-width:1}
.sounds .snore{fill:#3FB8A8}.sounds .speech{fill:#D77BD9}.sounds .noise{fill:#C9A45C}
.sounds .tlabel{font:400 16px var(--sans);fill:var(--cap)}

/* ---- the foot of every page ---- */
.foot{border-top:1px solid var(--hair);padding:30px var(--gutter) 44px;font-size:14px;color:var(--cap)}
.foot ul{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 12px;padding:0;list-style:none}
.foot a,.foot .here{display:inline-block;min-height:44px;line-height:44px}
.foot a{color:var(--ink2)}
.foot .here{color:var(--ink)}
.foot p{margin:6px 0;max-width:70ch}
.foot .medical{font-size:13px}

/* ---- the documents: the policy, the terms, the deletion page, support ---- */
.doc{max-width:42rem;margin:0 auto;padding:6svh var(--gutter) 10svh;overflow-wrap:break-word}
.doc h1{font-size:clamp(30px,6vw,52px);line-height:1.1;overflow-wrap:break-word;hyphens:auto}
.doc .stamp{color:var(--cap);font-size:14px;margin:12px 0 34px;font-variant-numeric:tabular-nums}
.doc .notice{border-inline-start:2px solid var(--accent);padding:4px 14px;margin:0 0 28px;color:var(--ink)}
.doc .lead{font-size:20px;color:var(--ink);line-height:1.5;margin:0 0 34px}
.doc section{padding:26px 0;border-top:1px solid var(--hair)}
.doc section.pin{border-top:1px solid var(--accent)}
.doc h2{font-size:24px;line-height:1.25;margin:0 0 14px}
.doc section.pin h2{color:var(--accent)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-inline-start:22px}
.doc li{margin:0 0 10px}
.doc li::marker{color:var(--cap)}
.doc ol li::marker{color:var(--accent);font-family:var(--serif);font-weight:700}
.doc strong{color:var(--ink);font-weight:500}

/* ---- 04:04 ---- */
.lost main{min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:8svh var(--gutter);gap:8px}
.lost .clock{font-size:clamp(88px,26vw,200px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.lost .horizon{width:100%;height:1px;background:var(--hair);margin:18px 0 26px}
.lost section{margin:6px 0}
.lost .missing{color:var(--ink);margin:0;font-size:18px}
.lost section p{margin:2px 0}

/* ---- wide screens: the clock in its own column, the words and the screen side by side ---- */
@media (min-width:960px){
  .scene{grid-template-columns:minmax(0,1fr) 300px;align-items:center;min-height:100svh;column-gap:clamp(40px,5vw,80px)}
  .scene.bare{grid-template-columns:minmax(0,1fr)}
  .part,.intro-part{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(40px,6vw,96px)}
  .part.bare,.intro-part.bare{grid-template-columns:minmax(0,1fr)}
  .part .phones,.intro-part .phones{position:sticky;top:8svh;flex-direction:column;align-items:center}
  .phone{width:300px}
}

/* ---- motion: only with site.js, and never for a visitor who asks for less ---- */
@media (prefers-reduced-motion:no-preference){
  .dawn .sun{animation:rise 3s cubic-bezier(.2,.65,.2,1) both}
  .dawn .word{animation:appear 1.6s 1.2s ease-out both}
  .stages{animation:drift 60s linear infinite alternate}
  /* The clock. It replaces each scene's printed time, which stays for everyone without the script. On a phone it is
     a band along the top of the story; on a wide screen the whole start column. Its box never changes size, so the
     digits turning cannot move anything on the page. */
  .motion .rail{display:block;position:sticky;top:0;z-index:5;height:64px;margin-bottom:-64px;pointer-events:none}
  /* Solid, never translucent: the words scrolling under the band showed through its digits (round 485 A5, A8). */
  .motion .clock-box{height:64px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:center;background:#080706;border-bottom:1px solid var(--hair);box-shadow:0 8px 16px -8px #080706}
  .motion .clock{margin:0;font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate;transition:color .8s}
  .motion.ringing .clock{color:var(--accent)}
  .motion.day .clock{color:var(--gold)}
  .motion .scene .time{display:none}
  .motion .scene{padding-top:calc(64px + clamp(24px,4svh,56px));padding-bottom:clamp(40px,8svh,96px)}
  .motion .trace path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
  /* The scene the clock is on is lit; the others wait, dimmed. One class, set with the clock's time on the same frame. */
  /* Dimmed, never faded out: .32 read at about 2:1 on a phone, where the scene being read often sits below the middle
     line (round 485 A8). Below 600 pixels nothing dims at all (the rule at the foot). */
  .motion .live .scene>.words,.motion .live .scene>.phones{opacity:.72;transition:opacity .5s ease}
  .motion .live .scene.on>.words,.motion .live .scene.on>.phones{opacity:1}
  .motion .draw .rise,.motion .draw .curve:not(.later){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.6,.2,1)}
  .motion .draw.drawn .rise,.motion .draw.drawn .curve:not(.later){stroke-dashoffset:0}
  .motion.ringing .window .ringdot{animation:ring 1.1s ease-in-out 3}
  .motion.ringing .clock-box::after{content:'';position:absolute;inset:0;border-bottom:2px solid var(--accent);animation:pulse 1.2s ease-in-out 3}
}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  /* The rail is a third of the story; each scene's ground reaches back under it (34 / 66 of the scene's width). */
  .motion .story{display:grid;grid-template-columns:34% 66%}
  .motion .scene>.ground{inset-inline-start:-51.5152%}
  .motion .rail{grid-column:1;grid-row:1;position:relative;top:auto;height:auto;margin:0;z-index:2}
  .motion .clock-box{position:sticky;top:0;height:100svh;padding:0 0 0 var(--gutter);padding-inline:var(--gutter) 0;background:none;border:0;justify-content:center}
  .motion .clock{font-size:clamp(108px,10.5vw,190px)}
  .motion .scenes{grid-column:2;grid-row:1}
  .motion .scene{padding-top:clamp(64px,14svh,140px)}
  .motion .trace{inset-inline-start:-10px}
  .motion.ringing .clock-box::after{border:0}
  .motion.ringing .clock{text-shadow:0 0 60px rgba(242,166,90,.45)}
}
@keyframes rise{from{transform:translateY(21px)}to{transform:none}}
@keyframes appear{from{opacity:0;transform:translateY(1.5px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-4%)}}
@keyframes ring{50%{r:9}}
@keyframes pulse{50%{opacity:.2}}

@media (max-width:599px){
  :root{--gutter:16px}
  .bar{gap:4px 12px}
  .langs ul{gap:0}
  .langs a{padding:9px 5px;font-size:13.5px}
  /* On a phone the heart trace was a thin red line down the edge, read as a stray rule, and the page is all words and
     screens: the trace goes, the scenes take the whole width, and no scene is dimmed (round 485 A8). */
  .trace{display:none}
  .scene{padding-inline-start:var(--gutter)}
  .motion .live .scene>.words,.motion .live .scene>.phones{opacity:1}
}
@media print{
  body{background:#fff;color:#000}
  .bar,.foot nav,.trace,.rail,.ground{display:none}
}
/* The story's grounds, scene by scene (GROUNDS). */
#evening>.ground{background:linear-gradient(180deg,#0F0E0D,#0B0A09)}
#asleep>.ground{background:linear-gradient(180deg,#0B0A09,#060505)}
#night>.ground{background:linear-gradient(180deg,#060505,#060605)}
#together>.ground{background:linear-gradient(180deg,#060605,#140D09)}
#window>.ground{background:linear-gradient(180deg,#140D09,#140D09)}
#window-home>.ground{background:linear-gradient(180deg,#140D09,#24160D)}
#window-ring>.ground{background:linear-gradient(180deg,#24160D,#2A1A0F)}
#morning>.ground{background:linear-gradient(180deg,#2A1A0F,#1C150F)}
#meal>.ground{background:linear-gradient(180deg,#1C150F,#1A140F)}
#day>.ground{background:linear-gradient(180deg,#1A140F,#1A140F)}
#ask>.ground{background:linear-gradient(180deg,#1A140F,#0F0E0D)}
#again>.ground{background:linear-gradient(180deg,#0F0E0D,#0F0E0D)}