:root{font-family:Arial,Helvetica,sans-serif;color-scheme:light dark;color:#222;background:#f4f4f4;--ground:#f4f4f4;--card:#fff;--text:#222;--line:#ddd;--focus:#666;--shadow:#0000000c;--page-width:820px}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}#reader{padding:20px 14px 32px}#pages{width:min(var(--page-width),100%);margin:auto;display:flex;flex-direction:column;gap:18px}.page{position:relative;width:100%;background:#fff;box-shadow:0 1px 9px var(--shadow);flex:none;isolation:isolate;scroll-margin-top:18px}.page canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.textLayer{position:absolute;inset:0;overflow:clip;line-height:1;text-align:initial;transform-origin:0 0;z-index:1;caret-color:CanvasText}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}.textLayer> :not(.markedContent),.textLayer .markedContent span:not(.markedContent){z-index:1}.textLayer span.markedContent{top:0;height:0}.textLayer ::selection{background:#77777744}.textLayer br::selection{background:transparent}.link{position:absolute;z-index:2}.figure{position:absolute;z-index:3;padding:0;border-radius:2px;touch-action:pan-x pan-y;isolation:isolate}.figure::before{content:"";position:absolute;inset:0;background:#b6b6b6;mix-blend-mode:multiply;opacity:0;transition:opacity .28s ease;pointer-events:none;border-radius:2px}.figure::after{content:"";position:absolute;inset:-3px;border:1.5px solid var(--focus);border-radius:4px;opacity:0;transform:scale(.992);transition:opacity .23s ease,transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;pointer-events:none}.figure:is(:focus-visible,.active)::after{opacity:1;transform:scale(1);box-shadow:0 0 0 4px #8888880b}.figure:is(:focus-visible,.active)::before{opacity:.18}@media(hover:hover){.figure:hover::after{opacity:1;transform:scale(1)}.figure:hover::before{opacity:.18}}.figure:focus-visible{outline:0}button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}#card{position:fixed;z-index:12;width:260px;padding:22px 44px 22px 22px;border-radius:8px;background:var(--card);border:1px solid var(--line);box-shadow:0 5px 28px #00000012;animation:card-in .2s ease both}#card[hidden],[hidden]{display:none!important}#card h2{margin:0;color:var(--text);font-size:15px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}#close{position:absolute;right:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#888}#card.popup{left:50%!important;top:auto!important;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 24px));max-height:34dvh;overflow:auto}#status,#retry{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:15;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card);box-shadow:0 2px 16px #0000000a}.spinner{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);border-top-color:var(--text);animation:spin .85s linear infinite}#retry{color:var(--text)}@keyframes spin{to{rotate:360deg}}@keyframes card-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}@media(prefers-color-scheme:dark){:root{background:#151515;color:#eee;--ground:#151515;--card:#242424;--text:#eee;--line:#444;--focus:#929292;--shadow:#00000033}#close{color:#aaa}}@media(max-width:650px){#reader{padding:8px 5px 20px}#pages{gap:10px}.page{scroll-margin-top:8px}#card h2{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.spinner{border-style:dotted}}
