/* Global */  :root {   --dark-color: 96, 96, 96;   --gray-color: 217, 217, 217;   --white-color: 255, 255, 255; }  body {   font-size: 14px;   line-height: 16px;   color: rgb(var(--dark-color));   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }  #app {   display: flex;   min-height: 100vh;   padding: 5px 5px 6px; background-color:#333}  * {   user-select: none;   -webkit-user-drag: none;   -webkit-user-select: none; }  /* Elements */  input {color: #e2e2e2;}  legend {   font-weight: bold; }  fieldset {   padding: 6px 6px 10px;   border: 1px solid rgb(var(--gray-color)); }  [disabled] {   opacity: 0.8; }  fieldset > div {   display: flex;   align-items: center; }  fieldset + fieldset {   margin-top: 6px; }  fieldset > div + div, fieldset > div + fieldset {   margin-top: 9px; }  input[type='number'] {   margin: 0 8px;   min-width: 24px;   text-align: center;   border: 1px solid transparent; }  input[type='number']:focus {   border-color: rgb(var(--dark-color)); }  input[type='number']::selection {   background-color: rgb(var(--gray-color)); }  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {   margin: 0;   -webkit-appearance: none; }  /* Checkboxes */  .pretty.p-default input:checked ~ .state label:after {   background-color: rgb(var(--dark-color)) !important; }  /* Components */  .vue-slider {   flex: 1; }  .vue-slider-rail {   background-color: rgb(var(--gray-color)); }  .vue-slider-process {   background-color: rgb(var(--dark-color)); }  .vue-slider-step {   width: 100%;   height: 100%;   border-radius: 50%;   background-color: rgb(var(--white-color));   box-shadow: 0 0 0 3px rgb(var(--gray-color)); }  .vue-slider-step.active {   background-color: rgb(var(--dark-color));   box-shadow: 0 0 0 3px rgb(var(--dark-color)); }  .vue-slider-dot-handle-focus {   box-shadow: 0 0 1px 2px rgba(var(--dark-color), 0.36); }  .vue-slider-disabled, .vue-slider-dot-handle-disabled {   cursor: default; }  /* Application */  .page {   flex: 1;   display: flex;   flex-direction: column; }  .menu {   flex: 1;   padding: 0;   display: flex;   list-style: none;   flex-direction: column; }  .hidden {   display: none; }  .button {   border: none;   padding: 6px 10px;   transition: opacity 0.2s;   color: rgb(var(--white-color));   background-color: rgb(var(--dark-color)); }  .button:hover {   opacity: 0.8; }  fieldset .button {   width: 24px;   height: 24px;   padding: 4px;   background-color: #333; }  .menu + div {   flex: 1;   margin-top: 6px;   margin-bottom: 6px; }  .menu:not(:only-child) {   flex: 0; }  .menu-item {   transition: opacity 0.2s; }  .menu-item:hover {   opacity: 0.8; }  .menu-item + .menu-item {   margin-top: 5px; }  .menu-item:last-child {   margin-top: auto; }  .menu-item > a {display: flex;padding: 6px 10px;text-decoration: none;color: #eee;background-color: #555;}  .menu-item > a > img {width: 16px;height: 16px;margin-right: 9px;background-color: #555;}  .menu-item > a > span + img {   margin-right: 0;   margin-left: auto; }