#breakpoints-dialog .draggable-dialog-handle .dialog-heading #breakpoint-dialog-apply{opacity:.2;font-size:11px;font-family:bornaregular,sans-serif;padding:3px 6px;background-color:#cdcdcd;border:1px solid #000;border-radius:10px;margin-left:7px}#breakpoints-dialog .draggable-dialog-handle .dialog-heading #breakpoint-dialog-apply.enabled{opacity:1}#breakpoints-dialog .draggable-dialog-handle .dialog-heading #breakpoint-dialog-apply.enabled:hover{cursor:pointer;background-color:#000;color:#fff}#breakpoints-dialog .draggable-dialog-handle .dialog-heading #breakpoint-dialog-syncing{height:15px;width:15px;background-image:url(../images/icon-sync.svg);background-size:cover;background-position:50%;margin-left:7px;animation:a 1s linear infinite;transform-origin:center center;display:none}#breakpoints-dialog .draggable-dialog-handle .dialog-heading #breakpoint-dialog-syncing.showing{display:block}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#breakpoints-dialog .draggable-dialog-handle .dialog-body{min-width:180px}#breakpoints-dialog .breakpoints-wrapper{display:flex;flex-flow:row}#breakpoints-dialog .breakpoints-wrapper .add-breakpoint-wrapper{display:flex;flex-flow:column;justify-content:center;padding-inline:10px;height:125px}#breakpoints-dialog .breakpoints-wrapper .add-breakpoint-wrapper #add-breakpoint{cursor:pointer}#breakpoints-dialog .breakpoints-wrapper .row{height:25px}#breakpoints-dialog .breakpoints-wrapper .breakpoint-definition-labels{text-align:right;margin-right:3px;margin-left:3px;min-width:80px}#breakpoints-dialog .breakpoints-wrapper .breakpoint-definition-labels .row{display:flex;flex-flow:column;justify-content:center}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions{display:flex;flex-flow:row;justify-content:flex-start}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition{padding-inline:3px;padding-top:3px;border-radius:3px;transition:background-color .3s ease}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition.to-be-removed{background-color:#fff}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition.selected-for-removal{background-color:#000}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition.selected-for-removal .remove-breakpoint-wrapper .remove-breakpoint:hover{background-image:url(../images/icon-trash-white.svg)}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition.empty .remove-breakpoint-wrapper{display:none}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition .remove-breakpoint-wrapper{display:flex;flex-flow:row;justify-content:center;align-items:center}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition .remove-breakpoint-wrapper .remove-button{background-image:url(../images/icon-minus.svg);background-size:contain;background-position:50%;width:15px;height:15px;cursor:pointer}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition .remove-breakpoint-wrapper .remove-button:hover{background-image:url(../images/icon-minus-hover.svg)}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition input,#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition select{width:50px;box-sizing:border-box;text-align:center;padding-top:2px;height:22px}#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition input option:disabled,#breakpoints-dialog .breakpoints-wrapper .breakpoints-definitions .breakpoint-definition select option:disabled{color:#bbb}#dialogs-layer{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:2}#dialogs-layer .draggable-dialog{pointer-events:all}.draggable-dialog{position:absolute;top:100px;left:100px;box-shadow:0 4px 8px rgba(0,0,0,.2);font-family:sans-serif;user-select:none;z-index:3;border-radius:7px;font-size:var(--typography-body)}.draggable-dialog.minimized{display:none}.draggable-dialog .draggable-dialog-handle{position:relative;top:0;left:0;width:100%;height:100%;cursor:move;border-radius:5px;background-color:#b4b4b4;box-sizing:border-box;transition:background-color .3s ease}.draggable-dialog .dialog-heading{display:flex;flex-flow:row;justify-content:flex-start;align-items:center;background-color:#fff;border-top-left-radius:7px;border-top-right-radius:7px}.draggable-dialog .dialog-heading .dialog-heading-label{margin-left:7px}.draggable-dialog .dialog-heading .dialog-close-button{background-image:url(../images/icon-close.svg);background-size:contain;background-position:50%;width:18px;height:18px;cursor:pointer}.draggable-dialog .dialog-heading .dialog-close-button:hover{background-image:url(../images/icon-close-hover.svg)}.draggable-dialog .dialog-body{padding:2px;color:#000;transition:opacity .3s ease}.draggable-dialog .dialog-body input:read-only{background-color:#ededed;border:1px solid #ededed}.draggable-dialog .dialog-body input[type=number]::-webkit-inner-spin-button,.draggable-dialog .dialog-body input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.draggable-dialog .dialog-body input[type=number]{-moz-appearance:textfield}#playground-canvas{position:relative;display:flex;flex-flow:row;flex-wrap:nowrap}#playground-canvas #dummy-playground-canvas-spacer{min-width:1px}#playground-canvas #playground-canvas-invisible-overlay{position:fixed;left:0;top:0;width:100vw;height:100vw;z-index:1;display:none}:root{--typography-body-font-size:15px;--typography-dialog-heading-font-size:15px;--typography-dialog-label-font-size:13px;--typography-dialog-input-font-size:13px}[data-typo=body]{font-family:bornaregular,sans-serif;font-size:var(--typography-body-font-size)}[data-typo=dialog-heading]{font-family:bornasemibold,sans-serif;font-size:var(--typography-dialog-heading-font-size);letter-spacing:1px;padding-block:2px;padding-inline:3px;margin-bottom:8px}[data-typo=dialog-label]{font-family:bornasemibold,sans-serif;font-size:var(--typography-dialog-label-font-size)}[data-typo=dialog-input]{font-family:bornaregular,sans-serif;font-size:var(--typography-dialog-input-font-size)}#menu-bar{position:fixed;bottom:0;left:0;width:100%;height:30px;background-color:#000;display:flex;flex-flow:row;justify-content:flex-start;align-items:center;padding-inline:10px}#menu-bar .menu-item{margin-right:4px;margin-left:4px;opacity:.7}#menu-bar .menu-item:hover{opacity:1}#menu-bar #open-sandbox{display:block;background-size:cover;background-position:50%;color:#fff;border-radius:10px;border:1px solid #fff;background-color:transparent;padding:3px 6px;text-decoration:none;font-size:12px}#menu-bar #open-sandbox:hover{color:#000;background-color:#fff}#breakpoint-canvases{display:flex;flex-flow:row;justify-content:flex-start;flex-wrap:nowrap;transform-origin:top left}#breakpoint-canvases .breakpoint-canvas-wrapper .breakpoint-canvas-sizing{color:#fff;display:flex;flex-flow:row;justify-content:space-between;align-items:center;font-size:calc(12 / var(--mcg-scale) * 1px);padding-block:calc(5 / var(--mcg-scale) * 1px);margin-right:50px}#breakpoint-canvases .breakpoint-canvas-wrapper .breakpoint-canvas-sizing .breakpoint-canvas-size-constraints{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}#breakpoint-canvases .breakpoint-canvas-wrapper .breakpoint-canvas-sizing .breakpoint-canvas-size-current-wrapper .breakpoint-canvas-size-current{font-size:calc(11 / var(--mcg-scale) * 1px);width:calc(25 / var(--mcg-scale) * 1px);padding-block:calc(2 / var(--mcg-scale) * 1px);text-align:center;border-radius:calc(5 / var(--mcg-scale) * 1px)}#breakpoint-canvases .breakpoint-canvas-wrapper .breakpoint-canvas{height:calc(100vh / var(--mcg-scale) - 100px / var(--mcg-scale));position:relative;margin-right:50px}#breakpoint-canvases .breakpoint-canvas-wrapper .breakpoint-canvas iframe{position:absolute;top:0;left:0;width:100%;height:100%;overflow:scroll;border:none}:root{--mcg-scale:1}body{margin:0;padding:25px 0 0 50px;overflow-y:hidden;background-color:#222}body,input,select,textarea{font-family:bornaregular,sans-serif;font-size:var(--typography-body-font-size)}#clipboard-test{display:none;width:500px;height:100vh;position:fixed;right:0;top:0;background-color:#888}#clipboard-test #paste-target img{display:none}#clipboard-test #image-preview{width:100%;height:auto}