html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-bg)}body{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:100dvh;margin-top:.5rem;padding:.5rem 1rem 0;scrollbar-gutter:both-edges}*,:before,:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}*{margin:0;padding:0}.display-none{display:none}.display-flex-wrap,.setting-container{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.tabs,.tab-content{padding-left:2rem}.setting-item{padding-top:.25rem;padding-bottom:.25rem}.setting-container>.setting-item{margin-top:1rem;min-width:16rem}fieldset>.setting-item{margin-top:.75rem}legend{padding:.25rem 1rem}fieldset{margin:0 1rem;border-color:var(--color-fieldset-border);border-style:none}.tab-content fieldset{margin:1rem 0 0}.tab-content legend{padding-left:0}hr{border:none;border-top:solid 1px var(--color-info-bg-and-hr);margin:0 1rem}main{-webkit-box-flex:1;-webkit-flex-grow:1;-moz-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding-top:1rem;padding-bottom:2rem}#customization{width:-webkit-calc(100% - 1rem);width:-moz-calc(100% - 1rem);width:calc(100% - 1rem)}#input-and-output{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-moz-box-flex:1;-ms-flex-positive:1;flex-grow:1}.header-info{width:100%}#svg-info,#png-info{white-space:normal;word-break:keep-all;padding:.125rem 1rem;font-size:1rem;text-align:center;color:var(--color-info-text);background-color:var(--color-info-bg-and-hr);-webkit-border-radius:.25rem .25rem 0 0;-moz-border-radius:.25rem .25rem 0 0;border-radius:.25rem .25rem 0 0}#png-info span,#svg-info span,#showcase span{display:inline-block}.cell{width:50%;padding:1rem;-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}#textarea-box,#img-box{width:100%;max-width:100%;aspect-ratio:1/1;padding:0;margin:1.5rem auto;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}div#img-box img{max-height:100%;width:auto}.fit-to-display-area{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;height:100%}#img-box img.actual-image-size{height:auto;-o-object-fit:none;object-fit:none;max-height:none}#img-box:has(img.actual-image-size){overflow:auto}#img-box.small-image{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.checker{-webkit-background-size:1rem 1rem;-moz-background-size:1rem 1rem;-o-background-size:1rem 1rem;background-size:1rem 1rem;background-image:repeating-conic-gradient(from 0deg,var(--color-checker)0deg 90deg,var(--color-checker-trans)90deg 180deg);background-repeat:repeat}#svg-string{width:100%;aspect-ratio:1/1;resize:none;font-size:.9rem;line-height:1.3}header input,header select,main textarea{color:var(--color-text-input);background-color:var(--color-input-textarea-select);padding-left:.5rem;border:none}textarea#svg-string.no-wrap{white-space:pre;overflow-x:auto}div#group-colors-pickers{padding-left:1rem}.setting-item-for-group-colors{margin-top:.25rem;padding-right:1rem;margin-top:.75rem;font-size:0;line-height:1.25rem;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}span.group-id-text{font-size:.9rem;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:1.25rem;margin-right:.5rem}div.stroke-thumbnail,select.opacities-selector{font-family:sans-serif;font-size:.9rem;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}div.stroke-thumbnail{display:inline-block;height:1.25rem;padding-left:.5rem;margin-right:4px}select.opacities-selector{margin-right:4px;width:3.5rem;height:1.25rem}div.setting-item input{border:1px solid var(--color-picker-border)}div.stroke-thumbnail.stroke-rgb{width:8.25rem}div.stroke-thumbnail.stroke-hex{width:5.5rem}div.setting-item input#png-size-number{width:4rem}div.setting-item input[type=range]{vertical-align:-.3rem}button#png-size-dec,button#png-size-inc{width:1.25rem}button#png-size-dec{margin-left:2rem;margin-right:.5rem}button#png-size-inc{margin-left:.5rem}header,main,footer{span.group-id-text,#customization,figcaption,summary,legend,label,button,dt,dd,p{color:var(--color-text)}}footer>details{padding:1rem}div#footer-info>details{padding:1.5rem 1rem .5rem 2rem}dl.top-level,section.showcase-container{padding-left:3rem}dd{padding:.25rem .5rem .25rem 1rem}dt{padding:1.5rem .5rem .25rem 0}div.reference-item,div.artwork-item{padding-left:1rem;padding-top:1rem}ol,ul,div.reference-container,div.artworks-container{padding:0 1rem}.padding-top-1{padding-top:1.5rem}.padding-top-2{padding-top:3rem}.padding-bottom-1{padding-bottom:2rem}.padding-left-1{padding-left:1rem}main button{background-color:var(--color-button-bg);border-color:var(--color-button-border);font-size:.9rem}button#png-action-button,button#svg-action-button{max-width:100%;--button-height:3.5rem;line-height:1.4;padding:.5rem 1rem;white-space:normal;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.download-button{width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}footer#footer-info{font-size:.9rem;padding:2rem;line-height:1.6}.font-size-small{font-size:.85rem}.font-color-lighter{opacity:.8}.text-align-center{text-align:center}.align-items-center{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}footer a{color:var(--color-text);text-decoration:underline}.flex-direction-column{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.artworks-container{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:1rem;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.artwork-item{-webkit-box-flex:0;-webkit-flex:0 1 auto;-moz-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}details#showcase figure{padding-left:1rem;padding-bottom:3rem}.bold-italic{font-weight:700;font-style:italic}#showcase img{width:100%;height:auto;max-width:256px}@media screen and (max-width:1024px){footer#footer-info{padding:1rem}}@media screen and (max-width:512px){body{padding:0}footer#footer-info,footer>details{padding:.5rem}#textarea-box,#img-box{height:auto;margin:1rem auto}#input-and-output,.setting-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tabs{padding-left:0}.tab-content{padding-left:1rem}.cell{width:100%}#png-info,#svg-info{font-size:.9rem}.setting-item-for-group-colors{padding-left:0}.setting-container>.setting-item{margin-top:.5rem;padding-left:0}fieldset>.setting-item{margin-top:.25rem}.tab-content fieldset{margin:.75rem 0 0}select.opacities-selector,div.stroke-thumbnail{margin-right:8px}.flex-direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.buttons-and-range{width:100%;padding-top:.75rem}#png-size-range{min-width:-webkit-calc(100% - 7rem);min-width:-moz-calc(100% - 7rem);min-width:calc(100% - 7rem)}.flex-direction-column .display-inline-block{display:inline-block}.flex-direction-column button#png-size-dec{margin-right:1rem;margin-left:1rem}.flex-direction-column button#png-size-inc{margin-left:1rem}legend{padding-left:.5rem}dl.top-level,section.showcase-container{padding-left:1.5rem}div.reference-container,div.artworks-container{padding:0 .5rem}div.reference-item,div.artwork-item{padding-left:0;padding-top:1rem}.artworks-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0}details#showcase figure{padding-left:.5rem;padding-bottom:1.5rem}}@media screen and (max-width:375px){select.opacities-selector{width:3.25rem}div.stroke-thumbnail.stroke-rgb{width:8rem}div.stroke-thumbnail.stroke-hex{width:5.25rem}}
:root{--color-bg:darkgray;--color-fieldset-border:#ccc6;--color-checker:#eeec;--color-checker-trans:#fff0;--color-text:#666;--color-text-input:#666;--color-info-bg-and-hr:#6669;--color-info-text:darkgray;--color-input-textarea-select:#eee6;--color-button-bg:#eee3;--color-button-border:#ccc9;--color-picker-border:#ccc9}[data-theme=light]{--color-bg:darkgray!important;--color-fieldset-border:#ccc6!important;--color-checker:#eeec!important;--color-checker-trans:#fff0!important;--color-text:#666!important;--color-text-input:#666!important;--color-info-bg-and-hr:#6669!important;--color-info-text:darkgray!important;--color-input-textarea-select:#eee6!important;--color-button-bg:#eee3!important;--color-button-border:#ccc9!important;--color-picker-border:#ccc9!important}@media(prefers-color-scheme:dark){:root{--color-bg:#222;--color-fieldset-border:#ccc6;--color-checker:#eee3;--color-checker-trans:#fff0;--color-text:#666;--color-text-input:#333;--color-info-bg-and-hr:#6669;--color-info-text:#222;--color-input-textarea-select:#eee6;--color-button-bg:#6663;--color-button-border:#ccc3;--color-picker-border:#666}}[data-theme=dark]{--color-bg:#222;--color-fieldset-border:#ccc6;--color-checker:#eee3;--color-checker-trans:#fff0;--color-text:#666;--color-text-input:#333;--color-info-bg-and-hr:#6669;--color-info-text:#222;--color-input-textarea-select:#eee6;--color-button-bg:#6663;--color-button-border:#ccc3;--color-picker-border:#666}[data-theme=black]{--color-bg:#000;--color-fieldset-border:#ccc3;--color-checker:#111;--color-checker-trans:#000;--color-text:#666c;--color-text-input:#666;--color-info-bg-and-hr:#6669;--color-info-text:#000;--color-input-textarea-select:#2226;--color-button-bg:#6663;--color-button-border:#ccc3;--color-picker-border:#ccc3}[data-theme=white]{--color-bg:white;--color-fieldset-border:#ccc6;--color-checker:#eeec;--color-checker-trans:#fff0;--color-text:#666;--color-text-input:#666;--color-info-bg-and-hr:#6669;--color-info-text:white;--color-input-textarea-select:#eee6;--color-button-bg:#eee3;--color-button-border:#ccc9;--color-picker-border:#ccc9}
.tab-link-container{width:100%}.icon-font{vertical-align:-6px}.icon-tab-link{opacity:.7;border:none;outline:none;font-size:.9rem;-webkit-box-flex:0;-webkit-flex:0 1 auto;-moz-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:auto;min-width:70px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial;margin:0;padding:.25rem 0;background-color:var(--color-bg)}.tab-link{-webkit-border-radius:.25rem .25rem 0 0;-moz-border-radius:.25rem .25rem 0 0;border-radius:.25rem .25rem 0 0;opacity:.7;outline:none;cursor:pointer;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;font-size:.9rem;-webkit-box-flex:0;-webkit-flex:0 1 auto;-moz-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:20%;min-width:150px;max-width:200px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial;margin:0;padding:.5rem 0;background-color:var(--color-button-bg);border-bottom:none;border-top:solid;border-left:solid;border-right:solid;border-width:1px;border-color:var(--color-button-border)}[data-theme=dark] .tab,[data-theme=light] .tab{border-color:color-mix(in srgb,var(--color-button-bg)10%,transparent)}.tab-content{width:100%;display:none;border-top:solid;border-left:solid;border-width:1px;border-color:var(--color-button-border)}.tab-link.active{opacity:1;background-color:var(--color-button-border);border-color:color-mix(in srgb,var(--color-button-border)10%,transparent)}@media screen and (max-width:1024px){.tab-link{min-width:60px;max-width:150px}.icon-tab-link{min-width:50px}}@media screen and (max-width:512px){.tabs{text-align:center}.tab-link{margin:0}.icon-tab-link{min-width:30px}}
.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.32)}.modal-content{background-color:#c8c8c8;color:#666;margin:10%auto;padding:1rem;border:2px solid rgba(200,200,200,.48);width:-webkit-max-content;width:-moz-max-content;width:max-content}.input-group{padding-bottom:3rem}code{font-family:monospace}.option-applied{color:#333}.arrow{display:block;padding-left:1rem;padding-top:.5rem;color:gray}.modal-content>h2{font-size:1rem;padding-bottom:2rem}.modal-content .example{padding-top:.5rem;padding-left:1.5rem}button#reset-settings{width:70%;padding:.5rem 0}div#reset-button-box{text-align:center}@media screen and (max-width:512px){.modal-content{padding:1rem;width:90%}.modal-content fieldset{margin:0}.input-group{padding-bottom:2rem}}
/*# sourceMappingURL=index_911b.e694251b.css.map */