:root{--paint_perspective:1000;--paint_distance:-100;--paint_rotate:0;--paint_distance_x:0;--paint_scale:0.25;--paint_scale_layer_0:1;--paint_scale_layer_1:1;--paint_scale_layer_2:1;--paint_scale_layer_3:1;--paint_scale_layer_4:1;--paint_scale_layer_5:1;--paint_scale_layer_6:1;--paint_scale_layer_7:1;--paint_setop_display:none;--paint_hue_trace:0;--paint_sat_trace:0;--paint_lum_trace:0;--paint_hue_back:210;--paint_back_sat:100;--paint_back_lum:50}body{overflow:auto}section#paint{min-height:300vmin;min-width:300vmin}div#DI_stat_paint>div[data-layer_n]{--paint_perspectiveX:calc(var(--paint_perspective) * 1px);--paint_translateX:calc( var(--paint_distance) * var(--paint_distance_x) * 1px);--paint_rotateY:calc( var(--paint_rotate) * 1deg );display:grid;position:absolute;background:hsla(var(--paint_hue_back) calc(var(--paint_back_sat) * 1%) calc(var(--paint_back_lum) * 1%)/ 1);perspective-origin:center center;transform:perspective(var(--paint_perspectiveX)) translateX(var(--paint_translateX)) rotateY(var(--paint_rotateY)) scale(var(--paint_scale_layer))}div#DI_stat_paint>div[data-layer_n]>canvas{grid-area:1/-1;background:0 0}div#DI_stat_paint>div[data-layer_n="0"]{--paint_distance_x:-3;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_0) )}div#DI_stat_paint>div[data-layer_n="1"]{--paint_distance_x:-2;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_1) )}div#DI_stat_paint>div[data-layer_n="2"]{--paint_distance_x:-1;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_2) )}div#DI_stat_paint>div[data-layer_n="3"]{--paint_distance_x:0;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_3) )}div#DI_stat_paint>div[data-layer_n="4"]{--paint_distance_x:1;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_4) )}div#DI_stat_paint>div[data-layer_n="5"]{--paint_distance_x:2;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_5) )}div#DI_stat_paint>div[data-layer_n="6"]{--paint_distance_x:3;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_6) )}div#DI_stat_paint>div[data-layer_n="7"]{--paint_distance_x:4;--paint_scale_layer:calc( var(--paint_scale) * var(--paint_scale_layer_7) )}div#DI_stat_paint>div[data-layer_b="0"]{display:none}div#DI_paint_settings{display:none;z-index:10;position:fixed;top:2em;left:0;width:24ch;height:fit-content;border-bottom-right-radius:8px;box-shadow:0 0 0 1000vmax hsla(210 11% 31% /.75);transform:translateX(-24ch);transition:transform .5s ease}input#IN_paint_settings:checked~div#DI_paint_settings{display:block;overflow-X:hidden;overflow-Y:auto;transform:translateX(0)}input#IN_paint_settings:checked~div#DI_paint_settings>aside{display:flex;flex-direction:column;gap:1em;width:100%;height:fit-content}input#IN_paint_settings:checked~div#DI_paint_settings>aside>nav{flex-direction:column;gap:1.5em}input#IN_paint_settings:checked~div#DI_paint_settings>aside>nav>label>span[data-role=open]{background:hsla(-60 72% 79% /1)}input#IN_paint_settings:checked~div#DI_paint_settings>aside>nav>label:hover>span{background:0 0}input#IN_paint_settings:checked~div#DI_paint_settings>aside>div,input#IN_paint_settings:checked~div#DI_paint_settings>aside>ul{margin:0 2em}ul[id^=UL_paint_layer_]>li{padding:0;list-style:none}ul[id^=UL_paint_layer_]>li>input{display:none}ul[id^=UL_paint_layer_]>li>label{display:grid;justify-items:center;margin:2px 0;border-radius:2px;border:1px solid hsla(210 11% 31% /.5);font-size:85%}ul[id^=UL_paint_layer_]>li>label:not(:first-of-type):hover{filter:brightness( .7 );background:hsla(210 11% 31% /.25)}ul[id^=UL_paint_layer_]>li>input:checked+label{background:hsla(210 11% 43% /1)}ul[id^=UL_paint_layer_]>li:not(:first-child)>label{cursor:pointer}ul[id^=UL_paint_layer_]>li:not(:first-child)>label[for]:hover{filter:brightness( .7 );background:hsla(210 11% 31% /.25)}ul[id^=UL_paint_layer_]>li:before{content:''}ul[id^=UL_paint_layer_]>li[data-layer_b="0"]{opacity:.25}ul[id^=UL_paint_layer_]>li#LI_paint_layer_set_deviation>label{margin-top:1em;border:none;cursor:auto}ul[id^=UL_paint_layer_]>li#LI_paint_layer_set_deviation>input{display:block;width:100%;background:0 0;cursor:pointer;transform:scaleY(.5)}ul#UL_paint_layer_setop{display:var(--paint_setop_display)}ul#UL_paint_layer_setop>label{text-transform:none}div#DI_paint_layer_setup{display:flex;flex-direction:column;gap:.25em;padding:0}div#DI_paint_layer_setup>label{width:100%;text-align:center;text-transform:uppercase;border-radius:4px;border:2px solid hsla(210 11% 31% /.75);font-size:85%}div#DI_paint_layer_setup>label:hover{filter:invert( .5 ) brightness( 1.3 )}div[id^=DI_paint_slide]{display:flex;flex-direction:column;position:relative;padding:1em;height:fit-content}div[id^=DI_paint_slide]>input[type=range]{position:absolute;margin:-1em 0;width:100px;background:0 0;cursor:pointer;transform:scaleY(.5)}div[id^=DI_paint_slide]>input[type=range]:nth-of-type(2n){width:200px;transform:translate(-.5em,1em) rotate(90deg) scaleY(.3);transform-origin:top left}div[id^=DI_paint_slide]>input#IN_paint_hue_rangeY_n{width:720px}div[id^=DI_paint_slide]>input[type=range]:focus{outline:0}div[id^=DI_paint_slide]>input[type=range]::-webkit-slider-runnable-track{width:100px;height:16px}div[id^=DI_paint_slide]>div{display:grid}div[id^=DI_paint_slide]>div>canvas{grid-area:1/-1;background:0 0;cursor:crosshair}div[id^=DI_paint_slide]>label#LA_paint_hue_trace{top:calc(var(--paint_hue_trace) * 1px)}div[id^=DI_paint_slide]>label#LA_paint_sat_trace{top:calc(var(--paint_sat_trace) * 1px)}div[id^=DI_paint_slide]>label#LA_paint_lum_trace{top:calc(var(--paint_lum_trace) * 1px)}div[id^=DI_paint_slide]>label[id$="_trace"]{position:relative;left:100px;display:flex;justify-content:space-between;width:6ch}div[id^=DI_paint_slide]>label[id$="_trace"]>output{width:6ch;height:1em;line-height:1em;color:hsla(var(--paint_hue_back) calc(var(--paint_back_sat) * 1%) calc(var(--paint_back_lum) * 1%)/ 1);background:0 0;font-size:90%;font-weight:500;border:none;opacity:0}div[id^=DI_paint_slide]>label[id$="_trace"]>output:first-of-type{width:3ch}div[id^=DI_paint_slide]>label[id$="_trace"]>span{width:.75em;height:.75em;background:hsla(var(--paint_hue_back) calc(var(--paint_back_sat) * 1%) calc(var(--paint_back_lum) * 1%)/ 1);border:2px solid currentColor;border-radius:50%}div[id^=DI_paint_slide]>label[id$="_trace"]:hover{cursor:url(/assets/styles/css/paint_brush.svg) 32 32,auto;transform:scale(1.3) translateX(-.25em);transition:transform .5s}div[id^=DI_paint_slide]>label[id$="_trace"]:hover>span{background:0 0;filter:brightness( 1.3 )}div[id^=DI_paint_slide]>label[id$="_trace"]:hover>output{opacity:1}div#DI_paint_dock{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:24ch;padding:.5em;transform:translateX(-258px);transition:.4s ease}div#DI_paint_dock>nav{flex-direction:column;align-self:flex-end;padding:0}div#DI_paint_dock>nav>label{font-size:85%}div#DI_paint_dock>nav>label>span[data-role]{background:hsla(-60 72% 103% /1);border-radius:6px}div#DI_paint_dock>nav>label:hover>span{background:0 0}div#DI_paint_dock>nav:hover{width:100%;background:hsla(210 11% 7% /1)}div#DI_paint_dock>input,div#DI_paint_dock>input+div{display:none}div#DI_paint_dock>input:checked+div{display:flex;flex-direction:column;margin-top:.75em;padding:.5em;background:hsla(210 11% 43% /1);border-radius:4px}div#DI_paint_dock>input:checked+div>label{margin:.5em;text-align:center;text-transform:uppercase;border-radius:4px;border:2px solid hsla(210 11% 31% /.75);font-size:85%}div#DI_paint_dock>input:checked+div>label:hover{filter:invert( .5 ) brightness( 1.3 )}div#DI_paint_dock>input:checked+div>label:first-of-type{position:relative;top:-1em;text-align:left;font-size:75%;border:none;opacity:.5}div#DI_paint_dock>input:checked+div>input[type=range]{align-self:center;position:relative;top:-1em;width:200px;background:0 0;cursor:pointer;transform:scaleY(.5)}div#DI_paint_dock>input:checked+div>input[type=range]:focus{outline:0;filter:hue-rotate( -220deg )}div#DI_paint_dock:hover{border-bottom-right-radius:8px;transform:translateX(0)}div#DI_paint_dock:hover>nav{align-self:center}.raised{z-index:5}div.raised:before{content:'';position:absolute;top:-4em;left:0;width:4em;height:4em;border:4px solid hsla(210 50% 79% /.7);border-radius:8px;background:0 0}.cursor_move{cursor:move}.cursor_resize{cursor:nwse-resize}