/* Shared playful navigation, including the signed-in workspace links. */
.site-workspace-nav>a,
.site-shell-header nav.site-main-nav>a,
.site-shell-header .account-controls a,
.site-shell-header .account-controls button,
.site-shell-header .site-mode{
 font-family:"Comic Sans MS","Chalkboard SE","Comic Sans",cursive;
 font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.4px;
 display:inline-flex;align-items:center;justify-content:center;
 transform-origin:50% 75%;transition:color .18s,text-shadow .18s;
}
.site-shell-header .account-controls a:hover{text-decoration:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .site-workspace-nav>a:hover,
 .site-shell-header nav.site-main-nav>a:hover,
 .site-shell-header .account-controls a:hover,
 .site-shell-header .account-controls button:hover,
 .site-shell-header .site-mode:hover{
  animation:nav-toon-pop .48s ease-out both;
  text-shadow:1px 2px 0 #ff792f55;
 }
}
@keyframes nav-toon-pop{
 0%{transform:translateY(0) scale(1) rotate(0)}
 22%{transform:translateY(2px) scale(1.07,.9) rotate(-2deg)}
 48%{transform:translateY(-5px) scale(.98,1.08) rotate(2deg)}
 72%{transform:translateY(0) scale(1.04,.98) rotate(-1deg)}
 100%{transform:translateY(-2px) scale(1.03) rotate(0)}
}
@media(min-width:1101px) and (max-width:1350px){
 .site-workspace-nav>a,
.site-shell-header nav.site-main-nav>a,.site-shell-header .account-controls a,
 .site-shell-header .account-controls button,.site-shell-header .site-mode{font-size:16px}
 .site-shell-header .site-main-nav,.site-shell-header .account-controls{gap:12px}
}
@media(max-width:600px){
 .site-workspace-nav>a,
.site-shell-header nav.site-main-nav>a,
 .site-shell-header .account-controls a,
 .site-shell-header .account-controls button,
 .site-shell-header .site-mode{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .site-workspace-nav>a,
.site-shell-header nav.site-main-nav>a,
 .site-shell-header .account-controls a,
 .site-shell-header .account-controls button,
 .site-shell-header .site-mode{animation:none;transition:none}
}

/* Larger links on the approved transparent homepage header. */
@media(min-width:1101px){
 .site-shell-header.site-home-overlay nav.site-main-nav>a,
 .site-shell-header.site-home-overlay .account-controls a,
 .site-shell-header.site-home-overlay .site-mode{font-size:clamp(18px,1.4vw,22px)}
}

/* Orange hover halos add no width, so the homepage menu stays in place. */
.site-shell-header.site-home-nav :is(nav.site-main-nav>a,.account-controls a,.account-controls button,.site-mode){
 border-radius:10px;
 transition:color .18s,background-color .18s,box-shadow .18s,text-shadow .18s;
}
.site-shell-header.site-home-nav :is(nav.site-main-nav>a,.account-controls a,.account-controls button,.site-mode):focus-visible{
 background:#ff792f;color:#18121a;text-shadow:none;text-decoration:none;
 box-shadow:0 0 0 6px #ff792f,0 0 20px 7px #ff792f80;
 border-color:transparent;
}
@media(hover:hover){
 .site-shell-header.site-home-nav :is(nav.site-main-nav>a,.account-controls a,.account-controls button,.site-mode):hover{
  background:#ff792f;color:#18121a;text-shadow:none;text-decoration:none;
  box-shadow:0 0 0 6px #ff792f,0 0 20px 7px #ff792f80;
  border-color:transparent;
 }
}
@media(prefers-reduced-motion:reduce){
 .site-shell-header.site-home-nav :is(nav.site-main-nav>a,.account-controls a,.account-controls button,.site-mode){transition:none}
}
