:root{--bg-hi:#fff0f6;--bg-mid:#ffe6f0;--bg-lo:#efe5ff;--panel:#fffbfeeb;--panel-strong:#fff;--border:#fadbeb;--ink:#5c4a66;--ink-soft:#937a9e;--ink-faint:#bda6c4;--pink:#ff8fb0;--pink-deep:#e86b92;--lavender:#d9c2f5;--gold:#ffd98a;--mint:#a8dfc0;--shadow-soft:0 10px 30px #f08eb429;--shadow-tight:0 4px 14px #f08eb433;--radius-lg:22px;--radius-md:15px;--radius-sm:11px;--font-hand:"ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", sans-serif;--font-body:"Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--watermark:"IBO0OK";--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{font:14px/1.55 var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(900px 500px at 12% -8%, #ffb6cb80, transparent 65%), radial-gradient(800px 460px at 102% 6%, #d9c2f58c, transparent 62%), radial-gradient(700px 520px at 78% 108%, #a8dfc059, transparent 60%), linear-gradient(150deg, var(--bg-hi) 0%, var(--bg-mid) 45%, var(--bg-lo) 100%);background-attachment:fixed;min-height:100vh;margin:0}body:after{content:"IBO0OK  IBO0OK  IBO0OK";font-family:var(--font-hand);letter-spacing:18px;color:#e86b920e;white-space:nowrap;pointer-events:none;z-index:0;justify-content:center;align-items:center;font-size:88px;display:flex;position:fixed;inset:0;transform:rotate(-18deg)}#app{z-index:1;grid-template-rows:auto 1fr;grid-template-columns:308px minmax(0,1fr) 312px;gap:14px;max-width:1500px;height:100vh;margin:0 auto;padding:16px 18px 24px;display:grid;position:relative}.topbar{grid-column:1/-1;justify-content:space-between;align-items:center;gap:16px;padding:8px 6px 4px;display:flex}.brand{align-items:center;gap:14px;display:flex}.bead-logo{object-fit:cover;background:#fff8fbe6;border-radius:50%;flex-shrink:0;width:64px;height:64px;padding:4px;animation:4.5s ease-in-out infinite logo-bob;box-shadow:0 5px 16px #e86b924d}@keyframes logo-bob{0%,to{transform:translateY(0)rotate(-1.2deg)}50%{transform:translateY(-5px)rotate(1.2deg)}}.brand-text{flex-direction:column;line-height:1;display:flex}.brand-name{font-family:var(--font-hand);letter-spacing:.5px;color:var(--pink-deep);margin:0;font-size:30px;font-weight:400}.brand-name span{color:var(--lavender);margin-left:7px;font-size:17px}.brand-tag{color:var(--ink-soft);margin:8px 0 0;font-size:13px;font-weight:500}.brand-dots{align-items:center;gap:7px;padding-right:8px;display:flex}.brand-dots span{background:var(--c);width:15px;height:15px;animation:3.2s ease-in-out infinite dot-float;animation-delay:var(--d);border-radius:5px;box-shadow:0 3px 7px #0000001a}@keyframes dot-float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)rotate(8deg)}}.panel{background:var(--panel);-webkit-backdrop-filter:blur(14px);border:1.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:18px 16px 20px;overflow:hidden auto}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#f0cfe0;border-radius:8px}.panel::-webkit-scrollbar-track{background:0 0}.left-panel{grid-area:2/1}.right-panel{grid-area:2/3}.stage{-webkit-backdrop-filter:blur(8px);border:1.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);background:#fffcfe99;grid-area:2/2;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.stage canvas{cursor:crosshair;border-radius:8px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);box-shadow:0 4px 18px #3c284621}.stage.fullscreen{z-index:999;box-shadow:none;background:#fff8fb;border:none;border-radius:0;margin:0;padding:0;position:fixed;inset:0}.stage.fullscreen canvas{cursor:crosshair;max-width:none;max-height:none;box-shadow:none;transform-origin:50%;border-radius:0}.fullscreen-btn{z-index:5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e86b92;cursor:pointer;background:#ffffffd9;border:1.5px solid #f3a8c6;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:17px;transition:all .15s;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 3px 10px #e86b9240}.fullscreen-btn:hover{background:#fff0f6;transform:scale(1.08);box-shadow:0 4px 14px #e86b9266}.fs-topbar{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--border);pointer-events:auto;background:#ffffffd9;flex-shrink:0;justify-content:space-between;align-items:center;gap:14px;padding:10px 16px;display:flex;position:fixed;top:0;left:0;right:0}.fs-title{font-family:var(--font-hand);color:var(--pink-deep);letter-spacing:1px;font-size:19px}.fs-zoom-indicator{background:#fff4f9;border:1.5px solid #f3d7e5;border-radius:12px;align-items:center;gap:10px;padding:5px 8px;display:flex}.fs-zoom-btn{color:#e86b92;cursor:pointer;background:#fff;border:1.5px solid #f3a8c6;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:17px;line-height:1;transition:all .15s;display:flex}.fs-zoom-btn:hover{background:#fff0f6;transform:scale(1.08)}#fsZoomPct{color:var(--ink-soft);text-align:center;min-width:42px;font-size:13px;font-weight:600}.fs-close-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff8fb0,#c69bf6);border:none;border-radius:50%;width:38px;height:38px;font-size:16px;transition:all .15s;box-shadow:0 3px 9px #e86b9259}.fs-close-btn:hover{transform:scale(1.1)}.fs-sidebar{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1.5px solid var(--border);pointer-events:auto;background:#ffffffe0;flex-direction:column;flex-shrink:0;width:216px;min-height:0;display:flex;position:fixed;top:60px;bottom:0;right:0}.fs-sidebar-header{font-family:var(--font-hand);color:var(--pink-deep);border-bottom:1.5px solid var(--border);flex-shrink:0;padding:12px 14px 10px;font-size:16px}.fs-sidebar-list{flex:1;padding:8px;overflow-y:auto}.fs-sidebar-list::-webkit-scrollbar{width:6px}.fs-sidebar-list::-webkit-scrollbar-thumb{background:#f0cfe0;border-radius:6px}.fs-color-item{cursor:pointer;border:2px solid #0000;border-radius:10px;align-items:center;gap:8px;margin-bottom:3px;padding:7px 8px;transition:background .12s;display:flex}.fs-color-item:hover{background:#fff0f6}.fs-color-item.active{background:#fff0f6;border-color:#ff8fb0}.fs-color-swatch{border:1.5px solid #0000001a;border-radius:6px;flex-shrink:0;width:22px;height:22px}.fs-color-info{flex-direction:column;flex:1;min-width:0;line-height:1.25;display:flex}.fs-color-code{color:var(--pink-deep);font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700}.fs-color-count{color:var(--ink-faint);font-size:10.5px}@media (width<=640px){.fs-sidebar{width:168px}}.panel h1{font-family:var(--font-hand);letter-spacing:1px;color:var(--pink-deep);margin:0 0 14px;font-size:21px;font-weight:400}.panel h2{font-family:var(--font-hand);letter-spacing:2px;color:var(--pink-deep);border-bottom:2px dashed #f4d3e4;margin:24px 0 10px;padding:0 0 7px;font-size:15px;font-weight:400}label{color:var(--ink-soft);margin:11px 0 5px;font-size:12.5px;font-weight:500;display:block}label.inline{cursor:pointer;color:var(--ink);align-items:center;gap:7px;margin:9px 0 0;display:flex}input[type=range]{width:100%;height:7px;accent-color:var(--pink);cursor:pointer}select,input[type=number]{border-radius:var(--radius-sm);width:100%;font:inherit;color:var(--ink);background:#fff8fb;border:1.5px solid #f0cfe0;outline:none;padding:7px 10px;font-size:12.5px;transition:border-color .15s,box-shadow .15s}select:focus,input[type=number]:focus{border-color:var(--pink);box-shadow:0 0 0 3px #ff8fb029}input[type=checkbox]{accent-color:var(--pink);width:15px;height:15px}.btn{border-radius:var(--radius-sm);font-family:var(--font-hand);letter-spacing:.5px;color:var(--ink-soft);cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff8fb;border:1.5px solid #f0cfe0;justify-content:center;align-items:center;gap:5px;padding:8px 12px;font-size:13.5px;transition:all .15s;display:inline-flex}.btn:hover:not(:disabled):not(.primary){border-color:var(--pink);color:var(--pink-deep);background:#fff0f6;transform:translateY(-1px)}.btn.primary{color:#fff;background:linear-gradient(135deg,#ff8fb0 0%,#f4729f 45%,#c69bf6 100%);border-color:#0000;box-shadow:0 5px 14px #f4729f66}.btn.drag-over{filter:brightness(1.12);transform:scale(1.03);box-shadow:0 0 0 3px #ff8fb0,0 8px 20px #f4729f8c}.btn.primary:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 7px 18px #f4729f80}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,.btn-replace:focus-visible,.presets button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lavender);outline-offset:2px}.row{gap:7px;margin-top:9px;display:flex}.row .btn{flex:1}.presets{flex-wrap:wrap;gap:6px;margin-top:9px;display:flex}.presets button{font:inherit;font-family:var(--font-hand);color:var(--ink-soft);cursor:pointer;background:#fff8fb;border:1.5px solid #f0cfe0;border-radius:9px;padding:6px 10px;font-size:12.5px;transition:all .15s}.presets button:hover{border-color:var(--pink);color:var(--pink-deep);background:#fff0f6}.presets button.active{color:#fff;background:linear-gradient(135deg,#ff8fb0,#c69bf6);border-color:#0000;box-shadow:0 3px 9px #f4729f59}.readout{color:var(--ink-soft);word-break:break-all;background:#fff4f9;border:1px dashed #f3d7e5;border-radius:10px;margin-top:7px;padding:8px 10px;font-size:11.5px;line-height:1.6}.readout b{color:var(--pink-deep);font-weight:700}.swatch-grid{grid-template-columns:repeat(auto-fill,23px);gap:4px;margin-top:9px;display:grid}.swatch{cursor:pointer;border:1.5px solid #0000001a;border-radius:6px;width:23px;height:23px;transition:transform .12s;position:relative;overflow:hidden}.swatch:hover{transform:scale(1.18);box-shadow:0 3px 8px #00000026}.swatch.off{opacity:.24}.swatch.off:after{content:"";background:linear-gradient(45deg,#0000 44%,#a33 44% 56%,#0000 56%);position:absolute;inset:0}table.stats{border-collapse:collapse;width:100%;margin-top:7px;font-size:12px}table.stats th{text-align:left;color:var(--ink-faint);border-bottom:1.5px solid var(--border);padding:5px 4px;font-size:11px;font-weight:500}table.stats td{border-bottom:1px solid #f8e9f1;padding:5px 4px}table.stats td.num{text-align:right;font-variant-numeric:tabular-nums}table.stats code{color:var(--pink-deep);font-size:11px;font-weight:700}table.stats tbody tr{cursor:pointer;transition:background .12s}table.stats tbody tr:hover{background:#fff0f6}table.stats th:last-child,table.stats td:last-child{text-align:center;white-space:nowrap;width:46px}.dot{vertical-align:-3px;border:1.5px solid #0000001a;border-radius:4px;width:14px;height:14px;display:inline-block}.btn-replace{color:#e86b92;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#ffd1e0,#f7c4f0);border:1.5px solid #f3a8c6;border-radius:8px;padding:2px 7px;font-family:inherit;font-size:11.5px;font-weight:600;line-height:1.4;transition:background .15s,box-shadow .15s,color .15s;display:inline-block;box-shadow:0 2px 5px #e86b9238}.btn-replace:hover{background:linear-gradient(135deg,#ffb8d1,#efb0e8);box-shadow:0 3px 8px #e86b9259}.btn-erase{color:#c0392b;cursor:pointer;background:#ffc8c880;border:1.5px solid #e8a0a0;border-radius:8px;margin-left:3px;padding:2px 5px;font-size:11px;font-weight:700;line-height:1.4;transition:background .15s,box-shadow .15s;display:inline-block}.btn-erase:hover{background:#ff787899;box-shadow:0 2px 6px #c8323240}table.stats tbody tr.hl{background:#fff0f6;box-shadow:inset 0 0 0 2px #ff8fb0}table.stats tbody tr.brush{background:#fdf0f2}table.stats tbody tr.hl.brush{background:#ffecf3}.empty-hint{color:var(--ink-soft);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:40px 24px;display:flex}.hint-heart{grid-template-rows:repeat(3,11px);grid-template-columns:repeat(3,11px);gap:2px;margin-bottom:16px;display:grid;transform:rotate(-6deg)}.hint-heart span{background:var(--c);border-radius:3.5px;box-shadow:0 2px 5px #00000014}.hint-heart span:first-child,.hint-heart span:nth-child(6){visibility:hidden}.hint-title{font-family:var(--font-hand);letter-spacing:1.5px;color:var(--pink-deep);margin:0;font-size:24px}.hint-sub{color:var(--ink-faint);margin:4px 0 0;font-size:13px}.note{color:var(--ink-soft);background:#fff4f9;border:1px dashed #f3d7e5;border-radius:10px;margin-top:20px;padding:9px 11px;font-size:11.5px;line-height:1.7}@media (width<=1160px){#app{grid-template-rows:auto;grid-template-columns:1fr;height:auto}.left-panel,.right-panel,.stage{grid-area:auto/1}.stage{order:-1;min-height:55vh}.brand-tag{display:none}}@media (width<=520px){#app{gap:12px;padding:12px}.brand-name{font-size:24px}.brand-name span{font-size:14px}.bead-logo{width:46px;height:46px}.brand-dots{display:none}.panel{border-radius:18px;padding:15px 12px}body:after{letter-spacing:8px;font-size:44px}}@media (prefers-reduced-motion:reduce){.bead-logo,.brand-dots span{animation:none}}