.mini-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #28262c
}

.mini-logo span {
    font-weight: 600;
    letter-spacing: -.04em
}

.mini-section {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #aaa7af;
    padding: 13px 10px 4px
}

.metric-row {
    grid-template-columns: repeat(4, 1fr)
}

.metric {
    min-width: 0
}

.metric strong {
    font-size: 20px
}

.comparison-chart {
    position: relative
}

.comparison-chart:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 31px;
    height: 1px;
    background: #dedbe8;
    transform: rotate(-7deg);
    opacity: .9
}

.comparison-chart span:nth-child(even) {
    background: linear-gradient(#8d78ef, #c8c0fa)
}

.activity-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px
}

.activity-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 8px
}

.activity-avatar.purple {
    background: #eeeafd;
    color: #7357ed
}

.activity-avatar.orange {
    background: #fff0e6;
    color: #e99457
}

.activity-avatar.blue {
    background: #e6f2fc;
    color: #4b9bd6
}

.activity-line div {
    min-width: 0
}

.activity-line b {
    font-size: 9px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.activity-line small {
    display: block;
    color: #aaa7af;
    font-size: 8px;
    margin-top: 2px
}

.infra-preview {
    background: #fff;
    border: 1px solid #e7e5e9;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 12px
}

.infra-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr .7fr;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #f0eff2;
    padding: 8px 0;
    font-size: 8px;
    color: #96939c
}

.infra-row b {
    font-size: 9px;
    color: #39363e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.infra-head {
    border-top: 0;
    color: #aaa7af;
    font-size: 8px;
    padding-top: 8px
}

.resource-icon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    font-style: normal;
    margin-right: 4px
}

.resource-icon.purple {
    background: #eeeafd;
    color: #7357ed
}

.resource-icon.orange {
    background: #fff0e6;
    color: #e99457
}

.infra-row em {
    font-style: normal;
    font-size: 8px
}

.infra-row .online {
    color: #32a46b
}

.infra-row .paused {
    color: #a39f27
}

@media(max-width:760px) {
    .metric-row {
        grid-template-columns: repeat(2, 1fr)
    }

    .infra-preview {
        display: none
    }
}

.comparison-chart:after {
    display: none
}

.comparison-chart svg {
    display: block;
    width: 100%;
    height: 86px;
    overflow: visible
}

.comparison-chart .chart-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.comparison-chart .chart-line-full {
    stroke: #b8b6bc;
    stroke-width: 2
}

.comparison-chart .chart-line-half {
    stroke: #151518;
    stroke-width: 2.5
}

.comparison-chart span {
    display: none
}

.mini-team {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 7px 6px 8px;
    padding: 6px 7px;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background: #f2f2f2;
    color: #3c3c3c;
    font-size: 8px;
    box-shadow: 0 1px 4px -3px #000
}

.mini-team img {
    width: 13px;
    height: 13px;
    object-fit: contain
}

.mini-team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mini-team b {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400
}

.mini-divider {
    height: 1px;
    margin: 0 7px 5px;
    background: #ddd
}

.mini-logo {
    display: none
}

.mini-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 21px;
    margin: 1px 4px;
    padding: 3px 6px;
    border-radius: 4px;
    color: #55525c;
    font-size: 8px;
    white-space: nowrap
}

.mini-nav img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: .75
}

.mini-nav.active {
    background: #e9e9ea;
    color: #242228;
    font-weight: 600
}

.mini-nav.active img {
    opacity: 1
}

.mini-section {
    position: relative;
    padding: 7px 7px 3px;
    color: #3c3c3c;
    font-size: 8px;
    margin: 0
}

.mini-section-projects b {
    position: absolute;
    right: 7px;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 400;
    line-height: 10px
}

.mini-projects {
    margin: 0 5px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    padding: 4px 6px;
    color: #8b8890;
    font-size: 7px
}

.mini-projects span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 0
}

.mini-projects span+span {
    border-top: 1px solid #f0eff2
}

.mini-team {
    background: #f2f2f2
}

.mini-nav.active {
    background: #e3e3e4
}

.mini-section {
    color: #3c3c3c
}

.mini-divider {
    background: #d7d7d7
}