.rng > span { display: flex; justify-content: space-between; gap: 10px; }
.rng output { font: 600 15px var(--mono); background: var(--ink); color: #fff; padding: 2px 8px; border-radius: 6px; }
input[type=range] { width: 100%; height: 44px; accent-color: var(--coral); }
.big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.big div { border: 3px solid var(--ink); border-radius: 14px; padding: 14px; display: grid; gap: 2px; background: var(--cream); }
.big b { font: 400 clamp(28px, 4vw, 44px)/1 var(--poster); }
.big span { font-size: 14px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; }
.bar i { order: 2; display: block; height: 26px; border: 2px solid var(--ink); border-radius: 6px; background: var(--lav); width: 0; transition: width .4s; }
.bar:last-child i { background: var(--coral); }
.bar span { font: 500 12px var(--mono); text-transform: uppercase; }
@media (max-width: 520px) { .big { grid-template-columns: minmax(0, 1fr); } .bar { grid-template-columns: 110px minmax(0, 1fr); } }