main.css

/* Axioms */
:root {font-family: sans-serif;
  --font-alt: serif; --ratio: 1.5; --line-height: 1.3; --measure: 65ch;
  font-size: var(--root-fontsize);
  font-size: 1rem;
  --s1: 1rem;
}
/* Rudimentary Css Resets */
* { max-width: var(--measure);line-height: var(--line-height);}
html,body,div,header,nav,main,footer,section, aside, article, svg, img, .navbar__top > * { max-width: none; }
*, *::before, *::after { box-sizing: border-box; background-color: inherit; font-family: inherit; color: inherit; overflow-wrap: break-word; margin: 0; padding: 0; border-style: solid; border-width: 0px; border-color: currentColor; font-size: inherit; font-weight: inherit; }

body {height: 100vh;padding: 1% calc((100vw - 80em) / 2);} /* body padding squeezes wrapper until: 60em*16px=960px; */

.stack { --space: 1.5rem;  display: flex; flex-direction: column; justify-content: flex-start; }
.stack > * + * {  margin-top: var(--space); }
.with-sidebar > * { display: flex; flex-wrap: wrap; margin: calc((var(--s1) / 2 * -1) - 0em); width: auto;padding: 0em;} /* wRapper */
.with-sidebar > * > * { margin: calc(var(--s1) / 2); flex-grow: 1; } /* sidebar & main frame */
.with-sidebar > * > :first-child { flex-basis: 0; flex-grow: 999; min-width: calc(65%); } /* min article width: 50% of the viewport */

article { } /* svg Container */
article, aside {background: #eee;} /* make it greeey */
aside {padding: 1em;height: auto; display: flex; flex-direction: column; justify-content: center;} /* Buttons Container */
aside * { width: auto;}
aside > ul.stack {list-style-type: none; --space: .1rem;} /* Stack Spacing refine */
button {display: inline-block; border: 1px solid #111; text-align: center;padding: .05em .5em;}

svg {height: auto; max-height: 95vh;}

.active {background-color: lime;} /* Active Buttons */
.heatmaps * {fill: red;stroke-width: 0;opacity: .4; transition: .2s;} /* Heatmap Layers, Transition: to fade-in */
.topview * {fill: #00000010;stroke: #000;stroke-width: 1px;} /* Car Styling */
.topview ellipse {fill: #fff;} /* Car Lights */
.hide, .hidden, [hidden] {opacity: 0;} /* Hide HeatMaps */
.window {fill:#fff;} /* Car Windows */

@keyframes pulse {
  from {transform: scale(.99, .99) translate(.5%, .5%);}
  50% {transform: scale(1.02, 1.02) translate(-1%, -1%);}
  to {transform: scale(.99, .99) translate(.5%, .5%);}
}
.pulse_container > */*, .heatmap, .pulse*/ {animation: ease pulse 2s infinite; }