*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#e8e8e8}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1);height:50px;flex-shrink:0}.header-left{flex:1}.back-link{color:#4fc3f7;text-decoration:none;font-size:14px;transition:color .2s}.back-link:hover{color:#81d4fa}.header-center{flex:2;text-align:center}.title-link{text-decoration:none;color:inherit}.title{font-size:20px;font-weight:600;color:#fff;margin:0;transition:color .2s}.title-link:hover .title{color:#4fc3f7}.header-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:16px}.explanation-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.explanation-btn:hover{background:#fff3;border-color:#ffffff4d}.github-link{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;padding:6px 12px;background:#ffffff1a;border-radius:6px;transition:all .2s}.github-link:hover{background:#fff3}.github-icon{width:20px;height:20px}.star-count{font-size:13px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1e2a3a;border-radius:12px;padding:24px;max-width:600px;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #00000080}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#999;font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.modal-close:hover{background:#ffffff1a;color:#fff}.explanation-content{color:#e0e0e0;line-height:1.8}.explanation-content h2{color:#4fc3f7;margin:20px 0 12px;font-size:18px}.explanation-content h3{color:#81d4fa;margin:16px 0 8px;font-size:15px}.explanation-content code{background:#4fc3f733;padding:2px 6px;border-radius:4px;font-family:Fira Code,monospace;font-size:13px}.explanation-content ul{margin:8px 0;padding-left:20px}.explanation-content li{margin:4px 0}.explanation-content strong{color:#ffd54f}.problem-btn{margin-right:0}.explanation-content pre{background:#00000059;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px;margin:8px 0;overflow-x:auto}.explanation-content pre code{background:none;padding:0;font-family:Fira Code,monospace;font-size:13px;color:#b0bec5;white-space:pre}.explanation-content blockquote{border-left:3px solid #ffd54f;margin:12px 0;padding:4px 12px;color:#ffe082;background:#ffd54f14;border-radius:0 4px 4px 0}.problem-content{max-width:640px}.input-panel{padding:10px 20px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.input-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.input-group{display:flex;align-items:center;gap:8px}.input-group label{font-size:13px;color:#aaa;white-space:nowrap}.input-field{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 12px;color:#fff;font-size:13px;font-family:Fira Code,monospace;min-width:280px}.input-field.word-input{min-width:120px}.input-field:focus{outline:none;border-color:#4fc3f7;box-shadow:0 0 0 2px #4fc3f733}.apply-btn,.random-btn{padding:6px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s;border:none}.apply-btn{background:#4fc3f7;color:#1a1a2e;font-weight:500}.apply-btn:hover{background:#81d4fa}.random-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.random-btn:hover{background:#fff3}.samples-section{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}.samples-label{font-size:13px;color:#888}.sample-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:4px 10px;color:#ccc;font-size:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.sample-btn:hover{background:#ffffff1a;border-color:#ffffff40}.sample-btn.active{background:#4fc3f733;border-color:#4fc3f7;color:#4fc3f7}.expected{font-size:11px;font-weight:700}.expected.true{color:#66bb6a}.expected.false{color:#ef5350}.error-message{margin-top:8px;padding:6px 12px;background:#ef535033;border:1px solid rgba(239,83,80,.4);border-radius:6px;color:#ef5350;font-size:13px}.code-panel{display:flex;flex-direction:column;background:#0000004d;border-radius:8px;overflow:hidden;height:100%}.code-header{padding:8px 12px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.language-tabs{display:flex;gap:4px}.lang-tab{padding:4px 12px;background:transparent;border:1px solid transparent;border-radius:4px;color:#888;font-size:12px;cursor:pointer;transition:all .2s}.lang-tab:hover{color:#ccc;background:#ffffff0d}.lang-tab.active{color:#4fc3f7;background:#4fc3f726;border-color:#4fc3f74d}.code-container{flex:1;overflow:auto;padding:12px 0}.code-content{margin:0;font-family:Fira Code,Monaco,Consolas,monospace;font-size:12px;line-height:1.6}.code-line{display:flex;align-items:flex-start;padding:1px 12px;transition:background .2s;position:relative}.code-line.highlighted{background:#4fc3f726;padding-left:9px}.line-number{width:32px;text-align:right;color:#555;-webkit-user-select:none;user-select:none;flex-shrink:0;padding-right:12px}.code-line.highlighted .line-number{color:#4fc3f7}.line-content{flex:1;white-space:pre;color:#e0e0e0}.keyword{color:#c792ea}.string{color:#c3e88d}.number{color:#f78c6c}.comment{color:#546e7a;font-style:italic}.line-pointer{position:absolute;left:0;top:0;width:3px;height:100%;background:#4fc3f7;animation:linePulse 1s ease-in-out infinite}@keyframes linePulse{0%,to{opacity:1;box-shadow:0 0 4px #4fc3f7}50%{opacity:.5;box-shadow:0 0 8px #4fc3f7}}.debug-panels{display:flex;gap:1px;height:140px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);background:#ffffff1a}.debug-section{flex:1;display:flex;flex-direction:column;background:#0000004d;min-width:0}.debug-title{padding:4px 10px;font-size:11px;color:#888;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center}.stack-depth{color:#4fc3f7}.variables-list,.callstack-list{flex:1;overflow:auto;padding:6px 10px;font-family:Fira Code,Monaco,Consolas,monospace;font-size:11px}.empty-hint{color:#555;font-style:italic}.var-group{margin-bottom:6px}.var-group-title{color:#888;font-size:10px;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}.var-item{display:flex;gap:4px;padding:2px 0;color:#e0e0e0}.var-name{color:#82aaff}.var-eq{color:#555}.var-value{color:#c3e88d}.var-param .var-name{color:#ffd54f}.var-return .var-value{color:#ef5350}.var-local .var-name{color:#c3e88d}.stack-frame{display:flex;gap:6px;align-items:center;padding:3px 4px;border-radius:4px;border-left:2px solid transparent;font-size:11px;color:#ccc}.frame-running{border-left-color:#4fc3f7;background:#4fc3f714}.frame-matched{border-left-color:#66bb6a}.frame-backtracking{border-left-color:#ff9800;background:#ff980014}.frame-depth{color:#888}.frame-cell{color:#82aaff}.frame-index{color:#c792ea}.frame-status{margin-left:auto;font-size:10px}.status-running{color:#4fc3f7}.status-matched{color:#66bb6a}.status-backtracking{color:#ff9800}.recursion-stack{background:#0000004d;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;width:220px;font-family:Fira Code,monospace}.recursion-stack__title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#4fc3f7;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(79,195,247,.25)}.recursion-stack__icon{font-size:14px}.recursion-stack__depth{margin-left:auto;font-size:11px;color:#888;font-weight:400}.recursion-stack__body{display:flex;flex-direction:column-reverse;gap:4px;max-height:280px;overflow-y:auto}.recursion-stack__empty{color:#666;font-size:12px;text-align:center;padding:16px 0}.stack-frame{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:6px;border-left:3px solid #555;background:#ffffff0a;font-size:11px;transition:all .25s ease}.stack-frame--running{border-left-color:#4fc3f7;background:#4fc3f71f}.stack-frame--matched{border-left-color:#66bb6a;background:#66bb6a1a}.stack-frame--backtracking{border-left-color:#ff9800;background:#ff98001f}.stack-frame--top{box-shadow:0 0 0 1px #ffffff40,0 0 12px #4fc3f74d;animation:stackPulse 1.4s ease-in-out infinite}@keyframes stackPulse{0%,to{box-shadow:0 0 0 1px #ffffff40,0 0 6px #4fc3f740}50%{box-shadow:0 0 0 1px #fff6,0 0 14px #4fc3f78c}}.stack-frame__depth{font-size:10px;color:#888}.stack-frame__cell{color:#e0e0e0;font-weight:600}.stack-frame__index{color:#ffd54f}.stack-frame__status{align-self:flex-start;font-size:10px;padding:1px 6px;border-radius:3px}.status--running{color:#4fc3f7;background:#4fc3f726}.status--matched{color:#66bb6a;background:#66bb6a26}.status--backtracking{color:#ff9800;background:#ff980026}.recursion-stack__base{text-align:center;font-size:10px;color:#555;padding-top:4px;border-top:1px dashed rgba(255,255,255,.1);margin-top:2px}.recursion-tree{background:#0000004d;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;font-family:Fira Code,monospace;max-width:100%}.recursion-tree__title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#81c784;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(129,199,132,.25)}.recursion-tree__depth{margin-left:auto;font-size:11px;color:#888;font-weight:400}.recursion-tree__body{display:flex;flex-direction:column;gap:4px}.recursion-tree__empty{color:#666;font-size:12px;text-align:center;padding:16px 0}.recursion-tree__canvas{overflow-x:auto;padding:4px 0}.tree-node{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:6px;border:1px solid #555;background:#ffffff0a;font-size:10px;transition:all .25s ease}.tree-node--running{border-color:#4fc3f7;background:#4fc3f726;box-shadow:0 0 10px #4fc3f766}.tree-node--matched{border-color:#66bb6a;background:#66bb6a1f}.tree-node--backtracking{border-color:#ff9800;background:#ff98001f}.tree-node--failed{border-color:#ef5350;background:#ef53501f;opacity:.6}.tree-node__label{color:#e0e0e0;font-weight:600}.tree-node__char{color:#ffd54f;font-size:9px}.recursion-tree__hint{font-size:10px;color:#666;font-family:inherit}.canvas-container{flex:1;position:relative;background:#0003;border-radius:8px;overflow:hidden}.canvas-svg{width:100%;height:100%}.canvas-overlay{position:absolute;z-index:5;pointer-events:auto}.canvas-overlay--left{top:12px;left:12px;max-height:calc(100% - 24px);overflow-y:auto}.canvas-overlay--bottom{bottom:12px;left:12px;right:80px;pointer-events:auto}@media(max-width:768px){.canvas-overlay--bottom{display:none}}.canvas-controls{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:10}.control-btn{width:32px;height:32px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.control-btn:hover{background:#fff3;border-color:#ffffff4d}.cell-current rect{animation:cellPulse 1s ease-in-out infinite}@keyframes cellPulse{0%,to{filter:drop-shadow(0 0 2px rgba(79,195,247,.6))}50%{filter:drop-shadow(0 0 8px rgba(79,195,247,.9))}}.path-anim{animation:dashFlow 1s linear infinite}@keyframes dashFlow{to{stroke-dashoffset:-12}}.direction-arrow{animation:arrowDash .8s linear infinite}@keyframes arrowDash{to{stroke-dashoffset:-10}}.cell-mismatch rect{animation:cellShake .4s ease-in-out}@keyframes cellShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.control-panel{padding:8px 20px;background:#ffffff0d;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.controls-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:6px;position:relative}.control-buttons{display:flex;align-items:center;gap:8px}.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;transition:all .2s;min-width:52px}.ctrl-btn:hover{background:#fff3;border-color:#ffffff4d}.ctrl-btn.play-btn{background:#4fc3f733;border-color:#4fc3f766}.ctrl-btn.play-btn:hover{background:#4fc3f74d}.btn-icon{font-size:16px}.btn-hint{font-size:9px;color:#888}.step-info{font-size:13px;color:#aaa;margin-left:8px;white-space:nowrap}.speed-control{position:absolute;right:20px}.speed-btn{padding:6px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:13px;cursor:pointer;transition:all .2s}.speed-btn:hover{background:#fff3}.speed-menu{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:#1e2a3a;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;z-index:100}.speed-option{padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:4px;color:#ccc;font-size:12px;cursor:pointer;transition:all .2s}.speed-option:hover{background:#ffffff1a}.speed-option.active{background:#4fc3f733;border-color:#4fc3f7;color:#4fc3f7}.progress-bar{height:16px;cursor:pointer;display:flex;align-items:center}.progress-track{width:100%;height:5px;background:#ffffff1a;border-radius:3px;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#66bb6a);border-radius:3px;transition:width .1s ease}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d;transition:left .1s ease}.progress-bar:hover .progress-thumb{transform:translate(-50%,-50%) scale(1.2)}.wechat-float{position:fixed;bottom:100px;right:20px;z-index:1000}.float-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;background:linear-gradient(135deg,#07c160,#06ad56);border-radius:12px;cursor:pointer;box-shadow:0 4px 20px #07c16066;transition:all .3s ease}.float-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #07c16080}.wechat-icon{width:28px;height:28px;color:#fff}.float-text{font-size:11px;color:#fff;font-weight:500}.qr-popup{position:absolute;bottom:100%;right:0;margin-bottom:12px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.qr-content{background:#fff;border-radius:12px;padding:16px;box-shadow:0 8px 32px #0000004d}.qr-image{width:180px;height:auto;border-radius:8px}.qr-tip{margin-top:12px;text-align:center;font-size:12px;color:#666;line-height:1.5}.app{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.main-content{flex:1;display:flex;gap:16px;padding:16px 20px;overflow:hidden;min-height:0}.code-section{width:380px;flex-shrink:0;display:flex;flex-direction:column}.canvas-section{flex:1;display:flex;flex-direction:column;min-width:0}