@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg-app: #09090f;--bg-surface: #12121a;--bg-elevated: #1a1a26;--bg-canvas: #06060a;--border: #2a2a3a;--border-subtle: #1f1f2c;--text: #ececf4;--text-muted: #8b8ba3;--accent: #7c3aed;--accent-hover: #8b5cf6;--accent-soft: rgba(124, 58, 237, .14);--stroke-anchor: #facc15;--stroke-path: #ef4444;--ok: #34d399;--warn: #fbbf24;--err: #f87171;--radius: 8px;--radius-lg: 12px;--shadow: 0 1px 2px rgba(0, 0, 0, .35);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg-app);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app-shell{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand h1{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.02em}.brand-tagline{margin:2px 0 0;font-size:.72rem;color:var(--text-muted)}.logo{font-size:1.35rem;color:var(--accent-hover);line-height:1}.project-chip{margin-left:8px;padding:4px 10px;font-size:.72rem;font-weight:500;color:var(--text);background:var(--accent-soft);border:1px solid rgba(124,58,237,.35);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.topbar-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.workspace{flex:1;display:grid;grid-template-columns:minmax(260px,300px) 1fr minmax(280px,340px);min-height:0}.panel{background:var(--bg-surface);border-right:1px solid var(--border-subtle);padding:0;overflow-y:auto;display:flex;flex-direction:column}.stroke-panel{border-right:none;border-left:1px solid var(--border-subtle)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px 12px;border-bottom:1px solid var(--border-subtle)}.panel-header h2{margin:0;font-size:.88rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}.panel-body{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1}.section-label{margin:0 0 6px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.canvas-area{position:relative;background:var(--bg-canvas);min-height:400px}.canvas-wrap{width:100%;height:100%;position:relative;outline:none}.canvas-wrap:focus-within{box-shadow:inset 0 0 0 1px #7c3aed73}.canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;text-align:center;padding:24px}.canvas-empty p{margin:0}.stage-hidden{opacity:0;pointer-events:none}.canvas-hint{position:absolute;bottom:14px;left:50%;transform:translate(-50%);background:#09090fd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 14px;border-radius:999px;font-size:.7rem;color:var(--text-muted);border:1px solid var(--border-subtle)}.stroke-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--text-muted)}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}.legend-dot.anchor{background:var(--stroke-anchor)}.legend-dot.path{background:var(--stroke-path)}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:.8rem;font-weight:500;color:var(--text-muted)}.field select,.field input[type=text]{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);padding:9px 10px;border-radius:var(--radius);font-size:.85rem}.field select:focus,.field input:focus{outline:none;border-color:var(--accent)}.params{display:flex;flex-direction:column;gap:10px}.param-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);font-size:.82rem}.param-row>span{font-weight:500;color:var(--text-muted);font-size:.75rem}.param-row em,.param-row code{font-size:.75rem;color:var(--text-muted)}.param-row input[type=range]{width:100%;accent-color:var(--accent)}.effect-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5;white-space:pre-wrap;margin:0;padding:10px 12px;background:var(--bg-elevated);border-radius:var(--radius);border:1px solid var(--border-subtle);max-height:160px;overflow-y:auto}.btn{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);padding:8px 14px;border-radius:var(--radius);cursor:pointer;font-size:.82rem;font-weight:500;transition:border-color .15s,background .15s}.btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg-surface)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn.danger{border-color:#f8717166;color:#fecaca}.btn.danger:hover:not(:disabled){border-color:var(--err);background:#f8717114}.btn.ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn.ghost:hover:not(:disabled){color:var(--text);background:var(--bg-elevated);border-color:var(--border-subtle)}.btn.small{padding:5px 10px;font-size:.72rem}.btn.block{width:100%}.create-stroke-block{padding:14px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:10px}.create-stroke-block h3{margin:0;font-size:.85rem;font-weight:600}.stroke-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.stroke-item{padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}.stroke-item:hover{border-color:var(--border);background:var(--bg-elevated)}.stroke-item.active{border-color:var(--accent);background:var(--accent-soft)}.stroke-item strong{font-size:.85rem;font-weight:500}.stroke-detail{border-top:1px solid var(--border-subtle);padding-top:14px;display:flex;flex-direction:column;gap:12px}.stroke-actions{display:flex;flex-wrap:wrap;gap:6px}.previews{display:grid;grid-template-columns:1fr 1fr;gap:10px}.previews figure{margin:0}.previews figcaption{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px}.previews img{width:100%;border-radius:var(--radius);border:1px solid var(--border-subtle);display:block}.preview-placeholder{aspect-ratio:1;background:var(--bg-elevated);border:1px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--text-muted);text-align:center;padding:8px}.stroke-error-box{margin-top:auto;padding:12px 14px;background:#f8717114;border:1px solid rgba(248,113,113,.35);border-radius:var(--radius);color:#fecaca;font-size:.8rem;line-height:1.45}.status-ok{color:var(--ok);font-size:.72rem;text-transform:capitalize}.status-run{color:var(--warn);font-size:.72rem;text-transform:capitalize}.status-err{color:var(--err);font-size:.72rem;text-transform:capitalize}.status-pending{color:var(--text-muted);font-size:.72rem;text-transform:capitalize}.muted{color:var(--text-muted)}.small{font-size:.75rem}.mono{font-family:ui-monospace,SF Mono,monospace;font-size:.7rem;color:var(--text-muted);word-break:break-all}.warn{color:var(--warn)}.project-drawer{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:14px 20px}.project-drawer h3{margin:0 0 10px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.project-drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.project-drawer li{display:flex;gap:8px;align-items:stretch}.project-drawer li button:first-child{flex:1;text-align:left;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text);padding:10px 12px;border-radius:var(--radius);cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:border-color .15s}.project-drawer li button:first-child:hover{border-color:var(--accent)}.statusbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 16px;font-size:.75rem;background:var(--bg-elevated);border-top:1px solid var(--border-subtle);color:var(--text-muted)}.statusbar-path{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-banner{background:#fbbf241a;color:#fde68a;padding:8px 16px;font-size:.78rem;border-bottom:1px solid rgba(251,191,36,.25);line-height:1.45}.dev-banner code{background:#00000040;padding:2px 6px;border-radius:4px;font-size:.85em}.hidden-input{display:none}@media(max-width:1100px){.workspace{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.panel{border-right:none;border-left:none;border-bottom:1px solid var(--border-subtle);max-height:320px}}