@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");body{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");:root{--bg-color:#ffffff;--fg-color:#333333;--fade-color:rgb(166,166,166);--accent-bg:#ed225d;--accent-bg2:rgba(237,34,93,0.2);--accent-bg3:#4c061a;--accent-bg4:rgba(237,34,93,0.5);--accent-fg:#ffffff;--left-width:800px;--fadeout-distance:40px;--cursor-highlight:red}*{box-sizing:border-box}body{font-family:Montserrat,sans-serif;margin:0;--s:192px;--c1:#ffffff;--c2:var(--accent-bg2);--_g:var(--c1) 0% 5%,var(--c2) 6% 15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,#0000 96%;background:radial-gradient(50% 50% at 100% 0,var(--_g)),radial-gradient(50% 50% at 0 100%,var(--_g)),radial-gradient(50% 50%,var(--_g)),radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--c1);background-size:var(--s) var(--s);background-attachment:fixed}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;backdrop-filter:blur(5px)}.App{padding:20px 0 0 20px}.App>div{background-color:#FFFFFF;border:1.5px solid #dddddd;padding:20px;border-radius:5px}#left{width:var(--left-width);position:fixed;max-height:calc(100% - 40px)}#left,#left #output-pane .scrollable-main-sketch{overflow:scroll}#right{float:left;margin-left:calc(var(--left-width) + 20px);width:calc(100% - var(--left-width) - 40px);margin-bottom:20px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.toolbar h2{height:30px;line-height:30px;font-size:1.4em;font-weight:650}.toolbar h2 span{font-weight:400}.toolbar .run-button{width:30px;height:30px;border:none;border-radius:50%;font-size:1em;background-color:var(--accent-bg);color:var(--accent-fg);cursor:pointer}#editor-pane h2:after{content:"(with un-run changes)";font-weight:400;color:white;transition:color .3s ease;font-size:.8em;margin-left:10px}.App[data-dirty=true] #editor-pane h2:after{color:var(--accent-bg)}.cm-editor{margin-bottom:20px;border:1.5px solid #dddddd;font-size:1.2em;position:relative}.cm-focused{outline:none!important}.cm-activeLine,.cm-activeLineGutter{background-color:rgba(0,0,0,.03)!important}.cm-editor:after{content:"";position:absolute;top:-1.5px;right:-1.5px;bottom:-1.5px;left:-1.5px;border:0 solid var(--accent-bg);transition:border-width .3s ease;pointer-events:none}.App[data-dirty=true] .cm-editor:after{border-width:4px}.cursor-hovered{background-color:var(--accent-bg2);color:#000;font-weight:500}.cursor-hovered *{color:#000}.cursor-selected{background-color:var(--accent-bg4);color:#000;font-weight:700}.cursor-selected *{color:#000}#output-pane .sketch{display:inline-flex}#possibilities-pane[data-has-sketches=false] .toolbar{margin:0}#possibilities-pane[data-has-sketches=false] .toolbar h2{height:auto;line-height:auto}#possibilities-pane[data-has-sketches=false] h2 span{display:none}#sketch-rows{display:flex;flex-direction:column}.sketch-row{border-top:1px dashed var(--fade-color);padding-top:10px;position:relative}.sketch-row:after{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--fadeout-distance);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1))}.sketch-row>div{display:grid;grid-auto-flow:column;grid-template-rows:1fr;grid-auto-columns:max-content;overflow-x:scroll}.sketch-row[data-special=false] h3:before{content:"Add ";font-weight:400}.sketch-row[data-special=false] h3:after{content:" to code";font-weight:400}.sketch-row h3{font-size:1.2em;margin-bottom:10px;font-weight:700}.sketch-row[data-special=true]{order:-1}.sketch-row[data-special=true]:before{content:"";position:absolute;top:0;left:-20px;bottom:0;width:5px}.sketch-row[data-special=true]>div{grid-template-rows:1fr 1fr}.sketch-row[data-special=true] h3{background-color:var(--accent-bg2);font-weight:650;padding:5px;border-radius:5px}.sketch-row .show-more-button{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:10;width:30px;height:30px;border:none;border-radius:50%;background-color:rgba(255,255,255,.9);font-size:1.5rem;font-weight:900;background-color:var(--accent-bg);color:var(--accent-fg);cursor:pointer}.sketch-row .show-more-button span{position:absolute;left:0;right:0;top:-1px}.sketch{border:1px solid var(--fade-color);border-radius:5px;background-color:#FFFFFF}.sketch .iframe-wrapper{transform-origin:0 0;display:inline-block}.sketch iframe{display:block;margin:0;padding:0;border:none}.sketch-row .sketch iframe{border-radius:5px 5px 0 0;transform:scale(.5);transform-origin:0 0}.sketch-row .sketch{margin:0 10px 10px 0;cursor:pointer!important;transition:all .3s;box-sizing:content-box}.sketch-row .sketch:hover{border:3px solid var(--accent-bg);transition:all .3s;box-shadow:0 0 5px var(--fade-color)}.sketch .added-function{text-align:left;width:100%;font-family:monospace;font-size:.9em;padding:5px;white-space:pre-wrap;word-break:break-all}.sketch-row .sketch:last-child{margin-right:var(--fadeout-distance)}