deploy: 8be5792838

browser-main.3b44c0c9.js

@@ -13,7 +13,7 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel
 },{"react":"HdMw","object-assign":"YOwE","scheduler":"IGIl"}],"X9zx":[function(require,module,exports) {
 "use strict";function _(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE){0;try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(_)}catch(O){console.error(O)}}}_(),module.exports=require("./cjs/react-dom.production.min.js");
 },{"./cjs/react-dom.production.min.js":"jF7N"}],"RJck":[function(require,module,exports) {
-"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var r={};if(null!=a)for(var l in a)"default"!==l&&Object.prototype.hasOwnProperty.call(a,l)&&e(r,a,l);return t(r,a),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=exports.PAGE_QUERY_ARG=exports.PageContext=void 0;const r=a(require("react"));exports.PageContext=r.default.createContext({currPage:"vocabulary",allPages:[]}),exports.PAGE_QUERY_ARG="p";const l=e=>{let{page:t}=e;return r.default.createElement("a",{href:"?".concat(exports.PAGE_QUERY_ARG,"=").concat(encodeURIComponent(t))},t)},n=e=>{const t=r.useContext(exports.PageContext);return r.default.createElement("nav",null,r.default.createElement("ul",{className:"navbar"},t.allPages.map(e=>r.default.createElement("li",{key:e},t.currPage===e?e:r.default.createElement(l,{page:e})))))},o=e=>{let{title:t,children:a}=e;return r.default.createElement("div",{className:"page"},r.default.createElement("header",null,r.default.createElement("h1",null,t),r.default.createElement(n,null)),a,r.default.createElement("footer",null,r.default.createElement("p",null,"For more details about this project, see its"," ",r.default.createElement("a",{href:"https://github.com/toolness/mystic-symbolic",target:"_blank"},"GitHub repository"),".")))};exports.Page=o;
+"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var r={};if(null!=a)for(var l in a)"default"!==l&&Object.prototype.hasOwnProperty.call(a,l)&&e(r,a,l);return t(r,a),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Page=exports.PAGE_QUERY_ARG=exports.PageContext=void 0;const r=a(require("react"));exports.PageContext=r.default.createContext({currPage:"vocabulary",allPages:[]}),exports.PAGE_QUERY_ARG="p";const l=e=>{let{page:t}=e;return r.default.createElement("a",{href:"?".concat(exports.PAGE_QUERY_ARG,"=").concat(encodeURIComponent(t))},t)},n=e=>{const t=r.useContext(exports.PageContext);return r.default.createElement("nav",null,r.default.createElement("ul",{className:"navbar"},t.allPages.map(e=>r.default.createElement("li",{key:e},t.currPage===e?e:r.default.createElement(l,{page:e})))))},o=e=>{let{title:t,children:a}=e;return r.default.createElement("div",{className:"page"},r.default.createElement("header",null,r.default.createElement("h1",null,"Mystic Symbolic ",t),r.default.createElement(n,null)),a,r.default.createElement("footer",null,r.default.createElement("p",null,"For more details about this project, see its"," ",r.default.createElement("a",{href:"https://github.com/toolness/mystic-symbolic",target:"_blank"},"GitHub repository"),".")))};exports.Page=o;
 },{"react":"HdMw"}],"sxvS":[function(require,module,exports) {
 "use strict";function e(e){if("number"==typeof e)return e;void 0===e&&(e="");const t=parseFloat(e);if(isNaN(t))throw new Error("Expected '".concat(e,"' to be a float!"));return t}function t(e){const t=[];for(let r of e)t.push(...r);return t}function r(e){return 180*e/Math.PI}function o(e){let{min:t,max:r,step:o}=e;const n=[];for(let s=t;s<=r;s+=o)n.push(s);return n}function n(e){return o({min:0,max:e-1,step:1})}function s(e){return e.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.slugify=exports.range=exports.inclusiveRange=exports.rad2deg=exports.flatten=exports.float=void 0,exports.float=e,exports.flatten=t,exports.rad2deg=r,exports.inclusiveRange=o,exports.range=n,exports.slugify=s;
 },{}],"ct9k":[function(require,module,exports) {
@@ -51,7 +51,7 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel
 },{"react":"HdMw","./checkbox":"Uy1r","./color-widget":"ct9k","./numeric-slider":"EQND","./svg-symbol":"ObB7"}],"OjlT":[function(require,module,exports) {
 "use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var o={};if(null!=n)for(var c in n)"default"!==c&&Object.prototype.hasOwnProperty.call(n,c)&&e(o,n,c);return t(o,n),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HoverDebugHelper=void 0;const o=n(require("react"));function c(e){const t=[];let n=e;for(;;){const{specType:e,specIndex:o,symbolName:c,attachParent:r,attachType:a,attachIndex:i}=n.dataset;if(e&&o)t.unshift("".concat(e,"[").concat(o,"]"));else if(c)t.unshift(c);else if(r&&a&&i&&t.length){const e=t.length-1;t[e]="".concat(t[e],"@").concat(r,".").concat(a,"[").concat(i,"]")}if(!(n.parentNode instanceof SVGElement))break;n=n.parentNode}return t}const r=e=>{let[t,n]=o.useState(null);const r=()=>n(null);return o.default.createElement("div",{onMouseMove:e=>{const{target:t}=e;if(t instanceof SVGElement){const o=e.clientX+window.scrollX,r=e.clientY+window.scrollY,a=c(t);if(a.length)return void n({x:o,y:r,text:a.join(".")})}r()},onMouseLeave:r},t&&o.default.createElement("div",{className:"hover-debug-helper",style:{position:"absolute",pointerEvents:"none",top:"".concat(t.y,"px"),left:"".concat(t.x,"px")}},t.text),e.children)};exports.HoverDebugHelper=r;
 },{"react":"HdMw"}],"PhPL":[function(require,module,exports) {
-"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,a,l){void 0===l&&(l=a),Object.defineProperty(e,l,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,l){void 0===l&&(l=a),e[l]=t[a]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var l={};if(null!=a)for(var r in a)"default"!==r&&Object.prototype.hasOwnProperty.call(a,r)&&e(l,a,r);return t(l,a),l};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VocabularyPage=void 0;const l=a(require("react")),r=require("../bounding-box"),n=require("../svg-symbol"),o=require("../svg-vocabulary"),c=require("../symbol-context-widget"),i=require("../hover-debug-helper"),u=require("../page"),d=e=>"".concat(e,"px"),s=100,b=e=>{const t=e.data,a=r.dilateBoundingBox(t.bbox,100),o=e.scale||1,[c,i]=r.getBoundingBoxSize(a);return l.default.createElement("svg",{viewBox:"".concat(a.x.min," ").concat(a.y.min," ").concat(c," ").concat(i),width:d(c*o),height:d(i*o)},l.default.createElement(n.SvgSymbolContent,Object.assign({},e)))},m=()=>{const[e,t]=l.useState(n.createSvgSymbolContext()),[a,r]=l.useState(""),d=a.toLowerCase().replace(/ /g,"_"),s=l.useMemo(()=>o.SvgVocabulary.items.filter(e=>e.name.toLowerCase().includes(d)),[d]);return l.default.createElement(u.Page,{title:"Mystic Symbolic Vocabulary"},l.default.createElement("div",{className:"sidebar"},l.default.createElement("div",{className:"flex-widget"},l.default.createElement("label",{htmlFor:"filter"},"Search for symbols: "),l.default.createElement("input",{type:"text",id:"filter",value:a,onChange:e=>r(e.target.value),placeholder:"🔎"})),l.default.createElement(c.SymbolContextWidget,{ctx:e,onChange:t})),l.default.createElement("div",{className:"canvas scrollable"},l.default.createElement(i.HoverDebugHelper,null,s.map(t=>l.default.createElement("div",{key:t.name,style:{display:"inline-block",border:"1px solid black",margin:"4px"}},l.default.createElement("div",{style:{backgroundColor:"black",color:"white",padding:"4px"}},t.name),l.default.createElement("div",{className:"checkerboard-bg",style:{lineHeight:0}},l.default.createElement(b,Object.assign({data:t,scale:.25},e))))))))};exports.VocabularyPage=m;
+"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,a,l){void 0===l&&(l=a),Object.defineProperty(e,l,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,l){void 0===l&&(l=a),e[l]=t[a]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var l={};if(null!=a)for(var r in a)"default"!==r&&Object.prototype.hasOwnProperty.call(a,r)&&e(l,a,r);return t(l,a),l};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VocabularyPage=void 0;const l=a(require("react")),r=require("../bounding-box"),n=require("../svg-symbol"),o=require("../svg-vocabulary"),c=require("../symbol-context-widget"),i=require("../hover-debug-helper"),u=require("../page"),d=e=>"".concat(e,"px"),s=100,b=e=>{const t=e.data,a=r.dilateBoundingBox(t.bbox,100),o=e.scale||1,[c,i]=r.getBoundingBoxSize(a);return l.default.createElement("svg",{viewBox:"".concat(a.x.min," ").concat(a.y.min," ").concat(c," ").concat(i),width:d(c*o),height:d(i*o)},l.default.createElement(n.SvgSymbolContent,Object.assign({},e)))},m=()=>{const[e,t]=l.useState(n.createSvgSymbolContext()),[a,r]=l.useState(""),d=a.toLowerCase().replace(/ /g,"_"),s=l.useMemo(()=>o.SvgVocabulary.items.filter(e=>e.name.toLowerCase().includes(d)),[d]);return l.default.createElement(u.Page,{title:"Vocabulary!"},l.default.createElement("div",{className:"sidebar"},l.default.createElement("div",{className:"flex-widget"},l.default.createElement("label",{htmlFor:"filter"},"Search for symbols: "),l.default.createElement("input",{type:"text",id:"filter",value:a,onChange:e=>r(e.target.value),placeholder:"🔎"})),l.default.createElement(c.SymbolContextWidget,{ctx:e,onChange:t})),l.default.createElement("div",{className:"canvas scrollable"},l.default.createElement(i.HoverDebugHelper,null,s.map(t=>l.default.createElement("div",{key:t.name,style:{display:"inline-block",border:"1px solid black",margin:"4px"}},l.default.createElement("div",{style:{backgroundColor:"black",color:"white",padding:"4px"}},t.name),l.default.createElement("div",{className:"checkerboard-bg",style:{lineHeight:0}},l.default.createElement(b,Object.assign({data:t,scale:.25},e))))))))};exports.VocabularyPage=m;
 },{"react":"HdMw","../bounding-box":"nblm","../svg-symbol":"ObB7","../svg-vocabulary":"iXyu","../symbol-context-widget":"ZUAZ","../hover-debug-helper":"OjlT","../page":"RJck"}],"M5sl":[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Random=void 0;const e=require("./util"),t={modulus:Math.pow(2,32),multiplier:1664525,increment:1013904223};class s{constructor(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Date.now(),s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t;this.seed=e,this.params=s,this.latestSeed=e}clone(){return new s(this.latestSeed,this.params)}next(){return this.latestSeed=(this.params.multiplier*this.latestSeed+this.params.increment)%this.params.modulus,this.latestSeed/this.params.modulus}bool(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:.5;return this.next()<e}inRange(t){return this.choice(e.inclusiveRange(t))}choice(e){if(0===e.length)throw new Error("Cannot choose randomly from an empty array!");return e[Math.floor(this.next()*e.length)]}uniqueChoices(e,t){let s=[...e];const r=[];for(let i=0;i<t&&0!==s.length;i++){const e=this.choice(s);s=s.filter(t=>t!==e),r.push(e)}return r}}exports.Random=s;
 },{"./util":"sxvS"}],"kXMH":[function(require,module,exports) {
@@ -79,8 +79,8 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel
 },{"react":"HdMw","./creature-symbol":"MOuJ"}],"abWC":[function(require,module,exports) {
 "use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var r={};if(null!=a)for(var l in a)"default"!==l&&Object.prototype.hasOwnProperty.call(a,l)&&e(r,a,l);return t(r,a),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DebugPage=void 0;const r=a(require("react")),l=require("../auto-sizing-svg"),n=require("../creature-symbol"),u=require("../creature-symbol-factory"),c=require("../hover-debug-helper"),o=require("../page"),i=require("../svg-symbol"),f=require("../svg-transform"),s=require("../svg-vocabulary"),d=require("../symbol-context-widget"),m=u.createCreatureSymbolFactory(s.SvgVocabulary),g=m("eye"),h=m("hand"),b=m("arm"),v=m("antler"),E=m("crown"),y=m("wing"),p=m("muscle_arm"),S=m("leg"),T=m("tail"),_=m("lightning"),q=r.default.createElement(g,null,r.default.createElement(_,{nestInside:!0}),r.default.createElement(b,{attachTo:"arm",left:!0},r.default.createElement(y,{attachTo:"arm",left:!0,right:!0})),r.default.createElement(b,{attachTo:"arm",right:!0},r.default.createElement(p,{attachTo:"arm",left:!0,right:!0})),r.default.createElement(v,{attachTo:"horn",left:!0,right:!0}),r.default.createElement(E,{attachTo:"crown"},r.default.createElement(h,{attachTo:"horn",left:!0,right:!0},r.default.createElement(b,{attachTo:"arm",left:!0}))),r.default.createElement(S,{attachTo:"leg",left:!0,right:!0}),r.default.createElement(T,{attachTo:"tail",invert:!0})),x=()=>{const[e,t]=r.useState(i.createSvgSymbolContext()),a=r.useContext(n.CreatureContext),u=Object.assign(Object.assign(Object.assign({},a),e),{fill:e.showSpecs?"none":e.fill});return r.default.createElement(o.Page,{title:"Debug!"},r.default.createElement("div",{className:"sidebar"},r.default.createElement(d.SymbolContextWidget,{ctx:e,onChange:t})),r.default.createElement("div",{className:"canvas"},r.default.createElement(n.CreatureContext.Provider,{value:u},r.default.createElement(c.HoverDebugHelper,null,r.default.createElement(l.AutoSizingSvg,{padding:20},r.default.createElement(f.SvgTransform,{transform:f.svgScale(.5)},q))))))};exports.DebugPage=x;
 },{"react":"HdMw","../auto-sizing-svg":"kXMH","../creature-symbol":"MOuJ","../creature-symbol-factory":"qgwk","../hover-debug-helper":"OjlT","../page":"RJck","../svg-symbol":"ObB7","../svg-transform":"kvMx","../svg-vocabulary":"iXyu","../symbol-context-widget":"ZUAZ"}],"l8vw":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toPageName=exports.isPageName=exports.DEFAULT_PAGE=exports.pageNames=exports.Pages=void 0;const e=require("./waves-page"),a=require("./vocabulary-page"),r=require("./creature-page"),s=require("./mandala-page"),t=require("./debug-page");function o(e){return exports.pageNames.includes(e)}function g(e,a){return o(e)?e:a}exports.Pages={vocabulary:a.VocabularyPage,creature:r.CreaturePage,waves:e.WavesPage,mandala:s.MandalaPage,debug:t.DebugPage},exports.pageNames=Object.keys(exports.Pages),exports.DEFAULT_PAGE="vocabulary",exports.isPageName=o,exports.toPageName=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toPageName=exports.isPageName=exports.DEFAULT_PAGE=exports.pageNames=exports.Pages=void 0;const e=require("./waves-page"),a=require("./vocabulary-page"),r=require("./creature-page"),s=require("./mandala-page"),t=require("./debug-page");function o(e){return exports.pageNames.includes(e)}function g(e,a){return o(e)?e:a}exports.Pages={vocabulary:a.VocabularyPage,creature:r.CreaturePage,waves:e.WavesPage,mandala:s.MandalaPage,debug:t.DebugPage},exports.pageNames=Object.keys(exports.Pages),exports.DEFAULT_PAGE="mandala",exports.isPageName=o,exports.toPageName=g;
 },{"./waves-page":"R99w","./vocabulary-page":"PhPL","./creature-page":"Wo33","./mandala-page":"JWz6","./debug-page":"abWC"}],"qWv7":[function(require,module,exports) {
 "use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")),r=e(require("react-dom")),a=require("./page"),n=require("./pages"),l="app",u=document.getElementById("app");if(!u)throw new Error("Unable to find #".concat("app","!"));const o=e=>{const r=new URLSearchParams(window.location.search),l=n.toPageName(r.get(a.PAGE_QUERY_ARG)||"",n.DEFAULT_PAGE),u=n.Pages[l],o={currPage:l,allPages:n.pageNames};return t.default.createElement(a.PageContext.Provider,{value:o},t.default.createElement(u,null))};r.default.render(t.default.createElement(o,null),u);
 },{"react":"HdMw","react-dom":"X9zx","./page":"RJck","./pages":"l8vw"}]},{},["qWv7"], null)
-//# sourceMappingURL=browser-main.a0f130cb.js.map
+//# sourceMappingURL=browser-main.3b44c0c9.js.map

index.html

@@ -1 +1 @@
-<!DOCTYPE html><meta charset="utf-8"><title>Mystic Symbolic</title><style>body,html{margin:0;padding:0;font-family:Calibri,Arial,Helvetica Neue,sans-serif;overflow:hidden}.page{display:grid;column-gap:8px;padding:8px;box-sizing:border-box;height:100vh;width:100vw;grid-template-columns:auto 20em;grid-template-rows:3em auto 3em;grid-template-areas:"header header" "canvas sidebar" "footer footer"}header{grid-area:header;display:flex}header h1{margin:0;flex-grow:1}.sidebar{grid-area:sidebar;overflow-y:auto}footer{grid-area:footer}input[type=text],select{padding:8px}.checkerboard-bg{background:#eee url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1"><path d="M200 0h200v200H200zM0 200h200v200H0z"/></svg>');background-size:20px 20px}.hover-debug-helper{font-family:Consolas,Monaco,monospace;color:#fff;background:rgba(0,0,0,.75);padding:4px;margin-top:4px;margin-left:4px}.thingy{margin-top:10px;margin-bottom:10px}.thingy:first-child{margin-top:0}ul.navbar{display:flex;list-style-type:none;margin:0;padding:0;justify-content:flex-end}ul.navbar li{border-right:1px solid grey;margin-right:8px;padding-right:8px}ul.navbar li:last-child{border-right:none;padding-right:0;margin-right:0}.flex-widget{display:flex;flex-direction:column}.flex-widget label{margin-bottom:8px}.canvas{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas.scrollable{display:block;overflow:auto}.sidebar label.checkbox{display:block;margin-top:10px;margin-bottom:10px}.sidebar .color-widget{display:flex}.sidebar .color-widget label{flex-grow:1}.sidebar .numeric-slider{display:flex;flex-direction:column}.sidebar .numeric-slider .slider{display:flex}.sidebar .numeric-slider .slider input{flex-basis:90%}</style><noscript> <p>Alas, you need JavaScript to peruse this page.</p> </noscript><div id="app" className="app"></div><script src="browser-main.a0f130cb.js"></script>
+<!DOCTYPE html><meta charset="utf-8"><title>Mystic Symbolic</title><style>body,html{margin:0;padding:0;font-family:Calibri,Arial,Helvetica Neue,sans-serif;overflow:hidden}.page{display:grid;column-gap:8px;padding:8px;box-sizing:border-box;height:100vh;width:100vw;grid-template-columns:auto 20em;grid-template-rows:3em auto 3em;grid-template-areas:"header header" "canvas sidebar" "footer footer"}header{grid-area:header;display:flex}header h1{margin:0;flex-grow:1}.sidebar{grid-area:sidebar;overflow-y:auto}footer{grid-area:footer}input[type=text],select{padding:8px}.checkerboard-bg{background:#eee url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1"><path d="M200 0h200v200H200zM0 200h200v200H0z"/></svg>');background-size:20px 20px}.hover-debug-helper{font-family:Consolas,Monaco,monospace;color:#fff;background:rgba(0,0,0,.75);padding:4px;margin-top:4px;margin-left:4px}.thingy{margin-top:10px;margin-bottom:10px}.thingy:first-child{margin-top:0}ul.navbar{display:flex;list-style-type:none;margin:0;padding:0;justify-content:flex-end}ul.navbar li{border-right:1px solid grey;margin-right:8px;padding-right:8px}ul.navbar li:last-child{border-right:none;padding-right:0;margin-right:0}.flex-widget{display:flex;flex-direction:column}.flex-widget label{margin-bottom:8px}.canvas{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas.scrollable{display:block;overflow:auto}.sidebar label.checkbox{display:block;margin-top:10px;margin-bottom:10px}.sidebar .color-widget{display:flex}.sidebar .color-widget label{flex-grow:1}.sidebar .numeric-slider{display:flex;flex-direction:column}.sidebar .numeric-slider .slider{display:flex}.sidebar .numeric-slider .slider input{flex-basis:90%}</style><noscript> <p>Alas, you need JavaScript to peruse this page.</p> </noscript><div id="app" className="app"></div><script src="browser-main.3b44c0c9.js"></script>