.mexp[data-mdit-explorer] {
  --mexp-bg: #fff;
  --mexp-side: #f3f3f3;
  --mexp-hover: #e7e7e7;
  --mexp-active: #d9e8f7;
  --mexp-border: #d4d4d4;
  --mexp-text: #242424;
  --mexp-muted: #616161;
  --mexp-accent: #0078d4;
  --mexp-code: #fff;
  --mexp-scroll: #c1c1c1;
  background: var(--mexp-bg);
  border: 1px solid var(--mexp-border);
  border-radius: 6px;
  color: var(--mexp-text);
  display: grid;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  grid-template-columns: minmax(180px, 24%) minmax(0, 1fr);
  height: min(680px, 75vh);
  min-height: 380px;
  overflow: hidden;
  text-align: left;
}

.mexp[data-mdit-explorer] * {
  box-sizing: border-box;
}

.mexp[data-mdit-explorer].mexp--empty {
  display: block;
  height: auto;
  min-height: 0;
  padding: 16px;
}

.mexp[data-mdit-explorer] .mexp__sidebar {
  background: var(--mexp-side);
  border-right: 1px solid var(--mexp-border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.mexp[data-mdit-explorer] .mexp__side-title {
  color: var(--mexp-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 10px 14px 7px;
  text-transform: uppercase;
}

.mexp[data-mdit-explorer] .mexp__tree {
  display: block;
  overflow: auto;
  padding: 0 6px 12px;
  scrollbar-color: var(--mexp-scroll) transparent;
  scrollbar-width: thin;
}

.mexp[data-mdit-explorer] .mexp__group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mexp[data-mdit-explorer] .mexp__group .mexp__group {
  padding-left: 14px;
}

.mexp[data-mdit-explorer] .mexp__folder {
  align-items: center;
  display: flex;
  font-weight: 600;
  height: 24px;
  min-width: 0;
  padding: 0 5px;
  white-space: nowrap;
}

.mexp[data-mdit-explorer] .mexp__item {
  margin: 0;
  padding: 0;
}

.mexp[data-mdit-explorer] .mexp__file {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  height: 24px;
  min-width: 0;
  padding: 0 6px;
  text-align: left;
  width: 100%;
}

.mexp[data-mdit-explorer] .mexp__file:hover {
  background: var(--mexp-hover);
}

.mexp[data-mdit-explorer] .mexp__file[aria-selected="true"] {
  background: var(--mexp-active);
  color: var(--mexp-text);
}

.mexp[data-mdit-explorer] .mexp__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mexp[data-mdit-explorer] .mexp__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 16px;
  height: 16px;
  justify-content: center;
  margin-right: 5px;
  width: 16px;
}

.mexp[data-mdit-explorer] .mexp__icon svg {
  display: block;
  height: 14px;
  width: 14px;
}

.mexp[data-mdit-explorer] .mexp__folder > .mexp__icon { color: #d7a216; }
.mexp[data-mdit-explorer] .mexp__file > .mexp__icon { color: #6a737d; }
.mexp[data-mdit-explorer] .mexp__file:is([data-ext="cpp"], [data-ext="cc"], [data-ext="h"]) > .mexp__icon { color: #519aba; }
.mexp[data-mdit-explorer] .mexp__file[data-ext="md"] > .mexp__icon { color: #4169a1; }
.mexp[data-mdit-explorer] .mexp__file:is([data-ext="yml"], [data-ext="yaml"]) > .mexp__icon { color: #cb171e; }
.mexp[data-mdit-explorer] .mexp__file[data-ext="lua"] > .mexp__icon { color: #4c70ba; }

.mexp[data-mdit-explorer] .mexp__main {
  background: var(--mexp-code);
  display: grid;
  grid-template-rows: 36px 28px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.mexp[data-mdit-explorer] .mexp__tabbar {
  background: var(--mexp-side);
  border-bottom: 1px solid var(--mexp-border);
  display: flex;
  min-width: 0;
}

.mexp[data-mdit-explorer] .mexp__tab {
  align-items: center;
  background: var(--mexp-code);
  border-right: 1px solid var(--mexp-border);
  border-top: 1px solid var(--mexp-accent);
  display: flex;
  min-width: 0;
  padding: 0 12px;
}

.mexp[data-mdit-explorer] .mexp__tab-name,
.mexp[data-mdit-explorer] .mexp__crumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mexp[data-mdit-explorer] .mexp__crumbbar {
  align-items: center;
  border-bottom: 1px solid var(--mexp-border);
  color: var(--mexp-muted);
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 0 8px 0 12px;
}

.mexp[data-mdit-explorer] .mexp__actions {
  display: flex;
  margin-left: auto;
}

.mexp[data-mdit-explorer] .mexp__copy {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--mexp-muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  height: 24px;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: 28px;
}

.mexp[data-mdit-explorer] .mexp__copy:hover {
  background: var(--mexp-hover);
  color: var(--mexp-text);
}

.mexp[data-mdit-explorer] .mexp__copy svg {
  height: 15px;
  width: 15px;
}

.mexp[data-mdit-explorer] .mexp__copy::after {
  background: #252526;
  border-radius: 3px;
  color: #fff;
  content: attr(aria-label);
  font-size: 11px;
  opacity: 0;
  padding: 3px 6px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 28px;
  transform: translateY(-2px);
  transition: opacity .12s, transform .12s;
  white-space: nowrap;
  z-index: 3;
}

.mexp[data-mdit-explorer] .mexp__copy:hover::after,
.mexp[data-mdit-explorer] .mexp__copy:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.mexp[data-mdit-explorer] .mexp__views {
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.mexp[data-mdit-explorer] .mexp__view {
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  margin: 0;
  max-height: none;
  overflow: auto;
  padding: 0;
  scrollbar-color: var(--mexp-scroll) transparent;
  scrollbar-width: thin;
  tab-size: 4;
}

.mexp[data-mdit-explorer] .mexp__view[hidden] {
  display: none;
}

.mexp[data-mdit-explorer] .mexp__view--with-lines {
  grid-template-columns: max-content minmax(0, 1fr);
}

.mexp[data-mdit-explorer] .mexp__lines,
.mexp[data-mdit-explorer] .mexp__code {
  border: 0;
  border-radius: 0;
  font: 13px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  margin: 0;
  max-height: none;
  overflow: visible;
  white-space: pre;
}

.mexp[data-mdit-explorer] .mexp__lines {
  background: var(--mexp-code);
  border-right: 1px solid var(--mexp-border);
  color: var(--mexp-muted);
  min-height: 100%;
  padding: 12px 10px 12px 12px;
  position: sticky;
  left: 0;
  text-align: right;
  user-select: none;
  z-index: 1;
}

.mexp[data-mdit-explorer] .mexp__code {
  background: var(--mexp-code);
  box-shadow: none;
  color: inherit;
  min-width: max-content;
  padding: 12px 16px;
}

.mexp[data-mdit-explorer] .mexp__code code {
  border: 0;
  display: block;
  font: 13px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  min-width: max-content;
  padding: 0;
  white-space: pre;
}

@media (prefers-color-scheme: dark) {
  .mexp[data-mdit-explorer] {
    --mexp-bg: #1e1e1e;
    --mexp-side: #181818;
    --mexp-hover: #2a2d2e;
    --mexp-active: #37373d;
    --mexp-border: #2b2b2b;
    --mexp-text: #ccc;
    --mexp-muted: #9d9d9d;
    --mexp-code: #1e1e1e;
    --mexp-scroll: #424242;
  }
}

@media (max-width: 640px) {
  .mexp[data-mdit-explorer] {
    grid-template-columns: minmax(124px, 38%) minmax(0, 1fr);
    height: 70vh;
    min-height: 360px;
  }

  .mexp[data-mdit-explorer] .mexp__side-title { padding-left: 10px; }
  .mexp[data-mdit-explorer] .mexp__group .mexp__group { padding-left: 8px; }
  .mexp[data-mdit-explorer] .mexp__lines { padding: 10px 8px 10px 9px; }
  .mexp[data-mdit-explorer] .mexp__code { padding: 10px 12px; }
  .mexp[data-mdit-explorer] .mexp__tab { padding: 0 8px; }
}