@layer components{.ink-book.ink-piece[data-ink=again]{--ink-step: .0625s ;--ink-lead: calc(16 * var(--ink-step))}.ink-book{--ink-step: calc(1s / 12);--ink-stroke: .7;--ink-draw: 2.2s;--ink-pause: 3s;width:100%;height:auto}@media(max-width:47.99rem){.ink-book{--ink-stroke: 1}}.ink-book__cover{transform:scaleX(-1)}.ink-book__outside,.ink-book__tint{opacity:0}.ink-book__line{stroke-dasharray:1 2;stroke-dashoffset:0}@media(prefers-reduced-motion:no-preference){.ink-book[data-ink=waiting] .ink-book__cover{transform:scaleX(1)}.ink-book[data-ink=waiting] .ink-book__body{translate:24px 0}.ink-book[data-ink=waiting] .ink-book__outside{opacity:1}.ink-book[data-ink=waiting] .ink-book__inside,.ink-book[data-ink=waiting] .ink-book__open{opacity:0}.ink-book[data-ink=waiting] .ink-book__line{stroke-dashoffset:1.05}.ink-book[data-ink=waiting] .ink-book__ribbon{transform:scaleY(0)}.ink-book:is([data-ink=playing],[data-ink=again]) :is(.ink-book__cover,.ink-book__outside,.ink-book__inside,.ink-book__open,.ink-book__body,.ink-book__line,.ink-book__tint,.ink-book__ribbon){animation-timing-function:linear;animation-fill-mode:backwards}.ink-book:is([data-ink=playing],[data-ink=again]) :is(.ink-book__outside,.ink-book__inside,.ink-book__open){animation-timing-function:step-end}.ink-book:is([data-ink=playing],[data-ink=again]) :is(.ink-book__cover,.ink-book__outside,.ink-book__inside,.ink-book__open){animation-duration:calc(14 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 1 * var(--ink-step))}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__cover{animation-name:ink-book-swing}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__outside{animation-name:ink-book-outside}.ink-book:is([data-ink=playing],[data-ink=again]) :is(.ink-book__inside,.ink-book__open){animation-name:ink-book-inside}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__body{animation-name:ink-book-thump,ink-book-slide;animation-duration:calc(4 * var(--ink-step)),calc(14 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 15 * var(--ink-step)),calc(var(--ink-lead) + 1 * var(--ink-step))}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__line{animation-name:ink-book-write;animation-duration:calc(5 * var(--ink-step));animation-delay:calc(var(--ink-lead) + (11 + var(--line) * 2) * var(--ink-step))}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__tint{animation-name:ink-book-light;animation-duration:calc(10 * var(--ink-step));animation-delay:calc(var(--ink-lead) + (11 + var(--line) * 2) * var(--ink-step))}.ink-book:is([data-ink=playing],[data-ink=again]) .ink-book__ribbon{animation-name:ink-book-drop;animation-duration:calc(6 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 24 * var(--ink-step))}.ink-book[data-ink=again] .ink-book__cover{animation-name:ink-book-swing,ink-book-swing;animation-duration:calc(14 * var(--ink-step)),calc(12 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 1 * var(--ink-step)),0s;animation-direction:normal,reverse;animation-timing-function:linear,linear;animation-fill-mode:backwards,none}.ink-book[data-ink=again] .ink-book__outside{animation-name:ink-book-outside,ink-book-outside;animation-duration:calc(14 * var(--ink-step)),calc(12 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 1 * var(--ink-step)),0s;animation-direction:normal,reverse;animation-timing-function:step-end,step-end;animation-fill-mode:backwards,none}.ink-book[data-ink=again] :is(.ink-book__inside,.ink-book__open){animation-name:ink-book-inside,ink-book-inside;animation-duration:calc(14 * var(--ink-step)),calc(12 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 1 * var(--ink-step)),0s;animation-direction:normal,reverse;animation-timing-function:step-end,step-end;animation-fill-mode:backwards,none}.ink-book[data-ink=again] .ink-book__body{animation-name:ink-book-thump,ink-book-slide,ink-book-slide;animation-duration:calc(4 * var(--ink-step)),calc(14 * var(--ink-step)),calc(12 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 15 * var(--ink-step)),calc(var(--ink-lead) + 1 * var(--ink-step)),0s;animation-direction:normal,normal,reverse;animation-timing-function:linear,linear,linear;animation-fill-mode:backwards,backwards,none}.ink-book[data-ink=again] .ink-book__line{animation-name:ink-book-write,ink-book-written;animation-duration:calc(5 * var(--ink-step)),calc(7 * var(--ink-step));animation-delay:calc(var(--ink-lead) + (11 + var(--line) * 2) * var(--ink-step)),0s;animation-direction:normal,normal;animation-timing-function:linear,linear;animation-fill-mode:backwards,none}.ink-book[data-ink=again] .ink-book__ribbon{animation-name:ink-book-drop,ink-book-lift;animation-duration:calc(6 * var(--ink-step)),calc(4 * var(--ink-step));animation-delay:calc(var(--ink-lead) + 24 * var(--ink-step)),0s;animation-direction:normal,normal;animation-timing-function:linear,linear;animation-fill-mode:backwards,none}@keyframes ink-book-written{0%,to{stroke-dashoffset:0}}@keyframes ink-book-lift{0%{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes ink-book-swing{0%{transform:scaleX(1)}7.14%{transform:scaleX(.999)}14.29%{transform:scaleX(.988)}21.43%{transform:scaleX(.942)}28.57%{transform:scaleX(.83)}35.71%{transform:scaleX(.63)}42.86%{transform:scaleX(.342)}50%{transform:scaleX(0)}57.14%{transform:scaleX(-.342)}64.29%{transform:scaleX(-.63)}71.43%{transform:scaleX(-.83)}78.57%{transform:scaleX(-.942)}85.71%{transform:scaleX(-.988)}92.86%{transform:scaleX(-.999)}to{transform:scaleX(-1)}}@keyframes ink-book-slide{0%{translate:24px 0}7.14%{translate:23.7px 0}14.29%{translate:22.8px 0}21.43%{translate:21.4px 0}28.57%{translate:19.5px 0}35.71%{translate:17.2px 0}42.86%{translate:14.7px 0}50%{translate:12px 0}57.14%{translate:9.3px 0}64.29%{translate:6.8px 0}71.43%{translate:4.5px 0}78.57%{translate:2.6px 0}85.71%{translate:1.2px 0}92.86%{translate:.3px 0}to{translate:0px 0}}@keyframes ink-book-outside{0%{opacity:1}50%{opacity:0}to{opacity:0}}@keyframes ink-book-inside{0%{opacity:0}50%{opacity:1}to{opacity:1}}@keyframes ink-book-thump{0%{transform:translateY(0)}25%{transform:translateY(1.8px)}50%{transform:translateY(.9px)}75%{transform:translateY(.3px)}to{transform:translateY(0)}}@keyframes ink-book-write{0%{stroke-dashoffset:1.05}20%{stroke-dashoffset:.84}40%{stroke-dashoffset:.63}60%{stroke-dashoffset:.42}80%{stroke-dashoffset:.21}to{stroke-dashoffset:0}}@keyframes ink-book-light{0%{transform:scaleX(0);opacity:0}10%{transform:scaleX(.35);opacity:1}20%{transform:scaleX(.7);opacity:1}30%{transform:scaleX(1);opacity:1}40%{transform:scaleX(1);opacity:1}50%{transform:scaleX(1);opacity:1}60%{transform:scaleX(1);opacity:.85}70%{transform:scaleX(1);opacity:.6}80%{transform:scaleX(1);opacity:.35}90%{transform:scaleX(1);opacity:.15}to{transform:scaleX(1);opacity:0}}@keyframes ink-book-drop{0%{transform:scaleY(0)}16.67%{transform:scaleY(.28)}33.33%{transform:scaleY(.6)}50%{transform:scaleY(.85)}66.67%{transform:scaleY(1.04)}83.33%{transform:scaleY(1)}to{transform:scaleY(1)}}}}@layer components{.quran-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.quran-head__mark{flex:none;width:12rem}@media(min-width:48rem){.quran-head__mark{width:18rem}}.ink-book.quran-page-book{--ink-wait: .5s;--ink-stroke: .9;flex:none;width:14rem}@media(min-width:48rem){.ink-book.quran-page-book{--ink-stroke: .7;width:18rem}}@media(min-width:64rem){.ink-book.quran-page-book{--ink-stroke: .6;width:22rem}}}