:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .12);--text: #e8e8e8;--text-dim: rgba(255, 255, 255, .5);--primary: #6366f1;--primary-hover: #818cf8;--danger: #ef4444;--danger-hover: #f87171;--success: #22c55e;--radius: .5rem;--radius-lg: .75rem}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);background:#ffffff05}.header h1{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:.8rem;color:var(--text-dim);margin-top:.15rem}.layout{flex:1;display:flex;gap:0;overflow:hidden}.sidebar{width:320px;min-width:320px;border-right:1px solid var(--border);overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem}.panel h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);margin-bottom:.75rem;font-weight:600}.panel h3{font-size:.95rem;font-weight:600;margin-bottom:.5rem;color:var(--primary-hover)}.panel p{font-size:.82rem;color:#fff9;line-height:1.6}.input-row{display:flex;gap:.5rem;margin-bottom:.5rem}.num-input{flex:1;padding:.5rem .75rem;background:#0000004d;border:1px solid var(--border-light);border-radius:var(--radius);color:var(--text);font-size:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;transition:border-color .2s}.num-input:focus{border-color:var(--primary)}.num-input::placeholder{color:var(--text-dim)}.num-input::-webkit-outer-spin-button,.num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.num-input[type=number]{-moz-appearance:textfield}.btn-row{display:flex;gap:.5rem;margin-bottom:.5rem}.btn-row:last-child{margin-bottom:0}.btn{flex:1;padding:.5rem .75rem;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.btn:hover{background:#ffffff14}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}.btn-danger:hover:not(:disabled){background:#ef44441a}.btn-secondary{border-color:#a855f766;color:#c084fc}.btn-secondary:hover:not(:disabled){background:#a855f71a}.btn-ghost{border-color:transparent;color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:#ffffff0f;color:var(--text)}.btn-full{width:100%}.select{width:100%;padding:.5rem .75rem;background:#0000004d;border:1px solid var(--border-light);border-radius:var(--radius);color:var(--text);font-size:.85rem;outline:none;cursor:pointer;margin-bottom:.75rem}.select:focus{border-color:var(--primary)}.traversal-info{margin-bottom:.75rem}.traversal-order{display:inline-block;font-family:ui-monospace,monospace;font-size:.75rem;color:var(--primary-hover);background:#6366f11a;padding:.2rem .5rem;border-radius:.25rem;margin-bottom:.4rem}.traversal-info p{font-size:.8rem;margin-top:.3rem}.use-case{color:#ffffff73!important}.result-box{margin-top:.75rem;padding:.6rem .75rem;background:#22c55e14;border:1px solid rgba(34,197,94,.2);border-radius:var(--radius);font-family:ui-monospace,monospace;font-size:.78rem}.result-label{color:var(--success);font-weight:600;margin-right:.4rem}.result-values{color:#ffffffb3;word-break:break-all}.lesson-panel{border-color:#a855f726;background:#a855f70a}.lesson-nav{display:flex;gap:.35rem;margin-bottom:.75rem}.lesson-dot{width:26px;height:26px;border-radius:50%;border:1px solid rgba(168,85,247,.25);background:transparent;color:var(--text-dim);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s}.lesson-dot:hover{background:#a855f726;color:var(--text)}.lesson-dot.active{background:#a855f74d;border-color:#a855f780;color:#c084fc}.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:auto;background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.03) 0%,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.02) 39px,rgba(255,255,255,.02) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.02) 39px,rgba(255,255,255,.02) 40px)}.canvas-area svg{max-width:100%}.toast{position:absolute;top:1rem;left:50%;transform:translate(-50%);padding:.5rem 1rem;border-radius:var(--radius);font-size:.8rem;font-weight:500;z-index:10;animation:toast-in .3s ease}.toast-success{background:#22c55e26;border:1px solid rgba(34,197,94,.3);color:#4ade80}.toast-error{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#f87171}.toast-info{background:#6366f126;border:1px solid rgba(99,102,241,.3);color:#a5b4fc}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.legend{display:flex;gap:1.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-dim)}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot-active{background:#6366f1;box-shadow:0 0 6px #6366f180}.dot-highlight{background:#818cf84d;border:1px solid rgba(129,140,248,.6)}.dot-default{background:#ffffff0f;border:1px solid rgba(255,255,255,.15)}@media(max-width:768px){.layout{flex-direction:column}.sidebar{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border);max-height:50vh}.canvas-area{min-height:40vh}}