:root{
  --ink:#633e4c;--ink-2:#896675;--muted:#b1909c;--rose:#c87f99;--rose-2:#e8b4c5;
  --paper:#fff9fa;--paper-2:#fcecef;--cream:#fff4dc;--line:rgba(99,62,76,.13);
  --safe-top:max(18px,env(safe-area-inset-top));--safe-bottom:max(20px,env(safe-area-inset-bottom));
  --display:"Aref Ruqaa","Noto Naskh Arabic",serif;--text:"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;--latin:"Manrope",Arial,sans-serif;
}
*{box-sizing:border-box}html{background:#eadbe1}html,body{margin:0;min-height:100%;font-family:var(--text);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{overflow-x:hidden;background:#eadbe1}body.locked{overflow-x:hidden}button{font:inherit;color:inherit}
.desktop-field{position:fixed;inset:0;z-index:-5;background:radial-gradient(56% 45% at 20% 8%,#fff7f8 0,transparent 72%),radial-gradient(50% 55% at 84% 88%,#caa7b3 0,transparent 70%),linear-gradient(150deg,#f3e7eb,#dcc9d0)}
.phone{position:relative;width:min(100%,430px);margin:0 auto;background:var(--paper);box-shadow:0 0 0 1px rgba(84,45,59,.035)}
.story-track{height:100svh;min-height:100svh;position:relative}.started .story-track{height:900svh;min-height:5600px}.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--paper)}
.paper{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#fff9fa 0%,#fcebed 100%)}.paper:after{content:"";position:absolute;inset:-15%;opacity:.022;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.glow{position:absolute;border-radius:50%;filter:blur(52px);opacity:.55}.g1{width:270px;height:270px;right:-125px;top:-65px;background:rgba(255,255,255,.95)}.g2{width:300px;height:300px;left:-175px;top:36%;background:rgba(232,164,187,.35)}.g3{width:240px;height:230px;right:-105px;bottom:-70px;background:rgba(255,225,181,.38)}
.silk{position:absolute;opacity:0;border-radius:52% 48% 65% 35% / 50% 56% 44% 50%;transform-origin:center;will-change:transform,opacity}.silk-a{width:390px;height:180px;right:-190px;top:29%;background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(237,170,192,.19));transform:rotate(-18deg)}.silk-b{width:330px;height:165px;left:-175px;top:48%;background:linear-gradient(145deg,rgba(255,241,221,.5),rgba(228,151,179,.13));transform:rotate(18deg)}
.stars{position:absolute;inset:0;opacity:.32}.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff3d7;box-shadow:0 0 9px rgba(255,239,203,.5)}
.hud{position:absolute;inset:0 0 auto;z-index:70;height:74px;padding:calc(var(--safe-top) + 10px) 22px 0;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none;opacity:0}.started .hud{opacity:1}.brand{direction:ltr;font-family:var(--latin);font-size:6.5px;letter-spacing:.17em;color:rgba(99,62,76,.38);display:flex;gap:7px;align-items:center;white-space:nowrap}.brand i{width:14px;height:1px;background:rgba(99,62,76,.2)}.sound{pointer-events:auto;width:30px;height:30px;margin-top:-6px;border:0;border-radius:50%;background:rgba(255,255,255,.52);box-shadow:inset 0 0 0 1px rgba(99,62,76,.06);display:grid;place-items:center}.sound svg{width:14px;height:14px;fill:none;stroke:#805765;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.sound[aria-pressed="true"]{opacity:.4}
.scene{position:absolute;inset:0;z-index:10;opacity:0;pointer-events:none;padding:var(--safe-top) 24px var(--safe-bottom);will-change:opacity,transform}.intro{opacity:1;pointer-events:auto}.started .intro{pointer-events:none}.index{position:absolute;top:calc(var(--safe-top) + 29px);right:24px;margin:0;direction:ltr;font-family:var(--latin);font-size:6.5px;letter-spacing:.16em;color:rgba(99,62,76,.4)}
/* INTRO */
.intro-mark{position:absolute;top:calc(var(--safe-top) + 28px);left:24px;font-family:var(--latin);font-size:7px;letter-spacing:.18em;color:rgba(99,62,76,.42)}.intro-title{position:absolute;top:37%;right:24px;left:24px;transform:translateY(-50%);text-align:center}.intro-title p{font-family:var(--display);font-size:23px;line-height:1;margin:0 0 4px;color:#916777}.intro-title h1{font-family:var(--display);font-weight:700;font-size:82px;line-height:.96;margin:0;color:#603847;letter-spacing:-.035em}.intro-title>span{display:block;margin-top:15px;font-size:11px;line-height:1.9;color:#9b7884}.start-wrap{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 48px);display:grid;place-items:center}.start-button{border:0;background:none;padding:8px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.start-ring{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(121,75,93,.17)}.start-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(121,75,93,.08)}.start-ring i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7df 0 22%,#d991a8 55%,#a75f79 100%);box-shadow:0 0 0 5px rgba(223,148,173,.11),0 0 18px rgba(216,135,164,.28)}.start-label{font-family:var(--display);font-size:16px;color:#875d6d}.opening-ripple{position:absolute;z-index:40;width:20px;height:20px;border:1px solid rgba(203,125,153,.3);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none}
/* DATE */
.date-layout{position:absolute;top:22%;right:24px;left:24px;display:flex;align-items:flex-end;gap:15px;direction:ltr}.date-main{font-family:var(--latin);font-size:132px;font-weight:300;letter-spacing:-.105em;line-height:.72;color:#68404e}.date-side{direction:rtl;padding-bottom:8px;display:flex;flex-direction:column;align-items:flex-start}.date-side strong{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;color:#805565}.date-side span{font-family:var(--latin);font-size:9px;letter-spacing:.17em;margin-top:6px;color:#a27b88}.date-line{position:absolute;right:24px;left:24px;top:47%;height:1px;background:linear-gradient(90deg,transparent,rgba(99,62,76,.15) 20%,rgba(99,62,76,.15) 80%,transparent)}.date-copy{position:absolute;right:24px;bottom:calc(var(--safe-bottom) + 78px);max-width:290px;text-align:right}.date-copy span{font-family:var(--display);font-size:18px;color:#9a7180}.date-copy h2{font-family:var(--display);font-weight:700;font-size:39px;line-height:1.08;margin:1px 0 9px;color:#613948}.date-copy p{margin:0;font-size:11px;line-height:1.9;color:#997783}.gesture{position:absolute;left:24px;bottom:calc(var(--safe-bottom) + 26px);margin:0;font-family:var(--display);font-size:13px;color:#b18b97}
/* NAME */
.name-lead{position:absolute;top:18%;right:24px;display:flex;flex-direction:column;align-items:flex-start}.name-lead span{font-family:var(--display);font-size:18px;color:#94707d}.name-lead strong{font-family:var(--display);font-size:45px;line-height:.95;color:#62404c}.wordmark-box{position:absolute;right:18px;left:18px;top:38%;transform:translateY(-50%);clip-path:inset(0 100% 0 0)}.wordmark{display:block;width:100%;height:auto;overflow:visible}.word-body{fill:#643b4b}.name-dot,.final-dot{fill:#c9849b;opacity:0;filter:drop-shadow(0 0 6px rgba(255,225,188,.75))}.name-note{position:absolute;left:24px;bottom:calc(var(--safe-bottom) + 66px);width:205px;text-align:left}.name-note span{font-family:var(--display);font-weight:700;font-size:23px;color:#704553}.name-note p{font-family:var(--display);font-size:18px;line-height:1.6;margin:2px 0 0;color:#8b6572}
/* DREAM */
.dream-quote{position:absolute;top:23%;right:24px;left:24px}.dream-quote span{font-family:var(--display);font-size:18px;color:#95717e}.dream-quote h2{font-family:var(--display);font-weight:700;font-size:38px;line-height:1.28;margin:7px 0 0;color:#603847}.dream-stamp{position:absolute;left:24px;bottom:calc(var(--safe-bottom) + 54px);display:flex;align-items:center;gap:10px;direction:ltr}.dream-stamp i{width:34px;height:34px;border-radius:50%;border:1px solid rgba(104,63,78,.12);position:relative}.dream-stamp i:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#c9849b;left:50%;top:50%;transform:translate(-50%,-50%)}.dream-stamp span{font-family:var(--latin);font-size:6px;line-height:1.65;letter-spacing:.13em;color:#a17d89}
/* PRAYER */
.prayer-title{position:absolute;top:14%;right:24px}.prayer-title span{display:block;font-family:var(--display);font-size:18px;color:#9b7482}.prayer-title strong{display:block;font-family:var(--display);font-size:57px;line-height:.9;color:#603847}.prayer-copy{position:absolute;right:24px;left:24px;top:34%;text-align:right;max-width:308px}.prayer-copy p{font-family:var(--display);font-size:20px;line-height:1.92;margin:0 0 20px;color:#754e5c;opacity:0;transform:translateY(8px)}.prayer-copy .p2{padding-right:18px;color:#885f6d}.prayer-copy .p3{padding-right:4px;color:#9a7480;margin-top:10px}.prayer-copy b{display:block;font-family:var(--display);font-size:30px;margin-top:16px;color:#603847;opacity:0;transform:translateY(8px)}
/* LETTER */
.letter-head{position:absolute;top:14%;right:24px}.letter-head h2{font-family:var(--display);font-size:54px;font-weight:700;line-height:.9;margin:0;color:#603847}.letter-head span{font-family:var(--display);font-size:21px;color:#97717e}.letter-body{position:absolute;right:24px;left:24px;bottom:calc(var(--safe-bottom) + 48px);padding-right:20px;border-right:1px solid var(--line);max-width:335px}.letter-body p{font-family:var(--display);font-size:16px;line-height:1.88;margin:0 0 13px;color:#795463;opacity:0;transform:translateY(8px)}.letter-body p:first-child{font-size:19px;color:#68404e}.letter-body b{font-weight:700}
/* TIME */
.time-head{position:absolute;top:16%;right:24px;max-width:240px}.time-head span{font-family:var(--display);font-size:18px;color:#9a7480}.time-head h2{font-family:var(--display);font-weight:700;font-size:39px;line-height:1.1;margin:2px 0 0;color:#603847}.time-composition{position:absolute;right:24px;left:24px;bottom:calc(var(--safe-bottom) + 40px)}.calendar-age{display:flex;align-items:flex-end;gap:11px}.calendar-age div{display:flex;align-items:baseline;gap:4px}.calendar-age strong{font-family:var(--latin);font-size:39px;font-weight:300;line-height:.95;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:#68404e}.calendar-age span{font-family:var(--display);font-size:13px;color:#9b7682;direction:rtl}.calendar-age em{font-style:normal;font-size:11px;color:#c2a4ae;padding-bottom:7px}.clock-stack{display:inline-block;margin-top:24px}.live-clock{direction:ltr;margin-top:0;font-family:var(--latin);font-size:58px;font-weight:300;line-height:.92;letter-spacing:-.065em;color:#603847;white-space:nowrap;font-variant-numeric:tabular-nums}.live-clock i{font-style:normal;color:#be98a6;font-weight:300}.clock-labels{direction:ltr;display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;margin-top:7px;color:#a98994;font-family:var(--display);font-size:11px}.clock-labels span{text-align:center}.time-composition>p{margin:21px 0 0;font-size:8px;letter-spacing:.03em;color:#ac8995}.time-composition>p span{font-family:var(--latin)}
/* FINAL */
.final-wordmark-box{position:absolute;right:18px;left:18px;top:39%;transform:translateY(-50%);clip-path:inset(0 100% 0 0)}.final-copy{position:absolute;right:24px;bottom:calc(var(--safe-bottom) + 68px)}.final-copy span{font-family:var(--latin);font-size:8px;letter-spacing:.15em;color:#9e7886}.final-copy h2{font-family:var(--display);font-size:31px;line-height:1.25;margin:8px 0 0;color:#633c4a}
/* ORB */
.orb{position:absolute;z-index:50;left:50%;top:76%;width:14px;height:14px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;will-change:left,top,opacity}.orb-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff9e8 0 20%,#e2a1b8 52%,#a75f79 100%);box-shadow:0 0 0 5px rgba(221,145,171,.08),0 0 18px rgba(213,134,163,.28)}.orb-spec{position:absolute;width:3px;height:3px;border-radius:50%;left:3px;top:2px;background:rgba(255,255,255,.85)}.orb-ring{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(198,122,150,.14);opacity:0;transform:scale(.72)}.orb.orbiting .orb-ring{opacity:1;animation:microOrbit 4.8s ease-in-out infinite}.orb.orbiting .orb-core{animation:microFloat 4.8s ease-in-out infinite}@keyframes microOrbit{0%,100%{transform:scale(.72) rotate(0)}50%{transform:scale(1.12) rotate(180deg)}}@keyframes microFloat{0%,100%{transform:translate3d(-1px,1px,0)}50%{transform:translate3d(1px,-1px,0)}}
.started .orb{opacity:1}.opening .start-ring i{opacity:0}

@media(max-height:700px){
  .intro-title{top:35%}
  .intro-title h1{font-size:70px}
  .date-main{font-size:108px}
  .date-layout{top:20%}
  .date-copy{bottom:calc(var(--safe-bottom) + 54px)}
  .name-lead{top:16%}
  .wordmark-box{top:38%}
  .name-note{bottom:calc(var(--safe-bottom) + 42px)}
  .prayer-title{top:13%}
  .prayer-copy{top:31%;max-width:294px}
  .prayer-copy p{font-size:17px;line-height:1.78;margin-bottom:14px}
  .prayer-copy .p2,.prayer-copy .p3{padding-right:0}
  .letter-head{top:12%}
  .letter-head h2{font-size:44px}
  .letter-body{bottom:calc(var(--safe-bottom) + 32px)}
  .letter-body p{font-size:14px;line-height:1.68;margin-bottom:9px}
  .time-head{top:13%}
  .clock-stack{margin-top:20px}.live-clock{font-size:49px}
  .calendar-age strong{font-size:34px}
}

@media(min-width:431px){
  .phone{margin:24px auto;height:calc(100vh - 48px);border-radius:28px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .phone::-webkit-scrollbar{display:none}
  .stage{height:calc(100vh - 48px);min-height:560px}
  .story-track{height:100%;min-height:100%}
  .started .story-track{height:900svh;min-height:5600px}
  .hud{position:fixed;max-width:430px;left:50%;right:auto;width:430px;transform:translateX(-50%)}
}

@media(prefers-reduced-motion:reduce){
  .orb.orbiting .orb-ring,.orb.orbiting .orb-core{animation:none}
}

.letter-body .inline-date{font-weight:700;white-space:nowrap;unicode-bidi:isolate;color:#744d5b}
.started .stage{touch-action:pan-y}