/* Knowledge Studio lesson pages — spacious, clear, low-shadow visual system */
.lesson-shell { width:min(1040px, calc(100% - 48px)); padding-top:25px; }
.lesson-topline { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; }
.back-link { color:var(--blue-dark); font-weight:800; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.lesson-label { color:var(--blue-dark); font-size:12px; font-weight:900; letter-spacing:.08em; }
.lesson-hero { margin-bottom:18px; padding:30px 32px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:14px; background:var(--surface); box-shadow:none; }
.lesson-hero .eyebrow { margin-bottom:8px; }
.lesson-hero h1 { margin:0 0 12px; color:var(--text); font-size:clamp(30px,4vw,40px); font-weight:800; line-height:1.2; letter-spacing:-.025em; }
.lesson-lead { max-width:820px; margin:0; color:var(--text-soft); font-size:17px; line-height:1.75; }
.lesson-nav { position:sticky; z-index:20; top:86px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 22px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:none; }
.lesson-nav a { display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:8px; color:var(--text); font-size:14px; font-weight:800; text-decoration:none; }
.lesson-nav a:hover, .lesson-nav a[aria-current="location"] { background:var(--blue-soft); color:var(--blue-dark); }
.lesson-nav-placeholder { height:0; }
.lesson-nav.in-header { position:static; display:flex; flex-wrap:nowrap; gap:2px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.lesson-nav.in-header::-webkit-scrollbar { display:none; }
.lesson-nav.in-header a { min-height:34px; padding:0 9px; white-space:nowrap; font-size:12px; }
.lesson-contents { margin:0 0 32px; padding:25px 26px; border:1px solid var(--line-strong); border-radius:13px; background:var(--surface); box-shadow:none; scroll-margin-top:115px; }
.contents-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.contents-heading .eyebrow { margin:0 0 4px; }
.contents-heading h2 { margin:0; color:var(--text); font-size:24px; line-height:1.25; }
.contents-hint { color:var(--muted); font-size:13px; }
.contents-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.contents-group { min-width:0; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.contents-group h3 { margin:0 0 13px; padding-bottom:10px; border-bottom:1px solid var(--line-strong); color:var(--text); font-size:17px; line-height:1.35; }
.contents-group ol { margin:0; padding-left:24px; }
.contents-group li { margin:8px 0; padding-left:3px; color:var(--text-soft); font-size:14px; line-height:1.55; }
.contents-group a { color:var(--blue-dark); font-weight:700; text-decoration:none; }
.contents-group a:hover { text-decoration:underline; }
.lesson-section { margin:0 0 36px; scroll-margin-top:110px; }
.section-title-row { display:flex; align-items:center; gap:13px; margin:0 0 18px; }
.section-index { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--blue-soft); color:var(--blue-dark); font-size:13px; font-weight:900; }
.section-title-row h2 { margin:0; color:var(--text); font-size:27px; line-height:1.25; }
.section-intro { max-width:850px; margin:0 0 19px; color:var(--text-soft); font-size:16px; line-height:1.7; }
.lesson-card { margin:0 0 22px; padding:27px 29px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:none; scroll-margin-top:112px; }
.lesson-card:last-child { margin-bottom:0; }
.lesson-card h3 { margin:0 0 13px; color:var(--text); font-size:21px; line-height:1.35; }
.lesson-card h4 { margin:22px 0 9px; color:var(--text); font-size:17px; line-height:1.4; }
.lesson-card p { margin:0 0 15px; color:var(--text-soft); font-size:16px; line-height:1.8; }
.lesson-card p:last-child { margin-bottom:0; }
.lesson-card ul, .lesson-card ol { margin:12px 0 16px; padding-left:25px; color:var(--text-soft); }
.lesson-card li { margin:8px 0; padding-left:4px; font-size:15px; line-height:1.7; }
.lesson-card strong { color:var(--text); font-weight:800; }
.lesson-card code, .inline-code { padding:1px 5px; border-radius:4px; background:var(--surface-soft); color:var(--blue-dark); font: .92em Consolas, "Courier New", monospace; overflow-wrap:anywhere; }
.concept-note, .warning-note { margin:18px 0 0; padding:15px 18px; border-left:3px solid var(--blue); border-radius:0 8px 8px 0; background:var(--blue-soft); color:var(--text-soft); font-size:15px; line-height:1.7; }
.warning-note { border:1px solid var(--line-strong); border-left:3px solid #D6A64B; background:var(--surface-soft); }
.code-block { position:relative; margin:17px 0 18px; overflow:hidden; border:1px solid #273D59; border-radius:9px; background:var(--code-bg); }
.code-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.12); color:#C5D6EB; font-size:11px; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.code-block pre { max-width:100%; margin:0; padding:18px 20px 20px; overflow-x:auto; color:var(--code-text); font:14px/1.8 Consolas,"Courier New",monospace; tab-size:2; white-space:pre; }
.code-block pre code { display:inline; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; overflow-wrap:normal; }
.copy-code-button { flex:0 0 auto; margin-left:auto; padding:5px 9px; border:1px solid rgba(255,255,255,.22); border-radius:6px; background:rgba(255,255,255,.07); color:#E4EFFB; font:700 11px var(--font-main); cursor:pointer; }
.copy-code-button:hover { background:rgba(255,255,255,.14); }
.copy-code-button.is-copied { color:#A8EDC2; }
.live-preview { margin:18px 0 20px; padding:20px 22px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-soft); }
.preview-caption { margin:-20px -22px 17px; padding:9px 15px; border-bottom:1px solid var(--line); border-radius:9px 9px 0 0; background:var(--surface-inset); color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.06em; }
.html-mini, .ks-plain-preview, .type-preview, .text-transform-demo, .color-role-demo, .token-preview, .font-short-preview { color:var(--text); }
.html-mini h4, .ks-plain-preview h4, .type-preview h4, .token-preview h4, .font-short-preview h4 { margin:0 0 8px; color:var(--text); font-size:22px; line-height:1.25; }
.html-mini p, .ks-plain-preview p, .type-preview p, .token-preview p, .font-short-preview p { margin:0 0 8px; color:var(--text-soft); }
.html-mini a, .ks-plain-preview a, .type-preview a, .token-preview a { color:var(--blue-dark); font-weight:800; }
.html-course-card, .ks-mini-card { max-width:520px; padding:17px 19px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); }
.html-course-card p:first-child { margin:0 0 7px; color:var(--blue-dark); font-size:12px; font-weight:800; letter-spacing:.08em; }
.html-course-card h4, .ks-mini-card h4 { margin:0 0 7px; color:var(--text); font-size:19px; }
.html-course-card p, .ks-mini-card p { margin:0 0 8px; color:var(--text-soft); }
.html-course-card a, .ks-mini-card a { color:var(--blue-dark); font-weight:800; }
.ks-plain-label, .type-label, .token-label, .sys-label { color:var(--blue-dark)!important; font-size:12px; font-weight:900; letter-spacing:.07em; }
.ks-plain-preview { padding:5px; }
.color-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.color-swatches > div { min-width:0; display:flex; flex-direction:column; gap:5px; color:var(--text); font-size:13px; }
.color-swatches code { overflow-wrap:anywhere; color:var(--text-soft); font-size:11px; }
.swatch { display:block; min-height:66px; border:1px solid var(--line-strong); border-radius:7px; }
.swatch-hex,.swatch-rgb { background:#1769C2; }
.swatch-name { background:royalblue; }
.swatch-alpha { background:rgba(23,105,194,.25); }
.swatch-trans-wrap { position:relative; }
.swatch-trans-wrap .swatch-alpha { background:linear-gradient(90deg,#1769C2 0 50%,#fff 50% 100%); }
.font-size-demo p { margin:5px 0; }
.font-px { font-size:20px!important; }
.font-rem { font-size:1.25rem!important; }
.font-parent { margin-top:12px; padding:10px; border:1px dashed var(--line-strong); font-size:16px; }
.font-parent .font-em { margin:4px 0 0; font-size:1.25em!important; }
.type-preview .type-italic { font-style:italic; }
.align-demo p { margin:8px 0; padding:6px 10px; border:1px solid var(--line); background:var(--surface); }
.align-left { text-align:left; }.align-center { text-align:center; }.align-right { text-align:right; }
.decoration-demo { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.dec-underline { color:var(--blue-dark); text-decoration:underline; }.dec-none { color:var(--blue-dark); text-decoration:none; font-weight:800; }.decoration-demo span { color:var(--muted); text-decoration:line-through; }
.box-model-demo { padding:6px; border:1px dashed var(--line-strong); border-radius:8px; background:var(--surface-inset); text-align:center; color:var(--text); font-size:13px; }
.bm-margin-label { padding:14px; border:1px dashed #7FA0C3; border-radius:8px; background:#E6EDF6; color:#315579; font-weight:800; }
.bm-border-demo { margin-top:9px; padding:14px; border:6px solid #6AAAE5; border-radius:8px; background:#F9FCFF; color:#315579; }
.bm-padding-demo { padding:15px; border:1px dashed #77A8D1; border-radius:6px; background:#EAF4FC; }
.bm-content-demo { padding:13px; border-radius:4px; background:#C9E4FA; color:#173F7A; font-weight:900; }
body[data-theme="dark"] .bm-margin-label { border-color:#597A9D; background:#243951; color:#D8E8F8; }
body[data-theme="dark"] .bm-border-demo { border-color:#4E94CF; background:#172A40; color:#DCEBFA; }
body[data-theme="dark"] .bm-padding-demo { border-color:#537FA9; background:#203B56; }
body[data-theme="dark"] .bm-content-demo { background:#315F86; color:#F2F7FD; }
.width-demo { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; width:100%; max-width:600px; min-width:0; } .width-demo > * { min-width:0; }
.width-bar { padding:9px 12px; border:1px solid var(--blue-border); border-radius:6px; background:var(--blue-soft); color:var(--text); font-size:13px; font-weight:800; }
.width-fixed { width:320px; max-width:100%; }.width-percent { width:80%; }.width-max { width:100%; max-width:520px; }
.padding-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.padding-comparison > div > span { display:block; margin-bottom:7px; color:var(--text-soft); font-size:13px; font-weight:800; }
.pad-box { border:1px solid var(--blue-border); border-radius:7px; background:var(--surface); color:var(--text); font-weight:800; }
.pad-small { padding:8px; }.pad-large { padding:24px; }
.border-demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.border-demo-grid > div { min-height:60px; display:grid; place-items:center; border-radius:6px; background:var(--surface); color:var(--text); font-size:13px; font-weight:800; }
.border-solid { border:1px solid #B8CBE0; }.border-dashed { border:1px dashed var(--blue); }.border-heavy { border:2px solid var(--blue); }.border-none { border:1px solid transparent; }
.margin-demo { padding:12px; border:1px dashed var(--line-strong); border-radius:8px; background:var(--surface-inset); }
.margin-card { margin-bottom:16px; padding:14px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--text); }.margin-card:last-child { margin-bottom:0; }.margin-card small { color:var(--muted); }
.calc-demo { max-width:480px; padding:10px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--text); }
.calc-demo > strong { display:block; margin-top:9px; color:var(--blue-dark); }
.calc-box { padding:16px; border:1px solid #6DA9DC; background:#E7F3FF; color:#173F7A; }
.calc-content { display:grid; place-items:center; min-height:54px; background:#BBDCF6; color:#173F7A; font-weight:900; }
.calc-box span { display:block; margin-top:5px; font-size:12px; }
.box-sizing-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.box-sizing-compare b, .box-sizing-compare small { display:block; color:var(--text-soft); }
.sizing-outer { height:100px; margin:8px 0; padding:10px; border:1px dashed var(--line-strong); background:var(--surface-inset); }
.sizing-inner { height:100%; display:grid; place-items:center; padding:8px; border:5px solid #6AAAE5; background:#EAF4FC; color:#173F7A; font-size:12px; font-weight:900; text-align:center; }
.sizing-content { width:100%; }.sizing-border { box-sizing:border-box; width:100%; }
.radius-demo { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.radius-square { width:76px; height:76px; display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--blue-soft); color:var(--text); font-size:13px; font-weight:900; }
.radius-8 { border-radius:8px; }.radius-16 { border-radius:16px; }.radius-two { border-radius:20px 5px; }.radius-three { border-radius:20px 20px 5px; }.radius-pill { padding:12px 20px; border-radius:999px; background:var(--blue); color:white; font-weight:800; }.radius-circle { width:76px; height:76px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:white; font-weight:900; }
.bm-card-preview { max-width:580px; padding:22px 24px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--text); }
.bm-card-preview p { margin:0 0 8px; color:var(--text-soft); }.bm-card-preview p:first-child { color:var(--blue-dark); font-size:11px; font-weight:900; }.bm-card-preview h4 { margin:0 0 7px; color:var(--text); font-size:21px; }.bm-card-preview span { color:var(--muted); font-size:13px; }
.system-preview { max-width:580px; padding:18px 20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); }.system-preview h4 { margin:0 0 6px; font-size:20px; }.system-preview p { margin:0 0 9px; color:var(--text-soft); }.system-preview a { color:var(--blue-dark); font-weight:800; }
.line-height-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.line-height-demo > div { padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); }.line-height-demo b { display:block; margin-bottom:8px; font-size:13px; }.line-height-demo p { margin:0; color:var(--text-soft); }.lh-tight { line-height:1.1; }.lh-open { line-height:1.6; }
.transform-label { letter-spacing:.06em; text-transform:uppercase; color:var(--blue-dark)!important; font-size:13px; font-weight:900; }
.color-role-demo .role-main { color:var(--text); font-weight:800; }.color-role-demo .role-muted { color:var(--muted); }.color-role-demo a { color:var(--blue-dark); font-weight:800; }.role-panel { margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--blue-soft); color:var(--text); }
.surface-demo { padding:18px; border:1px solid var(--line); border-radius:8px; background:#EAF3FC; }
body[data-theme="dark"] .surface-demo { background:#1A2D46; }
.surface-card { max-width:490px; padding:19px 20px; border:1px solid #D5E1EF; border-radius:10px; background:#FFFFFF; color:#173F7A; }
.surface-card p { margin:0 0 6px; color:#2D9BF0; font-size:11px; font-weight:900; }.surface-card h4 { margin:0 0 7px; color:#173F7A; font-size:19px; }.surface-card span { color:#4E6B91; font-size:13px; }
.shadow-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:15px; background:var(--surface-inset); border-radius:8px; }
.shadow-card { padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-weight:800; text-align:center; }.shadow-none { box-shadow:none; }.shadow-soft { box-shadow:0 2px 8px rgba(25,63,120,.06); }
.token-preview { padding:17px 18px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.token-preview .token-label { color:var(--blue-dark)!important; }.font-short-preview { padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.font-short-preview h4 { font:800 1.75rem/1.25 "Nunito",Arial,sans-serif; }
.quiz-form { max-width:100%; }.quiz-question { margin:0 0 16px; padding:19px 21px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }.quiz-question legend { max-width:100%; padding:0 5px; color:var(--text); font-weight:800; line-height:1.55; }.quiz-question legend span { margin-right:8px; color:var(--blue-dark); }.quiz-options { display:grid; gap:6px; margin-top:8px; }.quiz-option { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:6px; color:var(--text-soft); cursor:pointer; font-size:15px; line-height:1.55; }.quiz-option:hover { background:var(--surface-soft); }.quiz-option input { flex:0 0 auto; margin:5px 0 0; accent-color:var(--blue); }.quiz-feedback { margin:6px 0 0; color:var(--text-soft); font-size:14px; line-height:1.6; }.quiz-question.is-correct { border-color:var(--green); background:var(--green-soft); }.quiz-question.is-incorrect { border-color:var(--red); background:var(--red-soft); }
.quiz-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }.primary-button,.secondary-button { min-height:43px; padding:0 18px; border:1px solid var(--line-strong); border-radius:8px; font:800 14px var(--font-main); cursor:pointer; }.primary-button { border-color:var(--blue); background:var(--blue); color:#fff; }.primary-button:hover { background:var(--blue-dark); }.secondary-button { background:var(--surface); color:var(--text); }.quiz-result { margin:17px 0 0; padding:14px 16px; border:1px solid var(--blue-border); border-radius:8px; background:var(--blue-soft); color:var(--text); font-weight:800; }.quiz-result[hidden] { display:none; }
.homework-banner { margin:15px 0 18px; padding:17px 19px; border:1px solid var(--blue-border); border-radius:9px; background:var(--blue-soft); }.homework-banner p { margin:0; color:var(--text-soft); }.checklist { list-style:none; padding-left:0!important; }.checklist li { position:relative; padding-left:25px!important; }.checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--blue-dark); font-weight:900; }
.lesson-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:36px; padding:19px 0 25px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.back-to-top { position:fixed; z-index:25; right:24px; bottom:24px; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:11px; background:var(--surface); color:var(--blue-dark); box-shadow:none; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(7px); transition:opacity .18s ease,transform .18s ease; font-size:0; }
.back-to-top::before { content:""; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:10px solid var(--blue-dark); }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.reference-shell { padding-top:25px; padding-bottom:50px; }
.reference-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 23px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.reference-nav a { padding:8px 13px; border-radius:7px; color:var(--blue-dark); font-weight:800; text-decoration:none; }.reference-nav a:hover { background:var(--blue-soft); }
.reference-chapter { margin:0 0 36px; scroll-margin-top:100px; }.reference-chapter > .section-intro { margin:0 0 16px 47px; }
.property-reference-table { width:100%; min-width:780px; border-collapse:collapse; font-size:14px; line-height:1.6; }
.property-reference-table th,.property-reference-table td { padding:13px 14px; border:1px solid var(--line-strong); text-align:left; vertical-align:top; }
.property-reference-table th { background:var(--surface-inset); color:var(--text); font-weight:900; }
.property-reference-table td { background:var(--surface); color:var(--text-soft); }
.property-reference-table tbody tr:nth-child(even) td { background:var(--surface-soft); }
.property-reference-table td:first-child { width:17%; font-weight:800; }.property-reference-table td:last-child { min-width:220px; }.property-reference-table code { color:var(--blue-dark); font:700 12px/1.6 Consolas,"Courier New",monospace; overflow-wrap:anywhere; }
.reference-note { margin-top:26px; }
.html-mini { border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--surface); }
.table-scroll { display:block; width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.property-reference-table { width:100%; min-width:780px; }
@media (min-width:641px) and (max-width:960px) { .lesson-shell,.reference-shell { width:calc(100% - 38px); } }
@media (max-width:760px) { .contents-columns,.color-swatches,.padding-comparison,.box-sizing-compare,.line-height-demo,.shadow-demo { grid-template-columns:1fr; } .contents-heading { display:block; }.contents-hint { display:block; margin-top:6px; } .lesson-contents { padding:19px; } .lesson-card { padding:22px 20px; } }
@media (max-width:640px) { .lesson-shell,.reference-shell { width:calc(100% - 24px); padding-top:17px; }.lesson-topline { align-items:flex-start; flex-direction:column; gap:6px; }.lesson-hero { padding:23px 19px; }.lesson-hero h1 { font-size:28px; }.lesson-lead { font-size:15px; line-height:1.7; }.lesson-nav:not(.in-header) { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-bottom:17px; padding:7px; }.lesson-nav:not(.in-header) a { justify-content:center; padding:0 7px; font-size:12px; text-align:center; }.lesson-nav.in-header { max-width:100%; }.lesson-nav.in-header a { flex:0 0 auto; font-size:11px; }.lesson-card { padding:19px 16px; }.lesson-card h3 { font-size:19px; }.lesson-card p { font-size:15px; line-height:1.75; }.lesson-card li { font-size:14px; }.code-block pre { padding:14px; font-size:12px; }.copy-code-button { font-size:10px; }.live-preview { padding:16px; }.preview-caption { margin:-16px -16px 14px; }.lesson-contents { padding:17px 15px; }.section-title-row h2 { font-size:22px; }.section-intro { font-size:15px; }.quiz-question { padding:15px 12px; }.quiz-option { font-size:14px; }.quiz-actions { flex-direction:column; }.quiz-actions button { width:100%; }.homework-banner { padding:14px; }.lesson-footer { flex-direction:column; }.back-to-top { right:12px; bottom:12px; width:42px; height:42px; }.reference-nav { display:grid; grid-template-columns:1fr; }.reference-chapter > .section-intro { margin-left:0; } }

/* Preview canvases follow the selected site theme. The iframe contents are synchronised by script.js. */
.lesson-result-frame, .html-result-frame { background-color: #F4F7FB; color-scheme: light; }
body[data-theme="dark"] .lesson-result-frame, body[data-theme="dark"] .html-result-frame { background-color: #101722 !important; border-color: var(--line-strong); color-scheme: dark; }
body[data-theme="dark"] .result-stage[data-ks-dark-canvas="true"] { background-color: #172A40 !important; color: #E7EDF7 !important; border-color: #5A7694 !important; }
body[data-theme="dark"] .result-stage[data-ks-dark-canvas="true"] [data-ks-force-text="true"] { color: #E7EDF7 !important; }
body[data-theme="dark"] .result-stage[data-ks-dark-canvas="true"] [data-ks-force-accent="true"] { color: #8FC8FF !important; }