@page { size: A4; margin: 2cm; }
        body {
            font-family: 'Kantumruy Pro', 'Khmer OS Battambang', Arial, sans-serif;
            line-height: 1.6;
            max-width: 21cm;
            margin: 0 auto;
            padding: 2cm;
            background: white;
            color: #333;
        }
        h1 { color: #2c3e50; border-bottom: 3px solid var(--accent, #3457D5); padding-bottom: 10px; margin-top: 30px; font-size: 28px; }
        h2 { color: #34495e; margin-top: 25px; font-size: 24px; border-left: 5px solid var(--accent, #3457D5); padding-left: 15px; }
        h3 { color: #34495e; margin-top: 20px; font-size: 20px; }
        h4 { color: #555; margin-top: 15px; font-size: 18px; }
        .cover-page { text-align: center; padding: 100px 0; page-break-after: always; }
        .cover-page h1 { font-size: 36px; color: #2c3e50; border: none; margin-bottom: 30px; }
        .cover-page .subtitle { font-size: 20px; color: #7f8c8d; margin: 20px 0; }
        .cover-page .info { margin-top: 50px; font-size: 18px; }
        code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 14px; }
        pre { background: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 15px 0; border-left: 4px solid var(--accent, #3457D5); }
        pre code { background: none; color: inherit; padding: 0; }
        .note { background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 15px 0; }
        .important { background: #f8d7da; border-left: 4px solid #dc3545; padding: 15px; margin: 15px 0; }
        .tip { background: #d1ecf1; border-left: 4px solid #17a2b8; padding: 15px; margin: 15px 0; }
        .exercise { background: #e7f3ff; border: 2px solid #2196F3; padding: 15px; margin: 20px 0; border-radius: 5px; }
        .exercise h4 { color: #2196F3; margin-top: 0; }
        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        table th { background: var(--accent, #3457D5); color: white; padding: 12px; text-align: left; }
        table td { border: 1px solid #ddd; padding: 10px; }
        table tr:nth-child(even) { background: #f2f2f2; }
        ul, ol { margin: 10px 0; padding-left: 30px; }
        li { margin: 8px 0; }
        .page-break { page-break-after: always; }
        .flowchart { text-align: center; margin: 22px auto; padding: 18px 12px 14px; border: 2px solid #222; border-radius: 4px; background: #fff; page-break-inside: avoid; }
        .flowchart .fc-title { font-size: 15px; font-weight: bold; color: #111; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #222; }
        .fc-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
        .fc-terminal { display: inline-block; padding: 7px 30px; border: 2.5px solid #000; border-radius: 50px; font-weight: bold; font-size: 14px; background: #222; color: #fff; min-width: 90px; text-align: center; }
        .fc-process { display: inline-block; padding: 8px 18px; border: 2px solid #000; font-size: 13px; background: #fff; color: #000; min-width: 160px; text-align: center; line-height: 1.4; }
        .fc-arrow { width: 2px; height: 26px; background: #000; margin: 0 auto; position: relative; }
        .fc-arrow::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #000; }
        .fc-arrow-sm { width: 2px; height: 16px; background: #000; margin: 0 auto; position: relative; }
        .fc-arrow-sm::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #000; }
        .fc-label { font-size: 12px; font-weight: bold; color: #222; margin: 3px 0 2px; }
        @media print { body { padding: 0; } .page-break { page-break-after: always; } }
        h2 .author-sub {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: normal;
            font-style: normal;
            color: #7f8c8d;
            margin-top: 6px;
            line-height: 1.4;
            gap: 4px;
        }
        h2 .author-sub svg {
            flex-shrink: 0;
            align-self: center;
        }
        .badge-icon {
            width: 16px;
            height: 16px;
            vertical-align: -3px;
            margin-right: 3px;
            display: inline;
        }
        .tag-code { color: #e53e3e; font-weight: bold; white-space: nowrap; }
        .table-title { font-weight: bold; color: #4a5568; margin-top: 25px; margin-bottom: -10px; }
        .demo-box { border: 1px solid #cbd5e0; padding: 10px; background-color: #fff; border-radius: 4px; }
        td h1, td h2, td h3, td h4, td h5, td h6, td p { margin: 0; border: none; padding: 0; }

        /* ===== Reader Layout (sidebar + scroll-spy) ===== */
        html, body { height: 100%; }
        body { max-width: none; padding: 0; }
        .reader-layout{ display:flex; align-items:stretch; height:100vh; background:#fff; }
        .reader-sidebar{ width:340px; flex-shrink:0; background:#fff; border-right:1px solid #e2e5f0; overflow-y:auto; padding:20px 14px; box-sizing:border-box; }
        .reader-sidebar-inner{
            display:flex; flex-direction:column; background:#fff; border:1px solid #eceef6;
            border-radius:18px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(31,47,143,.18);
        }
        .chapter-block{ border-bottom:1px solid #eceef6; }
        .chapter-block:last-child{ border-bottom:none; }
        .chapter-header{ display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; user-select:none; }
        .chapter-num{ width:34px; height:34px; border-radius:50%; background:#eef1fb; color:#3457d5; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:Arial, sans-serif; }
        .chapter-title{ flex:1; font-size:1rem; font-weight:700; color:#33395c; }
        .chapter-block.open .chapter-title{ color:#3457d5; }
        .chapter-caret{ font-size:.75rem; color:#9aa1c4; }
        .chapter-sublist{ list-style:none; margin:0; padding:4px 20px 20px 68px; display:block; }
        .chapter-sublist li{ margin:0; }
        .chapter-sublist a{ display:block; padding:10px 4px; font-size:.92rem; color:#5a5f7d; text-decoration:none; line-height:1.5; }
        .chapter-sublist a:hover{ text-decoration:underline; color:#3457d5; }
        .reader-content{ flex:1; overflow-y:auto; height:100vh; padding:40px 60px; box-sizing:border-box; background:#fff; }
        .reader-content h1{ scroll-margin-top:20px; }
        .reader-content h2{ scroll-margin-top:20px; }
        @media (max-width:900px){
            .reader-sidebar{ width:78vw; position:fixed; left:0; top:0; bottom:0; z-index:50; transform:translateX(-100%); transition:transform .25s; box-shadow:10px 0 30px rgba(0,0,0,.15); }
            .reader-sidebar.open{ transform:translateX(0); }
            .reader-content{ padding:24px 18px; width:100%; }
            .reader-menu-btn{ position:fixed; top:12px; left:12px; z-index:60; background:#3457d5; color:#fff; border:none; width:40px; height:40px; border-radius:10px; font-size:1.1rem; cursor:pointer; box-shadow:0 6px 16px -6px rgba(52,87,213,.6); }
        }
        @media (min-width:901px){ .reader-menu-btn{ display:none; } }