@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ec159349637c90ad-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/513657b02c5c193f-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/fd4db3eb5472fc27-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/51ed15f9841b9f9d-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/05a31a2ca4975f99-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/d6b16ce4a6175f26-s.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Inter_aaf875;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Inter_Fallback_aaf875;src:local("Arial");ascent-override:90.20%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.40%}.__className_aaf875{font-family:__Inter_aaf875,__Inter_Fallback_aaf875;font-style:normal}:root{--preview-color:#222831;--bg-l0:#222831;--shadow-l0:#474d57;--text-l0:#bdc4d0;--contrast-l0:#dea01e;--contrast-shadow-l0:#b37c00;--contrast-text-l0:#4c2100;--contrast-contrast-l0:#005248;--item-bg-l0:#404352;--item-shadow-l0:#626575;--item-text-l0:#c9ccde;--item-contrast-l0:#d3a518;--item-contrast-shadow-l0:#a98100;--item-contrast-text-l0:#452600;--item-contrast-contrast-l0:#005249;--bg-l1:#404352;--shadow-l1:#626575;--text-l1:#c9ccde;--contrast-l1:#d3a518;--contrast-shadow-l1:#a98100;--contrast-text-l1:#452600;--contrast-contrast-l1:#005249;--item-bg-l1:#645f74;--item-shadow-l1:#817c92;--item-text-l1:#d8d2ea;--item-contrast-l1:#00c89c;--item-contrast-shadow-l1:#00a077;--item-contrast-text-l1:#003a1c;--item-contrast-contrast-l1:#003fae;--bg-l2:#645f74;--shadow-l2:#817c92;--text-l2:#d8d2ea;--contrast-l2:#00c89c;--contrast-shadow-l2:#00a077;--contrast-text-l2:#003a1c;--contrast-contrast-l2:#003fae;--item-bg-l2:#8d7c95;--item-shadow-l2:#716179;--item-text-l2:#2b1e32;--item-contrast-l2:#00c9b3;--item-contrast-shadow-l2:#00a18c;--item-contrast-text-l2:#003a2d;--item-contrast-contrast-l2:#7b0c87;--bg-l3:#8d7c95;--shadow-l3:#716179;--text-l3:#2b1e32;--contrast-l3:#00c9b3;--contrast-shadow-l3:#00a18c;--contrast-text-l3:#003a2d;--contrast-contrast-l3:#7b0c87;--item-bg-l3:#ba9ab4;--item-shadow-l3:#967790;--item-text-l3:#3a2137;--item-contrast-l3:#005a34;--item-contrast-shadow-l3:#307c53;--item-contrast-text-l3:#93e0b1;--item-contrast-contrast-l3:#00c6ff;--bg-l4:#ba9ab4;--shadow-l4:#967790;--text-l4:#3a2137;--contrast-l4:#005a34;--contrast-shadow-l4:#307c53;--contrast-text-l4:#93e0b1;--contrast-contrast-l4:#00c6ff;--item-bg-l4:#e9b9d1;--item-shadow-l4:#bc8ea5;--item-text-l4:#4a2439;--item-contrast-l4:#005b4a;--item-contrast-shadow-l4:#307c6a;--item-contrast-text-l4:#93dfc9;--item-contrast-contrast-l4:#b996ff}html{background-color:var(--bg-l0)}.main{text-align:center;align-items:center;display:flex;font-size:1.2vh;flex-direction:column;color:var(--text-l0);width:60vw;margin:5vh 20vw;@media (orientation:portrait){width:90vw;margin-left:5vw;margin-bottom:5vh;margin-right:5vw;margin-top:5vh}}.headerGridContainer{display:grid;grid-template-columns:auto auto auto;grid-gap:0;gap:0;padding:.2vh;text-align:center;justify-self:center;align-self:center}.headerGridItemColor{text-align:center;justify-content:center;align-content:center;grid-row:1/3}.headerGridItemColor .react-colorful{max-width:9vh;max-height:9vh}.headerGridItemColorPreview{text-align:center;justify-self:center;align-self:center;grid-row:1/3;grid-column:3;background-color:var(--preview-color);border-radius:1vh;border:.1vh solid #000;display:block;width:9vh;height:9vh}.headerGridItem{text-align:center;justify-content:center;align-content:center}.codeBox{display:block;height:auto;width:60vw;max-width:60vw;margin:5vh 20vw;@media (orientation:portrait){width:90vw;max-width:90vw;margin-left:5vw;margin-bottom:5vh;margin-right:5vw;margin-top:5vh}text-align:left}.theCode{border-radius:1vh;margin:.1vh}.toastMessage{display:block;min-height:4vh;line-height:4vh;border-radius:.5vh;text-align:center;background-color:var(--contrast-l0);color:var(--contrast-text-l0);font-weight:700;box-shadow:.15vh .15vh .5vh .01vh color-mix(in srgb,var(--contrast-shadow-l0),transparent 20%)}.copyButton{position:relative}.copyButton button{display:flex;position:absolute;top:0;right:.1vh;padding:.1vh;flex-direction:row;background-color:transparent;border:none}.codeLanguage,.copied,.noCopied{font-size:1vh;line-height:1.1vh;margin:.1vh;&.l0{color:var(--text-l0)}&.l1{color:var(--text-l1)}&.l2{color:var(--text-l2)}&.l3{color:var(--text-l3)}&.l4{color:var(--text-l4)}}.copyButton{&.l0 :hover{color:var(--contrast-l0)}&.l1 :hover{color:var(--contrast-l1)}&.l2 :hover{color:var(--contrast-l2)}&.l3 :hover{color:var(--contrast-l3)}&.l4 :hover{color:var(--contrast-l4)}}.examples,.linkComponent{width:100%;display:block}.linkComponent{border:0;padding:0;margin:0}.background{width:auto;margin:.5vh;padding:.5vh;display:block;height:auto;text-align:center;font-size:1.2vh}.l0 a:active,.l0 a:link,.l0 a:visited{text-decoration:none;color:var(--text-l0)}.l1 a:active,.l1 a:link,.l1 a:visited{text-decoration:none;color:var(--text-l1)}.l2 a:active,.l2 a:link,.l2 a:visited{text-decoration:none;color:var(--text-l2)}.l3 a:active,.l3 a:link,.l3 a:visited{text-decoration:none;color:var(--text-l3)}.l4 a:active,.l4 a:link,.l4 a:visited{text-decoration:none;color:var(--text-l4)}.l0 a:hover{font-weight:700;color:var(--contrast-l0)}.l1 a:hover{font-weight:700;color:var(--contrast-l1)}.l2 a:hover{font-weight:700;color:var(--contrast-l2)}.l3 a:hover{font-weight:700;color:var(--contrast-l3)}.l4 a:hover{font-weight:700;color:var(--contrast-l4)}.textarea{display:flex;flex-direction:column;justify-content:space-evenly;padding:0;&.l0{background-color:var(--bg-l0);color:var(--text-l0)}&.l1{background-color:var(--bg-l1);color:var(--text-l1);box-shadow:.2vh .2vh .3vh .01vh color-mix(in srgb,transparent,var(--shadow-l1) 80%)}&.l1,&.l2{border-radius:1vh;padding-bottom:3vh}&.l2{background-color:var(--bg-l2);color:var(--text-l2);box-shadow:.2vh .2vh .3vh .01vh color-mix(in srgb,transparent,var(--shadow-l2) 80%)}&.l3{background-color:var(--bg-l3);color:var(--text-l3);box-shadow:.2vh .2vh .3vh .01vh color-mix(in srgb,transparent,var(--shadow-l3) 80%)}&.l3,&.l4{border-radius:1vh;padding-bottom:3vh}&.l4{background-color:var(--bg-l4);color:var(--text-l4);box-shadow:.2vh .2vh .3vh .01vh color-mix(in srgb,transparent,var(--shadow-l4) 80%)}& li{display:block;list-style:none}& input{margin:.5vh 0;border-radius:1vh;height:4vh;line-height:4vh;font-size:1.5vh;resize:none;width:90%;box-sizing:border-box;text-align:center;display:inline-block;border:none;&.l0{background-color:var(--text-l0);color:var(--bg-l0);box-shadow:inset 0 0 1vh .2vh color-mix(in srgb,transparent,var(--shadow-l0) 50%)}&.l1{background-color:var(--text-l1);color:var(--bg-l1);box-shadow:inset 0 0 1vh .2vh color-mix(in srgb,transparent,var(--shadow-l1) 50%)}&.l2{background-color:var(--text-l2);color:var(--bg-l2);box-shadow:inset 0 0 1vh .2vh color-mix(in srgb,transparent,var(--shadow-l2) 50%)}&.l3{background-color:var(--text-l3);color:var(--bg-l3);box-shadow:inset 0 0 1vh .2vh color-mix(in srgb,transparent,var(--shadow-l3) 50%)}&.l4{background-color:var(--text-l4);color:var(--bg-l4);box-shadow:inset 0 0 1vh .2vh color-mix(in srgb,transparent,var(--shadow-l4) 50%)}}}::placeholder{color:color-mix(in srgb,var(--bg-l0),transparent 50%)}.button{margin-bottom:.5vh;border-radius:1vh;width:90%;height:5vh;font-size:1.5vh;border:none;&.l0{background-color:var(--item-bg-l0);color:var(--item-text-l0);box-shadow:.15vh .15vh 0 .01vh color-mix(in srgb,var(--item-shadow-l0),transparent 10%)}&.l1{background-color:color-mix(in srgb,var(--item-bg-l1),var(--item-shadow-l1) 30%);color:var(--item-text-l1);box-shadow:.15vh .15vh 0 .01vh color-mix(in srgb,var(--item-shadow-l1),transparent 10%)}&.l2{background-color:color-mix(in srgb,var(--item-bg-l2),var(--item-shadow-l2) 30%);color:var(--item-text-l2);box-shadow:.15vh .15vh 0 .01vh color-mix(in srgb,var(--item-shadow-l2),transparent 10%)}&.l3{background-color:color-mix(in srgb,var(--item-bg-l3),var(--item-shadow-l3) 30%);color:var(--item-text-l3);box-shadow:.15vh .15vh 0 .01vh color-mix(in srgb,var(--item-shadow-l3),transparent 10%)}&.l4{background-color:color-mix(in srgb,var(--item-bg-l4),var(--item-shadow-l4) 30%);color:var(--item-text-l4);box-shadow:.15vh .15vh 0 .01vh color-mix(in srgb,var(--item-shadow-l4),transparent 10%)}&:hover{&.l0{color:var(--item-contrast-l0)}&.l1{color:var(--item-contrast-l1)}&.l2{color:var(--item-contrast-l2)}&.l3{color:var(--item-contrast-l3)}&.l4{color:var(--item-contrast-l4)}}&:active{font-weight:700;&.l0{background-color:var(--item-contrast-l0);box-shadow:.4vh .5vh 1vh color-mix(in srgb,var(--item-contrast-shadow-l0),transparent 20%);color:var(--item-contrast-text-l0)}&.l1{background-color:var(--item-contrast-l1);box-shadow:.4vh .5vh 1vh color-mix(in srgb,var(--item-contrast-shadow-l1),transparent 20%);color:var(--item-contrast-text-l1)}&.l2{background-color:var(--item-contrast-l2);box-shadow:.4vh .5vh 1vh color-mix(in srgb,var(--item-contrast-shadow-l2),transparent 20%);color:var(--item-contrast-text-l2)}&.l3{background-color:var(--item-contrast-l3);box-shadow:.4vh .5vh 1vh color-mix(in srgb,var(--item-contrast-shadow-l3),transparent 20%);color:var(--item-contrast-text-l3)}&.l4{background-color:var(--item-contrast-l4);box-shadow:.4vh .5vh 1vh color-mix(in srgb,var(--item-contrast-shadow-l4),transparent 20%);color:var(--item-contrast-text-l4)}}}.headerGridItem .button,.headerGridItem input{width:70%}.colorLayerList{display:flex;flex-wrap:wrap;padding:0;margin:0 1vh;gap:.3vh;justify-content:space-evenly;align-content:space-evenly;&.l0{color:var(--text-l0)}&.l1{color:var(--text-l1)}&.l2{color:var(--text-l2)}&.l3{color:var(--text-l3)}&.l4{color:var(--text-l4)}& li{display:flex;flex-direction:column;align-content:flex-end;justify-content:flex-end}& .colorH5,.colorID{max-width:6vh;display:inline-block;padding:0;margin:0}& .colorID{font-size:1vh}& .showColor{display:inline-block;width:6vh;height:4vh;border-radius:.3vh}}