:root{--color-chrome:#242424;--color-bg:#1a1a1a;--color-panel:#2d2d2d;--color-canvas:#e8e8e8;--color-yellow:#f5a623;--color-purple:#8b5cf6;--color-text-primary:#fff;--color-text-secondary:#aaa;--color-text-muted:#666;--color-border:#ffffff14;--color-border-hover:#f5a62399;--glass-bg:#2d2d2db3;--glass-blur:blur(12px);--glass-border:#ffffff14;--toolbar-height:44px;--status-bar-height:28px;--data-panel-width:240px;--props-panel-width:240px}*{box-sizing:border-box}html,body{height:100%}html{overscroll-behavior:none;touch-action:none}body{overscroll-behavior:none;touch-action:none;background:var(--color-bg);color:var(--color-text-primary);margin:0;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif}button,input,select,textarea{font:inherit}#app{background:var(--color-bg);flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}#toolbar{z-index:250;width:100%;height:var(--toolbar-height);border-bottom:1px solid var(--color-border);background:var(--color-chrome);color:var(--color-text-primary);align-items:center;padding:0 8px;display:flex;position:relative}#toolbar button{height:100%;color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;padding:0 14px;font-size:13px;transition:color .15s,border-color .15s,background .15s}#toolbar button:hover,#toolbar button:focus-visible{color:var(--color-yellow);outline:none}.menu-wrapper:has(.dropdown-menu:not(.hidden))>#file-menu-btn{color:var(--color-yellow);outline:none}#toolbar:has(#algorithm-modal:not(.hidden)) #algorithm-menu-btn{color:var(--color-yellow);outline:none}#toolbar:has(#export-modal:not(.hidden)) #export-btn{color:var(--color-yellow);outline:none}#save-btn,#save-as-btn{color:var(--color-text-secondary)}#save-btn:hover,#save-as-btn:hover,#save-btn:focus-visible,#save-as-btn:focus-visible{color:var(--color-yellow)}#undo-btn,#redo-btn{color:var(--color-text-secondary);padding:0 10px;font-size:16px;transition:color .15s,opacity .15s}#undo-btn:not(:disabled):hover,#redo-btn:not(:disabled):hover,#undo-btn:not(:disabled):focus-visible,#redo-btn:not(:disabled):focus-visible{color:var(--color-yellow)}#undo-btn:disabled,#redo-btn:disabled{color:var(--color-text-muted);cursor:default;opacity:.3}#toolbar-right{align-items:center;gap:8px;height:100%;margin-left:auto;display:flex}#toolbar .toggle-btn{color:#ffffff8c;background:#ffffff0a;border:1px solid #ffffff40;border-radius:4px;min-width:82px;height:28px;padding:0 12px;font-size:12px}#toolbar .toggle-btn.active{border:1px solid var(--color-yellow);color:var(--color-yellow);background:#f5a6231a}#toolbar .toggle-btn:hover:not(:disabled),#toolbar .toggle-btn:focus-visible:not(:disabled){color:#ffffff8c;background:#ffffff0a;border-color:#ffffff40}#toolbar .toggle-btn.active:hover:not(:disabled),#toolbar .toggle-btn.active:focus-visible:not(:disabled){border-color:var(--color-yellow);color:var(--color-yellow);background:#f5a6231a}#toolbar .toggle-btn:disabled{color:var(--color-text-muted);opacity:.35}.menu-wrapper{height:100%;position:relative}#main{background:var(--color-bg);flex:1;min-height:0;display:flex}#data-panel,#properties-panel{color:var(--color-text-primary);-webkit-backdrop-filter:blur(12px);will-change:width;background:#2d2d2db3;border-right:1px solid #ffffff14;position:relative;overflow:visible}#data-panel{width:var(--data-panel-width,240px);min-width:var(--data-panel-width,240px);transition:width .2s,min-width .2s}#properties-panel{width:var(--props-panel-width,240px);min-width:var(--props-panel-width,240px);border-left:1px solid #ffffff14;border-right:none;transition:width .2s,min-width .2s}#data-panel.collapsed,#properties-panel.collapsed{width:28px!important;min-width:28px!important}#data-panel.animating,#properties-panel.animating{-webkit-backdrop-filter:none!important}#data-content,#props-content{width:100%;color:var(--color-text-primary);opacity:1;transition:opacity .15s}#data-content{flex-direction:column;height:100%;padding:0 0 28px;display:flex;overflow:hidden}#props-content{height:100%;padding:0 0 28px;overflow-y:auto}#data-panel.collapsed #data-content,#properties-panel.collapsed #props-content{opacity:0;pointer-events:none}#data-panel:not(.collapsed) #data-content,#properties-panel:not(.collapsed) #props-content{opacity:1;pointer-events:all}#data-panel.collapsed .resize-handle,#properties-panel.collapsed .resize-handle{display:none}.visuals-section{border:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:rgb(from var(--color-text-primary) r g b / .03);border-radius:6px;margin:6px 8px;padding:10px 12px;overflow:hidden}.visuals-section h4{color:var(--color-yellow);letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;font-size:10px;font-weight:600}.visuals-row{justify-content:space-between;align-items:center;gap:8px;min-width:0;margin-bottom:8px;display:flex;overflow:hidden}.visuals-row:last-child{margin-bottom:0}.visuals-row label,.radio-group-inline label,.trait-color-row label{color:var(--color-text-secondary);font-size:12px}.visuals-row input[type=number],.modal-dialog input[type=number]{border:1px solid var(--color-border);background:rgb(from var(--color-text-primary) r g b / .05);color:var(--color-text-primary);border-radius:4px}.visuals-row input[type=number]{width:60px;padding:3px 6px;font-size:12px}.visuals-row input[type=number]:focus,.modal-dialog input[type=number]:focus{border-color:var(--color-yellow);outline:none}.radio-group-inline{flex-flow:row;flex:0 auto;gap:6px;min-width:0;max-width:100%;display:flex;overflow:hidden}.radio-group-inline label{white-space:nowrap;cursor:pointer;align-items:center;gap:3px;min-width:0;font-size:11px;display:flex}input[type=radio]{accent-color:#8b5cf6}input[type=range]{appearance:none;accent-color:#8b5cf6;background:0 0;height:16px}input[type=range]::-webkit-slider-runnable-track{background:rgb(from var(--color-purple) r g b / .35);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{background:var(--color-purple);cursor:pointer;-webkit-appearance:none;border:0;border-radius:50%;width:14px;height:14px;margin-top:-5px}input[type=range]::-moz-range-track{background:rgb(from var(--color-purple) r g b / .35);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--color-purple);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--color-purple);cursor:pointer;border:0;border-radius:50%;width:14px;height:14px}input[type=color]{border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:3px;width:40px;height:24px;padding:0}input[type=color]:hover,input[type=color]:focus-visible{border-color:var(--color-yellow);outline:none}.slider-with-value{align-items:center;gap:8px;display:flex}.slider-with-value input[type=range]{width:100px}.slider-with-value span{min-width:28px;color:var(--color-text-secondary);text-align:right;font-size:11px}.trait-color-row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;display:flex}.trait-color-row label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.trait-color-row input[type=color]{flex-shrink:0}.visuals-placeholder{color:var(--color-text-secondary);margin:0;font-size:11px;font-style:italic}.panel-collapse-strip{z-index:20;border-top:1px solid var(--color-border);height:28px;color:var(--color-text-muted);cursor:pointer;background:#2d2d2db3;justify-content:center;align-items:center;font-size:18px;transition:color .15s,background .15s;display:flex;position:absolute;bottom:0;left:0;right:0}.panel-collapse-strip:hover,.panel-collapse-strip:focus-visible{background:rgb(from var(--color-yellow) r g b / .05);color:var(--color-yellow);outline:none}#data-panel.collapsed .panel-collapse-strip,#properties-panel.collapsed .panel-collapse-strip{background:#2d2d2de6;position:absolute;bottom:0;left:0;right:0}.collapse-chevron{line-height:1}.resize-handle{z-index:10;cursor:ew-resize;background:0 0;flex-shrink:0;width:4px;position:absolute;top:0;bottom:0}.resize-handle:hover{background:rgb(from var(--color-yellow) r g b / .3)}#data-resize-handle{right:0}#data-tabs{border-bottom:1px solid var(--color-border);align-self:flex-start;width:auto;display:flex}.tab-btn{width:120px;height:32px;color:var(--color-text-secondary);text-align:center;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:0 0 120px;padding:0;font-size:12px;font-weight:400}.tab-btn:hover,.tab-btn:focus-visible{color:var(--color-yellow);outline:none}.tab-btn.active{border-bottom:2px solid var(--color-yellow);color:var(--color-yellow);background:0 0}.tab-content{flex:1;min-height:0;overflow:hidden}.data-placeholder{color:var(--color-text-secondary);margin:16px;font-size:12px}.traits-tree{height:100%;font-size:12px;overflow:auto}.trait-header-row,.trait-row,.trait-child-row{border-bottom:1px solid var(--color-border);grid-template-columns:20px minmax(0,1fr) 82px 76px;align-items:center;height:22px;display:grid}.trait-header-row{z-index:1;background:var(--glass-bg);color:var(--color-text-muted);letter-spacing:.5px;text-transform:uppercase;-webkit-backdrop-filter:var(--glass-blur);font-size:10px;font-weight:600;position:sticky;top:0}.trait-row{color:var(--color-text-primary);font-weight:600}.trait-row:hover,.trait-child-row:hover{background:rgb(from var(--color-text-primary) r g b / .03)}.trait-child-row,.trait-child-row.alternate{color:var(--color-text-secondary);font-weight:400}.trait-toggle,.trait-toggle-header,.trait-child-spacer{width:20px}.trait-toggle{height:22px;color:var(--color-yellow);cursor:pointer;background:0 0;border:0;padding:0}.trait-toggle:disabled{cursor:default;opacity:.4}.trait-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:0 6px 0 4px;overflow:hidden}.trait-child-row .trait-name{padding-left:24px}.trait-count{color:var(--color-text-secondary);text-align:right;text-overflow:ellipsis;white-space:nowrap;padding-right:6px;overflow:hidden}.trait-header-row .trait-count{color:var(--color-text-muted);text-align:center;padding-right:0}#tab-content-alignment{width:100%;height:100%;position:relative;overflow:auto}.alignment-table{border-collapse:collapse;display:table}.alignment-row{display:table-row}.alignment-name{color:#aaa;text-align:right;white-space:nowrap;z-index:2;background:#2d2d2d;width:48px;min-width:48px;padding-right:8px;font-family:monospace;font-size:11px;line-height:16px;display:table-cell;position:sticky;left:0}.alignment-sequence{white-space:nowrap;padding-left:4px;font-family:monospace;font-size:11px;line-height:16px;display:table-cell}.nuc-a{color:#2196f3}.nuc-t{color:#fbc02d}.nuc-g{color:#f44336}.nuc-c{color:#4caf50}.nuc-gap{color:#9e9e9e}#viewport{touch-action:none;overscroll-behavior:none;overscroll-behavior-x:none;background:var(--color-canvas);border:2px solid #0000;flex:1;width:100%;height:100%;position:relative;overflow:hidden}#viewport.pan-ready{cursor:grab}#viewport.panning{cursor:grabbing}#viewport.pan-mode{cursor:grab}#viewport.pan-mode:active{cursor:grabbing}#svg-container{touch-action:none;background:var(--color-canvas);width:100%;height:100%;color:var(--color-text-muted);text-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;overflow:hidden}#svg-container p{color:var(--color-text-muted);margin:0;font-size:14px}.canvas-empty-state{color:var(--color-text-muted);font-size:14px}#viewport.file-drop-active,#viewport.file-drop-active #svg-container{background:#ded9cc}#viewport.file-drop-active:after{z-index:5;border:2px dashed var(--color-yellow);content:"";pointer-events:none;border-radius:6px;position:absolute;inset:14px}#viewport.file-drop-active .canvas-empty-state{z-index:6;color:var(--color-yellow);background:#242424e6;border:1px solid #f5a623a6;border-radius:4px;padding:12px 18px;position:relative;box-shadow:0 10px 30px #0000002e}#svg-container svg{width:100%;height:100%;display:block}svg{-webkit-user-select:none;user-select:none}text{pointer-events:none;-webkit-user-select:none;user-select:none}#zoom-controls{gap:4px;display:flex;position:absolute;bottom:16px;right:16px}#zoom-controls button{border:1px solid var(--color-border);background:rgb(from var(--color-chrome) r g b / .7);min-width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;-webkit-backdrop-filter:blur(4px);border-radius:4px;transition:color .15s,border-color .15s}#zoom-controls button:hover,#zoom-controls button:focus-visible{border-color:var(--color-yellow);color:var(--color-yellow);outline:none}#zoom-controls #pan-mode-btn.active{border-color:var(--color-yellow);background:rgb(from var(--color-chrome) r g b / .7);color:var(--color-yellow)}#status-bar{width:100%;height:var(--status-bar-height);border-top:1px solid var(--color-border);background:var(--color-chrome);color:var(--color-text-secondary);align-items:center;font-size:11px;display:flex}#status-bar span{border-right:1px solid var(--color-border);white-space:nowrap;align-items:center;height:100%;padding:0 12px;display:flex}#status-bar span:last-child{border-right:0}#progress-overlay{z-index:300;-webkit-backdrop-filter:blur(6px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.progress-dialog{color:#fff;text-align:center;background:#141414f2;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;align-items:center;gap:16px;min-width:320px;padding:32px 40px;display:flex;box-shadow:0 8px 32px #0006}#progress-stage-label{min-height:20px;color:var(--color-text-primary);margin:0;font-size:14px}#progress-dots{text-align:left;width:16px;display:inline-block}#progress-bar-container{background:rgb(from var(--color-text-primary) r g b / .1);border-radius:3px;width:280px;height:6px;position:relative;overflow:hidden}#progress-bar-fill{background:#8b5cf6;border-radius:3px;width:0%;height:100%;transition:width .3s;position:absolute;top:0;bottom:0;left:0}#progress-cancel{border:1px solid var(--color-border);background:rgb(from var(--color-text-primary) r g b / .05);color:var(--color-text-secondary);cursor:pointer;border-radius:6px;margin-top:4px;padding:6px 20px;font-size:12px}#progress-cancel:hover,#progress-cancel:focus-visible{border-color:var(--color-purple);color:var(--color-purple);outline:none}.vertex.selected .selection-ring{stroke:var(--color-yellow);stroke-width:3px;fill:none}.vertex-label{cursor:default;-webkit-user-select:none;user-select:none;pointer-events:all!important}.labels-hidden .vertex-label{display:none}.edge.selected line{stroke:var(--color-yellow);stroke-width:3px}.rubber-band{fill:#f5a6231a;stroke:var(--color-yellow);stroke-width:1px}.legend-bg{fill:#fff;fill-opacity:.85;stroke:#ccc;stroke-width:1px;rx:4}.legend-title{fill:#666;letter-spacing:.5px;text-transform:uppercase;font-size:10px;font-weight:600}.legend-size-circle{fill:#e0e0e0;stroke:#999;stroke-width:1px}#network-legend{cursor:move}.hidden{display:none!important}.warning{color:var(--color-yellow)}.dropdown-menu{z-index:200;border:1px solid var(--color-border);background:rgb(from var(--color-chrome) r g b / .95);min-width:180px;color:var(--color-text-primary);box-shadow:0 4px 20px rgb(from var(--color-chrome) r g b / .4);-webkit-backdrop-filter:blur(12px);border-radius:8px;position:absolute;top:100%;left:0}#toolbar .dropdown-menu button{width:100%;height:auto;color:var(--color-text-primary);text-align:left;background:0 0;padding:8px 12px;display:block}#toolbar .dropdown-menu button:hover,#toolbar .dropdown-menu button:focus-visible{background:rgb(from var(--color-yellow) r g b / .1);color:var(--color-yellow)}.dropdown-menu hr{border:0;border-top:1px solid var(--color-border);margin:4px 0}.modal-overlay{z-index:300;-webkit-backdrop-filter:blur(6px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog{color:#fff;background:#141414f2;border:1px solid #ffffff14;border-radius:12px;gap:16px;width:auto;min-width:300px;max-width:min(600px,90vw);padding:24px;display:grid;box-shadow:0 8px 32px #0006}.modal-dialog h2,.modal-dialog h3{color:var(--color-yellow);margin:0;font-size:18px}.modal-dialog p{word-break:break-word;overflow-wrap:break-word;max-width:100%}.modal-dialog fieldset{border:1px solid var(--color-border);border-radius:8px;gap:8px;margin:0;padding:12px;display:grid}.modal-dialog legend{color:var(--color-text-secondary)}.modal-dialog label{color:var(--color-text-secondary);align-items:center;gap:8px;display:flex}.modal-dialog input[type=number]{width:96px;padding:4px 8px}.help-dialog{flex-direction:column;width:90vw;max-width:680px;max-height:80vh;padding:0;display:flex;overflow:hidden}.help-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 24px 0;display:flex}.help-header h3{color:#f5a623;margin:0;font-size:16px}#help-close{color:#aaa;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:18px}#help-close:hover{color:#f5a623}.help-tabs{border-bottom:1px solid #ffffff14;flex-wrap:wrap;flex-shrink:0;gap:2px;padding:12px 24px 0;display:flex}.help-tab{color:#aaa;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 12px;font-size:12px}.help-tab:hover{color:#fff}.help-tab.active{color:#f5a623;border-bottom:2px solid #f5a623}.help-content{color:#ccc;flex:1;padding:20px 24px;font-size:13px;line-height:1.6;overflow-y:auto}.help-content h4{color:#f5a623;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;font-size:12px}.help-content h4:first-child{margin-top:0}.help-content p{color:#aaa;margin:0 0 12px}.help-content ol,.help-content ul{color:#aaa;margin:0 0 12px 16px}.help-content a{color:#f5a623;text-decoration:none}.help-content a:hover{text-decoration:underline}.help-table{border-collapse:collapse;width:100%;margin-bottom:12px;font-size:12px}.help-table th{text-align:left;color:#f5a623;border-bottom:1px solid #ffffff1a;padding:6px 8px;font-weight:600}.help-table td{color:#aaa;border-bottom:1px solid #ffffff0d;padding:6px 8px}.help-citation{color:#aaa;background:#ffffff08;border:1px solid #ffffff14;border-radius:6px;margin-bottom:10px;padding:12px;font-size:12px;line-height:1.6}.help-citation strong{color:#fff;margin-bottom:4px;display:block}#toolbar .help-dialog button{height:auto}#toolbar #help-close{color:#aaa;border-radius:4px;min-height:0;padding:4px 8px;font-size:18px}#toolbar #help-close:hover{color:#f5a623}#toolbar .help-tab{color:#aaa;border-bottom:2px solid #0000;border-radius:0;min-height:0;padding:6px 12px;font-size:12px}#toolbar .help-tab:hover{color:#fff}#toolbar .help-tab.active{color:#f5a623;border-bottom:2px solid #f5a623}.modal-actions{justify-content:flex-end;gap:8px;display:flex}#toolbar .modal-dialog button,.modal-dialog button{cursor:pointer;border-radius:6px;min-height:32px;padding:0 12px}#algorithm-ok,#export-confirm,#restore-confirm,#sitemask-ok,#unsaved-save,#toolbar #algorithm-ok,#toolbar #export-confirm,#toolbar #restore-confirm,#toolbar #sitemask-ok,#toolbar #unsaved-save{background:var(--color-yellow);color:var(--color-chrome);border:none;font-weight:600}#algorithm-cancel,#export-cancel,#restore-cancel,#unsaved-cancel,#toolbar #algorithm-cancel,#toolbar #export-cancel,#toolbar #restore-cancel,#toolbar #unsaved-cancel{border:1px solid var(--color-border);background:rgb(from var(--color-text-primary) r g b / .05);color:var(--color-text-secondary)}#algorithm-cancel:hover,#export-cancel:hover,#restore-cancel:hover,#unsaved-cancel:hover,#toolbar #algorithm-cancel:hover,#toolbar #export-cancel:hover,#toolbar #restore-cancel:hover,#toolbar #unsaved-cancel:hover{border-color:var(--color-yellow);color:var(--color-yellow)}#unsaved-discard,#toolbar #unsaved-discard{border:1px solid var(--color-border);background:rgb(from var(--color-text-primary) r g b / .05);color:var(--color-text-secondary)}#unsaved-discard:hover,#toolbar #unsaved-discard:hover{border-color:var(--color-yellow);color:var(--color-yellow)}.sitemask-dialog,.unsaved-dialog{text-align:center;padding:20px 24px}.sitemask-dialog{max-width:520px}.unsaved-dialog{max-width:420px}.sitemask-dialog p,.unsaved-dialog p{color:var(--color-text-secondary);margin:0;font-size:14px}.sitemask-dialog .modal-actions,.unsaved-dialog .modal-actions{justify-content:center}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:rgb(from var(--color-text-primary) r g b / .15);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgb(from var(--color-yellow) r g b / .4)}
