:root {
  --sidebar-width: 232px;
  --lpe-chrome-bg: #171717;
  --lpe-header-bg: #101010;
  --lpe-chrome-text: #ececec;
  --lpe-chrome-muted: #b4b4b4;
  --lpe-chrome-label: #8b8b8b;
  --lpe-chrome-line: rgba(255, 255, 255, 0.1);
  --lpe-chrome-hover: rgba(255, 255, 255, 0.075);
}
.lpe-sidebar [hidden] {
  display: none !important;
}

body[data-theme="light"] {
  --lpe-chrome-bg: #ffffff;
  --lpe-header-bg: #ffffff;
  --lpe-chrome-text: #1c2140;
  --lpe-chrome-muted: #5b6381;
  --lpe-chrome-label: #7b83a0;
  --lpe-chrome-line: rgba(34, 43, 89, 0.14);
  --lpe-chrome-hover: rgba(88, 101, 242, 0.09);
}

body[data-theme="sunset"] {
  --lpe-chrome-bg: rgba(31, 25, 54, 0.9);
  --lpe-header-bg: rgba(27, 25, 51, 0.88);
  --lpe-chrome-text: #fff7f1;
  --lpe-chrome-muted: #dec8d3;
  --lpe-chrome-label: #c5a9bd;
  --lpe-chrome-line: rgba(255, 220, 205, 0.16);
  --lpe-chrome-hover: rgba(255, 181, 153, 0.1);
}

.lpe-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-width);
  padding: 20px 12px;
  color: var(--lpe-chrome-text);
  background: var(--lpe-chrome-bg);
  border-right: 1px solid var(--lpe-chrome-line);
  transform: translateX(-100%);
  transition: transform 0.24s ease;
  font-family:
    Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lpe-sidebar,
.lpe-sidebar * {
  box-sizing: border-box;
}
.lpe-sidebar.is-open {
  transform: translateX(0);
}
.lpe-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--lpe-chrome-line);
  color: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.lpe-sidebar-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.lpe-sidebar-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lpe-sidebar-scroll::-webkit-scrollbar {
  display: none;
}
.lpe-sidebar-group {
  margin: 0;
}
.lpe-sidebar-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 2px;
  padding: 10px 12px 4px;
  color: var(--lpe-chrome-label);
  background: none;
  border: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lpe-sidebar-label:hover {
  color: var(--lpe-chrome-text);
}
.lpe-sidebar-label svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.lpe-sidebar-group.is-collapsed > .lpe-sidebar-label svg {
  transform: rotate(-90deg);
}
.lpe-sidebar-group.is-collapsed > .lpe-sidebar-nav {
  display: none;
}
.lpe-sidebar-group[data-active="true"] > .lpe-sidebar-label {
  color: var(--lpe-chrome-text);
}
.lpe-sidebar-nav {
  display: grid;
  gap: 5px;
  margin: 4px 0 8px;
  padding: 0;
  color: inherit;
  font: inherit;
}
.lpe-sidebar .lpe-sidebar-nav > a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--lpe-chrome-muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}
.lpe-sidebar-nav a:hover {
  color: var(--lpe-chrome-text);
  background: var(--lpe-chrome-hover);
}
.lpe-sidebar-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(88, 101, 242, 0.24);
  box-shadow: inset 3px 0 #7c87ff;
}
.lpe-sidebar-nav a[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
body[data-theme="light"] .lpe-sidebar-nav a[aria-current="page"] {
  color: #3542a5;
  background: rgba(88, 101, 242, 0.18);
  box-shadow: inset 3px 0 #5865f2;
}
.lpe-sidebar-nav svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.lpe-sidebar-nav .external-mark {
  width: 13px;
  height: 13px;
  margin-left: auto;
  opacity: 0.55;
}
.lpe-sidebar-meta {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
  padding: 18px 10px 2px;
  border-top: 1px solid var(--lpe-chrome-line);
  color: var(--lpe-chrome-label);
  font-size: 0.66rem;
  line-height: 1.6;
  white-space: nowrap;
}
.lpe-sidebar-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--lpe-chrome-text);
  background: var(--lpe-chrome-bg);
  border: 1px solid var(--lpe-chrome-line);
  border-radius: 9px;
  cursor: pointer;
}
.lpe-sidebar-toggle svg {
  width: 21px;
  height: 21px;
}
.lpe-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(3, 5, 15, 0.66);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}
.lpe-sidebar-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
body.sidebar-open {
  overflow: hidden;
}

@media (min-width: 1100px) {
  body {
    padding-left: var(--sidebar-width);
  }
  .lpe-sidebar {
    transform: none;
  }
  .lpe-sidebar-toggle,
  .lpe-sidebar-backdrop {
    display: none;
  }
}

@media (max-width: 1099px) {
  .lpe-header,
  .site-header,
  body > header {
    padding-left: 68px !important;
  }
}

@media (max-width: 520px) {
  .lpe-sidebar-toggle {
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
  }
  .lpe-sidebar {
    width: min(232px, calc(100vw - 48px));
  }
}