:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-canvas: #f8fafc;--bg-toolbar: linear-gradient( 135deg, rgba(255, 255, 255, .95) 0%, rgba(248, 250, 252, .95) 100% );--border-toolbar: rgba(0, 0, 0, .08);--shadow-toolbar: 0 10px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);--text-primary: #1e293b;--text-secondary: #64748b;--icon-color: #64748b;--divider: linear-gradient( 180deg, transparent 0%, #e2e8f0 50%, transparent 100% );--btn-hover: rgba(0, 0, 0, .05);--btn-active-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);--btn-active-color: #4f46e5;--btn-active-border: rgba(79, 70, 229, .2);--shape-stroke: #334155;--shape-fill: #ffffff;--connector-color: #6366f1}[data-theme=dark]{--bg-canvas: #0f0f0f;--bg-toolbar: linear-gradient( 135deg, rgba(30, 30, 30, .95) 0%, rgba(38, 38, 38, .95) 100% );--border-toolbar: rgba(255, 255, 255, .1);--shadow-toolbar: 0 10px 40px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--icon-color: #94a3b8;--divider: linear-gradient( 180deg, transparent 0%, #374151 50%, transparent 100% );--btn-hover: rgba(255, 255, 255, .08);--btn-active-bg: linear-gradient( 135deg, rgba(99, 102, 241, .2) 0%, rgba(79, 70, 229, .15) 100% );--btn-active-color: #a5b4fc;--btn-active-border: rgba(165, 180, 252, .3);--shape-stroke: #e2e8f0;--shape-fill: #1e1e1e;--connector-color: #818cf8}body,html{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;background-color:var(--bg-canvas);color:var(--text-primary)}#app{width:100%;height:100%;position:relative;display:block}canvas{width:100%;height:100%;display:block;touch-action:none;background:var(--bg-canvas)!important;--selection-color: #6366f1}.toolbar{position:absolute;bottom:40px;left:calc(50% - 32px);transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:10px 18px;background:var(--bg-toolbar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:50px;box-shadow:var(--shadow-toolbar);pointer-events:auto;border:1px solid var(--border-toolbar)}.toolbar-start,.toolbar-end{display:flex;align-items:center;width:44px;justify-content:center}.logo{height:24px;width:auto;padding:4px;border-radius:6px;transition:all .15s ease}.logo:hover{background:var(--btn-hover)}.logo:active{transform:scale(.92)}.icon-btn,.tool-btn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:8px;font-size:1rem;transition:all .15s ease;display:flex;align-items:center;justify-content:center;color:var(--icon-color)}.icon-btn:hover,.tool-btn:hover{background:var(--btn-hover)}.icon-btn:active,.tool-btn:active{transform:scale(.92)}.tool-btn{padding:8px 14px;gap:6px;font-weight:500}.tool-btn span{font-size:.85rem}.tool-btn.active{background:var(--btn-active-bg);color:var(--btn-active-color);box-shadow:inset 0 0 0 1px var(--btn-active-border)}.delete-btn{opacity:.35;pointer-events:none}.delete-btn.has-selection{opacity:1;pointer-events:auto;color:#ef4444}.delete-btn.has-selection:hover{background:#ef444426}.clear-btn:hover{color:#f97316;background:#f973161f}.export-btn:hover{color:#10b981;background:#10b9811f}.theme-btn:hover{color:#eab308;background:#eab3081f}.divider{width:1px;height:28px;background:var(--divider);margin:0 6px}.app-title{position:absolute;top:20px;left:20px;pointer-events:auto;background:var(--bg-toolbar);padding:8px 16px;border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-toolbar);box-shadow:0 4px 16px #00000014}.app-title h1{font-size:1.1rem;margin:0;font-weight:600;color:var(--text-primary)}.menu-btn.active{background:var(--btn-active-bg);color:var(--btn-active-color)}.menu-backdrop{position:fixed;inset:0;background:#0000004d;z-index:99;pointer-events:auto}.menu-popup{position:absolute;bottom:100px;left:50%;transform:translate(-50%);background:var(--bg-toolbar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px;box-shadow:var(--shadow-toolbar);border:1px solid var(--border-toolbar);padding:8px;min-width:180px;z-index:100;pointer-events:auto;animation:menuSlideUp .2s ease}@keyframes menuSlideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:transparent;border:none;border-radius:10px;cursor:pointer;color:var(--text-primary);font-size:.95rem;font-weight:500;text-align:left;transition:background .15s ease}.menu-item:hover{background:var(--btn-hover)}.menu-item:active{transform:scale(.98)}.menu-item svg{color:var(--icon-color);flex-shrink:0}.menu-divider{height:1px;background:var(--divider);margin:4px 8px}.menu-section{padding:8px 16px;display:flex;flex-direction:column;gap:8px}.menu-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.stroke-selector{display:flex;gap:8px}.stroke-option{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:var(--btn-hover);border-radius:8px;cursor:pointer;color:var(--icon-color);transition:all .15s ease}.stroke-option:hover{background:var(--btn-active-bg)}.stroke-option.active{background:var(--btn-active-bg);color:var(--btn-active-color);box-shadow:inset 0 0 0 2px var(--btn-active-border)}.long-press-indicator{position:absolute;width:40px;height:40px;border-radius:50%;border:3px solid var(--btn-active-color);pointer-events:none;animation:longPressRing .5s ease forwards;opacity:0}@keyframes longPressRing{0%{transform:scale(.5);opacity:0}50%{opacity:.8}to{transform:scale(1.5);opacity:0}}.splash-backdrop{position:fixed;inset:0;background:#00000080;z-index:200;pointer-events:auto}.splash-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-toolbar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px;box-shadow:var(--shadow-toolbar);border:1px solid var(--border-toolbar);padding:28px 24px 20px;max-width:400px;width:92%;max-height:90vh;overflow-y:auto;z-index:201;pointer-events:auto;animation:splashFadeIn .25s ease}@keyframes splashFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}.splash-close{position:absolute;top:12px;right:14px;background:transparent;border:none;font-size:1.2rem;color:var(--text-secondary);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s ease}.splash-close:hover{background:var(--btn-hover)}.splash-logo{height:128px;display:block;margin:0 auto 16px}.splash-table{width:100%;border-collapse:collapse}.splash-table td{padding:8px 10px;font-size:.9rem;vertical-align:middle}.splash-table td:first-child{color:var(--text-primary);font-weight:600;white-space:nowrap;width:30%}.splash-table td:last-child{color:var(--text-secondary)}.splash-footer{margin:18px 0 0;font-size:.75rem;color:var(--text-secondary);text-align:center}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:3em}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.preact:hover{filter:drop-shadow(0 0 2em #673ab8aa)}.card{padding:2em}.read-the-docs{color:#888}