.view-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--switch-border,#d8dfe9);border-radius:999px;background:var(--switch-bg,#f0f3f8);font-family:Arial,Helvetica,sans-serif;font-size:.875rem;line-height:1.3}
.view-switch a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:10px 15px;border-radius:999px;color:var(--switch-text,#505c6e);text-decoration:none;white-space:nowrap}
.view-switch a[aria-current=page]{background:var(--switch-active,#111b2c);color:var(--switch-active-text,#fff)}
.view-switch a:hover{box-shadow:inset 0 0 0 1px var(--switch-border,#d8dfe9)}
.view-switch a:focus-visible{outline:3px solid #d97b00;outline-offset:4px}
@media(max-width:620px){.view-switch{width:100%}.view-switch a{flex:1;padding-inline:10px}}

/* Both views reserve the same header slot for the audience selector. */
/* The client navigation swaps content only after its styles and modules are ready. */
@keyframes audience-content-in {
  from { opacity: .72; }
  to { opacity: 1; }
}
main.audience-content-enter {
  animation: audience-content-in 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  main.audience-content-enter {
    animation: none;
  }
}
@media screen {
  html {
    --audience-header-height: 91px;
    scroll-padding-top: calc(var(--audience-header-height) + 16px);
    scrollbar-gutter: stable;
  }
  .audience-header:is(.header, .dev-header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 266px minmax(0, 1fr);
    grid-template-rows: 50px;
    align-items: center;
    gap: 0 24px;
    width: 100%;
    max-width: none;
    min-height: var(--audience-header-height);
    margin: 0;
    padding: 20px 30px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg, var(--paper));
  }
  .audience-header > :is(.brand, .dev-brand) {
    grid-area: 1 / 1;
    justify-self: start;
    white-space: nowrap;
  }
  .audience-header:is(.header, .dev-header) > .view-switch {
    grid-area: 1 / 2;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 266px;
    height: 50px;
    margin: 0;
    padding: 4px;
    order: initial;
    font-size: .875rem;
    font-weight: 400;
  }
  .audience-header > .view-switch a {
    min-width: 0;
    height: 40px;
    padding: 10px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.3;
  }
  .audience-header.header > nav:not(.view-switch),
  .audience-header > .palette-trigger {
    grid-area: 1 / 3;
    justify-self: end;
    margin: 0;
    order: initial;
  }
  .audience-header.header > nav:not(.view-switch) {
    width: auto;
    border: 0;
    padding: 0;
    gap: 22px;
    white-space: nowrap;
  }
}
@media screen and (max-width:1100px) {
  html { --audience-header-height: 139px; }
  .audience-header:is(.header, .dev-header) {
    grid-template-columns: minmax(0, 1fr) 266px;
    grid-template-rows: 50px 44px;
    gap: 12px 24px;
    padding: 16px 24px;
  }
  .audience-header.header > nav:not(.view-switch),
  .audience-header > .palette-trigger { grid-area: 2 / 1 / 3 / -1; }
}
@media screen and (max-width:620px) {
  .audience-header:is(.header, .dev-header) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 50px;
    padding-inline: 16px;
    gap: 12px;
  }
  .audience-header:is(.header, .dev-header) > .view-switch {
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
  }
  .audience-header > .palette-trigger { grid-area: 1 / 2; }
  .audience-header.header > nav:not(.view-switch) {
    grid-area: 3 / 1 / 4 / -1;
    justify-self: center;
    min-height: 44px;
    align-items: center;
    gap: 22px;
  }
  html.professional-view { --audience-header-height: 195px; }
}
@media screen and (min-width:781px) {
  .explorer {
    top: var(--audience-header-height);
    height: calc(100vh - var(--audience-header-height));
  }
}