.encoder-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}.encoder-form{display:grid;grid-template-columns:1fr 120px;gap:12px}.encoder-form label{display:grid;gap:7px;color:var(--muted);font-size:10px}.encoder-form input,.encoder-form select{width:100%;min-height:45px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--text);font:600 14px var(--sans)}.encoder-form .full{grid-column:1/-1}.encoded-resistor{display:flex;align-items:center;justify-content:center;min-height:145px}.encoded-body{position:relative;width:min(330px,70%);height:82px;border-radius:38px;background:#d9c59d;box-shadow:inset 0 -10px 20px rgba(80,55,25,.16)}.encoded-body:before,.encoded-body:after{content:"";position:absolute;top:40px;width:100px;height:3px;background:#98a0a3}.encoded-body:before{right:100%}.encoded-body:after{left:100%}.encoder-bands{position:absolute;inset:0 28px;display:flex;align-items:stretch;justify-content:space-around}.encoder-band{display:block;width:19px;height:82px;box-shadow:inset 1px 0 rgba(255,255,255,.2),inset -1px 0 rgba(0,0,0,.15)}.encoder-result{display:grid;grid-template-columns:1fr 1fr;gap:12px}.encoder-result>div{padding:18px;border-radius:14px;background:#071522;color:#fff}.encoder-result span{display:block;color:#91a5b1;font-size:9px;letter-spacing:.11em}.encoder-result b{display:block;margin-top:7px;color:var(--el-amber);font:600 22px var(--display)}.encoder-note{margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.band-explainer{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.band-explainer article{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--el-panel)}.band-explainer b{display:block;color:#a76700;font:600 22px var(--display)}.band-explainer strong{display:block;margin:11px 0 6px;font-size:13px}.band-explainer p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}html[data-theme=dark] .encoder-form input,html[data-theme=dark] .encoder-form select{background:#0c1d2d}html[data-theme=dark] .band-explainer article{border-color:#2c4559}@media(max-width:800px){.encoder-layout,.band-explainer{grid-template-columns:1fr 1fr}}@media(max-width:520px){.encoder-layout,.band-explainer,.encoder-result{grid-template-columns:1fr}.encoder-form{grid-template-columns:1fr}.encoded-body{width:58%;height:68px}.encoder-band{height:68px}.encoded-body:before,.encoded-body:after{top:33px;width:70px}}