:root{--bg:#f3f0ea;--surface:#fff;--surface-hover:#f8f6f2;--text:#2a2826;--text-muted:#9e9992;--border:#e4e0d8;--accent:#3d3a36;--accent-hover:#252320;--accent-contrast:#fff;--radius:6px;--radius-sm:4px;--toolbar-height:60px;--shadow-sm:0 1px 2px #2a28260a;--shadow-md:0 2px 8px #2a28260f;--shadow-lg:0 4px 24px #2a28260f}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:DM Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.toolbar{min-height:var(--toolbar-height);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:center;gap:0;padding:0 16px;display:flex}.toolbar-group{min-height:var(--toolbar-height);align-items:center;gap:8px;padding:8px 14px;display:flex}.toolbar-group+.toolbar-group{border-left:1px solid var(--border)}.control-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);-webkit-user-select:none;user-select:none;font-size:11px;font-weight:600}.control-value{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;min-width:2ch;font-size:13px;font-weight:500}input[type=range]{-webkit-appearance:none;appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;width:120px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);border:2px solid var(--surface);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .15s,box-shadow .15s;box-shadow:0 1px 3px #2a282626}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);box-shadow:0 2px 6px #2a282633}input[type=range]::-webkit-slider-thumb:active{transform:scale(.95)}input[type=range]::-moz-range-track{background:var(--border);border:none;border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--surface);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #2a282626}.btn{height:34px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;justify-content:center;align-items:center;padding:0 14px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--text-muted);box-shadow:var(--shadow-sm)}.btn:active:not(:disabled){background:var(--border);box-shadow:none;transform:scale(.97)}.btn:disabled{color:var(--text-muted);border-color:var(--border);cursor:not-allowed;opacity:.4}.btn-primary{color:var(--accent-contrast);background:var(--accent);border-color:var(--accent);font-weight:600;box-shadow:0 1px 2px #2a28261a}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 2px 8px #2a282626}.btn-primary:active:not(:disabled){transform:translateY(0)scale(.97);box-shadow:0 1px 2px #2a28261a}.restore-banner{background:#fff9e6;border-bottom:1px solid #e6d9b8;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:10px 16px;font-size:13px;display:flex}.restore-banner[hidden]{display:none}.restore-banner-text{color:#5a4a1a}.restore-banner-actions{gap:6px;display:flex}.restore-banner .btn{height:30px;padding:0 12px;font-size:12px}.btn-primary:disabled{color:var(--accent-contrast);background:var(--text-muted);border-color:var(--text-muted);opacity:.35;box-shadow:none}.canvas-area{flex:1;justify-content:center;align-items:center;padding:32px;display:flex;overflow:hidden}.zoom-container{touch-action:none;cursor:none;flex:1;justify-content:center;align-self:stretch;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-wrapper{aspect-ratio:4/3;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);width:100%;max-width:960px;box-shadow:var(--shadow-lg);touch-action:none;cursor:none;transform-origin:0 0;position:relative;overflow:hidden}.canvas-layer{width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#canvas-working{z-index:2;transition:opacity 60ms}#canvas-original{z-index:1}.empty-state{color:var(--text-muted);z-index:3;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:16px;margin:0;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.empty-state-icon{width:48px;height:48px;color:var(--border)}.empty-state-text{text-align:center;max-width:200px;font-size:14px;line-height:1.5}.empty-state[hidden]{display:none}.kbd-guide{gap:16px;margin-left:auto}.toolbar-group.kbd-guide{border-left:none;padding-right:0}.kbd-hint{align-items:center;gap:4px;display:inline-flex}kbd{min-width:24px;height:22px;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:0 6px;font-family:inherit;font-size:11px;font-weight:500;line-height:1;display:inline-flex}.zoom-level{text-align:center;min-width:4ch}.zoom-container.space-held{cursor:grab}.zoom-container.space-held.is-panning{cursor:grabbing}.zoom-container.space-held .canvas-wrapper,.zoom-container.space-held .canvas-layer{pointer-events:none}.zoom-container.space-held .brush-cursor{opacity:0}.brush-cursor{border:1.5px solid var(--text);pointer-events:none;opacity:0;z-index:999;will-change:left, top, width, height;border-radius:50%;width:40px;height:40px;transition:opacity .15s,width .1s ease-out,height .1s ease-out;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.brush-cursor:before,.brush-cursor:after{content:"";background:var(--text);opacity:.5;position:absolute}.brush-cursor:before{width:8px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}.brush-cursor:after{width:1px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:640px){.toolbar{z-index:100;-webkit-overflow-scrolling:touch;border-bottom:none;border-top:1px solid var(--border);scrollbar-width:none;border-radius:12px 12px 0 0;flex-wrap:nowrap;gap:4px;min-height:auto;padding:8px 12px;position:fixed;top:auto;bottom:0;left:0;right:0;overflow:auto hidden;box-shadow:0 -2px 12px #2a282614}.toolbar::-webkit-scrollbar{display:none}.toolbar-group{flex-shrink:0;min-height:44px;padding:4px 10px}.toolbar-group.kbd-guide{display:none}.canvas-area{padding:16px 16px 76px}input[type=range]{width:80px}.btn{height:36px;padding:0 10px;font-size:12px}}