:root { color-scheme:light; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:#1d2538; background:#f6f8fd; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:#315edb; }
.lesson-shell { width:min(930px,calc(100% - 36px)); margin:48px auto; }
.lesson-content { border:1px solid #dfe5f1; border-radius:18px; background:#fff; box-shadow:0 15px 42px rgba(20,40,90,.045); }
.lesson-content { min-height:440px; padding:34px; }
.lesson-blocks { display:grid; gap:18px; }
.lesson-blocks.layout-two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lesson-blocks.layout-cards { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.lesson-blocks.layout-free { position:relative; display:block; min-height:var(--canvas-desktop-height,800px); border-radius:12px; }
.lesson-blocks.layout-free > * { position:absolute; left:var(--free-desktop-x,0); top:var(--free-desktop-y,0); width:var(--free-desktop-w,100%); max-width:100%; z-index:var(--free-desktop-z,0); }
.lesson-blocks > [hidden] { display:none !important; }
.lesson-blocks .span-full { grid-column:1 / -1; }
.lesson-blocks.layout-cards > * { padding:22px; border:1px solid #dfe5f1; border-radius:14px; }
.lesson-block-heading { margin:0; font-size:22px; }
.lesson-block-paragraph { margin:0; white-space:pre-wrap; line-height:1.85; }
.lesson-inline-content { user-select:text; }
.lesson-inline-highlight { padding:0 .12em; border-radius:.16em; background:#fff0a6; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.lesson-inline-underline { text-decoration:underline; text-decoration-color:#5268dc; text-decoration-thickness:.13em; text-underline-offset:.16em; }
.lesson-inline-strong { font-weight:800; color:#244cc3; }
.lesson-tone-contrast .lesson-inline-strong { color:#b9d5ff; }
.lesson-block-callout { padding:20px; border-left:4px solid #4c69e9; border-radius:10px; background:#eef2ff; white-space:pre-wrap; line-height:1.75; }
.lesson-block-image { margin:0; }
.lesson-block-image img { display:block; max-width:100%; height:auto; border-radius:12px; }
.lesson-block-image figcaption { margin-top:7px; color:#68748a; font-size:12px; }
.lesson-block-reveal { padding:18px; border:1px solid #ccd7ee; border-radius:12px; }
.lesson-block-reveal summary { cursor:pointer; font-weight:650; }
.lesson-block-reveal p { margin-bottom:0; line-height:1.7; }
.lesson-reveal-trigger { padding:11px 17px; border:1px solid #4d61db; border-radius:9px; background:#4d61db; color:#fff; font:inherit; font-weight:650; cursor:pointer; }
.lesson-reveal-trigger:disabled { opacity:.72; cursor:default; }
.lesson-block-quiz { padding:22px; border:1px solid #d4dcf0; border-radius:14px; }
.lesson-block-quiz h3 { margin:0 0 16px; }
.lesson-quiz-options { display:grid; gap:8px; }
.lesson-quiz-options button { padding:12px; border:1px solid #d4dcf0; border-radius:8px; background:white; text-align:left; }
.lesson-quiz-options button.is-correct { border-color:#239461; background:#e7f8ef; }
.lesson-quiz-options button.is-incorrect { border-color:#c65555; background:#fff0f0; }
.lesson-quiz-feedback { min-height:1.5em; margin-bottom:0; color:#56647b; }
.lesson-block-match,.lesson-block-reflection { padding:22px; border:1px solid #d4dcf0; border-radius:14px; }
.lesson-block-match h3,.lesson-block-reflection h3 { margin:0 0 18px; }
.lesson-match-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:16px; margin:10px 0; }
.lesson-match-row select,.lesson-block-reflection textarea { width:100%; padding:10px; border:1px solid #cbd5ea; border-radius:8px; background:#fff; }
.lesson-block-match > button { margin-top:10px; padding:10px 16px; border:0; border-radius:8px; background:#4d61db; color:#fff; }
.lesson-block-reflection p { color:#738099; font-size:12px; }
.lesson-group-title { margin:0 0 16px; font-size:21px; }
.lesson-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.lesson-info-card { display:grid; align-content:start; gap:10px; min-width:0; min-height:150px; padding:20px; border:1px solid #d9e2f2; border-radius:14px; background:#fff; color:#1d2538; text-align:left; }
.lesson-info-card small,.lesson-process-card small { color:#5268c7; font-size:11px; font-weight:750; letter-spacing:.11em; }
.lesson-info-card strong,.lesson-process-card strong { font-size:17px; }
.lesson-info-card p,.lesson-process-card p { margin:0; color:#59677e; line-height:1.65; white-space:pre-wrap; }
.lesson-info-card[aria-expanded="false"] p { display:none; }
.lesson-info-card[aria-expanded]::after { content:"点击展开"; color:#5268c7; font-size:11px; }
.lesson-info-card[aria-expanded="true"]::after { content:"点击收起"; }
.lesson-info-card.is-sequential { display:block; height:210px; min-height:0; padding:0; border:0; background:transparent; perspective:900px; }
.lesson-info-card.is-sequential::after { content:none; }
.lesson-info-card.is-sequential:disabled { opacity:.48; cursor:not-allowed; }
.lesson-sequence-inner { display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s ease; }
.lesson-info-card.is-sequential[aria-expanded="true"] .lesson-sequence-inner { transform:rotateY(180deg); }
.lesson-sequence-face { display:flex; position:absolute; inset:0; flex-direction:column; justify-content:center; gap:10px; overflow:auto; padding:18px; border:1px solid #d9e2f2; border-radius:14px; background:#fff; backface-visibility:hidden; }
.lesson-sequence-back { transform:rotateY(180deg); background:#eef2ff; }
.lesson-sequence-body { color:#59677e; line-height:1.65; white-space:pre-wrap; }
.lesson-sequence-hint { margin-top:auto; color:#5268c7; font-size:12px; }
.lesson-info-card.is-sequential:focus-visible { outline:3px solid #4d61db; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .lesson-sequence-inner { transition:none; } }
.lesson-process-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.lesson-process-card { display:grid; align-content:start; gap:10px; min-width:0; padding:18px; border:1px solid #d9e2f2; border-radius:12px; background:#f7f9fe; }
.lesson-process-card[hidden] { display:none; }
.lesson-process-card img { width:100%; max-height:170px; object-fit:cover; border-radius:9px; }
.lesson-process-next,.lesson-quiz-retry { margin-top:14px; padding:9px 13px; border:1px solid #c9d5f2; border-radius:8px; background:#eef2ff; color:#3152b5; }
.lesson-quiz-branch { display:inline-block; margin:14px 0 0 8px; padding:9px 13px; border:1px solid #4d61db; border-radius:8px; background:#4d61db; color:#fff; cursor:pointer; }
.lesson-block-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.lesson-comparison-side { min-height:125px; padding:20px; border:1px solid #d8e1f0; border-radius:12px; background:#f8faff; }
.lesson-comparison-side:nth-child(2) { background:#eef2ff; }
.lesson-comparison-side strong { font-size:18px; }.lesson-comparison-side p { margin:12px 0 0; line-height:1.7; white-space:pre-wrap; }
.lesson-block-checklist ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.lesson-block-checklist li { padding:12px 14px; border:1px solid #e0e6f2; border-radius:10px; background:#fff; line-height:1.55; }
.lesson-block-checklist li::before { content:"✓"; margin-right:10px; color:#4d61db; font-weight:800; }
.lesson-block-checklist li:has(input)::before { content:none; }
.lesson-block-checklist label { display:flex; gap:10px; align-items:start; cursor:pointer; }
.lesson-block-checklist input { margin-top:4px; accent-color:#4d61db; }
.lesson-block-checklist label:has(input:checked) span { color:#758098; text-decoration:line-through; }
.lesson-table-scroll { overflow-x:auto; border:1px solid #d9e2f2; border-radius:12px; }
.lesson-block-table table { width:100%; border-collapse:collapse; text-align:left; }
.lesson-block-table th,.lesson-block-table td { padding:12px 14px; border-bottom:1px solid #e3e9f4; line-height:1.55; }
.lesson-block-table th { background:#eef2ff; color:#304475; font-size:13px; }
.lesson-block-table tr:last-child td { border-bottom:0; }
.lesson-block-divider { display:flex; align-items:center; gap:12px; color:#65748e; font-size:12px; font-weight:700; }
.lesson-block-divider::before,.lesson-block-divider::after { content:""; height:1px; flex:1; background:#cfd8e9; }
.lesson-block-divider:empty::after { content:none; }
.lesson-tone-soft { padding:20px; border-radius:13px; background:#eef2ff; }
.lesson-tone-contrast { padding:20px; border-radius:13px; background:#1e3260; color:#fff; }
.lesson-tone-contrast p,.lesson-tone-contrast small { color:#e1e9ff; }
.lesson-tone-contrast .lesson-info-card,.lesson-tone-contrast .lesson-process-card,.lesson-tone-contrast .lesson-comparison-side,.lesson-tone-contrast .lesson-block-checklist li,.lesson-tone-contrast td { color:#1d2538; }
.lesson-tone-contrast .lesson-info-card p,.lesson-tone-contrast .lesson-process-card p,.lesson-tone-contrast .lesson-comparison-side p { color:#59677e; }
.lesson-align-center { text-align:center; }
.lesson-density-compact { padding:12px; }
.lesson-hover-lift,.lesson-hover-glow { transition:transform .2s ease,box-shadow .2s ease; }
.lesson-hover-lift:hover { transform:translateY(-5px); }
.lesson-hover-glow:hover { box-shadow:0 12px 32px rgba(68,98,190,.22); }
.lesson-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(100%,860px); margin:48px auto 0; padding-top:24px; border-top:1px solid #dfe5f1; }
.lesson-pagination-link { display:flex; min-width:0; min-height:96px; flex-direction:column; justify-content:center; gap:8px; padding:18px 20px; border:1px solid #d3dbed; border-radius:10px; background:#fff; color:#1d2538; text-align:left; transition:border-color .2s ease,background-color .2s ease,transform .2s ease; }
.lesson-pagination-link[data-direction="next"] { grid-column:2; text-align:right; }
.lesson-pagination-direction { color:#6e7a91; font-size:12px; }
.lesson-pagination-link strong { overflow:hidden; font-size:16px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.lesson-pagination-link:not(:disabled):hover,.lesson-pagination-link:not(:disabled):focus-visible { border-color:#9ab6d2; background:#f2f6ff; transform:translateY(-2px); }
.lesson-pagination-link:disabled { opacity:.48; cursor:not-allowed; }
.lesson-sequence-status { margin:22px 0 0; color:#5268c7; font-size:14px; }
@media(max-width:760px) { .lesson-shell { margin:18px auto; }.lesson-content { padding:22px; }.lesson-blocks.layout-two-column,.lesson-match-row,.lesson-block-comparison { grid-template-columns:1fr; }.lesson-blocks.layout-free { min-height:var(--canvas-mobile-height,1100px); }.lesson-blocks.layout-free > * { left:var(--free-mobile-x,0); top:var(--free-mobile-y,0); width:var(--free-mobile-w,100%); z-index:var(--free-mobile-z,0); }.lesson-controls { grid-template-columns:1fr; }.lesson-pagination-link[data-direction="next"] { grid-column:1; } }