/* hentaidb.xyz, the comic pages (docs/COMICS.md): what /comics, a comic's page and the reader add to style.css, which
   they load first. The library and a comic's page are the site's own look (its tokens, cards, figure rows, chips);
   the reader is comic.cx's (Reader.module.css, ReaderPage.module.css, ReaderSettingsControls.module.css) in the
   site's palette and type: a dark canvas, one control rail, the pink accent, Inter. */

/* ---------------------------------------------------------------- the library */
.cxl .fr{margin-top:6px}
.cxq{position:relative;display:flex;gap:8px;align-items:center;margin-top:12px;max-width:760px}
.cxq .well{height:42px;padding-left:38px;font-weight:600}
.cxq .well::placeholder{font-weight:400}
.cxq-i{position:absolute;left:11px;color:var(--fg-3);pointer-events:none}
.cxq .btn{height:42px}
.cxl-q{margin-top:8px}
.cxl-q .ql-a{gap:8px 12px}
.cx-sort a{text-decoration:none}
.tok>a.tx{display:inline-flex;align-items:center;justify-content:center;width:30px;color:inherit}
dialog.cxt{min-width:300px;width:min(380px,92vw);max-height:min(72vh,620px)}
.cxt-f{padding:10px 12px;border-bottom:1px solid var(--rule)}
.cxt-l{max-height:min(52vh,460px);overflow:auto;padding:4px 0}
dialog.cxt.sheet .cxt-l{max-height:none}
.cxt-r{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center}
.cxt-r>a:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:0 12px 0 14px;text-decoration:none;font-size:14px}
.cxt-r small{font:600 12px var(--f-w);color:var(--fg-3)}
.cxt-r.in>a:first-child{color:var(--accent-text);font-weight:700;box-shadow:inset 3px 0 var(--accent-text)}
.cxt-r.ex>a:first-child{text-decoration:line-through var(--accent-text)}
.cxt-x{display:grid;place-items:center;height:38px;color:var(--fg-3)}
.cxt-x:hover,.cxt-r>a:first-child:hover{background:var(--surface-3)}
.cxt-r.ex .cxt-x{color:var(--accent-text)}
.cx-pg{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;font-size:14px;color:var(--fg-2)}
.cxc .sh{margin-top:14px}
.cx-down{max-width:560px}
.cx-down .acts{margin-top:18px}
.cxh .play{min-width:260px}
@media (max-width:640px){.cxq .btn{display:none}.cxh .play{min-width:0}.cx-sort{max-width:100%;overflow-x:auto;scrollbar-width:none}.cx-sort::-webkit-scrollbar{display:none}.cx-sort>*{flex:none}}
@media (pointer:coarse){.cxt-r>a:first-child,.cxt-x{min-height:44px;height:44px}}

/* ---------------------------------------------------------------- the reader */
html.rd-on,html.rd-on body{height:100%;overflow:hidden}
body[data-page=reader]{padding-top:0;background:#0A0B0A}
.rd{--rd-bg:#0A0B0A;--rb:calc(38px * var(--rd-rscale,1));--rd-hmin:58px;--rd-hpy:12px;--rd-hpx:16px;--rd-hm:8px;--rd-cpy:16px;--rd-cm:16px;
  position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;background:var(--rd-bg);color:#F3F4EE;overscroll-behavior:none}
.rd[data-background=black]{--rd-bg:#000}
.rd[data-background=charcoal]{--rd-bg:#1C1D1C}
.rd[data-background=custom]{--rd-bg:var(--rd-custom,#101112)}
.rd[data-canvas=gradient][data-gradient=linear]{background:linear-gradient(var(--rd-angle,135deg),var(--rd-bg),var(--rd-grad,#3B1D2B))}
.rd[data-canvas=gradient][data-gradient=radial]{background:radial-gradient(circle at center,var(--rd-bg),var(--rd-grad,#3B1D2B))}
.rd[data-density=compact]{--rd-hmin:48px;--rd-hpy:8px;--rd-hpx:12px;--rd-hm:4px;--rd-cpy:12px;--rd-cm:8px}
.rd[data-density=spacious]{--rd-hmin:68px;--rd-hpy:16px;--rd-hpx:20px;--rd-hm:12px;--rd-cpy:20px;--rd-cm:24px}
@media (pointer:coarse){.rd{--rb:max(44px,calc(38px * var(--rd-rscale,1)))}}

/* the rail: the only chrome there is, a column at one edge; it slides out toward that edge while reading */
.rd-rail{position:absolute;z-index:5;top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:2px;padding:4px;
  border-radius:14px;background:rgba(10,11,10,.84);opacity:var(--rd-rop,1);transition:transform .24s var(--ease),opacity .18s var(--ease)}
.rd[data-side=left] .rd-rail{right:auto;left:max(16px,env(safe-area-inset-left,0px))}
.rd[data-pos=center] .rd-rail{top:50%;translate:0 -50%}
.rd[data-pos=bottom] .rd-rail{top:auto;bottom:max(16px,env(safe-area-inset-bottom,0px))}
.rd[data-chrome=false] .rd-rail{transform:translate3d(calc(100% + 16px),0,0);opacity:0;pointer-events:none}
.rd[data-side=left][data-chrome=false] .rd-rail{transform:translate3d(calc(-100% - 16px),0,0)}
.rd[data-chrome=false] .rd-rail:focus-within{transform:none;opacity:var(--rd-rop,1);pointer-events:auto}
.rd[data-rstyle=glass] .rd-rail{border:1px solid rgba(255,255,255,.14);background:linear-gradient(to bottom,rgba(255,255,255,.1),rgba(255,255,255,.02) 46%,rgba(255,255,255,0)),rgba(10,11,10,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 34px rgba(0,0,0,.28)}
.rd[data-rstyle=minimal] .rd-rail{gap:4px;padding:0;background:none}
.rd[data-rstyle=minimal] .rd-rb{background:rgba(10,11,10,.84)}
.rd-rb{display:grid;place-items:center;width:var(--rb);height:var(--rb);padding:0;border:0;border-radius:10px;background:none;color:rgba(243,244,238,.82);
  transition:background-color .1s,color .1s,transform .1s}
.rd-rb .i{transform:scale(var(--rd-rscale,1))}
.rd-rb:hover{background:rgba(255,255,255,.1);color:#fff}
.rd-rb[data-active=true],.rd-rb[aria-pressed=true]{background:rgba(247,99,161,.2);color:#F77DB0}
.rd-rb:active{transform:scale(.92)}
.rd-rb:focus-visible{outline:2px solid #F77DB0;outline-offset:1px}

/* where the reader is in the comic */
.rd-prog{position:absolute;z-index:4;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);height:var(--rd-pt,3px);
  border-radius:99px;background:rgba(255,255,255,.16);opacity:var(--rd-po,.8);pointer-events:none}
.rd-prog[data-position=top]{top:env(safe-area-inset-top,0px);bottom:auto}
.rd-prog[data-style=floating]{left:max(15%,12px);right:max(15%,12px);bottom:max(12px,env(safe-area-inset-bottom,0px));box-shadow:0 4px 14px rgba(0,0,0,.28)}
.rd-prog[data-style=floating][data-position=top]{top:max(12px,env(safe-area-inset-top,0px));bottom:auto}
.rd-pf{display:block;width:100%;height:100%;border-radius:inherit;background:var(--rd-pc,#F763A1);transform-origin:left center;transition:transform .3s var(--ease)}
.rd-pl{position:absolute;right:0;bottom:calc(100% + 6px);padding:3px 7px;border-radius:99px;background:rgba(10,11,10,.84);color:rgba(243,244,238,.82);font:600 11px/1 var(--f-w);white-space:nowrap}
.rd-prog[data-position=top] .rd-pl{top:calc(100% + 6px);bottom:auto}
.rd[data-side=right] .rd-pl{right:auto;left:0}
@media (prefers-reduced-motion:reduce){.rd-pf,.rd-img,.rd-rail{transition:none}}

/* the surface: the strip scrolls it; single and double pages fill it */
.rd-surf{flex:1;min-height:0;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline:0}
.rd-surf::-webkit-scrollbar{display:none}
.rd[data-snap=proximity] .rd-surf{scroll-snap-type:y proximity}
.rd[data-snap=mandatory] .rd-surf{scroll-snap-type:y mandatory}
.rd[data-scrollbar=true] :is(.rd-surf,.rd-paged){scrollbar-width:thin;scrollbar-color:var(--rd-sbc,#F763A1) transparent}
.rd[data-scrollbar=true] :is(.rd-surf,.rd-paged)::-webkit-scrollbar{display:block;width:var(--rd-sbw,6px);height:var(--rd-sbw,6px)}
.rd[data-scrollbar=true] :is(.rd-surf,.rd-paged)::-webkit-scrollbar-thumb{border-radius:99px;background:var(--rd-sbc,#F763A1)}
.rd:not([data-mode=strip]) .rd-surf{overflow:hidden;touch-action:manipulation}
.rd[data-swipe=true] .rd-surf{touch-action:pan-y pinch-zoom}
.rd-load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:rgba(243,244,238,.6)}
.rd-spin{width:26px;height:26px;border:2px solid rgba(255,255,255,.18);border-top-color:#F763A1;border-radius:50%;animation:rd-spin .8s linear infinite}
@keyframes rd-spin{to{transform:rotate(1turn)}}
.rd-ns{height:100%;overflow:auto}
.rd-ns img{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto}

/* the long strip: a share of the screen, never wider than a comfortable column; full width on a phone */
.rd-strip{display:flex;flex-direction:column;align-items:center;width:var(--rd-sw,60%);max-width:var(--rd-smax,1040px);margin-inline:auto;padding-top:8px;touch-action:pan-y pinch-zoom}
.rd-strip>.rd-pg{flex:none;width:calc(100% - 2 * var(--rd-gutter,0px));content-visibility:auto;scroll-snap-align:start;scroll-margin-top:8px}
.rd-strip>.rd-pg:not([data-page="0"]),.rd-strip>.rd-pg+.rd-end{margin-top:var(--rd-gap,0px)}
.rd[data-align=left] .rd-strip{margin-left:0;margin-right:auto}
.rd[data-align=right] .rd-strip{margin-left:auto;margin-right:0}
.rd[data-align=left] .rd-strip>.rd-pg{align-self:flex-start;margin-left:var(--rd-gutter,0px)}
.rd[data-align=right] .rd-strip>.rd-pg{align-self:flex-end;margin-right:var(--rd-gutter,0px)}
@media (max-width:767px){.rd-strip{width:100%;max-width:none;margin-inline:0}.rd-strip>.rd-pg{width:calc(var(--rd-sphone,100%) - 2 * var(--rd-gutter,0px))}}

/* a page: its box keeps the page's shape before the image arrives (the first page's shape until its own is known),
   so the strip's offsets hold and a jump lands on the page it named */
.rd-pg{position:relative;display:flex;justify-content:center;width:100%}
.rd-pg[data-status=loading]:not([style*=aspect-ratio]):not(.pgd){aspect-ratio:var(--rd-ratio,.7)}
.rd-stage{display:contents}
.rd-img{display:block;opacity:0;filter:var(--rd-filter,none);border-radius:var(--rd-radius,0);box-shadow:var(--rd-shadow,none);
  outline:var(--rd-bw,0px) solid color-mix(in srgb,var(--rd-bc,#fff) var(--rd-bo,25%),transparent);outline-offset:calc(0px - var(--rd-bw,0px));
  transition:opacity var(--rd-fade,300ms) var(--ease);user-select:none;-webkit-user-drag:none}
.rd-pg[data-status=ok] .rd-img{opacity:var(--rd-op,1)}
.rd-strip .rd-img{width:100%;height:auto}
.rd-ph{position:absolute;inset:0;display:grid;place-items:center;min-height:180px;border-radius:var(--rd-radius,0);background:rgba(255,255,255,.025)}
.rd-ph span{font:600 28px var(--f-w);color:rgba(255,255,255,.13);animation:rd-glow 1.4s var(--ease) infinite alternate}
@keyframes rd-glow{from{opacity:.4}to{opacity:1}}
.rd-pg:not([data-status=loading]) .rd-ph{display:none}
.rd-badge{display:none;position:absolute;right:12px;bottom:12px;z-index:3;padding:4px 8px;border-radius:99px;background:rgba(5,5,7,.72);color:rgba(255,255,255,.78);
  font:600 11px/1.2 var(--f-w);opacity:var(--rd-nop,1);pointer-events:none}
.rd-pg[data-status=ok] .rd-badge{display:var(--rd-num,none)}
.rd[data-nstyle=plain] .rd-badge{padding:0;background:none;text-shadow:0 1px 4px rgba(0,0,0,.88)}
.rd[data-nstyle=outline] .rd-badge{border:1px solid rgba(255,255,255,.38);background:rgba(5,5,7,.62)}
.rd[data-npos=top-left] .rd-badge{top:12px;right:auto;bottom:auto;left:12px}
.rd[data-npos=top-right] .rd-badge{top:12px;bottom:auto}
.rd[data-npos=bottom-left] .rd-badge{right:auto;left:12px}
.rd-fail{display:grid;justify-items:center;align-content:center;gap:12px;width:100%;min-height:220px;padding:32px 16px;background:rgba(255,255,255,.03);color:rgba(243,244,238,.7)}
.rd-fail .btn{color:#F3F4EE;background:rgba(255,255,255,.1)}

/* single and double pages: the page (or the spread) fitted to the screen; "safe" keeps a tall page's top reachable */
.rd-paged{display:flex;align-items:safe center;justify-content:safe center;gap:var(--rd-gap,0px);width:100%;height:100%;padding:var(--rd-margin,0px);overflow:auto;scrollbar-width:none}
.rd-paged::-webkit-scrollbar{display:none}
.rd-paged[data-rtl=true]{flex-direction:row-reverse}
/* a spread meets at the spine: the page on the left leans right, the page on the right leans left */
.rd[data-mode=double] .rd-paged>.rd-pg:first-child:not(:only-child){justify-content:flex-end}
.rd[data-mode=double] .rd-paged>.rd-pg:last-child:not(:only-child){justify-content:flex-start}
.rd[data-mode=double] .rd-paged[data-rtl=true]>.rd-pg:first-child:not(:only-child){justify-content:flex-start}
.rd[data-mode=double] .rd-paged[data-rtl=true]>.rd-pg:last-child:not(:only-child){justify-content:flex-end}
.rd-sb:focus{outline:0}
.rd[data-mode=single] .rd-paged{max-width:1040px;margin-inline:auto}
.rd-pg.pgd{height:100%;min-width:0;align-items:safe center;justify-content:safe center;overflow:auto;scrollbar-width:none}
.rd-pg.pgd::-webkit-scrollbar{display:none}
.rd-pg.pgd[data-fit=width] .rd-img{width:100%;height:auto;max-height:none}
.rd-pg.pgd[data-fit=height] .rd-img{width:auto;height:100%;max-width:100%;object-fit:contain}
.rd-pg.pgd[data-fit=contain] .rd-img{width:auto;height:auto;max-width:100%;max-height:100%}
.rd-pg.pgd[data-fit=original] .rd-img{width:auto;height:auto;max-width:none}
.rd-pg.pgd .rd-img{transform-origin:top left}
.rd-pg.pgd .rd-ph{min-height:0}
.rd-zones{position:absolute;inset:0;display:grid;grid-template-columns:var(--rd-zone,32%) minmax(0,1fr) var(--rd-zone,32%);pointer-events:none}
.rd[data-chrome=true] .rd-zones [data-z=l]{background:linear-gradient(to right,rgba(255,255,255,.035),transparent 70%)}
.rd[data-chrome=true] .rd-zones [data-z=r]{background:linear-gradient(to left,rgba(255,255,255,.035),transparent 70%)}

/* the site's links and the title before page one: part of the strip, they scroll away with it */
.rd-site,.rd-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;width:100%;border-radius:12px;background:rgba(10,11,10,.72)}
.rd-site{min-height:var(--rd-hmin);padding:var(--rd-hpy) var(--rd-hpx);margin-bottom:var(--rd-hm)}
.rd-brand{display:inline-flex;align-items:center;flex:none}
.rd-brand img{display:block;width:auto;height:26px}
.rd-site nav{display:flex;flex-wrap:wrap;gap:2px}
.rd-site nav a{display:inline-flex;align-items:center;height:34px;padding:0 11px;border-radius:99px;color:rgba(243,244,238,.62);font-size:14px;font-weight:500;text-decoration:none}
.rd-site nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.rd-bar{padding:var(--rd-cpy) var(--rd-hpx);margin-bottom:var(--rd-cm)}
.rd-bar-t{display:grid;gap:3px;min-width:0}
.rd-bar-t a{overflow:hidden;color:#fff;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.rd-bar-t a:hover{text-decoration:underline}
.rd-bar-t span{color:rgba(243,244,238,.55);font-size:13px}
.rd-bar nav{display:flex;flex-wrap:wrap;gap:8px}
.rd :is(.rd-bar,.rd-end) .btn{color:#F3F4EE;background:rgba(255,255,255,.1)}
.rd :is(.rd-bar,.rd-end) .btn:hover{background:rgba(255,255,255,.18)}
.rd :is(.rd-bar,.rd-end) .btn-p{color:var(--on-accent);background:var(--accent)}
.rd :is(.rd-bar,.rd-end) .btn-p:hover{background:var(--accent-hover)}
.rd[data-pos=top][data-side=right] :is(.rd-site,.rd-bar){padding-right:calc(var(--rd-hpx) + var(--rb) + 24px)}
.rd[data-pos=top][data-side=left] :is(.rd-site,.rd-bar){padding-left:calc(var(--rd-hpx) + var(--rb) + 24px)}
@media (max-width:620px){.rd-site,.rd-bar{border-radius:0}.rd-site nav a{padding:0 8px;font-size:13px}}
@media (max-width:560px){.rd-bar{flex-direction:column;align-items:stretch}.rd-bar nav{width:100%}.rd-bar nav>*{flex:1}}

/* after the last page: what to read next */
.rd-end{display:grid;justify-items:center;gap:8px;width:100%;padding:40px 16px calc(48px + env(safe-area-inset-bottom,0px));text-align:center}
.rd-end-t{font:700 22px/1.2 var(--f-w)}
.rd-end-s{color:rgba(243,244,238,.55)}
.rd-end-a{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.rd-end-a .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rd-more{display:grid;grid-template-columns:repeat(4,minmax(0,140px));gap:14px;margin-top:22px}
.rd-more a{display:grid;gap:6px;color:rgba(243,244,238,.8);font-size:13px;text-align:left;text-decoration:none}
.rd-more img,.rd-more span{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:rgba(255,255,255,.06)}
.rd-more b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.rd-more a:hover b{text-decoration:underline}
@media (max-width:560px){.rd-more{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the drawers: from the rail's side, on the site's surface */
dialog.rd-sheet{position:fixed;inset:0 0 0 auto;display:none;flex-direction:column;width:min(420px,100vw);height:100%;max-width:none;max-height:none;margin:0;padding:0;
  border:0;border-radius:0;background:var(--surface-2);color:var(--fg);box-shadow:var(--shadow)}
dialog.rd-sheet[open]{display:flex;animation:rd-in .22s var(--ease)}
dialog.rd-sheet[data-side=left]{inset:0 auto 0 0}
dialog.rd-sheet[data-side=left][open]{animation-name:rd-inl}
dialog.rd-sheet::backdrop{background:var(--scrim)}
@keyframes rd-in{from{transform:translateX(100%)}}
@keyframes rd-inl{from{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){dialog.rd-sheet[open]{animation:none}}
.rd-sh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 14px 12px 20px;border-bottom:1px solid var(--rule)}
.rd-sh h2{font:700 19px/1.2 var(--f-w);overflow-wrap:anywhere}
.rd-sh p{margin-top:4px;font-size:13.5px;color:var(--fg-3)}
.rd-sb{flex:1;display:grid;align-content:start;gap:14px;overflow:auto;padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px))}
#rdSetB,#rdDetB{display:grid;gap:14px}
.rd-dnav{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px;border-radius:10px;background:var(--surface)}
.rd-ct{font:600 13px var(--f-w);color:var(--fg-3);white-space:nowrap}
.rd-dact{display:flex;flex-wrap:wrap;gap:8px}
.rd-cm li:first-child{padding-top:12px}

/* the settings panel (comic.cx ReaderSettingsControls): the current setup, six tabs, groups of fields */
.rd-sum{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;background:var(--surface)}
.rd-sum-l{display:block;margin-bottom:6px;font:700 11.5px var(--f-w);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3)}
.rd-sum-v{display:flex;flex-wrap:wrap;gap:6px}
.rd-sum-v span{padding:3px 8px;border-radius:99px;background:var(--surface-3);font-size:13px;font-weight:500}
.rd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:10px;background:var(--surface)}
.rd-tabs button{min-height:36px;border:0;border-radius:7px;background:none;color:var(--fg-2);font:500 14px var(--f-w)}
.rd-tabs button:hover{color:var(--fg)}
.rd-tabs [aria-selected=true]{background:var(--surface-3);color:var(--fg);font-weight:700}
.rd-tp{display:grid;gap:14px}
.rd-g{display:grid;gap:12px;padding:14px;border-radius:10px;background:var(--surface)}
.rd-g h3{font:700 15px var(--f-w)}
.rd-g header p{margin-top:2px;font-size:13px;color:var(--fg-3)}
.rd-gb{display:grid;gap:14px;min-width:0;margin:0;padding:0;border:0}
.rd-gb:disabled{opacity:.45}
.rd-f{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd-f.st{flex-direction:column;align-items:stretch;gap:6px}
.rd-fb{display:grid;gap:2px}
.rd-fl{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600}
.rd-fl b{font-size:13px;font-weight:500;color:var(--fg-3)}
.rd-fh{font-size:12.5px;color:var(--fg-3)}
.rd-f .sw{flex:none}
.rd-seg{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;width:100%}
.rd-seg>*{min-width:0;padding:0 6px}
.rd-range{width:100%;height:24px;margin:0;accent-color:var(--accent)}
.rd-col{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--f-w);color:var(--fg-2)}
.rd-col input{width:36px;height:28px;padding:0;border:0;border-radius:6px;background:none}
.rd-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-preset{display:grid;align-content:start;gap:4px;padding:12px;border:1px solid transparent;border-radius:10px;background:var(--surface-2);text-align:left}
.rd-preset span{font-size:14px;font-weight:700}
.rd-preset small{font-size:12.5px;line-height:1.35;color:var(--fg-3)}
.rd-preset:hover{background:var(--surface-3)}
.rd-preset[aria-pressed=true]{border-color:var(--accent-line);background:var(--wash)}
.rd-note{padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:13px;color:var(--fg-2)}
/* the live preview: the canvas, one or two pages, the number and the progress */
.rd-pv{position:relative;display:grid;place-items:center;height:128px;overflow:hidden;border-radius:10px;background:#0A0B0A}
.pv-ps{display:flex;align-items:stretch;justify-content:center;gap:6px;width:100%;height:100%;padding:12px 0}
.rd-pv[data-mode=strip] .pv-ps{flex-direction:column;justify-content:flex-start;gap:0;width:46%;padding:0}
.rd-pv[data-mode=strip][data-align=left] .pv-ps{margin-right:auto}
.rd-pv[data-mode=strip][data-align=right] .pv-ps{margin-left:auto}
.pv-pg{position:relative;display:grid;align-content:start;gap:6px;height:100%;aspect-ratio:.7;padding:10px;background:linear-gradient(180deg,#E9EBE4,#CFD3C7)}
.rd-pv[data-mode=strip] .pv-pg{height:50%;aspect-ratio:auto}
.pv-pg i{display:block;height:6px;border-radius:3px;background:rgba(20,21,20,.35)}
.pv-pg i:nth-child(2){width:60%}
.pv-pg i:nth-child(3){width:80%}
.pv-pg b{position:absolute;right:6px;bottom:6px;padding:1px 5px;border-radius:99px;background:rgba(5,5,7,.72);color:#fff;font:600 9px var(--f-w)}
.pv-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.pv-prog[data-position=top]{top:0;bottom:auto}
.pv-prog i{display:block;width:42%;height:100%;background:#F763A1}
.pv-prog b{position:absolute;right:6px;bottom:6px;color:#fff;font:600 9px var(--f-w)}
.pv-prog[data-position=top] b{top:6px;bottom:auto}