html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent !important;
}

body {
  min-width: 0;
}

.root {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent !important;
}

.root > .themebtn,
.root .rail {
  display: none !important;
}

.root > .card {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.root .hero {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.root .stage {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.root .stage svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

.oqtrix-visual-root .stage svg {
  transform: scale(1.16);
  filter: contrast(1.15) saturate(1.1);
}

.nemesis-visual-root .stage svg {
  transform: scale(1.16);
  filter: contrast(1.17) saturate(1.14);
}

.scribe-visual-root .stage svg {
  transform: scale(1.25);
  filter: contrast(1.18) saturate(1.14);
}

.oqtrix-visual-root[data-theme="light"] {
  --mut: #315f47 !important;
  --wire: #799f89 !important;
  --wire-hi: #56846a !important;
}

.oqtrix-visual-root[data-theme="dark"] {
  --mut: #91aa99 !important;
  --wire: #294737 !important;
  --wire-hi: #4e8767 !important;
}

.nemesis-visual-root[data-theme="light"] {
  --mut: #4f4a5c !important;
  --lane: #8c8794 !important;
}

.nemesis-visual-root[data-theme="dark"] {
  --mut: #9693a2 !important;
  --lane: #3d3c4d !important;
}

.scribe-visual-root[data-theme="light"] {
  --mut: #4c4a61 !important;
  --wire: #8e8a7e !important;
}

.scribe-visual-root[data-theme="dark"] {
  --mut: #9696aa !important;
  --wire: #3c3c51 !important;
}

@media (max-width: 700px) {
  .oqtrix-visual-root .stage svg,
  .nemesis-visual-root .stage svg {
    transform: scale(1.1);
  }

  .scribe-visual-root .stage svg {
    transform: scale(1.16);
  }
}