body{background:#fff}.draw{position:absolute;inset:0}.paper{transition:opacity .3s;position:absolute;top:0;left:0}.paper.is-clearing{opacity:0}.palette{--btn:min(48px, calc((100vw - 64px) / 6));--gap:10px;align-items:center;gap:var(--gap);padding:12px max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));background:#fff8eceb;flex-direction:column;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 8px #3b33551a}.tools,.colors{justify-content:center;gap:var(--gap) calc(var(--gap) * 1.4);flex-wrap:wrap;display:flex}.tools{justify-content:space-evenly;width:100%}.colors{max-width:calc(var(--btn) * 5 + var(--gap) * 1.4 * 4 + 1px);padding-top:var(--gap);border-top:2px dashed #3b335526}@media (orientation:landscape){.palette{--btn:min(48px, calc((100vh - 120px) / 6));padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px 12px;justify-content:center;top:0;left:auto;box-shadow:-2px 0 8px #3b33551a}.tools,.colors{width:calc(var(--btn) * 3 + var(--gap) * 1.4 * 2 + 1px);justify-content:flex-start;max-width:none}.app-nav{right:210px}}.swatch,.tool,.tool-clear{width:var(--btn);height:var(--btn);background:var(--c,#fff);border:4px solid #fff;border-radius:50%;padding:0;transition:transform .15s;box-shadow:0 2px 4px #3b335540}.swatch svg,.tool svg,.tool-clear svg{width:100%;height:100%}.swatch[data-color=\#ffffff]{box-shadow:inset 0 0 0 2px #ced4da,0 2px 4px #3b335540}.tool{color:inherit;padding:6px}.tools.is-rainbow .tool path[fill=currentColor]{fill:url(#rainbow-fill)}.tools.is-rainbow .pen-line{stroke:url(#rainbow-fill)}.swatch.is-selected,.tool.is-selected{border-color:#3b3355;transform:scale(1.2)}.tool-clear{color:#7a7290;padding:8px}.defs{width:0;height:0;position:absolute}