/* DCH School Lesson Design System — shared component layer */
:root{--lds-ink:#17233d;--lds-muted:#52627d;--lds-surface:#fff;--lds-line:#d5deeb;--lds-accent:#246bd6;--lds-good:#168447;--lds-bad:#c63737;--lds-code:#f2f5fa;--lds-math-bg:#f1f6ff;--lds-math-bg-end:#ffffff;--lds-math-border:#c8d8ee;--lds-math-ink:#17233d;--lds-math-accent:#246bd6;--lds-math-label-bg:#e4efff;--lds-math-label-ink:#20599c;--lds-math-shadow:rgba(28,61,110,.08)}
html:not([data-theme="light"]){--lds-ink:#edf3ff;--lds-muted:#b7c5dc;--lds-surface:#111d33;--lds-line:#30415d;--lds-accent:#79b5ff;--lds-good:#5ee09b;--lds-bad:#ff8585;--lds-code:#0b1424;--lds-math-bg:#101d34;--lds-math-bg-end:#142440;--lds-math-border:#3c5678;--lds-math-ink:#edf3ff;--lds-math-accent:#8fc5ff;--lds-math-label-bg:rgba(121,181,255,.13);--lds-math-label-ink:#a9ceff;--lds-math-shadow:rgba(0,0,0,.18)}
.lesson-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 34px}
.glossary-entry{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:16px 17px;border:1px solid var(--lds-line);border-radius:14px;background:var(--lds-surface);color:var(--lds-ink);overflow:hidden}
.glossary-entry:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--lds-accent),#8b72e8)}
.glossary-entry .term-index{grid-row:1/4;align-self:start;font:800 12px ui-monospace,monospace;color:var(--lds-accent);padding-top:2px}
.glossary-entry .term,.glossary-entry dt{font-weight:800;color:var(--lds-ink)}
.glossary-entry .term-en{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lds-accent);font-weight:700}
.glossary-entry p,.glossary-entry dd{grid-column:2;margin:6px 0 0;color:var(--lds-muted);font-size:13px;line-height:1.6}
.lesson-glossary dl,.lesson-glossary dl.terms{display:contents}
.lesson-glossary dl dt,.lesson-glossary dl dd{padding:0;margin:0}
.lesson-check{margin:30px 0;padding:22px;border:1px solid var(--lds-line);border-radius:18px;background:var(--lds-surface);color:var(--lds-ink)}
.lesson-check>h2{margin-top:0!important;color:var(--lds-ink)!important}
.lesson-check-question{padding:17px 0;border-top:1px solid var(--lds-line)}
.lesson-check-question h3{margin:0 0 10px;color:var(--lds-ink)}
.lesson-check-options{display:grid;gap:9px;margin:12px 0}
.lesson-check-option{display:flex;gap:10px;align-items:flex-start;color:var(--lds-muted);cursor:pointer;line-height:1.55}
.lesson-check-option input{appearance:none;width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;border:1.5px solid var(--lds-accent);border-radius:4px;background:transparent}
.lesson-check-option input:checked{background:var(--lds-accent);box-shadow:inset 0 0 0 4px var(--lds-surface)}
.lesson-check-option input:focus-visible,.lesson-check-button:focus-visible{outline:3px solid var(--lds-accent);outline-offset:3px}
.lesson-check-button{border:0;border-radius:9px;padding:10px 16px;background:var(--lds-accent);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lesson-check-feedback{margin:12px 0 0;font-weight:700;line-height:1.65}
.lesson-check-feedback.is-correct{color:var(--lds-good)}.lesson-check-feedback.is-wrong{color:var(--lds-bad)}
.lesson-code-block{position:relative;margin:1.4rem 0;border:1px solid var(--lds-line);border-radius:13px;background:var(--lds-code);color:var(--lds-ink);overflow:hidden;max-width:100%}
.lesson-code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--lds-line);font:600 10px 'DM Sans',sans-serif;color:var(--lds-muted)}
.lesson-code-copy{border:1px solid var(--lds-line);border-radius:7px;background:transparent;color:inherit;padding:5px 9px;font:600 10px 'DM Sans',sans-serif;cursor:pointer}
.lesson-code-block pre{margin:0!important;padding:13px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;overflow:auto;max-width:100%;tab-size:4}
.lesson-code-block pre code{display:block;padding:0!important;background:none!important;color:inherit!important;font:13px/1.75 'SFMono-Regular',Consolas,'Liberation Mono',monospace!important}
.lesson-code-line{display:block;min-height:1.75em;padding:0 16px 0 4.5em;position:relative;white-space:pre}
.lesson-code-line:before{counter-increment:code-line;content:counter(code-line);position:absolute;left:0;width:3.4em;padding-right:1em;text-align:right;color:var(--lds-muted);opacity:.8;user-select:none}
.code-token-keyword{color:#8b5cf6}.code-token-function{color:#087f8c}.code-token-class{color:#b45309}.code-token-string{color:#168447}.code-token-number{color:#c2410c}.code-token-operator{color:var(--lds-accent)}.code-token-comment{color:var(--lds-muted);font-style:italic}.code-token-identifier{color:var(--lds-ink)}
html:not([data-theme="light"]) .code-token-keyword{color:#c4a7ff}html:not([data-theme="light"]) .code-token-function{color:#67e8df}html:not([data-theme="light"]) .code-token-class{color:#fbbf73}html:not([data-theme="light"]) .code-token-string{color:#8be0a8}html:not([data-theme="light"]) .code-token-number{color:#ffb17c}
@media(max-width:650px){.lesson-glossary{grid-template-columns:1fr}.lesson-check{padding:16px}.lesson-code-block pre code{font-size:12px!important}.lesson-code-line{padding-left:3.8em}}

/* Shared lesson hero planet component — RU / EN / 中文. */
.lesson-planet-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:24px;align-items:center;margin:26px 0 0;padding:20px 24px;border:1px solid rgba(120,160,230,.22);border-radius:18px;background:radial-gradient(circle at 82% 50%,rgba(100,140,240,.18),transparent 24%),linear-gradient(120deg,rgba(20,37,65,.8),rgba(15,24,44,.72));overflow:hidden}
.lesson-planet-banner .planet-label{font-size:10px;letter-spacing:.18em;color:var(--blue);font-weight:800}
.lesson-planet-banner p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.lesson-planet-art{position:relative;width:150px;height:120px;margin:auto;display:grid;place-items:center}
.lesson-planet-art:before,.lesson-planet-art:after{content:"";position:absolute;width:145px;height:55px;border:1px solid rgba(111,166,255,.42);border-radius:50%;transform:rotate(-24deg)}
.lesson-planet-art:after{width:120px;height:40px;transform:rotate(34deg);border-color:rgba(174,135,255,.38)}
.lesson-planet-sphere{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#e3eaff 0,#9bb9ee 15%,#5279c1 44%,#263c78 76%,#101b3a 100%);border:1px solid rgba(218,232,255,.72);box-shadow:0 0 28px rgba(93,143,230,.52),inset -12px -10px 20px rgba(4,10,29,.5);font:800 13px Manrope;color:#f5f8ff;letter-spacing:.06em}
@media(max-width:850px){.lesson-planet-banner{grid-template-columns:minmax(0,1fr) 150px}}
@media(max-width:520px){.lesson-planet-banner{grid-template-columns:1fr}.lesson-planet-art{height:100px}}


/* Canonical lesson 1.1.1 content components reused by every lesson page. */
.article-body{max-width:900px;margin:0 auto;padding:2rem 0 5rem;line-height:1.78}
.article-body h2{margin-top:2.8rem}.article-body h3{margin-top:1.8rem}
.article-body .lesson-outcomes,.article-body .lesson-note{padding:1.1rem 1.3rem;border:1px solid rgba(120,150,220,.25);border-radius:14px;background:rgba(80,110,180,.08);margin:1.3rem 0}
.article-body .lesson-table-wrap{overflow-x:auto;margin:18px 0}
.article-body .lesson-table{border-collapse:collapse;width:100%;min-width:560px}
.article-body .lesson-table th,.article-body .lesson-table td{border:1px solid rgba(130,150,190,.3);padding:10px 12px;text-align:left;vertical-align:top}
.article-body .lesson-practice{padding:20px 22px;margin:22px 0;border:1px solid rgba(94,234,212,.28);border-radius:14px;background:linear-gradient(125deg,rgba(27,76,88,.18),rgba(20,42,72,.18))}
.article-body .lesson-figure{margin:28px 0;padding:18px;border:1px solid rgba(120,160,230,.24);border-radius:16px;background:linear-gradient(135deg,rgba(18,35,62,.88),rgba(10,17,32,.92));overflow:hidden}
.article-body .lesson-figure svg{display:block;width:100%;height:auto}
.article-body .lesson-figure figcaption{margin-top:12px;color:var(--muted,#aebdd4);font-size:13px;line-height:1.6}
.lesson-sources{margin:30px 0}.lesson-sources li{margin:.55rem 0}
@media(max-width:600px){.article-body{padding-left:14px;padding-right:14px}.article-body .lesson-figure{overflow-x:auto}.article-body .lesson-figure svg{min-width:620px}.article-body .lesson-table{font-size:.9rem}}



/* Display and inline mathematics — theme-aware, responsive, and accessible. */
.article-body .formula{
  display:grid;gap:.7rem;justify-items:center;max-width:100%;
  margin:1.55rem auto;padding:clamp(1rem,2.4vw,1.55rem);
  border:1px solid var(--lds-math-border);border-left:4px solid var(--lds-math-accent);
  border-radius:16px;
  background:linear-gradient(135deg,var(--lds-math-bg),var(--lds-math-bg-end));
  color:var(--lds-math-ink);box-shadow:0 8px 24px var(--lds-math-shadow);
  text-align:center;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.article-body .formula-label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.25rem .7rem;border-radius:999px;
  background:var(--lds-math-label-bg);color:var(--lds-math-label-ink);
  font:800 .68rem/1.4 'DM Sans',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;
}
.article-body .formula-expression{
  display:block;min-width:max-content;max-width:none;
  color:var(--lds-math-ink);
  font:700 clamp(1.05rem,2.3vw,1.4rem)/1.6 'Cambria Math','STIX Two Math',
    'DejaVu Sans Mono',ui-monospace,monospace;
  white-space:nowrap;letter-spacing:.015em;
}
.article-body .formula-inline{
  display:inline-block;padding:.08em .38em;border:1px solid var(--lds-math-border);
  border-radius:.4em;background:var(--lds-math-bg);color:var(--lds-math-ink);
  font:600 .94em 'Cambria Math','STIX Two Math',ui-monospace,monospace;
  white-space:nowrap;
}
.article-body .formula:focus-visible,.article-body .formula-inline:focus-visible{
  outline:3px solid var(--lds-math-accent);outline-offset:3px;
}
@media(max-width:560px){
  .article-body .formula{margin:1.2rem 0;padding:1rem .85rem;border-radius:13px}
  .article-body .formula-expression{font-size:1rem}
}


/* Definition component — term and explanation use distinct theme tokens. */
 :root{--lds-definition-term:#0f766e;--lds-definition-text:#334155;--lds-definition-surface:#f4fbfa;--lds-definition-border:#c5dedb}
html:not([data-theme="light"]){--lds-definition-term:#5eead4;--lds-definition-text:#e0e9f7;--lds-definition-surface:#111f36;--lds-definition-border:#285b5b}
.article-body .definition{display:block;padding:1.05rem 1.25rem;margin:1.25rem 0;border:1px solid var(--lds-definition-border);border-radius:14px;background:var(--lds-definition-surface);color:var(--lds-definition-text);line-height:1.75}
.article-body .definition .definition-term{display:block;margin:0 0 .3rem;color:var(--lds-definition-term);font-weight:800}
.article-body .definition .definition-text{display:block;color:var(--lds-definition-text);font-weight:400}

/* Definitive definition-card layout override: term first row, explanation second row. */
.article-body .definition{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;min-width:0;max-width:100%;padding:1.05rem 1.25rem;margin:1.25rem 0;border:1px solid var(--lds-definition-border);border-left:4px solid var(--lds-definition-term);border-radius:13px;background:var(--lds-definition-surface);color:var(--lds-definition-text);line-height:1.75}
.article-body .definition .definition-term{display:block;flex:0 0 auto;width:100%;margin:0;color:var(--lds-definition-term);font-weight:800;line-height:1.45;overflow-wrap:anywhere}
.article-body .definition .definition-text{display:block;flex:0 0 auto;width:100%;min-width:0;margin:0;color:var(--lds-definition-text);font-weight:400;line-height:1.7;overflow-wrap:anywhere}

/* Canonical glossary contract: two-column outer grid, vertical flex cards.
   Keep this rule more specific than the legacy .glossary-entry grid above. */
.lesson-glossary > .glossary-entry{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
.lesson-glossary > .glossary-entry > strong,
.lesson-glossary > .glossary-entry > span{
  display:block;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}


/* SVG text fallback: prevent browser-default black text on dark diagram surfaces.
   Existing semantic classes (title/label/accent and lesson-specific text classes)
   keep their own higher-specificity theme-aware colors. */
svg text{fill:var(--lds-ink)}