:root{--sky:#cfe8ff;--ink:#22324a;--muted:#5a6475;--line:#22324a1f;--accent:#3d8bff;--good:#2fb36d;--card:#fffffff0;--shadow:0 6px 16px #1e325a33;--round:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--top:max(10px, env(safe-area-inset-top));--bottom:max(10px, env(safe-area-inset-bottom));--left:max(10px, env(safe-area-inset-left));--right:max(10px, env(safe-area-inset-right));--big:66px;--btn:56px;--gap:10px;font-family:var(--round);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}*{box-sizing:border-box}html,body{background:var(--sky);overscroll-behavior:none;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}#app{flex-direction:column;display:flex;position:fixed;inset:0}.stage{flex:auto;min-height:0;position:relative;overflow:hidden}.stage canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{pointer-events:none;position:absolute;inset:0}.hud button{pointer-events:auto;width:var(--btn);height:var(--btn);background:var(--card);box-shadow:var(--shadow);touch-action:manipulation;border:0;border-radius:18px;place-items:center;padding:0;transition:transform .1s;display:grid;position:absolute}.hud button svg{width:60%;height:60%}.hud button:active{transform:scale(.93)}.hud button:disabled{opacity:.35;cursor:default}.hud button[hidden]{display:none}.hud .shelf{top:var(--top);left:var(--left);color:#8b5a3a}.hud .undo,.hud .redo{top:var(--top);width:var(--big);height:var(--big);color:#fff;border-radius:22px}.hud .undo{left:calc(var(--left) + var(--btn) + var(--gap));background:#ff8a3d}.hud .redo{left:calc(var(--left) + var(--btn) + var(--big) + 2 * var(--gap));background:#3d8bff}.hud .play,.hud .stop{top:var(--top);right:calc(var(--right) + var(--btn) + var(--gap));color:#259a48}.hud .stop{color:#e2302d}.hud .tumble{top:var(--top);right:var(--right);color:#e2302d}.hud .rewind{top:var(--top);right:var(--right);color:#fff;background:#8547d1;animation:1.6s ease-out infinite beckon}.hud .rewind:disabled{animation:none}@keyframes beckon{0%{box-shadow:var(--shadow), 0 0 0 0 #8547d18c}to{box-shadow:var(--shadow), 0 0 0 16px #8547d100}}.hud .turn-left,.hud .turn-right,.hud .home{width:calc(var(--btn) + 8px);height:calc(var(--btn) + 8px);border-radius:50%;bottom:12px}.hud .turn-left{left:var(--left)}.hud .turn-right{right:var(--right)}.hud .home{left:calc(50% - var(--btn) / 2 - 4px)}.tray{z-index:2;padding:10px 10px var(--bottom);touch-action:none;background:#ffffffe6;border-radius:26px 26px 0 0;flex-direction:column;flex:none;gap:10px;transition:background .15s,box-shadow .15s;display:flex;position:relative;box-shadow:0 -6px 22px #1e325a24}.tabs{scrollbar-width:none;touch-action:pan-x;gap:6px;margin:-4px;padding:4px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{touch-action:pan-x;background:#edf4fc;border:0;border-radius:14px;flex:none;width:58px;height:46px;padding:3px;position:relative}.tab canvas{pointer-events:none;width:100%;height:100%;display:block}.tab.on{box-shadow:inset 0 0 0 3px var(--ink);background:#fff}.tab[hidden]{display:none}.tab .lock{background:#fff;border-radius:50%;width:20px;height:20px;padding:2px;display:none;position:absolute;bottom:2px;right:2px;box-shadow:0 1px 3px #00000040}.tab .lock svg{width:100%;height:100%;display:block}.tab.locked .lock{display:block}.tab.locked canvas{opacity:.55}.pieces{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.piece{touch-action:none;background:#edf4fc;border:0;border-radius:16px;height:72px;padding:2px;transition:transform .1s}.piece canvas{pointer-events:none;width:100%;height:100%;display:block}.piece:active{transform:scale(.95)}.piece.hop{animation:.55s ease-out hop}@keyframes hop{30%{transform:translateY(-16px)}55%{transform:translateY(0)scaleY(.9)}75%{transform:translateY(-5px)}}.colors{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.color{background:var(--c);touch-action:manipulation;border:0;border-radius:999px;height:40px;box-shadow:inset 0 -4px #0000002e}.bucket{touch-action:none;background:#edf4fc;border:0;border-radius:12px;height:40px;padding:1px;transition:transform .1s}.bucket svg{pointer-events:none;width:100%;height:100%;display:block}.bucket:active{transform:scale(.95)}.bucket.hop{animation:.55s ease-out hop}.color.on{outline:4px solid var(--ink);outline-offset:2px}.color.shiny{background:linear-gradient(135deg, #ffffffb3 0%, #fff0 32%, #00000047 58%, #0000 82%, #ffffff73), var(--c)}.color.clear{background:linear-gradient(135deg, #ffffffd9, #fff0 48%), color-mix(in srgb, var(--c) 45%, transparent);box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--c) 80%, transparent)}@supports not (color:color-mix(in srgb, red 50%, blue)){.color.clear{background:linear-gradient(135deg, #ffffffd9, #fff0 48%), linear-gradient(#ffffff8c, #ffffff8c), var(--c);box-shadow:inset 0 0 0 3px var(--c)}}.color.sparkle{background:radial-gradient(circle at 27% 33%, #fff 0 1.6px, transparent 2.4px), radial-gradient(circle at 64% 26%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 50% 64%, #ffffffe6 0 1.5px, transparent 2.3px), radial-gradient(circle at 78% 68%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 36% 78%, #fffc 0 1px, transparent 1.8px), var(--c)}.color.more,.color.back,.color.pot,.color.special{place-items:center;padding:0;display:grid;position:relative}.color svg{pointer-events:none;width:62%;height:62%}.color.more{background:conic-gradient(#e2302d,#f57f17,#ffcc1f,#94cf2f,#4bb7f2,#1f5fd6,#8547d1,#ff74b1,#e2302d)}.color.back{color:var(--ink);box-shadow:none;background:#edf4fc}.color.pot{box-shadow:none;background:#edf4fc;border-radius:12px}.color.pot svg{width:84%;height:84%}.color.special{background:linear-gradient(135deg,#f7d77a,#e8b02a 38%,#ff6fb3 68%,#9a5ce6)}.color .lock{background:#fff;border-radius:50%;width:20px;height:20px;padding:2px;position:absolute;bottom:-3px;right:-3px;box-shadow:0 1px 3px #00000040}.color .lock svg{width:100%;height:100%;display:block}.color.gap{visibility:hidden}.tray.drop{background:#fff4c7;box-shadow:inset 0 0 0 4px #ffcc1f,0 -6px 22px #1e325a24}.tray.drop.over{background:#ffe27a}.tray.drop .piece{background:#fff9}.tray.resting{opacity:.4;filter:saturate(.5);pointer-events:none}.hand{z-index:10;pointer-events:none;filter:drop-shadow(0 8px 10px #00000040);width:92px;height:92px;display:none;position:fixed;top:0;left:0}.hand.on{display:block}.hand canvas,.hand-icon,.hand-icon svg{width:100%;height:100%;display:block}.hand [hidden]{display:none}.lost{z-index:20;background:var(--card);width:120px;height:120px;box-shadow:var(--shadow);border:0;border-radius:50%;margin:auto;font-size:64px;position:fixed;inset:0}@media (min-width:700px) and (orientation:portrait){:root{--big:76px;--btn:64px;--gap:12px}.tray{gap:12px;padding-top:14px}.pieces{grid-template-columns:repeat(8,1fr);gap:10px}.piece{height:92px}.colors{grid-template-columns:repeat(14,1fr);gap:10px}.color,.bucket{height:50px}.tab{width:72px;height:56px}}@media (orientation:landscape){#app{flex-direction:row}.tray{width:calc(250px + var(--right));padding:var(--top) var(--right) var(--bottom) 14px;border-radius:26px 0 0 26px;justify-content:center;gap:14px;box-shadow:-6px 0 22px #1e325a24}.tray.drop{box-shadow:inset 0 0 0 4px #ffcc1f,-6px 0 22px #1e325a24}.pieces{grid-template-columns:repeat(2,1fr);gap:10px}.piece{height:86px}.colors{grid-template-columns:repeat(5,1fr);gap:8px}.color,.bucket{height:42px}:root{--big:76px;--btn:64px;--gap:12px}.hud{--right:10px}.hud .turn-left,.hud .turn-right,.hud .home{bottom:max(12px, env(safe-area-inset-bottom))}}@media (orientation:landscape) and (max-height:500px){.tray{width:calc(226px + var(--right));gap:6px;padding-left:10px}.tab{width:48px;height:38px}.pieces{grid-template-columns:repeat(3,1fr);gap:6px}.piece{height:56px}.colors{gap:6px}.color,.bucket{height:28px}:root{--big:58px;--btn:50px;--gap:10px}}.mixer{-webkit-user-select:none;user-select:none;align-items:center;gap:14px;padding-top:14px;position:relative}.mixer-close{width:48px;height:48px;color:var(--ink);background:#22324a12;border:0;border-radius:50%;padding:10px;position:absolute;top:12px;right:12px}.mixer-close svg{width:100%;height:100%;display:block}.mixer-pot{flex-direction:column;align-items:center;gap:6px;display:flex}.big-pot{width:min(210px,52vw)}.big-pot svg{width:100%;height:auto;display:block;overflow:visible}.big-pot .paint{fill:var(--paint);transition:fill .35s}.big-pot .swirl{opacity:0;transition:opacity .3s}.mixer.filled .big-pot .swirl{opacity:.55}.big-pot.splash{animation:.42s ease-out splash}.big-pot.full{animation:.4s shake}@keyframes splash{35%{transform:scale(1.07,.93)}65%{transform:scale(.97,1.04)}}.pot-drops{gap:6px;min-height:18px;display:flex}.pot-drops span{background:var(--c);border-radius:50%;width:18px;height:18px;box-shadow:inset 0 -3px #0003}.paint-drops{grid-template-columns:repeat(5,1fr);gap:10px;width:100%;display:grid}.paint-drop{background:var(--c);touch-action:manipulation;border:0;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;height:52px;transition:transform .1s;box-shadow:inset 0 -5px #0000002e}.paint-drop:active{transform:scale(.92)}.mixer-actions{gap:12px;width:100%;display:flex}.mixer-actions .btn{flex:1;padding:0}.mixer-actions svg{width:36px;height:36px}.mixer-actions .use{background:var(--paint);color:#fff;box-shadow:inset 0 -5px #0000002e}.mixer-actions .use svg{filter:drop-shadow(0 1px 2px #00000073)}@media (min-width:600px){.paint-drops{grid-template-columns:repeat(8,1fr)}}@media (orientation:landscape) and (max-height:500px){.sheet.mixer{width:min(700px,100%);padding:14px 18px max(14px, var(--bottom));grid-template-rows:auto auto;grid-template-columns:170px 1fr;align-items:center;gap:10px 18px;display:grid}.mixer-pot{grid-area:1/1}.big-pot{width:140px}.sheet.mixer .paint-drops{grid-area:1/2/span 2;grid-template-columns:repeat(5,1fr);padding-right:52px}.sheet.mixer .paint-drop{height:42px}.mixer-actions{grid-area:2/1}.mixer-actions .btn.big{min-height:50px}}.shelf-screen{z-index:15;overscroll-behavior:contain;touch-action:pan-y;padding:var(--top) var(--right) calc(var(--bottom) + 20px) var(--left);background:linear-gradient(#e3f1ff,#fdf6ea 60%);animation:.18s fade;position:fixed;inset:0;overflow-y:auto}.shelf-screen[hidden]{display:none}.shelf-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.shelf-head h1{text-align:center;flex:1;margin:0;font-size:22px}.shelf-close{width:var(--btn);height:var(--btn);background:var(--card);box-shadow:var(--shadow);border:0;border-radius:18px;flex:none;place-items:center;padding:0;display:grid}.shelf-close svg{width:60%;height:60%}.grownups-btn{color:#5a6475;background:0 0;border:0;flex:none;padding:8px 4px;font-size:14px;font-weight:600}.shelf-head>span{width:var(--btn);flex:none}.shelf-screen h2{margin:26px 0 10px;font-size:18px}.shelf-note{color:#5a6475;text-align:center;margin:-4px 0 14px}.cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.card{aspect-ratio:1;background:var(--card);box-shadow:var(--shadow);border:0;border-radius:22px;padding:0;position:relative}.card-pic{border-radius:inherit;background:#f4ead8;border:0;width:100%;height:100%;padding:0;display:block;overflow:hidden}.card-pic img{object-fit:cover;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%;display:block}.card.current{box-shadow:0 0 0 4px var(--ink), var(--shadow)}.card-btn{width:44px;height:44px;color:var(--ink);background:#ffffffeb;border:0;border-radius:50%;padding:8px;position:absolute;bottom:8px;box-shadow:0 2px 8px #1e325a33}.card-btn svg{width:100%;height:100%;display:block}.card-btn.copy{left:8px}.card-btn.bin,.card-btn.restore{right:8px}.card-btn.restore{color:#259a48;width:54px;height:54px}.card.new{color:#fff;background:#3d8bff;place-items:center;display:grid}.card.new svg{width:46%;height:46%}.card.bin-card{color:#5a6475;background:#eef1f5;place-items:center;display:grid}.card.bin-card svg{width:42%;height:42%}.card.bin-card .count{color:#fff;background:#ff8a3d;border-radius:14px;place-items:center;min-width:28px;height:28px;padding:0 8px;font-weight:800;display:grid;position:absolute;top:10px;right:12px}.card.named{aspect-ratio:auto;flex-direction:column;display:flex;overflow:hidden}.card.named .card-pic{aspect-ratio:1;border-radius:22px 22px 0 0;height:auto}.card-name{text-align:center;padding:8px 10px 10px;font-size:15px;font-weight:700}.card.named .lock{background:#fff;border-radius:50%;width:34px;height:34px;padding:6px;position:absolute;top:8px;right:8px;box-shadow:0 2px 6px #0003}.card.named .lock svg{width:100%;height:100%;display:block}.card.named.locked .card-pic img{opacity:.55}@keyframes fade{0%{opacity:0}}@media (min-width:700px){.cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}}.btn{min-height:48px;font-family:var(--round);color:var(--ink);background:#22324a12;border:0;border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:0 20px;font-size:17px;font-weight:700;transition:transform .1s,opacity .15s,background .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px #3d8bff59}.btn.big{border-radius:20px;min-height:60px;padding:0 24px;font-size:20px}.btn.ghost{color:var(--muted);background:0 0}.btn.block{width:100%}.sheet-wrap{z-index:30;background:#141e3273;justify-content:center;align-items:flex-end;animation:.2s fade;display:flex;position:fixed;inset:0}.sheet{width:min(520px,100%);max-height:94%;padding:18px 18px var(--bottom);background:#fff;border-radius:28px 28px 0 0;flex-direction:column;gap:14px;animation:.25s cubic-bezier(.2,.9,.3,1.1) rise;display:flex;overflow-y:auto}.sheet.grownups{-webkit-user-select:text;user-select:text}@media (min-height:700px) and (min-width:600px){.sheet-wrap{align-items:center}.sheet{border-radius:28px;padding-bottom:18px}}.sheet h2{text-align:center;margin:0;font-size:24px}.sheet p{color:var(--muted);margin:0;line-height:1.45}@keyframes rise{0%{opacity:0;transform:translateY(40px)}}.gate{gap:10px}.gate p{text-align:center}.gate .gate-q{color:var(--ink);font-size:26px;font-weight:800}.gate-a{border:2px solid var(--line);letter-spacing:.08em;border-radius:16px;align-self:center;place-items:center;min-width:120px;min-height:52px;padding:0 16px;font-size:30px;font-weight:800;display:grid}.keypad{grid-template-columns:repeat(3,1fr);align-self:center;gap:8px;width:min(300px,100%);display:grid}.keypad .btn{min-height:52px;padding:0;font-size:22px}.shake{animation:.35s shake}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@media (orientation:landscape) and (max-height:500px){.gate{grid-template-columns:1fr 270px;align-items:center;column-gap:24px;width:min(600px,100%);display:grid}.gate>*{grid-column:1}.gate .keypad{grid-area:1/2/span 5;width:auto}.gate .gate-a{justify-self:center}}.grownups{gap:12px}.gu-block{border-top:1px solid var(--line);flex-direction:column;gap:10px;padding-top:12px;display:flex}.gu-sets{text-align:center;letter-spacing:6px;font-size:28px}.gu-points{flex-direction:column;gap:10px;margin:0;padding:0;font-size:15px;line-height:1.4;list-style:none;display:flex}.gu-points li{align-items:flex-start;gap:10px;display:flex}.gu-points li>span:first-child{flex:none;font-size:20px;line-height:1.1}.sheet .gu-status{text-align:center;color:var(--ink);font-weight:700}.rule{justify-content:space-between;align-items:center;gap:12px;padding:4px 0;display:flex}.rule-label{flex-direction:column;font-size:16px;font-weight:600;display:flex}.rule-label small{color:var(--muted);margin-top:2px;font-size:13px;font-weight:400}.toggle{background:#d5d5dd;border:0;border-radius:16px;flex:none;width:52px;height:32px;padding:0;transition:background .2s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.toggle[aria-checked=true]{background:var(--good)}.toggle[aria-checked=true]:after{transform:translate(20px)}.sheet .link{color:var(--muted);align-self:center;font-size:14px}