#observablehq-main:has(.es-platform),
#observablehq-main:has(.es-platform) #observablehq-center,
#observablehq-main:has(.es-platform) .observablehq {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#observablehq-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
}

.framework-header {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 16px;
  min-width: 0;
  padding: 0 8px;
  color: var(--ink);
}

.framework-brand,
.framework-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.framework-brand,
.framework-header a {
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.framework-header nav a {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.framework-header nav a:hover,
.framework-header nav a:focus-visible {
  background: var(--green-soft);
  color: var(--green);
}

.framework-signout {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.framework-signout:hover,
.framework-signout:focus-visible {
  background: var(--green-soft);
  color: var(--green);
  outline: none;
}

body:not(:has(.route-app[data-session="authenticated"])) .framework-signout {
  display: none;
}

.framework-home,
.framework-footer {
  color: var(--ink);
  font-weight: 800;
}

#observablehq-sidebar {
  border-right-color: var(--line);
  background: var(--surface);
}

#observablehq-sidebar > ol:first-child {
  padding: 12px 0 10px;
  border-bottom-color: var(--line);
}

#observablehq-sidebar > ol:first-child::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 82%, var(--charcoal)), var(--surface));
  border-bottom: 1px solid var(--line);
}

#observablehq-sidebar > ol:first-child > li > a {
  min-height: 42px;
  margin-left: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(16, 12, 9, 0.08);
}

#observablehq-sidebar > ol:first-child > li > a:hover,
#observablehq-sidebar > ol:first-child > li > a:focus-visible {
  background: var(--green-soft);
  color: var(--green);
  text-decoration: none;
}

.framework-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.framework-home::before {
  content: "ES";
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--charcoal);
  color: #f3eee6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.observablehq-link-active::before,
.observablehq-secondary-link-highlight {
  background: var(--green) !important;
}

#observablehq-sidebar > ol:first-child > li.observablehq-link-active::before {
  left: -0.5rem;
  border-radius: 0 999px 999px 0;
}

body:has(.route-app[data-session="loading"]) #observablehq-header,
body:has(.route-app[data-session="loading"]) #observablehq-sidebar-toggle,
body:has(.route-app[data-session="loading"]) #observablehq-sidebar-backdrop,
body:has(.route-app[data-session="loading"]) #observablehq-sidebar,
body:has(.route-app[data-session="loading"]) #observablehq-toc,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-header,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-sidebar-toggle,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-sidebar-backdrop,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-sidebar,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-toc {
  display: none !important;
}

body:has(.route-app[data-session="loading"]) #observablehq-main,
body:has(.route-app[data-session="loading"]) #observablehq-center,
body:has(.route-app[data-session="loading"]) .observablehq,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-main,
body:has(.route-app[data-session="unauthenticated"]) #observablehq-center,
body:has(.route-app[data-session="unauthenticated"]) .observablehq {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.route-app[data-shell="app"]) #observablehq-header,
body:has(.route-app[data-shell="app"]) #observablehq-sidebar-toggle,
body:has(.route-app[data-shell="app"]) #observablehq-sidebar-backdrop,
body:has(.route-app[data-shell="app"]) #observablehq-sidebar,
body:has(.route-app[data-shell="app"]) #observablehq-toc,
body:has(.route-app[data-shell="app"]) #observablehq-footer {
  display: none !important;
}

body:has(.route-app[data-shell="app"]) #observablehq-main,
body:has(.route-app[data-shell="app"]) #observablehq-center,
body:has(.route-app[data-shell="app"]) .observablehq {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}