/* Unfold Live -- the v3 phone design, from "Unfold Live v3.dc.html". */
:root{
  --bg:#F8F6F2;--ink:#1A1917;--sub:#8E877C;--faint:#CDC6BA;--label:#A8A196;--line:#E2DDD4;
  --acc:#9A7B2F;--stage:#E9E5DE;--stage2:#EFEBE4;
  --top:58px;--ghost:100px;--dotsY:22px;--toastTop:88px;--passTop:56px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:Newsreader,Georgia,serif;--urdu:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--stage);overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background .5s}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
#stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px;background:var(--stage);transition:background .5s}
#shell{position:relative;width:390px;height:844px;border-radius:52px;border:10px solid #1A1917;box-shadow:0 40px 80px -30px rgba(0,0,0,.45);transform-origin:top center;flex-shrink:0;overflow:hidden;background:var(--bg);color:var(--ink);transition:background .5s,color .5s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.dark #shell{border-color:#2A2724}
body.mobile #stage{padding:0}
body.mobile #shell{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none;transform:none!important;margin:0!important}
body.mobile{--top:max(54px,calc(env(safe-area-inset-top) + 18px));--ghost:max(96px,calc(env(safe-area-inset-top) + 60px));--dotsY:max(26px,calc(env(safe-area-inset-bottom) + 10px));--toastTop:max(84px,calc(env(safe-area-inset-top) + 48px));--passTop:max(48px,calc(env(safe-area-inset-top) + 16px))}

.page{position:absolute;inset:0;transition:transform .5s var(--ease)}
.drag .page,.drag .slide,.drag .wh,.drag #card{transition:none!important}
.kick{font-size:11px;letter-spacing:.24em;color:var(--label)}
.acc{color:var(--acc)}
.top{position:absolute;top:var(--top);left:0;right:0}
.center{text-align:center}
.foot{position:absolute;bottom:58px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.2em;color:var(--label);pointer-events:none}

/* READ BY */
.rb-head{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2}
.rb-modes{display:flex;gap:36px}
.rb-mode{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--serif);font-weight:300;font-size:31px;color:var(--faint);border-bottom:1.5px solid transparent;transition:color .3s,border-color .3s}
.rb-mode.it{font-style:italic}
.rb-mode.on{color:var(--ink);border-bottom-color:var(--acc)}
.rb-band{position:absolute;left:28px;right:28px;top:50%;height:74px;transform:translateY(-50%);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);pointer-events:none}
.wh{position:absolute;left:28px;right:28px;top:50%;height:74px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .45s var(--ease),opacity .45s,color .25s}
.wh.chosen{color:var(--acc)}
.wh-row{display:flex;align-items:baseline;gap:12px;max-width:100%}
.wh-pre{font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.wh-lbl{font-family:var(--serif);font-weight:300;font-size:30px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-sub{font-size:10.5px;letter-spacing:.18em;color:var(--label);transition:opacity .3s}
.wh-sub.now{color:var(--acc)}

/* READING */
.slide{position:absolute;inset:0;padding:0 34px;transition:transform .55s var(--ease),opacity .55s}
.sl-top{position:absolute;top:var(--top);left:24px;right:24px;text-align:center;font-size:10.5px;letter-spacing:.2em;line-height:1.6;color:var(--label)}
.sl-ghost{position:absolute;top:var(--ghost);left:34px;right:34px;font-weight:300;color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-mid{position:absolute;inset:0 34px;display:flex;flex-direction:column;justify-content:center}
.sl-line{display:flex;flex-direction:column;max-height:calc(100% - 330px);overflow:hidden}
.sl-ref{font-size:11px;letter-spacing:.22em;color:var(--acc);margin-bottom:22px}
.sl-text{letter-spacing:-.012em;text-wrap:pretty}
.sl-sub{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.42;color:var(--sub)}
.sl-dot{margin-top:26px;width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:0;transition:opacity .4s;flex-shrink:0}
.sl-dot.on{opacity:1}
.sl-title{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.sl-kick{font-size:11px;letter-spacing:.24em;color:var(--acc)}
.sl-big{font-family:var(--serif);font-weight:300;font-size:46px;line-height:1.05;letter-spacing:-.025em}
.sl-small{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--sub)}
.ur{font-family:var(--urdu)}
.sl-foot{position:absolute;bottom:58px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.2em;color:var(--label)}

#lens{position:absolute;inset:0;z-index:3;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s ease}
#lens.on{opacity:1}
.lens-body{position:absolute;top:96px;left:34px;right:34px}
.lens-ref{font-size:11px;letter-spacing:.22em;color:var(--label);margin-bottom:16px}
#lensText{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
#lensText span{color:var(--faint)}
#lensText span.cur{color:var(--ink)}
.lens-lbl{position:absolute;font-size:12px;letter-spacing:.2em;color:var(--label);transition:all .25s}
.lens-lbl.on{color:var(--acc);transform:scale(1.25)}
.lens-lbl.urlbl{font-family:var(--urdu);font-size:16px;letter-spacing:0}
#lensThumb{position:absolute;left:50%;bottom:146px;width:58px;height:58px;margin-left:-29px;border-radius:50%;border:1px solid var(--faint);transition:transform .12s}

#pulse{position:absolute;left:50%;top:50%;z-index:4;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid var(--acc);opacity:0;transform:scale(.4);transition:opacity .6s ease,transform .6s var(--ease);pointer-events:none}
#pulse.on{opacity:1;transform:scale(1)}

#hint{position:absolute;inset:0;z-index:5;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;opacity:0;pointer-events:none;transition:opacity .9s ease}
#hint.on{opacity:1}
.hint-brand{display:flex;flex-direction:column;align-items:center;gap:8px}
.hint-word{font-family:var(--serif);font-weight:300;font-size:44px;letter-spacing:-.02em}
.hint-tag{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--sub)}
.hint-grid{display:grid;grid-template-columns:auto auto;column-gap:22px;row-gap:12px;font-size:13px;color:var(--sub)}
.hint-grid span:nth-child(odd){color:var(--ink);text-align:right}

/* KEPT */
#keptEmpty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 50px;text-align:center}
.ke-h{font-family:var(--serif);font-style:italic;font-weight:300;font-size:28px}
.ke-s{font-size:14px;line-height:1.5;color:var(--sub)}
.kslide{position:absolute;inset:0 34px;display:flex;flex-direction:column;justify-content:center;transition:transform .55s var(--ease),opacity .55s}
.ks-meta{margin-top:22px;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.18em;color:var(--acc)}
.ks-meta span:last-child{color:var(--label);white-space:nowrap}

/* YOU */
.yslide{position:absolute;inset:0;padding:0 34px;transition:transform .55s var(--ease)}
.y-mid{position:absolute;inset:0 34px;display:flex;flex-direction:column;justify-content:center}
.y-big{font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.035em}
.y-sub{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--sub)}
.y-chips{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.y-chips div{transition:all .3s}
.y-rows{margin-top:36px;display:flex;flex-direction:column}
.y-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-top:.5px solid var(--line);font-size:14px}
.y-row span:last-child{color:var(--acc);text-align:right}

/* WHOLE PASSAGE */
#pass{position:absolute;inset:0;z-index:18;background:var(--bg);transform:translateY(105%);transition:transform .55s var(--ease);display:flex;flex-direction:column}
#pass.drag{transition:none}
#passScroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:var(--passTop) 30px 90px;cursor:auto;user-select:text;-webkit-user-select:text}
.pass-pull{text-align:center;font-size:10px;letter-spacing:.22em;color:var(--faint)}
.pass-big{margin-top:28px;font-family:var(--serif);font-weight:300;font-size:42px;line-height:1;letter-spacing:-.02em}
.pass-sub{margin-top:6px;display:flex;justify-content:space-between;align-items:baseline}
.pass-sub span:first-child{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--sub)}
.pass-sub span:last-child{font-size:11px;letter-spacing:.2em}
.pass-h{margin-top:40px;font-size:10.5px;letter-spacing:.22em;color:var(--label);padding-bottom:12px;border-bottom:.5px solid var(--line)}
.pv{padding:22px 0;border-bottom:.5px solid var(--line);display:flex;flex-direction:column;gap:14px}
.pv-n{font-size:11px;letter-spacing:.2em;color:var(--acc)}
.pv-en{font-family:var(--serif);font-size:19px;line-height:1.5}
.pv-ur{font-family:var(--urdu);font-size:16px;line-height:2.2;text-align:right;color:var(--sub)}
.pv-ro{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:var(--sub)}
#passCom{padding-top:22px}
#passCom span{background-size:100% 28%;background-position:0 88%;background-repeat:no-repeat}
.pass-note{margin-top:44px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:var(--sub);text-align:center}

/* SHARE */
#share{position:absolute;inset:0;z-index:20;background:var(--stage2);opacity:0;pointer-events:none;transition:opacity .35s ease}
#share.on{opacity:1;pointer-events:auto}
#card{position:absolute;left:40px;right:40px;top:50%;aspect-ratio:4/5;border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 50px -18px rgba(0,0,0,.4);transition:transform .45s var(--ease),background .4s,color .4s;overflow:hidden}
#cardBrand{font-size:8px;letter-spacing:.34em;opacity:.65}
#cardText{font-weight:300;overflow:hidden}
#cardRef{font-family:var(--serif);font-style:italic;font-size:11px}
#shareDots{position:absolute;left:0;right:0;bottom:96px;display:flex;justify-content:center;gap:8px}
#shareDots div,#dots div{border-radius:2px;transition:all .3s}

#toast{position:absolute;top:var(--toastTop);left:50%;z-index:30;transform:translateX(-50%) translateY(-10px);opacity:0;transition:all .45s var(--ease);font-size:11px;letter-spacing:.22em;color:var(--acc);white-space:nowrap;pointer-events:none;background:var(--bg);padding:6px 12px;border-radius:12px}
#toast.on{opacity:1;transform:translateX(-50%)}
#dots{position:absolute;bottom:var(--dotsY);left:0;right:0;display:flex;justify-content:center;gap:6px;transition:opacity .4s;pointer-events:none;z-index:6}
#loading{position:absolute;inset:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s;pointer-events:none}
#loading span{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:breathe 1.4s ease-in-out infinite}
#loading.off{opacity:0}
@keyframes breathe{50%{transform:scale(2.2);opacity:.4}}