:root {
      --uk-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-text-large-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-heading-medium-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-heading-small-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h1-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h2-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h3-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h4-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h5-font-family: 'NeueHaasDisplay', sans-serif;
      --uk-h6-font-family: 'NeueHaasDisplay', sans-serif;
    }
    body { 
      height: 100%;
      margin: 0;
      min-height: 100vh; 
      display: flex; 
      flex-direction: column;
      font-family: 'NeueHaasDisplay', sans-serif;
      cursor: default;
      font-weight: 300;
    }

    footer {
      font-family: 'NeueHaasDisplay', sans-serif;
      font-size: 0.7em;
      font-weight: 100;
      background-color: #fafafa;
    }

    .main-content {
        flex: 1;
    }

    .uk-modal-body {
      font-family: 'NeueHaasDisplay', sans-serif;
    }

    .uk-modal-title {
      font-family: 'NeueHaasDisplay', sans-serif;
      font-weight: 500;
    }

    /* Remove UIKit default forced uppercase on nav items */
    .uk-navbar-nav > li > a {
      text-transform: none;
      font-family: 'NeueHaasDisplay', sans-serif;
    }

    /* Hamburger menu items size + font */
    .uk-nav-default > li > a {
      /*font-size: 1rem;*/
      font-family: 'NeueHaasDisplay', sans-serif;
    }

    .uk-logo {
      color: #111;
    }

    .uk-card-title {
      font-family: 'NeueHaasDisplay', sans-serif;
    }

    .nav-padding {
      padding-left: 1em;
      padding-right: 1em;
    }

    /* Dark mode: navbar also dark */
    .dark .uk-logo {
      color: #fff;
    }
    .dark .uk-navbar-container {
      background: #111 !important;
    }

    .dark body {
      background: #000;
      color: #fff;
    }

    .dark .uk-navbar-nav {
      color: #eee;
    }

    .dark .uk-navbar-nav .uk-active a {
      color: #fff;
    }

    .dark .uk-navbar-nav a:hover {
      color: #fff;
    }

    .dark .uk-card {
      background: #111;
    }

    .dark .uk-card-title {
      color: #eee;
      font-family: 'NeueHaasDisplay', sans-serif;
    }

    .dark .uk-card-body {
      color: #eee;
    }

    .dark .uk-form-label {
      color: #eee;
    }

    .dark .uk-modal-body {
      color: #000;
    }

    .dark .uk-modal-title {
      color: #000;
    }

    .dark footer {
      background: #111;
      color: #fff;
    }

    .modal-icon svg {
      vertical-align: middle;
      position: relative;
      top: -2px; /* fine-tune for perfect alignment */
    }

    .front-panel-grid {
      display: flex;
      align-items: flex-start;
      gap: 2em;
    }

    .knob-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1em;
      justify-items: center;
    }

    .knob {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 5em;
      user-select: none;
      margin-bottom: 0em;
      overflow: visible;
    }

    .knob-wrapper {
      position: relative;
      width: 50px;
      height: 50px;
    }

    .knob-label {
      font-size: 0.75em;
      text-align: center;
      width: 100%;
    }

    .knob-value-text {
      fill: #eee;
      font-size: 1.5em;
      font-weight: 300;
      font-family: "NeueHaasDisplay", sans-serif;
      pointer-events: none;
      opacity: 0.6;
    }

    .knob-value-input {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 3em;
      height: 18px;
      transform: translate(-50%, -50%);
      font-size: 12px;
      text-align: center;
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      border-radius: 3px;
      z-index: 9999 !important;
      background: #222;
      color: #eee;
    }