:root {
  --hermes-panel: rgba(12, 18, 36, 0.78);
  --hermes-border: rgba(125, 211, 252, 0.18);
}

.light {
  --hermes-panel: rgba(255, 255, 255, 0.88);
  --hermes-border: rgba(15, 118, 110, 0.15);
}

body,
#root,
#cl-shadow-root {
  font-family: var(--font-family);
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(253, 230, 138, 0.08), transparent 22%),
    linear-gradient(180deg, #0b1020 0%, #060913 100%);
  color-scheme: dark;
}

.light body,
.light #cl-shadow-root {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 32%),
    linear-gradient(180deg, #eef4ff 0%, #dfe8ff 100%);
}

.dark body,
.dark #cl-shadow-root {
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(253, 230, 138, 0.08), transparent 22%),
    linear-gradient(180deg, #0b1020 0%, #060913 100%);
}

[data-step-type],
.MuiPaper-root,
.MuiCard-root {
  backdrop-filter: blur(14px);
}

.MuiPaper-root,
.MuiCard-root,
.MuiDrawer-paper,
.MuiAccordion-root {
  background: var(--hermes-panel) !important;
  border: 1px solid var(--hermes-border) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26) !important;
}

code,
pre,
.MuiTypography-root code {
  font-family: var(--font-mono) !important;
}

.MuiButton-root {
  border-radius: 999px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.MuiButton-containedPrimary,
.MuiButton-outlinedPrimary {
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.18), 0 12px 24px rgba(14, 165, 233, 0.18) !important;
}

.MuiInputBase-root,
.MuiOutlinedInput-root {
  border-radius: 20px !important;
}