pre.hljs {
  margin: 0;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 1.5em;
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

/*
Visual Studio-like style based on original C# coloring
*/
.hljs-comment,
.hljs-quote,
.hljs-variable {
  color: var(--dag-code-comment-color, #008000);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: var(--dag-code-keyword-color, #00f);
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color: var(--dag-code-literal-color, #a31515);
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
  color: var(--dag-code-selector-color, #2b91af);
}

.hljs-doctag {
  color: var(--dag-code-doctag-color, #808080);
}

.hljs-attr {
  color: var(--dag-code-attr-color, #f00);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--dag-code-symbol-color, #00b0e8);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

:root {
  --dag-bg-color: #f7f8fa;
  --dag-sidebar-bg-color: #fcfeff;
  --dag-sidebar-text-color: #0c3354;
  --dag-navigation-text-color: #153d65;
  --dag-sidebar-gray: 105, 121, 152;
  --dag-navigation-bg-on: #153d65;
  --dag-navigation-fg-on: #f7f8fa;
  --dag-border-color: rgb(105, 121, 152);
  --dag-hover-bg: rgba(105, 121, 152, 0.2);
  --dag-node-label-color: #0c3354;
  --dag-selected-node-label-color: #fff;
  --dag-edge-color: #333;
  --dag-sqrl-icon-stroke: #153d65;
  --dag-sqrl-icon-fill: #a0c1e1;
  --dag-code-comment-color: #008000;
  --dag-code-keyword-color: #00f;
  --dag-code-literal-color: #a31515;
  --dag-code-selector-color: #2b91af;
  --dag-code-doctag-color: #808080;
  --dag-code-attr-color: #f00;
  --dag-code-symbol-color: #00b0e8;
  --dag-stage-default: #848484;
  --dag-stage-postgres: #2c6c8f;
  --dag-stage-flink: #8b3f3f;
  --dag-stage-vertx: #a46ee0;
  --dag-stage-iceberg: #2f7f6e;
  --dag-stage-kafka: #e0b36e;
  --dag-stage-snowflake: #4ba3c7;
  --dag-stage-duckdb: #f1ce63;
  --dag-sidebar-table-text-color: #0c3354;
  --dag-sidebar-table-border-color: rgb(105, 121, 152);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dag-bg-color: #1f2a33;
    --dag-sidebar-bg-color: #23262e;
    --dag-sidebar-text-color: #e4e6eb;
    --dag-navigation-text-color: #7ba3c7;
    --dag-navigation-bg-on: #2d5a7b;
    --dag-navigation-fg-on: #e4e6eb;
    --dag-border-color: #3d4250;
    --dag-hover-bg: rgba(255, 255, 255, 0.08);
    --dag-node-label-color: #fff;
    --dag-selected-node-label-color: #fff;
    --dag-edge-color: #8b9cb8;
    --dag-sqrl-icon-stroke: #fff;
    --dag-sqrl-icon-fill: #b3c5d3;
    --dag-code-comment-color: #6a9955;
    --dag-code-keyword-color: #569cd6;
    --dag-code-literal-color: #ce9178;
    --dag-code-selector-color: #4ec9b0;
    --dag-code-doctag-color: #808080;
    --dag-code-attr-color: #9cdcfe;
    --dag-code-symbol-color: #dcdcaa;
    --dag-sidebar-table-text-color: #fff;
    --dag-sidebar-table-border-color: #fff;
  }
}
.dag-graph {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--dag-bg-color);
}
.dag-graph .dag-graph-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dag-graph #sideinfo {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background-color: var(--dag-sidebar-bg-color, #fcfeff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--dag-font-family, system-ui, -apple-system, sans-serif);
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  color: var(--dag-sidebar-text-color, #0c3354);
  border-style: solid solid none none;
  border-width: 4px;
}
@media (min-width: 480px) and (max-width: 1023px) {
  .dag-graph #sideinfo {
    width: 300px;
  }
}
@media (min-width: 1024px) {
  .dag-graph #sideinfo {
    width: 400px;
  }
}
.dag-graph #info-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.dag-graph #info-content h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dag-graph textarea {
  white-space: pre;
  overflow: auto;
}
.dag-graph #navigation-search {
  min-width: 150px;
  width: auto;
  height: auto;
  position: relative;
  display: flex;
}
.dag-graph #navigation-search input {
  background-color: transparent;
  width: 100%;
  border: 2px solid var(--dag-navigation-text-color, #153d65);
  border-radius: var(--dag-radius-md, var(--radius-field, 0.5rem));
}
.dag-graph #navigation-search svg {
  color: var(--dag-navigation-text-color, #153d65);
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}
.dag-graph .border-horizontal {
  border-bottom: 1px solid var(--dag-border-color, rgb(105, 121, 152));
  border-top: 1px solid var(--dag-border-color, rgb(105, 121, 152));
}
.dag-graph .shadow-right {
  box-shadow: var(--dag-shadow-right, var(--shadow, 10px 10px 30px 0px rgba(0, 0, 0, 0.23)));
}
.dag-graph .shadow-left {
  box-shadow: var(--dag-shadow-left, var(--shadow, -10px 10px 30px 0px rgba(0, 0, 0, 0.23)));
}
.dag-graph .sideinfo-name {
  display: flex;
  flex-shrink: 0;
  background-color: var(--dag-bg-color, #f7f8fa);
  justify-content: center;
  position: relative;
  padding: 0 42px;
}
.dag-graph .sideinfo-name #close-info {
  color: inherit;
  cursor: pointer;
  display: block;
  padding: 6px;
  background-color: transparent;
  border: none;
  width: 32px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--dag-radius-md, var(--radius-field, 0.5rem));
  transition: background-color 0.2s ease;
}
.dag-graph .sideinfo-name #close-info:hover, .dag-graph .sideinfo-name #close-info:focus {
  background-color: var(--dag-hover-bg, rgba(105, 121, 152, 0.2));
}
.dag-graph #table-name {
  font-size: var(--dag-font-size-title, 1.17em);
  margin-block-start: 1em;
  margin-block-end: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dag-graph .sideinfo-documentation {
  text-align: left;
  display: block;
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  background-color: var(--dag-bg-color, #f7f8fa);
  padding: 12px;
  margin: 0;
}
.dag-graph .navigation {
  display: flex;
  gap: 15px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: var(--dag-bg-color, #f7f8fa);
  padding: 10px;
  border-radius: var(--dag-radius-lg, var(--radius-box, 0.5rem));
}
.dag-graph .navigation .navigation-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.dag-graph .navigation #streams {
  padding: 5px;
  border-radius: var(--dag-radius-sm, var(--radius-selector, 0.5rem));
  color: var(--dag-navigation-text-color, #153d65);
}
.dag-graph .navigation .nav-buttons {
  display: flex;
  gap: 10px;
}
.dag-graph .navigation .nav-buttons button {
  background-color: var(--dag-navigation-bg-on, #153d65);
  color: var(--dag-navigation-fg-on, #f7f8fa);
  padding: 0;
  border-radius: var(--dag-radius-md, var(--radius-field, 0.5rem));
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dag-graph .navigation .nav-buttons button:hover, .dag-graph .navigation .nav-buttons button:focus {
  opacity: 0.9;
}
.dag-graph .navigation #settings {
  position: relative;
}
.dag-graph .navigation .settings-popup {
  position: absolute;
  display: flex;
  top: 0;
  transform: translateY(calc(-8px - 100%));
  cursor: default;
  background-color: var(--dag-bg-color, #f7f8fa);
  border: 2px solid var(--dag-navigation-text-color, #153d65);
  border-radius: var(--dag-radius-md, var(--radius-field, 0.5rem));
  padding: 0.5rem;
  color: var(--dag-navigation-text-color, #153d65);
  min-width: 172px;
}
.dag-graph .navigation .settings-popup > label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dag-graph .navigation .settings-popup input {
  cursor: pointer;
  margin-right: 0.5rem;
}
.dag-graph .sqrl-link {
  width: 64px;
  display: inline-flex;
  align-items: flex-end;
}
.dag-graph .sqrl-link .data-sqrl-icon {
  width: 100%;
  height: auto;
  color: var(--dag-sqrl-icon-stroke, #153d65);
}
.dag-graph .sqrl-link .data-sqrl-icon-fill {
  fill: var(--dag-sqrl-icon-fill, #a0c1e1);
}
.dag-graph .stage-item {
  font-family: var(--dag-font-family, system-ui, -apple-system, sans-serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dag-graph .stage-item .box {
  opacity: 0.9;
  width: 1em;
  height: 1em;
  border-radius: var(--dag-radius-md, var(--radius-field, 0.5rem));
}
.dag-graph #info-content li {
  display: flex;
  justify-content: space-between;
}
.dag-graph #info-content .name {
  display: flex;
  gap: 10px;
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  overflow: hidden;
}
.dag-graph #info-content .name .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.dag-graph #info-content .name > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dag-graph #info-content .icons {
  display: flex;
  gap: 10px;
}
.dag-graph #info-content .icons div {
  width: 20px;
  height: 20px;
}
.dag-graph #plan-button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--dag-font-size-title, 1.17em);
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding: 0;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.dag-graph #plan-button svg {
  transition: transform 0.2s ease;
  width: 20px;
}
.dag-graph #plan-content p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dag-graph .plan__icons-container {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dag-graph .plan__icons-container svg {
  height: 100%;
}
.dag-graph .plan__icon--small {
  height: 1em;
  width: 1em;
}
.dag-graph .sideinfo-section {
  padding: 12px;
}
.dag-graph .sideinfo-section textarea {
  width: 100%;
}
.dag-graph .sideinfo-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--dag-sidebar-table-text-color, var(--dag-sidebar-text-color, #0c3354));
}
.dag-graph .sideinfo-table td {
  padding: 4px;
  border: 1px solid var(--dag-sidebar-table-border-color, var(--dag-border-color, rgb(105, 121, 152)));
}
.dag-graph .rotate-90 {
  transform: rotate(90deg);
}
.dag-graph .cls-1 {
  isolation: isolate;
}
.dag-graph .cls-2 {
  opacity: 0.49;
}
.dag-graph .cls-16,
.dag-graph .cls-17,
.dag-graph .cls-19,
.dag-graph .cls-3 {
  fill: #dd6628;
}
.dag-graph .cls-14,
.dag-graph .cls-4 {
  fill: #600;
}
.dag-graph .cls-15,
.dag-graph .cls-4 {
  opacity: 0.17;
}
.dag-graph .cls-5 {
  fill: #fef7d7;
}
.dag-graph .cls-6 {
  fill: #dc9a6a;
}
.dag-graph .cls-7 {
  fill: #976a49;
}
.dag-graph .cls-8 {
  fill: #9b6d28;
}
.dag-graph .cls-9 {
  fill: #74401b;
}
.dag-graph .cls-10 {
  fill: #eb7a8b;
}
.dag-graph .cls-11 {
  fill: #fff;
}
.dag-graph .cls-12 {
  fill: #231f20;
}
.dag-graph .cls-13 {
  fill: #70574b;
}
.dag-graph .cls-14 {
  opacity: 0.23;
}
.dag-graph .cls-16,
.dag-graph .cls-17,
.dag-graph .cls-19 {
  mix-blend-mode: color-dodge;
}
.dag-graph .cls-16 {
  opacity: 0.47;
}
.dag-graph .cls-17 {
  opacity: 0.75;
}
.dag-graph .cls-18 {
  fill: #502c13;
}
.dag-graph .cls-19 {
  opacity: 0.29;
}

.dag-table-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--dag-sidebar-bg-color, #fcfeff);
  font-family: var(--dag-font-family, system-ui, -apple-system, sans-serif);
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  color: var(--dag-sidebar-text-color, #0c3354);
  border: 1px solid var(--dag-border-color, rgb(105, 121, 152));
}
.dag-table-card .dag-table-card-header {
  display: flex;
  flex-shrink: 0;
  background-color: var(--dag-bg-color, #f7f8fa);
  justify-content: center;
  padding: 0 12px;
}
.dag-table-card .dag-table-card-title {
  font-size: var(--dag-font-size-title, 1.17em);
  margin-block-start: 1em;
  margin-block-end: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dag-table-card .dag-table-card-documentation {
  text-align: left;
  display: block;
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  background-color: var(--dag-bg-color, #f7f8fa);
  padding: 12px;
  margin: 0;
}
.dag-table-card .dag-table-card-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
.dag-table-card .dag-table-card-content ul {
  list-style: none;
  padding: 12px;
  margin: auto;
}
.dag-table-card .dag-table-card-content .border-horizontal {
  border-bottom: 1px solid var(--dag-border-color, rgb(105, 121, 152));
  border-top: 1px solid var(--dag-border-color, rgb(105, 121, 152));
}
.dag-table-card .dag-table-card-content li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dag-table-card .dag-table-card-content .name {
  display: flex;
  gap: 10px;
  font-size: var(--dag-font-size-base, 16px);
  line-height: var(--dag-line-height-base, 24px);
  overflow: hidden;
  min-width: 0;
  flex: 1;
}
.dag-table-card .dag-table-card-content .name .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.dag-table-card .dag-table-card-content .name > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dag-table-card .dag-table-card-content .icons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.dag-table-card .dag-table-card-content .icons div {
  width: 20px;
  height: 20px;
}