:root{--bg: #fbfaf7;--surface: #ffffff;--ink: #2b2b2b;--muted: #7a7a85;--divider: #ececec;--erase-bg: #f3f0ea;--c-red: #ff6b6b;--c-orange: #ff9f40;--c-yellow: #ffd93d;--c-green: #6bcb77;--c-blue: #4d96ff;--c-purple: #9b5de5;--c-black: #2b2b2b;--radius-sm: 13px;--radius-md: 22px;--radius-lg: 30px;--shadow-1: 0 4px 14px rgba(30, 30, 50, .12);--shadow-2: 0 8px 26px rgba(30, 30, 50, .16);--gap: 12px;--tap: 48px;--font: -apple-system, "SF Pro Rounded", system-ui, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}button:focus{outline:none}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font);background:var(--bg);color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#app,#canvas-host{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none}.dock{position:fixed;left:50%;transform:translate(-50%);bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:-webkit-max-content;width:max-content;max-width:calc(100vw - 16px);padding:10px 12px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-2);z-index:10}.dock>*{margin:4px 7px}.dock .divider{width:1px;height:34px;background:var(--divider)}.swatches,.sizes{display:flex;align-items:center}.swatches>*,.sizes>*{margin:0 5px}.swatch{width:34px;height:34px;border:0;border-radius:50%;padding:0;box-shadow:0 2px 5px #0000002e}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ink),0 2px 5px #0000002e}.size-btn{width:36px;height:36px;border:0;background:transparent;display:grid;place-items:center}.size-dot{background:var(--ink);border-radius:50%}.size-btn[aria-pressed=true] .size-dot{box-shadow:0 0 0 3px var(--c-blue)}.tool-indicator{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--erase-bg)}.tool-indicator.is-erasing{box-shadow:0 0 0 3px var(--c-blue)}.tool-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;width:38px;height:38px;padding:0;border:0;border-radius:var(--radius-sm);background:var(--erase-bg);font-size:19px}.tool-btn[aria-pressed=true]{box-shadow:0 0 0 3px var(--c-blue)}.fab{position:fixed;top:calc(16px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;line-height:1;padding:0;width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);font-size:24px;z-index:10}.fab.left{left:calc(16px + env(safe-area-inset-left))}.fab.left-2{left:calc(76px + env(safe-area-inset-left))}.fab.right-1{right:calc(16px + env(safe-area-inset-right))}.fab.right-2{right:calc(76px + env(safe-area-inset-right))}.fab:disabled{opacity:.35}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14141e73;display:flex;align-items:center;justify-content:center;z-index:20;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.sheet{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);max-width:90vw;max-height:80vh;overflow:auto;padding:18px}.sheet.confirm{padding:28px 26px}.confirm-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;border:0;border-radius:18px;padding:14px 22px;min-width:120px;font-size:17px;font-family:var(--font);box-shadow:var(--shadow-1)}.confirm-btn.cancel{background:var(--erase-bg);color:var(--ink)}.confirm-btn.danger{background:var(--c-red);color:#fff}.update-badge{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:none;align-items:center;gap:6px;padding:7px 14px;font-size:13px;color:var(--muted);background:var(--surface);border:0;border-radius:18px;box-shadow:var(--shadow-1);z-index:30;background-image:linear-gradient(var(--c-green),var(--c-green));background-repeat:no-repeat;background-size:0% 100%}.update-badge.show{display:inline-flex}.toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:16px;font-size:14px;z-index:40;opacity:0;transition:opacity .25s}.toast.show{opacity:1}@media (max-width: 480px){.dock{padding:8px 10px}.dock>*{margin:3px 5px}.dock .divider{display:none}.swatch{width:30px;height:30px}.size-btn{width:32px;height:32px}.tool-btn{width:34px;height:34px}.swatches>*,.sizes>*{margin:0 4px}}@media (max-width: 360px){.swatch{width:27px;height:27px}.size-btn{width:30px;height:30px}.tool-btn{width:32px;height:32px;font-size:17px}.dock>*{margin:3px 4px}.swatches>*,.sizes>*{margin:0 3px}}.swatch,.size-btn,.tool-btn,.fab,.confirm-btn{transition:transform .12s cubic-bezier(.34,1.56,.64,1)}.swatch:active,.size-btn:active,.tool-btn:active,.fab:not(:disabled):active,.confirm-btn:active{transform:scale(.9)}@keyframes swatch-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}.swatch[aria-pressed=true]{animation:swatch-pop .28s ease}.swatch,.size-btn,.tool-btn{position:relative}.swatch:after,.size-btn:after,.tool-btn:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}@media (prefers-reduced-motion: reduce){.swatch,.size-btn,.tool-btn,.fab,.confirm-btn{transition:none}.swatch[aria-pressed=true]{animation:none}}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes sheet-in{0%{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.overlay{animation:overlay-in .18s ease}.sheet{animation:sheet-in .22s cubic-bezier(.34,1.56,.64,1)}.dock .tool-indicator+.divider{height:34px}.fab{transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease}.fab:not(:disabled):active{box-shadow:var(--shadow-1)}@media (prefers-reduced-motion: reduce){.overlay,.sheet{animation:none}}