jqml_style-controller/styles.css

.osc-settings {
  --osc-control-height: 30px;
  --osc-control-radius: 7px;
  --osc-control-border: var(--background-modifier-border);
  --osc-control-bg: var(--background-primary);
  --osc-card-bg: var(--background-secondary);
}

.osc-settings .setting-item {
  padding: 10px 18px;
}

.osc-settings > .setting-item {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  margin: 8px 0 12px;
  padding: 12px 18px;
}

.osc-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.osc-top-nav button {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-ui-small);
  padding: 6px 10px;
}

.osc-top-nav button.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.osc-override-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  margin: 12px 0;
  padding: 12px;
}

.osc-override-card.is-disabled {
  opacity: 0.65;
}

.osc-override-card-header {
  align-items: start;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
}

.osc-override-card-header h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.osc-override-card-header .setting-item.osc-override-actions {
  border: 0;
  margin: 0;
  padding: 0;
}

.osc-override-card-header .osc-override-actions .setting-item-control {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.osc-path-pattern-setting .setting-item-control,
.osc-path-pattern-setting .osc-path-suggest,
.osc-path-pattern-setting input[type="text"] {
  width: 100%;
}

.osc-section-heading {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: 700;
  letter-spacing: 0;
  margin: 14px 0 6px;
  text-transform: uppercase;
}

.osc-control-subheading {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  font-weight: 700;
  letter-spacing: 0;
  margin: 14px 0 6px;
  text-transform: uppercase;
}

.osc-mini-preview + .osc-control-subheading {
  margin-top: 10px;
}

.osc-config-list {
  display: grid;
  gap: 10px;
}

.osc-config-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  min-width: 0;
  padding: 10px;
}

.osc-config-card-header {
  align-items: start;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.osc-config-card h3 {
  margin: 0 0 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.osc-config-title {
  min-width: 0;
}

.osc-config-title > .setting-item {
  border: 0;
  margin: 0;
  padding: 0;
}

.osc-config-title > .setting-item .setting-item-info {
  margin: 0;
}

.osc-config-title > .setting-item .setting-item-name {
  line-height: 1.2;
  margin: 0 0 3px;
}

.osc-config-title .osc-config-description {
  line-height: 1.25;
  margin-top: 0;
}

.osc-config-description.is-empty {
  color: var(--text-faint);
}

.osc-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.osc-config-editor {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.osc-config-editor input,
.osc-config-editor textarea {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.osc-config-editor textarea {
  min-height: 96px;
  resize: vertical;
}

.osc-config-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.osc-config-export {
  box-sizing: border-box;
  font-family: var(--font-monospace);
  margin-top: 10px;
  min-width: 0;
  width: 100%;
}

.osc-profile {
  margin-bottom: 10px;
}

.osc-setting-group {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  margin: 8px 0;
  padding: 0;
}

.osc-setting-group > summary {
  cursor: pointer;
  font-size: var(--font-ui-small);
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 10px;
}

.osc-setting-group-content {
  border-top: 1px solid var(--background-modifier-border);
  padding: 8px 10px 10px;
}

.osc-setting-grid,
.osc-heading-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.osc-setting-grid .setting-item.osc-font-setting {
  grid-column: span 2;
}

.osc-base-text-controls {
  display: grid;
  gap: 10px;
}

.osc-base-text-row {
  display: grid;
  gap: 8px 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
}

.osc-base-text-row.is-font-row {
  grid-template-columns: minmax(0, 1fr);
}

.osc-base-text-row.is-metrics-row,
.osc-base-text-row.is-color-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.osc-base-text-row.is-emphasis-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.62fr) minmax(0, 0.88fr);
}

.osc-base-text-row .setting-item {
  align-items: start;
  border: 0;
  border-radius: 8px;
  background: var(--osc-card-bg);
  display: block;
  min-width: 0;
  padding: 10px 12px;
}

.osc-base-text-row .setting-item.osc-font-setting {
  grid-column: auto;
}

.osc-base-text-row .setting-item-control {
  min-width: 0;
  width: 100%;
}

.osc-heading-grid {
  display: block;
}

.osc-callout-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.osc-heading-card,
.osc-callout-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 8px;
}

.osc-heading-card {
  margin-bottom: 10px;
  min-width: 0;
  width: 100%;
}

.osc-heading-card:last-child {
  margin-bottom: 0;
}

.osc-callout-card {
  min-width: 0;
}

.osc-setting-grid .setting-item.osc-callout-title-font-setting {
  grid-column: span 2;
}

.osc-setting-grid .setting-item.osc-file-explorer-font-setting {
  grid-column: span 2;
}

.osc-callout-card .setting-item.osc-callout-preview-text-setting {
  min-width: 0;
}

.osc-callout-global-preview-controls {
  margin-top: 8px;
}

.osc-callout-preview {
  margin-bottom: 8px;
  min-width: 0;
  overflow: hidden;
}

.osc-global-callout-preview {
  margin-top: 2px;
}

.osc-callout-preview .callout {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.osc-callout-preview .callout-title,
.osc-callout-preview .callout-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.osc-heading-card-title,
.osc-callout-card-title {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: 700;
  margin-bottom: 6px;
}

.osc-callout-card-title {
  color: var(--text-normal);
  text-transform: none;
}

.osc-setting-grid .setting-item,
.osc-heading-card .setting-item,
.osc-callout-card .setting-item {
  align-items: start;
  border: 0;
  display: block;
  padding: 10px 12px;
}

.osc-heading-card .setting-item,
.osc-callout-card .setting-item {
  margin-bottom: 8px;
}

.osc-heading-font-row {
  margin-bottom: 8px;
}

.osc-heading-controls-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.osc-heading-font-row .setting-item,
.osc-heading-controls-row .setting-item {
  margin-bottom: 0;
}

.osc-heading-controls-row .setting-item-control {
  min-width: 0;
  width: 100%;
}

.osc-heading-controls-row .osc-color-control input[type="text"] {
  min-width: 80px;
}

.osc-heading-controls-row .osc-color-control input[type="color"] {
  flex-basis: 30px;
  width: 30px;
}

.osc-heading-controls-row .osc-value-status {
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.osc-heading-card .setting-item:last-child,
.osc-callout-card .setting-item:last-child {
  margin-bottom: 0;
}

.osc-setting-grid .setting-item-info,
.osc-heading-card .setting-item-info,
.osc-callout-card .setting-item-info {
  margin: 0 0 4px;
}

.osc-setting-grid .setting-item-name,
.osc-heading-card .setting-item-name,
.osc-callout-card .setting-item-name {
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  line-height: 1.2;
}

.osc-setting-grid .setting-item-description,
.osc-heading-card .setting-item-description,
.osc-callout-card .setting-item-description {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.35;
}

.osc-file-explorer-grid .setting-item-name {
  color: var(--text-normal);
}

.osc-file-explorer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.osc-images-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.osc-image-card,
.osc-image-width-row .setting-item {
  align-items: start;
  border: 0;
  border-radius: 8px;
  background: var(--osc-card-bg);
  display: block;
  min-width: 0;
  padding: 10px 12px;
}

.osc-image-card .setting-item-info,
.osc-image-width-row .setting-item-info {
  margin: 0 0 6px;
}

.osc-image-card .setting-item-name,
.osc-image-width-row .setting-item-name {
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  line-height: 1.2;
}

.osc-image-card .setting-item-description {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 8px;
}

.osc-image-card .setting-item-control,
.osc-image-width-row .setting-item-control {
  justify-content: stretch;
  min-width: 0;
  width: 100%;
}

.osc-image-alignment-card select {
  flex: 0 0 148px;
  min-width: 148px;
  width: 148px;
}

.osc-select-wide {
  flex: 0 0 148px;
  min-width: 148px;
  width: 148px;
}

.osc-image-alignment-card .setting-item-control {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-start;
}

.osc-image-width-row {
  grid-column: 1 / -1;
}

.osc-image-width-row .osc-size-control {
  max-width: 260px;
}

.osc-setting-grid .setting-item-control,
.osc-heading-card .setting-item-control,
.osc-callout-card .setting-item-control {
  justify-content: stretch;
  min-width: 0;
  width: 100%;
}

.osc-settings input[type="text"],
.osc-settings input[type="number"],
.osc-settings select {
  box-sizing: border-box;
  height: var(--osc-control-height);
  min-width: 0;
  width: 100%;
}

.osc-settings input[type="text"]:focus,
.osc-settings input[type="number"]:focus,
.osc-settings input[type="color"]:focus,
.osc-settings select:focus,
.osc-settings textarea:focus {
  border-color: var(--background-modifier-border-focus, var(--interactive-accent));
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.22);
  outline: none;
}

.osc-settings textarea {
  font-family: var(--font-monospace);
  min-height: 96px;
  width: 100%;
}

.osc-size-control,
.osc-color-control,
.osc-font-control {
  align-items: center;
  display: flex;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.osc-size-control input {
  flex: 1 1 82px;
  min-width: 66px;
  padding-left: 8px;
  padding-right: 8px;
  width: auto;
}

.osc-size-control select {
  appearance: auto;
  background-color: var(--osc-control-bg);
  border: 1px solid var(--osc-control-border);
  border-radius: var(--osc-control-radius);
  color: var(--text-normal);
  cursor: pointer;
  flex: 0 0 48px;
  font-weight: 600;
  padding: 0 4px;
  width: 48px;
}

.osc-size-control select:hover {
  border-color: var(--interactive-accent);
}

.osc-image-alignment-select {
  flex: 0 0 148px;
  max-width: 148px;
  min-width: 148px;
  text-align: left;
  text-align-last: left;
  width: 148px;
}

.osc-image-alignment-card .osc-value-status {
  flex: 0 0 auto;
}

.osc-color-control input[type="color"] {
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  flex: 0 0 34px;
  height: var(--osc-control-height);
  padding: 2px;
}

.osc-color-control input[type="text"],
.osc-font-control input[type="text"] {
  flex: 1 1 120px;
  min-width: 0;
  width: auto;
}

.osc-color-control input[type="text"] {
  min-width: 82px;
}

.osc-settings .setting-item-control > input[type="text"] {
  flex: 1 1 72px;
  min-width: 64px;
}

.osc-color-control input[type="text"].osc-default-color-value {
  color: var(--text-muted);
}

.osc-base-text-row .osc-color-control input[type="text"] {
  min-width: 82px;
}

.osc-base-text-row .osc-color-control input[type="color"] {
  flex-basis: 30px;
  width: 30px;
}

.osc-base-text-row .osc-value-status {
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.osc-font-control .osc-font-status {
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px) {
  .osc-setting-grid .setting-item.osc-font-setting {
    grid-column: 1 / -1;
  }

  .osc-base-text-row,
  .osc-base-text-row.is-font-row {
    grid-template-columns: 1fr;
  }

  .osc-heading-controls-row {
    grid-template-columns: 1fr;
  }

  .osc-file-explorer-grid {
    grid-template-columns: 1fr;
  }
}

.osc-value-status {
  align-items: center;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 20px;
  min-width: 32px;
  padding: 0 5px;
  text-align: center;
  white-space: nowrap;
}

.osc-value-status.is-active {
  background: rgba(var(--interactive-accent-rgb), 0.14);
  color: var(--interactive-accent);
}

.osc-value-status.is-placeholder {
  color: var(--text-faint);
}

.osc-value-status.is-error {
  background: var(--background-modifier-error);
  border-color: var(--text-error);
  color: var(--text-error);
}

.osc-font-status {
  align-items: center;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 20px;
  min-width: 32px;
  padding: 0 5px;
  text-align: center;
  white-space: nowrap;
}

.osc-font-status.is-valid {
  color: var(--text-muted);
}

.osc-font-status.is-invalid {
  color: var(--text-error);
}

.osc-font-status.is-active {
  background: rgba(var(--interactive-accent-rgb), 0.14);
  color: var(--interactive-accent);
}

.osc-font-status.is-placeholder {
  color: var(--text-faint);
}

.osc-font-status.is-error {
  background: var(--background-modifier-error);
  border-color: var(--text-error);
  color: var(--text-error);
}

.osc-font-status.is-hidden {
  display: none;
}

.osc-path-suggest {
  align-self: stretch;
  min-width: 0;
  position: relative;
  width: 100%;
}

.setting-item-control:has(.osc-path-suggest) {
  justify-content: flex-start;
  min-width: 0;
}

.osc-path-dropdown {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: var(--shadow-s);
  display: none;
  left: 0;
  margin-top: 4px;
  overflow-y: auto;
  position: absolute;
  text-align: left;
  top: 100%;
  z-index: 1000;
}

.osc-path-dropdown.is-visible {
  display: block;
}

.osc-path-option {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
}

.osc-path-option.is-selected,
.osc-path-option:hover {
  background: var(--background-modifier-hover);
}

.osc-path-option-title {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  min-width: 0;
  overflow: hidden;
  justify-self: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osc-path-option-note {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  justify-self: end;
  white-space: nowrap;
}

.osc-preview-table {
  --table-column-min-width: 0;
  width: 100%;
  margin-bottom: 8px;
}

.osc-preview-table th,
.osc-preview-table td {
  border-color: var(--background-modifier-border);
}

.osc-mini-preview {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  margin: 0 0 10px;
  padding: 8px;
}

.osc-links-preview {
  --link-color: var(--osc-preview-link-color, var(--link-color));
  --link-color-hover: var(--osc-preview-link-hover-color, var(--link-color-hover));
  --link-external-color: var(--osc-preview-external-link-color, var(--link-external-color));
}

.osc-links-preview a {
  font-size: var(--font-ui-small);
}

.osc-links-preview p {
  margin: 0;
}

.osc-links-preview a {
  color: var(--osc-preview-link-color, var(--link-color));
}

.osc-links-preview a:hover {
  color: var(--osc-preview-link-hover-color, var(--link-color-hover));
}

.osc-links-preview .internal-link {
  color: var(--osc-preview-internal-link-color, var(--link-color));
  --link-color: var(--osc-preview-internal-link-color, var(--link-color));
  --link-color-hover: var(--osc-preview-link-hover-color, var(--link-color-hover));
}

.osc-links-preview .external-link {
  color: var(--osc-preview-external-link-color, var(--osc-preview-link-color, var(--link-external-color)));
}

.osc-links-preview a:hover,
.osc-links-preview .internal-link:hover,
.osc-links-preview .external-link:hover {
  color: var(--osc-preview-link-hover-color, var(--link-color-hover));
}

.osc-heading-preview {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.osc-heading-preview div {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.osc-rich-preview {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.osc-rich-preview .osc-preview-table {
  margin: 0;
  min-width: 0;
}

.osc-rich-preview .osc-preview-table th,
.osc-rich-preview .osc-preview-table td {
  border-color: var(--background-modifier-border);
}

.osc-rich-preview .osc-preview-table tbody tr:nth-child(even) {
  background: var(--background-secondary);
}

.osc-rich-preview .osc-inline-code-preview {
  align-self: start;
  background-color: var(--osc-code-background);
  border-radius: 4px;
  color: var(--osc-code-color);
  font-family: var(--osc-code-font-family);
  padding: 4px 6px;
}

.osc-rich-preview .osc-code-block-rendered-preview {
  grid-column: 1 / -1;
  min-width: 0;
}

.osc-rich-preview .osc-code-block-rendered-preview pre {
  background-color: var(--osc-code-block-background);
  border-radius: 4px;
  margin: 0;
  min-width: 0;
  overflow-x: auto;
  padding: 8px 10px;
  white-space: pre;
}

.osc-rich-preview .osc-code-block-rendered-preview pre code {
  background-color: var(--osc-code-block-background);
  color: var(--osc-code-block-color);
  font-family: var(--osc-code-block-font-family);
  padding: 0;
}

.osc-rich-preview blockquote {
  border-left: 3px solid var(--blockquote-border-color);
  margin: 0;
  padding: 6px 8px;
}

.osc-file-explorer-preview {
  box-sizing: border-box;
  overflow: hidden;
}

.osc-file-explorer-preview,
.osc-file-explorer-preview * {
  box-sizing: border-box;
}

.osc-file-explorer-preview .nav-folder,
.osc-file-explorer-preview .nav-file,
.osc-file-explorer-preview .nav-folder-children {
  min-width: 0;
}

.osc-file-explorer-preview .nav-folder-children {
  border-left: 1px solid var(--nav-indentation-guide-color, var(--background-modifier-border));
  margin-left: 10px;
  padding-left: 8px;
}

.osc-file-explorer-preview .nav-folder.mod-root > .nav-folder-children {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

.osc-file-explorer-preview .nav-folder-title,
.osc-file-explorer-preview .nav-file-title {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  display: flex;
  gap: 4px;
  line-height: var(--line-height-tight);
  min-height: 28px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 8px;
  width: 100%;
}

.osc-file-explorer-preview .nav-folder-title:hover,
.osc-file-explorer-preview .nav-file-title:hover {
  background: var(--nav-item-background-hover);
  color: var(--nav-item-color-hover);
}

.osc-file-explorer-preview .nav-file-title.is-active {
  background: var(--nav-item-background-active);
  border-color: var(--background-modifier-border-focus);
}

.osc-file-explorer-preview .collapse-icon {
  color: var(--nav-collapse-icon-color);
  flex: 0 0 auto;
}

.osc-file-explorer-preview .nav-folder-title-content,
.osc-file-explorer-preview .nav-file-title-content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osc-file-explorer-preview .nav-file-title::before {
  content: var(--osc-file-preview-prefix, "");
  flex: 0 0 auto;
  margin-right: 0.25em;
}

@media (max-width: 760px) {
  .osc-override-card-header {
    grid-template-columns: 1fr;
  }

  .osc-override-card-header .osc-override-actions .setting-item-control {
    justify-content: flex-start;
  }

  .osc-config-card-header {
    grid-template-columns: 1fr;
  }

  .osc-config-editor {
    grid-template-columns: 1fr;
  }

  .osc-config-actions {
    justify-content: flex-start;
  }
}


/* Runtime note/view styling. Values are supplied per Markdown view with CSS variables. */
.osc-style-scope .markdown-preview-view,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-content {
  color: var(--osc-text-color);
  font-family: var(--osc-font-family);
  font-size: var(--osc-text-size);
  font-weight: var(--osc-text-weight);
  line-height: var(--osc-line-height);
}

.osc-style-scope .markdown-preview-view,
.osc-style-scope .markdown-source-view.mod-cm6 {
  background-color: var(--osc-background-color);
}

.osc-style-scope .markdown-preview-view strong,
.osc-style-scope .markdown-preview-view b,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-strong {
  color: var(--osc-bold-color);
  font-family: var(--osc-bold-font-family);
  font-weight: var(--osc-bold-weight);
}

.osc-style-scope .markdown-preview-view em,
.osc-style-scope .markdown-preview-view i,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-em {
  color: var(--osc-italic-color);
  font-family: var(--osc-italic-font-family);
  font-weight: var(--osc-italic-weight);
}

.osc-style-scope .markdown-preview-view h1,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-1,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-1 {
  color: var(--osc-h1-color);
  font-family: var(--osc-h1-font-family);
  font-size: var(--osc-h1-size);
  font-weight: var(--osc-h1-weight);
}

.osc-style-scope .markdown-preview-view h2,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-2,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-2 {
  color: var(--osc-h2-color);
  font-family: var(--osc-h2-font-family);
  font-size: var(--osc-h2-size);
  font-weight: var(--osc-h2-weight);
}

.osc-style-scope .markdown-preview-view h3,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-3,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-3 {
  color: var(--osc-h3-color);
  font-family: var(--osc-h3-font-family);
  font-size: var(--osc-h3-size);
  font-weight: var(--osc-h3-weight);
}

.osc-style-scope .markdown-preview-view h4,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-4,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-4 {
  color: var(--osc-h4-color);
  font-family: var(--osc-h4-font-family);
  font-size: var(--osc-h4-size);
  font-weight: var(--osc-h4-weight);
}

.osc-style-scope .markdown-preview-view h5,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-5,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-5 {
  color: var(--osc-h5-color);
  font-family: var(--osc-h5-font-family);
  font-size: var(--osc-h5-size);
  font-weight: var(--osc-h5-weight);
}

.osc-style-scope .markdown-preview-view h6,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-header-6,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-header-6 {
  color: var(--osc-h6-color);
  font-family: var(--osc-h6-font-family);
  font-size: var(--osc-h6-size);
  font-weight: var(--osc-h6-weight);
}

.osc-style-scope .markdown-preview-view a,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-link,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-url {
  color: var(--osc-link-color);
}

.osc-style-scope .markdown-preview-view a:hover,
.osc-style-scope .markdown-preview-view .internal-link:hover,
.osc-style-scope .markdown-preview-view .external-link:hover,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-link:hover,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-hmd-internal-link:hover,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-hmd-internal-link:hover .cm-underline,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-link.cm-url:hover {
  color: var(--osc-link-hover-color);
}

.osc-style-scope .markdown-preview-view .internal-link,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-hmd-internal-link .cm-underline {
  color: var(--osc-internal-link-color);
}

.osc-style-scope .markdown-preview-view .external-link,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-link.cm-url {
  color: var(--osc-external-link-color);
}

.osc-style-scope .markdown-preview-view table,
.osc-style-scope .markdown-preview-view th,
.osc-style-scope .markdown-preview-view td,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-table-widget table,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-table-widget th,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-table-widget td {
  border-color: var(--osc-table-border-color);
}

.osc-style-scope .markdown-preview-view th,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-table-widget th {
  background: var(--osc-table-header-background);
  color: var(--osc-table-header-color);
}

.osc-style-scope .markdown-preview-view tbody tr:nth-child(even) {
  background: var(--osc-table-row-alt-background);
}

.osc-style-scope .markdown-preview-view :not(pre) > code,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-codeblock) .cm-inline-code {
  background-color: var(--osc-code-background);
  color: var(--osc-code-color);
  font-family: var(--osc-code-font-family);
}

.osc-style-scope .markdown-rendered pre,
.osc-style-scope .markdown-rendered pre code,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-codeblock,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-codeblock-bg {
  background-color: var(--osc-code-block-background);
}

.osc-style-scope .markdown-rendered pre,
.osc-style-scope .markdown-rendered pre code,
.osc-style-scope .markdown-source-view.mod-cm6 .cm-code,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-codeblock,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-codeblock-bg {
  color: var(--osc-code-block-color);
  font-family: var(--osc-code-block-font-family);
}

.osc-style-scope .markdown-preview-view blockquote,
.osc-style-scope .markdown-source-view.mod-cm6 .HyperMD-quote {
  background: var(--osc-blockquote-background);
  border-color: var(--osc-blockquote-border-color);
}

.osc-style-scope.style-controller-image-align-left .markdown-preview-view .image-embed,
.osc-style-scope.style-controller-image-align-left .markdown-source-view.mod-cm6 .image-embed {
  display: block;
  text-align: left;
}

.osc-style-scope.style-controller-image-align-center .markdown-preview-view .image-embed,
.osc-style-scope.style-controller-image-align-center .markdown-source-view.mod-cm6 .image-embed {
  display: block;
  text-align: center;
}

.osc-style-scope.style-controller-image-align-right .markdown-preview-view .image-embed,
.osc-style-scope.style-controller-image-align-right .markdown-source-view.mod-cm6 .image-embed {
  display: block;
  text-align: right;
}

.osc-style-scope.style-controller-image-align-left .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-left .markdown-source-view.mod-cm6 .image-embed > img,
.osc-style-scope.style-controller-image-align-center .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-center .markdown-source-view.mod-cm6 .image-embed > img,
.osc-style-scope.style-controller-image-align-right .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-right .markdown-source-view.mod-cm6 .image-embed > img {
  display: block;
}

.osc-style-scope.style-controller-image-align-left .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-left .markdown-source-view.mod-cm6 .image-embed > img {
  margin-left: 0;
  margin-right: auto;
}

.osc-style-scope.style-controller-image-align-center .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-center .markdown-source-view.mod-cm6 .image-embed > img {
  margin-left: auto;
  margin-right: auto;
}

.osc-style-scope.style-controller-image-align-right .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-align-right .markdown-source-view.mod-cm6 .image-embed > img {
  margin-left: auto;
  margin-right: 0;
}

.osc-style-scope.style-controller-image-width.style-controller-respect-explicit-image-size .markdown-preview-view .image-embed > img:not([width]):not([height]):not([style*="width"]):not([style*="height"]),
.osc-style-scope.style-controller-image-width.style-controller-respect-explicit-image-size .markdown-source-view.mod-cm6 .image-embed > img:not([width]):not([height]):not([style*="width"]):not([style*="height"]),
.osc-style-scope.style-controller-image-width.style-controller-ignore-explicit-size .markdown-preview-view .image-embed > img,
.osc-style-scope.style-controller-image-width.style-controller-ignore-explicit-size .markdown-source-view.mod-cm6 .image-embed > img {
  width: var(--osc-image-width);
}

.osc-style-scope .callout {
  --callout-border-width: var(--style-controller-callout-border-width);
  --callout-radius: var(--style-controller-callout-radius);
  --callout-title-size: var(--style-controller-callout-title-size);
}

.osc-style-scope .callout-title-inner {
  font-family: var(--style-controller-callout-title-font-family);
}

.osc-style-scope div[data-callout="multi-column"].callout > .callout-content > *:is(div, ul, blockquote, p) {
  border: var(--style-controller-callout-multi-column-border);
}

.style-controller-file-explorer-target {
  font-family: var(--style-controller-file-explorer-font-family);
  font-weight: var(--style-controller-file-explorer-font-weight);
  --nav-item-color-hover: var(--style-controller-file-explorer-hover-color);
  --nav-item-background-hover: var(--style-controller-file-explorer-hover-background);
  --nav-item-background-active: var(--style-controller-file-explorer-active-background);
  --background-modifier-border-focus: var(--style-controller-file-explorer-focus-border-color);
}

.style-controller-file-explorer-folder {
  color: var(--style-controller-file-explorer-folder-color);
  --nav-collapse-icon-color: var(--style-controller-file-explorer-collapse-icon-color);
  --nav-indentation-guide-color: var(--style-controller-file-explorer-indent-line-color);
}

.style-controller-file-explorer-file {
  color: var(--style-controller-file-explorer-file-color);
}

.style-controller-file-explorer-file::before {
  content: attr(data-style-controller-prefix);
  margin-right: 0.25em;
}

.osc-base-preview {
  background: var(--osc-preview-background);
  color: var(--osc-preview-color);
  font-family: var(--osc-preview-font-family);
  font-size: var(--osc-preview-font-size);
  font-weight: var(--osc-preview-font-weight);
  line-height: var(--osc-preview-line-height);
}

.osc-base-preview strong {
  color: var(--osc-preview-bold-color);
  font-family: var(--osc-preview-bold-font-family);
  font-weight: var(--osc-preview-bold-font-weight);
}

.osc-base-preview em {
  color: var(--osc-preview-italic-color);
  font-family: var(--osc-preview-italic-font-family);
  font-weight: var(--osc-preview-italic-font-weight);
}

.osc-heading-preview [class*="osc-heading-preview-h"] {
  color: var(--osc-preview-heading-color);
  font-family: var(--osc-preview-heading-font-family);
  font-size: var(--osc-preview-heading-font-size);
  font-weight: var(--osc-preview-heading-font-weight);
}

.osc-rich-preview .osc-preview-table th {
  background: var(--osc-preview-table-header-background);
  color: var(--osc-preview-table-header-color);
  border-color: var(--osc-preview-table-border-color);
}

.osc-rich-preview .osc-preview-table td {
  border-color: var(--osc-preview-table-border-color);
}

.osc-rich-preview .osc-preview-table tbody tr:nth-child(even),
.osc-rich-preview .osc-preview-table-row {
  background: var(--osc-preview-table-row-alt-background);
}

.osc-rich-preview blockquote {
  background: var(--osc-preview-blockquote-background);
  border-color: var(--osc-preview-blockquote-border-color);
}

.style-controller-confirm-message {
  margin-bottom: 12px;
}