.itr-bentuk {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2em;
    height: 2em;
    border-radius: .6em;
    background: var(--c, #0a4495);
    color: #fff;
    font-size: .8em;
}

.itr-batang-daftar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8em;
}

.itr-batang {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label angka" "jalur jalur";
    gap: .35em .8em;
    align-items: center;
    transition: opacity .3s ease;
}

.itr-batang-label {
    grid-area: label;
    display: flex;
    align-items: center;
    gap: .6em;
    min-width: 0;
    font-weight: 700;
}

.itr-batang-teks {
    overflow-wrap: anywhere;
}

.itr-batang-angka {
    grid-area: angka;
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.itr-batang-angka small {
    opacity: .7;
    font-size: .8em;
}

.itr-batang-jalur {
    grid-area: jalur;
    height: .8em;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
}

.itr-batang-isi {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c, #0a4495);
    transform: scaleX(var(--w, 0));
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.itr-batang-daftar.is-ungkap .itr-batang.is-salah {
    opacity: .4;
}

.itr-tanda-benar {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .15em .6em;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .75em;
    font-weight: 800;
}

.itr-awan {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3em .9em;
    padding: .5em;
    line-height: 1.1;
}

.itr-kata {
    font-weight: 800;
    color: var(--c);
    font-size: calc(1rem + var(--s, .5) * 2.4rem);
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
    animation: itrMuncul .45s cubic-bezier(.16, 1, .3, 1) both;
}

.itr-awan.is-padat .itr-kata {
    font-size: calc(.85rem + var(--s, .5) * 1.4rem);
}

.itr-bintang {
    display: inline-flex;
    gap: .15em;
    color: #f59e0b;
}

.itr-bintang.is-besar {
    font-size: 1.6em;
}

.itr-skala-hasil {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.4em;
    align-items: center;
}

.itr-skala-rata {
    display: grid;
    justify-items: center;
    gap: .2em;
    text-align: center;
}

.itr-skala-rata b {
    font-size: 3.2em;
    line-height: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.itr-skala-rata small {
    opacity: .7;
}

.itr-skala-sebaran {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45em;
}

.itr-skala-sebaran li {
    display: grid;
    grid-template-columns: 3em minmax(0, 1fr) 2.5em;
    gap: .6em;
    align-items: center;
}

.itr-skala-label {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-weight: 700;
}

.itr-skala-label i {
    color: #f59e0b;
    font-size: .8em;
}

.itr-tembok {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2 220px;
    column-gap: .8em;
}

.itr-tembok-item {
    break-inside: avoid;
    margin-bottom: .8em;
    padding: .8em 1em;
    border-radius: 14px;
    background: #fff;
    border-left: 5px solid var(--c, #0a4495);
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
    color: #16202f;
    animation: itrMuncul .4s cubic-bezier(.16, 1, .3, 1) both;
}

.itr-tembok-item p {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.itr-tembok-item.is-sembunyi {
    opacity: .5;
    border-left-color: #94a3b8;
}

.itr-kosong-kecil {
    margin: 0;
    padding: 1em;
    text-align: center;
    opacity: .7;
}

@keyframes itrMuncul {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 520px) {
    .itr-skala-hasil {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .itr-batang-isi,
    .itr-kata,
    .itr-tembok-item {
        transition: none;
        animation: none;
    }
}