:root { color-scheme: light; font-family: Cairo, Arial, sans-serif; color: #272536; background: #f3f3f7; --ct-accent: #6b46b5; --ct-border: #e2e1e9; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
button, select, input { font: inherit; }
button, select, summary, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, summary { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #a28bd4; outline-offset: 3px; }
[hidden] { display: none !important; }
.ct-tryit-page { height: 100dvh; }
.ct-tryit-shell { display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 0; background: #f3f3f7; }
.ct-tryit-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.ct-tryit-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct-tryit-header { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; min-height: 84px; padding: 16px 24px; border-bottom: 1px solid var(--ct-border); background: #fff; }
.ct-tryit-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; color: #453066; font-size: 21px; font-weight: 750; letter-spacing: -.8px; direction: ltr; line-height: 1.15; }
.ct-tryit-brand img { object-fit: contain; }
.ct-tryit-heading { min-width: 0; padding-inline-start: 24px; border-inline-start: 1px solid var(--ct-border); margin-inline-end: auto; }
.ct-tryit-eyebrow { display: block; margin-bottom: 4px; color: #837b90; font-size: 11px; }
.ct-tryit-heading h1 { overflow: hidden; max-width: 48vw; margin: 0; color: #272536; font-size: 18px; line-height: 1.4; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .ct-tryit-heading { text-align: right; }
[dir="ltr"] .ct-tryit-heading { text-align: left; }
.ct-tryit-primary-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.ct-tryit-lesson-link { display: inline-flex; align-items: center; gap: 8px; color: #655c76; text-decoration: none; font-size: 13px; white-space: nowrap; }
.ct-tryit-lesson-link::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
:root[dir="ltr"] .ct-tryit-lesson-link::before { transform: rotate(180deg); }
.ct-tryit-lesson-link:hover { color: var(--ct-accent); }
.ct-tryit-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.ct-tryit-button-primary { min-height: 44px; padding: 11px 17px; color: #fff; background: var(--ct-accent); box-shadow: 0 3px 8px #6b46b526; font-size: 13px; }
.ct-tryit-button-primary:hover { background: #593698; box-shadow: 0 4px 12px #6b46b538; }
.ct-tryit-button-primary .ct-tryit-play-icon { width: 18px; height: 18px; fill: currentColor; stroke: none; transform: none; }
.ct-tryit-run-hint { padding: 2px 5px; margin-inline-start: 8px; border: 1px solid #ffffff32; border-radius: 4px; color: #ece4fc; font-family: inherit; font-size: 10px; font-weight: 400; }
.ct-tryit-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; min-height: 60px; padding: 10px 20px; }
.ct-tryit-instruction { margin: 0; color: #7a7088; font-size: 13px; white-space: nowrap; }
.ct-tryit-instruction strong { color: #72687f; font-weight: 500; }
.ct-tryit-view-actions { display: flex; align-items: center; gap: 6px; }
.ct-tryit-button-quiet { background: transparent; color: #6e657d; font-size: 13px; font-weight: 500; }
.ct-tryit-button-quiet:hover, .ct-tryit-tools[open] > summary { background: #e8e5ef; color: #4c3373; }
.ct-tryit-tools { position: relative; }
.ct-tryit-tools summary { list-style: none; }
.ct-tryit-tools summary::-webkit-details-marker { display: none; }
.ct-tryit-tools-menu { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-end: 0; width: 304px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 180px); overflow-y: auto; padding: 18px; border: 1px solid var(--ct-border); border-radius: 14px; background: var(--ct-tryit-surface); box-shadow: 0 14px 45px #14092330, 0 2px 6px #14092314; }
.ct-tryit-menu-title { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-tryit-soft); font-size: 14px; font-weight: 700; line-height: 1.6; }
.ct-tryit-tools-menu label { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.ct-tryit-tools-menu label + label { margin-top: 10px; }
.ct-tryit-tools-menu select { flex: 0 0 88px; width: 88px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--ct-border); border-radius: 9px; font-size: 14px; }
.ct-tryit-wrap-setting input { appearance: none; position: relative; flex: 0 0 42px; width: 42px; height: 24px; margin: 0; border: 1px solid var(--ct-border); border-radius: 999px; background: var(--ct-tryit-soft); cursor: pointer; transition: background .15s, border-color .15s; }
.ct-tryit-wrap-setting input::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ct-tryit-muted); transition: inset-inline-start .15s; }
.ct-tryit-wrap-setting input:checked { background: var(--ct-accent); border-color: var(--ct-accent); }
.ct-tryit-wrap-setting input:checked::after { inset-inline-start: 21px; background: #fff; }
.ct-tryit-settings-footer { display: flex; justify-content: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ct-tryit-soft); }
[dir="rtl"] .ct-tryit-settings-footer { justify-content: flex-end; }
.ct-tryit-reset-action { width: auto; min-height: 42px; margin: 0; padding: 9px 12px; border: 1px solid var(--ct-border); border-radius: 9px; background: transparent; font-size: 12px; font-weight: 600; }
.ct-tryit-reset-action:hover { background: var(--ct-tryit-soft); }
.ct-tryit-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); flex: 1; min-height: 0; margin: 0 16px 16px; direction: ltr; }
.ct-tryit-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--ct-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 3px #24213104; }
.ct-tryit-panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 56px; padding: 10px 18px; border-bottom: 1px solid var(--ct-border); }
.ct-tryit-panel-header h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 600; }
.ct-tryit-panel-header h2 .ct-tryit-icon { color: #8b7c9f; }
.ct-tryit-preview-label { color: #94889f; font-size: 11px; }
.ct-tryit-editor-actions { display: flex; align-items: center; gap: 3px; direction: ltr; }
.ct-tryit-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; }
.ct-tryit-icon-button:hover { background: var(--ct-editor-hover); color: var(--ct-editor-text); }
.ct-tryit-mode { max-width: 118px; min-height: 30px; margin-right: 10px; padding: 3px 7px; border: 1px solid var(--ct-editor-border); border-radius: 5px; color: var(--ct-editor-muted); background: var(--ct-editor-bg); font-family: inherit; font-size: 12px; }
.ct-tryit-page select { appearance: none; direction: rtl; text-align: right; padding-inline-start: 10px; padding-inline-end: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23958b9f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left 8px center; }
:root[dir="ltr"] .ct-tryit-page select { direction: ltr; text-align: left; background-position: right 8px center; }
.ct-tryit-editor-panel, .ct-tryit-page .ace_editor.ace_autocomplete { --ct-editor-bg: #1e1e1e; --ct-editor-bar: #252526; --ct-editor-text: #d4d4d4; --ct-editor-muted: #b5b5b5; --ct-editor-border: #707070; --ct-editor-hover: #37373d; --ct-editor-line: #282828; --ct-editor-selection: #264f78; --ct-editor-focus: #75beff; --ct-code-tag: #569cd6; --ct-code-attribute: #9cdcfe; --ct-code-string: #ce9178; --ct-code-keyword: #569cd6; --ct-code-number: #b5cea8; --ct-code-comment: #7fa563; --ct-code-function: #dcdcaa; border-color: var(--ct-editor-border); color: var(--ct-editor-text); background: var(--ct-editor-bg); color-scheme: dark; }
:root[data-ct-tryit-editor-theme="light"] :is(.ct-tryit-editor-panel, .ct-tryit-page .ace_editor.ace_autocomplete) { --ct-editor-bg: #fff; --ct-editor-bar: #f3f3f3; --ct-editor-text: #333; --ct-editor-muted: #616161; --ct-editor-border: #858585; --ct-editor-hover: #e5e5e5; --ct-editor-line: #f0f0f0; --ct-editor-selection: #add6ff; --ct-editor-focus: #005fb8; --ct-code-tag: #800000; --ct-code-attribute: #0451a5; --ct-code-string: #a31515; --ct-code-keyword: #0000ff; --ct-code-number: #086d48; --ct-code-comment: #008000; --ct-code-function: #795e26; color-scheme: light; }
.ct-tryit-editor-panel .ct-tryit-panel-header { background: var(--ct-editor-bar); border-color: var(--ct-editor-border); }
.ct-tryit-editor-panel .ct-tryit-panel-header h2 .ct-tryit-icon { color: var(--ct-code-tag); }
.ct-tryit-editor-title-group { display: flex; align-items: center; gap: 12px; }
.ct-tryit-editor-theme-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 9px; border: 1px solid var(--ct-editor-border); border-radius: 6px; background: var(--ct-editor-bg); color: var(--ct-editor-text); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.ct-tryit-editor-theme-button:hover { background: var(--ct-editor-hover); }
.ct-tryit-page .ct-tryit-editor-panel :is(button, select, input):focus-visible { outline-color: var(--ct-editor-focus); }
.ct-tryit-editor-actions { color: var(--ct-editor-muted); }
.ct-tryit-editor { flex: 1; width: 100%; min-height: 0; height: 100%; padding: 18px; resize: none; border: 0; outline: 0; color: var(--ct-editor-text); background: var(--ct-editor-bg); font-family: Consolas, "SFMono-Regular", "Liberation Mono", monospace; font-size: 16px; line-height: 1.8; text-align: left; tab-size: 2; }
.ct-tryit-editor.ace_editor { height: auto; padding: 0; background: var(--ct-editor-bg); color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_gutter { background: var(--ct-editor-bg); color: var(--ct-editor-muted); }
.ct-tryit-editor.ace_editor .ace_gutter-active-line, .ct-tryit-editor.ace_editor .ace_marker-layer .ace_active-line { background: var(--ct-editor-line); }
.ct-tryit-editor.ace_editor .ace_marker-layer .ace_selection { background: var(--ct-editor-selection); }
.ct-tryit-editor.ace_editor .ace_marker-layer .ace_selected-word { border-color: var(--ct-editor-muted); }
.ct-tryit-editor.ace_editor .ace_cursor { color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_invisible { color: var(--ct-editor-border); }
.ct-tryit-editor.ace_editor .ace_xml-pe { color: var(--ct-code-keyword); }
.ct-tryit-editor.ace_editor .ace_indent-guide { background: none; box-shadow: inset -1px 0 var(--ct-editor-border); }
.ct-tryit-editor.ace_editor .ace_meta, .ct-tryit-editor.ace_editor .ace_keyword, .ct-tryit-editor.ace_editor .ace_storage { color: var(--ct-code-keyword); }
.ct-tryit-editor.ace_editor .ace_entity.ace_name.ace_tag, .ct-tryit-editor.ace_editor .ace_meta.ace_tag { color: var(--ct-code-tag); }
.ct-tryit-editor.ace_editor .ace_string { color: var(--ct-code-string); }
.ct-tryit-editor.ace_editor .ace_constant { color: var(--ct-code-number); }
.ct-tryit-editor.ace_editor .ace_entity.ace_other.ace_attribute-name { color: var(--ct-code-attribute); }
.ct-tryit-editor.ace_editor .ace_comment { color: var(--ct-code-comment); font-style: italic; }
.ct-tryit-editor.ace_editor .ace_support, .ct-tryit-editor.ace_editor .ace_entity.ace_name.ace_function { color: var(--ct-code-function); }
.ct-tryit-editor.ace_editor .ace_paren, .ct-tryit-editor.ace_editor .ace_punctuation, .ct-tryit-editor.ace_editor .ace_variable { color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_fold { background: var(--ct-code-keyword); border-color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_search { max-width: 100%; background: var(--ct-editor-bar); color: var(--ct-editor-text); border: 1px solid var(--ct-editor-border); border-radius: 0 0 0 8px; }
.ct-tryit-editor.ace_editor .ace_search input { background: var(--ct-editor-bg); color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_search_form, .ct-tryit-editor.ace_editor .ace_replace_form { border-color: var(--ct-editor-border); }
.ct-tryit-editor.ace_editor .ace_searchbtn, .ct-tryit-editor.ace_editor .ace_searchbtn_close, .ct-tryit-editor.ace_editor .ace_button { color: var(--ct-editor-muted); border-color: var(--ct-editor-border); }
.ct-tryit-editor.ace_editor .ace_searchbtn { background: var(--ct-editor-bg); }
.ct-tryit-editor.ace_editor .ace_searchbtn:hover, .ct-tryit-editor.ace_editor .ace_button:hover { background: var(--ct-editor-hover); color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_searchbtn::after { border-color: currentColor; }
.ct-tryit-editor.ace_editor .ace_searchbtn_close { background: none; text-align: center; line-height: 14px; }
.ct-tryit-editor.ace_editor .ace_searchbtn_close::after { content: '\00d7'; font-size: 18px; }
.ct-tryit-editor.ace_editor .ace_searchbtn_close:hover { background: var(--ct-editor-hover); color: var(--ct-editor-text); }
.ct-tryit-editor.ace_editor .ace_button { opacity: 1; }
.ct-tryit-editor.ace_editor .ace_button.checked, .ct-tryit-editor.ace_editor .ace_button:active { border-color: var(--ct-editor-focus); background: var(--ct-editor-selection); color: var(--ct-editor-text); }
.ct-tryit-page .ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line { background: var(--ct-editor-selection); }
.ct-tryit-page .ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover { background: var(--ct-editor-hover); border-color: var(--ct-editor-border); }
.ct-tryit-page .ace_editor.ace_autocomplete .ace_completion-highlight { color: var(--ct-code-tag); }
.ct-tryit-page .ace_editor.ace_autocomplete .ace_completion-meta { color: var(--ct-editor-muted); opacity: 1; }
.ct-tryit-page .ace_editor.ace_autocomplete .ace_selected :is(.ace_completion-highlight, .ace_completion-meta) { color: var(--ct-editor-text); }
.ct-tryit-editor-footer, .ct-tryit-status-line { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 34px; margin: 0; padding: 8px 16px; font-size: 10px; }
.ct-tryit-editor-footer { justify-content: space-between; background: var(--ct-editor-bar); color: var(--ct-editor-muted); border-top: 1px solid var(--ct-editor-border); }
.ct-tryit-help { flex: 1; min-width: 0; margin: 0; direction: rtl; text-align: right; font-size: 11px; line-height: 1.8; }
.ct-tryit-help p { margin: 0; }
#ct-tryit-draft-note { margin-top: 3px; }
.ct-tryit-help bdi { display: inline-block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.ct-tryit-help kbd { font-family: inherit; font-size: inherit; }
.ct-tryit-language { flex-shrink: 0; font-family: inherit; font-size: 11px; }
.ct-tryit-status-line { color: #7f7789; border-top: 1px solid #eeeaf3; background: #fcfbfd; }
.ct-tryit-status-dot { width: 6px; height: 6px; flex-shrink: 0; background: #719983; border-radius: 50%; }
#ct-tryit-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tryit-result { flex: 1; width: 100%; min-height: 0; height: 100%; border: 0; background: #fff; }
.ct-tryit-splitter { display: flex; align-items: center; justify-content: center; width: 16px; cursor: col-resize; touch-action: none; border-radius: 8px; }
.ct-tryit-splitter::after { content: ''; width: 3px; height: 36px; background: #c9c3d3; border-radius: 3px; transition: background .15s; }
.ct-tryit-splitter:hover::after, .ct-tryit-splitter:focus-visible::after { background: #9470c4; }
.ct-tryit-splitter:focus-visible { outline: 2px solid #a28bd4; outline-offset: -2px; }
.ct-tryit-workspace.is-vertical .ct-tryit-splitter { width: 100%; height: 16px; cursor: row-resize; }
.ct-tryit-workspace.is-vertical .ct-tryit-splitter::after { width: 36px; height: 3px; }
.ct-tryit-mobile-tabs { display: none; }
.ct-tryit-error { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex: 0 0 auto; max-height: 35%; overflow: auto; padding: 12px 16px; border-bottom: 1px solid #f0cfd5; background: #fff4f6; color: #a43650; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ct-tryit-error button { flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: #f9e5ea; color: inherit; font-size: 20px; line-height: 1; }
.ct-tryit-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
    .ct-tryit-header { gap: 18px; padding-inline: 18px; }
    .ct-tryit-heading { padding-inline-start: 18px; }
    .ct-tryit-brand > span, .ct-tryit-run-hint { display: none; }
    .ct-tryit-primary-actions { gap: 16px; }
}
@media (max-width: 700px) {
    .ct-tryit-header { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 14px 16px; }
    .ct-tryit-brand img { width: 32px; height: 32px; }
    .ct-tryit-heading { flex: 1; padding: 0; border: 0; }
    .ct-tryit-heading h1 { max-width: none; font-size: 16px; }
    .ct-tryit-eyebrow { margin-bottom: 2px; font-size: 10px; }
    .ct-tryit-primary-actions { width: 100%; justify-content: space-between; }
    .ct-tryit-button-primary { min-height: 40px; padding: 9px 18px; }
    .ct-tryit-controls { min-height: 48px; padding: 6px 8px; justify-content: flex-end; }
    .ct-tryit-instruction, #ct-tryit-layout { display: none; }
    .ct-tryit-button-quiet { min-height: 36px; font-size: 11px; }
    .ct-tryit-tools-menu { padding: 16px; }
    .ct-tryit-mobile-tabs { display: flex; flex: 0 0 auto; gap: 4px; margin: 0 12px 10px; padding: 4px; border: 1px solid #e0dce7; border-radius: 9px; background: #e9e6ee; }
    .ct-tryit-tab { flex: 1; min-height: 34px; padding: 6px 12px; border: 0; border-radius: 6px; color: #91859e; background: transparent; font-size: 12px; font-weight: 600; }
    .ct-tryit-tab.is-active { color: #684394; background: #fff; box-shadow: 0 1px 4px #33234312; }
    .ct-tryit-workspace { display: block; margin: 0 10px 10px; }
    .ct-tryit-panel { height: 100%; border-radius: 10px; }
    .ct-tryit-panel-header { min-height: 54px; padding: 9px 12px; gap: 8px; }
    .ct-tryit-panel-header h2 { font-size: 12px; gap: 6px; }
    .ct-tryit-preview-label { font-size: 10px; }
    .ct-tryit-editor-actions { gap: 0; }
    .ct-tryit-icon-button { width: 30px; }
    .ct-tryit-mode { max-width: 104px; margin-right: 4px; font-size: 11px; }
    .ct-tryit-editor-footer, .ct-tryit-status-line { padding-inline: 12px; }
    .ct-tryit-workspace.is-result .ct-tryit-editor-panel, .ct-tryit-workspace.is-editor .ct-tryit-result-panel, .ct-tryit-splitter { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; } }