/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/styles/main.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************/
/* $hue-primary: 196;
$hue-prima-second: 189;
$hue-secondary: 183;
$hue-call-to-action: 195;
$hue-neutral: 45;

$sat-primary:            96% ;$lum-primary:            44%;
$sat-primary-hov:        40% ;$lum-primary-hov:        50%;
$sat-primary-alt:        40% ;$lum-primary-alt:        50%;
$sat-secondary:          89% ;$lum-secondary:          42%;
$sat-secondary-hov:      23% ;$lum-secondary-hov:      39%;
$sat-call-to-action:     86% ;$lum-call-to-action:     54%;
$sat-call-to-action-hov: 90% ;$lum-call-to-action-hov: 61%;
$sat-neutral:            10% ;$lum-neutral:            85%;
$sat-light:              10% ;$lum-light:              95%;
$sat-light-alt:          5%  ;$lum-light-alt:          90%;
$sat-dark:               10% ;$lum-dark:               15%;
$sat-dark-alt:           3%  ;$lum-dark-alt:           19%;


$primaryColor:         hsl(196 96% 44%);
$primaryColorTransp:   hsl(196 96% 44%/.3);
$primaryColorHov:      hsl(196 40% 50%);
$secondaryColor:       hsl(183 89% 42%);
$secondaryColorTransp: hsl(183 89% 42%/.3);
$secondaryColorHov:    hsl(183 23% 39%);

$hue-prima-second: ($hue-primary + $hue-secondary) / 2;

$dark: hsl(189deg, $sat-dark, 15%);
$altDark: hsl(189deg, $sat-dark, 15%);
$altDarkTransp: hsl(189deg, 3%, 19%, .75);

$light: hsl(189deg 10% 95%);
$altLight: hsl(189deg 5% 90%);
$altLightTransp: hsl(189deg 5%, $lum-light-alt, .75);

$secondaryColorMedTrans: hsl($hue-secondary, $sat-secondary, $lum-secondary, .7);

$lightGradient:
	hsl(196deg 10% 15%),
	hsl(189deg 10% 15%),
	hsl(183deg 10% 15%)
; */
/* Fired Synapse Colors Colors */
html {
  --primary: hsl(196deg 96% 44%);
  --primary-tone-1: hsl(196deg 100% 49%);
  --primary-tone-2: hsl(196deg 92% 39%);
  --primary-secondary-1: hsl(192.75deg 94.25% 43.5%);
  --primary-secondary-2: hsl(189.5deg 92.5% 43%);
  --primary-secondary-3: hsl(186.25deg 90.75% 42.5%);
  --primary-secondary-4: hsl(183deg 89% 42%);
  --primary-op-1: hsl(196deg 96% 44%/75%);
  --primary-op-2: hsl(196deg 96% 44%/50%);
  --primary-op-3: hsl(196deg 96% 44%/25%);
  --secondary: hsl(183deg 89% 42%);
  --secondary-tone-1: hsl(183deg 86% 36%);
  --secondary-tone-2: hsl(183deg 92% 48%);
  --secondary-op-1: hsl(183deg 89% 42%/75%);
  --secondary-op-2: hsl(183deg 89% 42%/50%);
  --secondary-op-3: hsl(183deg 89% 42%/25%);
  --call_to_action: hsl(40deg 80% 40%);
  --call_to_action-tone-1: hsl(40deg 90% 50%);
  --call_to_action-tone-2: hsl(40deg 70% 30%);
  --call_to_action-op-1: hsl(40deg 80% 40%/75%);
  --call_to_action-op-2: hsl(40deg 80% 40%/50%);
  --call_to_action-op-3: hsl(40deg 80% 40%/25%);
  --dark: hsl(189deg 15% 0%);
  --dark-tone-1: hsl(189deg 12.5% 12.5%);
  --dark-tone-2: hsl(189deg 10% 25%);
  --dark-tone-3: hsl(189deg 7.5% 37.5%);
  --dark-tone-4: hsl(189deg 5% 50%);
  --dark-op-1: hsl(189deg 15% 0%/75%);
  --dark-op-2: hsl(189deg 15% 0%/50%);
  --dark-op-3: hsl(189deg 15% 0%/25%);
  --neutral: hsl(189deg 5% 50%);
  --neutral-op-1: hsl(189deg 5% 50%/75%);
  --neutral-op-2: hsl(189deg 5% 50%/50%);
  --neutral-op-3: hsl(189deg 5% 50%/25%);
  --light: hsl(189deg 30% 100%);
  --light-tone-1: hsl(189deg 23.75% 87.5%);
  --light-tone-2: hsl(189deg 17.5% 75%);
  --light-tone-3: hsl(189deg 11.25% 62.5%);
  --light-tone-4: hsl(189deg 5% 50%);
  --light-op-1: hsl(189deg 30% 100%/75%);
  --light-op-2: hsl(189deg 30% 100%/50%);
  --light-op-3: hsl(189deg 30% 100%/25%);
}

html {
  --container-transition: .4s cubic-bezier(0, 0, 0, 1);
  --container-trans-staggered: .4 .4s cubic-bezier(0, 0, 0, 1);
  --max-height: calc(96vh - 1vh * var(--has-admin-bar,0) - var(--wp-admin--admin-bar--height, 0px));
  --max-width: max(94vw - 15px, 85vw);
  --app-height: min(var(--max-height), var(--max-width) * var(--aspect-ratio-i,1));
  --app-width: min(var(--max-height) * var(--aspect-ratio,1), var(--max-width));
  --app-size: min(var(--app-height), var(--app-width));
  --font-size: min(
  	0.02 * var(--app-size) + 5px,
  	0.01 * var(--app-size) + 10px
  );
  font-size: var(--font-size);
  --page-width: min(var(--app-size));
  --footerHeight: 5rem;
  /* --debug-aspect: 'atSquare'; */
  --aspect-ratio: 1.5;
  --aspect-ratio-i: 0.6666666;
}
@media (min-aspect-ratio: 8/5) {
  html {
    --aspect-ratio: 2;
    --aspect-ratio-i: 0.5;
  }
}
@media (min-aspect-ratio: 200001/300000) and (max-aspect-ratio: 800000/800001) {
  html {
    --aspect-ratio: 1;
    --aspect-ratio-i: 1;
  }
}
@media (max-aspect-ratio: 2/3) {
  html {
    --aspect-ratio: 0.5;
    --aspect-ratio-i: 2;
  }
}
html:has(body.admin-bar) {
  --has-admin-bar: 1;
}

html {
  --white-black: 255 255 255;
  --black-white: 0 0 0;
  --section-background-color: var(--dark-op-2);
  --section-border-color: var(--dark-tone-3);
  --bg: var(--dark);
  --bg-1: var(--dark-tone-2);
  --bg-2: var(--dark-op-2);
  --fg: var(--light);
  --fg-1: var(--light-tone-2);
  --fg-2: var(--light-tone-3);
  --fg-3: var(--light-op-3);
}
@media (prefers-color-scheme: light) {
  html:not(:has(.forceDarkMode)) {
    --white-black: 0 0 0;
    --black-white: 255 255 255;
    --section-background-color: var(--light-op-2);
    --section-border-color: var(--light-tone-3);
    --bg: var(--light);
    --bg-1: var(--light-tone-2);
    --bg-2: var(--light-op-3);
    --fg: var(--dark);
    --fg-1: var(--dark-tone-2);
    --fg-2: var(--dark-tone-3);
    --fg-3: var(--dark-op-3);
  }
}
html:has(.forceLightMode) {
  --white-black: 0 0 0;
  --black-white: 255 255 255;
  --section-background-color: var(--light-op-2);
  --section-border-color: var(--light-tone-3);
  --bg: var(--light);
  --bg-1: var(--light-tone-2);
  --bg-2: var(--light-op-3);
  --fg: var(--dark);
  --fg-1: var(--dark-tone-2);
  --fg-2: var(--dark-tone-3);
  --fg-3: var(--dark-op-3);
}

#synapse_content_area figure:has(img) {
  position: relative;
}
#synapse_content_area figure:has(img) .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

#synapse_content_area figure:has(img):after,
#synapse_content_area figure:has(img):before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

#synapse_content_area figure:has(img):after {
  background: hsl(189.5, 10%, 80%);
  mix-blend-mode: darken;
  opacity: 1;
}

#synapse_content_area figure:has(img):before {
  background: hsl(189.5, 0.5%, 20%);
  mix-blend-mode: lighten;
  opacity: 1;
}

.size-full, .size-full img {
  width: calc(var(--content-width, var(--app-width)) - 2rem);
}

body {
  display: grid;
  grid: "root" 1fr/1fr;
  width: 100vw;
  height: 100vh;
  gap: calc(var(--wp-admin--admin-bar--height, 0px) * 1);
  padding: 1.5rem;
  margin: 0;
  justify-items: center;
  align-items: start;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
}
body.admin-bar {
  grid: "admin-bar" var(--wp-admin--admin-bar--height, 0px) "root" 1fr/1fr;
}
@media (max-aspect-ratio: 2/3) {
  body {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  body.admin-bar #wpadminbar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(100% - var(--wp-admin--admin-bar--height, 46px), 100%);
    z-index: 1000;
  }
}
body #root {
  grid-area: root;
  height: 100%;
  position: relative;
  grid: "main" 1fr "footer" 3rem/1fr;
}
@media (max-aspect-ratio: 2/3) {
  body #root {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: min(100svh - 2rem - var(--wp-admin--admin-bar--height, 0px), 100svh);
    justify-content: space-between;
    padding-top: var(--wp-admin--admin-bar--height, 0px);
  }
}

footer {
  width: 100%;
  max-width: var(--app-width, 35rem);
  box-sizing: border-box;
}

main {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: main;
  display: grid;
  gap: 1rem;
  align-items: start;
  --graphSize: min(var(--app-width) * .3, var(--app-height) * .5);
  --graphShrink: 0.4; /* For highlighted layout */
  --graphShrunk: calc(var(--graphSize) * var(--graphShrink));
  --grid-standard:
  	"view graph" var(--graphSize)
  	"view synapses" auto / 1fr var(--graphSize);
  --grid-highlight:
  	"view graph" var(--graphShrunk)
  	"view synapses" calc(var(--app-height) - 5rem - var(--graphShrunk)) / 1fr var(--graphShrunk);
}
@media (min-aspect-ratio: 8/5) {
  main {
    --grid-standard:
    	"view graph" var(--graphSize)
    	"view synapses" auto / 1fr var(--graphSize);
    --grid-highlight:
    	"view graph" var(--graphShrunk)
    	"view synapses" calc(var(--app-height) - 5rem - var(--graphShrunk)) / 1fr var(--graphShrunk);
  }
}
@media (max-aspect-ratio: 2/3) {
  main {
    gap: 0;
    align-items: flex-start;
    align-content: center;
    justify-items: center;
    --graphSize: min(var(--app-width) * .6666, var(--app-height) * .3);
    height: auto;
    --grid-standard:
    	"graph" var(--graphShrunk)
    	"synapses" auto
    	"view" auto / 100%;
    --grid-highlight: var(--grid-standard);
    display: flex;
    flex-direction: column;
  }
}
footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: footer;
  font-size: calc(0.66666rem + 2px);
  line-height: 1.2;
  justify-content: space-between;
}

#wpadminbar {
  --size: calc(var(--wp-admin--admin-bar--height, 0px));
  grid-area: admin-bar;
  position: relative;
  top: unset;
  left: unset;
  background-color: var(--dark-op-2);
  padding: 0 calc(var(--size) * 0.5);
  border-radius: calc(var(--size) * 0.5);
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
  background-color: var(--dark-op-3);
  color: var(--primary);
}

#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label, #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, #wpadminbar > #wp-toolbar li.hover span.ab-label {
  color: var(--primary);
}

#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, #wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:focus strong, #wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:hover strong, #wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li a:hover, #wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:hover, #wpadminbar li #adminbarsearch.adminbar-focused:before,
#wpadminbar li .ab-item:focus .ab-icon:before, #wpadminbar li .ab-item:focus:before, #wpadminbar li a:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before, #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:before,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, n#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
  color: var(--primary);
}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
  background: transparent;
}

#wpadminbar .menupop .ab-sub-wrapper, #wpadminbar .shortlink-input {
  background-color: var(--dark-op-2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-bottom-left-radius: calc(var(--size) * 0.5);
  border-bottom-right-radius: calc(var(--size) * 0.5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", "Open Sans", sans-serif;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.5rem 0;
}

p {
  font-family: "Roboto", "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0.5rem 0;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

span {
  font: inherit;
}

a:link, a:visited {
  color: var(--primary-tone-2);
}

a:hover {
  color: var(--secondary);
}

main {
  /* &:after{
  	content: var(--debug-aspect);
  	position: absolute;
  	top: 0;
  	right: 0;

  } */
  transform-style: preserve-3d;
  perspective-origin: 50% 25%;
  perspective: calc((var(--app-width, 75vw) + var(--app-height, 75vh)) * 1.25);
  transition: 300ms;
  /* &:has(#synapse_graph), */
}
@media (max-aspect-ratio: 2/3) {
  main {
    --graphSize: min(var(--app-width) * .5);
    /* --grid-standard:
    	"a graph b" var(--graphSize)
    	"view view view" 1fr
    	"synapses synapses synapses" 5rem / 1fr var(--graphSize) 1fr; */
    align-items: center;
  }
  main #synapse_graph {
    transform: rotateX(-5deg) scale(var(--graphShrink));
    transform-origin: top;
    position: relative;
    margin-bottom: min(var(--graphShrunk) - var(--graphSize));
  }
  body main:not(.layout--highlight) #synapse_graph__openToggle {
    pointer-events: all;
  }
  main .layout--open-map #synapse_graph {
    transform: rotateX(-5deg);
  }
  body main.layout--open-map:not(.layout--highlight) #synapse_graph__openToggle {
    opacity: 1;
  }
  body main.layout--open-map #synapse_content_area {
    transform: translate3d(0, 0, -15rem) rotateX(10deg);
  }
  body main.layout--open-map #node_synapses {
    transform: translate3D(0, 0, -15rem) rotateX(15deg);
  }
  body main.layout--open-map #synapse_graph {
    z-index: 5;
    transform: translateZ(5rem);
    margin-bottom: 0;
  }
}
main #synapse_graph .synapse_graph_inner {
  width: var(--graphSize);
  height: var(--graphSize);
}
main.layout--standard {
  --content-width: calc(var(--app-width) - var(--graphSize) - 1rem);
  grid: var(--grid-standard);
}
@media (min-aspect-ratio: 200001/300000) {
  main.layout--highlight {
    --content-width: calc(var(--app-width) - var(--graphShrunk) - 1rem);
    grid: var(--grid-highlight);
  }
}
@media (min-aspect-ratio: 200001/300000) and (max-aspect-ratio: 2/3) {
  body main.layout--highlight #synapse_graph {
    transform: rotateX(-5deg) scale(var(--graphShrink));
    transform-origin: top;
  }
}
@media (min-aspect-ratio: 200001/300000) {
  main.layout--highlight #synapse_tree__bg {
    background-color: transparent;
  }
  main.layout--highlight.layout--open-map #synapse_content_area {
    transform: translateZ(-15rem) rotateY(15deg);
  }
}
@media (min-aspect-ratio: 200001/300000) and (max-aspect-ratio: 2/3) {
  main.layout--highlight.layout--open-map #synapse_content_area {
    transform: translate3d(0, 10rem, -20rem) rotateX(5deg);
  }
}
@media (min-aspect-ratio: 200001/300000) {
  main.layout--highlight.layout--open-map #node_synapses {
    transform: translateZ(-15rem) rotateY(-15deg);
  }
}
@media (min-aspect-ratio: 200001/300000) and (max-aspect-ratio: 2/3) {
  main.layout--highlight.layout--open-map #node_synapses {
    transform: translate3D(0, 10rem, -15rem) rotateY(-15deg);
  }
}
@media (min-aspect-ratio: 200001/300000) {
  main.layout--highlight.layout--open-map #synapse_graph {
    z-index: 5;
    transform: translateZ(5rem);
  }
  main.layout--highlight #synapse_graph {
    transform: scale(var(--graphShrink)) rotateY(-15deg) translate(66%, -66%);
  }
  main.layout--highlight #synapse_graph .synapse_graph_inner {
    transition: all 0.3s cubic-bezier(0, 0, 0.05, 1);
  }
}

#node_synapses {
  transition: 0.3s cubic-bezier(0, 0, 0.05, 1);
  padding: 1rem 0;
  grid-area: synapses;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-items: flex-start;
  transform-style: preserve-3d;
  transform: rotateY(-15deg);
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
}
@media (max-aspect-ratio: 2/3) {
  #node_synapses {
    transform: rotateX(5deg);
    width: var(--app-width);
  }
}
#node_synapses > a {
  font-size: 1rem;
  display: inline-flex;
  color: var(--fg-1);
  background-color: var(--bg-2);
  border: solid 0.05em var(--fg-3);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  line-height: 1;
  padding: 0.5em 1em;
}
#node_synapses > a:is(:hover, :focus) {
  color: var(--fg);
  background-color: var(--bg-1);
  border-color: var(--fg-2);
  transform: translateZ(1em);
}

p {
  font-size: 1rem;
}

h1 {
  font-size: calc(2.5rem + 7px);
}

h2 {
  font-size: calc(2rem + 6px);
}

h3 {
  font-size: calc(1.5rem + 5px);
}

h4 {
  font-size: calc(1.3rem + 4px);
}

h5 {
  font-size: calc(1.1rem + 3px);
}

h6 {
  font-size: calc(1rem + 2px);
}

#synapse_content_area {
  grid-area: view;
  transition: 0.3s cubic-bezier(0, 0, 0.05, 1);
  transform: rotateY(15deg);
  max-width: var(--content-width);
  width: var(--content-width);
  height: auto;
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-rows: auto 1fr;
  margin: 1rem 0 0 1rem;
}
@media (min-aspect-ratio: 200001/300000) {
  #synapse_content_area {
    max-height: calc(var(--app-height) - 10rem);
  }
}
@media (max-aspect-ratio: 2/3) {
  #synapse_content_area {
    padding: 1rem;
    transform: rotateX(0);
    --content-width: calc(var(--app-width) - 2rem);
    height: 100%;
  }
}
@media screen and (min-width: 480px), screen and (min-height: 640px) {
  #synapse_content_area {
    --chamfer-size: 1rem;
    margin: calc(var(--chamfer-size, 2rem) * 0.5) 0 0 calc(var(--chamfer-size, 2rem) * 0.5);
    padding: calc(var(--chamfer-size, 2rem) * 0.5);
  }
}
#synapse_content_area > div {
  width: inherit;
  overflow: auto;
}
#synapse_content_area > div::-webkit-scrollbar {
  width: 0.5rem;
  background-color: rgb(var(--white-black)/0.2);
}
#synapse_content_area > div::-webkit-scrollbar-thumb {
  background-color: rgb(var(--white-black)/0.2);
  border-radius: 0;
}
#synapse_content_area .wp-block-columns:has(+ .wp-block-columns) {
  margin-bottom: 0;
}
#synapse_content_area .wp-block-column > *:is(p, h1, h2, h3, h4, h5, h6) {
  margin-left: 1rem;
  margin-right: 1rem;
}
#synapse_content_area .wp-block-column .wp-block-image {
  max-width: 100%;
}
#synapse_content_area .wp-block-column .wp-block-image:only-child {
  margin: 0;
}
#synapse_content_area .background {
  left: -2rem;
  right: -1rem;
  top: -3rem;
  height: auto;
  width: auto;
}
@media (max-aspect-ratio: 2/3) {
  #synapse_content_area .background {
    left: -1rem;
    right: -1rem;
    top: -1rem;
  }
}
#synapse_content_area .background .frame {
  stroke: hsl(0, 0%, 100%);
  stroke-width: 0.25;
  fill: hsla(0, 0%, 100%, 0.03);
}
@media (prefers-color-scheme: light) {
  body:not(.forceDarkMode) #synapse_content_area .background .frame {
    stroke: hsl(0, 0%, 0%);
    fill: hsla(0, 0%, 100%, 0.1);
  }
}
#synapse_content_area .background .frame:has(body.forceLightMode), body.forceLightMode #synapse_content_area .background .frame {
  stroke: hsl(0, 0%, 0%);
  fill: hsla(0, 0%, 100%, 0.1);
}

/* ---------------------------------------------------------- */
/* -----------------   Graph Node Styles   ------------------ */
/* ---------------------------------------------------------- */
main:not(.layout--highlight) #synapse_graph__openToggle {
  opacity: 0;
  pointer-events: none;
}

#synapse_graph__openToggle {
  transition: all 0.3s cubic-bezier(0, 0, 0.05, 1);
  position: absolute;
  top: 0;
  right: 0;
  width: inherit;
  height: inherit;
  padding: inherit;
  box-sizing: inherit;
  text-align: center;
  vertical-align: middle;
  background: transparent;
  border-radius: 0;
  border: none;
  opacity: 0;
  color: rgb(var(--white-black));
  --chamfer-size: .5rem;
  --border-width: .1rem;
  --border-color: var(--fg-3);
  cursor: pointer;
}
.layout--open-map #synapse_graph__openToggle {
  padding: 0;
  top: -0.9rem;
  right: -0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  border: solid 0.1em var(--border-color);
  border-top: none;
  border-right: none;
  opacity: 1;
}
.layout--open-map #synapse_graph__openToggle:hover {
  background-color: var(--bg-2);
  --border-color: var(--fg-1);
}
#synapse_graph__openToggle span:after,
#synapse_graph__openToggle span:before {
  display: inline-block;
  content: "";
  height: 1em;
  width: 0.1em;
  background: rgb(var(--white-black)/0.5);
  position: absolute;
  left: calc(50% - 0.05em);
  top: calc(50% - 0.5em);
  transform: rotate(45deg);
}
#synapse_graph__openToggle span:before {
  transform: rotate(-45deg);
}

#synapse_graph {
  transition: all 0.3s cubic-bezier(0, 0, 0.05, 1);
  width: var(--graphSize);
  height: var(--graphSize);
  position: absolute;
  top: 0;
  right: 0;
  grid-area: graph;
  border-radius: 0;
  padding: 0;
  transform-style: preserve-3d;
  transform: rotateY(-15deg);
  --background-color: transparent;
  /*   text.graph__node__label {
  	} */
}
#synapse_graph .graph__node--l0 {
  filter: drop-shadow(0 0 0.1em rgb(var(--black-white))) brightness(1) contrast(2) drop-shadow(0 0 0.1em rgb(var(--white-black)/0.2));
}
@media (prefers-color-scheme: light) {
  body:not(.forceDarkMode) #synapse_graph .graph__node--l0 {
    filter: drop-shadow(0 0 0.1em white) brightness(0.8) contrast(1.5) drop-shadow(0 0 1.1em rgba(0, 0, 0, 0.2));
  }
}
#synapse_graph .graph__node--l0:has(body.forceLightMode), body.forceLightMode #synapse_graph .graph__node--l0 {
  filter: drop-shadow(0 0 0.1em white) brightness(0.8) contrast(1.5) drop-shadow(0 0 1.1em rgba(0, 0, 0, 0.2));
}
#synapse_graph > svg {
  width: calc(var(--graphSize) - 2rem);
  overflow: visible;
}
#synapse_graph .graph__node {
  position: absolute;
  z-index: 1;
}
#synapse_graph .graph__node:has(a:hover) {
  z-index: 3;
}
#synapse_graph .graph__node_inner {
  position: absolute;
}
#synapse_graph .graph__node__btn {
  all: unset;
  font: inherit;
  height: var(--node_size);
  height: 100%;
  width: var(--node_size);
  width: 100%;
  position: absolute;
  top: min(var(--node_size) * -0.5);
  top: 0%;
  left: min(var(--node_size) * -0.5);
  left: 0;
  border-radius: min(var(--node_size) * 0.5);
  border-radius: 50%;
  background: var(--fg-2);
}
#synapse_graph .graph__node__btn:is(:hover, :focus) {
  background: hsl(0, 0%, 70%);
}
#synapse_graph .graph__node__btn.hover {
  background: var(--secondary-op-1);
}
#synapse_graph .graph__node__btn.hover:is(:hover, :focus) {
  background: var(--secondary-tone-1);
}
#synapse_graph .graph__node__btn.active {
  background: var(--primary);
}
#synapse_graph .graph__node__btn.active:is(:hover, :focus) {
  background: var(--primary-tone-1);
}
#synapse_graph .synapse_graph_inner path {
  stroke: var(--fg-2);
  stroke-width: var(--stroke-width, 15);
  fill: none;
}
#synapse_graph .synapse_graph_inner path:has(~ foreignObject > .hover) {
  stroke: var(--secondary-op-1);
}
#synapse_graph .synapse_graph_inner path:has(~ foreignObject > .active) {
  stroke: var(--primary-op-1);
}
#synapse_graph .use_3d .graph__node__btn {
  transform: perspective(var(--perspective, 100vmax)) rotateY(calc(-1 * var(--p-)));
  transform-style: preserve-3d;
}
#synapse_graph .graph__node__label {
  font-size: calc(var(--label-size, 10) * 1rem);
  position: absolute;
  opacity: 0;
  bottom: 25%;
  width: 100%;
  left: 0;
  transform: translateY(0.5em);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  paint-order: stroke fill;
}
#synapse_graph .graph__node__label_text {
  fill: rgb(var(--white-black));
  stroke: rgb(var(--black-white));
  font-size: calc(var(--label-size, 10) * 1rem);
  stroke-width: calc(var(--label-size, 10) * 0.1rem);
}
#synapse_graph .graph__node__label_bg {
  opacity: 0;
}
#synapse_graph .graph__node__label--show {
  opacity: 1;
  transform: unset;
}
#synapse_graph foreignObject:has(.graph__node__label) {
  pointer-events: none;
}
#synapse_graph foreignObject:has(.graph__node__btn:hover) + .graph__node__label,
#synapse_graph .graph__node__btn:hover + .graph__node__label {
  opacity: 1;
  transform: unset;
}
#synapse_graph .graph__node:has(> * > .hover) > path {
  stroke: var(--secondary-op-1);
}
#synapse_graph .graph__node:has(> * > .active) > path {
  stroke: var(--primary);
}

#root {
  font: 300 normal 1rem/1.5 "Roboto", "Open Sans", sans-serif;
  gap: 1rem;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  grid-template: "main" 1fr "footer" var(--footerHeight, 3rem)/1fr;
  justify-content: center;
  justify-items: center;
  width: var(--app-width, min(35rem, 100vw - 1rem));
  height: var(--app-height, calc(100vh - var(--footerHeight, 3rem)));
  /* max-height: calc(var(--app-height) - 4rem);
  overflow: hidden; */
}
@media (min-aspect-ratio: 8/5) {
  #root {
    gap: 0.5rem;
  }
}

html {
  scroll-padding-top: 0px;
  margin-top: 0 !important;
  background-size: 100vw 100vh;
  background-color: rgb(var(--black-white));
  color: rgb(var(--white-black));
  height: 100vh;
  background-image: radial-gradient(ellipse at top, var(--bg-a), transparent), radial-gradient(ellipse at bottom, var(--bg-b), transparent);
  --bg-a: var(--dark);
  --bg-b: var(--dark-tone-2);
}
@media (prefers-color-scheme: light) {
  html:not(:has(.forceDarkMode)) {
    --bg-a: var(--light-tone-2);
    --bg-b: var(--light);
  }
}
html:has(.forceLightMode) {
  --bg-a: var(--light-tone-2);
  --bg-b: var(--light);
}
@media (max-aspect-ratio: 2/3) {
  html {
    min-height: 100svh;
    overflow: hidden;
  }
  html body {
    height: 100%;
    overflow-y: scroll;
  }
}

.synapse_footer__logo {
  --highlight-0: var(--primary-op-1);
  --highlight-1: var(--secondary-op-1);
  --fill-0: var(--light-tone-1);
  --fill-1: var(--light-tone-3);
  --fill-2: var(--light-tone-2);
  --fill-3: var(--light-tone-4);
}
.synapse_footer__logo a {
  transition: 300ms;
  opacity: 0.7;
}
.synapse_footer__logo a:hover, .synapse_footer__logo a:focus {
  opacity: 1;
}
@media (prefers-color-scheme: light) {
  body:not(.forceDarkMode) .synapse_footer__logo {
    --highlight-0: var(--primary-tone-1);
    --highlight-1: var(--secondary-tone-1);
    --fill-0: var(--primary-tone-2);
    --fill-1: var(--primary);
    --fill-2: var(--secondary-tone-2);
    --fill-3: var(--secondary);
  }
  body:not(.forceDarkMode) .synapse_footer__logo a {
    transition: 300ms;
  }
  body:not(.forceDarkMode) .synapse_footer__logo a:hover, body:not(.forceDarkMode) .synapse_footer__logo a:focus {
    filter: brightness(1.2);
  }
}
.synapse_footer__logo:has(body.forceLightMode), body.forceLightMode .synapse_footer__logo {
  --highlight-0: var(--primary-tone-1);
  --highlight-1: var(--secondary-tone-1);
  --fill-0: var(--primary-tone-2);
  --fill-1: var(--primary);
  --fill-2: var(--secondary-tone-2);
  --fill-3: var(--secondary);
}
.synapse_footer__logo:has(body.forceLightMode) a, body.forceLightMode .synapse_footer__logo a {
  transition: 300ms;
}
.synapse_footer__logo:has(body.forceLightMode) a:hover, .synapse_footer__logo:has(body.forceLightMode) a:focus, body.forceLightMode .synapse_footer__logo a:hover, body.forceLightMode .synapse_footer__logo a:focus {
  filter: brightness(1.2);
}
.synapse_footer__logo svg, .synapse_footer__logo img {
  width: calc(var(--footerHeight, 3rem) * 1.4592834);
  height: var(--footerHeight, 3rem);
}
.synapse_footer__menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.synapse_footer__menu a {
  color: hsla(0, 0%, 100%, 0.7);
}
.synapse_footer__menu a:is(:hover, :focus) {
  color: hsla(0, 0%, 100%, 0.9);
}
.synapse_footer__copy {
  text-align: right;
}

.graph__node__inner {
  position: absolute;
  --a_: var(--a, 0deg);
  --p_: var(--p-, var(--p, 0deg));
  --span_: calc(var(--span, 360deg) / var(--siblings, 1));
  --depth_: min(var(--depth, 0) + 1);
  --spread: 1;
  --siblings: 1;
  transform: rotateY(0);
  transform-style: preserve-3d;
}

.graph__node__btn--selected {
  --col: var(--primary-op-0) ;
}

.graph__node__btn--selected {
  outline: max(0.05em, 0.5px) solid var(--primary-op-1);
  outline-offset: max(0.05em, 0.5px);
}

#synapse_tree__graph_wrap {
  background: transparent;
  overflow: hidden;
}

#synapse_tree__bg {
  background: transparent;
  overflow: hidden;
  position: absolute;
  left: -1rem;
  bottom: -1rem;
  top: -1rem;
  right: -1rem;
  width: unset;
  height: unset;
  border-radius: 0;
  pointer-events: none;
  opacity: 0.25;
  color: var(--fg-1);
  --padding: 0px;
}
@media (prefers-color-scheme: light) {
  body:not(.forceDarkMode) #synapse_tree__bg {
    opacity: 0.5;
    color: var(--light);
  }
}
#synapse_tree__bg:has(body.forceLightMode), body.forceLightMode #synapse_tree__bg {
  opacity: 0.5;
  color: var(--light);
}
#synapse_tree__bg > svg {
  position: absolute;
  left: 0;
  bottom: -50%;
  --width: 1000%;
  width: var(--width);
  height: 200%;
  --speed: 20s;
  animation: wave var(--speed) -3s linear infinite;
  opacity: 0.6;
  --x1: .6;
  --dir: 1;
}
#synapse_tree__bg > svg:nth-of-type(2) {
  bottom: unset;
  top: -10%;
  --speed: 15s;
  opacity: 0.2;
  --flip: -1;
  --x1: .2;
  --dir: -1;
}
#synapse_tree__bg > svg:nth-of-type(3) {
  bottom: -12%;
  --speed: 30s;
  transform: scaleY(-1);
  opacity: 0.5;
  --x1: .7;
  --dir: 1;
}
@media (prefers-reduced-motion: reduce) {
  #synapse_tree__bg > svg {
    animation: none;
  }
}

svg.background {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
svg.background .frame {
  stroke: hsla(0, 0%, 100%, 0.1);
  stroke-width: 20;
  fill: none;
}

@keyframes wave {
  0% {
    left: calc((0 - var(--x1)) * var(--width));
  }
  100% {
    left: calc((0.5 * var(--dir) - var(--x1)) * var(--width));
  }
}
.synapse_tree__bg__wave {
  content: "";
  color: rgb(var(--white-black));
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -64 512 192'><path d='M 0,128 V 64 c 64,0 64,-16 128,-16 64,0 64,16 128,16 64,0 64,-16 128,-16 64,0 64,16 128,16 v 64 z' fill='hsl(0 0% 100%/.1)'/></svg>");
  background-size: stretch;
  position: absolute;
  left: 0;
  bottom: -50%;
  width: 1000%;
  height: 200%;
  --speed: 20s;
  /* animation: wave var(--speed) -3s linear infinite; */
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}
.synapse_tree__bg__wave > svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.synapse_tree__bg__wave > svg .frame {
  stroke: hsla(0, 0%, 100%, 0.1);
  stroke-width: 2;
  fill: none;
}
@media (prefers-reduced-motion: reduce) {
  .synapse_tree__bg__wave {
    animation: none;
  }
}

.synapse_tree__bg__wave:nth-of-type(2) {
  bottom: unset;
  top: -10%;
  /* animation: wave 15s linear reverse infinite; */
  --speed: 15s;
  opacity: 0.2;
  --flip: -1 ;
}

.synapse_tree__bg__wave:nth-of-type(3) {
  bottom: -12%;
  /* animation: wave 30s -3s linear infinite; */
  --speed: 30s;
  opacity: 0.5;
}

.has-chamfer {
  --a: var(--chamfer-size, 2rem);
  --p: var(--padding, var(--a));
  --x: calc(100% + var(--p));
  --y: calc(0% - var(--p));
  -webkit-clip-path: polygon(var(--x) calc(var(--x) - var(--a)), calc(var(--x) - var(--a)) var(--x), var(--y) var(--x), var(--y) var(--a), var(--a) var(--y), var(--x) var(--y), var(--x) calc(var(--x) - var(--a)));
          clip-path: polygon(var(--x) calc(var(--x) - var(--a)), calc(var(--x) - var(--a)) var(--x), var(--y) var(--x), var(--y) var(--a), var(--a) var(--y), var(--x) var(--y), var(--x) calc(var(--x) - var(--a)));
}

.chamfer-boxed {
  position: relative;
  --a: var(--chamfer-size, 2rem);
  --c: var(--border-width, .1rem);
  --b: calc(var(--a) + var(--c) * 0.43);
  --d: var(--background-color, var(--section-background-color));
  --e: var(--border-color, var(--section-border-color));
}
.chamfer-boxed:before, .chamfer-boxed:after {
  transition: inherit;
  top: calc(var(--a) * -0.5);
  left: calc(var(--a) * -0.5);
  content: "";
  display: block;
  height: calc(100% + var(--a));
  position: absolute;
  width: calc(100% + var(--a));
  z-index: -1;
}
.chamfer-boxed:after {
  -webkit-clip-path: polygon(100% calc(100% - var(--a)), calc(100% - var(--a)) 100%, 0% 100%, 0% var(--a), var(--a) 0%, 100% 0%, 100% calc(100% - var(--a)));
          clip-path: polygon(100% calc(100% - var(--a)), calc(100% - var(--a)) 100%, 0% 100%, 0% var(--a), var(--a) 0%, 100% 0%, 100% calc(100% - var(--a)));
  background-color: var(--d);
}
.chamfer-boxed:before {
  -webkit-clip-path: polygon(100% calc(100% - var(--a)), calc(100% - var(--a)) 100%, 0% 100%, 0% var(--a), var(--a) 0%, 100% 0%, 100% calc(100% - var(--a)), calc(100% - var(--c)) calc(100% - var(--b)), calc(100% - var(--c)) var(--c), var(--b) var(--c), var(--c) var(--b), var(--c) calc(100% - var(--c)), calc(100% - var(--b)) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--b)));
          clip-path: polygon(100% calc(100% - var(--a)), calc(100% - var(--a)) 100%, 0% 100%, 0% var(--a), var(--a) 0%, 100% 0%, 100% calc(100% - var(--a)), calc(100% - var(--c)) calc(100% - var(--b)), calc(100% - var(--c)) var(--c), var(--b) var(--c), var(--c) var(--b), var(--c) calc(100% - var(--c)), calc(100% - var(--b)) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--b)));
  background-color: var(--e);
}

.no-pointer-events {
  pointer-events: none;
}

.darkmode-toggle {
  position: relative;
}
.darkmode-toggle button {
  transition: ease 300ms;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  opacity: 0.5;
  background: var(--dark-op-2);
  --col-moon: var(--dark);
  --col-sun: var(--light);
}
.forceDarkMode .darkmode-toggle button {
  background: var(--light-op-2);
  --col-moon: var(--dark-tone-1);
  --col-sun: var(--dark-tone-3);
}
.forceLightMode .darkmode-toggle button {
  background: var(--dark-op-2);
  --col-moon: var(--light-tone-2);
  --col-sun: var(--light-tone-1);
}
.darkmode-toggle button:hover {
  cursor: pointer;
  background: var(--dark-tone-2);
  opacity: 1;
}
.darkmode-toggle button svg {
  width: 100%;
}
.darkmode-toggle:after {
  transition: 0.4s ease-out;
  animation: briefPopUp 2s ease-out;
  opacity: 0;
  position: absolute;
  top: -1em;
  left: calc(50% - 3.25em);
  right: calc(50% - 3.25em);
  padding: 0.25em 0.75em;
  background: rgb(var(--white-black)/0.5);
  border-radius: 0.75em;
  color: rgb(var(--black-white));
  text-align: center;
  content: "Auto";
}
.forceLightMode .darkmode-toggle:after {
  content: "Light mode";
  animation: briefPopUp 1.99s ease-out;
}
.forceDarkMode .darkmode-toggle:after {
  content: "Dark mode";
  animation: briefPopUp 2.01s ease-out;
}
.darkmode-toggle:hover:after {
  animation: briefPopUp 2.02s ease-out;
}

@keyframes briefPopUp {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  20% {
    opacity: 1;
    transform: translateY(-2em);
  }
  80% {
    opacity: 1;
    transform: translateY(-2em);
  }
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

/*# sourceMappingURL=index.css.map*/