.sr-ckeditor {
  --sr-ckeditor-ui-surface: var(--sr-surface, var(--color-card, #fff));
  --sr-ckeditor-ui-surface-muted: var(--sr-surface-muted, var(--color-default-100, #f6f7fb));
  --sr-ckeditor-ui-surface-soft: var(--sr-surface-soft, var(--color-default-50, #fafbfd));
  --sr-ckeditor-ui-text: var(--sr-text, var(--color-body-color, #20242a));
  --sr-ckeditor-ui-muted: var(--sr-muted, var(--text-muted, var(--color-default-600, #47505c)));
  --sr-ckeditor-ui-border: var(--sr-border, var(--color-default-300, #edf2f9));
  --sr-ckeditor-ui-border-soft: var(--sr-border-soft, var(--color-default-200, #eef2f7));
  --sr-ckeditor-body-surface: var(--sr-editor-body-surface, var(--sr-ckeditor-ui-surface));
  --sr-ckeditor-body-text: var(--sr-editor-body-text, var(--sr-ckeditor-ui-text));
  --sr-ckeditor-body-muted: var(--sr-editor-body-muted, var(--sr-ckeditor-ui-muted));
  --sr-ckeditor-body-border: var(--sr-editor-body-border, var(--sr-ckeditor-ui-border));
  --sr-ckeditor-hover: color-mix(in oklab, var(--sr-ckeditor-ui-text) 8%, var(--sr-ckeditor-ui-surface));
  --sr-ckeditor-active: color-mix(in oklab, var(--color-primary, #0a74ff) 16%, var(--sr-ckeditor-ui-surface));
  --sr-rich-text-color-black: #111827;
  --sr-rich-text-color-gray: #6b7280;
  --sr-rich-text-color-red: #b91c1c;
  --sr-rich-text-color-orange: #a16207;
  --sr-rich-text-color-green: #15803d;
  --sr-rich-text-color-blue: #1d4ed8;
  --sr-rich-text-color-purple: #7e22ce;
  --sr-rich-text-background-gray: #f3f4f6;
  --sr-rich-text-background-red: #fee2e2;
  --sr-rich-text-background-yellow: #fef3c7;
  --sr-rich-text-background-green: #dcfce7;
  --sr-rich-text-background-blue: #dbeafe;
  --sr-rich-text-background-purple: #f3e8ff;
  --ck-color-base-background: var(--sr-ckeditor-ui-surface);
  --ck-color-base-foreground: var(--sr-ckeditor-ui-surface-muted);
  --ck-color-base-border: var(--sr-ckeditor-ui-border);
  --ck-color-base-action: var(--color-primary, #0a74ff);
  --ck-color-base-focus: var(--color-primary, #0a74ff);
  --ck-color-base-text: var(--sr-ckeditor-ui-text);
  --ck-color-text: var(--sr-ckeditor-ui-text);
  --ck-color-focus-border: var(--color-primary, #0a74ff);
  --ck-color-focus-outer-shadow: var(--color-primary-ring, #0a74ff33);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--sr-ckeditor-hover);
  --ck-color-button-default-active-background: var(--sr-ckeditor-active);
  --ck-color-button-default-disabled-background: transparent;
  --ck-color-button-on-background: var(--sr-ckeditor-active);
  --ck-color-button-on-hover-background: color-mix(in oklab, var(--color-primary, #0a74ff) 22%, var(--sr-ckeditor-ui-surface));
  --ck-color-button-on-active-background: color-mix(in oklab, var(--color-primary, #0a74ff) 28%, var(--sr-ckeditor-ui-surface));
  --ck-color-button-on-color: var(--sr-ckeditor-ui-text);
  --ck-color-dropdown-panel-background: var(--sr-ckeditor-ui-surface);
  --ck-color-dropdown-panel-border: var(--sr-ckeditor-ui-border);
  --ck-color-list-background: var(--sr-ckeditor-ui-surface);
  --ck-color-list-button-hover-background: var(--sr-ckeditor-hover);
  --ck-color-list-button-on-background: var(--sr-ckeditor-active);
  --ck-color-input-background: var(--sr-ckeditor-ui-surface);
  --ck-color-input-border: var(--sr-ckeditor-ui-border);
  --ck-color-input-text: var(--sr-ckeditor-ui-text);
  --ck-color-input-disabled-background: var(--sr-ckeditor-ui-surface-muted);
  --ck-color-input-disabled-border: var(--sr-ckeditor-ui-border-soft);
  --ck-color-input-disabled-text: var(--sr-ckeditor-ui-muted);
  --ck-color-split-button-hover-background: var(--sr-ckeditor-hover);
  --ck-color-toolbar-background: var(--sr-ckeditor-ui-surface);
  --ck-color-toolbar-border: var(--sr-ckeditor-ui-border);
  --ck-color-panel-background: var(--sr-ckeditor-ui-surface);
  --ck-color-panel-border: var(--sr-ckeditor-ui-border);
  --ck-color-engine-placeholder-text: var(--sr-ckeditor-ui-muted);
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.sr-ckeditor :is(.ck-editor, .ck-editor__top, .ck-editor__main, .ck-sticky-panel, .ck-sticky-panel__content, .ck-toolbar) {
  max-width: 100%;
  min-width: 0;
}

.sr-ckeditor[data-sr-editor-body-theme="content.basic"] {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
  --sr-editor-body-text: var(--content-text, var(--sr-text, var(--text-strong, var(--color-default-900, #242424))));
  --sr-editor-body-muted: var(--content-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280))));
  --sr-editor-body-border: var(--content-border, var(--sr-border, var(--color-default-300, #d8dde6)));
}

.sr-ckeditor[data-sr-editor-body-theme="community.basic"] {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
  --sr-editor-body-text: var(--community-text, var(--sr-text, var(--text-strong, var(--color-default-900, #242424))));
  --sr-editor-body-muted: var(--community-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280))));
  --sr-editor-body-border: var(--community-border, var(--sr-border, var(--color-default-300, #d8dde6)));
}

.sr-ckeditor:is([data-sr-editor-body-theme="quiz.basic"], [data-sr-editor-body-theme="survey.basic"]) {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
  --sr-editor-body-text: var(--sr-text, var(--text-strong, var(--color-default-900, #242424)));
  --sr-editor-body-muted: var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280)));
  --sr-editor-body-border: var(--sr-border, var(--color-default-300, #d8dde6));
}

:is([data-theme="dark"], [data-color-scheme="dark"], [data-color-scheme="system"]) .sr-ckeditor[data-sr-editor-body-theme="content.basic"] {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #171a21));
  --sr-editor-body-text: var(--content-text, var(--sr-text, var(--text-strong, var(--color-default-900, #f4f4f5))));
  --sr-editor-body-muted: var(--content-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #b7beca))));
  --sr-editor-body-border: var(--content-border, var(--sr-border, var(--color-default-300, #343b47)));
}

:is([data-theme="dark"], [data-color-scheme="dark"], [data-color-scheme="system"]) .sr-ckeditor[data-sr-editor-body-theme="community.basic"] {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #171a21));
  --sr-editor-body-text: var(--community-text, var(--sr-text, var(--text-strong, var(--color-default-900, #f4f4f5))));
  --sr-editor-body-muted: var(--community-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #b7beca))));
  --sr-editor-body-border: var(--community-border, var(--sr-border, var(--color-default-300, #343b47)));
}

:is([data-theme="dark"], [data-color-scheme="dark"], [data-color-scheme="system"]) .sr-ckeditor:is([data-sr-editor-body-theme="quiz.basic"], [data-sr-editor-body-theme="survey.basic"]) {
  --sr-editor-body-surface: var(--sr-surface, var(--color-card, #171a21));
  --sr-editor-body-text: var(--sr-text, var(--text-strong, var(--color-default-900, #f4f4f5)));
  --sr-editor-body-muted: var(--sr-muted, var(--text-muted, var(--color-default-600, #b7beca)));
  --sr-editor-body-border: var(--sr-border, var(--color-default-300, #343b47));
}

@media (prefers-color-scheme: light) {
  [data-color-scheme="system"] .sr-ckeditor[data-sr-editor-body-theme="content.basic"] {
    --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
    --sr-editor-body-text: var(--content-text, var(--sr-text, var(--text-strong, var(--color-default-900, #242424))));
    --sr-editor-body-muted: var(--content-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280))));
    --sr-editor-body-border: var(--content-border, var(--sr-border, var(--color-default-300, #d8dde6)));
  }

  [data-color-scheme="system"] .sr-ckeditor[data-sr-editor-body-theme="community.basic"] {
    --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
    --sr-editor-body-text: var(--community-text, var(--sr-text, var(--text-strong, var(--color-default-900, #242424))));
    --sr-editor-body-muted: var(--community-muted, var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280))));
    --sr-editor-body-border: var(--community-border, var(--sr-border, var(--color-default-300, #d8dde6)));
  }

  [data-color-scheme="system"] .sr-ckeditor:is([data-sr-editor-body-theme="quiz.basic"], [data-sr-editor-body-theme="survey.basic"]) {
    --sr-editor-body-surface: var(--sr-surface, var(--color-card, #fff));
    --sr-editor-body-text: var(--sr-text, var(--text-strong, var(--color-default-900, #242424)));
    --sr-editor-body-muted: var(--sr-muted, var(--text-muted, var(--color-default-600, #6b7280)));
    --sr-editor-body-border: var(--sr-border, var(--color-default-300, #d8dde6));
  }
}

.sr-ckeditor .ck-editor__editable_inline {
  min-height: 22rem;
}

.sr-ckeditor .ck-content {
  background: var(--sr-ckeditor-body-surface);
  box-sizing: border-box;
  color: var(--sr-ckeditor-body-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.sr-ckeditor .ck-placeholder::before {
  color: var(--sr-ckeditor-body-muted);
}

.sr-ckeditor:not([data-sr-editor-output]) .ck-content {
  font-weight: var(--font-weight-normal, 400);
}

.sr-ckeditor[data-sr-editor-output] .ck-content {
  background: transparent;
  display: flow-root;
  font-size: var(--ck-content-font-size);
  line-height: var(--ck-content-line-height);
  padding-inline: 0;
}

.sr-ckeditor[data-sr-editor-output] .ck-content > :first-child {
  margin-top: var(--ck-spacing-large);
}

.sr-ckeditor[data-sr-editor-output] .ck-content > :last-child {
  margin-bottom: var(--ck-spacing-large);
}

.sr-ckeditor .ck-content *,
.sr-ckeditor .ck-content *::before,
.sr-ckeditor .ck-content *::after {
  box-sizing: border-box;
}

.sr-ckeditor .ck-content :where(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, pre, table, thead, tbody, tr, th, td, hr, figure, figcaption) {
  padding: 0;
}

.sr-ckeditor .ck-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--sr-ckeditor-body-text);
  font-family: inherit;
}

.sr-ckeditor .ck-content :where(a) {
  color: inherit;
  text-decoration: underline;
}

.sr-ckeditor .ck-content :where(ul) {
  list-style: disc outside;
  padding-inline-start: 1.5em;
}

.sr-ckeditor .ck-content :where(ol) {
  list-style: decimal outside;
  padding-inline-start: 1.5em;
}

.sr-ckeditor .ck-content :where(ul ul, ol ul) {
  list-style-type: circle;
}

.sr-ckeditor .ck-content :where(ul ul ul, ol ul ul) {
  list-style-type: square;
}

.sr-ckeditor .ck-content :where(table) {
  border-collapse: collapse;
  display: table;
  text-indent: 0;
}

.sr-ckeditor .ck-content :where(thead) {
  display: table-header-group;
}

.sr-ckeditor .ck-content :where(tbody) {
  display: table-row-group;
}

.sr-ckeditor .ck-content :where(tr) {
  display: table-row;
}

.sr-ckeditor .ck-content :where(th, td) {
  display: table-cell;
  vertical-align: top;
}

.sr-ckeditor .ck-content :where(img, svg, video, canvas) {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.sr-ckeditor .ck-content p > img:only-child,
.sr-ckeditor .ck-content p > a:only-child > img:only-child {
  display: inline;
}

.sr-ckeditor .ck-content :where(pre) {
  white-space: pre-wrap;
}

.sr-ckeditor .ck-content :where(blockquote, figcaption) {
  color: var(--sr-ckeditor-body-muted);
}

.sr-ckeditor .ck-content :where(hr, th, td) {
  border-color: var(--sr-ckeditor-body-border);
}

.sr-ckeditor .ck-content [style^="color:#111827"] { color: var(--sr-rich-text-color-black) !important; }
.sr-ckeditor .ck-content [style^="color:#6b7280"] { color: var(--sr-rich-text-color-gray) !important; }
.sr-ckeditor .ck-content [style^="color:#b91c1c"] { color: var(--sr-rich-text-color-red) !important; }
.sr-ckeditor .ck-content [style^="color:#a16207"] { color: var(--sr-rich-text-color-orange) !important; }
.sr-ckeditor .ck-content [style^="color:#15803d"] { color: var(--sr-rich-text-color-green) !important; }
.sr-ckeditor .ck-content [style^="color:#1d4ed8"] { color: var(--sr-rich-text-color-blue) !important; }
.sr-ckeditor .ck-content [style^="color:#7e22ce"] { color: var(--sr-rich-text-color-purple) !important; }
.sr-ckeditor .ck-content [style*="background-color:#f3f4f6"] { background-color: var(--sr-rich-text-background-gray) !important; }
.sr-ckeditor .ck-content [style*="background-color:#fee2e2"] { background-color: var(--sr-rich-text-background-red) !important; }
.sr-ckeditor .ck-content [style*="background-color:#fef3c7"] { background-color: var(--sr-rich-text-background-yellow) !important; }
.sr-ckeditor .ck-content [style*="background-color:#dcfce7"] { background-color: var(--sr-rich-text-background-green) !important; }
.sr-ckeditor .ck-content [style*="background-color:#dbeafe"] { background-color: var(--sr-rich-text-background-blue) !important; }
.sr-ckeditor .ck-content [style*="background-color:#f3e8ff"] { background-color: var(--sr-rich-text-background-purple) !important; }

.sr-ckeditor .ck-source-editing-area textarea {
  background: var(--sr-ckeditor-body-surface);
  color: var(--sr-ckeditor-body-text);
  min-height: 22rem;
}

.sr-ckeditor .ck-powered-by {
  background: var(--sr-ckeditor-ui-surface-soft);
  border-color: var(--sr-ckeditor-ui-border);
  color: var(--sr-ckeditor-ui-muted);
}

:is([data-theme="dark"], [data-color-scheme="dark"], [data-color-scheme="system"]) .sr-ckeditor {
  --sr-ckeditor-hover: color-mix(in oklab, var(--sr-ckeditor-ui-text) 12%, var(--sr-ckeditor-ui-surface));
  --sr-ckeditor-active: color-mix(in oklab, var(--color-primary, #0a74ff) 24%, var(--sr-ckeditor-ui-surface));
  --ck-color-focus-outer-shadow: var(--color-primary-ring, #0a74ff4d);
  --sr-rich-text-color-black: #f3f4f6;
  --sr-rich-text-color-gray: #d1d5db;
  --sr-rich-text-color-red: #fca5a5;
  --sr-rich-text-color-orange: #fcd34d;
  --sr-rich-text-color-green: #86efac;
  --sr-rich-text-color-blue: #93c5fd;
  --sr-rich-text-color-purple: #d8b4fe;
  --sr-rich-text-background-gray: #374151;
  --sr-rich-text-background-red: #7f1d1d;
  --sr-rich-text-background-yellow: #78350f;
  --sr-rich-text-background-green: #14532d;
  --sr-rich-text-background-blue: #1e3a8a;
  --sr-rich-text-background-purple: #581c87;
}

@media (prefers-color-scheme: light) {
  [data-color-scheme="system"] .sr-ckeditor {
    --sr-rich-text-color-black: #111827;
    --sr-rich-text-color-gray: #6b7280;
    --sr-rich-text-color-red: #b91c1c;
    --sr-rich-text-color-orange: #a16207;
    --sr-rich-text-color-green: #15803d;
    --sr-rich-text-color-blue: #1d4ed8;
    --sr-rich-text-color-purple: #7e22ce;
    --sr-rich-text-background-gray: #f3f4f6;
    --sr-rich-text-background-red: #fee2e2;
    --sr-rich-text-background-yellow: #fef3c7;
    --sr-rich-text-background-green: #dcfce7;
    --sr-rich-text-background-blue: #dbeafe;
    --sr-rich-text-background-purple: #f3e8ff;
  }
}