.ct-content-item{position:relative;min-width:0;grid-column:span var(--ct-span,12)}
.ct-content-box{color:var(--ct-content-text,inherit);background:var(--ct-content-bg,transparent)}
.ct-content-has-border{border:1px solid var(--ct-content-border,#6535c9)}
.ct-content-no-bg{background:transparent;color:var(--ct-content-text,#24243a)}
.ct-content-line-space,.ct-content-line-space .ct-content-prose,.ct-content-line-space .ct-content-source pre,.ct-content-line-space .ct-content-source code{line-height:1.9}
.ct-content-heading{margin:.25rem 0 .65rem;font-size:1.25rem}
.ct-content-description{margin-bottom:.75rem}
.ct-content-prose{line-height:var(--ct-line-height,1.65)}
.ct-content-source{position:relative;margin:.75rem 0}
.ct-content-source pre{overflow:auto;margin:0;padding:1rem;background:var(--ct-content-bg,#171b2e);color:var(--ct-content-text,#e5e9f5);white-space:pre;direction:ltr;text-align:left}
.ct-content-source code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;color:inherit}
.ct-code-wrap pre{background:var(--ct-content-bg,#f8fafc);color:var(--ct-content-text,#24243a)}
.ct-content-copy,.ct-content-try{font-family:inherit;cursor:pointer;text-decoration:none}
.ct-content-try{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;max-width:100%;margin:.6rem 0 0;padding:9px 17px;border:1px solid #6743b5;border-radius:8px;background:#6743b5;color:#fff;font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 2px 4px #39206b12;transition:background-color .15s,border-color .15s}
.ct-content-try::before{content:"";flex:0 0 13px;width:13px;height:13px;background:currentColor;clip-path:polygon(18% 4%,95% 50%,18% 96%)}
.ct-content-try:link,.ct-content-try:visited,.ct-content-try:hover,.ct-content-try:focus,.ct-content-try:focus-visible,.ct-content-try:active{color:#fff}
.ct-content-try:hover{background:#553496;border-color:#553496}
.ct-content-try:focus-visible,.ct-code-card .ct-content-copy:focus-visible{outline:3px solid #a996dd;outline-offset:3px}

/* One code card for saved lessons, static examples and live authoring. */
.ct-content-source.ct-code-card{
    --ct-code-fg:#e5e9f5;--ct-token-comment:#a0abc4;--ct-token-tag:#f2a7c5;--ct-token-punctuation:#b0bad6;
    --ct-token-attribute:#7dd3fc;--ct-token-string:#86efac;--ct-token-keyword:#c4b5fd;
    --ct-token-number:#fdba74;--ct-token-function:#67e8f9;--ct-token-entity:#fde68a;
    min-width:0;max-width:100%;border:1px solid var(--ct-content-border,#dcdfea);border-radius:13px;
    background:#fff;box-shadow:0 4px 16px #29244208;overflow:hidden;
}
.ct-content-source.ct-code-card[data-code-tone="light"]{
    --ct-code-fg:#293247;--ct-token-comment:#596579;--ct-token-tag:#b42366;--ct-token-punctuation:#576174;
    --ct-token-attribute:#1d4ed8;--ct-token-string:#047857;--ct-token-keyword:#7c3aed;
    --ct-token-number:#b45309;--ct-token-function:#0369a1;--ct-token-entity:#9a3412;
}
.ct-code-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-height:55px;padding:10px 16px;background:#fff;border-bottom:1px solid #e4e6ef;color:#5b6277}
.ct-code-card-language{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.025em;line-height:1.4}
.ct-code-card-symbol{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:#f0ebfa;color:#7753b6;font:600 13px/1 ui-monospace,Consolas,monospace;direction:ltr;letter-spacing:-1px}
.ct-code-card-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;max-width:100%;margin-inline-start:auto}
.ct-code-card-copy-status{max-width:100%;font-size:12px;line-height:1.5;color:#168263}
.ct-code-card-copy-status:empty{display:none}
.ct-code-card .ct-content-copy{position:static;display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;min-height:34px;margin:0;padding:6px 10px;border:1px solid #e1e4ed;border-radius:7px;background:#fff;color:#576076;font-size:12px;font-weight:600;line-height:1.5;transition:background-color .15s,color .15s}
.ct-code-card .ct-content-copy[hidden]{display:none}
.ct-code-card .ct-content-copy::before{content:"";flex:0 0 15px;width:15px;height:15px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V4H4v12h4'/%3E%3C/svg%3E") center/contain no-repeat}
.ct-code-card .ct-content-copy:hover{background:#f4f1fa;color:#6743a8;border-color:#cfc5e6}
.ct-code-card .ct-content-copy[data-copied="true"]{background:#edf9f3;color:#147d55;border-color:#b5e4cd}
.ct-content-source.ct-code-card pre{
    display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:0;max-height:440px;
    margin:0;padding:22px 24px;border:0;border-radius:0;background:var(--ct-content-bg,#171b2e);color:var(--ct-content-text,var(--ct-code-fg));
    overflow:auto;direction:ltr;text-align:left;white-space:pre;tab-size:4;scrollbar-width:thin;scrollbar-color:#68728b #171b2e;
}
.ct-content-source.ct-code-card pre code,.ct-content-source.ct-code-card pre code span{font-family:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:14px;font-weight:400;line-height:1.85;white-space:pre;text-shadow:none;font-style:normal}
.ct-content-source.ct-code-card pre code{display:block;min-width:max-content;color:inherit}
.ct-code-card pre:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #9c86d2}
.ct-code-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;background:#f9f9fc;border-top:1px solid #e5e6ee}
.ct-code-card-foot .ct-content-try{margin:0}
.ct-content-box:has(> .ct-code-card){border-radius:13px}
.ct-content-has-border:has(> .ct-code-card){overflow:hidden}
.ct-content-has-border > .ct-code-card{margin:0;border:0;border-radius:inherit;box-shadow:none}
.ct-content-has-border:has(> .ct-code-card) > :is(.ct-content-heading,.ct-content-description){padding-inline:16px}
.ct-content-has-border:has(> .ct-code-card) > .ct-content-heading{margin-top:14px}
.ct-content-box > .ct-content-description[hidden]{display:none}
.ct-content-no-bg > .ct-code-card,.ct-content-no-bg .ct-content-source.ct-code-card pre{background:transparent}
[dir="rtl"] .ct-code-card-head,[dir="rtl"] .ct-code-card-foot{text-align:right}
[dir="ltr"] .ct-code-card-head,[dir="ltr"] .ct-code-card-foot{text-align:left}
.ct-content-line-space .ct-content-source.ct-code-card pre code,.ct-content-line-space .ct-content-source.ct-code-card pre code span{line-height:2.1}
@media(max-width:700px){
    .ct-code-card-head{padding:10px 12px;gap:8px}
    .ct-content-source.ct-code-card pre{padding:18px 16px}
    .ct-content-source.ct-code-card pre code,.ct-content-source.ct-code-card pre code span{font-size:13px}
    .ct-code-card-foot{padding:11px 12px}
    .ct-code-card .ct-content-copy{min-height:40px}
    .ct-code-card-foot .ct-content-try{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.ct-content-try,.ct-code-card .ct-content-copy{transition:none}}
.ct-content-frame{display:block;width:100%;max-width:100%;height:var(--ct-height,350px);border:0;background:#fff}.ct-content-video{height:clamp(220px,45vw,520px)}.ct-content-result{overflow:auto}.ct-content-item audio,.ct-content-item video,.ct-content-box audio,.ct-content-box video{max-width:100%}
.ct-content-note{padding:.8rem 1rem;border-inline-start:4px solid #4f46e5;background:var(--ct-content-bg,#eef2ff)}.ct-content-note-success{border-color:#16a34a;background:var(--ct-content-bg,#f0fdf4)}.ct-content-note-warning{border-color:#d97706;background:var(--ct-content-bg,#fffbeb)}.ct-content-note-danger{border-color:#dc2626;background:var(--ct-content-bg,#fef2f2)}.ct-content-note-neutral{border-color:#64748b;background:var(--ct-content-bg,#f8fafc)}.ct-content-no-bg .ct-content-note{background:transparent}

/* Saved lessons and live authoring share the tilted note label. */
html .ct-content-box > .ct-content-note.ct-note {
    --ct-note-paper:#ffffd1; --ct-note-ink:#3c351d; --ct-note-line:#aa9851;
    position:relative; display:flex; flex-direction:column; align-items:stretch;
    min-width:0; margin:30px 0 14px; padding:18px 22px 22px;
    border:0; border-block:1px dotted var(--ct-content-border,var(--ct-note-line)); border-radius:0;
    background:var(--ct-content-bg,var(--ct-note-paper)); color:var(--ct-content-text,var(--ct-note-ink));
    font-size:15px; line-height:1.95; text-align:start; overflow-wrap:anywhere;
}
html .ct-content-box > .ct-content-note-success.ct-note { --ct-note-paper:#edf9ef; --ct-note-ink:#245c36; --ct-note-line:#45945c; }
html .ct-content-box > .ct-content-note-warning.ct-note { --ct-note-paper:#fff4cf; --ct-note-ink:#6a470d; --ct-note-line:#bd851e; }
html .ct-content-box > .ct-content-note-danger.ct-note { --ct-note-paper:#fff0f0; --ct-note-ink:#8e3037; --ct-note-line:#c4686e; }
html .ct-content-box > .ct-content-note-neutral.ct-note { --ct-note-paper:#f1f1f5; --ct-note-ink:#454354; --ct-note-line:#858095; }
html .ct-content-box > .ct-note > .ct-note-title {
    display:flex; align-items:center; align-self:flex-start; gap:7px; width:fit-content; max-width:calc(100% - 12px);
    position:relative; z-index:1; margin:-35px 0 20px; padding:5px 11px; border:0; border-radius:4px;
    background:#17151d; color:#fff; box-shadow:0 3px 6px #17151d14;
    font-family:inherit; font-size:17px; font-weight:800; line-height:1.6; text-align:start;
    transform:rotate(-4deg); transform-origin:center; overflow-wrap:anywhere;
}
html .ct-note[dir="rtl"] > .ct-note-title { transform:rotate(4deg); }
html .ct-note > .ct-note-title svg { width:21px; height:24px; flex:0 0 21px; }
html .ct-note > .ct-note-title > span { min-width:0; }
html .ct-note .ct-note-body { min-width:0; }
html .ct-note .ct-note-body > :first-child { margin-block-start:0; }
html .ct-note .ct-note-body > :last-child { margin-block-end:0; }
html .ct-note .ct-note-body :is(p,li,h2,h3,h4,strong,b) { color:inherit; }
html .ct-note .ct-note-body a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
html .ct-note .ct-note-body a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
html[data-ct-lesson-theme="dark"] .ct-content-box > .ct-content-note.ct-note { --ct-note-paper:#383220; --ct-note-ink:#f2e7c9; --ct-note-line:#a99661; }
html[data-ct-lesson-theme="dark"] .ct-content-box > .ct-content-note-success.ct-note { --ct-note-paper:#20392b; --ct-note-ink:#c2edcc; --ct-note-line:#70b987; }
html[data-ct-lesson-theme="dark"] .ct-content-box > .ct-content-note-warning.ct-note { --ct-note-paper:#3d301d; --ct-note-ink:#f7dfad; --ct-note-line:#c59a4e; }
html[data-ct-lesson-theme="dark"] .ct-content-box > .ct-content-note-danger.ct-note { --ct-note-paper:#42272e; --ct-note-ink:#ffd0d4; --ct-note-line:#d3838b; }
html[data-ct-lesson-theme="dark"] .ct-content-box > .ct-content-note-neutral.ct-note { --ct-note-paper:#302c39; --ct-note-ink:#e2dcea; --ct-note-line:#9c90ae; }
html[data-ct-lesson-theme="dark"] .ct-note > .ct-note-title { background:#141118; color:#fff; box-shadow:0 0 0 1px #76697c; }
html .ct-content-no-bg > .ct-content-note.ct-note { background:transparent; color:var(--ct-content-text,inherit); }
@media(max-width:700px) {
    html .ct-content-box > .ct-content-note.ct-note { padding:17px 15px 18px; margin-block:28px 12px; font-size:14px; }
    html .ct-content-box > .ct-note > .ct-note-title { max-width:calc(100% - 8px); margin-top:-32px; padding:5px 9px; font-size:15px; }
}
.ct-content-source .token.comment,.ct-content-source .token.prolog,.ct-content-source .token.doctype,.ct-code-wrap .token.comment{color:var(--ct-token-comment,#64748b)}
.ct-content-source .token.tag,.ct-code-wrap .token.tag{color:var(--ct-token-tag,#2563eb)}
.ct-content-source .token.tag .token.punctuation,.ct-content-source .token.punctuation,.ct-code-wrap .token.punctuation{color:var(--ct-token-punctuation,#475569)}
.ct-content-source .token.attr-name,.ct-code-wrap .token.attr-name{color:var(--ct-token-attribute,#7c3aed)}
.ct-content-source .token.attr-value,.ct-content-source .token.string,.ct-code-wrap .token.attr-value,.ct-code-wrap .token.string{color:var(--ct-token-string,#047857)}
.ct-content-source .token.namespace,.ct-content-source .token.operator,.ct-content-source .token.keyword,.ct-content-source .token.boolean,.ct-code-wrap .token.keyword{color:var(--ct-token-keyword,#a21caf)}
.ct-content-source .token.number,.ct-code-wrap .token.number{color:var(--ct-token-number,#b45309)}
.ct-content-source .token.function,.ct-content-source .token.selector,.ct-content-source .token.property,.ct-code-wrap .token.function{color:var(--ct-token-function,#0369a1)}
.ct-content-source .token.entity,.ct-code-wrap .token.entity{color:var(--ct-token-entity,#9a3412)}
.ct-content-offset-spacer{min-width:0}
@media (max-width:700px){.ct-content-item{grid-column:1 / -1}.ct-content-offset-spacer{display:none}.ct-content-frame{height:var(--ct-height,350px)}}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol){list-style:none;margin:18px 0 0;padding:0;counter-reset:ct-numbered-card}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li{position:relative;margin:10px 0;padding:16px 18px 16px 54px;border:1px solid var(--ct-content-border,#e6ddef);border-radius:12px;background:var(--ct-content-bg,#f7f3fc);counter-increment:ct-numbered-card}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li::before{content:counter(ct-numbered-card,decimal-leading-zero);position:absolute;inset-inline-start:13px;top:19px;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ct-content-bg,#fff);color:#7750b2;border:1px solid var(--ct-content-border,#e6ddef);font:700 12px/1 Inter,Arial,sans-serif}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li>:is(strong,b):first-child,.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li>p:first-child>:is(strong,b):first-child{display:block;margin-bottom:5px;color:var(--ct-content-text,#7750b2)}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li :is(ul,ol){list-style:revert;margin:8px 0;padding-inline-start:23px;counter-reset:none}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li :is(ul,ol)>li{position:static;margin:5px 0;padding:0;border:0;border-radius:0;background:transparent;counter-increment:none}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li :is(ul,ol)>li::before{content:none}
.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li{padding-inline:54px 16px}
@media(max-width:700px){.ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li{padding-block:13px}}
[data-ct-lesson-theme="dark"] .ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li{background:var(--ct-content-bg,#272234);border-color:var(--ct-content-border,#443651);color:var(--ct-content-text,#eee8f7)}
[data-ct-lesson-theme="dark"] .ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li::before{background:var(--ct-content-bg,#201d2b);border-color:var(--ct-content-border,#443651);color:var(--ct-content-text,#d0b3f2)}
[data-ct-lesson-theme="dark"] .ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li>:is(strong,b):first-child,[data-ct-lesson-theme="dark"] .ct-content-prose.ct-list-numbered-cards>:is(ul,ol)>li>p:first-child>:is(strong,b):first-child{color:var(--ct-content-text,#d0b3f2)}