.vec-root{display:grid;grid-template-columns:210px 1fr 240px;grid-template-areas:"tools canvas inspector";grid-gap:12px;gap:12px;min-height:calc(100vh - 168px);max-width:100%}.vec-tools{grid-area:tools;padding:14px;border-radius:14px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 200px);overflow-y:auto}.vec-inspector h3,.vec-sheet-body h3,.vec-tools h3{margin:0 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600}.vec-tool-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:5px;gap:5px}.vec-tool{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:center;transition:background .12s ease,border-color .12s ease;font-size:11px;color:var(--text-secondary);min-height:56px;justify-content:center}.vec-tool:hover{background:rgba(139,92,246,.1);color:var(--text-primary)}.vec-tool:focus-visible{outline:2px solid var(--acc-ring);outline-offset:2px}.vec-tool.is-on{background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.55);color:#ddd6fe}.vec-tool-glyph{color:var(--accent-violet);display:inline-flex}.vec-tool.is-on .vec-tool-glyph{color:#ddd6fe}.vec-tool-label{font-weight:600}.vec-tool-kbd{position:absolute;top:4px;right:4px;padding:1px 4px;font-size:9px}.vec-divider{height:1px;background:rgba(255,255,255,.06);margin:4px 0 2px}.vec-canvas-wrap{grid-area:canvas;border-radius:12px;background:#fff;min-height:480px;position:relative;overflow:hidden;display:flex;flex-direction:column}.vec-canvas-head{position:absolute;top:6px;left:12px;right:10px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.vec-canvas-head>*{pointer-events:auto}.vec-name-input{background:rgba(17,18,27,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:var(--text-primary);font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px;outline:none;max-width:220px;width:min(220px,50%)}.vec-name-input:focus{border-color:rgba(139,92,246,.55)}.vec-view-controls{display:flex;gap:6px;margin-left:auto;pointer-events:auto}.vec-view-btn{background:rgba(17,18,27,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.86);font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer}.vec-view-btn:hover:not(:disabled){border-color:rgba(139,92,246,.55)}.vec-view-btn:disabled{opacity:.4;cursor:default}.vec-mobile-edit{all:unset;display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:rgba(17,18,27,.82);border:1px solid rgba(255,255,255,.14);color:var(--text-primary);cursor:pointer}.vec-canvas-scroll{flex:1 1;position:relative;overflow:auto;min-height:0}.vec-svg{display:block;width:100%;height:100%;min-width:100%;min-height:100%;background:linear-gradient(45deg,#f3f4f6 25%,transparent 0),linear-gradient(-45deg,#f3f4f6 25%,transparent 0),linear-gradient(45deg,transparent 75%,#f3f4f6 0),linear-gradient(-45deg,transparent 75%,#f3f4f6 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.vec-shape{cursor:pointer}.vec-shape.is-selected{outline:none}.vec-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;pointer-events:none;color:#6b7280;padding:24px}.vec-empty-title{font-size:15px;font-weight:600;color:#4b5563}.vec-empty-sub{font-size:12.5px;color:#9ca3af;max-width:280px}.vec-bbox{fill:none;stroke:var(--accent-violet);stroke-width:1;stroke-dasharray:4 3;pointer-events:none}.vec-handle{fill:#ffffff;stroke:var(--accent-violet);stroke-width:1.5}.vec-handle:hover{fill:#ede9fe}.vec-endpoint{fill:#ffffff;stroke:var(--accent-violet);stroke-width:1.5;cursor:-webkit-grab;cursor:grab}.vec-endpoint:hover{fill:#ede9fe}.vec-inspector{grid-area:inspector;padding:14px;border-radius:14px;gap:8px;max-height:calc(100vh - 200px);overflow-y:auto}.vec-inspector,.vec-row{display:flex;flex-direction:column}.vec-row{gap:4px;font-size:12px;color:var(--text-secondary)}.vec-row.inline{flex-direction:row;align-items:center;gap:8px}.vec-row>span{font-weight:600}.vec-row-pair{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.vec-row input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text-primary);padding:7px 10px;border-radius:6px;font-family:inherit;font-size:12.5px;outline:none;min-width:0;width:100%;box-sizing:border-box}.vec-row input:focus{border-color:rgba(139,92,246,.55)}.vec-row input[type=color]{padding:0;height:30px;width:44px;cursor:pointer;flex:0 0 auto}.vec-row.inline input[type=color]{margin-left:auto}.vec-muted{color:var(--text-muted);font-size:11.5px;line-height:1.45;margin:2px 0}.vec-btn-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px;gap:5px}.vec-btn-row{display:flex;gap:5px}.vec-mini{all:unset;box-sizing:border-box;flex:1 1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease;text-align:center}.vec-mini:hover:not([disabled]){background:rgba(139,92,246,.14);color:var(--text-primary);border-color:rgba(139,92,246,.35)}.vec-mini:focus-visible{outline:2px solid var(--acc-ring);outline-offset:2px}.vec-mini[disabled]{opacity:.4;cursor:not-allowed}.vec-mini-wide{width:100%}.vec-mini.is-on{background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.55);color:#ddd6fe}.vec-mini-danger:hover:not([disabled]){background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.4)}.vec-grid{pointer-events:none}.vec-foot{grid-area:auto;grid-column:1/-1;padding:0 6px;color:var(--text-muted);font-size:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.vec-anchor{fill:#ffffff;stroke:var(--accent-violet);stroke-width:1.5;cursor:-webkit-grab;cursor:grab}.vec-anchor:hover{fill:#ede9fe}.vec-ctrl{fill:var(--accent-violet);stroke:#ffffff;stroke-width:1;cursor:-webkit-grab;cursor:grab;opacity:.85}.vec-ctrl-leash{stroke:var(--accent-violet);stroke-width:1;stroke-dasharray:2 3;opacity:.55}.vec-band{fill:rgba(139,92,246,.1);stroke:rgba(139,92,246,.7);stroke-width:1;stroke-dasharray:4 3;pointer-events:none}.vec-align-bar{position:absolute;top:46px;left:50%;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:2px;padding:4px 6px;border-radius:10px;background:rgba(17,18,27,.88);border:1px solid rgba(139,92,246,.35);box-shadow:0 8px 20px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.vec-align-bar button{all:unset;padding:4px 9px;border-radius:6px;color:#ddd6fe;font-size:14px;cursor:pointer;transition:background .12s ease}.vec-align-bar button:hover{background:rgba(139,92,246,.22)}.vec-align-bar button:disabled{opacity:.35;cursor:not-allowed}.vec-align-sep{width:1px;height:16px;background:rgba(255,255,255,.18);margin:0 4px}.vec-anchor-menu{z-index:30;background:rgba(17,18,27,.95);border:1px solid rgba(139,92,246,.45);border-radius:8px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.45);min-width:130px;display:flex;flex-direction:column}.vec-anchor-menu button{all:unset;padding:8px 10px;font-size:12.5px;color:var(--text-primary);cursor:pointer;border-radius:4px}.vec-anchor-menu button:hover{background:rgba(139,92,246,.25)}.vec-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;font-size:13px;background:rgba(20,20,32,.92);color:white;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:60;pointer-events:none}.vec-sheet-scrim{display:none}@media (max-width:760px){.vec-root{grid-template-columns:1fr;grid-template-areas:"tools" "canvas" "foot";gap:10px;min-height:auto}.vec-inspector{display:none}.vec-tools{grid-area:tools;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:8px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.vec-tools::-webkit-scrollbar{display:none}.vec-tools>.vec-divider,.vec-tools>h3{display:none}.vec-tool-grid{display:flex;gap:6px;flex:0 0 auto}.vec-tool{min-width:60px;min-height:56px;flex:0 0 auto}.vec-tool-kbd{display:none}.vec-tools .vec-btn-row{flex:0 0 auto;gap:6px}.vec-tools .vec-mini{min-height:56px;min-width:56px;flex:0 0 auto}.vec-tools .vec-row{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:0 8px;min-height:56px;white-space:nowrap}.vec-tools .vec-row>span{font-size:11px}.vec-tools .vec-row input[type=number]{width:60px}.vec-canvas-wrap{grid-area:canvas;min-height:58vh}.vec-mobile-edit{display:inline-flex}.vec-name-input{width:min(180px,48%);font-size:16px}.vec-align-bar{top:50px}.vec-foot{grid-area:foot;font-size:11px}.vec-foot-tip{display:none}.vec-sheet-scrim{display:block;position:fixed;inset:0;background:rgba(8,9,16,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:vec-fade .16s var(--ease)}.vec-sheet{position:fixed;left:0;right:0;bottom:0;max-height:80vh;border-radius:18px 18px 0 0;padding:8px 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:vec-slide-up .22s var(--ease)}.vec-sheet-grip{width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.25);margin:4px auto 8px;flex:0 0 auto}.vec-sheet-close{all:unset;position:absolute;top:10px;right:14px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-secondary);cursor:pointer}.vec-sheet-close:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}.vec-sheet-body{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.vec-sheet-body .vec-mini{min-height:40px}.vec-sheet-body .vec-row input{font-size:16px}}@media (max-width:560px){.vec-name-input{width:min(150px,44%)}.vec-endpoint,.vec-handle{stroke-width:2}}@keyframes vec-fade{0%{opacity:0}to{opacity:1}}@keyframes vec-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.vec-sheet,.vec-sheet-scrim{animation:none}}