:root{--s1:0.5rem;--s2:1rem;--s3:1.6rem;--s4:2rem;--s5:4rem;--font-sans:droid sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--font-serif:Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--font-mono:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--gray01:#d8d8d8;--gray02:#909090;--gray03:#707070;--gray04:#f7f7f7;--black:#303030;--white:#ffffff;--accent01:#2c68f0;--accent02:#005adf;--btn-bg-primary:linear-gradient(0deg, var(--accent02) 0%, var(--accent02) 50%, var(--accent01) 50%, var(--accent01) 100%);--btn-bg-secondary:linear-gradient(0deg, #dcdcdc 0%, #dcdcdc 50%, #e9e9e9 50%, #e9e9e9 100%);--btn-bg-danger:linear-gradient(0deg, #dd0000 0%, #dd0000 50%, #ee0000 50%, #ee0000 100%)}*{margin:0;padding:0;border:0;font-size:100%;font:inherit;line-height:1;vertical-align:baseline;-webkit-box-sizing:border-box;box-sizing:border-box}html{height:100%}body{background-color:var(--gray01);height:100%;color:var(--black);line-height:1;font-family:var(--font-sans);font-size:1rem}select,button,label,input{cursor:pointer}h1,h2,h3,h4,h5,h6{font-weight:700}.App{height:100%;overflow:hidden;display:grid;gap:var(--s1);padding:var(--s1);grid-template-columns:300px 1fr;grid-template-rows:1fr 1fr}.App>.Card:nth-child(2){background-color:var(--white);grid-row:span 2}.App>.Card:nth-child(2) .Card-content{position:relative}.App>.Card:nth-child(3) .Card-content{padding:0}.Card{border:1px solid var(--gray02);display:flex;flex-direction:column;min-height:0;overflow:hidden}.Card-header{padding:var(--s2)}.Card-subtitle{font-size:.8rem;line-height:1.6;opacity:.9}.Card-content{padding:0 var(--s2);overflow-y:scroll;flex:1}.Card-footer{padding:var(--s2)}.Controls{display:grid;gap:var(--s3)}.Controls.is-multi-cols{grid-template-columns:1fr 1fr}.Controls h3,.Controls label{font-size:.8rem;font-weight:700}.Control>*+*{margin-top:var(--s1)}.Radios svg{margin-left:var(--s1);stroke:transparent}.Radios [type=radio]{display:none}.Radios p{font-weight:700;opacity:.8}.Radios [type=radio]:checked~p{color:var(--accent01);font-weight:700;transition:color .4s ease-out}.Radios [type=radio]:checked~svg{stroke:var(--accent01);transition:stroke .4s ease-out}.Range-input{display:flex;align-items:center;gap:var(--s1)}.Range [type=range]{flex:1}.Color [type=color]{display:none}.Color-tile{display:block;border:1px solid var(--gray03);height:1.2rem}.Control.Number [type=number]{font-size:.8rem;padding:var(--s1);max-width:4rem;border:1px solid var(--gray03);display:block}.Output-canvas{background-color:var(--white);position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.Output-rootdiv{background-color:#000;width:50px;height:50px}.Output-rootdiv.is-round{border-radius:100%}.ShadowItem{border-top:1px solid var(--gray02)}.ShadowItem:last-child{border-bottom:1px solid var(--gray02)}.ShadowItem>input{display:none;visibility:hidden}.ShadowItem>input:checked+label{background-color:var(--bg)}.ShadowItem>label{display:flex;width:100%;justify-content:space-between;align-items:center;padding:var(--s1)var(--s2);background-color:var(--gray01);transition:background-color .2s ease-out}.ShadowItem>label:hover{background-color:var(--white)}.Modal.is-fullscreen{position:fixed;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;z-index:9;background-color:rgba(0,0,0,.8)}.Modal.is-shadow{position:absolute;z-index:9;left:var(--s1);max-width:18rem;width:100%;bottom:var(--s1)}.Modal.is-shadow .Modal-window{background-color:var(--gray01)}.Modal.is-shadow .Modal-content>*+*{margin-top:var(--s2)}.Modal.is-fullscreen .Modal-window{margin:var(--s2)}.Modal.is-fullscreen .Modal-content{max-height:400px;overflow:scroll}.Modal-window{background-color:var(--white);border:1px solid var(--gray02);max-width:500px;width:100%}.Modal-header{display:flex;align-items:center}.Modal-title{flex:1;padding:var(--s2);font-weight:700}.Modal-close{background-color:initial;padding:var(--s1)}.Modal-content{padding:var(--s2)}.CSSExport{background-color:var(--gray01);display:block;line-height:1.6;font-family:monospace;padding:var(--s2);border:1px solid var(--gray02)}.ButtonGroup{display:flex}.ButtonGroup>.Button+.Button{border-left:0}.Button{border:1px solid var(--gray03);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;padding:var(--s1)calc(var(--s2)/1.2)}.Button.is-primary{background:var(--btn-bg-primary);color:var(--white);border:1px solid var(--accent)}.Button.is-secondary{background:var(--btn-bg-secondary);color:var(--black);box-shadow:inset 0 0 0 1px var(--gray04)}.Button.is-danger{background:var(--btn-bg-danger);color:#fff;border:1px solid #900;box-shadow:inset 0 0 0 1px #ff0000}.Button.has-icon{gap:var(--s1)}