:root{font-family:sans-serif;font-size:16px}html,body{margin:0;padding:0;height:100%}h2{font-size:inherit;font-weight:700;margin:0}.g-top{margin-top:var(--g)}body{display:flex;align-items:stretch;background-color:#fffeed;--light-color: #EDEDED;--middle-color: #A89C83;--darker-color: #7A6F5F;--dark-color: #4A4335;--g: 15px;color:var(--dark-color);accent-color:var(--dark-color);-webkit-user-select:none;-ms-user-select:none;user-select:none}#main-view{flex:1;min-width:0;min-height:0;position:relative}#main-overlay{position:absolute;left:0;top:0;right:0;bottom:0}#main-view .input-method{position:absolute;left:var(--g);top:var(--g)}#main-view .clear{position:absolute;right:var(--g);top:var(--g)}#main-view .stats{position:absolute;left:var(--g);bottom:var(--g)}#side-panel{flex:none;overflow-x:hidden;overflow-y:auto;min-width:30vw}#controls{padding:var(--g)}#controls>*:not(:last-child){margin-bottom:calc(.6 * var(--g))}#detail-view{flex:none;width:100%;padding-top:100%;margin-left:2px}#main-view,#detail-view{position:relative}canvas{display:block;position:absolute;left:0;top:0;bottom:0;right:0;background-color:#e8dfcc}button{font-size:inherit;font-family:inherit;color:inherit;border:none;background-color:var(--middle-color);padding:6px 12px}button:hover{background-color:var(--darker-color)}label[for=threshold-range]{display:flex;justify-content:space-between}input[type=range]{width:100%;margin:0}input[type=checkbox]{width:1.2em;height:1.2em;margin:0 .4em 0 0}.checkbox{display:flex;align-items:center}