.lesson-visual{margin:25px 0 30px;padding:21px 23px;border:1px solid #344963;border-radius:10px;background:linear-gradient(135deg,#172940,#101d30);overflow:hidden}
.lesson-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:23px}.lesson-heading>div>span{font-size:10px;color:#87a7d0;letter-spacing:1px}.lesson-heading h3{font-size:17px;font-weight:550;line-height:1.6;color:#e9f1fc;margin:5px 0 0}.lesson-replay{border:1px solid #456080;border-radius:6px;background:#1d3049;color:#b3c9e5;padding:5px 10px;white-space:nowrap;font-size:11px;line-height:1.8;flex-shrink:0}.lesson-replay:hover{border-color:#ba8964;color:#ffbe8d}.lesson-replay span{font-size:16px;vertical-align:-1px}
.article-body .lesson-caption{color:#839ab8;font-size:11px;line-height:1.9;margin:17px 0 0}.lesson-status{min-height:29px;margin-top:17px;padding-top:12px;border-top:1px solid #2e425d;color:#b3cae6;font-size:12px;line-height:1.8}
.article-body .lesson-steps{display:grid;grid-template-columns:repeat(var(--step-count),minmax(0,1fr));gap:10px;padding:0;margin:0;list-style:none}.article-body .lesson-steps li{margin:0;display:flex;flex-direction:column;gap:12px;border:1px solid #405674;border-radius:7px;padding:13px 11px;color:#b6cce7;font-size:12px;line-height:1.7;transition:border-color .35s,background .35s,color .35s,opacity .35s}.lesson-step-number{font-size:11px;color:#6687b3;font-variant-numeric:tabular-nums}.lesson-steps li.is-reached{border-color:#96775f;background:#493a302f;color:#ffceaa}.lesson-steps li.is-reached .lesson-step-number{color:#d89c70}.has-motion .lesson-steps li:not(.is-reached){opacity:.5}
.lesson-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;text-align:center;padding:0 5px}.lesson-value{font-size:11px;color:#e0bd9f;white-space:nowrap;font-variant-numeric:tabular-nums}.lesson-bar-track{height:140px;position:relative;margin:9px 0 5px;border-bottom:1px solid #43526c}.lesson-bar{position:absolute;bottom:0;left:16%;right:16%;min-height:2px;transform-origin:bottom;background:linear-gradient(180deg,#c89367,#7d5940);border:1px solid #d1a17e;border-radius:3px 3px 0 0;transition:transform .55s cubic-bezier(.22,.7,.3,1),opacity .4s}.has-motion .lesson-bar-column:not(.is-reached) .lesson-bar{transform:scaleY(0);opacity:0}.lesson-layer{font-size:10px;color:#7e96b5;white-space:nowrap}.lesson-total{display:flex;align-items:baseline;justify-content:flex-end;gap:13px;margin-top:17px;font-size:11px;color:#91a9c7}.lesson-total strong{font-size:24px;line-height:1.3;font-weight:550;color:#ffbe8d;font-variant-numeric:tabular-nums}
.lesson-comparison{display:grid;grid-template-columns:1fr 1fr;gap:30px}.lesson-comparison h4{margin:0 0 15px;font-size:12px;font-weight:500;color:#a8c6ec}.lesson-comparison>div:last-child h4{color:#efbc94}.lesson-grid-row{display:grid;grid-template-columns:40px 1fr 45px;align-items:center;gap:9px;padding:6px 0;font-size:10px;color:#899fbd}.lesson-grid-row b{font-size:10px;font-weight:400;color:#b5cae4;text-align:right;white-space:nowrap}.lesson-grid-row i{display:block;justify-self:start;width:var(--lot-width);min-width:5px;height:11px;border-radius:2px;background:#527aa8;transform-origin:left;transition:transform .5s,opacity .4s}.lesson-comparison>div:last-child i{background:#c18d64}.has-motion .lesson-grid-row:not(.is-reached) i{transform:scaleX(0);opacity:0}.has-motion .lesson-grid-row:not(.is-reached) b{opacity:.5}
.lesson-chart-key{display:flex;gap:22px;margin-bottom:14px;font-size:11px;color:#a5bddc}.lesson-chart-key span{display:flex;align-items:center;gap:7px}.lesson-chart-key i{display:block;width:17px;height:2px;background:#91b9e7}.lesson-chart-key span:last-child i{background:#e1a476}.lesson-equity{width:100%;height:auto;overflow:visible}.lesson-chart-grid{stroke:#354b68;stroke-width:1;stroke-dasharray:3 7;fill:none}.lesson-equity-line{stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.lesson-balance-line{stroke:#91b9e7}.lesson-net-line{stroke:#e1a476}.lesson-equity text{font-size:10px;fill:#738aaa}.has-motion .lesson-equity-line:not(.is-reached){opacity:0}.is-playing .lesson-equity-line.is-reached{stroke-dasharray:1;animation:lesson-draw 1.2s ease-out both}
@keyframes lesson-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.lesson-trend-key span:first-child i{background:#e2aa7f}.lesson-trend-key span:last-child i{background:#8bb6e8}.lesson-trend-average-line{fill:none;stroke:#8bb6e8;stroke-width:2;stroke-dasharray:5 5}.lesson-trend-price-line{stroke:#e2aa7f}.lesson-trend-marker{fill:#ffbc8c;transition:opacity .35s}.lesson-trend .lesson-trend-marker text{fill:#f4c8a6;font-size:11px}.has-motion .lesson-trend-marker:not(.is-reached){opacity:0}
@media(max-width:640px){.lesson-trend text{font-size:17px}.lesson-trend .lesson-trend-marker text{font-size:17px}}
@media(max-width:640px){.lesson-visual{padding:18px 16px;margin:23px 0}.lesson-heading{gap:10px;margin-bottom:20px}.lesson-heading h3{font-size:15px}.lesson-replay{font-size:10px;padding:4px 8px}.lesson-bars{gap:5px;padding:0}.lesson-value{font-size:9px}.lesson-bar-track{height:110px}.lesson-layer{font-size:9px}.lesson-total strong{font-size:22px}.lesson-status{font-size:11px;min-height:29px}.article-body .lesson-steps{grid-template-columns:1fr;gap:8px}.article-body .lesson-steps li{flex-direction:row;align-items:center;gap:15px;padding:9px 12px}.lesson-step-number{min-width:19px}.lesson-comparison{gap:16px}.lesson-grid-row{grid-template-columns:28px 1fr 34px;gap:4px;font-size:9px}.lesson-grid-row b{font-size:9px}.lesson-grid-row i{height:9px}.lesson-comparison h4{font-size:11px}.article-body .lesson-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.lesson-visual *{animation:none!important;transition:none!important}}