body {
  /* Keep the rail tied to the viewport rather than the zoom-scaled root size.
     These values preserve the original rem-based sidebar proportions at the
     900px desktop reference viewport. */
  --primary-sidebar-collapsed-width: 8.25dvh;
  --primary-sidebar-expanded-width: 30.8dvh;
  --primary-sidebar-icon-size: 5dvh;
  --primary-sidebar-brand-icon-size: 3.11dvh;
  --primary-sidebar-toggle-icon-size: 3.34dvh;
  --primary-sidebar-gutter: .28dvh;
  --primary-sidebar-gap: .83dvh;
  --primary-sidebar-item-padding: .39dvh;
}

#primary-sidebar nav svg,
#primary-sidebar .primary-sidebar-utility-list svg {
  width: var(--primary-sidebar-icon-size);
  height: var(--primary-sidebar-icon-size);
  flex: 0 0 var(--primary-sidebar-icon-size);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#primary-sidebar .primary-sidebar-brand-icon {
  width: var(--primary-sidebar-brand-icon-size);
  height: var(--primary-sidebar-brand-icon-size);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#primary-sidebar .primary-sidebar-toggle svg {
  width: var(--primary-sidebar-toggle-icon-size);
  height: var(--primary-sidebar-toggle-icon-size);
  flex: 0 0 var(--primary-sidebar-toggle-icon-size);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#primary-sidebar > nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: hidden;
  margin-top: 0;
  padding-left: var(--primary-sidebar-gutter);
  padding-right: 0;
  border-bottom: 1px solid rgb(45 41 36 / 12%);
}

#primary-sidebar .primary-sidebar-utility {
  width: 100%;
  gap: var(--primary-sidebar-gutter);
  padding: 1.11dvh var(--primary-sidebar-gutter) 1.11dvh;
}

#primary-sidebar .primary-sidebar-utility-list {
  width: 100%;
  align-items: stretch;
}

#primary-sidebar .primary-sidebar-utility-list > li {
  width: 100%;
}

#primary-sidebar .primary-sidebar-utility-list .narrative-element-nav {
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: var(--primary-sidebar-gap);
  border-radius: .45rem;
  padding: .11dvh var(--primary-sidebar-item-padding);
  font-size: .56dvh;
  line-height: 1.5;
}

#primary-sidebar .primary-text-nav {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
}

#primary-sidebar .primary-text-nav > li {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  align-items: stretch;
}

#primary-sidebar .primary-text-nav > li + li {
  margin-top: 0;
}

#primary-sidebar .primary-text-nav .nav-chapters,
#primary-sidebar .primary-text-nav .nav-characters,
#primary-sidebar .primary-text-nav .nav-settings,
#primary-sidebar .primary-text-nav .nav-context,
#primary-sidebar .primary-text-nav .nav-symbols,
#primary-sidebar .primary-text-nav .nav-themes { order: 1; }
#primary-sidebar .primary-text-nav .nav-utility { order: 2; }

#primary-sidebar {
  width: var(--primary-sidebar-collapsed-width);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: hidden;
  background: #fbf8f4;
  border: 0;
  transition: width .18s ease;
}

#primary-sidebar[data-primary-sidebar-open="true"],
body[data-primary-sidebar-open="true"] #primary-sidebar {
  width: var(--primary-sidebar-expanded-width);
}

.desktop-content-shell {
  padding-left: 0;
}

#primary-sidebar [x-cloak] {
  display: none !important;
}

#primary-sidebar .primary-sidebar-brand {
  padding-left: var(--primary-sidebar-gap);
  padding-right: var(--primary-sidebar-gap);
}

#primary-sidebar .primary-sidebar-brand .primary-sidebar-toggle {
  margin: 0;
  border-top: 0;
  padding-top: 0;
}

#primary-sidebar .primary-sidebar-brand .primary-sidebar-user {
  margin: 0;
  padding: 0;
  border-top: 0;
}

#primary-sidebar .primary-sidebar-brand .primary-sidebar-user button,
#primary-sidebar .primary-sidebar-brand .primary-sidebar-user a {
  width: auto;
}

#primary-sidebar .primary-sidebar-brand a {
  justify-content: center;
}

#primary-sidebar a,
#primary-sidebar button {
  color: #2d2924;
}

#primary-sidebar .primary-text-nav > li > a,
#primary-sidebar .primary-text-nav > li > button {
  justify-content: flex-start;
  gap: var(--primary-sidebar-gap);
  border-radius: .45rem;
  padding: .11dvh .11dvh;
  font-size: .56dvh;
  line-height: 1.5;
}

#primary-sidebar .primary-text-nav > li > a:hover,
#primary-sidebar .primary-text-nav > li > a.bg-gray-100:hover,
#primary-sidebar .primary-text-nav > li > a.bg-indigo-100:hover {
  background: rgb(45 41 36 / 10%);
  color: #2d2924;
}

#primary-sidebar .primary-sidebar-toggle {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: .5dvh var(--primary-sidebar-gutter);
}

#primary-sidebar .primary-sidebar-toggle button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
  padding: .5dvh;
}

#primary-sidebar[data-primary-sidebar-open="true"] .primary-sidebar-toggle button,
body[data-primary-sidebar-open="true"] #primary-sidebar .primary-sidebar-toggle button {
  justify-content: flex-end;
}

#primary-sidebar .primary-sidebar-toggle button:hover,
#primary-sidebar .primary-sidebar-toggle button:focus-visible {
  background: rgb(45 41 36 / 10%);
}

#primary-sidebar .primary-sidebar-user button {
  width: 100%;
}

#primary-sidebar .primary-sidebar-user {
  width: 100%;
  margin: 0;
  padding-top: 0;
}

#primary-sidebar .primary-sidebar-user-dropdown {
  display: block;
  width: 100%;
}

#primary-sidebar .primary-sidebar-user button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  border-radius: .45rem;
  padding: .11dvh var(--primary-sidebar-item-padding);
}

#primary-sidebar .primary-sidebar-user button:hover,
#primary-sidebar .primary-sidebar-user button:focus-visible {
  background: rgb(45 41 36 / 10%);
}

#primary-sidebar .bg-gray-100,
#primary-sidebar .bg-indigo-100 {
  background: rgb(45 41 36 / 10%);
  color: #2d2924;
}

#primary-sidebar .primary-sidebar-menu {
  background: #fbf8f4;
  color: #2d2924;
}

#primary-sidebar .primary-text-nav .nav-utility-start {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgb(45 41 36 / 12%);
}

#primary-sidebar .primary-text-nav .nav-utility-start.review-needs-attention > a {
  background: rgb(219 234 254 / 78%);
  color: #2563eb;
  box-shadow: 0 0 0 1px rgb(59 130 246 / 38%), 0 0 14px rgb(59 130 246 / 48%);
}

#primary-sidebar .primary-text-nav .nav-utility-start.review-needs-attention > a:hover,
#primary-sidebar .primary-text-nav .nav-utility-start.review-needs-attention > a:focus-visible {
  background: rgb(191 219 254 / 88%);
  color: #1d4ed8;
}

#primary-sidebar .narrative-element-nav {
  position: relative;
}

#primary-sidebar .primary-nav-label {
  position: absolute;
  left: calc(100% + .65rem);
  z-index: 90;
  display: block;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  border-radius: .4rem;
  background: #2d2924;
  color: #fbf8f4;
  padding: .39dvh .61dvh;
  transition: opacity .12s ease;
  font-size: .56dvh;
  font-weight: 650;
  line-height: 1.5;
}

#primary-sidebar .narrative-element-nav:hover .primary-nav-label,
#primary-sidebar .narrative-element-nav:focus-visible .primary-nav-label,
#primary-sidebar .narrative-element-nav:focus-within .primary-nav-label {
  opacity: 1;
}

#primary-sidebar .narrative-element-nav,
#primary-sidebar .primary-text-nav > li > a,
#primary-sidebar .primary-text-nav > li > button {
  align-items: center;
  width: 100%;
  padding-left: var(--primary-sidebar-item-padding);
  padding-right: 0;
}

#primary-sidebar .primary-text-nav > li > a,
#primary-sidebar .primary-text-nav > li > button,
#primary-sidebar .primary-sidebar-utility-list .narrative-element-nav {
  width: calc(100% - 1.8dvh);
  margin-left: auto;
  margin-right: auto;
}

#primary-sidebar .primary-sidebar-user button {
  width: calc(100% - 1.8dvh);
  margin-left: auto;
  margin-right: auto;
}

#primary-sidebar .primary-sidebar-utility-list .narrative-element-nav {
  padding-right: 0;
}

#primary-sidebar .primary-text-nav {
  align-items: stretch;
  padding: 0;
}

#primary-sidebar .primary-text-nav > li {
  width: 100%;
}

#primary-sidebar[data-primary-sidebar-open="true"] .primary-nav-label,
body[data-primary-sidebar-open="true"] #primary-sidebar .primary-nav-label {
  position: static;
  display: inline;
  pointer-events: auto;
  opacity: 1;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  white-space: normal;
}

body[data-secondary-panel-open="true"] #primary-sidebar:not([data-primary-sidebar-open="true"]) .narrative-element-nav .primary-nav-label {
  opacity: 0;
}

#primary-sidebar[data-primary-sidebar-open="true"] .primary-text-nav > li > a,
#primary-sidebar[data-primary-sidebar-open="true"] .primary-sidebar-utility-list .narrative-element-nav,
body[data-primary-sidebar-open="true"] #primary-sidebar .primary-text-nav > li > a,
body[data-primary-sidebar-open="true"] #primary-sidebar .primary-sidebar-utility-list .narrative-element-nav {
  font-size: 1rem;
}

#primary-sidebar[data-primary-sidebar-open="true"] .primary-nav-label,
body[data-primary-sidebar-open="true"] #primary-sidebar .primary-nav-label {
  font-size: 1rem;
}

@media (min-width: 1024px) {
  #main-panel:has(.element-detail-magazine),
  #main-panel:has(.chapter-detail-paper) {
    padding-left: 1rem;
  }

  #primary-sidebar {
    display: flex;
  }

  main {
    zoom: 1.5;
  }

  .desktop-content-shell {
    padding-left: var(--primary-sidebar-collapsed-width);
    transition: padding-left .18s ease;
  }

  body[data-primary-sidebar-open="true"] .desktop-content-shell {
    padding-left: var(--primary-sidebar-expanded-width);
  }
}

@media (max-width: 1023px) {
  #primary-sidebar {
    display: none;
  }
}

#sidebar,
#sidebar > div,
#sidebar el-dialog-panel,
#sidebar .bg-white {
  background: #fbf8f4;
  color: #2d2924;
}

.mobile-narrative-tray {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-narrative-tray {
    display: block;
  }

  body:has(.mobile-narrative-tray) .desktop-content-shell {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  .mobile-narrative-tray {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(45 41 36 / 18%);
  background: rgb(251 248 244 / 96%);
    box-shadow: 0 -8px 24px rgb(45 41 36 / 12%);
    backdrop-filter: blur(12px);
  }

  .mobile-narrative-tray ul {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  .mobile-narrative-tray-item {
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    border-radius: .65rem;
    color: #2d2924;
    cursor: pointer;
    font-size: 0;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
  }

  .mobile-narrative-tray-item svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    stroke-width: 1.8;
  }

  .mobile-narrative-tray-item:hover,
  .mobile-narrative-tray-item:focus-visible,
  .mobile-narrative-tray-item.is-active {
    background: rgb(45 41 36 / 10%);
  }

  body:has(.mobile-narrative-tray) #sidebar nav {
    display: none;
  }

}