:root{--green: #2f9e5b;--green-dark: #23784a;--green-soft: #e6f4ec;--ink: #1f2937;--muted: #6b7280;--line: #dfe3e1;--panel: #ffffff;--bg: #f4f6f5;--red: #d0433b;--amber: #b7791f;--mono: ui-monospace, "Cascadia Mono", Consolas, monospace;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--ink)}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;background:var(--bg)}button,input,select{font:inherit;color:inherit}.app{display:grid;grid-template-rows:52px 1fr 56px;grid-template-columns:360px 1fr;height:100%}.header{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}.header img{height:34px}.header h1{font-size:16px;font-weight:600;margin:0;letter-spacing:.2px}.header .sub{color:var(--muted);font-size:12px}.header .spacer{flex:1}.header label{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}.header select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}.sidebar{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}.step{border-bottom:1px solid var(--line)}.step>header{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none}.step>header:hover{background:#fafbfa}.step .num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--line);color:var(--muted)}.step.active .num{background:var(--green);color:#fff}.step.done .num{background:var(--green-soft);color:var(--green-dark)}.step .title{font-weight:600;flex:1}.step .hint{color:var(--muted);font-size:12px}.step .body{padding:4px 14px 14px 46px}.step.collapsed .body{display:none}.step.locked .title{color:var(--muted)}.drop{border:1.5px dashed #b9c2bd;border-radius:8px;padding:18px 12px;text-align:center;color:var(--muted);background:#fafbfa;cursor:pointer}.drop.over{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}.drop strong{color:var(--ink)}.drop input{display:none}.kv{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.4fr);gap:3px 10px;font-size:13px;margin:8px 0}.kv .k{color:var(--muted)}.kv .v{font-family:var(--mono);font-size:12.5px;text-align:right;overflow-wrap:anywhere;min-width:0}.kv .v.ok{color:var(--green-dark)}.kv .v.warn{color:var(--amber)}.kv .v.bad{color:var(--red)}.kv .h{grid-column:1 / -1;margin-top:8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}.row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;align-items:center}.btn{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:13px}.btn:hover{border-color:#b9c2bd;background:#fafbfa}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}.btn.primary:hover{background:var(--green-dark)}.btn.small{padding:3px 8px;font-size:12px}.btn.on{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}.field{display:grid;grid-template-columns:1fr 64px;align-items:center;gap:8px;margin:6px 0}.field label{font-size:13px}.field label small{display:block;color:var(--muted);font-size:11.5px}.field input[type=number]{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;text-align:right;font-family:var(--mono);font-size:12.5px}.field input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--green);margin:0}.field.wide{grid-template-columns:1fr}.units{color:var(--muted);font-size:12px}.note{font-size:12.5px;color:var(--muted);margin:6px 0;line-height:1.4}.note.warn{color:var(--amber)}.note.bad{color:var(--red)}.note.ok{color:var(--green-dark)}.viewport{position:relative;min-width:0;min-height:0}.viewport canvas{width:100%!important;height:100%!important}.overlay{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.overlay>*{pointer-events:auto}.toolbar{display:flex;gap:6px;background:#ffffffe6;border:1px solid var(--line);border-radius:8px;padding:6px;align-items:center}.toolbar .sep{width:1px;height:18px;background:var(--line);margin:0 2px}.toolbar label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}.toolbar input[type=range]{width:120px;accent-color:var(--green)}.progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffffff2;border:1px solid var(--line);border-radius:10px;padding:16px 22px;font-size:14px;display:none;box-shadow:0 6px 24px #00000014}.progress.show{display:block}.progress .bar{height:4px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}.progress .bar i{display:block;height:100%;width:40%;background:var(--green);animation:slide 1.1s infinite ease-in-out}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(260%)}}.hintbox{position:absolute;right:12px;top:12px;background:#ffffffe6;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--muted);line-height:1.5}.hintbox b{color:var(--ink);font-weight:600}.bottombar{grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding:0 16px;background:var(--panel);border-top:1px solid var(--line)}.bottombar .status{flex:1;color:var(--muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottombar .vol{display:flex;flex-direction:column;align-items:flex-end}.bottombar .vol .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.bottombar .vol .n{font-family:var(--mono);font-size:14px}.tubebar{width:220px;height:26px;border:1px solid var(--line);border-radius:6px;position:relative;background:#fff;overflow:hidden}.tubebar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--green-soft)}.tubebar .mark{position:absolute;top:0;bottom:0;width:1px;background:var(--muted)}.tubebar .mark span{position:absolute;top:1px;left:3px;font-size:10px;color:var(--muted)}.bottombar .btn.big{padding:9px 16px;font-size:14px}.v2 .app{grid-template-columns:320px 1fr}.v2 .steps{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}.v2 .steps .s{flex:1;text-align:center;font-size:12px;color:var(--muted);padding:6px 4px;border-radius:6px;background:#f3f5f4}.v2 .steps .s.active{background:var(--green);color:#fff;font-weight:600}.v2 .steps .s.done{background:var(--green-soft);color:var(--green-dark)}.v2 .panel{padding:14px}.v2 .panel h2{font-size:15px;margin:0 0 6px}.v2 .drop{border:2px dashed var(--line);border-radius:10px;padding:26px 14px;text-align:center;color:var(--muted);cursor:pointer}.v2 .drop:hover,.v2 .drop.over{border-color:var(--green);color:var(--green-dark);background:var(--green-soft)}.v2 .loops{margin:10px 0}.v2 .loop{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px;font-size:13px}.v2 .loop .dot{width:10px;height:10px;border-radius:50%;background:#ff8c00}.v2 .loop.open .dot{background:#ffd166}.v2 .loop .x{margin-left:auto}.v2 .keys{color:var(--muted);font-size:12px;line-height:1.6}.v2 .keys b{color:var(--ink);font-weight:600}.v2 .viewtools{position:absolute;left:14px;top:14px;display:flex;gap:6px}.v2 .next{margin-top:14px}.v2 .nudgebar{position:absolute;left:14px;bottom:14px;display:flex;gap:12px;flex-wrap:wrap;background:#ffffffeb;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.v2 .nudgebar .grp{display:flex;align-items:center;gap:4px}.v2 .nudgebar .grp>span{color:var(--muted);font-size:11px;margin-right:4px;text-transform:uppercase;letter-spacing:.3px}