*{box-sizing:border-box;margin:0;padding:0}:root{--background: #ffffff;--foreground: #0f172a;--card: #ffffff;--card-foreground: #0f172a;--primary: #0f172a;--primary-foreground: #f8fafc;--secondary: #f1f5f9;--secondary-foreground: #0f172a;--muted: #f1f5f9;--muted-foreground: #64748b;--accent: #f1f5f9;--accent-foreground: #0f172a;--destructive: #ef4444;--destructive-foreground: #f8fafc;--border: #e2e8f0;--input: #e2e8f0;--ring: #0f172a;--radius: .5rem}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);color:var(--foreground);line-height:1.5}.container{max-width:1400px;margin:0 auto;padding:0 1.5rem}.grid-cols-1{grid-template-columns:1fr}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.gap-2{gap:.5rem}.gap-4{gap:1rem}.tree-canvas-container{width:100%;min-height:500px;overflow:hidden;display:flex;flex-direction:column;position:relative}.svg-container{width:100%;height:100%;overflow:auto;flex:1}.tree-svg{max-width:100%;height:auto;display:block}.zoom-controls{position:absolute;top:10px;right:10px;display:flex;gap:.5rem;background:#fff;padding:.5rem;border-radius:.5rem;box-shadow:0 2px 8px #00000026;z-index:10;align-items:center}.zoom-btn{width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--foreground)}.zoom-btn:hover{background:var(--accent);border-color:var(--ring)}.zoom-btn:active{transform:scale(.95)}.zoom-level{font-size:.875rem;font-weight:600;color:var(--foreground);min-width:50px;text-align:center}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#64748b;font-size:1rem;padding:2.5rem;text-align:center;height:100%}.empty-state svg{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.rotation-demo-container{width:100%;display:flex;flex-direction:column;gap:1rem}.rotation-demo-header{text-align:center;padding:.5rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0}.rotation-demo-header h4{margin:0;font-size:1rem;font-weight:600;color:#334155}.rotation-demo-controls{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.rotation-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:2px solid #e2e8f0;border-radius:.5rem;background:#fff;color:#334155;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.rotation-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.rotation-btn:active:not(:disabled){transform:translateY(0)}.rotation-btn:disabled{opacity:.5;cursor:not-allowed}.rotation-btn-left:not(:disabled){border-color:#10b981;color:#10b981}.rotation-btn-left:hover:not(:disabled){background:#ecfdf5;border-color:#059669}.rotation-btn-right:not(:disabled){border-color:#8b5cf6;color:#8b5cf6}.rotation-btn-right:hover:not(:disabled){background:#f5f3ff;border-color:#7c3aed}.rotation-btn-reset:not(:disabled){border-color:#64748b;color:#64748b}.rotation-btn-reset:hover:not(:disabled){background:#f1f5f9;border-color:#475569}.rotation-demo-canvas{background:linear-gradient(to bottom,#f8fafc,#f1f5f9);border:2px solid #e2e8f0;border-radius:.75rem;padding:1rem;min-height:280px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.rotation-demo-canvas.animating{background:linear-gradient(to bottom,#fef3c7,#fde68a);border-color:#fbbf24}.rotation-demo-canvas svg{max-width:100%;height:auto}.rotation-demo-description{background:#f1f5f9;border-left:4px solid #3b82f6;padding:.75rem 1rem;border-radius:.375rem;font-size:.875rem;color:#475569;line-height:1.5}.rotation-demo-description p{margin:0;font-weight:500}.rotation-demo-canvas svg *{transition:all .6s cubic-bezier(.4,0,.2,1)}.rotation-tabs-container{width:100%;display:flex;flex-direction:column}.rotation-tabs{display:flex;gap:.25rem;border-bottom:2px solid #e2e8f0;margin-bottom:1rem}.rotation-tab{flex:1;padding:.75rem 1rem;border:none;background:transparent;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;border-bottom:3px solid transparent;position:relative;bottom:-2px}.rotation-tab:hover{color:#334155;background:#f8fafc}.rotation-tab.active{color:#2196f3;border-bottom-color:#2196f3;background:#f8fafc}.rotation-tab-content{padding-top:.5rem}.app{min-height:100vh;background:linear-gradient(to bottom right,#f8fafc,#e2e8f0);padding:2rem 1.5rem}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2.25rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem}.app-header p{color:var(--muted-foreground);font-size:1rem}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.card-header{padding:1.5rem;padding-bottom:0}.card-header-collapsible{transition:background-color .2s ease}.card-header-collapsible:hover{background-color:#00000005}.card-title{font-size:1.125rem;font-weight:600;color:var(--card-foreground);margin:0;display:flex;align-items:center}.card-content{padding:1.5rem}.input{width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);background:var(--background);transition:all .2s}.input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px #0f172a1a}.input::placeholder{color:var(--muted-foreground)}.button{display:inline-flex;align-items:center;justify-center:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:none;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:all .2s;white-space:nowrap;min-width:100px}.button:disabled{opacity:.5;pointer-events:none}.button svg{margin-right:.5rem;width:1rem;height:1rem}.button-primary{background:var(--primary);color:var(--primary-foreground)}.button-primary:hover{opacity:.9}.button-secondary{background:var(--secondary);color:var(--secondary-foreground)}.button-secondary:hover{background:#e2e8f0}.button-destructive{background:var(--destructive);color:var(--destructive-foreground)}.button-destructive:hover{opacity:.9}.button-outline{background:var(--background);color:var(--foreground);border:1px solid var(--border)}.button-outline:hover{background:var(--accent)}.button-group{display:flex;flex-wrap:wrap;gap:.5rem}.button-group .button{flex:1;min-width:100px}.message{padding:.75rem 1rem;border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:500;margin-top:1rem;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.message-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.message-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.message-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}.traversal-result{padding:.75rem 1rem;background:var(--muted);border-radius:calc(var(--radius) - 2px);font-family:Courier New,monospace;font-size:.875rem;color:var(--muted-foreground);margin-top:1rem}.tree-container{min-height:500px;padding:1.5rem}.grid{display:grid;gap:1.5rem}@media(min-width:1024px){.grid-cols-2{grid-template-columns:repeat(2,1fr)}}.space-y-4>*+*{margin-top:1rem}@media(max-width:1024px){.app{padding:1rem}.app-header h1{font-size:1.875rem}.button-group .button{min-width:auto}}