:root{color-scheme:dark;--canvas: #16181d;--panel: #1b1e24;--raised: #24272e;--border: #2b2f36;--ink: #e9ecef;--muted: #7d8590;--accent: #4dabf7;--accent-bg: #1c3a5e;--danger: #ff6b6b;--radius: 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.layout{display:flex;height:100%}.sidebar{width:240px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:16px;margin:0}.canvas-list{flex:1;overflow-y:auto;padding:8px}.canvas-item{display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:var(--radius);text-align:left;gap:6px}.canvas-item:hover{background:var(--raised)}.canvas-item.active{background:var(--accent-bg);color:var(--accent)}.canvas-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-item .delete{color:var(--muted);visibility:hidden;padding:0 2px}.canvas-item:hover .delete{visibility:visible}.canvas-item .delete:hover{color:var(--danger)}.empty-list{padding:24px 16px;color:var(--muted);font-size:14px;text-align:center}.main{flex:1;position:relative;display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--panel)}.toolbar .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar .spacer{flex:1}.tool-group{display:flex;align-items:center;gap:6px}.swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0}.swatch.active{border-color:var(--accent)}.size-dot{border-radius:50%;background:var(--ink);flex-shrink:0}.size-label{min-width:36px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.modal-backdrop{position:fixed;inset:0;z-index:20;background:#0009;display:grid;place-items:center;padding:16px}.modal{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 16px 48px #00000080;outline:none}.modal-title{margin:0 0 10px;font-size:15px}.modal-text{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.text-input{width:100%;padding:8px 10px;color:var(--ink);background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);font:inherit;outline:none}.text-input:focus{border-color:var(--accent)}.btn-danger{background:var(--danger);color:#16181d;font-weight:600;padding:6px 12px;border-radius:var(--radius)}.btn-danger:hover{background:#ff8787}.wheel-wrap{position:relative;margin:0 auto 12px}.wheel-wrap canvas{display:block;touch-action:none;cursor:crosshair}.wheel-wrap .marker{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #0009;pointer-events:none}.picker-row{display:flex;align-items:center;gap:10px;margin-top:10px}.picker-value{width:28px;height:28px;flex-shrink:0;border-radius:var(--radius);border:1px solid var(--border)}.picker-label{font-size:13px;color:var(--muted);min-width:64px}.picker-slider{flex:1;width:auto}input[type=range].thickness{appearance:none;-webkit-appearance:none;width:110px;height:4px;border-radius:2px;background:var(--raised);outline:none;cursor:pointer}input[type=range].thickness::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);border:none}input[type=range].thickness::-webkit-slider-thumb:hover{background:var(--accent)}input[type=range].thickness::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:none}input[type=range].thickness::-moz-range-track{height:4px;border-radius:2px;background:var(--raised)}.tool-btn{padding:6px 10px;border-radius:var(--radius)}.tool-btn:hover{background:var(--raised)}.tool-btn:disabled{color:var(--muted);cursor:default;background:none}.tool-btn.active{background:var(--accent-bg);color:var(--accent)}.zoom-label{min-width:56px;font-variant-numeric:tabular-nums}.menu-wrap{position:relative}.menu-backdrop{position:fixed;inset:0;z-index:5}.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:6;min-width:180px;padding:4px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}.menu-item{padding:8px 10px;border-radius:6px;text-align:left;white-space:nowrap}.menu-item:hover{background:var(--accent-bg);color:var(--accent)}.save-status{font-size:13px;color:var(--muted);min-width:70px;text-align:right}.board-wrap{flex:1;position:relative;background:var(--canvas)}.board-wrap canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}.board-wrap canvas.hand{cursor:grab}.board-wrap canvas.hand.panning{cursor:grabbing}.welcome{flex:1;display:grid;place-items:center;color:var(--muted)}.btn-primary{background:var(--accent);color:#0d1117;font-weight:600;padding:6px 12px;border-radius:var(--radius)}.btn-primary:hover{background:#74c0fc}