:root{--bg: #f8f9fb;--canvas: #ffffff;--surface: rgba(255, 255, 255, .85);--surface-solid: #ffffff;--border: rgba(15, 23, 42, .08);--border-strong: rgba(15, 23, 42, .15);--text: #0f172a;--text-muted: #64748b;--text-subtle: #94a3b8;--accent: #007aff;--accent-soft: rgba(0, 122, 255, .12);--collapse: #5856d6;--note: #ffcc00;--danger: #ff3b30;--shadow-shape: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);--shadow-chip: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);--shadow-floating: 0 4px 12px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .1);--shadow-sheet: 0 -8px 32px rgba(15, 23, 42, .12), 0 -1px 4px rgba(15, 23, 42, .06);--pal-none: #ffffff;--pal-peach: #ffe3d0;--pal-pink: #ffe5ec;--pal-blue: #e0f0ff;--pal-green: #d9f5e0;--pal-yellow: #fff4d6;--pal-purple: #ecdfff;--pal-peach-stroke: #e5a57a;--pal-pink-stroke: #ff8fa3;--pal-blue-stroke: #7fb8e5;--pal-green-stroke: #7cc196;--pal-yellow-stroke: #e0b85c;--pal-purple-stroke: #b89ce0;--shape-radius: 14px;--chip-size: 44px;--float-preview-size: 56px;--collapse-badge: 22px;--note-badge: 14px;--note-hit: 32px;--canvas-size: 4000px;--dot-spacing: 24px;--dot-size: 1.5px;--tap-threshold: 8px;--drag-threshold: 10px;--double-tap-ms: 350;--spring-snap: cubic-bezier(.32, .72, 0, 1);--spring-bounce: cubic-bezier(.34, 1.56, .64, 1);--z-canvas: 1;--z-shapes: 2;--z-edges: 3;--z-handles: 4;--z-marker: 5;--z-toolbar: 10;--z-panel: 11;--z-sheet: 20;--z-floating: 30;--z-toast: 40;font-family:Inter,SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-feature-settings:"cv11","ss03","ss05";color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}input,textarea,select{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100dvh;width:100vw;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);position:relative;overflow:hidden}.app__statusbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 8px;font-size:13px;background:var(--surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);z-index:var(--z-panel)}.app__title{font-weight:600;letter-spacing:-.01em}.app__meta{color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}.app__main{flex:1;position:relative;overflow:hidden}.canvas-host{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);overflow:hidden;touch-action:none;cursor:grab}.canvas-host:active{cursor:grabbing}.canvas-host__inner{position:absolute;top:0;left:0;width:var(--canvas-size);height:var(--canvas-size);background:var(--canvas);transform-origin:0 0;will-change:transform}.canvas-host__dots{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(circle at 0 0,rgba(15,23,42,.15) var(--dot-size),transparent var(--dot-size));background-size:var(--dot-spacing) var(--dot-spacing);background-position:0 0}.shapes-layer,.edges-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.shapes-layer{z-index:var(--z-shapes)}.edges-layer{z-index:var(--z-edges)}.shape{position:absolute;pointer-events:auto;transform-origin:center;transition:filter .12s var(--spring-snap)}.shape:hover{filter:brightness(.98)}.shape__svg{display:block;overflow:visible;filter:drop-shadow(0 1px 2px rgba(15,23,42,.06)) drop-shadow(0 1px 3px rgba(15,23,42,.04))}.shape__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:8px 14px;font-size:14px;font-weight:500;line-height:1.25;color:var(--text);pointer-events:none;word-break:break-word;text-align:center;letter-spacing:-.005em}.shape__label--h1{font-size:18px;font-weight:700;letter-spacing:-.02em}.shape__label--h2{font-size:16px;font-weight:600;letter-spacing:-.015em}.shape__label--h3{font-size:14px;font-weight:600;letter-spacing:-.01em}.shape__step-pill{position:absolute;top:-10px;left:10px;background:var(--text);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;box-shadow:var(--shadow-chip)}.collapse-badge{position:absolute;right:4px;bottom:4px;width:var(--collapse-badge);height:var(--collapse-badge);border-radius:50%;background:var(--collapse);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--canvas);box-shadow:var(--shadow-chip);pointer-events:auto;touch-action:manipulation}.note-badge{position:absolute;top:-6px;right:-6px;width:var(--note-hit);height:var(--note-hit);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}.note-badge:after{content:"";width:var(--note-badge);height:var(--note-badge);background:var(--note);border:1.5px solid var(--canvas);border-radius:50%;box-shadow:0 1px 2px #0f172a2e}.shape--selected .shape__svg{filter:drop-shadow(0 0 8px rgba(0,122,255,.25)) drop-shadow(0 1px 3px rgba(15,23,42,.06))}.conn-handle{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--canvas);box-shadow:var(--shadow-chip);pointer-events:auto;cursor:crosshair;transition:transform .12s var(--spring-snap)}.conn-handle:hover{transform:scale(1.15)}.toolbar{display:flex;gap:8px;padding:10px 16px;background:var(--surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);z-index:var(--z-toolbar);overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;width:var(--chip-size);height:var(--chip-size);border-radius:22px;background:#fff9;border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text);transition:background .12s var(--spring-snap),transform 80ms var(--spring-snap),border-color .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.chip:active{transform:scale(.94)}.chip:disabled{opacity:.3}.chip--active{background:var(--accent);color:#fff;border-color:var(--accent)}.chip--readonly{background:#fff6;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.float-preview{position:fixed;width:var(--float-preview-size);height:var(--float-preview-size);border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;box-shadow:var(--shadow-floating);pointer-events:none;z-index:var(--z-floating);transform:translate(-50%,-50%);will-change:transform,left,top}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a2e;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:var(--z-sheet)}.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface-solid);border-radius:16px 16px 0 0;box-shadow:var(--shadow-sheet);padding-top:8px;padding-bottom:env(safe-area-inset-bottom,16px);z-index:var(--z-sheet);max-height:85dvh;overflow-y:auto}.sheet__grabber{width:36px;height:5px;background:var(--border-strong);border-radius:100px;margin:0 auto 12px}.sheet__header{display:flex;justify-content:space-between;align-items:center;padding:0 16px 12px;border-bottom:1px solid var(--border)}.sheet__title{font-size:17px;font-weight:600;letter-spacing:-.015em}.sheet__btn{font-size:16px;color:var(--accent);font-weight:500;padding:6px 0}.sheet__btn--bold{font-weight:600}.sheet__btn--danger{color:var(--danger)}.sheet__body{padding:16px;display:flex;flex-direction:column;gap:16px}.sheet__card{background:#0f172a05;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.sheet__row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.sheet__field{display:flex;flex-direction:column;gap:6px}.sheet__field-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.sheet__input,.sheet__textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--canvas);font-size:15px;transition:border-color .12s,box-shadow .12s;resize:vertical}.sheet__input:focus,.sheet__textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.seg{display:flex;background:#0f172a0f;border-radius:8px;padding:2px;gap:2px}.seg__item{flex:1;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-muted);transition:background .12s,color .12s,box-shadow .12s;text-align:center}.seg__item--active{background:var(--canvas);color:var(--text);box-shadow:0 1px 2px #0f172a0f}.palette{display:flex;gap:10px;flex-wrap:wrap}.swatch{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);cursor:pointer;transition:transform .12s var(--spring-bounce),box-shadow .12s}.swatch--active{box-shadow:0 0 0 2.5px var(--accent),0 1px 2px #0f172a0f;transform:scale(1.05)}.swatch--none{display:flex;align-items:center;justify-content:center;color:var(--text-subtle);font-size:18px}.h-scroll{overflow-x:auto;scrollbar-width:none}.h-scroll::-webkit-scrollbar{display:none}.shape-picker{background:var(--surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);padding:8px 12px 12px;z-index:var(--z-panel);max-height:45dvh;overflow-y:auto;animation:slideDown .2s cubic-bezier(.32,.72,0,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.shape-picker__tabs{display:flex;gap:6px;align-items:center;margin-bottom:10px}.shape-picker__tab{padding:6px 14px;border-radius:100px;border:1px solid var(--border);background:var(--surface-solid);font-size:13px;font-weight:500;color:var(--text-muted);transition:all .12s var(--spring-snap)}.shape-picker__tab--active{background:var(--accent);color:#fff;border-color:var(--accent)}.shape-picker__close{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--surface-solid);border:1px solid var(--border);font-size:14px;color:var(--text-muted)}.shape-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.step-chip{padding:10px 12px;border-radius:12px;background:var(--surface-solid);border:1px solid var(--border);display:flex;flex-direction:column;gap:2px;text-align:left;font-size:13px;color:var(--text);transition:transform .12s var(--spring-snap),border-color .12s;touch-action:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.step-chip:active{transform:scale(.97);border-color:var(--accent)}.step-chip__label{font-weight:600;letter-spacing:-.005em}.step-chip__sub{font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums}.core-chip{padding:10px;border-radius:12px;background:var(--surface-solid);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text);transition:transform .12s var(--spring-snap),border-color .12s;touch-action:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;min-height:64px;font-size:11px}.core-chip:active{transform:scale(.94);border-color:var(--accent)}.core-chip__label{font-size:11px;color:var(--text-muted);font-weight:500}.mermaid-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.mermaid-preview__svg svg{max-width:100%;height:auto}.mermaid-preview__loading{color:var(--text-muted);font-size:13px;padding:40px}.mermaid-preview__error{background:#dc262614;border:1px solid rgba(220,38,38,.2);color:var(--danger);padding:12px;border-radius:8px;font-size:12px;width:100%}.mermaid-preview__error pre{font-family:ui-monospace,monospace;font-size:10px;margin-top:6px;white-space:pre-wrap;word-break:break-word}