.gr{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:stretch}
.gr-in,.gr-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.gr-in{display:grid;gap:22px;align-content:start}
.gr-in label{display:grid;gap:8px;font-weight:600;font-size:15px;position:relative}
.gr-in output{position:absolute;right:0;top:0;color:var(--brand);font-weight:700}
.gr-in input[type=range]{accent-color:var(--brand);width:100%;padding:0}
.gr-big{font:700 clamp(36px,5vw,56px)/1 var(--font-h);color:var(--muted)}
.gr-big strong{color:var(--brand)}
.gr-big small{display:block;font:500 15px var(--font-b);color:var(--muted);margin-top:8px}
#grText{margin:16px 0 24px;color:var(--muted)}
.gr-bars{display:flex;align-items:flex-end;gap:10px;height:175px}
.gr-bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.gr-bars i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#5b84e6,var(--brand));transition:height .6s cubic-bezier(.22,.61,.2,1)}
.gr-bars b{color:var(--ink)}
.gr-note{margin-top:16px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.gr{grid-template-columns:1fr}}