*,*:before,*:after{position:relative;box-sizing:border-box;margin:0}:root{font-family:Roboto Mono,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--primary-100: #ffffea;--primary-300: #f5f5e9;--primary-500: #e8e7d5;--primary-700: #4e4e48;--primary-900: #20200f;--app-bg: var(--primary-300);--lines-and-borders: var(--primary-900);--canvas: var(--primary-100);--circle-fill: var(--primary-900);--menu: var(--primary-500);--button-active-bg: var(--primary-100);--button-inactive-bg: var(--menu);--text: var(--primary-900);--inactive-stuff: var(--primary-700);--button-x-offset: 2px;--button-y-offset: 4px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;min-width:320px;min-height:100vh;background:var(--app-bg);color:var(--text);font-size:24px}.center-children{display:flex;place-content:center;place-items:center}main{display:flex;flex-direction:column;gap:0px;height:517px;width:288px;padding:0;border:1px solid var(--primary-900)}#canvas{background:var(--canvas);flex:1 1 auto}.circle{fill:none;stroke:var(--lines-and-borders);stroke-width:1px}.selected{fill:var(--circle-fill)}#menu{display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px;background-color:var(--menu);border-top:1px solid var(--lines-and-borders)}#slider-div{height:36px;display:flex;align-items:center}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:100%;height:4px;background:var(--primary-900)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:36px;background-color:var(--primary-100);border:3px solid var(--primary-900)}input[type=range]:disabled{height:1px;background-color:var(--inactive-stuff)}input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--menu);border:1px solid var(--inactive-stuff)}#buttons{display:flex;gap:8px}button{font-family:monospace;letter-spacing:-0rem;font-size:18px;font-weight:400;height:48px;width:50%;display:flex;justify-content:center;align-items:center;gap:4px;border:3px solid var(--lines-and-borders);background-color:var(--button-active-bg);transition-duration:.1s}button svg{stroke:var(--primary-900);stroke-width:2px;width:20px;height:20px}button:not(:disabled){box-shadow:var(--button-x-offset) var(--button-y-offset) 0 var(--lines-and-borders);transform:translate(calc(0px - var(--button-x-offset)),calc(0px - var(--button-y-offset)))}button:disabled{background-color:var(--button-inactive-bg)!important;border-width:1px;border-color:var(--inactive-stuff);color:var(--inactive-stuff)}button:disabled svg{stroke:var(--inactive-stuff)}button:active{box-shadow:none;transform:translate(0);transition:"transform"}