@import"https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap";input[name=rainbow-shadow-color]:checked~input[name=shadow-color]::before{position:absolute;width:100%;height:100%;content:"";background:linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)}input[name=rainbow-color]:checked~input[name=color]::before{position:absolute;width:100%;height:100%;content:"";background:linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)}#sidebar{background:#212121;overflow-y:auto;padding:1rem;padding-top:.4rem}button{outline:0;border:0;background:#424242;color:#fff;padding:.4rem;font-size:1rem;font-family:"Noto Sans",sans-serif}mount-point>button{padding:.5rem}input{background:#424242;color:#fff;outline:0;border:0;padding:.5rem;font-size:1rem;font-family:"Noto Sans",sans-serif}input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#424242;height:18px;width:18px;padding:0}input[type=checkbox]:checked{background-color:#4caf50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.2L5.8 13l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px}input[type=color]{background-color:#424242;padding:0;width:5rem;box-sizing:content-box}input[type=color]{position:relative}#sidebar::-webkit-scrollbar{width:16px}#sidebar::-webkit-scrollbar-thumb{background:#dadce0;background-clip:padding-box;border:4px solid rgba(0,0,0,0);border-radius:8px;box-shadow:none;min-height:50px}#sidebar::-webkit-scrollbar-thumb{background-color:#5f6368}#sidebar::-webkit-scrollbar-track,#sidebar::-webkit-scrollbar-track:hover{background:none;border:none}mount-point,simple-wheel,oscillator-input{display:block;width:100%;box-sizing:border-box}mount-point>span,simple-wheel>span,oscillator-input>span{font-size:.85rem}input[type=number]{width:4rem}oscillator-input{display:grid;grid-template-columns:auto auto auto auto;width:100%}oscillator-input>span{grid-column:span 4}oscillator-input>label.right{grid-column:3;text-align:right}oscillator-input>input.right{grid-column:4;text-align:left;margin-left:5px;margin-right:auto}simple-pintograph,proper-pintograph,lissajous-curves,rotary-pintograph{display:flex;flex-wrap:wrap;color:#fff;background:#303030;margin-top:.5rem;margin-bottom:.5rem;padding-top:0px}simple-pintograph>*,proper-pintograph>*,lissajous-curves>*,rotary-pintograph>*{padding:6px;padding-top:12px}simple-pintograph>.title-bar,proper-pintograph>.title-bar,lissajous-curves>.title-bar,rotary-pintograph>.title-bar{width:100%;display:block;padding-top:6px;font-size:1.2rem;cursor:default}.pinto-element:not(.expanded)>*:not(.title-bar){display:none}button.delete{float:right;border:0;outline:0;color:#fff;background:#c0392b;padding:4px}button.delete:hover{background:rgba(192,57,43,.8)}#action-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;justify-content:space-between}#speed-control{display:flex;align-items:center;gap:.4rem;color:#fff;font-size:.9rem;padding:.2rem .4rem;background:#424242}#speed-control>label{font-weight:bold}#speed-control>input[type=number]{width:4rem;padding:.2rem .3rem;font-variant-numeric:tabular-nums}arm-input{display:grid;width:100%;grid-template-columns:repeat(4, 25%);grid-auto-rows:1fr;grid-auto-rows:auto 1fr}arm-input>span{grid-column:span 4;font-size:.85rem}arm-input>label.right{grid-column:3;text-align:right}arm-input>input.right{grid-column:4;text-align:left;margin-left:5px;margin-right:auto}pen-settings{display:grid;width:100%;grid-template-columns:repeat(4, 25%);grid-auto-rows:1fr}pen-settings>label,pen-settings>input{justify-self:start;align-self:center}mount-point{display:grid;width:100%;grid-template-columns:25% 25% 25% 25%;grid-template-rows:1fr}mount-point>span:first-of-type{font-size:.85rem;align-self:center}mount-point>label{justify-self:end}mount-point>span:not(:first-of-type){position:relative}mount-point>span:not(:first-of-type)::before{content:"X";position:absolute;left:0;top:-0.5rem;left:.5rem;font-size:1rem;bottom:0;margin:auto}mount-point>span:nth-of-type(3)::before{content:"Y"}mount-point .mount-point-picker{width:4rem;padding:.5rem;box-sizing:content-box}simple-wheel{display:grid;width:100%;grid-template-columns:repeat(4, 25%);grid-auto-rows:1fr;grid-template-columns:repeat(2, 50%);grid-auto-rows:auto 1fr;width:50%}simple-wheel>span{grid-column:span 2}dialog{width:500px;height:500px;background:#303030;color:#fff}dialog[is=new-pinto-dialog] .content{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;width:100%;box-sizing:border-box}dialog[is=new-pinto-dialog] .element{width:150px;height:150px;position:relative;margin-bottom:2rem}dialog[is=new-pinto-dialog] .element pinto-canvas::after{content:attr(data-name);position:absolute;bottom:0;left:0;top:150px;text-align:center;width:150px;height:fit-content;background:#424242;color:#fff;padding:2px;box-sizing:border-box}dialog[is=settings-dialog] .settings-row{display:flex;justify-content:end}dialog .title-bar{height:2rem}dialog[is=error-dialog]{height:6rem;position:relative}dialog[is=error-dialog] .title-bar{height:0}dialog[is=error-dialog] .ok-button{position:absolute;bottom:0;left:0;margin:10px}dialog .close-button{position:absolute;top:0;right:0;margin:10px;background:url("../assets/close.svg");height:1.8rem;width:1.8rem;display:inline-block;background-repeat:no-repeat;background-position:center}dialog[is=open-workspace-dialog] .content .workspace-list{display:flex;gap:.5rem;flex-wrap:wrap}dialog[is=open-workspace-dialog] .content .workspace-list .workspace{display:flex;justify-content:space-between}dialog[is=open-workspace-dialog] .workspace{width:100%;background:#424242;padding:.4rem}.open-file{background:url("../assets/open.svg")}.new-file{background:url("../assets/new.svg")}.save-file{background:url("../assets/save.svg")}.open-file,.new-file,.save-file{height:1.8rem;width:1.8rem;display:inline-block;background-repeat:no-repeat;background-position:center}nav{display:flex;align-items:center;justify-content:space-between;gap:5px;padding-left:1rem;padding-right:1rem}nav account-status a.login{color:#fff;text-decoration:none}nav account-status a.logout{color:#fff;text-decoration:none;vertical-align:top;font-size:.85rem}body{margin:0;font-family:"Noto Sans",sans-serif;background:#303030;color:#fff;display:grid;grid-template-columns:23vw 77vw;grid-template-rows:2rem calc(100vh - 2rem);height:100vh;width:100vw}@media screen and (max-width: 1536px){body{grid-template-columns:28vw 72vw}}@media screen and (max-width: 1024px){body{grid-template-columns:40vw 60vw}}@media screen and (max-width: 768px){body{grid-template-columns:100vw;grid-template-rows:2rem calc(100vh - 2rem)}body>main{display:none}body>main:fullscreen{display:block}body>main:fullscreen>canvas{width:100vw;height:100vh}}nav{grid-column:span 2;background:#212121}main.hide-tools canvas.tools{display:none}pinto-canvas{width:100%;height:100%;display:block;position:relative}pinto-canvas>canvas{position:absolute;left:5%;top:5%;width:90%;height:90%;margin:auto}pinto-canvas>canvas:first-child{box-shadow:0px 3px 8px 2px rgba(0,0,0,.75);background-color:#fff}input:focus{outline:none}