:root {
            --bg: #e8eef7;
            --page-bg: #f4f7fb;
            --text: #172033;
            --text-dim: #4f5d73;
            --text-fade: #7b879a;
            --accent: #3478f6;
            --accent-dk: #235fc7;
            --accent-soft: #eaf2ff;
            --gold: #ffcb66;
            --gold-dk: #d49312;
            --green: #19a974;
            --nav-bg: #12223d;
            --panel-bg: #f8fafc;
            --border: #d9e1ec;
            --border-lt: #e6ebf2;
            --code-bg: #111827;
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --font-mono: 'Cascadia Code','JetBrains Mono','Consolas','Monaco',monospace;
            --font-ui: Inter,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
            --fs-body: 16px;
            --fs-small: 13px;
            --fs-h1: 22px;
            --fs-h2: 18px;
            --gap-xs: 4px;
            --gap-sm: 8px;
            --gap: 10px;
            --gap-md: 12px;
            --col-left: minmax(0, 1fr);
            --col-right: minmax(0, 1fr);
            --shadow-sm: 0 4px 14px rgba(31, 49, 78, .07);
            --shadow-md: 0 10px 30px rgba(31, 49, 78, .10);
        }

        * { scrollbar-width: thin; scrollbar-color: #b9c5d6 transparent; }
        *::-webkit-scrollbar { width: 8px; height: 8px; }
        *::-webkit-scrollbar-track { background: transparent; }
        *::-webkit-scrollbar-thumb { background: #b9c5d6; border-radius: 999px; }
        *::-webkit-scrollbar-thumb:hover { background: #94a4bb; }

        html, body { height: 100%; overflow: hidden; }
        body {
            background:
                radial-gradient(circle at 8% 0%, rgba(52,120,246,.10), transparent 28%),
                radial-gradient(circle at 100% 100%, rgba(25,169,116,.08), transparent 30%),
                var(--bg);
            font-size: var(--fs-body);
            color: var(--text);
            letter-spacing: .01em;
        }

        .page {
            width: 100vw;
            min-height: 100vh;
            overflow-y: auto;
            padding: 14px clamp(14px, 1.35vw, 24px);
            gap: 10px;
            background: transparent;
        }

        .top-nav {
            min-height: 62px;
            padding: 9px 12px 9px 18px;
            gap: 9px;
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 16px;
            background:
                linear-gradient(110deg, rgba(255,255,255,.08), transparent 30%),
                linear-gradient(135deg, #12223d, #1d3f70 70%, #225fa7);
            box-shadow: 0 12px 28px rgba(18,34,61,.20);
        }
        .top-nav .nav-title {
            font-size: var(--fs-h1);
            line-height: 1.2;
            letter-spacing: .02em;
            text-shadow: 0 2px 10px rgba(0,0,0,.18);
        }
        .top-nav .nav-btn {
            min-height: 38px;
            padding: 7px 13px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 10px;
            background: rgba(255,255,255,.10);
            font-size: 13px;
            font-weight: 650;
            backdrop-filter: blur(8px);
        }
        .top-nav .nav-btn:hover {
            background: rgba(255,255,255,.20);
            transform: translateY(-1px);
        }
        .chapter-tools {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }
        .chapter-counter {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 10px;
            color: #dbeafe;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 999px;
            background: rgba(8,18,35,.25);
            font: 700 12px/1 var(--font-mono);
            white-space: nowrap;
        }
        .chapter-select {
            min-width: 150px;
            height: 38px;
            padding: 0 34px 0 11px;
            color: #fff;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 10px;
            outline: none;
            background-color: rgba(255,255,255,.11);
            font: 650 13px/1 var(--font-ui);
            cursor: pointer;
        }
        .chapter-select option { color: #172033; background: #fff; }
        .shortcut-hint {
            color: rgba(255,255,255,.63);
            font-size: 11px;
            white-space: nowrap;
        }

        .chapter-header {
            min-height: 54px;
            padding: 8px 14px;
            gap: 12px;
            border: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            border-radius: 14px;
            background: rgba(255,255,255,.82);
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(10px);
        }
        .chapter-header .ch-id {
            padding: 6px 10px;
            border-radius: 8px;
            background: var(--accent-soft);
            color: var(--accent-dk);
            font-size: 12px;
            letter-spacing: .04em;
        }
        .chapter-header .ch-name {
            font-size: 24px;
            line-height: 1.1;
            color: var(--text);
        }
        .chapter-header .ch-en {
            overflow: hidden;
            color: var(--text-fade);
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .row-body {
            grid-template-columns: var(--col-left) var(--col-right);
            gap: 12px;
        }
        .col-left {
            display: grid;
            grid-template-rows: auto minmax(80px, 1.55fr) minmax(60px, .82fr);
            gap: 10px;
        }
        .col-right {
            display: grid;
            grid-template-rows: minmax(190px, auto) minmax(0, 1fr);
            gap: 10px;
        }

        .problem-stmt {
            min-height: 140px;
            max-height: 160px;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-left: 5px solid var(--accent);
            border-radius: 12px;
            background: rgba(255,255,255,.92);
            box-shadow: var(--shadow-sm);
            font-size: 19.6px;          /* 题目字号：28px × 70% */
            font-weight: 700;
            line-height: 1.55;
        }
        .problem-stmt .label {
            display: inline-flex;
            align-items: center;
            margin-right: 8px;
            color: var(--accent-dk);
            font-size: 16.8px;          /* 题目标签字号：24px × 70% */
            font-weight: 700;
        }

        .anim-area { min-height: 80px; }
        .anim-stage {
            min-height: 0;
            padding: 10px;
            overflow: visible;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: rgba(255,255,255,.76);
            box-shadow: var(--shadow-md);
        }
        .anim-controls {
            justify-content: flex-start;
            min-height: 46px;
            margin-bottom: 9px;
            padding: 6px 8px;
            gap: 7px;
            border: 1px solid #dce6f4;
            border-radius: 12px;
            background: #eef4fc;
        }
        .anim-controls button {
            min-height: 32px;
            padding: 5px 12px;
            border-color: #c8d5e7;
            border-radius: 9px;
            background: #fff;
            color: #31425d;
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(31,49,78,.05);
        }
        .anim-controls button:hover { background: #f5f9ff; border-color: #9db7da; }
        .anim-controls .btn-stepback { background: #fff8e8; color: #8a5200; border-color: #f4d28b; }
        .anim-controls .btn-stepback:hover { background: #fff4d8; border-color: #d49312; }
        .anim-controls .btn-primary {
            background: linear-gradient(135deg, #3478f6, #235fc7);
            border-color: #235fc7;
            color: #fff;
            box-shadow: 0 5px 12px rgba(52,120,246,.24);
        }
        .anim-controls .btn-primary:hover { background: linear-gradient(135deg, #286cea, #1d52ad); }
        .anim-controls .status {
            min-width: 62px;
            padding: 5px 9px;
            border-radius: 999px;
            background: #fff;
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 700;
        }
        .anim-controls .progress { max-width: none; min-width: 90px; }
        .progress-bar { height: 8px; background: #dce6f4; }
        .progress-fill { background: linear-gradient(90deg, #3478f6, #35bfa1); }
        .step-text { font: 700 12px/1 var(--font-mono); color: var(--text-dim); }
        .anim-stage > canvas {
            width: 100%;
            height: 100%;
            min-height: 0;
            object-fit: contain;
            border-color: #dfe6ef;
            border-radius: 12px;
            background:
                linear-gradient(rgba(52,120,246,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(52,120,246,.025) 1px, transparent 1px),
                #fff;
            background-size: 24px 24px;
        }

        .step-visual {
            min-height: 60px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-sm);
        }
        .step-visual .sv-head { gap: 8px; }
        .step-visual .sv-badge {
            padding: 4px 9px;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--accent-dk);
            font-size: 11px;
        }
        .step-visual .sv-title { font-size: 17px; }
        .step-visual .sv-text {
            margin: 4px 0;
            color: var(--text-dim);
            font-size: 13px;
            line-height: 1.45;
        }
        .step-visual .sv-keypoint {
            padding: 5px 9px;
            border-left-color: var(--gold);
            border-radius: 7px;
            background: #fff8e8;
            color: #6a4a13;
            font-size: 12px;
            line-height: 1.4;
        }
        .step-visual .sv-canvas-wrap {
            margin-top: 6px;
            align-items: stretch;
            overflow: visible;
        }
        .step-visual .sv-canvas-wrap canvas {
            width: 100%;
            height: 100%;
            max-height: 170px;
            aspect-ratio: auto;
            object-fit: contain;
            border-color: #dce3ec;
            background: #fbfdff;
        }

        .info-right {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(140px, .75fr);
            grid-template-rows: auto minmax(100px, 1fr);
            gap: 9px;
            flex: none;
            min-height: 0;
        }
        .narration {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: auto auto minmax(0, 1fr) auto;
            align-items: center;
            min-height: 82px;
            padding: 10px 11px;
            gap: 8px;
            border: 1px solid #cfe0f7;
            border-radius: 14px;
            background: linear-gradient(135deg, #f7fbff, #eef5ff);
            box-shadow: var(--shadow-sm);
            flex: none;
        }
        .narration .nlabel {
            padding: 5px 8px;
            border-radius: 7px;
            background: var(--accent);
            font-size: 11px;
        }
        .narration .step-num {
            padding: 5px 8px;
            border-radius: 999px;
            background: #fff;
            color: var(--accent-dk);
            font: 700 11px/1 var(--font-mono);
            box-shadow: inset 0 0 0 1px #d9e6f8;
        }
        .narration .op-text {
            min-width: 0;
            font-size: 14px;
            font-weight: 650;
            line-height: 1.45;
        }
        .narration .state-text {
            max-width: 100%;
            padding: 6px 8px;
            overflow: hidden;
            border: 1px solid #ccebdd;
            border-radius: 8px;
            background: #ecfaf4;
            color: #157451;
            font-size: 12px;
            text-overflow: ellipsis;
        }

        .mem-panel-inline,
        .vars-panel-inline {
            min-height: 100px;
            padding: 10px 12px;
            gap: 6px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: rgba(255,255,255,.90);
            box-shadow: var(--shadow-sm);
        }
        .mem-panel-inline .panel-title,
        .vars-panel-inline .panel-title {
            color: var(--text-dim);
            font-size: 12px;
            letter-spacing: .02em;
        }
        .mem-row-inline {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
            align-content: start;
            gap: 5px;
            padding: 2px 10px 8px 0;   /* 上/右/下留白：内容与边界保持距离，避免滚动条遮挡右列、末行贴边 */
        }
        .mem-cell,
        .mem-cell-inline {
            min-width: 0;
            padding: 4px 3px;
            text-align: center;
            border: 1px solid #dce3ec;
            border-radius: 8px;
            background: #f9fbfd;
            font-family: var(--font-mono);
            line-height: 1.18;
            transition: .2s ease;
        }
        .mem-cell.highlight,
        .mem-cell-inline.highlight {
            border-color: var(--gold-dk);
            background: #fff1ca;
            box-shadow: 0 0 0 3px rgba(255,203,102,.22);
            transform: translateY(-1px);
        }
        .mem-cell .addr,
        .mem-cell-inline .addr { color: #8c98a9; font-size: 9px; }
        .mem-cell .val,
        .mem-cell-inline .val { color: var(--text); font-size: 18px; font-weight: 800; }
        .mem-cell .name,
        .mem-cell-inline .name { overflow: hidden; color: var(--accent-dk); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

        .var-list-inline { gap: 4px; font-size: 12px; }
        .var-row,
        .var-row-inline {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            padding: 5px 7px;
            border: 1px solid #e1e7ef;
            border-radius: 8px;
            background: #f9fbfd;
            font-size: 12px;
        }
        .var-row .var-name,
        .var-row-inline .var-name { overflow: hidden; color: var(--accent-dk); font-weight: 800; text-overflow: ellipsis; }
        .var-row .var-val,
        .var-row-inline .var-val { color: var(--text); font-weight: 800; }
        .var-row.changed,
        .var-row-inline.changed {
            border-color: #83d6b8;
            background: #eaf9f3;
            box-shadow: 0 0 0 2px rgba(25,169,116,.08);
        }

        .code-panel {
            min-height: 0;
            max-height: none;
            border: 1px solid #26344b;
            border-radius: 16px;
            background: var(--code-bg);
            box-shadow: 0 12px 28px rgba(17,24,39,.18);
            font-size: 14px;
        }
        .code-panel .code-header {
            display: flex;
            align-items: center;
            min-height: 40px;
            padding: 7px 12px;
            border-bottom-color: #2b3b55;
            background: #182338;
            color: #dce7f7;
            font-size: 12px;
        }
        .code-panel .code-header::before {
            content: '';
            width: 9px;
            height: 9px;
            margin-right: 8px;
            border-radius: 50%;
            background: #fb7185;
            box-shadow: 15px 0 #fbbf24, 30px 0 #34d399;
        }
        .code-panel .code-header .file { margin-left: 32px; }
        .code-panel pre { padding: 6px 0; line-height: 1.48; }
        .code-line { min-height: 23px; padding: 1px 10px; }
        .code-line.current {
            padding-left: 7px;
            border-left-color: var(--gold);
            background: linear-gradient(90deg, rgba(255,203,102,.17), rgba(255,203,102,.04));
        }
        .code-line .ln { width: 32px; padding-right: 10px; color: #60708a; font-size: 11px; }
        .code-line .code-text { color: #e5edf8; font-size: 13px; }
        .code-comment {
            max-height: 190px;
            padding: 9px 12px;
            border-top: 1px solid #34445e;
            background: #172235;
            font-size: 12px;
            line-height: 1.45;
        }
        .code-comment .cc-line { color: #ffd47d; font-size: 12px; }
        .code-comment .cc-explain { color: #c7f0d8; font-size: 12px; }
        .code-comment .cc-link { color: #9fd2ff; font-size: 11px; }

        button, select { transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
        button:focus-visible, select:focus-visible { outline: 3px solid rgba(52,120,246,.28); outline-offset: 2px; }

        @media (max-width: 1320px) {
            :root { --col-left: minmax(0, 1fr); --col-right: minmax(0, 1fr); }
            .shortcut-hint { display: none; }
            .chapter-select { min-width: 132px; }
            .problem-stmt { max-height: 130px; }
            .narration { grid-template-columns: auto auto minmax(0,1fr); }
            .narration .state-text { grid-column: 1 / -1; }
        }

        @media (max-width: 1040px) {
            html, body { height: auto; min-height: 100%; overflow: auto; }
            .page { height: auto; min-height: 100vh; overflow: visible; }
            .row-body {
                display: flex;
                flex: 0 0 auto;
                flex-direction: column;
                min-height: 0;
                overflow: visible;
            }
            .col-left, .col-right {
                display: flex;
                flex: 0 0 auto;
                min-height: 0;
                overflow: visible;
            }
            .problem-stmt { max-height: none; }
            .anim-area { min-height: 440px; }
            .step-visual { min-height: 300px; }
            .info-right { min-height: 210px; }
            .code-panel { min-height: 520px; }
            .top-nav { flex-wrap: wrap; }
            .top-nav .nav-title { flex: 1 1 260px; }
            .chapter-tools { order: 2; margin-left: 0; margin-right: auto; }
        }

        @media (max-width: 700px) {
            .page { padding: 8px; }
            .top-nav { padding: 10px; border-radius: 12px; }
            .top-nav .nav-title { flex-basis: 100%; font-size: 19px; }
            .chapter-tools { width: 100%; }
            .chapter-select { flex: 1; min-width: 0; }
            .top-nav .nav-btn { flex: 1; }
            .chapter-header { align-items: flex-start; flex-wrap: wrap; }
            .chapter-header .ch-name { font-size: 21px; }
            .chapter-header .ch-en { width: 100%; }
            .info-right { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
            .narration { grid-column: 1; grid-template-columns: auto auto 1fr; }
            .mem-panel-inline, .vars-panel-inline { min-height: 130px; }
            .anim-controls .progress { display: none; }
            .anim-area { min-height: 360px; }
            .step-visual { min-height: 300px; }
            .code-panel { min-height: 460px; }
        }

        /* ═══════════ 课程学习预览 iframe（html.acp-preview，?preview=1&chat=1）═══════════
           窄容器（TOC+AI 面板打开后 iframe 宽度 ≤1040px）会触发上面的 ≤1040px 媒体查询，
           把左右两栏堆叠成单列、内容超高（S01–S60 最长约 1676px），底部的内存/步骤示意图
           落在 iframe 折叠线下方被遮挡。这里在预览 iframe 内强制恢复双栏固定高度布局：
           内容始终 ≤ 视口高，内存/步骤示意图完整可见。两栏保持 grid（不降级为 flex 列），
           .col-right 第二行 minmax(0,1fr) 让代码面板继续占满剩余高度、内部滚动，不缩矮。

           面板不再用 overflow:hidden 钳制内容：步骤图解 canvas 固定 960x300、面板缩小后超出部分
           需溢出到 .page 才能出现横向滚动条；垂直滚动条由面板本身（overflow-y:auto）保留。
           主动画 canvas 不再固定 1100x300，按 .main-canvas-wrap 容器尺寸等比缩放（lesson-theme.css 的
           width: min(100%, 1100px) + aspect-ratio: 11/3 保证宽高比不变）。 */
        html.acp-preview, html.acp-preview body { height: 100% !important; overflow: hidden !important; }
        html.acp-preview .page { height: 100vh !important; overflow: auto !important; }
        html.acp-preview .row-body {
            display: grid !important;
            grid-template-columns: var(--col-left) var(--col-right);
            overflow: visible;
        }
        html.acp-preview .col-left, html.acp-preview .col-right {
            display: grid !important;
            overflow: visible;
        }
        /* 题目文字：保留换行 + 自动增高到内容高度（上限 340px/42vh），超出滚动，避免长题被截断 */
        html.acp-preview .problem-stmt {
            white-space: pre-wrap;
            overflow-wrap: break-word;
            max-height: min(340px, 42vh);
            overflow-y: auto;
        }
        html.acp-preview .anim-area, html.acp-preview .step-visual,
        html.acp-preview .info-right, html.acp-preview .code-panel { min-height: 0; }

        /* ═══════════ 题目页布局增强（.lesson-resizable 由 lesson-preview-layout.js 激活）═══════════
           1) 主动画/步骤图解按固定比例轨道（1.55fr / .82fr）分配高度，不提供拖拽调整；
           2) 主动画 canvas 按 .main-canvas-wrap 容器尺寸等比缩放（lesson-theme.css 已设
              width: min(100%, 1100px) + aspect-ratio: 11/3），不再固定 1100x300；
              步骤图解 canvas 仍固定 960x300、面板缩小后滚动条查看完整内容。
           分割条元素仅在本模块注入时存在，故未激活时布局与原来完全一致。 */
        .lesson-resizable .row-body {
            grid-template-columns: var(--col-left) var(--col-right);
            gap: 6px;
        }
        .lesson-resizable .col-left {
            grid-template-rows: auto minmax(300px, 1.55fr) minmax(300px, .82fr);
            gap: 6px;
        }
        /* 横向模式：放行所有溢出，步骤图解 canvas 固定 960x300、面板缩窄后溢出部分需一路到 .page
           才出现横向/纵向滚动条；主动画 canvas 已跟随 .main-canvas-wrap 等比缩放，无溢出。
           垂直滚动不再依赖面板内部滚动条——面板超 viewport 高时由 .page（overflow:auto）接管；
           面板内具体内容（canvas 之外）仍受 .anim-stage 的 overflow:hidden 限制。 */
        .lesson-resizable .anim-area,
        .lesson-resizable .step-visual {
            overflow: visible;
        }
        /* 步骤图解 canvas：跟随 .sv-canvas-wrap 容器尺寸等比缩放（lesson-theme.css 已设
           width: min(100%, 960px)，这里用更高优先级覆盖 aspect-ratio 错误值 16/3，
           改为正确的 32/10 = 3.2 = 960/300，确保宽度缩小时高度按比例自动调整） */
        .lesson-resizable .step-visual .sv-canvas-wrap canvas {
            width: min(100%, 960px);
            height: auto;
            aspect-ratio: 32 / 10;
            object-fit: contain;
        }

        /* 预览 iframe（html.acp-preview）兼容：相同规则已由 .lesson-resizable 覆盖，无需重复 */
        /* 预览专用：纵向模式由 lesson-preview-layout.js applyVerticalDom() 接管 3 轨布局 */

        /* ═══════════ 纵向模式（AI 对话面板打开时由父页面设置 html.vertical-mode）═══════════
           目标布局：主框（题目+主图+步骤图解 | 右侧按 30% 比例宽的窄列操作/内存/变量）
           压至 70% 视口高（动画/步骤区较普通模式降约 30%），代码窗口沉底横跨全宽
           （只扩大宽度），画布整体变高，由 .page 滚动查看（滚动条在学习区右缘）。
           各板块尺寸与排列关系在任意宽度下固定：显式覆盖 ≤1040px/≤700px 媒体查询的
           堆叠模式与强制最小高，消除窄宽度下尺寸计算模式的跳变。
           行轨道由 lesson-preview-layout.js 内联设置：固定像素(≈0.91×父行高 − 0.3×题目高) auto。
           .code-panel 由 lesson-preview-layout.js 在 vertical-mode 激活时移入 .row-body 级。 */
        /* 右列（内存区）按 30% 比例占宽：≥400px 布局宽时恰为 30%，极窄时 120px 保底可读。
           flex:0 0 auto !important 统一全宽度行为：row-body 按内容自然高（主框 0.7×视口高 +
           代码面板固定高），超出视口的部分由 .page 滚动——否则宽窗口（>1040px）下媒体查询的
           flex:0 0 auto 不生效，row-body 被视口高限制、代码面板被压缩至 min-height 裁剪 */
        html.acp-preview.vertical-mode.lesson-resizable .row-body {
            grid-template-columns: 1fr minmax(120px, 30%);
            grid-template-rows: auto auto;
            flex: 0 0 auto !important;
            overflow: visible;         /* 内容高出视口 → .page 滚动 */
        }
        html.acp-preview.vertical-mode:not(.lesson-resizable) .row-body {
            grid-template-columns: 1fr minmax(120px, 30%);
            grid-template-rows: auto auto;
            flex: 0 0 auto !important;
            overflow: visible;
        }
        /* 主框内动画/步骤图解轨道：两个 1fr 均分剩余空间——主动画与步骤解读在可视区域
           各占 50% 高度（等高布局要求）。轨道下限 300px：低分辨率（视口矮）下
           两图高度不小于 300px，行高下限由 lesson-preview-layout.js 同步兜底
           （否则轨道会溢出主框行）；内容超高由板块内部滚动兜底（见下方规则）。 */
        html.acp-preview.vertical-mode.lesson-resizable .col-left {
            grid-template-rows: auto minmax(300px, 1fr) minmax(300px, 1fr);
        }
        /* 未激活 lesson-resizable 时同样 1fr/1fr 均分 */
        html.acp-preview.vertical-mode:not(.lesson-resizable) .col-left {
            grid-template-rows: auto minmax(300px, 1fr) minmax(300px, 1fr);
        }
        /* 覆盖媒体查询的动画/图解/右侧板块强制最小高（440/360、260/230、210/130）：
           纵向模式按比例分配，内容超高由板块内部滚动保证完整呈现

           横向溢出放行：步骤图解 canvas 固定 960x300、面板缩窄后超出部分需一路溢出到
           .col-left/.row-body/.page 触发页面横向滚动条；主动画 canvas 已跟随容器缩放，无溢出。 */
        html.acp-preview.vertical-mode .anim-area { min-height: 0; overflow: visible; }
        html.acp-preview.vertical-mode .step-visual { min-height: 0; overflow: visible; }
        html.acp-preview.vertical-mode .info-right { min-height: 0; }
        /* 覆盖 ≤1040px/≤700px 媒体查询给画布容器加的强制最小高（320/240px、150/126px）：
           这些最小高会把动画/步骤区内容撑过轨道下限，进而撑高主框行（旧 minmax 的 auto 上限）
           引发页面滚动；纵向模式下画布随容器缩放（object-fit:contain），内容超高由板块内部滚动兜底 */
        html.acp-preview.vertical-mode .main-canvas-wrap { min-height: 0; }
        html.acp-preview.vertical-mode .step-visual .sv-canvas-wrap { min-height: 0; }
        html.acp-preview.vertical-mode.lesson-resizable .col-left { grid-column: 1; grid-row: 1; }
        html.acp-preview.vertical-mode.lesson-resizable .col-right { grid-column: 2; grid-row: 1; }
        html.acp-preview.vertical-mode:not(.lesson-resizable) .col-left { grid-column: 1; grid-row: 1; }
        html.acp-preview.vertical-mode:not(.lesson-resizable) .col-right { grid-column: 2; grid-row: 1; }
        /* 代码面板：固定尺寸——代码区 400px（内部滚动）+ 卡片区 300px（内部滚动），
           不提供拖拽调整；总高 = 表头 + 400 + 300，与宽度/内容无关 */
        html.acp-preview.vertical-mode .code-panel {
            grid-column: 1 / -1;
            grid-row: 2;
            max-height: none;
            min-height: 160px;
        }
        /* 代码区固定 400px，超出部分内部滚动条查看全文 */
        html.acp-preview.vertical-mode .code-panel pre {
            flex: none;
            height: 400px;
            min-height: 0;
            overflow-y: auto;
            overflow-x: auto;
        }
        /* 卡片区（解读区：讲解/语法卡）固定 300px，超高由内部滚动保证完整呈现；
           选择器带 .lesson-resizable 提升特异性，覆盖后方 lesson-resizable 基础规则的
           max-height:none / height:auto（拖拽展开语义），以及媒体查询的 215px 限高 */
        html.acp-preview.vertical-mode.lesson-resizable .learning-area,
        html.acp-preview.vertical-mode:not(.lesson-resizable) .learning-area {
            flex: 0 0 auto;
            height: 300px !important;
            max-height: 300px;
            min-height: 0;
        }
        /* 纵向模式禁用解读区拖拽分割条：高度固定，不允许拖拽调整 */
        html.acp-preview.vertical-mode .lesson-learn-divider { display: none; }
        /* .col-right 只剩 .info-right 一个子元素（代码面板已移出）：单行弹性填满列高 */
        html.acp-preview.vertical-mode .col-right {
            grid-template-rows: minmax(0, 1fr);
        }
        /* .info-right 从 2×2 grid 改为单列三行 grid（操作/内存/变量 总线排列），放入右侧窄列 */
        html.acp-preview.vertical-mode .info-right {
            grid-template-columns: 1fr;
            grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }
        /* 操作面板：窄列下标签+步骤号+操作文本一行、状态文本换到整行 */
        html.acp-preview.vertical-mode .narration {
            grid-column: 1 / -1;
            grid-template-columns: auto auto minmax(0, 1fr);
            grid-template-rows: auto auto;
            min-height: 0;
            padding: 8px;
        }
        html.acp-preview.vertical-mode .narration .state-text {
            grid-column: 1 / -1;
            grid-row: 2;
            max-width: 100%;
            white-space: normal;
        }
        /* 内存/变量面板：grid 行弹性（第 2/3 行 minmax(0,1fr)）自然堆叠、高度提升 */
        html.acp-preview.vertical-mode .mem-panel-inline,
        html.acp-preview.vertical-mode .vars-panel-inline {
            min-height: 0;
        }
        /* 内存单元格 & 变量行：紧凑字号，适配窄列 */
        html.acp-preview.vertical-mode .mem-cell-inline {
            font-size: 14px;
            padding: 1px 2px;
        }
        html.acp-preview.vertical-mode .mem-cell-inline .val {
            font-size: 18px;
        }
        html.acp-preview.vertical-mode .mem-cell-inline .addr,
        html.acp-preview.vertical-mode .mem-cell-inline .name {
            font-size: 10px;
        }
        html.acp-preview.vertical-mode .var-row-inline {
            font-size: 14px;
            padding: 2px 4px;
        }
        /* 代码面板字号：纵向模式下沉底横跨全宽、内部滚动，放大一档更易读 */
        html.acp-preview.vertical-mode .code-panel {
            font-size: 16px;
        }
        html.acp-preview.vertical-mode .code-line .code-text {
            font-size: 16px;
        }
        /* 纵向模式：iframe 内部滚动（主框完整视口高 + 代码沉底，画布变高可滚动查看） */
        html.acp-preview.vertical-mode, html.acp-preview.vertical-mode body { overflow: hidden !important; }
        html.acp-preview.vertical-mode .page {
            height: 100% !important;
            overflow-y: auto !important;
            overflow-anchor: none;    /* 关闭滚动锚定：避免 grid-template-rows 重算 + 代码面板沉底
                                          时浏览器自动锚定主框位置，把 .page 顶到看不见的位置 */
        }

        /* 拖拽提示气泡：hover 分割条时浮现 */
        .lesson-divider-tip {
            position: absolute;
            z-index: 8;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 4px 9px;
            border-radius: 8px;
            font-size: 11.5px;
            font-weight: 600;
            white-space: nowrap;
            background: #1e3a5f;
            color: #fff;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
            box-shadow: 0 3px 10px rgba(31,49,78,.25);
        }
        .lesson-learn-divider:hover .lesson-divider-tip { opacity: 1; }

        /* ═══════════ 解读区（代码 pre / .learning-area）高度拖拽 + 右下角收起按钮 ═══════════
           仅 html.acp-preview.lesson-resizable 激活（lesson-preview-layout.js 注入 divider/toggle 后）。 */
        html.acp-preview.lesson-resizable .code-panel { position: relative; }
        html.acp-preview.lesson-resizable .learning-area {
            max-height: none;              /* 放开 240px 上限，由拖拽高度控制 */
            min-height: 0;
            flex: 0 0 auto;
            height: auto;
        }
        html.acp-preview.lesson-resizable .learning-area.lesson-learn-hidden { display: none; }

        .lesson-learn-divider {
            position: relative;
            z-index: 5;
            height: 12px;
            cursor: row-resize;
            touch-action: none;
            flex: 0 0 12px;
            background: transparent;
        }
        .lesson-learn-divider::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 4px;
            transform: translateY(-50%);
            border-radius: 999px;
            background: rgba(52,120,246,.2);
            transition: background .15s ease;
        }
        .lesson-learn-divider:hover { background: rgba(52,120,246,.07); }
        .lesson-learn-divider:hover::before,
        .lesson-learn-divider:active::before { background: rgba(52,120,246,.55); }
        .lesson-learn-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 8px;
            border-radius: 999px;
            background: radial-gradient(circle at 12% 50%, rgba(52,120,246,.55) 0 2.4px, transparent 2.6px),
                        radial-gradient(circle at 50% 50%, rgba(52,120,246,.55) 0 2.4px, transparent 2.6px),
                        radial-gradient(circle at 88% 50%, rgba(52,120,246,.55) 0 2.4px, transparent 2.6px);
            background-color: rgba(255,255,255,.85);
            box-shadow: 0 1px 3px rgba(31,49,78,.2);
            transition: transform .15s ease, background-color .15s ease;
            pointer-events: none;
        }
        .lesson-learn-divider:hover::after { background-color: #3478f6; transform: translate(-50%, -50%) scale(1.18); }
        .lesson-learn-divider.lesson-learn-hidden { display: none; }

        /* 右下角收起/展开按钮 */
        .lesson-learn-toggle {
            position: absolute;
            right: 10px;
            bottom: 8px;
            z-index: 6;
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 1px solid #3c506e;
            border-radius: 999px;
            background: #22314a;
            color: #dce7f7;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,.25);
        }
        .lesson-learn-toggle:hover { background: #2d4263; border-color: #5879a5; }

        /* 拖拽期间全局光标 + 禁止选中文本 */
        html.lesson-resizing-col, html.lesson-resizing-col * { cursor: col-resize !important; user-select: none !important; }
        html.lesson-resizing-learn, html.lesson-resizing-learn * { cursor: row-resize !important; user-select: none !important; }

        /* ═══ 画布方框标题：全局主图 / 步骤解读 / 步骤说明 ═══ */
        /* 全局主图：覆盖在主画布左上角（右上角是 AI 解释按钮），不遮挡内容 */
        .main-canvas-wrap .canvas-box-title {
            position: absolute;
            top: 10px;
            left: 12px;
            z-index: 7;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: calc(100% - 120px);
            padding: 4px 11px;
            border: 1px solid #cfe0f7;
            border-radius: 999px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 2px 8px rgba(31,49,78,.12);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .canvas-box-tag { color: #1d4ed8; font-size: 12px; font-weight: 800; }
        .canvas-box-note { color: #7b879a; font-size: 11px; font-weight: 600; }
        @media (max-width: 700px) {
            .main-canvas-wrap .canvas-box-title { top: 6px; left: 8px; padding: 2px 8px; }
            .main-canvas-wrap .canvas-box-note { display: none; }
        }
        /* 步骤解读 / 步骤说明：步骤可视化框内的小节标题条 */
        .step-visual .sv-box-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            align-self: flex-start;
            margin-top: 6px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            flex-shrink: 0;
        }
        .step-visual .sv-box-text-title {
            color: #8a5200;
            background: #fff8e8;
            border: 1px solid #f4d28b;
        }
        .step-visual .sv-box-canvas-title {
            color: #1f5cae;
            background: #edf5ff;
            border: 1px solid #cfe1fa;
            margin-top: 8px;
        }
        .step-visual .sv-box-canvas-title .canvas-box-note { margin-left: 2px; }