body{background-color:var(--background);color:var(--text);font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}header,footer{background-color:var(--background-plus)}main{background-color:var(--primary-minus)}input,button,select{background-color:var(--background);border-color:var(--foreground);color:var(--text);outline-color:var(--accent)}button{border-radius:.25em}button:hover,button:focus{cursor:pointer;border-color:var(--foreground-plus);background-color:var(--background-minus)}button:hover:focus{border-color:var(--foreground-plus-plus)}button:active{background-color:var(--background)}input:focus,select:focus{border-color:var(--foreground-plus)}fieldset{border-color:var(--primary-plus);color:var(--primary-text)}legend{font-weight:700}input:user-invalid{outline:2px solid var(--error)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}kbd{background-color:var(--background);border-radius:3px;border:1px solid var(--background-plus);box-shadow:0 1px 1px color-mix(in srgb,var(--background-minus-minus),transparent 20%),0 2px color-mix(in srgb,var(--foreground-plus-plus),transparent 20%);color:var(--text);display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}:root{--gray-0: hsl(222, 15%, 0%);--gray-1: hsl(222, 15%, 10%);--gray-2: hsl(222, 15%, 20%);--gray-3: hsl(222, 15%, 30%);--gray-4: hsl(222, 15%, 40%);--gray-5: hsl(222, 15%, 50%);--gray-6: hsl(222, 15%, 60%);--gray-7: hsl(222, 15%, 70%);--gray-8: hsl(222, 15%, 80%);--gray-9: hsl(222, 15%, 90%);--gray-10: hsl(222, 15%, 100%);--primary-darkest: hsl(222, 40%, 20%);--primary-dark: hsl(222, 40%, 40%);--primary: hsl(222, 40%, 50%);--primary-light: hsl(222, 70%, 70%);--primary-lightest: hsl(222, 40%, 80%);--accent-darkest: hsl(5, 80%, 20%);--accent-dark: hsl(15, 80%, 40%);--accent: hsl(25, 80%, 50%);--accent-light: hsl(35, 90%, 60%);--accent-lightest: hsl(45, 80%, 80%);--text: var(--gray-10);--background-minus-minus: var(--gray-0);--background-minus: var(--gray-1);--background: var(--gray-2);--background-plus: var(--gray-3);--background-plus-plus: var(--gray-4);--foreground-minus-minus: var(--gray-2);--foreground-minus: var(--gray-3);--foreground: var(--gray-4);--foreground-plus: var(--gray-5);--foreground-plus-plus: var(--gray-6);--primary-minus: var(--primary-dark);--primary-plus: var(--primary-light);--primary-text: var(--primary-lightest);--accent-minus: var(--accent-dark);--accent-plus: var(--accent-light);--accent-text: var(--accent-darkest);--error-dark: hsl(0, 70%, 35%);--error: hsl(0, 70%, 50%);--error-light: hsl(0, 70%, 65%);--error-minus: var(--error-dark);--error-plus: var(--error-light);--warning-dark: hsl(30, 70%, 35%);--warning: hsl(40, 70%, 50%);--warning-light: hsl(55, 70%, 65%);--warning-minus: var(--warning-dark);--warning-plus: var(--warning-light);--success-dark: hsl(120, 70%, 25%);--success: hsl(120, 70%, 40%);--success-light: hsl(120, 70%, 65%);--success-minus: var(--success-dark);--success-plus: var(--success-light);--info-dark: hsl(200, 70%, 35%);--info: hsl(200, 70%, 50%);--info-light: hsl(200, 70%, 65%);--info-minus: var(--info-dark);--info-plus: var(--info-light)}@media (prefers-color-scheme: light){:root{--text: var(--gray-0);--background-minus-minus: var(--gray-10);--background-minus: var(--gray-9);--background: var(--gray-8);--background-plus: var(--gray-7);--background-plus-plus: var(--gray-6);--foreground-minus-minus: var(--gray-8);--foreground-minus: var(--gray-7);--foreground: var(--gray-6);--foreground-plus: var(--gray-5);--foreground-plus-plus: var(--gray-4);--primary-minus: var(--primary-light);--primary-plus: var(--primary-dark);--primary-text: var(--primary-darkest);--accent-minus: var(--accent-light);--accent-plus: var(--accent-dark);--accent-text: var(--accent-darkest);--error-minus: var(--error-light);--error-plus: var(--error-dark);--warning-minus: var(--warning-light);--warning-plus: var(--warning-dark);--success-minus: var(--success-light);--success-plus: var(--success-dark);--info-minus: var(--info-light);--info-plus: var(--info-dark)}}*{box-sizing:border-box}body{margin:0;min-height:100vh}#app{display:flex;justify-content:space-between;align-items:stretch;flex-direction:column;min-height:100vh}#app>*{padding-inline:1em}main,section{margin:2em;padding:2em;gap:1em;align-self:center;display:flex;justify-content:center;align-items:stretch;position:relative}form{max-width:50ch}form>*+*{margin-top:1em}fieldset{display:flex;flex-direction:column}legend{position:relative}input,select{padding:.25em}button,input[type=submit]{padding:.5em;width:100%}input[type=radio]{padding-inline:0}canvas{flex-grow:1;align-self:stretch;object-fit:contain;max-height:100%;border-width:1px;margin:1em;padding:0}.input-grid{column-gap:.25em;row-gap:.5em}.radio-group{row-gap:.25em}.input-grid{display:grid;grid-template-columns:max-content 1fr max-content;grid-auto-flow:row;align-items:center}.input-grid .label{grid-column:1 / 2;justify-self:right;font-weight:700;-webkit-user-select:all;user-select:all}.input-grid .label:after{content:":";-webkit-user-select:none;user-select:none}.input-grid .value{grid-column:2 / 3}.input-grid .unit{grid-column:3 / 4;justify-self:left;-webkit-user-select:none;user-select:none}.input-grid button,.input-grid input[type=submit]{grid-column:1 / 4}.input-grid label.radio{grid-column:2 / 4;justify-self:left;font-weight:700;-webkit-user-select:all;user-select:all}.input-grid input[type=radio],.input-grid input[type=checkbox]{grid-column:1 / 2;margin-block:0}