:root{--ink:#3b2a63;--ink-soft:#7a6aa0;--paper:#fffaff;--pink:#ff5d8f;--purple:#9b5de5;--line:#50328c1f;--font:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;--buncss-light:initial;--buncss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overflow:hidden;overscroll-behavior:none;height:100%;margin:0}body{font-family:var(--font);color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background-color:#ffe4f3;background-image:radial-gradient(60vmax 60vmax at 0 0,#ffd1ec 0%,#0000 60%),radial-gradient(60vmax 60vmax at 100% 10%,#d6e4ff 0%,#0000 60%),radial-gradient(60vmax 60vmax at 50% 110%,#d9fff1 0%,#0000 60%);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box}button{font:inherit;color:inherit;cursor:pointer}#app{display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);height:100dvh}.btn{white-space:nowrap;background:#fff;border:0;border-radius:999px;padding:.55em 1.1em;transition:transform 60ms,box-shadow 60ms;font-size:1rem;font-weight:600;box-shadow:0 4px #d9cdf0,0 6px 14px #50288c26}.btn:active{transform:translateY(3px);box-shadow:0 1px #d9cdf0,0 2px 6px #50288c26}.btn.round{width:2.8rem;height:2.8rem;padding:0;font-size:1.25rem}.btn.primary{background:linear-gradient(#ff7aa6,var(--pink));color:#fff;box-shadow:0 4px #d43a6c,0 6px 14px #ff3c784d}.btn.danger{color:#fff;background:#ff6b6b;box-shadow:0 4px #c94444}.btn.small{padding:.4em .85em;font-size:.9rem}.row-btns{display:flex;flex-wrap:wrap;align-items: center;gap:.6rem}#top{display:flex;align-items: center;gap:.75rem;min-width:0;padding:.6rem 1rem .2rem}.brand{letter-spacing:-.02em;color:var(--purple);text-shadow:0 3px #fff;font-size:1.7rem;font-weight:700}.brand span{color:var(--pink)}#boards{display:flex;overflow-x:auto;scrollbar-width:none;flex:1;gap:.45rem;padding:.3rem .2rem .5rem}.board-chip{display:flex;opacity:.75;background:#fff;border:0;border-radius:999px;flex:none;align-items: center;gap:.4rem;padding:.4rem .9rem .4rem .6rem;font-weight:600;box-shadow:0 3px #e2d7f5}.board-chip:before{content:"";background:var(--case);border-radius:.3rem;width:1rem;height:1rem;box-shadow:inset 0 -2px #00000026}.board-chip.on{opacity:1;outline:3px solid var(--purple)}.board-chip.add{padding:.4rem .8rem;font-size:1.1rem}.board-chip.add:before{display:none}.top-actions{display:flex;gap:.5rem}#stage{position:relative;display:grid;overflow:hidden;place-items: center;min-height:0;padding:3.3rem 0 .6rem}body.focus #app{grid-template-rows:1fr}body.focus #stage{padding:.6rem 0}#stage.shake{animation:shake .45s}#case{--u:80px;--case:#cfd8e3;position:relative;padding:calc(var(--u)*.55)calc(var(--u)*.32)calc(var(--u)*.32);border-radius:calc(var(--u)*.38);background:linear-gradient(170deg,var(--case-light),var(--case)35%,var(--case)70%,var(--case-dark));box-shadow:inset 0 calc(var(--u)*.05)0 #ffffff8c,inset 0 calc(var(--u)*-.09)0 #00000029,0 calc(var(--u)*.12)0 var(--case-dark),0 calc(var(--u)*.3)calc(var(--u)*.5)#3c1e6e47;transition:background .3s}#case:before{content:"";position:absolute;inset:calc(var(--u)*.5)calc(var(--u)*.24)calc(var(--u)*.24);border-radius:calc(var(--u)*.22);background:var(--case-dark);box-shadow:inset 0 calc(var(--u)*.05)calc(var(--u)*.1)#00000059;opacity:.55}#nameplate{position:absolute;top:calc(var(--u)*.1);width:min(70%,calc(var(--u)*4.5));height:calc(var(--u)*.34);text-align:center;font:600 calc(var(--u)*.2)var(--font);color:var(--ink);outline:none;user-select:text;-webkit-user-select:text;background:#ffffffb3;border:0;border-radius:999px;left:50%;transform:translate(-50%);box-shadow:inset 0 2px 4px #0000001f}#nameplate:focus{box-shadow:0 0 0 3px var(--purple);background:#fff}.screw{position:absolute;width:calc(var(--u)*.12);height:calc(var(--u)*.12);background:radial-gradient(circle at 35% 35%,#fff,#bbb 60%,#888);border-radius:50%;box-shadow:inset 0 0 0 1px #0003}.screw:after{content:"";position:absolute;background:#00000059;inset:45% 15%;transform:rotate(35deg)}.screw.tl{top:calc(var(--u)*.14);left:calc(var(--u)*.14)}.screw.tr{top:calc(var(--u)*.14);right:calc(var(--u)*.14)}.screw.bl{bottom:calc(var(--u)*.08);left:calc(var(--u)*.14)}.screw.br{bottom:calc(var(--u)*.08);right:calc(var(--u)*.14)}#board{position:relative;display:flex;touch-action:none;flex-direction:column}.row{display:flex;justify-content:center}.key{--w:1;--c:#fff;--c-dark:#b8b8b8;--c-darker:#8c8c8c;--c-light:#fff;--gap:calc(var(--u)*.1);--depth:calc(var(--u)*.14);--travel:calc(var(--depth)*.75);position:relative;width:calc(var(--w)*var(--u) - var(--gap));height:calc(var(--u) - var(--gap));margin:calc(var(--gap)/2);touch-action:none;cursor:pointer}.skirt{position:absolute;border-radius:calc(var(--u)*.17);background:linear-gradient(to bottom,var(--c-dark),var(--c-darker));box-shadow:0 calc(var(--u)*.04)calc(var(--u)*.06)#00000059,inset 0 calc(var(--u)*-.02)0 #00000026;transition:box-shadow .15s;inset:0}.cap{position:absolute;top:2%;left:6%;right:6%;bottom:var(--depth);border-radius:calc(var(--u)*.14);background:radial-gradient(120% 90% at 50% 15%,var(--c-light)0%,transparent 55%),linear-gradient(to bottom,var(--c),var(--c));box-shadow:inset 0 calc(var(--u)*.025)0 #ffffffbf,inset 0 calc(var(--u)*-.04)calc(var(--u)*.06)#00000024,inset calc(var(--u)*.03)0 calc(var(--u)*.04)#ffffff40,inset calc(var(--u)*-.03)0 calc(var(--u)*.04)#0000000f;overflow:hidden;transform-origin:50% 100%;will-change:transform;transition:transform 45ms ease-out}.cap:after{content:"";position:absolute;pointer-events:none;background:linear-gradient(170deg,#ffffff59 0%,#fff0 38%);inset:0}.pic{position:absolute;border-radius:calc(var(--u)*.1);background:50%/cover no-repeat;inset:6%}.legend{position:absolute;font-weight:700;font-size:calc(var(--u)*.22);color:var(--ink);pointer-events:none;line-height:1;top:8%;left:12%}.key.has-pic .legend{font-size:calc(var(--u)*.14);text-shadow:0 0 3px #ffffffe6;top:6%;left:9%}.no-legends .legend{display:none}.key.down .cap{transform:translateY(var(--travel))scale(.97,.94);transition-duration:20ms}.key.down .skirt{box-shadow:0 calc(var(--u)*.01)calc(var(--u)*.03)#00000059,0 0 calc(var(--u)*.35)calc(var(--u)*.06)var(--c-light),0 0 calc(var(--u)*.6)var(--c)}.key.boing .cap{animation:boing .32s cubic-bezier(.3,1.6,.5,1)}.key.wiggle .cap{animation:wiggle .6s ease-in-out}.key.wave .cap{animation:wave .75s ease var(--d,0s)both}@keyframes boing{0%{transform:translateY(var(--travel))scale(.97,.94)}45%{transform:translateY(calc(var(--depth)*-.25))scale(1.03,1.05)}75%{transform:translateY(calc(var(--depth)*.08))scale(.995,.99)}to{transform:none}}@keyframes wiggle{0%,to{transform:none}20%{transform:rotate(-6deg)translateY(-4%)}40%{transform:rotate(5deg)translateY(-4%)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}@keyframes wave{0%{transform:none;filter:none}30%{transform:translateY(-22%)scale(1.06);filter:hue-rotate(120deg)saturate(1.6)brightness(1.15)}60%{transform:translateY(4%);filter:hue-rotate(260deg)saturate(1.4)}to{transform:none;filter:none}}@keyframes shake{0%,to{transform:none}20%{transform:translate(-6px,3px)rotate(-.6deg)}40%{transform:translate(5px,-3px)rotate(.5deg)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}body[data-mode=stamp] #board,body[data-mode=paint] #board,body[data-mode=rainbow] #board,body[data-mode=peel] #board{cursor:crosshair}#banner{position:absolute;z-index:5;display:flex;overflow-x:auto;scrollbar-width:none;animation:drop .35s cubic-bezier(.3,1.5,.5,1);background:#fff;border-radius:999px;align-items: center;gap:.55rem;max-width:calc(100% - 1rem);padding:.4rem .5rem .4rem .6rem;top:.4rem;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #50288c33}#banner[hidden]{display:none}#banner b{white-space:nowrap}#banner img{background:#f3eefc;border-radius:.6rem;flex:none;width:2.4rem;height:2.4rem}#banner .big{font-size:1.6rem}.dot{background:var(--sw);border-radius:50%;flex:none;width:1.8rem;height:1.8rem;box-shadow:inset 0 0 0 2px #0000001a}.dot.rainbow,.swatch.rainbow{background:conic-gradient(#ff5d5d,#ff9f1c,#ffd166,#06d6a0,#4cc9f0,#4361ee,#9b5de5,#f15bb5,#ff5d5d)}@keyframes drop{0%{transform:translate(-50%,-150%)}}#combo{--heat:0;position:absolute;font-weight:700;font-size:calc(2rem + var(--heat)*2rem);color:hsl(calc(40 - var(--heat)*40)100% 55%);-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 4px #0000001a;opacity:0;pointer-events:none;z-index:6;transition:opacity .25s,transform .25s;top:.6rem;right:1.2rem;transform:scale(.5)}#combo.show{opacity:1;transform:none}#combo.bump{animation:bump .18s}#combo span{margin-right:.1em;font-size:.8em}@keyframes bump{50%{transform:scale(1.25)rotate(-4deg)}}#cheer{position:absolute;white-space:nowrap;background:linear-gradient(90deg,#ff5d5d,#ff9f1c,#ffd166,#06d6a0,#4cc9f0,#9b5de5,#f15bb5);color:#0000;filter:drop-shadow(0 4px 0 #fff)drop-shadow(0 8px 16px #50288c4d);pointer-events:none;z-index:7;opacity:0;-webkit-background-clip:text;background-clip:text;font-size:clamp(2.5rem,9vw,6rem);font-weight:700;top:42%;left:50%;transform:translate(-50%,-50%)scale(0)}#cheer.show{animation:cheer 1.4s cubic-bezier(.3,1.5,.5,1)forwards}@keyframes cheer{0%{transform:translate(-50%,-50%)scale(0)rotate(-10deg);opacity:1}25%{transform:translate(-50%,-50%)scale(1.1)rotate(3deg);opacity:1}70%{transform:translate(-50%,-50%)scale(1)rotate(0);opacity:1}to{transform:translate(-50%,-80%)scale(.9);opacity:0}}#tray{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffffd9;border-radius:1.6rem 1.6rem 0 0;min-width:0;padding:.5rem .8rem .8rem;box-shadow:0 -6px 24px #50288c1f}#tabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:.35rem;padding-bottom:.5rem}.tab{display:flex;color:var(--ink-soft);background:0 0;border:0;border-radius:999px;flex:none;align-items: center;gap:.35rem;padding:.45rem .9rem;font-weight:600}.tab span{font-size:1.2rem}.tab.on{color:var(--ink);background:#f1e8ff}#panel{min-height:6.6rem}.scroller{display:flex;overflow-x:auto;scrollbar-width:thin;align-items:stretch;gap:.6rem;padding:.3rem .2rem .5rem}.tile{display:flex;text-align:center;background:#fff;border:0;border-radius:1.2rem;flex-direction:column;flex:none;justify-content:center;align-items: center;gap:.25rem;width:5.8rem;min-height:5.8rem;padding:.3rem;transition:transform 80ms;font-size:.85rem;font-weight:600;line-height:1.1;box-shadow:0 4px #e2d7f5,0 6px 12px #50288c14}.tile span{font-size:2rem;line-height:1}.tile:active{transform:translateY(3px)scale(.97)}.tile.on{outline:4px solid var(--purple);background:#f7f0ff}.tile.big-add{color:#c2185b;background:linear-gradient(160deg,#ffe0ef,#ffd0e8)}.tile.danger{color:#d43a3a}.pic-tile{background:var(--c);overflow:hidden;padding:0}.pic-tile img{object-fit:cover;pointer-events:none;width:100%;height:100%}.tile.volume{cursor:default;width:11rem}.tile.volume input{accent-color:var(--pink);width:85%}.hint{color:var(--ink-soft);white-space:nowrap;align-self: center;padding:0 .6rem;font-weight:600}.color-rows{display:grid;grid-template-columns:auto 1fr;align-items: center;gap:.45rem .8rem}.label{color:var(--ink-soft);font-size:.9rem;font-weight:600}.swatches{display:flex;flex-wrap:wrap;gap:.4rem}.swatch{background:var(--sw);position:relative;display:grid;border:0;border-radius:50%;place-items: center;width:2.3rem;height:2.3rem;transition:transform .1s;box-shadow:inset 0 0 0 2px #00000014,0 3px #0000001f}.swatch:active{transform:scale(.88)}.swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--purple);transform:scale(1.12)}.swatch.custom{cursor:pointer;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);font-size:1rem}.swatch.custom input{position:absolute;opacity:0;cursor:pointer;inset:0}.swatches.small .swatch{width:1.7rem;height:1.7rem}#btn-show{position:fixed;right:calc(.8rem + env(safe-area-inset-right));bottom:calc(.8rem + env(safe-area-inset-bottom));opacity:.55;display:none;z-index:10}body.focus #btn-show{display:block}body.focus #top,body.focus #tray{display:none}#fx{position:fixed;pointer-events:none;z-index:50;width:100vw;height:100vh;inset:0}#toast{position:fixed;background:var(--ink);color:#fff;opacity:0;pointer-events:none;z-index:70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;max-width:92vw;padding:.7rem 1.2rem;transition:all .3s cubic-bezier(.3,1.5,.5,1);font-weight:600;bottom:9rem;left:50%;transform:translate(-50%,2rem)}#toast.show{opacity:1;transform:translate(-50%)}#dialog{position:fixed;z-index:80;display:grid;background:#3c1e6e59;place-items: center;padding:1rem;inset:0}#dialog[hidden]{display:none}.dialog-card{text-align:center;animation:pop .3s cubic-bezier(.3,1.5,.5,1);background:#fff;border-radius:1.6rem;max-width:22rem;padding:1.5rem;box-shadow:0 20px 50px #3c1e6e4d}.dialog-card img{background:#f3eefc;border-radius:1rem;width:6rem;height:6rem}.dialog-card p{margin:.8rem 0 1.2rem;font-size:1.3rem;font-weight:600}.dialog-card .row-btns{justify-content:center}@keyframes pop{0%{transform:scale(.6);opacity:0}}#splash{position:fixed;z-index:100;display:grid;background:inherit;cursor:pointer;background-color:#ffe4f3;place-content: center;justify-items:center;gap:1.5rem;transition:opacity .45s,transform .45s;inset:0}#splash.gone{opacity:0;pointer-events:none;transform:scale(1.15)}.splash-keys{display:flex;gap:clamp(.4rem,1.5vw,1rem)}.splash-keys span{--s:clamp(3.2rem,12vw,7rem);width:var(--s);height:var(--s);display:grid;font-weight:700;font-size:calc(var(--s)*.5);color:#fff;border-radius:calc(var(--s)*.2);background:var(--c);box-shadow:inset 0 4px 0 #ffffff73,0 calc(var(--s)*.1)0 #0003,0 calc(var(--s)*.2)30px #00000026;text-shadow:0 3px #00000026;animation:hop 1.6s ease-in-out calc(var(--i)*.12s)infinite;place-items: center}#splash p{color:var(--purple);animation:pulse 1.4s ease-in-out infinite;font-size:1.5rem;font-weight:600}@keyframes hop{0%,60%,to{transform:none}20%{transform:translateY(-30%)rotate(-6deg)}35%{transform:translateY(6%)scale(1.06,.92)}}@keyframes pulse{50%{transform:scale(1.08)}}#studio{position:fixed;z-index:60;display:grid;padding:max(.6rem,env(safe-area-inset-top)).6rem max(.6rem,env(safe-area-inset-bottom));opacity:0;background:#3c1e6e4d;place-items: center;transition:opacity .2s;inset:0}#studio.open{opacity:1}#studio[hidden]{display:none}.studio-card{background:var(--paper);display:flex;overflow:hidden;border-radius:1.8rem;flex-direction:column;width:min(1100px,100%);max-height:100%;transition:transform .25s cubic-bezier(.3,1.5,.5,1);transform:scale(.95);box-shadow:0 30px 80px #3c1e6e59}#studio.open .studio-card{transform:none}.studio-head{display:flex;border-bottom:2px solid var(--line);justify-content:space-between;align-items: center;gap:.6rem;padding:.8rem 1rem}.studio-head h2{color:var(--purple);margin:0;font-size:1.5rem}.studio-body{display:flex;overflow:auto;gap:1.2rem;min-height:0;padding:1rem}.canvas-col{display:flex;flex-direction:column;flex:none;align-items: center;gap:.8rem}.canvas-wrap{--bg:#fff;--side:min(62vh,52vw,560px);width:var(--side);height:var(--side);background:radial-gradient(120% 90% at 50% 10%,#ffffff80,transparent 60%),var(--bg);overflow:hidden;position:relative;border-radius:14%;transition:background-color .2s;box-shadow:0 10px #0000001f,0 18px 30px #3c1e6e33,inset 0 0 0 3px #0000000f}.canvas-wrap canvas{display:block;touch-action:none;cursor:crosshair;width:100%;height:100%}.canvas-wrap.nudge{animation:shake .4s}.tools-col{display:flex;flex-direction:column;flex:1;gap:.9rem;min-width:0}.tools-col h3{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .35rem;font-size:.85rem}.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{display:flex;background:#fff;border:0;border-radius:999px;align-items: center;gap:.3rem;padding:.45rem .8rem;font-weight:600;box-shadow:0 3px #e2d7f5}.chip span{font-size:1.3rem}.chip.on{background:var(--purple);color:#fff;box-shadow:0 3px #6a34b0}.chip.size{justify-content:center;width:3.2rem;height:3.2rem;padding:0}.chip.size i{width:var(--s);height:var(--s);background:var(--dot,#333);border-radius:50%;box-shadow:0 0 0 2px #fff}.chip.size.on{box-shadow:0 0 0 3px var(--purple);background:#efe4ff}.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.8rem,1fr));gap:.3rem}.stamp{aspect-ratio:1;background:#fff;border:0;border-radius:.8rem;transition:transform .1s;font-size:1.6rem;box-shadow:0 3px #e2d7f5}.stamp:active{transform:scale(.85)}.stamp.on{box-shadow:0 0 0 3px var(--purple);transform:scale(1.08)}.preview-sec{display:flex;background:#f5efff;border-radius:1.2rem;align-items: center;gap:1rem;padding:.7rem}.preview-sec>div:first-child{flex:1}.preview-holder{--u:110px;flex:none}@media (max-width:760px),(orientation:portrait){.studio-body{flex-direction:column;align-items: center}.canvas-wrap{--side:min(88vw,46vh,520px)}.tools-col{width:100%}.brand{font-size:1.3rem}.tile{width:5rem;min-height:5rem}}@media (max-height:560px){#panel{min-height:0}.tile{min-height:4rem}.tile span{font-size:1.5rem}}@media (max-width:480px){.brand{display:none}#top{padding-inline-start:.6rem;padding-inline-end:.6rem}}@media (prefers-reduced-motion:reduce){#stage.shake{animation:none}}