/* Shared brand image and compositor-driven LED border. */
.brand-art{display:block;width:100%;height:auto;aspect-ratio:1536/857;object-fit:contain;background:#071523}
.led.brand-image-wrap,.shell>header .led-wrap.brand-image-wrap{width:min(410px,100%);max-width:100%;padding:3px;border-radius:23px;overflow:hidden;isolation:isolate}
.brand-image-wrap h1,.shell>header .brand-image-wrap .brand{position:relative;display:block;padding:0!important;margin:0;border:0;border-radius:20px;overflow:hidden;background:#071523;line-height:0;box-shadow:none}
.brand-image-wrap .brand a{display:block;line-height:0}
.brand-image-wrap:before,.led.brand-image-wrap:before{content:'';position:absolute;inset:-150%;border-radius:0;background:conic-gradient(#58ccff,#8c6cff,#ff71be,#ffe493,#78ffe1,#58ccff);animation:brand-led-spin 7s linear infinite;will-change:transform;z-index:-1}
.brand-image-wrap:after{display:none!important}
@keyframes brand-led-spin{to{transform:rotate(360deg)}}
@media(max-width:650px){.shell>header .led-wrap.brand-image-wrap{width:min(340px,100%)}.shell>header:has(.brand-image-wrap){grid-template-columns:minmax(0,1fr)}.shell>header .brand-image-wrap{grid-column:1;grid-row:1;justify-self:center}.shell>header:has(.brand-image-wrap) .header-admin{grid-column:1;grid-row:2;justify-self:center}.shell>header:has(.brand-image-wrap) .workspace-subtitle{grid-row:3}.led.brand-image-wrap{width:min(360px,100%)}}
@media(prefers-reduced-motion:reduce){.brand-image-wrap:before,.led.brand-image-wrap:before{animation:none;will-change:auto}}

/* Give the desktop image its own bounded track so intrinsic image sizing
   cannot expand the auto column or move the title away from the center. */
@media(min-width:761px){
  .shell>header:has(.brand-image-wrap){grid-template-columns:minmax(0,1fr) minmax(0,410px) minmax(0,1fr)}
  .shell>header .led-wrap.brand-image-wrap{grid-column:2;grid-row:1;justify-self:center;width:100%;min-width:0}
  .shell>header .brand-image-wrap .brand,.shell>header .brand-image-wrap .brand a{width:100%;min-width:0}
}