/* Bridge the approved reader design to the live content renderer and editor. */
.ct-reader-page .ct-workspace-lesson-image {
    margin: 0 0 24px;
}
.ct-reader-page .ct-workspace-lesson-image img,
.ct-reader-page .ct-workspace-introduction-topic .ct-lesson-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: 12px;
}
.ct-reader-page .ct-workspace-introduction-topic .ct-unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
}
.ct-reader-page .ct-workspace-introduction-topic iframe {
    width: 100%;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    background: var(--ct-info-paper);
    color-scheme: inherit;
}
.ct-reader-page .ct-workspace-introduction-topic .ct-lesson-note {
    padding: 20px;
    background: var(--ct-info-soft);
    color: var(--ct-info-ink);
    border-inline-start: 4px solid var(--ct-info-accent);
    border-radius: 12px;
}
.ct-reader-page .ct-workspace-introduction-topic .ct-lesson-figure {
    margin-inline: 0;
}
.ct-reader-page .ct-legacy-topic-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 100px;
}
.ct-reader-page .ct-reader-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: 40;
    background: #322341;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.ct-reader-page .ct-reader-toast.ct-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.ct-reader-page .ct-elements-topic-row {
    margin: 0;
}
.ct-reader-page .ct-elements-topic-heading {
    width: 100%;
    padding: 0;
}
.ct-reader-page .ct-elements-block {
    width: auto;
    padding: 0;
}
.ct-reader-page .ct-builder-topic-heading {
    width: auto;
    background: transparent;
    overflow: visible;
    align-items: center;
    gap: 14px;
    border-radius: 0;
}
.ct-reader-page .ct-builder-topic-heading h2 {
    padding: 0;
    color: var(--ct-ink);
}
.ct-reader-page .ct-builder-topic-heading h2 span[lang="en"] {
    font-size: 11px;
    font-weight: 400;
    color: #8c789a;
}
.ct-reader-page .ct-builder-topic-heading .ct-topic-number {
    width: 40px;
    min-width: 40px;
    height: 44px;
    padding: 0;
    border: 1px solid #eee5f7;
    border-radius: 8px;
    background: #f8f4fd;
    color: #9675b0;
    font:
        500 16px "Inter",
        sans-serif;
}
.ct-reader-page .ct-lesson-builder-content {
    padding-top: 0;
    margin-top: 0;
    border: 0;
}
.ct-reader-page .ct-content-source.ct-code-card {
    margin: 0;
    border-radius: 10px;
    background: #262336;
    border-color: #352c46;
    box-shadow: none;
}
.ct-reader-page .ct-code-card-head {
    min-height: 44px;
    padding: 10px 16px;
    background: transparent;
    border-color: #ffffff0d;
    color: #c4abd8;
}
.ct-reader-page .ct-code-card-symbol {
    width: auto;
    height: auto;
    background: none;
    color: #9b7eb5;
    font-size: 12px;
}
.ct-reader-page .ct-content-source.ct-code-card pre {
    background: var(--ct-content-bg, #262336);
    color: var(--ct-content-text, var(--ct-code-fg));
    padding: 24px 20px;
    scrollbar-color: #665276 transparent;
}
.ct-reader-page .ct-code-card[data-code-tone="dark"] {
    --ct-code-fg: #e7dfea;
    --ct-token-tag: #cba3eb;
    --ct-token-punctuation: #c4b0d4;
}
.ct-reader-page .ct-code-card-foot {
    background: transparent;
    border-color: #ffffff0a;
    padding: 10px 15px;
    direction: inherit;
    justify-content: flex-end;
}
.ct-reader-page .ct-code-card-foot .ct-content-try {
    padding: 7px 12px;
    min-height: 34px;
    margin: 0;
    border-color: #5a3d6e;
    background: #493359;
    color: #e4d4ee;
    font-size: 11px;
    box-shadow: none;
}
.ct-reader-page .ct-code-card-foot .ct-content-try:hover {
    background: #674781;
    border-color: #826298;
    color: white;
}
.ct-reader-page .ct-code-card .ct-content-copy {
    padding: 5px 10px;
    min-height: 30px;
    background: transparent;
    border-color: #665170;
    color: #d0bce0;
    font-size: 10px;
}
.ct-reader-page .ct-code-card .ct-content-copy:hover {
    background: #493656;
    color: #f3e8fa;
}
.ct-reader-page .ct-code-card .ct-content-copy[data-copied="true"] {
    background: #264a3e;
    color: #b8e6cf;
    border-color: #4c7863;
}
.ct-reader-page .ct-code-card-copy-status {
    color: #c0d8cb;
    font-size: 10px;
}
.ct-reader-page .ct-content-source.ct-code-card pre code,
.ct-reader-page .ct-content-source.ct-code-card pre code span {
    font-size: 13px;
    line-height: 1.9;
}
.ct-reader-page .ct-content-item .ct-content-box,
.ct-reader-page .ct-content-item .ct-content-prose,
.ct-reader-page .ct-content-item .ct-content-description,
.ct-reader-page .ct-content-item .ct-content-heading {
    color: var(--ct-content-text, var(--ct-reader-authored-text, inherit));
}
.ct-reader-page .ct-content-no-bg {
    color: var(--ct-content-text, var(--ct-reader-authored-text, inherit));
}
.ct-reader-page .ct-content-note {
    background: var(--ct-content-bg, #faf6ee);
    color: var(--ct-content-text, var(--ct-reader-authored-text, #8b7a63));
    border-color: var(--ct-content-border, #eee2ca);
}
.ct-reader-page .ct-content-no-bg > .ct-code-card,
.ct-reader-page .ct-content-no-bg .ct-content-source.ct-code-card pre,
.ct-reader-page .ct-content-no-bg .ct-content-note {
    background: transparent;
}
.ct-reader-page .ct-content-line-space .ct-content-source.ct-code-card pre code,
.ct-reader-page
    .ct-content-line-space
    .ct-content-source.ct-code-card
    pre
    code
    span {
    line-height: 2.1;
}
.ct-reader-page .ct-builder-prose blockquote {
    border-radius: 6px;
}
.ct-reader-page .ct-builder-item iframe {
    border-radius: 8px;
}
.ct-reader-page .ct-elements-share-links a {
    min-width: 36px;
    justify-content: center;
}
.ct-reader-page .ct-elements-share-links i {
    font-size: 14px;
}
.ct-reader-page .ct-elements-feedback-buttons button {
    min-width: 34px;
    min-height: 30px;
}
.ct-reader-page .ct-lesson-video {
    padding: 24px;
    background: white;
    border: 1px solid var(--ct-line);
    border-radius: 12px;
    margin: 24px 0;
}
.ct-reader-page .ct-lesson-video h2 {
    font-size: 20px;
    margin: 0 0 16px;
}
.ct-reader-page .ct-lesson-video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #16131d;
    border-radius: 8px;
}
.ct-reader-page .ct-builder-modal {
    font-size: 14px;
    line-height: 1.7;
}
.ct-reader-page .ct-builder-modal input,
.ct-reader-page .ct-builder-modal select,
.ct-reader-page .ct-builder-modal textarea {
    box-sizing: border-box;
}
[dir="ltr"] .ct-elements-chapter li a[aria-current]:after {
    content: "Now";
}
[dir="ltr"] .ct-elements-topic h2 [lang="ar"],
[dir="ltr"] .ct-builder-topic h2 [lang="ar"] {
    text-align: right;
}
[dir="ltr"] .ct-hero h1 [lang="ar"] {
    text-align: right;
}
[dir="ltr"] .ct-hero h1 [lang="en"] {
    text-align: left;
}
[dir="rtl"] .ct-reader-page .ct-code-card-tools {
    margin-inline-start: auto;
    margin-inline-end: 0;
}
@media (max-width: 600px) {
    .ct-reader-page .ct-code-card .ct-content-copy {
        min-height: 38px;
    }
    .ct-reader-page .ct-code-card-foot .ct-content-try {
        min-height: 40px;
    }
    .ct-reader-page .ct-content-source.ct-code-card pre {
        padding: 20px 15px;
    }
    .ct-reader-page .ct-content-source.ct-code-card pre code,
    .ct-reader-page .ct-content-source.ct-code-card pre code span {
        font-size: 12px;
    }
    .ct-reader-page .ct-builder-topic-heading .ct-topic-number {
        width: 32px;
        min-width: 32px;
        height: 39px;
        font-size: 13px;
    }
    .ct-reader-page .ct-reader-toast {
        max-width: calc(100vw - 40px);
        width: max-content;
        font-size: 11px;
    }
}