@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;font-family:Nunito,sans-serif;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none}canvas{display:block}.glass{background:rgba(15,25,40,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.08);box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 hsla(0,0%,100%,.06)}.color-btn{width:40px;height:40px;border-radius:50%;border:2.5px solid hsla(0,0%,100%,.15);cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 3px hsla(0,0%,100%,.15);position:relative;flex-shrink:0}.color-btn:hover{transform:scale(1.15);border-color:hsla(0,0%,100%,.5)}.color-btn.active{transform:scale(1.2);border-color:#fff;box-shadow:0 0 18px hsla(0,0%,100%,.3),0 2px 8px rgba(0,0,0,.3),inset 0 1px 3px hsla(0,0%,100%,.2)}.color-btn.active:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid hsla(0,0%,100%,.25);animation:pulse-ring 1.5s ease infinite}.tool-btn{width:42px;height:42px;border-radius:14px;border:none;background:hsla(0,0%,100%,.06);color:hsla(0,0%,100%,.6);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.tool-btn:hover{background:hsla(0,0%,100%,.14);color:#fff;transform:translateY(-1px)}.tool-btn:active{transform:scale(.92)}.tool-btn.active-mode{background:hsla(0,0%,100%,.18);color:#fff;box-shadow:0 0 12px hsla(0,0%,100%,.15)}.tool-btn .tooltip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:rgba(0,0,0,.75);color:#fff;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:.3px}.tool-btn:hover .tooltip{opacity:1}.tool-btn.sound-on{color:#7ec9a0}.toast{padding:10px 22px;border-radius:14px;font-size:13px;font-weight:700;letter-spacing:.5px;color:#fff;opacity:0;transform:translateY(-10px) scale(.95);transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;white-space:nowrap;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translateY(0) scale(1)}.toast.success{background:rgba(126,201,160,.85);border:1px solid rgba(126,201,160,.4)}.toast.info,.toast.success{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast.info{background:rgba(74,173,207,.85);border:1px solid rgba(74,173,207,.4)}.toast.warning{background:rgba(232,148,90,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(232,148,90,.4)}@keyframes fadeSlideDown{0%{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes fadeSlideRight{0%{opacity:0;transform:translateY(-50%) translateX(-16px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes fadeSlideLeft{0%{opacity:0;transform:translateY(-50%) translateX(16px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:.5}}@keyframes pulse-ring{0%,to{opacity:.4;transform:scale(1)}50%{opacity:0;transform:scale(1.3)}}@keyframes pulse-text{0%,to{opacity:.35}50%{opacity:.7}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:768px){.desktop-only{display:none!important}.mobile-only{display:block!important}.mobile-bar .color-btn,.mobile-bar .tool-btn{width:36px;height:36px}.mobile-bar .tool-btn{border-radius:12px;font-size:16px}.mobile-bar .tool-btn .tooltip{display:none}.mobile-bar .divider{width:1px;height:28px;background:hsla(0,0%,100%,.12);flex-shrink:0;margin:0 4px}}@media (max-width:400px){.mobile-bar .color-btn,.mobile-bar .tool-btn{width:30px;height:30px}.mobile-bar .tool-btn{font-size:14px}}