body { margin:0; min-height:100vh; min-height:100dvh; background:#2b2f33; color:#eee; font-family:system-ui,sans-serif;
       display:flex; flex-direction:column; align-items:center; padding:.75rem; box-sizing:border-box;
       user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.back { align-self:flex-start; color:#9cc9ee; text-decoration:none; }
h1 { letter-spacing:.3em; margin:.25rem 0 .6rem; font-size:clamp(1.2rem,5vw,2rem); }
/* Fit both width and height: the unit is square-ish, so cap its width by the space left under the header and above the result line. */
#unit { width:min(100%, 560px, calc((100vh - 11rem) * 1.0017)); width:min(100%, 560px, calc((100dvh - 11rem) * 1.0017));
        min-width:240px; filter:drop-shadow(0 10px 20px #000a); }
#dials { display:block; width:100%; height:auto; }
#switch:focus-visible { outline:3px solid #ffd60a; }
#result { font-size:clamp(1rem,4.5vw,1.4rem); margin:.8rem 0; min-height:2em; text-align:center; padding:0 .5rem; }