@font-face{font-family:Droid Arabic Naskh;src:url(/fonts/DroidNaskh-Regular.woff2)format("woff2");font-weight:400;unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}@font-face{font-family:Droid Arabic Naskh;src:url(/fonts/DroidNaskh-Bold.woff2)format("woff2");font-weight:700;unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}:root{--bg:#fffaf2;--card:#fff;--ink:#2e2622;--soft:#7d7066;--line:#efe4d6;--accent:#7b4fa8;--accent-dark:#643c8e;--press:#f7efe4;--bad:#b8412f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--ink);margin:0}body{min-height:100dvh;padding:env(safe-area-inset-top) 16px calc(120px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%;font:19px/1.5 Droid Arabic Naskh,-apple-system,system-ui,sans-serif}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}button:disabled{opacity:.4}#app{max-width:640px;margin:0 auto}header{justify-content:space-between;align-items:center;gap:12px;min-height:64px;display:flex}header h1{margin:16px 4px 10px;font-size:30px}h2{margin:22px 4px 12px;font-size:22px}.lang,.back{border:1px solid var(--line);background:var(--card);border-radius:999px;height:44px;padding:0 16px;font-size:17px;font-weight:700}.back{margin-top:10px}.big{background:var(--accent);color:#fff;border-radius:20px;width:100%;min-height:60px;padding:12px 20px;font-size:21px;font-weight:700;display:block}.big:active{background:var(--accent-dark)}footer{padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(#fffaf200, var(--bg) 30%);position:fixed;inset:auto 0 0}footer .big{max-width:608px;margin:0 auto}.books{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.book-card{background:var(--card);border:1px solid var(--line);text-align:center;border-radius:22px;flex-direction:column;align-items:center;gap:4px;padding:18px 12px 14px;display:flex}.book-card:active{background:var(--press)}.card-cover{font-size:72px;line-height:1.1}.card-title{font-size:19px;font-weight:700;line-height:1.3}.card-pages{color:var(--soft);font-size:15px}.empty{color:var(--soft);text-align:center;grid-column:1/-1;margin:60px 12px;font-size:20px}textarea,.title-input{border:1px solid var(--line);background:var(--card);resize:none;border-radius:16px;width:100%;padding:14px 16px;font-size:20px;display:block}textarea:focus,.title-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.chips{flex-wrap:wrap;gap:8px;margin:14px 0 22px;display:flex}.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-size:17px}.chip:active{background:var(--press)}.book-top{flex-direction:column;align-items:center;gap:12px;display:flex}.cover-pic{font-size:96px;line-height:1.15}.title-input{text-align:center;background:0 0;border-color:#0000;font-size:26px;font-weight:700}.read{margin-bottom:8px}.pages{gap:12px;margin-top:18px;display:grid}.page-card{border-radius:22px;padding:10px 12px 12px}.page-tools{justify-content:space-between;align-items:center;gap:8px;display:flex}.page-no{width:36px;color:var(--soft);font-size:16px;font-weight:700}.stepper{align-items:center;gap:4px;display:flex}.step,.remove{background:#ffffffb3;border-radius:50%;width:40px;height:40px;font-size:22px;line-height:1}.count{text-align:center;min-width:22px;font-weight:700}.remove{color:var(--soft);font-size:17px}.page-pic{word-break:break-all;width:100%;padding:4px 0;font-size:64px;line-height:1.2;display:block}.page-words{text-align:center;background:#fff9;border-color:#0000;font-size:22px;font-weight:700}.add{border:2px dashed var(--line);min-height:60px;color:var(--accent);border-radius:22px;font-size:19px;font-weight:700}.ask{margin-top:12px}.ask textarea{margin-bottom:12px}.delete{color:var(--bad);margin:36px auto 0;padding:12px 20px;font-size:17px;display:block}#sheet{z-index:8;background:#00000059;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}#sheet[hidden]{display:none}.sheet-box{background:var(--bg);width:100%;max-width:640px;padding:6px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}.choice{border:1px solid var(--line);background:var(--card);border-radius:16px;width:100%;margin:0 0 10px;padding:16px;font-size:21px;font-weight:700;display:block}.choice.current{border:2px solid var(--accent);color:var(--accent)}.picker{flex-direction:column;height:82dvh;display:flex}.sheet-head{justify-content:space-between;align-items:center;display:flex}.close{background:var(--card);border:1px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:18px}.picker-scroll{flex:1;margin:0 -4px;padding:0 4px;overflow-y:auto}.picker h3{color:var(--soft);margin:14px 4px 6px;font-size:17px}.grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px;display:grid}.pick{border-radius:14px;height:62px;font-size:40px}.pick:active{background:var(--press)}.waiting{z-index:9;background:#fffaf2f0;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}.waiting p{font-size:22px;font-weight:700}.waiting-pic{font-size:96px;animation:.9s ease-in-out infinite hop}@keyframes hop{50%{transform:translateY(-24px)}}#message{z-index:20;inset:auto 16px calc(100px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;text-align:center;border-radius:16px;max-width:560px;margin:0 auto;padding:14px 18px;font-size:18px;position:fixed}#message[hidden]{display:none}.reader{z-index:10;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);flex-direction:column;justify-content:center;align-items:center;gap:3vh;transition:background .3s;display:flex;position:fixed;inset:0;overflow:hidden}.reader-pic{flex-wrap:wrap;justify-content:center;align-items:center;gap:2vmin;max-width:92vw;font-size:min(48vmin,320px);line-height:1.1;display:flex}.reader-pic[data-count="2"]{font-size:min(36vmin,240px)}.reader-pic[data-count="3"],.reader-pic[data-count="4"]{font-size:min(28vmin,190px)}.reader-pic[data-count="5"]{font-size:min(22vmin,150px)}.reader-pic.pop{animation:.45s ease-out pop}@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}to{transform:scale(1)}}.reader-words{text-align:center;max-width:92vw;font-size:clamp(34px,9vmin,72px);font-weight:700;line-height:1.35}.is-cover .reader-words{color:var(--accent)}.dots{inset:auto 0 calc(18px + env(safe-area-inset-bottom));justify-content:center;gap:8px;display:flex;position:absolute}.dots i{background:#00000026;border-radius:50%;width:9px;height:9px}.dots i.on{background:#00000073}.reader-close{top:calc(12px + env(safe-area-inset-top));width:48px;height:48px;color:var(--soft);background:#ffffff8c;background-image:conic-gradient(var(--accent) 0turn, transparent 0turn);border-radius:50%;font-size:20px;position:absolute;inset-inline-end:14px}.reader-close.holding{animation:1s linear forwards fill}@property --fill{syntax:"<angle>";inherits:false;initial-value:0deg}.reader-close.holding{background-image:conic-gradient(#7b4fa873 var(--fill), #ffffff8c var(--fill))}@keyframes fill{to{--fill:360deg}}@media (orientation:landscape) and (height<=500px){.reader{flex-direction:row;gap:5vw}.reader-pic{max-width:55vw}.reader-words{max-width:38vw}}
