:root{--margin-xsmall: .5rem;--stroke-weight: 1px;--text-color-rgb: 0, 0, 255;--text-color-opacity: 1;--textColor: rgba(var(--text-color-rgb), var(--text-color-opacity));--slider-track-height: var(--stroke-weight);--slider-track-color: var(--textColor);--slider-thumb-size: 1rem;--slider-thumb-background: #fff;--slider-thumb-strokeColor: var(--textColor);--slider-thumb-radius: 50%;--slider-transition-duration: .2s;--button-hover-bg: var(--textColor);--button-hover-text: #fff;--cell-size: 4rem;--arrow-img: url('data:image/svg+xml,%3Csvg width="10" height="6" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1l4 4 4-4" stroke="%230000ff" stroke-width="1.5" fill="none" fill-rule="evenodd"/%3E%3C/svg%3E')}html,body{margin:0;padding:0;height:100vh;height:-webkit-fill-available;box-sizing:border-box;overflow:hidden;font-family:Fira Mono,monospace;font-weight:400;font-style:normal;font-size:14px}body.has-error-banner{--text-color-rgb: 255, 0, 0;--text-color-opacity: 1;--textColor: rgba(var(--text-color-rgb), var(--text-color-opacity));--slider-track-color: var(--textColor);--slider-thumb-strokeColor: var(--textColor);--button-hover-bg: var(--textColor)}body.loading{--text-color-rgb: 0, 0, 0;--text-color-opacity: .5;--textColor: rgba(var(--text-color-rgb), var(--text-color-opacity));--slider-track-color: var(--textColor);--slider-thumb-strokeColor: var(--textColor);--button-hover-bg: var(--textColor)}main{display:flex;width:100vw;height:100vh;height:-webkit-fill-available}#preview{flex:3;display:flex;justify-content:center;align-items:center;padding:2rem 1rem 2rem 2rem;background-color:#fff}#preview svg{max-width:100%;max-height:100%;width:100%;height:100%;display:block;border:1px solid rgba(255,255,255,.1)}#controls{flex:1;display:flex;flex-direction:column;gap:1rem;padding:2rem 2rem 2rem 1rem;overflow-y:auto;color:var(--textColor);justify-content:space-between;overflow:auto;min-width:300px}#controls .sliders{padding:1rem;border:1px solid var(--textColor);display:flex;flex-direction:column;gap:1rem}#controls .sliders fieldset{display:flex;flex-direction:column;gap:.5rem}#controls .buttons{display:flex;flex-direction:column;gap:1rem;width:100%}button{font-size:1rem;border:1px solid var(--textColor);color:var(--textColor);padding:.5rem .75rem;background:transparent;cursor:pointer}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--textColor);background-color:transparent;color:var(--textColor);padding:.5rem;font-size:1rem;cursor:pointer;background-image:var(--arrow-img);background-repeat:no-repeat;background-position:right .5rem center;width:100%}select::-ms-expand{display:none}.primary{background:rgba(var(--text-color-rgb),.1);border:1px solid var(--textColor);color:var(--textColor);cursor:pointer}input[type=number]{font-size:1rem;border:1px solid var(--textColor);color:var(--textColor);padding:.5rem .75rem;background:transparent;cursor:pointer}button:hover,button:active{background:var(--button-hover-bg);color:var(--button-hover-text)}.buttons button{width:100%;padding:.75rem 1rem}input[type=range]{margin:0 0 var(--margin-xsmall);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ranger{width:100%;height:var(--slider-track-height);background:var(--slider-track-color);outline:none;transition:opacity var(--slider-transition-duration)}.ranger::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--slider-thumb-radius);background:var(--slider-thumb-background);border:1px solid var(--slider-thumb-strokeColor);cursor:pointer}.ranger::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--slider-thumb-radius);background:var(--slider-thumb-background);border:1px solid var(--slider-thumb-strokeColor);cursor:pointer;border:none}.ranger::-moz-range-track{width:100%;height:var(--stroke-weight);background:var(--textColor);outline:none}.ranger::-ms-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--slider-thumb-radius);background:var(--slider-thumb-background);border:1px solid var(--slider-thumb-strokeColor);cursor:pointer}.ranger:focus::-webkit-slider-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger:focus::-moz-range-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger:focus::-ms-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger.active::-webkit-slider-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger.active::-moz-range-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger.active::-ms-thumb{background:var(--textColor);border:1px solid var(--slider-thumb-strokeColor)}.ranger::-ms-track{width:100%;height:var(--stroke-weight);background:transparent;border-color:transparent;color:transparent}.group{width:100%;display:flex;flex-direction:column;gap:var(--margin-xsmall)}.group-horizontalFlexBlock{display:flex;justify-content:space-between;box-sizing:border-box}.group>input[type=range]{margin-bottom:.666rem}.axis-label-group{display:flex;align-items:center;gap:.5rem}.axis-play-button{padding:.25rem .5rem;font-size:.75rem;line-height:1;cursor:pointer}.axis-play-button.is-playing{background-color:var(--button-hover-bg);color:var(--button-hover-text)}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;border:1px solid var(--textColor);border-radius:0;background-color:transparent;cursor:pointer}input[type=checkbox]:checked{background-color:var(--textColor)}#valueDialog{padding:2rem;border:1px solid var(--textColor)}#valueDialog form{display:flex;gap:2rem;align-items:center}dialog::backdrop{background-color:rgba(var(--text-color-rgb),.75)}fieldset{border:none;margin:0;padding:.33rem}#info{padding:.33rem}#info .info-label{opacity:.66}legend{opacity:.66;padding:.5rem 0 0;margin:0 0 .5rem}.previewContainer{--line-width: 1px;--cell-size: 4rem;border:1px solid var(--textColor);width:100%;height:100%;max-height:100%;display:grid;grid-template-columns:2fr 3fr;position:relative;box-sizing:border-box;gap:var(--line-width);flex:1 0 100%}#tutorialDialog{border:none;padding:48px 2em 2em;box-sizing:border-box}#tutorialDialog #closeTutorialButton{position:absolute;top:1em;right:1em;margin:0;background:transparent;border:1px solid var(--textColor);color:var(--textColor);cursor:pointer;padding:.5rem .75rem;font-size:1rem;z-index:2}#tutorialDialog>div{position:relative;margin-top:48px;height:calc(100% - 48px)}.vertical-scrollable-container{width:100%;height:100%;overflow-y:auto;box-sizing:border-box}#font-glyphs{--cell-size: 4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--cell-size),1fr));gap:1px;list-style:none;padding:0 1px 0 0;margin:0;color:var(--textColor)}#font-glyphs li{border:none;box-shadow:0 0 0 1px var(--textColor);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell-size) / 2)}#font-glyphs li:hover{background:rgba(var(--text-color-rgb),.1);border-color:var(--textColor);color:var(--textColor)}#font-glyphs li.selected,#font-glyphs li:active{background:var(--button-hover-bg);color:var(--button-hover-text);border-color:var(--textColor)}#inspector{max-height:100%;overflow:hidden}#inspector>svg{height:auto;width:auto;max-height:100%;display:block;object-fit:contain;margin:1rem}@media(max-width:1024px){html,body{font-size:16px}:root{--slider-thumb-size: 1.33rem}body{overflow:auto}main{flex-direction:column;width:100vw;height:auto}.previewContainer{height:50vh;grid-template-columns:1fr 5fr}#preview,#controls{padding:1rem}.group>input[type=range]{margin-bottom:1.333rem}#controls .sliders fieldset{gap:1rem}.vertical-scrollable-container{border-right:1px solid var(--textColor)}}fieldset.collapsible legend{cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}fieldset.collapsible legend:after{content:" ";position:absolute;background-image:var(--arrow-img);background-repeat:no-repeat;background-position:right .5rem center;padding:.5rem;right:0;top:0;font-size:1em;transition:transform .2s ease}fieldset.collapsible[aria-expanded=false] legend:after{transform:rotate(-90deg)}fieldset.collapsible[aria-expanded=false] .group,fieldset.collapsible[aria-expanded=false] fieldset{display:none}#error{position:fixed;top:0;left:0;width:100%;background:#f44336;color:#fff;padding:1rem;display:flex;justify-content:flex-start;align-items:center;z-index:10000}#error[aria-hidden=true]{display:none}#error .close-btn{background:transparent;border:none;font-size:1.5rem;line-height:1;color:inherit;cursor:pointer;padding:.33em;margin:0 1em 0 0}#error-message{padding:.33em}body.has-error-banner main{margin-top:3.5rem}