*,*::before,*::after{box-sizing:border-box}html{line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;color:#1e293b;background:#f7f9fc}img,svg,video,canvas{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none;padding:0}:focus-visible{outline:3px solid rgb(59 130 246 / .45);outline-offset:2px}[hidden]{display:none!important}:root{--bg:#f0f4f8;--panel:#ffffff;--panel-2:#fbfdff;--panel-muted:#f7f9fc;--stroke:#e0e7ff;--stroke-2:#e6ebf2;--ring:rgba(79,70,229,.18);--ring-strong:#4f46e5;--shadow:0 4px 12px rgba(0,0,0,.10);--shadow-sm:0 1px 2px rgba(16,24,40,.08);--text:#1e293b;--muted:#64748b;--accent:#3b82f6;--swatch-size:40px;--swatch-inner:24px;--swatch-gap:8px;--action-size:60px;--action-radius:14px;--action-font:30px;--canvas-radius:12px}@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--panel:#0b1220;--panel-2:#0d1526;--panel-muted:#0e182b;--stroke:#23314e;--stroke-2:#1e2b45;--ring:rgba(99,102,241,.35);--ring-strong:#818cf8;--text:#e5e7eb;--muted:#94a3b8;--shadow:0 8px 24px rgba(0,0,0,.35);--shadow-sm:0 1px 2px rgba(0,0,0,.3)}}@media (prefers-contrast:more){:root{--ring:rgba(79,70,229,.6)}}.wp-coloring-shell{width:100%;max-width:1200px;margin-inline:auto;padding:16px;box-sizing:border-box;background:#fff0}.wp-coloring-grid{display:grid;grid-template-columns:120px minmax(0,1fr) 100px;gap:16px;align-items:start}@media (max-width:900px){.wp-coloring-grid{grid-template-columns:1fr;gap:12px}.wp-coloring-sidebar.right,.wp-coloring-sidebar.left{display:none}}.wp-coloring-sidebar{border:1px solid var(--stroke);border-radius:12px;box-shadow:var(--shadow);padding:12px;position:sticky;top:155px}.wp-coloring-sidebar.left{width:120px}.wp-coloring-sidebar.right{width:100px}.sidebar-title{font-weight:600;color:var(--text);margin:4px 0 12px;font-size:1rem;text-align:center}.palette-list{display:grid;grid-template-columns:repeat(2,minmax(44px,1fr));gap:14px;margin:0;padding:2px;list-style:none}@media (max-width:900px){.palette-list{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px}}.palette-btn{inline-size:var(--swatch-size);block-size:var(--swatch-size);border-radius:50%;border:1px solid var(--stroke-2);background:#fff;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s,transform .05s;touch-action:manipulation;-webkit-tap-highlight-color:#fff0}.palette-btn::before{content:"";inline-size:var(--swatch-inner);block-size:var(--swatch-inner);border-radius:50%;background:var(--clr)}.palette-btn:hover{border-color:var(--ring-strong);box-shadow:0 0 0 3px var(--ring)}.palette-btn:focus-visible{outline:none;border-color:var(--ring-strong);box-shadow:0 0 0 4px var(--ring)}.palette-btn.active{border-color:#000;box-shadow:0 0 0 1px rgb(0 0 0 / .25)}.mobile-palette{display:flex;flex-direction:row;gap:6px;padding:6px;max-height:calc(var(--swatch-size) * 2 + 6px);overflow-x:auto;scrollbar-width:none}.mobile-palette::-webkit-scrollbar{display:none}.mobile-palette .palette-btn{flex:0 0 var(--swatch-size);inline-size:var(--swatch-size);block-size:var(--swatch-size);border:none;background:none;position:relative;overflow:hidden}.mobile-palette .palette-btn::before{content:"";inline-size:100%;block-size:100%;border-radius:50%;background:var(--clr);box-shadow:inset 0 2px 4px rgb(0 0 0 / .1)}.mobile-palette .palette-btn.active{border:1px solid #000}.mobile-palette .palette-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px rgb(0 0 0 / .1)}.wp-coloring-main{border:1px solid var(--stroke);border-radius:12px;box-shadow:var(--shadow);padding:12px;min-width:0;display:flex;flex-direction:column;align-items:center}.topbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;inline-size:100%}.tool-group{display:flex;gap:8px}.tool-btn{border:1px solid var(--stroke);border-radius:8px;padding:8px 12px;font-weight:500;color:var(--text);transition:background .2s,color .2s,transform .1s,box-shadow .2s}.tool-btn:hover{transform:translateY(-2px);background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.tool-btn.active{background:var(--accent);color:#fff}.size-range{display:none}.wp-coloring-canvas-outer{inline-size:100%;max-width:100%;position:relative;border:1px dashed var(--stroke);border-radius:var(--canvas-radius);background:#fff;overflow:hidden;touch-action:none}.wp-coloring-status{text-align:center;color:var(--muted);font-weight:500;padding:8px;min-height:20px}.wp-coloring-canvas-outer.ready .bg-canvas,.wp-coloring-canvas-outer.ready .paint-canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block}.bg-canvas,.paint-canvas{display:block}@media (max-width:900px){.wp-coloring-canvas-outer{max-width:90%;margin-inline:auto}}@media (max-width:768px){.wp-coloring-canvas-outer{max-width:520px;aspect-ratio:3 / 4;height:auto!important}.wp-coloring-canvas-outer>canvas,.wp-coloring-canvas-outer>img,.wp-coloring-canvas-outer>svg{inline-size:100%!important;block-size:100%!important;object-fit:contain;display:block}}@supports not (aspect-ratio:3 / 4){@media (max-width:768px){.wp-coloring-canvas-outer{position:relative;height:auto!important}.wp-coloring-canvas-outer::before{content:"";display:block;padding-top:133.333%}.wp-coloring-canvas-outer>canvas,.wp-coloring-canvas-outer>img,.wp-coloring-canvas-outer>svg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain}}}.wp-coloring-sidebar .actions{display:flex;flex-direction:column;gap:12px}.action-btn{inline-size:var(--action-size);block-size:var(--action-size);border-radius:var(--action-radius);border:1px solid var(--stroke-2);background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:var(--action-font);line-height:1;padding:0;cursor:pointer;font-weight:700;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .05s,background .2s,color .2s}.action-btn:hover{box-shadow:0 0 0 3px var(--ring);color:var(--ring-strong)}.action-btn:active{transform:translateY(1px)}.action-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}@media (max-width:768px){.wp-coloring-sidebar .actions{flex-direction:row;justify-content:center;gap:10px}:root{--action-size:50px;--action-font:26px}}.wp-coloring-mobile-sidebar{display:none;border:1px solid var(--stroke);border-radius:12px;box-shadow:var(--shadow);padding:12px;margin-top:12px;flex-direction:column;gap:12px}@media (max-width:900px){.wp-coloring-mobile-sidebar{display:flex}}.mobile-actions{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:0;list-style:none}.mobile-actions .action-btn{inline-size:50px;block-size:50px;font-size:20px;border-radius:12px;border:1px solid var(--stroke);display:grid;place-items:center;transition:transform .1s ease,box-shadow .2s ease,background .2s}.mobile-actions .action-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:var(--panel-muted)}[data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;background:#111827;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}[data-tooltip]:hover::after{opacity:1}.u-center{display:grid;place-items:center}.u-hidden{display:none!important}.u-scroll-x{overflow-x:auto}.u-rounded{border-radius:12px}.u-ring{box-shadow:0 0 0 3px var(--ring)}.u-shadow{box-shadow:var(--shadow)}.wp-coloring-error{color:#dc2626;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:8px 12px;text-align:center;margin-top:12px}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}:root:dir(rtl) .wp-coloring-grid{direction:rtl}:root:dir(rtl) .wp-coloring-shell,:root:dir(rtl) .wp-coloring-grid,:root:dir(rtl) .wp-coloring-sidebar,:root:dir(rtl) .wp-coloring-main{text-align:right}@media print{body{background:#fff}.wp-coloring-shell{max-width:100%;padding:0}.wp-coloring-sidebar,.wp-coloring-mobile-sidebar,.topbar,.sidebar-title,.palette-list,.actions,.mobile-actions,.mobile-palette{display:none!important}.wp-coloring-main{border:none;box-shadow:none;padding:0}.wp-coloring-canvas-outer{border:none;border-radius:0;max-width:none;aspect-ratio:auto}.wp-coloring-canvas-outer>canvas,.wp-coloring-canvas-outer>img,.wp-coloring-canvas-outer>svg{inline-size:100%!important;block-size:auto!important;object-fit:contain}}@container sidebar (max-width:110px){.palette-list{grid-template-columns:1fr}}.action-btn,.action-btn *{font-variation-settings:normal}.action-btn:disabled{opacity:.5;cursor:not-allowed}.palette-btn:disabled{opacity:.5;cursor:not-allowed}.wp-coloring-sidebar .palette-list{margin:0}@media (max-width:380px){.mobile-palette .palette-btn{inline-size:28px;block-size:28px}.mobile-palette .palette-btn::before{inline-size:16px;block-size:16px}}.wp-coloring-picker{display:flex;flex-direction:column;gap:10px}.wp-coloring-picker .thumb-grid{display:grid;grid-auto-flow:column;grid-auto-columns:var(--thumb-size,96px);gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;margin:0;align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch}.wp-coloring-picker .thumb-grid::-webkit-scrollbar{display:none}.wp-coloring-picker .thumb{inline-size:var(--thumb-size,96px);block-size:var(--thumb-size,96px);display:inline-grid;place-items:center;border:1px solid #e6ebf2;background:#fff;border-radius:10px;box-shadow:0 1px 2px rgb(16 24 40 / .08);overflow:hidden;padding:0;cursor:pointer;transition:box-shadow .15s,transform .05s,border-color .15s}.wp-coloring-picker .thumb:hover{box-shadow:0 0 0 3px rgb(79 70 229 / .12)}.wp-coloring-picker .thumb.is-active{border-color:#4f46e5;box-shadow:0 0 0 3px rgb(79 70 229 / .18)}.wp-coloring-picker .thumb img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.wp-coloring-picker .wp-coloring-shell{margin-top:6px}@media (max-width:768px){.wp-coloring-picker .thumb-grid{grid-auto-columns:var(--thumb-size,76px);gap:6px;padding:4px}.wp-coloring-picker .thumb{inline-size:var(--thumb-size,76px);block-size:var(--thumb-size,76px);border-radius:8px}}