#calculator p{background-color:#111;border-radius:.75em;color:#eee;display:inline-block;line-height:1.5em;margin:0 0 .75em;padding:.75em}#calculator a,.app .title h1{color:#fff;font-size:1.2599em}.figure{padding:1.5em}#ratio .major b,#ratio .major i,.scale,.scale .major i{color:#000}.scale span{border-bottom:1.5rem solid transparent;display:inline-block;height:.6em;line-height:.4em;overflow:visible;position:relative;text-align:center;width:.48em}.scale b{bottom:-1rem;display:block;font-size:.7937rem;font-weight:400;height:1rem;left:50%;line-height:1rem;margin-left:-2rem;position:absolute;text-align:center;width:4rem}.scale i{font-style:normal}.scale .major b{color:#000;font-weight:700}.e-5{font-size:.5rem}.e-4{font-size:.5743rem}.e-3{font-size:.6598rem}.e-2{font-size:.7579rem}.e-1{font-size:.8706rem}.e-_5{font-size:.933rem}.e0{font-size:1rem}.e1{font-size:1.1487rem}.e2{font-size:1.3195rem}.e3{font-size:1.5157rem}.e4{font-size:1.7411rem}.e5{font-size:2rem}.e6{font-size:2.2974rem}.e6_5{font-size:2.4623rem}.e7{font-size:2.639rem}.e8{font-size:3.0314rem}.e9{font-size:3.4822rem}.e10{font-size:4rem}.e11{font-size:4.5948rem}.e11_5{font-size:4.9246rem}.e12{font-size:5.278rem}.e12_9{font-size:6rem}.e13{font-size:6.0629rem}.e14{font-size:6.9644rem}.e15{font-size:8rem}.e16{font-size:9.1896rem}.e17{font-size:10.5561rem}.e18{font-size:12.1257rem}.e19{font-size:13.9288rem}.e20{font-size:16rem}.app,.group{display:inline-block}.group{position:relative;white-space:nowrap}#classic span,#exact span{min-width:1.25rem;width:.6667em}#ratio i{color:#ccc}#ratio b{color:#666}#diff .e-_5,#diff .e11_5,#diff .e6_5{left:-.24em}#diff .e12_9{left:-.0014em}#diff .missing i{color:#fff;text-shadow:0 0 .0625em #faa}#diff .missing b{color:#fcc}#diff .extra{bottom:0;position:absolute;z-index:2}#diff .extra b,#diff .extra i{color:red}.app{background-color:#eee;border:.0625em solid #ddd;border-radius:.75em;box-shadow:inset 0 0 .75em #dedede;padding:.375em;text-align:left}.app .settings,.app .title{margin:0 .0625em}.app .title{text-align:center;white-space:nowrap}.app .title h1{color:#333;font-style:italic;line-height:1.25em}.app .css,.app .preview{background-color:#fff;border:.0625em solid #ddd;border-radius:.75em;box-shadow:0 0 .75em #dedede;padding:2.25em;white-space:pre}.app .preview li{color:#000;line-height:1.375em;list-style-type:none;white-space:nowrap}.app .css{color:#333;display:block;font-family:monospace;line-height:1.5em}.app .css .value{font-weight:700}.app .css .symbol{color:#888}.app .settings{border:.0625em solid transparent;border-bottom:0;border-top:0;padding:.1875em 0;text-align:center;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;user-select:none;white-space:nowrap}.app a[target=_blank]{background-image:url(/articles/typographic-scale/images/external.svg);background-position:right 0 center;background-repeat:no-repeat;background-size:13px 13px;display:inline-block;padding-right:16px;text-decoration:none}.app a[target=_blank]:focus,.app a[target=_blank]:hover{text-decoration:underline}.showcase{padding:.75em 0;text-align:center}.text{position:relative}.text i,.text input{font-family:Optima,Arial,sans-serif;font-size:.7937rem;height:1rem;line-height:1rem;padding:0 .375rem}.text,.text i{display:inline-block}.text i{font-style:normal;min-height:1em;min-width:.5em}.text input{border:0;box-sizing:border-box;color:inherit;display:block;height:100%;left:0;outline:.0625em solid #666;position:absolute;resize:none;top:0;width:100%}.text input:focus{outline:.1875em solid #398ee7}.text input.error{outline:.0625em solid red;color:red}.text input.error:focus{outline:.1875em solid red}.hidden{position:fixed;left:-96em}