body{background:#000;font-family:sans-serif;color:#bbb;margin:0;user-select:none;display:flex;align-items:start}#sidebar{width:12rem;height:100vh;padding:1rem 0 0 1rem;box-sizing:border-box;flex:none;display:flex;flex-direction:column;>div{margin-bottom:.5rem}}#settings{flex:2}#settings,#logs{overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable;padding-right:.5rem}#file_picker{background:#fff1;border:.0625rem solid #bbb;padding:1rem 2rem;border-radius:.5rem;cursor:pointer;text-align:center}.label{padding-top:.75rem}input,#color_area{border:.0625rem solid #bbb;border-radius:.5rem;padding:.25rem .5rem}input,textarea{background:#0000;color:#bbb;&:focus{outline:none}}input{font:1rem sans-serif;width:2.5rem;text-align:right}#color_area{display:flex}textarea{font:1rem monospace;line-height:1rem;resize:none;overflow:hidden;margin:0;border:0;padding:0}#color_preview{width:1rem;flex:none;>div{height:1rem}}#logs{flex:3;font-size:.75rem;white-space:pre-wrap;user-select:text;>.highlight{text-shadow:#bbb 1px 1px,#bbb -1px 1px,#bbb 1px -1px,#bbb -1px -1px}}#controls,#footer{flex:none;text-align:center;padding-right:1rem}#controls{display:flex;justify-content:space-between}#zoom_out,#zoom_fill,#zoom_in,#zoom_render{width:2rem;border:.0625rem solid #bbb;border-radius:.5rem;padding:.25rem;box-sizing:border-box;cursor:pointer}#zoom_out{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="%23bbb" d="m0 12 3-3 2 2-3 3H0M8 0a6 6 0 0 1 0 12A6 6 0 0 1 8 0m0 2a4 4 0 0 0 0 8 4 4 0 0 0 0-8M5 5h6v2H5"/></svg>')}#zoom_fill{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="%23bbb" d="M0 0h5v2H2v3H0m9-5h5v5h-2V2H9M0 9h2v3h3v2H0m14-5v5H9v-2h3V9M4 4h6v6H4"/></svg>')}#zoom_in{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="%23bbb" d="m0 12 3-3 2 2-3 3H0M8 0a6 6 0 0 1 0 12A6 6 0 0 1 8 0m0 2a4 4 0 0 0 0 8 4 4 0 0 0 0-8M5 5h2V3h2v2h2v2H9v2H7V7H5"/></svg>')}#zoom_render{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="%23bbb" d="M2 0h2v14H2M6 0h2v14H6m4-14h2v14h-2M0 2v2h14V2M0 6v2h14V6M0 10v2h14v-2"/></svg>')}#footer>a{color:#bbb;font:small-caps 700 1rem sans-serif;text-decoration:none}#canvas_area{height:100vh;display:flex;flex:1;overflow:auto;align-items:safe center;justify-content:safe center}canvas{&.locked{width:100%;height:100%;object-fit:contain}&.pixelated{image-rendering:pixelated}}