.em-lesson { --em-color: #ba9ef6; --em-tint: 166,130,230; }
.em-bem { --em-color: #d9ac7a; --em-tint: 194,139,81; }
.em-std { --em-color: #ece4ce; --em-tint: 224,213,181; }
.em-delta { --em-color: #87c8ff; --em-tint: 92,170,233; }
.em-smart { --em-color: #c3a4ff; --em-tint: 172,128,239; }
.em-principle,.em-probability-note { padding: 1rem 1.15rem; margin: 1.3rem 0; border: 1px solid #414963; border-left: 3px solid #8cded3; border-radius: 0 14px 14px 0; background: linear-gradient(120deg,#182b30,#191c2c); }
.em-principle > strong { color: #a6eee2; }
.em-probability-note { border-left-color: #e4bd78; background: linear-gradient(120deg,#2b261f,#201f2e); }
.em-probability-note > strong { color: #f2d69f; }
.em-lesson :is(.em-principle,.em-probability-note) p { margin-bottom: 0; font-size: .94rem; }
.em-comparison { margin: 1.3rem 0 1.5rem; padding: 1.15rem; border: 1px solid #4b4964; border-radius: 18px; background: radial-gradient(ellipse at 50% 0,#8670c71a,transparent 70%),#111725; }
.em-comparison figcaption { display: grid; gap: .55rem; margin-bottom: 1rem; }
.em-eyebrow { color: #b8acd8; font-size: .64rem; font-weight: 800; letter-spacing: .055em; line-height: 1.6; text-transform: uppercase; }
.em-comparison figcaption > strong { color: #f1edff; font-size: 1.12rem; line-height: 1.45; }
.em-reference { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; color: #b7c2d6; font-size: .8rem; }
.em-reference strong { color: #f2f0fb; font: 600 .98rem/1.5 var(--mono); }
.em-axis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: .3rem .7rem .6rem; color: #b3bbcf; font: .68rem/1.5 var(--mono); }
.em-axis span:nth-child(2) { text-align: center; }
.em-axis span:last-child { text-align: right; }
.em-range-row { margin-top: .6rem; padding: .85rem .75rem .7rem; border: 1px solid #354056; border-left: 3px solid var(--em-color); border-radius: 0 12px 12px 0; background: linear-gradient(110deg,rgba(var(--em-tint),.08),#111a27); }
.em-row-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .5rem .75rem; }
.em-row-heading > strong { display: flex; align-items: center; gap: .55rem; color: #e9edf6; font-size: .85rem; line-height: 1.4; }
.em-symbol { display: inline-flex; flex: 0 0 25px; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid var(--em-color); border-radius: 7px; color: var(--em-color); background: rgba(var(--em-tint),.08); font: 700 .82rem/1 var(--mono); }
.em-distance { color: var(--em-color); font: 600 .78rem/1.5 var(--mono); white-space: nowrap; }
.em-track { position: relative; height: 28px; margin: .65rem 0 .45rem; background: repeating-linear-gradient(to right,#7584aa26 0,#7584aa26 1px,transparent 1px,transparent 25%); }
.em-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #d8dceb88; }
.em-range { position: absolute; top: 8px; height: 12px; border: 1px solid var(--em-color); border-radius: 3px; color: var(--em-color); background: rgba(var(--em-tint),.3); }
.em-range::before,.em-range::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: currentColor; }
.em-range::before { left: -1px; }
.em-range::after { right: -1px; }
.em-track i { position: absolute; z-index: 1; top: 10px; left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid #e7ebf7; border-radius: 50%; background: #bfc8e1; }
.em-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin: 0; }
.em-values > div { min-width: 0; }
.em-values dt { color: #a9b5cc; font-size: .62rem; line-height: 1.5; }
.em-values dd { margin: .12rem 0 0; color: #e0e7f5; font: 500 .76rem/1.5 var(--mono); }
.em-lesson .em-comparison .em-figure-note { color: #b6c0d4; font-size: .78rem; line-height: 1.65; margin: .9rem 0 0; }
.em-heading-symbol { display: inline-flex; justify-content: center; align-items: center; width: 31px; height: 31px; margin-right: .3rem; border: 1px solid var(--em-color); border-radius: 9px; background: rgba(var(--em-tint),.1); color: var(--em-color); font: 600 .92rem/1 var(--mono); vertical-align: 2px; }
.em-text-std { color: #ece4ce; }
.em-text-bem { color: #d9ac7a; }
.em-text-delta { color: #87c8ff; }
.em-text-smart { color: #c3a4ff; }
.em-formula { padding: .95rem 1.1rem; margin: 1.1rem 0; border: 1px solid #464958; border-left: 3px solid var(--em-color); border-radius: 0 12px 12px 0; background: #171e2b; }
.em-formula > span { display: block; margin-bottom: .4rem; color: #b3c0d3; font-size: .73rem; }
.em-formula > code { display: block; background: none; border: 0; padding: 0; color: var(--em-color); font-size: .95rem; line-height: 1.8; overflow-wrap: anywhere; }
.em-smart-math { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 1.25rem 0; }
.em-smart-math > div { min-width: 0; padding: 1rem; border: 1px solid #635080; border-radius: 12px; background: linear-gradient(145deg,#292238,#191f2c); }
.em-smart-math span { display: block; color: #cbb8ec; font-size: .78rem; font-weight: 800; }
.em-smart-math code { display: block; margin: .65rem 0; color: #d3d9e8; font-size: .72rem; overflow-wrap: anywhere; }
.em-smart-math strong { display: block; color: #d5bdff; font: 600 1.1rem/1.5 var(--mono); }
.em-phase-eod { color: #c0cddd; }
.em-phase-pre { color: #f0cd88; }
.em-phase-open { color: #c3a4ff; }
.em-snapshot-example { margin: 1.2rem 0 1.5rem; }
.em-snapshot-example figcaption { margin-bottom: .8rem; color: #bac6d9; font-size: .86rem; line-height: 1.6; }
.em-snapshot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.em-snapshot { --em-color: #c0cddd; min-width: 0; padding: 1.05rem; border: 1px solid #434e62; border-top: 3px solid var(--em-color); border-radius: 13px; background: linear-gradient(145deg,#202838,#141b27); }
.em-snapshot-pre { --em-color: #f0cd88; border-color: #66533b; background: linear-gradient(145deg,#2a261e,#171e2b); }
.em-snapshot > span { display: block; color: var(--em-color); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.em-lesson .em-snapshot h3 { margin: .65rem 0 .5rem; color: #edf0f8; font-size: 1rem; }
.em-snapshot > strong { display: block; color: var(--em-color); font: 600 1.15rem/1.5 var(--mono); }
.em-lesson .em-snapshot p { margin: .6rem 0; color: #b5c1d3; font-size: .8rem; }
.em-snapshot b { color: #e6eaf3; font-size: .85rem; font-weight: 700; }
.em-snapshot small { display: block; padding-top: .6rem; border-top: 1px solid #4a4e56; color: #b8c2d3; font-size: .72rem; line-height: 1.6; }
.em-reading-checks strong { color: #d7d0ef; }
.em-lesson .em-sources { padding-top: .9rem; border-top: 1px solid #3a3c50; color: #aeb9cd; font-size: .8rem; }
@media(max-width:600px) {
  .em-comparison { padding: .9rem .7rem; }
  .em-comparison figcaption > strong { font-size: 1.02rem; }
  .em-row-heading { grid-template-columns: minmax(0,1fr); gap: .4rem; }
  .em-distance { padding-left: 2.1rem; font-size: .76rem; }
  .em-axis { margin-left: .55rem; margin-right: .55rem; font-size: .61rem; }
  .em-range-row { padding: .75rem .55rem .65rem; }
  .em-values { gap: .3rem; }
  .em-values dt { font-size: .61rem; }
  .em-values dd { font-size: .74rem; }
  .em-heading-symbol { width: 27px; height: 27px; font-size: .82rem; }
  .em-smart-math,.em-snapshot-grid { grid-template-columns: minmax(0,1fr); }
  .em-formula { padding: .85rem .9rem; }
  .em-formula > code { font-size: .82rem; }
}