body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}.topbar{height:76px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 25px;gap:36px;background:var(--surface)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);font-size:17px;font-weight:650;letter-spacing:-.55px;min-width:239px}.brand b{font-weight:400;color:#7a879b}.brand small{display:block;color:var(--muted);letter-spacing:1.7px;font-size:7px;font-weight:550;margin-top:5px}.brand-icon{display:grid;place-items:center;width:37px;height:39px;border-radius:11px;background:var(--accent);color:#fff}.brand-icon svg{width:27px;height:27px;stroke:currentColor;fill:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.file-actions{display:flex;align-items:center;gap:3px}.file-actions button{font-size:11px}.topbar-end{margin-left:auto;display:flex;gap:10px;align-items:center}.save-status{font-size:10px;color:#9aa4b4;margin-right:9px;white-space:nowrap}.save-status i{display:inline-block;width:5px;height:5px;background:#7baf9a;border-radius:50%;margin-right:5px}.export-button{font-size:11px;min-width:100px;min-height:35px}.chevron{margin-left:10px;opacity:.7}.projectbar{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface);gap:10px}.project-heading,.view-actions{display:flex;align-items:center;gap:10px}.breadcrumb{font-size:8px;font-weight:600;letter-spacing:1.1px;color:#9ba5b6;white-space:nowrap}.breadcrumb span{margin-left:10px;color:#c5cbd6}#project-name{font-size:12px;font-weight:550;width:248px;border-color:transparent;padding:6px}#project-name:hover{border-color:var(--line)}.project-type{font-size:7px;letter-spacing:.8px;background:#f1f4f8;padding:5px 6px;color:#8793a6;border-radius:3px;white-space:nowrap}.view-actions button{font-size:10px;color:#7d899c;gap:6px}.view-actions .icon{width:15px;height:15px}.editor{display:grid;grid-template-columns:226px minmax(0,1fr) 274px;min-height:0;flex:1}.sidebar{background:var(--surface);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.left-sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;color:#97a2b3;font-size:8px;letter-spacing:1.3px;font-weight:600;padding:23px 21px 14px}.mini-badge{font-size:8px;letter-spacing:0;border:1px solid var(--line);border-radius:3px;padding:2px 4px;color:#a8b1bf}.tools{padding:0 13px 19px}.tool{display:flex;justify-content:flex-start;width:100%;font-size:11px;min-height:36px;padding:8px 10px;gap:10px;margin:2px 0;color:#6f7d93;border-radius:5px}.tool .icon{width:16px;height:16px}.tool.active{color:var(--accent);background:var(--soft);font-weight:600}.tool kbd{margin-left:auto;font-size:8px;border-color:transparent;font-weight:400}.tool.active kbd{background:#fff9;color:#82a0dc;border-color:#dfe7fa}.tool-divider{height:1px;background:var(--line);margin:10px 6px}.sidebar-section{padding:20px;border-top:1px solid var(--line)}.sidebar-section h2{font-size:12px}.sidebar-section .small{font-size:10px}.bag-list{margin-top:15px}.bag-row{display:flex;align-items:center;gap:8px;margin:10px 0}.bag-row input[type=color]{width:19px;height:19px;border:0;padding:0;border-radius:50%;background:transparent;overflow:hidden}.bag-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.bag-row input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.bag-row input.bag-label{border-color:transparent;padding:4px 0;font-size:11px;flex:1;width:50px}.bag-row input.bag-quantity{width:43px;padding:5px 4px;text-align:center;font-size:11px;height:28px}.bag-row .remove-color{padding:2px;width:18px;min-height:24px;color:#a0aaba;font-size:15px}.replacement-options{padding:0;border:0;margin:13px 0 18px}.replacement-options legend{font-size:10px;color:#7c899b;margin-bottom:10px}.replacement-options label{display:flex;align-items:center;gap:7px;font-size:10px;color:#6b798e;margin:9px 0}.replacement-options input{margin:0;width:12px;height:12px}.sidebar-section .field label{font-size:10px}.sidebar-section .field input{font-size:11px;padding:7px 9px}.sidebar-section .primary{font-size:10px;min-height:35px}.sidebar-section .primary .icon{width:14px}.compact-section{padding:12px 21px}.sidebar-bottom{margin-top:auto;padding:24px 21px;display:flex;gap:9px;align-items:flex-start}.sidebar-bottom p{font-size:9px;line-height:1.8;color:#8895a8}.tiny-marble{width:7px;height:7px;border:2px solid #b1c4e9;border-radius:50%;margin-top:4px}.workspace{position:relative;overflow:hidden;background-color:var(--canvas);background-image:radial-gradient(var(--grid) .8px,transparent .8px);background-size:20px 20px}.workspace.no-grid{background-image:none}#tree-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-4px;user-select:none}.canvas-toolbar{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}.canvas-toolbar>*{pointer-events:auto}.segmented{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px;box-shadow:0 2px 4px #253c5d03}.segmented button{font-size:10px;min-height:28px;padding:5px 10px;gap:6px;color:#8893a5;border-radius:4px}.segmented .icon{width:13px;height:13px}.segmented button.active{background:var(--soft);color:var(--accent);font-weight:600}.canvas-options{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px}.canvas-options button{font-size:9px;min-height:28px;padding:5px 7px;color:#77869b;gap:5px}.canvas-options .icon{width:14px;height:14px}.canvas-options button[aria-pressed=false]{opacity:.45}.canvas-caption{position:absolute;top:91px;left:31px;z-index:1;pointer-events:none}.canvas-caption .eyebrow{font-size:7px;letter-spacing:1.8px;color:#98a5b9}.canvas-caption h1{font-size:24px;font-weight:450;letter-spacing:-.9px;color:#44536a;margin:7px 0}.canvas-caption p{font-size:10px;color:#95a1b4}.workspace-bottom{position:absolute;bottom:20px;left:22px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2;pointer-events:none}.workspace-bottom>*{pointer-events:auto}.canvas-hint{display:flex;gap:7px;align-items:center;font-size:8px;color:#98a4b6;background:var(--canvas);padding:5px}.canvas-hint .icon{width:12px;height:12px}.zoom-controls{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px;box-shadow:0 2px 8px #253c5d05}.zoom-controls button{min-height:28px;min-width:28px;padding:4px 7px;font-size:15px;color:#77869b}.zoom-controls #zoom-label{font-size:9px;min-width:47px}.zoom-controls .separator{height:15px;margin:0 2px}.zoom-controls .icon{width:14px}.right-sidebar{border-left:1px solid var(--line);display:flex;flex-direction:column}.right-tabs{display:flex;padding:0 20px;border-bottom:1px solid var(--line);gap:21px;min-height:54px;flex-shrink:0}.right-tabs button{font-size:10px;color:#94a0b1;border-radius:0;padding:18px 0 14px;border-bottom:2px solid transparent;min-height:54px}.right-tabs button.active{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}.inspector-section{padding:23px 21px;border-bottom:1px solid var(--line)}.inspector-section h2{font-size:12px}.selected-preview{display:flex;align-items:center;gap:11px;margin:18px 0}.selected-preview .marble-circle{width:35px;height:35px;border-radius:50%;box-shadow:inset 0 0 0 5px #ffffff26}.selected-preview strong{display:block;font-size:13px;font-weight:550}.selected-preview small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.inspector-section .field{margin:14px 0}.inspector-section input,.inspector-section select{font-size:11px}.subtle-icon{color:#b1bdcd}.subtle-icon .icon{width:15px;height:15px}.calculation-panel{padding:23px 21px}.calculation-panel h2{font-size:12px}.path-crumb{font-size:10px;color:#7b8ba3;line-height:1.8;margin:17px 0 12px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}.path-crumb i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px}.path-crumb .path-arrow{color:#b0bbcb;margin:0 2px}.formula-box{background:var(--canvas);border:1px solid var(--line);padding:14px 10px;border-radius:7px;overflow-wrap:anywhere}.formula-box .math-line{justify-content:center;color:#657795;font-size:12px}.formula-box .formula-label{color:#98a4b6;font-size:8px;letter-spacing:.9px;text-transform:uppercase;display:block;margin-bottom:12px}.result-card{margin-top:13px;padding:19px 14px;background:var(--soft);border:1px solid #dce6fc;border-radius:7px;position:relative}.result-card>small{display:block;font-size:8px;letter-spacing:1px;color:#7897cc}.result-percentage{font-size:32px;font-weight:500;letter-spacing:-1.4px;color:var(--accent);line-height:1.5}.result-percentage span{font-size:16px;margin-left:2px;letter-spacing:0}.result-detail{font-size:9px;color:#7d98c6;display:flex;justify-content:space-between;align-items:center}.calculation-tip{display:flex;gap:7px;margin-top:17px;color:#a0aaba;font-size:9px;line-height:1.8}.calculation-tip .icon{width:13px;height:13px;flex-shrink:0;margin-top:2px}.inspector-footer{margin-top:auto;padding:20px;display:flex;align-items:center;gap:7px;color:#a7b1bf;font-size:8px}.inspector-footer .icon{width:12px;height:12px}.statusbar{height:29px;flex-shrink:0;display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);padding:0 20px;color:#9aa5b5;background:var(--surface);font-size:8px}.statusbar>div{display:flex;align-items:center;gap:9px}.status-dot{width:5px;height:5px;border-radius:50%;background:#7ba997}.status-divider{color:#d1d7e1}.presentation-exit{display:none}.editor.left-collapsed{grid-template-columns:0 minmax(0,1fr) 274px}.editor.right-collapsed{grid-template-columns:226px minmax(0,1fr) 0}.editor.left-collapsed.right-collapsed{grid-template-columns:0 minmax(0,1fr) 0}.left-collapsed .left-sidebar,.right-collapsed .right-sidebar{visibility:hidden;overflow:hidden}.presentation .topbar,.presentation .projectbar,.presentation .sidebar,.presentation .statusbar,.presentation .canvas-toolbar,.presentation .canvas-caption,.presentation .canvas-hint{display:none}.presentation .editor{display:block}.presentation .workspace{height:100%}.presentation-exit{position:absolute;top:20px;right:20px;z-index:4}.presentation .presentation-exit{display:block}.presentation-exit button{background:var(--surface);border:1px solid var(--line);font-size:11px}
/* SVG elements are reconciled individually as the diagram changes. */
.tree-edge{fill:none;stroke:#b8c6da;stroke-width:1.3}.tree-edge.selected,.tree-edge.highlighted{stroke:var(--accent);stroke-width:2.6}.edge-hit{fill:none;stroke:transparent;stroke-width:18;cursor:pointer}.node-body{fill:var(--surface);stroke:#dbe3ef;stroke-width:1.2;rx:9}.tree-node{cursor:grab}.tree-node:active{cursor:grabbing}.tree-node.selected .node-body{stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 2px 4px #386bd614)}.node-label{fill:var(--text);font-size:12px;font-weight:550;pointer-events:none}.tree-node.root .node-body{fill:var(--navy);stroke:var(--navy)}.tree-node.root .node-label{fill:#fff}.node-dot{stroke:#fff;stroke-width:2}.branch-label-bg{fill:var(--canvas);stroke:none}.branch-label-text,.fraction-text{fill:#8494ad;font-size:11px;text-anchor:middle}.fraction-line{stroke:#91a0b6;stroke-width:.85}.branch-label .event-label{font-size:9px;fill:#8796ad}.collapse-button circle{fill:var(--surface);stroke:#cdd8e8}.collapse-button text{fill:#8a9bb6;font-size:12px;text-anchor:middle}.collapse-button{cursor:pointer}.selection-rect{fill:#386bd613;stroke:#386bd6;stroke-dasharray:4 3;stroke-width:1}.tree-node:focus{outline:none}.tree-node:focus .node-body{stroke:var(--accent);stroke-width:3}
.branch-line{fill:none;stroke:#b8c6da;stroke-width:1.35}.tree-branch.selected .branch-line,.tree-branch.highlighted .branch-line{stroke:var(--accent);stroke-width:2.5}.branch-hit{cursor:pointer}.node-shadow{fill:#253c5d03}.node-box{fill:var(--surface);stroke:#dbe3ef;stroke-width:1.2}.tree-node.root-node .node-box{fill:var(--navy);stroke:var(--navy)}.tree-node.root-node .node-label{fill:#fff}.tree-node.selected .node-box{stroke:var(--accent);stroke-width:2}.node-marble{stroke:#fff7;stroke-width:1}.node-label{font-size:inherit}.node-collapse{cursor:pointer}.node-collapse circle{fill:var(--surface);stroke:#d3ddeb;stroke-width:1}.node-collapse text{fill:#879bb9;font-size:11px}.fraction-background{fill:var(--canvas)}.fraction-numerator,.fraction-denominator,.fraction-unspecified{fill:#8091ac;font-size:11px}.fraction-divider{stroke:#8d9cb2;stroke-width:.8}.branch-event-label{fill:#8494ad;font-size:9px}.tree-branch.highlighted .fraction-numerator,.tree-branch.highlighted .fraction-denominator{fill:var(--accent)}.tree-branch.highlighted .fraction-divider{stroke:var(--accent)}.selection-marquee{fill:#386bd614;stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3}.tree-node:focus .node-box{stroke:var(--accent);stroke-width:3}.is-panning,.pan-ready{cursor:grab!important}
@media(min-width:1600px){.editor{grid-template-columns:245px minmax(0,1fr) 300px}.canvas-caption{top:105px;left:40px}.canvas-caption h1{font-size:28px}.sidebar-section{padding:23px}.inspector-section,.calculation-panel{padding:25px}}
@media(max-width:1150px){.topbar{gap:15px;padding:0 16px}.brand{min-width:210px;font-size:15px}.save-status{display:none}.editor{grid-template-columns:205px minmax(0,1fr) 248px}.sidebar-section{padding:17px}.inspector-section,.calculation-panel{padding:19px 17px}.canvas-caption h1{font-size:21px}.canvas-caption{left:25px}.canvas-hint{display:none}.workspace-bottom{justify-content:flex-end}.breadcrumb{display:none}.project-type{display:none}.editor.left-collapsed{grid-template-columns:0 minmax(0,1fr) 248px}.editor.right-collapsed{grid-template-columns:205px minmax(0,1fr) 0}}
@media(max-width:900px){.editor{grid-template-columns:190px minmax(0,1fr) 0}.right-sidebar{visibility:hidden;overflow:hidden}.editor.right-collapsed{grid-template-columns:190px minmax(0,1fr) 248px}.editor.right-collapsed .right-sidebar{visibility:visible;overflow:auto}.editor.left-collapsed{grid-template-columns:0 minmax(0,1fr) 0}.editor.left-collapsed.right-collapsed{grid-template-columns:0 minmax(0,1fr) 248px}.topbar{height:64px}.brand{min-width:190px}.brand small{font-size:6px}.file-actions .button-text{display:none}.topbar-end{gap:2px}.topbar-end .export-button{min-width:80px}.canvas-toolbar{left:13px;right:13px}.view-actions .button-text{display:none}.projectbar{height:48px;padding:0 10px}#project-name{width:220px}.right-tabs{padding:0 14px;gap:18px}.sidebar-section{padding:15px}.tool{font-size:10px}.sidebar-heading{padding-left:20px}.canvas-caption{top:87px}.canvas-options .button-text{display:none}}
@media(max-width:620px){.topbar{padding:0 10px;gap:6px;height:60px}.brand{min-width:0;font-size:13px;gap:7px}.brand small{display:none}.brand-icon{width:29px;height:31px;border-radius:8px}.brand-icon svg{width:23px}.brand b{display:none}.file-actions{margin-left:auto;gap:0}.file-actions button{padding:6px;width:30px}.file-actions .separator{margin:0 1px}.file-actions button[data-action=new],.file-actions button[data-action=open]{display:none}.topbar-end{margin-left:2px}.topbar-end>[data-action=settings]{display:none}.export-button{font-size:10px;min-width:67px!important;padding:7px;gap:5px}.export-button .chevron{display:none}.export-button .icon{width:13px}.projectbar{height:46px}.project-heading{gap:2px;min-width:0}#project-name{width:172px;font-size:10px}.view-actions{gap:0}.view-actions button{padding:6px;width:30px}.editor{display:block;position:relative}.left-sidebar,.right-sidebar{position:absolute;top:0;bottom:0;width:235px;z-index:6;box-shadow:4px 0 18px #23375414}.left-sidebar{left:0;display:none}.right-sidebar{right:0;display:none}.left-collapsed .left-sidebar{display:flex;visibility:visible;overflow:auto}.right-collapsed .right-sidebar{display:flex;visibility:visible;overflow:auto}.workspace{height:100%}.canvas-caption{top:85px;left:20px}.canvas-caption h1{font-size:22px}.canvas-caption p{font-size:9px}.canvas-toolbar{top:13px;left:12px;right:12px}.segmented button{font-size:9px;padding:4px 7px}.canvas-options button{padding:4px 6px}.canvas-options{gap:0}.statusbar{padding:0 10px;height:27px;font-size:7px}.statusbar>div:last-child>span:last-child,.statusbar>div:last-child .status-divider{display:none}.statusbar>div{gap:6px}.workspace-bottom{bottom:15px;right:13px}.template-grid{gap:8px}.template-card{padding:13px 11px}dialog{padding:20px}.sidebar-bottom{padding:19px}.right-sidebar .inspector-section{padding:16px}.right-sidebar .calculation-panel{padding:16px}.topbar .icon{width:15px;height:15px}}
.detail-notice{position:absolute;bottom:65px;left:22px;max-width:calc(100% - 44px);padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--muted);font-size:11px;pointer-events:none}.right-tabs{position:sticky;top:0;background:var(--surface);z-index:2}.mobile-menu{display:none}.bag-row input.bag-label{width:50px!important;flex:1;min-width:40px}.bag-row input.bag-quantity{width:43px!important;flex:0 0 43px}.bag-row input[type=color]{flex:0 0 19px}.tool{font-size:12px}.sidebar-section h2,.inspector-section h2,.calculation-panel h2{font-size:13px}.replacement-options label,.sidebar-section .field label,.sidebar-section .small,.section-link,.bag-row input.bag-label,.sidebar-section .primary{font-size:11px}.canvas-hint,.statusbar{font-size:10px}.canvas-caption p{font-size:11px}.right-tabs button{font-size:11px}.field label,.field-label{color:#697a92}.muted{color:#728198}.calculation-tip{font-size:10px}.result-detail{font-size:10px}.sidebar-bottom p{font-size:10px}
@media(max-width:620px){.mobile-menu{display:flex}.projectbar{height:52px}.view-actions [data-action=help]{display:none}.view-actions button,.project-heading .icon-button{width:40px;min-height:42px}.file-actions button{width:34px;min-height:42px}.topbar{height:66px}.tool,.section-link{min-height:44px}.canvas-toolbar button{min-height:36px}.zoom-controls button{min-width:36px;min-height:36px}#project-name{width:153px}.replacement-options label{min-height:32px}.bag-row input.bag-quantity{height:35px}.bag-row .remove-color{min-height:35px;min-width:25px}.statusbar{font-size:9px}.statusbar>div:last-child{display:none}.template-card{min-height:110px}.sidebar{width:250px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{body{height:auto;overflow:visible;background:white}.topbar,.projectbar,.sidebar,.statusbar,.canvas-toolbar,.workspace-bottom,.canvas-caption,.presentation-exit,dialog,#toast{display:none!important}.editor{display:block;height:auto}.workspace{background:white;height:90vh;overflow:visible}#tree-canvas{position:relative;width:100%;height:90vh}}