#app{display:flex;background:#e2e8f0}#mobileMenuBtn{display:none;position:absolute;top:15px;left:15px;z-index:1000;background:#fff;border:none;border-radius:12px;padding:12px 16px;font-size:18px;font-weight:700;color:var(--primary);box-shadow:0 4px 12px rgb(0 0 0 / .1);cursor:pointer}.sidebar{width:280px;min-width:280px;background:var(--card-bg);border-right:2px solid #cbd5e1;border-radius:0 24px 24px 0;display:flex;flex-direction:column;align-items:stretch;height:100vh;overflow-y:auto;overflow-x:hidden;touch-action:auto;user-select:none;z-index:999;box-shadow:4px 0 20px rgb(0 0 0 / .05)}.sb-logo{padding:24px 20px 10px;font-size:24px;font-weight:800;color:var(--primary);text-align:center}.sb-section{font-size:14px;font-weight:800;color:var(--text-muted);text-transform:uppercase;padding:16px 20px 8px;letter-spacing:1px}.tool-group,.sb-actions{display:flex;flex-direction:column;padding:0 16px;gap:8px}.btn{display:flex;align-items:center;justify-content:flex-start;gap:0;width:100%;background:#dbeafe;border:2.5px solid #bfdbfe;border-radius:40px;padding:0;color:var(--primary-hover);font-size:16px;font-weight:800;cursor:pointer;transition:all 0.18s ease;overflow:visible;position:relative;min-height:52px}.btn:hover{background:#bfdbfe;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 18px rgb(59 130 246 / .18)}.btn:active{transform:scale(.97) translateY(0)}.btn-chibi{width:54px;height:54px;object-fit:contain;object-position:bottom center;flex-shrink:0;margin-left:-4px;margin-right:2px;margin-top:-14px;margin-bottom:-4px;pointer-events:none;transition:content 0.15s;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1))}.btn-label{flex:1;text-align:center;padding-right:12px;letter-spacing:.3px}.tool-btn.active{background:#3b82f6;border-color:#2563eb;color:#fff}.tool-btn.active .btn-chibi{filter:drop-shadow(0 2px 6px rgb(37 99 235 / .25))}#eraserBtn{background:#fce7f3;border-color:#fbcfe8;color:#be185d}#eraserBtn:hover{background:#fbcfe8;border-color:#ec4899}#eraserBtn.active{background:#ec4899;border-color:#be185d;color:#fff}#mixerBtn{background:#ccfbf1;border-color:#99f6e4;color:#0f766e}#mixerBtn:hover{background:#99f6e4;border-color:#14b8a6}#mixerBtn.active{background:#14b8a6;border-color:#0f766e;color:#fff}#undoBtn,#redoBtn{background:#f1f5f9;border-color:#e2e8f0;color:var(--text-main)}#undoBtn:hover,#redoBtn:hover{background:#e2e8f0;border-color:#cbd5e1}#fitBtn{background:#ede9fe;border-color:#ddd6fe;color:#6d28d9}#fitBtn:hover{background:#ddd6fe;border-color:#7c3aed}#saveBtn{background:#dcfce7;border-color:#bbf7d0;color:#15803d}#saveBtn:hover{background:#bbf7d0;border-color:#16a34a}#donateBtn{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#fcd34d;color:#92400e}#donateBtn:hover{background:linear-gradient(135deg,#fde68a 0%,#fbbf24 100%);border-color:#f59e0b}#backBtn{background:#f1f5f9;border-color:#e2e8f0;color:var(--text-main)}#backBtn:hover{background:#e2e8f0;border-color:#cbd5e1}.sb-divider{height:2px;background:#f1f5f9;margin:16px}.sb-panel{padding:0 20px 10px;display:flex;flex-direction:column;gap:12px}.sb-row{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--text-main)}.sb-row span:last-child{color:var(--primary);background:#dbeafe;padding:4px 10px;border-radius:12px;font-size:13px}input[type=range].sb-slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:#cbd5e1;outline:none;margin:8px 0 16px}input[type=range].sb-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--primary);border:3px solid #fff;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.sb-color{padding:0 20px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}#wheelWrap{position:relative;width:200px;height:200px;flex-shrink:0}#wheelCanvas,#triangleCanvas{position:absolute;top:0;left:0;width:200px;height:200px;border-radius:50%;touch-action:none}.hex-row{display:flex;align-items:center;gap:12px;width:100%;background:#f1f5f9;padding:8px;border-radius:16px}#hexSwatch{width:32px;height:32px;border-radius:8px;border:2px solid rgb(0 0 0 / .1);flex-shrink:0}#hexInput{flex:1;background:#fff0;border:none;color:var(--text-main);font-size:16px;font-weight:700;outline:none;width:0;text-transform:uppercase}.sb-actions{margin-top:auto;padding-bottom:20px}.canvasArea{flex:1;overflow:hidden;position:relative;touch-action:none}#canvasContainer{position:absolute;transform-origin:top left;background:#fff;box-shadow:0 8px 30px rgb(0 0 0 / .15);border-radius:4px}canvas{position:absolute;top:0;left:0;touch-action:none}#lineCanvas{pointer-events:none}#brushCursor{position:absolute;width:20px;height:20px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9999;display:block;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 2px rgb(0 0 0 / .3)}#donateModal{position:fixed;inset:0;background:rgb(15 23 42 / .7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}#donateModal.hidden{display:none}.donate-card{background:#fff;border-radius:28px;padding:36px 32px 32px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 60px rgb(0 0 0 / .2);animation:popIn 0.35s cubic-bezier(.34,1.56,.64,1);position:relative}.donate-close{position:absolute;top:16px;right:20px;background:#f1f5f9;border:none;border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:background 0.15s}.donate-close:hover{background:#e2e8f0}.donate-hero-emoji{font-size:52px;display:block;margin-bottom:10px}.donate-hero-emoji img{width:100px;height:100px}.donate-card h2{font-size:24px;font-weight:800;color:#92400e;margin-bottom:6px}.donate-card .donate-tagline{font-size:14px;color:var(--text-muted);margin-bottom:20px;line-height:1.5}.donate-reasons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}.donate-pill{background:#fef3c7;color:#92400e;border-radius:20px;padding:5px 12px;font-size:13px;font-weight:700;border:1.5px solid #fde68a}.donate-methods{display:flex;gap:10px;justify-content:center;margin-bottom:22px}.donate-methods span img{width:30px;height:30px}.donate-method-btn{flex:1;padding:12px 8px;border-radius:16px;border:2.5px solid #e2e8f0;background:#f8fafc;font-size:13px;font-weight:800;color:var(--text-main);cursor:pointer;transition:all 0.18s;display:flex;flex-direction:column;align-items:center;gap:5px}.donate-method-btn:hover{border-color:#fbbf24;background:#fef3c7}.donate-method-btn.selected{border-color:#f59e0b;background:#fef3c7;color:#92400e}.donate-method-icon{font-size:22px}#donateResult{display:none;margin-top:4px}#donateResult.show{display:block}.donate-result-inner{background:#f8fafc;border-radius:16px;padding:16px;border:2px solid #e2e8f0}.donate-result-inner img{width:140px;height:140px;object-fit:contain;border-radius:10px;margin:0 auto 8px;display:block;background:#fff}.donate-link{display:inline-block;margin-top:8px;color:var(--primary);font-weight:800;font-size:14px;word-break:break-all;text-decoration:none}.donate-link:hover{text-decoration:underline}.donate-result-name{font-size:15px;font-weight:800;color:var(--text-main);margin-bottom:6px}.donate-commission{margin-top:20px;padding-top:18px;border-top:2px dashed #e2e8f0}.donate-commission p{font-size:13px;color:var(--text-muted);margin-bottom:10px}.commission-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 100%);border:2px solid #c4b5fd;border-radius:20px;padding:10px 22px;font-size:14px;font-weight:800;color:#5b21b6;cursor:pointer;text-decoration:none;transition:all 0.18s}.commission-btn:hover{background:linear-gradient(135deg,#ddd6fe 0%,#c4b5fd 100%);transform:translateY(-2px);box-shadow:0 4px 14px rgb(124 58 237 / .2)}.btn-chibi-emoji{font-size:28px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:-4px;margin-right:2px;margin-top:-14px;margin-bottom:-4px;line-height:1}.loupe{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:16px;padding:8px 10px 10px;box-shadow:0 8px 24px rgb(0 0 0 / .18),0 0 0 2px #e2e8f0;transition:box-shadow 0.15s;min-width:74px}.loupe-color{width:54px;height:54px;border-radius:50%;border:3px solid #e2e8f0;background:#f8fafc;box-shadow:inset 0 2px 6px rgb(0 0 0 / .1);transition:background 0.05s;position:relative}.loupe-color::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(#fff 0 0) center/1.5px 40% no-repeat,linear-gradient(#fff 0 0) center/40% 1.5px no-repeat;opacity:.55;mix-blend-mode:difference;pointer-events:none}.loupe-hex{font-size:12px;font-weight:800;color:var(--text-main);letter-spacing:.5px;font-family:monospace,sans-serif}.loupe--picked{box-shadow:0 8px 24px rgb(0 0 0 / .18),0 0 0 3px #10b981;background:#f0fdf4}.loupe--empty .loupe-color{border-style:dashed;border-color:#cbd5e1}.loupe--empty .loupe-hex{color:var(--text-muted)}