:root {
    --ct-tryit-bg: #f5f3f9;
    --ct-tryit-surface: #fff;
    --ct-tryit-soft: #ece8f4;
    --ct-tryit-ink: #292136;
    --ct-tryit-muted: #65596f;
    --ct-border: #a297b1;
    --ct-accent: #6740b0;
    --ct-tryit-link: #6740b0;
    --ct-tryit-error: #9e2140;
    --ct-tryit-error-bg: #fff0f4;
}
:root[data-ct-lesson-theme="dark"] {
    --ct-tryit-bg: #17141f;
    --ct-tryit-surface: #211c2b;
    --ct-tryit-soft: #30283f;
    --ct-tryit-ink: #f1ecf7;
    --ct-tryit-muted: #c1b7d0;
    --ct-border: #766784;
    --ct-accent: #7650b5;
    --ct-tryit-link: #d1baff;
    --ct-tryit-error: #ffc0ce;
    --ct-tryit-error-bg: #442333;
}
.ct-tryit-page, .ct-tryit-shell { color: var(--ct-tryit-ink); background: var(--ct-tryit-bg); }
.ct-tryit-page :is(.ct-tryit-header, .ct-tryit-result-panel, .ct-tryit-tools-menu, .ct-tryit-status-line) { color: var(--ct-tryit-ink); background: var(--ct-tryit-surface); border-color: var(--ct-border); }
.ct-tryit-heading h1 { color: var(--ct-tryit-ink); }
.ct-tryit-page :is(.ct-tryit-eyebrow, .ct-tryit-lesson-link, .ct-tryit-instruction, .ct-tryit-instruction strong, .ct-tryit-menu-title, .ct-tryit-tools-menu label, .ct-tryit-preview-label, .ct-tryit-button-quiet, .ct-tryit-status-line) { color: var(--ct-tryit-muted); }
.ct-tryit-page .ct-tryit-tools-menu :is(.ct-tryit-menu-title, label) { color: var(--ct-tryit-ink); }
.ct-tryit-brand { color: var(--ct-tryit-link); }
.ct-tryit-reset-action { color: var(--ct-tryit-link); border-color: var(--ct-border); }
.ct-tryit-reset-action:hover { color: var(--ct-tryit-ink); }
:root[data-ct-lesson-theme="dark"] .ct-tryit-brand img { background: #fff; border-radius: 9px; padding: 3px; }
.ct-tryit-page :is(.ct-tryit-button-quiet:hover, .ct-tryit-tools[open] > summary, .ct-tryit-tools-menu select) { color: var(--ct-tryit-ink); background-color: var(--ct-tryit-soft); border-color: var(--ct-border); }
.ct-tryit-page :is(button, a, summary, select, input):focus-visible { outline-color: var(--ct-tryit-link); }
.ct-tryit-mobile-tabs { background: var(--ct-tryit-soft); border-color: var(--ct-border); }
.ct-tryit-tab { color: var(--ct-tryit-muted); }
.ct-tryit-tab.is-active { color: var(--ct-tryit-link); background: var(--ct-tryit-surface); }
.ct-tryit-splitter::after { background: var(--ct-border); }
.ct-tryit-error { color: var(--ct-tryit-error); background: var(--ct-tryit-error-bg); border-color: var(--ct-tryit-error); }
.ct-tryit-error button { color: inherit; background: transparent; }
.ct-tryit-text-result { flex: 1; min-height: 160px; min-width: 0; margin: 0; padding: 18px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font: 16px/1.7 Consolas, monospace; color: var(--ct-tryit-ink); background: var(--ct-tryit-surface); }
.ct-tryit-text-result:focus-visible { outline: 2px solid var(--ct-tryit-link); outline-offset: -3px; }
.ct-tryit-text-result[hidden], .ct-tryit-result[hidden] { display: none; }
.ct-tryit-video-button[hidden] { display: none; }
.ct-tryit-video-button { margin-inline-start: auto; min-height: 36px; }
.ct-tryit-panel-header:has(.ct-tryit-video-button:not([hidden])) { flex-wrap: wrap; gap: 8px; }
.ct-tryit-page .ct-tryit-video-dialog .modal-dialog { width: calc(100% - 24px); max-width: 820px; }
.ct-tryit-video-frame { display: block; width: 100%; height: clamp(230px, 50vh, 420px); margin-top: 16px; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-tryit-soft); }
.ct-tryit-page .ct-tryit-modal .modal-content { color: var(--ct-tryit-ink); background: var(--ct-tryit-surface); border: 1px solid var(--ct-border); border-radius: 18px; box-shadow: 0 24px 70px #08051040; }
.ct-tryit-modal .modal-header { display: flex; align-items: flex-start; gap: 12px; padding: 20px; }
.ct-tryit-modal .modal-header .modal-title { flex: 1; min-width: 0; margin: 0; line-height: 1.6; }
.ct-tryit-modal .modal-body { padding: 0 20px 20px; line-height: 1.8; }
.ct-tryit-modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--ct-border); }
.ct-tryit-modal :is(.modal-header, .modal-footer) { border-color: var(--ct-border); }
.ct-tryit-modal .modal-title { color: var(--ct-tryit-ink); font-size: 19px; }
.ct-tryit-modal .modal-body { color: var(--ct-tryit-muted); }
.ct-tryit-modal .modal-body p { margin: 0; }
.ct-tryit-modal .ct-tryit-icon-button { color: var(--ct-tryit-muted); font-size: 24px; }
.ct-tryit-modal .modal-footer { gap: 8px; }
.ct-tryit-modal .modal-footer button { width: auto; min-height: 44px; white-space: normal; }
#ct-tryit-alert-message { max-height: min(50vh, 360px); overflow: auto; padding: 16px; border: 1px solid var(--ct-border); border-radius: 10px; color: var(--ct-tryit-ink); background: var(--ct-tryit-soft); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
[dir="rtl"] .ct-tryit-modal .modal-footer { justify-content: flex-end; }
:root[dir="ltr"] .ct-tryit-help { direction: ltr; text-align: left; }
/* The preview keeps the example's authored colors; the surrounding workbench uses the site theme. */
.ct-tryit-shell:fullscreen { overflow: auto; }
@media (max-height: 520px) { .ct-tryit-shell { min-height: 520px; } html, body { overflow: auto; } }