body{--ratio:0.5;--maxw:900px;--mid:#ccc;--tab:#f0f0f0;--font:#000;--back:#fff}body.darkmode{--mid:#22272e;--tab:#2d333b;--font:#ccc;--back:#1e232a}body,html{background:var(--tab);font-family:monospace;height:100%;margin:0;padding:0;width:100%}body{flex-direction:column;height:100vh}body,header{display:flex}header{align-items:center;background:var(--mid);color:var(--font);flex-direction:row;font-size:18px;justify-content:space-between;position:fixed;width:100%;z-index:1}header>div{padding:6px 8px}main{display:flex;flex:1;padding-top:40px;position:relative}.cv_col{width:100%}.cv_col>canvas{aspect-ratio:var(--ratio);border:1px solid var(--mid);border-radius:5px;box-sizing:border-box;cursor:pointer;display:block;height:auto;margin:15px auto;max-height:var(--maxw);max-width:var(--maxw);width:min(100%,var(--maxw),calc(var(--maxw)*var(--ratio)))}.cv_col>canvas.hidden{display:none}.ui_in,.ui_out{bottom:0;box-sizing:border-box;overflow-y:scroll;padding:45px 10px 10px;position:fixed;top:0;width:200px}.ui_in::-webkit-scrollbar,.ui_out::-webkit-scrollbar{display:none}.ui_hidden{display:none}.bt_btns{display:flex;gap:10px}.icon{aspect-ratio:1/1;background:var(--font);cursor:pointer;display:inline-block;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-size:contain;mask-size:contain;width:25px}.icon.bars{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h12m0 0a3 3 0 1 0 6 0 3 3 0 0 0-6 0m-6 8h12M9 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E")}.icon.moon{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M17.39 15.14A7.33 7.33 0 0 1 11.75 1.6c.23-.11.56-.23.79-.34a8.2 8.2 0 0 0-5.41.45 9 9 0 1 0 7 16.58 8.42 8.42 0 0 0 4.29-3.84 5.3 5.3 0 0 1-1.03.69'/%3E%3C/svg%3E")}.icon.code{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m17 17 5-5-5-5M7 7l-5 5 5 5m7-14-4 18'/%3E%3C/svg%3E")}.icon.info{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512m-40-176h24v-64h-24a24 24 0 1 1 0-48h48a24 24 0 0 1 24 24v88h8a24 24 0 1 1 0 48h-80a24 24 0 1 1 0-48m40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64'/%3E%3C/svg%3E")}@media (max-width:600px){.cv_col{margin:0 10px}}@media (min-width:600px) and (max-width:800px){.cv_col{margin-left:200px;margin-right:10px}}@media (min-width:800px){.cv_col{margin:0 200px}.ui_out{right:0}.bt_btn{display:none}.ui_in,.ui_out{display:block!important}}.help_overlay{align-items:center;backdrop-filter:blur(6px);background:#0005;display:flex;inset:0;justify-content:center;padding:15px;position:fixed;z-index:100}.help_overlay.hidden{display:none}.help_cont{background:var(--tab);border:2px solid var(--mid);border-radius:5px;box-sizing:border-box;color:var(--font);max-height:100%;max-width:900px;overflow:scroll;padding:5px 15px;text-align:justify;width:100%}.help_cont::-webkit-scrollbar{display:none}