.tc-lessons .cs-lesson { container-type: inline-size; }
.tc-lessons .cs-pair { display: grid; grid-template-columns: minmax(0, 540px); justify-content: center; gap: 28px; }
.tc-lessons .cs-figure { height: auto; min-width: 0; margin: 0; }
.tc-lessons .cs-side-label { margin: 0 0 10px; color: #666; font: 500 12px/18px var(--ss-font); }
.tc-lessons .cs-figure figcaption { padding: 10px 0 0; text-align: left; }
@container (min-width: 1120px) { .tc-lessons .cs-pair { grid-template-columns: repeat(2, 540px); gap: 24px; } }
.tc-lessons .cs-scene { position: relative; width: 540px; height: 420px; overflow: hidden; color: #35414a; font: 400 12px/18px var(--ss-font); }
.tc-lessons .cs-scene[data-compact] { width: var(--cs-width, 340px); height: 520px; }
.tc-lessons .cs-scene h3, .tc-lessons .cs-scene h4, .tc-lessons .cs-scene p { margin: 0; }
.tc-lessons .cs-scene h3 { font: 550 16px/22px var(--ss-font); color: inherit; }
.tc-lessons .cs-scene p { margin-top: 5px; color: #84909a; font-size: 11px; line-height: 17px; }
.tc-lessons .cs-scene .ss-window { position: absolute; box-shadow: 0 0 0 1px #1b36400d, 0 16px 36px -18px #18343b38; }
.tc-lessons .cs-mark { display: block; flex: none; }
.tc-lessons .cs-mark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-lessons .cs-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 32px; padding: 7px 11px; border-radius: 5px; background: #344f61; color: #fff; font-size: 11px; line-height: 18px; white-space: nowrap; }
.tc-lessons .cs-action .cs-mark { width: 15px; height: 15px; }
.tc-lessons .cs-status { display: inline-flex; align-items: center; gap: 6px; color: #527764; font-size: 10px; line-height: 17px; white-space: nowrap; }
.tc-lessons .cs-status .cs-mark { width: 13px; height: 13px; }
.tc-lessons .cs-eyebrow { color: #83909a; font-size: 10px; line-height: 16px; }

.tc-lessons .cs-device { background: #e4edf3; }
.tc-lessons .cs-device-window { top: 32px; left: 32px; width: 344px; height: 420px; }
.tc-lessons .cs-dashboard { width: 234px; padding: 20px 16px; }
.tc-lessons .cs-dashboard h3 { margin-top: 4px; font-size: 28px; line-height: 34px; }
.tc-lessons .cs-dashboard h3 > span { display: block; font-size: 11px; font-weight: 400; line-height: 18px; color: #83909a; }
.tc-lessons .cs-mini-chart { display: flex; align-items: flex-end; height: 88px; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid #edf0f2; }
.tc-lessons .cs-mini-chart i { flex: 1; border-radius: 3px 3px 0 0; background: #b8cbd8; }
.tc-lessons .cs-mini-chart i:last-child { background: #597d96; }
.tc-lessons .cs-payment-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0 10px; font-size: 11px; }
.tc-lessons .cs-payment-row small { display: block; color: #8c969c; font-size: 10px; line-height: 16px; }
.tc-lessons .cs-payment-row strong { font-size: 12px; font-weight: 500; }
.tc-lessons .cs-device-phone { position: absolute; left: 172px; top: 70px; }
.tc-lessons .cs-device[data-good] .cs-device-phone { left: 280px; top: 138px; }
.tc-lessons .cs-phone-app { padding: 28px 24px; color: #33414a; }
.tc-lessons .cs-phone-app h3 { font-size: 30px; line-height: 40px; }
.tc-lessons .cs-phone-app p { font-size: 20px; line-height: 29px; color: #859198; }
.tc-lessons .cs-phone-payment { margin-top: 28px; padding: 24px 18px; border-radius: 14px; background: #f2f6f4; text-align: center; }
.tc-lessons .cs-phone-check { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; color: #fff; background: #6b907d; }
.tc-lessons .cs-phone-check .cs-mark { width: 25px; height: 25px; }
.tc-lessons .cs-phone-payment h4 { font: 500 21px/30px var(--ss-font); }
.tc-lessons .cs-phone-payment strong { display: block; margin: 10px 0; font-size: 42px; line-height: 50px; font-weight: 550; }
.tc-lessons .cs-phone-payment p { font-size: 20px; }
.tc-lessons .cs-phone-link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0; font-size: 21px; line-height: 30px; }
.tc-lessons .cs-device[data-compact] .cs-device-window { top: 24px; left: 20px; width: calc(100% - 40px); height: 342px; }
.tc-lessons .cs-device[data-compact] .cs-dashboard { width: 100%; padding: 15px 16px; }
.tc-lessons .cs-device[data-compact] .cs-mini-chart { height: 60px; }
.tc-lessons .cs-device[data-compact] .cs-mini-chart i { max-height: 46px; }
.tc-lessons .cs-device[data-compact] .cs-device-phone { left: 74px; top: 92px; }
.tc-lessons .cs-device[data-compact][data-good] .cs-device-phone { left: calc(100% - 248px); top: 288px; }
.tc-lessons .cs-device[data-compact] .cs-phone-app { padding: 16px 24px; }
.tc-lessons .cs-device[data-compact] .cs-phone-app h3 { font-size: 28px; line-height: 34px; }
.tc-lessons .cs-device[data-compact] .cs-phone-payment { margin-top: 16px; padding: 16px; }
.tc-lessons .cs-device[data-compact] .cs-phone-check { display: none; }
.tc-lessons .cs-device[data-compact] .cs-phone-payment strong { margin-block: 8px; }

.tc-lessons .cs-export { background: #e3eee8; }
.tc-lessons .cs-export-window { left: 32px; top: 36px; width: 400px; height: 390px; }
.tc-lessons .cs-export-content { position: relative; z-index: 1; width: 245px; padding: 22px 20px; }
.tc-lessons .cs-export-settings { display: grid; gap: 13px; margin: 22px 0; }
.tc-lessons .cs-export-settings > span { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; }
.tc-lessons .cs-export-settings strong { font-weight: 450; color: #7a8982; }
.tc-lessons .cs-export-preview { position: absolute; left: 263px; right: 20px; top: 70px; display: grid; gap: 12px; }
.tc-lessons .cs-export-preview i { height: 54px; border-radius: 4px; background: #f0f4f1; }
.tc-lessons .cs-export-receipt { position: absolute; z-index: 2; left: 146px; top: 130px; width: 226px; padding: 17px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #1b3d2b0b, 0 12px 28px -9px #163c2b38; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; row-gap: 13px; }
.tc-lessons .cs-export-receipt h3 { font-size: 13px; line-height: 18px; }
.tc-lessons .cs-export-receipt p { margin-top: 2px; font-size: 10px; line-height: 16px; }
.tc-lessons .cs-export-receipt div > span { display: block; color: #9aa39d; font-size: 10px; line-height: 16px; }
.tc-lessons .cs-receipt-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #edf4ef; color: #65836f; }
.tc-lessons .cs-export-receipt > .cs-status { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #edf1ee; }
.tc-lessons .cs-export[data-good] .cs-export-receipt { left: 282px; top: 250px; }
.tc-lessons .cs-export[data-compact] .cs-export-window { left: 20px; top: 24px; width: calc(100% - 40px); height: 348px; }
.tc-lessons .cs-export[data-compact] .cs-export-content { width: 100%; }
.tc-lessons .cs-export[data-compact] .cs-export-preview { display: none; }
.tc-lessons .cs-export[data-compact] .cs-export-receipt { left: calc(100% - 246px); top: 154px; }
.tc-lessons .cs-export[data-compact][data-good] .cs-export-receipt { left: calc(100% - 246px); top: 310px; }

.tc-lessons .cs-focus { background: #e8e5ef; }
.tc-lessons .cs-focus-assets { left: 32px; top: 32px; width: 292px; height: 260px; }
.tc-lessons .cs-focus-feedback { left: 136px; top: 112px; width: 372px; height: 242px; }
.tc-lessons .cs-focus-publish { left: 82px; top: 222px; width: 376px; height: 270px; }
.tc-lessons .cs-back-content { padding: 17px; }
.tc-lessons .cs-back-content p { font-size: 10px; }
.tc-lessons .cs-focus .cs-back-content .cs-status { font-size: 12px; color: #694ba8; }
.tc-lessons .cs-file-tiles { display: flex; gap: 10px; margin-top: 20px; }
.tc-lessons .cs-file-tiles i { width: 65px; height: 58px; border-radius: 4px; background: #ddd3f4; }
.tc-lessons .cs-focus:not([data-good]) .ss-window { box-shadow: 0 0 0 1px #8f7eb633, 0 12px 24px #4c36634d; }
.tc-lessons .cs-focus[data-good] .cs-focus-assets, .tc-lessons .cs-focus[data-good] .cs-focus-feedback { --ss-canvas: #eeedf3; --ss-chrome: #f1eff5; --ss-text-strong: #8c8998; box-shadow: 0 0 0 1px #322a530d; }
.tc-lessons .cs-focus[data-good] .cs-back-content .cs-status { color: #9895a3; }
.tc-lessons .cs-focus[data-good] .cs-back-content p { color: #a5a2ae; }
.tc-lessons .cs-focus[data-good] .cs-file-tiles i { background: #e2e1e7; }
.tc-lessons .cs-publish-content { padding: 15px 20px 22px; }
.tc-lessons .cs-publish-checks { display: flex; gap: 18px; margin: 10px 0; }
.tc-lessons .cs-publish-content .cs-action { background: #62547e; }
.tc-lessons .cs-focus[data-compact] .cs-focus-assets { left: 20px; top: 24px; width: calc(100% - 78px); }
.tc-lessons .cs-focus[data-compact] .cs-focus-feedback { left: 52px; top: 116px; width: calc(100% - 72px); }
.tc-lessons .cs-focus[data-compact] .cs-focus-publish { left: 20px; top: 256px; width: calc(100% - 40px); height: 280px; }
.tc-lessons .cs-focus[data-compact] .cs-publish-checks { flex-direction: column; gap: 6px; margin: 14px 0; }

.tc-lessons .cs-color { background: #da805b; }
.tc-lessons .cs-invoice { position: absolute; left: 32px; top: 32px; width: 350px; height: 400px; padding: 24px; border-radius: 10px; background: #ecac84; color: #813d31; box-shadow: 0 12px 28px #943c3c40; }
.tc-lessons .cs-invoice-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 11px; }
.tc-lessons .cs-color .cs-status { color: #a3433c; }
.tc-lessons .cs-invoice h3 { font-size: 17px; }
.tc-lessons .cs-color p { color: #a96754; }
.tc-lessons .cs-invoice-total { margin: 22px 0; font-size: 30px; line-height: 36px; font-weight: 500; }
.tc-lessons .cs-invoice-detail { display: flex; justify-content: space-between; gap: 20px; max-width: 220px; padding: 7px 0; font-size: 11px; }
.tc-lessons .cs-invoice-paid { display: flex; align-items: center; gap: 6px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #bf735733; font-size: 10px; }
.tc-lessons .cs-invoice-paid .cs-mark { width: 14px; height: 14px; }
.tc-lessons .cs-deposit { position: absolute; left: 286px; top: 230px; width: 222px; padding: 20px; border-radius: 10px; background: #e29b7c; color: #813d31; box-shadow: 0 0 0 1px #9c503633, 0 12px 28px #943c3c40; }
.tc-lessons .cs-deposit .cs-eyebrow { color: inherit; }
.tc-lessons .cs-deposit h3 { margin-top: 6px; font-size: 25px; line-height: 32px; }
.tc-lessons .cs-deposit > div { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; font-size: 10px; }
.tc-lessons .cs-deposit .cs-mark { width: 14px; height: 14px; }
.tc-lessons .cs-color[data-good] { background: #ebdac8; }
.tc-lessons .cs-color[data-good] .cs-invoice { background: #fffdfa; color: #4d433a; box-shadow: 0 0 0 1px #6c483714, 0 16px 32px -18px #6c483733; }
.tc-lessons .cs-color[data-good] .cs-deposit { background: #fff; color: #4d433a; box-shadow: 0 0 0 1px #6c483714, 0 12px 28px -8px #6c483733; }
.tc-lessons .cs-color[data-good] .cs-status { color: #60816c; }
.tc-lessons .cs-color[data-good] p, .tc-lessons .cs-color[data-good] .cs-eyebrow { color: #9b9186; }
.tc-lessons .cs-color[data-compact] .cs-invoice { left: 20px; top: 24px; width: calc(100% - 40px); height: 370px; padding: 20px; }
.tc-lessons .cs-color[data-compact] .cs-deposit { left: calc(100% - 242px); top: 340px; width: 222px; }

.tc-lessons .cs-material { background: #202a37; }
.tc-lessons .cs-files-window { left: 32px; top: 36px; width: 400px; height: 420px; color: #65717c; --ss-canvas: #303a45; --ss-chrome: #303a45; --ss-text-strong: #65717c; --ss-text: #65717c; --ss-text-soft: #65717c; --ss-line: #39434d; }
.tc-lessons .cs-files-window .ss-window__bar { background: #303a45; color: #65717c; }
.tc-lessons .cs-files-content { width: 254px; padding: 22px 20px; }
.tc-lessons .cs-files-content > p { color: #65717c; }
.tc-lessons .cs-file-row { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 18px -8px 0; border-radius: 6px; font-size: 11px; }
.tc-lessons .cs-file-row + .cs-file-row { margin-top: 2px; }
.tc-lessons .cs-file-row[data-selected] { background: #34414d; }
.tc-lessons .cs-file-row small { display: block; font-size: 10px; line-height: 16px; }
.tc-lessons .cs-file-row > span { margin-left: auto; font-size: 10px; }
.tc-lessons .cs-document-preview { position: absolute; left: 286px; top: 154px; width: 222px; padding: 18px; border-radius: 6px; background: #cbd1d8; color: #a1aab5; box-shadow: 0 10px 30px #151b231a; }
.tc-lessons .cs-preview-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 19px; font-size: 10px; }
.tc-lessons .cs-document-preview h3 { font-size: 17px; }
.tc-lessons .cs-document-preview p { color: inherit; font-size: 10px; line-height: 16px; }
.tc-lessons .cs-doc-rule { height: 1px; margin: 15px 0; background: currentColor; opacity: .15; }
.tc-lessons .cs-document-preview h4 { font: 500 11px/17px var(--ss-font); }
.tc-lessons .cs-preview-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; font-size: 10px; }
.tc-lessons .cs-preview-foot .cs-mark { width: 14px; height: 14px; }
.tc-lessons .cs-material[data-good] .cs-files-window { color: #dce3e9; --ss-text-strong: #b4c0cb; --ss-text: #dce3e9; --ss-text-soft: #b4c0cb; box-shadow: 0 0 0 1px #aab9ca21, 0 20px 40px -18px #0008; }
.tc-lessons .cs-material[data-good] .cs-files-window .ss-window__bar { color: #b4c0cb; }
.tc-lessons .cs-material[data-good] .cs-files-content > p, .tc-lessons .cs-material[data-good] .cs-file-row small, .tc-lessons .cs-material[data-good] .cs-file-row > span { color: #9caab7; }
.tc-lessons .cs-material[data-good] .cs-file-row[data-selected] { background: #405263; }
.tc-lessons .cs-material[data-good] .cs-document-preview { background: #fff; color: #394550; box-shadow: 0 0 0 1px #ffffff14, 0 16px 32px -12px #0006; }
.tc-lessons .cs-material[data-good] .cs-preview-meta, .tc-lessons .cs-material[data-good] .cs-document-preview p, .tc-lessons .cs-material[data-good] .cs-preview-foot { color: #87929d; }
.tc-lessons .cs-material[data-compact] .cs-files-window { left: 20px; top: 24px; width: calc(100% - 40px); height: 400px; }
.tc-lessons .cs-material[data-compact] .cs-files-content { width: 100%; }
.tc-lessons .cs-material[data-compact] .cs-document-preview { left: calc(100% - 242px); top: 260px; width: 222px; }

.tc-lessons .cs-crop { background: #eee6e5; }
.tc-lessons .cs-library-window { left: 32px; top: 58px; width: 760px; height: 460px; transform: scale(.626); transform-origin: top left; }
.tc-lessons .cs-library-shell { display: flex; height: 422px; }
.tc-lessons .cs-library-shell aside { display: flex; flex-direction: column; gap: 7px; flex: none; width: 120px; padding: 20px 12px; border-right: 1px solid #f0eeee; color: #969095; font-size: 11px; }
.tc-lessons .cs-library-shell aside strong { margin-bottom: 14px; color: #6c6269; font-weight: 500; }
.tc-lessons .cs-library-shell aside span { padding: 6px 8px; border-radius: 4px; }
.tc-lessons .cs-library-shell aside [data-active] { background: #f3eeee; color: #6c6269; }
.tc-lessons .cs-library-main { flex: none; width: 346px; padding: 24px 20px; }
.tc-lessons .cs-library-main h3 { margin-top: 6px; font-size: 22px; line-height: 29px; }
.tc-lessons .cs-library-main .cs-action { display: flex; width: max-content; margin-top: 20px; background: #6d5964; }
.tc-lessons .cs-bundle { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; padding: 16px 14px; border: 1px solid #eee9ec; border-radius: 7px; }
.tc-lessons .cs-bundle-icon { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 4px; background: #f5eff2; color: #a38d99; }
.tc-lessons .cs-bundle strong { display: block; font-size: 12px; font-weight: 500; }
.tc-lessons .cs-bundle div > span { display: block; margin-top: 4px; font-size: 10px; color: #8f858c; }
.tc-lessons .cs-library-context { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 18px; flex: 1; padding: 25px; background: #faf8f9; }
.tc-lessons .cs-library-context i { height: 90px; border-radius: 5px; background: #f0ebef; }
.tc-lessons .cs-crop[data-good] .cs-library-window { top: 32px; transform: none; }
.tc-lessons .cs-crop[data-good]:not([data-compact]) .cs-library-context { padding-left: 56px; }
.tc-lessons .cs-crop[data-compact] .cs-library-window { left: 20px; top: 80px; transform: scale(.395); }
.tc-lessons .cs-crop[data-compact][data-good] .cs-library-window { top: 24px; transform: none; width: 760px; height: 550px; }
.tc-lessons .cs-crop[data-compact][data-good] .cs-library-shell aside { display: none; }
.tc-lessons .cs-crop[data-compact][data-good] .cs-library-main { width: calc(var(--cs-width, 340px) - 40px); padding: 24px 16px; }
.tc-lessons .cs-crop[data-compact][data-good] .cs-library-context { margin-left: 20px; }
.tc-lessons .cs-frame[data-narrow] .cs-device:not([data-good]) .cs-device-phone { left: 36px; }
.tc-lessons .cs-frame[data-narrow] .cs-crop:not([data-good]) .cs-library-window { transform: scale(.326); }
.tc-lessons .cs-frame[data-narrow] .cs-focus-feedback .cs-back-content { padding: 17px 12px; }
.tc-lessons .cs-frame[data-narrow] .cs-focus .cs-back-content .cs-status { font-size: 10px; }
.tc-lessons .cs-frame[data-narrow] .cs-file-row { gap: 7px; padding-inline: 8px; }
.tc-lessons .cs-frame[data-narrow] .cs-file-row > span { display: none; }

/* Result weight, crop filler: one folder, its new file */
.tc-lessons .cs-upload { background: #ecebe9; }
.tc-lessons .cs-upload-window { left: 32px; top: 32px; width: 560px; height: 440px; }
.tc-lessons .cs-cropcut:not([data-good]) .cs-upload-window { width: 660px; }
.tc-lessons .cs-files-list { padding: 4px 10px; font-size: 10px; }
.tc-lessons .cs-files-list[data-big] { font-size: 13px; }
.tc-lessons .cs-fl-head, .tc-lessons .cs-fl-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 96px; align-items: center; gap: 10px; padding: 0 10px; }
.tc-lessons .cs-cropcut:not([data-good]) .cs-fl-head, .tc-lessons .cs-cropcut:not([data-good]) .cs-fl-row { grid-template-columns: minmax(0, 1fr) 120px 150px; }
.tc-lessons .cs-fl-head { height: 26px; color: #8a8f94; font-size: 10px; }
.tc-lessons .cs-fl-row { height: 20px; border-radius: 5px; }
.tc-lessons .cs-files-list[data-big] .cs-fl-row { height: 38px; }
.tc-lessons .cs-fl-row i { display: block; height: 6px; border-radius: 3px; background: #ececee; }
.tc-lessons .cs-fl-name { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.tc-lessons .cs-fl-name .cs-mark { width: 14px; height: 14px; color: #a9aeb3; }
.tc-lessons .cs-files-list[data-big] .cs-fl-row[data-new] { background: #eef4fd; font-weight: 500; }
.tc-lessons .cs-files-list[data-big] .cs-fl-row[data-new] .cs-mark { color: #3c6fd6; }
.tc-lessons .cs-upload[data-compact] .cs-upload-window { left: 20px; top: 24px; width: calc(var(--cs-width, 340px) + 40px); height: 520px; }
.tc-lessons .cs-upload[data-compact] .cs-fl-head, .tc-lessons .cs-upload[data-compact] .cs-fl-row { grid-template-columns: minmax(0, 1fr) 72px 60px; }
.tc-lessons .cs-cropcut[data-compact]:not([data-good]) .cs-fl-head, .tc-lessons .cs-cropcut[data-compact]:not([data-good]) .cs-fl-row { grid-template-columns: minmax(0, 1fr) 72px 120px; }
.tc-lessons .cs-cropcut[data-compact][data-good] .cs-upload-window { width: calc(var(--cs-width, 340px) - 40px); }

/* Tile lead: four features in a grid */
.tc-lessons .cs-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 24px; background: #f4f3f1; }
.tc-lessons .cs-tile { position: relative; overflow: hidden; padding: 16px; border-radius: 12px; background: #fff; }
.tc-lessons .cs-tile h3 { font-size: 13px; line-height: 18px; }
.tc-lessons .cs-tile p { font-size: 12px; line-height: 18px; color: #6f7a82; }
.tc-lessons .cs-tile-bars { display: grid; gap: 8px; margin-top: 14px; }
.tc-lessons .cs-tile-bars i { display: block; height: 6px; border-radius: 3px; background: #ececee; }
.tc-lessons .cs-tile-bars i:nth-child(2) { width: 80%; }
.tc-lessons .cs-tile-bars i:nth-child(3) { width: 60%; }
.tc-lessons .cs-tiles[data-good] { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, 1fr); }
.tc-lessons .cs-tile-hero { grid-row: 1 / 4; }
.tc-lessons .cs-tile-window { left: 16px; top: 52px; width: 380px; height: 420px; }
.tc-lessons .cs-tile-doc { padding: 16px; font-size: 12px; }
.tc-lessons .cs-tile-doc strong { font-weight: 500; }
.tc-lessons .cs-tile-caret { display: inline-block; margin-left: 2px; padding: 0 4px; border-radius: 3px; background: #d6457a; color: #fff; font-size: 9px; line-height: 14px; vertical-align: 2px; }
.tc-lessons .cs-tile-big { margin-top: 4px; font-size: 32px; line-height: 40px; font-weight: 550; color: #2d3a42; }
.tc-lessons .cs-tile-marks { display: flex; gap: 8px; margin-top: 10px; }
.tc-lessons .cs-tile-marks i { width: 28px; height: 28px; border-radius: 8px; background: #ececee; }
.tc-lessons .cs-tiles[data-compact] { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; padding: 16px; }
.tc-lessons .cs-tiles[data-compact] .cs-tile-hero { grid-row: auto; height: 200px; }