/* Compact adaptation of the approved Urokoved composition. */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:inherit;
  letter-spacing:normal;
  line-height:1;
}
.brand:before,
.app-sidebar>.brand:before{
  display:none!important;
  content:none!important;
}
/*
  The site keeps the accepted square mark. Wordmark coordinates are derived
  from the approved composition by reversing its saved logo transform
  (x -13.9947, y -75.5335, scale 1.26), then scaling to the square mark.
*/
.brand-composition{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:95.56px;
  height:48px;
}
.brand-symbol{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  display:block;
  width:48px;
  height:48px;
  border-radius:6px;
  border:0;
  pointer-events:none;
}
.brand-symbol-static,
.brand-symbol-motion,
.brand-symbol-prelude{
  /* The three SVG layers must exchange on the same frame.  A cross-fade
     exposes the dark hover surface for a few milliseconds as a visible blink. */
  transition:none;
}
.brand-symbol-motion,
.brand-symbol-prelude{
  opacity:0;
}
/* The mark takes its colours from tokens. In the dark theme the backdrop that follows
   the mark's outline turns light and the stones dark, so the mark still merges with
   its hover badge exactly as it does on the dark badge of the light theme. */
.logo-backdrop{fill:var(--logo-backdrop)}
.logo-stone,.brand-symbol-motion #stone{fill:var(--logo-stone)}
.logo-sprout,.brand-symbol-motion svg>g[fill="#F5FF37"]{fill:var(--logo-sprout)}
.brand-symbol-static svg{
  display:block;
  width:100%;
  height:100%;
}
.brand-symbol-motion svg{
  display:block;
  width:100%;
  height:100%;
}
.brand-symbol-prelude svg{
  display:block;
  width:100%;
  height:100%;
}
.brand-composition.brand-playing .brand-symbol-static{
  opacity:0;
}
.brand-composition.brand-playing .brand-symbol-motion{
  opacity:1;
}
.brand-composition.brand-prelude-active .brand-symbol-static,
.brand-composition.brand-prelude-active .brand-symbol-motion{
  opacity:0;
}
.brand-composition.brand-prelude-active .brand-symbol-prelude{
  opacity:1;
}
.brand-wordmark-frame{
  position:absolute;
  z-index:3;
  left:28.53px;
  top:11.84px;
  display:block;
  width:65.98px;
  height:17.4px;
  line-height:0;
}
.brand-wordmark{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
/* The approved wordmark crosses the edge of the mark. Keep that overlap while
   changing only the colour required by the site's light surface. */
.brand-wordmark-light{
  display:none;
}
.brand-wordmark-dark{
  clip-path:none;
}
.brand-tagline{
  font-size:15px;
  font-weight:500;
}
@media(max-width:900px){
  .brand{gap:10px}
  .brand-tagline{display:none}
}
@media(min-width:901px){
  .app-sidebar.icon-sidebar .brand{
    position:relative;
    z-index:126;
    display:block;
    align-self:flex-start;
    width:52px;
    height:52px;
    margin:0;
    padding:0;
    overflow:hidden;
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    box-shadow:none;
    transition:width .32s cubic-bezier(.4,0,.2,1),background-color .22s ease .07s,border-color .22s ease .07s,box-shadow .22s ease .04s;
  }
  .app-sidebar.icon-sidebar .brand:hover,
  .app-sidebar.icon-sidebar .brand:focus-visible{
    z-index:127;
    width:154px;
    background:var(--logo-backdrop);
    border-color:var(--logo-backdrop);
    box-shadow:0 8px 22px #15180d26;
    transition-delay:0s;
  }
  .app-sidebar.icon-sidebar .brand-composition{
    position:absolute;
    left:1px;
    top:1.15px;
    width:152px;
    height:47.69px;
  }
  .app-sidebar.icon-sidebar .brand-symbol{
    width:50px;
    height:47.69px;
    border-radius:10px;
  }
  .app-sidebar.icon-sidebar .brand-wordmark-text{
    position:absolute;
    z-index:3;
    left:58px;
    top:50%;
    display:block;
    color:var(--logo-stone);
    font-family:'Roboto Condensed',Manrope,sans-serif;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.5px;
    line-height:1;
    white-space:nowrap;
    opacity:0;
    transform:translate(-6px,-50%);
    transform-origin:left center;
    pointer-events:none;
    transition:opacity .2s ease .06s,transform .28s cubic-bezier(.4,0,.2,1);
  }
  .app-sidebar.icon-sidebar .brand:hover .brand-wordmark-text,
  .app-sidebar.icon-sidebar .brand:focus-visible .brand-wordmark-text{
    opacity:1;
    transform:translate(0,-50%);
    transition-delay:.06s;
  }
}
@media(prefers-reduced-motion:reduce){
  .brand-symbol-static,
  .brand-symbol-motion,
  .brand-symbol-prelude,
  .app-sidebar.icon-sidebar .brand-wordmark-text{
    transition:none!important;
  }
  .brand-symbol-motion,
  .brand-symbol-prelude{
    display:none;
  }
  .brand-composition.brand-playing .brand-symbol-static{
    opacity:1;
  }
}