.rank-pyramid{max-width:520px;margin:12px auto;color:#433b2c}.rank-pyramid-rows{display:grid;gap:5px}.rank-pyramid-row{display:grid;grid-template-columns:45% 1fr;gap:12px;align-items:center}.rank-pyramid-shape{display:flex;align-items:center;justify-content:center;height:62px;font-size:25px;font-weight:750;opacity:.65}.rank-pyramid-shape mjx-container{margin:0!important}.rank-pyramid-shape svg{max-width:100%;height:1.1em;width:auto}.rank-shape-1{clip-path:polygon(50% 0,75% 100%,25% 100%);background:#b7ecc5;padding-top:20px;height:72px}.rank-shape-2{clip-path:polygon(25% 0,75% 0,87.5% 100%,12.5% 100%);background:#b4d7fa}.rank-shape-3{clip-path:polygon(12.5% 0,87.5% 0,100% 100%,0 100%);background:#ffd491}.rank-pyramid-label{display:grid;gap:2px;font-size:14px;line-height:1.3}.rank-pyramid-label strong{font-size:17px}.rank-pyramid-row.is-current .rank-pyramid-shape{opacity:1}.rank-pyramid-row.is-current .rank-pyramid-label{font-weight:650}.rank-current{font-size:12px;color:#805414}.rank-pyramid-rule{font-size:14px;line-height:1.5;margin:12px 0 0!important;text-align:center}@media(max-width:420px){.rank-pyramid-row{grid-template-columns:40% 1fr;gap:8px}.rank-pyramid-label{font-size:12px}.rank-pyramid-shape{font-size:21px}.rank-pyramid-label strong{font-size:15px}}

/* Clip the coloured floor only, never its mathematical symbols. */
.rank-pyramid-shape{position:relative;isolation:isolate;clip-path:none;background:transparent;padding:0;opacity:1;overflow:visible}
.rank-pyramid-shape::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.65}
.rank-shape-1::before{clip-path:polygon(50% 0,75% 100%,25% 100%);background:#b7ecc5}
.rank-shape-2::before{clip-path:polygon(25% 0,75% 0,87.5% 100%,12.5% 100%);background:#b4d7fa}
.rank-shape-3::before{clip-path:polygon(12.5% 0,87.5% 0,100% 100%,0 100%);background:#ffd491}
.rank-pyramid-signs{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:24px;max-width:70%;color:#24363a}
.rank-shape-1 .rank-pyramid-signs{position:absolute;bottom:9px;font-size:22px;max-width:35%}
.rank-pyramid .rank-pyramid-signs svg{display:inline-block!important;width:auto!important;height:1em!important;max-width:100%;vertical-align:middle}
.rank-pyramid-row.is-current .rank-pyramid-shape::before{opacity:1}
@media(max-width:420px){.rank-pyramid-signs{font-size:21px}.rank-shape-1 .rank-pyramid-signs{font-size:20px;bottom:10px}}