:root{--navy-900:#171544;--navy-800:#211e57;--navy-700:#2b276b;--purple-500:#6f68ae;--purple-400:#8b85c2;--purple-300:#b3aed8;--purple-100:#ece9f7;--purple-50:#f6f5fb;--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--green-500:#22c55e;--green-100:#dcfce7;--green-700:#166534;--amber-500:#f59e0b;--amber-100:#fef3c7;--amber-800:#92400e;--red-500:#ef4444;--red-100:#fee2e2;--red-700:#b91c1c;--brand-gradient:linear-gradient(135deg, var(--navy-900) 0%, var(--purple-500) 100%);--brand-gradient-soft:linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);--sidebar-width:300px;--ease:cubic-bezier(.16, 1, .3, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--slate-50);color:var(--slate-800);-webkit-font-smoothing:antialiased;font-family:Nunito,sans-serif;font-size:15px;line-height:1.6}#root{min-height:100vh}button,input,textarea{font-family:inherit}button{cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease)}button:active{transform:scale(.97)}button:disabled{cursor:not-allowed;opacity:.5}::selection{background:var(--purple-300);color:var(--navy-900)}code,pre{font-family:JetBrains Mono,monospace}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--slate-400)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.onboarding-shell{background:var(--brand-gradient);justify-content:center;align-items:center;min-height:100vh;padding:32px;display:flex}.onboarding-card{background:#fff;border-radius:20px;width:100%;max-width:640px;padding:44px 44px 36px;box-shadow:0 24px 60px #0f0c3c59}.onboarding-logo{height:30px;margin-bottom:26px}.onboarding-card h1{color:var(--navy-900);letter-spacing:-.4px;margin-bottom:10px;font-size:26px;font-weight:800}.onboarding-sub{color:var(--slate-500);max-width:520px;margin-bottom:28px;font-size:14.5px}.payload-picker{flex-direction:column;gap:10px;display:flex}.payload-picker.compact{gap:6px}.payload-card{text-align:left;border:1.5px solid var(--slate-200);background:#fff;border-radius:12px;align-items:center;gap:14px;padding:16px 18px;display:flex;position:relative}.payload-picker.compact .payload-card{border-radius:10px;gap:10px;padding:10px 12px}.payload-card:hover{border-color:var(--purple-300);background:var(--purple-50)}.payload-card.active{border-color:var(--purple-500);background:var(--purple-50);box-shadow:0 0 0 3px var(--purple-100)}.payload-card-emoji{flex-shrink:0;font-size:22px}.payload-picker.compact .payload-card-emoji{font-size:17px}.payload-card-body{flex-direction:column;gap:3px;min-width:0;display:flex}.payload-card-title{color:var(--navy-900);font-size:14.5px;font-weight:800}.payload-picker.compact .payload-card-title{font-size:13px}.payload-card-desc{color:var(--slate-500);font-size:12.5px;line-height:1.5}.payload-card-check{background:var(--purple-500);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-left:auto;font-size:12px;font-weight:800;display:flex}.postman-btn{color:#fff;white-space:nowrap;background:#ffffff1f;border:1px solid #ffffff38;border-radius:8px;align-self:flex-end;align-items:center;gap:7px;height:37px;padding:9px 12px;font-size:13px;font-weight:700;text-decoration:none;display:flex}.postman-btn:hover{background:#fff3}.settings-menu{align-items:flex-end;display:flex;position:relative}.settings-menu-trigger{color:#fff;background:#ffffff1f;border:1px solid #ffffff38;border-radius:8px;align-self:flex-end;align-items:center;gap:7px;height:37px;padding:9px 12px;font-size:13px;font-weight:700;display:flex}.settings-menu-trigger:hover{background:#fff3}.settings-menu-current{background:#ffffff29;border-radius:100px;padding:2px 8px;font-size:11px;font-weight:800}.settings-menu-panel{z-index:50;background:#fff;border-radius:14px;width:300px;padding:16px;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 18px 40px #0f0c3c47}.settings-menu-heading{color:var(--navy-900);margin-bottom:4px;font-size:13.5px;font-weight:800}.settings-menu-copy{color:var(--slate-500);margin-bottom:12px;font-size:12px}.multipart-fields{flex-direction:column;gap:12px;padding:4px 18px 18px;display:flex}.multipart-field{flex-direction:column;gap:6px;display:flex}.multipart-field-name{color:#cbd5e1;align-items:center;gap:8px;font-family:JetBrains Mono,monospace;font-size:12.5px;font-weight:700;display:flex}.multipart-field-kind{text-transform:uppercase;letter-spacing:.06em;color:#b6b2d6;background:#ffffff1a;border-radius:100px;padding:1px 7px;font-family:Nunito,sans-serif;font-size:10px;font-weight:800}.multipart-text-input{color:#e2e8f0;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;outline:none;padding:9px 12px;font-family:JetBrains Mono,monospace;font-size:12.5px}.multipart-text-input:focus{border-color:var(--purple-400)}.multipart-file-input input[type=file]{display:none}.multipart-file-label{color:#e2e8f0;cursor:pointer;background:#ffffff14;border:1px dashed #ffffff40;border-radius:8px;align-items:center;gap:6px;padding:9px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.multipart-file-label:hover{background:#ffffff24}.webhook-panel{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:10px;margin-top:12px;padding:14px 16px}.webhook-toggle{cursor:pointer;align-items:center;gap:10px;display:flex}.webhook-toggle input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.webhook-toggle-switch{background:var(--slate-300);width:38px;height:22px;transition:background .2s var(--ease);border-radius:100px;flex-shrink:0;position:relative}.webhook-toggle-switch:after{content:"";width:18px;height:18px;transition:transform .2s var(--ease);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000040}.webhook-toggle input:checked+.webhook-toggle-switch{background:var(--purple-500)}.webhook-toggle input:checked+.webhook-toggle-switch:after{transform:translate(16px)}.webhook-toggle-label{color:var(--slate-700);font-size:13.5px;font-weight:700}.webhook-url-row{flex-direction:column;gap:8px;margin-top:12px;display:flex;overflow:hidden}.webhook-url-input{border:1.5px solid var(--slate-200);color:var(--slate-800);background:#fff;border-radius:8px;outline:none;padding:9px 12px;font-family:JetBrains Mono,monospace;font-size:13px}.webhook-url-input:focus{border-color:var(--purple-400)}.field-reference{border:1px solid var(--slate-200);background:#fff;border-radius:10px;margin:10px 0 6px;overflow:hidden}.field-reference-title{text-transform:uppercase;letter-spacing:.08em;color:var(--slate-400);padding:10px 14px 8px;font-size:11px;font-weight:800}.field-reference-table{border-collapse:collapse;width:100%}.field-reference-table tr{border-top:1px solid var(--slate-100)}.field-reference-table td{vertical-align:top;padding:8px 14px;font-size:12.5px}.field-reference-path{white-space:nowrap;width:240px}.field-reference-path code{background:var(--purple-50);color:var(--navy-800);border-radius:5px;padding:2px 7px;font-size:12px;font-weight:600}.field-reference-desc{color:var(--slate-600);line-height:1.5}.app-header{background:var(--brand-gradient);color:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:22px 32px;display:flex;position:relative;overflow:hidden}.app-header:before{content:"";pointer-events:none;background:#ffffff0d;border-radius:50%;width:260px;height:260px;position:absolute;top:-60px;right:-40px}.app-header-brand{z-index:1;align-items:center;gap:16px;display:flex}.app-header-logo{filter:brightness(0)invert();height:34px}.app-header-title h1{letter-spacing:-.2px;font-size:19px;font-weight:800}.app-header-title p{color:#d9d6f0;margin-top:2px;font-size:13px;font-weight:500}.app-header-controls{z-index:1;gap:14px;display:flex}.control{flex-direction:column;gap:4px;display:flex}.control-label{text-transform:uppercase;letter-spacing:.08em;color:#cfcaea;font-size:10.5px;font-weight:700}.control select,.control input{color:#fff;min-width:180px;transition:background .15s var(--ease), border-color .15s var(--ease);background:#ffffff1f;border:1px solid #ffffff38;border-radius:8px;outline:none;padding:7px 10px;font-size:13px;font-weight:600}.control select option{color:var(--navy-900)}.control input::placeholder{color:#b9b4dd;font-weight:500}.control select:focus,.control input:focus{background:#fff3;border-color:#ffffff80}.app-body{flex:1;align-items:flex-start;display:flex}.app-sidebar{width:var(--sidebar-width);flex-direction:column;flex-shrink:0;gap:18px;max-height:100vh;padding:24px 18px 40px;display:flex;position:sticky;top:0;overflow-y:auto}.app-main{flex:1;min-width:0;padding:28px 36px 60px}.scenario-tabs{flex-direction:column;gap:6px;display:flex}.scenario-tab{border:1px solid var(--slate-200);text-align:left;background:#fff;border-radius:12px;padding:12px 14px;position:relative;overflow:hidden}.scenario-tab.active{color:#fff;border-color:#0000}.scenario-tab-bg{background:var(--brand-gradient);z-index:0;border-radius:12px;position:absolute;inset:0}.scenario-tab-content{z-index:1;align-items:flex-start;gap:10px;display:flex;position:relative}.scenario-tab-emoji{font-size:18px;line-height:1}.scenario-tab-title{font-size:13.5px;font-weight:800;display:block}.scenario-tab-subtitle{opacity:.85;margin-top:2px;font-size:11.5px;font-weight:500;display:block}.scenario-tab:not(.active) .scenario-tab-subtitle{color:var(--slate-500)}.sidebar-progress{flex-direction:column;gap:6px;display:flex}.sidebar-progress-track{background:var(--slate-200);border-radius:4px;height:6px;overflow:hidden}.sidebar-progress-fill{background:var(--brand-gradient);height:100%;transition:width .4s var(--ease);border-radius:4px}.sidebar-progress span{color:var(--slate-500);font-size:11.5px;font-weight:700}.sidebar-actions{gap:8px;display:flex}.run-all-btn{background:var(--brand-gradient);color:#fff;border:none;border-radius:10px;flex:1;padding:10px 12px;font-size:13px;font-weight:800;box-shadow:0 4px 14px #17154440}.run-all-btn:hover:not(:disabled){box-shadow:0 6px 18px #17154452}.reset-btn{border:1px solid var(--slate-200);color:var(--slate-600);background:#fff;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700}.reset-btn:hover:not(:disabled){background:var(--slate-100)}.stepper{flex-direction:column;list-style:none;display:flex}.stepper-item{flex-direction:column;display:flex;position:relative}.stepper-line{background:var(--slate-200);width:2px;height:12px;transition:background .3s var(--ease);position:absolute;top:-6px;left:15px}.stepper-line.filled{background:var(--purple-500)}.stepper-btn{text-align:left;background:0 0;border:none;border-radius:10px;align-items:flex-start;gap:12px;width:100%;padding:10px 8px;display:flex}.stepper-btn:hover{background:var(--purple-50)}.stepper-btn.active{background:var(--purple-100)}.stepper-dot{background:var(--slate-200);width:30px;height:30px;color:var(--slate-500);transition:all .25s var(--ease);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12.5px;font-weight:800;display:flex;position:relative}.stepper-dot.status-done{background:var(--green-500);color:#fff}.stepper-dot.status-running{background:var(--purple-500);color:#fff}.stepper-spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:12px;height:12px;display:block}.stepper-text{flex-direction:column;gap:4px;min-width:0;padding-top:2px;display:flex}.stepper-badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.cap-pill{border-radius:100px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:800;display:inline-flex}.method-pill{background:var(--navy-900);color:#fff;letter-spacing:.04em;border-radius:5px;padding:2px 7px;font-size:10px;font-weight:800}.stepper-path{color:var(--slate-500);font-size:11px;font-weight:600}.stepper-title{color:var(--slate-800);font-size:13.5px;font-weight:700;line-height:1.35}.step-panel{border:1px solid var(--slate-200);background:#fff;border-radius:16px;padding:28px 30px 26px;box-shadow:0 1px 2px #0f172a0a}.step-panel-eyebrow{color:var(--purple-500);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;font-weight:800;display:flex}.step-panel-header h2{color:var(--navy-900);letter-spacing:-.3px;margin-bottom:8px;font-size:24px;font-weight:800}.step-panel-narrative{color:var(--slate-600);max-width:720px;margin-bottom:6px;font-size:14.5px}.callout{border-radius:10px;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 16px;font-size:13.5px;display:flex}.callout-info{background:var(--purple-50);border:1px solid var(--purple-100);color:var(--navy-800)}.callout-success{background:var(--green-100);color:var(--green-700);border:1px solid #bbf7d0}.callout-warn{background:var(--amber-100);color:var(--amber-800);border:1px solid #fde68a}.callout-icon{flex-shrink:0}.endpoint-strip{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:10px;align-items:center;gap:10px;margin:20px 0 4px;padding:10px 14px;display:flex}.endpoint-url{color:var(--slate-700);white-space:nowrap;font-size:13px;font-weight:600;overflow-x:auto}.tab-row{border-bottom:1px solid var(--slate-200);flex-wrap:wrap;align-items:center;gap:4px;margin:18px 0 16px;display:flex}.tab-btn{color:var(--slate-400);background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:6px;margin-bottom:-1px;padding:10px 14px;font-size:13.5px;font-weight:700;display:flex}.tab-btn:hover{color:var(--slate-600)}.tab-btn.active{color:var(--navy-900);border-bottom-color:var(--purple-500)}.tag{text-transform:uppercase;letter-spacing:.04em;border-radius:100px;padding:2px 7px;font-size:10px;font-weight:800}.tag-live{background:var(--green-100);color:var(--green-700)}.tag-simulated{background:var(--amber-100);color:var(--amber-800)}.tag-error{background:var(--red-100);color:var(--red-700)}.run-btn{background:var(--brand-gradient);color:#fff;border:none;border-radius:9px;align-items:center;gap:8px;margin-bottom:6px;margin-left:auto;padding:9px 16px;font-size:13px;font-weight:800;display:flex;box-shadow:0 3px 10px #17154438}.run-btn:hover:not(:disabled){box-shadow:0 5px 14px #1715444d}.run-btn-spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:12px;height:12px;display:block}.code-block{background:var(--navy-900);border-radius:12px;margin:6px 0;overflow:hidden}.code-block-header{background:#ffffff0f;border-bottom:1px solid #ffffff0f;align-items:center;gap:10px;padding:9px 14px;display:flex}.code-block-lang{color:var(--purple-300);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:800}.code-block-label{color:#b6b2d6;flex:1;font-size:12px}.copy-btn{color:#e7e5f4;background:#ffffff1a;border:1px solid #ffffff24;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700}.copy-btn:hover{background:#ffffff2e}.code-block pre{color:#e2e8f0;padding:16px 18px;font-size:12.5px;line-height:1.7;overflow-x:auto}.json-editor{color:#e2e8f0;resize:vertical;background:0 0;border:none;outline:none;width:100%;min-height:220px;padding:16px 18px;font-family:JetBrains Mono,monospace;font-size:12.5px;line-height:1.7}.json-editor.has-error{box-shadow:inset 0 0 0 2px #ef444480}.json-error{background:var(--red-100);color:var(--red-700);padding:8px 14px;font-size:12.5px;font-weight:700}.hint-text{color:var(--slate-500);margin-top:10px;font-size:12.5px;line-height:1.6}.hint-text code{background:var(--slate-100);color:var(--navy-800);border-radius:4px;padding:1px 5px}.code-samples{flex-direction:column;gap:8px;display:flex}.code-lang-tabs{gap:6px;display:flex}.code-lang-tab{background:var(--slate-100);border:1px solid var(--slate-200);color:var(--slate-600);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700}.code-lang-tab.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}.empty-state{text-align:center;color:var(--slate-400);background:var(--slate-50);border:1px dashed var(--slate-200);border-radius:12px;padding:40px 20px;font-size:13.5px;font-weight:600}.step-nav{justify-content:space-between;margin-top:18px;display:flex}.step-nav button{border:1px solid var(--slate-200);color:var(--slate-700);background:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700}.step-nav button:hover:not(:disabled){background:var(--slate-100)}@media (width<=980px){.app-body{flex-direction:column}.app-sidebar{width:100%;max-height:none;position:static}.app-main{padding:20px}}
