:root{--ink:#292c2b;--lemon:#e3ed78;--paper:#f5f5ee;--line:#bfc3b7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 'Malgun Gothic',sans-serif}a{color:inherit}button,input{font:inherit}button{background:var(--ink);color:var(--lemon);border:1px solid var(--ink);padding:12px 18px;cursor:pointer}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid #a86b22;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 5vw;background:var(--ink);color:var(--paper)}header>a:first-child{text-decoration:none;font-size:27px;font-weight:bold}header span{display:block;font:9px monospace;letter-spacing:3px;color:var(--lemon)}header>a:last-child{font-size:12px}.heading{text-align:center;padding:50px 6vw 35px}.heading>p:first-child{font:11px monospace;letter-spacing:3px}h1{font-size:clamp(35px,5.2vw,70px);line-height:1.3;letter-spacing:-3px;margin:25px 0}.heading>p:last-child{font-size:14px}.lab{padding:20px 6vw 50px}form{display:grid;grid-template-columns:1fr 70px 1fr;gap:20px;align-items:center}fieldset{border:1px solid var(--line);background:white;padding:25px}legend{font:12px monospace;letter-spacing:3px;padding:0 10px}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{font-size:12px;display:block;margin:10px 0}input{display:block;width:100%;min-width:0;border:1px solid #929b8b;padding:11px;margin-top:7px;background:var(--paper);color:var(--ink);border-radius:0}.versus{font:30px Georgia,serif;text-align:center}form>button{grid-column:1/-1;padding:17px}.diagram-heading{display:flex;justify-content:space-between;gap:20px;font:10px monospace;padding:15px 0;margin-top:25px}.diagram{background:var(--ink);position:relative}.diagram svg{display:block;width:100%;height:420px}.diagram>p{position:absolute;top:45%;left:15px;right:15px;text-align:center;color:var(--lemon);font-size:13px}.hint,#error,#comparison{font-size:12px}#error{color:#944b2e}.result-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px}.result-head h2{font-size:25px;font-weight:normal}.result-head button{font-size:11px}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}caption{text-align:left;font-size:11px;padding:12px 0}td,th{text-align:right;white-space:nowrap;padding:15px;border-bottom:1px solid var(--line)}th{background:#e8eadf;font-weight:normal}th:first-child,td:first-child{text-align:left}#method{display:grid;grid-template-columns:1fr 1.4fr;gap:6vw;padding:50px 6vw;background:#e8eadf;align-items:center}figure{margin:0}figure img{width:100%;height:auto;display:block}figcaption{font-size:10px;margin-top:8px}#method h2{font-size:30px;font-weight:normal;line-height:1.5}#method p{font-size:13px}#method>div>p:first-child{font:10px monospace;letter-spacing:3px}footer{padding:25px 6vw;background:var(--ink);color:white;font-size:11px}@media(max-width:750px){form{grid-template-columns:1fr;gap:15px}.versus{font-size:23px}fieldset{padding:20px}form>button{grid-column:auto}.diagram svg{height:280px}.diagram-heading{font-size:9px}.result-head{flex-wrap:wrap;gap:0}#method{grid-template-columns:1fr}.heading{padding:30px 5vw}.lab{padding:15px 5vw 40px}header>a:first-child{font-size:23px}}@media(max-width:390px){.two{grid-template-columns:1fr}.diagram svg{height:220px}.diagram-heading{flex-direction:column;gap:5px}}