:root,[data-theme=dark]{color-scheme:dark;--color-brand-gold: #ffd700;--color-brand-gold-soft: rgba(255, 215, 0, .2);--color-brand-green: #10b981;--color-brand-green-soft: rgba(5, 150, 105, .2);--color-brand-red: #ef4444;--color-brand-red-soft: rgba(239, 68, 68, .2);--color-brand-blue: #3b82f6;--color-brand-blue-soft: rgba(59, 130, 246, .18);--color-brand-cyan: #06b6d4;--color-brand-teal: #14b8a6;--color-brand-purple: #a855f7;--color-brand-lime: #84cc16;--color-bg-canvas: #0a0c10;--color-bg-surface: #0d0f14;--color-bg-surface-muted: #111820;--color-bg-surface-strong: #161922;--color-bg-elevated: rgba(17, 24, 39, .9);--color-bg-overlay: rgba(13, 15, 20, .98);--color-bg-glass: rgba(17, 24, 39, .6);--color-bg-panel-hover: rgba(255, 255, 255, .05);--color-bg-subtle: rgba(255, 255, 255, .025);--color-bg-subtle-strong: rgba(255, 255, 255, .04);--color-bg-grid-dot: rgba(255, 255, 255, .07);--color-bg-grid-dot-soft: rgba(255, 255, 255, .04);--color-backdrop: rgba(0, 0, 0, .5);--color-text-primary: #f0f0f0;--color-text-secondary: #d1d5db;--color-text-tertiary: #a1a1aa;--color-text-muted: #71717a;--color-text-subtle: #52525b;--color-text-inverse: #111827;--color-border-subtle: rgba(48, 54, 61, .5);--color-border-default: rgba(55, 65, 81, .5);--color-border-muted: rgba(55, 65, 81, .35);--color-border-soft: rgba(55, 65, 81, .25);--color-border-faint: rgba(55, 65, 81, .16);--color-border-hover: rgba(75, 85, 99, .6);--color-border-strong: rgba(75, 85, 99, .5);--color-accent-primary: var(--color-brand-gold);--color-accent-primary-soft: var(--color-brand-gold-soft);--color-success: var(--color-brand-green);--color-success-soft: var(--color-brand-green-soft);--color-danger: var(--color-brand-red);--color-danger-soft: var(--color-brand-red-soft);--color-info: var(--color-brand-blue);--color-info-soft: var(--color-brand-blue-soft);--color-focus-ring: var(--color-brand-green);--zone-ranged: #22c55e;--zone-magic: #3b82f6;--zone-melee: #ef4444;--zone-regeneration: #84cc16;--zone-accuracy: #06b6d4;--zone-defence: #14b8a6;--zone-prayer: #a855f7;--zone-general: #9ca3af;--color-node-highlight: rgba(229, 231, 235, .28);--color-node-selection: rgba(255, 215, 0, .28);--color-node-selection-stroke: transparent;--node-selection-stroke-width: 0;--color-connection-default: #71717a;--color-connection-related: #d1d5db;--color-connection-selected: var(--color-accent-primary);--connection-selected-opacity: .9;--connection-selected-width: 2.5;--connection-default-opacity: .55;--connection-related-opacity: .9;--connection-dim-opacity: .08;--bg-primary: var(--color-bg-canvas);--bg-secondary: var(--color-bg-surface-muted);--bg-tertiary: var(--color-bg-surface-strong);--bg-elevated: var(--color-bg-elevated);--border-subtle: var(--color-border-subtle);--border-default: var(--color-border-default);--border-hover: var(--color-border-hover);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--text-tertiary: var(--color-text-tertiary);--text-muted: var(--color-text-muted);--text-subtle: var(--color-text-subtle);--accent-gold: var(--color-accent-primary);--accent-gold-soft: var(--color-accent-primary-soft);--accent-green: var(--color-success);--accent-green-soft: var(--color-success-soft);--accent-red: var(--color-danger);--accent-blue: var(--color-info);--connection-default: var(--color-connection-default);--connection-related: var(--color-connection-related);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);--shadow-glow-green: 0 0 8px rgba(34, 197, 94, .5);--shadow-glow-blue: 0 0 8px rgba(59, 130, 246, .5);--shadow-glow-red: 0 0 8px rgba(239, 68, 68, .5);--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .6s;--sidebar-width: 360px}[data-theme=light]{color-scheme:light;--color-bg-canvas: #f2f1eb;--color-bg-surface: #fbfaf6;--color-bg-surface-muted: #f4f2ea;--color-bg-surface-strong: #e8e4d7;--color-bg-elevated: rgba(251, 250, 246, .92);--color-bg-overlay: rgba(251, 250, 246, .98);--color-bg-glass: rgba(244, 242, 234, .94);--color-bg-panel-hover: rgba(55, 49, 37, .06);--color-bg-subtle: rgba(55, 49, 37, .035);--color-bg-subtle-strong: rgba(55, 49, 37, .065);--color-bg-grid-dot: rgba(74, 69, 56, .12);--color-bg-grid-dot-soft: rgba(74, 69, 56, .08);--color-backdrop: rgba(33, 30, 24, .18);--color-text-primary: #252117;--color-text-secondary: #363024;--color-text-tertiary: #4d473a;--color-text-muted: #625b4f;--color-text-subtle: #847d71;--color-text-inverse: #fffaf2;--color-border-subtle: rgba(84, 78, 63, .14);--color-border-default: rgba(84, 78, 63, .2);--color-border-muted: rgba(84, 78, 63, .16);--color-border-soft: rgba(84, 78, 63, .12);--color-border-faint: rgba(84, 78, 63, .08);--color-border-hover: rgba(84, 78, 63, .28);--color-border-strong: rgba(84, 78, 63, .34);--color-accent-primary: #8a6a17;--color-accent-primary-soft: rgba(138, 106, 23, .12);--color-success-soft: rgba(16, 185, 129, .14);--color-danger-soft: rgba(239, 68, 68, .12);--color-info-soft: rgba(59, 130, 246, .12);--color-node-highlight: rgba(59, 130, 246, .16);--color-node-selection: rgba(138, 106, 23, .24);--color-node-selection-stroke: rgba(138, 106, 23, .8);--node-selection-stroke-width: 2.25;--color-connection-default: #8b8374;--color-connection-related: #4e473b;--color-connection-selected: #8a6a17;--connection-selected-opacity: 1;--connection-selected-width: 3.2;--connection-default-opacity: .52;--connection-related-opacity: .78;--connection-dim-opacity: .12;--shadow-sm: 0 1px 2px rgba(33, 30, 24, .06);--shadow-md: 0 8px 20px rgba(33, 30, 24, .09);--shadow-lg: 0 16px 40px rgba(33, 30, 24, .12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-secondary);overflow:hidden;line-height:1.5;background-image:radial-gradient(circle,var(--color-bg-grid-dot-soft) 1px,transparent 1px);background-size:24px 24px}button,input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.container{overflow:hidden;cursor:grab;background:var(--bg-primary)}.container:active{cursor:grabbing}#tree-svg{width:100%;height:100%}.node{cursor:pointer;transition:opacity var(--duration-fast) ease,filter var(--duration-fast) ease}.node-dim{opacity:.15;filter:grayscale(.8)}.node-preview-dim{opacity:.42;filter:grayscale(.35)}.node-related{opacity:.7}.node-hovered{opacity:1;z-index:100}.node-highlight-bg{opacity:0;transition:opacity var(--duration-fast) ease,fill var(--duration-fast) ease;pointer-events:none}.node-hovered .badge-img{filter:brightness(1.15)}.node-hovered .node-highlight-bg{opacity:1;fill:var(--color-node-highlight)}.node-timeline-dim{opacity:.15!important;filter:grayscale(.8)!important}.node-selected .badge-img{filter:brightness(1.3)}.node-selected .node-selection-ring{opacity:1;fill:var(--color-node-selection);stroke:var(--color-node-selection-stroke);stroke-width:var(--node-selection-stroke-width)}.selection-suppressed.node-selected .node-selection-ring{opacity:0}.selection-suppressed.node-selected.node-hovered .node-highlight-bg{opacity:1;fill:var(--color-node-highlight)}.selection-suppressed.node-selected .badge-img{filter:none}.selection-suppressed.node-selected.node-hovered .badge-img{filter:brightness(1.15)}.node-selected .badge-img:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:3px solid var(--accent-gold);border-radius:50%}.zone-label{font-size:11px;font-weight:600;text-anchor:middle;text-transform:uppercase;letter-spacing:3px;opacity:.7}.zone-ranged{fill:var(--zone-ranged)}.zone-magic{fill:var(--zone-magic)}.zone-melee{fill:var(--zone-melee)}.zone-line{stroke:var(--border-subtle);stroke-dasharray:6,4;stroke-width:1;opacity:.3}.level-label{font-size:11px;fill:var(--text-muted);text-anchor:end;font-weight:500}.level-line{stroke:var(--border-subtle);stroke-width:1;opacity:.2}.start-label{font-size:11px;fill:var(--accent-gold);text-anchor:middle;font-weight:700;letter-spacing:2px;text-transform:uppercase}.connection{fill:none;stroke:var(--connection-default);stroke-width:1.5;opacity:var(--connection-default-opacity);stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--duration-fast) ease,stroke var(--duration-fast) ease,stroke-width var(--duration-fast) ease}.connection-dim{opacity:var(--connection-dim-opacity)}.connection-preview-dim{opacity:.18}.connection-timeline-dim{opacity:.06!important;filter:none!important;stroke:var(--connection-default)!important;stroke-width:1!important}.connection-related{opacity:var(--connection-related-opacity);stroke:var(--connection-related);stroke-width:2}.tree-connection,.secondary-connection{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--duration-fast) ease,stroke var(--duration-fast) ease,stroke-width var(--duration-fast) ease}.tree-connection,.secondary-connection{stroke:var(--connection-default);stroke-width:1.5;opacity:var(--connection-default-opacity)}.tree-connection.connection-dim,.secondary-connection.connection-dim{opacity:var(--connection-dim-opacity)}.tree-connection.connection-preview-dim,.secondary-connection.connection-preview-dim{opacity:.18}.tree-connection.connection-related,.secondary-connection.connection-related{opacity:var(--connection-related-opacity);stroke:var(--connection-related);stroke-width:2}.connection-selected,.tree-connection.connection-selected,.secondary-connection.connection-selected{opacity:var(--connection-selected-opacity)!important;stroke:var(--color-connection-selected)!important;stroke-width:calc(var(--connection-selected-width) * 1px)!important}.same-level-connection{fill:none;stroke:var(--connection-default);stroke-width:1.5;opacity:var(--connection-default-opacity);stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--duration-fast) ease,stroke var(--duration-fast) ease}.same-level-connection.connection-dim{opacity:var(--connection-dim-opacity)}.same-level-connection.connection-preview-dim{opacity:.18}.same-level-connection.connection-related{opacity:var(--connection-related-opacity);stroke:var(--connection-related);stroke-width:2}.same-level-connection.connection-selected{opacity:var(--connection-selected-opacity)!important;stroke:var(--color-connection-selected)!important;stroke-width:calc((var(--connection-selected-width) - .3) * 1px)!important}.connection.selection-suppressed,.tree-connection.selection-suppressed,.secondary-connection.selection-suppressed,.same-level-connection.selection-suppressed{opacity:.18!important;stroke:var(--connection-default)!important;stroke-width:1.5!important}.tooltip{position:fixed;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:12px;padding:var(--space-4);max-width:380px;font-size:13px;line-height:1.5;pointer-events:none;z-index:1010;display:none;box-shadow:var(--shadow-lg)}.tooltip-layout{display:flex;gap:var(--space-3);align-items:flex-start}.tooltip-icon{width:44px;height:44px;border-radius:8px;image-rendering:pixelated;flex-shrink:0}.tooltip-content{flex:1;min-width:0}.tooltip-title{color:var(--text-primary);font-weight:600;font-size:14px;margin-bottom:2px}.tooltip-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:8px}.tooltip-desc{color:var(--text-tertiary);margin-bottom:10px;font-size:13px;line-height:1.6}.tooltip-effect{color:var(--text-muted);font-size:12px;padding-top:10px;border-top:1px solid var(--border-default)}.tooltip-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.controls{position:fixed;bottom:20px;right:calc(var(--sidebar-width) + 20px);display:flex;gap:var(--space-2);background:var(--bg-elevated);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-default);border-radius:10px;padding:var(--space-2);z-index:1000}.layout-switcher{position:fixed;top:64px;left:50%;transform:translate(-50%);display:flex;gap:var(--space-1);background:var(--bg-elevated);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-default);border-radius:10px;padding:var(--space-1);z-index:1001}button:focus-visible,a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:768px){:root{font-size:15px;--sidebar-width: 0px}.container{top:90px;right:0}.controls{bottom:16px;right:16px}.tooltip{max-width:300px;padding:var(--space-3)}}