@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif&display=swap";:root{--bg-primary: #FAFAF8;--bg-secondary: #F3F2EE;--bg-card: #FFFFFF;--border: #E4E2DC;--border-focus: #C8C5BD;--text-primary: #1A1A1A;--text-secondary: #5C5C5C;--text-muted: #9A9A9A;--accent: #18181B;--accent-hover: #27272A;--trigger: #B45309;--trigger-bg: #FFFBEB;--trigger-light: #FDE68A;--process: #1D4ED8;--process-bg: #EFF6FF;--process-light: #BFDBFE;--condition: #6D28D9;--condition-bg: #F5F3FF;--condition-light: #DDD6FE;--action: #047857;--action-bg: #ECFDF5;--action-light: #A7F3D0;--output: #BE123C;--output-bg: #FFF1F2;--output-light: #FECDD3;--font-display: "Instrument Serif", serif;--font-body: "DM Sans", sans-serif;--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.03);--shadow-md: 0 2px 8px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);--shadow-lg: 0 4px 12px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.05)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{position:relative;z-index:1}.app-container{max-width:1080px;margin:0 auto;padding:48px 24px;min-height:100vh}.header{text-align:center;margin-bottom:48px}.header h1{font-family:var(--font-display);font-size:clamp(32px,4vw,44px);font-weight:400;letter-spacing:-.5px;line-height:1.2;margin-bottom:8px;color:var(--text-primary)}.header p{color:var(--text-secondary);font-size:16px;max-width:460px;margin:0 auto;line-height:1.6}.input-section{max-width:640px;margin:0 auto 56px}.input-wrapper{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow-sm)}.input-wrapper:focus-within{border-color:var(--border-focus);box-shadow:var(--shadow-md),0 0 0 3px #18181b0f}.input-wrapper textarea{width:100%;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-body);font-size:15px;padding:20px 24px 64px;resize:none;outline:none;min-height:130px;line-height:1.7}.input-wrapper textarea::placeholder{color:var(--text-muted)}.input-actions{position:absolute;bottom:14px;right:14px;left:14px;display:flex;justify-content:space-between;align-items:center}.char-count{font-family:var(--font-body);font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}.forge-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;font-family:var(--font-body);font-size:14px;font-weight:500;padding:9px 20px;border-radius:8px;cursor:pointer;transition:background .15s,box-shadow .15s;letter-spacing:.1px}.forge-btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--shadow-sm)}.forge-btn:active:not(:disabled){transform:scale(.98)}.forge-btn:disabled{opacity:.35;cursor:not-allowed}.forge-btn svg{width:15px;height:15px}.examples{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.example-chip{font-family:var(--font-body);font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);padding:6px 14px;border-radius:100px;cursor:pointer;transition:all .15s}.example-chip:hover{color:var(--text-primary);border-color:var(--border-focus);background:var(--bg-secondary)}.flow-canvas{position:relative;overflow-x:auto;padding:32px 0}.flow-canvas::-webkit-scrollbar{height:6px}.flow-canvas::-webkit-scrollbar-track{background:transparent}.flow-canvas::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.flow-track{display:flex;align-items:center;gap:0;min-width:min-content;padding:20px 24px}.node-group{display:flex;align-items:center;opacity:0;animation:node-enter .5s cubic-bezier(.25,.46,.45,.94) forwards}.node-group:last-child .connector{display:none}@keyframes node-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.node-card{width:192px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px 16px;text-align:center;position:relative;transition:box-shadow .2s,transform .2s;flex-shrink:0;box-shadow:var(--shadow-sm)}.node-card:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;border-radius:10px 10px 0 0}.node-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.node-card[data-type=trigger]:before{background:var(--trigger)}.node-card[data-type=process]:before{background:var(--process)}.node-card[data-type=condition]:before{background:var(--condition)}.node-card[data-type=action]:before{background:var(--action)}.node-card[data-type=output]:before{background:var(--output)}.node-icon{font-size:24px;margin-bottom:10px;display:block}.node-type{font-family:var(--font-body);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;display:inline-block;padding:3px 8px;border-radius:4px}.node-card[data-type=trigger] .node-type{color:var(--trigger);background:var(--trigger-bg)}.node-card[data-type=process] .node-type{color:var(--process);background:var(--process-bg)}.node-card[data-type=condition] .node-type{color:var(--condition);background:var(--condition-bg)}.node-card[data-type=action] .node-type{color:var(--action);background:var(--action-bg)}.node-card[data-type=output] .node-type{color:var(--output);background:var(--output-bg)}.node-label{font-weight:600;font-size:14px;margin-bottom:6px;line-height:1.3;color:var(--text-primary)}.node-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}.connector{width:48px;height:2px;position:relative;flex-shrink:0;display:flex;align-items:center}.connector-line{position:absolute;top:0;left:0;right:8px;height:1px;background:var(--border-focus)}.connector-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--border-focus)}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 0}.loading-spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--text-secondary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:13px;color:var(--text-muted);animation:loading-fade 1.5s ease-in-out infinite}@keyframes loading-fade{0%,to{opacity:1}50%{opacity:.4}}.error-msg{text-align:center;padding:20px 24px;background:var(--output-bg);border:1px solid var(--output-light);border-radius:10px;color:var(--output);font-size:14px;max-width:480px;margin:0 auto}.empty-state{text-align:center;padding:60px 0}.empty-state svg{margin:0 auto 14px;display:block}.empty-state p{font-size:13px;color:var(--text-muted)}.footer{text-align:center;padding:40px 0 20px;border-top:1px solid var(--border);margin-top:60px}.footer p{font-size:12px;color:var(--text-muted)}.footer a{color:var(--text-secondary);text-decoration:none;transition:color .15s}.footer a:hover{color:var(--text-primary)}@media (max-width: 768px){.app-container{padding:28px 16px}.header{margin-bottom:36px}.flow-canvas{padding:20px 0}.flow-track{flex-direction:column;align-items:center;gap:0;padding:0 20px}.connector{width:1px;height:36px}.connector-line{width:1px;height:calc(100% - 8px);top:0;left:50%;right:auto}.connector-arrow{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%);border-top:6px solid var(--border-focus);border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent}.node-card{width:240px}.examples{justify-content:center}}@media (max-width: 480px){.header h1{font-size:28px}.input-wrapper textarea{font-size:14px;padding:16px 18px 60px}.node-card{width:220px}}