@font-face{font-style:normal;font-family:'GRADUATE';src:url("https://twardoch.github.io/Graduate-Variable-Font/fonts/GRADUATE.ttf")}input[type="range"]{-webkit-appearance:none;background-color:transparent;height:16px;margin:0;padding:0;position:relative;width:100%;z-index:1}input[type="range"]:focus{outline:none}input[type="range"]:active::-webkit-slider-thumb{border-width:8px}input[type="range"]:active::-moz-range-thumb{border-width:8px}input[type="range"]:active::-ms-thumb{border-width:8px}input[type="range"]::-webkit-slider-runnable-track{background-color:#E1E1E1;border-radius:1px;border:none;outline:none;height:2px;padding:0}input[type="range"]::-moz-range-track{background-color:#E1E1E1;border-radius:1px;border:none;outline:none;height:2px;padding:0}input[type="range"]::-ms-track{background-color:#E1E1E1;border-radius:1px;border:none;outline:none;height:2px;padding:0;border-color:transparent;color:transparent}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;outline:none;background:#fff;height:16px;width:16px;border-radius:50%;border:2px solid #666;box-shadow:3px 0 0 1px #F7F7F7,-3px 0 0 1px #F7F7F7;box-sizing:border-box;margin-top:-7px;transition:border 125ms ease-in-out;z-index:1}input[type="range"]::-moz-range-thumb{-webkit-appearance:none;outline:none;background:#fff;height:16px;width:16px;border-radius:50%;border:2px solid #666;box-shadow:3px 0 0 1px #F7F7F7,-3px 0 0 1px #F7F7F7;box-sizing:border-box;margin-top:-7px;transition:border 125ms ease-in-out;z-index:1}input[type="range"]::-ms-thumb{-webkit-appearance:none;outline:none;background:#fff;height:16px;width:16px;border-radius:50%;border:2px solid #666;box-shadow:3px 0 0 1px #F7F7F7,-3px 0 0 1px #F7F7F7;box-sizing:border-box;margin-top:-7px;transition:border 125ms ease-in-out;z-index:1;margin-top:0}input[type="range"]::-ms-ticks-after,input[type="range"]::-ms-ticks-before,input[type="range"]::-ms-tooltip{display:none}input[type="range"]::-ms-fill-lower{background:#666;border-radius:1px}input[type="range"]::-ms-fill-upper{background:#E1E1E1;border-radius:1px}input[type="range"]::-moz-focus-outer{border:0}input[type="text"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;border-radius:0;border-bottom:solid 1px #E1E1E1;background-color:transparent}input[type="text"]::-moz-placeholder{color:#999}input[type="text"]:-ms-input-placeholder{color:#999}input[type="text"]::placeholder{color:#999}.text-frame{display:inline-block;position:absolute;top:100px;left:50px;border:solid 1px transparent}.text-frame.fit-type.selected,.text-frame.fit-type:hover,.text-frame.point-type.selected,.text-frame.point-type:hover{border:solid 1px #2680EB}.text-frame.area-type.selected,.text-frame.area-type:hover{border:solid 1px #2680EB}.text-frame.highlight .text{color:#2680EB}.text-frame.point-type .text{white-space:nowrap}.text-frame.area-type .text{height:100%;white-space:normal;overflow:hidden}.text-frame .text{font-size:100px;font-family:'Dunbar';font-variation-settings:"wght" 400, "opsz" 72}.text-frame .text .controls--vf-xheight .vf-xheight-line{position:absolute;left:0;right:0;height:1px;cursor:ns-resize;background-color:#2680EB;visibility:hidden}.text-frame .text .controls--vf-xheight .vf-xheight-line:before{content:'';position:absolute;left:0;right:0;top:-5px;margin:auto;height:11px;background-color:rgba(38,128,235,0.15)}.text-frame .text .controls--vf-xheight .vf-base-line{position:absolute;left:0;right:0;border-bottom:1px dashed #2680EB;visibility:hidden}.text-frame .round-handle{width:7px;height:7px;position:absolute;border:solid 1px #2680EB;background-color:#fff;border-radius:50%}.text-frame .square-handle{width:7px;height:7px;position:absolute;border:solid 1px #2680EB;background-color:#fff}.text-frame .controls--vf-opsz{position:absolute;left:0;right:0;margin:auto;bottom:-60px;width:9px}.text-frame .controls--vf-opsz .vf-opsz-handle{position:relative;width:7px;height:7px;border:solid 1px #2680EB;border-radius:50%;cursor:ns-resize}.text-frame .controls--vf-opsz .vf-opsz-handle:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:1px;height:7px;background-color:#2680EB;box-shadow:-2px 0 0 0 #2680EB,2px 0 0 0 #2680EB}.text-frame .controls--vf-opsz .vf-opsz-line{position:absolute;width:0;left:4px;height:50px;top:-50px;transform-origin:left bottom;border-left:solid 1px #2680EB}.text-frame .controls--vf-slantness{position:absolute;left:0;right:0;margin:auto;top:-60px;width:9px}.text-frame .controls--vf-slantness .vf-slantness-handle{position:relative;width:7px;height:7px;border:solid 1px #2680EB;border-radius:4.5px;cursor:ew-resize}.text-frame .controls--vf-slantness .vf-slantness-handle:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:1px;height:7px;background-color:#2680EB;box-shadow:-2px 0 0 0 #2680EB,2px 0 0 0 #2680EB}.text-frame .controls--vf-slantness .vf-slantness-line{position:absolute;width:0;left:4px;height:50px;transform-origin:left bottom;border-left:solid 1px #2680EB}.text-frame .controls--vf-width-x{position:absolute;right:-60px;bottom:-5px;margin:auto;width:9px;height:9px}.text-frame .controls--vf-width-x .vf-width-x-handle{position:relative;width:7px;height:7px;border:solid 1px #2680EB;border-radius:50%;cursor:ew-resize;background-color:#fff}.text-frame .controls--vf-width-x .vf-width-x-handle:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:1px;height:7px;background-color:#2680EB;box-shadow:-2px 0 0 0 #2680EB,2px 0 0 0 #2680EB}.text-frame .controls--vf-width-x .vf-width-x-line{position:absolute;width:0;left:-50px;top:4px;width:50px;border-top:solid 1px #2680EB}.text-frame .controls--vf-width-y{position:absolute;right:-5px;margin:auto;bottom:-60px;width:9px}.text-frame .controls--vf-width-y .vf-width-y-handle{position:relative;width:7px;height:7px;border:solid 1px #2680EB;border-radius:50%;cursor:ns-resize}.text-frame .controls--vf-width-y .vf-width-y-handle:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:1px;height:7px;background-color:#2680EB;box-shadow:-2px 0 0 0 #2680EB,2px 0 0 0 #2680EB}.text-frame .controls--vf-width-y .vf-width-y-line{position:absolute;width:0;left:4px;height:50px;top:-50px;transform-origin:left bottom;border-left:solid 1px #2680EB}.text-frame .controls--vf-width{position:absolute;right:-60px;bottom:-60px;width:9px}.text-frame .controls--vf-width .vf-width-handle{position:relative;width:7px;height:7px;border:solid 1px #2680EB;border-radius:50%;cursor:nwse-resize;background-color:#fff}.text-frame .controls--vf-width .vf-width-handle:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:1px;height:7px;background-color:#2680EB;box-shadow:-2px 0 0 0 #2680EB,2px 0 0 0 #2680EB}.text-frame .controls--vf-width .vf-width-line{position:absolute;width:0;left:3px;top:3px;height:76px;transform-origin:top center;transform:rotate(135deg);border-left:solid 1px #2680EB}.text-frame .controls--size .handle{width:7px;height:7px;position:absolute;border:solid 1px #2680EB;background-color:#fff;border-radius:50%}.text-frame .controls--size .handle.top.left{cursor:nw-resize}.text-frame .controls--size .handle.top.center{cursor:n-resize}.text-frame .controls--size .handle.top.right{cursor:ne-resize}.text-frame .controls--size .handle.middle.left{cursor:w-resize}.text-frame .controls--size .handle.middle.right{cursor:e-resize}.text-frame .controls--size .handle.bottom.left{cursor:sw-resize}.text-frame .controls--size .handle.bottom.center{cursor:ns-resize}.text-frame .controls--size .handle.bottom.right{cursor:se-resize}.text-frame .controls--size .handle.top{top:-5px}.text-frame .controls--size .handle.bottom{bottom:-5px}.text-frame .controls--size .handle.left{left:-5px}.text-frame .controls--size .handle.right{right:-5px}.text-frame .controls--size .handle.center{left:0;right:0;margin:auto}.text-frame .controls--size .handle.middle{top:0;bottom:0;margin:auto}.text-frame .controls--area-size .square-handle.bottom.right,.text-frame .controls--area-size .square-handle.top.left{cursor:nwse-resize}.text-frame .controls--area-size .square-handle.bottom.left,.text-frame .controls--area-size .square-handle.top.right{cursor:nesw-resize}.text-frame .controls--area-size .square-handle.top{top:-5px}.text-frame .controls--area-size .square-handle.bottom{bottom:-5px}.text-frame .controls--area-size .square-handle.left{left:-5px}.text-frame .controls--area-size .square-handle.right{right:-5px}.text-frame .controls--font-size .round-handle.font-size-handle{cursor:ns-resize;bottom:-5px;left:0;right:0;margin:auto}.text-frame .controls--contrast{position:absolute;top:0;bottom:0;left:-62px;width:52px;display:none}.text-frame .controls--contrast .contrast-value{display:inline-block;font-size:20px;height:20px;color:#2680EB;width:40px;text-align:right;margin:auto;top:0;bottom:0;right:12px;position:absolute}.text-frame .controls--contrast .contrast-bracket{position:absolute;top:0;bottom:0;right:0;width:8px;border-top:solid 1px #2680EB;border-left:solid 1px #2680EB;border-bottom:solid 1px #2680EB}.text-frame:hover .controls--vf-xheight .vf-base-line,.text-frame:hover .controls--vf-xheight .vf-xheight-line{visibility:visible}.text-frame [class^="controls-"]{display:none}.text-frame.selected.area-type .controls--area-size,.text-frame.selected.area-type .controls--font-size,.text-frame.selected.point-type .controls--font-size,.text-frame.selected.point-type.vf-width-on .controls--vf-width,.text-frame.selected.point-type.vf-width-on .controls--vf-width-x,.text-frame.selected.point-type.vf-width-on .controls--vf-width-y,.text-frame.selected.vf-optical-size-on .controls--vf-opsz,.text-frame.selected.vf-slant-on .controls--vf-slantness,.text-frame.selected.vf-xheight-on .controls--vf-xheight{display:block}body{background-color:#fff;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;position:relative;font-family:"Nunito Beta",sans-serif;display:-ms-flexbox;display:flex}#font-playground-app{width:100%}#font-playground-app.design-view .panel .section.section-font-size,#font-playground-app.design-view .panel .section.section-preset-variations{display:block}#font-playground-app.design-view .panel .section.section-variable-options{display:-ms-flexbox;display:flex}#font-playground-app.design-view .panel .section.section-code,#font-playground-app.design-view .panel .section.section-export{display:none}#font-playground-app.design-view .about{display:none}#font-playground-app.code-view .panel .section.section-font-size,#font-playground-app.code-view .panel .section.section-preset-variations,#font-playground-app.code-view .panel .section.section-variable-options{display:none}#font-playground-app.code-view .panel .section.section-code,#font-playground-app.code-view .panel .section.section-export{display:-ms-flexbox;display:flex}#font-playground-app.code-view .about{display:none}#font-playground-app .drawer{display:none}#font-playground-app .canvas{width:calc(100vw - 284px);left:42px}#font-playground-app.font-menu-opened .drawer{display:block}#font-playground-app.font-menu-opened .canvas{width:calc(100vw - 526px);left:284px}#font-playground-app.about-view .canvas,#font-playground-app.about-view .drawer,#font-playground-app.about-view .panel,#font-playground-app.about-view .tools{display:none}#font-playground-app.about-view .about{display:block}.subtitle-text{font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 140;color:#999;text-transform:uppercase;letter-spacing:0.08em;font-size:10px}.logo-text{font-family:"GRADUATE";font-variation-settings:'XOPQ' 100, 'XTRA' 300, 'OPSZ' 8, 'GRAD' 9, 'YTRA' 750, 'CNTR' 40, 'YOPQ' 200, 'SERF' 0, 'YTAS' 0, 'YTLC' 650, 'YTDE' 0, 'SELE' 0;color:#666;font-size:14px;text-decoration:none}.logo-text .accent-text{color:#2680EB}.badge-text{font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 99;color:#666;font-size:12px}.label-text{font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 99;color:#333;font-size:12px}.value-text{font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 99;color:#000;font-size:12px}.button{background-color:#fff;border:1px solid #E1E1E1;line-height:28px;height:28px;box-sizing:border-box;border-radius:3px;padding:0 5px;cursor:pointer;display:inline-block}.button:active{border-color:#2680EB}.tabs{width:100vw;height:37px;background-color:#F7F7F7;border-bottom:2px solid #E1E1E1;position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tabs .logo-text{margin-left:12px;line-height:37px;position:absolute;left:0}.tabs .menu{position:absolute;left:260px;display:-ms-flexbox;display:flex}.tabs .menu>li{position:relative}.tabs .menu>li:hover>ul{display:block}.tabs .menu>li:hover>span{cursor:pointer;background-color:#666;color:#fff}.tabs .menu>li:hover>span>a{color:#fff}.tabs .menu>li>span{display:block;padding:0 15px;line-height:38px;height:37px}.tabs .menu>li>span>a{text-decoration:none;font-weight:bold;color:#2680EB}.tabs .menu>li>ul{display:none;border-radius:0 0 3px 3px;width:-webkit-max-content;width:-moz-max-content;width:max-content;position:absolute;padding-top:2px;left:0;box-shadow:0 3px 10px rgba(102,102,102,0.5);z-index:9}.tabs .menu>li>ul a,.tabs .menu>li>ul li{display:block;position:relative;line-height:30px;padding:0 30px 0 15px;background-color:#F7F7F7}.tabs .menu>li>ul a:hover,.tabs .menu>li>ul li:hover{cursor:pointer;background-color:#2680EB;color:#fff}.tabs .menu>li>ul a:last-child,.tabs .menu>li>ul li:last-child{border-radius:0 0 3px 3px}.tabs .menu>li>ul li.contains-sub-menu:after{content:"▶";position:absolute;top:0;bottom:0;right:8px}.tabs .menu>li>ul li.contains-sub-menu ul{display:none;position:absolute;z-index:2;left:100%;top:0;box-shadow:0 3px 10px rgba(102,102,102,0.5)}.tabs .menu>li>ul li.contains-sub-menu ul li{color:#000;padding:0 15px}.tabs .menu>li>ul li.contains-sub-menu ul li:hover{color:#fff}.tabs .menu>li>ul li.contains-sub-menu ul li:last-child{border-radius:0 0 3px 3px}.tabs .menu>li>ul li.contains-sub-menu:hover ul{display:block}.tabs .menu>li>ul a.offsite-link:after{content:"⸣";position:absolute;top:0;bottom:0;right:8px}.tabs .menu>li>ul a{text-decoration:none;color:inherit}.tabs .tab{position:relative;color:#666;padding:0 10px;line-height:38px;height:39px;cursor:pointer;overflow:hidden;transition:color 0.2s ease}.tabs .tab:after{content:'';position:absolute;width:100%;bottom:0;left:0;height:2px;border-radius:1px;background-color:#000;opacity:0;transition:opacity 0.2s ease}.tabs .tab.active{cursor:default;color:#000}.tabs .tab.active:after{opacity:1}.tabs .social{margin-right:12px;margin-top:4px;position:absolute;right:0;display:-ms-flexbox;display:flex}.tabs .social .icon-button{width:30px;height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}.tabs .social .icon-button path{fill:#666;transition:fill 0.2s ease}.tabs .social .icon-button.newsletter:hover path{fill:#2680EB}.tabs .social .icon-button.twitter:hover path{fill:#1DA1F2}.tabs .social .icon-button.facebook:hover path{fill:#3B5998}.tabs .social .icon-button.github:hover path{fill:#000000}.tools{width:42px;height:calc(100vh - 39px);background-color:#F7F7F7;border-right:2px solid #E1E1E1;position:absolute;top:39px;left:0;box-sizing:border-box;padding-top:4px;padding-left:2px;padding-right:2px}.tools .tool{padding:9px;cursor:pointer;position:relative}.tools .tool path{fill:#666;transition:fill 0.2s ease}.tools .tool.active path,.tools .tool:hover path{fill:#2680EB}.tools .tool.font-menu{position:absolute;bottom:4px;display:none}.drawer{width:242px;height:calc(100vh - 39px);background-color:#F7F7F7;border-right:2px solid #E1E1E1;position:absolute;top:39px;left:42px;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.drawer .section.section-font-cards{visibility:hidden !important;height:calc(100% - 210px);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.drawer .section.section-font-cards .search-box{position:relative;margin-top:15px}.drawer .section.section-font-cards .search-box input{width:100%;height:26px;line-height:26px}.drawer .section.section-font-cards .search-box input:invalid{box-shadow:none}.drawer .section.section-font-cards .search-box input:not(:valid) ~ .close-button{display:none}.drawer .section.section-font-cards .search-box input:not(:valid) ~ .search-icon{display:block}.drawer .section.section-font-cards .search-box .search-icon{display:none;width:18px;height:18px;position:absolute;top:5px;right:0}.drawer .section.section-font-cards .search-box .search-icon:before{content:'';position:absolute;width:9px;height:9px;box-sizing:border-box;border:solid 2px #999;border-radius:50%;top:3px;left:3px}.drawer .section.section-font-cards .search-box .search-icon:after{content:'';position:absolute;top:10px;left:9px;width:2px;height:5px;background-color:#999;border-radius:1px;transform:rotate(-45deg);transform-origin:1px top}.drawer .section.section-font-cards .search-box .close-button{cursor:pointer;width:18px;height:18px;position:absolute;top:5px;right:0}.drawer .section.section-font-cards .search-box .close-button:after,.drawer .section.section-font-cards .search-box .close-button:before{content:"";display:block;width:2px;height:14px;background-color:#999;border-radius:1px;position:absolute;top:2px;left:8px;transform:rotate(45deg)}.drawer .section.section-font-cards .search-box .close-button:before{transform:rotate(-45deg)}.drawer .section.section-font-cards .font-cards{margin-top:15px;overflow:auto;margin-right:-12px;padding-right:12px}.drawer .section.section-font-info{position:relative;height:210px;overflow:auto}.drawer .section.section-font-info .font-card{margin-top:15px}.drawer .section.section-font-info table.font-info__table{margin-top:15px;margin-bottom:10px;width:100%}.drawer .section.section-font-info table.font-info__table tr td,.drawer .section.section-font-info table.font-info__table tr th{text-align:left;padding-bottom:12px}.drawer .section.section-font-info table.font-info__table tr:last-child td,.drawer .section.section-font-info table.font-info__table tr:last-child th{padding-bottom:0}.drawer .section.section-font-info table.font-info__table tr th{padding-right:15px;box-sizing:border-box;width:32%}.drawer .section.section-font-info table.font-info__table tr td{width:68%}.drawer .section.section-font-info table.font-info__table a{text-decoration:none}.drawer .section.section-font-info table.font-info__table a:hover{text-decoration:underline}.canvas{background-color:#fff;color:#000;height:calc(100vh - 39px);position:absolute;top:39px;overflow:auto}.panel{width:242px;height:calc(100vh - 39px);background-color:#F7F7F7;border-left:2px solid #E1E1E1;position:absolute;top:39px;right:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.panel .section.section-font-size{padding:5px 10px}.panel .section.section-preset-variations .variations{margin-top:15px;max-height:90px;overflow-y:auto;margin-right:-12px;padding-right:12px}.panel .section.section-variable-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0}.panel .section.section-variable-options .slider-2d{-ms-flex-negative:0;flex-shrink:0;margin-top:0;margin-bottom:5px}.panel .section.section-variable-options .sliders{margin-right:-12px;padding-right:12px;overflow:auto;margin-top:5px}.panel .section.section-variable-options .slider{margin-bottom:5px}.panel .section.section-code{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;-ms-flex-positive:1;flex-grow:1}.panel .section.section-code code{background-color:#fff;color:#000;border-radius:3px;border:solid 1px #E1E1E1;display:block;font-family:"Input Mono Beta",monospace;font-variation-settings:'wght' 450, 'wdth' 500, 'slnt' 0;font-size:11px;line-height:1.3;margin-top:15px;padding:10px 6px;white-space:pre;overflow:auto;word-wrap:break-word}.panel .section.section-code code span.css-for-canvas-object{display:block;cursor:pointer;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:calc(100% + 6px)}.panel .section.section-code code span.css-for-canvas-object.highlight{background-color:#000;color:#fff}.panel .section.section-code code span.css-for-canvas-object:hover{color:#2680EB}.panel .section.section-export{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-negative:0;flex-shrink:0;width:100%;background-color:#F7F7F7}.panel .section.section-export .button{margin-left:12px}.panel .section.section-export .button.copied{position:relative;border-color:#2680EB}.panel .section.section-export .button.copied:after{content:"Copied";position:absolute;color:#fff;background-color:#2680EB;left:0;width:100%;height:26px;text-align:center;border-radius:2px}.panel .section.section-export .button.button-export{margin-left:0;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.panel .section.section-export .button.button-export path{fill:#666}.panel .section.section-export #form-export{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.panel .section.section-export button:focus{outline:none}.about{background-color:#fff;width:600px;margin:80px auto;font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 99;color:#000;font-size:16px;line-height:24px}.about h1{margin:22px 0 0;font-variation-settings:'wght' 156}.about p{font-variation-settings:'wght' 99;margin:11px 0}.about ul{margin:11px 0}.about ul li{font-variation-settings:'wght' 99}.about a{color:#000}.section{border-top:2px solid #E1E1E1;padding:10px 12px;box-sizing:border-box}.section.section-code,.section:first-child{border-top:none}.font-card{background-color:#fff;border:1px solid #E1E1E1;padding:5px 9px;cursor:pointer;transition:border-color 125ms ease-in-out;border-radius:3px;margin-bottom:6px;position:relative}.font-card.active{border-color:#2680EB}.font-card .font-preview{font-size:20px;line-height:26px;height:26px;overflow:hidden;white-space:nowrap;font-family:"Nunito Beta",sans-serif;font-variation-settings:'dfat' 0;color:#333;margin-right:-9px;position:relative}.font-card .font-preview:after{content:"";position:absolute;top:0;bottom:0;right:0;width:20px;background:linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 90%)}.font-card .label-text{line-height:15px;height:15px;white-space:nowrap;overflow:hidden;margin-right:30px;margin-bottom:2px;color:#000}.font-card .badge-text{line-height:15px;height:15px;position:absolute;top:5px;right:8px}.font-card .badge-text:before{content:'';position:relative;display:inline-block;top:1px;width:11px;height:11px;margin-right:3px;background-image:url("../images/variable-font.svg")}.variation-card{background-color:#fff;color:#000;border:1px solid #E1E1E1;font-size:12px;line-height:28px;height:28px;box-sizing:border-box;border-radius:3px;margin-bottom:6px;padding-left:5px;cursor:pointer;transition:border-color 0.2s ease}.variation-card.active{border-color:#2680EB}.variation-card span.specimen{font-size:20px;float:right;margin-right:5px;line-height:26px;color:#333}.slider-2d{position:relative;width:216px;height:116px;overflow:hidden;cursor:crosshair}.slider-2d:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;border:1px solid #E1E1E1;background-color:#fff;border-radius:3px}.slider-2d:active .handle:before{border-width:8px}.slider-2d .handle{position:absolute;left:20%;top:20%;width:16px;height:16px;cursor:move}.slider-2d .handle::before{content:'';position:absolute;width:100%;height:100%;box-sizing:border-box;border:2px solid #666;background-color:#fff;border-radius:50%;transition:border 125ms ease-in-out}.slider-2d .handle .axis-x-line{position:absolute}.slider-2d .handle .axis-x-line:after,.slider-2d .handle .axis-x-line:before{content:"";position:absolute;width:216px;height:2px;top:7px}.slider-2d .handle .axis-x-line:before{background-color:#E1E1E1;left:-220px}.slider-2d .handle .axis-x-line:after{background-color:#E1E1E1;right:-236px}.slider-2d .handle .axis-y-line{position:absolute}.slider-2d .handle .axis-y-line:after,.slider-2d .handle .axis-y-line:before{content:"";position:absolute;width:2px;height:216px;left:7px}.slider-2d .handle .axis-y-line:before{background-color:#E1E1E1;top:-220px}.slider-2d .handle .axis-y-line:after{background-color:#E1E1E1;bottom:-236px}.slider span.radio-button{float:left;margin-right:6px;position:relative;width:16px;height:16px;box-sizing:border-box;background-color:#fff;border:1px solid #999;border-radius:3px;cursor:pointer}.slider span.radio-button:before{content:'';position:absolute;top:6px;left:0;width:100%;border-top:solid 2px #E1E1E1}.slider span.radio-button:after{content:'';position:absolute;top:0;left:6px;width:2px;height:14px;background-color:#E1E1E1}.slider.selected span.radio-button{border:none;background-color:transparent;cursor:default}.slider.selected span.radio-button:before{content:'x';width:100%;top:2px;left:0;border-top:solid 2px #999;color:#999;font-variation-settings:'wght' 156;line-height:12px;text-align:center}.slider.selected span.radio-button:after{content:'';width:2px;height:6px;top:0;left:14px;background-color:#999}.slider.selected ~ .slider.selected span.radio-button{width:16px;height:16px;border:none;background-color:transparent;border-radius:0;position:relative;cursor:default}.slider.selected ~ .slider.selected span.radio-button:before{content:'y';top:0;left:2px;height:100%;border-top:none;border-left:solid 2px #999;width:11px;line-height:10px;text-align:right}.slider.selected ~ .slider.selected span.radio-button:after{content:'';width:6px;height:2px;top:14px;left:0;background-color:#999}.slider label{float:left;line-height:16px}.slider input[type=text]{line-height:16px;float:right;padding:0 6px 3px 0;width:50px;text-align:right}.slider input[type=range]{margin-top:2px;clear:both}.tip-text{font-family:"Nunito Beta",sans-serif;font-variation-settings:'wght' 99;font-size:10px;white-space:nowrap;position:absolute;pointer-events:none;display:none;z-index:9;color:#2680EB}[class$="-handle"] .tip-text{top:10px;left:10px}.tool .tip-text{top:13px;left:30px;color:#000;background-color:#fff}.vf-xheight-line .tip-text{left:calc(100% + 5px);top:-5px}.tool:hover .tip-text,.vf-xheight-line:hover .tip-text,[class$="-handle"]:hover .tip-text{display:block}.tool:active .tip-text,.vf-xheight-line:active .tip-text,[class$="-handle"]:active .tip-text{display:none}