@charset "utf-8";
.prgb {
}
<head><style type="text/css">a:link {
text-decoration: none;
}
 A[href]
{
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>    <!-- 引入Tailwind CSS -->
    <script src="../cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="../font-awesome.min.css" rel="stylesheet">
    <!-- 引入html2canvas库 -->
    <script src="../html2canvas.min.js"></script>
    <!-- 引入二维码生成库 -->
    <script src="../qrcode.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        highlight: {
                            yellow: '#FFF9C4',
                            green: '#C8E6C9',
                            blue: '#BBDEFB',
                            pink: '#F8BBD0',
                            orange: '#FFE0B2'
                        },
                        paper: {
                            white: '#FFFFFF',
                            cream: '#FFFDD0',
                            sepia: '#F4ECD8',
                            dark: '#1E293B',
                            lightgreen: '#E8F5E9',
                            eink: '#E6E6E6',
                            lightgray: '#F5F5F5'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'Cambria', 'serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .reader-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .control-btn {
                @apply w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 hover:bg-primary/10 hover:text-primary active:scale-95;
            }
            .highlighted-text {
                @apply px-1 rounded mx-[-2px] cursor-pointer relative;
            }
            .highlighted-text:hover .highlight-controls {
                @apply opacity-100;
            }
            .highlight-controls {
                @apply absolute -top-7 right-0 bg-gray-800 text-white text-xs rounded px-2 py-1 flex items-center space-x-2 opacity-0 transition-opacity z-10;
            }
        }
    </style>
</head>
<body>
    <!-- 主内容区 -->
    <main class="pt-4 pb-24 md:pt-8 md:pb-28">
        <div id="reader-container" class="max-w-4xl mx-auto bg-paper-lightgreen rounded-xl p-3 md:p-2 reader-shadow transition-all duration-300">
            <article id="content" class="prose prose-lg max-w-none text-gray-800 leading-relaxed">.red {
font-weight: bold;
color: #FF0000;
text-align: center;
vertical-align: middle;
}
.red1 {
	color: #FF0000;
}
.lf {
	font-weight: bold;
	color: #000000;
}
.tyjg {
	font-weight: bold;
	color: #006600;
	font-size: 16px;
	background-position: center center;
	text-align: center;
}
.nnqk {
	font-weight: 900;
	color: #006600;
	font-size: 20px;
}
.xg {
	text-decoration: underline;
}
.red2 {
	font-weight: bold;
	color: #FF0000;
	font-size: 17px;
	text-align: center;
	background-position: center center;
}
.lfqc {
	background-position: center;
	color: #000000;
	text-align: center;
}
.red3 {
	color: #FF0000;
	text-align: center;
	vertical-align: middle;
}
.uxjy1 {
	background-color: #FEFDDA;
}
.uxjy2 {
	background-color: #FFFFF0;
}
.lf {
	color: #000000;
}
.lf1 {
	color: #000000;
	text-align: left;
}
.lfd {
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.lfz {
	font-size: 14px;
	color: #000000;
}
.lfx {
	font-size: 12px;
}
.uxjy3 {
	background-color: #F9F9F9;
}
.gren {
	color: #006600;
}
.gren1 {
	font-weight: bold;
	color: #006600;
	text-align: center;
}
.lfqc1 {
	font-weight: bolder;
	text-align: center;
}
.uxjy4 {
	background-color: #F7F7F7;
	font-weight: normal;
	text-align: left;
}
.dk {
	text-align: right;
	font-style: italic;
	color: #000000;
}
.uxjy5 {
	background-color: #F8FEFE;
	text-align: left;
	color: #006600;
	font-weight: bold;
}
.lfd1 {
	font-size: 16px;
	font-weight: bolder;
	color: #000000;
	background-color: #FFF9FF;
}
.lfz1 {
	font-size: 14px;
	color: #000000;
	background-color: #FFFFF7;
}
.lfx1 {
	font-size: 12px;
	background-color: #FBFFFF;
}
.uxjy6 {
	text-align: left;
	color: #000000;
	font-weight: normal;
	background-position: left;
red4 {
	font-weight: bold;
	color: #FF0000;
}
