body.rd-body{background:#0B0907;color:#FFF6DC}
.rd{min-height:100vh;background:#0B0907;--cn-panel:#1C1611;--cn-panel2:#15110D;--cn-raise:#2A221B;--cn-line:#2E2620;--cn-line2:#3A3028;--cn-line3:#463A30;--cn-ink:#FFF6DC;--cn-ink2:#E9DDC0;--cn-mut:#BFB291;--cn-mut2:#A8987A;--cn-mut3:#8A7A5A;--cn-head:#FCE38A;--cn-accent:#F6B830;--cn-bg:#0B0907}
.rd-prog{position:fixed;top:0;left:0;right:0;z-index:50;height:3px;background:rgba(255,246,220,.08)}
#rd-prog-bar{height:100%;width:0;background:#F6B830;transition:width .15s}
.rd-top{position:fixed;top:0;left:0;right:0;z-index:45;padding-top:env(safe-area-inset-top);background:rgba(11,9,7,.96);border-bottom:2px solid #2E2620;transition:transform .28s cubic-bezier(.2,.9,.3,1)}
.rd-top.hide{transform:translateY(-110%)}
.rd-top-in{max-width:1100px;margin:0 auto;height:60px;display:flex;align-items:center;gap:8px;padding:0 12px}
.rd-ib{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;border:2px solid #3A3028;background:#1C1611;color:#FFF6DC;cursor:pointer;padding:0}
.rd-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:2px 6px;border:none;background:none;color:#FFF6DC;cursor:pointer;font-family:Vazirmatn;text-align:right}
.rd-title .t1{font-size:12px;color:#A8987A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rd-title .t2{display:flex;align-items:center;gap:6px;font-weight:900;font-size:16px}
.rd-title[aria-expanded=true] svg{transform:rotate(180deg)}
.rd-nav{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border-radius:13px;border:2px solid #3A3028;background:#1C1611;color:#FFF6DC;font:700 14px Vazirmatn;white-space:nowrap}
.rd-nav-next{border:2.5px solid #000;background:#F6B830;color:#141414;font-weight:900}.rd-nav-next:hover{color:#141414}
.rd-count{flex:none;height:32px;display:flex;align-items:center;padding:0 10px;border-radius:999px;background:#1C1611;border:2px solid #3A3028;font-size:13px;font-weight:900;color:#FCE38A;white-space:nowrap}
.rd-eps{position:fixed;z-index:46;top:calc(64px + env(safe-area-inset-top));right:max(12px,calc(50% - 538px));width:min(320px,calc(100% - 24px));max-height:60vh;overflow-y:auto;background:#1C1611;border:2.5px solid #000;border-radius:18px;box-shadow:5px 5px 0 #000;padding:6px}
.rd-ep{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-radius:12px;color:#FFF6DC;font:700 14px Vazirmatn}
.rd-ep .sub{font-size:12px;font-weight:500;color:#8A7A5A}
.rd-ep.on{background:#F6B830;color:#141414}.rd-ep.on .sub{color:#141414}
.rd-dimbg{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.6)}
.rd-main{padding-top:calc(60px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#rd-stage{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rd-strip{margin:0 auto;display:flex;flex-direction:column}
.rd-pg{position:relative;width:100%;background:#1C1611;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rd-pg canvas{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rd-pg::after{content:"";position:absolute;inset:0}
.rd-pg.err::before{content:"در حال تلاش دوباره…";position:absolute;inset:0;display:grid;place-items:center;color:#8A7A5A;font:700 13px Vazirmatn}
.rd-paged{position:relative;height:calc(100vh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:8px}
.rd-spread{min-height:100%;display:flex;align-items:center;justify-content:center}
.rd-spread .rd-pg{flex:none;border-radius:3px}
.rd-spread.fit-h .rd-pg{height:calc(100vh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:auto}
.rd-zone{position:fixed;top:68px;bottom:0;width:30%;border:none;background:transparent;cursor:pointer;z-index:2}
.rd-swipe{height:calc(100vh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rd-swipe::-webkit-scrollbar{display:none}
.rd-swipe>div{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:8px}
.rd-swipe .rd-pg{height:100%;width:auto;max-width:100%;border-radius:3px}
.rd-endwrap{max-width:560px;margin:32px auto 8px;padding:0 16px;display:flex;flex-direction:column;gap:14px}
.rd-card{max-width:560px;background:#1C1611;border:2.5px solid #000;border-radius:24px;box-shadow:6px 6px 0 #F6B830;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.rd-lock{margin-left:16px!important;margin-right:16px!important}
@media (min-width:592px){.rd-lock{margin-left:auto!important;margin-right:auto!important}}
.rd-thanks{height:46px;display:flex;align-items:center;gap:8px;padding:0 18px;cursor:pointer;border-radius:999px;border:2px solid #463A30;background:transparent;color:#E9DDC0;font:900 14px Vazirmatn;transition:transform .15s}
.rd-thanks.on{border-color:#E8452C;background:#3A1A12;color:#FFF6DC;transform:scale(1.05)}
.rd-plain{height:46px;cursor:pointer;border-radius:14px;border:2px solid #3A3028;background:transparent;color:#E9DDC0;font:700 14px Vazirmatn}
.rd-comments{max-width:760px;margin:24px auto 0;padding:0 16px;display:flex;flex-direction:column;gap:14px}
.rd-shade{position:fixed;inset:0;z-index:40;pointer-events:none;background:#000;opacity:0}
.rd-sheet{width:100%;max-width:480px;max-height:88vh;overflow-y:auto;background:#1C1611;color:#FFF6DC;border:2.5px solid #000;border-radius:24px;box-shadow:6px 6px 0 #F6B830;padding:18px 16px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
@media (max-width:759.98px){.rd-sheet{max-width:100%;border-radius:24px 24px 0 0;box-shadow:none}}
.rd-x{flex:none;width:40px;height:40px;cursor:pointer;border:2px solid #3A3028;border-radius:11px;background:#15110D;color:#FFF6DC;font-size:18px}
.rd-lbl{font-size:13px;font-weight:700;color:#A8987A}
.rd-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rd-mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;cursor:pointer;border-radius:16px;border:2.5px solid #2E2620;background:#15110D;color:#FFF6DC;font-family:Vazirmatn;text-align:center}
.rd-mode.on{border-color:#000;background:#F6B830;color:#141414;box-shadow:4px 4px 0 #000}
.rd-mode .d{font-size:11px;line-height:1.6;color:#A8987A}.rd-mode.on .d{color:#4A3E26}
.rd-mode .rec{position:absolute;top:-10px;right:10px;background:#CC3A22;color:#FFF;font:900 10px Vazirmatn;padding:2px 8px;border:1.5px solid #000;border-radius:6px}
.rd-mode .pv{height:96px;display:grid;place-items:center}
.rd-opts{display:flex;gap:6px;background:#15110D;border:2px solid #2E2620;border-radius:14px;padding:4px}
.rd-opts button{flex:1;min-height:42px;cursor:pointer;border:2px solid transparent;border-radius:10px;background:transparent;color:#E9DDC0;font:700 13px Vazirmatn;padding:4px}
.rd-opts button.on{background:#F6B830;color:#141414;border-color:#000}

/* width slider */
.rd-slide{display:flex;align-items:center;gap:12px;background:#15110D;border:2px solid #2E2620;border-radius:14px;padding:10px 14px}
.rd-range{flex:1;direction:ltr;accent-color:#F6B830;height:28px}
.rd-range-v{flex:none;min-width:58px;text-align:center;font-size:12px;font-weight:900;color:#FCE38A;direction:ltr}

/* animated mode demos: a little phone, comic pages, and a finger dot doing the gesture */
.dm{position:relative;display:block;width:52px;height:86px;border:2.5px solid #000;border-radius:11px;background:#0B0907;box-shadow:2px 2px 0 #000}
.dm-double{width:92px;height:64px}
.dm-scr{position:absolute;inset:4px;overflow:hidden;border-radius:5px;background:#2A221B}
.dm-pages{position:absolute;inset:0;display:flex;flex-direction:column}
.dm-pages i{flex:none;display:block;width:100%;height:100%;background:var(--c) linear-gradient(#000 0 0) 0 46%/100% 2px no-repeat;position:relative}
.dm-pages i::after{content:"";position:absolute;left:55%;top:0;width:2px;height:46%;background:#000}
.dm-pages .p1{--c:#FCE38A}.dm-pages .p2{--c:#F08A6E}.dm-pages .p3{--c:#B9D98A}.dm-pages .p4{--c:#9EC9F0}
.dm-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#FFF6DC;border:2px solid #000;box-shadow:0 0 0 4px rgba(255,246,220,.25);opacity:0}
.rd-mode.on .dm-dot{background:#E8452C}
/* vertical: pages glide up while the dot swipes from bottom to top */
.dm-strip .dm-pages{animation:dm-up 3s cubic-bezier(.45,0,.25,1) infinite}
.dm-strip .dm-dot{left:calc(50% - 7px);animation:dm-swipe-up 3s ease-in-out infinite}
@keyframes dm-up{0%,15%{transform:translateY(0)}45%,60%{transform:translateY(-100%)}90%,100%{transform:translateY(-200%)}}
@keyframes dm-swipe-up{0%{top:78%;opacity:0}6%{opacity:1}30%{top:12%;opacity:1}38%,50%{opacity:0;top:12%}51%{top:78%;opacity:0}56%{opacity:1}80%{top:12%;opacity:1}88%,100%{opacity:0;top:12%}}
/* page by page: a tap on the left edge, the page slides away and the next one is under it */
.dm-page .dm-pages,.dm-swipe .dm-pages,.dm-double .dm-pages{flex-direction:row}
.dm-page .dm-pages{animation:dm-flip 3s steps(1,end) infinite}
.dm-page .dm-pages i{transition:none}
.dm-page .dm-dot,.dm-double .dm-dot{left:6px;top:calc(50% - 7px);animation:dm-tap 1.5s ease-out infinite}
@keyframes dm-flip{0%{transform:translateX(0)}50%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes dm-tap{0%,55%{opacity:0;transform:scale(1.6)}75%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(.75);box-shadow:0 0 0 8px rgba(255,246,220,.15)}100%{opacity:0;transform:scale(1)}}
/* horizontal swipe: the dot drags left to right and the strip of pages follows (right-to-left reading) */
.dm-swipe .dm-pages{animation:dm-side 3s cubic-bezier(.45,0,.25,1) infinite}
.dm-swipe .dm-dot{top:calc(50% - 7px);animation:dm-drag 3s ease-in-out infinite}
@keyframes dm-side{0%,15%{transform:translateX(0)}45%,60%{transform:translateX(100%)}90%,100%{transform:translateX(200%)}}
@keyframes dm-drag{0%{left:8%;opacity:0}6%{opacity:1}30%{left:62%;opacity:1}38%,50%{opacity:0;left:62%}51%{left:8%;opacity:0}56%{opacity:1}80%{left:62%;opacity:1}88%,100%{opacity:0;left:62%}}
/* two pages: a spread; tap left and the whole spread turns */
.dm-double .dm-pages i{width:50%;border-left:1px solid #000}
.dm-double .dm-pages{animation:dm-flip 3s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.dm *{animation:none!important}.dm-dot{opacity:1;top:auto;bottom:10px;left:calc(50% - 7px)}}

@media print{body{display:none!important}}