#about_desktop_parts {
 overflow: hidden;

 >scroller->scroll-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);
  padding: var(--spacing);

  body.modern & {

   .version {
    display: flex;
    flex-flow: column nowrap;

    >span {
     display: flex;

     .label {
      flex-grow: 1;
     }
    }
   }

   h2 {
    font: inherit;
    margin: 0;
    padding: 0;
    color: var(--bg-un-mode-er);
    text-transform: uppercase;
    text-align: center;
   }

   .meter-box,
   .update-control,
   .developer-tools {
    min-width: 220px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: calc(var(--spacing) / 2);
    padding: var(--spacing);
    background: var(--bg-mode);
    border-radius: var(--spacing);
   }

   .meters {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing);
    align-items: center;
    width: 100%;

    >.meter-box {

     >.meter-reading {
      font-size: 22px;
      font-weight: 500;
      line-height: 1.1;
      color: var(--fg);

      span {
       font-size: 13px;
       font-weight: 400;
       color: var(--fg-light-er);
      }

      body.vintage & {
       font-size: 18px;
      }
     }

     >.meter-track {
      height: 8px;
      border-radius: 999px;
      background: var(--bg-dark);
      overflow: hidden;

      body.dark & {
       background: var(--bg-un-mode-er);
      }

      >.meter-fill {
       height: 100%;
       border-radius: 999px;
       transition: width 0.4s cubic-bezier(.4, 0, .2, 1);
      }
     }

     >.meter-subline {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--fg-light-er);

      body.dark & {
       color: var(--fg-mode-er);
      }
     }
    }
   }
  }

  body.vintage & {

   .update-control,
   .developer-tools {
    width: 372px;
    flex-flow: row nowrap;
    justify-content: space-between;

    @media (width < 396px) {
     width: 180px;
     flex-flow: column nowrap;
    }

    .version {
     flex-grow: 1;
     display: flex;
     flex-flow: column nowrap;
     max-width: calc(180px - var(--spacing) * 2);

     >* {
      display: flex;
      flex-flow: row nowrap;
      gap: var(--spacing);

      .label {
       flex-grow: 1;
      }
     }
    }

    button {
     padding: 5px var(--spacing);
     box-shadow: var(--outset);

     &.down {
      box-shadow: var(--deep-inset);
     }
    }
   }

   .pie-chart,
   .update-control,
   .developer-tools {
    box-shadow: var(--groove);
    padding: var(--spacing);
    position: relative;
    display: flex;
    gap: var(--spacing);
    align-items: center;

    h2 {
     font: inherit;
     position: absolute;
     top: calc(-.5 * var(--default-font-size));
     left: calc(var(--spacing) / 2);
     padding: 0 2px;
     margin: 0;
     background-color: var(--bg);
    }
   }

   .pie-charts {
    display: flex;
    flex-flow: row wrap;
    gap: var(--spacing);
    min-width: stretch;
    justify-content: center;

    .pie-chart {
     flex-basis: 180px;
     flex-flow: column nowrap;

     img {
      image-rendering: pixelated;
     }

     .legend,
     .capacity {
      display: flex;
      flex-flow: row nowrap;
      gap: var(--spacing);
      align-self: stretch;
      white-space: nowrap;

      .swatch {
       width: 15px;
       height: 15px;
       box-shadow: var(--deep-inset);
       flex-shrink: 0;
      }

      .label {
       flex-grow: 1;

       .capacity & {
        margin-left: calc(15px + var(--spacing));
       }
      }
     }
    }
   }
  }
 }
}