/* The sculpted mark casts its own shadow directly onto the page. */
:root{
  --logo-shadow:color-mix(in srgb,var(--text) 28%,transparent);
  --logo-contact:color-mix(in srgb,var(--text) 18%,transparent);
  --logo-edge:color-mix(in srgb,var(--mw) 34%,transparent);
}
:root[data-theme=dark]{
  --logo-shadow:color-mix(in srgb,var(--bg) 92%,transparent);
  --logo-contact:color-mix(in srgb,var(--bg) 80%,transparent);
  --logo-edge:color-mix(in srgb,var(--mw) 68%,transparent);
}
:root .c4-logo{
  display:block;position:relative;overflow:visible;flex-shrink:0;padding:0;
  isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none;
  mix-blend-mode:normal;line-height:0;
}
.c4-logo picture{display:contents}
:root .c4-logo img{
  display:block;position:static;width:100%;height:100%;max-width:100%;
  object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 1px 0 var(--logo-edge)) drop-shadow(0 3px 2px var(--logo-contact));
}
:root .brand-mark.c4-logo{
  width:72px;height:52px;transform:translateY(-1px);
  transform-origin:50% 70%;transition:transform 220ms cubic-bezier(.2,.8,.2,1);
}
:root .brand-mark.c4-logo img{
  filter:drop-shadow(0 1px 0 var(--logo-edge)) drop-shadow(0 3px 2px var(--logo-contact)) drop-shadow(0 9px 6px var(--logo-shadow));
}
.brand-mark.c4-logo::after{
  content:"";position:absolute;inset:auto 20% -2px;height:5px;
  border-radius:50%;background:var(--logo-contact);filter:blur(3px);
  z-index:-1;pointer-events:none;opacity:.6;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1),opacity 220ms cubic-bezier(.2,.8,.2,1);
}
@media(hover:hover) and (pointer:fine){
  :root .brand:hover .brand-mark.c4-logo{transform:perspective(500px) translateY(-4px) rotateX(3deg) rotateY(-5deg)}
  .brand:hover .brand-mark.c4-logo::after{transform:translateY(4px) scaleX(.85);opacity:.35}
}
:root .brand:focus-visible .brand-mark.c4-logo{transform:perspective(500px) translateY(-4px) rotateX(3deg) rotateY(-5deg)}
:root .brand:active .brand-mark.c4-logo{transform:translateY(1px)}
.c4ai-launcher-mark.c4-logo{width:94%;aspect-ratio:4/3}
.c4ai-header-logo.c4-logo{padding:0}
.sidebar-logo.c4-logo{width:38px;height:30px}
.c4-book-page-head>.c4-book-logo{width:31px;height:23px;flex:none}
.c4-book-inside-left>.c4-book-inner-logo{width:61px;height:45px;flex:none}
.c4-book-cover-fallback>.c4-logo{width:70px;height:52px;margin:0 auto 14px}
@media(max-width:700px){
  :root .site-header .brand-mark.c4-logo{width:64px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  :root .brand .brand-mark.c4-logo,
  :root .brand:is(:hover,:focus-visible,:active) .brand-mark.c4-logo{transform:none;transition:none}
  :root .brand:is(:hover,:focus-visible,:active) .brand-mark.c4-logo::after{transform:none;transition:none;opacity:.6}
}