:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff8f0;--ink:#5c4033;--shadow:0 4px 14px #5c40332e;font-family:Fredoka,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--bg);position:fixed;inset:0;overflow:hidden}#app{position:fixed;inset:0}#paint{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}#logo{top:max(10px, env(safe-area-inset-top));letter-spacing:.02em;background:linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffd60a,#06d6a0,#4cc9f0,#9b5de5);color:#0000;pointer-events:none;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:600;transition:opacity .6s;position:absolute;left:50%;transform:translate(-50%)}#logo.faded{opacity:0}#intro{pointer-events:none;width:0;height:0;position:absolute;top:50%;left:50%}#intro .star{filter:drop-shadow(0 2px 6px #ff9f1c80);width:64px;height:64px;animation:1.4s ease-in-out infinite star-pulse;position:absolute;transform:translate(-50%,-50%)}#intro .ripple{opacity:0;border:4px solid #ff9f1c;border-radius:50%;width:90px;height:90px;animation:2s ease-out infinite ripple;position:absolute;transform:translate(-50%,-50%)}#intro .ripple.r2{border-color:#4cc9f0;animation-delay:1s}@keyframes star-pulse{0%,to{transform:translate(-50%,-50%)scale(1)rotate(-8deg)}50%{transform:translate(-50%,-50%)scale(1.25)rotate(8deg)}}@keyframes ripple{0%{opacity:.8;transform:translate(-50%,-50%)scale(.5)}to{opacity:0;transform:translate(-50%,-50%)scale(2.2)}}.corner{top:max(10px, env(safe-area-inset-top));gap:10px;display:flex;position:absolute}.corner-left{left:max(10px, env(safe-area-inset-left))}.corner-right{right:max(10px, env(safe-area-inset-right))}.round-btn{width:64px;height:64px;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;background:#fff;border:none;border-radius:50%;place-items:center;transition:transform .12s cubic-bezier(.34,1.56,.64,1);display:grid;position:relative}.round-btn svg{pointer-events:none;width:32px;height:32px}.round-btn:active{transform:scale(.86)}.round-btn.parent{opacity:.85;background:#f3ece4;width:52px;height:52px}.round-btn.parent svg{width:24px;height:24px}.round-btn.saved{color:#fff;background:#06d6a0;transform:scale(1.1)}#btn-clear{--hold:0deg}#btn-clear .hold-ring{background:conic-gradient(#ff4d6d var(--hold), transparent var(--hold));pointer-events:none;border-radius:50%;position:absolute;inset:-6px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px))}#btn-clear.holding{transform:scale(.92)}#btn-clear.poof{animation:.35s poof}@keyframes poof{0%{transform:scale(1.25)rotate(-6deg)}to{transform:scale(1)rotate(0)}}#toolbar{left:50%;bottom:max(12px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow);background:#ffffffeb;border-radius:28px;flex-direction:column;align-items:center;gap:10px;max-width:calc(100vw - 16px);padding:12px 14px;display:flex;position:absolute;transform:translate(-50%)}#colors,#brushes{flex-wrap:nowrap;justify-content:center;gap:8px;display:flex}.color-dot{background:var(--c);cursor:pointer;border:4px solid #fff;border-radius:50%;flex:none;width:44px;height:44px;transition:transform .12s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px #5c403340}.color-dot:active{transform:scale(.85)}.color-dot.selected{border-color:var(--ink);transform:scale(1.18)}.brush-btn{cursor:pointer;background:#fdf3e7;border:none;border-radius:20px;flex:none;place-items:center;width:64px;height:64px;transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .12s;display:grid}.brush-btn svg{pointer-events:none;width:40px;height:40px}.brush-btn:active{transform:scale(.86)}.brush-btn.selected{background:#ffe8c7;transform:scale(1.1);box-shadow:inset 0 0 0 3px #ff9f1c}.no-gpu .brush-btn.fancy{display:none}@media (width<=430px){.color-dot{border-width:3px;width:36px;height:36px}.brush-btn{border-radius:17px;width:56px;height:56px}.brush-btn svg{width:34px;height:34px}#toolbar{gap:8px;padding:10px}#colors,#brushes{gap:6px}}