*,*:before,*:after{box-sizing:border-box;margin:0;font-family:inherit;appearance:none}html,body{display:contents;font-family:Inter,sans-serif;font-weight:400;font-size:16px;background:#f4f4f4;color:#333}h1{font-family:Inter,sans-serif;font-weight:500;font-size:46.93510815px}h2{font-family:Inter,sans-serif;font-weight:500;font-size:35.289555px}h3{font-family:Inter,sans-serif;font-weight:500;font-size:26.5335px}h4{font-family:Inter,sans-serif;font-weight:500;font-size:19.95px}h5{font-family:Inter,sans-serif;font-weight:500;font-size:15px}button{border:1px solid #d0d0d0;background:#fff;font-size:15px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:.25rem;height:2rem}button.flat{border-color:transparent;background-color:transparent}button.flat:hover{background:#d0d0d0}button.icon{aspect-ratio:1;display:grid;place-content:center}button .material-symbols-outlined{font-size:20px}button.small{height:1.5rem}button.small .material-symbols-outlined{font-size:16px}.compound-select{display:flex;flex-direction:row;gap:.25rem}.compound-select button.selected{background:#f0f0f0;border-color:#888}main{user-select:none;width:100vw;height:100vh;display:grid;grid-template-columns:10rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"toolbar toolbar" "outline work-area"}main .toolbar{grid-area:toolbar;background:#fff;border-bottom:1px solid #d0d0d0;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:.5rem 1rem}main .toolbar .logo{display:flex;align-items:center;gap:.5rem;font-size:22px;font-weight:500;padding-right:.5rem}main .toolbar .group{display:flex;flex-direction:column;gap:.25rem}main .toolbar .group .label{font-size:13px;color:#333;font-weight:300}main .toolbar .group .content{display:flex;flex-direction:row;gap:.25rem}main .outline{grid-area:outline;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;background:#fff;border-right:1px solid #d0d0d0}main .outline .layer{padding:0 0 0 .25rem;height:1.5rem;border-radius:6px;display:flex;align-items:center;justify-content:space-between}main .outline .layer .name{display:flex;align-items:center;gap:.25rem;font-size:15px}main .outline .layer .name .material-symbols-outlined{font-size:18px}main .outline .layer .buttons{display:flex;align-items:center;flex-direction:row;gap:.25rem}main .outline .layer:not(:hover) .buttons{display:none}main .outline .layer:hover{background:#f0f0f0}main .work-area{grid-area:work-area;position:relative}main .work-area canvas{position:absolute;width:100%;height:100%}@media (prefers-color-scheme: dark){main .work-area canvas{filter:invert(100%)}}