/* Floating pearl navigation, scoped to the illustrated app header. */
.header.wrap.site-header-overlay {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto auto;
  grid-template-areas: "brand navigation actions accessibility";
  align-items: center;
  gap: 16px;
  height: auto;
  min-height: 118px;
  padding: 14px 24px;
  border: 2px solid #fff;
  border-radius: 34px;
  background: linear-gradient(115deg, #f0fcfff2, #fffaf6f5 45%, #f3eafff5);
  box-shadow: 0 6px 0 #9c78ba30, 0 15px 35px #31527524, inset 0 0 0 4px #ffffff85;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header-overlay::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid #fff;
  border-radius: 28px;
  pointer-events: none;
}
.header.site-header-overlay .brand.brand-logo { grid-area: brand; width: 176px; max-width: 100%; }
.site-header-overlay > nav { grid-area: navigation; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.header.site-header-overlay > nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 7px 10px; border-radius: 24px;
  font: 600 17px/1.35 'Fredoka', Arial, sans-serif;
  color: #55416e; text-decoration: none;
}
.header.site-header-overlay > nav a:hover { background: #e9ddf8; color: #49315f; }
.header.site-header-overlay .header-actions { grid-area: actions; display: flex; gap: 10px; min-width: 0; }
.header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 49px; margin: 0; padding: 10px 17px;
  border: 2px solid #fff; border-radius: 25px;
  font: 600 18px/1.3 'Fredoka', Arial, sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.header.site-header-overlay .parent-link {
  color: #573775;
  background: linear-gradient(145deg, #f5eaff, #ddc6f5);
  box-shadow: 0 4px 0 #b69bcd, inset 0 1px 0 #fff;
}
.header.site-header-overlay .stars-pill {
  color: #694617;
  background: linear-gradient(145deg, #fff7c9, #ffe18b);
  box-shadow: 0 4px 0 #c9aa56, inset 0 1px 0 #fff;
  gap: 5px; padding-inline: 13px;
}
.header.site-header-overlay .header-star-caption { font-size: 17px; font-weight: 600; }
.header.site-header-overlay > .accessibility-statement-link {
  grid-area: accessibility;
  color: #28546a;
  background: linear-gradient(145deg, #f1fdff, #c8eaf3);
  box-shadow: 0 4px 0 #9fc8d5, inset 0 1px 0 #fff;
  font-size: 17px; padding-inline: 14px;
}
.site-header-overlay :is(.parent-link,.accessibility-statement-link) svg { width: 23px; height: 23px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header-overlay .stars-pill svg { width: 22px; height: 22px; flex-shrink: 0; }
.header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link):hover { transform: translateY(-2px); }
.header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link):active { transform: translateY(2px); }
@media (max-width: 1100px) {
  .header.wrap.site-header-overlay { grid-template-columns: 164px 1fr auto; grid-template-areas: "brand actions accessibility"; gap: 18px; }
  .header.site-header-overlay > nav { display: none; }
  .header.site-header-overlay .header-actions { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .header.wrap.site-header-overlay {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas: "brand actions" "brand accessibility";
    gap: 10px 12px; min-height: 132px; padding: 15px 14px 18px;
    border-radius: 30px;
  }
  .header.site-header-overlay .brand.brand-logo { width: 132px; }
  .header.site-header-overlay .header-actions { gap: 7px; justify-content: stretch; }
  .header.site-header-overlay :is(.parent-link,.stars-pill) { min-height: 45px; padding: 8px 11px; font-size: 17px; }
  .header.site-header-overlay .parent-link { flex: 1; gap: 6px; }
  .header.site-header-overlay .stars-pill { width: 100%; flex-wrap: wrap; gap: 3px 6px; padding-inline: 9px; }
  .header.site-header-overlay .header-star-caption { display: block; order: -1; flex-basis: 100%; font-size: 16px; }
  .header.site-header-overlay > .accessibility-statement-link { min-height: 44px; width: 100%; padding: 8px 10px; font-size: 16px; }
  .site-header-overlay :is(.parent-link,.accessibility-statement-link) svg { width: 21px; height: 21px; }
  .site-header-overlay .stars-pill svg { width: 20px; height: 20px; }
}
@media (max-width: 370px) {
  .header.wrap.site-header-overlay { grid-template-columns: 112px minmax(0, 1fr); gap: 9px 9px; padding-inline: 12px; }
  .header.site-header-overlay .brand.brand-logo { width: 112px; }
  .header.site-header-overlay .header-actions { flex-wrap: wrap; }
  .header.site-header-overlay .parent-link svg { display: none; }
  .header.site-header-overlay :is(.parent-link,.stars-pill) { padding-inline: 8px; font-size: 16px; }
  .header.site-header-overlay > .accessibility-statement-link { font-size: 15px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link) { transition: none; }
  .header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link):hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .header.wrap.site-header-overlay { background: #f6f2ff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .header.wrap.site-header-overlay { border-color: CanvasText; }
  .header.site-header-overlay :is(.parent-link,.stars-pill,.accessibility-statement-link) { border-color: ButtonText; }
}
.account-entry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:18px;background:#f2e8fc;border:2px solid #d5bce6;color:#513565;text-decoration:none;font-family:Fredoka,'Varela Round',sans-serif;font-weight:600;font-size:1rem;white-space:nowrap}.account-entry:focus-visible{outline:3px solid #624180;outline-offset:4px}
@media(max-width:600px){.header.site-header-overlay .header-actions{flex-wrap:wrap}.header-actions .account-entry{width:100%;padding:8px 10px;font-size:1rem;order:2}}