:root{--chrome:#ececec;--chrome-2:#f5f5f5;--panel:#fbfbfb;--border:#c7c7c7;--border-soft:#e0e0e0;--text:#2b2b2b;--text-dim:#6e6e6e;--accent:#0696d7;--hover:#e6f2fb;--hover-bd:#9cd2ee;--sel:#cde8f7;color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,Roboto,system-ui,sans-serif;font-size:13px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--chrome);-webkit-user-select:none;user-select:none;overflow:hidden}button{font-family:inherit}.app{grid-template-rows:auto 1fr auto;width:100vw;height:100vh;display:grid}.topbar{background:var(--chrome);border-bottom:1px solid var(--border-soft);align-items:center;gap:4px;height:32px;padding:0 8px;display:flex}.tb-btn{color:#555;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;justify-content:center;align-items:center;min-width:26px;height:24px;padding:0 4px;font-size:14px;display:inline-flex}.tb-btn:hover{background:var(--hover);border-color:var(--hover-bd)}.tb-sep{background:var(--border-soft);width:1px;height:18px;margin:0 4px}.tb-spacer{flex:1}.doc-tab{border:1px solid var(--border-soft);color:#333;background:#fff;border-bottom:none;border-radius:4px 4px 0 0;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:12px;display:inline-flex}.doc-tab .dot{background:#f0a020;border-radius:50%;width:7px;height:7px}.tb-user{color:#fff;background:#f0a020;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;display:inline-flex}.ribbon{background:var(--chrome-2);border-bottom:1px solid var(--border)}.ribbon-tabs{border-bottom:1px solid var(--border-soft);align-items:stretch;gap:2px;height:26px;padding:0 6px;display:flex}.workspace{color:#444;cursor:pointer;border-radius:3px;align-items:center;padding:0 12px;font-size:12px;font-weight:600;display:inline-flex}.workspace:hover{background:var(--hover)}.ws-sep{background:var(--border-soft);width:1px;margin:4px 6px}.ribbon-tab{cursor:pointer;color:#555;border-bottom:2px solid #0000;align-items:center;padding:0 11px;font-size:12px;display:inline-flex}.ribbon-tab:hover{color:#222}.ribbon-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.ribbon-panels{align-items:stretch;height:82px;padding:4px 4px 0;display:flex}.panel{flex-direction:column;padding:0 2px;display:flex}.panel-tools{grid-template-rows:30px 30px;grid-auto-flow:column;align-content:start;gap:1px;padding:0 2px;display:grid}.panel-label{text-align:center;color:var(--text-dim);white-space:nowrap;padding-top:2px;font-size:11px}.panel-divider{background:var(--border-soft);width:1px;margin:2px 4px 18px}.tool-btn{color:#454545;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;flex-direction:column;justify-content:center;align-items:center;min-width:30px;height:30px;padding:0 4px;display:flex}.tool-btn:hover{background:var(--hover);border-color:var(--hover-bd)}.tool-btn:active{background:#d4e9f7}.tool-btn svg{display:block}.tool-btn.big{grid-row:span 2;gap:3px;min-width:56px;height:61px}.tool-btn.big .tb-label{color:#3a3a3a;font-size:11px;line-height:1}.main{grid-template-columns:248px 1fr;min-height:0;display:grid}.browser{background:var(--panel);border-right:1px solid var(--border);font-size:12.5px;overflow:auto}.browser-head{height:26px;color:var(--text-dim);border-bottom:1px solid var(--border-soft);letter-spacing:.5px;background:var(--panel);align-items:center;padding:0 8px;font-size:11px;display:flex;position:sticky;top:0}.tree-row{white-space:nowrap;cursor:default;color:#333;align-items:center;gap:4px;height:22px;padding:0 6px;display:flex}.tree-row:hover{background:#eef4f8}.tree-row.sel{background:var(--sel)}.tw-toggle{color:#888;cursor:pointer;justify-content:center;width:12px;display:inline-flex}.tw-eye{color:#9a9a9a;cursor:pointer;width:16px;font-size:11px;display:inline-flex}.tw-act{color:#b7b7b7;cursor:pointer;opacity:0;text-align:center;width:16px;font-size:11px;transition:opacity .12s}.tree-row:hover .tw-act{opacity:1}.tw-act:hover{color:var(--accent)}.tw-swatch{border:1px solid var(--border-soft);cursor:pointer;opacity:0;background:0 0;border-radius:3px;width:15px;height:15px;padding:0;transition:opacity .12s}.tree-row:hover .tw-swatch,.tree-row.sel .tw-swatch{opacity:1}.tree-showall{color:#5a8fb8;cursor:pointer;font-size:11.5px}.tree-showall:hover{color:var(--accent)}.tree-rename{border:1px solid var(--accent);border-radius:3px;width:110px;padding:1px 4px;font-size:12px}.tw-ico{color:#6b86a3;width:16px;display:inline-flex}.viewport{background:radial-gradient(120% 130% at 50% 0,#e9eef2 0%,#d4dde4 45%,#eef2f5 100%);min-width:0;position:relative}.viewport canvas{display:block}.vp-toolbar{border:1px solid var(--border-soft);background:#ffffffd9;border-radius:16px;align-items:center;gap:3px;padding:3px 6px;display:flex;position:absolute;top:10px;left:12px;box-shadow:0 1px 4px #0000001f}.vp-toolbar input[type=range]{width:90px}.vp-navbar{border:1px solid var(--border-soft);background:#ffffffd9;border-radius:16px;align-items:center;gap:2px;padding:3px 6px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 1px 4px #0000001f}.vp-badge{color:#6d7780;text-align:right;max-width:60%;font-size:11px;position:absolute;bottom:12px;right:12px}.vp-busy{color:#fff;background:#141414d1;border-radius:16px;padding:6px 14px;font-size:12px;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #00000040}.vp-props{color:#495560;border:1px solid var(--border-soft);background:#ffffffb8;border-radius:5px;padding:3px 9px;font-size:11px;position:absolute;bottom:12px;left:12px}.vp-measure{color:#fff;background:#ff3b30eb;border-radius:16px;padding:5px 14px;font-size:12px;font-weight:600;position:absolute;top:52px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0003}.tb-text{color:#2a5c75;gap:5px;width:auto;min-width:0;font-size:12px;padding:0 9px!important}.tb-color{border:1px solid var(--border-soft);cursor:pointer;background:0 0;border-radius:4px;width:28px;height:22px;padding:0}.tb-mat{height:24px;color:var(--text);background:var(--panel);border:1px solid var(--border-soft);cursor:pointer;border-radius:4px;margin-left:4px;padding:0 4px;font-size:12px}.tb-btn.tb-on{background:var(--accent);color:#fff;border-color:var(--accent)}.tl-hint{color:#b0b0b0;font-size:11px}.tl-chip{color:#2a5c75;background:#eaf4fb;border:1px solid #b9def0;border-radius:11px;align-items:center;gap:5px;height:20px;margin-right:6px;padding:0 9px;font-size:11px;display:inline-flex}.sketch-bar{border:1px solid var(--border);color:#333;background:#fffffff5;border-radius:8px;align-items:center;gap:10px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 12px #00000029}.sketch-bar .sb-title{color:var(--accent);font-weight:600}.sketch-bar button{border:1px solid var(--border-soft);cursor:pointer;background:#fff;border-radius:5px;padding:4px 10px}.sketch-bar .sb-tool.active{background:var(--hover);border-color:var(--hover-bd);color:var(--accent)}.sketch-bar .sb-finish{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.sketch-bar .sb-finish:hover{background:#057fb8}.sketch-bar input{border:1px solid var(--border-soft);border-radius:4px;width:56px;padding:2px 5px}.sketch-bar .sb-hint{color:#9a9a9a}.sketch-bar .sb-spacer{width:6px}.timeline{position:relative}.tl-chip{color:#2a5c75;cursor:pointer;background:#eaf4fb;border:1px solid #b9def0;border-radius:11px;align-items:center;gap:5px;height:22px;margin-right:6px;padding:0 11px;font-size:11px;display:inline-flex}.tl-chip:hover{background:#dcecfa}.tl-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)}.tl-chip.sel svg{color:#fff}.tl-chip.suppressed{opacity:.45;text-decoration:line-through}.tl-chip svg{color:#2a7aa8}.feat-editor{border:1px solid var(--border);color:#333;z-index:20;background:#fff;border-radius:8px;align-items:center;gap:14px;padding:9px 16px;font-size:12px;display:flex;position:absolute;bottom:calc(100% + 6px);left:130px;box-shadow:0 4px 18px #0000002e}.feat-editor .fe-title{color:var(--accent);align-items:center;gap:5px;font-weight:600;display:inline-flex}.feat-editor label{align-items:center;gap:6px;display:inline-flex}.feat-editor input{border:1px solid var(--border-soft);border-radius:4px;width:64px;padding:3px 6px}.feat-editor .fe-del{color:#c0392b;cursor:pointer;background:#fff;border:1px solid #e3b4ae;border-radius:5px;padding:4px 12px}.feat-editor .fe-del:hover{background:#fdf0ee}.feat-editor .fe-close{color:#555;border:1px solid var(--border-soft);cursor:pointer;background:#fff;border-radius:5px;padding:4px 12px}.timeline{background:var(--chrome-2);border-top:1px solid var(--border);align-items:center;gap:6px;height:34px;padding:0 8px;display:flex}.tl-controls{align-items:center;gap:1px;display:flex}.tl-track{border:1px solid var(--border-soft);color:#b0b0b0;background:repeating-linear-gradient(90deg,#fff,#fff 38px,#f3f3f3 38px 39px);border-radius:3px;flex:1;align-items:center;height:24px;padding:0 6px;font-size:11px;display:flex}.tl-marker{background:var(--accent);width:2px;height:100%;margin-right:8px}.csketch{z-index:50;background:#fbfcfd;flex-direction:column;display:flex;position:fixed;inset:0}.cs-toolbar{background:var(--chrome-2);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;display:flex}.cs-title{color:var(--accent);margin-right:6px;font-weight:600}.cs-btn{border:1px solid var(--border-soft);cursor:pointer;color:#333;background:#fff;border-radius:5px;padding:4px 9px;font-size:12px}.cs-btn:hover{background:var(--hover)}.cs-btn.on{background:var(--hover);border-color:var(--hover-bd);color:var(--accent);font-weight:600}.cs-btn.cs-cstr{color:#2a5c75}.cs-btn.cs-finish{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.cs-btn.cs-finish:hover{background:#057fb8}.cs-div{background:var(--border-soft);width:1px;height:20px;margin:0 4px}.cs-spacer{flex:1}.cs-h input{border:1px solid var(--border-soft);border-radius:4px;width:56px;padding:2px 5px}.cs-svg{cursor:crosshair;touch-action:none;background:radial-gradient(120% 130% at 50% 40%,#fff,#eef2f5);flex:1;width:100%}.cs-dims{border:1px solid var(--border);background:#fff;border-radius:8px;width:188px;padding:9px;font-size:12px;position:absolute;top:64px;right:14px;box-shadow:0 2px 12px #00000024}.cs-dims-title{color:var(--text-dim);margin-bottom:6px}.cs-dim{align-items:center;gap:6px;margin-bottom:4px;display:flex}.cs-dim span{color:#555;width:32px}.cs-dim input{border:1px solid var(--border-soft);border-radius:4px;width:70px;padding:2px 4px}.cs-x{color:#c0392b;cursor:pointer;background:0 0;border:none;padding:0 2px}.cs-status{background:var(--chrome-2);border-top:1px solid var(--border);color:#444;padding:5px 12px;font-size:12px}.cs-status.bad{color:#c0392b;font-weight:600}.joints-panel{border:1px solid var(--border);z-index:15;background:#fff;border-radius:8px;width:330px;max-height:62vh;padding:10px;font-size:12px;position:fixed;bottom:50px;right:14px;overflow:auto;box-shadow:0 2px 14px #00000029}.params-panel{border:1px solid var(--border);z-index:15;background:#fff;border-radius:8px;width:290px;max-height:60vh;padding:10px;font-size:12px;position:fixed;bottom:50px;left:14px;overflow:auto;box-shadow:0 2px 14px #00000029}.pp-title{color:var(--accent);justify-content:space-between;margin-bottom:4px;font-weight:600;display:flex}.pp-x{cursor:pointer;color:#999}.pp-hint,.pp-empty{color:#8a929a;margin-bottom:6px;font-size:11px}.pp-row,.pp-add{align-items:center;gap:6px;margin-bottom:5px;display:flex}.pp-name{color:#2a5c75;flex:1;font-family:monospace}.pp-name-in{flex:1;width:60px}.pp-val{border:1px solid var(--border-soft);border-radius:4px;width:58px;padding:2px 5px}.pp-expr{border:1px solid var(--border-soft);border-radius:4px;width:66px;padding:2px 5px;font-family:monospace;font-size:11px}.pp-used{color:#9aa6af;font-size:11px}.pp-del{cursor:pointer}.fe-param{border:1px solid var(--border-soft);color:#2a7aa8;cursor:pointer;background:#f3f8fb;border-radius:4px;margin-left:4px;font-size:11px}.drawing-overlay{z-index:40;background:#141c2473;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.drawing-modal{background:#f6f7f9;border-radius:10px;width:min(92vw,1000px);max-height:88vh;padding:14px 18px;overflow:auto;box-shadow:0 8px 40px #0000004d}.dw-head{color:var(--accent);justify-content:space-between;margin-bottom:12px;font-size:15px;font-weight:600;display:flex}.dw-x{cursor:pointer;color:#999}.dw-views{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.dw-view{border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px}.dw-vtitle{text-align:center;color:#5a6b78;margin-bottom:4px;font-size:12px}.dw-dim{text-align:center;color:#2a7aa8;margin-top:3px;font-family:monospace;font-size:11px}.dw-foot{justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;display:flex}.dw-legend{color:#8a929a;margin-right:auto;font-size:12px}.help-modal{background:#fff;border-radius:10px;width:min(92vw,880px);max-height:88vh;padding:16px 20px;overflow:auto;box-shadow:0 8px 40px #0000004d}.help-grid{color:#3a4650;grid-template-columns:1fr 1fr;gap:18px;font-size:12.5px;line-height:1.5;display:grid}.help-grid h4{color:var(--accent);margin:10px 0 3px;font-size:13px}.help-grid p{margin:0 0 4px}.help-keys{margin:4px 0;padding:0;list-style:none}.help-keys li{margin:3px 0}.help-keys kbd{background:#eef1f4;border:1px solid #c7ccd2;border-radius:4px;padding:1px 6px;font-family:monospace;font-size:11px}.jp-title{color:var(--accent);margin-bottom:8px;font-weight:600}.jp-joint{border:1px solid var(--border-soft);border-radius:6px;margin-bottom:6px;padding:6px 8px}.jp-row{align-items:center;gap:6px;display:flex}.jp-row b{color:#333}.jp-type{color:#2a5c75;background:#eaf4fb;border:1px solid #b9def0;border-radius:9px;padding:0 7px}.jp-cc{color:var(--text-dim);flex:1;font-size:11px}.jp-drive{color:#555;align-items:center;gap:6px;margin-top:5px;display:flex}.jp-drive input[type=range]{flex:1}.jp-drive span{text-align:right;width:36px}.jp-lim{color:#888;align-items:center;gap:4px;margin-top:3px;font-size:11px;display:flex}.jp-lim input{border:1px solid var(--border-soft);border-radius:3px;width:48px;padding:1px 3px}.jp-add{border-top:1px solid var(--border-soft);flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;padding-top:8px;display:flex}.jp-add select{border:1px solid var(--border-soft);border-radius:4px;max-width:90px;padding:2px 4px;font-size:12px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{border:2px solid var(--panel);background:#c3c3c3;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#a9a9a9}