:root {
  --d-unit: 10px;
  --d-margin: calc(var(--d-unit) * 1.5);

  --c-light: #fff;
  --c-light-rgb: 255, 255, 255;
  --c-dark: #222;
  --c-dark-rgb: 34, 34, 34;
  --c-accent: #5fe6b2;
  --c-accent-rgb: 95, 230, 178;

  --c-pot-bg: linear-gradient(10deg, rgba(var(--c-accent-rgb), 0.15) 0%, rgba(var(--c-accent-rgb), 0.05) 100%);
  --c-balance-bar-bg: linear-gradient(90deg, rgba(var(--c-accent-rgb), 0.075) 0%, rgba(var(--c-accent-rgb), 0.175) calc(100% - 10px), rgba(var(--c-accent-rgb), 0.275) 100%);

  --transition-s: 150ms;
  --transition-m: 300ms;
  --transition-l: 500ms;
  --transition-xl: 700ms;
  --easing: cubic-bezier(0.65, 0, 0.35, 1); /* easeInOutCubic */
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* kerning, ligatures and contextual alternatives */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

  /*
  when font-feature-settings are used, safari gets a bug triggering early
  line breaks inside flex items. This fixes it until the real fix ships.
  See https://github.com/rsms/inter/issues/321
  */
  letter-spacing: 0.000001px;

  font-kerning: normal;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.1;
  background: var(--c-dark);
  color: var(--c-light);

  & * {
    box-sizing: border-box;
  }
}

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

.unstyled-input {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  outline: none;
  font: inherit;
  border-radius: 0;
}

button,
.button,
.radio-label {
  cursor: pointer;
}

button.icon-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--c-accent);
  transition: opacity var(--transition-s);
  opacity: 0.5;

  /* increase click target */
  padding: 10px;
  margin: -10px;

  .no-touch &:hover,
  .touch &:active {
    opacity: 1;
  }
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.mono {
  font-weight: 300;
  letter-spacing: 0.1em;
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
}

.ui-heading {
  font-size: 9px;
}

template {
  display: none !important;
}