:root{--bg:#f5f6f8;--surface:#fff;--border:#d9dce1;--text:#1f2933;--muted:#6b7280;--accent:#1971c2;--accent-hover:#1864ab;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);height:100vh;color:var(--text);flex-direction:column;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:1.5rem;padding:.75rem 1.25rem;display:flex}.app-header h1{letter-spacing:.02em;margin:0;font-size:1.1rem;font-weight:600}.toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.hidden{display:none!important}.modes{gap:.25rem;display:flex}.mode{background:var(--surface);color:var(--text)}.mode.active{background:var(--accent);border-color:var(--accent);color:#fff}.name-input{font:inherit;border:1px solid var(--border);border-radius:6px;min-width:12rem;padding:.4rem .6rem}.validation p{margin:0 0 .35rem;font-size:.85rem}.valid-ok{color:#2f9e44;font-weight:600}.valid-err{color:#e03131;font-weight:600}.issue-error{color:#e03131}.issue-warning{color:#e8590c}select,button,.file-button{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:.4rem .75rem}button{background:var(--accent);border-color:var(--accent);color:#fff}button:hover{background:var(--accent-hover)}button.secondary{background:var(--surface);color:var(--text)}button.secondary:hover{background:#eef1f5}.app-main{--panel-width:360px;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.app-main.panel-collapsed{--panel-width:0px}.diagram{background:var(--surface);flex:1;min-width:0;position:relative;overflow:hidden}.panel{flex:0 0 var(--panel-width);width:var(--panel-width);border-left:1px solid var(--border);background:var(--surface);z-index:1;padding:1rem;transition:flex-basis .18s,width .18s;position:relative;overflow-y:auto}.panel-collapsed .panel{border-left:none;padding:0;overflow:hidden}.panel-toggle{top:.6rem;right:calc(var(--panel-width) + .5rem);z-index:2;background:var(--surface);width:1.9rem;height:1.9rem;color:var(--muted);border-radius:999px;padding:0;font-size:1.1rem;line-height:1;transition:right .18s;position:absolute;box-shadow:0 1px 4px #1f29332e}.panel-toggle:hover{color:var(--text)}.panel-block+.panel-block{border-top:1px solid var(--border);margin-top:1.25rem;padding-top:1rem}.panel-block h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .5rem;font-size:.8rem}.status{margin:0;font-size:.9rem}.actions{flex-direction:column;gap:.4rem;display:flex}.actions button{text-align:left}.muted{color:var(--muted);margin:0;font-size:.85rem}.variables{border:1px solid var(--border);resize:vertical;border-radius:6px;width:100%;min-height:4.5rem;padding:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}.variables-view{background:#f0f2f5;border-radius:6px;max-height:10rem;margin:.5rem 0 0;padding:.5rem;font-size:.75rem;overflow-x:auto}.log{color:var(--text);max-height:14rem;margin:0;padding-left:1.1rem;font-size:.8rem;overflow-y:auto}.log li{padding:.1rem 0}.task{background:#fff;border:1px solid #d7dce5;border-radius:8px;margin-bottom:.6rem;padding:.6rem .7rem}.task-title{margin:0 0 .35rem;font-weight:600}.task-badges{flex-wrap:wrap;gap:.3rem;margin:0 0 .4rem;display:flex}.badge{color:#1b4fa0;background:#e4edff;border-radius:999px;padding:.1rem .45rem;font-size:.72rem}.badge-muted{color:#5a6474;background:#eef0f4}.task-vars{color:#4a5568;margin:0 0 .45rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}.timers .timer{margin:0 0 .35rem;font-size:.85rem}.hints{flex-direction:column;gap:.5rem;display:flex}.hint{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:.45rem .6rem}.hint-name{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;font-weight:600}.hint-usage{color:var(--muted);margin:.2rem 0 0;font-size:.78rem}.hint-expression{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.step-dialog{border:1px solid var(--border);background:var(--surface);width:min(30rem,100vw - 2rem);color:var(--text);border-radius:12px;padding:1.1rem 1.2rem;box-shadow:0 18px 40px #0f172a38}.step-dialog::backdrop{background:#0f172a59}.step-dialog h2{margin:0;font-size:1.05rem}.step-dialog h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .5rem;font-size:.78rem}.step-reason{color:var(--muted);margin:.3rem 0 .6rem;font-size:.88rem}.step-block{border-top:1px solid var(--border);margin-top:.9rem;padding-top:.8rem}.step-field{align-items:center;gap:.6rem;margin-bottom:.45rem;display:flex}.step-field span{overflow-wrap:anywhere;flex:0 0 8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.step-field input{border:1px solid var(--border);background:var(--surface);min-width:0;color:var(--text);border-radius:6px;flex:1;padding:.35rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.step-note{color:var(--muted);margin:.35rem 0 0;font-size:.76rem}.step-choice{align-items:center;gap:.5rem;padding:.3rem 0;font-size:.9rem;display:flex}.step-choice code{color:var(--muted);overflow-wrap:anywhere;background:#f0f2f5;border-radius:4px;padding:.1rem .35rem;font-size:.78rem}.step-footer{flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;display:flex}