.conversion-practice{margin:2.5rem 0;padding:clamp(1.2rem,4vw,2rem);border:1px solid rgba(11,45,38,.14);border-radius:24px;background:linear-gradient(145deg,#f8fbf2,#eef8f4);box-shadow:0 18px 50px rgba(11,45,38,.08)}
.conversion-practice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.65rem}.conversion-practice-head h2{margin:.1rem 0 0}.conversion-practice-badge{flex:none;padding:.45rem .7rem;border-radius:999px;background:#0b2d26;color:#fff;font-weight:800;font-size:.82rem}
.conversion-practice form{margin-top:1.25rem}.conversion-slider{display:block;padding:1rem;border-radius:16px;background:#fff;border:1px solid rgba(11,45,38,.12)}.conversion-slider>span{display:flex;justify-content:space-between;gap:1rem;align-items:center}.conversion-slider output{color:#0b6957;font-weight:900}.conversion-slider input{width:100%;margin:.9rem 0 .2rem;accent-color:#0b6957}
.conversion-presets{display:flex;flex-wrap:wrap;gap:.55rem;margin:.85rem 0 1.1rem}.conversion-presets button{min-height:44px;padding:.55rem .85rem;border:1px solid rgba(11,45,38,.2);border-radius:999px;background:#fff;color:#0b2d26;font:inherit;font-weight:750;cursor:pointer}.conversion-presets button:hover,.conversion-presets button:focus-visible{background:#0b2d26;color:#fff}
.conversion-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.conversion-results>div,.temperature-columns>div,.volume-vessels>div{padding:1rem;border-radius:16px;background:#fff;border:1px solid rgba(11,45,38,.12);text-align:center}.conversion-results span,.temperature-columns span,.volume-vessels span{display:block;color:#4b625d;font-size:.82rem}.conversion-results strong,.temperature-columns strong,.volume-vessels strong{display:block;margin-top:.25rem;color:#0b2d26;font-size:clamp(1rem,3vw,1.25rem)}
.mass-scale{display:grid;grid-template-columns:80px 1fr 80px;align-items:end;gap:.6rem;max-width:430px;margin:1.35rem auto .5rem}.mass-scale i{height:5px;border-radius:99px;background:#0b2d26;box-shadow:0 10px 0 -1px #b7dc6a}.mass-pan{display:grid;place-items:center;min-height:62px;border:3px solid #0b6957;border-radius:12px 12px 28px 28px;background:#dff5ec;font-weight:900}.mass-pan-alt{border-color:#6c4ca0;background:#efe6fa}
.temperature-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.temperature-columns i{position:relative;display:block;width:30px;height:120px;margin:0 auto .65rem;border:3px solid #0b2d26;border-radius:18px;background:#e8f2ef;overflow:hidden}.temperature-columns i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--level,50%);background:linear-gradient(#ffb85c,#ff6948);transition:height .2s ease}
.volume-vessels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.volume-vessels i{position:relative;display:block;width:72px;height:104px;margin:0 auto .65rem;border:3px solid #0b2d26;border-top-width:2px;border-radius:8px 8px 18px 18px;background:#fff;overflow:hidden}.volume-vessels b{position:absolute;left:0;right:0;bottom:0;height:var(--fill,25%);background:linear-gradient(#8ddcf0,#4168e8);transition:height .2s ease}
.time-track{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;margin:1.5rem 0 .5rem;padding-top:18px;color:#4b625d;font-size:.78rem}.time-track::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;border-radius:99px;background:#dce8e4}.time-track i{position:absolute;left:0;top:4px;width:var(--time-width,3.125%);height:10px;border-radius:99px;background:#0b6957;transition:width .2s ease}.time-track span:nth-of-type(2){text-align:center}.time-track span:last-child{text-align:right}.conversion-reset{margin-top:1.1rem}
@media(max-width:640px){.conversion-practice-head{display:block}.conversion-practice-badge{display:inline-block;margin-top:.75rem}.conversion-results{grid-template-columns:1fr 1fr}.temperature-columns,.volume-vessels{grid-template-columns:1fr}.temperature-columns i{height:84px}.mass-scale{grid-template-columns:66px 1fr 66px}.conversion-slider>span{align-items:flex-start;flex-direction:column;gap:.25rem}}
@media(prefers-reduced-motion:reduce){.temperature-columns i::after,.volume-vessels b,.time-track i{transition:none}}