:root {
  --background-primary: #151515;
  --background-primary-alt: #1a1a1a;
  --background-secondary: #1e1e1e;
  --background-secondary-alt: #252525;
  --background-modifier-border: #2a2a2a;
  --background-modifier-form-field: #1a1a1a;
  --background-modifier-cover: rgba(21, 21, 21, 0.8);
  --text-normal: #dcddde;
  --text-muted: #999;
  --text-faint: #666;
  --text-on-accent: #dcddde;
  --interactive-normal: #2a2a2a;
  --interactive-hover: #333;
  --interactive-accent: #4a9eff;
  --interactive-accent-hover: #5aabff;
  --link-color: #4a9eff;
  --link-external-color: #4a9eff;
  --tag-background: #2a2a2a;
  --tag-color: #dcddde;
  --sidebar-left-background: #151515;
  --sidebar-left-border-color: #2a2a2a;
}

.theme-dark {
  --color-base-00: #151515;
  --color-base-20: #1a1a1a;
  --color-base-25: #222222;
  --color-base-30: #2a2a2a;
  --color-base-35: #333;
}

.theme-dark img[src*=lucide],
.theme-dark img[src*=obsidian-icon] {
  filter: invert(1);
}

body {
  background-color: #151515;
  color: #dcddde;
}

.published-container {
  --code-border-width: 1px;
  --table-row-alt-background: var(--background-primary-alt);
  --table-row-alt-background-hover: var(--background-primary-alt);
  background-color: #151515;
}

.site-header,
.site-body,
.site-footer {
  background-color: #151515;
}

.site-body-left-column-site-logo {
  text-align: left;
  margin-bottom: 24px;
}

.site-body-left-column-site-logo img {
  height: 25px;
}

.theme-light .site-body-left-column-site-logo {
  filter: invert(1) hue-rotate(180deg);
}

.site-header-logo {
  display: flex;
  align-items: center;
}

.site-header-logo img {
  height: 25px;
}

.theme-light .site-header-logo {
  filter: invert(1) hue-rotate(180deg);
}

.site-body-left-column-site-name {
  display: none;
}

.nav-view-outer {
  background-color: #151515;
}

.markdown-preview-view {
  background-color: #151515;
}

.search-input-container input {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
  color: #dcddde;
}

h1, h2, h3, h4, h5, h6 {
  color: #e0e0e0;
}

a {
  color: #4a9eff;
}

code {
  background-color: #1e1e1e;
  color: #dcddde;
}

pre {
  background-color: #1e1e1e;
  border-color: #2a2a2a;
}

blockquote {
  border-left-color: #4a9eff;
  background-color: #1a1a1a;
}

hr {
  border-color: #2a2a2a;
}

table {
  border-color: #2a2a2a;
}

th {
  background-color: #1e1e1e;
}

td {
  border-color: #2a2a2a;
}

img {
  border-radius: 4px;
}

/* Icon alignment */
span[src$="#icon"] img,
img[src$="#icon"] {
  vertical-align: text-bottom;
  margin-left: -0.1em;
  margin-right: -0.1em;
  border: none;
  border-radius: 0;
}

/* Compatibility callout */
.callout[data-callout="compatibility"] {
  --callout-icon: lucide-monitor-check;
  --callout-color: var(--color-purple-rgb);
}

/* Interface image embeds */
span.image-embed.is-loaded[src$="#interface"],
span.video-embed[src$="#interface"] {
  box-shadow: 0 0.5px 0.9px rgba(0, 0, 0, 0.021),
    0 1.3px 2.5px rgba(0, 0, 0, 0.03),
    0 3px 6px rgba(0, 0, 0, 0.039),
    0 10px 20px rgba(0, 0, 0, 0.06);
  margin: 2em 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  position: relative;
  display: block;
  width: fit-content;
}

span[src$="#interface"]:before {
  position: absolute;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  z-index: 10;
  border-radius: var(--radius-m);
}

span[src$="#interface"] video {
  margin: 0;
  vertical-align: bottom;
}

span[src$="#interface"] img,
img[src$="#interface"] {
  margin: 0;
  vertical-align: bottom;
  border-radius: var(--radius-m);
}

span[src$="#outline"] img,
img[src$="#outline"] {
  border: 1px solid var(--background-modifier-border);
}

/* Hide title cssclass */
.hide-title .page-header {
  display: none;
}

.hide-title.markdown-preview-view div:nth-child(4) h1 {
  margin-top: 0.25em;
  font-variant: var(--page-title-variant);
  letter-spacing: -0.015em;
  line-height: var(--page-title-line-height);
  font-size: var(--page-title-size);
  color: var(--page-title-color);
  font-weight: var(--page-title-weight);
  font-style: var(--page-title-style);
  font-family: var(--page-title-font);
  border: none;
}

/* List cards cssclass */
.list-cards {
  --list-cards-template: repeat(2, minmax(0, 1fr));
}

.list-cards div > ul {
  --link-color: var(--text-normal);
  --link-unresolved-color: var(--text-muted);
  --link-decoration: none;
  --link-decoration-hover: none;
  --link-external-color: var(--text-normal);
  --link-external-decoration: none;
  --link-external-decoration-hover: none;
  display: grid;
  gap: 8px;
  grid-template-columns: var(--list-cards-template);
  padding: 0;
}

.list-cards ul > li {
  margin-inline: 0;
}

.list-cards div > ul > li {
  display: flex;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-base-25);
  flex-wrap: wrap;
  margin-inline: 0;
}

.list-cards div > ul > li a {
  flex-grow: 1;
  padding: 16px;
  font-weight: var(--font-semibold);
  background: none;
}

.list-cards div > ul > li a:after {
  content: "";
  flex-basis: 100%;
  height: 0;
}

.list-cards div > ul > li a:hover {
  border-color: var(--color-base-35);
}

.list-cards div > ul ul {
  display: block;
  width: 100%;
  color: var(--text-muted);
  font-size: var(--font-smaller);
  margin-top: -8px;
  padding: 0 16px 16px;
}

.list-cards div > ul ul > li {
  display: block;
  margin-inline-start: 0;
}

.theme-dark .list-cards div ul > li {
  background-color: var(--background-secondary);
}

/* Soft embeds cssclass */
.soft-embed .markdown-embed-link,
.soft-embed .file-embed-link {
  display: none;
}

.soft-embed .markdown-embed {
  border-right: none;
  border-left: none;
  border-radius: var(--radius-l);
  position: relative;
  padding: 0;
}

.soft-embed .markdown-embed h2 {
  font-size: var(--h3-size);
}

.soft-embed .markdown-embed h3 {
  font-size: var(--h4-size);
}

.soft-embed .markdown-embed .markdown-embed-content {
  max-height: unset;
  overflow: unset;
}

.soft-embed .markdown-embed .markdown-embed-content > .markdown-preview-view {
  overflow-y: unset;
}

.soft-embed .markdown-embed .markdown-rendered blockquote {
  border-left: none;
  padding: 0;
}

/* Dropdown styling */
.dropdown {
  height: var(--input-height);
  font-size: var(--font-ui-small);
  font-family: inherit;
  font-weight: var(--input-font-weight);
  color: var(--text-normal);
  line-height: var(--line-height-tight);
  padding: 0 1.9em 0 0.8em;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  box-shadow: var(--input-shadow);
  border-radius: var(--input-radius);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--interactive-normal);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}

.dropdown:hover {
  box-shadow: var(--input-shadow-hover);
  background-color: var(--interactive-hover);
}

.dropdown:focus {
  box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
  outline: none;
}

.theme-dark .dropdown {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"%3E%3Cpath fill="%23FFF" opacity="0.4" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/%3E%3C/svg%3E');
}

/* Mobile tab switcher */
.mobile-navbar-tabs-action {
  align-items: center;
  border-radius: var(--clickable-icon-radius);
  border: 2px solid var(--icon-color);
  display: flex;
  font-size: calc(var(--icon-size) * 0.6);
  font-weight: var(--bold-weight);
  justify-content: center;
  height: 20px;
  width: var(--icon-size);
}

@media screen and (max-width: 750px) {
  .site-header-text {
    display: none;
  }
  .list-cards.list-cards-mobile-full {
    --list-cards-template: repeat(1, minmax(0, 1fr));
  }
}
