*{margin:0;padding:0;box-sizing:border-box}:root{--background-color: #ffffff;--foreground-color: #000000}@font-face{font-family:Saans;src:url(/fonts/Saans-Regular.woff2) format("woff2"),url(/fonts/Saans-Regular.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Saans;src:url(/fonts/Saans-Bold.woff2) format("woff2"),url(/fonts/Saans-Bold.woff) format("woff");font-style:normal;font-weight:700}html,body{height:100%;margin:0}html{overflow-y:scroll}body{font-family:Saans,Arial,sans-serif;background-color:var(--background-color);color:var(--foreground-color);height:100%}#app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:20px;position:fixed;width:100%;flex-shrink:0}h1,label,button,#fontSizeValue{font-size:13px}#fontSizeValue{min-width:40px}.buttons-top{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:5px}.buttons-top label{margin-left:10px}.text-sample{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:70px 20px}.text-sample.top-aligned{flex-direction:column;align-items:flex-start;justify-content:flex-start}.text-sample-item{width:100%;margin-bottom:20px;margin-top:0;padding:0;box-sizing:border-box;cursor:text;outline:none;color:var(--foreground-color)}.text-sample p{width:100%;margin:0;padding:20px;box-sizing:border-box;cursor:text;outline:none;overflow:auto;color:var(--foreground-color);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;overflow-x:hidden}.controls-bottom-left{position:fixed;bottom:20px;left:20px;display:flex;align-items:center;gap:20px}.controls-bottom-left input[type=range]{width:100px}.controls-bottom-right{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:10px}#downloadFonts{border:1px solid var(--foreground-color);color:var(--foreground-color);padding:5px 10px;border-radius:10px;background-color:transparent;cursor:pointer;display:inline-block}#downloadFonts:hover{border:1px solid var(--background-color);background:var(--background-color);color:var(--foreground-color)}.text-alignment,.colour-pickers{display:flex;gap:5px}#variableAxesSliders{flex-direction:column}#openTypeFeatures label{display:block;margin-bottom:5px}button{border:1px solid var(--foreground-color);color:var(--foreground-color);padding:5px 10px;border-radius:10px;background-color:transparent;cursor:pointer;font-family:Saans,Arial}button:hover{border:1px solid var(--background-color);background:var(--background-color);color:var(--foreground-color)}.colour-pickers-wrapper{width:25px;height:25px;border-radius:50%;border:1px solid var(--foreground-color);overflow:hidden}.color-picker{width:25px;height:25px;cursor:pointer;scale:2;padding:0;-webkit-appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:50%}select{border:0px solid var(--foreground-color);border-radius:10px;padding:0;background:var(--background-color);cursor:pointer;outline:none;color:var(--foreground-color);font-family:Saans}select:disabled{opacity:.2}input[type=range]{-webkit-appearance:none;width:100px;height:1px;background:var(--foreground-color);cursor:pointer;outline:none;margin:10px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border-radius:50%;background:var(--foreground-color);cursor:pointer;border:none}input[type=range]::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background:var(--foreground-color);cursor:pointer;border:none}input[type=range]::-ms-thumb{height:15px;width:15px;border-radius:50%;background:var(--foreground-color);cursor:pointer;border:none}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border:1px solid var(--foreground-color);border-radius:3px;cursor:pointer;position:relative}input[type=checkbox]:checked{background:var( --foreground-color );border:1px solid var(--foreground-color)}input[type=checkbox]{transition:background .2s ease-in-out,border .2s ease-in-out}.highlight{opacity:.5}@media screen and (max-width: 768px){.header{flex-direction:column;align-items:flex-start}.buttons-top{position:static;transform:none;margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}.colour-pickers{margin-top:10px}.controls-bottom-left,.controls-bottom-right{position:static;margin:10px;width:calc(100% - 20px)}.controls-bottom-left,.controls-bottom-right{flex-direction:row;align-items:flex-start}.controls-bottom-left label,.controls-bottom-right label{width:100%}.text-alignment{margin-top:10px}.text-sample p{padding:10px}}@media screen and (max-width: 300px){.controls-bottom-left,.controls-bottom-right{flex-direction:row;align-items:flex-start}}.slider-name{min-width:83px}.slider-label,.slider-wrapper{display:flex;align-items:center;gap:10px}.left-top{display:flex;align-items:center;gap:5px}