#explorer {
  width: 100%;
  height: 100dvh;
  display: flex;
  overflow: hidden;

  --cube: 4.5rem;

  > * {
    padding: var(--main-padding);
  }

  #chain {
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;

    .blocks {
      display: flex;
      flex-direction: column-reverse;
      gap: calc(var(--cube) * 0.75);
      margin-right: var(--cube);
      margin-top: calc(var(--cube) * -0.25);
    }

    .cube {
      margin-left: calc(var(--cube) * -0.25);
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      width: var(--cube);
      height: var(--cube);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      --face-color: var(--border-color);
      color: var(--color);
      transition:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 50ms;
      user-select: none;
      pointer-events: none;

      &:hover {
        --face-color: var(--inv-border-color);
        color: var(--background-color);
      }

      &:active,
      &.selected {
        color: var(--black);
        --face-color: var(--orange);
      }

      > * {
        pointer-events: auto;
      }

      .face {
        transform-origin: 0 0;
        position: absolute;
        width: var(--cube);
        height: var(--cube);
        padding: 0.1rem;
      }

      .right {
        background-color: oklch(from var(--face-color) calc(l - 0.05) c h);
        transform: rotate(-30deg) skewX(-30deg)
          translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
          scaleY(0.864);
      }

      .top {
        background-color: oklch(from var(--face-color) calc(l + 0.05) c h);
        transform: rotate(30deg) skew(-30deg)
          translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
          scaleY(0.864);
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        font-weight: 900;
        text-transform: uppercase;
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
      }

      .left {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
        background-color: var(--face-color);
        transform: rotate(30deg) skewX(30deg)
          translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
          scaleY(0.864);
      }

      .fees {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
    }
  }

  #block-details {
    flex: 1;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);

    h1 {
      margin-bottom: 1rem;

      code {
        font-size: 1.5rem;
        font-weight: 300 !important;
        font-family: Lilex;
        color: var(--off-color);
        letter-spacing: -0.05rem;
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.25rem 0;
      border-bottom: 1px solid var(--border-color);
    }

    .label {
      opacity: 0.5;
      white-space: nowrap;
    }

    .value {
      text-align: right;
      word-break: break-all;
    }
  }
}