/* Public website: translucent surfaces with a solid fallback. */
header {
  position: sticky;
  top: 12px;
  z-index: 4;
  width: calc(100% - 32px);
  margin: 16px auto 0;
  padding: 14px 20px;
  gap: 24px;
  border: 1px solid #c5c9ff30;
  border-radius: 24px;
  background: linear-gradient(120deg, #62558029, #396b8117), #191c30f2;
  box-shadow: inset 0 1px 0 #ffffff26, 0 12px 40px #05071340;
}
nav { gap: 4px; }
nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #c5cbe0;
  transition: background .2s, border-color .2s, color .2s;
}
nav a[aria-current=page] {
  padding-bottom: 10px;
  background: linear-gradient(120deg, #b58cff30, #69dafa17);
  border-color: #c6beff45;
  box-shadow: inset 0 1px #ffffff26, 0 3px 12px #080d2426;
}
button, .button {
  position: relative;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid #c3ceff42;
  color: #f2f4ff;
  background: linear-gradient(170deg, #ffffff16, #ffffff00 52%), #252b43dc;
  box-shadow: inset 0 1px #ffffff29, inset 0 -1px #ffffff08, 0 5px 16px #06091930;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .2s;
}
.primary {
  background: linear-gradient(170deg, #ffffff30, #ffffff00 52%), linear-gradient(115deg, #724fbacb, #287991c9);
  border-color: #c4b3ff80;
  box-shadow: inset 0 1px #ffffff50, 0 6px 24px #8158d22b;
}
@supports (backdrop-filter: blur(20px)) {
  header { background: linear-gradient(120deg, #62558029, #396b8117), #15192bcc; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
  button, .button { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@media (hover:hover) {
  nav a:hover { background-color: #c8caff12; border-color: #d8dfff33; }
  button:not(:disabled):hover, .button:hover { border-color: #aee9ffc4; box-shadow: inset 0 1px #ffffff55, 0 6px 26px #87b8ff25; transform: translateY(-1px); }
}
button:not(:disabled):active, .button:active { transform: translateY(0); box-shadow: inset 0 1px 6px #050b242f; }
button:disabled { opacity: .45; backdrop-filter: none; }
button:focus-visible, .button:focus-visible, nav a:focus-visible { outline: 2px solid #9be5ff; outline-offset: 4px; }
.chat-toggle { z-index: 6; border-radius: 18px; }
.chat { z-index: 7; }
html { scroll-padding-top: 110px; }
@media(max-width:760px) {
  header { position: relative; top: 0; width: calc(100% - 24px); padding: 16px; gap: 14px; border-radius: 20px; }
  nav { width: 100%; gap: 4px; }
  nav a { padding: 9px 12px; flex: 1 0 auto; }
  nav a[aria-current=page] { padding-bottom: 9px; }
  button, .button { max-width: 100%; text-align: center; }
  html { scroll-padding-top: 24px; }
}
@media(prefers-reduced-motion:reduce) { button, .button, nav a { transition: none; } button:not(:disabled):hover, .button:hover { transform: none; } }