:root {
  --color-darker: #222;
  --color-dark: #333;
  --color-medium-dark: #555;
  --color-medium: #666;
  --color-medium-light: #999;
  --color-light: #eee;
  --color-blue: #11b;
  --color-cyan: #19a;
  --color-green: #1a1;
  --color-magenta: #a1a;
  --color-red: #b11;
  --color-yellow: #bbaa00;
  --transition-duration: 1.5s;
  --nav-button-size: 25pt;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

html, body {
  background-color: var(--color-medium);
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

#tree-anim {
  animation-timing-function: ease-in-out;
  background-color: var(--color-dark);
  bottom: 0;
  box-sizing: border-box;
  left: calc(50% - 30.9vh);
  margin: auto;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 61.803399vh;
  min-width: 0;
}

@media screen and (max-aspect-ratio: 0.61803399) {
  #tree-anim {
    width: 100vw;
    height: 161.803399vw;
    left: 0;
  }
}

#tree-anim svg {
  color: var(--color-light);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#tree-anim svg text.non-being {
  opacity: 0;
}

#tree-anim.transition,
#tree-anim.transition svg.diagram,
#tree-anim.transition svg.diagram * {
  transition-property: all;
  transition-duration: var(--transition-duration);
}

#tree-anim svg *.target {
  display: none;
}

#tree-anim svg circle.target.sphere {
  /*display: revert;*/
  opacity: 0.3;
}

#tree-anim svg *.text-path {
  opacity: 0;
}

#tree-anim svg g.path {
  display: none;
}

#tree-anim svg g.path.show {
  display: revert;
}

#tree-anim svg g.path.hidden {
  display: revert;
  opacity: 0;
}

#tree-anim svg g.path.hidden * {
  opacity: 0;
}

#tree-anim svg circle.non-being {
  display: none;
  fill: none;
  stroke: var(--color-light);
  stroke-width: 0.05em;
}

#tree-anim svg text.non-being {
  fill: var(--color-light);
}

#tree-anim svg use.sphere {
  display: none;
}

symbol.sphere > circle.sphere {
  fill: white;
}

symbol.sphere > text.number {
  fill: black;
  font-size: 1em;
  transform: translate(0, -1.7em);
}

symbol.sphere > text.name {
  fill: black;
  font-size: 1em;
  transform: translate(0, -0.5em);
}

symbol.sphere > use.icon.sigil {
  opacity: 1;
  height: 3em;
  transform: translate(0, 1.2em) scale(60%);
  transform-origin: 50% 50%;
}

symbol.sphere > use.icon.symbol {
  opacity: 0;
  transform: translate(0, 1.1em) scale(90%);
  transform-origin: 50% 50%;
}

symbol.sphere > use.icon.element {
  opacity: 0;
  fill: none;
  stroke-width: 1em;
  stroke: black;
  stroke-linecap: square;
  transform: translate(0, 1.2em) scale(70%);
  transform-origin: 50% 50%;
}

symbol.sphere > use.icon.element.fire {
  stroke: #ee0000;
}

symbol.sphere > use.icon.element.air {
  stroke: #cccc00;
}

symbol.sphere > use.icon.element.water {
  stroke: #0000dd;
}

symbol.sphere > use.icon.element.earth {
  stroke: #00cc00;
}

symbol.sphere.element > use.icon.sigil,
symbol.sphere.sigil > use.icon.sigil,
symbol.sphere.symbol > use.icon.sigil {
  opacity: 0;
}
symbol.sphere.element > use.icon.element {
  opacity: 1;
}
symbol.sphere.fade-in-element > use.icon.element {
  animation: fade-in var(--transition-duration);
}
symbol.sphere.fade-out-element > use.icon.element {
  animation: fade-out var(--transition-duration);
}
symbol.sphere.sigil > use.icon.sigil {
  opacity: 1;
}
symbol.sphere.fade-in-sigil > use.icon.sigil {
  animation: fade-in var(--transition-duration);
}
symbol.sphere.fade-out-sigil > use.icon.sigil {
  animation: fade-out var(--transition-duration);
}
symbol.sphere.symbol > use.icon.symbol {
  opacity: 1;
}
symbol.sphere.fade-in-symbol > use.icon.symbol {
  animation: fade-in var(--transition-duration);
}
symbol.sphere.fade-out-symbol > use.icon.symbol {
  animation: fade-out var(--transition-duration);
}

/*
  animation: fade-out var(--transition-duration);
*/
use.sphere {
  transform-origin: 50% 50%;
}

#tree-anim g.path > use.path-emanation-number,
#tree-anim g.path > use.path-fools-number,
#tree-anim g.path > text.path-emanation-number,
#tree-anim g.path > text.path-fools-number,
#tree-anim g.path > text.path-name {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--transition-duration);
}
#tree-anim.transition g.path > use.path-emanation-number,
#tree-anim.transition g.path > use.path-fools-number,
#tree-anim.transition g.path > text.path-emanation-number,
#tree-anim.transition g.path > text.path-fools-number,
#tree-anim.transition g.path > text.path-name {
  transition-property: all;
}

#tree-anim.sigil-path-number.show-emanation-number g.path > use.path-emanation-number,
#tree-anim.sigil-path-number.show-fools-number g.path > use.path-fools-number,
#tree-anim.decimal-path-number.show-emanation-number g.path > text.path-emanation-number,
#tree-anim.decimal-path-number.show-fools-number g.path > text.path-fools-number,
#tree-anim.show-path-name g.path > text.path-name {
  opacity: 1;
}

#tree-anim .nav {
  display: none;
}

#tree-anim.show-nav .nav {
  display: block;
  position: absolute;
  z-index: 100;
}

#tree-anim button {
  box-sizing: border-box;
  padding: 0;
  height: var(--nav-button-size);
  width: var(--nav-button-size);
  font-size: calc(var(--nav-button-size) * 0.7);
  text-align: center;
  overflow: hide;
  text-decoration: none;
  background-color: var(--color-medium);
  border: 1pt solid var(--color-darker);
  border-radius: 2pt;
  fill: var(--color-light);
}

#tree-anim button:disabled {
  background-color: var(--color-medium-dark);
  fill: var(--color-medium-light);
}

#tree-anim #nav-button-previous {
  top: 0;
  left: 0;
}

#tree-anim.show-options #nav-button-previous {
  top: 0;
  left: var(--nav-button-size);
}

#tree-anim #nav-button-next {
  top: 0;
  right: 0;
}

#tree-anim.show-fools-journey #nav-button-next {
  top: 0;
  right: var(--nav-button-size);
}

#tree-anim #fools-journey-button {
  display: none;
  background-color: var(--color-medium);
  border: 1pt solid var(--color-darker);
  border-radius: 2pt;
  box-sizing: border-box;
  fill: none;
  stroke: var(--color-light);
  stroke-width: 5;
}
#tree-anim #fools-journey-button:disabled {
  fill: none;
  stroke: var(--color-medium-light);
}

#tree-anim.show-fools-journey #fools-journey-button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

#tree-anim #options-menu-toggle {
  display: none;
  background-color: var(--color-medium);
  border: 1pt solid var(--color-darker);
  border-radius: 2pt;
  box-sizing: border-box;
  fill: var(--color-light);
}

#tree-anim.show-options #options-menu-toggle {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

#tree-anim #options-menu-layer {
  position: absolute;
  display: none;
  top: 0;
  left: var(--nav-button-size);
  width: calc(100% - var(--nav-button-size));
  height: 100%;
  z-index: 1000;
}

#tree-anim.show-options-menu #options-menu-layer {
  display: block;
}

#tree-anim.show-options-menu #options-menu legend {
  display: inline;
}

#tree-anim #options-menu {
  box-sizing: border-box;
  background-color: var(--color-light);
  border: 0.2vh solid var(--color-darker);
  border-radius: 1vh;
  font-size: 11pt;
  float: left;
  padding: 5pt 3pt;
}
#tree-anim #options-menu select {
  font-size: 12pt;
}

#tree-anim #options-menu option {
  font-size: 12pt;
}

#tree-anim #path-label-mode-select {
}


/* emanation-0 */

#tree-anim.emanation-0 svg circle.non-being {
  display: revert;
  opacity: 1;
}

#tree-anim.initial svg text.non-being {
  font-size: 0.6em;
}

#tree-anim.emanation-0 svg text.non-being {
  font-size: 0.6em;
  opacity: 1;
}


/* emanation-00 */

#tree-anim.emanation-00 svg circle.non-being {
  display: revert;
  opacity: 1;
}

#tree-anim.emanation-00 svg text.non-being {
  font-size: 0.55em;
  opacity: 1;
}


/* emanation-000 */

#tree-anim.emanation-000 svg circle.non-being {
  display: revert;
  opacity: 1;
}

#tree-anim.emanation-000 svg text.non-being {
  font-size: 0.5em;
  opacity: 1;
}

#tree-anim.emanation-000 #use-sphere-0-1 {
  display: revert;
}

#tree-anim.emanation-000.transition-from-emanation-00 #use-sphere-0-1 {
  display: none;
}


/* emanation-0-1 */

#tree-anim.emanation-0-1 svg circle.non-being {
  display: revert;
  opacity: 1;
}

#tree-anim.emanation-0-1 svg text.non-being {
  font-size: 0.35em;
  opacity: 1;
}

#tree-anim.emanation-0-1 #use-sphere-0-1,
#tree-anim.emanation-0-1 #use-sphere-1-2 {
  display: revert;
}

#tree-anim.emanation-0-1 path.black-stroke {
  stroke: black;
  stroke-width: 8.5;
}

#tree-anim.emanation-0-1 path.white-stroke {
  stroke: white;
  stroke-width: 8;
}

#tree-anim.emanation-0-1.transition-from-emanation-000 #use-sphere-1-2 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-0-1 {
  fill: #ffffff;
}


/* emanation-1-2 */

#tree-anim.emanation-1-2 svg circle.non-being {
  display: revert;
  opacity: 0;
}

#tree-anim.emanation-1-2 svg text.non-being {
  font-size: 0.35em;
  opacity: 0;
}

#tree-anim.emanation-1-2 #use-sphere-0-1,
#tree-anim.emanation-1-2 #use-sphere-1-2,
#tree-anim.emanation-1-2 #use-sphere-2-3 {
  display: revert;
}

#tree-anim.emanation-1-2 g.path path.black-stroke {
  stroke: black;
  stroke-width: 8.5;
}

#tree-anim.emanation-1-2 g.path path.white-stroke {
  stroke: white;
  stroke-width: 8;
}

#tree-anim.emanation-1-2.transition-from-emanation-0-1 #use-sphere-2-3 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-1-2 {
  fill: #ff0000;
}


/* emanation-2-3 */

#tree-anim.emanation-2-3 #use-sphere-0-1,
#tree-anim.emanation-2-3 #use-sphere-1-2,
#tree-anim.emanation-2-3 #use-sphere-2-3,
#tree-anim.emanation-2-3 #use-sphere-3-5 {
  display: revert;
}

#tree-anim.emanation-2-3 g.path path.black-stroke {
  stroke: black;
  stroke-width: 8;
}
#tree-anim.emanation-2-3 g.path path.white-stroke {
  stroke: white;
  stroke-width: 7.5;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-2-3 g.path path.black-stroke {
  stroke: black;
  stroke-width: 8;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-2-3 g.path path.white-stroke {
  stroke: white;
  stroke-width: 7.5;
}


#tree-anim.emanation-2-3.transition-from-emanation-1-2 #use-sphere-3-5 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-2-3 {
  fill: #ffff00;
}


/* emanation-3-5 */

#tree-anim.emanation-3-5 #use-sphere-0-1,
#tree-anim.emanation-3-5 #use-sphere-1-2,
#tree-anim.emanation-3-5 #use-sphere-2-3,
#tree-anim.emanation-3-5 #use-sphere-3-5,
#tree-anim.emanation-3-5 #use-sphere-4-7 {
  display: revert;
}

#tree-anim.emanation-3-5 g.path path.black-stroke {
  stroke: black;
  stroke-width: 7.5;
}
#tree-anim.emanation-3-5 g.path path.white-stroke {
  stroke: white;
  stroke-width: 7;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-3-5 g.path path.black-stroke {
  stroke: black;
  stroke-width: 6.3;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-3-5 g.path path.white-stroke {
  stroke: white;
  stroke-width: 5.8;
}

#tree-anim.emanation-3-5.transition-from-emanation-2-3 #use-sphere-4-7 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-3-5 {
  fill: #00ff00;
}


/* emanation-4-7 */

#tree-anim.emanation-4-7 #use-sphere-0-1,
#tree-anim.emanation-4-7 #use-sphere-1-2,
#tree-anim.emanation-4-7 #use-sphere-2-3,
#tree-anim.emanation-4-7 #use-sphere-3-5,
#tree-anim.emanation-4-7 #use-sphere-4-7,
#tree-anim.emanation-4-7 #use-sphere-5-11 {
  display: revert;
}

#tree-anim.emanation-4-7 g.path path.black-stroke {
  stroke: black;
  stroke-width: 6.5;
}
#tree-anim.emanation-4-7 g.path path.white-stroke {
  stroke: white;
  stroke-width: 6;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-4-7 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.4;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-4-7 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.9;
}

#tree-anim.emanation-4-7.transition-from-emanation-3-5 #use-sphere-5-11 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-4-7 {
  /*display: revert;*/
  fill: #00ffff;
}


/* emanation-5-11 */

#tree-anim.emanation-5-11 #use-sphere-0-1,
#tree-anim.emanation-5-11 #use-sphere-1-2,
#tree-anim.emanation-5-11 #use-sphere-2-3,
#tree-anim.emanation-5-11 #use-sphere-3-5,
#tree-anim.emanation-5-11 #use-sphere-4-7,
#tree-anim.emanation-5-11 #use-sphere-5-11,
#tree-anim.emanation-5-11 #use-sphere-6-13 {
  display: revert;
}

#tree-anim.emanation-5-11 g.path path.black-stroke {
  stroke: black;
  stroke-width: 7;
}
#tree-anim.emanation-5-11 g.path path.white-stroke {
  stroke: white;
  stroke-width: 6.5;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-5-11 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.4;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-5-11 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.9;
}

#tree-anim.emanation-5-11.transition-from-emanation-4-7 #use-sphere-6-13 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-5-11 {
  /*display: revert;*/
  fill: #0000ff;
}


/* emanation-6-13 */

#tree-anim.emanation-6-13 #use-sphere-0-1,
#tree-anim.emanation-6-13 #use-sphere-1-2,
#tree-anim.emanation-6-13 #use-sphere-2-3,
#tree-anim.emanation-6-13 #use-sphere-3-5,
#tree-anim.emanation-6-13 #use-sphere-4-7,
#tree-anim.emanation-6-13 #use-sphere-5-11,
#tree-anim.emanation-6-13 #use-sphere-6-13,
#tree-anim.emanation-6-13 #use-sphere-7-17 {
  display: revert;
}

#tree-anim.emanation-6-13 g.path path.black-stroke {
  stroke: black;
  stroke-width: 6.5;
}
#tree-anim.emanation-6-13 g.path path.white-stroke {
  stroke: white;
  stroke-width: 6;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-6-13 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.3;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-6-13 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.8;
}

#tree-anim.emanation-6-13.transition-from-emanation-5-11 #use-sphere-7-17 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-6-13 {
  /*display: revert;*/
  fill: #ff00ff;
}


/* emanation-7-17 */

#tree-anim.emanation-7-17 #use-sphere-0-1,
#tree-anim.emanation-7-17 #use-sphere-1-2,
#tree-anim.emanation-7-17 #use-sphere-2-3,
#tree-anim.emanation-7-17 #use-sphere-3-5,
#tree-anim.emanation-7-17 #use-sphere-4-7,
#tree-anim.emanation-7-17 #use-sphere-5-11,
#tree-anim.emanation-7-17 #use-sphere-6-13,
#tree-anim.emanation-7-17 #use-sphere-7-17,
#tree-anim.emanation-7-17 #use-sphere-8-19 {
  display: revert;
}

#tree-anim.emanation-7-17 g.path path.black-stroke {
  stroke: black;
  stroke-width: 6.5;
}
#tree-anim.emanation-7-17 g.path path.white-stroke {
  stroke: white;
  stroke-width: 6;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-7-17 g.path path.black-stroke {
  stroke: black;
  stroke-width: 4.9;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-7-17 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.4;
}

#tree-anim.emanation-7-17.transition-from-emanation-6-13 #use-sphere-8-19 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-7-17 {
  /*display: revert;*/
  fill: #ff00ff;
}


/* emanation-8-19 */

#tree-anim.emanation-8-19 #use-sphere-0-1,
#tree-anim.emanation-8-19 #use-sphere-1-2,
#tree-anim.emanation-8-19 #use-sphere-2-3,
#tree-anim.emanation-8-19 #use-sphere-3-5,
#tree-anim.emanation-8-19 #use-sphere-4-7,
#tree-anim.emanation-8-19 #use-sphere-5-11,
#tree-anim.emanation-8-19 #use-sphere-6-13,
#tree-anim.emanation-8-19 #use-sphere-7-17,
#tree-anim.emanation-8-19 #use-sphere-8-19,
#tree-anim.emanation-8-19 #use-sphere-9-23 {
  display: revert;
}

#tree-anim.emanation-8-19 g.path path.black-stroke {
  stroke: black;
  stroke-width: 6;
}

#tree-anim.emanation-8-19 g.path path.white-stroke {
  stroke: white;
  stroke-width: 5.5;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-8-19 g.path path.black-stroke {
  stroke: black;
  stroke-width: 4.8;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-8-19 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.3;
}

#tree-anim.emanation-8-19.transition-from-emanation-7-17 #use-sphere-9-23 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-8-19 {
  /*display: revert;*/
  fill: #ff0000;
}


/* emanation-9-23 */

#tree-anim.emanation-9-23 #use-sphere-0-1,
#tree-anim.emanation-9-23 #use-sphere-1-2,
#tree-anim.emanation-9-23 #use-sphere-2-3,
#tree-anim.emanation-9-23 #use-sphere-3-5,
#tree-anim.emanation-9-23 #use-sphere-4-7,
#tree-anim.emanation-9-23 #use-sphere-5-11,
#tree-anim.emanation-9-23 #use-sphere-6-13,
#tree-anim.emanation-9-23 #use-sphere-7-17,
#tree-anim.emanation-9-23 #use-sphere-8-19,
#tree-anim.emanation-9-23 #use-sphere-9-23,
#tree-anim.emanation-9-23 #use-sphere-10-29 {
  display: revert;
}

#tree-anim.emanation-9-23 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.5;
}
#tree-anim.emanation-9-23 g.path path.white-stroke {
  stroke: white;
  stroke-width: 5;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-9-23 g.path path.black-stroke {
  stroke: black;
  stroke-width: 4.5;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-9-23 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.0;
}

#tree-anim.emanation-9-23.transition-from-emanation-8-19 #use-sphere-10-29 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-9-23 {
  /*display: revert;*/
  fill: #ff0000;
}


/* emanation-10-29 */

#tree-anim.emanation-10-29 #use-sphere-0-1,
#tree-anim.emanation-10-29 #use-sphere-1-2,
#tree-anim.emanation-10-29 #use-sphere-2-3,
#tree-anim.emanation-10-29 #use-sphere-3-5,
#tree-anim.emanation-10-29 #use-sphere-4-7,
#tree-anim.emanation-10-29 #use-sphere-5-11,
#tree-anim.emanation-10-29 #use-sphere-6-13,
#tree-anim.emanation-10-29 #use-sphere-7-17,
#tree-anim.emanation-10-29 #use-sphere-8-19,
#tree-anim.emanation-10-29 #use-sphere-9-23,
#tree-anim.emanation-10-29 #use-sphere-10-29,
#tree-anim.emanation-10-29 #use-sphere-11-31 {
  display: revert;
}

#tree-anim.emanation-10-29 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.5;
}
#tree-anim.emanation-10-29 g.path path.white-stroke {
  stroke: white;
  stroke-width: 5;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-10-29 g.path path.black-stroke {
  stroke: black;
  stroke-width: 4.5;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-10-29 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.0;
}

#tree-anim.emanation-10-29.transition-from-emanation-9-23 #use-sphere-11-31 {
  display: none;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-10-29 {
  /*display: revert;*/
  fill: #ff0000;
}


/* emanation-11-31 */

#tree-anim.emanation-11-31 #use-sphere-0-1,
#tree-anim.emanation-11-31 #use-sphere-1-2,
#tree-anim.emanation-11-31 #use-sphere-2-3,
#tree-anim.emanation-11-31 #use-sphere-3-5,
#tree-anim.emanation-11-31 #use-sphere-4-7,
#tree-anim.emanation-11-31 #use-sphere-5-11,
#tree-anim.emanation-11-31 #use-sphere-6-13,
#tree-anim.emanation-11-31 #use-sphere-7-17,
#tree-anim.emanation-11-31 #use-sphere-8-19,
#tree-anim.emanation-11-31 #use-sphere-9-23,
#tree-anim.emanation-11-31 #use-sphere-10-29,
#tree-anim.emanation-11-31 #use-sphere-11-31 {
  display: revert;
}

#tree-anim.emanation-11-31 g.path path.black-stroke {
  stroke: black;
  stroke-width: 5.5;
}
#tree-anim.emanation-11-31 g.path path.white-stroke {
  stroke: white;
  stroke-width: 5.0;
}

#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-11-31 g.path path.black-stroke {
  stroke: black;
  stroke-width: 4.5;
}
#tree-anim.show-emanation-number.show-fools-number.show-path-name.emanation-11-31 g.path path.white-stroke {
  stroke: white;
  stroke-width: 4.0;
}

/* Included to visualize sphere targets */
#tree-anim svg circle.target.sphere.emanation-11-31 {
  /*display: revert;*/
  fill: #ff0000;
}

#fools-journey-impulse {
  transform-origin: 50% 50%;
  transition-property: all;
}
#tree-anim.transition #fools-journey-impulse {
  transition-duration: 0.8s;
  transition-timing-function: linear;
}

#fools-journey-marker {
  opacity: 0;
}

#fools-journey-marker-a {
 animation-name: fade-in;
 animation-duration: 0.7s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-timing-function: linear;
}

#fools-journey-marker-b {
 animation-name: fade-out;
 animation-duration: 0.7s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-timing-function: linear;
}