.header{background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.25rem .75rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);min-height:32px;flex-shrink:0}.back-link{display:flex;align-items:center;gap:.3rem;color:#fff;text-decoration:none;font-weight:500;transition:opacity .3s;font-size:12px}.back-link:hover{opacity:.8}.back-link svg{width:16px;height:16px}.header-actions{display:flex;gap:.35rem;align-items:center}.header-btn{display:flex;align-items:center;gap:.3rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:11px;font-weight:500;transition:all .2s}.header-btn svg{width:14px;height:14px}.header-btn:hover{background:#fff3;transform:translateY(-1px)}.github-link{display:flex;align-items:center;gap:.35rem;color:#fff;text-decoration:none;font-weight:500;transition:all .3s;font-size:11px;background:#ffffff1a;padding:.25rem .5rem;border-radius:4px;border:1px solid rgba(255,255,255,.2)}.github-link svg{width:16px;height:16px}.github-link:hover{background:#fff3;transform:translateY(-1px)}.star-count{display:flex;align-items:center;gap:.2rem;background:#f59e0b4d;padding:.1rem .35rem;border-radius:3px;font-size:10px;font-weight:600}.star-count svg{color:#fbbf24;width:12px;height:12px}@media (max-width: 768px){.header{flex-wrap:wrap;gap:.5rem;padding:.5rem}.header-actions{order:3;width:100%;justify-content:center}.header-btn span:not(.icon){display:none}}.canvas-container{flex:1;background:#111827;border-radius:6px;position:relative;overflow:hidden;min-height:160px}.algorithm-canvas{display:block;cursor:grab}.algorithm-canvas:active{cursor:grabbing}.canvas-hint{position:absolute;bottom:8px;right:8px;background:#00000080;color:#9ca3af;padding:.25rem .5rem;border-radius:4px;font-size:11px}.char-group rect{transition:fill .3s,stroke .3s}.char-group text{transition:fill .3s}.pointer-left,.pointer-right{transition:transform .3s ease-out}@media (max-width: 768px){.canvas-container{min-height:180px}}.code-panel{background:#1e1e1e;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;height:100%;border:1px solid rgba(255,255,255,.1)}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.35rem .5rem;background:#252526;border-bottom:1px solid #3c3c3c;flex-shrink:0}.code-header h3{margin:0;font-size:12px;color:#e0e0e0;font-weight:600}.language-tabs{display:flex;gap:.2rem}.lang-tab{padding:.2rem .5rem;background:transparent;border:1px solid transparent;color:#9ca3af;font-size:11px;cursor:pointer;border-radius:3px;transition:all .2s}.lang-tab:hover{background:#ffffff1a;color:#e0e0e0}.lang-tab.active{background:#f59e0b;color:#111827;font-weight:600}.code-container{flex:1;overflow-y:auto;overflow-x:auto;min-height:0}.code-lines{font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;line-height:1.5}.code-line{display:flex;align-items:flex-start;padding:0 .4rem;transition:background .3s;position:relative;min-height:17px}.code-line.highlighted{background:#f59e0b33;border-left:3px solid #f59e0b}.code-line.highlighted:before{content:"→";position:absolute;left:4px;color:#f59e0b;font-weight:700;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.line-number{min-width:24px;padding-right:.5rem;color:#6b7280;text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0}.line-code{margin:0;flex:1;white-space:pre;color:#d4d4d4}.line-code code{font-family:inherit}.var-annotation{margin-left:.5rem;flex-shrink:0}.var-value{background:#10b98133;color:#10b981;padding:.05rem .3rem;border-radius:2px;font-size:10px;font-family:Consolas,Monaco,monospace;white-space:nowrap}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6a9955}.token.punctuation{color:#d4d4d4}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#ce9178}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#d4d4d4}.token.atrule,.token.attr-value,.token.keyword{color:#569cd6}.token.function,.token.class-name{color:#dcdcaa}.token.regex,.token.important,.token.variable{color:#d16969}.code-container::-webkit-scrollbar{width:8px;height:8px}.code-container::-webkit-scrollbar-track{background:#1e1e1e}.code-container::-webkit-scrollbar-thumb{background:#4b5563;border-radius:4px}.code-container::-webkit-scrollbar-thumb:hover{background:#6b7280}@media (max-width: 1024px){.code-panel{max-height:300px}.code-lines{font-size:11px}}.control-panel{background:#111827;border-radius:6px;padding:.3rem;display:flex;flex-direction:column;gap:.3rem;flex-shrink:0}.control-buttons{display:flex;justify-content:center;gap:.3rem;flex-wrap:wrap}.control-btn{display:flex;align-items:center;gap:.2rem;padding:.25rem .4rem;background:#374151;border:1px solid #4b5563;border-radius:4px;cursor:pointer;transition:all .3s;font-size:11px;font-weight:500;color:#e0e0e0}.control-btn:hover:not(:disabled){background:#4b5563;border-color:#f59e0b;transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b4d}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:#f59e0b;color:#111827;border-color:#f59e0b;min-width:80px}.control-btn.primary:hover:not(:disabled){background:#d97706;border-color:#d97706}.btn-icon{font-size:12px}.btn-text{font-size:11px}.btn-shortcut{font-size:9px;color:#9ca3af;background:#0003;padding:.05rem .2rem;border-radius:2px}.control-btn.primary .btn-shortcut{color:#111827b3;background:#0000001a}.speed-control{display:flex;align-items:center;gap:.25rem;justify-content:center}.speed-label{font-size:10px;color:#9ca3af;font-weight:500}.speed-buttons{display:flex;gap:.1rem}.speed-btn{padding:.15rem .3rem;background:#374151;border:1px solid #4b5563;border-radius:3px;color:#9ca3af;font-size:9px;cursor:pointer;transition:all .2s}.speed-btn:hover{background:#4b5563;color:#e0e0e0}.speed-btn.active{background:#f59e0b;color:#111827;border-color:#f59e0b;font-weight:600}.stats-row{display:flex;justify-content:center;gap:.5rem}.stat-item{display:flex;align-items:center;gap:.25rem;font-size:10px}.stat-label{color:#9ca3af}.stat-value{color:#e0e0e0;font-weight:600;background:#374151;padding:.1rem .3rem;border-radius:3px}.progress-bar-container{position:relative;height:14px;background:#374151;border-radius:7px;cursor:pointer;overflow:visible;margin-top:.2rem}.progress-bar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#10b981,#f59e0b);border-radius:7px;transition:width .1s ease-out}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border:2px solid #f59e0b;border-radius:50%;box-shadow:0 1px 4px #0000004d;transition:left .1s ease-out;z-index:2}.progress-thumb:hover{transform:translate(-50%,-50%) scale(1.2)}.progress-steps{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.progress-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:4px;height:4px;background:#6b7280;border-radius:50%;transition:background .3s}.progress-dot.passed{background:#fff}@media (max-width: 768px){.control-buttons{gap:.35rem}.control-btn{padding:.4rem .6rem}.btn-text,.btn-shortcut{display:none}.speed-buttons{flex-wrap:wrap}}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease-out}.tutorial-dialog{background:linear-gradient(135deg,#f59e0b,#ea580c);border-radius:24px;max-width:600px;width:90%;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000080;animation:slideUp .4s ease-out}.tutorial-header{padding:32px 32px 24px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:flex-start}.tutorial-header h2{margin:0;font-size:24px;color:#fff;font-weight:700;line-height:1.4;flex:1}.tutorial-close{background:#ffffff1a;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s;flex-shrink:0;margin-left:16px}.tutorial-close:hover{background:#fff3;transform:scale(1.1)}.tutorial-body{padding:32px;color:#fff;min-height:120px}.tutorial-body p{font-size:16px;line-height:1.8;margin:0;color:#fffffff2}.tutorial-footer{padding:24px 32px 32px;border-top:1px solid rgba(255,255,255,.1)}.tutorial-progress{display:flex;gap:8px;justify-content:center;margin-bottom:24px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:#ffffff4d;cursor:pointer;transition:all .3s}.tutorial-dot.active{background:#fff;width:24px;border-radius:4px}.tutorial-dot.completed{background:#fff9}.tutorial-dot:hover{background:#ffffff80;transform:scale(1.2)}.tutorial-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.tutorial-nav{display:flex;gap:12px}.tutorial-btn{padding:12px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.2)}.tutorial-btn:hover:not(:disabled){background:#ffffff40;transform:translateY(-1px)}.tutorial-btn:disabled{opacity:.4;cursor:not-allowed}.tutorial-btn.primary{background:#fff;color:#f59e0b;border:none}.tutorial-btn.primary:hover:not(:disabled){background:#f0f0f0;transform:translateY(-2px)}.tutorial-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.3)}.tutorial-hint{text-align:center;padding:16px;font-size:13px;color:#fff9;border-top:1px solid rgba(255,255,255,.05)}@media (max-width: 640px){.tutorial-dialog{width:95%}.tutorial-header{padding:24px 20px 16px}.tutorial-header h2{font-size:20px}.tutorial-body{padding:24px 20px;min-height:100px}.tutorial-body p{font-size:15px}.tutorial-footer{padding:20px}.tutorial-actions{flex-direction:column-reverse}.tutorial-nav{width:100%}.tutorial-btn{flex:1;padding:14px 20px}.tutorial-btn.secondary{width:100%}}.help-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out;overflow-y:auto;padding:20px}.help-dialog{background:#1f2937;border-radius:20px;max-width:800px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out;border:1px solid rgba(255,255,255,.1)}.help-header{padding:24px 32px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#1f2937;z-index:10;border-radius:20px 20px 0 0}.help-header h2{margin:0;font-size:24px;color:#fbbf24;font-weight:700}.help-close{background:#ffffff1a;border:none;color:#9ca3af;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s}.help-close:hover{background:#fff3;color:#fff;transform:scale(1.1)}.help-content{padding:32px}.help-section{margin-bottom:32px}.help-section:last-child{margin-bottom:0}.help-section h3{font-size:18px;color:#f59e0b;margin:0 0 16px;font-weight:700}.help-section p{font-size:15px;line-height:1.7;color:#d1d5db;margin:0 0 12px}.help-section code{background:#374151;padding:2px 6px;border-radius:4px;font-family:Monaco,Courier New,monospace;font-size:14px;color:#10b981}.help-complexity{display:flex;gap:24px;margin-top:12px;padding:16px;background:#f59e0b1a;border-radius:12px;border-left:4px solid #f59e0b;font-size:14px;color:#e0e0e0}.help-controls{display:grid;gap:12px}.help-control-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#111827;border-radius:10px;font-size:14px;color:#d1d5db}.help-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}.help-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.help-shortcut{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#111827;border-radius:10px;font-size:14px;color:#d1d5db}.help-shortcut kbd{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;min-width:36px;text-align:center;box-shadow:0 2px 4px #0003;font-family:inherit}.help-colors{display:grid;gap:12px}.help-color-item{display:flex;align-items:center;gap:12px;font-size:14px;color:#d1d5db}.help-color-box{width:32px;height:32px;border-radius:8px;flex-shrink:0;box-shadow:0 2px 4px #0003}.help-tip{background:#f59e0b1a;padding:20px;border-radius:12px;border-left:4px solid #f59e0b}.help-tip strong{display:block;margin-bottom:8px;color:#fbbf24;font-size:15px}.help-tip p{margin:0;color:#d1d5db;line-height:1.7}.help-dialog::-webkit-scrollbar{width:8px}.help-dialog::-webkit-scrollbar-track{background:#1f2937;border-radius:10px}.help-dialog::-webkit-scrollbar-thumb{background:#4b5563;border-radius:10px}.help-dialog::-webkit-scrollbar-thumb:hover{background:#6b7280}@media (max-width: 768px){.help-overlay{padding:10px}.help-dialog{max-height:90vh}.help-header{padding:20px}.help-header h2{font-size:20px}.help-content{padding:20px}.help-section{margin-bottom:24px}.help-section h3{font-size:16px}.help-complexity{flex-direction:column;gap:8px}.help-shortcuts{grid-template-columns:1fr}}.thoughts-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out;overflow-y:auto;padding:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.thoughts-dialog{background:#1f2937;border-radius:16px;max-width:800px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out;border:1px solid rgba(255,255,255,.1)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.thoughts-header{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#1f2937;z-index:10;border-radius:16px 16px 0 0}.thoughts-header h2{margin:0;font-size:20px;color:#fbbf24;font-weight:700}.thoughts-close{background:#ffffff1a;border:none;color:#9ca3af;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s}.thoughts-close:hover{background:#fff3;color:#fff;transform:scale(1.1)}.thoughts-content{padding:24px}.thoughts-section{margin-bottom:24px}.thoughts-section:last-child{margin-bottom:0}.thoughts-section h3{font-size:16px;color:#f59e0b;margin:0 0 12px;font-weight:600}.section-content{color:#d1d5db;font-size:14px;line-height:1.8}.section-content p{margin:0 0 12px}.section-content p:last-child{margin-bottom:0}.thoughts-dialog::-webkit-scrollbar{width:8px}.thoughts-dialog::-webkit-scrollbar-track{background:#1f2937;border-radius:8px}.thoughts-dialog::-webkit-scrollbar-thumb{background:#4b5563;border-radius:8px}.thoughts-dialog::-webkit-scrollbar-thumb:hover{background:#6b7280}@media (max-width: 768px){.thoughts-overlay{padding:10px}.thoughts-dialog{max-height:90vh}.thoughts-header{padding:16px 20px}.thoughts-header h2{font-size:18px}.thoughts-content{padding:20px}}.wechat-float{position:fixed;bottom:20px;right:20px;z-index:1000}.float-button{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#07c160,#06ad56);color:#fff;padding:.75rem 1rem;border-radius:50px;cursor:pointer;box-shadow:0 4px 20px #07c16066;transition:all .3s;font-size:14px;font-weight:600}.float-button:hover{transform:translateY(-3px);box-shadow:0 6px 25px #07c16080}.float-button svg{flex-shrink:0}.qr-popup{position:absolute;bottom:60px;right:0;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;padding:16px;animation:popupIn .3s ease-out;min-width:200px}@keyframes popupIn{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.qr-popup:after{content:"";position:absolute;bottom:-8px;right:30px;width:16px;height:16px;background:#fff;transform:rotate(45deg);box-shadow:4px 4px 8px #0000001a}.qr-content{text-align:center}.qr-content img{width:180px;height:auto;border-radius:8px;margin-bottom:12px}.qr-content p{margin:0;font-size:13px;color:#374151;line-height:1.6}.qr-content strong{color:#07c160}@media (max-width: 768px){.wechat-float{bottom:15px;right:15px}.float-button{padding:.6rem .8rem;font-size:12px}.float-button span{display:none}.float-button{border-radius:50%;padding:.75rem}.qr-popup{right:-10px}.qr-content img{width:150px}}.app{height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.main{flex:1;padding:.25rem .5rem;display:flex;overflow:hidden;min-height:0}.container{padding:.25rem;margin:0;width:100%;max-width:100%;display:flex;flex-direction:column;gap:.25rem;overflow:hidden}.title{text-align:center;color:#fff;font-size:1.1rem;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.2);font-weight:600}.title a{color:#fff;text-decoration:none;transition:color .3s}.title a:hover{color:#fbbf24;text-decoration:underline}.input-panel{background:#1f2937;border-radius:6px;padding:.3rem .5rem;box-shadow:0 2px 8px #0000004d;border:1px solid rgba(255,255,255,.1)}.input-group{display:flex;gap:.4rem;margin-bottom:.25rem;align-items:center}.input-row{display:flex;align-items:center;gap:.25rem;flex:1}.input-row label{font-weight:600;color:#e0e0e0;font-size:12px;white-space:nowrap}.input-row input{padding:.25rem .4rem;border:1px solid #374151;border-radius:4px;font-size:12px;transition:border-color .3s;background:#111827;color:#e0e0e0;flex:1;min-width:0}.input-row input:focus{outline:none;border-color:#f59e0b}.apply-btn{padding:.25rem .75rem;background:#f59e0b;color:#111827;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:background .3s;white-space:nowrap;font-size:12px}.apply-btn:hover{background:#d97706}.input-error{background:#ef444426;border:1px solid rgba(239,68,68,.4);border-left:4px solid #ef4444;color:#fecaca;padding:.75rem 1rem;border-radius:8px;font-size:14px;margin-bottom:.5rem;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.preset-buttons{display:flex;gap:.25rem;flex-wrap:wrap}.preset-btn{padding:.2rem .5rem;background:#374151;border:1px solid #4b5563;border-radius:4px;cursor:pointer;transition:all .3s;font-size:11px;font-weight:500;color:#e0e0e0}.preset-btn:hover{background:#f59e0b;color:#111827;border-color:#f59e0b}.preset-btn.random{background:#10b981;border-color:#10b981;color:#fff}.preset-btn.random:hover{background:#059669;border-color:#059669}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;flex:1;min-height:0;overflow:hidden}.left-panel{display:flex;flex-direction:column;gap:.4rem;min-height:0;overflow:hidden}.right-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}.keyboard-hints{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:.25rem;background:#1f293780;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.hint-item{display:flex;align-items:center;gap:.25rem;font-size:10px;color:#d1d5db}.hint-item kbd{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;min-width:20px;text-align:center;box-shadow:0 1px 2px #0003;font-family:inherit}.footer{background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.2rem;text-align:center;color:#9ca3af;border-top:1px solid rgba(255,255,255,.1);font-size:10px}@media (max-width: 1200px){.main-content{grid-template-columns:1fr}.right-panel{max-height:300px}}@media (max-width: 768px){.input-group{grid-template-columns:1fr}.title{font-size:1.2rem}.main{padding:.5rem}.keyboard-hints{display:none}}*{margin:0;padding:0;box-sizing:border-box}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:linear-gradient(135deg,#0f172a,#1e3a5f,#0f172a);min-height:100vh;color:#e0e0e0}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1f2937}::-webkit-scrollbar-thumb{background:#4b5563;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6b7280}::selection{background:#f59e0b4d;color:#fff}