/* Canonical toolbar styles. The Lake Como patch script mirrors this file to public/demo/shared. */
/* Keep the whole opening unobstructed, including during its final dissolve.
   Match opening surfaces only: RSVP and practical-info dialogs keep the bar. */
body:has(
  .wc-intro[open],
  .jd-intro,
  .dm-original-intro[open],
  .azj-opening-screen,
  .dune-film-opening[open],
  .oc-opening[open],
  .intro-experience
) .amorea-demo-toolbar {
  display: none !important;
}
.amorea-demo-toolbar {
  --demo-toolbar-height: 66px;
  position: relative;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: var(--demo-toolbar-height);
  padding: 12px clamp(18px, 3vw, 42px);
  border-bottom: 1px solid #e3e0d9;
  background: #f8f7f2;
  color: #292a27;
  font:
    400 12px/1.4 var(--font-inter, Arial),
    sans-serif;
  letter-spacing: 0;
  text-align: left;
  isolation: isolate;
}
.amorea-demo-toolbar a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition:
    color 0.2s,
    background 0.2s;
}
.amorea-demo-toolbar a:focus-visible {
  outline: 2px solid #7068f3;
  outline-offset: 5px;
}
.amorea-demo-toolbar .amorea-demo-toolbar__brand {
  gap: 9px;
  justify-self: start;
  color: #292a27;
  white-space: nowrap;
}
.amorea-demo-toolbar__brand > svg {
  color: #939188;
}
.amorea-demo-toolbar__brand > span {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.45px;
}
.amorea-demo-toolbar__brand > span > span {
  color: #7068f3;
}
.amorea-demo-toolbar__brand small {
  display: none;
}
.amorea-demo-toolbar__identity {
  text-align: center;
}
.amorea-demo-toolbar__identity > span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #65645e;
  font-size: 10px;
  letter-spacing: 0.07em;
}
.amorea-demo-toolbar__identity i {
  width: 3px;
  height: 3px;
  background: #b4afa5;
  border-radius: 50%;
}
.amorea-demo-toolbar__identity small {
  display: block;
  margin-top: 3px;
  color: #8c887e;
  font-size: 8px;
  line-height: 1.4;
}
.amorea-demo-toolbar .amorea-demo-toolbar__project {
  justify-self: end;
  justify-content: center;
  gap: 14px;
  min-height: 37px;
  padding: 9px 13px;
  border: 1px solid #dcd7f2;
  border-radius: 7px;
  background: #eeebfa;
  color: #5f5685;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.amorea-demo-toolbar .amorea-demo-toolbar__project:hover {
  background: #e5e0f7;
  color: #4e456f;
}
.wc-intro > .amorea-demo-toolbar,
.jd-intro > .amorea-demo-toolbar {
  position: fixed;
  top: 0;
  left: 0;
}
@media (max-width: 760px) {
  .amorea-demo-toolbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 11px 16px;
    min-height: 62px;
    --demo-toolbar-height: 62px;
  }
  .amorea-demo-toolbar__identity {
    display: none;
  }
  .amorea-demo-toolbar__brand > span {
    font-size: 22px;
  }
  .amorea-demo-toolbar__brand small {
    display: block;
    margin-top: 4px;
    font-size: 7px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    color: #8c887e;
  }
  .amorea-demo-toolbar .amorea-demo-toolbar__project {
    font-size: 9px;
    gap: 9px;
    padding-inline: 10px;
  }
  .amorea-demo-toolbar__brand > svg {
    width: 12px;
  }
}
@media (max-width: 350px) {
  .amorea-demo-toolbar {
    gap: 7px;
    padding-inline: 11px;
  }
  .amorea-demo-toolbar .amorea-demo-toolbar__brand {
    gap: 6px;
  }
  .amorea-demo-toolbar__brand > span {
    font-size: 20px;
  }
  .amorea-demo-toolbar .amorea-demo-toolbar__project {
    font-size: 8px;
    gap: 5px;
    padding-inline: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amorea-demo-toolbar a {
    transition: none;
  }
}