:root{--bg-primary: #0a0c10;--bg-secondary: #111820;--bg-tertiary: #1a2332;--bg-elevated: rgba(17, 24, 39, .9);--border-subtle: rgba(48, 54, 61, .5);--border-default: rgba(55, 65, 81, .5);--border-hover: rgba(75, 85, 99, .6);--text-primary: #f0f0f0;--text-secondary: #d1d5db;--text-tertiary: #a1a1aa;--text-muted: #71717a;--text-subtle: #52525b;--accent-gold: #ffd700;--accent-gold-soft: rgba(255, 215, 0, .2);--accent-green: #10b981;--accent-green-soft: rgba(5, 150, 105, .2);--accent-red: #ef4444;--accent-blue: #3b82f6;--zone-ranged: #22c55e;--zone-magic: #3b82f6;--zone-melee: #ef4444;--zone-general: #9ca3af;--connection-default: #71717a;--connection-default-opacity: .55;--connection-related: #d1d5db;--connection-related-opacity: .9;--connection-dim-opacity: .08;--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}*,*: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,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}.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:#e5e7eb47}.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:#ffd70047;stroke:transparent;stroke-width:0}.selection-suppressed.node-selected .node-selection-ring{opacity:0}.selection-suppressed.node-selected.node-hovered .node-highlight-bg{opacity:1;fill:#e5e7eb47}.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 #ffd700;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:.9!important;stroke:gold!important;stroke-width:2.5!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:.9!important;stroke:gold!important;stroke-width:2!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)}}