.dsr{--bg:#fff;--fg:#222;--bar:#f3f3f3;position:relative;display:flex;flex-direction:column;border:1px solid #ddd;border-radius:8px;overflow:hidden;background:var(--bg);color:var(--fg);min-height:400px}
.dsr[data-theme=sepia]{--bg:#f4ecd8;--fg:#5b4636;--bar:#e9dfc6}
.dsr[data-theme=dark]{--bg:#16181c;--fg:#d0d0d0;--bar:#23262b;border-color:#333}
.dsr-bar{display:flex;gap:6px;align-items:center;padding:6px 10px;background:var(--bar);flex-wrap:wrap}
.dsr-bar button{background:transparent;color:var(--fg);border:1px solid rgba(128,128,128,.4);border-radius:4px;padding:3px 10px;cursor:pointer;font-size:14px}
.dsr-bar button:hover{background:rgba(128,128,128,.2)}
.dsr-prog{margin-left:auto;font-size:13px;opacity:.7}
.dsr-main{position:relative;flex:1;min-height:0}
.dsr-view{position:absolute;inset:0;padding:0 40px}
.dsr-txt{position:absolute;inset:0;overflow-y:auto;padding:20px max(20px,calc((100% - 720px)/2));line-height:1.8;font-size:18px}
.dsr-txt p{margin:0 0 .9em;white-space:pre-wrap}
.dsr-nav{position:absolute;top:0;bottom:0;width:36px;border:0;background:transparent;color:var(--fg);font-size:26px;cursor:pointer;opacity:.4;z-index:3}
.dsr-nav:hover{opacity:1;background:rgba(128,128,128,.1)}
.dsr-prev{left:0}.dsr-next{right:0}
.dsr-toc{position:absolute;top:0;bottom:0;left:0;width:300px;max-width:85%;overflow:auto;background:var(--bar);z-index:5;padding:10px;transform:translateX(-100%);transition:transform .2s;box-shadow:2px 0 8px rgba(0,0,0,.2)}
.dsr-toc.open{transform:none}
.dsr-toc a{display:block;padding:6px 4px;color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(128,128,128,.2);font-size:14px;cursor:pointer}
.dsr-toc a:hover{background:rgba(128,128,128,.2)}
.dsr-msg{padding:30px;text-align:center}

.dsr.dsr-full{position:fixed;inset:0;z-index:999999;width:100%;max-width:none;height:100vh!important;height:100dvh!important;border:0;border-radius:0;margin:0}
.dsr:fullscreen{width:100%;height:100%!important;border:0;border-radius:0}
html.dsr-lock,html.dsr-lock body{overflow:hidden!important}