.pie-wrapper {
  width: var(--pie-size);
  height: var(--pie-size);
  background: #64edc7;
  margin: 100px auto;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 5%;
  transform: rotate(81deg); }
  .pie-wrapper .d1 {
    width: calc(var(--pie-size) * 2);
    height: calc(var(--pie-size) * 2);
    position: absolute;
    top: calc(var(--pie-size) / -2);
    left: calc(var(--pie-size) / -2);
    pointer-events: none;
    hovinko: 162;
    transform: rotate(0deg); }
    .pie-wrapper .d1 div {
      width: calc(var(--pie-size) * 2);
      height: calc(var(--pie-size) * 2); }
      .pie-wrapper .d1 div:after {
        content: '';
        width: 0;
        height: 0;
        display: block;
        border: solid transparent;
        border-width: var(--pie-size);
        border-top-color: #64edc7;
        position: relative;
        transform: scaleX(6.3137027194); }
      .pie-wrapper .d1 div span {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 34%;
        font-size: 12px;
        text-align: center;
        z-index: 100;
        color: #fff;
        transform: rotate(-81deg); }
    .pie-wrapper .d1.d1 span {
      color: #000; }
  .pie-wrapper .d2 {
    width: calc(var(--pie-size) * 2);
    height: calc(var(--pie-size) * 2);
    position: absolute;
    top: calc(var(--pie-size) / -2);
    left: calc(var(--pie-size) / -2);
    pointer-events: none;
    hovinko: 108;
    transform: rotate(135deg); }
    .pie-wrapper .d2 div {
      width: calc(var(--pie-size) * 2);
      height: calc(var(--pie-size) * 2); }
      .pie-wrapper .d2 div:after {
        content: '';
        width: 0;
        height: 0;
        display: block;
        border: solid transparent;
        border-width: var(--pie-size);
        border-top-color: #faa257;
        position: relative;
        transform: scaleX(1.3763796163); }
      .pie-wrapper .d2 div span {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 34%;
        font-size: 12px;
        text-align: center;
        z-index: 100;
        color: #fff;
        transform: rotate(-216deg); }
    .pie-wrapper .d2.d1 span {
      color: #000; }
  .pie-wrapper .d3 {
    width: calc(var(--pie-size) * 2);
    height: calc(var(--pie-size) * 2);
    position: absolute;
    top: calc(var(--pie-size) / -2);
    left: calc(var(--pie-size) / -2);
    pointer-events: none;
    hovinko: 90;
    transform: rotate(234deg); }
    .pie-wrapper .d3 div {
      width: calc(var(--pie-size) * 2);
      height: calc(var(--pie-size) * 2); }
      .pie-wrapper .d3 div:after {
        content: '';
        width: 0;
        height: 0;
        display: block;
        border: solid transparent;
        border-width: var(--pie-size);
        border-top-color: #ee8f60;
        position: relative;
        transform: scaleX(0.9999986732); }
      .pie-wrapper .d3 div span {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 34%;
        font-size: 12px;
        text-align: center;
        z-index: 100;
        color: #fff;
        transform: rotate(-315deg); }
    .pie-wrapper .d3.d1 span {
      color: #000; }

body {
  background: #111; }

/*# sourceMappingURL=pie.css.map */