*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#fdf4ff;width:100%;height:100%;overflow:hidden}#canvas{display:block}#ui{top:calc(72px + env(safe-area-inset-top));padding:8px;padding-left:calc(8px + env(safe-area-inset-left));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;touch-action:manipulation;background:#ffffffe0;border-radius:0 20px 20px 0;flex-direction:column;align-items:center;gap:10px;display:flex;position:fixed;left:0}.panel{background:#fff;border-radius:24px;gap:10px;padding:12px;display:none;position:absolute;top:0;left:calc(100% + 8px);box-shadow:0 4px 16px #0000002e}.panel.open{display:grid}.panel.fullscreen{z-index:30;background:#fffffff7;border-radius:0;place-content:center;gap:8px;padding:16px;position:fixed;inset:0;transform:translate(0,0)}.panel.fullscreen .tool-btn{width:var(--cell);height:var(--cell)}.panel.fullscreen .tool-btn img{width:calc(var(--cell) * .7);height:calc(var(--cell) * .7)}#palette{grid-template-columns:repeat(4,54px)}#sizes{grid-template-columns:repeat(3,54px)}.stamp-btn{background:#fff}.swatch{cursor:pointer;border:4px solid #0000;border-radius:50%;outline:none;flex-shrink:0;width:54px;height:54px}.swatch.active{border-color:#fff;box-shadow:0 0 0 3px #444}.tool-btn{cursor:pointer;background:#e8e8e8;border:4px solid #0000;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;font-size:26px;display:flex}.tool-btn.active{border-color:#fff;box-shadow:0 0 0 3px #444}.clear-btn{top:calc(12px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));z-index:10;touch-action:manipulation;position:fixed}.size-dot{border-radius:50%;display:block}img{pointer-events:none}.tool-btn img{width:36px;height:36px}.corner-btn{top:calc(12px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));z-index:20;touch-action:manipulation;position:fixed}#worlds,#pages,#coloring{z-index:5;background:#fdf4ff;position:fixed;inset:0}#worlds{touch-action:pan-y;flex-wrap:wrap;place-content:center;align-items:center;gap:32px;padding:80px 16px;display:flex;overflow-y:auto}.world-btn{background:#fff;border:none;border-radius:32px;width:160px;height:160px;box-shadow:0 4px 12px #0000001f}.world-btn img{width:128px;height:128px}#pages{padding:calc(84px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));touch-action:pan-y;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start;gap:16px;display:grid;overflow-y:auto}.thumb{aspect-ratio:1;background:#fff;border:none;border-radius:24px;min-width:150px;padding:12px;box-shadow:0 4px 12px #0000001f}.thumb img{width:100%;height:100%}body:not([data-view=drawing]) #canvas,body:not([data-view=drawing]) .open-coloring,body[data-view=drawing] .home-btn,body:not([data-view=worlds]) #worlds,body:not([data-view=pages]) #pages,body:not([data-view=coloring]) #coloring,body:not([data-view=coloring]) .bucket-btn,body[data-view=worlds] #ui,body[data-view=worlds] .clear-btn,body[data-view=pages] #ui,body[data-view=pages] .clear-btn{display:none}#coloring .paint,#coloring .lines,#coloring .stamps{touch-action:none;position:absolute}#coloring .lines,#coloring .paint{pointer-events:none}@media (orientation:landscape) and (height<=500px){#ui{padding:6px;padding-left:calc(6px + env(safe-area-inset-left));grid-template-columns:repeat(2,54px);gap:6px;display:grid}.panel{top:auto;bottom:0;left:calc(100% + 8px);transform:none}#palette{grid-template-columns:repeat(5,54px)}#sizes{grid-template-columns:54px}#worlds{padding:16px 16px 16px calc(90px + env(safe-area-inset-left));gap:16px}.world-btn{border-radius:24px;width:120px;height:120px}.world-btn img{width:96px;height:96px}}.swatch{border:1px solid #00000026}.swatch,.picker{background-repeat:no-repeat!important;background-origin:border-box!important}.size-stamp{display:none}body.stamp-sizes .size-stamp{display:block}body.stamp-sizes .size-dot{display:none}